/*
Theme Name: MatHub
Theme URI: https://mathub.pe/
Author: Ángel Grimaldo
Author URI: https://angelgrimaldo.com/
Description: Tema personalizado para MatHub - Plataforma educativa de matemáticas para colegio, preuniversitario y universidad.
Version: 1.2.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mathub
*/

/* ==========================================================================
   1. RESET Y VARIABLES GLOBALES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-navy: #0B1B3D;
    --color-dark: #071530;
    --color-surface: #0F244F;
    --color-primary: #0284C7;
    --color-sky: #38BDF8;
    --color-gold: #E5A824;
    --color-gold-hover: #D49718;
    --color-charcoal: #0A193B;
    --color-body-text: #475569;
    --color-bg-light: #F8FAFC;
    --color-border: #E2E8F0;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html {
    font-family: var(--font-main);
    background-color: #FFFFFF;
    color: #1E293B;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    background-color: #FFFFFF;
    color: var(--color-body-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    font-weight: 800;
    color: var(--color-charcoal);
    letter-spacing: -0.03em;
    line-height: 1.15;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ==========================================================================
   2. CONTENEDORES Y ESTRUCTURA BASE
   ========================================================================== */
.mathub-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 640px) {
    .mathub-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .mathub-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* ==========================================================================
   3. HEADER NOCTURNO (FIGMA 1:1)
   ========================================================================== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--color-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0284C7 0%, #38BDF8 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.25rem;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
}

.site-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    line-height: 1;
}

.site-logo-text sup {
    color: var(--color-gold);
    font-size: 0.875rem;
    margin-left: 1px;
}

/* Navegación Desktop */
.nav-desktop {
    display: none;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: flex;
    }
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #CBD5E1;
    transition: color 0.2s ease;
    padding: 0.5rem 0;
    position: relative;
}

.nav-link:hover {
    color: #FFFFFF;
}

.nav-link.active {
    color: var(--color-gold);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-gold);
    border-radius: 2px;
}

/* Dropdown Programas (Header Desktop) */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #CBD5E1;
    padding: 0.5rem 0;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.dropdown-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown:focus-within .nav-dropdown-btn,
.nav-dropdown.is-open .nav-dropdown-btn,
.nav-dropdown-btn.active {
    color: var(--color-gold);
}

.nav-dropdown:hover .dropdown-chevron,
.nav-dropdown:focus-within .dropdown-chevron,
.nav-dropdown.is-open .dropdown-chevron {
    transform: rotate(180deg);
}

/* Submenú Flotante Card (Blanco, Rounded-3xl, Sombra Suave) */
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 0.875rem 0.75rem;
    min-width: 300px;
    box-shadow: 0 20px 45px -10px rgba(0, 10, 35, 0.22), 0 2px 10px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s;
    display: flex;
    flex-direction: column;
    gap: 3px;
    z-index: 1000;
}

/* Puente invisible para evitar que el hover se pierda entre botón y menú */
.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    height: 18px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.875rem;
    border-radius: 12px;
    text-decoration: none;
    color: #0F172A;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: all 0.18s ease;
}

.nav-dropdown-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    flex-shrink: 0;
    transition: color 0.18s ease, transform 0.18s ease;
}

.nav-dropdown-label {
    flex: 1;
    line-height: 1.3;
}

.nav-dropdown-item:hover,
.nav-dropdown-item.active {
    background-color: #F8FAFC;
    color: #1873CA;
}

.nav-dropdown-item:hover .nav-dropdown-icon,
.nav-dropdown-item.active .nav-dropdown-icon {
    color: #1873CA;
}

/* Acciones Header (Lupa + Avatar) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-icon-btn {
    color: #CBD5E1;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.search-icon-btn:hover {
    color: #FFFFFF;
}

/* Carrito Inteligente en Header */
.mathub-header-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.mathub-header-cart-btn:hover {
    background: rgba(229, 168, 36, 0.2);
    color: #E5A824;
    transform: translateY(-1px);
}

.mathub-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #E5A824;
    color: #0B1B3D;
    font-size: 11px;
    font-weight: 900;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Botón Iniciar Sesión en Header */
.mathub-header-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
    line-height: 1;
}

.mathub-header-login-btn:hover {
    background: #E5A824;
    color: #0B1B3D !important;
    border-color: #E5A824;
    box-shadow: 0 4px 14px rgba(229, 168, 36, 0.3);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .mathub-header-login-btn .login-text {
        display: none;
    }
    .mathub-header-login-btn {
        padding: 8px 10px;
    }
    .mathub-user-trigger-btn .user-name-short {
        display: none;
    }
    .mathub-user-trigger-btn {
        padding: 3px 6px 3px 3px;
    }
}

/* Dropdown Usuario Logueado */
.mathub-user-dropdown-wrap {
    position: relative;
    display: inline-block;
}

.mathub-user-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 3px 12px 3px 4px;
    border-radius: 9999px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.mathub-user-trigger-btn:hover,
.mathub-user-trigger-btn.is-active {
    background: rgba(255, 255, 255, 0.14);
    border-color: #E5A824;
}

.mathub-avatar-box {
    position: relative;
    display: inline-block;
}

.mathub-avatar-box .user-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1.5px solid #E5A824;
}

.mathub-avatar-box .user-status-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    background-color: #10B981;
    border: 1.5px solid #0B1B3D;
    border-radius: 50%;
}

.mathub-user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 250px;
    background: #0B1B3D;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
    padding: 10px 0;
    z-index: 1000;
    display: none;
}

.mathub-user-dropdown-menu.is-open {
    display: block;
}

.user-dropdown-info {
    padding: 8px 18px 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-dropdown-name {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
}

.user-dropdown-email {
    color: #94A3B8;
    font-size: 12px;
}

.user-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    color: #E2E8F0 !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #E5A824 !important;
    padding-left: 22px;
}

.user-dropdown-item.logout-link {
    color: #F87171 !important;
}

.user-dropdown-item.logout-link:hover {
    background: rgba(248, 113, 113, 0.1);
    color: #EF4444 !important;
}

/* Menú Móvil */
.mobile-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

@media (min-width: 768px) {
    .mobile-toggle-btn {
        display: none !important;
    }
}

.mobile-menu-drawer {
    display: none;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.25rem 1.5rem;
}

.mobile-menu-drawer.is-open {
    display: block;
}

.mobile-menu-link {
    display: block;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #CBD5E1;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    text-decoration: none;
}

.mobile-menu-link:hover, .mobile-menu-link.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.mobile-menu-accordion {
    margin-bottom: 0.25rem;
}

.mobile-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.mobile-accordion-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: #94A3B8;
}

.mobile-accordion-btn.is-open {
    color: var(--color-gold);
}

.mobile-accordion-btn.is-open .mobile-accordion-chevron {
    transform: rotate(180deg);
    color: var(--color-gold);
}

.mobile-submenu-list {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 0.35rem 0 0.5rem 0.75rem;
    margin-left: 0.5rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.mobile-submenu-list.is-open {
    display: flex;
}

.mobile-submenu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #CBD5E1;
    text-decoration: none;
    transition: all 0.2s;
}

.mobile-submenu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    flex-shrink: 0;
}

.mobile-submenu-item:hover,
.mobile-submenu-item.active {
    background-color: rgba(255, 255, 255, 0.08);
    color: #38BDF8;
}

.mobile-submenu-item:hover .mobile-submenu-icon,
.mobile-submenu-item.active .mobile-submenu-icon {
    color: #38BDF8;
}

/* ==========================================================================
   4. HERO SECTION (FIGMA 1:1)
   ========================================================================== */
.hero-section {
    position: relative;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.7) 0%, #FFFFFF 50%, rgba(248, 250, 252, 0.4) 100%);
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .hero-section {
        padding-top: 4.5rem;
        padding-bottom: 5rem;
    }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 3.5rem;
    }
}

/* Pill Tag */
.hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem;
    background-color: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0369A1;
    margin-bottom: 1.5rem;
    width: fit-content;
}

.hero-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* Titular H1 Hero (Figma Make Exacto 1:1) */
.hero-title {
    font-size: 44px;
    line-height: 1.05;
    font-weight: 800;
    color: #04103B;
    letter-spacing: -0.025em;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 60px; /* text-6xl */
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 76px; /* text-[76px] */
    }
}

.hero-title-accent {
    color: #1873CA;
    white-space: nowrap;
}

/* Descripción */
.hero-description {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-body-text);
    max-width: 540px;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .hero-description {
        font-size: 1.0625rem;
    }
}

/* Grupo de Botones Hero */
.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    width: 100%;
}

@media (min-width: 640px) {
    .hero-actions {
        flex-direction: row;
        align-items: center;
        width: auto;
    }
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background-color: var(--color-gold);
    color: var(--color-navy);
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.875rem 2rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(229, 168, 36, 0.2);
}

.btn-gold:hover {
    background-color: var(--color-gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(229, 168, 36, 0.3);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #FFFFFF;
    color: var(--color-charcoal);
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 0.875rem 1.75rem;
    border-radius: 12px;
    border: 1px solid #CBD5E1;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    background-color: #F8FAFC;
    border-color: #94A3B8;
    transform: translateY(-1px);
}

/* Mockup Imagen Derecha con Badges Flotantes */
.hero-media-wrapper {
    position: relative;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (min-width: 1024px) {
    .hero-media-wrapper {
        max-width: 100%;
    }
}

.hero-media-card {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    background-color: var(--color-navy);
    border: 4px solid #FFFFFF;
    box-shadow: 0 20px 40px -15px rgba(11, 27, 61, 0.25);
    aspect-ratio: 4/3;
    width: 100%;
}

@media (min-width: 640px) {
    .hero-media-card {
        aspect-ratio: 1.15/1;
    }
}

.hero-media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge Superior Izquierdo (+100 estudiantes) */
.hero-float-badge-top {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 0.625rem 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    z-index: 2;
}

@media (min-width: 640px) {
    .hero-float-badge-top {
        top: -0.75rem;
        left: -1rem;
    }
}

.badge-icon-star {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ECFDF5;
    color: #059669;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.badge-text-primary {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-charcoal);
    line-height: 1.2;
}

.badge-text-secondary-green {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #059669;
}

/* Badge Inferior Derecho (Clase privada) */
.hero-float-badge-bottom {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 0.625rem 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    z-index: 2;
}

@media (min-width: 640px) {
    .hero-float-badge-bottom {
        bottom: -0.75rem;
        right: -1rem;
    }
}

.badge-icon-target {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #FFFBEB;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
}

.badge-text-secondary-gray {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748B;
}

/* ==========================================================================
   5. SECCIÓN: APRENDE LO QUE REALMENTE NECESITAS (4 CARDS)
   ========================================================================== */
.section-formatos {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
    background-color: #FFFFFF;
}

@media (min-width: 1024px) {
    .section-formatos {
        padding-top: 5rem;
        padding-bottom: 5.5rem;
    }
}

.section-header-centered {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}

@media (min-width: 1024px) {
    .section-header-centered {
        margin-bottom: 3.5rem;
    }
}

.section-heading {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-charcoal);
    letter-spacing: -0.03em;
}

@media (min-width: 640px) {
    .section-heading {
        font-size: 2.25rem;
        letter-spacing: -0.035em;
    }
}

.grid-4-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .grid-4-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .grid-4-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.75rem;
    }
}

