/* =============================================================================
   Anonimiza · hoja de estilos única
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía · 5. Componentes
   6. Secciones · 7. Herramienta · 8. Responsive · 9. Movimiento reducido
   ============================================================================= */

/* ========================================================== 1. Tokens ===== */
:root{
  --tinta:#0d1420;
  --tinta-2:#1b2534;
  --gris-90:#3b4555;
  --gris-60:#69748a;
  --gris-40:#98a2b4;
  --gris-20:#c9d0db;
  --linea:#e3e8ef;
  --linea-2:#eef1f6;
  --fondo:#ffffff;
  --fondo-2:#f6f8fb;
  --fondo-3:#eef2f8;

  --acento:#1f5fd6;
  --acento-osc:#17499f;
  --acento-luz:#eaf1fe;

  --ok:#0f7a52;
  --ok-luz:#e6f5ee;
  --aviso:#8a5a06;
  --aviso-luz:#fdf3e2;
  --aviso-bd:#f0d3a1;
  --peligro:#a5231c;
  --peligro-luz:#fdecea;

  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-s:8px; --r-m:12px; --r-l:18px;
  --sombra-s:0 1px 2px rgba(13,20,32,.06), 0 1px 3px rgba(13,20,32,.05);
  --sombra-m:0 4px 16px rgba(13,20,32,.07), 0 1px 3px rgba(13,20,32,.05);
  --sombra-l:0 18px 48px rgba(13,20,32,.12), 0 2px 8px rgba(13,20,32,.06);
  --ease:cubic-bezier(.16,1,.3,1);
  --ancho:1160px;
}

/* =========================================================== 2. Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-size:16px;line-height:1.62;color:var(--tinta);
  background:var(--fondo);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.14;letter-spacing:-.021em;font-weight:600}
input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--acento);color:#fff}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:4px}
hr{border:0;border-top:1px solid var(--linea);margin:0}

/* ======================================================= 3. Utilidades ===== */
.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:fixed;top:-100px;left:1rem;z-index:999;background:var(--tinta);color:#fff;padding:.6rem 1rem;border-radius:var(--r-s)}
.saltar:focus{top:1rem}
.centro{text-align:center}
.oculto{display:none !important}

/* ======================================================= 4. Tipografía ===== */
.titular{font-family:var(--serif);font-weight:500;letter-spacing:-.025em;line-height:1.08}
h1.titular{font-size:clamp(2.15rem,5.2vw,3.7rem)}
h2.titular{font-size:clamp(1.7rem,3.5vw,2.5rem)}
.sobretitulo{
  font-size:.775rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acento);margin-bottom:.9rem;
}
.entradilla{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--gris-60);max-width:62ch}
.apunte{font-size:.85rem;color:var(--gris-60);line-height:1.55}

/* ====================================================== 5. Componentes ===== */

/* --- botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.78rem 1.35rem;border-radius:var(--r-m);font-weight:600;font-size:.95rem;
  letter-spacing:-.005em;transition:background .18s var(--ease),color .18s var(--ease),
  border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
  border:1px solid transparent;white-space:nowrap;
}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-p{background:var(--acento);color:#fff;box-shadow:var(--sombra-s)}
.btn-p:hover:not(:disabled){background:var(--acento-osc)}
.btn-s{background:#fff;color:var(--tinta);border-color:var(--gris-20)}
.btn-s:hover:not(:disabled){border-color:var(--gris-40);background:var(--fondo-2)}
.btn-f{background:transparent;color:var(--gris-60);padding-inline:.7rem}
.btn-f:hover:not(:disabled){color:var(--tinta)}
.btn-peligro{background:#fff;color:var(--peligro);border-color:#e8b9b5}
.btn-peligro:hover:not(:disabled){background:var(--peligro-luz)}
.btn-g{padding:.95rem 1.7rem;font-size:1.02rem}
.btn-bloque{width:100%}

/* --- tarjetas --- */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:1.6rem}
.tarjeta-plana{background:var(--fondo-2);border:1px solid var(--linea-2);border-radius:var(--r-m);padding:1.15rem 1.3rem}

