/* ══════════════════════════════════════════════════════════════
   VERIFICADOR · pantalla de resultados
   Única fuente: la carga el home y la maqueta de revisión, así que
   lo que se aprueba es exactamente lo que se publica.
   ══════════════════════════════════════════════════════════════ */
/* ══ RESULT OVERLAY ══════════════════════════════ */
#res-ov{display:none;position:fixed;inset:0;z-index:600;background:var(--cream);overflow-y:auto}
#res-ov.open{display:block;animation:fade-in .35s ease}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.res-nav{position:sticky;top:0;z-index:10;background:rgba(253,251,247,.9);backdrop-filter:blur(16px);padding:14px 52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.res-nav .r-logo{font-size:17px;font-weight:700;color:var(--text)}
.res-nav .r-logo span{color:var(--teal)}
.btn-close-res{display:flex;align-items:center;gap:7px;background:none;border:1.5px solid var(--border);border-radius:40px;padding:8px 18px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:600;color:var(--text-m);cursor:pointer;transition:all .2s}
.btn-close-res:hover{border-color:var(--teal);color:var(--teal)}
.res-body{max-width:620px;margin:0 auto;padding:44px 20px 80px}

.res-banner{border-radius:var(--r-xl);padding:42px 38px 34px;margin-bottom:18px;text-align:center;position:relative;overflow:hidden}
.res-banner.high{background:linear-gradient(140deg,#dbe4d7,#e8efe4,#f2f6f0);border:1.5px solid var(--teal-m)}
.res-banner.mid{background:linear-gradient(140deg,#ecd9b8,#f4ebd7,#faf5ea);border:1.5px solid #c2a684}
.res-banner.low{background:linear-gradient(140deg,#fccaca,#fde0e0,#fff5f5);border:1.5px solid #f0a0a0}
.r-ey{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.42;margin-bottom:12px}
.r-pct{font-size:92px;font-weight:800;line-height:1;letter-spacing:-4px;margin-bottom:7px}
.res-banner.high .r-pct,.res-banner.high .r-ey,.res-banner.high .r-lbl,.res-banner.high .r-sub{color:#28332b}
.res-banner.mid  .r-pct,.res-banner.mid  .r-ey,.res-banner.mid  .r-lbl,.res-banner.mid  .r-sub{color:#3d3320}
.res-banner.low  .r-pct,.res-banner.low  .r-ey,.res-banner.low  .r-lbl,.res-banner.low  .r-sub{color:#2d0000}
.r-lbl{font-size:17px;font-weight:700;margin-bottom:7px}
.r-sub{font-size:13px;font-weight:300;line-height:1.65;opacity:.62;max-width:400px;margin:0 auto 22px}
.gb{height:5px;border-radius:3px;background:rgba(0,0,0,.1);overflow:hidden}
.gf{height:100%;border-radius:3px;transition:width 1.4s cubic-bezier(.4,0,.2,1)}
.res-banner.high .gf{background:linear-gradient(90deg,var(--teal-d),var(--teal))}
.res-banner.mid  .gf{background:linear-gradient(90deg,#8a7250,var(--amber))}
.res-banner.low  .gf{background:linear-gradient(90deg,#7a0000,#e05555)}
.g-ticks{display:flex;justify-content:space-between;font-size:9px;opacity:.28;margin-top:4px}

.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px}
.bk-card{background:white;border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--sh);animation:fadeUp .4s ease both}
/* sin opacidad: una animación no puede dejar contenido invisible */
@keyframes fadeUp{from{transform:translateY(12px)}to{transform:translateY(0)}}
.bk-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.bk-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.bk-ico.pension{background:var(--teal-l)}.bk-ico.tarjeta{background:var(--amber-l)}.bk-ico.exequial{background:var(--purple-l)}.bk-ico.caja{background:#eef2ef}
.bk-name{font-size:11px;font-weight:700;color:var(--text);line-height:1.3}.bk-src{font-size:9px;color:var(--text-l)}
.bk-pct{font-size:30px;font-weight:800;line-height:1;letter-spacing:-1px}
.bk-pct.hi{color:var(--teal)}.bk-pct.md{color:var(--amber)}.bk-pct.lo{color:#ccc}
.bk-monto{font-size:10px;color:var(--text-l);margin-top:2px}
.bk-bar-bg{height:3px;background:#f0f0f0;border-radius:2px;margin-top:8px}
.bk-bar{height:100%;border-radius:2px;transition:width 1.1s ease}
.bk-bar.pension{background:var(--teal)}.bk-bar.tarjeta{background:var(--amber)}.bk-bar.exequial{background:var(--purple)}.bk-bar.caja{background:#8f9e8a}

.why-strip{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}
.why-pill{flex:1;min-width:130px;display:flex;align-items:flex-start;gap:8px;background:white;border:1px solid var(--border);border-radius:var(--r);padding:12px;box-shadow:var(--sh)}
.wd{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:4px}
.wt{font-size:11px;color:var(--text-m);line-height:1.5}
.wt strong{display:block;font-size:11px;font-weight:700;color:var(--text)}

.gate{background:var(--dark2);border-radius:var(--r-xl);padding:32px;margin-bottom:18px;position:relative;overflow:hidden}
.gate::before{content:'';position:absolute;top:-70px;right:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(75,93,79,.18),transparent 70%);pointer-events:none}
.g-ey{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal-m);margin-bottom:7px}
.g-ttl{font-size:21px;font-weight:800;color:white;letter-spacing:-.5px;line-height:1.25;margin-bottom:5px}
.g-ttl em{font-style:italic;font-weight:300;color:var(--teal-m)}
.g-sub{font-size:12px;color:var(--on-dark-m);font-weight:300;margin-bottom:20px;line-height:1.65}
.g-fields{display:flex;flex-direction:column;gap:9px}
.g-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.gf-input,.gf-sel{width:100%;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;color:white;outline:none;transition:border-color .2s,background .2s}
.gf-input::placeholder{color:rgba(255,255,255,.27)}
.gf-input:focus{border-color:var(--teal);background:rgba(75,93,79,.1)}
.gf-sel{color:rgba(255,255,255,.4);cursor:pointer}
.gf-sel option{background:var(--dark2)}
.btn-gate{width:100%;padding:14px;margin-top:5px;background:var(--teal);color:white;border:none;border-radius:40px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 24px rgba(75,93,79,.38)}
.btn-gate:hover{background:var(--teal-d);transform:translateY(-1px)}
.g-note{font-size:10px;color:rgba(255,255,255,.2);text-align:center;margin-top:10px;line-height:1.7}
.g-note a{color:rgba(255,255,255,.32);text-decoration:none}

.ty{display:none;text-align:center;padding:14px 0 4px}
.ty-ring{width:56px;height:56px;border-radius:50%;background:var(--teal-l);border:2px solid var(--teal-m);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:pop-in .45s cubic-bezier(.175,.885,.32,1.275)}
@keyframes pop-in{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.ty-ttl{font-size:20px;font-weight:800;color:white;margin-bottom:7px;letter-spacing:-.4px}
.ty-sub{font-size:13px;color:rgba(255,255,255,.38);font-weight:300;line-height:1.7}

.btn-reset{width:100%;padding:11px;background:none;border:1.5px solid var(--border);border-radius:40px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--text-m);cursor:pointer;transition:all .2s;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:7px}
.btn-reset:hover{border-color:var(--teal);color:var(--teal)}
.res-disc{font-size:10px;color:var(--text-l);line-height:1.7;text-align:center;padding:0 8px}

/* ── ajustes de marca ── */
.res-banner{border-radius:16px}
.r-pct{font-family:var(--serif);font-weight:500;letter-spacing:-2px}
.r-lbl{font-family:var(--serif);font-weight:500}
.bk-ico{background:var(--cream2)!important}
.bk-ico svg{width:17px;height:17px;color:var(--teal)}
.gate{border-radius:16px}
.g-ttl{font-family:var(--serif);font-weight:500}
.g-ttl em{font-style:italic;color:var(--teal-m)}
.f-logo span{color:var(--teal-m)}

/* ── móvil · el público entra sobre todo por aquí ── */
@media(max-width:600px){
  .res-nav{padding:12px 18px}
  .res-body{padding:22px 16px 56px}
  .res-banner{padding:28px 18px 26px}
  .r-ey{font-size:9.5px;letter-spacing:1.6px}
  .r-pct{font-size:64px;letter-spacing:-1.5px}   /* 92px desborda a 360px */
  .r-lbl{font-size:19px}
  .r-sub{font-size:13px}
  .bk-grid{grid-template-columns:1fr;gap:9px}
  .bk-card{padding:14px}
  .bk-pct{font-size:32px}
  .why-strip{flex-direction:column}
  .why-pill{min-width:0;width:100%}
  .gate{padding:24px 20px}
  .g-ttl{font-size:21px}
}