@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:block;src:url('assets/fuentes/PTSerif-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:block;src:url('assets/fuentes/PTSerif-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:700;font-display:block;src:url('assets/fuentes/PTSerif-700-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:700;font-display:block;src:url('assets/fuentes/PTSerif-700-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:block;src:url('assets/fuentes/PTSerif-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:block;src:url('assets/fuentes/PTSerif-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:block;src:url('assets/fuentes/PTSerif-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:block;src:url('assets/fuentes/PTSerif-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Fuentes servidas desde el propio proyecto. Antes venian de
   fonts.gstatic.com con display=swap: se pintaba con la de reserva y al
   llegar la buena se recomponia. Medido: el nombre pasaba de 684px de
   ancho a 569px entre los 150 y los 400 ms. Con los woff2 en disco y
   font-display:block no hay ida y vuelta. */
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:block;src:url('assets/fuentes/Caveat-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:block;src:url('assets/fuentes/Caveat-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:block;src:url('assets/fuentes/Caveat-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:block;src:url('assets/fuentes/Caveat-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:block;src:url('assets/fuentes/Caveat-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:block;src:url('assets/fuentes/Caveat-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Crimson Text';font-style:italic;font-weight:400;font-display:block;src:url('assets/fuentes/CrimsonText-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Crimson Text';font-style:italic;font-weight:400;font-display:block;src:url('assets/fuentes/CrimsonText-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Crimson Text';font-style:italic;font-weight:600;font-display:block;src:url('assets/fuentes/CrimsonText-600-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Crimson Text';font-style:italic;font-weight:600;font-display:block;src:url('assets/fuentes/CrimsonText-600-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:400;font-display:block;src:url('assets/fuentes/CrimsonText-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:400;font-display:block;src:url('assets/fuentes/CrimsonText-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:600;font-display:block;src:url('assets/fuentes/CrimsonText-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:600;font-display:block;src:url('assets/fuentes/CrimsonText-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:700;font-display:block;src:url('assets/fuentes/CrimsonText-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:700;font-display:block;src:url('assets/fuentes/CrimsonText-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:block;src:url('assets/fuentes/PatrickHand-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:block;src:url('assets/fuentes/PatrickHand-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Portfolio Jorge — lápices de colores sobre papel
   ------------------------------------------------------------
   REGLA DE ORO DEL ESTILO (no romper):
   1. Nada de negro puro ni de contornos uniformes. El contorno
      es una versión oscura del propio color y va EROSIONADO por
      el diente del papel (filtros #tz1 / #tz2 del index).
   2. El color NUNCA se rellena plano. Se construye con rayado a
      tres ángulos casi iguales: la interferencia entre ellos
      rompe la regularidad y el papel se ve por debajo.
   3. Nada de sombras duras desplazadas (box-shadow Npx Npx 0):
      un lápiz no proyecta sombra. Si algo tiene que despegarse
      del papel, se hace con una mancha suave de grafito.
   4. Nada de imágenes repetidas de fondo. La textura es
      procedural (feTurbulence continuo), nunca un tile.
   ============================================================ */

:root{
  /* cada lápiz tiene su punta y su versión apretada (-o = oscuro) */
  --azul:     #2E8FD4;  --azul-o:     #1B5480;
  --lila:     #8B62C6;  --lila-o:     #543680;
  --amarillo: #C9A03F;  --amarillo-o: #8A6516;
  --naranja:  #DE7429;  --naranja-o:  #93430F;
  --verde:    #4E7C5C;  --verde-o:    #2E4C37;
  --rojo:     #C44E3B;  --rojo-o:     #7E2B1E;
  --morado:   #5A3E92;

  --grafito:  #403830;
  --papel:    #F0EADA;
  --papel-2:  #E8E0CC;
  --hoja:     #FAF6EC;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* SIN DESPLAZAMIENTO, Y DICHO A LAS CLARAS.
   El documento mide exactamente lo que la ventana —el tablero entero va en
   position:fixed— asi que no hay nada que desplazar. Pero mientras no se
   diga, el navegador mantiene montada la maquinaria del scroll: en el arbol
   de capas eran `OverflowScrolling` 22,7 Mpx en 6 capas, `Viewport` 13,7 en
   4 y `RootScroller` 9,0 en 2. Cuarenta y cinco megapixeles y doce capas
   para mover algo que no se mueve. */
html{ scroll-behavior:smooth; overflow:hidden; }

body{
  font-family:'Nunito', system-ui, sans-serif;
  color:var(--grafito);
  line-height:1.6;
  overflow:hidden;
  position:relative;
  background-color:var(--papel);
  /* pauta de cuaderno: margen a lápiz rojo + renglones a lápiz azul,
     los dos muy flojos para que no se lean como una rejilla */
  background-image:
    linear-gradient(90deg, transparent 0 38px, rgba(196,78,59,.20) 38px 39.5px, transparent 39.5px 100%),
    repeating-linear-gradient(0deg, rgba(46,143,212,.13) 0 1px, transparent 1px 32px);
  background-size:100% 100%, 100% 32px;
  background-attachment:fixed, fixed;
}

/* ---------- el diente del papel ----------
   EL GRANO YA NO SE MULTIPLICA: VIENE CON SU TRANSPARENCIA PUESTA.

   Esto era un div a pantalla completa con `filter:url(#dientePapel)`,
   `mix-blend-mode:multiply` y `opacity:.45`. Encima de todo (z-index 9998) y
   multiplicando, o sea que obligaba al navegador a aplanar y leerse de vuelta
   TODO lo que hay debajo en cada fotograma. Medido en el camino de pintado de
   una maquina sin tarjeta grafica, con la traza de Chrome y control
   intercalado:

     como estaba                       58 ms  (17 fps)
     el diente sin filtro SVG          50 ms  (-14%)
     el diente sin opacidad            58 ms  ( 0%)
     EL DIENTE SIN `multiply`          41 ms  (-29%)
     el diente entero borrado          42 ms

   O sea: quitar solo el `multiply` valia lo mismo que borrar el elemento.

   Y se puede quitar sin perder NADA, porque multiplicar por un gris es lo
   mismo que poner negro con transparencia. El filtro pintaba el color
   (0.62, 0.58, 0.52) con alfa 0,42*ruido, y el elemento lo bajaba al 45%:

     resultado = fondo * (1 - 0,45*0,42*ruido*(1 - color))

   `1 - color` vale 0,38 / 0,42 / 0,48 segun el canal; usando la media (0,427)
   el error maximo es menos del 1% del valor de un canal. Queda:

     alfa del negro = 0,45 * 0,42 * 0,427 * ruido = 0,0807 * ruido

   La baldosa esta cocida con el motor del propio Chrome (misma `feTurbulence`,
   misma semilla, mas `stitchTiles` para que pegue consigo misma), asi que es
   el mismo ruido y no uno parecido: `herramientas/grano.node.mjs`. A
   frecuencia 0,8 el grano mide pixel y pico, o sea que la baldosa de 512 no
   enseña repeticion — no hay estructura grande que repetir.
   Y NO SE DEDUCE, SE MIDE. La primera vez saque el alfa con lapiz y papel y
   salio el DOBLE de oscuro: los filtros SVG trabajan en espacio de color
   LINEAL si no se les dice otra cosa, y `dientePapel` no se lo dice, asi que
   el gris del filtro no es ese gris cuando sale a pantalla. Ahora la baldosa
   se cuece reproduciendo el efecto ENTERO —filtro, multiply y opacidad— sobre
   un papel del color del tablero, midiendo lo que oscurece cada pixel y
   sacando de ahi el alfa:  alfa = 1 - (loQueSale / elPapel).
   El alfa va de 0 a 11 sobre 255. */
.diente{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background-image:url(assets/diente-grano.webp);
  background-repeat:repeat;
}

/* motas de grafito sueltas (antes eran estrellitas de emoji que parpadeaban) */
.motas{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.mota{ position:absolute; border-radius:50%; opacity:.22; }

/* ============================================================
   MECANISMO 1 — EL MARCO DE LÁPIZ
   Un ::before que solo lleva el borde, erosionado por el filtro.
   El texto va por encima y se queda nítido y legible.
   El outline hace de segunda pasada (el repasado).
   ============================================================ */
.marco-lapiz{ position:relative; }
.marco-lapiz::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  border:2.6px solid var(--co, var(--grafito));
  border-radius:inherit;
  outline:1.7px solid color-mix(in srgb, var(--co, var(--grafito)) 48%, transparent);
  outline-offset:2.5px;
  filter:url(#tz1);
}
.marco-lapiz > *{ position:relative; z-index:1; }

/* ============================================================
   MECANISMO 2 — EL RELLENO DE LÁPIZ
   Tres tramas de rayas a 43° / 48° / 38°. Al no ser múltiplos
   entre sí, el ojo no encuentra el patrón: parece coloreado.
   --p sube o baja la presión del lápiz.
   ============================================================ */
.lapiz-fill{
  --c:var(--azul); --p:1;
  background-image:
    repeating-linear-gradient(43deg,
      color-mix(in srgb, var(--c) calc(46% * var(--p)), transparent) 0 1.5px, transparent 1.5px 4.6px),
    repeating-linear-gradient(48deg,
      color-mix(in srgb, var(--c) calc(28% * var(--p)), transparent) 0 1.2px, transparent 1.2px 6.1px),
    repeating-linear-gradient(38deg,
      color-mix(in srgb, var(--c) calc(20% * var(--p)), transparent) 0 1.7px, transparent 1.7px 8.7px);
}
/* al perfilar se aprieta más: el color se acumula hacia el borde */
.acumula{ box-shadow: inset 0 0 14px 2px color-mix(in srgb, var(--co, var(--c)) 22%, transparent); }

/* ============================================================
   MECANISMO 3 — EL TRAZO DE LOS DIBUJOS
   Dos pasadas con semillas distintas: la línea no cierra igual
   las dos veces, que es lo que hace la mano de verdad.
   El relleno va aparte y SIN filtro (si no, se come el color).
   ============================================================ */
.trazo .pasada-1{ filter:url(#tz1); }
.trazo .pasada-2{ filter:url(#tz2); opacity:.58; }
.garabatos{ filter:url(#tz2); opacity:.55; }
.relleno{ /* sin filtro a propósito */ }

/* iconos dibujados */
.ic, .card-ic, .tl-ic, .quiz-ic{
  fill:none; stroke:var(--ci, var(--grafito));
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter:url(#tz1);
}
.ic{ width:24px; height:24px; flex:none; }
.ic-btn{ width:20px; height:20px; vertical-align:-4px; margin-right:.15em; }
.card-ic{ width:38px; height:38px; margin-bottom:.4rem; }
.tl-ic{ position:absolute; top:-16px; right:16px; width:32px; height:32px; }
.quiz-ic{ width:74px; height:74px; stroke-width:2.2; }

/* ---------- texto ---------- */
.written{ font-family:'Patrick Hand', cursive; }
.big{ font-size:1.5em; }
mark{
  background:linear-gradient(transparent 58%, color-mix(in srgb, var(--amarillo) 55%, transparent) 58%);
  color:inherit; padding:0 .15em;
}
strong{ font-weight:800; }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--papel) 94%, #fff);
  border-bottom:2px solid color-mix(in srgb, var(--grafito) 45%, transparent);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; max-width:1150px; margin:auto; padding:.6rem 1.4rem; gap:1rem; }
.nav-logo{ font-family:'Patrick Hand', cursive; font-size:1.55rem; text-decoration:none; color:var(--grafito); filter:url(#tzTexto); }
.nav-links{ list-style:none; display:flex; gap:.95rem; flex-wrap:wrap; }
.nav-links a{
  font-family:'Patrick Hand', cursive; font-size:1.1rem;
  text-decoration:none; color:var(--grafito);
  border-bottom:2.4px solid transparent; padding-bottom:2px;
  transition:border-color .2s, transform .2s; display:inline-block;
}
.nav-links a:hover{ border-bottom-color:var(--azul); transform:rotate(-1.5deg); }
.nav-links b{ color:var(--naranja-o); display:inline-block; transform:rotate(-4deg); }

/* ---------- HERO ---------- */
.hero{
  position:relative; max-width:1150px; margin:auto;
  /* el hueco de la izquierda es para la espiral: si no, las anillas
     se meten encima del texto */
  padding:3.2rem 1.4rem 2.4rem 4.4rem;
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem; align-items:center;
  min-height:calc(70 * var(--vh)); z-index:1; overflow:hidden;
}
.hero-content{ position:relative; z-index:2; }
.hero-tag{
  display:inline-block; transform:rotate(-3deg);
  font-family:'Patrick Hand', cursive; font-size:1.1rem;
  border-radius:11px; padding:.25rem 1rem;
  background:color-mix(in srgb, var(--lila) 26%, transparent);
}
.hero-fecha{
  display:block; margin:.7rem 0 .2rem;
  font-family:'Caveat', cursive; font-size:1.35rem;
  color:var(--morado); transform:rotate(-1.5deg);
}
.hero-title{
  font-family:'Patrick Hand', cursive;
  font-size:clamp(2.8rem,calc(7.5 * var(--vw)),5.2rem); line-height:1.05;
  display:inline-block; filter:url(#tzTexto);
}
.hero-name{ color:var(--azul-o); }
.hero-sub{ font-size:1.2rem; margin-top:1rem; max-width:34rem; }
.hero-cta{ display:flex; gap:1.1rem; margin-top:1.7rem; flex-wrap:wrap; }

/* ---------- botones ---------- */
.btn{
  font-family:'Patrick Hand', cursive; font-size:1.22rem;
  text-decoration:none; color:var(--grafito);
  border-radius:16px; padding:.55rem 1.35rem;
  display:inline-flex; align-items:center; gap:.35rem;
  cursor:pointer; border:none; background:transparent;
  transition:transform .18s;
}
.btn-main{ background:color-mix(in srgb, var(--amarillo) 30%, transparent); transform:rotate(-1deg); }
.btn-ghost{ background:color-mix(in srgb, var(--hoja) 75%, transparent); transform:rotate(1deg); }
.btn-sm{ font-size:1.02rem; padding:.38rem 1rem; }
.btn:hover{ transform:rotate(0deg) translateY(-3px); }
.btn:active{ transform:translateY(1px) scale(.985); }

/* ---------- mascota ---------- */
.hero-mascot{ position:relative; z-index:2; display:flex; justify-content:center; }
/* el flotar va en un envoltorio: si animas el elemento filtrado,
   el navegador recalcula el ruido en cada frame y se arrastra */
.mascot-flota{ animation:flota 4.5s ease-in-out infinite; }
@keyframes flota{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-11px) rotate(1deg) } }
.mascot-svg{ width:min(330px,calc(72 * var(--vw))); display:block; }
.ojo{ transform-box:fill-box; transform-origin:center; animation:parpadeo 6s infinite; }
@keyframes parpadeo{ 0%,93%,100%{ transform:scaleY(1) } 96%{ transform:scaleY(.12) } }
.bocadillo-fondo{ fill:var(--hoja); }
.bocadillo-trazo{ fill:none; stroke:var(--grafito); stroke-width:2.8; stroke-linejoin:round; filter:url(#tz1); }
.bocadillo-texto{ font-family:'Patrick Hand', cursive; font-size:27px; fill:var(--grafito); }

/* ---------- secciones ---------- */
.section{ position:relative; max-width:1150px; margin:auto; padding:3.6rem 1.4rem; z-index:1; }
.section-tint{
  background:
    radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--azul) 7%, transparent), transparent 42%),
    radial-gradient(ellipse at 88% 82%, color-mix(in srgb, var(--lila) 8%, transparent), transparent 44%),
    color-mix(in srgb, var(--papel-2) 55%, transparent);
  border-top:2px solid color-mix(in srgb, var(--grafito) 32%, transparent);
  border-bottom:2px solid color-mix(in srgb, var(--grafito) 32%, transparent);
}
/* sombreado de lápiz de la hoja: tres ángulos, MUY flojo.
   Sustituye al rayado de 45° regular, que cantaba a patrón de CSS.
   Va en tono cálido, no en grafito: en gris la hoja se ensucia y pierde
   el color de papel. */
.section-tint::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(43deg, rgba(138,101,22,.030) 0 1.4px, transparent 1.4px 8px),
    repeating-linear-gradient(49deg, rgba(147,67,15,.020) 0 1.1px, transparent 1.1px 11.4px),
    repeating-linear-gradient(37deg, rgba(64,56,48,.016) 0 1.6px, transparent 1.6px 15.7px);
}
.section-tint > *{ position:relative; z-index:1; }

.section-title{
  font-family:'Patrick Hand', cursive;
  font-size:clamp(1.9rem,calc(4.6 * var(--vw)),2.9rem);
  text-align:center; margin:.4rem auto 1.1rem;
  display:table; position:relative; padding:0 .6rem .7rem;
}
/* OJO: el filtro va en el <span>, NO en el h2. Un filter afecta a todo el
   subárbol, incluidos los pseudo-elementos: si lo pones en el h2, la misma
   erosión que da grano a la letra se come el subrayado y lo deja en polvo. */
.section-title span{ display:inline-block; filter:url(#tzTexto); }
/* subrayado a mano: dos pasadas de lápiz que no coinciden.
   Periodos en px (en % el degradado se mide sobre la diagonal y sale
   descolocado) y filtro suave: con tz2 la erosión se comía la línea. */
.section-title::after{
  content:''; position:absolute; left:1%; right:1%; bottom:0; height:7px;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--azul) 82%, transparent) 0 46px,
      transparent 46px 53px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--azul-o) 38%, transparent) 0 31px,
      transparent 31px 39px);
  background-size:100% 3.6px, 100% 2.4px;
  background-position:0 0, 6px 4.4px;
  background-repeat:repeat-x;
  border-radius:3px;
  filter:url(#tzTexto);
}
.section-intro{ text-align:center; margin-bottom:1.8rem; font-size:1.06rem; max-width:680px; margin-left:auto; margin-right:auto; }

/* ---------- sobre mí ---------- */
.sobre-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:2.4rem; align-items:center; }
.sobre-dibujo svg{ width:min(290px,calc(82 * var(--vw))); display:block; margin:auto; }
.sobre-texto p{ margin-bottom:1rem; font-size:1.1rem; }
.sobre-list{ list-style:none; margin-top:1.2rem; }
.sobre-list li{ margin:.7rem 0; font-size:1.1rem; display:flex; align-items:center; gap:.75rem; }

/* ---------- pegatinas de habilidades ---------- */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.05rem; max-width:820px; margin:auto; }
.chip{
  font-family:'Patrick Hand', cursive; font-size:1.18rem;
  padding:.45rem 1.2rem; border:none; border-radius:12px;
  color:var(--grafito); cursor:pointer; position:relative;
  transform:rotate(var(--r,-2deg));
  transition:transform .18s;
}
.chip:nth-child(odd){ --r:2deg; }
.chip:nth-child(3n){ --r:-3.5deg; }
.chip:hover{ transform:rotate(0deg) translateY(-4px); }
.chip:active{ transform:translateY(1px) scale(.975); }
/* marcada: no un sello de tinta, un tachado de aprobación a lápiz */
.chip.stamped{ --p:1.45; }
.chip.stamped::after{
  content:''; position:absolute; left:6%; right:6%; top:50%; height:4px;
  background:
    repeating-linear-gradient(89deg,
      color-mix(in srgb, var(--co) 85%, transparent) 0 22px,
      transparent 22px 27px,
      color-mix(in srgb, var(--co) 65%, transparent) 27px 46px,
      transparent 46px 52px);
  border-radius:3px; transform:translateY(-50%) rotate(-1.4deg);
  filter:url(#tz2); z-index:2;
  animation:tachar .45s cubic-bezier(.5,0,.3,1);
}
@keyframes tachar{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } }

.chips-actions{ text-align:center; margin-top:1.7rem; }

/* ---------- ruleta ---------- */
.ruleta-wrap{ text-align:center; }
.ruleta-caja{ position:relative; width:min(290px,calc(78 * var(--vw))); aspect-ratio:1; margin:0 auto 1.5rem; }
.ruleta{ width:100%; height:100%; display:block; transition:transform 3.2s cubic-bezier(.16,.84,.44,1); }
.ruleta-aro{
  position:absolute; inset:-9px; border-radius:50%; pointer-events:none;
  border:2px dashed color-mix(in srgb, var(--grafito) 28%, transparent);
}
.ruleta-pin{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:30px; height:30px; z-index:3; filter:url(#tz1); }
.ruleta-nucleo{
  position:absolute; inset:36%; border-radius:50%;
  background:var(--hoja);
  display:flex; align-items:center; justify-content:center;
  font-family:'Patrick Hand', cursive; font-size:1.9rem; z-index:2;
}
.ruleta-result{ font-family:'Patrick Hand', cursive; font-size:1.4rem; min-height:2.4rem; margin-top:1rem; }
.ruleta-result .ganador{
  display:inline-block; padding:.1rem .9rem; border-radius:11px;
  background:color-mix(in srgb, var(--amarillo) 34%, transparent);
  transform:rotate(-2deg); animation:aparece .5s cubic-bezier(.2,1.5,.4,1);
}
@keyframes aparece{ from{ transform:scale(.5) rotate(-6deg); opacity:0 } to{ transform:scale(1) rotate(-2deg); opacity:1 } }

/* ---------- tarjetas de formación ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.6rem; perspective:900px; }
.card{
  background:color-mix(in srgb, var(--hoja) 78%, transparent);
  border-radius:16px; padding:1.5rem 1.35rem 1.1rem;
  transform:rotate(var(--r,0deg)); position:relative;
  transition:transform .25s; transform-style:preserve-3d;
}
.card:nth-child(even){ --r:1.2deg; }
.card:nth-child(odd){ --r:-1.2deg; }
.card:hover{ transform:rotate(0deg) translateY(-4px); }
.card h3{ font-family:'Patrick Hand', cursive; font-size:1.38rem; line-height:1.25; }
.card p{ font-size:1rem; margin-top:.2rem; }
.card-stamp{
  display:inline-block; margin-top:.8rem; padding:.05rem .85rem;
  border-radius:9px; transform:rotate(-3deg);
  font-family:'Patrick Hand', cursive; font-size:1.02rem; color:var(--morado);
  background:color-mix(in srgb, var(--morado) 13%, transparent);
}
/* cinta de papel: mate, sin brillo de plástico */
.cinta-tarjeta, .cinta{
  position:absolute; top:-13px; left:50%; width:88px; height:25px;
  transform:translateX(-50%) rotate(-3deg);
  background:color-mix(in srgb, var(--amarillo) 34%, transparent);
  border-left:1.5px solid color-mix(in srgb, var(--amarillo-o) 40%, transparent);
  border-right:1.5px solid color-mix(in srgb, var(--amarillo-o) 40%, transparent);
  z-index:3;
}
.cinta{ width:140px; height:30px; top:-16px; }

/* ---------- recorrido ---------- */
.timeline{ position:relative; max-width:740px; margin:auto; }
.tl-line{ position:absolute; left:26px; top:8px; bottom:8px; width:40px; }
.tl-line svg{ width:100%; height:100%; }
.tl-svg{ filter:url(#tz1); }
.tl-svg-2{ filter:url(#tz2); }
.tl-item{ position:relative; padding-left:98px; margin-bottom:2.2rem; }
.tl-dot{ position:absolute; left:8px; top:12px; width:44px; height:44px; z-index:2; }
.tl-dot svg{ width:100%; height:100%; filter:url(#tz1); }
.tl-card{
  background:color-mix(in srgb, var(--hoja) 72%, transparent);
  border-radius:14px; padding:1.05rem 1.35rem; position:relative;
}
.tl-card h3{ font-family:'Patrick Hand', cursive; font-size:1.35rem; }

/* ---------- plan ---------- */
.plan-list{
  max-width:560px; margin:1.3rem auto 0; list-style:none;
  background:color-mix(in srgb, var(--hoja) 76%, transparent);
  border-radius:14px; padding:1.5rem 1.7rem;
}
.plan-item{ margin:.75rem 0; position:relative; }
/* el checkbox nativo fuera: era el detalle que más cantaba a formulario */
.plan-item input{ position:absolute; opacity:0; width:0; height:0; }
.plan-item label{ font-size:1.14rem; cursor:pointer; font-weight:600; display:flex; align-items:center; gap:.9rem; }
.plan-item .caja{
  width:24px; height:24px; flex:none; border-radius:5px;
  border:2.4px solid var(--grafito); filter:url(#tz1);
  position:relative;
}
.plan-item input:focus-visible + label .caja{ outline:2px solid var(--azul); outline-offset:3px; }
/* la marca: dos trazos de lápiz, no un check de sistema */
.plan-item .caja::after{
  content:''; position:absolute; left:4px; top:-1px; width:15px; height:16px;
  border-right:3px solid var(--verde-o); border-bottom:3px solid var(--verde-o);
  transform:rotate(40deg) scale(.4); opacity:0;
  transform-origin:60% 60%;
  transition:opacity .18s, transform .22s cubic-bezier(.3,1.5,.5,1);
}
.plan-item input:checked + label .caja::after{ opacity:1; transform:rotate(42deg) scale(1); }
.plan-tachado{ position:relative; transition:color .3s; }
.plan-tachado::after{
  content:''; position:absolute; left:-2%; top:52%; width:0; height:4px;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--rojo) 85%, transparent) 0 24px,
      transparent 24px 29px,
      color-mix(in srgb, var(--rojo) 62%, transparent) 29px 50px,
      transparent 50px 56px);
  border-radius:3px; transform:translateY(-50%) rotate(-1deg);
  filter:url(#tz2);
  transition:width .45s cubic-bezier(.6,0,.3,1);
}
.plan-item input:checked + label .plan-tachado{ color:color-mix(in srgb, var(--grafito) 52%, transparent); }
.plan-item input:checked + label .plan-tachado::after{ width:104%; }
.plan-note{ text-align:center; font-family:'Patrick Hand', cursive; color:var(--morado); margin-top:1rem; }

/* ---------- quiz ---------- */
.quiz-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.5rem; max-width:980px; margin:auto; perspective:1100px; }
.quiz-card{ height:250px; cursor:pointer; }
.quiz-inner{ position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d; }
.quiz-card.flipped .quiz-inner{ transform:rotateY(180deg); }
.quiz-face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1.3rem; text-align:center;
}
/* En superficies grandes el rayado fino se lee como trama de imprenta.
   Se separa más y se baja la presión: a esta escala el ojo ve color, no rayas. */
.quiz-front{
  --p:.85;
  background-image:
    repeating-linear-gradient(43deg,
      color-mix(in srgb, var(--c) calc(40% * var(--p)), transparent) 0 2px, transparent 2px 7.4px),
    repeating-linear-gradient(48deg,
      color-mix(in srgb, var(--c) calc(24% * var(--p)), transparent) 0 1.6px, transparent 1.6px 10.3px),
    repeating-linear-gradient(37deg,
      color-mix(in srgb, var(--c) calc(17% * var(--p)), transparent) 0 2.2px, transparent 2.2px 14.1px);
}
.quiz-back{ background:color-mix(in srgb, var(--hoja) 84%, transparent); transform:rotateY(180deg); font-size:1.02rem; }
.quiz-back p{ margin-bottom:.5rem; }
.quiz-q{ display:block; margin-top:.4rem; font-family:'Patrick Hand', cursive; font-size:1.22rem; color:var(--morado); }
.quiz-btn{
  font-family:'Patrick Hand', cursive; font-size:1.02rem;
  background:color-mix(in srgb, var(--amarillo) 30%, transparent);
  border:none; border-radius:11px; padding:.3rem 1rem; cursor:pointer;
  color:var(--grafito); transition:transform .15s;
}
.quiz-btn:hover{ transform:translateY(-2px); }
.quiz-mini-confetti{ position:absolute; inset:0; pointer-events:none; border-radius:16px; overflow:hidden; }

/* ---------- carta ---------- */
.carta{
  max-width:580px; margin:0 auto 2.2rem;
  background:color-mix(in srgb, var(--hoja) 88%, transparent);
  border-radius:6px; padding:2.2rem 2rem 1.7rem; position:relative;
}
.carta-fecha{ font-family:'Patrick Hand', cursive; font-size:1.15rem; color:var(--morado); margin-bottom:1rem; }
.carta p{ margin-bottom:1rem; font-size:1.1rem; }
.carta-firma{ margin-top:1.3rem; font-size:1.12rem; }

.flying-bird{ max-width:660px; margin:0 auto 1.8rem; }
.flying-svg{ width:100%; height:auto; display:block; }
.flight-path{ filter:url(#tz2); }
.bird-svg{ fill:none; stroke:var(--lila-o); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:url(#tz1); }
.bird-svg .ala{ stroke:var(--lila); stroke-width:2 }
.bird-flight{ animation:vuelo 7s ease-in-out infinite; }
@keyframes vuelo{
  0%,100%{ transform:translate(0,0) rotate(-2deg) }
  25%{ transform:translate(6px,-6px) rotate(3deg) }
  50%{ transform:translate(-5px,-2px) rotate(-3deg) }
  75%{ transform:translate(5px,3px) rotate(2deg) }
}

.contacto{ display:flex; justify-content:center; gap:1.1rem; flex-wrap:wrap; }
.nota-final{ text-align:center; margin-top:1.9rem; font-family:'Patrick Hand', cursive; font-size:1.3rem; }

.footer{ text-align:center; padding:1.9rem 1rem; font-family:'Patrick Hand', cursive; border-top:2px solid color-mix(in srgb, var(--grafito) 30%, transparent); }
.footer-doodle{ width:220px; height:26px; margin:.5rem auto; display:block; }
.footer-firma{ margin-top:.5rem; opacity:.7; }

/* ---------- confeti: recortes de papel de colores, sin borde negro ---------- */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:5000; overflow:hidden; display:none; }
.confetti.show{ display:block; }
/* recortes de papel, no rectángulos perfectos: esquinas irregulares y
   el papel se transparenta un poco */
.conf-piece{
  position:absolute; top:-22px; width:11px; height:14px; opacity:.62;
  clip-path:polygon(8% 0%, 96% 6%, 100% 88%, 12% 100%, 0% 42%);
  animation:cae linear forwards;
}
.conf-piece:nth-child(3n){ clip-path:polygon(0% 9%, 88% 0%, 100% 74%, 22% 100%); }
.conf-piece:nth-child(3n+1){ clip-path:polygon(14% 0%, 100% 14%, 86% 100%, 0% 82%); }
@keyframes cae{ to{ transform:translateY(calc(112 * var(--vh))) rotate(760deg) } }

/* ---------- entradas ---------- */
.pop-target{ opacity:0; transform:translateY(26px) rotate(-.8deg); transition:opacity .6s, transform .6s; }
.pop-target.pop{ opacity:1; transform:none; }

/* ---------- espiral del lomo ---------- */
.espiral{
  position:absolute; left:6px; top:2.6rem; bottom:2.6rem; width:32px; z-index:3;
  display:flex; flex-direction:column; justify-content:space-around; align-items:center;
  pointer-events:none;
}
.espiral-hoyo{
  width:19px; height:9px; border-radius:50%; flex:none;
  border:2.4px solid var(--morado);
  background:color-mix(in srgb, var(--papel-2) 80%, transparent);
  filter:url(#tz1);
}
.espiral::before{
  content:''; position:absolute; left:50%; top:-8px; bottom:-8px; width:4px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg, transparent 0 7px, color-mix(in srgb, var(--grafito) 32%, transparent) 7px 13px);
}

/* ---------- número de página y nota al margen ---------- */
.page-num{
  position:absolute; left:.9rem; top:.9rem; z-index:4;
  width:54px; height:54px; border-radius:50%;
  border:3px solid var(--morado);
  display:flex; align-items:center; justify-content:center;
  font-family:'Patrick Hand', cursive; font-size:1.5rem; font-weight:700; color:var(--morado);
  background:color-mix(in srgb, var(--hoja) 78%, transparent);
  transform:rotate(-8deg); filter:url(#tzTexto);
}
.page-note{
  position:absolute; right:1.1rem; top:1.4rem; z-index:4;
  font-family:'Caveat', cursive; font-size:1.25rem;
  color:var(--morado); opacity:.8; transform:rotate(2.5deg);
  max-width:230px; text-align:right;
}

/* ---------- el pollito que avanza con la lectura ---------- */
.hero-progress{
  margin-top:2.1rem; max-width:440px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:end;
  column-gap:.6rem;
}
.hp-num{ font-family:'Caveat', cursive; font-size:1.1rem; color:var(--morado); padding-bottom:2px; }
.hp-text{ grid-column:1 / -1; margin-top:.55rem; }
.hp-track{
  display:block; position:relative; height:36px;
}
/* la rama: un trazo de lápiz, no una barra de progreso */
.hp-track::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--morado) 60%, transparent) 0 54px,
      color-mix(in srgb, var(--morado) 34%, transparent) 54px 78px);
  background-size:100% 3px;
  background-repeat:repeat-x;
  border-radius:2px;
  filter:url(#tzTexto);
}
.hp-bird{
  position:absolute; bottom:3px; left:3%; z-index:2;
  transition:left .14s linear, transform .4s ease;
  transform-origin:50% 100%;
}
.hp-bird-svg{
  width:32px; height:27px; display:block;
  fill:none; stroke:var(--morado); stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  filter:url(#tz1);
}
.hp-bird.crece-2{ transform:scale(1.2); }
.hp-bird.crece-3{ transform:scale(1.42); }
.hp-text{ font-size:.92rem; color:var(--morado); opacity:.85; font-weight:600; }

/* ---------- responsive ---------- */
@container tablero (max-width:860px){
  .hero{ grid-template-columns:1fr; text-align:center; min-height:auto; padding-bottom:1.2rem; }
  .hero-cta, .hero-progress{ justify-content:center; margin-left:auto; margin-right:auto; }
  .sobre-grid{ grid-template-columns:1fr; }
  .sobre-list li{ justify-content:flex-start; text-align:left; }
  .nav-links{ display:none; }
  .timeline{ max-width:100%; }
  .tl-item{ padding-left:80px; }
  .tl-line{ left:18px; }
  .mascot-svg{ width:min(230px, calc(64 * var(--vw))); }
  .carta{ padding:1.9rem 1.3rem 1.4rem; }
  .espiral, .page-note, .hp-text{ display:none; }
  .section, .hero{ padding-left:1.1rem; padding-right:1.1rem; }
}

/* ============================================================
   SECUENCIA DE APERTURA
   Arranca en el frame 1 de la 001 (los robots con la bolita).
   La BOLITA del dibujo es el botón de arranque (hotspot pequeño
   sobre la bolita real, encontrada en 47%,35% r≈17px).
   Al reproducirse, en el frame 96 (último) la esfera ha sacado
   5 esferas: ahí aparecen las bolitas de navegación.
   El clic en una bolita abre un PANEL de sección dentro de la
   apertura, siempre con vuelta al menú de bolitas.
   ============================================================ */
.apertura{
  position:fixed; inset:0; z-index:1900;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--hoja) 90%, transparent), transparent 65%),
    var(--papel);
  transition:opacity .9s ease, visibility .9s ease;
}
.apertura.oculto{ opacity:0; visibility:hidden; pointer-events:none; }

/* el video respira: ocupa casi toda la pantalla (vertical 834x1112) */
.apertura-video{
  position:relative;
  width:min(calc(92 * var(--vw)), calc(calc(92 * var(--vh)) * 0.75));
  aspect-ratio:834/1112;
  height:auto;
  cursor:default;
}
.apertura-video video{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; border-radius:4px;
  box-shadow:0 1px 0 color-mix(in srgb, var(--grafito) 12%, transparent),
             0 26px 60px -28px color-mix(in srgb, var(--grafito) 55%, transparent);
}

/* ---- la BOLITA de los robots: botón de arranque (pequeño, sobre la bolita real) ---- */
.esfera-clic{
  position:absolute; transform:translate(-50%,-50%);
  /* 11%: con 9% la bola quedaba timida al lado de los robots */
  width:11%; aspect-ratio:1; border:none; background:transparent; padding:0;
  cursor:pointer; touch-action:none;
}
.esfera-clic-anillo{
  position:absolute; inset:8%; border-radius:50%;
  border:2px dashed color-mix(in srgb, var(--azul-o) 70%, transparent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--hoja) 65%, transparent),
             inset 0 0 14px color-mix(in srgb, var(--azul) 30%, transparent);
  animation:pulsoEsfera 2.2s ease-in-out infinite;
  transition:opacity .4s;
}
.esfera-clic::after{ /* puntito central para saber que es la bolita */
  content:''; position:absolute; left:50%; top:50%; width:30%; height:30%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:color-mix(in srgb, var(--azul-o) 55%, transparent);
}
.esfera-clic:hover .esfera-clic-anillo{ animation-duration:1.1s; border-style:solid; }
.esfera-clic.drag{ cursor:grabbing; }
.esfera-clic.jugando{ opacity:0; pointer-events:none; }
.esfera-clic.oculto{ opacity:0; pointer-events:none; }
@keyframes pulsoEsfera{
  0%,100%{ transform:scale(1); opacity:.95; }
  50%{ transform:scale(1.16); opacity:.5; }
}

/* ---- las 5 bolitas de navegación (salen en el frame 96) ---- */
.punto, .punto:focus, .punto:focus-visible{ outline:none !important; border:0 !important; box-shadow:none !important; }
.apertura-puntos{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none;
  clip-path:inset(0); }
#trazosNavegacion{ clip-path:inset(0); }
.apertura-puntos.mostrar{ opacity:1; pointer-events:auto; }
.punto{
  position:absolute; transform:translate(-50%,-50%);
  width:13%; aspect-ratio:1; border-radius:50%; border:none; cursor:pointer;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c,var(--azul)) 88%, #fff), var(--c,var(--azul)) 68%);
  box-shadow:
    inset 0 -4px 8px color-mix(in srgb, var(--co,var(--azul-o)) 45%, transparent),
    inset 0 3px 5px color-mix(in srgb, #fff 55%, transparent),
    0 0 0 2px color-mix(in srgb, var(--hoja) 65%, transparent),
    0 0 0 3.4px color-mix(in srgb, var(--co,var(--azul-o)) 75%, transparent),
    0 8px 18px -8px color-mix(in srgb, var(--grafito) 55%, transparent);
  font-family:'Patrick Hand', cursive; color:#FFF;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform .18s, box-shadow .18s;
  animation:aparecePunto .55s cubic-bezier(.2,1.7,.4,1) both;
  touch-action:none;
}
.punto .punto-num{ font-size:clamp(.8rem, calc(2.6 * var(--vw)), 1.3rem); font-weight:800; line-height:1; text-shadow:0 1px 2px color-mix(in srgb, var(--co,var(--azul-o)) 60%, transparent); }
.punto .punto-txt{
  position:absolute; top:calc(100% + .4rem); left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:clamp(.72rem, calc(2 * var(--vw)), .95rem); line-height:1.05;
  color:var(--grafito); font-family:'Patrick Hand', cursive;
  text-shadow:0 1px 0 var(--hoja), 0 -1px 0 var(--hoja), 1px 0 0 var(--hoja), -1px 0 0 var(--hoja);
}
.punto:hover{ transform:translate(-50%,-50%) scale(1.12); }
.punto:active{ transform:translate(-50%,-50%) scale(.97); }
.punto.drag{ transform:translate(-50%,-50%) scale(1.1); cursor:grabbing; box-shadow:0 0 0 3px var(--hoja), 0 0 0 5px var(--morado), 0 12px 24px -10px var(--grafito); }
.punto.drag .punto-txt{ display:none; }
@keyframes aparecePunto{
  from{ transform:translate(-50%,-50%) scale(.15); opacity:0; }
}
.apertura-pista{ font-size:1.3rem; color:var(--morado); margin-top:1.4rem; min-height:1.6rem; text-align:center; }

/* ============================================================
   PANEL DE SECCIÓN (se abre sobre la apertura)
   Al tocar una bolita se abre la página del cuaderno con su
   animación, y siempre se puede volver al menú de bolitas.
   ============================================================ */
.panel-seccion{
  position:fixed; inset:0; z-index:1950;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--hoja) 90%, transparent), transparent 62%),
    var(--papel);
  opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s ease;
}
.panel-seccion.mostrar{ opacity:1; visibility:visible; }
.panel-cuaderno{
  position:relative; max-width:660px; width:min(calc(92 * var(--vw)), 660px); margin:0 1rem;
  max-height:calc(90 * var(--vh)); overflow-y:auto;
  background:color-mix(in srgb, var(--hoja) 84%, transparent);
  border-radius:6px; padding:3.2rem 2.4rem 2.4rem;
  box-shadow:0 1px 0 color-mix(in srgb, var(--grafito) 14%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--grafito) 40%, transparent);
}
.panel-cuaderno::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background-image:
    repeating-linear-gradient(43deg, rgba(138,101,22,.035) 0 1.4px, transparent 1.4px 8px),
    repeating-linear-gradient(49deg, rgba(147,67,15,.022) 0 1.1px, transparent 1.1px 11.4px);
}
.panel-cuaderno > *{ position:relative; z-index:1; }
.panel-volver{ margin-bottom:.6rem; }
.panel-tag{ display:inline-block; transform:rotate(-2deg); font-family:'Patrick Hand', cursive; font-size:.95rem; border-radius:11px; padding:.18rem .85rem; background:color-mix(in srgb, var(--lila) 24%, transparent); }
.panel-title{ font-family:'Patrick Hand', cursive; font-size:clamp(1.7rem, calc(5 * var(--vw)), 2.6rem); margin:.5rem 0 .9rem; color:var(--grafito); }
.panel-texto{ font-size:1.02rem; margin-bottom:1.2rem; max-width:34rem; }
.panel-anim video{ width:min(250px, calc(60 * var(--vw))); display:block; margin:0 auto; filter:drop-shadow(0 10px 16px color-mix(in srgb, var(--grafito) 22%, transparent)); }

/* ============================================================
   TRANSICIÓN ENTRE SECCIONES: LÁPICES DE COLORES
   Un barrido de bandas de colores cruza la pantalla: borra lo
   anterior y dibuja lo que viene. 9 bandas con su delay de lápiz.
   ============================================================ */
.lapiz-trans{
  position:fixed; inset:0; z-index:2100; pointer-events:none;
  opacity:0; visibility:hidden;
  background:color-mix(in srgb, var(--papel) 97%, #fff);
}
.lapiz-trans.show{ opacity:1; visibility:visible; }
.lt-bandas{ position:absolute; inset:0; overflow:hidden; }
.lt-banda{
  position:absolute; left:-18%; width:136%; height:13.5%;
  transform:rotate(-14deg);
  opacity:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.14);
  /* el rayado de lápiz: rayas inclinadas del color oscuro */
  background-image:repeating-linear-gradient(118deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px);
}
.lapiz-trans.show .lt-banda{
  animation:barridoLapiz .62s cubic-bezier(.3,.9,.35,1) both;
}
@keyframes barridoLapiz{
  0%{ transform:rotate(-14deg) translateX(-130%); opacity:0; }
  8%{ opacity:.92; }
  62%{ transform:rotate(-14deg) translateX(0); opacity:.92; }
  100%{ transform:rotate(-14deg) translateX(150%); opacity:0; }
}

/* las animaciones dentro de las secciones */
.anim-sec{ position:absolute; pointer-events:none; opacity:.9; z-index:0; }
.anim-sec.is-visible{ animation:flota 5s ease-in-out infinite; }
.anim-sobre{ width:min(210px,calc(40 * var(--vw))); left:3%; top:12%; transform:rotate(-6deg); }
.anim-hab{ width:min(230px,calc(42 * var(--vw))); right:2.5%; top:9%; transform:rotate(5deg); }
.anim-juego{ width:min(170px,calc(34 * var(--vw))); left:2.5%; top:10%; transform:rotate(-7deg); }
.anim-for{ width:min(190px,calc(36 * var(--vw))); left:2%; bottom:6%; transform:rotate(-4deg); }
.anim-rec{ width:min(200px,calc(38 * var(--vw))); right:2%; bottom:5%; transform:rotate(3deg); }
.anim-plan{ width:min(180px,calc(34 * var(--vw))); right:2.5%; top:10%; transform:rotate(4deg); }
.anim-quiz{ width:min(190px,calc(36 * var(--vw))); left:2.5%; bottom:8%; transform:rotate(-5deg); }
.anim-busco{ width:min(210px,calc(40 * var(--vw))); left:4%; top:14%; transform:rotate(-5deg); }
.anim-footer{ width:min(150px,calc(30 * var(--vw))); left:50%; transform:translateX(-50%) rotate(2deg); bottom:calc(100% - 40px); }

/* ---------- responsive ---------- */
@container tablero (max-width:860px){
  .anim-sobre{ left:auto; right:4%; width:min(150px,calc(34 * var(--vw))); top:8%; }
  .anim-hab{ right:auto; left:4%; width:min(150px,calc(34 * var(--vw))); }
  .anim-juego{ left:auto; right:4%; width:min(120px,calc(30 * var(--vw))); }
  .anim-for{ left:auto; right:4%; width:min(140px,calc(32 * var(--vw))); }
  .anim-rec{ right:auto; left:4%; width:min(140px,calc(32 * var(--vw))); }
  .anim-plan{ right:auto; left:4%; width:min(120px,calc(30 * var(--vw))); }
  .anim-quiz{ left:auto; right:4%; width:min(140px,calc(32 * var(--vw))); }
  .anim-busco{ left:auto; right:4%; width:min(150px,calc(34 * var(--vw))); }
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  html{ scroll-behavior:auto; }
  .confetti{ display:none !important; }
  .pop-target{ opacity:1; transform:none; }
}

/* ============================================================
   PORTADA NUEVA — papel, transparencias originales de Moho y tinta.
   El PNG alfa va sobre el folio; no hay caja de vídeo ni fondo negro.
   ============================================================ */
.apertura-legacy{ display:none !important; }
.apertura-cuaderno{
  /* abierto: el faldon del sangrado se pinta fuera del encuadre y la mesa
     (overflow de la ventana) es quien recorta en reposo */
  z-index:1900; overflow:visible; isolation:isolate;
  /* ancho para el faldon del sangrado, CERRADO por arriba y por abajo:
     el texto de la portada jamas pisa las hojas del tablero */
  clip-path:polygon(calc(-26 * var(--vw)) 0, calc(100% + calc(26 * var(--vw))) 0,
                    calc(100% + calc(26 * var(--vw))) 100%, calc(-26 * var(--vw)) 100%);
  background:
    radial-gradient(circle at 14% 15%, rgba(255,255,255,.42), transparent 18%),
    repeating-linear-gradient(0deg, rgba(75,42,21,.045) 0 1px, transparent 1px 5px),
    linear-gradient(125deg, #bca281, #d2bc9d 44%, #a88966);
}
.apertura-cuaderno::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.28; z-index:-1;
  background-image:radial-gradient(rgba(57,35,18,.72) .65px, transparent .8px);
  background-size:5px 5px; transform:rotate(-7deg);
}
.cuaderno-escena{ position:relative; width:min(calc(89 * var(--vw)), calc(calc(84 * var(--vh)) * .75)); aspect-ratio:834/1112; filter:drop-shadow(0 26px 28px rgba(47,28,16,.28)); }
/* BORRADO, no tapado: aquí estaba el cuaderno de dibujo técnico — la pauta
   azul, la línea roja del margen, el borde redondeado, los clips y el margen
   punteado. Eso es lo que se veía un instante al recargar: son degradados
   CSS, así que pintan al momento, mientras que el papel de verdad no aparece
   hasta que baja el JPEG. Tenerlo tapado por una regla de más abajo no vale;
   había que quitarlo. */
.folio-apertura{
  position:absolute; inset:0; overflow:hidden; isolation:isolate;
  background-color:#c9c4b6;   /* el tono del papel, para que el primer pintado
                                 ya sea papel y no otra cosa */
}
.folio-margen,
.clip{ display:none; }
.folio-kicker,.folio-nombre,.folio-nota{ position:absolute; z-index:6; margin:0; color:#203e60; mix-blend-mode:multiply; }
.folio-kicker{ top:4.6%; left:15%; font:700 clamp(.45rem,calc(1.15 * var(--vw)),.73rem)/1 'Nunito',sans-serif; letter-spacing:.2em; color:#bd5540; }
.folio-nombre{ top:7.2%; left:15%; font:700 clamp(1.05rem,calc(3 * var(--vw)),2.15rem)/.87 'Caveat',cursive; letter-spacing:-.045em; transform:rotate(-2.5deg); }
.folio-nota{ top:17%; left:15%; font:700 clamp(.7rem,calc(1.7 * var(--vw)),1.05rem)/.95 'Patrick Hand',cursive; color:#b34e3d; transform:rotate(-4deg); }
#canvasApertura{ position:absolute; inset:0; z-index:3; width:100%; height:100%; display:block; }
.esfera-real{ left:50.2%; top:35.1%; z-index:7; width:8.4%; }
.esfera-real::after{ display:none; }
.esfera-real .esfera-clic-anillo{ inset:-5%; border:1.6px dashed #b32229; box-shadow:0 0 0 3px rgba(246,237,216,.78), 0 0 16px rgba(185,30,36,.32); }
.esfera-clic-brillo{ position:absolute; inset:21%; border-radius:50%; background:radial-gradient(circle at 32% 26%, #fff 0 7%, #f48b82 9% 18%, #bc2027 58%, #59141a); box-shadow:inset -3px -4px 5px rgba(59,0,0,.38); }
.esfera-real:hover .esfera-clic-brillo{ transform:scale(1.08); }
.apertura-puntos{ z-index:7; }
.apertura-puntos .punto{ width:8.8%; min-width:0; background:radial-gradient(circle at 31% 26%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 68%); border:1px solid color-mix(in srgb, var(--co) 72%, #fff); box-shadow:inset -4px -5px 7px color-mix(in srgb, var(--co) 38%, transparent), 0 3px 0 color-mix(in srgb, var(--co) 44%, transparent), 0 7px 11px rgba(32,29,27,.19); }
.apertura-puntos .punto::before{ content:''; position:absolute; inset:-15%; border:1px dashed color-mix(in srgb, var(--co) 56%, transparent); border-radius:50%; transform:rotate(17deg); opacity:.7; }
.apertura-puntos .punto-num{ position:relative; z-index:1; font:800 clamp(.46rem,calc(1.5 * var(--vw)),.75rem)/1 'Nunito',sans-serif; color:#fff8e6; letter-spacing:-.07em; }
.apertura-puntos .punto-txt{ top:calc(100% + .55rem); font-size:clamp(.64rem,calc(1.55 * var(--vw)),.9rem); color:var(--co); font-weight:700; }
.punto-1{ left:31.5%; top:14.8%; }.punto-2{ left:40.5%; top:10.8%; }.punto-3{ left:50%; top:9.3%; }.punto-4{ left:59.5%; top:10.8%; }.punto-5{ left:68.5%; top:14.8%; }
.volver-portada{ position:absolute; z-index:9; left:14%; bottom:5.3%; border:0; border-bottom:1px solid #a8473b; background:transparent; color:#7d342e; padding:.1rem 0; font:700 clamp(.65rem,calc(1.6 * var(--vw)),.9rem)/1 'Patrick Hand',cursive; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(5px); transition:.25s ease; }
.volver-portada.visible{ opacity:1; pointer-events:auto; transform:none; }
.volver-portada:hover{ color:#253d60; border-color:#253d60; }
.apertura-cuaderno .apertura-pista{ position:absolute; z-index:8; bottom:5.1%; right:11%; margin:0; width:40%; min-height:0; color:#253d60; text-align:right; font-size:clamp(.75rem,calc(1.75 * var(--vw)),1.05rem); transform:rotate(1.5deg); }
@container tablero (max-width:600px){
  .cuaderno-escena{ width:min(calc(94 * var(--vw)), calc(calc(88 * var(--vh)) * .75)); }
  .folio-nombre{ font-size:clamp(1rem,calc(6 * var(--vw)),1.6rem); }
  .punto-1{ left:28%; top:17%; }.punto-2{ left:39%; top:12%; }.punto-3{ left:50%; top:10%; }.punto-4{ left:61%; top:12%; }.punto-5{ left:72%; top:17%; }
  .apertura-puntos .punto{ width:10.8%; }
  .apertura-cuaderno .apertura-pista{ bottom:4.2%; right:8%; width:49%; }
}

/* Replanteo de composición: la secuencia ya no vive en una postal vertical.
   La cámara usa el ancho completo y hace un travelling hacia la esfera. */
.apertura-cuaderno{ background:#ded7c9; }
.apertura-cuaderno::before{ opacity:.16; background-image:radial-gradient(rgba(36,43,52,.7) .55px, transparent .75px); background-size:6px 6px; }
.cuaderno-escena{ width:calc(100 * var(--vw)); height:calc(100 * var(--vh)); aspect-ratio:auto; filter:none; }
.folio-apertura{ border:0; border-radius:0; box-shadow:none; background:linear-gradient(104deg, #eee9dd 0%, #d9d1c2 46%, #ece7dc 100%); }
.folio-apertura::before{ opacity:.1; background:radial-gradient(rgba(55,43,32,.32) .45px, transparent .75px); background-size:5px 5px; }
.folio-apertura::after,.folio-margen,.clip,.folio-kicker,.folio-nombre,.folio-nota{ display:none; }
#canvasApertura{ width:calc(100 * var(--vw)); height:calc(100 * var(--vh)); }
.esfera-real{ left:50%; width:clamp(40px, calc(3.8 * var(--vw)), 68px); z-index:9; }
.esfera-real .esfera-clic-anillo{ border-color:#9f1723; box-shadow:0 0 0 4px rgba(238,233,222,.82), 0 0 0 9px rgba(159,23,35,.16); }
.apertura-puntos .punto{ width:clamp(26px, calc(2.25 * var(--vw)), 40px); border:1px solid rgba(35,42,50,.58); background:#e9e3d6; box-shadow:0 1px 0 rgba(255,255,255,.72), 0 4px 12px rgba(24,35,51,.18); }
.apertura-puntos .punto::before{ inset:4px; border:1px solid var(--c); opacity:.9; }
.apertura-puntos .punto-num{ color:#1d2630; font-size:clamp(.43rem,calc(.7 * var(--vw)),.62rem); letter-spacing:0; }
.apertura-puntos .punto-txt{ top:50%; left:calc(100% + .65rem); transform:translateY(-50%); font:700 clamp(.68rem,calc(1 * var(--vw)),.86rem)/1 'Nunito',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#202b35; text-shadow:none; opacity:0; transition:opacity .18s ease, transform .18s ease; }
.apertura-puntos .punto:hover .punto-txt,.apertura-puntos .punto:focus-visible .punto-txt{ opacity:1; transform:translate(4px,-50%); }
.apertura-puntos .punto:hover{ transform:translate(-50%,-50%) scale(1.08); }
.punto-1{ left:43%; top:12%; }.punto-2{ left:46.5%; top:8.7%; }.punto-3{ left:50%; top:7.3%; }.punto-4{ left:53.5%; top:8.7%; }.punto-5{ left:57%; top:12%; }
.volver-portada{ z-index:10; left:calc(4 * var(--vw)); bottom:calc(4.5 * var(--vh)); border:0; color:#202b35; font:700 .72rem/1 'Nunito',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.apertura-cuaderno .apertura-pista{ z-index:10; bottom:calc(4.5 * var(--vh)); right:calc(4 * var(--vw)); width:auto; color:#202b35; font:700 .72rem/1 'Nunito',sans-serif; letter-spacing:.14em; text-transform:uppercase; transform:none; }
@container tablero (max-width:600px){
  .punto-1{ left:35%; top:15%; }.punto-2{ left:42.5%; top:10.5%; }.punto-3{ left:50%; top:8%; }.punto-4{ left:57.5%; top:10.5%; }.punto-5{ left:65%; top:15%; }
  .apertura-puntos .punto-txt{ display:none; }
}

/* El cuaderno ocupa todo el escenario; la ilustración flota dentro sin
   convertirse en el propio viewport. Sólo papel, líneas y encuadernación. */
.apertura-cuaderno{
  background:
    linear-gradient(90deg, transparent 0 calc(8.5 * var(--vw)), rgba(185,62,54,.36) calc(8.55 * var(--vw)) calc(8.63 * var(--vw)), transparent calc(8.7 * var(--vw))),
    repeating-linear-gradient(0deg, transparent 0 calc(calc(7.1 * var(--vh)) - 1px), rgba(64,118,173,.19) calc(calc(7.1 * var(--vh)) - 1px) calc(7.1 * var(--vh))),
    linear-gradient(112deg, #f7f3e8 0%, #eee7d7 48%, #f5f0e4 100%);
}
.apertura-cuaderno::before{ inset:0; opacity:1; background:linear-gradient(90deg, rgba(42,30,21,.17), transparent 2.8%, transparent 97%, rgba(42,30,21,.08)); transform:none; }
.folio-apertura{ background:transparent; }
.folio-apertura::before{ display:none; }
.cuaderno-escena::before{
  content:''; position:absolute; z-index:7; left:calc(calc(8.6 * var(--vw)) - 17px); top:calc(3 * var(--vh)); bottom:calc(3 * var(--vh)); width:34px; pointer-events:none;
  background:none;
  filter:drop-shadow(1px 1px 0 rgba(40,30,20,.12));
}
.apertura-puntos .punto{
  width:clamp(19px,calc(1.45 * var(--vw)),26px); height:clamp(19px,calc(1.45 * var(--vw)),26px);
  background:rgba(248,245,237,.9); border:1px solid #273b50; border-radius:50%;
  box-shadow:0 1px 0 #fff, 0 3px 8px rgba(35,46,57,.15); transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.apertura-puntos .punto::before{ inset:5px; border:0; background:var(--c); border-radius:50%; opacity:.92; transform:none; }
.apertura-puntos .punto-num{ color:#273b50; font-size:0; }
.apertura-puntos .punto-txt{
  top:calc(100% + .5rem); left:50%; transform:translate(-50%,2px); opacity:0;
  font:700 clamp(.55rem,calc(.68 * var(--vw)),.72rem)/1 'Nunito',sans-serif; letter-spacing:.12em; color:#273b50; text-transform:uppercase; white-space:nowrap;
}
.apertura-puntos .punto:hover,.apertura-puntos .punto:focus-visible{ background:#fff; transform:translate(-50%,-50%) scale(1.24); box-shadow:0 0 0 4px rgba(39,59,80,.10), 0 6px 15px rgba(35,46,57,.22); }
.apertura-puntos .punto:hover .punto-txt,.apertura-puntos .punto:focus-visible .punto-txt{ opacity:1; transform:translate(-50%,5px); }
/* Las posiciones se calculan en JS desde la esfera del frame 96. */
.punto-1,.punto-2,.punto-3,.punto-4,.punto-5{ left:auto; top:auto; }
.apertura-cuaderno .apertura-pista{ color:#273b50; font-size:.64rem; letter-spacing:.18em; }
@container tablero (max-width:600px){
  .cuaderno-escena::before{ left:calc(calc(8.6 * var(--vw)) - 12px); width:24px; background-size:24px calc(8.2 * var(--vh)); }
  .apertura-puntos .punto{ width:23px; height:23px; }
}

/* Una línea de margen basta: sin perforaciones decorativas. Los accesos son
   trazos de cera, no objetos de interfaz puestos encima del dibujo. */
.cuaderno-escena::before{ display:none; }
.esfera-real{ width:clamp(34px,calc(2.7 * var(--vw)),49px); background:transparent; }
.esfera-real .esfera-clic-anillo{
  inset:-11%; border:2px solid rgba(130,45,41,.62); border-radius:48% 52% 51% 46%;
  box-shadow:none; animation:trazoEsfera 2.6s ease-in-out infinite;
}
.esfera-real .esfera-clic-anillo::after{ content:''; position:absolute; inset:-14%; border:1px dashed rgba(130,45,41,.34); border-radius:52% 45% 49% 55%; transform:rotate(19deg); }
.esfera-clic-brillo{ inset:16%; border:3px solid #9c413b; background:transparent; box-shadow:inset 0 0 0 1px rgba(249,232,213,.64); }
@keyframes trazoEsfera{ 0%,100%{ transform:rotate(-7deg) scale(1); } 50%{ transform:rotate(6deg) scale(1.06); } }
.apertura-puntos .punto{
  width:clamp(40px,calc(2.7 * var(--vw)),58px); height:28px; padding:0; overflow:visible;
  background:transparent; border:0; border-radius:0; box-shadow:none;
}
.apertura-puntos .punto::before{
  content:''; position:absolute; inset:6px 0 7px; border:0; border-radius:2px; opacity:.92;
  background:repeating-linear-gradient(-8deg, transparent 0 2px, color-mix(in srgb, var(--c) 84%, #fff) 2px 4px, var(--c) 4px 6px, transparent 6px 8px);
  transform:rotate(-2deg); filter:contrast(1.08);
}
.apertura-puntos .punto::after{ content:''; position:absolute; left:6%; right:8%; top:12px; height:5px; background:var(--c); opacity:.42; transform:rotate(3deg); filter:blur(.25px); }
.apertura-puntos .punto-num{ position:absolute; z-index:2; left:-.15rem; top:-.14rem; display:grid; place-items:center; width:1.2rem; height:1.2rem; border:1px solid #344455; border-radius:50%; background:#f5efe2; color:#344455; font:700 .51rem/1 'Nunito',sans-serif; letter-spacing:0; }
.apertura-puntos .punto-txt{
  display:block; top:calc(100% + .22rem); left:50%; opacity:1; transform:translateX(-50%); color:#344455;
  font:700 clamp(.54rem,calc(.7 * var(--vw)),.72rem)/1 'Caveat',cursive; letter-spacing:.02em; text-transform:none; white-space:nowrap;
}
.apertura-puntos .punto:hover,.apertura-puntos .punto:focus-visible{ background:transparent; transform:translate(-50%,-50%) rotate(-3deg) scale(1.1); box-shadow:none; }
.apertura-puntos .punto:hover::before,.apertura-puntos .punto:focus-visible::before{ filter:contrast(1.25) saturate(1.12); }
.apertura-puntos .punto:hover .punto-txt,.apertura-puntos .punto:focus-visible .punto-txt{ opacity:1; transform:translate(-50%,2px); }
.volver-portada{
  left:calc(50% - min(calc(13 * var(--vw)), 175px)); bottom:calc(9.5 * var(--vh)); padding:.25rem .15rem .35rem 1.5rem; border:0; color:#8d453d;
  font:700 clamp(.8rem,calc(1.25 * var(--vw)),1.05rem)/1 'Caveat',cursive; letter-spacing:.01em; text-transform:none;
}
.volver-portada::before{ content:'↶'; position:absolute; left:0; top:.05rem; font:1.35em/1 'Patrick Hand',cursive; transform:rotate(-16deg); }
.volver-portada::after{ content:''; position:absolute; left:1.35rem; right:.05rem; bottom:0; height:4px; opacity:.48; background:repeating-linear-gradient(-7deg, transparent 0 1px, #a65a4d 1px 2px, transparent 2px 4px); }
.volver-portada:hover{ color:#6f342f; border:0; transform:rotate(-2deg); }
@container tablero (max-width:600px){
  .apertura-puntos .punto{ width:50px; height:25px; }
  .apertura-puntos .punto-txt{ font-size:.62rem; }
  .volver-portada{ left:calc(10 * var(--vw)); bottom:calc(8 * var(--vh)); }
}

/* Dirección final: cuaderno técnico, grafito azul y cera. */
.apertura-cuaderno{
  background-color:#f5f1e7;
  background-image:
    linear-gradient(90deg, transparent 0 calc(9.25 * var(--vw)), rgba(126,91,137,.42) calc(9.3 * var(--vw)) calc(9.38 * var(--vw)), transparent calc(9.43 * var(--vw))),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(85,122,151,.075) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(85,122,151,.075) 7px 8px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(77,123,166,.11) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(77,123,166,.055) 47px 48px),
    linear-gradient(112deg, #faf7ee, #efe9dd 50%, #f8f4eb);
}
.apertura-cuaderno::before{ display:none; }
.folio-apertura::after{
  display:block; inset:calc(2.1 * var(--vw)); z-index:1; opacity:.55; border:1px solid rgba(74,113,149,.18); background:none;
  clip-path:polygon(0 0, 7% 0, 7% 1px, 93% 1px, 93% 0, 100% 0, 100% 8%, calc(100% - 1px) 8%, calc(100% - 1px) 92%, 100% 92%, 100% 100%, 93% 100%, 93% calc(100% - 1px), 7% calc(100% - 1px), 7% 100%, 0 100%, 0 92%, 1px 92%, 1px 8%, 0 8%);
}
.esfera-real{ width:clamp(37px,calc(2.9 * var(--vw)),52px); }
.esfera-real .esfera-clic-anillo{ border-color:rgba(138,55,48,.64); border-width:2.5px; animation:marcaViva 2.8s ease-in-out infinite; }
.esfera-real .esfera-clic-anillo::after{ border-color:rgba(138,55,48,.32); }
.esfera-clic-brillo{ inset:17%; border:3px solid #98453e; border-left-color:#bf6c57; border-bottom-color:#6e302d; box-shadow:none; }
.esfera-ayuda{
  position:absolute; left:calc(100% + .9rem); top:50%; width:max-content; transform:translateY(-50%); color:#5c6872;
  font:700 clamp(.62rem,calc(.78 * var(--vw)),.78rem)/1 'Nunito',sans-serif; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
}
.esfera-ayuda::before{ content:''; position:absolute; width:.62rem; border-top:1px solid #a65e53; right:calc(100% + .25rem); top:50%; }
@keyframes marcaViva{ 0%,100%{ transform:rotate(-5deg) scale(1); } 48%{ transform:rotate(4deg) scale(1.07); } 65%{ transform:rotate(-2deg) scale(1.03); } }

.apertura-puntos .punto{
  width:clamp(44px,calc(3.3 * var(--vw)),64px); height:34px; overflow:visible; background:none; border:0; border-radius:0; box-shadow:none;
  transform:translate(-50%,-50%) rotate(var(--giro, -2deg));
}
.trazos-navegacion{ position:absolute; inset:0; z-index:6; width:100%; height:100%; overflow:visible; pointer-events:none; opacity:0; transition:opacity .18s ease; }
.trazos-navegacion.mostrar{ opacity:1; }
.trazos-navegacion path{ fill:none; stroke-width:2.3; stroke-linecap:round; stroke-dasharray:1.2 5.3; stroke-dashoffset:88; opacity:.72; filter:url(#tz2); }
.trazos-navegacion.mostrar path{ animation:trazoUne .78s cubic-bezier(.25,.85,.25,1) forwards; }
.trazos-navegacion path:nth-child(2){ animation-delay:.08s; }.trazos-navegacion path:nth-child(3){ animation-delay:.15s; }.trazos-navegacion path:nth-child(4){ animation-delay:.22s; }.trazos-navegacion path:nth-child(5){ animation-delay:.29s; }
.trazo-nav-1{ stroke:#4c708e; }.trazo-nav-2{ stroke:#a55a4e; }.trazo-nav-3{ stroke:#758b68; }.trazo-nav-4{ stroke:#a58a48; }.trazo-nav-5{ stroke:#75608a; }
@keyframes trazoUne{ from{ stroke-dashoffset:88; opacity:0; } 35%{ opacity:.84; } to{ stroke-dashoffset:0; opacity:.52; } }
.apertura-puntos .punto::before{
  inset:8px 0 8px; border:0; border-radius:0; opacity:1; transform:rotate(-1deg); filter:url(#tz2);
  background:
    linear-gradient(5deg, transparent 0 23%, color-mix(in srgb, var(--c) 78%, #fff) 24% 39%, transparent 40% 48%, var(--c) 49% 67%, transparent 68% 76%, color-mix(in srgb, var(--c) 82%, #fff) 77% 91%, transparent 92%),
    repeating-linear-gradient(171deg, transparent 0 2px, color-mix(in srgb, var(--c) 88%, #fff) 2px 3px, transparent 3px 5px);
  clip-path:polygon(0 47%, 5% 28%, 17% 36%, 30% 18%, 44% 31%, 57% 15%, 68% 29%, 82% 20%, 100% 39%, 97% 63%, 83% 71%, 70% 64%, 55% 80%, 41% 68%, 26% 83%, 13% 66%, 0 74%);
}
.apertura-puntos .punto::after{ left:7%; right:6%; top:14px; height:5px; opacity:.38; background:var(--c); transform:rotate(4deg); filter:url(#tz1); }
.apertura-puntos .punto-num{
  left:-.38rem; top:-.28rem; width:1.34rem; height:1.34rem; border:1px solid rgba(45,65,81,.68); border-radius:2px; background:#f7f2e7; color:#31495d;
  font:800 .53rem/1 'Nunito',sans-serif; transform:rotate(-7deg);
}
.apertura-puntos .punto-txt{
  top:calc(100% + .16rem); color:#31495d; opacity:1; transform:translateX(-50%); text-shadow:0 1px #fff;
  font:800 clamp(.56rem,calc(.73 * var(--vw)),.76rem)/1 'Nunito',sans-serif; letter-spacing:.08em; text-transform:uppercase;
}
.punto-1{ --giro:-7deg; }.punto-2{ --giro:3deg; }.punto-3{ --giro:-2deg; }.punto-4{ --giro:5deg; }.punto-5{ --giro:-5deg; }
.apertura-puntos.mostrar .punto{ animation:crayonEntra .62s cubic-bezier(.25,.9,.24,1.35) both; }
.apertura-puntos.mostrar .punto::before{ animation:crayonDibuja .54s cubic-bezier(.35,.9,.2,1) both; }
.apertura-puntos .punto:hover,.apertura-puntos .punto:focus-visible{ background:none; transform:translate(-50%,-50%) rotate(var(--giro)) scale(1.13); box-shadow:none; }
.apertura-puntos .punto:hover .punto-txt,.apertura-puntos .punto:focus-visible .punto-txt{ opacity:1; transform:translate(-50%,1px); color:#1d3549; }
@keyframes crayonEntra{ from{ opacity:0; transform:translate(-50%,-50%) rotate(var(--giro)) scale(.72); } to{ opacity:1; transform:translate(-50%,-50%) rotate(var(--giro)) scale(1); } }
@keyframes crayonDibuja{ from{ clip-path:inset(0 100% 0 0); opacity:0; } to{ clip-path:inset(0 0 0 0); opacity:1; } }

.volver-portada{
  left:50%; bottom:calc(7.7 * var(--vh)); padding:.65rem 1rem .6rem .82rem; border:1px solid rgba(63,89,111,.45); border-radius:3px; color:#31495d; background:rgba(250,247,238,.65);
  font:800 clamp(.68rem,calc(.85 * var(--vw)),.84rem)/1 'Nunito',sans-serif; letter-spacing:.1em; text-transform:uppercase; transform:translateX(-50%) rotate(-1deg);
  box-shadow:3px 3px 0 rgba(90,121,145,.12);
}
.volver-portada span{ display:inline-grid; place-items:center; width:1.2rem; height:1.2rem; margin-right:.36rem; border:1px solid #9b5146; border-radius:50%; color:#9b5146; font-size:.92rem; vertical-align:middle; }
.volver-portada::before,.volver-portada::after{ display:none; }
.volver-portada:hover{ color:#243d51; border-color:#31495d; background:#fffdf7; transform:translateX(-50%) rotate(1deg) translateY(-2px); }
.apertura-cuaderno .apertura-pista{ right:calc(3.2 * var(--vw)); bottom:calc(3.1 * var(--vh)); color:#587086; font:800 .58rem/1 'Nunito',sans-serif; letter-spacing:.15em; }
@container tablero (max-width:600px){
  .apertura-cuaderno{ background-image:linear-gradient(90deg, transparent 0 calc(8 * var(--vw)), rgba(126,91,137,.36) calc(8.08 * var(--vw)) calc(8.18 * var(--vw)), transparent calc(8.25 * var(--vw))), repeating-linear-gradient(0deg, transparent 0 6px, rgba(85,122,151,.06) 6px 7px), repeating-linear-gradient(90deg, transparent 0 6px, rgba(85,122,151,.06) 6px 7px), repeating-linear-gradient(0deg, transparent 0 40px, rgba(77,123,166,.1) 40px 41px), linear-gradient(112deg, #faf7ee, #efe9dd); }
  .esfera-ayuda{ left:50%; top:calc(100% + .95rem); transform:translateX(-50%); font-size:.56rem; }.esfera-ayuda::before{ display:none; }
  .apertura-puntos .punto{ width:52px; height:31px; }.apertura-puntos .punto-txt{ font-size:.51rem; letter-spacing:.035em; }
  .volver-portada{ bottom:calc(6.5 * var(--vh)); width:max-content; }
}

/* Menú orgánico: cinco huellas de cera, sin números ni símbolos. */
.apertura-puntos .punto{
  width:clamp(30px,calc(2.25 * var(--vw)),40px); height:clamp(30px,calc(2.25 * var(--vw)),40px); transform:translate(-50%,-50%) rotate(var(--giro));
}
.apertura-puntos .punto-num{ display:none; }
.apertura-puntos .punto::before{
  inset:2px; opacity:.92; border:2px solid var(--c); border-radius:50% 44% 53% 46% / 42% 55% 45% 57%;
  background:
    repeating-linear-gradient(31deg, transparent 0 2px, color-mix(in srgb, var(--c) 54%, #f8f4eb) 2px 3.8px, transparent 3.8px 6px),
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.62) 0 8%, transparent 9%), color-mix(in srgb, var(--c) 28%, #f6f1e7);
  clip-path:none; transform:rotate(-9deg); filter:url(#tz2);
}
.apertura-puntos .punto::after{
  left:5px; right:2px; top:7px; height:19px; opacity:.44; background:transparent; border:1px solid var(--c); border-left-width:2px; border-radius:49% 56% 44% 52%; transform:rotate(12deg); filter:url(#tz1);
}
.apertura-puntos .punto-txt{
  top:calc(100% + .35rem); color:#3e5668; font:700 clamp(.7rem,calc(.95 * var(--vw)),.92rem)/1 'Patrick Hand',cursive; letter-spacing:.01em; text-transform:none;
}
.punto-1 .punto-txt{ left:0; transform:translateX(-22%); }.punto-2 .punto-txt{ left:100%; transform:translateX(-47%); }.punto-3 .punto-txt{ left:50%; }.punto-4 .punto-txt{ left:0; transform:translateX(-15%); }.punto-5 .punto-txt{ left:100%; transform:translateX(-78%); }
.apertura-puntos .punto:hover,.apertura-puntos .punto:focus-visible{ transform:translate(-50%,-50%) rotate(var(--giro)) scale(1.19); }
.apertura-puntos .punto:hover .punto-txt,.apertura-puntos .punto:focus-visible .punto-txt{ transform:translateX(-50%) translateY(2px); }
.punto-1{ --giro:-13deg; }.punto-2{ --giro:8deg; }.punto-3{ --giro:-5deg; }.punto-4{ --giro:11deg; }.punto-5{ --giro:-10deg; }
.trazos-navegacion path{ stroke-width:2.9; stroke-dasharray:1.1 6.8; opacity:.58; }
.volver-portada{
  padding:.25rem .1rem .45rem; border:0; border-radius:0; background:transparent; box-shadow:none; color:#72566f;
  font:700 clamp(.85rem,calc(1.15 * var(--vw)),1.08rem)/1 'Patrick Hand',cursive; letter-spacing:.01em; text-transform:none;
}
.volver-portada::after{ display:block; content:''; left:0; right:0; bottom:0; height:5px; opacity:.55; background:repeating-linear-gradient(-5deg, transparent 0 1px, #89677f 1px 2px, transparent 2px 4px); }
.volver-portada:hover{ color:#503a56; background:transparent; border:0; box-shadow:none; transform:translateX(-50%) rotate(-2deg) translateY(-1px); }
@container tablero (max-width:600px){ .apertura-puntos .punto{ width:32px; height:32px; }.apertura-puntos .punto-txt{ font-size:.7rem; } }

/* Índice editorial: lectura inmediata, un solo material y ninguna decoración infantil. */
.trazos-navegacion path{ stroke:#657786; stroke-width:1.35; stroke-dasharray:2.2 5.5; opacity:.48; filter:none; }
.apertura-puntos .punto{
  width:18px; height:18px; background:#f6f2e8; border:1px solid #506575; border-radius:50%; box-shadow:0 1px 0 rgba(255,255,255,.9); transform:translate(-50%,-50%);
}
.apertura-puntos .punto::before{
  content:''; inset:4px; border:1px solid #637887; border-radius:47% 53% 51% 46%; background:transparent; clip-path:none; transform:rotate(-12deg); filter:none;
}
.apertura-puntos .punto::after{ content:''; left:6px; right:auto; top:6px; width:4px; height:4px; border:0; border-radius:50%; background:#6d8290; opacity:1; transform:none; filter:none; }
.apertura-puntos .punto-txt{
  top:50%; left:calc(100% + .65rem); transform:translateY(-50%); color:#344b5b; opacity:1; text-shadow:none; white-space:nowrap;
  font:700 clamp(.62rem,calc(.75 * var(--vw)),.8rem)/1 'Nunito',sans-serif; letter-spacing:.075em; text-transform:uppercase;
}
.punto-1 .punto-txt,.punto-2 .punto-txt,.punto-3 .punto-txt,.punto-4 .punto-txt,.punto-5 .punto-txt{ left:calc(100% + .65rem); transform:translateY(-50%); }
.punto-1 .punto-txt,.punto-2 .punto-txt{ left:auto; right:calc(100% + .65rem); transform:translateY(-50%); text-align:right; }
.punto-3 .punto-txt{ left:50%; right:auto; top:calc(100% + .62rem); transform:translateX(-50%); }
.apertura-puntos .punto:hover,.apertura-puntos .punto:focus-visible{ background:#fffdf8; transform:translate(-50%,-50%) scale(1.22); box-shadow:0 0 0 5px rgba(80,101,117,.11); }
.apertura-puntos .punto:hover::before,.apertura-puntos .punto:focus-visible::before{ border-color:#2f4d61; }
.apertura-puntos .punto:hover .punto-txt,.apertura-puntos .punto:focus-visible .punto-txt{ color:#203d52; opacity:1; transform:translateY(-50%); }
.punto-3:hover .punto-txt,.punto-3:focus-visible .punto-txt{ transform:translateX(-50%); }
.apertura-puntos.mostrar .punto{ animation:indiceEntra .38s ease-out both; }
.apertura-puntos.mostrar .punto::before{ animation:none; }
@keyframes indiceEntra{ from{ opacity:0; transform:translate(-50%,-50%) scale(.4); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
.volver-portada{
  bottom:calc(6.6 * var(--vh)); padding:0 0 .38rem; color:#506575; background:transparent; border:0; border-bottom:1px solid rgba(80,101,117,.42); border-radius:0; box-shadow:none;
  font:700 clamp(.65rem,calc(.76 * var(--vw)),.78rem)/1 'Nunito',sans-serif; letter-spacing:.12em; text-transform:uppercase; transform:translateX(-50%);
}
.volver-portada::after{ display:none; }.volver-portada:hover{ color:#263f50; border-color:#263f50; transform:translateX(-50%) translateY(-1px); }
@container tablero (max-width:600px){
  .apertura-puntos .punto{ width:17px; height:17px; }.apertura-puntos .punto-txt{ font-size:.56rem; letter-spacing:.035em; }
  .punto-1 .punto-txt,.punto-2 .punto-txt{ right:calc(100% + .4rem); }.apertura-puntos .punto-txt{ left:calc(100% + .4rem); }
}

/* Las marcas permanecen junto a la esfera; el índice se convierte en el lugar
   legible de la elección. Misma materia: líneas de lápiz y cera apagada. */
.apertura-puntos .punto{ width:15px; height:15px; border:0; background:transparent; box-shadow:none; }
.apertura-puntos .punto::before{ inset:0; border:2px solid var(--c); border-radius:50% 43% 54% 46%; background:color-mix(in srgb, var(--c) 19%, transparent); filter:url(#tz2); }
.apertura-puntos .punto::after{ left:3px; top:3px; width:7px; height:7px; border:0; border-radius:50%; background:var(--c); opacity:.78; filter:url(#tz1); }
.apertura-puntos .punto-txt{ display:none; }
.apertura-puntos .punto:hover,.apertura-puntos .punto:focus-visible{ background:transparent; box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 16%, transparent); transform:translate(-50%,-50%) scale(1.4); }
.trazos-navegacion path{ stroke-width:2; stroke-dasharray:1.3 5.6; opacity:.64; filter:url(#tz2); }
.trazo-nav-1{ stroke:#4c708e; }.trazo-nav-2{ stroke:#a55a4e; }.trazo-nav-3{ stroke:#758b68; }.trazo-nav-4{ stroke:#a58a48; }.trazo-nav-5{ stroke:#75608a; }

.indice-rutas{
  position:absolute; z-index:9; left:calc(50% + min(calc(27 * var(--vw)), 345px)); top:34%; width:min(calc(16 * var(--vw)), 238px); min-width:165px;
  display:flex; flex-direction:column; align-items:stretch; gap:.8rem; padding:0 0 0 1.15rem; opacity:0; pointer-events:none; transform:translateX(12px); transition:opacity .28s ease, transform .4s cubic-bezier(.2,.8,.25,1);
}
.indice-rutas::before{ content:''; position:absolute; left:0; top:.35rem; bottom:.15rem; border-left:1px solid rgba(70,99,124,.4); }
.indice-rutas.mostrar{ opacity:1; pointer-events:auto; transform:none; }
.indice-rutas-titulo{ margin:0 0 .3rem; color:#6e7e8c; font:700 .58rem/1 'Nunito',sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.indice-rutas button{
  position:relative; display:block; width:max-content; max-width:100%; border:0; background:transparent; padding:.12rem 0 .22rem .45rem; color:#30495d; text-align:left; cursor:pointer;
  font:700 clamp(.73rem,calc(.92 * var(--vw)),.94rem)/1 'Nunito',sans-serif; letter-spacing:.02em;
}
.indice-rutas button::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; opacity:.68; transform:scaleX(.42); transform-origin:left; transition:transform .28s ease; filter:url(#tz1); background:repeating-linear-gradient(-7deg, transparent 0 1px, var(--c) 1px 2.5px, transparent 2.5px 4px); }
.indice-rutas button::after{ content:''; position:absolute; left:-1.2rem; top:50%; width:.47rem; height:.47rem; border:1px solid var(--c); border-radius:50% 43% 55% 46%; transform:translateY(-50%) rotate(-12deg); }
.indice-rutas button:hover,.indice-rutas button:focus-visible{ color:#172f43; outline:none; }
.indice-rutas button:hover::before,.indice-rutas button:focus-visible::before{ transform:scaleX(1); }
.indice-rutas button:hover::after,.indice-rutas button:focus-visible::after{ background:var(--c); }
@container tablero (max-width:900px){
  .indice-rutas{ left:50%; top:auto; bottom:calc(13 * var(--vh)); width:min(calc(84 * var(--vw)), 460px); min-width:0; display:grid; grid-template-columns:repeat(5,auto); gap:.55rem 1rem; padding:0; transform:translate(-50%,12px); }
  .indice-rutas::before{ display:none; }.indice-rutas.mostrar{ transform:translateX(-50%); }.indice-rutas-titulo{ grid-column:1 / -1; text-align:center; }.indice-rutas button{ font-size:.66rem; white-space:nowrap; }
  .indice-rutas button::after{ display:none; }.volver-portada{ bottom:calc(5 * var(--vh)); }
}

/* ============================================================
   LA ESFERA, VERSIÓN LÁPIZ  (última capa: manda sobre lo anterior)
   ------------------------------------------------------------
   Antes: un anillo rojo vectorial perfecto que al pulsarlo se
   escondía (.oculto) y no volvía hasta rebobinar. Ahora:
     · Va dibujada a lápiz, con los CINCO colores de las secciones
       dentro. Cuando al final se descompone, las cinco órbitas
       que salen ya estaban ahí: no aparecen de la nada.
     · ORBITA sobre los dedos en vez de esperar quieta.
     · NO desaparece al pulsarla: sigue en cuadro toda la
       animación y al final se lanza al aire.
   ============================================================ */

.esfera-clic.esfera-lapiz{
  /* mas grande: con el tope en 78px la bola quedaba timida al lado
     de los robots (pedido: que resalte) */
  width:clamp(56px, calc(6.6 * var(--vw)), 96px);
  aspect-ratio:1;
  background:none; border:0; padding:0;
  transform:translate(-50%,-50%);
  cursor:pointer;
  opacity:1 !important;            /* mata el .jugando/.oculto heredado */
  visibility:visible !important;
  /* IMPRESCINDIBLE: el #canvasApertura va con z-index:3. Sin esto la
     esfera queda DEBAJO y el canvas se traga todos los clics — el botón
     se ve perfectamente pero no responde. */
  z-index:6;
}
/* La versión vieja pintaba un "puntito central" con .esfera-clic::after.
   Seguía activo y se veía como un disco azul de 20 px en mitad de los
   rayajos. Fuera los dos pseudo-elementos heredados. */
.esfera-clic.esfera-lapiz::before,
.esfera-clic.esfera-lapiz::after{ content:none !important; display:none !important; }
.esfera-lapiz .esfera-cuerpo{
  position:absolute; inset:0; width:100%; height:100%;
  display:block;
  image-rendering:auto;
  /* La órbita ya NO es un @keyframes. Una elipse con ease-in-out se
     mueve como una máquina: repite exactamente igual cada vuelta. Ahora
     la calcula el JS sumando tres senos de periodos que no encajan entre
     sí, así que nunca repite el mismo recorrido. */
}
/* el aro de órbita, a trazo discontinuo y escorado. Ceñido a la bola:
   con inset -34% quedaba un círculo enorme y vacío alrededor. */
.esfera-lapiz .esfera-orbita{
  position:absolute; inset:-13% -5%;
  border:1.4px dashed rgba(63,74,60,.3);
  border-radius:50%;
  transform:rotate(-18deg);
  animation:aroOrbita 9s linear infinite;
  pointer-events:none;
  filter:url(#tz2);
}
@keyframes aroOrbita{ to{ transform:rotate(342deg); } }

.esfera-lapiz .esfera-ayuda{
  position:absolute; left:calc(100% + .5rem); top:50%; transform:translateY(-50%);
  white-space:nowrap; font:700 clamp(.6rem,calc(.9 * var(--vw)),.76rem)/1 'Nunito',sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:#5c5346;
  opacity:.72; transition:opacity .2s ease, transform .2s ease;
}
.esfera-lapiz:hover .esfera-ayuda{ opacity:1; transform:translate(3px,-50%); }
.esfera-lapiz:focus-visible{ outline:2px solid #a55a4e; outline-offset:6px; border-radius:50%; }

/* mientras corre la animación sigue ahí, pero sin el cartelito */
.esfera-lapiz.viaja{ pointer-events:none; }
.esfera-lapiz.viaja .esfera-ayuda{ opacity:0; }

/* Al final la lanza al aire y SE QUEDA ARRIBA. No se desvanece: sube,
   rebota un poco al llegar y allí se queda orbitando, que es de donde
   salen las cinco rutas. Antes terminaba en opacity:0 y desaparecía. */
.esfera-lapiz.lanzada{ pointer-events:none; animation:lanzaEsfera 1.1s cubic-bezier(.25,-0.4,.35,1) forwards; }
@keyframes lanzaEsfera{
  0%   { transform:translate(-50%,-50%)  scale(1);   opacity:1; }
  60%  { transform:translate(-50%,-330%) scale(1.1); opacity:1; }
  78%  { transform:translate(-50%,-290%) scale(.98); opacity:1; }
  100% { transform:translate(-50%,-310%) scale(1);   opacity:1; }
}

/* ---- las cinco secciones: mini-órbitas, no botones quietos ---- */
.apertura-puntos.mostrar .punto{ animation:miniOrbita 5.2s ease-in-out infinite; }
.apertura-puntos.mostrar .punto:nth-child(2){ animation-duration:5.9s; animation-delay:-1.1s; }
.apertura-puntos.mostrar .punto:nth-child(3){ animation-duration:4.7s; animation-delay:-2.3s; }
.apertura-puntos.mostrar .punto:nth-child(4){ animation-duration:6.3s; animation-delay:-0.6s; }
.apertura-puntos.mostrar .punto:nth-child(5){ animation-duration:5.4s; animation-delay:-3.1s; }
@keyframes miniOrbita{
  0%   { transform:translate(-50%,-50%) translate(0,0); }
  25%  { transform:translate(-50%,-50%) translate(4px,-5px); }
  50%  { transform:translate(-50%,-50%) translate(0,-7px); }
  75%  { transform:translate(-50%,-50%) translate(-4px,-5px); }
  100% { transform:translate(-50%,-50%) translate(0,0); }
}
/* el hover manda sobre la órbita, si no no se nota que responde */
.apertura-puntos.mostrar .punto:hover,
.apertura-puntos.mostrar .punto:focus-visible{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .esfera-lapiz .esfera-orbita,
  .apertura-puntos.mostrar .punto{ animation:none !important; }
  .esfera-lapiz .esfera-cuerpo{ transform:none !important; }
  .esfera-lapiz.lanzada{ animation:none !important; }
}


/* ============================================================================
   EL CUADERNO — SISTEMA ÚNICO
   ----------------------------------------------------------------------------
   Esto sustituye a diez bloques que había ido pegando uno detrás de otro, cada
   uno pisando al anterior. De ahí venían las líneas que se alargaban sin
   sentido, las texturas que no aparecían y que el índice no pegara con las
   secciones. Un solo sistema, un solo sitio.

   PALETA, medida sobre los fotogramas de referencia y no inventada:
   el papel NO es beige ni crema. Es un hueso desaturado, casi gris. Lo cálido
   viene de la LUZ que le cae encima, no del papel. Yo había puesto un beige
   amarillo (#ddd0b2) que no sale por ningún lado.
   ============================================================================ */

:root{
  --pap:        #d9d5c9;   /* hueso desaturado: el papel */
  --pap-claro:  #e6e2d6;   /* recortes pegados encima */
  --pap-oscuro: #c6c1b2;   /* la hoja de debajo */
  --tinta:      #14120f;   /* negro de imprenta */
  --tinta-flo:  rgba(20,18,15,.62);
  --rojo:       #9e2b21;   /* el único color, y con cuentagotas */
  --mesa:       #14100b;
}

/* ---------- la mesa y la cámara ---------- */
/* LA MESA MIDE SIEMPRE LO MISMO Y SE ENCAJA CON UN ZOOM.
   El tamaño sale de `--ref-w/--ref-h`, que son fijos: a pantalla completa en
   el monitor del usuario el zoom vale 1 y se ve EXACTAMENTE igual que antes.
   Al reescalar, la mesa no cambia — cambia `--enc` y el conjunto se ve más
   pequeño sin recolocar ni un elemento. */
.mesa{
  position:fixed; left:50%; top:50%; overflow:hidden;
  width:var(--ref-w); height:var(--ref-h);
  /* LA MESA ES EL CONTENEDOR CONTRA EL QUE SE MIDEN LOS PUNTOS DE RUPTURA.
     El tablero se maqueta siempre a 3440x1305 y se encoge con un zoom: esa es
     toda la responsividad, «lo mismo mas pequeño». Pero una `@media` no mira
     las unidades congeladas, mira la ventana de verdad: con la ventana a
     1039x1220 entraban siete bloques de `max-aspect-ratio:1/1` y los de
     `max-width`, y el tablero se recomponia entero — el lienzo de la portada
     pasaba de 1926x900 a 2890x574, la esfera se corria treinta pixeles y los
     hilos dejaban de apuntar a su palabra. Eso era lo que se veia mal al
     reescalar.
     Declarando la mesa como contenedor, esos bloques pasan a ser `@container`
     y miden LA MESA, que mide siempre lo mismo. Se eligio esto y no una clase
     en el <html> porque `@container` no toca los selectores: la especificidad
     y el orden de la cascada se quedan exactamente como estaban (probado: con
     clases, la portada se descuadraba). */
  container-type:size; container-name:tablero;
  transform:translate(-50%,-50%) scale(var(--enc,1));
  transform-origin:50% 50%;
  /* NADA DE `perspective` AQUI.
     `perspective` en un elemento convierte en TRIDIMENSIONAL cualquier
     transformacion de sus hijos. Y el tablero entero cuelga de aqui: `#lienzo`
     y `.folio-apertura` pasaban a tener motivo de composicion propio
     (`Trivial3DTransform`), y de ahi arrancaba la cascada — de las 103 capas
     de la pagina, las demas dicen `Overlap`, que no es un motivo: es que estan
     encima de una que si lo tiene.
     Medido en el camino de pintado sin tarjeta grafica, dos veces:
       con perspectiva   33 ms  (30 fps)
       sin perspectiva   28 ms  (36 fps)
     Y no hace falta para nada: la unica regla con giro de verdad —el pase de
     hoja de `[data-modo="pagina"]`— lleva su propio `perspective(2600px)` en
     la transformacion desde que se quito el `preserve-3d`. Ningun otro
     elemento del tablero usa 3D (comprobado recorriendo la pagina entera:
     el unico que salia con perspectiva era esta misma regla). */
  background:radial-gradient(65% 55% at 45% 32%, #2a2118, var(--mesa) 72%);
}
html, body{ background:var(--mesa); }
.mesa::after{ position:absolute; }
/* caída de luz sobre TODO: es lo que hace que parezca filmado */
.mesa::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:
    radial-gradient(78% 68% at 38% 30%, rgba(255,246,226,.16), transparent 60%),
    radial-gradient(100% 92% at 44% 40%, transparent 26%, rgba(6,4,2,.72) 100%);
}

/* NADA DE `preserve-3d` AQUI, Y ESTE ES EL MOTIVO.
   Preguntado al navegador (LayerTree.compositingReasons), el reparto de la
   superficie compuesta salia asi:

     166,1 Mpx  x38  Transform3DSceneLeaf   <- esto
      60,9 Mpx  x39  Trivial3DTransform
      59,0 Mpx  x57  Canvas

   `Transform3DSceneLeaf` significa: «esto es una hoja de una escena 3D». En
   cuanto un contenedor lleva `transform-style:preserve-3d`, sus descendientes
   dejan de poder aplanarse juntos —el navegador tiene que poder ordenarlos por
   profundidad— y CADA UNO se convierte en un mapa de bits propio que hay que
   mezclar aparte. Treinta y ocho capas y 166 megapixeles, el mayor gasto de la
   pagina con diferencia. Con la GPU se nota poco; sin ella lo mezcla la CPU
   pixel a pixel, y de ahi los trompicones.

   Y no hacia falta NINGUNA escena 3D: las cinco secciones son todas
   `modo:'zona'` (la camara viaja, no gira nada), y la unica regla con giro de
   verdad —el pase de hoja de `[data-modo="pagina"]`— no la usa nadie. Esa
   lleva ahora su propio `perspective()` en la transformacion, asi que si algun
   dia se enciende funciona igual sin obligar a todo el tablero a ser 3D. */
.lienzo{
  position:absolute; inset:0;
  /* el scale(--cz) es para el MODO LIBRE (libre.js). Sin --cz vale 1, o sea
     que la cámara se comporta exactamente igual que antes de existir. */
  /* `translate(x,y)` Y NO `translate3d(x,y,0)`. Con el cero detras el navegador
     lo cuenta como transformacion TRIDIMENSIONAL y le reserva capa propia — y
     como de este elemento cuelga el tablero entero, esa capa es la semilla de
     la cascada: de las 103 capas de la pagina, las demas dicen `Overlap`, que
     no es un motivo propio sino «estoy encima de una que si lo tiene».
     El `3d` se ponia para «acelerar por GPU». En una maquina que compone por
     software eso no acelera nada: solo añade capas que hay que mezclar a mano.
     Sin la z, misma posicion exacta y sin capa. (Es la misma leccion que ya
     estaba apuntada quince lineas mas abajo para `.hoja-pag`; aqui se quedo
     sin aplicar.) */
  transform:translate(calc(var(--cx,0) * -100%), calc(var(--cy,0) * -100%))
            scale(var(--cz, 1));
  transition:transform .95s cubic-bezier(.62,.03,.2,1);
}
/* EL AVISO DE `will-change`, SOLO MIENTRAS VIAJA.
   Fijo costaba la MITAD del fotograma. Medido con el pintor por software, con
   todo lo demas ya arreglado y la pagina en reposo:

     con `will-change:transform` fijo   101,8 ms por fotograma
     sin el                              51,8 ms

   Y no es solo que le reserve capa al lienzo. `will-change:transform` le dice
   al navegador «esto se va a mover», y a partir de ahi TODO lo que podria
   quedar por encima mientras se mueve se lleva capa tambien, por si acaso:
   las zonas, las hojas sueltas, las fotos. Cuarenta y nueve capas promovidas
   por solapamiento, ciento diez megapixeles.
   El aviso hace falta durante el viaje, que dura 0,95 s, y ahi si sirve para
   lo que dice. En reposo —o sea, casi siempre— sobra. */
.lienzo.viajando{ will-change:transform; }

/* LA MESA, MIENTRAS SE ARRASTRA EL BORDE DE LA VENTANA.
   Lo pone y lo quita el guion de la cabecera. Cambiar `--enc` cambia la
   escala, y cambiar la escala obliga a rasterizar el tablero entero otra vez:
   medido con el pintor por software, arrastrar el borde por veinte tamaños
   costaba 58 segundos, con un fotograma de 9,2 s. Con esto la escala de
   rasterizado se queda fija y el cambio de tamaño es un estirado de lo ya
   pintado; al soltar se quita y se rasteriza una vez, nitido. */
.mesa.enc-moviendo{ will-change:transform; }
/* `translate(x,y)` y no `translate3d(x,y,0)`: con el 0 detras el navegador lo
   cuenta igualmente como transformacion 3D (`Trivial3DTransform`) y le reserva
   capa propia a cada hoja. El `3d` se ponia para «acelerar por GPU», pero en
   una maquina que compone por software es justo lo contrario: mas capas que
   mezclar a mano. Sin la z, misma posicion exacta y sin capa. */
.hoja-pag{
  position:absolute; left:0; top:0; width:100%; height:100%;
  transform:translate(calc(var(--px,0) * 100%), calc(var(--py,0) * 100%));
}
#apertura.hoja-pag{ position:absolute; inset:auto; transition:none; opacity:1 !important; }

/* ============================================================================
   EL PAPEL — el mismo para el índice y para las secciones
   Antes solo lo tenían las secciones, y por eso parecían dos webs distintas.
   ============================================================================ */
.hoja-pag .folio-apertura,
.pagina-seccion .hoja-cara{
  /* Los cinco degradados que había aquí eran el papel falso de antes. Igual
     que la pauta de la portada: pintan al instante y por eso se veían un
     momento al recargar. Sólo el color de fondo, que es el del papel. */
  background-color:#b6b0a0;
  color:var(--tinta);
}
/* fibra: ruido fino en multiply. Sin esto es un degradado, no papel. */
.hoja-pag .folio-apertura::before,
.pagina-seccion .hoja-cara::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  filter:url(#dientePapel); opacity:.72; mix-blend-mode:multiply;
}

/* ============================================================================
   TIPOGRAFÍA — una sola familia en toda la web
   ============================================================================ */
.mesa, .pagina-seccion, .hoja-pag{ font-family:'Crimson Text', Georgia, serif; }

.pagina-seccion .epigrafe{
  font-size:clamp(.6rem,calc(.72 * var(--vw)),.76rem); letter-spacing:.22em;
  text-transform:uppercase; font-style:normal;
  color:var(--tinta-flo); margin:0 0 .3rem;
}
.pagina-seccion .titulo-apunte{
  font-weight:700; font-size:clamp(1.5rem,calc(2.5 * var(--vw)),2.6rem); line-height:1;
  color:var(--pap-claro); background:var(--tinta);
  display:inline-block; align-self:flex-start;
  padding:.14em .55em .2em; margin:0 0 .55rem;
  transform:rotate(-.7deg);
  box-shadow:0 10px 20px -12px rgba(10,7,3,.85);
  border:0;
}
.pagina-seccion .titulo-apunte::before,
.pagina-seccion .titulo-apunte::after{ content:none; }

.pagina-seccion .cuerpo-apunte{
  font-size:clamp(.86rem,calc(1.02 * var(--vw)),1.08rem); line-height:1.38;
  color:var(--tinta); text-align:justify; hyphens:auto;
  columns:2; column-gap:1.2rem; column-rule:1px solid rgba(20,18,15,.22);
  margin:0;
}
.pagina-seccion .cuerpo-apunte .resalta{
  background:none; font-weight:600; border-bottom:1px solid rgba(20,18,15,.5);
}
.pagina-seccion .num-pag{
  font-weight:700; font-size:clamp(.86rem,calc(1.05 * var(--vw)),1.1rem);
  color:var(--tinta-flo); transform:none;
}
.pagina-seccion .pie-dibujo{
  font-style:italic; font-size:clamp(.74rem,calc(.88 * var(--vw)),.92rem);
  color:var(--tinta-flo); transform:none;
}
/* La nota al margen vuelve: la había ocultado, y es justo lo que pedía —
   apuntes al lado del texto. Su sitio está más abajo, con el resto. */


/* el apunte a boli, encima de lo impreso */
.pagina-seccion .hoja-cara::after{
  content:attr(data-apunte); position:absolute; z-index:8; pointer-events:none;
  left:var(--ap-x,50%); top:var(--ap-y,26%);
  font-family:'Caveat', cursive; font-weight:700;
  font-size:clamp(1.4rem,calc(2.2 * var(--vw)),2.4rem); color:#1b1713; opacity:.66;
  transform:rotate(var(--ap-g,-9deg)); white-space:pre-line; line-height:1.05;
}

/* ============================================================================
   COMPOSICIÓN — la ilustración manda y se sale; el texto se corta
   ============================================================================ */
.pagina-seccion{ display:block; padding:0; }
.pagina-seccion .hoja-cara{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; padding:0; overflow:hidden; border-radius:0;
  box-shadow:none;
}
.pagina-seccion .num-pag{
  position:absolute; z-index:5; top:4%; right:4%;
}
.pagina-seccion .lomo{ display:none; }


/* ============================================================================
   EL ÍNDICE, con el MISMO tratamiento
   Antes era otra web: papel milimetrado claro, otra tipografía, otro aire.
   ============================================================================ */
/* OJO: aqui tenia ".hoja-pag .folio-apertura{position:relative}" y le quitaba el
   posicionamiento que trae de su propia regla. El folio colapsaba a altura 0 y
   se llevaba por delante el canvas y la esfera: la portada salia en blanco. */
.hoja-pag .folio-kicker,
.hoja-pag .folio-nombre,
.hoja-pag .apertura-pista,
.hoja-pag .indice-rutas,
.hoja-pag .volver-portada{ font-family:'Crimson Text', Georgia, serif; color:var(--tinta); }
.hoja-pag .folio-nombre{ font-weight:700; letter-spacing:.01em; }
.hoja-pag .folio-kicker,
.hoja-pag .apertura-pista{ color:var(--tinta-flo); font-style:italic; }
.hoja-pag .indice-rutas button{ font-family:'Crimson Text', serif; color:var(--tinta); }
.hoja-pag .indice-rutas-titulo{ letter-spacing:.22em; color:var(--tinta-flo); }
/* fuera la pauta azul de cuadrícula: en la referencia no hay milimetrado */
.hoja-pag .folio-margen{ display:none; }

/* ============================================================================
   TRANSICIONES — cámara o pasar hoja. Ninguna opacidad cambia.
   ============================================================================ */
.pagina-seccion[data-modo="pagina"]{
  transform-origin:left center;
  /* la perspectiva, aqui dentro: antes venia de `.mesa` bajando por un
     `preserve-3d` que costaba 166 Mpx de capas a toda la pagina */
  transform:translate(calc(var(--px,0)*100%), calc(var(--py,0)*100%))
            perspective(2600px) rotateY(-180deg);
  transition:transform 1.05s cubic-bezier(.55,.04,.22,1);
  backface-visibility:hidden; z-index:2000;
}
.pagina-seccion[data-modo="pagina"].abierta{
  transform:translate(calc(var(--px,0)*100%), calc(var(--py,0)*100%))
            perspective(2600px) rotateY(0deg);
}
.pagina-seccion[data-modo="pagina"] .hoja-cara .pagina-seccion[data-modo="pagina"].abierta .hoja-cara .pagina-seccion[data-modo="camara"]{ z-index:1800; }

.volver-hoja{
  position:fixed; left:50%; bottom:clamp(.6rem,calc(2 * var(--vh)),1.6rem); transform:translateX(-50%);
  z-index:60; background:none; border:0; cursor:pointer;
  font-family:'Crimson Text', serif; font-style:italic;
  font-size:clamp(.95rem,calc(1.2 * var(--vw)),1.15rem); color:rgba(226,222,210,.62);
  padding:.4rem 1rem; transition:color .2s ease;
}
.volver-hoja[hidden]{ display:none; }
.volver-hoja:hover{ color:#e6e2d6; }

@media (prefers-reduced-motion: reduce){
  .lienzo, .pagina-seccion[data-modo="pagina"]{ transition:none !important; }
}


/* ============================================================================
   LA FICHA — visto en el vídeo, no supuesto
   ----------------------------------------------------------------------------
   Fui a mirar los créditos de verdad y la estructura no es la que yo estaba
   haciendo. Cada crédito es una FICHA DE MANUAL:

     · columna de ETIQUETA: valor pegada al borde IZQUIERDO y cortada por él
       (FREQUENCY: Very rare / ARMOR CLASS: 3 / ALIGNMENT: Lawful evil...)
     · la ilustración enorme en el CENTRO, sangrando
     · otra columna de prosa a la DERECHA, también cortada
     · el nombre del crédito en ROJO

   Y el papel es un blanco-gris frío y CLARO, no el hueso oscuro que yo tenía.
   Lo oscuro son las esquinas, por el viñeteado.
   ============================================================================ */

:root{
  --pap:        #c2bfb0;   /* MEDIDO en la referencia, no elegido */   /* blanco-gris frío, más claro */
  --pap-claro:  #e9e6dd;
  --pap-oscuro: #cdc9be;
  --rojo:       #b5241c;   /* el rojo de los nombres */
}


/* Los brochazos estaban al 34% y a escala 1.06: manchas grises gigantes
   por toda la hoja. En el video las marcas de tinta son NEGRAS, pequenas
   y escasas — acompanan, no invaden. */
.pagina-seccion .hoja-cara .fondo-salp{
  opacity:.16;
  transform:rotate(var(--salp-g,-4deg)) scale(2.4);
  filter:brightness(.35) contrast(1.6);
}

/* ============================================================================
   SOLO LO PEDIDO — nada añadido por mi cuenta
   ----------------------------------------------------------------------------
   1. Fuera las manchas (los brochazos no pintaban nada).
   2. Fuera el oscuro de los lados: nunca quedó bien.
   3. Textura de papel de verdad: imagen generada con fibra, motas, cercos y
      pliegues, en multiply sobre el color. Antes era feTurbulence, que da
      grano de pantalla, no papel.
   4. Los textos entran enteros: estaban cortados a media palabra.
   ============================================================================ */

/* 1 — fuera las manchas */
.pagina-seccion .hoja-cara .fondo-salp{ display:none; }

/* 2 — fuera el oscuro de los lados */
.mesa::after,
.mesa::before{ display:none; }
.mesa{ background:#b9b2a3; }

/* 3 — el papel */
.hoja-pag .folio-apertura,
.pagina-seccion .hoja-cara{
  /* La textura YA lleva el tono medido de la referencia, asi que va sola.
     Antes se multiplicaba sobre --pap, que es del mismo tono: oscurecia dos
     veces y la pagina se quedaba en medios tonos, sin claros ni oscuros. */
  background:
    url('assets/textura/papel_tono.jpg') center/cover no-repeat;
}
/* fuera el ruido del filtro, que competía con la textura buena */
.hoja-pag .folio-apertura::before,
.pagina-seccion .hoja-cara::before{ display:none; }

/* 4 — los textos, dentro del cuadro */
.pagina-seccion .ficha{ left:var(--fic-x,5%); width:var(--fic-w,26%); }
.pagina-seccion .pag-der{ left:var(--txt-x,66%); width:var(--txt-w,29%); }
.pagina-seccion .cuerpo-apunte{ text-align:left; hyphens:none; }

/* La textura es un ESCANEO REAL, no generada: una pagina en blanco de
   un libro de 1902 (Internet Archive Book Images, via Wikimedia Commons,
   sin restricciones de copyright conocidas). Las tres que genere con numpy
   parecian ruido, yeso o veta de madera. El papel de verdad tiene fibras,
   motas e envejecido desigual que no salen de una formula. */

/* ============================================================================
   MASA OSCURA — medido, no a ojo
   ----------------------------------------------------------------------------
   Medido sobre 7 fotogramas del video: el 37% del cuadro esta por debajo de
   L=70. Mi pagina estaba en el 0,1%: todo papel claro. Por eso, mires lo que
   mires, no se parecia.
   En la referencia esa masa la pone la ILUSTRACION (grabados de tinta densa).
   La nuestra es un boceto a lapiz claro, asi que la masa tiene que salir de
   la pagina: una franja de encuadernacion y el plato de la ilustracion.
   ============================================================================ */

/* franja de encuadernacion: el canto del libro, a la izquierda */
.pagina-seccion .hoja-cara .canto{
  position:absolute; left:0; top:0; bottom:0; width:16%;
  background:linear-gradient(90deg, #100d0b 0%, #14110e 62%, rgba(20,17,14,.55) 86%, transparent 100%);
  z-index:2; pointer-events:none;
}
/* el plato donde va pegada la ilustracion: fondo oscuro, como las laminas
   del manual, que van sobre negro */
.pagina-seccion .pag-izq{
  background:#15120f;
  padding:1.1rem 1.1rem 1.3rem;
  box-shadow:0 20px 40px -18px rgba(8,6,4,.9);
}
/* NO se invierte el dibujo. Llegue al 37% de oscuro poniendolo en negativo
   sobre plato negro, pero eso es tocar su dibujo para cuadrar una metrica.
   El plato vuelve a ser claro y el trazo va como el lo hizo. */
.pagina-seccion .pag-izq{ background:#e6e2d8; }
.pagina-seccion .panel-anim video{ mix-blend-mode:multiply; filter:none; }
/* y el canto no puede taparle la ficha */
.pagina-seccion .hoja-cara .canto{ width:9%; }
.pagina-seccion .ficha{ left:12%; }

/* ============================================================================
   JERARQUÍA DE TEXTO — lo que decora y lo que hay que leer
   ----------------------------------------------------------------------------
   El fallo que me señaló y era de bulto: yo trataba todo el texto igual, y
   encima lo que había que LEER era lo que se salía por el borde. Al revés.

     · TEXTURA (decora): el impreso de fondo del manual. Pequeño, flojo,
       cortado por el borde a propósito. No se lee, se mira. Es lo que da
       densidad de página.
     · CONTENIDO (se lee): lo que dice Jorge. Grande, contrastado, ENTERO
       dentro del cuadro y con aire alrededor. Nunca cortado.

   Y fuera el rojo: era de Stranger Things, no del encargo.
   ============================================================================ */

:root{
  --rojo:       #22201c;   /* ya no hay rojo: la marca va en grafito */
  --texto-flojo: rgba(28,25,21,.34);
}

/* ---------- TEXTURA: el impreso de fondo ---------- */
.pagina-seccion .relleno-impreso{
  position:absolute; z-index:1; pointer-events:none;
  top:0; bottom:0; width:34%;
  font-size:clamp(.52rem,calc(.62 * var(--vw)),.68rem); line-height:1.5;
  color:var(--texto-flojo);
  text-align:justify; hyphens:auto;
  columns:2; column-gap:.9rem;
  padding:3% 0;
  user-select:none;
}
.pagina-seccion .relleno-impreso.izq{ left:-7%; }
.pagina-seccion .relleno-impreso.der{ right:-9%; }
.pagina-seccion .relleno-impreso b{ color:rgba(28,25,21,.46); }

/* ---------- CONTENIDO: lo que se lee ---------- */
.pagina-seccion .pag-der{
  left:auto; right:6%; width:min(38%, 560px);
  top:12%;
}
.pagina-seccion .titulo-apunte{
  color:#17150f; font-size:clamp(1.4rem,calc(2.1 * var(--vw)),2.3rem);
  letter-spacing:.02em; margin-bottom:.7rem;
  border-bottom:2px solid #17150f; padding-bottom:.22em;
  display:block; width:100%;
}
.pagina-seccion .cuerpo-apunte{
  font-size:clamp(.94rem,calc(1.12 * var(--vw)),1.2rem); line-height:1.5;
  color:#1c1914; text-align:left;
}
/* la ficha también es contenido: entera y legible */
.pagina-seccion .ficha{
  left:7%; top:14%; width:min(30%, 400px);
  font-size:clamp(.82rem,calc(.96 * var(--vw)),1.02rem);
  z-index:4;
}
.pagina-seccion .ficha dt{ color:#17150f; }
.pagina-seccion .ficha dd{ color:#2a2620; }

/* ---------- LA MARCA: una distinta por sección ---------- */
.pagina-seccion .marca{
  position:absolute; z-index:7; pointer-events:none;
  background-position:center; background-repeat:no-repeat; background-size:contain;
  opacity:.8;
}
.hoja-cara[data-layout="doble"]  .marca{ background-image:url('assets/marcas/m_sobre.png');       left:4%;  top:10%;  width:30%; height:26%; }
.hoja-cara[data-layout="sangre"] .marca{ background-image:url('assets/marcas/m_habilidades.png'); left:47%; top:14%;  width:9%;  height:16%; }
.hoja-cara[data-layout="ficha"]  .marca{ background-image:url('assets/marcas/m_formacion.png');   left:5%;  top:12%;  width:5%;  height:40%; }
.hoja-cara[data-layout="linea"]  .marca{ background-image:url('assets/marcas/m_recorrido.png');   left:38%; top:16%;  width:20%; height:26%; }
.hoja-cara[data-layout="carta"]  .marca{ background-image:url('assets/marcas/m_busco.png');       left:6%;  top:62%;  width:26%; height:16%; }

/* la nota escrita, en grafito y no en rojo */
.pagina-seccion .pegote p{ color:#2a2620; }
.pagina-seccion .hoja-cara::after{ color:#211e19; }

/* ============================================================================
   COMPOSICIÓN — la página como página, no como fondo con cosas encima
   ----------------------------------------------------------------------------
   Lo que estaba mal, mirando la captura y no de memoria:

     · una franja negra en el borde izquierdo que nunca quedó bien (la puse yo
       para cuadrar una métrica de masa oscura: fuera),
     · la textura era el escaneo a 'cover' sobre 2560px, o sea con el grano a
       30-60px: eso es gotelé, no papel,
     · el dibujo era un rectángulo blanco flotando en medio, sin integrar,
     · las cinco secciones tenían la misma estructura,
     · nada parecía pegado: ni papeles distintos, ni sombras, ni celo.

   La referencia funciona así, en capas:
       0  el papel
       1  el impreso del manual, TODO el ancho, flojo, cortado por el borde
          — no se lee nunca, es lo que da densidad
       2  los trozos pegados encima: el dibujo, la ficha, la nota
       3  lo que hay que leer, oscuro y grande, sobre papel despejado
       4  la marca a mano
   ============================================================================ */

:root{
  /* bordes de papel. Generados, no a ojo: un rectángulo con las esquinas
     rectas no va a parecer nunca un trozo pegado. */
  --corte-a:polygon(0.0% 0.0%, 7.7% -0.3%, 15.4% 0.3%, 23.1% -1.0%, 30.8% 0.4%, 38.5% 0.3%, 46.2% -0.1%, 53.8% -0.8%, 61.5% -1.1%, 69.2% -0.9%, 76.9% 0.5%, 84.6% 0.3%, 92.3% 0.3%, 99.6% 0.0%, 100.6% 7.7%, 99.3% 15.4%, 100.3% 23.1%, 100.6% 30.8%, 100.5% 38.5%, 100.0% 46.2%, 99.9% 53.8%, 100.0% 61.5%, 100.3% 69.2%, 99.9% 76.9%, 99.9% 84.6%, 101.0% 92.3%, 100.0% 100.3%, 92.3% 100.7%, 84.6% 100.5%, 76.9% 99.3%, 69.2% 101.1%, 61.5% 100.4%, 53.8% 99.6%, 46.2% 99.9%, 38.5% 100.2%, 30.8% 99.3%, 23.1% 99.9%, 15.4% 100.3%, 7.7% 99.5%, 1.3% 100.0%, 0.3% 92.3%, -0.2% 84.6%, 0.0% 76.9%, -0.2% 69.2%, 0.4% 61.5%, 0.3% 53.8%, 0.6% 46.2%, -0.4% 38.5%, -0.3% 30.8%, -0.5% 23.1%, 0.1% 15.4%, -0.4% 7.7%);
  --corte-b:polygon(0.0% 0.7%, 7.7% -0.5%, 15.4% -0.1%, 23.1% -0.6%, 30.8% -0.9%, 38.5% -1.1%, 46.2% 0.1%, 53.8% -0.1%, 61.5% 0.3%, 69.2% -0.1%, 76.9% -0.3%, 84.6% 0.4%, 92.3% 0.7%, 100.2% 0.0%, 100.1% 7.7%, 100.4% 15.4%, 100.5% 23.1%, 100.3% 30.8%, 100.2% 38.5%, 100.3% 46.2%, 100.7% 53.8%, 99.9% 61.5%, 99.1% 69.2%, 99.9% 76.9%, 99.6% 84.6%, 101.2% 92.3%, 100.0% 99.4%, 92.3% 99.1%, 84.6% 99.4%, 76.9% 100.7%, 69.2% 100.3%, 61.5% 100.9%, 53.8% 100.0%, 46.2% 100.1%, 38.5% 99.6%, 30.8% 99.7%, 23.1% 100.1%, 15.4% 99.2%, 7.7% 100.3%, -0.2% 100.0%, -0.3% 92.3%, -0.5% 84.6%, 0.2% 76.9%, -0.5% 69.2%, 0.2% 61.5%, -0.0% 53.8%, -0.3% 46.2%, 0.4% 38.5%, 0.3% 30.8%, -0.5% 23.1%, -0.6% 15.4%, 0.7% 7.7%);
  --rasgado-a:polygon(0.0% 3.4%, 7.7% -1.6%, 15.4% 0.0%, 23.1% 2.2%, 30.8% -1.0%, 38.5% 0.0%, 46.2% -0.6%, 53.8% -1.3%, 61.5% -2.6%, 69.2% 0.1%, 76.9% 2.7%, 84.6% -1.8%, 92.3% -3.0%, 99.3% 0.0%, 101.5% 7.7%, 102.5% 15.4%, 101.1% 23.1%, 98.5% 30.8%, 99.8% 38.5%, 97.7% 46.2%, 102.3% 53.8%, 99.8% 61.5%, 100.6% 69.2%, 103.0% 76.9%, 101.4% 84.6%, 99.4% 92.3%, 100.0% 95.0%, 92.3% 100.0%, 84.6% 100.0%, 76.9% 98.2%, 69.2% 102.8%, 61.5% 98.1%, 53.8% 100.1%, 46.2% 101.4%, 38.5% 101.9%, 30.8% 98.7%, 23.1% 99.7%, 15.4% 99.1%, 7.7% 99.8%, -2.3% 100.0%, -0.1% 92.3%, -1.6% 84.6%, 1.6% 76.9%, 0.4% 69.2%, -0.3% 61.5%, -2.6% 53.8%, 2.0% 46.2%, -1.5% 38.5%, -0.7% 30.8%, -3.0% 23.1%, -2.2% 15.4%, 0.9% 7.7%);
  --rasgado-b:polygon(0.0% -1.2%, 7.7% -2.4%, 15.4% 1.8%, 23.1% 5.8%, 30.8% 6.7%, 38.5% -0.6%, 46.2% -1.2%, 53.8% -2.6%, 61.5% -2.0%, 69.2% -3.0%, 76.9% 2.5%, 84.6% -0.0%, 92.3% 0.4%, 99.8% 0.0%, 99.7% 7.7%, 96.4% 15.4%, 95.2% 23.1%, 102.1% 30.8%, 101.8% 38.5%, 99.6% 46.2%, 100.8% 53.8%, 103.0% 61.5%, 103.0% 69.2%, 97.7% 76.9%, 92.6% 84.6%, 102.1% 92.3%, 100.0% 100.3%, 92.3% 99.6%, 84.6% 99.8%, 76.9% 99.1%, 69.2% 100.3%, 61.5% 103.0%, 53.8% 98.3%, 46.2% 98.3%, 38.5% 97.8%, 30.8% 103.0%, 23.1% 100.8%, 15.4% 95.2%, 7.7% 95.7%, -2.7% 100.0%, -1.9% 92.3%, 0.8% 84.6%, 2.0% 76.9%, 2.2% 69.2%, -0.8% 61.5%, 0.9% 53.8%, -3.0% 46.2%, -1.0% 38.5%, 2.6% 30.8%, -1.8% 23.1%, 0.4% 15.4%, -0.4% 7.7%);

  --pap-base:#c2bfb0;      /* medido en la referencia */
  --pap-slip:#d5d0bf;      /* el papel del dibujo, más claro */
  --pap-card:#cac5b4;      /* la cartulina de la ficha, más gris */
  --pap-nota:#d3c9a4;      /* el papelito de la nota, amarilleado */
  --tinta:#171410;
}

.pagina-seccion .clip-papel{ display:none; }   /* el celo falso: el de verdad va en la nota */

/* ---------- 0. EL PAPEL ------------------------------------------------- */
/* Dos escalas, que es como es el papel de verdad: el escaneo pone el
   envejecido (manchas, cercos) y la fibra pone el grano fino. Con una sola
   escala siempre parece pared. */
.hoja-pag .folio-apertura,
.pagina-seccion .hoja-cara{
  background:
    url('assets/textura/fibra.png') 0 0/700px 700px repeat,
    url('assets/textura/papel_macro.jpg') 0 0/1180px 1180px repeat,
    var(--pap-base);
  background-blend-mode:multiply, overlay, normal;
}
/* Las franjas verticales que se veían de arriba abajo eran del escaneo: trae
   la trama del papel y las columnas de la caja de texto, y a 'cover' sobre
   2560px eso son bandas de 160px. Medido: peso de la banda vertical 0,49 en
   el escaneo crudo, 0,33 quitándole el degradado, 0,27 generándola.
   0,27 es el suelo de un ruido sin dirección — o sea, ya no hay bandas.
   La verosimilitud la sigue poniendo el escaneo real, pero en la FIBRA, que
   es donde a esa escala no tiene dirección apreciable. */

/* fuera la franja negra del borde: nunca quedó bien y no la pidió */
.pagina-seccion .hoja-cara .canto,
.pagina-seccion .hoja-cara .lomo{ display:none; }

/* ---------- 1. EL IMPRESO DEL MANUAL (textura, no se lee) --------------- */
/* Cubre la hoja entera y se sale por arriba y por abajo: en la referencia
   las líneas están cortadas por el encuadre, no encajadas dentro. */
.pagina-seccion .relleno-impreso{
  top:-5%; bottom:-7%; padding:0;
  width:50%; columns:3; column-gap:2.2rem;
  font-size:clamp(.5rem,calc(.58 * var(--vw)),.66rem); line-height:1.62;
  color:rgba(26,23,18,.30);
  z-index:1;
}
/* al 50% + margen las dos cajas se solapaban en el centro y ahí salía el
   texto impreso dos veces, una encima de otra */
.pagina-seccion .relleno-impreso{ width:calc(50% - calc(1.8 * var(--vw))); }
.pagina-seccion .relleno-impreso.izq{ left:calc(1.6 * var(--vw));  right:auto; }
.pagina-seccion .relleno-impreso.der{ right:calc(1.6 * var(--vw)); left:auto; }
.pagina-seccion .relleno-impreso b{ color:rgba(26,23,18,.42); }
.pagina-seccion .relleno-impreso p{ margin:0 0 .55em; text-indent:1.1em; }

/* ---------- LA REJILLA: cada sección se compone distinta ---------------- */
.pagina-seccion .hoja-cara{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(8,1fr);
  column-gap:calc(1.6 * var(--vw)); row-gap:calc(1.1 * var(--vh));
  padding:calc(4.6 * var(--vh)) calc(3.4 * var(--vw));
  align-items:stretch;
}
.pagina-seccion .hoja-cara > .pag-izq,
.pagina-seccion .hoja-cara > .pag-der,
.pagina-seccion .hoja-cara > .ficha{
  position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto;
  width:auto; height:auto; max-width:none; min-width:0; min-height:0;
  transform:none; z-index:5;
}

/* doble  — Sobre mí: dibujo grande a la izquierda, texto en columna */
.pagina-seccion .hoja-cara[data-layout="doble"]  > .pag-izq{ grid-area:1/1/9/7;  }
.pagina-seccion .hoja-cara[data-layout="doble"]  > .pag-der{ grid-area:1/8/6/13; }
.pagina-seccion .hoja-cara[data-layout="doble"]  > .ficha  { grid-area:6/8/9/13; }
/* sangre — Habilidades: el dibujo se sale por el borde derecho */
.pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-izq{ grid-area:1/7/9/13; margin-right:calc(-3.4 * var(--vw)); }
.pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-der{ grid-area:1/1/6/6;  }
.pagina-seccion .hoja-cara[data-layout="sangre"] > .ficha  { grid-area:6/1/9/7;  }
/* ficha  — Formación: manda la cartulina, el dibujo va pequeño y prendido */
.pagina-seccion .hoja-cara[data-layout="ficha"]  > .ficha  { grid-area:1/1/9/5;  }
.pagina-seccion .hoja-cara[data-layout="ficha"]  > .pag-izq{ grid-area:1/5/5/10; }
/* tres filas no le llegaban: la nota y el apunte al margen se salían 48px */
.pagina-seccion .hoja-cara[data-layout="ficha"]  > .pag-der{ grid-area:5/5/9/13; }
/* linea  — Recorrido: banda horizontal, la ficha se tumba abajo */
.pagina-seccion .hoja-cara[data-layout="linea"]  > .pag-der{ grid-area:1/1/6/5;  }
.pagina-seccion .hoja-cara[data-layout="linea"]  > .pag-izq{ grid-area:1/5/7/13; }
.pagina-seccion .hoja-cara[data-layout="linea"]  > .ficha  { grid-area:7/1/9/13; }
/* carta  — Contacto: columna estrecha de carta, dibujo pequeño al lado */
.pagina-seccion .hoja-cara[data-layout="carta"]  > .pag-der{ grid-area:1/2/9/7;  }
.pagina-seccion .hoja-cara[data-layout="carta"]  > .pag-izq{ grid-area:2/7/8/11; }
.pagina-seccion .hoja-cara[data-layout="carta"]  > .ficha  { grid-area:1/11/7/13; }

/* ---------- 2. LOS TROZOS PEGADOS -------------------------------------- */
/* El dibujo: hoja recortada a tijera, pegada un poco torcida. */
.pagina-seccion .hoja-cara > .pag-izq{
  display:flex; flex-direction:column; gap:.5rem;
  padding:calc(1.3 * var(--vh)) calc(1 * var(--vw)) calc(.6 * var(--vh));
  background:var(--pap-slip) url('assets/textura/fibra.png') 0 0/430px repeat;
  background-blend-mode:multiply;
  clip-path:var(--corte-a);
  filter:drop-shadow(0 calc(.9 * var(--vh)) calc(1.4 * var(--vh)) rgba(38,30,18,.30));
  transform:rotate(-.55deg);
  box-shadow:none; border:0;
}
.pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-izq{ transform:rotate(.5deg);  clip-path:var(--corte-b); }
.pagina-seccion .hoja-cara[data-layout="ficha"]  > .pag-izq{ transform:rotate(1.4deg); clip-path:var(--corte-b); }
.pagina-seccion .hoja-cara[data-layout="linea"]  > .pag-izq{ transform:rotate(-1deg);  }
.pagina-seccion .hoja-cara[data-layout="carta"]  > .pag-izq{ transform:rotate(1.9deg); clip-path:var(--corte-b); }

.pagina-seccion .panel-anim{
  flex:1 1 auto; min-height:0; width:100%; aspect-ratio:auto;
  display:flex; align-items:center; justify-content:center;
}
.pagina-seccion .panel-anim video{
  width:100%; height:100%; object-fit:contain;
  mix-blend-mode:multiply; filter:none; margin:0;
}
.pagina-seccion .pie-dibujo{
  flex:0 0 auto; margin:0; text-align:right;
  font-size:clamp(.72rem,calc(.82 * var(--vw)),.94rem); color:rgba(30,26,20,.62);
}

/* La ficha: cartulina de fichero, más gris y torcida al otro lado.
   Va a CONTENIDO, no estirada a su hueco: estirada salían las etiquetas a un
   lado, los valores al otro y un metro de puntitos en medio — un formulario,
   no una ficha. */
.pagina-seccion .hoja-cara > .ficha{
  justify-self:start; align-self:start; width:max-content; max-width:100%;
  padding:calc(1.6 * var(--vh)) calc(1.4 * var(--vw));
  background:var(--pap-card) url('assets/textura/fibra.png') 0 0/380px repeat;
  background-blend-mode:multiply;
  clip-path:var(--corte-b);
  filter:drop-shadow(0 calc(.7 * var(--vh)) calc(1.1 * var(--vh)) rgba(38,30,18,.26));
  transform:rotate(.75deg);
  display:grid; align-content:start;
  grid-template-columns:max-content max-content; column-gap:1.1em; row-gap:.34em;
  font-size:clamp(.86rem,calc(1.08 * var(--vw)),1.28rem); line-height:1.32; overflow:hidden;
}
.pagina-seccion .hoja-cara[data-layout="ficha"] > .ficha{ transform:rotate(-1.1deg); row-gap:.62em; font-size:clamp(.86rem,calc(1.02 * var(--vw)),1.14rem); }
/* en 'linea' la ficha se tumba: es una tira, así que va en columnas */
.pagina-seccion .hoja-cara[data-layout="linea"] > .ficha{
  transform:rotate(-.4deg); grid-template-columns:repeat(3,max-content 1fr);
  column-gap:1em; align-content:center;
}
.pagina-seccion .ficha dt{
  margin:0; font-variant:small-caps; letter-spacing:.09em;
  font-size:.86em; color:rgba(23,20,16,.78); align-self:baseline;
}
.pagina-seccion .ficha dd{
  margin:0; font-style:italic; color:var(--tinta); align-self:baseline;
  border-bottom:1px dotted rgba(35,30,22,.3);
}

/* ---------- 3. LO QUE HAY QUE LEER ------------------------------------- */
/* No va sobre un trozo pegado: va sobre la página, que es donde va el texto
   de verdad. Debajo se despeja el impreso con un velo del propio papel, sin
   caja ni borde — para que se lea sin que parezca un recuadro. */
.pagina-seccion .hoja-cara > .pag-der{
  display:flex; flex-direction:column; align-items:flex-start; gap:.55em;
  padding:calc(1.4 * var(--vh)) calc(1.2 * var(--vw)) calc(1.4 * var(--vh)) 0; overflow:visible;
}
.pagina-seccion .hoja-cara > .pag-der::before{
  content:''; position:absolute; z-index:-1;
  inset:calc(-2.2 * var(--vh)) calc(-2.4 * var(--vw)) calc(-2.2 * var(--vh)) calc(-1.6 * var(--vw));
  background:radial-gradient(75% 66% at 46% 46%,
      color-mix(in srgb, var(--pap-base) 94%, #fff) 0 52%,
      color-mix(in srgb, var(--pap-base) 62%, transparent) 78%, transparent 100%);
}
.pagina-seccion .epigrafe{
  display:block; margin:0; font-variant:small-caps; letter-spacing:.2em;
  font-size:clamp(.62rem,calc(.72 * var(--vw)),.82rem); color:rgba(30,26,20,.6);
}
.pagina-seccion .titulo-apunte{
  /* Salía como un rectángulo negro: arrastraba de una versión vieja
     background:var(--tinta) con display:inline-block, y encima yo le ponía
     el color oscuro. Caja negra con letras negras dentro. */
  display:block; background:none; box-shadow:none; transform:none;
  text-transform:none; font-weight:700;
  margin:0; border:0; padding:0; width:auto;
  font-size:clamp(1.9rem,calc(3.4 * var(--vw)),4rem); line-height:.98;
  letter-spacing:.005em; color:var(--tinta);
}
.pagina-seccion .titulo-apunte + *{ margin-top:.1em; }
/* la raya de debajo del título es un trazo, no un border */
.pagina-seccion .titulo-apunte::after{
  content:''; display:block; height:.42em; margin-top:.1em;
  background:url('assets/marcas/sub_4.png') left center/100% 100% no-repeat;
  opacity:.85;
}
.pagina-seccion .cuerpo-apunte{
  /* a una columna: en dos, con una frase de tres líneas, la partía por la
     mitad y se leía en zigzag */
  columns:1; column-rule:none; background:none; padding:0; transform:none;
  text-align:left; hyphens:none;
  margin:0; max-width:30em;
  font-size:clamp(1.05rem,calc(1.4 * var(--vw)),1.72rem); line-height:1.46; color:#1b1813;
}
.pagina-seccion .lista-apunte{
  background:none; border:0; box-shadow:none; transform:none;
  margin:.45em 0 0; padding:0; list-style:none; max-width:30em;
  font-size:clamp(.98rem,calc(1.22 * var(--vw)),1.46rem); line-height:1.42;
}
.pagina-seccion .lista-apunte li{
  position:relative; padding-left:1.5em; margin:.28em 0; color:#221e18;
  border:0; counter-increment:none;
}
.pagina-seccion .lista-apunte li::before{
  content:'—'; counter-increment:none; position:absolute; left:0;
  width:auto; text-align:left; font-weight:400; color:rgba(30,26,20,.55);
}
/* el subrayado a mano: uno DISTINTO por sección, y estirado al ancho del
   texto, así que aparece una sola vez. Repetido sería un tramado. */
.pagina-seccion .resalta{
  background:url('assets/marcas/sub_1.png') left 88%/100% .5em no-repeat;
  padding-bottom:.12em; color:var(--tinta); font-weight:600;
}
.pagina-seccion .hoja-cara[data-layout="sangre"] .resalta{ background-image:url('assets/marcas/sub_2.png'); }
.pagina-seccion .hoja-cara[data-layout="ficha"]  .resalta{ background-image:url('assets/marcas/sub_3.png'); }
.pagina-seccion .hoja-cara[data-layout="linea"]  .resalta{ background-image:url('assets/marcas/sub_5.png'); }
.pagina-seccion .hoja-cara[data-layout="carta"]  .resalta{ background-image:url('assets/marcas/sub_2.png'); }

/* la nota: papelito rasgado, amarilleado y con celo */
.pagina-seccion .pegote{
  /* iba en una columna flex con align-items:flex-start, así que se encogía a
     su contenido mínimo: salía una tira de una letra de ancho. */
  position:relative; z-index:6; align-self:stretch;
  left:auto; top:auto; right:auto; bottom:auto;
  margin:.7em 0 0; width:auto; max-width:26em; padding:1.1em 1.3em 1em;
  background:var(--pap-nota) url('assets/textura/fibra.png') 0 0/300px repeat;
  background-blend-mode:multiply;
  clip-path:var(--rasgado-a);
  filter:drop-shadow(0 calc(.6 * var(--vh)) calc(.9 * var(--vh)) rgba(38,30,18,.26));
  transform:rotate(-1.5deg);
  border:0; box-shadow:none;
}
.pagina-seccion .hoja-cara[data-layout="ficha"] .pegote,
.pagina-seccion .hoja-cara[data-layout="carta"] .pegote{ clip-path:var(--rasgado-b); transform:rotate(1.2deg); }
.pagina-seccion .pegote p{
  margin:0; font-size:clamp(.88rem,calc(.98 * var(--vw)),1.08rem); line-height:1.4; color:#211d16;
}
.pagina-seccion .pegote .celo{
  position:absolute; width:4.6em; height:1.35em; top:-.6em; z-index:2;
  background:linear-gradient(100deg, rgba(226,219,196,.1), rgba(214,206,180,.62) 22%, rgba(232,226,206,.5) 55%, rgba(210,202,176,.6));
  box-shadow:0 1px 2px rgba(40,32,18,.16);
  mix-blend-mode:multiply;
}
.pagina-seccion .pegote .celo-a{ left:.6em;  transform:rotate(-6deg); }
.pagina-seccion .pegote .celo-b{ right:.6em; transform:rotate(5deg); }

.pagina-seccion .margen-nota{
  margin:.5em 0 0; max-width:24em;
  font-size:clamp(.8rem,calc(.9 * var(--vw)),1rem); color:rgba(32,28,22,.6);
}
.pagina-seccion .num-pag{
  position:absolute; right:calc(1.2 * var(--vw)); bottom:calc(.4 * var(--vh));
  font-size:clamp(.8rem,calc(.92 * var(--vw)),1.05rem); color:rgba(30,26,20,.5);
}

/* El apunte a boli suelto ('+2 esto', '?+1', '2019'...) sale de data-apunte
   en .hoja-cara::after. Sus coordenadas venían del sistema viejo, así que al
   quitarlo se le caían al centro de la página, encima del dibujo. */
.pagina-seccion .hoja-cara[data-layout="doble"] { --ap-x:44.5%; --ap-y:74%; --ap-g:-11deg; }
.pagina-seccion .hoja-cara[data-layout="sangre"]{ --ap-x:41%; --ap-y:76%; --ap-g:7deg;   }
.pagina-seccion .hoja-cara[data-layout="ficha"] { --ap-x:79%; --ap-y:14%; --ap-g:-6deg;  }
.pagina-seccion .hoja-cara[data-layout="linea"] { --ap-x:32%; --ap-y:62%; --ap-g:9deg;   }
.pagina-seccion .hoja-cara[data-layout="carta"] { --ap-x:56%; --ap-y:84%; --ap-g:-7deg;  }

/* ---------- 4. LA MARCA ------------------------------------------------- */
/* Encima de todo, que es lo que es: alguien pasó por aquí y marcó la página. */
.pagina-seccion .marca{ z-index:8; opacity:.72; }
.pagina-seccion .hoja-cara[data-layout="doble"]  .marca{ left:auto; right:calc(3 * var(--vw));  top:6%;  width:14%; height:22%; }
.pagina-seccion .hoja-cara[data-layout="sangre"] .marca{ left:5%;   top:52%;    width:6%;  height:11%; }
.pagina-seccion .hoja-cara[data-layout="ficha"]  .marca{ left:calc(1.6 * var(--vw)); top:8%;    width:3%;  height:44%; }
.pagina-seccion .hoja-cara[data-layout="linea"]  .marca{ left:31%;  top:6%;     width:12%; height:20%; }
.pagina-seccion .hoja-cara[data-layout="carta"]  .marca{ left:auto; right:calc(2 * var(--vw));  top:64%;   width:15%; height:12%; }

/* ---------- responsivo ------------------------------------------------- */
@container tablero (max-aspect-ratio:14/10){
  .pagina-seccion .hoja-cara{ grid-template-rows:repeat(10,1fr); padding:calc(3.4 * var(--vh)) calc(4 * var(--vw)); }
  .pagina-seccion .hoja-cara[data-layout="doble"]  > .pag-izq{ grid-area:1/1/7/13; }
  .pagina-seccion .hoja-cara[data-layout="doble"]  > .pag-der{ grid-area:7/1/11/8; }
  .pagina-seccion .hoja-cara[data-layout="doble"]  > .ficha  { grid-area:7/8/11/13; }
  .pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-izq{ grid-area:1/1/6/13; margin-right:0; }
  .pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-der{ grid-area:6/1/11/8; }
  .pagina-seccion .hoja-cara[data-layout="sangre"] > .ficha  { grid-area:6/8/11/13; }
  .pagina-seccion .hoja-cara[data-layout="ficha"]  > .ficha  { grid-area:1/1/6/7; }
  .pagina-seccion .hoja-cara[data-layout="ficha"]  > .pag-izq{ grid-area:1/7/6/13; }
  .pagina-seccion .hoja-cara[data-layout="ficha"]  > .pag-der{ grid-area:6/1/11/13; }
  .pagina-seccion .hoja-cara[data-layout="linea"]  > .pag-izq{ grid-area:1/1/6/13; }
  .pagina-seccion .hoja-cara[data-layout="linea"]  > .pag-der{ grid-area:6/1/9/13; }
  .pagina-seccion .hoja-cara[data-layout="linea"]  > .ficha  { grid-area:9/1/11/13; }
  .pagina-seccion .hoja-cara[data-layout="carta"]  > .pag-der{ grid-area:1/1/7/8; }
  .pagina-seccion .hoja-cara[data-layout="carta"]  > .pag-izq{ grid-area:1/8/7/13; }
  .pagina-seccion .hoja-cara[data-layout="carta"]  > .ficha  { grid-area:7/1/11/13; }
  .pagina-seccion .relleno-impreso{ columns:2; }
}

/* ============================================================================
   VALOR — negro de verdad y blanco de verdad
   ----------------------------------------------------------------------------
   Medido, y explica la comparación mejor que nada de lo que yo dijera:

       referencia   1% en L=10   mediana 120   99% en L=250   37% oscuro
       la mía       1% en L=105  mediana 183   99% en L=202    0,5% oscuro

   O sea: la referencia usa los 255 niveles y la mía vive entera en 100 puntos
   de gris del medio. Por eso da igual la textura, la tipografía o la
   composición — sin negros ni blancos todo se ve barro.

   Los negros NO salen de su dibujo, que no se toca. Salen de la página:
   el plato negro donde va montada la lámina, la banda de la cabecera, el
   título macizo y las marcas a tinta plena. Que es de donde salen en un
   manual de verdad.
   ============================================================================ */

:root{
  --pap-base:#e4e0d2;      /* papel más claro: los blancos tienen que ser blancos */
  --pap-slip:#f4f1e8;      /* la lámina, casi blanca, para que su azul se lea */
  --pap-card:#ebe7da;
  --pap-nota:#e2d7ad;
  --tinta:#0f0d0a;         /* negro de tinta, no gris oscuro */
  --plato:#13110e;
}

/* ---------- el plato: la lámina va MONTADA, no suelta ---------- */
/* Es lo que mete la masa oscura y a la vez lo que hace que el dibujo
   se lea: su trazo es azul claro, y sobre papel beige se pierde. */
.pagina-seccion .hoja-cara > .pag-izq{
  background:var(--pap-slip) url('assets/textura/fibra.png') 0 0/430px repeat;
  background-blend-mode:multiply;
  filter:none;
  box-shadow:
    0 0 0 calc(.55 * var(--vw)) var(--plato),
    calc(1.1 * var(--vw)) calc(1.2 * var(--vw)) 0 calc(.55 * var(--vw)) var(--plato),
    0 calc(2.2 * var(--vh)) calc(3 * var(--vh)) rgba(10,8,5,.42);
  clip-path:none;                     /* el recorte se comía el montaje */
}
.pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-izq{
  box-shadow:0 0 0 calc(.55 * var(--vw)) var(--plato), calc(-1.1 * var(--vw)) calc(1.2 * var(--vw)) 0 calc(.55 * var(--vw)) var(--plato), 0 calc(2.2 * var(--vh)) calc(3 * var(--vh)) rgba(10,8,5,.42);
}

/* ---------- la cabecera: banda negra con el número ---------- */
.pagina-seccion .hoja-cara > .pag-der{ padding-top:0; }
.pagina-seccion .epigrafe{
  align-self:flex-start; margin:0 0 .5em;
  background:var(--plato); color:#efece2;
  padding:.42em 1.1em .38em; letter-spacing:.26em;
  font-size:clamp(.66rem,calc(.82 * var(--vw)),.95rem);
}
.pagina-seccion .titulo-apunte{ color:var(--tinta); }
.pagina-seccion .titulo-apunte::after{ opacity:1; }
.pagina-seccion .num-pag{
  right:auto; left:calc(3.4 * var(--vw)); top:calc(3.4 * var(--vh)); bottom:auto;
  font-size:clamp(1.1rem,calc(1.6 * var(--vw)),2rem); font-weight:700; color:var(--tinta);
}

/* ---------- el impreso deja de ser una niebla que lo tapa todo ---------- */
/* Estaba a página completa y por encima de la mitad del contenido: eso no es
   textura, es suciedad. Va en UNA columna, pegada a un borde y cortada por
   él, como en la referencia — y ahí sí, bien negra y legible de cerca. */
.pagina-seccion .relleno-impreso.der{ display:none; }
.pagina-seccion .relleno-impreso.izq{
  left:auto; right:calc(1.4 * var(--vw)); width:15.5%; columns:1;
  top:-4%; bottom:-6%;
  font-size:clamp(.54rem,calc(.66 * var(--vw)),.78rem); line-height:1.55;
  color:rgba(15,13,10,.72);
}
.pagina-seccion .relleno-impreso.izq b{ color:rgba(15,13,10,.92); }
.pagina-seccion .hoja-cara[data-layout="sangre"] .relleno-impreso.izq,
.pagina-seccion .hoja-cara[data-layout="linea"]  .relleno-impreso.izq{
  right:auto; left:calc(1.4 * var(--vw));
}

/* el velo que despeja el texto ya no hace falta: debajo no hay nada */
.pagina-seccion .hoja-cara > .pag-der::before{ display:none; }

/* ---------- las marcas, a tinta plena ---------- */
.pagina-seccion .marca{ opacity:1; }

/* ---------- la ficha: cartulina clara con cabecera negra ---------- */
.pagina-seccion .hoja-cara > .ficha{
  filter:none;
  box-shadow:0 0 0 2px var(--plato), 0 calc(1.4 * var(--vh)) calc(2 * var(--vh)) rgba(10,8,5,.34);
  clip-path:none;
}
.pagina-seccion .ficha dt{ color:#100e0b; }
.pagina-seccion .ficha dd{ color:#100e0b; border-bottom-color:rgba(15,13,10,.42); }

/* ---------- el papelito, con celo de verdad ---------- */
.pagina-seccion .pegote{ filter:drop-shadow(0 calc(.5 * var(--vh)) calc(.8 * var(--vh)) rgba(10,8,5,.4)); }
.pagina-seccion .pegote p{ color:#14110c; }

.pagina-seccion .cuerpo-apunte{ color:#14110c; }
.pagina-seccion .lista-apunte li{ color:#14110c; }
.pagina-seccion .margen-nota{ color:rgba(20,17,12,.72); }
.pagina-seccion .pie-dibujo{ color:rgba(20,17,12,.68); }

/* ============================================================================
   EL ÍNDICE — la misma página, no un muro gris
   ----------------------------------------------------------------------------
   Estaba entre L=143 y L=184: 41 niveles de gris de los 255. Un muro. Y encima
   el nombre estaba en display:none desde una versión vieja, así que la portada
   no tenía ni una palabra.
   ============================================================================ */
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-nota{
  display:block; mix-blend-mode:normal; z-index:8;
  font-family:'Crimson Text', Georgia, serif;
}
.apertura-cuaderno .folio-kicker{
  top:calc(7 * var(--vh)); left:calc(3.4 * var(--vw)); right:auto;
  background:var(--plato); color:#efece2; padding:.42em 1.1em .38em;
  font:600 clamp(.66rem,calc(.82 * var(--vw)),.95rem)/1 'Crimson Text', serif;
  letter-spacing:.26em; text-transform:uppercase; transform:none;
}
.apertura-cuaderno .folio-nombre{
  top:calc(calc(7 * var(--vh)) + 2.6em); left:calc(3.4 * var(--vw)); right:auto;
  font:700 clamp(2rem,calc(4.4 * var(--vw)),5.4rem)/.92 'Crimson Text', Georgia, serif;
  letter-spacing:-.01em; color:var(--tinta); transform:none;
}
.apertura-cuaderno .folio-nota{
  top:auto; bottom:calc(7 * var(--vh)); left:calc(3.4 * var(--vw)); right:auto; max-width:26ch;
  font:400 clamp(.92rem,calc(1.15 * var(--vw)),1.35rem)/1.4 'Crimson Text', serif;
  color:rgba(20,17,12,.78); transform:none;
}
/* una raya de mano debajo del nombre, la misma que en las secciones */
.apertura-cuaderno .folio-nombre::after{
  content:''; display:block; height:.3em; width:min(calc(34 * var(--vw)),620px); margin-top:.16em;
  background:url('assets/marcas/sub_4.png') left center/100% 100% no-repeat;
}

/* ============================================================================
   CHOQUES — cosas que se pisan unas a otras
   ----------------------------------------------------------------------------
   Vistos en la captura, no supuestos:
     · el "01" caía justo encima de la palabra del título,
     · el cuerpo de texto llegaba hasta debajo de la columna impresa y las dos
       líneas se leían una sobre otra,
     · la elipse marcaba encima del texto que hay que leer.
   La columna impresa deja de ser una capa suelta y pasa a ser MARGEN: nadie
   puede invadirla porque la hoja reserva su ancho.
   ============================================================================ */

.pagina-seccion .hoja-cara{ padding-right:19.5%; }
.pagina-seccion .hoja-cara[data-layout="sangre"],
.pagina-seccion .hoja-cara[data-layout="linea"]{ padding-right:calc(3.4 * var(--vw)); padding-left:19.5%; }

/* el número, a su esquina y fuera del título */
.pagina-seccion .num-pag{
  position:absolute; left:auto; right:0; top:-.1em; bottom:auto;
  font-size:clamp(.9rem,calc(1.15 * var(--vw)),1.4rem); color:rgba(20,17,12,.62);
}

/* la marca anota el MANUAL, no lo que hay que leer */
.pagina-seccion .hoja-cara[data-layout="doble"]  .marca{ right:calc(1.2 * var(--vw)); left:auto; top:38%; width:14%; height:20%; }
.pagina-seccion .hoja-cara[data-layout="sangre"] .marca{ left:calc(2.4 * var(--vw)); right:auto; top:66%; width:6.5%; height:12%; }
.pagina-seccion .hoja-cara[data-layout="ficha"]  .marca{ right:calc(1.4 * var(--vw)); left:auto; top:12%; width:3.4%; height:40%; }
.pagina-seccion .hoja-cara[data-layout="linea"]  .marca{ left:calc(2 * var(--vw));  right:auto; top:20%; width:12%; height:18%; }
.pagina-seccion .hoja-cara[data-layout="carta"]  .marca{ right:calc(1.2 * var(--vw)); left:auto; top:70%; width:15%; height:12%; }

/* ---------- la masa oscura, en las cinco y no solo donde hay lámina grande --
   Medido: 'sobre' llegaba al 5,7% de oscuro y 'formación' al 1,1%, porque su
   lámina es pequeña. Cada encuadre necesita SU pieza negra, y distinta. */
.pagina-seccion .hoja-cara::before{
  display:block; content:''; position:absolute; z-index:2; pointer-events:none;
  background:var(--plato); filter:none; opacity:1; mix-blend-mode:normal;
}
.pagina-seccion .hoja-cara[data-layout="doble"]::before{  left:calc(3.4 * var(--vw));  right:22%;   top:auto; bottom:calc(2.6 * var(--vh)); height:calc(1.1 * var(--vh)); }
.pagina-seccion .hoja-cara[data-layout="sangre"]::before{ left:20.5%;  right:auto;  top:calc(4 * var(--vh));  bottom:calc(4 * var(--vh));  width:calc(1.1 * var(--vh)); }
.pagina-seccion .hoja-cara[data-layout="ficha"]::before{  left:calc(3.4 * var(--vw));  width:32.5%; top:calc(3.6 * var(--vh)); height:calc(6.4 * var(--vh)); }
.pagina-seccion .hoja-cara[data-layout="linea"]::before{  left:20.5%;  right:calc(3.4 * var(--vw)); top:auto; bottom:22%;  height:calc(1.1 * var(--vh)); }
.pagina-seccion .hoja-cara[data-layout="carta"]::before{  left:calc(3.4 * var(--vw));  width:calc(1.1 * var(--vh)); top:calc(4 * var(--vh));  bottom:calc(4 * var(--vh)); }

/* en 'ficha' la banda es la cabecera de la cartulina: el título va encima */
.pagina-seccion .hoja-cara[data-layout="ficha"] > .ficha{ padding-top:calc(7.4 * var(--vh)); }
.pagina-seccion .hoja-cara[data-layout="ficha"] > .ficha::before{
  content:attr(data-cabecera); position:absolute; left:calc(1.4 * var(--vw)); top:calc(1.5 * var(--vh)); z-index:3;
  color:#efece2; letter-spacing:.26em; font-size:clamp(.62rem,calc(.76 * var(--vw)),.9rem);
}

/* el volver, que quedaba en gris claro encima de la lámina y no se leía */
.volver-hoja{ color:rgba(20,17,12,.72); bottom:calc(1.2 * var(--vh)); }
.volver-hoja:hover{ color:#0f0d0a; }

/* ============================================================================
   GRAMAJES — cuatro papeles distintos, no una hoja con cosas encima
   ----------------------------------------------------------------------------
   Sus cuatro fotogramas no van del dibujo. Van del MATERIAL:

     1  prosa impresa GRANDE, negra, en papel de libro crema y de grano gordo,
        cortada por el borde del encuadre;
     2  otra hoja donde se transparenta el texto del REVERSO, en espejo y
        flojísimo — eso es gramaje, papel que deja pasar la luz;
     3  partitura: papel más fino y más frío, y el CANTO de otra hoja levantado
        a la izquierda con su sombra — se ve el grosor del papel;
     4  una tabla pautada en cartulina verdosa, con las casillas rellenadas
        A MANO sobre lo impreso.

   O sea: papeles con pesos, colores, granos e impresos DISTINTOS, montados
   unos sobre otros con sus cantos y sus sombras. Eso es lo que no tenía.
   ============================================================================ */

:root{
  --pap-libro:#ddd5c0;    /* el del libro: cálido, grueso, grano gordo */
  --pap-pauta:#eceades;   /* el de la partitura: más frío, más fino */
  --pap-tabla:#cdcfc0;    /* la cartulina de la tabla: verdosa */
  --pap-slip:#f2efe4;     /* la lámina del dibujo */
  --pap-nota:#e0d5aa;
}

/* ---------- 1. LA PROSA, en papel de libro -------------------------------- */
/* Va sobre SU hoja, no sobre el fondo: papel más cálido, grano más gordo,
   canto visible y cortada por el borde de la página, como en el fotograma. */
.pagina-seccion .hoja-cara > .pag-der{
  padding:calc(3.4 * var(--vh)) calc(2 * var(--vw)) calc(3.4 * var(--vh)) calc(2.4 * var(--vw));
  background:var(--pap-libro) url('assets/textura/fibra.png') 0 0/300px repeat;
  background-blend-mode:multiply;
  box-shadow:
    inset 0 0 0 1px rgba(30,24,14,.16),
    calc(.5 * var(--vw)) calc(.9 * var(--vh)) calc(1.6 * var(--vh)) rgba(20,15,8,.26);
  isolation:isolate;
}
/* el canto de otra hoja levantado a la izquierda: se ve el grosor */
.pagina-seccion .hoja-cara > .pag-der::after{
  content:''; position:absolute; z-index:2; pointer-events:none;
  left:calc(-.85 * var(--vw)); top:calc(-1.1 * var(--vh)); bottom:calc(-1.6 * var(--vh)); width:calc(.85 * var(--vw));
  background:linear-gradient(90deg, rgba(20,15,8,.05), #f6f2e6 22%, #e7e1cf 62%, rgba(24,18,9,.34));
  box-shadow:calc(-.15 * var(--vw)) 0 calc(.5 * var(--vw)) rgba(20,15,8,.22);
}
/* la prosa, del tamaño al que se lee en el fotograma: es EL contenido */
.pagina-seccion .cuerpo-apunte{
  font-size:clamp(1.12rem,calc(1.62 * var(--vw)),2.05rem); line-height:1.42; max-width:26em;
  color:#100d08;
}
.pagina-seccion .lista-apunte{ font-size:clamp(1rem,calc(1.34 * var(--vw)),1.66rem); max-width:26em; }

/* ---------- 2. EL REVERSO QUE TRANSPARENTA -------------------------------- */
/* La segunda caja de impreso ya no es una columna más: es el texto de la cara
   de atrás de esta misma hoja, en espejo y al 8%. Es lo que hace que el papel
   pese en vez de parecer una capa de color. */
/* Va dentro de .pag-der (lo mueve app.js): es el reverso DE ESA hoja. */
.pagina-seccion .pag-der > .relleno-impreso.der{
  display:block; position:absolute; z-index:0;
  left:0; right:0; top:0; bottom:0; width:auto;
  padding:calc(6.5 * var(--vh)) calc(2.4 * var(--vw)) calc(3.4 * var(--vh)); columns:1;
  transform:scaleX(-1);
  color:rgba(28,20,8,.065);
  font-size:clamp(.86rem,calc(1.24 * var(--vw)),1.55rem); line-height:1.42;
  overflow:hidden;
}
.pagina-seccion .pag-der > .relleno-impreso.der b{ color:rgba(28,20,8,.13); }

/* La hoja se ajusta a lo que lleva escrito, no al hueco de la rejilla: con
   altura fija, la nota y el apunte se salían por debajo y caían encima de la
   cartulina — se comían la primera fila de la tabla. */
.pagina-seccion .hoja-cara > .pag-der{ align-self:start; }
/* La tabla tiene siete filas: en dos no cabe y se salía 97px. Con la hoja
   ajustada a su contenido ya no hace falta robarle sitio. */
.pagina-seccion .hoja-cara[data-layout="doble"]  > .pag-der{ grid-area:1/8/6/13; }
.pagina-seccion .hoja-cara[data-layout="doble"]  > .ficha  { grid-area:6/8/9/13; }
.pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-der{ grid-area:1/1/6/6;  }
.pagina-seccion .hoja-cara[data-layout="sangre"] > .ficha  { grid-area:6/1/9/7;  }
/* y el texto de verdad, por delante del fantasma */
.pagina-seccion .pag-der > :not(.relleno-impreso){ position:relative; z-index:1; }

/* ---------- 3. LA TABLA, en cartulina y rellenada a mano ------------------ */
.pagina-seccion .hoja-cara > .ficha{
  background:var(--pap-tabla) url('assets/textura/fibra.png') 0 0/240px repeat;
  background-blend-mode:multiply;
  padding:0; column-gap:0; row-gap:0;
  box-shadow:0 0 0 1.5px rgba(18,22,14,.62), calc(.35 * var(--vw)) calc(.8 * var(--vh)) calc(1.4 * var(--vh)) rgba(18,22,14,.3);
  clip-path:none; filter:none;
}
.pagina-seccion .ficha dt,
.pagina-seccion .ficha dd{
  padding:.42em .9em; align-self:stretch; display:flex; align-items:center;
  border-bottom:1.5px solid rgba(18,22,14,.55);
}
.pagina-seccion .ficha dt{
  border-right:1.5px solid rgba(18,22,14,.55);
  font-variant:small-caps; letter-spacing:.06em; font-weight:600;
  color:#121611; background:rgba(255,255,255,.14);
}
/* lo escrito a mano ENCIMA de lo impreso, que es lo del fotograma de la tabla */
.pagina-seccion .ficha dd{
  font-family:'Caveat', cursive; font-style:normal; font-weight:600;
  font-size:1.42em; line-height:1; color:#1b2a3e;
  transform:rotate(-.6deg);
}
.pagina-seccion .ficha dt:last-of-type,
.pagina-seccion .ficha dd:last-of-type{ border-bottom:0; }

/* ---------- 4. LA LÁMINA DEL DIBUJO --------------------------------------- */
/* Papel casi blanco y grano MÁS FINO que el del libro: dos papeles que se
   distinguen al lado. Y el plato negro, que es su montaje. */
.pagina-seccion .hoja-cara > .pag-izq{
  background:var(--pap-slip) url('assets/textura/fibra.png') 0 0/700px repeat;
  background-blend-mode:multiply;
}

/* ---------- el fondo de la página: el pupitre, no otro papel -------------- */
/* Si el fondo es papel también, no hay nada contra lo que se lean las hojas.
   Va más oscuro y más neutro: las hojas flotan encima. */
.pagina-seccion .hoja-cara{
  background:
    url('assets/textura/fibra.png') 0 0/700px repeat,
    url('assets/textura/papel_macro.jpg') 0 0/1180px repeat,
    #b8b2a1;
  background-blend-mode:multiply, overlay, normal;
}
/* y la columna del manual va directamente sobre ese fondo, cortada por el
   borde, como el impreso del fotograma 1 */
.pagina-seccion .relleno-impreso.izq{ color:rgba(15,13,10,.66); z-index:1; }

/* ============================================================================
   EL PAPEL, BIEN — y cada hoja con su grano
   ----------------------------------------------------------------------------
   Medido, que es lo que me faltaba: la pendiente del espectro de potencia.
       escaneo de papel real   -2,70
       lo que yo llamaba fibra -0,48   <- eso es ruido blanco, o sea arena
       campo plano del escaneo -2,69
   El papel tiene estructura a TODAS las escalas. Mi filtro contra las bandas
   se cargaba las frecuencias bajas, y con ellas el papel. Lo que hay que
   hacerle a un escaneo es campo plano: dividirlo por su propio desenfoque
   grande. Quita la iluminación y la curvatura -las franjas- y no toca la
   textura. Banda vertical: 0,49 -> 0,13.

   Y no se repite: una sola imagen de 2200px a 'cover'. Sin mosaico no hay
   costura. Cada hoja usa OTRO trozo y a OTRA escala, y eso es lo que hace que
   se noten gramajes distintos puestas una al lado de la otra.
   ============================================================================ */

.pagina-seccion .hoja-cara{
  background:
    url('assets/textura/papel.jpg') center/cover no-repeat,
    #b8b2a1;
  background-blend-mode:multiply, normal;
}
/* el libro: grano gordo, papel de tripa */
.pagina-seccion .hoja-cara > .pag-der{
  background:
    url('assets/textura/papel.jpg') 22% 34%/155% auto no-repeat,
    var(--pap-libro);
  background-blend-mode:multiply, normal;
}
/* la lámina: papel más satinado, grano más fino */
.pagina-seccion .hoja-cara > .pag-izq{
  background:
    url('assets/textura/papel.jpg') 68% 58%/88% auto no-repeat,
    var(--pap-slip);
  background-blend-mode:multiply, normal;
}
/* la cartulina de la tabla: la más basta de las cuatro */
.pagina-seccion .hoja-cara > .ficha{
  background:
    url('assets/textura/papel.jpg') 44% 78%/260% auto no-repeat,
    var(--pap-tabla);
  background-blend-mode:multiply, normal;
}
/* el papelito de la nota */
.pagina-seccion .pegote{
  background:
    url('assets/textura/papel.jpg') 86% 14%/340% auto no-repeat,
    var(--pap-nota);
  background-blend-mode:multiply, normal;
}
/* la portada, del mismo papel que la hoja */
.hoja-pag .folio-apertura{
  background:
    url('assets/textura/papel.jpg') center/cover no-repeat,
    #cfc9b8;
  background-blend-mode:multiply, normal;
}

/* en 'ficha' el texto tiene cuatro filas y se salía 61px por abajo */
.pagina-seccion .hoja-cara[data-layout="ficha"] > .pag-der{ grid-area:4/5/9/13; }
.pagina-seccion .hoja-cara[data-layout="ficha"] > .pag-izq{ grid-area:1/5/4/10; }

/* ============================================================================
   MATERIAL — papel iluminado, gramaje, impresión y transparentación
   ----------------------------------------------------------------------------
   Lo que estaba haciendo mal, y era de fondo, no de ajuste:

     · TEXTURA. Yo TEÑÍA la hoja: una imagen de grano en multiply, y cuando
       cantaba le bajaba la opacidad. El papel de una foto no está teñido,
       está ILUMINADO — tiene relieve, una dirección de luz, brillo por un
       lado y sombra por el otro. Ahora los papeles son un render: campo de
       alturas (fibra del escaneo real + ondulación de la hoja), normales y
       luz difusa + especular desde arriba a la izquierda.

     · GRAMAJE. No se ve en el tamaño del grano. Se ve en CUÁNTO ONDULA la
       hoja y en el canto y la sombra que echa. Un papel fino ondula en
       pliegues largos; una cartulina está tiesa y solo raspa. Medido:
           libro   ondula 6,8  raspa 4,9
           lámina  ondula 10,5 raspa 4,4
           cartón  ondula 1,9  raspa 4,6   <- la única tiesa, y es la cartulina
           nota    ondula 14,0 raspa 3,8   <- papelito arrugado

     · BORDES. Tenía filetes negros de 1,5px alrededor de la ficha y de la
       hoja. Un papel no tiene contorno: tiene canto y sombra. Fuera.

     · IMPRESIÓN y TRANSPARENTACIÓN: filtro de tinta en el texto y el reverso
       de la hoja al 16% y desenfocado, que es como se transparenta de verdad.
   ============================================================================ */

/* ---------- los papeles: color YA cocido en el render, así que 'normal' ---- */
.pagina-seccion .hoja-cara{
  background:url('assets/textura/pl_fondo.jpg') center/cover no-repeat;
  background-blend-mode:normal;
}
.hoja-pag .folio-apertura{
  background:url('assets/textura/pl_libro.jpg') center/cover no-repeat;
  background-blend-mode:normal;
}
.pagina-seccion .hoja-cara > .pag-der{
  background:url('assets/textura/pl_libro.jpg') 20% 30%/135% auto no-repeat;
  background-blend-mode:normal;
}
.pagina-seccion .hoja-cara > .pag-izq{
  background:url('assets/textura/pl_lamina.jpg') 60% 55%/115% auto no-repeat;
  background-blend-mode:normal;
}
.pagina-seccion .hoja-cara > .ficha{
  background:url('assets/textura/pl_carton.jpg') 40% 70%/150% auto no-repeat;
  background-blend-mode:normal;
}
.pagina-seccion .pegote{
  background:url('assets/textura/pl_nota.jpg') 75% 25%/260% auto no-repeat;
  background-blend-mode:normal;
}

/* ---------- fuera los filetes; la hoja se apoya, no se dibuja ------------- */
/* Sombra de contacto: corta y pegada al canto (ahí es donde el ojo lee el
   grosor), más una segunda difusa que la separa del fondo. */
.pagina-seccion .hoja-cara > .pag-der{
  box-shadow:
    0 calc(.18 * var(--vh)) calc(.28 * var(--vh)) rgba(28,22,12,.42),
    calc(.28 * var(--vw)) calc(.9 * var(--vh)) calc(2.2 * var(--vh)) rgba(28,22,12,.30);
}
.pagina-seccion .hoja-cara > .ficha{
  box-shadow:
    0 calc(.16 * var(--vh)) calc(.24 * var(--vh)) rgba(24,26,18,.40),
    calc(.2 * var(--vw)) calc(.7 * var(--vh)) calc(1.6 * var(--vh)) rgba(24,26,18,.26);
  border:0;
}
.pagina-seccion .pegote{
  filter:drop-shadow(0 calc(.14 * var(--vh)) calc(.2 * var(--vh)) rgba(30,24,10,.4)) drop-shadow(calc(.14 * var(--vw)) calc(.5 * var(--vh)) calc(1 * var(--vh)) rgba(30,24,10,.26));
}
/* la tabla: las rayas, del color de la tinta de la pauta y no negro duro */
.pagina-seccion .ficha dt,
.pagina-seccion .ficha dd{ border-bottom:1px solid rgba(40,54,40,.38); }
.pagina-seccion .ficha dt{ border-right:1px solid rgba(40,54,40,.38); background:none; }

/* el canto levantado de la hoja del libro: más fino y con su sombra, que es
   donde de verdad se lee el gramaje */
.pagina-seccion .hoja-cara > .pag-der::after{
  left:calc(-.5 * var(--vw)); width:calc(.5 * var(--vw)); top:calc(-.5 * var(--vh)); bottom:calc(-.9 * var(--vh));
  background:linear-gradient(90deg, rgba(30,24,12,.03), #f3efe2 30%, #e2dccb 70%, rgba(30,24,12,.30));
  box-shadow:calc(-.1 * var(--vw)) 0 calc(.35 * var(--vw)) rgba(30,24,12,.26);
}

/* ---------- transparentación: se tiene que NOTAR ------------------------- */
.pagina-seccion .pag-der > .relleno-impreso.der{
  color:rgba(38,28,10,.155);
  filter:blur(1.1px);                 /* el papel difunde lo del otro lado */
}
.pagina-seccion .pag-der > .relleno-impreso.der b{ color:rgba(38,28,10,.2); }

/* ---------- impresión: la tinta se mete en la fibra ---------------------- */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .titulo-apunte,
.pagina-seccion .relleno-impreso.izq,
.pagina-seccion .ficha dt,
.pagina-seccion .epigrafe{ filter:url(#tinta); }

/* la marca y lo escrito a mano NO llevan ese filtro: eso no está impreso,
   está hecho a mano, y ya trae su propio grano de lápiz */

/* ============================================================================
   LA PORTADA, CON LAS MISMAS PIEZAS QUE LAS SECCIONES
   ----------------------------------------------------------------------------
   Por qué no parecía papel y por qué retocar la textura no iba a arreglarlo:
   la portada era UNA textura a sangre, de borde a borde. Sin canto, sin
   sombra, sin nada impreso encima y sin ningún objeto que diera escala. Una
   superficie infinita no puede leerse como una hoja — no hay con qué
   compararla. Da igual el grano que le pongas.

   Lo que la hace papel es lo mismo que ya funciona en las secciones:
       una MESA de fondo, y encima una HOJA con su canto y su sombra,
       con algo IMPRESO en ella y una lámina MONTADA.
   ============================================================================ */

/* la mesa: el fondo deja de ser papel */
.apertura-cuaderno .cuaderno-escena{
  width:100%; height:100%; aspect-ratio:auto; filter:none;
  background:url('assets/textura/pl_fondo.jpg') center/cover no-repeat;
}

/* la hoja: ya no va a sangre. Tiene canto y echa sombra sobre la mesa. */
.apertura-cuaderno .folio-apertura{
  position:absolute; inset:calc(3.2 * var(--vh)) calc(3 * var(--vw));
  background:url('assets/textura/pl_libro.jpg') 20% 30%/128% auto no-repeat;
  border:0; border-radius:0;
  box-shadow:
    0 calc(.2 * var(--vh)) calc(.3 * var(--vh)) rgba(28,22,12,.44),
    calc(.3 * var(--vw)) calc(1 * var(--vh)) calc(2.6 * var(--vh)) rgba(28,22,12,.34);
  overflow:hidden;
}

/* la columna del manual, impresa en la hoja y cortada por el canto */
.apertura-cuaderno .relleno-impreso{
  position:absolute; z-index:2; pointer-events:none; user-select:none;
  top:-4%; bottom:-6%; padding:0; columns:1;
  font-family:'Crimson Text', Georgia, serif;
  font-size:clamp(.54rem,calc(.66 * var(--vw)),.78rem); line-height:1.55;
  text-align:justify; hyphens:auto;
  color:rgba(15,13,10,.66);
  filter:url(#tinta);
}
/* Con más texto del que cabe, el multicolumna NO recorta: crea columnas de
   más y las saca por la derecha fuera de la caja. Por eso el impreso se
   desparramaba por toda la pantalla, dentro y fuera de la hoja. */
.relleno-impreso{ overflow:hidden; }
.apertura-cuaderno .relleno-impreso.izq{ overflow:visible; }
.apertura-cuaderno .relleno-impreso p{ margin:0 0 .55em; text-indent:1.1em; }
.apertura-cuaderno .relleno-impreso b{ color:rgba(15,13,10,.9); }
.apertura-cuaderno .relleno-impreso.izq{ left:calc(2.4 * var(--vw)); width:13.5%; }
/* y el reverso de la hoja, transparentando */
.apertura-cuaderno .relleno-impreso.der{
  left:0; right:0; top:0; bottom:0; width:auto; z-index:0;
  padding:calc(6 * var(--vh)) 18% calc(6 * var(--vh)) 18%; columns:2; column-gap:calc(3 * var(--vw));
  transform:scaleX(-1); filter:blur(1.1px);
  font-size:clamp(.8rem,calc(1.1 * var(--vw)),1.35rem); line-height:1.45;
  color:rgba(38,28,10,.13);
}
.apertura-cuaderno .relleno-impreso.der b{ color:rgba(38,28,10,.17); }

/* la lámina montada: el dibujo deja de flotar en medio de la nada */
.apertura-cuaderno #canvasApertura{
  left:34%; right:5%; top:7%; bottom:7%; width:auto; height:auto; z-index:3;
  background:url('assets/textura/pl_lamina.jpg') 55% 50%/125% auto no-repeat;
  box-shadow:
    0 0 0 calc(.5 * var(--vw)) #13110e,
    calc(1 * var(--vw)) calc(1.1 * var(--vw)) 0 calc(.5 * var(--vw)) #13110e,
    0 calc(2 * var(--vh)) calc(3 * var(--vh)) rgba(10,8,5,.4);
}

/* el bloque de portada, con la misma gramática que el de las secciones */
.apertura-cuaderno .folio-kicker{
  top:calc(8 * var(--vh)); left:calc(5.4 * var(--vw)); z-index:6;
  background:#13110e; color:#efece2; padding:.42em 1.1em .38em;
  font:600 clamp(.66rem,calc(.82 * var(--vw)),.95rem)/1 'Crimson Text', serif;
  letter-spacing:.26em; text-transform:uppercase;
  filter:url(#tinta);
}
.apertura-cuaderno .folio-nombre{
  top:calc(calc(8 * var(--vh)) + 2.8em); left:calc(5.4 * var(--vw)); z-index:6; max-width:24ch;
  font:700 clamp(1.9rem,calc(3.6 * var(--vw)),4.4rem)/.94 'Crimson Text', Georgia, serif;
  color:#0f0d0a; filter:url(#tinta);
}
.apertura-cuaderno .folio-nombre::after{ width:min(calc(24 * var(--vw)),440px); }
.apertura-cuaderno .folio-nota{
  left:calc(5.4 * var(--vw)); bottom:calc(9 * var(--vh)); z-index:6; max-width:22ch;
  font:400 clamp(.9rem,calc(1.1 * var(--vw)),1.3rem)/1.4 'Crimson Text', serif;
  color:rgba(20,17,12,.78); filter:url(#tinta);
}

/* el índice de rutas: en cartulina, como la ficha de las secciones */
.apertura-cuaderno .indice-rutas{
  left:calc(5.4 * var(--vw)); right:auto; top:auto; bottom:calc(20 * var(--vh)); width:min(calc(22 * var(--vw)),340px);
  background:url('assets/textura/pl_carton.jpg') 40% 70%/180% auto no-repeat;
  padding:calc(1.2 * var(--vh)) calc(1.1 * var(--vw)); z-index:7;
  box-shadow:0 calc(.16 * var(--vh)) calc(.24 * var(--vh)) rgba(24,26,18,.4), calc(.2 * var(--vw)) calc(.7 * var(--vh)) calc(1.6 * var(--vh)) rgba(24,26,18,.26);
  transform:rotate(-.7deg);
}
.apertura-cuaderno .indice-rutas-titulo{
  color:rgba(20,26,18,.7); font-size:clamp(.6rem,calc(.72 * var(--vw)),.8rem); letter-spacing:.24em;
}
.apertura-cuaderno .indice-rutas button{
  color:#111512; font-size:clamp(.9rem,calc(1.05 * var(--vw)),1.2rem);
  border-bottom:1px solid rgba(40,54,40,.3);
}

/* ============================================================================
   IMPRESIÓN — la tinta no llega a la cresta de la fibra
   ----------------------------------------------------------------------------
   Mirado a 3x, que es como habría que haberlo mirado desde el principio: el
   filtro SVG no rompía la letra, la DESENFOCABA. Desplazaba 0,6px, que a ese
   cuerpo es del orden del propio antialias, así que solo emborronaba. Parecía
   fuera de foco, no impreso. Fuera.

   Lo que pasa al imprimir sobre papel con grano es otra cosa: la tinta se
   queda en el valle y no cubre la cresta. La letra se rompe con la MISMA
   forma que la textura DE ESA hoja — y eso es lo que ata la tinta al papel en
   vez de dejarla pegada encima.

   Una capa de crestas (negra salvo en las crestas) en 'screen' por encima de
   todo: aclara la tinta donde el papel sobresale y no toca el papel, que ya
   es claro. Media de la capa: 12 sobre 255 en el papel de libro.
   ============================================================================ */

/* fuera el filtro que desenfocaba */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .titulo-apunte,
.pagina-seccion .relleno-impreso.izq,
.pagina-seccion .ficha dt,
.pagina-seccion .epigrafe,
.apertura-cuaderno .relleno-impreso,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-nota{ filter:none; }

/* tinta: negra de imprenta, que tira a cálida. El negro puro es de pantalla. */
:root{ --tinta:#191309; }
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte li{ color:#1b1409; }
.pagina-seccion .relleno-impreso.izq{ color:rgba(27,20,9,.82); }
.apertura-cuaderno .relleno-impreso.izq{ color:rgba(27,20,9,.82); }
.pagina-seccion .titulo-apunte,
.apertura-cuaderno .folio-nombre{ color:#191309; }

/* y un pelo de ganancia: la tinta se abre un poco en el papel, así que la
   letra impresa pesa algo más que la digital */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .relleno-impreso,
.apertura-cuaderno .relleno-impreso{ text-shadow:0 0 .38px currentColor; }

/* ---------- la capa de crestas, por encima de todo lo de la hoja ---------- */
/* Aprovecho .fondo-salp, que estaba en display:none desde hace tiempo, para
   no tocar el HTML. */
.pagina-seccion .hoja-cara .fondo-salp{
  display:block; position:absolute; inset:0; z-index:9; pointer-events:none;
  background:url('assets/textura/picos_fondo.jpg') center/cover no-repeat;
  mix-blend-mode:screen; opacity:0;
  transform:none; filter:none;
}
/* cada hoja rompe la tinta con SU propio grano */
.pagina-seccion .hoja-cara > .pag-der::before{
  display:block; content:''; position:absolute; inset:0; z-index:3;
  pointer-events:none;
  background:url('assets/textura/picos_libro.jpg') 20% 30%/135% auto no-repeat;
  mix-blend-mode:screen; opacity:.16;
}
.pagina-seccion .hoja-cara > .ficha::after{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:url('assets/textura/picos_carton.jpg') 40% 70%/150% auto no-repeat;
  mix-blend-mode:screen; opacity:.12;
}
.apertura-cuaderno .folio-apertura::after{
  content:''; position:absolute; inset:0; z-index:8; pointer-events:none;
  background:url('assets/textura/picos_libro.jpg') 20% 30%/128% auto no-repeat;
  mix-blend-mode:screen; opacity:.14; display:block;
}

/* ============================================================================
   FUERA MARCOS Y FUERA EL PARPADEO AL RECARGAR
   ----------------------------------------------------------------------------
   1. Al recargar se veían las páginas de las secciones un instante, antes de
      que el JS las colocara. Ahora no se pintan hasta que están montadas.
   2. Marcos que no me había pedido nadie: el plato negro alrededor de la
      lámina, las barras negras de cada encuadre, el recuadro negro del
      epígrafe y el margen de la portada. Fuera todo.
   ============================================================================ */

/* 1 — nada se pinta hasta que está montado */
#paginas{ visibility:hidden; }
html.listo #paginas{ visibility:visible; }

/* 2 — fuera los marcos */
.pagina-seccion .hoja-cara > .pag-izq{
  box-shadow:
    0 calc(.18 * var(--vh)) calc(.26 * var(--vh)) rgba(28,22,12,.42),
    calc(.26 * var(--vw)) calc(.8 * var(--vh)) calc(2 * var(--vh)) rgba(28,22,12,.28);
}
.pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-izq{
  box-shadow:
    0 calc(.18 * var(--vh)) calc(.26 * var(--vh)) rgba(28,22,12,.42),
    calc(-.26 * var(--vw)) calc(.8 * var(--vh)) calc(2 * var(--vh)) rgba(28,22,12,.28);
}
.pagina-seccion .hoja-cara::before{ display:none; }
.pagina-seccion .hoja-cara[data-layout="ficha"] > .ficha{ padding-top:calc(1.6 * var(--vh)); }
.pagina-seccion .hoja-cara[data-layout="ficha"] > .ficha::before{ content:none; }

/* el epígrafe: versalitas y una raya, sin recuadro */
.pagina-seccion .epigrafe,
.apertura-cuaderno .folio-kicker{
  background:none; color:rgba(30,24,14,.62); padding:0 0 .3em;
  border-bottom:1px solid rgba(30,24,14,.3);
}

/* la portada vuelve a ocupar la hoja entera: el margen no pintaba nada */
.apertura-cuaderno .folio-apertura{ inset:0; box-shadow:none; }
.apertura-cuaderno #canvasApertura{
  left:32%; right:3%; top:5%; bottom:5%;
  background:none; box-shadow:none;
}

/* y el hueco reservado para la columna del manual, el justo */
.pagina-seccion .hoja-cara{ padding-right:15.5%; }
.pagina-seccion .hoja-cara[data-layout="sangre"],
.pagina-seccion .hoja-cara[data-layout="linea"]{ padding-right:calc(3.4 * var(--vw)); padding-left:15.5%; }

/* ============================================================================
   PORTADA: el reverso se lee y no se puede leer
   ----------------------------------------------------------------------------
   Se transparenta tan fuerte que se LEE, y entonces no parece el reverso de
   la hoja: parece otra página impresa encima, y encima se come el nombre.
   Un reverso se intuye, no se lee.
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.der{
  color:rgba(38,28,10,.05);
  filter:blur(2px);
  /* Se cortaba en seco al 74% del ancho y ese canto se veía como una costura
     vertical de arriba abajo. El reverso de una hoja no se acaba a media
     hoja: ocupa la hoja entera. */
  padding:calc(7 * var(--vh)) calc(3.4 * var(--vw)); columns:4; column-gap:calc(3 * var(--vw));
}
.apertura-cuaderno .relleno-impreso.der b{ color:rgba(38,28,10,.075); }
.apertura-cuaderno .relleno-impreso.der,
.apertura-cuaderno .relleno-impreso.izq{ text-shadow:none; }

/* el nombre, despejado: la columna del manual no le pasa por debajo */
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nota{ left:calc(17.5 * var(--vw)); }
.apertura-cuaderno .relleno-impreso.izq{ left:calc(2.4 * var(--vw)); width:12.5%; }

/* la ondulación del papel, más menuda: a pantalla completa se veían manchones */
.apertura-cuaderno .folio-apertura{
  background-size:62% auto;
}
.pagina-seccion .hoja-cara{ background-size:70% auto; }

/* ============================================================================
   QUE EL PAPEL CUBRA
   ----------------------------------------------------------------------------
   Los cortes verticales de la portada eran míos: para que la ondulación no se
   viera como manchones había reducido el papel al 62%, y con 'no-repeat' a
   partir de ahí ya no cubría nada. Se arregla en el render (la ondulación, a
   la mitad), no en el CSS: así el papel puede ir a 'cover' otra vez.
   ============================================================================ */
.apertura-cuaderno .folio-apertura,
.pagina-seccion .hoja-cara{ background-size:cover; }
.pagina-seccion .hoja-cara > .pag-der{ background-size:cover; }
.pagina-seccion .hoja-cara > .pag-izq{ background-size:cover; }
.pagina-seccion .hoja-cara > .ficha{ background-size:cover; }
.pagina-seccion .pegote{ background-size:cover; }
.pagina-seccion .hoja-cara > .pag-der::before,
.pagina-seccion .hoja-cara > .ficha::after,
.apertura-cuaderno .folio-apertura::after{ background-size:cover; }

/* ============================================================================
   PAPELES REALES — se acabó fabricarlos
   ----------------------------------------------------------------------------
   Tenías razón: llevaba horas sintetizando algo que un escaneo da hecho.
   Estos son escaneos de papel de verdad, de Wikimedia Commons (categoría
   'Paper textures'), sin más proceso que recortar, escalar y llevar la media
   de tono a su sitio para que convivan. Nada de relieve inventado.

       mesa       Free dark vintage paper page texture     gris pardo, de fondo
       libro      Old paper6                               crema con foxing
       lámina     Old paper2                               crema pálido, limpio
       cartulina  Old paper4                               pardo, verjura marcada
       nota       Crumpled olive green paper               arrugado

   Créditos y licencias en assets/textura/CREDITOS.md
   ============================================================================ */

.pagina-seccion .hoja-cara{
  background:url('assets/textura/p_mesa.jpg') center/cover no-repeat;
}
.apertura-cuaderno .cuaderno-escena{
  background:url('assets/textura/p_mesa.jpg') center/cover no-repeat;
}
.apertura-cuaderno .folio-apertura,
.pagina-seccion .hoja-cara > .pag-der{
  background:url('assets/textura/p_libro.jpg') center/cover no-repeat;
}
.pagina-seccion .hoja-cara > .pag-izq{
  background:url('assets/textura/p_lamina.jpg') center/cover no-repeat;
}
.pagina-seccion .hoja-cara > .ficha{
  background:url('assets/textura/p_carton.jpg') center/cover no-repeat;
}
.pagina-seccion .pegote{
  background:url('assets/textura/p_nota.jpg') center/cover no-repeat;
}

/* Fuera la capa de crestas: era para romper la tinta sobre un papel que me
   había inventado. El papel real ya trae su propio grano y sus motas. */
.pagina-seccion .hoja-cara .fondo-salp{ display:none; }
.pagina-seccion .hoja-cara > .pag-der::before,
.pagina-seccion .hoja-cara > .ficha::after,
.apertura-cuaderno .folio-apertura::after{ content:none; display:none; }

/* ============================================================================
   REMATE sobre el papel real
   ----------------------------------------------------------------------------
   · El reverso se leía más que el propio texto. Sobre el papel de verdad, que
     ya trae manchas y foxing, hace falta muchísimo menos: un reverso se
     intuye entre las líneas, no se lee.
   · La cartulina se salía por el canto de abajo.
   ============================================================================ */

.pagina-seccion .pag-der > .relleno-impreso.der{
  color:rgba(40,28,10,.055);
  filter:blur(1.8px);
}
.pagina-seccion .pag-der > .relleno-impreso.der b{ color:rgba(40,28,10,.075); }
.apertura-cuaderno .relleno-impreso.der{
  color:rgba(40,28,10,.035);
  filter:blur(2.4px);
}
.apertura-cuaderno .relleno-impreso.der b{ color:rgba(40,28,10,.05); }

/* La cartulina se comía por arriba: la hoja del libro crece con su texto, se
   pasa de su hueco y le caía encima. En vez de pelearme con la rejilla, la
   pongo ENCIMA y desplazada — una ficha dejada sobre la página abierta, que
   es lo que es. Pisa el canto de la hoja y asoma sobre la mesa. */
.pagina-seccion .hoja-cara > .ficha{ z-index:6; }
.pagina-seccion .hoja-cara[data-layout="doble"]  > .pag-der{ grid-area:1/8/6/13; }
.pagina-seccion .hoja-cara[data-layout="doble"]  > .ficha  { grid-area:6/7/9/12; align-self:end; }
.pagina-seccion .hoja-cara[data-layout="sangre"] > .pag-der{ grid-area:1/1/6/6;  }
.pagina-seccion .hoja-cara[data-layout="sangre"] > .ficha  { grid-area:6/2/9/7;  align-self:end; }

/* la columna del manual, por delante de las hojas no: es lo IMPRESO en la
   página de debajo, así que va detrás */
.pagina-seccion .relleno-impreso.izq{ z-index:1; }

/* ============================================================================
   LUZ DE ESCENA, TINTA DENTRO DEL PAPEL Y CELO
   ----------------------------------------------------------------------------
   Por qué el texto parecía «tipografía encima» y no impresa: no es la letra,
   es que NADA compartía la luz. Cada hoja llevaba su textura por debajo y el
   texto iba pintado encima, perfecto y plano. En una foto no pasa eso: la luz
   entra por un lado y afecta IGUAL al papel y a la tinta.

   Así que ahora hay una capa por ENCIMA de todo, texto incluido:
       1. el grano del papel, en multiply  -> la tinta se rompe con la fibra
       2. la luz de la escena, rasante desde arriba a la izquierda
   Eso es lo que mete la tinta dentro del papel y lo que hace que las hojas
   pertenezcan a la misma foto.

   Y las sombras: las tenía enormes y difusas, y por eso cada trozo parecía
   una tarjeta flotando sobre un fondo. Un papel apoyado sobre otro papel echa
   una sombra CORTA y pegada al canto. Fuera la difusa.
   ============================================================================ */

/* ---------- 1. el grano del papel, por encima del texto ------------------ */
.pagina-seccion .hoja-cara .fondo-salp{
  display:block; position:absolute; inset:0; z-index:20; pointer-events:none;
  background:url('assets/textura/p_libro.jpg') 0 0/620px repeat;
  mix-blend-mode:multiply; opacity:.42;
  transform:none; filter:none;
}
.apertura-cuaderno .folio-apertura::after{
  content:''; display:block; position:absolute; inset:0; z-index:20;
  pointer-events:none;
  background:url('assets/textura/p_libro.jpg') 0 0/620px repeat;
  mix-blend-mode:multiply; opacity:.42;
}

/* ---------- 2. la luz, rasante y desde arriba a la izquierda ------------- */
.pagina-seccion .hoja-cara::before,
.apertura-cuaderno .folio-apertura::before{
  content:''; display:block; position:absolute; inset:0; z-index:21;
  pointer-events:none; background:
    radial-gradient(78% 62% at 24% 6%, rgba(255,250,236,.30), transparent 62%),
    linear-gradient(118deg,
      rgba(255,250,236,.16) 0%,
      rgba(255,250,236,.03) 26%,
      rgba(26,20,10,.10) 62%,
      rgba(22,16,7,.26) 88%,
      rgba(18,13,5,.38) 100%);
  mix-blend-mode:multiply; opacity:.85;
  width:auto; height:auto; top:0; right:0; bottom:0; left:0;
}
/* el multiply de arriba oscurece también los claros; compenso el papel */
.pagina-seccion .hoja-cara > .pag-der,
.pagina-seccion .hoja-cara > .pag-izq,
.pagina-seccion .hoja-cara > .ficha,
.apertura-cuaderno .folio-apertura{ filter:brightness(1.1); }

/* ---------- 3. las sombras: contacto, no tarjeta flotando ---------------- */
/* Corta, pegada al canto y hacia donde va la luz (abajo a la derecha). */
.pagina-seccion .hoja-cara > .pag-der,
.pagina-seccion .hoja-cara > .pag-izq{
  box-shadow:calc(.12 * var(--vw)) calc(.3 * var(--vh)) calc(.5 * var(--vh)) rgba(26,20,10,.42), calc(.3 * var(--vw)) calc(.7 * var(--vh)) calc(1.1 * var(--vh)) rgba(26,20,10,.2);
}
.pagina-seccion .hoja-cara > .ficha{
  box-shadow:calc(.1 * var(--vw)) calc(.22 * var(--vh)) calc(.38 * var(--vh)) rgba(26,20,10,.44), calc(.22 * var(--vw)) calc(.5 * var(--vh)) calc(.8 * var(--vh)) rgba(26,20,10,.18);
}
.pagina-seccion .pegote{
  filter:drop-shadow(calc(.08 * var(--vw)) calc(.2 * var(--vh)) calc(.3 * var(--vh)) rgba(26,20,10,.45));
}

/* ---------- 4. CELO. Es un cuaderno con cosas pegadas, y se tiene que ver -- */
.pagina-seccion .hoja-cara > .pag-izq::before,
.pagina-seccion .hoja-cara > .pag-izq::after,
.pagina-seccion .hoja-cara > .ficha::after{
  content:''; display:block; position:absolute; z-index:12; pointer-events:none;
  width:7.2em; height:2.05em;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.04) 34%, rgba(120,108,84,.10) 78%, rgba(255,255,255,.22)),
    linear-gradient(96deg, rgba(228,222,200,.62), rgba(238,233,214,.5) 45%, rgba(222,215,192,.6));
  box-shadow:0 calc(.1 * var(--vh)) calc(.28 * var(--vh)) rgba(30,24,12,.3);
  mix-blend-mode:multiply; opacity:.9;
}
.pagina-seccion .hoja-cara > .pag-izq::before{ left:-2.4em; top:1.6em;  transform:rotate(-42deg); }
.pagina-seccion .hoja-cara > .pag-izq::after { right:-2.4em; bottom:1.6em; transform:rotate(-42deg); }
.pagina-seccion .hoja-cara > .ficha::after   { right:-2em;  top:1.1em;  transform:rotate(38deg); width:6em; height:1.8em; }

/* el celo del papelito, que ya existía pero no se veía */
.pagina-seccion .pegote .celo{
  display:block; width:5.4em; height:1.7em; top:-.75em; z-index:3;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.04) 34%, rgba(120,108,84,.12) 78%, rgba(255,255,255,.24)),
    linear-gradient(96deg, rgba(228,222,200,.6), rgba(238,233,214,.48) 45%, rgba(222,215,192,.58));
  box-shadow:0 calc(.1 * var(--vh)) calc(.26 * var(--vh)) rgba(30,24,12,.3);
  mix-blend-mode:multiply; opacity:.92;
}

/* ---------- 5. el dibujo del índice, que estaba diminuto ----------------- */
.apertura-cuaderno #canvasApertura{
  left:29%; right:1.5%; top:2%; bottom:2%;
}
.apertura-cuaderno .relleno-impreso.izq{ width:11%; }
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nota{ left:calc(14 * var(--vw)); }

/* ============================================================================
   LA LUZ, QUE SE QUEDABA CORTA — y la cartulina, que pisaba la nota
   ============================================================================ */

/* Rasante de verdad: se tiene que notar de dónde viene. La diferencia entre
   la esquina iluminada y la del fondo pasa de un 26% a un 52%. */
/* Las barras negras de cada encuadre seguían fijando la posición del ::before,
   y como la luz usa ese mismo pseudoelemento, la luz se estaba metiendo en una
   tira de calc(1 * var(--vh)) de ancho en vez de cubrir la hoja. Eso era el palo oscuro que se
   veía en vertical. */
.pagina-seccion .hoja-cara[data-layout]::before{
  left:0; right:0; top:0; bottom:0; width:auto; height:auto;
}
.pagina-seccion .hoja-cara[data-layout]::before,
.apertura-cuaderno .folio-apertura::before{
  background:
    radial-gradient(64% 52% at 20% 4%, rgba(255,252,242,.42), transparent 66%),
    radial-gradient(46% 40% at 92% 96%, rgba(14,10,4,.30), transparent 70%),
    linear-gradient(116deg,
      rgba(255,252,242,.22) 0%,
      rgba(255,252,242,.02) 22%,
      rgba(24,18,8,.14) 54%,
      rgba(20,15,6,.34) 82%,
      rgba(16,11,4,.52) 100%);
  opacity:1;
}
.pagina-seccion .hoja-cara > .pag-der,
.pagina-seccion .hoja-cara > .pag-izq,
.pagina-seccion .hoja-cara > .ficha,
.apertura-cuaderno .folio-apertura{ filter:brightness(1.2); }

/* La cartulina se hunde a su lado en vez de caerle encima al papelito. */
.pagina-seccion .hoja-cara[data-layout="sangre"] > .ficha{ justify-self:end; }
.pagina-seccion .hoja-cara[data-layout="doble"]  > .ficha{ justify-self:end; }
.pagina-seccion .pegote{ max-width:22em; }

/* ============================================================================
   LOS ROBOTS: GRANDES Y EN EL CENTRO
   ----------------------------------------------------------------------------
   El canvas ocupa la hoja entera y el dibujo se centra dentro de él con la
   caja de encuadre de cada frame. NADA MÁS: aquí había también movido el
   nombre, bajado su cuerpo y escondido la columna del manual, y nada de eso
   estaba pedido. Fuera.
   ============================================================================ */
/* width/height explícitos: un <canvas> es un elemento reemplazado, así que
   con width:auto se queda en su tamaño intrínseco (817x706) por mucho que le
   pongas left:0 y right:0. Eso lo tenía a 817px en un viewport de 2560. */
.apertura-cuaderno #canvasApertura{
  left:0; right:0; top:0; bottom:0; width:100%; height:100%;
}

/* ============================================================================
   FUERA EL SOMBREADO DE LA IZQUIERDA
   ----------------------------------------------------------------------------
   Dos capas que había metido yo, ninguna pedida:

   · la «luz de escena» (un degradado en multiply sobre toda la hoja).
     Medido: dejaba la izquierda 10 puntos más oscura que la derecha.
   · el «grano de encima»: p_libro.jpg con background-repeat a 620px. Ese
     archivo es una foto de papel, NO es seamless, así que al repetirlo salía
     un canto duro cada 620px. Ese era el corte vertical.

   Las dos fuera. El papel se queda como está.
   ============================================================================ */
.pagina-seccion .hoja-cara::before,
.pagina-seccion .hoja-cara[data-layout]::before,
.apertura-cuaderno .folio-apertura::before{ content:none; display:none; }

.pagina-seccion .hoja-cara .fondo-salp,
.apertura-cuaderno .folio-apertura::after{ content:none; display:none; }

/* y el brillo que compensaba aquel multiply ya no hace falta */
.pagina-seccion .hoja-cara > .pag-der,
.pagina-seccion .hoja-cara > .pag-izq,
.pagina-seccion .hoja-cara > .ficha,
.apertura-cuaderno .folio-apertura{ filter:none; }

/* ============================================================================
   NADA DE DESTELLO AL CARGAR
   ----------------------------------------------------------------------------
   El color de fondo que había puesto arriba se lo comía el `background`
   abreviado de más abajo (el abreviado resetea background-color a
   transparente). Va en la última regla, que es la que manda, y así el primer
   pintado ya es el tono del papel en vez del fondo de la página.
   ============================================================================ */
.apertura-cuaderno .folio-apertura{ background-color:#c9c4b6; }
.apertura-cuaderno .cuaderno-escena{ background-color:#8f897b; }
.pagina-seccion .hoja-cara{ background-color:#8f897b; }
.pagina-seccion .hoja-cara > .pag-der{ background-color:#c9c4b6; }
.pagina-seccion .hoja-cara > .pag-izq{ background-color:#dedacf; }
.pagina-seccion .hoja-cara > .ficha{ background-color:#b9bcae; }
.pagina-seccion .pegote{ background-color:#c3bda4; }

/* ============================================================================
   QUE EL TEXTO SE VEA IMPRESO
   ----------------------------------------------------------------------------
   Lo que hace que su foto se lea como impresa, mirándola y anotándolo:

     1. va JUSTIFICADO y con palabras PARTIDAS ("non-play-er", "tradi-tional").
        Lo mío iba en bandera y sin partir: eso es composición de pantalla.
     2. interlínea CORTA, casi tocándose. Lo mío iba a 1,46.
     3. la tinta es densa y el borde no es perfecto: es una foto, así que hay
        medio píxel de blandura. Lo mío era un vector con el filo limpio.
     4. el grano del papel pasa POR ENCIMA de la letra, no por debajo.

   El punto 4 lo había quitado porque salían costuras verticales, pero eso era
   culpa del archivo de entonces (un escaneo de papel viejo). El de ahora sale
   de Paper005, que es tileable: salto en la unión 2,50 contra 2,45 de salto
   normal. Sin costura.
   ============================================================================ */

/* 1 y 2 — composición de libro */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .relleno-impreso,
.apertura-cuaderno .relleno-impreso{
  text-align:justify; hyphens:auto; -webkit-hyphens:auto;
  text-wrap:pretty;
}
.pagina-seccion .cuerpo-apunte{ line-height:1.26; }
.pagina-seccion .lista-apunte{ line-height:1.24; }
.pagina-seccion .relleno-impreso,
.apertura-cuaderno .relleno-impreso{ line-height:1.34; }

/* 3 — la tinta: densa y con el filo de una foto, no de un vector */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .titulo-apunte,
.pagina-seccion .epigrafe,
.pagina-seccion .ficha dt,
.pagina-seccion .relleno-impreso.izq,
.apertura-cuaderno .relleno-impreso.izq,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nota{
  filter:url(#impreso);
  -webkit-font-smoothing:antialiased;
}

/* 4 — el grano del papel, por encima de la letra */
.pagina-seccion .hoja-cara .fondo-salp{
  content:normal; display:block; position:absolute; inset:0; z-index:20;
  pointer-events:none;
  background:url('assets/textura/p_grano.png') 0 0/auto repeat;
  mix-blend-mode:multiply; opacity:1;
  transform:none; filter:none;
}
.apertura-cuaderno .folio-apertura::after{
  content:''; display:block; position:absolute; inset:0; z-index:20;
  pointer-events:none;
  background:url('assets/textura/p_grano.png') 0 0/auto repeat;
  mix-blend-mode:multiply; opacity:1;
}

/* ============================================================================
   LA CAPA QUE ROMPE LA TINTA
   ----------------------------------------------------------------------------
   Medido antes: papel desviación 1,95 y tinta 2,22. O sea papel casi liso y
   tinta completamente plana — por eso se leía como un vector.

   Con una sola capa en multiply era imposible arreglarlo: multiplicar un
   casi-negro (21) por 0,98 sigue siendo 21. Al imprimir sobre papel con grano
   pasan DOS cosas y hacen falta las dos capas:

     p_grano.png   multiply  hunde los valles del papel
     p_cresta.png  screen    aclara las crestas, y ahí es donde la fibra asoma
                             por encima de la tinta y la rompe

   Predicho sobre estas dos: papel 191 (desv 7,3), tinta 28 (desv 10,7).
   ============================================================================ */
.pagina-seccion .hoja-cara::before,
.pagina-seccion .hoja-cara[data-layout]::before,
.apertura-cuaderno .folio-apertura::before{
  content:''; display:block; position:absolute; inset:0; z-index:21;
  pointer-events:none;
  background:url('assets/textura/p_cresta.png') 0 0/auto repeat;
  mix-blend-mode:screen; opacity:1;
  width:auto; height:auto; left:0; right:0; top:0; bottom:0;
  filter:none; transform:none;
}

/* ============================================================================
   FUERA LAS CAPAS DE ENCIMA — el fondo se queda como estaba
   ----------------------------------------------------------------------------
   Para romper la tinta habia puesto dos capas a pagina completa (grano en
   multiply y crestas en screen). Era el instrumento equivocado: para arreglar
   las letras estropeaba TODO lo demas. Medido: el grano del papel paso de
   1,95 a 10,8 cuando una foto de papel esta en ~8. O sea que le meti ruido a
   un papel que estaba limpio, y encima el 'screen' le subia el tono.

   La rotura de la tinta va DENTRO del filtro de la letra, que es lo unico que
   tiene que romperse. El papel no se toca.
   ============================================================================ */
.pagina-seccion .hoja-cara .fondo-salp,
.pagina-seccion .hoja-cara::before,
.pagina-seccion .hoja-cara[data-layout]::before,
.apertura-cuaderno .folio-apertura::before,
.apertura-cuaderno .folio-apertura::after{ content:none; display:none; }


/* ============================================================================
   LA COLUMNA IMPRESA, AL TAMAÑO Y AL TONO DE LA REFERENCIA
   ----------------------------------------------------------------------------
   Medido en su foto contra la mía, en el mismo sitio:

                        su foto    la mía
       papel              205        196
       tinta               30         47    <- gris, no negra
       contraste          175        149
       línea / ancho     1/13,7     1/16,8  <- 23% pequeña

   O sea que el texto no se leía impreso porque estaba claro y pequeño, no
   por el filtro. La tinta pasa a plena (sin alfa) y el cuerpo sube un 23%
   para que la línea ocupe la misma parte de su columna que en su página.
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.izq,
.pagina-seccion .relleno-impreso.izq{
  color:#1b1409;                                   /* tinta, no gris */
  font-size:clamp(.68rem,calc(.82 * var(--vw)),.96rem);            /* 12,5px -> 15,4px */
  line-height:1.34;
}
.apertura-cuaderno .relleno-impreso.izq b,
.pagina-seccion .relleno-impreso.izq b{ color:#100c05; }

/* ============================================================================
   LA TINTA, EN MULTIPLY SOBRE EL PAPEL
   ----------------------------------------------------------------------------
   Esto es lo que me faltaba y es una línea. La tinta no se pinta ENCIMA del
   papel tapándolo: el papel se ve a través de ella. En multiply, negro sobre
   papel da la fibra del papel dentro de la letra — y la letra queda más
   oscura donde el papel es oscuro y menos donde tiene una mota clara.

   Es lo mismo que hace la técnica documentada con <feBlend mode="multiply">
   entre el texto y el fondo, pero aquí el papel ya está detrás, así que basta
   con el modo de fusión.
   ============================================================================ */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .titulo-apunte,
.pagina-seccion .epigrafe,
.pagina-seccion .num-pag,
.pagina-seccion .ficha dt,
.pagina-seccion .ficha dd,
.pagina-seccion .relleno-impreso.izq,
.pagina-seccion .margen-nota,
.pagina-seccion .pie-dibujo,
.apertura-cuaderno .relleno-impreso.izq,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nota{
  mix-blend-mode:multiply;
}

/* ============================================================================
   LA TIPOGRAFÍA DE LO IMPRESO
   ----------------------------------------------------------------------------
   Elegida comparando con su referencia, con el mismo texto y el mismo ancho de
   columna, no a ojo:

     Crimson Text / EB Garamond   altura de x pequeña, mancha clara      no
     Libre Baskerville            ancha, la mitad de palabras por línea  no
     Tinos                        muy parecida (Times), algo más ligera  casi
     PT Serif                     x grande, serifas rectas, mancha oscura  SÍ

   En su foto entra `At any time, a player may attempt to recruit non-play-`
   en una línea: eso es una serif económica y de mancha pesada, no una
   old-style aireada como la que yo tenía puesta.
   Caveat se queda donde estaba: lo manuscrito no cambia.
   ============================================================================ */
.mesa, .pagina-seccion, .hoja-pag,
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .titulo-apunte,
.pagina-seccion .epigrafe,
.pagina-seccion .num-pag,
.pagina-seccion .margen-nota,
.pagina-seccion .pie-dibujo,
.pagina-seccion .ficha dt,
.pagina-seccion .relleno-impreso,
.apertura-cuaderno .relleno-impreso,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nota,
.hoja-pag .indice-rutas button,
.volver-hoja{ font-family:'PT Serif', Georgia, serif; }


/* ============================================================================
   TAMAÑO REAL Y PAPEL, AL DE LA REFERENCIA
   ----------------------------------------------------------------------------
   La proporción línea/columna ya coincidía (1/13,7), pero en PANTALLA el
   tipo seguía siendo más pequeño que el suyo, porque mi columna es más
   estrecha en píxeles:

       su foto   altura de línea ~26 px   altura de mayúscula ~13 px
       la mía    altura de línea  20,6    altura de mayúscula  ~10

   O sea un 26% pequeño a tamaño real. La columna se ensancha y el cuerpo
   sube en la misma proporción, para que la línea mida sus 26 px.
   Y el papel, de 196 a 205, que es lo único que faltaba del tono.
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.izq{ width:15.5%; }
.pagina-seccion .relleno-impreso.izq{ width:19%; }
.apertura-cuaderno .relleno-impreso.izq,
.pagina-seccion .relleno-impreso.izq{
  font-size:clamp(.86rem,calc(1.04 * var(--vw)),1.22rem);   /* 15,4 -> 19,4 px */
  line-height:1.34;                          /* -> 26 px de línea */
}

/* el papel, cuatro puntos y medio más claro */
.apertura-cuaderno .folio-apertura,
.pagina-seccion .hoja-cara > .pag-der{ filter:brightness(1.046); }

/* Afinado contra la referencia:
     ancho de columna  397 -> 358 px, para que línea/columna vuelva a 1/13,7
     tinta             16 -> 30, que la mía salía MÁS negra que la suya
     contraste         189 -> 175                                            */
.apertura-cuaderno .relleno-impreso.izq{ width:14%; }
.pagina-seccion .relleno-impreso.izq{ width:17.2%; }
.apertura-cuaderno .relleno-impreso.izq,
.pagina-seccion .relleno-impreso.izq{ color:#2a2114; }
.apertura-cuaderno .relleno-impreso.izq b,
.pagina-seccion .relleno-impreso.izq b{ color:#1d160c; }

/* Al ensanchar la columna impresa para que la línea midiera sus 26 px, la
   columna se comió el bloque del nombre. El nombre se aparta lo justo para
   quedar a su derecha: la columna acaba en 400 px. */
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-nota,
.apertura-cuaderno .indice-rutas{ left:calc(calc(2.4 * var(--vw)) + 400px); }

/* ============================================================================
   IGUALADO A LA REFERENCIA, YA MEDIDA SOBRE SU ARCHIVO
   ----------------------------------------------------------------------------
   Hasta aquí los números de su foto me los inventaba mirándola. Medidos de
   verdad, casi todos los míos iban al revés:

                     su referencia   la mía
       altura línea      16 px        26 px    <- la hice un 60% más grande
       papel RGB      185,186,174  211,202,182 <- la acababa de calentar, y su
       saturación        7,0%        13,5%        papel es NEUTRO
       grano             19,2         7,8      <- el suyo es mucho más granulado
       filo de letra     76          123       <- la mía, un 60% más afilada
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.izq,
.pagina-seccion .relleno-impreso.izq{
  font-size:clamp(.54rem,calc(.64 * var(--vw)),.76rem);   /* línea 26 px -> 16 px */
  line-height:1.34;
}
.apertura-cuaderno .relleno-impreso.izq{ width:9%; }
.pagina-seccion .relleno-impreso.izq{ width:11%; }
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-nota,
.apertura-cuaderno .indice-rutas{ left:calc(calc(2.4 * var(--vw)) + 250px); }

/* el papel ya viene con su tono: fuera el aclarado que le había puesto */
.apertura-cuaderno .folio-apertura,
.pagina-seccion .hoja-cara > .pag-der{ filter:none; }

/* y el grano del papel, por encima de todo: el suyo mide 19,2 y el mío 7,8 */
.pagina-seccion .hoja-cara .fondo-salp{
  display:block; position:absolute; inset:0; z-index:20; pointer-events:none;
  background:url('assets/textura/p_grano.png') 0 0/auto repeat;
  mix-blend-mode:multiply; opacity:1; transform:none; filter:none;
}
.apertura-cuaderno .folio-apertura::after{
  content:''; display:block; position:absolute; inset:0; z-index:20;
  pointer-events:none;
  background:url('assets/textura/p_grano.png') 0 0/auto repeat;
  mix-blend-mode:multiply; opacity:1;
}

/* ============================================================================
   AL DOBLE: EL TAMAÑO DE SU REFERENCIA
   ----------------------------------------------------------------------------
   Medido sobre su archivo, y las dos medidas dicen lo mismo:

       grosor del palo   suyo 4,0 px   mío 2,0 px
       interlínea        suya 16,0 px  mía 7,7 px

   Su texto está al DOBLE. Por eso no se parecía por mucho filtro que le
   pusiera: a 12 px una letra no tiene sitio donde enseñar la ganancia de
   tinta ni el filo empapado. A 24 px sí.
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.izq,
.pagina-seccion .relleno-impreso.izq{
  font-size:clamp(1.05rem,calc(1.28 * var(--vw)),1.5rem);   /* 12,2 px -> 24,3 px */
  line-height:1.34;
}
.apertura-cuaderno .relleno-impreso.izq{ width:17.5%; }
.pagina-seccion .relleno-impreso.izq{ width:21%; }
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-nota,
.apertura-cuaderno .indice-rutas{ left:calc(calc(2.4 * var(--vw)) + 470px); }
.pagina-seccion .hoja-cara{ padding-right:23%; }
.pagina-seccion .hoja-cara[data-layout="sangre"],
.pagina-seccion .hoja-cara[data-layout="linea"]{ padding-right:calc(3.4 * var(--vw)); padding-left:23%; }

/* ============================================================================
   LA PROPORCIÓN DEL PALO
   ----------------------------------------------------------------------------
   La medida que faltaba: en su página el palo mide 4 px con una interlínea de
   16 — o sea el 25% de la línea. En la mía era el 6,5%. Eso no es un filtro
   ni un tamaño: su texto está en NEGRITA (o el vídeo se la ha engordado tanto
   que lo parece). Una regular, a cualquier cuerpo, nunca va a dar ese peso.

   Así que el impreso va en negrita y el cuerpo vuelve a un tamaño sensato:
   lo que importa es la proporción palo/línea, no el tamaño absoluto de un
   primer plano de vídeo.
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.izq,
.pagina-seccion .relleno-impreso.izq{
  font-weight:700;
  font-size:clamp(.72rem,calc(.86 * var(--vw)),1rem);
  line-height:1.34;
}
.apertura-cuaderno .relleno-impreso.izq{ width:12%; }
.pagina-seccion .relleno-impreso.izq{ width:14.5%; }
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-nota,
.apertura-cuaderno .indice-rutas{ left:calc(calc(2.4 * var(--vw)) + 330px); }
.pagina-seccion .hoja-cara{ padding-right:16.5%; }
.pagina-seccion .hoja-cara[data-layout="sangre"],
.pagina-seccion .hoja-cara[data-layout="linea"]{ padding-right:calc(3.4 * var(--vw)); padding-left:16.5%; }

/* Fuera el granulado del fondo. Lo volví a poner y me lo habías dicho ya:
   tocando el fondo no se arregla nada. */
.pagina-seccion .hoja-cara .fondo-salp,
.apertura-cuaderno .folio-apertura::after{ content:none; display:none; }

/* El corte duro de la tinta necesita cuerpo donde extenderse. En el epígrafe
   en versalitas, el número de página y los pies —que van a 10-12 px y con
   letra fina— se come la letra entera. Ésos se quedan sin el filtro. */
.pagina-seccion .epigrafe,
.pagina-seccion .num-pag,
.pagina-seccion .pie-dibujo,
.pagina-seccion .margen-nota,
.pagina-seccion .ficha dt,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nota{ filter:none; }

/* ============================================================================
   CORREGIDO CONTRA LA FOTO BUENA
   ----------------------------------------------------------------------------
   El primer archivo que medí era un fotograma de vídeo muy comprimido: la
   compresión había engordado y fundido las letras, y de ahí saqué que su
   tinta era gorda y blanda. En la foto de verdad NO lo es — es negra, limpia
   y de peso normal. Así que fuera la negrita y fuera el corte duro.

       su foto     papel RGB(220,221,210)  sat 5,2%   L 220
       la mía      papel RGB(210,203,193)  sat 8,2%   L 204   <- el amarillo

   Y la columna se ensancha: justificada y estrecha salían ríos de espacios
   entre palabras, que en su página no hay.
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.izq,
.pagina-seccion .relleno-impreso.izq{
  font-weight:400;
  font-size:clamp(.78rem,calc(.92 * var(--vw)),1.08rem);
  line-height:1.4;
}
.apertura-cuaderno .relleno-impreso.izq{ width:17%; }
.pagina-seccion .relleno-impreso.izq{ width:19%; }
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-nota,
.apertura-cuaderno .indice-rutas{ left:calc(calc(2.4 * var(--vw)) + 460px); }
.pagina-seccion .hoja-cara{ padding-right:21%; }
.pagina-seccion .hoja-cara[data-layout="sangre"],
.pagina-seccion .hoja-cara[data-layout="linea"]{ padding-right:calc(3.4 * var(--vw)); padding-left:21%; }

/* ============================================================================
   FUERA EL FILTRO DE LA LETRA
   ----------------------------------------------------------------------------
   Probado el mismo texto de tres formas y mirado a 6 aumentos:

       con mi filtro   fina, grisácea y con el borde a escalones
       sin nada        negra, maciza, borde continuo   <- la que se parece
       sólo ganancia   aún más fina

   O sea que el «efecto» que llevaba montando era exactamente lo que hacía que
   se vieran los píxeles: el corte duro cuantiza el antialiasing y deja el
   borde escalonado, y el desplazamiento mete temblor de un píxel. El propio
   render del navegador está más cerca de su foto que nada de lo que yo le
   pusiera encima.

   Se queda sólo el multiply, que ése sí es físico: el papel se ve a través de
   la tinta.
   ============================================================================ */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .titulo-apunte,
.pagina-seccion .epigrafe,
.pagina-seccion .num-pag,
.pagina-seccion .margen-nota,
.pagina-seccion .pie-dibujo,
.pagina-seccion .ficha dt,
.pagina-seccion .ficha dd,
.pagina-seccion .relleno-impreso,
.pagina-seccion .relleno-impreso.izq,
.apertura-cuaderno .relleno-impreso,
.apertura-cuaderno .relleno-impreso.izq,
.apertura-cuaderno .folio-nombre,
.apertura-cuaderno .folio-kicker,
.apertura-cuaderno .folio-nota{ filter:none; }

/* ============================================================================
   LA TINTA, CON GANANCIA CONTINUA
   ----------------------------------------------------------------------------
   Quitar el efecto no era la solución, era rendirme. El problema no era tener
   efecto: era que el que tenía usaba operaciones DISCRETAS.

     feMorphology  es un máximo por píxel: no sabe hacer medio píxel, engorda
                   a saltos de píxel entero -> escalones en el borde
     corte duro    cuantiza el antialiasing -> más escalones

   La curva GAMMA sobre el alfa es continua: reparte el engorde en fracciones
   de píxel. Medido sobre el mismo texto, a 6 aumentos:

                        cobertura de tinta   borde «todo o nada»
       sin filtro            18,5%                56,3%
       el viejo (discreto)   33,8%                81,8%   <- los píxeles
       el nuevo (continuo)   23,5%                63,9%
       su foto               45,4%                32%
   ============================================================================ */
.pagina-seccion .cuerpo-apunte,
.pagina-seccion .lista-apunte,
.pagina-seccion .titulo-apunte,
.pagina-seccion .relleno-impreso.izq,
.apertura-cuaderno .relleno-impreso.izq,
.apertura-cuaderno .folio-nombre{ filter:url(#tintaContinua); }

/* ============================================================================
   LOS RÓTULOS SUELTOS, AL MISMO ESTILO IMPRESO
   ----------------------------------------------------------------------------
   «PORTFOLIO / 2026», «abre el cuaderno / por la esfera» y «PULSA PARA ABRIR»
   iban por libre: aire de web, gris claro y sin tinta. En una página impresa
   eso son dos cosas concretas:

     · el kicker es una CABECERA de página — versalitas apretadas, en tinta,
       con su filete debajo,
     · lo demás son ACOTACIONES — cursiva del mismo tipo, que es como se
       marca en un manual lo que no es el texto principal.

   Y las tres pasan por la misma tinta que el resto.
   ============================================================================ */

.apertura-cuaderno .folio-kicker{
  font:700 clamp(.6rem,calc(.72 * var(--vw)),.84rem)/1 'PT Serif', Georgia, serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:#1b1409; border-bottom:1.5px solid #1b1409; padding-bottom:.34em;
  filter:url(#tintaContinua); mix-blend-mode:multiply;
}

.apertura-cuaderno .folio-nota{
  font:italic 400 clamp(.9rem,calc(1.06 * var(--vw)),1.24rem)/1.4 'PT Serif', Georgia, serif;
  color:#241c10; letter-spacing:0;
  filter:url(#tintaContinua); mix-blend-mode:multiply;
}

.apertura-cuaderno .esfera-ayuda,
.apertura-cuaderno .apertura-pista{
  font:italic 700 clamp(.58rem,calc(.7 * var(--vw)),.8rem)/1 'PT Serif', Georgia, serif;
  letter-spacing:.1em; text-transform:uppercase; color:#241c10;
  filter:url(#tintaContinua); mix-blend-mode:multiply;
}

/* el pie de cada sección y la nota al margen, igual */
.pagina-seccion .pie-dibujo,
.pagina-seccion .margen-nota{
  font-style:italic; color:#241c10;
  filter:url(#tintaContinua); mix-blend-mode:multiply;
}

/* ============================================================================
   PORTADA A PERIÓDICO  ·  propuesta
   ----------------------------------------------------------------------------
   Tres cosas, que son las que pediste:

     1. El impreso deja de estar sólo a la izquierda: ocupa la página entera
        en columnas.
     2. RESPONSIVIDAD DE VERDAD. No hay número de columnas fijo: se declara el
        ANCHO de columna en «ch» (medida de la propia letra) y el navegador
        pone las que quepan. En un ultrapanorámico salen siete u ocho; en un
        portátil, tres; en el móvil, una. Y la medida de línea —los caracteres
        por renglón, que es lo que hace un texto legible o ilegible— se queda
        igual en todas.
     3. Los robots van ENCIMA del texto, para ver si la animación aguanta ahí.

   La cabecera cruza de lado a lado, con filete arriba y abajo, como el
   nameplate de un periódico: es lo que ordena la página y da el aire de
   impreso antes de leer una palabra.
   ============================================================================ */

/* ---------- la mancha de texto: toda la página, en columnas ---------- */
.apertura-cuaderno .relleno-impreso.izq{
  left:calc(3.2 * var(--vw)); right:calc(3.2 * var(--vw)); width:auto;
  top:-3%; bottom:-5%;
  columns:24ch;                 /* ANCHO de columna, no número: de ahí la
                                   responsividad. El navegador pone las que
                                   quepan y la medida de línea no cambia. */
  column-gap:calc(2.1 * var(--vw));
  column-rule:1px solid rgba(27,20,9,.22);
  text-align:justify; hyphens:auto;
  z-index:1;
}
.apertura-cuaderno .relleno-impreso.izq p{
  margin:0 0 .62em; text-indent:1.15em;
  break-inside:avoid-column;    /* que una entrada no se parta entre columnas */
}
.apertura-cuaderno .relleno-impreso.izq p:first-child{ text-indent:0; }

/* ---------- el rotulo del folio, PIEZA DEL TITULO ----------
   Ya no es una banda cruzada: vive en el bloque del titular, en un
   renglon reservado bajo la pista (lo coloca encajarCabecera). */
.apertura-cuaderno .folio-kicker{
  position:absolute; display:none; z-index:8; width:auto;
  border:0; padding:0; background:none; color:#4a4438;
  font:600 clamp(.55rem,calc(.62 * var(--vw)),.78rem)/1.2 'Nunito',sans-serif;
  letter-spacing:.2em; text-transform:uppercase;
}
.apertura-cuaderno .folio-kicker::after{
  content:' · cuaderno de trabajo'; font-weight:400; font-style:italic;
  letter-spacing:.05em; text-transform:none;
}

.apertura-cuaderno .folio-nombre{
  /* en vh, no en em: el em es del propio titular, que aquí mide 130 px, así
     que «2.4em» lo mandaba al centro de la página */
  left:calc(3.2 * var(--vw)); right:calc(3.2 * var(--vw)); top:calc(7.2 * var(--vh)); width:auto; max-width:none;
  text-align:center;
  font:700 clamp(2.2rem,calc(7 * var(--vw)),8.5rem)/.9 'PT Serif', Georgia, serif;
  letter-spacing:-.015em; color:#100d08;
  border-bottom:2.5px solid #1b1409; padding-bottom:.1em;
  z-index:6; white-space:nowrap;
}
.apertura-cuaderno .folio-nombre::after{ content:none; }

/* la acotación, al pie y centrada bajo el dibujo */
.apertura-cuaderno .folio-nota{
  left:0; right:0; bottom:calc(3.4 * var(--vh)); width:auto; max-width:none;
  text-align:center; z-index:6;
  font:italic 400 clamp(.86rem,calc(1.05 * var(--vw)),1.22rem)/1.35 'PT Serif', Georgia, serif;
}

/* ---------- los robots, ENCIMA del texto ----------
   width/height a auto: un <canvas> es elemento reemplazado y con width:100%
   se queda con el alto entero por mucho top/bottom que le pongas. */
.apertura-cuaderno #canvasApertura{
  left:0; top:calc(11 * var(--vh)); right:auto; bottom:auto;
  width:100%; height:calc(100% - calc(19 * var(--vh)));
  z-index:4;
}

/* el índice de rutas, como un sumario a pie de página */
.apertura-cuaderno .indice-rutas{
  left:calc(3.2 * var(--vw)); right:calc(3.2 * var(--vw)); bottom:calc(9 * var(--vh)); top:auto; width:auto;
  transform:none; z-index:7;
}

/* ---------- responsividad ---------- */
@container tablero (max-aspect-ratio:1/1){          /* vertical: menos columnas, más aire */
  .apertura-cuaderno .relleno-impreso.izq{ columns:26ch; column-gap:calc(4 * var(--vw)); }
  .apertura-cuaderno #canvasApertura{ top:calc(16 * var(--vh)); bottom:calc(12 * var(--vh)); }
}
@container tablero (max-width:700px){
  .apertura-cuaderno .relleno-impreso.izq{ columns:auto; column-count:1; }
  .apertura-cuaderno .folio-nombre{ white-space:normal; font-size:clamp(1.6rem,calc(9 * var(--vw)),3rem); }
}

/* ============================================================================
   LA PORTADA, COMPUESTA  ·  bandas reservadas y huecos en blanco
   ----------------------------------------------------------------------------
   Lo que estaba mal: puse las columnas de borde a borde y encima, sin más, el
   titular, el kicker y la acotación. Eso no es componer, es apilar.

   Una página de periódico se compone al revés: primero se reservan las
   bandas y las cajas, y el texto ocupa lo que queda.

       banda de cabecera   arriba, sólo papel      -> el titular vive ahí
       mancha de texto     lo que queda en medio
       caja del dibujo     un hueco limpio         -> los robots se leen
       dos cajas más       vacías, para respirar
       banda de pie        abajo, sólo papel       -> la acotación

   Los huecos van por encima del texto y del color del papel, así que lo
   tapan: es exactamente lo que hace una caja reservada en una plancha.
   ============================================================================ */

/* la mancha de texto ya no llega ni arriba ni abajo */
.apertura-cuaderno .relleno-impreso.izq{
  top:calc(21 * var(--vh)); bottom:calc(11 * var(--vh));
}

/* ---------- los huecos ---------- */
.apertura-cuaderno .hueco{
  position:absolute; z-index:3; pointer-events:none;
  background:url('assets/textura/p_libro.jpg') center/cover no-repeat;
  background-color:#d5d7c9;
}
/* el del dibujo: el más grande, centrado, con filete fino */
.apertura-cuaderno .hueco-dibujo{
  left:26%; right:26%; top:calc(23 * var(--vh)); bottom:calc(13 * var(--vh));
  box-shadow:inset 0 0 0 1.5px rgba(27,20,9,.5);
}
/* dos cajas más, asimétricas: una alta a la izquierda y otra baja a la
   derecha. Que no estén a la misma altura es lo que evita que parezca una
   plantilla */
.apertura-cuaderno .hueco-a{
  left:calc(3.2 * var(--vw)); width:19%; top:calc(23 * var(--vh)); height:calc(20 * var(--vh));
  box-shadow:inset 0 0 0 1.5px rgba(27,20,9,.5);
}
.apertura-cuaderno .hueco-b{
  right:calc(3.2 * var(--vw)); width:15%; bottom:calc(13 * var(--vh)); height:calc(26 * var(--vh));
  box-shadow:inset 0 0 0 1.5px rgba(27,20,9,.5);
}

/* ---------- las bandas ---------- */
.apertura-cuaderno .folio-kicker{ top:calc(3.2 * var(--vh)); z-index:6; }
.apertura-cuaderno .folio-nombre{ top:calc(7 * var(--vh)); z-index:6; }
.apertura-cuaderno .folio-nota{
  bottom:calc(3.6 * var(--vh)); z-index:6;
  border-top:1.5px solid rgba(27,20,9,.45); padding-top:.7em;
  left:calc(3.2 * var(--vw)); right:calc(3.2 * var(--vw));
}

/* el dibujo, dentro de su caja */
.apertura-cuaderno #canvasApertura{
  left:26%; top:calc(23 * var(--vh)); width:48%; height:calc(100% - calc(36 * var(--vh))); z-index:4;
}

/* ---------- responsividad de la rejilla ---------- */
@container tablero (max-aspect-ratio:1/1){
  .apertura-cuaderno .hueco-dibujo{ left:12%; right:12%; top:calc(26 * var(--vh)); bottom:calc(16 * var(--vh)); }
  .apertura-cuaderno #canvasApertura{ left:12%; width:76%; top:calc(26 * var(--vh)); height:calc(100% - calc(42 * var(--vh))); }
  .apertura-cuaderno .hueco-a{ width:26%; height:calc(14 * var(--vh)); top:calc(26 * var(--vh)); }
  .apertura-cuaderno .hueco-b{ width:22%; height:calc(16 * var(--vh)); bottom:calc(16 * var(--vh)); }
}
@container tablero (max-width:700px){
  .apertura-cuaderno .hueco-a,
  .apertura-cuaderno .hueco-b{ display:none; }
  .apertura-cuaderno .hueco-dibujo{ left:4%; right:4%; top:calc(26 * var(--vh)); bottom:calc(18 * var(--vh)); }
  .apertura-cuaderno #canvasApertura{ left:4%; width:92%; top:calc(26 * var(--vh)); height:calc(100% - calc(44 * var(--vh))); }
  .apertura-cuaderno .relleno-impreso.izq{ top:calc(24 * var(--vh)); bottom:calc(13 * var(--vh)); }
}

/* La cabecera ocupaba dos líneas por el <br> del HTML y sus bajos mordían la
   primera línea de las columnas. En apaisado va en UNA línea y la banda se
   queda en la mitad de alto; en vertical y en móvil se parte, que ahí sí hace
   falta. */
@container tablero (min-aspect-ratio:1/1){
  .apertura-cuaderno .folio-nombre br{ display:none; }
  .apertura-cuaderno .folio-nombre{
    font-size:clamp(2rem,calc(5.6 * var(--vw)),7.2rem);
    top:calc(6.4 * var(--vh));
  }
  .apertura-cuaderno .folio-nombre::before{ content:''; }
  .apertura-cuaderno .relleno-impreso.izq{ top:calc(19 * var(--vh)); }
  .apertura-cuaderno .hueco-dibujo,
  .apertura-cuaderno .hueco-a{ top:calc(20 * var(--vh)); }
  .apertura-cuaderno #canvasApertura{ top:calc(20 * var(--vh)); height:calc(100% - calc(33 * var(--vh))); }
}
/* el espacio entre las dos palabras, cuando van en una línea */
.apertura-cuaderno .folio-nombre br + *{ margin-left:.3em; }

/* ============================================================================
   LA REJILLA DE VERDAD  ·  los huecos los hace el texto
   ----------------------------------------------------------------------------
   Lo que estaba mal y era de bulto: hice rectángulos de papel y los puse
   ENCIMA del texto para simular huecos. Eso no es componer, es tapar. Y
   además metía algo delante del texto cuando lo único que va delante es el
   dibujo.

   Ahora el impreso son siete bloques colocados en una rejilla de 8x6. Los
   huecos son las celdas donde no hay bloque: el vacío existe porque el texto
   no está ahí, no porque algo lo cubra. Y el dibujo va por encima de todo,
   solo.
   ============================================================================ */

.apertura-cuaderno .relleno-impreso.izq{
  left:calc(3.2 * var(--vw)); right:calc(3.2 * var(--vw)); top:calc(19 * var(--vh)); bottom:calc(11 * var(--vh)); width:auto;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  grid-template-rows:repeat(6, 1fr);
  column-gap:calc(1.9 * var(--vw)); row-gap:calc(1.1 * var(--vh));
  columns:auto;                 /* fuera el multicolumna: ahora es rejilla */
  z-index:1;
}

.apertura-cuaderno .bloque{
  overflow:hidden;
  column-rule:1px solid rgba(27,20,9,.22);
  text-align:justify; hyphens:auto;
}
.apertura-cuaderno .bloque p{ margin:0 0 .6em; text-indent:1.1em; }
.apertura-cuaderno .bloque p:first-child{ text-indent:0; }

/* --- el reparto. Los huecos son las celdas que no aparecen aquí:
       el centro (donde va el dibujo) y dos respiros asimétricos. --- */
/* Ninguno se pisa: b1 y b7 compartían la columna 2 y el texto salía impreso
   dos veces encima de sí mismo. */
.apertura-cuaderno .b1{ grid-area:1 / 1 / 4 / 2; }
.apertura-cuaderno .b7{ grid-area:1 / 2 / 3 / 3; }
.apertura-cuaderno .b2{ grid-area:4 / 1 / 7 / 2; }
.apertura-cuaderno .b3{ grid-area:1 / 3 / 2 / 7; columns:3; }
.apertura-cuaderno .b4{ grid-area:1 / 7 / 4 / 9; columns:2; }
.apertura-cuaderno .b5{ grid-area:4 / 7 / 7 / 9; columns:2; }
.apertura-cuaderno .b6{ grid-area:6 / 3 / 7 / 6; columns:2; }

/* el dibujo: por encima de todo y sin nada detrás */
.apertura-cuaderno #canvasApertura{
  left:26%; top:calc(20 * var(--vh)); width:48%; height:calc(100% - calc(33 * var(--vh))); z-index:5;
}

/* ---------- responsividad: la rejilla cambia, no sólo el tamaño ---------- */
@container tablero (max-aspect-ratio:1/1){
  .apertura-cuaderno .relleno-impreso.izq{
    grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(8, 1fr);
  }
  .apertura-cuaderno .b1{ grid-area:1 / 1 / 3 / 3; columns:auto; }
  .apertura-cuaderno .b2{ grid-area:1 / 3 / 3 / 5; columns:auto; }
  .apertura-cuaderno .b3{ grid-area:3 / 1 / 4 / 5; columns:2; }
  .apertura-cuaderno .b4{ grid-area:7 / 1 / 9 / 3; columns:auto; }
  .apertura-cuaderno .b5{ grid-area:7 / 3 / 9 / 5; columns:auto; }
  .apertura-cuaderno .b6{ grid-area:6 / 1 / 7 / 4; columns:auto; }
  .apertura-cuaderno .b7{ display:none; }
  .apertura-cuaderno #canvasApertura{ left:10%; width:80%; top:calc(29 * var(--vh)); height:calc(100% - calc(52 * var(--vh))); }
}
@container tablero (max-width:700px){
  .apertura-cuaderno .relleno-impreso.izq{
    grid-template-columns:1fr; grid-template-rows:repeat(6, 1fr);
  }
  .apertura-cuaderno .b1{ grid-area:1 / 1 / 2 / 2; }
  .apertura-cuaderno .b2{ grid-area:2 / 1 / 3 / 2; }
  .apertura-cuaderno .b3,
  .apertura-cuaderno .b4,
  .apertura-cuaderno .b7{ display:none; }
  .apertura-cuaderno .b5{ grid-area:5 / 1 / 6 / 2; }
  .apertura-cuaderno .b6{ grid-area:6 / 1 / 7 / 2; }
  .apertura-cuaderno #canvasApertura{ left:4%; width:92%; top:calc(32 * var(--vh)); height:calc(100% - calc(58 * var(--vh))); }
}

/* Los bloques ya no van a varias columnas: con multicolumna el desbordamiento
   se va de lado y no hay forma de saber cuánto texto cabe. Cada bloque es una
   columna, y la rejilla es la que da el aire de periódico. */
.apertura-cuaderno .bloque{ columns:auto !important; }
.apertura-cuaderno .bloque p:last-child{ margin-bottom:0; }

/* ============================================================================
   COMPOSICIÓN 3  ·  el hueco no puede ser más grande que la razón para tenerlo
   ----------------------------------------------------------------------------
   Cuatro cosas, las cuatro señaladas:

   1. HABÍA DEMASIADO HUECO EN EL CENTRO. Y eso mataba lo que se buscaba: si
      el dibujo está sobre un vacío, el que pise texto en los cantos se lee
      como que ahí FALTA texto, no como una decisión. Ahora el centro está
      lleno de texto y los robots pasan por encima: sólo quedan dos huecos, y
      pequeños, para respirar.
   2. Las copias corridas iban demasiado separadas: parecía un anaglifo.
   3. «PULSA PARA ABRIR» flotaba en mitad de la nada. Ahora cae sobre texto.
   4. El titular no estaba encuadrado: iba de canto a canto sin margen.
   ============================================================================ */

/* ---------- la rejilla: llena, con dos huecos y ya ---------- */
.apertura-cuaderno .relleno-impreso.izq{
  grid-template-columns:repeat(8, 1fr);
  grid-template-rows:repeat(6, 1fr);
}
.apertura-cuaderno .b1{ grid-area:1 / 1 / 4 / 2; }
.apertura-cuaderno .b2{ grid-area:4 / 1 / 7 / 2; }
.apertura-cuaderno .b3{ grid-area:1 / 2 / 3 / 4; }
.apertura-cuaderno .b4{ grid-area:3 / 2 / 7 / 4; }
.apertura-cuaderno .b5{ grid-area:1 / 4 / 3 / 6; }
.apertura-cuaderno .b6{ grid-area:3 / 4 / 6 / 6; }
.apertura-cuaderno .b7{ grid-area:1 / 6 / 4 / 8; }
.apertura-cuaderno .b8{ grid-area:4 / 6 / 7 / 8; }
.apertura-cuaderno .b9{ grid-area:1 / 8 / 5 / 9; }
/* huecos: 6/4-6 (abajo centro) y 5/8-9 (abajo derecha). Dos, pequeños y a
   distinta altura. */

/* ---------- el titular, encuadrado ---------- */
/* Encuadre del titular. Centrado ya lo estaba —medido, 0,5 px de desvío—;
   lo que fallaba es que iba a un 88% flotante mientras el kicker, el pie y
   la rejilla van a 3,calc(2 * var(--vw)). Su filete quedaba más corto que todos los demás y
   eso es lo que se ve descuadrado. Ahora comparte margen con la página. */
.apertura-cuaderno .folio-nombre{
  left:calc(3.2 * var(--vw)); right:calc(3.2 * var(--vw)); transform:none;
  width:auto; max-width:none;
  font-size:clamp(1.8rem, calc(4.9 * var(--vw)), 6.2rem);
  /* El filete iba a .16em y quedaba pegado a los bajos de las letras —medido,
     0 px entre la tinta y la raya— mientras debajo sobraban 65. Se separa la
     raya del tipo y se sube el bloque: el aire se reparte. */
  top:calc(5 * var(--vh)); padding-bottom:.3em;
}

/* ---------- el dibujo: encima del texto, y ocupando lo suyo ---------- */
.apertura-cuaderno #canvasApertura{
  left:22%; width:56%; top:calc(19 * var(--vh)); height:calc(100% - calc(31 * var(--vh))); z-index:5;
}

/* «pulsa para abrir» pegado a la esfera y sobre texto, no en el vacío */
.apertura-cuaderno .esfera-ayuda{
  background:rgba(233,229,216,.72); padding:.15em .5em;
  box-shadow:0 0 0 1px rgba(27,20,9,.28);
}

@container tablero (max-aspect-ratio:1/1){
  .apertura-cuaderno .relleno-impreso.izq{
    grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(8, 1fr);
  }
  .apertura-cuaderno .b1{ grid-area:1 / 1 / 3 / 3; }
  .apertura-cuaderno .b2{ grid-area:1 / 3 / 3 / 5; }
  .apertura-cuaderno .b3{ grid-area:3 / 1 / 6 / 3; }
  .apertura-cuaderno .b4{ grid-area:3 / 3 / 6 / 5; }
  .apertura-cuaderno .b5{ grid-area:6 / 1 / 9 / 3; }
  .apertura-cuaderno .b6{ grid-area:6 / 3 / 8 / 5; }
  .apertura-cuaderno .b7,
  .apertura-cuaderno .b8,
  .apertura-cuaderno .b9{ display:none; }
  .apertura-cuaderno #canvasApertura{ left:8%; width:84%; top:calc(24 * var(--vh)); height:calc(100% - calc(40 * var(--vh))); }
}
@container tablero (max-width:700px){
  .apertura-cuaderno .relleno-impreso.izq{
    grid-template-columns:1fr; grid-template-rows:repeat(6, 1fr);
  }
  .apertura-cuaderno .b1{ grid-area:1 / 1 / 3 / 2; }
  .apertura-cuaderno .b2{ grid-area:3 / 1 / 5 / 2; }
  .apertura-cuaderno .b3{ grid-area:5 / 1 / 7 / 2; }
  .apertura-cuaderno .b4,
  .apertura-cuaderno .b5,
  .apertura-cuaderno .b6,
  .apertura-cuaderno .b7,
  .apertura-cuaderno .b8,
  .apertura-cuaderno .b9{ display:none; }
  .apertura-cuaderno #canvasApertura{ left:3%; width:94%; top:calc(26 * var(--vh)); height:calc(100% - calc(44 * var(--vh))); }
}

/* ============================================================================
   RESTOS DE VERSIONES VIEJAS
   ----------------------------------------------------------------------------
   Tres cosas que se veían y no pintaban nada. Las tres son mías, de diseños
   anteriores de la esfera que fui tapando en vez de borrar:

   · EL CÍRCULO ROJO. Son .esfera-clic-anillo y .esfera-clic-brillo, dos
     restos de cuando la esfera era un botón rojo con anillo de puntos. La
     esfera es ahora un dibujo a lápiz, así que sobran los dos.
   · LOS TRAZOS QUE NO LLEVAN A NINGÚN SITIO. #trazosNavegacion son cinco
     líneas que iban de la esfera a los puntos de las secciones en una versión
     donde los puntos estaban en otro lado. Ahora salen de la esfera y mueren
     en el aire.
   · «PULSA PARA ABRIR» con recuadro de papel: lo puse yo hace dos cambios y
     queda como un parche. Va como acotación impresa, sin caja.
   ============================================================================ */

.esfera-clic-anillo,
.esfera-clic-anillo::after,
.esfera-clic-brillo,
.esfera-real::after{ display:none !important; content:none !important; }

/* Los trazos VUELVEN A LLEVAR a un sitio: ahora sus caminos se recalculan
   al romper (de donde estalla la esfera a donde esta cada rayajo), asi que
   la regla que los escondia sobra. Son el rail de la serpiente. */
/* el SVG no caza clics: si el raton cae sobre el propio trazo del lapiz,
   el clic tiene que atravesarlo y llegar al boton-palabra de debajo */
#trazosNavegacion{ display:block; pointer-events:none; }
/* una hoja de seccion cerrada (o cerrandose) es un fantasma: si sigue
   cazando clics mientras gira, se traga el clic de la siguiente palabra */
.pagina-seccion[aria-hidden="true"]{ pointer-events:none; }

.apertura-cuaderno .esfera-ayuda{
  background:none; box-shadow:none; padding:0;
  font:italic 700 clamp(.56rem,calc(.66 * var(--vw)),.76rem)/1 'PT Serif', Georgia, serif;
  letter-spacing:.13em; text-transform:uppercase; color:#241c10;
  white-space:nowrap;
}

/* Fuera el rotulo de la esfera: sobraba, y encima con otra tipografia mas. */
.apertura-cuaderno .esfera-ayuda{ display:none !important; }

/* El titular, despejado del kicker: con top:calc(5 * var(--vh)) se le montaba encima
   (medido, -13 px). */
.apertura-cuaderno .folio-nombre{ top:calc(6.2 * var(--vh)); }

/* ============================================================================
   EL HUECO DEL DIBUJO, HECHO CON LA REJILLA
   ----------------------------------------------------------------------------
   Ni máscara, ni rectángulo, ni recorte: los bloques de texto se reparten
   dejando VACÍAS las celdas 2-6 x 3-7, y el dibujo se ajusta exactamente a
   ese hueco (lo mide el JS sobre la propia rejilla). Debajo del dibujo no hay
   texto porque ahí no se ha puesto ninguno.

   La diferencia con el primer intento —que dejaba medio folio en blanco— es
   que ahora el hueco mide lo que mide el dibujo y los bloques lo rodean
   pegados: la página sigue densa y el vacío se lee como la caja de una foto,
   no como un olvido.
   ============================================================================ */
.apertura-cuaderno .b1{ grid-area:1 / 1 / 4 / 2; }
.apertura-cuaderno .b2{ grid-area:4 / 1 / 7 / 2; }
.apertura-cuaderno .b3{ grid-area:1 / 2 / 4 / 3; }
.apertura-cuaderno .b4{ grid-area:4 / 2 / 7 / 3; }
.apertura-cuaderno .b5{ grid-area:1 / 3 / 2 / 7; }   /* franja sobre el hueco */
.apertura-cuaderno .b6{ grid-area:6 / 3 / 7 / 7; }   /* franja bajo el hueco  */
.apertura-cuaderno .b7{ grid-area:1 / 7 / 4 / 8; }
.apertura-cuaderno .b8{ grid-area:4 / 7 / 7 / 8; }
.apertura-cuaderno .b9{ grid-area:1 / 8 / 7 / 9; }
/* celdas 2..6 x 3..7  ->  vacías. Ahí va el dibujo. */

/* el titular, con su propio destintado */
.apertura-cuaderno .folio-nombre{ filter:url(#impresoTitular); }

@container tablero (max-aspect-ratio:1/1){
  .apertura-cuaderno .b1{ grid-area:1 / 1 / 3 / 3; }
  .apertura-cuaderno .b2{ grid-area:1 / 3 / 3 / 5; }
  .apertura-cuaderno .b3{ grid-area:3 / 1 / 4 / 5; }   /* franja sobre el hueco */
  .apertura-cuaderno .b4{ grid-area:7 / 1 / 9 / 3; }
  .apertura-cuaderno .b5{ grid-area:7 / 3 / 9 / 5; }
  .apertura-cuaderno .b6{ grid-area:6 / 1 / 7 / 5; }   /* franja bajo el hueco */
  .apertura-cuaderno .b7,
  .apertura-cuaderno .b8,
  .apertura-cuaderno .b9{ display:none; }
}

/* ============================================================================
   LA REJILLA SE ADAPTA AL DIBUJO, NO AL REVÉS
   ----------------------------------------------------------------------------
   El dibujo ocupa del 22% al 78% del ancho y va de la cabecera al pie. Eso no
   se toca.

   Lo que se adapta es el texto: las columnas de la rejilla dejan de ser ocho
   iguales y pasan a tener los cantos JUSTO donde empieza y acaba el dibujo
   —11%, 22% … 78%, 89%—. Así las celdas 3 a 6 coinciden exactamente con él, y
   basta con no poner ningún bloque ahí. El texto vive en las dos columnas de
   la izquierda y las dos de la derecha.

   No hay máscara, ni recorte, ni rectángulo encima: debajo del dibujo no hay
   texto porque la composición no lo pone.
   ============================================================================ */

.apertura-cuaderno .relleno-impreso.izq{
  /* Los cantos de las columnas tienen que caer donde empieza y acaba el
     dibujo. Ojo: el dibujo va al 22% de la PÁGINA y la rejilla está metida
     3,calc(2 * var(--vw)) por cada lado, así que en coordenadas de rejilla ese 22% es
     (22 - 3,2) / 93,6 = 20,08%. Con 11% + 11% se pasaba y los robots pisaban
     dos bloques 95 px. */
  grid-template-columns:10.04% 10.04% 14.96% 14.96% 14.96% 14.96% 10.04% 10.04%;
  grid-template-rows:repeat(6, 1fr);
}

.apertura-cuaderno .b1{ grid-area:1 / 1 / 4 / 2; }
.apertura-cuaderno .b2{ grid-area:4 / 1 / 7 / 2; }
.apertura-cuaderno .b3{ grid-area:1 / 2 / 4 / 3; }
.apertura-cuaderno .b4{ grid-area:4 / 2 / 7 / 3; }
.apertura-cuaderno .b5{ grid-area:1 / 7 / 4 / 8; }
.apertura-cuaderno .b6{ grid-area:4 / 7 / 7 / 8; }
.apertura-cuaderno .b7{ grid-area:1 / 8 / 4 / 9; }
.apertura-cuaderno .b8{ grid-area:4 / 8 / 7 / 9; }
.apertura-cuaderno .b9{ display:none; }
/* columnas 3 a 6 (22%..78%): sin bloques. Ahí está el dibujo. */

/* el dibujo, en su sitio de siempre */
.apertura-cuaderno #canvasApertura{ left:22%; width:56%; z-index:5; }

@container tablero (max-aspect-ratio:1/1){
  /* en vertical el dibujo se estrecha menos de lo que el texto necesita, así
     que la banda de texto pasa a ir arriba y abajo en vez de a los lados */
  .apertura-cuaderno .relleno-impreso.izq{
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:14% 14% 1fr 1fr 14% 14%;
  }
  .apertura-cuaderno .b1{ grid-area:1 / 1 / 2 / 3; }
  .apertura-cuaderno .b2{ grid-area:1 / 3 / 2 / 5; }
  .apertura-cuaderno .b3{ grid-area:2 / 1 / 3 / 3; }
  .apertura-cuaderno .b4{ grid-area:2 / 3 / 3 / 5; }
  .apertura-cuaderno .b5{ grid-area:5 / 1 / 6 / 3; }
  .apertura-cuaderno .b6{ grid-area:5 / 3 / 6 / 5; }
  .apertura-cuaderno .b7{ grid-area:6 / 1 / 7 / 3; }
  .apertura-cuaderno .b8{ grid-area:6 / 3 / 7 / 5; }
  .apertura-cuaderno #canvasApertura{ left:8%; width:84%; }
}
@container tablero (max-width:700px){
  .apertura-cuaderno .relleno-impreso.izq{
    grid-template-columns:1fr; grid-template-rows:18% 18% 1fr 1fr 18% 18%;
  }
  .apertura-cuaderno .b1{ grid-area:1 / 1 / 2 / 2; }
  .apertura-cuaderno .b2{ grid-area:2 / 1 / 3 / 2; }
  .apertura-cuaderno .b5{ grid-area:5 / 1 / 6 / 2; }
  .apertura-cuaderno .b6{ grid-area:6 / 1 / 7 / 2; }
  .apertura-cuaderno .b3,
  .apertura-cuaderno .b4,
  .apertura-cuaderno .b7,
  .apertura-cuaderno .b8{ display:none; }
  .apertura-cuaderno #canvasApertura{ left:3%; width:94%; }
}

/* ============================================================================
   LOS CANTOS, DONDE TOCA
   ----------------------------------------------------------------------------
   Las columnas iban en porcentaje Y con separación entre ellas. Los huecos se
   suman al 100%, así que la rejilla se pasa de ancho y los cantos se corren a
   la derecha: por eso el dibujo pisaba dos bloques 48 px pese a que la cuenta
   del porcentaje era correcta.

   Sin separación entre columnas, y el aire lo pone el relleno de cada bloque.
   Así el canto de la columna 2 cae exactamente en el 20,08% de la rejilla, que
   es el 22% de la página, que es donde empieza el dibujo.
   ============================================================================ */
.apertura-cuaderno .relleno-impreso.izq{
  column-gap:0; row-gap:calc(1.1 * var(--vh));
}
.apertura-cuaderno .bloque{
  padding:0 calc(.95 * var(--vw));
  border-right:1px solid rgba(27,20,9,.22);
}
/* sin filete en la última de cada lado, ni en la que da al dibujo */
.apertura-cuaderno .b2,
.apertura-cuaderno .b4,
.apertura-cuaderno .b7,
.apertura-cuaderno .b8{ border-right:0; }
.apertura-cuaderno .b1,
.apertura-cuaderno .b2{ padding-left:0; }
.apertura-cuaderno .b7,
.apertura-cuaderno .b8{ padding-right:0; }

/* ---- vertical: el dibujo deja sitio arriba y abajo ----
   Aquí no cabe texto a los lados (el dibujo ocupa el 84% del ancho), así que
   la banda de texto va arriba y abajo. Es la única medida donde el alto del
   dibujo se limita, y es porque si no, no hay composición posible. */
@container tablero (max-aspect-ratio:1/1){
  .apertura-cuaderno #canvasApertura{
    top:auto !important; height:auto !important;
    top:32% !important; height:44% !important;
  }
}

/* El borde y el relleno se sumaban al ancho de la columna, así que la rejilla
   se pasaba de ancho y la última columna se salía de la página cortada por el
   canto. */
.apertura-cuaderno .relleno-impreso.izq,
.apertura-cuaderno .bloque,
.apertura-cuaderno .bloque *{ box-sizing:border-box; }

/* vertical: el dibujo, entre las dos bandas de texto y sin tocarlas */
@container tablero (max-aspect-ratio:1/1){
  /* el alto en vertical lo mide el JS sobre los bloques */
}

/* Fuera el panel de «elige una ruta»: se comia el tercio inferior de la
   pagina. La navegacion se queda en los puntos de la esfera. */
.apertura-cuaderno .indice-rutas{ display:none !important; }

/* Fuera el panel entero: el «elige una ruta» y el «volver a la esfera».
   Se comian el tercio inferior de la pagina. La navegacion se queda en
   los cinco puntos que salen de la esfera. */
.apertura-cuaderno .indice-rutas,
/* EL BOTON DE IR/VOLVER, PIEZA DEL TITULO: letra de la pagina, sin
   caja ni pildora. Lo coloca encajarCabecera en su renglon reservado,
   bajo el rotulo del folio. Subrayado a lapiz al apuntarlo. */
.apertura-cuaderno .volver-portada{
  position:absolute; display:none; z-index:9; width:auto;
  border:0; padding:0; background:none; text-align:left;
  color:#3a362c; cursor:pointer; transform:none; opacity:1; pointer-events:auto;
  font:700 clamp(.58rem,calc(.66 * var(--vw)),.8rem)/1.35 'Nunito',sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
  filter:url(#tinta);            /* la misma impresion que el resto */
}
.apertura-cuaderno .volver-portada.visible{ display:block; }
/* el subrayado es UN TRAZO DE LAPIZ que se dibuja de izquierda a derecha */
.apertura-cuaderno .volver-portada::after{
  content:''; display:block; height:.4em; margin-top:.12em;
  background:url(assets/esfera/subraya_lapiz.webp) left center / 100% auto no-repeat;
  width:0; transition:width .3s cubic-bezier(.3,.7,.4,1);
}
.apertura-cuaderno .volver-portada:hover::after{ width:100%; }


/* ============================================================
   LA ESFERA SE ROMPE EN LOS CINCO PUNTOS
   ============================================================ */

/* 1. EL VUELO. El destino ya no es "un 310% hacia arriba" — eso no es
      ningun sitio, ni donde miran los robots ni donde caen los puntos. Lo
      pone el JS: el mismo punto de mirada que usan las cinco rutas. Esto
      solo dice COMO va (con un pelin de inercia al arrancar). */
.esfera-lapiz.lanzada{
  pointer-events:none;
  animation:none !important;
  transition:left .8s cubic-bezier(.3,-.28,.3,1.12),
             top  .8s cubic-bezier(.3,-.28,.3,1.12),
             transform .8s ease-out;
  transform:translate(-50%,-50%) scale(1.06);
}
/* 2. LA ROTURA. Se encoge girando y se va en 0,3 s, que es justo mientras
      las cinco salen de su centro: no es "desaparece y luego aparecen",
      se cruzan. El opacity lleva !important porque .esfera-lapiz fuerza
      opacity:1 para matar el .oculto heredado. */
.esfera-clic.esfera-lapiz.estalla{
  /* la bola YA NO SE FUNDE NI SE ESCALA: la rotura la llevan los frames
     rompe_XX (pierde sus trazos uno a uno). Esta clase la pone el JS
     CUANDO YA NO QUEDA NI UN TRAZO, y apaga el boton en seco. El delay
     vivia aqui en una transition y otra regla la pisaba: la bola se
     apagaba en el ms 10 y toda la rotura pasaba invisible. */
  transition:none;
  opacity:0 !important;
  pointer-events:none;
}

/* 3. LAS CINCO SALEN DE DENTRO. --sx/--sy los pone el JS: el vector desde
      donde acaba cada punto hasta el centro de la bola. Asi arrancan
      pegadas a ella y se separan a su sitio, escalonadas con --n. */
.apertura-puntos{ transition:opacity .3s ease; }
.apertura-puntos:not(.orbita) .punto{
  /* el ovillo NO viaja: su linea serpentea hasta el sitio y ahi el trazo
     se enrosca. El delay lo sincroniza con la llegada de su linea. */
  transition:transform .65s cubic-bezier(.2,1.35,.35,1.05), opacity .35s ease-out;
  transition-delay:calc(var(--n, 0) * 150ms + 950ms);
}
/* aterrizados: cualquier transicion (hover) vuelve a ser inmediata */
.apertura-puntos.orbita .punto{ transition:transform .18s ease, opacity .2s ease; }
.apertura-puntos.reparte .punto{
  /* estado de partida: en SU sitio, invisible y a media escala girado;
     cuando llega su linea, crece y se endereza = el trazo se enrosca */
  transition:none;
  transform:translate(-50%,-50%) scale(.4) rotate(-50deg);
  opacity:0;
}
/* La mini-orbita no puede estar puesta durante el reparto: es un
   @keyframes sobre transform y le pisa el viaje. Entra despues, con
   .orbita, que la pone el JS al aterrizar. */
.apertura-puntos.mostrar .punto{ animation:none; }
.apertura-puntos.orbita .punto{ animation:miniOrbita 5.2s ease-in-out infinite; }
.apertura-puntos.orbita .punto:nth-child(2){ animation-duration:5.9s; animation-delay:-1.1s; }
.apertura-puntos.orbita .punto:nth-child(3){ animation-duration:4.7s; animation-delay:-2.3s; }
.apertura-puntos.orbita .punto:nth-child(4){ animation-duration:6.3s; animation-delay:-0.6s; }
.apertura-puntos.orbita .punto:nth-child(5){ animation-duration:5.4s; animation-delay:-3.1s; }
.apertura-puntos.orbita .punto:hover,
.apertura-puntos.orbita .punto:focus-visible{ animation-play-state:paused; }

/* 4. PASTELES QUE SE LEEN. Un pastel puro sobre papel crema no se ve: el
      aro del mismo tono, mas cerrado (--co), es lo unico que lo sostiene.
      Relleno claro dentro, y el punto de en medio del tono cerrado. */
.apertura-puntos .punto::before{
  border-color:var(--co);
  background:color-mix(in srgb, var(--c) 72%, transparent);
}
.apertura-puntos .punto::after{ background:var(--co); opacity:.7; }
.apertura-puntos .punto:hover::before,
.apertura-puntos .punto:focus-visible::before{ background:var(--c); }
.apertura-puntos .punto:hover,
.apertura-puntos .punto:focus-visible{
  box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 34%, transparent);
}

@media (prefers-reduced-motion: reduce){
  .esfera-lapiz.lanzada,
  .esfera-clic.esfera-lapiz.estalla,
  .apertura-puntos .punto{ transition:none !important; }
}


/* ============================================================
   CUERPO A LOS CINCO PUNTOS
   ============================================================ */

/* 15 px era una mota. Ademas hay que poder pincharlos: 15 px es la mitad
   del minimo de un objetivo tactil. */
.apertura-puntos .punto{
  /* --pt lo pone el JS: 22 unidades del dibujo. Asi la bolita crece y
     mengua CON el dibujo, y la constelacion no se apelotona al encoger la
     ventana. El suelo de 18px es para poder pincharla. */
  width:clamp(18px, var(--pt, 22px), 34px);
  height:clamp(18px, var(--pt, 22px), 34px);
}
/* El relleno pastel iba a medias (72% sobre transparente) y encima del
   dibujo se leia lo de detras. Opaco sobre color papel: el pastel se
   mantiene y ya no depende de lo que haya debajo. */
.apertura-puntos .punto::before{
  background:color-mix(in srgb, var(--c) 86%, #fbf6ea);
}
/* El punto de dentro iba clavado a 3px/7px, o sea descentrado en cuanto
   la bolita crece. En porcentaje se centra sola a cualquier tamano. */
.apertura-puntos .punto::after{
  left:auto; top:auto; right:auto; bottom:auto;
  inset:28%; width:auto; height:auto;
  opacity:.8;
}


/* ============================================================
   NINGUN ARO ALREDEDOR DE LA ESFERA

   Era outline:2px solid #a55a4e con outline-offset:6px. Rojo teja, y la
   caja del boton es bastante mas grande que la bola pintada (el PNG lleva
   aire alrededor), asi que salia un circulo enorme flotando alrededor.

   Cambiarlo de color y de trazo no era quitarlo: seguia siendo un aro. No
   lleva ninguno, ni al pulsar, ni con el teclado, ni nunca.
   ============================================================ */
.esfera-clic.esfera-lapiz,
.esfera-clic.esfera-lapiz:hover,
.esfera-clic.esfera-lapiz:focus,
.esfera-clic.esfera-lapiz:focus-visible,
.esfera-clic.esfera-lapiz:active{ outline:none !important; box-shadow:none !important; }


/* ============================================================
   LA PAGINA SE COMPONE EN UN LIENZO

   Antes esto era un display:grid con ocho .bloque, y cada bloque un
   rectangulo de texto. Un rectangulo solo sabe dejar huecos rectangulares:
   de ahi que al dibujo hubiera que hacerle sitio a base de columnas
   vacias, y que se notara el recorte.

   Ahora dentro va un <canvas> y los renglones los parte el JS contra la
   silueta de los robots (periodico.js). El contenedor no cambia de sitio
   ni de tamano, y se queda con lo suyo: el filtro de tinta y el multiply.
   Por eso la letra se ve exactamente igual de impresa que antes.
   ============================================================ */
.apertura-cuaderno .relleno-impreso.izq{
  display:block;
  padding:0;
  column-gap:normal; row-gap:normal;
  grid-template-columns:none; grid-template-rows:none;
  /* el faldon del sangrado tiene que VERSE fuera del encuadre */
  overflow:visible;
}
.apertura-cuaderno #canvasTexto{
  display:block; height:100%;
  /* calc(16 * var(--vw)) de faldon por lado: el motor pinta ahi ENTERAS las columnas que
     el encuadre corta — al viajar no hay palabras partidas contra el vacio */
  margin-left:calc(-24 * var(--vw)); width:calc(100% + calc(48 * var(--vw)));
}
/* por si queda algun bloque suelto de una version vieja */
.apertura-cuaderno .bloque{ display:none !important; }


/* ============================================================
   LA TINTA DEL TEXTO YA NO ES UN FILTRO SVG

   url(#tintaContinua) sobre el lienzo del texto costaba 480 ms por frame
   (medido): el navegador rehace las dos turbulencias y la imagen del papel
   en cada cambio de contenido, aunque no cambien nunca. Con el texto
   moviendose eso es la pagina a 2 fps.

   La impresion se hace ahora dentro del lienzo (periodico.js): ganancia de
   tinta pintando el lienzo sobre si mismo, y destintado con una mancha ya
   cocida. Misma tinta parada y en movimiento — antes se caia al pulsar la
   esfera y se notaba.

   El multiply se queda: la tinta sigue multiplicando sobre el papel.
   ============================================================ */
.apertura-cuaderno .relleno-impreso.izq{ filter:none; }


/* ============================================================
   UN TROZO DE PAGINA, NO UNA PORTADA
   ============================================================ */

/* 1. La mancha de texto se sale de la ventana por los cuatro lados. Los
      renglones los corta el borde de la pantalla, que es justo lo que hace
      que se lea como un recorte de algo mas grande. El alto lo pone el JS
      (atarCabecera ya no baja la mancha: el titular va dentro de ella). */
.apertura-cuaderno .relleno-impreso.izq{
  /* Se sale por la izquierda, por la derecha y por abajo —ahí el corte es
     lo que hace que se lea como un recorte de algo más grande—, pero NO por
     arriba: por arriba el sangrado sólo servía para decapitar el primer
     renglón, y un titular con la cabeza cortada no parece un recorte, parece
     un fallo. */
  left:calc(-6 * var(--vw)); right:calc(-6 * var(--vw)); width:auto;
  top:0; bottom:calc(-9 * var(--vh)); height:auto;
  overflow:visible;
}
/* y que corte la ventana, no la caja */
.apertura-cuaderno .folio-apertura{ overflow:visible; }

/* 2. Fuera el marco: el pie centrado con su filete. El rotulo
      "portfolio / 2026" SI se queda: no lo pinta el lienzo ni nadie. */
.apertura-cuaderno .folio-nota{ display:none !important; }

/* 3. El titular deja de ser cabecera y pasa a ser un titular metido en la
      pagina: sin filete de lado a lado y pegado al margen izquierdo, como
      un titular a varias columnas. El texto se aparta de el solo. */
.apertura-cuaderno .folio-nombre{
  text-align:left;
  left:calc(3.4 * var(--vw)); right:auto; width:auto;
  border-bottom:0;
  padding-bottom:0;
}


/* ============================================================
   PRIMER PLANO DE LA PAGINA

   La referencia es un fotograma de la cabecera de Stranger Things: un
   trozo de pagina de manual, de cerca, con el dibujo encima y el texto
   cortado por el encuadre. A cuerpo 16 y siete columnas esto era una
   pagina entera vista de lejos, y por muy sangrada que este se sigue
   leyendo como una portada completa.
   ============================================================ */
/* El cuerpo NO puede depender solo del ancho. Con calc(1.72 * var(--vw)), en una ventana
   ancha y baja (2000x760) se ponia a 34px: tres columnas de 660px y catorce
   renglones en toda la pagina. Eso no es una pagina, es un cartel. Manda la
   dimension mas corta: asi una ventana apaisada da mas columnas y mas
   renglones, que es lo que hace que se lea como un trozo de periodico. */
.apertura-cuaderno .relleno-impreso.izq{
  font-size:clamp(18px, min(calc(1.25 * var(--vw)), calc(2.9 * var(--vh))), 30px);
  line-height:1.42;
}


/* ============================================================
   LA CABECERA, PARTE DE LA PAGINA

   El sitio lo pone el JS (encajarCabecera), que las encaja en columnas
   enteras. Aqui solo va el aspecto: filetes del ancho del titular, el
   antetitulo en versalitas al mismo margen, y el aviso con pinta de pie
   de foto. Nada centrado en la pagina: en un trozo de pagina no hay nada
   centrado respecto al papel, todo se alinea a su columna.
   ============================================================ */
.apertura-cuaderno .folio-kicker{
  text-align:left;
  margin:0; padding:0 0 .35em;
  border-bottom:1px solid rgba(27,20,9,.5);
  font:700 clamp(9px,calc(.62 * var(--vw)),13px)/1 'Nunito',sans-serif;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(27,20,9,.72);
  z-index:6;
}
.apertura-cuaderno .folio-nombre{
  text-align:left;
  margin:0; padding:.12em 0 .1em;
  border-bottom:2.5px solid rgba(27,20,9,.62);
  line-height:.92;
  font-size:clamp(30px, calc(3.9 * var(--vw)), 82px);
  z-index:6;
}
.apertura-cuaderno .apertura-pista{
  text-align:left;
  margin:0; padding-top:.4em;
  border-top:1px solid rgba(27,20,9,.4);
  font:italic 400 clamp(11px,calc(.9 * var(--vw)),17px)/1.2 'PT Serif',Georgia,serif;
  letter-spacing:.02em; text-transform:none;
  color:rgba(27,20,9,.78);
  z-index:6;
  /* invisible hasta que el JS lo coloca al pie del nombre: si no, el primer
     pintado lo enseña donde lo deja el CSS y parece un resto viejo */
  visibility:hidden;
}


/* EL TITULAR LO MIDE EL JS: el cuerpo se calcula para que llene sus columnas, asi que
   aqui no puede haber un font-size que lo pise. */
.apertura-cuaderno .folio-nombre{
  font-size:inherit;
  white-space:nowrap;
  padding:0 0 .06em;
  border-bottom:2.5px solid rgba(27,20,9,.62);
}


/* NI FILETE NI CABECERA. El filete debajo del nombre lo convertia en titular
   de periodico. No lo es: es un texto que forma parte de la pagina. Fuera
   el filete y fuera el del antetitulo. */
.apertura-cuaderno .folio-nombre{
  white-space:normal;
  border-bottom:0;
  padding:0;
  line-height:.88;
}
.apertura-cuaderno .folio-kicker{
  border-bottom:0;
  padding:0 0 .2em;
}


/* EL NOMBRE LO PINTA EL LIENZO, asi que su <p> sobra. El rotulo
   "portfolio / 2026" NO: es el unico que lo lleva y se quedo borrado
   por accidente al esconder la cabecera. */
.apertura-cuaderno .folio-nombre{ display:none !important; }


/* EL AVISO, COMPUESTO

   Antes: italic 400 clamp(11px,calc(.9 * var(--vw)),17px) y color rgba(...,.78). A ese
   cuerpo no se lee, y en cursiva y gris parece una errata, no un aviso.
   Ahora va con el cuerpo atado al del texto, en versalitas espaciadas y
   con su filete corto: compuesto como una linea de pagina impresa. */
.apertura-cuaderno .apertura-pista{
  font:700 clamp(13px,calc(.82 * var(--vw)),19px)/1.25 'Nunito', sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-style:normal;
  color:rgb(42,33,20);
  text-align:left;
  margin:0;
  padding-top:.55em;
  border-top:1.5px solid rgba(27,20,9,.55);
  z-index:6;
}

/* ============================================================
   EL DIBUJO, UN POCO MAS ABAJO
   Los cinco puntos de seleccion nacen entre las cabezas de los robots
   (la constelacion de la esfera): con el dibujo arriba caian pegados al
   titular y no tenian su hueco. Se baja el dibujo entero; la maqueta,
   la orla y los puntos se recalculan solos de la caja viva del lienzo.
   transform y no top: no toca la cascada de arriba y funciona en todas
   las medidas horizontales. */
.apertura-cuaderno #canvasApertura{ transform: translateY(calc(6 * var(--vh))); }

/* LA MANO ESTA DETRAS: cuando el robot grande se da la vuelta (f52-70) la
   esfera se va con la mano. !important porque .esfera-lapiz fuerza opacity:1
   para matar el .oculto heredado, igual que hace .estalla. */
.esfera-clic.esfera-lapiz.trasElCuerpo{
  transition:opacity .25s ease;
  opacity:0 !important;
}

/* EL DESLIZAMIENTO DE LA ESFERA, SUAVE. La posicion se fija frame a frame
   (24 por segundo) y a corte se notaban los saltos, como flicks: una
   transicion de un frame de duracion los funde en un deslizamiento. Solo
   durante el viaje; en reposo la esfera obedece al pixel. */
.esfera-clic.esfera-lapiz.viaja{
  transition: left .09s linear, top .09s linear;
}

/* ============================================================
   LAS CINCO BOLITAS SON RAYAJOS
   Nada de disco con degradado: cada punto es su propio garabato de lapiz
   en el color de su seccion, con hervido propio (el JS le cicla 6 poses
   con fase distinta a cada uno). El numero se queda encima, en tinta. */
.apertura-puntos .punto{
  /* background SIN important: la imagen del rayajo la pone el JS en linea
     y un important aqui se la comeria */
  background:none;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0;
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  width:clamp(28px, var(--pt, 34px), 60px);
  height:clamp(28px, var(--pt, 34px), 60px);
}
.apertura-puntos .punto::before,
.apertura-puntos .punto::after{ display:none !important; }
.apertura-puntos .punto .punto-num{
  color:#2a2114;
  text-shadow:none;
  font-size:clamp(.6rem, calc(.62 * var(--vw)), .8rem);
}

/* EL HOVER DE LOS RAYAJOS: RESALTAR, NO TAPAR. Las reglas heredadas de la
   época de los discos pintaban un fondo blanco con aro al pasar el puntero
   y se comían el trazo. Ahora el token crece y sube la tinta. */
.apertura-puntos .punto:hover,
.apertura-puntos .punto:focus-visible{
  background:none;
  box-shadow:none;
  transform:translate(-50%,-50%) scale(1.26);
  /* sin filter: un filtro rasteriza la caja del elemento y se notaba el
     recorte cuadrado sobre el papel */
}


/* ============================================================
   EL RAYAJO QUE VUELA - un solo objeto por color.
   El trazo SALE de la bola, VIAJA culebreando y SE ENROSCA al
   llegar: entonces (y solo entonces) aparece el ovillo real.
   Nada de railes SVG ni de ovillos que se materializan solos. */
.rayajo-volador{
  position:absolute; display:none; pointer-events:none; z-index:8;
  background-size:contain; background-repeat:no-repeat; background-position:center;
}
/* el ovillo del menu NO existe hasta que su rayajo aterriza */
.apertura-puntos .punto:not(.posado){ opacity:0 !important; pointer-events:none !important; transition:none !important; }
/* y cuando aterriza, aparece AL INSTANTE: el rayajo acaba de enroscarse
   justo ahi. Los retardos en cadena de la coreografia vieja (--n) dejaban
   los ultimos ovillos invisibles segundos despues de posarse. */
.apertura-puntos.mostrar .punto.posado{
  opacity:1 !important;
  transition:opacity .1s linear, transform .18s ease !important;
  transition-delay:0s !important;
}


/* al apuntar un ovillo, su deriva se CONGELA: si se mueve mientras
   apuntas, se escapa del cursor y el hervor parece un recorte */
.apertura-puntos .punto:hover{ animation-play-state:paused !important; }


/* el dibujo del ovillo vive en su propio hijo: la orbita anima al BOTON y
   el hover escala AL DIBUJO — ya no compiten por el mismo transform (por
   eso la seleccion no se veia crecer) */
.punto-dibujo{
  position:absolute; inset:0; display:block; pointer-events:none;
  background-repeat:no-repeat; background-size:600% 100%; background-position:0 0;
  transition:transform .16s ease;
}
.apertura-puntos .punto:hover .punto-dibujo{ transform:scale(1.3) rotate(-5deg); }


/* ============================================================
   EL MENU DE GARABATOS
   La esfera SE ALZA (y se queda); los garabatos redondean palabras
   del texto y ESAS palabras son los botones. Los .punto son solo
   zonas de click invisibles sobre cada palabra. */
.esfera-clic.esfera-lapiz.alzada{
  /* la bola aparcada NO se mueve de donde la dejo el baile: el sitio del
     clip 94 del tuner es su sitio. 'alzada' queda como ESTADO (le da mas
     aire a su estorbo y gobierna el asentado), no como desplazamiento.
     Aqui hubo un translateY(calc(-11 * var(--vh))) + empujones que la subian hasta el
     borde del viewport: fuera. */
}
.apertura-puntos .punto{ opacity:0 !important; background:none !important; box-shadow:none !important; }
.apertura-puntos .punto.posado{ cursor:pointer; }
.punto-dibujo{ display:none !important; }

/* ============================================================
   LAS ZONAS: secciones EN LA MISMA PAGINA, a una panoramica.
   El periodico CONTINUA: mismo papel escaneado que la portada
   (p_libro), sus columnas de relleno impreso a los lados, el
   titular en la PT Serif del nombre, el kicker de la portada,
   y la animacion de cada seccion fundida en multiply. Lo
   manuscrito NO va aqui: el posit va EN BLANCO y los rayajos
   los pone el autor con el plugin de anotar.
   ============================================================ */
.lienzo{ transition:transform 1.15s cubic-bezier(.5,.06,.16,1); }
.zona{
  position:absolute;
  left:calc(var(--zx) * 100%);
  top:calc(var(--zy) * 100%);
  width:100%; height:100%;
  box-sizing:border-box;
  background:url('assets/textura/p_libro.jpg') center/cover no-repeat;
  color:rgb(42,33,20);
  font-family:'Crimson Text', Georgia, serif;
  overflow:hidden;
}
.zona[aria-hidden="true"]{ pointer-events:none; }

/* las columnas del manual siguen a los lados, como en la portada */
.zona .relleno-impreso{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  top:-4%; bottom:-6%; padding:0; columns:1;
  font-family:'Crimson Text', Georgia, serif;
  font-size:clamp(.54rem,calc(.66 * var(--vw)),.78rem); line-height:1.55;
  text-align:justify; hyphens:auto;
  color:rgba(15,13,10,.66);
  filter:url(#tinta);
  overflow:hidden;
}
.zona .relleno-impreso p{ margin:0 0 .55em; text-indent:1.1em; }
.zona .relleno-impreso b{ color:rgba(15,13,10,.9); }
.zona .relleno-impreso.izq{ left:calc(2.4 * var(--vw)); width:13.5%; }
.zona .relleno-impreso.der{ right:calc(2.4 * var(--vw)); width:13.5%; }

.zona-tripa{
  position:relative; z-index:2;
  box-sizing:border-box;
  height:100%;
  padding:calc(9 * var(--vh)) calc(20 * var(--vw)) calc(6 * var(--vh));
}
.zona-cab{
  position:relative;
  border-bottom:2px solid rgba(27,20,9,.55);
  padding-bottom:.45em; margin:0 0 calc(3.2 * var(--vh));
}
.zona-epigrafe{
  margin:0 0 .55em;
  font:700 clamp(.6rem,calc(.68 * var(--vw)),.85rem)/1.3 'Nunito', sans-serif;
  letter-spacing:.34em; text-transform:uppercase;
  color:rgba(27,20,9,.72);
  filter:url(#tinta);
}
.zona-titulo{
  margin:0;
  font-family:'PT Serif', Georgia, serif;
  font-weight:700;
  font-size:clamp(2.8rem, calc(3.6 * var(--vw)), 5rem); line-height:.95;
  letter-spacing:-.015em; color:rgb(16,13,8);
  filter:url(#tinta);
}
.zona-num{
  position:absolute; right:0; bottom:.35em;
  font:700 clamp(1rem,calc(1.15 * var(--vw)),1.5rem)/1 'Nunito', sans-serif;
  color:var(--c); opacity:.9; filter:url(#tz2);
}
.zona-cuerpo-cols{ display:flex; gap:calc(3.5 * var(--vw)); align-items:flex-start; }
.zona-col{ flex:1.45; min-width:0; }
.zona-col-ficha{ flex:1; }
.zona-texto{
  margin:0 0 1.3em;
  font-size:clamp(1.05rem, calc(1.12 * var(--vw)), 1.5rem); line-height:1.58;
  text-align:justify; hyphens:auto; filter:url(#tinta);
}
.zona-texto .resalta{ font-weight:700; }
.zona-lista{ margin:0; padding:0; list-style:none;
  font-size:clamp(1rem, calc(1.02 * var(--vw)), 1.4rem); filter:url(#tinta); }
.zona-lista li{
  position:relative; padding:.4em 0 .4em 1.5em;
  border-bottom:1px solid rgba(27,20,9,.18);
}
.zona-lista li::before{ content:'—'; position:absolute; left:0; color:var(--c); }
.zona-ficha{
  margin:0 0 calc(3.6 * var(--vh)); display:grid; grid-template-columns:auto 1fr;
  gap:.5em 1.1em; font-size:clamp(.95rem, calc(.98 * var(--vw)), 1.3rem);
  background:url('assets/textura/p_lamina.jpg') center/cover no-repeat;
  border:1px solid rgba(27,20,9,.28);
  padding:1.3em 1.5em; filter:url(#tinta);
}
.zona-ficha dt{
  margin:0; font:700 .82em 'Nunito', sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:#17150f;
}
.zona-ficha dd{ margin:0; font-style:italic; color:#2a2620; }

/* el posit EN BLANCO: papel de nota real, celo, y sitio para SU letra */
.positit{
  position:relative; width:min(24em, 92%); min-height:11em;
  margin-top:calc(1.5 * var(--vh));
  background:url('assets/textura/p_nota.jpg') center/cover no-repeat;
  transform:rotate(-2.2deg); margin-left:6%;
  box-shadow:0 3px 8px rgba(30,24,12,.16);
}
.celo-z{
  position:absolute; top:-.7em; width:4.6em; height:1.5em;
  background:rgba(255,255,255,.42);
  border-left:1px solid rgba(120,110,90,.28);
  border-right:1px solid rgba(120,110,90,.28);
}
.celo-za{ left:.9em; transform:rotate(-7deg); }
.celo-zb{ right:.9em; transform:rotate(6deg); }

/* la animacion de la seccion: el dibujo respira sobre el papel */
.zona-anim{
  position:absolute; z-index:2;
  left:calc(19 * var(--vw)); bottom:calc(4 * var(--vh));
  width:calc(27 * var(--vw)); max-width:860px;
  pointer-events:none;
}
.zona-anim video{
  width:100%; height:auto; display:block;
  mix-blend-mode:multiply; filter:none;
}

/* EL DIBUJO VA EN EL PAPEL, no encima. Con source-over, los halos
   suaves del relleno (alfa 0.02-0.25) se leian como un relieve blanco
   sobre el papel verdoso: la acuarela flotaba. Multiplicando, lo claro
   deja pasar el papel entero y solo la carga de color tine — que es lo
   que hace la tinta de verdad. */
/* multiply FUERA: sobre el papel grisaceo cambiaba los colores del
   relleno (los oscurecia). El halo se quita en el propio PNG. */

/* ============================================================================
   EL TABLERO — una sola mesa continua bajo TODO
   ----------------------------------------------------------------------------
   El index y las secciones viven sobre la misma superficie. Antes, al salir
   del index se caia al vacio de .mesa (un radial oscuro) y se notaba el corte.
   Ahora hay una mesa de madera/papel que se extiende por todo el recorrido de
   la camara y viaja con el lienzo: al desplazarte no cambias de escenario, te
   mueves por el MISMO. Encima, hojas de periodico sueltas y giradas —parte del
   fondo, no interactivas— para que se sienta un tablero real, no un color liso.
   ============================================================================ */
.tablero-fondo{
  position:absolute; z-index:0; pointer-events:none;
  /* cubre de sobra el recorrido: x[-1..1], y[0..1] mas margen ancho */
  left:-160%; top:-120%; width:420%; height:360%;
  /* mesa OSCURA (tablero de madera/carton) para que las hojas de papel
     resalten encima; si la mesa es tan clara como el papel no hay tablero */
  background:
    linear-gradient(rgba(44,30,16,.5), rgba(38,26,14,.56)),
    url('assets/textura/p_carton.jpg') 0 0/720px 720px repeat;
}
/* una veladura calida y viñeteo suave PEGADOS a la mesa (viajan con ella),
   para que la madera no sea un tile plano sino superficie con luz */
.tablero-fondo::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 42% 34%, rgba(255,244,222,.10), transparent 55%),
    radial-gradient(140% 120% at 50% 46%, transparent 40%, rgba(20,13,7,.34) 100%);
  mix-blend-mode:multiply;
}

/* una hoja de periodico suelta del fondo */
.recorte{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  /* cuelgan del LIENZO (marco = pantalla): --x/--y en % de viewport */
  left:var(--x); top:var(--y);
  width:var(--w, calc(34 * var(--vw)));
  transform:rotate(var(--rot, 0deg));
  transform-origin:50% 50%;
  filter:drop-shadow(0 14px 20px rgba(30,20,10,.34));
  opacity:var(--op, .9);
}
.recorte-papel{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  height:var(--h, calc(34 * var(--vh)));           /* hoja de verdad, no una tira */
  padding:1.3em 1.4em 1.5em;
  background:var(--pap) center/cover no-repeat;
  box-shadow:inset 0 0 60px rgba(60,44,24,.16), inset 0 0 3px rgba(30,20,10,.28);
  color:rgba(38,30,18,.82);
  font-family:'Crimson Text', Georgia, serif;
}
/* borde superior gastado: la hoja no es un rectangulo perfecto de imprenta */
.recorte-papel::before{
  content:''; position:absolute; left:0; right:0; top:0; height:6px;
  background:linear-gradient(90deg, transparent, rgba(30,20,10,.10) 20%, transparent 45%, rgba(30,20,10,.12) 70%, transparent);
}
.recorte-kicker{
  margin:0 0 .35em; font:700 clamp(.44rem,calc(.52 * var(--vw)),.66rem)/1.2 'Nunito', sans-serif;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(38,30,18,.55);
}
.recorte-titular{
  margin:0 0 .5em; font-family:'PT Serif', Georgia, serif; font-weight:700;
  font-size:clamp(1.1rem,calc(1.9 * var(--vw)),2.4rem); line-height:.98; letter-spacing:-.01em;
  color:rgba(28,20,10,.9);
  border-bottom:2px solid rgba(38,30,18,.5); padding-bottom:.28em;
}
.recorte-titular.mini{ font-size:clamp(.9rem,calc(1.3 * var(--vw)),1.6rem); }
.recorte-cols{
  margin-top:.6em; flex:1; min-height:0;
  columns:var(--cols, 2); column-gap:1.2em; column-fill:auto;
  overflow:hidden;
  font-size:clamp(.48rem,calc(.6 * var(--vw)),.76rem); line-height:1.48; text-align:justify;
  hyphens:auto; column-rule:1px solid rgba(38,30,18,.16);
}
.recorte-cols p{ margin:0 0 .5em; text-indent:1em; }
.recorte-cols p:first-child{ text-indent:0; }
/* hojas mas al fondo: mas apagadas y desaturadas para que el index destaque */
.recorte.lejos{ filter:drop-shadow(0 8px 14px rgba(30,20,10,.28)) saturate(.7) brightness(.97); }

/* index y secciones SIEMPRE por encima del tablero y sus recortes */
#apertura.hoja-pag{ z-index:6; }
#paginas{ position:absolute; inset:0; z-index:5; }

/* POR AHORA las secciones van VACIAS: lo que se juzga es el fondo. Sin su
   papel opaco a pantalla completa, el tablero (mesa + recortes) se ve en
   todo el recorrido. La integracion de las secciones va despues. */
.zona{ background:transparent !important; overflow:visible !important; }
.zona > *{ display:none !important; }

/* la hoja del index es UNA hoja sobre la mesa: su canto proyecta sombra en
   el tablero al desplazarse, para que no parezca un corte de pantalla */
.apertura-cuaderno .folio-apertura{
  box-shadow:0 24px 64px rgba(16,10,4,.55), 0 0 0 1px rgba(22,14,7,.22);
}

/* ===================== FONDO = PERIÓDICO CONTINUO =====================
   El papel del index se extiende por todo el recorrido y las celdas vecinas
   + las páginas de encima se COMPONEN con el mismo motor (canvas, misma
   tinta con ganancia y destintado, mismos filetes, misma fuente): es EL
   MISMO periódico, no una imitación en DOM. */
/* EL PAPEL SE QUEDA QUIETO Y LO QUE VIAJA ES SU TRAMA.
   Antes esta hoja era un rectangulo de 420% x 360% del recorrido —14448x4698
   pixeles, 67,9 megapixeles, 259 MB de capa— que se arrastraba entera con la
   camara. Es la capa mas cara de la pagina: cronometrado por el propio
   navegador, 166,8 ms de pintado.
   Y no hacia ninguna falta, porque lo que hay dentro es una TRAMA REPETIDA.
   Una trama repetida no se distingue de si misma desplazada: da exactamente
   la misma imagen mover la hoja que mover el dibujo de la hoja. Asi que la
   hoja se ancla al encuadre (`fixed` dentro de la mesa, que va transformada,
   o sea que se queda pegada a lo que se ve) y lo que se desplaza con la
   camara es `background-position`. De 67,9 megapixeles a 4,5: los que se ven.
   El desplazamiento reproduce el de la camara —el mismo `--cx`/`--cy`, la
   misma curva y la misma duracion que `.lienzo`— mas el sitio donde
   empezaba la trama antes (-160% / -120%), para que la fase del grano quede
   donde estaba. Y `--cz` (el zoom del modo libre) va al tamaño de la trama,
   que es lo que hacia al ir dentro del lienzo escalado. */
.paper-fondo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url('assets/textura/p_libro.jpg');
  background-repeat:repeat;
  background-size:calc(1040px * var(--cz, 1));
  background-position:
    calc((var(--cx, 0) * -100 - 160) * var(--vw) * var(--cz, 1))
    calc((var(--cy, 0) * -100 - 120) * var(--vh) * var(--cz, 1));
  transition:background-position .95s cubic-bezier(.62,.03,.2,1),
             background-size .95s cubic-bezier(.62,.03,.2,1);
}
#apertura,
.apertura-cuaderno .cuaderno-escena,
.apertura-cuaderno .folio-apertura{ background:transparent !important; }
.apertura-cuaderno .folio-apertura{ box-shadow:none !important; }

/* celdas vecinas: el pliego compone con MARGEN de pagina (como un
   periodico real) y en la costura hay PLIEGUE, no colision de columnas */
/* pliegues del pliego en las costuras entre celdas: sombra suave de doblez */

/* paginas de periodico ENCIMA: sabanas grandes, giradas, misma hoja */
.pagina-suelta{
  position:absolute; z-index:3; pointer-events:none;
  contain:layout paint;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  transform:rotate(var(--rot,0deg)); transform-origin:50% 50%;
  background:url('assets/textura/p_libro.jpg') 0 0/1040px repeat;
  /* sombra de CONTACTO: papel apoyado sobre papel, no levitando */
  box-shadow:0 1px 0 rgba(30,20,10,.16), 0 2px 5px rgba(30,20,10,.22),
             0 6px 14px rgba(30,20,10,.12), inset 0 0 2px rgba(30,20,10,.2);
}
.pagina-suelta canvas{
  position:absolute; left:2.2%; top:5%; width:95.6%; height:91.5%; display:block;
}
.ps-folio{
  position:absolute; top:1.1%; left:3%; right:3%; margin:0; z-index:1;
  text-align:center;
  font:700 clamp(.5rem,calc(.55 * var(--vw)),.72rem)/1.6 'Nunito', sans-serif;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(27,20,9,.6);
  border-bottom:1px solid rgba(27,20,9,.35);
}
/* velo de librillo un pelin desgastado: amarilleo de borde y alguna mota,
   SUTIL, cocido en imagen (nada de filtros por elemento: lagazos) */
.pagina-suelta::after{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:url('assets/prensa/desgaste_a.webp') 0 0/100% 100% no-repeat;
  mix-blend-mode:multiply; opacity:.5;
}
.pagina-suelta.vieja-b::after{
  background-image:url('assets/prensa/desgaste_b.webp');
  transform:scaleX(-1);
}
/* piezas de periodico dentro de las paginas: foto, recuadro, vineta.
   El texto de la pagina las RODEA (reserva del compositor), no las pisa. */
.ps-pieza{
  position:absolute; z-index:2; box-sizing:border-box; overflow:hidden;
  color:rgb(42,33,20); font-family:'Crimson Text', Georgia, serif;
}
.ps-pieza.foto, .ps-pieza.cita, .ps-pieza.vineta, .ps-pieza.pasatiempo{
  padding:0; text-align:center;
}
.ps-pieza.pasatiempo .k{
  display:block; font:700 calc(.5 * var(--vw))/1.4 'Nunito', sans-serif; letter-spacing:.32em;
  text-transform:uppercase; color:rgba(27,20,9,.7); margin-bottom:.35em;
}
.ps-pieza.pasatiempo img{
  /* CON width, NO SOLO max-width: sin anchura declarada la lamina se
     quedaba en su tamano natural (642px) por grande que fuera el hueco
     reservado — el crucigrama no habia forma de agrandarlo. Con width
     al 100% llena su bloque y object-fit le guarda la proporcion. */
  width:100%; height:calc(100% - calc(1.6 * var(--vw)));
  max-width:100%; object-fit:contain;
  display:block; margin:0 auto;
  /* impreso con la pagina, no pegado encima: sin multiply el blanco de la
     lamina tapaba el grano del papel y se veia el canto del recorte */
  mix-blend-mode:multiply;
}
.ps-pieza.pasatiempo .pie{ text-align:center; }
.ps-pieza.dato{
  /* OPACAS: papel sobre papel; la transparencia dejaba leer la hoja de
     abajo a traves del recuadro */
  background:url('assets/textura/p_libro.jpg') 0 0/1040px repeat;
}
.ps-pieza.foto{ padding:calc(.3 * var(--vw)); }
.ps-pieza.foto img{ width:100%; height:calc(100% - calc(2.2 * var(--vw))); object-fit:cover; display:block;
  mix-blend-mode:multiply; filter:saturate(.9) contrast(1.02); }
.ps-pieza .pie{
  margin:.35em 0 0; font-size:calc(.62 * var(--vw)); line-height:1.3; font-style:italic;
  color:rgba(30,22,12,.85); text-align:left;
}
.ps-pieza.cita{
  padding:calc(.9 * var(--vw)) calc(.6 * var(--vw)); display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:'PT Serif', Georgia, serif; font-style:italic; font-weight:700;
  font-size:calc(1.15 * var(--vw)); line-height:1.25; color:rgb(24,18,10);
}
.ps-pieza.vineta{ text-align:center; padding:calc(.4 * var(--vw)); }
.ps-pieza.vineta img{ width:auto; max-width:86%; max-height:calc(100% - calc(1.6 * var(--vw)));
  object-fit:contain; mix-blend-mode:multiply; display:block; margin:0 auto; }
.ps-pieza.pasatiempo{
  padding:0; text-align:center;
}
.ps-pieza.pasatiempo .k{
  display:block; font:700 calc(.5 * var(--vw))/1.4 'Nunito', sans-serif; letter-spacing:.32em;
  text-transform:uppercase; color:rgba(27,20,9,.7); margin-bottom:.35em;
}
.ps-pieza.pasatiempo img{
  /* CON width, NO SOLO max-width: sin anchura declarada la lamina se
     quedaba en su tamano natural (642px) por grande que fuera el hueco
     reservado — el crucigrama no habia forma de agrandarlo. Con width
     al 100% llena su bloque y object-fit le guarda la proporcion. */
  width:100%; height:calc(100% - calc(1.6 * var(--vw)));
  max-width:100%; object-fit:contain;
  display:block; margin:0 auto;
  /* impreso con la pagina, no pegado encima: sin multiply el blanco de la
     lamina tapaba el grano del papel y se veia el canto del recorte */
  mix-blend-mode:multiply;
}
.ps-pieza.pasatiempo .pie{ text-align:center; }
.ps-pieza.dato{
  padding:calc(.7 * var(--vw)) calc(.6 * var(--vw)); text-align:center;
}
.ps-pieza.dato .k{
  display:block; font:700 calc(.52 * var(--vw))/1.4 'PT Serif', Georgia, serif; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(27,20,9,.65); margin-bottom:.4em;
}
.ps-pieza.dato .v{
  font-family:'PT Serif', Georgia, serif; font-weight:700; font-size:calc(1.05 * var(--vw)); line-height:1.35;
}


/* RECORRIDO SIN FICHITAS: la cronologia va contada en su hoja de periodico
   del tablero (MI RECORRIDO), no en tarjetas de cuaderno. La ficha dt/dd y
   la lista de tarjetas se esconden SOLO en esta seccion. */
.pagina-seccion .hoja-cara[data-layout="linea"] > .ficha,
.pagina-seccion .hoja-cara[data-layout="linea"] .lista-apunte{ display:none; }

/* ============ EL DESCOLORIDO DEL PERIÓDICO ============
   Un velo del tono del papel sobre lo IMPRESO. Va por debajo de los robots
   (z5), de la esfera y los hilos (z6) y de los botones (z7), así que el
   dibujo y sus capas no se tocan: sólo se lava el periódico. */
.velo-descolor{
  position:absolute; pointer-events:none;
  /* EL LAVADO VA EN EL ALFA DEL COLOR, NO EN `opacity`.
     Un color solido al 37% de opacidad y ese mismo color con alfa 0,37 se ven
     EXACTAMENTE igual — pero `opacity` es un grupo: obliga al navegador a
     pintar el elemento aparte, en su propia superficie, y luego mezclarla.
     Con dos velos de 4,3 y 9,3 megapixeles eso son dos superficies enteras por
     fotograma. En el alfa del color no hay grupo ni superficie: es pintar un
     rectangulo translucido y ya.
     Medido en el camino de pintado sin tarjeta grafica, quitando las
     opacidades parciales: 37 ms -> 27 ms, y cinco capas menos. */
  background:rgb(233 229 215 / var(--descolor, 0));   /* el tono del papel, no gris */
  /* SOFT, NO DE GOLPE: al mover el mando el lavado entra progresivo */
  transition:background-color .35s ease;
}
/* EL AVISO `will-change` SOLO MIENTRAS SE MUEVE EL MANDO, NUNCA FIJO.
   `will-change:opacity` no es una optimizacion gratis: obliga al navegador a
   reservarle al elemento una CAPA DE COMPOSICION propia para siempre. Y el
   velo del tablero mide 14448x4698 —cubre el recorrido entero—, o sea 67,9
   megapixeles: 259 MB de mapa de bits, la capa mas cara de la pagina junto
   con el papel de fondo, y las dos juntas son el 29% de toda la superficie
   compuesta. Reservada permanentemente para un velo que solo cambia cuando
   se arrastra un mando que casi nunca se toca.
   Sin el aviso, un div de color plano con opacidad se pinta dentro de la capa
   de su padre y no cuesta capa ninguna; se ve exactamente igual. El aviso se
   pone al empezar a mover el mando y se quita al acabar, que es justo para lo
   que sirve. */
/* ya no hace falta avisar de nada: sin `opacity` no hay capa que reservar */
.velo-descolor.velo-moviendo{ will-change:auto; }
/* el del índice: tapa el lienzo del texto y nada más */
.velo-index{ inset:0; z-index:4; }
/* EL DEL TABLERO: SE QUEDA EN SU SITIO Y SE ENCOGE.
   Cubre todo el papel de alrededor —hojas y zonas—, y para eso se le daba la
   extension entera del recorrido: 14448x4698, 67,9 megapixeles, 259 MB. Con
   los lienzos ya congelados era la capa mas grande de la pagina con
   diferencia: el 43% de todo lo que queda por componer.

   PRIMER INTENTO, FALLIDO: colgarlo de la mesa y anclarlo al encuadre. Ahorra
   los 67,9 Mpx pero lo saca del lienzo, y desde fuera se pinta POR ENCIMA de
   todo el tablero —los robots, la esfera, los botones— en vez de solo sobre
   el papel. El descolorido se veia mal. Deshecho.

   LO QUE SI VALE: dejarlo exactamente donde estaba —ultimo hijo del lienzo,
   z-index 5, mismo orden de pintado— y hacer que en vez de ser enorme sea del
   tamaño del encuadre y VIAJE CON LA CAMARA deshaciendo su movimiento. Como
   es un color plano y tapa todo lo que se ve, la imagen es identica: no hay
   dibujo que casar.
   La cuenta: el lienzo lleva T(-cx,-cy) y luego S(cz); el velo lleva lo
   inverso en el orden inverso, S(1/cz) y luego T(+cx,+cy), y el producto es
   la identidad. `--czi` es 1/cz y lo pone libre.js (sin modo libre vale 1).
   El 150% de margen es por si en mitad de un alejamiento las dos escalas no
   se cancelan al milimetro. */
.velo-tablero{
  inset:-25%; z-index:5;
  transform:scale(var(--czi, 1))
            translate(calc(var(--cx, 0) * 100% / 1.5), calc(var(--cy, 0) * 100% / 1.5));
  transition:transform .95s cubic-bezier(.62,.03,.2,1), opacity .35s ease;
}

/* ---- el tuner (tecla D para esconderlo/enseñarlo) ---- */
.tuner-descolor{
  position:fixed; z-index:99; left:14px; bottom:14px;
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:3px;
  background:rgba(28,22,14,.86); color:#efe9dc;
  font:600 11px/1 'Nunito', sans-serif; letter-spacing:.08em;
  box-shadow:0 2px 14px rgba(0,0,0,.3);
  transition:opacity .2s ease, transform .2s ease;
}
.tuner-descolor.oculto{
  opacity:0; pointer-events:none; transform:translateY(8px);
}
.tuner-descolor .tuner-tit{ text-transform:uppercase; opacity:.72; }
.tuner-descolor input[type="range"]{ width:190px; accent-color:#c98a3a; cursor:pointer; }
.tuner-descolor output{ min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
.tuner-descolor .tuner-x{
  border:0; background:transparent; color:#efe9dc; opacity:.6;
  font-size:15px; line-height:1; cursor:pointer; padding:0 2px;
}
.tuner-descolor .tuner-x:hover{ opacity:1; }

/* ============================================================
   EL SUBRAYADOR DE LAS PALABRAS RODEADAS
   ============================================================
   Al apuntar una palabra rodeada, se le pasa el marcador por encima. No
   puede ir DENTRO del .punto: ese lleva opacity:0 !important porque es sólo
   la zona de clic, y cualquier hijo se iría con él. Va en su propia capa,
   por encima del texto y del velo del descolorido, y por debajo del lápiz
   (z4, y más abajo en el DOM que el velo para ganarle a igual z).

   Y va en 'multiply', que es lo que hace un marcador de verdad: no tapa la
   letra, la tiñe. El trazo entra de izquierda a derecha (scaleX) como si lo
   estuvieras pasando, y se retira por donde vino.
   ============================================================ */
/* OJO: la capa NO lleva z-index. Un elemento posicionado CON z-index crea
   contexto de apilamiento, y eso AISLA el blend de sus hijos: la banda
   multiplicaba contra la nada y salia opaca, tapando la palabra en vez de
   tenirla. El z va en la banda, asi su grupo de mezcla sigue siendo
   .folio-apertura — donde esta el lienzo del texto. */
.subrayadores{ position:absolute; inset:0; pointer-events:none; }
.subrayador{
  position:absolute; pointer-events:none; z-index:4;
  mix-blend-mode:multiply;
  transform-origin:0 50%;
  transform:scaleX(0);
  transition:transform .28s cubic-bezier(.28,.72,.36,1);
  /* la punta de bisel deja el trazo más cargado abajo, y los cantos en
     diagonal: es un rotulador, no una regla */
  background:linear-gradient(to bottom,
    var(--sub-a, #f7d98a) 0 8%,
    var(--sub-b, #f2c95e) 46%,
    var(--sub-c, #e9bb45) 92%,
    var(--sub-b, #f2c95e) 100%);
  clip-path:polygon(
    0.6% 14%, 2.2% 3%, 22% 1.5%, 48% 0%, 74% 2%, 97.5% 0.5%, 100% 12%,
    99.4% 86%, 97.8% 98%, 74% 99.5%, 48% 100%, 22% 98%, 2.5% 99%, 0% 88%);
  /* sin opacity: opacity<1 agrupa el elemento y ensucia la mezcla. Lo que
     tenga que ser translúcido va en el alfa de los colores. */
}
.subrayador.pinta{ transform:scaleX(1); }

/* ---- EL ARO DEL BOTÓN DE RUTAS ----
   Redondeles a lápiz alrededor del botón, redibujados cada tic con otro
   pulso: animación a mano, como el hervido de la esfera y de los garabatos.
   z 8: por debajo del botón (z 9/10), así nunca le tapa la palabra. Y SIN
   z-index en el <svg> padre por el mismo motivo que el subrayador — aquí no
   hay blend, pero se mantiene la misma disciplina de capas. */
.aro-rutas{
  position:absolute; z-index:8; overflow:visible; pointer-events:none;
  opacity:0; transition:opacity .22s ease;
}
.aro-rutas.ver{ opacity:1; }
.aro-rutas path{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  /* EL MISMO GRAFITO QUE LA ESFERA. Iba con stroke-dasharray y salían
     puntitos: eso no es un lápiz. Los garabatos del menú usan trazo
     continuo con el filtro tz2 (desplazamiento + grano fractal que le come
     chispitas al alfa), y el aro usa exactamente ese. */
  filter:url(#tz2);
}

/* el subrayador del botón de rutas: LOS CINCO LÁPICES de la esfera cruzados,
   y con más cuerpo que el de una palabra (el botón es una línea fina y un
   marcador de su alto no se leería como marcador) */
/* el subrayador del botón de rutas: NO es un arcoíris. Va de UN color, y
   ese color CAMBIA en cada tic del pulso —como una secuencia de frames
   hechos a mano, igual que el hervido de la esfera—. El color lo pone el JS
   en --sub-a/b/c, así que aquí sólo hace falta el cuerpo de más: el botón es
   una línea fina y un marcador de su alto no se leería como marcador. */
.subrayador.subrayador-rutas{
  filter:saturate(1.06);
}


/* ============================================================================
   VOLVER AL ÍNDICE: LA BOLA DE GRAFITO
   ----------------------------------------------------------------------------
   Es LA MISMA BOLA de la portada, no una bola inventada con degradados: se
   parte de `assets/esfera/esfera_01.webp` —los garabatos de lápiz de verdad—
   y se pasa a mina (`assets/esfera/bola_grafito.webp`). Así tiene el mismo
   grano y el mismo gesto, que es lo que se pedía.

   VA AL FINAL Y SÓLO SOBRE `.volver-hoja` Y LO SUYO. La vez anterior lo metí
   editando reglas de más arriba y me llevé por delante el cierre de una: la
   lista de selectores (que empieza por `.mesa`) se pegó al bloque siguiente,
   `.mesa` heredó un `width:15.5%` y el portfolio entero se estranguló a
   592 px. Aquí abajo no se toca ni una regla existente, sólo se añade.
   ============================================================================ */
.volver-hoja{
  display:flex; align-items:center; gap:.55rem;
  padding:.3rem; bottom:clamp(.6rem,calc(2 * var(--vh)),1.8rem);
  font-style:normal;
}
.vh-bola{
  position:relative; display:block;
  width:clamp(72px,calc(5.6 * var(--vw)),150px); aspect-ratio:1;
  transition:transform .24s cubic-bezier(.2,.7,.3,1.35);
}
.vh-bola img{ display:block; width:100%; height:100%; }
/* el aro a lápiz, como el que lleva la esfera cuando se puede pulsar */
.vh-bola::after{
  content:''; position:absolute; inset:-9%;
  border:1.5px dashed rgba(226,222,210,.34); border-radius:50%;
  transform:rotate(14deg); opacity:0; transition:opacity .22s ease;
}
.volver-hoja:hover .vh-bola{ transform:scale(1.08) rotate(-4deg); }
.volver-hoja:hover .vh-bola::after{ opacity:1; }

/* EL NOMBRE: UNA IMAGEN ESCRITA CON LÁPICES DE VERDAD.
   Lo pinta volver.js con el motor de tinta (la forma de la letra hace de
   máscara y por dentro pasan trazos de lápiz de colores). Aquí sólo se le da
   sitio y el halo de papel para que se lea sobre la mesa oscura y sobre una
   hoja clara. Nada de degradados sobre la tipografía: eso no es un lápiz. */
.vh-txt{
  display:block; pointer-events:none;
  opacity:0; transform:translateX(-10px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.7,.3,1.2);
  /* mientras volver.js no ha escrito, no se enseña la letra de reserva */
  font-size:0; line-height:0;
}
.vh-escrito{
  display:block; height:clamp(34px,calc(2.9 * var(--vw)),66px); width:auto;
  filter:drop-shadow(0 0 5px rgba(243,239,229,.9))
         drop-shadow(0 0 12px rgba(243,239,229,.75));
}
.volver-hoja:hover .vh-txt,
.volver-hoja:focus-visible .vh-txt{ opacity:1; transform:none; }