/* ─── HERO · Briefing Diario de IA ───────────────────────────
   Diseño de Claude Design ("Rediseño de animación con avioncito"), portado tal
   cual. Los tokens son espejo del brandbook (hero-landing/dist/brandbook.html):
   si falta un color, se agrega ALLÁ primero. Sin morado — el #7B2FFF está
   reservado para señalar "esto es IA" y no se mezcla con la flama.
   ─────────────────────────────────────────────────────────── */
:root{
  --hero-bg:#000000; --hero-bg-2:#0A0A12;
  --hero-surface:rgba(255,255,255,0.03); --hero-surface-2:rgba(255,255,255,0.06);
  --hero-hairline:rgba(255,255,255,0.08); --hero-hairline-2:rgba(255,255,255,0.16);
  --hero-flame-start:#FF3D5A; --hero-flame-end:#FF8C42;
  --hero-flame:linear-gradient(135deg,#FF3D5A 0%,#FF8C42 100%);
  --hero-flame-soft:rgba(255,140,66,0.34); --hero-flame-faint:rgba(255,140,66,0.10);
  --hero-glow:rgba(255,61,90,0.20);
  --hero-fg-1:#FFFFFF; --hero-fg-2:rgba(255,255,255,0.72);
  --hero-fg-3:rgba(255,255,255,0.46); --hero-fg-4:rgba(255,255,255,0.30);
  --hero-ease:cubic-bezier(0.22,1,0.36,1);
  --font-sans:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;box-sizing:border-box}
/* El atributo `hidden` lo aplica el navegador con [hidden]{display:none}, que es
   una regla del USER AGENT: cualquier regla de autor que fije `display` le gana.
   `.agenda-modal{display:flex}` y `.radio{display:flex}` lo hacían, así que el JS
   los ocultaba y seguían en pantalla — el modal de la agenda vivía abierto y vacío
   encima de la página. Va con !important para que no dependa del orden ni de que
   alguien agregue mañana otro contenedor con display propio. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--hero-bg)}

/* ─── Cielo ───────────────────────────────────────────────────────────────
   Estrellas sobre el negro. Tres capas de puntos con densidad y tamaño
   distintos: la de atrás casi imperceptible, la de adelante con brillo. Se
   hace con radial-gradients en mosaico —cero imágenes, cero JS— porque el
   sitio es estático y una sola petición de más se nota en el arranque.

   `fixed` y no `absolute`: las estrellas no se desplazan al hacer scroll, así
   la página se siente moviéndose SOBRE el cielo y no arrastrándolo.
   z-index -1 lo deja encima del fondo del canvas y debajo de todo el
   contenido, sin tener que posicionar cada sección. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    /* capa cercana — pocas, grandes, brillantes */
    radial-gradient(1.9px 1.9px at 18% 24%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(1.7px 1.7px at 73% 12%, rgba(255,255,255,.95), transparent 62%),
    radial-gradient(1.8px 1.8px at 41% 67%, rgba(255,255,255,1), transparent 62%),
    radial-gradient(1.6px 1.6px at 88% 78%, rgba(255,255,255,.90), transparent 62%),
    radial-gradient(1.7px 1.7px at 55% 88%, rgba(255,255,255,.92), transparent 62%),
    /* capa media */
    radial-gradient(1.2px 1.2px at 9% 61%, rgba(255,255,255,.78), transparent 62%),
    radial-gradient(1.2px 1.2px at 57% 34%, rgba(255,255,255,.72), transparent 62%),
    radial-gradient(1.2px 1.2px at 31% 88%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(1.2px 1.2px at 79% 47%, rgba(255,255,255,.70), transparent 62%),
    radial-gradient(1.2px 1.2px at 64% 92%, rgba(255,255,255,.68), transparent 62%),
    radial-gradient(1.2px 1.2px at 15% 8%, rgba(255,255,255,.72), transparent 62%),
    /* polvo de fondo */
    radial-gradient(.9px .9px at 4% 14%, rgba(255,255,255,.50), transparent 62%),
    radial-gradient(.9px .9px at 46% 8%, rgba(255,255,255,.46), transparent 62%),
    radial-gradient(.9px .9px at 22% 44%, rgba(255,255,255,.48), transparent 62%),
    radial-gradient(.9px .9px at 93% 33%, rgba(255,255,255,.44), transparent 62%),
    radial-gradient(.9px .9px at 68% 71%, rgba(255,255,255,.47), transparent 62%),
    radial-gradient(.9px .9px at 12% 95%, rgba(255,255,255,.42), transparent 62%),
    radial-gradient(.9px .9px at 84% 18%, rgba(255,255,255,.45), transparent 62%);
  background-size:
    520px 520px, 520px 520px, 520px 520px, 520px 520px, 520px 520px,
    340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px,
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    220px 220px;
  animation:mt-twinkle 7s ease-in-out infinite;
}
/* El titileo es del CIELO entero, no de cada estrella: animar la opacidad de
   un solo elemento compuesto es barato; animar quince gradientes no lo es. */
@keyframes mt-twinkle{0%,100%{opacity:.85}50%{opacity:1}}
/* SIN fondo propio, a propósito: el negro lo pinta `html`. Si `body` también lo
   pintara, su fondo taparía al ::before de las estrellas —que está en z-index
   -1, o sea DETRÁS del fondo del propio body— y el cielo no se vería. Fue
   exactamente el bug del primer intento. */
body{background:transparent;color:var(--hero-fg-1);font-family:var(--font-sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--hero-flame-soft);color:#fff}
a{color:var(--hero-fg-2);text-decoration:none;transition:color .25s var(--hero-ease)}
a:hover{color:var(--hero-fg-1)}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─── Header ─── */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 20px;height:58px;background:rgba(8,8,16,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hero-hairline)}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-shield{width:20px;height:22px;flex:none;filter:drop-shadow(0 0 6px var(--hero-glow));transition:filter .35s var(--hero-ease),transform .35s var(--hero-ease)}
.brand-shield .frame,.brand-shield .glyph{transition:stroke .35s var(--hero-ease)}
.brand-name{font-weight:600;font-size:14px;letter-spacing:.1em;color:var(--hero-fg-1);transition:text-shadow .35s var(--hero-ease)}
.brand-divider{width:1px;height:16px;background:var(--hero-hairline-2);flex:none}
.brand-sub{font-family:var(--font-mono);font-size:11px;color:var(--hero-fg-3);letter-spacing:.16em;text-transform:uppercase;transition:color .35s var(--hero-ease)}

/* Hover de la marca: el escudo florece en flama y la H se enciende en cálido.
   El glow vive en el filter del SVG (envuelve escudo + H a la vez) y en un
   text-shadow del wordmark, para que "brille" todo el bloque, no solo una parte. */
.brand:hover .brand-shield{filter:drop-shadow(0 0 4px var(--hero-flame-end)) drop-shadow(0 0 13px var(--hero-flame-soft));transform:translateY(-1px)}
.brand:hover .brand-shield .glyph{stroke:var(--hero-flame-end)}
.brand:hover .brand-name{text-shadow:0 0 16px var(--hero-glow)}
.brand:hover .brand-sub{color:var(--hero-fg-2)}
.header-link{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--hero-fg-3);white-space:nowrap}
.header-link .arrow{display:inline-block;transition:transform .3s var(--hero-ease);color:var(--hero-flame-end)}
.header-link:hover{color:var(--hero-fg-1)}
.header-link:hover .arrow{transform:translateY(2px)}
@media (max-width:480px){
  .brand-sub{display:none}
  .header-link{font-size:11px}
}

/* ─── Status banner ─── */
.status-banner{font-family:var(--font-mono);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--hero-fg-2);background:var(--hero-flame-faint);border-bottom:1px solid var(--hero-hairline);padding:10px 20px;text-align:center}

