/* ═══════════════════════════════════════════════════════════════════
   LUMO · lumo-dark.css
   Piel oscura corporativa (Color Ads) — tokens + componentes
   reutilizables para las páginas públicas y, después, el deck.
   Un solo look: negro casi puro, acento único naranja #F5570F.
   Las páginas guest-facing (kiosco, precheckin, simulador) NO usan
   este archivo: conservan el look crema cálido del producto.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* — color — */
  --lumo-negro:#0D0D0D;          /* fondo base, plano */
  --lumo-carbon:#161513;         /* tarjeta nodo */
  --lumo-carbon-2:#1E1C18;       /* chip / panel elevado dentro de nodo */
  --lumo-borde:#2A2823;          /* borde 1px de tarjetas */
  --lumo-borde-soft:#1F1D19;     /* separadores sutiles */
  --lumo-blanco:#F4EDE4;         /* titulares y texto principal */
  --lumo-gris:#A39B8B;           /* texto secundario (AA sobre negro) */
  --lumo-naranja:#F5570F;        /* EL acento — único color */
  --lumo-naranja-tinta:#FF8B54;  /* hovers y links sobre fondos oscuros */
  --lumo-glow:rgba(245,87,15,.30);
  --lumo-glow-fuerte:rgba(245,87,15,.55);
  --lumo-ok:#58B77E;             /* SOLO para puntitos de estado */
  --lumo-ink-cta:#180C04;        /* texto sobre naranja sólido */

  /* — tipografía — */
  --lumo-sans:-apple-system,"Avenir Next","Segoe UI",system-ui,sans-serif;
  --lumo-mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* — geometría — */
  --lumo-radio:22px;             /* tarjeta nodo */
  --lumo-radio-sm:16px;          /* tarjetas internas */
}

/* ── Base de página oscura (opt-in con .lumo-dark en body) ─────────── */
.lumo-dark{
  margin:0;
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(245,87,15,.04), transparent 70%)
    no-repeat, var(--lumo-negro);
  color:var(--lumo-blanco);
  font-family:var(--lumo-sans);
}
.lumo-dark a{color:var(--lumo-naranja-tinta)}
.lumo-dark a:hover{color:var(--lumo-naranja)}

/* ── Eyebrow — micro-etiqueta mono naranja ─────────────────────────── */
.eyebrow{
  font-family:var(--lumo-mono);
  font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--lumo-naranja);
  margin:0 0 14px;
}

/* ── Titular hero ──────────────────────────────────────────────────── */
.titular-hero{
  font-size:clamp(34px,6vw,56px);
  font-weight:800; letter-spacing:-.03em; line-height:1.08;
  color:var(--lumo-blanco); margin:0 0 12px;
}
.titular-hero .dot{color:var(--lumo-naranja)}

/* ── Tarjeta nodo ──────────────────────────────────────────────────── */
.card-nodo{
  background:var(--lumo-carbon);
  border:1px solid var(--lumo-borde);
  border-radius:var(--lumo-radio);
  padding:26px 28px;
}
.card-nodo .cabeza-nodo{
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  margin:0 0 8px;
}

/* ── Badge de icono circular (anillo degradado + glow) ─────────────── */
.badge-icono{
  width:56px; height:56px; flex:0 0 56px;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid transparent;
  background:
    linear-gradient(160deg,#1C1A16,#131110) padding-box,
    linear-gradient(150deg,var(--lumo-naranja),rgba(245,87,15,.08)) border-box;
  box-shadow:0 0 24px var(--lumo-glow), 0 0 2px var(--lumo-glow-fuerte);
  color:var(--lumo-blanco);
}
.badge-icono svg{width:26px; height:26px; display:block}
.badge-icono .acento{stroke:var(--lumo-naranja)}

/* ── Chip de estado (puntito + label mono 12px) ────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--lumo-carbon-2);
  border:1px solid var(--lumo-borde);
  border-radius:999px; padding:5px 12px;
  font-family:var(--lumo-mono); font-size:12px; letter-spacing:.04em;
  color:var(--lumo-blanco);
}
.chip .punto{
  width:7px; height:7px; border-radius:999px; flex:none;
  background:var(--lumo-gris);
}
.chip.ok .punto{background:var(--lumo-ok); box-shadow:0 0 8px rgba(88,183,126,.6)}
.chip.curso .punto{background:var(--lumo-naranja); box-shadow:0 0 8px var(--lumo-glow-fuerte)}
.chip.pendiente .punto{background:var(--lumo-gris)}

/* ── Conector de circuito (línea naranja con glow) ─────────────────── */
.conector{
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--lumo-naranja) 8%,
    var(--lumo-naranja) 92%, transparent);
  box-shadow:0 0 12px var(--lumo-glow-fuerte);
}
.conector.h{
  width:auto; height:2px;
  background:linear-gradient(90deg, transparent, var(--lumo-naranja) 8%,
    var(--lumo-naranja) 92%, transparent);
}
.conector.punteado{
  background:none; box-shadow:none;
  border-left:2px dashed rgba(245,87,15,.45);
}

