/* ============================================================
   ASR · asr-v2.css
   Chrome compartido del rediseño 2026 para TODAS las páginas
   interiores: tokens, tipografía de marca, botones, franja promo,
   navbar glass, footer oscuro, cards poster y foco accesible.
   Carga después de bootstrap y main.css (el orden gana).
   La home usa su propia hoja (inicio.css) con este mismo sistema.
   ============================================================ */

:root{
  --azul:#2563EB; --azul-dark:#1D4ED8; --azul-light:#EFF6FF;
  --naranja:#F59E0B; --naranja-dark:#D97706;
  --marino:#0B1B3A; --marino-2:#13284f;
  --ink:#0F172A; --g900:#1E293B; --g700:#334155; --g500:#64748B;
  --g400:#94A3B8; --g300:#CBD5E1; --g200:#E2E8F0; --g100:#F1F5F9; --g50:#F8FAFC;
  --verde:#16A34A; --rojo:#DC2626;
  --dorado:#FBBF45;    /* acento dorado de kickers/eyebrows sobre fondo oscuro */
  --dorado-2:#FBBF24;  /* tono claro de los degradados naranja (promo, avatar) */
  --r-sm:6px; --r:10px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.08);
  --sh-2:0 6px 16px rgba(15,23,42,.08);
  --sh-3:0 18px 40px rgba(11,27,58,.20);
  --ring:0 0 0 4px rgba(37,99,235,.18);
  --maxw:1160px; --pad:22px;
  --sec:76px;
  --lh:1.6;            /* interlineado base del cuerpo, único en el sitio */
  /* ── Alias de los tokens viejos (--asr-*) usados por main.css y
     catalogo.css. Fuente ÚNICA de valores: aquí. Los colores apuntan a los
     tokens nuevos (unifica el gris de texto a --g700); radios y sombras se
     mantienen en su valor histórico para no alterar formas. NO redefinir
     :root en otras hojas. ── */
  --asr-azul:var(--azul); --asr-azul-dark:var(--azul-dark); --asr-azul-light:var(--azul-light);
  --asr-naranja:var(--naranja); --asr-naranja-dark:var(--naranja-dark);
  --asr-gris:var(--g700); --asr-gris-claro:var(--g100); --asr-border:var(--g200);
  --asr-radius:8px;
  --asr-shadow:0 2px 12px rgba(0,0,0,.08); --asr-shadow-md:0 4px 20px rgba(0,0,0,.12);
}

/* ── Tipografía de marca en todo el sitio (fuente ÚNICA) ── */
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--g700);line-height:var(--lh);-webkit-font-smoothing:antialiased}

/* ── Ancho de contenido ÚNICO en todo el sitio (chrome + cuerpo + footer) ──
   Fuente única del ancho: --maxw (1160px). Pisa al .container de Bootstrap
   para que la home y las interiores midan IGUAL. No redefinir en otras hojas. */
.container{max-width:var(--maxw);margin-left:auto;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ── Sticky footer: en páginas cortas (carrito, recuperar contraseña, etc.)
   la última sección crece con SU PROPIO fondo (marino en auth, gris en el
   resto) para empujar el footer al fondo de la ventana, evitando que asome
   el blanco del body en monitores altos. ── */
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
body>main>section:last-of-type{flex:1 0 auto}
h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);letter-spacing:-.02em}

/* ── Sensación de app: por defecto la UI no se selecciona ni muestra cursor
   de texto (auto = I-beam sobre cualquier texto). Se REACTIVA la selección
   solo donde tiene sentido copiar: formularios y contenido real (legal,
   artículos, descripciones marcadas con .selectable). ── */
body{-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable="true"],
.legal-sec,.legal-wrap,article,.prose,.selectable,.selectable *{
  -webkit-user-select:text;user-select:text;
}

/* ── Foco de teclado visible ── */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:none;box-shadow:var(--ring)}

