/* RESET Y VARIABLES GLOBALES */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Añadido box-sizing para responsive */
    font-weight: normal;
    scroll-behavior: smooth;
}
:root{
    --9:90%;
    --MainColor:#b29472;
    --AllH:100%;
    --color-dark: #333333; /* Heredado del CSS anterior */
    --color-text-light: #ffffff; /* Heredado del CSS anterior */
    --color-accent-crema: #8a7657; /* Heredado del CSS anterior */
    --card-height: 350px; /* Heredado del CSS anterior */
    --Sec:#5d5d5d; /* Variable de color secundaria */
}
html{
    overflow-x: hidden;
}
img{
    width: 100%;
    height: 100%;
}
@font-face {
    font-family: 'Sugar';
    src: url(/ASSETS/FONTS/brown-sugar.ttf);
}
@font-face {
    font-family: 'Campton';
    src: url(/ASSETS/FONTS/CamptonMedium.otf);
}

/* --------------------------------------
    ANIMACIONES (De estilos anteriores)
    -------------------------------------- */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}
[data-animate].visible {
    opacity: 1;
    transform: none;
}
[data-animate="fade-in"] { transform: none; }
[data-animate="slide-up"] { transform: translateY(30px); }
[data-animate="slide-right"] { transform: translateX(-30px); }
[data-animate="zoom-in"] { transform: scale(0.8); }

/* --------------------------------------
    ESTILOS DE HEADER Y NAVEGACIÓN
    -------------------------------------- */
header{
    width: 100%;
    height: 49rem;
    background-color: #333333;
    display: flex;
    flex-flow: column wrap;
    place-content: center;
    color: white;
    font-family: Campton;
}
nav{
    width:var(--9);
    height: 15rem;
    display: flex;
    flex-flow: column wrap;
    place-content: center;
}
.Top__Banner{
    width: 95%;
    height: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}
.Box {
    position: relative;
    display: inline-block; 
    vertical-align: middle; 
}
#log {
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#logo {
    max-width: var(--logo-size, 20rem);
    width: 100%;
    height: auto;
    object-fit: contain;
    padding-bottom: 3rem;
}
.contact{
    text-decoration: none;
    color: white;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}
.contactIcon{
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    filter: invert(1);
}
.langBox {
    position: relative;
    display: inline-block;
    z-index: 100;
}
.langBtn {
    background: none;
    border: none;
    color: white;
    text-transform: uppercase;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    cursor: pointer;
}
.flag {
    width: 18px;
    height: 18px;
}
.arrowIcon {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}
.En {
    display: none;
    position: absolute;
    top: 10; 
    right: 0;
    background-color: #0c0c0c;
    backdrop-filter: blur(6px);
    min-width: 150px;
    padding: 10px;
    border-radius: 6px;
    z-index: 200;
    box-shadow: 0 4px 10px #00000035;
}
.En > a {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
}
.langBox:hover .En {
    display: block;
}
.Bottom__Banner{
    width: 95%;
    height: 45%;
    display: flex;
    flex-flow: column wrap;
    place-content: center;
    border-top: .2rem solid white;
    z-index: 1;
}
ul{
    display: flex;
    flex-direction: row;
    gap: 4rem;
    list-style: none;
}
li > a{
    text-decoration: none;
    color: white;
    transition: ease-in-out .3s;
    padding: 1rem;
}
li > a:hover{
    background-color: #b29472;
}

/* HERO BANNER */
.Hero__Banner{
    width: var(--9);
    height: 31rem;
    display: flex;
    place-content: center;
    flex-flow: column wrap;
    user-select: none;
    flex-direction: row;
}
.Hero__Banner__img{
    width: 50%;
    height: 100%;
}
.Hero__Banner__img img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.Hero__Banner__content{
    width: 50%;
    height: 100%;
    font-size: 1.5rem;
    text-align: center;
    display: flex;
    place-content: center;
    flex-direction: column;
}
.Hero__Banner__content h1{
    font-size: 3rem;
}
.Hero__Banner__content span{
    font-family: Sugar;
    font-size: 8rem;
    color: var(--color-accent-crema);
}
.Hero__Banner__content p{
    text-align: justify;
}

/* --------------------------------------
    ESTILOS DE SECCIÓN ACT (GINEVITALIS)
    -------------------------------------- */
.act{
    width: 100%;
    height: auto;
    background-color: white;
}
.act__title{
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Sugar;
    font-size: 6rem;
    padding-top: 5rem;
    color: var(--MainColor);
}
.act__subtitle{
    width: 100%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Campton;
    font-size: 1.5rem;
    text-align: center;
    padding: 0rem 12rem;
}
.act__img{
    width: 80%;
    height: 48rem;
    display: flex;
    place-self: center;
    margin: 0 auto;
    padding-bottom: 5rem;
}
.act__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------
    ESTILOS DE SECCIÓN VALUES (M, V, V)
    -------------------------------------- */
