/* ─── 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:#080810; --hero-bg-2:#0D0D18;
  --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}
body{background:var(--hero-bg);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. */
.masthead::after{content:"";position:absolute;left:-14%;top:4%;width:min(460px,52vw);height:340px;background:radial-gradient(circle at 40% 45%,var(--hero-glow),transparent 68%);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}
.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}
}