/* =========================================================
   AÉREO · CHROME COMÚN (nav + pie + botón WhatsApp)
   Fuente única: partials/chrome.css
   NO editar dentro de las páginas: se inyecta con `node build.js`.
   ========================================================= */
:root{
  --yellow:#ECE31D; --yellow-deep:#D8CF12; --yellow-soft:#FBF9C8;
  --black:#000000; --petrol:#425D76; --blue:#104A7F; --green:#156B69;
  --bg:#FFFFFF; --bg-2:#F4F5F6; --bg-3:#EDEFF1;
  --line:#E2E5E8; --line-strong:#C9CDD1;
  --ink:#0A0C0D; --ink-2:#5C636A; --ink-3:#6A6F76;
  --hd:'Big Shoulders Display','Arial Narrow',sans-serif;
  --bd:'Roboto',system-ui,sans-serif;
  --mn:'Roboto Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
}

/* ---------------- IMÁGENES ----------------
   Los <img> llevan width/height en el HTML para que el navegador reserve el
   espacio y la página no salte al cargar. Pero ese height del atributo pisa
   al aspect-ratio del CSS y estira la imagen (las portadas del blog salían
   de 317x675 en vez de 317x200). Con height:auto manda el CSS.
   Va con la especificidad más baja posible: cualquier regla con clase
   (.ft-iso, .ft-certs img, etc.) le gana y conserva su alto fijo. */
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;
  /* El cajón del menú móvil vive fuera de la pantalla (left:100%). En las
     páginas que ya declaraban overflow-x:hidden no se notaba; en /guias/ sí:
     aparecía barra horizontal y el contenido se podía arrastrar 335 px a la
     derecha. Se corrige acá, en el chrome, para que valga en todo el sitio. */
  overflow-x:hidden;}
img{height:auto;}

/* ---------------- BANDA DE CREDENCIALES ----------------
   Escuela profesional de pilotos RPAS — fija en todas las páginas.
   Es la firma institucional: no la borres sin cambiarla también en el pie. */
.topbar{background:var(--ink);color:#fff;}
.topbar-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:30px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;overflow:hidden;}
.tb-main{font-family:var(--mn);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;white-space:nowrap;margin:0;}
.tb-creds{display:none;list-style:none;margin:0;padding:0;gap:0;align-items:center;}
.tb-creds li{font-family:var(--mn);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--yellow);white-space:nowrap;padding:0 14px;position:relative;}
.tb-creds li+li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:10px;background:rgba(255,255,255,.28);}
.tb-creds li:last-child{padding-right:0;color:rgba(255,255,255,.55);}

/* ---------------- NAV ----------------
   ⚠️ El efecto vidrio NO va en .nav, va en .nav::before. Motivo:
   un elemento con backdrop-filter (o filter, o transform) se convierte en el
   bloque contenedor de sus descendientes position:fixed. El panel del menú
   móvil y el velo son hijos del .nav, así que su "top:96px; bottom:0" dejaba
   de medirse contra la pantalla y se medía contra la barra, que mide 97px:
   el panel quedaba de 1px de alto. Con el vidrio en el pseudo-elemento el
   .nav vuelve a ser un contenedor normal y los hijos fixed se anclan a la
   pantalla. Si alguna vez vuelves a poner backdrop-filter/filter acá, el
   menú móvil se rompe otra vez.
   (.hide sí usa transform, pero el JS no lo aplica con el panel abierto.) */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;
  border-bottom:1px solid transparent;transition:border-color .3s,transform .4s var(--ease);}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  transition:background .3s;}
header.nav.scrolled{border-bottom-color:var(--line);}
header.nav.hide{transform:translateY(-102%);}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.nav .brand{display:flex;align-items:center;gap:11px;text-decoration:none;}
.nav .brand img{height:21px;width:auto;}
.nav .brand .tag{font-family:var(--mn);font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);
  border-left:1px solid var(--line);padding-left:11px;display:none;white-space:nowrap;}
