/* ==========================================================
   CBN NOTICIAS — Mobile-first premium
   Diseño editorial: periódico + moderno
   ========================================================== */

/* ---------- TOKENS ---------- */
:root {
  /* Paleta editorial */
  --ink:         #0A0A0A;
  --ink-2:       #1C1C1C;
  --ink-3:       #2E2E2E;
  --mute:        #6B6B6B;
  --mute-2:      #9A9A9A;
  --line:        #E4E1DB;
  --line-2:      #D4D1CB;
  --paper:       #FAF7F2;
  --paper-2:     #F4EFE6;
  --paper-3:     #EBE5D8;
  --cream:       #F8F3EA;
  --white:       #FFFFFF;

  /* Color marca */
  --red:         #C8102E;   /* rojo periódico/canadiense */
  --red-dark:    #9E0E25;
  --blue:        #0B2E5C;   /* azul editorial */
  --gold:        #B8925A;

  /* Categorías */
  --cat-local:         #0B6E4F;
  --cat-nacional:      #8D5524;
  --cat-internacional: #A8201A;
  --cat-inmigracion:   #1D4E89;
  --cat-actualidad:    #C06C14;

  /* Tipografía */
  --serif:  'Playfair Display', 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:   'JetBrains Mono', monospace;

  /* Escala */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.04);
  --sh-2: 0 4px 16px rgba(0,0,0,.08);
  --sh-3: 0 10px 40px rgba(0,0,0,.15);
  --sh-paper: 0 1px 0 rgba(0,0,0,.04), 0 20px 50px rgba(10,10,10,.12);

  /* Transiciones */
  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-2:  cubic-bezier(.85,0,.15,1);
  --ease-3:  cubic-bezier(.16,1,.3,1);

  --header-h: 56px;
  --ticker-h: 32px;
}

/* ---------- RESET ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(184,146,90,.05) 0%, transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(11,46,92,.04) 0%, transparent 40%);
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input { font: inherit; }

/* ---------- TICKER ---------- */
.ticker {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--ticker-h);
  padding: 0 var(--s-4);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
  font-size: 12px;
  letter-spacing: .02em;
  border-bottom: 1px solid #000;
  position: sticky;
}
.ticker__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--red);
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px rgba(200,16,46,.35);
}
.ticker__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: white;
  animation: pulse 1.3s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(.7); }
}
.ticker__track {
  display: flex;
  gap: var(--s-7);
  animation: ticker-scroll 40s linear infinite;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin-left: 4px;
}
.ticker__content {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  padding-right: var(--s-7);
  flex-shrink: 0;
}
.ticker__content span { white-space: nowrap; }
.ticker__sep {
  color: var(--red);
  font-size: 10px;
}
/* Ítems clickables del ticker (cargados dinámicamente) */
.ticker__item {
  cursor: pointer;
  transition: color .2s ease;
  font-weight: 500;
}
.ticker__item:hover,
.ticker__item:focus-visible {
  color: var(--red);
  outline: none;
}
/* Pausar la animación al hover sobre todo el ticker para poder leer/clickear */
.ticker:hover .ticker__track {
  animation-play-state: paused;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- HEADER ---------- */
/* Layout: logo flex izquierda, brand editorial CENTRADO ABSOLUTO en el viewport
   (con position absolute para garantizar centrado matemático real, sin importar
   tamaños asimétricos de logo y actions), iconos juntos a la derecha. */
.header {
  position: sticky;
  top: var(--ticker-h);
  z-index: 45;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h);
  padding: 0 var(--s-3);
  background: rgba(250,247,242,.94);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.icon-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ink);
  transition: background .2s var(--ease);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:active { background: var(--paper-3); }
.icon-btn--invert { color: var(--ink); }

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font-family: var(--serif);
  color: var(--ink);
  gap: 2px;
}
/* Imagen del logo en el header — altura controlada para no saturar */
.logo__img {
  display: block;
  height: 38px;
  width: auto;
  border-radius: 3px;
  object-fit: contain;
}

/* ===== BRAND EDITORIAL CENTRAL (skyline + slogan) ===== */
/* Brand editorial central — POSITION ABSOLUTE para centrado matemático real,
   independiente del ancho del logo y los iconos a los lados. */
.header__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* decorativo, no interfiere con clicks */
  white-space: nowrap;
}
.header__editorial {
  display: inline-flex;
  align-items: baseline; /* alinear por baseline para que serif e italic queden a la misma línea */
  gap: 6px;
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.2;
}
.header__location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand, #C8102E);
  font-weight: 700;
}
.header__pin {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.header__country {
  color: var(--ink);
  font-weight: 500;
}
.header__sep {
  color: var(--mute);
  font-weight: 400;
  letter-spacing: 0;
}
.header__slogan {
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--serif);
  font-weight: 400;
  text-transform: none;
  letter-spacing: .02em;
  /* mismo font-size que el resto del editorial — la serif lo hace ver mayor visualmente */
  font-size: 10.5px;
  position: relative;
  top: 0.5px; /* micro-ajuste óptico para serif italic */
}

/* ===== ACTIONS DERECHA (hamburguesa + lupa juntas) ===== */
.header__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* En mobile mediano (≤540px), esconder slogan italic y mostrar solo Vancouver · Columbia Británica */
@media (max-width: 540px) {
  .header__sep--last,
  .header__slogan {
    display: none;
  }
  .header__editorial {
    font-size: 9px;
    letter-spacing: .18em;
    gap: 5px;
  }
}
/* En mobile pequeño (≤380px), solo mostrar Vancouver con su pin (lo más esencial) */
@media (max-width: 380px) {
  .header__country,
  .header__sep {
    display: none;
  }
  .header__editorial {
    font-size: 9.5px;
    letter-spacing: .15em;
  }
}
.logo__mark {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: .06em;
  position: relative;
  padding: 0 6px;
}
.logo__mark::before,
.logo__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: var(--ink);
  transform: translateY(-50%);
}
.logo__mark::before { right: 100%; }
.logo__mark::after  { left: 100%; }
.logo__sub {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}

/* ---------- DATELINE ---------- */
.dateline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-3);
}
.dateline__left,
.dateline__right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dateline__right { gap: 6px; }
.dateline__day {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.weather svg {
  width: 16px;
  height: 16px;
  color: var(--gold);
}
.dateline__city {
  font-weight: 600;
  color: var(--ink);
  padding-left: 6px;
  border-left: 1px solid var(--line);
  margin-left: 2px;
}

/* ---------- BOTÓN DE IDIOMA ---------- */
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 5px 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.lang-btn:active {
  transform: scale(.96);
  background: var(--paper-2);
  border-color: var(--ink);
}
.lang-btn svg { width: 14px; height: 14px; color: var(--mute); }
.lang-btn__code {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink);
}
.lang-btn__chevron {
  width: 12px !important;
  height: 12px !important;
  transition: transform .25s var(--ease);
}
.lang-btn[aria-expanded="true"] {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.lang-btn[aria-expanded="true"] svg,
.lang-btn[aria-expanded="true"] .lang-btn__code { color: var(--white); }
.lang-btn[aria-expanded="true"] .lang-btn__chevron { transform: rotate(180deg); }

/* Menú dropdown idiomas */
.lang-menu {
  position: fixed;
  top: 0;
  left: var(--s-4);
  z-index: 60;
  min-width: 200px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 6px;
  box-shadow: var(--sh-3);
  transform-origin: top left;
  transform: scale(.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .25s var(--ease-3);
}
.lang-menu.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.lang-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s;
  text-align: left;
}
.lang-menu__item:active { background: var(--paper-2); }
.lang-menu__flag { font-size: 20px; line-height: 1; }
.lang-menu__label { flex: 1; }
.lang-menu__check {
  width: 18px;
  height: 18px;
  color: var(--green);
  opacity: 0;
  transition: opacity .2s;
}
.lang-menu__item--active { background: var(--paper-2); }
.lang-menu__item--active .lang-menu__check { opacity: 1; }

/* Indicador de traducción en progreso */
.lang-translating {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  background: var(--ink);
  color: var(--white);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 8px;
  box-shadow: var(--sh-3);
  animation: fade-up .3s var(--ease-3);
}
.lang-translating.is-visible { display: inline-flex; }
.lang-translating__spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: var(--white);
  border-radius: 999px;
  animation: spin .7s linear infinite;
}