/* ── Anotación numerada (01• label + micro-texto) ──────────────────── */
.anotacion{max-width:220px}
.anotacion .num{
  font-family:var(--lumo-mono); font-weight:800; font-size:13px;
  letter-spacing:.08em; color:var(--lumo-naranja);
  text-shadow:0 0 12px var(--lumo-glow-fuerte);
}
.anotacion b{color:var(--lumo-blanco); font-weight:700}
.anotacion small{display:block; color:var(--lumo-gris); font-size:12.5px; line-height:1.5}

/* ── Botones / CTAs ────────────────────────────────────────────────── */
.btn-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--lumo-naranja); color:var(--lumo-ink-cta);
  font-family:var(--lumo-sans); font-weight:800; font-size:15px;
  border:0; border-radius:999px; padding:12px 24px;
  text-decoration:none; cursor:pointer;
}
.btn-pill:hover{
  background:var(--lumo-naranja-tinta); color:var(--lumo-ink-cta);
  box-shadow:0 0 28px var(--lumo-glow);
}
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--lumo-naranja-tinta);
  font-family:var(--lumo-sans); font-weight:700; font-size:15px;
  border:1.5px solid var(--lumo-naranja); border-radius:999px;
  padding:11px 22px; text-decoration:none; cursor:pointer;
}
.btn-ghost:hover{box-shadow:0 0 22px var(--lumo-glow); color:var(--lumo-naranja-tinta)}

/* ── Circuito vertical — lista de pasos como nodos conectados ──────
   Uso: <ol class="circuito"> con un <i class="punto-circuito"
   aria-hidden="true"></i> dentro de cada <li>. Numeración lateral
   01•…NN• automática. Desktop: espina central, nodos alternando
   izquierda/derecha, rama lateral punteada hacia el número.
   Móvil: espina a la izquierda, nodos apilados. ─────────────────── */
ol.circuito{
  counter-reset:nodo;
  list-style:none; margin:0; padding:10px 0;
  position:relative;
  display:grid; gap:26px;
}
ol.circuito::before{ /* espina */
  content:""; position:absolute; top:4px; bottom:4px; left:50%; width:2px;
  transform:translateX(-1px); border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--lumo-naranja) 6%,
    var(--lumo-naranja) 94%, transparent);
  box-shadow:0 0 12px var(--lumo-glow-fuerte);
}
ol.circuito>li{
  counter-increment:nodo;
  position:relative;
  width:calc(50% - 40px);
  background:var(--lumo-carbon-2);
  border:1px solid var(--lumo-borde);
  border-radius:var(--lumo-radio-sm);
  padding:16px 18px;
  color:var(--lumo-gris); font-size:15px; line-height:1.6;
}
ol.circuito>li b{color:var(--lumo-blanco)}
ol.circuito>li:nth-child(odd){margin-right:auto}
ol.circuito>li:nth-child(even){margin-left:auto}
/* punto sobre la espina */
ol.circuito .punto-circuito{
  position:absolute; top:24px; width:10px; height:10px; border-radius:999px;
  background:var(--lumo-naranja);
  box-shadow:0 0 12px var(--lumo-glow-fuerte), 0 0 3px var(--lumo-naranja);
}
ol.circuito>li:nth-child(odd) .punto-circuito{right:-45px}
ol.circuito>li:nth-child(even) .punto-circuito{left:-45px}
/* rama lateral punteada nodo → espina */
ol.circuito>li::after{
  content:""; position:absolute; top:28px; width:36px; height:0;
  border-top:2px dashed rgba(245,87,15,.45);
}
ol.circuito>li:nth-child(odd)::after{right:-38px}
ol.circuito>li:nth-child(even)::after{left:-38px}
/* numeración lateral 01•…NN• al otro lado de la espina */
ol.circuito>li::before{
  content:counter(nodo,decimal-leading-zero) "•";
  position:absolute; top:20px;
  font-family:var(--lumo-mono); font-weight:800; font-size:13px;
  letter-spacing:.1em; color:var(--lumo-naranja);
  text-shadow:0 0 12px var(--lumo-glow-fuerte);
}
ol.circuito>li:nth-child(odd)::before{left:calc(100% + 56px)}
ol.circuito>li:nth-child(even)::before{right:calc(100% + 56px)}