/* ─── Eyebrow ─── */
.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--hero-fg-3);display:flex;align-items:center;gap:10px}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--hero-flame-end);box-shadow:0 0 10px var(--hero-flame-soft);flex:none}

/* ─── Masthead ─── */
.masthead{padding:56px 0 0;position:relative}
/* Grilla técnica de fondo (la de la referencia): líneas finas cada 46px que se
   concentran arriba a la derecha, tras el sello, y se desvanecen con una máscara
   radial para no chocar con la flame-rule ni el texto. */
.masthead::before{
  content:"";position:absolute;inset:-56px 0 0 0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, var(--hero-hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-hairline) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(130% 96% at 74% 22%, #000 0%, transparent 68%);
  mask-image:radial-gradient(130% 96% at 74% 22%, #000 0%, transparent 68%);
  opacity:.6;
}
/* Resplandor de flama que entra por la izquierda, detrás del titular. */
/* `closest-side` y centrado a propósito: con el centro descolocado y un
   `transparent 68%`, el degradado NO alcanzaba a apagarse antes del borde de su
   caja —por la izquierda le faltaban 42px— y se veía el corte recto del
   rectángulo sobre el negro. Con closest-side el radio es la distancia al lado
   más cercano, así que llega a transparente dentro de la caja por los cuatro
   lados y no hay canto que se note. */
.masthead::after{content:"";position:absolute;left:-22%;top:-6%;width:min(560px,62vw);height:430px;background:radial-gradient(circle closest-side at 50% 50%,var(--hero-glow),transparent);pointer-events:none;z-index:0}
.masthead-body{position:relative;z-index:1}
/* En pantallas anchas el titular deja libre la esquina donde vive el sello. */
@media (min-width:760px){.masthead-body{padding-right:180px}}

/* Sello: el escudo a la altura del titular, no pegado al borde superior. Sube de
   opacidad respecto al primer intento — en la referencia es un bronce presente,
   no un fantasma. Anclado a ~1/3 de la portada para acompañar al título. */
/* El sello es un contenedor: el LATIDO vive en ::before (glow que respira solo)
   y el trazo del escudo en el SVG. Separarlos evita que la animación y el hover
   se peleen por las mismas propiedades. pointer-events:auto para recibir hover;
   vive en su esquina, dentro del padding-right:180px del titular, sin robar
   clicks al texto. */
.masthead-seal{position:absolute;right:2%;top:96px;width:clamp(128px,14vw,172px);height:auto;pointer-events:auto;z-index:0}
@media (max-width:760px){.masthead-seal{display:none}}
/* Latido: un resplancor de flama detrás del escudo que respira sin parar. */
.masthead-seal::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,var(--hero-glow),transparent 66%);opacity:.5;animation:seal-breathe 4.6s var(--hero-ease) infinite;pointer-events:none}
@keyframes seal-breathe{0%,100%{opacity:.32;transform:scale(.92)}50%{opacity:.7;transform:scale(1.06)}}

