/* =============================================================
   Repertorio ARINSA · Clientes Valiosos
   App oscura, con profundidad y movimiento.
   Satoshi (marca) + IBM Plex Mono (cifras y micro-etiquetas)
   ============================================================= */

@font-face{font-family:Satoshi;src:url(satoshi-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Satoshi;src:url(satoshi-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Satoshi;src:url(satoshi-900.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Plex;src:url(plex-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(plex-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --teal:#004250; --teal-alto:#0A6177; --teal-hondo:#00222B; --noche:#001A21;
  --hueso:#F5F5F0; --tenue:rgba(245,245,240,.70); --debil:rgba(245,245,240,.46);
  --oro:#F9C54B; --oro-alto:#FFD873; --oro-hondo:#C9951C;
  --verde:#5FA47C; --ambar:#C5A46D; --rojo:#D06A4E;
  --vidrio:rgba(255,255,255,.055);
  --vidrio-2:rgba(255,255,255,.085);
  --filo:rgba(255,255,255,.11);
  --filo-2:rgba(255,255,255,.18);
  --sombra:0 18px 40px -18px rgba(0,12,16,.9);
  --r:18px; --r-g:24px;
  --barra:58px; --dock:78px; --col:620px;
  --e:cubic-bezier(.22,.78,.2,1);
  --rebote:cubic-bezier(.34,1.46,.5,1);
  color-scheme:dark;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--hueso); min-height:100svh;
  font-family:Satoshi,"Segoe UI",system-ui,sans-serif; font-weight:500;
  font-size:16.5px; line-height:1.55; letter-spacing:-.006em;
  overflow-x:hidden;
  background:var(--noche);
}
/* campo de fondo: luz honda, sin tramas */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(90% 55% at 12% -8%, #0B6A80 0%, rgba(11,106,128,0) 58%),
    radial-gradient(80% 50% at 92% 8%, #0A4F62 0%, rgba(10,79,98,0) 55%),
    linear-gradient(180deg,#003E4C 0%,#00252F 52%,#001A21 100%);
}
body::after{  /* halo dorado muy tenue, da cuerpo al negro */
  content:"";position:fixed;inset:auto 0 -30% 0;height:60%;z-index:-1;
  background:radial-gradient(60% 100% at 50% 100%, rgba(249,197,75,.10) 0%, rgba(249,197,75,0) 70%);
  pointer-events:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
::selection{background:var(--oro);color:var(--teal-hondo)}

/* ---------- barra ---------- */
.top[hidden]{display:none}
.top{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--barra);
  display:flex;align-items:center;gap:11px;
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
  background:rgba(0,26,33,.72);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--filo);
}
.top .cv{height:19px;flex:none;display:block}
.top .ar{height:23px;flex:none;display:block;opacity:.95}
.top .sep{width:1px;height:18px;background:var(--filo-2);flex:none}
.top .cli{height:21px;opacity:.9}
.top .quien{cursor:pointer;border-radius:999px;padding:7px 10px 7px 5px;min-height:42px;transition:background .2s}
.top .quien:active{background:var(--vidrio-2)}
.top .quien{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:-.01em;color:var(--tenue);
  white-space:nowrap;max-width:46vw;overflow:hidden;
}
.top .quien .ini{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--oro-alto),var(--oro-hondo));
  color:var(--teal-hondo);font-family:Plex;font-weight:600;font-size:11px;
}

/* ---------- vistas ---------- */
main.puerta-modo{padding:0 !important}
main{
  display:block;padding-top:var(--barra);
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px) + 10px);
  padding-left:max(18px,env(safe-area-inset-left,0px));
  padding-right:max(18px,env(safe-area-inset-right,0px));
}
main > *{max-width:var(--col);margin-inline:auto}
@keyframes entra{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sube{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
.vista{animation:entra .42s var(--e) both}
.rv{animation:sube .5s var(--e) both;animation-delay:calc(var(--i,0)*55ms)}
@media (prefers-reduced-motion:reduce){.vista,.rv{animation:none}}

/* ---------- tipografía ---------- */
h1{font-weight:900;font-size:clamp(28px,7.6vw,38px);line-height:1.08;letter-spacing:-.04em;margin:0;text-wrap:balance}
h2{font-weight:900;font-size:19px;letter-spacing:-.03em;margin:0}
.titulo-ico{display:flex;gap:15px;align-items:flex-start}
.titulo-ico .ic{
  width:50px;height:50px;flex:none;border-radius:15px;display:grid;place-items:center;
  background:rgba(249,197,75,.14);border:1px solid rgba(249,197,75,.3);margin-top:3px;
}
.titulo-ico .ic svg{width:25px;height:25px;fill:none;stroke:var(--oro);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.titulo-ico .eyebrow{margin-bottom:6px}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:Plex;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--oro);margin:0 0 10px;
}
.eyebrow::before{content:"";width:16px;height:1px;background:currentColor;opacity:.7}
.lede{font-size:16.5px;line-height:1.5;color:var(--tenue);margin:12px 0 0}
.guia{
  display:flex;gap:9px;align-items:flex-start;
  font-size:14.5px;line-height:1.45;color:var(--tenue);margin:10px 0 0;max-width:40em;
}
.guia::before{
  content:"";width:3px;align-self:stretch;flex:none;border-radius:3px;
  background:linear-gradient(180deg,var(--oro),rgba(249,197,75,.15));margin-top:2px;
}
.mini{font-family:Plex;font-size:11px;letter-spacing:.06em;color:var(--debil);text-transform:uppercase}
.nota{font-size:12.5px;line-height:1.55;color:var(--debil);margin:22px 0 0}
.puerta .nota{font-size:11px;line-height:1.5;margin-top:18px;text-align:center;max-width:34em;margin-inline:auto}

/* ---------- superficies ---------- */
.seccion{margin-top:26px}
.seccion > .cab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.seccion > .cab h2{flex:1}
.seccion > .cab .cnt{font-family:Plex;font-size:11px;color:var(--debil);letter-spacing:.08em}

/* ---------- botones ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:16px 22px;border-radius:999px;
  font-weight:900;font-size:15.5px;letter-spacing:-.02em;
  background:linear-gradient(170deg,var(--oro-alto) 0%,var(--oro) 48%,var(--oro-hondo) 100%);
  color:var(--teal-hondo);
  box-shadow:0 10px 24px -8px rgba(249,197,75,.55), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .14s var(--e),box-shadow .2s var(--e),filter .2s;
  overflow:hidden;
}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.4) 48%,transparent 62%);
  transform:translateX(-120%);
}
.btn:hover::after{animation:brillo .8s var(--e)}
@keyframes brillo{to{transform:translateX(120%)}}
.btn:active{transform:translateY(2px) scale(.985);box-shadow:0 4px 12px -6px rgba(249,197,75,.5), inset 0 1px 0 rgba(255,255,255,.4)}
.btn.fantasma{
  background:var(--vidrio-2);color:var(--hueso);border:1px solid var(--filo-2);
  box-shadow:none;
}
.btn.fantasma:active{transform:translateY(1px) scale(.985);background:rgba(255,255,255,.12)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.botones{display:flex;gap:10px;margin-top:22px}
.botones .btn{flex:1;font-size:14.5px;padding-inline:14px;text-align:center}

.volver{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:9px 15px 9px 12px;border-radius:999px;
  background:var(--vidrio);border:1px solid var(--filo);
  font-size:13px;font-weight:700;color:var(--tenue);
  transition:transform .14s var(--e),background .2s;
}
.volver:active{transform:scale(.96);background:var(--vidrio-2)}
.volver svg{width:15px;height:15px;fill:none;stroke:var(--oro);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- teclado de ingreso ---------- */
.puerta{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:22px max(18px,env(safe-area-inset-left,0px)) calc(18px + env(safe-area-inset-bottom,0px));
  max-width:var(--col);margin-inline:auto;
}
.marca-doble{display:flex;align-items:center;gap:16px;justify-content:center}
.marca-doble img.cv{height:23px}
.marca-doble img.ar{height:40px}
.marca-doble .d{width:1px;height:28px;background:var(--filo-2)}
.puerta h1{text-align:center;margin-top:22px;font-size:clamp(25px,6.8vw,33px)}
.puerta .lede{text-align:center;max-width:26em;margin-inline:auto;font-size:15px;margin-top:12px}
.puerta .guia{margin-top:22px;font-size:14px;line-height:1.5;max-width:34em;margin-inline:auto}
.ingreso{display:flex;flex-direction:column;margin-top:24px}
.ingreso .rotulo{
  font-family:Plex;font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--debil);margin-bottom:10px;
}
.ced{
  width:100%;padding:17px 20px;border-radius:var(--r);
  background:var(--vidrio);border:1px solid var(--filo);color:var(--hueso);
  font-family:Plex;font-weight:600;font-size:22px;letter-spacing:.1em;
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.ced::placeholder{color:rgba(245,245,240,.2);letter-spacing:.1em}
.ced:focus{border-color:rgba(249,197,75,.55);background:var(--vidrio-2);
  box-shadow:0 0 0 4px rgba(249,197,75,.12)}
.ced.mal{border-color:var(--rojo);animation:tiembla .42s}
@keyframes tiembla{0%,100%{transform:translateX(0)}18%{transform:translateX(-7px)}36%{transform:translateX(7px)}56%{transform:translateX(-4px)}78%{transform:translateX(4px)}}
.aviso{font-size:13px;color:var(--rojo);min-height:1.35em;margin:10px 0 0;font-weight:700}
.ingreso .btn{margin-top:8px}

/* ---------- bienvenida ---------- */
.bienvenida{
  position:fixed;inset:0;z-index:90;background:var(--noche);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;
}
.bienvenida::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 45% at 50% 38%, rgba(10,106,128,.9) 0%, rgba(0,26,33,0) 70%),var(--noche);
}
.bienvenida > *{position:relative}
.bienvenida .marca{height:84px;display:grid;place-items:center}
.bienvenida .marca svg{width:84px;height:84px;filter:drop-shadow(0 0 26px rgba(249,197,75,.35))}
.bienvenida .mitad{opacity:0}
.bienvenida .hilo{width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--oro),transparent);margin-top:24px}
.bienvenida .hola{font-family:Plex;font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--debil);margin-top:24px;opacity:0}
.bienvenida .quien{font-weight:900;font-size:clamp(30px,9.4vw,48px);line-height:1.04;letter-spacing:-.045em;color:var(--oro);margin-top:10px;opacity:0}
.bienvenida.sale{animation:disuelve .52s var(--e) forwards}
@keyframes disuelve{to{opacity:0;transform:scale(1.04);visibility:hidden}}
@keyframes entraIzq{from{opacity:0;transform:translateX(-30px) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes entraDer{from{opacity:0;transform:translateX(30px) rotate(14deg)}to{opacity:1;transform:none}}
@keyframes tiende{to{width:min(240px,60vw)}}
@keyframes asoma{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.anim .mitad.izq{animation:entraIzq .66s var(--rebote) .08s forwards}
.anim .mitad.der{animation:entraDer .66s var(--rebote) .2s forwards}
.anim .hilo{animation:tiende .5s var(--e) .66s forwards}
.anim .hola{animation:asoma .42s var(--e) .94s forwards}
.anim .quien{animation:asoma .52s var(--rebote) 1.08s forwards}
@media (prefers-reduced-motion:reduce){
  .anim .mitad,.anim .hola,.anim .quien{animation:none;opacity:1}
  .anim .hilo{animation:none;width:min(240px,60vw)}
}

/* ---------- inicio ---------- */
.saludo{padding:24px 0 6px}
.saludo h1 span{color:var(--oro)}
.pulso{
  display:flex;align-items:center;gap:16px;padding:18px;margin-top:20px;
  background:var(--vidrio);border:1px solid var(--filo);border-radius:var(--r-g);
}
.pulso .txt{flex:1;min-width:0}
.pulso .ir{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(249,197,75,.14);border:1px solid rgba(249,197,75,.3);transition:transform .15s var(--e)}
.pulso .ir:active{transform:scale(.9)}
.pulso .ir svg{width:16px;height:16px;fill:none;stroke:var(--oro);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pulso .txt b{display:block;font-weight:900;font-size:16px;letter-spacing:-.03em}
.pulso .txt span{display:block;font-size:13.5px;color:var(--tenue);margin-top:3px;line-height:1.35}
.anillo{position:relative;width:64px;height:64px;flex:none}
.anillo svg{width:64px;height:64px;transform:rotate(-90deg)}
.anillo .cif{position:absolute;inset:0;display:grid;place-items:center;font-family:Plex;font-weight:600;font-size:15px;color:var(--oro)}

.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.ficha{
  position:relative;display:flex;flex-direction:column;gap:10px;
  padding:18px 16px 17px;border-radius:var(--r-g);overflow:hidden;
  background:var(--vidrio);border:1px solid var(--filo);
  transition:transform .16s var(--e),border-color .2s,box-shadow .25s;
  min-height:146px;
}
.ficha::before{
  content:"";position:absolute;inset:-40% -30% auto auto;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,var(--tono) 0%,transparent 68%);opacity:.5;
}
.ficha:active{transform:scale(.97);border-color:var(--filo-2)}
.ficha .ic{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);border:1px solid var(--filo-2);position:relative;
}
.ficha .ic svg{width:21px;height:21px;fill:none;stroke:var(--oro);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ficha .t{display:block;font-weight:900;font-size:15.5px;letter-spacing:-.03em;line-height:1.22;position:relative}
.ficha .cifra-f{
  display:flex;align-items:baseline;gap:6px;margin-top:auto;position:relative;
  font-family:Plex;font-weight:600;font-size:28px;letter-spacing:-.03em;color:var(--oro);line-height:1;
}
.ficha .cifra-f small{font-family:Satoshi;font-weight:500;font-size:12px;letter-spacing:-.01em;color:var(--tenue)}

/* ---------- listas con tarjeta ---------- */
.tarjetas{display:grid;gap:10px;margin-top:4px}
.item{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
  width:100%;padding:15px 16px;border-radius:var(--r);
  background:var(--vidrio);border:1px solid var(--filo);
  transition:transform .15s var(--e),background .2s,border-color .2s;
}
.item:active{transform:scale(.982);background:var(--vidrio-2);border-color:var(--filo-2)}
.item .num{
  width:38px;height:38px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:rgba(249,197,75,.13);border:1px solid rgba(249,197,75,.26);
  font-family:Plex;font-weight:600;font-size:12px;color:var(--oro);
}
.item .num.icono svg{width:20px;height:20px;fill:none;stroke:var(--oro);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.item .cuerpo{min-width:0}
.item .t{display:block;font-weight:700;font-size:15.5px;letter-spacing:-.025em;line-height:1.3}
.item .d{display:block;font-size:13.5px;color:var(--tenue);margin-top:4px;line-height:1.4}
.item .fl{width:16px;height:16px;flex:none;fill:none;stroke:var(--oro);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.item .insignia{
  font-family:Plex;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--verde);border:1px solid rgba(95,164,124,.4);border-radius:999px;padding:3px 8px;margin-top:7px;display:inline-block;
}

/* buscador */
.buscar{
  display:flex;align-items:center;gap:11px;padding:13px 16px;margin-top:4px;
  background:var(--vidrio);border:1px solid var(--filo);border-radius:999px;
  transition:border-color .2s,box-shadow .2s;
}
.buscar:focus-within{border-color:rgba(249,197,75,.5);box-shadow:0 0 0 4px rgba(249,197,75,.1)}
.buscar svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--debil);stroke-width:2.1;stroke-linecap:round}
.buscar input{flex:1;min-width:0;background:none;border:0;outline:none;font:inherit;color:var(--hueso);font-size:15.5px}
.buscar input::placeholder{color:var(--debil)}
.vacio{text-align:center;color:var(--tenue);font-size:14.5px;padding:30px 10px}

/* ---------- detalle de situación ---------- */
.frase{
  position:relative;padding:24px 22px;border-radius:var(--r-g);margin-top:4px;overflow:hidden;
  background:linear-gradient(155deg,rgba(249,197,75,.17) 0%,rgba(249,197,75,.045) 45%,var(--vidrio) 100%);
  border:1px solid rgba(249,197,75,.3);
  box-shadow:0 20px 44px -22px rgba(249,197,75,.45);
}
.frase p{margin:0;font-weight:900;font-size:clamp(20px,5.4vw,25px);line-height:1.28;letter-spacing:-.035em}
.copiar{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 16px;border-radius:999px;
  background:rgba(249,197,75,.16);border:1px solid rgba(249,197,75,.34);color:var(--oro);
  font-size:13.5px;font-weight:700;transition:transform .14s var(--e),background .2s;
}
.copiar:active{transform:scale(.95)}
.copiar.listo{background:rgba(95,164,124,.2);border-color:rgba(95,164,124,.45);color:var(--verde)}
.copiar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.pasos{counter-reset:p;margin-top:4px;display:grid;gap:10px}
.paso{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:15px 16px;background:var(--vidrio);border:1px solid var(--filo);border-radius:var(--r);
}
.paso .n{
  width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--oro);color:var(--teal-hondo);font-family:Plex;font-weight:600;font-size:12px;
}
.paso p{margin:0;font-size:15.5px;line-height:1.48}
.evitar{
  margin-top:14px;padding:16px 18px;border-radius:var(--r);
  background:rgba(208,106,78,.1);border:1px solid rgba(208,106,78,.3);
}
.evitar .lbl svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.evitar .lbl{display:flex;align-items:center;gap:7px;font-family:Plex;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
.evitar p{margin:9px 0 0;font-size:15px;color:var(--tenue);line-height:1.45}

/* ---------- sesiones: acordeón ---------- */
.grupo{margin-top:30px}
.tira{margin-bottom:13px;padding-left:2px}
.ses-ref{
  display:flex;align-items:center;gap:10px;
  font-family:Plex;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);
}
.ses-ref em{font-style:normal;font-weight:400;letter-spacing:.06em;color:var(--debil);font-size:10.5px}
.ses-ref::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(249,197,75,.45),transparent)}
.ses-tit{
  font-weight:900;font-size:clamp(22px,6vw,27px);line-height:1.1;letter-spacing:-.04em;
  margin:9px 0 0;text-wrap:balance;
}
.mas{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:13px 16px;border-radius:var(--r);
  background:transparent;border:1px dashed var(--filo-2);color:var(--tenue);
  font-size:14px;font-weight:700;letter-spacing:-.015em;
  transition:transform .15s var(--e),background .2s,color .2s;
}
.mas:active{transform:scale(.985);background:var(--vidrio);color:var(--hueso)}
.mas svg{width:15px;height:15px;fill:none;stroke:var(--oro);stroke-width:2.4;stroke-linecap:round}
.item.tenue{background:rgba(255,255,255,.03)}
.item.tenue .t{color:var(--tenue);font-weight:700}
.idea{padding:17px 18px;background:var(--vidrio);border:1px solid var(--filo);border-radius:var(--r)}
.idea + .idea{margin-top:10px}
.idea .cab-i{display:flex;gap:11px;align-items:center}
.idea .pt{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(249,197,75,.16);border:1px solid rgba(249,197,75,.3);
  font-family:Plex;font-weight:600;font-size:11px;color:var(--oro)}
