/* ==========================================================================
   NeuroCash — estilos-ui.css
   Estilos de la HOME y las 5 páginas de CATEGORÍA únicamente.
   Los 40 artículos y las páginas legales siguen usando solo estilos-blog.css.
   Este archivo se carga DESPUÉS de estilos-blog.css.
   ========================================================================== */

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

/* ---------- NAV transparente sobre el cielo ---------- */
body.ui-sky nav{position:fixed;top:0;left:0;right:0;background:transparent;box-shadow:none;
  border-bottom:1px solid transparent;transition:background .3s,box-shadow .3s,border-color .3s;backdrop-filter:none}
body.ui-sky nav .marca{color:#fff;transition:color .3s}
body.ui-sky nav .enlaces a{color:rgba(255,255,255,.86)}
body.ui-sky nav .enlaces a:hover{color:#fff}
body.ui-sky nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom-color:var(--linea);box-shadow:0 4px 24px rgba(20,30,60,.07)}
body.ui-sky nav.solid .marca{color:var(--tinta)}
body.ui-sky nav.solid .enlaces a{color:var(--gris)}
body.ui-sky nav.solid .enlaces a:hover{color:var(--azul)}

/* ==========================================================================
   HERO VIVO (cielo + nubes + ciudad)
   ========================================================================== */
.escena{position:relative;overflow:hidden;padding:178px 0 0;min-height:740px;border-bottom:none}
.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;border-radius:50%;z-index:1;
  transition:top 1.6s ease,left 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);top:70px;left:60%}
.escena .luna{width:78px;height:78px;
  background:radial-gradient(circle at 62% 40%,#FFFFFF 0%,#E9F0FF 55%,rgba(233,240,255,0) 72%);
  box-shadow:0 0 90px 26px rgba(220,235,255,.38);opacity:0;top:84px;left:70%}
.escena canvas.fx{position:absolute;inset:0;z-index:3;pointer-events:none}

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

.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))}
.velo{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,16,40,.44) 0%,rgba(6,16,40,.18) 34%,transparent 62%)}
.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}

/* control de modos */
.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}
.modos button{font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.85);background:transparent;border:none;padding:8px 13px;border-radius:999px;
  cursor:pointer;transition:background .2s,color .2s;display:flex;align-items:center;gap:6px}
.modos button svg{width:13px;height:13px;fill:currentColor}
.modos button.on{background:var(--lima);color:var(--lima-tinta)}
.modos button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.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}
.clima-tag .pt{width:7px;height:7px;border-radius:50%;background:var(--lima)}
@media(max-width:900px){.clima-tag{display:none}}

/* contenido del hero */
.escena-in{position:relative;z-index:6;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-bottom:34px}
.sube{opacity:0;transform:translateY(22px);animation:sube .85s cubic-bezier(.2,.75,.2,1) forwards}
@keyframes sube{to{opacity:1;transform:none}}
.t1{animation-delay:.05s}.t2{animation-delay:.16s}.t3{animation-delay:.28s}.t4{animation-delay:.4s}.t5{animation-delay:.24s}

.etiqueta{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);
  padding:8px 15px;border-radius:999px;backdrop-filter:blur(6px)}
.etiqueta .vivo{width:7px;height:7px;border-radius:50%;background:var(--lima);
  box-shadow:0 0 0 0 rgba(205,255,61,.7);animation:latir 2.4s infinite}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(205,255,61,.55)}70%{box-shadow:0 0 0 9px rgba(205,255,61,0)}100%{box-shadow:0 0 0 0 rgba(205,255,61,0)}}

.escena h1{font-size:clamp(38px,5.6vw,62px);font-weight:700;color:#fff;line-height:1.06;
  margin:22px 0 20px;max-width:600px;text-shadow:0 2px 30px rgba(15,40,120,.3)}
.escena h1 .lima{color:var(--lima)}
.escena .bajada{font-size:19px;color:rgba(255,255,255,.94);max-width:500px;margin-bottom:30px;
  text-shadow:0 1px 16px rgba(10,25,70,.3)}