.seal-svg{display:block;width:100%;height:auto;position:relative;color:var(--hero-flame-end);opacity:.22;transition:opacity .45s var(--hero-ease),filter .45s var(--hero-ease),transform .45s var(--hero-ease)}
.seal-svg .frame,.seal-svg .glyph{transition:stroke-width .45s var(--hero-ease)}

/* Al pasar por encima el escudo se enciende: sube de opacidad, el trazo engrosa
   y florece la flama. La H se marca más que el contorno. El latido de ::before
   se acelera para acompañar. */
.masthead-seal:hover .seal-svg{opacity:.92;transform:scale(1.02);filter:drop-shadow(0 0 10px var(--hero-flame-end)) drop-shadow(0 0 34px var(--hero-flame-soft))}
.masthead-seal:hover .seal-svg .frame{stroke-width:0.7}
.masthead-seal:hover .seal-svg .glyph{stroke-width:0.9}
.masthead-seal:hover::before{animation-duration:2.2s}

.eyebrow-pill{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 12px;border:1px solid var(--hero-hairline);border-radius:999px;background:var(--hero-surface);font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-fg-3)}
.eyebrow-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--hero-flame-end);box-shadow:0 0 10px var(--hero-flame-soft);flex:none}

.masthead-lead{font-weight:300;letter-spacing:-0.03em;line-height:1.08;font-size:clamp(32px,5.2vw,60px);margin:22px 0 26px;text-wrap:balance;max-width:20ch}
.masthead-lead a{color:inherit}
.masthead-lead a:hover{color:var(--hero-flame-end)}

