/* Letras de la portada (a/letras/, OFL): imanes de letras, texto y lo que se escribe a mano. Solo el subconjunto latino. */
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; font-display: swap; src: url("letras/mplus-rounded-800.woff2") format("woff2"); }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 900; font-display: swap; src: url("letras/mplus-rounded-900.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-weight: 400 700; font-display: swap; src: url("letras/atkinson-next.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 400; font-display: swap; src: url("letras/atkinson-next-italic.woff2") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-weight: 400 700; font-display: swap; src: url("letras/shantell-sans.woff2") format("woff2"); }

/* La página es una puerta de nevera vista de frente, de arriba abajo: todo lo demás va pegado con imanes. */
:root {
  --puerta: #a3d6c8;
  --puerta-brillo: rgba(255, 255, 255, .26);
  --puerta-sombra: #82bdaf;
  --puerta-tinta: #0f3a33;
  --puerta-tinta-2: #2a5850;
  --goma: #6aa497;
  --papel: #fdfdfb;
  --papel-linea: #d3e0ee;
  --margen-rojo: #f2b1ab;
  --tinta: #1c2a31;
  --tinta-2: #4b5a62;
  --boli: #2546a6;
  --posit: #ffe36e;
  --cinta: #ecdcb8;
  --azul: #1f5fd1;
  --amarillo: #f7b500;
  --verde: #1e8442;
  --violeta: #7547d0;
  --rojo: #d42f28;
  --rojo-hondo: #9c2018;
  --cromo-1: #f6f8f9;
  --cromo-2: #b7c1c6;
  --rejilla: #22302d;
  --sombra: rgba(12, 52, 45, .42);
  --foco: #0b3fa8;
  --iman-azul: var(--azul);
  --iman-violeta: var(--violeta);
  --iman-verde: var(--verde);

  --f-iman: "M PLUS Rounded 1c", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mano: "Shantell Sans", "Comic Neue", "Segoe Print", "Bradley Hand", cursive;

  --t-iman: clamp(46px, 7.8vw, 112px);
  --t-h2: clamp(30px, 4.4vw, 54px);
  --t-h3: clamp(22px, 2.2vw, 28px);
  --t-texto: clamp(17px, 1.25vw, 19px);
  --t-nota: clamp(19px, 1.4vw, 21px);
  --t-chica: 15px;

  /* Las palabras del peque escritas sobre la puerta (no sobre papel): el violeta de los imanes no llega a 4,5:1 ahí. */
  --suya-puerta: #553199;

  --banda: clamp(72px, 9vw, 128px);
  --ancho: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --puerta: #1d4b44; --puerta-brillo: rgba(255, 255, 255, .07); --puerta-sombra: #153934;
    --puerta-tinta: #e2f3ed; --puerta-tinta-2: #a8cfc5; --goma: #0f2c28;
    --papel: #eceee9; --papel-linea: #c2cedb; --posit: #f0d25a; --cinta: #d6c49e;
    --cromo-1: #d5dce0; --cromo-2: #9aa5aa; --rejilla: #0d1513;
    --sombra: rgba(0, 0, 0, .62); --foco: #ffe36e;
    --iman-azul: #6a9bff; --iman-violeta: #a98bff; --iman-verde: #45c473; --suya-puerta: #cdb8ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --puerta: #1d4b44; --puerta-brillo: rgba(255, 255, 255, .07); --puerta-sombra: #153934;
  --puerta-tinta: #e2f3ed; --puerta-tinta-2: #a8cfc5; --goma: #0f2c28;
  --papel: #eceee9; --papel-linea: #c2cedb; --posit: #f0d25a; --cinta: #d6c49e;
  --cromo-1: #d5dce0; --cromo-2: #9aa5aa; --rejilla: #0d1513;
  --sombra: rgba(0, 0, 0, .62); --foco: #ffe36e;
  --iman-azul: #6a9bff; --iman-violeta: #a98bff; --iman-verde: #45c473; --suya-puerta: #cdb8ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-color: var(--puerta-sombra) var(--puerta); }
body {
  margin: 0;
  background:
    linear-gradient(90deg, transparent 0, var(--puerta-brillo) 12%, transparent 24%, transparent 72%, var(--puerta-brillo) 84%, transparent 94%) fixed,
    var(--puerta);
  color: var(--puerta-tinta);
  font: 400 var(--t-texto)/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--posit); color: var(--tinta); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.marco {
  max-width: calc(var(--ancho) + 2 * max(16px, env(safe-area-inset-left, 0px)));
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .marco { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}

.saltar { position: absolute; left: 16px; top: -60px; background: var(--papel); color: var(--tinta); padding: 10px 16px; z-index: 20; }
.saltar:focus { top: 12px; }

/* ——— Piezas de la nevera ——— */
.papel {
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .07), 0 14px 24px -14px var(--sombra);
}
.hoja {
  background-color: var(--papel);
  background-image:
    linear-gradient(90deg, transparent 0 46px, var(--margen-rojo) 46px 48px, transparent 48px),
    repeating-linear-gradient(transparent 0 31px, var(--papel-linea) 31px 32px);
  background-position: 0 0, 0 14px;
  padding: 26px 26px 28px 66px;
  line-height: 32px;
}
.iman::before {
  content: "";
  position: absolute;
  left: var(--ix, 50%);
  top: var(--iy, -12px);
  width: 30px; height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .6), transparent 42%), var(--c, var(--azul));
  box-shadow: 0 3px 0 color-mix(in oklab, var(--c, var(--azul)), black 32%), 0 9px 10px -4px var(--sombra);
  z-index: 2;
}
.cinta {
  display: inline-block;
  background: var(--cinta);
  color: var(--tinta);
  font: 500 var(--t-chica)/1.3 var(--f-mano);
  padding: 5px 12px 6px;
  transform: rotate(var(--g, -1.5deg));
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .25);
  clip-path: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 99% 95%, 96% 100%, 3% 96%, 0 100%);
}
.posit {
  background: var(--posit);
  color: var(--tinta);
  font: 500 var(--t-nota)/1.3 var(--f-mano);
  padding: 22px 22px 26px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .07), 0 14px 20px -12px var(--sombra);
}
.lamina { background: #fff; padding: 12px 12px 14px; margin: 0; }
.lamina img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lamina figcaption { position: absolute; left: 14px; bottom: -14px; }
.mano { font-family: var(--f-mano); color: var(--boli); }
.suya { background: none; color: var(--violeta); font: 700 1.04em/1 var(--f-mano); font-variation-settings: "BNCE" 60, "INFM" 90; }

/* El botón es el único imán rojo: sólo para crear el cuento. */
.crear {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px;
  padding: 14px 26px 16px;
  background: var(--rojo);
  color: #fff;
  font: 800 clamp(19px, 1.7vw, 23px)/1.1 var(--f-iman);
  text-decoration: none;
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 4px 0 var(--rojo-hondo), 0 14px 18px -8px var(--sombra);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s;
}
.crear:hover { transform: translateY(-2px) rotate(-.6deg); text-decoration: none; }
.crear:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 1px 0 var(--rojo-hondo), 0 6px 10px -6px var(--sombra); }
.crear svg { width: 22px; height: 22px; flex: none; }
.letra-pie { font-size: var(--t-chica); color: var(--tinta-2); line-height: 1.45; }

