/*
Theme Name: Escuela Panda
Theme URI: https://escuelapanda.com/
Author: [Tu Nombre o el de tu Estudio]
Author URI: [Tu Sitio Web Profesional]
Description: Tema a medida para la Escuela Panda, diseñado para una experiencia inmersiva y de alto rendimiento.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: escuelapanda
*/

/* ================================================================================================================================= */
/* --- 1. IDENTIDAD VISUAL Y VARIABLES --- */
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Anton&family=Caveat:wght@700&family=Montserrat:wght@300;400;700&family=Roboto+Slab:wght@300;700&family=Cabin+Sketch:wght@400;700&family=Macondo&family=Lora:ital@0;1&display=swap');

:root {
    --color-texto-principal: #333333;
    --color-texto-claro: #ffffff;
    --color-primario-accion: #00b8d4;
    --color-acento-energia: #ff4081;
    --color-fondo-oscuro: #212121;
    --color-fondo-claro: #ffffff;
    --color-fondo-gris: #f7f7f7;
    --color-negro: #000;
    --color-verde-oscuro: #3E6579;
    --color-primario-accion-translucido: rgba(0, 184, 212, 0.3);
    --color-negro-translucido: rgba(0, 0, 0, 0.5);
    --color-blanco-translucido: rgba(256, 256, 256, 0.5);
    --color-rojo-translucido: rgba(220, 53, 69, 0.1);
    --color-verde-translucido: rgba(40, 167, 69, 0.1);
    --color-rojo-borde: rgba(220, 53, 69, 0.4);
    --color-verde-borde: rgba(40, 167, 69, 0.4);
    --color-accent-bitacora: #8B4513;

    --font-titulares-accion: 'Anton', sans-serif;
    --font-subtitulos-autoridad: 'Roboto Slab', serif;
    --font-acentos-manual: 'Cabin Sketch', sans-serif;
    --font-cuerpo-principal: 'Montserrat', sans-serif;
    --font-bitacora-heading: 'Lobster Two', sans-serif;
    --font-bitacora-body: 'Lora', serif;
    
    --portal-bg: #E0E5EC;
    --portal-shadow-light: rgba(255, 255, 255, 0.9);
    --portal-shadow-dark: rgba(163, 177, 198, 0.7);
}



/* ================================================================================================================================= */
/* --- 2. ESTILOS GLOBALES Y DE BASE --- */
body {
    background-color: var(--color-fondo-claro);
    font-family: var(--font-cuerpo-principal);
    margin: 0;
    color: var(--color-texto-principal);
    line-height: 1.6;
}
body.no-scroll {
    overflow: hidden;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
/* Propiedad para activar el smooth scroll en todo el documento */
html {
    scroll-behavior: smooth;
}


/* --- PERSONALES --- */
.texto-azul {
    color: var( --color-primario-accion); 
    font-weight: 600;
}
.video_hero_div_wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}
.video_hero_full {
    width: 100%; height: 100%;
    object-fit: cover; /* Esto asegura que el video cubra todo el espacio */
}


/* ================================================================================================================================= */
/* --- 3. EL SENDERO ILUMINADO (HEADER + PORTAL V5.0) --- */
/* ================================================================================================================================= */

/* --- 3a. HEADER Y BOTÓN DE MENÚ --- */
.site-header {
    position: fixed;
    width: 100%;
    top: 0; left: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.5s ease, border-color 0.5s ease;
}
/* --- Transición del Header cuando el portal está abierto --- */
body.portal-is-open .site-header {
    background-color: rgba(10, 20, 25, 0.8);
    border-bottom-color: transparent;
}
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 10px 10px; }
.site-logo a { display: block; }
.site-logo img { height: 50px; width: auto; display: block; transition: height 0.4s ease; }
.header-right { display: flex; align-items: center; }

/* --- Nuevo Botón de Menú --- */
.boton_menu {
    font-family: var(--font-subtitulos-autoridad);
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
    background-color: var(--color-primario-accion);
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 8px 25px;
    cursor: pointer;
    transition: all 0.4s ease;
}
.boton_menu:hover {
    background-color: rgba(0,0,0,0.1);
    color: #000;
}
body.portal-is-open .boton_menu {
    color: var(--color-texto-claro);
    background-color: rgba(255,255,255,0.1);
}

/* --- 3b. PORTAL "EL SENDERO ILUMINADO" (V5.2 - LÓGICA FINAL) --- */
.portal-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(10, 20, 25, 0.98);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    z-index: 1001;
    display: flex; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
    padding: 40px 20px;
}
.portal-overlay.is-visible { opacity: 1; visibility: visible; }
.portal-overlay { background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 200px); background-repeat: no-repeat; }

/* --- Botón de Cierre 'X' --- */
.portal-overlay .modal-close-button {
    position: absolute; top: 25px; right: 5%;
    width: 45px; height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border: none; border-radius: 50%; cursor: pointer;
    font-size: 2rem; color: rgba(255,255,255,0.7);
    transition: all 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    z-index: 1002;
}
.portal-overlay .modal-close-button:hover { color: var(--color-texto-claro); background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); }

/* --- Contenido (Sin Animación Secuencial) --- */
.portal-navigation { 
    width: 100%; 
    max-width: 600px; 
    text-align: center;
    margin: auto 0;
}

/* --- Estilos Visuales (Sin cambios de lógica) --- */
.portal-header .site-logo { display: inline-block; }
.portal-header .site-logo img { max-width: 350px; height: auto; margin-bottom: 30px; }
.portal-links-container .menu { list-style: none; padding: 0; margin: 0; }
.portal-links-container .menu-item { margin-bottom: 20px; }
.portal-header .cta-principal,
.portal-links-container .menu > .menu-item > a {
    display: inline-block; padding: 12px 30px; border: 2px solid;
    border-radius: 50px; text-decoration: none;
    font-family: var(--font-subtitulos-autoridad); font-weight: 700;
    transition: all 0.2s ease;
}
.portal-links-container .menu > .menu-item > a {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
}
.portal-links-container .menu > .menu-item > a:hover { border-color: var(--color-texto-claro); color: var(--color-texto-claro); background-color: rgba(255, 255, 255, 0.1); }
/* El resto de estilos para sub-ítems, etc. permanece igual */
.portal-links-container .menu-item-has-children > a { position: relative; padding-right: 40px; }
.portal-links-container .menu-item-has-children > a::after { content: '›'; position: absolute; right: 15px; transition: transform 0.4s ease; }
.portal-links-container .menu-item-has-children.is-open > a::after { transform: rotate(90deg); }
.portal-links-container .sub-menu { list-style: none; padding: 10px 0 0 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
.portal-links-container .sub-menu .menu-item a { text-decoration: none; font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.6); padding-top: 8px; padding-bottom: 8px; transition: color 0.3s ease; }
.portal-links-container .sub-menu .menu-item a:hover { color: var(--color-texto-claro); }



/* ================================================================================================================================= */
/* --- 4 - CTA PRINCIPAL --- */
/* ================================================================================================================================= */
.cta-principal {
    display: inline-block;
    border: 2px solid;
    border-color: var(--color-texto-claro);
    background-color: #0097a7;
    color: var(--color-texto-claro);
    padding: 5px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    transition: background-color 0.3s ease;
    font-family: var(--font-subtitulos-autoridad);
    margin: 0 0 20px 0; /* Ajustamos margen inferior */
    animation: aura-pulsante 2s ease-in-out infinite;
}
.cta-principal:hover {
    color: var(--color-primario-accion);
    background-color: transparent;
}


/* ================================================================================================================================= */
/* --- 5. BLOQUES DE LA PÁGINA DE INICIO (V2.0 - MODULAR) --- */
/* ================================================================================================================================= */

/* --- Estructura y Contenedor Base --- */
.fp-block { padding: 120px 0; position: relative; overflow: hidden; z-index: 5; }
.fp-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 2; }
.bg-light { background-color: var(--color-fondo-gris); }
.bg-dark { background-color: var(--color-fondo-oscuro); }
.color-light { color: var(--color-texto-claro); }
.color-light .section-title, .color-light .section-intro { color: var(--color-texto-claro); }
.color-light .section-intro { color: #cccccc; }
.section-title { font-family: var(--font-subtitulos-autoridad); font-size: 2.8rem; text-align: center; margin: 0 0 1.5rem 0; font-weight: 700; }
.section-intro { font-family: var(--font-cuerpo-principal); font-size: 1.2rem; text-align: center; max-width: 750px; margin: 0 auto 3rem; line-height: 1.8; color: #555; font-weight: 400; }
.parallax-bg { background-size: cover; background-position: center; background-attachment: fixed; }
.fp-block-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1; }

/* --- BLOQUE 1: Hero --- */
#umbral-santuario { 
    padding: 80px 0 0 0; /* <-- MODIFICA ESTA LÍNEA */
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
    box-sizing: border-box; /* <-- AÑADE ESTA LÍNEA */
}

.hero-background-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1; /* Asegúrate de que esté detrás de todo */
    background-size: cover;
    background-position: center;
    /* La conexión con la animación */
    animation: zoomIn 20s ease-out forwards;
}

#umbral-santuario .fp-block-overlay { 
    /* La conexión con la animación */
    animation: fadeOutOverlay 3s ease-in-out forwards;
}

.hero-content-inner {
    /* La conexión con la animación */
    animation: fadeInContent 1.5s ease-out 0.5s forwards;
    opacity: 0; /* Estado inicial antes de que la animación empiece */
}


.hero-title { font-family: var(--font-titulares-accion); font-size: 4.5rem; color: #fff; line-height: 1.1; margin-bottom: 1rem; text-shadow: 0 3px 15px rgba(0,0,0,0.5);}
.hero-subtitle { font-family: var(--font-cuerpo-principal); font-size: 1.3rem; color: #eee; margin-bottom: 2.5rem; font-weight: 400; max-width: 600px; margin-left: auto; margin-right: auto;}
.price-container { margin-bottom: 1.5rem; }
.price-old { text-decoration: line-through; font-size: 1.5rem; color: rgba(255,255,255,0.6); margin-right: 15px; }
.price-new { font-size: 2.5rem; font-weight: 700; color: #fff; font-family: var(--font-subtitulos-autoridad); }
.cta-subtext { color: rgba(255,255,255,0.7); margin-top: 1rem; font-size: 0.9rem; }

/* --- BLOQUE 2: Espejo del Caos (CON ICONOS) --- */
.sintomas-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 5rem; }
.sintoma-item { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 25px 10px; border-radius: 20px; font-family: var(--font-subtitulos-autoridad); font-size: 1.1rem; width: 200px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sintoma-item::before { content: ''; display: block; width: 60px; height: 60px; background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 15px; }
.sintoma-tension::before { background-image: url('images/front-page-icon-tension.webp'); }
.sintoma-fatiga::before { background-image: url('images/front-page-icon-fatiga.webp'); }
.sintoma-niebla::before { background-image: url('images/front-page-icon-niebla.webp'); }
.sintoma-irritabilidad::before { background-image: url('images/front-page-icon-irritabilidad.webp'); }

/* --- BLOQUE 3 - AJUSTE DE PULIDO VISUAL: BALANCE EN BLOQUE MISIÓN --- */
/* Objetivo: Corregir el espaciado vertical en el bloque #mision-escuela. */
#mision-escuela .section-intro {
    margin-bottom: 0;
}

/* --- BLOQUE 3.5: EL SENDERO REVELADO (EL PUENTE) --- */
#sendero-revelado .fp-container {
    max-width: 800px; /* Mantenemos el contenedor enfocado */
    text-align: center;
}
.panding-logo-container {
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
}
.panding-logo-container img {
    width: 100%;
    height: auto;
    /* Reutilizamos la animación del aura original que funciona con imágenes */
    animation: aura-pulsante 3s ease-in-out infinite;
}
.panding-definicion {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1rem 1.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    display: inline-block;
    margin: 1.5rem 0;
    background-color: rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .panding-definicion {
        font-size: 1.2rem;
    }
}
/* --- CORRECCIONES DE LEGIBILIDAD PARA BLOQUE 3.5 --- */

/* 1. Degradado para oscurecer más la parte inferior */
#sendero-revelado .fp-block-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.95) 100%);
}

/* 2. Sombra fuerte al texto para separarlo del fondo */
#sendero-revelado .section-title,
#sendero-revelado .section-intro {
    color: #ffffff; /* Aseguramos blanco puro */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 1); /* Sombra negra sólida */
}

/* 3. Aumentar un poco el grosor del texto del párrafo final */
#sendero-revelado .section-intro {
    font-weight: 500; /* Un poco más gordita la letra ayuda a leer */
}

/* 4. Caja de definición con alto contraste */
#sendero-revelado .panding-definicion {
    background-color: rgba(10, 20, 25, 0.7); /* Fondo oscuro semitransparente */
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}


/* --- BLOQUE 4: Revelación (Neumorphism) --- */
.neumorphic-carousel { display: flex; justify-content: center; gap: 40px; margin-top: 4rem; flex-wrap: wrap; }
.neumorphic-frame {
    background: #E0E5EC; /* Color base del neumorfismo */
    border-radius: 20px;
    padding: 30px;
    width: 280px;
    text-align: center;
    box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}
.neumorphic-frame:hover { transform: translateY(-10px); }
.neumorphic-number { display: inline-flex; align-items: center; justify-content: center; width: 65px; height: 65px; margin: 0 auto 1.5rem; border-radius: 50%; border: 3px solid var(--color-primario-accion); font-size: 2rem; font-weight: 700; color: var(--color-primario-accion); font-family: var(--font-titulares-accion); }
.neumorphic-frame h3 { font-family: var(--font-subtitulos-autoridad); margin-top: 0; }
.neumorphic-frame p { font-size: 0.95rem; color: #555; }

/* --- BLOQUE 5: Pilar Olvidado (V2.1 - Balance Visual Corregido) - Single Line --- */
.pilar-contenido { display: flex; align-items: center; gap: 5rem; /* Aumentamos un poco el gap para que respire */ }
.pilar-imagen { flex: 0 1 40%; /* No crece, puede encogerse, base del 40% */ max-width: 420px; /* Un límite máximo fijo para la imagen */ }
.pilar-texto { flex: 1; /* Ocupa todo el espacio restante */ }
.pilar-imagen .longevity-asset { display: block; width: 100%; height: auto; } /* La imagen ocupa el 100% de su NUEVO contenedor más pequeño */
.pilar-texto .section-title, .pilar-texto .section-intro { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
.pilar-contenido .fade-in-element:nth-child(2) { transition-delay: 0.3s; }
@media (max-width: 991px) {
    .pilar-contenido { flex-direction: column; gap: 2rem; }
    .pilar-imagen { max-width: 350px; /* Un tamaño máximo también en móvil */ }
    .pilar-texto .section-title, .pilar-texto .section-intro { text-align: center; }
}

/* ======================================================================== */
/* --- BLOQUE 6: CAMPO DE ENTRENAMIENTO (LAYOUT CINE) --- */
/* ======================================================================== */

#campo-entrenamiento {
    position: relative;
    z-index: 1; 
    background-color: var(--color-fondo-oscuro); 
    
    /* ANTES: padding: 6rem 0; */
    /* AHORA: Asimétrico para corregir el balance óptico */
    padding-top: 7rem;    /* Más aire arriba */
    padding-bottom: 3rem; /* Menos aire abajo (corte de piso) */
    
    /* Mantenemos el resto igual */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- GRID SYSTEM (La Magia de las Columnas) --- */
.entrenamiento-grid {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: 1 columna */
    gap: 3rem;
    align-items: center; /* Centrado verticalmente */
}

/* --- COLUMNA IZQUIERDA (VISUAL) --- */
.col-visual {
    text-align: center;
}

.section-label {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.titulo-animado-contenedor { 
    max-width: 500px; /* Un poco más contenido para que no compita con el video */
    margin: 0 auto 2rem auto;
}

.video-presentation-wrapper {
    width: 100%;
    /* Quitamos el max-width fijo aquí para que llene su columna en el grid */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); /* Sombra más dramática */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #000;
}

.catchphrase { 
    font-family: var(--font-bitacora-heading); 
    font-size: 1.8rem; 
    margin-top: 2rem;
    line-height: 1.3;
}

/* --- COLUMNA DERECHA (TEXTO) --- */
.col-texto {
    padding: 0 1rem;
}

.texto-wrapper {
    border-left: 1px solid rgba(255, 255, 255, 0.1); /* Línea sutil elegante */
    padding-left: 2rem;
}

.synopsis-title {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.5rem;
    color: var(--color-primario-accion);
    margin-top: 0;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

#campo-entrenamiento .section-intro { 
    font-size: 1.15rem; 
    line-height: 1.8;
    color: #ccc;
    text-align: left; /* Alineación a la izquierda para lectura editorial */
    max-width: none; /* Quitamos límites anteriores */
}

.highlight-text {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

/* --- MEDIA QUERY PARA ESCRITORIO (Aquí ocurre la separación) --- */
@media (min-width: 992px) {
    .entrenamiento-grid {
        grid-template-columns: 1.2fr 0.8fr; /* 60% Visual - 40% Texto */
        gap: 5rem; /* Separación generosa */
    }
    
    .col-visual {
        text-align: center; /* Mantenemos centrado el contenido visual */
    }
    
    .col-texto {
        text-align: left;
    }
}
/* --- 6a. EFECTOS DE TEXTO ESPECIALES (Single-Line) --- */
.titulo-animado-contenedor { max-width: 700px; margin: 0 auto;}
.titulo-animado-contenedor img { display: block; width: 50%; height: auto; margin: 0 auto; animation: aura-pulsante 2s ease-in-out infinite;}
@keyframes aura-pulsante { 0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(224, 251, 255, 0)); } 50% { transform: scale(1.03); filter: drop-shadow(0 0 20px rgba(224, 251, 255, 0.7)); } 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(224, 251, 255, 0)); } }



