/* ═══════════════════════════════════════════════════════════════════════
   ZENPOWER · la portada · rediseño del 6 sep 2026
   ───────────────────────────────────────────────────────────────────────
   Fondo claro. La célula es ARENA que vibra (cimática, figuras de Chladni:
   ver 00-brief/referencias/07-cimatica.md). Poco en pantalla, y lo poco,
   vivo. Público mayor: letra grande, contraste, una sola acción: pulsar
   la célula. Los colores los pone arena.js según la prueba (?prueba=).
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --fondo:#FDFDFD;   /* el blanco de augen.pro: muy luminoso, neutro (Eloy, 7 sep) */
  --tierra:#B4643A;  /* naranja tierra: solo para líneas, números y separadores de las secciones (Eloy, 7 sep) */ --tinta:#151311; --tinta2:#6B5E4E; --acento:#C9A14A; --linea:rgba(21,19,17,.18);
  --serif:"Newsreader",Georgia,serif;   /* la serif de lectura. La de la referencia (Teodor,
      de Pangram Pangram) es de pago; Newsreader es la libre más cercana y además es la
      serif de la marca LOY. Eloy, 9 sep: «quiero la misma tipografía de la web que te pasé» */
  --sans:"Inter",-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --logo:"HN","Helvetica Neue",Helvetica,Arial,sans-serif;   /* la letra del logotipo: la pista va en ella */
  --paso:cubic-bezier(.22,1,.36,1);
}
/* la letra del logotipo, para las pruebas. OJO: Helvetica Neue es de pago para web
   (Monotype); para publicar hay que licenciarla o elegir otra. Aquí, solo para ver. */
/* la escritura del mantra: Yuji Syuku, un pincel japonés. Solo lleva dentro las letras de
   «amor saca amor» (5 KB en vez de 4 MB: la fuente entera trae todos los kanji). */
@font-face{font-family:"Mantra";src:url(tipos/yuji-mantra.woff2) format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url(tipos/newsreader-variable.woff2) format("woff2-variations");
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"HN";src:url(tipos/HelveticaNeue-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"HN";src:url(tipos/HelveticaNeue-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"HN";src:url(tipos/HelveticaNeue-Light.ttf) format("truetype");font-weight:300;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--fondo);color:var(--tinta);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
#arena{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ── la cabecera ─────────────────────────────────────────────────── */
/* LA CABECERA ENTRA POR SUS DOS EXTREMOS (Eloy, 9 sep: «cuando abres la página me gustaría
   que ZENPOWER arriba a la izquierda y el menú a la derecha salieran de forma más orgánica»).
   Antes aparecían los dos a la vez, con un simple fundido de un segundo. Ahora cada uno
   entra por SU lado —el nombre desde la izquierda, el menú desde la derecha—, desenfocados
   y con un punto de altura, y se posan; el menú entra un poco después que el nombre, que es
   quien manda. La misma gramática que la deriva de las secciones, para que la web tenga un
   solo gesto.                                                                            */
.cab{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:clamp(18px,3vh,32px) clamp(20px,3.2vw,44px);pointer-events:none}
.cab>*{opacity:0;filter:blur(6px);
  transition:opacity 1.1s var(--paso),transform 1.4s var(--paso),filter 1.2s var(--paso)}
.cab>.logo{transform:translate3d(-26px,-8px,0)}
.cab>.cab__derecha{transform:translate3d(26px,-8px,0);transition-delay:.22s}
body.abierta .cab>*{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){ .cab>*{transform:none!important;filter:none!important} }
.cab>*{pointer-events:auto}
.cab__derecha{display:flex;align-items:center;gap:clamp(30px,4vw,72px)}   /* Eloy, 7 sep: la cuenta más a la izquierda, «que no esté todo tan pegado» */
.logo{display:inline-flex;align-items:center;gap:.22em;font-size:clamp(15px,1.35vw,20px);color:var(--tinta);text-decoration:none}   /* Eloy, 7 sep: «un poquito más grande»; 9 sep: «un pelín más chiquitito» */
.logo__palabra{height:.785em;width:auto;display:block;overflow:visible}   /* .75em de mayúscula, sobre un viewBox que ya incluye el rebose (747 en vez de 714) */
/* el botón del menú: la palabra MENÚ y un círculo con un punto —una célula— (la
   referencia 08). Eloy, 6 sep: «el circulito, ese déjalo, me ha encantado». El
   núcleo crece al abrir. Grande de tocar: 44 px.                                  */
.boton-menu{display:inline-flex;align-items:center;gap:14px;height:44px;padding:0 2px;border:0;background:none;cursor:pointer;color:var(--tinta)}
.boton-menu__palabra{font-family:var(--logo);font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.8;transition:opacity .3s}
.boton-menu:hover .boton-menu__palabra{opacity:1}
/* Eloy, 6 sep: «al pasar el ratón, una animación más variada». La célula se pone
   viva: el núcleo se descentra y da vueltas despacio, del borde brota una hija
   que sale y vuelve (como madre e hija del logotipo), una onda tenue se expande
   desde el anillo, y la palabra se abre un pelo. Todo lento: gente mayor.       */
.boton-menu__celu{position:relative;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;flex:none}
.boton-menu__celu::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid currentColor;opacity:0}
.boton-menu__celu i{position:absolute;left:50%;top:50%;border-radius:50%;background:currentColor;translate:-50% -50%}
.boton-menu__celu .nucleo{width:6px;height:6px;transition:transform .7s var(--paso)}
.boton-menu__celu .hija{width:4px;height:4px;opacity:0}
.boton-menu:hover .boton-menu__palabra{letter-spacing:.34em}
.boton-menu__palabra{transition:opacity .3s,letter-spacing .7s var(--paso)}
.boton-menu:hover .boton-menu__celu .nucleo{animation:orbita 3.2s ease-in-out infinite}
.boton-menu:hover .boton-menu__celu .hija{animation:brota 3.2s ease-in-out infinite}
.boton-menu:hover .boton-menu__celu::after{animation:onda 3.2s ease-out infinite}
@keyframes orbita{0%,100%{translate:-50% -50%}25%{translate:-10% -80%}50%{translate:20% -30%}75%{translate:-80% 0%}}
@keyframes brota{0%,15%{opacity:0;translate:-50% -50%;scale:.4}45%{opacity:.9;translate:-50% -50%;scale:1}70%{opacity:.9;translate:290% -50%;scale:1}100%{opacity:0;translate:340% -50%;scale:.4}}
@keyframes onda{0%{opacity:.5;scale:1}100%{opacity:0;scale:1.9}}
body.menu-abierto .boton-menu__celu .nucleo{animation:none;transform:scale(2.4)}     /* abierto: el núcleo crece y se queda */
body.menu-abierto .boton-menu__celu .hija,body.menu-abierto .boton-menu__celu::after{animation:none}
@media (prefers-reduced-motion:reduce){.boton-menu:hover .boton-menu__celu .nucleo,.boton-menu:hover .boton-menu__celu .hija,.boton-menu:hover .boton-menu__celu::after{animation:none}}

/* ── el menú · cuatro pruebas (menu.html) ─────────────────────────────
   A cortina: un panel entra por la derecha, entradas grandes en serif.
   B velo: la portada se retira y las entradas ocupan el centro, enormes.
   C lista: un desplegable pequeño bajo el botón, en la letra del logo.
   D rayitas: un índice de rayitas a la derecha, siempre a la vista; el
     nombre aparece al pasar o al abrir (la referencia 08).             */
.menu{position:fixed;z-index:18;pointer-events:none}
.menu ol{list-style:none}
.menu a{display:flex;align-items:baseline;gap:.6em;color:var(--tinta);text-decoration:none}
/* LO QUE ESTÁ POR VENIR (Eloy, 9 sep: «en Retiros y en Galería pon próximamente, algo
   bonito al lado, y que si le das no pase nada»). Se lee igual de bien que las demás
   —no se apaga hasta parecer rota—, pero lleva su nota al costado y el cursor no invita
   a pulsarla. El que no haga nada lo decide menu.js.                                  */
.menu__pronto>a{cursor:default}
.menu__pronto>a>span{opacity:.62;transition:opacity .4s var(--paso)}
.menu__pronto>a>em{font-style:normal;font-family:var(--logo);font-weight:400;
  font-size:.34em;letter-spacing:.24em;text-transform:uppercase;color:var(--tierra);
  opacity:.85;white-space:nowrap;align-self:center;
  border:1px solid rgba(180,100,58,.32);border-radius:2em;padding:.42em .9em .38em}
html.menu-velo .menu__pronto>a>em{font-size:.19em;margin-top:.5em}
.menu__pronto>a:hover>span{opacity:.62}
.menu small{font-family:var(--logo);font-weight:700;font-size:11px;letter-spacing:.2em;color:var(--tinta2)}
.menu span{font-family:var(--serif);font-weight:400;line-height:1.1}

/* A · cortina */
html.menu-cortina .menu{inset:0 0 0 auto;width:min(46vw,560px);background:var(--fondo);border-left:1px solid var(--linea);
  padding:clamp(96px,17vh,160px) clamp(36px,4.4vw,72px) 48px;transform:translateX(100%);transition:transform .8s var(--paso);
  box-shadow:-40px 0 80px rgba(21,19,17,.05)}
html.menu-cortina body.menu-abierto .menu{transform:none;pointer-events:auto}
html.menu-cortina .menu li{border-bottom:1px solid var(--linea)}
html.menu-cortina .menu a{align-items:center;padding:clamp(14px,2.2vh,24px) 0;font-size:clamp(26px,2.4vw,38px);transition:padding-left .5s var(--paso)}
html.menu-cortina .menu a::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--acento);opacity:0;transform:scale(.3);transition:opacity .4s,transform .5s var(--paso);margin-right:.2em}
html.menu-cortina .menu a:hover{padding-left:.25em}
html.menu-cortina .menu a:hover::before{opacity:1;transform:none}
html.menu-cortina .menu small{min-width:2.2em}

/* B · velo */
html.menu-velo .menu{inset:0;display:grid;place-content:center;text-align:center;opacity:0;transition:opacity .9s var(--paso)}
html.menu-velo body.menu-abierto .menu{opacity:1;pointer-events:auto}
html.menu-velo body.menu-abierto .portada{opacity:0;transition:opacity .6s var(--paso)}
html.menu-velo body.menu-abierto .pista{animation:none;opacity:0;transition:opacity .6s var(--paso)}   /* la pista lleva animación: hay que quitársela para que se retire */
html.menu-velo .menu a{flex-direction:column;align-items:center;gap:.1em;padding:clamp(6px,1.4vh,14px) 0;font-size:clamp(34px,4.4vw,66px);color:var(--tinta2);transition:color .4s}
html.menu-velo .menu a:hover{color:var(--tinta)}
html.menu-velo .menu small{font-size:10px}
html.menu-velo .menu .menu__empezar a{color:var(--acento)}

/* C · lista */
html.menu-lista .menu{top:clamp(66px,10vh,96px);right:clamp(20px,3.2vw,44px);width:min(84vw,380px);background:var(--fondo);
  border:1px solid var(--linea);box-shadow:0 30px 60px rgba(21,19,17,.06);opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--paso),transform .6s var(--paso)}
html.menu-lista body.menu-abierto .menu{opacity:1;transform:none;pointer-events:auto}
html.menu-lista .menu li+li{border-top:1px solid var(--linea)}
html.menu-lista .menu a{justify-content:space-between;align-items:center;padding:17px 24px;transition:background .3s}
html.menu-lista .menu a:hover{background:rgba(21,19,17,.035)}
html.menu-lista .menu span{font-family:var(--logo);font-weight:700;font-size:clamp(13px,1.05vw,15px);letter-spacing:.2em;text-transform:uppercase}
html.menu-lista .menu .menu__empezar span{color:var(--acento)}

/* D · rayitas */
html.menu-rayitas .menu{right:clamp(20px,3.2vw,44px);top:50%;translate:0 -50%;pointer-events:auto;opacity:0;transition:opacity 1s var(--paso)}
html.menu-rayitas body.lista .menu{opacity:1}
html.menu-rayitas .menu li{display:flex;justify-content:flex-end}
html.menu-rayitas .menu a{align-items:center;gap:16px;padding:9px 0}
html.menu-rayitas .menu small{display:none}
html.menu-rayitas .menu span{font-size:clamp(17px,1.4vw,23px);opacity:0;transform:translateX(8px);transition:opacity .5s var(--paso),transform .6s var(--paso)}
html.menu-rayitas .menu a::after{content:"";width:22px;height:1.5px;background:var(--tinta);opacity:.5;transition:width .6s var(--paso),opacity .4s}
html.menu-rayitas .menu a:hover::after,html.menu-rayitas body.menu-abierto .menu a::after{width:40px;opacity:1}
html.menu-rayitas .menu a:hover span,html.menu-rayitas body.menu-abierto .menu span{opacity:1;transform:none}
html.menu-rayitas .menu .menu__empezar a::after{background:var(--acento);opacity:.9}

/* ── la portada ──────────────────────────────────────────────────────
   Eloy, 6 sep: «quiero la célula centrada». Siempre centrada; la frase
   DEBAJO (?frase=abajo, por defecto) o ARRIBA y más pequeña, bajo la
   cabecera (?frase=arriba). ?letra=sans la pone en Inter en vez de serif.
   La arena sabe dónde está la célula por la misma regla (arena.js), y
   coloca la pista justo debajo de ella.                                 */
.portada{
  position:fixed;inset:0;z-index:10;pointer-events:none;
  display:grid;grid-template-rows:1fr auto;justify-items:center;
  padding:0 clamp(20px,5vw,80px) clamp(36px,7vh,72px);
}
.portada__celula{grid-row:1}                         /* el hueco de la célula: la arena vive aquí */
.frase{
  grid-row:2;pointer-events:auto;opacity:0;
  /* Eloy, 7 sep: «en consonancia con la tipografía de ZENPOWER: igual, pero con un
     trazado más fino». La letra del logotipo en Light 300, no la serif.          */
  font-family:var(--logo);font-weight:300;
  font-size:clamp(16px,1.45vw,22px);line-height:1.5;letter-spacing:.005em;
  color:var(--tinta);text-align:center;max-width:min(62ch,100%);text-wrap:balance;
}
html.frase-sans .frase{font-family:var(--sans);font-size:clamp(15px,1.2vw,19px);line-height:1.5;letter-spacing:.01em;color:var(--tinta2);max-width:52ch}
/* arriba: bajo la cabecera, más chiquitina */
html.frase-arriba .portada{grid-template-rows:auto 1fr;padding-top:clamp(64px,11vh,120px);padding-bottom:clamp(24px,5vh,56px)}
html.frase-arriba .portada__celula{grid-row:2}
html.frase-arriba .frase{grid-row:1;font-size:clamp(17px,1.5vw,23px);max-width:46ch}
html.frase-arriba.frase-sans .frase{font-size:clamp(14px,1.05vw,17px);max-width:56ch}
/* la frase espera: entra cuando la célula ya se ha posado (arena.js pone body.lista) */
body.lista .frase{animation:aparece 1.2s var(--paso) forwards}
@keyframes aparece{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* la pista, debajo de la célula, en la letra del logotipo, latiendo despacio
   (gente mayor: nada rápido). arena.js la coloca bajo el disco.           */
.pista{
  position:fixed;z-index:15;translate:-50% 0;
  border:0;background:none;cursor:pointer;padding:10px 14px;
  font-family:var(--logo);font-weight:700;font-size:clamp(12px,1.05vw,15px);
  letter-spacing:.24em;text-transform:uppercase;color:var(--tinta);
  opacity:0;
}
body.lista .pista{animation:aparece 1s var(--paso) forwards,late 2.8s ease-in-out 1s infinite}
@keyframes late{0%,100%{opacity:1}50%{opacity:.4}}

/* ── la carga ────────────────────────────────────────────────────────
   Dos telones y una línea entre ellos. La línea crece hacia la derecha
   escalando, no cambiando de ancho —así va suave—; el número no cuenta,
   dobla. Al llenarse, los telones se abren por ella y la arena se levanta.
   Es la carga de la web de humo, en claro: telones del fondo, línea en
   tinta (Eloy, 6 sep: «en negro, perfecto»). arena.js la lleva con GSAP. */
.carga{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;pointer-events:none}
.carga[hidden]{display:none}
.carga__telon{flex:1;background:var(--fondo)}
.carga__linea{height:22px;background:var(--tinta);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
/* el mantra de la carga. Eloy, 9 sep: «quita el número y pon amor saca amor, que es un
   mantra, con una escritura bonita tipo japonés»; y va «dentro de la línea, en blanco, muy
   chiquitito, a la izquierda, donde estaba el número». La línea mide 22 px de alto y está
   en el centro de la pantalla: el mantra se calza dentro, alineado a su izquierda. */
.carga__mantra{position:fixed;left:clamp(14px,2.4vw,34px);top:50%;translate:0 -50%;
  z-index:31;margin:0;display:flex;gap:.02em;height:22px;align-items:center;
  font-family:"Mantra",var(--logo),sans-serif;font-weight:400;
  font-size:11px;letter-spacing:.16em;color:var(--fondo);
  white-space:pre;pointer-events:none}
.carga__mantra i{font-style:normal;opacity:0;filter:blur(3px);transform:translateY(.1em);
  transition:opacity .45s var(--paso),filter .5s var(--paso),transform .5s var(--paso)}
.carga__mantra i.se{opacity:1;filter:none;transform:none}

/* ── el submenú · lo que aparece al pulsar la célula ──────────────────
   Eloy, 6 sep (noche): «al pulsar, que toda la arena se esparza por toda la
   pantalla y de repente aparezca el submenú; muéstrame cinco opciones».
   Cinco pruebas (?sub=, comparador sub.html), todas sobre el polvo de arena:
   lista · corro (el polvo se junta en seis células pequeñas, cada una con su
   figura) · pilares (se junta en los tres pilares del guion, grandes) ·
   rejilla (seis bloques con su frase) · flota (las secciones flotan por la
   pantalla, quietas bajo la mano).                                          */
.sub{position:fixed;inset:0;z-index:12;pointer-events:none;opacity:0;transition:opacity 1s var(--paso)}
body.submenu .sub{opacity:1}
.sub ol{list-style:none}
.sub__item,.sub__pilar{pointer-events:auto;color:var(--tinta);text-decoration:none;display:block}
.sub__item small{display:block;font-family:var(--logo);font-weight:700;font-size:11px;letter-spacing:.22em;color:var(--tinta2)}
.sub__item span,.sub__pilar span{display:block;font-family:var(--serif);font-weight:400;line-height:1.12}
.sub__item em,.sub__pilar em{display:block;font-style:normal;font-family:var(--sans);font-size:clamp(13px,.95vw,15px);line-height:1.45;color:var(--tinta2);margin-top:.4em}
/* cómo entra el racimo en cada manera de estallar (Eloy, 7 sep: «que explote y aparezca
   todo de repente»). En la onda, cada palabra se enciende por separado, con el retraso
   que le pone la arena según lo lejos que esté del centro.                           */
html.estalla-1 .sub{transition-duration:.5s}
html.estalla-3 .sub{transition-duration:.55s}
html.estalla-4 .sub{transition-duration:.85s}
html.estalla-2 .sub{opacity:1;transition:none}
html.estalla-2 .sub__item{opacity:0;pointer-events:none;transition:opacity .5s var(--paso)}
html.estalla-2 body.submenu .sub__item{opacity:1;pointer-events:auto}
body.submenu .pista,body.pulsada .pista{display:none}   /* pulsada la célula, la pista ya no vuelve (Eloy, 8 sep) */
body.pulsada .portada{opacity:0;transition:opacity .5s var(--paso)}
/* OJO: el estado del cuerpo es body.submenu, no body.sub: .sub es el bloque del submenú y su
   regla (opacity 0 hasta que toca) se aplicaría al cuerpo entero. Pasó el 6 sep: la página
   se fundía a blanco al pulsar. Las clases de estado no repiten nombres de bloques.        */
html:not(.sub-pilares) .sub__pilares{display:none}
.volver{position:fixed;left:50%;bottom:clamp(20px,4vh,40px);translate:-50% 0;z-index:16;border:0;background:none;cursor:pointer;padding:10px 14px;
  font-family:var(--logo);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta2);
  opacity:0;pointer-events:none;transition:opacity .8s var(--paso),color .3s}
.volver::before{content:"←  "}
.volver:hover{color:var(--tinta)}
body.submenu .volver{opacity:1;pointer-events:auto}

/* 1 · lista: las seis, apiladas en el centro, enormes, sobre el polvo */
html.sub-lista .sub{display:grid;place-content:center;text-align:center}
html.sub-lista .sub ol{display:grid;gap:clamp(4px,1vh,12px)}
html.sub-lista .sub__item{color:var(--tinta2);transition:color .4s}
html.sub-lista .sub__item:hover{color:var(--tinta)}
html.sub-lista .sub__item span{font-size:clamp(30px,3.9vw,58px)}
html.sub-lista .sub__item small{font-size:10px}
html.sub-lista .sub__item em{display:none}
html.sub-lista .sub__empezar .sub__item{color:var(--acento)}

/* 2 · corro: el polvo se junta en seis células pequeñas; el nombre, debajo de cada una */
html.sub-corro .sub__item{position:absolute;translate:-50% 0;text-align:center;opacity:0;transition:opacity .9s var(--paso),color .3s}
html.sub-corro body.juntas .sub__item{opacity:1}
html.sub-corro .sub__item span{font-size:clamp(18px,1.55vw,25px);white-space:nowrap}
html.sub-corro .sub__item small,html.sub-corro .sub__item em{display:none}
html.sub-corro .sub__item:hover{color:var(--acento)}
html.sub-corro .sub__empezar .sub__item{color:var(--acento)}

/* 3 · pilares: tres células grandes en fila, con su nombre y sus tres palabras; el resto, en una fila pequeña abajo */
html.sub-pilares .sub__pilar{position:absolute;translate:-50% 0;text-align:center;opacity:0;transition:opacity .9s var(--paso),color .3s;max-width:22ch}
html.sub-pilares body.juntas .sub__pilar{opacity:1}
html.sub-pilares .sub__pilar span{font-size:clamp(20px,1.8vw,29px)}
html.sub-pilares .sub__pilar:hover{color:var(--acento)}
html.sub-pilares .sub ol{position:absolute;left:50%;bottom:clamp(68px,11vh,104px);translate:-50% 0;display:flex;gap:clamp(18px,2.6vw,44px);white-space:nowrap;opacity:0;transition:opacity .9s var(--paso) .4s}
html.sub-pilares body.juntas .sub ol{opacity:1}
html.sub-pilares .sub ol li:first-child{display:none}
html.sub-pilares .sub__item span{font-family:var(--logo);font-weight:700;font-size:clamp(12px,.9vw,13px);letter-spacing:.22em;text-transform:uppercase;color:var(--tinta2);transition:color .3s}
html.sub-pilares .sub__item:hover span{color:var(--tinta)}
html.sub-pilares .sub__item small,html.sub-pilares .sub__item em{display:none}
html.sub-pilares .sub__empezar .sub__item span{color:var(--acento)}

/* 4 · rejilla: seis bloques, número, nombre y su frase; el polvo se ve entre ellos */
html.sub-rejilla .sub{display:grid;place-content:center}
html.sub-rejilla .sub ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);width:min(1120px,88vw)}
html.sub-rejilla .sub__item{padding:clamp(22px,2.8vh,38px) clamp(20px,2vw,32px);border:1px solid var(--linea);
  background:color-mix(in srgb,var(--fondo) 80%,transparent);transition:background .5s var(--paso),transform .6s var(--paso),border-color .4s}
html.sub-rejilla .sub__item:hover{background:var(--fondo);transform:translateY(-3px);border-color:var(--tinta2)}
html.sub-rejilla .sub__item span{font-size:clamp(22px,2vw,32px);margin-top:.5em}
html.sub-rejilla .sub__empezar .sub__item{border-color:var(--acento)}
html.sub-rejilla .sub__empezar .sub__item span{color:var(--acento)}

/* 5 · flota (ELEGIDA, Eloy: «me encanta»): las secciones flotan por la pantalla a su
   aire, entran una a una, y bajo la mano se quedan quietas, crecen un pelo y el polvo
   las rodea. Tamaños y opacidades distintos: profundidad.                          */
html.sub-flota .sub__item{position:absolute;translate:-50% -50%;text-align:center;padding:.2em .5em;
  opacity:0;transition:opacity 1.4s var(--paso),color .5s,scale .9s var(--paso)}
/* las que flotan se colocan con transform (arena.js): sin left/top el navegador las
   compone sin recalcular la página, y el movimiento va fino. Eloy, 7 sep.        */
html.flota-suave .sub__item{left:0;top:0;translate:none;will-change:transform;backface-visibility:hidden}
/* «un circulito finito, tipo el de Crear tu cuenta»: cada sección en su píldora de
   borde fino; el polvo se ve por dentro. Al pasar, el borde y la letra se doran. */
