/* Agregalo aquí, al puro inicio */
html {
    scroll-behavior: smooth;
}
:root 
{
    --verde: #007a7a; --azul: #005b7f; --gris: #e0e0e0; 
}
* 
{ 
    margin: 0; padding: 0; box-sizing: border-box; 
}
body 
{ 
    font-family: 'Roboto', sans-serif; overflow-x: hidden; 
}
/* --- CORRECCIÓN PANTALLA DE CARGA (PRELOADER) --- */
#preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: #ffffff !important; 
    
    /* ESTA ES LA LÍNEA MÁGICA: Oculta el menú al cargar */
    z-index: 999999 !important; 
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: opacity 0.8s ease, visibility 0.8s ease !important;
}

.preloader-oculto {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Contenedor del logo */
.logo-loader {
    position: relative;
    width: 150px; /* Ajusta según el tamaño de tu logo */
}

/* El logo que se "llena" */
.logo-fill {
    width: 100%;
    filter: grayscale(100%) opacity(0.2); /* Logo de fondo tenue */
    display: block;
}

/* Capa que hace el efecto de llenado */
.logo-loader::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/logo-corto.png') no-repeat center;
    background-size: contain;
    animation: fillLogo 2s ease-in-out infinite; /* Animación de 2 segundos */
}

@keyframes fillLogo {
    0% {
        clip-path: inset(100% 0 0 0); /* Vacío */
    }
    50% {
        clip-path: inset(0 0 0 0); /* Lleno */
    }
    100% {
        clip-path: inset(0 0 0 0); /* Se mantiene lleno un momento */
    }
}

/* Clase para ocultar el preloader */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}

