/* Isa Bofill · el cuaderno */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gochi Hand";
  src: url("../fonts/gochi-hand-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --terracota: #b8573b;
  --terracota-hondo: #94422e;
  --arena: #e6d5c3;
  --olivo: #7a8c68;
  --marfil: #f5f2ed;
  --bronce: #c98c47;
  /* bronce para marcas finas sobre arena: 3,3:1 (el claro se queda en 2:1) */
  --bronce-hondo: #a06828;
  --tinta: #2d2a24;
  /* fondos de las franjas (revisión 2026-10-30) */
  /* olivo hondo: marfil encima da 6,4:1 */
  --olivo-hondo: #4f5c43;
  --olivo-claro: #e2e6d9;
  --terracota-claro: #f3e1d8;
  /* olivo al 55 % sobre marfil, opaco: el relleno de las barras del embudo */
  --olivo-barra: #b1baa4;

  /* la cuadrícula: una sola medida para todo */
  --u: 24px;
  --raya: 2px;

  --texto: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mano: "Gochi Hand", "Segoe Print", "Comic Sans MS", cursive;

  color-scheme: light;
  scrollbar-color: var(--olivo) var(--arena);
}

@media (min-width: 768px) {
  :root { --u: 30px; }
}

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

* { margin: 0; }

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