/* --- BLOQUE 6.5: Habilidades Forjadas --- */
#habilidades-forjadas {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.habilidades-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto (mobile-first) */
    gap: 2.5rem;
    max-width: 900px;
    margin: 4rem auto 0;
}
.habilidad-item {
    display: flex;
    align-items: flex-start; /* Alinea el icono con la parte superior del texto */
    gap: 1.5rem;
}
.habilidad-icono {
    flex-shrink: 0; /* Evita que el contenedor del icono se encoja */
    width: 70px; /* Tamaño fijo para el icono */
    height: 70px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.habilidad-icono img {
    width: 60px; /* Tamaño del SVG dentro del círculo */
    height: 60px;
}
.habilidad-texto h3 {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.3rem;
    margin: 0 0 0.5rem 0;
}
.habilidad-texto p {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
}

/* --- Animaciones Secuenciales para los ítems --- */
.habilidad-item.fade-in-element:nth-child(2) { transition-delay: 0.1s; }
.habilidad-item.fade-in-element:nth-child(3) { transition-delay: 0.2s; }
.habilidad-item.fade-in-element:nth-child(4) { transition-delay: 0.3s; }
.habilidad-item.fade-in-element:nth-child(5) { transition-delay: 0.4s; }
.habilidad-item.fade-in-element:nth-child(6) { transition-delay: 0.5s; }


/* --- Media Query para Escritorio (a partir de 768px) --- */
@media (min-width: 768px) {
    .habilidades-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en escritorio */
        gap: 3rem 2.5rem; /* Espacio vertical y horizontal */
    }
}


/* --- BL7 - COMPONENTE GLOBAL: ARSENAL DEL FUNDADOR (V. REFACTORIZADA) --- */

/* --- BL7-1. Contenedor Principal de la Rejilla --- */
.arsenal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 4rem;
}


/* --- BL7-2. Tarjeta Individual del Arsenal (¡AHORA REFACTORIZADA!) --- */
.arsenal-item {
    display: block;
    text-decoration: none;
    position: relative;
    background: #f8f9fa;
    color: #8a8a8a;
    border-radius: 16px;
    padding: 30px 25px 25px 25px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: visible;
    border: 2px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* El "pin" de color superior ahora usa la variable */
.arsenal-item::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 18px;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    background: var(--arsenal-pin-gradient); /* <-- USA LA VARIABLE */
}

/* --- BL7-3. Contenido Interno de la Tarjeta --- */
.arsenal-item h3 {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.2rem;
    font-weight: 700;
    padding-top: 20px;
    margin: 0 0 0.8rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    color: var(--arsenal-color); /* <-- USA LA VARIABLE */
}
.arsenal-item p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* --- BL7-4. Efecto Hover Global (ahora usa la variable) --- */
.arsenal-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    border-color: var(--arsenal-color); /* <-- USA LA VARIABLE */
}


/* --- BL7-6. Estilos para Contextos Específicos (Como en la front-page) --- */
.bg-dark .arsenal-item,
#arsenal-fundador .arsenal-item {
    background: #f8f9fa; /* Mantenemos el fondo claro para contraste */
}

/* --- [MANTENIDO] Componente de Guía en Bitácora --- */
.arsenal-guia {
    border: 2px dashed rgba(0,0,0,0.4);
    padding: 1.5rem;
    margin: 2.5rem 0;
    border-radius: 4px;
}
.arsenal-guia h4 { text-align: center; margin-top: 0; }
.arsenal-guia p { font-size: 1rem; line-height: 1.6; }



/* --- BLOQUE 7b: Arsenal Roadmap --- */
.arsenal-roadmap {
    text-align: center;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.roadmap-title {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.5rem;
    color: var(--color-texto-claro);
    margin-bottom: 1rem;
}
.roadmap-text {
    color: #ccc;
    font-size: 1.1rem !important; /* Forzamos el tamaño para que sea legible */
}


/* --- 7c MODAL PREVIEW ARSENAL --- */
.arsenal-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 20, 25, 0.95); z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.arsenal-modal-overlay.is-visible { opacity: 1; visibility: visible; }

.arsenal-modal-container {
    position: relative; width: 90%; max-width: 900px;
    background: transparent; text-align: center;
}

.arsenal-modal-body {
    position: relative; display: flex; align-items: center; justify-content: center;
}

#arsenal-preview-image {
    max-width: 100%; max-height: 70vh;
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Botones de Navegación */
.arsenal-nav {
    background: none; border: none; color: white; font-size: 3rem;
    cursor: pointer; padding: 0 20px; transition: color 0.3s;
    user-select: none;
}
.arsenal-nav:hover { color: var(--color-primario-accion); }

/* Botón Cerrar */
.arsenal-modal-close {
    position: absolute; top: -40px; right: 0;
    background: none; border: none; color: white; font-size: 2.5rem;
    cursor: pointer; line-height: 1;
}

/* Footer del Modal */
.arsenal-modal-footer { margin-top: 1.5rem; }
.arsenal-modal-footer p { color: #ccc; margin-bottom: 0.5rem; font-size: 0.9rem; }
.cta-mini {
    display: inline-block; background: var(--color-primario-accion); color: white;
    padding: 8px 20px; border-radius: 50px; text-decoration: none; font-weight: bold;
    font-size: 0.9rem; transition: background 0.3s;
}
.cta-mini:hover { background: #00838f; color: white; }

/* Ajuste móvil */
@media (max-width: 768px) {
    .arsenal-nav { position: absolute; bottom: -60px; font-size: 2.5rem; }
    .arsenal-nav.prev { left: 20%; }
    .arsenal-nav.next { right: 20%; }
}



/* --- BLOQUE 8: Testimonios (V2.0 con Animación) - Single Line --- */
.neumorphic-frame.testimonial { background: rgba(240, 245, 252, 0.9); color: #333; }
.testimonial p { font-size: 1.1rem; font-style: italic; margin-bottom: 1.5rem; }
.testimonial cite { font-style: normal; font-weight: 700; color: var(--color-primario-accion); }
.fade-in-element { opacity: 0; transform: translateY(30px); transition: opacity 1.5s ease-out, transform 1.5s ease-out; }
.fade-in-element.is-visible { opacity: 1; transform: translateY(0); }
.fade-in-element:nth-child(2) { transition-delay: 0.2s; }
.fade-in-element:nth-child(3) { transition-delay: 0.4s; }

/* --- BLOQUE 9: Contribución --- */
.price-container-final { text-align: center; margin-top: 3rem; }
.price-label { display: block; font-size: 1.2rem; margin-bottom: 0.5rem; }
.price-old-final { text-decoration: line-through; font-size: 2rem; color: rgba(255,255,255,0.5); margin-right: 20px; }
.price-new-final { font-size: 3.5rem; font-weight: 700; font-family: var(--font-titulares-accion); }

/* --- BLOQUE 10: Blog --- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 4rem; }
.blog-post-card { display: block; text-decoration: none; color: var(--color-texto-principal); background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-post-card:hover { transform: translateY(-8px); box-shadow: 0 12px 25px rgba(0,0,0,0.1); }
.blog-post-content { padding: 25px; }
.blog-post-content h3 { margin: 0 0 0.5rem 0; font-size: 1.2rem; }
.blog-post-content p { margin: 0 0 1rem 0; font-size: 0.9rem; color: #666; }
.blog-post-content span { font-weight: 700; color: var(--color-primario-accion); }

@media (max-width: 768px) {
    /* ... (aquí están tus reglas existentes) ... */
    .section-title { font-size: 2.2rem; }
    .hero-title { font-size: 2.8rem; } /* <-- MODIFICA ESTA LÍNEA (o añádela si no existe) */
    .neumorphic-carousel { flex-direction: column; align-items: center; }
    .blog-grid { grid-template-columns: 1fr; }
}

/* ================================================================================================================================= */
/* --- 11b. BLOQUE 10: PREGUNTAS FRECUENTES (FAQ) --- */
.faq-accordion { max-width: 800px; margin: 4rem auto 0; border-top: 1px solid #e0e0e0; }
.faq-item { border-bottom: 1px solid #e0e0e0; }
.faq-question { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; background: none; border: none; padding: 20px 10px; cursor: pointer; font-family: var(--font-subtitulos-autoridad); font-size: 1.2rem; font-weight: 700; color: var(--color-texto-principal); }
.faq-question span { flex: 1; padding-right: 15px; }
.faq-question::after { content: '+'; font-size: 2rem; color: var(--color-primario-accion); transition: transform 0.3s ease; }
.faq-item.is-open .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; }
.faq-answer p { padding: 0 10px 20px 10px; margin: 0; font-size: 1rem; color: #555; }
/* --- pausa y panding --- */
.faq-cierre {
    text-align: center;
    margin-top: 3rem;
    font-family: var(--font-bitacora-body);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--color-primario-accion);
    font-weight: 600;
}

/* --- 11c. BLOQUE 11: BLOG (VERSIÓN PARALLAX) --- */
#desde-santuario-v2 .section-title { text-shadow: 0 1px 5px rgba(0,0,0,0.6); }
.blog-grid--light-text .blog-post-card { background: rgba(255,255,255,0.9); backdrop-filter: blur(5px); }
.blog-grid--light-text .blog-post-card:hover { box-shadow: 0 12px 25px rgba(0,0,0,0.2); }


/* ================================================================================================================================= */
/* --- 6. WOOCOMMERCE - PÁGINA DE CHECKOUT PERSONALIZADA --- */
/* ================================================================================================================================= */

/* --- Ocultar elementos por defecto de WooCommerce --- */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    display: none !important;
}

/* --- Estilo del Hero con Video --- */
.checkout-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-texto-claro);
    overflow: hidden;
}
.checkout-hero-video-wrapper {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

#checkout-bg-video {
    width: 100%; height: 100%;
    object-fit: cover; /* Esto asegura que el video cubra todo el espacio */
}

.checkout-hero .fp-container { z-index: 3; }
.checkout-hero-title { font-family: var(--font-titulares-accion); font-size: 3rem; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.checkout-hero-subtitle { font-size: 1.2rem; }

/* --- Estructura Principal y Columnas (Mobile-First) --- */
.checkout-main-content {
    padding: 3rem 0;
    background-color: var(--color-fondo-gris);
}
.checkout-layout {
    display: flex;
    flex-direction: column; /* Apilado vertical por defecto */
}
.checkout-persuasion-column {
    order: 1; /* Aparece primero en móvil */
    margin-bottom: 2.5rem;
}
.checkout-form-column {
    order: 2; /* Aparece segundo en móvil */
}

/* --- Caja de Persuasión --- */
.persuasion-box {
    background: var(--color-fondo-claro);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.persuasion-box h3 { font-family: var(--font-subtitulos-autoridad); font-size: 1.2rem;}
.order-summary { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; border-bottom: 1px solid #eee;   margin-bottom: 0.5rem; }
.order-summary strong { font-size: 1.2rem; font-weight: 700; color: var(--color-primario-accion); }

.summary-meta { font-size: 0.9rem; color: #888; margin-top: -0.2rem; margin-bottom: 1.5rem; }
.benefits-checklist { list-style: none; padding-left: 0; margin: 0 0 1.5rem 0; }
.benefits-checklist li { padding-left: 1.8em; text-indent: -1.8em; margin-bottom: 0.5rem; }
.testimonial-snippet { border-left: 3px solid var(--color-primario-accion); padding-left: 1rem; margin-bottom: 1.5rem; }
.testimonial-snippet p { margin: 0; font-style: italic; color: #555; }
.trust-guarantee { text-align: center; background: #f7fafc; padding: 0.8rem; border-radius: 8px; font-size: 0.9rem; }
.trust-guarantee p { margin: 0; }

/* --- metodos de pago - CINTURÓN DE CONFIANZA --- */
.payment-methods-accepted {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid #eee;
    display: flex;
    flex-direction: column; /* Apilado en móvil por defecto */
    gap: 1.5rem;
    text-align: center;
}

.payment-methods-accepted h4 {
    margin: 0 0 0.8rem 0;
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
}

.payment-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.payment-logos img {
    height: 35px;
    width: auto;
    /* filter: grayscale(1); 
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease; */
}

.payment-logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

/* Media query para escritorio */
@media (min-width: 500px) {
    .payment-methods-accepted {
        flex-direction: row; /* Lado a lado en pantallas más grandes */
        justify-content: space-around;
    }
    .card-payments, .express-payments {
        flex: 1;
    }
}

/* --- Estilos para el Botón de Pago (Botón Fijo en Móvil - V2 Corregido) --- */
.woocommerce-checkout #payment {
    background: transparent;
    border-radius: 0;
}
body.woocommerce-checkout {
    padding-bottom: 80px; /* Espacio para el botón fijo */
}
.woocommerce-checkout #payment .place-order {
    position: relative;
    width: auto; /* <-- CLAVE 3: Deja que el navegador calcule el ancho */
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #DBD7E1;
    color: #000;
    border-top: 1px solid #444;
    z-index: 999;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
}
.woocommerce-checkout #payment #place_order {
    width: 95%;
    margin: 0 auto;
    font-size: 1.5rem !important;
    
    border-color: var(--color-primario-accion);
    background-color: var(--color-primario-accion);
    padding: 15px 15px;
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-subtitulos-autoridad);    
}

/* --- Media Query para Escritorio (a partir de 992px) --- */
@media (min-width: 992px) {
    .checkout-hero { height: 50vh; }
    .checkout-hero-title { font-size: 4rem; }
    
    .checkout-layout {
        flex-direction: row-reverse; /* Invierte el orden visual */
        gap: 4rem;
    }
    .checkout-form-column {
        flex: 1.2; /* La columna del form es un poco más ancha */
        order: 1; /* Vuelve a su orden natural */
    }
    .checkout-persuasion-column {
        flex: 1;
        order: 2; /* Vuelve a su orden natural */
        margin-bottom: 0;
    }

    /* Reset del botón de pago pegajoso en escritorio */
    body.woocommerce-checkout {
        padding-bottom: 0;
    }
    .woocommerce-checkout #payment .place-order {
        position: relative;
        width: 100%;
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 0;
        background: transparent;
        border-top: none;
        box-shadow: none;
    }
    .woocommerce-checkout #payment #place_order {
        width: 100%;
    }
}

/* --- Pausa y panding --- */

.mantra-snippet {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: #f0f8ff; /* Un azul muy claro, casi etéreo */
    border-left: 4px solid var(--color-primario-accion);
    border-radius: 4px;
    text-align: center;
}
.mantra-snippet p {
    font-family: var(--font-bitacora-body);
    font-style: italic;
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: #333;
}
.mantra-snippet cite {
    font-style: normal;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-primario-accion);
}

/* ======================================================================== */
/* --- 6b. WOOCOMMERCE - ESCUDO DE CONFIANZA STRIPE --- */
/* ======================================================================== */
.stripe-trust-shield {
    background-color: #f6f9fc;
    border: 1px solid #e6ebf1;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.shield-header {
    display: flex;
    align-items: center;
    justify-content: center; /* <-- ESTA ES LA PROPIEDAD CLAVE QUE FALTABA */
    gap: 1rem;
    border-bottom: 1px solid #e6ebf1;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
}

.shield-header img {
    height: 40px; /* <-- AJUSTADO PARA MEJOR BALANCE VISUAL */
    width: auto;
    object-fit: contain; /* Asegura que el logo no se deforme */
}

/* Y no olvides el texto que acompaña al logo */
.shield-header h4 {
    margin: 0;
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.1rem;
    color: #32325d;
}

.shield-body p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #525f7f; /* Color de texto secundario de Stripe */
}

/* ======================================================================== */
/* --- 6c. WOOCOMMERCE - OCULTAR BOTÓN "SEGUIR COMPRANDO" --- */
/* ======================================================================== */
/*
Propósito: Eliminar el botón "Seguir comprando" del aviso de producto añadido.
Razón: En una tienda de un solo producto, este botón es redundante y rompe el "sistema de venta sin frenos", invitando al usuario a salir del checkout.
*/
.woocommerce-message .button.wc-forward {
    display: none !important;
}

/* ======================================================================== */
/* --- 7. TUTOR LMS - PÁGINA DE CURSO PERSONALIZADA (single-course.php) --- */
/* ======================================================================== */

/* --- Ocultamos elementos por defecto que no queremos --- */
.ep-single-course-page .tutor-course-details-tab,
.ep-single-course-page .tutor-course-details-page > .tutor-container > .tutor-row > main > .tutor-mb-32,
.ep-single-course-page .tutor-course-details-page h1.tutor-fs-4 {
    display: none !important;
}



/* ======================================================================== */
/* --- 7b. TUTOR LMS - PÁGINA DE CURSO (V4 - HÍBRIDO FIJO/RELATIVO) --- */
/* ======================================================================== */


/* --- Contenedor Principal del Hero --- */
.entrenamiento-hero-container {
    position: relative;
    /* En escritorio, crea el espacio para que el fondo fijo se vea */
    min-height: 90vh; 
}

/* --- ESTILOS POR DEFECTO (ESCRITORIO) --- */

/* El contenedor del fondo es FIJO */
.entrenamiento-bg {
    position: fixed;
     left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
}
.hero-bg-image {
    width: 100%; height: 100%;
    /* Así se comporta como un background-size: cover */
    object-fit: cover; 
}
.entrenamiento-bg-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(10, 20, 25, 0.1);
}

/* El contenedor del botón se posiciona dentro del espacio creado */
.entrenamiento-welcome-block {
    position: relative;
    z-index: 2;
    height: 90vh; /* Coincide con el min-height del wrapper */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10vh;
}

/* --- El contenido principal empieza con fondo sólido --- */
.entrenamiento-main-content {
    position: relative;
    z-index: 2;
    padding: 4rem 0;
    background-color: var(--color-fondo-gris);
}