/* Metadatos en pastillas: escaneables de un vistazo en vez de una línea corrida */
.masthead-chips{display:flex;flex-wrap:wrap;gap:9px}
.mchip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--hero-hairline);border-radius:9px;background:var(--hero-surface);font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--hero-fg-3);white-space:nowrap}
.mchip svg{width:13px;height:13px;flex:none;color:var(--hero-fg-4)}
.mchip.is-verified{color:var(--hero-flame-end);border-color:rgba(255,140,66,0.28);background:rgba(255,140,66,0.05)}
.mchip.is-verified svg{color:var(--hero-flame-end)}

.masthead-hola{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--hero-fg-2);max-width:52ch;margin-top:26px}
.flame-rule{height:1px;margin-top:34px;background:linear-gradient(90deg,var(--hero-flame-start),var(--hero-flame-end) 34%,var(--hero-hairline) 72%,transparent);position:relative;z-index:1}

/* ─── Cockpit grid ─── */
.cockpit{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-top:38px}
.section-label{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-fg-3);display:flex;align-items:center;gap:16px;margin-bottom:22px}
.section-label::after{content:"";flex:1;height:1px;background:var(--hero-hairline)}
.col-rest,.col-sources{margin-top:52px}

@media (min-width:900px){
  .cockpit{grid-template-columns:minmax(0,1fr) 332px;column-gap:56px;grid-template-areas:"lead rail" "rest rail" "sources rail"}
  .col-lead{grid-area:lead}
  .col-rail{grid-area:rail}
  .col-rest{grid-area:rest}
  .col-sources{grid-area:sources}
}

/* ─── Lead ─── */
.lead-title{font-weight:300;letter-spacing:-0.028em;line-height:1.12;font-size:clamp(27px,3.4vw,42px);text-wrap:balance;margin-bottom:20px}
.lead-body{font-family:var(--font-mono);font-size:13.5px;line-height:1.75;color:var(--hero-fg-2);max-width:62ch}
.lead-body + .lead-body{margin-top:14px}

/* ─── Chips (fuentes de la nota) ─── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--hero-fg-3);border:1px solid var(--hero-hairline);border-radius:999px;padding:5px 12px 5px 6px;transition:border-color .25s var(--hero-ease),color .25s var(--hero-ease),transform .25s var(--hero-ease)}
.chip .n{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:50%;background:var(--hero-surface-2);font-size:10px;color:var(--hero-fg-3);transition:inherit}
.chip:hover{border-color:var(--hero-flame-soft);color:var(--hero-fg-1);transform:translateY(-1px)}
.chip:hover .n{background:var(--hero-flame-faint);color:var(--hero-flame-end)}

/* ─── También hoy ─── */
.news-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 4px;padding:22px 0;border-top:1px solid var(--hero-hairline)}
.news-row:first-child{border-top:none;padding-top:4px}
.news-row .num{font-family:var(--font-mono);font-size:13px;color:var(--hero-fg-4);padding-top:3px;transition:color .25s var(--hero-ease)}
.news-row h3{font-weight:400;font-size:17px;letter-spacing:-0.012em;line-height:1.35;color:var(--hero-fg-1);text-wrap:pretty}
.news-row h3 a{color:inherit}
.news-row h3 a:hover{color:var(--hero-flame-end)}
.news-row p{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--hero-fg-3);margin-top:9px;max-width:62ch}
.news-row .chips{margin-top:13px}
.news-row:hover .num{color:transparent;background:var(--hero-flame);-webkit-background-clip:text;background-clip:text}

