/* ============================================================
   MUNDO IDIOMAS · DESIGN SYSTEM 2026
   Sistema de diseño centralizado — Inglés para Docentes
   Carga después de Bootstrap para sobreescribir sus componentes.
   ============================================================ */

:root {
    /* — Tinta / texto / superficies — (navy Stripe-like) */
    --ink:        #0A2540;   /* navy profundo: nav, footer, superficies oscuras */
    --ink-2:      #1E293B;   /* texto principal (slate neutro) */
    --muted:      #64748B;
    --muted-2:    #94A3B8;
    --line:       #E6EBF2;   /* hairlines */
    --line-soft:  #F1F4F9;
    --bg:         #F6F8FC;   /* fondo de la app */
    --bg-grad-1:  #F7F9FD;
    --surface:    #FFFFFF;

    /* — Marca / interacción — (azul profesional de confianza) */
    --brand:      #2563EB;   /* azul royal */
    --brand-700:  #1D4ED8;
    --brand-2:    #1E40AF;   /* azul profundo para degradados */
    --brand-deep: #07203B;   /* navy intenso (heroes de ofertas) */
    --brand-soft: #E8F0FE;
    --cyan-soft:  #ECFEFF;   /* tinte secundario para etiquetas */
    --cyan-ink:   #0E7490;
    --brand-ring: rgba(37, 99, 235, .20);

    /* — Acentos — (naranja cálido complementario, solo para CTAs) */
    --gold:       #F97316;   /* naranja CTA (recomendado / compra) */
    --gold-2:     #EA580C;
    --gold-soft:  #FFF4ED;
    --green:      #22C55E;
    --green-2:    #16A34A;
    --red:        #EF4444;
    --red-2:      #B91C1C;

    /* — Categorías de archivo (acordeón) — */
    --f-folder:   #F59E0B;
    --f-pdf:      #EF4444;
    --f-zip:      #06B6D4;
    --f-app:      #2563EB;
    --f-text:     #64748B;

    /* — Sombras estratificadas y suaves — */
    --shadow-xs:  0 1px 2px rgba(16,24,40,.05);
    --shadow-sm:  0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --shadow-md:  0 10px 20px -8px rgba(16,24,40,.10), 0 4px 8px -4px rgba(16,24,40,.06);
    --shadow-lg:  0 24px 48px -16px rgba(16,24,40,.20);
    --shadow-brand: 0 14px 28px -10px rgba(37,99,235,.45);

    /* — Radios — */
    --r-xs: 8px;
    --r-sm: 12px;
    --r:    18px;
    --r-lg: 24px;
    --r-xl: 30px;
    --r-pill: 999px;

    /* — Transición base — */
    --ease: cubic-bezier(.22,.61,.36,1);
}

* { scrollbar-color: var(--muted-2) transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    background:
        radial-gradient(1200px 600px at 100% -10%, #E6F0FE 0%, rgba(230,240,254,0) 55%),
        radial-gradient(1000px 520px at -10% 0%, #EFF5FF 0%, rgba(239,245,255,0) 48%),
        var(--bg);
    background-attachment: fixed;
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

::selection { background: var(--brand); color: #fff; }

/* ============================================================
   NAVBAR · barra glass premium
   ============================================================ */
.navbar {
    background: rgba(10, 37, 64, .82) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.07);
    box-shadow: 0 8px 30px -16px rgba(0,0,0,.6);
    padding: .7rem 0;
}

.navbar-brand .brand-logo {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.30);
    border: 1px solid rgba(255,255,255,.12);
}
.navbar-brand .brand-title {
    font-size: 1.1rem; font-weight: 800; line-height: 1;
    color: #fff; letter-spacing: -.4px;
}
.navbar-brand .brand-sub {
    font-size: .62rem; font-weight: 700; letter-spacing: 2px;
    color: var(--gold); text-transform: uppercase;
}

/* Enlaces de navegación tipo "pill" */
.style-nav,
.navbar .nav-link {
    color: rgba(255,255,255,.72) !important;
    font-weight: 600; font-size: .92rem;
    padding: .5rem 1rem !important;
    border-radius: var(--r-pill);
    transition: color .2s var(--ease), background .2s var(--ease);
    position: relative;
}
.style-nav:hover,
.navbar .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08);
}
.nav-link.nav-cta {
    color: #FDBA74 !important;
    background: rgba(249,115,22,.14);
    border: 1px solid rgba(249,115,22,.30);
}
.nav-link.nav-cta:hover {
    color: #fff !important;
    background: var(--gold);
    border-color: var(--gold);
}

