:root {
    --rosa-suave: #F4DDE4;   
    --beige-luxury: #FAF9F7; 
    --dorado: #C2A14D;      
    --texto-oscuro: #3F3F3F;
    --blanco: #FFFFFF;
}

* {
    margin: 0; padding: 0; box-sizing: border-box;
}

/* --- AJUSTE DE NAVEGACIÓN --- */
html {
    scroll-behavior: smooth;
    /* Reducido a 90px para que el título quede más centrado bajo el header */
    scroll-padding-top: 95px; 
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--beige-luxury);
    color: var(--texto-oscuro);
    line-height: 1.6;
}

/* --- SECCIONES (Espaciado reducido) --- */
.seccion-area {
    padding: 50px 5%; /* Antes 100px, ahora 60px para mayor cercanía */
    background-color: var(--beige-luxury);
}

.main-header {
    background-color: rgba(255, 255, 255, 0.98);
    padding: 0.8rem 5%;
    position: fixed;
    width: 100%; top: 0; z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

#menu-toggle {
    display: none;
}

/* --- SECCIÓN EQUIPO CARRUSEL 3D (AJUSTADO) --- */

.equipo-3d-fondo {
    background-color: #FFF0F3; 
    padding: 80px 0;
    overflow: hidden;
}

.titulo-seccion {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 20px;
}

.carrusel-equipo-manual {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.viewport-equipo {
    width: 100%;
    overflow: hidden;
    padding-top: 120px; 
}

.track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-equipo-3d {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 0 10%;
}

.foto-3d-contenedor {
    flex: 1;
    background-color: white;
    border-radius: 30px;
    height: 400px;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    box-shadow: 20px 20px 0px rgba(194, 161, 77, 0.1);
}

.img-3d {
    width: 120%;
    max-width: 450px;
    height: auto;
    margin-top: -150px; 
    z-index: 10;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.15));
}

/* --- BLOQUE DE INFORMACIÓN CENTRADO --- */
.info-equipo-3d {
    flex: 1;
    text-align: center; /* Centra el texto dentro de su columna */
}

.info-equipo-3d h3 {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem; /* Nombre en grande */
    margin-bottom: 5px;
    color: var(--texto-oscuro);
}

.rol-dorado {
    color: var(--dorado); /* Color dorado para el rol */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.anios-exp {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #444;
}

.bio-equipo {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    max-width: 450px; /* Evita que el párrafo sea muy ancho */
    margin: 0 auto; /* Lo mantiene centrado si hay espacio */
}

/* Flechas */
.flecha {
    background: var(--dorado);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    z-index: 20;
}

.flecha-izq { left: 20px; }
.flecha-der { right: 20px; }

@media (max-width: 600px) {
    /* 1. Forzamos el diseño horizontal (Lado a Lado) */
    .card-equipo-3d {
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        gap: 15px; /* Espacio reducido entre foto e info */
        padding: 0 10px;
        text-align: left; /* Alineamos el texto a la izquierda para el modo horizontal */
    }

    /* 2. Ajustamos el contenedor de la foto (Cuadro blanco) */
    .foto-3d-contenedor {
        flex: 0 0 110px; /* Ancho fijo pequeño para la caja */
        height: 140px;   /* Altura reducida */
        border-radius: 15px;
        margin-bottom: 0; /* Quitamos el margen inferior de PC */
        box-shadow: 10px 10px 0px rgba(194, 161, 77, 0.1);
    }

    /* 3. Reescalamos la imagen 3D para que sobresalga proporcionalmente */
    .img-3d {
        width: 140%; /* Más grande que el contenedor para dar volumen */
        max-width: 160px;
        margin-top: -60px; /* El "pop-out" ajustado a escala móvil */
        filter: drop-shadow(0 8px 15px rgba(0,0,0,0.15));
    }

    /* 4. Reducción drástica de fuentes para que quepan al lado */
    .info-equipo-3d {
        flex: 1;
        text-align: left; /* Consistencia con el diseño horizontal */
    }

    .info-equipo-3d h3 {
        font-size: 1.2rem; /* Nombre destacado pero compacto */
        margin-bottom: 2px;
    }

    .rol-dorado {
        font-size: 0.7rem;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .anios-exp {
        font-size: 0.65rem;
        margin-bottom: 5px;
    }

    .bio-equipo {
        font-size: 0.65rem;
        line-height: 1.3;
        max-width: 100%;
    }

    /* 5. BOTONES (Flechas) más pequeños */
    .flecha {
        width: 32px;  /* Reducido de 50px */
        height: 32px; /* Reducido de 50px */
        font-size: 0.8rem;
        z-index: 30;
    }

    .flecha-izq { left: 5px; }
    .flecha-der { right: 5px; }
    
    /* Bajamos un poco el track para que la cabeza no choque con el título en móvil */
    .viewport-equipo {
        padding-top: 70px;
    }
}


.menu-icon {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.menu-icon span {
    width: 25px;
    height: 2px;
    background: var(--texto-oscuro);
    transition: 0.3s;
}


.main-header {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 1rem 5%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}


@media (max-width: 600px) {
    html {
        scroll-padding-top: 80px; /* Ajustado a la nueva altura del header móvil */
    }
}

/* --- Estructura del Logo Combinado --- */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Quita el subrayado del enlace */
    gap: 15px; /* Espacio entre la imagen y el texto */
}

.logo-img {
    height: 50px; /* Tamaño moderado para que no sature */
    width: auto;
    transition: transform 0.3s ease;
}

.logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--texto-oscuro);
    line-height: 1;
}