/* Responsive: en mobile más estrecho, simplificar */
@media (max-width: 380px) {
  .dateline { font-size: 11px; }
  .lang-btn { padding: 4px 6px; }
  .lang-btn__code { font-size: 10px; }
  .dateline__city { display: none; } /* ocultar Vancouver en pantallas muy pequeñas */
}

/* ============================================================
   CIERRE EDITORIAL CINEMÁTICO — scroll-driven bidireccional
   Sección al final del sitio. Video avanza al bajar,
   retrocede al subir. Mobile-first, full-bleed.
   ============================================================ */
.cinema {
  position: relative;
  height: 220vh;          /* 2.2 viewports → tiempo justo, no se siente largo */
  background: #0A0A0A;
}
.cinema::before { display: none; }

.cinema__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #0A0A0A;
}

/* Stage: contenedor del video. En mobile va full-bleed.
   En desktop se convierte en una columna del grid. */
.cinema__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Frame: caja que recorta el video. En mobile = full bleed.
   En desktop = caja contenida con borde y sombra. */
.cinema__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0A0A0A;
}

.cinema__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover llena toda la pantalla sin franjas negras.
     Se centra para que la máquina y el papel queden dentro
     del viewport en cualquier dispositivo. */
  object-fit: cover;
  object-position: center center;
  background: #0A0A0A;
  pointer-events: none;
  display: block;
  will-change: contents;
  transform: translateZ(0);
}

/* Capa de oscurecimiento que sube/baja con el scroll para legibilidad */
.cinema__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Bottom padding más grande para que la cita y firma queden
     más arriba (no en el extremo inferior del viewport) */
  padding:
    calc(env(safe-area-inset-top, 0px) + 28px)
    var(--s-5)
    calc(env(safe-area-inset-bottom, 0px) + 18vh);
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.05) 22%,
      rgba(0,0,0,0) 45%,
      rgba(0,0,0,.18) 68%,
      rgba(0,0,0,.7) 100%);
  pointer-events: none;
  color: var(--white);
}

/* TOP: kicker editorial */
.cinema__top {
  text-align: center;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .8s var(--ease-3), transform .8s var(--ease-3);
}
.cinema__top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cinema__kicker {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  border-radius: 999px;
}

/* MID: título central — oculto en mobile (solo se usa en desktop) */
.cinema__mid {
  display: none;
  flex: 1;
  padding: var(--s-5) 0;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-3), transform 1s var(--ease-3);
}
.cinema__mid.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Visibility helpers: mobile-only y desktop-only para mostrar/ocultar
   bloques específicos por viewport.
   Default (mobile): mostrar mobile-only, ocultar desktop-only.
   Override en @media (min-width: 768px): invertir. */
.cinema__mobile-only { display: block; }
.cinema__desktop-only { display: none !important; }

/* BODY: párrafo lead — oculto en mobile (solo se usa en desktop) */
.cinema__body {
  display: none;
}
.cinema__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(34px, 11vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--white);
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
}

/* BOT: cita + firma */
.cinema__bot {
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-3), transform 1s var(--ease-3);
}
.cinema__bot.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.cinema__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  margin-bottom: 10px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.cinema__signature {
  display: inline-block;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--red);
  font-weight: 700;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.2);
}

/* Barra de progreso roja arriba (sutil) */
.cinema__progress {
  position: absolute;
  top: 5px;     /* después de la franja editorial */
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--red);
  z-index: 4;
  transition: width .15s var(--ease);
  box-shadow: 0 0 12px var(--red);
}

/* Hint visual: "sigue bajando" */
.cinema__hint {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: rgba(255,255,255,.65);
  letter-spacing: .05em;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  pointer-events: none;
  opacity: 1;
  transition: opacity .5s var(--ease);
  animation: hintBounce 2.2s ease-in-out infinite;
}
.cinema__hint.is-hidden { opacity: 0; }
@keyframes hintBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 4px); }
}

@media (min-width: 768px) {
  .cinema { height: 240vh; }
  .cinema__quote { font-size: 19px; }
  .cinema__title { font-size: clamp(48px, 7vw, 72px); }
}

/* ---------- HERO DESTACADA (carrusel) ---------- */
.hero {
  padding: var(--s-5) var(--s-4) var(--s-6);
  border-bottom: 3px double var(--ink);
}

.hero__carousel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.hero__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
}
.hero__track::-webkit-scrollbar { display: none; }

.hero__slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: block;
  text-decoration: none;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up .8s var(--ease-3) .15s forwards;
}

/* Compatibilidad con .hero__card (estilos que ya existen funcionan en .hero__slide) */
.hero__card {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up .8s var(--ease-3) .15s forwards;
}

/* Counter "1 / 3" arriba a la derecha */
.hero__counter {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  padding: 5px 10px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  border: 1px solid rgba(255,255,255,.18);
  pointer-events: none;
}
.hero__counter-sep { opacity: .5; }

/* Dots de navegación abajo */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.hero__dot {
  pointer-events: auto;
  width: 24px;
  height: 5px;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.35);
  border-radius: 999px;
  cursor: pointer;
  transition: width .35s var(--ease), background .25s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.hero__dot--active {
  width: 44px;
  background: rgba(255,255,255,.95);
}
.hero__dot-fill {
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ease);
}
/* La barra de progreso ahora la controla JS con requestAnimationFrame
   para garantizar sincronización perfecta entre la barra y el cambio
   de slide. La animación CSS quedó deprecated. */

/* Flechas (solo desktop) */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: none; /* mobile usa swipe */
  place-items: center;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .2s var(--ease), background .2s;
}
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow:hover { background: var(--red); color: var(--white); transform: translateY(-50%) scale(1.05); }
.hero__arrow--prev { left: 12px; }
.hero__arrow--next { right: 12px; }

@media (min-width: 768px) {
  .hero__arrow { display: grid; }
}
.hero__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--ink-2), var(--ink-3));
}
.hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
}
.hero__img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform .8s var(--ease);
}
.hero__card:active .hero__img-bg,
.hero__slide:active .hero__img-bg { transform: scale(1.02); }
.hero__meta {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  display: flex;
  gap: var(--s-2);
  z-index: 4;
}
.hero__cat {
  padding: 5px 10px;
  background: var(--red);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(200,16,46,.35);
}
.hero__badge {
  padding: 5px 10px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
}
.hero__text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s-5) var(--s-4) var(--s-4);
  color: var(--white);
  z-index: 3;
  box-sizing: border-box;
  max-width: 100%;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(22px, 6.2vw, 28px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: var(--s-3);
  text-shadow: 0 2px 16px rgba(0,0,0,.4);
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* Sin hyphens: auto — partía palabras feo ("sus-pende", "de-bido").
     Mejor que el título crezca su altura natural a que se corte. */
  hyphens: manual;
}
.hero__summary {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.92);
  margin-bottom: var(--s-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero__footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-size: 12px;
  color: rgba(255,255,255,.75);
}
.hero__footer .sep { opacity: .4; }
.hero__read {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
  border-radius: 999px;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.hero__read svg { width: 14px; height: 14px; }
.hero__card:active .hero__read,
.hero__slide:active .hero__read { transform: translateX(2px); background: var(--red); color: var(--white); }

@keyframes fade-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- CATEGORY BANNER (aparece al filtrar) ---------- */
.category-banner {
  padding: 0;
  border-bottom: 3px double var(--ink);
  overflow: hidden;
  animation: banner-enter .7s var(--ease-3);
}
.category-banner[hidden] { display: none; }
.category-banner__inner {
  position: relative;
  padding: var(--s-8) var(--s-4) var(--s-7);
  background:
    linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%),
    var(--paper-2);
  overflow: hidden;
}
.category-banner__inner::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 6px;
  background: var(--cat-color, var(--red));
}
.category-banner__inner::after {
  content: '';
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: var(--cat-color, var(--red));
  opacity: .07;
  filter: blur(10px);
}
.category-banner__kicker {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cat-color, var(--red));
  margin-bottom: var(--s-3);
  padding: 4px 10px;
  border: 1px solid var(--cat-color, var(--red));
  border-radius: 3px;
  background: var(--white);
}
.category-banner__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: var(--s-3);
  max-width: 90%;
}
.category-banner__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 90%;
  position: relative;
  z-index: 1;
}
.category-banner__line {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--cat-color, var(--red));
  margin-top: var(--s-4);
}
@keyframes banner-enter {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- CHIPS CATEGORÍAS ---------- */
/* Wrapper feed-section: contenedor padre del sticky de chips.
   El sticky termina cuando este wrapper acaba (antes de "Lo más leído"),
   no en toda la página. NO debe tener overflow:hidden — eso rompe sticky. */
.feed-section {
  position: relative;
}

/* Outer wrapper de chips — sticky + visible (no recorta sombras del chip activo) */
.chips-wrap {
  position: sticky;
  top: calc(var(--ticker-h) + var(--header-h));
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  /* Padding vertical generoso para que la sombra del chip activo se vea entera */
  padding: 12px 0;
  /* Forzar capa GPU separada para evitar parpadeo en scroll rápido */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* Inner — scroll horizontal en mobile, sin recortar sombras verticales */
.chips {
  display: flex;
  gap: var(--s-2);
  padding: 6px var(--s-4);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  /* compensación de sombra: padding interno permite que el chip activo
     no quede pegado al border-bottom del wrap */
}
.chips::-webkit-scrollbar { display: none; }

/* ===== CATEGORÍAS / CHIPS - Diseño editorial premium 2026-04-28 =====
   Pildoras con borde de color de la categoría, estado activo con
   relleno del color de la categoría, transiciones suaves, hover lift. */
.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
  position: relative;
  cursor: pointer;
  /* El color de la categoría se inyecta vía --chip-color desde JS */
  --chip-color: var(--ink);
}
.chip:hover {
  border-color: var(--chip-color);
  color: var(--ink);
  /* Sin transform para que no se corte por overflow:auto del scroll horizontal */
}
.chip:active { transform: scale(.97); }
.chip--active {
  background: var(--chip-color);
  color: var(--white);
  border-color: var(--chip-color);
  /* Sombra interna (no se sale del box, no la corta el overflow) +
     sombra externa pequeña que cabe en el padding del scroll */
  box-shadow: 0 2px 6px color-mix(in srgb, var(--chip-color) 40%, transparent),
              0 1px 0 rgba(255,255,255,.25) inset;
}
.chip--active:hover { color: var(--white); }
.chip__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--chip-color);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.6);
  transition: background-color .22s var(--ease), box-shadow .22s var(--ease);
}
.chip--active .chip__dot {
  background: var(--white);
  box-shadow: 0 0 0 2px rgba(255,255,255,.4);
}