@media (max-width:719px){
  ol.circuito::before{left:14px; transform:none}
  ol.circuito>li{width:auto; margin:0 0 0 44px}
  ol.circuito>li:nth-child(odd),
  ol.circuito>li:nth-child(even){margin-right:0; margin-left:44px}
  ol.circuito .punto-circuito,
  ol.circuito>li:nth-child(odd) .punto-circuito,
  ol.circuito>li:nth-child(even) .punto-circuito{left:-35px; right:auto}
  ol.circuito>li::after,
  ol.circuito>li:nth-child(odd)::after,
  ol.circuito>li:nth-child(even)::after{left:-28px; right:auto; width:24px}
  ol.circuito>li::before,
  ol.circuito>li:nth-child(odd)::before,
  ol.circuito>li:nth-child(even)::before{
    position:static; display:inline-block; margin:0 0 6px;
  }
}

/* ── Nodo encendido — la etapa ACTUAL del circuito (li.aqui) ────────
   Anillo/borde naranja, glow más fuerte y punto sobre la espina
   agrandado con anillo exterior. ─────────────────────────────────── */
ol.circuito>li.aqui{
  border-color:var(--lumo-naranja);
  background:
    linear-gradient(0deg, rgba(245,87,15,.05), rgba(245,87,15,.05)),
    var(--lumo-carbon-2);
  box-shadow:0 0 0 1px rgba(245,87,15,.45), 0 0 36px var(--lumo-glow);
}
ol.circuito>li.aqui .punto-circuito{
  width:14px; height:14px; top:22px;
  box-shadow:0 0 0 4px rgba(245,87,15,.22),
    0 0 22px var(--lumo-glow-fuerte), 0 0 4px var(--lumo-naranja);
}
ol.circuito>li.aqui:nth-child(odd) .punto-circuito{right:-47px}
ol.circuito>li.aqui:nth-child(even) .punto-circuito{left:-47px}
@media (max-width:719px){
  ol.circuito>li.aqui .punto-circuito,
  ol.circuito>li.aqui:nth-child(odd) .punto-circuito,
  ol.circuito>li.aqui:nth-child(even) .punto-circuito{left:-37px; right:auto}
}

/* ── Grid de tarjetas-nodo (tableros de estado, features, módulos) ── */
.grid-nodos{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr));
}

/* ── Chip lleno — naranja sólido, para "estamos aquí" y similares ─── */
.chip.lleno{
  background:var(--lumo-naranja); border-color:var(--lumo-naranja);
  color:var(--lumo-ink-cta); font-weight:800;
  box-shadow:0 0 18px var(--lumo-glow);
}

/* ── Mockup de celular (marco CSS puro) ─────────────────────────────
   El MARCO es del deck oscuro; la PANTALLA la pinta cada página con el
   look crema real del producto (#F4EDDC / #221B11 / #F5570F) — réplicas
   HTML/CSS de las pantallas reales, jamás screenshots.
   Uso: <figure class="fone"><div class="fone-pantalla">…</div></figure> */
.fone{
  width:min(292px, 86vw); margin:0; flex:none;
  border-radius:44px; padding:11px;
  background:linear-gradient(165deg,#2B2822,#141210);
  border:1px solid var(--lumo-borde);
  box-shadow:
    inset 0 0 0 1.5px #3B372F,
    0 26px 60px rgba(0,0,0,.55),
    0 0 46px rgba(245,87,15,.08);
}
.fone-pantalla{
  position:relative; overflow:hidden;
  border-radius:34px; min-height:430px;
  background:#F4EDDC; color:#221B11;
  font-family:var(--lumo-sans);
  text-align:left;
}
.fone-pantalla::before{ /* notch simple */
  content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:84px; height:20px; border-radius:999px; background:#141210; z-index:5;
}