/* ============================================================
   home.css — página principal (index.html)
   Usa los tokens de ds.css. Prefijo hm- para lo exclusivo de la portada.
   Fondo fijo casi negro con un halo azul tenue;
   las secciones son paneles translúcidos que dejan verlo al hacer scroll.
   El color de alerta (--risk-high) marca señales de estafa; no es decoración.
   ============================================================ */
:root{
  --risk-high:#e07f72;
  --risk-mid:#d4b062;
  --risk-low:#7fb092;
  --night:#030509;
  --glass:rgba(11,15,24,.85);
  --glass-line:rgba(169,188,203,.12);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
.hm{ /* acento azul brillante, a juego con el fondo */
  --accent:#4d9dff;
  --accent-ink:#04101f;
  --accent-soft:rgba(77,157,255,.14);
}

.ds-sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
[hidden]{display:none !important;}
.hm{overflow-x:hidden; background:var(--night);}
.hm h1, .hm h2, .hm h3{font-family:var(--font-display); margin:0; letter-spacing:-.02em;}
.hm main{position:relative;}

/* ---------- fondo fijo: casi negro con un único halo azul tenue ----------
   Un solo elemento con degradados estáticos: sin filtros, sin animación,
   en su propia capa para que el scroll no lo repinte. */
.hm-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  contain:strict; transform:translateZ(0);
  background:
    radial-gradient(55% 45% at 75% -5%, rgba(37,99,235,.20), transparent 70%),
    radial-gradient(40% 35% at 0% 105%, rgba(37,99,235,.07), transparent 70%),
    #030509;
}

/* ---------- encabezado: transparente arriba, sólido al hacer scroll ---------- */
.hm-header{
  background:transparent; border-bottom-color:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:background .3s ease, border-color .3s ease;
}
.hm-header.is-scrolled{
  background:rgba(3,5,9,.94); border-bottom-color:var(--glass-line);
}
.hm-header .ds-container{gap:var(--sp-3);}
.hm-nav{display:flex; gap:.25rem;}
.hm-nav-link{
  position:relative; padding:.5rem .8rem; border-radius:999px;
  font-size:.9rem; font-weight:500; color:var(--muted);
  transition:color .2s ease, background .2s ease;
}
.hm-nav-link:hover{color:var(--ink); background:rgba(255,255,255,.04);}
.hm-nav-link.is-current{color:var(--ink);}
.hm-nav-link.is-current::after{
  content:""; position:absolute; left:50%; bottom:.15rem; width:14px; height:2px; margin-left:-7px;
  border-radius:2px; background:var(--accent);
}
.hm-header-actions{display:flex; align-items:center; gap:.5rem;}
.hm-header-actions [data-guest]{display:flex; gap:.5rem;}
.hm-menu-btn{
  display:none; width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--border-strong); background:transparent;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hm-menu-btn span{display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px; transition:transform .25s var(--ease-out);}
.hm-menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.hm-menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}
.hm-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%; pointer-events:none;
  background:linear-gradient(90deg, var(--accent), var(--risk-low));
  transform:scaleX(var(--p, 0)); transform-origin:left;
}