/* ---------- SECTION TITLE ---------- */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-4) var(--s-4);
}
.section-title h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  flex-shrink: 0;
  max-width: 65%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-title__count {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.section-title__count:empty { display: none; }
.section-title__line {
  flex: 1;
  height: 1px;
  background: var(--ink);
  opacity: .2;
}

/* ---------- EMPTY STATE ---------- */
.empty-state {
  text-align: center;
  padding: var(--s-9) var(--s-4);
  color: var(--mute);
  background: var(--white);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}
.empty-state svg {
  margin: 0 auto var(--s-3);
  opacity: .5;
}
.empty-state__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 6px;
}
.empty-state__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mute);
}

/* ---------- FEED FADE (al cambiar filtro) ---------- */
.feed {
  transition: opacity .3s var(--ease);
}

/* ---------- FEED ---------- */
.feed {
  padding: 0 var(--s-4) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-3);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease-3), transform .6s var(--ease-3);
}
.card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.card:active { transform: translateY(-1px) scale(.995); }
.card:last-child { border-bottom: 0; padding-bottom: 0; }

.card--wide {
  grid-template-columns: 1fr;
}
.card--wide .card__image {
  aspect-ratio: 16/10;
  border-radius: var(--r-md);
}
.card--wide .card__title {
  font-size: 20px;
}

.card__image {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--paper-3);
}
.card__img-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.25) 100%);
}
.card__tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  padding: 2px 7px;
  background: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 2px;
  z-index: 2;
}

.card__body { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
.card__cat {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 6px;
}
.card__title {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--mute);
  margin-top: 8px;
}
.card__footer .sep { opacity: .5; }

/* ---------- TRENDING ---------- */
.trending {
  padding: 0 var(--s-4);
  border-top: 3px double var(--ink);
  margin-top: var(--s-6);
  background:
    linear-gradient(var(--paper-2), var(--paper-2));
}
.trending__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-bottom: var(--s-6);
}
.trending-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.trending-item:last-child { border-bottom: 0; }
.trending-item:active { background: var(--paper-3); }
.trending__num {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 42px;
  color: var(--red);
  line-height: 1;
  text-align: center;
  font-style: italic;
}
.trending__title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trending__meta {
  font-size: 11px;
  color: var(--mute);
  margin-top: 4px;
}
.trending__views {
  font-size: 11px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
}
.trending__views svg { width: 14px; height: 14px; opacity: .6; }

/* ---------- NEWSLETTER ---------- */
.newsletter {
  margin-top: var(--s-8);
  padding: var(--s-9) var(--s-4);
  background: var(--ink);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter::before { display: none; }
.newsletter::after {
  content: 'NEWSLETTER';
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-family: var(--serif);
  font-weight: 900;
  font-style: italic;
  font-size: 90px;
  color: rgba(255,255,255,.03);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.newsletter__inner {
  max-width: 420px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.newsletter__icon {
  width: 58px;
  height: 58px;
  margin: 0 auto var(--s-4);
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.25);
  display: grid;
  place-items: center;
  color: var(--white);
}
.newsletter__icon svg { width: 26px; height: 26px; }
/* Logo del newsletter (mobile) — reemplaza el icono de email */
.newsletter__logo-img {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto var(--s-4);
  border-radius: 4px;
  object-fit: contain;
}
.newsletter__title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: var(--s-3);
}
.newsletter__text {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin-bottom: var(--s-5);
  line-height: 1.55;
}
.newsletter__form {
  display: flex;
  gap: 8px;
  padding: 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  transition: border-color .2s;
}
.newsletter__form:focus-within { border-color: var(--red); }
.newsletter__form input {
  flex: 1;
  padding: 10px 16px;
  background: transparent;
  border: 0;
  color: var(--white);
  font-size: 14px;
  outline: none;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.4); }
.newsletter__form button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.newsletter__form button:active {
  transform: scale(.96);
  background: var(--red-dark);
}
.newsletter__form button svg { width: 14px; height: 14px; }
.newsletter__note {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-top: var(--s-4);
}

/* ---------- ABOUT ---------- */
.about {
  padding: var(--s-9) var(--s-4);
  background: var(--paper);
  text-align: center;
}
.about__badge {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.about__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  max-width: 420px;
  margin: 0 auto var(--s-4);
}
.about__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 420px;
  margin: 0 auto var(--s-6);
}
.about__signature {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border-radius: 999px;
  box-shadow: var(--sh-1);
}
.about__sig-img {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .05em;
}
.about__sig-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.about__sig-text strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
}
.about__sig-text span {
  font-size: 11px;
  color: var(--mute);
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: var(--s-8) var(--s-4) var(--s-5);
  text-align: center;
}
.footer__brand {
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: var(--s-6);
}
.footer__logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 38px;
  letter-spacing: .04em;
  display: block;
}
/* Imagen del logo en el footer — más prominente que en el header */
.footer__logo-img {
  display: block;
  height: 60px;
  width: auto;
  margin: 0 auto var(--s-2);
  border-radius: 4px;
  object-fit: contain;
}
.footer__tag {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.footer__cols {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  text-align: left;
  padding-bottom: var(--s-6);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: var(--s-5);
}
.footer__col h4 {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid rgba(255,255,255,.1);
  letter-spacing: .02em;
}
.footer__col ul { display: flex; flex-direction: column; gap: 8px; }
.footer__col a {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer__col a::before {
  content: '›';
  color: var(--red);
  font-weight: 700;
}
.footer__col a:active { color: var(--white); }
.footer__social {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.8);
  transition: all .2s;
}
.footer__social a svg { width: 18px; height: 18px; }
.footer__social a:active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  transform: scale(.95);
}
.footer__legal {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  line-height: 1.8;
}
.footer__credit a {
  color: rgba(255,255,255,.6);
  border-bottom: 1px dotted rgba(255,255,255,.3);
}