/* ── Botones (unifica el CTA de todo el sitio) ── */
/* Sistema de botones ÚNICO del sitio (pisa a Bootstrap en todas las páginas).
   Tamaños de marca: base .9rem, .btn-lg .95rem, .btn-sm .82rem. No redefinir
   .btn/.btn-lg/.btn-sm en otras hojas para que home e interiores midan igual. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.9rem;line-height:1;padding:11px 20px;border-radius:var(--r-sm);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.btn-sm{padding:9px 15px;font-size:.82rem}
.btn-lg{padding:14px 26px;font-size:.95rem}
.btn-primary{background:var(--naranja-dark);border-color:var(--naranja-dark);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:#B45309;border-color:#B45309;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(217,119,6,.35)}
.btn-primary:active{background:#B45309!important;border-color:#B45309!important}
.btn-blue,.btn-info{background:var(--azul);border-color:var(--azul);color:#fff}
.btn-blue:hover,.btn-info:hover{background:var(--azul-dark);border-color:var(--azul-dark);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(37,99,235,.3)}
.btn-light{background:#fff;color:var(--ink);border:1px solid var(--g200)}
.btn-light:hover{border-color:var(--g400);background:#fff;color:var(--ink)}

/* ── Franja promo (naranja de marca con relieve y brillo) ── */
.promo-strip{position:relative;overflow:hidden;background:linear-gradient(165deg,var(--dorado-2) 0%,var(--naranja) 55%,#E68F09 100%);color:var(--marino);font-size:.86rem;font-weight:700;padding:10px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(120,60,0,.18)}
.promo-strip::before{content:'';position:absolute;top:0;left:-55%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:promoShine 7.5s ease-in-out infinite;pointer-events:none}
@keyframes promoShine{0%{left:-55%}55%,100%{left:135%}}
@media(prefers-reduced-motion:reduce){.promo-strip::before{display:none}}
.promo-strip .container{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.promo-strip i{color:var(--marino)}
.promo-strip .cd{background:rgba(11,27,58,.9);color:#fff;border-radius:var(--r-sm);padding:3px 12px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.promo-strip .cd i{color:#fff}

/* ── Navbar v2 (glass al hacer scroll) ── */
.nav-v2{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid var(--g200);transition:background .28s ease,box-shadow .28s ease,border-color .28s ease,-webkit-backdrop-filter .28s ease,backdrop-filter .28s ease}
.nav-v2.scrolled{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:rgba(226,232,240,.55);box-shadow:0 6px 24px rgba(15,23,42,.07)}
.nav-v2 .container{display:flex;align-items:center;height:70px;gap:26px}
.nav-v2 .brand img{height:42px;width:auto}
.nav-v2 .links{display:flex;gap:24px;font-size:.8rem;font-weight:600;letter-spacing:.04em}
.nav-v2 .links a{color:var(--g700);text-decoration:none}
.nav-v2 .links a:hover,.nav-v2 .links a.is-here{color:var(--azul)}
.nav-v2 .links a.is-here{font-weight:800}
.nav-v2 .links a.packs{color:var(--naranja-dark)}
.nav-v2 .links a.sub{color:#7c3aed}
.nav-v2 .pill-of{background:#EF4444;color:#fff;font-size:.55rem;font-weight:800;padding:1px 5px;border-radius:20px;vertical-align:top;margin-left:3px}
.nav-v2 .right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:.74rem;font-weight:600;letter-spacing:.03em;color:var(--g500)}
.nav-v2 .cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--azul-light);color:var(--azul);font-size:1.18rem;transition:background .22s ease,color .22s ease,transform .22s ease;text-decoration:none}
.nav-v2 .cart:hover{background:var(--azul);color:#fff;transform:translateY(-1px)}
.nav-v2 .cart .ic-fill{display:none}
.nav-v2 .cart:hover .ic-line{display:none}
.nav-v2 .cart:hover .ic-fill{display:inline-flex}
.nav-v2 .cart .b{position:absolute;top:-5px;right:-5px;height:20px;min-width:20px;padding:0 5px;background:#EF4444;color:#fff;font-size:.66rem;font-weight:800;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2.5px #fff;font-variant-numeric:tabular-nums}
.nav-v2 .cart .b>span{display:block;line-height:1;transform:translateY(.5px)}
@media(max-width:960px){.nav-v2 .links{display:none}}

/* Menú alumno (avatar de marca + dropdown) */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:10px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--ink);padding:3px 4px}
.user-av{width:36px;height:36px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--dorado-2) 0%,var(--naranja) 52%,var(--naranja-dark) 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.05rem;box-shadow:0 3px 9px rgba(217,119,6,.34);transition:.15s ease}
.user-btn .who{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1}
.user-btn .hi{font-size:.6rem;font-weight:600;color:var(--g400);letter-spacing:.06em;text-transform:uppercase}
.user-btn .nm{display:flex;align-items:center;gap:6px;font-family:'Plus Jakarta Sans',sans-serif;font-size:.88rem;font-weight:800;color:var(--ink)}
.user-btn .caret{font-size:.58rem;color:var(--g400);transition:transform .18s ease}
.user-btn:hover .user-av{transform:translateY(-1px);box-shadow:0 5px 14px rgba(217,119,6,.45)}
.user-btn:hover .nm{color:var(--naranja-dark)}
.user-menu.open .user-av{box-shadow:0 0 0 3px rgba(245,158,11,.25)}
.user-av.av-ini{font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:800;letter-spacing:.02em}
.user-menu.open .user-btn .caret{transform:rotate(180deg);color:var(--azul)}
.user-dd{position:absolute;top:calc(100% + 12px);right:0;min-width:216px;background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh-2);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:1060}
.user-dd::before{content:'';position:absolute;top:-6px;right:18px;width:11px;height:11px;background:#fff;border-left:1px solid var(--g200);border-top:1px solid var(--g200);transform:rotate(45deg)}
.user-menu.open .user-dd{opacity:1;visibility:visible;transform:translateY(0)}
.user-dd a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:var(--g700);text-decoration:none}
.user-dd a i{font-size:1.05rem;color:var(--azul);width:18px;text-align:center}
.user-dd a:hover{background:var(--azul-light);color:var(--ink)}
@media(max-width:560px){.user-btn .who{display:none}}

/* ── Secciones / kicker (para vistas migradas) ── */
.sec{padding:var(--sec) 0}
.sec-tight{padding:calc(var(--sec) * .7) 0}
.sec-head{margin-bottom:36px}
.sec-head.center{text-align:center}
.kick{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azul);margin-bottom:8px}
.sec-head h2{font-size:1.85rem;font-weight:800}
.sec-head h2 .or{color:var(--naranja)}
.sec-head p{color:var(--g500);font-size:.95rem;margin-top:8px;max-width:56ch}

