/* =========================================================
    ESTILOS BASE (GLOBALES Y FUENTES)
    ========================================================= */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: normal;
    scroll-behavior: smooth;
}
html {
    overflow-x: hidden;
}
:root {
    --9: 90%;
    --MainColor: #b29472;
    --AllH: 100%;
    --color-dark: #333333;
    --color-text-light: #ffffff;
    --color-accent-crema: #8a7657;
    --card-height: 350px;
    --logo-size: 15rem; 
}
@font-face {
    font-family: 'Sugar';
    src: url(/ASSETS/FONTS/brown-sugar.ttf);
}
@font-face {
    font-family: 'Campton';
    src: url(/ASSETS/FONTS/CamptonMedium.otf);
}

/* ANIMACIONES */
[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); }

/* =========================================================
    HEADER Y NAVEGACIÓN (MOBILE FIRST)
    ========================================================= */
.top {
    width: 100%;
    height: auto;
    background-image: url(/ASSETS/IMG/HeroSr.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5rem; 
    font-family: Campton;
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}
nav {
    width: 95%; 
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Top Banner */
.Top__Banner { 
    width: 100%; 
    height: auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
    z-index: 10; 
    padding-top: 0; 
}
.Box { position: relative; display: inline-block; vertical-align: middle; }
#logo { 
    max-width: var(--logo-size);
    width: 100%;
    height: auto;
    object-fit: contain;
    padding-bottom: 0;
}
.contact { text-decoration: none; color: white; display: inline-block; vertical-align: middle; line-height: normal; font-size: 0.9rem; }
.contactIcon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 4px; filter: invert(1); }
.langBox { position: relative; display: inline-block; z-index: 100; }
.langBtn { background: none; border: none; color: white; text-transform: uppercase; padding: 8px 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; cursor: pointer; }
.flag { width: 16px; height: 16px; }
.arrowIcon { width: 10px; height: 10px; display: inline-block; vertical-align: middle; }
.En { display: none; position: absolute; top: 100%; right: 0; background-color: #0c0c0c; backdrop-filter: blur(6px); min-width: 120px; padding: 8px; 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: 4px; padding: 4px 6px; font-size: 0.9rem; }
.langBox:hover .En { display: block; }

/* Bottom Banner (Menú) */
.Bottom__Banner {
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: column wrap;
    place-content: center;
    border-top: .1rem solid white; 
    z-index: 1;
    margin: 1rem auto 0;
    padding-top: 0.5rem;
}
.menu { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    list-style: none; 
    justify-content: center; 
    align-items: center; 
    width: 100%;
    padding: 10px 0;
}
.menu li > a { 
    text-decoration: none; 
    color: white; 
    transition: ease-in-out .3s; 
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    display: block; 
}
.menu li > a:hover { background-color: var(--MainColor); }

/* Hero Banner Específico de Servicios */
.Hero__Banner {
    width: 90%;
    height: auto;
    display: flex;
    place-content: center;
    flex-flow: column wrap;
    user-select: none;
    margin: 0 auto;
}
.Hero__Banner__Content {
    width: 100%; 
    height: auto;
    text-align: center;
    place-content: center;
    font-size: 1.5rem; 
    color: white;
    padding-bottom: 2rem;
}
.Hero__Banner__Content > span {
    display: block;
    padding-bottom: 1rem;
    font-family: Sugar;
    font-size: 3rem; 
    color: var(--MainColor);
    line-height: 1;
}
.Hero__Banner__Content > a {
    font-size: 1rem;
    text-decoration: none;
    color: white;
    padding: 0.8rem 1.5rem;
    border: .1rem solid white;
    border-radius: 4rem;
    transition: all ease-in-out .3s;
    display: inline-block;
    margin-top: 1rem;
}
.Hero__Banner__Content > a:hover {
    background-color: var(--MainColor);
    border: none;
}

/* =========================================================
    SECCIÓN DE SERVICIOS (MOBILE FIRST)
    ========================================================= */
.service__wrapper {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-direction: column;
    padding-bottom: 5rem;
}
.service_w_title {
    width: 100%;
    height: auto;
    color: var(--MainColor);
    text-align: center;
    font-family: Sugar;
    font-size: 3.2rem;
    padding-top: 5rem;
    padding-bottom: 1rem;
}
.service_w_p {
    width: 90%;
    height: auto;
    text-align: center;
    font-family: Campton;
    font-size: 1.1rem;
    color: #a7a7a7;
    margin-bottom: 2rem;
}
.service_w_content {
    width: 100%;
    height: auto;
    display: flex;
    place-content: center;
    padding: 2rem 5%; 
    flex-direction: column;
}
.card-group {
    max-width: 100%; 
    margin: 20px auto; 
    font-family: Campton;
}

/* Estilos base de la tarjeta (para Mobile First/Apilado) */
.card {
    display: flex;
    flex-direction: column; 
    height: auto; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative; /* Base para el posicionamiento absoluto en desktop */
    max-width: 500px; 
    margin: 0 auto; 
    margin-bottom: 30px; 
}
.card-image-wrapper {
    width: 100%;
    height: 220px; 
    position: relative;
    overflow: hidden;
}

.card-background-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}