/* Eloy, 7 sep, después: «las líneas que lo cubren no me convencen: quítalas; que los
   puntitos tampoco toquen la tipografía, que se queden ahí repeliéndolo, pero no
   uniforme, más orgánico». Sin filete: la caja de la píldora sigue existiendo, pero
   solo como el aire que el polvo no puede invadir (arena.js, con margen irregular). */
html.flota-suave .sub__item{border:0;border-radius:999px;padding:.85em 1.6em;
  transition:opacity 1.4s var(--paso),color .5s,scale .9s var(--paso)}
/* Empezar cierra la escalera: más grande y más aire */
html.flota-suave .sub__empezar .sub__item{padding:1.05em 2.1em}
html.flota-suave .sub__empezar .sub__item span{font-size:clamp(21px,2vw,32px)!important}
html.sub-flota body.submenu .sub__item{opacity:1}
html.sub-flota li:nth-child(1) .sub__item{transition-delay:.05s}
html.sub-flota li:nth-child(2) .sub__item{transition-delay:.25s}
html.sub-flota li:nth-child(3) .sub__item{transition-delay:.45s}
html.sub-flota li:nth-child(4) .sub__item{transition-delay:.65s}
html.sub-flota li:nth-child(5) .sub__item{transition-delay:.85s}
html.sub-flota li:nth-child(6) .sub__item{transition-delay:1.05s}
html.sub-flota body.submenu .sub__item:hover{transition-delay:0s;scale:1.05;color:var(--acento)}
html.sub-flota .sub__item span{font-size:clamp(26px,2.9vw,46px);white-space:nowrap}
html.sub-flota li:nth-child(1) .sub__item span{font-size:clamp(30px,3.4vw,54px)}
html.sub-flota li:nth-child(3) .sub__item span{font-size:clamp(28px,3.1vw,50px)}
html.sub-flota li:nth-child(4) .sub__item span{font-size:clamp(24px,2.6vw,42px);color:var(--tinta2)}
html.sub-flota li:nth-child(5) .sub__item span{font-size:clamp(24px,2.7vw,44px);color:var(--tinta2)}
html.sub-flota .sub__item:hover span{color:inherit}
html.sub-flota .sub__item small,html.sub-flota .sub__item em{display:none}
html.sub-flota .sub__empezar .sub__item{color:var(--acento)}
/* flota b: con su número encima y su frase del guion debajo */
html.flota-b .sub__item small{display:block;font-size:10px;margin-bottom:.3em}
html.flota-b .sub__item em{display:block;font-size:clamp(12px,.9vw,14px);max-width:28ch;margin:.35em auto 0;white-space:normal;color:var(--tinta2)}
html.flota-b .sub__item span{font-size:clamp(22px,2.4vw,38px)}
html.flota-b li:nth-child(1) .sub__item span{font-size:clamp(24px,2.7vw,44px)}
html.flota-b li:nth-child(3) .sub__item span{font-size:clamp(23px,2.5vw,40px)}
html.flota-b li:nth-child(4) .sub__item span,html.flota-b li:nth-child(5) .sub__item span{font-size:clamp(21px,2.2vw,34px)}
/* flota e–h: solo tres secciones, juntas; Empezar la más llamativa */
html.flota-tres .sub li:nth-child(1),html.flota-tres .sub li:nth-child(4),html.flota-tres .sub li:nth-child(5){display:none}
html.flota-tres .sub__item span{font-size:clamp(26px,2.7vw,44px)!important;color:var(--tinta)}
html.flota-tres .sub__empezar .sub__item span{font-size:clamp(38px,4.2vw,68px)!important;color:var(--acento)}
html.flota-tres .sub__item:hover span{color:var(--acento)}
/* flota i–l: cuatro secciones (Qué es · Qué consigues · Miguel Mochales · Empezar), solo letras, juntas */
html.flota-cuatro .sub li:nth-child(1),html.flota-cuatro .sub li:nth-child(4),html.flota-cuatro .sub li:nth-child(5){display:none}
html.flota-cuatro .sub__item span{font-size:clamp(26px,2.8vw,46px)!important;color:var(--tinta)}
html.flota-cuatro .sub__empezar .sub__item span{font-size:clamp(38px,4.2vw,68px)!important;color:var(--acento)}
html.flota-cuatro .sub__item:hover span{color:var(--acento)}
html.flota-j .sub__item span{font-size:clamp(30px,3.4vw,56px)!important}
html.flota-j .sub__empezar .sub__item span{font-size:clamp(42px,4.8vw,78px)!important}
/* el racimo con la letra del logotipo (Eloy, 7 sep): ?tipo= */
html.tipo-mayus .sub__item span{font-family:var(--logo);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(22px,2.3vw,38px)!important}
html.tipo-mayus .sub__empezar .sub__item span{font-size:clamp(32px,3.6vw,58px)!important}
html.tipo-minus .sub__item span{font-family:var(--logo);font-weight:700;letter-spacing:-.015em;font-size:clamp(24px,2.6vw,42px)!important}
html.tipo-minus .sub__empezar .sub__item span{font-size:clamp(34px,3.9vw,62px)!important}
html.tipo-espaciada .sub__item span{font-family:var(--logo);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(15px,1.4vw,22px)!important}
html.tipo-espaciada .sub__empezar .sub__item span{font-size:clamp(19px,1.8vw,28px)!important}

/* ── la cuenta: iniciar sesión y crear tu cuenta · cuatro pruebas ─────────
   a: texto en la cabecera, junto a MENÚ, en la letra del logo.
   b: en la cabecera, «Crear tu cuenta» como píldora y «Iniciar sesión» en texto.
   c: bajo la frase de la portada, dos botones grandes (gente mayor).
   d: una célula-botón CUENTA junto a MENÚ que despliega las dos opciones.     */
.cuenta{display:none;align-items:center;gap:clamp(14px,1.6vw,26px);font-family:var(--logo);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase}
.cuenta a{color:var(--tinta);text-decoration:none;white-space:nowrap;transition:color .3s,background .35s var(--paso),border-color .3s}
.cuenta__celu{display:none}
.cuenta__lista{display:contents}
html.cuenta-a .cuenta,html.cuenta-b .cuenta,html.cuenta-c .cuenta,html.cuenta-d .cuenta{display:flex}
/* a · texto junto a MENÚ */
html.cuenta-a .cuenta a{opacity:.8}
html.cuenta-a .cuenta a:hover{opacity:1;color:var(--acento)}
html.cuenta-a .cuenta__crear::before{content:"·";margin-right:clamp(14px,1.6vw,26px);opacity:.5}
/* b · píldora para crear la cuenta */
html.cuenta-b .cuenta__entrar{opacity:.8}
html.cuenta-b .cuenta__entrar:hover{opacity:1}
/* la píldora (ELEGIDA), tal cual: borde, y al pasar se llena de tinta. (Se probó un
   llenado de puntitos —cuenta.js, en _archivo/— y Eloy lo descartó: «sin puntos y sin
   nada».) Y NO va en la portada de inicio: aparece con las secciones, al pulsar la
   célula (body.submenu). Eloy, 7 sep.                                             */
html.cuenta-b .cuenta__crear{border:1px solid var(--tinta);border-radius:999px;padding:9px 15px;font-size:10px;letter-spacing:.22em}   /* 1: un punto más pequeña que la primera */
html.pildora-2 .cuenta__crear{padding:7px 12px;font-size:9.5px;letter-spacing:.2em;border-color:var(--tinta2)}                   /* 2: más pequeña aún, borde más suave */
html.pildora-2 .cuenta{gap:clamp(12px,1.4vw,22px)}
html.cuenta-b .cuenta__crear:hover{background:var(--tinta);color:var(--fondo)}
html.cuenta-b .cuenta{opacity:0;pointer-events:none;transition:opacity 1s var(--paso)}
html.cuenta-b body.submenu .cuenta{opacity:1;pointer-events:auto;transition-delay:.4s}
/* c · bajo la frase, grandes */
html.cuenta-c .cuenta{position:fixed;left:50%;bottom:clamp(22px,4.5vh,44px);translate:-50% 0;z-index:14;gap:14px;font-size:clamp(12px,.95vw,14px);opacity:0;pointer-events:none;transition:opacity 1s var(--paso)}
html.cuenta-c body.lista:not(.pulsada) .cuenta{opacity:1;pointer-events:auto}
html.cuenta-c .cuenta a{border:1px solid var(--tinta);border-radius:999px;padding:16px 26px;min-width:12em;text-align:center}
html.cuenta-c .cuenta__crear{background:var(--tinta);color:var(--fondo)}
html.cuenta-c .cuenta__crear:hover{background:var(--acento);border-color:var(--acento)}
html.cuenta-c .cuenta__entrar:hover{border-color:var(--acento);color:var(--acento)}
html.cuenta-c .portada{padding-bottom:clamp(110px,18vh,160px)}
/* d · célula-botón que despliega */
html.cuenta-d .cuenta{position:relative}
html.cuenta-d .cuenta__celu{display:inline-flex}
html.cuenta-d .cuenta__lista{display:grid;position:absolute;right:0;top:100%;margin-top:8px;gap:0;background:var(--fondo);border:1px solid var(--linea);
  box-shadow:0 30px 60px rgba(21,19,17,.06);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .5s var(--paso),transform .6s var(--paso)}
html.cuenta-d body.cuenta-abierta .cuenta__lista{opacity:1;transform:none;pointer-events:auto}
html.cuenta-d .cuenta a{padding:15px 22px;font-size:11px}
html.cuenta-d .cuenta a+a{border-top:1px solid var(--linea)}
html.cuenta-d .cuenta a:hover{background:rgba(21,19,17,.035)}
html.cuenta-d .cuenta__crear{color:var(--acento)}
html.cuenta-d body.cuenta-abierta .cuenta__celu .boton-menu__celu .nucleo{animation:none;transform:scale(2.4)}
/* ── flota m–p · las cuatro QUIETAS, colocadas (Eloy, 7 sep: «flotando no me convence;
   los puntos me encantan»). Todas dejan el polvo de protagonista y, al pasar la mano,
   la aureola de arena rodea la palabra (arena.js).                                  */
html.flota-fija .sub__item{position:static;translate:none;opacity:0;transition:opacity 1.1s var(--paso),color .4s,padding-left .5s var(--paso)}
html.flota-fija body.submenu .sub__item{opacity:1}
html.flota-fija .sub li:nth-child(2) .sub__item{transition-delay:.05s}
html.flota-fija .sub li:nth-child(3) .sub__item{transition-delay:.18s}
html.flota-fija .sub li:nth-child(7) .sub__item{transition-delay:.31s}
html.flota-fija .sub li:nth-child(6) .sub__item{transition-delay:.44s}
/* el orden visual: Qué es · Qué consigues · Miguel Mochales · Empezar */
html.flota-fija .sub li:nth-child(2){order:1}
html.flota-fija .sub li:nth-child(3){order:2}
html.flota-fija .sub li:nth-child(7){order:3}
html.flota-fija .sub li:nth-child(6){order:4}
html.flota-fija .sub__empezar .sub__item span{font-size:inherit!important}
/* el número del HTML es el del guion del cliente (01–07); aquí se numeran las cuatro
   por su orden visual, con ::before, porque los contadores CSS no respetan `order` */
html.flota-fija .sub__item small{display:none}
html.flota-m .sub__item::before,html.flota-p .sub__item::before{
  font-family:var(--logo);font-weight:300;font-size:10px;letter-spacing:.2em;color:var(--tinta2)}
html.flota-m .sub li:nth-child(2) .sub__item::before,html.flota-p .sub li:nth-child(2) .sub__item::before{content:"01"}
html.flota-m .sub li:nth-child(3) .sub__item::before,html.flota-p .sub li:nth-child(3) .sub__item::before{content:"02"}
html.flota-m .sub li:nth-child(7) .sub__item::before,html.flota-p .sub li:nth-child(7) .sub__item::before{content:"03"}
html.flota-m .sub li:nth-child(6) .sub__item::before,html.flota-p .sub li:nth-child(6) .sub__item::before{content:"04"}
html.flota-p .sub__item::before{display:block;margin-bottom:.9em}

/* m · índice: un sumario editorial a la izquierda, numerado y con filetes
   (ref. Books of Design / Locomotive · Leo Cussen Centre for Law, Awwwards) */
html.flota-m .sub{display:grid;align-content:center;justify-content:start;padding-left:clamp(40px,9vw,150px)}
html.flota-m .sub ol{display:flex;flex-direction:column;width:min(620px,78vw)}
html.flota-m .sub li{border-bottom:1px solid var(--linea)}
html.flota-m .sub li:nth-child(2){border-top:1px solid var(--linea)}
html.flota-m .sub__item{display:flex;align-items:baseline;gap:1.6em;padding:clamp(15px,2.6vh,28px) 0}
html.flota-m .sub__item:hover{padding-left:.7em;color:var(--acento)}
html.flota-m .sub ol .sub__item span{font-family:var(--logo);font-weight:300;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(15px,1.5vw,24px)!important}
html.flota-m .sub__empezar .sub__item span{font-weight:700;color:var(--acento)}

/* n · apiladas gigantes: las cuatro llenan la pantalla; la que tocas se enciende y las
   otras se apagan (ref. Planetoño, Typography Honors · Mat Voyce, Awwwards) */
html.flota-n .sub{display:grid;place-content:center;text-align:center;padding:0 4vw}
html.flota-n .sub ol{display:flex;flex-direction:column;gap:clamp(2px,.6vh,10px)}
html.flota-n .sub ol .sub__item span{font-family:var(--logo);font-weight:300;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(26px,5.4vw,84px)!important;line-height:1.02;white-space:nowrap}
html.flota-n .sub__item small{display:none}
html.flota-n .sub ol:hover .sub__item{opacity:.28}
html.flota-n .sub ol .sub__item:hover{opacity:1;color:var(--acento)}
html.flota-n .sub__empezar .sub__item span{font-weight:700;color:var(--acento)}

/* o · fila abajo: una sola línea al pie, pequeña, y la pantalla entera para la arena
   (ref. HGD Media · Serotoninn, Awwwards) */
html.flota-o .sub{display:grid;align-content:end;justify-items:center;padding:0 4vw clamp(76px,12vh,120px)}   /* hueco para el «volver» */
html.flota-o .sub ol{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(18px,3vw,54px)}
html.flota-o .sub li{display:flex;align-items:center;gap:clamp(18px,3vw,54px)}
html.flota-o .sub li:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--tinta2);opacity:.55}
html.flota-o .sub li:nth-child(6)::after{display:none}
html.flota-o .sub ol .sub__item span{font-family:var(--logo);font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(11px,1.1vw,16px)!important}
html.flota-o .sub__item small{display:none}
html.flota-o .sub__item:hover{color:var(--acento)}
html.flota-o .sub__empezar .sub__item span{color:var(--acento)}

/* p · cuadrícula: cuatro cuartos y una cruz de filetes finos; cada sección en su cuarto
   (ref. Mosby's Files, Site of the Day · Books of Design, Awwwards) */
html.flota-p .sub{display:grid;place-content:center}
html.flota-p .sub::before,html.flota-p .sub::after{content:"";position:fixed;background:var(--linea)}
html.flota-p .sub::before{left:50%;top:22%;bottom:22%;width:1px}
html.flota-p .sub::after{top:50%;left:14%;right:14%;height:1px}
html.flota-p .sub ol{display:grid;grid-template-columns:1fr 1fr;width:min(1020px,86vw);
  row-gap:clamp(56px,14vh,150px);column-gap:clamp(30px,7vw,110px);text-align:center;place-items:center}
html.flota-p .sub ol .sub__item span{font-family:var(--logo);font-weight:300;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(13px,1.4vw,22px)!important;white-space:nowrap}
html.flota-p .sub__item:hover{color:var(--acento)}
html.flota-p .sub__empezar .sub__item span{font-weight:700;color:var(--acento)}

/* flota d: en la letra del logotipo, sobria */
html.flota-d .sub__item span{font-family:var(--logo);font-weight:700;letter-spacing:.24em;text-transform:uppercase;font-size:clamp(14px,1.25vw,20px)!important;color:var(--tinta)}
html.flota-d li:nth-child(1) .sub__item span{font-size:clamp(16px,1.45vw,23px)!important}
html.flota-d .sub__item:hover span{color:var(--acento)}
html.flota-d .sub__empezar .sub__item span{color:var(--acento)}

/* ── el menú · cinco aperturas más (7 sep, referencias de Awwwards: menu2.html) ── */
.menu__pie{display:flex;align-items:center;gap:14px;font-family:var(--logo);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta2)}
.menu__pie a{color:inherit;text-decoration:none;transition:color .3s}
.menu__pie a:hover{color:var(--acento)}
html.menu-cortina .menu__pie,html.menu-velo .menu__pie,html.menu-lista .menu__pie,html.menu-rayitas .menu__pie{display:none}
body.menu-abierto .pista{animation:none!important;opacity:0;transition:opacity .5s var(--paso)}
body.menu-abierto .portada{opacity:0;transition:opacity .5s var(--paso)}

/* lineas · las entradas suben línea a línea tras un velo (Edelschwarz, Saisei Architecture) */
html.menu-lineas .menu{inset:0;display:grid;place-content:center;text-align:center;gap:clamp(28px,5vh,56px);
  background:color-mix(in srgb,var(--fondo) 84%,transparent);opacity:0;transition:opacity .7s var(--paso)}
html.menu-lineas body.menu-abierto .menu{opacity:1;pointer-events:auto}
html.menu-lineas .menu ol{display:grid;gap:clamp(6px,1.4vh,14px)}
html.menu-lineas .menu li{overflow:hidden;padding:.12em 0}
html.menu-lineas .menu a{justify-content:center;transform:translateY(118%);transition:transform .9s var(--paso),color .3s}
html.menu-lineas body.menu-abierto .menu a{transform:none}
html.menu-lineas .menu li:nth-child(2) a{transition-delay:.08s}
html.menu-lineas .menu li:nth-child(3) a{transition-delay:.16s}
html.menu-lineas .menu li:nth-child(4) a{transition-delay:.24s}
html.menu-lineas .menu span{font-family:var(--logo);font-weight:700;text-transform:uppercase;letter-spacing:.24em;font-size:clamp(22px,2.6vw,42px)}
html.menu-lineas .menu small{display:none}
html.menu-lineas .menu a:hover{color:var(--acento)}
html.menu-lineas .menu__empezar a{color:var(--acento)}
html.menu-lineas .menu__pie{justify-content:center;opacity:0;transition:opacity .8s var(--paso) .5s}
html.menu-lineas body.menu-abierto .menu__pie{opacity:1}

/* celula · el círculo del botón crece como una célula hasta cubrir la pantalla */
html.menu-celula .menu{inset:0;display:grid;place-content:center;text-align:center;gap:clamp(28px,5vh,56px);background:var(--fondo);
  clip-path:circle(0px at var(--mx,calc(100% - 60px)) var(--my,44px));transition:clip-path 1.2s var(--paso)}
html.menu-celula body.menu-abierto .menu{clip-path:circle(150% at var(--mx,calc(100% - 60px)) var(--my,44px));pointer-events:auto}
html.menu-celula .menu ol{display:grid;gap:clamp(6px,1.4vh,14px)}
html.menu-celula .menu a{justify-content:center;opacity:0;transform:translateY(14px);transition:opacity .8s var(--paso),transform .9s var(--paso),color .3s}
html.menu-celula body.menu-abierto .menu a{opacity:1;transform:none}
html.menu-celula .menu li:nth-child(1) a{transition-delay:.35s}
html.menu-celula .menu li:nth-child(2) a{transition-delay:.45s}
html.menu-celula .menu li:nth-child(3) a{transition-delay:.55s}
html.menu-celula .menu li:nth-child(4) a{transition-delay:.65s}
html.menu-celula .menu span{font-family:var(--serif);font-size:clamp(34px,4.2vw,64px);line-height:1.1}
html.menu-celula .menu small{display:none}
html.menu-celula .menu a:hover{color:var(--acento)}
html.menu-celula .menu__empezar a{color:var(--acento)}
html.menu-celula .menu__pie{justify-content:center;opacity:0;transition:opacity .8s var(--paso) .8s}
html.menu-celula body.menu-abierto .menu__pie{opacity:1}

/* diagonal · un panel entra por la derecha con corte diagonal (Sequence, Build in Amsterdam) */
html.menu-diagonal .menu{inset:0 0 0 auto;width:min(58vw,720px);background:var(--fondo);
  clip-path:polygon(24% 0,100% 0,100% 100%,0 100%);transform:translateX(112%);transition:transform 1s var(--paso);
  display:grid;align-content:center;justify-items:end;gap:clamp(28px,5vh,56px);padding:0 clamp(40px,6vw,96px) 0 clamp(120px,20%,220px);text-align:right}
html.menu-diagonal body.menu-abierto .menu{transform:none;pointer-events:auto}
html.menu-diagonal .menu ol{display:grid;gap:clamp(8px,1.8vh,18px)}
html.menu-diagonal .menu a{justify-content:flex-end;opacity:0;transform:translateX(30px);transition:opacity .7s var(--paso),transform .9s var(--paso),color .3s}
html.menu-diagonal body.menu-abierto .menu a{opacity:1;transform:none}
html.menu-diagonal .menu li:nth-child(1) a{transition-delay:.3s}
html.menu-diagonal .menu li:nth-child(2) a{transition-delay:.4s}
html.menu-diagonal .menu li:nth-child(3) a{transition-delay:.5s}
html.menu-diagonal .menu li:nth-child(4) a{transition-delay:.6s}
html.menu-diagonal .menu span{font-family:var(--serif);font-size:clamp(30px,3.6vw,56px);line-height:1.1}
html.menu-diagonal .menu small{display:none}
html.menu-diagonal .menu a:hover{color:var(--acento)}
html.menu-diagonal .menu__empezar a{color:var(--acento)}
html.menu-diagonal .menu__pie{justify-content:flex-end}

/* arena · sin fondo: la célula se aparta a la izquierda y cambia de figura con cada entrada (Immersive Garden, Unveil) */
/* LAS PROPORCIONES (Eloy, 10 sep: «que cuando haga más grande o más pequeña la pestaña se
   ajuste siempre bien y no queden espacios en blanco… que esté en equilibrio»).
   Antes: la lista pegada al borde derecho con un padding, y el dibujo con su propio tope
   por otro lado. Al estirar la ventana los dos se separaban y el centro quedaba vacío.
   Ahora la pantalla se parte en DOS MITADES: el dibujo se centra en la izquierda (lo hace
   arena.js con menuX/menuR) y la lista se centra en la derecha. Cualquier ancho reparte
   igual, y el aire de los lados es el mismo que el del medio.                         */
html.menu-arena .menu{inset:0;display:grid;grid-template-columns:1fr 1fr;align-content:center;
  gap:clamp(28px,5vh,56px);opacity:0;transition:opacity .8s var(--paso)}
html.menu-arena .menu>*{grid-column:2;justify-self:center}
/* en vertical —móvil o ventana estrecha— no hay dos mitades que repartir: el dibujo se va
   al fondo y la lista se centra encima. Así tampoco quedan huecos. */
@media (max-aspect-ratio:1/1){
  html.menu-arena .menu{grid-template-columns:1fr}
  html.menu-arena .menu>*{grid-column:1}
}
html.menu-arena body.menu-abierto .menu{opacity:1;pointer-events:auto}
html.menu-arena body.menu-abierto .portada{opacity:0;transition:opacity .5s var(--paso)}
/* desde el racimo: al abrir el menú, sus palabras, la cuenta y el «volver» se retiran;
   queda la célula recogida a la izquierda y el menú a la derecha. Eloy, 7 sep.     */
html.menu-arena body.menu-abierto .sub,html.menu-arena body.menu-abierto .volver,
html.menu-arena body.menu-abierto .cuenta{opacity:0!important;pointer-events:none;transition:opacity .5s var(--paso)}
/* EL MENÚ COMO PANTALLA (Eloy, 8 sep). Cuando el menú es lo que hay —después de pulsar la
   célula— el botón de arriba a la derecha sobra: se va. Y «Volver a la célula» sí se ve,
   porque es la única salida hacia atrás.                                              */
body.menu-principal #botonMenu{opacity:0;pointer-events:none;transition:opacity .5s var(--paso)}
html.menu-arena body.menu-principal .volver{opacity:1!important;pointer-events:auto}
/* la cuenta no se repite: el menú ya lleva la suya en el pie */
html.menu-arena body.menu-principal .cuenta{opacity:0!important;pointer-events:none}
html.menu-arena .menu ol{display:grid;gap:clamp(8px,1.8vh,18px)}
html.menu-arena .menu a{opacity:0;transform:translateX(24px);transition:opacity .8s var(--paso),transform 1s var(--paso),color .3s}
html.menu-arena body.menu-abierto .menu a{opacity:1;transform:none}
html.menu-arena .menu li:nth-child(2) a{transition-delay:.1s}
html.menu-arena .menu li:nth-child(3) a{transition-delay:.2s}
html.menu-arena .menu li:nth-child(4) a{transition-delay:.3s}
html.menu-arena .menu li:nth-child(5) a{transition-delay:.4s}
html.menu-arena .menu li:nth-child(6) a{transition-delay:.5s}
html.menu-arena .menu li:nth-child(7) a{transition-delay:.6s}
/* M.M.M. son siglas: sin el espaciado ancho de las demás, para que se lean como una sigla */
html.menu-arena .menu a[href="#mmm"] span{letter-spacing:.1em}
/* Eloy, 7 sep: «la tipografía de la que estamos haciendo, a lo mejor más delgada por ser
   subcategorías»: la letra del logotipo espaciada, como el racimo, pero en Light 300 y
   más pequeña; Empezar, en Bold, para que pese más.                                  */