.acciones{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.bt{font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;padding:15px 26px;
  border-radius:14px;text-decoration:none;transition:transform .15s,box-shadow .2s;display:inline-block}
.bt-lima{background:var(--lima);color:var(--lima-tinta);box-shadow:0 16px 34px -12px rgba(205,255,61,.55)}
.bt-lima:hover{transform:translateY(-3px)}
.bt-vidrio{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px)}
.bt-vidrio:hover{transform:translateY(-3px);background:rgba(255,255,255,.24)}

/* tarjeta panel */
.panel-wrap{position:relative;perspective:1400px}
.panel{position:relative;z-index:2;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:26px;
  box-shadow:0 30px 70px -28px rgba(20,40,110,.4);padding:26px;overflow:hidden;transform:rotateY(-6deg) rotateX(2deg)}
.panel::before{content:"";position:absolute;top:0;left:-60%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg);animation:brillo 5.5s ease-in-out 1.4s infinite}
@keyframes brillo{0%{left:-60%}22%,100%{left:130%}}
.panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.panel-top .tl{font-size:13px;font-weight:800;font-family:'Space Grotesk'}
.panel-top .ok{font-size:11px;font-weight:800;color:var(--lima-tinta);background:var(--lima);padding:4px 10px;border-radius:999px}
.medidor-wrap{display:flex;align-items:center;gap:20px;padding:6px 4px 14px}
.medidor{position:relative;width:150px;flex:0 0 150px}
.medidor svg{width:100%;display:block}
.arco-bg{fill:none;stroke:var(--claro);stroke-width:16;stroke-linecap:round}
.arco-fg{fill:none;stroke:url(#ncgrad);stroke-width:16;stroke-linecap:round;
  stroke-dasharray:339;stroke-dashoffset:339;transition:stroke-dashoffset 2.6s cubic-bezier(.2,.8,.2,1)}
.medidor .cifra{position:absolute;left:0;right:0;top:52%;text-align:center;font-family:'Space Grotesk';font-weight:700;font-size:36px}
.medidor .pie{position:absolute;left:0;right:0;top:82%;text-align:center;font-size:11px;font-weight:700;
  color:var(--lima-osc);text-transform:uppercase;letter-spacing:.05em}
.medidor-side .h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);margin-bottom:6px}
.medidor-side .p{font-size:14px;color:var(--gris);line-height:1.5}
.medidor-side .p b{color:var(--tinta)}
.panel hr{border:none;border-top:1px solid var(--linea);margin:6px 0 16px}
.filas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini{background:var(--claro);border-radius:16px;padding:14px 16px}
.mini .k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gris)}
.mini .v{font-family:'Space Grotesk';font-weight:700;font-size:22px;margin-top:4px}
.mini .v .g{color:var(--lima-osc);font-size:14px}
.mini .barra{height:7px;background:#fff;border-radius:99px;margin-top:9px;overflow:hidden}
.mini .barra span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--azul),var(--cielo2));
  border-radius:99px;transition:width 1.8s ease .5s}