/* Overlay en Mobile: Transparente (o casi) */
.card-image-wrapper::after { 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; 
    transition: background-color 0.4s ease;
    z-index: 5;
}

/* 🌟 CÓDIGO CLAVE MÓVIL: Contenido beige SIEMPRE VISIBLE y en flujo normal 🌟 */
.text-on-image {
    /* La clave es position: relative para que ocupe espacio y empuje el texto oscuro */
    position: relative; 
    bottom: auto;
    left: auto;
    right: auto;
    background-color: var(--color-accent-crema); 
    padding: 10px 15px; 
    opacity: 1; /* Siempre visible en móvil */
    transform: translateY(0); 
    transition: none; 
    z-index: 10;
    display: block; /* Aseguramos que ocupe el espacio */
    width: 100%; 
    min-height: auto; 
}
.text-on-image ul {
    list-style:inside;
    padding: 0;
    display: flex;
    flex-direction: column; /* Vertical en móvil */
    margin: 0;
    width: 100%;
    gap: 5px; 
    align-items: flex-start;
}
.text-on-image ul li {
    color: var(--color-text-light);
    position: relative;
    padding-left: 20px; 
    font-family: Campton;
    font-size: 0.9rem; 
    margin: 0; 
    width: 100%;
    flex-shrink: 1; 
}
.text-on-image ul li::before {
    content: "•";
    color: var(--color-text-light); 
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}
/* Fin de CÓDIGO CLAVE MÓVIL */

.card-text-content {
    flex: 1;
    background-color: var(--color-dark);
    color: var(--color-text-light);
    padding: 20px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s ease;
    font-family: Campton;
    user-select: none;
    font-size: 0.95rem;
    position: relative; /* Base para z-index */
}
.card-text-content .main-content h3 {
    margin-top: 0;
    padding-bottom: 1rem;
    font-size: 1.4rem;
}
.card-text-content .main-content p {
    font-size: 1rem;
}

.view-all {
    color: var(--color-text-light);
    text-decoration: none;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1rem;
    font-size: 1rem;
}
.arrow-icon {
    width: 12px;
    height: 12px; 
    object-fit: contain; 
    transition: transform 0.4s ease, filter 0.4s ease; 
    filter: invert(1); 
}

/* --- EFECTO HOVER PARA MÓVIL (Básicos) --- */
.card-estetica:hover .card-image-wrapper::after { background-color: transparent; }
.card-estetica:hover .view-all { color: var(--color-accent-crema); }
.card-estetica:hover .arrow-icon { transform: rotate(0deg); filter: invert(1); }