.idea h3{margin:0;font-weight:900;font-size:16px;letter-spacing:-.03em;color:var(--oro);flex:1}
.idea p{margin:9px 0 0 35px;font-size:15.5px;line-height:1.5;color:var(--tenue)}
.remate{
  margin-top:18px;padding:19px 20px;border-radius:var(--r-g);
  background:linear-gradient(150deg,rgba(10,97,119,.75),rgba(0,52,65,.75));
  border:1px solid var(--filo-2);
  font-weight:700;font-size:16px;line-height:1.42;letter-spacing:-.025em;
}

/* ---------- conversación ---------- */
.conv{display:flex;flex-direction:column;min-height:calc(100svh - var(--barra) - var(--dock))}
.conv-top{position:sticky;top:var(--barra);z-index:20;padding:12px 0 14px;
  background:rgba(0,26,33,.9);backdrop-filter:blur(20px) saturate(1.3)}
.conv-top::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:16px;
  background:linear-gradient(180deg,rgba(0,26,33,.75),rgba(0,26,33,0));pointer-events:none}
.conv-top .fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.conv-top .ttl{font-weight:900;font-size:15.5px;letter-spacing:-.03em}
.conv-top .cnt{font-family:Plex;font-size:11px;color:var(--debil);letter-spacing:.08em;flex:none}
.pista{display:flex;gap:5px;margin-top:10px}
.pista i{height:3px;flex:1;border-radius:3px;background:var(--filo);overflow:hidden;position:relative}
.pista i.on::after{content:"";position:absolute;inset:0;background:var(--oro);animation:llena .45s var(--e) both}
@keyframes llena{from{transform:scaleX(0);transform-origin:left}to{transform:none}}