body {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: var(--u);
  color: var(--tinta);
  background-color: var(--arena);
  background-image:
    linear-gradient(rgb(122 140 104 / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgb(122 140 104 / 0.35) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  padding: var(--u) var(--u) calc(var(--u) * 2) calc(var(--u) * 2);
}

::selection {
  background: rgb(122 140 104 / 0.55);
  color: var(--tinta);
}

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

/* la línea de margen del cuaderno */
.margen {
  position: absolute;
  inset: 0 auto 0 var(--u);
  width: var(--raya);
  background: var(--terracota);
}

/* ---------- cabecera ---------- */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
  min-height: calc(var(--u) * 2);
}

.marca {
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---------- botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) / 2);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.boton--tinta {
  height: calc(var(--u) * 2);
  padding: 0 calc(var(--u) / 2);
  font-size: 0.9375rem;
  background: var(--tinta);
  color: var(--marfil);
}
.boton--tinta:hover { background: #45403a; }

.boton--principal {
  /* los textos de los botones cambian según la sección: si son largos,
     pasan a dos líneas en vez de ensanchar la página */
  min-height: calc(var(--u) * 3);
  padding: calc(var(--u) / 2) calc(var(--u) * 0.75);
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  width: 100%;
  max-width: calc(var(--u) * 17);
  font-size: 1.375rem;
  background: var(--terracota);
  color: var(--marfil);
  box-shadow: inset 0 0 0 var(--raya) var(--tinta);
}
.boton--principal:hover { background: var(--terracota-hondo); }
.boton--principal:active { transform: translateY(1px); }

.boton__flecha {
  width: 1.3em;
  height: 0.8em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.boton--principal:hover .boton__flecha { transform: translateX(4px); }

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

.portada {
  display: grid;
  gap: calc(var(--u) * 2);
  padding-top: calc(var(--u) * 2);
}

.gancho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


h1 {
  font-weight: 800;
  font-size: clamp(2.5rem, 1rem + 5.6vw, 6rem);
  line-height: calc(var(--u) * 2);
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: calc(var(--u) * 23);
}

h1 mark {
  color: inherit;
  background: linear-gradient(transparent 50%, rgb(122 140 104 / 0.55) 50%, rgb(122 140 104 / 0.55) 88%, transparent 88%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sub {
  margin-top: var(--u);
  max-width: calc(var(--u) * 19);
  text-wrap: pretty;
}

.gancho .boton--principal { margin-top: var(--u); }

/* ---------- el caminito: un embudo que por debajo sigue siendo una tabla ---------- */

.ejemplo {
  width: 100%;
  max-width: calc(var(--u) * 17);
}

.caminito { width: 100%; }

.junto { white-space: nowrap; }

/* la nota de Isa que presenta el ejemplo, con su flecha hacia el embudo */
.nota-holi {
  margin-bottom: calc(var(--u) / 2);
  font-family: var(--mano);
  font-size: 1.5rem;
  line-height: var(--u);
  color: var(--terracota-hondo);
  transform: rotate(-2deg);
  transform-origin: left bottom;
  text-wrap: balance;
}

.nota-holi__flecha {
  display: inline-block;
  width: 1.7em;
  height: 1.5em;
  margin-left: 0.2em;
  vertical-align: -1em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  background: rgb(245 242 237 / 0.75);
  font-variant-numeric: tabular-nums lining-nums;
}

.tabla caption {
  caption-side: top;
  text-align: left;
  height: var(--u);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tabla th,
.tabla td {
  border: var(--raya) solid var(--tinta);
  padding: 0 calc(var(--u) * 0.6);
  text-align: left;
  font-weight: 400;
}

.tabla thead th {
  height: calc(var(--u) * 2);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--marfil);
}

.tabla tbody th,
.tabla tbody td {
  height: calc(var(--u) * 3);
  font-size: 1.25rem;
}

.tabla .n {
  text-align: right;
  width: 40%;
}

.tabla tbody .n {
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.corte .n { position: relative; }

/* el círculo a mano alrededor del 3 */
.ojo {
  position: absolute;
  top: 50%;
  right: -0.15em;
  width: 4em;
  height: 2.7em;
  transform: translateY(-46%) rotate(-6deg);
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--terracota);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}
.ojo path { vector-effect: non-scaling-stroke; }

/* foto grapada + nota */
.pie {
  display: flex;
  align-items: flex-start;
  gap: var(--u);
  margin-top: var(--u);
  padding-left: calc(var(--u) / 2);
}

.foto {
  position: relative;
  flex: none;
  width: calc(var(--u) * 5);
  margin-top: calc(var(--u) / 2);
  transform: rotate(4deg);
}

.foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 8px solid var(--marfil);
  box-shadow: 0 6px 14px rgb(45 42 36 / 0.22), 0 1px 3px rgb(45 42 36 / 0.18);
  background: var(--bronce);
}

.grapa {
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 50%;
  width: 44px;
  height: 4px;
  margin-left: -22px;
  border-radius: 2px;
  background: linear-gradient(#f1f0ec 0 25%, #b4b2ac 55%, #7d7a74);
  box-shadow: 0 1px 1.5px rgb(45 42 36 / 0.4);
}
/* las dos patitas dobladas que asoman en los extremos */
.grapa::before,
.grapa::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 3px;
  height: 6px;
  border-radius: 0 0 1.5px 1.5px;
  background: linear-gradient(90deg, #9a9791, #6d6a64);
  box-shadow: 0 1px 1px rgb(45 42 36 / 0.3);
}
.grapa::before { left: 0; }
.grapa::after { right: 0; }

.nota {
  font-family: var(--mano);
  font-size: 1.75rem;
  line-height: calc(var(--u) * 1.2);
  color: var(--terracota);
  transform: rotate(-3deg);
  max-width: calc(var(--u) * 9);
}

/* ---------- escritorio ---------- */

/* monitores grandes: la casilla crece para que todo gane presencia */
@media (min-width: 1700px) {
  :root { --u: 34px; }
}

@media (min-width: 1024px) {
  /* en pantallas anchas la hoja se centra: el contenido no pasa de 42 casillas */
  body {
    --lado: max(calc(var(--u) * 6), calc((100vw - var(--u) * 40) / 2));
    padding: var(--u) max(calc(var(--u) * 2), calc((100vw - var(--u) * 40) / 2)) var(--u) var(--lado);
  }

  .margen { left: calc(var(--lado) - var(--u)); }

  .marca { font-size: 1.875rem; }

  .boton--tinta {
    padding: 0 var(--u);
    font-size: 1.125rem;
  }

  .portada {
    grid-template-columns: minmax(0, 1fr) minmax(calc(var(--u) * 13), calc(var(--u) * 17));
    align-items: start;
    gap: calc(var(--u) * 3);
  }

  .kicker {
    font-size: 1.875rem;
    margin-bottom: var(--u);
  }

  /* el titular crece con la casilla para llenar su columna */
  h1 {
    font-size: min(calc(var(--u) * 3.1), 1rem + 5.6vw);
    line-height: calc(var(--u) * 3);
  }

  .sub {
    font-size: 1.375rem;
    line-height: var(--u);
    max-width: calc(var(--u) * 19);
  }

  .gancho .boton--principal {
    margin-top: calc(var(--u) * 2);
    font-size: 1.75rem;
  }


  .tabla caption { font-size: 0.9375rem; }
  .tabla thead th { font-size: 1.125rem; }
  .tabla tbody th { font-size: 1.625rem; }
  .tabla tbody .n { font-size: 2.5rem; }

  .pie { margin-top: var(--u); }
  .foto { margin-top: calc(var(--u) / 2); }
  .nota { font-size: 2.125rem; }
}

/* ---------- la animación (solo si hay JS y se permite movimiento) ---------- */

.is-pendiente .ojo { stroke-dashoffset: 1; }
.is-pendiente .nota { clip-path: inset(-20% 100% -20% 0); opacity: 0; }

.is-dibujado .ojo {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.is-dibujado .nota {
  clip-path: inset(-20% -5% -20% 0);
  opacity: 1;
  transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1) 450ms,
              opacity 200ms linear 450ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}


/* =========================================================
   El resto del cuaderno: secciones bajo la primera pantalla
   ========================================================= */

/* el pie de página remata la hoja: el cuerpo no deja franja abajo */
body { padding-bottom: 0; }

/* ---------- cabecera fija ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* sin JS la cabecera se queda en su sitio (no taparía el texto) */
html:not(.js) .cabecera { position: relative; }

/* al bajar, la cabecera se convierte en una tira de papel con raya de tinta */
.cabecera.is-pegada {
  border-image: linear-gradient(var(--marfil) calc(100% - var(--raya)), var(--tinta) 0) fill 0 / / 0 100vmax;
}

/* ---------- utilidades ---------- */

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

mark {
  color: inherit;
  background: linear-gradient(transparent 50%, rgb(122 140 104 / 0.55) 50%, rgb(122 140 104 / 0.55) 88%, transparent 88%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.prosa { max-width: calc(var(--u) * 24); }
.prosa > * + * { margin-top: var(--u); }
.prosa p { text-wrap: pretty; }

/* las notas a mano de Isa dentro del texto */
.mano {
  font-family: var(--mano);
  font-style: normal;
  font-size: 1.45em;
  color: var(--terracota-hondo);
}

/* ---------- sección: la pila fija (gancho / título / lo que está en juego) ---------- */

.seccion {
  margin-top: calc(var(--u) * 5);
}

.pila {
  max-width: calc(var(--u) * 26);
  margin-bottom: calc(var(--u) * 2);
}

.apunte {
  font-family: var(--mano);
  font-size: 1.5rem;
  line-height: var(--u);
  color: var(--terracota-hondo);
  text-wrap: balance;
}

.apunte em { font-style: normal; }

.apunte--debajo {
  margin-top: var(--u);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

h2 {
  font-weight: 800;
  font-size: 2rem;
  line-height: calc(var(--u) * 1.5);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.apunte + h2 { margin-top: calc(var(--u) / 2); }

h2 .linea { display: block; }

.en-juego {
  margin-top: var(--u);
  font-size: 1.1875rem;
  max-width: calc(var(--u) * 22);
  text-wrap: pretty;
}

h3 {
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: var(--u);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.dicho {
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.dicho--grande {
  font-size: 1.5rem;
  line-height: calc(var(--u) * 1.5);
  letter-spacing: -0.02em;
}

/* ---------- el botón repetido ---------- */

.prosa > .llamada,
.prosa > .llamada + * { margin-top: calc(var(--u) * 2); }

.llamada .boton--principal { font-size: 1.25rem; }

.tranquila {
  margin-top: calc(var(--u) / 2);
  max-width: calc(var(--u) * 14);
  font-size: 0.875rem;
  line-height: calc(var(--u) * 0.75);
  text-wrap: pretty;
}

/* ---------- 2 · holi ---------- */

.contraste {
  display: grid;
  background: rgb(245 242 237 / 0.75);
  border: var(--raya) solid var(--tinta);
}
.contraste p {
  padding: calc(var(--u) / 2) calc(var(--u) * 0.6);
}
.contraste p + p { border-top: var(--raya) solid var(--tinta); }

/* ---------- 3 · el recorrido: una tabla por etapa ---------- */

.recorrido__texto { margin-bottom: calc(var(--u) * 2); }

.etapas {
  display: grid;
  gap: var(--u);
}

.etapa {
  display: flex;
  flex-direction: column;
  border: var(--raya) solid var(--tinta);
  background: rgb(245 242 237 / 0.75);
}
.etapa .preguntas {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.preguntas li:last-child { flex: 1; }

.etapa h3 {
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 0.6);
  background: var(--tinta);
  color: var(--marfil);
  font-size: 1.25rem;
}

.preguntas {
  list-style: none;
  padding: 0;
}

.preguntas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--u) * 2);
  column-gap: calc(var(--u) * 0.6);
  padding: calc(var(--u) / 2) 0 calc(var(--u) / 2) calc(var(--u) * 0.6);
}
.preguntas li + li { border-top: var(--raya) solid var(--tinta); }

.casilla {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: calc(var(--u) / -2);
  border-left: var(--raya) solid var(--tinta);
}
.casilla::before {
  content: "";
  width: calc(var(--u) * 0.75);
  height: calc(var(--u) * 0.75);
  border: var(--raya) solid var(--tinta);
  background: var(--marfil);
}

/* la pregunta que Isa haría primero, marcada a mano */
.casilla--marcada { position: relative; }
.marca-celda {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 1.1);
  height: calc(var(--u) * 1.1);
  margin: calc(var(--u) * -0.7) 0 0 calc(var(--u) * -0.45);
  overflow: visible;
  fill: none;
  stroke: var(--bronce-hondo);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.etapa--despues {
  background: transparent;
  border-style: dashed;
  padding: var(--u) calc(var(--u) * 0.6);
}
.etapa--despues h3 {
  display: block;
  min-height: 0;
  padding: 0;
  background: none;
  color: var(--tinta);
}
.etapa--despues p {
  margin-top: calc(var(--u) / 2);
  max-width: calc(var(--u) * 26);
}

/* ---------- 4 · todo conectado ---------- */

.celdas {
  border: var(--raya) solid var(--tinta);
  background: rgb(245 242 237 / 0.75);
}
.celdas p { padding: calc(var(--u) / 2) calc(var(--u) * 0.6); }
.celdas p + p { border-top: var(--raya) solid var(--tinta); }

/* ---------- 5 · los pasos, con el número en el margen ---------- */

.pasos {
  list-style: none;
  padding: 0;
}

.paso {
  position: relative;
  padding-top: var(--u);
  border-top: var(--raya) solid var(--tinta);
}
.paso + .paso { margin-top: calc(var(--u) * 2); }

.paso h3 {
  font-size: 1.375rem;
  margin-bottom: var(--u);
}

.paso__n {
  display: block;
  font-size: 3.5rem;
  line-height: calc(var(--u) * 2.5);
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}

.cierre-seccion { margin-top: calc(var(--u) * 3); }

/* nota a mano en el margen del primer paso y flecha del libro: solo en pantallas anchas */
.paso__nota,
.flecha-mano { display: none; }

/* ---------- 6 · el libro de cuentas ---------- */

.libro {
  max-width: calc(var(--u) * 32);
  border: var(--raya) solid var(--tinta);
  background: rgb(245 242 237 / 0.75);
}

.libro__fila {
  display: grid;
  padding: calc(var(--u) / 2) calc(var(--u) * 0.6);
}
.libro__fila + .libro__fila { border-top: var(--raya) solid var(--tinta); }

.libro dt { font-weight: 800; }

.libro dd::first-letter { text-transform: uppercase; }

.tocar__texto { margin-top: calc(var(--u) * 2); }

/* ---------- 7 · tres maneras ---------- */

.opciones {
  list-style: none;
  padding: 0;
  max-width: calc(var(--u) * 30);
  border-bottom: var(--raya) solid var(--tinta);
}

.opciones li {
  display: grid;
  grid-template-columns: var(--u) minmax(0, 1fr);
  column-gap: calc(var(--u) / 2);
  padding: var(--u) 0;
  border-top: var(--raya) solid var(--tinta);
  font-size: 1.1875rem;
  text-wrap: pretty;
}
.opciones li::before {
  content: "";
  width: calc(var(--u) * 0.75);
  height: calc(var(--u) * 0.75);
  margin-top: calc(var(--u) / 8);
  border: var(--raya) solid var(--tinta);
  border-radius: 50%;
}
.opciones strong { font-weight: 800; }

.modos__texto { margin-top: calc(var(--u) * 2); }

/* ---------- 8 · encaje: sí y no, marcados a mano ---------- */

.lista + .lista { margin-top: calc(var(--u) * 2); }

.lista h3 {
  font-size: 1.25rem;
  max-width: calc(var(--u) * 24);
}

.lista ul {
  list-style: none;
  padding: 0;
  max-width: calc(var(--u) * 24);
}

.lista li {
  position: relative;
  margin-top: var(--u);
  padding-left: calc(var(--u) * 1.5);
  text-wrap: pretty;
}

.marca-mano {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--u);
  height: var(--u);
  overflow: visible;
  fill: none;
  stroke: var(--bronce-hondo);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trazo path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.aparte { display: block; margin-top: calc(var(--u) / 2); }

.encaje__texto { margin-top: calc(var(--u) * 3); }

/* ---------- 9 · los casos, como hojas del cuaderno ---------- */

.hoja {
  background-color: var(--marfil);
  background-image:
    linear-gradient(rgb(122 140 104 / 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgb(122 140 104 / 0.16) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  border: var(--raya) solid var(--tinta);
  box-shadow: 0 6px 14px rgb(45 42 36 / 0.14), 0 1px 3px rgb(45 42 36 / 0.12);
}
.hoja + .hoja { margin-top: calc(var(--u) * 2); }

.hoja h3 {
  padding: var(--u) calc(var(--u) * 0.6);
  border-bottom: var(--raya) solid var(--tinta);
  font-size: 1.375rem;
}

.hoja__cuerpo { display: grid; }

.hoja__problema,
.hoja__plan {
  max-width: none;
  padding: var(--u) calc(var(--u) * 0.6);
}

.hoja__plan { border-top: var(--raya) solid var(--tinta); }

.hoja__etiqueta {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guiones {
  list-style: none;
  padding: 0;
}
.guiones li {
  position: relative;
  padding-left: var(--u);
  text-wrap: pretty;
}
.guiones li + li { margin-top: calc(var(--u) / 2); }
.guiones li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--u) / 2 - 1px);
  width: calc(var(--u) / 2);
  height: var(--raya);
  background: var(--tinta);
}

/* ---------- 10 · lo que no voy a recomendar, tachado a mano ---------- */

.tachados {
  list-style: none;
  padding: 0;
  max-width: calc(var(--u) * 28);
}
.tachados li {
  font-size: 1.1875rem;
  text-wrap: pretty;
}
.tachados li + li { margin-top: calc(var(--u) * 2); }

.tachar {
  font-weight: 800;
  padding: 0 0.15em;
  margin: 0 -0.15em;
  background: no-repeat left 55% / 100% 0.75em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M2 14C40 9 90 12 130 8s50-2 66-3M8 18c50-4 120-7 188-12' fill='none' stroke='%23a06828' stroke-width='4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 11 · el cierre, en tinta ---------- */

.cierre,
.pie-pagina {
  position: relative;
  z-index: 1;
  background-color: var(--tinta);
  border-image: linear-gradient(var(--tinta), var(--tinta)) fill 0 / / 0 100vmax;
  color: var(--marfil);
}

.cierre {
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 4);
  margin-top: calc(var(--u) * 6);
}
.inicio .cierre { border-image: none; }

.cierre h2 {
  font-size: 2.5rem;
  line-height: calc(var(--u) * 2);
}

.cierre .en-juego {
  font-family: var(--mano);
  font-size: 1.625rem;
  line-height: calc(var(--u) * 1.25);
  color: var(--arena);
}

.cierre .boton--principal { box-shadow: inset 0 0 0 var(--raya) var(--marfil); }
.cierre :focus-visible { outline-color: var(--marfil); }

.pie-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--u);
  min-height: calc(var(--u) * 3);
}

.pie-pagina .marca { font-size: 1.125rem; }

/* ---------- escritorio: cada sección con su propia composición ---------- */

@media (min-width: 1024px) {
  .seccion {
    margin-top: calc(var(--u) * 6);
    font-size: calc(var(--u) * 0.66);
  }

  .apunte { font-size: 1.875rem; }

  h2 {
    font-size: calc(var(--u) * 1.8);
    line-height: calc(var(--u) * 2);
  }

  .en-juego {
    font-size: calc(var(--u) * 0.8);
    max-width: calc(var(--u) * 24);
  }

  h3 { font-size: calc(var(--u) * 0.75); }

  .dicho { font-size: calc(var(--u) * 0.8); }
  .dicho--grande {
    font-size: calc(var(--u) * 1.1);
    line-height: calc(var(--u) * 1.5);
  }

  .llamada .boton--principal { font-size: 1.5rem; }
  .tranquila {
    max-width: calc(var(--u) * 16);
    font-size: calc(var(--u) * 0.5);
  }

  /* 1 · el texto se sangra bajo un título que ocupa todo el ancho */
  .flipa__texto { margin-left: calc(var(--u) * 10); }

  .contraste { grid-template-columns: 1fr 1fr; }
  .contraste p + p {
    border-top: 0;
    border-left: var(--raya) solid var(--tinta);
  }

  /* 3 · las cuatro etapas en una cuadrícula de 2 × 2 */
  .etapas { grid-template-columns: 1fr 1fr; }
  .etapa h3 { font-size: calc(var(--u) * 0.8); }
  .etapa--despues { grid-column: 1 / -1; }

  /* 4 · título fijo a la izquierda, razonamiento a la derecha */
  .conectadas {
    display: grid;
    grid-template-columns: minmax(0, calc(var(--u) * 13)) minmax(0, 1fr);
    column-gap: calc(var(--u) * 3);
    align-items: start;
  }
  .conectadas .pila {
    position: sticky;
    top: calc(var(--u) * 4);
    margin-bottom: 0;
  }

  /* 5 · números grandes en el margen del cuaderno */
  .paso {
    display: grid;
    grid-template-columns: minmax(0, calc(var(--u) * 12)) minmax(0, calc(var(--u) * 24));
    column-gap: calc(var(--u) * 2);
  }
  .paso h3 {
    font-size: calc(var(--u) * 0.9);
    line-height: calc(var(--u) * 1.25);
    margin-bottom: 0;
  }
  .paso__n {
    position: absolute;
    top: calc(var(--u) / 2);
    right: calc(100% + var(--u) * 2);
    font-size: calc(var(--u) * 3.4);
    line-height: calc(var(--u) * 3);
  }
  .trabajamos .cierre-seccion { margin-left: calc(var(--u) * 14); }
  .paso > .prosa {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .paso__nota {
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin-top: var(--u);
    max-width: calc(var(--u) * 9);
    font-family: var(--mano);
    font-size: 1.625rem;
    line-height: calc(var(--u) * 1.1);
    color: var(--terracota-hondo);
    transform: rotate(-2deg);
    transform-origin: left top;
  }

  /* 6 · libro de dos columnas */
  .libro__fila {
    grid-template-columns: calc(var(--u) * 10) minmax(0, 1fr);
    padding: 0;
  }
  .libro dt,
  .libro dd { padding: calc(var(--u) / 2) calc(var(--u) * 0.6); }
  .libro dt { border-right: var(--raya) solid var(--tinta); }
  .tocar__texto {
    position: relative;
    margin-left: calc(var(--u) * 10);
  }
  .flecha-mano {
    display: block;
    position: absolute;
    left: calc(var(--u) * -3.4);
    top: calc(var(--u) * -1.9);
    width: calc(var(--u) * 2.6);
    height: calc(var(--u) * 2.9);
    overflow: visible;
    fill: none;
    stroke: var(--bronce-hondo);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .tocar__texto > .flecha-mano + * { margin-top: 0; }

  /* 7 · tres opciones a renglón grande */
  .opciones li {
    font-size: calc(var(--u) * 0.8);
    column-gap: var(--u);
  }
  .modos__texto { margin-left: calc(var(--u) * 10); }

  /* 8 · las marcas a mano en la columna del margen */
  .lista li { padding-left: 0; }
  .marca-mano {
    left: calc(var(--u) * -3.25);
    top: calc(var(--u) * -0.1);
    width: calc(var(--u) * 1.25);
    height: calc(var(--u) * 1.25);
  }
  .lista h3 { font-size: calc(var(--u) * 0.8); }

  /* 9 · hojas con el problema y el plan lado a lado */
  .hoja__cuerpo { grid-template-columns: 1fr 1fr; }
  .hoja__plan {
    border-top: 0;
    border-left: var(--raya) solid var(--tinta);
  }
  .hoja h3 { font-size: calc(var(--u) * 0.9); }
  .hoja__problema,
  .hoja__plan { padding: var(--u); }
  .hoja:nth-child(2) { margin-left: calc(var(--u) * 2); }
  .casos .cierre-seccion { margin-left: calc(var(--u) * 10); }

  /* 10 */
  .tachados li { font-size: calc(var(--u) * 0.8); }

  /* 11 */
  .cierre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--u) * 16));
    column-gap: calc(var(--u) * 3);
    align-items: end;
    padding: calc(var(--u) * 4) 0 calc(var(--u) * 5);
  }
  .cierre .pila { margin-bottom: 0; }
  .cierre h2 {
    font-size: calc(var(--u) * 2.6);
    line-height: calc(var(--u) * 3);
  }
  .cierre .en-juego { font-size: calc(var(--u) * 1.05); }
  .pie-pagina .marca { font-size: 1.375rem; }
}

/* ---------- trazos a mano: se dibujan al entrar en pantalla ---------- */

.is-pendiente .trazo path { stroke-dashoffset: 1; }
.is-dibujado .trazo path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 520ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 140ms);
}

.is-pendiente .tachar { background-size: 0% 0.75em; }
.is-dibujado .tachar {
  background-size: 100% 0.75em;
  transition: background-size 700ms cubic-bezier(0.16, 1, 0.3, 1) 150ms;
}
.is-dibujado li + li .tachar { transition-delay: 650ms; }


/* =========================================================
   Pie de página, páginas legales, aviso del formulario
   y aviso de cookies (tickets 03, 04 y 05)
   ========================================================= */

/* ---------- pie de página ---------- */

.pie-pagina {
  flex-wrap: wrap;
  row-gap: calc(var(--u) / 2);
  padding: var(--u) 0;
}

.pie-pagina__anio {
  font-weight: 400;
  color: var(--arena);
}

.pie-pagina__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--u);
  padding: 0;
  list-style: none;
}

