/* RAIGA. — papel, tinta, recortes y fotografía real, montados a mano */

@font-face {
  font-family: "Newsreader";
  src: url(../assets/fonts/newsreader.woff2) format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url(../assets/fonts/newsreader-italic.woff2) format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url(../assets/fonts/albert-sans.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url(../assets/fonts/caveat.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Paleta cromática oficial de RAIGA. */
  --tinta: #1E150D;   /* 01 · Tinta RAIGA.: el marrón del logo y del galgo */
  --crema: #ECE3D3;   /* 02 · Crema papel */
  --oliva: #3F4B2E;   /* 03 · Verde oliva */
  --salvia: #7C8564;  /* 04 · Verde salvia */
  --arena: #C7B49B;   /* 05 · Arena natural */

  /* Mezclas de la misma paleta */
  --tinta-suave: color-mix(in srgb, var(--tinta) 86%, var(--crema));
  --linea: color-mix(in srgb, var(--tinta) 22%, transparent);

  --papel: url(../assets/papel/crema.webp);
  --papel-oliva: url(../assets/papel/oliva.webp);
  --papel-tinta: url(../assets/papel/tinta.webp);
  --papel-salvia: url(../assets/papel/salvia.webp);
  --papel-arena: url(../assets/papel/arena.webp);

  --f-texto: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui: "Albert Sans", "Segoe UI", system-ui, sans-serif;
  --f-mano: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  /* Stop-motion: doce fotogramas por segundo */
  --fotograma: 83ms;

  /* Sombra de papel posado: corta y cercana, nunca flotante */
  --sombra-alta: drop-shadow(0 2px 2px rgb(30 21 13 / 0.14)) drop-shadow(0 18px 26px rgb(30 21 13 / 0.18));
  --sombra: drop-shadow(0 1px 1px rgb(30 21 13 / 0.15)) drop-shadow(0 8px 14px rgb(30 21 13 / 0.14));

  --margen: clamp(16px, 4.2vw, 72px);
  --ancho: 1440px;
  --seccion: clamp(88px, 12vh, 160px);
  --nav-alto: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-alto) + 8px);
  scrollbar-color: var(--tinta) var(--crema);
}
html.rm { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--crema) var(--papel) center top / 1600px auto repeat;
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: clamp(17px, 1.05vw + 8px, 19px);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
/* Las piezas pueden asomar, pero nunca abrir scroll lateral */
main > section, .pie { overflow-x: clip; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--oliva); color: var(--crema); }
:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; border-radius: 2px; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.saltar {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; background: var(--tinta); color: var(--crema);
  font-family: var(--f-ui); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.saltar:focus { transform: none; }

/* ---------- Tipografía ---------- */

.titulo-xxl, .titulo-xl, .hero__titulo, .libreta__titulo {
  font-family: var(--f-texto);
  font-weight: 600;
  text-wrap: balance;
  font-variation-settings: "opsz" 72;
}
.titulo-xxl { font-size: clamp(52px, 7.6vw, 124px); line-height: 0.92; letter-spacing: -0.035em; }
.titulo-xl  { font-size: clamp(40px, 5vw, 80px); line-height: 0.96; letter-spacing: -0.03em; }
/* la última idea de algunos titulares, en cursiva (como en las historias de Instagram) */
:is(h1, h2) em { font-style: italic; font-weight: 500; letter-spacing: -0.02em; }
/* y se marca con un rectángulo del color de la letra, con la letra en el color del fondo.
   El rectángulo y la letra se pintan juntos de izquierda a derecha, en tres fotogramas, al ver el titular. */
em.subraya {
  --letra: var(--tinta); --fondo-em: var(--crema);
  padding: 0 0.09em 0.03em; margin: 0 -0.03em 0 0.02em;
  background: linear-gradient(var(--letra), var(--letra)) 0 0 / 0% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size calc(var(--fotograma) * 3) steps(3, end) var(--marca-espera, var(--fotograma));
}
.subraya__txt {
  /* siempre en línea, aunque el titular trocee sus palabras en piezas */
  display: inline !important; width: auto !important; margin: 0 !important; white-space: inherit;
  background: linear-gradient(90deg, var(--fondo-em) 50%, var(--letra) 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-position calc(var(--fotograma) * 3) steps(3, end) var(--marca-espera, var(--fotograma));
}
em.subraya.is-subrayado { background-size: 100% 100%; }
em.subraya.is-subrayado .subraya__txt { background-position: 0 0; }
.rm em.subraya, .rm .subraya__txt { transition: none; }
/* en la entrada, después de que el titular se haya pegado */
.hero__titulo em.subraya, .hero__titulo .subraya__txt, .caso__titulo em.subraya, .caso__titulo .subraya__txt { --marca-espera: calc(var(--fotograma) * 9); }
/* sobre papel oliva, la marca es crema y la letra, oliva */
.cierre em.subraya { --letra: var(--crema); --fondo-em: var(--oliva); }

.entradilla {
  font-size: clamp(19px, 1.2vw + 4px, 22px);
  line-height: 1.5;
  max-width: 34em;
  text-wrap: pretty;
}

/* Letra de mano: notas sueltas, nunca texto de lectura */
.nota {
  font-family: var(--f-mano);
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  color: var(--tinta-suave);
}

.pie-foto {
  font-family: var(--f-ui);
  font-size: 12px;
  line-height: 1.4;
  color: var(--tinta-suave);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  min-height: 50px;
  padding: 12px 24px;
  border: 1.5px solid var(--tinta);
  border-radius: 3px;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
}
.boton:active { transform: scale(0.97); }
.boton--oliva { background: var(--oliva); border-color: var(--oliva); color: var(--crema); }
.boton--linea { background: transparent; color: var(--tinta); }
.boton--s { min-height: 42px; padding: 8px 18px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .boton--oliva:hover { background: var(--tinta); border-color: var(--tinta); }
  .boton--linea:hover { background: var(--tinta); color: var(--crema); }
}

/* ---------- Formas del banco (silueta recortada, color por currentColor) ---------- */

.forma {
  display: block;
  aspect-ratio: var(--ar, 1);
  background-color: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat;
          mask: var(--src) center / contain no-repeat;
}

/* Foto rasgada sobre su orla de papel */
.recorte { position: relative; filter: var(--sombra); }
.recorte::before {
  content: ""; position: absolute; inset: 0;
  background: var(--crema) var(--papel) center / 700px;
  -webkit-mask: url(../assets/papel/rasgado-a-orla.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/papel/rasgado-a-orla.svg) 0 0 / 100% 100% no-repeat;
}
.recorte img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  -webkit-mask: url(../assets/papel/rasgado-a.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/papel/rasgado-a.svg) 0 0 / 100% 100% no-repeat;
}
.recorte--b::before {
  -webkit-mask-image: url(../assets/papel/rasgado-b-orla.svg);
          mask-image: url(../assets/papel/rasgado-b-orla.svg);
}
.recorte--b img {
  -webkit-mask-image: url(../assets/papel/rasgado-b.svg);
          mask-image: url(../assets/papel/rasgado-b.svg);
}

/* Cinta de papel que sujeta una pieza */
.cinta::after {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 96px; height: 26px;
  translate: -50% 0; rotate: -4deg;
  background: color-mix(in srgb, var(--arena) 72%, transparent);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
}

/* ---------- Stop-motion: piezas que se colocan a mano ---------- */

/* Cada pieza llega en seis fotogramas, con su pequeño temblor de mano */
@keyframes pegar {
  0%   { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 30px)) rotate(calc(var(--r, 0deg) + 5deg)); }
  1%   { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 30px)) rotate(calc(var(--r, 0deg) + 5deg)); }
  20%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.6), calc(var(--dy, 30px) * 0.6)) rotate(calc(var(--r, 0deg) - 2.5deg)); }
  40%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.28), calc(var(--dy, 30px) * 0.3)) rotate(calc(var(--r, 0deg) + 1.5deg)); }
  60%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.08), calc(var(--dy, 30px) * 0.1)) rotate(calc(var(--r, 0deg) - 0.8deg)); }
  80%  { opacity: 1; transform: translate(calc(var(--dx, 0px) * -0.02), 0) rotate(calc(var(--r, 0deg) + 0.3deg)); }
  100% { opacity: 1; transform: rotate(var(--r, 0deg)); }
}
.sm, .pieza { transform: rotate(var(--r, 0deg)); }
.js .sm:not(.is-in),
.js [data-collage]:not(.is-in) .pieza { opacity: 0; }
.js .sm.is-in,
.js [data-collage].is-in .pieza {
  animation: pegar calc(var(--fotograma) * 6) steps(1, end) calc(var(--i, 0) * var(--fotograma)) backwards;
}


/* ---------- Navegación ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-alto);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  padding: 0 var(--margen);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}
.nav--papel {
  background: var(--crema) var(--papel) center top / 1600px auto;
  box-shadow: 0 1px 0 var(--linea);
}
.nav__logo { display: block; flex: none; margin-right: auto; padding: 6px 0; }
.nav__logo img { height: 24px; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-family: var(--f-ui); font-size: 15px; font-weight: 500; }
.nav__links a:not(.boton) { text-decoration: none; padding: 8px 0; background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat; transition: background-size 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:not(.boton):hover { background-size: 100% 1.5px; }
}
.nav__menu {
  display: none;
  min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 15px; font-weight: 600;
}
.nav__panel {
  position: absolute; top: calc(var(--nav-alto) - 6px); right: var(--margen);
  display: grid; min-width: 230px; padding: 10px 22px;
  background: var(--crema) var(--papel) center / 900px;
  filter: var(--sombra);
  font-family: var(--f-ui); font-size: 17px; font-weight: 500;
}
.nav__panel[hidden] { display: none; }
.nav__panel a { text-decoration: none; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.nav__panel a:last-child { border-bottom: 0; }
.nav__mov {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 13px; color: var(--tinta-suave);
}
.nav__mov-punto { width: 22px; height: 12px; border-radius: 12px; border: 1.5px solid currentColor; position: relative; }
.nav__mov-punto::after {
  content: ""; position: absolute; top: 1.5px; left: 1.5px;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  transition: transform 200ms var(--ease-out);
}
.nav__mov[aria-pressed="true"] .nav__mov-punto::after { transform: translateX(10px); }

/* ---------- 1 · Entrada ---------- */

