/* ============================================================
   TEMPLATES BASE — Interacciones (estados + micro-UX)
   Capa aditiva que aplica los estados del sistema Figma
   (Default / Hover / Pressed / Selected / Active) y da soporte
   a los componentes interactivos (carrousel, paginación, pager,
   galería, players, encuesta, alertas, menú mobile).
   Se carga al final; no altera el layout base.
   ============================================================ */

/* ---------- Transiciones base ---------- */
a, button, .btn, .btn-header, .pag-btn, .chip,
.card-1col, .card-half, .card-2col, .sec-card, .tag-card, .apertura,
.one-col, .two-col, .half-col, .aper50, .op-card, .rank-card, .gallery-card,
.obit, .nota-row, .mas-leidas .item, .segui .row, .lb-card, .fg-item,
.social-row img, .autor-card .social img, .badge-video, .video-label,
.faq-item, .necro-pager .nav, .encuesta .options button {
  transition: color .15s ease, background-color .15s ease, border-color .15s ease,
              box-shadow .18s ease, transform .18s ease, opacity .15s ease;
}

/* ---------- Enlaces ---------- */
.menu-nav a:hover, .temas-bar .links a:hover,
.footer-sections a:hover, .footer-social .links a:hover,
.menu-bar .menu-nav a:hover { color: var(--blue); }
.bajada a:hover, .breadcrumbs-row a:hover, .segui .row:hover { color: var(--blue); text-decoration-line: underline; text-decoration-color: var(--ac-sub-color, currentColor); }
.menu-nav .special:hover { text-decoration-line: underline; text-decoration-color: var(--ac-sub-color, currentColor); }

/* Foco accesible */
a:focus-visible, button:focus-visible, input:focus-visible,
.encuesta .options button:focus-visible, .pag-btn:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ---------- Botones ---------- */
.btn-header:hover, .btn:hover { background: var(--blue); color: var(--white); }
.btn-header:hover img, .btn:hover img { filter: brightness(0) invert(1); }
.btn-header--solid:hover, .btn--solid:hover { filter: brightness(1.08); }
.btn-header:active, .btn:active, .btn-enviar:active, .btn-home:active, .pag-btn:active { transform: translateY(1px); }
.btn-enviar:hover, .btn-home:hover, .btn-nl:hover { filter: brightness(1.08); }
.header-actions .btn-header.is-playing { background: var(--blue); color: var(--white); }
.header-actions .btn-header.is-playing img { filter: brightness(0) invert(1); }

/* Iconos sociales / share */
.social-row img:hover, .autor-card .social img:hover,
.temas-bar .social-row img:hover, .lb-card .share:hover { transform: translateY(-2px); opacity: .8; cursor: pointer; }
.lb-card .share { cursor: pointer; }

/* ---------- Componentes linkeables: hover (cursor + título azul; sin sombra ni lift) ---------- */
/* Cursor de link en todo contenedor de ítem clickeable */
.card-1col:hover, .card-half:hover, .card-2col:hover, .sec-card:hover,
.tag-card:hover, .apertura:hover, .one-col:hover, .two-col:hover,
.half-col:hover, .aper50:hover, .op-card:hover, .rank-card:hover,
.lb-card:hover, .fg-item:hover, .gallery-card:hover,
.tl-item:hover, .three-col:hover, .nota-op:hover, .aper-horizontal:hover,
.foto-destacada:hover, .autor-card:hover, .vivo:hover {
  cursor: pointer;
}

/* Transición suave de color en títulos linkeables */
.card-1col .title, .card-half .title, .sec-card .head, .tag-card .title,
.one-col .title, .half-col .title, .apertura .txt p, .rank-card .h,
.card-2col h2, .two-col h2, .aper50 .title, .op-card .title .h,
.lb-card .body .title, .fg-item .pie .cap, .tl-item .tl-title,
.three-col h2, .nota-op .headline, .aper-horizontal .txt h2,
.foto-destacada .cap h2, .autor-card .name,
.obit h3, .nota-row .txt, .mas-leidas .headline .ttl { transition: color .15s ease; }

