/* Gabriel Busso · gabrielbusso.com · Edición 2026–2027 · --marca gaby · V2
   Editorial Kinfolk × Monocle × Apple. Paleta propia: cero colores de Plant.
   Hoja única para index.html (web oficial), libros.html (/libros), privacidad.html (/privacidad) e instagram.html (revisión del perfil).
   V2: hero de mente a mente, sin métricas; el retrato silueteado (alfa, 1088 × 1360, 4:5) apoya sobre el filete que cierra el hero. */

:root, [data-theme="light"] {
  --bg: #FAF9F6; --card: #FFFFFF; --stone: #F2EFE9; --ink: #111116; --ink-2: #4A4A56;
  --line: #E2E0DA; --btn: #141419; --btn-ink: #FAF9F6;
  /* #9A7B56 en filetes; #6B4E2B en texto chico para contraste WCAG AA >= 6.2:1 sobre #FAF9F6 */
  --bronze-accent: #9A7B56; /* acento canónico del manual gaby: filetes y bordes decorativos (.cap__excerpt, :focus-visible) */
  --bronze: #6B4E2B;        /* token de texto bronce AA: rótulos, notas de precio y cursiva del H1 */
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0B0B0E; --card: #14141B; --stone: #1C1C24; --ink: #F4F2EC; --ink-2: #B5B2AA;
  /* --bronze Noche #DEC092: > 10:1 sobre #0B0B0E, #111116 y #14141B; 9,6:1 a 10,5:1 sobre el degradé #221D17 → #171513 (Capítulo 1 en Noche): notas y rótulos chicos con contraste holgado */
  --line: #262632; --bronze: #DEC092; --btn: #F4F2EC; --btn-ink: #0B0B0E;
  color-scheme: dark;
}
:root {
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --r: 6px; --head: 64px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
/* <picture> sin caja propia: la <img> (WebP con alfa · respaldo PNG) se mide contra su contenedor como si fuera hija directa */
.hero__portrait picture, .avatar picture, .pin__media picture, .card__media picture { display: contents; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bronze-accent); outline-offset: 3px; }
#main:focus { outline: none; }
section[id] { scroll-margin-top: calc(var(--head) + 28px); }
.num, .price { font-variant-numeric: tabular-nums lining-nums; }
.nw { white-space: nowrap; } /* «48–72 h» de Obras nunca se parte (las horas llevan además espacio de no separación) */
.sm-br { display: none; } /* utilidad: corte de renglón que sólo vale en móvil (≤ 768 px); en escritorio, 1 línea */
.plus { display: inline-block; transform: translateY(-0.05em); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: 14px; height: 14px; } /* flecha chica de las pastillas «Ediciones →» / «Inicio →» y Kindle: cero style inline en el HTML */
.vh, .seg .sep {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
.eyebrow { font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); }
.muted { color: var(--ink-2); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: var(--r); background: var(--btn); color: var(--btn-ink); }
.skip:focus { top: 12px; }