/* Card de Formato (Compacta, Equilibrada y Sin Aire Muerto Figma 1:1) */
.formato-card {
    background-color: #FFFFFF;
    border-radius: 28px;
    border: 1px solid #EEF2F6;
    padding: 2rem 1.5rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 38px -10px rgba(11, 27, 61, 0.07), 0 2px 6px rgba(0, 0, 0, 0.02);
}

@media (min-width: 1280px) {
    .formato-card {
        padding: 2.25rem 1.75rem 2rem;
    }
}

.formato-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(11, 27, 61, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.formato-card.is-featured {
    border: 2px solid rgba(229, 168, 36, 0.45);
    box-shadow: 0 16px 42px -10px rgba(229, 168, 36, 0.15), 0 2px 8px rgba(0, 0, 0, 0.03);
}

/* Esquina Dorada Curva en Abanico (Figma 1:1) */
.corner-fan-gold {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-color: #E5A824;
    border-bottom-left-radius: 80px;
    pointer-events: none;
    z-index: 1;
}

.formato-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #EBF5FF;
    color: #1873CA;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.formato-icon-box.is-gold {
    background-color: #FEF3C7;
    color: #D97706;
}

.formato-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #04103B;
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.formato-description {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #64748B;
    margin-bottom: 1.25rem;
}

/* Divisor horizontal previo al precio (Espaciado vertical compacto sin aire muerto) */
.formato-divider {
    width: 100%;
    height: 1px;
    background-color: #F1F5F9;
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

.formato-price {
    font-size: 2rem;
    font-weight: 800;
    color: #04103B;
    letter-spacing: -0.02em;
    margin-bottom: 1.15rem;
    line-height: 1;
}

/* Botones en forma de Píldora (Rounded-Full Figma 1:1) */
.btn-card-outline {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.5rem;
    border-radius: 9999px;
    border: 1.5px solid #E5A824;
    color: #D49718;
    background-color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.2s ease;
    box-shadow: 0 8px 20px rgba(229, 168, 36, 0.18);
}

.btn-card-outline:hover {
    background-color: #FFFDF7;
    border-color: #D49718;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(229, 168, 36, 0.28);
}

.btn-card-filled {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(180deg, #E5A824 0%, #D49718 100%);
    color: #04103B;
    font-size: 0.875rem;
    font-weight: 700;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 8px 24px rgba(229, 168, 36, 0.35);
}

.btn-card-filled:hover {
    background: linear-gradient(180deg, #EDAF2C 0%, #DC9F20 100%);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(229, 168, 36, 0.45);
}

/* ==========================================================================
   6. SECCIÓN: EMPIEZA A APRENDER HOY MISMO (CURSOS)
   ========================================================================== */
.section-catalogo {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
    background-color: #F8FAFC;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-catalogo {
        padding-top: 4.5rem;
        padding-bottom: 5rem;
    }
}

.catalogo-header-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .catalogo-header-row {
        flex-direction: row;
        align-items: flex-end;
    }
}

.link-ver-todo {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s;
}

.link-ver-todo:hover {
    color: #0369A1;
}

/* Tarjeta de Curso */
.curso-card {
    background-color: #FFFFFF;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
}

.curso-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(11, 27, 61, 0.08);
}

.curso-thumb-box {
    position: relative;
    height: 150px;
    background-color: #0F172A;
    overflow: hidden;
}

.curso-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.curso-card:hover .curso-thumb-box img {
    transform: scale(1.05);
}

.curso-tag-badge {
    position: absolute;
    top: 0.625rem;
    left: 0.625rem;
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.curso-content-box {
    padding: 1.25rem;
}

.curso-title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-charcoal);
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.curso-footer-row {
    padding: 0.75rem 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #F1F5F9;
}

.curso-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-charcoal);
}

.btn-comprar {
    background-color: var(--color-gold);
    color: var(--color-navy);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.btn-comprar:hover {
    background-color: var(--color-gold-hover);
}

/* Tarjeta 4 Oscura */
.curso-card.is-dark {
    background-color: var(--color-navy);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.12);
}

.curso-card.is-dark .curso-title {
    color: #FFFFFF;
}

.curso-card.is-dark .curso-price {
    color: #FFFFFF;
}

.curso-card.is-dark .curso-footer-row {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.curso-card.is-dark .curso-tag-badge {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   7. SECCIÓN: ELIGE TU UNIVERSIDAD (SLIDER INFINITO CONTINUO / SEAMLESS MARQUEE)
   ========================================================================== */
.section-universidades {
    padding: 2.25rem 0 2.5rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

.universidades-label {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #071530;
    margin-bottom: 1.75rem;
    line-height: 1.25;
}

@media (min-width: 640px) {
    .universidades-label {
        font-size: 1.875rem;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1024px) {
    .universidades-label {
        font-size: 2.125rem;
        margin-bottom: 2.25rem;
    }
}

.universidades-marquee-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
}

.universidades-marquee-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
    mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(100% - 50px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 50px, black calc(100% - 50px), transparent 100%);
}

.universidades-marquee-track {
    display: flex;
    width: max-content;
    gap: 20px;
}

.universidades-marquee-group {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    animation: mathubMarqueeGlide 32s linear infinite;
    will-change: transform;
}

@keyframes mathubMarqueeGlide {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-100% - 20px), 0, 0);
    }
}

/* Pausa ÚNICAMENTE al colocar el cursor sobre el viewport o cuando tiene la clase .is-paused */
.universidades-marquee-viewport:hover .universidades-marquee-group,
.universidades-marquee-container.is-paused .universidades-marquee-group {
    animation-play-state: paused !important;
}

.universidad-slide-item {
    flex: 0 0 auto;
    width: 195px;
    box-sizing: border-box;
}

.universidad-logo-box {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(11, 27, 61, 0.04);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.universidad-logo-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 27, 61, 0.08);
    border-color: rgba(2, 132, 199, 0.35);
}

.universidad-logo-img {
    max-height: 56px;
    max-width: 86%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(12%);
    opacity: 0.92;
    transition: transform 0.28s ease, opacity 0.28s ease, filter 0.28s ease;
    display: block;
}

.universidad-logo-box:hover .universidad-logo-img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Botón Interactivo Pausar / Reanudar */
.universidades-marquee-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
}

.universidades-marquee-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-navy);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(11, 27, 61, 0.04);
    transition: all 0.25s ease;
}

.universidades-marquee-toggle:hover {
    background: var(--color-navy);
    color: #FFFFFF;
    border-color: var(--color-navy);
    box-shadow: 0 4px 12px rgba(11, 27, 61, 0.12);
    transform: translateY(-1px);
}

.universidades-marquee-toggle:active {
    transform: scale(0.97);
}

/* En estado pausado: fondo navy y texto/icono en blanco puro */
.universidades-marquee-container.is-paused .universidades-marquee-toggle {
    background: var(--color-navy);
    color: #FFFFFF;
    border-color: var(--color-navy);
}

.universidades-marquee-container.is-paused .universidades-marquee-toggle:hover {
    background: var(--color-surface);
    border-color: var(--color-surface);
}

.universidades-marquee-toggle .marquee-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Respeto a Preferencias de Reducción de Movimiento */
@media (prefers-reduced-motion: reduce) {
    .universidades-marquee-group {
        animation: none !important;
    }
    .universidades-marquee-viewport {
        overflow-x: auto;
    }
}

/* Breakpoints Responsivos */
@media (max-width: 960px) {
    .universidades-marquee-viewport {
        mask-image: linear-gradient(to right, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30px, black calc(100% - 30px), transparent 100%);
    }
    .universidad-slide-item {
        width: 175px;
    }
    .universidad-logo-box {
        height: 82px;
        padding: 10px 14px;
    }
    .universidad-logo-img {
        max-height: 48px;
        max-width: 88%;
    }
}

@media (max-width: 680px) {
    .section-universidades {
        padding: 1.75rem 0 2rem;
    }
    .universidades-label {
        font-size: 1.375rem;
        margin-bottom: 1.25rem;
    }
    .universidades-marquee-viewport {
        padding: 6px 0;
        mask-image: linear-gradient(to right, transparent 0%, black 18px, black calc(100% - 18px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18px, black calc(100% - 18px), transparent 100%);
    }
    .universidades-marquee-track,
    .universidades-marquee-group {
        gap: 14px;
    }
    @keyframes mathubMarqueeGlide {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(calc(-100% - 14px), 0, 0);
        }
    }
    .universidad-slide-item {
        width: 150px;
    }
    .universidad-logo-box {
        height: 72px;
        padding: 8px 12px;
        border-radius: 10px;
    }
    .universidad-logo-img {
        max-height: 42px;
        max-width: 90%;
    }
    .universidades-marquee-toggle {
        padding: 5px 14px;
        font-size: 0.75rem;
    }
}

@media (max-width: 440px) {
    .universidad-slide-item {
        width: 138px;
    }
    .universidad-logo-box {
        height: 68px;
        padding: 6px 10px;
    }
    .universidad-logo-img {
        max-height: 38px;
    }
}