.hilo-chat{display:flex;flex-direction:column;gap:12px;padding:6px 0 10px;flex:1}
.ctx{
  align-self:center;max-width:94%;text-align:center;font-size:13.5px;line-height:1.45;color:var(--debil);
  background:var(--vidrio);border:1px solid var(--filo);border-radius:14px;padding:11px 15px;
}
.burbuja{max-width:86%;padding:15px 17px;border-radius:20px;font-size:16px;line-height:1.42;animation:sube .42s var(--e) both}
.burbuja.cli{
  align-self:flex-start;border-bottom-left-radius:7px;
  background:var(--vidrio-2);border:1px solid var(--filo);
}
.burbuja.yo{
  align-self:flex-end;border-bottom-right-radius:7px;text-align:left;
  background:linear-gradient(160deg,rgba(249,197,75,.26),rgba(249,197,75,.14));
  border:1px solid rgba(249,197,75,.34);
}
.quien-dice{font-family:Plex;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--debil);margin:0 0 5px}
.burbuja.yo .quien-dice{color:var(--oro-hondo);text-align:right}
.escribiendo{
  align-self:flex-start;display:flex;gap:5px;padding:16px 18px;border-radius:20px;border-bottom-left-radius:7px;
  background:var(--vidrio-2);border:1px solid var(--filo);animation:sube .3s var(--e) both;
}
.escribiendo i{width:7px;height:7px;border-radius:50%;background:var(--debil);animation:latir 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.18s}
.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes latir{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.veredicto{align-self:flex-end;display:flex;align-items:center;gap:9px;animation:sube .4s var(--e) both;flex-wrap:wrap;justify-content:flex-end}
.sello{
  display:inline-flex;align-items:center;gap:6px;
  font-family:Plex;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.sello svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.s2{background:rgba(95,164,124,.2);color:var(--verde);border:1px solid rgba(95,164,124,.45)}
.s1{background:rgba(197,164,109,.18);color:var(--ambar);border:1px solid rgba(197,164,109,.42)}
.s0{background:rgba(208,106,78,.18);color:var(--rojo);border:1px solid rgba(208,106,78,.45)}
.criterio{font-size:12.5px;color:var(--debil)}
.porque{
  align-self:stretch;padding:15px 17px;border-radius:var(--r);
  background:var(--vidrio);border:1px dashed var(--filo-2);
  font-size:14.5px;line-height:1.5;color:var(--tenue);animation:sube .42s var(--e) both;
}
.opciones{
  position:sticky;bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px));
  display:grid;gap:9px;padding:14px 0 6px;
  background:linear-gradient(0deg,rgba(0,26,33,.97) 72%,rgba(0,26,33,0));
}
.op{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;width:100%;
  padding:15px 16px;border-radius:var(--r);
  background:var(--vidrio);border:1px solid var(--filo);
  transition:transform .15s var(--e),background .2s,border-color .2s;
  animation:sube .42s var(--e) both;animation-delay:calc(var(--i,0)*70ms);
}
.op:active{transform:scale(.982);background:rgba(249,197,75,.12);border-color:rgba(249,197,75,.4)}
.op .k{
  width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:rgba(249,197,75,.16);border:1px solid rgba(249,197,75,.3);
  font-family:Plex;font-weight:600;font-size:12px;color:var(--oro);
}
.op p{margin:0;font-size:15.5px;line-height:1.42}