html.menu-arena .menu span{font-family:var(--logo);font-weight:300;text-transform:uppercase;letter-spacing:.22em;
  font-size:clamp(15px,1.45vw,23px);line-height:1.2}
html.menu-arena .menu__empezar span{font-weight:700}
html.menu-arena .menu small{font-family:var(--logo);font-weight:300;font-size:10px;min-width:2.4em}
html.menu-arena .menu a{align-items:center;gap:1em}
html.menu-arena .menu ol{gap:clamp(12px,2.4vh,26px)}
html.menu-arena .menu a:hover{color:var(--acento)}
html.menu-arena .menu__empezar a{color:var(--acento)}

/* cinetica · las letras se abren y una línea se dibuja debajo (Polecat, Mat Voyce) */
html.menu-cinetica .menu{inset:0;display:grid;place-content:center;text-align:center;gap:clamp(28px,5vh,56px);
  background:color-mix(in srgb,var(--fondo) 80%,transparent);opacity:0;transition:opacity .6s var(--paso)}
html.menu-cinetica body.menu-abierto .menu{opacity:1;pointer-events:auto}
html.menu-cinetica .menu ol{display:grid;gap:clamp(10px,2vh,22px)}
html.menu-cinetica .menu a{justify-content:center;flex-direction:column;align-items:center;gap:.25em}
html.menu-cinetica .menu span{font-family:var(--logo);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3vw,50px);
  letter-spacing:-.06em;opacity:0;filter:blur(6px);transition:letter-spacing 1.1s var(--paso),opacity .9s var(--paso),filter .9s var(--paso),color .3s}
html.menu-cinetica body.menu-abierto .menu span{letter-spacing:.26em;opacity:1;filter:none}
html.menu-cinetica .menu a::after{content:"";width:100%;height:1px;background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--paso) .2s}
html.menu-cinetica body.menu-abierto .menu a::after{transform:none}
html.menu-cinetica .menu li:nth-child(2) span,html.menu-cinetica .menu li:nth-child(2) a::after{transition-delay:.1s}
html.menu-cinetica .menu li:nth-child(3) span,html.menu-cinetica .menu li:nth-child(3) a::after{transition-delay:.2s}
html.menu-cinetica .menu li:nth-child(4) span,html.menu-cinetica .menu li:nth-child(4) a::after{transition-delay:.3s}
html.menu-cinetica .menu small{display:none}
html.menu-cinetica .menu a:hover span{letter-spacing:.34em;color:var(--acento)}
html.menu-cinetica .menu__empezar span{color:var(--acento)}
html.menu-cinetica .menu__pie{justify-content:center;opacity:0;transition:opacity .8s var(--paso) .6s}
html.menu-cinetica body.menu-abierto .menu__pie{opacity:1}

/* ── entrar en una sección: la arena se rompe (arena.js) ─────────────────
   Las secciones que no eliges se apagan enseguida; la elegida crece un instante,
   como si la abrieras, y se va después. El «volver» y la cuenta se retiran.   */
body.rompiendo .sub__item{opacity:0!important;transition:opacity .38s var(--paso),scale .5s var(--paso)}
/* la elegida se borra AL INSTANTE: en su sitio queda el titular en pequeño, que crece
   hasta su tamaño. Antes se veían las dos a la vez y no se leía como una sola cosa.
   Eloy, 7 sep: «que se borre el chiquitito y haya una transición de pequeño a grande». */
body.rompiendo .sub__item.elegida{opacity:0!important;transition:none}
body.rompiendo .volver,body.rompiendo .cuenta{opacity:0!important;pointer-events:none;transition:opacity .4s var(--paso)}

/* ── la sección · cinco pruebas de diseño (seccion.html) ──────────────────
   Contenido del guion del cliente (bloque 3). Toda la letra es la del logotipo:
   Light para leer, Bold para las etiquetas. Referencias: aaronjcunningham.com
   (bloques numerados, titular fino, CTA con flecha), gionatannese.com/projects
   (una pantalla, blanco, la nube a un lado y el texto al otro) y el About de
   Gionatan (frase gigante con la figura detrás).                            */
.seccion{position:fixed;inset:0;z-index:13;pointer-events:none;opacity:0;transition:opacity 1.1s var(--paso);
  font-family:var(--logo);color:var(--tinta)}
body.en-seccion .seccion{opacity:1;pointer-events:auto}
body.en-seccion .sub,body.en-seccion .volver,body.en-seccion .cuenta{opacity:0!important;pointer-events:none}
.seccion>*{opacity:0;transform:translateY(14px);transition:opacity 1s var(--paso),transform 1.1s var(--paso)}
body.en-seccion .seccion>*{opacity:1;transform:none}
/* para medir el titular antes de que la sección se vea (el vuelo de la palabra) */
body.midiendo .seccion,body.midiendo .seccion>*{opacity:0!important;transform:none!important;transition:none!important}
body.titular-vuela .seccion__titular{opacity:0!important;transition:none!important}
body.en-seccion .seccion__etiqueta{transition-delay:.05s}
body.en-seccion.con-retrato .seccion__etiqueta{transition-delay:.5s}
body.en-seccion.con-retrato .seccion__titular{transition-delay:.68s}
body.en-seccion.con-retrato .seccion__cuerpo{transition-delay:.92s}
body.en-seccion.con-retrato .seccion__cta{transition-delay:1.12s}
body.en-seccion .seccion__titular{transition-delay:.2s}
body.en-seccion .seccion__cuerpo{transition-delay:.42s}
body.en-seccion .seccion__tres{transition-delay:.5s}
body.en-seccion .seccion__cta{transition-delay:.66s}
.seccion__volver{position:fixed;left:50%;bottom:clamp(20px,4vh,40px);translate:-50% 0;border:0;background:none;cursor:pointer;padding:10px 14px;
  font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta2);transition:color .3s}
.seccion__volver::before{content:"←  "}
.seccion__volver:hover{color:var(--tinta)}
.seccion__etiqueta{display:flex;align-items:baseline;gap:1.2em;font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--tinta2)}
.seccion__etiqueta small{font-weight:300;font-size:10px;letter-spacing:.2em}
.seccion__titular{font-weight:300;line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.seccion__titular em{font-style:normal;font-weight:700}
.seccion__cuerpo{font-weight:300;font-size:clamp(15px,1.2vw,19px);line-height:1.55;color:var(--tinta);display:grid;gap:1em}
.seccion__cuerpo p+p{color:var(--tinta2)}
/* las listas del guion: los tres pilares, los beneficios, lo que necesitas */
.seccion__sub{font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta2);margin-top:.6em}
.seccion__lista{list-style:none;display:grid;gap:.55em;margin-top:.2em}
.seccion__lista--dos{grid-template-columns:1fr 1fr;column-gap:1.6em}
.seccion__lista li{display:grid;gap:.15em}
.seccion__lista span{font-weight:300;font-size:clamp(13px,1.05vw,16px);letter-spacing:.02em}
.seccion__lista em{font-style:normal;font-weight:300;font-size:clamp(11px,.85vw,13px);letter-spacing:.06em;color:var(--tinta2)}
.seccion__lista li span::before{content:"— ";color:var(--tinta2)}
.seccion__cierre{font-weight:300;font-size:clamp(13px,1.05vw,16px);line-height:1.5;color:var(--tinta2);margin-top:.4em;max-width:40ch}
.seccion__tres{list-style:none;display:none}
.seccion__tres span{display:block;font-weight:700;font-size:clamp(13px,1.15vw,17px);letter-spacing:.24em;text-transform:uppercase}
.seccion__tres em{display:block;font-style:normal;font-weight:300;font-size:clamp(12px,.95vw,14px);letter-spacing:.06em;color:var(--tinta2);margin-top:.5em}
.seccion__cta{display:inline-flex;align-items:center;gap:14px;color:var(--tinta);text-decoration:none;font-weight:700;font-size:clamp(11px,1vw,14px);letter-spacing:.24em;text-transform:uppercase;transition:color .3s,gap .4s var(--paso)}
.seccion__cta::after{content:"→";font-weight:300;transition:transform .4s var(--paso)}
.seccion__cta:hover{color:var(--acento);gap:20px}

/* ── la foto de Miguel y el pincel (pincel.js) ────────────────────────
   Eloy, 7 sep: la foto va tal cual, no con granitos, y en su sección se
   pinta con el ratón como en beautiful-imperfections.com. Cuatro modos
   (?foto=1..4): 1 el pincel revela la foto · 2 la foto se ve y el pincel
   pinta tinta encima · 3 la foto en gris y el pincel devuelve el color ·
   4 la foto velada y el pincel la despeja.                              */
/* la entrada de la foto (Eloy, 7 sep: «que sea más orgánica»): no es un fundido plano.
   La imagen sube un poco, se va enfocando y se descubre de abajo arriba, como el papel
   que absorbe la tinta. 2,2 s, y el texto entra después.                            */
/* El borde de la foto. El fundido a transparente se probó y a Eloy no le gustó (7 sep):
   vuelve el borde neto, y las cuatro maneras de integrarla van en ?marco= (marco.html) */
.seccion__lienzo{position:fixed;left:0;top:0;bottom:0;width:min(46vw,540px);
  opacity:0;pointer-events:none;transform:scale(1.07) translateY(18px);filter:blur(16px) saturate(.7);
  clip-path:inset(72% 0 0 0);
  transition:opacity 1.5s var(--paso),transform 2.2s var(--paso),filter 1.9s var(--paso),clip-path 2.2s var(--paso)}
body.en-seccion.con-retrato .seccion__lienzo{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
/* cómo se va la foto al volver, según la manera (Eloy, 7 sep): la marea la hunde por
   abajo, el barrido se la lleva hacia la derecha, el remolino y la respiración la
   desenfocan hacia dentro. Solo al salir: la entrada no se toca.                    */
html.vuelve-1 .seccion__lienzo{clip-path:inset(0 0 100% 0);transition-duration:1s,1.2s,1s,1.1s}
html.vuelve-2 .seccion__lienzo{clip-path:inset(0 0 0 100%);transform:none;transition-duration:.9s,1s,.9s,1s}
html.vuelve-4 .seccion__lienzo{transform:scale(.92);transition-duration:.7s,.9s,.7s,.9s}
body.en-seccion .seccion__lienzo{transition-duration:1.5s,2.2s,1.9s,2.2s}
body.en-seccion.con-retrato{cursor:crosshair}
.seccion>.seccion__lienzo{transform:scale(1.07) translateY(18px)}   /* manda la regla de arriba, no la general */
.seccion__retrato{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 20%;image-rendering:auto;
  transition:opacity 1s var(--paso),filter 1s var(--paso)}
/* la tinta se pinta por TODA la pantalla, también sobre el texto (Eloy, 7 sep), y no
   estorba: el lienzo no recibe el ratón, lo escucha la ventana                     */
.seccion__pincel{position:fixed;inset:0;width:100%;height:100%;z-index:15;pointer-events:none;opacity:0;transition:opacity .8s var(--paso)}
body.en-seccion.con-retrato .seccion__pincel{opacity:1}
html.foto-1 .seccion__retrato{opacity:0}
html.foto-2 .seccion__retrato{filter:grayscale(.15) contrast(1.04) saturate(.85)}
html.foto-3 .seccion__retrato{filter:grayscale(1) contrast(1.06) brightness(1.02)}
html.foto-4 .seccion__retrato{opacity:.16;filter:grayscale(1) contrast(.9) brightness(1.1)}

/* ── cómo aparece la sección · cinco efectos (entrada.html) ───────────────
   Eloy, 7 sep: «la que hay ahora es un poco básica; que sea más dinámico».
   Cada variante define de dónde vienen la foto y los textos.               */
/* 1 · cortina: todo se descubre de abajo arriba, como el papel que absorbe la tinta */
html.entra-1 .seccion>*:not(.seccion__lienzo){opacity:1;transform:none;clip-path:inset(0 0 105% 0);
  transition:clip-path 1.15s var(--paso)}
html.entra-1 body.en-seccion .seccion>*:not(.seccion__lienzo){clip-path:inset(0 0 -8% 0)}

/* 2 · barrido: la foto y el texto se descubren de izquierda a derecha, como un pincel */
html.entra-2 .seccion__lienzo{transform:none!important;filter:none!important;clip-path:inset(0 100% 0 0)!important}
html.entra-2 body.en-seccion.con-retrato .seccion__lienzo{clip-path:inset(0 0 0 0)!important;
  transition:clip-path 1.6s var(--paso),opacity .8s var(--paso)}
html.entra-2 .seccion>*:not(.seccion__lienzo){opacity:1;transform:none;clip-path:inset(0 105% 0 0);
  transition:clip-path 1.05s var(--paso)}
html.entra-2 body.en-seccion .seccion>*:not(.seccion__lienzo){clip-path:inset(0 -6% 0 0)}

/* 3 · enfoque: la foto entra muy ampliada y desenfocada y se asienta; el texto se aclara */
html.entra-3 .seccion__lienzo{transform:scale(1.3)!important;filter:blur(28px) saturate(.45)!important;clip-path:none!important}
html.entra-3 body.en-seccion.con-retrato .seccion__lienzo{transform:none!important;filter:none!important;
  transition:transform 2.6s var(--paso),filter 2.1s var(--paso),opacity 1.4s var(--paso)}
html.entra-3 .seccion>*:not(.seccion__lienzo){opacity:0;transform:none;filter:blur(12px);
  transition:opacity 1s var(--paso),filter 1.2s var(--paso)}
html.entra-3 body.en-seccion .seccion>*:not(.seccion__lienzo){opacity:1;filter:none}

/* 4 · tinta: una mancha redonda crece y descubre la foto; el texto asoma detrás */
html.entra-4 .seccion__lienzo{transform:none!important;filter:none!important;clip-path:circle(0% at 34% 40%)!important}
html.entra-4 body.en-seccion.con-retrato .seccion__lienzo{clip-path:circle(155% at 34% 40%)!important;
  transition:clip-path 1.9s var(--paso),opacity .7s var(--paso)}
html.entra-4 .seccion>*:not(.seccion__lienzo){opacity:0;transform:translateY(12px) scale(.97);
  transition:opacity .95s var(--paso),transform 1.05s var(--paso)}
html.entra-4 body.en-seccion .seccion>*:not(.seccion__lienzo){opacity:1;transform:none}

/* 5 · editorial: la foto sube entera desde abajo y el texto entra por la derecha */
html.entra-5 .seccion__lienzo{transform:translateY(100%)!important;filter:none!important;clip-path:none!important}
html.entra-5 body.en-seccion.con-retrato .seccion__lienzo{transform:none!important;
  transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity .7s var(--paso)}
html.entra-5 .seccion>*:not(.seccion__lienzo){opacity:0;transform:translateX(44px);
  transition:opacity .85s var(--paso),transform 1.05s cubic-bezier(.16,1,.3,1)}
html.entra-5 body.en-seccion .seccion>*:not(.seccion__lienzo){opacity:1;transform:none}

/* 1 · numerada (aaronjcunningham): etiqueta arriba a la izquierda, titular grande y fino, texto en columna, flecha */
html.seccion-1 .seccion{display:grid;align-content:center;justify-items:start;gap:clamp(22px,4vh,44px);padding:0 clamp(32px,9vw,150px)}
html.seccion-1 .seccion__titular{font-size:clamp(40px,6.8vw,108px);max-width:11ch}
html.seccion-1 .seccion__cuerpo{max-width:52ch}

/* 2 · la célula habla (gionatannese/projects): la célula a la izquierda, el texto a la derecha */
html.seccion-2 .seccion{display:grid;grid-template-columns:46% 1fr;align-content:center;align-items:center;column-gap:clamp(24px,4vw,64px);padding:0 clamp(28px,6vw,96px)}
html.seccion-2 .seccion>*{grid-column:2}
html.seccion-2 .seccion__etiqueta{margin-bottom:clamp(14px,2.6vh,26px)}
html.seccion-2 .seccion__titular{font-size:clamp(32px,4.2vw,66px);max-width:12ch;margin-bottom:clamp(16px,3vh,30px)}
html.seccion-2 .seccion__cuerpo{max-width:48ch;margin-bottom:clamp(16px,2.8vh,28px)}
html.seccion-2 .seccion__titular{margin-bottom:clamp(12px,2.2vh,22px)}

/* 3 · frase gigante (el About de Gionatan): el titular enorme, centrado, con la célula detrás; las tres palabras debajo */
html.seccion-3 .seccion{display:grid;align-content:center;justify-items:center;text-align:center;gap:clamp(18px,3.4vh,36px);padding:0 4vw}
html.seccion-3 .seccion__titular{font-size:clamp(46px,8.6vw,136px);max-width:9ch;line-height:.98}
html.seccion-3 .seccion__cuerpo{display:none}
html.seccion-3 .seccion__tres{display:flex;gap:clamp(22px,4vw,64px)}
html.seccion-3 .seccion__tres li{text-align:center}
html.seccion-3 .seccion__tres em{display:none}

/* 4 · tres ideas, tres células: titular arriba, y Cuerpo · Mente · Vida cada uno bajo su célula */
html.seccion-4 .seccion{display:grid;align-content:start;justify-items:center;text-align:center;gap:clamp(14px,2.4vh,24px);padding-top:clamp(70px,13vh,130px)}
html.seccion-4 .seccion__titular{font-size:clamp(28px,3.4vw,54px)}
html.seccion-4 .seccion__cuerpo{display:none}
html.seccion-4 .seccion__tres{display:block}
html.seccion-4 .seccion__tres li{position:fixed;translate:-50% 0;text-align:center;max-width:22ch}
html.seccion-4 .seccion__cta{position:fixed;left:50%;bottom:clamp(76px,13vh,130px);translate:-50% 0}

/* 5 · la marea: el texto arriba, en dos columnas; la arena vuelve solo a la mitad de abajo, como una playa */
html.seccion-5 .seccion{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:clamp(30px,6vw,100px);padding:clamp(70px,13vh,130px) clamp(32px,8vw,130px) 0}
html.seccion-5 .seccion__etiqueta{grid-column:1/-1;margin-bottom:clamp(16px,3vh,30px)}
html.seccion-5 .seccion__titular{grid-column:1;font-size:clamp(34px,4.6vw,72px);max-width:10ch}
html.seccion-5 .seccion__cuerpo{grid-column:2;max-width:42ch;align-self:start}
html.seccion-5 .seccion__cta{grid-column:2;margin-top:clamp(18px,3vh,32px)}

/* el botón de reiniciar: herramienta de trabajo para Eloy, para ver la web entera desde
   el principio sin recargar a mano. Discreto, abajo a la izquierda. Quitar al publicar. */
.reinicia{position:fixed;left:clamp(16px,2.4vw,32px);bottom:clamp(14px,2.2vh,24px);z-index:60;
  border:1px solid var(--linea);border-radius:999px;background:color-mix(in srgb,var(--fondo) 82%,transparent);
  cursor:pointer;padding:7px 13px;font-family:var(--logo);font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta2);opacity:.5;transition:opacity .3s,color .3s,border-color .3s}
.reinicia:hover{opacity:1;color:var(--tinta);border-color:var(--tinta2)}
html.solo .reinicia{display:none}

/* ── cómo se integra la foto en la página · cuatro opciones (marco.html) ──
   Eloy, 7 sep: «la foto adaptada no me ha gustado nada, busca cuatro opciones».
   1 lámina · 2 duotono · 3 grano · 4 cristal                                 */
/* 1 · lámina: la foto no llega a los bordes; queda apoyada, con aire y una sombra larguísima */
html.marco-1 body.con-retrato .seccion__lienzo{left:clamp(20px,3vw,44px);top:clamp(20px,4vh,44px);bottom:clamp(20px,4vh,44px);
  width:min(40vw,470px);box-shadow:0 40px 90px rgba(21,19,17,.14),0 4px 14px rgba(21,19,17,.05)}
/* 2 · duotono: la foto se tiñe con los colores de la casa, así pertenece a la paleta */
html.marco-2 body.con-retrato .seccion__retrato{filter:grayscale(1) contrast(1.06) brightness(1.04) sepia(.42) saturate(1.5) hue-rotate(-12deg)}
html.marco-2 body.con-retrato .seccion__lienzo::after{content:"";position:absolute;inset:0;background:var(--acento);mix-blend-mode:color;opacity:.16}
/* 3 · grano: una trama de puntos encima, del mismo mundo que la arena */
html.marco-3 body.con-retrato .seccion__lienzo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,rgba(21,19,17,.5) .6px,transparent .7px);
  background-size:3px 3px;mix-blend-mode:multiply;opacity:.5}
html.marco-3 body.con-retrato .seccion__retrato{filter:contrast(1.04) brightness(1.06) saturate(.9)}
/* 4 · cristal, ELEGIDO (Eloy, 7 sep): «me gusta el de cristal, pero solamente la parte
   derecha de la imagen, que es la que se marca mucho con el fondo blanco». Solo el borde
   derecho se esmerila, como tras un vidrio; arriba, abajo y a la izquierda la foto va a
   sangre y no hay borde que suavizar.                                                   */
html.marco-4 body.con-retrato .seccion__lienzo::after{content:"";position:absolute;inset:0;pointer-events:none;
  backdrop-filter:blur(13px) saturate(1.1);-webkit-backdrop-filter:blur(13px) saturate(1.1);
  -webkit-mask-image:linear-gradient(to right,transparent 58%,#000 100%);
  mask-image:linear-gradient(to right,transparent 58%,#000 100%)}

/* ── el título, escrito con tinta (Eloy, 7 sep) ───────────────────────────
   Cada letra se posa de izquierda a derecha: aparece desenfocada y encogida,
   se descubre con una máscara y se asienta. Escalonadas 38 ms, así se lee
   como una mano escribiendo, no como un texto que aparece de golpe.       */
html.titulo-tinta .seccion__titular{opacity:1!important;transform:none!important;filter:none!important;
  clip-path:none!important;transition:none!important}
html.titulo-tinta .seccion__titular .w{display:inline-block;white-space:nowrap}
html.titulo-tinta .seccion__titular .l{display:inline-block;opacity:0;filter:blur(7px);
  transform:translateY(.06em) scale(.94);clip-path:inset(-30% 106% -30% -6%);
  transition:opacity .34s ease-out,filter .5s ease-out,transform .55s var(--paso),clip-path .5s var(--paso);
  transition-delay:calc(var(--i) * 38ms)}
html.titulo-tinta body.escribiendo .seccion__titular .l{opacity:1;filter:none;
  transform:none;clip-path:inset(-30% -6% -30% -6%)}

/* el titular, ya puesto tras el vuelo: sin animación ni retraso, para que no parpadee */
body.titular-puesto .seccion__titular{opacity:1!important;transform:none!important;filter:none!important;
  clip-path:none!important;transition:none!important}

/* la marca de la prueba, abajo a la izquierda, solo en los comparadores */
.nota{position:fixed;left:clamp(20px,3.2vw,44px);bottom:clamp(16px,2.6vh,28px);z-index:20;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2);opacity:.7}

@media (prefers-reduced-motion:reduce){.frase,.pista{animation:none;opacity:1}.cab{opacity:1;transition:none}.carga{display:none}}
@media (max-width:640px){
  .portada{padding-bottom:clamp(24px,5vh,40px)}
  .frase{font-size:19px;max-width:30ch}
}

/* ?solo · solo la célula, grande y centrada, para comparar figuras */
html.solo .cab,html.solo .portada,html.solo .carga,html.solo .pista,html.solo .menu,html.solo .sub,html.solo .volver{display:none}
html.solo .nota{left:50%;translate:-50% 0;text-align:center}

/* ═══════════════════════════════════════════════════════════════════════
   LA SECCIÓN DE MIGUEL, al estilo de augen.pro (Eloy, 7 sep)
   ───────────────────────────────────────────────────────────────────────
   De esa web se toma el DISEÑO: el aire, la escala tipográfica, el texto
   que se revela al bajar, los hitos numerados con filete y la foto fundida
   en el blanco. Los colores son los nuestros (oro sobre blanco) y el
   pincel de tinta se queda como está. Cuatro maquetaciones: ?miguel=1..4.
   La sección se ordena con flex + order, sin tocar el HTML.
   ═══════════════════════════════════════════════════════════════════ */
body.en-seccion.con-retrato .seccion{
  display:flex;flex-direction:column;align-items:center;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:0;scrollbar-width:none}
body.en-seccion.con-retrato .seccion::-webkit-scrollbar{display:none}
body.con-retrato .seccion__etiqueta{order:1}
body.con-retrato .seccion__titular{order:2}
body.con-retrato .seccion__lienzo{order:3}
body.con-retrato .seccion__tres{order:3}
body.con-retrato .seccion__cuerpo{order:4}
body.con-retrato .seccion__cta{order:5}
body.con-retrato .seccion__tres{display:none}

/* el retrato: dentro del flujo y fundido en el blanco, como en la referencia */
body.con-retrato .seccion__lienzo{position:relative;left:auto;top:auto;bottom:auto;width:auto;
  flex:none;margin:0 auto;pointer-events:none}
/* la foto, como la principal de augen.pro (Eloy: «esos biselados, la sombra del fondo,
   todo eso es perfecto»): la figura sola sobre el blanco, con una sombra muy difusa que
   la despega del fondo, un borde suave y el cuerpo fundiéndose por abajo. En blanco y
   negro suave y con un punto más de contraste, que es lo que la hace elegante y no una
   foto pegada.                                                                          */
body.con-retrato .seccion__retrato{position:relative;width:100%;height:auto;display:block;
  filter:grayscale(.9) contrast(1.14) brightness(1.03) drop-shadow(0 34px 60px rgba(21,19,17,.2)) drop-shadow(0 6px 14px rgba(21,19,17,.08));
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.6) 80%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 58%,rgba(0,0,0,.6) 80%,transparent 100%)}

