/* ================== ESTILOS GENERALES Y VARIABLES ================== */
:root {
    --primary-color: #1e3a8a; --accent-color: #facc15; --dark-color: #111827;
    --text-color: #374151; --light-gray-color: #f3f4f6; --border-color: #e5e7eb; --white-color: #ffffff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--text-color); line-height: 1.6; background-color: var(--white-color); position: relative; overflow-x: hidden; }
body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 500px; z-index: -1; background: radial-gradient(circle at 50% 0, hsla(226, 65%, 32%, 0.15), transparent 70%); }
.container { max-width: 1100px; margin: 0 auto; padding: 20 20px; }
a { text-decoration: none; color: var(--text-color); }
ul { list-style: none; }
h2, h3 { color: var(--dark-color); line-height: 2.0;}
h1 { font-size: 3rem; margin-top: 30px  } h2 { font-size: 2.2rem; margin: 10px;  } h3 { font-size: 1.5rem; } p { margin:10px 0;  }
li{ padding: 5px; margin: 5px}
h1 {
  font-size: 3rem; /* O usa vw como hablamos antes */
  margin-bottom: 1rem; /* Espacio debajo del h1 */
}

h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}

p {
  font-size: 1rem;
  line-height: 1.5; /* Mejora la legibilidad de los párrafos */
  margin-bottom: 1rem;
}
@media (max-width: 768px) { /* Para pantallas de hasta 768px de ancho (tablets y celulares) */
  h1,h2,h3 {
    font-size: 37px; /* Reduce el tamaño del h1 */
    
  }
}

@media (max-width: 480px) { /* Para pantallas de hasta 480px de ancho (celulares más pequeños) */
   h1,h2,h3 {
    font-size: 35px;
     /* Aún más pequeño */
  }
}


@media (max-width: 768px){
.pillar-hero h1 {
    color: var(--white-color);
    font-size: 3.2rem;
    text-align: left;
}
}

/* ================== BOTONES Y ELEMENTOS COMUNES ================== */
.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; font-weight: 600; text-align: center; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s ease, background-color 0.2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background-color: var(--primary-color); color: var(--white-color); border-color: var(--primary-color); }
.btn-secondary { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); }
.btn-secondary:hover { background-color: var(--primary-color); color: var(--white-color); }
.btn-light { background-color: var(--white-color); color: var(--primary-color); border-color: var(--white-color); }

/* ================================================================ */
/* === ESTILOS DEFINITIVOS PARA HEADER Y MENÚS v3.2 === */
/* ================================================================ */

/* --- Estructura Principal del Header --- */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.85); /* Un poco más opaco */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}
.nav-left { display: flex; align-items: center; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.logo { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 700; color: var(--dark-color); }
.logo-icon { display: flex; flex-direction: column; gap: 4px; }
.logo-icon span { display: block; height: 4px; border-radius: 2px; background-color: var(--primary-color); transition: all 0.3s ease; }
.logo-icon span:nth-child(1), .logo-icon span:nth-child(3) { width: 24px; }
.logo-icon span:nth-child(2) { width: 18px; background-color: var(--accent-color); align-self: flex-end; }

/* --- Base de Menús de Escritorio --- */
.desktop-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}
.desktop-nav li {
    list-style: none;
}
.desktop-nav > li > a, .desktop-nav > li > button {
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s ease;
}
.desktop-nav > li > a:hover, .desktop-nav > li > button:hover {
    color: var(--primary-color);
}
.desktop-nav .dropdown { position: relative; }

/* --- Estilos del Desplegable --- */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 15px;
    background: var(--white-color); /* Fondo 100% opaco */
    -webkit-backdrop-filter: none;   /* Anulamos cualquier herencia de blur */
    backdrop-filter: none;           /* Anulamos cualquier herencia de blur */
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0,0,0,0.08);
    padding: 10px;
    z-index: 1100;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease-out;
}
.desktop-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Layout de 2 Columnas para "Sesiones" */
.dropdown-menu.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 520px;
}
.dropdown-menu.grid-2-col li a {
    background-color: var(--light-gray-color);
}
.dropdown-menu li a {
    display: block;
    padding: 12px 15px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s ease-in-out;
}
.dropdown-menu li a:hover {
    border-color: var(--primary-color);
    background-color: #e9e9f7;
}
.dropdown-menu li a span { display: block; font-weight: 600; font-size: 0.95rem; color: var(--dark-color); }
.dropdown-menu li a p { font-size: 0.8rem; color: var(--text-color); margin: 4px 0 0; line-height: 1.3; }

/* --- Botones de Acción de la Derecha --- */
.action-buttons { gap: 15px; }
.nav-chip-link { display: flex; align-items: center; gap: 8px; background-color: var(--light-gray-color); padding: 8px 15px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; transition: all 0.2s ease; }
.nav-chip-link .nav-chip-icon { stroke: var(--primary-color); transition: transform 0.3s ease; }
.nav-chip-link:hover { background-color: #e5e7eb; }
.nav-chip-link:hover .nav-chip-icon { transform: rotate(360deg); }

/* --- Lógica para Ocultar/Mostrar en Móvil y Escritorio --- */
/* Por defecto, lo móvil está oculto */
.mobile-only {
    display: none;
}
/* Cuando la pantalla es de 1024px o menos... */
@media (max-width: 1024px) {
    /* Ocultamos todo lo de escritorio */
    .desktop-only {
        display: none !important;
    }
    /* Y mostramos lo de móvil */
    .mobile-only {
        display: block;
    }
}

/* --- Menú Desplegable Móvil (Pegar la lógica que ya te funciona) --- */

/* ... etc ... */

/* ================== SECCIÓN HERO ================== */
/* ================== ESTILOS PARA SECCIÓN HERO CON VIDEO ================== */


@media (max-width: 1024px) {
    /* Ocultamos todo lo de escritorio */
    .hero-video {position: absolute;
    padding: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}
}
/* Contenedor principal del Hero */
.hero.video-hero {
    position: relative; /* Esencial para posicionar el video y la capa dentro */
    height: 80vh; /* Le damos una altura del 80% de la pantalla visible */
    min-height: 500px;
    padding: 0; /* Quitamos el padding para que el video ocupe todo */
    overflow: hidden;
    display: flex; /* Para centrar el contenido verticalmente */
    align-items: center;
}

/* El video de fondo */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Capa 1: El video */
}

/* La capa de superposición oscura */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.7); /* Azul oscuro con 70% de opacidad */
    z-index: 2; /* Capa 2: La superposición */
}

/* El contenedor del texto y botones */
.hero-container {
    position: relative; /* Para que se coloque sobre la capa de video */
    z-index: 3; /* Capa 3: El contenido */
    width: 100%;
}

.hero-text {
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
}

/* Hacemos que el texto sea blanco para que contraste */
.hero-text h1,
.hero-text p {
    color: var(--white-color);
}

.hero-text h1 {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Sombra para resaltar */
}

.hero-text p {
    color: #e5e7eb; /* Un blanco un poco más suave */
    font-size: 1.2rem;
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* Ajustamos el botón secundario para que resalte sobre el fondo oscuro */
.hero.video-hero .btn-secondary {
    color: var(--white-color);
    border-color: var(--white-color);
}
.hero.video-hero .btn-secondary:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
}

/* Eliminamos el efecto de líneas de fondo que ya no necesitamos */
.hero.video-hero::before {
    display: none;
}