/* Título a azul al hover del contenedor */
.card-1col:hover .title, .card-half:hover .title, .sec-card:hover .head,
.tag-card:hover .title, .one-col:hover .title, .half-col:hover .title,
.apertura:hover .txt p, .rank-card:hover .h,
.card-2col:hover h2, .two-col:hover h2, .aper50:hover .title, .op-card:hover .title .h,
.lb-card:hover .body .title, .fg-item:hover .pie .cap, .tl-item:hover .tl-title,
.three-col:hover h2, .nota-op:hover .headline, .aper-horizontal:hover .txt h2,
.foto-destacada:hover .cap h2, .autor-card:hover .name { color: var(--blue); }
.obit:hover h3, .nota-row:hover .txt, .mas-leidas .item:hover .headline .ttl { color: var(--blue); cursor: pointer; }

/* Títulos sobre fondo oscuro/color: subrayado en vez de recolor */
.vivo:hover h3 { text-decoration-line: underline; text-decoration-color: var(--ac-sub-color, currentColor); }

/* Sin zoom en imágenes de tarjeta (overflow hidden se conserva por el layout) */
.card-1col, .card-half, .sec-card, .tag-card, .apertura, .one-col, .two-col, .half-col, .aper50, .op-card { overflow: hidden; }

/* ---------- Paginación / pager ---------- */
.pag-btn:hover, .necro-pager .nav:hover { background: var(--blue); color: var(--white); }
.pag-btn:hover img, .necro-pager .nav:hover img { filter: brightness(0) invert(1); }

/* ---------- Chips (índice) ---------- */
a.chip:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- FAQ (acordeón en mobile) ---------- */
.faq-item .q { cursor: pointer; }
.faq-item .q:hover { text-decoration-line: underline; text-decoration-color: var(--ac-sub-color, currentColor); }

/* ---------- Encuesta (voto) ---------- */
.encuesta .options button { position: relative; overflow: hidden; cursor: pointer; }
.encuesta .options button:hover { outline: 2px solid var(--blue); outline-offset: -2px; }
.encuesta .options button .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(54,73,241,.18); transition: width .5s ease; z-index: 0; }
.encuesta .options button .lbl, .encuesta .options button .pct { position: relative; z-index: 1; }
.encuesta .options button .pct { float: right; font-weight: 700; color: var(--blue); }
.encuesta.voted .options button { cursor: default; }
.encuesta.voted .options button.sel { outline: 2px solid var(--blue); outline-offset: -2px; font-weight: 700; }

/* ---------- Players (video/audio/podcast) ---------- */
.vid-player .stage .play, .figure .play-big, .lb-media .play-big,
.foto-destacada .img, .podcast .img { cursor: pointer; }
.vid-player .stage .play img { transition: transform .2s ease; }
.vid-player .stage:hover .play img { transform: scale(1.08); }
.stage.is-playing .play, .figure.is-playing .play-big { display: none; }
.stage.is-playing::after, .figure.is-playing::after {
  content: "▶ Reproduciendo…"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  color: #fff; font-weight: 700; font-size: 16px; background: rgba(0,0,0,.55); padding: 8px 14px; border-radius: 4px;
}

/* ---------- Alertas (cerrar) ---------- */
.alertas .alerta .x, .alertas .vivo .x, .alertas .vivo .expand { cursor: pointer; }
.alertas .alerta .x:hover img, .alertas .vivo .x:hover, .alertas .vivo .expand:hover { opacity: .6; }
.is-dismissed { display: none !important; }

/* ---------- Alerta EN VIVO: play inline ---------- */
.alertas .vivo .thumb .play { transition: transform .2s ease, opacity .2s ease; }
.alertas .vivo .thumb:hover .play { transform: scale(1.06); }
.alertas .vivo.is-playing .thumb .play { display: none; }
.alertas .vivo.is-playing .thumb::after {
  content: "▶ En vivo"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; background: rgba(0,0,0,.55);
}