/* la tipografía: la del logotipo, ligera, con el aire de la referencia */
body.con-retrato .seccion__etiqueta{position:static;display:flex;flex-direction:column;gap:.2em;
  align-items:center;text-align:center;font-family:var(--logo);font-weight:300;
  font-size:clamp(12px,1vw,14px);letter-spacing:.02em;color:var(--tinta2);text-transform:none;opacity:1}
body.con-retrato .seccion__etiqueta small{font-size:1em;letter-spacing:.02em;opacity:.7}
body.con-retrato .seccion__titular{position:static;font-family:var(--logo);font-weight:300;
  letter-spacing:-.022em;line-height:1.04;text-align:center;max-width:none;margin:0;flex:none}
body.con-retrato .seccion__titular em{font-weight:500;font-style:normal}
body.con-retrato .seccion__cuerpo{position:static;max-width:none;width:100%;font-family:var(--logo);font-weight:300}
body.con-retrato .seccion__cuerpo>p{font-size:clamp(21px,2.35vw,34px);line-height:1.28;
  letter-spacing:-.015em;color:var(--tinta);text-align:center;margin:0 auto;max-width:19em}
body.con-retrato .seccion__cierre{font-size:clamp(15px,1.25vw,19px)!important;color:var(--tinta2)!important;
  max-width:26em!important;margin:clamp(28px,5vh,60px) auto 0!important}
/* los hitos, numerados y con filete, como los 0.1 / 0.2 / 0.3 de la referencia */
body.con-retrato .seccion__lista{list-style:none;display:block;max-width:none;counter-reset:hito}
body.con-retrato .seccion__lista li{display:grid;grid-template-columns:4.5em 1fr;gap:0 clamp(16px,3vw,54px);
  align-items:baseline;padding:clamp(26px,4.2vh,52px) 0;border-top:1px solid rgba(21,19,17,.1);margin:0;
  counter-increment:hito}
body.con-retrato .seccion__lista li::before{content:"0." counter(hito);font-family:var(--logo);font-weight:300;
  font-size:clamp(12px,1vw,14px);color:var(--tinta2);opacity:.75}
body.con-retrato .seccion__lista li span{font-family:var(--logo);font-weight:300;
  font-size:clamp(22px,2.5vw,38px);letter-spacing:-.02em;line-height:1.1;color:var(--tinta)}
body.con-retrato .seccion__lista li em{grid-column:2;font-family:var(--logo);font-weight:300;font-style:normal;
  font-size:clamp(13px,1.1vw,16px);color:var(--tinta2);margin-top:.5em;line-height:1.45;max-width:34em}
/* el enlace, con su flecha en un círculo */
body.con-retrato .seccion__cta{position:static;display:inline-flex;align-items:center;gap:.85em;
  font-family:var(--logo);font-weight:300;font-size:clamp(14px,1.15vw,17px);letter-spacing:.01em;
  color:var(--acento);text-transform:none;border:0;padding:0;flex:none}
body.con-retrato .seccion__cta::before{content:"→";display:grid;place-items:center;width:2.4em;height:2.4em;
  border:1px solid var(--acento);border-radius:999px;font-size:.9em;transition:transform .5s var(--paso)}
body.con-retrato .seccion__cta:hover::before{transform:translateX(4px)}
body.con-retrato .seccion__cta::after{display:none}

/* el movimiento al bajar: cada bloque entra cuando le toca, y la frase grande se
   enciende palabra a palabra con el scroll, como en la referencia */
body.con-retrato [data-sube]{opacity:0;transform:translateY(44px);
  transition:opacity 1s var(--paso),transform 1.3s var(--paso)}
body.con-retrato [data-sube].dentro{opacity:1;transform:none}
body.con-retrato .seccion__cuerpo .pal{color:rgba(21,19,17,.15);transition:color .45s linear}
body.con-retrato .seccion__cuerpo .pal.on{color:var(--tinta)}

/* ── 1 · CENTRADA (la más parecida a la referencia) ─────────────────── */
html.miguel-1 body.con-retrato .seccion{padding:clamp(56px,11vh,120px) clamp(20px,6vw,90px) clamp(60px,12vh,140px)}
html.miguel-1 body.con-retrato .seccion__titular{font-size:clamp(38px,5.6vw,86px);margin:.5em 0 0}
html.miguel-1 body.con-retrato .seccion__lienzo{width:min(58vh,520px);margin:clamp(30px,6vh,70px) auto clamp(34px,7vh,84px)}
html.miguel-1 body.con-retrato .seccion__lista{width:min(100%,940px);margin:clamp(40px,8vh,96px) auto 0;text-align:left}
html.miguel-1 body.con-retrato .seccion__cta{margin-top:clamp(38px,7vh,84px)}

/* ── 2 · RETRATO FIJO a la izquierda, el texto pasa por la derecha ──── */
html.miguel-2 body.con-retrato .seccion{align-items:flex-start;
  padding:clamp(56px,12vh,130px) clamp(24px,5vw,80px) clamp(70px,14vh,160px);
  padding-left:calc(min(44vw,520px) + clamp(30px,4vw,70px))}
html.miguel-2 body.con-retrato .seccion__lienzo{position:fixed;left:0;top:0;bottom:0;
  width:min(44vw,520px);height:100%;margin:0;overflow:hidden}
html.miguel-2 body.con-retrato .seccion__retrato{height:100%;object-fit:contain;object-position:50% 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
html.miguel-2 body.con-retrato .seccion__etiqueta{align-items:flex-start;text-align:left}
html.miguel-2 body.con-retrato .seccion__titular{text-align:left;font-size:clamp(34px,4.4vw,64px);
  margin:.55em 0 clamp(28px,5vh,60px)}
html.miguel-2 body.con-retrato .seccion__cuerpo{max-width:760px}
html.miguel-2 body.con-retrato .seccion__cuerpo>p{text-align:left;margin-left:0;font-size:clamp(19px,1.9vw,27px)}
html.miguel-2 body.con-retrato .seccion__cierre{margin-left:0!important}
html.miguel-2 body.con-retrato .seccion__lista{margin-top:clamp(36px,7vh,80px)}
html.miguel-2 body.con-retrato .seccion__cta{margin-top:clamp(36px,7vh,80px)}

/* ── 3 · RETRATO AL FONDO, el texto encima, y se aleja al bajar ─────── */
html.miguel-3 body.con-retrato .seccion{padding:0 clamp(20px,6vw,90px) clamp(60px,12vh,140px)}
html.miguel-3 body.con-retrato .seccion__lienzo{position:fixed;left:50%;top:0;width:min(62vh,560px);height:100vh;
  margin:0;display:grid;align-content:center;transform:translateX(-50%) scale(var(--lejos,1));transform-origin:50% 34%;
  opacity:calc(1 - var(--baja,0) * .6)}
html.miguel-3 body.con-retrato .seccion__retrato{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 56%,transparent 92%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 56%,transparent 92%)}
html.miguel-3 body.con-retrato .seccion__etiqueta{position:relative;z-index:2;padding-top:clamp(40px,9vh,90px)}
html.miguel-3 body.con-retrato .seccion__titular{position:relative;z-index:2;font-size:clamp(36px,5vw,74px);
  margin:calc(100vh - clamp(230px,32vh,340px)) 0 clamp(40px,9vh,110px)}
html.miguel-3 body.con-retrato .seccion__cuerpo{position:relative;z-index:2}
html.miguel-3 body.con-retrato .seccion__lista{width:min(100%,900px);margin:clamp(40px,8vh,96px) auto 0;text-align:left;
  background:var(--fondo)}
html.miguel-3 body.con-retrato .seccion__cta{position:relative;z-index:2;margin-top:clamp(38px,7vh,84px)}

/* ── 4 · EDITORIAL, LA ELEGIDA (Eloy, 7 sep), llevada al hero de augen.pro ──
   La primera pantalla es la foto: la cara de Miguel, grande, a color, fundida en el
   blanco, y el nombre abajo a la izquierda con tres píldoras debajo, como en la
   referencia. Al bajar: la frase grande que se enciende, y una banda en oro muy tenue
   con los hitos («toques muy, muy sutiles en dorado, el de la célula principal»).      */
html.miguel-4 body.con-retrato .seccion{padding:0;align-items:stretch}
/* Eloy, 7 sep: «la imagen tiene que adaptarse bien al fondo, nunca líneas horizontales
   duras». El fundido va en el CONTENEDOR (anclado a la pantalla): pase lo que pase con la
   foto dentro —el parallax la mueve—, siempre se disuelve antes de llegar al borde. Y el
   contenedor no recorta (era el recorte lo que dibujaba la línea).                    */
html.miguel-4 body.con-retrato .seccion__lienzo{position:absolute;left:0;right:0;top:0;height:100vh;width:auto;
  margin:0;display:grid;justify-items:center;align-items:end;z-index:0;overflow:visible;
  -webkit-mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.55) 78%,transparent 95%);
  mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.55) 78%,transparent 95%)}
html.miguel-4 body.con-retrato .seccion__retrato{width:auto;height:88vh;max-width:none;
  transform:translate3d(calc(6vw + var(--parx,0px)),var(--pary,0px),0);
  filter:saturate(.82) contrast(1.06) brightness(1.02) drop-shadow(0 30px 70px rgba(21,19,17,.16));
  /* el fundido por abajo y, además, los dos bordes laterales del recorte se disuelven
     en la parte baja: así no se ve el corte recto de la camisa a los lados */
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.45) 82%,transparent 96%),linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.45) 82%,transparent 96%),linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect}
html.miguel-4 body.con-retrato .seccion__etiqueta,html.miguel-4 body.con-retrato .seccion__titular,
html.miguel-4 body.con-retrato .seccion__tres{position:relative;z-index:2;align-self:flex-start;text-align:left;
  padding-left:clamp(24px,5vw,80px)}