/* HEADER Y NAVEGACIÓN */
header 
{ 
    position: fixed; top: 0; width: 100%; z-index: 1000; 
    transition: 0.4s; background: transparent; padding: 25px 0; 
}
header.shrunk 
{ 
    background: rgba(255, 255, 255, 0.98); 
    padding: 10px 0; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.1); 
}
.header-container 
{ 
    max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; transition: 0.4s; 
}
header.shrunk .header-container 
{ 
    flex-direction: row; justify-content: space-between; padding: 0 5%; 
}
.logo-img-full 
{ 
    width: 300px; display: block; transition: 0.3s; 
}
.logo-img-short 
{ 
    width: 80px; display: none !important; 
}
header.shrunk .logo-img-full 
{ 
    display: none !important; 
}
header.shrunk .logo-img-short { display: block !important; }
.navigation ul { display: flex; list-style: none; gap: 20px; margin-top: 15px; transition: 0.3s; }
header.shrunk .navigation ul { margin-top: 0; }
.navigation a { text-decoration: none; color: #333; font-weight: 500; font-size: 14px; text-transform: uppercase; }
.formacion-grid { 
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide la pantalla en dos columnas iguales */
    gap: 20px;
    position: relative;
    align-items: center; /* Alinea el texto con el centro del carrusel */
}

.hero-swiper {
    height: 90vh; /* Altura del carrusel */
    width: 100%;
    margin-top: 140px; /* Margen para que no quede bajo el header estático */
    position: relative;
    overflow: hidden;
}
.hero-slide {
    position: relative;
    background-size: cover;      /* La imagen cubre todo el espacio */
    background-position: left center; /* Alineamos la imagen a la izquierda */
    background-repeat: no-repeat;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-slide::after 
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Degradado lineal que va de transparente (izquierda) al color de fondo (derecha) */
    /* El color #f4f4f4 debe coincidir con el fondo de tu página */
    background: linear-gradient
    (to right, 
                                rgba(244, 244, 244, 0) 0%,   /* Transparente total a la izquierda */
                                rgba(244, 244, 244, 0.4) 30%,/* Empieza a notarse el color */
                                rgba(244, 244, 244, 1) 70%,  /* Color sólido a partir de la mitad */
                                rgba(244, 244, 244, 1) 100%  /* Color sólido hasta el final */
    );
    z-index: 1; /* Pone la capa degradada sobre la foto */
}

.hero-slide 
{ 
    height: 100vh; display: flex; align-items: center; 
    background-size: cover; background-position: center;
    /* Degradado que funde a blanco en los bordes */
    background-image: 
        linear-gradient(to bottom, white 0%, transparent 15%, transparent 85%, white 100%),
        linear-gradient(to right, transparent 40%, white 100%);
}

.hero-overlay 
{
    position: relative;
    z-index: 2; /* Pone el texto POR ENCIMA del degradado para que sea legible */
    padding-left: 10%;
    max-width: 800px;
    color: var(--oscuro); /* El texto ahora se lee sobre el degradado */
    text-align: left;
}
.hero-overlay h1 
{
    font-family: 'Playfair Display', serif;
    font-size: 55px; /* Tamaño del título grande */
    margin-bottom: 20px;
    line-height: 1.2;
}
.hero-overlay p 
{
    font-size: 16px;
    margin-bottom: 25px;
    max-width: 600px;
}

.btn-agenda 
{ 
    background: var(--verde); color: white; padding: 16px 35px; 
    text-decoration: none; border-radius: 4px; display: inline-block;
    box-shadow: 0 10px 20px rgba(0,122,122,0.3);
}

/* SECCIÓN QUIÉN SOY Y FORMACIÓN */
.qs-container 
{ 
    max-width: 1000px; margin: 90x auto 80px; padding: 0 5%; position: relative; 
}
.pestaña-verde-grande 
{
background: var(--verde);
    display: flex;
    align-items: center;
    /* CAMBIO CLAVE: Ponemos un ancho mayor al del contenedor */
    /* Si el contenedor mide 1000px, puedes ponerle 1200px o 1400px */
    width: 750px; 
    height: 120px;
    border-radius: 0 20px 0 0;
    /* Posicionamiento absoluto: permite que la pestaña "flote" fuera del contenedor */
    position: absolute;
    top: -60px;
    /* Ajusta este valor para que el rectángulo salga de la pantalla por la izquierda */
    left: 40px; 
    z-index: 10; /* Siempre por encima del texto y la foto */
    padding: 0 30px;
}
.contorno-blanco 
{ 
    border: 2px solid white; padding: 5px 20px; color: white; 
}
.pestaña-verde-grande h2 
{ 
    font-family: 'Playfair Display'; font-size: 32px; 
}
.qs-intro 
{
     display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; margin-bottom: 60px; padding-top: 80px; 
}
.qs-text 
{
  /* 1. Aseguramos que el bloque use el 100% de su columna */
    width: 130%; 
    max-width: 1000%; 
    /* 2. Mínima sangría para que no toque el borde del contenedor */
    padding-left: 50px; 
    padding-right: 5px; 
    padding-top: 16px; /* Mantiene la distancia con la pestaña verde */
    z-index: 5;
}
.qs-text p 
{
/* CLAVE: Distribuye el texto para que llegue a ambos bordes (izquierdo y derecho) */
    /* Esto hace que el bloque se vea rectangular y completo */
    text-align: justify; 
    /* 4. Mejora la lectura en bloques anchos */
    line-height: 1.5; 
    font-size: 16px; 
    color: #444; 
    margin-bottom: 20px; 
    /* 5. Si quieres que el bloque se vea uniforme, deja la sangría inicial en 0 */
    text-indent: 0;
}

/* Ajuste de la columna derecha */
.qs-image {
    display: flex;
    flex-direction: column;
    align-items: center; 
    
    /* MODIFICACIONES CLAVE: */
    transform: translate(200px, -60px);
    position: relative;
    z-index: 15;        /* Asegura que quede por encima de otros fondos */
}

.qs-image img 
{ 
    width: 100%;
    max-width: 350px; /* Tamaño controlado de la foto */
    height: auto;
    border-radius: 5px;
    box-shadow: 15px 15px 0 var(--gris);
    margin-bottom: 40px; /* Espacio antes del carrusel */
}



.formacion-grid 
{ 
display: flex; /* Cambiamos a Flex para un control de espacio más rígido */
    display: flex; 
    justify-content: space-between;
    align-items: flex-start; /* CAMBIO: De 'center' a 'flex-start' para que empiece arriba */
    gap: 60px; 
    max-width: 1200px;
    margin: 0 auto 80px; /* CAMBIO: El -40px sube todo el bloque */
    position: relative;
    padding: 0 5%;
}
.formacion-grid > div:first-child 
{ 
    display: flex;
    flex-direction: column; /* Asegura que el título y la lista sigan en columna */
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 600px; /* Ajusta el ancho para que no se pegue al carrusel */
    
    /* ESTOS SON LOS CAMBIOS CLAVE */
    margin-top: -120px; /* Sube SOLO este bloque. Ajusta el número (-80px, -150px) a tu gusto */
    position: relative; /* Necesario para que el margen negativo funcione bien */
    z-index: 10; /* Asegura que no se superponga incorrectamente */
    padding: 0 5%;
}  
.contenedor-lista 
{
    width: 100%;
    display: block;
    clear: both; /* Esto ayuda si tienes elementos flotando que estorban */
}
  
/* Columna de Certificados (Derecha) */
.col-certificados 
{ 
    flex: 0 0 50%;
    
}

.sub-formacion 
{ 
    color: var(--azul); font-family: 'Playfair Display'; font-size: 26px; margin-bottom: 25px; 
}
.lista-check 
{
     list-style: none;  
}
.lista-check li 
{ 
    position: relative; padding-left: 30px; margin-bottom: 15px; font-size: 15px; color: #555; 
}
.lista-check li::before 
{
     content: '•'; position: absolute; left: 0; color: var(--verde); font-size: 20px; 
    }
.btn-outline-cv 
{ 
    border: 1px solid var(--verde); color: var(--verde); padding: 10px 30px; text-decoration: none; border-radius: 4px; display: inline-block; 
}

/* 1. Contenedor del botón para centrarlo y darle espacio */
.cv-action-area {
    width: 100%;
    display: flex;
    justify-content: center; /* Centrado horizontal (Eje X) */
    margin-top: -100px;       /* Espacio respecto al carrusel y formación */
    margin-bottom: 30px;
    clear: both;            /* Evita conflictos con elementos flotantes */
    position: relative;
    z-index: 10;
}

/* 2. Estilo del botón de descarga */
.btn-cv-download {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 35px;
    background: transparent;
    border: 2px solid var(--verde); /* Usa tu variable de color verde */
    color: var(--verde);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px; /* Estilo de píldora moderno */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

/* 3. Animación al pasar el mouse (Eje Y) */
.btn-cv-download:hover {
    background-color: var(--verde);
    color: #ffffff !important; /* El texto cambia a blanco */
    transform: translateY(-5px); /* El botón sube ligeramente */
    box-shadow: 0 10px 20px rgba(0, 122, 122, 0.25); /* Sombra suave verde */
}

/* 4. Estilo para el icono de PDF */
.btn-cv-download i {
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* El icono rota un poco al hacer hover */
.btn-cv-download:hover i {
    transform: rotate(10deg) scale(1.1);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .btn-cv-download {
        width: 90%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 13px;
    }
}

.seccion-certificados-centrada 
{
    width: 35%; /* Ancho aproximado de la columna de la foto */
    margin-left: auto; /* Empuja todo a la derecha */
    margin-right: 5%;  /* Ajusta según el margen de tu foto */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -20px; /* Súbelo o bájalo según prefieras */
    position: relative;
    z-index: 5
}
#bloque-derecha-certificados 
{
    width: 100%;
    max-width: 300px; /* El carrusel no debe ser más ancho que la foto */
    /* ELIMINADOS: transform, translate y margenes negativos */
}
/* CARRUSEL CERTIFICADOS PERSPECTIVA */
.divider-text-superpuesto {
   position: relative;
    width: 120%;
    text-align: center;
    margin-bottom: 20px;
}
.divider-text-superpuesto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--verde);
    z-index: 1;
}

.divider-text-superpuesto span {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 0 10px;
    color: var(--verde);
    font-family: 'Playfair Display';
    font-size: 20px;
}

/* Controla el tamaño de la "caja" del carrusel */
#certificados-swiper {
    width: 100%;
    max-width: 280px; /* Ancho máximo para que no invada la columna del texto */
    height: 200px;
    margin: 0 auto;
    
    /* EL MURO INVISIBLE: Corta todo lo que intente desbordarse a los lados, 
       pero deja 20px de respiro arriba y abajo para que no se corten las sombras */
    clip-path: inset(-20px 0 -20px 0);
}

/* Controla el tamaño de la foto individual (el diploma) */
#certificados-swiper .swiper-slide {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Transición suave al girar */
}

/* --- ANIMACIÓN DE DESTAQUE EN HOVER --- */
#certificados-swiper .swiper-slide img {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efecto cuando el mouse está encima de una foto del carrusel */
#certificados-swiper .swiper-slide:hover img {
    transform: scale(1.08); /* Crece un poco */
    box-shadow: 0 15px 30px rgba(0, 122, 122, 0.3); /* Sombra verde */
    filter: brightness(1.1); /* Brilla un poco */
}