.gold-text {
    color: var(--dorado);
    font-weight: 300;
    margin-left: 2px;
}

/* --- Ajustes Responsive --- */

@media (max-width: 768px) {
    .logo-img {
        height: 40px; /* Reducimos un poco en tablets/móviles */
    }

    .logo-text {
        font-size: 1.3rem; /* Texto un poco más pequeño para que quepa todo */
    }

    .nav-links {
        display: none; /* Ocultamos links de navegación en móvil */
    }
}

@media (max-width: 480px) {
    .logo-link {
        gap: 8px; /* Menos espacio en pantallas muy pequeñas */
    }
    
    .logo-text {
        font-size: 1.1rem;
    }
}



.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--texto-oscuro);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--dorado);
}

.btn-gold {
    background-color: var(--dorado);
    color: white;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    transition: transform 0.3s, background-color 0.3s;
    display: inline-block;
}

.btn-gold:hover {
    background-color: #b08d4a;
    transform: translateY(-2px);
}

.inicio-impacto {
    min-height: 100vh;
    background:
        linear-gradient(
            rgba(0,0,0,0.35),
            rgba(0,0,0,0.45)
        ),
        url("Recursos/Gemini_Generated_Image_9ptppw9ptppw9ptp.png") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 120px 20px 60px;
}

.contenido-inicio {
    max-width: 760px;
    padding: 40px 50px;
}

.subtitulo {
    font-size: clamp(0.7rem, 2.5vw, 0.85rem);
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0.9;
}


.contenido-inicio h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    margin-bottom: 20px;
    line-height: 1.15;
    margin: 20px 0;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.contenido-inicio p {
    font-size: clamp(0.95rem, 3vw, 1.2rem);
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.boton-dorado-grande {
    background-color: var(--dorado);
    color: white;
    padding: clamp(14px, 4vw, 18px) clamp(28px, 6vw, 40px);
    text-decoration: none;
    font-size: clamp(0.8rem, 3vw, 1rem);
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.boton-dorado-grande:hover {
    background-color: #b08d4a;
    letter-spacing: 2px;
}

/* --- Estilos Generales de Área --- */
.seccion-area {
    padding: 50px 5%;
    background-color: var(--beige-luxury);
}


.titulo-principal-area {
    text-align: center;
    margin-bottom: 60px;
}

.titulo-principal-area h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin-bottom: 10px;
}

.layout-area {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    align-items: start;
}

/* --- Tarjeta de Especialista --- */
.perfil-especialista {
    position: sticky;
    top: 120px;
}

.tarjeta-autoridad {
    background: white;
    padding: 40px 30px;
    border-radius: 0 50px 0 50px; /* Diseño asimétrico elegante */
    text-align: center;
    box-shadow: 15px 15px 0px var(--rosa-suave);
    border: 1px solid rgba(197, 160, 89, 0.2);
}

.contenedor-foto img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--dorado);
    margin-bottom: 20px;
}

.tarjeta-autoridad h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.cargo {
    color: var(--dorado);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 2px;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
}

.bio-corta {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #777;
}

/* --- Carruseles --- */
.subtitulo-carrusel {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--dorado);
    display: inline-block;
    padding-bottom: 5px;
}

.grupo-carrusel {
    margin-bottom: 50px;
}

.carrusel-manual {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none; /* Oculta scroll en Firefox */
}

.carrusel-manual::-webkit-scrollbar { display: none; } /* Oculta scroll en Chrome */

.tarjeta-item {
    min-width: 260px;
    background: white;
    padding: 20px;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.tarjeta-item:hover {
    transform: translateY(-10px);
}

.tarjeta-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}

.tarjeta-item h5 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--texto-oscuro);
}

.tarjeta-item p {
    font-size: 0.85rem;
    color: #888;
}

.fondo-rosado-tenue {
    background-color: #FFF0F3; /* Un rosa muy pálido y sofisticado */
}

/* --- Grid de Especialistas --- */
.equipo-manicuristas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 900px;
    margin: 0 auto 60px;
}

.tarjeta-staff {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.tarjeta-staff:hover {
    transform: translateY(-5px);
}

.tarjeta-staff img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 2px solid var(--dorado);
}

.tarjeta-staff h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--texto-oscuro);
}