.pie-pagina a:not(.boton) {
  color: var(--marfil);
  text-decoration: underline;
  text-decoration-color: rgb(245 242 237 / 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pie-pagina a:not(.boton):hover { text-decoration-color: var(--marfil); }
.pie-pagina a[aria-current="page"] {
  text-decoration-color: var(--bronce);
  text-decoration-thickness: 2px;
}
.pie-pagina :focus-visible { outline-color: var(--marfil); }

/* botón de papel sobre la tinta: el contrario del botón de la cabecera */
.boton--papel {
  height: calc(var(--u) * 2);
  padding: 0 calc(var(--u) / 2);
  font-size: 0.9375rem;
  color: var(--marfil);
  box-shadow: inset 0 0 0 var(--raya) var(--marfil);
}
.boton--papel:hover {
  background: var(--marfil);
  color: var(--tinta);
}

@media (max-width: 767px) {
  .pie-pagina {
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--u) * 1.5) 0 calc(var(--u) * 2);
  }
  .pie-pagina__enlaces { flex-direction: column; }
  .pie-pagina__enlaces a {
    display: inline-block;
    padding: calc(var(--u) / 4) 0;
  }
  .pie-pagina .boton--papel { margin-top: calc(var(--u) / 2); }
}

@media (min-width: 768px) {
  .pie-pagina .marca { margin-right: auto; }
}