/* ================== OTRAS SECCIONES (Servicios, Testimonios, etc.) ================== */
.services { padding: 60px 0; background-color: var(--light-gray-color); }
.section-header { text-align: center; margin-bottom: 50px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.service-card { background: var(--white-color); padding: 30px; border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card h3 { margin-bottom: 15px; color: var(--primary-color); }
.service-price { font-size: 2.5rem; font-weight: 700; color: var(--dark-color); margin-bottom: 20px; }
.code-example { padding: 80px 0; }
.code-example-container { display: flex; align-items: center; gap: 50px; }
.code-block { flex: 1.2; background-color: #f7f7f9; color: var(--text-color); padding: 30px; border-radius: 8px; border: 1px solid var(--border-color); }
.code-block pre { font-family: 'Inter', sans-serif; font-size: 1.1rem; line-height: 1.7; white-space: pre-wrap; }
.code-text { flex: 1; }
/* Reemplaza la sección .cta que tienes con esta */
.cta {
    padding: 80px 0;
    text-align: center;
    color: var(--white-color); /* 2. Todo el texto por defecto será blanco */
    
    /* 1. El mismo degradado que en el hero */
    background: linear-gradient(145deg, #1e3a8a, #111827);
}

.cta h2 {
    color: var(--white-color); /* Aseguramos que el título sea blanco */
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.cta p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 30px;
    color: #d1d5db; /* Un blanco un poco más suave para el párrafo */
}

/* 3. Estilos del botón */
.cta .btn-light {
    background-color: var(--white-color);
    color: var(--primary-color);
    border: 2px solid var(--white-color);
    font-weight: 700; /* Lo hacemos un poco más grueso */
    padding: 15px 35px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cta .btn-light:hover {
    background-color: transparent; /* Se hace transparente para mostrar el degradado */
    color: var(--white-color); /* El texto se vuelve blanco */
}
.main-footer { background-color: var(--dark-color); color: #d1d5db; padding: 50px 0 20px; }
.footer-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-bottom: 40px; border-bottom: 1px solid #4b5563; }

@media (max-width: 768px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.footer-logo { display: flex; align-items: center; gap: 12px; }

/* ================== MODAL POP-UP ================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 10px; }
.modal-overlay.active { display: flex; }
.modal-content { position: relative; background-color: var(--light-gray-color); width: 90%; max-width: 650px; height: 80vh; padding: 20px; border-radius: 8px; overflow: hidden; }
.modal-close-btn { position: absolute; top: 5px; right: 15px; background: none; border: none; font-size: 2.5rem; color: #999; cursor: pointer; line-height: 1; }
.modal-close-btn:hover { color: var(--dark-color); }
.modal-content iframe { width: 100%; height: 100%; }

/* ========================================================== */
/* === ESTILOS DEFINITIVOS PARA MENÚ MÓVIL (Desde Cero) === */
/* ========================================================== */

/* ========================================================== */
/* === LÓGICA DEFINITIVA DE VISIBILIDAD (MOBILE FIRST) === */
/* ========================================================== */
/* ================================================================ */
/* === ESTILOS DEFINITIVOS PARA BARRA INFERIOR MÓVIL === */
/* ================================================================ */

/* ================================================================ */
/* === ESTILOS DEFINITIVOS Y A PRUEBA DE BALAS PARA BARRA INFERIOR MÓVIL === */
/* ================================================================ */

/* Por defecto, la barra está oculta en la vista de escritorio */
.mobile-bottom-nav {
    display: none;
}

/* Solo se aplica en pantallas de 1024px o menos (MÓVILES Y TABLETS) */
@media (max-width: 1024px) {
    
    /* 1. Mostramos la barra de navegación inferior */
    .mobile-bottom-nav {
        display: block; /* Hacemos que exista */
        position: fixed; /* La fijamos a la ventana del navegador */
        
        /* ¡LA POSICIÓN CORRECTA! */
        bottom: 0;
        left: 0;
        
        width: 100%;
        z-index: 1000;
        
        background-color: rgba(255, 255, 255, 0.95);
        border-top: 1px solid var(--border-color);
        backdrop-filter: blur(8px);
        box-shadow: 0 -5px 20px -10px rgba(0,0,0,0.1);
        
        /* La animación para que aparezca y desaparezca suavemente */
        transform: translateY(0);
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    /* 2. La clase que añadiremos con JavaScript para OCULTAR la barra */
    .mobile-bottom-nav.is-hidden {
        transform: translateY(100%); /* La desliza hacia abajo */
    }

    /* 3. Estilos internos de la barra (iconos, texto, etc.) */
    .mobile-bottom-nav ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 8px 0;
        margin: 0;
    }

    .mobile-bottom-nav li {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-bottom-nav li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 5px;
        color: var(--text-color);
        font-size: 0.75rem;
        font-weight: 500;
    }

    .mobile-bottom-nav li a svg {
        width: 26px; height: 26px;
        color: var(--text-color);
        transition: color 0.2s, transform 0.2s;
    }

    .mobile-bottom-nav li a:hover svg,
    .mobile-bottom-nav li a:hover span {
        color: var(--primary-color);
    }
    .mobile-bottom-nav li a:hover svg {
        transform: scale(1.1);
    }
    
    /* 4. Le damos más espacio al final de la página para que no se tape el footer */
    body {
        padding-bottom: 90px;
    }
}





/* ================================================================ */
/* === ESTILOS PARA PÁGINAS DE SERVICIO (Añadir al Final) === */
/* ================================================================ */

.service-page-container {
    padding-top: 40px;
    padding-bottom: 60px;
    
}

.service-page-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna para móvil por defecto */
    gap: 40px;
    margin-top: 10px;
}

/* --- Estilos de la Columna de Contenido (Izquierda) --- */
.service-content h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
    line-height: 1.1;
  
}

.service-subtitle {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

.service-content h2 {
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 15px;
    text-align: center;
}

.service-content h3 {
    font-size: 1.4rem;
    margin-top: 30px;
    margin-bottom: 15px;
}

.service-content ul {
    list-style: none; /* Quitamos los puntos por defecto */
    padding-left: 0;
}

.service-content ul li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
}

/* Añadimos un checkmark con CSS, más profesional */
.service-content ul li::before {
    content: '✓';
    color: var(--primary-color);
    font-weight: 700;
    margin-right: 12px;
    margin-top: 2px;
}

.video-container {
    position: relative;
    padding-bottom: 80.25%; /* Proporción 16:9 para video */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    margin: 30px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (max-width: 768px) {
  .video-container {
    /* Hacemos que los márgenes laterales sean mucho más pequeños en móvil */
    margin-left: 0;
    margin-right: 0;

    /* Aumentamos el tamaño vertical si es necesario.
       El padding-bottom original es 80.25%. Para un video vertical,
       necesitarás un valor MUCHO más alto. ¡Prueba con 177.77% (relación 9:16) o más! */
    padding-bottom: 100.77%;

    /* Opcional: Quitamos el borde redondeado y la sombra si queremos que ocupe todo el ancho */
    border-radius: 0;
    box-shadow: none;
  }
}

/* --- Estilo Post tipo Instagram --- */
.instagram-post {
  /* --- El "Marco" del Teléfono --- */
  width: 100%;             /* En móvil, ocupa todo el ancho disponible */
  max-width: 400px;        /* ¡CLAVE! Un ancho máximo para que en escritorio no se estire demasiado y parezca un móvil */
  margin: 40px auto;       /* Centra el contenedor en la página (auto) y le da espacio arriba/abajo (40px) */
  background: #fff;        /* Fondo blanco para el post */
  border: 1px solid #dbdbdb; /* Borde sutil, como en Instagram */
  border-radius: 8px;      /* Bordes redondeados */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave para darle profundidad */
  
  /* --- Contenedor del Video --- */
  position: relative;
  overflow: hidden;
  /* ¡LA PROPORCIÓN VERTICAL! Usamos 4:5, una proporción muy común en el feed de Instagram */
  padding-top: 125%; /* Esto se calcula (5 / 4) * 100 */
}

.instagram-post iframe {
  /* --- El Video dentro del Contenedor --- */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Asegurarse de que el iframe no tenga bordes propios */
}

/* --- (Opcional) Media Query para Escritorio --- */
/* Si quieres que en pantallas grandes el "móvil" no quede tan solo, 
   puedes meterlo dentro de un contenedor flexbox. 
   Pero con el max-width y el margin: auto ya se ve muy bien. */

/* --- Estilos de la Barra Lateral (Derecha) --- */
.sidebar-content {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    background-color: var(--white-color);
}

.sidebar-content h3 {
    text-align: center;
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 25px;
}

.benefit-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    font-size: 0.95rem;
}

.benefit-list li::before {
    content: '✨'; /* Usamos un emoji para los beneficios */
    margin-right: 10px;
    font-size: 1.1rem;
}

.price-box {
    background-color: var(--light-gray-color);
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.price-tag {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dark-color);
    line-height: 1;
}

.price-desc {
    font-size: 0.9rem;
    color: var(--text-color);
}

.btn-full {
    width: 100%;
}

/* ================== BOTÓN FIJO EN MÓVIL (PÁGINAS DE SERVICIO) ================== */
.sticky-footer-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0.9) 70%, transparent);
    padding: 15px 20px 20px;
    z-index: 900;
    transform: translateY(150%); /* Oculto por defecto */
    transition: transform 0.3s ease-in-out;
}

.sticky-footer-btn.visible {
    transform: translateY(0); /* Lo hacemos visible */
}

/* ================================================================ */
/* === ESTILOS PARA BOTÓN FLOTANTE CON PRECIO EN MÓVIL === */
/* ================================================================ */

/* ================================================================ */
/* === ESTILOS PARA BOTÓN FLOTANTE CON EFECTO DESCUENTO === */
/* ================================================================ */

/* Modificamos el botón principal para que sea un contenedor flex */
.sticky-footer-btn .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Damos un poco más de espacio */
}

/* El contenedor de los precios */
.button-price-wrapper {
    display: flex;
    flex-direction: column; /* Apilamos los precios verticalmente */
    align-items: flex-start; /* Alineamos a la izquierda */
    line-height: 1.1;      /* Ajustamos la altura de línea */
}

/* El precio antiguo tachado */
.button-old-price {
    font-size: 0.8rem;
    font-weight: 400;
    text-decoration: line-through; /* ¡LA MAGIA DEL TACHADO! */
    opacity: 0.7; /* Lo hacemos un poco más sutil */
}

/* El precio actual */
.button-current-price {
    font-size: 1.1rem; /* Lo hacemos un poco más grande */
    font-weight: 700;  /* Y más grueso */
}

/* El texto de la acción */
.button-action-text {
    font-weight: 600;
    font-size: 1.1rem; /* Coincide con el precio para equilibrio */
    border-left: 1px solid rgba(255, 255, 255, 0.3); /* Un separador sutil */
    padding-left: 15px;
}

/* ================================================================ */
/* === MEDIA QUERIES PARA PÁGINAS DE SERVICIO === */
/* ================================================================ */

/* --- Vista Tablet y superior --- */
@media (min-width: 992px) {
    .service-page-grid {
        grid-template-columns: 2fr 1fr; /* Dos columnas */
    }

    .service-sidebar {
        position: sticky;
        top: 100px; /* Header + un poco de espacio */
        align-self: start;
    }
}

/* --- Vista Móvil --- */
@media (max-width: 991px) {
    /* Ocultamos la barra lateral en móvil porque tenemos el botón fijo */
    .service-sidebar {
        display: none;
    }
}

/* --- Vista Móvil --- */
@media (max-width: 991px) {
    /* Ocultamos la barra lateral en móvil porque tenemos el botón fijo */
    .service-sidebar {
        display: none;
    }

    /* ¡AQUÍ ESTÁ LA SOLUCIÓN! */
    /* Hacemos que el contenido de texto sea más flexible en móvil */
    .service-content {
        /* Evita que los títulos largos creen un desbordamiento horizontal */
        overflow-wrap: break-word; 
    }
    
    .service-content h1 {
        font-size: 2.2rem; /* Reducimos un poco el tamaño del título en móvil */
    }
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA TARJETAS DE SERVICIO (Añadir al Final) === */
/* ================================================================ */

/* Modificación de la tarjeta base */
.service-card {
    padding: 35px 25px; /* Más padding vertical */
    position: relative; /* Para el badge 'popular' */
    overflow: hidden; /* Para el badge 'popular' */
}

/* Contenedor del icono */
.service-card-icon {
    margin-bottom: 20px;
    height: 40px; /* Altura fija para alinear */
}
.service-card-icon svg {
    color: var(--primary-color);
}

/* Contenedor del precio */
.service-price-box {
    background-color: var(--light-gray-color);
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
}
.price-currency {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    vertical-align: super;
    margin-right: 4px;
}
.price-amount {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--dark-color);
}

/* Lista de beneficios */
.service-card-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 30px;
    flex-grow: 1;
}
.service-card-features li {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.service-card-features .checkmark {
    color: var(--primary-color);
    font-weight: bold;
}

/* Quitamos el estilo anterior para el precio que estaba suelto */
.service-card .service-price {
    display: none;
}

/* Estilos para la tarjeta destacada */
.service-card.popular {
    border-color: var(--primary-color);
    border-width: 2px;
    transform: scale(1.05); /* La hace un poco más grande */
}
.service-card.popular:hover {
    transform: scale(1.05) translateY(-5px); /* Mantenemos el efecto al hacer hover */
}

/* Badge para la tarjeta popular */
.popular-badge {
    position: absolute;
    top: 18px;
    right: -35px;
    background-color: var(--accent-color);
    color: var(--dark-color);
    padding: 5px 30px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA SECCIÓN "EL PROCESO" (Añadir al Final) === */
/* ================================================================ */

.process-section {
    padding: 80px 0;
}

.process-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* 2 columnas, la derecha más ancha */
    align-items: center;
    gap: 60px;
}

/* Columna Izquierda: Mockup */
.process-mockup {
    background-color: #1a253c; /* Un azul oscuro, casi negro */
    color: #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(27, 39, 62, 0.2);
    height: 100%;
}
.mockup-header {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
    border-bottom: 1px solid #334155;
    padding-bottom: 15px;
}
.mockup-header .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #334155;
}
.mockup-content { text-align: center; }
.mockup-item {
    background-color: #26344d;
    padding: 15px;
    border-radius: 8px;
}
.mockup-item h4 { color: var(--white-color); }
.mockup-item p { font-size: 0.9rem; color: #94a3b8; margin: 5px 0 0; }
.mockup-arrow {
    font-size: 2rem;
    color: #475569;
    margin: 15px 0;
}
.mockup-item.result {
    background-color: rgba(79, 70, 229, 0.2);
    border: 1px solid var(--primary-color);
}
.mockup-item.result h4 { color: #a5b4fc; }

/* Columna Derecha: Pasos */
.process-steps h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}
.process-steps .section-subtitle {
    font-size: 1.1rem;
    color: var(--text-color);
    max-width: 500px;
    margin-bottom: 40px;
}

.steps-list {
    list-style: none;
    padding: 0;
    position: relative; /* Contenedor para la línea de tiempo */
}

/* La línea de tiempo vertical */
.steps-list::before {
    content: '';
    position: absolute;
    top: 12px; /* Alineado con el centro del primer ícono */
    bottom: 12px; /* Alineado con el centro del último ícono */
    left: 12px; /* Centrado en el eje X del ícono */
    width: 2px;
    background-color: var(--border-color);
    z-index: -1;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}
.step:last-child {
    margin-bottom: 0;
}

.step-icon {
    background-color: var(--white-color);
    border-radius: 50%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    color: var(--primary-color);
    flex-shrink: 0;
}
.step-text h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}
.step-text p {
    margin: 0;
    color: var(--text-color);
}