/* ---------- Objeto expandido: modal EN VIVO ---------- */
.live-modal {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(0,0,0,.8);
  opacity: 0; transition: opacity .2s ease;
}
.live-modal.show { opacity: 1; }
.live-modal__dialog {
  width: min(920px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--dark-gray); color: var(--white); border-radius: 8px; padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(12px); transition: transform .2s ease;
}
.live-modal.show .live-modal__dialog { transform: none; }
.live-modal__top { display: flex; align-items: center; justify-content: space-between; }
.live-modal__badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; color: var(--white); }
.live-modal__badge .rd { width: 8px; height: 8px; border-radius: 50%; background: var(--live-red); display: inline-block; }
.live-modal__close {
  background: none; border: 0; color: var(--white); font-size: 28px; line-height: 1; cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px;
}
.live-modal__close:hover { opacity: .7; }
.live-modal__video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden;
  background-color: #000; background-size: cover; background-position: center;
}
.live-modal__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center;
}
.live-modal__play::before {
  content: ""; margin-left: 4px; border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
}
.live-modal__play:hover { background: rgba(0,0,0,.7); transform: translate(-50%, -50%) scale(1.06); }
.live-modal__video.is-playing .live-modal__play { display: none; }
.live-modal__video.is-playing::after {
  content: "▶ Reproduciendo en vivo…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px; background: rgba(0,0,0,.55);
}
.live-modal__title { margin: 0; font-weight: 700; font-size: 26px; line-height: 1.3; color: var(--white); }
.live-modal__src { margin: 0; color: var(--celeste); font-size: 16px; }
@media (max-width: 640px) {
  .live-modal { padding: 12px; }
  .live-modal__dialog { padding: 16px; gap: 12px; }
  .live-modal__title { font-size: 20px; }
  .live-modal__play { width: 56px; height: 56px; }
  .live-modal__play::before { border-width: 10px 0 10px 17px; }
}

/* ---------- Menú hamburguesa → panel de navegación (Figma) ---------- */
.m-header .hamb, .menu-icons img[alt="Menú"], .menu-bar .menu-icon.hamburger { cursor: pointer; }
.nav-menu { position: fixed; inset: 0; z-index: 100; display: none; }
.nav-menu.open { display: block; }
.nav-menu .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.nav-menu .panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: 280px; max-width: 88%;
  background: #232323; color: #fff; box-shadow: 2px 0 20px rgba(0,0,0,.35);
  padding: 24px 15px; display: flex; flex-direction: column; align-items: center; gap: 24px;
  transform: translateX(-100%); transition: transform .25s ease; overflow-y: auto;
}
.nav-menu.open .panel { transform: translateX(0); }