@media (min-width: 1024px) {
  .boton--papel {
    padding: 0 var(--u);
    font-size: 1.125rem;
  }
}

/* ---------- aviso: el formulario aún no está listo ---------- */

.aviso-form {
  position: fixed;
  z-index: 20;
  top: calc(var(--u) * 2.5);
  left: var(--u);
  right: var(--u);
  margin-inline: auto;
  max-width: calc(var(--u) * 15);
  display: grid;
  gap: calc(var(--u) / 2);
  justify-items: start;
  padding: var(--u);
  background-color: var(--marfil);
  border: var(--raya) solid var(--tinta);
  box-shadow: 0 10px 28px rgb(45 42 36 / 0.26), 0 2px 4px rgb(45 42 36 / 0.18);
}
.aviso-form[hidden] { display: none; }

.aviso-form__nota {
  font-family: var(--mano);
  font-size: 1.75rem;
  line-height: calc(var(--u) * 1.25);
  color: var(--terracota-hondo);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.aviso-form__texto { text-wrap: pretty; }

.aviso-form a {
  color: inherit;
  font-weight: 800;
  text-decoration-color: var(--bronce);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.aviso-form__cerrar {
  height: calc(var(--u) * 1.75);
  padding: 0 var(--u);
  border: 0;
  font: inherit;
  font-weight: 800;
  background: var(--tinta);
  color: var(--marfil);
  cursor: pointer;
}
.aviso-form__cerrar:hover { background: #45403a; }

.aviso-form.is-nuevo { animation: aviso-entra 420ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes aviso-entra {
  from { transform: translateY(calc(var(--u) * -0.75)); opacity: 0; }
}

/* ---------- páginas legales ---------- */

.marca--enlace {
  color: inherit;
  text-decoration: none;
}

.legal {
  max-width: calc(var(--u) * 27);
  padding: calc(var(--u) * 2) 0 calc(var(--u) * 4);
}

.borrador {
  display: inline-block;
  margin-bottom: var(--u);
  padding: 0 calc(var(--u) / 2);
  font-family: var(--mano);
  font-size: 1.375rem;
  line-height: calc(var(--u) * 1.5);
  color: var(--terracota-hondo);
  background: rgb(245 242 237 / 0.7);
  box-shadow: inset 0 0 0 var(--raya) var(--terracota-hondo);
  transform: rotate(-2deg);
  transform-origin: left center;
}

.legal h1 {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);
  line-height: calc(var(--u) * 2);
  max-width: none;
}

.legal h2 {
  margin-top: calc(var(--u) * 2);
  margin-bottom: calc(var(--u) / 2);
  font-size: 1.375rem;
  line-height: var(--u);
  letter-spacing: -0.015em;
}

.legal p,
.legal ul,
.legal .tabla-cookies { margin-top: calc(var(--u) / 2); }
.legal h2 + p,
.legal h2 + ul { margin-top: 0; }

.legal p,
.legal li { text-wrap: pretty; }

.legal .legal__fecha {
  margin-top: var(--u);
  font-size: 0.9375rem;
}

.legal ul {
  padding-left: var(--u);
  list-style: square;
}
.legal li::marker { color: var(--bronce); }
.legal li + li { margin-top: calc(var(--u) / 4); }

.legal a {
  color: inherit;
  text-decoration-color: var(--bronce);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal a:hover { color: var(--terracota-hondo); }

/* los huecos por rellenar: subrayador olivo + "pendiente" a mano */
.pendiente mark {
  padding: 0 0.2em;
  font-weight: 800;
  background: rgb(122 140 104 / 0.42);
}
.pendiente__mano {
  display: inline-block;
  font-family: var(--mano);
  font-size: 1.15em;
  line-height: 1;
  color: var(--terracota-hondo);
  transform: rotate(-4deg) translateY(-0.15em);
  white-space: nowrap;
}

/* la tabla de cookies: en el móvil cada cookie es una ficha */
.tabla-cookies .tabla { box-shadow: 0 1px 2px rgb(45 42 36 / 0.35); }
.tabla-cookies .tabla tbody th,
.tabla-cookies .tabla tbody td {
  height: auto;
  padding: calc(var(--u) / 4) calc(var(--u) * 0.4);
  font-size: 0.9375rem;
  line-height: calc(var(--u) * 0.9);
  vertical-align: top;
}
.tabla-cookies .tabla tbody th { font-weight: 800; }
.tabla-cookies .tabla thead th { font-size: 0.75rem; }

@media (max-width: 767px) {
  .tabla-cookies .tabla,
  .tabla-cookies tbody,
  .tabla-cookies tr,
  .tabla-cookies th,
  .tabla-cookies td { display: block; }
  .tabla-cookies thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabla-cookies .tabla { background: none; box-shadow: none; }
  .tabla-cookies tr {
    background: rgb(245 242 237 / 0.85);
    border: var(--raya) solid var(--tinta);
    box-shadow: 0 1px 2px rgb(45 42 36 / 0.35);
  }
  .tabla-cookies tr + tr { margin-top: calc(var(--u) / 2); }
  .tabla-cookies .tabla tbody th,
  .tabla-cookies .tabla tbody td { border: 0; }
  .tabla-cookies .tabla tbody th {
    background: var(--tinta);
    color: var(--marfil);
  }
  .tabla-cookies td {
    display: grid;
    grid-template-columns: calc(var(--u) * 4) minmax(0, 1fr);
    column-gap: calc(var(--u) / 2);
  }
  .tabla-cookies td::before {
    content: attr(data-titulo);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

@media (min-width: 1024px) {
  .legal { font-size: 1.125rem; line-height: calc(var(--u) * 0.95); }
  .legal h1 { line-height: calc(var(--u) * 2.5); }
  .legal h2 { font-size: 1.625rem; line-height: calc(var(--u) * 1.2); }
  .tabla-cookies .tabla tbody th,
  .tabla-cookies .tabla tbody td { font-size: 1rem; }
  .tabla-cookies .tabla thead th { font-size: 0.8125rem; }
}

/* ---------- aviso de cookies: una hoja del mismo cuaderno ---------- */

#cc-main {
  --cc-font-family: var(--texto);
  --cc-z-index: 40;
  --cc-modal-margin: var(--u);
  --cc-modal-border-radius: 0;
  --cc-btn-border-radius: 0;
  --cc-pm-toggle-border-radius: 0;
  --cc-bg: var(--marfil);
  --cc-primary-color: var(--tinta);
  --cc-secondary-color: var(--tinta);
  --cc-link-color: var(--tinta);
  --cc-separator-border-color: rgb(45 42 36 / 0.25);
  --cc-overlay-bg: rgb(45 42 36 / 0.55);
  --cc-footer-bg: transparent;
  --cc-footer-color: var(--tinta);
  --cc-footer-border-color: rgb(45 42 36 / 0.25);

  /* Aceptar y Rechazar: el mismo botón de tinta, sin trampas */
  --cc-btn-primary-bg: var(--tinta);
  --cc-btn-primary-color: var(--marfil);
  --cc-btn-primary-border-color: var(--tinta);
  --cc-btn-primary-hover-bg: #45403a;
  --cc-btn-primary-hover-color: var(--marfil);
  --cc-btn-primary-hover-border-color: #45403a;
  /* Configurar: el mismo botón, hueco */
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--tinta);
  --cc-btn-secondary-border-color: var(--tinta);
  --cc-btn-secondary-hover-bg: var(--tinta);
  --cc-btn-secondary-hover-color: var(--marfil);
  --cc-btn-secondary-hover-border-color: var(--tinta);

  --cc-toggle-on-bg: var(--tinta);
  --cc-toggle-off-bg: #8a8072;
  --cc-toggle-on-knob-bg: var(--marfil);
  --cc-toggle-off-knob-bg: var(--marfil);
  --cc-toggle-enabled-icon-color: var(--tinta);
  --cc-toggle-disabled-icon-color: #6f675c;
  --cc-toggle-readonly-bg: var(--olivo);
  --cc-toggle-readonly-knob-bg: var(--marfil);
  --cc-toggle-readonly-knob-icon-color: var(--olivo);
  --cc-section-category-border: rgb(45 42 36 / 0.25);
  --cc-cookie-category-block-bg: rgb(230 213 195 / 0.5);
  --cc-cookie-category-block-border: rgb(45 42 36 / 0.35);
  --cc-cookie-category-block-hover-bg: rgb(230 213 195 / 0.8);
  --cc-cookie-category-block-hover-border: var(--tinta);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: rgb(230 213 195 / 0.5);
  --cc-webkit-scrollbar-bg: var(--olivo);
  --cc-webkit-scrollbar-hover-bg: var(--tinta);

  font-size: 1rem;
  color: var(--tinta);
}

#cc-main .cm,
#cc-main .pm {
  border: var(--raya) solid var(--tinta);
  box-shadow: 0 16px 36px -8px rgb(45 42 36 / 0.32), 0 3px 4px -2px rgb(45 42 36 / 0.25);
}

/* la hoja del aviso lleva la misma cuadrícula que la página */
#cc-main .cm {
  max-width: calc(var(--u) * 15);
  background-color: var(--marfil);
  background-image:
    linear-gradient(rgb(122 140 104 / 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgb(122 140 104 / 0.22) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  background-position: -1px -1px;
}

#cc-main .cm__texts { padding-top: var(--u); }

#cc-main .cm .cm__title,
#cc-main .cm .cm__desc,
#cc-main .cm .cm__btns,
#cc-main .cm .cm__links { padding-left: var(--u) !important; padding-right: var(--u) !important; }

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 800;
  font-size: 1.375rem;
  line-height: var(--u);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

#cc-main .cm__title + .cm__desc { margin-top: calc(var(--u) / 2); }

#cc-main .cm__desc {
  font-size: 1rem;
  line-height: 1.5;
  padding-bottom: var(--u);
  text-wrap: pretty;
}

#cc-main .cm .cm__btns {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  gap: calc(var(--u) / 3);
  border-top: 0 !important;
  padding-top: 0;
  padding-bottom: var(--u);
  border-top: 0;
}

#cc-main .cm .cm__btn-group {
  display: grid !important;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) / 3);
}
#cc-main .cm .cm__btn-group + .cm__btn-group { grid-template-columns: 1fr; margin: 0 !important; }
#cc-main .cm .cm__btn-group .cm__btn + .cm__btn { margin: 0 !important; }

