/* 05 · «Así se ve un war room» (31 oct, segunda versión). Un caso hipotético que se cuenta solo mientras se baja.
   Una escena fija ocupa la pantalla: la red de un video falso que se contagia (canvas), el reloj, el riel y una gráfica
   por momento. Encima suben siete tarjetas, una por momento. Al final la red encuentra su forma.
   Sin JavaScript (o si warroom.js falla) la escena no aparece y las tarjetas se leen como lista.
   Con movimiento reducido: la escena cambia de estado sin transiciones. Usa las variables de casa.css y natalia.css. */

.wr{
 --wr-linea:var(--linea-n,rgb(236 232 226/.14));
 --wr-platino:#d9d7dc;
 --wr-carta:rgb(20 18 22/.93);
 --wr-raya:72svh;
 padding-bottom:0}
.wr-cabeza>.nudo{left:-12px;top:6px}

/* ——— Base: lista legible ——— */
.wr-escena{position:relative;margin-top:clamp(36px,7vw,72px)}
.wr-fijo,.wr-tapa{display:none}
.wr-pasos{list-style:none;margin:0 auto;padding:0;max-width:1120px;display:grid;gap:34px}
.wr-paso{position:relative;display:grid;gap:10px;max-width:560px}
.wr-cuando{margin:0;display:flex;align-items:baseline;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.04em;color:var(--rosa-suave)}
.wr-v{font:600 10.5px/1 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--texto)}
.wr-linea{margin:0;font:400 clamp(25px,6.6vw,38px)/1.06 var(--didona);letter-spacing:-.01em;color:var(--texto);text-wrap:balance}
.wr-linea em{color:var(--rosa-suave)}
.wr-texto{margin:0;font:400 15.5px/1.55 var(--sans);color:var(--sutil);max-width:46ch;text-wrap:pretty}
.wr-lectura{margin:4px 0 0;padding-left:26px;position:relative;font:italic 400 clamp(17px,4.4vw,21px)/1.3 var(--didona);color:var(--rosa-perla);text-wrap:balance}
.wr-lectura::before{content:"";position:absolute;left:0;top:.68em;width:16px;height:1px;background:var(--rosa-hilo)}

.wr-nota{margin-top:14px;font:400 11px/1.5 var(--mono);color:var(--sutil)}
.wr-cierre{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin-top:8svh;padding-bottom:2svh;font:400 clamp(24px,6.4vw,38px)/1.15 var(--didona);color:var(--texto)}
.wr-cierre>span{text-wrap:balance}
.wr-cierre em{color:var(--rosa-suave)}
.wr-cierre .nudo{left:-12px;top:.62em}
.wr-cierre a{display:inline-flex;align-items:center;gap:10px;min-height:46px;font:600 11px/1 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--texto);text-decoration:none;border-bottom:1px solid var(--rosa-hilo);transition:color .3s}
.wr-cierre a span{display:inline-block;transition:transform .35s var(--ease)}
@media (hover:hover){.wr-cierre a:hover{color:var(--rosa-suave)}.wr-cierre a:hover span{transform:translateX(5px)}}

/* ——— Con JavaScript: la escena ——— */
.wr-vivo .wr-escena{margin-inline:calc(-1 * max(24px,env(safe-area-inset-left,0px))) calc(-1 * max(24px,env(safe-area-inset-right,0px)))}
.wr{--wr-tapa:calc(env(safe-area-inset-top,0px) + 160px)}
/* La tapa (reloj y riel) va en su propia capa, encima de las tarjetas: al subir, las tarjetas pasan por debajo */
.wr-vivo .wr-tapa{display:block;position:sticky;top:0;height:var(--wr-tapa);z-index:3;pointer-events:none;background:linear-gradient(var(--onix) 0,var(--onix) calc(100% - 22px),rgb(11 10 12/0))}
.wr-vivo .wr-fijo{display:block;position:sticky;top:0;height:100vh;height:100svh;margin-top:calc(-1 * var(--wr-tapa));overflow:hidden;z-index:1}
.wr-red{position:absolute;inset:0;width:100%;height:100%;display:block}

.wr-tira{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 64px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.wr-aviso{margin:0 0 4px;display:flex;align-items:center;gap:8px;font:600 9px/1.25 var(--sans);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;color:var(--rosa-suave)}
.wr-aviso i{width:6px;height:6px;border:1px solid var(--rosa-hilo);border-radius:50%;flex:none}
.wr-reloj{margin:0;display:grid;justify-items:end;gap:3px}
.wr-dia{font:600 8.5px/1 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--sutil)}
.wr-hora{font:400 clamp(30px,8.6vw,40px)/1 var(--mono);letter-spacing:.02em;color:var(--texto);font-variant-numeric:tabular-nums}

