@font-face{
    font-family: "titles";
    src: url(../font/Roboto-Bold.ttf);
}
@font-face {
    font-family: "Subtitles";
    src: url(../font/Roboto-Medium.ttf);
}
@font-face {
    font-family: "paragraph";
    src: url(../font/Roboto-Regular.ttf);
}

::-webkit-scrollbar {
    display: none;
}

body{
    box-sizing: border-box; 
    letter-spacing: 0.4px; 
    font-size: 16px;
    overflow-x: hidden;
    position: relative;
}

:root {
    --lightGrey:#f5f5f5;
    --coral: #FC6565;
    --white:#FFFFFF;
    --blue:#3333FF;
    --black:#0000;
}

/*------------TITLES------------*/
.gral__titles h4{
    font-family: "Subtitles";
    color: var(--blue);
    font-size: calc(8px + (14 - 8) * ((100vw - 300px) / (1920 - 320))); /*14px*/   
}

.gral__titles h5{
    font-family: "Subtitles";
    font-size: calc(12px + (24 - 12) * ((100vw - 300px) / (1920 - 320))); /*14px*/  
    font-weight: 700; 
    margin-bottom: 16px;
}

.gral__titles h2{
    font-family: "Subtitles";
    font-size: calc(16px + (32 - 16) * ((100vw - 300px) / (1920 - 320))); /*40px*/ 
    font-weight: 700;  
}

.gral__titles h3{
    font-family: "Subtitles";
    font-size: calc(14px + (24 - 14) * ((100vw - 300px) / (1920 - 320))); /*40px*/   
}
.gral__titles h1{
    font-family: "titles";
    font-size: calc(24px + (48 - 24) * ((100vw - 300px) / (1920 - 320))); /*48px*/   
    font-weight: 700;
    white-space: wrap;
    text-transform: uppercase;
}
.gral__titles p{
    font-family: "paragraph";
    font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1920 - 320))); /*16px*/  
    text-align: center;
}

.gral-btn{
    align-items: center;
    margin-top: 32px;
}
.gral-btn a{ 
    padding: 16px 24px;
    border-radius: 8px;
    border: none;
    font-family: "paragraph";
    color: var(--white);
    text-decoration: none;
    font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1920 - 320))); /*16px*/
    color: var(--white);
    font-weight: 700;  
    background-color: var(--coral);
    -webkit-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
}

.gral-btn a:hover{
    color: var(--white);
    opacity: 0.8;
}

.gral-btn-smal button{ 
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    font-family: "paragraph";
    font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1920 - 320))); /*16px*/
    color: var(--white);
    font-weight: 700;  
    background-color: var(--coral);
    -webkit-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
}

/* ------------CTA------------ */
.Cta{
    width: 100vw;
    max-height: auto;
    background-color: var(--blue);
}

.Cta__content{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;  
}

.Cta__cel-dp{
    display: none;
}

.Cta__content p,
.Cta__content a>p{
    font-family: "paragraph";
    font-size: 0.875em;
    color: var(--white);
    margin-top: 16px;
}

.Cta__content a{
    text-decoration: none;
    font-weight: bolder;
}
.Cta__content a:hover{
    font-weight: normal;
}

@media (min-width: 990px){
    .Cta__cel-dp{
        display: block;
        
    }
}

/* ................NAVBAR-------------- */
.navbar-brand img{
    width: 2.5em; /*40px*/
}

.navbar-toggler{
    border: none!important;
}

.Navbar__link ul li a{
    font-family: "Subtitles";
    font-size: 0.87em; /*14px*/
}

/* ................HERO-------------- */
.Hero{
    position: relative;
    width: 100vw;
    text-align: center;
    margin-top: 2em; /*32px*/
}

.Hero__img img{
    width: 100%;
}

/* ................CARDS-------------- */
.Cards{
    width: 100vw;
    text-align: center;
    padding: 32px 8px;
    background-color: var(--lightGrey);
}

.Cards__title h2{
    margin-top: 32px;
    margin-bottom: 24px;
}

.Cards__cardGroup-1{
    display: flex;
    flex-direction: column;
    padding: 8px;
    justify-content: left;
    align-items: center;
    margin-bottom: 24px;
    background-color: var(--white);
    border-radius: 8px;
    -webkit-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.75);
}
.Cards__cardGroup-1 span svg{
    color: var(--coral);
    margin-bottom: 16px;   
    font-size: 32px;
}