#cc-main .cm .cm__btn-group .cm__btn,
#cc-main .pm .pm__btn-group .pm__btn {
  min-height: calc(var(--u) * 2);
  margin: 0;
  padding: 0 calc(var(--u) / 2);
  border-width: var(--raya);
  font-size: 0.9375rem;
  font-weight: 800;
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
              color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

#cc-main .cm__footer {
  padding: calc(var(--u) / 2) 0;
  font-size: 0.9375rem;
}

#cc-main a {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--bronce);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  background: none;
}

#cc-main :focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}
#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible { outline-offset: 2px; }

/* preferencias */
#cc-main .pm { background: var(--marfil); }
#cc-main .pm__header,
#cc-main .pm__body,
#cc-main .pm__footer { padding-left: var(--u); padding-right: var(--u); }
#cc-main .pm__section-title { font-weight: 800; font-size: 1.0625rem; }
#cc-main .pm__section-desc { font-size: 1rem; line-height: 1.5; }
#cc-main .pm__section--toggle,
#cc-main .pm__section-title { border-radius: 0; }
#cc-main .pm__footer,
#cc-main .pm__btn-group { gap: calc(var(--u) / 3); }
#cc-main .pm__btn + .pm__btn,
#cc-main .pm__btn-group + .pm__btn-group { margin: 0; }

@media (min-width: 1024px) {
  #cc-main .cm__title,
  #cc-main .pm__title { font-size: 1.625rem; line-height: calc(var(--u) * 1.1); }
  #cc-main .cm .cm__btn-group .cm__btn,
  #cc-main .pm .pm__btn-group .pm__btn { font-size: 1.0625rem; }
  #cc-main .cm__desc { font-size: 1.0625rem; }
}

/* ---------- saltar al contenido ---------- */

.salto {
  position: absolute;
  z-index: 60;
  top: calc(var(--u) / 2);
  left: calc(var(--u) * 2);
  padding: calc(var(--u) / 4) calc(var(--u) / 2);
  background: var(--tinta);
  color: var(--marfil);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--u)));
}
.salto:focus-visible,
.salto:focus { transform: none; }

main:focus { outline: none; }


/* =========================================================
   Revisión 2026-10-30: la página cambia de suelo en cada
   conversación. La cuadrícula queda solo en la portada y en
   «Visualiza el camino»; el resto son franjas a sangre.
   ========================================================= */

/* las medidas de los lados que antes llevaba el cuerpo, ahora las lleva cada franja */
.inicio {
  --izq: calc(var(--u) * 2);
  --der: var(--u);
  padding: 0;
  background: var(--marfil);
}

@media (min-width: 1024px) {
  .inicio {
    --izq: max(calc(var(--u) * 6), calc((100vw - var(--u) * 40) / 2));
    --der: max(calc(var(--u) * 2), calc((100vw - var(--u) * 40) / 2));
  }
}

