/* ==========================================================================
   Manual Profesional de Maquinaria Pesada — hoja de estilos
   Paleta tomada de la portada del libro: azul marino + amarillo maquinaria.
   ========================================================================== */

:root {
  --navy-900: #0a1428;
  --navy-800: #10224a;
  --navy-700: #17305f;
  --navy-600: #1e3c78;
  --gold:     #f2b21a;
  --gold-700: #c98d08;
  --cream:    #f7f4ed;
  --paper:    #ffffff;
  --ink:      #101c33;
  --muted:    #57617a;
  --line:     #ddd7c9;
  --line-dark: rgba(242, 178, 26, 0.22);

  --wrap: 1180px;
  --display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  /* Palabras largas del oficio ("retroexcavadora", "sobrecalentamiento") no
     deben empujar la página a lo ancho en pantallas estrechas. */
  overflow-wrap: break-word;
}

img { max-width: 100%; display: block; }

/* Necesario porque .book y .book__cover-img fijan su propio display y, sin
   esto, ganarían al atributo hidden que intercambia portada real y maqueta. */
[hidden] { display: none !important; }

a { color: var(--navy-600); }
a:hover { color: var(--gold-700); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin: 0 0 18px;
}
.eyebrow--on-dark { color: var(--gold); }

/* --- Franja de peligro (detalle industrial) ------------------------------ */
.hazard {
  height: 10px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--gold) 0 18px,
    var(--navy-900) 18px 36px
  );
}

/* --- Botones ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--gold);
  color: var(--navy-900);
  box-shadow: 4px 4px 0 var(--navy-900);
}
.btn--primary:hover { background: #ffc42e; color: var(--navy-900); }

.btn--ghost-dark {
  background: transparent;
  color: var(--cream);
  border-color: rgba(247, 244, 237, 0.35);
}
.btn--ghost-dark:hover { border-color: var(--gold); color: var(--gold); }

.btn--ghost-light {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--navy-700);
}
.btn--ghost-light:hover { background: var(--navy-700); color: var(--cream); }

/* --- Cabecera fija ------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 20, 40, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line-dark);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}
.nav__brand {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--cream);
  text-decoration: none;
  line-height: 1.15;
  /* Sin esto el título no puede encogerse y empuja al botón fuera de pantalla. */
  min-width: 0;
}
.nav__brand span {
  color: var(--gold);
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-family: var(--body);
  font-weight: 600;
}
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  color: rgba(247, 244, 237, 0.78);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
}
.nav__links a:hover { color: var(--gold); }
.nav .btn { min-height: 44px; padding: 0 20px; font-size: 15px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  background: var(--navy-900);
  color: var(--cream);
  padding: 76px 0 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 520px at 78% 18%, rgba(30, 60, 120, 0.55), transparent 70%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 64px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 5vw, 62px);
  color: var(--cream);
  margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__lead {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(247, 244, 237, 0.82);
  max-width: 56ch;
  margin: 0 0 34px;
}
/* Aviso de promoción, sobre los botones del hero. */
.launch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
}
.launch__tag {
  background: var(--gold);
  color: var(--navy-900);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero__note {
  margin: 22px 0 0;
  font-size: 14px;
  color: rgba(247, 244, 237, 0.58);
}
.hero__figure { display: flex; justify-content: center; padding-bottom: 56px; }

/* --- Maqueta de portada (sustituible por la imagen real) ----------------- */
.book {
  width: 330px;
  aspect-ratio: 330 / 428;
  background: var(--navy-800);
  border: 1px solid rgba(242, 178, 26, 0.35);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    -14px 0 0 -4px #0d1b38,
    -18px 0 0 -6px #132449;
  transform: rotate(-2deg);
  display: flex;
  flex-direction: column;
  padding: 30px 26px 22px;
  position: relative;
}
.book__title {
  font-family: var(--display);
  color: var(--cream);
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.book__title span { color: var(--gold); display: block; }
.book__sub {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.7);
  font-weight: 600;
  line-height: 1.5;
}
.book__plate {
  margin: 18px -26px;
  height: 152px;
  background: linear-gradient(180deg, #2e4f86 0%, #6a5b3a 58%, #8a6f42 100%);
  border-top: 1px solid rgba(242, 178, 26, .3);
  border-bottom: 3px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0 18px;
  line-height: 1.6;
}
.book__author {
  margin-top: auto;
  text-align: center;
  font-family: var(--display);
  font-size: 21px;
  color: var(--cream);
  letter-spacing: 0.01em;
}
.book__author small {
  display: block;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(247, 244, 237, 0.65);
  margin-top: 6px;
  text-transform: uppercase;
}

/* Portada real. Es un render 3D con fondo transparente y su propia
   perspectiva, así que no lleva ni box-shadow ni rotación: la sombra se hace
   con drop-shadow, que sigue el contorno de la imagen en vez de dibujar un
   rectángulo alrededor del PNG. */
.book__cover-img {
  width: 360px;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.55));
}