/* ==========================================================================
   8. SECCIÓN: MATHUB (ROADMAP METODOLÓGICO Y RUTA DE APRENDIZAJE)
   ========================================================================== */
.section-ruta {
    padding-top: 2.75rem;
    padding-bottom: 3.25rem;
    background: #F8FAFC;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .section-ruta {
        padding-top: 3.75rem;
        padding-bottom: 4.5rem;
    }
}

@media (min-width: 1024px) {
    .section-ruta {
        padding-top: 4.75rem;
        padding-bottom: 5.5rem;
    }
}

/* Fondo Matemático SVG */
.mathub-math-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    user-select: none;
    overflow: hidden;
}

.mathub-math-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.section-ruta .mathub-container {
    position: relative;
    z-index: 1;
}

.mathub-route-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

.mathub-route-title {
    font-size: 2.25rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #0B1B3D;
    line-height: 1.15;
    margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
    .mathub-route-title {
        font-size: 2.65rem;
    }
}

.mathub-route-desc {
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    font-weight: 450;
}

@media (min-width: 640px) {
    .mathub-route-desc {
        font-size: 1rem;
    }
}

/* Contenedor Principal del Roadmap */
.mathub-roadmap {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
}

/* Línea de Riel Conector Horizontal (Desktop >= 1024px) */
.roadmap-track-rail {
    display: none;
}

@media (min-width: 1024px) {
    .roadmap-track-rail {
        display: block;
        position: absolute;
        top: 22px;
        left: calc(10% - 10px);
        right: calc(10% - 10px);
        height: 3px;
        z-index: 1;
    }
    
    .roadmap-rail-line {
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #0284C7 0%, #38BDF8 50%, #0284C7 68%, #D97706 82%, #F59E0B 100%);
        border-radius: 999px;
        box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
    }

    .roadmap-rail-dot {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #38BDF8;
        box-shadow: 0 0 8px #38BDF8, 0 0 14px rgba(56, 189, 248, 0.9);
        z-index: 2;
    }

    .roadmap-rail-dot.dot-1 { left: 12.5%; }
    .roadmap-rail-dot.dot-2 { left: 37.5%; }
    .roadmap-rail-dot.dot-3 { left: 62.5%; }
    .roadmap-rail-dot.dot-4.is-gold {
        left: 87.5%;
        background: #FBBF24;
        box-shadow: 0 0 10px #FBBF24, 0 0 18px rgba(251, 191, 36, 0.95);
    }
}

/* Rejilla de Hitos en Desktop / Tablet */
.roadmap-milestones {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    position: relative;
    z-index: 2;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .roadmap-milestones {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .roadmap-step:nth-child(5) {
        grid-column: 1 / -1;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .roadmap-milestones {
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
    }
}

/* Estructura de cada Hito / Step */
.roadmap-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.28s ease;
}

/* Nodo de Estación / Pin Numerado */
.roadmap-node {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2.5px solid #0284C7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto Mono', monospace, sans-serif;
    font-weight: 800;
    font-size: 0.86rem;
    color: #0369A1;
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 18px rgba(14, 165, 233, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    z-index: 3;
}

.roadmap-step:hover .roadmap-node {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px #FFFFFF, 0 0 24px rgba(14, 165, 233, 0.7);
}

/* Nodo Dorado en Paso 5 */
.roadmap-step.is-gold-booster .roadmap-node {
    border-color: #F59E0B;
    color: #B45309;
    background: #FFFBEB;
    box-shadow: 0 0 0 4px #FFFFFF, 0 0 22px rgba(245, 158, 11, 0.65);
}

.roadmap-step.is-gold-booster:hover .roadmap-node {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px #FFFFFF, 0 0 28px rgba(245, 158, 11, 0.85);
}

/* Tarjeta del Hito (Dark Glassmorphism) */
.roadmap-card {
    width: 100%;
    background: linear-gradient(180deg, #091326 0%, #050B17 100%);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 16px;
    padding: 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 14px 30px -6px rgba(2, 6, 23, 0.65), 0 0 20px rgba(2, 132, 199, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease, border-color 0.28s ease;
    text-align: left;
    position: relative;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .roadmap-card {
        min-height: 255px;
    }
}

.roadmap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 38px -6px rgba(2, 6, 23, 0.8), 0 0 28px rgba(56, 189, 248, 0.28);
    border-color: rgba(56, 189, 248, 0.45);
}

/* Tarjeta 5: Destacada en Oro Glassmorphism */
.roadmap-step.is-gold-booster .roadmap-card {
    background: linear-gradient(180deg, #131422 0%, #080913 100%);
    border: 1.5px solid rgba(245, 158, 11, 0.65);
    box-shadow: 0 14px 30px -6px rgba(2, 6, 23, 0.65), 0 0 26px rgba(245, 158, 11, 0.28);
}

.roadmap-step.is-gold-booster .roadmap-card:hover {
    border-color: #FBBF24;
    box-shadow: 0 20px 38px -6px rgba(2, 6, 23, 0.8), 0 0 35px rgba(245, 158, 11, 0.48);
}

/* Encabezado dentro de la tarjeta */
.roadmap-card-head {
    margin-bottom: 0.65rem;
}

.roadmap-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.45rem;
}

.roadmap-action-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7DD3FC;
    margin-bottom: 0;
}

.roadmap-step.is-gold-booster .roadmap-action-tag {
    color: #FBBF24;
}

.roadmap-card-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7DD3FC;
    flex-shrink: 0;
}

.roadmap-opt-tag {
    font-size: 0.625rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #FDE047;
    padding: 2px 7px;
    border-radius: 4px;
}

.roadmap-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0;
}

.roadmap-step.is-gold-booster .roadmap-card-title {
    color: #FDE047;
}

.roadmap-card-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #94A3B8;
    margin: 0.4rem 0 1rem;
    flex-grow: 1;
}

