/* =============================================================
   VERIFIKA — hoja de estilo única
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía
   5. Componentes · 6. Analizador · 7. Informe · 8. Secciones
   9. App y cuenta · 10. Responsive · 11. Movimiento reducido
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #090b12;
  --bg-2:      #0e1120;
  --card:      #141829;
  --card-2:    #1a1f34;
  --line:      #262d47;
  --line-2:    #333b5c;
  --tx:        #e9ebf5;
  --mu:        #97a0bd;
  --mu-2:      #6d7796;

  --ac:        #6c5cff;
  --ac-claro:  #9d90ff;
  --ac-oscuro: #4c3fd6;
  --cian:      #22d3ee;

  --v-ok:   #22c55e;
  --v-bien: #a3e635;
  --v-duda: #facc15;
  --v-mal:  #fb923c;
  --v-peor: #f43f5e;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: "Space Grotesk", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --ancho: 1180px;
  --radio: 16px;
  --radio-s: 10px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.4), 0 24px 60px -20px rgba(0,0,0,.75);
}

/* =============================================================
   2. Reset y base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { 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.1; letter-spacing: -0.025em; font-family: var(--disp); font-weight: 600; }
::selection { background: var(--ac); color: #fff; }
:focus-visible { outline: 2px solid var(--ac-claro); outline-offset: 3px; border-radius: 6px; }

/* Fondo con textura de rejilla, muy sutil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 50% -5%, rgba(108,92,255,.16), transparent 70%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 100% 56px,
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 0 0 / 56px 100%;
  mask-image: linear-gradient(#000 0, #000 60vh, transparent 110vh);
}
body > * { position: relative; z-index: 1; }

/* =============================================================
   3. Utilidades
   ============================================================= */
.env { width: min(100% - var(--gutter) * 2, var(--ancho)); margin-inline: auto; }
.env-estrecho { width: min(100% - var(--gutter) * 2, 760px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .6rem 1rem; background: var(--tx); color: var(--bg);
  border-radius: 8px; font-weight: 600;
}
.salta:focus { top: 1rem; }
.centro { text-align: center; }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: -0.01em; }
[hidden] { display: none !important; }

/* =============================================================
   4. Tipografía
   ============================================================= */
.kicker {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ac-claro);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.kicker::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55;
}
h1, .h1 { font-size: clamp(2.1rem, 5.6vw, 3.9rem); }
h2, .h2 { font-size: clamp(1.65rem, 3.6vw, 2.6rem); }
h3, .h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--mu); max-width: 62ch; }
.secc-cab { margin-bottom: clamp(2rem, 4vw, 3rem); }
.secc-cab h2 { margin: .7rem 0 .8rem; }

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

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .78rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.01em;
  transition: transform .25s var(--ease-out), background .25s var(--ease-out),
              border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), opacity .2s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-p {
  background: linear-gradient(135deg, var(--ac), var(--ac-oscuro));
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(108,92,255,.9);
}
.btn-p:hover { box-shadow: 0 12px 30px -10px rgba(108,92,255,1); }
.btn-s {
  background: rgba(255,255,255,.04);
  border-color: var(--line-2);
  color: var(--tx);
}
.btn-s:hover { background: rgba(255,255,255,.08); border-color: var(--ac); }
.btn-t { padding: .5rem .9rem; color: var(--mu); }
.btn-t:hover { color: var(--tx); }
.btn-g { padding: .95rem 1.7rem; font-size: 1rem; }
.btn-bloque { width: 100%; }
.btn-peligro { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.35); color: #fda4af; }
.btn-peligro:hover { background: rgba(244,63,94,.2); }

/* --- Tarjetas --- */
.tarj {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.tarj-h { transition: border-color .3s var(--ease-out), transform .3s var(--ease-out); }
.tarj-h:hover { border-color: var(--line-2); transform: translateY(-3px); }

/* --- Etiquetas --- */
.eti {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.03);
  color: var(--mu);
}
.eti-ac { color: var(--ac-claro); border-color: rgba(108,92,255,.4); background: rgba(108,92,255,.1); }