/* --- ESTILOS DEL MODAL (IMAGEN GRANDE) --- */
.modal-overlay {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 10000; /* Por encima del preloader y whatsapp */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro traslúcido */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.modal-content {
    max-width: 80%;
    max-height: 80%;
    border-radius: 5px;
    animation: zoomIn 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 30px;
    right: 50px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.modal-close:hover { color: var(--verde); }

@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Encendemos SOLO la del centro, la anterior y la siguiente */
#certificados-swiper .swiper-slide-active,
#certificados-swiper .swiper-slide-next,
#certificados-swiper .swiper-slide-prev {
    opacity: 1 !important;
    visibility: visible !important;
}

#certificados-swiper .swiper-button-next::after,
#certificados-swiper .swiper-button-prev::after {
    font-size: 14px; /* Flechas más pequeñas */
}

/* Estética de la imagen */
#certificados-swiper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Evita que el diploma se recorte */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.biblioteca-section { padding: 60px 5%; background: #fff; font-family: 'Playfair Display', serif; }
.titulo-seccion-libros { text-align: center; font-size: 45px; margin-bottom: 40px; color: #333; }

/* TABS ESTILO IMAGEN */
.tabs-libros 
{ 
    display: flex; 
    justify-content: center; /* Esto centra los botones horizontalmente */
    border-bottom: 2px solid #eee; 
    margin-bottom: 40px; 
    gap: 0; /* O puedes poner un pequeño gap si quieres espacio entre botones */ 
}
.tab-btn 
{ 
    padding: 15px 35px; 
    border: 1px solid #eee; 
    border-bottom: none; /* Quitamos el borde inferior para que mande la línea verde */
    background: #f9f9f9; 
    cursor: pointer; 
    color: #888; 
    transition: all 0.3s ease; 
    font-size: 16px;
    font-family: inherit;
}
.tab-btn.active 
{ 
    background: #ffffff; 
    color: var(--verde); 
    border-bottom: 3px solid var(--verde); /* Línea verde más gruesa para destacar */
    font-weight: bold;
}
/* Efecto hover suave */
.tab-btn:hover 
{
    color: var(--verde);
    background: #f1f1f1;
}

/* GRID */
.tab-content { display: none; }
.tab-content.active { display: block; }
.libros-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

/* TEXTOS */
.biblioteca-info h3 { font-size: 26px; color: #333; margin-bottom: 15px; }
.autores { color: var(--verde); font-weight: bold; margin-bottom: 10px; }
.resumen { font-size: 14px; line-height: 1.6; color: #666; text-align: justify; }
.btn-comprar { 
    display: inline-block; margin-top: 20px; padding: 10px 40px; 
    border: 2px solid var(--verde); color: var(--verde); text-decoration: none; border-radius: 5px;
}

/* LIBRO 3D (PORTADA, CONTRA Y LOMO) */
.book-scene 
{ 
    width: 280px;
    height: 400px;
    perspective: 1500px;
    margin: 0 auto;
}
.book-3d 
{ 
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Inclinación inicial para que el usuario note el volumen y el guanche */
    transform: rotateY(-20deg); 
    cursor: pointer; 
}
/* Al pasar el mouse, gira pero NO a 180 exactos, para que el lomo y páginas sigan visibles */
.book-scene:hover .book-3d 
{
    transform: rotateY(-160deg);
}

.book-face 
{ 
   position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden; /* Oculta la cara interna del cubo */
}
/* --- ESTILOS DEL LIBRO 3D (REVISADO) --- */
/* Contenedor general de la cara frontal */
.book-face.book-front 
{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    z-index: 2;
    border-radius: 0 4px 4px 0; /* Esquinas redondeadas suaves a la derecha */
    
    /* --- AQUÍ ESTÁ EL REMARCO DE LA COSTURA --- */
    /* 1. Un borde muy fino y oscuro a la izquierda (la hendidura) */
    border-left: 2px solid rgba(0, 0, 0, 0.25);
    
    /* 2. Sombra interna para dar efecto de profundidad (bisagra) */
    box-shadow: inset 5px 0 10px rgba(0, 0, 0, 0.15);
    
    /* Asegura que la imagen no tape el remarco */
    box-sizing: border-box; 
    overflow: hidden;
}



/* --- LAS 6 CARAS DEL LIBRO --- */
/* 1. Tapa Frontal */
.book-front 
{
    width: 280px; height: 400px;
    transform: translateZ(20px);
    z-index: 2;
    border-radius: 0 4px 4px 0;
}
.book-front img 
{ 
   width: 100%;
    height: 100%;
    object-fit: cover;
    /* Un pequeño margen negativo para que la imagen se "meta" bajo la costura */
    margin-left: -2px; 
    border-radius: 0 4px 4px 0; 
}
/* 2. Contraportada */
.book-back 
{
    width: 280px; height: 400px;
    transform: rotateY(180deg) translateZ(20px);
    border-radius: 4px 0 0 4px;
}
.book-back img 
{ 
    width: 100%; height: 100%; object-fit: cover; border-radius: 4px 0 0 4px; 
}
.book-face img 
{ 
    width: 100%; height: 100%; object-fit: cover; 
}

/* 3. Lomo (Color de la empastadura) */
.book-spine {
    width: 40px; height: 400px;
    left: 0;
    background: #065e5e; /* Ajusta este verde al de tu diseño */
    transform: rotateY(-90deg) translateZ(20px);
}
/* Lomo del libro (para que la unión se vea natural) */
.book-side.book-spine {
    position: absolute;
    width: 40px; /* Grosor del libro */
    height: 100%;
    /* Usa un tono ligeramente más oscuro que el color principal de la portada */
    background: #065e5e; 
    left: -20px; /* Centrado en el eje de rotación */
    transform: rotateY(-90deg);
    transform-origin: right;
    /* Sombra para que se vea la unión con la portada */
    box-shadow: inset -5px 0 10px rgba(0,0,0,0.1);
}
/* 4. Guanche Derecho (Las hojas vistas de lado) */
.book-pages-right {
    width: 40px; height: 394px; /* Un poco más pequeño para que las tapas sobresalgan */
    left: 240px; top: 3px;
    background: #f4f4f4; /* Color base del papel */
    /* Textura de líneas finas simulando muchas hojas */
    background-image: repeating-linear-gradient(to right, #dcdcdc 0px, #f4f4f4 1px, #f4f4f4 3px);
    transform: rotateY(90deg) translateZ(20px);
}
/* 5. Guanche Arriba (Las hojas vistas desde arriba) */
.book-pages-top {
    width: 274px; height: 40px;
    left: 3px; top: 0;
    background: #f4f4f4;
    background-image: repeating-linear-gradient(to bottom, #dcdcdc 0px, #f4f4f4 1px, #f4f4f4 3px);
    transform: rotateX(90deg) translateZ(20px);
}
/* 6. Guanche Abajo (Las hojas vistas desde abajo) */
.book-pages-bottom {
    width: 274px; height: 40px;
    left: 3px; top: 360px;
    background: #f4f4f4;
    background-image: repeating-linear-gradient(to top, #dcdcdc 0px, #f4f4f4 1px, #f4f4f4 3px);
    transform: rotateX(-90deg) translateZ(20px);
}

/* --- SECCIÓN OPINIONES MIXTA (IMAGEN + GOOGLE) --- */
.seccion-opiniones-mixta {
    padding: 70px 5%;
    background-color: #f1f4f5; /* Un tono gris/azulado muy suave como en tu diseño */
    font-family: 'Roboto', sans-serif;
}

.container-mixto {
    max-width: 1100px;
    margin: 0 auto;
}

/* Título */
.header-opiniones-mixto {
    text-align: center;
    margin-bottom: 40px;
}

.header-opiniones-mixto h2 {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    color: #202124;
    margin-bottom: 10px;
}

.google-rating-resumen {
    font-size: 18px;
    font-weight: bold;
    color: #202124;
}

.google-rating-resumen i {
    color: #fbbc04;
    font-size: 16px;
}

.text-muted {
    color: #70757a;
    font-size: 14px;
    font-weight: normal;
    margin-left: 8px;
}

/* Layout de 2 Columnas */
.grid-opiniones-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mitad imagen, mitad comentarios */
    gap: 50px;
    align-items: center;
    margin-bottom: 40px;
}

/* --- IMAGEN CON EFECTO DE DESVANECIMIENTO --- */
.columna-imagen {
    display: flex;
    height: 100%;
}

.columna-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    
    /* Esta es la magia: desvanece la imagen de negro (sólido) a transparente hacia la derecha */
    -webkit-mask-image: linear-gradient(to right, black 55%, transparent 100%);
    mask-image: linear-gradient(to right, black 55%, transparent 100%);
}

/* --- RESPONSIVE (Móviles) --- */
@media (max-width: 768px) {
    .grid-opiniones-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* En celular, la foto está arriba, así que el desvanecimiento va hacia abajo */
    .columna-imagen img {
        -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
        
        /* Opcional: limitar la altura máxima en celular para que no ocupe toda la pantalla */
        max-height: 400px; 
    }
}

.seccion-informativa {
    padding: 80px 5%;
    background-color: #f9f9f9;
}

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

.columna-texto { flex: 1; }

.columna-texto h2 { color: var(--azul); font-size: 2.5rem; margin-bottom: 20px; }
.lista-check { list-style: none; margin-top: 20px; }
.lista-check li { margin-bottom: 10px; color: #555; }
.lista-check i { color: var(--verde); margin-right: 10px; }

/* Estilo del Carrusel */
.columna-carrusel { flex: 1; }

.contenedor-fotos-simple {
    position: relative;
    width: 100%;
    height: 450px; /* Altura del carrusel */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.foto-simple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Todas ocultas */
    transition: opacity 1.5s ease-in-out; /* Velocidad del cambio */
}

.foto-simple.activa {
    opacity: 1; /* Solo la activa se ve */
}

.g-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Colores Avatar */
.bg-azul { background-color: #1967d2; }
.bg-naranja { background-color: #e37400; }
.bg-verde { background-color: #1e8e3e; }

.g-content {
    flex-grow: 1;
}

.g-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.g-name {
    font-weight: bold;
    color: #202124;
    font-size: 15px;
}

.g-date {
    color: #70757a;
    font-size: 12px;
}

.g-stars {
    color: #fbbc04;
    font-size: 13px;
    margin-bottom: 8px;
}

.g-text {
    font-size: 14px;
    color: #3c4043;
    line-height: 1.5;
    margin: 0;
}

/* --- BOTÓN CENTRAL CON EFECTO CURRÍCULUM --- */
.contenedor-boton-resena {
    text-align: center;
    margin-top: 40px;
}

.btn-resena-animado {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 35px;
    background-color: transparent; /* Diseño transparente igual al CV */
    color: var(--verde, #065e5e); /* Texto en tu verde institucional */
    border: 2px solid var(--verde, #065e5e);
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}
.star-wrapper {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.star-empty {
    position: absolute;
    font-size: 18px;
    transition: opacity 0.3s ease;
}

.star-filled {
    position: absolute;
    font-size: 18px;
    color: #fbbc04; /* Color amarillo Google */
    opacity: 0; /* Oculta al inicio */
    transform: scale(0.5);
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por encima (IGUAL AL DEL CV) */
.btn-resena-animado:hover {
    transform: translateY(-5px); /* Se levanta igual que el CV */
    background-color: var(--verde, #065e5e);
    color: #ffffff; /* El texto cambia a blanco */
    box-shadow: 0 10px 20px rgba(6, 94, 94, 0.3); /* Sombra del mismo color que el botón */
}
.btn-google-cv:hover .star-empty {
    opacity: 0;
}

.btn-google-cv:hover .star-filled {
    opacity: 1;
    transform: scale(1.1); /* Crece ligeramente al rellenarse */
}

/* Ajuste para que el icono del CV no se confunda si usas la misma clase */
.btn-google-cv span {
    position: relative;
    z-index: 2;
}
.btn-resena-animado i {
    font-size: 18px;
}

.btn-curriculum-animado {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #065e5e; /* Tu verde institucional oscuro */
    color: white;
    padding: 16px 40px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Bordes redondeados tipo píldora */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* La animación al pasar el ratón */
.btn-curriculum-animado:hover {
    transform: translateY(-5px); /* Se levanta 5 píxeles */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* La sombra se hace más grande y difusa */
    background-color: #044646; /* Se oscurece un poco */
    color: white;
}

/* --- RESPONSIVE (Móviles) --- */
@media (max-width: 768px) {
    .grid-opiniones-layout {
        grid-template-columns: 1fr; /* Pone los comentarios debajo de la imagen en celular */
        gap: 30px;
    }
}

/* --- SECCIÓN VIDEO VERTICAL (DISEÑO EXACTO) --- */
.seccion-video-vertical {
    padding: 80px 5%;
    background-color: #f9f9f9;
}

.container-video-vertical {
    max-width: 1000px; /* Controla el ancho máximo de toda la sección */
    margin: 0 auto;
    text-align: center;
}

/* Reproductor Grande Arriba */
.reproductor-grande {
    width: 100%;
    max-width: 800px; /* Tamaño máximo del video */
    margin: 0 auto 30px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.reproductor-grande video {
    width: 100%;
    display: block
}

/* Grid de Opciones Abajo */
.opciones-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.opcion-item {
    cursor: pointer;
    transition: transform 0.3s ease;
    border-bottom: 3px solid transparent;
    padding-bottom: 10px;
}

/* Efecto cuando un video está seleccionado */
.opcion-item.activa {
    border-bottom: 3px solid var(--verde); /* Usa el color de tu marca */
}

.opcion-item:hover {
    transform: translateY(-5px);
}

.mini-capa-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.mini-capa-video video {
    width: 100%;
    border-radius: 8px;
    background: #000;
}

.opcion-item p {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-align: center;
}

/* Estado Activo y Hover */
.opcion-item.activa .mini-capa-video {
    border-color: #065e5e; /* Tu verde */
}

.opcion-item.activa .mini-capa-video video {
    opacity: 1;
}

.opcion-item:hover {
    transform: translateY(-5px);
}

.play-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* ========================================================
   ESTILOS: SECCIÓN CITA SEMANAL EXACTA
   ======================================================== */

.seccion-cita-exacta {
    padding: 80px 5%;
    background-color: #f9f9f9; /* Fondo claro para resaltar la tarjeta */
    font-family: 'Roboto', sans-serif;
}

.contenedor-cita-exacta {
    max-width: 1100px;
    margin: 0 auto;
}

/* La tarjeta que envuelve la imagen y el texto */
.tarjeta-cita-exacta {
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Sombra elegante y sutil */
    overflow: hidden; /* Para que la imagen respete los bordes curvos */
}

/* --- ÁREA DE LA IMAGEN --- */
.cita-mitad-imagen {
    flex: 1 1 400px; /* Crece y se encoge, tamaño base 400px */
    position: relative;
    min-height: 450px; /* Altura mínima para que no se vea aplastada */
}

.cita-img-real {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
    object-position: center;
}

/* --- ÁREA DEL CONTENIDO Y BOTÓN --- */
.cita-mitad-contenido {
    flex: 1 1 500px;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cita-titulo-pequeno {
    font-size: 20px;
    font-weight: 700;
    color: var(--azul); /* Usa el azul de tu paleta si lo tienes, o cambia a #1A365D */
    margin-bottom: 20px;
    line-height: 1.3;
}

.cita-parrafo {
    font-size: 16px;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 15px;
}

/* Bloque de texto destacado ("Mi mejor versión") */
.cita-bloque-destacado {
    margin: 30px 0;
    padding-left: 20px;
    border-left: 4px solid var(--verde); /* Línea lateral decorativa */
}

.cita-subtitulo-destacado {
    font-size: 14px;
    font-weight: 500;
    color: #777777;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.cita-titulo-destacado {
    font-size: 32px;
    font-weight: 800;
    color: #222222;
    line-height: 1.1;
}

/* Bloque del botón inferior */
.cita-accion-final {
    margin-top: 20px;
}

.cita-pregunta-final {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 15px;
}

/* Diseño del Botón "CONTÁCTAME" */
.cita-boton-contacto {
    display: inline-block;
    background-color: var(--verde); /* Usa el color verde de tu marca */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 35px;
    border-radius: 30px; /* Botón redondeado */
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 122, 122, 0.3); /* Sombra del botón */
    transition: all 0.3s ease;
}

.cita-boton-contacto:hover {
    background-color: var(--azul); /* Cambia al color secundario al pasar el ratón */
    transform: translateY(-3px); /* Pequeño salto al hacer hover */
    box-shadow: 0 12px 25px rgba(0, 91, 127, 0.4);
}

/* --- ADAPTACIÓN PARA CELULARES --- */
@media (max-width: 900px) {
    .tarjeta-cita-exacta {
        flex-direction: column;
    }
    
    .cita-mitad-imagen {
        min-height: 350px; /* La imagen es un poco más corta en móviles */
    }

    .cita-mitad-contenido {
        padding: 40px 25px;
    }

    .cita-titulo-destacado {
        font-size: 26px;
    }
}

.seccion-mapa-centrado {
    padding: 60px 20px;
    background-color: #f9f9f9; /* Un fondo ligero para que resalte el mapa */
    text-align: center;
}

.contenedor-mapa-reducido {
    max-width: 800px; /* AQUÍ controlas el ancho del rectángulo */
    margin: 0 auto;   /* Esto lo centra horizontalmente */
    border-radius: 20px; /* Bordes redondeados para que parezca tarjeta */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra para darle profundidad */
    border: 8px solid white; /* Un marco blanco elegante */
}

/* Ajuste para que en celulares se vea bien */
@media (max-width: 768px) {
    .contenedor-mapa-reducido {
        max-width: 100%; 
        height: 300px;
    }
}

/* --- SECCIÓN CONTACTO Y DUDAS --- */
.seccion-contacto-completa {
    padding: 80px 5%;
    background-color: #fcfcfc;
}

.contenedor-contacto-flex {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    align-items: center;
}

/* Información Izquierda */
.columna-info { flex: 1; }

.columna-info h2 {
    font-size: 2.5rem;
    color: var(--azul);
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.mensaje-recuperacion {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 35px;
    font-style: italic;
}

.datos-lista .dato-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    color: #555;
}

.dato-item i {
    margin-right: 15px;
    color: var(--verde);
    font-size: 1.2rem;
    margin-top: 4px;
}

/* Formulario Derecha */
.columna-formulario {
    flex: 1;
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.formulario-estilizado .grupo-input, 
.formulario-estilizado .fila-inputs {
    margin-bottom: 15px;
}

.fila-inputs {
    display: flex;
    gap: 15px;
}

.formulario-estilizado input, 
.formulario-estilizado textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    outline: none;
    transition: border-color 0.3s;
}

.formulario-estilizado input:focus, 
.formulario-estilizado textarea:focus {
    border-color: var(--azul);
}

.btn-enviar {
    width: 100%;
    padding: 15px;
    background-color: var(--azul);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-enviar:hover {
    background-color: var(--verde);
}

/* Adaptación para móviles */
@media (max-width: 850px) {
    .contenedor-contacto-flex {
        flex-direction: column;
    }
    .fila-inputs {
        flex-direction: column;
    }
}

/* --- FOOTER (PIE DE PÁGINA) --- */
.footer-principal {
    background-color: #1a1e23; /* Fondo gris muy oscuro, casi negro */
    color: #ffffff;
    padding-top: 60px;
}

.footer-contenedor {
    display: flex;
    flex-wrap: wrap; /* Para que se adapte en celulares */
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
    padding: 0 5% 50px 5%;
}

.footer-columna {
    flex: 1;
    min-width: 250px; /* Evita que las columnas se hagan muy delgadas */
}

/* Ajustes Columna 1 */
.footer-logo {
    max-width: 180px;
    margin-bottom: 20px;
    /* Si tu logo tiene fondo blanco o letras oscuras, quita el '//' de la línea de abajo para volverlo blanco */
    /* filter: brightness(0) invert(1); */
}

.footer-texto {
    color: #b0b5bc; /* Texto un poco más tenue para no cansar la vista */
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Ajustes Títulos de columnas */
.footer-columna h3 {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    position: relative;
    padding-bottom: 10px;
}

.footer-columna h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--verde); /* Subrayado del color de tu marca */
}

/* Ajustes Enlaces */
.footer-enlaces {
    list-style: none;
}

.footer-enlaces li {
    margin-bottom: 15px;
}

.footer-enlaces a {
    color: #b0b5bc;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-enlaces a:hover {
    color: var(--verde);
    padding-left: 5px; /* Efecto sutil de movimiento a la derecha al pasar el mouse */
}

/* Ajustes Contacto */
.footer-contacto-item {
    color: #b0b5bc;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.footer-contacto-item i {
    color: var(--verde);
    margin-right: 15px;
    font-size: 1.1rem;
}

/* Ajustes Redes Sociales */
.footer-redes {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.footer-redes a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.footer-redes a:hover {
    background-color: var(--verde);
    transform: translateY(-3px); /* Efecto de saltito */
}

/* Barra inferior (Derechos) */
.footer-bottom {
    text-align: center;
    padding: 20px;
    background-color: #121519; /* Aún más oscuro para diferenciarlo */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    color: #888;
    font-size: 0.9rem;
    margin: 0;
}

/* --- SECCIÓN REDES SOCIALES --- */
.seccion-redes {
    padding: 80px 5%;
    background-color: #f4f7f9;
    text-align: center;
}

.contenedor-redes {
    max-width: 1000px;
    margin: 0 auto;
}

.redes-texto h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--azul);
    margin-bottom: 15px;
}

.redes-texto p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.redes-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; 
}

.tarjeta-red {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    background-color: #ffffff;
    border-radius: 20px;
    text-decoration: none;
    color: #444;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-red:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* --- NUEVO: CONTENEDOR PARA INTERCAMBIO DE ICONO Y FOTO --- */
.icono-perfil-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estado normal del Icono */
.icono-perfil-wrapper i {
    font-size: 3.5rem;
    color: #999;
    position: absolute;
    transition: all 0.4s ease; /* Transición suave */
}

/* Estado normal de la Foto (Oculta y más pequeña) */
.foto-perfil-red {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto no se deforme */
    border-radius: 50%; /* La hace redonda */
    position: absolute;
    opacity: 0;
    transform: scale(0.5); /* Inicia pequeña */
    transition: all 0.4s ease;
}

/* --- LA MAGIA: ANIMACIÓN AL PASAR EL RATÓN --- */
.tarjeta-red:hover .icono-perfil-wrapper i {
    opacity: 0; /* Oculta el icono */
    transform: scale(0.5); /* Lo hace pequeño al desaparecer */
}

.tarjeta-red:hover .foto-perfil-red {
    opacity: 1; /* Muestra la foto */
    transform: scale(1); /* La regresa a su tamaño real */
}

/* Ajustes del texto */
.tarjeta-red span {
    font-weight: 500;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

/* Colores de cada red social para el texto al hacer hover */
.tarjeta-red.facebook:hover span { color: #1877F2; }
.tarjeta-red.instagram:hover span { color: #E4405F; }
.tarjeta-red.tiktok:hover span { color: #000000; }
.tarjeta-red.youtube:hover span { color: #FF0000; }
.tarjeta-red.doctoralia:hover span{ color: #10a13c; }

/* Adaptación para celulares pequeños */
@media (max-width: 500px) {
    .tarjeta-red {
        width: 130px;
        height: 130px;
    }
    .icono-perfil-wrapper {
        width: 55px;
        height: 55px;
    }
    .icono-perfil-wrapper i {
        font-size: 2.8rem;
    }
}

/* =========================================
   REPARACIÓN DEL SUBMENÚ (DROPDOWN)
   ========================================= */

/* 1. DESTRABAR EL ENCABEZADO (Muy importante para que no lo corte) */
#main-header, .header-container, .navigation, .navigation ul {
    overflow: visible !important; 
}

/* 2. ASEGURAR QUE EL MENÚ ESTÉ POR ENCIMA DE TODA LA PÁGINA */
#main-header {
    z-index: 9999 !important;
}

/* 3. ESTILOS DEL SUBMENÚ FORZADOS PARA QUE APAREZCAN */
.has-submenu {
    position: relative !important;
}

.submenu {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important; /* Se pega justo abajo del texto */
    left: 0 !important;
    background-color: #ffffff !important;
    min-width: 180px !important;
    list-style: none !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Sombra más fuerte */
    padding: 0 !important;
    margin: 0 !important;
    
    /* El truco de ocultarlo y mostrarlo */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Evita clics accidentales cuando no se ve */
    transform: translateY(15px) !important;
    transition: all 0.3s ease !important;
    
    z-index: 10000 !important; /* Nivel altísimo para que nada lo tape */
}

/* Ajustes de los botones dentro del submenú */
.submenu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;  /* Quitamos cualquier margen extra */
    padding: 0 !important; /* Quitamos relleno extra del contenedor */
}

.submenu li a {
    display: block !important;
    padding: 8px 20px !important; /* REDUJIMOS EL ESPACIO AQUÍ (antes era 12px) */
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    text-align: left !important;
    text-transform: uppercase !important; /* Agregué esto para que diga AUTOAYUDA y TEST en mayúsculas como en tu foto */
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* Hover en las opciones del submenú */
.submenu li a:hover {
    background-color: #f4f7f9 !important;
    color: var(--azul) !important;
}

/* 4. ¡LA MAGIA! MOSTRAR CUANDO EL MOUSE PASA POR ENCIMA */
.has-submenu:hover .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Reactiva los clics */
    transform: translateY(0) !important;
}

/* Rotar la flechita */
.icon-flecha {
    font-size: 0.75rem;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.has-submenu:hover .icon-flecha {
    transform: rotate(180deg);
}

/* =========================================
   ESTILOS PÁGINA DESCARGABLES (DISEÑO LIMPIO)
   ========================================= */
/* --- 1. SEPARACIÓN DEL MENÚ (Fundamental) --- */
.contenedor-biblioteca {
    max-width: 1200px;
    margin: 0 auto;
    padding: 150px 5% 80px; /* 150px arriba para que el menú no lo tape */
    background-color: #fff;
    display: block;
}

/* --- 2. TÍTULO CENTRADO --- */
.titulo-principal-centrado {
    font-family: 'Playfair Display', serif;
    font-size: 4.2rem;
    color: #1a5b82;
    text-align: center;
    margin-bottom: 15px;
}

/* --- 3. PÁRRAFO JUSTIFICADO --- */
.intro-texto {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    color: #666;
    max-width: 900px;
    margin: 0 auto 60px; /* 60px de espacio antes de los PDF */
    line-height: 1.7;
    text-align: justify;
}

/* --- 4. CUADRÍCULA PEQUEÑA Y CENTRADA --- */
.grid-documentos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas horizontales */
    gap: 30px;
    max-width: 1000px; /* Hace que los documentos se vean más pequeños */
    margin: 0 auto;    /* Los centra en la pantalla */
}

.documento-card img {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}

.documento-card h3 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #2980b9;
    font-size: 1rem;
    line-height: 1.3;
}

.documento-card p {
    font-size: 0.85rem;
    color: #777;
}

/* --- CUADRÍCULA DE 4 COLUMNAS --- */
.cuadricula-libros {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 40px 30px; /* Espacio entre filas y columnas */
}

/* Estilo de cada libro (sin bordes, muy limpio) */
.item-libro {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.item-libro img {
    width: 100%;
    aspect-ratio: 1; /* Las hace cuadradas por defecto */
    object-fit: contain; /* Para que no se recorten las portadas */
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.item-libro a:hover img {
    transform: scale(1.05); /* Efecto sutil al pasar el mouse por la portada */
}

.item-libro h3 {
    font-family: 'Playfair Display', serif;
    color: #2980b9; /* Azul más claro para los títulos */
    font-size: 1.3rem;
    font-style: italic; /* Letra cursiva como en tu foto */
    line-height: 1.3;
    margin-bottom: 15px;
}

.item-libro p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Adaptación para celulares y tablets */
@media (max-width: 1024px) {
    .cuadricula-libros { grid-template-columns: repeat(2, 1fr); }
    .titulo-azul-grande { font-size: 3.5rem; }
}

@media (max-width: 600px) {
    .cuadricula-libros { grid-template-columns: 1fr; }
    .titulo-azul-grande { font-size: 2.5rem; }
}

/* --- ANIMACIÓN AL HACER SCROLL --- */
.reveal {
    opacity: 0;
    transform: translateY(40px); /* Empieza un poco más abajo */
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); /* Transición súper suave */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0); /* Regresa a su posición original */
}

/* --- CONTENEDOR DE LA CUADRÍCULA --- */
.grid-documentos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Mantiene las 4 columnas horizontales */
    gap: 25px; /* Espacio entre documentos */
    max-width: 1000px; /* <--- REDUCE EL TAMAÑO TOTAL DE LA SECCIÓN */
    margin: 0 auto; /* <--- CENTRA LOS 4 DOCUMENTOS EN LA PÁGINA */
    padding: 20px;
}

/* --- TARJETA DEL DOCUMENTO --- */
.documento-card {
    text-align: left;
    display: flex;
    flex-direction: column;
}

.documento-card img {
    width: 100%; /* La imagen se ajusta al tamaño pequeño de la columna */
    height: auto;
    aspect-ratio: 1 / 1; /* Las hace cuadradas como en tu diseño original */
    object-fit: cover;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.documento-card h3 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #2980b9;
    font-size: 1rem; /* Título un poco más pequeño */
    line-height: 1.3;
    margin-bottom: 10px;
}

.documento-card p {
    font-size: 0.85rem; /* Texto de descripción más pequeño */
    color: #666;
    line-height: 1.5;
}

/* --- BOTÓN VOLVER ARRIBA --- */
.btn-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Lado lateral derecho */
    width: 45px;
    height: 45px;
    background-color: #1a5b82; /* El azul de tu título */
    color: white;
    border: none;
    border-radius: 5px; /* Cuadrado con bordes suaves como en tu imagen */
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Invisible al inicio */
    visibility: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-scroll-top:hover {
    background-color: #2980b9;
    transform: translateY(-5px); /* Pequeño salto al pasar el mouse */
}

/* Clase que activará el JavaScript para mostrarlo */
.btn-scroll-top.show {
    opacity: 1;
    visibility: visible;
}/* --- BOTÓN VOLVER ARRIBA --- */
.btn-scroll-top {
    position: fixed;
    bottom: 30px;
    right: 30px; /* Lado lateral derecho */
    width: 45px;
    height: 45px;
    background-color: #1a5b82; /* El azul de tu título */
    color: white;
    border: none;
    border-radius: 5px; /* Cuadrado con bordes suaves como en tu imagen */
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* Invisible al inicio */
    visibility: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-scroll-top:hover {
    background-color: #2980b9;
    transform: translateY(-5px); /* Pequeño salto al pasar el mouse */
}

/* Clase que activará el JavaScript para mostrarlo */
.btn-scroll-top.show {
    opacity: 1;
    visibility: visible;
}

/* --- SECCIÓN INTRODUCCIÓN AUTOAYUDA (SOLO TEXTO) --- */
.intro-autoayuda {
    width: 100%;
    /* 160px de espacio arriba para que NO se amontone con el menú fijo */
    padding: 160px 20px 60px 20px; 
    background-color: #ffffff;
}

.contenedor-texto-autoayuda {
    max-width: 900px; /* Limita el ancho para que la lectura sea cómoda */
    margin: 0 auto;   /* Centra el contenedor en la pantalla */
    text-align: center; /* Centra el título */
}

.titulo-principal-autoayuda {
    font-family: 'Playfair Display', serif; /* Tu fuente elegante para títulos */
    font-size: 2.8rem;
    color: var(--azul);
    text-transform: uppercase; /* Hace que el título esté todo en mayúsculas como en tu imagen */
    letter-spacing: 1.5px;
    margin-bottom: 30px;
}

.parrafo-intro-autoayuda {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #444;
    line-height: 1.8;
    text-align: justify; /* Justifica el texto para que se vea como un documento formal */
}

/* --- AJUSTES PARA CELULARES --- */
@media (max-width: 768px) {
    .intro-autoayuda {
        padding-top: 130px; /* Un poco menos de espacio en móviles */
    }
    
    .titulo-principal-autoayuda {
        font-size: 2rem; /* Achica un poco el título en el celular */
    }
    
    .parrafo-intro-autoayuda {
        font-size: 1rem;
    }
}

/* --- NUEVOS ESTILOS PARA FORMULARIO Y RESULTADOS (image_801062.png e image_800f8c.png) --- */
.quiz-form-container {
    max-width: 550px;
    margin: 0 auto;
    text-align: center;
}

.quiz-form-container h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.quiz-form-container p {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 25px;
}

.quiz-input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.quiz-input-group input {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    text-align: center;
    background-color: #ffffff;
    color: #333;
}

.quiz-input-group input::placeholder {
    color: #a0aec0;
}

.btn-submit-form {
    width: 100%;
    background-color: #007a7a;
    color: #ffffff;
    border: none;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.3s ease;
}

.btn-submit-form:hover {
    background-color: #005e5e;
}

.link-saltar {
    display: inline-block;
    margin-top: 20px;
    color: #cbd5e1;
    font-size: 0.95rem;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
}

.link-saltar:hover {
    color: #ffffff;
}

/* Tarjeta Final Estilo Verde y Azul Grisáceo (image_800f8c.png) */
.tarjeta-resultado-wrapper {
    border-radius: 8px;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.resultado-header-verde {
    background-color: #007a7a;
    padding: 40px 30px;
    text-align: center;
}

.resultado-header-verde h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.resultado-header-verde .sub-res {
    font-size: 1rem;
    color: #e2e8f0;
    margin-bottom: 10px;
    display: block;
}

.resultado-diagnostico-txt {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 10px 0 0 0;
}

.resultado-body-gris {
    background-color: #475569;
    padding: 30px 20px;
    text-align: center;
}

.resultado-body-gris p {
    color: #f1f5f9;
    font-size: 1.05rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.btn-agendar-resultado {
    background-color: #005b7f;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-agendar-resultado:hover {
    background-color: #004662;
}

.whatsapp-fixed {
    position: fixed;
    bottom: 30px;
    left: 30px; /* Lado izquierdo */
    z-index: 9999;
    transition: all 0.3s ease;
}

.whatsapp-fixed a {
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Notificación roja (Oculta por defecto) */
.ws-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff3b30;
    color: white;
    font-size: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
    opacity: 0; /* OCULTO */
    transform: scale(0);
    transition: all 0.3s ease;
}

/* Mensaje de texto (Oculto por defecto) */
.ws-tooltip {
    position: absolute;
    left: 75px; /* Abre hacia la derecha */
    top: 12px;
    background: white;
    color: #333;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0; /* OCULTO */
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* --- ESTADO HOVER (EFECTO CAPTCHA ACTIVO) --- */

.whatsapp-fixed:hover {
    transform: scale(1.1) translateY(-5px); /* Crece y sube un poco */
}

.whatsapp-fixed:hover a {
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
    animation: pulseWs 1.5s infinite; /* El pulso solo en hover */
}

.whatsapp-fixed:hover .ws-badge {
    opacity: 1; /* APARECE */
    transform: scale(1);
    animation: bounceBadge 0.5s ease infinite; /* Rebota solo en hover */
}

.whatsapp-fixed:hover .ws-tooltip {
    opacity: 1; /* APARECE */
    transform: translateX(10px); /* Se desplaza a la derecha */
}

/* --- CONTENEDOR DEL AVATAR CSS --- */
.avatar-css-container {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.whatsapp-fixed:hover .avatar-css-container {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* --- DIBUJO DE LA CABEZA Y CARA (Redonda, cabello y barba oscuros) --- */
.cabeza-avatar {
    position: relative;
    width: 45px;
    height: 50px;
    z-index: 2;
}

.rostro {
    width: 45px;
    height: 45px;
    background-color: #f1c27d; 
    border-radius: 50%; /* Cara redonda */
    position: absolute;
    bottom: 0;
    overflow: hidden;
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.1);
}

.cabello {
    width: 53px;
    height: 20px;
    background-color: #1a1a1a; /* Cabello negro */
    border-radius: 20px 20px 5px 5px;
    position: absolute;
    top: 0;
    left: -4px;
    z-index: 3;
}

/* Detalle frontal (un pequeño degradado/mechón al lado izquierdo) */
.cabello::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -2px;
    width: 12px;
    height: 15px;
    background-color: #1a1a1a;
    border-radius: 50%;
}

.ojo {
    width: 4px;
    height: 4px;
    background-color: #1a1a1a;
    border-radius: 50%;
    position: absolute;
    top: 18px;
}
.ojo.izquierdo { left: 12px; }
.ojo.derecho { right: 12px; }

.sonrisa {
    width: 12px;
    height: 6px;
    border-bottom: 2px solid #b38b59; /* Color más oscuro para que se vea sobre la piel */
    border-radius: 50%;
    position: absolute;
    bottom: 10px; /* Ajustado para que quede bien en la cara */
    left: 50%;
    transform: translateX(-50%);
}

/* --- DIBUJO DEL CUERPO (Bata Médica y Filipina) --- */
.cuerpo-avatar {
    position: relative;
    width: 65px;
    height: 40px;
    margin-top: -5px;
    z-index: 1;
}

.bata-doctor {
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Bata blanca */
    border-radius: 20px 20px 0 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    box-shadow: inset 0 -4px 8px rgba(0,0,0,0.05);
}

.cuello-filipina {
    width: 24px;
    height: 22px;
    background-color: var(--verde); /* Traje quirúrgico verde/azul */
    clip-path: polygon(0 0, 100% 0, 50% 100%); /* Corte en V */
}

/* Detalle del estetoscopio colgando del cuello */
.estetoscopio {
    position: absolute;
    top: 8px;
    width: 28px;
    height: 35px;
    border: 2px solid #333;
    border-top: none;
    border-radius: 0 0 15px 15px;
}

/* --- EL BRAZO QUE SALUDA (Manga de la bata) --- */
.brazo-saludo {
    width: 14px;
    height: 35px;
    background-color: #ffffff; /* Manga blanca haciendo juego con la bata */
    border-radius: 10px;
    position: absolute;
    top: 5px;
    right: -8px;
    transform-origin: top center;
    transform: rotate(-20deg);
    box-shadow: -2px 2px 5px rgba(0,0,0,0.15); /* Sombra para que no se pierda contra fondos blancos */
}

.saludando {
    animation: moverBrazo 0.6s alternate infinite ease-in-out;
}

@keyframes moverBrazo {
    0% { transform: rotate(-20deg); }
    100% { transform: rotate(-100deg); }
}

/* --- BURBUJA DE TEXTO DINÁMICA --- */
.burbuja-texto {
    position: absolute;
    top: -35px;
    background: white;
    color: #333;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.burbuja-texto::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* Animaciones */
@keyframes pulseWs {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes bounceBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}


@media (max-width: 768px) {
    .qs-intro, .formacion-grid { grid-template-columns: 1fr; }
}