.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  max-width: var(--ancho); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding: calc(var(--nav-alto) + 4vh) var(--margen) 6vh;
}
.hero__titulo {
  font-size: clamp(56px, 6.6vw, 122px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin-left: -0.04em;
}
.hero__titulo span { display: block; width: fit-content; white-space: nowrap; }
.hero__titulo span + span { margin-left: 0.08em; }
.hero__descriptor {
  margin-top: clamp(22px, 3.4vh, 36px);
  font-size: clamp(23px, 2.1vw, 34px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.hero__lede { margin-top: 16px; max-width: 31em; font-size: clamp(17px, 1.1vw + 4px, 20px); text-wrap: pretty; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vh, 40px); }
.hero__pie { position: absolute; right: var(--margen); bottom: 18px; }

/* El collage: cada pieza es papel recortado o fotografía rasgada */
.collage { position: relative; width: 100%; aspect-ratio: 1 / 0.9; }
.pieza { position: absolute; display: block; }
.collage__sol {
  left: 2%; top: 1%; width: 30%; aspect-ratio: 1;
  background: var(--salvia) var(--papel-salvia) center / 500px;
  -webkit-mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
}
.collage__foto { left: 7%; top: 10%; width: 89%; aspect-ratio: 1.5; }
.collage__foto img { object-position: 50% 55%; }
.collage__loma { height: 15%; }
.collage__loma--atras {
  left: 34%; top: 66%; width: 70%; height: 13%;
  background: var(--salvia) var(--papel-salvia) center / 600px;
  -webkit-mask: url(../assets/formas/07_loma_derecha_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/07_loma_derecha_lleno.svg) 0 0 / 100% 100%;
}
.collage__loma--media {
  left: -5%; top: 69%; width: 70%; height: 15%;
  background: var(--oliva) var(--papel-oliva) center / 600px;
  -webkit-mask: url(../assets/formas/06_loma_izquierda_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/06_loma_izquierda_lleno.svg) 0 0 / 100% 100%;
  filter: var(--sombra);
}
.collage__loma--delante {
  left: 26%; top: 77%; width: 66%; height: 12%;
  background: var(--arena) var(--papel-arena) center / 600px;
  -webkit-mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%;
  filter: var(--sombra);
}
.collage__hoja { right: -3%; top: 36%; width: 13%; aspect-ratio: 474 / 795; }
.collage__hoja-forma {
  display: block; width: 100%; height: 100%;
  background: var(--oliva) var(--papel-oliva) center / 300px;
  -webkit-mask: url(../assets/formas/20_hoja_encina.svg) center / contain no-repeat;
          mask: url(../assets/formas/20_hoja_encina.svg) center / contain no-repeat;
  transform-origin: 40% 96%;
}
/* La hoja se mece despacio, a tres fotogramas: el único movimiento quieto del collage */
@keyframes mecer {
  0%   { transform: rotate(0deg); }
  33%  { transform: rotate(4deg); }
  66%  { transform: rotate(-2deg); }
}
.js:not(.rm) [data-collage].is-quieto .collage__hoja-forma { animation: mecer 2.4s steps(1, end) infinite; }
/* El sol respira a su ritmo, desacompasado de la hoja */
@keyframes respirar {
  0%   { transform: rotate(0deg) scale(1); }
  33%  { transform: rotate(-4deg) scale(1.04); }
  66%  { transform: rotate(3deg) scale(0.97); }
}
.js:not(.rm) [data-collage].is-quieto .collage__sol { animation: respirar 3.3s steps(1, end) infinite; }
/* La etiqueta cuelga de su cinta y se balancea, con su propio ritmo */
@keyframes balancear {
  0%   { transform: rotate(var(--r, 0deg)); }
  33%  { transform: rotate(calc(var(--r, 0deg) + 2.5deg)) translateY(-1px); }
  66%  { transform: rotate(calc(var(--r, 0deg) - 1.5deg)); }
}
.js:not(.rm) [data-collage].is-quieto .collage__etiqueta { transform-origin: 50% 0; animation: balancear 2.9s steps(1, end) infinite; }
.collage__galgo { left: 47.5%; top: 59%; width: 21%; z-index: 3; }
/* Galgo que persigue el ratón: el cuerpo da saltos a doce fotogramas */
.galgo__cuerpo { display: block; transform-origin: 50% 85%; transform: scaleX(var(--dir, 1)); }
.galgo__cuerpo img { width: 100%; }
.galgo__cuerpo.is-salto-a { transform: scaleX(var(--dir, 1)) translateY(-14%) rotate(-6deg); }
.galgo__cuerpo.is-salto-b { transform: scaleX(var(--dir, 1)) rotate(3deg); }
.collage__etiqueta {
  left: 50%; top: 84%;
  padding: 14px 20px 12px;
  background: var(--arena) var(--papel-arena) center / 500px;
  font-family: var(--f-ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.6;
  filter: var(--sombra);
}
.collage__etiqueta::after {
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 70px; height: 22px; translate: -50% 0; rotate: 5deg;
  background: color-mix(in srgb, var(--crema) 70%, transparent);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
}


/* ---------- 2 · Entender ---------- */

.entender {
  position: relative;
  min-height: 112vh; min-height: 112svh;
  padding: var(--seccion) var(--margen) 0;
  overflow: clip;
}
.entender__paisaje { position: absolute; inset: auto 0 0 0; height: 64%; pointer-events: none; }
.entender__pieza { position: absolute; display: block; }
.entender__loma { filter: var(--sombra); }
.entender__loma--lejos {
  left: -4%; right: -4%; bottom: -12%; height: 82%; filter: none;
  background: var(--salvia) var(--papel-salvia) center / 700px;
  -webkit-mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 0 0 / 100% 100%;
}
.entender__loma--atras {
  right: -6%; width: 80%; bottom: -12%; height: 62%; transform: scaleX(-1);
  background: var(--arena) var(--papel-arena) center / 700px;
  -webkit-mask: url(../assets/formas/07_loma_derecha_terreno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/07_loma_derecha_terreno.svg) 0 0 / 100% 100%;
}
.entender__casa {
  right: 20%; bottom: 43%; width: clamp(44px, 4.4vw, 70px); aspect-ratio: 700 / 724;
  color: var(--tinta); --silueta: url(../assets/formas/21_casa_frontal.svg);
}
/* La silueta va encima; debajo, la luz de cada ventana, que solo asoma por los huecos */
.entender__casa::after, .entender__pueblo::after, .entender__granero::after {
  content: ""; position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: var(--silueta) center / contain no-repeat;
          mask: var(--silueta) center / contain no-repeat;
}
.luz {
  position: absolute; display: block;
  background: color-mix(in srgb, var(--crema) 72%, var(--arena));
  opacity: 0;
  transition: opacity 0s linear calc(var(--fotograma) * 4);
}
.luz:nth-child(2) { transition-delay: calc(var(--fotograma) * 6); }
.luz:nth-child(3) { transition-delay: calc(var(--fotograma) * 8); }
.luz:nth-child(4) { transition-delay: calc(var(--fotograma) * 5); }
.entender.is-noche .luz { opacity: 1; }
/* El pueblito: casas, granero, golondrinas y un sol, todo de papel */
/* El sol es un botón: al pincharlo se pone, sale la luna y se encienden las casas */
.entender__astro {
  left: 47%; bottom: 74%; width: clamp(56px, 5.4vw, 86px); aspect-ratio: 1;
  padding: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.entender__astro:focus-visible { outline: 2px dashed var(--oliva); outline-offset: 6px; border-radius: 50%; }
.entender.is-noche .entender__astro:focus-visible { outline-color: var(--crema); }
.entender__sol, .entender__luna { position: absolute; inset: 0; display: block; }
.entender__sol {
  background: var(--arena) var(--papel-arena) center / 300px;
  -webkit-mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
  transition: translate calc(var(--fotograma) * 5) steps(5, end), opacity calc(var(--fotograma) * 5) steps(5, end);
}
.entender__luna {
  left: 18%; right: 18%;
  background: var(--crema) var(--papel) center / 300px;
  -webkit-mask: url(../assets/formas/67_luna.svg) center / contain no-repeat;
          mask: url(../assets/formas/67_luna.svg) center / contain no-repeat;
  opacity: 0; translate: 0 -70%;
  transition: translate calc(var(--fotograma) * 4) steps(4, end), opacity 0s linear calc(var(--fotograma) * 4);
}
.entender.is-noche .entender__sol { translate: 0 150%; opacity: 0; }
.entender.is-noche .entender__luna {
  opacity: 1; translate: 0 0;
  transition: translate calc(var(--fotograma) * 4) steps(4, end) calc(var(--fotograma) * 4), opacity 0s linear calc(var(--fotograma) * 4);
}
@media (hover: hover) and (pointer: fine) {
  .entender__astro { transition: scale 200ms var(--ease-out); }
  .entender__astro:hover { scale: 1.08; }
}
.entender__estrella {
  position: absolute; display: block;
  width: clamp(22px, 2vw, 32px); aspect-ratio: 1;
  background: var(--crema);
  -webkit-mask: url(../assets/formas/41_asterisco.svg) center / contain no-repeat;
          mask: url(../assets/formas/41_asterisco.svg) center / contain no-repeat;
  opacity: 0;
  transition: opacity 0s linear;
}
/* De noche, las estrellas ocupan el hueco de las golondrinas, sin tocar el texto */
.entender__estrella--1 { right: 4%; top: clamp(-34px, 1vh, 14px); }
.entender__estrella--2 { right: 17%; top: clamp(-6px, 6vh, 52px); width: clamp(15px, 1.3vw, 22px); }
.entender__estrella--3 { right: 30%; top: clamp(-40px, 0vh, 4px); width: clamp(18px, 1.6vw, 26px); }
/* titilan a saltos y, al pasar el ratón cerca, dan un destello y una vuelta */
@keyframes titilar {
  0%   { scale: 1; }
  33%  { scale: 0.78; }
  66%  { scale: 1.08; }
}
@keyframes chispear {
  0%   { scale: 1; rotate: 0deg; }
  17%  { scale: 1.7; rotate: 24deg; }
  33%  { scale: 1.35; rotate: 50deg; }
  50%  { scale: 1.55; rotate: 72deg; }
  67%  { scale: 1.15; rotate: 90deg; }
  83%  { scale: 0.92; rotate: 96deg; }
  100% { scale: 1; rotate: 90deg; }
}
.js:not(.rm) .entender.is-noche .entender__estrella { animation: titilar 1.9s steps(1, end) infinite; }
.js:not(.rm) .entender.is-noche .entender__estrella--2 { animation-duration: 1.3s; }
.js:not(.rm) .entender.is-noche .entender__estrella--3 { animation-duration: 2.4s; animation-direction: reverse; }
.js:not(.rm) .entender.is-noche .entender__estrella.is-chispa { animation: chispear calc(var(--fotograma) * 7) steps(1, end); }
.entender.is-noche .entender__estrella { opacity: 1; transition-delay: calc(var(--fotograma) * 7); }
.entender.is-noche .entender__estrella--2 { transition-delay: calc(var(--fotograma) * 9); }
.entender.is-noche .entender__estrella--3 { transition-delay: calc(var(--fotograma) * 11); }
.entender__golondrina {
  position: absolute; display: block;
  width: clamp(48px, 4.6vw, 72px); aspect-ratio: 860 / 590;
  background: var(--tinta);
  -webkit-mask: url(../assets/formas/39_golondrina.svg) center / contain no-repeat;
          mask: url(../assets/formas/39_golondrina.svg) center / contain no-repeat;
}
.entender__aparte { position: relative; }
/* Las golondrinas vuelan sobre el texto, arriba a la derecha, sin tocarlo */
.entender__golondrina--1 { right: 2%; top: clamp(-40px, 2vh, 20px); }
.entender__golondrina--2 { right: 16%; top: clamp(-10px, 6vh, 56px); width: clamp(34px, 3.2vw, 50px); }
.entender__pueblo {
  right: 33%; bottom: 44.5%; width: clamp(80px, 8vw, 128px); aspect-ratio: 898 / 590;
  color: var(--tinta); --silueta: url(../assets/formas/23_pueblo.svg);
}
.entender__granero {
  right: 10%; bottom: 40%; width: clamp(40px, 3.8vw, 60px); aspect-ratio: 784 / 739;
  color: var(--oliva); --silueta: url(../assets/formas/22_granero.svg);
}
.entender__flores {
  left: 70%; bottom: 13%; width: clamp(22px, 2vw, 32px); aspect-ratio: 458 / 852;
  background: var(--oliva);
  -webkit-mask: url(../assets/formas/17_flor_silvestre.svg) center / contain no-repeat;
          mask: url(../assets/formas/17_flor_silvestre.svg) center / contain no-repeat;
}
/* Se mueve a saltos y despacio, cada pieza a su ritmo, como el collage de la entrada */
@keyframes revolotear {
  0%   { transform: translate(0, 0) scaleY(1); }
  25%  { transform: translate(6px, -5px) scaleY(0.7); }
  50%  { transform: translate(12px, -2px) scaleY(1); }
  75%  { transform: translate(6px, 3px) scaleY(0.75); }
}
@keyframes tiritar {
  0%   { transform: none; }
  50%  { transform: translateY(-1px) rotate(1.2deg); }
}
.js:not(.rm) .entender__sol { animation: respirar 3.3s steps(1, end) infinite; }
.js:not(.rm) .entender__golondrina--1 { animation: revolotear 1.4s steps(1, end) infinite; }
.js:not(.rm) .entender__golondrina--2 { animation: revolotear 1.1s steps(1, end) infinite reverse; }
.js:not(.rm) .entender__encina, .js:not(.rm) .entender__cipreses, .js:not(.rm) .entender__flores { transform-origin: 50% 100%; animation: mecer 2.6s steps(1, end) infinite; }
.js:not(.rm) .entender__cipreses { animation-duration: 2.1s; }
.js:not(.rm) .entender__flores { animation-duration: 1.7s; }
.js:not(.rm) .entender__pueblo, .js:not(.rm) .entender__casa, .js:not(.rm) .entender__granero { transform-origin: 50% 100%; animation: tiritar 1.9s steps(1, end) infinite; }
.js:not(.rm) .entender__casa { animation-duration: 2.3s; }
.js:not(.rm) .entender__granero { animation-duration: 1.6s; }
.entender__loma--media {
  left: -6%; width: 68%; bottom: -12%; height: 50%;
  background: var(--oliva) var(--papel-oliva) center / 700px;
  -webkit-mask: url(../assets/formas/06_loma_izquierda_terreno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/06_loma_izquierda_terreno.svg) 0 0 / 100% 100%;
}
.entender__encina {
  left: 14%; bottom: 33%; width: clamp(90px, 9vw, 150px); aspect-ratio: 869 / 663;
  background: var(--tinta);
  -webkit-mask: url(../assets/formas/10_encina_sencilla.svg) center / contain no-repeat;
          mask: url(../assets/formas/10_encina_sencilla.svg) center / contain no-repeat;
}
.entender__cipreses {
  left: 30%; bottom: 25%; width: clamp(30px, 3vw, 48px); aspect-ratio: 483 / 808;
  background: var(--tinta);
  -webkit-mask: url(../assets/formas/19_cipreses.svg) center / contain no-repeat;
          mask: url(../assets/formas/19_cipreses.svg) center / contain no-repeat;
}
.entender__loma--delante {
  left: 34%; right: -6%; bottom: -2%; height: 24%;
  background: var(--salvia) var(--papel-salvia) center / 700px;
  -webkit-mask: url(../assets/formas/08_loma_baja_terreno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/08_loma_baja_terreno.svg) 0 0 / 100% 100%;
}
.entender__parcelas {
  left: 58%; bottom: 4%; width: clamp(120px, 14vw, 220px); aspect-ratio: 353 / 150;
  background: var(--oliva);
  -webkit-mask: url(../assets/formas/59_parcelas_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/59_parcelas_lleno.svg) 0 0 / 100% 100%;
  rotate: -3deg;
}
/* El papel de la página vuelve a cubrir el pie del paisaje, sin línea de corte */
.entender__paisaje::after {
  content: ""; left: 0; right: 0; bottom: -1px; height: 90px; position: absolute; z-index: 2;
  background: var(--crema) var(--papel) center top / 1600px auto;
  -webkit-mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%;
}

.entender__contenido {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
}
.libreta {
  position: relative;
  color: var(--tinta);
  max-width: 600px;
  margin-top: 4vh;
  padding: clamp(32px, 3.4vw, 52px) clamp(28px, 3.4vw, 52px) clamp(30px, 3vw, 44px) clamp(56px, 5vw, 80px);
  background:
    radial-gradient(circle at 26px 50%, var(--tinta) 0 6px, transparent 6.5px) 0 0 / 100% 38px repeat-y,
    var(--crema) var(--papel) center / 900px;
  filter: var(--sombra);
}
.libreta__comillas { width: 54px; color: var(--oliva); margin-bottom: 18px; }
.libreta__titulo { font-size: clamp(36px, 3.8vw, 60px); line-height: 1; letter-spacing: -0.025em; margin-bottom: 20px; }
.libreta p:not(.firma) { font-size: clamp(17px, 1.05vw + 5px, 20px); }
.entender__aparte { padding-top: clamp(24px, 8vh, 110px); max-width: 30em; }
.entender__tesis {
  font-size: clamp(25px, 2.3vw, 38px);
  line-height: 1.12; font-weight: 600; letter-spacing: -0.015em;
  margin-bottom: 18px; text-wrap: balance;
}

/* ---------- 3 · Así trabajamos ---------- */

.maneras {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  padding: calc(var(--seccion) * 0.35) var(--margen) calc(var(--seccion) * 0.6);
}
.maneras__titulo { max-width: 10em; }
.maneras__nota { margin-top: 10px; rotate: -2deg; width: fit-content; }
.notas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(40px, 6vh, 72px);
  align-items: start;
}
.nota-papel {
  position: relative;
  padding: 30px 26px 30px;
  filter: var(--sombra);
  transition: translate 260ms var(--ease-out), rotate 260ms var(--ease-out), filter 260ms var(--ease-out);
}
@keyframes menear {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-9deg) scale(1.06); }
  40%  { transform: rotate(7deg) scale(1.06); }
  60%  { transform: rotate(-4deg); }
  80%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.nota-papel__num svg {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; translate: -50% -52%;
  fill: none; stroke: var(--oliva); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 170; stroke-dashoffset: 170;
  transition: stroke-dashoffset calc(var(--fotograma) * 5) steps(5, end);
}
.nota-papel--oliva .nota-papel__num svg { stroke: var(--arena); }
@media (hover: hover) and (pointer: fine) {
  .js:not(.rm) .nota-papel:hover { translate: 0 -12px; rotate: calc(var(--r, 0deg) * -1); filter: var(--sombra-alta); }
  .js:not(.rm) .nota-papel:hover .nota-papel__icono { animation: menear calc(var(--fotograma) * 6) steps(1, end); }
  .nota-papel:hover .nota-papel__num svg { stroke-dashoffset: 0; }
  .nota-papel:hover::before { rotate: 3deg; }
}
.nota-papel:nth-child(2) { margin-top: 44px; }
.nota-papel:nth-child(3) { margin-top: 16px; }
.nota-papel:nth-child(4) { margin-top: 60px; }
.nota-papel--crema { background: var(--crema) var(--papel) center / 700px; }
.nota-papel--arena { background: var(--arena) var(--papel-arena) center / 600px; }
.nota-papel--oliva { background: var(--oliva) var(--papel-oliva) center / 600px; color: var(--crema); }
.nota-papel::before {
  content: ""; position: absolute; top: -11px; left: 50%;
  width: 84px; height: 24px; translate: -50% 0; rotate: -3deg;
  background: color-mix(in srgb, var(--arena) 70%, transparent);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
}
.nota-papel--arena::before { background: color-mix(in srgb, var(--crema) 70%, transparent); }
.nota-papel__num { position: absolute; top: 16px; right: 22px; width: 30px; text-align: center; font-family: var(--f-mano); font-size: 34px; font-weight: 600; line-height: 1; }
.nota-papel__icono { width: 42px; margin-bottom: 20px; color: var(--oliva); }
.nota-papel--oliva .nota-papel__icono { color: var(--arena); }
.nota-papel h3 { font-size: clamp(21px, 1.5vw, 25px); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; text-wrap: balance; }
.nota-papel p { font-size: 16.5px; line-height: 1.55; }

/* ---------- 4 · Servicios: el camino ---------- */

.servicios { position: relative; padding-top: calc(var(--seccion) * 0.6); }
.servicios__cabecera { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }

/* Vista por defecto (móvil, sin JS o con movimiento reducido): etapas en vertical */
.camino { margin-top: clamp(40px, 6vh, 72px); }
.camino__escena { position: relative; }
.camino__pista { display: grid; gap: clamp(56px, 8vh, 96px); padding: 0 var(--margen); max-width: var(--ancho); margin: 0 auto; }
.camino__pista-nota, .camino__mapa { display: none; }

.etapa { position: relative; display: grid; --g: 1; }
.etapa__planta { position: relative; height: clamp(300px, 56vw, 460px); }
.etapa__suelo {
  position: absolute; z-index: 1; left: calc(var(--margen) * -1); right: calc(var(--margen) * -1); bottom: 0; height: 38%;
  background: var(--tinta) var(--papel-tinta) center / 700px;
  /* cada tramo de tierra es una pieza de papel: rasgada arriba y abajo, también donde se junta con la crema de debajo */
  -webkit-mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 56px no-repeat, linear-gradient(#000, #000) 0 54px / 100% calc(100% - 104px) no-repeat, url(../assets/papel/filo-abajo.svg) 0 100% / 100% 56px no-repeat;
          mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 56px no-repeat, linear-gradient(#000, #000) 0 54px / 100% calc(100% - 104px) no-repeat, url(../assets/papel/filo-abajo.svg) 0 100% / 100% 56px no-repeat;
}
.etapa:nth-child(even) .etapa__suelo {
  -webkit-mask-image: url(../assets/papel/filo-b.svg), linear-gradient(#000, #000), url(../assets/papel/filo-abajo.svg);
          mask-image: url(../assets/papel/filo-b.svg), linear-gradient(#000, #000), url(../assets/papel/filo-abajo.svg);
}
/* La planta crece por fotogramas: --g va de 0 a 1 en sextos */
.etapa__arriba {
  position: absolute; left: 30%; bottom: calc(38% - 14px);
  height: var(--alto); translate: -50% 0;
  color: var(--oliva);
  background: currentColor var(--papel-oliva) center / 500px;
  transform-origin: 50% 100%;
  transform: scale(calc(0.2 + 0.8 * var(--g)));
}
.etapa__raices {
  position: absolute; z-index: 2; left: 30%; top: calc(62% + 26px);
  height: var(--raiz); aspect-ratio: 600 / 440; translate: -50% 0;
  transform-origin: 50% 0;
  transform: scale(calc(0.4 + 0.6 * var(--g)), calc(0.1 + 0.9 * var(--g)));
}
.etapa__raiz { position: absolute; inset: 0; color: var(--arena); }
.etapa--semilla .etapa__arriba { --alto: 15%; z-index: 2; bottom: calc(38% - 10%); color: var(--arena); background-image: var(--papel-arena); }
.etapa--brote .etapa__arriba { --alto: 30%; bottom: calc(38% - 6%); }
.etapa--cultivo .etapa__arriba { --alto: 44%; bottom: calc(38% - 24px); }
/* Cultivo es una hilera: dos olivos más pequeños acompañan al del centro */
.etapa--cultivo .etapa__arriba--b { --alto: 26%; left: calc(30% - 18%); bottom: calc(38% - 16px); }
.etapa--cultivo .etapa__arriba--c { --alto: 28%; left: calc(30% + 19%); bottom: calc(38% - 18px); }
.camino--h .etapa--cultivo .etapa__arriba--b { left: 10%; bottom: calc(34% - 16px); }
.camino--h .etapa--cultivo .etapa__arriba--c { left: 39%; bottom: calc(34% - 18px); }
.etapa--raiz .etapa__arriba { --alto: 46%; bottom: calc(38% - 26px); }
.etapa--raiz .etapa__raices { --raiz: 34%; }
/* Cada planta se mece como la hoja de la entrada. Va en rotate para no pisar el crecimiento, que usa transform */
@keyframes mecer-planta {
  0%   { rotate: 0deg; }
  33%  { rotate: var(--vaiven, 4deg); }
  66%  { rotate: calc(var(--vaiven, 4deg) * -0.5); }
}
.js:not(.rm) .etapa__arriba { animation: mecer-planta 2.4s steps(1, end) infinite; }
.js:not(.rm) .etapa--semilla .etapa__arriba { --vaiven: 6deg; animation-duration: 2.1s; }
.js:not(.rm) .etapa--brote .etapa__arriba { --vaiven: 5deg; animation-duration: 2.6s; }
.js:not(.rm) .etapa--cultivo .etapa__arriba { --vaiven: 3deg; animation-duration: 2.3s; }
.js:not(.rm) .etapa--cultivo .etapa__arriba--b { animation-duration: 1.9s; }
.js:not(.rm) .etapa--cultivo .etapa__arriba--c { animation-duration: 2.8s; }
.js:not(.rm) .etapa--raiz .etapa__arriba { --vaiven: 2deg; animation-duration: 2.9s; }
/* Las cuatro partes de Raíz cuelgan de la punta de cada raíz */
.etapa__etiqueta {
  position: absolute; white-space: nowrap;
  padding: 2px 10px 3px;
  background: var(--crema) var(--papel) center / 400px;
  font-family: var(--f-mano); font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--tinta);
  opacity: clamp(0, calc((var(--g) - 0.8) * 5), 1);
  transform: scale(calc(1 / (0.4 + 0.6 * var(--g))), calc(1 / (0.1 + 0.9 * var(--g))));
}
.etapa__etiqueta--1 { left: 14%; top: 44%; translate: calc(-100% + var(--ax, 0px)) calc(-50% + var(--ay, 0px)); --giro: -5deg; rotate: var(--giro); transform-origin: 100% 50%; }
.etapa__etiqueta--2 { left: 88%; top: 43%; translate: calc(0% + var(--ax, 0px)) calc(-50% + var(--ay, 0px)); --giro: 4deg; rotate: var(--giro); transform-origin: 0 50%; }
.etapa__etiqueta--3 { left: 34%; top: 54%; translate: calc(-100% + var(--ax, 0px)) calc(30% + var(--ay, 0px)); --giro: 3deg; rotate: var(--giro); transform-origin: 100% 0; }
.etapa__etiqueta--4 { left: 56%; top: 80%; translate: calc(0% + var(--ax, 0px)) calc(-10% + var(--ay, 0px)); --giro: -3deg; rotate: var(--giro); transform-origin: 0 0; }
/* Bajo tierra también hay vida: la raíz tiembla un poco y las etiquetas se balancean colgadas de sus puntas */
@keyframes colgar {
  0%   { rotate: var(--giro, 0deg); }
  33%  { rotate: calc(var(--giro, 0deg) + 3deg); }
  66%  { rotate: calc(var(--giro, 0deg) - 2deg); }
}
.js:not(.rm) .etapa__raiz { transform-origin: 50% 0; animation: mecer-planta 3.1s steps(1, end) infinite; --vaiven: 1.2deg; }
.js:not(.rm) .etapa__etiqueta { animation: colgar 2.7s steps(1, end) infinite; }
/* se pueden coger y vuelven a colgar de su raíz */
.js:not(.rm) .etapa__etiqueta.is-arrastrada { z-index: 4; animation-play-state: paused; filter: var(--sombra-alta); }
.js:not(.rm) .etapa__etiqueta--2 { animation-duration: 2.2s; }
.js:not(.rm) .etapa__etiqueta--3 { animation-duration: 3.2s; }
.js:not(.rm) .etapa__etiqueta--4 { animation-duration: 2.4s; animation-direction: reverse; }

.etapa__ficha {
  position: relative; z-index: 3;
  margin: -88px 0 0;
  max-width: 520px;
  padding: 30px 28px 28px;
  background: var(--crema) var(--papel) center / 800px;
  filter: var(--sombra);
  rotate: -0.8deg;
  font-size: 17px; line-height: 1.5;
}
.etapa:nth-child(even) .etapa__ficha { rotate: 0.9deg; }
.etapa__ficha::before {
  content: ""; position: absolute; top: -12px; left: 34px;
  width: 92px; height: 26px; rotate: -5deg;
  background: color-mix(in srgb, var(--arena) 74%, transparent);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
}
.etapa__num { font-family: var(--f-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oliva); }
.etapa__nombre { font-size: clamp(44px, 4.4vw, 68px); line-height: 0.95; font-weight: 600; letter-spacing: -0.03em; margin: 6px 0 4px; font-variation-settings: "opsz" 72; }
.etapa__para { font-style: italic; font-size: 1.08em; margin-bottom: 10px; }
.etapa__ficha ul { margin: 14px 0 0; padding: 0; list-style: none; }
.etapa__ficha li { position: relative; padding: 5px 0 5px 22px; border-top: 1px dashed var(--linea); }
.etapa__ficha li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 10px;
  background: var(--oliva);
  -webkit-mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
}
.etapa__lista-raiz li { font-size: 0.94em; line-height: 1.42; }
.etapa__dato { margin-top: 12px; font-family: var(--f-ui); font-size: 14px; color: var(--tinta-suave); }
.etapa__pedir {
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding-right: 1.5em;
  font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--oliva);
  text-decoration-thickness: 1.5px;
}
/* La flecha va fuera del flujo para que el subrayado se quede solo bajo el texto */
.etapa__pedir::after {
  content: "→"; position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  transition: translate 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .etapa__pedir:hover::after { translate: 4px 0; }
}

/* Escritorio con movimiento reducido: las mismas etapas, quietas, planta y ficha en paralelo */
@media (min-width: 900px) {
  .camino:not(.camino--h) .etapa { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); min-height: 600px; align-items: center; }
  .camino:not(.camino--h) .etapa__planta { position: absolute; inset: 0; height: auto; }
  .camino:not(.camino--h) .etapa__suelo { height: 34%; }
  .camino:not(.camino--h) .etapa__arriba { left: 25%; }
  .camino:not(.camino--h) .etapa--brote .etapa__arriba { bottom: calc(34% - 6%); }
  .camino:not(.camino--h) .etapa--cultivo .etapa__arriba, .camino:not(.camino--h) .etapa--raiz .etapa__arriba { bottom: calc(34% - 26px); }
  .camino:not(.camino--h) .etapa--semilla .etapa__arriba { bottom: calc(34% - 8%); }
  .camino:not(.camino--h) .etapa__raices { left: 25%; top: calc(66% + 26px); }
  .camino:not(.camino--h) .etapa__ficha { grid-column: 2; margin: 0 0 6%; }

}

/* Escritorio con movimiento: el camino avanza en horizontal mientras bajas */
.camino--h { position: relative; margin-top: clamp(32px, 4vh, 56px); }
.camino--h .camino__escena {
  position: sticky; top: var(--nav-alto);
  height: calc(100vh - var(--nav-alto)); height: calc(100svh - var(--nav-alto));
  overflow: hidden;
}
.camino--h .camino__pista {
  display: flex; gap: 0; height: 100%;
  width: max-content; max-width: none; margin: 0;
  padding: 0 0 0 var(--margen);
  will-change: transform;
}
.camino--h .etapa {
  width: min(84vw, 1180px); height: 100%;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: center;
}
.camino--h .etapa:last-child { width: min(96vw, 1280px); padding-right: var(--margen); }
.camino--h .etapa__planta { position: absolute; inset: 0; height: auto; }
.camino--h .etapa__suelo { left: -2px; right: -2px; height: 34%; }
/* en horizontal la tierra es una sola tira de papel a lo largo de todo el camino, para que el filo de arriba no dé saltos
   entre paquete y paquete; llega hasta abajo de la escena y el rasgado va debajo, para que las raíces no queden colgando */
.camino--h .etapa__suelo { display: none; }
.camino--h .camino__pista { position: relative; }
.camino--h .camino__pista::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none;
  background: var(--tinta) var(--papel-tinta) center / 700px;
  -webkit-mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 56px no-repeat, linear-gradient(#000, #000) 0 54px / 100% calc(100% - 54px) no-repeat;
          mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 56px no-repeat, linear-gradient(#000, #000) 0 54px / 100% calc(100% - 54px) no-repeat;
}
.camino--h::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: calc(100% - 2px); height: 90px; pointer-events: none;
  background: var(--tinta) var(--papel-tinta) center / 700px;
  -webkit-mask: url(../assets/papel/filo-abajo.svg) 0 0 / 100% 100%; mask: url(../assets/papel/filo-abajo.svg) 0 0 / 100% 100%;
}
.camino--h .etapa:first-child .etapa__suelo { left: calc(var(--margen) * -1); }
.camino--h .etapa__arriba { left: 25%; }
.camino--h .etapa--brote .etapa__arriba { bottom: calc(34% - 6%); }
.camino--h .etapa--cultivo .etapa__arriba, .camino--h .etapa--raiz .etapa__arriba { bottom: calc(34% - 26px); }
.camino--h .etapa__raices { left: 25%; top: calc(66% + 26px); }
.camino--h .etapa--semilla .etapa__arriba { bottom: calc(34% - 8%); }
.camino--h .etapa--raiz .etapa__raices { --raiz: 30%; }
.camino--h .etapa__ficha {
  grid-column: 2; margin: -4vh 0 0;
  max-width: 470px;
  padding: clamp(22px, 3vh, 32px) 30px clamp(20px, 2.6vh, 28px);
  font-size: clamp(15px, 1.85vh, 17px);
}
.camino--h .etapa__nombre { font-size: clamp(40px, 6.4vh, 66px); }
.camino--h .camino__pista-nota { display: block; position: absolute; z-index: 2; left: var(--margen); top: 3vh; rotate: -3deg; }
.camino--h .camino__mapa {
  display: flex; gap: 6px; position: absolute; z-index: 2;
  left: calc(var(--margen) - 12px); top: calc(3vh + 46px);
}
.camino__mapa button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 14px; font-weight: 600;
  color: var(--tinta-suave);
  transition: color 200ms ease;
}
.camino__mapa .forma { width: 22px; height: 24px; aspect-ratio: auto; }
.camino__mapa button[aria-current="true"] { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.camino__mapa button[aria-current="true"] .forma { color: var(--oliva); }
@media (hover: hover) and (pointer: fine) {
  .camino__mapa button:hover { color: var(--tinta); }
}

.despues {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) var(--margen) var(--seccion);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: start;
}
.despues__bloque { position: relative; padding: clamp(28px, 3vw, 44px); filter: var(--sombra); background: var(--arena) var(--papel-arena) center / 600px; }
/* en escritorio, la tierra rasgada del camino baja unos 90 px: los bloques empiezan más abajo para que respiren */
.camino--h + .despues { padding-top: calc(clamp(64px, 10vh, 120px) + 90px); }
.despues__bloque--taller { background: var(--crema) var(--papel) center / 700px; margin-top: 48px; }
.despues__icono { width: 54px; color: var(--oliva); margin-bottom: 16px; }
.despues__titulo { font-size: clamp(26px, 2.2vw, 36px); line-height: 1.08; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 16px; text-wrap: balance; }
.selector { display: inline-flex; gap: 6px; padding: 5px; margin-bottom: 22px; background: color-mix(in srgb, var(--tinta) 10%, transparent); border-radius: 3px; }
.selector button {
  min-height: 44px; padding: 8px 18px; border: 0; border-radius: 2px; cursor: pointer;
  background: transparent; font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--tinta);
  transition: background-color 180ms ease, color 180ms ease;
}
.selector button[aria-checked="true"] { background: var(--tinta); color: var(--crema); }
@media (hover: hover) and (pointer: fine) {
  .selector button[aria-checked="false"]:hover { background: color-mix(in srgb, var(--tinta) 14%, transparent); }
}
.despues__cuadro { display: grid; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.despues__ilustra { position: relative; aspect-ratio: 1 / 0.9; }
.despues__arbol { position: absolute; left: 6%; bottom: 0; width: 76%; color: var(--oliva); }
.despues__mano, .despues__galgo { position: absolute; display: block; }
.despues__mano { right: 8%; bottom: 0; width: 30%; color: var(--tinta); rotate: -14deg; transform-origin: 50% 100%; }
.despues__galgo { right: 2%; bottom: 0; width: 58%; transform-origin: 50% 85%; }
.despues__galgo img { width: 100%; }
.despues__cuadro[data-quien-actual="equipo"] .despues__galgo,
.despues__cuadro[data-quien-actual="raiga"] .despues__mano { display: none; }
.despues__nombre { font-family: var(--f-ui); font-weight: 700; font-size: 16px; letter-spacing: 0.02em; margin-bottom: 6px; }
.despues__opcion p:not(.despues__nombre) { font-size: 17.5px; }
.js .despues__cuadro.is-cambio .despues__opcion:not([hidden]),
.js .despues__cuadro.is-cambio .despues__mano,
.js .despues__cuadro.is-cambio .despues__galgo { animation: pegar calc(var(--fotograma) * 6) steps(1, end); --dx: 0px; --dy: 18px; }
.despues__bloque { transition: translate 260ms var(--ease-out), filter 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .js:not(.rm) .despues__bloque--taller:hover { translate: 0 -10px; filter: var(--sombra-alta); }
  .js:not(.rm) .despues__bloque--taller:hover .despues__icono { animation: menear calc(var(--fotograma) * 6) steps(1, end); }
}
.despues__nota { margin-top: 12px; font-family: var(--f-mano); font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--oliva); rotate: -1.5deg; width: fit-content; }
/* la mano saluda y acaricia el árbol; el galgo da saltos sin moverse de su sitio */
@keyframes saltar-galgo {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-4%, -16%) rotate(-7deg); }
  50%  { transform: translate(-7%, -4%) rotate(2deg); }
  75%  { transform: translate(-3%, 0) rotate(0deg); }
}
@keyframes cuidar {
  0%   { rotate: -14deg; }
  33%  { rotate: -4deg; translate: -3px -3px; }
  66%  { rotate: -18deg; }
}
.despues__arbol { transform-origin: 50% 100%; }
.js:not(.rm) .despues__arbol { animation: mecer 2.6s steps(1, end) infinite; }
.js:not(.rm) .despues__mano { animation: cuidar 1.2s steps(1, end) infinite; }
/* el salto va en la imagen, para no chocar con el pegado al cambiar de opción */
.despues__galgo img { transform-origin: 50% 85%; }
.js:not(.rm) .despues__galgo img { animation: saltar-galgo 1s steps(1, end) infinite; }
.js:not(.rm) .despues__cuadro.is-cambio .despues__mano { animation: pegar calc(var(--fotograma) * 6) steps(1, end), cuidar 1.2s steps(1, end) infinite; }