/* Mini Widgets Específicos por Hito */
.roadmap-mini-widget {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Widget 1: Chips y Logos de Universidades */
.widget-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.m-chip {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #BAE6FD;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.28);
    border-radius: 5px;
    padding: 2.5px 6.5px;
}

.m-logo-chip {
    background: #FFFFFF;
    border-radius: 6px;
    padding: 3px 6px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
    flex: 1 1 0;
    min-width: 38px;
    max-width: 52px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.m-logo-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.m-logo-chip img {
    max-height: 16px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.widget-chips .m-chip-more {
    font-size: 0.75rem;
    font-weight: 800;
    color: #94A3B8;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    height: 25px;
    width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.widget-chips .m-chip-more:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Widget 2: Checklist */
.widget-checklist {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.m-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #E2E8F0;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
}

.m-check svg {
    color: #38BDF8;
    flex-shrink: 0;
}

/* Widget 3: Pagos */
.widget-payments {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.m-pay-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.m-pay-badge {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #F1F5F9;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 7px;
    border-radius: 4px;
}

.m-pay-status {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #4ADE80;
    margin-top: 4px;
    display: inline-block;
}

/* Widget 4: Reproductor */
.widget-player {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.m-player-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(15, 23, 42, 0.85);
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid rgba(56, 189, 248, 0.25);
}

.m-play-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0284C7;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.m-track {
    flex-grow: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.m-track-fill {
    width: 72%;
    height: 100%;
    background: linear-gradient(90deg, #0284C7, #38BDF8);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.8);
}

.m-player-note {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #38BDF8;
    margin-top: 3px;
    display: inline-block;
}

/* Widget 5: Tutoría */
.widget-tutor {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.m-tutor-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #0F172A;
    background: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%);
    border: none;
    padding: 4px 9px;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
    width: fit-content;
}

.m-tutor-badge svg {
    color: #0F172A;
}

.m-tutor-sub {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #FDE68A;
    margin-top: 3px;
    display: inline-block;
}

/* ==========================================================================
   MODO RESPONSIVE MÓVIL ESTILO SUBWAY / TRANSIT LINE (< 640px)
   ========================================================================== */
@media (max-width: 639px) {
    .section-ruta {
        padding-top: 2rem;
        padding-bottom: 2.25rem;
    }
    
    .mathub-route-header {
        margin-bottom: 1.75rem;
    }
    
    .mathub-route-title {
        font-size: 1.85rem;
    }

    /* Línea Vertical Continua de Estaciones */
    .roadmap-milestones {
        display: flex;
        flex-direction: column;
        gap: 1.15rem;
        position: relative;
        padding-left: 44px;
    }

    .roadmap-milestones::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 14px;
        bottom: 24px;
        width: 3px;
        background: linear-gradient(180deg, #0284C7 0%, #38BDF8 40%, #0284C7 68%, #D97706 82%, #F59E0B 100%);
        border-radius: 999px;
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
        z-index: 1;
    }

    .roadmap-step {
        width: 100%;
        display: block;
        position: relative;
    }

    /* El Pin queda anclado en la línea vertical */
    .roadmap-node {
        position: absolute;
        left: -44px;
        top: 12px;
        width: 34px;
        height: 34px;
        font-size: 0.75rem;
        margin-bottom: 0;
        box-shadow: 0 0 0 3px #FFFFFF, 0 0 12px rgba(14, 165, 233, 0.45);
    }

    .roadmap-step.is-gold-booster .roadmap-node {
        box-shadow: 0 0 0 3px #FFFFFF, 0 0 14px rgba(245, 158, 11, 0.6);
    }

    .roadmap-card {
        padding: 1rem 0.95rem;
        min-height: auto;
    }

    .roadmap-card-desc {
        margin-bottom: 0.75rem;
    }

    .mathub-route-cta-wrapper {
        margin-top: 2rem;
        gap: 0.65rem;
    }
    
    .btn-mathub-explore {
        width: 100%;
        max-width: 320px;
        font-size: 0.95rem;
        padding: 0.8rem 1.75rem;
    }
}

/* Bloque de Conversión CRO: CTA Primario + Salida Secundaria */
.mathub-route-cta-wrapper {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

.btn-mathub-explore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
    color: #FFFFFF !important;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.85rem 2.25rem;
    border-radius: 999px;
    text-decoration: none;
    min-height: 48px;
    box-shadow: 0 10px 24px -4px rgba(2, 132, 199, 0.4), 0 4px 10px -2px rgba(2, 132, 199, 0.2);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, background 0.25s ease;
}

.btn-mathub-explore:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #0369A1 0%, #075985 100%);
    box-shadow: 0 14px 28px -4px rgba(2, 132, 199, 0.55), 0 6px 14px -2px rgba(2, 132, 199, 0.3);
    color: #FFFFFF !important;
}

.btn-mathub-explore svg {
    transition: transform 0.22s ease;
}

.btn-mathub-explore:hover svg {
    transform: translateX(4px);
}

.mathub-cta-subtext {
    font-size: 0.875rem;
    color: #64748B;
    margin: 0;
    line-height: 1.5;
}

.mathub-link-login {
    color: #0284C7 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.mathub-link-login:hover {
    color: #0369A1 !important;
}

/* ==========================================================================
   9. BANNER: EXAMEN URGENTE (FIGMA 1:1)
   ========================================================================== */
.section-urgente {
    position: relative;
    background-color: var(--color-navy);
    color: #FFFFFF;
    padding: 3.5rem 1.25rem;
    text-align: center;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .section-urgente {
        padding: 5rem 2rem;
    }
}

.urgente-glow {
    position: absolute;
    top: -60px;
    left: -60px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(229, 168, 36, 0.22) 0%, rgba(11, 27, 61, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
}

.urgente-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.urgente-heading {
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .urgente-heading {
        font-size: 2.25rem;
        letter-spacing: -0.035em;
    }
}

.text-gold {
    color: var(--color-gold);
}

.urgente-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #CBD5E1;
    margin-bottom: 2rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.urgente-actions-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .urgente-actions-row {
        flex-direction: row;
    }
}

.pill-precio-desde {
    display: inline-flex;
    align-items: center;
    padding: 0.8125rem 1.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #FFFFFF;
}

/* ==========================================================================
   10. SECCIÓN: TESTIMONIOS (4 CARDS FIGMA 1:1)
   ========================================================================== */
.section-testimonios {
    padding-top: 2.75rem;
    padding-bottom: 3.25rem;
    background-color: #F8FAFC;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .section-testimonios {
        padding-top: 3.75rem;
        padding-bottom: 4.25rem;
    }
}

@media (min-width: 1024px) {
    .section-testimonios {
        padding-top: 4.75rem;
        padding-bottom: 5.25rem;
    }
}

.testimonio-card {
    background-color: #FFFFFF;
    border-radius: 18px;
    border: 1px solid var(--color-border, #E2E8F0);
    padding: 1.5rem 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(11, 27, 61, 0.04);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (max-width: 639px) {
    .testimonio-card {
        padding: 1.35rem 1.2rem;
    }
}

.testimonio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(11, 27, 61, 0.08);
    border-color: rgba(2, 132, 199, 0.3);
}

.stars-row {
    color: #F59E0B;
    font-size: 1.05rem;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 0.85rem;
}

.testimonio-quote {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #334155;
    font-style: italic;
    margin: 0 0 1.25rem;
    flex-grow: 1;
}

.testimonio-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.testimonio-author-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonio-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B1B3D 0%, #0284C7 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.22);
    letter-spacing: 0.5px;
}

.testimonio-author-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.testimonio-name-verified {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.testimonio-author-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
    margin: 0;
}

.verified-check-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.testimonio-verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #059669;
    background: #ECFDF5;
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 4px;
    padding: 2px 7px;
    width: fit-content;
    line-height: 1.25;
}

.testimonio-verified-tag svg {
    color: #10B981;
    flex-shrink: 0;
}

.testimonio-univ-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.testimonio-univ-logo-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 6px 16px;
    height: 54px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(11, 27, 61, 0.05);
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.testimonio-univ-logo-card:hover {
    transform: translateY(-1px);
    border-color: rgba(2, 132, 199, 0.4);
    box-shadow: 0 4px 12px rgba(11, 27, 61, 0.09);
}

.testimonio-univ-logo-card img {
    max-height: 38px;
    max-width: 145px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* ==========================================================================
   11. FOOTER NOCTURNO (FIGMA 1:1)
   ========================================================================== */
.site-footer {
    background-color: var(--color-navy);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #94A3B8;
    font-size: 0.8125rem;
    padding-top: 3.5rem;
    padding-bottom: 2.5rem;
}

.footer-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 640px) {
    .footer-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-grid-4 {
        grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
        gap: 3rem;
    }
}

.footer-col-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FFFFFF;
    margin-bottom: 1.25rem;
}

.footer-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.footer-nav-list a {
    color: #94A3B8;
    transition: color 0.2s;
}

.footer-nav-list a:hover {
    color: #FFFFFF;
}

.footer-bottom-row {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.75rem;
    color: #64748B;
}

@media (min-width: 640px) {
    .footer-bottom-row {
        flex-direction: row;
    }
}

.footer-bottom-row a {
    color: var(--color-sky);
    font-weight: 600;
}

/* ==========================================================================
   12. BOTÓN FLOTANTE WHATSAPP (MÓVIL & DESKTOP)
   ========================================================================== */
.whatsapp-float-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 40;
    background-color: #25D366;
    color: #FFFFFF;
    border-radius: 9999px;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float-btn:hover {
    background-color: #20BA5C;
    transform: scale(1.05);
}

.whatsapp-float-label {
    display: none;
    font-size: 0.8125rem;
    font-weight: 700;
    padding-right: 0.35rem;
}

@media (min-width: 640px) {
    .whatsapp-float-label {
        display: inline-block;
    }
}

/* ==========================================================================
   13. PÁGINA: UNIDAD ESCOLAR (Figma 1:1 + Espaciado Óptimo + Responsividad)
   ========================================================================== */

/* Hero Unidad Escolar */
.hero-escolar {
    position: relative;
    background: radial-gradient(circle at 50% 15%, rgba(2, 132, 199, 0.22) 0%, rgba(7, 21, 48, 0.98) 75%, #071530 100%), #071530;
    padding-top: 4.5rem;
    padding-bottom: 6rem;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 1024px) {
    .hero-escolar {
        padding-top: 5.5rem;
        padding-bottom: 7.5rem;
    }
}

.hero-escolar-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 650px;
    height: 380px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Fondo Matemático Escolar Dinámico */
.hero-escolar-math-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-escolar-math-svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

@keyframes mathFloatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-7px) rotate(0.4deg);
    }
}

@keyframes mathFloatRev {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(6px) rotate(-0.4deg);
    }
}

@keyframes mathPulseGlow {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.08);
    }
}

.anim-float-slow {
    transform-origin: center;
    animation: mathFloatSlow 8s ease-in-out infinite;
}

.anim-float-rev {
    transform-origin: center;
    animation: mathFloatRev 9s ease-in-out infinite;
}

.math-float-sym {
    transform-origin: center;
    animation: mathPulseGlow 6s ease-in-out infinite;
}

.sym-sqrt { animation-delay: 1.2s; }
.sym-sum { animation-delay: 2.4s; }
.sym-inf { animation-delay: 3.6s; }
.sym-delta { animation-delay: 4.5s; }
.sym-fx { animation-delay: 5.2s; }

@media (max-width: 768px) {
    .hero-escolar-math-svg {
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anim-float-slow,
    .anim-float-rev,
    .math-float-sym {
        animation: none !important;
    }
}

.relative-z {
    position: relative;
    z-index: 2;
}

.hero-escolar-content {
    max-width: 820px;
    margin: 0 auto;
}

.hero-pill-badge-escolar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem;
    background-color: rgba(2, 132, 199, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #38BDF8;
    margin-bottom: 1.5rem;
}

.hero-pill-dot-sky {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #38BDF8;
    box-shadow: 0 0 8px #38BDF8;
}

.hero-escolar-title {
    font-size: 2.75rem;
    line-height: 1.05;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin-bottom: 0.875rem;
}

@media (min-width: 768px) {
    .hero-escolar-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .hero-escolar-title {
        font-size: 4.25rem;
    }
}

.hero-escolar-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: #38BDF8;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .hero-escolar-subtitle {
        font-size: 1.375rem;
    }
}

.hero-escolar-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #94A3B8;
    max-width: 650px;
    margin: 0 auto 2.25rem auto;
}

@media (min-width: 640px) {
    .hero-escolar-desc {
        font-size: 1.0625rem;
    }
}

.hero-escolar-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .hero-escolar-actions {
        flex-direction: row;
        gap: 1.25rem;
    }
}

.btn-outline-escolar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline-escolar:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.hero-escolar-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
    color: #CBD5E1;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Sección Materias (Card Blanca Amplia y Espaciada) */
.section-escolar-materias {
    background-color: #F8FAFC;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    position: relative;
}

@media (min-width: 1024px) {
    .section-escolar-materias {
        padding-top: 0;
        padding-bottom: 5.5rem;
    }
}