.navbar-toggler { border: 0 !important; }
.navbar-toggler:focus { box-shadow: none; }

/* Buscador minimalista */
.search-shell {
    display: flex; align-items: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--r-pill);
    padding: 4px 4px 4px 16px;
    transition: border .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.search-shell:focus-within {
    background: rgba(255,255,255,.16);
    border-color: rgba(96,165,250,.7);
    box-shadow: 0 0 0 4px rgba(37,99,235,.20);
}
.search-shell .search-input {
    background: transparent; border: 0; outline: none; box-shadow: none;
    color: #fff; font-size: .88rem; font-weight: 500; width: 170px;
}
.search-shell .search-input::placeholder { color: rgba(255,255,255,.55); }
.search-shell .search-btn {
    border: 0; border-radius: var(--r-pill);
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.search-shell .search-btn:hover { box-shadow: 0 0 0 4px var(--brand-ring); transform: scale(1.05); }

/* ============================================================
   HERO
   ============================================================ */
.hero-section,
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #07203B 0%, #103A73 55%, #1D4ED8 100%);
    color: #fff; padding: 104px 0 96px;
    text-align: center;
}
.hero-section::before,
.hero::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(700px 300px at 80% -10%, rgba(59,130,246,.50), transparent 60%),
        radial-gradient(600px 280px at 10% 120%, rgba(249,115,22,.16), transparent 55%);
    pointer-events: none;
}
.hero-section .container,
.hero .container { position: relative; z-index: 2; }
.hero-section h1,
.hero h1 {
    font-weight: 800; letter-spacing: -1.5px;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
    color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; padding: .5rem 1.1rem; border-radius: var(--r-pill);
    margin-bottom: 1.3rem; backdrop-filter: blur(6px);
}
.hero-eyebrow i { color: var(--gold); }

/* Hero de ofertas / packs (navy intenso, mismo azul de marca + destello naranja) */
.hero-ofertas, .hero-oferta {
    position: relative; overflow: hidden; color: #fff; text-align: center;
    background: linear-gradient(135deg, var(--brand-deep) 0%, #1E3A8A 55%, var(--brand) 100%);
}
.hero-ofertas { padding: 88px 0; }
.hero-oferta  { padding: 50px 0 110px; margin-bottom: -80px; }
.hero-ofertas::before, .hero-oferta::before {
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(600px 280px at 85% -10%, rgba(249,115,22,.30), transparent 60%),
        radial-gradient(500px 240px at 10% 110%, rgba(59,130,246,.35), transparent 60%);
    pointer-events:none;
}
.hero-ofertas .container, .hero-oferta .container { position: relative; z-index: 2; }

/* ============================================================
   TÍTULOS DE SECCIÓN
   ============================================================ */
.section-title {
    font-weight: 800; text-transform: uppercase; color: var(--ink);
    letter-spacing: -.3px; font-size: 1.4rem;
    display: flex; align-items: center; gap: .85rem;
    margin-bottom: 2rem;
}
.section-title::before {
    content: ""; width: 6px; height: 1.5rem; border-radius: var(--r-pill);
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

/* ============================================================
   TARJETAS DE PRODUCTO
   ============================================================ */
.card { border: 0; }

.product-card, .card-oferta, .blog-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover, .card-oferta:hover, .blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg) !important;
    border-color: #DDE3F0;
}

.product-card .card-img-top,
.card-oferta .card-img-top {
    transition: transform .6s var(--ease);
}
.product-card:hover .card-img-top { transform: scale(1.04); }

.product-card .card-body,
.card-oferta .card-body { padding: 1.5rem !important; }

.product-card h5,
.card-oferta .card-title {
    font-weight: 800; letter-spacing: -.4px; line-height: 1.3;
    color: var(--ink);
}