/* Más proyectos: una etiqueta de papel con su cinta, sin más */
.mas-postales {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 22px 12px; border: 0; cursor: pointer; rotate: -2deg;
  background: var(--arena) var(--papel-arena) center / 300px; filter: var(--sombra);
  font-family: var(--f-mano); font-size: 28px; font-weight: 600; line-height: 1.1; color: var(--tinta);
  transition: translate 220ms var(--ease-out), rotate 220ms var(--ease-out);
}
.mas-postales::before {
  content: ''; position: absolute; top: -10px; left: 50%; width: 58px; height: 20px; translate: -50% 0; rotate: 5deg;
  background: color-mix(in srgb, var(--crema) 70%, transparent);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
}
.mas-postales:focus-visible { outline: 2px solid var(--crema); outline-offset: 6px; }
.mas-postales .ambitos__cuenta { background: var(--tinta); color: var(--crema); }
@media (hover: hover) and (pointer: fine) { .mas-postales:hover { translate: 0 -4px; rotate: 0deg; } }

/* Más postales: un botón de papel que reparte tres más */
.ambitos__desliza { display: none; color: var(--arena); text-align: right; margin-top: -10px; }
.ambitos__mas { max-width: var(--ancho); margin: clamp(48px, 7vh, 72px) auto 0; display: flex; justify-content: center; }
.boton--crema-linea { background: transparent; border-color: var(--crema); color: var(--crema); gap: 12px; }
.boton--crema-linea:focus-visible { outline-color: var(--crema); }
@media (hover: hover) and (pointer: fine) { .boton--crema-linea:hover { background: var(--crema); color: var(--tinta); } }
.ambitos__cuenta { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 50%; background: var(--arena); color: var(--tinta); font-family: var(--f-mano); font-size: 20px; font-weight: 700; rotate: -6deg; }
.postal-hueco--mas[hidden], .ambitos__cuenta[hidden] { display: none; }

/* ---------- 5 · Dónde encajamos: postales ---------- */

.ambitos {
  position: relative;
  margin-top: 40px;
  padding: var(--seccion) var(--margen);
  background: var(--tinta) var(--papel-tinta) center / 900px;
  color: var(--crema);
}
.ambitos::before, .ambitos::after {
  content: ""; position: absolute; left: 0; right: 0; height: 60px;
  background: inherit;
}
.ambitos::before {
  top: -58px;
  -webkit-mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%;
}
.ambitos::after {
  bottom: -58px; rotate: 180deg;
  -webkit-mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%;
}
.ambitos__cabecera { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.postales {
  max-width: var(--ancho); margin: clamp(48px, 7vh, 80px) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 56px) clamp(22px, 2.6vw, 44px);
  align-items: start;
}
.postal-hueco:nth-child(2) { margin-top: 56px; }
.postal-hueco:nth-child(4) { margin-left: 12%; }
.postal-hueco:nth-child(5) { margin-top: 40px; }

.postal { position: relative; display: grid; perspective: 1600px; color: var(--tinta); cursor: pointer; }
.postal__cara, .postal__dorso {
  grid-area: 1 / 1;
  background: var(--crema) var(--papel) center / 700px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  filter: var(--sombra);
  /* el giro también va por fotogramas, como una mano que da la vuelta a la postal */
  transition: transform calc(var(--fotograma) * 6) steps(6, end);
}
.postal__cara { padding: 12px 12px 54px; }
.postal__foto { aspect-ratio: 3 / 2; overflow: hidden; }
.postal__foto img { width: 100%; height: 100%; object-fit: cover; }
.postal__quien { margin: 14px 4px 4px; font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oliva); }
.postal__titulo { margin: 0 4px; font-size: clamp(21px, 1.6vw, 26px); line-height: 1.12; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.postal__dorso {
  transform: rotateY(180deg);
  display: grid; grid-template-columns: minmax(0, 1fr) 30%;
  gap: 18px; padding: 22px 20px 58px;
}
.postal__texto { display: grid; gap: 10px; align-content: start; font-size: 15.5px; line-height: 1.45; padding-right: 16px; border-right: 1px solid var(--linea); }
.postal__texto strong { font-weight: 600; }
.postal__lado { display: grid; align-content: space-between; justify-items: end; gap: 16px; }
.postal__sello {
  width: 74px; aspect-ratio: 0.82; display: grid; place-items: center; padding: 8px;
  background: var(--arena) var(--papel-arena) center / 300px;
  outline: 4px dotted var(--crema); outline-offset: -2px;
  rotate: 4deg;
}
.postal__sello img { width: 100%; }
.postal__encaja { font-family: var(--f-mano); font-size: 22px; font-weight: 500; line-height: 1.2; text-align: right; }
.postal__encaja a { color: var(--oliva); font-weight: 700; text-decoration-thickness: 1.5px; }
.postal.is-vuelta .postal__cara { transform: rotateY(-180deg); }
.postal.is-vuelta .postal__dorso { transform: rotateY(0deg); }
.postal__girar {
  position: absolute; z-index: 2; right: 12px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 14px; font-weight: 600; color: var(--tinta);
}
.postal__girar::before {
  content: ""; width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url(../assets/formas/45_flecha.svg) center / contain no-repeat;
          mask: url(../assets/formas/45_flecha.svg) center / contain no-repeat;
  transition: rotate 200ms var(--ease-out);
}
.postal.is-vuelta .postal__girar::before { rotate: 180deg; }
/* Las postales se mecen hasta que las tocas; desde entonces se quedan quietas para leerlas */
@keyframes mecer-postal {
  0%   { rotate: 0deg; }
  33%  { rotate: 1.4deg; }
  66%  { rotate: -0.8deg; }
}
.js:not(.rm) .postal:not(.is-tocada) { transform-origin: 50% 0; animation: mecer-postal 2.6s steps(1, end) infinite; }
.js:not(.rm) .postal-hueco:nth-child(2) .postal { animation-duration: 2.1s; animation-direction: reverse; }
.js:not(.rm) .postal-hueco:nth-child(3) .postal { animation-duration: 3s; }
.js:not(.rm) .postal-hueco:nth-child(4) .postal { animation-duration: 2.3s; animation-direction: reverse; }
.js:not(.rm) .postal-hueco:nth-child(5) .postal { animation-duration: 2.8s; }
@media (hover: hover) and (pointer: fine) {
  .postal-hueco { transition: translate 220ms var(--ease-out); }
  .postal-hueco:hover { translate: 0 -6px; }
}
.ambitos__otra { max-width: var(--ancho); margin: clamp(48px, 7vh, 80px) auto 0; text-align: center; font-family: var(--f-mano); font-size: clamp(26px, 2.2vw, 32px); font-weight: 600; line-height: 1.2; }
.ambitos__otra a { color: var(--arena); text-decoration-thickness: 2px; }
.ambitos__otra a:focus-visible { outline-color: var(--crema); }

/* Caso real: la postal lleva una marca a mano y un vídeo del trabajo que se reproduce en bucle, sin sonido */
.postal__cara { position: relative; }
.postal__marca {
  position: absolute; z-index: 2; top: 2px; right: -8px; rotate: 6deg;
  padding: 2px 14px 4px;
  background: var(--arena) var(--papel-arena) center / 300px; filter: var(--sombra);
  font-family: var(--f-mano); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--tinta);
}
.postal__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ambitos__aviso { max-width: var(--ancho); margin: 32px auto 0; text-align: center; font-family: var(--f-ui); font-size: 13px; color: color-mix(in srgb, var(--crema) 80%, transparent); }