/* ---------- inicio ---------- */
.hm-hero{min-height:calc(100svh - 72px); display:flex; align-items:center; padding:var(--sp-5) 0 var(--sp-6);}
.hm-hero .ds-container{width:100%;}
.hm .hm-title{
  max-width:13ch; margin-bottom:var(--sp-3);
  font-weight:800; font-size:clamp(2.7rem, 6.4vw, 5.6rem); line-height:1.08; letter-spacing:-.03em;
}
.hm-line{display:block; overflow:hidden; padding-bottom:.08em;}
.hm-line > span{display:inline-block; animation:hm-line-up 1s var(--ease-out) both;}
.hm-line:nth-child(2) > span{animation-delay:.12s; color:#c9d4dd;}
@keyframes hm-line-up{from{transform:translateY(105%);} to{transform:none;}}
/* Entrada: en pausa hasta que hm-boot.js confirme las fuentes (evita re-maquetar a mitad
   de la animación). will-change sube los elementos a su propia capa: se mueven sin repintar. */
.hm-line > span, .hm-lead, .hm-check, .hm-examples{will-change:transform, opacity;}
.hm-js:not(.hm-ready) .hm-line > span,
.hm-js:not(.hm-ready) .hm-lead,
.hm-js:not(.hm-ready) .hm-check,
.hm-js:not(.hm-ready) .hm-examples{animation-play-state:paused;}

.hm-lead{max-width:50ch; margin:0 0 var(--sp-4); font-size:1.12rem; line-height:1.65; color:var(--muted); animation:hm-fade .9s .35s var(--ease-out) both;}
@keyframes hm-fade{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* verificador */
.hm-check{
  display:flex; align-items:flex-end; gap:.6rem; max-width:680px; padding:.55rem .55rem .55rem 1.1rem;
  border-radius:22px; background:var(--glass); border:1px solid var(--border-strong);
  box-shadow:0 30px 60px -35px rgba(0,0,0,.9);
  transition:border-color .2s ease, box-shadow .2s ease;
  animation:hm-fade .9s .5s var(--ease-out) both;
}
.hm-check:focus-within{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 30px 60px -35px rgba(0,0,0,.9);}
.hm-check-input{
  flex:1; min-width:0; resize:none; border:0; outline:none; background:transparent; color:var(--ink);
  font:inherit; font-size:1rem; line-height:1.5; padding:.6rem 0; max-height:9.5rem;
}
.hm-check-input::placeholder{color:var(--muted-2);}
.hm-check-btn{flex:none; padding:.8rem 1.4rem;}

.hm-examples{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin-top:1rem; font-size:.86rem; color:var(--muted-2); animation:hm-fade .9s .6s var(--ease-out) both;}
.hm-examples-list{display:flex; flex-wrap:wrap; gap:.4rem;}
.hm-example{
  padding:.35rem .8rem; border-radius:999px; cursor:pointer;
  font:500 .84rem var(--font-body); color:var(--muted);
  background:transparent; border:1px solid var(--border-strong);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.hm-example:hover{color:var(--ink); border-color:var(--accent); background:var(--accent-soft);}

/* resultado */
.hm-result{
  --risk:var(--muted-2);
  display:flex; gap:1.1rem; align-items:flex-start; max-width:680px; margin-top:var(--sp-3);
  padding:1.1rem 1.2rem; border-radius:20px; background:var(--glass); border:1px solid var(--glass-line);
  animation:hm-fade .5s var(--ease-out) both;
}
.hm-result[data-risk="high"]{--risk:var(--risk-high);}
.hm-result[data-risk="mid"]{--risk:var(--risk-mid);}
.hm-result[data-risk="low"]{--risk:var(--risk-low);}
.hm-meter{position:relative; flex:none; width:56px; height:56px;}
.hm-meter svg{width:100%; height:100%; transform:rotate(-90deg);}
.hm-meter circle{fill:none; stroke-width:4;}
.hm-meter-track{stroke:var(--border-strong);}
.hm-meter-arc{stroke:var(--risk); stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .9s var(--ease-out), stroke .3s ease;}
.hm-meter span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.95rem; font-variant-numeric:tabular-nums;}
.hm-result-body{flex:1; min-width:0;}
.hm-result-body > strong{display:block; margin:.15rem 0 .5rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:color-mix(in srgb, var(--risk) 70%, #fff);}
.hm-signals{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem;}
.hm-signals li{position:relative; padding-left:1rem; font-size:.9rem; line-height:1.5; color:var(--muted); animation:hm-fade .4s var(--ease-out) both;}
.hm-signals li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--risk);}
.hm-signals b{font-weight:600; color:var(--ink);}
/* el patrón de estafa reconocido va primero y destacado */
.hm-signals .hm-signal-pattern{padding:.55rem .75rem .55rem 1.6rem; margin-bottom:.25rem; border-radius:12px; color:var(--ink); background:color-mix(in srgb, var(--risk) 12%, transparent); border:1px solid color-mix(in srgb, var(--risk) 35%, transparent);}
.hm-signals .hm-signal-pattern::before{left:.7rem; top:1.05em;}
.hm-result-note{margin:.8rem 0 0; font-size:.78rem; color:var(--muted-2); line-height:1.5;}

/* ---------- bloques ---------- */
.hm-block{padding:var(--sp-5) 0;}
.hm .hm-h2{font-weight:700; font-size:clamp(1.7rem, 3vw, 2.3rem); line-height:1.1; letter-spacing:-.02em; margin-bottom:var(--sp-3);}
.hm-panel{
  border-radius:28px; background:var(--glass); border:1px solid var(--glass-line);
}

/* cifras: cuentan desde 0 al aparecer */
.hm-stats{display:grid; grid-template-columns:repeat(4, 1fr);}
.hm-stat{position:relative; padding:var(--sp-4) var(--sp-3); display:flex; flex-direction:column; gap:.5rem;}
.hm-stat + .hm-stat{border-left:1px solid var(--glass-line);}
.hm-stat strong{font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem, 3.2vw, 2.6rem); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;}
.hm-stat > span{font-size:.86rem; color:var(--muted); line-height:1.45; max-width:24ch;}
.hm-stat::after{
  content:""; position:absolute; left:var(--sp-3); right:var(--sp-3); top:-1px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--risk-high));
  transform:scaleX(0); transform-origin:left;
}
.hm-stat.is-counting::after{animation:hm-stat-bar 2.4s var(--ease-out) var(--d, 0s) both;}
@keyframes hm-stat-bar{0%{transform:scaleX(0); opacity:1;} 80%{transform:scaleX(1); opacity:1;} 100%{transform:scaleX(1); opacity:.35;}}
.hm-stat.is-pop strong{animation:hm-stat-pop .5s var(--ease-spring);}
@keyframes hm-stat-pop{50%{transform:scale(1.06); color:#fff; text-shadow:0 0 24px rgba(77,157,255,.45);}}

/* pasos: es una secuencia real, por eso van numerados */
.hm-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3);}
.hm-step{display:flex; gap:1rem; align-items:flex-start;}
.hm-step-n{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:var(--ink); border:1px solid var(--border-strong); background:rgba(10,13,18,.6);
  transition:background .4s ease, border-color .4s ease, color .4s ease;
}
.hm-steps.is-in .hm-step-n{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.hm-steps.is-in .hm-step:nth-child(2) .hm-step-n{transition-delay:.35s;}
.hm-steps.is-in .hm-step:nth-child(3) .hm-step-n{transition-delay:.7s;}
.hm-step h3{font-weight:700; font-size:1.05rem; margin:.45rem 0 .35rem;}
.hm-step p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.55;}

