/* =========================================================
   REVISTA ZARO – CSS COMPLETO (FIJO EN DESKTOP)
   ========================================================= */

p{margin:0 0 10px 0}

/* ====== FLIPBOOK ====== */
.zrn-wrap{
  position:relative;
  width:min(95vw,980px);
  margin:0 auto;
}
@media (min-width:901px){
  .zrn-wrap{ width:980px; }
}

.zrn-toolbar{ display:flex; gap:.5rem; justify-content:center; align-items:center; margin:.75rem 0 }
.zrn-counter{ opacity:.7 }

.zrn-mag{ position:relative; margin:1rem auto; background:transparent }
.zrn-page{
  background:#fff; border-radius:6px; overflow:hidden;
  box-shadow:0 20px 55px rgba(0,0,0,.08), 0 16px rgba(0,0,0,.06)
}
.zrn-portada img,.zrn-contratapa img{ display:block; width:100%; height:auto }

.zrn-fab{ z-index: 999; cursor: pointer; position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid rgba(0,0,0,.2); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.06) }
.zrn-fab-left{ left:-12px } .zrn-fab-right{ right:-12px }

/* Ocultar "Pages:" dentro de la hoja */
.zrn-page .page-links, .zrn-page .elementor-page-links{ display:none !important }

/* ====== EXCEPCIÓN: ancho completo (sin columnas) ====== */
.e-con.mag-nocols{ display:block !important }
.e-con.mag-nocols>.e-con-inner{
  display:block !important; -webkit-column-count:1 !important; column-count:1 !important;
  -webkit-column-gap:0 !important; column-gap:0 !important;
}
.e-con.mag-nocols iframe,.e-con.mag-nocols video,.e-con.mag-nocols .wp-video,.e-con.mag-nocols .wp-block-embed__wrapper{ max-width:100%; width:100%; height:auto }

/* ====== COLUMNAS (Elementor – Contenedores) ====== */
.e-con.mag-columns{ display:block !important }
.e-con.mag-columns>.e-con-inner{
  display:block !important;
  -webkit-column-count:2; column-count:2;
  -webkit-column-gap:18px !important; column-gap:18px !important;
}
.e-con.mag-columns>.e-con-inner>.elementor-widget{ break-inside:avoid-column }
.e-con.mag-columns>.e-con-inner>.elementor-widget-theme-post-content,
.e-con.mag-columns>.e-con-inner>.elementor-widget-text-editor{ break-inside:auto }
.e-con.mag-columns>.e-con-inner>.elementor-widget-theme-post-content .elementor-widget-container,
.e-con.mag-columns>.e-con-inner>.elementor-widget-text-editor .elementor-widget-container{ break-inside:auto }
.e-con.mag-columns img,.e-con.mag-columns figure,.e-con.mag-columns .wp-caption{ max-width:100%; height:auto }

/* ====== CONTINUACIÓN: ocultar cabecera duplicada ====== */
.zrn-page .mag-split-target>.e-con-inner>.elementor-widget-theme-post-featured-image,
.zrn-page .mag-split-target>.e-con-inner>.elementor-widget-theme-post-title,
.zrn-page .mag-split-target>.e-con-inner>.elementor-widget-theme-post-excerpt{ display:none !important }

/* ====== SHORTCODE: justificado y sin guiones ====== */
.mag-article .elementor-widget-theme-post-content .elementor-widget-container,
.mag-article .elementor-widget-text-editor .elementor-widget-container{
  text-align:justify; text-justify:inter-word;
}
.mag-article,
.mag-article .elementor-widget-theme-post-content,
.mag-article .elementor-widget-theme-post-content .elementor-widget-container{
  -webkit-hyphens:none !important; hyphens:none !important; word-break:normal; overflow-wrap:normal;
}

/* Nunca anidar columnas dentro del shortcode si ya hay columnas en el padre */
.e-con.mag-columns .elementor-widget-shortcode .mag-article{
  -webkit-column-count:initial !important;
  column-count:initial !important;
  -webkit-column-gap:18px !important;
  column-gap:18px !important;
}

@media (max-width:900px){
  .e-con.mag-columns>.e-con-inner{ -webkit-column-count:1; column-count:1 }
}