/* ─── Agenda rail ─── */
.col-rail #agenda{position:sticky;top:78px}
.agenda-card{background:rgba(13,13,24,0.66);border:1px solid var(--hero-hairline);border-radius:18px;padding:22px 20px;backdrop-filter:blur(10px)}
.agenda-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-fg-3);padding-bottom:16px;border-bottom:1px solid var(--hero-hairline)}
.agenda-count{font-size:10.5px;letter-spacing:.06em;color:var(--hero-flame-end);border:1px solid var(--hero-flame-soft);border-radius:999px;padding:3px 9px}
.scope-label{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--hero-fg-4);margin:20px 0 4px;display:flex;align-items:center;gap:10px}
.scope-label::before{content:"";width:5px;height:5px;border-radius:1.5px;background:var(--hero-flame);opacity:.75}
.event{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 12px;padding:13px 10px;margin:2px -10px;border-radius:12px;transition:background .25s var(--hero-ease)}
.event:hover{background:var(--hero-surface)}
.event .logo{grid-row:span 3;width:34px;height:34px;border-radius:9px;object-fit:cover;border:1px solid var(--hero-hairline);background:var(--hero-bg-2)}
.event .logo.fallback{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--hero-fg-2);background:var(--hero-surface-2)}
/* Escudo de HERO cuando el organizador no tiene favicon. Va con padding para
   que respire dentro de la misma caja de 34px que usan los iconos reales. */
.event .logo.hero-mark{padding:7px;background:var(--hero-surface-2);opacity:.85;transition:opacity .25s var(--hero-ease)}
.event:hover .logo.hero-mark{opacity:1}
.event .name{font-weight:500;font-size:13.5px;letter-spacing:-0.008em;line-height:1.35;color:var(--hero-fg-1)}
.event .meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--hero-flame-end);margin-top:3px}
.event .desc{font-family:var(--font-mono);font-size:11.5px;line-height:1.6;color:var(--hero-fg-3);margin-top:5px}
.agenda-empty{font-family:var(--font-mono);font-size:11.5px;line-height:1.6;color:var(--hero-fg-3);padding:14px 0 4px}
/* Un fallo no puede leerse igual que un estado vacío. A 30% de blanco y 11.5px
   el aviso de "no pudimos cargar" era indistinguible de un panel vacío: el
   lector concluye que no hay eventos cuando lo que pasó es que no cargaron.
   Más contraste, más tamaño y una marca de color para que se lea como error. */
.agenda-error{color:var(--hero-fg-2);font-size:13px;padding:14px 0 6px 12px;border-left:2px solid var(--hero-flame-end)}

/* ─── Fuentes ─── */
/* minmax(0,1fr) y NO 1fr: `1fr` equivale a `minmax(auto,1fr)`, y ese `auto`
   toma el min-content de la pista. Como los títulos van con white-space:nowrap,
   su min-content es el título entero — la columna se estiraba a lo ancho del
   título más largo, se salía del contenedor y el text-overflow:ellipsis nunca
   entraba porque no había nada que recortar. Con el mínimo en 0, la pista puede
   encogerse y el ellipsis funciona. */
.sources-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
@media (min-width:640px){.sources-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}}
.source-link{display:flex;align-items:baseline;gap:12px;min-width:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;padding:11px 10px;margin:0 -10px;border-radius:10px;color:var(--hero-fg-3);transition:background .25s var(--hero-ease),color .25s var(--hero-ease)}
.source-link .n{color:var(--hero-fg-4);min-width:22px;transition:color .25s var(--hero-ease)}
.source-link .t{color:var(--hero-fg-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .25s var(--hero-ease)}
.source-link::after{content:"↗";color:var(--hero-fg-4);transition:color .25s var(--hero-ease),transform .3s var(--hero-ease)}
.source-link:hover{background:var(--hero-surface)}
.source-link:hover .t{color:var(--hero-fg-1)}
.source-link:hover .n,.source-link:hover::after{color:var(--hero-flame-end)}
.source-link:hover::after{transform:translate(2px,-2px)}

/* ─── Estados vacíos / skeleton ─── */
.empty-state{font-family:var(--font-mono);font-size:12.5px;line-height:1.7;color:var(--hero-fg-4);border:1px dashed var(--hero-hairline-2);border-radius:14px;padding:26px;text-align:center}
.skeleton{display:block;border-radius:8px;background:linear-gradient(100deg,var(--hero-surface) 40%,var(--hero-surface-2) 50%,var(--hero-surface) 60%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skeleton-line{height:13px;margin:10px 0;max-width:520px}
.skeleton-title{height:34px;max-width:560px;margin:6px 0 18px}
.skeleton-date{height:64px;width:min(520px,80%)}
@keyframes shimmer{to{background-position:-200% 0}}

/* ─── Fin del briefing ─── */
.fin{display:flex;align-items:center;gap:18px;margin:72px 0 0}
.fin-line{flex:1;height:1px;background:var(--hero-hairline)}
.fin-text{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--hero-fg-4);white-space:nowrap}

/* ─── Suscripción ─── */
.subscribe-band{margin-top:64px;padding:72px 20px;background:var(--hero-bg-2);border-top:1px solid var(--hero-hairline);border-bottom:1px solid var(--hero-hairline);position:relative;overflow:hidden}
.subscribe-band::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:70%;background:radial-gradient(ellipse at 50% 100%,var(--hero-glow),transparent 65%);pointer-events:none}
.subscribe-card{position:relative;max-width:620px;margin:0 auto;background:var(--hero-surface);border:1px solid var(--hero-hairline);border-radius:22px;padding:clamp(30px,5vw,46px)}
.sub-title{font-weight:300;letter-spacing:-0.025em;font-size:clamp(26px,3.4vw,34px);line-height:1.14;margin:18px 0 14px;text-wrap:balance;position:relative}
.sub-copy{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--hero-fg-2);max-width:46ch}
.sub-fine{font-family:var(--font-mono);font-size:11.5px;line-height:1.6;color:var(--hero-fg-4);margin-top:14px}