/* --- Tira de datos ------------------------------------------------------- */
.facts {
  background: var(--navy-800);
  border-top: 1px solid var(--line-dark);
  color: var(--cream);
}
.facts__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.facts__item {
  padding: 26px 20px;
  text-align: center;
  border-left: 1px solid var(--line-dark);
}
.facts__item:first-child { border-left: 0; }
.facts__n {
  font-family: var(--display);
  font-size: 30px;
  color: var(--gold);
  line-height: 1;
}
.facts__l {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.72);
  margin-top: 8px;
  font-weight: 600;
}

/* --- Pilares ------------------------------------------------------------- */
.pillars { background: var(--navy-900); color: var(--cream); padding: 56px 0 64px; }
.pillars__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pillar { text-align: center; padding: 0 12px; }
.pillar svg { margin: 0 auto 16px; display: block; }
.pillar h3 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.pillar p { margin: 0; font-size: 15px; color: rgba(247, 244, 237, 0.72); line-height: 1.55; }

/* --- Secciones genéricas ------------------------------------------------- */
.section { padding: 96px 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--navy-800); color: var(--cream); }
.section--dark h2, .section--dark h3 { color: var(--cream); }

.section h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 20px; }
.section__lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 48px;
}
.section--dark .section__lead { color: rgba(247, 244, 237, 0.75); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

/* --- Cita del autor ------------------------------------------------------ */
.quote {
  border-left: 5px solid var(--gold);
  padding: 6px 0 6px 26px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Lista de aprendizaje ------------------------------------------------ */
.learn { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.learn li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  align-items: start;
  font-size: 17px;
  line-height: 1.55;
}
.learn .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(242, 178, 26, 0.18);
  margin: 9px 0 0 6px;
}

/* --- Máquinas ------------------------------------------------------------ */
.machines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.machine {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-dark);
  padding: 28px 24px 26px;
}
.machine svg { margin-bottom: 18px; }
.machine h3 { font-family: var(--display); font-size: 19px; margin-bottom: 10px; }
.machine p { margin: 0; font-size: 15px; color: rgba(247, 244, 237, 0.72); }
.machine__caps {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}

/* --- Índice -------------------------------------------------------------- */
/* Dos columnas que se leen de arriba abajo: 1-10 en la izquierda, 11-20 en la
   derecha. En móvil vuelven a una sola columna en orden 1-20. */
.toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column;
  gap: 0 56px;
  border-top: 2px solid var(--ink);
}
.toc__row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.toc__n { font-family: var(--display); font-size: 15px; color: var(--gold-700); }
.toc__t { font-size: 16.5px; font-weight: 400; }
.toc__p { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Símbolos del libro -------------------------------------------------- */
.symbols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.symbol {
  padding: 16px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}
.symbol span {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 8px;
  opacity: .9;
}
.symbol--recuerda   { background: #2e7d4f; }
.symbol--importante { background: var(--gold); color: var(--navy-900); }
.symbol--clave      { background: var(--navy-700); }
.symbol--evaluacion { background: #c1432f; }

/* --- Pasos de estudio ---------------------------------------------------- */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: baseline;
  font-size: 16.5px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-dark);
}
.steps li::before {
  content: counter(s);
  font-family: var(--display);
  font-size: 17px;
  color: var(--gold);
}

/* --- Autor --------------------------------------------------------------- */
.author { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.author__photo {
  width: 240px;
  aspect-ratio: 1 / 1.18;
  background: var(--navy-800);
  border: 1px solid var(--line-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(247, 244, 237, .45);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 16px;
  line-height: 1.6;
}
/* Trayectoria del autor por países. */
.track { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 30px; }
.track__item { display: flex; align-items: center; gap: 12px; }
.track__n {
  font-family: var(--display);
  font-size: 34px;
  color: var(--gold);
  line-height: 1;
}
.track__l {
  font-size: 14px;
  line-height: 1.35;
  color: rgba(247, 244, 237, 0.75);
}

.author__credits {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  font-size: 14.5px;
  color: rgba(247, 244, 237, 0.7);
}
.author__credits strong { color: var(--cream); font-weight: 600; }

/* --- Oferta / precio ----------------------------------------------------- */
.offer {
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--gold);
  padding: 48px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.offer h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 18px; }
.includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.includes li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16.5px;
}
.includes svg { margin-top: 4px; }
.price-box { text-align: center; }
.price { font-family: var(--display); font-size: 60px; line-height: 1; color: var(--ink); }
.price__was {
  font-family: var(--body);
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: line-through;
  margin-left: 10px;
  vertical-align: middle;
}
.price__save {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-700);
  letter-spacing: 0.02em;
  margin: 12px 0 0;
}
.price__meta { font-size: 14px; color: var(--muted); margin: 6px 0 26px; }
.price-box .btn { width: 100%; }
.price__fine { font-size: 13px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }

/* --- Aviso importante ---------------------------------------------------- */
.notice {
  background: #fff9e6;
  border: 1px solid var(--gold);
  border-top: 4px solid var(--gold);
  padding: 28px 32px;
}
.notice h3 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: 10px;
}
.notice p { margin: 0; font-size: 16px; color: #514a33; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 0;
  font-size: 18px;
  font-weight: 600;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 30px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--gold-700);
  border-bottom: 2px solid var(--gold-700);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.faq p { margin: 0 0 22px; color: var(--muted); font-size: 16.5px; max-width: 70ch; }

/* --- CTA final ----------------------------------------------------------- */
.final { background: var(--navy-900); color: var(--cream); padding: 96px 0; text-align: center; }
.final h2 { font-size: clamp(32px, 4.4vw, 52px); color: var(--cream); margin-bottom: 20px; }
.final p { font-size: 19px; color: rgba(247, 244, 237, 0.78); max-width: 60ch; margin: 0 auto 36px; }

/* --- Pie ----------------------------------------------------------------- */
.footer { background: #060e1e; color: rgba(247, 244, 237, 0.6); padding: 48px 0 40px; font-size: 14.5px; }
.footer__top { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.footer a { color: rgba(247, 244, 237, 0.75); }
.footer a:hover { color: var(--gold); }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 244, 237, .12);
  font-size: 13px;
  line-height: 1.6;
  max-width: 90ch;
}

/* --- Marcador de dato pendiente de rellenar ------------------------------ */
.todo {
  background: #ffe9a8;
  color: #6b4e00;
  padding: 1px 7px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 0.92em;
  white-space: nowrap;
}
/* Dentro de un botón amarillo el resaltado se vuelve ilegible. */
.btn .todo { background: rgba(10, 20, 40, 0.16); color: var(--navy-900); }

/* Las anclas del menú no deben quedar tapadas por la cabecera fija. */
section[id] { scroll-margin-top: 84px; }

/* Nota bajo el botón del cierre. */
.final__note {
  margin: 20px 0 0;
  font-size: 14px;
  color: rgba(247, 244, 237, 0.55);
}

/* Etiquetas que cambian de texto según el ancho (el botón de la cabecera). */
.only-narrow { display: none; }

/* ==========================================================================
   ADAPTACIÓN A PANTALLAS PEQUEÑAS
   La página se lee sobre todo desde el móvil, muchas veces a pie de obra y con
   mala cobertura, así que los saltos de tamaño se han ajustado pensando en
   pantallas de 360 a 430 px antes que en el escritorio.
   ========================================================================== */

/* --- Tablet y portátil pequeño ------------------------------------------- */
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .hero__figure { justify-content: center; padding-bottom: 48px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 0; }
  .offer { grid-template-columns: 1fr; gap: 36px; padding: 36px; }
  .author { grid-template-columns: 1fr; gap: 28px; }
  .author__photo { width: 200px; }
  .nav__links { display: none; }
}

