/**
 * Estilos exclusivos de index.html (landing "paraguas" de la plataforma):
 * hero fullscreen, diagrama de capas, cards de modelo, tabs de flujo,
 * niveles de identidad, tabla comparativa y roadmap. Lo compartido con las
 * 3 páginas de detalle vive en tokens.css / components.css.
 */

/* ---------- HERO ---------- */
.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-top:120px;
  background:
    radial-gradient(1200px 600px at 78% -5%,rgba(255,176,32,.10),transparent 60%),
    linear-gradient(180deg,var(--steel-950),var(--steel-900));
  border-bottom:1px solid var(--steel-800);
}
.hero h1{
  font-size:clamp(2.6rem,8vw,6.4rem);font-weight:900;line-height:.94;
  letter-spacing:-.035em;max-width:16ch;
}
.hero h1 .hl{color:var(--amber);position:relative}
.hero .lede{
  margin-top:28px;max-width:56ch;font-size:clamp(1.05rem,2vw,1.3rem);
  color:var(--steel-300);font-weight:400;
}
.hero-meta{
  margin-top:44px;display:flex;flex-wrap:wrap;gap:14px;font-family:var(--font-mono);font-size:12px;
}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:1px solid var(--steel-700);border-radius:100px;color:var(--steel-300);
  background:var(--steel-900);
}
.chip .led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.chip.amber .led{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.chip.blue .led{background:var(--blue);box-shadow:0 0 8px var(--blue)}

.scroll-hint{
  position:absolute;bottom:32px;left:clamp(18px,5vw,80px);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--steel-400);
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.scroll-hint .bar{width:1px;height:34px;background:linear-gradient(var(--amber),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{opacity:.2;transform:translateY(-6px)}50%{opacity:1}100%{opacity:.2;transform:translateY(6px)}}

/* ---------- PLATFORM DIAGRAM ---------- */
.platform{background:var(--steel-900);border-top:1px solid var(--steel-800);border-bottom:1px solid var(--steel-800)}
.stack{margin-top:52px;display:grid;gap:2px;border:1px solid var(--steel-700);border-radius:14px;overflow:hidden;background:var(--steel-700)}
.layer{background:var(--steel-900);padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.layer .idx{font-family:var(--font-mono);font-size:13px;color:var(--amber);font-weight:700}
.layer h4{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.layer p{color:var(--steel-400);font-size:.95rem;margin-top:4px}
.layer:nth-child(1){background:linear-gradient(90deg,rgba(255,176,32,.08),var(--steel-900) 40%)}

/* ---------- MODEL CARDS ---------- */
.models-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mcard{
  border:1px solid var(--steel-700);border-radius:16px;overflow:hidden;
  background:var(--steel-900);display:flex;flex-direction:column;
  transition:.22s;position:relative;
}
.mcard:hover{transform:translateY(-4px);border-color:var(--steel-600)}
.mcard .lockhead{
  padding:22px 22px 18px;border-bottom:1px dashed var(--steel-700);
  position:relative;
}
.mcard .lockhead::after{
  content:"";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;border:3px solid var(--steel-600);
}
.mcard .knum{font-family:var(--font-mono);font-size:12px;color:var(--steel-400)}
.mcard h3{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin-top:8px}
.mcard .tag{
  display:inline-block;margin-top:12px;font-family:var(--font-mono);font-size:11px;
  padding:4px 10px;border-radius:5px;letter-spacing:.04em;
}
.mcard.retail .tag{background:rgba(255,176,32,.14);color:var(--amber)}
.mcard.corp .tag{background:rgba(74,163,255,.14);color:var(--blue)}
.mcard.dist .tag{background:rgba(185,140,255,.14);color:var(--violet)}
.mcard.retail{border-top:3px solid var(--amber)}
.mcard.corp{border-top:3px solid var(--blue)}
.mcard.dist{border-top:3px solid var(--violet)}
.mcard .body{padding:22px;flex:1;display:flex;flex-direction:column;gap:18px}
.mrow{display:grid;grid-template-columns:88px 1fr;gap:12px;font-size:.9rem}
.mrow .k{font-family:var(--font-mono);font-size:11px;color:var(--steel-400);text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.mrow .v{color:var(--paper);font-weight:500}
.mrow .v small{display:block;color:var(--steel-400);font-weight:400;margin-top:2px;font-size:.85rem}
.mcard-link{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  font-family:var(--font-narrow);font-weight:700;font-size:14px;
  color:var(--amber);text-decoration:none;padding:0 22px 22px;
}
.mcard-link:hover{text-decoration:underline}

/* ---------- FLOW ---------- */
.flowsec{background:var(--steel-900);border-top:1px solid var(--steel-800)}
.flowtabs{display:flex;gap:8px;margin-top:40px;flex-wrap:wrap}
.ftab{
  font-family:var(--font-narrow);font-weight:700;font-size:14px;
  padding:10px 20px;border-radius:8px;border:1px solid var(--steel-700);
  background:var(--steel-800);color:var(--steel-300);cursor:pointer;transition:.18s;letter-spacing:.02em;
}
.ftab:hover{color:var(--paper)}
.ftab.on.retail{background:var(--amber);color:var(--steel-950);border-color:var(--amber)}
.ftab.on.corp{background:var(--blue);color:var(--steel-950);border-color:var(--blue)}
.ftab.on.dist{background:var(--violet);color:var(--steel-950);border-color:var(--violet)}
.flowpanel{display:none;margin-top:40px}
.flowpanel.on{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;background:var(--steel-700);border:1px solid var(--steel-700);border-radius:12px;overflow:hidden}
.step{background:var(--steel-900);padding:22px 20px;position:relative}
.step .sn{font-family:var(--font-mono);font-size:13px;font-weight:700;margin-bottom:10px}
.retail .sn,.step.r .sn{color:var(--amber)}
.step h5{font-size:1rem;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.step p{font-size:.85rem;color:var(--steel-400)}

/* ---------- IDENTITY / KYC ---------- */
.idsec{border-top:1px solid var(--steel-800)}
.idlevels{margin-top:48px;display:grid;gap:16px}
.idlevel{
  display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;
  border:1px solid var(--steel-700);border-radius:12px;padding:24px 28px;background:var(--steel-900);
}
.idlevel .lv{font-family:var(--font-mono);font-size:26px;font-weight:700;color:var(--steel-600);line-height:1}
.idlevel h4{font-size:1.15rem;font-weight:700}
.idlevel p{color:var(--steel-400);font-size:.92rem;margin-top:5px;max-width:60ch}
.idlevel .badge{font-family:var(--font-mono);font-size:11px;padding:6px 12px;border-radius:6px;white-space:nowrap}
.badge.rec{background:rgba(61,220,132,.14);color:var(--green)}
.badge.opt{background:var(--steel-800);color:var(--steel-300)}
.badge.heavy{background:rgba(255,92,92,.13);color:var(--red)}
.idlevel.reco{border-color:var(--green);background:linear-gradient(90deg,rgba(61,220,132,.06),var(--steel-900) 50%)}

.legal{margin-top:40px;border-left:2px solid var(--amber);padding:20px 24px;background:var(--steel-900);border-radius:0 10px 10px 0}
.legal h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.legal p{color:var(--steel-300);font-size:.95rem}

/* ---------- COMPARISON TABLE ---------- */
.cmpsec{background:var(--steel-900);border-top:1px solid var(--steel-800)}
.tablewrap{margin-top:48px;overflow-x:auto;border:1px solid var(--steel-700);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--steel-800);font-size:.92rem}
thead th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel-400);background:var(--steel-800);position:sticky;top:0;
}
thead th.retail{color:var(--amber)}
thead th.corp{color:var(--blue)}
thead th.dist{color:var(--violet)}
tbody th{font-weight:600;color:var(--steel-300);font-family:var(--font-narrow);width:180px}
td{color:var(--paper)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}
tbody tr:hover td,tbody tr:hover th{background:var(--steel-800)}

/* ---------- STATUS / ROADMAP ---------- */
.roadsec{border-top:1px solid var(--steel-800)}
.road{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.rcard{border:1px solid var(--steel-700);border-radius:12px;padding:26px;background:var(--steel-900)}
.rcard .st{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;margin-bottom:16px}
.rcard .st .led{width:8px;height:8px;border-radius:50%}
.st.done{color:var(--green)}.st.done .led{background:var(--green);box-shadow:0 0 8px var(--green)}
.st.prog{color:var(--amber)}.st.prog .led{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.st.next{color:var(--steel-400)}.st.next .led{background:var(--steel-600)}
.rcard h4{font-size:1.1rem;font-weight:700;margin-bottom:12px}
.rcard ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.rcard li{font-size:.88rem;color:var(--steel-300);padding-left:18px;position:relative}
.rcard li::before{content:"—";position:absolute;left:0;color:var(--steel-600)}

@media(max-width:860px){
  .models-grid{grid-template-columns:1fr}
  .layer{grid-template-columns:1fr;gap:8px}
  .idlevel{grid-template-columns:auto 1fr;gap:16px}
  .idlevel .badge{grid-column:2}
}