/* El avioncito */
.plane-anchor{display:inline-block;position:relative;width:30px;height:30px;margin-left:14px;vertical-align:-3px}
.plane{position:absolute;inset:0;width:30px;height:30px;color:var(--hero-fg-3);transition:transform .45s var(--hero-ease),color .45s var(--hero-ease);will-change:transform}
.plane.is-ready{color:var(--hero-flame-end);transform:rotate(-14deg) translateY(-2px)}
.plane.is-flying{color:var(--hero-flame-end);z-index:5;offset-path:path("M0,0 C 40,18 90,-30 150,-110 S 260,-230 340,-280");offset-rotate:auto 42deg;animation:plane-fly 1.3s cubic-bezier(0.45,0,0.6,1) forwards}
@keyframes plane-fly{
  0%{offset-distance:0;opacity:1}
  72%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
.plane.is-shaking{animation:plane-shake .5s var(--hero-ease)}
@keyframes plane-shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}55%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.plane.is-nodding{animation:plane-nod .7s var(--hero-ease)}
@keyframes plane-nod{0%,100%{transform:translateY(0)}35%{transform:translateY(-6px) rotate(-8deg)}70%{transform:translateY(1px)}}

/* Formulario */
#subscribeForm{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
#emailInput{flex:1;min-width:210px;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--hero-fg-1);background:var(--hero-bg);border:1px solid var(--hero-hairline-2);border-radius:999px;padding:13px 20px;outline:none;transition:border-color .3s var(--hero-ease),box-shadow .3s var(--hero-ease)}
#emailInput::placeholder{color:var(--hero-fg-4)}
#emailInput:focus{border-color:var(--hero-flame-soft);box-shadow:0 0 0 4px var(--hero-flame-faint)}
.btn-primary{display:inline-flex;align-items:center;gap:12px;padding:8px 24px 8px 8px;border-radius:999px;font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.02em;border:none;background:var(--hero-fg-1);color:#080810;cursor:pointer;transition:transform .25s var(--hero-ease),box-shadow .25s var(--hero-ease),opacity .25s var(--hero-ease);white-space:nowrap}
.btn-plus{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex:none;background:var(--hero-flame);color:#fff;font-size:15px;line-height:1;transition:transform .25s var(--hero-ease)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.btn-primary:hover .btn-plus{transform:rotate(90deg)}
.btn-primary:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.form-msg{font-family:var(--font-mono);font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--hero-flame-start);margin-top:14px;min-height:1.2em}
.form-msg.ok{color:var(--hero-flame-end)}

/* Agradecimiento */
.sub-body,.sub-thanks{transition:opacity .5s var(--hero-ease),transform .5s var(--hero-ease)}
.sub-body.is-leaving{opacity:0;transform:translateY(-8px);pointer-events:none}
.sub-thanks{opacity:0;transform:translateY(10px)}
.sub-thanks.is-visible{opacity:1;transform:none}
.sub-thanks .sub-copy strong{color:var(--hero-fg-1);font-weight:500}
.link-btn{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--hero-fg-3);background:none;border:none;border-bottom:1px solid var(--hero-hairline-2);padding:0 0 3px;margin-top:22px;cursor:pointer;transition:color .25s var(--hero-ease),border-color .25s var(--hero-ease)}
.link-btn:hover{color:var(--hero-fg-1);border-color:var(--hero-flame-end)}

