/* ============================================================
   IMSO · FUNNEL — estilos de las páginas del embudo EE
   Reutiliza los tokens del Design System GCE (--gce-*). Se carga junto a
   gce-tokens.css + gce-components.css en las rutas del embudo.
   Novedades respecto al DS: stat tiles, lead-magnet, wizard de diagnóstico,
   página de gracias, "índice" y banda de siguiente paso, estados de formulario.
   ============================================================ */

/* ---- estados de formulario (pueden aparecer fuera de .imso-gce) ---- */
.imso-form-ok{
  background:#e8f5ee;border:1px solid #2C7A52;color:#1c5537;
  padding:16px 18px;border-radius:10px;font:500 15px/1.5 "IBM Plex Sans",system-ui,sans-serif;margin:0 0 12px;
}
.imso-form-err{
  background:#fdeceb;border:1px solid #B23A2C;color:#8f2c22;
  padding:10px 14px;border-radius:8px;font:500 14px/1.45 "IBM Plex Sans",system-ui,sans-serif;margin:0 0 12px;
}

/* ============================================================
   Todo lo demás va scoped bajo .imso-gce (aplica el DS).
   ============================================================ */

/* ---- índice / tabla de contenidos ---- */
.imso-gce .imso-toc{
  background:var(--gce-panel);border:1px solid var(--gce-line);border-radius:var(--gce-r-2);
  padding:var(--gce-sp-4) var(--gce-sp-5);margin:0 0 var(--gce-sp-6);
}
.imso-gce .imso-toc__t{font:600 var(--gce-fs-sm)/1 var(--gce-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gce-faint);margin:0 0 var(--gce-sp-3)}
.imso-gce .imso-toc ol{margin:0;padding-left:1.2em;display:grid;gap:6px}
.imso-gce .imso-toc a{color:var(--gce-ink-2)}

/* ---- meta de lectura (tiempo, actualizado, autor) ---- */
.imso-gce .imso-readmeta{display:flex;flex-wrap:wrap;gap:var(--gce-sp-4);align-items:center;
  font-size:var(--gce-fs-sm);color:var(--gce-muted);margin:var(--gce-sp-3) 0 var(--gce-sp-5)}
.imso-gce .imso-readmeta span{display:inline-flex;gap:6px;align-items:center}

/* ---- stat tiles (estadísticas: 15% ahorro, 18 meses payback…) ---- */
.imso-gce .imso-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gce-sp-4);margin:var(--gce-sp-5) 0}
.imso-gce .imso-stat{background:var(--gce-paper);border:1px solid var(--gce-line);border-radius:var(--gce-r-2);
  padding:var(--gce-sp-5) var(--gce-sp-4);box-shadow:var(--gce-sh-1);text-align:left}
.imso-gce .imso-stat__v{font:700 clamp(1.7rem,3.4vw,2.4rem)/1 var(--gce-sans);color:var(--gce-amber-deep);font-variant-numeric:tabular-nums}
.imso-gce .imso-stat__k{font-size:var(--gce-fs-sm);color:var(--gce-muted);margin-top:6px}

/* ---- lead magnet (contenido abierto → formulario → descarga) ---- */
.imso-gce .imso-magnet{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gce-sp-6);align-items:start;
  background:var(--gce-navy);color:#fff;border-radius:var(--gce-r-3);padding:var(--gce-sp-7);margin:var(--gce-sp-6) 0;
  box-shadow:var(--gce-sh-2);position:relative;overflow:hidden}