/* Cabecera de producción, sin barras de maqueta (R19.1): una fila de 64 px en escritorio; en móvil, dos renglones de la misma superficie sticky (54 + 38 px; 50 + 36 px desde 480 px) */
.top {
  position: sticky; top: 0; z-index: 40; height: var(--head); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
}
/* Laterales iguales y nav centrada; si «Ediciones» + Papel / Noche no entran en su mitad, cede la columna de la marca y nada se pisa */
.top__in { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 16px; height: 100%; }
.brand {
  justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 21px/1.2 var(--serif); letter-spacing: -.01em; text-decoration: none;
}
.nav { display: flex; align-self: stretch; gap: 4px; }
.nav a { position: relative; display: flex; align-items: center; padding: 0 12px; color: var(--ink-2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform .25s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.top__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* R5 · La nav lleva sólo anclas de la portada (Obras · Adelanto · Autor · Empresas); el salto a otra página es esta pastilla («Ediciones →» / «Inicio →», flecha interna: abre en la misma pestaña), en escritorio y móvil */
.top__link {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: color .2s, border-color .2s;
}
.top__link:hover { color: var(--ink); border-color: var(--ink-2); }
.theme {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.theme svg { transition: transform .4s ease; }
.theme .t-sep { opacity: .45; }
[data-theme="light"] .t-papel, [data-theme="dark"] .t-noche { color: var(--ink); }
[data-theme="dark"] .theme svg { transform: rotate(180deg); }

/* Controles: selector segmentado de celdas iguales (País + Tienda) */
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: 100%; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.seg button { position: relative; min-width: 0; padding: 8px 14px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font-size: 12px; line-height: 1.3; text-align: left; transition: background-color .2s, color .2s; }
.seg b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.seg small { display: block; font-size: 12.5px; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.seg button[aria-pressed="true"] b { color: inherit; }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .2s ease, opacity .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--btn); color: var(--btn-ink); }
.btn--primary:hover { opacity: .88; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-2); }
.btn--sm { min-height: 36px; padding: 0 14px; gap: 8px; font-size: 13px; }
.btn[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; }
.price { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.note, .offer__unit { font-size: 14px; color: var(--bronze); } /* notas bronce de precio: 14 px en escritorio y 14,5 px en móvil (≤ 480 px), nunca microtipografía junto al precio de 20 px */
.price-row .note, .buyline .note { font-size: 14px; line-height: 1.45; } /* ninguna media query lo baja: 14 px / 1.45 en escritorio; 14,5 px / 1.45 en móvil (≤ 480 px) */
/* Cambio de país: precio, nota, rótulos y textos de CTA entran con un fundido de opacidad de 180 ms (app.js · swapGeo).
   Los links [data-f="href"] sólo cambian de destino (su texto vive en un [data-p] interno), así el botón no parpadea */
[data-p]:not([data-f="href"]) { transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.is-geo-swap [data-p]:not([data-f="href"]) { opacity: 0; transition: none; }

/* Imágenes con respaldo si falta el archivo */
.media { position: relative; }
.media.is-missing img { visibility: hidden; }
.media.is-missing::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; font: 400 18px/1.2 var(--serif); color: var(--ink-2); text-align: center; }

/* Web oficial · Hero V2, de mente a mente y sin métricas: copy (.hero__head = rótulo + H1 · .hero__rest = bajada, selector,
   precio y CTAs) + retrato silueteado con canal alfa. Lo cierra un filete arquitectónico de 1 px: la base sólida del torso apoya
   al píxel sobre él (ni .hero ni el retrato llevan padding-bottom) y el copy respira encima con el suyo */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(24px, 4vw, 52px);
  align-items: end; padding-top: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line);
}
.hero__copy { min-width: 0; padding-bottom: clamp(36px, 4.5vw, 56px); text-align: left; }
.hero h1 { margin: 18px 0 22px; font: 400 clamp(42px, 5.2vw, 68px)/.98 var(--serif); letter-spacing: -.03em; text-wrap: balance; overflow-wrap: break-word; }
.hero h1 em { font-style: italic; color: var(--bronze); }
.lede { max-width: 38ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hero .seg { margin-top: 32px; }
.buyline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Silueta libre, sin caja: fondo transparente, sin radio ni recorte (overflow: visible) y sin filtros (el B&N de estudio ya viene
   descontaminado: nada de contrast()). contain + bottom center: la coronilla nunca se corta y el pie del busto cae exacto sobre el
   filete (align-self: end). A 1440 px el busto 4:5 se dibuja en 448 × 560 px, equilibrando la doble página editorial con el copy */
.hero__portrait {
  align-self: end; justify-self: center; width: 100%; max-height: 560px; aspect-ratio: 4 / 5; margin: 0; padding: 0;
  overflow: visible; border-radius: 0; background: transparent;
}
.hero__portrait img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; object-position: bottom center; filter: none; }
/* Noche: la remera negra se funde en el carbono #0B0B0E al pie del retrato. En Papel, nunca: el degradé alfa dejaría una banda gris en el pecho */
[data-theme="dark"] .hero__portrait img {
  -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
}