/* Media query para hacerla de una sola columna en móvil */
@media (max-width: 991px) {
    .process-container {
        grid-template-columns: 1fr;
    }
}
/* === ESTILOS PARA LOS NÚMEROS DE LA SECCIÓN PROCESO (Añadir al Final) === */

.step-icon.numeric {
    font-size: 1.2rem;
    font-weight: 600;
    width: 48px;  /* Ancho y alto fijos para mantener el círculo perfecto */
    height: 48px;
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA SECCIÓN FAQ (ACORDEÓN) === */
/* ================================================================ */

.faq-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}

.faq-container {
    max-width: 800px; /* Hacemos el contenedor más angosto para mejor legibilidad */
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espacio entre cada pregunta */
}

.accordion-item {
    background-color: var(--white-color);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden; /* Clave para que el contenido no se salga */
    transition: all 0.3s ease;
}

.accordion-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--dark-color);
    cursor: pointer;
}

.accordion-icon {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0; /* Oculto por defecto */
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.accordion-content p {
    padding: 0 20px 20px 20px;
    margin: 0;
    line-height: 1.7;
}

/* Estilo para el item activo (abierto por defecto) */
.accordion-item.active .accordion-content {
    max-height: 500px; /* Un valor alto para que el contenido quepa */
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA SECCIÓN Y MODAL DE QUIZ === */
/* ================================================================ */

/* Sección Disparador del Quiz */
.quiz-trigger-section {
    padding: 80px 0;
    text-align: center;
    background-color: #f3f4f6;
}
.quiz-trigger-container {
    max-width: 650px;
}
.quiz-trigger-section h2 {
    font-size: 2.5rem;
}
.quiz-trigger-section p {
    font-size: 1.1rem;
    margin: 15px 0 30px;
}
.btn-large {
    padding: 15px 35px;
    font-size: 1.1rem;
}

/* Modal del Quiz */
.quiz-modal-content {
    max-width: 600px; /* Más ancho */
    height: auto; /* Altura automática */
    min-height: 400px;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.quiz-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.quiz-header h3 { margin: 0; font-size: 1.2rem; }
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--light-gray-color);
}
.progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.4s ease;
}

/* Cuerpo y Slides del Quiz */
.quiz-body {
    padding: 30px 40px;
    text-align: center;
    flex-grow: 1;
}
.quiz-slide {
    display: none; /* Ocultos por defecto */
}
.quiz-slide.active {
    display: block; /* Visible */
}
.quiz-slide h3 { font-size: 1.8rem; margin-bottom: 15px; }
.quiz-slide h4 { font-size: 1.3rem; margin-bottom: 25px; line-height: 1.4; }
.quiz-slide p { font-size: 1.1rem; margin-bottom: 30px; }

/* Opciones de respuesta */
.answer-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.answer-btn {
    width: 100%;
    text-align: left;
    padding: 15px;
    font-size: 1rem;
    
    /* CAMBIOS AQUÍ */
    background-color: var(--white-color); /* Lo hacemos blanco para que el borde resalte */
    border: 1px solid var(--border-color); /* ¡AQUÍ ESTÁ TU BORDE GRIS FINO! */
    
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Y no te olvides de ajustar el :hover para que siga funcionando bien */
.answer-btn:hover {
    border-color: var(--primary-color);
    background-color: #e9e9f7;
}

/* Slide de Resultados */
.result-slide .score-display {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px;
}
.result-slide #quiz-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}
.result-slide #quiz-result-message {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}
#quiz-result-cta {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINA DE CONTACTO === */
/* ================================================================ */

.contact-page-section {
    padding: 60px 0;
}

.contact-page-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Columna del form un poco más ancha */
    background-color: var(--white-color);
    border-radius: 16px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* --- Columna Izquierda: Formulario --- */
.contact-form-wrapper {
    padding: 40px;
}
.contact-form-wrapper h2 {
    font-size: 2rem;
}
.contact-form-wrapper p {
    margin: 10px 0 30px;
    color: var(--text-color);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group label {
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--dark-color);
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: #f9fafb;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}
.form-hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 6px;
}

/* --- Columna Derecha: Información --- */
.contact-info-wrapper {
    background-color: #1a253c;
    color: #e0e0e0;
    padding: 40px;
    position: relative;
    overflow: hidden;
}
.contact-info-wrapper::before { /* Patrón de fondo sutil */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
                      linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%);
    background-size: 20px 20px;
    z-index: 1;
}
.contact-info-wrapper > * {
    position: relative;
    z-index: 2;
}
.contact-info-wrapper h3 {
    color: var(--white-color);
    font-size: 1.5rem;
    margin-bottom: 25px;
}
.contact-info-wrapper ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.contact-info-wrapper li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
}
.contact-info-wrapper li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.2rem;
}
.contact-info-wrapper p {
    color: #94a3b8;
    line-height: 1.7;
}

/* --- Media Query para Móvil --- */
@media (max-width: 991px) {
    .contact-page-container {
        grid-template-columns: 1fr; /* Una sola columna */
    }
    .contact-info-wrapper {
        order: -1; /* Hacemos que la columna de info aparezca primero */
    }
}


/* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINA "SOBRE MÍ" === */
/* ================================================================ */

/* --- Hero de la página --- */
.about-hero {
    text-align: center;
    padding: 60px 20px;
    background-color: var(--light-gray-color);
}
.about-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 0 auto 25px;
    background-color: var(--white-color);
    border: 4px solid var(--white-color);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Para que la imagen se recorte si no es cuadrada */
}
.about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el círculo sin deformarse */
}
.about-photo svg {
    color: var(--primary-color);
}
.about-hero h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}
.about-subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-color);
}

/* --- Sección de la historia --- */
.about-story {
    padding: 80px 0;
}
.story-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}
.story-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}
.story-text p {
    margin-bottom: 20px;
    line-height: 1.7;
}
.story-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Sección de credenciales --- */
.credentials-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}
.credentials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 40px;
}
.credential-item h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}
.credential-item p {
    margin-bottom: 20px;
}
.credential-item ul {
    list-style: none;
    padding: 0;
}
.credential-item ul li {
    margin-bottom: 12px;
}