/* Imanes de letras */
.imanes { font: 900 var(--t-iman)/1 var(--f-iman); letter-spacing: -.01em; }
.imanes .ln { display: block; white-space: nowrap; }
.imanes i {
  --d: color-mix(in oklab, var(--c), black 34%);
  display: inline-block;
  margin-right: .04em;
  font-style: normal;
  color: var(--c);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  text-shadow: 0 1px 0 var(--d), 0 2px 0 var(--d), 0 3px 0 var(--d), 0 4px 0 var(--d), 0 13px 14px var(--sombra);
}
.imanes .hueco-letra { display: inline-block; width: .28em; }
.a { --c: var(--azul); } .b { --c: var(--amarillo); } .v { --c: var(--verde); } .m { --c: var(--violeta); }
.imanes .a { --c: var(--iman-azul); } .imanes .v { --c: var(--iman-verde); } .imanes .m { --c: var(--iman-violeta); }
@media (prefers-reduced-motion: no-preference) {
  .portada .imanes i, .cierre.visto .imanes i { animation: clac .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--n) * 38ms + 80ms); }
  @keyframes clac {
    from { transform: translateY(calc(var(--y, 0px) - 16px)) rotate(calc(var(--r, 0deg) * 2.4)) scale(1.07); }
  }
}