/* ---------- 6 · Quiénes somos: cartas ---------- */

/* ---------- 5b · Nuevas herramientas: rasga el informe, sobre oliva ----------
   Una hoja de documento técnico grapada tapa los prototipos. Se rasga tirando del papel, a saltos,
   y las dos mitades caen; debajo aparece el proyecto contado de otra manera. */
.jugar {
  position: relative; z-index: 1;
  padding: clamp(64px, 9vh, 100px) var(--margen) clamp(56px, 8vh, 88px);
  background: var(--oliva) var(--papel-oliva) center / 700px; color: var(--crema);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center;
}
.jugar > * { max-width: 540px; }
.jugar__texto { justify-self: end; position: relative; z-index: 3; }
/* las mitades que caen no se salen de la sección ni tapan el texto */
.jugar { overflow-x: clip; }
.ambitos { z-index: 2; }
.jugar::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -2px; height: 60px; pointer-events: none; background: var(--crema) var(--papel) center top / 1600px auto;
  -webkit-mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%; mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%;
}
.jugar__marca { display: inline-block; margin-bottom: 14px; padding: 1px 12px 3px; border: 1.5px solid var(--arena); border-radius: 3px; color: var(--arena); font-size: 21px; rotate: -2deg; }
.jugar__titulo { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; line-height: 1.02; letter-spacing: -0.024em; font-variation-settings: "opsz" 72; text-wrap: balance; margin-bottom: 18px; }
.jugar em.subraya { --letra: var(--crema); --fondo-em: var(--oliva); }
.jugar__texto > p:not(.jugar__marca) { font-size: 16px; line-height: 1.55; color: color-mix(in srgb, var(--crema) 88%, transparent); }
.jugar .etapa__pedir { margin-top: 22px; color: var(--crema); }
.jugar__aviso { font-family: var(--f-ui); font-size: 12px; color: color-mix(in srgb, var(--crema) 72%, transparent); }

.informe { margin: 0; justify-self: start; width: min(100%, 540px); --p: 0; }
.informe__marco { position: relative; aspect-ratio: 1400 / 1000; rotate: 1deg; }
.informe__marco video {
  /* el vídeo va un poco hacia dentro: el borde rasgado se come el marco oscuro, no los textos del vídeo */
  position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 4.5% 5%; object-fit: contain; background: var(--tinta);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100% no-repeat; mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100% no-repeat;
}
.informe__hoja { position: absolute; inset: -2%; z-index: 2; pointer-events: none; }
.informe__mitad { position: absolute; inset: 0; filter: drop-shadow(0 2px 2px rgb(30 21 13 / 0.2)) drop-shadow(0 14px 18px rgb(30 21 13 / 0.25)); }
.informe__mitad--i { transform-origin: 0 100%; transform: translate(calc(var(--p) * -5%), calc(var(--p) * 3%)) rotate(calc(var(--p) * -15deg)); }
.informe__mitad--d { transform-origin: 100% 100%; transform: translate(calc(var(--p) * 6%), calc(var(--p) * 4%)) rotate(calc(var(--p) * 12deg)); }
.informe.is-rota .informe__mitad--i { animation: caer-i calc(var(--fotograma) * 6) steps(1, end) forwards; }
.informe.is-rota .informe__mitad--d { animation: caer-d calc(var(--fotograma) * 7) steps(1, end) forwards; }
@keyframes caer-i {
  0%   { transform: translate(-5%, 3%) rotate(-15deg); }
  20%  { transform: translate(-9%, 14%) rotate(-21deg); }
  40%  { transform: translate(-14%, 34%) rotate(-28deg); }
  60%  { transform: translate(-19%, 62%) rotate(-34deg); }
  80%  { transform: translate(-23%, 96%) rotate(-40deg); opacity: 1; }
  100% { transform: translate(-26%, 130%) rotate(-44deg); opacity: 0; visibility: hidden; }
}
@keyframes caer-d {
  0%   { transform: translate(6%, 4%) rotate(12deg); }
  17%  { transform: translate(10%, 12%) rotate(17deg); }
  33%  { transform: translate(14%, 28%) rotate(23deg); }
  50%  { transform: translate(18%, 50%) rotate(29deg); }
  67%  { transform: translate(22%, 78%) rotate(34deg); }
  83%  { transform: translate(25%, 108%) rotate(38deg); opacity: 1; }
  100% { transform: translate(27%, 135%) rotate(41deg); opacity: 0; visibility: hidden; }
}
.rm .informe.is-rota .informe__mitad { animation: none; visibility: hidden; }

/* la página del documento técnico, cortada en dos por el rasgado */
.documento { position: absolute; inset: 0; padding: 6% 8%; background: #F4EFE5 var(--papel) center / 700px; color: var(--tinta); font-family: var(--f-ui); overflow: hidden; }
.documento__cabecera { display: flex; justify-content: space-between; font-size: clamp(8px, 0.75vw, 11px); color: var(--tinta-suave); border-bottom: 1px solid var(--linea); padding-bottom: 6px; }
.documento__titulo { margin: 4% 0 3%; font-family: var(--f-texto); font-size: clamp(13px, 1.35vw, 20px); font-weight: 600; line-height: 1.15; }
.documento__lineas { display: grid; gap: clamp(5px, 0.7vw, 10px); }
.documento__lineas i { display: block; height: clamp(3px, 0.4vw, 5px); width: var(--w); background: color-mix(in srgb, var(--tinta) 22%, transparent); border-radius: 2px; }
.documento__tabla { width: 100%; margin: 4% 0; border-collapse: collapse; }
.documento__tabla td { height: clamp(10px, 1.2vw, 17px); border: 1px solid color-mix(in srgb, var(--tinta) 26%, transparent); }
.documento__tabla tr:first-child td { background: color-mix(in srgb, var(--tinta) 9%, transparent); }
.documento__sello { position: absolute; right: 8%; bottom: 6%; padding: 3px 10px 4px; border: 3px solid color-mix(in srgb, var(--oliva) 75%, transparent); border-radius: 4px; color: color-mix(in srgb, var(--oliva) 80%, transparent); font-family: var(--f-mano); font-size: clamp(14px, 1.4vw, 22px); font-weight: 700; rotate: -12deg; }
.informe__grapa { position: absolute; left: 5%; top: 4%; width: 7%; height: 1.4%; border-radius: 2px; background: color-mix(in srgb, var(--tinta) 55%, #9a9a9a); rotate: -28deg; box-shadow: 0 1px 1px rgb(0 0 0 / 0.3); z-index: 1; }

/* la lengüeta de la que se tira */
.informe__tira {
  position: absolute; z-index: 3; top: 0; left: var(--tx, 50%); translate: -50% -55%;
  padding: 6px 12px 15px; border: 0; cursor: grab; touch-action: none;
  background: var(--arena) var(--papel-arena) center / 300px; color: var(--tinta);
  font-family: var(--f-mano); font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 88% 86%, 74% 79%, 60% 90%, 46% 80%, 32% 91%, 18% 81%, 0 88%);
  filter: drop-shadow(0 3px 3px rgb(30 21 13 / 0.3)); rotate: -4deg;
  transform: translateY(calc(var(--p) * 30px));
}
.informe__tira span::after { content: " ↓"; font-family: var(--f-ui); font-size: 0.8em; }
.informe__tira:active { cursor: grabbing; }
.informe__tira:focus-visible { outline: 2px dashed var(--crema); outline-offset: 4px; }
.js:not(.rm) .informe:not(.is-rota) .informe__tira { animation: tiritar 1.3s steps(1, end) infinite; }
.informe.is-rota .informe__tira { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .informe:not(.is-rota) .informe__tira:hover { --p: 0.12; } }

/* trocitos de papel que caen al rasgar */
.informe__trozo { position: absolute; z-index: 4; width: var(--t); aspect-ratio: 1; background: #F4EFE5; pointer-events: none; clip-path: polygon(10% 0, 90% 14%, 100% 70%, 54% 100%, 0 78%); filter: drop-shadow(0 1px 1px rgb(30 21 13 / 0.25)); }
.js:not(.rm) .informe__trozo { animation: trozo calc(var(--fotograma) * 8) steps(1, end) forwards; }
@keyframes trozo {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(calc(var(--dx) * 0.3), 30px) rotate(60deg); }
  50%  { transform: translate(calc(var(--dx) * 0.6), 90px) rotate(140deg); }
  75%  { transform: translate(calc(var(--dx) * 0.85), 170px) rotate(210deg); opacity: 1; }
  100% { transform: translate(var(--dx), 260px) rotate(280deg); opacity: 0; }
}

.informe__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 14px; padding: 0 4px; }
.informe__pista { flex: 1 1 100%; color: var(--arena); font-size: clamp(19px, 1.5vw, 22px); }
.informe.is-rota .informe__pista { color: var(--crema); }
.informe__grapar { min-height: 40px; padding: 0 14px; border: 1.5px solid var(--crema); border-radius: 3px; background: none; color: var(--crema); cursor: pointer; font-family: var(--f-ui); font-size: 14px; font-weight: 600; }
.informe__grapar[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .informe__grapar:hover { background: var(--crema); color: var(--oliva); } }


/* el campo del fondo: teje la red. Pueblos de papel sueltos por las lomas; arrastrando de uno a otro
   se tiende un hilo de lana por el que viajan sobres. Cuantos más se unen, más lejos llega, hasta la ciudad. */
.jugar { padding-bottom: calc(clamp(40px, 5vh, 64px) + clamp(120px, 14vw, 180px)); }
.jugar > :not(.jugar__campo) { position: relative; z-index: 2; }
.jugar__campo { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: clamp(200px, 23vw, 300px); max-width: none; overflow: hidden; }
.jugar__campo > * { position: absolute; display: block; }
.campo__loma { left: -4%; right: -4%; bottom: -2px; filter: var(--sombra); pointer-events: none; }
/* el sol, detrás de la sierra; cuando todo está conectado sube y crece */
.campo__sol { left: 38%; bottom: 38%; width: clamp(70px, 7vw, 108px); aspect-ratio: 1; pointer-events: none; background: var(--arena) var(--papel-arena) center / 200px; -webkit-mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%; mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%; transition: translate calc(var(--fotograma) * 5) steps(5, end), scale calc(var(--fotograma) * 5) steps(5, end); }
.js:not(.rm) .campo__sol { animation: respirar 3.3s steps(1, end) infinite; }
.jugar__campo.is-completa .campo__sol { translate: 0 -38%; }
/* una cordillera lejana, detrás y a la derecha: más clara, como se ven los montes a lo lejos */
.campo__loma--fondo { left: 49%; right: -6%; height: 82%; background: linear-gradient(rgb(236 227 211 / 0.2), rgb(236 227 211 / 0.2)), var(--papel-salvia) center / 600px; -webkit-mask: url(../assets/formas/65_cordillera_lleno.svg) 0 0 / 100% 100%; mask: url(../assets/formas/65_cordillera_lleno.svg) 0 0 / 100% 100%; }
.campo__loma--sierra { left: -10%; right: -10%; height: 80%; background: color-mix(in srgb, var(--salvia) 55%, var(--oliva)) var(--papel-salvia) center / 600px; -webkit-mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 30% 0 / 150% 100% no-repeat; mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 30% 0 / 150% 100% no-repeat; filter: none; }
.campo__loma--izq { left: -10%; right: 62%; height: 30%; background: color-mix(in srgb, var(--salvia) 80%, var(--crema)) var(--papel-salvia) center / 600px; -webkit-mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%; mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%; bottom: 6%; }
.campo__loma--lejos { height: 62%; background: color-mix(in srgb, var(--salvia) 62%, var(--oliva)) var(--papel-salvia) center / 600px; -webkit-mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 0 0 / 100% 100%; mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 0 0 / 100% 100%; filter: none; }
.campo__loma--media { right: 30%; height: 38%; background: color-mix(in srgb, var(--oliva) 70%, var(--tinta)) var(--papel-oliva) center / 600px; -webkit-mask: url(../assets/formas/06_loma_izquierda_terreno.svg) 0 0 / 100% 100%; mask: url(../assets/formas/06_loma_izquierda_terreno.svg) 0 0 / 100% 100%; }
.campo__loma--delante { left: 38%; right: -22%; bottom: -14%; height: 40%; background: color-mix(in srgb, var(--arena) 55%, var(--oliva)) var(--papel-arena) center / 600px; -webkit-mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%; mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%; }
.campo__arbol { left: var(--x); bottom: var(--b); width: calc(24px * var(--e, 1)); aspect-ratio: 483 / 808; background: var(--tinta); -webkit-mask: url(../assets/formas/19_cipreses.svg) center / contain no-repeat; mask: url(../assets/formas/19_cipreses.svg) center / contain no-repeat; transform-origin: 50% 100%; pointer-events: none; }
.campo__arbol--olivo { width: 44px; aspect-ratio: 694 / 738; background: color-mix(in srgb, var(--tinta) 70%, var(--oliva)); -webkit-mask-image: url(../assets/formas/11_olivo.svg); mask-image: url(../assets/formas/11_olivo.svg); }
.js:not(.rm) .campo__arbol { animation: mecer 2.6s steps(1, end) infinite; }

/* los hilos de lana */
.red__hilos { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.red__hilos path { fill: none; stroke-linecap: round; }
.red__hilos .hilo { stroke: var(--arena); stroke-width: 3; filter: drop-shadow(0 2px 1px rgb(30 21 13 / 0.35)); }
.red__hilos .hilo-pelo { stroke: var(--crema); stroke-width: 1.4; stroke-dasharray: 2 7; opacity: 0.8; }
.red__hilos .hilo--tirando { stroke: var(--crema); stroke-dasharray: 6 6; opacity: 0.9; }
.js:not(.rm) .red__hilos .is-nuevo { animation: tender calc(var(--fotograma) * 4) steps(4, end) backwards; }
@keyframes tender { from { stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); } to { stroke-dasharray: var(--l) var(--l); stroke-dashoffset: 0; } }

/* los pueblos: se cogen para tender el hilo */
.red__nodo {
  left: var(--x); bottom: var(--b); translate: -50% 0; z-index: 4; width: clamp(46px, 4.6vw, 66px); aspect-ratio: 898 / 590;
  padding: 0; border: 0; background: none; cursor: grab; touch-action: none; color: var(--tinta); -webkit-tap-highlight-color: transparent;
}
.red__nodo--casa { width: clamp(30px, 3vw, 42px); aspect-ratio: 700 / 724; }
.red__nodo--granero { width: clamp(32px, 3.2vw, 46px); aspect-ratio: 784 / 739; }
.red__nodo--ciudad { width: clamp(52px, 5.4vw, 78px); aspect-ratio: 1.6; color: color-mix(in srgb, var(--tinta) 72%, var(--salvia)); }
.red__silueta { position: relative; display: block; width: 100%; height: 100%; background: currentColor; filter: drop-shadow(0 2px 2px rgb(30 21 13 / 0.3)); transition: transform 160ms var(--ease-out); }
.red__nodo--pueblo .red__silueta { -webkit-mask: url(../assets/formas/23_pueblo.svg) center / contain no-repeat; mask: url(../assets/formas/23_pueblo.svg) center / contain no-repeat; }
.red__nodo--casa .red__silueta { -webkit-mask: url(../assets/formas/21_casa_frontal.svg) center / contain no-repeat; mask: url(../assets/formas/21_casa_frontal.svg) center / contain no-repeat; }
.red__nodo--granero .red__silueta { -webkit-mask: url(../assets/formas/22_granero.svg) center / contain no-repeat; mask: url(../assets/formas/22_granero.svg) center / contain no-repeat; }
/* la ciudad: bloques de papel de distinta altura */
.red__nodo--ciudad .red__silueta { display: flex; align-items: flex-end; gap: 6%; background: none; }
.red__nodo--ciudad .red__silueta i { flex: 1; height: 55%; background: currentColor; }
.red__nodo--ciudad .red__silueta i:nth-child(2) { height: 100%; } .red__nodo--ciudad .red__silueta i:nth-child(3) { height: 72%; } .red__nodo--ciudad .red__silueta i:nth-child(4) { height: 88%; } .red__nodo--ciudad .red__silueta i:nth-child(5) { height: 46%; }
.red__nodo::after { content: ""; position: absolute; left: 50%; top: 8%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; background: var(--arena); box-shadow: 0 0 0 2px var(--tinta); opacity: 0; transition: opacity 0s; }
.red__nodo.is-unido::after { opacity: 1; }
.red__nodo.is-unido { color: color-mix(in srgb, var(--tinta) 88%, var(--oliva)); }
.red__nodo.is-elegido .red__silueta, .red__nodo.is-sobre .red__silueta { transform: translateY(-10%) scale(1.08); }
.red__nodo.is-elegido::before { content: ""; position: absolute; inset: -22% -18%; border: 2px dashed var(--crema); border-radius: 50%; }
.red__nodo:focus-visible { outline: 2px dashed var(--crema); outline-offset: 6px; border-radius: 4px; }
.js:not(.rm) .red__nodo.is-saluda .red__silueta { animation: pegar calc(var(--fotograma) * 6) steps(1, end); --dx: 0px; --dy: -10px; --r: 0deg; }
@media (hover: hover) and (pointer: fine) { .red__nodo:hover .red__silueta { transform: translateY(-8%); } }
.js:not(.rm) .jugar__campo:not(.is-tejida) .red__nodo:first-of-type .red__silueta { animation: tiritar 1.2s steps(1, end) infinite; }

/* la fiesta, cuando todo está conectado: banderines por los hilos, ventanas encendidas en la ciudad
   y golondrinas que cruzan el campo */
.red__banderin { position: absolute; z-index: 4; width: 11px; height: 13px; translate: -50% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; transform: rotate(var(--r, 0deg)); }
.red__banderin:nth-child(3n) { background: var(--arena); } .red__banderin:nth-child(3n+1) { background: var(--crema); } .red__banderin:nth-child(3n+2) { background: var(--salvia); }
.js:not(.rm) .red__banderin { animation: pegar calc(var(--fotograma) * 6) steps(1, end) calc(var(--i) * var(--fotograma)) backwards; --dx: 0px; --dy: -10px; }
.jugar__campo.is-completa .red__nodo--ciudad .red__silueta i { background: linear-gradient(transparent 18%, color-mix(in srgb, var(--crema) 70%, #F2C66A) 18% 28%, transparent 28% 46%, color-mix(in srgb, var(--crema) 70%, #F2C66A) 46% 56%, transparent 56%) 50% 0 / 44% 100% no-repeat, currentColor; }
.red__golondrina { z-index: 5; left: -6%; top: var(--y); width: calc(clamp(26px, 2.6vw, 38px) * var(--e, 1)); aspect-ratio: 860 / 590; background: var(--tinta); -webkit-mask: url(../assets/formas/39_golondrina.svg) center / contain no-repeat; mask: url(../assets/formas/39_golondrina.svg) center / contain no-repeat; opacity: 0; pointer-events: none; }
.js:not(.rm) .jugar__campo.is-completa .red__golondrina { animation: cruzar calc(var(--fotograma) * 20) steps(1, end) calc(var(--i) * var(--fotograma)) forwards; }
@keyframes cruzar {
  0% { opacity: 1; left: -6%; transform: translateY(0) scaleY(1); }
  10% { left: 4%; transform: translateY(-8px) scaleY(0.6); } 20% { left: 14%; transform: translateY(-14px) scaleY(1); }
  30% { left: 24%; transform: translateY(-10px) scaleY(0.6); } 40% { left: 34%; transform: translateY(-2px) scaleY(1); }
  50% { left: 44%; transform: translateY(-12px) scaleY(0.6); } 60% { left: 54%; transform: translateY(-20px) scaleY(1); }
  70% { left: 64%; transform: translateY(-14px) scaleY(0.6); } 80% { left: 74%; transform: translateY(-6px) scaleY(1); }
  90% { left: 86%; transform: translateY(-12px) scaleY(0.6); opacity: 1; } 100% { left: 104%; transform: translateY(-18px); opacity: 0; }
}
.jugar__campo.is-completa .red__pista { color: var(--arena); font-size: clamp(20px, 1.8vw, 27px); }
.js:not(.rm) .jugar__campo.is-completa .red__pista { animation: pegar calc(var(--fotograma) * 6) steps(1, end); --dx: 0px; --dy: 10px; --r: -2deg; }

/* al pasar el ratón por el cielo verde caen ideas de papel; las semillas que llegan a las lomas brotan */
.jugar > .jugar__ideas { position: absolute; z-index: 1; inset: 0; max-width: none; overflow: hidden; pointer-events: none; }
.idea { position: absolute; width: 18px; aspect-ratio: 1; background: var(--arena) var(--papel-arena) center / 60px; -webkit-mask: url(../assets/formas/14_semilla.svg) center / contain no-repeat; mask: url(../assets/formas/14_semilla.svg) center / contain no-repeat; }
.idea--chispa { width: 15px; background: var(--crema); -webkit-mask-image: url(../assets/formas/41_asterisco.svg); mask-image: url(../assets/formas/41_asterisco.svg); }
.brote { position: absolute; width: 22px; aspect-ratio: 687 / 639; background: color-mix(in srgb, var(--tinta) 72%, var(--oliva)); -webkit-mask: url(../assets/formas/13_brote.svg) center / contain no-repeat; mask: url(../assets/formas/13_brote.svg) center / contain no-repeat; transform: translate(-50%, -100%) scale(0.2); transform-origin: 50% 100%; }

/* los sobres que viajan por los hilos */
.red__sobre { z-index: 5; width: 24px; aspect-ratio: 1142 / 765; translate: -50% -60%; background: var(--crema) var(--papel) center / 80px; -webkit-mask: url(../assets/marca/sobre.png) center / contain no-repeat; mask: url(../assets/marca/sobre.png) center / contain no-repeat; filter: drop-shadow(0 2px 2px rgb(30 21 13 / 0.35)); pointer-events: none; }

.red__pie { left: 3%; bottom: 66%; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: 46%; }
.red__pista { color: var(--crema); font-size: clamp(18px, 1.5vw, 23px); }
.red__pista::before { content: "↓ "; font-family: var(--f-ui); font-size: 0.8em; }
.jugar__campo.is-tejida .red__pista::before { content: ""; }
.red__deshacer { min-height: 36px; padding: 0 12px; border: 1.5px solid var(--crema); border-radius: 3px; background: none; color: var(--crema); cursor: pointer; font-family: var(--f-ui); font-size: 13px; font-weight: 600; }
.red__deshacer[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .red__deshacer:hover { background: var(--crema); color: var(--oliva); } }
@media (max-width: 760px) {
  .jugar { padding-bottom: 250px; }
  .jugar__campo { height: 240px; }
  .campo__loma--media { right: 10%; }
  .campo__sol { left: 30%; }
  .campo__loma--fondo { left: 50%; right: -14%; }
  .red__pie { bottom: 74%; max-width: 92%; }
  .red__nodo { bottom: calc(var(--b) + 14%); }
  .red__nodo--ciudad { bottom: 62%; }
}

/* página no encontrada */
.perdido { text-align: left; }
.perdido__galgo { width: clamp(140px, 18vw, 220px); color: var(--tinta); margin-bottom: 28px; transform: scaleX(-1) rotate(-4deg); }
.perdido__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.nosotros { max-width: var(--ancho); margin: 0 auto; padding: calc(var(--seccion) + 40px) var(--margen) var(--seccion); }
.nosotros__cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.cartas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 520px));
  justify-content: center; gap: clamp(40px, 6vw, 110px);
  margin-top: clamp(140px, 18vh, 200px);
  align-items: end;
}
/* La carta crea su propio apilado: el sobre queda delante del pie de la hoja */
.carta { position: relative; display: flex; flex-direction: column; isolation: isolate; clip-path: inset(-400px -80px 0 -80px); }
.carta__hoja {
  position: relative; z-index: 2;
  padding: 0 clamp(26px, 3vw, 40px) calc(25% + 40px);
  background: var(--crema) var(--papel) center / 800px;
  filter: var(--sombra);
}
.carta__hoja[hidden] { display: none; }
.carta__perfil { position: relative; display: block; width: 64%; margin: -96px 0 10px -6%; text-decoration: none; }
.carta__retrato { width: 100%; rotate: -3deg; filter: var(--sombra); }
/* Al pasar el ratón, el recorte saluda a saltos y aparece una etiqueta a mano hacia LinkedIn */
.carta__linkedin {
  position: absolute; right: -14%; bottom: 14%; rotate: -6deg;
  padding: 2px 12px 4px;
  background: var(--arena) var(--papel-arena) center / 300px; filter: var(--sombra);
  font-family: var(--f-mano); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--tinta); white-space: nowrap;
  opacity: 0; transition: opacity 0s linear;
}
.carta__linkedin::after { content: " →"; }
@keyframes saludar {
  0%   { rotate: -3deg; translate: 0 0; }
  17%  { rotate: 2deg; translate: 0 -8px; }
  33%  { rotate: -6deg; translate: 0 -10px; }
  50%  { rotate: 1deg; translate: 0 -8px; }
  67%  { rotate: -4deg; translate: 0 -6px; }
  100% { rotate: -2deg; translate: 0 -6px; }
}
.carta__perfil:hover .carta__linkedin, .carta__perfil:focus-visible .carta__linkedin { opacity: 1; }
.carta__perfil:hover .carta__retrato, .carta__perfil:focus-visible .carta__retrato { rotate: -2deg; translate: 0 -6px; }
.js:not(.rm) .carta__perfil:hover .carta__retrato, .js:not(.rm) .carta__perfil:focus-visible .carta__retrato { animation: saludar calc(var(--fotograma) * 6) steps(1, end) forwards; }
@media (hover: none) { .carta__linkedin { opacity: 1; } }
.carta__rol { font-family: var(--f-mano); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--oliva); }
.carta__nombre { font-size: clamp(30px, 2.6vw, 40px); line-height: 1.02; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0 14px; }
.carta__hoja p:not(.carta__rol) { font-size: 17px; margin-top: 10px; }

