/* ==========================================================================
   Store design system, self-contained. The podcast home (index.html) uses
   it too and adds podcast.css on top; nothing here depends on that file.
   Two surfaces (cream / ink) alternate down the page to give a long
   landing page rhythm and make it feel shorter than it is.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* palette:start */
  /* Generated by books/aprende-claude/scripts/sync-palette.py from
     books/aprende-claude/assets/palette.json. Do not edit by hand: the build
     overwrites it. To change a tone, edit the JSON and run it again. */
  --cream: #f8f4ec;
  --cream-raised: #fffdf9;
  --cream-sunken: #efe8db;
  --ink: #13161f;
  --ink-raised: #1c202c;
  --ink-deep: #0b0d14;
  --clay: #ba4f28;
  --clay-strong: #a84420;
  --clay-soft: #e8875f;
  --clay-wash: #f6e2d8;
  --moss: #2e7d5b;
  --moss-wash: #e2f0e9;
  --alert: #b3372c;
  --alert-wash: #fbe8e5;
  --on-cream: #1a1d2b;
  --on-cream-muted: #5f6577;
  --on-cream-faint: #686e80;
  --on-ink: #f4efe6;
  --on-ink-muted: #a3a9ba;
  --on-ink-faint: #7b8294;
  --line-cream: #ddd4c4;
  --line-ink: #2b3040;
  /* palette:end */

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --radius: 16px;
  --radius-lg: 24px;
  --shell: 1080px;
  --gutter: 20px;
  /* Height of the sticky .topbar: the wordmark's 24px at line-height 1.6 plus
     its padding, the bar's padding and its border (81.4px). Rounded down, so an
     anchor jump lands the section's top edge under the bar and never leaves a
     strip of the previous section showing. Change it with the header. */
  --topbar-h: 80px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-radius: 6px;
}
.surface--ink :focus-visible,
.surface--deep :focus-visible,
.topbar :focus-visible,
.foot :focus-visible { outline-color: var(--clay-soft); }

/* Anchor jumps must clear the sticky header instead of hiding under it. */
[id] { scroll-margin-top: var(--topbar-h); }

body {
  background: var(--cream);
  color: var(--on-cream);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; }

/* ---------- Surfaces ------------------------------------------------------ */

.surface {
  padding: clamp(56px, 9vw, 104px) var(--gutter);
  position: relative;
  /* Decoration that runs past the screen edge (the hero's cover flow and its
     glow) is cut here. body's overflow-x: hidden is not enough: mobile browsers
     still let the page pan sideways and show a blank strip on the right. clip,
     unlike hidden, creates no scroll container and leaves overflow-y alone. */
  overflow-x: clip;
}

/* Short pages (checkout, library) still push the footer to the bottom. */
.surface--fill { min-height: calc(100vh - var(--topbar-h)); }

.surface--cream { background: var(--cream); color: var(--on-cream); }
.surface--raised { background: var(--cream-raised); color: var(--on-cream); }
.surface--ink { background: var(--ink); color: var(--on-ink); }
.surface--deep { background: var(--ink-deep); color: var(--on-ink); }

.surface--ink .muted, .surface--deep .muted { color: var(--on-ink-muted); }
.surface--cream .muted, .surface--raised .muted { color: var(--on-cream-muted); }

.shell { max-width: var(--shell); margin: 0 auto; }
.shell--narrow { max-width: 740px; margin: 0 auto; }
.shell--form { max-width: 560px; margin: 0 auto; }

/* ---------- Type ---------------------------------------------------------- */