/* ---------- MENÚ LATERAL ---------- */
.side-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform .45s var(--ease-3);
  display: flex;
  flex-direction: column;
  box-shadow: 20px 0 60px rgba(0,0,0,.2);
  visibility: hidden;
}
.side-menu.is-open {
  transform: translateX(0);
  visibility: visible;
}
.side-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.side-menu__label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--mute);
}
/* Logo en el header del menú lateral */
.side-menu__logo-img {
  display: block;
  height: 36px;
  width: auto;
  border-radius: 3px;
  object-fit: contain;
}
.side-menu__nav {
  flex: 1;
  padding: var(--s-3) 0;
  overflow-y: auto;
}
.side-menu__item {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
  transition: background .2s;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-20px);
}
.side-menu.is-open .side-menu__item {
  animation: slide-in .5s var(--ease-3) forwards;
}
.side-menu.is-open .side-menu__item:nth-child(1) { animation-delay: .10s; }
.side-menu.is-open .side-menu__item:nth-child(2) { animation-delay: .14s; }
.side-menu.is-open .side-menu__item:nth-child(3) { animation-delay: .18s; }
.side-menu.is-open .side-menu__item:nth-child(4) { animation-delay: .22s; }
.side-menu.is-open .side-menu__item:nth-child(5) { animation-delay: .26s; }
.side-menu.is-open .side-menu__item:nth-child(6) { animation-delay: .30s; }
@keyframes slide-in {
  to { opacity: 1; transform: translateX(0); }
}
.side-menu__item::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .3s var(--ease);
}
.side-menu__item:active {
  background: var(--paper-2);
}
.side-menu__item:active::after {
  transform: scaleY(1);
}
.side-menu__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute-2);
  letter-spacing: .1em;
}
.side-menu__name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.005em;
}
.side-menu__item svg { width: 18px; height: 18px; color: var(--mute-2); }
.side-menu__footer {
  padding: var(--s-5) var(--s-4);
  border-top: 1px solid var(--line);
  text-align: center;
}
.side-menu__footer p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--mute);
  margin-bottom: var(--s-3);
}
.side-menu__social {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
}
.side-menu__social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}

/* ---------- BÚSQUEDA ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--paper);
  transform: translateY(-100%);
  transition: transform .4s var(--ease-3);
  display: flex;
  flex-direction: column;
  visibility: hidden;
}
.search-overlay.is-open {
  transform: translateY(0);
  visibility: visible;
}
.search-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.search-overlay__header input {
  flex: 1;
  padding: 14px 0;
  background: transparent;
  border: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
}
.search-overlay__header input::placeholder {
  color: var(--mute-2);
  font-style: italic;
}
.search-overlay__results {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4);
}
.search-overlay__empty {
  text-align: center;
  padding: var(--s-10) var(--s-4);
  color: var(--mute-2);
}
.search-overlay__empty svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--s-4);
  opacity: .5;
}
.search-overlay__empty p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}
.search-result {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
  animation: fade-up .3s var(--ease-3) forwards;
}
.search-result__img {
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-sm);
  background-color: var(--paper-3);
}
.search-result__title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result__cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 4px;
}

/* =========================================================
   ARTICLE MODAL — ANIMACIÓN TIPO PERIÓDICO DESPLEGÁNDOSE
   =========================================================
   La pantalla se divide en 2 "hojas de papel" (top y bottom)
   que se abren desde el centro, revelando el artículo.
   Cuando se cierran, se doblan de vuelta.
   ========================================================= */

.article-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
}
.article-modal.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Las 2 hojas del "periódico" que se abren — usan el cartel editorial */
.paper {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background-color: var(--cream);
  z-index: 101;
  will-change: transform;
  transition: transform .75s var(--ease-3);
  box-shadow: 0 0 40px rgba(0,0,0,.2);
  overflow: hidden;
}
/* Cada hoja contiene un pseudo-elemento del tamaño completo del viewport
   con la imagen del cartel CENTRADA y CONTAINED (completa, sin recortar).
   Por overflow:hidden del paper, cada hoja muestra solo su mitad correspondiente
   de la imagen, pero juntas forman el cartel completo. */
.paper::before {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  /* 200% del paper = 100% del modal = área visible del viewport
     (no incluye las barras del navegador, así nada se corta) */
  height: 200%;
  background-image: url('assets/cartel-fondo.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  /* Transparencia para que el cartel se sienta sutil */
  opacity: .6;
}
.paper--top {
  top: 0;
  transform: translateY(-100%);
  border-bottom: 1px solid rgba(0,0,0,.15);
}
.paper--top::before {
  top: 0;
}
.paper--bottom {
  bottom: 0;
  transform: translateY(100%);
  border-top: 1px solid rgba(0,0,0,.15);
}
.paper--bottom::before {
  bottom: 0;
}
/* Efecto tipo "fold" con pseudo-elementos */
.paper--top::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 20px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.12));
  pointer-events: none;
}
.paper--bottom::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 20px;
  background: linear-gradient(0deg, transparent, rgba(0,0,0,.12));
  pointer-events: none;
}

.article-modal.is-opening .paper--top    { transform: translateY(0); }
.article-modal.is-opening .paper--bottom { transform: translateY(0); }

/* Cuando está completamente abierto, las hojas se retiran */
.article-modal.is-open.is-revealed .paper--top    { transform: translateY(-100%); transition: transform .9s var(--ease-2); }
.article-modal.is-open.is-revealed .paper--bottom { transform: translateY(100%);  transition: transform .9s var(--ease-2); }

/* Scroll del artículo */
.article-modal__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  background: var(--cream);
  background-image:
    repeating-linear-gradient(
      transparent 0 34px,
      rgba(10,10,10,.018) 34px 35px
    );
  opacity: 0;
  transition: opacity .4s var(--ease);
  z-index: 102;
}
.article-modal.is-revealed .article-modal__scroll {
  opacity: 1;
}

.article-modal__topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  background: rgba(248,243,234,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.article-modal__masthead {
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.article-modal__masthead em {
  font-style: italic;
  color: var(--mute);
  font-weight: 400;
}

/* Mini logo dentro del masthead del modal de artículo o página estática */
.masthead__logo-img {
  display: inline-block;
  height: 22px;
  width: auto;
  border-radius: 2px;
  vertical-align: middle;
  object-fit: contain;
}

/* Contenido del artículo */
.article-full {
  padding: var(--s-6) var(--s-4) var(--s-8);
  max-width: 640px;
  margin: 0 auto;
}

.article-full__cat {
  display: inline-block;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up .5s var(--ease-3) .5s forwards;
}

.article-full__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin-bottom: var(--s-4);
  opacity: 0;
  transform: translateY(15px);
  animation: fade-up .6s var(--ease-3) .6s forwards;
}

.article-full__summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-3);
  padding-left: var(--s-4);
  border-left: 3px solid var(--red);
  margin-bottom: var(--s-5);
  opacity: 0;
  transform: translateY(15px);
  animation: fade-up .6s var(--ease-3) .75s forwards;
}

.article-full__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-6);
  font-size: 12px;
  color: var(--mute);
  opacity: 0;
  animation: fade-up .6s var(--ease-3) .9s forwards;
}
.article-full__author {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-full__author-img {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
}
.article-full__author strong {
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
}
.article-full__dot {
  opacity: .4;
}

.article-full__image {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  margin-bottom: var(--s-3);
  opacity: 0;
  transform: translateY(15px) scale(.98);
  animation: fade-up-scale .7s var(--ease-3) 1s forwards;
  box-shadow: var(--sh-2);
}
@keyframes fade-up-scale {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.article-full__caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--mute);
  text-align: center;
  margin-bottom: var(--s-6);
  opacity: 0;
  animation: fade-up .5s var(--ease) 1.1s forwards;
}

/* ===== MEDIA DEL ARTÍCULO (foto, video, o foto-con-play) ===== */
.article-full__media {
  position: relative;
  margin-bottom: var(--s-4);
}