/* --- TRANSFORMACIÓN PARA MÓVIL (hasta 768px) --- */
@media (max-width: 768px) {
    /* El contenedor del hero ya no necesita una altura mínima, se adaptará a la imagen */
    .entrenamiento-hero-container {
        min-height: auto;
    }

    /* El contenedor del fondo deja de ser FIJO y se convierte en un bloque normal */
    .entrenamiento-bg {
        position: relative; /* Cambia de fixed a relative */
        height: auto;
    }
    .hero-bg-image {
        /* La imagen simplemente ocupa el 100% del ancho, su altura es automática */
        width: 100%;
        height: auto;
        display: block;
    }
    .entrenamiento-bg-overlay {
        background-color: rgba(10, 20, 25, 0.1);
    }

    /* El contenedor del botón ahora se superpone absolutamente sobre la imagen */
    .entrenamiento-welcome-block {
        position: absolute; /* Se superpone a su padre .entrenamiento-hero-container */
        top: 0; left: 0;
        width: 100%; height: 100%;
        height: auto; /* Reseteamos la altura fija */
        /* Las propiedades flex lo centrarán dentro del espacio de la imagen */
    }

    /* El contenido principal ya no necesita z-index, sigue el flujo normal */
    .entrenamiento-main-content {
        z-index: auto;
    }
    /* --- NUEVA REGLA PARA OCULTAR EL BOTÓN --- */
    .entrenamiento-welcome-block .cta-principal {
        display: none;
    }

}

/* --- Estructura Principal del Contenido --- */
.entrenamiento-main-content {
    padding: 4rem 0;
    background-color: var(--color-fondo-gris);
}
.entrenamiento-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}
@media (min-width: 992px) {
    .entrenamiento-layout {
        grid-template-columns: 2fr 1fr; /* Columna principal más ancha */
    }
}

/* --- Columna Principal (El Sendero) --- */
.entrenamiento-section-title {
    font-family: var(--font-cuerpo-principal);
    font-size: 2rem;
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}


/* --- Barra derecha Lateral (Tu Guía) y sus Tarjetas --- */
.entrenamiento-sidebar-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    margin-bottom: 2rem;
}
.entrenamiento-sidebar-card .card-title {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
}
.entrenamiento-sidebar-card .mantra-snippet {
    margin: 0;
}

/* --- Estilos para los botones de la barra derecha lateral --- */
.entrenamiento-sidebar-card .tutor-btn {
    width: 100%;
    text-align: center;
    font-size: 1rem !important;
    padding: 12px !important;
    background-color: var(--color-primario-accion) !important;
    border-color: var(--color-primario-accion) !important;
}
.entrenamiento-sidebar-card .tutor-btn:hover {
    background-color: #00838f !important;
}
.entrenamiento-sidebar-card .sidebar-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    background-color: var(--color-fondo-oscuro);
    color: var(--color-texto-claro);
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}
.entrenamiento-sidebar-card .sidebar-cta:hover {
    background-color: #000;
}
/* --- 7c. TUTOR LMS - CORRECCIÓN DE SOLAPAMIENTO DEL HEADER --- */
body.single-courses .site-content {
    padding-top: 1px; /* Ajusta este valor si la altura de tu header cambia */
}

/* --- 7d. TUTOR LMS - ESTILOS PARA LA TARJETA DE PROGRESO SOBRESCRITA --- */

/* Reseteamos la tarjeta por defecto de Tutor para que se adapte a la nuestra */
.entrenamiento-sidebar-card .tutor-widget-course-progress {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Ocultamos el título por defecto, ya que tenemos el nuestro ("Progreso del Viaje") */
.entrenamiento-sidebar-card .tutor-widget-course-progress .tutor-card-header {
    display: none;
}

/* Ajustamos el espaciado de la barra de progreso */
.entrenamiento-sidebar-card .tutor-course-progress-wrapper {
    margin-bottom: 1.5rem; /* Espacio entre la barra y los botones */
}

/* Estilizamos los botones para que ocupen todo el ancho y coincidan con nuestra marca */
.entrenamiento-sidebar-card .tutor-card-body .tutor-btn {
    width: 100%;
    margin-bottom: 0.8rem;
    font-size: 1rem !important;
    padding: 12px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-align: center;
}

/* Botón principal (Completar Curso) */
.entrenamiento-sidebar-card .tutor-card-body .tutor-btn-primary {
    background-color: var(--color-primario-accion) !important;
    border-color: var(--color-primario-accion) !important;
}
.entrenamiento-sidebar-card .tutor-card-body .tutor-btn-primary:hover {
    background-color: #00838f !important;
}

/* Botón secundario (Volver a hacer) */
.entrenamiento-sidebar-card .tutor-card-body .tutor-btn-outline-primary {
    background-color: #f0f0f0 !important;
    border-color: #e0e0e0 !important;
    color: #555 !important;
}
.entrenamiento-sidebar-card .tutor-card-body .tutor-btn-outline-primary:hover {
    background-color: #e0e0e0 !important;
}

/* Estilizamos el texto de inscripción */
.entrenamiento-sidebar-card .tutor-fs-7 {
    font-size: 0.9rem;
    text-align: center;
    color: #888;
    margin-top: 1rem;
}


/* ======================================================================== */
/* --- 7G TUTOR LMS - PÁGINA DE LECCIÓN INDIVIDUAL --- */
/* ======================================================================== */

/* --- 7G-1. ESTRUCTURA GENERAL DE LA PÁGINA --- */
.ep-single-lesson-page .lesson-hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f0f4f8; /* Fallback por si el video no carga */
}

.ep-single-lesson-page #tutor-single-entry-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ep-single-lesson-page .lesson-main-content {
    padding: 4rem 0;
    background-color: var(--color-fondo-gris);
}

/* --- 7G-2. BARRA SUPERIOR (TOP BAR) --- */
.ep-single-lesson-page .tutor-single-page-top-bar {
    background-color: var(--color-fondo-oscuro);
    border-bottom: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
}

/* Oculta el botón de la flecha 'atrás' que no usamos */
.ep-single-lesson-page .tutor-course-topics-sidebar-toggler {
    display: none !important;
}

/* Contenido de la barra superior (título, progreso, botones) */
.ep-single-lesson-page .tutor-single-page-top-bar .tutor-course-topic-single-header-title,
.ep-single-lesson-page .tutor-single-page-top-bar .tutor-course-topic-single-header-title a {
    color: var(--color-texto-claro) !important;
    text-decoration: none;
    font-weight: 700;
}

.ep-single-lesson-page .tutor-single-page-top-bar .tutor-fs-7 {
    color: #ccc !important;
    white-space: nowrap;
}

.ep-single-lesson-page .tutor-single-page-top-bar .tutor-d-flex {
    gap: 1.5rem;
}

.ep-single-lesson-page .tutor-single-page-top-bar .tutor-btn-primary {
    background-color: var(--color-primario-accion) !important;
    border-color: var(--color-primario-accion) !important;
    font-weight: 700 !important;
}

.ep-single-lesson-page .tutor-single-page-top-bar .tutor-btn-primary:hover {
    background-color: #00838f !important;
}

/* eliminar boton menu mobil */
.ep-single-lesson-page .tutor-single-page-top-bar .tutor-iconic-btn {
    display: none !important;
}

/* --- 7G-3. BARRA INFERIOR DE NAVEGACIÓN (ANTERIOR/SIGUIENTE) --- */
.ep-single-lesson-page .tutor-course-topic-single-footer {
    background-color: var(--color-fondo-oscuro);
    border-top: 1px solid #444;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.ep-single-lesson-page .tutor-course-topic-single-footer .tutor-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--color-texto-claro) !important;
    font-weight: 700 !important;
    padding: 10px 25px !important;
    flex-grow: 0;
    flex-shrink: 0;
}

.ep-single-lesson-page .tutor-course-topic-single-footer .tutor-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--color-texto-claro) !important;
}

/* --- 7G-4. BARRA DE PROGRESO (MÓVIL) --- */
.tutor-spotlight-mobile-progress-complete {
    background-color: var(--color-fondo-oscuro);
    border-top: 1px solid #444;
}

.tutor-spotlight-mobile-progress-complete .tutor-fs-7 {
    color: #ccc !important;
}

.ep-single-lesson-page .tutor-progress-bar {
    background-color: #e0e5ec !important;
}

.ep-single-lesson-page .tutor-progress-bar .tutor-progress-value {
    background: var(--color-primario-accion) !important;
}

/* ======================================================================== */
/* --- 7G-1. TUTOR LMS - ESTILOS UNIFICADOS PARA EL TEMARIO DEL CURSO --- */
/* Objetivo: Asegurar que el acordeón de lecciones sea idéntico en la     */
/*           página del curso y en la vista de lección individual.        */
/* ======================================================================== */

/* --- Contenedor principal de cada "Día" (tópico) --- */
.ep-course-topics-wrapper .tutor-course-topic {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
    overflow: hidden; /* Asegura que los bordes redondeados se respeten */
}

/* --- Título del "Día" (ej: "Día 1: La Llegada al Santuario") --- */
.ep-course-topics-wrapper .tutor-course-title h4 {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.2rem;
}

/* --- Fila de cada Lección individual (usamos selectores agrupados para cubrir ambas vistas) --- */
.ep-course-topics-wrapper .tutor-course-lesson,
.ep-course-topics-wrapper .tutor-course-topic-item,
.tutor-accordion-item-body .tutor-course-content-list-item-title {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f0f0f0;
    transition: background-color 0.3s ease;
}

/* --- Efecto Hover para la Fila de la Lección --- */
.ep-course-topics-wrapper .tutor-course-lesson:hover,
.ep-course-topics-wrapper .tutor-course-topic-item:hover,
.tutor-accordion-item-body .tutor-course-content-list-item:hover {
    background-color: #f9f9f9;
}

/* --- Título de la Lección (el texto principal en cada fila) --- */
.ep-course-topics-wrapper .tutor-course-lesson a,
.ep-course-topics-wrapper .tutor-course-topic-item-title,
.tutor-accordion-item-body .tutor-course-content-list-item-title {
    text-decoration: none !important;
    font-family: var(--font-cuerpo-principal);
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #444 !important;
    transition: color 0.3s ease;
}

/* --- Efecto Hover para el Título de la Lección --- */
.ep-course-topics-wrapper .tutor-course-lesson:hover a,
.ep-course-topics-wrapper .tutor-course-topic-item:hover .tutor-course-topic-item-title,
.tutor-accordion-item-body .tutor-course-content-list-item-title:hover {
    color: var(--color-primario-accion) !important;
}

/* --- Icono de la Lección (el check o el candado) --- */
.ep-course-topics-wrapper .tutor-lesson-right i,
.ep-course-topics-wrapper .tutor-course-topic-item-icon,
.tutor-accordion-item-body .tutor-course-content-list-item-icon {
    color: var(--color-primario-accion) !important;
}




/* --- 7G-2. TUTOR LMS - ALINEACIÓN DE CHECKBOX EN LISTA DE LECCIONES --- */

/* --- Hacemos que el contenedor del enlace de la lección sea un flexbox --- */
.ep-course-topics-wrapper .tutor-course-topic-item a {
    display: flex; /* ¡La clave principal! Pone los elementos en línea. */
    align-items: center; /* Centra verticalmente el título y el checkbox. */
    justify-content: space-between; /* Empuja el título a la izquierda y el checkbox a la derecha. */
    width: 100%; /* Asegura que ocupe todo el espacio para que space-between funcione. */
}

/* --- Aseguramos que el checkbox no se encoja y tenga un margen --- */
.ep-course-topics-wrapper .tutor-course-topic-item .tutor-form-check {
    flex-shrink: 0; /* Evita que el checkbox se deforme si el título es muy largo. */
    margin-left: 16px; /* Añade un poco de espacio a su izquierda. */
}


/* --- 7G-6 REDUCCIÓN DE ESPACIO BAJO EL VIDEO DE LECCIÓN --- */

/* --- Eliminar el padding inferior del contenedor del video --- */
.ep-single-lesson-page .tutor-course-topic-single-body {
    padding-bottom: 0 !important;
}

/* --- Eliminar el margen superior automático del pie de página --- */
.ep-single-lesson-page .tutor-course-topic-single-footer {
    margin-top: 0 !important;
}

/* --- FONDO OSCURO PARA EL reproductor VIDEO DE LECCIÓN --- */

.ep-single-lesson-page .tutor-course-topic-single-body {
    background-color: #000 !important;
    color: var(--color-texto-claro) !important; /* Asegura que cualquier texto sea visible */
}

/* --- 7H - 30 TUTOR LMS - CORRECCIÓN DE ESPACIO VERTICAL POST-LECCIÓN --- */
.ep-single-lesson-page .lesson-hero-section {
    min-height: auto !important;
}

/* ======================================================================== */
/* --- 7I - 31. COMPONENTE DE BARRA LATERAL: "REFLEXIONES" --- */
/* ======================================================================== */

.reflexion-sidebar-title {
    margin: 0 0 0.8rem 0;
}

.reflexion-sidebar-title a {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.2rem;
    color: var(--color-texto-principal);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.reflexion-sidebar-title a:hover {
    color: var(--color-primario-accion);
}

.reflexion-sidebar-excerpt {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0 0 1.2rem 0;
}

.reflexion-sidebar-readmore {
    font-weight: 700;
    color: var(--color-primario-accion);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.reflexion-sidebar-readmore:hover {
    color: #00838f; /* Un tono ligeramente más oscuro de nuestro color de acción */
}


/* ======================================================================== */
/* --- 44. COMPONENTES WIDGET: RITUAL DE PRÁCTICA (V2 - STACKED) --- */
/* ======================================================================== */

/* --- Tarjeta de Introducción (Sin cambios) --- */
.widget-pasos-intro {
    text-align: center;
    background-color: #f0f8ff;
    border-left: 4px solid var(--color-primario-accion);
}
.widget-pasos-intro-title {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.5rem;
    color: var(--color-texto-principal);
    margin: 0 0 0.8rem 0;
}
.widget-pasos-intro p {
    font-family: var(--font-cuerpo-principal);
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* --- Estructura Unificada para Tarjetas de Pasos (¡NUEVO LAYOUT APILADO!) --- */
.widget-paso {
    text-align: center;
    padding: 0; /* Eliminamos el padding para que la imagen ocupe todo el ancho */
    overflow: hidden; /* Crucial para que el border-radius de la imagen funcione */
}

.widget-paso-icon {
    margin-bottom: 1.5rem; /* Espacio entre la imagen y el título */
}

.widget-paso-icon img {
    width: 100%;
    height: 100px;
    object-fit: cover; /* Previene que la imagen se distorsione */
    display: block; /* Elimina espacio extra debajo de la imagen */
}

.widget-paso-content {
    /* Devolvemos el padding aquí para el contenido de texto y el botón */
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.widget-paso-title {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primario-accion);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 0.5rem 0;
}

.widget-paso-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

/* --- Ajuste para que los botones se vean bien centrados --- */
.widget-bitacora-cta,
.widget-eco-leccion-cta {
    display: inline-block; /* No ocupará el 100% del ancho */
    width: auto; /* El ancho se ajusta al texto */
    padding-left: 30px; /* Añadimos padding horizontal para estética */
    padding-right: 30px;
}
/* ======================================================================== */
/* --- 8b. BOTON WIDGET DE LECCIÓN: "ir a ala bitacora" --- BITACORA DE CAMPO */ 
/* ======================================================================== */

.widget-bitacora-cta {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 15px;
    border-radius: 8px;
    
    /* --- El estilo de "papel antiguo" --- */
    background-image: url('images/fondo-bitacora.webp');
    background-color: #e9e4d9;
    background-size: cover;
    background-position: center;
    border: 2px solid #dcd7cd;
    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.2);

    /* --- Tipografía --- */
    font-family: var(--font-bitacora-heading);
    font-size: 1.2rem;
    color: #3a2e28;
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
    
    transition: all 0.3s ease;
}
.widget-bitacora-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px -2px rgba(0,0,0,0.3);
    border-color: var(--color-accent-bitacora);
}

/* --- 31a. para que el link con ID al dia de la bitacora llegue a donde es CORRECCIÓN DE ANCLAJE PARA HEADER FIJO --- */

.ancla-invisible {
    display: block;
    position: relative;
    /* Este es el truco: empuja el punto de anclaje 120px hacia arriba */
    top: -110px; 
    visibility: hidden;
}
/* ======================================================================== */
/* --- 8c. VISITA EL TEMPLO SONORO - COMPONENTE WIDGET: ECO DE LA LECCIÓN --- */
/* ======================================================================== */



.widget-eco-leccion-cta {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    padding: 15px;
    border-radius: 50px;
    font-family: var(--font-subtitulos-autoridad);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Estilo de Gradiente Sutil */
    background: linear-gradient(45deg, #2c3e50, #34495e);
    color: #fff;
    box-shadow: 0 4px 15px rgba(44, 62, 80, 0.4);
}

.widget-eco-leccion-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.5);
}

/* ================================================================================================================================= */
/* --- 9 Lógica de Visibilidad Condicional del Menú del plugin Responsive Menu --- */
/* ================================================================================================================================= */

/* Por defecto, si el usuario está LOGUEADO (WordPress añade la clase .logged-in al body)... */
body.logged-in .visible-invitado {
    display: none !important; /* ...ocultamos los elementos para invitados. */
}

/* Por defecto, si el usuario es un INVITADO (el body NO tiene la clase .logged-in)... */
body:not(.logged-in) .visible-usuario {
    display: none !important; /* ...ocultamos los elementos para usuarios. */
}




/* ================================================================================================================================= */
/* --- 10. ANIMACIONES GLOBALES Y KEYFRAMES --- */
/* ================================================================================================================================= */

/* --- Animación de entrada para el fondo del Hero --- */
@keyframes zoomIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}

/* --- Animación de entrada para el overlay del Hero --- */
@keyframes fadeOutOverlay {
    from {
        background-color: rgba(10, 25, 35, 0.9); /* Empieza casi opaco */
    }
    to {
        background-color: rgba(10, 25, 35, 0.7); /* Termina en su estado final */
    }
}

/* --- Animación de entrada para el contenido del Hero --- */
@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




/* ======================================================================== */
/* --- 12. FOOTER (V3.4 - ICONOS CON COLOR DE MARCA PERMANENTE) --- */
/* ======================================================================== */