/* --- etiqueta MODO DEMO --- */
.demo{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--aviso-luz);
  color:var(--aviso);border:1px solid var(--aviso-bd);border-radius:999px;
  padding:.4rem .85rem;font-size:.79rem;font-weight:600;line-height:1.35;
}
.demo-barra{
  background:var(--aviso-luz);border-bottom:1px solid var(--aviso-bd);color:var(--aviso);
  font-size:.83rem;font-weight:500;text-align:center;padding:.5rem 1rem;
}
.demo-barra strong{font-weight:700}

/* --- avisos --- */
.aviso{border-radius:var(--r-m);padding:.9rem 1.1rem;font-size:.9rem;line-height:1.55;border:1px solid}
.aviso-info{background:var(--acento-luz);border-color:#c3d7fa;color:#14418f}
.aviso-ok{background:var(--ok-luz);border-color:#b6dfcb;color:var(--ok)}
.aviso-alerta{background:var(--aviso-luz);border-color:var(--aviso-bd);color:var(--aviso)}
.aviso-error{background:var(--peligro-luz);border-color:#f0c3bf;color:var(--peligro)}

/* --- formularios --- */
.campo{margin-bottom:1.05rem}
.campo label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.4rem}
.campo input{
  width:100%;padding:.75rem .9rem;border:1px solid var(--gris-20);border-radius:var(--r-m);
  background:#fff;transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.campo input:focus{outline:0;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-luz)}
.campo .ayuda{font-size:.8rem;color:var(--gris-60);margin-top:.35rem}

/* --- cabecera --- */
.cabecera{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cabecera-in{display:flex;align-items:center;gap:1.5rem;height:66px}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.03em;font-size:1.12rem}
.marca-icono{width:28px;height:28px;border-radius:8px;background:var(--tinta);display:grid;place-items:center;flex:none}
.marca-icono span{display:block;width:13px;height:9px;background:#fff;border-radius:1.5px}
.nav{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav a{font-size:.92rem;color:var(--gris-60);font-weight:500;transition:color .15s var(--ease)}
.nav a:hover{color:var(--tinta)}
.nav .btn{color:inherit}

/* --- pastilla de créditos --- */
.creditos{
  display:inline-flex;align-items:center;gap:.45rem;background:var(--fondo-3);
  border:1px solid var(--linea);border-radius:999px;padding:.34rem .8rem;
  font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.creditos svg{width:14px;height:14px;color:var(--acento)}
.creditos.baja{background:var(--aviso-luz);border-color:var(--aviso-bd);color:var(--aviso)}
.creditos.cero{background:var(--peligro-luz);border-color:#f0c3bf;color:var(--peligro)}
.creditos-num{transition:transform .3s var(--ease)}
.creditos.pulso .creditos-num{transform:scale(1.28)}

/* --- menú de cuenta --- */
.menu{position:relative}
.menu-btn{display:flex;align-items:center;gap:.45rem;padding:.34rem .55rem;border-radius:var(--r-m);font-size:.9rem;font-weight:500;color:var(--gris-60)}
.menu-btn:hover{background:var(--fondo-2);color:var(--tinta)}
.menu-lista{
  position:absolute;right:0;top:calc(100% + 8px);min-width:212px;background:#fff;
  border:1px solid var(--linea);border-radius:var(--r-m);box-shadow:var(--sombra-l);
  padding:.4rem;display:none;z-index:70;
}
.menu.abierto .menu-lista{display:block}
.menu-lista a,.menu-lista button{display:block;width:100%;text-align:left;padding:.55rem .7rem;border-radius:var(--r-s);font-size:.9rem;color:var(--gris-90)}
.menu-lista a:hover,.menu-lista button:hover{background:var(--fondo-2);color:var(--tinta)}
.menu-lista .sep{height:1px;background:var(--linea);margin:.35rem 0}
.menu-correo{padding:.55rem .7rem .3rem;font-size:.78rem;color:var(--gris-40);word-break:break-all}

/* --- pie --- */
.pie{background:var(--fondo-2);border-top:1px solid var(--linea);padding:3.2rem 0 2.2rem;margin-top:5rem}
.pie-rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
.pie h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--gris-40);margin-bottom:.85rem;font-weight:600}
.pie ul{list-style:none;padding:0;display:grid;gap:.5rem}
.pie a{font-size:.9rem;color:var(--gris-60)}
.pie a:hover{color:var(--tinta)}
.pie-bajo{margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.83rem;color:var(--gris-40)}

/* --- modal --- */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.abierto{display:flex}
.modal-fondo{position:absolute;inset:0;background:rgba(13,20,32,.55);backdrop-filter:blur(3px)}
.modal-caja{
  position:relative;background:#fff;border-radius:var(--r-l);box-shadow:var(--sombra-l);
  width:min(100%,620px);max-height:92vh;overflow:auto;padding:1.9rem;
}
.modal-caja h3{font-size:1.32rem;margin-bottom:.5rem}
.modal-cerrar{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border-radius:var(--r-s);color:var(--gris-40);display:grid;place-items:center}
.modal-cerrar:hover{background:var(--fondo-2);color:var(--tinta)}

/* --- avisos flotantes --- */
.avisos{position:fixed;right:1rem;bottom:1rem;z-index:300;display:grid;gap:.55rem;max-width:min(92vw,400px)}
.tostada{
  background:var(--tinta);color:#fff;border-radius:var(--r-m);padding:.8rem 1.05rem;
  font-size:.9rem;line-height:1.5;box-shadow:var(--sombra-l);animation:entra .28s var(--ease);
}
.tostada.err{background:var(--peligro)}
.tostada.ok{background:var(--ok)}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ======================================================== 6. Secciones ===== */

/* --- portada --- */
.portada{padding:clamp(3.2rem,7vw,5.6rem) 0 clamp(2.6rem,5vw,4rem);background:
  radial-gradient(1100px 460px at 78% -8%,var(--acento-luz),transparent 62%)}
.portada-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.portada h1{margin-bottom:1.1rem}
.portada .entradilla{margin-bottom:1.9rem}
.portada-acciones{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1.2rem}
.portada-pruebas{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.855rem;color:var(--gris-60)}
.portada-pruebas span{display:inline-flex;align-items:center;gap:.4rem}
.portada-pruebas svg{width:15px;height:15px;color:var(--ok);flex:none}

/* --- documento de ejemplo --- */
.doc{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);
  box-shadow:var(--sombra-m);padding:1.25rem 1.35rem;font-size:.72rem;line-height:1.75;
  color:var(--gris-90);position:relative;overflow:hidden;
}
.doc-cabecera{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--linea-2);padding-bottom:.7rem;margin-bottom:.85rem}
.doc-logo{font-weight:700;font-size:.82rem;letter-spacing:-.02em;color:var(--tinta)}
.doc-fila{display:flex;gap:.5rem;margin-bottom:.2rem}
.doc-et{color:var(--gris-40);min-width:78px;flex:none}
.doc-val{font-weight:500}
.doc-bloque{margin-bottom:.85rem}
.doc-tabla{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.68rem}
.doc-tabla th{text-align:left;font-weight:600;color:var(--gris-40);border-bottom:1px solid var(--linea-2);padding:.3rem 0}
.doc-tabla td{padding:.3rem 0;border-bottom:1px solid var(--linea-2)}
.doc-tabla td:last-child,.doc-tabla th:last-child{text-align:right}
.tapado{
  background:var(--tinta);color:transparent;border-radius:2px;
  padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone;
  user-select:none;
}
.marcado{background:#ffe08a;border-radius:2px;padding:0 .18em;box-shadow:inset 0 -1px 0 #e0b445}

.comparativa{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.comparativa-col > h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;color:var(--gris-40);
  margin-bottom:.6rem;font-weight:600;display:flex;align-items:center;gap:.5rem;
}
.comparativa-col.despues > h3{color:var(--ok)}
.pin-num{width:18px;height:18px;border-radius:50%;background:var(--fondo-3);color:var(--gris-60);display:grid;place-items:center;font-size:.68rem;font-weight:700}
.comparativa-col.despues .pin-num{background:var(--ok-luz);color:var(--ok)}

/* --- lista de detecciones de muestra --- */
.muestra-detecciones{display:grid;gap:.4rem;margin-top:1rem}
.muestra-det{
  display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--linea);
  border-radius:var(--r-s);padding:.45rem .65rem;font-size:.8rem;
}
.muestra-det .tipo{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris-40);font-weight:600;min-width:72px}
.muestra-det .val{font-family:var(--mono);font-size:.75rem;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muestra-det .marca-si{margin-left:auto;color:var(--ok);font-size:.72rem;font-weight:600}

/* --- secciones generales --- */
.seccion{padding:clamp(3.4rem,6.5vw,5.4rem) 0}
.seccion-gris{background:var(--fondo-2);border-block:1px solid var(--linea)}
.seccion-cab{max-width:64ch;margin-bottom:2.6rem}
.seccion-cab.centrada{margin-inline:auto;text-align:center}
.seccion-cab h2{margin-bottom:.85rem}

/* --- pasos --- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:paso}
.paso{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:1.6rem}
.paso-num{
  width:34px;height:34px;border-radius:10px;background:var(--tinta);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.92rem;margin-bottom:1rem;
}
.paso h3{font-size:1.06rem;margin-bottom:.5rem}
.paso p{font-size:.92rem;color:var(--gris-60)}

/* --- rejilla de ventajas --- */
.ventajas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.ventaja{padding:1.5rem;border:1px solid var(--linea);border-radius:var(--r-l);background:#fff}
.ventaja-icono{width:38px;height:38px;border-radius:11px;background:var(--acento-luz);color:var(--acento);display:grid;place-items:center;margin-bottom:1rem}
.ventaja-icono svg{width:19px;height:19px}
.ventaja h3{font-size:1rem;margin-bottom:.45rem}
.ventaja p{font-size:.9rem;color:var(--gris-60)}

/* --- para quién --- */
.publico{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.publico-item{border-left:3px solid var(--acento);padding:.35rem 0 .35rem 1.2rem}
.publico-item h3{font-size:1.02rem;margin-bottom:.4rem}
.publico-item p{font-size:.91rem;color:var(--gris-60)}

/* --- precios --- */
.precios{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:stretch}
.plan{
  background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);padding:1.8rem;
  display:flex;flex-direction:column;position:relative;
}
.plan.destacado{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-luz),var(--sombra-m)}
.plan-etiqueta{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--acento);
  color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:.28rem .8rem;border-radius:999px;white-space:nowrap;
}
.plan h3{font-size:1.1rem;margin-bottom:.3rem}
.plan-para{font-size:.86rem;color:var(--gris-60);min-height:2.6em;margin-bottom:1.1rem}
.plan-precio{display:flex;align-items:baseline;gap:.3rem;margin-bottom:.25rem}
.plan-precio .num{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;font-family:var(--serif)}
.plan-precio .per{font-size:.9rem;color:var(--gris-60)}
.plan-cred{font-size:.88rem;color:var(--acento);font-weight:600;margin-bottom:1.3rem}
.plan ul{list-style:none;padding:0;display:grid;gap:.62rem;margin-bottom:1.6rem;font-size:.9rem}
.plan li{display:flex;gap:.55rem;align-items:flex-start;color:var(--gris-90)}
.plan li svg{width:15px;height:15px;color:var(--ok);flex:none;margin-top:.28rem}
.plan .btn{margin-top:auto}
.precios-nota{margin-top:1.7rem;display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:center}

/* --- preguntas --- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:.7rem}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden}
.faq summary{padding:1.05rem 1.3rem;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--gris-40);font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .respuesta{padding:0 1.3rem 1.2rem;color:var(--gris-60);font-size:.94rem}
.faq .respuesta p + p{margin-top:.7rem}

/* --- cierre --- */
.cierre{background:var(--tinta);color:#fff;border-radius:var(--r-l);padding:clamp(2.2rem,5vw,3.4rem);text-align:center}
.cierre h2{color:#fff;margin-bottom:.8rem}
.cierre p{color:#aeb8c8;max-width:56ch;margin:0 auto 1.7rem}
.cierre .btn-s{background:#fff;border-color:#fff}

/* --- páginas legales --- */
.legal{max-width:78ch;margin-inline:auto;padding:clamp(2.4rem,5vw,4rem) 0}
.legal h1{font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:.6rem}
.legal .actualizado{font-size:.86rem;color:var(--gris-40);margin-bottom:2.4rem}
.legal h2{font-size:1.2rem;margin:2.3rem 0 .8rem}
.legal h3{font-size:1.02rem;margin:1.5rem 0 .5rem}
.legal p,.legal li{color:var(--gris-90);font-size:.96rem;margin-bottom:.85rem}
.legal ul,.legal ol{padding-left:1.3rem;margin-bottom:1rem}
.legal li{margin-bottom:.4rem}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0 1.5rem;font-size:.9rem}
.legal th,.legal td{border:1px solid var(--linea);padding:.6rem .8rem;text-align:left;vertical-align:top}
.legal th{background:var(--fondo-2);font-weight:600}

/* --- acceso (entrar.html) --- */
.acceso{min-height:calc(100vh - 66px);display:grid;grid-template-columns:1fr 1fr}
.acceso-form{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.5rem}
.acceso-caja{width:min(100%,400px)}
.acceso-caja h1{font-size:1.72rem;margin-bottom:.5rem}
.acceso-caja > p{color:var(--gris-60);font-size:.93rem;margin-bottom:1.7rem}
.pestanas{display:flex;background:var(--fondo-2);border:1px solid var(--linea);border-radius:var(--r-m);padding:.25rem;margin-bottom:1.6rem}
.pestanas button{flex:1;padding:.5rem;border-radius:var(--r-s);font-size:.9rem;font-weight:600;color:var(--gris-60)}
.pestanas button.activa{background:#fff;color:var(--tinta);box-shadow:var(--sombra-s)}
.acceso-lado{background:var(--fondo-2);border-left:1px solid var(--linea);padding:3rem 2.6rem;display:flex;flex-direction:column;justify-content:center}
.acceso-lado ul{list-style:none;padding:0;display:grid;gap:1.15rem;margin-top:1.6rem}
.acceso-lado li{display:flex;gap:.8rem;align-items:flex-start;font-size:.93rem;color:var(--gris-90)}
.acceso-lado li svg{width:18px;height:18px;color:var(--ok);flex:none;margin-top:.2rem}

/* ====================================================== 7. Herramienta ===== */
.app-cuerpo{background:var(--fondo-2);min-height:100vh;display:flex;flex-direction:column}
.app-principal{flex:1;padding:1.6rem 0 3rem}
.app-rejilla{display:grid;grid-template-columns:1fr 372px;gap:1.4rem;align-items:start}

.panel{background:#fff;border:1px solid var(--linea);border-radius:var(--r-l);overflow:hidden}
.panel-cab{padding:1rem 1.25rem;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.panel-cab h2{font-size:1.02rem;font-weight:600}
.panel-cuerpo{padding:1.25rem}

/* --- zona de subida --- */
.soltar{
  border:2px dashed var(--gris-20);border-radius:var(--r-l);background:var(--fondo-2);
  padding:clamp(2.2rem,5vw,3.4rem) 1.5rem;text-align:center;transition:border-color .18s var(--ease),background .18s var(--ease);
  cursor:pointer;
}
.soltar:hover,.soltar.encima{border-color:var(--acento);background:var(--acento-luz)}
.soltar-icono{width:46px;height:46px;margin:0 auto 1rem;border-radius:14px;background:#fff;border:1px solid var(--linea);display:grid;place-items:center;color:var(--acento)}
.soltar-icono svg{width:22px;height:22px}
.soltar h3{font-size:1.06rem;margin-bottom:.4rem}
.soltar p{font-size:.9rem;color:var(--gris-60)}
.soltar .btn{margin-top:1.15rem}

/* --- barra de progreso --- */
.progreso{height:6px;background:var(--fondo-3);border-radius:999px;overflow:hidden}
.progreso i{display:block;height:100%;background:var(--acento);border-radius:999px;width:0;transition:width .3s var(--ease)}
.progreso-txt{font-size:.88rem;color:var(--gris-60);margin-top:.6rem;display:flex;justify-content:space-between;gap:1rem}

/* --- visor de páginas --- */
.visor{background:var(--fondo-3);padding:1.1rem;display:grid;place-items:center;min-height:260px}
.hoja{position:relative;background:#fff;box-shadow:var(--sombra-m);line-height:0;max-width:100%}
.hoja canvas{max-width:100%;height:auto}
.capa{position:absolute;inset:0;overflow:hidden}
.caja{position:absolute;background:#0a0a0a;border-radius:1px;transition:opacity .14s var(--ease)}
.caja.inactiva{background:transparent;border:1.5px dashed var(--gris-40);opacity:.75}
.caja.resaltada{outline:2px solid var(--acento);outline-offset:1px}
.caja.manual{background:#0a0a0a}
.capa.dibujando{cursor:crosshair}
.capa.dibujando .caja{pointer-events:none}
.caja-nueva{position:absolute;background:rgba(10,10,10,.4);border:1.5px solid var(--acento)}

.visor-barra{display:flex;align-items:center;gap:.6rem;padding:.7rem 1.25rem;border-top:1px solid var(--linea);background:#fff;flex-wrap:wrap}
.visor-barra .paginacion{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--gris-60);font-variant-numeric:tabular-nums}
.visor-barra .btn{padding:.45rem .75rem;font-size:.86rem}

/* --- lista de detecciones --- */
.det-resumen{display:flex;gap:.6rem;flex-wrap:wrap;padding:0 1.25rem 1rem;font-size:.85rem;color:var(--gris-60)}
.det-lista{max-height:min(58vh,620px);overflow:auto;padding:0 .75rem 1rem}
.det-grupo-tit{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-40);
  font-weight:700;padding:.9rem .5rem .4rem;position:sticky;top:0;background:#fff;z-index:2;
}
.det{
  display:flex;align-items:flex-start;gap:.65rem;padding:.6rem .5rem;border-radius:var(--r-s);
  transition:background .14s var(--ease);cursor:pointer;
}
.det:hover{background:var(--fondo-2)}
.det.apagada .det-texto{text-decoration:line-through;color:var(--gris-40)}
.det-check{
  width:19px;height:19px;border-radius:5px;border:1.5px solid var(--gris-20);flex:none;margin-top:.16rem;
  display:grid;place-items:center;background:#fff;transition:background .14s var(--ease),border-color .14s var(--ease);
}
.det.encendida .det-check{background:var(--acento);border-color:var(--acento)}
.det-check svg{width:11px;height:11px;color:#fff;opacity:0}
.det.encendida .det-check svg{opacity:1}
.det-info{min-width:0;flex:1}
.det-texto{font-size:.87rem;font-weight:500;word-break:break-word;line-height:1.4}
.det-meta{font-size:.74rem;color:var(--gris-40);margin-top:.15rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.et-tipo{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--fondo-3);color:var(--gris-60);border-radius:4px;padding:.1rem .35rem;
}
.et-tipo.t-nombre{background:#e8f0fe;color:#1a52b8}
.et-tipo.t-dni{background:#fdeeea;color:#a5231c}
.et-tipo.t-email{background:#eaf6f0;color:#0f7a52}
.et-tipo.t-telefono{background:#f3edfd;color:#5b34b5}
.et-tipo.t-direccion{background:#fef3e2;color:#8a5a06}
.et-tipo.t-iban{background:#e9f3f7;color:#12667f}
.et-tipo.t-fecha_nacimiento{background:#fdf0f6;color:#9c2b64}
.et-tipo.t-manual{background:var(--tinta);color:#fff}
.det-borrar{color:var(--gris-40);padding:.2rem;border-radius:4px;flex:none}
.det-borrar:hover{color:var(--peligro);background:var(--peligro-luz)}
.det-vacio{padding:2rem 1.25rem;text-align:center;color:var(--gris-60);font-size:.9rem}

.det-acciones{padding:1rem 1.25rem;border-top:1px solid var(--linea);display:grid;gap:.6rem}
.det-acciones-fila{display:flex;gap:.5rem}
.det-acciones-fila .btn{flex:1}

/* --- estados --- */
[data-estado] > .fase{display:none}
[data-estado="inicio"]   > .fase-inicio,
[data-estado="listo"]    > .fase-listo,
[data-estado="trabajando"] > .fase-trabajando,
[data-estado="revision"] > .fase-revision,
[data-estado="error"]    > .fase-error{display:block}

/* --- barra de estado de la IA --- */
.ia-estado{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--gris-60)}
.ia-punto{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.ia-punto.apagado{background:var(--aviso)}

/* --- cuenta --- */
.cuenta-rejilla{display:grid;grid-template-columns:1fr 340px;gap:1.4rem;align-items:start}
.dato-grande{font-size:2.3rem;font-weight:700;letter-spacing:-.04em;font-family:var(--serif);line-height:1}
.dato-et{font-size:.82rem;color:var(--gris-40);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.4rem}
.barra-cred{height:8px;background:var(--fondo-3);border-radius:999px;overflow:hidden;margin-top:.9rem}
.barra-cred i{display:block;height:100%;background:var(--acento);border-radius:999px;transition:width .4s var(--ease)}
.tabla{width:100%;border-collapse:collapse;font-size:.89rem}
.tabla th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris-40);font-weight:600;padding:.6rem .75rem;border-bottom:1px solid var(--linea)}
.tabla td{padding:.7rem .75rem;border-bottom:1px solid var(--linea-2);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* --- pago simulado --- */
.tarjeta-falsa{
  background:linear-gradient(135deg,#1b2534,#0d1420);color:#fff;border-radius:var(--r-m);
  padding:1.2rem;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;position:relative;overflow:hidden;
}
.tarjeta-falsa .sello{
  position:absolute;top:.7rem;right:.9rem;font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;color:#f0c98a;border:1px solid rgba(240,201,138,.45);border-radius:4px;padding:.12rem .4rem;
}
.tarjeta-falsa .num{font-size:1.06rem;margin:1.5rem 0 .9rem}
.tarjeta-falsa .pie-t{display:flex;justify-content:space-between;font-size:.72rem;color:#9aa6b8}

/* ======================================================= 8. Responsive ===== */
@media (max-width:1060px){
  .app-rejilla{grid-template-columns:1fr}
  .cuenta-rejilla{grid-template-columns:1fr}
  .det-lista{max-height:420px}
}
@media (max-width:960px){
  .portada-rejilla{grid-template-columns:1fr}
  .pasos,.ventajas,.publico,.precios{grid-template-columns:1fr}
  .plan.destacado{order:-1}
  .acceso{grid-template-columns:1fr}
  .acceso-lado{display:none}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:2rem}
}
@media (max-width:720px){
  .comparativa{grid-template-columns:1fr}
  .nav{gap:.9rem}
  .nav .oculta-movil{display:none}
  .pie-rejilla{grid-template-columns:1fr}
  .modal-caja{padding:1.4rem}
}

/* ================================================ 9. Movimiento reducido === */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tostada{animation:none}
  .creditos-num,.progreso i,.barra-cred i{transition:none}
}