.tarjeta-staff span {
    font-size: 0.75rem;
    color: var(--dorado);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Destaque para la especialista con Quiropedia --- */
.tarjeta-staff.especial {
    border: 1px solid var(--dorado);
    background: linear-gradient(145deg, #ffffff, #fff5f7);
}

.cargo {
    display: block;
    margin-top: 5px;
    font-size: 0.75rem;
    color: var(--dorado);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* --- Controles de Navegación uñas--- */
.controles-flechas {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.flecha-btn {
    background-color: var(--dorado);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flecha-btn:hover {
    background-color: var(--texto-oscuro);
    transform: scale(1.1);
}

/* Ajuste para que el carrusel no muestre la barra de scroll pero permita deslizar */
.carrusel-manual {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 0;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.carrusel-manual::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}


/* Puedes reutilizar los estilos de .layout-area y .tarjeta-item que hicimos para Cabina */

.contenedor-cejas {
    max-width: 1200px;
    margin: 0 auto;
}

/* Un toque especial para las fotos de cejas: que sean más alargadas */
#carrusel-mirada .imagen-servicio {
    height: 220px; /* Un poco más de altura para apreciar el detalle del ojo */
}

.tarjeta-autoridad.jefa {
    border: 2px solid var(--dorado);
    background: #fff;
    position: relative;
    overflow: hidden;
}

.perfil-asistente {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px dashed var(--dorado);
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.perfil-asistente img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.perfil-asistente strong {
    display: block;
    font-size: 0.9rem;
    color: var(--texto-oscuro);
}

.perfil-asistente span {
    font-size: 0.7rem;
    color: #888;
}

.contenedor-ubicacion {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.mapa-container {
    width: 100%;
    margin-bottom: 30px;
}

.detalles-ubicacion {
    display: flex;
    justify-content: space-around;
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.dato strong {
    display: block;
    color: var(--dorado);
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .detalles-ubicacion {
        flex-direction: column;
        gap: 20px;
    }
}

/* --- DISEÑO ESTILISMO CLARO CON ÓVALOS --- */

.grid-estilismo-claro {
    display: grid;
    grid-template-columns: 1fr 1fr; /* División 50% / 50% */
    gap: 60px;
    align-items: center; /* Alineado al centro verticalmente */
    max-width: 1150px;
    margin: 0 auto;
}

/* --- Columna Izquierda: Texto y Lista --- */
.columna-texto-claro h2 {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--texto-oscuro);
    margin-bottom: 40px;
    line-height: 1.2;
}

.lista-servicios-numerada {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.item-servicio {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.numero-dorado {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    color: var(--dorado);
    font-weight: 600;
    line-height: 1;
    opacity: 0.8;
}

.detalle-servicio h5 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: var(--texto-oscuro);
}

.detalle-servicio p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* --- Columna Derecha: Galería de Óvalos (RECUPERADA) --- */

.galeria-ovalos.claro {
    display: flex;
    gap: 25px;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.imagen-ovalo {
    width: 160px;
    height: 380px;
    border-radius: 100px;
    overflow: hidden;
    /* AQUI ESTÁ EL CAMBIO: Aplicamos el borde a todos */
    border: 3px solid var(--dorado);
    /* Sombra suave dorada */
    box-shadow: 0 15px 25px rgba(194, 161, 77, 0.2); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    background-color: var(--beige-luxury); /* Fondo por si acaso */
}

/* El óvalo central sigue siendo más grande para destacar, pero ya comparte el borde */
.imagen-ovalo.central {
    width: 180px;
    height: 420px;
    /* Hemos quitado la línea de borde aquí porque ya la heredó de arriba */
    box-shadow: 0 20px 30px rgba(194, 161, 77, 0.3);
    z-index: 2;
}

.imagen-ovalo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Efectos Hover */
.imagen-ovalo:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 40px rgba(194, 161, 77, 0.4);
}

.imagen-ovalo:hover img {
    transform: scale(1.08);
}


/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .grid-estilismo-claro {
        grid-template-columns: 1fr; /* Una sola columna en tablets */
        gap: 60px;
        text-align: center;
    }

    /* Alineamos la lista a la izquierda en móvil para facilitar lectura */
    .item-servicio {
        text-align: left;
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Ajustamos tamaño de óvalos para tablets */
    .imagen-ovalo { width: 140px; height: 340px; }
    .imagen-ovalo.central { width: 160px; height: 380px; }
    
}

@media (max-width: 600px) {
    .columna-texto-claro h2 {
        font-size: 2.5rem;
    }
    
    .galeria-ovalos.claro {
        gap: 15px;
    }

    /* Ajustamos tamaño de óvalos para móviles */
    .imagen-ovalo { width: 100px; height: 260px; }
    .imagen-ovalo.central { width: 120px; height: 300px; }
    
    .numero-dorado { font-size: 1.8rem; }
    .detalle-servicio h5 { font-size: 1.1rem; }
}

/* --- DISEÑO CABINA GRID MODERNO (Referencia Galería) --- */

.contenedor-cabina-grid {
    max-width: 1200px;
    margin: 0 auto;
}

/* Grid principal con áreas definidas */
.grid-servicios-moderno {
    display: grid;
    /* Definimos una cuadrícula de 4 columnas y 3 filas */
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 250px); /* Altura base de las filas */
    gap: 20px;
    margin-top: 50px;
}

/* Estilo base de la tarjeta */
.tarjeta-grid {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* Sombra suave */
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.tarjeta-grid:hover {
    transform: translateY(-5px);
}

/* Imagen de fondo */
.img-fondo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tarjeta-grid:hover .img-fondo {
    transform: scale(1.05); /* Zoom suave al pasar el mouse */
}

/* Overlay con texto */
.overlay-tarjeta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    /* Degradado oscuro para que el texto blanco se lea bien */
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.overlay-tarjeta h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.overlay-tarjeta p {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 15px;
}

/* --- Tamaños específicos de tarjetas --- */

/* Grande Vertical: Ocupa 2 filas de alto */
.grande-vertical {
    grid-row: span 2;
}

/* Cuadrada: Tamaño estándar (1x1 en la grid) */
.cuadrada {
    grid-row: span 1;
    grid-column: span 1;
}

/* Horizontal: Ocupa 2 columnas de ancho */
.horizontal {
    grid-column: span 2;
}


/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    /* 1. Forzamos el contenedor a tener exactamente 2 columnas */
    .grid-servicios-moderno {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto; /* Dejamos que la altura sea flexible */
        gap: 12px; /* Espacio reducido para pantallas pequeñas */
        margin-top: 30px;
    }

    /* 2. Ajustamos la tarjeta Grande Vertical */
    /* Sigue ocupando 2 filas hacia abajo, pero solo 1 columna de ancho */
    .grande-vertical {
        grid-row: span 2;
        grid-column: span 1;
        height: 320px; /* Altura controlada para que no sea infinita */
    }

    /* 3. Ajustamos las tarjetas Horizontales */
    /* Para que vayan "de dos en dos", las volvemos cuadradas (span 1) */
    /* O si prefieres que una sola ocupe toda la línea, déjala en span 2 */
    .horizontal {
        grid-column: span 1; /* Ahora caben dos servicios en la misma línea */
        height: 150px; 
    }

    /* 4. Ajustamos las Cuadradas para que mantengan la proporción */
    .cuadrada {
        grid-row: span 1;
        grid-column: span 1;
        height: 150px;
    }

    /* 5. Estilizamos los textos para el tamaño pequeño */
    .tarjeta-grid h4 {
        font-size: 0.85rem;
        margin-bottom: 3px;
    }

    .tarjeta-grid p {
        font-size: 0.65rem;
        margin-bottom: 5px;
        line-height: 1.2;
    }

    .overlay-tarjeta {
        padding: 12px; /* Menos espacio interno para que quepa el texto */
    }
}

/* --- DISEÑO UÑAS ELEGANTE (Referencia Círculos) --- */

.contenedor-unas-elegante {
    max-width: 1150px;
    margin: 0 auto;
}

/* Grid principal de 3 columnas */
.grid-unas-elegante {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Espacio entre las tarjetas */
    margin-top: 50px;
}

/* Estilo de la tarjeta sólida */
.tarjeta-una-solida {
    background-color: #F9E4E8; /* Un tono rosa un poco más oscuro que el fondo de la sección para contraste */
    padding: 50px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-una-solida:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(194, 161, 77, 0.15); /* Sombra suave dorada al hover */
}

/* El marco circular para la imagen */
.marco-circulo-img {
    width: 200px;
    height: 200px;
    border-radius: 50%; /* Esto hace el círculo perfecto */
    overflow: hidden;
    margin-bottom: 30px;
    /* Opcional: un borde delgado dorado si quieres */
    /* border: 2px solid var(--dorado); */ 
}

.marco-circulo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el círculo sin deformarse */
    transition: transform 0.5s ease;
}

.tarjeta-una-solida:hover .marco-circulo-img img {
    transform: scale(1.1); /* Zoom suave en la imagen al pasar el mouse */
}

/* Tipografía */
.tarjeta-una-solida h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--texto-oscuro);
    margin-bottom: 20px;
}

.tarjeta-una-solida p {
    font-family: 'Playfair Display', serif; /* Usamos la misma fuente serif para la descripción como en la referencia */
    font-size: 0.95rem;
    color: #777;
    line-height: 1.7;
    margin-bottom: 35px;
    max-width: 90%; /* Evita que el texto sea muy ancho */
}

/* Botón estilo "LEARN MORE" */
.btn-saber-mas {
    display: inline-block;
    padding: 15px 35px;
    background-color: white;
    color: var(--texto-oscuro);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Para evitar salto al hover */
}

.btn-saber-mas:hover {
    background-color: var(--dorado);
    color: white;
    border-color: var(--dorado);
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    /* 1. Forzamos la cuadrícula a mantener 3 columnas */
    .grid-unas-elegante {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px; /* Reducimos el espacio entre tarjetas al mínimo */
        margin-top: 20px;
    }

    /* 2. Reducimos el acolchado de la tarjeta sólida */
    .tarjeta-una-solida {
        padding: 15px 5px; /* Padding mínimo para ganar espacio */
        min-height: auto;
    }

    /* 3. Reducimos el tamaño de los círculos de las imágenes */
    .marco-circulo-img {
        width: 65px; /* Tamaño pequeño para que quepan tres en línea */
        height: 65px;
        margin-bottom: 10px;
    }

    /* 4. Ajustamos las fuentes a un tamaño legible pero pequeño */
    .tarjeta-una-solida h4 {
        font-size: 0.65rem; /* Título muy compacto */
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    .tarjeta-una-solida p {
        font-size: 0.55rem; /* Texto de descripción pequeño */
        line-height: 1.2;
        margin-bottom: 15px;
        max-width: 100%;
    }

    /* 5. Adaptamos el botón para que no desborde la tarjeta */
    .btn-saber-mas {
        padding: 8px 10px;
        font-size: 0.5rem;
        letter-spacing: 1px;
    }
}

/* --- DISEÑO MIRADA (Tarjetas con Imagen Oscurecida y Lista) --- */

.contenedor-mirada-moderno {
    max-width: 1100px;
    margin: 0 auto;
}

.grid-mirada-especial {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas iguales */
    gap: 30px;
    margin-top: 50px;
}

.card-mirada {
    position: relative;
    height: 350px; /* Altura de la tarjeta */
    border-radius: 25px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.card-mirada:hover {
    transform: translateY(-5px); /* Efecto sutil al pasar el mouse */
}

/* Imágenes de fondo para cada tarjeta */
.cejas-bg {
    background-image: url("Recursos/cejas.jpg");
}

.pestanas-bg {
    background-image: url("Recursos/extensiones.jpg");
}

/* --- AQUÍ ESTÁ EL CAMBIO: Capa oscura uniforme --- */
.overlay-mirada-oscuro {
    position: absolute;
    inset: 0;
    /* Color negro con 70% de opacidad. Ajusta el 0.7 si lo quieres más claro u oscuro */
    background-color: rgba(0, 0, 0, 0.7); 
    display: flex;
    align-items: center;
    padding: 40px;
}

.contenido-mirada {
    color: white;
    /* Ya no hace falta limitar el ancho, el fondo oscuro permite que se lea todo */
    width: 100%; 
}

.contenido-mirada h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--dorado);
    text-align: left;
}

/* Estilo de la lista de puntos */
.lista-mirada {
    list-style: none;
    padding: 0;
}

.lista-mirada li {
    font-size: 1.05rem;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.4;
}

/* Punto dorado decorativo antes de cada item */
.lista-mirada li::before {
    content: "•";
    color: var(--dorado);
    font-size: 1.5rem;
    line-height: 1;
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
    /* 1. Forzamos las 2 columnas en la cuadrícula de Mirada */
    .grid-mirada-especial {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px; /* Espacio reducido entre tarjetas */
        margin-top: 20px;
    }

    /* 2. Ajustamos la altura de las tarjetas para que no se vean muy alargadas */
    .card-mirada {
        height: 220px; /* Altura reducida para pantallas pequeñas */
        border-radius: 15px; /* Bordes un poco más sutiles */
    }

    /* 3. Reducimos el padding del overlay para ganar espacio de lectura */
    .overlay-mirada-oscuro {
        padding: 15px;
    }

    /* 4. Ajustamos el tamaño de los textos */
    .contenido-mirada h3 {
        font-size: 0.9rem; /* Título compacto */
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    /* 5. Estilizamos la lista para que sea legible en miniatura */
    .lista-mirada li {
        font-size: 0.65rem; /* Fuente pequeña pero clara */
        margin-bottom: 6px;
        gap: 6px;
    }

    /* Reducimos el tamaño del punto decorativo */
    .lista-mirada li::before {
        font-size: 1rem;
    }
}

/* --- BOTÓN WHATSAPP --- */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img { width: 35px; }

.tooltip-wa {
    position: absolute;
    right: 75px;
    background: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    white-space: nowrap;
    color: #333;
}

/* --- FOOTER CORREGIDO --- */
.main-footer {
    background-color: #1a1a1a;
    color: #fff;
    padding: 60px 0 20px;
    font-family: 'Montserrat', sans-serif;
}

.contenedor-footer {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding: 0 20px;
}

/* LOGO: He eliminado el filter: invert para que no salga como un bloque blanco */
.logo-footer { 
    width: 120px; 
    margin-bottom: 20px; 
    display: block;
}

.columna-footer h4 {
    color: #d4af37; /* Dorado */
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.columna-footer ul { list-style: none; padding: 0; }
.columna-footer ul li { margin-bottom: 10px; }

/* Enlaces generales del footer */
.columna-footer ul li a { 
    color: #ccc; 
    text-decoration: none; 
    transition: 0.3s; 
}

.columna-footer ul li a:hover { 
    color: #d4af37; 
    padding-left: 5px; 
}

/* INSTAGRAM: Forzamos el color para que no sea azul */
.link-instagram {
    color: #ffffff !important; /* !important asegura que no sea azul */
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.link-instagram:hover {
    color: #d4af37 !important;
}

.btn-footer {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #d4af37;
    color: #d4af37;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.3s;
}

.btn-footer:hover { 
    background: #d4af37; 
    color: #000; 
}

.copyright {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-size: 0.8rem;
    color: #666;
}


.link-instagram {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

.link-instagram:hover {
    color: #d4af37;
}

.link-instagram img {
    filter: brightness(0) invert(1); 
}

.link-instagram:hover img {
    filter: none; /* Recupera el color original al pasar el mouse */
}

@media (max-width: 600px) {
    /* 1. Reducimos el padding general del footer para ganar espacio vertical */
    .main-footer {
        padding: 40px 0 15px; /* Reducido de 60px */
    }

    /* 2. Compactamos el espacio entre las columnas */
    .contenedor-footer {
        gap: 25px; /* Reducido de 40px */
        text-align: center; /* Centramos todo para un look más limpio en móvil */
    }

    /* 3. Logo más pequeño y centrado */
    .logo-footer {
        width: 90px; /* Reducido de 120px */
        margin: 0 auto 15px; /* Centrado automático */
    }

    /* 4. Reducción de fuentes para descripciones y enlaces */
    .columna-footer p {
        font-size: 0.8rem; /* Letras más finas para la descripción */
        line-height: 1.4;
        max-width: 280px;
        margin: 0 auto;
    }

    .columna-footer h4 {
        font-size: 1.1rem; /* Títulos de columna más pequeños */
        margin-bottom: 15px;
    }

    .columna-footer ul li {
        margin-bottom: 8px; /* Menos separación entre links */
    }

    .columna-footer ul li a {
        font-size: 0.85rem; /* Enlaces de servicios más compactos */
    }

    /* 5. Ajuste de redes sociales y botón de agenda */
    .link-instagram {
        font-size: 0.9rem;
        justify-content: center; /* Centramos el link de IG */
    }

    .btn-footer {
        padding: 8px 15px;
        font-size: 0.8rem;
        margin-top: 5px;
    }

    /* 6. Copyright más discreto */
    .copyright {
        margin-top: 30px;
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {

    .nav-container {
        flex-wrap: wrap;
    }

    .menu-icon {
        display: flex;
    }

    .nav-links {
        width: 100%;
        flex-direction: column;
        background: white;
        padding: 30px 0;
        gap: 25px;
        margin-top: 20px;
        display: none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
        border-radius: 0 0 20px 20px;
    }

    /* Mostrar menú al activar */
    #menu-toggle:checked ~ .nav-links {
        display: flex;
    }

    .btn-gold {
        width: fit-content;
        margin: 0 auto;
    }

    @media (max-width: 900px) {
        .layout-area {
            grid-template-columns: 1fr;
            gap: 40px;
        }
    }

    @media (max-width: 480px) {
        .detalles-ubicacion {
            padding: 20px;
        }
    }

    @media (max-width: 480px) {
        .whatsapp-float {
            width: 50px;
            height: 50px;
            bottom: 20px;
            right: 20px;
        }

        .whatsapp-float img {
            width: 28px;
        }
    }


    @supports (-webkit-touch-callout: none) {
        .inicio-impacto {
            min-height: -webkit-fill-available;
        }
    }

    @media screen and (max-width: 600px) {
    /* 1. Ajuste para Peluquería, Cabina, Uñas, Mirada y Ubicación */
    .titulo-principal-area h2, 
    .columna-texto-claro h2 {
        font-size: 1.8rem !important; /* Reducido de 3rem */
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    /* 2. Ajuste específico para la sección de Equipo */
    .titulo-seccion {
        font-size: 1.8rem !important;
        margin-bottom: 15px !important;
    }

    /* 3. Ajuste de los subtítulos de las secciones (si los usas) */
    .subtitulo-seccion, 
    .titulo-principal-area p {
        font-size: 0.75rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 5px !important;
    }

    /* 4. Ajuste del espaciado de las secciones para que respiren mejor con títulos pequeños */
    .seccion-area {
        padding: 40px 5% !important; /* Compactamos el espacio vertical */
    }
}

@media screen and (max-width: 600px) {
    /* Ocultamos el checkbox */
    #menu-toggle {
        display: none;
    }

    /* Posicionamos el icono al inicio */
    .menu-icon {
        display: flex !important;
        order: -1; /* Lo mueve al principio de la línea */
        margin-right: 10px;
    }

    /* --- LÓGICA DE APERTURA (El secreto técnico) --- */
    /* Cuando el checkbox está marcado, mostramos los links */
    #menu-toggle:checked ~ .nav-links {
        display: flex !important;
    }

}

}
/* --- AJUSTES PARA EL MOSAICO COMPACTO DE 9 SERVICIOS (CABINA) --- */

.grid-servicios-moderno.compact {
    grid-template-rows: repeat(3, 190px); /* 3 filas más pequeñas en PC en lugar de 250px */
    gap: 15px;
}

/* Ajuste de fuentes y padding en PC para ahorrar espacio */
.compact .overlay-tarjeta {
    padding: 18px; 
}

.compact .overlay-tarjeta h4 {
    font-size: 1.05rem; 
    margin-bottom: 5px;
    line-height: 1.2;
}

.compact .overlay-tarjeta p {
    font-size: 0.8rem;
    line-height: 1.3;
    margin-bottom: 0;
}

/* --- ADAPTACIÓN ULTRA COMPACTA PARA MÓVILES --- */
/* --- OPCIÓN: 3 COLUMNAS SIMÉTRICAS EN MÓVIL (CABINA) --- */
@media (max-width: 600px) {
    .grid-servicios-moderno.compact {
        grid-template-columns: repeat(3, 1fr) !important; /* Forzamos exactamente 3 columnas */
        grid-auto-rows: 130px; /* Altura controlada para que parezcan cuadritos */
        gap: 6px !important; /* Espacio mínimo para no desperdiciar pantalla */
    }

    /* Anulamos el mosaico y forzamos a que las 9 tarjetas midan lo mismo */
    .compact .grande-vertical,
    .compact .horizontal,
    .compact .cuadrada {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        height: 100% !important;
        border-radius: 12px !important; /* Bordes un poco más sutiles */
    }

    /* Reducimos el padding para que el texto tenga espacio */
    .compact .overlay-tarjeta { 
        padding: 8px 6px !important; 
        background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.15) 100%);
    }
    
    /* Letra ultra compacta para los títulos */
    .compact .overlay-tarjeta h4 { 
        font-size: 0.55rem !important; 
        margin-bottom: 3px !important; 
        line-height: 1.1;
        letter-spacing: 0px;
    }
    
    /* Párrafo en miniatura truncado a 3 líneas */
    .compact .overlay-tarjeta p {
        font-size: 0.45rem !important; 
        line-height: 1.2;
        margin-bottom: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Corta el texto si pasa de 3 líneas */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}
/* --- SECCIÓN CABINA: LLAMADO A LA ACCIÓN (CTA) --- */
.cabina-cta {
    text-align: center;
    margin-top: 50px; /* Espacio para separar el botón del mosaico */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Espacio entre la frase y el botón */
}

.frase-cta {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem; /* Tamaño ajustado para que se vea proporcional */
    color: var(--texto-oscuro);
    font-weight: 300; /* Hace que la letra sea fina y elegante */
    font-style: italic; /* Mantiene la inclinación */
    letter-spacing: 0.5px; /* Un toque de espacio para que respire mejor */
}

/* Ajustes para que en pantallas móviles se adapte perfectamente */
@media (max-width: 600px) {
    .cabina-cta {
        margin-top: 35px;
        gap: 15px;
    }

    .frase-cta {
        font-size: 1rem; /* Tamaño más cómodo para leer en teléfonos */
        padding: 0 10px;
    }
}

/* --- NUEVA SECCIÓN: BIENESTAR & CORPORAL --- */

.grid-servicios-corporal {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Cuadrícula perfecta de 2x2 en PC */
    grid-auto-rows: 210px; /* Altura ideal para que las fotos luzcan y el texto quepa holgado */
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.tarjeta-corporal {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.tarjeta-corporal:hover {
    transform: translateY(-5px);
}

.tarjeta-corporal:hover .img-fondo {
    transform: scale(1.05);
}

/* Reutilización del estilo del overlay de cabina */
.tarjeta-corporal .overlay-tarjeta {
    position: absolute;
    inset: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tarjeta-corporal .overlay-tarjeta h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 8px;
}

.tarjeta-corporal .overlay-tarjeta p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* Área del Botón final */
.corporal-cta {
    text-align: center;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.frase-cta-corp {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    color: var(--texto-oscuro);
    font-weight: 300; /* Estilo fino y moderno */
    font-style: italic;
    letter-spacing: 0.5px;
}

/* --- SECCIÓN BIENESTAR & CORPORAL (ESTILO APP / DESTINOS) --- */

.contenedor-corporal-app {
    max-width: 1200px;
    margin: 0 auto;
    /* Fondo blanco redondeado estilo tarjeta gigante como en la imagen */
    background-color: var(--blanco, #ffffff);
    padding: 50px;
    border-radius: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

/* Cabecera dividida */
.header-corporal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 40px;
}

.titulo-corporal h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    line-height: 1.1;
    color: var(--texto-oscuro);
}

.desc-corporal {
    max-width: 450px;
    text-align: left;
}

.desc-corporal p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-top: 10px;
}

/* Cuadrícula de 4 columnas */
.grid-corporal-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Estilo de la tarjeta individual */
.card-corp-vertical {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 360px; /* Altura que le da el formato vertical */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.card-corp-vertical:hover {
    transform: translateY(-8px);
}

.card-corp-vertical .img-fondo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.card-corp-vertical:hover .img-fondo {
    transform: scale(1.08);
}

/* Degradado oscuro sobre la imagen */
.overlay-corp {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Tipografía dentro de las tarjetas */
.overlay-corp h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.overlay-corp p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #e0e0e0;
}

/* Botón y frase final */
.corporal-cta {
    text-align: center;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-top: 1px solid #f0f0f0; /* Una sutil línea divisoria */
    padding-top: 40px;
}

.frase-cta-corp {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: var(--texto-oscuro);
    font-weight: 300;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* --- RESPONSIVE: ADAPTACIÓN PARA TABLETS Y MÓVILES --- */
/* --- RESPONSIVE CORREGIDO: 4 COLUMNAS HORIZONTALES EN TODO DISPOSITIVO --- */

@media (max-width: 1024px) {
    .header-corporal {
        flex-direction: column;
        gap: 15px;
    }
    
    .desc-corporal {
        max-width: 100%;
    }

    /* Mantenemos las 4 columnas en tablets */
    .grid-corporal-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 15px;
    }

    .card-corp-vertical {
        height: 300px;
    }
}

@media (max-width: 600px) {
    .contenedor-corporal-app {
        padding: 30px 12px; /* Reducimos el margen general para ganar espacio a los lados */
        border-radius: 20px;
    }
    
    .titulo-corporal h2 {
        font-size: 1.8rem !important; /* Ajustado al tamaño de tus otros títulos móviles */
        line-height: 1.2 !important;
        margin-bottom: 8px;
    }

    .desc-corporal p {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    /* FORZAR LAS 4 COLUMNAS EN UNA FILA HORIZONTAL EN MÓVIL */
    .grid-corporal-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px; /* Espacio mínimo entre las tarjetas para que no se encimen */
    }

    .card-corp-vertical {
        height: 180px; /* Altura a escala móvil para mantener la proporción vertical */
        border-radius: 12px; /* Bordes un poco más finos acordes al tamaño */
    }

    .overlay-corp {
        padding: 10px 6px; /* Ajuste de espacio interno para optimizar la lectura */
    }
    
    .overlay-corp h4 {
        font-size: 0.6rem !important; /* Tamaño compacto para que los títulos quepan en una línea */
        margin-bottom: 4px;
        letter-spacing: 0px;
        font-weight: bold;
    }
    
    .overlay-corp p {
        font-size: 0.5rem !important; /* Texto miniatura muy limpio */
        line-height: 1.1;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limita a un máximo de 3 líneas para evitar que se sature la tarjeta */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .corporal-cta {
        margin-top: 30px;
        padding-top: 25px;
        gap: 15px;
    }

    .frase-cta-corp {
        font-size: 1.2rem;
        padding: 0 10px;
    }
}

@media (max-width: 600px) {
    /* 1. Hace que la frase sea más pequeña y delicada */
    .frase-cta,
    .frase-cta-corp {
        font-size: 1rem !important; /* Letra mucho más pequeña */
        line-height: 1.3 !important;
        padding: 0 5px;
    }

    /* 2. Hace el botón ultra compacto y evita que se estire */
    .boton-dorado-pequeno {
        padding: 8px 16px !important; /* Mucho menos relleno arriba/abajo y a los lados */
        font-size: 0.65rem !important; /* Letra chiquita */
        letter-spacing: 0.5px !important;
        width: fit-content !important; /* Obliga al botón a ajustarse solo al texto */
        margin: 0 auto !important; /* Lo centra perfectamente */
    }

    /* 3. Reduce el espacio vacío entre la línea, la frase y el botón */
    .cabina-cta,
    .corporal-cta {
        margin-top: 25px !important;
        padding-top: 20px !important;
        gap: 10px !important; /* Acerca el botón a la frase */
    }
}

/* --- ESPACIADO DEL BOTÓN EN DISEÑO DE MIRADA --- */
.btn-mirada {
    margin-top: 25px; /* Separa el botón de la lista en PC */
}

/* Ajuste de altura en móvil para que quepa el botón sin amontonarse */
@media (max-width: 600px) {
    .btn-mirada {
        margin-top: 12px !important; /* Margen más compacto en teléfono */
    }
    
    .card-mirada {
        height: 260px !important; /* Le damos un poco más de altura a la tarjeta para que quepa todo perfecto */
    }
}

/* --- BOTONCITO MINI DORADO (PARA TARJETAS DE MIRADA) --- */
.btn-mini-dorado {
    background-color: var(--dorado) !important;
    color: #ffffff !important; /* Fuerza el texto blanco */
    padding: 8px 22px !important; /* Relleno pequeñito tipo píldora */
    text-decoration: none !important; /* Elimina el subrayado azul */
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem !important; /* Letra pequeña y delicada */
    border-radius: 30px !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block !important;
    margin-top: 15px !important; /* Separación de la lista */
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Sombrita sutil para que resalte del fondo oscuro */
}

.btn-mini-dorado:hover {
    background-color: #b08d4a !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(194, 161, 77, 0.4); /* Brillo dorado al pasar el mouse */
}

/* Reducción en móvil por si hace falta */
@media (max-width: 600px) {
    .btn-mini-dorado {
        padding: 6px 16px !important;
        font-size: 0.65rem !important;
        margin-top: 10px !important;
    }
}

/* --- DISEÑO DE TARJETAS EQUIPO (Estilo Glassmorphism / UI Moderna) --- */
.equipo-contenedor-interactivo {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 60px;
}

/* Tarjeta Base */
.equipo-card-moderna {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    position: relative;
}

/* Imagen que cubre toda la tarjeta */
.img-equipo-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Degradado oscuro para el texto (Igual a la imagen 2) */
.equipo-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0) 100%);
    color: white;
    display: flex;
    flex-direction: column;
}

.equipo-overlay-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin-bottom: 2px;
}

.equipo-cargo {
    color: var(--dorado);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.equipo-especialidad {
    font-size: 0.75rem;
    color: #ddd;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 5px;
}

.equipo-overlay-text p {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #f0f0f0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Botones Flechas PC */
.flecha-equipo {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: var(--dorado);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.flecha-equipo:hover {
    background: var(--dorado);
    color: white;
}

.flecha-izq { left: 10px; }
.flecha-der { right: 10px; }


/* ================= LOGICAS RESPONSIVAS ================= */

/* --- 1. VISTA PC (CARRUSEL 3D ESTILO PELÍCULAS) --- */
@media (min-width: 769px) {
    .equipo-track {
        height: 500px; /* Altura del carrusel */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .equipo-card-moderna {
        width: 300px;
        height: 450px;
        position: absolute;
        transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Transición súper suave */
        opacity: 0;
        pointer-events: none;
        left: 50%;
    }

    /* Clases inyectadas por JavaScript para la posición 3D */
    .equipo-card-moderna.active {
        transform: translateX(-50%) scale(1);
        z-index: 10;
        opacity: 1;
        pointer-events: auto;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    }

    .equipo-card-moderna.prev1 {
        transform: translateX(calc(-50% - 160px)) scale(0.85);
        z-index: 5;
        opacity: 0.6;
        cursor: pointer; /* Permite hacer clic para traerlo al frente */
        pointer-events: auto;
    }

    .equipo-card-moderna.next1 {
        transform: translateX(calc(-50% + 160px)) scale(0.85);
        z-index: 5;
        opacity: 0.6;
        cursor: pointer;
        pointer-events: auto;
    }

    .equipo-card-moderna.prev2 {
        transform: translateX(calc(-50% - 280px)) scale(0.7);
        z-index: 3;
        opacity: 0.2;
    }

    .equipo-card-moderna.next2 {
        transform: translateX(calc(-50% + 280px)) scale(0.7);
        z-index: 3;
        opacity: 0.2;
    }
}

/* --- 2. VISTA MÓVIL (SCROLL HORIZONTAL TÁCTIL) --- */
@media (max-width: 768px) {
    .flecha-equipo {
        display: none; /* Ocultamos flechas en móvil porque usarán el dedo */
    }

    .equipo-track {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory; /* Hace que frene exacto en cada tarjeta */
        gap: 20px;
        padding: 10px 20px 40px;
        -ms-overflow-style: none;  
        scrollbar-width: none; 
    }

    .equipo-track::-webkit-scrollbar {
        display: none; /* Oculta la barra fea de scroll */
    }

    .equipo-card-moderna {
        flex: 0 0 260px; /* Ancho fijo para las tarjetas en móvil */
        height: 400px;
        scroll-snap-align: center; /* Centra la tarjeta al detener el dedo */
        /* Reset de los estilos absolutos del PC */
        position: relative !important;
        left: auto !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: 1 !important;
        pointer-events: auto !important;
    }

    .equipo-overlay-text { padding: 20px 15px 15px; }
    .equipo-overlay-text h3 { font-size: 1.2rem; }
}