.sobre {
  position: relative; display: block; width: 100%;
  aspect-ratio: 1.55;
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.sobre__cuerpo, .sobre__solapa { position: absolute; inset: 0; }
.sobre__cuerpo {
  z-index: 3;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), color-mix(in srgb, var(--tinta) 14%, transparent) 50%, transparent calc(50% + 1px)) left bottom / 50% 62% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), color-mix(in srgb, var(--tinta) 14%, transparent) 50%, transparent calc(50% + 1px)) right bottom / 50% 62% no-repeat,
    var(--arena) var(--papel-arena) center / 600px;
  filter: var(--sombra);
}
.sobre__solapa {
  z-index: 4;
  bottom: 38%;
  background: color-mix(in srgb, var(--arena) 86%, var(--tinta)) var(--papel-arena) center / 600px;
  background-blend-mode: multiply;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform calc(var(--fotograma) * 3) steps(3, end);
}
.sobre__lacre {
  position: absolute; left: 50%; bottom: -2px; translate: -50% 0;
  width: 15%; aspect-ratio: 1; display: grid; place-items: center; padding: 3.5%;
  background: var(--tinta) var(--papel-tinta) center / 200px;
  -webkit-mask: url(../assets/formas/60_sello_organico_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/60_sello_organico_lleno.svg) 0 0 / 100% 100%;
}
.sobre__lacre::after {
  content: ""; width: 100%; aspect-ratio: 1876 / 797;
  background: var(--crema);
  -webkit-mask: url(../assets/marca/galgo.svg) center / contain no-repeat;
          mask: url(../assets/marca/galgo.svg) center / contain no-repeat;
}
.sobre__para {
  position: absolute; z-index: 5; left: 9%; bottom: 12%;
  font-family: var(--f-mano); font-size: clamp(40px, 3.8vw, 56px); font-weight: 600; line-height: 1;
  rotate: -4deg;
}
/* El nombre del sobre y el «Para RAIGA.» de la carta van subrayados a mano, con un trazo que se pasa un poco por cada lado */
.sobre__para::after, .carta-form__raiga::after {
  content: ""; position: absolute; left: -4%; right: -8%; bottom: -0.16em; height: 0.11em;
  background: currentColor;
  -webkit-mask: url(../assets/formas/46_subrayado.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/formas/46_subrayado.svg) 0 0 / 100% 100% no-repeat;
  rotate: -1deg;
}
.sobre__accion {
  position: absolute; z-index: 5; right: 7%; bottom: 10%;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--oliva);
}
.sobre__accion::after { content: "→"; transition: translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sobre:hover .sobre__accion::after { translate: 4px 0; }
  .carta:not(.is-abierta) .sobre:hover .sobre__solapa { transform: rotateX(28deg); }
}
.sobre:focus-visible { outline-offset: 6px; }

.carta.is-abierta .sobre { margin-top: -25%; }
.carta.is-abierta .sobre__solapa { z-index: 1; transform: rotateX(180deg); }
.carta.is-abierta .sobre__accion::after { content: "↑"; }
@keyframes sacar {
  0%   { transform: translateY(80%); }
  20%  { transform: translateY(58%) rotate(1deg); }
  40%  { transform: translateY(34%) rotate(-1deg); }
  60%  { transform: translateY(14%) rotate(0.6deg); }
  80%  { transform: translateY(-2%) rotate(-0.4deg); }
  100% { transform: none; }
}
.js:not(.rm) .carta.is-abierta .carta__hoja { animation: sacar calc(var(--fotograma) * 6) steps(1, end) calc(var(--fotograma) * 3) backwards; }

.observacion {
  position: relative;
  max-width: 820px; margin: clamp(80px, 12vh, 140px) auto 0;
  padding-left: 84px;
  font-size: clamp(24px, 2.2vw, 34px); line-height: 1.22; font-weight: 500; letter-spacing: -0.01em;
  text-wrap: balance;
}
.observacion__comillas { position: absolute; left: 0; top: 4px; width: 60px; color: var(--salvia); }
.observacion__cierre { display: inline-block; width: 60px; margin-left: 24px; vertical-align: text-top; color: var(--salvia); }
/* Las comillas se mecen como la hoja, desacompasadas entre sí */
.js:not(.rm) .observacion__comillas, .js:not(.rm) .observacion__cierre { --vaiven: 6deg; transform-origin: 50% 80%; animation: mecer-planta 2.4s steps(1, end) infinite; }
.js:not(.rm) .observacion__cierre { animation-duration: 2.9s; animation-direction: reverse; }

/* ---------- 7 · Cuaderno ---------- */

.cuaderno { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) calc(var(--seccion) * 0.45); }
.cuaderno__cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.cuaderno__rejilla {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3vw, 52px); margin-top: clamp(44px, 6vh, 72px); align-items: start;
}
.recorte-nota { position: relative; }
/* las fotos del cuaderno van siempre en horizontal, a 4:3, como se recortan al prepararlas */
.recorte-nota__foto { aspect-ratio: 4 / 3; margin-bottom: 14px; }
.recorte-nota:nth-child(3) { margin-top: 70px; }
.recorte-nota--principal { display: grid; gap: 0; }
.recorte-nota--principal .recorte-nota__foto { aspect-ratio: 4 / 3; }
.recorte-nota h3 { font-size: clamp(21px, 1.6vw, 26px); line-height: 1.14; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.recorte-nota--principal h3 { font-size: clamp(26px, 2.2vw, 36px); }
.recorte-nota__texto p:not(.sello-estado) { margin-top: 12px; font-size: 17px; }
/* las notas pequeñas también llevan su entradilla, más pequeña de letra, para que no quede hueco bajo ellas */
.recorte-nota > p:not(.sello-estado) { margin-top: 10px; font-size: 15.5px; line-height: 1.5; color: var(--tinta-suave); }
/* un artículo publicado: toda la nota es el enlace */
.recorte-nota h3 a { text-decoration: none; }
.recorte-nota h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.recorte-nota h3 a:focus-visible { outline: none; }
.recorte-nota:has(h3 a:focus-visible) { outline: 2px solid var(--oliva); outline-offset: 8px; border-radius: 2px; }
.sello-estado--fecha { border-style: dashed; }
.cuaderno__todo { margin-top: clamp(32px, 5vh, 56px); font-family: var(--f-ui); font-weight: 600; }
.cuaderno__todo a { color: var(--oliva); }
.cuaderno__todo a::after { content: " →"; }
/* la página del cuaderno: todas las notas, de la más reciente a la más antigua */
.cuaderno--pagina { padding-top: 0; }
.cuaderno--pagina .cuaderno__rejilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cuaderno--pagina .recorte-nota:nth-child(n) { margin-top: 0; }
.cuaderno--pagina .recorte-nota:nth-child(n) .recorte-nota__foto { aspect-ratio: 4 / 3; }

/* Papeles que se despegan al pasar el ratón, como las notas de "Así trabajamos": fichas de servicios, fotos del cuaderno y la carta */
.etapa__ficha, .recorte-nota__foto, .carta-form { transition: translate 260ms var(--ease-out), rotate 260ms var(--ease-out), filter 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .js:not(.rm) .etapa__ficha:hover { translate: 0 -10px; rotate: 0deg; filter: var(--sombra-alta); }
  .js:not(.rm) .recorte-nota:hover .recorte-nota__foto { translate: 0 -10px; rotate: calc(var(--r, 0deg) * -1); filter: var(--sombra-alta); }
  .js:not(.rm) .carta-form:hover { translate: 0 -6px; rotate: calc(var(--r, 0deg) * -1); filter: var(--sombra-alta); }
}
.sello-estado {
  display: inline-block; margin-bottom: 10px; padding: 0 12px 1px;
  border: 1.5px solid var(--oliva); border-radius: 3px;
  font-family: var(--f-mano); font-size: 21px; font-weight: 600;
  color: var(--oliva); rotate: -2deg;
}

/* ---------- 8 · Contacto ---------- */

.contacto {
  position: relative;
  max-width: var(--ancho); margin: 0 auto;
  padding: var(--seccion) var(--margen) 0;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 110px); align-items: start;
}
.contacto__titulo { font-size: clamp(50px, 6vw, 100px); }
.contacto__cabecera .entradilla { margin-top: 24px; }
.contacto__directo { margin-top: 22px; font-size: 18px; }
.contacto__directo a { font-weight: 600; }
.contacto__nota { margin-top: 14px; font-family: var(--f-ui); font-size: 14px; color: var(--tinta-suave); max-width: 30em; }