.escolar-card-container {
    background-color: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 25px 60px -20px rgba(0, 15, 45, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
    padding: 2.25rem 1.5rem;
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
    .escolar-card-container {
        border-radius: 32px;
        padding: 4rem 3.5rem;
        margin-top: -4rem; /* Superposición armónica que deja 3.5rem de aire respirable en el Hero */
    }
}

.section-badge-pill {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--color-primary);
    background-color: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.mb-space {
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .mb-space {
        margin-bottom: 3.5rem;
    }
}

/* Grid de las 7 Materias (Figma 1:1) */
.grid-materias-escolar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .grid-materias-escolar {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .grid-materias-escolar {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

.materia-box-card {
    background-color: #F8FAFC;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 2.25rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 200px;
    justify-content: flex-start;
}

.materia-box-card:hover {
    background-color: #FFFFFF;
    border-color: #BAE6FD;
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -8px rgba(24, 115, 202, 0.14), 0 0 0 1.5px #1873CA;
}

.materia-card-highlight {
    background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 100%);
    border-color: #BAE6FD;
}

.materia-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(24, 115, 202, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: #1873CA;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.materia-box-card:hover .materia-icon-wrap {
    transform: scale(1.1);
    background-color: #1873CA;
}

.materia-box-card:hover .materia-icon-wrap svg {
    stroke: #FFFFFF !important;
}

.materia-box-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #04103B;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.materia-box-desc {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #64748B;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.materia-box-link {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1873CA;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: transform 0.2s ease;
}

.materia-box-card:hover .materia-box-link {
    transform: translateX(4px);
}

/* Callout Inferior en Card de Materias */
.materia-callout-footer {
    margin-top: 2.5rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .materia-callout-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.callout-footer-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #04103B;
    margin-bottom: 0.35rem;
}

.callout-footer-text {
    font-size: 0.875rem;
    color: #475569;
    max-width: 600px;
    line-height: 1.5;
}

/* Sección Pilares Metodológicos */
.section-pilares-escolar {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-pilares-escolar {
        padding-top: 5rem;
        padding-bottom: 5.5rem;
    }
}

.pilares-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .pilares-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.pilar-card {
    background-color: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.pilar-card:hover {
    background-color: #FFFFFF;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.06);
    border-color: #BAE6FD;
    transform: translateY(-3px);
}

.pilar-num-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 2.75rem;
    font-weight: 900;
    color: rgba(2, 132, 199, 0.12);
    line-height: 1;
    user-select: none;
}

.pilar-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #E0F2FE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pilar-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #04103B;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.pilar-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
}

/* Sección FAQ Escolar */
.section-faq-escolar {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-faq-escolar {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }
}

.faq-accordion-wrap {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background-color: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    transition: all 0.2s ease;
}

.faq-item[open] {
    background-color: #FFFFFF;
    border-color: #BAE6FD;
    box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.08);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: #04103B;
    list-style: none;
    gap: 1rem;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    color: #64748B;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-answer {
    padding-top: 0.875rem;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* Blindaje de espaciado móvil compacto */
@media (max-width: 640px) {
    .hero-escolar {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .hero-escolar-title {
        font-size: 2.25rem;
    }

    .section-escolar-materias {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .escolar-card-container {
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
        margin-top: 0;
    }

    .section-pilares-escolar,
    .section-faq-escolar {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================================
   14. PÁGINA: UNIDAD IB (PREMIUM) (Figma 1:1 + Línea Dorada + 2 Enfoques)
   ========================================================================== */

/* Hero Unidad IB */
.hero-ib {
    position: relative;
    background: radial-gradient(circle at 50% 15%, rgba(229, 168, 36, 0.18) 0%, rgba(7, 21, 48, 0.98) 75%, #071530 100%), #071530;
    padding-top: 4.5rem;
    padding-bottom: 6rem;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 1024px) {
    .hero-ib {
        padding-top: 5.5rem;
        padding-bottom: 7.5rem;
    }
}

.hero-ib-bottom-gold-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #B45309 0%, #F59E0B 50%, #B45309 100%);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
}

.hero-ib-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 380px;
    background: radial-gradient(circle, rgba(229, 168, 36, 0.16) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Fondo Matemático Unidad IB Premium Dinámico */
.hero-ib-math-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-ib-math-svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

@keyframes ibFloatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0.4deg);
    }
}

@keyframes ibFloatRev {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(7px) rotate(-0.4deg);
    }
}

@keyframes ibPulseGlow {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

.anim-ib-float-slow {
    transform-origin: center;
    animation: ibFloatSlow 8.5s ease-in-out infinite;
}

.anim-ib-float-rev {
    transform-origin: center;
    animation: ibFloatRev 9.5s ease-in-out infinite;
}

.ib-float-sym {
    transform-origin: center;
    animation: ibPulseGlow 6s ease-in-out infinite;
}

.sym-ib-int { animation-delay: 0.8s; }
.sym-ib-nabla { animation-delay: 1.8s; }
.sym-ib-partial { animation-delay: 2.8s; }
.sym-ib-lambda { animation-delay: 3.8s; }
.sym-ib-sigma { animation-delay: 4.8s; }
.sym-ib-sets { animation-delay: 5.6s; }

@media (max-width: 768px) {
    .hero-ib-math-svg {
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anim-ib-float-slow,
    .anim-ib-float-rev,
    .ib-float-sym {
        animation: none !important;
    }
}

.hero-ib-content {
    max-width: 840px;
    margin: 0 auto;
}

.hero-pill-badge-ib {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem;
    background-color: rgba(229, 168, 36, 0.15);
    border: 1px solid rgba(229, 168, 36, 0.4);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #F59E0B;
    margin-bottom: 1.5rem;
}

.hero-pill-dot-gold {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #F59E0B;
    box-shadow: 0 0 8px #F59E0B;
}

.hero-ib-title {
    font-size: 2.75rem;
    line-height: 1.05;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin-bottom: 0.875rem;
}

@media (min-width: 768px) {
    .hero-ib-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .hero-ib-title {
        font-size: 4.25rem;
    }
}

.hero-ib-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: #FBBF24;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .hero-ib-subtitle {
        font-size: 1.375rem;
    }
}

.hero-ib-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #CBD5E1;
    max-width: 680px;
    margin: 0 auto 2.25rem auto;
}

@media (min-width: 640px) {
    .hero-ib-desc {
        font-size: 1.0625rem;
    }
}

.hero-ib-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .hero-ib-actions {
        flex-direction: row;
        gap: 1.25rem;
    }
}

.btn-outline-ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(229, 168, 36, 0.4);
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline-ib:hover {
    background: rgba(229, 168, 36, 0.15);
    border-color: #F59E0B;
    color: #F59E0B;
}

.hero-ib-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
    color: #CBD5E1;
}

.trust-item-ib {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Sección Materias IB Card */
.section-ib-materias {
    background-color: #F8FAFC;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    position: relative;
}

@media (min-width: 1024px) {
    .section-ib-materias {
        padding-top: 0;
        padding-bottom: 5.5rem;
    }
}

.ib-card-container {
    background-color: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 25px 60px -20px rgba(0, 15, 45, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
    padding: 2.25rem 1.5rem;
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
    .ib-card-container {
        border-radius: 32px;
        padding: 4rem 3.5rem;
        margin-top: -4rem; /* Superposición armónica que deja espacio superior respirable */
    }
}

.section-badge-pill-ib {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #B45309;
    background-color: #FEF3C7;
    border: 1px solid #FDE68A;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* BLOQUE 1: Las 2 Grandes Ramas (AA vs AI) */
.grid-ib-branches {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
    .grid-ib-branches {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

.branch-card {
    background-color: #FFFFFF;
    border: 2px solid #E2E8F0;
    border-radius: 24px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.branch-card:hover {
    border-color: #1873CA;
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -10px rgba(24, 115, 202, 0.15);
}

.branch-title {
    font-size: 1.375rem;
    font-weight: 900;
    color: #04103B;
    line-height: 1.25;
    margin-bottom: 0.75rem;
}

.branch-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #64748B;
    margin-bottom: 1.25rem;
}

.branch-levels-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.level-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background-color: #F1F5F9;
    color: #475569;
}

.active-level {
    background-color: #E0F2FE;
    color: #0369A1;
    border: 1px solid #BAE6FD;
}

.branch-topics-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.5;
}

.btn-card-ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    background-color: #F8FAFC;
    border: 1px solid #CBD5E1;
    color: #04103B;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-card-ib:hover {
    background-color: #1873CA;
    border-color: #1873CA;
    color: #FFFFFF;
}

/* BLOQUE 2: Subtítulos y Grid de 7 Materias IB */
.ib-subtopics-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 2rem auto;
}

.subtopics-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #04103B;
    margin-bottom: 0.35rem;
}

.subtopics-subtitle {
    font-size: 0.875rem;
    color: #64748B;
}

.grid-materias-ib {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-bottom: 3rem;
}

@media (min-width: 640px) {
    .grid-materias-ib {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .grid-materias-ib {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }
}

.materia-ib-pill {
    background-color: #F8FAFC;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-decoration: none;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 80px;
}

.materia-ib-pill:hover {
    background-color: #FFFFFF;
    border-color: #BAE6FD;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -6px rgba(24, 115, 202, 0.12), 0 0 0 1.5px #1873CA;
}

.materia-ib-pill-highlight {
    background: linear-gradient(135deg, #FFFBEB 0%, #FFFFFF 100%);
    border-color: #FDE68A;
}

.materia-ib-pill-highlight:hover {
    border-color: #F59E0B;
    box-shadow: 0 10px 24px -6px rgba(245, 158, 11, 0.18), 0 0 0 1.5px #F59E0B;
}

.materia-ib-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1873CA;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.materia-ib-pill:hover .materia-ib-icon {
    transform: scale(1.15);
}

.materia-ib-text {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #04103B;
    line-height: 1.35;
}

/* Banner de Mentoría en Internal Assessment (IA) */
.ib-ia-mentorship-banner {
    padding: 2rem 2.25rem;
    background: linear-gradient(135deg, #071530 0%, #0F244F 100%);
    border-radius: 20px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .ib-ia-mentorship-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.ia-banner-badge {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-size: 0.6875rem;
    font-weight: 800;
    color: #F59E0B;
    letter-spacing: 0.08em;
}

.ia-banner-content {
    max-width: 650px;
}

.ia-banner-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.5rem;
}

.ia-banner-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #CBD5E1;
}

.ia-banner-desc strong {
    color: #FBBF24;
}

/* Sección Pilares IB */
.section-pilares-ib {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-pilares-ib {
        padding-top: 5rem;
        padding-bottom: 5.5rem;
    }
}

.pilares-ib-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .pilares-ib-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.pilar-ib-card {
    background-color: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.25rem 1.75rem;
    transition: all 0.25s ease;
}

.pilar-ib-card:hover {
    background-color: #FFFFFF;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.06);
    border-color: #FDE68A;
    transform: translateY(-3px);
}

.pilar-ib-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pilar-ib-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #04103B;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.pilar-ib-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
}

/* Sección FAQ IB */
.section-faq-ib {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-faq-ib {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }
}

/* Blindaje de espaciado móvil compacto IB */
@media (max-width: 640px) {
    .hero-ib {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .hero-ib-title {
        font-size: 2.25rem;
    }

    .section-ib-materias {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .ib-card-container {
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
        margin-top: 0;
    }

    .section-pilares-ib,
    .section-faq-ib {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================================
   15. PÁGINA: UNIDAD PREUNIVERSITARIA (Figma 1:1 + Filtro Pills Centros Pre)
   ========================================================================== */

/* Hero Unidad Preuniversitaria */
.hero-pre {
    position: relative;
    background: radial-gradient(circle at 50% 15%, rgba(2, 132, 199, 0.22) 0%, rgba(7, 21, 48, 0.98) 75%, #071530 100%), #071530;
    padding-top: 4.5rem;
    padding-bottom: 6rem;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 1024px) {
    .hero-pre {
        padding-top: 5.5rem;
        padding-bottom: 7.5rem;
    }
}

.hero-pre-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 680px;
    height: 380px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Fondo Matemático Unidad Preuniversitaria Dinámico */
.hero-pre-math-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-pre-math-svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

@keyframes preFloatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0.4deg);
    }
}

@keyframes preFloatRev {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(7px) rotate(-0.4deg);
    }
}

@keyframes prePulseGlow {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.08);
    }
}