.site-footer {
    position: relative;
    z-index: 10;
    background-color: var(--color-fondo-oscuro);
    color: rgba(255, 255, 255, 0.7);
    border-top: 4px solid var(--color-primario-accion);
}

.footer-main {
    padding: 4rem 0;
}
.site-footer .footer-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 10rem;
    row-gap: 1rem;
    text-align: center;
}

.footer-column h4 {
    font-family: var(--font-subtitulos-autoridad);
    color: #fff;
    margin: 0 0 1.5rem 0;
    font-size: 1.2rem;
}
.footer-column p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Columna 1: Misión e Identidad */
.footer-column-mision .site-logo {
    display: inline-block;
    margin-bottom: 1rem;
}
.footer-column-mision .site-logo img {
    height: 40px; width: auto; opacity: 0.9;
}
.footer-mision-texto {
    margin-bottom: 2rem !important;
}
.footer-copyright {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.5);
}

/* Columna 2 y 3: Listas de Navegación y Redes */
.footer-navigation .menu,
.footer-social-list {
    list-style: none; padding: 0; margin: 0;
    display: inline-block;
    text-align: left;
}
.footer-navigation .menu-item a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-navigation .menu-item a:hover {
    color: var(--color-texto-claro);
    padding-left: 5px;
}
.footer-social-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7); /* Color por defecto del texto */
    font-weight: 700;
    transition: all 0.3s ease;
}
.footer-social-list svg {
    width: 24px; height: 24px;
    fill: currentColor; /* El SVG hereda el color del enlace por defecto */
    transition: fill 0.3s ease; /* Transición suave para el color del SVG */
}

/* --- CAMBIO CLAVE: HOVER AFECTA AHORA SOLO AL TEXTO Y LA POSICIÓN --- */
.footer-social-list a:hover {
    color: var(--color-texto-claro); /* El texto se vuelve blanco opaco */
    transform: translateX(3px);
}
/* El SVG no cambia de color en hover, ya que su color está definido abajo */

/* --- NUEVO: COLORES DE MARCA PERMANENTES EN ICONOS --- */
.footer-social-list .social-facebook svg { fill: #1877F2; }
.footer-social-list .social-instagram svg { fill: #E4405F; }
.footer-social-list .social-tiktok svg { fill: #00F2EA; }
.footer-social-list .social-linkedin svg { fill: #0A66C2; }
.footer-social-list .social-x svg { fill: #FFFFFF; }
.footer-social-list .social-youtube svg { fill: #FF0000; }

/* --- Media Query para Escritorio --- */
@media (min-width: 992px) {
    .site-footer .footer-container {
        grid-template-columns: 1fr 1fr 1fr;
    }
}


/* ================================================================================================================================= */
/* --- 13. PÁGINA: MANIFIESTO (V2 - LA HISTORIA COMPLETA) --- */
/* ================================================================================================================================= */

/* --- Hero del Manifiesto --- */
.manifiesto-hero {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
    padding: 15vh 20px 60vh 20px;
    text-align: center; /* Mantenemos el centrado horizontal del texto */
    box-sizing: border-box; /* Buena práctica para que el padding se incluya en el cálculo total */
}

.manifiesto-hero-title {
    font-family: var(--font-titulares-accion);
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7); /* Aumentamos un poco la sombra para máxima legibilidad */
    line-height: 1.2; /* Damos un poco más de aire entre líneas si el título se rompe */
    margin: 0; /* Reseteamos el margen del h1 */
}

.manifiesto-hero-subtitle {
    font-family: var(--font-cuerpo-principal);
    font-size: 1.2rem;
    color: #eee;
    max-width: 600px;
    margin: 0.5rem auto 0;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7); /* Añadimos sombra también al subtítulo */
}

/* --- Texto de la Historia --- */
.historia-texto {
    font-family: var(--font-bitacora-body); /* Reutilizamos la fuente de la bitácora para un toque narrativo */
    font-size: 1.15rem;
    line-height: 1.8;
    color: #444;
}
.historia-texto p { margin-bottom: 1.5rem; }

/* --- Rejilla de Mentores --- */
.mentores-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móvil */
    gap: 3rem;
    margin-top: 4rem;
}
.mentor-card {
    display: flex;
    flex-direction: column; /* Apilado en móvil */
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.mentor-imagen-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* Proporción para retratos */
    object-fit: cover;
}
/* --- NUEVA REGLA PARA EL VIDEO --- */
.mentor-imagen-wrapper video {
    width: 100%;
    height: 100%; /* El video debe llenar el contenedor que ya tiene aspect-ratio */
    object-fit: cover; /* Asegura que el video cubra el área sin deformarse */
}
.mentor-info {
    padding: 2rem;
    text-align: center;
}
.mentor-info h3 { font-family: var(--font-subtitulos-autoridad); font-size: 2rem; margin: 0 0 0.5rem; }
.mentor-arquetipo { font-weight: 700; color: var(--color-primario-accion); margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
.mentor-descripcion { margin: 0 0 1.5rem; color: #ccc; }
.mentor-cita {
    margin: 0;
    padding: 1rem;
    background-color: rgba(0,0,0,0.2);
    border-left: 4px solid var(--color-primario-accion);
    border-radius: 4px;
    font-style: italic;
    color: #fff;
}

/* --- Media Queries --- */
@media (min-width: 992px) {
    .mentores-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    .mentor-card {
        flex-direction: column; /* Mantenemos el apilado para un diseño de tarjeta consistente */
    }
}
@media (max-width: 768px) {
    .manifiesto-hero { min-height: 60vh; }
    .manifiesto-hero-title { font-size: 2.5rem; }
    .manifiesto-hero-subtitle { font-size: 1.1rem; }
}

/* --- Galería de Evidencia Neumórfica (Acto 5 - Versión Corregida) --- */
.evidencia-neumorfica-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px; /* Ancho máximo generoso */
    margin: 0 auto;
}
.neumorphic-frame-image {
    /* Reutilizamos la base del estilo que ya conocemos */
    background: #E0E5EC;
    border-radius: 15px; /* Un poco más redondeado para el marco */
    padding: 15px; /* Este padding crea el marco tipo Polaroid */
    box-shadow: 7px 7px 14px rgba(163, 177, 198, 0.6), -7px -7px 14px rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 0;
}
.neumorphic-frame-image:hover {
    transform: translateY(-5px);
    box-shadow: 10px 10px 20px rgba(163, 177, 198, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.8);
}
.neumorphic-frame-image img {
    width: 100%;
    height: auto; /* <-- CLAVE: Respeta la proporción original de la imagen */
    display: block;
    border-radius: 6px; /* Bordes internos de la imagen ligeramente redondeados */
}

/* Animaciones secuenciales que ya tenemos definidas */
.neumorphic-frame-image.fade-in-element:nth-child(2) { transition-delay: 0.2s; }
.neumorphic-frame-image.fade-in-element:nth-child(3) { transition-delay: 0.4s; }

/* --- Media Query para Móvil: sutil y limpio --- */
@media (max-width: 768px) {
    .evidencia-neumorfica-grid {
        grid-template-columns: 1fr; /* Una sola columna, simple y elegante */
        max-width: 350px; /* Limitamos el ancho para que no sean enormes */
        gap: 2.5rem; /* Aumentamos el espacio vertical */
    }
}


/* ======================================================================== */
/* --- 13b. MANIFIESTO - PILARES DEL SANTUARIO (ÍCONOS) --- */
/* ======================================================================== */

.pilar-card {
    /* Hacemos espacio para el ícono en la parte superior */
    padding-top: 100px;
    position: relative;
}

.pilar-card::before {
    content: '';
    position: absolute;
    top: 30px; /* Posición vertical del ícono */
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* Ancho del ícono */
    height: 80px; /* Alto del ícono */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

/* Asignamos la imagen específica a cada clase */
.pilar-herramientas::before {
    background-image: url('images/manifiesto_BL3_icono_herramientas.webp');
}

.pilar-mundo::before {
    background-image: url('images/manifiesto_BL3_icono_mundo.webp');
}

.pilar-brujula::before {
    background-image: url('images/manifiesto_BL3_icono_brujula.webp');
}

/* Ajustamos el título para que tenga el espacio adecuado */
.pilar-card h3 {
    margin-top: 0;
}


/* ======================================================================== */
/* --- 14. PÁGINA DE BLOG (HOME.PHP) Y TARJETAS DE POST --- */
/* ======================================================================== */

/* --- Hero del Blog --- */
.blog-hero {
    /* 1. Mantenemos flexbox, pero ahora lo usaremos para centrar en una columna. */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
    padding: 10vh 20px 60vh 20px;
    
    text-align: center; /* Mantenemos el centrado horizontal del texto */
    box-sizing: border-box; /* Buena práctica para que el padding se incluya en el cálculo total */
}
.blog-hero-title {
    font-family: var(--font-titulares-accion);
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7); /* Aumentamos un poco la sombra para máxima legibilidad */
    line-height: 1.2; /* Damos un poco más de aire entre líneas si el título se rompe */
    margin: 0; /* Reseteamos el margen del h1 */
}
.blog-hero-subtitle {
    font-family: var(--font-cuerpo-principal);
    font-size: 1.2rem;
    color: #eee;
    max-width: 600px;
    margin: 1rem auto 0;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7); /* Añadimos sombra también al subtítulo */
}

/* --- Sección de Listado y Cuadrícula --- */
.blog-listing-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
}

/* --- Estilos de la Tarjeta de Post --- */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

.blog-post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.blog-post-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-post-title {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.3rem;
    color: var(--color-texto-principal);
    margin: 0 0 0.8rem 0;
}

.blog-post-excerpt {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1; /* Empuja el "Leer más" hacia abajo */
}

.blog-post-readmore {
    font-weight: 700;
    color: var(--color-primario-accion);
    align-self: flex-start; /* Se alinea a la izquierda */
}

/* ======================================================================== */
/* --- 15. PÁGINA DE ARTÍCULO (SINGLE.PHP - V2.1 FUSIONADO) --- */
/* ======================================================================== */

/* --- 15a. HERO DEL ARTÍCULO (SIN CAMBIOS) --- */
.single-post-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1rem;
    background-size: cover;
    background-position: center;
}
.single-post-title {
    font-family: var(--font-titulares-accion);
    font-size: 3.2rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    line-height: 1.2;
    margin: 0;
}

/* --- 15b. ESTRUCTURA PRINCIPAL Y LAYOUT DE DOS COLUMNAS --- */
.single-post-main-content {
    padding: 4rem 0;
    background-color: var(--color-fondo-claro);
}
.single-post-grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto (mobile-first) */
    gap: 3rem;
}
@media (min-width: 992px) {
    .single-post-grid-layout {
        grid-template-columns: 2.5fr 1fr; 
        gap: 4rem;
    }
}

/* --- 15c. COLUMNA PRINCIPAL (EL CONTENIDO DEL POST) --- */
.entry-content {
    /* El grid ya controla el ancho, así que estas reglas son para el contenido INTERNO */
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
}
.entry-content p { margin-bottom: 1.5em; }
.entry-content h2, .entry-content h3, .entry-content h4 {
    font-family: var(--font-subtitulos-autoridad);
    margin-top: 2.5em;
    margin-bottom: 1em;
    line-height: 1.3;
}
.entry-content h2 { font-size: 2rem; }
.entry-content h3 { font-size: 1.6rem; }
.entry-content ul, .entry-content ol { margin-bottom: 1.5em; padding-left: 1.5em; }
.entry-content blockquote {
    margin: 2em 0;
    padding-left: 1.5em;
    border-left: 4px solid var(--color-primario-accion);
    font-style: italic;
    font-size: 1.2rem;
    color: #555;
}
.single-post-content-column .entry-content a { color: var(--color-primario-accion); text-decoration: none; font-weight: 600; }
.entry-content img { max-width: 100%; height: auto; display: block; margin: 2em 0; border-radius: 8px; }

/* --- 15d. BARRA LATERAL Y SU CONTENIDO PEGAJOSO --- */
.single-post-sidebar-column .sidebar-sticky-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: -webkit-sticky;
    position: sticky;
    top: 120px; /* Espacio para el header */
}

/* --- 15e. ESTILOS PARA LOS WIDGETS DENTRO DE LA BARRA LATERAL --- */

/* Adaptación de Widgets existentes */
.single-post-sidebar-column .entrenamiento-sidebar-card { width: 100%; }
.single-post-sidebar-column .widget-eco-content { padding-top: 40px; }

/* Widget "Eco del Santuario" (del antiguo bloque 24) */
.widget-marketing { display: flex; flex-direction: column; text-align: center; }
.widget-eco-avatar { margin-bottom: -25px; position: relative; z-index: 2; }
.widget-eco-avatar img { height: 100px; width: 100px; border-radius: 50%; background: #fff; padding: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.widget-eco-content { padding: 40px 1.5rem 1.5rem 1.5rem; background-color: #f0f8ff; border-left: 4px solid var(--color-primario-accion); border-radius: 4px; display: flex; flex-direction: column; flex-grow: 1; }
.widget-eco-title { font-family: var(--font-subtitulos-autoridad); font-size: 1.3rem; margin: 0 0 0.5rem 0; }
.widget-eco-content p { margin: 0 0 1.5rem 0; color: #555; flex-grow: 1; }
.widget-eco-player audio { width: 100%; margin-bottom: 1.5rem; accent-color: var(--color-primario-accion); }
.widget-eco-cta { font-weight: 700; color: var(--color-primario-accion); text-decoration: none; font-size: 0.9rem; }
.widget-eco-cta:hover { text-decoration: underline; }

/* --- reproductor personalizado - WIDGET DE AUDIO PERSONALIZADO (ECO DEL SANTUARIO) --- */

.custom-audio-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #f0f4f8;
    border-radius: 50px;
    padding: 8px 20px 8px 8px;
    margin: 0 auto 1.5rem auto;
    max-width: 250px;
}

.player-button {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--color-primario-accion);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.player-button:hover {
    background-color: #00838f;
}

.player-button svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.time-display {
    font-family: monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-texto-principal);
    flex-grow: 1;
}

/* Widget CTA Ancla */
.widget-cta-ancla { color: var(--color-texto-claro); text-align: center; }
.widget-cta-title { font-family: var(--font-subtitulos-autoridad); font-size: 1.3rem; color: #fff; margin: 0 0 0.8rem 0; }
.widget-cta-content p { color: #ccc; margin: 0 0 1.5rem 0; font-size: 0.95rem; }
.widget-cta-content .cta-principal { font-size: 1.2rem !important; padding: 10px 25px !important; margin-bottom: 0.8rem !important; }
.widget-cta-subtext { font-size: 0.9rem; color: #FFF; }

/* --- 15f. CORRECCIÓN RESPONSIVE PARA WIDGETS DE BLOG --- */

.single-post-sidebar-column .entrenamiento-sidebar-card,
.single-post-sidebar-column .widget-marketing {
    box-sizing: border-box;
    max-width: 100%;
}
/* --- 15g. MEJORA VISUAL PARA WIDGET CTA ANCLA --- */

.widget-cta-ancla {
    /* 1. Establecemos la imagen de fondo */
    background-image: url('images/bg-hero.webp');
    background-size: cover;
    background-position: center;

    /* 2. Preparamos el widget para contener el overlay */
    position: relative;
    overflow: hidden; /* Asegura que los bordes redondeados se respeten */
    padding: 2rem 1.5rem; /* Añadimos padding para que no se pegue a los bordes */
}

/* 3. Creamos el overlay oscuro */
.widget-cta-ancla::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 20, 25, 0.75); /* Overlay oscuro y semitransparente */
    z-index: 1; /* Se coloca entre el fondo y el contenido */
}

/* 4. Nos aseguramos de que el contenido esté por encima del overlay */
.widget-cta-ancla .widget-cta-content {
    position: relative;
    z-index: 2;
}




/* ======================================================================== */
/* --- 16. CTA AL FINAL DEL POST EN EL BLOG - articulos (SINGLE.PHP) --- */
/* ======================================================================== */

/* --- REGLAS CSS ACTUALIZADAS --- */
.cta-post-final {
    background-color: var(--color-fondo-oscuro);
    color: var(--color-texto-claro);
    padding: 4rem 0; /* Padding vertical, sin padding horizontal */
    margin-top: 10rem;
    
    background-image: url('images/panda-bg-pattern-dark.png');
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    max-width: 720px; /* Mismo ancho que el contenido del post para alineación */
    margin: 0 auto; /* Centra el contenido */
    border-radius: 20px;    
}

.cta-post-contenido {
    max-width: 720px; /* Mismo ancho que el contenido del post para alineación */
    margin: 0 auto; /* Centra el contenido */
    padding: 0 20px; /* Padding de seguridad para móviles */
    text-align: center;
}

.cta-post-contenido h3 {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.8rem;
    color: var(--color-texto-claro);
    margin-top: 0;
    margin-bottom: 1rem;
}

.cta-post-contenido p {
    font-size: 1.1rem;
    color: #ccc;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    line-height: 1.7;
}
.cta-post-contenido a {
    text-decoration: none;
}



/* ======================================================================== */
/* --- 17. PÁGINA PARA EMPRESAS (VERSIÓN 4.0 - LA SOLUCIÓN FLEXBOX) --- */
/* ======================================================================== */

.formulario-empresas .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.formulario-empresas .form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Neutralizamos cualquier margen de párrafo que inserte el plugin */
.formulario-empresas .wpcf7-form p {
    margin: 0;
}

.formulario-empresas .form-grid > div {
    display: flex;
    flex-direction: column; /* Apila la etiqueta sobre el campo */
    gap: 0.3rem; /* <-- ESTE ES EL NUEVO CONTROLADOR DE ESPACIADO */
}

.formulario-empresas label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #555;
}

.formulario-empresas .wpcf7-form-control {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: var(--font-cuerpo-principal);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}

.formulario-empresas .wpcf7-form-control:focus {
    outline: none;
    border-color: var(--color-primario-accion);
    box-shadow: 0 0 0 3px rgba(0, 184, 212, 0.2);
}