.nav-links{display:none;gap:22px;align-items:center;flex-wrap:nowrap;}
.nav-links>a,.nav-top{white-space:nowrap;font-family:var(--mn);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);transition:color .2s;position:relative;padding:4px 0;text-decoration:none;}
.nav-top{background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:400;}
.nav-top::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .2s;}
.nav-links>a::before,.nav-top::before{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#000;transition:width .25s var(--ease);}
.nav-links>a:hover,.nav-top:hover{color:#000;}
.nav-links>a:hover::before,.nav-top:hover::before{width:100%;}
.nav-links>a.activo,.nav-top.activo{color:#000;}
.nav-links>a.activo::before,.nav-top.activo::before{width:100%;background:var(--yellow-deep);height:2px;}
.nav-links a:focus-visible,.nav-top:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;}

/* ---------------- DESPLEGABLES ----------------
   Los enlaces viven siempre en el HTML: acá solo se ocultan. Así Google los
   sigue rastreando y el menú no depende de JavaScript para existir.
   El ::after invisible es el puente entre el botón y el panel: sin él, el
   panel se cierra al cruzar el hueco con el mouse. */
.nav-grupo{position:relative;}
.nav-grupo::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;}
.nav-sub{position:absolute;top:calc(100% + 14px);left:-18px;z-index:5;
  min-width:320px;background:var(--bg);border:2px solid #000;border-radius:3px;
  box-shadow:8px 8px 0 var(--yellow);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;}
.nav-grupo:hover>.nav-sub,.nav-grupo:focus-within>.nav-sub,.nav-grupo.abierto>.nav-sub{
  opacity:1;visibility:visible;transform:none;}
.nav-grupo:hover>.nav-top::after,.nav-grupo.abierto>.nav-top::after{transform:rotate(-135deg) translateY(-2px);}
.nav-sub a{display:block;padding:10px 12px;border-radius:2px;text-decoration:none;
  border-bottom:1px solid var(--line);transition:background .15s;}
.nav-sub a:last-child{border-bottom:0;}
.nav-sub a:hover,.nav-sub a:focus-visible{background:var(--yellow-soft);}
.nav-sub a.activo{background:var(--yellow);}
.nav-sub b{display:block;font-family:var(--hd);font-weight:800;text-transform:uppercase;
  font-size:16px;line-height:1.05;letter-spacing:.01em;color:var(--ink);}
.nav-sub span{display:block;font-family:var(--bd);font-size:12.5px;line-height:1.4;color:var(--ink-3);margin-top:3px;
  text-transform:none;letter-spacing:0;white-space:normal;}
@media(prefers-reduced-motion:reduce){ .nav-sub{transition:none;} }

.nav-alumnos{font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.03em;color:#000;
  border:2px solid #000;padding:9px 13px;text-decoration:none;white-space:nowrap;line-height:1;transition:background .15s,transform .15s;}
.nav-alumnos:hover{background:var(--yellow);transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000;}
.nav-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--hd);font-weight:800;text-transform:uppercase;
  font-size:14px;letter-spacing:.02em;background:var(--yellow);color:#000;padding:11px 16px;border:1px solid #000;border-radius:2px;
  box-shadow:3px 3px 0 #000;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.nav-cta svg{width:16px;height:16px;}
.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000;}
.nav-cta .lbl{display:none;}
body{padding-top:96px;} /* 30px banda + 66px nav */

/* ---------------- MENÚ MÓVIL ----------------
   Hasta 819px los 9 links no caben en la barra. Sin esto, en celular el
   usuario solo veía el logo y el WhatsApp: no podía llegar a Fechas,
   Empresas, AOC, Bolsa ni Noticias. */
.nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;border:2px solid #000;background:var(--bg);
  cursor:pointer;flex:0 0 auto;}
.nav-burger span{display:block;height:2px;width:100%;background:#000;
  transition:transform .28s var(--ease),opacity .2s;}
.nav-burger[aria-expanded="true"]{background:var(--yellow);}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-burger:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;}