.anim-pre-float-slow {
    transform-origin: center;
    animation: preFloatSlow 8s ease-in-out infinite;
}

.anim-pre-float-rev {
    transform-origin: center;
    animation: preFloatRev 9s ease-in-out infinite;
}

.pre-float-sym {
    transform-origin: center;
    animation: prePulseGlow 6s ease-in-out infinite;
}

.sym-pre-sum { animation-delay: 0.9s; }
.sym-pre-log { animation-delay: 2s; }
.sym-pre-theta { animation-delay: 3.1s; }
.sym-pre-root { animation-delay: 4.2s; }
.sym-pre-inf { animation-delay: 5s; }
.sym-pre-c { animation-delay: 5.8s; }

@media (max-width: 768px) {
    .hero-pre-math-svg {
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anim-pre-float-slow,
    .anim-pre-float-rev,
    .pre-float-sym {
        animation: none !important;
    }
}

.hero-pre-content {
    max-width: 820px;
    margin: 0 auto;
}

.hero-pill-badge-pre {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem;
    background-color: rgba(2, 132, 199, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #38BDF8;
    margin-bottom: 1.5rem;
}

.hero-pill-dot-pre {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #38BDF8;
    box-shadow: 0 0 8px #38BDF8;
}

.hero-pre-title {
    font-size: 2.75rem;
    line-height: 1.05;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin-bottom: 0.875rem;
}

@media (min-width: 768px) {
    .hero-pre-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .hero-pre-title {
        font-size: 4.25rem;
    }
}

.hero-pre-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: #38BDF8;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .hero-pre-subtitle {
        font-size: 1.375rem;
    }
}

.hero-pre-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #94A3B8;
    max-width: 680px;
    margin: 0 auto 2.25rem auto;
}

@media (min-width: 640px) {
    .hero-pre-desc {
        font-size: 1.0625rem;
    }
}

.hero-pre-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .hero-pre-actions {
        flex-direction: row;
        gap: 1.25rem;
    }
}

.btn-outline-pre {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline-pre:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.hero-pre-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
    color: #CBD5E1;
}