/* ====== COMPATIBILIDAD – Secciones antiguas ====== */
.elementor-container.mag-columns{ display:block !important; -webkit-column-count:2; column-count:2; -webkit-column-gap:18px !important; column-gap:18px !important }
.elementor-container.mag-columns>.elementor-row>.elementor-widget{ break-inside:avoid-column }
.elementor-container.mag-columns>.elementor-row>.elementor-widget-theme-post-content,
.elementor-container.mag-columns>.elementor-row>.elementor-widget-text-editor{ break-inside:auto }
@media (max-width:900px){
  .elementor-container.mag-columns{ -webkit-column-count:1; column-count:1 }
}

/* ---------- Detalles visuales ---------- */
.mag-featured-div { width:500px; height:500px; border-radius:999px; padding:5px; }
.mag-byline { display:none; }
.mag-excerpt { font-weight:600; font-style:italic; width:100%; }

/* Post Content respeta el alineado del widget */
.e-con.mag-columns .elementor-widget-theme-post-content .elementor-widget-container{ text-align:inherit }

/* Wrapper del Shortcode: permitir fragmentación y flujo */
.e-con.mag-columns > .e-con-inner > .elementor-widget-shortcode,
.e-con.mag-columns > .e-con-inner > .elementor-widget-shortcode .elementor-widget-container{ break-inside:auto !important }

/* Span a todo ancho dentro de columnas (para banners) */
.e-con.mag-columns .mag-span-all{
  -webkit-column-span:all; column-span:all;
  display:block; width:100%; break-inside:avoid;
}
/* Las columnas las maneja el contenedor padre */
.e-con.mag-columns > .e-con-inner{
  display:block !important;
  -webkit-column-count:2; column-count:2;
  -webkit-column-gap:18px; column-gap:18px;
}

/* Aplano el wrapper del widget de shortcode para que el contenido
   corte de la col 1 a la 2 y luego siga el banner */
.e-con.mag-columns > .e-con-inner > .elementor-widget-shortcode .elementor-widget-container{
  display: contents !important;
}

/* Evito columnas internas en el <article> del shortcode (por si quedó algún fallback) */
.e-con.mag-columns > .e-con-inner > .elementor-widget-shortcode .mag-article{
  -webkit-column-count: initial !important;
  column-count: initial !important;
  -webkit-column-gap: 18px !important;
  column-gap: 18px !important;
}

/* El banner a todo el ancho (poné mag-span-all en ese widget) */
.e-con.mag-columns .mag-span-all{
  -webkit-column-span: all;
  column-span: all;
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-top: 14px;
}

/* Fallback: si alguna vez el contenedor padre NO tuviera mag-columns,
   permito que el artículo del shortcode se parta en 2 */
.elementor-widget-shortcode .mag-article[data-columns="2"]{
  -webkit-column-count:2; column-count:2;
  -webkit-column-gap:18px; column-gap:18px;
}
@media (max-width:900px){
  .elementor-widget-shortcode .mag-article[data-columns="2"]{
    -webkit-column-count:1; column-count:1;
  }
}
/* 2 columnas en el contenedor padre */
.e-con.mag-columns > .e-con-inner{
  display:block !important;
  -webkit-column-count:2; column-count:2;
  -webkit-column-gap:18px; column-gap:18px;
}

/* Aplanar wrappers del Loop Grid para que su contenido participe de las columnas del padre */
.e-con.mag-columns > .e-con-inner .elementor-widget-loop-grid .elementor-widget-container,
.e-con.mag-columns > .e-con-inner .elementor-loop-container,
.e-con.mag-columns > .e-con-inner .e-loop-item{
  display: contents !important;
}

/* Aplanar el wrapper del widget Shortcode (que trae el <article>) */
.e-con.mag-columns > .e-con-inner > .elementor-widget-shortcode .elementor-widget-container{
  display: contents !important;
}

/* Evitar DOBLES columnas: no crear columnas en el <article> del shortcode cuando estamos dentro de mag-columns */
.e-con.mag-columns > .e-con-inner > .elementor-widget-shortcode .mag-article{
  -webkit-column-count: initial !important;
  column-count: initial !important;
  -webkit-column-gap: 18px !important;
  column-gap: 18px !important;
}