/* The signature move: bold sans and italic serif inside the same headline. */
.display {
  font-size: clamp(34px, 6.6vw, 60px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.h2 {
  font-size: clamp(28px, 4.8vw, 44px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.h3 { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }

.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.surface--cream .serif, .surface--raised .serif { color: var(--clay); }
.surface--ink .serif, .surface--deep .serif { color: var(--clay-soft); }

.lede { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.surface--cream .eyebrow, .surface--raised .eyebrow { color: var(--clay); }
.surface--ink .eyebrow, .surface--deep .eyebrow { color: var(--clay-soft); }

.center { text-align: center; }
.stack { display: flex; flex-direction: column; }

/* ---------- Section heading ---------------------------------------------- */

.head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.head .eyebrow { display: inline-block; margin-bottom: 16px; }
.head--wide { max-width: none; }
.head--wide p { max-width: 760px; margin-inline: auto; }
.head--wide-lede { max-width: none; }
.head--wide-lede .h2 { max-width: 760px; margin-inline: auto; }
.head .h2 { margin-bottom: 16px; }
.head p { font-size: clamp(16px, 2vw, 19px); }

.pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.surface--cream .pill, .surface--raised .pill { background: var(--clay-wash); color: var(--clay-strong); }
.surface--ink .pill, .surface--deep .pill { background: rgba(232, 135, 95, 0.16); color: var(--clay-soft); }

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 32px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
}

.btn--primary {
  background: var(--clay);
  color: #fff;
  box-shadow: 0 10px 28px rgba(186, 79, 40, 0.3);
}
.btn--primary:hover { background: var(--clay-strong); transform: translateY(-2px); }

.btn--ghost { border: 1.5px solid currentColor; }
.btn--ghost:hover { transform: translateY(-2px); }

.btn--sm { padding: 11px 22px; font-size: 15px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

.cta { display: flex; flex-direction: column; align-items: center; }
.cta-note { margin-top: 14px; font-size: 14px; text-align: center; }
.cta-price { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.cta-price strong { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.cta-price s { font-size: 16px; opacity: 0.55; }
.cta-price span { font-size: 15px; opacity: 0.75; }
.surface--ink .cta-price, .surface--deep .cta-price { color: var(--on-ink); }
/* The logo file carries its own clear space, so it needs no gap of its own. */
.pay-note { display: flex; align-items: center; justify-content: center; margin-top: 4px; font-weight: 600; }
.pay-note img { height: 40px; width: auto; }
/* PayPal's file has no clear space of its own, unlike Mercado Pago's: it gets
   the gap and a height that matches the other logo's visible size. */
.pay-note img.pay-note-paypal { height: 20px; margin-left: 0.45em; }
/* The link to the other market under the price (components.jsx MarketSwitch). */
.market-switch { margin-top: 14px; font-size: 13px; text-align: center; }
.market-switch a { color: inherit; opacity: 0.75; }
.market-switch a:hover { opacity: 1; }
.cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 14px; font-size: 13px; }
.surface--cream .cta-trust, .surface--raised .cta-trust { color: var(--on-cream-muted); }
.surface--cream .cta-note, .surface--raised .cta-note { color: var(--on-cream-muted); }
.surface--ink .cta-note, .surface--deep .cta-note { color: var(--on-ink-muted); }

/* ---------- Sticky header ------------------------------------------------- */

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--clay);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip:focus { top: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(19, 22, 31, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-ink);
  color: var(--on-ink);
}

.topbar-inner {
  /* The gutter is added to the width, not subtracted, so the content lines up
     with .shell on desktop and stays off the edges on mobile. */
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  /* Symmetric padding instead of min-height: with align-items: baseline a
     min-height parks the text against the top of the box. Padding keeps the
     44px tap target and centres the glyphs at the same time. */
  padding: 9px 0;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.wordmark em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--clay-soft); }

.topbar-price { font-size: 13px; color: var(--on-ink-muted); margin-right: 4px; }

/* ---------- Cards --------------------------------------------------------- */

.card {
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.2vw, 32px);
}

.surface--cream .card, .surface--raised .card {
  background: var(--cream-raised);
  border: 1px solid var(--line-cream);
}
.surface--ink .card, .surface--deep .card {
  background: var(--ink-raised);
  border: 1px solid var(--line-ink);
}

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Check / cross lists ------------------------------------------- */

.list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }

.mark {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  margin-top: 1px;
}
.mark--yes { background: var(--moss); color: #fff; }
.mark--no { background: var(--alert); color: #fff; }

/* ---------- Before / after ------------------------------------------------ */

.compare { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.compare-col { border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 30px); }
.compare-col--bad { background: var(--alert-wash); border: 1px solid #f0cdc7; color: #4a1d18; }
.compare-col--good { background: var(--moss-wash); border: 1px solid #c3e0d3; color: #12352a; }
.compare-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; margin-bottom: 18px; }

/* La edición vigente, al pie de la caja de actualizaciones: el dato concreto
   que respalda la promesa que la caja acaba de hacer. */
.edition {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-ink);
  font-size: 15px;
  font-weight: 700;
}
.surface--ink .edition, .surface--deep .edition { color: var(--clay-soft); }
.surface--cream .edition, .surface--raised .edition {
  border-top-color: var(--line-cream);
  color: var(--clay);
}

/* ---------- Track cards (the parts of the main book) ---------------------- */

.track { display: flex; flex-direction: column; height: 100%; }
/* The book has five parts: the odd one out takes the full row instead of
   leaving a hole next to it. */
.track:last-child:nth-child(odd) { grid-column: 1 / -1; }
.track-tag { align-self: flex-start; margin-bottom: 14px; }
.track h3 { margin-bottom: 8px; }
.track > p { margin-bottom: 20px; }
.track-list { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.track-list li { display: flex; gap: 10px; align-items: baseline; line-height: 1.45; }
.track-num {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.55;
  flex-shrink: 0;
  min-width: 22px;
}

/* ---------- Bonus rows ---------------------------------------------------- */

.bonus { display: flex; gap: 18px; align-items: flex-start; }
/* La tapa real del bonus, en su proporción A4 (1600x2263). El marco es el
 * mismo gesto que .cover-shot, en miniatura: el degradado de fondo se ve
 * un instante mientras carga el SVG y como filo alrededor de la tapa. */
.bonus-thumb {
  flex-shrink: 0;
  width: 84px; height: 119px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--clay), var(--clay-strong));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(232, 135, 95, 0.35);
}
.bonus-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Carousel ------------------------------------------------------ */

.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-thumb { background: var(--clay-soft); border-radius: 2px; }
.rail > * { scroll-snap-align: start; flex: 0 0 clamp(250px, 78vw, 340px); }
.rail-hint { text-align: center; font-size: 14px; margin-top: 12px; }

/* ---------- Cover shot ----------------------------------------------------- */

/* The book's real cover, in its A4 proportion. The frame keeps the gesture of
 * the phone mockup that used to be here (large radius and a long shadow),
 * without faking a screen: what is sold is a PDF. */
.cover-shot {
  position: relative;
  z-index: 2;
  border-radius: 20px;
  /* La tapa es tinta sobre tinta —su fondo es el mismo --ink-deep que el hero—
   * así que sin un marco propio se funde con la superficie y deja de leerse
   * como un objeto. El padding deja ver ese marco alrededor de la imagen en
   * vez de dibujar una línea encima de ella. */
  padding: 8px;
  /* El degradado hace de luz: crema arriba a la izquierda, clay bajando hacia
   * la derecha. Un marco de un solo tono se lee como un rectángulo pegado; uno
   * con caída de luz se lee como el canto de un objeto.
   *
   * Los cuatro tonos son opacos: son los mismos de antes —crema 55%, clay 62%,
   * clay oscuro 50% y crema 20%— ya compuestos sobre --ink-deep, así que el
   * marco se ve igual sobre el fondo del hero. Con alfa se veían las tapas de
   * atrás a través del canto, y el libro dejaba de leerse como un objeto
   * sólido. Si cambia --ink-deep, hay que volver a componerlos. */
  background:
    linear-gradient(145deg,
      #8b8988 0%,
      #945942 38%,
      #622e1e 72%,
      #3a3a3e 100%);
  box-shadow:
    /* filo exterior que recorta el marco contra el fondo */
    0 0 0 1px rgba(232, 135, 95, 0.45),
    /* halo cálido: separa el libro del negro sin aclarar la superficie */
    0 0 90px -18px rgba(232, 135, 95, 0.45),
    /* la sombra larga que apoya el objeto sobre la página */
    0 34px 80px rgba(0, 0, 0, 0.65);
  animation: cover-rise 0.8s cubic-bezier(0.22, 0.9, 0.28, 1) backwards;
}
.cover-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  /* Filo oscuro entre el marco y la tapa: sin él los dos claros se tocan y el
   * marco parece parte de la portada. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
/* El lomo: una banda oscura con un filo de luz sobre el borde izquierdo, para
 * que la tapa se lea como un libro cerrado y no como una imagen recortada. */
.cover-shot::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 16px;
  border-radius: 13px 0 0 13px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(244, 239, 230, 0.10) 72%,
    rgba(244, 239, 230, 0) 100%);
  pointer-events: none;
}

/* ---------- Cover flow ----------------------------------------------------- */

/* El libro principal de frente y los cinco bonus girados a los costados, como
 * la fila de tapas del Cover Flow: dos entrando por la izquierda y tres
 * saliendo por la derecha, todos apoyados sobre la misma línea de base.
 *
 * El giro y la profundidad los hace la perspectiva de .cover-flow: cada tapa se
 * corre en X, se hunde en Z y rota sobre su propio eje vertical para quedar
 * mirando al centro. El libro principal no se transforma —es el foco, y es la
 * imagen que mide el LCP—, así que se pinta encima por z-index y las otras
 * quedan atrás por su Z negativo.
 *
 * La fila es asimétrica a propósito: dos de un lado y tres del otro. Un Cover
 * Flow es una fila que sigue, no una figura simétrica, y las tres van del lado
 * donde sobra margen de página, porque a la izquierda está la columna de texto.
 *
 * El ancho es la restricción de esta composición: una fila así mide poco más
 * del doble que la tapa del centro, así que la tapa principal cede ancho para
 * que las de los costados entren. En pantallas angostas las de las puntas se
 * cortan contra el borde, que es como se corta cualquier fila que sigue. */
.cover-stage {
  position: relative;
  max-width: 264px;
  margin: 0 auto;
  /* Corrimientos en porcentaje del ancho de la tapa chica, hundimiento en px y
     giro en grados. Cambiarlos en un breakpoint reacomoda la fila entera. */
  /* La izquierda entra más apretada que la derecha: de ese lado está la columna
     de texto y la fila solo puede usar el aire de la separación. */
  --flow-x-l1: 104%;
  --flow-x-l2: 140%;
  --flow-x-r1: 112%;
  --flow-x-r2: 154%;
  --flow-x-r3: 196%;
  --flow-z-1: -50px;
  --flow-z-2: -125px;
  --flow-z-3: -200px;
  --flow-turn: 40deg;
}

/* El halo cálido que sostiene al grupo entero sobre el negro. Sin él, las tapas
 * de las puntas flotan sueltas en el fondo. */
.cover-stage::before {
  content: '';
  position: absolute;
  inset: -14% -60%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(232, 135, 95, 0.22),
    rgba(232, 135, 95, 0.07) 58%,
    transparent 78%);
  animation: glow-in 1.6s ease-out both;
}

/* La perspectiva vive acá y no en .cover-stage: así el libro principal, que es
 * hermano de este bloque y no hijo, se sigue pintando plano y sin deformarse. */
.cover-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 900px;
  perspective-origin: 50% 60%;
}