/* cierre de conversación */
.marcador{display:flex;align-items:center;gap:18px;padding:22px 20px;margin-top:4px;
  background:var(--vidrio);border:1px solid var(--filo);border-radius:var(--r-g)}
.marcador .anillo{width:84px;height:84px}
.marcador .anillo svg{width:84px;height:84px}
.marcador .anillo .cif{font-size:21px}
.marcador .txt b{display:block;font-weight:900;font-size:18px;letter-spacing:-.03em}
.marcador .txt span{display:block;font-size:14px;color:var(--tenue);margin-top:4px;line-height:1.35}
.repaso{display:grid;gap:9px;margin-top:4px}
.turno-r{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;background:var(--vidrio);border:1px solid var(--filo);border-radius:var(--r)}
.turno-r .t{font-size:14.5px;font-weight:700;letter-spacing:-.02em;min-width:0}

/* ---------- progreso ---------- */
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.celda{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;
  background:var(--vidrio);border:1px solid var(--filo);border-radius:var(--r);text-align:center;
}
.celda .et{font-size:12.5px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.celda .ct{font-family:Plex;font-size:10.5px;color:var(--debil);letter-spacing:.06em}
.celda .anillo .cif{font-size:12px}
@media (max-width:359px){.rejilla{grid-template-columns:repeat(2,1fr)}}
.medida{padding:15px 16px;background:var(--vidrio);border:1px solid var(--filo);border-radius:var(--r)}
.medida + .medida{margin-top:9px}
.medida .mt{font-weight:700;font-size:15px;letter-spacing:-.025em}
.medida .mv{font-family:Plex;font-size:10.5px;letter-spacing:.07em;color:var(--debil);margin-top:8px;text-transform:uppercase}
.regla{height:6px;border-radius:999px;background:rgba(255,255,255,.09);margin-top:10px;overflow:hidden}
.regla i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--oro-hondo),var(--oro-alto));
  width:0;animation:crece .9s var(--e) .15s forwards}