/* El banner a todo el ancho dentro del flujo de columnas */
.e-con.mag-columns .mag-span-all{
  -webkit-column-span: all;
  column-span: all;
  display:block;
  width:100%;
  break-inside: avoid;
  margin-top:14px;
}

/* Tip: sólo el Post Content puede romperse entre columnas */
.e-con.mag-columns .elementor-widget{ break-inside: avoid-column; }
.e-con.mag-columns .elementor-widget-theme-post-content{ break-inside: auto; }
/* 1) Asegurar BALANCEO real (con altura conocida) */
.zrn-page .e-con.mag-columns > .e-con-inner{
  height: 100%;
  column-fill: balance;
}

/* 2) El Loop Grid NO debe “cortar” columnas por su wrapper */
.e-con.mag-columns .e-loop-item{
  display: contents !important;
  break-inside: auto !important;
}

/* 3) El widget Shortcode TAMPOCO debe forzar corte */
.e-con.mag-columns .elementor-widget-shortcode{
  break-inside: auto !important;
}
.e-con.mag-columns .elementor-widget-shortcode .elementor-widget-container{
  display: contents !important;
}

/* 4) Evitar que alguna regla del Loop meta cortes raros de palabra */
.e-con.mag-columns .e-loop-item *{
  word-break: normal !important;   /* anula “break-word” del Loop */
  overflow-wrap: normal !important;
}

/* (opcional) un pelín de estabilidad tipográfica */
.e-con.mag-columns .elementor-widget-theme-post-content p{
  widows: 2; orphans: 2;
}
/* Balancear columnas dentro de la página */
.zrn-page .e-con.mag-columns > .e-con-inner{
  column-fill: balance;
}

/* El Loop Grid y el Shortcode no deben impedir la fragmentación */
.e-con.mag-columns .e-loop-item{
  display: contents !important;
  break-inside: auto !important;
}
.e-con.mag-columns .elementor-widget-shortcode{
  break-inside: auto !important;
}
.e-con.mag-columns .elementor-widget-shortcode .elementor-widget-container{
  display: contents !important;
}

/* Evitar que el Loop fuerce cortes raros de palabra */
.e-con.mag-columns .e-loop-item *{
  word-break: normal !important;
  overflow-wrap: normal !important;
}
.zrn-page .e-con.mag-columns > .e-con-inner{ column-fill: balance; }

.e-con.mag-columns .e-loop-item{ display: contents !important; break-inside: auto !important; }
.e-con.mag-columns .elementor-widget-shortcode{ break-inside: auto !important; }
.e-con.mag-columns .elementor-widget-shortcode .elementor-widget-container{ display: contents !important; }

