/* piezas.css — las tres piezas del 13-sept-2026, verificadas antes como propuestas en demos-web-2026/. Desde que Jordi
   vio la web subida (13-sept) abren la página, una detrás de otra:
   · la portada «Escáner de la finca», que sustituye al acto I;
   · la sección «El anillo que lo cubre todo»;
   · la sección «Mientras duermes»;
   · la sección «La ciudad», que sustituye al acto III. Los actos II y IV se quitaron: ya no queda película.
   Cada regla cuelga de la raíz de su pieza (.portada, .cobertura, .noche): la película y extras ya usan .titulo,
   .sub, .foto, .hora o .centro, y sin el prefijo se pisarían. Sin clases de fase se ve el estado final: es lo que
   ve quien no tiene JavaScript o pide movimiento reducido. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-rebote:cubic-bezier(.34,1.56,.64,1)}

/* ── botones de las piezas ── */
.boton{display:inline-flex;align-items:center;gap:.6em;font:600 .95rem/1 var(--body);text-decoration:none;
  color:#08130a;background:var(--verde);padding:1em 1.5em;border-radius:999px;border:1px solid transparent;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease}
.boton.fantasma{color:var(--blanco);background:rgba(10,14,20,.35);border-color:#ffffff4d}
.boton:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .boton:hover{background:#7fc56a}
  .boton.fantasma:hover{background:rgba(10,14,20,.55);border-color:var(--verde)}
}
.boton:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* ── De paso (13-sept): el `summary::before` de las preguntas frecuentes (extras.css) ponía una «+» delante de
   «Acceso» en el menú de arriba, y una «−» al abrirlo. ── */
.nav .acceso summary::before{content:none}

/* ═════════════ PORTADA · ESCÁNER DE LA FINCA ═════════════ */
.portada{position:relative;min-height:100svh;display:grid;grid-template-columns:42fr 58fr;overflow:hidden;isolation:isolate}
.portada .escena{position:relative;grid-column:2;grid-row:1;min-height:100svh;overflow:hidden}
.portada .foto,.portada .gemelo{position:absolute;inset:-8px}
/* La .foto de la película escala con el scroll: aquí solo la mueve el ratón. */
.portada .foto{will-change:transform;transform:none}
.portada .tinte,.portada .capa{position:absolute;inset:0;pointer-events:none}
.portada .foto img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.portada .tinte{background:linear-gradient(90deg,var(--noche) 0%,rgba(10,14,20,0) 24%),linear-gradient(180deg,rgba(10,14,20,.45),rgba(10,14,20,.12) 40%,rgba(10,14,20,.7))}
.portada .gemelo{width:calc(100% + 16px);height:calc(100% + 16px);pointer-events:none}
.js .portada .gemelo{clip-path:inset(0 0 100% 0)}
.portada .gemelo .trazo{fill:none;stroke:var(--verde);stroke-width:1.3;vector-effect:non-scaling-stroke;opacity:.85}
.portada .gemelo .fino{stroke-dasharray:6 8;opacity:.45}
.portada .gemelo .rayos{stroke:var(--azul);opacity:.6}
.portada .linea{position:absolute;left:0;right:0;top:0;height:2px;background:var(--verde);opacity:0;pointer-events:none;
  box-shadow:0 0 22px 4px rgba(111,181,90,.45);transition:opacity 200ms ease}
.portada .linea::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:110px;background:linear-gradient(0deg,rgba(111,181,90,.18),transparent)}
.portada .etq{position:absolute;left:0;top:0;--c:var(--azul)}
.portada .etq[data-color="verde"]{--c:var(--verde)}
.portada .etq[data-color="ambar"]{--c:var(--ambar)}
.portada .etq.oculta{display:none}
.portada .etq .punto{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--c);opacity:0;transform:scale(.8);
  box-shadow:0 0 0 4px rgba(10,14,20,.55),0 0 0 5px var(--c);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-rebote),background-color 200ms ease,box-shadow 200ms ease}