@keyframes crece{to{width:var(--w)}}

/* ---------- tablero ---------- */
.tb{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:10px;font-variant-numeric:tabular-nums}
.tb th{text-align:left;font-family:Plex;font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--debil);font-weight:600;padding:9px 10px 9px 0;border-bottom:1px solid var(--filo)}
.tb td{padding:11px 10px 11px 0;border-bottom:1px solid var(--filo)}
.campo{width:100%;padding:15px 17px;border-radius:var(--r);background:var(--vidrio);
  border:1px solid var(--filo);font:inherit;color:var(--hueso);outline:none}
.campo:focus{border-color:rgba(249,197,75,.5)}

/* ---------- dock ---------- */
.dock[hidden]{display:none}
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(0,26,33,.86);backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid var(--filo);
  display:grid;grid-template-columns:repeat(5,1fr);
  padding-left:max(6px,env(safe-area-inset-left,0px));
  padding-right:max(6px,env(safe-area-inset-right,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.dock button{
  position:relative;display:grid;justify-items:center;gap:5px;padding:13px 2px 12px;
  color:var(--debil);transition:color .22s;text-align:center;
}
.dock button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--rebote)}
.dock button span{font-size:10px;font-weight:700;letter-spacing:.01em}
.dock button[aria-current="true"]{color:var(--oro)}
.dock button[aria-current="true"] svg{transform:translateY(-3px) scale(1.12)}
.dock button[aria-current="true"]::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:30px;height:3px;border-radius:0 0 4px 4px;background:var(--oro);
  box-shadow:0 0 16px rgba(249,197,75,.8);
  animation:asoma .3s var(--e) both;
}