/* --- Móvil ---------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Texto: mismo cuerpo que en escritorio pero con más aire entre líneas.
     Reducir la letra en móvil es el error clásico: cansa más, no menos. */
  body { font-size: 17px; line-height: 1.7; }
  p { margin-bottom: 18px; }

  .wrap { padding: 0 20px; }
  .section { padding: 56px 0; }
  .section h2 { font-size: clamp(26px, 6.4vw, 34px); }
  .section__lead { font-size: 17.5px; margin-bottom: 36px; }

  /* Cabecera más baja: en móvil cada píxel fijo es pantalla que se pierde. */
  .nav__inner { min-height: 58px; gap: 12px; }
  .nav__brand { font-size: 12.5px; }
  .nav__brand span { font-size: 9.5px; letter-spacing: 0.14em; }
  .nav .btn { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  section[id] { scroll-margin-top: 72px; }

  /* Hero */
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(31px, 8.2vw, 44px); margin-bottom: 18px; }
  .hero__lead { font-size: 17.5px; margin-bottom: 26px; }
  .launch { flex-wrap: wrap; gap: 10px; font-size: 14.5px; }
  .hero__cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__cta .btn { width: 100%; }
  .book, .book__cover-img { width: 100%; max-width: 290px; }

  /* Tira de datos: dos columnas con separadores completos */
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts__item { padding: 22px 12px; border-left: 0; border-top: 1px solid var(--line-dark); }
  .facts__item:nth-child(-n+2) { border-top: 0; }
  .facts__item:nth-child(even) { border-left: 1px solid var(--line-dark); }
  .facts__n { font-size: 27px; }
  .facts__l { font-size: 11.5px; letter-spacing: 0.06em; }

  .pillars { padding: 44px 0 52px; }
  .pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .pillar { padding: 0; }
  .pillar p { font-size: 14px; }

  .quote { font-size: 17.5px; padding-left: 18px; border-left-width: 4px; }
  .learn li { font-size: 16.5px; }

  /* Una máquina por fila: dos no caben sin apretar el texto */
  .machines { grid-template-columns: 1fr; gap: 14px; }
  .machine { padding: 22px 20px; }

  /* Índice: son veinte filas, así que se compactan sin perder legibilidad */
  .toc__row { grid-template-columns: 34px 1fr auto; gap: 12px; padding: 12px 0; }
  .toc__n { font-size: 13px; }
  .toc__t { font-size: 15.5px; line-height: 1.4; }
  .toc__p { font-size: 12px; }

  .symbols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .symbol { padding: 14px 12px; font-size: 12px; }
  .symbol span { font-size: 12px; }

  .track { gap: 16px 28px; }
  .track__n { font-size: 29px; }
  .author__photo { width: 100%; max-width: 220px; }

  /* Oferta y precio */
  .offer { padding: 26px 20px; box-shadow: 6px 6px 0 var(--gold); gap: 32px; }
  .includes li { font-size: 16px; }
  .price { font-size: 46px; }
  .price__was { font-size: 18px; margin-left: 8px; }

  .notice { padding: 22px 20px; }
  .notice p { font-size: 15.5px; }

  /* Preguntas: área de toque cómoda y flecha alineada con la primera línea */
  .faq summary { padding: 18px 40px 18px 0; font-size: 16.5px; }
  .faq summary::after { top: 25px; }
  .faq details[open] summary::after { top: 28px; }
  .faq p { font-size: 16px; }

  .final { padding: 56px 0; }
  .final p { font-size: 17.5px; }

  .footer__top { gap: 20px; }
  .footer__legal { font-size: 12.5px; }
}

/* --- Móviles estrechos (iPhone SE, Android de gama de entrada) ------------ */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .nav__brand { font-size: 11.5px; }
  .hero h1 { font-size: 29px; }
  .pillars__grid { grid-template-columns: 1fr; gap: 26px; }
  /* El icono pasa al lado del texto y ocupa las dos filas, para que el título
     y la descripción queden en la columna derecha. */
  .pillar { display: grid; grid-template-columns: 34px 1fr; gap: 6px 14px; text-align: left; }
  .pillar svg { grid-row: 1 / span 2; width: 30px; height: 30px; margin: 3px 0 0; }
  .symbols { grid-template-columns: 1fr; }
  .price { font-size: 40px; }
  .btn { font-size: 16px; padding: 0 20px; }
}

/* Nota: se probó "content-visibility: auto" en las secciones de abajo para
   acelerar el primer pintado en móvil, pero puede desajustar el salto del
   botón "Ver los 20 capítulos" hacia el índice. No compensa el riesgo en una
   página de este tamaño, así que se ha descartado a propósito. */

/* ==========================================================================
   SECCIONES QUE SE ACTIVAN CUANDO HAYA MATERIAL
   Van con el atributo "hidden" en el HTML para no enseñar huecos vacíos en la
   página publicada. Se quita ese atributo y aparecen.
   ========================================================================== */

/* --- Enlace a la muestra gratuita, bajo los botones del hero -------------- */
.hero__sample {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 178, 26, 0.4);
  padding-bottom: 2px;
}
.hero__sample:hover { color: #ffc42e; border-bottom-color: #ffc42e; }

/* --- Galería del interior del libro -------------------------------------- */
.inside {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.inside figure { margin: 0; }
.inside img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--paper);
}
.inside figcaption {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Testimonios ---------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.testimonial {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.testimonial p {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.6;
}
.testimonial footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.testimonial footer strong { color: var(--ink); display: block; font-weight: 700; }

@media (max-width: 1000px) {
  .inside, .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .inside, .quotes { grid-template-columns: 1fr; gap: 16px; }
  .testimonial { padding: 22px 20px; }
  .testimonial p { font-size: 16px; }
  .hero__sample { font-size: 15.5px; }
}