/* el papel cuadriculado con su línea de margen: solo en los momentos de cuaderno */
.inicio .cabecera,
.portada,
.recorrido {
  background-color: var(--arena);
  background-image:
    linear-gradient(90deg, transparent calc(var(--izq) - var(--u)), var(--terracota) 0, var(--terracota) calc(var(--izq) - var(--u) + var(--raya)), transparent 0),
    linear-gradient(rgb(122 140 104 / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgb(122 140 104 / 0.35) 1px, transparent 1px);
  background-size: auto, var(--u) var(--u), var(--u) var(--u);
}

.inicio .cabecera {
  min-height: calc(var(--u) * 3);
  padding: calc(var(--u) / 2) var(--der) calc(var(--u) / 2) var(--izq);
}

/* cada franja: su propio suelo, a todo lo ancho */
.inicio .seccion {
  position: relative;
  margin-top: 0;
  padding: calc(var(--u) * 4) var(--der) calc(var(--u) * 4) var(--izq);
  background-color: var(--fondo, var(--marfil));
}

.portada { padding: calc(var(--u) * 2) var(--der) calc(var(--u) * 3) var(--izq); }

.flipa,
.modos,
.no-recomiendo { --fondo: var(--marfil); }
.conectadas { --fondo: var(--terracota-claro); }
.casos { --fondo: var(--arena); }
.tocar { --fondo: var(--marfil); }
.recorrido { --fondo: var(--arena); }
.encaje { --fondo: var(--olivo-claro); }
.holi { --fondo: var(--olivo-hondo); }
.trabajamos,
.inicio .cierre { --fondo: var(--tinta); }

/* ---------- portada: el camino de las 1.000 personas ---------- */
/* Un recorrido con una parada por etapa: el camino (la franja olivo con
   la raya discontinua en medio) se va estrechando de parada en parada. */

.camino__titulo {
  margin-bottom: calc(var(--u) / 2);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camino {
  position: relative;
  padding: 0 0 0 calc(var(--u) * 1.25);
  list-style: none;
}

/* la línea a pie que une las paradas */
.camino::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 0.6);
  bottom: calc(var(--u) * 1.4);
  left: calc(var(--u) * 0.3);
  border-left: var(--raya) dashed var(--tinta);
}

.parada {
  position: relative;
  padding-bottom: calc(var(--u) * 1.6);
}
.parada:last-child { padding-bottom: calc(var(--u) * 0.6); }

/* el punto de cada parada */
.parada::before {
  content: "";
  position: absolute;
  top: calc(var(--u) * 0.35);
  left: calc(var(--u) * -1.25);
  width: calc(var(--u) * 0.65);
  height: calc(var(--u) * 0.65);
  border: var(--raya) solid var(--tinta);
  border-radius: 50%;
  background: var(--marfil);
}
.parada--corte::before { background: var(--terracota); }

/* el tramo de camino, que se estrecha */
.parada::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(var(--u) * 0.45);
  width: var(--ancho);
  height: calc(var(--u) * 0.45);
  border: var(--raya) solid var(--tinta);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, var(--marfil) 0 10px, transparent 10px 20px) center / 100% 2px no-repeat,
    var(--olivo-barra);
  transform-origin: left center;
}
.parada:last-child::after { bottom: 0; }

.parada__n {
  position: relative;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.parada__texto { font-size: 1rem; }

/* el círculo a mano, alrededor del 3 */
.parada__n--corte { display: inline-block; padding: 0 0.3em; }
.parada__n--corte .ojo {
  top: 50%;
  left: 50%;
  width: 2.6em;
  height: 1.7em;
  transform: translate(-50%, -50%) rotate(-5deg);
}

.nota { max-width: calc(var(--u) * 10); }

/* los tramos crecen mientras su cifra cuenta */
.is-pendiente .parada::after { transform: scaleX(0); }
.is-pendiente .parada.contando::after,
.is-pendiente .parada.contado::after {
  transform: none;
  transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* el texto que acompaña a la pregunta de la portada */
.sub-texto {
  max-width: calc(var(--u) * 22);
  margin-top: var(--u);
  text-wrap: pretty;
}
.aparte-linea { white-space: nowrap; }

@media (min-width: 1024px) {
  .portada { padding-bottom: calc(var(--u) * 4); }
  .nota-holi {
    font-size: 1.875rem;
    line-height: calc(var(--u) * 1.1);
    margin-left: calc(var(--u) * -1.5);
  }
  .parada__n { font-size: 2.25rem; }
  .parada__texto { font-size: 1.25rem; }
}

/* ---------- notas a mano sueltas dentro del texto ---------- */

.apunte--suelto {
  transform: rotate(-1.5deg);
  transform-origin: left center;
  font-size: 1.625rem;
  line-height: calc(var(--u) * 1.15);
}
.holi .apunte,
.trabajamos .apunte { color: var(--arena); }

@media (min-width: 1024px) {
  .apunte--suelto { font-size: 2rem; }
}

/* el subtítulo de la historia de Isa */
.holi__sub {
  margin-top: calc(var(--u) * 2);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ---------- testimonios: la cita sobre la hoja ---------- */

.testimonio blockquote { margin: 0; }
.testimonio blockquote p {
  font-size: 1.125rem;
  font-style: italic;
}
.hoja__cuerpo--uno { grid-template-columns: 1fr !important; }

/* ---------- 1b · la franja terracota: la frase de Isa, en grande ---------- */

.banda {
  position: relative;
  overflow: hidden;
  padding: calc(var(--u) * 4) var(--der) calc(var(--u) * 4) var(--izq);
  background-color: var(--terracota-hondo);
  color: var(--marfil);
}

.banda__frase {
  max-width: calc(var(--u) * 26);
  font-family: var(--mano);
  font-size: clamp(2.125rem, 1.1rem + 4.4vw, 5rem);
  line-height: 1.12;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  text-wrap: balance;
}

.banda__raya {
  display: block;
  width: min(100%, calc(var(--u) * 14));
  height: calc(var(--u) * 0.8);
  margin-top: var(--u);
  fill: none;
  stroke: var(--arena);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.banda__raya path { vector-effect: non-scaling-stroke; }

.banda__estrellas {
  position: absolute;
  top: var(--u);
  right: var(--der);
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 2);
  fill: none;
  stroke: var(--bronce);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

@media (min-width: 1024px) {
  .banda { padding-block: calc(var(--u) * 5) calc(var(--u) * 4.5); }
  .banda__frase { margin-left: calc(var(--u) * 2); }
  .banda__raya { margin-left: calc(var(--u) * 12); }
  .banda__estrellas { top: calc(var(--u) * 2); width: calc(var(--u) * 6); height: calc(var(--u) * 3); }
}

/* ---------- 2 · holi: foto a sangre + campo verde olivo ---------- */

.inicio .holi {
  display: grid;
  padding: 0;
  color: var(--marfil);
}

.holi__foto {
  position: relative;
  z-index: 1;
}
.holi__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 30% 20%;
  background: var(--bronce);
}

/* un trozo de cinta washi que cruza de la foto al campo */
.cinta {
  position: absolute;
  bottom: calc(var(--u) * -0.6);
  left: calc(var(--izq) - var(--u) / 2);
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 1.1);
  /* cinta de papel translúcida, con los cortes en diagonal */
  background: rgb(201 140 71 / 0.8);
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgb(45 42 36 / 0.2);
}

.holi__campo {
  position: relative;
  overflow: hidden;
  padding: calc(var(--u) * 5) var(--der) calc(var(--u) * 4) var(--izq);
}
.holi__campo > :not(.marca-agua) { position: relative; }

/* la palabra gigante y tenue detrás del texto: una palabra de su propio texto */
.marca-agua {
  position: absolute;
  top: calc(var(--u) * 0.5);
  right: var(--u);
  left: var(--u);
  overflow: hidden;
  font-family: var(--mano);
  font-size: clamp(5rem, 2rem + 9vw, 10rem);
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  color: rgb(245 242 237 / 0.08);
  transform: rotate(-8deg);
  pointer-events: none;
  user-select: none;
}

.holi :focus-visible { outline-color: var(--marfil); }

.holi mark {
  background: linear-gradient(transparent 50%, rgb(201 140 71 / 0.35) 50%, rgb(201 140 71 / 0.35) 88%, transparent 88%);
}

.holi em { font-style: italic; }

/* el contraste: una hoja suelta, sujeta con un clip */
.holi .contraste {
  position: relative;
  margin-top: calc(var(--u) * 1.5);
  background: var(--marfil);
  color: var(--tinta);
  box-shadow: 0 6px 14px rgb(45 42 36 / 0.3), 0 1px 3px rgb(45 42 36 / 0.2);
  transform: rotate(-0.6deg);
}
.holi .contraste + * { margin-top: calc(var(--u) * 1.5); }

.clip {
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * -1.7);
  right: calc(var(--u) * 1.5);
  width: calc(var(--u) * 0.85);
  height: calc(var(--u) * 2.3);
  fill: none;
  stroke: #8f8c86;
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgb(45 42 36 / 0.35));
}