/* ─── Footer ─── */
.site-footer{max-width:1180px;margin:0 auto;padding:44px 20px 56px;display:flex;flex-direction:column;gap:10px}
.foot-brand{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--hero-fg-3)}
.foot-brand strong{color:var(--hero-fg-1);font-weight:500}
.foot-note{font-family:var(--font-mono);font-size:11.5px;line-height:1.7;color:var(--hero-fg-4);max-width:46ch}
.foot-meta{font-family:var(--font-mono);font-size:11px;color:var(--hero-fg-4)}
.foot-meta a{color:var(--hero-fg-3);border-bottom:1px solid var(--hero-hairline)}
.foot-meta a:hover{color:var(--hero-fg-1)}

/* ─── Radio: la nota del día en audio ───
   Vive entre la cabecera y el cockpit. Oculta con [hidden] hasta que la API
   devuelve audio_url — hay días sin audio y el bloque no debe dejar un hueco. */
.radio{display:flex;align-items:center;gap:16px;margin:0 0 34px;padding:14px 18px;border:1px solid var(--hero-hairline);border-radius:16px;background:var(--hero-surface);transition:border-color .3s var(--hero-ease)}
.radio:hover{border-color:var(--hero-hairline-2)}

.radio-play{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:var(--hero-flame);color:#080810;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px var(--hero-glow);transition:transform .25s var(--hero-ease),box-shadow .25s var(--hero-ease)}
.radio-play:hover{transform:scale(1.05);box-shadow:0 10px 28px var(--hero-glow)}
.radio-play svg{width:19px;height:19px}
.radio-play .ico-pause{display:none}
.radio.is-playing .radio-play .ico-play{display:none}
.radio.is-playing .radio-play .ico-pause{display:block}

.radio-body{flex:1;min-width:0}
.radio-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:9px}
.radio-label{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-fg-3)}
.radio-time{font-family:var(--font-mono);font-size:11px;color:var(--hero-fg-4);white-space:nowrap;font-variant-numeric:tabular-nums}

.radio-bar{position:relative;height:5px;border-radius:999px;background:var(--hero-surface-2);cursor:pointer;overflow:hidden}
.radio-bar:focus-visible{outline:2px solid var(--hero-flame-soft);outline-offset:3px}
.radio-fill{height:100%;width:0;border-radius:999px;background:var(--hero-flame)}
.radio.is-playing .radio-fill{transition:width .2s linear}

.radio-speed,.radio-dl{flex:none;display:flex;align-items:center;justify-content:center;height:34px;border:1px solid var(--hero-hairline);border-radius:999px;background:transparent;color:var(--hero-fg-3);font-family:var(--font-mono);font-size:11.5px;cursor:pointer;transition:border-color .25s var(--hero-ease),color .25s var(--hero-ease)}
.radio-speed{width:44px}
.radio-dl{width:34px}
.radio-dl svg{width:15px;height:15px}
.radio-speed:hover,.radio-dl:hover{border-color:var(--hero-flame-soft);color:var(--hero-fg-1)}

/* Atascado: el 200 llegó pero el cuerpo no. Se avisa y se destaca la descarga,
   que es la vía que sí funciona. */
.radio.is-stalled{border-color:var(--hero-flame-soft)}
.radio.is-stalled .radio-label{color:var(--hero-flame-end)}
.radio.is-stalled .radio-bar{opacity:.35}
.radio.is-stalled .radio-speed{display:none}
.radio.is-stalled .radio-dl{display:flex;border-color:var(--hero-flame-soft);color:var(--hero-flame-end)}

@media (max-width:560px){
  .radio{gap:12px;padding:12px 14px;flex-wrap:wrap}
  .radio-body{order:3;flex-basis:100%}
  .radio-dl{display:none}   /* en móvil se escucha, no se descarga */
}

