/* ------------------------------------- VARIABLES DE COLOR -------------------------------------*/
:root{
    --textoSeccion:#fcfcf7;
    --sombras:#F11F46
}

/* ------------------------------------- ESTILOS UNIVERSALES ------------------------------------- */


@font-face {
font-family: 'Nunito' ;
    src:url(/Fonts/NUNITO/Nunito-VariableFont_wght.ttf),
        url(/Fonts/NUNITO/Nunito-Italic-VariableFont_wght.ttf),;
        font-weight: normal;
        font-size: normal;
}

@font-face {
    font-family: 'Montserrat' ;
    src:url(/Fonts/MONTSERRAT/Montserrat-Italic-VariableFont_wght.ttf),
    url(/Fonts/MONTSERRAT/Montserrat-VariableFont_wght.ttf),;
    font-weight: normal;
    font-size: normal;
}

@font-face {
    font-family: 'Merriweather'; ;
    src:url(/Fonts/MERRIWEATHER/Merriweather-Regular.ttf),
    url(/Fonts/MERRIWEATHER/Merriweather-Italic.ttf),;
    font-weight: normal;
    font-size: normal;
}

html {
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

.resaltar{
    font-weight: bold;
}

body{
    background-color: #212121;
}


/* ------------------------------------- ESTILOS HEADER/NAVBAR ------------------------------------- */

.header {
    box-shadow: var(--sombras) 0px 0px 5px 0px;
    backdrop-filter: blur(3px);
    display: flex;
    background-color: rgb(0, 0, 0, 0.9);
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 4vh;
    
}
.contenedorLogo{
    display: flex;
    flex-basis: 25%;
    justify-content: flex-end;
}
.logoImg {
    /* padding: 0.5em 0.5em 0.5em 0.5em; */
    max-width: 30%;
    flex-grow: 1; 
}
.navBar {
    flex-basis: 50%;
    display: flex;
    flex-grow: 1;
    justify-content: center;
}
.menu {
    display: flex;
    width: 50%;
    align-items: center;
}
.menuItem {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-basis: 33%;
}

#Home:hover, #Servicios:hover, #Planes:hover,#Contacto:hover {
    color: #DE2925;
    transition: color 0.5s ease-in;
}


#Home::after, #Servicios::after, #Planes::after,#Contacto::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    background-color: #DE2925; 
    bottom: 0;
    left: 0;
    transition: width 0.3s ease-in-out;
}

#Home:hover::after, #Servicios:hover::after, #Planes:hover::after,#Contacto:hover::after {
    width: 100%; 
}

.menuItem a {
    position: relative; 
    display: inline-block; 
    padding-bottom: 2px; 
}
a{
    text-decoration: none;
    font-size: 1.2em;
    font-family: 'Merriweather',sans-serif;
    color: var(--textoSeccion);
    font-weight: 300;
    letter-spacing: 1.2px;
    cursor: pointer;
    
}

a:visited{
    color: var(--textoSeccion);
}

/* --------------------- BOTON : DISPLAY NONE, CUANDO IMPLEMENTEMOS LA CONSULTA DE SERVICIO AGREGAR Y CORREGIR */
.CtaBtn {
    padding: 1em;
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(133, 0, 0, 1) 50%, rgba(255, 50, 50, 1) 100%);
    color: var(--textoSeccion);
    border: 0.1px solid #ccc;
    border-radius: 20px;
    margin-right: 1em;
    font-weight: 700;
    display: none;
}

/* ------------------------------------- ESTILOS INICIO ------------------------------------- */