/* --- Aviso de modo demo --- */
.demo-badge {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .55rem 1rem;
  background: rgba(250,204,21,.1);
  border-bottom: 1px solid rgba(250,204,21,.25);
  color: #fde68a;
  font-size: .82rem;
  font-weight: 500;
  text-align: center;
}
.demo-badge strong { color: #fef3c7; }

/* --- Navegación --- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(9,11,18,.78);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: #0b0d16; } }
.nav-in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 66px;
}
.logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--disp); font-weight: 700; font-size: 1.12rem; letter-spacing: -0.03em; }
.logo svg { width: 26px; height: 26px; flex: none; }
.logo span i { font-style: normal; color: var(--ac-claro); }
.nav-links { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav-links a { padding: .5rem .8rem; font-size: .92rem; color: var(--mu); border-radius: 8px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--tx); background: rgba(255,255,255,.04); }
.nav-menu { display: none; }
.nav-hamb { display: none; }

/* --- Contador de créditos --- */
.creditos {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(108,92,255,.35);
  background: rgba(108,92,255,.1);
  font-size: .87rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: transform .4s var(--ease-bounce), background .3s;
}
.creditos.pulso { transform: scale(1.12); background: rgba(108,92,255,.25); }
.creditos svg { width: 14px; height: 14px; color: var(--ac-claro); }

/* --- Avisos en página (nunca alert()) --- */
.avisos { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: grid; gap: .6rem; max-width: min(92vw, 420px); }
.aviso {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--radio-s);
  background: var(--card-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--sombra-alta);
  font-size: .9rem;
  animation: avisoEntra .35s var(--ease-out);
}
.aviso b { display: block; margin-bottom: .1rem; }
.aviso-err { border-color: rgba(244,63,94,.4); }
.aviso-err b { color: #fda4af; }
.aviso-ok { border-color: rgba(34,197,94,.4); }
.aviso-ok b { color: #86efac; }
.aviso-cerrar { margin-left: auto; color: var(--mu-2); flex: none; }
.aviso-cerrar:hover { color: var(--tx); }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(12px); } }

/* --- Ventanas modales --- */
dialog {
  border: 0; padding: 0; background: none; color: inherit;
  max-width: min(94vw, 460px); width: 100%;
}
dialog::backdrop { background: rgba(5,6,12,.78); backdrop-filter: blur(4px); }
.modal {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: clamp(1.5rem, 4vw, 2.1rem);
  box-shadow: var(--sombra-alta);
}
.modal h2 { font-size: 1.4rem; margin-bottom: .4rem; }
.modal p { color: var(--mu); font-size: .93rem; }
.modal-cerrar { position: absolute; top: 1rem; right: 1rem; color: var(--mu); width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.modal-cerrar:hover { color: var(--tx); background: rgba(255,255,255,.06); }
dialog[open] { animation: modalEntra .3s var(--ease-out); }
@keyframes modalEntra { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* --- Formularios --- */
.campo { display: grid; gap: .35rem; margin-bottom: .9rem; }
.campo label { font-size: .85rem; font-weight: 500; color: var(--mu); }
.entrada {
  width: 100%;
  padding: .78rem .95rem;
  border-radius: var(--radio-s);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--tx);
  font-size: .96rem;
  transition: border-color .2s, background .2s;
}
.entrada::placeholder { color: var(--mu-2); }
.entrada:focus { outline: none; border-color: var(--ac); background: #0c0f1c; }
textarea.entrada { min-height: 130px; resize: vertical; line-height: 1.6; }
.pestanas-auth { display: flex; gap: .3rem; margin-bottom: 1.2rem; padding: .25rem; background: var(--bg-2); border-radius: 12px; border: 1px solid var(--line); }
.pestanas-auth button { flex: 1; padding: .55rem; border-radius: 9px; font-size: .9rem; font-weight: 600; color: var(--mu); transition: background .2s, color .2s; }
.pestanas-auth button[aria-selected="true"] { background: var(--card-2); color: var(--tx); }

/* =============================================================
   6. El analizador
   ============================================================= */
.analiz {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--line-2);
  border-radius: 22px;
  padding: clamp(1.1rem, 2.6vw, 1.6rem);
  box-shadow: var(--sombra-alta);
}
.pestanas {
  display: flex; gap: .25rem; margin-bottom: 1rem;
  overflow-x: auto; scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  font-size: .88rem; font-weight: 600;
  color: var(--mu);
  border: 1px solid transparent;
  transition: all .25s var(--ease-out);
  white-space: nowrap;
}
.pestanas button:hover { color: var(--tx); }
.pestanas button[aria-selected="true"] {
  background: rgba(108,92,255,.14);
  border-color: rgba(108,92,255,.4);
  color: var(--ac-claro);
}
.pestanas svg { width: 15px; height: 15px; }

.panel-entrada { display: grid; gap: .8rem; }
.fila-url { display: flex; gap: .6rem; }
.fila-url .entrada { flex: 1; font-family: var(--mono); font-size: .9rem; }

/* Zona de arrastrar archivos */
.suelta {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--radio);
  padding: clamp(1.6rem, 4vw, 2.4rem) 1.2rem;
  text-align: center;
  transition: border-color .25s, background .25s;
  cursor: pointer;
  display: grid;
  gap: .5rem;
  place-items: center;
}
.suelta:hover, .suelta.encima { border-color: var(--ac); background: rgba(108,92,255,.06); }
.suelta svg { width: 34px; height: 34px; color: var(--ac-claro); opacity: .8; }
.suelta strong { font-size: 1rem; }
.suelta small { color: var(--mu-2); font-size: .8rem; }
.suelta-elegido { display: flex; align-items: center; gap: .7rem; text-align: left; width: 100%; }
.suelta-elegido .nombre { font-weight: 600; font-size: .93rem; word-break: break-all; }
.suelta-elegido .peso { color: var(--mu-2); font-size: .8rem; }