/* ─── Suscripción al podcast (dentro de la banda de correo) ─── */
.sub-podcast{margin-top:26px;padding-top:22px;border-top:1px solid var(--hero-hairline)}
.sub-or{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-fg-4)}
.podcast-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.podcast-ico{width:18px;height:18px;color:var(--hero-flame-end);flex:none}
.podcast-url{font-family:var(--font-mono);font-size:11.5px;color:var(--hero-fg-2);background:var(--hero-surface-2);border:1px solid var(--hero-hairline);border-radius:8px;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;flex:1}

/* ─── Agenda acumulada (modal) ─── */
.agenda-all{display:block;width:100%;margin-top:16px;padding:9px 14px;border:1px solid var(--hero-hairline);border-radius:10px;background:transparent;color:var(--hero-fg-2);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;cursor:pointer;transition:border-color .25s var(--hero-ease),color .25s var(--hero-ease)}
.agenda-all:hover{border-color:var(--hero-flame-soft);color:var(--hero-fg-1)}

.agenda-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,4,10,.72);padding:0}
@media (min-width:760px){.agenda-modal{align-items:center;padding:32px 20px}}
.agenda-sheet{display:flex;flex-direction:column;width:100%;max-width:720px;max-height:88vh;background:var(--hero-bg-2);border:1px solid var(--hero-hairline);border-radius:16px 16px 0 0;overflow:hidden}
@media (min-width:760px){.agenda-sheet{border-radius:16px}}
.agenda-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 14px;border-bottom:1px solid var(--hero-hairline)}
.agenda-sheet-count{font-family:var(--font-mono);font-size:13px;color:var(--hero-fg-2);margin-top:8px}
.agenda-close{flex:none;width:32px;height:32px;border-radius:999px;border:1px solid var(--hero-hairline);background:transparent;color:var(--hero-fg-3);font-size:19px;line-height:1;cursor:pointer;transition:border-color .25s var(--hero-ease),color .25s var(--hero-ease)}
.agenda-close:hover{border-color:var(--hero-flame-soft);color:var(--hero-fg-1)}
.agenda-sheet-body{flex:1;overflow-y:auto;padding:6px 22px 18px}

/* Filtros por alcance. Sticky dentro del panel que scrollea: con doce eventos
   los chips se irían de vista al segundo scroll y habría que volver arriba para
   cambiar de filtro. El fondo opaco es obligatorio — sin él, las tarjetas se
   ven pasar por debajo. */
.agenda-filters{
  position:sticky;top:0;z-index:2;
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 0 13px;margin-bottom:2px;
  background:var(--hero-bg-2);
  border-bottom:1px solid var(--hero-hairline);
}
.agenda-chip{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  color:var(--hero-fg-2);background:transparent;
  border:1px solid var(--hero-hairline-2);
  transition:color .2s var(--hero-ease),border-color .2s var(--hero-ease),
             background .2s var(--hero-ease);
}
.agenda-chip:hover{color:var(--hero-fg-1);border-color:var(--hero-flame-soft)}
/* El activo lleva la flama de marca. Texto oscuro y no blanco: sobre el naranja
   el blanco no llega a contraste de lectura. */
.agenda-chip.is-on{
  color:#0A0A12;font-weight:500;
  background:var(--hero-flame);border-color:transparent;
}
.agenda-chip.is-on:hover{color:#0A0A12}
.agenda-chip:focus-visible{outline:2px solid var(--hero-flame-end);outline-offset:2px}
/* El primer rótulo de grupo va pegado a los chips; sin esto quedan 20px de aire. */
.agenda-list > .scope-label:first-child{margin-top:14px}
.agenda-sheet-foot{padding:12px 22px 16px;border-top:1px solid var(--hero-hairline);font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--hero-fg-4)}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .plane.is-flying{animation:none;opacity:0}
  .skeleton{animation:none}
  /* El brillo de la marca y del escudo sigue, pero sin movimiento ni latido. */
  .brand:hover .brand-shield{transform:none}
  .masthead-seal::before{animation:none;opacity:.4}
  .masthead-seal:hover .seal-svg{transform:none}
}