/* Cada tapa se corre en porcentaje de su propio ancho, así que la fila conserva
 * su forma con el stage en cualquier tamaño. El origen abajo al centro deja el
 * eje del giro parado sobre la línea de base, que es lo que las hace ver como
 * tapas giradas y no como tapas inclinadas. */
.flow-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  margin-left: -31%;
  padding: 4px;
  border-radius: 12px;
  transform-origin: 50% 100%;
  translate: var(--x) 0 var(--z);
  rotate: y var(--turn);
  opacity: var(--fade);
  /* El mismo marco de luz que .cover-shot, más apagado: son objetos que están
   * detrás, no la tapa que se vende. */
  background: linear-gradient(145deg,
    rgba(244, 239, 230, 0.34),
    rgba(232, 135, 95, 0.42) 45%,
    rgba(186, 79, 40, 0.30));
  box-shadow:
    0 0 0 1px rgba(232, 135, 95, 0.28),
    0 22px 46px rgba(0, 0, 0, 0.55);
  animation: flow-in 0.85s cubic-bezier(0.22, 0.9, 0.28, 1) backwards;
}
.flow-card img { display: block; width: 100%; height: auto; border-radius: 8px; }
/* El velo de penumbra: más fuerte cuanto más lejos, que es lo que arma la
 * profundidad junto con el giro. */