/* Data AI */
.hm-ai{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--sp-5); align-items:center; padding:var(--sp-4);}
.hm-ai-copy p{margin:0 0 var(--sp-3); max-width:46ch; font-size:1rem; line-height:1.65; color:var(--muted);}

.hm-chat{border-radius:20px; overflow:hidden; background:rgba(10,13,18,.7); border:1px solid var(--glass-line);}
.hm-chat-top{display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-bottom:1px solid var(--glass-line); font-family:var(--font-display); font-weight:700; font-size:.92rem;}
.hm-chat-dot{position:relative; width:8px; height:8px; border-radius:50%; background:var(--risk-low);}
.hm-chat-dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--risk-low); animation:hm-ping 2.4s ease-out infinite;}
@keyframes hm-ping{0%{transform:scale(1); opacity:.7;} 70%,100%{transform:scale(3); opacity:0;}}
.hm-chat-replay{
  margin-left:auto; width:30px; height:30px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); background:transparent; color:var(--muted);
  transition:color .2s ease, transform .4s var(--ease-out);
}
.hm-chat-replay svg{width:14px; height:14px;}
.hm-chat-replay:hover{color:var(--ink); transform:rotate(-90deg);}
.hm-chat-body{height:380px; padding:1rem; display:flex; flex-direction:column; gap:.7rem; overflow:hidden;}
.hm-cmsg{max-width:88%; font-size:.88rem; line-height:1.55; animation:hm-fade .45s var(--ease-out) both;}
.hm-cmsg--user{align-self:flex-end; padding:.55rem .85rem; border-radius:16px 16px 5px 16px; background:var(--surface-2); border:1px solid var(--border-strong);}
.hm-cmsg--ai{align-self:flex-start; color:var(--ink);}
.hm-cmsg--ai p{margin:0 0 .4rem;}
.hm-cmsg--ai p:last-child{margin:0;}
.hm-cverdict{
  display:inline-flex; align-items:center; gap:.4rem; margin-bottom:.4rem;
  padding:.18rem .55rem; border-radius:999px; font-weight:600; font-size:.78rem;
  color:#f3c2bb; background:rgba(224,127,114,.16); border:1px solid rgba(224,127,114,.45);
}
.hm-cverdict::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--risk-high);}
.hm-ctyping{display:inline-flex; gap:4px; padding:.5rem .1rem;}
.hm-ctyping i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:hm-typing 1.1s ease-in-out infinite;}
.hm-ctyping i:nth-child(2){animation-delay:.15s;}
.hm-ctyping i:nth-child(3){animation-delay:.3s;}
@keyframes hm-typing{0%,60%,100%{transform:none; opacity:.4;} 30%{transform:translateY(-4px); opacity:1;}}
.hm-cdraft{align-self:stretch; padding:.85rem; border-radius:16px; background:rgba(28,30,34,.7); border:1px solid rgba(77,157,255,.3); animation:hm-fade .5s var(--ease-out) both;}
.hm-cdraft-head{display:flex; align-items:center; gap:.6rem; margin-bottom:.65rem;}
.hm-cdraft-head span{display:block; font-size:.7rem; color:var(--muted);}
.hm-cdraft-head strong{font-family:var(--font-display); font-weight:700; font-size:.92rem;}
.hm-ticon{
  flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:10px;
  color:var(--accent); background:var(--accent-soft); border:1px solid rgba(77,157,255,.22);
}
.hm-ticon svg{width:52%; height:52%;}
.hm-cdraft dl{display:grid; grid-template-columns:1fr 1fr; gap:.35rem .8rem; margin:0 0 .7rem;}
.hm-cdraft dt{font-size:.68rem; color:var(--muted-2);}
.hm-cdraft dd{margin:0; font-size:.8rem;}
.hm-cdraft-btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .85rem; border-radius:999px;
  font-weight:600; font-size:.78rem; color:var(--accent-ink); background:var(--accent);
  transition:transform .15s ease, background .3s ease;
}
.hm-cdraft-btn.is-pressed{transform:scale(.93);}
.hm-cdraft-btn.is-done{background:var(--risk-low); color:#0f1a13;}

/* privacidad: tres líneas, sin tarjetas */
.hm-privacy{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-4);}
.hm-privacy li{padding-top:1rem; border-top:1px solid var(--border-strong);}
.hm-privacy h3{font-weight:700; font-size:1.02rem; margin-bottom:.35rem;}
.hm-privacy p{margin:0; font-size:.9rem; color:var(--muted); line-height:1.55;}