/* =========================================================
    SECCIÓN CONTACTO Y FOOTER (MOBILE FIRST)
    ========================================================= */
/* ... (Se mantiene igual) ... */
.Contact { 
    width: 100%; 
    height: auto; 
    background-color: white;
    display: flex; 
    place-content: center; 
    flex-direction: column; 
    text-align: center; 
}
.form { 
    width: 90%; 
    height: auto; 
    align-self: center; 
    display: flex; 
    flex-direction: column;
    padding-top: 3rem; 
    padding-bottom: 3rem; 
}
.form__data { 
    width: 100%; 
    height: auto; 
    background-color: #eaeaea; 
    display: flex; 
    place-content: top; 
    flex-direction: column; 
    text-align: center; 
    gap: 1.5rem; 
    order: 2; 
    padding: 2rem 0;
}
.form__data h1 { font-family: Campton; font-size: 1.8rem; padding-top: 0; color: #4b4b4b; }
.form__img { width: 100%; height: 200px; order: 1; }
.form__img img { width: 100%; height: 100%; object-fit: cover; }
form { padding-bottom: 0; }
form div { padding-bottom: 1rem; }
input { color: #636363; width: 90%; padding: 0.8rem; font-family: Campton; font-size: 1rem; border:1px black solid }
form button { border: none; color: white; background-color: var(--MainColor); padding: .5rem 3rem; border-radius:10rem; font-family: Campton; font-size: 1.1rem; cursor: pointer; transition: .3s all ease-in-out; }
form button:hover { background-color: #3a3a3a; color: white; }
#stack { padding-bottom: 2rem; }
.contact-options { gap: 5px; height: auto; display: flex; align-items: center; justify-content: center; padding-top: 1rem; padding-bottom: 3rem; flex-direction: column; }
.contact__directions { display: flex; align-items: center; justify-content: center; width: 90%; height: auto; flex-direction: column; }
.contact-item { padding: 8px 0; text-align: center; color: #3a3a3a; font-family: Campton; font-size: 1rem; letter-spacing: 0.5px; border-right: none; border-bottom: 1px solid #3a3a3a30; width: 100%; }
.contact-item a { text-decoration: none; color: #3a3a3a; text-transform: uppercase; display: block; }
.contact-item:last-child { border-bottom: none; }
.rs{ display: block; }

footer { width: 100%; height: auto; background-color: #3a3a3a; display: flex; place-content: center; flex-direction: column; padding: 2rem 1rem; }
.footer__img { margin: 0 auto; width: 70%; max-width: 200px; height: auto; }
.footer__img img { width: 100%; height: 100%; object-fit: contain; }
.footer__links { margin: 0 auto; width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; padding-top: 1rem; }
.footer__links a { text-transform: uppercase; text-decoration: none; color: white; font-family: Campton; position: relative; padding-bottom: .3rem; font-size: 0.9rem; }
.footer__links a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background: currentColor; transition: width .3s ease; }
.footer__links a:hover::after { width: 100%; }


/* =========================================================
    MEDIA QUERY (ESCRITORIO / TABLET GRANDE)
    ========================================================= */
@media (min-width: 768px) {
    
    /* HEADER */
    /* ... (Se mantiene igual) ... */
    :root {
        --logo-size: 20rem;
    }
    .top {
        gap: 7.5rem;
        padding-bottom: 10rem;
    }
    nav {
        width: var(--9);
        height: 15rem;
    }
    .Top__Banner, .Bottom__Banner {
        width: 95%;
    }
    .menu {
        flex-direction: row; 
        gap: 3rem;
        padding: 0;
    }
    .menu li > a {
        font-size: 1rem;
        padding: 1rem;
    }
    .Hero__Banner__Content {
        font-size: 4rem; 
    }
    .Hero__Banner__Content > span {
        font-size: 8rem; 
    }
    .Hero__Banner__Content > a {
        padding: 1rem 2rem;
    }

    /* SERVICIOS */
    .service_w_title {
        font-size: 4.5rem;
    }
    .service_w_p {
        width: 60%;
        font-size: 1.2rem;
    }
    .service_w_content {
        padding: 2rem;
    }
    .card-group {
        max-width: 1000px;
        margin: 40px auto;
    }
    .card {
        flex-direction: row; 
        height: var(--card-height); 
        max-width: none;
    }
    
    /* Invertir orden de imagen/texto en tarjetas pares */
    .card-group:nth-child(even) .card-image-wrapper {
        order: 2; 
    }
    .card-group:nth-child(even) .card-text-content {
        order: 1; 
    }

    .card-image-wrapper {
        flex: 1;
        height: 100%; 
        order: 1; 
        overflow: hidden; 
    }
    .card-text-content {
        order: 2; 
        flex: 1;
        padding: 30px;
        font-size: 1rem;
        position: relative;
    }
    
    /* 🌟 CÓDIGO CLAVE ESCRITORIO: Transforma la lista a HOVER 🌟 */
    .card-image-wrapper::after { 
        background-color: rgba(0, 0, 0, 0.4); 
    }
    .text-on-image {
        /* SOBREESCRIBE las propiedades móviles para el hover de escritorio */
        position: absolute; 
        bottom: 0; /* Posicionado en la base de la tarjeta */
        left: 0;
        right: 0;
        padding: 8px 15px; 
        opacity: 0; /* Oculto por defecto */
        transform: translateY(100%); /* Desliza hacia abajo para ocultar */
        transition: opacity 0.4s ease, transform 0.4s ease;
        display: flex; /* Para poner los ítems en fila */
        z-index: 20;
        width: 100%; 
    }
    .text-on-image ul {
        flex-direction: row; /* Horizontal en escritorio */
        flex-wrap: wrap; 
        justify-content: center; 
        align-items: center;
        gap: 5px 0;
    }
    .text-on-image ul li {
        padding-left: 0; 
        font-size: 0.95rem; 
        margin: 0 10px; 
        width: auto;
    }
    .text-on-image ul li::before {
        content: ""; /* Quita el punto */
    }
    /* Fin de CÓDIGO CLAVE ESCRITORIO */

    /* --- EFECTO HOVER (Activado para escritorio) --- */
    .card-estetica:hover .card-image-wrapper::after { 
        background-color: transparent; 
    }
    .card-estetica:hover .text-on-image {
        opacity: 1; 
        transform: translateY(0); /* Desliza hacia arriba para mostrar en la base */
    }
    .card-estetica:hover .view-all {
        color: var(--color-accent-crema);
    }
    .card-estetica:hover .arrow-icon {
        transform: rotate(90deg);
        filter: brightness(2);
    }

    /* CONTACTO Y FOOTER */
    /* ... (Se mantiene igual) ... */
    .form { 
        width: 80%; 
        height: 55rem; 
        flex-direction: row;
        padding-top: 6rem;
    }
    .form__data { 
        width: 49%; 
        order: 2;
        gap: 4rem;
    }
    .form__data h1 {
        font-size: 3rem;
        padding-top: 3rem;
    }
    .form__img { 
        width: 49%; 
        order: 1;
        height: 100%;
    }
    .contact__directions {
        flex-direction: row;
        width: 80%;
        max-width: 1000px;
    }
    .contact-item {
        border-right: 1px solid #3a3a3a;
        border-bottom: none;
        padding: 0 25px;
        font-size: 1.6rem;
        width: auto;
    }
    .contact-item:last-child { border-right: none; }
    
    footer { padding: 7rem; }
    .footer__img { width: 50%; height: 10rem; max-width: none; }
    .footer__links {
        width: 80%;
        height: 10rem;
        flex-direction: row;
        gap: 4rem;
        padding-top: 0;
    }
}