.values{
    width: 100%;
    height: auto; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #f7f7f7;
}
.values__title{
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 10rem;
    padding-bottom: 5rem;
    font-size: 6rem;
    font-family: Sugar;
    color: var(--MainColor);
}
.values__content{
    width: 90%; 
    height: auto; 
    padding-bottom: 60px;
}
.container-values {
    display: flex;
    justify-content: space-around;
    max-width: 1200px; 
    margin: 0 auto; 
    background-color: white; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.column {
    flex: 1;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    padding: 40px 20px; 
    border-right: 1px solid #ddd;
}
.column:last-child {
    border-right: none; 
}
.icon {
    margin-bottom: 20px;
}
.icon img {
    width: 90px;
    height: 90px;
    object-fit: contain; 
}
.column h2 { 
    font-size: 1.8em;
    color: #555; 
    font-weight: 500;
    margin-top: 15px;
    margin-bottom: 20px;
    font-family: Campton;
}
.column p { 
    font-size: 1.1em;
    line-height: 1.6;
    color: #666;
    max-width: 250px; 
    text-align: justify; 
    margin: 0;
    font-family: Campton;
}

/* --------------------------------------
    ESTILOS DE SECCIÓN DOCTOR
    -------------------------------------- */
.doctor{
    width: 100%;
    height: 40rem;
    background-color: #eee;
    padding: 3rem;
    display: flex;
    place-content: center;
    flex-direction: row; 
}
.doc__content{
    width: 50%;
    height: 100%;
    background-color: transparent;
    display: flex;
    place-content: center;
    flex-direction: column;
    padding: 3rem;
}
.doc__content h1{
    font-family: Sugar;
    color: var(--MainColor);
    font-size: 5rem;
}
.doc__content p{
    font-family: Campton;
    font-size: 1.3rem;
    text-align: justify;
}
.doc__img{
    width: 50%;
    height: 100%;
    background-color: transparent;
}
.doc__img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --------------------------------------
    ESTILOS DE SECCIÓN CONTACTO Y FORMULARIO
    -------------------------------------- */
.Contact{
    width: 100%;
    height: auto;
    background-color: white;
    display: flex;
    place-content: center;
    flex-direction: column;
    text-align: center;
}
.form{
    width: 80%;
    height: 55rem;
    align-self: center;
    display: flex;
    place-content: center;
    padding-top: 6rem;
    padding-bottom: 3rem;
    flex-direction: row; /* Desktop layout */
}
.form__data{
    width: 49%;
    height: 100%;
    background-color: #eaeaea;
    display: flex;
    place-content: top;
    flex-direction: column;
    text-align: center;
    gap: 4rem;
}
.form__data h1{
    font-family: Campton;
    font-size: 3rem;
    padding-top: 3rem;
    color: #4b4b4b;
}
.form__img{
    width: 49%;
    height: 100%;
}
.form__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
form{
    padding-bottom: 2rem;
}
form div{
    padding-bottom: 1rem;
}
input{
    color: #636363;
    width: 85%;
    padding: 1.5rem;
    font-family: Campton;
    font-size: 1.3rem;
    border:1px black solid
}
form button{
    border: none;
    color: white;
    background-color: var(--MainColor);
    padding: .5rem 12rem;
    border-radius:10rem;
    font-family: Campton;
    font-size: 1.5rem;
    cursor: pointer;
    transition: .3s all ease-in-out;
}
form button:hover{
    background-color: transparent;
    background-color: #3a3a3a;
    color: white;
}
#stack{
    padding-bottom: 3rem;
}
.contact-options {
    gap: 40px; 
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3rem;
    padding-bottom: 5rem;
}
.contact__directions{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 60%;
    flex-direction: row; /* Desktop layout */
}
.contact-item {
    padding: 0 25px;
    text-align: center;
    color: #3a3a3a;
    font-family: Campton;
    font-size: 1.6rem;
    letter-spacing: 1px;
    border-right: 1px solid #3a3a3a; 
}
.contact-item a{
    text-decoration: none;
    color: #3a3a3a;
    text-transform: uppercase;
}
.contact-item:last-child {
    border-right: none;
}

/* --------------------------------------
    ESTILOS DE FOOTER
    -------------------------------------- */
footer{
    width: 100%;
    height: auto;
    background-color: #3a3a3a;
    display: flex;
    place-content: center;
    flex-direction: column;
    padding: 7rem;
}
.footer__img{
    margin: 0 auto;
    width: 50%;
    height: 10rem;
}
.footer__img img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.footer__links{
    margin: 0 auto;
    width: 80%;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}
.footer__links a{
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    font-family: Campton;
    position: relative;
    padding-bottom: .3rem;
}
.footer__links a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: currentColor;
    transition: width .3s ease;
}
a:hover::after {
    width: 100%;
}


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