.wr-riel{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 122px);margin:0;padding:0;list-style:none;display:flex;justify-content:space-between;height:9px;--r:0}
.wr-riel::before,.wr-riel::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--wr-linea)}
.wr-riel::after{background:var(--rosa-hilo);transform-origin:0 50%;transform:scaleX(var(--r))}
.wr-riel li{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:var(--onix);border:1px solid rgb(236 232 226/.3);font-size:0;color:transparent;transition:background-color .4s,border-color .4s}
.wr-riel li.si{background:var(--rosa-hilo);border-color:var(--rosa-hilo)}
.wr-riel li.ahora{background:var(--rosa-perla);border-color:var(--rosa-perla)}

.wr-vista{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 158px);height:calc(var(--wr-raya) - 20svh - 158px - env(safe-area-inset-top,0px));min-height:180px}
.wr-g{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:12px;opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility 0s .55s;--f:0}
.wr-g.activo{opacity:1;visibility:visible;transition:opacity .55s var(--ease),visibility 0s}
.wr-g [data-a]{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.wr-g [data-a].si{opacity:1;transform:none}
.wr-g svg [data-a]{transform:none}
.wr-g-t{margin:0;justify-self:start;font:600 9px/1.2 var(--sans);font-stretch:118%;letter-spacing:.2em;text-transform:uppercase;color:var(--sutil)}
.wr-g-pie{margin:0;justify-self:start;font:400 10px/1.4 var(--mono);color:var(--sutil)}

/* 0 · Detectar: el video, en un teléfono */
.wr-g0{grid-template-columns:auto auto;gap:22px}
.wr-tel{position:relative;height:min(100%,330px);aspect-ratio:9/16;max-height:calc(var(--wr-raya) - 20svh - 160px);min-height:170px;display:grid;grid-template-rows:auto 1fr auto;padding:10px 10px 12px;border:1px solid rgb(217 215 220/.55);border-radius:18px;background:rgb(11 10 12/.82)}
.wr-tel-top{margin:0;display:flex;align-items:center;gap:6px;font:500 9px/1 var(--mono);color:var(--sutil)}
.wr-play{width:0;height:0;border-left:7px solid var(--rosa-hilo);border-block:4.5px solid transparent}
.wr-atril{align-self:center;width:72%;justify-self:center;fill:none;stroke:var(--wr-platino);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.wr-atril .wr-luz{fill:rgb(243 221 228/.06);stroke:none}
.wr-atril circle{fill:var(--wr-platino);stroke:none}
.wr-subt{margin:0;padding:6px 7px;background:rgb(11 10 12/.86);font:500 10.5px/1.35 var(--sans);color:var(--texto);text-align:center;text-wrap:balance}
.wr-subt [data-a]{transform:none}
.wr-cuenta{margin:0;display:grid;gap:4px;align-self:center}
.wr-n{font:400 clamp(54px,16vw,96px)/.9 var(--didona);color:var(--rosa-hilo);font-variant-numeric:lining-nums tabular-nums}
.wr-cuenta>span{font:600 9px/1.3 var(--sans);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;color:var(--texto)}
.wr-cuenta .wr-cuenta-t{color:var(--rosa-suave)}

/* 1 · Separar: lo real, lo falso, lo que no se sabe */
.wr-g1{grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:10px;align-content:center}
.wr-fila{display:grid;grid-template-columns:76px minmax(0,1fr) 82px;align-items:center;gap:10px;padding:12px 12px;background:rgb(11 10 12/.84);border:1px solid var(--wr-linea)}
.wr-fila-k{font:600 9px/1.25 var(--sans);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase;color:var(--sutil)}
.wr-fila-v{font:500 10.5px/1.2 var(--mono);text-align:right}
.wr-v-real{color:var(--rosa-perla)}
.wr-v-falso{color:var(--rosa-hilo)}
.wr-v-nose{color:var(--sutil)}
.wr-cuadros,.wr-onda,.wr-duda{display:block;height:34px}
.wr-cuadros svg,.wr-onda svg{width:100%;height:100%;display:block}
.wr-cuadros rect{fill:none;stroke:var(--wr-platino);stroke-width:1;opacity:.75}
.wr-onda rect{fill:rgb(217 215 220/.55)}
.wr-onda rect.mal{fill:var(--rosa-hilo)}
.wr-onda .caja{fill:none;stroke:var(--rosa-hilo);stroke-width:1;stroke-dasharray:3 3}
.wr-duda{position:relative}
.wr-duda::before{content:"";position:absolute;left:0;right:22px;top:50%;border-top:1px dotted rgb(236 232 226/.4)}
.wr-duda::after{content:"?";position:absolute;right:0;top:50%;transform:translateY(-50%);font:italic 400 24px/1 var(--didona);color:var(--sutil)}

/* 2 · Decidir: tres caminos */
.wr-g2{justify-items:stretch;gap:8px}
.wr-curvas{width:100%;height:auto;max-height:calc(100% - 48px);overflow:visible}
.wr-curvas text{font:500 9px var(--mono);fill:var(--sutil)}
.wr-eje{stroke:var(--wr-linea);stroke-width:1;fill:none}
.wr-c{fill:none;stroke-linecap:round;stroke-dasharray:1 1;--p:clamp(0,calc((var(--f) - var(--a0)) / (var(--a1) - var(--a0))),1);stroke-dashoffset:calc(1 - var(--p))}
.wr-c-callar{stroke:rgb(236 232 226/.45);stroke-width:1.6}
.wr-c-negar{stroke:var(--rosa-tinta);stroke-width:1.8}
.wr-c-mostrar{stroke:var(--rosa-perla);stroke-width:2.6}
.wr-c-n{font:600 10px var(--sans)!important;letter-spacing:.08em;fill:var(--texto)!important}
.wr-c-n-negar{fill:var(--rosa-suave)!important}
.wr-c-n-mostrar{fill:var(--rosa-perla)!important}

/* 3 · Decir: la frase en platino, palabra por palabra */
.wr-g3{gap:18px}
.wr-frase{margin:0;max-width:17ch;padding:6px 10px;font:400 clamp(26px,7.4vw,52px)/1.08 var(--didona);letter-spacing:-.01em;text-align:center;text-wrap:balance;color:var(--wr-platino)}
.wr-frase [data-a]{opacity:.16;transform:none;transition:opacity .35s,color .35s}
.wr-frase [data-a].si{opacity:1;color:#f3f2f5}
.wr-pruebas{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.wr-pruebas span{padding:6px 10px 5px;border:1px solid rgb(217 215 220/.45);font:600 9px/1 var(--sans);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase;color:var(--texto);background:rgb(11 10 12/.7)}

/* 4 · Dar la cara: el visor de la cámara */
.wr-g4{place-items:stretch}
.wr-visor{position:relative;display:grid;place-items:center;padding:34px 18px 18px;background:rgb(11 10 12/.8);min-height:0}
.wr-esq{position:absolute;width:18px;height:18px;border:0 solid var(--wr-platino)}
.wr-esq:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}
.wr-esq:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.wr-esq:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}
.wr-esq:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.wr-rec{position:absolute;left:14px;top:12px;margin:0;display:flex;align-items:center;gap:6px;font:600 9px/1 var(--sans);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;color:var(--texto)}
.wr-rec span{width:7px;height:7px;border-radius:50%;background:var(--rosa-hilo)}
.wr-tc{position:absolute;right:14px;top:11px;margin:0;font:500 10.5px/1 var(--mono);color:var(--texto);font-variant-numeric:tabular-nums}
.wr-qa{display:grid;gap:14px;max-width:40ch}
.wr-q,.wr-r{margin:0;font:400 clamp(16px,4.4vw,23px)/1.25 var(--didona);text-wrap:balance}
.wr-q{font-style:italic;color:var(--rosa-suave)}
.wr-r{color:var(--texto)}
.wr-qa small{display:block;margin-bottom:6px;font:600 8.5px/1.2 var(--sans);font-stretch:118%;letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--sutil)}

/* 5 · Responder: el orden, en círculos */
.wr-g5{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-items:center}
.wr-aros{width:100%;height:auto;max-height:100%;overflow:visible}
.wr-centro{fill:var(--rosa-perla)}
.wr-aro{fill:none;stroke-dasharray:1 1;--p:clamp(0,calc((var(--f) - var(--a0)) / (var(--a1) - var(--a0))),1);stroke-dashoffset:calc(1 - var(--p));transform:rotate(-90deg);transform-origin:120px 120px}
.wr-aro1{stroke:var(--rosa-perla);stroke-width:1.6}
.wr-aro2{stroke:var(--rosa-hilo);stroke-width:1.4}
.wr-aro3{stroke:var(--wr-platino);stroke-width:1.2}
.wr-aro4{stroke:rgb(236 232 226/.35);stroke-width:1}
.wr-orden{list-style:none;margin:0;padding:0;display:grid;gap:11px;background:rgb(11 10 12/.72)}
.wr-orden li{display:grid;grid-template-columns:auto;gap:2px;font:400 12.5px/1.3 var(--sans);color:var(--sutil)}
.wr-orden span{font:500 10px/1 var(--mono);color:var(--rosa-suave)}
.wr-orden b{font:400 17px/1.1 var(--didona);color:var(--texto)}

/* 6 · Aprender: la red encuentra su forma */
.wr-lema{margin:0;max-width:11ch;font:400 clamp(22px,6.2vw,40px)/1.08 var(--didona);text-align:center;color:var(--texto);text-wrap:balance}
.wr-lema em{color:var(--rosa-suave)}

/* Las tarjetas suben sobre la escena */
.wr-vivo .wr-pasos{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;padding:var(--wr-raya) max(16px,env(safe-area-inset-right,0px)) 46svh max(16px,env(safe-area-inset-left,0px));gap:72svh;max-width:none;pointer-events:none}
.wr-vivo .wr-paso{pointer-events:auto;padding:18px 18px 20px;background:var(--wr-carta);border:1px solid var(--wr-linea);border-left:2px solid var(--rosa-hilo);gap:9px}
.wr-vivo .wr-linea{font-size:clamp(23px,6.2vw,34px)}
.wr-vivo .wr-texto{font-size:14.5px}

@media (max-width:374px){
 .wr-fila{grid-template-columns:62px minmax(0,1fr) 70px;gap:8px;padding:10px}
 .wr-g0{gap:14px}
 .wr-orden b{font-size:15px}
 .wr-orden li{font-size:11.5px}
}

@media (min-width:900px){
 .wr{--wr-raya:56svh;--wr-tapa:calc(env(safe-area-inset-top,0px) + 212px)}
 .wr-tira{left:48%;right:max(48px,calc((100vw - 1180px) / 2));top:calc(env(safe-area-inset-top,0px) + 92px)}
 .wr-hora{font-size:52px}
 .wr-aviso{font-size:10px}
 .wr-riel{left:48%;right:max(48px,calc((100vw - 1180px) / 2));top:calc(env(safe-area-inset-top,0px) + 170px);height:auto}
 .wr-riel::before,.wr-riel::after{top:4px}
 .wr-riel li{font:600 8px/1 var(--sans);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;color:transparent}
 .wr-riel li::after{content:attr(data-n);position:absolute;top:18px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--sutil);transition:color .4s}
  .wr-riel li.ahora::after{color:var(--texto)}
 .wr-vista{left:48%;right:max(48px,calc((100vw - 1180px) / 2));top:calc(env(safe-area-inset-top,0px) + 222px);bottom:9svh;height:auto}
 .wr-tel{max-height:none;height:min(100%,420px)}
 .wr-subt{font-size:12px}
 .wr-fila{grid-template-columns:110px minmax(0,1fr) 110px;padding:18px 20px}
 .wr-cuadros,.wr-onda,.wr-duda{height:46px}
 .wr-fila-v{font-size:12px}
 .wr-curvas text{font-size:8px}
 .wr-qa{max-width:34ch}
 .wr-visor{padding:56px 40px 40px}
 .wr-orden b{font-size:21px}
 .wr-orden li{font-size:14px}
 .wr-vivo .wr-pasos{padding-left:max(48px,calc((100vw - 1180px) / 2));padding-right:0;gap:62svh}
 .wr-vivo .wr-paso{max-width:min(400px,38vw);padding:24px 26px 26px}
 .wr-vivo .wr-linea{font-size:clamp(28px,2.5vw,36px)}
}
@media (min-width:900px) and (max-height:760px){
 .wr-vista{top:calc(env(safe-area-inset-top,0px) + 200px)}
 .wr-hora{font-size:42px}
 .wr-riel{top:calc(env(safe-area-inset-top,0px) + 150px)}
}

@media (prefers-reduced-motion:reduce){
 .wr-g,.wr-g.activo,.wr-g [data-a],.wr-riel li,.wr-frase [data-a]{transition:none!important}
}