.flow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(200deg, rgba(11, 13, 20, 0.10), rgba(11, 13, 20, var(--veil)));
}

/* Las de adentro primero: la fila se abre desde el centro hacia las puntas. */
.flow-card--l1 {
  --x: calc(var(--flow-x-l1) * -1);
  --z: var(--flow-z-1);
  --turn: var(--flow-turn);
  --fade: 0.94;
  --veil: 0.26;
  z-index: 3;
  animation-delay: 0.26s;
}
.flow-card--r1 {
  --x: var(--flow-x-r1);
  --z: var(--flow-z-1);
  --turn: calc(var(--flow-turn) * -1);
  --fade: 0.94;
  --veil: 0.26;
  z-index: 3;
  animation-delay: 0.3s;
}
.flow-card--l2 {
  --x: calc(var(--flow-x-l2) * -1);
  --z: var(--flow-z-2);
  --turn: var(--flow-turn);
  --fade: 0.86;
  --veil: 0.34;
  z-index: 2;
  animation-delay: 0.38s;
}
.flow-card--r2 {
  --x: var(--flow-x-r2);
  --z: var(--flow-z-2);
  --turn: calc(var(--flow-turn) * -1);
  --fade: 0.86;
  --veil: 0.34;
  z-index: 2;
  animation-delay: 0.42s;
}
.flow-card--r3 {
  --x: var(--flow-x-r3);
  --z: var(--flow-z-3);
  --turn: calc(var(--flow-turn) * -1);
  --fade: 0.78;
  --veil: 0.40;
  z-index: 1;
  animation-delay: 0.54s;
}