html.miguel-4 body.con-retrato .seccion__etiqueta{align-items:flex-start;margin-top:calc(100vh - clamp(300px,41vh,390px))}
html.miguel-4 body.con-retrato .seccion__titular{font-size:clamp(40px,5.2vw,78px);line-height:1;margin:.35em 0 .55em}
/* las píldoras, como las de augen pero en nuestro oro */
html.miguel-4 body.con-retrato .seccion__tres{display:flex;gap:.5em;list-style:none;margin:0;padding-right:0;order:3}
html.miguel-4 body.con-retrato .seccion__tres li{margin:0;padding:.45em 1.05em;border:1px solid rgba(180,100,58,.6);
  border-radius:999px;font-family:var(--logo);font-weight:300;font-size:clamp(13px,1.05vw,16px);letter-spacing:.01em;color:#9A5530}
html.miguel-4 body.con-retrato .seccion__tres li span{font:inherit;color:inherit;display:inline;text-transform:none;letter-spacing:.01em}
html.miguel-4 body.con-retrato .seccion__tres li em{display:none}
/* la frase grande, en su pantalla */
html.miguel-4 body.con-retrato .seccion__cuerpo{padding:clamp(60px,12vh,140px) clamp(20px,6vw,90px) 0}
/* la frase, en su propia pantalla, centrada: es la segunda sección que llega al bajar */
html.miguel-4 body.con-retrato .seccion__cuerpo>p:not(.seccion__cierre){margin:22vh auto 24vh}   /* (no grid: partiría la frase en una palabra por línea) */
html.miguel-4 body.con-retrato .seccion__cuerpo>p{max-width:17em;font-size:clamp(24px,3vw,44px);line-height:1.22}
/* los hitos: sin banda de fondo (Eloy, 7 sep: «el dorado no; solamente las líneas, los
   números y lo que los separa, en un naranja tierra») */
html.miguel-4 body.con-retrato .seccion__lista{width:auto;margin:clamp(40px,10vh,120px) 0 0;min-height:70vh;display:grid;align-content:center;
  padding:clamp(20px,4vh,50px) clamp(24px,6vw,90px) clamp(30px,6vh,70px)}
html.miguel-4 body.con-retrato .seccion__lista li{grid-template-columns:5em 1fr;max-width:1040px;margin:0 auto;
  border-top:1px solid rgba(180,100,58,.5);padding:clamp(30px,5vh,60px) 0}
html.miguel-4 body.con-retrato .seccion__lista li:last-child{border-bottom:1px solid rgba(180,100,58,.5)}
html.miguel-4 body.con-retrato .seccion__lista li::before{color:var(--tierra);opacity:1}
html.miguel-4 body.con-retrato .seccion__lista li span{font-size:clamp(26px,3vw,46px);color:rgba(21,19,17,.22);transition:color .8s linear}
html.miguel-4 body.con-retrato .seccion__lista li.dentro span{color:var(--tinta)}
html.miguel-4 body.con-retrato .seccion__lista li em{color:var(--tinta2)}
html.miguel-4 body.con-retrato .seccion__cierre{text-align:center;margin-top:clamp(60px,14vh,160px)!important}
html.miguel-4 body.con-retrato .seccion__cta{align-self:center;margin:clamp(40px,8vh,96px) 0 clamp(80px,16vh,180px);color:var(--tierra)}
html.miguel-4 body.con-retrato .seccion__cta::before{border-color:var(--tierra)}
/* con la sección abierta, la cabecera lleva un velo del blanco por detrás: así el nombre
   y los textos pasan por debajo del logo sin cruzarse con él al bajar */
body.en-seccion.con-retrato .cab{background:linear-gradient(to bottom,var(--fondo) 0,rgba(253,253,253,.85) 55%,rgba(253,253,253,0) 100%);
  padding-bottom:calc(clamp(18px,3vh,32px) + 14px)}
/* los estilos de dibujo de la foto (Eloy, 7 sep): el filtro SVG, y después el fundido */
html.dibujo-1 body.con-retrato .seccion__retrato{filter:url(#dibujo-1) drop-shadow(0 24px 50px rgba(21,19,17,.1))}
html.dibujo-2 body.con-retrato .seccion__retrato{filter:url(#dibujo-2) drop-shadow(0 24px 50px rgba(21,19,17,.08))}
html.dibujo-3 body.con-retrato .seccion__retrato{filter:url(#dibujo-3) drop-shadow(0 24px 50px rgba(21,19,17,.08))}
html.dibujo-4 body.con-retrato .seccion__retrato{filter:url(#dibujo-4) drop-shadow(0 24px 50px rgba(21,19,17,.1))}
/* sin el guion del diseño 2 delante de cada hito, y el «volver» abajo a la derecha,
   que en la maqueta centrada pisaba el texto */
body.con-retrato .seccion__lista li span::before{display:none}
body.con-retrato .seccion__volver{left:auto;right:clamp(20px,3.2vw,44px);bottom:clamp(18px,3vh,32px);transform:none}
/* el marco de cristal sobra aquí: la foto ya se funde sola (salvo en la 2) */
html.marco-4 body.con-retrato .seccion__lienzo::after{display:none}
html.miguel-2.marco-4 body.con-retrato .seccion__lienzo::after{display:block}

/* ═══════════════════════════════════════════════════════════════════════
   LAS SECCIONES, con el scroll y la interfaz del portfolio de Eloy (7 sep)
   ───────────────────────────────────────────────────────────────────────
   La célula de arena se queda fija a la izquierda con la forma de cada
   sección (Miguel: su retrato en granos) y por la derecha pasa TODO el
   texto del PDF, junto y pegado, en bloques que van apareciendo al bajar
   (una vez, como en el portfolio). Líneas, números y separadores en tierra.
   ═══════════════════════════════════════════════════════════════════ */
/* la foto solo existe en la maqueta con retrato: fuera de ella ni se pinta (la regla general
   de entrada «.seccion>*{opacity:1}» le ganaba a su opacity:0 y asomaba borrosa a la izquierda) */
body:not(.con-retrato) .seccion__lienzo{display:none}
body.en-seccion .seccion{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
body.en-seccion .seccion::-webkit-scrollbar{display:none}
html.seccion-2 body.en-seccion:not(.con-retrato) .seccion{align-content:start;align-items:start;
  padding-top:clamp(84px,15vh,150px);padding-bottom:24vh}
html.seccion-2 body:not(.con-retrato) .seccion__cuerpo{max-width:54ch;margin-bottom:clamp(14px,2.4vh,24px)}
body:not(.con-retrato) .seccion__cuerpo{gap:.7em}
.b{margin:0}
.b--sub{font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta2);margin-top:1.5em}
.b--cierre{font-weight:300;font-size:clamp(16px,1.35vw,21px);line-height:1.32;color:var(--tinta);margin-top:1em;max-width:30ch}
.b--pendiente{font-size:clamp(12px,.95vw,14px);line-height:1.5;color:var(--tierra);border-left:2px solid var(--tierra);
  padding:.25em .85em;font-style:italic;max-width:44ch}
/* listas: guion en tierra, poco aire */
.b--lista{list-style:none;display:grid;gap:.4em;margin-top:.25em}
.b--dos{grid-template-columns:1fr 1fr;column-gap:1.4em}
.b--lista li{display:grid;gap:.1em}
.b--lista span{font-weight:300;font-size:clamp(13px,1.05vw,16px);letter-spacing:.02em}
.b--lista span::before{content:"— ";color:var(--tierra)}
.b--lista em{font-style:normal;font-weight:300;font-size:clamp(11px,.85vw,13px);letter-spacing:.06em;color:var(--tinta2)}
/* los tres pilares: numerados, con filete en tierra */
.b--pilares{list-style:none;display:grid;margin-top:.5em}
.b--pilares li{display:grid;grid-template-columns:2.4em 1fr;column-gap:.6em;row-gap:.1em;padding:.8em 0;
  border-top:1px solid rgba(180,100,58,.45)}
.b--pilares li:last-child{border-bottom:1px solid rgba(180,100,58,.45)}
.b--pilares small{grid-row:1/4;font-size:11px;letter-spacing:.1em;color:var(--tierra);padding-top:.4em}
.b--pilares strong{font-weight:700;font-size:clamp(15px,1.25vw,19px);letter-spacing:.01em}
.b--pilares em{font-style:normal;font-weight:300;font-size:clamp(11px,.85vw,13px);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta2)}
.b--pilares p{font-weight:300;font-size:clamp(13px,1.05vw,16px);line-height:1.5;color:var(--tinta2);margin-top:.3em}
/* cómo es una sesión: los cuatro pasos y la frase visual */
.b--pasos{list-style:none;display:grid;gap:.3em;margin-top:.35em;counter-reset:paso}
.b--pasos li{display:grid;grid-template-columns:1.6em 1fr;column-gap:.5em;align-items:baseline;counter-increment:paso}
.b--pasos li::before{content:counter(paso);font-size:11px;color:var(--tierra)}
.b--pasos strong{font-weight:700;font-size:clamp(13px,1.05vw,16px);letter-spacing:.06em;text-transform:uppercase}
.b--pasos span{grid-column:2;font-weight:300;color:var(--tinta2)}
.b--frase{font-weight:300;font-size:clamp(12px,.95vw,14px);letter-spacing:.06em;color:var(--tierra);margin-top:.5em}
/* la galería: una rejilla de huecos con proporciones mezcladas, esperando material.
   Cada hueco dice qué va dentro; el filete en tierra marca que está por llenar. */
.b--galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);margin-top:1.2em}
.hueco{position:relative;margin:0;border:1px solid rgba(180,100,58,.35);border-radius:2px;
  background:linear-gradient(135deg,rgba(180,100,58,.05),rgba(180,100,58,.02));
  display:grid;align-items:end}
.hueco--alta{grid-row:span 2;aspect-ratio:3/4}
.hueco--ancha{grid-column:span 2;aspect-ratio:16/9}
.hueco--cuadro{aspect-ratio:1}
.hueco figcaption{font-family:var(--logo);font-weight:300;font-size:clamp(10px,.8vw,12px);
  line-height:1.4;color:var(--tierra);padding:.9em 1em}
@media (max-width:900px){ .b--galeria{grid-template-columns:repeat(2,1fr)} }
/* las preguntas: desplegables con filete en tierra */
.b--faq{display:grid;margin-top:.2em}
.faq{border-top:1px solid rgba(180,100,58,.4)}
.faq:last-child{border-bottom:1px solid rgba(180,100,58,.4)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  padding:.75em 0;font-weight:300;font-size:clamp(14px,1.15vw,18px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--tierra);font-weight:300;flex:none}
.faq[open] summary::after{content:"–"}
.faq>div{padding:0 0 1em;font-weight:300;font-size:clamp(13px,1.05vw,16px);line-height:1.55;color:var(--tinta2);max-width:50ch}
.faq--pendiente summary{color:var(--tinta2)}
.faq i{color:var(--tierra)}
.faq a{color:var(--tierra);text-decoration:none;border-bottom:1px solid rgba(180,100,58,.5)}
/* aparecer al bajar, como en el portfolio: cada bloque entra una vez */
body.en-seccion [data-sube]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--paso),transform .9s var(--paso)}
body.en-seccion [data-sube].dentro{opacity:1;transform:none}


/* ═══════════════════════════════════════════════════════════════════════
   MIGUEL MOCHALES · la cabeza a la derecha, … */
body.miguel .seccion,
body.consigues .seccion{display:block!important;align-items:flex-start;
  padding:0 clamp(16px,3vw,40px) 0 var(--mig-x);
  /* el fondo, aquí: sin él la mezcla por diferencia del titular no tiene con qué restar
     fuera de la foto y el texto se quedaría blanco sobre blanco. Aquí no hay arena que
     tapar (en esta sección el polvo se apaga), así que el blanco puede vivir en la sección. */
  background:var(--fondo)}
body.miguel .seccion>*,

body.consigues .seccion>*{grid-column:auto!important}
body.miguel,

body.consigues{--mig-x:clamp(28px,7vw,120px);--mig-col:min(46vw,640px)}
/* LA FOTO: fija, … */
body.miguel .seccion__lienzo,
body.consigues .seccion__lienzo{display:block;position:fixed;top:0;bottom:0;right:0;left:50%;
  width:auto;height:100%;margin:0;z-index:0;opacity:0;
  transform:none!important;filter:none!important;clip-path:none!important;
  transition:opacity 1.6s var(--paso);pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%);
  mask-image:linear-gradient(to right,transparent 0,#000 26%)}
body.miguel.en-seccion .seccion__lienzo,

body.consigues.en-seccion .seccion__lienzo{opacity:1}
body.miguel .seccion__retrato,

body.consigues .seccion__retrato{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:58% 42%;filter:none!important;-webkit-mask-image:none;mask-image:none;transition:none}
/* LA VELADURA: una sola lámina sobre la foto, … */
body.miguel .seccion::before,
body.consigues .seccion::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(253,253,253,calc(var(--vela,0) * .3))}
/* HASHIRA: los dos hilos verticales que encuadraban la columna. FUERA,

por Eloy,

9 sep:
   «en la sección de Miguel hay unas líneas verticales en dorado,

eso quítalo,

no me gusta».
   Las marcas de registro de las esquinas (tombo) ya se habían quitado el 8 sep. Se deja
   escrito,

sin pintar,

por si algún día vuelve la rejilla a la vista:
   body.miguel .seccion::after,

por si algún día vuelve la rejilla a la vista:
   body.consigues .seccion::after{content:"";position:fixed;left:calc(var(--mig-x) - clamp(14px,2vw,30px));top:0;bottom:0;
     width:calc(var(--mig-col) + clamp(28px,4vw,60px));z-index:2;pointer-events:none;
     background:
       linear-gradient(rgba(180,100,58,.2),rgba(180,100,58,.2)) left 0/1px 100% no-repeat,
       linear-gradient(rgba(180,100,58,.2),rgba(180,100,58,.2)) right 0/1px 100% no-repeat;
     -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);
     mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);opacity:.8}  */
body.miguel .seccion::after,
body.consigues .seccion::after{content:none}
/* TODO el copy, … */
body.miguel .seccion>*:not(.seccion__lienzo):not(.seccion__etiqueta):not(.seccion__volver):not(.seccion__pincel),
body.consigues .seccion>*:not(.seccion__lienzo):not(.seccion__etiqueta):not(.seccion__volver):not(.seccion__pincel){
  position:relative;z-index:4;text-align:left;width:var(--mig-col)}
body.miguel .seccion__cuerpo,

body.consigues .seccion__cuerpo,

body.miguel .seccion__cta,

body.consigues .seccion__cta{text-shadow:0 0 26px rgba(253,253,253,.94),0 0 9px rgba(253,253,253,.85)}
/* TATEGAKI: la etiqueta, … */
body.miguel .seccion__etiqueta,
body.consigues .seccion__etiqueta{position:fixed;z-index:5;left:clamp(8px,1.6vw,26px);
  top:50%;translate:0 -50%;writing-mode:vertical-rl;flex-direction:row;align-items:center;gap:1.6em;
  font-family:var(--logo);font-weight:300;font-size:clamp(9px,.78vw,11px);letter-spacing:.42em;
  text-transform:uppercase;color:var(--tierra);opacity:.9;margin:0}
body.miguel .seccion__etiqueta small,

body.consigues .seccion__etiqueta small{font-size:1em;letter-spacing:.3em;opacity:.75}
/* el filete que colgaba del rótulo, … */
body.miguel .seccion__etiqueta::after,
body.consigues .seccion__etiqueta::after{content:none}
/* EL TITULAR: enorme, … */
body.miguel .seccion__titular,
body.consigues .seccion__titular{font-family:var(--logo);font-weight:300;text-align:left;
  font-size:clamp(52px,10.5vw,178px);line-height:.92;letter-spacing:-.045em;
  width:auto!important;max-width:calc(100vw - var(--mig-x) - clamp(16px,3vw,40px));
  margin:calc(100vh - clamp(300px,44vh,460px)) 0 0;
  color:#fff;mix-blend-mode:difference;text-shadow:none;z-index:6}
body.miguel .seccion__titular em,

body.consigues .seccion__titular em{font-weight:500;font-style:normal}
/* el cuerpo: más grande que antes y con el ritmo desigual del MA */
body.miguel .seccion__cuerpo,
body.consigues .seccion__cuerpo{display:block;font-family:var(--logo);margin-top:clamp(54px,10vh,120px)}
body.miguel .b,

body.consigues .b{margin:0;text-align:left}
body.miguel .b--p,

body.consigues .b--p{font-weight:300;font-size:clamp(22px,2.4vw,38px);line-height:1.32;letter-spacing:-.018em;
  color:var(--tinta);margin-top:clamp(36px,7vh,86px);max-width:18ch}
body.miguel .b--p+.b--p,

body.consigues .b--p+.b--p{font-size:clamp(17px,1.45vw,23px);line-height:1.6;color:rgba(21,19,17,.78);max-width:26ch}
body.miguel .b--sub,

body.consigues .b--sub{display:flex;align-items:center;gap:1.1em;
  font-weight:300;font-size:clamp(10px,.9vw,13px);letter-spacing:.34em;text-transform:uppercase;
  color:var(--tierra);margin-top:clamp(70px,14vh,160px)}
body.miguel .b--sub::after,

body.consigues .b--sub::after{content:"";flex:1;height:1px;background:currentColor;opacity:.5}
body.miguel .b--pendiente,

body.consigues .b--pendiente{font-size:clamp(13px,1.1vw,17px);line-height:1.55;color:var(--tierra);
  border-left:1px solid rgba(180,100,58,.5);border-top:0;padding:.25em 0 .25em 1.2em;font-style:italic;
  max-width:28ch;margin:clamp(28px,5.5vh,64px) 0 0}
/* los pilares, … */
body.miguel .b--pilares,
body.consigues .b--pilares{display:block;margin-top:clamp(34px,6.5vh,76px)}
body.miguel .b--pilares li,

body.consigues .b--pilares li{display:block;position:relative;text-align:left;border:0;
  padding:clamp(28px,5.5vh,64px) 0 0}
body.miguel .b--pilares li::before,

body.consigues .b--pilares li::before{content:"";position:absolute;left:0;top:0;width:clamp(26px,4vw,54px);height:1px;
  background:rgba(180,100,58,.5)}
body.miguel .b--pilares small,

body.consigues .b--pilares small{display:block;font-size:clamp(10px,.85vw,12px);letter-spacing:.3em;
  color:var(--tierra);margin-bottom:.9em;padding:0}
body.miguel .b--pilares strong,

body.consigues .b--pilares strong{display:block;font-weight:300;font-size:clamp(24px,2.4vw,38px);
  letter-spacing:-.022em;line-height:1.08;color:var(--tinta)}
body.miguel .b--pilares em,

body.consigues .b--pilares em{display:block;font-size:clamp(10px,.85vw,12px);letter-spacing:.26em;
  text-transform:uppercase;color:rgba(21,19,17,.62);margin-top:.9em}
body.miguel .b--pilares p,

body.consigues .b--pilares p{font-weight:300;font-size:clamp(15px,1.25vw,20px);line-height:1.6;
  color:rgba(21,19,17,.76);max-width:28ch;margin:1.1em 0 0}
body.miguel .b--lista,

body.consigues .b--lista{display:block;margin-top:clamp(34px,6.5vh,76px);text-align:left}
body.miguel .b--lista li,

body.consigues .b--lista li{display:block;padding:.65em 0}
body.miguel .b--lista li+li,

body.consigues .b--lista li+li{border-top:1px solid rgba(180,100,58,.18)}
body.miguel .b--lista span,

body.consigues .b--lista span{font-weight:300;font-size:clamp(17px,1.5vw,24px);letter-spacing:-.01em}
body.miguel .b--lista span::before,

body.consigues .b--lista span::before{content:none}
body.miguel .b--lista em,

body.consigues .b--lista em{display:block;font-size:clamp(10px,.85vw,12px);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(21,19,17,.62);margin-top:.55em}
body.miguel .b--cierre,

body.consigues .b--cierre{font-weight:300;font-size:clamp(21px,2.1vw,34px);line-height:1.3;
  color:var(--tinta);text-align:left;max-width:20ch;margin:clamp(70px,14vh,160px) 0 0}
body.miguel .seccion__cta,

body.consigues .seccion__cta{margin:clamp(60px,12vh,140px) 0 clamp(90px,20vh,220px);
  display:inline-flex;align-items:center;gap:.9em;width:auto!important;
  font-family:var(--logo);font-weight:300;font-size:clamp(13px,1.1vw,17px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--tierra);border:0;padding:0}
body.miguel .seccion__cta::before,

body.consigues .seccion__cta::before{content:"→";display:grid;place-items:center;width:2.6em;height:2.6em;
  border:1px solid rgba(180,100,58,.55);border-radius:999px;font-size:.85em;letter-spacing:0;
  transition:transform .5s var(--paso),background .5s var(--paso)}
body.miguel .seccion__cta:hover::before,

body.consigues .seccion__cta:hover::before{transform:translateX(4px);background:rgba(180,100,58,.07)}
body.miguel .seccion__cta::after,

body.consigues .seccion__cta::after{display:none}
body.miguel .seccion__tres,

body.consigues .seccion__tres{display:none}
body.miguel .seccion__volver,

body.consigues .seccion__volver{z-index:5}
/* EL GLITCH: al entrar, la pieza se desdobla un instante en tierra y oro —un registro de
   impresión mal casado— y vuelve a su sitio. */
@keyframes jp-glitch{
  0%  {transform:translate3d(0,22px,0);text-shadow:none}
  38% {text-shadow:-3px 0 rgba(180,100,58,.5), 3px 0 rgba(201,161,74,.42)}
  52% {transform:translate3d(2px,0,0);text-shadow:2px 0 rgba(180,100,58,.34), -2px 0 rgba(201,161,74,.3)}
  70% {transform:translate3d(-1px,0,0);text-shadow:-1px 0 rgba(180,100,58,.2), 1px 0 rgba(201,161,74,.18)}
  100%{transform:none;text-shadow:none}
}
/* (el titular no entra al glitch: va en mezcla por diferencia y las sombras lo ensuciarían) */
body.miguel .b--sub.dentro,
body.consigues .b--sub.dentro,

body.miguel .b--cierre.dentro,

body.consigues .b--cierre.dentro,

body.miguel .b--pilares li.dentro strong,

body.consigues .b--pilares li.dentro strong{animation:jp-glitch .42s var(--paso) both}
/* El nombre entra por animación y no por transición, porque en esta sección va en mezcla
   por diferencia y necesita su propia curva. Deriva desde la MISMA mano que el resto —la
   derecha, 46 px, desenfocado— para que la sección entre como un solo gesto: antes venía
   de abajo a la izquierda y el nombre se cruzaba con la cabeza (Eloy, 9 sep).          */
@keyframes jp-titular{from{opacity:0;transform:translate3d(46px,0,0);filter:blur(7px)}
                      to{opacity:1;transform:none;filter:none}}
/* Va con .en-seccion para que no se dispare mientras la sección se mide (body.midiendo).
   REPARADO el 10 sep: este comentario se había quedado ABIERTO —secuela del script que
   duplicaba selectores y cortó por una coma que estaba dentro de un comentario— y se
   tragaba las seis líneas siguientes. Resultado: el titular no se animaba al entrar, ni
   en Miguel ni en «Qué consigues», y el bloque de movimiento reducido tampoco existía.
   Eloy, 10 sep: «que cuando lo inicies se anime bonito».                              */
body.miguel.en-seccion .seccion__titular,
body.consigues.en-seccion .seccion__titular{animation:jp-titular .9s var(--paso) both;animation-delay:.1s}
@media (prefers-reduced-motion:reduce){
  body.miguel .b--sub.dentro,body.miguel .b--cierre.dentro,
  body.consigues .b--sub.dentro,body.consigues .b--cierre.dentro,
  body.miguel .b--pilares li.dentro strong,body.consigues .b--pilares li.dentro strong,
  body.miguel.en-seccion .seccion__titular,
  body.consigues.en-seccion .seccion__titular{animation:none}
}
/* pantallas estrechas: la foto se va del todo a la derecha y el copy ocupa lo que queda */
@media (max-width:900px){
  body.miguel{--mig-col:min(72vw,560px)}
  body.miguel .seccion__lienzo,

  body.consigues .seccion__lienzo{left:58%}
}

/* ═══════════════════════════════════════════════════════════════════════
   TEXTOS DE M.M.M. · la escultura fija y el texto que la esquiva
   ───────────────────────────────────────────────────────────────────────
   Eloy, 9 sep: «tal cual la web: al bajar, los textos se van abriendo
   alrededor del muñeco, y luego abajo se van cerrando de nuevo, menos los
   títulos». Así que el texto NO se aparta con el scroll global: cada
   párrafo se abre cuando pasa por delante de la escultura —según lo cerca
   que esté del centro de la pantalla— y se cierra solo al dejarla atrás.
   Lo escribe mmm.js en cada párrafo (--abre, de 0 a 1).
   Los títulos viven al margen izquierdo y no se mueven nunca.
   ═══════════════════════════════════════════════════════════════════ */
body:not(.mmm) .mmm{display:none}
body.mmm .seccion{display:block!important;overflow-y:auto;overflow-x:hidden;padding:0;background:var(--fondo)}
body.mmm .seccion>*{grid-column:auto!important}
body.mmm .seccion__etiqueta,body.mmm .seccion__titular,body.mmm .seccion__cuerpo,
body.mmm .seccion__cta,body.mmm .seccion__tres,body.mmm .seccion__lienzo{display:none!important}
body.mmm .seccion .mmm{display:block;position:relative;z-index:2}
/* la escultura: fija en el centro, por detrás del texto */
/* EL CARRIL DE LA BIBLIOTECA (Eloy, 9 sep: «muy importante que no se solape con el texto
   de la izquierda; deja bien los márgenes»). Se reserva una banda a la derecha —su ancho
   más un aire— y NADIE la pisa: el texto se centra en lo que queda, y la cabeza y el
   título se centran ahí también, para que la composición no quede escorada. El tope lo
   respeta además mmm.js al apartar los párrafos de la cabeza.                        */
body.mmm{--biblio:clamp(150px,14.5vw,230px);--biblio-aire:clamp(26px,3vw,58px)}
body.mmm{--util:calc(var(--biblio) + var(--biblio-aire))}
/* a media altura no: un punto más abajo, para que el título quepa por encima de ella
   (Eloy, 9 sep: «la cabeza un poquito más abajo, para que los títulos se vean bien») */
.mmm__lienzo{position:fixed;left:calc(50% - var(--util) / 2);top:57%;translate:-50% -50%;z-index:2;
  width:min(54vh,470px);height:min(54vh,470px);pointer-events:none;   /* más chica (Eloy, 9 sep) */
  opacity:0;transition:opacity 1.4s var(--paso)}
body.en-seccion.mmm .mmm__lienzo{opacity:1}
/* el texto baja en columna, centrado */
.mmm__campo{position:relative;z-index:3;display:grid;justify-items:center;
  padding:56vh calc(var(--util) + clamp(10px,1.6vw,28px)) 60vh clamp(20px,7vw,110px)}
.mmm__bloque{position:relative;width:min(27ch,50vw);margin:0 0 44vh;
  opacity:0;transform:translateY(24px);transition:opacity .9s var(--paso),transform 1.1s var(--paso)}
.mmm__bloque.dentro{opacity:1;transform:none}
/* el título, al margen y quieto: es lo único que no se abre */
/* el título no se mueve: se queda clavado al margen izquierdo, a media altura, mientras
   pasa su bloque; y se apaga cuando le toca al siguiente (Eloy, 9 sep: «los títulos,
   fijos, que no se muevan, como en la página que te envié»). Lo enciende mmm.js. */
.mmm__bloque h3{display:none}                      /* el título lo pinta el rótulo */
/* EL TÍTULO, EN EL CENTRO Y POR DEBAJO DE LA CABEZA (Eloy, 9 sep: «los títulos —el
   tiempo, junio de 2025— van en el centro, en el centro; pasan por debajo de la cabeza,
   esos no se mueven, son inamovibles»). Fijo, centrado, y con menos z que la escultura:
   cuando ella se cruza, le pasa por delante. No lleva el estiramiento del scroll: es lo
   único quieto de la pantalla, y por eso se lee.                                      */
/* tres columnas y el título en la del medio: así queda centrado en la PANTALLA y no
   descentrado por el ancho de la fecha, como pasa si los dos van en fila. */
.mmm__rotulo{position:fixed;left:calc(50% - var(--util) / 2);top:27vh;translate:-50% -50%;
  z-index:1;pointer-events:none;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;
  gap:clamp(14px,2.4vw,38px);width:min(88vw,1060px);max-width:calc(100vw - var(--util) - 40px);margin:0;
  opacity:0;transition:opacity .5s var(--paso)}
body.en-seccion.mmm .mmm__rotulo{opacity:1}
/* el título, GRANDE, como el número de capítulo de la referencia: es lo que separa un
   escrito del siguiente, así que tiene que verse de lejos (Eloy, 9 sep: «los títulos
   tienen que ser mucho más grandes, como en la web que te envié»).                   */
.mmm__rotulo span{grid-column:2;text-align:center;font-family:var(--logo);font-weight:300;
  font-size:clamp(28px,6vh,62px);line-height:.95;letter-spacing:-.02em;
  text-transform:none;color:var(--tinta);transition:opacity .35s var(--paso)}
/* y la fecha, menuda, al costado: como el «Ch. Two» que va junto al número */
.mmm__rotulo small{grid-column:1;justify-self:end;font-family:var(--logo);font-weight:400;font-size:clamp(9px,.78vw,11px);
  letter-spacing:.26em;text-transform:uppercase;color:var(--tierra);white-space:nowrap}
.mmm__bloque h3 small{display:block;font-weight:300;font-size:.85em;letter-spacing:.16em;
  color:var(--tinta2);margin-top:.7em;text-transform:none}
/* ═══════════════════════════════════════════════════════════════════════
   LA BIBLIOTECA · el lateral derecho de los escritos (Eloy, 9 sep)
   ───────────────────────────────────────────────────────────────────────
   «En un lateral derecho me gustaría que estuvieran los apartados de libros,
   porque él tiene muchos escritos. Cuando los marques, que se abra ese libro
   para poder leerlo en este formato.» Cuatro maneras (libros.html):
     1 LOMOS   de canto, como en una estantería
     2 ÍNDICE  una lista sobria alineada a la derecha
     3 FICHAS  tarjetas apiladas en abanico
     4 REGLA   una línea con muescas, una por escrito
   La lista la escribe mmm.js con los escritos que hay en la página: cuando
   lleguen los libros de verdad de Miguel, sale sola.
   ═══════════════════════════════════════════════════════════════════ */
.mmm__libros{position:fixed;z-index:4;pointer-events:auto;
  opacity:0;transition:opacity .7s var(--paso) .3s}
body.en-seccion.mmm .mmm__libros{opacity:1}
.mmm__libro{display:block;border:0;background:none;padding:0;margin:0;cursor:pointer;
  font-family:var(--logo);color:var(--tinta2);text-align:left;
  transition:color .4s var(--paso),transform .55s var(--paso),opacity .4s var(--paso)}
.mmm__libro i,.mmm__libro b,.mmm__libro em{font-style:normal;display:block}
.mmm__libro:hover{color:var(--tinta)}
.mmm__libro.abierto{color:var(--tierra)}

/* 1 · LOMOS — de canto, pegados al borde, como los libros en la balda */
html.libros-1 .mmm__libros{right:0;top:50%;translate:0 -50%;display:flex;align-items:stretch;gap:2px;
  height:min(64vh,540px);padding-right:clamp(10px,1.4vw,20px)}
html.libros-1 .mmm__libro{writing-mode:vertical-rl;display:flex;align-items:center;gap:1.4em;
  padding:14px 7px;border-left:1px solid rgba(28,26,24,.13);
  font-size:clamp(9px,.76vw,11px);letter-spacing:.22em;text-transform:uppercase}
html.libros-1 .mmm__libro i{font-size:.85em;opacity:.5}
html.libros-1 .mmm__libro b{font-weight:400;letter-spacing:.2em}
html.libros-1 .mmm__libro em{font-size:.8em;opacity:.45;letter-spacing:.14em}
html.libros-1 .mmm__libro:hover{transform:translateY(-7px)}
html.libros-1 .mmm__libro.abierto{border-left-color:var(--tierra);transform:translateY(-11px)}

/* 2 · ÍNDICE — la lista de siempre, alineada a la derecha y sin adornos */
html.libros-2 .mmm__libros{right:clamp(18px,3.4vw,60px);top:50%;translate:0 -50%;
  display:grid;gap:clamp(9px,1.3vh,15px);justify-items:end;max-width:min(22vw,260px)}
html.libros-2 .mmm__libro{display:grid;grid-template-columns:auto auto;align-items:baseline;
  gap:.9em;text-align:right;font-size:clamp(10px,.85vw,12px);letter-spacing:.16em;
  text-transform:uppercase}
html.libros-2 .mmm__libro i{grid-row:1;font-size:.82em;opacity:.42}
html.libros-2 .mmm__libro b{grid-row:1;font-weight:400}
html.libros-2 .mmm__libro em{grid-column:2;font-size:.78em;opacity:0;letter-spacing:.12em;
  text-transform:none;transition:opacity .35s var(--paso)}
html.libros-2 .mmm__libro:hover,html.libros-2 .mmm__libro.abierto{transform:translateX(-9px)}
html.libros-2 .mmm__libro:hover em,html.libros-2 .mmm__libro.abierto em{opacity:.55}

/* 3 · FICHAS — un montón de tarjetas en abanico; la que lees se sale del montón */
html.libros-3 .mmm__libros{right:clamp(14px,2.6vw,44px);top:50%;translate:0 -50%;
  display:grid;gap:clamp(5px,.7vh,9px);justify-items:end}
html.libros-3 .mmm__libro{width:min(20vw,232px);padding:11px 14px;border:1px solid rgba(28,26,24,.12);
  border-radius:3px;background:rgba(253,253,253,.82);backdrop-filter:blur(3px);
  transform-origin:100% 50%;rotate:-1.1deg;font-size:clamp(10px,.82vw,12px)}
html.libros-3 .mmm__libro:nth-child(even){rotate:.9deg}
html.libros-3 .mmm__libro i{font-size:.76em;letter-spacing:.24em;opacity:.4}
html.libros-3 .mmm__libro b{font-weight:400;font-size:1.18em;letter-spacing:.01em;margin:.3em 0 .18em;
  text-transform:none;font-family:var(--serif)}
html.libros-3 .mmm__libro em{font-size:.76em;letter-spacing:.14em;opacity:.5;text-transform:uppercase}
html.libros-3 .mmm__libro:hover{transform:translateX(-16px);rotate:0deg}
html.libros-3 .mmm__libro.abierto{transform:translateX(-26px);rotate:0deg;border-color:var(--tierra)}

/* 4 · REGLA — una línea vertical con una muesca por escrito; el título sale al pasar */
html.libros-4 .mmm__libros{right:clamp(20px,3.2vw,56px);top:50%;translate:0 -50%;
  display:grid;gap:clamp(10px,1.5vh,18px);justify-items:end;
  border-right:1px solid rgba(28,26,24,.14);padding-right:clamp(12px,1.6vw,22px)}
html.libros-4 .mmm__libro{position:relative;display:flex;align-items:center;gap:.9em;
  font-size:clamp(9px,.78vw,11px);letter-spacing:.2em;text-transform:uppercase}
html.libros-4 .mmm__libro::after{content:"";position:absolute;right:calc(-1 * clamp(12px,1.6vw,22px) - 1px);
  width:clamp(7px,1vw,13px);height:1px;background:currentColor;opacity:.55;
  transition:width .45s var(--paso),opacity .4s var(--paso)}
html.libros-4 .mmm__libro i{opacity:.45;font-size:.85em}
html.libros-4 .mmm__libro b{font-weight:400;opacity:0;transform:translateX(8px);
  transition:opacity .4s var(--paso),transform .5s var(--paso)}
html.libros-4 .mmm__libro em{display:none}
html.libros-4 .mmm__libro:hover b,html.libros-4 .mmm__libro.abierto b{opacity:1;transform:none}
html.libros-4 .mmm__libro:hover::after{width:clamp(16px,2.2vw,28px)}
html.libros-4 .mmm__libro.abierto::after{width:clamp(22px,3vw,38px);opacity:1}

/* ── LAS CUATRO DE LA REGLA (Eloy eligió el «rollo» de la 4, 9 sep) ───────
   Todas viven DENTRO del carril y ninguna despliega nada hacia la izquierda:
   el ancho del bloque es el del carril y el texto se parte ahí dentro. Por eso
   no pueden solaparse con la columna de lectura, midan lo que midan. */
html.libros-5 .mmm__libros,html.libros-6 .mmm__libros,
html.libros-7 .mmm__libros,html.libros-8 .mmm__libros{
  right:clamp(18px,2.6vw,44px);top:50%;translate:0 -50%;
  width:var(--biblio);max-width:var(--biblio);
  border-right:1px solid rgba(28,26,24,.13);padding-right:clamp(12px,1.5vw,20px)}
html.libros-5 .mmm__libro,html.libros-6 .mmm__libro,
html.libros-7 .mmm__libro,html.libros-8 .mmm__libro{position:relative;width:100%;
  font-size:clamp(9px,.76vw,11px);letter-spacing:.2em;text-transform:uppercase}
html.libros-5 .mmm__libro::after,html.libros-6 .mmm__libro::after,
html.libros-7 .mmm__libro::after,html.libros-8 .mmm__libro::after{
  content:"";position:absolute;top:50%;background:currentColor;height:1px;
  right:calc(-1 * clamp(12px,1.5vw,20px) - 1px);
  transition:width .45s var(--paso),opacity .4s var(--paso)}

/* 5 · EL AÑO MANDA — la fecha siempre puesta; el título se abre debajo, en el carril */
html.libros-5 .mmm__libros{display:grid;gap:clamp(9px,1.3vh,16px);align-content:center}
html.libros-5 .mmm__libro{display:grid;grid-template-columns:auto 1fr;gap:.8em;align-items:baseline;
  text-align:right;padding-right:.2em}
html.libros-5 .mmm__libro i{grid-row:1;font-size:.85em;opacity:.42}
html.libros-5 .mmm__libro em{grid-row:1;grid-column:2;font-size:.9em;letter-spacing:.14em;opacity:.6}
html.libros-5 .mmm__libro b{grid-column:1/-1;font-weight:400;font-size:1.05em;letter-spacing:.02em;
  text-transform:none;font-family:var(--serif);text-align:right;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--paso),opacity .4s var(--paso)}
html.libros-5 .mmm__libro:hover b,html.libros-5 .mmm__libro.abierto b{max-height:3.4em;opacity:1;margin-top:.3em}
html.libros-5 .mmm__libro::after{width:clamp(6px,.9vw,11px);opacity:.5}
html.libros-5 .mmm__libro:hover::after{width:clamp(14px,2vw,24px)}
html.libros-5 .mmm__libro.abierto::after{width:clamp(20px,2.8vw,34px);opacity:1}

/* 6 · EN VERTICAL — el título del escrito que lees, escrito de pie junto a la línea */
html.libros-6 .mmm__libros{display:grid;gap:clamp(10px,1.5vh,18px);align-content:center;justify-items:end}
html.libros-6 .mmm__libro{display:flex;justify-content:flex-end;align-items:center;gap:.8em;padding-right:.2em}
html.libros-6 .mmm__libro i{opacity:.42;font-size:.9em}
html.libros-6 .mmm__libro em{font-size:.85em;letter-spacing:.13em;opacity:0;transition:opacity .35s var(--paso)}
html.libros-6 .mmm__libro:hover em,html.libros-6 .mmm__libro.abierto em{opacity:.55}
html.libros-6 .mmm__libro b{position:absolute;right:calc(-1 * clamp(12px,1.5vw,20px) - 1px);
  top:50%;transform-origin:100% 0;writing-mode:vertical-rl;translate:100% -50%;
  font-weight:400;font-size:1.05em;letter-spacing:.16em;white-space:nowrap;
  max-height:min(42vh,340px);opacity:0;transition:opacity .45s var(--paso)}
html.libros-6 .mmm__libro.abierto b{opacity:1}
html.libros-6 .mmm__libro::after{width:clamp(6px,.9vw,11px);opacity:.45}
html.libros-6 .mmm__libro:hover::after{width:clamp(15px,2.1vw,26px)}
html.libros-6 .mmm__libro.abierto::after{width:clamp(22px,3vw,36px);opacity:1}

/* 7 · LA AGUJA — muescas iguales; solo la del escrito que lees se alarga y se nombra */
html.libros-7 .mmm__libros{display:grid;gap:clamp(11px,1.7vh,20px);align-content:center}
html.libros-7 .mmm__libro{display:grid;grid-template-columns:1fr;justify-items:end;text-align:right;
  padding-right:.2em}
html.libros-7 .mmm__libro i{font-size:.85em;opacity:.34;transition:opacity .4s var(--paso)}
html.libros-7 .mmm__libro b{font-weight:400;font-size:1.12em;letter-spacing:.02em;text-transform:none;
  font-family:var(--serif);line-height:1.25;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--paso),opacity .45s var(--paso)}
html.libros-7 .mmm__libro em{font-size:.84em;letter-spacing:.14em;opacity:0;max-height:0;overflow:hidden;
  transition:max-height .5s var(--paso),opacity .4s var(--paso)}
html.libros-7 .mmm__libro:hover i,html.libros-7 .mmm__libro.abierto i{opacity:.75}
html.libros-7 .mmm__libro:hover b,html.libros-7 .mmm__libro.abierto b{max-height:3.6em;opacity:1;margin-top:.35em}
html.libros-7 .mmm__libro.abierto em{max-height:2em;opacity:.55;margin-top:.25em}
html.libros-7 .mmm__libro::after{width:clamp(5px,.7vw,9px);opacity:.35}
html.libros-7 .mmm__libro:hover::after{width:clamp(16px,2.3vw,28px);opacity:.7}
html.libros-7 .mmm__libro.abierto::after{width:clamp(26px,3.6vw,46px);opacity:1}

/* 8 · EL PEINE — muescas muy juntas, como un código de barras, y un solo rótulo arriba */
html.libros-8 .mmm__libros{display:grid;gap:clamp(5px,.8vh,9px);align-content:center;
  padding-top:clamp(52px,8vh,86px)}
html.libros-8 .mmm__libro{display:flex;justify-content:flex-end;align-items:center;height:1.5em;padding-right:.2em}
html.libros-8 .mmm__libro i,html.libros-8 .mmm__libro em{display:none}
html.libros-8 .mmm__libro b{display:none}                       /* el título va arriba, uno solo */
html.libros-8 .mmm__libros::before{content:attr(data-titulo);position:absolute;
  right:0;top:0;width:var(--biblio);text-align:right;
  font-family:var(--serif);font-weight:400;font-size:clamp(13px,1.15vw,17px);
  letter-spacing:.01em;text-transform:none;line-height:1.25;color:var(--tinta);
  transition:opacity .35s var(--paso);pointer-events:none}
html.libros-8 .mmm__libro::after{width:clamp(10px,1.5vw,18px);opacity:.3}
html.libros-8 .mmm__libro:hover::after{width:clamp(22px,3vw,38px);opacity:.7}
html.libros-8 .mmm__libro.abierto::after{width:clamp(30px,4.2vw,52px);opacity:1}

@media (max-width:900px){ .mmm__libros{display:none} }   /* en el móvil, pendiente de ver con Eloy */

/* los párrafos: se apartan a un lado y a otro al cruzarse con la escultura */
.mmm__p{font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.4vw,22px);
  line-height:1.38;color:var(--tinta);margin:0 0 .9em;
  /* el apartado y el estirado los calcula mmm.js en cada fotograma: aquí solo el origen
     de la deformación, para que el texto se estire desde su propio centro */
  transform-origin:50% 50%;will-change:transform}
/* los renglones del acordeón: los parte mmm.js. Bloques, para poder moverlos uno a uno;
   el origen en el centro para que la poca escala que llevan no los descuadre.        */
.mmm__ln{display:block;transform-origin:50% 50%;will-change:transform}
.mmm__p{transform-origin:50% 50%}
.mmm__w{font-style:normal}                       /* solo se usan un instante, al medir */
/* a qué lado se aparta cada párrafo al cruzarse con la pieza. Va por nth-of-TYPE y no por
   nth-child porque el <h3> del bloque, aunque no se pinte, seguía contando: el primer
   párrafo salía par y se iba a la derecha. Eloy, 9 sep: «que el texto de la izquierda
   empiece primero arriba; ahora está a la derecha». Así que el primero, a la izquierda. */
.mmm__p:nth-of-type(odd){--lado:-1}
.mmm__p:nth-of-type(even){--lado:1}
.mmm__p--nota{font-family:var(--logo);font-weight:300;font-size:clamp(12px,.95vw,14px);
  line-height:1.55;color:var(--tierra);font-style:italic;max-width:34ch}
.mmm__bloque--pie h3{color:var(--tierra)}
body.mmm .seccion__volver{z-index:4}
@media (prefers-reduced-motion:reduce){ .mmm__p{translate:none} }
@media (max-width:900px){
  .mmm__bloque{width:min(38ch,86vw);margin-bottom:38vh}
  .mmm__bloque h3{position:static;text-align:left;width:auto;margin-bottom:1em}
  .mmm__p{translate:none}
  .mmm__lienzo{width:min(38vh,270px);height:min(38vh,270px)}
  .mmm__rotulo{top:22vh;gap:12px}
  .mmm__rotulo span{font-size:clamp(26px,7vw,40px)}
}

/* ═══════════════════════════════════════════════════════════════════════
   CÓMO ENTRA Y SALE UNA SECCIÓN · cinco maneras (Eloy, 9 sep)
   ───────────────────────────────────────────────────────────────────────
   «Que la animación sea más fluida y orgánica, con el texto también, al
   entrar y al salir; ahora el título aparece antes que la página y no
   tiene sentido». Aquí se decide cómo llega el contenido de la sección y
   cómo se va. En las cinco, el título entra CON su página, no antes.
   ?trans=1..5 · comparador en transicion.html
   ═══════════════════════════════════════════════════════════════════ */
/* el reparto de tiempos es común: cada pieza entra un poco después que la anterior */
body.en-seccion .seccion__etiqueta{transition-delay:.06s}
body.en-seccion .seccion__titular{transition-delay:.16s}
body.en-seccion .seccion__cuerpo{transition-delay:.3s}
body.en-seccion .seccion__cta{transition-delay:.44s}

/* ── 1 · VELO: el contenido llega tras un velo que se abre desde el centro ── */
html.trans-1 .seccion>*{opacity:0;transform:translateY(22px);filter:blur(10px);
  transition:opacity .9s var(--paso),transform 1.1s var(--paso),filter 1s var(--paso)}
html.trans-1 body.en-seccion .seccion>*{opacity:1;transform:none;filter:none}
html.trans-1 .seccion::after{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;
  background:var(--fondo);clip-path:circle(75% at 50% 50%);
  transition:clip-path 1.2s var(--paso),opacity .8s var(--paso)}
html.trans-1 body.en-seccion .seccion::after{clip-path:circle(0% at 50% 50%);opacity:0}

/* ── 2 · CORTINA: cada pieza se descubre de abajo arriba, como tinta que sube ── */
html.trans-2 .seccion>*{opacity:0;clip-path:inset(100% 0 0 0);transform:translateY(14px);
  transition:opacity .7s var(--paso),clip-path 1.1s var(--paso),transform 1.1s var(--paso)}
html.trans-2 body.en-seccion .seccion>*{opacity:1;clip-path:inset(-30% 0 0 0);transform:none}

/* ── 3 · EL MENÚ SE HACE TÍTULO: la entrada elegida vuela y se convierte en el titular,
      y el resto entra detrás de ella ─────────────────────────────────────── */
html.trans-3 .seccion>*{opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--paso),transform 1s var(--paso)}
html.trans-3 body.en-seccion .seccion>*{opacity:1;transform:none}
html.trans-3 body.en-seccion .seccion__cuerpo{transition-delay:.55s}
html.trans-3 body.en-seccion .seccion__cta{transition-delay:.7s}

/* ── 4 · DERIVA, LA ELEGIDA (Eloy, 9 sep) ────────────────────────────────
   Todo llega desde la derecha, desenfocado, y se posa. Y no llega a la vez: «que vaya
   saliendo Miguel Mochales, luego la cabeza y luego lo demás, pero muy rápido». Ese es
   el orden —nombre, cara, palabra—, con 130 ms entre pieza y pieza: se lee como una
   cosa detrás de otra sin que llegue a hacerse lento.                                 */
/* La clase va repetida a propósito (.trans-4.trans-4). Sin repetirla, «html.entra-3
   .seccion>*» —el ajuste de entrada de otra ronda, que sigue puesto— gana por
   especificidad, borra el translate y deja fuera «transform» de la lista de
   transiciones: el texto se fundía sin moverse. Repetir la clase iguala el peso y,
   al ir después en el archivo, manda esta.                                        */
html.trans-4.trans-4 .seccion>*{opacity:0;transform:translate3d(46px,0,0);filter:blur(7px);
  transition:opacity .7s var(--paso),transform .95s var(--paso),filter .8s var(--paso)}
html.trans-4.trans-4 body.en-seccion .seccion>*{opacity:1;transform:none;filter:none}
html.trans-4.trans-4 body.en-seccion .seccion__etiqueta{transition-delay:0s}
html.trans-4.trans-4 body.en-seccion .seccion__titular{transition-delay:.1s}    /* 1 · el nombre */
html.trans-4.trans-4 body.en-seccion .seccion__lienzo{transition-delay:.24s}    /* 2 · la cabeza */
html.trans-4.trans-4 body.en-seccion .seccion__cuerpo{transition-delay:.38s}    /* 3 · el texto */
html.trans-4.trans-4 body.en-seccion .seccion__cta{transition-delay:.52s}       /* 4 · y la llamada */
/* la foto entra igual que el resto,
       desde la derecha: si no,
       se quedaba fuera del gesto.
   El retardo se repite aquí porque el atajo «transition:» de esta regla lo ponía a cero,
       y la cabeza se adelantaba al nombre.                                                */
html.trans-4.trans-4 body.miguel .seccion__lienzo,
html.trans-4.trans-4 body.consigues .seccion__lienzo{transform:translate3d(46px,0,0);filter:blur(7px);
  transition:opacity .9s var(--paso),transform 1.1s var(--paso),filter .9s var(--paso)}
html.trans-4.trans-4 body.miguel.en-seccion .seccion__lienzo,

html.trans-4.trans-4 body.consigues.en-seccion .seccion__lienzo{transform:none;filter:none;transition-delay:.24s}
/* y en M.M.M., la escultura y sus bloques entran detrás del título, no a la vez */
html.trans-4.trans-4 body.mmm.en-seccion .mmm__lienzo{transition-delay:.24s}
html.trans-4.trans-4 body.mmm.en-seccion .mmm__rotulo{transition-delay:.4s}

/* ── 5 · RESPIRACIÓN: la página coge aire —se encoge un punto— y se suelta ── */
html.trans-5 .seccion{transform-origin:50% 50%}
html.trans-5 .seccion>*{opacity:0;transform:scale(.965) translateY(10px);
  transition:opacity .8s var(--paso),transform 1.25s cubic-bezier(.16,1.1,.3,1)}
html.trans-5 body.en-seccion .seccion>*{opacity:1;transform:none}
html.trans-5 .seccion::after{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;
  background:var(--fondo);opacity:1;transition:opacity 1s var(--paso)}
html.trans-5 body.en-seccion .seccion::after{opacity:0}

/* la salida: en las cinco, el contenido se va como vino, sin cortes */
body.saliendo .seccion>*{opacity:0!important;transition-delay:0s!important;
  transition-duration:.5s!important}

/* ═══════════════════════════════════════════════════════════════════════
   QUÉ CONSIGUES · el encuadre propio de su foto (Eloy, 9 sep)
   ───────────────────────────────────────────────────────────────────────
   La sección va calcada de la de Miguel, pero la foto no: la suya es
   vertical y esta es apaisada (Dojo 234, 6774×4521). En un hueco alto y
   estrecho, el recorte de Miguel se comía media postura. Así que aquí la
   franja empieza antes —en el 44 % en vez de en la mitad— y el encuadre
   se centra en las dos figuras. Solo toca a esta sección.
   ═══════════════════════════════════════════════════════════════════ */
/* La foto se queda COMO ESTABA LA PRIMERA VEZ (Eloy, 9 sep: «déjala como al inicio del
   todo, no me gusta»). O sea: el mismo tratamiento que la de Miguel —el borde izquierdo
   deshaciéndose en el blanco y nada más— y de propio solo el encuadre, porque la suya es
   vertical y esta apaisada. Lo que se probó y se retiró: fundir los cuatro lados, aclarar
   el gris del plató y un velo de papel en diagonal. Queda anotado, no puesto.         */
body.consigues .seccion__lienzo{left:44%}
body.consigues .seccion__retrato{object-position:52% 46%}
body.consigues{--mig-col:min(42vw,560px)}
@media (max-width:900px){ body.consigues .seccion__lienzo{left:52%} }

/* ═══════════════════════════════════════════════════════════════════════
   TEXTOS DE M.M.M. EN WEBGL · ?texto3d=1 (Eloy, 10 sep)
   ───────────────────────────────────────────────────────────────────────
   El lienzo pasa a ocupar la pantalla entera —ahí caben la escultura y los
   textos, compartiendo profundidad— y los párrafos del HTML se vuelven
   invisibles PERO NO desaparecen: siguen ocupando su sitio, porque son los
   que le dicen a cada plano 3D dónde tiene que ir, y siguen leyéndose con
   un lector de pantalla y para Google. Es lo mismo que hace la referencia
   con su sección oculta.
   ═══════════════════════════════════════════════════════════════════ */
html.texto3d .mmm__lienzo{position:fixed;left:0;top:0;right:0;bottom:0;translate:none;
  width:100vw;height:100vh;max-width:none;max-height:none}
html.texto3d .mmm__p{opacity:0!important;transform:none!important;pointer-events:none}
html.texto3d .mmm__ln{transform:none!important}

/* ── LA COMPOSICIÓN DE LA REFERENCIA · dos columnas (Eloy, 10 sep: «fíjate bien») ────
   Mirando su captura a tamaño grande se ve lo que llevábamos sin acertar: allí NO hay una
   columna de texto que esquiva a la escultura. Hay DOS COLUMNAS fijas, una a cada lado de
   la pieza, escalonadas —la de la izquierda arriba, la de la derecha más abajo—, y cada
   una mira hacia dentro: la izquierda alineada a la derecha y la derecha a la izquierda.
   La escultura vive en el pasillo del medio.

   Como el texto en WebGL lee del DOM dónde va cada párrafo, basta con colocarlos aquí:
   el CSS compone y la tarjeta gráfica pinta.                                          */
html.texto3d .mmm__campo{display:block;padding:44vh clamp(20px,4vw,70px) 50vh}
html.texto3d .mmm__bloque{width:auto;max-width:none;margin:0 0 30vh;
  display:grid;grid-template-columns:1fr var(--paso-cabeza,min(34vh,300px)) 1fr;
  align-items:start;column-gap:clamp(10px,2vw,34px)}
html.texto3d .mmm__p{width:auto;max-width:34ch;margin:0 0 1.1em}
html.texto3d .mmm__p:nth-of-type(odd){grid-column:1;justify-self:end;text-align:right}
html.texto3d .mmm__p:nth-of-type(even){grid-column:3;justify-self:start;text-align:left;
  margin-top:26vh}                                   /* el escalón: la derecha entra más abajo */
html.texto3d .mmm__p:nth-of-type(n+3){margin-top:8vh}
/* el título del escrito, arriba y centrado, como el número de capítulo de la referencia */
html.texto3d .mmm__bloque h3{display:block;grid-column:1/-1;justify-self:center;text-align:center;
  font-family:var(--logo);font-weight:300;font-size:clamp(26px,5.4vh,56px);line-height:1;
  letter-spacing:-.02em;color:var(--tinta);margin:0 0 16vh;position:static;width:auto}
html.texto3d .mmm__bloque h3 small{display:inline-block;margin-left:1.4em;font-size:.24em;
  letter-spacing:.26em;text-transform:uppercase;color:var(--tierra);vertical-align:middle}
html.texto3d .mmm__rotulo{display:none}              /* el título vive en su bloque, no fijo */

/* ══════════════════════════════════════════════════════════════════════════
   EMPEZAR · EL PORTAL (Eloy, 10 sep)
   ──────────────────────────────────────────────────────────────────────────
   La sección deja de ser un cuestionario y pasa a ser la PUERTA: un resumen
   corto de lo que va a pasar y el acceso a la sesión en directo de Miguel.
   Cinco maneras (html.portal-1…5) sobre un mismo HTML, como el resto de la
   web. Y el acceso tiene tres caras (html.estado-invitado / espera / directo)
   porque no es lo mismo quien aún no tiene cuenta que quien llega tarde a un
   directo ya empezado.
   Referencia mirada: la categoría Events de Awwwards, y en concreto
   thestudiobyjuliegranger.com — allí la web pública es solo la puerta y la
   clase vive detrás de la cuenta. Es exactamente este caso.
   ══════════════════════════════════════════════════════════════════════ */
.b--portal{display:grid;gap:clamp(16px,2.4vh,28px);align-content:start}
.portal__resumen{font-size:clamp(15px,1.25vw,20px);line-height:1.5;max-width:44ch;color:var(--tinta)}

/* la tarjeta de acceso: lo único que de verdad hay que ver */
.portal__acceso{display:grid;gap:.9em;justify-items:start;
  border:1px solid var(--linea);padding:clamp(18px,2.4vh,26px) clamp(20px,2.2vw,30px);
  border-radius:3px;background:rgba(255,255,255,.5);max-width:46ch}
.portal__cuando{display:grid;gap:.35em}
.portal__cuando small{font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--tierra)}
.portal__cuando strong{font-weight:300;font-size:clamp(20px,2.1vw,30px);line-height:1.1;letter-spacing:-.01em}
/* el hueco marcado: mientras el cliente no diga día y hora, se ve el sitio que ocupan */
.portal__falta{color:var(--tierra);font-style:italic}
.portal__falta::before{content:"⟨ ";opacity:.5}
.portal__falta::after{content:" ⟩";opacity:.5}
.portal__reloj{display:flex;gap:.7em;font-weight:300;font-size:clamp(13px,1.05vw,16px);color:var(--tinta2);letter-spacing:.1em}
.portal__reloj span::after{content:"";}

