/* ============================================================
   EL SUMARIO — archivo de las newsletters.
   Las portadas son miniaturas de YouTube muy saturadas: 150 juntas
   son un muro de ruido. Por eso NO entran en la lista; aparecen
   solo en tres sitios controlados (último número, visor y cabecera
   del número). La jerarquía la pone la tipografía.
   ============================================================ */
@font-face{
  font-family:'Mastery';
  src:url('../fonts/mastery.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
/* Selección de texto: naranja de marca con tinta negra (7,9:1 de
   contraste; en blanco se quedaba en 2,9:1). Misma regla en todas las
   hojas del sitio, que cada página carga las suyas. */
::selection{background:#ff5f00;color:#0b0c0f;text-shadow:none}

:root{
  --bg:#0b0c0f; --ink:#fff; --ink2:#c3c9d4; --muted:#8b93a1;
  --accent:#ff5f00; --accent-text:#ff7a2e;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --panel:#14161c; --card:#1a1e26;
  --font-d:'Poppins',sans-serif;
  --margen:clamp(1.25rem,calc(1.25rem + 1.787*((100vw - 20rem)/140)),3.037rem);
  --ancho:81.25rem;                 /* 1300px, como todo el sitio */
  --topbar:89px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scrollbar-color:#ff5f00 #0e1015;scrollbar-width:thin}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0b0c0f}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff7620,#c74b00);
  border-radius:99px;border:3px solid #0b0c0f}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;
  font:400 17px/1.65 var(--font-d);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
ol,ul{list-style:none;margin:0;padding:0}

.su_cont{width:calc(100% - var(--margen)*2);max-width:var(--ancho);margin-inline:auto}
.su_script{font-family:'Mastery',cursive;font-weight:400;font-synthesis:none;
  text-transform:none;color:var(--accent);font-size:1.15em;line-height:.7;
  display:inline-block;padding:0 .05em}

/* ── topbar del sitio ── */
.su_top{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.2rem var(--margen)}
.su_top_izq{display:flex;align-items:center;gap:1.4rem;min-width:0}
.su_logo img{height:46px;width:auto}
/* el menú a la derecha del logo, igual que en el resto del sitio */
.su_top .topnav{margin-left:auto}

/* ── 1 · cabecera: el titular manda, sin eyebrow ── */
.su_cab{padding-top:clamp(3.5rem,9vh,8.75rem);padding-bottom:clamp(2.5rem,5vh,3.5rem)}
.su_cab_g{display:grid;gap:clamp(2rem,4vw,4rem);align-items:end}
@media (min-width:900px){.su_cab_g{grid-template-columns:1fr 20rem}}
.su_cab h1{margin:0;font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,calc(1.6rem + 3.4vw),5rem);
  letter-spacing:-.035em;line-height:.98}
.su_datos{display:flex;flex-flow:column}
.su_dato{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-top:1px solid var(--line)}
.su_dato:last-child{border-bottom:1px solid var(--line)}
.su_dato span{font-size:.75rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.su_dato b{font-size:1.4rem;font-weight:800;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}

/* ── 2 · la tira: cada marca es un número; sirve para ver la escala
   real del archivo y para saltar a cualquiera ── */
.su_tira{padding-bottom:clamp(2rem,5vh,3rem)}
.su_tira_wrap{position:relative;cursor:crosshair}
.su_tira svg{display:block;width:100%;height:64px;overflow:visible}
.su_marca{fill:rgba(255,255,255,.28);transition:fill .25s}
.su_marca.is-apaga{fill:rgba(255,255,255,.07)}
.su_marca.is-casa{fill:var(--accent)}
.su_marca.is-cerca{fill:#fff}
.su_anio_tira{fill:var(--muted);font-size:11px;font-weight:600;letter-spacing:.16em}
/* el rótulo sale pegado a la marca, con su portada: así se entiende de
   un vistazo que cada marca es una newsletter */
.su_rotulo{position:absolute;z-index:5;pointer-events:none;opacity:0;
  display:flex;align-items:center;gap:.6rem;padding:.42rem .7rem .42rem .42rem;
  border-radius:10px;background:#1a1e26;border:1px solid var(--line2);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.8);white-space:nowrap;
  transform:translateX(-50%);transition:opacity .16s}
.su_rotulo.is-on{opacity:1}
.su_rotulo img{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:5px;
  background:#0d0f14}
.su_rotulo b{font-size:.78rem;font-weight:700;color:var(--accent-text)}
.su_rotulo i{font-style:normal;font-size:.74rem;color:var(--muted)}
.su_tira_pie{display:flex;justify-content:space-between;gap:1rem;
  margin:.9rem 0 0;font-size:.74rem;color:var(--muted)}
.su_tira_pie span:last-child{color:rgba(255,255,255,.35)}
/* ── 3 · el último número ── */
.su_ult{display:grid;gap:clamp(1.6rem,3vw,3rem);align-items:center;
  padding-block:clamp(2rem,4vh,3.5rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:900px){.su_ult{grid-template-columns:35rem 1fr}}
.su_ult_media{border-radius:16px;overflow:clip;border:1px solid var(--line2);
  background:var(--card)}
.su_ult_media img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:brightness(.92);
  transition:filter .45s,transform .6s cubic-bezier(.3,.9,.3,1)}
.su_ult:hover .su_ult_media img{filter:brightness(1);transform:scale(1.03)}
.su_ult_txt{display:flex;flex-flow:column;align-items:flex-start;gap:.7rem}
.su_ult_meta{display:flex;align-items:center;gap:.8rem;font-size:.78rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.su_ult_meta b{color:var(--accent-text)}
.su_ult_tit{margin:0;font-size:clamp(1.5rem,2.6vw,2.55rem);font-weight:800;
  line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.su_ult_sub{margin:0;font-size:clamp(1rem,1.2vw,1.19rem);line-height:1.55;
  color:var(--ink2);max-width:34rem}
.su_ult_cta{margin-top:.8rem;display:flex;flex-flow:column;gap:.45rem}
.su_ult_cta i{font-size:.78rem;color:var(--muted);font-style:normal}

/* ── botones ── */
.su_btn{display:inline-flex;align-items:center;gap:.7rem;height:56px;padding:0 1.6rem;
  border:1px solid transparent;border-radius:99px;font-weight:600;cursor:pointer;
  background:var(--accent);color:#0b0c0f;white-space:nowrap;width:fit-content;
  transition:transform .35s cubic-bezier(.625,.05,0,1),background .3s,border-color .3s}
.su_btn i{font-style:normal;transition:transform .35s cubic-bezier(.625,.05,0,1)}
.su_btn:hover{transform:translateY(-2px);background:#ff7620}
.su_btn:hover i{transform:translateX(5px)}
.su_btn--fant{background:rgba(255,255,255,.07);color:var(--ink);border-color:var(--line2)}
.su_btn--fant:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}

/* ── 4 · barra pegajosa: año, anclas, extra y buscador ── */
.su_barra{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--line)}
.su_barra_g{display:flex;align-items:center;gap:1rem 1.4rem;height:56px;
  flex-flow:row wrap}
.su_anio_act{font-size:.95rem;font-weight:800;letter-spacing:-.01em;
  min-width:3.4rem;font-variant-numeric:tabular-nums}
.su_anclas{display:flex;gap:1.1rem}
.su_ancla{font-size:.86rem;font-weight:600;color:var(--muted);background:none;
  border:none;padding:0;cursor:pointer;transition:color .25s}
.su_ancla:hover,.su_ancla.is-on{color:var(--ink)}
.su_extra{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  background:none;border:1px solid var(--line2);border-radius:99px;
  padding:.34rem .8rem;cursor:pointer;transition:color .25s,border-color .25s}
.su_extra:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.su_extra.is-on{color:var(--accent);border-color:rgba(255,95,0,.5)}
.su_busca{margin-left:auto;display:flex;align-items:center;gap:.55rem;
  height:38px;padding:0 .95rem;border:1px solid var(--line2);border-radius:99px;
  background:rgba(0,0,0,.35);width:min(17rem,42vw);
  transition:border-color .25s,background .25s}
.su_busca:focus-within{border-color:var(--accent);background:rgba(0,0,0,.55)}
.su_busca svg{flex:none;width:.95rem;height:.95rem;stroke:var(--muted);
  stroke-width:2;fill:none}
.su_busca input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-size:.88rem}
.su_busca input::placeholder{color:var(--muted)}
.su_busca input::-webkit-search-cancel-button{filter:invert(.6)}
.su_cuenta{font-size:.76rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── 5 · el sumario ── */
.su_lista_sec{padding-top:clamp(2rem,4vh,3rem);padding-bottom:clamp(3rem,7vh,5rem)}
.su_lista_g{display:grid;gap:4rem;align-items:start}
@media (min-width:1120px){.su_lista_g{grid-template-columns:minmax(0,1fr) 23.75rem}}
.su_anio_cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;padding-top:clamp(2rem,4vh,3rem);padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.18)}
.su_anio_cab:first-child{padding-top:0}
.su_anio_cab b{font-size:clamp(2.2rem,4vw,4rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.su_anio_cab span{font-size:.8rem;color:var(--muted);text-align:right}
.su_mes_sep{display:flex;align-items:center;gap:1rem;padding-top:1.6rem;
  padding-bottom:.4rem}
.su_mes_sep span{font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);flex:none}
.su_mes_sep i{flex:1;height:1px;background:var(--line)}

.su_fila{position:relative;display:grid;gap:.35rem 2rem;align-items:baseline;
  padding:1.25rem .9rem 1.25rem 1rem;border-bottom:1px solid var(--line);
  grid-template-columns:3.6rem 5.4rem minmax(0,1fr) 1.2rem;
  transition:background .16s}
.su_fila::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:center;
  transition:transform .2s}
.su_fila:hover,.su_fila:focus-visible{background:var(--panel)}
.su_fila:hover::before,.su_fila:focus-visible::before,.su_fila.is-marcada::before{transform:scaleY(1)}
.su_fila_n{font-size:.92rem;font-weight:600;color:var(--muted);text-align:right;
  font-variant-numeric:tabular-nums;transition:color .16s}
.su_fila:hover .su_fila_n{color:var(--accent)}
.su_fila_n.es-extra{font-size:.68rem;font-weight:700;letter-spacing:.12em;
  color:var(--accent)}
.su_fila_f{font-size:.8rem;font-weight:500;color:var(--muted);text-transform:uppercase;
  white-space:nowrap}
.su_fila_tit{font-size:clamp(1rem,1.35vw,1.25rem);font-weight:500;line-height:1.22;
  text-transform:uppercase;letter-spacing:-.012em;color:var(--ink2)}
.su_fila_tit b{font-weight:800;color:var(--ink)}
.su_fila_tit.es-plano{font-weight:700;color:var(--ink)}
.su_fila_sub{grid-column:3;margin-top:.3rem;font-size:.88rem;line-height:1.42;
  color:var(--muted)}
.su_fila_fl{font-size:1rem;opacity:.3;transition:transform .2s,opacity .2s}
.su_fila:hover .su_fila_fl{opacity:1;transform:translateX(5px)}
.su_vacio{padding:4rem 0;text-align:center;color:var(--muted)}

/* el visor: una sola portada en pantalla, anclada, nunca sigue al cursor */
.su_visor{position:sticky;top:calc(56px + 2rem);display:flex;flex-flow:column;gap:1rem}
@media (max-width:1119px){.su_visor{display:none}}
.su_visor_marco{position:relative;border-radius:16px;overflow:clip;
  border:1px solid var(--line2);background:var(--card);aspect-ratio:16/9}
.su_visor_marco img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;filter:brightness(.94);transition:opacity .14s}
.su_visor_marco img.is-on{opacity:1}
.su_visor_txt{display:flex;flex-flow:column;gap:.3rem}
.su_visor_meta{font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.su_visor_tit{font-size:1.05rem;font-weight:700;line-height:1.25}
.su_visor_sub{font-size:.86rem;line-height:1.45;color:var(--muted)}

/* ── 6 · el fragmento de prueba ── */
.su_prueba{padding-block:clamp(3rem,7vh,5rem);border-top:1px solid var(--line)}
.su_prueba_g{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (min-width:820px){.su_prueba_g{grid-template-columns:12rem 1fr}}
.su_prueba_cifra{font-size:clamp(3rem,7vw,4.6rem);font-weight:800;line-height:.9;
  letter-spacing:-.04em;color:var(--accent)}
.su_prueba_cifra span{display:block;margin-top:.6rem;font-size:.76rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.su_prueba_txt{max-width:42rem}
.su_prueba_txt p{margin:0;font-size:1.19rem;line-height:1.78;color:#eef1f6;
  -webkit-mask-image:linear-gradient(#000 62%,rgba(0,0,0,.15));
  mask-image:linear-gradient(#000 62%,rgba(0,0,0,.15))}
.su_prueba_pie{margin-top:1.2rem;display:flex;align-items:center;gap:.8rem;
  font-size:.88rem;color:var(--muted);flex-flow:row wrap}
.su_prueba_pie a{font-weight:700;color:var(--accent-text)}

/* ── 7 · suscripción ── */
.su_alta{padding-block:clamp(3rem,7vh,5rem)}
.su_alta_caja{display:flex;flex-flow:column;align-items:center;text-align:center;
  gap:1.4rem;padding:clamp(2rem,4.5vw,3.5rem);border:1px solid var(--line);
  border-radius:24px;background:var(--panel)}
.su_alta_caja h2{margin:0;font-size:clamp(1.5rem,3vw,2.4rem);font-weight:800;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.su_alta_caja p{margin:0;max-width:34rem;color:var(--ink2);line-height:1.6}
.su_form{display:grid;gap:.7rem;grid-template-columns:minmax(0,1fr) auto;
  width:100%;max-width:32rem}
.su_form input{height:56px;padding:0 1.3rem;border-radius:99px;
  border:1px solid var(--line2);background:rgba(0,0,0,.45);font-size:1rem;min-width:0;
  transition:border-color .3s,background .3s}
.su_form input::placeholder{color:var(--muted)}
.su_form input:focus{outline:none;border-color:var(--accent);background:rgba(0,0,0,.62)}
.su_nota{font-size:.82rem;color:var(--muted)}
.su_ok{font-size:1.05rem;font-weight:600;color:var(--accent-text)}
@media (max-width:560px){
  .su_form{grid-template-columns:1fr}
  .su_btn{justify-content:center;width:100%}
}

/* ── pie ── */
.su_pie{border-top:1px solid var(--line);padding-block:1.5rem;
  font-size:.85rem;color:var(--muted)}
.su_pie .su_cont{display:flex;flex-flow:row wrap;justify-content:space-between;
  gap:.8rem 2rem}
.su_pie nav{display:flex;flex-flow:row wrap;gap:1.5rem}
.su_pie a{transition:color .3s}
.su_pie a:hover{color:var(--ink)}

/* ══════════════════════════════════════════════════════════
   MÓVIL — la tabla de 4 columnas no cabe: cada número pasa a ser
   un bloque apilado (meta / título / subtítulo) a ancho completo,
   con diana de toque generosa. La tira se oculta: la navegación
   la dan las anclas de año y el buscador.
   ══════════════════════════════════════════════════════════ */
@media (max-width:719px){
  .su_cab_g{text-align:center}
  .su_cab h1{text-align:center}
  .su_datos{max-width:22rem;margin-inline:auto;width:100%}
  .su_tira{display:none}
  .su_ult_txt{align-items:flex-start}
  .su_barra_g{height:auto;padding-block:.7rem;gap:.7rem 1.1rem}
  .su_busca{margin-left:0;width:100%;order:9}
  .su_cuenta{order:8}

  /* rejilla explícita: meta en la fila 1, título y subtítulo a ancho
     completo debajo. Sin posiciones absolutas, así el separador respira */
  .su_fila{grid-template-columns:auto 1fr;gap:.15rem .55rem;
    padding:1.1rem .6rem;min-height:76px}
  .su_fila_n,.su_fila_f{font-size:.74rem;letter-spacing:.08em;
    grid-row:1;align-self:center}
  .su_fila_n{grid-column:1;text-align:left;color:var(--accent-text)}
  .su_fila_n::after{content:"·";margin-left:.55rem;color:var(--muted)}
  .su_fila_f{grid-column:2;justify-self:start}
  .su_fila_tit{grid-row:2;grid-column:1/-1;font-size:1.02rem;line-height:1.28;
    margin-top:.35rem}
  .su_fila_sub{grid-row:3;grid-column:1/-1;margin-top:.25rem;font-size:.85rem;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .su_fila_fl{display:none}
  .su_anio_cab b{font-size:2.2rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}