/* ============================================================
   Nuestra historia — el CSS del mockup aprobado mockups/nuestra-historia.html, tal cual
   (brief §0). Solo se quitaron las reglas de su barra de demostración (.intro, .brand, .note,
   .hint). Lo que pide el build va aparte, al final.
   ============================================================ */
  :root{
    --paper:#EFEBE1; --ink:#1B211C; --rule:#CFC8B8; --moss:#1F4D3A; --moss-deep:#12332A; --mist:#DCE7E6; --copper:#B4632E;
    --font:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  }
  html{color-scheme:light}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
  .wrap{padding-inline:clamp(16px,5vw,64px)}
  .eb{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--moss);margin:0 0 12px}
  h1,h2,h3{text-wrap:balance}
  .btn{display:inline-block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:13px 20px;border:1px solid currentColor;border-radius:2px;color:inherit;text-decoration:none;margin-top:22px}

  /* portada: ver «seis bloques», al final */
  .idx{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
  .idx b{color:var(--ink);font-weight:600;margin-right:6px}

  /* parallax chapters */
  .ch{position:relative;min-height:100vh;min-height:100dvh;display:grid;align-items:center;overflow:hidden;padding-block:12vh;box-sizing:border-box}
  .ch .bg{position:absolute;left:0;right:0;top:-6%;height:112%;background-size:cover;background-position:center;will-change:transform;z-index:0}
  .ch .bg.ph{display:flex;align-items:flex-end;padding:18px clamp(16px,5vw,64px);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
             background:repeating-linear-gradient(135deg,rgba(27,33,28,.04) 0 12px,transparent 12px 24px),var(--mist)}
  .ch .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(239,235,225,.96) 0%,rgba(239,235,225,.86) 45%,rgba(239,235,225,.2) 100%)}
  .ch.dark .veil{background:linear-gradient(90deg,rgba(18,51,42,.96) 0%,rgba(18,51,42,.86) 45%,rgba(18,51,42,.3) 100%)}
  .ch.dark{color:var(--mist)}
  .ch.dark .eb{color:#9FC7B4}
  .ch.dark p{color:#D7E3DB}
  .ch .in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,40rem) minmax(min(260px,100%),1fr);gap:clamp(24px,5vw,72px);align-items:center}
  .ch .num{font-weight:300;font-size:clamp(64px,10vw,140px);line-height:.85;letter-spacing:-.04em;opacity:.18;position:absolute;right:clamp(16px,5vw,64px);top:10vh;z-index:2;font-variant-numeric:tabular-nums}
  .ch h2{font-weight:300;font-size:clamp(30px,4.6vw,58px);margin:0;line-height:1.02;letter-spacing:-.015em}
  .ch h2 b{font-weight:800}
  .ch p{line-height:1.65;margin:16px 0 0;font-size:clamp(15px,1.5vw,17px);color:#3B423C;max-width:48ch}
  .ch blockquote{margin:22px 0 0;padding-left:16px;border-left:2px solid currentColor;font-weight:300;font-size:clamp(18px,2.2vw,26px);line-height:1.3}
  .ch blockquote small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px;font-weight:600}
  .people{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
  .people div{aspect-ratio:3/4;border:1px dashed var(--rule);display:flex;align-items:flex-end;padding:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);box-sizing:border-box;background:rgba(255,255,255,.4)}
  .people b{display:block;color:var(--ink);font-size:12px;letter-spacing:.06em;text-transform:none;margin-bottom:2px}
  .people .pend{border-color:var(--copper);color:var(--copper)}
  /* 16.09.2026: El legado dejó de ser capítulo y entró en el cierre; con él se fue .beliefs */
  .close .eb{color:var(--moss)}
  .close .leg{line-height:1.65;margin:16px auto 0;font-size:clamp(15px,1.5vw,17px);
              color:#3B423C;max-width:58ch}
  .close .final{margin-top:56px;padding-top:56px;border-top:1px solid rgba(34,54,49,.16)}
  .close{padding-block:90px;text-align:center}
  .close h2{font-weight:300;font-size:clamp(30px,5vw,64px);margin:0;line-height:1}
  .close h2 b{font-weight:800}
  .close .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .close .btn{color:var(--moss)}

  @media (max-width:760px){
    .ch .in{grid-template-columns:1fr}
    .ch .veil{background:linear-gradient(180deg,rgba(239,235,225,.3) 0%,rgba(239,235,225,.92) 40%,rgba(239,235,225,.97) 100%)}
    /* 18.09.2026: arrancaba en .4 y el rótulo verde de arriba quedaba en 1,9:1 */
    .ch.dark .veil{background:linear-gradient(180deg,rgba(18,51,42,.82) 0%,rgba(18,51,42,.94) 40%,rgba(18,51,42,.98) 100%)}
    .ch .num{top:auto;bottom:6vh;opacity:.12}
    .people{grid-template-columns:repeat(2,1fr)}
  }
  @media (prefers-reduced-motion:reduce){.ch .bg{transform:none!important}}

  .close{background:#FBFAF6;padding-block:100px 0}
  .close .line{font-weight:300;font-size:clamp(17px,2vw,24px);margin:22px auto 0;max-width:40ch;color:#3B423C}
  .close .line.b{font-weight:600;color:var(--ink);margin-top:10px}
  .close .btns{margin-top:28px}
  /* 19.09.2026: el cierre lleva una sola foto (Carlos con la botella), a sangre; F114 salió */
  /* a sangre en cualquier ancho: el margen del contenedor cambia con el ancho (--borde) */
  .close > .ph.last{margin-top:64px;margin-inline:calc(50% - 50vw)}
  .close .ph.last{height:60vh;border:0;border-radius:0;background:var(--mist);display:flex;align-items:flex-end;padding:24px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);box-sizing:border-box}

/* ================================================================
   Adaptación al build (brief §0), lo único que no viene del mockup.
   (d) Espacios de foto F##: el fondo de cada bloque y la foto del cierre llevan el código y la descripción dentro del bloque del mockup; la foto, cuando llega,
   lo llena.
   ================================================================ */

.ch .bg > .media,.ch .bg > .foto,.close .ph.last > .media,.close .ph.last > .foto{position:absolute;inset:0}
.ch .bg > .media,.close .ph.last > .media{background:none;padding:34px 18px 18px;
  align-items:flex-start;justify-content:flex-start;text-align:left}
/* como la etiqueta .bg.ph del mockup: abajo del fondo, que es más alto que el capítulo */
.ch .bg > .media{align-items:flex-end;padding:18px clamp(16px,5vw,64px)}
.ch .bg > .media::before{left:clamp(16px,5vw,64px)}
.media::after{text-align:left}
.close .ph.last{position:relative;overflow:hidden}
.ch .bg:has(> .foto){background:none}

/* El mockup se aprobó dentro del marco de artifact de claude.ai, cuyo reset pone el cuerpo a
   14 px (y las imágenes a max-width:100%): todo lo que el mockup mide en ch o hereda, se mide así. */
body{font-size:14px}
img{max-width:100%}
/* Hilo 01: las curvas del build original sobre el fondo y el velo del capítulo, bajo el texto */
.ch > .curvas-oscuro{z-index:1}

/* el capítulo es una rejilla: su interior se encogía al contenido */
.ch .in{width:100%}

/* 18.09.2026: entre 761 y 1100 px el texto llega al 56–65 % del ancho, donde el velo lateral de
   los capítulos oscuros ya bajaba a ~.75 (párrafos a 3,8:1). Se sostiene denso hasta el 66 %. */
@media (min-width:761px) and (max-width:1100px){
  .ch.dark .veil{background:linear-gradient(90deg,rgba(18,51,42,.96) 0%,rgba(18,51,42,.88) 66%,rgba(18,51,42,.3) 100%)}
}

/* 19.09.2026 (Diego): seis bloques, uno por foto. La portada deja de ser solo texto: F113, la
   finca, a sangre, con el mismo velo claro y el mismo parallax que los capítulos; el texto y el
   índice de la portada del mockup quedan encima. */
.portada{min-height:88vh;min-height:88dvh}
.portada .in{grid-template-columns:minmax(0,46rem)}
.portada > .curvas-portada{z-index:1}
/* (09.10.2026) Nuestra historia ya cumplía la regla de los fundidos con sus fotos y velos: sus capas
   de curvas quedan como estaban, sin el degradado general de cedral.css. */
.portada > .curvas-portada,.ch > .curvas-oscuro,.close > .curvas-portada{--curvas-fundido:linear-gradient(#000,#000)}
.portada h1{font-weight:300;font-size:clamp(36px,6vw,74px);margin:0;line-height:1;letter-spacing:-.02em}
.portada h1 b{font-weight:800;display:block}
.portada .bajada{color:#3B423C;line-height:1.55;margin:18px 0 0;font-size:clamp(15px,1.7vw,19px);max-width:48ch}
/* Contraste de la portada con foto (auditoría del 19.09.2026): el índice gris daba 4,4 sin foto y
   ~1,1 con una foto oscura, y en celular el texto arrancaba donde el velo es fino (.3). El velo
   de la portada es más denso en la columna del texto y el índice usa el color de los párrafos. */
.portada .veil{background:linear-gradient(90deg,rgba(239,235,225,.96) 0%,rgba(239,235,225,.92) 55%,rgba(239,235,225,.25) 100%)}
.portada .idx{color:#3B423C}

/* Celular: del 19.09 al 04.10.2026 la foto era una banda propia arriba de cada bloque (5:4 en la
   portada, 1:1 en los capítulos, 2,3:1 en el cierre), para no perder más del 25 % de la foto de
   escritorio. Lo reemplazó el celular del mockup, con encuadre propio por foto: está al final. */
/* 19.09.2026 (Diego): entre 761 y 1100 px «04 La huella» del índice caía donde el velo de la
   portada ya es fino (3,3 con una foto oscura). En vez de tapar la foto con más velo, el índice
   baja de la foto a una franja de fondo sólido, como en celular: se muestra la copia de
   .franja-idx y la de adentro sale (display:none; nunca se leen las dos). Para que el título y la
   bajada no se muevan, en su lugar queda un espaciador vacío del mismo alto: una línea en la letra
   del índice (11 px, un espacio duro) y su margen de 28 px. En ese rango el índice es de una sola
   línea en los dos idiomas (medido). */
.franja-idx{display:none}
@media (min-width:761px) and (max-width:1100px){
  .portada .idx{display:none}
  .portada .in > div::after{content:"\00a0";display:block;margin-top:28px;font-size:11px}
  .franja-idx{display:block;padding-block:22px;border-bottom:1px solid var(--rule)}
  .franja-idx .idx{margin-top:0;color:#3B423C}
}

/* 30.09.2026 (brief 3.5: «el fondo cambia de foto con fundido»). Solo escritorio, con JavaScript
   y sin movimiento reducido: js/historia.js pone .activo en .fundido (de 01 al final de 04) y
   lleva la foto de cada capítulo a una capa de .escena, un fondo sticky de 100vh
   (dentro de .escena-caja). Cada capa trae
   su velo (claro u oscuro, el mismo degradado de los capítulos) y entra con opacidad encima de la
   anterior, así foto y velo cruzan juntos. Los capítulos quedan transparentes por encima.
   Sin .activo, todo como antes. */
.fundido{position:relative}
.escena-caja,.escena{display:none}
@media (min-width:761px){
  /* la escena va dentro de una caja absoluta del alto de .fundido: así entra con 01 y sale con
     el final de 04 (con margin-bottom negativo, Chrome la dejaba pegada 100vh de más) */
  .fundido.activo .escena-caja{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  .fundido.activo .escena{display:block;position:sticky;top:0;height:100vh;overflow:hidden}
  .escena .capa{position:absolute;inset:0;opacity:0;will-change:opacity}
  .escena .capa:first-child{opacity:1}
  .escena .bg{position:absolute;left:0;right:0;top:-6%;height:112%;will-change:transform}
  .escena .bg.ph{background:repeating-linear-gradient(135deg,rgba(27,33,28,.04) 0 12px,transparent 12px 24px),var(--mist)}
  .escena .bg:has(> .foto){background:none}
  .escena .bg > .foto,.escena .bg > .media{position:absolute;inset:0}
  .escena .bg > .media{align-items:flex-end;padding:18px clamp(16px,5vw,64px)}
  .escena .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(239,235,225,.96) 0%,rgba(239,235,225,.86) 45%,rgba(239,235,225,.2) 100%)}
  .escena .capa.dark .veil{background:linear-gradient(90deg,rgba(18,51,42,.96) 0%,rgba(18,51,42,.86) 45%,rgba(18,51,42,.3) 100%)}
  .fundido.activo .ch{z-index:1;background:transparent}
  .fundido.activo .ch > .veil{display:none}
}
@media (min-width:761px) and (max-width:1100px){
  .escena .capa.dark .veil{background:linear-gradient(90deg,rgba(18,51,42,.96) 0%,rgba(18,51,42,.88) 66%,rgba(18,51,42,.3) 100%)}
}

/* 03.10.2026 (Diego): un capítulo cuya foto todavía no llega (hoy F119, el 04) no muestra el
   rayado ni el rótulo del hueco: en escritorio queda el color plano del capítulo bajo su velo, y
   en celular no hay cuadrado de foto. Cuando la foto llega, nada de esto aplica. */
.ch .bg > .media{display:none}
.ch .bg.ph:not(:has(> .foto)){background:var(--paper)}
.ch.dark .bg.ph:not(:has(> .foto)){background:var(--moss-deep)}
.escena .bg.ph:not(:has(> .foto)){background:var(--paper)}
.escena .capa.dark .bg.ph:not(:has(> .foto)){background:var(--moss-deep)}
@media (max-width:760px){
  .ch .bg.ph:not(:has(> .foto)){display:none}
}

/* 03.10.2026 (Diego): letra de lectura más grande en esta página. Párrafos de 16 a 19 px, con
   un ancho de unos 62 caracteres; lo que medía 11 px (el índice 01–04 y el antetítulo del
   cierre) pasa a 12 px, y el espaciador del índice entre 761 y 1100 px va en la misma letra.
   La bajada de la portada guarda su medida propia. Los antetítulos de portada y capítulos son
   <p class="eb"> y, por especificidad, siempre tomaron la letra de .ch p (15–17 px), no los
   11 px del mockup: se quedan como estaban, sin crecer con los párrafos. */
.ch p{font-size:clamp(16px,.6vw + 11px,19px);line-height:1.6;max-width:34em}
.ch .eb{font-size:clamp(15px,1.5vw,17px);line-height:1.65}
.eb,.idx{font-size:12px}
@media (min-width:761px) and (max-width:1100px){
  .portada .in > div::after{font-size:12px}
}

/* 03.10.2026 (Diego): la franja de la vitrina, entre 03 y 04, salió de la página; con ella se
   fueron sus reglas (.vitrina, .vitrina-in).

   03.10.2026 (Diego): entre la portada y el 01 se veía una línea: la portada terminaba en borde
   recto y debajo aparecía el fondo fijo. Ahora el fondo fijo arranca 20vh antes, detrás del final
   de la portada, y la portada se esfuma en esos 20vh con una máscara (de opaco a transparente,
   en curva suave): su foto se funde con la del 01 y no queda borde. La máscara va en la portada
   y no en la caja del fondo fijo, para que solo cueste mientras la portada está a la vista. El
   texto de la portada no llega a esa franja (medido de 1280 × 720 a 2560 × 1440; con 24vh el
   índice entraba 12 px a 1280 × 720). Solo desde 1101 px: entre 761 y 1100 px sigue en medio
   la franja del índice, con su fondo sólido. */
@media (min-width:1101px){
  .fundido.activo .escena-caja{top:-20vh}
  .portada:has(~ .fundido.activo){z-index:1;
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20vh),rgba(0,0,0,.896) calc(100% - 16vh),rgba(0,0,0,.648) calc(100% - 12vh),rgba(0,0,0,.352) calc(100% - 8vh),rgba(0,0,0,.104) calc(100% - 4vh),transparent 100%);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 20vh),rgba(0,0,0,.896) calc(100% - 16vh),rgba(0,0,0,.648) calc(100% - 12vh),rgba(0,0,0,.352) calc(100% - 8vh),rgba(0,0,0,.104) calc(100% - 4vh),transparent 100%)}
}

/* ================================================================
   04.10.2026 (Diego): celular (hasta 760 px) según el mockup aprobado
   mockups/nuestra-historia-celular.html. Escritorio no cambia.
   · Capítulos 01–04 y cierre: la foto queda pegada arriba (sticky, 76svh) con un degradado del
     30 % hacia el color del capítulo, y el texto sube 12svh encima con su propio degradado, así
     la foto se sigue viendo y el título no tapa al sujeto. El número del capítulo va grande,
     a la derecha, encima del antetítulo (sale de data-n: el .num de escritorio se apaga).
   · Portada: foto de 58svh con degradado al papel; el texto empieza 64 px antes de que termine.
   · Cada foto trae su recorte vertical (constantes.FOTOS_MOVIL): el punto de foco de escritorio,
     que va en el style del <img>, aquí no corre.
   · Entrada: js/historia.js pone --e (0 → 1) en la foto mientras su capítulo sube por la
     pantalla: de opacidad .25 y escala 1,08 a 1 y 1. Sin JS o con movimiento reducido, queda en 1.
   · Colores: los del sitio (papel, verde profundo y sus textos), no los hex del mockup, que son
     parecidos. --sec es el fondo del bloque; --t y --t2, su texto y su texto secundario. Las
     curvas de nivel no van en celular: el mockup no las trae y quedarían tapadas por el texto.
   Cada medida lleva antes su vh: svh no existe en Safari anterior a 15.4.
   ================================================================ */
@media (max-width:760px){
  .ch,.close{--sec:var(--paper);--t:var(--ink);--t2:#3B423C;background:var(--sec);color:var(--t)}
  .ch.dark{--sec:var(--moss-deep);--t:#D7E3DB;--t2:#9FC7B4}
  .ch{display:block;min-height:0;padding-block:0;overflow:visible}
  .ch .veil,.ch .num,.ch > .curvas-oscuro,.ch > .curvas-portada,.close > .curvas-portada{display:none}

  /* la foto */
  .ch .bg.ph,.close > .ph.last{position:sticky;top:0;left:auto;right:auto;z-index:0;display:block;
    height:76vh;height:76svh;min-height:420px;margin:0;padding:0;overflow:hidden;transform:none!important}
  .close > .ph.last{order:-1;width:100%;aspect-ratio:auto}
  .close > .ph.last:has(> .foto){background:none}
  .ch .bg.ph::after,.close > .ph.last::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;
    pointer-events:none;background:linear-gradient(to bottom,transparent,var(--sec))}
  .fundido .ch .bg img,.close > .ph.last img{transform:scale(calc(1.08 - .08 * var(--e,1)));
    opacity:calc(.25 + .75 * var(--e,1));will-change:transform,opacity}
  .foto[data-movil] > img{object-position:50% 50%!important}

  /* el texto, encima */
  .ch .in,.close .cierre-txt{display:block;position:relative;z-index:1;width:auto;
    margin-top:-12vh;margin-top:-12svh;padding:0 22px 72px;
    background:linear-gradient(to bottom,transparent 0,var(--sec) 11vh);
    background:linear-gradient(to bottom,transparent 0,var(--sec) 11svh)}
  .fundido .ch .in > div::before{content:attr(data-n);display:block;font-weight:300;font-size:96px;
    line-height:.8;letter-spacing:-.04em;opacity:.22;margin:0 0 -10px;text-align:right}
  /* el antetítulo de portada mide 11 px; el de los capítulos y el cierre, 17 px: así se ve en el
     mockup aprobado (ahí .ch p le gana a .ceja) */
  .ch .eb,.close .eb{font-weight:500;font-size:17px;line-height:1.62;letter-spacing:.32em;
    color:var(--t2);margin:0 0 14px;padding-top:10px}
  .ch.dark .eb{color:var(--t2)}
  .ch h2,.close h2{font-weight:300;font-size:clamp(28px,8.4vw,36px);line-height:1.08;
    letter-spacing:-.015em;margin:0 0 18px}
  .ch p,.close .leg,.close .line,.close .line.b{font-weight:400;font-size:17px;line-height:1.62;
    margin:0 0 14px;color:var(--t);max-width:none}
  .ch.dark p{color:var(--t)}
  .ch p b{font-weight:600}
  /* un capítulo cuya foto todavía no llega no tiene foto sobre la cual subir */
  .ch .bg.ph:not(:has(> .foto)) ~ .in{margin-top:0;padding-top:56px;background:var(--sec)}

  /* portada */
  .portada{min-height:0}
  .portada .bg.ph{position:relative;height:58vh;height:58svh;min-height:330px}
  .portada .bg.ph::after{height:38%;background:linear-gradient(to bottom,rgba(239,235,225,0),var(--paper))}
  .portada .in{margin-top:-64px;padding:0 22px 56px;background:none}
  .portada .eb{font-size:11px;line-height:1;padding-top:0}
  .portada h1{font-size:clamp(34px,10vw,44px);line-height:1.02}
  .portada .bajada{font-size:17px;line-height:1.6;color:var(--t2);margin:18px 0 0;max-width:none}
  .portada .idx{gap:8px 14px;margin-top:24px;font-weight:500;font-size:11px;line-height:1;
    letter-spacing:.16em;color:var(--t2);font-variant-numeric:normal}
  .portada .idx b{font-weight:800;margin-right:5px}

  /* cierre: la foto pasa arriba (order) y el texto se alinea a la izquierda, como los capítulos */
  .close{display:flex;flex-direction:column;padding:0;text-align:left}
  .close .final{font-weight:700;font-size:20px;line-height:1.25;letter-spacing:0;margin:34px 0 12px;
    padding-top:0;border-top:0}
  .close .final b{font-weight:700}
  .close .btns{flex-direction:column;flex-wrap:nowrap;gap:10px;margin-top:26px}
  .close .btn{display:block;margin-top:0;padding:17px 18px;text-align:center;font-weight:600;
    font-size:14px;line-height:1;letter-spacing:.06em;text-transform:none;color:var(--ink)}
  .close .btn:first-child{background:var(--moss);border:0;color:#fff}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .fundido .ch .bg img,.close > .ph.last img{transform:none!important;opacity:1!important}
}

/* ================================================================
   09.10.2026 (Diego): fundidos que faltaban (regla del sitio, CLAUDE.md). El fundido de fondo de
   los capítulos en escritorio (.fundido.activo) no se toca.
   · Escritorio, al final de 04: el fondo de los capítulos se esfuma en el blanco del cierre en
     vez de terminar en borde recto (vale con el fundido activo y sin él).
   · Escritorio sin el fundido activo (sin JS o con movimiento reducido): los capítulos apilados
     pasan de velo claro a oscuro con un degradado al color del medio, dentro de su relleno.
   · Celular: la foto de cada capítulo y la del cierre aparecen desde el color del bloque de
     arriba (papel o verde profundo), como ya se iban hacia el suyo por abajo.
   ================================================================ */
:root{--claro-oscuro:color-mix(in oklab,var(--paper),var(--moss-deep))}
@media (min-width:761px){
  .fundido::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12vh;z-index:2;
    pointer-events:none;background:linear-gradient(180deg,rgba(251,250,246,0),#FBFAF6)}
  /* (10.10.2026) las curvas del cierre aparecen dentro de ese paso (en vez de empezar contra el
     borde de arriba), mientras las de 04 se van en el mismo degradado */
  .close > .curvas-portada{--curvas-fundido:linear-gradient(180deg,transparent 0,#000 16vh)}
  /* (10.10.2026) el paso entre capítulos va en el mismo velo (dos capas más, arriba y abajo), que
     está debajo de las curvas: así las curvas entran en el degradado en vez de taparse */
  .fundido:not(.activo) > .ch{--arriba:linear-gradient(180deg in oklab,var(--claro-oscuro),transparent 6vh);
    --abajo:linear-gradient(180deg in oklab,transparent calc(100% - 6vh),var(--claro-oscuro))}
  .fundido:not(.activo) > .ch:first-of-type{--arriba:linear-gradient(transparent,transparent)}
  .fundido:not(.activo) > .ch:last-of-type{--abajo:linear-gradient(transparent,transparent)}
  .fundido:not(.activo) > .ch > .veil{background:var(--arriba),var(--abajo),
    linear-gradient(90deg,rgba(239,235,225,.96) 0%,rgba(239,235,225,.86) 45%,rgba(239,235,225,.2) 100%)}
  .fundido:not(.activo) > .ch.dark > .veil{background:var(--arriba),var(--abajo),
    linear-gradient(90deg,rgba(18,51,42,.96) 0%,rgba(18,51,42,.86) 45%,rgba(18,51,42,.3) 100%)}
  /* el blanco del cierre va de lado a lado (antes era una tarjeta con papel a los costados): así
     el final de 04 y la foto del final se funden en el mismo blanco, sin borde a los costados.
     .con-curvas recorta arriba y abajo (clip-path) pero no a los lados, y las curvas (z-index -1)
     quedan encima de la sombra. */
  .close{box-shadow:0 0 0 100vw #FBFAF6}
  /* la foto del final del cierre aparece desde el blanco del cierre */
  .close > .ph.last::before{content:"";position:absolute;inset:0 0 auto 0;height:14vh;z-index:1;
    pointer-events:none;background:linear-gradient(to bottom,#FBFAF6,rgba(251,250,246,0))}
}
@media (max-width:760px){
  .fundido > .ch{--antes:var(--paper)}
  .fundido > .ch.dark + .ch,.close{--antes:var(--moss-deep)}
  .fundido > .ch:not(:first-of-type) > .bg.ph::before,.close > .ph.last::before{content:"";position:absolute;
    inset:0 0 auto 0;height:18%;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,var(--antes),transparent)}
}
@media (min-width:761px) and (max-width:1100px){
  .fundido:not(.activo) > .ch.dark > .veil{background:var(--arriba),var(--abajo),
    linear-gradient(90deg,rgba(18,51,42,.96) 0%,rgba(18,51,42,.88) 66%,rgba(18,51,42,.3) 100%)}
}