/* Sin `to`: el estado final de cada animación es el que el elemento ya tiene
 * escrito arriba. Así, con las animaciones apagadas —motion reducido— el
 * abanico aparece armado en vez de quedar apilado en el centro. */
@keyframes flow-in {
  from { opacity: 0; translate: 0 0 -320px; rotate: y 0deg; }
}
/* Sin opacidad: la tapa principal es la candidata al LCP de la página y
   arrancarla invisible retrasa la métrica sin que se vea mejor. */
@keyframes cover-rise {
  from { transform: translateY(24px) scale(0.97); }
}
@keyframes glow-in {
  from { opacity: 0; }
}
@keyframes sheen {
  from { left: -55%; }
  to { left: 135%; }
}

/* Un brillo que cruza la tapa una sola vez, cuando el abanico terminó de
 * abrirse. Una pasada y se va: es el remate del movimiento, no un loop. */
.cover-sheen {
  position: absolute;
  inset: 8px;
  z-index: 3;
  border-radius: 13px;
  overflow: hidden;
  pointer-events: none;
}
.cover-sheen::before {
  content: '';
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -55%;
  width: 40%;
  transform: rotate(10deg);
  background: linear-gradient(100deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    transparent);
  animation: sheen 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1.15s both;
}

/* El grupo reacciona al mouse: el abanico se abre un poco más y el libro se
 * despega. En touch no existe el estado, así que no se declara. */
@media (hover: hover) and (pointer: fine) {
  .cover-flow {
    transform-origin: 50% 100%;
    transition: scale 0.6s cubic-bezier(0.22, 0.9, 0.28, 1);
  }
  .cover-shot { transition: translate 0.6s cubic-bezier(0.22, 0.9, 0.28, 1); }
  .cover-stage:hover .cover-flow { scale: 1.06; }
  .cover-stage:hover .cover-shot { translate: 0 -8px; }
}

/* ---------- Social proof strip -------------------------------------------- */

/* Two per line. Centered while the hero copy is centered. On desktop the
   hero copy is left-aligned, and the hero row follows that edge. */
.badge-row {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  justify-items: center;
  text-align: center;
  column-gap: 18px;
  row-gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
}
.badge-row > span { white-space: nowrap; }

/* The two longest labels do not fit side by side on a narrow phone. */
@media (max-width: 380px) {
  .badge-row { column-gap: 12px; font-size: 13px; }
}
@media (max-width: 340px) {
  .badge-row { column-gap: 8px; font-size: 12px; }
}

.list-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.surface--ink .list-title, .surface--deep .list-title { color: var(--clay-soft); }
.surface--cream .list-title, .surface--raised .list-title { color: var(--clay); }

/* ---------- Offer block --------------------------------------------------- */

.offer { max-width: 560px; margin: 0 auto; text-align: center; }

.offer-urgency {
  display: inline-block;
  background: var(--clay);
  color: #fff;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.viewers {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-ink);
  background: var(--ink-raised);
  font-size: 14px;
  font-weight: 600;
}
.viewers-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--moss); flex-shrink: 0; }