.formulario-empresas .form-submit {
    text-align: center;
    margin-top: 1rem;
}

.formulario-empresas input[type="submit"].wpcf7-submit {
    display: inline-block;
    border: 2px solid var(--color-primario-accion);
    background-color: var(--color-primario-accion);
    color: var(--color-texto-claro);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    font-family: var(--font-subtitulos-autoridad);
    cursor: pointer;
    width: auto;
}

.formulario-empresas input[type="submit"].wpcf7-submit:hover {
    background-color: transparent;
    color: var(--color-primario-accion);
}

@media (min-width: 768px) {
    .formulario-empresas .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 2rem;
    }
}
/* Ajuste para iconos dentro de marcos neumórficos */
.neumorphic-frame .habilidad-icono {
    margin: 0 auto 1.5rem; 
}



/* ======================================================================== */
/* --- 18. CEREMONIA DE BIENVENIDA page-bienvenido --- */
/* ======================================================================== */

/* --- Hero de la Ceremonia (Sin cambios) --- */
.ceremonia-hero { position: relative; height: 95vh; min-height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--color-texto-claro); overflow: hidden; padding: 2rem 0; }
.ceremonia-hero-video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#ceremonia-bg-video { width: 100%; height: 100%; object-fit: cover; filter: blur(2px); }
.ceremonia-hero .fp-container { z-index: 3; }
.ceremonia-hero-title { font-family: var(--font-titulares-accion); font-size: 3.5rem; text-shadow: 0 2px 15px rgba(0,0,0,0.7); margin-bottom: 1rem; }
.ceremonia-hero-subtitle { font-size: 1.3rem; max-width: 600px; margin: 0 auto 2.5rem; }

/* --- Contenido Principal de la Ceremonia --- */
.ceremonia-main-content { padding: 4rem 0; background-color: var(--color-fondo-gris); }

/* --- EL NUEVO CONTENEDOR FLEXBOX --- */
.ceremonia-cards-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea en pantallas pequeñas */
    justify-content: center; /* Centra las tarjetas */
    align-items: stretch; /* Estira las tarjetas para que tengan la misma altura por fila */
    gap: 2.5rem; /* Espacio uniforme entre todas las tarjetas */
    max-width: 1200px; /* Un ancho máximo para el contenedor */
    margin: 0 auto;
}

/* --- ESTILO UNIFICADO PARA TODAS LAS TARJETAS --- */
.ceremonia-card-item {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    border: 1px solid #e5e5e5;
    flex: 1 1 400px; /* Magia Flexbox: Crece, Encoge, Base de 400px. Crea el layout de 2 columnas automáticamente */
    min-width: 320px; /* Ancho mínimo antes de que se rompa la línea */
}

/* --- Estilos internos de las tarjetas (ya los teníamos) --- */
.ceremonia-card-title { font-family: var(--font-subtitulos-autoridad); font-size: 1.5rem; margin-top: 0; margin-bottom: 1rem; color: var(--color-texto-principal); }
.ceremonia-card-text { font-size: 1.1rem; line-height: 1.7; margin-bottom: 1rem; }
.ceremonia-card-tip { font-size: 0.9rem; color: #555; background-color: #f7fafc; padding: 1rem; border-radius: 8px; margin-top: 1.5rem; border-left: 3px solid var(--color-primario-accion); }
.ceremonia-order-number { margin-top: 1.5rem; text-align: center; font-size: 1rem; color: var(--color-primario-accion); }
.ceremonia-steps-list { list-style: none; padding-left: 0; margin: 0; }
.ceremonia-steps-list li { font-size: 1.1rem; line-height: 1.7; padding-left: 2em; text-indent: -2em; }
.ceremonia-steps-list li::before { content: '✓'; color: var(--color-primario-accion); font-weight: bold; margin-right: 1em; }
.ceremonia-steps-list li:not(:last-child) { margin-bottom: 1rem; }

/* --- Estilos específicos para la tarjeta Pro Tip --- */
.ceremonia-card-item--pro-tip {
    align-items: center;
    text-align: center;
}
.pro-tip-icon { flex-shrink: 0; }
.pro-tip-icon img { width: 60px; height: auto; }
.pro-tip-text h4 { font-family: var(--font-subtitulos-autoridad); margin: 0 0 0.3rem 0; color: var(--color-accent-bitacora); }
.pro-tip-text p { margin: 0; font-size: 1rem; color: #555; }

/* --- CTA Final --- */
.ceremonia-cta-final {
    text-align: center;
    margin-top: 3.5rem; /* Espacio que lo separa de las tarjetas */
}
.ceremonia-cta-final .cta-principal { font-size: 1.8rem; padding: 15px 40px; }

/* --- Animación y Media Queries (Sin cambios) --- */
.hero-content-inner { animation: fadeInContent 1.5s ease-out 0.5s forwards; opacity: 0; }
@media (max-width: 991px) {
    .ceremonia-hero-title { font-size: 3rem; }
}

/* --- ESTILOS PARA EL TUTORIAL INTELIGENTE --- */
.tutorial-pasos {
    display: none; /* Oculto por defecto. JavaScript lo mostrará. */
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eee;
}

.tutorial-pasos ol {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
    color: #555;
}

.tutorial-pasos li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.tutorial-icon {
    display: inline-block;
    vertical-align: middle;
    height: 1.2em; /* Hace que el icono tenga un tamaño relativo al texto */
    width: auto;
    margin: 0 0.2em;
}

/* ======================================================================== */
/* --- 19. COMPONENTE GLOBAL: MANTRA FINAL pausa y panding--- */
/* ======================================================================== */

.mantra-final-bloque {
    font-family: var(--font-bitacora-body); /* Usamos la fuente narrativa */
    font-style: italic;
    font-size: 2rem;
    text-align: center;
    line-height: 1.6;
    color: var(--color-texto-claro);
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    max-width: 700px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .mantra-final-bloque {
        font-size: 1.5rem;
    }
}

/* ======================================================================== */
/* --- 20. PÁGINA: LA PUERTA DEL SANTUARIO - campamento base - acceder --- */
/* ======================================================================== */


.puerta-santuario-wrapper {
    position: relative;
    width: 100%;
    /* CLAVE DEL CENTRADO: Usamos Flexbox para alinear el contenido */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* --- 20b. Fondo Inmersivo --- */
.puerta-santuario-bg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    z-index: 1;
}

/* --- 20c. La Ventana de Login COMPACTA Y ELEGANTE --- */
.puerta-santuario-login-box {
    position: relative; z-index: 2;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 1.5rem; /* Espacio interno generoso */
    width: 100%;
    /* CLAVE DEL TAMAÑO: Reducimos drásticamente el ancho máximo */
    max-width: 800px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    /* Animación sutil de entrada */
    opacity: 0;
    transform: scale(0.95);
    animation: fadeInModal 0.5s ease-out 0.2s forwards;
}

@keyframes fadeInModal {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.login-box-title {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.6rem;
    margin: 0 0 0.5rem 0;
}
.login-box-subtitle {
    margin: 0 0 2rem 0;
    color: #555;
    font-size: 0.95rem;
}

/* --- 20d. Ocultamos Títulos Redundantes --- */
.puerta-santuario-login-box .woocommerce-form-login h2,
.puerta-santuario-login-box .woocommerce-MyAccount-content h2 {
    display: none !important;
}

/* --- 20e. Formulario Interno REFINADO --- */
.puerta-santuario-login-box .woocommerce-form-login { text-align: left; }
.puerta-santuario-login-box .form-row { margin-bottom: 1.2rem; }
.puerta-santuario-login-box label:not(.woocommerce-form__label-for-checkbox) {
    font-weight: 700; font-size: 0.85rem; color: #333;
    display: block; margin-bottom: 0.4rem;
}
.puerta-santuario-login-box .input-text {
    width: 100%; padding: 12px;
    border: 1px solid #ccc; border-radius: 8px;
    transition: all 0.3s ease;
}
.puerta-santuario-login-box .input-text:focus {
    border-color: var(--color-primario-accion);
    box-shadow: 0 0 0 3px var(--color-primario-accion-translucido);
    outline: none;
}
.puerta-santuario-login-box .form-row-last { margin-top: 0.5rem; margin-bottom: 0.5rem !important; }
.puerta-santuario-login-box .woocommerce-form-login__submit {
    width: 100%;
    background-color: var(--color-primario-accion) !important;
    border: none !important; color: #fff !important;
    padding: 14px !important; border-radius: 50px !important;
    font-size: 1.05rem !important; font-weight: 700 !important;
    font-family: var(--font-subtitulos-autoridad);
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 184, 212, 0.4);
}
.puerta-santuario-login-box .woocommerce-form-login__submit:hover {
    background-color: #00838f !important; transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 184, 212, 0.5);
}
.puerta-santuario-login-box .woocommerce-form-login__rememberme {
    font-size: 0.9rem; display: block; margin-bottom: 0.5rem;
}
.puerta-santuario-login-box .woocommerce-LostPassword {
    text-align: center; margin-top: 0; font-size: 0.9rem;
}
.puerta-santuario-login-box .woocommerce-LostPassword a {
    color: #000; font-weight: 700; text-decoration: none;
}

/* ======================================================================== */
/* --- 20f. PUERTA DEL SANTUARIO: FORMULARIO "OLVIDÉ CONTRASEÑA" V2 --- */
/* ======================================================================== */

/* 1. Convertimos el formulario en un "organizador" flexible */
.puerta-santuario-login-box .woocommerce-ResetPassword {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    align-items: center;   /* LA CLAVE: Centra todos los hijos horizontalmente */
    gap: 1rem;             /* Añade un espacio uniforme entre los elementos */
}

/* 2. Controlamos el ancho del bloque del campo de texto */
.puerta-santuario-login-box .woocommerce-ResetPassword .form-row {
    width: 100%; /* Hacemos que ocupe todo el ancho disponible en la columna centrada */
    max-width: 300px; /* Un ancho máximo para que no se vea extraño */
    text-align: left; /* Mantenemos la etiqueta y el campo alineados a la izquierda para legibilidad */
}

/* 3. Reutilizamos el estilo del botón (esta parte ya funcionaba pero la incluimos para tener todo junto) */
.puerta-santuario-login-box .woocommerce-ResetPassword .button {
    width: 100%;
    max-width: 300px; /* Hacemos que el botón tenga el mismo ancho máximo que el campo */
    background-color: var(--color-primario-accion) !important;
    border: none !important; 
    color: #fff !important;
    padding: 14px !important; 
    border-radius: 50px !important;
    font-size: 1.05rem !important; 
    font-weight: 700 !important;
    font-family: var(--font-subtitulos-autoridad);
    cursor: pointer;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 184, 212, 0.4);
}

.puerta-santuario-login-box .woocommerce-ResetPassword .button:hover {
    background-color: #00838f !important; 
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 184, 212, 0.5);
}


/* ======================================================================== */
/* --- 21. SANTUARIO INTERIOR (/mi-cuenta - LOGUEADO) --- */
/* ======================================================================== */

/* --- 21a. Hero del Panel --- */
.santuario-hero {
    position: relative; /* Necesario para que el overlay se posicione correctamente */
    color: var(--color-texto-claro);
    padding: 10rem 0; /* Aumentamos un poco el padding para más impacto */
    text-align: center;
}
.santuario-hero-title {
    font-family: var(--font-titulares-accion);
    font-size: 3rem; /* Hacemos el título más grande */
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6); /* Sombra para legibilidad */
}
.santuario-hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0,0,0,0.6); /* Sombra para legibilidad */
}

/* --- 21b. Contenido Principal y Layout --- */
.santuario-main-content {
    padding: 3rem 0;
    background-color: var(--color-fondo-gris);
}
.santuario-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .santuario-layout {
        grid-template-columns: 250px auto; /* Columna fija para nav, el resto para contenido */
        gap: 3rem;
    }
}

/* --- 21c. Navegación del Santuario (Menú Izquierdo) --- */
.santuario-nav .woocommerce-MyAccount-navigation {
    width: 100%;
}
.santuario-nav .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
}
.santuario-nav .woocommerce-MyAccount-navigation-link {
    border-bottom: 1px solid #eee;
}
.santuario-nav .woocommerce-MyAccount-navigation-link:last-child {
    border-bottom: none;
}
.santuario-nav .woocommerce-MyAccount-navigation-link a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--color-texto-principal);
    font-weight: 700;
    transition: all 0.3s ease;
}
.santuario-nav .woocommerce-MyAccount-navigation-link a:hover {
    background-color: #f7fafc;
    color: var(--color-primario-accion);
    padding-left: 25px;
}
.santuario-nav .woocommerce-MyAccount-navigation-link.is-active a {
    background-color: var(--color-primario-accion);
    color: #fff;
    padding-left: 25px;
}

/* --- 21d. Contenido del Santuario (Panel Derecho) --- */
.santuario-content .woocommerce-MyAccount-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid #ddd;
}
.santuario-content .woocommerce-MyAccount-content h2 {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.8rem;
    margin-top: 0;
}
.santuario-content .woocommerce-MyAccount-content a {
    color: var(--color-primario-accion);
    font-weight: 700;
}
/* --- 21e. Responsividad del Santuario Interior (Móvil) V2 --- */
@media (max-width: 767px) {
    .santuario-content .woocommerce-MyAccount-content {
        /* LA SOLUCIÓN DEFINITIVA: Le dice al navegador que el padding y el borde
           se calculen DENTRO del ancho del elemento, no por fuera. */
        box-sizing: border-box;

        /* Ahora sí podemos restaurar un padding estéticamente agradable. */
        padding: 1.5rem 1rem;
        
        /* Y mantenemos el overflow como una red de seguridad para tablas muy anchas. */
        overflow-x: auto;
    }
}

/* style.css */

/* ======================================================================== */
/* --- 22. COMPONENTE widget frases: GUÍA DEL MAESTRO (V7.0 - COLORES DINÁMICOS) --- */
/* ======================================================================== */

.guia-del-maestro-avatar {
    text-align: center;
    margin-bottom: -25px;
    position: relative;
    z-index: 2;
}

.guia-del-maestro-avatar img {
    height: 150px;
    width: auto;
}