.e-con.mag-columns .e-loop-item *{
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Forzar balanceo real de las dos columnas en la continuación */
.e-con.mag-columns > .e-con-inner{
  -webkit-column-fill: balance !important;
  column-fill: balance !important;
}

/* Por si el shortcode tiene wrapper propio, asegurar balanceo ahí también */
.e-con.mag-columns .elementor-widget-shortcode .elementor-widget-container{
  -webkit-column-fill: balance !important;
  column-fill: balance !important;
}
/* === FIX: permitir que el contenido (shortcode) se parta entre columnas === */
.e-con.mag-columns > .e-con-inner{
  -webkit-column-fill: balance !important;
  column-fill: balance !important;
  -webkit-column-gap: 18px !important;
  column-gap: 18px !important;
}

/* Dejar que TODOS los widgets puedan fragmentarse… */
.e-con.mag-columns > .e-con-inner > .elementor-widget{
  break-inside: auto !important;
}

/* …menos los típicos que no deben cortarse en dos */
.e-con.mag-columns > .e-con-inner > .elementor-widget-image,
.e-con.mag-columns > .e-con-inner > .elementor-widget-video,
.e-con.mag-columns > .e-con-inner > .elementor-widget-embed{
  break-inside: avoid-column !important;
}

/* MUY IMPORTANTE: NO crear columnas internas en el contenido del shortcode */
.elementor-widget-shortcode .mag-article{
  -webkit-column-count: initial !important;
  column-count: initial !important;
  -webkit-column-gap: 18px !important;
  column-gap: 18px !important;
}

/* El banner a todo el ancho dentro del flujo de columnas */
.e-con.mag-columns .mag-span-all{
  -webkit-column-span: all;
  column-span: all;
  display: block;
  width: 100%;
  break-inside: avoid;
}
/* === Justificado limpio para el texto de la revista (plantilla + shortcode) === */
/* Aplica a Post Content y Text Editor dentro de las páginas de la revista */
.zrn-page .elementor-widget-theme-post-content .elementor-widget-container,
.zrn-page .elementor-widget-text-editor .elementor-widget-container,
.mag-article .elementor-widget-theme-post-content .elementor-widget-container,
.mag-article .elementor-widget-text-editor .elementor-widget-container{
  text-align: justify !important;
  text-justify: inter-word;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Por si Elementor mete “word-break: break-word” dentro del Loop */
.e-loop-item .elementor-widget-theme-post-content *,
.e-loop-item .elementor-widget-text-editor *{
  word-break: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Opcional: aplicar también a párrafos/listas/bloques específicos */
.zrn-page .elementor-widget-theme-post-content .elementor-widget-container p,
.zrn-page .elementor-widget-theme-post-content .elementor-widget-container li,
.zrn-page .elementor-widget-theme-post-content .elementor-widget-container blockquote,
.mag-article .elementor-widget-theme-post-content .elementor-widget-container p,
.mag-article .elementor-widget-theme-post-content .elementor-widget-container li,
.mag-article .elementor-widget-theme-post-content .elementor-widget-container blockquote{
  text-align: justify;
}
.elementor-widget-container figure {max-width: 85% !important;}

/* Igualar el gap en continuaciones (shortcode) */
.zrn-page .mag-coflow{
  -webkit-column-gap: 18px;
  column-gap: 18px;
  /* por si alguna regla lo pisa */
  -webkit-column-fill: auto;
  column-fill: auto;
}

/* Mobile: 1 columna en continuaciones también */
@media (max-width: 900px){
  .zrn-page .mag-coflow{
    -webkit-column-count: 1;
    column-count: 1;
  }
}

/* Robustez: evitar cortes feos en coflow */
.zrn-page .mag-coflow figure,
.zrn-page .mag-coflow .wp-caption,
.zrn-page .mag-coflow .wp-block-image,
.zrn-page .mag-coflow ul,
.zrn-page .mag-coflow ol{
  break-inside: avoid-column;
}
.banner-recuadro {
    border-width: 2px;
    text-align: center !important;
    padding: 18px !important;
    font-size: 12px !important;
}
/* === FABs: chevrons sutiles ======================================= */
.zrn-fab{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  color:#3c4658;          /* color del icono */
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.zrn-fab::before{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px;
  background:currentColor; opacity:.85;
  -webkit-mask:no-repeat center/contain;
          mask:no-repeat center/contain;
}
.zrn-fab-left{ left:-32px }
.zrn-fab-right{ right:-32px }

/* Chevron SVGs (outline suave) */
.zrn-fab-left::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}
.zrn-fab-right::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
}

/* Hover/active */
.zrn-fab:hover{ color:#111; border-color:rgba(0,0,0,.2); box-shadow:0 10px 28px rgba(0,0,0,.12) }
.zrn-fab:active{ transform:translateY(-50%) scale(.97) }

/* En mobile acercamos un toque */
@media (max-width:900px){
  .zrn-fab{ width:38px; height:38px }
  .zrn-fab-left{ left:-8px } .zrn-fab-right{ right:-8px }
}
/* === Marco del libro (contenedor) ================================ */
.zrn-mag{
  border-radius:12px;
  /* sombra general del “volumen” */
  box-shadow:0 24px 64px rgba(0,0,0,.12);
  position:relative;
}

/* Filete exterior y efecto “muchas hojas” en los bordes */
.zrn-mag::after{
  content:""; position:absolute; inset:-6px -8px -10px -8px; border-radius:14px;
  pointer-events:none;
  /* sombras múltiples y filete suave */
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06) inset,
    0 1px 0 rgba(255,255,255,.8) inset,
    0 22px 45px rgba(0,0,0,.10);
}

/* Borde/sombra de cada hoja (no exagerado para no competir con el marco) */
.zrn-page{
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 40px rgba(0,0,0,.08);
  border-radius:6px;
}
/* === Lomo / gutter central ====================================== */
.zrn-mag.has-double::before{
  content:""; pointer-events:none; position:absolute; top:0; bottom:0; left:50%;
  width:48px; transform:translateX(-50%);
  /* dos gradientes opuestos para sombrear el borde interno de cada página */
  background:
    linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0) 55%) left center/50% 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,.18), rgba(0,0,0,0) 55%) right center/50% 100% no-repeat;
  opacity:.35;           /* si la querés más/menos fuerte, retocá esto */
  filter: blur(.2px);    /* micro-suavizado */
  border-left:1px solid rgba(0,0,0,.03);
  border-right:1px solid rgba(0,0,0,.03);
}

