/* 
    ===================================================================================
    AJUSTES GLOBALES DE DISEÑO
    ===================================================================================
*/

/* 
    CLIENTE: Aquí aplicamos un margen a la izquierda de toda la página ('padding-left').
    ¿Por qué? Porque tenemos un menú de navegación flotante a la izquierda que ocupa espacio.
    Si no ponemos esto, el menú taparía parte del contenido.
*/
body {
    padding-left: 70px;
}

/* 
    CLIENTE: En pantallas pequeñas (móviles y tablets), el menú cambia de posición o diseño,
    así que quitamos ese margen izquierdo para aprovechar todo el ancho de la pantalla.
*/
@media (max-width: 768px) {
    body {
        padding-left: 0;
    }
}

/* 
    ===================================================================================
    SECCIÓN DE PORTADA (HERO) - PÁGINA DE ADULTOS
    ===================================================================================
*/

/* 
    1. CONTENEDOR PRINCIPAL
    -----------------------
    Altura reducida a 450px (smaller than index)
*/
.hero-section-2 {
    position: relative;
    width: 100%;
    height: 450px;
    /* Reduced height from 60vh/500px */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
}

/* 
    2. IMAGEN DE FONDO
    ------------------
*/
.hero-section-2 .video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-section-2 .video-wrapper-2 {
    width: 100%;
    height: 100%;
}

.hero-section-2 .video-wrapper-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.5;
    /* Darker overlay for better text legibility */
}

/* 
   The background is handled by the <img> tag in HTML for each specific page. 
   We removed the static CSS background here to prevent overlap when opacity is used.
*/


/* 
    3. MARCA DE AGUA (LOGO EN ESQUINA)
    ----------------------------------
*/
.hero-section-2 .video-brand-text-container {
    position: absolute;
    top: 30px;
    left: 40px;
    display: none;
    /* Hidden to avoid overlap with floating main logo */
    flex-direction: column;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-section-2 .video-brand-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-section-2 .video-brand-location {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: #ffffff;
    letter-spacing: 3px;
    margin-top: -2px;
}

/* 
    4. TEXTO CENTRAL
    ------------------------
*/
.hero-section-2 .content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    text-align: center;
    color: white;
    padding: 0 20px;
    width: 100%;
    height: 100%;
    /* Removed max-width constraint to allow full-width shader */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    /* Explicit shader background */
}

/* Título: JIU-JITSU */
.hero-section-2 .jiu-jitsu-title-2 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    font-size: 4rem;
    line-height: 1;
    color: var(--gracie-red, #cc0000);
    text-transform: uppercase;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.8);
    /* Strengthened shadow */
    margin: 0;
}

/* Título: PARA TODOS */
.hero-section-2 .para-todos-2 {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    font-size: 5rem;
    line-height: 1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.8);
    /* Strengthened shadow */
    margin: 0 0 15px 0;
}

/* Subtítulo pequeño debajo */
.hero-section-2 .subtitle-2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    /* Slightly bolder for visibility */
    margin-bottom: 30px;
    text-shadow: 1px 2px 8px rgba(0, 0, 0, 1);
    /* Full black shadow for high contrast */
    max-width: 800px;
}




/* 
    6. RESPONSIVE
    -----------------------------
*/
@media (max-width: 768px) {
    .hero-section-2 {
        height: 350px;
        /* Even smaller for mobile */
    }

    .hero-section-2 .jiu-jitsu-title-2 {
        font-size: 2.5rem;
    }

    .hero-section-2 .para-todos-2 {
        font-size: 3rem;
    }

    .hero-section-2 .subtitle-2 {
        font-size: 1.1rem;
    }

    .hero-section-2 .video-brand-text-container {
        top: 20px;
        left: 20px;
    }
}

/* ==========================================================================
   PROGRAM INDEX BUTTONS (Restored)
   ========================================================================== */
.program-index-container {
    display: flex;
    justify-content: center;
    padding: 60px 0;
    background: #f4f4f4;
    /* Match GB1 section background */
    position: relative;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    margin: 0px 0;
    box-shadow: none;
    /* Remove shadow to blend borders */
}