.imso-gce .imso-magnet__in h2,.imso-gce .imso-magnet__in h3{color:#fff}
.imso-gce .imso-magnet__lede{color:#c9d4e4;font-size:var(--gce-fs-md);margin:.5rem 0 1rem}
.imso-gce .imso-magnet__list{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:8px}
.imso-gce .imso-magnet__list li{padding-left:1.7em;position:relative;color:#dbe4f0;font-size:var(--gce-fs-sm)}
.imso-gce .imso-magnet__list li::before{content:"✓";position:absolute;left:0;color:var(--gce-amber);font-weight:700}
.imso-gce .imso-magnet__form{background:var(--gce-paper);color:var(--gce-ink);border-radius:var(--gce-r-2);padding:var(--gce-sp-5);box-shadow:var(--gce-sh-2)}
.imso-gce .imso-magnet__form h3{font-size:var(--gce-fs-lg);margin:0 0 .3rem}
.imso-gce .imso-magnet__form p.sub{color:var(--gce-muted);font-size:var(--gce-fs-sm);margin:0 0 var(--gce-sp-4)}
@media (max-width:860px){.imso-gce .imso-magnet{grid-template-columns:1fr;padding:var(--gce-sp-5)}}

/* ---- formularios del embudo (campos) ---- */
.imso-gce .imso-ff{display:grid;gap:var(--gce-sp-3)}
.imso-gce .imso-ff .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gce-sp-3)}
@media (max-width:520px){.imso-gce .imso-ff .row2{grid-template-columns:1fr}}
.imso-gce .imso-ff label{display:block;font-size:var(--gce-fs-sm);font-weight:600;margin-bottom:4px;color:var(--gce-ink-2)}
.imso-gce .imso-ff label .req{color:var(--gce-crit)}
.imso-gce .imso-ff input,.imso-gce .imso-ff select,.imso-gce .imso-ff textarea{
  width:100%;padding:11px 12px;border:1px solid var(--gce-line);border-radius:var(--gce-r-1);
  font:inherit;font-size:var(--gce-fs-sm);background:var(--gce-paper);color:var(--gce-ink)}
.imso-gce .imso-ff input:focus,.imso-gce .imso-ff select:focus,.imso-gce .imso-ff textarea:focus{
  outline:none;border-color:var(--gce-amber);box-shadow:0 0 0 3px rgba(232,163,61,.2)}
.imso-gce .imso-ff__note{font-size:var(--gce-fs-xs);color:var(--gce-faint);margin:2px 0 0}

/* ---- banda "siguiente paso recomendado" (nunca callejón sin salida) ---- */
.imso-gce .imso-next{border:1px dashed var(--gce-amber-deep);background:var(--gce-amber-tint);
  border-radius:var(--gce-r-2);padding:var(--gce-sp-5);margin:var(--gce-sp-6) 0;display:flex;gap:var(--gce-sp-4);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.imso-gce .imso-next__t{font-weight:700;font-size:var(--gce-fs-md)}
.imso-gce .imso-next__d{color:var(--gce-ink-2);font-size:var(--gce-fs-sm);margin-top:2px}
:root[data-theme="dark"] .imso-gce .imso-next{background:var(--gce-panel)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .imso-gce .imso-next{background:var(--gce-panel)}}

/* ---- HUB: bloque de canales / rutas de contenido ---- */
.imso-gce .imso-routes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--gce-sp-4);margin:var(--gce-sp-5) 0}
.imso-gce .imso-route{display:block;background:var(--gce-paper);border:1px solid var(--gce-line);border-left:4px solid var(--gce-amber);
  border-radius:var(--gce-r-2);padding:var(--gce-sp-5);box-shadow:var(--gce-sh-1);transition:transform var(--gce-t),box-shadow var(--gce-t)}
.imso-gce a.imso-route:hover{transform:translateY(-2px);box-shadow:var(--gce-sh-2);text-decoration:none}
.imso-gce .imso-route__k{font:600 var(--gce-fs-xs)/1 var(--gce-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gce-amber-deep)}
.imso-gce .imso-route__t{font-weight:700;font-size:var(--gce-fs-md);margin:6px 0 4px;color:var(--gce-ink)}
.imso-gce .imso-route__d{font-size:var(--gce-fs-sm);color:var(--gce-muted)}

/* ============================================================
   AUTODIAGNÓSTICO — wizard
   ============================================================ */
.imso-gce .imso-wiz{background:var(--gce-paper);border:1px solid var(--gce-line);border-radius:var(--gce-r-3);
  box-shadow:var(--gce-sh-2);padding:var(--gce-sp-7);margin:var(--gce-sp-6) 0;max-width:760px}