.portada .etq.vista .punto{opacity:1;transform:none}
.portada .etq .caja{position:absolute;left:18px;bottom:14px;width:max-content;max-width:230px;padding:10px 14px 10px 12px;border-radius:12px;
  background:rgba(10,14,20,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0;transform:translateY(6px) scale(.95);transform-origin:left bottom;
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-rebote),border-color 200ms ease}
.portada .etq.izq .caja{left:auto;right:18px;transform-origin:right bottom}
.portada .etq.abajo .caja{bottom:auto;top:14px;transform-origin:left top}
.portada .etq.izq.abajo .caja{transform-origin:right top}
.portada .etq.vista .caja{opacity:1;transform:none}
.portada .etq b{display:block;font:600 .9rem/1.25 var(--body)}
.portada .etq .promesa{display:block;font-size:.78rem;line-height:1.35;color:#ffffffb8;margin-top:2px}
.portada .etq .st{display:flex;align-items:center;gap:7px;margin-top:7px;font:.7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c);transition:color 200ms ease}
.portada .traza{display:none;gap:3px}
.portada .etq[data-ruta="metodo"] .traza{display:inline-flex}
.portada .traza i{width:5px;height:5px;border-radius:50%;background:#ffffff2e;transition:background-color 200ms ease}
.portada .traza i.on:nth-child(1){background:var(--ambar)}
.portada .traza i.on:nth-child(2){background:var(--azul)}
.portada .traza i.on:nth-child(3){background:var(--verde)}
/* Escena estrecha (portátiles de 1366 y 1280): nombre y estado, sin la frase, para que quepan las cinco. */
.portada.compacta .etq .promesa{display:none}
.portada.compacta .etq .caja{max-width:190px;padding:8px 12px 8px 10px}
.portada .contenido{grid-column:1;grid-row:1;align-self:center;position:relative;z-index:5;padding:clamp(88px,12vh,140px) clamp(24px,4vw,64px) clamp(110px,15vh,160px)}
.portada .titulo{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin:22px 0 20px;font-size:clamp(2rem,4vw,4rem);text-shadow:none}
.portada .titulo .nw{white-space:nowrap}
.portada .contenido .meta{letter-spacing:.26em}
.portada .contenido .meta::after{display:none}
.portada .titulo .fila{display:block}
.portada .titulo .v{color:var(--verde)}
.portada .titulo .p{display:inline-block;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);transition-delay:calc(var(--i) * 60ms)}
.js .portada .titulo .p{opacity:0;transform:translateY(24px)}
.portada .sub{margin:0;max-width:30em;font-size:clamp(.98rem,1.25vw,1.1rem);line-height:1.6;color:#ffffffd6;text-shadow:none}
.portada .botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.portada [data-entra]{transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out),visibility 0s linear 420ms}
.js .portada [data-entra]{opacity:0;visibility:hidden;transform:translateY(12px)}
.portada.l1 .titulo .fila:first-child .p,.portada.l2 .titulo .fila.v .p{opacity:1;transform:none}
.portada.resto-in [data-entra]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.portada .estado{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-wrap:wrap;gap:8px clamp(16px,3vw,40px);align-items:center;
  padding:15px clamp(24px,4vw,64px);font:.68rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#ffffffb8;
  border-top:1px solid #ffffff17;background:rgba(10,14,20,.72)}
.portada.resto-in .botones[data-entra]{transition-delay:120ms,120ms,0s}
.portada.resto-in .estado[data-entra]{transition-delay:260ms,260ms,0s}
.portada .estado .vivo{color:var(--verde);margin-left:auto}
.portada .estado .vivo::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--verde);margin-right:9px;vertical-align:1px;animation:pulso 1.6s ease-in-out infinite}
@keyframes pulso{50%{opacity:.3}}
.portada .solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .portada{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .portada .escena{grid-column:1;grid-row:1;min-height:0;height:50svh}
  .portada .tinte{background:linear-gradient(180deg,rgba(10,14,20,.4),rgba(10,14,20,.08) 45%,var(--noche) 100%)}
  .portada .contenido{grid-column:1;grid-row:2;align-self:start;padding:8px 20px 28px}
  .portada .estado{position:relative;grid-row:3;padding:14px 20px}
  .portada .estado .vivo{margin-left:0}
  .portada .etq .caja{max-width:140px;padding:5px 9px;border-radius:8px}
  .portada .etq b{font-size:.78rem}
  .portada .etq .promesa,.portada .etq .st{display:none}
  .portada .contenido .meta{font-size:.64rem;letter-spacing:.16em}
  .portada .contenido .meta::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .portada .titulo .p,.portada [data-entra],.portada .etq .caja,.portada .etq .punto{transform:none!important;transition:opacity 200ms ease}
  .portada .linea{display:none}
  .portada .estado .vivo::before{animation:none}
}

/* ═════════════ SECCIÓN · EL ANILLO QUE LO CUBRE TODO ═════════════ */
.cobertura{position:relative;min-height:100svh;display:grid;grid-template-columns:64fr 36fr;align-items:center;gap:clamp(16px,3vw,48px);
  padding:clamp(32px,6vh,72px) max(clamp(20px,4vw,56px),calc((100% - 1320px) / 2));overflow:hidden}
.cobertura::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 70% at 32% 50%,rgba(111,181,90,.07),transparent 70%)}
.cobertura .anillo{position:relative;width:100%;height:min(82svh,760px)}
.cobertura .aro{position:absolute;left:50%;top:50%;width:var(--D,420px);height:var(--D,420px);transform:translate(-50%,-50%);
  transition:opacity 800ms var(--ease-out),transform 800ms var(--ease-out)}