.price-normal {
  margin-top: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line-ink);
  background: var(--ink-raised);
  padding: 20px;
}
.price-normal-title { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; }
.price-normal-amount {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-ink-faint);
  text-decoration: line-through;
  margin: 8px 0 4px;
}

/* ---------- Price card ---------------------------------------------------- */

.price-card {
  position: relative;
  max-width: 560px;
  margin: 16px auto 0;
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 34px);
  background: var(--cream-raised);
  color: var(--on-cream);
  border: 2px solid var(--clay);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.price-today-title { font-size: 14px; font-weight: 800; letter-spacing: 0.1em; color: var(--clay); }
.price-was { font-size: 16px; color: var(--on-cream-faint); text-decoration: line-through; margin-top: 8px; }
.price-was span { display: inline-block; text-decoration: none; color: var(--on-cream-muted); }
.price-now {
  font-size: clamp(46px, 9vw, 64px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--clay);
  margin: 2px 0 4px;
}
.price-today-foot { font-weight: 700; color: var(--moss); }
.price-off {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--clay);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.price-terms { font-size: 15px; color: var(--on-ink-muted); margin-top: 18px; font-weight: 600; }

.bonus-thumb--sm { width: 54px; height: 76px; border-radius: 8px; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; margin-top: 22px; font-size: 14px; }
.trust span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- FAQ ----------------------------------------------------------- */

.faq { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.faq details {
  border-radius: var(--radius);
  border: 1px solid var(--line-ink);
  background: var(--ink-raised);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 22px;
  font-weight: 700;
  font-size: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: var(--clay-soft);
  flex-shrink: 0;
  line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq-body { padding: 0 22px 22px; color: var(--on-ink-muted); line-height: 1.65; }

/* ---------- Forms (checkout, library) ------------------------------------- */

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field label { font-size: 14px; font-weight: 600; }
.field input {
  font: inherit;
  font-size: 16px;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line-cream);
  background: var(--cream-raised);
  color: var(--on-cream);
  width: 100%;
  transition: border-color 0.15s ease;
}
.field input:focus { outline: none; border-color: var(--clay); }
.field input[aria-invalid='true'] { border-color: var(--alert); }
.field-hint { font-size: 13px; color: var(--on-cream-muted); }
.field-error { font-size: 13px; color: var(--alert); font-weight: 600; }
.field-optional { font-weight: 400; color: var(--on-cream-faint); }

/* /feedback: multi-line answers, the star rating and the permission box. */
.field textarea {
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line-cream);
  background: var(--cream-raised);
  color: var(--on-cream);
  width: 100%;
  resize: vertical;
  min-height: 108px;
  transition: border-color 0.15s ease;
}
.field textarea:focus { outline: none; border-color: var(--clay); }

.stars { display: flex; align-items: center; gap: 4px; }
.star {
  font-size: 34px;
  line-height: 1;
  padding: 2px 3px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--line-cream);
  transition: color 0.12s ease, transform 0.12s ease;
}
.star.is-on { color: var(--clay); }
.star:hover { transform: scale(1.12); }
.star:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 6px; }
.stars[aria-invalid='true'] .star { color: var(--alert-wash); }
.stars-label { margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--on-cream-muted); }

.field .check { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--clay); flex-shrink: 0; }
.row { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }

.panel {
  background: var(--cream-raised);
  border: 1px solid var(--line-cream);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3.4vw, 32px);
}

/* Order summary — the saving is the point, so it gets the loudest treatment. */
.summary-item { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; }
/* The main book's real cover (same file as the landing), at its own aspect ratio. */
.summary-thumb {
  flex-shrink: 0;
  width: 46px; height: auto;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.summary-item-name { flex: 1; font-size: 15px; font-weight: 600; line-height: 1.35; }
.summary-item-price { font-size: 15px; font-weight: 700; white-space: nowrap; }

.summary-includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--line-cream);
  font-size: 14px;
  color: var(--on-cream-muted);
}
.summary-includes li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.summary-includes .mark { width: 18px; height: 18px; font-size: 10px; }

.summary-total-block { border-top: 1px solid var(--line-cream); padding-top: 16px; text-align: right; }
.summary-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.summary-total-row > span:first-child { font-size: 15px; color: var(--on-cream-muted); text-align: left; }
.summary-was { font-size: 16px; color: var(--on-cream-faint); text-decoration: line-through; }
.summary-now { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; }
.summary-savings { font-size: 15px; font-weight: 700; color: var(--moss); }