@media (min-width: 1024px) {
  .inicio .holi {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .holi__foto {
    position: sticky;
    top: calc(var(--u) * 3);
    height: calc(100vh - var(--u) * 3);
    min-height: calc(var(--u) * 18);
  }
  .holi__foto picture,
  .holi__foto img {
    display: block;
    height: 100%;
  }
  .holi__foto img { aspect-ratio: auto; }
  .cinta {
    top: calc(var(--u) * 2.5);
    bottom: auto;
    left: auto;
    right: calc(var(--u) * -2);
    transform: rotate(-7deg);
  }
  .holi__campo { padding: calc(var(--u) * 7) var(--der) calc(var(--u) * 5) calc(var(--u) * 3); }
  .marca-agua { top: calc(var(--u) * 1.5); }
}

/* ---------- garabatos a mano que cosen una franja con la siguiente ---------- */

.garabato {
  position: absolute;
  z-index: 2;
  fill: none;
  stroke: var(--bronce-hondo);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.garabato--flecha {
  top: calc(var(--u) * -1.5);
  right: calc(var(--der) + var(--u) * 2);
  width: calc(var(--u) * 3);
  height: calc(var(--u) * 2.4);
}
.garabato--estrellas {
  top: calc(var(--u) * -0.9);
  left: calc(var(--izq) + var(--u) * 10);
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 1.7);
}
.garabato--rizo {
  top: calc(var(--u) * -0.6);
  right: calc(var(--der) + var(--u));
  width: calc(var(--u) * 5.5);
  height: calc(var(--u) * 1.4);
}
@media (max-width: 1023px) {
  .garabato--estrellas { left: auto; right: var(--der); }
}

/* ---------- 4 · todo conectado: el hilo que une las piezas ---------- */

.conector {
  display: block;
  width: min(100%, calc(var(--u) * 12));
  height: auto;
  margin-top: calc(var(--u) * 1.5);
  overflow: visible;
  fill: none;
  stroke: var(--terracota-hondo);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.conector circle {
  fill: var(--marfil);
  stroke: var(--tinta);
  stroke-width: 2.5;
}
.conector circle:nth-of-type(2) { fill: var(--olivo-barra); }
.conector circle:nth-of-type(3) { fill: var(--bronce); }

@media (max-width: 1023px) {
  .conector { width: calc(var(--u) * 9); margin-bottom: calc(var(--u) * -1); }
}

/* ---------- 5 · cómo trabajamos: franja de tinta, números en bronce ---------- */

.trabajamos { color: var(--marfil); }
.trabajamos .paso { border-top-color: rgb(245 242 237 / 0.4); }
.trabajamos .paso__n { color: var(--bronce); }
.trabajamos mark {
  background: linear-gradient(transparent 50%, rgb(122 140 104 / 0.65) 50%, rgb(122 140 104 / 0.65) 88%, transparent 88%);
}
.trabajamos .boton--principal { box-shadow: inset 0 0 0 var(--raya) var(--marfil); }
.trabajamos :focus-visible { outline-color: var(--marfil); }

/* ---------- 6 · las piezas: pegatinas ---------- */

.inicio .libro {
  display: grid;
  gap: calc(var(--u) * 1.5) calc(var(--u) * 1.5);
  max-width: calc(var(--u) * 36);
  border: 0;
  background: none;
}

.inicio .libro__fila {
  display: block;
  padding: 0;
  border: 0;
}

.inicio .libro dt {
  display: inline-block;
  padding: calc(var(--u) / 4) calc(var(--u) / 2);
  border: 0;
  font-weight: 800;
  line-height: var(--u);
  background: var(--pegatina, var(--marfil));
  color: var(--pegatina-texto, var(--tinta));
  box-shadow: 0 2px 5px rgb(45 42 36 / 0.22), 0 1px 1px rgb(45 42 36 / 0.14);
  transform: rotate(var(--giro, -2deg));
  transform-origin: left center;
}

.inicio .libro dd {
  margin-top: calc(var(--u) / 2);
  padding: 0;
  max-width: calc(var(--u) * 14);
  text-wrap: pretty;
}

.libro__fila:nth-child(1) { --pegatina: var(--olivo-hondo); --pegatina-texto: var(--marfil); --giro: -2deg; }
.libro__fila:nth-child(2) { --pegatina: var(--bronce); --giro: 1.5deg; }
.libro__fila:nth-child(3) { --pegatina: var(--marfil); --giro: -1deg; }
.libro__fila:nth-child(4) { --pegatina: var(--tinta); --pegatina-texto: var(--marfil); --giro: 2deg; }
.libro__fila:nth-child(5) { --pegatina: var(--terracota-hondo); --pegatina-texto: var(--marfil); --giro: -1.5deg; }
.libro__fila:nth-child(6) { --pegatina: var(--olivo-barra); --giro: 1deg; }

@media (min-width: 768px) {
  .inicio .libro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .inicio .libro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 8 · encaje: dos campos, el sí en olivo y el no en terracota ---------- */

.inicio .listas {
  display: grid;
  margin-inline: calc(var(--izq) * -1) calc(var(--der) * -1);
}

.inicio .lista {
  padding: calc(var(--u) * 2) var(--der) calc(var(--u) * 2) var(--izq);
}
.inicio .lista + .lista { margin-top: 0; }
.lista--si { background: #d6dccb; }
.lista--no { background: var(--terracota-claro); }

.lista--si .marca-mano { stroke: var(--olivo-hondo); }
.lista--no .marca-mano { stroke: var(--terracota-hondo); }

@media (min-width: 1024px) {
  .inicio .listas { grid-template-columns: 1fr 1fr; }
  .inicio .lista { padding: calc(var(--u) * 3) calc(var(--u) * 2) calc(var(--u) * 3) var(--izq); }
  .inicio .lista--no { padding: calc(var(--u) * 3) var(--der) calc(var(--u) * 3) calc(var(--u) * 5); }
}

/* ---------- 9 · los casos: tres papeles distintos sobre arena ---------- */

.inicio .hoja + .hoja { margin-top: calc(var(--u) * 3); }

.hoja { position: relative; }

/* 1 · tarjeta lisa clavada con una chincheta */
.hoja--chincheta {
  background: #fbf9f5;
  transform: rotate(-0.6deg);
}
.hoja--chincheta::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * -0.45);
  left: 50%;
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 0.9);
  margin-left: calc(var(--u) * -0.45);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d98a72 0 18%, var(--terracota) 40%, var(--terracota-hondo) 100%);
  box-shadow: 0 3px 4px rgb(45 42 36 / 0.35);
}

/* 2 · nota de papel pautado, pegada con cinta washi */
.hoja--cinta {
  border: 0;
  background-color: var(--marfil);
  background-image: linear-gradient(transparent calc(var(--u) - 1px), rgb(122 140 104 / 0.16) 0);
  background-size: 100% var(--u);
  transform: rotate(0.5deg);
}
.hoja--cinta::before,
.hoja--cinta::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * -0.5);
  width: calc(var(--u) * 4);
  height: var(--u);
  background: rgb(122 140 104 / 0.75);
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
}
.hoja--cinta::before { left: calc(var(--u) * -0.4); transform: rotate(-24deg); }
.hoja--cinta::after { right: calc(var(--u) * -0.4); transform: rotate(20deg); }
.hoja--cinta h3,
.hoja--cinta .hoja__plan { border-color: var(--tinta); }

/* 3 · hoja cuadriculada con un clip */
.hoja--clip { transform: rotate(-0.3deg); }
.hoja--clip::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * -1.7);
  right: calc(var(--u) * 1.5);
  width: calc(var(--u) * 0.9);
  height: calc(var(--u) * 2.5);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 64'%3E%3Cpath d='M15 18v32a5 5 0 0 1-10 0V10a7.5 7.5 0 0 1 15 0v42a9 9 0 0 1-18 0V22' fill='none' stroke='%238f8c86' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 1px rgb(45 42 36 / 0.35));
}

/* ---------- 11 · el cierre de tinta, ahora como una franja más ---------- */

.inicio .cierre {
  color: var(--marfil);
  padding: calc(var(--u) * 4) var(--der) calc(var(--u) * 5) var(--izq);
}