.contacto__mesa { position: relative; }
.carta-form {
  position: relative;
  padding: clamp(30px, 3.4vw, 54px) clamp(26px, 3.4vw, 56px) clamp(28px, 3vw, 44px);
  background: var(--crema) var(--papel) center / 900px;
  filter: var(--sombra);
  font-size: clamp(19px, 1.25vw + 3px, 22px); line-height: 1.9;
}
.carta-form::before {
  content: ""; position: absolute; top: -12px; left: 46px;
  width: 104px; height: 26px; rotate: -6deg;
  background: color-mix(in srgb, var(--arena) 74%, transparent);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
}
.carta-form__cabecera { display: flex; align-items: flex-start; gap: 16px; padding-right: 96px; margin-bottom: 22px; }
.carta-form__para, .carta-form__fecha, .carta-form__saludo, .carta-form__despedida { font-family: var(--f-mano); font-weight: 600; line-height: 1.2; }
.carta-form__para { font-size: 28px; }
.carta-form__raiga { position: relative; display: inline-block; }
.carta-form__raiga::after { height: 0.2em; bottom: -0.14em; }
.carta-form__fecha { margin-left: auto; font-size: 22px; color: var(--tinta-suave); padding-top: 4px; }
.carta-form__sello {
  position: absolute; top: 26px; right: 30px; width: 74px; aspect-ratio: 0.82;
  display: grid; place-items: center; padding: 10px;
  background: var(--arena) var(--papel-arena) center / 300px;
  outline: 5px dotted var(--crema); outline-offset: -2px;
  rotate: 5deg;
}
.carta-form__sello span {
  width: 100%; aspect-ratio: 1876 / 797; background: var(--tinta);
  -webkit-mask: url(../assets/marca/galgo.svg) center / contain no-repeat;
          mask: url(../assets/marca/galgo.svg) center / contain no-repeat;
}
.carta-form__saludo { font-size: 30px; margin-bottom: 4px; }
.carta-form__despedida { font-size: 30px; margin-top: 14px; }
.carta-form__linea { margin-top: 6px; }
/* El punto viaja siempre con su hueco, nunca se queda solo en una línea */
.carta-form__junto { white-space: nowrap; }
/* Lo que escribes aparece a mano, en tinta oliva */
.carta-form input[type="text"], .carta-form input[type="email"], .carta-form textarea {
  font-family: var(--f-mano); font-size: 1.45em; font-weight: 600; color: var(--oliva);
  /* la letra a mano se inclina hacia la derecha: un poco más de aire a ese lado para que no se corte */
  background: transparent; border: 0; border-radius: 0; padding: 0 12px 0 6px; margin: 0 2px;
  border-bottom: 2px dotted color-mix(in srgb, var(--tinta) 45%, transparent);
  min-height: 44px; line-height: 1.1;
}
.carta-form input[type="text"], .carta-form input[type="email"] { width: 9em; max-width: 100%; }
@supports (field-sizing: content) {
  .carta-form input[type="text"], .carta-form input[type="email"] { width: auto; field-sizing: content; min-width: 3.5em; }
}
.carta-form textarea {
  display: block; width: 100%; margin: 4px 0 8px; resize: vertical;
  line-height: 40px; padding: 2px 6px; min-height: 164px;
  border: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 39px, color-mix(in srgb, var(--tinta) 22%, transparent) 39px 40px);
  background-position: 0 2px;
}
/* Cuando el navegador rellena un campo, mantiene el papel y la tinta en lugar de su fondo azul */
.carta-form input:-webkit-autofill, .carta-form input:-webkit-autofill:hover, .carta-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--oliva); caret-color: var(--oliva);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.carta-form input:autofill { background-color: transparent; }
.carta-form ::placeholder { color: color-mix(in srgb, var(--tinta) 42%, transparent); font-weight: 500; }
.carta-form input:focus-visible, .carta-form textarea:focus-visible { outline: 2px solid var(--oliva); outline-offset: 3px; border-bottom-style: solid; }
.carta-form [aria-invalid="true"] { border-bottom: 2px solid var(--tinta); }
.carta-form__interes { border: 0; padding: 0; margin: 14px 0 4px; }
.carta-form__interes legend { padding: 0; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px;
  font-family: var(--f-ui); font-size: 15px; font-weight: 600; line-height: 1.2;
  background: color-mix(in srgb, var(--arena) 40%, transparent);
  border: 1.5px dashed color-mix(in srgb, var(--tinta) 30%, transparent);
  transition: background-color 180ms ease, color 180ms ease, rotate 180ms var(--ease-out), translate 180ms var(--ease-out);
}
.chip .forma { width: 20px; height: 20px; color: var(--oliva); }
.chip:nth-child(odd) > span { rotate: -1deg; }
.chip:nth-child(even) > span { rotate: 1.2deg; }
.chip input:checked + span { background: var(--oliva) var(--papel-oliva) center / 300px; color: var(--crema); border-style: solid; border-color: var(--oliva); rotate: -2.5deg; translate: 0 -2px; }
.chip input:checked + span .forma { color: var(--arena); }
.chip input:focus-visible + span { outline: 2px solid var(--oliva); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .chip:hover > span { background-color: color-mix(in srgb, var(--arena) 70%, transparent); }
  .chip:hover input:checked + span { background-color: var(--oliva); }
}
/* Al enviar, la carta se dobla y queda un sobre cerrado */
@keyframes doblar {
  0%   { transform: rotate(var(--r)); }
  25%  { transform: scale(1, 0.72) rotate(-1deg); opacity: 1; }
  50%  { transform: scale(0.8, 0.42) rotate(2deg); opacity: 1; }
  75%  { transform: scale(0.55, 0.22) translateY(20%) rotate(-3deg); opacity: 1; }
  100% { transform: scale(0.4, 0.1) translateY(40%); opacity: 0; }
}
.js:not(.rm) .carta-form.is-doblando { animation: doblar calc(var(--fotograma) * 5) steps(1, end) forwards; transform-origin: 50% 40%; }
.carta-enviada {
  display: grid; justify-items: start; gap: 14px;
  padding: clamp(30px, 3.4vw, 52px);
  background: var(--crema) var(--papel) center / 900px;
  filter: var(--sombra);
}
.carta-enviada[hidden], .carta-enviada [hidden] { display: none; }
.carta-enviada [data-enviada-ok] > * + *, .carta-enviada [data-enviada-fallo] > * + * { margin-top: 12px; }
.carta-enviada [data-enviada-fallo] .boton { margin-top: 4px; }
.carta-enviada__directo { font-family: var(--f-ui); font-size: 14px; color: var(--tinta-suave); }
/* el campo trampa queda fuera de la vista y del teclado */
.carta-form__trampa { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carta-form [data-enviar]:disabled { opacity: 0.7; cursor: progress; }
.js:not(.rm) .carta-enviada:not([hidden]) { animation: pegar calc(var(--fotograma) * 6) steps(1, end); --dx: 0px; --dy: 40px; --r: 0deg; }
.carta-enviada__sobre {
  position: relative; display: grid; place-items: center; width: 180px; aspect-ratio: 1.55;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--tinta) 16%, transparent) 50%, transparent calc(50% + 1px)) left top / 50% 62% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), color-mix(in srgb, var(--tinta) 16%, transparent) 50%, transparent calc(50% + 1px)) right top / 50% 62% no-repeat,
    var(--arena) var(--papel-arena) center / 400px;
  rotate: -3deg;
}
.carta-enviada__sobre .sobre__lacre { position: absolute; left: 50%; top: 62%; bottom: auto; width: 26%; translate: -50% -50%; }
.carta-enviada__titulo { font-family: var(--f-mano); font-size: 40px; font-weight: 600; line-height: 1.1; }
.carta-enviada__titulo:focus { outline: none; }
.carta-form__ayuda { font-family: var(--f-ui); font-size: 13.5px; line-height: 1.45; color: var(--tinta-suave); max-width: 30em; }
.carta-form__enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 18px; }
.campo__error { font-family: var(--f-ui); font-size: 14px; line-height: 1.4; font-weight: 600; margin-top: 6px; }
.campo__error::before { content: "· "; }

.contacto__campo { grid-column: 1 / -1; position: relative; height: clamp(170px, 22vw, 280px); margin: 24px calc(var(--margen) * -1) 0; }
.contacto__campo > * { position: absolute; display: block; }
.contacto__loma--atras {
  left: -4%; right: -4%; bottom: 0; height: 64%;
  background: var(--salvia) var(--papel-salvia) center / 700px;
  -webkit-mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/57_horizonte_lomas_lleno.svg) 0 0 / 100% 100%;
}
.contacto__loma--delante {
  left: -4%; width: 72%; bottom: 0; height: 46%;
  background: var(--oliva) var(--papel-oliva) center / 700px;
  -webkit-mask: url(../assets/formas/06_loma_izquierda_terreno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/06_loma_izquierda_terreno.svg) 0 0 / 100% 100%;
  filter: var(--sombra);
}
/* Las colinas acaban en el papel tinta del pie, rasgado */
.contacto__campo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 44px;
  background: var(--tinta) var(--papel-tinta) center / 900px;
  -webkit-mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%;
}

.contacto__galgo { left: 22%; top: 30%; width: clamp(130px, 14vw, 210px); z-index: 1; }
.contacto__campo[data-persecucion] { cursor: default; }

.carta-form__privacidad { margin-top: 14px; font-family: var(--f-ui); font-size: 13px; line-height: 1.5; color: var(--tinta-suave); max-width: 40em; }
.carta-form__privacidad a { color: var(--oliva); font-weight: 600; }

/* ---------- Páginas interiores: artículo, caso y textos legales ---------- */

.pagina { padding: calc(var(--nav-alto) + clamp(40px, 8vh, 96px)) var(--margen) var(--seccion); }
.plantilla-aviso {
  max-width: 980px; margin: 0 auto 28px;
  font-family: var(--f-mano); font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--oliva);
}
.plantilla-aviso::before { content: "✎ "; }
.pagina__cabecera { max-width: 980px; margin: 0 auto; }
.migas { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 22px; font-family: var(--f-ui); font-size: 14px; font-weight: 600; }
.migas a { text-decoration: none; color: var(--tinta-suave); padding: 6px 0; }
.migas a + a::before { content: "/"; margin: 0 10px; color: var(--linea); }
@media (hover: hover) and (pointer: fine) { .migas a:hover { color: var(--tinta); } }
.pagina__titulo {
  font-size: clamp(42px, 5.6vw, 88px); line-height: 0.96; letter-spacing: -0.03em;
  font-weight: 600; text-wrap: balance; font-variation-settings: "opsz" 72;
}
.pagina__entradilla { margin-top: 26px; }
.pagina__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 22px; font-family: var(--f-ui); font-size: 14px; color: var(--tinta-suave); }
.pagina__meta > * + *::before { content: "·"; margin-right: 18px; }
.pagina__foto { max-width: 1180px; margin: clamp(40px, 6vh, 72px) auto 0; }
.pagina__foto-recorte { aspect-ratio: 16 / 9; }
.pagina__foto .pie-foto { margin-top: 12px; text-align: right; }

.prosa { max-width: 680px; margin: clamp(48px, 7vh, 88px) auto 0; }
.prosa > * + *, .prosa > div > * + * { margin-top: 1.1em; }
.prosa h2 { margin-top: 2.1em; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
.prosa h2:first-child { margin-top: 0; }
.prosa h2 + * { margin-top: 0.7em; }
.prosa h3 { margin-top: 1.8em; font-size: 23px; line-height: 1.2; font-weight: 600; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li + li { margin-top: 0.45em; }
.prosa li::marker { color: var(--oliva); font-weight: 600; }
.prosa a { color: var(--oliva); font-weight: 600; text-decoration-thickness: 1.5px; }
.prosa code { font-family: var(--f-ui); font-size: 0.88em; padding: 1px 6px; background: color-mix(in srgb, var(--arena) 45%, transparent); }
.destacado {
  margin: 2em 0 !important; padding: 26px 30px 24px;
  background: var(--arena) var(--papel-arena) center / 500px;
  filter: var(--sombra); rotate: -0.8deg;
  font-family: var(--f-mano); font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; line-height: 1.15;
}
.datos { display: grid; gap: 0; margin: 1.4em 0; border-top: 1.5px dashed var(--linea); }
.datos > div { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1.5px dashed var(--linea); }
.datos dt { font-family: var(--f-ui); font-size: 14px; font-weight: 600; color: var(--tinta-suave); padding-top: 3px; }
.datos [data-pendiente], .prosa [data-pendiente] { color: var(--oliva); font-family: var(--f-mano); font-size: 1.2em; font-weight: 600; }

/* El cierre de cada página: una nota oliva que lleva al contacto */
.cierre {
  max-width: 980px; margin: clamp(72px, 10vh, 120px) auto 0;
  padding: clamp(32px, 4vw, 56px);
  background: var(--oliva) var(--papel-oliva) center / 600px;
  color: var(--crema); filter: var(--sombra); rotate: -0.6deg;
}
.cierre__nota { font-family: var(--f-mano); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--arena); }
.cierre__titulo { margin: 8px 0 14px; font-size: clamp(32px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.02em; font-weight: 600; }
.cierre p:not(.cierre__nota) { max-width: 36em; }
.cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }
.cierre__enlace { font-family: var(--f-ui); font-weight: 600; font-size: 16px; color: var(--crema); min-height: 44px; display: inline-flex; align-items: center; }
.cierre :focus-visible { outline-color: var(--crema); }
.boton--crema { background: var(--crema); border-color: var(--crema); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .boton--crema:hover { background: var(--tinta); border-color: var(--tinta); color: var(--crema); } }

/* en los artículos, la foto de cabecera va al ancho del titular y más apaisada, para llegar antes al texto */
.articulo .pagina__foto { max-width: 980px; }
.articulo .pagina__foto-recorte { aspect-ratio: 12 / 5; }
@media (max-width: 760px) { .articulo .pagina__foto-recorte { aspect-ratio: 3 / 2; } }

/* a los lados del texto, unas pocas hojas de papel que se mecen a saltos; con el scroll les da el aire */
.articulo { position: relative; }
.hojas-margen { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hoja-margen {
  position: absolute; top: var(--y); left: calc(50% + var(--x)); width: calc(70px * var(--e, 1)); aspect-ratio: 474 / 795;
  background: var(--salvia) var(--papel-salvia) center / 300px; filter: var(--sombra);
  -webkit-mask: url(../assets/formas/20_hoja_encina.svg) center / contain no-repeat; mask: url(../assets/formas/20_hoja_encina.svg) center / contain no-repeat;
  rotate: var(--r); transform-origin: 50% 100%;
}
.hoja-margen--olivo { aspect-ratio: 486 / 772; background-color: var(--oliva); background-image: var(--papel-oliva); -webkit-mask-image: url(../assets/formas/12_rama_olivo.svg); mask-image: url(../assets/formas/12_rama_olivo.svg); }
.hoja-margen--espiga { aspect-ratio: 376 / 831; background-color: var(--arena); background-image: var(--papel-arena); -webkit-mask-image: url(../assets/formas/16_espiga.svg); mask-image: url(../assets/formas/16_espiga.svg); }
.js:not(.rm) .hoja-margen { animation: hoja-vaiven var(--t, 3s) steps(1, end) calc(var(--i) * -0.7s) infinite; }
.js:not(.rm) .hojas-margen.is-viento .hoja-margen { animation-name: hoja-viento; animation-duration: calc(var(--t, 3s) * 0.3); }
@keyframes hoja-vaiven {
  0%   { transform: rotate(0deg); }
  33%  { transform: rotate(5deg) translateY(-2px); }
  66%  { transform: rotate(-3deg); }
}
@keyframes hoja-viento {
  0%   { transform: rotate(-6deg) translateX(-3px); }
  50%  { transform: rotate(10deg) translate(4px, -4px); }
}
@media (max-width: 1179px) { .hojas-margen { display: none; } }

/* la senda de lectura: bajo el menú, el galgo recorre un camino de tierra hasta la casa a medida que se lee */
.senda { position: fixed; z-index: 49; left: 0; right: 0; top: var(--nav-alto); height: 26px; pointer-events: none; --p: 0; background: var(--crema) var(--papel) center top / 1600px auto; box-shadow: 0 6px 10px -8px rgb(30 21 13 / 0.35); }
.senda::before, .senda__hecha { content: ""; position: absolute; left: var(--margen); bottom: 7px; height: 3px; border-radius: 2px; }
.senda::before { right: var(--margen); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--arena) 90%, var(--tinta)) 0 9px, transparent 9px 15px); }
.senda__hecha { width: calc((100% - 2 * var(--margen)) * var(--p)); background: var(--oliva); }
.senda__galgo { position: absolute; bottom: 9px; left: calc(var(--margen) + (100% - 2 * var(--margen)) * var(--p)); width: 38px; aspect-ratio: 1876 / 797; translate: -88% 0; background: var(--tinta); -webkit-mask: url(../assets/marca/galgo.svg) center / contain no-repeat; mask: url(../assets/marca/galgo.svg) center / contain no-repeat; transform-origin: 50% 90%; }
.senda__galgo.is-paso { transform: translateY(-3px) rotate(-6deg); }
.senda__casa { position: absolute; right: calc(var(--margen) - 10px); bottom: 8px; width: 18px; aspect-ratio: 1; background: var(--tinta-suave); -webkit-mask: url(../assets/formas/21_casa_frontal.svg) center bottom / contain no-repeat; mask: url(../assets/formas/21_casa_frontal.svg) center bottom / contain no-repeat; }
.senda.is-llegado .senda__casa { background: var(--oliva); }

/* el recuadro del final se mueve despacio, a saltos, como un papel suelto en la mesa */
.js:not(.rm) .cierre { animation: vaiven-cierre 5.2s steps(1, end) infinite; }
.js:not(.rm) .cierre__nota { display: inline-block; animation: vaiven-nota 3.9s steps(1, end) infinite; transform-origin: 0 100%; }
@keyframes vaiven-cierre {
  0%   { rotate: -0.6deg; translate: 0 0; }
  25%  { rotate: -0.25deg; translate: 2px -3px; }
  50%  { rotate: -0.9deg; translate: -1px -1px; }
  75%  { rotate: -0.4deg; translate: 1px -4px; }
}
@keyframes vaiven-nota {
  0%   { transform: rotate(0deg); }
  33%  { transform: rotate(-2deg) translateY(-2px); }
  66%  { transform: rotate(1.2deg); }
}

.relacionadas { max-width: 980px; margin: clamp(80px, 11vh, 130px) auto 0; }
.relacionadas__titulo { font-size: clamp(30px, 2.8vw, 44px); line-height: 1; letter-spacing: -0.02em; font-weight: 600; }
.relacionadas__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 52px); margin-top: 36px; align-items: start; }
.relacionadas .recorte-nota .recorte-nota__foto { aspect-ratio: 4 / 3; }

/* ---------- Caso: una página tan viva como la portada ---------- */

.pagina--caso { padding-top: calc(var(--nav-alto) + clamp(28px, 6vh, 64px)); overflow-x: clip; }
.caso__quien { margin-bottom: 14px; font-family: var(--f-ui); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oliva); }
.caso__quien .caso__real { display: inline-block; margin-left: 10px; padding: 0 10px 2px; background: var(--oliva); color: var(--crema); font-family: var(--f-mano); font-size: 19px; letter-spacing: 0; text-transform: none; rotate: -3deg; }