.notice { border-radius: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.5; }
.notice--ok { background: var(--moss-wash); color: #12352a; }
.notice--bad { background: var(--alert-wash); color: #4a1d18; }

/* ---------- Footer -------------------------------------------------------- */

.foot { background: var(--ink-deep); color: var(--on-ink-faint); padding: 52px var(--gutter) 40px; font-size: 14px; }
.foot a { color: var(--on-ink-muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 12px 0; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-legal { line-height: 1.7; max-width: 720px; }

/* ---------- Legal page ---------------------------------------------------- */

.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-size: 24px; font-weight: 800; margin: 36px 0 12px; letter-spacing: -0.02em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--on-cream-muted); line-height: 1.7; margin-bottom: 12px; }
.prose ul { padding-left: 22px; }
.prose a:not(.btn) { color: var(--clay); }

/* ---------- Responsive ---------------------------------------------------- */

/* Hero: stacked on phones, two columns once there is room for it. */
.hero { display: grid; gap: 44px; align-items: center; }
.hero-copy { text-align: center; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; }

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.08fr 0.92fr; gap: 60px; }
  .hero-copy { text-align: left; }
  .hero-badges { justify-content: flex-start; }
  .hero-copy .badge-row {
    justify-content: start;
    justify-items: start;
    text-align: left;
  }
  .hero-copy .cta { align-items: flex-start; }
  .hero-copy .cta-note { text-align: left; }
  /* The row is wider than its column and borrows the column gap on the left,
     where the copy is: the left covers come in tighter so the outer one stays
     clear of the text, also while hover opens the fan. The right side tightens
     too, so the row does not run past the page edge. */
  .cover-stage {
    max-width: 240px;
    --flow-x-l1: 96%;
    --flow-x-l2: 124%;
    --flow-x-r1: 104%;
    --flow-x-r2: 142%;
    --flow-x-r3: 180%;
  }
}
/* From here the copy column stops growing narrower and the main cover gets
   its full size back. */
@media (min-width: 1120px) {
  .cover-stage { max-width: 280px; }
}

@media (min-width: 900px) {
  .rail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }
  .rail > * { flex: none; }
  .rail-hint { display: none; }
}

@media (max-width: 860px) {
  .grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .grid--2, .compare { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .topbar-price { display: none; }
  /* La fila se cierra en pantallas angostas y la tapa principal cede ancho: con
     el libro más grande, las dos puntas quedaban enteras fuera de la pantalla.
     Igual se cortan un poco, que es lo que hace una fila que sigue. */
  .cover-stage {
    max-width: 196px;
    --flow-x-l1: 104%;
    --flow-x-l2: 142%;
    --flow-x-r1: 108%;
    --flow-x-r2: 152%;
    --flow-x-r3: 194%;
    --flow-turn: 42deg;
  }
  .bonus { gap: 14px; }
  .bonus-thumb { width: 62px; height: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- Gift and discount strip --------------------------------------- */

/* A landing visit whose link carries a working coupon (?coupon=): the
   strip under the header that says the books are a gift, or the discount. */
.gift-banner {
  margin: 0;
  padding: 12px var(--gutter);
  background: var(--clay);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
/* The coupon came but no longer works: said once, then the page sells as usual. */
.gift-banner--off {
  background: var(--cream-sunken);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Coupon (checkout) ----------------------------------------------- */

/* Folded behind a link until asked for: an open coupon field sends buyers
   without a coupon off to look for one. */
.coupon-link {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--clay-strong);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.coupon-link[disabled] { opacity: 0.55; cursor: not-allowed; }
.coupon-toggle { display: block; margin: -4px 0 18px; }
.coupon-row { display: flex; gap: 10px; align-items: stretch; }
.coupon-row input { flex: 1; min-width: 0; text-transform: uppercase; }
.coupon-row input::placeholder { text-transform: none; }
.coupon-row .btn { flex-shrink: 0; }
.coupon-applied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: -4px 0 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--moss-wash);
  color: #12352a;
  font-size: 15px;
  font-weight: 600;
}
.summary-discount { margin-bottom: 6px; }
.summary-discount > span:last-child { font-size: 16px; font-weight: 700; color: var(--moss); }