@media(max-width:819px){
  .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;top:96px;right:0;bottom:0;width:min(340px,86vw);
    background:var(--bg);border-left:2px solid #000;
    padding:14px 0 28px;overflow-y:auto;
    transform:translateX(100%);visibility:hidden;
    transition:transform .32s var(--ease),visibility .32s;
    box-shadow:-18px 0 40px -18px rgba(10,12,13,.45);
  }
  .nav-links.abierto{transform:none;visibility:visible;}
  .nav-links>a,.nav-top{font-family:var(--hd);font-weight:800;font-size:20px;letter-spacing:.02em;
    color:var(--ink);padding:15px 24px;border-bottom:1px solid var(--line);text-align:left;}
  .nav-links>a::before,.nav-top::before{display:none;}
  .nav-links>a:active,.nav-links>a:hover{background:var(--bg-2);}
  .nav-links>a.activo{background:var(--yellow);}
  /* los grupos se despliegan dentro del panel, no flotando */
  .nav-grupo{width:100%;}
  .nav-grupo::after{display:none;}
  .nav-top{width:100%;justify-content:space-between;}
  .nav-top::after{transform:rotate(45deg);}
  .nav-grupo.abierto>.nav-top::after{transform:rotate(-135deg) translateY(2px);}
  /* Acá NO sirve el truco de grid 0fr→1fr: los enlaces son hijos directos y
     los que sobran caen en filas implícitas que se miden solas, así que el
     panel quedaba abierto. Con max-height el colapso es de verdad. */
  .nav-sub{position:static;min-width:0;border:0;border-radius:0;box-shadow:none;padding:0;
    background:var(--bg-2);opacity:1;visibility:visible;transform:none;
    display:block;overflow:hidden;max-height:0;transition:max-height .32s var(--ease);}
  .nav-grupo.abierto>.nav-sub{max-height:520px;}
  .nav-sub a{padding:12px 24px 12px 34px;border-bottom:1px solid var(--line);}
  .nav-sub b{font-size:16px;}
  .nav-sub span{font-size:12.5px;}
  .nav-alumnos-movil{margin:18px 24px 0;border:2px solid #000;text-align:center;
    border-bottom:2px solid #000 !important;}
  .nav-alumnos{display:none;}          /* en el panel, no en la barra */
  .nav-velo{position:fixed;inset:96px 0 0;background:rgba(10,12,13,.5);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:-1;}
  .nav-velo.abierto{opacity:1;visibility:visible;}
}
@media(min-width:820px){
  .nav-burger,.nav-alumnos-movil,.nav-velo{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .nav-links,.nav-burger span,.nav-velo{transition:none !important;}
}

/* ---------------- PIE ---------------- */
footer.ft{background:var(--bg-2);color:var(--ink-2);border-top:4px solid var(--yellow);padding:56px 0 26px;font-family:var(--bd);}
footer.ft .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%;}
footer.ft .ft-top{display:grid;grid-template-columns:1fr;gap:36px;}
/* el sello #VuelaSeguro va junto al isotipo: es parte de la firma, no un adorno suelto */
footer.ft .ft-lockup{display:flex;align-items:center;gap:20px;margin-bottom:18px;}
footer.ft .ft-lockup .ft-iso{height:74px;width:auto;}
footer.ft .ft-lockup::after{content:"";width:1px;height:56px;background:var(--line-strong);order:1;}
footer.ft .ft-sello{order:2;display:inline-block;line-height:0;transition:transform .2s var(--ease);}
footer.ft .ft-sello img{height:82px;width:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.14));}
footer.ft .ft-sello:hover{transform:translateY(-3px);}
footer.ft .ft-brand p{font-family:var(--hd);font-weight:800;font-size:clamp(19px,2.6vw,25px);line-height:1.04;
  letter-spacing:.01em;text-transform:uppercase;color:var(--ink);max-width:15ch;}
footer.ft .ft-creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
footer.ft .ft-creds li{list-style:none;font-family:var(--mn);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;}

/* ---- Certificaciones ----
   Los logos ajenos son de colores fuertes: van en gris para no pelear con la
   marca, y toman color al pasar el mouse. */
footer.ft .ft-certs{border-top:1px solid var(--line);margin-top:40px;padding-top:26px;}
footer.ft .ft-certs-lbl{display:block;font-family:var(--mn);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:16px;}
footer.ft .ft-certs ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;margin:0;padding:0;}
/* el gallito del Stade es cuadrado: se muestra a su ancho real, no estirado */
footer.ft .ft-certs img.cert-stade{width:auto;max-width:60px;}
footer.ft .ft-certs a{display:flex;flex-direction:column;align-items:flex-start;gap:9px;height:100%;
  background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px 16px;text-decoration:none;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s var(--ease);}