.portal__puertas{display:flex;flex-wrap:wrap;align-items:center;gap:.9em 1.4em;margin-top:.2em}
.portal__b{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-weight:700;font-size:clamp(11px,.95vw,13px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--fondo);background:var(--tinta);padding:14px 22px;border-radius:2px;
  transition:background .35s,gap .4s var(--paso),color .35s}
.portal__b::after{content:"→";font-weight:300;transition:transform .4s var(--paso)}
.portal__b:hover{background:var(--tierra);gap:18px}
.portal__b--crear{background:var(--tierra)}
.portal__b--crear:hover{background:var(--tinta)}
.portal__enlace{color:var(--tinta2);text-decoration:none;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--linea);padding-bottom:3px;transition:color .3s,border-color .3s}
.portal__enlace:hover{color:var(--tinta);border-color:var(--tinta)}
.portal__aviso{font-size:clamp(12px,.95vw,14px);line-height:1.5;color:var(--tinta2);max-width:40ch}
.portal__aviso b{font-weight:700;color:var(--tinta)}

/* el punto del directo: late solo cuando de verdad está en directo */
html.estado-directo .portal__cuando small::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--tierra);margin-right:9px;vertical-align:middle;animation:portalLate 1.8s infinite}
@keyframes portalLate{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* QUIÉN MIRA. Sin cuenta se ofrece la cuenta; con ella, la sala. */
.portal__b--sala,.portal__b--crear,.portal__enlace--cal,
.portal__aviso--invitado,.portal__aviso--espera,.portal__aviso--directo{display:none}
html.estado-invitado .portal__b--crear,
html.estado-invitado .portal__enlace:not(.portal__enlace--cal),
html.estado-invitado .portal__aviso--invitado{display:inline}
html.estado-invitado .portal__b--crear{display:inline-flex}
html.estado-espera .portal__b--sala,
html.estado-espera .portal__enlace--cal,
html.estado-espera .portal__aviso--espera{display:inline}
html.estado-espera .portal__b--sala{display:inline-flex;background:var(--tinta2);pointer-events:none}
html.estado-espera .portal__enlace:not(.portal__enlace--cal){display:none}
html.estado-directo .portal__b--sala,
html.estado-directo .portal__aviso--directo{display:inline}
html.estado-directo .portal__b--sala{display:inline-flex}
html.estado-directo .portal__enlace{display:none}

/* los cuatro momentos de la sesión */
.portal__momentos{list-style:none;display:grid;gap:.8em}
.portal__momentos li{display:grid;grid-template-columns:auto 1fr;column-gap:1.1em;align-items:baseline}
.portal__momentos small{font-weight:300;font-size:10px;letter-spacing:.2em;color:var(--tierra)}
.portal__momentos strong{font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.2em;text-transform:uppercase}
.portal__momentos p{grid-column:2;font-size:clamp(12px,.95vw,14px);line-height:1.5;color:var(--tinta2);margin-top:.2em}

/* qué tener a mano */
.portal__llevar{display:grid;gap:.5em}
.portal__llevar small{font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--tinta2)}
.portal__llevar ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5em}
.portal__llevar li{font-size:clamp(11px,.9vw,13px);letter-spacing:.04em;color:var(--tinta2);
  border:1px solid var(--linea);border-radius:100px;padding:5px 12px}

/* el horario de próximas sesiones */
.portal__horario{list-style:none;display:grid;gap:0;border-top:1px solid var(--linea)}
.portal__cab{font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--tinta2);padding:.9em 0 .5em}
.portal__fila{display:grid;grid-template-columns:8ch 7ch 1fr auto;align-items:baseline;gap:1.2em;
  padding:.95em 0;border-bottom:1px solid var(--linea);transition:color .3s}
.portal__dia,.portal__hora{font-weight:700;font-size:clamp(11px,.95vw,13px);letter-spacing:.16em;text-transform:uppercase}
.portal__hora{color:var(--tierra)}
.portal__tema{font-size:clamp(12px,1vw,15px);color:var(--tinta2)}
.portal__ir{font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2);opacity:0;transition:opacity .3s}
.portal__fila:hover .portal__ir{opacity:1}
.portal__fila--falta .portal__tema{color:var(--tierra);font-style:italic}

/* la célula del acceso (manera 5) */
.portal__celula{display:none;position:relative;width:clamp(180px,22vw,280px);aspect-ratio:1;justify-self:center;cursor:pointer}
.portal__celula span{position:absolute;inset:0;border-radius:50%;
  background-image:radial-gradient(circle,var(--tinta) .6px,transparent .7px),radial-gradient(circle,var(--tierra) .5px,transparent .6px);
  background-size:5px 5px,7px 7px;background-position:0 0,2px 3px;opacity:.55;
  animation:portalLatido 3.4s ease-in-out infinite;transition:opacity .5s,transform .6s var(--paso)}
.portal__celula::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--linea)}
.portal__celula:hover span{opacity:.85;transform:scale(1.06)}
@keyframes portalLatido{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

}
/* el portal necesita todo el ancho del cuerpo: la regla general de la sección lo corta a
   48ch, que es la medida buena para leer un párrafo pero ahoga una tarjeta y un horario. */
.seccion__cuerpo.seccion__cuerpo:has(.b--portal){max-width:none}   /* doble clase: si no, gana el 48ch de html.seccion-2 */
/* (La reserva del 46 % para la célula ya no se recorta: en «Empezar» la sección va a UNA
   columna — ver «cuatro puertas», más abajo. Esta regla ganaba por especificidad y dejaba
   el titular en la columna de la derecha, encima de la foto.) */