/* --- Media Queries para hacerla responsive --- */
@media (max-width: 991px) {
    .story-container,
    .credentials-grid {
        grid-template-columns: 1fr;
    }
    .story-image {
        order: -1; /* Pone la imagen arriba en móvil */
        margin-bottom: 40px;
    }
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA SLIDER DE TESTIMONIOS === */
/* ================================================================ */


.testimonials-section {
    padding: 80px 0;
    background-color: var(--light-gray-color);
}

/* Reemplaza esta regla en tu CSS */
.testimonials-slider {
    max-width: 450px; /* Solo necesitamos definir el ancho máximo */
    margin: -10 auto;   /* Centrado horizontal perfecto */
    position: relative;
    overflow: visible;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px; /* Espacio para la paginación de puntitos */
    box-sizing: border-box;
}

/* Modifica la regla .whatsapp-chat en tu CSS */

.whatsapp-chat {
    width: 100%;
    max-width: 380px;
    background-color: #e5ddd5;
    background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png');
    padding: 20px 15px;
    border-radius: 12px;
    box-shadow: 10 10px 30px -10px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* ¡AÑADE ESTA LÍNEA! */
    transform: translateX(30px); 
}
.message { max-width: 80%; padding: 8px 12px; border-radius: 8px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.message p { margin: 0; line-height: 1.4; font-size: 0.95rem; }
.message .time { display: block; text-align: right; font-size: 0.75rem; color: #888; margin-top: 5px; }
.message.received { background-color: var(--white-color); align-self: flex-start; }
.message.sent { background-color: #dcf8c6; align-self: flex-end; }
.message.sent .time { color: #4fc3f7; }

/* Estilos de las flechas de navegación */
/* ================================================================ */
/* === ESTILOS DEFINITIVOS PARA NAVEGACIÓN DEL SLIDER === */
/* ================================================================ */

/* ================================================================ */
/* === ESTILOS DEFINITIVOS PARA SECCIÓN DE TESTIMONIOS (V3) === */
/* ================================================================ */

.testimonials-section {
    padding: 50px 0;
    background-color: var(--light-gray-color);
}

/* Encabezado de la sección */
.testimonials-section .section-header {
    margin-bottom: 20px; /* Reducimos el margen inferior */
}

/* Contenedor del slider */
.testimonials-slider {
    width: 100%;
    max-width: 650px;
    margin: 0 auto; /* Lo centramos sin margen superior */
    position: relative;
    overflow: visible;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 50px;
    box-sizing: border-box;
}

/* Estilos del chat (sin cambios) */
.whatsapp-chat { width: 100%; max-width: 380px; background-color: #e5ddd5; background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png'); padding: 20px 15px; border-radius: 12px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 10px; }
.message { max-width: 80%; padding: 8px 12px; border-radius: 8px; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.message p { margin: 0; line-height: 1.4; font-size: 0.95rem; }
.message .time { display: block; text-align: right; font-size: 0.75rem; color: #888; margin-top: 5px; }
.message.received { background-color: var(--white-color); align-self: flex-start; }
.message.sent { background-color: #dcf8c6; align-self: flex-end; }
.message.sent .time { color: #4fc3f7; }

/* --- NAVEGACIÓN DEL SLIDER (ENFOQUE MEJORADO) --- */
.swiper-button-next,
.swiper-button-prev {
    color: var(--primary-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Solo para el centrado vertical */
    z-index: 10;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.testimonials-slider:hover .swiper-button-next,
.testimonials-slider:hover .swiper-button-prev {
    opacity: 1;
}

/* Posiciones (ahora fuera de la media query para que apliquen siempre) */
.swiper-button-prev {
    left: -55px;
}
.swiper-button-next {
    right: -55px;
}

/* En móvil, las acercamos para que no se salgan de la pantalla */
@media (max-width: 550px) {
    .swiper-button-prev {
        left: -10px;
    }
    .swiper-button-next {
        right: -10px;
    }
}

/* Paginación (puntitos) */
.swiper-pagination {
    position: absolute;
    bottom: 20px; /* Posicionamos los puntos más abajo */
}
.swiper-pagination-bullet { background-color: var(--primary-color); opacity: 0.5; }
.swiper-pagination-bullet-active { opacity: 1; }

/* --- Pie de la sección de testimonios --- */
.testimonials-footer {
    text-align: center;
    padding-top: 40px; /* Espacio arriba */
    margin-top: 20px; /* Espacio entre el slider y la línea */
    position: relative;
}

/* La línea divisoria azul */
.testimonials-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw; /* Ancho completo de la pantalla */
    height: 1px;
    background-color: var(--border-color); /* Usamos el color de borde para sutileza */
}

.testimonials-footer .learn-more {
    color: var(--primary-color);
    font-weight: 600;
}

/* === ESTILOS PARA EL BONUS EN LA BARRA LATERAL === */
.bonus-box {
    background-color: hsla(53, 93%, 54%, 0.15); /* Tono amarillo del accent-color */
    border: 1px dashed var(--accent-color);
    border-radius: 8px;
    padding: 15px;
    margin-top: 25px;
    text-align: center;
}
.bonus-box h4 {
    color: var(--dark-color);
    font-size: 1rem;
    margin-bottom: 5px;
}
.bonus-box p {
    font-size: 0.9rem;
    margin: 0;
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINA PILAR === */
/* ================================================================ */

/* Hero de la página pilar */
/* Reemplaza la regla .pillar-hero que tienes con esta */
.pillar-hero {
    padding: 80px 20px;
    color: var(--white-color);
    
    /* ¡AQUÍ ESTÁ LA MAGIA DEL DEGRADADO! */
    background: linear-gradient(125deg, #2563eb, #1e3a8a, #111827);
    
    text-align: center; /* Aseguramos que el contenido esté centrado */
}
.pillar-hero .pillar-badge {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--primary-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.pillar-hero h1 {
    color: var(--white-color);
    font-size: 3.2rem;
}
.pillar-hero .pillar-subtitle {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 15px auto 30px;
    color: #d1d5db;
}

/* Tabla de Contenidos */
.toc-section {
    padding: 40px 0;
    background-color: var(--light-gray-color);
    border-bottom: 1px solid var(--border-color);
}
/* ================== ESTILOS MEJORADOS PARA TABLA DE CONTENIDOS === */
.pillar-toc {
    background-color: var(--white-color);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.pillar-toc h3 {
    text-align: center;
    margin-bottom: 25px;
}
.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.toc-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: var(--light-gray-color);
    border-radius: 8px;
    transition: all 0.2s ease-out;
    border: 1px solid transparent;
}
.toc-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.1);
    border-color: var(--primary-color);
    background-color: var(--white-color);
}

.toc-icon {
    flex-shrink: 0;
    color: var(--primary-color);
}

.toc-item span {
    font-weight: 600;
    line-height: 1.4;
}

/* Contenido de la página pilar */
.pillar-section {
    padding: 60px 0;
    border-bottom: 1px solid var(--border-color);
}
.pillar-container {
    max-width: 800px; /* Contenido más angosto para lectura fácil */
}
.pillar-section h2 {
    margin-bottom: 20px;
    font-size: 2.2rem;
}
.pillar-section p {
    line-height: 1.8;
    margin-bottom: 15px;
}
.link-inline {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

/* Grillas y tarjetas */
.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 20px 0;
}
.benefit-card {
    background-color: var(--light-gray-color);
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}
.conflicts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.conflict-card {
    background: var(--white-color);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    text-align: center;
}
.conflict-card h3 { font-size: 1.2rem; }
.mt-30 { margin-top: 30px; }
/* === ESTILOS PARA ICONOS EN SECCIÓN DE CONFLICTOS (Añadir al Final) === */

.conflict-card {
    display: flex;
    flex-direction: column; /* Alineamos el contenido verticalmente */
    align-items: center; /* Centramos todo */
    padding-top: 35px;
    padding-bottom: 35px;
}

.conflict-icon {
    width: 60px;
    height: 60px;
    background-color: var(--light-gray-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--primary-color);
    transition: all 0.2s ease;
}

.conflict-card:hover .conflict-icon {
    background-color: var(--primary-color);
    color: var(--white-color);
    transform: scale(1.1);
}

.conflict-card h3 {
    margin-bottom: 10px;
}
.conflict-card p {
    flex-grow: 1; /* Ayuda a alinear los botones si los hubiera */
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA SECCIÓN DE BLOG === */
/* ================================================================ */

/* --- Estilos para la Página Principal del Blog (blog.html) --- */
.blog-grid-section {
    padding: 60px 0;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}
.blog-card {
    background: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.card-image-link img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.card-category {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 10px;
}
.card-content h2 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.card-content h2 a {
    color: var(--dark-color);
    text-decoration: none;
}
.card-excerpt {
    margin-bottom: 20px;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}
.card-content .btn {
    align-self: flex-start; /* Alinea el botón a la izquierda */
}

/* --- Estilos para la Página de Artículo Individual (articulo-template.html) --- */
/* Reemplaza la regla .article-header que tienes con esta */
.article-header {
    padding: 80px 20px;
    color: var(--white-color); /* Hacemos que el texto interior sea blanco */
    
    /* ¡AQUÍ ESTÁ LA MAGIA! El mismo degradado */
    background: linear-gradient(125deg, #2563eb, #1e3a8a, #111827);
}
/* Modifica estas reglas o añádelas si no existen dentro de la sección de BLOG */

.article-header h1 {
    font-size: 2.8rem;
    max-width: 800px;
    margin: 15px auto 10px;
    color: var(--white-color); /* Aseguramos que el H1 sea blanco */
}

.article-meta {
    color: #d1d5db; /* Un blanco más suave para el subtítulo */
    font-size: 0.9rem;
}

/* Estilo específico para la categoría DENTRO del header del artículo */
.article-header .card-category {
    display: inline-block;
    color: var(--dark-color);
    background-color: var(--accent-color); /* Usamos el color de acento (amarillo) */
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 20px;
}
.article-featured-image {
    width: 100%;
    height: 450px;
    max-height: 50vh;
}
.article-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
     object-position: top;
}
.article-content-wrapper {
    padding: 60px 0;
}
.article-content {
    max-width: 750px;
    margin: 0 auto;
}
.article-content p,
.article-content ul {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
}
.article-content h2 {
    font-size: 1.8rem;
    margin: 40px 0 20px;
}
.article-content ul {
    list-style: disc;
    padding-left: 20px;
}
.article-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 25px;
    font-size: 1.2rem;
    font-style: italic;
    margin: 40px 0;
    color: var(--text-color);
}
/* Reemplaza la sección .cta-article que tienes con esta */
.cta-article {
    padding: 80px 20px; /* Le damos más espacio vertical para que respire */
    background-color: var(--light-gray-color);
    border-top: 1px solid var(--border-color);
}

.cta-article .container {
    /* ¡AQUÍ ESTÁ LA MAGIA! */
    display: flex;
    flex-direction: column; /* Apilamos los elementos verticalmente */
    align-items: center;   /* Centramos todo horizontalmente */
    text-align: center;    /* Centramos el texto dentro de cada elemento */
}

.cta-article h3 {
    font-size: 2rem; /* Hacemos el título un poco más grande */
    margin-bottom: 15px;
}

.cta-article p {
    max-width: 550px; /* Limitamos el ancho del párrafo para fácil lectura */
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.cta-article .btn {
    padding: 15px 35px; /* Hacemos el botón un poco más grande */
    font-size: 1.1rem;
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA LOGIN Y DASHBOARD DE CURSOS === */
/* ================================================================ */

/* --- Página de Login --- */
.login-page-body {
    background-color: var(--light-gray-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-container .logo { justify-content: center; }
.login-box { background: var(--white-color); padding: 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); }
.login-box h2 { text-align: center; }
.login-box p { text-align: center; margin-bottom: 30px; }
.login-form { display: flex; flex-direction: column; gap: 20px; }
.login-footer { text-align: center; margin-top: 20px; }
.login-footer a { font-size: 0.9rem; }
.mb-30 { margin-bottom: 30px; }

/* --- Página de Dashboard de Cursos --- */
.dashboard-page-body { background-color: #f9fafb; }
.dashboard-grid { display: grid; grid-template-columns: 280px 1fr; height: 100vh; }
.dashboard-sidebar { background: var(--white-color); border-right: 1px solid var(--border-color); padding: 30px; display: flex; flex-direction: column; }
.course-nav { flex-grow: 1; }
.course-nav h3 { font-size: 1rem; text-transform: uppercase; color: #9ca3af; letter-spacing: 1px; margin-bottom: 20px; }
.course-nav ul { list-style: none; padding: 0; }
.course-nav a { display: block; padding: 12px 15px; border-radius: 6px; font-weight: 500; margin-bottom: 5px; transition: background-color 0.2s; }
.course-nav a:hover { background-color: var(--light-gray-color); }
.course-nav a.active { background-color: var(--primary-color); color: var(--white-color); }
.sidebar-footer a { font-size: 0.9rem; color: var(--text-color); }

.dashboard-content { padding: 40px; overflow-y: auto; }
.video-player-wrapper { position: relative; padding-bottom: 56.25%; height: 0; border-radius: 12px; overflow: hidden; background: #000; }
.video-player-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-details { margin-top: 30px; }
.video-details h1 { font-size: 2.2rem; }
.video-details p { font-size: 1.1rem; }



/* ================== ESTILOS GENERALES Y VARIABLES ================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--text-color); line-height: 1.6; background-color: var(--white-color); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
/* ... (otros estilos generales como a, ul, h1, etc.) ... */


/* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINA "BRÚJULA INTERIOR" === */
/* ================================================================ */
.compass-page-body { background-color: #f9fafb; }
.compass-container {
    max-width: 900px;
    margin: 60px auto;
    padding: 20px;
    min-height: 50vh;
}
.compass-step {
    display: none; /* Oculto por defecto */
    text-align: center;
}
.compass-step.active {
    display: block; /* Visible */
}
.compass-container h1 { font-size: 2.8rem; }
.compass-container p { font-size: 1.1rem; margin: 15px 0 30px; }

.compass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.compass-card {
    background: var(--white-color);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.compass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#step-2 h2 { font-size: 2rem; margin-bottom: 30px; }
.options-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
.options-grid .option-btn {
    background: var(--white-color);
    border: 1px solid var(--border-color);
    padding: 12px 20px;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.options-grid .option-btn:hover {
    background: #e9e9f7;
    border-color: var(--primary-color);
}
.back-btn {
     background: linear-gradient(145deg, #1e3a8a, #111827);
    margin-top: 50px;
    cursor: pointer;
    font-weight: 400;
    padding: 5px;
    border-radius: 5px;
    font-size: 15px;
    color: white;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
       
    }



.result-view h2 { font-size: 2rem; }
.result-box {
     background: linear-gradient(125deg, #2563eb, #1e3a8a, #111827);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin: 20px 0 30px;
    text-align: left;
    color: white;
}
.result-box p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0;
    color: #e0e0e0; /* Un blanco más suave para mejor lectura */
}
.result-cta p { font-size: 1rem; }


/* ================================================================ */
/* === ESTILOS DEFINITIVOS Y CORREGIDOS PARA "ORÁCULO" === */
/* ================================================================ */
.oracle-page-body {
    background: #111827;
    background-image: radial-gradient(circle at top center, #374151, #111827);
    color: #e5e7eb;
}
.oracle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 70px); /* Asume un header de 70px */
    padding: 40px 20px;
}
.oracle-step {
    display: none; /* REGLA CLAVE: Todos los pasos ocultos por defecto */
    text-align: center;
    width: 100%;
    animation: fadeIn 0.8s ease-in-out;
}
    @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.oracle-step.active {
    display: block; /* Muestra SOLO el paso activo */
}
.oracle-container h1 {
    color: var(--white-color);
    font-size: 2.8rem;
}
.oracle-container > .oracle-step > p {
    max-width: 500px;
    margin: 15px auto 0;
    line-height: 1.7;
}

/* El Mazo de Cartas */
.deck {
    display: flex;
    justify-content: center;
    gap: -80px;
    margin-top: 50px;
    perspective: 1000px;
}
.tarot-card {
    width: 150px;
    height: 250px;
    border: 5px solid var(--white-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}
.tarot-card.back {
    background: linear-gradient(145deg, var(--primary-color), #26388f);
}
.deck .tarot-card:hover {
    transform: translateY(-20px) scale(1.05);
    z-index: 10;
}
.deck .tarot-card:nth-child(1) { transform: rotate(-10deg); }
.deck .tarot-card:nth-child(2) { z-index: 5; transform: translateY(-10px); }
.deck .tarot-card:nth-child(3) { transform: rotate(10deg); }

/* La Revelación */
.card-and-meaning {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
    align-items: center;
}
.revealed-card-wrapper {
    display: flex;
    justify-content: center;
    perspective: 1000px;
}
#chosen-card {
    cursor: default;
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
    background-size: cover;
    background-position: center;
    transform: rotateY(0deg);
}
#chosen-card.flipped {
    transform: rotateY(180deg);
}
.meaning { text-align: left; }
.meaning h2 { color: var(--accent-color); font-size: 2rem; }
.meaning p { margin: 15px 0 30px; }
.reveal-cta { background-color: rgba(255, 255, 255, 0.575); padding: 20px; border-radius: 8px; }
.reveal-cta p { font-size: 0.9rem; margin: 0 0 15px; }

        

    


@media (min-width: 768px) {
    .card-and-meaning { grid-template-columns: 200px 1fr; }
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINA DE TESTIMONIOS === */
/* ================================================================ */

.testimonials-gallery-section {
    padding: 60px 0;
}

.testimonials-grid {
    display: grid;
    /* Columnas flexibles que se adaptan, con un ancho mínimo de 350px */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.testimonial-card {
    background-color: var(--white-color);
    border-radius: 12px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.08);
    overflow: hidden; /* Para que el chat no se salga de los bordes redondeados */
    display: flex;
    flex-direction: column;
}

/* Reutilizamos el estilo del chat de WhatsApp que ya teníamos */
.testimonial-card .whatsapp-chat {
    border-radius: 0; /* Quitamos el borde redondeado para que encaje */
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
}

.testimonial-context {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.testimonial-context h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.testimonial-context p {
    font-size: 0.95rem;
    flex-grow: 1; /* Empuja el enlace hacia abajo */
    margin-bottom: 20px;
}

.testimonial-context a {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    align-self: flex-start;
}
.testimonial-context a:hover {
    text-decoration: underline;
}

/* === ESTILOS PARA BLOQUE INTERACTIVO EN ARTÍCULOS === */
.interactive-quote {
    background-color: var(--light-gray-color);
    border-left: 4px solid var(--accent-color);
    padding: 25px;
    margin: 40px 0;
    border-radius: 0 8px 8px 0;
}
.interactive-quote h4 {
    margin: 0 0 10px;
    color: var(--primary-color);
}
.interactive-quote p {
    margin: 0 0 20px;
    font-style: italic;
}
.btn-small {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* === ESTILOS PARA TABLA COMPARATIVA EN ARTÍCULOS === */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 40px 0;
}
.comparison-card {
    background-color: var(--light-gray-color);
    padding: 30px;
    border-radius: 12px;
}
.comparison-card h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
}
.comparison-card ul {
    list-style: none;
    padding: 0;
}
.comparison-card ul li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
}
.comparison-card ul li::before {
    content: '✓';
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}
.comparison-card.primary {
    background-color: var(--primary-color);
    color: var(--white-color);
}
.comparison-card.primary h3 {
    color: var(--accent-color);
}
.comparison-card.primary ul li::before {
    color: var(--accent-color);
}

@media (min-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* === ESTILOS PARA BLOQUE INTERACTIVO "CAZADOR DE MITOS" === */
.myth-buster-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 40px 0;
}
.myth-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--white-color);
    overflow: hidden;
    transition: all 0.3s ease;
}
.myth-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.1);
}
.myth-header {
    width: 100%;
    background: none;
    border: none;
    padding: 20px;
    text-align: left;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.myth-header::after {
    content: '+';
    font-size: 1.8rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}
.myth-item.active .myth-header::after {
    content: '-';
    transform: rotate(180deg);
}
.truth-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.myth-item.active .truth-content {
    max-height: 500px; /* Un valor alto para que el contenido quepa */
}
.truth-content p {
    padding: 0 20px 20px 20px;
    margin: 0;
}
/* === ESTILOS PARA LISTA DE LIBROS EN ARTÍCULOS === */
.book-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.book-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 25px;
    align-items: flex-start;
}
.book-cover {
    width: 120px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.book-cover img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.book-details h3 {
    margin: 0 0 10px;
    font-size: 1.3rem;
}
.book-details p {
    margin: 0 0 15px;
}

@media (max-width: 576px) {
    .book-item {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        text-align: center;
    }
    .book-cover {
        margin: 0 auto 20px;
    }
}

/* === ESTILOS PARA TABLA COMPARATIVA DE PRECIOS/SERVICIOS === */
.pricing-table-section {
    padding: 60px 0 80px;
    background-color: var(--light-gray-color);
}
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center; /* Para alinear verticalmente las tarjetas */
}
.pricing-card {
    background: var(--white-color);
    border-radius: 12px;
    padding: 30px;
    border: 2px solid transparent;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
}
.pricing-card h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
}
.card-subtitle {
    color: var(--text-color);
    margin: 5px 0 25px;
    min-height: 40px; /* Para alinear los precios */
}
.card-price {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 25px;
}
.card-price span {
    font-size: 1.2rem;
    font-weight: 500;
    vertical-align: super;
    margin-right: 2px;
}
.card-features {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 30px;
    flex-grow: 1; /* Empuja el botón al fondo */
}
.card-features li {
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
}
.card-features .check {
    color: var(--primary-color);
    font-weight: bold;
}
.btn-full {
    width: 100%;
}

/* Tarjeta Destacada */
.pricing-card.popular {
    border-color: var(--primary-color);
    transform: scale(1.05);
    position: relative;
    overflow: visible; /* Permitimos que el badge se vea */
}
.pricing-card.popular .popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: var(--dark-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

@media (min-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* === ESTILOS PARA SECCIÓN FAQ EN PÁGINA COMPARATIVA === */
.faq-section {
    padding: 80px 0;
    background-color: var(--white-color); /* Fondo blanco para contrastar con la sección de precios */
}

/* Reutilizamos el contenedor de FAQ que ya creamos, pero con un ancho específico */
.faq-container {
    max-width: 800px;
}
/* === ESTILOS PARA PÁGINA "MI COMPROMISO CONTIGO" === */
.commitment-section {
    padding: 80px 0;
    background-color: var(--white-color);
}
.commitment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.commitment-card {
    text-align: center;
    border: 1px solid var(--border-color);
    padding: 30px;
    border-radius: 12px;
}
.commitment-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: var(--white-color);
    margin: 0 auto 20px;
}
.commitment-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}
.commitment-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color);
}

/* === ESTILOS ADICIONALES Y MEJORAS PARA EL HEADER DEFINITIVO === */

/* Contenedor para los botones de acción en escritorio */
.action-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Estilo para el nuevo icono de la brújula */
.nav-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    padding: 8px;
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-icon-link:hover {
    background-color: var(--light-gray-color);
    color: var(--primary-color);
}

/* Línea divisora para los menús desplegables */
.dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 8px 0;
}

/* === ESTILOS ADICIONALES PARA HEADER v2.0 === */

/* Para el nuevo dropdown compacto */
.desktop-nav .dropdown-menu.compact li a {
    padding: 8px 12px;
    font-size: 0.9rem; /* Letra más chica */
}
.desktop-nav .dropdown-item-with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
}
.desktop-nav .dropdown-item-with-icon svg {
    color: var(--primary-color);
    opacity: 0.8;
}

/* Nuevo enlace tipo "Chip" para la Brújula */
.nav-chip-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--light-gray-color);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}
.nav-chip-link .nav-chip-icon {
    stroke: var(--primary-color); /* ¡AQUÍ ESTÁ TU BRÚJULA VIOLETA! */
    transition: transform 0.3s ease;
}
.nav-chip-link:hover {
    background-color: #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.nav-chip-link:hover .nav-chip-icon {
    transform: rotate(360deg);
}

/* Ocultamos el viejo nav-icon-link */
.nav-icon-link {
    display: none;
}
/* === ESTILOS PARA EL NUEVO LAYOUT DEL MENÚ MÓVIL === */

/* Estilo para los títulos de sección dentro del menú */
.mobile-menu-title {
    display: block;
    padding: 10px 15px;
    font-size: 0.9rem; /* Un poco más pequeño que los enlaces */
    font-weight: 700;
    color: #9ca3af; /* Un color gris para diferenciarlo */
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left; /* Alineado a la izquierda para estructura */
}

/* Estilo para la línea divisora */
.mobile-nav-menu .dropdown-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 15px 0; /* Espacio vertical */
    list-style: none; /* Aseguramos que no tenga viñetas */
}

/* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINAS LEGALES (Términos, etc.) === */
/* ================================================================ */

.legal-page-container {
    max-width: 800px; /* Ancho ideal para lectura */
    margin: 60px auto; /* Espacio vertical y centrado */
    padding: 20px;
}

.legal-page-container h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 10px;
}

.legal-page-container .last-updated {
    text-align: center;
    color: var(--text-color);
    font-size: 0.9rem;
    margin-bottom: 40px;
}

.legal-page-container h2 {
    font-size: 1.6rem;
    color: var(--primary-color);
    margin-top: 40px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--light-gray-color);
    padding-bottom: 10px;
}

.legal-page-container p {
    line-height: 1.8;
    margin-bottom: 20px;
}
/* ================================================================ */
/* === NUEVOS ESTILOS PARA SECCIÓN PROMO DEL ORÁCULO === */
/* ================================================================ */

.oracle-promo-section {
    padding: 80px 0;
    /* Usamos el mismo degradado oscuro para crear un impacto visual */
    background: linear-gradient(145deg, #1e3a8a, #111827);
    color: var(--white-color);
}

.oracle-promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

/* --- Columna de Texto --- */
.promo-text .promo-badge {
    display: inline-block;
    padding: 5px 12px;
    background-color: var(--accent-color);
    color: var(--dark-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}
.promo-text h2 {
    color: var(--white-color);
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.promo-text p {
    color: #d1d5db; /* Blanco suave */
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* --- Columna Visual --- */
.promo-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.oracle-card-mockup {
    width: 220px;
    height: 350px;
    background-color: rgba(255, 255, 255, 0.05); /* Ligeramente transparente */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Para el efecto de brillo */
    backdrop-filter: blur(10px);
    transform: rotate(5deg); /* La inclinamos un poco */
}
.oracle-card-mockup svg {
    color: var(--accent-color);
    opacity: 0.8;
}

/* Efecto de brillo mágico */
.oracle-card-mockup::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.3), transparent 70%);
    transform: translate(-50%, -50%);
    z-index: -1;
    animation: pulseGlow 6s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
}

/* --- Media Query para Móvil --- */
@media (max-width: 991px) {
    .oracle-promo-grid {
        grid-template-columns: 1fr; /* Una sola columna */
        text-align: center;
    }
    .promo-visual {
        margin-top: 40px;
    }
    .oracle-card-mockup {
        transform: rotate(0deg); /* La enderezamos en móvil */
    }
}

/* === ESTILOS PARA FILTROS DEL BLOG === */

.blog-filters-container {
    background-color: var(--light-gray-color);
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
}
.blog-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que los botones pasen a otra línea en móvil */
    gap: 15px;
}
.filter-btn {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.filter-btn:hover {
    background-color: #e9e9f7;
    border-color: var(--primary-color);
}
.filter-btn.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

/* --- Estilos para las tarjetas del blog al filtrar --- */
.blog-card {
    /* ... tus estilos existentes ... */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Añadimos transición de opacidad */
}
.blog-card.hidden {
    transform: scale(0.9);
    opacity: 0;
    display: none; /* La ocultamos al final */
}
/* === ESTILOS DEFINITIVOS PARA FILTROS DEL BLOG === */

.blog-filters-container {
    background-color: var(--light-gray-color);
    padding: 30px 0;
    border-bottom: 1px solid var(--border-color);
}
.blog-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}
.filter-btn {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.filter-btn:hover {
    background-color: #e9e9f7;
    border-color: var(--primary-color);
}
.filter-btn.active {
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
}

/* --- Animación para las tarjetas --- */
.blog-card {
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.blog-card.hidden {
    transform: scale(0.95);
    opacity: 0;
    /* Quitamos el display:none de aquí, lo manejará el JS */
}

.back-to-blog-btn {
    display: inline-block;
    font-weight: 600; /* Le damos un poco más de grosor */
    margin-bottom: 25px;
    font-size: 0.9rem;
    
    /* ¡AQUÍ ESTÁ LA MAGIA! Le asignamos su propio color blanco */
    color: var(--white-color); 
    
    opacity: 0.8; /* Lo hacemos un poco sutil por defecto */
    transition: opacity 0.2s ease;
}

/* Y le añadimos un efecto hover para que se siga sintiendo como un link */
.back-to-blog-btn:hover {
    opacity: 1; /* Al pasar el mouse, se vuelve 100% opaco y brillante */
    text-decoration: underline; /* Le añadimos el clásico subrayado para indicar que es un enlace */
}

/* =¡=============================================================== */
/* === ESTILOS PARA SECCIÓN "SOBRE MÍ" (VERSIÓN CON MÁS IMPACTO) === */
/* ================================================================ */

.about-split-section {
    padding: 80px 0;
}

.about-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* Damos un poco más de espacio al texto */
    align-items: center;
    
    
    /* ¡CAMBIO 1: DIFUMINADO MÁS CLEntendido, FENÓMENO! ¡Esos son los toques de un artista! Quieres más impacto en el efecto "saliente" y un degradado más suave y luminoso que "abrace" la foto. ¡Me encanta!

Vamos a ajustar el CSS para lograr exactamente esa visión.

---

### El Código CSS con los Ajustes Finos

No necesitas cambiar tu HTML. Todo lo haremos con CSS. **Busca la sección de estilos `.about-split-section` en tu archivo `css/style.css` y reemplARO! */
    /* Añadimos un color intermedio más claro en el centro del degradado */
    background: linear-gradient(125deg, #111827 0%, #254098 50%, #111827 100%);
    
    border-radius: 16px;
    position: relative;
}

/* --- Columna Izquierda: Texto (sin cambios) --- */
.about-split-text {
    padding: 50px 30px 50px 50px; /* Ajustamos padding */
    color: var(--white-color);
}
.about-split-text .promo-badge {
    display: inline-block; padding: 5px 12px; background-color: var(--accent-color);
    color: var(--dark-color); border-radius: 20px; font-size: 0.8rem; font-weight: 700; margin-bottom: 20px;
}
.about-split-text h2 { color: var(--white-color); font-size: 2.8rem; margin-bottom: 15px; }
.about-split-text p { color: #d1d5db; font-size: 1.1rem; line-height: 1.7; max-width: 500px; margin-bottom: 30px; }
.about-split-text .btn-light:hover { background-color: transparent; color: var(--white-color); }


/* ---ázala completa** por este nuevo bloque mejorado.

```css
/* =¡=============================================================== */
/* === ESTILOS PARA SECCIÓN "SOBRE MÍ" (VERSIÓN CON MÁS IMPACTO) === */
/* ================================================================ */

.about-split-section {
    padding: 80px 0;
}

.about-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* Damos un poco más de espacio al texto */
    align-items: center;
    
    /* ¡CAMBIO 1: DIFUMINADO MÁS CLEntendido, FENÓMENO! ¡Esos son los toques de un artista! Quieres más impacto en el efecto "saliente" y un degradado más suave y luminoso que "abrace" la foto. ¡Me encanta!

Vamos a ajustar el CSS para lograr exactamente esa visión.

---

### El Código CSS con los Ajustes Finos

No necesitas cambiar tu HTML. Todo lo haremos con CSS. **Busca la sección de estilos `.about-split-section` en tu archivo `css/style.css` y reemplARO! */
    /* Añadimos un color intermedio más claro en el centro del degradado */
    background: linear-gradient(125deg, #111827 0%, #254098 50%, #111827 100%);
    
    border-radius: 16px;
    position: relative;
}

/* --- Columna Izquierda: Texto (sin cambios) --- */
.about-split-text {
    padding: 50px 30px 50px 50px; /* Ajustamos padding */
    color: var(--white-color);
}
.about-split-text .promo-badge {
    display: inline-block; padding: 5px 12px; background-color: var(--accent-color);
    color: var(--dark-color); border-radius: 20px; font-size: 0.8rem; font-weight: 700; margin-bottom: 20px;
}
.about-split-text h2 { color: var(--white-color); font-size: 2.8rem; margin-bottom: 15px; }
.about-split-text p { color: #d1d5db; font-size: 1.1rem; line-height: 1.7; max-width: 500px; margin-bottom: 30px; }
.about-split-text .btn-light:hover { background-color: transparent; color: var(--white-color); }


/* ---ázala completa** por este nuevo bloque mejorado.

```css
/* ================================================================ */
/* === ESTILOS "SOBRE MÍ" (VERSIÓN CON MÁS IMPACTO) === */
/* ================================================================ */

.about-split-section {
    padding: 80px 0;
    /* Damos un fondo blanco a la sección para el contraste */
    background-color: var(--white-color);
}

.about-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative; /* Contenedor para la imagen */
    border-radius: 16px; /* Bordes redondeados para el contenedor azul */
    
    /* ¡AQUÍ ESTÁ EL NUEVO DEGRADADO! */
    /* Empieza con un azul más claro y se va al oscuro */
    background: linear-gradient(125deg, #2563eb, #1e3a8a, #111827);
}

/* --- Columna Izquierda: Texto (sin cambios) --- */
.about-split-text {
    padding: 50px;
    color: var(--white-color);
}

/* --- Columna Derecha: Imagen (con más "pop") --- */
.about-split-image {
    position: absolute;
    bottom: 5;
    right: 5%; /* La movemos un poco desde el borde derecho */
    width: 45%; /* La hacemos un poco más pequeña en relación al contenedor */
    max-width: 440px;
    
    /* ¡AQUÍ ESTÁ EL CAMBIO CLAVE! Más desplazamiento hacia arriba */
    transform: translateY(-80px); 
    
    transition: transform 0.3s ease;
}
.about-split-image:hover {
    transform: translateY(-90px) scale(1.02); /* Efecto hover sutil */
}
.about-split-image img {
    width: 100%;
    height: auto;
    /* Quitamos el borde redondeado para un look más natural */
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3)); /* Sombra más dramática */
}


/* ================================================================ */
/* === AJUSTE FINAL PARA "SOBRE MÍ" EN MÓVIL === */
/* ================================================================ */
/* --- Estilos para Móviles (max-width: 991px) --- */
@media (max-width: 991px) {
    
    /* 1. Contenedor Principal: Lo convertimos en un Flexbox */
    .about-split-grid {
        /* Usamos Flexbox para tener más control sobre el orden y la alineación */
        display: flex;
        flex-direction: column; /* Apilamos los elementos uno encima del otro */
        align-items: center;    /* Centramos todo horizontalmente */
        
        /* Eliminamos el padding y margin superior que ya no necesitamos */
        padding-top: 0;
        margin-top: 0;
        
        /* Mantenemos una sola columna y el grid-gap si lo tenías */
        grid-template-columns: 1fr;
    }

    /* 2. La Imagen: La ponemos primero y le damos su propio espacio */
    .about-split-image {
        /* ¡IMPORTANTE! Devolvemos la imagen a su estado normal (estático) */
        position: static;
        transform: none; /* Reseteamos la transformación */
        
        /* Le damos un orden para que aparezca PRIMERO, antes que el texto */
        order: -1; 
        
        /* Creamos el espacio para que "respire" y se separe del borde superior */
        padding-top: 60px;
        padding-bottom: 30px;

        /* Reseteamos el ancho y aseguramos que esté centrado */
        width: 100%;
        left: auto;
        top: auto;
    }

    /* 3. La Imagen en sí (la etiqueta <img>) */
    .about-split-image img {
        display: block; /* Aseguramos que sea un bloque para aplicar márgenes */
        margin: 0 auto; /* Centramos la imagen horizontalmente */
        
        /* Definimos un tamaño claro y responsive */
        width: 220px;   /* Un tamaño base fijo */
        height: 220px;  /* Hacemos que sea un círculo perfecto */
        max-width: 70%; /* Como máximo, el 70% del ancho de la pantalla */

        /* Mantenemos el estilo visual que ya te gustaba */
        object-fit: cover; /* Evita que la imagen se deforme si no es cuadrada */
        border-radius: 50%;
        border: 6px solid var(--white-color);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    /* 4. El Bloque de Texto: Lo ajustamos para que quede debajo */
    .about-split-text {
        text-align: center; /* Mantenemos el texto centrado */
        
        /* Ajustamos el padding para que se vea bien debajo de la imagen */
        padding: 0 25px 60px 25px; /* 0 arriba, 25 a los lados, 60 abajo */
    }
}

/* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINA COMPARATIVA DE SESIONES === */
/* ================================================================ */

.pricing-table-section {
    padding: 60px 0 80px;
    background-color: var(--light-gray-color);
}

/* --- Interruptor Interactivo --- */
.pricing-toggle-switch {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    background-color: #e5e7eb;
    padding: 5px;
    border-radius: 8px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}
.pricing-toggle-switch input {
    display: none;
}
.pricing-toggle-switch label {
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    transition: all 0.2s ease;
}
.pricing-toggle-switch input:checked + label {
    background-color: var(--white-color);
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Grilla de Precios --- */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}
.pricing-card {
    background: var(--white-color);
    border-radius: 12px;
    padding: 30px;
    border: 2px solid transparent;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    display: flex;
    flex-direction: column;
}
.pricing-card h3 { font-size: 1.5rem; color: var(--primary-color); }
.card-subtitle { color: var(--text-color); margin: 5px 0 25px; min-height: 40px; }
.card-price { font-size: 2.8rem; font-weight: 700; margin-bottom: 25px; }
.card-price span { font-size: 1.2rem; font-weight: 500; vertical-align: super; margin-right: 2px; }
.card-features { list-style: none; padding: 0; text-align: left; margin-bottom: 30px; flex-grow: 1; }
.card-features li { margin-bottom: 12px; display: flex; gap: 10px; }
.card-features .check { color: var(--primary-color); font-weight: bold; }

/* Paneles de Contenido Interactivo */
.content-pane { display: none; }
.content-pane.active { display: block; }

/* Tarjeta Destacada */
.pricing-card.popular {
    border-color: var(--primary-color);
    transform: scale(1.05);
    position: relative;
}
.pricing-card.popular .popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: var(--dark-color);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}

@media (min-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ================================================================ */
/* === AJUSTES RESPONSIVE PARA MODALES EN MÓVIL === */
/* ================================================================ */

@media (max-width: 768px) {
    
    .modal-content {
        /* Hacemos que ocupe casi todo el ancho, con pequeños márgenes */
        width: 95%; 
        
        /* Permitimos que la altura se ajuste al contenido, hasta un máximo */
        height: auto;
        max-height: 90vh; /* Máximo 90% de la altura de la pantalla */
        
        /* Hacemos que el contenido interno sea scrollable si excede la altura */
        overflow-y: auto;
        
        /* Ajustamos el padding para pantallas pequeñas */
        padding: 25px 15px;
    }

    /* Ajuste específico para el modal del quiz en móvil */
    .quiz-modal-content {
        padding: 0; /* El quiz ya tiene sus propios paddings internos */
    }

    .quiz-body {
        padding: 20px; /* Reducimos el padding interno del quiz */
    }
}

/* ================================================================ */
/* === ESTILOS MEJORADOS PARA PÁGINA DE CONTACTO CON IMAGEN === */
/* ================================================================ */

.contact-page-section {
    padding: 150px 0 80px; /* Aumentamos el padding superior para dar espacio a la foto */
    background-color: var(--light-gray-color); /* Un fondo suave para toda la sección */
}

.contact-page-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background-color: var(--white-color);
    border-radius: 16px;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.1);
    /* ¡CLAVE! Hacemos que sea un contenedor de posicionamiento */
    position: relative;
}

/* --- La Imagen Flotante --- */
/* Reemplaza esta regla completa en tu css/style.css */
.contact-floating-image {
    position: absolute;
    
    /* ¡AQUÍ ESTÁ LA MAGIA! La anclamos abajo, no arriba. */
    bottom: 0; 
    left: 78%;
    
    /* 
     * El truco:
     * translateX(-50%) la centra horizontalmente.
     * translateY(20%) la empuja un POCO hacia abajo desde su anclaje 
     * en el borde inferior, creando el efecto de que está sentada justo ahí.
     * Ajusta este 20% si quieres que esté más arriba o más abajo.
    */
    transform: translate(-50%, -20%);
    
    z-index: 10;
}
.contact-floating-image img {
    width: 300px; /* Un tamaño prominente pero no excesivo */
    height: 300px;
    border-radius: 50%;
    object-fit: cover;
    border: 8px solid var(--white-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* --- Columnas de Contenido --- */
.contact-form-wrapper {
    padding: 40px;
}
.contact-info-wrapper {
    background-color: #1a253c;
    color: #e0e0e0;
    padding: 40px;
    border-radius: 0 16px 16px 0; /* Bordes redondeados solo a la derecha */
    position: relative;
    overflow: hidden;
}

/* ... (El resto de los estilos del form, info-wrapper, etc., se mantienen igual) ... */
.contact-info-wrapper::before { /* Mantenemos el patrón sutil */
    content: ''; position: absolute; top: 10; right: 0; bottom: 10; left: 0;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
                      linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%);
    background-size: 20px 20px; z-index: 1;
}
.contact-info-wrapper > * { position: relative; z-index: 2; }
@media (max-width: 991px)
{
 .contact-floating-image {
    display: none;
 }

}

/* --- Media Query para Móvil (Súper Importante) --- */
@media (max-width: 991px) {
    .contact-page-section {
        padding-top: 100px; /* Reducimos el padding */
    }
    .contact-page-container {
        grid-template-columns: 1fr; /* Una sola columna */
        padding-top: 100px; /* Espacio DENTRO de la caja para la foto */
    }
    .contact-floating-image img {
        width: 150px; /* Hacemos la imagen un poco más pequeña */
        height: 150px;
    }
    .contact-info-wrapper {
        display: none; /* En móvil, para simplificar, ocultamos la columna azul */
    }
    .contact-form-wrapper {
        grid-column: 1 / -1; /* Hacemos que el form ocupe todo el ancho */
    }
}



/* ================================================================ */
/* === NUEVOS ESTILOS PARA SECCIÓN "ÁRBOL DE LA VIDA" === */
/* ================================================================ */

.tree-section {
    padding: 80px 0;
    background-color: #f9fafb;
    overflow: hidden; /* Evita que las animaciones causen scroll */
}
/* Reemplaza la regla .tree-container que ya tienes */
.tree-container {
    display: grid;
    /* CAMBIO IMPORTANTE: Ahora la primera columna es más ancha */
    grid-template-columns: 1.2fr 1fr; 
    align-items: center;
    gap: 50px;
}

/* --- El Árbol SVG --- */
.tree-visual { text-align: center; }
.tree-svg {
    width: 100%;
    max-width: 300px;
    height: 400px;
}
.tree-svg .tree-part path {
    fill: none;
    stroke: #cbd5e1;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke 0.4s ease-in-out;
}

/* --- El Contenido y las Hojas --- */
.tree-content h2 {
    font-size: 2.5rem;
    line-height: 1.2;
}
.tree-content p {
    font-size: 1.1rem;
    margin: 15px 0 30px;
}

.leaves-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.leaf-item {
    background: var(--white-color);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.leaf-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.1);
    border-color: var(--primary-color);
}
.leaf-icon {
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* ¡EL TRUCO! Hacemos el fondo 4 veces más grande que el icono */
    background-size: 400% 400%;
    
    /* ¡AQUÍ ESTÁ EL DEGRADADO! Repetimos los colores para un loop perfecto */
    background-image: linear-gradient(
        125deg, 
        #facc15, /* Amarillo */
        #a855f7, /* Violeta */
        #ec4899, /* Rosa */
        #a855f7, /* Violeta */
        #facc15  /* Amarillo */
    );

    /* Hacemos que el SVG de adentro ahora sea blanco para contrastar */
    color: var(--white-color);
    
    /* Aplicamos la animación */
    animation: gradient-flow 10s ease infinite;
}
.leaf-icon svg {
    stroke: var(--white-color);
}

.leaf-item .leaf-icon {
    width: 40px;
    height: 40px;
}

.leaf-modal-content .leaf-icon {
    width: 50px;
    height: 50px;
}
.leaf-item h4 {
    font-size: 1.1rem;
    color: var(--dark-color);
}

/* --- Magia de la Interacción --- */
/* Reemplaza esta regla en tu css/style.css */
/* Ahora, buscamos el padre y luego el hermano, más robusto */
/* ================================================================ */
/* === ESTILOS DEFINITIVOS PARA ANIMACIÓN DEL ÁRBOL === */
/* ================================================================ */

/* Estado normal del árbol */
/* ================================================================ */
/* === ESTILOS DEFINITIVOS PARA ÁRBOL CON DEGRADADO ANIMADO === */
/* ================================================================ */

/* Estado normal del árbol */
.tree-svg .tree-part path {
    fill: none;
    stroke: #cbd5e1; /* Gris claro por defecto */
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke 0.4s ease-in-out; /* Transición suave para el color */
}

/* Estado del árbol CUANDO esté iluminado */
.tree-visual.highlighted .tree-part path {
    /* Le decimos que el "color" del trazo sea nuestro degradado mágico */
    stroke: url(#magicGradient);
    
    /* ¡AQUÍ VIENE LA ANIMACIÓN! */
    stroke-dasharray: 500; /* Longitud del segmento visible del trazo */
    stroke-dashoffset: 500; /* Posición inicial del segmento (fuera de la vista) */
    animation: drawPath 3s ease-in-out forwards; /* La animación que lo dibuja */
}

/* Definición de la animación de "dibujado" */
@keyframes drawPath {
    to {
        /* Al final, el segmento está completamente visible */
        stroke-dashoffset: 0;
    }
}

/* Para la animación del degradado, usamos las paradas de color */
/* Esto hace que el degradado parezca moverse a lo largo del tiempo */
#magicGradient stop:nth-child(1) { animation: color1 4s infinite alternate; }
#magicGradient stop:nth-child(2) { animation: color2 4s infinite alternate; }
#magicGradient stop:nth-child(3) { animation: color3 4s infinite alternate; }

@keyframes color1 {
    0% { stop-color: #facc15; } /* Amarillo */
    50% { stop-color: #a855f7; } /* Violeta */
    100% { stop-color: #ec4899; } /* Rosa */
}
@keyframes color2 {
    0% { stop-color: #a855f7; } /* Violeta */
    50% { stop-color: #ec4899; } /* Rosa */
    100% { stop-color: #facc15; } /* Amarillo */
}
@keyframes color3 {
    0% { stop-color: #ec4899; } /* Rosa */
    50% { stop-color: #facc15; } /* Amarillo */
    100% { stop-color: #a855f7; } /* Violeta */
}

/* --- Estilos para los Modales de cada hoja --- */
/* ================================================================ */
/* === ESTILOS FINALES PARA MODALES DEL "ÁRBOL DE LA VIDA" === */
/* ================================================================ */

/* Fondo del Modal (Superposición) */
.leaf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 24, 39, 0.8); /* Azul oscuro con transparencia */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
    backdrop-filter: blur(5px);
}
.leaf-modal.active {
    display: flex; /* Se muestra con JS */
}

/* Contenido del Modal (La Tarjeta Blanca) */
.leaf-modal-content {
    background-color: var(--white-color);
    width: 100%;
    max-width: 500px;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
    animation: zoomIn 0.3s ease-out;
}
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.leaf-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5rem;
    color: var(--border-color);
    cursor: pointer;
    line-height: 1;
}
.leaf-modal-close:hover {
    color: var(--primary-color);
}

.leaf-modal-content h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 1.8rem;
    color: var(--dark-color);
    margin-bottom: 20px;
}
.leaf-modal-content .leaf-icon {
    width: 50px;
    height: 50px;
}
.leaf-modal-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
}


/* --- Responsive --- */
@media (max-width: 991px) {
    .tree-container {
        grid-template-columns: 1fr;
    }
    .tree-visual {
        display: none; /* En móvil ocultamos el árbol para simplificar */
    }
    .tree-content {
        text-align: center;
    }
}

/* ================================================================ */
/* === NUEVOS ESTILOS PARA BANNER INFORMATIVO DE PAGO === */
/* ================================================================ */

.info-banner-section {
    padding: 60px 0;
    /* Un fondo sutil para separar esta sección */
    background-color: var(--white-color); 
    border-top: 1px solid var(--border-color);
}

.info-banner-grid {
    display: grid;
    /* Crea 3 columnas en escritorio, que se adaptan en móvil */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px; /* Espacio entre los items */
}

.info-item {
    display: flex;
    align-items: center; /* Centra el icono con el texto verticalmente */
    gap: 20px;
}

.info-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--light-gray-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}
.info-icon img {
    width: 32px; /* Ajustamos el tamaño del logo de MP */
    height: auto;
}
.info-icon svg {
    stroke-width: 1.5; /* Hacemos los iconos un poco más finos */
}

.info-text h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--dark-color);
}

.info-text p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
}

/* === ESTILOS PARA EL ICONO NUMÉRICO DEL BANNER === */

.info-icon-number span {
    font-size: 2.2rem;   /* Tamaño grande y prominente */
    font-weight: 700;    /* Bien grueso */
    color: var(--primary-color);
    line-height: 1;      /* Ajuste fino para un centrado vertical perfecto */
}

     
        :root {
            --primary-color: #1e3a8a; --dark-color: #111827;
            --light-gray-color: #f3f4f6; --border-color: #e5e7eb; --white-color: #ffffff;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background-color: #f0f2f5; }
        .trigger-container { display: flex; justify-content: center; align-items: center; height: 100vh; }
        .btn { display: inline-block; padding: 15px 35px; border-radius: 8px; font-size: 1.1rem; font-weight: 600; text-align: center; border: 1px solid transparent; cursor: pointer; transition: transform 0.2s ease; }
        .btn:hover { transform: translateY(-2px); }

        .booking-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 2000; }
        .booking-modal-overlay.active { display: flex; animation: fadeIn 0.3s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        .booking-modal-content { background-color: var(--white-color); width: 95%; max-width: 800px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column; max-height: 90vh; }
        .booking-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
        .booking-header h3 { margin: 0; font-size: 1.2rem; color: var(--dark-color); }
        .modal-close-btn { background: none; border: none; font-size: 2.5rem; color: #999; cursor: pointer; line-height: 1; }
        
        .progress-bar-container { width: 100%; height: 8px; background-color: var(--light-gray-color); flex-shrink: 0; }
        .progress-bar { width: 0%; height: 100%; background-color: var(--primary-color); transition: width 0.4s ease; }

        .booking-body { padding: 30px; text-align: center; overflow-y: auto; }
        .booking-step { display: none; }
        .booking-step.active { display: block; animation: stepFadeIn 0.5s; }
        @keyframes stepFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
        
        /* Estilos del Formulario (Paso 1) */
        .booking-form { display: flex; flex-direction: column; gap: 15px; max-width: 450px; margin: 20px auto 0; text-align: left; }
        .form-group label { font-weight: 500; margin-bottom: 5px; }
        .form-group input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; }

        /* Estilos del Calendar (Paso 2) */
        .google-calendar-embed { width: 100%; height: 500px; margin: 20px 0; border-radius: 8px; overflow: hidden; }
        .google-calendar-embed iframe { width: 100%; height: 100%; border: none; }
        .calendar-hint { font-size: 0.9rem; color: #666; margin-bottom: 20px; }

        /* Estilos de Mercado Pago (Paso 3) */
        .payment-container h4 { font-size: 1.3rem; margin-bottom: 15px; }
      #wallet_container { display: flex; justify-content: center; margin-top: 20px; }
        /* === ESTILOS PARA EL NUEVO PASO 1 DEL MODAL === */
.intro-step {
    padding: 20px 0;
}
.intro-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--accent-color), #fde047);
    color: var(--primary-color);
    margin: 0 auto 20px;
    box-shadow: 0 0 0 10px var(--white-color);
}
.intro-step h2 {
    font-size: 1.8rem;
    color: var(--dark-color);
}
.intro-step p {
    font-size: 1.1rem;
    max-width: 500px;
    margin: 15px auto 30px;
}
/* ================================================================ */
/* === ESTILOS PARA PÁGINA DE CHECKOUT/RESERVA === */
/* ================================================================ */
.checkout-page-body { background-color: #f3f4f6; }
.checkout-container { max-width: 1000px; margin: 60px auto; padding: 0 20px; }
.checkout-container > h1 { font-size: 2.5rem; margin-bottom: 30px; }
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }

.checkout-main .checkout-step { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.step-number { background: var(--primary-color); color: var(--white-color); font-weight: 600; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.checkout-main h3 { font-size: 1.5rem; padding: 0; }
.checkout-text { padding: 25px 0; }

.checkout-sidebar .summary-box { background: var(--white-color); padding: 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.summary-box h4 { margin: 0 0 20px; font-size: 1.2rem; }
.summary-item, .summary-total { display: flex; justify-content: space-between; margin-bottom: 15px; }
.summary-total { font-weight: 700; border-top: 1px solid var(--border-color); padding-top: 15px; }
.taxes-included { font-size: 0.8rem; color: #9ca3af; text-align: right; }
.guarantee-box { margin-top: 30px; }
.guarantee-box h4 { margin-bottom: 15px; }
.guarantee-box ul { list-style: none; padding: 0; }
.guarantee-box li { margin-bottom: 10px; }

.acceptance-footer { text-align: center; margin-top: 40px; }
.acceptance-checkbox { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 20px; cursor: pointer; }
#open-booking-modal-btn:disabled { background-color: #9ca3af; cursor: not-allowed; }

@media (max-width: 991px) { .checkout-grid { grid-template-columns: 1fr; } }

/* --- Contenedor Principal del Buscador de Sesiones COMPARATIVA --- */
        .session-finder {
            max-width: 700px;
            margin: 60px auto;
            padding: 20px;
        }
        .finder-step {
            display: none; /* Oculto por defecto */
            text-align: center;
            animation: fadeIn 0.5s ease-in-out;
        }
        .finder-step.active {
            display: block; /* Visible */
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .finder-step h1 { font-size: 2.5rem; color: var(--dark-color); margin-bottom: 10px;}
        .finder-step h2 { font-size: 2rem; color: var(--dark-color); margin-bottom: 10px;}
        .finder-step > p { font-size: 1.1rem; color: var(--text-color); margin-bottom: 40px; }

        /* --- Tarjetas de Elección --- */
        .choices-grid {
            display: grid;
            gap: 20px;
        }
        .choice-card {
            display: flex;
            align-items: center;
            gap: 20px;
            background: var(--white-color);
            padding: 25px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            text-align: left;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .choice-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(30, 58, 138, 0.1);
            border-color: var(--primary-color);
        }
        .choice-icon {
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--light-gray-color);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
        }
        .choice-text h3 { font-size: 1.2rem; margin: 0; padding: 0; }
        .choice-text p { font-size: 0.9rem; margin: 5px 0 0; padding: 0; color: var(--text-color); }
        
        /* --- Tarjeta de Resultado --- */
        .result-card {
            background: linear-gradient(145deg, #1e3a8a, #111827);
            color: var(--white-color);
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .result-card .result-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            margin: 0 auto 20px;
            background: var(--accent-color);
            color: var(--dark-color);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .result-card h2 { color: var(--white-color); }
        .result-card .recommendation {
            font-size: 1.1rem;
            line-height: 1.7;
            margin: 20px 0 30px;
            color: #d1d5db;
        }
        .btn { display: inline-block; padding: 15px 35px; border-radius: 8px; font-weight: 700; text-align: center; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease; font-size: 1.1rem; }
        .btn-light { background-color: var(--white-color); color: var(--primary-color); }
        .btn-light:hover { background-color: #f0f2f5; }
        
        .back-btn { background: none; border: none; color: var(--text-color); margin-top: 40px; cursor: pointer; font-weight: 500; }
        
        @media (min-width: 768px) {
            .choices-grid { grid-template-columns: 1fr 1fr; }
        }

        .highlight-word{
            border-radius:10px;
            background-color: transparent; color: var(white); border: 2px solid white;
            padding: 10px;
        }

        /* ================================================================ */
/* === NUEVOS ESTILOS PARA PÁGINA DE MENÚ (MENU.HTML) === */
/* ================================================================ */

.menu-page-body {
    background-color: var(--white-color);
}
.menu-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}
.close-menu-btn {
    font-size: 3rem;
    color: var(--text-color);
    text-decoration: none;
    line-height: 1;
}

.menu-page-main {
    padding: 30px 20px;
}
.main-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.menu-section .menu-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    padding: 0;
}
.menu-section ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.menu-section ul li a {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dark-color);
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.2s, color 0.2s;
}
.menu-section ul li a:hover {
    background-color: var(--light-gray-color);
    color: var(--primary-color);
}

.bloq{
    color: white;
    font-size: 30px;
}

.bloq1{
    font-size: 50px;
    padding: 10px;
}
        
.bio-steps-container {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  font-family: inherit;
}

.bio-steps-title {
  text-align: center;
  color: #1E3A8A;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 25px;
}

.bio-step-item {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: flex-start;
}

.bio-step-number {
  background: #1E3A8A;
  color: white;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  margin-top: 2px; /* Alineación visual */
}

.bio-step-text {
  font-size: 1.05rem;
  color: #374151;
  line-height: 1.5;
}

.bio-step-note {
  background-color: #eff6ff;
  color: #1e40af;
  padding: 15px;
  border-radius: 8px;
  font-size: 0.95rem;
  text-align: center;
  border: 1px solid #dbeafe;
  margin-top: 20px;
}