@media (min-width: 990px){
    .Cards{   
        text-align: left;
    }
    .Cards__cardGroup-1{       
        margin-bottom:0px;
        margin-left: 8px;
    }
}

/* ................ABOUT-------------- */
.About{
    width: 100vw;
    text-align: center;
    padding: 48px 8px;
}

.About__title{
    margin-bottom: 32px;
}

.About__paragraphs{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 16px;
}

.paragraphs{
   flex: 1 1 50%;
}

.paragraphs p{
    text-align: justify;
}

.paragraphs>p>strong{
    color: var(--blue);
    text-transform: uppercase;
    
}

@media (min-width: 990px){
    .About__paragraphs{
        flex-direction: row;
        gap: 48px;
        padding: 16px;
    }
}

/* ................PROYECTS-------------- */
.Proyect{
    width: 100vw;
    text-align: center;
    padding: 32px 8px;
    background-color: var(--lightGrey);
}

.Proyect__content{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    gap: 16px;
}

/*HIGO*/
.Proyect__Higo{
    width: 90%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
}

.Proyect__Higo-description{
    width: 100%;
    text-align: left;
}

.Proyect__Higo-logo{
    width: 50%;    
} 

.Proyect__Higo-logo,
.Proyect__ViCoop-logo{
    font-family: "subtitles";
}

.Proyect__Higo-logo img{
    width: 2em; 
}

.Proyect__Higo-img img{
    width: 100%;
}

.Proyect__Higo-description p,
.Proyect__VoCoop-description p{
    text-align: justify;
    margin-top: 16px;
}

/*VICOOP*/
.Proyect__ViCoop{
    width: 90%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: center;
}

.Proyect__VoCoop-description{
    width: 100%;
    text-align: left;
}

.Proyect__ViCoop-logo{
    width: 50%;    
} 

.Proyect__ViCoop-logo img{
    width: 2em;    
} 

.Proyect__ViCoop-img img{
    width: 100%;
}

@media (min-width: 990px){
    .Proyect__Higo{
        flex-direction: row;
    }
    .Proyect__Higo-description{
        flex-basis: 50%;
    }

    .Proyect__ViCoop{
        flex-direction: row-reverse;
    }
    .Proyect__VoCoop-description{
        flex-basis: 50%;
    }
}

/* ................FORM-------------- */
.Form{
    width: 100vw;
    height: 100%;
    position: relative;
}
.content-form{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:center;
}

/* flex */
.flex-right{
    margin-top: 3em;
    margin-bottom: 3em;
}
/* subtitulo */
.contact-form h2 {
    font-family: "Subtitles", sans-serif;
    font-size:calc(16px + (32 - 16) * ((100vw - 300px) / (1920 - 320)));
    padding-top: 1em;
}

/* formulario */
.formulario input,.formulario button, .formulario textarea {
    border: 0;
    outline: 0;
    padding: 1em;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    display: block;
    width: 100%;
    margin-top: 1em;
    font-family: 'paragraph', sans-serif;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    resize: none;
    background-color: var(--lightGrey);
}
.formulario input::placeholder, .formulario textarea::placeholder{
    font-family: "paragraph", sans-serif;
}
.formulario input:focus, .formulario textarea:focus {
    -moz-box-shadow: 0 0px 2px var(--coral) !important;
    -webkit-box-shadow: 0 0px 2px var(--coral)!important;
    box-shadow: 0 0px 2px var(--coral) !important;
}
.formulario #btnEnviarEmail {
    font-family: "paragraph", sans-serif;
    font-weight: 900;
    color: var(--lightGrey);
    background: var(--coral);
    cursor: pointer;
    margin-bottom: 2em;
    width: 100%;
    border: 0px;
    border-radius: 10px;
    height: 3em;

}
.formulario #btnEnviarEmail:hover {
    -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
    -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
    box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}
.formulario textarea {
    height: 197px;
}
.half {
    float: left;
    width: 48%;
    margin-bottom: 1em;
}
.right {
    width: 50%;
}
.left {
    margin-right: 2%;
}