/* Secciones y tarjetas */
.sec { padding-top: clamp(56px, 8vw, 104px); }
/* Título + subtítulo apilados a la izquierda; la pastilla Kindle vive al pie de la grilla (.obras__foot), nunca flota sola junto al título */
.sec__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 32px; }
.sec__head > div { display: grid; gap: 10px; min-width: 0; } /* sin flex-basis: en columna fijaría el alto, no el ancho */
.sec__head .muted { max-width: 80ch; text-wrap: pretty; } /* subtítulo de Obras entero en una sola línea en escritorio, cero viuda */
.sec h2, .block h2 { font: 400 clamp(30px, 3.6vw, 46px)/1.06 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
/* Media de Obras: pliego del tema (--stone: #F2EFE9 en Papel · #16161D en Noche, nunca encandila), continuo de borde a borde en
   los lados y el tope de la tarjeta. Los renders 3D son PNG con fondo 100 % transparente: se apoyan directo sobre el pliego, sin mix-blend-mode */
.card__media {
  flex: none; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  aspect-ratio: 4 / 5; padding: 20px; overflow: hidden; background: var(--stone); border-bottom: 1px solid var(--line);
}
[data-theme="dark"] .card__media { --stone: #16161D; } /* Noche: apenas sobre la tarjeta (#14141B); el --stone global (#1C1C24) sigue para tiles y destacadas */
.card__media img { width: 100%; height: 100%; object-fit: contain; }
/* «Ver tapa plana 2026» (pliego plano smv-tapa-2026.jpg): encuadre limpio con sombra sutil; en Noche, un punto más tenue y con sombra más honda.
   El control vive en .desc, fuera de la figura: el :has() se lee desde la tarjeta */
.card:has([data-view="tapa"]) .card__media img { filter: drop-shadow(0 14px 28px rgba(0,0,0,.18)); }
[data-theme="dark"] .card:has([data-view="tapa"]) .card__media img { filter: brightness(.94) drop-shadow(0 18px 32px rgba(0,0,0,.5)); }
.card__media img[src*="pack-duo"] { transform: scale(1.09); } /* escala óptica con aire perimetral limpio >= 20 px */
.card__body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 24px; }
.card h3 { font: 400 26px/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.desc { font-size: 15px; color: var(--ink-2); }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 4px; }
/* Obras: la nota siempre en su propio renglón, debajo del precio, en AR, ES y US: las 3 tarjetas con el mismo ritmo y los 3 botones al pie (.card__cta, margin-top: auto) */
.card .price-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; }
.card__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 12px; }
.card__cta .btn { max-width: 100%; white-space: normal; text-align: center; }
/* Tapa 3D / tapa plana 2026: control liviano de texto al final de .desc de la tarjeta 2, fuera de la figura (las tres figuras, limpias y gemelas).
   Caja de 36 px de alto con margen vertical de -7 px: el renglón de 15 px / 1.55 no crece y la línea base compartida de .grid-3 (subgrid)
   no se mueve; ::after suma 8 px por lado de área táctil (52 px de alto) */
.inline-toggle {
  position: relative; display: inline-flex; align-items: center; min-height: 36px; margin-block: -7px; padding: 0;
  border: 0; background: none; color: var(--ink); font-weight: 500; white-space: nowrap;
  text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--bronze-accent); text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.inline-toggle::after { content: ""; position: absolute; inset: -8px; }
.inline-toggle:hover { text-decoration-color: currentColor; }
.inline-toggle:focus-visible { outline-offset: -4px; border-radius: 4px; } /* anillo de foco ceñido al renglón, sin pisar el de arriba */
/* Línea base compartida: rótulo, título, texto, precio y botón alineados entre las 3 tarjetas */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 769px) {
    .grid-3 { row-gap: 10px; }
    .card { display: grid; grid-row: span 6; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
    .card__body { grid-row: span 5; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-content: start; padding-top: 14px; }
  }
}
/* ES · US: sin la tarjeta del Pack Dúo (app.js · #card-duo), las dos obras reales de Amazon reparten el 100 % del contenedor
   en 2 columnas (cero tercio vacío a la derecha); la media queda fija en 420 px de alto, así las tapas no crecen a pósters,
   con la misma línea base (subgrid). En móvil la grilla ya es de 1 columna */
@media (min-width: 769px) {
  [data-geo="es"] .grid-3, [data-geo="us"] .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-geo="es"] .card__media, [data-geo="us"] .card__media { aspect-ratio: auto; height: 356px; }
}
/* Kindle al pie de la grilla de Obras: la alternativa digital, pegada a los libros que reemplaza */
.obras__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 20px; font-size: 14px; color: var(--ink-2); }