.pie-analiz {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding-top: .3rem;
}
.coste {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .84rem; color: var(--mu);
  font-variant-numeric: tabular-nums;
}
.coste b { color: var(--tx); }
.pie-analiz .btn { margin-left: auto; }

/* Estado «trabajando» */
.trabajando { display: grid; gap: 1rem; padding: clamp(1.5rem, 4vw, 2.4rem) 0; place-items: center; text-align: center; }
.escaner {
  width: 100%; max-width: 340px; height: 4px; border-radius: 4px;
  background: var(--line); overflow: hidden; position: relative;
}
.escaner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--ac), var(--cian), transparent);
  transform: translateX(-100%);
  animation: escanea 1.5s var(--ease-soft) infinite;
}
@keyframes escanea { to { transform: translateX(100%); } }
.pasos { display: grid; gap: .3rem; font-size: .88rem; color: var(--mu); }
.pasos li { list-style: none; opacity: .35; transition: opacity .4s, color .4s; }
.pasos li.activo { opacity: 1; color: var(--tx); }
.pasos li.hecho { opacity: .7; color: var(--v-ok); }

/* =============================================================
   7. El informe
   ============================================================= */
.informe { display: grid; gap: 1rem; }

/* --- Veredicto --- */
.veredicto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.1rem, 3vw, 1.8rem);
  align-items: center;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--halo, rgba(108,92,255,.14)), transparent 62%),
    var(--card);
}
.aro { position: relative; width: 108px; height: 108px; flex: none; }
.aro svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.aro circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.aro .pista { stroke: var(--line); }
.aro .valor {
  stroke: var(--vcolor, var(--ac));
  stroke-dasharray: var(--dash, 0) 999;
  transition: stroke-dasharray 1.1s var(--ease-out);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--vcolor, var(--ac)) 55%, transparent));
}
.aro-num {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.aro-num b { font-family: var(--disp); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.aro-num small { font-size: .64rem; color: var(--mu-2); text-transform: uppercase; letter-spacing: .1em; }

.veredicto-txt h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); margin-bottom: .45rem; color: var(--vcolor, var(--tx)); }
.veredicto-txt .titulo-mat { font-weight: 600; margin-bottom: .3rem; font-size: 1rem; }
.veredicto-txt p { color: var(--mu); font-size: .94rem; }
.veredicto-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }

/* --- Medidores --- */
.medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
.med { padding: .95rem 1.05rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.med-cab { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.med-cab span { font-size: .82rem; color: var(--mu); font-weight: 500; }
.med-cab b { font-family: var(--disp); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.barra { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: 4px; width: 0; transition: width 1s var(--ease-out); }
.med small { display: block; margin-top: .45rem; font-size: .74rem; color: var(--mu-2); line-height: 1.45; }

/* --- Lista de señales --- */
/* padding:0 es obligatorio: los bloques del informe son <section> y heredarían
   el relleno vertical enorme de las secciones de la portada. */
.bloque { background: var(--card); border: 1px solid var(--line); border-radius: var(--radio); overflow: hidden; padding: 0; }
.bloque > h3 {
  display: flex; align-items: center; gap: .6rem;
  padding: 1rem clamp(1rem, 2.4vw, 1.4rem);
  font-size: .96rem; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.bloque > h3 .cuenta { margin-left: auto; font-size: .78rem; color: var(--mu-2); font-weight: 500; }
.senales { display: grid; }
.senal {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem;
  padding: 1rem clamp(1rem, 2.4vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
.senal:last-child { border-bottom: 0; }
.senal-icono {
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; flex: none;
  font-size: .72rem; font-weight: 700;
}
.senal-icono svg { width: 14px; height: 14px; }
.g-alta     .senal-icono { background: rgba(244,63,94,.15);  color: #fb7185; }
.g-media    .senal-icono { background: rgba(251,146,60,.15); color: #fdba74; }
.g-baja     .senal-icono { background: rgba(250,204,21,.13); color: #fde047; }
.g-info     .senal-icono { background: rgba(255,255,255,.06); color: var(--mu); }
.g-positiva .senal-icono { background: rgba(34,197,94,.14);  color: #4ade80; }
.senal h4 { font-size: .94rem; font-weight: 600; margin-bottom: .2rem; font-family: var(--sans); letter-spacing: 0; }
.senal p { font-size: .88rem; color: var(--mu); }
.senal blockquote {
  margin-top: .5rem; padding: .5rem .7rem;
  border-left: 2px solid var(--line-2);
  background: rgba(255,255,255,.025);
  border-radius: 0 8px 8px 0;
  font-family: var(--mono); font-size: .78rem; color: var(--mu);
  word-break: break-word;
}
.senal-org { font-size: .68rem; color: var(--mu-2); margin-top: .4rem; display: inline-flex; align-items: center; gap: .3rem; }

/* --- Afirmaciones --- */
.afirm { padding: 1rem clamp(1rem, 2.4vw, 1.4rem); border-bottom: 1px solid var(--line); }
.afirm:last-child { border-bottom: 0; }
.afirm p { font-size: .92rem; margin-bottom: .3rem; }
.afirm .por-que { font-size: .82rem; color: var(--mu); }

/* --- Cómo comprobarlo --- */
.comprob { display: grid; }
.comp {
  display: grid; grid-template-columns: 24px 1fr auto; gap: .8rem; align-items: start;
  padding: .9rem clamp(1rem, 2.4vw, 1.4rem);
  border-bottom: 1px solid var(--line);
}
.comp:last-child { border-bottom: 0; }
.comp-num {
  width: 24px; height: 24px; border-radius: 7px;
  background: rgba(108,92,255,.14); color: var(--ac-claro);
  display: grid; place-items: center; font-size: .74rem; font-weight: 700;
  font-family: var(--mono);
}
.comp b { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .12rem; }
.comp span { font-size: .84rem; color: var(--mu); }
.comp a.btn { align-self: center; }

/* --- Ficha de la fuente --- */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .1rem; }
.ficha div { padding: .9rem clamp(1rem, 2.4vw, 1.4rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ficha dt { font-size: .74rem; color: var(--mu-2); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .25rem; }
.ficha dd { font-size: .9rem; font-weight: 500; word-break: break-word; }

/* --- Nota de límites --- */
.limites {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem 1.2rem;
  border-radius: var(--radio);
  background: rgba(250,204,21,.06);
  border: 1px solid rgba(250,204,21,.2);
  font-size: .86rem; color: #fde68a;
}
.limites svg { width: 17px; height: 17px; flex: none; margin-top: .15rem; }
.limites b { display: block; margin-bottom: .15rem; }
.limites span { color: rgba(253,230,138,.82); }

/* =============================================================
   8. Secciones de la landing
   ============================================================= */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.hero h1 { margin: 1rem 0 1.1rem; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--ac-claro); }
.hero .lede { margin-bottom: 2rem; }
.hero-analiz { margin-top: 2.2rem; }
.hero-conf { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.3rem; font-size: .82rem; color: var(--mu-2); }
.hero-conf span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-conf svg { width: 14px; height: 14px; color: var(--v-ok); }

/* --- Rejilla de tipos de material --- */
.tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tipo { display: grid; gap: .55rem; }
.tipo-ico {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(108,92,255,.12); border: 1px solid rgba(108,92,255,.25);
  display: grid; place-items: center; color: var(--ac-claro);
}
.tipo-ico svg { width: 19px; height: 19px; }
.tipo h3 { font-size: 1.02rem; }
.tipo p { font-size: .89rem; color: var(--mu); }

/* --- Pasos --- */
.pasos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; counter-reset: paso; }
.paso { position: relative; padding-top: 2.6rem; }
.paso::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: .8rem; color: var(--ac-claro);
  padding: .25rem .6rem; border-radius: 7px;
  background: rgba(108,92,255,.12); border: 1px solid rgba(108,92,255,.3);
}
.paso h3 { margin-bottom: .45rem; font-size: 1.05rem; }
.paso p { color: var(--mu); font-size: .92rem; }

/* --- Lo que no hace --- */
.honesto { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.4rem); }
.honesto ul { list-style: none; display: grid; gap: .9rem; margin-top: 1.3rem; }
.honesto li { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; font-size: .93rem; color: var(--mu); }
.honesto li svg { width: 18px; height: 18px; color: var(--v-mal); margin-top: .2rem; }
.honesto li b { color: var(--tx); font-weight: 600; }

/* --- Precios --- */
.cambio-fact { display: inline-flex; gap: .25rem; padding: .28rem; background: var(--card); border: 1px solid var(--line); border-radius: 999px; margin-top: 1.2rem; }
.cambio-fact button { padding: .45rem 1.1rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--mu); transition: background .25s, color .25s; }
.cambio-fact button[aria-selected="true"] { background: var(--ac); color: #fff; }
.cambio-fact .ahorro { font-size: .7rem; opacity: .85; margin-left: .3rem; }

.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1.1rem; align-items: start; }
.plan { display: grid; gap: 1rem; position: relative; }
.plan.destacado { border-color: rgba(108,92,255,.55); background: linear-gradient(180deg, rgba(108,92,255,.09), var(--card) 45%); }
.plan-eti { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); }
.plan h3 { font-size: 1.1rem; }
.plan .precio { display: flex; align-items: baseline; gap: .35rem; font-family: var(--disp); }
.plan .precio b { font-size: 2.2rem; letter-spacing: -0.04em; }
.plan .precio span { color: var(--mu-2); font-size: .88rem; font-family: var(--sans); }
.plan .creds { font-size: .9rem; color: var(--ac-claro); font-weight: 600; }
.plan ul { list-style: none; display: grid; gap: .5rem; font-size: .88rem; color: var(--mu); }
.plan li { display: grid; grid-template-columns: 16px 1fr; gap: .55rem; }
.plan li svg { width: 14px; height: 14px; color: var(--v-ok); margin-top: .28rem; }
.plan li.no { color: var(--mu-2); }
.plan li.no svg { color: var(--mu-2); opacity: .5; }
.precio-nota { font-size: .82rem; color: var(--mu-2); margin-top: 1.4rem; text-align: center; }

/* --- Tabla de costes --- */
.costes-tabla { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .1rem; border: 1px solid var(--line); border-radius: var(--radio); overflow: hidden; margin-top: 1.4rem; }
.costes-tabla div { padding: .9rem 1rem; background: var(--card); border-right: 1px solid var(--line); text-align: center; }
.costes-tabla dt { font-size: .82rem; color: var(--mu); margin-bottom: .3rem; }
.costes-tabla dd { font-family: var(--disp); font-size: 1.15rem; font-weight: 600; }
.costes-tabla dd small { font-size: .7rem; color: var(--mu-2); font-weight: 400; font-family: var(--sans); }

/* --- Preguntas --- */
.faq { display: grid; gap: .6rem; }
.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radio-s);
  transition: border-color .25s;
}
.faq details[open] { border-color: var(--line-2); }
.faq summary {
  padding: 1rem 1.2rem; cursor: pointer; font-weight: 600; font-size: .96rem;
  list-style: none; display: flex; align-items: center; gap: .8rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto; color: var(--ac-claro); font-size: 1.3rem; font-weight: 400;
  transition: transform .3s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .resp { padding: 0 1.2rem 1.2rem; color: var(--mu); font-size: .92rem; }
.faq .resp p + p { margin-top: .7rem; }

/* --- Pie --- */
.pie { border-top: 1px solid var(--line); padding: 2.5rem 0 2rem; margin-top: 2rem; }
.pie-in { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; justify-content: space-between; }
.pie-links { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: .87rem; color: var(--mu); }
.pie-links a:hover { color: var(--tx); }
.pie small { display: block; margin-top: 1.6rem; color: var(--mu-2); font-size: .8rem; }

/* =============================================================
   9. Aplicación y cuenta
   ============================================================= */
.app-main { padding: clamp(1.4rem, 3vw, 2.4rem) 0 4rem; }
.app-cab { margin-bottom: 1.4rem; }
.app-cab h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: .35rem; }
.app-cab p { color: var(--mu); font-size: .93rem; }

.cuenta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.plan-actual { display: grid; gap: 1.1rem; }
.plan-actual .cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; }
.cifra b { display: block; font-family: var(--disp); font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { font-size: .8rem; color: var(--mu-2); }
.barra-cred { height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; }
.barra-cred i { display: block; height: 100%; background: linear-gradient(90deg, var(--ac), var(--cian)); transition: width .8s var(--ease-out); }

.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th { text-align: left; padding: .7rem clamp(1rem, 2.4vw, 1.4rem); color: var(--mu-2); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.tabla td { padding: .8rem clamp(1rem, 2.4vw, 1.4rem); border-bottom: 1px solid var(--line); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tabla .recorte { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.punto-ver { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.punto-ver i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.vacio { padding: 2.4rem 1.4rem; text-align: center; color: var(--mu-2); font-size: .9rem; }

/* Modal de pago simulado */
.pago-resumen { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 1.1rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radio-s); margin: 1rem 0; }
.pago-resumen b { font-family: var(--disp); font-size: 1.4rem; }
.tarjeta-falsa {
  font-family: var(--mono); font-size: .9rem; letter-spacing: .06em;
  padding: .8rem .95rem; border-radius: var(--radio-s);
  background: var(--bg-2); border: 1px dashed var(--line-2); color: var(--mu-2);
  display: flex; justify-content: space-between; gap: 1rem;
}
.demo-inline {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .8rem 1rem; border-radius: var(--radio-s);
  background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.28);
  color: #fde68a; font-size: .85rem; margin-bottom: 1rem;
}
.demo-inline svg { width: 16px; height: 16px; flex: none; margin-top: .18rem; }

/* Páginas legales */
.legal { padding: clamp(2.5rem, 6vw, 4rem) 0 5rem; }
.legal h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: .6rem; }
.legal h2 { font-size: 1.2rem; margin: 2.2rem 0 .7rem; }
.legal p, .legal li { color: var(--mu); font-size: .95rem; }
.legal p + p { margin-top: .8rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .4rem; margin-top: .6rem; }
.legal .actualizado { font-size: .82rem; color: var(--mu-2); }

/* =============================================================
   10. Revelados y responsive
   ============================================================= */
/* Por defecto TODO se ve. La animación de entrada sólo se activa cuando el
   JavaScript ha arrancado y añade .rev-on: si falla, la web sigue legible en
   lugar de quedarse en blanco. */
.rev-on .rev { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rev-on .rev.visible { opacity: 1; transform: none; }

@media (max-width: 719px) {
  .nav-links { display: none; }
  .nav-links.abierto {
    display: grid; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-2); border-bottom: 1px solid var(--line);
    padding: .8rem var(--gutter) 1.2rem; gap: .2rem;
  }
  .nav-links.abierto a { padding: .7rem .5rem; }
  .nav-hamb { display: grid; place-items: center; margin-left: auto; width: 40px; height: 40px; border-radius: 10px; color: var(--mu); }
  .nav-hamb:hover { background: rgba(255,255,255,.05); color: var(--tx); }
  .nav-hamb svg { width: 20px; height: 20px; }
  .nav { position: relative; }

  .veredicto { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .veredicto-meta { justify-content: center; }
  .fila-url { flex-direction: column; }
  .pie-analiz .btn { margin-left: 0; width: 100%; }
  .comp { grid-template-columns: 24px 1fr; }
  .comp a.btn { grid-column: 2; justify-self: start; }
  .ficha div { border-right: 0; }
  .tabla .recorte { max-width: 150px; }
}

@media (min-width: 960px) {
  .hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .hero-analiz { margin-top: 0; }
  .cuenta-grid { grid-template-columns: 1fr 1.35fr; }
}

/* =============================================================
   11. Movimiento reducido — sólo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .escaner::after { animation-duration: 3s; }
  .rev-on .rev { transition-duration: .01ms; opacity: 1; transform: none; }
}

/* =============================================================
   12. Impresión — el informe se imprime limpio
   ============================================================= */
@media print {
  body { background: #fff; color: #111; }
  body::before, .nav, .demo-badge, .avisos, .pie, .pie-analiz, .pestanas, .panel-entrada { display: none !important; }
  .tarj, .bloque, .veredicto, .med { border-color: #ccc; background: #fff; break-inside: avoid; }
  .senal p, .comp span, .med small { color: #444; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .7em; color: #666; }
}