/* ——— Arriba: placa y enlaces ——— */
.arriba { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px 8px; }
.placa { display: inline-block; text-decoration: none; transform: rotate(-2deg); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.placa:hover { transform: rotate(-1deg) translateY(-1px); }
.placa img { display: block; height: clamp(46px, 4.6vw, 64px); width: auto; filter: drop-shadow(0 6px 7px var(--sombra)); }
.arriba nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-weight: 700; font-size: 16px; }
.arriba nav a { text-decoration: none; padding-block: 10px; }
.arriba nav a:hover { text-decoration: underline; }
.arriba .entrar { border: 2px solid currentColor; border-radius: 10px; padding: 8px 14px; }
@media (max-width: 899px) { .arriba nav .secundario { display: none; } }

/* ——— Portada (la puerta de arriba) ——— */
.portada { position: relative; padding-bottom: clamp(28px, 2.2vw, 48px); }
.portada-rejilla { display: grid; gap: 28px; padding-top: clamp(16px, 2vw, 28px); }
.portada h1 { position: relative; z-index: 3; }
.nota { max-width: 560px; transform: rotate(-.8deg); }
.nota p { font-size: var(--t-nota); }
.nota .crear { margin-top: 18px; font-size: clamp(19px, 1.45vw, 21px); }
.nota .letra-pie { margin-top: 10px; line-height: 1.5; }
.racimo { position: relative; aspect-ratio: 1 / 1.06; max-width: 560px; width: 100%; margin-inline: auto; }
.racimo .pag1 { position: absolute; left: 0; top: 3%; width: 80%; transform: rotate(2.4deg); --c: var(--azul); --ix: 84%; }
.racimo .pag1 figcaption { top: -16px; bottom: auto; --g: -2deg; max-width: 66%; }
.racimo .posit { position: absolute; left: 0; bottom: 0; width: 42%; transform: rotate(-3deg); padding: 16px 16px 18px; font-size: clamp(17px, 1.5vw, 20px); }
.dib1 { position: relative; z-index: 2; justify-self: end; width: 56%; max-width: 330px; margin-top: -40%; transform: rotate(-5deg); padding: 0; }
.dib1 figcaption { left: auto; right: 10px; --g: 2deg; }
.ejemplo-cinta { justify-self: start; display: flex; align-items: center; gap: 12px; }
.ejemplo-cinta .cinta { --g: 1deg; max-width: 260px; }
.companera { width: clamp(84px, 8vw, 116px); height: auto; filter: drop-shadow(0 8px 8px var(--sombra)); transform: rotate(-4deg); flex: none; }
@media (max-width: 599px) { .imanes i { margin-right: .07em; } .imanes .ln + .ln { margin-top: .06em; } }
@media (min-width: 960px) {
  .portada-rejilla { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; align-items: start; }
  .portada h1 { grid-column: 1 / 11; grid-row: 1; }
  .nota { grid-column: 1 / 6; grid-row: 2; margin-top: 28px; }
  .racimo { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: clamp(16px, 2.4vw, 40px); max-width: none; aspect-ratio: 1 / 1.22; }
  .racimo .pag1 { width: 96%; }
  .racimo .posit { left: auto; right: 2%; bottom: 0; width: 56%; }
  .dib1 { grid-column: 6 / 9; grid-row: 2; justify-self: start; width: 92%; max-width: none; margin: -64px 0 0 -40px; z-index: 1; }
  .ejemplo-cinta { grid-column: 9 / 13; grid-row: 2; align-self: end; justify-self: end; margin-bottom: 0; }
}
.junta {
  height: 16px;
  background: linear-gradient(180deg, var(--puerta-sombra), var(--goma) 35%, var(--goma) 65%, var(--puerta-sombra));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 0 var(--puerta-brillo);
}

