/* =========================================================
   styles-revista-wp.css — ADAPTADOR WordPress
   ---------------------------------------------------------
   El diseño vive en styles-revista*.css (copia 1:1 de disenos/cg-home).
   Acá va SOLO lo que hace falta porque en WP el markup de algunas cosas
   no lo controlamos nosotros (Advanced Ads, eon_newsletter, Gutenberg,
   barra de admin). No agregar tokens nuevos: usar los de :root del diseño.
   ========================================================= */

/* ---- Barra de admin de WP (solo logueados) ---- */
.admin-bar .nav { top: 32px; }
.admin-bar .read-progress { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
  .admin-bar .read-progress { top: 46px; }
}
/* ≤600px la barra de admin deja de ser fija (se va con el scroll): sin offset, si no queda un hueco */
@media (max-width: 600px) {
  .admin-bar .nav,
  .admin-bar .read-progress { top: 0; }
}

/* ---- Restos de Astra / Elementor que no deben verse en estas plantillas ---- */
.cg-revista #ast-scroll-top,
.cg-revista [data-elementor-type="popup"],
.cg-revista [id^="elementor-popup-modal-"],
.cg-revista .dialog-widget { display: none !important; }

/* ---- Publicidad (Advanced Ads) ----
   El plugin devuelve <div id="circu-…"><a><img></a></div>.
   Lo metemos dentro del contenedor del diseño y lo hacemos ocupar todo. */
.cg-ad > div,
.cg-ad > div > a,
.cg-ad > a { display: block; width: 100%; height: 100%; }

.sponsors__card.cg-ad img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .7s var(--ease);
}
.sponsors__card.cg-ad:hover img { transform: scale(1.02); }

.ad-sidebar__link.cg-ad img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* Variantes por dispositivo (Advanced Ads no filtra por device en este sitio) */
@media (max-width: 768px) { .cg-only-desktop { display: none !important; } }
@media (min-width: 769px) { .cg-only-mobile  { display: none !important; } }

/* ---- Newsletter (shortcode [eon_newsletter]) dentro de la card del sidebar ---- */
.sidebar-widget--newsletter .eon-newsletter-form { display: flex; flex-direction: column; gap: 8px; }
.sidebar-widget--newsletter .eon-label { display: none; }
.sidebar-widget--newsletter .eon-name-row { display: flex; flex-direction: column; gap: 8px; }
.sidebar-widget--newsletter .eon-input {
  width: 100%;
  padding: 10px 15px;
  border-radius: 100px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  color: var(--fg);
  font-size: 13.5px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.sidebar-widget--newsletter .eon-input::placeholder { color: var(--fg-mute); }
.sidebar-widget--newsletter .eon-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.sidebar-widget--newsletter .eon-btn {
  padding: 10px 20px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-ui);
  border: none;
  cursor: pointer;
  transition: background var(--fast), transform var(--fast);
}
.sidebar-widget--newsletter .eon-btn:hover { background: var(--accent-deep); transform: translateY(-1px); }
.sidebar-widget--newsletter .eon-message { font-size: 13px; color: var(--fg-dim); }

/* ---- Contenido de la nota (the_content) ----
   Imagen / cita / lista de Gutenberg reciben las clases del diseño
   (post-figure, post-blockquote, post-list) desde PHP (render_block).
   Esto cubre lo que no es bloque: notas viejas del editor clásico y embeds. */
.post-body img { max-width: 100%; height: auto; }
.post-body .wp-caption { max-width: 100%; margin: 2em 0; }
.post-body .wp-caption-text { font-size: 12px; color: var(--fg-mute); font-style: italic; padding-top: 6px; }
.post-body iframe,
.post-body video,
.post-body embed { max-width: 100%; }
.post-body .wp-block-embed__wrapper iframe { width: 100%; }
.post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.post-body ol { margin: 1.4em 0 2em 1.4em; }
.post-body .aligncenter { margin-inline: auto; display: block; }
.post-body .post-figure figcaption.wp-element-caption { margin: 0; }