/* Portada: el texto a un lado y el trabajo en un collage al otro */
.caso__portada { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.caso__titulo { font-size: clamp(44px, 5.2vw, 88px); line-height: 0.96; letter-spacing: -0.032em; font-weight: 600; text-wrap: balance; font-variation-settings: "opsz" 72; }
.caso__titulo .sm { display: inline-block; }
.caso__resumen { margin-top: 24px; }
/* la ficha cuelga en etiquetas de papel con su cinta, y se balancea */
.caso__etiquetas { list-style: none; padding: 0; margin: 36px 0 0; display: flex; flex-wrap: wrap; gap: 26px 14px; }
.caso__etiquetas li {
  position: relative; padding: 14px 18px 12px; max-width: 16em;
  background: var(--arena) var(--papel-arena) center / 500px; filter: var(--sombra);
  transform-origin: 50% 0;
}
.caso__etiquetas li:nth-child(even) { background-color: var(--crema); background-image: var(--papel); }
.caso__etiquetas li::after {
  content: ""; position: absolute; top: -10px; left: 50%;
  width: 54px; height: 20px; translate: -50% 0; rotate: 4deg;
  background: color-mix(in srgb, var(--crema) 70%, transparent);
  -webkit-mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/rasgado-b.svg) 0 0 / 100% 100%;
}
.caso__etiquetas li:nth-child(even)::after { background: color-mix(in srgb, var(--arena) 75%, transparent); }
.caso__clave { display: block; font-family: var(--f-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: color-mix(in srgb, var(--tinta) 72%, var(--arena)); }
.caso__valor { display: block; margin-top: 3px; font-size: 17px; line-height: 1.25; font-weight: 600; }
.caso__valor a { color: var(--oliva); }
.js:not(.rm) .caso__etiquetas .sm.is-in { animation: pegar calc(var(--fotograma) * 6) steps(1, end) calc(var(--i, 0) * var(--fotograma)) backwards, colgar 2.8s steps(1, end) infinite; }
.js:not(.rm) .caso__etiquetas .sm.is-in:nth-child(2) { animation-duration: calc(var(--fotograma) * 6), 2.2s; }
.js:not(.rm) .caso__etiquetas .sm.is-in:nth-child(3) { animation-duration: calc(var(--fotograma) * 6), 3.1s; }
.js:not(.rm) .caso__etiquetas .sm.is-in:nth-child(4) { animation-duration: calc(var(--fotograma) * 6), 2.5s; }

/* el collage del caso: el trabajo en una foto rasgada, con sol, lomas, hoja y el sello del paquete */
.collage--caso { aspect-ratio: 1 / 0.88; }
.collage--caso .collage__foto { left: 5%; top: 9%; width: 88%; aspect-ratio: 1.5; }
/* colinas de papel que asoman por detrás de la foto, como en la entrada */
.caso__loma { z-index: 0; filter: var(--sombra); }
.caso__loma--atras {
  left: -9%; top: 43%; width: 68%; height: 31%;
  background: var(--salvia) var(--papel-salvia) center / 600px;
  -webkit-mask: url(../assets/formas/06_loma_izquierda_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/06_loma_izquierda_lleno.svg) 0 0 / 100% 100%;
}
.caso__loma--media {
  left: 40%; top: 49%; width: 68%; height: 28%;
  background: var(--oliva) var(--papel-oliva) center / 600px;
  -webkit-mask: url(../assets/formas/07_loma_derecha_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/07_loma_derecha_lleno.svg) 0 0 / 100% 100%;
}
.caso__loma--delante {
  left: 6%; top: 69%; width: 88%; height: 16%;
  background: var(--arena) var(--papel-arena) center / 600px;
  -webkit-mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/08_loma_baja_lleno.svg) 0 0 / 100% 100%;
}
.recorte video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask: url(../assets/papel/rasgado-a.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/papel/rasgado-a.svg) 0 0 / 100% 100% no-repeat;
}
.recorte--b video { -webkit-mask-image: url(../assets/papel/rasgado-b.svg); mask-image: url(../assets/papel/rasgado-b.svg); }
.collage__sello {
  right: -2%; top: 0; width: 19%; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--crema) var(--papel) center / 300px; border-radius: 50%; filter: var(--sombra);
  outline: 3px dotted color-mix(in srgb, var(--oliva) 60%, transparent); outline-offset: -9px;
}
.collage__sello .forma { width: 52%; color: var(--oliva); }
.collage--caso .collage__etiqueta { left: 44%; top: 82%; }
.collage--caso .collage__foto { z-index: 1; }
.collage--caso .collage__sello, .collage--caso .collage__etiqueta { z-index: 3; }
.collage--caso .forma { width: 100%; }
.collage--caso .collage__sello .forma { width: 52%; }

/* Feria de ejemplo */
.pz-banderines { left: -2%; right: -2%; top: 0; height: 13%; z-index: 2; display: flex; justify-content: space-around; align-items: flex-start; border-top: 1.5px solid color-mix(in srgb, var(--tinta) 70%, transparent); border-radius: 50% 50% 0 0 / 22px 22px 0 0; }
.pz-banderin { width: 9%; aspect-ratio: 1 / 1.15; margin-top: -1px; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: var(--sombra); }
.pz-banderin:nth-child(even) { margin-top: 6px; }
.pz-banderin--oliva { background: var(--oliva) var(--papel-oliva) center / 200px; }
.pz-banderin--arena { background: var(--arena) var(--papel-arena) center / 200px; }
.pz-banderin--salvia { background: var(--salvia) var(--papel-salvia) center / 200px; }
.pz-banderin--crema { background: var(--crema) var(--papel) center / 200px; }
.js:not(.rm) [data-collage].is-quieto .pz-banderin { transform-origin: 50% 0; animation: mecer-postal 1.8s steps(1, end) infinite; }
.js:not(.rm) [data-collage].is-quieto .pz-banderin:nth-child(even) { animation-duration: 2.3s; animation-direction: reverse; }
.pz-cartel {
  left: -3%; top: 50%; width: 30%; z-index: 2; padding: 16px 12px 14px; text-align: center;
  background: var(--crema) var(--papel) center / 300px; filter: var(--sombra);
  border: 3px double color-mix(in srgb, var(--oliva) 60%, transparent);
}
.pz-cartel__titulo { display: block; font-family: var(--f-texto); font-size: clamp(22px, 2.4vw, 38px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--oliva); }
.pz-cartel__fecha { display: block; margin-top: 6px; font-family: var(--f-mano); font-size: clamp(15px, 1.2vw, 19px); font-weight: 600; line-height: 1.1; }
.pz-cantaro { right: 2%; top: 64%; width: 15%; z-index: 2; color: var(--arena); }
.pz-cantaro .forma { background-image: var(--papel-arena); background-size: 200px; filter: var(--sombra); }

/* Máster */
/* El lenguaje del propio máster, recortado en papel: flechas que crecen como árboles en sus tres verdes */
.collage--master { --mdrgs-verde: #537A50; --mdrgs-salvia: #7BA27A; --mdrgs-palido: #A6CBA4; }
.pz-flechas { left: -2%; top: 46%; width: 22%; height: 46%; z-index: 2; display: flex; align-items: flex-end; gap: 6%; }
.pz-flecha {
  display: block; flex: 1; height: var(--alto, 100%);
  clip-path: polygon(50% 0, 100% 26%, 64% 26%, 64% 100%, 36% 100%, 36% 26%, 0 26%);
  filter: drop-shadow(0 1px 1px rgb(30 21 13 / 0.2));
  transform-origin: 50% 100%;
}
.pz-flecha--verde { background: var(--mdrgs-verde) var(--papel-oliva) center / 200px; background-blend-mode: soft-light; }
.pz-flecha--salvia { background: var(--mdrgs-salvia) var(--papel-salvia) center / 200px; background-blend-mode: soft-light; }
.pz-flecha--palido { background: var(--mdrgs-palido) var(--papel) center / 200px; background-blend-mode: multiply; }
.js:not(.rm) [data-collage].is-quieto .pz-flecha { animation: mecer 2.4s steps(1, end) infinite; }
.js:not(.rm) [data-collage].is-quieto .pz-flecha:nth-child(2) { animation-duration: 1.9s; animation-direction: reverse; }
.js:not(.rm) [data-collage].is-quieto .pz-flecha:nth-child(3) { animation-duration: 2.8s; }
.pz-casita { left: 19%; top: 78%; width: 9%; z-index: 2; color: var(--mdrgs-verde); }
.collage__sello--mdrgs { display: flex; align-items: center; justify-content: center; }
.collage__sello--mdrgs img { width: 74%; mix-blend-mode: multiply; }
/* un abanico con tres publicaciones de la cuenta, como copias sueltas sobre la mesa */
.pz-abanico { right: -2%; top: 62%; width: 24%; aspect-ratio: 1; z-index: 3; }
.pz-abanico img {
  position: absolute; left: 30%; top: 0; width: 46%; aspect-ratio: 4 / 5; object-fit: cover;
  padding: 4px; background: var(--crema); filter: var(--sombra); transform-origin: 50% 100%;
}
.pz-abanico img:nth-child(1) { rotate: -16deg; translate: -28% 6%; }
.pz-abanico img:nth-child(2) { rotate: 2deg; }
.pz-abanico img:nth-child(3) { rotate: 18deg; translate: 30% 8%; }
@media (hover: hover) and (pointer: fine) {
  .pz-abanico img { transition: rotate 220ms var(--ease-out), translate 220ms var(--ease-out); }
  .pz-abanico:hover img:nth-child(1) { rotate: -26deg; translate: -40% 4%; }
  .pz-abanico:hover img:nth-child(3) { rotate: 28deg; translate: 44% 6%; }
}
.pz-bocadillo {
  left: 52%; top: 66%; z-index: 3; padding: 10px 16px 12px; border-radius: 16px;
  background: var(--crema) var(--papel) center / 300px; filter: var(--sombra);
  font-family: var(--f-ui); font-size: clamp(12px, 1vw, 15px); font-weight: 600;
}
.pz-bocadillo::after { content: ""; position: absolute; left: 22px; bottom: -12px; width: 18px; height: 14px; background: inherit; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.pz-bocadillo__texto::before { content: "♥ "; color: var(--oliva); }

/* Western Concept */
.pz-cuero {
  left: -4%; top: 60%; width: 44%; height: 26%; z-index: 2;
  background: color-mix(in srgb, var(--tinta) 55%, #6b4a2f); filter: var(--sombra);
  outline: 2px dashed color-mix(in srgb, var(--arena) 70%, transparent); outline-offset: -10px;
  border-radius: 4px 14px 14px 4px;
  display: grid; place-items: center;
}
.pz-cuero__marca { font-family: var(--f-mano); font-size: clamp(40px, 4.6vw, 72px); font-weight: 700; line-height: 1; color: color-mix(in srgb, var(--arena) 80%, transparent); rotate: -4deg; }
.pz-estrella { left: 2%; top: 2%; width: 13%; z-index: 2; color: var(--arena); }
.pz-estrella .forma { background-image: var(--papel-arena); background-size: 200px; filter: var(--sombra); }
.js:not(.rm) [data-collage].is-quieto .pz-estrella { animation: respirar 3s steps(1, end) infinite; }
.pz-pluma { left: 40%; top: 58%; width: 9%; z-index: 3; color: var(--tinta); }
.pz-sobre { right: 0; top: 68%; width: 24%; z-index: 3; }
.pz-sobre__forma { width: 100%; color: var(--arena); background-image: var(--papel-arena); background-size: 300px; filter: var(--sombra); }
.pz-sobre__matasellos {
  position: absolute; right: -10%; top: -26%; padding: 4px 8px; rotate: 12deg;
  border: 2px solid color-mix(in srgb, var(--oliva) 75%, transparent); border-radius: 50%;
  font-family: var(--f-mano); font-size: clamp(14px, 1.1vw, 18px); font-weight: 700; color: var(--oliva);
}
.js:not(.rm) [data-collage].is-quieto .collage__sello { animation: respirar 3.6s steps(1, end) infinite; }

/* El reto: la libreta y lo que pasaba */
.caso__reto { max-width: var(--ancho); margin: clamp(88px, 13vh, 150px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.caso__reto .libreta { margin-top: 0; }
.caso__reto .libreta__titulo { font-size: clamp(32px, 3.2vw, 52px); }
.libreta__cierre { display: inline-block; width: clamp(34px, 3vw, 46px); margin-left: 16px; vertical-align: text-top; color: var(--oliva); }
.caso__reto-texto > * + * { margin-top: 1em; }
.caso__reto-texto .entradilla { max-width: none; }
.caso__nota { font-family: var(--f-mano); font-size: clamp(24px, 2vw, 30px); font-weight: 600; line-height: 1.15; color: var(--oliva); rotate: -2deg; width: fit-content; }

/* Qué hicimos: notas de papel, como en «Así trabajamos» */
.caso__hicimos { max-width: var(--ancho); margin: clamp(88px, 13vh, 150px) auto 0; }

/* Resultados: una banda oliva rasgada, con cifras que se cuentan solas al verlas */
.caso__banda {
  position: relative; margin: clamp(110px, 15vh, 170px) calc(var(--margen) * -1) 0;
  padding: clamp(72px, 10vh, 120px) var(--margen);
  background: var(--tinta) var(--papel-tinta) center / 800px; color: var(--crema);
}
.caso__banda::before, .caso__banda::after { content: ""; position: absolute; left: 0; right: 0; height: 56px; background: inherit; }
.caso__banda::before { top: -54px; -webkit-mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%; mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%; }
.caso__banda::after { bottom: -54px; rotate: 180deg; -webkit-mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%; mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%; }
.caso__banda-dentro { max-width: var(--ancho); margin: 0 auto; }
.caso__banda a { color: var(--crema); }
.caso__banda :focus-visible { outline-color: var(--crema); }
.caso__cifras, .caso__logros { list-style: none; padding: 0; margin: clamp(40px, 6vh, 64px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(28px, 4vw, 64px); }
.caso__cifras li, .caso__logros li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 2px dotted color-mix(in srgb, var(--crema) 45%, transparent); }
.caso__cifra { font-size: clamp(60px, 7vw, 116px); line-height: 0.9; letter-spacing: -0.035em; font-weight: 600; color: var(--arena); font-variation-settings: "opsz" 72; font-variant-numeric: tabular-nums; }
.caso__cifra-texto { font-size: 18px; line-height: 1.4; max-width: 17em; }
.caso__logro-num { font-family: var(--f-mano); font-size: 48px; font-weight: 700; line-height: 0.8; color: var(--arena); }
.caso__logros strong { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; font-weight: 600; }
.caso__logros p { font-size: 17px; line-height: 1.5; color: color-mix(in srgb, var(--crema) 88%, var(--oliva)); }

/* Antes y después: se arrastra el corte de papel */
.comparar { max-width: 1180px; margin: clamp(120px, 16vh, 180px) auto 0; }
.comparar__cabecera { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: 30px; }
.comparar__marco { --corte: 50%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; filter: var(--sombra); rotate: -0.5deg; touch-action: pan-y; }
.comparar__marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparar__antes { filter: grayscale(1) sepia(0.3) contrast(0.88) brightness(0.96); clip-path: inset(0 calc(100% - var(--corte)) 0 0); }
.comparar__linea { position: absolute; top: 0; bottom: 0; left: var(--corte); width: 8px; translate: -50% 0; background: var(--crema); pointer-events: none; box-shadow: 0 0 0 1px rgb(30 21 13 / 0.12); }
.comparar__asa {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: var(--crema) var(--papel) center / 300px; filter: var(--sombra);
  font-family: var(--f-mano); font-size: 30px; font-weight: 700; color: var(--tinta);
}
.comparar__marca { position: absolute; top: 18px; z-index: 1; padding: 2px 14px 4px; background: var(--arena) var(--papel-arena) center / 300px; font-family: var(--f-mano); font-size: 24px; font-weight: 600; pointer-events: none; }
.comparar__marca--antes { left: 18px; rotate: -4deg; }
.comparar__marca--despues { right: 18px; rotate: 3deg; background-color: var(--crema); background-image: var(--papel); }
.comparar__rango { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparar__marco:has(.comparar__rango:focus-visible) { outline: 3px solid var(--oliva); outline-offset: 6px; }

/* En imágenes: una pila de fotos que se pasan */
.pila { max-width: var(--ancho); margin: clamp(120px, 16vh, 180px) auto 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.pila__texto > * + * { margin-top: 18px; }
.pila__fotos { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / 0.92; justify-self: center; }
.pila__foto {
  position: absolute; inset: 4% 8%; margin: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px;
  padding: 12px 12px 14px; background: var(--crema) var(--papel) center / 500px; filter: var(--sombra);
  rotate: var(--r, 0deg); cursor: pointer;
}
.pila__foto img { width: 100%; height: 100%; object-fit: cover; }
.pila__foto figcaption { font-family: var(--f-mano); font-size: 22px; font-weight: 600; line-height: 1.1; padding: 0 4px; }
@keyframes volar-foto {
  0%   { translate: 0 0; rotate: var(--r, 0deg); }
  25%  { translate: 18% -6%; rotate: 8deg; }
  50%  { translate: 48% -10%; rotate: 16deg; opacity: 1; }
  75%  { translate: 70% -4%; rotate: 20deg; opacity: 0.6; }
  100% { translate: 80% 0; rotate: 22deg; opacity: 0; }
}
.pila__foto.is-fuera { animation: volar-foto calc(var(--fotograma) * 5) steps(1, end) forwards; }
.pila__mandos { display: flex; align-items: center; gap: 18px; }
.pila__cuenta { font-family: var(--f-mano); font-size: 24px; font-weight: 600; color: var(--oliva); }

/* Lo que publicamos: un móvil de papel con las piezas reales y, al lado, sus portadas para elegir */
.publica { max-width: var(--ancho); margin: clamp(110px, 15vh, 170px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.publica__texto .entradilla { margin-top: 18px; }
.publica__texto .entradilla + .publica__series { margin-top: 32px; }
.publica__grupo { margin: 30px 0 12px; font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinta-suave); }
.publica__series { display: flex; flex-wrap: wrap; gap: 14px 16px; }
.publica__serie { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--tinta); font-family: var(--f-ui); font-size: 14px; font-weight: 600; }
.publica__mini { display: block; width: 74px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--crema); filter: var(--sombra); transition: translate 200ms var(--ease-out), rotate 200ms var(--ease-out); }
.publica__mini img { width: 100%; height: 100%; object-fit: cover; }
.publica__series--historia .publica__mini { width: 74px; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px var(--crema), 0 0 0 5px color-mix(in srgb, var(--tinta) 25%, transparent); filter: none; }
.publica__serie[aria-pressed="true"] .publica__mini { rotate: -4deg; translate: 0 -4px; }
.publica__series--historia .publica__serie[aria-pressed="true"] .publica__mini { box-shadow: 0 0 0 3px var(--crema), 0 0 0 6px var(--oliva); }
.publica__serie[aria-pressed="true"] .publica__nombre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--oliva); }
@media (hover: hover) and (pointer: fine) { .publica__serie:hover .publica__mini { translate: 0 -4px; } }
.publica__movil { position: relative; display: grid; justify-items: center; gap: 18px; padding: 40px 0 10px; }
.publica__movil > :not(.publica__fondo) { position: relative; z-index: 1; }
/* Detrás del móvil: una mancha verde del máster, su bosque de flechas meciéndose y reacciones que suben */
.publica__fondo { position: absolute; inset: 0 -6% 0 -6%; pointer-events: none; }
.publica__mancha {
  position: absolute; left: 50%; top: 46%; width: min(520px, 110%); aspect-ratio: 1; translate: -50% -50%; rotate: -8deg;
  background: var(--oliva) var(--papel-oliva) center / 500px;
  -webkit-mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
          mask: url(../assets/formas/44_punto_lleno.svg) 0 0 / 100% 100%;
}
.js:not(.rm) .publica__mancha { animation: respirar 4.2s steps(1, end) infinite; }
.publica__bosque { position: absolute; left: 4%; bottom: 14%; width: 26%; height: 34%; display: flex; align-items: flex-end; gap: 5%; --mdrgs-verde: var(--salvia); --mdrgs-salvia: var(--arena); --mdrgs-palido: var(--crema); }
.js:not(.rm) .publica__bosque .pz-flecha { animation: mecer 2.4s steps(1, end) infinite; }
.js:not(.rm) .publica__bosque .pz-flecha:nth-child(even) { animation-duration: 1.9s; animation-direction: reverse; }
.publica__corazon { position: absolute; font-family: var(--f-mano); font-weight: 700; color: var(--crema); opacity: 0; }
.publica__corazon { right: 8%; bottom: 30%; font-size: 34px; }
.publica__corazon--2 { right: 15%; font-size: 26px; }
.publica__corazon--3 { right: 4%; font-size: 22px; }
@keyframes subir {
  0%   { opacity: 0; translate: 0 0; }
  10%  { opacity: 1; translate: 0 -20px; }
  30%  { translate: 8px -70px; }
  50%  { translate: -6px -120px; }
  70%  { opacity: 1; translate: 6px -170px; }
  90%  { opacity: 0; translate: 0 -210px; }
  100% { opacity: 0; translate: 0 -210px; }
}
.js:not(.rm) .publica__corazon { animation: subir 3.6s steps(9, end) infinite; }
.js:not(.rm) .publica__corazon--2 { animation-delay: 1.2s; }
.js:not(.rm) .publica__corazon--3 { animation-delay: 2.4s; }
.rm .publica__corazon--1 { opacity: 1; }
.movil {
  width: min(360px, 84vw); padding: 12px 12px 10px; border-radius: 34px;
  background: var(--crema) var(--papel) center / 400px; filter: var(--sombra-alta); rotate: -2deg;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 14%, transparent);
}
.movil__barra { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; font-family: var(--f-ui); font-size: 14px; font-weight: 700; }
.movil__avatar { width: 26px; aspect-ratio: 1; border-radius: 50%; background: #537A50; box-shadow: 0 0 0 2px var(--crema), 0 0 0 3.5px #537A50; }
.movil__progreso { display: flex; gap: 4px; padding: 0 4px 8px; }
.movil__progreso span { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--tinta) 18%, transparent); }
.movil__progreso span.is-hecha { background: var(--tinta); }
.movil__pantalla { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: var(--tinta); cursor: pointer; }
.movil[data-formato="historia"] { width: min(300px, 76vw); }
.movil[data-formato="historia"] .movil__pantalla { aspect-ratio: 9 / 16; border-radius: 14px; }
.movil__serie, .movil__serie img, .movil__serie video { position: absolute; inset: 0; width: 100%; height: 100%; }
.movil__serie img, .movil__serie video { object-fit: cover; }
.movil__serie[hidden], .movil__serie img[hidden], .movil__serie video[hidden] { display: none; }
.movil__oir {
  position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 3px 10px 5px;
  background: var(--crema) var(--papel) center / 200px; border-radius: 3px; rotate: -3deg;
  font-family: var(--f-mano); font-size: 19px; font-weight: 600; color: var(--tinta);
  pointer-events: none; display: none;
}
.movil.is-video .movil__oir { display: block; }
.movil.is-sonando .movil__oir { display: none; }
.movil__boton:disabled { opacity: 0.25; cursor: default; }
.movil.is-uno .movil__mandos { visibility: hidden; height: 12px; padding: 0; overflow: hidden; }
@keyframes pasar-diapo {
  0%   { translate: calc(var(--desde, 1) * 18%) 0; }
  33%  { translate: calc(var(--desde, 1) * 7%) 0; }
  66%  { translate: calc(var(--desde, 1) * -1.5%) 0; }
  100% { translate: 0 0; }
}
.js:not(.rm) .movil__serie .is-entra { animation: pasar-diapo calc(var(--fotograma) * 3) steps(1, end); }
.movil__mandos { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 0; }
.movil__boton { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; cursor: pointer; font-family: var(--f-mano); font-size: 34px; font-weight: 700; line-height: 1; color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .movil__boton:hover { background: color-mix(in srgb, var(--arena) 55%, transparent); } }
.movil__cuenta { font-family: var(--f-mano); font-size: 22px; font-weight: 600; color: var(--oliva); }
.publica__nota { font-size: 21px; }

/* Detrás de cada publicación: tres fotos de la gente del máster, rasgadas y montadas a mano */
.mesa { max-width: var(--ancho); margin: clamp(120px, 16vh, 180px) auto 0; display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mesa__texto .entradilla { margin-top: 18px; }
/* tres fotos rasgadas, superpuestas: la del grupo manda; las otras dos la acompañan */
.mesa__tablero { position: relative; aspect-ratio: 1 / 0.86; }
.mesa__foto { position: absolute; margin: 0; rotate: var(--giro, 0deg); }
.mesa__foto--1 { left: 0; top: 9%; width: 76%; aspect-ratio: 4 / 3; --giro: -1.2deg; }
.mesa__foto--2 { right: 0; top: 0; width: 34%; aspect-ratio: 1; --giro: 3.5deg; z-index: 2; }
.mesa__foto--3 { right: 3%; top: 53%; width: 54%; aspect-ratio: 702 / 516; --giro: -2.4deg; z-index: 3; filter: var(--sombra-alta); }

/* La cita, grande y con sus comillas meciéndose */
.caso__cita { position: relative; max-width: 900px; margin: clamp(110px, 15vh, 170px) auto 0; padding-left: clamp(0px, 8vw, 110px); }
.caso__comillas { position: absolute; left: 0; top: 6px; width: clamp(50px, 5vw, 72px); color: var(--salvia); transform-origin: 50% 80%; }
.js:not(.rm) .caso__comillas { --vaiven: 6deg; animation: mecer-planta 2.6s steps(1, end) infinite; }
.caso__cita blockquote { font-size: clamp(28px, 3vw, 46px); line-height: 1.2; font-style: italic; letter-spacing: -0.012em; text-wrap: pretty; }
.caso__cita figcaption { margin-top: 20px; font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: var(--tinta-suave); }
.caso__ver { max-width: var(--ancho); margin: 40px auto 0; text-align: center; }

/* Otros casos */
.otros { max-width: 1180px; margin: clamp(100px, 14vh, 150px) auto 0; }
.otros__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: 36px; }
.otro { display: grid; gap: 14px; padding: 12px 12px 22px; background: var(--crema) var(--papel) center / 600px; filter: var(--sombra); text-decoration: none; rotate: var(--r, 0deg); transition: translate 260ms var(--ease-out), filter 260ms var(--ease-out); }
.otro__foto { aspect-ratio: 3 / 2; overflow: hidden; }
.otro__foto img { width: 100%; height: 100%; object-fit: cover; }
.otro__quien { padding: 0 6px; font-family: var(--f-ui); font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--oliva); }
.otro__titulo { padding: 0 6px; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.12; font-weight: 600; text-wrap: balance; }
.otro__titulo::after { content: " →"; color: var(--oliva); }
.otro { transform-origin: 50% 0; }
.js:not(.rm) .otro { animation: mecer-postal 2.6s steps(1, end) infinite; }
.js:not(.rm) .otro:nth-child(2) { animation-duration: 2.1s; animation-direction: reverse; }
@media (hover: hover) and (pointer: fine) { .js:not(.rm) .otro:hover { translate: 0 -8px; filter: var(--sombra-alta); } }

.legal .pagina__titulo { font-size: clamp(40px, 4.6vw, 72px); }

/* ---------- Pie ---------- */

/* El pie va en papel tinta con letra crema, como el reverso de la página */
.pie {
  position: relative;
  padding: 56px max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))) 40px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px 40px; align-items: center;
  background: var(--tinta) var(--papel-tinta) center / 900px;
  color: var(--crema);
  font-family: var(--f-ui); font-size: 14px;
}
/* En las páginas interiores el pie arranca con su propio borde rasgado */
.pagina ~ .pie { margin-top: 40px; }
.pagina ~ .pie::before {
  content: ""; position: absolute; left: 0; right: 0; top: -40px; height: 42px;
  background: inherit;
  -webkit-mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/filo-b.svg) 0 0 / 100% 100%;
}
.pie a { color: var(--crema); }
.pie a:focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }
.pie__logo { height: 26px; width: auto; }
.pie__lema { font-family: var(--f-texto); font-size: 18px; font-style: italic; }
.pie__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pie__nav a { text-decoration: none; padding: 8px 0; }
.pie__legal { grid-column: 1 / -1; color: color-mix(in srgb, var(--crema) 74%, var(--tinta)); font-size: 13px; line-height: 1.55; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--crema) 22%, transparent); }
.pie__legales { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: -10px; font-size: 13px; }
.pie__legales a { padding: 10px 0; color: color-mix(in srgb, var(--crema) 84%, var(--tinta)); }
@media (hover: hover) and (pointer: fine) {
  .pie__nav a:hover, .pie__legales a:hover { text-decoration: underline; text-underline-offset: 5px; }
}

