/* Lead magnets de Amin Business · base común (v2, 24-10).
   Fondo blanco, tinta y marino. Cada lead magnet es una herramienta:
   controles a la izquierda y el resultado en vivo en un panel negro.
   La cifra grande va en peso ligero; los títulos, apretados. */
:root{
  --blanco:#fff; --hueso:#f7f7f8; --tinta:#0a0a0b; --tinta-2:#45454c; --tinta-3:#8a8a92;
  --linea:rgba(10,10,11,.10); --linea-2:rgba(10,10,11,.06); --marino:#1b2f52; --marino-s:rgba(27,47,82,.08);
  --marino-c:#a9b9d6; /* el marino sobre negro: legible y de la misma familia */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{background:var(--blanco);color:var(--tinta);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}
a{color:inherit}
button{font:inherit}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linea-2)}
.top-in{max-width:1080px;margin:0 auto;padding:0 16px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:-.02em}
.marca i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--tinta);color:#fff;font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:-.02em}
.top nav{display:flex;align-items:center;gap:6px}
.top nav a{text-decoration:none;font-size:.84rem;font-weight:600;color:var(--tinta-2);padding:8px 12px;border-radius:8px}
.top nav a:hover{color:var(--tinta);background:var(--hueso)}
.top nav a.cta{background:var(--tinta);color:#fff}
.top nav a.cta:hover{background:var(--marino)}
@media(max-width:520px){.top nav a.rec-link{display:none}}

/* El fondo de puntos que se desvanece: da textura sin quitar el blanco. */
.fondo{position:absolute;inset:0 0 auto 0;height:620px;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(10,10,11,.075) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 92%);mask-image:linear-gradient(to bottom,#000 10%,transparent 92%)}

/* ── Portada de cada herramienta ─────────────────────────────────────── */
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
.ancho{max-width:1080px}
.kick{display:flex;width:max-content;max-width:100%;margin:38px auto 0;align-items:center;gap:8px;background:#fff;border:1px solid var(--linea);border-radius:100px;padding:6px 14px 6px 10px;font-size:.74rem;font-weight:600;color:var(--tinta-2);box-shadow:0 2px 10px rgba(10,10,11,.04)}
.kick:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--marino);box-shadow:0 0 0 4px var(--marino-s)}
h1{margin:18px auto 14px;max-width:20em;text-align:center;text-transform:uppercase;text-wrap:balance;font-weight:900;font-size:clamp(26px,4.6vw,46px);line-height:1.05;letter-spacing:-.04em}
h1 .m{color:var(--marino);text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.12em;text-decoration-color:rgba(27,47,82,.35)}
.sub{text-align:center;color:var(--tinta-2);max-width:36em;margin:0 auto 18px;font-size:clamp(.98rem,1.7vw,1.08rem);text-wrap:pretty}
.confianza{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;list-style:none;margin:0 auto 34px;font-size:.8rem;color:var(--tinta-2);font-weight:500}
.confianza li{display:flex;align-items:center;gap:7px}
.confianza li:before{content:'';width:16px;height:16px;border-radius:50%;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}

/* ── La herramienta: controles + panel de resultado ──────────────────── */
.herramienta{display:grid;gap:18px;align-items:start}
@media(min-width:900px){.herramienta{grid-template-columns:minmax(0,1fr) 370px;gap:22px}.herramienta > .panel-res{position:sticky;top:80px}}
.card{background:#fff;border:1px solid var(--linea);border-radius:18px;padding:clamp(18px,3vw,28px);box-shadow:0 1px 2px rgba(10,10,11,.04),0 18px 44px rgba(10,10,11,.05)}
.card-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 20px;padding-bottom:14px;border-bottom:1px solid var(--linea-2)}
.card-cab b{font-size:.92rem;letter-spacing:-.01em}
.card-cab span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--tinta-3)}