.flex-left{
    display: none;
}
@media (max-width: 480px) {
    .half {
        width: 100%;
        float: none;
        margin-bottom: 0;
}
}
/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}

@media (min-width: 990px){
    .flex-left{
        display: inline-block;
    }
    .content-form{
        justify-content: space-between;
    }
}

/* ................UP-------------- */
.Row__container{
    position: absolute;
    bottom: 1em;
    right: 1.5em;
    z-index: 1;
}

.Row__container a img{
    width: 2em;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}



/* ................FOOTER-------------- */
.Footer{
    width: 100vw;
    padding: 48px 16px;
    background-color: var(--lightGrey);
}

.Footer__logo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.Footer__logo img{
    width: 3em;
}

.Footer__infoContact h3{
    margin-top: 16px;
}

.Footer__infoContact ul li,
.Footer__socialMedia ul li{
    list-style: none;
    margin-top: 4px;
    font-family: "paragraph";
    font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1920 - 320))); /*16px*/  
}

.Footer__infoContact ul{
    text-align: left;
    padding-left: 0px;
}

.Footer__socialMedia ul{
    padding: 0;
    margin: 0;
}
.Footer__socialMedia ul li{
    display: inline-flex;
}

.Footer__copyright{
    text-align: center;
}
.Footer__copyright ul{
    margin-top: 32px;
}
.Footer__copyright ul li{
    list-style: none;
    font-family: "paragraph";
    font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1920 - 320))); /*16px*/  
}

/* ................WHATSAPP-------------- */
.WhatsApp__link{
    position: fixed;
    bottom: 6em;
    right: 1.5em;
    display: block;
}

/* ---------------------------
   ESTILOS PARA TÉRMINOS Y CONDICIONES
   softwaredelinterior.com.ar
---------------------------- */

/* Contenedor general */
.legal-container {
    max-width: 900px;
    margin: 80px auto;
    padding: 40px 35px;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #e7e7e7;
    font-family: "paragraph";
    line-height: 1.7;
}

/* Títulos principales */
.legal-container h1 {
    font-family: "titles";
    font-size: calc(22px + (36 - 22) * ((100vw - 300px) / (1920 - 320)));
    color: var(--blue);
    border-left: 6px solid var(--blue);
    padding-left: 14px;
    margin-bottom: 30px;
}

.legal-container h2 {
    font-family: "Subtitles";
    margin-top: 40px;
    margin-bottom: 12px;
    color: var(--blue);
    font-weight: 700;
    font-size: calc(18px + (26 - 18) * ((100vw - 300px) / (1920 - 320)));
}

.legal-container h3 {
    font-family: "Subtitles";
    margin-top: 28px;
    margin-bottom: 10px;
    color: var(--blue);
    font-weight: 600;
    font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1920 - 320)));
}

/* Párrafos */
.legal-container p {
    margin-bottom: 18px;
    font-size: calc(13px + (16 - 13) * ((100vw - 300px) / (1920 - 320)));
    text-align: justify;
}

/* Listas */
.legal-container ul,
.legal-container ol {
    padding-left: 22px;
    margin-bottom: 20px;
}

.legal-container li {
    margin-bottom: 8px;
    font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1920 - 320)));
}

/* Enlaces */
.legal-container a {
    color: var(--blue);
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid rgba(51, 51, 255, 0.3);
}

.legal-container a:hover {
    opacity: 0.8;
}

/* Separador visual */
.legal-divider {
    width: 100%;
    height: 1px;
    background: #dcdcdc;
    margin: 40px 0;
}

/* Footer legal */
.legal-footer {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #e7e7e7;
    color: #666;
    font-size: 0.9rem;
    text-align: center;
}

.legal-footer strong {
    color: var(--blue);
}

/* Botón volver (compatible con tu diseño) */
.legal-btn-back {
    display: inline-block;
    margin-top: 35px;
    padding: 12px 22px;
    background: var(--coral);
    color: var(--white);
    font-family: "paragraph";
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 2px 2px 7px -1px rgba(0,0,0,0.35);
}

.legal-btn-back:hover {
    opacity: 0.85;
}

/* Ajustes responsive */
@media (max-width: 600px) {
    .legal-container {
        padding: 30px 20px;
        margin: 40px 10px;
    }
}