/* ══════════════════════════════════════════════════════════════════════════
   EMPEZAR · CUATRO PUERTAS (Eloy, 10 sep, viendo las cinco primeras:
   «lo veo demasiado cargado; mucho más simple, con un botón de entrar y un
   espacio para una fotografía tipo la de Miguel, sin la célula»)
   ──────────────────────────────────────────────────────────────────────────
   Se entra y ya: el titular, una frase, cuándo es y un botón. La foto hace el
   resto. Los cuatro momentos, el horario y la lista de lo que hay que llevar
   se han ido a «Cómo funciona» y «El dojo», que es donde tocan; el CSS que
   los componía está entero en _archivo/portal-cinco-cargadas.css.
   ══════════════════════════════════════════════════════════════════════ */
.b--portal .portal__momentos,.b--portal .portal__llevar,
.b--portal .portal__horario,.b--portal .portal__celula,.b--portal .portal__reloj{display:none}
/* el botón está DENTRO de la puerta: el de la sección sobraría */
body.empezar .seccion__cta{display:none}
body.empezar .seccion>*{grid-column:auto!important;position:relative;z-index:2}
/* UNA SOLA COLUMNA. La sección viene con la rejilla «46 % para la célula · el resto para
   el texto», y con ella el titular caía en la columna de la derecha —encima de la foto—
   mientras el párrafo se quedaba en la izquierda. Aquí no hay célula: una columna.    */
html.seccion-2 body.en-seccion.empezar .seccion{background:var(--fondo);grid-template-columns:1fr;
  align-content:center;align-items:start;padding-top:0;padding-bottom:0}
/* el contenedor de los escritos de M.M.M. es hijo de la sección y, aunque aquí esté vacío,
   se comía 626 px de la primera fila del grid y empujaba la puerta fuera de la pantalla. */
body.empezar .mmm{display:none}
/* y el lienzo del pincel de tinta, que es de la sección de Miguel: aquí no se pinta nada
   con el ratón, pero seguía siendo hijo de la sección y se comía 626 px de la primera
   fila del grid — por eso la puerta se iba por debajo del borde de la pantalla.       */
body.empezar .seccion__pincel{display:none}

/* LA FOTO. La misma maquinaria que la de Miguel: fija, a sangre, sin borde duro —el
   degradado de la máscara la funde con el papel (Eloy: nunca una línea horizontal ni un
   corte seco en las fotos)—. Lo único que cambia entre las cuatro es DÓNDE está.      */
body.empezar .seccion__lienzo{display:block;position:fixed;top:0;bottom:0;right:0;left:50%;
  width:auto;height:100%;margin:0;z-index:0;opacity:0;
  transform:none!important;filter:none!important;clip-path:none!important;
  transition:opacity 1.6s var(--paso);pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%);
  mask-image:linear-gradient(to right,transparent 0,#000 26%)}
body.empezar.en-seccion .seccion__lienzo{opacity:1}
body.empezar .seccion__retrato{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:56% 46%;filter:none!important;-webkit-mask-image:none;mask-image:none;transition:none}

/* la puerta, ya sin adornos */
body.empezar .b--portal{gap:clamp(14px,2vh,22px);max-width:34ch}
body.empezar .portal__resumen{font-size:clamp(14px,1.15vw,18px);max-width:30ch;color:var(--tinta2)}
body.empezar .portal__acceso{border:0;background:none;padding:0;max-width:none;gap:1.1em}
body.empezar .portal__cuando strong{font-size:clamp(17px,1.6vw,23px)}
body.empezar .portal__b{padding:16px 30px;letter-spacing:.26em}
body.empezar .portal__aviso{font-size:clamp(11px,.85vw,12.5px);max-width:32ch;opacity:.9}
/* lo que falta, anotado al pie: pequeño, sin robarle la vista a la puerta */
body.empezar .portal__pendiente{max-width:40ch;margin:.6em 0 0;font-size:10.5px;line-height:1.5;opacity:.7}

/* ── 1 · LA LÁMINA ───────────────────────────────────────────────────
   La composición de Miguel, tal cual: la foto a sangre por la derecha y
   la puerta a la izquierda, con todo el aire del mundo.               */
html.portal-1 body.empezar{--mig-x:clamp(28px,7vw,120px)}
html.seccion-2.portal-1 body.en-seccion.empezar .seccion{align-content:center;padding-left:var(--mig-x)}
html.portal-1 body.empezar.empezar .seccion__titular{font-size:clamp(34px,4.4vw,68px);max-width:11ch}

/* ── 2 · LA PUERTA ───────────────────────────────────────────────────
   La foto ocupa la pantalla entera y la puerta va encima, abajo a la
   izquierda. Es la más rotunda: entras a la sala, no a una página.   */
html.portal-2 body.empezar.empezar .seccion__lienzo{left:0;
  -webkit-mask-image:none;mask-image:none}
/* para que se lea encima: una veladura que sube desde el pie, no una caja. Cubre entero el
   tercio de abajo, que es donde va la letra pequeña, y se disuelve antes de llegar arriba. */
html.portal-2 body.empezar.empezar .seccion::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,var(--fondo) 0 26%,rgba(253,253,253,.92) 48%,rgba(253,253,253,.55) 72%,rgba(253,253,253,0) 100%)}
/* y el titular, que sí queda sobre la foto limpia, se resuelve como en la sección de
   Miguel: blanco en modo diferencia. Se lee sobre lo que sea, claro u oscuro, sin cajas. */