/* cierre */
.hm-final{padding:var(--sp-6) 0 var(--sp-7); text-align:center;}
.hm .hm-final .hm-h2{font-size:clamp(2rem, 4.4vw, 3.2rem); margin-bottom:.8rem;}
.hm-final p{margin:0 auto var(--sp-4); font-size:1.05rem; color:var(--muted);}
.hm-cta{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;}

.hm-footer{background:rgba(10,13,18,.8); border-top-color:var(--glass-line);}
.hm-footer .ds-container{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;}
.hm-footer .ds-brand{margin-right:auto;}
.hm-footer .ds-brand-word{font-size:1.1rem;}
.hm-footer .ds-brand-mark{width:24px; height:24px;}

/* aparición al hacer scroll */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
[data-reveal].is-in{opacity:1; transform:none;}
/* títulos: las palabras suben una a una */
.hm-word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em;}
.hm-word > span{display:inline-block; transform:translateY(110%); transition:transform .8s var(--ease-out); transition-delay:calc(var(--i) * 55ms);}
.is-in .hm-word > span{transform:none;}
[data-split][data-reveal]{opacity:1; transform:none;}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hm-nav-link{padding:.5rem .55rem; font-size:.86rem;}
}
@media (max-width:960px){
  .hm-menu-btn{display:flex;}
  .hm-nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    padding:.6rem var(--sp-3) 1rem; background:rgba(10,13,18,.97); border-bottom:1px solid var(--border);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s var(--ease-out);
  }
  .hm-nav.is-open{transform:none; opacity:1; pointer-events:auto;}
  .hm-nav-link{padding:.85rem .2rem; border-radius:0; font-size:1rem; border-bottom:1px solid var(--border);}
  .hm-nav-link.is-current::after{display:none;}
  .hm-header .ds-container{position:relative;}
  .hm-stats{grid-template-columns:repeat(2, 1fr);}
  .hm-stat:nth-child(3){border-left:0;}
  .hm-stat:nth-child(n+3){border-top:1px solid var(--glass-line);}
  .hm-steps, .hm-privacy{grid-template-columns:1fr; gap:var(--sp-3);}
  .hm-ai{grid-template-columns:1fr; gap:var(--sp-4); padding:var(--sp-3);}
}
@media (max-width:600px){
  .hm-header-actions [data-guest] .ds-btn--ghost{display:none;}
  .hm-hero{min-height:auto; padding-top:var(--sp-4);}
  .hm-check{flex-direction:column; align-items:stretch; padding:.55rem;}
  .hm-check-input{padding:.6rem .55rem;}
  .hm-stat{padding:var(--sp-3) var(--sp-2);}
  .hm-stat::after{left:var(--sp-2); right:var(--sp-2);}
  .hm-chat-body{height:400px;}
  .hm-cta .ds-btn{flex:1;}
}

/* ---------- movimiento reducido: todo aparece en su estado final ---------- */
@media (prefers-reduced-motion:reduce){
  .hm *, .hm *::before, .hm *::after{animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  [data-reveal], .hm-word > span{opacity:1 !important; transform:none !important;}
  .hm-progress{display:none;}
}