/* Capítulo 1 + Autor (R14): bento de igual altura, sin data-bento-free. align-items: stretch y cada bloque al 100 % de su celda:
   las dos tarjetas miden lo mismo al píxel. El contenido está equilibrado (bajada sin cita en #capitulo-1 · en la tarjeta del Autor,
   quién escribe, sus credenciales .facts y la cita .fun__quote) y el cierre de cada una (formulario / logos, margin-top: auto) cae
   al pie, sin hueco en el medio */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; padding-top: clamp(56px, 8vw, 104px); }
.bento > .block { height: 100%; display: flex; flex-direction: column; }
.block { display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; min-width: 0; padding: clamp(24px, 3.4vw, 40px); text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.block--dark {
  --ink: #F4F2EC; --ink-2: #B5B2AA; --line: #2E2E3A; --card: #1C1C24; --bronze: #DEC092; --btn: #F4F2EC; --btn-ink: #0B0B0E;
  background: #111116; color: var(--ink); color-scheme: dark;
}
/* Noche: Capítulo 1 protagonista, bien distinto del #14141B neutro de la tarjeta del Autor: superficie cálida bronce-grafito (#221D17 → #171513),
   filete bronce al 55 % y luz interior de 1 px; nunca dos bloques gemelos */
[data-theme="dark"] .block--dark { background: linear-gradient(180deg, #221D17 0%, #171513 100%); border-color: rgba(212, 176, 123, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }
/* Capítulo 1 y Autor, misma estructura y mismo peso: rótulo, H2, bajada y cierre al pie (formulario / logos, margin-top: auto).
   Todo arranca arriba (flex-start, nunca space-between): los dos rótulos y los dos H2 comparten la misma línea al píxel.
   Autor: bajada + dos credenciales reales entre filetes (.facts), la cita (.fun__quote) y los logos al pie */
.block .form { margin-top: auto; padding-top: 8px; }
.block .logos { margin-top: auto; padding-top: 16px; }
.facts { display: grid; gap: 10px; padding-block: 14px; border-block: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.facts strong { color: var(--ink); font-weight: 500; } /* Plant® · Vívet S.R.L. en tinta plena: cero style inline en el HTML */
.cap__excerpt, .fun__note { padding-left: 14px; border-left: 2px solid var(--bronze-accent); font: italic 400 17px/1.45 var(--serif); color: var(--ink); }
.fun__quote { margin: 4px 0 0; font: italic 400 20px/1.35 var(--serif); color: var(--ink); text-wrap: balance; } /* Autor: cita entre .facts y los logos (balance: nunca una palabra sola en el último renglón) */
.levels {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding-block: 14px;
  border-block: 1px solid var(--line); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.levels em { font: italic 400 21px/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; } /* escritorio: email y botón en la misma fila */
.field { display: grid; gap: 6px; min-width: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font-size: 15px; letter-spacing: 0; text-transform: none;
}
.field input[aria-invalid="true"] { border-color: var(--bronze); }
.block--dark .field input::placeholder { color: rgba(244, 242, 236, .66); opacity: 1; } /* ≈ 7,2:1 sobre el campo #1C1C24: AA holgado */
.field select {
  appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B2AA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.form__status { grid-column: 1 / -1; }
.form__legal { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* Consentimiento expreso (RGPD art. 6.1.a · Ley 25.326): casilla requerida a todo el ancho, fija en la fila 2 de la grilla
   (debajo de email + botón en escritorio; entre los dos en móvil). En el DOM va antes del botón: se tabula email → casilla → enviar */
.form__consent { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; cursor: pointer; }
.form__consent span { font-size: 14px; line-height: 1.45; } /* consentimiento: 14 px / 1.45 en escritorio y 14,5 px / 1.45 en móvil (≤ 480 px); nota legal: 14 px / 1.45; nunca 12 px */
/* Casilla editorial a tono con el bloque oscuro de #capitulo-1: filete claro al 42 % y, marcada, relleno bronce con tilde #FAF9F6 */
.form__consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 2px 0 0;
  border: 1px solid rgba(244, 242, 236, .42); border-radius: 4px; background: rgba(255, 255, 255, .04);
  display: grid; place-content: center; cursor: pointer;
}
.form__consent input[type="checkbox"]:checked {
  background: var(--bronze-accent); border-color: var(--bronze-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FAF9F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.form__consent input[aria-invalid="true"] { outline: 2px solid var(--bronze); outline-offset: 2px; }
.form__consent a { color: var(--ink); text-underline-offset: 3px; }
.form__status { min-height: 1.5em; font-size: 14px; color: var(--bronze); }
/* Sin mensaje, el estado no ocupa fila ni gap en la grilla del formulario: #capitulo-1 calza al alto natural de la tarjeta del Autor, sin hueco (say() lo vuelve a mostrar) */
.form__status:empty { display: none; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.logo img { width: auto; height: 26px; }
.logo--vivet img { height: 31px; } /* balance óptico: +19 % sobre Plant® para que los dos wordmarks pesen igual */
.logo.is-missing img { display: none; }
.logo.is-missing::after { position: static; padding: 0; font-size: 16px; color: inherit; }
.logos__rule { align-self: center; width: 1px; height: 28px; background: var(--line); }
/* Plant® y Vívet: archivo oficial por tema (negro en Papel, blanco en Noche), sin filtros sobre el logo */
[data-theme="light"] .logo--dark, [data-theme="dark"] .logo--light { display: none; }
.offer { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: auto; padding: 24px; border-radius: var(--r); background: var(--stone); }
.offer > div { display: grid; gap: 6px; min-width: 0; }
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.offer__unit { font-weight: 500; text-wrap: balance; } /* tamaño y bronce: regla compartida con .note */
.offer .muted { text-wrap: pretty; } /* Pack Empresas: sin viuda en el último renglón */
/* Pack Empresas × 10 · franja propia de ancho completo debajo del bento (#empresas, ancla en la nav para RR. HH.):
   grilla de 2 columnas (copy flexible + botón a su ancho): a la izquierda rótulo + precio + unidad y una línea de propuesta;
   a la derecha, «Pedir propuesta», siempre a la derecha en AR, ES y US (nunca cae abajo por el largo del texto) */
.corp-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px;
  margin-top: 20px; padding: 24px 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.corp-strip__copy { display: grid; gap: 6px; min-width: 0; text-wrap: pretty; }
.corp-strip__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
/* Precio protagonista: sans 600 tabular unificado con todos los precios en cifras (R9); en ES y US («Propuesta a medida») pasa a serif editorial */
.corp-strip .price { font: 600 clamp(22px, 2.2vw, 26px)/1.1 var(--sans); letter-spacing: -.015em; font-variant-numeric: tabular-nums lining-nums; }
[data-geo="es"] .corp-strip .price, [data-geo="us"] .corp-strip .price { font: 400 clamp(24px, 2.4vw, 30px)/1.08 var(--serif); letter-spacing: -.02em; }
.corp-strip .offer__unit { font-size: 14.5px; }
/* Rótulo en su propio renglón, arriba del precio y la unidad: nunca queda perdido al lado del precio */
#emp-t.eyebrow { display: block; width: 100%; font-size: 12px; letter-spacing: .12em; margin-bottom: 4px; }

/* /libros · hub de un clic que reemplaza a Linktree en la bio */
.hub, .ig { max-width: 560px; padding-top: 40px; }
.hub { text-align: center; }
/* Avatares (/libros e Instagram): retrato silueteado con alfa sobre un círculo de piedra con luz suave a la altura del rostro;
   en Noche, grafito que nunca encandila. Sin filtros: el B&N ya viene de estudio */
.avatar {
  position: relative; flex: none; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #EFECE5 0%, #E3DFD6 100%);
}
[data-theme="dark"] .avatar { background: radial-gradient(circle at 50% 35%, #24242F 0%, #16161D 100%); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: none; }
.avatar--hub { width: 112px; height: 112px; margin: 0 auto 16px; }
.hub__name { font: 400 32px/1.1 var(--serif); letter-spacing: -.01em; }
.hub__name + .muted { margin-top: 6px; }
.hub .seg { margin: 24px 0 28px; }
.hub .seg button { min-width: 64px; text-align: center; }
.hub__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; text-align: left; }
.tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-align: left; text-decoration: none; transition: border-color .2s, transform .2s; }
.tile:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.tile .tile__ic { width: 36px; height: 36px; padding: 9px; border-radius: 50%; background: var(--stone); }
.tile__txt { display: grid; gap: 3px; min-width: 0; }
.tile__txt b { font: 500 17px/1.2 var(--serif); letter-spacing: -.01em; }
.tile__txt span { font-size: 13px; color: var(--ink-2); }
.tile__go { width: 16px; height: 16px; margin-left: auto; color: var(--ink-2); transition: transform .2s ease, color .2s ease; }
.tile:hover .tile__go { color: var(--ink); transform: translateX(2px); }
.tile[target]:hover .tile__go { transform: translate(1px, -1px); }

/* Instagram · entregable de revisión del perfil */
.ig__kicker { margin-bottom: 20px; }
.ig__head { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; text-align: left; }
.avatar--ig { width: 96px; height: 96px; box-shadow: 0 0 0 1px var(--line); }
.avatar--ig img { transform: scale(1.18); transform-origin: 50% 22%; } /* escala suave: el rostro gana presencia y la coronilla queda entera */
.ig__id { display: grid; gap: 4px; min-width: 0; }
.ig__handle { font: 600 20px/1.2 var(--sans); }
.ig__meta { font-size: 14px; color: var(--ink-2); }
.seg--bio { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.seg.seg--bio small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bio { margin-top: 12px; padding: 20px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.bio__text { min-height: 4.5em; font-size: 15px; line-height: 1.5; white-space: pre-line; text-wrap: pretty; }
.bio__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--bronze); font-size: 14px; font-weight: 500; text-decoration: none; }
.bio__link .bio__go { width: 14px; height: 14px; transition: transform .2s ease; }
.bio__link:hover .bio__go { transform: translateX(2px); }
.bio__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.hl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 28px 0; }
.hl li { display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; font-size: 12px; color: var(--ink-2); text-align: center; }
.hl__c { display: grid; place-items: center; width: 64px; max-width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--stone); color: var(--ink); }
.hl__c .i { width: 24px; height: 24px; }
.pins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.pin { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.pin__media { position: relative; flex: none; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.pin__media img { width: 100%; height: 100%; object-fit: cover; }
.pin__mark {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink);
}
.pin__mark .i { width: 14px; height: 14px; }
.pin__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 14px; border-top: 1px solid var(--line); background: var(--card); color: var(--ink); }
.pin__t { font: 400 17px/1.2 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.pin__body small { margin-top: auto; font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
/* Fijado 01 · póster editorial B&N: la silueta apoya en el pie del pliego carbón, con la coronilla entera y sin filtros */
.pin--ink .pin__media { background: #121217; }
.pin--ink img { object-fit: contain; object-position: bottom center; filter: none; }
.pin--stone .pin__media { background: #FFFFFF; }
.pin--stone img { object-fit: contain; }
.pin--bronze .pin__media { container-type: inline-size; display: grid; place-items: center; background: #6B4E2B; color: #F4F2EC; }
.pin__type { display: grid; justify-items: center; gap: 4px; font: italic 400 88px/.9 var(--serif); font-size: 48cqi; letter-spacing: -.02em; }
.pin__type span { font: 500 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* /privacidad · política de privacidad: columna de lectura de 640 px; cada apartado es una ficha (rótulo bronce + texto) entre filetes */
.legal { max-width: 640px; padding-top: clamp(32px, 5vw, 56px); }
.legal h1 { margin: 14px 0 16px; font: 400 clamp(34px, 4.4vw, 48px)/1.04 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.legal__lede { max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.legal__list { margin: 32px 0 0; border-top: 1px solid var(--line); }
.legal__list > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; gap: 6px 24px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.legal__list dt { font: 500 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.legal__list dd { margin: 0; font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.legal__list a { text-underline-offset: 3px; }
.legal__date { margin-top: 24px; font-size: 13px; color: var(--ink-2); }

/* Pie */
.foot { margin-top: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding: 28px 0 40px; font-size: 13px; color: var(--ink-2); }
/* Instagram + YouTube: cada link entero; si a 375 px no entran juntos, el segundo baja de renglón (nunca desborda) */
.foot__social { display: flex; flex-wrap: wrap; gap: 0 20px; min-width: 0; }
.foot__social a { display: inline-flex; align-items: center; gap: 4px; padding-block: 4px; text-decoration: none; white-space: nowrap; transition: color .2s; }
.foot__social a:hover { color: var(--ink); }
.foot__social .i { width: 14px; height: 14px; }
/* «Privacidad», en la línea de la marca: mismo hover que las redes */
.foot__in > span a { text-underline-offset: 3px; transition: color .2s; }
.foot__in > span a:hover, .foot__in > span a[aria-current="page"] { color: var(--ink); }

@media (max-width: 1024px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  /* 769–1024 px: marca + nav + «Ediciones →» + Papel / Noche en una fila, sin desborde desde 769 px */
  .nav a { padding: 0 9px; }
  .nav a::after { left: 9px; right: 9px; }
}
@media (max-width: 768px) {
  /* Cabecera móvil (R7), una sola superficie sticky en dos renglones. Arriba (54 px): marca + «Ediciones →» + Papel / Noche en una fila, con las dos pastillas gemelas de 44 px táctiles */
  /* Abajo (38 px): las anclas de la nav a todo el ancho, con su filete. grid-row: 2 la fija ahí: por autoplacement, al ocupar
     las dos columnas, empujaría las pastillas a un tercer renglón */
  :root { --head: 96px; }
  .top { height: auto; }
  .top__in { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 54px 38px; column-gap: 12px; row-gap: 0; height: auto; }
  .nav {
    display: flex; grid-column: 1 / -1; grid-row: 2; align-items: center; justify-content: space-between; gap: 8px; height: 38px;
    border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 0 4px; font-size: 13.5px; height: 100%; }
  /* La nav ahora recorta (overflow-x: auto): subrayado y anillo de foco van por dentro del link, enteros y sin scroll vertical de 1 px */
  .nav a::after { left: 4px; right: 4px; bottom: 0; }
  .nav a:focus-visible { outline-offset: -3px; }
  .brand { font-size: 19px; }
  .top__end { gap: 6px; }
  .top__link, .theme { min-height: 44px; height: 44px; padding: 0 10px; font-size: 12.5px; }
  .theme { gap: 4px; }
  .theme .i { width: 16px; height: 16px; }

  /* Primer pantallazo (R7 · V2), sin caja alrededor del rostro: fila 1 = retrato silueteado de 112 × 140 px (4:5 exacto) a la
     izquierda + rótulo y H1 a su derecha, los dos apoyados sobre un mismo filete divisorio de 1 px (borde del retrato + borde de
     .hero__head, columnas sin gap: una sola línea continua de lado a lado). Debajo, a ancho completo: bajada, selector, precio y
     CTAs, con 24 px de aire sobre el filete que cierra el hero. .hero__copy se disuelve (display: contents) para que .hero__head y
     .hero__rest sean celdas de la grilla; en escritorio sigue intacto */
  .hero { grid-template-columns: 112px minmax(0, 1fr); column-gap: 0; row-gap: 20px; padding-top: 16px; }
  .hero__copy { display: contents; }
  /* content-box: la imagen ocupa 112 × 140 px, 4:5 exactos (cero ribete subpíxel a los lados), y el filete de 1 px va debajo */
  .hero__portrait {
    grid-column: 1; grid-row: 1; align-self: end; justify-self: start;
    box-sizing: content-box; width: 112px; height: auto; max-height: none; aspect-ratio: 4 / 5;
    border-bottom: 1px solid var(--line);
  }
  .hero__portrait img { max-height: none; }
  /* Rótulo + H1 al pie de su celda, a 16 px del filete: el titular apoya sobre la misma línea que el torso */
  .hero__head {
    grid-column: 2; grid-row: 1; align-self: stretch; min-width: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 0 16px 16px; border-bottom: 1px solid var(--line);
  }
  .hero__head .eyebrow { text-wrap: balance; }
  .hero h1 { margin: 10px 0 0; font-size: clamp(36px, 10.3vw, 42px); }
  .hero__rest { grid-column: 1 / -1; min-width: 0; padding-bottom: 24px; }
  .hero .seg { margin-top: 24px; }
  .buyline { margin-top: 16px; }
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .actions .btn { min-width: 0; padding: 0 14px; gap: 8px; line-height: 1.2; text-align: center; white-space: normal; }
  .sm-br { display: inline; }

  .grid-3, .bento, .hub__grid { grid-template-columns: minmax(0, 1fr); }
  /* Obras en 1 columna (641–768 px, iPad vertical): media apaisada 16:10 con tope de 300 px, nunca un póster 4:5 de 900 px de alto */
  .card__media { aspect-ratio: 16 / 10; max-height: 300px; }
  .corp-strip { grid-template-columns: minmax(0, 1fr); align-items: stretch; } /* Pack Empresas: «Pedir propuesta» debajo de la propuesta */
  .hub, .ig { padding-top: 28px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .seg { display: grid; width: 100%; }
  .seg button { padding: 8px 10px; }
  .seg small { font-size: 12.5px; white-space: normal; }
  /* Capítulo 1: email y botón apilados en una columna (el retrato del hero queda en 112 × 140 px, 4:5, desde 768) */
  .form { grid-template-columns: minmax(0, 1fr); }
  /* Pack Empresas: rótulo, precio y propuesta arriba; debajo, «Pedir propuesta» a todo el ancho, como los CTAs del hero (1 columna desde 768) */
  .corp-strip { gap: 16px; padding: 20px; }
  .corp-strip .btn { width: 100%; }
  /* Pie: marca, redes y ciudad apiladas a la izquierda, con aire entre renglones: nada se aprieta ni queda colgado a la derecha */
  .foot__in { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Obras en iPhone: media 16:10 con tope de 220 px (208 px de alto a 375 · 217,5 px a 390): recorrer las 3 obras es ágil y el render entra entero */
  .card__media { aspect-ratio: 16 / 10; max-height: 220px; padding: 14px; }
  .card__media img { object-fit: contain; }
  .ig__head { gap: 16px; }
  .avatar--ig { width: 80px; height: 80px; }
  .hl { gap: 4px; }
  .hl li { font-size: 10.5px; }
  .pins { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pin__media { aspect-ratio: 1; }
  .pin__body { padding: 14px 16px 16px; }
  .pin__t { font-size: 20px; }
  .legal__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } /* /privacidad: rótulo arriba, texto abajo */
}
@media (max-width: 480px) {
  /* Cabecera móvil liviana (86 px) en index, /libros y /privacidad: arriba, 50 px con «Gabriel Busso» + «Ediciones →» + el tema como botón
     circular de 44 × 44 sólo con ícono (su aria-label «Cambiar a tema Noche / Papel» lo sigue nombrando); abajo, la nav en 36 px.
     0 px de desborde y la marca entera */
  :root { --head: 86px; }
  .top__in { grid-template-rows: 50px 36px; column-gap: 6px; } /* sólo entre columnas: el row-gap sigue en 0 y los dos renglones de la cabecera quedan pegados */
  .nav { height: 36px; }
  .brand { font-size: 18px; }
  .top__link { padding: 0 9px; }
  .top__end { gap: 4px; }
  .top__end .top__link { gap: 4px; padding: 0 8px; }
  .theme { flex: none; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .theme .t-papel, .theme .t-sep, .theme .t-noche { display: none; }
  .theme .i { width: 18px; height: 18px; }
  .sm-hide { display: none; } /* utilidad: fragmento prescindible que se oculta en iPhone */
  /* Hero en iPhone (375 × 812 · 390 × 844), sin métricas: la bajada vuelve a 15 px / 1.45 y a todo el ancho (2–3 renglones), y
     retrato, rótulo, H1, bajada, selector, precio, los 2 CTAs y el filete de cierre entran juntos en el primer pantallazo */
  .hero .eyebrow { font-size: 11px; letter-spacing: .12em; } /* rótulo editorial: hasta 2 renglones equilibrados junto al retrato, nunca se sale de su columna */
  .hero h1 { margin: 10px 0 0; font-size: clamp(32px, 9.2vw, 38px); }
  .lede { max-width: none; font-size: 15px; line-height: 1.45; }
  .hero .seg { margin-top: 20px; }
  .buyline { margin-top: 12px; }
  /* CTA con objeto en una línea («Comprar Pack Dúo ↗», «Ver las dos en Amazon.com ↗»): dos botones apilados de idéntico ancho y alto */
  .actions { grid-template-columns: minmax(0, 1fr); margin-top: 16px; gap: 8px; }
  /* Notas de precio, credenciales del Autor y consentimiento a 14,5 px / 1.45: nitidez plena en iPhone */
  .note, .price-row .note, .buyline .note, .facts, .form__consent, .form__consent span { font-size: 14.5px; line-height: 1.45; }
  .sm-vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 359px) {
  /* 320–359 px: retrato de 88 × 110 px y H1 de 28 px, así ninguna palabra del titular se sale de su columna */
  .hero { grid-template-columns: 88px minmax(0, 1fr); }
  .hero__portrait { width: 88px; }
  .hero__head { padding-left: 12px; }
  .hero h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}