/* Buscador */
.nav-menu .search { width: 250px; height: 48px; border: 1px solid var(--divider-gray); display: flex; align-items: center; gap: 10px; padding: 10px; }
.nav-menu .search img { width: 16px; height: 16px; }
.nav-menu .search input { flex: 1 0 0; min-width: 0; background: transparent; border: 0; color: #fff; font: inherit; font-size: 14px; }
.nav-menu .search input::placeholder { color: #fff; opacity: .85; }
.nav-menu .search input:focus { outline: none; }

/* Secciones */
.nav-menu .items { width: 250px; display: flex; flex-direction: column; }
.nav-menu .nav-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--divider-gray);
  background: none; color: #fff; font-family: var(--font-roboto); font-size: 14px; text-align: left; cursor: pointer;
}
.nav-menu .nav-item:hover { color: var(--celeste); }
.nav-menu .nav-item .chev { width: 24px; height: 24px; transition: transform .2s ease; }
.nav-menu .nav-item.has-sub.open .chev { transform: rotate(90deg); }
.nav-menu .nav-sub { display: none; flex-direction: column; }
.nav-menu .nav-sub.open { display: flex; }
.nav-menu .nav-sub a { padding: 16px; border-bottom: 1px solid var(--divider-gray); color: #fff; font-family: var(--font-roboto); font-size: 16px; background: rgba(255,255,255,.04); }
.nav-menu .nav-sub a:hover { color: var(--celeste); }

/* Suscribirse */
.nav-menu .subscribe { width: 250px; height: 43px; background: var(--blue); border: 1px solid var(--blue); border-radius: var(--radius-m); color: #fff; font-size: 14px; cursor: pointer; }
.nav-menu .subscribe:hover { filter: brightness(1.08); }

/* Síguenos */
.nav-menu .follow { width: 250px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.nav-menu .follow span { font-size: 14px; }
.nav-menu .follow .social { display: flex; gap: 16px; align-items: center; }
.nav-menu .follow .social img { width: 18px; height: 18px; }
.nav-menu .follow .social img:hover { opacity: .7; cursor: pointer; }

body.no-scroll { overflow: hidden; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--black-100, #1c1c1c); color: #fff; padding: 12px 20px; border-radius: 6px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Formulario (éxito) ---------- */
.nl-form .field-error { border-color: var(--live-red) !important; }
.nl-msg { display: none; background: var(--celeste); border-left: 3px solid var(--blue); padding: 12px 16px; font-size: 15px; }
.nl-msg.show { display: block; }

/* ============================================================
   TIPOGRAFÍA MOBILE (Figma "Templates Base -Copy-" · sección Páginas)
   En mobile el sistema cambia la familia de titulares y cuerpo a
   ROBOTO (en desktop es Public Sans). Los tamaños ya coinciden;
   acá se corrige la familia + el destacado (26→22).
   Cubre ambos sistemas de clases (templates-base y bundle Home).
   ============================================================ */
@media (max-width: 760px) {
  .heading h1, .volanta, .esp-hero h1, .esp-hero .bajada, .lb-hero h1, .lb-hero .live-title,
  .vid-top .heading .volanta, .vid-top .heading h1, .tag-desc h1, .tag-desc .intro,
  .cabezal h2, .cabezal .bar h2,
  .bajada, .bajada-list, .vid-meta .bajada,
  .article p.body-text, .article .text-block p, .text-block h2, .text-block h3, .text-block h4,
  .body-text, .esp-body .body-text,
  .destacado p, .encuesta .q, .encuesta .options button,
  .card-1col .title, .card-half .title, .card-2col h2, .card-2col .bajada,
  .sec-card .cat, .sec-card .head, .sec-card .firma, .sec-feature h2,
  .tag-card .title, .tag-card .firma, .faq-item .q, .faq-item .a,
  .apertura .txt p,
  .segui .title, .segui .row, .comparti .label, .temas-nota .tags,
  .lee-ademas h3, .nota-row .txt, .mas-leidas .headline, .mas-leidas .num,
  .obit h3, .obit p, .staff-group > h2, .autor-card .name, .autor-card .role, .autor-card .desc,
  .libre-body p, .libre-body h2, .nl-form h2, .nl-form label, .nl-form .check,
  .e404-hero .body h1,
  .lb-text h2, .lb-text h4, .lb-text p, .lb-card .title, .lb-card .body .text, .lb-index .lb-item .txt a,
  .lb-item .hora .time, .fg-item .cap, .fg-item .by, .fg-item .share .lbl,
  .vid-body, .vid-autor .name-col, .vid-hero-over h1,
  /* Nueva grilla / Receta */
  .receta-head, .ficha-head, .ficha-item .tx b, .ficha-item .tx span, .ingredientes li span, .pasos .paso-tx p, .pasos .paso-tx .num,
  /* bundle Home / Aperturas */
  .one-col .title, .two-col .txt h2, .two-col .bajada, .three-col .txt h2, .half-col .title,
  .aper50 .title, .aper50 .bajada, .aper-bomba h2, .aper-bomba .bajada, .aper-bomba .firma,
  .timeline h3, .tl-title, .rank-card .h, .op-card .h, .op-card .by, .nota-op .headline,
  .gallery-card .t, .aper-horizontal .txt h2, .aper-horizontal .txt .bajada,
  .bomba .bomba-text > h2, .bomba .bomba-text .bajada, .two-col-h .txt h2,
  .firma {
    font-family: "Roboto", system-ui, -apple-system, sans-serif !important;
  }
  .destacado p { font-size: 22px !important; }
}


/* ============================================================
   Header sticky compacto (solo desktop)
   ============================================================ */
.sticky-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--white); border-bottom: 1px solid var(--light-gray);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-100%); transition: transform .25s ease;
}
.sticky-header.is-visible { transform: none; }
.sticky-header .sh-inner {
  max-width: 1440px; margin: 0 auto; height: 64px; padding: 0 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.sticky-header .sh-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sticky-header .sh-left .menu-icon.search { display: none; }
.sticky-header .sh-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.sticky-header .sh-right .social-row { display: flex; align-items: center; gap: 16px; }
.sticky-header .sh-date { font-size: 14px; color: var(--black); white-space: nowrap; }
.sticky-header .menu-icon { width: 24px; height: 24px; cursor: pointer; }
.sticky-header .sh-logo { display: flex; align-items: center; justify-content: center; }
.sticky-header .sh-logo svg { height: 25px; width: auto; display: block; }
.sticky-header .sh-logo img { height: 24px; width: auto; display: block; }
/* el sticky compacto se mantiene en tablet y mobile */
@media (max-width: 768.98px) {
  /* mobile: idéntico al header fijo (hamburguesa izq. + logo 200px centrado) */
  .sticky-header .sh-inner {
    height: auto; padding: 10px 20px; gap: 0;
    display: block; position: relative; text-align: center;
  }
  .sticky-header .sh-date, .sticky-header .sh-right, .sticky-header .sh-left .menu-icon.search { display: none; }
  .sticky-header .sh-left {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%); gap: 0;
  }
  .sticky-header .sh-logo { display: block; }
  .sticky-header .sh-logo .logo { margin: 0 auto; display: block; }
  .sticky-header .sh-logo svg,
  .sticky-header .sh-logo img { height: 25px; width: auto; margin: 0 auto; display: block; }
}

/* El header completo deja de ser sticky (lo reemplaza el compacto) */
.site-header { position: static !important; }

/* ---------- Alerta EN VIVO expandida: crece en su lugar, sticky al scrollear ---------- */
.alertas .vivo.is-expanded { min-height: 0; height: auto; align-items: flex-start; padding: 24px 98px; box-sizing: border-box; }
.alertas .vivo.is-expanded .inner {
  flex-direction: column; align-items: flex-start; gap: 16px;
  width: 100%; max-width: 640px; margin: 0 auto;
}
.alertas .vivo.is-expanded .thumb {
  width: 100%; max-width: 640px; height: auto; aspect-ratio: 16 / 9;
}
.alertas .vivo.is-expanded .thumb .play { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.alertas .vivo.is-expanded .txt { width: 100%; }
.alertas .vivo.is-stuck {
  transition: none;
  position: fixed; left: 0; right: 0; z-index: 55;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  overflow: auto;
}
@media (max-width: 900px) { .alertas .vivo.is-expanded { padding: 16px; } }

/* ---------- Panel de navegación: botón cerrar ---------- */
.nav-menu .nav-top { position: relative; width: 100%; min-height: 32px; display: flex; align-items: center; margin-bottom: 4px; }
.nav-menu .nav-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; color: #fff; pointer-events: none; }
.nav-menu .nav-logo svg { height: 22px; width: auto; display: block; fill: currentColor; }
.nav-menu .nav-close {
  position: relative; z-index: 1;
  width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: #fff;
}
.nav-menu .nav-close:hover { opacity: .6; }


/* ---------- Mobile: la etiqueta "Compartir" se oculta, quedan los iconos ---------- */
@media (max-width: 768px) {
  .autor .share-label, .vid-autor .rrss .share-label, .obit-share-r .lbl { display: none; }
  .autor .rrss, .vid-autor .rrss { justify-content: space-between; }
}