/* ——— Bandas de la puerta de abajo ——— */
.banda { padding-block: var(--banda); }
.cabeza { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.cabeza h2, .cierre h2.texto { font: 800 var(--t-h2)/1.08 var(--f-iman); letter-spacing: -.015em; }
.cabeza p { max-width: 62ch; color: var(--puerta-tinta-2); font-size: clamp(18px, 1.4vw, 20px); }
.cabeza p strong { color: var(--puerta-tinta); }

/* El rato: un eje de minutos a la izquierda */
.eje { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 8vw, 112px); }
.paso { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; row-gap: 28px; align-items: start; }
.minuto {
  grid-column: 1; grid-row: 1 / span 2;
  font: 700 17px/1.1 var(--f-mano);
  text-align: center;
  padding: 8px 4px 9px;
  --g: -3deg;
}
.minuto b { display: block; font: 900 26px/1 var(--f-iman); font-variant-numeric: tabular-nums; }
.paso .texto { grid-column: 2; display: grid; gap: 14px; max-width: 46ch; }
.paso h3 { font: 800 var(--t-h3)/1.15 var(--f-iman); }
.paso .texto p { color: var(--puerta-tinta-2); }
.paso .texto a { font-weight: 700; }
.paso .medio { grid-column: 2; }
@media (min-width: 900px) {
  .paso { grid-template-columns: 96px minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 3.4vw, 48px); }
  .minuto { position: sticky; top: 24px; grid-row: 1; }
  .paso .texto { grid-column: 2; padding-top: 6px; }
  .paso .medio { grid-column: 3; grid-row: 1; }
}

.par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.6vw, 36px); align-items: start; }
.par .lamina:nth-child(1) { transform: rotate(-1.6deg); --c: var(--verde); }
.par .lamina:nth-child(2) { transform: rotate(1.4deg); --c: var(--violeta); }
.par .lamina figcaption { --g: -1deg; max-width: calc(100% - 20px); }
@media (max-width: 599px) {
  .par { grid-template-columns: 1fr; gap: 0; }
  .par .lamina { width: 74%; }
  .par .lamina:nth-child(2) { justify-self: end; margin-top: -22%; z-index: 1; }
  .par .lamina:nth-child(1) { --ix: 84%; }
  .par .lamina:nth-child(1) figcaption { top: -14px; bottom: auto; max-width: 62%; }
}