/* ---- Listado vacío de categoría ---- */
.cg-empty { padding-block: 48px; color: var(--fg-mute); text-align: center; }

/* ---- Accesibilidad ---- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---- Rendimiento ----
   La textura de papel (body::after, fija y a pantalla completa) usaba mix-blend-mode:multiply:
   obliga a re-mezclar toda la pantalla en cada frame de scroll/animación. Con opacidad .025
   la diferencia visual es nula. */
body::after { mix-blend-mode: normal; }

/* Animaciones infinitas pausadas mientras no están en pantalla (clase que pone script-revista-inline.js). */
.cg-offscreen,
.cg-offscreen * { animation-play-state: paused !important; }

/* ---- Correcciones del diseño en mobile (el HTML original tiene el mismo problema) ----
   1) Menú mobile: con el header en .shrink (después de scrollear) el backdrop-filter del .nav
      convierte al .nav en contenedor de los position:fixed → el menú abierto quedaba de ~110px
      de alto, encerrado en el header. Con el menú abierto se quita el blur. */
.nav:has(.nav__links.open) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
/*    Con el menú abierto el diseño bloquea el scroll con body{overflow:hidden}, pero como el html
      tiene overflow-x:hidden el que scrollea es el html → quedaba la barra de la página + la del menú. */
html:has(.nav__links.open) { overflow: hidden; }
.nav__links.open { scrollbar-width: none; }
.nav__links.open::-webkit-scrollbar { display: none; }

/* 2) Grillas de notas de la home: "1fr" no deja achicar la columna por debajo de su contenido
      (card + anuncio en fila ≈ 530px) → las cards se salían a la derecha. */
@media (max-width: 700px) {
  .ed-grid, .ed-grid--novedades { grid-template-columns: minmax(0, 1fr); }
  .ed-left, .ed-right, .ed-right-bottom,
  .ed-left .card-3d, .ed-right .card-3d,
  .ed-main, .ed-row, .ed-card { min-width: 0; max-width: 100%; }
}

/* 3) Publicidad del sidebar del single en mobile: los grupos mobile son franjas (1220x200),
      no verticales → ancho completo y alto natural en lugar del cuadro 218x352. */
@media (max-width: 768px) {
  .ad-sidebar__link.cg-only-mobile { width: 100%; height: auto; }
  .ad-sidebar__link.cg-only-mobile img { height: auto; object-fit: contain; }
}

/* 9. Mobile: en ≤680px el menú tiene 2 filas (logo + buscador, 126px de alto) pero el diseño reserva
      ~100px (hero home: 14vh) o 120px (hero nota) → la etiqueta/título quedaban pegados o debajo del
      buscador. 154px = 126 del menú + 28 de aire. */
@media (max-width: 680px) {
  .cg-revista .hero { padding-top: 154px; }
  .cg-revista .post-hero__inner { padding-top: 154px; }
}

/* 10. Mobile: el "humo" del Protagonista (5 manchas con blur de 72px animadas sin parar) es lo más caro
       de pintar en un celular. En ≤700px queda quieto: el look es el mismo, se pinta una sola vez. */
@media (max-width: 700px) {
  .prot-smoke__blob { animation: none !important; will-change: auto; }
}

/* 11. Ancho en desktop: home, categoría y nota a 1366px útiles (el diseño trae 1240px de caja).
       --max es la caja de .wrap e incluye el padding lateral, por eso se le suma.
       ⚠️ Banners horizontales de publicidad: la FRANJA ("Con el apoyo de" / "Auspiciantes" y sus líneas)
       va a 1366 como el resto, pero la IMAGEN del anuncio queda fija en el tamaño de antes (centrada):
       más grande queda invasiva. Home: 1240px de caja menos el padding (≈1096). Categoría/nota: 1120px
       (tope inline en cg_revista_sponsor). NO agrandar la imagen. */