/* ── Card de curso tipo poster (compartida) ── */
.poster{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);background:var(--g100);transition:.18s ease}
.poster:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.poster:hover img{transform:scale(1.04)}
.poster .stretch{position:absolute;inset:0;z-index:1}
.poster .disc{position:absolute;top:0;right:14px;background:var(--naranja);color:#3a2400;font-size:.74rem;font-weight:800;padding:5px 10px 6px;border-radius:0 0 var(--r-sm) var(--r-sm);box-shadow:0 4px 10px rgba(0,0,0,.2);z-index:2}
.poster .ov{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;pointer-events:none;padding:46px 14px 13px;background:linear-gradient(to top,rgba(7,15,33,.95) 12%,rgba(7,15,33,.6) 55%,transparent)}
.poster .rt{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);color:#fff;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:100px;margin-bottom:8px}
.poster .rt i{color:var(--naranja)}
.poster .po{color:#AEBDD6;text-decoration:line-through;font-size:.78rem}
.poster .pf{color:#fff;font-weight:800;font-size:1.3rem;font-family:'Plus Jakarta Sans',sans-serif;display:block;line-height:1.1}
.poster .add{flex:none;width:44px;height:44px;border-radius:var(--r-sm);border:none;background:var(--naranja-dark);color:#fff;font-size:1.15rem;cursor:pointer;box-shadow:0 6px 16px rgba(217,119,6,.4);transition:.15s;pointer-events:auto;display:inline-flex;align-items:center;justify-content:center}
.poster .add:hover{background:#B45309;transform:translateY(-2px)}
@media(prefers-reduced-motion:no-preference){
  .poster::after{content:'';position:absolute;top:0;bottom:0;left:-70%;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-16deg);z-index:3;pointer-events:none;opacity:0}
  .poster:hover::after{animation:posterSheen .7s ease}
  @keyframes posterSheen{0%{left:-70%;opacity:1}100%{left:125%;opacity:1}}
}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.grid4{grid-template-columns:1fr}}

/* ── Hero interior marino (para páginas migradas) ── */
.hero-int{position:relative;overflow:hidden;background:var(--marino);color:#EAF0FA}
.hero-int::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at 90% -10%,rgba(37,99,235,.34),transparent 60%),radial-gradient(440px circle at 2% 120%,rgba(245,158,11,.16),transparent 60%)}
.hero-int::after{content:'';position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-int .container{position:relative;z-index:2}
.hero-int h1{color:#fff}
.hero-int .eyebrow{display:flex;align-items:center;gap:13px;color:var(--dorado);font-family:'Plus Jakarta Sans',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;margin-bottom:16px}
.hero-int .eyebrow::before{content:'';width:36px;height:2px;background:var(--naranja);border-radius:1px;flex:none}

/* ── Reveal genérico ── */
@media(prefers-reduced-motion:no-preference){
  html.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .5s cubic-bezier(.16,.84,.44,1),transform .5s cubic-bezier(.16,.84,.44,1)}
  html.anim .rv.is-in{opacity:1;transform:none}
}

/* ── Footer oscuro v2 ── */
footer.ft{background:var(--ink);color:#8fa0bd;padding:48px 0 26px;font-size:.85rem;line-height:1.5}
footer.ft a{color:#8fa0bd;text-decoration:none}
footer.ft a:hover{color:#fff}
footer.ft .ft-news{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:30px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.08)}
footer.ft .ft-news .ft-title{margin-bottom:5px;font-size:1.05rem}
footer.ft .ft-news p{color:#8fa0bd;font-size:.84rem;max-width:48ch;margin:0}
footer.ft .ft-news .ft-news-legal{flex-basis:100%;width:100%;color:#73839e;font-size:.72rem;max-width:none;margin:2px 0 0}
footer.ft .ft-news .ft-news-legal a{text-decoration:underline}
footer.ft .news-form{display:flex;gap:10px;flex-wrap:wrap}
footer.ft .news-form input{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:var(--r-sm);padding:13px 16px;color:#fff;font-family:inherit;font-size:.92rem;min-width:240px}
footer.ft .news-form input::placeholder{color:#AEBDD6}
footer.ft .news-form input:focus{outline:none;border-color:var(--naranja);background:rgba(255,255,255,.15)}
footer.ft .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
footer.ft .flogo{height:46px;margin-bottom:14px}
footer.ft .ft-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:#fff;font-size:.85rem;margin-bottom:14px;letter-spacing:.03em}
footer.ft ul{list-style:none;padding:0;margin:0}
footer.ft li{margin-bottom:9px;display:flex;align-items:center;gap:8px}
footer.ft .bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem}
footer.ft .bottom .lks a{margin-left:18px}
@media(max-width:760px){footer.ft .cols{grid-template-columns:1fr;gap:28px}}

/* ── Menú móvil (compartido por las DOS navbars) ───────────────────
   Bajo 960px `.links` se esconde en asr-v2.css:115 (nav-v2) y en inicio.css:86
   (nav, la home) y antes NO había reemplazo: el sitio quedaba sin navegación en
   celular. El panel se posiciona bajo la navbar, que es su contenedor relativo.
   Sirve para `.nav` y `.nav-v2`: la home tiene su propia navbar duplicada. */
.nav-burger{display:none;background:none;border:0;padding:8px;margin-left:4px;
  color:var(--marino,#0B1B3A);font-size:1.6rem;line-height:1;cursor:pointer;border-radius:10px}
.nav-burger:focus-visible{outline:none;box-shadow:var(--ring)}
.nav-mobile{display:none}

@media(max-width:960px){
  .nav, .nav-v2{position:relative}
  .nav-burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-mobile{display:block;position:absolute;top:100%;left:0;right:0;z-index:60;
    background:#fff;border-top:1px solid rgba(11,27,58,.08);
    box-shadow:0 12px 24px rgba(11,27,58,.10)}
  .nav-mobile[hidden]{display:none}
  .nav-mobile a{display:block;padding:14px 20px;color:var(--marino,#0B1B3A);
    text-decoration:none;font-weight:600;font-size:.95rem;
    border-bottom:1px solid rgba(11,27,58,.06)}
  .nav-mobile a:last-child{border-bottom:0}
  .nav-mobile a.is-here{color:var(--azul,#2563EB)}
  .nav-mobile a.sub{color:var(--azul,#2563EB)}
  .nav-mobile a:active{background:rgba(11,27,58,.04)}
  .nav-mobile .pill-of{margin-left:6px}
}