/* Las puertas */
.cuento-hoja { padding: 30px clamp(20px, 3vw, 36px) 28px; --c: var(--azul); --ix: 18%; transform: rotate(-.6deg); }
.asoma { position: absolute; right: clamp(-28px, -2vw, -12px); top: clamp(-74px, -6vw, -56px); width: clamp(78px, 8vw, 104px); transform: rotate(8deg); z-index: 3; pointer-events: none; }
.asoma img { width: 100%; height: auto; filter: drop-shadow(0 8px 8px var(--sombra)); }
@media (max-width: 899px) { .cuento-hoja { margin-top: 44px; } .asoma { right: -6px; } }
.cuento-hoja .frase { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.5; min-height: 3em; }
.hueco { display: inline-block; min-width: 5.5em; border-bottom: 3px dashed var(--papel-linea); color: var(--tinta-2); }
.hueco.lleno { border-bottom-color: transparent; min-width: 0; }
.lee { margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--papel-linea); font-size: 17px; color: var(--tinta-2); }
.lee .mano { font-size: 21px; display: block; margin-top: 2px; }
.puertas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.puerta-iman {
  --d: color-mix(in oklab, var(--c), black 30%);
  appearance: none; border: 0; cursor: pointer;
  min-height: 48px; padding: 10px 18px 12px;
  border-radius: 12px;
  background: radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .35), transparent 50%), var(--c);
  color: #fff;
  font: 800 18px/1.1 var(--f-iman);
  box-shadow: 0 3px 0 var(--d), 0 9px 12px -6px var(--sombra);
  transform: rotate(var(--r, 0deg));
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.puerta-iman.b { color: #2a2000; }
.puerta-iman:hover { transform: rotate(var(--r, 0deg)) translateY(-2px); }
.puerta-iman[aria-pressed="true"] { outline: 3px solid var(--tinta); outline-offset: 3px; }
.otras { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; }
.boton-papel {
  appearance: none; cursor: pointer;
  min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--tinta); border-radius: 10px;
  background: transparent; color: var(--tinta);
  font: 700 16px/1 var(--f-texto);
}
.boton-papel:hover { background: rgba(0, 0, 0, .05); }
#otra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#otra label { font-size: 16px; color: var(--tinta-2); }
#otra input {
  min-height: 44px; flex: 1 1 9em; min-width: 0; max-width: 13em;
  padding: 8px 10px; border: 0; border-bottom: 2px solid var(--tinta-2);
  background: transparent; color: var(--boli);
  font: 500 20px/1.2 var(--f-mano);
}
#otra input:focus-visible { outline: none; border-bottom-color: var(--foco); box-shadow: 0 2px 0 var(--foco); }
#otra input::placeholder { color: var(--tinta-2); font: italic 400 17px/1.2 var(--f-texto); }
.pista { margin-top: 18px; font-size: var(--t-chica); color: var(--tinta-2); }
.puertas-fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.puertas-fila .puertas { margin-top: 0; }
.puerta-suya {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 10px 18px 12px 14px;
  border: 2px dashed var(--tinta); border-radius: 12px;
  background: var(--posit); color: var(--tinta);
  font: 800 18px/1.1 var(--f-iman);
  box-shadow: 0 9px 12px -8px var(--sombra);
  transform: rotate(-1.5deg);
  transition: transform .2s cubic-bezier(.16, 1, .3, 1);
}
.puerta-suya svg { width: 22px; height: 22px; flex: none; }
.puerta-suya:hover { transform: rotate(-1.5deg) translateY(-2px); }
.puerta-suya[aria-expanded="true"] { border-style: solid; }
#otra { margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .salta { animation: salta .42s cubic-bezier(.34, 1.56, .64, 1) both; }
  @keyframes salta { from { transform: translate(var(--dx), var(--dy)) rotate(-4deg) scale(1.08); } }
}

/* Dibujo que se revela en ilustración */
.revela { --rev: 1; }
.capas { position: relative; }
.capas .final { position: absolute; inset: 0; opacity: var(--rev); filter: saturate(calc(.4 + .6 * var(--rev))); }
.capas .fantasma { opacity: .55; filter: grayscale(1) contrast(.8); }

/* El estreno */
.estreno { display: grid; gap: 0; }
.estreno .lamina { --c: var(--verde); transform: rotate(.8deg); padding-bottom: 20px; }
.estreno .lamina img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
.estreno .foto { position: relative; }
.estreno .foto .cinta { position: absolute; left: 12px; bottom: -14px; --g: -1.5deg; }
.estreno .linea { padding-top: 10px; }
.estreno .linea { margin-top: 16px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; color: var(--tinta); }
.estreno .linea span { transition: background-color .15s, color .15s; border-radius: 4px; }
.estreno .linea span.dicha { background: var(--posit); }
.estreno .mandos { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 16px; }
.escuchar {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 10px 18px 12px 14px;
  border: 0; border-radius: 12px;
  background: var(--tinta); color: var(--papel);
  font: 800 17px/1 var(--f-iman);
}
.escuchar svg { width: 20px; height: 20px; }
.escuchar[aria-pressed="true"] { background: var(--boli); }
.estreno .aviso { font-size: var(--t-chica); color: var(--tinta-2); }