.imso-gce .imso-wiz__bar{height:6px;background:var(--gce-sunken);border-radius:100px;overflow:hidden;margin-bottom:var(--gce-sp-5)}
.imso-gce .imso-wiz__barfill{height:100%;width:0;background:var(--gce-amber);transition:width var(--gce-t)}
.imso-gce .imso-wiz__step{display:none}
.imso-gce .imso-wiz__step.is-active{display:block;animation:imsoFade .25s ease}
@keyframes imsoFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.imso-gce .imso-wiz__count{font:600 var(--gce-fs-xs)/1 var(--gce-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gce-faint);margin-bottom:8px}
.imso-gce .imso-wiz__q{font-size:var(--gce-fs-lg);font-weight:700;margin:0 0 var(--gce-sp-4)}
.imso-gce .imso-wiz__opts{display:grid;gap:10px}
.imso-gce .imso-wiz__opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid var(--gce-line);
  border-radius:var(--gce-r-2);cursor:pointer;transition:border-color var(--gce-t),background var(--gce-t);background:var(--gce-panel)}
.imso-gce .imso-wiz__opt:hover{border-color:var(--gce-amber)}
.imso-gce .imso-wiz__opt input{margin-top:3px;accent-color:var(--gce-amber-deep)}
.imso-gce .imso-wiz__opt.is-sel{border-color:var(--gce-amber-deep);background:var(--gce-amber-tint)}
:root[data-theme="dark"] .imso-gce .imso-wiz__opt.is-sel{background:var(--gce-panel)}
.imso-gce .imso-wiz__nav{display:flex;justify-content:space-between;gap:var(--gce-sp-3);margin-top:var(--gce-sp-5)}
.imso-gce .imso-wiz__hint{font-size:var(--gce-fs-xs);color:var(--gce-faint);margin-top:var(--gce-sp-4);text-align:center}

/* resultado del diagnóstico */
.imso-gce .imso-result{background:var(--gce-paper);border:1px solid var(--gce-line);border-radius:var(--gce-r-3);
  box-shadow:var(--gce-sh-2);padding:var(--gce-sp-7);margin:var(--gce-sp-6) 0;max-width:820px}
.imso-gce .imso-result__gauge{display:flex;gap:8px;margin:var(--gce-sp-4) 0}
.imso-gce .imso-result__seg{flex:1;height:12px;border-radius:100px;background:var(--gce-sunken)}
.imso-gce .imso-result__seg.on{background:var(--gce-amber)}
.imso-gce .imso-result__lvl{font:700 var(--gce-fs-xl)/1.1 var(--gce-sans);color:var(--gce-ink)}
.imso-gce .imso-result__lvl small{display:block;font:600 var(--gce-fs-sm)/1 var(--gce-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--gce-amber-deep);margin-bottom:6px}
.imso-gce .imso-result__recs{list-style:none;margin:var(--gce-sp-4) 0;padding:0;display:grid;gap:10px}
.imso-gce .imso-result__recs li{padding-left:1.7em;position:relative;color:var(--gce-ink-2)}
.imso-gce .imso-result__recs li::before{content:"→";position:absolute;left:0;color:var(--gce-amber-deep);font-weight:700}

/* ============================================================
   GRACIAS
   ============================================================ */
.imso-gce .imso-ty{max-width:640px;margin:var(--gce-sp-8) auto;text-align:center}
.imso-gce .imso-ty__ic{width:72px;height:72px;border-radius:50%;background:var(--gce-amber-tint);color:var(--gce-amber-deep);
  display:grid;place-items:center;font-size:34px;margin:0 auto var(--gce-sp-5)}
.imso-gce .imso-ty h1{font-size:var(--gce-fs-2xl);margin-bottom:var(--gce-sp-3)}
.imso-gce .imso-ty p{color:var(--gce-muted);font-size:var(--gce-fs-md)}
.imso-gce .imso-ty__acts{display:flex;gap:var(--gce-sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--gce-sp-5)}

/* lede de las páginas del embudo (el contenedor lo aporta el DS: .gce-container) */
.imso-gce .imso-lead{font-size:var(--gce-fs-md);color:var(--gce-ink-2);max-width:var(--gce-readw)}