/* ---------- Juegos de papel ---------- */

/* Anochece en el pueblo: el cielo pasa a salvia oscura en cuatro fotogramas y el papel de arriba se rasga */
.entender { transition: background-color calc(var(--fotograma) * 4) steps(4, end), color 0s linear calc(var(--fotograma) * 2); }
.entender.is-noche { background-color: color-mix(in srgb, var(--salvia) 38%, var(--tinta)); color: var(--crema); }
.entender::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: -2px; height: 56px;
  background: var(--crema) var(--papel) center top / 1600px auto;
  rotate: 180deg;
  -webkit-mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%;
          mask: url(../assets/papel/filo-a.svg) 0 0 / 100% 100%;
  opacity: 0; transition: opacity 0s linear calc(var(--fotograma) * 2);
  pointer-events: none;
}
.entender.is-noche::before { opacity: 1; }
.entender__loma, .entender__flores { transition: filter calc(var(--fotograma) * 4) steps(4, end); }
.entender.is-noche .entender__loma { filter: var(--sombra) brightness(0.62); }
.entender.is-noche .entender__loma--lejos { filter: brightness(0.62); }
.entender.is-noche .entender__flores { filter: brightness(0.62); }
.entender__golondrina { transition: opacity 0s linear calc(var(--fotograma) * 2); }
.entender.is-noche .entender__golondrina { opacity: 0; }
/* El paisaje sigue sin capturar el ratón salvo el sol; el texto deja pasar el clic donde no hay nada */
.entender__contenido { pointer-events: none; }
.entender__contenido > * { pointer-events: auto; }

/* Golondrinas que se espantan: salen volando del cuadro y al rato vuelven a posarse */
@keyframes espantarse {
  0%   { translate: 0 0; }
  16%  { translate: 30px -36px; }
  32%  { translate: 100px -110px; }
  48%  { translate: 210px -210px; }
  64%  { translate: 360px -330px; }
  80%  { translate: 540px -460px; opacity: 1; }
  100% { translate: 760px -600px; opacity: 0; }
}
@keyframes posarse {
  0%   { translate: -340px -260px; opacity: 0; }
  1%   { translate: -340px -260px; opacity: 1; }
  25%  { translate: -210px -170px; }
  50%  { translate: -100px -80px; }
  75%  { translate: -28px -26px; }
  90%  { translate: 4px 3px; }
  100% { translate: 0 0; opacity: 1; }
}
.js:not(.rm) .entender__golondrina.is-espantada { animation: revolotear 0.5s steps(1, end) infinite, espantarse calc(var(--fotograma) * 7) steps(1, end) forwards; }
.js:not(.rm) .entender__golondrina.is-volviendo { animation: revolotear 0.6s steps(1, end) infinite, posarse calc(var(--fotograma) * 9) steps(1, end) forwards; }

/* Despegar el collage: el sol, la hoja y la etiqueta se pueden arrastrar y vuelven a su sitio a saltos */
.js:not(.rm) [data-arrastre] { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.js:not(.rm) [data-arrastre].is-arrastrada { z-index: 6; cursor: grabbing; scale: 1.06; }
.js:not(.rm) .collage__hoja.is-arrastrada, .js:not(.rm) .collage__etiqueta.is-arrastrada { filter: var(--sombra-alta); }
@media (pointer: coarse) {
  /* en el móvil el sol, que es grande, deja bajar la página con el dedo */
  .js:not(.rm) .collage__sol[data-arrastre] { touch-action: pan-y; }
}

/* ---------- Movimiento reducido: todo en su sitio, sin saltos ---------- */

.rm .sm, .rm .pieza { opacity: 1 !important; animation: none !important; }
.rm .postal__cara, .rm .postal__dorso, .rm .sobre__solapa { transition: none; }
.rm .carta__hoja, .rm .carta-form, .rm .carta-enviada, .rm .despues__cuadro * { animation: none !important; }
.rm .otro, .rm .mas-postales { transition: none; }
.rm .pila__foto.is-fuera { animation: none; }
.rm .nota-papel, .rm .despues__bloque, .rm .etapa__ficha, .rm .recorte-nota__foto, .rm .carta-form { transition: none; }
.rm .entender, .rm .entender *, .rm .entender::before { transition: none !important; }

/* ---------- Pantallas medianas ---------- */

@media (max-width: 1100px) {
  .nav__opt { display: none; }
  .nav__menu { display: inline-flex; align-items: center; }
  .notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nota-papel:nth-child(n) { margin-top: 0; }
  .nota-papel:nth-child(even) { margin-top: 40px; }
  .postales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .postal-hueco:nth-child(n) { margin: 0; }
  .ambitos__desliza { display: block; }
  .postal-hueco:nth-child(even) { margin-top: 48px; }
}

/* ---------- Móvil: lectura vertical, pensada para el pulgar ---------- */

@media (max-width: 760px) {
  :root { --nav-alto: 64px; }
  .nav { gap: 12px; }
  .nav__logo img { height: 21px; }
  .nav__links .boton { min-height: 44px; padding: 8px 14px; }
  .nav__mov-txt { display: none; }

  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--nav-alto) + 28px); padding-bottom: 56px; gap: 40px; }
  .hero__titulo { font-size: clamp(42px, 12.6vw, 96px); }
  .hero__pie { bottom: 14px; }
  .collage { aspect-ratio: 1 / 0.95; margin-top: 10px; }
  .collage__etiqueta { left: 38%; font-size: 10.5px; padding: 10px 14px 8px; }

  .entender { min-height: 0; padding-bottom: 86vw; }
  .entender__contenido { grid-template-columns: 1fr; gap: 36px; }
  .entender__paisaje { height: 92vw; }
  .entender__aparte { padding-top: 64px; }
  .entender__golondrina--1 { right: 4px; top: 4px; width: 50px; }
  .entender__golondrina--2 { right: 70px; top: 26px; width: 34px; }
  .entender__estrella--1 { right: 10px; top: 8px; width: 26px; }
  .entender__estrella--2 { right: 74px; top: 30px; width: 18px; }
  .entender__estrella--3 { right: 128px; top: 4px; width: 22px; }
  .entender__astro { left: 52%; bottom: 80%; }
  .libreta { margin-top: 0; padding-left: 52px; background-position: -6px 0, center; }

  .notas { grid-template-columns: 1fr; gap: 36px; }
  .nota-papel:nth-child(even) { margin-top: 0; }

  .servicios__cabecera, .ambitos__cabecera, .nosotros__cabecera, .cuaderno__cabecera { grid-template-columns: 1fr; gap: 18px; }
  .jugar { grid-template-columns: 1fr; }
  .jugar__texto { justify-self: stretch; }
  .informe { justify-self: center; width: min(100%, 420px); }
  .etapa__planta { height: 220px; }
  .etapa--raiz .etapa__planta { height: 290px; }
  .etapa__ficha { margin-top: -26px; padding: 26px 22px 22px; }
  .etapa__etiqueta { font-size: 16px; }
  .nav__links { gap: 0; }
  .nav { gap: 10px; }
  .despues { grid-template-columns: 1fr; }
  .despues__cuadro { grid-template-columns: 1fr; }
  .despues__ilustra { width: 60%; }
  .despues__bloque--taller { margin-top: 0; }

  /* en el móvil, las postales van en fila y se pasan con el dedo */
  .postales { display: flex; gap: 18px; margin-left: calc(var(--margen) * -1); margin-right: calc(var(--margen) * -1); padding: 18px var(--margen) 34px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margen); scrollbar-width: none; }
  .postales::-webkit-scrollbar { display: none; }
  .postal-hueco { flex: 0 0 84%; scroll-snap-align: start; }
  .postal-hueco:nth-child(n) { margin: 0; }
  .postal__dorso { grid-template-columns: 1fr; padding: 20px 18px 60px; }
  .postal__texto { padding-right: 0; border-right: 0; }
  .postal__lado { grid-auto-flow: column; justify-content: space-between; align-items: end; padding-top: 12px; border-top: 1px solid var(--linea); }
  .postal__sello { width: 56px; }

  .cartas { grid-template-columns: 1fr; gap: 120px; margin-top: 130px; }
  .carta__perfil { width: 70%; margin-top: -80px; }
  .carta__linkedin { right: -10%; font-size: 19px; }
  .observacion { padding-left: 0; padding-top: 60px; }
  .observacion__comillas, .observacion__cierre { width: 46px; }
  .observacion__cierre { margin-left: 16px; }

  .cuaderno__rejilla { grid-template-columns: 1fr; }
  .recorte-nota:nth-child(3) { margin-top: 0; }

  .contacto { grid-template-columns: 1fr; }
  .carta-form { padding: 28px 20px; }
  .carta-form input[type="text"], .carta-form input[type="email"] { width: 100%; field-sizing: fixed; display: block; margin: 0 0 6px; }
  .carta-form__cabecera { flex-wrap: wrap; padding-right: 70px; }
  .carta-form__fecha { margin-left: 0; width: 100%; }
  .carta-form__punto { display: none; }
  .carta-form__sello { width: 58px; top: 20px; right: 18px; }

  .pie { grid-template-columns: 1fr; }

  .caso__portada, .caso__reto, .pila, .publica, .mesa { grid-template-columns: 1fr; }
  .movil { rotate: 0deg; }
  .publica__fondo { inset: 0; }
  .collage--master .pz-bocadillo { top: 30%; left: 50%; }
  .caso__cifras, .caso__logros, .otros__rejilla, .relacionadas__rejilla { grid-template-columns: 1fr; }
  .comparar__marco { aspect-ratio: 4 / 3; }
  .pila__foto { inset: 3% 4%; }
  .datos > div { grid-template-columns: 1fr; }
  .caso__cita { padding-left: 0; padding-top: 64px; }
  .pagina__foto-recorte { aspect-ratio: 4 / 3; }
}