.trust-item-pre {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Sección Materias Pre */
.section-pre-materias {
    background-color: #F8FAFC;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    position: relative;
}

@media (min-width: 1024px) {
    .section-pre-materias {
        padding-top: 0;
        padding-bottom: 5.5rem;
    }
}

.pre-card-container {
    background-color: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 25px 60px -20px rgba(0, 15, 45, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
    padding: 2.25rem 1.5rem;
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
    .pre-card-container {
        border-radius: 32px;
        padding: 4rem 3.5rem;
        margin-top: -4rem;
    }
}

.section-badge-pill-pre {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--color-primary);
    background-color: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

/* Filtro de Píldoras Centros Pre (Figma 1:1) */
.pre-universidades-filter {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
    .pre-universidades-filter {
        justify-content: center;
        gap: 0.75rem;
    }
}

.pre-pill-btn {
    background-color: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 9999px;
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #04103B;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pre-pill-btn:hover {
    border-color: #0B1B3D;
    background-color: #F8FAFC;
    transform: translateY(-2px);
}

.pre-pill-btn.active {
    background-color: #0B1B3D;
    color: #FFFFFF;
    border-color: #0B1B3D;
    box-shadow: 0 4px 14px rgba(11, 27, 61, 0.22);
}

/* Caja de Contexto Dinámico */
.pre-context-box {
    background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.context-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: #0369A1;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.context-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #334155;
    max-width: 780px;
    margin: 0 auto;
}

/* Grid de las 7 Materias Pre */
.grid-materias-pre {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 3rem;
}

@media (min-width: 640px) {
    .grid-materias-pre {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (min-width: 1024px) {
    .grid-materias-pre {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

.materia-pre-card {
    background-color: #F8FAFC;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 2.25rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 190px;
    justify-content: flex-start;
}

.materia-pre-card:hover {
    background-color: #FFFFFF;
    border-color: #BAE6FD;
    transform: translateY(-5px);
    box-shadow: 0 16px 32px -8px rgba(24, 115, 202, 0.14), 0 0 0 1.5px #1873CA;
}

.materia-pre-card-highlight {
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
    border-color: #FDE68A;
}

.materia-pre-card-highlight:hover {
    border-color: #F59E0B;
    box-shadow: 0 16px 32px -8px rgba(245, 158, 11, 0.18), 0 0 0 1.5px #F59E0B;
}

.materia-pre-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(24, 115, 202, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: #1873CA;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.materia-pre-card:hover .materia-pre-icon {
    transform: scale(1.1);
    background-color: #1873CA;
}

.materia-pre-card:hover .materia-pre-icon svg {
    stroke: #FFFFFF !important;
}

.materia-pre-card-highlight:hover .materia-pre-icon {
    background-color: #F59E0B;
}

.materia-pre-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #04103B;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.materia-pre-desc {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #64748B;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.materia-pre-link {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1873CA;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: transform 0.2s ease;
}

.materia-pre-card:hover .materia-pre-link {
    transform: translateX(4px);
}

/* Callout Rescate Pre */
.pre-callout-footer {
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #071530 0%, #0F244F 100%);
    border-radius: 20px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .pre-callout-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* Sección Pilares Estratégicos Pre */
.section-pilares-pre {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-pilares-pre {
        padding-top: 5rem;
        padding-bottom: 5.5rem;
    }
}

.pilares-pre-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .pilares-pre-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.pilar-pre-card {
    background-color: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.pilar-pre-card:hover {
    background-color: #FFFFFF;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.06);
    border-color: #BAE6FD;
    transform: translateY(-3px);
}

.pilar-pre-num {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-size: 2.75rem;
    font-weight: 900;
    color: rgba(2, 132, 199, 0.12);
    line-height: 1;
    user-select: none;
}

.pilar-pre-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #E0F2FE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pilar-pre-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #04103B;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.pilar-pre-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
}

/* Sección FAQ Pre */
.section-faq-pre {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-faq-pre {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }
}

/* Blindaje de espaciado móvil compacto Pre */
@media (max-width: 640px) {
    .hero-pre {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .hero-pre-title {
        font-size: 2.25rem;
    }

    .section-pre-materias {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .pre-card-container {
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
        margin-top: 0;
    }

    .section-pilares-pre,
    .section-faq-pre {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================================
   16. PÁGINA: UNIDAD UNIVERSITARIA (Figma 1:1 + Sidebar de Universidades)
   ========================================================================== */

/* Hero Unidad Universitaria */
.hero-uni {
    position: relative;
    background: radial-gradient(circle at 50% 15%, rgba(2, 132, 199, 0.22) 0%, rgba(7, 21, 48, 0.98) 75%, #071530 100%), #071530;
    padding-top: 4.5rem;
    padding-bottom: 6rem;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 1024px) {
    .hero-uni {
        padding-top: 5.5rem;
        padding-bottom: 7.5rem;
    }
}

.hero-uni-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 380px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Fondo Matemático Unidad Universitaria Dinámico */
.hero-uni-math-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-uni-math-svg {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

@keyframes uniFloatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(0.4deg);
    }
}

@keyframes uniFloatRev {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(7px) rotate(-0.4deg);
    }
}

@keyframes uniPulseGlow {
    0%, 100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.08);
    }
}

.anim-uni-float-slow {
    transform-origin: center;
    animation: uniFloatSlow 8s ease-in-out infinite;
}

.anim-uni-float-rev {
    transform-origin: center;
    animation: uniFloatRev 9s ease-in-out infinite;
}

.uni-float-sym {
    transform-origin: center;
    animation: uniPulseGlow 6s ease-in-out infinite;
}

.sym-uni-int3 { animation-delay: 0.8s; }
.sym-uni-oint { animation-delay: 1.9s; }
.sym-uni-curl { animation-delay: 3s; }
.sym-uni-lambda { animation-delay: 4.1s; }
.sym-uni-lap { animation-delay: 5s; }
.sym-uni-r3 { animation-delay: 5.7s; }

@media (max-width: 768px) {
    .hero-uni-math-svg {
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .anim-uni-float-slow,
    .anim-uni-float-rev,
    .uni-float-sym {
        animation: none !important;
    }
}

.hero-uni-content {
    max-width: 820px;
    margin: 0 auto;
}

.hero-pill-badge-uni {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.875rem;
    background-color: rgba(2, 132, 199, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #38BDF8;
    margin-bottom: 1.5rem;
}

.hero-uni-title {
    font-size: 2.75rem;
    line-height: 1.05;
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin-bottom: 0.875rem;
}

@media (min-width: 768px) {
    .hero-uni-title {
        font-size: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .hero-uni-title {
        font-size: 4.25rem;
    }
}

.hero-uni-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: #38BDF8;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .hero-uni-subtitle {
        font-size: 1.375rem;
    }
}

.hero-uni-desc {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #94A3B8;
    max-width: 680px;
    margin: 0 auto 2.25rem auto;
}

@media (min-width: 640px) {
    .hero-uni-desc {
        font-size: 1.0625rem;
    }
}

.hero-uni-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .hero-uni-actions {
        flex-direction: row;
        gap: 1.25rem;
    }
}

.btn-outline-uni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-outline-uni:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.hero-uni-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8125rem;
    color: #CBD5E1;
}

.trust-item-uni {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Sección Catálogo Universitario */
.section-uni-catalogo {
    background-color: #F8FAFC;
    padding-top: 1.5rem;
    padding-bottom: 4rem;
    position: relative;
}

@media (min-width: 1024px) {
    .section-uni-catalogo {
        padding-top: 0;
        padding-bottom: 5.5rem;
    }
}

.uni-card-container {
    background-color: #FFFFFF;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 25px 60px -20px rgba(0, 15, 45, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
    padding: 2.25rem 1.5rem;
    position: relative;
    z-index: 10;
}

@media (min-width: 1024px) {
    .uni-card-container {
        border-radius: 32px;
        padding: 4rem 3.5rem;
        margin-top: -4rem;
    }
}

/* Layout Sidebar + Grid (Figma 1:1) */
.uni-catalog-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .uni-catalog-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 3rem;
        align-items: start;
    }
}

/* Sidebar Box */
.uni-sidebar-box {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 24px;
    padding: 1.75rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

@media (min-width: 1024px) {
    .uni-sidebar-box {
        position: sticky;
        top: 90px;
    }
}

.uni-sidebar-title-row {
    margin-bottom: 1rem;
    padding-left: 0.5rem;
}

.uni-sidebar-label {
    font-size: 0.75rem;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 0.08em;
}

.uni-sidebar-list {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) {
    .uni-sidebar-list {
        flex-direction: column;
        overflow-x: visible;
        padding-bottom: 0;
    }
}

.uni-tab-btn {
    padding: 0.75rem 1.25rem;
    border-radius: 14px;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #94A3B8;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.uni-tab-btn:hover {
    color: #04103B;
    background-color: #F8FAFC;
}

.uni-tab-btn.active {
    background-color: #1873CA;
    color: #FFFFFF;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(24, 115, 202, 0.3);
}

/* Sidebar Callout Ayuda */
.sidebar-help-card {
    display: none;
    margin-top: 2rem;
    padding: 1.25rem;
    background: #F8FAFC;
    border-radius: 16px;
    border: 1px dashed #CBD5E1;
}

@media (min-width: 1024px) {
    .sidebar-help-card {
        display: block;
    }
}

.sidebar-help-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #04103B;
    margin-bottom: 0.35rem;
}

.sidebar-help-desc {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 0.75rem;
}

.sidebar-help-btn {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1873CA;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.sidebar-help-btn:hover {
    text-decoration: underline;
}

/* Contenido Principal de Cursos */
.uni-courses-content {
    display: flex;
    flex-direction: column;
}

.uni-header-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .uni-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.uni-selected-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #04103B;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.uni-selected-subtitle {
    font-size: 0.875rem;
    color: #64748B;
}

.uni-count-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.875rem;
    border-radius: 9999px;
    background-color: #F0F9FF;
    border: 1px solid #BAE6FD;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0369A1;
    width: fit-content;
}

/* Grid de 3 Cursos (Figma 1:1) */
.grid-3-courses {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

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

@media (min-width: 1024px) {
    .grid-3-courses {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

.course-card-uni {
    background-color: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.course-card-uni:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px -8px rgba(0, 15, 45, 0.1);
    border-color: #BAE6FD;
}

.course-img-wrap {
    height: 190px;
    position: relative;
    overflow: hidden;
}

.course-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-card-uni:hover .course-img-wrap img {
    transform: scale(1.05);
}

.course-tag-pill {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    background: rgba(4, 16, 59, 0.85);
    backdrop-filter: blur(4px);
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

.course-body {
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #04103B;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.course-desc {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #64748B;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.course-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
}

.course-price {
    font-size: 1.125rem;
    font-weight: 800;
    color: #04103B;
}

.btn-course-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1.25rem;
    border-radius: 9999px;
    background-color: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    color: #04103B;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-course-buy:hover {
    background-color: #1873CA;
    border-color: #1873CA;
    color: #FFFFFF;
}

/* Callout Especial dentro del Catálogo */
.uni-urgent-callout {
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, #071530 0%, #0F244F 100%);
    border-radius: 20px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .uni-urgent-callout {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.callout-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.35rem;
}

.callout-desc {
    font-size: 0.875rem;
    color: #CBD5E1;
    max-width: 620px;
    line-height: 1.5;
}

/* Sección Pilares Universitarios */
.section-pilares-uni {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-pilares-uni {
        padding-top: 5rem;
        padding-bottom: 5.5rem;
    }
}

.section-badge-pill-uni {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    color: var(--color-primary);
    background-color: #F0F9FF;
    border: 1px solid #BAE6FD;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.pilares-uni-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .pilares-uni-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.pilar-uni-card {
    background-color: #F8FAFC;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.25rem 1.75rem;
    transition: all 0.25s ease;
}

.pilar-uni-card:hover {
    background-color: #FFFFFF;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.06);
    border-color: #BAE6FD;
    transform: translateY(-3px);
}

.pilar-uni-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #E0F2FE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pilar-uni-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #04103B;
    margin-bottom: 0.75rem;
    line-height: 1.35;
}

.pilar-uni-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #475569;
}

/* Sección FAQ Uni */
.section-faq-uni {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
    background-color: #FFFFFF;
    border-top: 1px solid var(--color-border);
}

@media (min-width: 1024px) {
    .section-faq-uni {
        padding-top: 5rem;
        padding-bottom: 6rem;
    }
}

/* Blindaje de espaciado móvil compacto Uni */
@media (max-width: 640px) {
    .hero-uni {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .hero-uni-title {
        font-size: 2.25rem;
    }

    .section-uni-catalogo {
        padding-top: 1.5rem;
        padding-bottom: 2.5rem;
    }

    .uni-card-container {
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
        margin-top: 0;
    }

    .section-pilares-uni,
    .section-faq-uni {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ==========================================================================
   BOLD ACCENT TAG SYSTEM (Precisión Académica & Matemática)
   Rectángulos de esquinas vivas, sólidos, tipografía monoespaciada y símbolos matemáticos
   ========================================================================== */
.bold-accent-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    width: fit-content !important;
    user-select: text !important;
    position: relative !important;
    vertical-align: middle !important;
}

.bold-accent-tag .tag-symbol {
    font-size: 0.875rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-block !important;
    font-family: 'Roboto Mono', monospace, sans-serif !important;
    transform: translateY(-0.5px);
}

.mb-tag {
    margin-bottom: 0.875rem !important;
}

/* Paleta de Colores Sólidos Vibrantes & Alto Contraste */
/* 1. Azul Cobalto Profundo (Técnico, Rigor Académico) */
.bold-accent-tag.tag-cobalt {
    background-color: #0047AB !important;
    color: #FFFFFF !important;
}

/* 2. Amarillo Canario Puro (Alta visibilidad, Premium IB & Alertas críticas) */
.bold-accent-tag.tag-canary {
    background-color: #FFD000 !important;
    color: #071530 !important;
    font-weight: 900 !important;
}

/* 3. Cyan Técnico / Azul Eléctrico (Matemática pura, contraste sobre oscuro) */
.bold-accent-tag.tag-cyan {
    background-color: #0284C7 !important;
    color: #FFFFFF !important;
}

/* 4. Verde Esmeralda Vibrante (Éxito, Aprobación, Cursos) */
.bold-accent-tag.tag-emerald {
    background-color: #059669 !important;
    color: #FFFFFF !important;
}

/* Blindaje de esquinas vivas en tags de cursos y contadores */
.course-tag-pill,
.uni-count-badge {
    border-radius: 0 !important;
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    box-shadow: none !important;
}

/* Normalización retrocompatible de cualquier selector de badge anterior */
.hero-pill-badge,
.hero-pill-badge-escolar,
.hero-pill-badge-ib,
.hero-pill-badge-pre,
.hero-pill-badge-uni,
.section-badge-pill,
.section-badge-pill-ib,
.section-badge-pill-pre,
.section-badge-pill-uni {
    border-radius: 0 !important;
    font-family: 'Roboto Mono', monospace !important;
    letter-spacing: 0.08em !important;
    box-shadow: none !important;
}

/* Erradicación absoluta de halos, brillos o círculos difusos */
.hero-pill-dot,
.hero-pill-dot-sky,
.hero-pill-dot-gold,
.hero-pill-dot-pre {
    display: none !important;
}

/* ==========================================================================
   UNIDAD INTERNACIONAL (Figma 1:1)
   ========================================================================== */
.hero-inter {
    position: relative;
    background: radial-gradient(circle at 50% 20%, rgba(2, 132, 199, 0.18) 0%, rgba(11, 27, 61, 0) 70%),
                linear-gradient(180deg, #071530 0%, #0B1B3D 100%);
    padding-top: 3.5rem;
    padding-bottom: 4rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.hero-inter-glow {
    position: absolute;
    width: 650px;
    height: 350px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(0, 0, 0, 0) 70%);
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

.hero-inter-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-inter-title {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.15;
    color: #FFFFFF;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.hero-inter-subtitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #38BDF8;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.hero-inter-desc {
    font-size: 1rem;
    line-height: 1.65;
    color: #94A3B8;
    margin-bottom: 2rem;
    max-width: 720px;
}

.hero-inter-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
    .hero-inter-actions {
        flex-direction: row;
        justify-content: center;
        gap: 1.25rem;
    }
}

.hero-inter-trust-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.trust-item-inter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #E2E8F0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Sección de Programas Internacionales (Figma 1:1 Imagen 1) */
.section-inter-programas {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
    background-color: #F8FAFC;
    border-bottom: 1px solid var(--color-border);
}

.grid-inter-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .grid-inter-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
}

.inter-card {
    background-color: #071530;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2.25rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px rgba(7, 21, 48, 0.12);
    position: relative;
    overflow: hidden;
}

.inter-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.15) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.inter-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(7, 21, 48, 0.24);
    border-color: rgba(56, 189, 248, 0.4);
}

.inter-card:hover::before {
    opacity: 1;
}

.inter-card-title {
    color: #FFFFFF;
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0;
    font-family: var(--font-heading);
    letter-spacing: -0.01em;
}

.inter-card-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 50%;
    background: #E5A824;
    color: #071530;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(229, 168, 36, 0.45);
    transition: all 0.25s ease;
}

.inter-card:hover .inter-card-btn {
    background: #FFD000;
    transform: scale(1.08) translateX(2px);
    box-shadow: 0 6px 20px rgba(229, 168, 36, 0.65);
}

/* Blindaje responsivo para mobile */
@media (max-width: 640px) {
    .hero-inter {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .hero-inter-title {
        font-size: 2.25rem;
    }

    .section-inter-programas {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }

    .inter-card {
        padding: 1.75rem 1.5rem;
        border-radius: 18px;
    }

    .inter-card-title {
        font-size: 1.15rem;
    }
}

/* ==========================================================================
   TUTORÍA PREMIUM PERSONALIZADA 1 A 1 (Figma 1:1)
   ========================================================================== */
.btn-whatsapp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background-color: #25D366;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.875rem 1.85rem;
    border-radius: 9999px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    cursor: pointer;
    min-height: 48px;
    width: fit-content;
}

.btn-whatsapp-cta:hover {
    background-color: #20BA5C;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    color: #FFFFFF;
}

.btn-whatsapp-cta.w-full {
    width: 100%;
}

/* Hero Premium (Figma 1:1 Imagen 1) */
.hero-premium {
    position: relative;
    background-color: #071530;
    padding-top: 4rem;
    padding-bottom: 4.5rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-premium-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(2, 132, 199, 0.12) 0%, transparent 60%),
                      linear-gradient(180deg, rgba(7, 21, 48, 0.88) 0%, rgba(11, 27, 61, 0.96) 100%);
    pointer-events: none;
}

.hero-premium-glow {
    position: absolute;
    top: 0;
    right: -10%;
    width: 600px;
    height: 100%;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.22) 0%, rgba(7, 21, 48, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.hero-premium-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-premium-title {
    font-size: 2.875rem;
    font-weight: 900;
    line-height: 1.15;
    color: #FFFFFF;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.hero-premium-subtitle {
    font-size: 1.125rem;
    line-height: 1.65;
    color: #CBD5E1;
    margin-bottom: 2rem;
    max-width: 680px;
}

.hero-premium-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 2.5rem;
    width: 100%;
}

.hero-premium-trust-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
}

.trust-item-premium {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #E2E8F0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Sección Solución Exacta (Figma 1:1 Imagen 2) */
.section-premium-solucion {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
    background-color: #F8FAFC;
    border-bottom: 1px solid var(--color-border);
}

.solucion-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2.75rem;
}

@media (min-width: 768px) {
    .solucion-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

.solucion-card {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.solucion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    border-color: #BAE6FD;
}

.solucion-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #E0F2FE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.solucion-card-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-charcoal);
    margin-bottom: 0.65rem;
}

.solucion-card-desc {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #64748B;
}

/* Sección Planes Premium (Figma 1:1 Imagen 3) */
.section-premium-planes {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}

.pricing-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 3rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .pricing-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.75rem;
    }
}

.pricing-card-premium {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    position: relative;
}

.pricing-card-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.pricing-header {
    margin-bottom: 1.5rem;
}

.pricing-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-charcoal);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.pricing-subtitle {
    font-size: 0.875rem;
    color: #64748B;
    line-height: 1.5;
}

