/* ─── 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}
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:9px}
.brand-mark{width:9px;height:9px;border-radius:2.5px;background:var(--hero-flame);box-shadow:0 0 14px var(--hero-glow);flex:none}
.brand-name{font-weight:600;font-size:13.5px;letter-spacing:.04em;color:var(--hero-fg-1)}
.brand-sub{font-family:var(--font-mono);font-size:11px;color:var(--hero-fg-3);letter-spacing:.06em}
.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}
.masthead-lead{font-weight:300;letter-spacing:-0.03em;line-height:1.08;font-size:clamp(32px,5.2vw,60px);margin:20px 0 24px;text-wrap:balance;max-width:24ch}
.masthead-lead a{color:inherit}
.masthead-lead a:hover{color:var(--hero-flame-end)}
.masthead-byline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.byline-logo{width:26px;height:28px;flex:none}
.masthead-date{font-family:var(--font-mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--hero-fg-1)}
.masthead-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.03em;color:var(--hero-fg-3);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.masthead-meta::before{content:"·";color:var(--hero-fg-4)}
.masthead-meta .sep{color:var(--hero-fg-4)}
.masthead-meta .verified{color:var(--hero-flame-end);display:inline-flex;align-items:center;gap:6px}
.masthead-meta .verified::before{content:"✓";font-size:11px}
.masthead-hola{font-family:var(--font-mono);font-size:13px;line-height:1.7;color:var(--hero-fg-2);max-width:52ch;margin-top:22px}
.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)}

/* ─── Cockpit grid ─── */
.cockpit{display:grid;grid-template-columns: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-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-flame-end);margin-bottom:14px}
.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)}
.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-4);padding:14px 0 4px}

/* ─── Fuentes ─── */
.sources-grid{display:grid;grid-template-columns:1fr;gap:2px}
@media (min-width:640px){.sources-grid{grid-template-columns:1fr 1fr;column-gap:32px}}
.source-link{display:flex;align-items:baseline;gap:12px;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)}

/* ─── 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}
}