.inicio .pie-pagina {
  padding-left: var(--izq);
  padding-right: var(--der);
  border-top: var(--raya) solid rgb(245 242 237 / 0.2);
}

@media (min-width: 1024px) {
  .inicio .cierre { padding: calc(var(--u) * 5) var(--der) calc(var(--u) * 6) var(--izq); }
}

/* portátiles pequeños: el titular y el camino no caben juntos al tamaño grande */
@media (min-width: 1024px) and (max-width: 1279px) {
  .portada {
    grid-template-columns: minmax(0, 1fr) minmax(calc(var(--u) * 12), calc(var(--u) * 14));
    gap: calc(var(--u) * 2);
  }
  h1 {
    font-size: calc(var(--u) * 2.2);
    line-height: calc(var(--u) * 2.4);
  }
}

/* ==========================================================
   Versión 12 nov 2026: portada del agujero, camino dibujado
   y formulario dentro de la página
   ========================================================== */

.gancho__texto { margin-top: var(--u); }
.gancho__texto .sub { margin-top: 0; }
.presentacion { padding-top: calc(var(--u) / 2); border-top: var(--raya) dashed var(--tinta); }

.foto--portada {
  width: min(100%, calc(var(--u) * 12));
  margin: var(--u) auto 0;
  transform: rotate(3deg);
}
@media (min-width: 1024px) {
  .portada--agujero { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 12); }
  .foto--portada { margin-top: calc(var(--u) * 4); }
}

/* las frases que van una debajo de otra */
.escalera { padding-left: calc(var(--u) * 0.6); border-left: var(--raya) solid var(--terracota); }

/* ---------- el camino de las 1.000 personas, dibujado ---------- */

.ruta-seccion { --fondo: var(--marfil); }
.ruta { margin: 0; }
.ruta .camino__titulo { margin-bottom: var(--u); }

.ruta__mapa { position: relative; }

.ruta__dibujo {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}
.ruta__dibujo path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ruta__tramo { stroke: var(--olivo); stroke-width: var(--g); }
.ruta__fuga-linea { stroke: var(--terracota); stroke-width: 2.5; stroke-dasharray: 3 7; }
.ruta__punto { stroke: var(--tinta); stroke-width: 16; }
.ruta__punto--roto { stroke: var(--terracota); stroke-width: 18; }

.ruta__paradas {
  position: relative;
  display: grid;
  list-style: none;
  padding: 0;
}

.ruta__n {
  position: relative;
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.ruta__parada--final .ruta__n { display: inline-block; color: var(--terracota-hondo); }
.ruta__texto { display: block; font-size: 1rem; line-height: 1.3; }
.ruta__fuga {
  display: block;
  margin-top: calc(var(--u) / 3);
  font-family: var(--mano);
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--terracota-hondo);
}

.ruta .nota {
  margin: calc(var(--u) * 1.5) 0 0 auto;
  max-width: calc(var(--u) * 16);
  text-align: right;
}

/* móvil: el camino baja de arriba abajo, a la izquierda */
.ruta__dibujo--ancho { display: none; }
.ruta__dibujo--alto { top: 0; bottom: 0; left: 0; width: calc(var(--u) * 2.5); height: 100%; }
.ruta__paradas { grid-auto-rows: 1fr; padding-left: calc(var(--u) * 3.2); }
.ruta__parada { min-height: calc(var(--u) * 5.5); padding-top: calc(var(--u) * 0.2); }

/* escritorio: el camino serpentea de izquierda a derecha */
@media (min-width: 900px) {
  .ruta__dibujo--alto { display: none; }
  .ruta__dibujo--ancho { display: block; top: calc(var(--u) * 3.2); left: 0; width: 100%; height: calc(var(--u) * 5); }
  .ruta__paradas { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; padding-left: 0; }
  .ruta__parada { position: relative; min-height: 0; padding: 0 var(--u) calc(var(--u) * 6.5) calc(var(--u) * 0.4); }
  .ruta__fuga { position: absolute; right: calc(var(--u) * -1.4); bottom: 0; max-width: calc(var(--u) * 5); text-align: right; }
  .ruta__n { font-size: 2.5rem; }
  .ruta__texto { font-size: 1.125rem; }
}

/* la animación: el camino se dibuja mientras cuentan las cifras */
.is-pendiente .ruta__dibujo { clip-path: inset(0 100% 0 0); }
.is-dibujado .ruta__dibujo { clip-path: inset(0 0 0 0); transition: clip-path 1400ms cubic-bezier(0.16, 1, 0.3, 1); }
.is-pendiente .ruta__dibujo--alto { clip-path: inset(0 0 100% 0); }
.is-pendiente .ruta__fuga { opacity: 0; }
.is-dibujado .ruta__fuga { opacity: 1; transition: opacity 500ms 600ms; }

/* ---------- etapas sencillas: una pregunta por tramo ---------- */

.etapa--simple p { padding: calc(var(--u) / 2) calc(var(--u) * 0.6); }

/* ---------- el formulario, dentro de la página ---------- */

.cierre:focus { outline: none; }
.form {
  display: grid;
  gap: var(--u);
  max-width: calc(var(--u) * 24);
  margin-top: calc(var(--u) * 1.5);
}
.form__campo { display: grid; gap: calc(var(--u) / 3); border: 0; padding: 0; min-width: 0; }
.form label,
.form legend { font-weight: 800; line-height: 1.35; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  min-height: calc(var(--u) * 1.8);
  padding: calc(var(--u) / 3) calc(var(--u) / 2);
  font: inherit;
  color: var(--tinta);
  background: var(--marfil);
  border: var(--raya) solid var(--marfil);
  border-radius: 4px;
}
.form textarea { resize: vertical; }
.form input:focus-visible,
.form textarea:focus-visible { outline: 3px solid var(--bronce); outline-offset: 2px; }
.form [aria-invalid="true"] { border-color: var(--terracota); box-shadow: 0 0 0 2px var(--terracota); }
.form__opciones legend { margin-bottom: calc(var(--u) / 3); }
.form__opciones label,
.form__casilla { display: flex; gap: calc(var(--u) / 3); align-items: flex-start; font-weight: 400; }
.form__opciones input,
.form__casilla input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--terracota); }
.form__casilla a { color: inherit; }
.form .boton--principal { justify-self: start; }
.form .boton--principal[disabled] { opacity: 0.6; cursor: wait; }
.form__estado:empty { display: none; }
.form__estado { font-family: var(--mano); font-size: 1.5rem; line-height: 1.2; }
.form__estado--error { color: var(--bronce); }
.ruta__parada--final .ruta__n { margin: 0 0 calc(var(--u) / 3) calc(var(--u) / -4); padding: 0 0.35em; }
@media (min-width: 1024px) {
  .inicio .cierre { align-items: start; }
  .inicio .cierre .pila { position: sticky; top: calc(var(--u) * 4); }
}

/* 12 nov 2026: Isa quiere el fondo liso, sin cuadrícula ni la raya roja del cuaderno */
body,
.inicio .cabecera,
.portada,
.recorrido { background-image: none; }
.margen { display: none; }

/* foto de Isa trabajando, grapada junto al título de «lo primero que haré» */
.recorrido__cabeza { display: grid; gap: var(--u); margin-bottom: var(--u); }
.foto--recorrido { width: min(70%, calc(var(--u) * 9)); margin: 0 auto; transform: rotate(-3deg); }
@media (min-width: 900px) {
  .recorrido__cabeza { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 9); align-items: start; gap: calc(var(--u) * 2); }
  .foto--recorrido { width: 100%; margin-top: var(--u); }
}

/* 12 nov: el selfi de «mi historia» va pequeño y en un círculo, sobre el verde */
.holi__foto--circulo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--u) * 2) var(--u) 0;
  background: var(--olivo-hondo);
}
.holi__foto--circulo img {
  width: min(70vw, calc(var(--u) * 10));
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--marfil);
  box-shadow: 0 6px 14px rgb(45 42 36 / 0.25);
  object-position: 50% 30%;
}
.holi__foto--circulo .cinta { display: none; }
@media (min-width: 1024px) {
  .holi__foto--circulo { padding: calc(var(--u) * 5) var(--u); align-items: flex-start; }
  .holi__foto--circulo img { width: calc(var(--u) * 11); }
}
.holi__foto--circulo img { height: min(70vw, calc(var(--u) * 10)); max-width: none; object-fit: cover; }
@media (min-width: 1024px) { .holi__foto--circulo img { height: calc(var(--u) * 11); } }