.pricing-price-wrap {
    margin-top: auto;
    margin-bottom: 2rem;
    padding-top: 1rem;
}

.pricing-from-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
}

.pricing-amount {
    font-size: 2.75rem;
    font-weight: 900;
    color: #0F172A;
    line-height: 1;
    font-family: var(--font-heading);
}

/* Tarjeta Destacada MÁS RECOMENDADO (Figma 1:1) */
.pricing-card-premium.featured-plan {
    background-color: #071530;
    border: 2px solid #E5A824;
    padding-top: 0;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(7, 21, 48, 0.25);
}

.pricing-featured-badge {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
    color: #071530;
    font-weight: 900;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.65rem 1rem;
    text-align: center;
    margin: 0 -2rem 2rem;
}

.pricing-card-premium.featured-plan .pricing-title {
    color: #FFFFFF;
}

.pricing-card-premium.featured-plan .pricing-subtitle {
    color: #94A3B8;
}

.pricing-amount.featured-amount {
    color: #E5A824;
}

/* Sección Banner CTA Salva tu curso (Figma 1:1 Imagen 4) */
.section-premium-cta {
    padding-top: 4rem;
    padding-bottom: 4.5rem;
    background-color: #F8FAFC;
    border-bottom: 1px solid var(--color-border);
}

.premium-cta-box {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.premium-cta-heading {
    font-size: 2.5rem;
    font-weight: 900;
    color: #071530;
    line-height: 1.2;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.premium-cta-subheading {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 2rem;
    max-width: 620px;
}

/* Blindaje responsivo para mobile */
@media (max-width: 640px) {
    .hero-premium {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .hero-premium-title {
        font-size: 2.125rem;
    }

    .section-premium-solucion,
    .section-premium-planes,
    .section-premium-cta {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }

    .premium-cta-heading {
        font-size: 1.875rem;
    }

    .pricing-card-premium {
        padding: 2rem 1.5rem 1.75rem;
    }

    .pricing-featured-badge {
        margin: 0 -1.5rem 1.75rem;
    }
}

/* ==========================================================================
   PÁGINA SOBRE NOSOTROS (Figma 1:1)
   ========================================================================== */
.hero-nosotros {
    position: relative;
    background-color: #071530;
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-nosotros-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 380px;
    background: radial-gradient(circle, rgba(229, 168, 36, 0.22) 0%, rgba(7, 21, 48, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.hero-nosotros-content {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-nosotros-title {
    font-size: 2.875rem;
    font-weight: 900;
    line-height: 1.15;
    color: #FFFFFF;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.hero-nosotros-subtitle {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: #CBD5E1;
    margin-bottom: 2.5rem;
    max-width: 660px;
}

.hero-nosotros-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
}

.metric-item-nosotros {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.metric-number {
    font-size: 2.25rem;
    font-weight: 900;
    color: #FFD000;
    line-height: 1;
    font-family: var(--font-heading);
}

.metric-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-divider {
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.15);
    display: none;
}

@media (min-width: 640px) {
    .metric-divider {
        display: block;
    }
}

/* Sección Conoce a Víctor (Figma 1:1 Imagen 2) */
.section-fundador {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}

.fundador-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 900px) {
    .fundador-grid {
        grid-template-columns: 5fr 6fr;
        gap: 4rem;
    }
}

.fundador-photo-wrap {
    position: relative;
}

.fundador-photo-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
    background-color: #F1F5F9;
}

.fundador-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.fundador-quote-box {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    left: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

@media (min-width: 640px) {
    .fundador-quote-box {
        left: auto;
        max-width: 340px;
    }
}

.fundador-quote-text {
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-charcoal);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.fundador-quote-author {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #D97706;
}

.fundador-heading {
    font-size: 2.375rem;
    font-weight: 900;
    color: #071530;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.fundador-p {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 1.25rem;
}

.fundador-action {
    margin-top: 2rem;
}

/* Sección Equipo (Figma 1:1 Imagen 3) */
.section-equipo {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    background-color: #F8FAFC;
    border-bottom: 1px solid var(--color-border);
}

.equipo-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-top: 3rem;
}

@media (min-width: 768px) {
    .equipo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

.equipo-card {
    background-color: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    padding: 2.5rem 1.75rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.equipo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.07);
    border-color: #BAE6FD;
}

.equipo-avatar-wrap {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    border: 3px solid #E2E8F0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.equipo-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.equipo-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #071530;
    margin-bottom: 0.35rem;
}

.equipo-role-gold {
    font-size: 0.875rem;
    font-weight: 700;
    color: #D97706;
    margin-bottom: 0.875rem;
}

.equipo-role-blue {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0284C7;
    margin-bottom: 0.875rem;
}

.equipo-desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: #64748B;
}

/* Sección Por Qué Aprender con MATH²UB (Figma 1:1 Imagen 4) */
.section-porque-mathub {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
}

/* Sección Banner CTA ¿Listo para empezar a aprender? (Figma 1:1 Imagen 5) */
.section-listo-aprender {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    background-color: #FFFFFF;
}

.listo-aprender-box {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.listo-aprender-heading {
    font-size: 2.375rem;
    font-weight: 900;
    color: #071530;
    margin-bottom: 1.75rem;
    letter-spacing: -0.02em;
}

.btn-gold-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #E5A824;
    color: #071530;
    font-weight: 800;
    font-size: 0.9375rem;
    padding: 0.875rem 2.25rem;
    border-radius: 9999px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(229, 168, 36, 0.4);
    transition: all 0.25s ease;
    cursor: pointer;
    min-height: 48px;
}

.btn-gold-large:hover {
    background-color: #FFD000;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(229, 168, 36, 0.55);
    color: #071530;
}

/* Blindaje responsivo para mobile */
@media (max-width: 640px) {
    .hero-nosotros {
        padding-top: 2.75rem;
        padding-bottom: 3.25rem;
    }

    .hero-nosotros-title {
        font-size: 2.125rem;
    }

    .section-fundador,
    .section-equipo,
    .section-porque-mathub,
    .section-listo-aprender {
        padding-top: 2.5rem;
        padding-bottom: 3rem;
    }

    .fundador-heading,
    .listo-aprender-heading {
        font-size: 1.875rem;
    }

    .fundador-img {
        height: 380px;
    }
}

/* ==========================================================================
   Checkout Distraction-Free Header (Mobile First & CRO)
   ========================================================================== */
@media (max-width: 768px) {
    .site-header-checkout .checkout-header-inner {
        justify-content: center !important;
        text-align: center !important;
    }
    .site-header-checkout .checkout-header-inner .site-logo {
        margin: 0 auto !important;
    }
    .site-header-checkout .checkout-security-badge {
        display: none !important;
    }
}