.dormir { display: grid; gap: 22px; align-items: start; }
.dormir .grande { font: 800 clamp(30px, 3.6vw, 46px)/1.1 var(--f-iman); color: var(--puerta-tinta); }
.paso .medio > .posit { max-width: 340px; transform: rotate(2deg); }
.dedicatoria { transform: rotate(-1.2deg); --c: var(--violeta); max-width: 520px; padding-bottom: 52px; }
.dedicatoria .mano { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.35; }
.dedicatoria .cinta { position: absolute; right: 18px; bottom: -14px; --g: 2deg; }

/* El cuento entero */
.paginas {
  list-style: none; margin: 0; padding: 26px 4px 30px;
  display: grid; gap: 44px clamp(18px, 2.4vw, 32px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.paginas li { display: grid; gap: 14px; align-content: start; }
.paginas .lamina { transform: rotate(var(--r)); }
.paginas .lamina figcaption { left: auto; right: 10px; bottom: -12px; font-size: 13px; padding: 3px 9px 4px; }
.paginas .num { margin-top: 6px; }
.paginas .lamina img { aspect-ratio: 1; }
.paginas .num { font: 900 15px/1 var(--f-iman); color: var(--puerta-tinta-2); font-variant-numeric: tabular-nums; }
.paginas p { font-size: 16px; line-height: 1.5; color: var(--puerta-tinta); }
.paginas .suya { color: var(--suya-puerta); }
@media (max-width: 1023px) { .paginas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .tira { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); scrollbar-width: thin; }
  .paginas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; }
  .paginas li { scroll-snap-align: center; }
}
.creditos { margin-top: 10px; max-width: 70ch; color: var(--puerta-tinta-2); font-size: 16px; }

/* Para acompañar */
.acompanar { padding: clamp(28px, 4vw, 48px); --c: var(--verde); --ix: 50%; }
.acompanar h3.titulo { font: 800 clamp(22px, 2.2vw, 28px)/1.2 var(--f-iman); margin-bottom: 22px; }
.ideas { display: grid; gap: 28px 48px; margin: 0; padding: 0; list-style: none; }
.ideas li { display: grid; align-content: start; gap: 8px; padding-top: 20px; border-top: 2px dashed var(--papel-linea); }
.ideas h4 { margin: 0; font: 800 19px/1.25 var(--f-iman); }
.ideas p { font-size: 17px; color: var(--tinta-2); }
.ideas .mano { font-size: 19px; line-height: 1.35; }
.acompanar .pie { margin-top: 28px; max-width: 36em; font-size: 16px; color: var(--tinta-2); }
@media (min-width: 860px) { .ideas { grid-template-columns: 1fr 1fr; } }