/* Foto con overlay de play — cuando la noticia tiene foto + video */
.article-full__image--clickable {
  position: relative;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.article-full__image--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.article-full__image--clickable::after {
  /* oscurece la foto para que el play resalte */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
  border-radius: inherit;
  pointer-events: none;
}
.article-full__play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 2;
  pointer-events: none;
}
.article-full__play-circle {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: var(--ink);
  border-radius: 50%;
  box-shadow: 0 12px 36px rgba(0,0,0,.45),
              0 0 0 4px rgba(255,255,255,.2),
              0 0 0 12px rgba(255,255,255,.08);
  transition: transform .25s var(--ease), background .2s;
  position: relative;
}
.article-full__play-circle::before {
  /* anillo pulsante para llamar atención */
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px solid var(--red);
  opacity: 0;
  animation: play-pulse 2s ease-out infinite;
}
@keyframes play-pulse {
  0%   { opacity: .8; transform: scale(.92); }
  100% { opacity: 0;  transform: scale(1.4); }
}
.article-full__play-circle svg {
  width: 42px;
  height: 42px;
  margin-left: 4px; /* centro óptico del triángulo */
}
.article-full__play-text {
  padding: 8px 18px;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.article-full__image--clickable:hover .article-full__play-circle {
  transform: scale(1.06);
}
.article-full__image--clickable:active .article-full__play-circle {
  transform: scale(.96);
}
@media (max-width: 767px) {
  .article-full__play-circle { width: 76px; height: 76px; }
  .article-full__play-circle svg { width: 34px; height: 34px; }
  .article-full__play-text { font-size: 12px; padding: 6px 14px; }
}

/* ===== VIDEO EN ARTÍCULO =====
   El aspect-ratio del contenedor lo setea JS al cargar el metadata del
   video, igualándolo al aspecto real del archivo. Así un video horizontal
   se ve horizontal, un vertical se ve vertical, sin bandas negras. */
.article-full__video {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--s-3);
  background: #000;
  box-shadow: var(--sh-2);
  /* aspect-ratio default mientras carga (16/9) — JS lo reemplaza luego */
  aspect-ratio: 16 / 9;
  /* tope de altura para que un video vertical no domine la pantalla */
  max-height: 80vh;
}
.article-full__video-player {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}
/* Si el video es vertical, el contenedor lo limitamos en ancho para no
   ocupar todo el ancho del artículo. JS detecta el ratio < 1 y aplica
   esta clase. */
.article-full__video[data-orientation="portrait"] {
  max-width: 420px;
}

/* Mensaje cuando el video no se puede reproducir (codec no soportado) */
.article-full__video-error {
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: var(--r-md);
  padding: var(--s-6);
  text-align: center;
  color: var(--ink);
}
.article-full__video-error svg {
  color: var(--red);
  margin-bottom: var(--s-3);
}
.article-full__video-error h3 {
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 var(--s-3);
}
.article-full__video-error p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  margin: 0 0 var(--s-2);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.article-full__video-error-hint {
  font-size: 13px !important;
  color: var(--ink-2) !important;
  margin-top: var(--s-3) !important;
  padding-top: var(--s-3);
  border-top: 1px dashed var(--line-2);
}
@media (max-width: 767px) {
  .article-full__video { max-height: 70vh; }
  .article-full__video[data-orientation="portrait"] { max-width: 100%; }
}

/* ===== VIDEO COMO MINIATURA (cuando no hay imagen) ===== */
/* El video se carga con preload="metadata" y muted para que el navegador
   muestre el primer frame congelado. No tiene controles ni autoplay —
   funciona puramente como una imagen estática. El clic pasa al <a> padre. */
.card__video-thumb,
.hero__video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0a0a0a;
  pointer-events: none;
  display: block;
}

/* Botón play eliminado a pedido — la etiqueta "VIDEO" pulsante hace el trabajo. */
.card__play,
.hero__play { display: none !important; }

/* Etiqueta "VIDEO" en la esquina — fondo rojo, texto negro,
   con pulso permanente para llamar la atención. */
.card__video-flag,
.hero__video-flag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--red);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(200,16,46,.45);
  /* el pulso vive en ::before */
}
.hero__video-flag {
  top: 16px;
  right: 16px;
  padding: 7px 16px;
  font-size: 12px;
  letter-spacing: .18em;
}

/* Anillo pulsante alrededor de la etiqueta VIDEO */
.card__video-flag::before,
.hero__video-flag::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--red);
  opacity: 0;
  animation: video-flag-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes video-flag-pulse {
  0%   { opacity: .9; transform: scale(.92); }
  100% { opacity: 0;  transform: scale(1.45); }
}

.article-full__body {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-2);
}
.article-full__body p {
  margin-bottom: var(--s-5);
  opacity: 0;
  transform: translateY(10px);
  animation: fade-up .7s var(--ease) forwards;
}
/* Animación escalonada para cada párrafo */
.article-full__body p:nth-child(1) { animation-delay: 1.2s; }
.article-full__body p:nth-child(2) { animation-delay: 1.35s; }
.article-full__body p:nth-child(3) { animation-delay: 1.5s; }
.article-full__body p:nth-child(4) { animation-delay: 1.65s; }
.article-full__body p:nth-child(5) { animation-delay: 1.8s; }
.article-full__body p:nth-child(6) { animation-delay: 1.95s; }

/* Drop cap estilo periódico */
.article-full__body p:first-child::first-letter {
  font-family: var(--serif);
  float: left;
  font-size: 62px;
  line-height: .92;
  font-weight: 800;
  padding: 5px 10px 0 0;
  color: var(--red);
}

.article-full__share {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  margin-top: var(--s-6);
  border-top: 3px double var(--ink);
  opacity: 0;
  animation: fade-up .6s var(--ease) 2s forwards;
}
.article-full__share-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--mute);
  margin-right: auto;
  display: inline-flex;
  align-items: center;
}
.share-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-3);
  transition: all .2s var(--ease);
  text-decoration: none;
  cursor: pointer;
}
.share-btn:visited { color: var(--ink-3); }
.share-btn svg { width: 16px; height: 16px; pointer-events: none; }
.share-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); transform: translateY(-1px); }
.share-btn:active { transform: scale(.9); background: var(--ink); color: var(--white); border-color: var(--ink); }
.share-btn[data-share="facebook"]:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.share-btn[data-share="twitter"]:hover { background: #000; border-color: #000; color: #fff; }
.share-btn[data-share="whatsapp"]:hover { background: #25D366; border-color: #25D366; color: #fff; }
.share-btn[data-share="telegram"]:hover { background: #0088CC; border-color: #0088CC; color: #fff; }

.article-end {
  text-align: center;
  padding: var(--s-7) var(--s-4) var(--s-10);
  font-family: var(--serif);
  color: var(--mute);
}
.article-end span {
  display: block;
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 14px;
  margin-bottom: var(--s-2);
}
.article-end p {
  font-style: italic;
  font-size: 14px;
}

/* =========================================================
   PAGE MODAL — Páginas estáticas (Quiénes somos, Contacto, etc.)
   ========================================================= */
.page-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}
.page-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}
.page-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,.55);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.page-modal.is-visible .page-modal__backdrop { opacity: 1; }

.page-modal__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .4s var(--ease-3);
  box-shadow: 0 -20px 40px rgba(0,0,0,.2);
}
.page-modal.is-visible .page-modal__panel {
  transform: translateY(0);
}

.page-modal__topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: var(--s-3);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.page-modal__masthead {
  text-align: center;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .03em;
}
.page-modal__masthead em {
  font-style: italic;
  color: var(--mute);
  font-weight: 400;
}

.page-modal__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

/* Contenido del artículo de página */
.page-article {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-8) var(--s-5) var(--s-10);
}
.page-article__kicker {
  display: inline-block;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.page-article__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 3px double var(--ink);
}
.page-article__body {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.page-article__body .lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  padding-left: var(--s-4);
  border-left: 3px solid var(--red);
  margin-bottom: var(--s-6);
}
.page-article__body .meta {
  font-size: 12px;
  color: var(--mute);
  font-style: italic;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.page-article__body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: var(--s-7) 0 var(--s-3);
  color: var(--ink);
}
.page-article__body p {
  margin-bottom: var(--s-4);
}
.page-article__body a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.page-article__body .bullets {
  padding-left: 0;
  margin-bottom: var(--s-5);
}
.page-article__body .bullets li {
  position: relative;
  padding-left: var(--s-5);
  margin-bottom: var(--s-3);
  line-height: 1.55;
}
.page-article__body .bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--red);
}

/* Signature box (¿Quiénes somos?) */
.signature-box {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-top: var(--s-6);
}
.signature-box__img {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.signature-box strong {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.signature-box span {
  font-size: 12px;
  color: var(--mute);
}

/* Contact cards (Contacto) */
.contact-cards {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.contact-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  align-items: center;
  transition: all .2s var(--ease);
}
.contact-card:active:not(.contact-card--static) {
  transform: translateY(-2px);
  border-color: var(--red);
  box-shadow: 0 6px 20px rgba(200,16,46,.15);
}
.contact-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--paper-2);
  font-size: 20px;
  font-weight: 700;
  color: var(--red);
}
.contact-card strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  grid-column: 2;
  grid-row: 1;
}
.contact-card span {
  font-size: 12px;
  color: var(--mute);
  grid-column: 2;
  grid-row: 2;
}