.program-index-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Better handling for 3 items */
    gap: 12px;
    width: 100%;
    max-width: 1000px;
    padding: 25px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.program-index-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    /* Remove fixed height */
    min-height: 45px;
    /* Compact */
    border-radius: 12px;
    /* Modern rounded rect */
    text-decoration: none;
    color: white;
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    position: relative;
    overflow: hidden;
    padding: 12px 15px;
    /* Balanced padding */
    z-index: 1;
    text-align: center;
    font-size: 0.85rem;
    /* Sleeker text */
    letter-spacing: 0.5px;
}

/* Button Colors - Vibrant Red Gradients */
.gb1-button,
.gbw-button,
.gbfit-button,
.gb2-button,
.nogi-button,
.gb3-button,
.gbk1-button,
.gbk2-button,
.gbkjunior-button {
    background: linear-gradient(135deg, #e60000 0%, #aa0000 100%);
    box-shadow: 0 8px 20px rgba(204, 0, 0, 0.3);
}

.gb1-button:hover,
.gbw-button:hover,
.gbfit-button:hover,
.gb2-button:hover,
.nogi-button:hover,
.gb3-button:hover,
.gbk1-button:hover,
.gbk2-button:hover,
.gbkjunior-button:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(204, 0, 0, 0.4);
    background: linear-gradient(135deg, #ff1a1a 0%, #cc0000 100%);
}

.program-index-text {
    font-size: 0.9rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

@media (max-width: 768px) {
    .program-index-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
        width: 90%;
        max-width: 500px;
    }

    .program-index-button {
        height: auto;
        min-height: 60px;
    }
}

@media (max-width: 480px) {
    .program-index-buttons {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column for 3 items to stack evenly */
        gap: 12px;
        width: 95%;
        padding: 15px;
        max-width: none;
    }

    .program-index-button {
        min-height: 50px;
    }
}

/* ==========================================================================
   GB1 SECTION STYLES
   ========================================================================== */
.gb-program-section {
    padding: 80px 0;
    background: #f4f4f4;
    /* Light gray background for the whole section */
}

.gb-program-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   GB1 - DISEÑO DE DIVISIÓN (Imagen Izquierda + Texto Derecha)
   CLIENTE: Aquí definimos la estructura principal que divide la sección en dos partes:
   la imagen y la tarjeta de información. Usamos 'Flexbox' para alinearlos perfectamente.
   ========================================================================== */
.gb-program-split {
    display: flex;
    align-items: center;
    /* Alinea los elementos verticalmente al centro */
    justify-content: center;
    /* Centra todo el bloque en la pantalla */
    gap: 40px;
    /* Espacio entre la imagen y el texto */
    margin-bottom: 60px;
    /* Espacio debajo de este bloque antes de la siguiente sección */
}

/* CLIENTE: Contenedor de la imagen. Le damos bordes redondeados y una sombra suave
   para que "flote" un poco y se vea moderno. */
.gb-program-image-wrapper {
    flex: 1;
    /* Toma el mismo espacio que el texto */
    max-width: 500px;
    /* Limitamos el ancho para que no se vea gigante en pantallas grandes */
    border-radius: 20px;
    /* Bordes redondeados */
    overflow: hidden;
    /* Asegura que la imagen no se salga de los bordes redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Sombra elegante */
}

.gb-program-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.gb-program-image:hover {
    transform: scale(1.03);
}

/* CLIENTE: Tarjeta de información (texto). Fondo blanco limpio para asegurar lectura fácil,
   con una sombra ligeramente diferente para diferenciarla de la imagen. */
.gb-program-info-card {
    flex: 1;
    background: white;
    padding: 40px;
    /* Espacio interno para que el texto "respire" */
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    /* Sombra suave estilo Apple/Google */
    text-align: center;
    /* Texto centrado para mayor impacto visual */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Asegura que botones y logos también se centren */
    max-width: 500px;
}

.gb-program-logo {
    margin-bottom: 15px;
}

.gb-text {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    color: var(--gracie-red, #cc0000);
    line-height: 1;
}

.gb-number {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    /* Superscript effect */
    color: var(--gracie-red, #cc0000);
    vertical-align: super;
    margin-left: 2px;
}

.gb-program-title {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #333;
    margin: 10px 0 20px;
    text-transform: uppercase;
    line-height: 1.2;
}

.gb-program-description {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.gb-program-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.gb-program-btn {
    padding: 12px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
    font-size: 0.95rem;
}

.gb-program-btn.blue {
    background: #007bff;
    /* Gracie Blue Brightened for consistency */
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.gb-program-btn.blue:hover {
    background: #0052a3;
    transform: translateY(-2px);
}

.gb-program-btn.blue-fill {
    background: #007bff;
    /* Slightly lighter blue for distinction or same */
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.gb-program-btn.blue-fill:hover {
    background: #0062cc;
    transform: translateY(-2px);
}


/* ==========================================================================
   SECCIÓN DE METAS (La tarjeta ancha con checks)
   CLIENTE: Un bloque destacado para listar los beneficios clave. Fondo blanco para contraste.
   ========================================================================== */
.gb-goals-container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    margin-bottom: 60px;
    text-align: center;
}

.gb-goals-title {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #007bff;
    /* Título en azul para diferenciarlo y llamar la atención */
    margin-bottom: 30px;
}

.gb-goals-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.gb-goal-item {
    background: #f9f9f9;
    padding: 15px 25px;
    border-radius: 12px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    color: #444;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.gb-goal-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    background: white;
}

.gb-goal-check {
    width: 34px;
    height: 34px;
    background: rgba(211, 47, 47, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D32F2F;
    font-size: 1rem;
    flex-shrink: 0;
}

.gb-goal-text {
    font-weight: 600;
}


/* ==========================================================================
   GRID DE PLAN DE ESTUDIOS (Los 4 iconos)
   CLIENTE: Organizamos los módulos en una cuadrícula (Grid). Esto permite que se adapte
   fácilmente de 4 columnas (PC) a 2 (Tablet) o 1 (Móvil).
   ========================================================================== */
.gb-study-plan-container {
    text-align: center;
}

.gb-study-title {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 900;
    /* Extra bold para impacto */
    font-size: 2.5rem;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 40px;
}

.gb-study-title sup {
    font-size: 1rem;
    vertical-align: super;
    margin-left: 5px;
    color: var(--gracie-red, #cc0000);
}

.gb-text-dark {
    color: #222;
}

.gb-number-dark {
    font-size: 1.5rem;
    vertical-align: super;
    color: #222;
}

.gb-study-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gb-study-grid .gb-study-card {
    background: white;
    padding: 30px 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    /* Faster response */
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 4px solid transparent;
    /* Prepare for hover effect */
    position: relative;
    top: 0;
}

/* Increased specificity to override .animate-on-scroll.visible transform */
.gb-study-grid .gb-study-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    border-top-color: var(--gracie-red, #cc0000);
    /* Red border appears */
}

.gb-study-icon {
    font-size: 2rem;
    color: var(--gracie-red, #cc0000);
    margin-bottom: 20px;
    /* Icon Circle Setup */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(211, 47, 47, 0.08);
    /* Light red background by default */
    transition: all 0.2s ease;
}

/* Specific Hover Logic: When card is hovered, change icon style */
.gb-study-grid .gb-study-card:hover .gb-study-icon {
    transform: scale(1.1);
}

.gb-study-grid .gb-study-card:hover .gb-study-icon.red-icon {
    background-color: #D32F2F;
    color: white;
}

.gb-study-card-title {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
}

.gb-separator {
    width: 30px;
    height: 3px;
    background: var(--gracie-red, #cc0000);
    margin-bottom: 15px;
}

.gb-study-card-desc {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
}

/* ==========================================================================
   DISEÑO RESPONSIVE (ADAPTACIÓN A MÓVILES)
   ========================================================================== */
.scroll-indicator-mobile {
    display: none;
    /* Oculto por defecto en PC */
    text-align: center;
    color: var(--gracie-red, #cc0000);
    font-weight: 700;
    font-family: 'Titillium Web', sans-serif;
    margin-bottom: 15px;
    font-size: 1.1rem;
    animation: bounceLeft 2s infinite;
}

@keyframes bounceLeft {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-5px);
    }
}

@media (max-width: 900px) {

    /* En tablets, apilamos la imagen y el texto uno encima del otro */
    .gb-program-split {
        flex-direction: column;
    }

    /* Reducimos el grid de estudio a 2 columnas en lugar de 4 */
    .gb-study-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    /* Mostrar indicador solo en móvil */
    .scroll-indicator-mobile {
        display: block;
    }

    /* Convertir GRID en SCROLL HORIZONTAL */
    .gb-study-grid,
    .gb-goals-list {
        display: flex;
        grid-template-columns: none;
        /* Desactivar grid */
        flex-direction: row;
        /* Asegurar fila horizontal */
        overflow-x: auto;
        /* Permitir scroll lateral */
        scroll-snap-type: x mandatory;
        /* Efecto imán */
        gap: 15px;
        padding-bottom: 25px;
        /* Espacio para barra de scroll */
        justify-content: flex-start;
        /* Alinear al inicio */
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Ajustar tarjetas para el scroll */
    .gb-study-card,
    .gb-goal-item {
        min-width: 85%;
        /* Ocupar casi toda la pantalla */
        scroll-snap-align: center;
        /* Centrarse al soltar */
        flex: 0 0 auto;
        /* Evitar que se encojan */
    }

    .gb-program-info-card {
        padding: 25px;
    }

    .gb-goals-list {
        flex-wrap: nowrap;
        /* Evitar que bajen de línea */
        flex-direction: row;
    }
}

/* ==========================================================================
   ANIMACIONES "ON SCROLL" (Efecto de aparición)
   CLIENTE: Clase maestra para animar elementos cuando entran en pantalla.
   'Opacity 0' los hace invisibles inicialmente. 'Transform' los baja 20px.
   Cuando JS añade la clase .visible, suben y aparecen.
   ========================================================================== */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    /* Empieza desplazado hacia abajo */
    transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Suavidad extrema */
    will-change: opacity, transform;
    /* Optimización de rendimiento para el navegador */
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

/* ==========================================================================
   GBW - WOMEN'S PROGRAM (Diseño Dinámico: Azul y Rojo)
   CLIENTE: Esta sección utiliza un fondo azul vibrante (#205FA6) para diferenciar el 
   programa femenino. Aplicamos un diseño "Reverse" (texto a la izquierda, imagen a la derecha)
   para romper la monotonía visual del scroll.
   ========================================================================== */

/* ==========================================================================
   GB2 - JIU-JITSU AVANZADO (Fondo Azul / Reverse)
   CLIENTE: Para el programa avanzado GB2, reutilizamos el fondo azul vibrante 
   y la disposición "Reverse" (texto izquierda, imagen derecha). Esto ayuda a 
   distinguir visualmente los programas de alto nivel de los fundamentos (GB1).
   ========================================================================== */

/* GB3 - JIU-JITSU EXPERTO (Fondo Azul / Premium)
   CLIENTE: El programa GB3 representa la cima de la enseñanza. Reutilizamos el 
   fondo azul y el diseño "Experto" para mantener la consistencia con GB2, 
   creando una transición fluida entre los niveles avanzados. */

/* Fondo Principal: Usamos el azul corporativo de Gracie Barra para máxima identidad */
.gb-program-section.blue-section {
    background-color: #205FA6;
    color: white;
}

/* Section headers on blue backgrounds need white text */
.gb-program-section.blue-section .section-title,
.gb-program-section.blue-section .section-subtitle {
    color: white;
}

/* Tarjeta de Información: Diseñada en blanco puro para que el contenido sea 
   fácil de leer sobre el fondo azul. Aplicamos una sombra profunda para dar 
   una sensación de "elevación" y modernidad. */
.gb-program-info-card.white-card {
    background: white;
    color: #333;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* Descripción: Suavizamos el color del texto secundario para mejorar la jerarquía visual */
.gb-program-info-card.white-card .gb-program-description {
    color: #555;
}

/* Identidad Visual: El logo GBW usa el rojo característico para resaltar el programa */
.gb-text.red-text,
.gb-number.red-text {
    color: #D32F2F;
}

/* Botones de Acción: Usamos un rojo vibrante y bordes redondeados (estilo cápsula). 
   He forzado el texto blanco (!important) para garantizar legibilidad total. */
.gb-program-btn.red,
.gb-program-btn.red-fill {
    background: #D32F2F;
    color: white !important;
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}

/* Efecto Hover: Al pasar el ratón, el botón se oscurece ligeramente y se eleva 
   para invitar al clic, proporcionando feedback instantáneo al usuario. */
.gb-program-btn.red:hover,
.gb-program-btn.red-fill:hover {
    background: #b71c1c;
    box-shadow: 0 6px 20px rgba(211, 47, 47, 0.4);
    transform: translateY(-2px);
    color: white !important;
}

/* ==========================================================================
   GB FIT - BARRAFIT (Estilo Neutral con Acento de Intensidad)
   CLIENTE: BarraFit utiliza la misma base limpia y neutral que GB1 (fondo gris 
   y blanco) para transmitir profesionalidad, pero usa iconos y logos rojos 
   para evocar la energía y el "quemado" calórico del entrenamiento funcional.
   ========================================================================== */

/* Logo BarraFit: Usamos el rojo corporativo para el texto "FIT" para resaltar 
   la naturaleza dinámica del programa. */
.gb-program-logo .red-text {
    color: #D32F2F;
}

/* ==========================================================================
   NOGI - GRAPPLING (Estilo Neutral / Foco en Técnica)
   CLIENTE: Al igual que GB1 y BarraFit, NoGi utiliza el esquema neutral (Gris/Blanco)
   para mantener la sobriedad. Esto destaca la seriedad del entrenamiento de 
   Grappling y su transición hacia el MMA.
   ========================================================================== */

/* ==========================================================================
   COMPONENTES UNIFICADOS: METAS Y PRINCIPIOS
   CLIENTE: Para mantener la consistencia en toda la página, hemos creado un sistema
   de "tarjetas limpias" que sirve tanto para las Metas de GB1 como para los Principios de GBW.
   ========================================================================== */

/* Bloque Destacado: Un contenedor blanco con bordes redondeados y sombra suave 
   que organiza los puntos clave de cada programa. */
.gb-principios-container,
.gb-goals-container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    margin-top: 60px;
    margin-bottom: 60px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Títulos de Sección: Tipografía Titillium Web en negrita para un look deportivo */
.gb-principles-title,
.gb-goals-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-family: 'Titillium Web', sans-serif;
}

.gb-principles-title {
    color: #205FA6;
}

/* Color Azul GBW */
.gb-goals-title {
    color: #007bff;
}

/* Color Azul GB1 */

.gb-principles-list,
.gb-goals-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* ==========================================================================
   PLAN DE ESTUDIOS (REFINADO)
   CLIENTE: Estilo consistente para los 4 bloques del plan de estudios.
   ========================================================================== */

/* Título del Plan: Blanco para resaltar sobre el fondo azul de la sección GBW */
.gb-study-title.white-text {
    color: white;
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Contenido de Tarjetas: Aseguramos que el texto sea oscuro para contraste máximo 
   cuando estas tarjetas aparecen sobre fondos de color. */
.blue-section .gb-study-card {
    color: #333;
}

.blue-section .gb-study-card .gb-study-card-title {
    color: #222;
}

.blue-section .gb-study-card .gb-study-card-desc {
    color: #666;
}

/* Indicador de Hover: Forzamos el color rojo del borde superior al interactuar */
.blue-section .gb-study-card:hover {
    border-top-color: #D32F2F;
}

/* Indicadores Móviles: Icono de "Desliza" para que el usuario sepa que puede 
   navegar lateralmente en dispositivos táctiles. */
.scroll-indicator-mobile.white-text {
    color: rgba(255, 255, 255, 0.8);
}

.scroll-indicator-mobile.white-text i {
    color: white;
}

/* Separador: Pequeña línea roja bajo el título para guiar la lectura */
.gb-study-separator.red-sep {
    width: 30px;
    height: 3px;
    background: #D32F2F;
    margin: 0 auto 15px auto;
    border-radius: 2px;
}

/* Iconos Dinámicos: Por defecto tienen un círculo rojo muy suave. 
   Al pasar el ratón (hover), el círculo se rellena de rojo sólido y el icono pasa a blanco. */
.gb-study-card .gb-study-icon.red-icon {
    background: rgba(211, 47, 47, 0.1);
    color: #D32F2F;
}

/* ==========================================================================
   ADAPTACIÓN MÓVIL (RESPONSIVE)
   CLIENTE: El sistema cambia automáticamente a una lista horizontal deslizable
   en móviles para evitar que la página sea demasiado larga y facilitar la navegación.
   ========================================================================== */
@media (max-width: 768px) {

    .gb-principios-container,
    .gb-goals-container {
        padding: 25px 20px;
        background: white;
    }

    .gb-principles-list,
    .gb-goals-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 15px;
        scroll-snap-type: x mandatory;
        gap: 15px;
    }

    .gb-goal-item {
        min-width: 85%;
        scroll-snap-align: center;
        flex: 0 0 auto;
    }
}

/* Override for centered 2-card layout in Adultos page */
.filtered-programs-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.filtered-programs-grid .programa-card {
    /* Match the approximate width of the grid items in the main 3-col layout */
    width: 100%;
    max-width: 400px;
    flex: 1 1 300px;
    /* Flex basis with grow/shrink */
}

@media (max-width: 768px) {
    .filtered-programs-grid {
        flex-direction: column;
        align-items: center;
    }

    .filtered-programs-grid .programa-card {
        max-width: 100%;
    }
}

/* Override Schedule Background Transparency for Adultos Page */
#schedule-v2 {
    /* Remove background image entirely as requested */
    background: #f5f5f5 !important;
}


/* ===================================================================================
   SECCIÓN: ESTILOS ESPECÍFICOS PARA PÁGINAS DE NIÑOS (jiu-jitsu-ninos.html)
   ===================================================================================
   CLIENTE: Estos estilos son específicos para las páginas de Jiu-Jitsu para niños.
   Incluyen: sección FAQ, bloque de cita inspiracional, y grid de beneficios.
   ---
   DEVELOPER NOTE: All styles previously inline in HTML have been moved here for 
   better maintainability and faster page loads.
*/


/* ---------------------------------------------------------------------------
   FAQ SECTION - PREGUNTAS FRECUENTES PARA PADRES
   ---------------------------------------------------------------------------
   CLIENTE: Esta sección responde las dudas más comunes de los padres.
   Las tarjetas son blancas con efecto hover que muestra el borde rojo de la marca.
*/

/* Contenedor principal de la sección FAQ - fondo gris claro para contraste */
.faq-section {
    background: #f4f4f4;
    padding: 80px 0;
}

/* Grid responsive que se adapta automáticamente según el ancho de pantalla */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Tarjeta individual de pregunta/respuesta */
.faq-item {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border-top: 4px solid transparent;
    /* El borde rojo aparece al pasar el ratón */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Efecto hover: la tarjeta se eleva y muestra el borde rojo de Gracie Barra */
.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    border-top-color: var(--gracie-red);
}

/* Título de la pregunta con icono */
.faq-question {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #1a1a1a;
    margin-bottom: 15px;
    display: flex;
    gap: 15px;
}

/* Icono de interrogación en rojo de la marca */
.faq-question i {
    color: var(--gracie-red);
    margin-top: 5px;
}

/* Texto de la respuesta - legible y con buen espaciado */
.faq-answer {
    color: #444;
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Responsive: en móvil las tarjetas van en una sola columna */
@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------------------------------------------------
   QUOTE BLOCK - CITA INSPIRACIONAL DE CARLOS GRACIE JR.
   ---------------------------------------------------------------------------
   CLIENTE: Bloque de cita destacado con el lema "No hay derrota en el Jiu-Jitsu".
   Diseño elegante con comillas decorativas rojas y fondo blanco.
*/

/* Contenedor de la cita - separación superior para destaque visual */
.campeones-ninos-cita {
    text-align: center;
    margin-top: 60px;
    padding: 40px 50px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    position: relative;
}

/* Comillas decorativas grandes en rojo - elemento visual distintivo */
.campeones-ninos-cita::before {
    content: '"';
    position: absolute;
    top: 15px;
    left: 25px;
    font-size: 4rem;
    color: var(--gracie-red);
    font-family: Georgia, serif;
    line-height: 1;
    opacity: 0.8;
}

/* Texto de la cita - itálica para énfasis */
.campeones-ninos-cita-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 15px;
    line-height: 1.4;
    font-style: italic;
}

/* Nombre del autor - destacado en rojo de la marca */
.campeones-ninos-cita-author {
    font-weight: 700;
    color: var(--gracie-red);
    font-size: 1.1rem;
}


/* ---------------------------------------------------------------------------
   BENEFITS GRID - LISTA DE BENEFICIOS DEL PROGRAMA GBK
   ---------------------------------------------------------------------------
   CLIENTE: Grid de beneficios que muestra las ventajas del programa para niños.
   Se adapta automáticamente al ancho de pantalla.
*/

/* Contenedor de beneficios - espacio superior para separación */
.benefits-kids-container {
    margin-top: 50px;
}

/* Grid adaptativo para la lista de beneficios */
.benefits-kids-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* ==========================================================================
   FIX: ALINEACIÓN Y ESTILOS PLAN DE ESTUDIOS (CLASES PRIVADAS)
   Reference: Added to fix user report "no está centrado"
   ========================================================================== */

/* Asegurar que el título esté centrado */
.gb-study-title {
    text-align: center;
    width: 100%;
}

/* Alinear el grid al centro */
.gb-study-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    /* Evitar que se estire demasiado en pantallas muy anchas */
}

/* Estilo base para las tarjetas si no heredan de .blue-section */
.gb-study-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    text-align: center;
    flex: 1 1 250px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
    border-top: 4px solid transparent;
}

.gb-study-card:hover {
    transform: translateY(-5px);
    border-top-color: #D32F2F;
    /* Rojo Gracie al hover */
}

/* Iconos - Rojo Gracie Barra para consistencia de marca */
.gb-study-icon.blue-icon {
    font-size: 2.5rem;
    padding: 20px;
    border-radius: 50%;
    background: rgba(211, 47, 47, 0.1);
    /* Background rojo suave */
    color: #D32F2F;
    /* Rojo Gracie Barra */
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.gb-study-card:hover .gb-study-icon.blue-icon {
    background: #D32F2F;
    color: white;
}

/* Títulos de tarjeta */
.gb-study-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #333;
    font-family: 'Titillium Web', sans-serif;
    text-transform: uppercase;
}

/* Separadores */
.gb-study-separator.blue-sep {
    height: 3px;
    width: 40px;
    background: #205FA6;
    margin-bottom: 15px;
    border-radius: 2px;
}

/* Descripciones */
.gb-study-card-desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
}

/* 
   ---------------------------------------------------------------------------
   AJUSTES GLOBALES DE DISEÑO (GLOBAL LAYOUT ADJUSTMENTS)
   ---------------------------------------------------------------------------
   CLIENTE: Estas reglas aseguran que el contenido no quede oculto detrás de la
   barra de navegación flotante.
   - En pantallas grandes (PC): Añadimos un margen a la izquierda (padding-left)
     para compensar el ancho del menú lateral.
   - En móviles: Quitamos ese margen porque el menú cambia de formato.
*/

body {
    padding-left: 70px;
    /* Espacio para la barra lateral en PC */
}

@media (max-width: 768px) {
    body {
        padding-left: 0;
        /* Sin espacio extra en móviles */
    }
}

/* 
   ---------------------------------------------------------------------------
   DESCRIPCIÓN DE SECCIÓN CENTRADA (CENTERED SECTION DESCRIPTION)
   ---------------------------------------------------------------------------
   CLIENTE: Estilo específico para textos introductorios que necesitan estar
   centrados y con un ancho limitado para mejorar la lectura.
   - Usado en: Sección "Nuestro Legado".
*/
.gb-section-description-centered {
    text-align: center;
    max-width: 800px;
    /* Ancho máximo para que las líneas no sean muy largas */
    margin: 0 auto 40px;
    /* Centrado horizontalmente y con espacio abajo */
}