.guia-contenido {
    margin: 0;
    padding: 35px 1.5rem 1.5rem 1.5rem;
    text-align: center;
    border-radius: 8px; /* Bordes redondeados sutiles */
    
    /* --- CAMBIO CLAVE 1: Aplicamos los colores desde las variables --- */
    background-color: var(--widget-bg-color, #f0f8ff); /* El segundo valor es un fallback */
    border-left: 5px solid var(--widget-accent-color, #00b8d4);
}

.guia-contenido p {
    font-family: var(--font-bitacora-body);
    font-style: italic;
    font-size: 1.1rem;
    margin: 0 0 1.5rem 0; /* Espacio entre la frase y el botón */
    color: #333;
}

.guia-contenido .widget-modal-trigger {
    width: 100%;
    border: none;
    padding: 12px;
    border-radius: 50px;
    font-family: var(--font-subtitulos-autoridad);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* --- CAMBIO CLAVE 2: El botón también usa el color de acento --- */
    background-color: var(--widget-accent-color, #00b8d4);
    color: #fff;
    box-shadow: 0 4px 15px -5px var(--widget-accent-color, #00b8d4);
}

.guia-contenido .widget-modal-trigger:hover {
    /* Efecto de oscurecimiento sutil en hover */
    background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), var(--widget-accent-color, #00b8d4);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -5px var(--widget-accent-color, #00b8d4);
}

/* ======================================================================== */
/* --- 23. PÁGINA: TEMPLO SONORO --- */
/* ======================================================================== */

/* --- 23a. Hero del Templo Sonoro (V2.0 - Posicionamiento Estratégico) --- */
.templo-sonoro-hero {
    /* 1. Mantenemos flexbox, pero ahora lo usaremos para centrar en una columna. */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */

    /* 2. LA SOLUCIÓN CLAVE: Reemplazamos min-height por padding. */
    /* Damos más espacio abajo que arriba para "empujar" el texto hacia arriba. */
    padding: 15vh 20px 60vh 20px;
    
    text-align: center; /* Mantenemos el centrado horizontal del texto */
    box-sizing: border-box; /* Buena práctica para que el padding se incluya en el cálculo total */
}

.templo-sonoro-hero-title {
    font-family: var(--font-titulares-accion);
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7); /* Aumentamos un poco la sombra para máxima legibilidad */
    line-height: 1.2; /* Damos un poco más de aire entre líneas si el título se rompe */
    margin: 0; /* Reseteamos el margen del h1 */
}

.templo-sonoro-hero-subtitle {
    font-family: var(--font-cuerpo-principal);
    font-size: 1.2rem;
    color: #eee;
    max-width: 600px;
    margin: 1rem auto 0;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7); /* Añadimos sombra también al subtítulo */
}

/* --- Media query para ajustar en pantallas pequeñas --- */
@media (max-width: 768px) {
    .templo-sonoro-hero-title {
        font-size: 2.5rem;
    }
    .templo-sonoro-hero-subtitle {
        font-size: 1.1rem;
    }
    .templo-sonoro-hero {
        padding-top: 12vh;
        padding-bottom: 50vh;
    }
}


/* ======================================================================== */
/* --- 24. WIDGET DE AUDIO MODAL --- */
/* ======================================================================== */

/* --- 43a. Estilos generales de la página (Layout y Títulos) --- */
/* Estos estilos no cambian, definen la estructura de la página */
.templo-sonoro-main-content {
    padding: 4rem 0;
    background-color: var(--color-fondo-gris);
}
.templo-sonoro-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 992px) { .templo-sonoro-layout { grid-template-columns: 2.5fr 1fr; } }
.audio-section { margin-bottom: 4rem; }
.audio-section-title { font-family: var(--font-subtitulos-autoridad); font-size: 2rem; margin: 0 0 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid #e0e0e0; }
.audio-section-intro { font-size: 1rem; color: #555; margin-bottom: 2rem; }

/* --- 43b. La tarjeta/botón del catálogo --- */
/* Estos estilos no cambian, ya funcionan perfectamente */
.audio-item-trigger { display: flex; align-items: center; width: 100%; text-align: left; background-color: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.06); border: 1px solid #e5e5e5; transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; padding: 0; margin: 0; cursor: pointer; border-left: 8px solid var(--accent-color); }
.audio-item-trigger:not(:last-child) { margin-bottom: 1.5rem; }
.audio-item-trigger:hover { box-shadow: 0 8px 35px rgba(0,0,0,0.1); transform: translateY(-2px); }
.audio-item-trigger .audio-item-info { flex-grow: 1; padding: 1.5rem; }
.audio-item-trigger h3 { font-family: var(--font-subtitulos-autoridad); font-size: 1.3rem; margin: 0 0 0.5rem 0; color: var(--color-texto-principal); }
.audio-item-trigger p { margin: 0 0 1rem 0; font-size: 0.95rem; color: #666; font-family: var(--font-cuerpo-principal)}
.audio-item-trigger span { font-size: 0.9rem; color: #888; font-family: var(--font-cuerpo-principal)}
.audio-item-play-icon { font-size: 2rem; color: #ccc; padding: 0 2rem; transition: color 0.3s ease, transform 0.3s ease; }
.audio-item-trigger:hover .audio-item-play-icon { color: var(--accent-color); transform: scale(1.1); }

/* --- 43c. El Overlay (la cortina oscura) --- */
.audio-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
    background-color: rgba(10, 20, 25, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.audio-modal-overlay.is-visible { opacity: 1; visibility: visible; }

/* --- 43d. El Contenido del Modal (la caja principal) --- */
.audio-modal-content {
    position: relative; width: 100%; max-width: 800px;
    background-color: var(--color-fondo-oscuro);
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: scale(0.95); transition: transform 0.3s ease;
}
.audio-modal-overlay.is-visible .audio-modal-content { transform: scale(1); }

/* --- 43e. Contenedor del Video (LA SOLUCIÓN CLAVE) --- */
#audio-modal-player-container {
    position: relative;
    z-index: 2; /* <-- CLAVE #1: Esta capa está por ENCIMA de la barra de información. */
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* Técnica clásica 16:9 a prueba de balas */
    background-color: #000;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

#audio-modal-player-container iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* --- 43f. Barra de Información --- */
.audio-modal-info {
    position: relative;
    z-index: 1; /* <-- CLAVE #2: Esta capa está por DEBAJO del video. */
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; gap: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.audio-modal-info h3 {
    font-family: var(--font-subtitulos-autoridad); font-size: 1.2rem; color: var(--color-texto-claro);
    margin: 0; flex-grow: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 43g. Botón de Cierre Integrado --- */
.modal-close-button-integrated {
    position: static; transform: none; flex-shrink: 0;
    width: 38px; height: 38px;
    background-color: var(--color-primario-accion); color: #fff; border: none; border-radius: 50%;
    font-size: 1.8rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 15px rgba(0, 184, 212, 0.4);
    transition: all 0.3s ease;
}
.modal-close-button-integrated:hover {
    background-color: #00838f;
    transform: rotate(90deg);
}
/* ======================================================================== */
/* --- 25. (ACCESO DENEGADO) --- */
/* ======================================================================== */

.acceso-exclusivo-hero {
    /* Hacemos que la sección ocupe casi toda la altura de la pantalla */
    min-height: calc(100vh - 150px); /* 100% de la altura menos un espacio para el header/footer */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-texto-claro);
    padding: 4rem 1rem;
}

.acceso-exclusivo-content {
    max-width: 650px;
    /* Animación sutil de entrada para el contenido */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInContent 1s ease-out 0.3s forwards;
}

.acceso-exclusivo-title {
    font-family: var(--font-titulares-accion);
    font-size: 3rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
    line-height: 1.2;
    margin: 0 0 1rem 0;
}

.acceso-exclusivo-subtitle {
    font-size: 1.2rem;
    color: #eee;
    line-height: 1.7;
    margin: 0 auto 2rem auto;
}

.acceso-exclusivo-hero .cta-principal {
    margin-top: 1rem;
    font-size: 1.5rem;
}

/* Ajustes para móvil */
@media (max-width: 768px) {
    .acceso-exclusivo-title {
        font-size: 2.2rem;
    }
    .acceso-exclusivo-subtitle {
        font-size: 1.1rem;
    }
}

/* --- Botón Secundario Transparente (Para Login / Acciones secundarias) --- */
.boton-secundario-transparente {
    display: inline-block;
    padding: 10px 30px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    color: #ccc;
    text-decoration: none;
    font-family: var(--font-subtitulos-autoridad);
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: transparent;
}

.boton-secundario-transparente:hover {
    border-color: var(--color-texto-claro);
    color: var(--color-texto-claro);
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}


/* ======================================================================== */
/* --- 26. COMPONENTE GLOBAL: SUSCRIPCIÓN NEWSLETTER (V1.2 - STACKED) --- */
/* ======================================================================== */

/* --- Contenedor Principal (Sin cambios) --- */
.suscripcion-widget {
    background-color: rgba(10, 20, 25, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    text-align: center;
    color: #ccc;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    box-sizing: border-box;
}

/* --- Icono y Título (Sin cambios) --- */
.suscripcion-icono { margin-bottom: 1rem; }
.suscripcion-icono img { height: 100px; width: auto; }
.suscripcion-titulo {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.2rem;
    color: var(--color-texto-claro);
    margin: 0 0 1rem 0;
}


/* --- Párrafos generados por CF7 --- */
.suscripcion-formulario .wpcf7-form p {
    margin: 0;
}

/* --- Contenedor del campo de email (span) --- */
/* Esta es la clave para el espaciado vertical */
.suscripcion-widget .wpcf7-form-control-wrap {
    display: block; /* Asegura que ocupe toda la línea */
    margin-bottom: 0.1rem; /* Crea el espacio entre el email y el botón */
}

/* Campo de Email (Simplificado) */
.suscripcion-widget .wpcf7-email {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--color-texto-claro);
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.suscripcion-widget .wpcf7-email:focus {
    outline: none;
    border-color: var(--color-primario-accion);
    box-shadow: 0 0 0 3px var(--color-primario-accion-translucido);
}

/* Botón de Envío (Sin cambios) */
.suscripcion-widget .wpcf7-submit {
    border: 2px solid var(--color-primario-accion);
    background-color: var(--color-primario-accion);
    color: var(--color-texto-claro);
    padding: 10px;
    border-radius: 50px;
    font-family: var(--font-subtitulos-autoridad);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: -25px;
}

.suscripcion-widget .wpcf7-submit:hover {
    background-color: transparent;
    color: var(--color-primario-accion);
}

/* --- Mensajes de Respuesta (Sin cambios) --- */
.suscripcion-widget .wpcf7-response-output {
    margin: 1rem auto 0;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 700;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem;
    border-width: 1px;
    border-style: solid;
}
.suscripcion-widget form.sent .wpcf7-response-output {
    background-color: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.4);
    color: #c8e6c9;
}
.suscripcion-widget form.invalid .wpcf7-response-output,
.suscripcion-widget form.unaccepted .wpcf7-response-output,
.suscripcion-widget form.spam .wpcf7-response-output {
    background-color: rgba(220, 53, 69, 0.15);
    border-color: rgba(220, 53, 69, 0.4);
    color: #f8d7da;
}


/* ======================================================================== */
/* --- 27. PÁGINA: LA FONDOTECA (V4.0 - REFACTORIZADO Y UNIFICADO) --- */
/* ======================================================================== */

/* --- 27a. Hero --- */
/* --- 27a. Hero --- */
.fondoteca-hero {
    min-height: 100vh;
    display: flex;
    align-items: flex-start; /* Correcto: Alinea el contenido en la parte superior del contenedor flex. */
    justify-content: center;
    text-align: center;
    padding-top: 5vh;      /* Correcto: Empuja el contenido hacia abajo desde el borde superior, dejando al panda visible. */
    box-sizing: border-box;
}

.fondoteca-hero-title {
    font-family: var(--font-titulares-accion);
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin-bottom: 0.5rem; /* Mantenemos tu ajuste de margen reducido. */
}

.fondoteca-hero-subtitle {
    font-family: var(--font-cuerpo-principal);
    font-size: 1.2rem;
    color: #eee;
    max-width: 600px;
    margin: 0 auto; /* Correcto: Cero margen vertical. */
}

/* --- 27b. Estructura General de Sección y Cuadrícula --- */
.fondoteca-section {
    padding: 4rem 0;
}
.fondoteca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    transition: opacity 0.3s ease-in-out;
}

/* --- 27c. Tarjeta de Paisajes (Fondos de Pantalla) --- */
.paisaje-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    cursor: pointer;
}
.paisaje-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.paisaje-card:hover img {
    transform: scale(1.05);
}
.paisaje-card-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(10, 20, 25, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.paisaje-card:hover .paisaje-card-overlay {
    opacity: 1;
}
.paisaje-card-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transform: translateY(20px);
    transition: transform 0.4s ease 0.1s;
}
.paisaje-card:hover .paisaje-card-actions {
    transform: translateY(0);
}
.descarga-btn {
    color: #fff;
    background-color: var(--color-primario-accion);
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid var(--color-primario-accion);
    transition: all 0.3s ease;
    text-align: center;
}
.descarga-btn:hover {
    background-color: transparent;
    color: #fff;
}

/* --- 27d. Tarjeta de Píldoras de Sabiduría (CON EFECTO MONTADO) --- */
.pildoras-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.pildora-card-v2 {
    background-color: #2c2c2c;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- CAMBIOS APLICADOS AQUÍ --- */
.pildora-personaje {
    text-align: center;
    padding-top: 1.5rem;
    position: relative;   /* Añadido: Para controlar el apilamiento */
    z-index: 2;           /* Añadido: Asegura que el panda esté por encima */
    margin-bottom: -25px; /* Añadido: La clave del efecto de solapamiento */
}
.pildora-personaje img {
    height: 120px;
    width: auto;
}

/* --- Y CAMBIOS APLICADOS AQUÍ --- */
.pildora-contenido {
    padding: 0 1.5rem 1.5rem 1.5rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    position: relative;   /* Añadido: Para controlar el apilamiento */
    z-index: 1;           /* Añadido: Asegura que el contenido esté por debajo */
}

/* El resto de estilos de la píldora no necesitan cambios */
.pildora-cita {
    margin: 0;
    padding: 1.5rem;
    border-left: 4px solid var(--color-primario-accion);
    background-color: #383838;
    border-radius: 8px;
    font-family: var(--font-bitacora-body);
    font-size: 1.1rem;
    font-style: italic;
    color: #ccc;
    width: 100%;
}
.pildora-cita footer {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-weight: 700;
    color: var(--color-primario-accion);
}
.pildora-share-buttons {
    padding: 0.8rem 1.5rem 1.5rem 1.5rem;
    margin-top: auto;
}

/* --- 27e. Botón de Compartir Unificado (Píldoras y Modal) --- */
.share-btn-native,
.widget-modal-trigger {
    width: 100%;
    background-color: var(--color-primario-accion);
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 50px;
    font-family: var(--font-subtitulos-autoridad);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
.share-btn-native:hover:not(:disabled) {
    background-color: #00838f;
    transform: scale(1.02);
}
.share-btn-native:disabled {
    background-color: #555;
    cursor: wait;
}

/* --- 27f. Paginación --- */
.fondoteca-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
}
.bg-dark .fondoteca-pagination {
    border-top-color: rgba(255,255,255,0.1);
}
.pagination-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.bg-dark .pagination-btn {
    background-color: #333;
    border-color: #555;
    color: #ccc;
}
.pagination-btn:hover:not(:disabled) {
    background-color: var(--color-primario-accion);
    color: #fff;
    border-color: var(--color-primario-accion);
}
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pagination-info {
    font-weight: 700;
    color: #555;
}
.bg-dark .pagination-info {
    color: #aaa;
}

/* ======================================================================== */
/* --- 28. FONDOTECA: MODAL DE VISTA PREVIA Y DESCARGA --- */
/* ======================================================================== */
.pildora-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(10, 20, 25, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.pildora-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}
.pildora-modal-content {
    position: relative;
    width: 100%;
    max-width: 450px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.pildora-modal-overlay.is-visible .pildora-modal-content {
    transform: scale(1);
}
#pildora-capture-area {
    background-color: #2c2c2c;
    border-radius: 12px;
    padding: 2rem;
    color: #ccc;
    font-family: var(--font-bitacora-body);
}
.modal-watermark {
    text-align: center;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-cuerpo-principal);
    font-size: 0.9rem;
}
.modal-actions {
    margin-top: 1.5rem;
    text-align: center;
}
.modal-close-button {
    position: absolute;
    top: -15px; right: -15px;
    width: 40px; height: 40px;
    background: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.8rem;
    color: #333;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.modal-close-button:hover {
    transform: rotate(90deg);
}



/* ======================================================================== */
/* --- 29. PÁGINA: BITÁCORA V2 (DASHBOARD DE ENTRENAMIENTO) --- */
/* ======================================================================== */


.bitacora-content-wrapper {
    max-width: 900px; /* Ancho máximo del contenido */
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente para legibilidad */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 2rem 3rem; /* Espacio interno generoso */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
}

/* --- 29a. Contenedor y Header --- */
.bitacora-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #555;
    margin-top: -1.5rem;
    margin-bottom: 2rem;
}
.practicante-info {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background-color: rgba(0,0,0,0.03);
    border-radius: 8px;
    margin-bottom: 2rem;
}
.info-item {
    font-family: var(--font-bitacora-body);
    font-size: 1.1rem;
}

/* --- 29b. Navegación de Pestañas (El Interruptor) --- */
.bitacora-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid #ddd;
}
.bitacora-tab {
    font-family: var(--font-bitacora-heading);
    font-size: 1.5rem;
    padding: 10px 30px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #888;
    position: relative;
    top: 2px;
    border-bottom: 4px solid transparent;
    transition: all 0.3s ease;
}
.bitacora-tab:hover {
    color: #333;
}
.bitacora-tab.active {
    color: var(--color-accent-bitacora);
    border-bottom-color: var(--color-accent-bitacora);
}

/* --- 29c. Lógica de Visibilidad de Contenido de Pestañas --- */
.bitacora-tab-content {
    display: none; /* Oculto por defecto */
    animation: fadeInContent 0.5s ease forwards;
}
.bitacora-tab-content.active {
    display: block; /* Visible cuando está activo */
}

/* --- 29d. Tarjeta de Tarea Diaria --- */
.tarea-diaria-card {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0,0,0,0.1);
    border-left: 5px solid var(--color-primario-accion);
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
/* Efecto de resaltado para el anclaje */
.tarea-diaria-card.highlight {
    animation: highlight-card 2.5s ease-out;
}
@keyframes highlight-card {
    0% { box-shadow: 0 0 0 0 rgba(0, 184, 212, 0.7); }
    50% { box-shadow: 0 0 0 15px rgba(0, 184, 212, 0); }
    100% { box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
}
.tarea-diaria-card h3 {
    margin-top: 0;
    font-size: 1.8rem;
}
.tarea-contexto {
    font-style: italic;
    color: #555;
    margin-top: -1rem;
    margin-bottom: 1.5rem;
}

/* --- 29e. Feedback de Guardado --- */
.guardado-feedback {
    text-align: center;
    margin-top: 1rem;
    padding: 10px;
    border-radius: 5px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.guardado-feedback.show {
    opacity: 1;
}
.guardado-feedback.success {
    background-color: var(--color-verde-translucido);
    color: #155724;
}
.guardado-feedback.error {
    background-color: var(--color-rojo-translucido);
    color: #721c24;
}
/* --- 29f. Títulos y Fuentes Específicas --- */
.bitacora-content-wrapper h1,
.bitacora-content-wrapper h2,
.bitacora-content-wrapper h3 {
    font-family: var(--font-bitacora-heading);
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.bitacora-content-wrapper h1 {
    text-align: center;
    font-size: 3rem;
}
.bitacora-content-wrapper p,
.bitacora-content-wrapper label,
.bitacora-content-wrapper input,
.bitacora-content-wrapper textarea {
    font-family: var(--font-bitacora-body);
}

/* --- 29g. Campos de Formulario (V3 - ESTILO ARTESANAL DEFINITIVO) --- */
.bitacora-content-wrapper .bitacora-form .form-group {
    margin-bottom: 1.5rem;
}

.bitacora-content-wrapper .bitacora-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 1.1rem;
    color: #4a4a4a;
}

/* --- La Regla Maestra para TODOS los campos de texto --- */
.bitacora-content-wrapper .form-group input[type="text"],
.bitacora-content-wrapper .form-group textarea {
    width: 100%;
    padding: 12px; /* Padding en todos los lados para un aspecto de "caja" */
    box-sizing: border-box; /* ¡Crucial para que el padding no rompa el layout! */
    font-family: var(--font-bitacora-body);
    font-size: 1.1rem;
    color: var(--color-texto-principal);
    background-color: rgba(0, 0, 0, 0.02) !important; /* Fondo casi imperceptible */
    border: 2px solid transparent !important; /* Sin borde visible por defecto */
    border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important; /* Solo el borde inferior es visible */
    border-radius: 4px 4px 0 0 !important; /* Redondeo sutil solo en las esquinas superiores */
    transition: all 0.3s ease;
    box-shadow: none !important;
}

/* --- El efecto :focus que le da vida --- */
.bitacora-content-wrapper .form-group input[type="text"]:focus,
.bitacora-content-wrapper .form-group textarea:focus {
    outline: none;
    background-color: #fff !important;
    border-bottom-color: var(--color-accent-bitacora) !important;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,0.2) !important;
    transform: translateY(-2px);
}

/* --- Estilo para el texto de placeholder --- */
.bitacora-content-wrapper .form-group input[type="text"]::placeholder,
.bitacora-content-wrapper .form-group textarea::placeholder {
    color: #aaa;
    font-style: italic;
}

.bitacora-content-wrapper .form-group textarea {
    resize: vertical; /* Se mantiene */
    min-height: 80px; /* Altura mínima para que no sea tan pequeño */
}

/* --- 29i. Botón de Guardado del Formulario --- */
.bitacora-footer {
    text-align: center;
    margin-top: 1rem;
    padding-top: 2rem;
    border-top: 1px dashed #ccc;
}
.bitacora-footer button {
    font-family: var(--font-bitacora-heading);
    font-size: 1.5rem;
    color: var(--color-texto-claro);
    background-color: var(--color-fondo-oscuro);
    border: 2px solid var(--color-fondo-oscuro);
    padding: 1rem 2.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border-radius: 50px;
}
.bitacora-footer button:hover {
    background-color: var(--color-accent-bitacora);
    border-color: var(--color-accent-bitacora);
    color: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
    transform: translateY(-2px);
}
/* --- 29h. Layout de Columnas del Plan Semanal --- */
.fase {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px dashed #ccc;
}
.fase:last-of-type {
    border-bottom: none;
}
.column-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media(min-width: 768px) {
    .column-layout {
        grid-template-columns: 1fr 1fr;
    }
}
.columna {
    padding: 1.5rem;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}
.columna h3 {
    text-align: center;
    margin-top: 0;
}
.columna--roja {
    background-color: var(--color-rojo-translucido);
    border-left: 4px solid var(--color-rojo-borde);
}
.columna--verde {
    background-color: var(--color-verde-translucido);
    border-left: 4px solid var(--color-verde-borde);
}
.instruccion {
    font-size: 1rem;
    font-style: italic;
    color: #666;
    margin-top: -0.8rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

/* --- 29j. Estilos para Selectores (select) --- */
#herramienta-emboscada1, #herramienta-emboscada2, #herramienta-emboscada3 {
    /* --- Apariencia y Layout --- */
    appearance: none; /* La clave para poder estilizarlo */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 12px 40px 12px 15px; /* Padding: 40px a la derecha para la flecha */
    box-sizing: border-box;
    
    /* --- Estética Visual --- */
    background-color: rgba(0, 0, 0, 0.03) !important;
    border: 2px solid rgba(0,0,0,0.1) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    
    /* --- Tipografía --- */
    font-family: var(--font-bitacora-body);
    font-size: 1.1rem;
    color: var(--color-texto-principal);
    cursor: pointer;
    
    /* --- Transiciones --- */
    transition: all 0.3s ease;

    /* --- El truco de la flecha personalizada --- */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238d6e63%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
}



/* --- Estilos para los checkboxes --- */
.compromiso-dias {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1rem;
}
.dia-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dia-check label {
    font-family: var(--font-bitacora-heading);
    font-size: 1.2rem;
    cursor: pointer;
    margin-bottom: 0;
}
.dia-check input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
    cursor: pointer;
    accent-color: var(--color-accent-bitacora);
}

/* --- 29k. NUEVO: INDICADOR DE AUTOGUARDADO --- */
.bitacora-save-status {
    text-align: right;
    margin-bottom: 1.5rem;
    height: 20px; /* Altura fija para evitar saltos en el layout */
}
#auto-save-feedback {
    font-family: var(--font-bitacora-body);
    font-style: italic;
    color: #888;
    transition: all 0.4s ease;
}
#auto-save-feedback.saving {
    color: var(--color-accent-bitacora);
    font-weight: bold;
}
#auto-save-feedback.success {
    color: #155724;
    font-weight: bold;
}
#auto-save-feedback.error {
    color: #721c24;
    font-weight: bold;
}