/* Etiquetas / badges estilizadas */
.badge,
.tag {
    font-weight: 700; font-size: .72rem; letter-spacing: .1px;
    padding: .5em .85em; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; gap: .35em;
    border: 1px solid transparent;
}
.tag-eng   { background: var(--brand-soft); color: var(--brand-700); border-color: #CFE0FD; }
.tag-books { background: var(--cyan-soft);  color: var(--cyan-ink);  border-color: #CFFAFE; }
.tag-os    { background: #F1F5F9;           color: #334155;          border-color: var(--line); }

/* Botón "Ver Detalles" */
.btn-detail,
.product-card .btn-primary,
.card-oferta .btn-primary {
    --b1: var(--ink); --b2: #1E293B;
    background: linear-gradient(135deg, var(--b1), var(--b2)) !important;
    color: #fff !important; border: 0 !important;
    border-radius: var(--r-sm) !important;
    font-weight: 700; font-size: .9rem; letter-spacing: .2px;
    padding: .8rem 1rem !important;
    position: relative; overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.card-oferta .btn-primary { --b1: var(--brand); --b2: var(--brand-2); }

.btn-detail::after,
.product-card .btn-primary::after,
.card-oferta .btn-primary::after {
    content: ""; position: absolute; top: 0; left: -120%;
    width: 80%; height: 100%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
    transition: left .6s var(--ease);
}
.btn-detail:hover, .product-card .btn-primary:hover, .card-oferta .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: #fff !important;
}
.btn-detail:hover::after,
.product-card .btn-primary:hover::after,
.card-oferta .btn-primary:hover::after { left: 130%; }

/* Cinta "PACK RECOMENDADO" */
.badge-promo {
    position: absolute; top: 16px; left: 16px; z-index: 10;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: var(--ink); font-weight: 800; font-size: .68rem;
    letter-spacing: .6px; text-transform: uppercase;
    padding: .5rem 1rem; border-radius: var(--r-pill);
    box-shadow: 0 8px 18px -6px rgba(249,115,22,.6);
}

/* ============================================================
   PÁGINA PRODUCTO · ficha, botones, notas
   ============================================================ */
.detail-card {
    border-radius: var(--r-lg); border: 1px solid var(--line);
    border-top: 4px solid var(--brand);
    background: var(--surface); padding: 30px 26px !important;
    box-shadow: var(--shadow-md) !important;
}
.pack-content-card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
    padding: 30px 26px; margin-top: 20px;
}
.video-container-top {
    max-width: 860px; margin: 0 auto; border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow-lg);
    background: #000; border: 5px solid #fff; position: relative; z-index: 10;
}
.desc-renderizada { font-size: 1rem; line-height: 1.75; color: #334155; }
.desc-renderizada ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.desc-renderizada li { margin-bottom: .55rem; }

.btn-hotmart-compra {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
    color: #fff !important; border: 0; border-radius: var(--r-pill);
    padding: 16px 32px; font-size: 1.08rem; font-weight: 800; letter-spacing: .2px;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; width: 100%; margin-bottom: 15px;
    box-shadow: 0 12px 24px -8px rgba(249,115,22,.55);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn-hotmart-compra:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -8px rgba(249,115,22,.65); color:#fff; }

.btn-whatsapp-premium {
    background: linear-gradient(135deg, var(--green), var(--green-2));
    color: #fff; border: 0; border-radius: var(--r-pill);
    padding: 16px 32px; font-size: 1.08rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; width: 100%;
    box-shadow: 0 12px 24px -8px rgba(34,197,94,.5);
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.btn-whatsapp-premium:hover { transform: translateY(-2px); color:#fff; }

.nota-acceso-gmail {
    background: linear-gradient(180deg, #FFFBEB, #FEF3C7);
    border: 1px solid #FCD34D; color: #78350F;
    padding: 18px; border-radius: var(--r); font-size: .9rem; line-height: 1.55;
    text-align: left; margin-bottom: 15px; box-shadow: var(--shadow-xs);
}

.breadcrumb-box {
    display: inline-block; background: rgba(255,255,255,.12);
    padding: 7px 22px; border-radius: var(--r-pill);
    backdrop-filter: blur(8px); margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.16);
}
.breadcrumb-item { font-size: .85rem; font-weight: 600; }
.breadcrumb-item a { color: rgba(255,255,255,.82) !important; text-decoration: none; transition: color .2s; }
.breadcrumb-item a:hover { color: #fff !important; }
.breadcrumb-item.active { color: #fff !important; font-weight: 800; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.45); }

/* ============================================================
   ACORDEÓN DE NIVELES · limpio y elegante
   (los iconos los pinta la lógica PHP; aquí solo el contenedor)
   ============================================================ */
.accordion { --bs-accordion-border-color: transparent; }

.accordion-item {
    border: 1px solid var(--line) !important;
    border-radius: var(--r) !important;
    overflow: hidden; margin-bottom: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.accordion-item:has(.accordion-button:not(.collapsed)) {
    box-shadow: var(--shadow-md);
    border-color: #CFE0FD !important;
}

.accordion-button {
    font-weight: 800 !important; color: var(--ink) !important;
    font-size: 1.02rem; padding: 1.15rem 1.35rem !important;
    background: var(--surface) !important;
    letter-spacing: -.2px;
}
.accordion-button:focus { box-shadow: none; }
.accordion-button:not(.collapsed) {
    background: linear-gradient(180deg, var(--brand-soft), #fff) !important;
    color: var(--brand-700) !important;
    box-shadow: inset 0 -1px 0 var(--line);
}
.accordion-button::after {
    width: 1.6rem; height: 1.6rem; background-size: 1rem;
    border-radius: 50%; background-position: center;
    background-color: var(--brand-soft);
    transition: transform .3s var(--ease), background .2s var(--ease);
}
.accordion-button:not(.collapsed)::after { background-color: #CFE0FD; }

.accordion-body { padding: .65rem 1rem 1.1rem !important; background: #FCFDFF; }

.accordion-body .list-group-item {
    border: 0 !important; background: transparent !important;
    padding: .55rem .65rem !important; border-radius: var(--r-xs);
    display: flex; align-items: center;
    transition: background .18s var(--ease);
}
.accordion-body .list-group-item:hover { background: var(--brand-soft) !important; }

/* Contenedor estilizado del icono de archivo */
.file-icon {
    flex: 0 0 40px; width: 40px; height: 40px;
    display: grid; place-items: center; margin-right: .9rem;
    border-radius: var(--r-xs); font-size: 1.15rem;
    background: var(--line-soft); border: 1px solid var(--line);
}
.file-icon .bi-folder-fill        { color: var(--f-folder); }
.file-icon .bi-file-earmark-pdf-fill { color: var(--f-pdf); }
.file-icon .bi-file-earmark-zip-fill { color: var(--f-zip); }
.file-icon .bi-display-fill       { color: var(--f-app); }
.file-icon .bi-file-earmark-text  { color: var(--f-text); }
/* tinte de fondo segun tipo */
.file-icon:has(.bi-folder-fill)        { background: #FFF7ED; border-color: #FFE6CC; }
.file-icon:has(.bi-file-earmark-pdf-fill) { background: #FEF2F2; border-color: #FECACA; }
.file-icon:has(.bi-file-earmark-zip-fill) { background: #ECFEFF; border-color: #CFFAFE; }
.file-icon:has(.bi-display-fill)       { background: #EFF6FF; border-color: #DBEAFE; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-content { font-size: 1.1rem; line-height: 1.85; color: #334155; }
.blog-content p { margin-bottom: 1.5rem; }
.blog-content img { max-width: 100%; height: auto; border-radius: var(--r); margin: 1rem 0; box-shadow: var(--shadow-sm); }

.btn-outline-primary {
    color: var(--brand); border-color: #BFD3FB; border-radius: var(--r-sm); font-weight: 700;
}
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-secondary { border-radius: var(--r-sm); padding: 10px 20px; font-weight: 600; border-color: #CBD5E1; color: #475569; }
.btn-outline-secondary:hover { background: #F1F5F9; color: var(--ink); border-color: #94A3B8; }

.video-responsive { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; margin-bottom: 2rem; box-shadow: var(--shadow-md); border-radius: var(--r); }
.video-responsive iframe { left:0; top:0; height:100%; width:100%; position:absolute; border:0; border-radius: var(--r); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer, .site-footer {
    background: var(--ink); color: rgba(255,255,255,.62);
    border-top: 1px solid rgba(255,255,255,.06);
}
.bg-dark { background-color: var(--ink) !important; }

/* ============================================================
   BOTÓN FLOTANTE WHATSAPP
   ============================================================ */
.whatsapp-float {
    position: fixed; width: 60px; height: 60px; bottom: 32px; right: 32px;
    background: linear-gradient(135deg, var(--green), var(--green-2)); color: #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 30px; text-decoration: none; z-index: 1000;
    box-shadow: 0 14px 30px -8px rgba(34,197,94,.6);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.whatsapp-float::before {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(34,197,94,.4); animation: wa-pulse 2.2s var(--ease) infinite;
}
.whatsapp-float:hover { transform: scale(1.08); color: #fff; }
@keyframes wa-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991px) {
    .navbar-collapse { padding-top: .75rem; }
    .search-shell { margin-top: .6rem; }
    .search-shell .search-input { width: 100%; }
}
@media (max-width: 768px) {
    .hero-section, .hero { padding: 72px 0 64px; }
    .hero-oferta { padding: 35px 0 90px; }
    .pack-content-card { padding: 20px 16px; }
    .display-4 { font-size: 2rem; }
    .whatsapp-float { width: 52px; height: 52px; bottom: 20px; right: 20px; font-size: 25px; }
}