/* ==========================================================================
   ClaimWise — escena viva.
   Trasplante del sistema de neurocash: mismas capas, mismos tiempos, mismos
   colores. Sin librerias, sin imagenes: degradados, formas y un <canvas>.

   Todo va acotado bajo #escena (portada) o .cielo-cat (hubs), porque .hero
   y .sec-hero existen en 95 paginas mas y aqui reescribirian su cabecera.
   ========================================================================== */

@property --s1{syntax:'<color>';inherits:false;initial-value:#1F58E0}
@property --s2{syntax:'<color>';inherits:false;initial-value:#A9CCFF}

/* ---------- contenedor ---------- */
#escena{position:relative;overflow:hidden;background:none;padding:178px 0 0;min-height:740px;border-bottom:none}
#escena::before,#escena::after{display:none}
/* el contenido va POR ENCIMA del velo de reposo (z-index 8): al dormirse la
   escena se apaga el paisaje, no el mensaje. En neurocash el velo tapaba
   tambien el titular y a los 7 s la portada se volvia dificil de leer. */
#escena .cont{position:relative;z-index:10}
#escena .hero-grid{position:relative;z-index:10}

/* el texto del hero va sobre cielo: blanco, no gris */
#escena h1{color:var(--blanco)}
#escena h1 .az{color:var(--lima)}
#escena .sub{color:var(--blanco)}
#escena .pastilla{background:rgba(10,20,45,.34);border:1px solid rgba(255,255,255,.28);color:var(--blanco)}
#escena .pastilla .pt{background:var(--lima)}
#escena .hero-nota{color:var(--blanco)}
#escena .hero-nota svg{stroke:var(--lima)}

/* ---------- capas ---------- */
#escena .cielo{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,var(--s1) 0%,var(--s2) 100%);transition:--s1 1.6s ease,--s2 1.6s ease}
#escena .sol,#escena .luna{position:absolute;top:0;left:0;border-radius:50%;z-index:1;will-change:transform;transition:transform 1.6s ease,opacity 1.6s ease}
#escena .sol{width:100px;height:100px;background:radial-gradient(circle,#fff7e0 0,#ffe08a 55%,rgba(255,224,138,0) 72%);box-shadow:0 0 120px 40px rgba(255,235,170,.5)}
#escena .luna{width:78px;height:78px;background:radial-gradient(circle at 62% 40%,#fff 0,#e9f0ff 55%,rgba(233,240,255,0) 72%);box-shadow:0 0 90px 26px rgba(220,235,255,.38);opacity:0}
#escena canvas.fx{position:absolute;inset:0;z-index:3;pointer-events:none}
#escena .niebla{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity 1.4s ease;background:linear-gradient(180deg,rgba(226,232,240,0),rgba(226,232,240,.72) 60%,rgba(226,232,240,.88))}
/* El velo no es decorativo: es lo que hace legible el texto sobre el cielo.
   Medido en produccion a 1280px en fase dia (el caso peor): la bajada
   necesita alfa 0,27 y la nota 0,35 en x=49%, y el velo de neurocash daba
   0,09 ahi. Con el original, bajada 2,46:1 y nota 1,90:1 sobre 4,5 exigido. */
#escena .velo,.cielo-cat .velo{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(100deg,rgba(6,16,40,.58)0,rgba(6,16,40,.40) 45%,rgba(6,16,40,0) 78%)}
#escena .reposo{position:absolute;inset:0;z-index:8;pointer-events:none;background:rgba(4,8,22,.5);opacity:0;transition:opacity 1.4s ease}
#escena.dormida .reposo{opacity:1}

/* ---------- nubes: portada y hubs ---------- */
#escena .nubes,.cielo-cat .nubes{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity 1.2s ease}
#escena .nube,.cielo-cat .nube{position:absolute;background:#fff;border-radius:100px;animation:nube-x linear infinite}
#escena .nube::before,#escena .nube::after,.cielo-cat .nube::before,.cielo-cat .nube::after{content:"";position:absolute;background:#fff;border-radius:50%}
#escena .nube::before,.cielo-cat .nube::before{width:56%;height:190%;top:-96%;left:16%}
#escena .nube::after,.cielo-cat .nube::after{width:38%;height:150%;top:-64%;right:16%}
#escena .n1,.cielo-cat .n1{width:150px;height:44px;top:15%;opacity:.95;animation-duration:56s}
#escena .n2,.cielo-cat .n2{width:100px;height:32px;top:25%;opacity:.7;filter:blur(1px);animation-duration:74s;animation-delay:-20s}
#escena .n3,.cielo-cat .n3{width:210px;height:58px;top:33%;opacity:.85;animation-duration:64s;animation-delay:-40s}
#escena .n4,.cielo-cat .n4{width:120px;height:36px;top:10%;opacity:.6;filter:blur(1.5px);animation-duration:88s;animation-delay:-12s}
#escena .n5,.cielo-cat .n5{width:170px;height:48px;top:45%;opacity:.5;filter:blur(2px);animation-duration:100s;animation-delay:-55s}
@keyframes nube-x{0%{transform:translateX(-160%)}to{transform:translateX(120vw)}}

/* ---------- controles ---------- */
#escena .modos{position:absolute;top:134px;left:24px;z-index:9;display:flex;gap:4px;background:rgba(10,20,45,.34);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);padding:5px;border-radius:999px}
#escena .modos button{font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.92);background:0 0;border:0;padding:8px 13px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;display:flex;align-items:center;gap:6px}
#escena .modos button svg{width:13px;height:13px;fill:currentColor}
#escena .modos button.on{background:var(--lima);color:var(--lima-tinta)}
#escena .modos button:focus-visible{outline:2px solid #fff;outline-offset:2px}
#escena .clima-tag{position:absolute;top:86px;left:24px;z-index:9;display:flex;align-items:center;gap:8px;background:rgba(10,20,45,.34);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em}
#escena .clima-tag .pt{width:7px;height:7px;border-radius:50%;background:var(--lima)}

/* ---------- ciudad: portada y hubs ---------- */
#escena .ciudad,.cielo-cat .ciudad{position:relative;z-index:6;width:100%;display:block;margin-top:-2px}
#escena .ciudad svg,.cielo-cat .ciudad svg{width:100%;height:auto;display:block}
.ed-fondo{fill:#bbd6ff}.ed-medio{fill:#7fb0ff}.ed-frente{fill:#4d8bf0}.ed-torre{fill:#2f7bff}
.ed-techo{fill:#6aa0f5}.ed-chim{fill:#5b93ee}.ed-local{fill:#3f82f2}.ed-toldo{fill:#cdff3d}
.vent{fill:#eaf2ff;opacity:.85}.vent-luz{fill:#eaf2ff;opacity:.9}
.ed-fondo,.ed-medio,.ed-frente,.ed-torre,.ed-techo,.ed-chim,.ed-local,.vent,.vent-luz{transition:fill 1.6s ease,opacity 1.6s ease}
#escena.es-tarde .ed-fondo{fill:#7c5aa6}#escena.es-tarde .ed-medio{fill:#5b3e86}#escena.es-tarde .ed-frente{fill:#3e2a62}
#escena.es-tarde .ed-torre{fill:#2a1c48}#escena.es-tarde .ed-techo{fill:#4a3370}#escena.es-tarde .ed-chim{fill:#3e2a62}
#escena.es-tarde .ed-local{fill:#3e2a62}#escena.es-tarde .vent,#escena.es-tarde .vent-luz{fill:#ffc978;opacity:.95}
#escena.es-noche .ed-fondo{fill:#1a2c55}#escena.es-noche .ed-medio{fill:#152449}#escena.es-noche .ed-frente{fill:#101e40}
#escena.es-noche .ed-torre{fill:#0c1938}#escena.es-noche .ed-techo{fill:#122043}#escena.es-noche .ed-chim{fill:#101e40}
#escena.es-noche .ed-local{fill:#101e40}#escena.es-noche .vent{fill:#24345f;opacity:.9}
#escena.es-noche .vent-luz{fill:#ffd36b;opacity:1}
/* las tres .parpadea siguen siendo las mas nerviosas, pero ya no con un
   valor fijo: heredan su propio ritmo como las demas. */
#escena.es-noche .vent-luz.parpadea{animation:parpadeo var(--pd,2.6s) steps(1) var(--pr,0s) infinite}
#escena.es-noche .vent-lima{fill:#cdff3d!important;opacity:1}
@keyframes parpadeo{0%,88%{opacity:1}90%{opacity:.35}92%,to{opacity:1}}
.humo{transform-box:fill-box;transform-origin:center;opacity:0;animation:humear 4.2s ease-in infinite}
.humo.h2{animation-delay:1.4s}.humo.h3{animation-delay:2.8s}
.humo.i1{animation-delay:.7s}.humo.i2{animation-delay:2.1s}.humo.i3{animation-delay:3.5s}
@keyframes humear{0%{transform:translateY(0) scale(.5);opacity:0}18%{opacity:.5}to{transform:translateY(-42px) scale(1.7);opacity:0}}

/* ---------- hubs de categoria: cielo fijo, sin JavaScript ---------- */
.cielo-cat{position:relative;overflow:hidden;background:linear-gradient(180deg,#1f58e0 0,#2f7bff 36%,#5aa0ff 64%,#9ac4ff 86%,#d9e9ff 100%)}
.cielo-cat .sol{position:absolute;width:110px;height:110px;border-radius:50%;z-index:1;top:12%;left:74%;background:radial-gradient(circle,#fff7e0 0,#ffe08a 55%,rgba(255,224,138,0) 72%);box-shadow:0 0 120px 40px rgba(255,235,170,.5)}
.cielo-cat .cont{position:relative;z-index:6}

/* ---------- movil ---------- */
@media (max-width:900px){
  #escena{min-height:auto;padding:212px 0 0}
  #escena .modos{top:86px;left:50%;right:auto;transform:translateX(-50%);bottom:auto}
  #escena .modos button{padding:8px 11px;font-size:10.5px}
  #escena .sol,.cielo-cat .sol{width:62px;height:62px}
  #escena .luna{width:52px;height:52px}
  #escena .clima-tag{display:none}
}


/* ==========================================================================
   VIDA EN LAS VENTANAS
   neurocash solo anima sus ventanas de NOCHE y solo 3 de 21: de dia su ciudad
   es una foto, y claimwise heredaba eso tal cual. Aqui las 21 respiran en
   TODAS las fases, cada una con su duracion y su desfase propios: si todas
   parpadean a la vez parece un cartel, desacompasadas parece una ciudad.
   Se hace por nth-child para no tocar ni un byte del marcado.
   ========================================================================== */
@keyframes vivienda{0%,100%{opacity:.94}31%{opacity:.46}58%{opacity:.82}79%{opacity:.58}}
#escena .vent{animation:vivienda var(--vd,9.5s) ease-in-out var(--vr,0s) infinite}
#escena .ciudad g:not([class]) .vent:nth-child(1){--vd:8.3s;--vr:-0.4s}
#escena .ciudad g:not([class]) .vent:nth-child(2){--vd:11.7s;--vr:-5.2s}
#escena .ciudad g:not([class]) .vent:nth-child(3){--vd:6.9s;--vr:-2.7s}
#escena .ciudad g:not([class]) .vent:nth-child(4){--vd:13.1s;--vr:-8.9s}
#escena .ciudad g:not([class]) .vent:nth-child(5){--vd:9.4s;--vr:-1.3s}
#escena .ciudad g:not([class]) .vent:nth-child(6){--vd:7.6s;--vr:-6.6s}
#escena .ciudad g:not([class]) .vent:nth-child(7){--vd:12.2s;--vr:-3.8s}
#escena .ciudad g:not([class]) .vent:nth-child(8){--vd:10.1s;--vr:-11.1s}
#escena .ciudad g:not([class]) .vent:nth-child(9){--vd:6.4s;--vr:-0.9s}
#escena .ciudad g:not([class]) .vent:nth-child(10){--vd:14.3s;--vr:-7.4s}
#escena .ciudad g:not([class]) .vent:nth-child(11){--vd:8.8s;--vr:-4.5s}
#escena .ciudad g:not([class]) .vent:nth-child(12){--vd:11.2s;--vr:-9.7s}
#escena .ciudad g:not([class]) .vent:nth-child(13){--vd:7.1s;--vr:-2.1s}
#escena .ciudad g:not([class]) .vent:nth-child(14){--vd:9.9s;--vr:-12.6s}
#escena .ciudad g:not([class]) .vent:nth-child(15){--vd:12.8s;--vr:-5.9s}
#escena .ciudad g:not([class]) .vent:nth-child(16){--vd:6.6s;--vr:-1.8s}
#escena .ciudad g:not([class]) .vent:nth-child(17){--vd:13.7s;--vr:-10.3s}
#escena .ciudad g:not([class]) .vent:nth-child(18){--vd:10.6s;--vr:-3.2s}
#escena .ciudad g:not([class]) .vent:nth-child(19){--vd:8.1s;--vr:-7.9s}
#escena .ciudad g:not([class]) .vent:nth-child(20){--vd:11.4s;--vr:-6.1s}
#escena .ciudad g:not([class]) .vent:nth-child(21){--vd:9.2s;--vr:-13.4s}

/* De noche las que llevan luz parpadean de verdad, y ya no son 3 sino 8,
   cada una con su propio ritmo. */
#escena.es-noche .vent-luz{animation:parpadeo var(--pd,3.2s) steps(1) var(--pr,0s) infinite}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(4){--pd:3.2s;--pr:-0.6s}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(6){--pd:4.1s;--pr:-2.3s}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(8){--pd:2.8s;--pr:-1.1s}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(10){--pd:3.7s;--pr:-3.4s}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(12){--pd:4.6s;--pr:-0.2s}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(16){--pd:3.4s;--pr:-2.9s}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(18){--pd:2.9s;--pr:-1.7s}
#escena.es-noche .ciudad g:not([class]) .vent:nth-child(20){--pd:4.3s;--pr:-3.9s}

/* ---------- accesibilidad: esto para la escena entera, tambien en los hubs ---------- */
@media (prefers-reduced-motion:reduce){
  #escena .nube,.cielo-cat .nube,.humo,.vent-luz.parpadea,
  #escena .vent,#escena.es-noche .vent-luz{animation:none!important}
  .humo{opacity:.4!important}
  #escena .cielo{transition:none!important}
  #escena .sol,#escena .luna{transition:none!important}
}