.chispa{display:flex;align-items:flex-end;gap:4px;height:26px;margin-top:9px}
.chispa i{flex:1;background:#fff;border-radius:3px 3px 0 0}
.chispa i.on{background:linear-gradient(180deg,var(--cielo2),var(--azul))}
.ficha{position:absolute;z-index:4;background:var(--negro);color:#fff;border-radius:16px;padding:13px 16px;
  box-shadow:0 30px 70px -28px rgba(20,40,110,.5);display:flex;align-items:center;gap:11px;
  bottom:-18px;right:-10px;animation:flotar 5s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ficha .ic{width:34px;height:34px;border-radius:10px;background:var(--lima);display:grid;place-items:center;flex:0 0 34px}
.ficha .ic svg{width:18px;height:18px;stroke:var(--lima-tinta);fill:none;stroke-width:3}
.ficha .fk{font-size:11px;color:#9AA6BC;font-weight:600;display:block}
.ficha .fv{font-family:'Space Grotesk';font-weight:700;font-size:17px;line-height:1.1}

/* franja de confianza */
.confianza{position:relative;z-index:6;background:#fff;border-radius:20px;
  box-shadow:0 30px 70px -28px rgba(20,40,110,.34);display:grid;grid-template-columns:repeat(4,1fr);
  margin:8px 0 0;overflow:hidden}
.confianza .celda{display:flex;align-items:center;gap:13px;padding:20px 22px;border-right:1px solid var(--linea)}
.confianza .celda:last-child{border-right:none}
.confianza .ci{width:40px;height:40px;border-radius:11px;background:var(--claro);display:grid;place-items:center;flex:0 0 40px}
.confianza .ci svg{width:21px;height:21px;stroke:var(--azul);fill:none;stroke-width:2}
.confianza .tt{font-size:14px;font-weight:800;color:var(--tinta);display:block;line-height:1.3}
.confianza .ts{font-size:12px;color:var(--gris);display:block;line-height:1.3}
@media(max-width:760px){.confianza{grid-template-columns:1fr 1fr}.confianza .celda:nth-child(2){border-right:none}}

/* ---------- CIUDAD (skyline) ---------- */
.ciudad{position:relative;z-index:6;width:100%;display:block;margin-top:-2px}
.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}
/* atardecer */
.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}
/* noche */
.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}
.escena.es-noche .vent-luz.parpadea{animation:parpadeo 3.2s steps(1) infinite}
.escena.es-noche .vent-lima{fill:#CDFF3D!important;opacity:1}
@keyframes parpadeo{0%,88%{opacity:1}90%{opacity:.35}92%,100%{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}100%{transform:translateY(-42px) scale(1.7);opacity:0}}

@media(max-width:900px){
  .escena{min-height:auto;padding:212px 0 0}
  .escena-in{grid-template-columns:1fr;gap:46px}
  .panel-wrap{max-width:430px}
  .panel{transform:none}
  /* el control de modos pasa a estar centrado bajo el menú */
  .modos{top:86px;left:50%;right:auto;transform:translateX(-50%);bottom:auto}
  .modos button{padding:8px 11px;font-size:10.5px}
  /* en pantalla estrecha el sol y la luna viajan por la franja de cielo
     que queda entre el control de modos y el titular */
  .escena .sol{width:62px;height:62px}
  .escena .luna{width:52px;height:52px}
}

/* ==========================================================================
   FRANJA DE DATOS (fondo negro, números que suben)
   ========================================================================== */
.franja{background:var(--negro);color:#fff;position:relative;overflow:hidden}
.franja::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 120% at 85% 50%,rgba(47,123,255,.35),transparent 60%),
             radial-gradient(50% 100% at 10% 120%,rgba(205,255,61,.18),transparent 60%)}