/* --- 29k. NUEVO: NOTIFICACIÓN TOAST DE AUTOGUARDADO --- */
.bitacora-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: var(--font-bitacora-body);
    font-weight: bold;
    color: #fff;
    z-index: 9999;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    
    /* Estado inicial (oculto) */
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bitacora-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.toast-icon {
    font-size: 1.2rem;
}

/* Estado: Guardando */
.bitacora-toast.saving {
    background-color: var(--color-accent-bitacora);
}
.bitacora-toast.saving .toast-icon::before {
    content: '…'; /* Tres puntos suspensivos */
    animation: saving-dots 1.4s infinite;
}
@keyframes saving-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60% { content: '...'; }
  80%, 100% { content: '...'; }
}


/* Estado: Éxito */
.bitacora-toast.success {
    background-color: #28a745;
}
.bitacora-toast.success .toast-icon::before {
    content: '✓';
}

/* Estado: Error */
.bitacora-toast.error {
    background-color: #dc3545;
}
.bitacora-toast.error .toast-icon::before {
    content: '!';
}

/* --- Media Query para Móvil --- */
@media (max-width: 768px) {
    .bitacora-toast {
        left: 20px;
        right: 20px;
        bottom: 20px;
        justify-content: center;
    }
}

/* --- 29H. BITÁCORA ahora con hero --- */

/* --- Hero --- */
.bitacora-hero {
    min-height: 85vh; /* Ocupa gran parte de la pantalla inicial */
    display: flex;
    flex-direction: column;
    
    /* --- CAMBIOS CLAVE AQUÍ --- */
    justify-content: flex-start; /* 1. Alinea el contenido al inicio (arriba) */
    padding-top: 60vh;           /* 2. Empuja el contenido hacia abajo un 30% de la altura de la pantalla */
    /* --- FIN DE CAMBIOS --- */

    align-items: center;
    text-align: center;
    padding-left: 2rem; /* Mantenemos el padding lateral */
    padding-right: 2rem;
    box-sizing: border-box;
}

.bitacora-hero-title {
    font-family: var(--font-titulares-accion);
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    margin: 0;
}

.bitacora-hero-subtitle {
    font-family: var(--font-cuerpo-principal);
    font-size: 1.3rem;
    color: #eee;
    margin: 1rem auto 0;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7);
}

/* --- Indicador de Scroll --- */
.scroll-down-indicator {
    margin-top: 3rem;
    font-size: 2.5rem;
    color: rgba(255,255,255,0.7);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    60% { transform: translateY(-10px); }
}

/* --- Contenido que "flota" sobre el fondo (VERSIÓN CORREGIDA) --- */
.bitacora-page-wrapper {
    position: relative;
    z-index: 2; 
    margin-top: -30vh;
    padding-bottom: 0; /* <-- CAMBIO: De 5rem a 0 */
    
    background-image: url('images/fondo-bitacora.webp');
    background-color: #e9e4d9;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}
/* --- NUEVA REGLA PARA COMPENSAR EL ESPACIO --- */
.bitacora-container {
    /* LA SOLUCIÓN: Este padding empuja todo el contenido hacia abajo, 
       compensando el margin-top negativo de su padre y revelando el header. */
    padding-top: 20rem;
    padding-bottom: 5rem; /* Añadimos el padding inferior que quitamos antes */
}

/* --- Ajuste al Header Integrado (sin H1) --- */
.bitacora-header-integrado .practicante-info {
    margin-top: 2rem;
}

/* --- Media Queries --- */
@media (max-width: 768px) {
    .bitacora-hero { min-height: 70vh; }
    .bitacora-hero-title { font-size: 2.5rem; }
    .bitacora-hero-subtitle { font-size: 1.1rem; }
    .bitacora-page-wrapper { margin-top: -20vh; }
}

/* ======================================================================== */
/* --- 30. ESTILOS PARA LA SALA DE CINE DE VIMEO --- */
/* ======================================================================== */

.vimeo-sala-de-cine {
    position: relative;
    padding-top: 56.25%; /* El truco para el aspect-ratio 16:9 (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 10px; /* Bordes redondeados para un look premium */
    max-width: 100%; /* Asegura que no se desborde */
    margin: 0 auto; /* Centra el contenedor */
}

.vimeo-sala-de-cine iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Quitamos cualquier borde que el iframe pueda tener */
}


/* ======================================================================== */
/* --- 32. Titulo de la leccion  --- */
/* ======================================================================== */

.lesson-focus-card-v2 {
    position: relative; /* Necesario para la barra de color */
    background-color: #fdfdfb; /* Un blanco más cálido, como papel */
    
    /* Textura sutil de papel */
    background-image: url('images/fondo-bitacora.webp');
    background-blend-mode: overlay;
    background-size: cover;
    
    padding: 2rem;
    margin-bottom: 3rem;
    
    /* Sombras suaves y orgánicas */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.07);
    
    text-align: center;
    border-radius: 12px;
    border: 1px solid #f0ede8;
}

/* La barra de color superior, como en el Arsenal */
.lesson-focus-card-v2::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 16px;
    border-radius: 10px;
    background-color: var(--accent-color); /* Leemos la variable de PHP */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.lesson-focus-card-v2 h3 {
    font-family: var( --font-cuerpo-principal);
    font-size: 2.2rem;
    color: var(--color-texto-principal);
    margin: 0;
    line-height: 1.3;
    padding-top: 10px; /* Espacio para que no se pegue a la barra */
}

/* Ajustes para móvil */
@media (max-width: 768px) {
    .lesson-focus-card-v2 h3 {
        font-size: 1.8rem;
    }
    .lesson-focus-card-v2 {
        padding: 1.5rem;
    }
}


/* ======================================================================== */
/* --- 33. ANIMACION para hero y aplicable a cualquier elemento--- */
/* ======================================================================== */

/* --- A. Definición de la Animación (YA EXISTE EN TU CSS) --- */
/* No necesitas volver a añadir esto, es solo para referencia. */
@keyframes fadeInContent_up {
    from {
        opacity: 0;
        /*transform: translateY(20px);*/
    }
    to {
        opacity: 1;
        /*transform: translateY(0);*/
    }
}

/* --- B. NUEVA Clase de Utilidad Reutilizable --- */
/* Esta es la clase principal que aplicarás a tus divs. */
.fade_in_up {
    opacity: 0; /* Estado inicial crucial */
    animation-name: fadeInContent_up;
    animation-duration: 1.5s; /* Una duración por defecto agradable */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards; /* Mantiene el estado final de la animación */
}

/* --- C. (OPCIONAL PERO RECOMENDADO) Clases Modificadoras para el Delay --- */
/* Úsalas para crear efectos de entrada secuenciales. */
.delay_1 { animation-delay: 0.2s; }
.delay_2 { animation-delay: 0.4s; }
.delay_3 { animation-delay: 0.6s; }
.delay_4 { animation-delay: 0.8s; }

/* ======================================================================== */
/* --- PÁGINA: CONTACTO (PUNTO DE ENCUENTRO) --- */
/* ======================================================================== */
/* --- Hero del Blog --- */
.contacto-hero {
    /* 1. Mantenemos flexbox, pero ahora lo usaremos para centrar en una columna. */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente el contenido */
    padding: 60vh 20px 60vh 20px;
    
    text-align: center; /* Mantenemos el centrado horizontal del texto */
    box-sizing: border-box; /* Buena práctica para que el padding se incluya en el cálculo total */
}
.contacto-hero-title {
    font-family: var(--font-titulares-accion);
    font-size: 3.5rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7); /* Aumentamos un poco la sombra para máxima legibilidad */
    line-height: 1.2; /* Damos un poco más de aire entre líneas si el título se rompe */
    margin: 0; /* Reseteamos el margen del h1 */
}
.contacto-hero-subtitle {
    font-family: var(--font-cuerpo-principal);
    font-size: 1.2rem;
    color: #eee;
    max-width: 600px;
    margin: 1rem auto 0;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7); /* Añadimos sombra también al subtítulo */
}


.formulario-contacto .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.formulario-contacto .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.formulario-contacto label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #555;
}

/* Estilo unificado para todos los campos del formulario */
.formulario-contacto .wpcf7-form-control {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: var(--font-cuerpo-principal);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}

.formulario-contacto .wpcf7-form-control:focus {
    outline: none;
    border-color: var(--color-primario-accion);
    box-shadow: 0 0 0 3px rgba(0, 184, 212, 0.2);
}

/* Estilo específico para el select */
.formulario-contacto select.wpcf7-form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300b8d4%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 12px auto;
}

.formulario-contacto .form-submit {
    text-align: center;
    margin-top: 1rem;
}

.formulario-contacto input[type="submit"].wpcf7-submit {
    display: inline-block;
    border: 2px solid var(--color-primario-accion);
    background-color: var(--color-primario-accion);
    color: var(--color-texto-claro);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    font-family: var(--font-subtitulos-autoridad);
    cursor: pointer;
    width: auto;
}

.formulario-contacto input[type="submit"].wpcf7-submit:hover {
    background-color: transparent;
    color: var(--color-primario-accion);
}


/* ======================================================================== */
/* --- 35. SANTUARIO DEL CARRITO (PAGE-CARRITO.PHP) --- */
/* ======================================================================== */

/* --- 35a. Hero y Estructura General --- */
.carrito-hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    text-align: center;
}

/* --- 35b. Estilos Generales para el Contenido del Carrito --- */
/* Le decimos a WooCommerce que use nuestra fuente y colores */
.woocommerce-cart .woocommerce {
    font-family: var(--font-cuerpo-principal);
}

/* --- 35c. La Tabla Principal de Productos --- */
.woocommerce-cart table.shop_table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    overflow: hidden;
}

.woocommerce-cart table.shop_table thead {
    display: none; /* Ocultamos los títulos genéricos de la tabla */
}

.woocommerce-cart table.shop_table tbody tr.cart_item {
    border-bottom: 1px solid #f0f0f0;
}
.woocommerce-cart table.shop_table tbody tr.cart_item:last-child {
    border-bottom: none;
}

.woocommerce-cart table.shop_table .product-thumbnail img {
    width: 100px;
    height: auto;
    border-radius: 8px;
}

.woocommerce-cart table.shop_table .product-name a {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.3rem;
    color: var(--color-texto-principal);
    text-decoration: none;
    font-weight: 700;
}

/* Estilos para el precio y la descripción del producto */
.woocommerce-cart table.shop_table .product-price .amount,
.woocommerce-cart table.shop_table .product-subtotal .amount {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-texto-principal);
}

.woocommerce-cart table.shop_table .product-remove a.remove {
    font-size: 1.5rem !important;
    color: #aaa !important;
    text-decoration: none !important;
    font-weight: bold;
    transition: color 0.3s ease;
}
.woocommerce-cart table.shop_table .product-remove a.remove:hover {
    color: var(--color-acento-energia) !important;
    background: none !important;
}

/* --- 35d. El Bloque de Acciones (Cupones y Actualizar) --- */
.woocommerce-cart .actions {
    padding: 1rem 0;
}
.woocommerce-cart .actions .coupon {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.woocommerce-cart .actions .coupon .input-text {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 50px;
    font-size: 1rem;
}
.woocommerce-cart .actions .button {
    background-color: #f0f0f0 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    padding: 12px 25px !important;
    transition: all 0.3s ease;
}
.woocommerce-cart .actions .button:hover {
    background-color: var(--color-fondo-oscuro) !important;
    color: #fff !important;
    border-color: var(--color-fondo-oscuro) !important;
}

/* --- 35e. La Caja de Totales --- */
.woocommerce-cart .cart-collaterals {
    margin-top: 3rem;
    width: 100%;
}
.woocommerce-cart .cart_totals {
    width: 100%;
    max-width: 450px; /* Ancho máximo de la caja */
    margin-left: auto; /* La empuja a la derecha */
    background-color: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.06);
    border: 1px solid #e5e5e5;
}
.woocommerce-cart .cart_totals h2 {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.8rem;
    margin-top: 0;
}
.woocommerce-cart .cart_totals table.shop_table {
    background: none;
    box-shadow: none;
}
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    border: none;
    padding: 10px 0;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
    font-size: 1.3rem;
    font-weight: 700;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

/* --- 35f. El Botón Final de Compra --- */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    /* Reutilizamos completamente el estilo de nuestro CTA principal */
    display: block !important;
    text-align: center;
    border: 2px solid var(--color-primario-accion) !important;
    background-color: var(--color-primario-accion) !important;
    color: var(--color-texto-claro) !important;
    padding: 15px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    transition: all 0.3s ease !important;
    font-family: var(--font-subtitulos-autoridad) !important;
    animation: aura-pulsante 2s ease-in-out infinite;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: transparent !important;
    color: var(--color-primario-accion) !important;
}

