/* =====================================================================================================================
   ESCENA PÚBLICA (9-oct). La portada, el acceso y el registro con el mismo lenguaje que la app: fondo vivo de tono medio
   (escena.js), el contenido como una lámina sólida que flota con sombra larga, objetos físicos en lugar de tarjetas
   (el dial real del motor, un cheque, la regla de grados) y la paleta tonal sin verdes. Tokens, fondo y grano: escena.css.
   ===================================================================================================================== */
body.app.publico::before{display:none!important}

/* ---------------------------------------------------------------- cabecera sobre el fondo, lámina y pie */
body.app.publico .pub-cab{max-width:1288px;margin:0 auto;padding:14px 28px;background:transparent;border-bottom:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:background .3s,box-shadow .3s}
html.escena-js body.app.publico .pub-cab.tb-flota{background:rgba(236,239,244,.72);-webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);border-radius:0 0 18px 18px;box-shadow:0 12px 24px -18px rgba(var(--e-tinta-sombra),.5)}
/* táctil: sin vidrio y casi opaca (el WebKit del iPhone y el iPad se caía al desplazar con una cabecera sticky con backdrop-filter) */
@media (hover:none){html.escena-js body.app.publico .pub-cab.tb-flota{background:rgba(236,239,244,.96);-webkit-backdrop-filter:none;backdrop-filter:none}}
body.app.publico .pub-cab .marca-logo b,body.app.publico .pub-cab .marca-logo small{color:#1a2233;text-shadow:0 1px 0 rgba(255,255,255,.45)}
body.app.publico .pub-nav a:not(.btn){color:#1d2535}
body.app.publico .pub-nav a:not(.btn):hover{color:#22408f}

body.app.publico main{max-width:1240px;margin:6px auto 30px;padding:4px clamp(20px,4vw,56px) 28px;border-radius:28px;position:relative;
  background:linear-gradient(180deg,var(--e-lamina-1),var(--e-lamina-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(var(--e-tinta-sombra),.10),
             0 2px 4px rgba(var(--e-tinta-sombra),.08),0 24px 48px -20px rgba(var(--e-tinta-sombra),.35),
             0 60px 120px -40px rgba(var(--e-tinta-sombra),.45)}
body.app.publico main:not(.auth) > section + section{border-top:1px solid rgba(var(--e-tinta-sombra),.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
body.app.publico .pub-pie{max-width:1240px;margin:0 auto;padding:10px 28px 40px;border-top:0!important;background:none!important;color:#2b3445}
body.app.publico .pub-pie p,body.app.publico .pub-pie .pub-legal{color:#3a4456}
body.app.publico .pub-pie nav a{color:#1d2535}
body.app.publico .pub-pie .marca-logo b,body.app.publico .pub-pie .marca-logo small{color:#1a2233}

/* paleta tonal en lo público */
body.app.publico{--f-acento:#22408f;--f-ok:#2d6b8a;--f-ok-velo:rgba(45,107,138,.09);--f-warn:#b07a2a;--f-ko:#a8493c}
body.app.publico .btn-p{background:linear-gradient(180deg,#4a68ad,#2c4a8e);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(20,28,42,.25),
  0 8px 18px -8px rgba(44,74,142,.6)}
body.app.publico .pub-sello{background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(var(--e-tinta-sombra),.08)}

/* ---------------------------------------------------------------- héroe: objetos con volumen */
body.app.publico .pub-hero-visual{perspective:none;min-width:0}
body.app.publico .pub-hero-texto{min-width:0}
.escena-objetos{position:relative;height:480px;min-width:0;width:100%}
.escena-objetos figure{margin:0}
@keyframes obj-flota{0%,100%{translate:0 0}50%{translate:0 -8px}}
.obj-dial{position:absolute;left:0;top:30px;width:64%;z-index:2;
  filter:drop-shadow(0 28px 30px rgba(20,28,42,.30)) drop-shadow(0 6px 8px rgba(20,28,42,.16));animation:obj-flota 9s ease-in-out infinite}
.obj-dial svg{display:block;width:100%;height:auto}
.obj-dial figcaption{margin-top:2px;text-align:center;font:650 .62rem var(--f-sans);letter-spacing:.2em;text-transform:uppercase;color:#5d6779}
body.app.publico .dial-aguja{transform:rotate(var(--a));animation:dial-gira 1.9s cubic-bezier(.2,.85,.25,1.12) .5s both}
body.app.publico .dial-arco{animation:dial-traza 1.9s cubic-bezier(.2,.85,.25,1) .5s both}

/* el cheque: papel de seguridad con microtexto, borde interior discontinuo y perforación */
.obj-talon{position:absolute;right:0;top:0;width:43%;padding:18px 20px 16px 26px;border-radius:10px;z-index:3;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),linear-gradient(165deg,#fdfdfb,#eef0f4);
  box-shadow:inset 0 0 0 1px rgba(20,28,42,.07),0 2px 4px rgba(20,28,42,.12),0 22px 40px -16px rgba(20,28,42,.42);
  transform:perspective(800px) rotateX(var(--orx,0deg)) rotateY(var(--ory,0deg)) rotate(-3deg);transition:transform .45s cubic-bezier(.2,.8,.2,1);
  animation:obj-flota 10s ease-in-out -2s infinite}
.obj-talon::before{content:"";position:absolute;inset:7px 7px 7px 15px;border:1px dashed rgba(34,64,143,.22);border-radius:6px;pointer-events:none}
.obj-talon::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:9px;
  background:radial-gradient(circle at 0 50%,#c9cfd9 0 3.4px,transparent 4px) left top/9px 12px repeat-y}
.ot-micro{display:block;max-width:100%;overflow:hidden;white-space:nowrap;font:600 .44rem var(--f-sans);letter-spacing:.14em;color:rgba(34,64,143,.35);font-style:normal;margin-bottom:8px}
.ot-et{display:block;font:650 .62rem var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:#7a8496}
.obj-talon b{display:block;margin:4px 0 2px;font:500 2rem/1.05 var(--f-serif);color:#a8493c;letter-spacing:-.01em}
.obj-talon b small{font:500 .9rem var(--f-sans);color:#a8493c;margin-left:2px}
.ot-pie{font-size:.72rem;color:#6b7385}

/* la capacidad: una pieza de cristal con un carril hundido */
.obj-chip{position:absolute;right:3%;top:47%;width:38%;padding:14px 18px;border-radius:14px;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(244,246,250,.7));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.07),0 2px 4px rgba(20,28,42,.1),0 20px 36px -16px rgba(20,28,42,.4);
  transform:perspective(800px) rotateX(var(--orx,0deg)) rotateY(var(--ory,0deg)) rotate(1.5deg);transition:transform .45s cubic-bezier(.2,.8,.2,1);
  animation:obj-flota 11s ease-in-out -5s infinite}
.obj-chip span{display:block;font:650 .62rem var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:#7a8496}
.obj-chip b{display:block;margin:4px 0 8px;font:500 1.6rem/1.05 var(--f-serif);color:#141d26}
.obj-chip small{display:block;margin-top:6px;font-size:.72rem;color:#6b7385}
.oc-pista{display:block;height:8px;padding:2px;border-radius:9px;background:linear-gradient(180deg,#d9dee6,#eceff3);box-shadow:inset 0 1px 2px rgba(20,28,42,.2)}
.oc-pista i{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(180deg,#6a86bf,#3b5690);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);animation:a-ancho 1.2s cubic-bezier(.2,.8,.2,1) .8s both}

/* la regla de grados: un carril continuo con los ocho grados, hoy y el objetivo en relieve */
.obj-regla{position:absolute;left:4%;right:2%;bottom:0;z-index:1}
.or-et{display:block;margin:0 0 10px 4px;font:650 .62rem var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:#5d6779}
.or-pista{display:flex;padding:4px;border-radius:999px;background:linear-gradient(180deg,#d6dbe3,#e9ecf1);
  box-shadow:inset 0 2px 5px rgba(20,28,42,.16),inset 0 0 0 1px rgba(20,28,42,.05),0 1px 0 rgba(255,255,255,.9)}
.or-pista i{flex:1;height:24px;display:grid;place-items:center;font:600 .74rem var(--f-sans);font-style:normal;color:#fff;opacity:.88;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.45);animation:a-entrar .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 60ms + .6s)}
.or-pista i:first-child{border-radius:999px 0 0 999px}.or-pista i:last-child{border-radius:0 999px 999px 0;box-shadow:none}
.or-pista .g1{background:#2f4c87}.or-pista .g2{background:#41619f}.or-pista .g3{background:#6680b6}.or-pista .g4{background:#8a9cbd}
.or-pista .g5{background:#c49a52}.or-pista .g6{background:#b77d35}.or-pista .g7{background:#ab5644}.or-pista .g8{background:#8e3a2e}
.or-pista i.hoy,.or-pista i.meta{opacity:1;position:relative;z-index:1;transform:scaleY(1.4);border-radius:9px;
  box-shadow:0 0 0 2px #fff,0 6px 14px -4px rgba(20,28,42,.45)}
.or-ley{display:flex;gap:18px;margin:10px 0 0 4px;font-size:.74rem;color:#5d6779}
.or-ley span{display:inline-flex;align-items:center;gap:6px}
.or-ley i{width:10px;height:10px;border-radius:3px;box-shadow:0 0 0 1.5px #fff,0 1px 2px rgba(20,28,42,.3)}
.or-ley i.hoy{background:#c49a52}.or-ley i.meta{background:#6680b6}

/* ---------------------------------------------------------------- el resto de la portada sin fichas */
body.app.publico .metodo-4{gap:0}
body.app.publico .m-paso{background:none!important;box-shadow:none!important;border-radius:0!important;padding:6px 26px 10px 22px!important;
  border-left:1px solid rgba(var(--e-tinta-sombra),.1)}
body.app.publico .m-paso::after{display:none}
body.app.publico .m-paso .m-ico{background:linear-gradient(180deg,#fff,#eef1f5);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.07),0 4px 10px -4px rgba(20,28,42,.3);color:#22408f}
body.app.publico .m-paso .m-num{color:rgba(34,64,143,.35)}
body.app.publico .senales-6 .s-n{color:rgba(34,64,143,.4)}

/* el adelanto del panel: un instrumento hundido con barras con cuerpo */
body.app.publico .pub-app-visual{background:linear-gradient(180deg,#e3e7ee,#eff1f5)!important;border-radius:20px!important;
  box-shadow:inset 0 2px 6px rgba(20,28,42,.12),inset 0 0 0 1px rgba(20,28,42,.05),0 1px 0 rgba(255,255,255,.95)!important}
body.app.publico .pav-fila i{background:linear-gradient(180deg,#6a86bf,#3b5690)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(20,28,42,.2)}
body.app.publico .pav-fila i.ko{background:linear-gradient(180deg,#bf6556,#9c4236)!important}
body.app.publico .pav-fila i.warn{background:linear-gradient(180deg,#d2a660,#b07a2a)!important}
body.app.publico .pav-fila b.ok{color:#2d6b8a}body.app.publico .pav-fila b.ko{color:#a8493c}body.app.publico .pav-fila b.warn{color:#b07a2a}

/* exprés y precio: superficies tonales, no cajas blancas */
body.app.publico .expres-form,body.app.publico .expres-resultado{background:rgba(255,255,255,.5)!important;border-radius:18px!important;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(var(--e-tinta-sombra),.08)!important}
body.app.publico .pub-precio-caja{background:linear-gradient(135deg,#2c4a8e,#1d2f5e)!important;border-radius:22px!important;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 44px -20px rgba(29,47,94,.6)!important}
body.app.publico .pub-precio-caja h2{color:#fff}
body.app.publico .pub-precio-caja p{color:rgba(255,255,255,.8)}
body.app.publico .pub-precio-caja .btn-p{background:linear-gradient(180deg,#fff,#e9edf5);color:#1d2f5e;box-shadow:0 8px 18px -8px rgba(0,0,0,.45)}

/* ---------------------------------------------------------------- acceso y registro: lámina con dos columnas abiertas */
body.app.publico main.auth{max-width:1080px;min-height:auto;margin-top:28px;padding:56px clamp(24px,5vw,64px)}
body.app.publico .auth-form{background:none!important;box-shadow:none!important;border-radius:0!important;padding:4px 0 4px 44px!important;
  border-left:1px solid rgba(var(--e-tinta-sombra),.1)}
body.app.publico .auth-form::after{display:none}
body.app.publico .auth-form input{background:linear-gradient(180deg,#f3f5f8,#fbfcfd)!important;border:0!important;border-radius:12px!important;
  box-shadow:inset 0 1px 3px rgba(20,28,42,.14),inset 0 0 0 1px rgba(20,28,42,.08),0 1px 0 #fff!important}
body.app.publico .auth-form input:focus{box-shadow:inset 0 1px 3px rgba(20,28,42,.14),0 0 0 2px rgba(59,90,150,.45)!important;outline:0}
body.app.publico .auth-pasos li>span{background:linear-gradient(180deg,#fff,#eef1f5);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(20,28,42,.08),0 4px 10px -4px rgba(20,28,42,.35);color:#22408f}

@media (max-width:980px){
  body.app.publico main{margin:4px 10px 24px;border-radius:22px}
  body.app.publico .auth-form{padding:26px 0 0!important;border-left:0;border-top:1px solid rgba(var(--e-tinta-sombra),.1)}
  body.app.publico .m-paso{border-left:0;border-top:1px solid rgba(var(--e-tinta-sombra),.1);padding:18px 4px!important}
}
@media (prefers-reduced-motion:reduce){
  .obj-dial,.obj-talon,.obj-chip,.or-pista i,.oc-pista i,body.app.publico .dial-aguja,body.app.publico .dial-arco{animation:none}
}
body.app.publico .pub-pie .marca-pie{margin:0;align-items:flex-start;text-align:left}
/* en el móvil también se ve el instrumento: el dial y el cheque apilados, sin la capacidad */
@media (max-width:980px){
  body.app.publico .pub-hero-visual{display:block;margin-top:8px}
  .escena-objetos{height:auto;display:flex;flex-direction:column;align-items:center;gap:22px}
  .obj-dial,.obj-talon,.obj-regla{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .obj-dial{width:min(320px,86%)}
  .obj-talon{width:min(300px,86%)}
  .obj-chip{display:none}
  .obj-regla{width:100%}
}

/* ---------------------------------------------------------------- textos públicos: aviso legal y metodología */
body.app.publico main.pub-texto{max-width:860px;padding:48px clamp(24px,5vw,72px) 56px}
.pub-texto h1{margin:0 0 22px;font:420 clamp(2rem,3.2vw,2.6rem)/1.1 var(--f-serif);letter-spacing:-.02em;color:var(--f-tinta)}
.pub-texto h3{margin:26px 0 8px;font:600 1rem var(--f-sans);color:var(--f-tinta)}
.pub-texto p{margin:0;color:var(--f-tinta-2);line-height:1.65;max-width:68ch}
body.app.publico main.pub-metodologia{padding-top:36px}
.pub-metodologia .pagina-cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.pub-metodologia .pagina-cab h1{margin:0;font:420 clamp(2rem,3.2vw,2.6rem)/1.1 var(--f-serif);letter-spacing:-.02em;color:var(--f-tinta)}
/* dentro de la lámina pública, el contenido de la metodología sin fichas (como en la app) */
body.app.publico .app-contenido .relieve:not(.btn){background:none!important;box-shadow:none!important;border-radius:0!important}
body.app.publico .app-contenido .relieve::after,body.app.publico .marcas,body.app.publico .microtexto{display:none!important}
/* conectar una aplicación (OAuth del MCP) */
body.app.publico main.oauth{max-width:620px}
.oauth .oauth-form{display:flex;flex-direction:column;gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid rgba(var(--e-tinta-sombra),.09)}
.oauth .oauth-form label{display:flex;flex-direction:column;gap:6px;font:550 .82rem var(--f-sans);color:var(--f-tinta-2)}
.oauth .oauth-form input:not([type=hidden]){padding:11px 13px;font-size:1rem;background:linear-gradient(180deg,#f3f5f8,#fbfcfd);border:0;border-radius:12px;
  box-shadow:inset 0 1px 3px rgba(20,28,42,.14),inset 0 0 0 1px rgba(20,28,42,.08),0 1px 0 #fff}
.oauth .row-send{display:flex;flex-wrap:wrap;margin-top:6px}
.oauth .error{color:#a8493c}
.oauth .pub-sello{display:inline-flex;margin:0 0 14px;padding:5px 12px;border-radius:999px;font:550 .8rem var(--f-sans);color:#22408f}