/* En single desaparece automáticamente; en mobile bajamos intensidad */
@media (max-width:900px){
  .zrn-mag.has-double::before{ opacity:.25; width:38px }
}
/* =========================================================
   REVISTA – Look clásico (costillas VERTICALES + lomo sutil)
   Sustituye el bloque anterior de "ESTILO LIBRO"
   ========================================================= */

/* 0) Nada de bordes redondeados */
.zrn-mag,
.zrn-page{ border-radius:0 !important }

/* 1) Sombra general del “taco” de páginas: más suave, más ancha */
.zrn-mag{
  position:relative;
  box-shadow:
    0 28px 80px rgba(0,0,0,.18),
    0 12px 26px rgba(0,0,0,.10);
}

/* 2) Bordes exteriores con costillas VERTICALES y leve viñeta lateral */
.zrn-mag::after{
  content:""; pointer-events:none; position:absolute;
  /* un poquito por fuera para que la sombra respire */
  top:-6px; bottom:-10px; left:-10px; right:-10px;
  border-radius:0;

  /* Capas de fondo:
     - viñeta lateral (izq/der)
     - costillas VERTICALES muy sutiles cerca de cada borde
  */
  background:
    /* viñetas laterales suaves */
    linear-gradient(to right, rgba(0,0,0,.14), rgba(0,0,0,0)) left center/14px 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,.14), rgba(0,0,0,0)) right center/14px 100% no-repeat,

    /* costillas VERTICALES (repeating-linear-gradient *to right*) */
    repeating-linear-gradient(to right,
      rgba(0,0,0,.065) 0 1px, transparent 1px 3px
    ) left 7px top 8px/6px calc(100% - 16px) no-repeat,
    repeating-linear-gradient(to left,
      rgba(0,0,0,.065) 0 1px, transparent 1px 3px
    ) right 7px top 8px/6px calc(100% - 16px) no-repeat;

  /* sombra exterior leve para asentar el bloque */
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
}

/* 3) Cada hoja con borde de papel muy sutil + luz interior ligera */
.zrn-page{
  border:1px solid rgba(0,0,0,.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,   /* luz superior */
    0 12px 32px rgba(0,0,0,.06);           /* sombra propia */
}

/* 4) Lomo: dos penumbras enfrentadas desde el centro, sin exagerar */
.zrn-mag.has-double::before{
  content:""; pointer-events:none; position:absolute; top:0; bottom:0; left:50%;
  width:44px; transform:translateX(-50%);
  background:
    linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,0) 60%) left center/50% 100% no-repeat,
    linear-gradient(to left,  rgba(0,0,0,.20), rgba(0,0,0,0) 60%) right center/50% 100% no-repeat;
  opacity:.30;
  /* filitos casi imperceptibles para marcar el pliegue */
  border-left:1px solid rgba(0,0,0,.05);
  border-right:1px solid rgba(0,0,0,.05);
}

/* Mobile: todo un poco más discreto y lomo más angosto */
@media (max-width:900px){
  .zrn-mag{ box-shadow:0 24px 64px rgba(0,0,0,.16), 0 10px 22px rgba(0,0,0,.10) }
  .zrn-mag::after{ left:-8px; right:-8px }
  .zrn-mag.has-double::before{ width:36px; opacity:.24 }
}
/* Banner en tapa (apoyado en el pie de la hoja) */
.zrn-portada{ position:relative; }
.zrn-portada .zrn-cover-banner{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:block;
}
.zrn-portada .zrn-cover-banner-img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.elementor-loop-container {
  grid-auto-rows: auto !important;
}
/* ===== Mobile: 1 columna + scroll interno por página ===== */
@media (max-width:900px){
  /* la hoja scrollea verticalmente */
  .zrn-page{
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  /* nada de 2 columnas en mobile y sin alturas forzadas */
  .e-con.mag-columns > .e-con-inner,
  .elementor-container.mag-columns,
  .mag-article[data-columns],
  .mag-article .mag-colflow{
    -webkit-column-count: 1 !important;
    column-count: 1 !important;
    -webkit-column-gap: 0 !important;
    column-gap: 0 !important;
    height: auto !important;
    max-height: none !important;
    -webkit-column-fill: auto !important;
    column-fill: auto !important;
  }
}
/* ===== Scroll hint (solo mobile) ===== */
@media (max-width:900px){
  .zrn-page{ position:relative } /* contenedor para el hint */

  .zrn-scroll-hint{
    position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
    z-index:99; display:flex; align-items:center; gap:.45rem;
    padding:.35rem .6rem;
    font:600 11px/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    letter-spacing:.04em; text-transform:uppercase;
    color:#fff; background:rgba(0,0,0,.55);
    border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.15);
    backdrop-filter:blur(2px);
    opacity:.92; transition:opacity .25s ease, transform .25s ease;
    pointer-events:auto;
  }
  .zrn-scroll-hint i{
    width:14px; height:14px; display:inline-block; background:currentColor; opacity:.9;
    -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
    -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 7 12 12 17 7'/><polyline points='7 13 12 18 17 13'/></svg>");
            mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 7 12 12 17 7'/><polyline points='7 13 12 18 17 13'/></svg>");
  }

  @keyframes zrn-bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,3px)} }
  .zrn-scroll-hint.anim{ animation:zrn-bounce 1.8s ease-in-out infinite }

  /* esconder cuando el usuario ya scrolleó o si lo forzamos */
  .zrn-page.scrolled .zrn-scroll-hint,
  .zrn-scroll-hint.hide{ opacity:0; pointer-events:none }
}
/* === Share pin por página =================================== */
.zrn-page { position: relative; }
.zrn-share-pin{
  position:absolute; top:10px; right:-155px;
  width:28px; height:28px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.15);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center;
  color:#333; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  z-index: 20;
}
.zrn-share-pin:hover{ transform:scale(1.04); border-color:rgba(0,0,0,.25); box-shadow:0 6px 18px rgba(0,0,0,.14) }
.zrn-share-pin:active{ transform:scale(.98) }
/* Ícono (link) */
.zrn-share-pin::before{
  content:""; width:16px; height:16px; background:currentColor; opacity:.92;
  -webkit-mask:no-repeat center/contain; mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='%23000' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 1 5-5h2'/><path d='M14 9l3-3 3 3'/><path d='M20 11v6a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' stroke='%23000' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 1 5-5h2'/><path d='M14 9l3-3 3 3'/><path d='M20 11v6a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/></svg>");
}

/* Toast de “copiado” */
.zrn-toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:#111; color:#fff; font:600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding:8px 12px; border-radius:999px; box-shadow:0 10px 22px rgba(0,0,0,.22);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
  z-index:9999;
}
.zrn-toast.show{ opacity:.96; transform:translateX(-50%) translateY(-2px); }
.zrn-portada .zrn-share-pin,
.zrn-contratapa .zrn-share-pin{ display:none }
/* Contenedor del pin + menú */
.zrn-share-wrap{ position:absolute; top:20px; left:70px; z-index:5; }

/* Botón pin */
.zrn-share-pin{
  appearance:none; border:0; outline:0; cursor:pointer;
  width:28px; height:28px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#666; box-shadow:0 1px 4px rgba(0,0,0,.16);
}
.zrn-share-pin:hover{ color:#111; }

/* Menú */
.zrn-share-menu{
  position:absolute; top:42px; left:-36px; min-width:170px;
  background:#fff; border-radius:0px; box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:6px; display:none;
}
.zrn-share-menu.open{ display:block; }

/* Items */
.zrn-share-item{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:8px; text-decoration:none;
  font:500 13px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#222; background:transparent; width:100%;
}
.zrn-share-item:hover{ background:#f2f2f2; }
.zrn-share-item svg{ flex:0 0 18px; }

/* Marcas por plataforma (color del ícono) */
.zrn-wsp svg{ color:#25d366; }
.zrn-fb  svg{ color:#1877f2; }
.zrn-x   svg{ color:#111; }
.zrn-copy svg{ color:#666; }

/* Por si querés ocultarlo en tapa/contratapa */
.zrn-portada .zrn-share-wrap,
.zrn-contratapa .zrn-share-wrap{ display:none; }
/* Evitar doble ícono en el botón */
.zrn-share-pin::before{
  content:none !important;
}
/* Íconos como máscara: tamaño, color y assets */
.ico{
  display:inline-block;
  width:18px; height:18px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Ajustes visuales para que todo calce lindo */
.zrn-share-pin .ico{ width:20px; height:20px; }  /* botón pin un pelín más grande */
.zrn-share-item .ico{ width:18px; height:18px; }
/* Usar el SVG directo como fondo (sin mask) */
.ico{
  display:inline-block;
  width:18px; height:18px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

/* Reemplazá por tus URLs reales */
.ico-share{ background-image:url('https://wp.zaro.com.ar/wp-content/plugins/revista-zaro-nuevo/assets/compartir-cuadrado.svg'); }
.ico-link { background-image:url('https://wp.zaro.com.ar/wp-content/plugins/revista-zaro-nuevo/assets/enlace-alt.svg'); }

/* Tamaños como antes */
.zrn-share-pin .ico{ width:20px; height:20px; }
.zrn-share-item .ico{ width:18px; height:18px; }
.rzn-index{
  list-style:none; padding:0; margin:0;
  display:grid; gap:.5rem;
}
.rzn-index-link{
  display:flex; justify-content:space-between; align-items:center;
  padding:.5rem .75rem; border:1px solid #e6e6e6; border-radius:8px;
  text-decoration:none; color:inherit; background:#fff;
}
.rzn-index-link:hover{ background:#f7f7f7; }
.rzn-index-title{ flex:1; }
.rzn-index-num{ margin-left:.75rem; font-variant-numeric: tabular-nums; opacity:.7; }
.rzn-index{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.75rem;
}

.rzn-index-item{}

.rzn-index-link{
  display:grid;
  grid-template-columns: 88px 1fr auto; /* thumb | texto | número */
  gap: .75rem;
  align-items:center;
  text-decoration:none;
  color:inherit;
  padding:.6rem .8rem;
  border:1px solid #e8e8e8;
  border-radius:10px;
  background:#fff;
}

.rzn-index-link:hover{ background:#f8f8f8; }

.rzn-index-media img{
  display:block;
  width:88px; height:88px; object-fit:cover; border-radius:8px;
}

.rzn-index-body{
  display:flex; flex-direction:column; gap:.25rem; min-width:0;
}
.rzn-index-title{
  font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rzn-index-excerpt{
  font-size:.92rem; color:#555; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.rzn-index-num{
  margin-left:.5rem; font-variant-numeric:tabular-nums; opacity:.7; white-space:nowrap;
}
.rzn-index-thumb{
  width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display:block;
}
/* Columnas "reales" para el contenido del artículo (JS) */
.mag-columns{
  display: flex;
  gap: 24px;                 /* el mismo gap que usabas en columns */
}
.mag-columns .col{
  flex: 1 1 0;
  min-width: 0;
}

/* Evitamos que ciertos bloques se corten entre columnas */
.mag-columns .col p,
.mag-columns .col h1,
.mag-columns .col h2,
.mag-columns .col h3,
.mag-columns .col ul,
.mag-columns .col ol,
.mag-columns .col blockquote,
.mag-columns .col figure{
  break-inside: avoid;
}
.banner-pag1 {position:absolute;z-index: 9999;bottom: 0;}