html.portal-2 body.empezar.empezar .seccion__titular{color:#fff;mix-blend-mode:difference;z-index:6}
html.seccion-2.portal-2 body.en-seccion.empezar .seccion{align-content:end;padding:0 clamp(28px,7vw,120px) clamp(60px,10vh,110px)}
html.portal-2 body.empezar.empezar .seccion__titular{font-size:clamp(32px,4vw,60px);max-width:13ch}


/* ── 3 · EL MARGEN ───────────────────────────────────────────────────
   La foto a la izquierda y la puerta a la derecha, pequeña y quieta. La
   más silenciosa de las cuatro: casi todo es imagen.                  */
html.portal-3 body.empezar.empezar .seccion__lienzo{left:0;right:auto;width:min(58vw,900px);
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 24%);
  mask-image:linear-gradient(to left,transparent 0,#000 24%)}
html.seccion-2.portal-3 body.en-seccion.empezar .seccion{align-content:center;justify-items:end;text-align:right;
  padding:0 clamp(28px,6vw,96px) 0 auto}
html.portal-3 body.empezar.empezar .seccion__titular{font-size:clamp(28px,3.4vw,50px);max-width:12ch}
html.portal-3 body.empezar.empezar .b--portal{justify-items:end}
html.portal-3 body.empezar.empezar .portal__acceso{justify-items:end}
html.portal-3 body.empezar.empezar .portal__cuando{text-align:right}
html.portal-3 body.empezar.empezar .portal__puertas{justify-content:flex-end}
html.portal-3 body.empezar.empezar .portal__pendiente{text-align:right}

/* ── 4 · LA LÁMINA CENTRADA ──────────────────────────────────────────
   La foto no sangra: es una lámina de pie en el centro, con el titular
   encima y el botón debajo. Un cartel, y nada más.                    */
html.portal-4 body.empezar.empezar .seccion__lienzo{left:50%;right:auto;translate:-50% 0;
  top:clamp(96px,17vh,190px);bottom:clamp(76px,13vh,150px);height:auto;width:min(34vw,420px);
  -webkit-mask-image:none;mask-image:none}
html.seccion-2.portal-4 body.en-seccion.empezar .seccion{align-content:center;justify-items:center;text-align:center;padding:0 4vw}
html.portal-4 body.empezar.empezar .seccion__titular{font-size:clamp(30px,3.8vw,58px);max-width:14ch;
  position:relative;z-index:2;mix-blend-mode:difference;color:#fff}
html.portal-4 body.empezar.empezar .seccion__etiqueta{justify-content:center}
html.portal-4 body.empezar.empezar .b--portal{justify-items:center;text-align:center;max-width:40ch}
html.portal-4 body.empezar.empezar .portal__acceso{justify-items:center}
html.portal-4 body.empezar.empezar .portal__puertas{justify-content:center}
html.portal-4 body.empezar.empezar .portal__resumen{display:none}   /* en un cartel no cabe un párrafo */
html.portal-4 body.empezar.empezar .portal__pendiente{text-align:center}

@media (max-width:820px){
  body.empezar .seccion__lienzo{left:0!important;width:auto!important;
    -webkit-mask-image:none!important;mask-image:none!important}
  body.empezar .seccion{align-content:end!important;justify-items:start!important;text-align:left!important;
    padding:0 22px 52px!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   CÓMO SE RETIRA LA FOTO AL BAJAR · cuatro maneras (Eloy, 10 sep)
   ──────────────────────────────────────────────────────────────────────────
   Lo que había: una lámina blanca plana sobre toda la pantalla, que subía con
   el scroll hasta lavar la foto un 19 %. «Como una capa gaussiana encima de
   la foto de Miguel. No me gusta.» Y tiene razón: lava a las personas, que es
   justo lo que él lleva pidiendo que no se haga.
   Las cuatro de abajo retiran la foto SIN tocarle el color: o la mueven, o la
   dejan en paz, o la tapan con papel de verdad en vez de con un velo.
   Se comparan en vela.html · ?vela=0..4 (0 es la de antes).
   ══════════════════════════════════════════════════════════════════════ */
/* la lámina de antes solo existe en la 0: en las demás, ni se pinta */
html:not(.vela-0) body.miguel .seccion::before,
html:not(.vela-0) body.consigues .seccion::before{background:none}

/* ── 1 · NADA ────────────────────────────────────────────────────────
   La foto se queda como es de arriba abajo. El texto nunca la pisa —va
   en su columna, a la izquierda— así que el velo no hacía falta para
   leer: solo tapaba. La más limpia, y la más arriesgada.             */
/* (no hace falta ninguna regla: basta con no pintar la lámina) */

/* ── 2 · SE ALEJA ────────────────────────────────────────────────────
   En vez de blanquearla, se va hacia atrás: encoge un pelo y su borde
   izquierdo se come más terreno. Se retira de escena entera y a color. */
/* clase repetida a propósito, como en .trans-4.trans-4: hay reglas de entrada con
   `transform:none!important` y cuatro clases que si no ganan a esta. */
html.vela-2.vela-2 body.miguel.miguel .seccion__lienzo,
html.vela-2.vela-2 body.consigues.consigues .seccion__lienzo{
  transform:scale(calc(1 - var(--vela,0) * .12))!important;transform-origin:100% 50%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 calc(26% + var(--vela,0) * 30%));
  mask-image:linear-gradient(to right,transparent 0,#000 calc(26% + var(--vela,0) * 30%))}

/* ── 3 · SE VA POR ARRIBA ────────────────────────────────────────────
   La foto sube más deprisa que el texto y se disuelve por su borde de
   abajo: parece que se marcha del cuadro, no que se apaga.          */
html.vela-3.vela-3 body.miguel.miguel .seccion__lienzo,
html.vela-3.vela-3 body.consigues.consigues .seccion__lienzo{
  transform:translateY(calc(var(--vela,0) * -14vh))!important;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 26%),
                     linear-gradient(to top,transparent 0,#000 calc(var(--vela,0) * 46%));
  mask-image:linear-gradient(to right,transparent 0,#000 26%),
             linear-gradient(to top,transparent 0,#000 calc(var(--vela,0) * 46%));
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* ── 4 · EL PAPEL SUBE ───────────────────────────────────────────────
   No se vela: se tapa. Una lámina del color del papel sube desde el pie
   con el borde de arriba difuminado, como una marea. La foto que aún se
   ve está intacta; lo que se ha ido, se ha ido del todo.             */
html.vela-4 body.miguel .seccion::after,
html.vela-4 body.consigues .seccion::after{content:"";position:fixed;left:0;right:0;bottom:0;z-index:1;
  pointer-events:none;height:calc(var(--vela,0) * 145%);
  background:linear-gradient(to top,var(--fondo) 0,var(--fondo) 62%,rgba(253,253,253,0) 100%)}

/* ══════════════════════════════════════════════════════════════════════════
   121 · LAS LANDINGS (Eloy, 13 sep) · todas menos la portada
   ──────────────────────────────────────────────────────────────────────────
   Tres cosas que pidió, y una que salió al verlas:
   A · La foto no se tapa. Lo que había —la lámina blanca que subía con el
       scroll— «se sobreexpone sobre la imagen». Fuera. Lo que hace legible
       el texto es un velo de DESENFOQUE mínimo detrás de la columna, sin
       caja y sin borde: una máscara lo funde hacia la foto.
   B · La jerarquía de tecnoarreda.it: titular partido en dos, una frase
       bajo él, una declaración grande que se tiñe al bajar, un rótulo enorme
       en mayúsculas con su etiqueta, titulares medianos para cada tramo y
       una lista de palabras gigantes. Medido allí: h1 92 px a peso 100,
       declaración 48 px, rótulo 123 px, palabras 82 px, párrafo 19 px a 300.
   C · Los efectos de reactbits.dev: el H1 entra con fundido y desenfoque por
       palabras (Blur Text, desde arriba); lo que lleva `.relleno` empieza gris
       y se tiñe de negro con el scroll (Scroll Reveal; el color lo pone
       seccion.js palabra a palabra).
   D · Al bajar, el texto pasaba por debajo del logo y se pisaban en negro:
       una aureola de desenfoque tras la marca, solo dentro de una sección.
   Los tamaños grandes van en `cqw` —por ciento del ancho de la columna—,
   así que aguantan cualquier ventana sin desbordar la columna (norma, LEEME 117).
   ══════════════════════════════════════════════════════════════════════ */
:root{--gris-relleno:#C9C3BA}

/* ── A · el velo de desenfoque en las secciones con foto ─────────────────── */
body.empezar{--mig-x:clamp(28px,7vw,120px);--mig-col:min(46vw,640px)}
html.vela-1 body.miguel.miguel .seccion::before,
html.vela-1 body.consigues.consigues .seccion::before,
html.vela-1 body.empezar.empezar .seccion::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(253,253,253,.10);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(var(--mig-x) + var(--mig-col) - 2vw),transparent calc(var(--mig-x) + var(--mig-col) + 14vw));
  mask-image:linear-gradient(to right,#000 0,#000 calc(var(--mig-x) + var(--mig-col) - 2vw),transparent calc(var(--mig-x) + var(--mig-col) + 14vw))}
/* el halo blanco que llevaba cada letra era otra forma de blanco sobre la foto: fuera */
html.vela-1 body.miguel .seccion__cuerpo,html.vela-1 body.consigues .seccion__cuerpo,
html.vela-1 body.miguel .seccion__cta,html.vela-1 body.consigues .seccion__cta{text-shadow:none}
/* en Miguel la frase cabe bajo el titular, en la primera pantalla: el cuerpo empieza antes */
html.vela-1 body.miguel .seccion__titular,html.vela-1 body.consigues .seccion__titular{margin-top:calc(100vh - clamp(360px,54vh,560px))}
html.vela-1 body.miguel .seccion__cuerpo,html.vela-1 body.consigues .seccion__cuerpo{margin-top:clamp(26px,4.5vh,56px)}

/* ── D · la marca, con su aureola, mientras hay sección ──────────────────── */
body.en-seccion .logo,body.en-seccion .cab__derecha{position:relative;z-index:0}
body.en-seccion .logo::before,body.en-seccion .cab__derecha::before{content:"";position:absolute;inset:-22px -52px;z-index:-1;pointer-events:none;
  background:rgba(253,253,253,.3);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 36%,transparent 70%);
  mask-image:radial-gradient(ellipse at center,#000 36%,transparent 70%)}

/* ── C · el H1: fundido y desenfoque por palabras (Blur Text) ────────────── */
html.titulo-blur .seccion__titular{opacity:1!important;transform:none!important;filter:none!important;
  clip-path:none!important;transition:none!important}
html.titulo-blur .seccion__titular .w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(-.32em);
  transition:opacity .75s ease-out,filter .95s ease-out,transform 1s var(--paso);
  transition-delay:calc(var(--i) * 120ms + .3s)}
html.titulo-blur body.en-seccion .seccion__titular .w{opacity:1;filter:none;transform:none}
html.titulo-blur body:not(.en-seccion) .seccion__titular .w{transition-delay:0s;transition-duration:.4s}
/* el titular partido como en la referencia: la segunda parte, un escalón a la derecha.
   Solo en las secciones de célula: el «Miguel Mochales.» de abajo está cerrado (7 sep). */
html.titulo-blur body:not(.miguel):not(.consigues):not(.empezar) .seccion__titular em{display:block;padding-left:clamp(1.1em,12%,3.2em)}
html.seccion-2.titulo-blur body:not(.miguel):not(.consigues):not(.empezar) .seccion__titular{
  font-family:var(--logo);font-size:clamp(34px,4.8vw,80px);line-height:.98;letter-spacing:-.03em;max-width:12ch}
html.seccion-2.titulo-blur body:not(.miguel):not(.consigues):not(.empezar) .seccion__titular em{font-weight:500}

/* ── B · la jerarquía ─────────────────────────────────────────────────────── */
.seccion__cuerpo{container-type:inline-size}
/* la frase bajo el titular: la «Design esclusivo, emozioni senza tempo» de la referencia */
.b--lema{font-family:var(--logo);font-weight:300;font-size:clamp(17px,4.2cqw,28px);line-height:1.3;letter-spacing:-.012em;
  color:var(--tinta);max-width:26ch;margin:.1em 0 clamp(18px,4vh,40px)}
/* la declaración: grande, ligera, y se tiñe al bajar */
.b--declara{font-family:var(--logo);font-weight:300;font-size:clamp(22px,6.2cqw,46px);line-height:1.12;letter-spacing:-.025em;
  max-width:22ch;margin:clamp(40px,8vh,90px) 0 clamp(14px,2.5vh,26px);text-wrap:pretty}
/* el rótulo enorme con su etiqueta encima («DETTAGLI DI STILE» / «EQUILIBRIO DI FORME») */
.b--grande{display:grid;gap:.9em;margin:clamp(56px,11vh,130px) 0 clamp(20px,4vh,44px)}
.b--grande small{display:flex;align-items:center;gap:1.1em;font-family:var(--logo);font-weight:300;
  font-size:clamp(10px,.9vw,13px);letter-spacing:.34em;text-transform:uppercase;color:var(--tierra)}
.b--grande small::after{content:"";flex:1;height:1px;background:currentColor;opacity:.5}
.b--grande strong{font-family:var(--logo);font-weight:300;font-size:clamp(30px,12.5cqw,112px);line-height:.94;
  letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
/* el titular mediano que abre cada tramo */
.b--h{font-family:var(--logo);font-weight:300;font-size:clamp(20px,4.8cqw,36px);line-height:1.15;letter-spacing:-.02em;
  max-width:22ch;margin:clamp(44px,8vh,96px) 0 .5em}
.b--h+.b--p,.b--h+.b--lista,.b--h+.b--pasos,.b--h+.b--pendiente{margin-top:.5em}
/* las palabras gigantes, numeradas y con filete (PROGETTIAMO · COSTRUIAMO · …) */
.b--palabras{list-style:none;display:grid;margin:clamp(48px,9vh,110px) 0 0;border-top:1px solid rgba(180,100,58,.45)}
.b--palabras li{display:grid;grid-template-columns:2.6em 1fr;column-gap:.4em;align-items:baseline;
  padding:.4em 0 .48em;border-bottom:1px solid rgba(180,100,58,.45)}
.b--palabras small{font-family:var(--logo);font-weight:300;font-size:clamp(10px,.85vw,12px);letter-spacing:.2em;color:var(--tierra)}
.b--palabras strong{font-family:var(--logo);font-weight:300;font-size:clamp(28px,10cqw,88px);line-height:1;
  letter-spacing:-.035em;text-transform:uppercase}
.b--palabras em{grid-column:2;font-style:normal;font-family:var(--logo);font-weight:300;font-size:clamp(11px,.9vw,13px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2);margin-top:.45em}
/* la cita */
.b--cita{margin:clamp(40px,8vh,90px) 0 0;padding-left:1.2em;border-left:1px solid rgba(180,100,58,.5)}
.b--cita p{font-family:var(--logo);font-weight:300;font-size:clamp(17px,3.6cqw,26px);line-height:1.3;letter-spacing:-.01em;max-width:26ch}
.b--cita footer{font-family:var(--logo);font-weight:300;font-size:clamp(10px,.85vw,12px);letter-spacing:.24em;text-transform:uppercase;color:var(--tierra);margin-top:.9em}
/* lo que se rellena: gris visible de partida; el negro lo va poniendo seccion.js */
.relleno .rp{color:var(--gris-relleno);transition:color .18s linear}
/* el cierre y los nombres de los pilares también se tiñen: son los h3 de cada sección */
.b--cierre{font-family:var(--logo);font-size:clamp(18px,4.4cqw,34px);line-height:1.25;letter-spacing:-.02em;max-width:22ch;margin-top:clamp(44px,8vh,96px)}

/* en las de foto (Miguel, Qué consigues): `body.miguel .b{margin:0}` pisaba los aires de arriba */
body.miguel .b--lema,body.consigues .b--lema{margin:.1em 0 clamp(18px,4vh,40px);font-size:clamp(19px,4.6cqw,32px);max-width:24ch}
body.miguel .b--declara,body.consigues .b--declara{margin:clamp(70px,14vh,160px) 0 clamp(14px,2.5vh,26px);max-width:20ch}
body.miguel .b--grande,body.consigues .b--grande{margin:clamp(70px,14vh,160px) 0 clamp(20px,4vh,44px)}
body.miguel .b--h,body.consigues .b--h{margin:clamp(60px,12vh,140px) 0 .5em}
body.miguel .b--h+.b--p,body.consigues .b--h+.b--p{margin-top:.6em;font-size:clamp(17px,1.45vw,23px);line-height:1.6;color:rgba(21,19,17,.78);max-width:26ch}
body.miguel .b--palabras,body.consigues .b--palabras{margin:clamp(60px,12vh,140px) 0 0}
body.miguel .b--cierre,body.consigues .b--cierre{margin:clamp(70px,14vh,160px) 0 0}

@media (prefers-reduced-motion:reduce){
  html.titulo-blur .seccion__titular .w{opacity:1;filter:none;transform:none;transition:none}
  .relleno .rp{color:var(--tinta)!important;transition:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   124 · MÓVIL (Eloy, 14 sep) · «que sea totalmente funcional y con diseño
   creativo desde el móvil, sin tocar nada del escritorio»
   ──────────────────────────────────────────────────────────────────────────
   Todo lo de aquí abajo vive dentro de consultas que el escritorio no cumple
   —ancho de hasta 640 px, o pantalla vertical y sin ratón—, así que nada de
   esto puede alcanzar a la versión que él ya dio por buena.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* LA CABECERA. El botón MENÚ se salía de la pantalla: la nav de la cuenta sigue en el
     flujo aunque esté invisible (opacidad 0), medía 297 px y empujaba el botón hasta los
     438 px en una ventana de 375. En el móvil la cuenta no va en la cabecera —no cabe— y
     además el menú ya la lleva en su pie, que es donde toca buscarla.                  */
  /* clase doblada, como en `.vela-2.vela-2`: `html.cuenta-b .cuenta{display:flex}` (línea
     368) pesa más que un selector de dos clases y le ganaba a este.                     */
  .cab__derecha>.cuenta.cuenta{display:none}
  .cab{padding:clamp(16px,2.4vh,24px) 20px}

  /* LA PORTADA. La frase se subía hasta pisar el botón de Reiniciar; ahora respira por
     abajo. La célula la coloca el motor (arena.js), no el CSS.                         */
  .portada{padding-bottom:clamp(56px,9vh,76px)}
  /* LA FRASE DE LA PORTADA, A LA IZQUIERDA (Eloy, 14 sep: «el texto inicial no me gusta cómo
     está colocado; justifícalo todo a la izquierda, que las frases estén en la misma
     posición»). Iba centrada y con `text-wrap:balance`, que reparte las palabras para que
     las líneas queden parejas: en una pantalla estrecha eso deja cada renglón empezando en
     un sitio distinto y se lee como un escalón. Alineada a la izquierda, todas arrancan en
     la misma vertical. En el escritorio sigue centrada, que ahí sí funciona.             */
  .frase{font-size:15px;line-height:1.6;max-width:32ch;
    text-align:left;text-wrap:pretty;justify-self:start}
  .portada{justify-items:start}
  .pista{font-size:11px;letter-spacing:.18em;padding:12px 16px}
  /* el botón de trabajo, más chico y pegado a la esquina: en el móvil estorba mucho más
     que en el escritorio. Se quita al publicar, pero mientras esté que no moleste.   */
  .reinicia{font-size:9px;padding:7px 11px;left:10px;bottom:10px;opacity:.35}
}

/* ── EL MENÚ EN MÓVIL ─────────────────────────────────────────────────────
   Se abría con la lista ENCIMA del dibujo de arena: «El dojo», «Retiros» y
   «Galería» se perdían entre los granos, y cada entrada medía 13 px de alto
   —imposible de acertar con el dedo; el suelo táctil son 44—. Ahora el
   dibujo es un emblema arriba (lo sube `menuY()` en arena.js) y la lista
   ocupa entera la mitad de abajo, con entradas grandes y separadas.
   La condición es «pantalla vertical y sin ratón»: así entra cualquier móvil
   o tableta de pie, y el escritorio queda fuera por definición —tiene ratón—,
   por ancha o estrecha que alguien ponga la ventana.                       */
@media (max-aspect-ratio:1/1) and (hover:none){
  html.menu-arena .menu{align-content:end;padding:0 24px clamp(104px,15vh,132px);gap:0}
  html.menu-arena .menu ol{gap:2px;width:100%}
  /* cada entrada de la LISTA, una línea entera y con altura de dedo. Ojo: el selector va
     atado a `ol`; suelto alcanzaba también a los dos enlaces del pie y les metía la
     rejilla de tres columnas, que los estiraba a 90 px y pisaba el «Volver».         */
  html.menu-arena .menu ol a{display:grid;grid-template-columns:2.2em 1fr auto;align-items:center;
    gap:.8em;min-height:46px;padding:5px 2px;width:100%;font-size:clamp(13px,3.6vw,15.5px);letter-spacing:.11em}
  html.menu-arena .menu ol small{font-size:10px;opacity:.6}
  html.menu-arena .menu ol span{text-align:left}
  /* «Próximamente» se solapaba con el nombre: aquí va en su columna, al final */
  html.menu-arena .menu ol em{grid-column:3;font-size:8.5px;letter-spacing:.14em;white-space:nowrap}
  /* un filete finísimo entre entradas: ayuda a separarlas sin ensuciar */
  html.menu-arena .menu li+li a{border-top:1px solid rgba(21,19,17,.07)}
  /* el pie, en una sola línea, con sus dos enlaces también cómodos de tocar */
  html.menu-arena .menu__pie{justify-content:center;gap:.9em;padding-top:16px;font-size:10.5px}
  html.menu-arena .menu__pie a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
  /* «Volver a la célula» se partía en dos líneas y caía justo encima del botón de
     Reiniciar, que vive abajo a la izquierda. Se sube por encima de esa esquina y se
     queda en una sola línea.                                                        */
  html.menu-arena body.menu-principal .volver{bottom:clamp(54px,8.5vh,76px);font-size:11px;
    white-space:nowrap;padding:12px 16px}
}

/* ── LAS SECCIONES EN MÓVIL ───────────────────────────────────────────────
   Dos familias, y las dos estaban pensadas para una pantalla apaisada:
   · las de FOTO (Miguel · Qué consigues · Empezar) reparten la pantalla en
     dos —texto a la izquierda, foto a la derecha—. En 375 px eso dejaba la
     foto en una franja de 158 px y el texto metido encima de ella.
   · las de CÉLULA reservan el 46 % de la izquierda para el dibujo de arena,
     así que el texto se quedaba con media pantalla: ilegible.
   Aquí las dos pasan a UNA columna a ancho completo. La foto sigue a sangre
   y en absoluto, como pidió Eloy; lo que la hace legible es el mismo velo de
   desenfoque del escritorio, extendido a todo el ancho porque ahora el texto
   también lo ocupa.                                                        */
@media (max-aspect-ratio:1/1) and (hover:none){
  /* la columna pasa a ser la pantalla entera, con un margen cómodo */
  body.miguel,body.consigues,body.empezar{--mig-x:22px;--mig-col:calc(100vw - 44px)}
  /* la foto, a sangre de verdad: de borde a borde. En el escritorio nace en el 50 % y se
     funde hacia la izquierda con una máscara; aquí esa máscara sobra.                */
  body.miguel .seccion__lienzo,body.consigues .seccion__lienzo,body.empezar .seccion__lienzo{
    left:0;-webkit-mask-image:none;mask-image:none}
  /* el velo, a toda la pantalla y un punto más presente que en el escritorio: allí el
     texto va en su columna y la foto queda libre; aquí el texto la cruza entera.     */
  html.vela-1 body.miguel.miguel .seccion::before,
  html.vela-1 body.consigues.consigues .seccion::before,
  html.vela-1 body.empezar.empezar .seccion::before{
    background:rgba(253,253,253,.16);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    -webkit-mask-image:none;mask-image:none}
  /* EL LIENZO DEL PINCEL, FUERA. Desde el 14 sep la tinta no se pinta con el dedo, pero su
     lienzo seguía siendo hijo de la sección y, en `display:block`, ocupaba su altura: eran
     122 px de empujón que bajaban la etiqueta y el titular lejos de la foto.            */
  .seccion__pincel{display:none}
  /* la etiqueta escrita en vertical al margen (tategaki) se come 20 px de ancho y en el
     móvil no hay de dónde sacarlos: se tumba y se pone bajo la cabecera.             */
  body.miguel .seccion__etiqueta,body.consigues .seccion__etiqueta,body.empezar .seccion__etiqueta{
    position:static;writing-mode:horizontal-tb;translate:none;font-size:9.5px;letter-spacing:.3em;
    gap:.9em;margin:0 0 clamp(14px,3vh,26px);opacity:.85}
  /* el titular baja un punto para que quepan tres palabras por línea sin partirse */
  body.miguel .seccion__titular,body.consigues .seccion__titular,body.empezar .seccion__titular{
    font-size:clamp(38px,13vw,54px);letter-spacing:-.035em;
    margin-top:calc(100vh - clamp(300px,46vh,420px))}

  /* LAS DE CÉLULA: una columna, el texto a ancho completo. El dibujo de arena lo coloca
     arena.js —aquí solo se le quita la reserva del 46 % que le guardaba el grid.      */
  html.seccion-2 body.en-seccion:not(.miguel):not(.consigues):not(.empezar) .seccion{
    grid-template-columns:1fr;padding-left:22px;padding-right:22px}
  /* y los hijos, a la única columna que hay. Con poner `1fr` no bastaba: algunas reglas
     mandan piezas a la columna 2, y el navegador se la inventa aunque no esté declarada
     —salían dos columnas de 7 px y 300 px—. Es lo mismo que hace la sección de Miguel. */
  body.en-seccion:not(.miguel):not(.consigues):not(.empezar) .seccion>*{grid-column:1}
  /* nada se encoge por debajo de su contenido si no se le dice: `min-width:auto` es el
     valor por defecto dentro de un grid y es lo que hacía desbordar la galería.      */
  body.en-seccion .seccion__cuerpo{width:100%;min-width:0;justify-self:stretch}
  body.en-seccion .seccion__cuerpo>*{min-width:0;max-width:100%}
  .b--galeria,.hueco,.b--lista,.b--pilares,.b--pasos{min-width:0}
  figcaption{overflow-wrap:break-word}
  html.seccion-2 body:not(.con-retrato):not(.miguel):not(.consigues):not(.empezar) .seccion__cuerpo{max-width:none}
  body:not(.miguel):not(.consigues):not(.empezar) .seccion__titular{font-size:clamp(30px,9vw,40px)}
  /* el texto se lee sobre el dibujo de arena: un velo finísimo, como el de las fotos */
  html.seccion-2 body.en-seccion:not(.miguel):not(.consigues):not(.empezar):not(.mmm) .seccion::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:rgba(253,253,253,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  /* el texto, por encima del velo. Se excluyen el «Volver» y la etiqueta: van en `fixed`
     —anclados a la pantalla— y ponerlos en `relative` los mandaba a navegar con el scroll,
     fuera de la vista en cuanto bajabas un poco.                                       */
  html.seccion-2 body.en-seccion:not(.miguel):not(.consigues):not(.empezar) .seccion>*:not(.seccion__volver):not(.seccion__etiqueta){position:relative;z-index:2}
  html.seccion-2 body.en-seccion:not(.miguel):not(.consigues):not(.empezar) .seccion__volver{z-index:6}
  /* el «Volver» de las secciones, cómodo de tocar y fuera del camino de Reiniciar. Va fijo,
     así que el texto le pasa por detrás: un poco de papel difuminado lo despega del fondo. */
  .seccion__volver{min-height:44px;font-size:11px;bottom:clamp(52px,8vh,72px);z-index:8}
  body.en-seccion .seccion__volver::after{content:"";position:absolute;inset:-14px -26px;z-index:-1;
    background:radial-gradient(ellipse at center,var(--fondo) 42%,rgba(253,253,253,0) 78%)}
  /* la galería, a una columna: dos en 375 px deja cada hueco en 160 px */
  .b--galeria{grid-template-columns:1fr;gap:10px}
  .hueco--alta,.hueco--ancha,.hueco--cuadro{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  /* las preguntas: más aire para el dedo */
  .faq summary{padding:.95em 0;min-height:44px}
  /* el portal de «Empezar»: el botón, ancho y cómodo. El `width:100%` por sí solo no hacía
     nada: su contenedor es un flex que se encoge al contenido y medía 136 px.          */
  body.empezar .portal__puertas,body.empezar .portal__acceso{width:100%}
  body.empezar .portal__b{width:100%;justify-content:center;padding:18px 24px}
  body.empezar .b--portal{max-width:none}
  /* LOS RÓTULOS GIGANTES. Van en `cqw` —por ciento del ancho de la columna—, que en el
     escritorio es justo lo que hace falta; en 300 px de columna, una palabra larga como
     «PROPÓSITO» se sale por el lado. Aquí se acotan y se les deja partir si no hay más.  */
  .b--grande strong{font-size:clamp(28px,10.5cqw,44px);overflow-wrap:break-word;hyphens:auto}
  .b--palabras strong{font-size:clamp(26px,9cqw,40px);overflow-wrap:break-word}
  .b--declara,.b--h,.b--cierre,.b--lema{overflow-wrap:break-word}

  /* TEXTOS DE M.M.M. en móvil. El campo de texto lleva un relleno lateral de 186 px que en
     el escritorio reserva el sitio de la escultura y de la biblioteca; en 375 px empujaba
     los bloques hasta los 417 y la sección se iba de lado. Aquí el texto va centrado y la
     pieza queda detrás, que es lo único que cabe.                                      */
  body.mmm .mmm__campo{padding-left:22px!important;padding-right:22px!important;justify-items:center}
  body.mmm .mmm__bloque{width:100%;max-width:34ch;min-width:0}
  /* la biblioteca lateral: `html.libros-7 .mmm__libros{display:grid}` pesa más que la regla
     de móvil que ya intentaba esconderla (`.mmm__libros{display:none}` a 900 px), así que
     seguía saliendo. Con el doble de clase se va de verdad.                            */
  body.mmm .mmm__libros.mmm__libros{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   126 · MÓVIL, SEGUNDA PASADA (Eloy, 14 sep)
   ──────────────────────────────────────────────────────────────────────────
   Tres cosas suyas: el oro salía chillón (era densidad de granos, se arregla
   en arena.js), los textos eran demasiado grandes, y el dibujo de arena se
   superponía a la lista del menú. Aquí van los tamaños y la sección que se
   enciende con su figura.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio:1/1) and (hover:none){
  /* LA SECCIÓN QUE LLEVA LA FIGURA DE ARRIBA. Cada 7 s el dibujo toma la forma de una
     sección; su entrada se enciende para que se vea que son lo mismo. Nada de fondos ni
     cajas: el número pasa a oro, la palabra a tinta y el filete de la izquierda la señala. */
  html.menu-arena .menu ol a{position:relative;transition:color .6s var(--paso)}
  html.menu-arena .menu ol a.auto{color:var(--tinta)}
  html.menu-arena .menu ol a.auto small{color:var(--acento);opacity:1}
  html.menu-arena .menu ol a.auto::before{content:"";position:absolute;left:-10px;top:50%;
    width:3px;height:18px;translate:0 -50%;border-radius:2px;background:var(--acento);
    animation:menuAutoEntra .6s var(--paso) both}
  @keyframes menuAutoEntra{from{height:0;opacity:0}to{height:18px;opacity:1}}

  /* LOS TEXTOS DE LAS SECCIONES, más pequeños y en proporción con la pantalla (Eloy:
     «demasiado grandes; más pequeñitos y más armónicos»). La escala baja de golpe pero
     mantiene el salto entre niveles, que es lo que hace que se lea como jerarquía.     */
  body.miguel .seccion__titular,body.consigues .seccion__titular,body.empezar .seccion__titular{
    font-size:clamp(30px,9.5vw,40px);letter-spacing:-.03em}
  body:not(.miguel):not(.consigues):not(.empezar) .seccion__titular{font-size:clamp(24px,7vw,31px)}
  .b--lema{font-size:clamp(14px,3.4cqw,17px);max-width:30ch}
  body.miguel .b--lema,body.consigues .b--lema{font-size:clamp(14px,3.6cqw,18px);max-width:28ch}
  .b--declara{font-size:clamp(17px,4.6cqw,23px);line-height:1.25;max-width:26ch}
  body.miguel .b--declara,body.consigues .b--declara{font-size:clamp(17px,4.6cqw,23px);max-width:24ch}
  .b--grande strong{font-size:clamp(21px,7cqw,30px);letter-spacing:-.03em}
  .b--grande small{font-size:9px;letter-spacing:.28em}
  .b--h{font-size:clamp(16px,4.2cqw,20px);max-width:26ch}
  .b--palabras strong{font-size:clamp(19px,6cqw,26px)}
  .b--palabras em{font-size:9px}
  .b--palabras small{font-size:9px}
  .b--cierre{font-size:clamp(16px,4.2cqw,20px);max-width:26ch}
  body.miguel .b--cierre,body.consigues .b--cierre{font-size:clamp(16px,4.2cqw,20px)}
  .b--p{font-size:15px;line-height:1.6}
  body.miguel .b--p,body.consigues .b--p{font-size:clamp(15px,4cqw,19px);line-height:1.5;max-width:26ch}
  body.miguel .b--p+.b--p,body.consigues .b--p+.b--p{font-size:14px;line-height:1.65;max-width:32ch}
  .b--sub{font-size:9.5px;letter-spacing:.26em}
  body.miguel .b--sub,body.consigues .b--sub{font-size:9.5px;letter-spacing:.26em}
  .b--lista span{font-size:14px}
  .b--lista em{font-size:9.5px}
  .b--pilares strong{font-size:clamp(15px,4.2cqw,18px)}
  .b--pilares p{font-size:13.5px;line-height:1.55}
  .b--pilares em{font-size:9.5px}
  .b--pendiente{font-size:12px;line-height:1.5}
  .seccion__etiqueta{font-size:9px}
  .seccion__cta{font-size:10.5px;letter-spacing:.18em}
  .faq summary{font-size:14px}
  .faq>div{font-size:13px}
  .portal__resumen{font-size:14px}
  .portal__cuando strong{font-size:16px}
  .portal__b{font-size:11px}
  .hueco figcaption{font-size:10px}
}

/* ══════════════════════════════════════════════════════════════════════════
   127 · LAS FOTOS EN EL MÓVIL · tres maneras (Eloy, 14 sep)
   ──────────────────────────────────────────────────────────────────────────
   «Las fotos, por ejemplo la de Miguel, cuando le das sale cortada; hay que
   ponerlo de otra manera. Hazme tres propuestas, solo en versión móvil.»
   El porqué, medido: las tres fotos son apaisadas —Miguel 2560×1440 (1,78:1),
   las otras dos 2400×1601 (1,50:1)— y la pantalla del móvil es 0,46:1. Al
   llenarla a sangre, el recorte se queda con el 26 % del ancho de la foto.
   Se comparan con ?fotomovil=1|2|3 · puesta la 1.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio:1/1) and (hover:none){
  /* la proporción de cada foto, para poder reservarle el sitio exacto */
  body.miguel{--foto-ar:1.78}
  body.consigues,body.empezar{--foto-ar:1.5}

  /* ── 1 · LA LÁMINA ────────────────────────────────────────────────
     La foto entera, con su proporción, apoyada arriba. No se corta ni un
     dedo. Debajo, el papel y el texto. Es lo más editorial y lo más fiel
     a la foto; a cambio, la imagen manda menos que a sangre.          */
  /* La captura que mandó Eloy el 14 sep: una banda arriba con la cara ya encuadrada —no la
     escena entera en pequeño— y el titular pegado justo debajo. Así la foto pesa, se le ve
     la cara grande, y no se come la pantalla. El borde de abajo se funde con el papel.   */
  html.fotomovil-1 body.miguel .seccion__lienzo,
  html.fotomovil-1 body.consigues .seccion__lienzo,
  html.fotomovil-1 body.empezar .seccion__lienzo{
    top:0;bottom:auto;height:clamp(180px,26vh,240px);
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)}
  html.fotomovil-1 body.miguel .seccion__retrato{object-fit:cover;object-position:62% 26%}
  html.fotomovil-1 body.consigues .seccion__retrato{object-fit:cover;object-position:56% 40%}
  html.fotomovil-1 body.empezar .seccion__retrato{object-fit:cover;object-position:58% 42%}
  /* El sitio de la foto se lo reserva la ETIQUETA, que es la primera pieza del texto. Si el
     margen se le pone al titular, se suma al alto de la etiqueta —que ya va antes— y queda un
     hueco de 181 px; y peor: la etiqueta se subía encima de la foto.                      */
  html.fotomovil-1 body.miguel .seccion__etiqueta,
  html.fotomovil-1 body.consigues .seccion__etiqueta,
  html.fotomovil-1 body.empezar .seccion__etiqueta{
    margin-top:calc(clamp(180px,26vh,240px) - 22px);margin-bottom:4px}
  html.fotomovil-1 body.miguel .seccion__titular,
  html.fotomovil-1 body.consigues .seccion__titular,
  html.fotomovil-1 body.empezar .seccion__titular{margin-top:0}
  /* AQUÍ NO VA VELO. El velo de desenfoque existe para que el texto se lea ENCIMA de la
     foto; en esta manera el texto va debajo, sobre papel, así que lo único que hacía era
     emborronar la foto —salía Miguel desenfocado, que es justo lo contrario de enseñarla
     entera—. Se apaga.                                                                 */
  html.fotomovil-1.vela-1 body.miguel.miguel .seccion::before,
  html.fotomovil-1.vela-1 body.consigues.consigues .seccion::before,
  html.fotomovil-1.vela-1 body.empezar.empezar .seccion::before{
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none}

  /* ── 2 · EL RETRATO ───────────────────────────────────────────────
     A sangre y llenando la pantalla, como hasta ahora —que es lo que le
     gusta—, pero con el encuadre puesto sobre la figura en vez de en el
     centro geométrico, y con el texto entrando por debajo del primer
     pantallazo. Se sigue cortando, pero por donde no hay nada.        */
  html.fotomovil-2 body.miguel .seccion__retrato{object-position:64% 30%}
  html.fotomovil-2 body.consigues .seccion__retrato{object-position:58% 42%}
  html.fotomovil-2 body.empezar .seccion__retrato{object-position:60% 44%}
  html.fotomovil-2 body.miguel .seccion__titular,
  html.fotomovil-2 body.consigues .seccion__titular,
  html.fotomovil-2 body.empezar .seccion__titular{
    margin-top:calc(100vh - clamp(190px,28vh,260px))}
  /* EL VELO, SOLO DONDE VA EL TEXTO. A pantalla completa y con 10 px de desenfoque dejaba a
     Miguel en una mancha borrosa: se cargaba la foto entera, que es lo contrario de lo que
     se busca. Ahora sube desde el pie, donde de verdad hay letra encima, y se disuelve
     antes de llegar a la cara.                                                          */
  html.fotomovil-2.vela-1 body.miguel.miguel .seccion::before,
  html.fotomovil-2.vela-1 body.consigues.consigues .seccion::before,
  html.fotomovil-2.vela-1 body.empezar.empezar .seccion::before{
    background:linear-gradient(to top,rgba(253,253,253,.82) 0 18%,rgba(253,253,253,.5) 42%,rgba(253,253,253,0) 68%);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    -webkit-mask-image:linear-gradient(to top,#000 0 34%,transparent 70%);
    mask-image:linear-gradient(to top,#000 0 34%,transparent 70%)}

  /* ── 3 · LA CINTA ─────────────────────────────────────────────────
     Un término medio: la foto a sangre por los lados pero solo media
     pantalla de alto, fija arriba, y el texto pasando por debajo sobre
     papel. Mantiene la fuerza de la imagen sin comerse la pantalla.   */
  html.fotomovil-3 body.miguel .seccion__lienzo,
  html.fotomovil-3 body.consigues .seccion__lienzo,
  html.fotomovil-3 body.empezar .seccion__lienzo{
    top:0;bottom:auto;height:52vh;
    -webkit-mask-image:linear-gradient(to bottom,#000 76%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 76%,transparent 100%)}
  html.fotomovil-3 body.miguel .seccion__retrato{object-fit:cover;object-position:64% 28%}
  html.fotomovil-3 body.consigues .seccion__retrato{object-fit:cover;object-position:56% 40%}
  html.fotomovil-3 body.empezar .seccion__retrato{object-fit:cover;object-position:58% 42%}
  html.fotomovil-3 body.miguel .seccion__etiqueta,
  html.fotomovil-3 body.consigues .seccion__etiqueta,
  html.fotomovil-3 body.empezar .seccion__etiqueta{margin-top:calc(52vh + clamp(20px,4vh,34px))}
  html.fotomovil-3 body.miguel .seccion__titular,
  html.fotomovil-3 body.consigues .seccion__titular,
  html.fotomovil-3 body.empezar .seccion__titular{margin-top:0}
  /* lo mismo que en la lámina: el texto pasa por debajo, no hay nada que velar */
  html.fotomovil-3.vela-1 body.miguel.miguel .seccion::before,
  html.fotomovil-3.vela-1 body.consigues.consigues .seccion::before,
  html.fotomovil-3.vela-1 body.empezar.empezar .seccion::before{
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ── EL RITMO VERTICAL, MÁS CEÑIDO (la captura de Eloy, 14 sep) ───────────
   En la pantalla que mandó, el texto va compacto: el titular pegado a la
   foto, la frase debajo, y de ahí al primer epígrafe sin un desierto en
   medio. Los aires de las secciones están calculados en `vh` para el
   escritorio, donde sobra altura; en un móvil se convierten en huecos de
   150 px entre párrafos. Aquí se recortan a la mitad larga.               */
@media (max-aspect-ratio:1/1) and (hover:none){
  body.miguel .b--p,body.consigues .b--p{margin-top:clamp(16px,2.4vh,24px)}
  body.miguel .b--sub,body.consigues .b--sub{margin-top:clamp(26px,4vh,40px)}
  body.miguel .b--declara,body.consigues .b--declara{margin-top:clamp(26px,4vh,40px)}
  body.miguel .b--grande,body.consigues .b--grande{margin:clamp(30px,4.5vh,46px) 0 clamp(12px,2vh,18px)}
  body.miguel .b--h,body.consigues .b--h{margin-top:clamp(28px,4.2vh,42px)}
  body.miguel .b--palabras,body.consigues .b--palabras{margin-top:clamp(26px,4vh,40px)}
  body.miguel .b--cierre,body.consigues .b--cierre{margin-top:clamp(28px,4.2vh,42px)}
  body.miguel .b--pilares,body.consigues .b--pilares{margin-top:clamp(20px,3vh,30px)}
  body.miguel .b--lista,body.consigues .b--lista{margin-top:clamp(20px,3vh,30px)}
  body.miguel .b--pendiente,body.consigues .b--pendiente{margin-top:clamp(18px,2.6vh,26px)}
  body.miguel .seccion__cta,body.consigues .seccion__cta{margin:clamp(34px,5vh,50px) 0 clamp(60px,10vh,110px)}
  body.miguel .seccion__cuerpo,body.consigues .seccion__cuerpo{margin-top:clamp(14px,2.2vh,22px)}
  /* y en las secciones de célula, lo mismo */
  .b--declara,.b--h,.b--cierre{margin-top:clamp(26px,4vh,40px)}
  .b--grande{margin:clamp(30px,4.5vh,46px) 0 clamp(12px,2vh,18px)}
  .b--palabras{margin-top:clamp(26px,4vh,40px)}
  .seccion__cta{margin-top:clamp(30px,4.5vh,44px)}
}

/* ── EL TEXTO, PEGADO A LA FOTO ───────────────────────────────────────────
   La sección lleva `padding-top:15vh` —122 px en un móvil— para despegar el
   texto de la cabecera cuando no hay foto. Con la lámina arriba eso se suma
   al hueco que ya reserva la etiqueta y el titular acababa a 115 px de la
   foto, con un desierto en medio. En las dos maneras que ponen la foto
   arriba, ese relleno sobra: lo sustituye la propia foto.                  */
@media (max-aspect-ratio:1/1) and (hover:none){
  html.seccion-2.fotomovil-1 body.en-seccion.miguel .seccion,
  html.seccion-2.fotomovil-1 body.en-seccion.consigues .seccion,
  html.seccion-2.fotomovil-1 body.en-seccion.empezar .seccion,
  html.seccion-2.fotomovil-3 body.en-seccion.miguel .seccion,
  html.seccion-2.fotomovil-3 body.en-seccion.consigues .seccion,
  html.seccion-2.fotomovil-3 body.en-seccion.empezar .seccion{padding-top:0}
}