footer.ft .ft-certs a:hover{border-color:#000;transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(10,12,13,.4);}
/* los 4 logos están normalizados a un lienzo 420x140, así se alinean solos */
footer.ft .ft-certs img{height:42px;width:126px;object-fit:contain;object-position:left center;
  filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s;}
footer.ft .ft-certs a:hover img{filter:none;opacity:1;}
footer.ft .ft-certs b{font-family:var(--mn);font-size:10px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);line-height:1.35;}
footer.ft .ft-certs a:hover b{color:#000;}
/* mientras no esté el archivo del logo, se ve el nombre y no una imagen rota */
footer.ft .ft-certs .cert-txt{display:flex;align-items:center;height:42px;font-family:var(--hd);font-weight:800;
  text-transform:uppercase;font-size:17px;letter-spacing:.02em;color:var(--ink-3);}
footer.ft .ft-certs a:hover .cert-txt{color:var(--ink);}
footer.ft .ft-col h4{font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.04em;color:#000;margin-bottom:14px;}
footer.ft .ft-col .item{margin-bottom:16px;}
footer.ft .ft-col .item b{font-family:var(--mn);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:block;margin-bottom:4px;}
footer.ft .ft-col .item span,footer.ft .ft-col .item a{font-size:14px;color:var(--ink);line-height:1.5;text-decoration:none;}
footer.ft .ft-col .item a{color:var(--blue);}
footer.ft .ft-col .item a:hover{color:#000;text-decoration:underline;text-underline-offset:3px;}
footer.ft .ft-bottom{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);margin-top:40px;padding-top:22px;
  font-family:var(--mn);font-size:11px;letter-spacing:.06em;color:var(--ink-3);}
footer.ft .ft-bottom a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong);}
footer.ft .ft-bottom a:hover{color:var(--ink);border-color:var(--ink);}
footer.ft .ft-bottom a:hover{color:#000;}

/* ---------------- WHATSAPP FLOTANTE ---------------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:95;display:flex;align-items:center;gap:0;}
.wa-float a{display:flex;align-items:center;gap:10px;background:var(--yellow);color:#000;border:1px solid #000;
  padding:13px;border-radius:99px;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);position:relative;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.wa-float a:hover{transform:translateY(-3px);box-shadow:0 16px 30px -8px rgba(0,0,0,.55);}
.wa-float a svg{width:26px;height:26px;display:block;}
.wa-float a .wa-lbl{font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:15px;letter-spacing:.02em;
  max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .4s var(--ease),margin .4s var(--ease);}
.wa-float a:hover .wa-lbl{max-width:160px;margin-right:6px;}
.wa-float .pulse{position:absolute;inset:0;border-radius:99px;border:2px solid var(--yellow);animation:wapulse 2.4s var(--ease) infinite;pointer-events:none;}
@keyframes wapulse{0%{transform:scale(1);opacity:.9;}70%{transform:scale(1.5);opacity:0;}100%{opacity:0;}}

/* ---------------- RESPONSIVE ---------------- */
@media(min-width:560px){ .nav .brand .tag{display:block;} }
@media(min-width:700px){ .tb-creds{display:flex;} }
@media(min-width:820px){
  /* la bajada ya vive en la banda de arriba: no la repetimos junto al logo */
  .nav .brand .tag{display:none;}
  .nav-in,.topbar-in,footer.ft .wrap{padding-left:34px;padding-right:34px;}
  .nav-links{display:flex;}
  footer.ft{padding:74px 0 30px;}
  footer.ft .ft-top{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:44px;}
  footer.ft .ft-certs ul{grid-template-columns:repeat(5,1fr);gap:10px;}
  footer.ft .ft-certs img{height:46px;width:138px;}
  footer.ft .ft-bottom{flex-direction:row;justify-content:space-between;align-items:center;}
  .wa-float{right:26px;bottom:26px;}
}

/* ---- El menú son 9 links: entero necesita ~1195px de contenedor.
        Antes de eso se aprieta por tramos, en vez de cortar el WhatsApp.
        Medido en vivo: links 553px (apretado) / 652 (medio) / 723 (completo). ---- */
/* Con cinco elementos el menú entra holgado en cualquier ancho de escritorio;
   solo se aprieta un poco en el tramo más angosto. */
@media(min-width:820px) and (max-width:1023px){
  .nav-in{padding-left:20px;padding-right:20px;gap:12px;}
  .nav-links{gap:16px;}
  .nav-links>a,.nav-top{font-size:11px;letter-spacing:.06em;}
  .nav-sub{min-width:280px;}
}
@media(min-width:1220px){ .nav-cta .lbl{display:inline;} }
@media(max-width:560px){ .nav-alumnos{font-size:11px;padding:8px 10px;letter-spacing:0;} }
@media(prefers-reduced-motion:reduce){ .wa-float .pulse{animation:none !important;} }

/* La sección del simulador se movió a partials/simulador.html (marcador
   AEREO:SIMULADOR): dejó de ser una franja dentro de "la plataforma" y pasó a
   ser una sección propia con su celular, sus etiquetas y su CSS. */

/* ---------------- AVISO DE COOKIES ----------------
   Aparece solo si el visitante no ha decidido antes. La decisión se guarda
   en localStorage (aereo_cookies). Mientras no acepte, NO se carga la
   etiqueta de Google Ads: por eso el script de gtag pasó a ser diferido. */
/* Va abajo a la izquierda y ocupa lo mínimo: antes era una franja de lado a
   lado que competía con el pop-up de la próxima fecha. El pop-up vende; esto
   solo tiene que pedir permiso y quitarse del medio. */
.ck-aviso{position:fixed;left:clamp(10px,3vw,20px);bottom:clamp(10px,3vw,20px);z-index:110;
  width:min(420px,calc(100vw - 2*clamp(10px,3vw,20px)));
  background:var(--ink);color:#fff;border:2px solid var(--yellow);border-radius:3px;
  box-shadow:0 12px 30px rgba(10,12,13,.34);padding:13px 15px;
  transform:translateY(calc(100% + 30px));transition:transform .45s var(--ease);}
.ck-aviso.on{transform:none;}
/* en móvil el botón flotante de WhatsApp vive abajo a la derecha: se sube
   un poco el aviso para no taparlo */
@media(max-width:560px){ .ck-aviso{bottom:76px;} }
.ck-in{display:grid;gap:10px;}
.ck-in p{font-family:var(--bd);font-size:12.5px;line-height:1.5;color:#C3C9CE;margin:0;}
.ck-in p b{color:#fff;}
.ck-in p a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px;}
.ck-btns{display:flex;flex-wrap:wrap;gap:8px;}
.ck-b{font-family:var(--hd);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.02em;
  padding:9px 14px;border:2px solid var(--yellow);background:var(--yellow);color:#000;cursor:pointer;
  white-space:nowrap;transition:transform .12s ease;}
.ck-b:hover{transform:translateY(-2px);}
.ck-b.no{background:transparent;color:#fff;border-color:#6A6F76;}
.ck-b.no:hover{background:#fff;color:#000;border-color:#fff;}

/* ---------------- ENCABEZADO DEL CALENDARIO ----------------
   La banda de "meses agotados" que va justo arriba ya cuenta la escasez; si el
   titular del calendario repite lo mismo, las dos secciones se confunden.
   Acá el titular pide la acción (elegir fecha) y el stock vive en un chip
   aparte que se pinta verde o rojo según cuánto queda.
   Lo lee y lo actualiza partials/cursos.js — fuente única de fechas y cupos. */
.cal-head h2 em,.cal-head h3 em{font-style:normal;display:inline-block;background:var(--yellow);
  color:var(--ink);padding:0 .14em;transform:rotate(-1.1deg);}

/* ---------------------------------------------------------------------------
   ENCABEZADO DE NIVEL DENTRO DEL CALENDARIO

   El calendario del landing muestra las fechas de los TRES niveles, una grilla
   debajo de la otra. Sin un separador rotulado las dos se leían como una sola
   lista de fechas y el visitante no sabía cuál era cuál.

   OJO: esto vive acá, en partials/chrome.css, y no suelto en index.html. Todo
   lo que va entre los marcadores AEREO:CSS lo regenera `node build.js` desde
   este archivo: una regla escrita a mano allá se pierde en el primer build.
   --------------------------------------------------------------------------- */
.cal-nivel{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  border-top:3px solid var(--ink);padding-top:16px;margin:0 0 22px;}
.cal-nivel + .sec-head{margin-bottom:26px;}
.cal-nivel .tag{font-family:var(--mn);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--ink);color:var(--yellow);padding:5px 10px;
  white-space:nowrap;}
.cal-nivel .tag.dos{background:var(--yellow);color:#000;border:2px solid #000;padding:3px 8px;}
.cal-nivel h3{font-family:var(--hd);font-weight:900;text-transform:uppercase;
  font-size:clamp(19px,2.6vw,27px);line-height:1;margin:0;color:var(--ink);}
.cal-nivel .cuando{font-family:var(--mn);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);}
/* separación entre el bloque del Nivel 1 y el de los Niveles 2 y 3 */
.cal-nivel--n23{margin-top:clamp(46px,6vw,72px);}
/* El titular vivo del calendario pasó de h2 a h3 en el landing, porque ahora
   cuelga del h2 de la sección ("Las fechas de los tres niveles"). */
.cal-head h3{font-family:var(--hd);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,40px);line-height:.95;margin:0 0 14px;color:var(--ink);}
.cal-chip{display:inline-flex;align-items:center;gap:9px;margin:0 0 15px;
  font-family:var(--mn);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  border:2px solid var(--green);color:var(--green);background:#EAF4F3;padding:7px 13px;}
.cal-chip b{font-weight:700;}
.cal-chip i{width:8px;height:8px;border-radius:50%;background:var(--green);
  display:inline-block;flex:0 0 auto;animation:calPulse 2s infinite;}
.cal-chip--rojo{border-color:#C0261C;color:#C0261C;background:#FCECEA;}
.cal-chip--rojo i{background:#C0261C;}
@keyframes calPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@media(prefers-reduced-motion:reduce){ .cal-chip i{animation:none;} }

/* Flechita de "abre otro sitio" en los enlaces externos del pie */
.ft-ext{font-size:.85em;opacity:.6;}