/* Smart Paving · smartpaving.es
   Una película por capítulos: negro, naranja de marca a sangre y paneles de papel.
   Titulares de cartel en serif fina y mayúsculas; texto pequeño en Archivo; píldoras,
   líneas finas y teselas con tramas viales. El contenido, las tramas y el código son propios. */

@font-face {
  font-family: "Cormorant";
  src: url("../fonts/cormorant-latin-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --negro: #000;
  --oscuro: #0b0806;
  --papel: #f6f6f6;
  --naranja: #fa6608;
  --marino: #0d1f3a;
  --marino-logo: #12284a;
  --ocre: #dcbd95;
  --celeste: #bfd3ea;
  --amarillo: #f5c518;
  --tenue: rgb(255 255 255 / .72);
  --tenue-papel: rgb(0 0 0 / .62);
  --raya: rgb(255 255 255 / .16);
  --foco: #fff;

  --expo: cubic-bezier(.16, 1, .3, 1);
  --borde: clamp(1.25rem, 2.8vw, 2.75rem);
  --serif: "Cormorant", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

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

html {
  background: var(--negro);
  scrollbar-color: #555 var(--negro);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--negro);
  color: #fff;
  font: 400 1rem/1.35 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

::selection { background: var(--naranja); color: #000; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .07em; }
strong { font-weight: 700; }

/* el anillo de foco toma el color que contrasta con el fondo de cada capítulo */
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

.trazos { position: absolute; }
.nb { white-space: nowrap; }

.saltar {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 60;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #000;
}
.saltar:focus { top: .75rem; }

/* ---------- el cartel: la voz de los titulares ---------- */

.cartel {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 6.4vw, 5.75rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.cartel--centro { text-align: center; }

/* cada línea es una máscara: el texto sube desde debajo al entrar en pantalla */
.linea { display: block; overflow: hidden; padding-top: .16em; margin-top: -.16em; }
.linea > span { display: block; text-wrap: balance; }
/* cada línea entra un poco después que la anterior */
.linea:nth-child(2) { --i: 1; }
.linea:nth-child(3) { --i: 2; }
.linea:nth-child(4) { --i: 3; }
.cartel__lado--der .linea:nth-child(1) { --i: 1; }
.cartel__lado--der .linea:nth-child(2) { --i: 2; }
.cartel__lado--der .linea:nth-child(3) { --i: 3; }

/* ---------- píldoras y teselas ---------- */

.pildora {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--naranja);
  color: #1a0d05;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--expo), color .3s var(--expo), border-color .3s var(--expo);
}
.pildora:hover { background: #fff; color: #000; }
.pildora--hueca { background: transparent; border-color: rgb(255 255 255 / .35); color: #fff; }
.pildora--hueca:hover { border-color: #fff; }

.tesela {
  display: inline-block;
  flex: none;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 24%;
  overflow: hidden;
}
.tesela--logo { display: grid; place-items: center; background: #fff; }
.tesela--logo img { width: 80%; height: auto; }
.tesela--enlinea { width: .82em; vertical-align: -.06em; border-radius: 18%; }

/* tramas viales: el dibujo propio de la página */
.trama--carril {
  background:
    repeating-linear-gradient(180deg, #fff 0 22%, transparent 22% 44%) 50% 0 / 9% 100% no-repeat,
    var(--marino-logo);
}
.trama--cebra { background: repeating-linear-gradient(135deg, var(--naranja) 0 12%, #161616 12% 24%); }
.trama--zahorra {
  background:
    radial-gradient(circle, #6b4a2a 16%, transparent 19%) 0 0 / 25% 25%,
    radial-gradient(circle, #6b4a2a 11%, transparent 14%) 12.5% 12.5% / 25% 25%,
    var(--ocre);
}
.trama--mezcla {
  background:
    repeating-linear-gradient(45deg, var(--marino-logo) 0 3%, transparent 3% 14%),
    var(--celeste);
}
.trama--damero { background: conic-gradient(var(--naranja) 25%, #fff 0 50%, var(--naranja) 0 75%, #fff 0) 0 0 / 50% 50%; }
.trama--galon {
  background:
    linear-gradient(135deg, var(--amarillo) 25%, transparent 25%) -12.5% 0 / 25% 25%,
    linear-gradient(225deg, var(--amarillo) 25%, transparent 25%) -12.5% 0 / 25% 25%,
    linear-gradient(315deg, var(--amarillo) 25%, transparent 25%) 0 0 / 25% 25%,
    linear-gradient(45deg, var(--amarillo) 25%, transparent 25%) 0 0 / 25% 25%,
    #161616;
}

/* ---------- portada ---------- */

.portada {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  background: var(--negro);
}

.cima {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: var(--borde);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  justify-self: start;
  text-decoration: none;
}
.marca__nombre {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cima__lema { grid-column: 1 / -1; grid-row: 2; max-width: 26rem; color: var(--tenue); }
/* una frase por línea */
.cima__lema span { display: block; }
.cima .pildora { grid-column: 2; grid-row: 1; justify-self: end; }

/* en pantallas estrechas la píldora de la portada dice solo «Propuesta» */
.pildora__largo { display: none; }
@media (max-width: 29.99rem) {
  .marca__nombre { font-size: .95rem; }
  .cima .pildora { padding-inline: 1.1rem; }
}
@media (min-width: 30rem) {
  .pildora__largo { display: inline; }
  .pildora__corto { display: none; }
}

.portada__titulo {
  position: relative;
  z-index: 1;
  margin-top: clamp(.5rem, 3vh, 2rem);
  padding-inline: var(--borde);
  font-family: var(--serif);
  font-weight: 300;
  font-size: calc((100vw - 2 * var(--borde)) / 4.82);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.portada__titulo .nb { display: block; }

@media (min-width: 56rem) {
  .cima { grid-template-columns: 1fr minmax(0, 26rem) 1fr; align-items: start; }
  .cima__lema { grid-column: 2; grid-row: 1; text-align: center; color: #fff; }
  .cima .pildora { grid-column: 3; }
  .portada__titulo { font-size: calc((100vw - 2 * var(--borde)) / 9.82); white-space: nowrap; }
  .portada__titulo .nb { display: inline; }
}

/* el remolino: cartas en órbita alrededor de un eje vertical */
.remolino {
  --esc: .44;
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1300px;
  perspective-origin: 50% 58%;
  pointer-events: none;
  opacity: calc(1 - var(--sale, 0) * 1.5);
}
.remolino__inclina {
  position: absolute;
  left: 50%;
  top: 66%;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(-9deg + var(--my, 0) * -6deg))
    rotateY(calc(var(--mx, 0) * 9deg))
    scale(var(--esc));
  transition: transform .8s var(--expo);
}
.remolino__giro { transform-style: preserve-3d; transform: rotateY(-24deg); }

/* la carta ocupa su sitio en el anillo... */
.carta {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--a) * 1deg))
    translateZ(calc(var(--r) * 1px))
    translateY(calc(var(--y) * 1px));
}
/* ...y su cara gira en contra para no quedar nunca de canto ni de espaldas */
.carta__giro {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  rotate: calc(var(--t) * 1deg);
  transform: rotateY(calc((var(--a) - 24) * -1deg));
}
.carta--aviso { --w: 168px; --h: 226px; }
.carta--tesela { --w: 104px; --h: 132px; }
.carta--tesela .carta__giro { border-radius: 12px; }
.carta--logo { --w: 116px; --h: 116px; }
.carta--logo .carta__giro { display: grid; place-items: center; border-radius: 26px; background: #fff; }
.carta--logo img { width: 78%; height: auto; }

/* sitio de cada carta en el anillo: ángulo, radio, altura e inclinación.
   Va aquí y no en atributos style para que la página admita una CSP sin estilos en línea. */
.carta:nth-child(1) { --a: 0; --r: 470; --y: 10; --t: -4; }
.carta:nth-child(2) { --a: 26; --r: 400; --y: 150; --t: 8; }
.carta:nth-child(3) { --a: 52; --r: 520; --y: -105; --t: -8; }
.carta:nth-child(4) { --a: 78; --r: 430; --y: 70; --t: 5; }
.carta:nth-child(5) { --a: 104; --r: 500; --y: -90; --t: 10; }
.carta:nth-child(6) { --a: 130; --r: 390; --y: 190; --t: -6; }
.carta:nth-child(7) { --a: 156; --r: 480; --y: -30; --t: -6; }
.carta:nth-child(8) { --a: 182; --r: 420; --y: -110; --t: -10; }
.carta:nth-child(9) { --a: 208; --r: 510; --y: 110; --t: 6; }
.carta:nth-child(10) { --a: 234; --r: 400; --y: -60; --t: 7; }
.carta:nth-child(11) { --a: 260; --r: 490; --y: 170; --t: -5; }
.carta:nth-child(12) { --a: 286; --r: 440; --y: -95; --t: 4; }
.carta:nth-child(13) { --a: 312; --r: 520; --y: 50; --t: -7; }
.carta:nth-child(14) { --a: 338; --r: 410; --y: -100; --t: 9; }

.carta__cara {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px;
  background: linear-gradient(#fbfbfb, #dedede);
  color: #111;
}
.carta__cara .tesela { width: 26px; border-radius: 22%; }
.carta__cara small { font-size: 9px; color: #666; }
.carta__cara strong { font-size: 16px; line-height: 1.05; letter-spacing: -.01em; }
.carta__cara p { font-size: 9.5px; line-height: 1.3; color: #444; }
.carta__pie { display: flex; align-items: center; gap: 3px; margin-top: auto; font-size: 8.5px; color: #555; }
.carta__pie i { width: 11px; height: 11px; border-radius: 50%; background: #9aa; }
.carta__pie i:first-child { background: var(--naranja); }
.carta__pie i:nth-child(2) { background: var(--marino-logo); }
.carta__pie i:last-of-type { margin-right: 4px; }

@media (min-width: 40rem) { .remolino { --esc: .62; } .remolino__inclina { top: 63%; } }
@media (min-width: 64rem) { .remolino { --esc: .88; } }
@media (min-width: 90rem) { .remolino { --esc: 1.05; } }
@media (min-width: 120rem) { .remolino { --esc: 1.3; } }

/* ---------- capítulos ---------- */

.cap {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: var(--borde);
}
.cap__cima {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  font-weight: 500;
}
.cap__entrada { max-width: 32rem; margin-top: 1.1rem; color: var(--tenue); }

.cap--negro { background: var(--negro); }
.cap--oscuro { background: transparent; }
.cap--naranja {
  --foco: var(--marino);
  z-index: 1;
  background:
    radial-gradient(110% 80% at 15% 5%, rgb(255 255 255 / .12), transparent 60%),
    radial-gradient(90% 70% at 90% 85%, rgb(0 0 0 / .08), transparent 60%),
    var(--naranja);
  color: var(--marino);
}
.cap--naranja ::selection { background: var(--marino); color: #fff; }
.cap--naranja .cap__entrada { color: inherit; }

.cap--papel { --foco: #000; background: var(--papel); color: #000; }
.cap--papel .cap__entrada { color: var(--tenue-papel); }

/* un panel de papel se desliza sobre el capítulo anterior, que se queda fijo debajo */
.cap--panel {
  z-index: 2;
  min-height: 0;
  margin-inline: clamp(.5rem, 1vw, .9rem);
  padding: clamp(1.4rem, 2.6vw, 2.5rem);
  border-radius: clamp(1.5rem, 2.4vw, 2.125rem);
  overflow: hidden;
}

.zona { position: relative; }
.zona--naranja { background: var(--naranja); }
.zona--oscura {
  padding-bottom: clamp(.5rem, 1vw, .9rem);
  background:
    radial-gradient(60% 28% at 72% 18%, rgb(132 78 32 / .26), transparent 70%),
    radial-gradient(55% 26% at 22% 56%, rgb(104 66 30 / .2), transparent 70%),
    var(--oscuro);
}

/* un capítulo solo se queda fijo donde cabe entero */
@media (min-width: 60rem) and (min-height: 48rem) {
  .cap--fijo { position: sticky; top: 0; height: 100svh; min-height: 0; z-index: 0; }
}
@media (min-width: 75rem) and (min-height: 56rem) {
  .cap--niveles { position: sticky; top: 0; height: 100svh; min-height: 0; z-index: 0; }
}

/* ---------- 01 · el problema ---------- */

.problema {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(3rem, 10vh, 6rem);
}
.problema__texto { max-width: 26rem; color: var(--tenue); }

@media (min-width: 48rem) {
  .problema .linea:nth-child(1) { margin-left: 22%; }
  .problema .linea:nth-child(2) { margin-left: 6%; }
  .problema__texto { margin-left: 22%; }
}

/* ---------- 02 y 04 · el escaparate: el producto en la mano ---------- */

.escaparate {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding-top: clamp(1.5rem, 4vh, 3rem);
}
.escaparate .cartel { color: var(--marino); }
.escaparate__izq,
.escaparate__der { position: relative; z-index: 1; max-width: 26rem; align-self: stretch; }
.escaparate__izq strong { font-size: 1.125rem; line-height: 1.25; }

/* la cifra fantasma: el plazo del aviso, corriendo detrás del móvil */
.fantasma {
  position: absolute;
  inset: 34% 0 auto;
  z-index: 0;
  border-bottom: 1px solid rgb(13 31 58 / .28);
  color: rgb(255 255 255 / .3);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5rem, 25.5vw, 23rem);
  line-height: .78;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
}

.cartel--partido { display: flex; flex-direction: column; gap: .5rem; align-self: stretch; }
.cartel__lado { display: block; }
.cartel__lado--der { text-align: right; }

/* el móvil y la app dibujada dentro; se mide por su alto para caber en un capítulo fijo */
.movil {
  --alto-movil: clamp(24rem, 62svh, 36rem);
  position: relative;
  z-index: 1;
  flex: none;
  height: var(--alto-movil);
  aspect-ratio: 9 / 18.6;
  padding: calc(var(--alto-movil) / 68);
  border-radius: calc(var(--alto-movil) / 12.5);
  background: #e4e4e4;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), 0 2.5rem 4rem -1.5rem rgb(40 14 0 / .55);
  font-size: calc(var(--alto-movil) / 44);
}

@media (min-width: 60rem) {
  .escaparate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 2.5rem;
  }
  .escaparate > .cartel { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  /* alto libre = pantalla menos barra, titular, márgenes y el hueco del muelle */
  .escaparate > .movil {
    --alto-movil: clamp(19rem, calc(100svh - 25rem), 36rem);
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
    margin-bottom: 4.25rem;
  }
  .escaparate__izq { grid-column: 1; grid-row: 3; max-width: 21rem; align-self: end; }
  .escaparate__der { grid-column: 3; grid-row: 3; max-width: 24rem; justify-self: end; align-self: end; }

  .cartel--partido { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .escaparate--partido > .movil {
    --alto-movil: clamp(22rem, calc(100svh - 14rem), 36rem);
    grid-row: 1 / span 3;
    align-self: center;
    margin-bottom: 0;
  }
}

.movil__pantalla {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: calc(var(--alto-movil) / 15);
  overflow: hidden;
  background: #0a0c0e;
  color: #f0f2f5;
}
.movil__pantalla::before {
  content: "";
  position: absolute;
  left: 50%;
  top: .7em;
  width: 32%;
  height: 1.5em;
  margin-left: -16%;
  border-radius: 999px;
  background: #000;
}

.app__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.2em 1.3em .9em;
  font-size: .85em;
  letter-spacing: .05em;
}
.app__barra b { font-weight: 800; }
.app__barra span { color: #8a929c; }
.app__tarjeta,
.app__hoja {
  display: grid;
  gap: .55em;
  margin: 0 .9em;
  padding: 1em;
  border: 1px solid #2a3138;
  border-radius: 1em;
  background: #161a20;
}
.app__chip {
  justify-self: start;
  padding: .25em .7em;
  border-radius: 999px;
  background: rgb(255 107 26 / .16);
  color: #ff8a4a;
  font-size: .7em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.app__tarjeta strong { font-size: 1.3em; line-height: 1.1; }
.app__sub { color: #8a929c; font-size: .9em; }
.app__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45em; }
.app__fotos i { aspect-ratio: 1; border-radius: .55em; }
.app__fila,
.app__estados {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5em;
  padding-top: .55em;
  border-top: 1px solid #2a3138;
  font-size: .85em;
}
.app__fila span { color: #8a929c; }
.app__fila b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* la línea de estados del aviso: hechos, el actual y los que faltan */
.app__estados { justify-content: flex-start; gap: .4em; }
.app__estados i { width: .6em; height: .6em; border-radius: 50%; background: #2a3138; }
.app__estados i.hecho { background: #8a929c; }
.app__estados i.ahora { background: #ff6b1a; box-shadow: 0 0 0 .22em rgb(255 107 26 / .25); }
.app__estados span { margin-left: auto; font-weight: 600; }
.app__tarjeta--corta { gap: .25em; padding-block: .8em; }
.app__tarjeta--corta strong { font-size: 1em; }
.app__tarjeta--corta .app__fila { padding-top: 0; border-top: 0; }
.app__boton {
  margin: .9em;
  padding: .95em;
  border-radius: .85em;
  background: #ff6b1a;
  color: #0a0c0e;
  font-weight: 700;
  text-align: center;
}
.app__pie {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  padding: .8em 0 1.3em;
  border-top: 1px solid #1e242c;
}
.app__pie svg {
  width: 1.8em;
  height: 1.8em;
  fill: none;
  stroke: #8a929c;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.app__pie svg.es-activo { stroke: #ff6b1a; }

.mapa {
  position: relative;
  flex: 1;
  min-height: 9em;
  margin: 0 .9em;
  border-radius: 1em;
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 47%, #2a3138 47% 53%, transparent 53%),
    linear-gradient(#1e242c 1px, transparent 1px) 0 0 / 100% 2.3em,
    linear-gradient(90deg, #1e242c 1px, transparent 1px) 0 0 / 2.3em 100%,
    #11151a;
}
.mapa__ruta { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa__ruta path {
  fill: none;
  stroke: #ff6b1a;
  stroke-width: 2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.mapa__pin { position: absolute; width: 1.6em; fill: #ff6b1a; stroke: #0a0c0e; stroke-width: 1.2; overflow: visible; }
.mapa__pin--1 { left: 12%; top: 74%; }
.mapa__pin--2 { left: 42%; top: 40%; }
.mapa__pin--3 { left: 76%; top: 8%; }
.app__hoja { margin-block: .8em 1.3em; }
.app__hoja strong { font-size: 1em; }

/* ---------- 03 · el recorrido ---------- */

#recorrido .cartel { margin-top: clamp(1.5rem, 4vw, 3rem); }

.pasos { margin-top: clamp(2rem, 5vw, 4rem); counter-reset: paso; }
.paso {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .9rem 1.25rem;
  padding: 1.4rem 0 2.75rem;
  border-top: 1px solid rgb(0 0 0 / .14);
  counter-increment: paso;
}
.paso::after {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  bottom: .9rem;
  color: var(--tenue-papel);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.paso__que strong { display: block; font-size: 1.125rem; }
.paso__que span { display: block; color: var(--tenue-papel); font-size: .95rem; }
.paso__dibujo {
  grid-row: 1;
  display: grid;
  place-items: center;
  width: clamp(5.5rem, 12vw, 10.5rem);
  aspect-ratio: 3 / 2;
  border-radius: .6rem;
  background: #111;
  color: #fff;
}
.paso__dibujo svg {
  width: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.paso p { grid-column: 1 / -1; max-width: 26rem; color: var(--tenue-papel); }

@media (min-width: 52rem) {
  .paso { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem 2.5rem; }
  .paso__dibujo { grid-row: auto; }
  .paso p { grid-column: auto; justify-self: end; width: 100%; max-width: 21rem; }
  .paso:nth-child(even) { padding-inline: 4.5%; }
  .paso:nth-child(even)::after { left: 4.5%; }
}

/* ---------- el naranja se cierra en un círculo ---------- */

.cortina { position: relative; height: 185vh; background: var(--oscuro); }
.cortina__marco { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.cortina__circulo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--naranja);
  translate: -50% -50%;
  scale: calc(1 - var(--fijo, 1));
}

/* ---------- 05 · Smart Crew: el concepto y una jornada de muestra ---------- */

.equipo {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
.equipo__escena {
  display: grid;
  gap: 2rem;
  align-items: center;
  justify-items: center;
  padding-block: 1.5rem 2.5rem;
  border-bottom: 1px solid var(--raya);
}
.equipo__izq { max-width: 22rem; }
.equipo__der { max-width: 24rem; color: var(--tenue); }

/* el titular grande dice la idea; la jornada, a su lado, la enseña */
.cartel--sobre { justify-self: start; font-size: clamp(3rem, 8.4vw, 7.5rem); }

.parte {
  width: clamp(14.5rem, 22vw, 19rem);
  padding: 1.1rem 1.25rem .9rem;
  border-radius: .9rem;
  background: linear-gradient(#fbfaf7, #e7e2d8);
  color: #151515;
  font-size: .875rem;
  transform: perspective(60rem) rotateY(-18deg) rotateX(7deg) rotate(-3deg);
  box-shadow: 0 2.5rem 5rem -1.5rem #000;
}
.parte__cabeza {
  display: flex;
  justify-content: space-between;
  padding-bottom: .6rem;
  border-bottom: 1.5px solid #151515;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.parte__cabeza span { font-weight: 500; }
.parte__fila,
.parte__firma {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .42rem 0;
  border-bottom: 1px solid rgb(0 0 0 / .12);
}
.parte__fila span { color: #555; }
.parte__fila--total b { font-size: 1.25em; }
/* la última fila es la conformidad: una casilla naranja, ya marcada */
.parte__firma { border-bottom: 0; font-weight: 700; }
.parte__firma i {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--naranja);
  border-radius: 50%;
  background: var(--naranja);
}
.parte__firma i::after {
  content: "";
  position: absolute;
  left: 32%;
  top: 14%;
  width: 30%;
  height: 52%;
  border: solid #fbfaf7;
  border-width: 0 1.5px 1.5px 0;
  rotate: 45deg;
}

@media (min-width: 60rem) {
  .equipo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .equipo__escena { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); padding-left: 6%; }
  .equipo__izq { align-self: end; }
  .equipo__der { justify-self: end; align-self: end; max-width: 20rem; }
}

/* ---------- 06 · niveles ---------- */

/* los bloques caen desde fuera del capítulo: lo que queda por encima no se ve */
.cap--niveles { overflow: clip; }
.cap--niveles .cartel { margin-top: clamp(1rem, 3vh, 2rem); }

.niveles { display: grid; gap: 2.5rem; margin-top: auto; padding-top: clamp(1.75rem, 4vh, 3rem); }
.nivel { display: flex; flex-direction: column; padding-top: 1.25rem; border-top: 1px solid var(--raya); }
.nivel h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
/* el nombre del nivel es la cifra de la columna */
.nivel__nombre {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 3.9vw, 3.5rem);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.nivel ul { display: grid; gap: .35rem; margin-top: .8rem; color: var(--tenue); font-size: .95rem; }
.nivel .pildora { align-self: flex-start; margin-top: 1.1rem; }

/* la pila: un bloque por módulo; cada nivel apoya el suyo sobre los anteriores */
.pila { display: flex; flex-direction: column; justify-content: flex-end; gap: .375rem; margin-top: 1.5rem; }
.bloque { display: grid; place-items: center; height: clamp(3rem, 6.4vh, 4.25rem); border-radius: 1.5rem; }
.bloque img { width: 2.4rem; height: 2.4rem; padding: .18rem; border-radius: 26%; background: #fff; }
.bloque--paving { background: var(--naranja); }
.bloque--recycling { background: var(--celeste); }
.bloque--crew { background: #fff; }
.bloque--crew img { background: var(--papel); }
/* orden de caída: de izquierda a derecha y, en cada pila, de abajo arriba */
#bronze .bloque { --i: 0; }
#silver .bloque:nth-last-child(1) { --i: 1; }
#silver .bloque:nth-last-child(2) { --i: 2; }
#gold .bloque:nth-last-child(1) { --i: 3; }
#gold .bloque:nth-last-child(2) { --i: 4; }
#gold .bloque:nth-last-child(3) { --i: 5; }

@media (min-width: 52rem) {
  .niveles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .nivel { padding: 0 1.5rem; border-top: 0; border-left: 1px solid var(--raya); }
  .nivel:first-child { padding-left: 0; border-left: 0; }
  .nivel:last-child { padding-right: 0; }
  .pila { flex: 1; min-height: calc(3 * clamp(3rem, 6.4vh, 4.25rem) + 2.25rem); }
}

/* ---------- 07 · de serie ---------- */

.cap--flotan { padding-bottom: clamp(3rem, 7vw, 6rem); }
.cap--flotan .cartel { margin-top: clamp(3.5rem, 10vw, 8rem); }
.serie__nota { margin-top: 1.25rem; text-align: center; color: var(--tenue-papel); }

.serie {
  display: grid;
  gap: 1.5rem 2.5rem;
  max-width: 66rem;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
}
.serie div { padding-top: 1rem; border-top: 1px solid rgb(0 0 0 / .14); }
.serie dt { font-weight: 700; font-size: 1.0625rem; }
.serie dd { margin-top: .3rem; color: var(--tenue-papel); }

@media (min-width: 40rem) { .serie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .serie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; } }

/* teselas que asoman por los bordes del panel y se desplazan al entrar */
.flota {
  position: absolute;
  width: clamp(4.5rem, 11vw, 10rem);
  rotate: var(--g);
  translate: 0 calc((1 - var(--entra, 1)) * var(--v));
}
.flota--1 { --g: -16deg; --v: 9rem; left: 13%; top: -2.6rem; }
.flota--2 { --g: 22deg; --v: 14rem; right: 14%; top: -1.6rem; }
.flota--3 { --g: 12deg; --v: -8rem; left: -1.5rem; top: 38%; }
.flota--4 { --g: -9deg; --v: -12rem; right: -1.75rem; top: 44%; }

/* en estrecho solo asoma una, entre los dos rótulos, para no pisar el texto */
@media (max-width: 40rem) {
  .flota--1 { left: 41%; }
  .flota--2, .flota--3, .flota--4 { display: none; }
}

/* ---------- 08 · propuesta ---------- */

.cierre {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(3rem, 8vh, 5rem) 0;
  text-align: center;
}
.tesela--brilla {
  width: 6rem;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .25),
    0 0 4.5rem 1rem rgb(250 102 8 / .55),
    0 0 12rem 5rem rgb(250 102 8 / .22);
}
.cierre__frase { margin-top: 1.75rem; font-size: 1.125rem; font-weight: 700; }
.cierre__texto { max-width: 23rem; margin-top: .5rem; color: var(--tenue); }
.cierre__accion {
  display: block;
  align-self: stretch;
  margin-top: clamp(2rem, 6vh, 4rem);
  padding-bottom: clamp(.9rem, 2vw, 1.5rem);
  border-bottom: 1px solid rgb(255 255 255 / .4);
  color: rgb(255 255 255 / .86);
  font-size: clamp(2.6rem, 8.6vw, 7.75rem);
  text-decoration: none;
  transition: color 1.2s var(--expo), border-color .5s var(--expo);
}
.cierre__accion:hover,
.cierre__accion:focus-visible { color: #fff; border-color: #fff; }
.cierre__nota { margin-top: 1.1rem; color: var(--tenue); font-size: .95rem; }

.pie {
  display: grid;
  gap: .75rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
  font-size: .95rem;
  text-align: center;
}
.pie__centro { display: grid; gap: .25rem; justify-items: center; }
.pie__izq, .pie__der { color: var(--tenue); }
.pie__legal { color: var(--tenue); font-size: .85rem; }

@media (min-width: 52rem) {
  .pie { grid-template-columns: 1fr auto 1fr; align-items: end; text-align: left; }
  .pie__der { text-align: right; }
  .pie__legal { grid-column: 1 / -1; text-align: center; }
}

/* ---------- el muelle: la propuesta siempre a mano ---------- */

.muelle {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .4rem .4rem .7rem;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 5.25rem;
  background: rgb(24 24 24 / .62);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  translate: -50% 0;
  transition: translate .7s var(--expo), opacity .4s var(--expo), visibility 0s;
}
.muelle .tesela { width: 2rem; }
/* escondido deja también de recibir el foco */
.muelle.es-oculto {
  translate: -50% 160%;
  opacity: 0;
  visibility: hidden;
  transition: translate .7s var(--expo), opacity .4s var(--expo), visibility 0s .7s;
}

/* ---------- movimiento ---------- */

/* estados de partida: solo existen si el script los va a soltar */
.con-movimiento .revela:not(.visto) .linea > span { translate: 0 118%; }
.con-movimiento .paso.revela:not(.visto) { opacity: 0; translate: 0 2rem; }
.con-movimiento .pila.revela:not(.visto) .bloque { translate: 0 -55vh; rotate: -9deg; opacity: 0; }
.con-movimiento .cierre__accion.revela:not(.visto) { color: rgb(255 255 255 / .3); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* el anillo gira y cada carta contragira con su misma fase */
  .remolino__giro { animation: girar 70s linear infinite; }
  .carta__giro {
    animation: de-frente 70s linear infinite;
    animation-delay: calc((var(--a) + 336) / 360 * -70s);
  }

  .revela .linea > span { transition: translate 1.1s var(--expo) calc(var(--i, 0) * 90ms); }
  .paso.revela { transition: opacity .8s var(--expo), translate .9s var(--expo); }
  .bloque {
    transition:
      translate 1.1s var(--expo) calc(var(--i) * 110ms),
      rotate 1.1s var(--expo) calc(var(--i) * 110ms),
      opacity .25s linear calc(var(--i) * 110ms);
  }
}

@keyframes girar {
  from { transform: rotateY(-24deg); }
  to { transform: rotateY(336deg); }
}

/* a lo largo de una vuelta: de frente delante y detrás, ladeada 35° en los costados,
   y más oscura cuanto más al fondo */
@keyframes de-frente {
  0% { transform: rotateY(0deg); filter: brightness(1); }
  25% { transform: rotateY(-55deg); filter: brightness(.82); }
  50% { transform: rotateY(-180deg); filter: brightness(.42); }
  75% { transform: rotateY(-305deg); filter: brightness(.82); }
  100% { transform: rotateY(-360deg); filter: brightness(1); }
}