/* Estilos para Tabletas (<= 1024px) */
@media (max-width: 1024px) {
    /* HEADER & NAV */
    header { height: auto; }
    nav { width: 100%; height: auto; }
    .Top__Banner, .Bottom__Banner { width: 90%; margin: 0 auto; }
    #logo { max-width: 15rem; padding-bottom: 1rem; }
    ul { gap: 1.5rem; justify-content: center; }

    /* HERO BANNER */
    .Hero__Banner {
        width: 90%;
        height: auto;
        flex-direction: column; /* Apilar imagen y contenido */
        padding: 3rem 0;
    }
    .Hero__Banner__img, .Hero__Banner__content { width: 100%; height: auto; padding: 20px 0; }
    .Hero__Banner__content h1 { font-size: 2.5rem; }
    .Hero__Banner__content span { font-size: 6rem; }
    .Hero__Banner__content p { font-size: 1.1rem; }

    /* SECCIÓN ACT */
    .act__title { font-size: 4rem; height: auto; padding-top: 3rem; }
    .act__subtitle { font-size: 1.2rem; height: auto; padding: 1rem 4rem; }
    .act__img { width: 90%; height: auto; }

    /* SECCIÓN VALUES (M, V, V) */
    .values__title { font-size: 4rem; }
    .container-values { flex-wrap: wrap; }
    .column { width: 50%; border-right: none; border-bottom: 1px solid #ddd; }
    .column:nth-child(odd) { border-right: 1px solid #ddd; }
    .column:last-child { border-bottom: none; }

    /* SECCIÓN DOCTOR */
    .doctor { height: auto; padding: 0; flex-direction: column; }
    .doc__content, .doc__img { width: 100%; height: auto; padding: 2rem; }
    .doc__img { order: 1; }
    .doc__content { order: 2; padding: 2rem 5%; text-align: center; }
    .doc__content h1 { font-size: 4rem; }
    .doc__content p { max-width: 90%; margin: 0 auto; }

    /* SECCIÓN CONTACTO */
    .form {
        width: 90%;
        height: auto;
        flex-direction: column; /* Apilar imagen y formulario */
        padding-top: 3rem;
    }
    .form__img, .form__data {
        width: 100%;
        height: auto;
    }
    .form__data { order: 2; gap: 2rem; padding-bottom: 3rem; }
    .form__img { order: 1; }
    .form__data h1 { font-size: 2.5rem; padding-top: 1.5rem; }
    input { width: 90%; padding: 1rem; font-size: 1.1rem; }
    form button { padding: 0.5rem 8rem; font-size: 1.3rem; }

    /* OPCIONES DE CONTACTO */
    .contact__directions{
        width: 90%;
    }

    /* FOOTER */
    footer{ padding: 5rem 2rem; }
    .footer__img{ width: 70%; height: 8rem; }
    .footer__links{ width: 90%; height: auto; gap: 2rem; }
}

/* Estilos para Móviles (<= 768px) */
@media (max-width: 768px) {
    /* HEADER & NAV */
    .Top__Banner { flex-direction: column; align-items: center; gap: 10px; }
    .Box { width: 100%; text-align: center; }
    .Bottom__Banner { border-top: none; padding-top: 0; }
    ul { flex-direction: column; gap: 0; align-items: center; }
    li { width: 100%; text-align: center; border-top: .1rem solid rgba(255, 255, 255, 0.2); }
    li:last-child { border-bottom: .1rem solid rgba(255, 255, 255, 0.2); }
    li > a { display: block; padding: 1rem; }

    /* HERO BANNER */
    .Hero__Banner__content h1 { font-size: 1.8rem; }
    .Hero__Banner__content span { font-size: 4rem; }
    .Hero__Banner__content p { font-size: 1rem; }
    
    /* SECCIÓN ACT */
    .act__title { font-size: 2.5rem; }
    .act__subtitle { font-size: 0.9rem; padding: 0 1rem; }

    /* SECCIÓN VALUES (M, V, V) */
    .values__title { font-size: 3rem; padding-top: 4rem; }
    .container-values { flex-direction: column; box-shadow: none; }
    .column { width: 100%; border-right: none; border-bottom: 1px solid #ddd; }
    .column:nth-child(odd) { border-right: none; }
    .column p { max-width: 90%; }

    /* SECCIÓN DOCTOR */
    .doc__content h1 { font-size: 3rem; }
    .doc__content p { font-size: 1rem; }

    /* SECCIÓN CONTACTO */
    .form { width: 95%; padding-bottom: 1rem; }
    .form__data h1 { font-size: 2rem; }
    input { width: 95%; }
    #stack { padding-bottom: 2rem; }
    form button { padding: 0.5rem 5rem; font-size: 1.1rem; }
    
    .contact__directions{
        flex-direction: column; /* Apilar opciones */
    }
    .contact-item{
        border: none;
        padding: 10px 0;
        font-size: 1.2rem;
    }
    .rs{
        display: none; /* Ocultar los elementos con clase 'rs' si son redundantes */
    }
    .contact-options {
        padding-top: 1rem;
        padding-bottom: 3rem;
    }

    /* FOOTER */
    footer{ padding: 3rem 1rem; }
    .footer__img{ width: 80%; height: 6rem; }
    .footer__links{ 
        width: 100%; 
        height: auto;
        flex-direction: column;
        gap: 0.5rem; 
        padding-top: 1rem;
    }
    .footer__links a {
        padding: 5px 0;
    }
}