.js .cobertura .aro{opacity:0;transform:translate(-50%,-50%) scale(.96)}
.cobertura.visible .aro{opacity:1;transform:translate(-50%,-50%)}
.cobertura .aro svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cobertura .gajo{fill:var(--verde-d);transition:fill 300ms ease,stroke 300ms ease}
.cobertura .gajo.hueco{fill:none;stroke:var(--verde-d);stroke-width:57;stroke-linejoin:miter}
.cobertura .gajo.encendido{fill:var(--verde)}
.cobertura .gajo.hueco.encendido{fill:none;stroke:var(--verde)}
.cobertura .gajo.parpadeo{animation:parpadeo 320ms steps(2) 2}
@keyframes parpadeo{50%{stroke:var(--blanco)}}
.cobertura .relleno{fill:var(--verde);opacity:0;transition:opacity 420ms var(--ease-out)}
.cobertura.climax .relleno{opacity:1}
/* En reposo los huecos quedan quietos: el logo exacto (decisión de Jordi, 13-sept). */
.cobertura.reposo .relleno{opacity:0;transition:opacity 700ms var(--ease-in-out)}
.cobertura .radar{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity 300ms ease;
  background:conic-gradient(from -44deg,transparent 0deg,rgba(111,181,90,.08) 20deg,rgba(111,181,90,.34) 43deg,rgba(247,249,251,.9) 44deg,transparent 44.6deg);
  -webkit-mask:radial-gradient(closest-side,transparent 64%,#000 65%,#000 99%,transparent 100%);
  mask:radial-gradient(closest-side,transparent 64%,#000 65%,#000 99%,transparent 100%)}
.cobertura .seight{position:absolute;left:50%;top:50%;width:46%;transform:translate(-50%,-50%);pointer-events:none}
.cobertura .seight img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
/* La luz nace en la linterna (29 %, 57 % del render) y apunta arriba a la izquierda: hacia los tres huecos. */
.cobertura .linterna{position:absolute;left:29%;top:57%;width:360%;height:360%;transform:translate(-50%,-50%) rotate(0deg);transform-origin:50% 50%;pointer-events:none;
  background:conic-gradient(from 262deg at 50% 50%,transparent 0deg,rgba(255,214,140,.14) 10deg,rgba(255,214,140,.32) 28deg,rgba(255,214,140,.12) 46deg,transparent 58deg);
  -webkit-mask:radial-gradient(closest-side,#000 0%,#000 48%,transparent 100%);mask:radial-gradient(closest-side,#000 0%,#000 48%,transparent 100%);
  mix-blend-mode:screen;opacity:0;transition:opacity 600ms ease}
.cobertura.visible .linterna{opacity:1;animation:barre 5s var(--ease-in-out) infinite alternate}
@keyframes barre{from{transform:translate(-50%,-50%) rotate(-9deg)}to{transform:translate(-50%,-50%) rotate(9deg)}}
.cobertura .rot{position:absolute;left:0;top:0;width:170px;opacity:.28;transition:opacity 260ms var(--ease-out)}
.cobertura .rot b{display:block;font:600 .86rem/1.25 var(--body)}
.cobertura .rot span{display:block;font-size:.74rem;line-height:1.35;color:#ffffffa8;margin-top:2px}
/* a-der, a-izq y a-cen, no derecha/izquierda/centro: .centro ya es de la película y le pondría padding. */
.cobertura .rot.a-der{text-align:left}
.cobertura .rot.a-izq{text-align:right}
.cobertura .rot.a-cen{text-align:center}
.cobertura .rot.on{opacity:1}
.cobertura .rot.on b{color:var(--verde)}
.cobertura .texto{position:relative;z-index:2}
.cobertura .titulo2{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin:22px 0 18px;font-size:clamp(2rem,3.6vw,3.6rem);text-wrap:balance}
/* El titular y el botón se leen desde el primer momento; el clímax solo enciende «nada» en verde. */
.cobertura .titulo2 .v{color:var(--verde);transition:color 600ms ease}
.js .cobertura:not(.climax) .titulo2 .v{color:var(--blanco)}
.cobertura .sub2{margin:0;max-width:30em;line-height:1.6;color:#ffffffd6}
.cobertura .contador{display:flex;align-items:baseline;gap:12px;margin-top:28px;font:.72rem/1.2 var(--mono);color:#ffffffb8;letter-spacing:.14em;text-transform:uppercase}
.cobertura .contador b{font:400 clamp(2.2rem,3.4vw,3rem)/1 var(--display);letter-spacing:0;color:var(--blanco)}
.cobertura .contador .de{color:#ffffff59}
.js .cobertura .contador{opacity:0;transition:opacity 300ms var(--ease-out)}
.cobertura.contando .contador{opacity:1}
.cobertura .cta2{margin-top:26px}
.cobertura .lista{display:none;list-style:none;margin:24px 0 0;padding:0;border-top:1px solid #ffffff14}
.cobertura .lista li{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff14;opacity:.35;transition:opacity 260ms var(--ease-out)}
.cobertura .lista li.on{opacity:1}
.cobertura .lista b{font-weight:600;font-size:.92rem}
.cobertura .lista span{font-size:.8rem;color:#ffffffa8;text-align:right}
@media (max-width:900px){
  .cobertura{grid-template-columns:1fr;align-items:start}
  .cobertura .anillo{height:auto;aspect-ratio:1/1;max-width:420px;margin:0 auto}
  .cobertura .rot{display:none}
  .cobertura .lista{display:block}
}
/* En una línea en el móvil, como los rótulos de la portada y de la noche: con las rayas se partía en «toda la / finca». */
@media (max-width:560px){
  .cobertura .texto .meta{font-size:.64rem;letter-spacing:.16em}
  .cobertura .texto .meta::before,.cobertura .texto .meta::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cobertura .aro{transform:translate(-50%,-50%)!important;transition:opacity 200ms ease}
  .cobertura .titulo2 .v{transition:none}
  .cobertura .radar{display:none}
  .cobertura.visible .linterna{animation:none;transform:translate(-50%,-50%)}
}

/* ═════════════ SECCIÓN · MIENTRAS DUERMES ═════════════ */
.noche{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:46fr 54fr;align-items:center;
  gap:clamp(24px,4vw,64px);padding:clamp(40px,8vh,96px) max(clamp(20px,4vw,56px),calc((100% - 1320px) / 2));overflow:hidden}
.noche .alba{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 70% at 76% 42%,rgba(243,165,42,.11),transparent 70%)}
.noche .texto{position:relative;z-index:2;max-width:680px}
.noche .titulo3{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin:22px 0 18px;font-size:clamp(2rem,3.1vw,3.4rem);text-wrap:balance}
.noche .titulo3 .v{color:var(--verde);transition:color 600ms ease}
.noche .sub3{margin:0;max-width:34em;line-height:1.6;color:#ffffffd6}
.noche .turno{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid #ffffff14}
.noche .inc{display:grid;grid-template-columns:3.4em 10px 1fr auto;align-items:center;column-gap:14px;padding:13px 0;border-bottom:1px solid #ffffff14;
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
/* La .hora de pelicula.css era el reloj gigante del acto II: el acto se fue, pero su regla sigue ahí. Aquí no llegan ni
   su tamaño ni su resplandor. */
.noche .inc .hora{font:.8rem/1 var(--mono);font-variant-numeric:tabular-nums;color:#ffffffb8;letter-spacing:0;text-shadow:none;transition:none}
.noche .punto{width:10px;height:10px;border-radius:50%;background:var(--verde);transition:background-color 200ms ease}
.noche .que b{display:block;font:600 .95rem/1.25 var(--body)}
.noche .que span{display:block;margin-top:2px;font-size:.8rem;line-height:1.35;color:#ffffffa8}
/* El estado cambia de texto y de color a la vez: con transición se leía «Técnico en camino» en ámbar. */
.noche .estado{font:.66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--verde)}
.noche [data-estado="0"] .punto{background:var(--ambar)}
.noche [data-estado="0"] .estado{color:var(--ambar)}
.noche [data-estado="1"] .punto{background:var(--azul)}
.noche [data-estado="1"] .estado{color:var(--azul)}
.noche .remate{margin:40px 0 0;font:600 clamp(1.15rem,1.7vw,1.55rem)/1.3 var(--body);text-wrap:balance;transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.noche .escena{position:relative;height:min(84svh,780px);perspective:1600px;perspective-origin:50% 35%}
.noche .tira{display:none}
/* Por la mañana la cámara se endereza y se acerca, como quien coge el móvil: el correo tiene que leerse. */
.noche .camara{position:absolute;inset:0;transform:rotateX(0deg) rotateZ(0deg) scale(1.12);transition:transform 1100ms var(--ease-in-out)}
.noche .mesa{position:absolute;inset:-30%;background:radial-gradient(40% 36% at 50% 50%,#19202b 0%,#11161f 48%,#0b0f15 72%,transparent 100%)}
/* La luz se apaga hacia todos sus bordes y pasa POR ENCIMA del móvil: las lamas cruzan la mesa, el marco y el cristal. */
.noche .luz{position:absolute;inset:-30%;z-index:2;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%)}
.noche .luz.fria{opacity:0;background:repeating-linear-gradient(116deg,transparent 0 44px,rgba(150,178,255,.075) 68px 116px,transparent 140px 188px)}
.noche .luz.calida{background:repeating-linear-gradient(116deg,transparent 0 44px,rgba(255,198,132,.2) 68px 116px,transparent 140px 188px)}
.noche .halo{position:absolute;left:50%;top:50%;width:min(640px,92%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:.4;
  background:radial-gradient(closest-side,rgba(170,195,255,.16),rgba(170,195,255,.05) 55%,transparent 75%);transition:opacity 700ms ease}
/* El móvil, sin marca de fabricante. Por dentro todo se mide en cqw (el ancho de la pantalla). */
.noche .movil{position:absolute;left:50%;top:50%;height:86%;aspect-ratio:9/19.5;transform:translate(-50%,-50%);padding:9px;border-radius:15% / 7%;
  background:linear-gradient(145deg,#1c222b,#07090d 42%);
  box-shadow:inset 0 0 0 1px #ffffff1c,0 1px 1px rgba(0,0,0,.9),0 4px 10px -2px rgba(0,0,0,.7),24px 36px 64px -24px rgba(0,0,0,.7)}
.noche .movil::before,.noche .movil::after{content:"";position:absolute;width:2px;border-radius:2px;background:#232a34}
.noche .movil::before{right:-2px;top:22%;height:10%}
.noche .movil::after{left:-2px;top:18%;height:6%}
.noche .pantalla{position:relative;height:100%;border-radius:12.5% / 5.8%;overflow:hidden;background:#04060a;container-type:size}
.noche .fondo{position:absolute;inset:0;background:radial-gradient(130% 75% at 25% 0%,#22365a 0%,#0e1829 55%,#070b12 100%);transition:opacity 600ms ease}
.noche .isla{position:absolute;top:3.4cqw;left:50%;width:31cqw;height:9cqw;transform:translateX(-50%);border-radius:999px;background:#020305}
.noche .reloj{position:absolute;left:0;right:0;top:20cqw;text-align:center;font:300 24cqw/1 var(--body);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  transform-origin:50% 0;transform:translateY(-4cqw) scale(.56);transition:transform 700ms var(--ease-out),opacity 400ms ease}
.noche .alarma{position:absolute;left:5cqw;right:5cqw;top:60cqw;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:3cqw;
  padding:3.6cqw 4.4cqw;border-radius:6cqw;background:rgba(34,42,56,.9);border:1px solid #ffffff1a;font:600 4.6cqw/1.2 var(--body);
  opacity:0;transform:translateY(3cqw) scale(.98);transition:opacity 200ms var(--ease-out),transform 240ms var(--ease-out)}
/* Blanca: en esta sección el ámbar es «llamada atendida», y a las 07:30 no ha pasado nada. */
.noche .alarma svg{width:6.4cqw;height:6.4cqw;fill:none;stroke:#e9eef5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.noche .alarma b{font:600 5.6cqw/1 var(--body);font-variant-numeric:tabular-nums}
.noche .avisos{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.noche .noti{position:absolute;left:4.5cqw;right:4.5cqw;height:28cqw;display:grid;grid-template-columns:8cqw 1fr;gap:3cqw;padding:3.2cqw 3.6cqw;
  border-radius:5.4cqw;overflow:hidden;background:rgba(236,240,245,.9);border:1px solid #ffffff40;
  transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
/* Posiciones con el correo abierto: encima, el correo (50 → 140); debajo, la 2 y la 3. Antes de abrirlo, suben 62cqw. */
.noche .noti:nth-child(1){top:50cqw;opacity:0}
.noche .noti:nth-child(2){top:143cqw;transition-delay:90ms}
.noche .noti:nth-child(3){top:174cqw;transition-delay:180ms}
.noche .app{width:8cqw;height:8cqw;border-radius:2.2cqw;background:#1c2533;display:grid;place-items:center}
.noche .app svg{width:5cqw;height:5cqw;fill:none;stroke:#e9eef5;stroke-width:1.7;stroke-linejoin:round}
.noche .txt{min-width:0;display:flex;flex-direction:column;gap:.6cqw}
.noche .de{font:600 3.9cqw/1.15 var(--body);color:#101722}
.noche .asunto{margin:0;font:600 3.7cqw/1.25 var(--body);color:#101722;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.noche .ok{width:3.6cqw;height:3.6cqw;margin-right:1.2cqw;vertical-align:-.45cqw}
.noche .ok rect{fill:var(--verde)}
.noche .ok path{fill:none;stroke:#08130a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.noche .extracto{font:3.9cqw/1.3 var(--body);color:#3d4757;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noche .correo{position:absolute;left:4.5cqw;right:4.5cqw;top:50cqw;height:90cqw;overflow:hidden;padding:4.4cqw 4.6cqw;border-radius:5.4cqw;
  background:#eef2f6;color:#101722;box-shadow:0 3cqw 8cqw -3cqw rgba(0,0,0,.6);transform-origin:50% 0;
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.noche .correo header{display:grid;grid-template-columns:8cqw 1fr;gap:3cqw;align-items:center}
.noche .correo header b{font:600 4.2cqw/1.2 var(--body)}
.noche .correo .asunto{margin-top:3cqw;font-size:4.1cqw}
.noche .correo .cuerpo{margin-top:3cqw;padding-top:3cqw;border-top:1px solid #10172224;font:4.1cqw/1.42 var(--body);color:#2a3342}
.noche .correo .cuerpo p{margin:0 0 2.2cqw}
.noche .inicio{position:absolute;left:50%;bottom:2.6cqw;width:36cqw;height:1.5cqw;transform:translateX(-50%);border-radius:999px;background:#ffffffb0;transition:opacity 400ms ease}
/* ── la noche ── */
.js .noche .alba,.js .noche .luz.calida{opacity:0}
.js .noche .luz.fria{opacity:1}
.js .noche:not(.resuelto) .titulo3 .v{color:var(--blanco)}
.js .noche .inc:not(.on){opacity:0;transform:translateY(8px)}
.js .noche:not(.final) .remate{opacity:0;transform:translateY(6px)}
.js .noche:not(.manana) .camara{transform:rotateX(36deg) rotateZ(-14deg) scale(.92)}
.js .noche:not(.suena):not(.manana) .halo{opacity:.22}
.js .noche:not(.suena):not(.manana) .fondo{opacity:.1}
.js .noche:not(.suena):not(.manana) .reloj{opacity:.42}
.js .noche:not(.manana) .reloj{transform:none}
.js .noche:not(.manana) .inicio{opacity:0}
.js .noche:not(.manana) .noti{opacity:0}
.js .noche:not(.manana) .noti:nth-child(1){transform:translateY(4cqw)}
.js .noche:not(.manana) .noti:nth-child(n+2){transform:translateY(-58cqw)}
/* Las notificaciones esperan a que la cámara se asiente. */
.js .noche.manana:not(.abierto) .noti:nth-child(1){opacity:1;transition-delay:650ms}
.js .noche.manana:not(.abierto) .noti:nth-child(2){transition-delay:740ms}
.js .noche.manana:not(.abierto) .noti:nth-child(3){transition-delay:830ms}
.js .noche.manana:not(.abierto) .noti:nth-child(n+2){transform:translateY(-62cqw)}
.js .noche:not(.abierto) .correo{opacity:0;transform:scale(.97)}
/* El despertador: lo único que suena en toda la noche. Tres zumbidos cortos sobre la mesa, sin girar. */
.noche.suena:not(.manana) .alarma{opacity:1;transform:none}
.noche.suena:not(.manana) .movil{animation:vibra 40ms linear 3,vibra 40ms linear 180ms 3,vibra 40ms linear 360ms 3}
@keyframes vibra{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 1.5px),-50%)}75%{transform:translate(calc(-50% + 1.5px),-50%)}}
@media (min-width:1600px){
  .noche .escena{height:min(84svh,880px)}
}
@media (min-width:561px){
  .noche .estado{min-width:11.5em;text-align:right}
}
@media (max-width:1024px){
  .noche{grid-template-columns:1fr;align-items:start;row-gap:0}
  .noche .texto{display:contents}
  .noche .texto .meta{order:1;justify-self:start}
  .noche .titulo3{order:2;font-size:clamp(1.6rem,7vw,3.2rem)}
  .noche .sub3{order:3}
  .noche .escena{order:4;margin-top:28px;height:min(80svh,640px)}
  .noche .turno{order:5;margin-top:20px}
  .noche .remate{order:6}
  /* Una sola línea: hora y avería. El estado va en el color del punto, como las píldoras de la portada en móvil. */
  .js .noche .tira{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;margin:0;padding:0 12px;
    font:.7rem/1.35 var(--mono);letter-spacing:.06em;color:#ffffffd0;transition:opacity 220ms var(--ease-out)}
  .noche .tira .punto{flex:none}
  .noche #tiraTexto{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .js .noche:not(.visible) .tira,.js .noche.manana .tira,.js .noche .tira:not([data-estado]){opacity:0}
}
/* En horizontal la pantalla del teléfono se quedaba en 106 px y la letra en 4 px: la escena mide lo de vertical. */
@media (max-width:1024px) and (orientation:landscape) and (max-height:600px){
  .noche .escena{height:600px}
}
/* El botón «¿Y a las 3 de la mañana?» de la portada aterriza aquí: que el rótulo no quede pegado a la nav. */
.noche{scroll-margin-top:24px}
@media (max-width:560px){
  .noche .inc{grid-template-columns:3.4em 10px 1fr}
  .noche .estado{grid-column:3;margin-top:6px}
  /* En una línea, como el de la portada en móvil: con las rayas se partía en «turno de / noche». */
  .noche .texto .meta{font-size:.64rem;letter-spacing:.16em}
  .noche .texto .meta::before,.noche .texto .meta::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .noche .camara,.noche .reloj,.noche .noti,.noche .correo,.noche .inc,.noche .remate,.noche .alarma,.noche .fondo,.noche .halo,.noche .inicio{transition:opacity 200ms ease!important}
  .noche .movil{animation:none!important}
}
/* Desde que detrás de la noche va la ciudad (13-sept), las lamas de luz acababan en un corte recto en la frontera: el borde
   de abajo funde con el fondo. Solo en escritorio, donde abajo no hay texto. */
@media (min-width:1025px){
  .noche::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12vh;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,14,20,0),var(--noche))}
}

/* ═════════════ SECCIÓN · LA CIUDAD (DE LA MARAÑA AL HILO) ═════════════ */
/* Sustituye al acto III (13-sept). La foto va en un cuadro con su propia proporción que cubre la escena como
   object-fit: cover, calculado con cqw y cqh: sin JavaScript también sale bien encuadrada. Encima va otro cuadro igual con
   la red, en las coordenadas de la foto (js/ciudad-geo.js). La cámara es un transform de los dos cuadros con la misma
   transición; el tinte va entre ellos, quieto en la pantalla, para que no apague la red. */
.ciudad{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:58fr 42fr;align-items:center;overflow:hidden}
.ciudad .escena{position:absolute;inset:0;overflow:hidden;container-type:size;--py:0.62}
.ciudad .camara{--w:max(100cqw, 74.9465cqh);position:absolute;left:calc((100cqw - var(--w)) / 2);top:calc(var(--py) * (100cqh - var(--w) * 1.334286));
  width:var(--w);height:calc(var(--w) * 1.334286);transform-origin:0 0;transition:transform 2400ms var(--ease-in-out)}
/* Mientras corre la historia, las dos capas grandes van a la GPU; al acabar, se sueltan. */
.ciudad.visible:not(.final) .camara{will-change:transform}
.ciudad .camara img{display:block;width:100%;height:100%}
/* Con la cámara del final alejada (en escritorio, y en tabletas en vertical; la clase la pone ciudad.js), la foto queda
   como un mapa y sus bordes se funden con la noche. Al empezar, con la cámara cerca, los fundidos caen fuera de la
   pantalla. En los teléfonos la cámara acaba en la foto tal cual y no llevan máscara; sin JavaScript tampoco. */
.ciudad.alejada .escena > .camara{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
/* La foto entra con un fundido cuando llega (sin JavaScript, o tras el rescate, se ve siempre): con la red lenta aparecía de
   golpe, con la historia ya en marcha. */
.js .ciudad .escena > .camara{opacity:0;transition:transform 2400ms var(--ease-in-out),opacity 700ms var(--ease-out)}
.js .ciudad.foto-lista .escena > .camara{opacity:1}
.ciudad .red{display:block;width:100%;height:100%;overflow:visible}
.ciudad .tinte{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--noche) 0%,rgba(10,14,20,0) 14%,rgba(10,14,20,0) 86%,var(--noche) 100%),
    linear-gradient(270deg,rgba(10,14,20,.95) 0%,rgba(10,14,20,.84) 34%,rgba(10,14,20,.3) 52%,rgba(10,14,20,0) 66%),
    linear-gradient(rgba(10,14,20,.3),rgba(10,14,20,.3))}
/* El foco del final: al abrirse la cámara, la foto se oscurece alrededor de la mesa (--mx y --my, de ciudad.js). La red va
   por encima del tinte, así que no se apaga. Sin el foco, en el final mandaba la Sagrada Família. */
.ciudad .tinte::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1800ms var(--ease-out) 600ms;
  background:radial-gradient(circle at var(--mx,40%) var(--my,75%),rgba(10,14,20,0) 0,rgba(10,14,20,0) 18vmax,rgba(10,14,20,.55) 62vmax)}
.ciudad.abre .tinte::after{opacity:1}
.ciudad .capa{position:absolute;inset:0;pointer-events:none}
.ciudad .centinela{position:absolute;left:0;top:50%;width:1px;height:1px;pointer-events:none}
/* El margen derecho se alinea con el tope de 1320 px de la web menos 96 px: con el tope entero, a 1920 el titular se partía
   en cuatro líneas. */
.ciudad .texto{position:relative;z-index:5;grid-column:2;container-type:inline-size;padding:clamp(40px,8vh,96px) max(clamp(20px,4vw,56px),calc((100vw - 1320px) / 2 - 96px)) clamp(40px,8vh,96px) clamp(12px,2vw,32px)}
/* El titular va en dos líneas a cualquier ancho: la letra se mide con la columna (8cqi) y no con la pantalla. Con 3,4vw,
   «+2500 COMUNIDADES.» no cabía en su línea y salían tres o cuatro. */
.ciudad .titulo4{font-family:var(--display);text-transform:uppercase;line-height:.95;letter-spacing:-.01em;margin:22px 0 18px;font-size:clamp(1.8rem,8cqi,3.6rem);text-wrap:balance}
/* «Una sola mesa» se pone verde cuando llega el último hilo, como «Nada» en el anillo y «tu móvil no suena» en la noche. */
.ciudad .titulo4 .v{color:var(--verde);transition:color 600ms ease}
.js .ciudad:not(.final) .titulo4 .v{color:var(--blanco)}
.ciudad .sub4{margin:0;max-width:30em;line-height:1.6;color:#ffffffd6}
.ciudad .velo{position:absolute;inset:0;pointer-events:none}
/* En escritorio la red se desvanece antes de la columna del texto: sin el velo, algún hilo cruzaba el titular. Acaba justo
   donde empieza el texto, para no apagar la parte derecha de la maraña. */
@media (min-width:901px){
  .ciudad .velo{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,rgba(0,0,0,.25) 57%,transparent 60%);mask-image:linear-gradient(90deg,#000 0%,#000 52%,rgba(0,0,0,.25) 57%,transparent 60%)}
}
/* En los portátiles pequeños la claqueta se partía en dos con sus rayas: menos aire entre letras y sin la raya del final. */
@media (min-width:901px) and (max-width:1180px){
  .ciudad .texto .meta{letter-spacing:.2em}
  .ciudad .texto .meta::after{display:none}
}
/* La red. Los trazos se miden en píxeles de pantalla: --u en el encuadre final (la ciudad), --uc con la cámara del
   principio (la maraña, que solo se ve de cerca) y --um a medias (la manzana y sus hilos, que se ven de cerca y de lejos).
   Con la gramática de la casa: la manzana va en blanco mientras dura el problema y se pone verde con su hilo, porque el
   verde es lo resuelto; la maraña es ámbar, la llamada. */
.ciudad .red .contorno{fill:rgba(247,249,251,.04);stroke:rgba(247,249,251,.6);stroke-width:calc(1.6px * var(--um,1));stroke-linejoin:round}
.ciudad .red .marana{fill:none;stroke:var(--ambar);stroke-width:calc(1.4px * var(--uc,1));stroke-linecap:round;opacity:.85}
.ciudad .red .ancla{fill:var(--ambar)}
.ciudad .red .pulso{fill:color-mix(in srgb,var(--ambar) 55%,#fff);transition:fill-opacity 180ms ease}
.ciudad .red .hilo{fill:none;stroke:var(--verde);stroke-width:calc(2.1px * var(--um,1));stroke-linecap:round}
.ciudad .red .hilo.lejano{stroke-width:calc(1.25px * var(--u,1));opacity:.6}
.ciudad .red .finca{fill:var(--blanco)}
.ciudad .red .punto{fill:var(--verde)}
.ciudad .red .mesa .halo{fill:rgba(10,14,20,.82);stroke:rgba(111,181,90,.5);stroke-width:calc(1px * var(--u,1))}
.ciudad .red .mesa .gajo{fill:var(--verde)}
.ciudad .red .mesa .gajo.hueco{fill:none;stroke:var(--verde);stroke-width:calc(1.2px * var(--u,1))}
.ciudad .red .mesa .onda{fill:none;stroke:var(--verde);stroke-width:calc(2px * var(--u,1));opacity:0;transform-box:fill-box;transform-origin:center}
/* Las etiquetas de los oficios: la caja de cristal de la portada, con el ámbar de la llamada. */
/* Fuera de la maraña las etiquetas ni se pintan: con visibility, sus seis capas de desenfoque no se quedan vivas en reposo. */
.ciudad .ofi{position:absolute;left:0;top:0;--c:var(--ambar);visibility:hidden;transition:visibility 0s 240ms}
.ciudad.marana:not(.recoge) .ofi{visibility:visible;transition-delay:0s}
.ciudad .ofi .caja{position:absolute;left:12px;bottom:8px;white-space:nowrap;padding:7px 11px 7px 9px;border-radius:10px;
  background:rgba(10,14,20,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--c) 55%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);font:600 .82rem/1.2 var(--body);color:var(--blanco);
  opacity:0;transform:translateY(6px) scale(.95);transform-origin:left bottom;transition:opacity 220ms var(--ease-out),transform 240ms var(--ease-rebote)}
.ciudad .ofi .caja::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:1px}
.ciudad .ofi.izq .caja{left:auto;right:12px;transform-origin:right bottom}
.ciudad .ofi.abajo .caja{bottom:auto;top:8px;transform-origin:left top}
.ciudad .ofi.izq.abajo .caja{transform-origin:right top}
/* ── la historia: sin sus clases se ve el final ── */
.ciudad .red .contorno{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 500ms var(--ease-in-out),stroke 500ms ease,fill 500ms ease,fill-opacity 300ms ease 300ms}
.js .ciudad:not(.contorno) .red .contorno{stroke-dashoffset:1;fill-opacity:0}
/* Los círculos aparecen con fill-opacity y no con opacity: una transición de opacity sube cada círculo a su propia capa, y
   durante la cámara se pasaba de 55 a 120 capas (crítica técnica, 13-sept). */
.ciudad .red .finca{transition:fill-opacity 260ms var(--ease-out),fill 300ms ease}
.js .ciudad:not(.contorno) .red .finca{fill-opacity:0}
.ciudad .red .marana{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 520ms var(--ease-out)}
.ciudad.marana:not(.recoge) .red .marana{stroke-dashoffset:0}
.ciudad.recoge .red .marana{transition-delay:0ms!important;transition-duration:420ms}
.ciudad .red .ancla{fill-opacity:0;transition:fill-opacity 260ms ease}
.ciudad.marana:not(.recoge) .red .ancla{fill-opacity:1}
/* Las anclas con nombre suenan, con el parpadeo de la casa (el de los huecos del anillo); las que no tienen nombre, apagadas. */
.ciudad.marana:not(.recoge) .red .ancla.con-nombre{animation:timbre 480ms steps(2) infinite}
.ciudad.marana:not(.recoge) .red .ancla:not(.con-nombre){fill-opacity:.5}
@keyframes timbre{50%{fill:color-mix(in srgb,var(--ambar) 25%,#fff)}}
.ciudad.recoge .red .pulso{fill-opacity:0}
.ciudad.marana:not(.recoge) .ofi .caja{opacity:1;transform:none;transition-delay:var(--retraso,0ms)}
.ciudad .red .hilo{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 620ms var(--ease-out)}
.js .ciudad:not(.recoge) .red .g-manzana .hilo{stroke-dashoffset:1}
.js .ciudad:not(.abre) .red .g-ciudad .hilo{stroke-dashoffset:1}
.ciudad.recoge .red .contorno{fill:rgba(111,181,90,.1);stroke:var(--verde)}
.ciudad.recoge .red .finca{fill:var(--verde)}
.ciudad.abre .red .contorno{fill:rgba(111,181,90,.03)}
.ciudad .red .punto{transition:fill-opacity 320ms var(--ease-out)}
.js .ciudad:not(.abre) .red .punto{fill-opacity:0}
.ciudad .red .mesa-aro{transform-box:fill-box;transform-origin:center;transition:transform 440ms var(--ease-rebote),opacity 260ms var(--ease-out)}
.js .ciudad:not(.recoge) .red .mesa-aro{opacity:0;transform:scale(.55)}
/* El anillo mide lo mismo en pantalla mientras se abre la cámara: empieza a 1/s (--mesa-ini, de ciudad.js) con la misma
   curva que la cámara. A mitad de camino crece un 10 %, y se lee como una respiración. */
.ciudad .red .mesa-escala{transform-box:fill-box;transform-origin:center;transition:transform 2400ms var(--ease-in-out)}
.js .ciudad:not(.abre) .red .mesa-escala{transform:scale(var(--mesa-ini,.5))}
.ciudad.final .red .mesa .onda{animation:onda 900ms var(--ease-out) 1}
@keyframes onda{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.4)}}
@media (max-width:900px){
  /* En el móvil el texto va debajo de la escena, aunque en el HTML vaya antes. ☠️ `stretch` hace falta: con el
     align-items:center de escritorio, la escena (sin contenido propio, por container-type:size) medía 0 px de ancho. */
  .ciudad{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .ciudad .escena{position:relative;inset:auto;order:-1;height:62svh;min-height:380px;--py:0.5}
  .ciudad .tinte{background:linear-gradient(180deg,var(--noche) 0%,rgba(10,14,20,0) 12%,rgba(10,14,20,0) 72%,var(--noche) 100%),linear-gradient(rgba(10,14,20,.28),rgba(10,14,20,.28))}
  .ciudad .texto{padding:4px 20px 64px}
  .ciudad .titulo4{font-size:clamp(1.6rem,7vw,3.2rem)}
  .ciudad .ofi .caja{font-size:.8125rem;padding:6px 10px 6px 8px}
  .ciudad .red .hilo.lejano{stroke-width:calc(1.5px * var(--u,1));opacity:.75}
}
/* En una línea en el móvil, como los rótulos de las otras piezas. */
@media (max-width:560px){
  .ciudad .texto .meta{font-size:.64rem;letter-spacing:.16em}
  .ciudad .texto .meta::before,.ciudad .texto .meta::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ciudad .camara,.ciudad .red *,.ciudad .ofi .caja,.ciudad .tinte::after{transition:opacity 200ms ease,fill-opacity 200ms ease!important;animation:none!important}
  .ciudad .titulo4 .v{transition:none}
  .ciudad .red .mesa .onda{display:none}
}