/* Form en páginas */
.page-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.page-form input,
.page-form textarea {
  font-family: var(--sans);
  font-size: 15px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.page-form textarea {
  resize: vertical;
  min-height: 100px;
}
.page-form input:focus,
.page-form textarea:focus {
  border-color: var(--red);
}
.page-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s var(--ease);
  margin-top: var(--s-2);
}
.page-form button:active { background: var(--red); }
.page-form button svg { width: 16px; height: 16px; }

/* Planes / tarjetas (Publicidad) */
.plans {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.plan {
  padding: var(--s-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.plan::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
}
.plan__tag {
  display: inline-block;
  padding: 3px 8px;
  background: var(--red);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: var(--s-2);
}
.plan h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.plan p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
}

@media (min-width: 640px) {
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .page-article { padding: var(--s-9) var(--s-6) var(--s-10); }
}

/* ---------- TOAST ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(100px);
  padding: 12px 20px;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  z-index: 200;
  opacity: 0;
  transition: all .35s var(--ease-3);
  box-shadow: var(--sh-3);
  max-width: 90%;
  text-align: center;
}
.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease-3), transform .7s var(--ease-3);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- SCROLLBAR ---------- */
.article-modal__scroll::-webkit-scrollbar { width: 0; }

/* ---------- DESKTOP (>= 768px) ---------- */
@media (min-width: 768px) {
  body { font-size: 17px; }
  .ticker { padding: 0 var(--s-6); }
  .header { padding: 0 var(--s-6); }
  .logo__mark { font-size: 32px; }
  .logo__sub { font-size: 10px; }
  .header__editorial { font-size: 10.5px; gap: 8px; }
  .header__slogan { font-size: 12.5px; }
  .header__pin { width: 11px; height: 11px; }

  .dateline { padding: var(--s-3) var(--s-6); font-size: 13px; }

  .hero { padding: var(--s-7) var(--s-6) var(--s-8); }
  .hero__title { font-size: 42px; }
  .hero__summary { font-size: 16px; -webkit-line-clamp: 3; }

  .chips { padding: 6px var(--s-6); }
  .section-title { padding: var(--s-8) var(--s-6) var(--s-5); }
  .section-title h2 { font-size: 28px; }

  .feed {
    padding: 0 var(--s-6) var(--s-8);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
  }
  .card { grid-template-columns: 1fr; padding-bottom: var(--s-6); }
  .card__image { aspect-ratio: 16/10; }
  .card__title { font-size: 19px; }
  .card--wide { grid-column: 1 / -1; }
  .card--wide .card__title { font-size: 28px; }

  .trending { padding: 0 var(--s-6); }
  .trending__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--s-6); }

  .newsletter { padding: var(--s-10) var(--s-6); }
  .newsletter__title { font-size: 36px; }

  .about { padding: var(--s-10) var(--s-6); }
  .about__title { font-size: 32px; max-width: 560px; }

  .footer__cols { flex-direction: row; justify-content: space-around; text-align: left; }

  .article-full { padding: var(--s-7) var(--s-6) var(--s-10); }
  .article-full__title { font-size: 42px; }
  .article-full__summary { font-size: 20px; }
  .article-full__body { font-size: 18px; }

  .side-menu { max-width: 400px; }
}

@media (min-width: 1024px) {
  .feed { grid-template-columns: repeat(3, 1fr); }
  .card--wide { grid-column: 1 / -1; }
  .hero__title { font-size: 52px; }
}

/* ============================================================================
   DESKTOP REDESIGN — ≥1024px
   Solo afecta laptop/desktop. Mobile queda 100% intacto.
   Layout editorial profesional tipo periódico digital premium.
   ============================================================================ */