/* ---------- escritorio ---------- */
@media (min-width:900px){
  :root{--barra:64px;--dock:0px;--col:720px}
  main{padding-top:64px;padding-bottom:130px;padding-inline:36px}
  h1{font-size:42px}
  .mosaico{grid-template-columns:repeat(2,1fr)}
  .dock{
    left:50%;transform:translateX(-50%);right:auto;bottom:26px;width:auto;
    grid-auto-flow:column;grid-template-columns:none;border:1px solid var(--filo-2);
    border-radius:999px;padding:5px 7px;box-shadow:0 20px 50px -16px rgba(0,10,14,.9);
  }
  .dock button{grid-auto-flow:column;align-items:center;gap:9px;padding:12px 18px;border-radius:999px}
  .dock button span{font-size:12.5px}
  .dock button[aria-current="true"]{background:rgba(249,197,75,.13)}
  .dock button[aria-current="true"]::before{display:none}
  .dock button[aria-current="true"] svg{transform:none}
  .ingreso{max-width:380px;margin-inline:auto;width:100%}
  .conv{min-height:calc(100svh - var(--barra) - 150px)}
  .opciones{bottom:0;padding-bottom:16px}
}


/* ---------- hoja de sesión ---------- */
.velo{
  position:fixed;inset:0;z-index:95;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,14,19,0);backdrop-filter:blur(0px);
  transition:background .28s var(--e),backdrop-filter .28s var(--e);
}
.velo.abierto{background:rgba(0,14,19,.62);backdrop-filter:blur(6px)}
.hoja-inf{
  width:100%;max-width:var(--col);
  background:linear-gradient(180deg,#073642 0%,#00232C 100%);
  border:1px solid var(--filo-2);border-bottom:0;
  border-radius:var(--r-g) var(--r-g) 0 0;
  padding:14px max(18px,env(safe-area-inset-left,0px)) calc(22px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -24px 60px -20px rgba(0,8,12,.9);
  transform:translateY(100%);transition:transform .34s var(--e);
}
.velo.abierto .hoja-inf{transform:none}
.hoja-inf .asa{display:block;width:40px;height:4px;border-radius:4px;background:var(--filo-2);margin:0 auto 18px}
.hoja-inf .perfil{display:flex;align-items:center;gap:14px}
.hoja-inf .ini-g{
  width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--oro-alto),var(--oro-hondo));color:var(--teal-hondo);
  font-family:Plex;font-weight:600;font-size:17px;
}
.hoja-inf .perfil b{display:block;font-weight:900;font-size:17px;letter-spacing:-.03em}
.hoja-inf .perfil .ced-txt{display:block;font-family:Plex;font-size:11px;color:var(--debil);letter-spacing:.05em;margin-top:3px}
.hoja-inf .botones{margin-top:22px}
@media (min-width:900px){
  .velo{align-items:center}
  .hoja-inf{border-radius:var(--r-g);border-bottom:1px solid var(--filo-2);max-width:460px;
    transform:translateY(16px) scale(.97);opacity:0;transition:transform .3s var(--e),opacity .3s var(--e)}
  .velo.abierto .hoja-inf{transform:none;opacity:1}
}