.main {
    background-image: url(IMG/fondoInicioLite.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 87vh;
}

.inicio {
    height: 87vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.contenedorTexto {
    justify-content: center;
    align-items: center;
    padding: 21px 6em 0px 18px;
    height: 100%;
    box-shadow: var(--sombras) 0px 1px 5px 2px;
    background-color: rgba(193, 0, 0, 0.64);
    display: flex;
    width: 57%;
    flex-direction: column;
    backdrop-filter: blur(10px);
    clip-path: polygon(0px 0px, 100% 0px, 77% 100%, 0% 100%);
}




.tituloPrincipal {
    padding: .7em;
    align-self: center;
    color: var(--textoSeccion);
    font-size: clamp(0.1em, 3.8vw, 4em);
}
.textoPrincipal {
    padding: 0em 2em 2em 1.8em;
    color: var(--textoSeccion);
    font-size: clamp(0.1em, 3vw, 3em);
}

/* ------------------------------------- ESTILOS SECCION SERVICIOS ------------------------------------- */

.Servicios {
    height: 100vh;
    background-color: #212121;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(IMG/FondoServicios.webp);
    background-size: cover;
    background-position-y: 8em;
    background-repeat: no-repeat;
}

.contenedorTextoSecundario{
    padding-bottom: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.tituloSecundario {
    align-self:center;
    color: var(--textoSeccion);
    font-size: clamp(1.5em, 4dvw, 3em);
    padding-top: 1.5em;
}
.textoSecundario {
    color: var(--textoSeccion);
    font-size: clamp(1em, 3dvw, 3.5em);
}


.contenedorServicio {
    /* padding: 1em 1em 2em 1em; */
    display: flex;
    flex-direction: row;
    /* width: 80dvw; */
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: stretch;
}

.cardServicio {
    backdrop-filter: blur(2px);
    background-color: #212121CC;
    align-items: center;
    border-radius: 20px;
    box-shadow: -1px 1px 9px 1px rgb(0, 0, 0, 0.8);
    flex-basis: 34%;
    display: flex;
    flex-direction: row;
    margin-bottom: 1em;
}

.cardImg{
    min-width: 8dvw;
    max-width: 40%;
}

.tituloTarjeta{
    color: var(--textoSeccion);
    padding: 0.8em 0.8em 0em 0.7em;
    font-size: clamp(0.9em, 1.8vw, 2em);
}

.textoTarjeta{
    color: var(--textoSeccion);
    font-size: clamp(0.6em, 1vw, 2em);
    padding: 1em;
}

 /* ------------------------------------- ESTILOS SECCION PLANES ------------------------------------- */


.Planes {
    justify-content: center;
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    background-image: url(IMG/fondoSeccionPlan.webp);
    background-position-x: -3em;
    background-position-y: 12em;
    background-repeat: no-repeat;
    background-size: cover;
}

.slider {
    position: relative;
    max-width: 60%;
    margin: 2em auto 0px;
    overflow: hidden;
}

.contenedorSlide{
    width: 600%;
    display: flex;
    transition: transform 0.8s ease-in;
}

.cardPlan {
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
    border-radius: 10px;
}



.contenedorTextoCard{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    
}
.textoCard{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.contenedorTextoCard > span{
    font-size: clamp(1.2em, 1.5dvw, 2em);
}

.imgPlan{
    left: 15px;
    top: 15px;
    position: relative;
    object-fit: cover;
    max-width: 30%;
}

.tituloPlan{
    padding: 0.5em 0em 0.2em 0.1em;
    font-size: clamp(1.8em, 2dvw, 2em);
}


.textoPlan{
    padding-right: 3em;

}
.CTA{
    font-size: 1.4em;
}
.precio{
    font-weight: 700;
    font-family: 'Montserrat',sans-serif;
    font-size: 2em;
    padding: 0.1em 0em 0.3em 0em;
}

.btnContacto{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(133, 0, 0, 1) 50%, rgba(255, 50, 50, 1) 100%);
    color: var(--textoSeccion);
    border: 0.1px solid #ccc;
    border-radius: 20px;
    padding: 15px;
    margin-left: 1em;
    margin-right: 10px;
    font-weight: 600;
    cursor: pointer;
}
.btnprecio{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em 1em 0.5em 1em;
}

.logowhat{
    width: 1.5em;
    margin-right: 0.5em;
}


.aMedida{
    padding: 0em 2em 0em 4em;
    font-size: clamp(1em, 2dvw, 3em);

}
.medida{
    padding: 1em;
}
.planmedida{
    left: 4em;
}
.prev, .next {
    opacity: 0;
    position: absolute;
    top: 50%;
    padding: 16px;
    font-size: 18px;
    color: var(--textoSeccion);
    cursor: pointer;
    background-color: rgba(0,0,0,0.1);
    transform: translateY(-50%);
    border-radius: 50%;
    transition: opacity 0.8s ease;
}

.prev{
    left: 5px;
}
.next{
    right: 5px;
}

.slider:hover .prev,.slider:hover .next{
    opacity: 1;
    
}


.footer{
    border-top: 1px solid black;
    padding: 0.2em;
    background-color: #fcfcf7;
    background-image: url(IMG/fondoFooterLite.webp);
    background-position-y: -7em;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-size: cover;
}
.footerIzq{
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.footerDer{
    padding-bottom: 1em;
    color: #f5f5f5;
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.textoFooter{
    color: var(--textoSeccion);
    font-size: clamp(1em, 2.8dvw, 2em);
    border-bottom: 1px solid #fcfcf7;
}

.footerIzq > a {
    font-size: clamp(0.5em, 1vw, 1.2em);
    
}

.footerDer > p {
    font-size: clamp(0.5em, 1.0vw, 2em);
    
}
.copyright{
    font-size: clamp(0.5em, 1.0vw, 2em);
    padding-bottom: 0.3em;
}


         
         
.btnContacto {
    background-image: linear-gradient(to right, #e52d27 0%, #b31217  51%, #e52d27  100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;            
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
  }

  .btnContacto:hover {
    background-position: right center; /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
  }
 

.THKMSG{
    border-radius: 5px;
    background-color: rgb(0, 0, 0, 0.8);
    font-size: clamp(1em, 1.5vw, 3em);
    color: #F5F5F5;
    padding: 9em;
}
/* --------------------------Estilos Formulario----------------------- */
.Formulario {
    padding: 3em;
    width: 100%;
    margin: 0 auto;
    display: flex;
}
.formLeft{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.formRight{
    padding: 1em 0em 0em 0em;
    background-repeat: no-repeat;
    background-image: url(/IMG/logolite.webp);
    width: 50%;
    margin-bottom: 3em;
    background-color: #cccccc36;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-size: contain;
    background-position-x: 10em;
}

.formContact {
    border: none;
    padding: 0em 1em 1em 1em;
    width: 100%;
    display: flex;
    flex-direction: column;

}
.formMsg{
    border: none;
    margin-top:1em ;
    padding: 1em;
    width: 100%;
}
.tituloForm{
    font-size: clamp(1em, 2.8vw, 3.2em);
}
.formText{
    padding: 2em 3em 1em 3em;
    color: var(--textoSeccion);
    font-size: clamp(0.5em, 1.3vw, 2em);
}

/* Estilo para el textarea */
#msg {
    background-color: rgb(0, 0, 0, 0.8);
    min-width: 100%;
    max-height: 15em;
    resize: none;
    font-size: clamp(1em, 1.2vw, 3em);
    padding: 0.5em;
}


/* Estilo para placeholders */
input::placeholder, #msg::placeholder, select::placeholder {
    font-size: clamp(0.1em, 1.2vw, 3em);
    color: #F5F5F5;
}
select,#msg{
    color: #F5F5F5;
}

/* Estilo base para los inputs y select */
input, select {
    background-color: rgb(0, 0, 0, 0.5);
    margin-bottom: 0.5em;
    font-size: clamp(0.5em, 1.2vw, 2em);
    padding: 0.3em;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Estilo cuando los campos están en foco */
input:focus, select:focus, #msg {
    border-color: #48e;
    outline: none;
}

/* Mantener borde gris cuando el campo está vacío */
input:placeholder-shown {
    border-color: #999;
}

/* Borde rojo cuando el campo es inválido */
input:invalid:not(:placeholder-shown) {
    border-color: red;
    color: red;
}

/* Borde verde cuando el campo es válido */
input:valid:not(:placeholder-shown) {
    border-color: green;
    color: green;
}
#Sendform{
    background-image: linear-gradient(to right, #e52d27 0%, #b31217 51%, #e52d27 100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
    border: none;
    cursor: pointer;
}
#Sendform:hover{
    background-position: right center;
    color: #fff;
    text-decoration: none;
}



/*---------------------------MEDIA QUERIES-----------------------------*/

@media (max-width: 1367px){
  .tituloPrincipal{
    padding: 1.5em 0em 0.5em 1.4em;
    font-size: clamp(0.1em, 3.5vw, 4em);
}
  
.textoPrincipal{
    font-size: clamp(0.1em, 2.3vw, 3em);
}
    .textoFooter{
    font-size: clamp(1em, 2.5dvw, 2em);
}

.Formulario{
    padding: 7em 0em 0em 0em;
}
.Servicios{
    padding: 4em 0em 0em 0em;
}
    .footerDer > p {
    font-size: clamp(0.5em, 1.0vw, 2em);
}
.copyright {
    font-size: clamp(0.5em, 1.0vw, 2em);
    padding-bottom: 0.5em;
}


@media (max-width: 414px){

    html{
        scroll-padding-top: 15vh; 
    }
    .CtaBtn{
    display: none;
    }
    .header{
        display: flex;
        flex-direction: column;
        
    }
    .logoImg{
        padding: 0;
        max-width: 12vh;
        flex-grow: 1;
    }
    .contenedorLogo{
        display: flex;
        justify-content: center;
    }
    .navBar{
        height: 10vh;
        padding: 1em 1em;
        width: 100dvw;
    }
    .menu{
        width: 100%;
    }
    .main, .inicio{
        height: 50vh;
    }

    .contenedorTexto{
        width: 72%;
        justify-content: center;
    }
    .Servicios{
        background-position-y: -4em;
        justify-content: space-evenly;
    }
    .cardServicio{
        flex-basis: 76%;
    }
    .Planes{
        background-position: -30em -5em;
        height: 75vh;
    }
    .contenedorTextoCard{
        justify-content: center;
    }
    .cardPlan{
        flex-direction: column;
        scroll-snap-align:center ;
    }
    .btnContacto{
        margin-left: 0.5em;
        padding: 10px 20px;
    }
    .btnprecio{
        flex-direction: row;
        padding: 0.5em 1em 1em 1em;
    }
    .precio{
        padding: 0.1em 0em 0em 0em;
    }
    .medida {
        padding: 0.5em 0em 0.5em 0em;
    }
    .slider{
        max-width: 100%;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .contenedorSlide{
        width: 600%;
    }
    .imgPlan{
        margin-bottom: -1.5em;
        margin-top: -20px;
        width: 30%;
    }
    .aMedida{
        padding: 0.1em 5em 0.5em 3.5em;
    }
    .footerDer{
        padding: 0.5em;
        width: 50%;
    }
    .footerIzq{
        padding-left: 0.5em;
    }
    .prev ,.next {
        display: none;
    }
    .planmedida{
        left: 0;
    }
    .legend{
            font-size: clamp(0.1em, 3.5vw, 4em);
    }
    input, select{
        margin-bottom: 1em;
        padding: 1em;
        font-size: clamp(0.5em, 3vw, 4em);
}
    .Formulario {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    } 
    .formRight{
        width: 100%;
        background-position-x: 0em;
    }
    .tituloForm{
        padding-bottom: 1em;
    }
    .formText{
        display: none;
    }
 
    input::placeholder, #msg::placeholder{
        font-size: clamp(0.5em, 3vw, 4em);
    }
    #msg{
        font-size: clamp(0.1em, 2.5vw, 4em);
        padding:0.8em;
    }
    
    .formStyle{
        background-position-x: 0em;
    }

}}