.franja .int{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:52px 20px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.dato .n{font-family:'Space Grotesk';font-weight:700;font-size:clamp(32px,4vw,48px);line-height:1;
  background:linear-gradient(120deg,#fff,#BFD4FF);-webkit-background-clip:text;background-clip:text;color:transparent}
.dato .n .lima{background:linear-gradient(120deg,var(--lima),#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.dato .c{font-size:13.5px;color:#9AA6BC;margin-top:8px;font-weight:500}
@media(max-width:720px){.franja .int{grid-template-columns:1fr 1fr;gap:30px 20px}}

/* ==========================================================================
   SECCIONES DE LA HOME
   ========================================================================== */
.enc{margin:64px 0 10px}
.enc .ojo{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--azul);margin-bottom:12px}
.enc .ojo .p{width:6px;height:6px;border-radius:50%;background:var(--lima-osc)}
.enc h2{font-size:clamp(26px,3.4vw,38px);font-weight:700;max-width:660px;line-height:1.1}
.enc p{font-size:16.5px;color:var(--gris);max-width:560px;margin-top:10px}

/* aparición al hacer scroll */
.ap{opacity:0;transform:translateY(28px) scale(.99);filter:blur(4px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s}
.ap.visto{opacity:1;transform:none;filter:none}

/* tarjetas de tema (reemplazan .cat-card en la home) */
.temas{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:30px 0 10px}
.tema{position:relative;background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:26px;
  overflow:hidden;text-decoration:none;color:var(--tinta);transition:transform .25s,box-shadow .25s,border-color .25s}
.tema::before{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(47,123,255,.06),rgba(205,255,61,.06));opacity:0;transition:opacity .25s}
.tema:hover{transform:translateY(-6px);box-shadow:0 20px 46px -20px rgba(20,40,110,.28);border-color:transparent}
.tema:hover::before{opacity:1}
.tema>*{position:relative}
.tema .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--claro);transition:transform .25s}
.tema:hover .ic{transform:scale(1.08) rotate(-4deg)}
.tema .ic svg{width:25px;height:25px;stroke:var(--azul);fill:none;stroke-width:2}
.tema h3{font-size:20px;margin-bottom:7px;font-family:'Space Grotesk'}
.tema p{font-size:14.5px;color:var(--gris);margin-bottom:16px;line-height:1.55}
.tema .ir{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--azul);
  display:inline-flex;align-items:center;gap:7px}
.tema .ir svg{width:15px;height:15px;transition:transform .2s;stroke:currentColor;fill:none;stroke-width:2.5}
.tema:hover .ir svg{transform:translateX(4px)}
.tema .num{position:absolute;top:24px;right:24px;font-family:'Space Grotesk';font-size:12px;font-weight:700;
  color:var(--gris);background:var(--claro);padding:4px 10px;border-radius:999px}
.tema.todo{background:linear-gradient(140deg,var(--azul),var(--azul-osc));color:#fff;border:none;
  display:flex;flex-direction:column;justify-content:center}
.tema.todo h3{color:#fff}.tema.todo p{color:#DBE8FF}.tema.todo .ir{color:#fff}
@media(max-width:860px){.temas{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.temas{grid-template-columns:1fr}}

/* ==========================================================================
   HERO LIGERO DE CATEGORÍA (cielo estático + ciudad, sin motor)
   ========================================================================== */
.cat-cielo{position:relative;overflow:hidden;padding:118px 0 0;
  background:linear-gradient(180deg,#1F58E0 0%,#2F7BFF 36%,#5AA0FF 64%,#9AC4FF 86%,#D9E9FF 100%)}
.cat-cielo .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)}
.cat-cielo .velo{background:linear-gradient(100deg,rgba(6,16,40,.4) 0%,rgba(6,16,40,.14) 40%,transparent 68%)}
.cat-in{position:relative;z-index:6;padding-bottom:34px}
.cat-in .miga{font-size:12px;font-weight:700;color:rgba(255,255,255,.78);margin-bottom:14px}
.cat-in .miga a{color:#fff;text-decoration:none}
.cat-in .miga a:hover{text-decoration:underline}
.cat-in h1{font-size:clamp(30px,4.8vw,46px);font-weight:700;color:#fff;line-height:1.08;max-width:760px;
  text-shadow:0 2px 30px rgba(15,40,120,.3)}
.cat-in .bajada{font-size:17px;color:rgba(255,255,255,.93);margin:16px 0 4px;max-width:700px;
  text-shadow:0 1px 16px rgba(10,25,70,.3)}
.cat-in .cuenta{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);padding:8px 15px;border-radius:999px;backdrop-filter:blur(6px)}
.cat-in .cuenta .p{width:7px;height:7px;border-radius:50%;background:var(--lima)}

/* respeto por quien prefiere menos movimiento */
@media(prefers-reduced-motion:reduce){
  .sube,.ap{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .nube,.ficha,.panel::before,.etiqueta .vivo,.humo,.vent-luz.parpadea{animation:none!important}
  .humo{opacity:.4!important}
}