/* Calendario de la nevera */
.calendario { --c: var(--azul); --ix: 50%; padding: 0; overflow: visible; }
.calendario .barra { height: 22px; background: var(--azul); border-radius: 2px 2px 0 0; }
.fechas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fechas li { padding: 22px 18px 24px; display: grid; gap: 4px; align-content: start; border-left: 1px solid var(--papel-linea); }
.fechas li:first-child { border-left: 0; }
.fechas .dia { font: 900 clamp(40px, 4.4vw, 60px)/.95 var(--f-iman); color: var(--azul); font-variant-numeric: tabular-nums; }
.fechas .mes { font: 800 15px/1 var(--f-iman); text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
.fechas b { margin-top: 10px; font: 800 18px/1.2 var(--f-iman); color: var(--tinta); }
.fechas span.que { font-size: 16px; color: var(--tinta-2); line-height: 1.4; }
@media (max-width: 859px) {
  .fechas { grid-template-columns: 1fr 1fr; }
  .fechas li { border-left: 0; border-top: 1px solid var(--papel-linea); }
  .fechas li:nth-child(even) { border-left: 1px solid var(--papel-linea); }
  .fechas li:first-child, .fechas li:nth-child(2) { border-top: 0; }
  .fechas li:last-child { grid-column: 1 / -1; }
}
.regalar .enlaces { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 28px; font-weight: 700; }

/* Precios, normas, quiénes somos, preguntas: dos columnas de papeles */
.dos { display: grid; gap: clamp(48px, 6vw, 72px) clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .dos { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.precio { --c: var(--amarillo); --ix: 30%; transform: rotate(.6deg); }
.precio .grande { font: 900 clamp(30px, 3.2vw, 40px)/1.05 var(--f-iman); color: var(--tinta); margin-bottom: 8px; }
.precio p + p { margin-top: 6px; }
.precio .crear { margin-top: 22px; }
.precio .enlaces { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 16px; font-weight: 700; line-height: 1.6; }
.normas { --c: var(--violeta); --ix: 82%; transform: rotate(-.7deg); padding: clamp(26px, 3.4vw, 40px); }
.normas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.normas li { display: grid; gap: 4px; }
.normas li b { font: 700 clamp(21px, 2vw, 25px)/1.2 var(--f-mano); color: var(--boli); font-variation-settings: "INFM" 40; }
.normas li span { font-size: 17px; color: var(--tinta-2); }
.normas .enlace { display: inline-block; margin-top: 24px; font-weight: 700; font-size: 16px; }

.carta { --c: var(--verde); --ix: 70%; transform: rotate(.5deg); }
.carta .mano { font-size: clamp(19px, 1.8vw, 22px); }
.carta p + p { margin-top: 32px; }
.carta .firma { text-align: right; font-weight: 700; }
.frases { display: grid; gap: 28px; align-content: start; padding-top: clamp(0px, 4vw, 48px); }
.frases .posit { max-width: 420px; font-size: clamp(21px, 2vw, 26px); padding: 28px 28px 32px; }
.frases .posit:nth-child(1) { transform: rotate(-2deg); }
.frases .posit:nth-child(2) { transform: rotate(1.6deg); background: color-mix(in oklab, var(--posit), #ff9fb0 38%); margin-left: clamp(0px, 6vw, 80px); }

.preguntas { --c: var(--azul); --ix: 12%; padding: 10px clamp(18px, 3vw, 34px); }
.preguntas details { border-top: 2px dashed var(--papel-linea); }
.preguntas details:first-of-type { border-top: 0; }
.preguntas summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 60px; padding-block: 16px;
  font: 800 clamp(18px, 1.6vw, 21px)/1.3 var(--f-iman);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary svg { width: 22px; height: 22px; flex: none; transition: transform .2s; }
.preguntas details[open] summary svg { transform: rotate(45deg); }
.preguntas details p { padding-bottom: 20px; color: var(--tinta-2); max-width: 64ch; }

/* Cierre */
.cierre { text-align: left; }
.cierre .imanes { font-size: clamp(64px, 14vw, 190px); }
.cierre .texto-cierre { display: grid; gap: 20px; margin-top: 28px; max-width: 560px; }
.cierre .texto-cierre p { font-size: clamp(19px, 1.6vw, 22px); }
@media (min-width: 900px) {
  .cierre .marco { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; }
  .cierre .texto-cierre { margin-top: 0; }
}

/* Pie: la rejilla de abajo de la nevera */
.rejilla {
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255, 255, 255, .06) 14px 18px),
    var(--rejilla);
  color: #cfe0db;
  padding-block: 44px calc(44px + env(safe-area-inset-bottom, 0px));
  font-size: 15px;
}
.rejilla .marco { display: grid; gap: 22px; }
.rejilla nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.rejilla nav a { padding-block: 8px; }
.rejilla p { color: #9fb6b0; max-width: 38em; }
.rejilla .legal { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; color: #9fb6b0; }
.rejilla .legal a { padding-block: 8px; }
.rejilla .placa { justify-self: start; }
.rejilla .placa img { height: 52px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Sin palabras sueltas al final de un párrafo (crítica del 28-10-2026). */
p, li, dd, figcaption, summary { text-wrap: pretty; }