@media (min-width: 1024px) {

  /* ----- CONTAINER GLOBAL ----- */
  body {
    font-size: 17px;
  }

  /* HEADER más generoso ---------------------------------------------------- */
  .ticker {
    font-size: 13px;
    padding: 0 var(--s-7);
  }
  .ticker__pill {
    font-size: 11px;
    padding: 5px 14px;
  }

  .header {
    height: 84px;
    padding: 0 var(--s-8);
    align-items: center;
  }
  .header__actions { gap: 4px; }
  .icon-btn {
    width: 48px;
    height: 48px;
  }
  .icon-btn svg { width: 24px; height: 24px; }
  /* Logo más grande en desktop, manteniendo proporciones */
  .logo__img {
    height: 50px;
  }
  /* Editorial line en desktop grande */
  .header__editorial { font-size: 11px; gap: 10px; }
  .header__slogan { font-size: 14px; }
  .header__pin { width: 12px; height: 12px; }
  .logo__mark {
    font-size: 38px;
    letter-spacing: .08em;
  }
  .logo__mark::before, .logo__mark::after {
    width: 28px;
  }
  .logo__sub {
    font-size: 11px;
    letter-spacing: .5em;
  }

  /* DATELINE más amplio ---------------------------------------------------- */
  .dateline {
    padding: var(--s-3) var(--s-8);
    font-size: 13px;
  }
  .lang-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  .weather svg { width: 18px; height: 18px; }

  /* HERO CARRUSEL — 2 COLUMNAS EDITORIAL ----------------------------------- */
  .hero {
    padding: var(--s-7) var(--s-8) var(--s-8);
    max-width: 1440px;
    margin: 0 auto;
  }
  .hero__carousel {
    border-radius: var(--r-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    overflow: hidden;
  }
  .hero__slide {
    position: relative;
  }
  .hero__image {
    aspect-ratio: 21 / 10;
    min-height: 560px;
    border-radius: 0;
  }
  .hero__image::after {
    background: linear-gradient(
      90deg,
      rgba(0,0,0,.7) 0%,
      rgba(0,0,0,.45) 35%,
      rgba(0,0,0,.1) 65%,
      rgba(0,0,0,0) 100%
    );
  }
  .hero__meta {
    top: var(--s-7);
    left: var(--s-8);
    z-index: 4;
  }
  .hero__cat, .hero__badge {
    font-size: 11px;
    padding: 7px 14px;
    letter-spacing: .14em;
  }
  .hero__text {
    padding: var(--s-7) var(--s-8) var(--s-7);
    max-width: 780px;
    z-index: 5;
    bottom: 0;
  }
  .hero__title {
    /* Cap conservador + contenedor más ancho: títulos largos
       en español caben completos en 3-4 líneas sin desbordar el hero. */
    font-size: clamp(26px, 2.05vw, 34px);
    line-height: 1.16;
    letter-spacing: -.015em;
    margin-bottom: var(--s-4);
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  .hero__summary {
    font-size: 18px;
    line-height: 1.55;
    -webkit-line-clamp: 3;
    margin-bottom: var(--s-5);
    max-width: 600px;
  }
  .hero__footer {
    font-size: 14px;
    gap: var(--s-4);
  }
  .hero__read {
    padding: 11px 22px;
    font-size: 14px;
  }
  .hero__read svg { width: 16px; height: 16px; }
  .hero__counter {
    top: 24px;
    right: 24px;
    padding: 7px 14px;
    font-size: 13px;
  }
  .hero__dots {
    bottom: 22px;
  }
  .hero__dot { height: 6px; width: 28px; }
  .hero__dot--active { width: 56px; }
  .hero__arrow {
    width: 52px;
    height: 52px;
  }
  .hero__arrow svg { width: 22px; height: 22px; }
  .hero__arrow--prev { left: 22px; }
  .hero__arrow--next { right: 22px; }

  /* CHIPS CATEGORÍAS más prominentes --------------------------------------- */
  .chips {
    padding: 8px var(--s-8);
    justify-content: center;
    gap: var(--s-3);
  }
  .chip {
    padding: 11px 22px;
    font-size: 14px;
  }
  .chip__dot {
    width: 8px;
    height: 8px;
    margin-right: 9px;
  }

  /* SECTION TITLES con kicker ---------------------------------------------- */
  .section-title {
    padding: var(--s-9) var(--s-8) var(--s-5);
    max-width: 1440px;
    margin: 0 auto;
    align-items: baseline;
    gap: var(--s-4);
  }
  .section-title h2 {
    font-size: 36px;
    letter-spacing: -.015em;
    max-width: none;
  }
  .section-title__count {
    font-size: 12px;
    padding: 6px 14px;
  }

  /* FEED — Grid editorial 1+3 columnas con destacada wide ------------------ */
  .feed {
    padding: 0 var(--s-8) var(--s-9);
    max-width: 1440px;
    margin: 0 auto;
    gap: var(--s-6) var(--s-5);
    grid-template-columns: repeat(4, 1fr);
    /* Las cards toman alturas controladas por el grid. Cards en la
       misma fila comparten altura para que el layout quede ordenado
       sin huecos al lado del card "wide". */
    grid-auto-rows: 1fr;
  }
  .card {
    grid-template-columns: 1fr;
    /* Evita que las filas internas se estiren cuando el card es más alto
       que su contenido (caso típico: cards al lado del .card--wide).
       El contenido queda compacto arriba y el espacio sobrante queda
       al fondo del card como padding visual. */
    align-content: start;
    padding-bottom: 0;
    border-bottom: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.08);
    border-color: var(--line-2);
  }
  .card:active {
    transform: translateY(-2px);
    border-color: var(--line-2);
  }
  .card__image {
    aspect-ratio: 4/3;
    border-radius: 0;
  }
  .card__body {
    padding: var(--s-4) var(--s-4) var(--s-5);
  }
  .card__cat {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .card__title {
    font-size: 19px;
    line-height: 1.25;
    -webkit-line-clamp: 3;
  }
  .card__footer {
    margin-top: var(--s-3);
    font-size: 12px;
  }

  /* Primera card "wide" — ocupa 2 columnas y 2 filas en desktop.
     Junto a ella caben 4 cards pequeñas en formato 2×2 a la derecha,
     llenando todo el bloque superior sin huecos visuales.
     La imagen se estira para llenar el espacio disponible (object-fit
     cover sobre el fondo) y el body queda anclado abajo. */
  .card--wide {
    grid-column: span 2;
    grid-row: span 2;
    grid-template-rows: 1fr auto;
    align-content: stretch;
  }
  .card--wide .card__image {
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
  }
  .card--wide .card__title {
    font-size: 30px;
    line-height: 1.16;
    -webkit-line-clamp: 3;
  }
  .card--wide .card__body {
    padding: var(--s-6) var(--s-6) var(--s-6);
  }

  /* TRENDING — números gigantes editoriales -------------------------------- */
  .trending {
    padding: var(--s-7) var(--s-8) var(--s-9);
    max-width: 1440px;
    margin: 0 auto;
    border-top: 3px double var(--ink);
    background: linear-gradient(180deg, var(--paper-2), var(--paper));
  }
  .trending .section-title {
    padding-top: var(--s-3);
    padding-left: 0;
    padding-right: 0;
  }
  .trending__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--s-7);
  }
  .trending-item {
    grid-template-columns: 80px 1fr auto;
    padding: var(--s-5) 0;
    transition: transform .2s var(--ease);
  }
  .trending-item:hover {
    transform: translateX(4px);
  }
  .trending-item:hover .trending__num {
    color: var(--red-dark);
  }
  .trending__num {
    font-size: 64px;
  }
  .trending__title {
    font-size: 19px;
    line-height: 1.25;
  }
  .trending__meta {
    font-size: 12px;
    margin-top: 6px;
  }
  .trending__views {
    font-size: 13px;
  }
  .trending__views svg { width: 16px; height: 16px; }

  /* NEWSLETTER — 2 columnas elegantes -------------------------------------- */
  .newsletter {
    padding: var(--s-10) 0;
    margin-top: 0;
  }
  .newsletter__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-9);
    max-width: 1100px;
    padding: 0 var(--s-8);
    text-align: left;
  }
  .newsletter__icon {
    margin: 0 0 var(--s-4);
    width: 52px;
    height: 52px;
  }
  .newsletter__icon svg { width: 24px; height: 24px; }
  .newsletter__title {
    font-size: 44px;
    line-height: 1.1;
    text-align: left;
  }
  .newsletter__text {
    font-size: 16px;
    text-align: left;
    margin-bottom: 0;
  }
  .newsletter__form {
    margin-top: var(--s-5);
  }
  .newsletter__note {
    text-align: left;
  }
  .newsletter::after {
    font-size: 160px;
    bottom: -50px;
  }

  /* ABOUT — 2 columnas con firma prominente -------------------------------- */
  .about {
    padding: var(--s-10) var(--s-8);
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
    align-items: center;
  }
  .about__badge {
    margin-bottom: var(--s-5);
  }
  .about__title {
    font-size: 42px;
    line-height: 1.1;
    margin: 0 0 var(--s-5);
    max-width: none;
  }
  .about__text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-3);
    max-width: none;
    margin: 0;
  }
  .about > .about__badge,
  .about > .about__title {
    grid-column: 1;
  }
  .about__text {
    grid-column: 2;
    grid-row: span 3;
  }
  .about__signature {
    grid-column: 1;
    margin-top: var(--s-3);
    align-self: start;
    padding: var(--s-4) var(--s-5);
  }
  .about__sig-img {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }
  .about__sig-text strong {
    font-size: 16px;
  }

  /* PAPER (animación al abrir noticia) — usar cartel original más cuadrado
     en desktop para que se vea COMPLETO al cerrarse las hojas. */
  .paper {
    background-color: var(--cream);
    /* Textura sutil de papel para los bordes que no cubre el cartel */
    background-image:
      radial-gradient(circle at 20% 30%, rgba(184,146,90,.06), transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(11,46,92,.04), transparent 45%);
  }
  .paper::before {
    background-image: url('assets/cartel-desktop.jpg');
    /* contain garantiza que el cartel se vea ENTERO en cualquier resolución,
       centrado, sin recortar nada. El espacio sobrante toma el cream del paper. */
    background-size: contain;
    background-position: center center;
    opacity: .58;
  }

  /* Invertir visibility helpers: en desktop, mostrar desktop-only y ocultar
     mobile-only. Esto preserva el estado mobile original (cinema__top arriba,
     cinema__bot abajo, sección newsletter standalone) y solo en desktop
     muestra los bloques editoriales nuevos al lado de la animación. */
  .cinema__mobile-only { display: none !important; }
  .cinema__desktop-only { display: block !important; }
  /* Excepción: .cinema__stats y .cinema__news necesitan flex/grid display
     en desktop, no block. Override específico. */
  .cinema__stats.cinema__desktop-only { display: grid !important; }
  .cinema__news.cinema__desktop-only,
  .cinema__about-block.cinema__desktop-only,
  .cinema__quote-block.cinema__desktop-only { display: flex !important; }

  /* CINEMA — Lavastu-style scroll-driven para desktop ----------------------
     La máquina queda pinned (sticky) en la columna izquierda mientras el
     usuario scrollea. El texto va pasando por la columna derecha como flujo
     normal. Los frames del video avanzan con el progreso de la sección. */
  .cinema {
    /* Sin height fija — la altura la determina el contenido del overlay */
    height: auto;
    background: #0A0A0A;
    padding: 0;
  }
  .cinema__sticky {
    /* En desktop es un grid container que toma altura natural según el
       contenido del overlay (mucho contenido = mucho scroll = animación
       pausada y fluida). align-items: start es CRÍTICO para que el stage
       sticky funcione dentro de su celda. */
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 5vw;
    padding: 0 6vw;
    background: #0A0A0A;
  }

  /* Columna izquierda — máquina sticky pinned en el viewport
     top: 90px deja espacio para los stickies superiores (ticker + header)
     para que la parte superior de la máquina (lámpara, mapa) no quede tapada */
  .cinema__stage {
    position: sticky;
    inset: auto;
    top: 90px;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: calc(100vh - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    z-index: 1;
  }
  .cinema__frame {
    position: relative;
    inset: auto;
    width: 100%;
    /* Frame más grande para que llene más el viewport vertical y deje
       muy poco fondo negro arriba/abajo. Sigue siendo controlado pero
       se siente bien centrado en pantalla. */
    max-width: 440px;
    /* aspect-ratio real del video typewriter (768 x 1180) para que se vea
       COMPLETO sin recortar el mapa que hay detrás de la máquina */
    aspect-ratio: 768 / 1180;
    /* max-height ajustado para que la caja quepa con muy poco margen entre
       el top sticky (90px) y el bottom del viewport, eliminando casi todo
       el fondo negro inferior */
    max-height: calc(100vh - 110px);
    border-radius: 18px;
    overflow: hidden;
    background: #0A0A0A;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
      0 40px 120px rgba(0,0,0,.7),
      0 0 0 1px rgba(255,255,255,.04) inset;
  }
  .cinema__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain garantiza que el video se vea ENTERO sin recortar el mapa
       que hay detrás de la máquina. El frame y el video tienen aspect
       ratios casi idénticos (0.6509 vs 0.6508), así que las bandas
       resultantes son de 1-2px y se confunden con el fondo negro. */
    object-fit: contain;
    object-position: center;
  }

  /* Columna derecha — contenido editorial que scrollea normal. La máquina
     de la columna izquierda queda sticky pinned mientras el usuario lee
     todos los bloques (newsletter → about → datos → cita). */
  .cinema__overlay {
    position: relative;
    top: auto;
    inset: auto;
    background: transparent;
    height: auto;
    padding: 14vh 0 18vh 0;
    min-height: 0;
    color: var(--white);
    max-width: 560px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 22vh;
    /* CRÍTICO: el CSS mobile pone pointer-events:none al overlay (porque
       en mobile va encima del video y no debe interceptar clicks). En
       desktop SÍ tiene contenido interactivo (form, links), así que hay
       que restaurar pointer-events. */
    pointer-events: auto;
  }
  .cinema__overlay * {
    pointer-events: auto;
  }

  /* Contenedor del newsletter dentro del cinema. Scrollea normal con el
     resto del contenido del overlay. */
  .cinema__news {
    position: relative;
    max-width: 480px;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  /* Bloque "Sobre CBN" — texto editorial */
  .cinema__about-block {
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .cinema__small-kicker {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--red);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(200,16,46,.4);
  }
  .cinema__about-title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--white);
    margin: 0;
  }
  .cinema__about-text {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.78);
    margin: 0;
    max-width: 460px;
  }

  /* Bloque de datos / stats — grid 2x2 con números grandes */
  .cinema__stats {
    max-width: 480px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    padding: 4px 0;
  }
  .cinema__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-left: 14px;
    border-left: 2px solid var(--red);
  }
  .cinema__stat-num {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 36px;
    line-height: 1;
    color: var(--white);
    letter-spacing: -.02em;
  }
  .cinema__stat-label {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(255,255,255,.6);
    line-height: 1.35;
  }

  /* Bloque cita + firma del director */
  .cinema__quote-block {
    max-width: 480px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .cinema__quote-block .cinema__quote {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1.45;
    color: rgba(255,255,255,.92);
    margin: 0;
    max-width: 460px;
  }
  .cinema__quote-block .cinema__signature {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--red);
    font-weight: 700;
    letter-spacing: .04em;
  }
  .cinema__news .newsletter__icon {
    margin: 0 0 4px 0;
  }
  .cinema__news .newsletter__title {
    font-size: clamp(36px, 3.4vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0;
    text-align: left;
    /* Restaurar saltos de línea naturales — sin \n forzado del mobile */
    white-space: normal;
  }
  .cinema__news .newsletter__text {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255,255,255,.78);
    margin: 0;
    max-width: 460px;
    text-align: left;
  }
  .cinema__news .newsletter__form {
    width: 100%;
    max-width: 440px;
    margin: 4px 0 0 0;
  }
  .cinema__news .newsletter__form input {
    font-size: 15px;
    padding: 12px 18px;
  }
  .cinema__news .newsletter__form button {
    font-size: 14px;
    padding: 12px 22px;
  }
  .cinema__news .newsletter__note {
    font-size: 11.5px;
    color: rgba(255,255,255,.45);
    margin: 0;
    text-align: left;
  }

  /* Cita y firma debajo del form, separadas con un divisor sutil */
  .cinema__news .cinema__quote {
    margin: 24px 0 8px 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-family: var(--serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.45;
    color: rgba(255,255,255,.88);
    max-width: 460px;
    text-align: left;
  }
  .cinema__news .cinema__signature {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--red);
    font-weight: 700;
    letter-spacing: .04em;
  }

  .cinema__kicker {
    display: inline-block;
    font-size: 11px;
    padding: 8px 16px;
    letter-spacing: .3em;
  }
  .cinema__signature {
    font-size: 13px;
    padding-top: 10px;
    color: var(--red);
    display: inline-block;
  }

  /* En desktop el overlay no tiene gradiente oscuro encima del video
     porque el video está contenido en su propia caja, no full-bleed. */
  .cinema__overlay::before { display: none; }

  .cinema__progress {
    top: 5px;
    left: 0;
    height: 3px;
  }

  /* En desktop el hint "sigue bajando" no es necesario porque
     el texto que va apareciendo ya guía al usuario */
  .cinema__hint {
    display: none;
  }

  /* SIDE MENU más ancho */
  .side-menu {
    max-width: 460px;
    box-shadow: 30px 0 80px rgba(0,0,0,.25);
  }
  .side-menu__name {
    font-size: 26px;
  }
  .side-menu__num {
    font-size: 13px;
  }

  /* FOOTER — 4 columnas con logo prominente -------------------------------- */
  .footer {
    padding: var(--s-9) var(--s-8) var(--s-6);
  }
  .footer__brand {
    text-align: center;
    padding-bottom: var(--s-7);
    margin-bottom: var(--s-7);
  }
  .footer__logo {
    font-size: 56px;
  }
  .footer__tag {
    font-size: 13px;
    letter-spacing: .35em;
  }
  .footer__cols {
    flex-direction: row;
    justify-content: space-between;
    max-width: 900px;
    margin: 0 auto var(--s-6);
    gap: var(--s-8);
    padding-bottom: var(--s-6);
  }
  .footer__col {
    flex: 1;
  }
  .footer__col h4 {
    font-size: 15px;
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
  }
  .footer__col a {
    font-size: 14px;
    transition: color .2s, transform .2s;
  }
  .footer__col a:hover {
    color: var(--white);
    transform: translateX(3px);
  }
  .footer__social {
    margin-bottom: var(--s-6);
    gap: var(--s-3);
  }
  .footer__social a {
    width: 44px;
    height: 44px;
    transition: all .25s;
  }
  .footer__social a:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--white);
    transform: translateY(-3px);
  }
  .footer__legal {
    font-size: 12px;
  }

  /* HOVER STATES ricos en desktop ------------------------------------------ */
  .news-item:hover { transform: translateY(-3px); }
  .filter-chip:hover { background: var(--paper-2); }
  .icon-btn:hover { background: var(--paper-2); }

  /* ARTICLE MODAL más generoso en desktop ---------------------------------- */
  .article-full {
    padding: var(--s-9) var(--s-8) var(--s-10);
    max-width: 760px;
  }
  .article-full__title {
    font-size: clamp(38px, 3.5vw, 52px);
    line-height: 1.1;
  }
  .article-full__summary {
    font-size: 22px;
    padding-left: var(--s-5);
  }
  .article-full__body {
    font-size: 19px;
    line-height: 1.75;
  }
  .article-full__body p:first-child::first-letter {
    font-size: 78px;
    padding: 8px 14px 0 0;
  }
  .article-full__share {
    padding: var(--s-6) 0;
  }
  .share-btn {
    width: 44px;
    height: 44px;
    transition: all .2s;
  }
  .share-btn:hover {
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
    transform: translateY(-2px);
  }
}

/* ============================================================================
   LARGE DESKTOP — ≥1440px refinements
   ============================================================================ */
@media (min-width: 1440px) {
  body { font-size: 18px; }
  .hero { padding: var(--s-8) var(--s-9) var(--s-9); }
  .hero__image { min-height: 620px; aspect-ratio: 21 / 9; }
  .hero__text { max-width: 820px; padding: var(--s-8) var(--s-9) var(--s-8); }
  .hero__title { font-size: clamp(28px, 2.2vw, 38px); }
  .hero__summary { font-size: 18px; }
  .feed { gap: var(--s-7) var(--s-6); }
  .section-title h2 { font-size: 42px; }
  .trending__num { font-size: 76px; }
  .newsletter__title { font-size: 52px; }
  .about__title { font-size: 50px; }
  .footer__logo { font-size: 64px; }
  .footer__logo-img { height: 90px; }
}

/* ===== DIALOG ANIMACIONES ===== */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { 0% { transform: scale(.85); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }