/* ==========================================================================
   Portada del sitio · piezas de la Opción B ("Muro de portadas") sobre la base A.
   Prefijo hb- en todo: no toca rdn.css ni pages-revista.css.
   Riel lateral (escritorio), muro de las portadas con el número sobreimpreso,
   visor que sigue al cursor, sección de las cinco portadas y tarifario de membresías
   (el contenido del tarifario lo dibuja assets/js/membresias.js desde data/membresias.json).
   ========================================================================== */

:root {
  --hb-rail: 68px;
  --hb-ink: var(--ink, #1D1D1B);
  --hb-paper: var(--paper, #FFFFFF);
  --hb-paper-2: var(--paper-2, #F5F2F2);
  --hb-red: var(--red, #DB0632);
  --hb-red-ink: var(--red-deep, #A8042A);   /* texto rojo chico sobre blanco: 7.7:1 */
  --hb-mute: var(--ink-mute, #615B5B);      /* 6.7:1 sobre blanco */
  --hb-mute-ink: #ABA5A5;                   /* texto secundario sobre tinta: 7.4:1 */
  --hb-line-ink: #3A3836;
  --hb-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hb-display: var(--font-display, "Anton", Impact, sans-serif);
  --hb-head: var(--font-head, "Barlow Condensed", "Arial Narrow", sans-serif);
  --hb-text: var(--font-text, "Source Serif 4", Georgia, serif);
  --hb-pad: 16px;   /* igual que los márgenes de .wrap en rdn.css */
}
@media (min-width: 768px) { :root { --hb-pad: 32px; } }
@media (min-width: 1200px) { :root { --hb-pad: 48px; } }

.hb-page :focus-visible, .hb-lomo :focus-visible, .hb-indice :focus-visible { outline: 3px solid var(--hb-red); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Riel lateral y página
   -------------------------------------------------------------------------- */
.hb-lomo { display: none; }
@media (min-width: 1024px) {
  .hb-page { padding-left: var(--hb-rail); background: linear-gradient(90deg, var(--hb-ink) var(--hb-rail), transparent var(--hb-rail)); }
  /* En escritorio el riel sustituye a la cabecera del sitio; el aviso de vista previa se conserva. */
  .hb-page #rdn-header .site-header__top,
  .hb-page #rdn-header .site-header { display: none; }
  .hb-lomo {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: var(--hb-rail);
    display: flex; flex-direction: column; align-items: center;
    background: var(--hb-ink); color: var(--hb-paper);
  }
}
.hb-lomo__logo { position: relative; display: block; flex: none; width: var(--hb-rail); height: 214px; border-bottom: 1px solid var(--hb-line-ink); }
.hb-lomo__logo img { position: absolute; left: 50%; top: 50%; width: 190px; max-width: none; height: auto; transform: translate(-50%, -50%) rotate(-90deg); }
.hb-lomo__nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0; }
.hb-lomo__nav::-webkit-scrollbar { display: none; }
.hb-lomo__nav a {
  writing-mode: vertical-rl; transform: rotate(180deg); min-width: 44px; padding: 9px 0; text-align: center; position: relative;
  font: 500 12px/1 var(--hb-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--hb-mute-ink);
}
.hb-lomo__nav a:hover { color: var(--hb-paper); }
.hb-lomo__nav a:hover::after { content: ""; position: absolute; right: 2px; top: 9px; bottom: 9px; width: 4px; background: var(--hb-red); }
.hb-lomo__nav .hb-lomo__red { color: var(--hb-paper); font-weight: 600; }
.hb-lomo__nav .hb-lomo__red::before { content: ""; position: absolute; left: 50%; bottom: -2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--hb-red); }
.hb-lomo__foot { flex: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 14px; border-top: 1px solid var(--hb-line-ink); }
.hb-lomo__cart { position: relative; display: grid; place-items: center; width: 48px; height: 44px; color: var(--hb-paper); }
.hb-lomo__cart .icon { width: 22px; height: 22px; }
.hb-lomo__cart span { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--hb-red); color: #fff; font: 600 11px/18px var(--hb-mono); text-align: center; }
.hb-lomo__cart span[data-count="0"] { display: none; }
.hb-lomo__btn { width: 48px; height: 48px; background: var(--hb-red); color: #fff; font: 600 11px/1 var(--hb-mono); letter-spacing: .05em; text-transform: uppercase; }
.hb-lomo__btn:hover { background: var(--hb-paper); color: var(--hb-ink); }

/* Índice a pantalla completa */
.hb-indice { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0; overflow-y: auto; background: var(--hb-ink); color: var(--hb-paper); }
.hb-indice::backdrop { background: rgb(29 29 27 / .6); }
.hb-indice__in { min-height: 100%; padding: 20px var(--hb-pad) 32px; display: grid; align-content: start; gap: 22px; }
.hb-indice__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--hb-line-ink); padding-bottom: 14px; }
.hb-indice__close { background: var(--hb-paper); color: var(--hb-ink); padding: 12px 18px; font: 600 13px/1 var(--hb-mono); letter-spacing: .06em; text-transform: uppercase; }
.hb-indice__close:hover { background: var(--hb-red); color: #fff; }
.hb-indice__search label { display: block; font: 500 12px/1.4 var(--hb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hb-mute-ink); margin-bottom: 8px; }
.hb-indice__search div { display: flex; gap: 8px; max-width: 760px; }
.hb-indice__search input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 3px solid var(--hb-paper); color: var(--hb-paper); font: 400 clamp(22px, 3vw, 34px)/1.2 var(--hb-head); padding: 6px 2px; border-radius: 0; }
.hb-indice__search input::placeholder { color: #9D9797; opacity: 1; }
.hb-indice__search button { background: var(--hb-red); color: #fff; padding: 0 20px; font: 700 18px/1 var(--hb-head); text-transform: uppercase; min-height: 48px; }
.hb-indice__list li { border-bottom: 1px solid var(--hb-line-ink); }
.hb-indice__list a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 4px 0; text-decoration: none; font: 400 clamp(32px, min(5.4vw, 6.4vh), 70px)/1 var(--hb-display); text-transform: uppercase; }
.hb-indice__list a span { font: 400 12px/1.3 var(--hb-mono); letter-spacing: .06em; color: var(--hb-mute-ink); text-align: right; }
.hb-indice__list a:hover { color: var(--hb-red); }
.hb-indice__here { font: 400 13px/1.8 var(--hb-mono); color: var(--hb-mute-ink); }
.hb-indice__here a { color: var(--hb-paper); }
@media (max-width: 560px) { .hb-indice__list a span { display: none; } }

/* --------------------------------------------------------------------------
   Tipos y piezas comunes
   -------------------------------------------------------------------------- */
.hb-kick { font: 500 12px/1.5 var(--hb-mono); letter-spacing: .06em; text-transform: uppercase; }
.hb-folio { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; border-top: 3px solid currentColor; padding-top: 10px; margin-bottom: clamp(28px, 4vw, 56px); }
.hb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px;
  border: 2px solid var(--hb-ink); color: var(--hb-ink); background: transparent; text-decoration: none;
  font: 700 18px/1 var(--hb-head); letter-spacing: .03em; text-transform: uppercase; transition: background-color .12s, color .12s;
}
.hb-btn:hover { background: var(--hb-ink); color: var(--hb-paper); }
.hb-btn--red { background: var(--hb-red); border-color: var(--hb-red); color: #fff; }
.hb-btn--red:hover { background: var(--hb-ink); border-color: var(--hb-ink); color: var(--hb-paper); }
.hb-marks { position: relative; }
.hb-marks::after {
  content: ""; position: absolute; inset: -13px; pointer-events: none;
  background:
    linear-gradient(currentColor, currentColor) 0 12px / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 0 / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 12px / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 12px) 0 / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 0 calc(100% - 12px) / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 12px 100% / 1px 9px no-repeat,
    linear-gradient(currentColor, currentColor) 100% calc(100% - 12px) / 9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 12px) 100% / 1px 9px no-repeat;
}

/* --------------------------------------------------------------------------
   Muro de portadas
   -------------------------------------------------------------------------- */
.hb-muro { position: relative; overflow: hidden; background: var(--hb-ink); color: var(--hb-paper); }
.hb-muro[data-mode="pan"] { height: calc(100vh - var(--hb-banner, 0px)); height: calc(100svh - var(--hb-banner, 0px)); min-height: 620px; max-height: 1200px; }
.hb-muro__stage { position: relative; }
.hb-muro[data-mode="pan"] .hb-muro__stage { position: absolute; inset: 0; overflow: hidden; cursor: crosshair; }
.hb-muro__wall { --cols: 6; --cw: 100px; --gap: 6px; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); padding: 6px 6px calc(6px + var(--opad, 0px)); }
.hb-muro[data-mode="pan"] .hb-muro__wall { --gap: 8px; --cw: clamp(170px, 14.5vw, 232px); position: absolute; left: 0; top: 0; width: max-content; padding: 8px 8px calc(8px + var(--opad, 0px)); grid-template-columns: repeat(var(--cols), var(--cw)); will-change: transform; }
.hb-muro__wall li { position: relative; transform: translateY(var(--o, 0px)); }
.hb-cv { position: relative; display: block; aspect-ratio: 600 / 780; background: #2A2827; text-decoration: none; }
.hb-cv img { width: 100%; height: 100%; object-fit: cover; }
.hb-cv:hover, .hb-cv:focus-visible { z-index: 3; outline: 4px solid var(--hb-red); outline-offset: 0; }
.hb-muro[data-mode="pan"] .hb-cv img { filter: grayscale(1) contrast(1.08) brightness(1.04); transition: filter .25s; }
.hb-muro[data-mode="pan"] .hb-cv:hover img, .hb-muro[data-mode="pan"] .hb-cv:focus-visible img { filter: none; }
.hb-cv__n { position: absolute; left: 0; bottom: 0; background: var(--hb-ink); color: var(--hb-paper); font: 400 11px/1.4 var(--hb-mono); padding: 2px 6px; }
.hb-muro[data-mode="fit"] .hb-cv__n { font-size: 9px; padding: 1px 4px; }
.hb-hueco { aspect-ratio: 600 / 780; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; border: 1px dashed #66605F; background: repeating-linear-gradient(135deg, #262423 0 10px, var(--hb-ink) 10px 20px); font: 400 12px/1.3 var(--hb-mono); color: var(--hb-mute-ink); }
.hb-hueco b { font: 400 44px/.9 var(--hb-display); color: var(--hb-paper); }
.hb-muro[data-mode="fit"] .hb-hueco { padding: 4px; }
.hb-muro[data-mode="fit"] .hb-hueco b { font-size: 20px; }
.hb-muro[data-mode="fit"] .hb-hueco span { display: none; }

/* El número sobreimpreso en tinta directa */
.hb-muro__51 {
  position: absolute; z-index: 4; right: 2.5vw; top: 50%; transform: translateY(-50%); pointer-events: none; mix-blend-mode: hard-light;
  display: flex; align-items: flex-start; gap: .04em; color: var(--hb-red);
  font: 400 min(80vh, 50vw)/.8 var(--hb-display); letter-spacing: -.02em;
}
.hb-muro__51 small { font: inherit; font-size: .12em; line-height: .9; writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .04em; margin-top: .06em; }
.hb-muro[data-mode="fit"] .hb-muro__51 { top: 0; right: 3vw; transform: translateY(3vw); font-size: 60vw; }
@media (min-width: 700px) { .hb-muro[data-mode="fit"] .hb-muro__51 { font-size: min(56vw, 600px); } }

.hb-muro__label { position: absolute; z-index: 6; left: var(--hb-pad); bottom: var(--hb-pad); width: min(560px, calc(100% - 2 * var(--hb-pad))); padding: 22px 24px 24px; background: var(--hb-paper); color: var(--hb-ink); }
.hb-muro__label.hb-marks::after { color: var(--hb-paper); }
.hb-muro__label .hb-kick { color: var(--hb-mute); }
.hb-muro__label h1 { font: 400 clamp(52px, 5.4vw, 88px)/.9 var(--hb-display); text-transform: uppercase; letter-spacing: 0; margin: 10px 0 14px; }
.hb-muro__label h1 .hb-pre { display: block; font-size: .36em; line-height: 1; margin-bottom: .12em; letter-spacing: .02em; }
.hb-muro__label h1 .hb-red { color: var(--hb-red); }
.hb-muro__txt { font: 400 18px/1.42 var(--hb-text); max-width: 30em; }
.hb-muro__label .hb-btns { margin-top: 18px; }
.hb-muro__mini { position: absolute; z-index: 6; right: var(--hb-pad); bottom: var(--hb-pad); padding: 8px 10px 10px; border: 1px solid var(--hb-line-ink); background: var(--hb-ink); color: var(--hb-mute-ink); font: 400 11px/1.3 var(--hb-mono); letter-spacing: .05em; text-transform: uppercase; }
.hb-muro__mini-box { position: relative; width: 150px; height: 66px; margin-top: 6px; background: repeating-linear-gradient(90deg, #353331 0 10px, #232120 10px 11.5px); }
.hb-muro__mini-view { position: absolute; left: 0; top: 0; border: 2px solid var(--hb-red); }
.hb-muro__hint { position: absolute; z-index: 6; top: 16px; right: var(--hb-pad); padding: 6px 10px; background: var(--hb-paper); color: var(--hb-ink); font: 400 12px/1.3 var(--hb-mono); letter-spacing: .04em; text-transform: uppercase; }
.hb-muro[data-mode="fit"] .hb-muro__mini, .hb-muro[data-mode="fit"] .hb-muro__hint { display: none; }
.hb-muro[data-mode="fit"] .hb-muro__label { position: relative; left: auto; bottom: auto; width: auto; margin: 6px var(--hb-pad) var(--hb-pad); }
@media (min-width: 700px) { .hb-muro[data-mode="fit"] .hb-muro__label { width: min(620px, calc(100% - 2 * var(--hb-pad))); margin-top: -12px; } }

/* Tira de control de imprenta */
.hb-tira { display: flex; height: 30px; overflow: hidden; border-bottom: 1px solid var(--hb-ink); background: var(--hb-paper); font: 400 10px/1 var(--hb-mono); letter-spacing: .08em; text-transform: uppercase; }
.hb-tira span { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; border-right: 1px solid var(--hb-ink); }
.hb-tira .hb-k100 { background: var(--hb-ink); color: #fff; }
.hb-tira .hb-k80 { background: #444240; color: #fff; }
.hb-tira .hb-k60 { background: #6E6B69; color: #fff; }
.hb-tira .hb-k40 { background: #A19E9C; color: var(--hb-ink); }
.hb-tira .hb-k20 { background: #D0CECC; color: var(--hb-ink); }
.hb-tira .hb-rr { background: var(--hb-red); color: #fff; }
.hb-tira .hb-grow { flex: 1; justify-content: flex-end; border-right: 0; color: var(--hb-mute); }
@media (max-width: 640px) { .hb-tira .hb-k60, .hb-tira .hb-k40, .hb-tira .hb-k20 { display: none; } }

/* Visor que sigue al cursor */
.hb-peek { position: fixed; left: 0; top: 0; z-index: 90; width: 260px; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity .12s linear; background: var(--hb-ink); color: var(--hb-paper); box-shadow: 10px 10px 0 var(--hb-red); }
.hb-peek.is-on { opacity: 1; }
.hb-peek img { width: 100%; aspect-ratio: 600 / 780; object-fit: cover; background: #2A2827; }
.hb-peek__cap { display: grid; gap: 2px; padding: 10px 12px 12px; }
.hb-peek__n { font: 400 42px/.95 var(--hb-display); color: var(--hb-red); }
.hb-peek__t { font: 700 19px/1.05 var(--hb-head); text-transform: uppercase; }
.hb-peek__m { font: 400 11px/1.4 var(--hb-mono); color: var(--hb-mute-ink); letter-spacing: .04em; text-transform: uppercase; }
@media (hover: none), (max-width: 1023px) { .hb-peek { display: none; } }

/* --------------------------------------------------------------------------
   Las cinco portadas: nº 52 + cuatro gratuitas
   -------------------------------------------------------------------------- */
.hb-e52 { overflow: hidden; padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 96px); }
.hb-e52__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: start; }
.hb-e52__cover { grid-column: 1 / span 5; position: relative; margin-left: calc(-1 * var(--hb-pad)); }
.hb-e52__cover a { display: block; }
.hb-e52__cover img { width: 100%; border: 1px solid var(--hb-ink); }
.hb-e52__sticker { position: absolute; bottom: 28px; left: calc(var(--hb-pad) - 10px); padding: 8px 14px 6px; background: var(--hb-red); color: #fff; font: 400 40px/1 var(--hb-display); text-transform: uppercase; pointer-events: none; }
.hb-e52__body { grid-column: 6 / span 7; position: relative; z-index: 2; }
.hb-e52__title { margin-left: calc(-1 * clamp(8px, 2vw, 36px)); font: 400 clamp(72px, 10.4vw, 184px)/.84 var(--hb-display); text-transform: uppercase; letter-spacing: -.01em; }
.hb-e52__title span { display: block; }
.hb-e52__title .hb-ov { color: var(--hb-red); mix-blend-mode: multiply; }
.hb-e52__line { margin: 26px 0 22px; max-width: 24em; font: italic 400 clamp(21px, 2vw, 30px)/1.25 var(--hb-text); }
.hb-ficha { display: grid; grid-template-columns: max-content 1fr; max-width: 600px; border-top: 2px solid var(--hb-ink); }
.hb-ficha dt, .hb-ficha dd { padding: 9px 0; border-bottom: 1px solid var(--hb-ink); }
.hb-ficha dt { padding-right: 24px; font: 500 12px/1.6 var(--hb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--hb-mute); }
.hb-ficha dd { font: 700 19px/1.2 var(--hb-head); text-transform: uppercase; }
.hb-e52__body .hb-btns { margin-top: 26px; }
.hb-gratis { margin-top: clamp(40px, 5vw, 72px); border-top: 3px solid var(--hb-ink); padding-top: 12px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; }
.hb-gratis__t { font: 400 17px/1.4 var(--hb-text); }
.hb-gratis__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hb-gratis__row a { display: block; text-decoration: none; }
.hb-gratis__row img { width: 100%; aspect-ratio: 600 / 780; object-fit: cover; border: 1px solid var(--hb-ink); }
.hb-gratis__row span { display: block; margin-top: 6px; font: 400 12px/1.4 var(--hb-mono); letter-spacing: .03em; text-transform: uppercase; }
.hb-gratis__row a:hover span { color: var(--hb-red-ink); text-decoration: underline; }

@media (max-width: 900px) {
  .hb-e52__cover { grid-column: 1 / span 7; }
  .hb-e52__body { grid-column: 1 / -1; margin-top: -60px; }
  .hb-e52__title { margin-left: 0; font-size: clamp(64px, 15vw, 150px); }
  .hb-gratis { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hb-e52__cover { grid-column: 1 / span 11; }
  .hb-e52__body { margin-top: 18px; }
  .hb-e52__sticker { top: 14px; right: -10px; bottom: auto; left: auto; font-size: 30px; }
  .hb-gratis__row { gap: 10px; }
  .hb-gratis__row span { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Tarifario de membresías (contenido de membresias.js, estilo de esta portada)
   -------------------------------------------------------------------------- */
.hb-tarifa { overflow: hidden; padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 5vw, 72px); }
.hb-tarifa__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(24px, 3vw, 44px); }
.hb-tarifa__t { grid-column: 1 / span 7; font: 400 clamp(64px, 9.4vw, 172px)/.82 var(--hb-display); text-transform: uppercase; }
.hb-tarifa__lede { grid-column: 8 / span 5; font: 400 clamp(18px, 1.5vw, 22px)/1.45 var(--hb-text); }
.hb-tarifa__fallback { font: 400 18px/1.5 var(--hb-text); border-top: 3px solid var(--hb-ink); padding-top: 16px; }
.hb-tarifa__fallback a { color: var(--hb-red-ink); }

/* Las franjas crecen con el nivel: Gratis en papel, Miembro en tinta, Destacado (Recomendado) en rojo; Aliado y Patrocinador,
   de venta directa, vuelven a papel con un filo de tinta arriba: se distinguen sin gritar. */
.hb-tarifa__mod .mb-tar { border-top: 3px solid var(--hb-ink); }
.hb-tarifa__mod .mb-tar__row {
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 14px clamp(16px, 2vw, 32px);
  padding: 22px clamp(16px, 2.2vw, 32px); margin: 0; border-bottom: 1px solid var(--hb-ink); background: var(--hb-paper); align-items: center;
}
.hb-tarifa__mod .mb-tar__row--miembro { background: var(--hb-ink); color: var(--hb-paper); padding-top: 38px; padding-bottom: 38px; border-color: var(--hb-ink); }
.hb-tarifa__mod .mb-tar__row--destacado { background: var(--hb-red); color: #fff; padding-top: 60px; padding-bottom: 60px; border-color: var(--hb-red); }
.hb-tarifa__mod .mb-tar__head h3 { font: 400 clamp(44px, 5vw, 88px)/.86 var(--hb-display); text-transform: uppercase; margin: 0 0 8px; }
.hb-tarifa__mod .mb-tar__row--destacado .mb-tar__head h3 { font-size: clamp(52px, 6vw, 108px); }
.hb-tarifa__mod .mb-tar__lema { font: 500 12px/1.5 var(--hb-mono); letter-spacing: .05em; text-transform: uppercase; color: inherit; }
.hb-tarifa__mod .mb-tar__price { display: grid; gap: 6px; justify-items: start; }
.hb-tarifa__mod .mb-price { font: 400 clamp(48px, 5.6vw, 100px)/.84 var(--hb-display); letter-spacing: -.01em; }
.hb-tarifa__mod .mb-tar__row--destacado .mb-price { font-size: clamp(56px, 7vw, 128px); }
.hb-tarifa__mod .mb-tar__price small { font: 500 12px/1.3 var(--hb-mono); letter-spacing: .05em; text-transform: uppercase; color: inherit; }
.hb-tarifa__mod .mb-tar__row--gratis .mb-tar__price small { color: var(--hb-mute); }
.hb-tarifa__mod .mb-tar__list { gap: 5px; font: 400 14px/1.45 var(--hb-mono); }
.hb-tarifa__mod .mb-tar__list li { padding-left: 1.3rem; }
.hb-tarifa__mod .mb-tar__list li::before { top: .45em; width: .55rem; height: .55rem; background: var(--hb-red); }
.hb-tarifa__mod .mb-tar__row--destacado .mb-tar__list li::before { background: var(--hb-ink); }
.hb-tarifa__mod .mb-tar__head { gap: 10px; }
.hb-tarifa__mod .mb-tag { font: 500 11px/1 var(--hb-mono); letter-spacing: .08em; padding: 5px 8px; color: inherit; }
.hb-tarifa__mod .mb-tag--rec { background: #fff; border-color: #fff; color: var(--hb-red-ink); font-weight: 700; }
.hb-tarifa__mod .mb-tar__mes { font: 500 12px/1.3 var(--hb-mono); letter-spacing: .05em; text-transform: uppercase; color: inherit; opacity: .85; }
.hb-tarifa__mod .mb-tar__row--directa { background: var(--hb-paper-2); border-top: 3px solid var(--hb-ink); border-bottom-color: var(--hb-ink); padding-top: 34px; padding-bottom: 34px; align-items: start; }
.hb-tarifa__mod .mb-tar__row--directa .mb-tar__head h3 { font-size: clamp(40px, 4.4vw, 76px); }
.hb-tarifa__mod .mb-tar__row--directa .mb-price { font-size: clamp(44px, 5vw, 88px); }
.hb-tarifa__mod .mb-tar__row--directa .mb-tar__price small { color: var(--hb-mute); }
.hb-tarifa__mod .mb-tar__row--directa .mb-tar__mes { color: var(--hb-mute); opacity: 1; }
/* Oferta nueva: etiqueta de precio de lanzamiento, kit de bienvenida (terminal Mercado Pago) y promoción de los primeros 10 */
.hb-tarifa__mod .mb-lanza { font: 500 11px/1 var(--hb-mono); letter-spacing: .1em; color: var(--hb-red-ink); }
.hb-tarifa__mod .mb-lanza::before { background: var(--hb-red); }
.hb-tarifa__mod .mb-tar__row--miembro .mb-lanza { color: #fff; }
.hb-tarifa__mod .mb-tar__row--miembro .mb-lanza::before { background: var(--hb-red); }
.hb-tarifa__mod .mb-tar__row--destacado .mb-lanza { color: #fff; }
.hb-tarifa__mod .mb-tar__row--destacado .mb-lanza::before { background: #fff; }
.hb-tarifa__mod .mb-regular { font: 500 clamp(16px, 1.6vw, 22px)/1 var(--hb-mono); color: inherit; opacity: .75; }
.hb-tarifa__mod .mb-tar__row--miembro .mb-ast, .hb-tarifa__mod .mb-tar__row--destacado .mb-ast { color: inherit; text-decoration: underline; }
.hb-tarifa__mod .mb-ast { color: var(--hb-red-ink); }
.hb-tarifa__mod .mb-kit { font: 500 13px/1.35 var(--hb-mono); border-left-color: var(--hb-red); }
.hb-tarifa__mod .mb-kit__t { font: 500 11px/1.2 var(--hb-mono); letter-spacing: .08em; color: var(--hb-red-ink); }
.hb-tarifa__mod .mb-kit__n { font: 500 13px/1.35 var(--hb-mono); }
.hb-tarifa__mod .mb-kit__ilus { font: 400 11px/1.2 var(--hb-mono); color: var(--hb-mute); }
.hb-tarifa__mod .mb-promo__t { font: 500 12px/1.3 var(--hb-mono); letter-spacing: .08em; }
.hb-tarifa__mod .mb-promo__list { font: 400 13.5px/1.45 var(--hb-mono); }
.hb-tarifa__mod .mb-tar__row--promo { border-top: 6px solid var(--hb-red); }
.hb-tarifa__mod .mb-tar__cta { margin-top: 6px; }
.hb-tarifa__mod .mb-foot { margin-top: 16px; font: 400 12px/1.6 var(--hb-mono); color: var(--hb-mute); max-width: 90ch; }
.hb-tarifa__cta { margin-top: 28px; }

@media (max-width: 900px) {
  .hb-tarifa__t, .hb-tarifa__lede { grid-column: 1 / -1; }
  .hb-tarifa__lede { margin-top: 16px; }
  .hb-tarifa__mod .mb-tar__row { grid-template-columns: minmax(0, 1fr) auto; }
  .hb-tarifa__mod .mb-tar__body { grid-column: 1 / -1; }
  .hb-tarifa__mod .mb-tar__price { justify-items: end; text-align: right; }
  .hb-tarifa__mod .mb-tar__head { justify-items: start; text-align: left; }
  .hb-tarifa__mod .mb-tar__row--directa .mb-tar__price { grid-column: 1 / -1; justify-items: start; text-align: left; }
}
@media (max-width: 560px) {
  .hb-tarifa__mod .mb-tar__head h3, .hb-tarifa__mod .mb-tar__row--destacado .mb-tar__head h3 { font-size: clamp(36px, 10vw, 56px); }
  .hb-tarifa__mod .mb-price, .hb-tarifa__mod .mb-tar__row--destacado .mb-price, .hb-tarifa__mod .mb-tar__row--directa .mb-price { font-size: clamp(36px, 10vw, 56px); }
  .hb-tarifa__mod .mb-tar__row--directa .mb-tar__head h3 { font-size: clamp(32px, 9vw, 52px); }
  .hb-tarifa__mod .mb-tar__list { font-size: 13px; }
  .hb-tarifa__mod .mb-tar__price { min-width: 0; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hb-cv img, .hb-peek, .hb-btn, .hb-lomo__btn { transition: none !important; }
}

/* Las cinco ediciones más recientes, del mismo tamaño (sustituye a la edición en grande) */
.hb-ultimas { padding: clamp(40px, 6vw, 88px) 0; }
.hb-ultimas__t { margin: 14px 0 8px; font: 400 clamp(40px, 6vw, 88px)/.9 var(--hb-display); text-transform: uppercase; }
.hb-ultimas__s { margin-bottom: 22px; font: 400 17px/1.4 var(--hb-text); }
.hb-ultimas__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.hb-ultimas__row a { display: block; text-decoration: none; }
.hb-ultimas__row img { width: 100%; aspect-ratio: 600 / 780; object-fit: cover; border: 1px solid var(--hb-ink); }
.hb-ultimas__row span { display: block; margin-top: 6px; font: 400 12px/1.4 var(--hb-mono); letter-spacing: .03em; text-transform: uppercase; }
.hb-ultimas__row a:hover span { color: var(--hb-red-ink); text-decoration: underline; }
.hb-ultimas .hb-btns { margin-top: 28px; }
@media (max-width: 900px) { .hb-ultimas__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hb-ultimas__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hb-ultimas__row span { font-size: 11px; } }

/* ==========================================================================
   Revisión de diseño (octubre 2026): más carácter editorial en el híbrido.
   Solo sobreescribe reglas de este archivo o añade piezas; los tokens de rdn.css
   no cambian. Transiciones sobrias de 150 a 250 ms; sin rebotes.
   ========================================================================== */

/* --- Riel lateral: el lomo con guía de corte y navegación en condensada --- */
.hb-lomo::before {
  content: ""; position: absolute; right: 0; top: 214px; bottom: 0; width: 7px; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 12px) right 0 top 0 / 3px 100% no-repeat,
    repeating-linear-gradient(180deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 60px) right 0 top 0 / 7px 100% no-repeat;
}
.hb-lomo__nav a { font: 700 13px/1 var(--hb-head); letter-spacing: .2em; color: #D9D2D2; padding: 10px 0; transition: color .18s var(--ease, ease); }
.hb-lomo__nav a:hover { color: #fff; }
.hb-lomo__nav .hb-lomo__red { color: #fff; font-weight: 800; }
.hb-lomo__btn, .hb-lomo__cart { transition: background-color .18s, color .18s; }

/* --- Muro: viñeta de tinta, portadas con profundidad real al pasar el cursor --- */
.hb-muro[data-mode="pan"] .hb-muro__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(29 29 27 / 0.55) 0%, transparent 26%, transparent 58%, rgb(29 29 27 / 0.72) 100%),
    linear-gradient(90deg, rgb(29 29 27 / 0.45) 0%, transparent 30%);
  transition: opacity .25s var(--ease, ease);
}
.hb-muro[data-mode="pan"] .hb-muro__stage:hover::after { opacity: .45; }
.hb-muro[data-mode="pan"] .hb-cv { transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease); }
.hb-muro[data-mode="pan"] .hb-cv:hover,
.hb-muro[data-mode="pan"] .hb-cv:focus-visible {
  transform: translateY(-6px) scale(1.045);
  box-shadow: 0 30px 40px -14px rgb(0 0 0 / 0.92), 0 2px 0 rgb(0 0 0 / 0.6);
}
.hb-muro[data-mode="pan"] .hb-cv:hover .hb-cv__n,
.hb-muro[data-mode="pan"] .hb-cv:focus-visible .hb-cv__n { background: var(--hb-red); }
.hb-cv__n { transition: background-color .18s; }
.hb-muro[data-mode="fit"] .hb-cv:hover img, .hb-muro[data-mode="fit"] .hb-cv:focus-visible img { filter: none; }

/* La ficha de portada: filete rojo arriba, titular a mayor escala */
.hb-muro__label { border-top: 6px solid var(--hb-red); padding: 18px 26px 26px; width: min(640px, calc(100% - 2 * var(--hb-pad))); }
.hb-muro__label h1 { font-size: clamp(52px, 6.2vw, 100px); margin: 8px 0 14px; }
.hb-muro__label h1 .hb-pre { font-size: .3em; letter-spacing: .08em; margin-bottom: .18em; }
.hb-muro__label .hb-kick { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.hb-muro__hint { border-left: 4px solid var(--hb-red); }
.hb-muro__mini { border-color: #55514A; }

/* Secuencia de entrada única: la pared se revela, luego la ficha, luego el número */
@keyframes hb-fade { from { opacity: 0; } }
.hb-muro__wall { animation: hb-fade 900ms var(--ease, ease) both; }
.hb-muro__label { animation: rise 720ms var(--ease, ease) 220ms both; }
.hb-muro__51 { animation: hb-fade 700ms var(--ease, ease) 420ms both; }
.hb-muro__hint, .hb-muro__mini { animation: hb-fade 500ms var(--ease, ease) 700ms both; }

/* --- Botones de la portada: desplazamiento de 2 px y sombra dura roja --- */
.hb-btn {
  transition: background-color .18s var(--ease, ease), color .18s var(--ease, ease), border-color .18s var(--ease, ease),
              box-shadow .18s var(--ease, ease), transform .18s var(--ease, ease);
}
.hb-btn:hover, .hb-btn:focus-visible { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--hb-red); }
.hb-btn--red:hover, .hb-btn--red:focus-visible { background: var(--hb-ink); border-color: var(--hb-ink); box-shadow: 4px 4px 0 var(--hb-red); }
.hb-btn:active { transform: translate(0, 0); box-shadow: none; }

/* --- Las cinco ediciones: número de edición como sello, portada con sombra de papel --- */
.hb-ultimas { padding-bottom: clamp(48px, 6vw, 96px); }
.hb-ultimas__t { margin: 10px 0 10px; font-size: clamp(44px, 6.6vw, 104px); letter-spacing: -.005em; }
.hb-ultimas__s { font-size: 18px; color: var(--hb-mute); margin-bottom: 28px; }
.hb-ultimas__row { counter-reset: hb-ed 53; gap: clamp(14px, 2vw, 28px); padding-top: clamp(30px, 2.6vw, 42px); }
/* Cuando la fila se parte (tableta y celular), la pestaña necesita aire respecto al pie de la fila anterior */
@media (max-width: 900px) { .hb-ultimas__row { row-gap: clamp(48px, 9vw, 64px); } }
.hb-ultimas__row li { counter-increment: hb-ed -1; position: relative; }
/* Pestaña con el número, por encima de la portada: la portada se ve completa, como pide la dirección de arte */
.hb-ultimas__row li::before {
  content: counter(hb-ed) / ""; position: absolute; z-index: 2; left: 0; bottom: 100%; pointer-events: none;
  padding: 6px 12px 4px; background: var(--hb-ink); color: #fff;
  font: 400 clamp(20px, 2vw, 32px)/1 var(--hb-display); letter-spacing: .01em;
  transition: transform .22s var(--ease, ease);
}
.hb-ultimas__row li:hover::before, .hb-ultimas__row li:focus-within::before { transform: translateY(-6px); }
.hb-ultimas__row li:first-child::before { background: var(--hb-red); }
.hb-ultimas__row img { box-shadow: var(--shadow-paper, 0 12px 20px -14px rgb(29 29 27 / .55)); transition: transform .22s var(--ease, ease), box-shadow .22s var(--ease, ease); }
.hb-ultimas__row a:hover img, .hb-ultimas__row a:focus-visible img {
  transform: translateY(-6px);
  box-shadow: 0 1px 1px rgb(29 29 27 / 0.2), 0 28px 34px -18px rgb(29 29 27 / 0.8);
}
.hb-ultimas__row a:focus-visible { outline-offset: 6px; }
.hb-ultimas__row span { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--hb-ink); }

/* --- Artículos y videos: filete de columna entre la nota principal y la pila --- */
@media (min-width: 900px) {
  .hb-page .rev-stack { border-left: 1px solid var(--hb-ink); padding-left: var(--gap, 24px); }
  .hb-page .rev-vlist { border-left: 1px solid rgb(255 255 255 / 0.3); padding-left: var(--gap, 24px); }
}
.hb-page .rev-news-grid .card-article--lead .card-article__title { font-size: clamp(2.25rem, 1.2rem + 3vw, 3.75rem); line-height: .95; }
.hb-page .rev-quote { background: var(--hb-paper-2); padding-top: var(--section); border-top: 1px solid var(--hb-ink); }
.hb-page .rev-pull { border-top-width: 10px; }

/* --- Red de Emprendedores: banda roja; el logotipo va sobre placa blanca --- */
.hb-page .rev-red-band { background: var(--hb-red); color: #fff; }
.hb-page .rev-red-band .rubric { border-top-color: #fff; margin-bottom: var(--sp-6, 24px); }
.hb-page .rev-red-band .folio { color: #FFD2DA; }
.hb-page .rev-red-band .rev-red__logo { background: #fff; padding: 16px 22px; box-shadow: 8px 8px 0 var(--hb-ink); width: min(100%, 420px); }
.hb-page .rev-red-band h2 { font-size: var(--fs-3xl); line-height: .95; color: #fff; }
.hb-page .rev-red-band h2 .t-red { color: var(--hb-ink); }
.hb-page .rev-red-band .dek { color: #fff; }
.hb-page .rev-red-band .check-list li { color: #fff; }
.hb-page .rev-red-band .check-list li::before { background: #fff; }
.hb-page .rev-red-band .btn--network { background: var(--hb-ink); border-color: var(--hb-ink); color: #fff; transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s; }
.hb-page .rev-red-band .btn--network:hover, .hb-page .rev-red-band .btn--network:focus-visible { background: #fff; border-color: #fff; color: var(--hb-ink); }
.hb-page .rev-red-band .link { color: #fff; text-decoration-color: #fff; font-weight: 600; }
.hb-page .rev-red-band .link:hover { color: var(--hb-ink); text-decoration-color: var(--hb-ink); }
.hb-page .rev-red-band :focus-visible { outline-color: #fff; }

/* --- Podcast y Anúnciate: franja de papel con rúbricas --- */
.hb-page .rev-ads__col .rubric { margin-bottom: var(--sp-3, 12px); }
.hb-page .rev-ads__col h2 { font-family: var(--hb-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-2xl); line-height: .95; }

/* --- Boletín: titular de revista, campo grande --- */
.hb-page .rev-news { border-top-width: 6px; }
.hb-page .rev-news h2 { font-size: var(--fs-2xl); }
.hb-page .rev-news .input { min-height: 56px; font-size: 1.0625rem; border-width: 3px; }
.hb-page .rev-news .btn--dark { min-height: 56px; }

/* --- Movimiento reducido: sin transformaciones ni secuencias --- */
@media (prefers-reduced-motion: reduce) {
  .hb-muro__wall, .hb-muro__label, .hb-muro__51, .hb-muro__hint, .hb-muro__mini { animation: none !important; }
  .hb-muro[data-mode="pan"] .hb-cv:hover, .hb-muro[data-mode="pan"] .hb-cv:focus-visible,
  .hb-ultimas__row a:hover img, .hb-ultimas__row a:focus-visible img,
  .hb-btn:hover, .hb-btn:focus-visible { transform: none; }
}

/* Comparador con palomitas en la portada (sustituye al tarifario en filas, 22 oct 2026). */
.hb-tarifa__mod .mb-table-wrap { border: 0; border-top: 3px solid var(--hb-ink); background: transparent; }
.hb-tarifa__mod .mb-table { font: 400 14px/1.45 var(--hb-mono); }
.hb-tarifa__mod .mb-table thead th { background: var(--hb-ink); color: var(--hb-paper); font: 400 clamp(18px, 1.6vw, 24px)/.9 var(--hb-display); letter-spacing: 0; padding-left: .6rem; padding-right: .6rem; overflow-wrap: anywhere; }
.hb-tarifa__mod .mb-table thead th small { font: 500 12px/1.4 var(--hb-mono); letter-spacing: .05em; text-transform: uppercase; margin-top: 6px; }
.hb-tarifa__mod .mb-table thead th.mb-col--recomendado { box-shadow: inset 0 6px 0 var(--hb-red); }
.hb-tarifa__mod .mb-table td.mb-col--recomendado { background: rgba(219, 6, 50, .06); }
.hb-tarifa__mod .mb-table tbody th { font: 400 14px/1.45 var(--hb-mono); }
.hb-tarifa__mod .mb-table tfoot th, .hb-tarifa__mod .mb-table tfoot td { background: var(--hb-paper-2, #f2eeee); }
.hb-tarifa__mod .mb-table .mb-si { color: var(--hb-red); font-size: 22px; }
.hb-tarifa__mod .mb-table .mb-no { color: var(--hb-mute); }