.panel-res{background:var(--tinta);color:#fff;border-radius:18px;padding:22px;box-shadow:0 24px 60px rgba(10,10,11,.22);overflow:hidden;position:relative}
.panel-res:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 100% 0%,rgba(169,185,214,.16),transparent 60%)}
.panel-res .pr-cab{display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.55)}
.panel-res .pr-cab:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--marino-c);animation:latido 2s ease-in-out infinite}
@keyframes latido{50%{opacity:.35}}
.panel-res .grande{margin:14px 0 4px;font-size:clamp(2.4rem,5vw,3.1rem);font-weight:300;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-res .grande-n{font-size:.82rem;color:rgba(255,255,255,.6)}
.panel-res .filas{margin-top:18px;border-top:1px solid rgba(255,255,255,.12)}
.panel-res .fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.panel-res .fila span{font-size:.84rem;color:rgba(255,255,255,.66)}
.panel-res .fila strong{font-size:1.25rem;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-res .fila em{display:block;font-style:normal;font-size:.72rem;color:rgba(255,255,255,.45);margin-top:2px}
.panel-res .comp{margin-top:18px;display:grid;gap:10px}
.panel-res .comp div{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px;font-size:.74rem;color:rgba(255,255,255,.6)}
.panel-res .comp i{display:block;height:8px;border-radius:100px;background:rgba(255,255,255,.18);transition:width .4s}
.panel-res .comp i.on{background:var(--marino-c)}
.panel-res .nota{margin-top:16px;font-size:.72rem;color:rgba(255,255,255,.45);line-height:1.5}

/* ── Controles ───────────────────────────────────────────────────────── */
.campo{margin-bottom:22px}
.campo label,.etq{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.84rem;font-weight:600;color:var(--tinta);margin-bottom:10px}
.campo label output{color:var(--marino);font-variant-numeric:tabular-nums;font-weight:700;background:var(--marino-s);padding:3px 9px;border-radius:7px;font-size:.84rem;white-space:nowrap}
.ayuda{font-size:.76rem;color:var(--tinta-3);margin-top:8px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:100px;cursor:pointer;
  background:linear-gradient(var(--marino),var(--marino)) 0/var(--p,50%) 100% no-repeat,#e8e8ec;margin:8px 0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--marino);box-shadow:0 2px 8px rgba(27,47,82,.28);transition:transform .15s}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--marino);box-shadow:0 2px 8px rgba(27,47,82,.28)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible{outline:2px solid var(--marino);outline-offset:6px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--linea);border-radius:11px;background:var(--hueso);font:inherit;font-size:16px;color:var(--tinta);transition:border-color .15s,background .15s}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--marino);background:#fff;box-shadow:0 0 0 4px var(--marino-s)}
.opciones{display:grid;gap:9px}
.op{display:flex;align-items:center;gap:13px;border:1px solid var(--linea);border-radius:13px;padding:14px 15px;cursor:pointer;font-size:.96rem;background:#fff;transition:border-color .15s,background .15s,transform .15s;text-align:left;color:inherit;width:100%}
.op:hover{border-color:var(--tinta);transform:translateX(2px)}
.op.on{border-color:var(--marino);background:var(--marino-s);font-weight:600}
.op b{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--linea);font-size:.74rem;flex:none;background:#fff;color:var(--tinta-2)}
.op.on b{background:var(--marino);color:#fff;border-color:var(--marino)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .op{width:auto;padding:10px 14px;font-size:.88rem}

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--tinta);color:#fff;border:0;border-radius:12px;padding:16px 30px;font-weight:800;font-size:1rem;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 10px 24px rgba(10,10,11,.18)}
.btn:hover{transform:translateY(-2px);background:var(--marino);box-shadow:0 14px 30px rgba(27,47,82,.28)}
.btn small{font-weight:400;font-size:.78rem;color:rgba(255,255,255,.72)}
.btn.sec{background:#fff;color:var(--tinta);border:1px solid var(--linea);box-shadow:none}
.btn.sec:hover{border-color:var(--tinta);background:#fff}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.centro{text-align:center}

/* ── Resultados ──────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px;margin:18px 0}
.kpi{border:1px solid var(--linea);border-radius:14px;padding:16px;background:#fff;min-width:0}
.kpi span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--tinta-3)}
.kpi strong{display:block;margin-top:8px;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:300;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi.m{background:var(--tinta);border-color:var(--tinta);color:#fff}
.kpi.m span,.kpi.m em{color:rgba(255,255,255,.6)}
.kpi em{display:block;font-style:normal;font-size:.78rem;color:var(--tinta-3);margin-top:6px}
.barra{height:10px;border-radius:100px;background:var(--marino-s);overflow:hidden}
.barra i{display:block;height:100%;background:var(--marino);border-radius:100px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.progreso{height:5px;background:var(--linea-2);border-radius:5px;overflow:hidden;margin-bottom:20px}
.progreso i{display:block;height:100%;background:var(--marino);border-radius:5px;transition:width .35s}
.oculto{display:none!important}

/* El bloque cerrado: se intuye lo que hay detrás, no se lee. */
.bloqueado{position:relative;margin-top:22px}
.bloqueado .velo{filter:blur(7px);pointer-events:none;user-select:none;opacity:.75}
.candado{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.55))}
.candado .card{max-width:440px;width:100%;text-align:center;box-shadow:0 30px 70px rgba(10,10,11,.16)}
.candado .card:before{content:'';display:block;width:46px;height:46px;margin:0 auto 14px;border-radius:14px;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/22px no-repeat}
.lista{list-style:none;display:grid;gap:12px}
.lista li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:.96rem}
.lista li:before{content:'';width:22px;height:22px;border-radius:50%;background:var(--marino) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;margin-top:1px}
.lista.num{counter-reset:n}
.lista.num li:before{counter-increment:n;content:counter(n);background:var(--tinta);color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:700}
h2{font-size:clamp(1.15rem,2.4vw,1.42rem);font-weight:800;letter-spacing:-.03em;margin-bottom:12px;text-wrap:balance}
.sep{height:1px;background:var(--linea);margin:24px 0}
.aviso{font-size:.74rem;color:var(--tinta-3);line-height:1.5;margin-top:18px;text-align:center}

/* Anillo de puntuación (diagnóstico) */
.anillo{width:132px;height:132px;flex:none}
.anillo circle{fill:none;stroke-width:10}
.anillo .fondo-a{stroke:rgba(255,255,255,.14)}
.anillo .valor{stroke:var(--marino-c);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.anillo text{fill:#fff;font-weight:300;font-size:30px;letter-spacing:-.04em;text-anchor:middle;dominant-baseline:central}

/* Cierre con llamada */
.cierre{margin-top:30px;border-radius:20px;background:var(--hueso);border:1px solid var(--linea-2);padding:clamp(24px,4vw,40px);text-align:center}
.cierre .sub{margin-bottom:20px}

/* ── Pie ─────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea);margin-top:70px;padding:24px 16px;text-align:center;font-size:.74rem;color:var(--tinta-3)}
.pie a{color:var(--tinta-3);text-decoration:none}
.fila2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.fila2{grid-template-columns:1fr}.btn{width:100%}h1{margin-top:14px}.kick{margin-top:26px}}
.err{margin-top:10px;padding:10px 12px;border-radius:9px;font-size:.85rem;background:#fdf0f0;border:1px solid #f3c9c9;color:#9b1c1c}
.cargando{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 10px;text-align:center}
.giro{width:38px;height:38px;border-radius:50%;border:3px solid var(--marino-s);border-top-color:var(--marino);animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}

/* Ventana de datos */
.capa-lm .card{animation:sube .25s cubic-bezier(.2,.8,.2,1)}
.capa-lm .card:before{content:'';display:block;width:42px;height:42px;margin-bottom:14px;border-radius:12px;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/20px no-repeat}
.capa-lm .campo{margin-bottom:14px}
.capa-lm .campo label{margin-bottom:6px}
@keyframes sube{from{opacity:0;transform:translateY(14px) scale(.98)}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.top,.pie,.noimp,.fondo{display:none!important}.card,.panel-res{box-shadow:none}}

/* Vista previa desde el panel: sin aviso de cookies tapando la página. */
html.previa #cookie-aviso{display:none!important}
html.previa body{padding-bottom:0!important}