body.cg-revista { --max: calc(1366px + 2 * var(--pad)); }
body.cg-revista .sponsors__row .sponsors__viewport:not([style]) {
  max-width: calc(1240px - 2 * var(--pad));
  margin-inline: auto;
}
/*     Categoría/nota: el divisor y la línea inferior traen max-width:1120px inline → a lo ancho de la
       franja. .sponsors pisa el padding de .wrap: se lo devuelve para alinear con los títulos. */
@media (min-width: 1240px) {
  body.cg-revista .sponsors.wrap { padding-inline: var(--pad); }
  body.cg-revista .sponsors.wrap > .sponsors__divider,
  body.cg-revista .sponsors.wrap > div[style*="border-bottom"] { max-width: none !important; }
}

/*     Grillas de notas de la home (Restaurantes, Comer y Dormir, Novedades): el diseño usa anchos fijos
       (card grande 530px, card chica 280/340px) que coinciden con la columna a 1240px; con más ancho
       quedaban huecos. Ahora llenan su columna (a 1240px dan las mismas medidas). La publicidad
       vertical conserva sus 218px. Solo desde 1240px (donde el contenido supera el ancho del diseño);
       por debajo queda exactamente como el diseño. */
@media (min-width: 1240px) {
  .cg-revista .ed-left .card-3d { width: 100%; }
  .cg-revista .ed-right-bottom--single-ad { gap: clamp(16px, 2vw, 20px); }
  .cg-revista .ed-right-bottom--single-ad > .card-3d:first-child { flex: 1 1 0; min-width: 0; }
  .cg-revista .ed-right-bottom--single-ad > .card-3d:not(:first-child) { flex: 0 0 auto; }
  .cg-revista .ed-right-bottom--single-ad .ed-card,
  .cg-revista #novedades .ed-right-bottom--single-ad .ed-card { width: 100%; } /* #novedades trae 340px con id */
}

/* 12. "Restaurantes más buscados": el carrusel tiene overflow-x:auto, lo que fuerza también el scroll
       vertical; la animación de entrada (translateY) y el hover (-6px) generaban un mini scroll vertical.
       Solo scroll horizontal, con 10px de aire arriba (compensados) para que el hover no se corte. */
.cg-revista .dir__track {
  overflow-y: hidden;
  padding-top: 10px;
  margin-top: -10px;
  /* El scroll-snap enganchaba las cards contra el borde de la franja (ignora el padding) y la primera
     quedaba corrida a la izquierda del título: se engancha respetando el margen del contenido. */
  scroll-padding-inline: var(--pad);
}

/* 13. Mobile: el diseño saca el padding de arriba a la sección que sigue a un banner horizontal
       (.sponsors + section), pero en ≤768px ese banner está oculto → "Comer y Dormir" (y Destacada)
       quedaban sin aire arriba. Se devuelve el padding normal de .section. */
@media (max-width: 768px) {
  .cg-revista .sponsors + section.section { padding-top: clamp(48px, 7vh, 80px); }
}

/* 14. Desktop: "Ver más notas" en la misma línea que el título. El encabezado tiene flex-wrap y el
       link bajaba a una segunda fila; en ≥769px no se parte (el título se achica si hace falta). */
@media (min-width: 769px) {
  /* align-items:baseline: con flex-end el link quedaba ~95px por debajo del texto (el título tiene
     line-height 1.3 + padding-bottom) y parecía una segunda línea. */
  .cg-revista .section__head { flex-wrap: nowrap; align-items: baseline; }
  .cg-revista .section__head .section__title { min-width: 0; }
  .cg-revista .section__head .section__more { flex-shrink: 0; }
}

/* 15. Título del hero de la home más chico en desktop (el diseño: 100px / 18ch → 3-4 líneas).
       58px / 26ch + text-wrap:balance → líneas parejas en todos los títulos, p. ej.
       "La Mona Jiménez Museo Bar: / música, gastronomía y encuentros" (sin balance quedaba
       "…Museo Bar: música, / gastronomía y encuentros"). Mobile sin cambios. */
@media (min-width: 769px) {
  .cg-revista .hero__title { font-size: clamp(34px, 4.4vw, 58px); max-width: 26ch; text-wrap: balance; }
}