/* ================================================
   AHRA OVERRIDES — Gana a GeneratePress en todos
   los contextos. NO modificar especificidad.
   ================================================ */

/* ------ MATERIAL SYMBOLS: Forzar font-family correcto ------ */
html body .material-symbols-outlined,
html body span.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-smoothing: antialiased !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

html body .material-symbols-outlined[data-weight="fill"] {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* ------ NAV: eliminar bullets de GeneratePress ------ */
html body .site-header nav ul,
html body .site-header nav ul li,
html body .site-header .nav-menu,
html body .site-header .nav-menu li,
html body .main-navigation ul,
html body .main-navigation ul li {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    background: none !important;
}

html body .site-header nav ul,
html body .site-header .nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2rem !important;
    flex-wrap: nowrap !important;
}

html body .site-header nav ul li a,
html body .site-header .nav-menu li a,
html body .site-header .nav-link {
    font-family: var(--font-headline, 'Manrope', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    display: block !important;
}

html body .site-header nav ul li a:hover,
html body .site-header .nav-menu li a:hover,
html body .site-header .nav-link:hover {
    color: var(--color-primary, #1A66FF) !important;
}

html body .site-header nav ul li.current-menu-item>a,
html body .site-header .nav-menu li.current-menu-item>a,
html body .site-header .nav-link.current-menu-item {
    color: var(--color-primary, #1A66FF) !important;
    font-weight: 700 !important;
    background: var(--color-primary-fixed, #d9e2ff) !important;
    border-radius: var(--radius-md, 0.5rem) !important;
    padding: 0.25rem 0.75rem !important;
}

/* ------ HEADER: fixed top navbar — managed by header.php inline CSS ------ */
/* These rules ensure body content doesn't hide behind the fixed header */
html body .site-header,
html body header.site-header {
    /* Header positioning handled in header.php inline styles */
    /* Just ensure GeneratePress doesn't override our fixed position */
}

/* Neutralize any GeneratePress header injection */
html body .main-navigation,
html body .generate-menu-bar-wrapper,
html body .gp-hooks-header-bottom {
    display: none !important;
}

/* ------ HERO: mostrar aunque ACF no esté configurado ------ */
html body .ahra-hero {
    display: block !important;
    padding-top: 120px !important;
    padding-bottom: 5rem !important;
    background: #f9f9f9 !important;
    width: 100% !important;
}

html body .ahra-hero .ahra-hero__inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    padding-inline: 1.5rem !important;
}

@media (min-width: 1024px) {
    html body .ahra-hero .ahra-hero__inner {
        grid-template-columns: 1fr 1fr !important;
    }
}

html body .ahra-hero__badge {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .ahra-hero__title {
    display: block !important;
    visibility: visible !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
    font-weight: 700 !important;
    color: #1a1c1c !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
}

html body .ahra-hero__description {
    display: block !important;
    visibility: visible !important;
    font-size: 1.125rem !important;
    color: #41474e !important;
    line-height: 1.7 !important;
    margin-bottom: 2.5rem !important;
    max-width: 520px !important;
}

html body .ahra-hero__ctas {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    visibility: visible !important;
}

/* Placeholder hero cuando no hay imagen */
html body .ahra-hero__image-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 460px !important;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
    border-radius: 2rem !important;
}

/* ------ BODY/PAGE: remover layout de GeneratePress en home ------ */
html body.home,
html body.home #page,
html body.home #content,
html body.home .site-content,
html body.home .inside-site-inner {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-top: 0 !important;
    float: none !important;
}

html body.home #primary,
html body.home .content-area {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body.home #secondary,
html body.home .widget-area,
html body.home aside {
    display: none !important;
}

/* Neutralizar padding-top del body que pone GeneratePress */
html body.home {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ------ FOOTER: neutralizar GeneratePress ------ */
html body .site-footer,
html body footer.site-footer {
    background: #0f172a !important;
    color: #94a3b8 !important;
    padding: 4rem 0 2rem !important;
    border-top: none !important;
    width: 100% !important;
    display: block !important;
}

html body .site-footer ul,
html body .site-footer ul li {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

html body .site-footer .site-footer__links a,
html body .site-footer .site-footer__legal a {
    color: #64748b !important;
    text-decoration: none !important;
}

html body .site-footer .site-footer__links a:hover,
html body .site-footer .site-footer__legal a:hover {
    color: #3b82f6 !important;
    text-decoration: underline !important;
}

/* ------ FIX-1: HERO: Texto blanco sobre fondo azul ------ */
html body .section-hero__title,
html body .section-hero__subtitle,
html body .section-hero__badge {
    color: #ffffff !important;
}

html body .section-hero__title span.highlight {
    color: #4d9eff !important;
}

html body .section-hero .btn--primary {
    background: #ffffff !important;
    color: #1A66FF !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;
}

html body .section-hero .btn--secondary {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
}

/* ------ FIX-2: BENTO "¿Por qué AHRA?": Texto blanco en cards azules ------ */
html body .benefit-card--large *,
html body .benefit-card--accent * {
    color: #ffffff !important;
}

html body .benefit-card--large .benefit-card__description,
html body .benefit-card--accent .benefit-card__description {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ==================================================================
   FIX-HERO: Hero image container — Anti-GeneratePress overrides
   El front-page.php usa clases Tailwind puras. Estos overrides
   garantizan que el contenedor de imagen y la imagen misma se
   rendericen correctamente sin importar lo que inyecte GP.
   ================================================================== */

/* Hero section: asegurar que el section no colapse */
html body.home section.relative {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 500px !important;
}

/* Hero grid container: forzar grid de 2 columnas en desktop */
@media (min-width: 1024px) {
    html body.home section.relative>.max-w-7xl.grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
        align-items: center !important;
    }
}

/* Hero image wrapper: forzar dimensiones y visibilidad */
html body.home section.relative .relative.h-\[500px\],
html body.home section.relative>.max-w-7xl>div:nth-child(2) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 500px !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Hero image: forzar object-fit y dimensiones */
html body.home section.relative .relative.h-\[500px\] img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 2rem !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Hero counter card: asegurar posición absoluta */
html body.home section.relative .absolute.-bottom-6.-left-6 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    bottom: -24px !important;
    left: -24px !important;
    z-index: 20 !important;
}

/* Hero text column: asegurar visibilidad */
html body.home section.relative>.max-w-7xl>div:first-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hero h1: forzar estilos */
html body.home section.relative h1 {
    display: block !important;
    visibility: visible !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: clamp(2.25rem, 4vw, 3.75rem) !important;
    font-weight: 700 !important;
    color: #1a1c1c !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
}

/* Hero paragraph: forzar estilos */
html body.home section.relative>.max-w-7xl>div:first-child>p {
    display: block !important;
    visibility: visible !important;
    font-size: 1.125rem !important;
    color: #41474e !important;
    line-height: 1.7 !important;
    margin-bottom: 2.5rem !important;
    max-width: 520px !important;
}

/* Hero badge: forzar visibilidad */
html body.home section.relative span.inline-block {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hero buttons container */
html body.home section.relative .flex.flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    visibility: visible !important;
}

/* Hero primary button */
html body.home section.relative .bg-gradient-to-br {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hero background decoration */
html body.home section.relative .bg-primary\/5 {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 2rem !important;
    transform: rotate(-3deg) scale(1.05) !important;
}

/* ------ FIX-3: SECCIÓN MISIÓN: Stat +2.100 a la derecha en desktop ------ */
@media (min-width: 768px) {
    html body .section-mission__body {
        display: grid !important;
        grid-template-columns: 1fr 280px !important;
        gap: 4rem !important;
        align-items: center !important;
    }

    html body .section-mission__stat {
        text-align: center !important;
        border-left: 1px solid #e2e8f0 !important;
        padding-left: 2rem !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: none !important;
    }
}

/* ==================================================================
   RESPONSIVE TYPOGRAPHY — Mobile-first adjustments
   Mejor legibilidad en pantallas pequeñas (<768px)
   ================================================================== */

@media (max-width: 768px) {
    /* Hero title más compacto en mobile */
    html body.home section.relative h1,
    html body .ahra-hero__title {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 1rem !important;
    }

    /* Hero paragraph más legible */
    html body.home section.relative>.max-w-7xl>div:first-child>p,
    html body .ahra-hero__description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Section titles en mobile */
    html body h2,
    html body .section-title {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Section subtitles */
    html body h2 + p {
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    /* Course cards - mejor jerarquía en mobile */
    html body .course-card h3,
    html body article h3 {
        font-size: 1.0625rem !important;
        line-height: 1.3 !important;
    }

    /* Meta info (fechas, precios) más compacto */
    html body .ahra-meta-item,
    html body .course-card__meta {
        font-size: 0.8125rem !important;
    }

    /* Footer en mobile - columnas apiladas */
    html body .site-footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Beneficios cards - padding reducido */
    html body .benefit-card {
        padding: 1.5rem !important;
    }

    /* Event cards más compactos */
    html body .event-card h4 {
        font-size: 0.9375rem !important;
        line-height: 1.3 !important;
    }

    /* Newsletter section */
    html body .newsletter-section h2 {
        font-size: 1.25rem !important;
    }

    /* Body text general */
    html body p,
    html body div:not([class]) {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    /* Links en footer más legibles */
    html body .site-footer a {
        font-size: 0.875rem !important;
    }
}

/* ==================================================================
   TABLET adjustments (768px - 1024px)
   ================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    html body h2,
    html body .section-title {
        font-size: clamp(1.5rem, 3vw, 2rem) !important;
    }

    html body p {
        font-size: 0.9375rem !important;
    }
}