/* --- 35g. Responsividad para Móviles --- */
@media (max-width: 768px) {
    .woocommerce-cart .cart_totals {
        max-width: 100%;
        margin-left: 0;
    }
    .woocommerce-cart table.shop_table .product-thumbnail {
        display: none; /* Ocultamos la imagen en móvil para ahorrar espacio */
    }
}
/* --- 36. HOTFIX: AMPLIAR CAMPO DE CUPÓN EN EL CARRITO --- */
/* 1. Hacemos que la fila de formulario sea un contenedor flexible */
.woocommerce-cart .actions .coupon {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* 2. Le damos todo el espacio disponible al input, forzándolo a estirarse */
.woocommerce-cart .actions .coupon .input-text {
    flex-grow: 1; /* Permite que el input ocupe el espacio sobrante */
    min-width: 250px; /* Aseguramos un mínimo */
    width: auto; /* Anulamos cualquier ancho fijo anterior */
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

/* 3. Evitamos que el botón se encoja */
.woocommerce-cart .actions .coupon .button {
    flex-shrink: 0; /* No se encoge */
}
/* ======================================================================== */
/* --- 38. SANTUARIO DE LA TIENDA (PAGE-TIENDA.PHP) --- */
/* ======================================================================== */

.tienda-contenido-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto (mobile-first) */
    gap: 3rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.tienda-producto-imagen img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.tienda-producto-detalles .titulo-producto {
    font-family: var(--font-titulares-accion);
    font-size: 2.8rem;
    margin: 0 0 1rem 0;
}

.tienda-producto-detalles .descripcion-producto {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.tienda-producto-detalles h3 {
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
}

.incluye-lista {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.incluye-lista li {
    font-size: 1.1rem;
    padding-left: 2em;
    text-indent: -2em;
    margin-bottom: 0.8rem;
}

.incluye-lista li::before {
    content: '✓';
    color: var(--color-primario-accion);
    font-weight: bold;
    margin-right: 1em;
}

.tienda-producto-detalles .price-container-final {
    margin-top: 2.5rem;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
}

/* --- Media Query para Escritorio --- */
@media (min-width: 992px) {
    .tienda-contenido-wrapper {
        grid-template-columns: 1fr 1.2fr; /* Columna de texto un poco más ancha */
        gap: 5rem;
    }
}
Z/* --- 39. REFACTORIZACIÓN DEL CONTENEDOR DE PRECIOS EN LA TIENDA --- */

/* 1. Definimos el contenedor como una columna flexible y centrada */
.tienda-producto-detalles .price-container-final {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. Reseteamos los márgenes de los elementos de precio para tomar control total */
.tienda-producto-detalles .price-container-final .price-label,
.tienda-producto-detalles .price-container-final .price-old-final,
.tienda-producto-detalles .price-container-final .price-new-final {
    margin: 0;
}

/* 3. Añadimos un espacio superior sutil al precio principal para separarlo */
.tienda-producto-detalles .price-container-final .price-new-final {
    margin-top: 0.5rem; /* Pequeño espacio entre el label y el precio */
}

/* 4. Añadimos un espacio superior generoso al botón para crear jerarquía visual */
.tienda-producto-detalles .price-container-final .cta-principal {
    margin-top: 1.5rem;
}

/* ======================================================================== */
/* --- 39. ESTILOS PARA PAGE-BIENVENIDO.PHP --- */
/* ======================================================================== */

.bienvenida-layout {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto (mobile-first) */
    gap: 2.5rem;
    align-items: start; /* Alinea los elementos al inicio de la celda del grid */
}

/* En pantallas de más de 992px, activamos las dos columnas */
@media (min-width: 992px) {
    .bienvenida-layout {
        grid-template-columns: 1fr 1fr; /* Dos columnas de igual tamaño */
        gap: 4rem;
    }
}

/* --- SOLUCIÓN RESPONSIVE PARA EL FORMULARIO DE LOGIN --- */
/* Esta regla es clave para que la caja de login no se desborde en móviles */
.bienvenida-login-column .puerta-santuario-login-box {
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho total */
}
/* ======================================================================== */
/* --- 40. PULIDO FINAL PARA EL LOGIN DE BIENVENIDA --- */
/* ======================================================================== */

/* 1. Estilos para el nuevo header del login (Imagen + Título) */
.login-box-header {
    text-align: center;
    margin-bottom: 1rem; /* Aumentamos el espacio inferior */
}

.login-box-header img {
    height: 100px;
    width: auto;
    margin-bottom: 0.1rem;
}
/* ======================================================================== */
/* --- 41 - Ocultar Registro en Página de Bienvenida --- */
/* ======================================================================== */

/*
Este selector ahora apunta a la columna 'u-column2',
que contiene el formulario de registro, solo en la página con ID 443.
*/
.page-id-443 .u-column2 {
    display: none !important;
}

/*
Y este selector ahora apunta a la columna 'u-column1',
que contiene el formulario de login, para que ocupe todo el ancho.
*/
.page-id-443 .u-column1 {
    width: 100% !important;
    float: none !important;
}
/* ======================================================================== */
/* --- ARQUITECTURA "PUERTAS CLARAS" --- */
/* ======================================================================== */

/* --- En la Página de Registro (ID: 468), OCULTAMOS el login --- */
.page-id-552 .u-column1 { display: none !important; }
.page-id-552 .u-column2 { width: 100% !important; float: none !important; }

/* --- En la Página de Acceso (ID: 9), OCULTAMOS el registro --- */
/* Nota: Esto se aplica a la vista de "Puerta del Santuario" de la plantilla */
.page-id-9 .u-column2 { display: none !important; }
.page-id-9 .u-column1 { width: 100% !important; float: none !important; }


/* ======================================================================== */
/* --- ARQUITECTURA "DOBLE PUERTA" --- */
/* ======================================================================== */
.doble-puerta-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
}
.cta-secundario {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    font-family: var(--font-subtitulos-autoridad);
}
.cta-secundario:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}
@media (min-width: 768px) {
    .doble-puerta-cta {
        flex-direction: row;
        justify-content: center;
    }
}




/* ===================================================================== */
/* --- 42. ESTILOS BASE FRONT-PAGE (Tipografía y Reset) --- */
/* ===================================================================== */
.section-title { font-family: var(--font-subtitulos-autoridad); font-size: 2.2rem; text-align: center; margin: 0 0 1.5rem 0; font-weight: 700; line-height: 1.2; }
.section-intro { font-family: var(--font-cuerpo-principal); font-size: 1.1rem; text-align: center; max-width: 800px; margin: 0 auto 3rem; line-height: 1.6; color: #555; }
.bg-light { background-color: var(--color-fondo-gris); }
.bg-dark { background-color: var(--color-fondo-oscuro); color: #fff; }
.bg-white { background-color: #fff; }

/* Ajuste de color para textos en fondo oscuro */
.bg-dark .section-intro, .bg-dark p { color: #ccc; }
.bg-dark .section-title { color: #fff; }

/* ===================================================================== */
/* --- 1. BLOQUE HERO (IMPACTO VISUAL - VERSIÓN 3.1) --- */
.new-hero {
    position: relative;
    top: 50px;
    min-height: 90vh; /* Ocupa pantalla completa en móviles */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 110px 20px 60px 20px; /* Más padding arriba para el header */
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}

/* Fondo Absoluto (Soluciona el zoom de iOS) */
.new-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; z-index: 0;
    animation: slowZoom 20s infinite alternate; 
    will-change: transform;
}
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.1); } }

/* Overlay más agresivo para legibilidad */
.new-hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(10,20,30,0.5) 0%, rgba(10,20,30,0.9) 80%);
    z-index: 1;
}

.new-hero-content {
    position: relative; z-index: 2; width: 100%; max-width: 850px;
}

/* --- TITULAR DE IMPACTO --- */
.rotating-headline {
    font-family: var(--font-titulares-accion);
    font-size: 3rem; /* Grande en móvil */
    line-height: 1.1;
    margin-bottom: 2rem;
    text-shadow: 0 4px 20px rgba(0,0,0,0.9);
    display: flex; flex-direction: column; gap: 0.5rem;
}

.static-line { 
    font-size: 1.6rem; 
    font-weight: 400; 
    color: #fff; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    line-height: 1.3;
}

.text-underline {
    position: relative;
    font-weight: 900; /* Extra bold */
    color: #fff;
}
/* Subrayado rojo sutil para "NO vale" */
.text-underline::after {
    content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 8px;
    background-color: rgba(220, 53, 69, 0.8); z-index: -1; transform: skewX(-15deg);
}

.static-line-bottom { 
    font-size: 1.3rem; 
    color: #eee; 
    font-family: var(--font-cuerpo-principal);
    margin-top: 1.5rem; 
    font-weight: 400;
    line-height: 1.5;
}

/* --- ROTATOR DE PALABRAS --- */
.rotating-words-wrapper {
    height: 1.1em; /* Altura ajustada a la fuente */
    overflow: hidden;
    position: relative;
    display: block;
    margin-top: 0.5rem;
}

.rotating-word {
    display: block;
    height: 100%;
    /* Aumentamos a 10s para que sea legible (2s por palabra x 5 palabras) */
    animation: rotateWords 10s infinite; 
    color: #ff6f42; /* Naranja/Rojo de Alerta */
    font-weight: 700;
    text-transform: uppercase;
}

@keyframes rotateWords {
    0%, 16% { transform: translateY(0); }        /* Palabra 1 */
    20%, 36% { transform: translateY(-100%); }   /* Palabra 2 */
    40%, 56% { transform: translateY(-200%); }   /* Palabra 3 */
    60%, 76% { transform: translateY(-300%); }   /* Palabra 4 */
    80%, 96% { transform: translateY(-400%); }   /* Palabra 5 */
    100% { transform: translateY(0); }           /* Reset inmediato al inicio */
}

/* --- PROPOSICIÓN DE VALOR --- */
.hero-proposition {
    font-size: 1.1rem; color: #ddd; margin-bottom: 2rem; line-height: 1.6;
    background: rgba(255,255,255,0.1); padding: 15px; border-radius: 12px; 
    backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.1);
}

/* --- BADGES DE SEGURIDAD --- */
.hero-badges {
    display: flex; justify-content: center; gap: 15px; margin-top: 1.5rem;
    font-size: 0.85rem; color: rgba(255,255,255,0.8); font-weight: 600;
}

/* --- MEDIA QUERY ESCRITORIO --- */
@media (min-width: 768px) {
    .rotating-headline { font-size: 5.5rem; gap: 0.2rem; }
    .static-line { font-size: 2.2rem; display: inline-block; }
    .static-line br { display: none; } /* En escritorio todo en una línea */
    .static-line-bottom { font-size: 1.6rem; margin-top: 1rem; }
    .hero-proposition { font-size: 1.4rem; max-width: 700px; margin-left: auto; margin-right: auto; }
}

/* ===================================================================== */
/* --- 2. BLOQUE PROBLEMA (Dark Cards) --- */
.pain-points-section { padding: 4rem 0; }
.section-title-mobile { font-family: var(--font-subtitulos-autoridad); font-size: 2rem; text-align: center; margin-bottom: 3rem; font-weight: 700; }

.pain-grid { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }

.pain-item-dark {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex; flex-direction: row; align-items: center; gap: 1.5rem;
    width: 100%; max-width: 600px;
    text-align: left;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.pain-item-dark img { flex-shrink: 0; }
.pain-item-dark p { margin: 0; font-weight: 500; color: #eee; line-height: 1.4; font-size: 1.05rem; }

@media (min-width: 768px) {
    .pain-grid { flex-direction: row; justify-content: center; align-items: stretch; gap: 2rem; }
    .pain-item-dark { flex-direction: column; text-align: center; max-width: 300px; padding: 2.5rem 1.5rem; }
}

/* ===================================================================== */
/* --- 3. BLOQUE VSL (Video) --- */
.vsl-section { padding: 5rem 0; }
.vsl-header { margin-bottom: 3rem; }
.vsl-section .section-title { color: var(--color-primario-accion); }

.video-presentation-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    background-color: #000;
}

/* ===================================================================== */
/* --- 4. BLOQUE PRODUCTO (Slideshow + Temario) --- */
.product-breakdown { padding: 5rem 0; }
.product-header { text-align: center; margin-bottom: 3rem; }
.section-label { font-size: 0.9rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; display: block; margin-bottom: 1rem; color: var(--color-primario-accion); }

/* Logo del Producto */
.product-logo-wrapper { margin: 0 auto 1.5rem auto; max-width: 500px; padding: 0 20px; }
.product-main-logo { width: 100%; height: auto; animation: aura-pulsante 3s ease-in-out infinite; }

/* SLIDESHOW (Hard Cut - Sin Fade) - 13 Imágenes */
.product-slideshow-container {
    position: relative;
    width: 100%; max-width: 800px;
    aspect-ratio: 16 / 9;
    margin: 3rem auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    background-color: #000;
    border: 1px solid #333;
}

.slide-img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0;
    /* CAMBIO: 13s es el ciclo total (1 segundo por cada una de las 13 imágenes) */
    animation: showHide 13s infinite step-end; 
}

/* Tiempos del Slideshow (Delays escalonados) */
.slide-1  { animation-delay: 0s; }
.slide-2  { animation-delay: 1s; }
.slide-3  { animation-delay: 2s; }
.slide-4  { animation-delay: 3s; }
.slide-5  { animation-delay: 4s; }
.slide-6  { animation-delay: 5s; }
.slide-7  { animation-delay: 6s; }
.slide-8  { animation-delay: 7s; }
.slide-9  { animation-delay: 8s; }
.slide-10 { animation-delay: 9s; }
.slide-11 { animation-delay: 10s; }
.slide-12 { animation-delay: 11s; }
.slide-13 { animation-delay: 12s; }

@keyframes showHide {
    0% { opacity: 1; }
    /* CAMBIO: 100% dividido entre 13 imágenes = 7.69% */
    7.69% { opacity: 0; } 
    100% { opacity: 0; }
}

/* LISTA DE TEMARIO */
.curriculum-full-list {
    max-width: 800px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 1rem;
}

.curriculum-item-dark {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 1.2rem;
    display: flex; gap: 1.2rem; align-items: flex-start;
    transition: background-color 0.3s ease;
}
.curriculum-item-dark:hover { background-color: rgba(255,255,255,0.1); }

.day-number {
    font-family: var(--font-titulares-accion);
    font-size: 2rem; color: rgba(255,255,255,0.2);
    line-height: 1; min-width: 40px;
}
.day-content h3 {
    margin: 0 0 0.4rem 0; color: var(--color-primario-accion);
    font-family: var(--font-subtitulos-autoridad); font-size: 1.2rem;
}
.day-content p { margin: 0; color: #ccc; font-size: 0.95rem; line-height: 1.5; }

/* ===================================================================== */
/* --- 5. BLOQUE ARSENAL (Light Mode) --- */
.arsenal-stack { padding: 5rem 0; text-align: center; }
.arsenal-stack-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3rem; }

.stack-item-light {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.stack-item-light:hover { transform: translateY(-5px); }

.stack-img img { width: 100%; height: 200px; object-fit: cover; display: block; }
.stack-content { padding: 1.8rem; }
.stack-content h3 { color: var(--color-primario-accion); margin-top: 0; margin-bottom: 0.5rem; font-family: var(--font-subtitulos-autoridad); font-size: 1.4rem; }
.stack-content p { color: #555; margin-bottom: 0; font-size: 1rem; line-height: 1.6; }

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

/* ===================================================================== */
/* --- 6. BLOQUE AUTORIDAD --- */
.authority-bridge { padding: 5rem 0; }
.authority-flex {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 3rem;
}
.authority-text { text-align: left; }
.authority-text p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.authority-img img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 100%; height: auto; }
.btn-text-link { color: var(--color-primario-accion); font-weight: 700; text-decoration: none; font-size: 1.1rem; border-bottom: 2px solid transparent; transition: border-color 0.3s ease; }
.btn-text-link:hover { border-bottom-color: var(--color-primario-accion); }

@media (min-width: 768px) {
    .authority-flex { flex-direction: row; gap: 5rem; }
    .authority-text { flex: 1; }
    .authority-img { flex: 1; }
}

/* ===================================================================== */
/* --- 7. BLOQUE TESTIMONIOS (Social Proof) --- */
.social-proof { padding: 5rem 0; }
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}
.testi-card {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 12px;
    border-left: 5px solid var(--color-primario-accion);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.testi-quote { font-style: italic; font-size: 1.1rem; color: #444; line-height: 1.6; margin-bottom: 1.5rem; }
.testi-author strong { display: block; color: #333; font-family: var(--font-subtitulos-autoridad); }
.testi-author span { font-size: 0.9rem; color: #777; }

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

/* ===================================================================== */
/* --- 8. BLOQUE OFERTA FINAL --- */
.final-offer { padding: 6rem 0; text-align: center; position: relative; }
.offer-container { max-width: 650px; position: relative; z-index: 2; }
.offer-title { font-family: var(--font-titulares-accion); font-size: 2.5rem; margin-bottom: 2.5rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0,0,0,0.5); color: #fff; }

.offer-box {
    background: rgba(255,255,255,0.98);
    color: #333;
    padding: 3rem 2rem;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.offer-list { list-style: none; padding: 0; margin: 0 0 2.5rem 0; text-align: left; display: inline-block; width: 100%; }
.offer-list li { margin-bottom: 1rem; font-size: 1.1rem; border-bottom: 1px dashed #ddd; padding-bottom: 0.8rem; }
.offer-list li:last-child { border-bottom: none; }
.offer-list li span { color: #28a745; font-weight: 900; margin-right: 10px; font-size: 1.2rem; }

.price-stack { margin-bottom: 2rem; }
.price-old { text-decoration: line-through; color: #999; font-size: 1.5rem; }
.price-main { font-size: 4rem; font-weight: 700; color: var(--color-primario-accion); line-height: 1; font-family: var(--font-titulares-accion); }

.guarantee-text { color: #666; margin-top: 1.5rem; line-height: 1.4; font-size: 0.95rem; }

/* Footer de Pago Seguro */
.secure-payment-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid #f0f0f0;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.secure-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 700; color: #777;
    text-transform: uppercase; letter-spacing: 1px;
}
.secure-label svg { color: #28a745; }

.payment-icons {
    display: flex; gap: 15px; justify-content: center; align-items: center;
}
.payment-icons img {
    height: 25px; width: auto;
    filter: grayscale(100%); opacity: 0.6;
    transition: all 0.3s ease;
}
.payment-icons img:hover { filter: grayscale(0); opacity: 1; }


/* ======================================================================== */
/* --- 43. PAGINACIÓN DEL BLOG (NATIVA WP) --- */
/* ======================================================================== */

.ep-pagination-wrapper {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
}

/* Ocultar el título "Navegación de reflexiones" para videntes, mantener para screen readers */
.ep-pagination h2.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.ep-pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.ep-pagination .page-numbers {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    color: #555;
    transition: all 0.3s ease;
    font-family: var(--font-subtitulos-autoridad);
    font-size: 1rem;
}

.ep-pagination .page-numbers:hover {
    background-color: var(--color-primario-accion);
    color: #fff;
    border-color: var(--color-primario-accion);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 184, 212, 0.3);
}

/* Estilo para la página actual */
.ep-pagination .page-numbers.current {
    background-color: var(--color-primario-accion);
    color: #fff;
    border-color: var(--color-primario-accion);
    cursor: default;
    pointer-events: none; /* Deshabilitar clic en la actual */
}

/* Estilo para los puntos suspensivos (...) */
.ep-pagination .page-numbers.dots {
    background-color: transparent;
    border: none;
    padding: 0 10px;
    cursor: default;
}
.ep-pagination .page-numbers.dots:hover {
    background-color: transparent;
    color: #555;
    transform: none;
    box-shadow: none;
}