html,
body {
  margin: 0;
  background: #1d1d1d;
}
body {
  -webkit-font-smoothing: antialiased;
  /* clip recorta lo que sobresale sin convertir body en caja con scroll.
     Con hidden, al bloquear el scroll durante la carga (html overflow hidden)
     toda la página se desplazaba dentro de body sin avisar a la ventana, y en
     iPhone las secciones se quedaban en blanco. hidden queda para Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
}
a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover {
  color: #c83226;
}
::selection {
  background: #c83226;
  color: #ffffff;
}

.tutorial-key {
  min-width: clamp(116px, 10vw, 140px);
  box-sizing: border-box;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: #ffffff;
  color: #1d1d1d;
  font-family: ui-monospace, Menlo, monospace;
  font-size: clamp(11px, 0.85vw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tutorial-active [data-section-nav] {
  z-index: 99985 !important;
}

/* Paradas del scroll: un gesto rápido se detiene al empezar cada capítulo y
   al aparecer su contenido (.chapter-snap), en vez de saltarse pantallas.
   Dentro de una sección larga el scroll sigue siendo libre. */
html {
  scroll-snap-type: y proximity;
}
#portada,
.chapter,
.chapter-snap,
[data-mag] {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* En táctil las paradas obligatorias hacen que cada gesto avance un solo paso
   y el scroll vaya a tirones: se desactivan y el empuje del dedo (inercia
   nativa) recorre toda la distancia que corresponda. */
@media (pointer: coarse) {
  html {
    scroll-snap-type: none;
  }
  #portada,
  .chapter,
  .chapter-snap,
  [data-mag] {
    scroll-snap-stop: normal;
  }
  html,
  body {
    overscroll-behavior-y: none;
  }
}
.chapter-snap {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Cada apartado presenta primero su nombre sobre el mismo escenario fijo. */
.chapter {
  position: relative;
}
.chapter-intro {
  display: none;
}
.chapter-ready > .chapter-pin {
  position: sticky;
  top: 0;
  isolation: isolate;
}
.chapter-ready > .chapter-pin > section {
  opacity: var(--chapter-content, 0);
  pointer-events: none;
}
.chapter-ready.chapter-content-active > .chapter-pin > section {
  pointer-events: auto;
}
.chapter-ready [data-chapter-label] {
  display: none;
}
.chapter-ready .chapter-intro {
  position: absolute;
  inset: 0 0 auto;
  height: 100vh;
  height: 100svh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 4vh, 40px);
  padding: 96px clamp(24px, 5vw, 80px) 64px;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  opacity: calc(1 - var(--intro-exit, 0));
  transform: translate3d(0, calc(var(--intro-exit, 0) * -48px), 0);
}
.chapter-number {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.32em;
  opacity: var(--intro-enter, 0);
}
.chapter-title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(48px, 9vw, 154px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-wrap: balance;
}
.chapter-word {
  display: inline-flex;
  overflow: hidden;
  /* La máscara vertical revela las letras. Este aire lateral evita que los
     remates curvos —especialmente la O— rocen y se corten en su propio borde. */
  padding: 0 0.075em 0.12em;
  margin: 0 -0.075em -0.12em;
}
.chapter-letter {
  --letter-progress: clamp(
    0,
    calc((var(--intro-enter, 0) - var(--letter-delay, 0)) * 1.55),
    1
  );
  display: inline-block;
  opacity: var(--letter-progress);
  transform: translate3d(0, calc((1 - var(--letter-progress)) * 110%), 0);
}
/* Paleta del key visual: enlace «Pincha para ver más información» y ventana
   «¿Por qué estos colores?». */
.colors-more {
  margin-top: 20px;
  padding: 6px 0;
  border: 0;
  border-bottom: 2px solid #c83226;
  background: none;
  color: #1d1d1d;
  font-family: 'Inter Tight', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.colors-more:hover,
.colors-more:focus-visible {
  color: #c83226;
}
.colors-more span {
  display: inline-block;
  transition: transform 0.2s;
}
.colors-more:hover span {
  transform: translateX(4px);
}
.colors-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 56px);
  border: 0;
  background: #1d1d1d;
  color: #ffffff;
  font-family: 'Inter Tight', sans-serif;
  overflow: auto;
  overscroll-behavior: contain;
}
/* La ventana va por encima del cursor en forma de asterisco: dentro, el normal. */
html.ast-cursor .colors-dialog,
html.ast-cursor .colors-dialog * {
  cursor: auto !important;
}
html.ast-cursor .colors-dialog button {
  cursor: pointer !important;
}
.colors-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.colors-dialog[open] {
  animation: colorsIn 0.35s cubic-bezier(0.2, 0.7, 0.1, 1);
}
@keyframes colorsIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.colors-close {
  float: right;
  margin: -8px -8px 0 16px;
  padding: 8px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: none;
  color: #ffffff;
  font: 600 14px 'Inter Tight', sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.colors-close:hover,
.colors-close:focus-visible {
  border-color: #c83226;
  background: #c83226;
}
.colors-title {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: clamp(36px, 5.6vw, 84px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.colors-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.colors-grid > div {
  display: grid;
  align-content: start;
  gap: 8px;
}
.colors-swatch {
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.colors-grid strong {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.colors-grid code {
  font: 14px ui-monospace, Menlo, monospace;
  letter-spacing: 0.04em;
}
.colors-grid p {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

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

/* Explicación del key visual: tres columnas en ordenador; en pantallas
   estrechas, una columna con letra más grande. */
@media (max-width: 900px) {
  [data-kv-cols] {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 62ch;
  }
  [data-kv-cols] > p {
    font-size: clamp(18px, 2.6vw, 22px) !important;
  }
}
@media (max-width: 600px) {
  .chapter-title {
    font-size: clamp(30px, 8.8vw, 52px);
  }
  /* Concepto creativo: en móvil los textos van centrados, sin la sangría
     izquierda que deja sitio al niño de la silla en ordenador. */
  [data-creativo-text] {
    padding-left: 0 !important;
    text-align: center;
    justify-items: center;
  }
  [data-creativo-text] > p {
    max-width: 30ch !important;
  }
  [data-creativo-text] > div {
    width: 100%;
  }
  [data-creativo-text] > div > p {
    margin-inline: auto !important;
    max-width: 36ch;
  }
  /* Criterios: 2×2 en pantallas anchas, una columna en móvil. */
  [data-criterios] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Índice lateral compacto, dentro del margen derecho para no tapar texto. */
  [data-section-nav] {
    right: 4px !important;
    gap: 6px !important;
  }
  [data-section-nav] > [data-nav] {
    width: 6px !important;
    height: 6px !important;
    border-width: 1px !important;
  }
  [data-section-nav] > [data-nav][aria-current='true'] {
    width: 14px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-intro {
    display: none !important;
  }
}
@media (pointer: fine) {
  html.ast-cursor,
  html.ast-cursor * {
    cursor: none !important;
  }
}