/* =====================================================================
   Oficium — superficie pública (landing "oscuro y sobrio").
   TODO va aislado bajo `body.pub`; se enlaza solo si `publica:true` (head.ejs).
   No tocar app.css: esta hoja carga después y gana por especificidad de `.pub`.
   ===================================================================== */

/* ---------- Tipografía auto-alojada (Geist / Geist Mono, OFL) ---------- */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (deriva TODO de aquí; §4) ---------- */
.pub {
  /* Oscuro — solo el hero */
  --pub-noche:        #0F1822;
  --pub-noche-panel:  #15202C;
  --pub-noche-2:      #1A2632;
  --pub-linea-osc:    #26333F;
  --pub-linea-osc-2:  #2A3947;
  --pub-borde-ghost:  #35485A;
  --pub-claro:        #EAF1F6;
  --pub-suave:        #A7B8C5;
  --pub-mute:         #8CA0AE;
  --pub-acento:       #3E92CE;
  --pub-acento-luz:   #5FB0E6;
  --pub-chat-tec-bg:  #0F2430; --pub-chat-tec-bd: #23414C; --pub-chat-tec-tx: #CBE7F5;
  --pub-chat-of-bg:   #1A2632; --pub-chat-of-bd:  #2A3947; --pub-chat-of-tx:  #A7B8C5;
  --pub-ok-osc-tx:    #6FD3A6; --pub-ok-osc-bg:   #14322A;

  /* Claro — resto de la página */
  --pub-papel:        #F5F7F9;
  --pub-superficie:   #FFFFFF;
  --pub-tinta:        #16232E;
  --pub-tinta-suave:  #5B6B7B;
  --pub-linea:        #DDE4EA;
  --pub-marca:        #1B5E8A;
  --pub-marca-osc:    #14486A;

  /* Fuentes y varios */
  --pub-sans: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pub-mono: 'Geist Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pub-nav-h: 60px;
  --pub-sombra: 0 1px 3px rgba(16, 35, 46, .05), 0 10px 30px rgba(16, 35, 46, .05);
}

/* ---------- Base ---------- */
body.pub {
  background: var(--pub-papel);
  color: var(--pub-tinta);
  font-family: var(--pub-sans);
  /* `clip` (no `hidden`) contiene el hero a sangre (100vw) SIN crear un contenedor
     de scroll: así `position:sticky` de la nav sigue anclando al viewport. */
  overflow-x: clip;
}
.pub .container { max-width: 1000px; }
.pub ::selection { background: rgba(62, 146, 206, .22); }

/* Salto suave de anclas + colchón bajo la nav sticky (JS activa el smooth) */
html.pub-smooth { scroll-behavior: smooth; }
.pub #como, .pub #que-hace { scroll-margin-top: calc(var(--pub-nav-h) + 12px); }

/* Foco de teclado visible (§7) */
.pub a:focus-visible,
.pub button:focus-visible { outline: 2px solid var(--pub-marca); outline-offset: 3px; border-radius: 4px; }
/* sobre oscuro: hero y nav transparente */
.pub .publico-hero-band a:focus-visible,
.pub .publico-nav:not(.is-scrolled) a:focus-visible { outline-color: var(--pub-acento-luz); }

/* ---------- Botones de la landing ---------- */
.pub .pub-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pub-sans); font-weight: 500; font-size: 14.5px; line-height: 1;
  padding: 12px 20px; border-radius: 9px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .pub .pub-btn { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
  .pub .pub-btn:active { transform: translateY(1px); }
}
.pub .pub-btn-acento { background: var(--pub-acento); color: #08131C; }
.pub .pub-btn-acento:hover { background: var(--pub-acento-luz); }
.pub .pub-btn-ghost { background: transparent; color: var(--pub-claro); border-color: var(--pub-borde-ghost); }
.pub .pub-btn-ghost:hover { border-color: var(--pub-acento-luz); color: var(--pub-acento-luz); }
.pub .pub-btn-marca { background: var(--pub-marca); color: #fff; }
.pub .pub-btn-marca:hover { background: var(--pub-marca-osc); }
.pub .pub-btn-linea { background: var(--pub-superficie); color: var(--pub-tinta); border-color: var(--pub-linea); }
.pub .pub-btn-linea:hover { border-color: var(--pub-marca); color: var(--pub-marca); }
.pub .pub-btn-nav { background: var(--pub-acento); color: #08131C; padding: 8px 15px; font-size: 13.5px; border-radius: 8px; }
.pub .publico-nav.is-scrolled .pub-btn-nav { background: var(--pub-marca); color: #fff; }

/* =====================================================================
   Nav sticky a sangre (§6.2)
   ===================================================================== */
.pub .publico-nav {
  position: sticky; top: 0; z-index: 20;
  margin-top: -28px;                     /* cancela el padding-top de .container */
  width: 100vw;
  margin-left: calc(50% - 50vw);         /* a sangre solo con márgenes: no toca left/right, así sticky funciona */
  margin-right: calc(50% - 50vw);
  border-bottom: 1px solid transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .pub .publico-nav { transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
}
.pub .publico-nav.is-scrolled {
  background: var(--pub-superficie);
  border-bottom-color: var(--pub-linea);
  box-shadow: 0 6px 20px rgba(16, 35, 46, .06);
}
.pub .publico-nav-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  height: var(--pub-nav-h);
  display: flex; align-items: center; gap: 20px;
}
.pub .publico-nav-logo {
  flex: 0 0 auto;
  font-family: var(--pub-sans); font-weight: 600; font-size: 20px; letter-spacing: -.01em;
  color: var(--pub-claro); text-decoration: none;
}
.pub .publico-nav.is-scrolled .publico-nav-logo { color: var(--pub-tinta); }
.pub .publico-nav-anclas { flex: 1 1 auto; display: flex; justify-content: center; gap: 24px; }
.pub .publico-nav-anclas a {
  position: relative; padding: 6px 2px;
  font-size: 14px; text-decoration: none; color: var(--pub-mute);
}
.pub .publico-nav-anclas a:hover { color: var(--pub-claro); }
.pub .publico-nav-anclas a.activo { color: var(--pub-claro); }
.pub .publico-nav.is-scrolled .publico-nav-anclas a { color: var(--pub-tinta-suave); }
.pub .publico-nav.is-scrolled .publico-nav-anclas a:hover { color: var(--pub-tinta); }
.pub .publico-nav.is-scrolled .publico-nav-anclas a.activo { color: var(--pub-marca); }
.pub .publico-nav-anclas a.activo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: currentColor; border-radius: 2px;
}
.pub .publico-nav-acciones { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.pub .publico-nav-entrar { font-size: 14px; text-decoration: none; color: var(--pub-suave); }
.pub .publico-nav-entrar:hover { color: var(--pub-claro); }
.pub .publico-nav.is-scrolled .publico-nav-entrar { color: var(--pub-tinta-suave); }
.pub .publico-nav.is-scrolled .publico-nav-entrar:hover { color: var(--pub-tinta); }

/* =====================================================================
   Hero OSCURO a sangre (§6.3)
   ===================================================================== */
.pub .publico-hero-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: calc(-1 * var(--pub-nav-h)); /* sube bajo la nav transparente */
  background: var(--pub-noche);
  color: var(--pub-claro);
}
.pub .publico-hero-inner {
  max-width: 1080px; margin: 0 auto;
  padding: calc(var(--pub-nav-h) + 28px) 24px 60px; /* deja hueco a la nav */
}
.pub .publico-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 44px; align-items: center;
}
.pub .publico-eyebrow {
  font-family: var(--pub-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pub-mute); margin: 0 0 18px;
}
.pub .publico-hero-titular {
  font-family: var(--pub-sans); font-weight: 700;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.08; letter-spacing: -.025em;
  color: var(--pub-claro); margin: 0 0 20px;
}
.pub .publico-acento { color: var(--pub-acento-luz); }
.pub .publico-subcopy {
  font-family: var(--pub-sans); font-weight: 400;
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6;
  color: var(--pub-suave); margin: 0 0 28px; max-width: 46ch;
}
.pub .publico-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.pub .publico-capacidades {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 30px 0 0; padding: 0;
}
.pub .publico-capacidades li {
  font-family: var(--pub-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pub-mute);
}
.pub .publico-nota { font-size: 13px; color: var(--pub-mute); margin: 16px 0 0; }

.pub .publico-hero-imagen { min-width: 0; }
.pub .publico-ilustracion { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .pub .publico-ilustracion { filter: drop-shadow(0 26px 60px rgba(0, 0, 0, .45)); }
}

/* =====================================================================
   Cómo funciona (CLARO · stepper fijado; §6.4)
   Base = apilado (sin JS / móvil / reduced-motion): ilustración inline.
   ===================================================================== */
.pub .publico-como { padding: 74px 0; }
.pub .publico-eyebrow-claro { color: var(--pub-tinta-suave); margin-bottom: 10px; }
.pub .publico-h2 {
  font-family: var(--pub-sans); font-weight: 600;
  font-size: clamp(21px, 2.5vw, 28px); line-height: 1.2; letter-spacing: -.02em;
  color: var(--pub-tinta); margin: 0 0 30px;
}
.pub .publico-como-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pub .publico-pasos { list-style: none; margin: 0; padding: 0; }
.pub .publico-paso { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 24px 0; }
.pub .publico-paso + .publico-paso { border-top: 1px solid var(--pub-linea); }
.pub .publico-paso-num { font-family: var(--pub-mono); font-size: 13px; color: var(--pub-tinta-suave); padding-top: 2px; }
.pub .publico-paso-cuerpo h3 { font-family: var(--pub-sans); font-weight: 600; font-size: 17px; color: var(--pub-tinta); margin: 0 0 6px; }
.pub .publico-paso-cuerpo p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--pub-tinta-suave); }
.pub .publico-paso-ilus { display: block; margin-top: 16px; max-width: 380px; }
.pub .publico-como-panel { display: none; }

.pub .publico-como-panel-caja {
  position: relative; background: var(--pub-superficie); border: 1px solid var(--pub-linea);
  border-radius: 14px; padding: 26px; min-height: 244px; box-shadow: var(--pub-sombra);
}
.pub .publico-como-panel .publico-como-ilus { position: absolute; inset: 26px; opacity: 0; }
.pub .publico-como-panel .publico-como-ilus.activo { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pub .publico-como-panel .publico-como-ilus { transition: opacity .3s ease-out; }
}

/* Stepper real: solo con JS animado y en escritorio */
@media (min-width: 860px) {
  .pub.js-anim .publico-como-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .pub.js-anim .publico-paso-ilus { display: none; }
  .pub.js-anim .publico-como-panel { display: block; position: sticky; top: calc(var(--pub-nav-h) + 24px); }
  .pub.js-anim .publico-paso-cuerpo { border-left: 2px solid var(--pub-linea); padding-left: 18px; }
  .pub.js-anim .publico-paso h3 { color: var(--pub-tinta-suave); }
  .pub.js-anim .publico-paso p { color: #93A1AC; }
  .pub.js-anim .publico-paso-num { color: #93A1AC; }
  .pub.js-anim .publico-paso.activo .publico-paso-cuerpo { border-left-color: var(--pub-marca); }
  .pub.js-anim .publico-paso.activo h3 { color: var(--pub-tinta); }
  .pub.js-anim .publico-paso.activo p { color: var(--pub-tinta-suave); }
  .pub.js-anim .publico-paso.activo .publico-paso-num { color: var(--pub-marca); }
  @media (prefers-reduced-motion: no-preference) {
    .pub.js-anim .publico-paso-cuerpo,
    .pub.js-anim .publico-paso h3,
    .pub.js-anim .publico-paso p,
    .pub.js-anim .publico-paso-num { transition: color .3s ease, border-color .3s ease; }
  }
}

/* Ilustraciones claras de los pasos (comunes a inline y panel) */
.pub .ci { font-family: var(--pub-sans); text-align: left; color: var(--pub-tinta); }
.pub .ci-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--pub-tinta-suave); margin-bottom: 12px; }
.pub .ci-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--pub-marca); display: inline-block; }
.pub .ci-num { font-family: var(--pub-mono); color: var(--pub-marca); font-weight: 600; }
.pub .ci-burbuja { border-radius: 12px; padding: 11px 13px; font-size: 13px; line-height: 1.45; max-width: 92%; }
.pub .ci-burbuja-tec { background: #E8F3FB; border: 1px solid #D4E6F3; color: var(--pub-tinta); border-bottom-left-radius: 4px; }
.pub .ci-pie-input { margin-top: 14px; font-size: 12px; color: var(--pub-tinta-suave); border: 1px solid var(--pub-linea); border-radius: 16px; padding: 8px 13px; background: var(--pub-papel); }
.pub .ci-campos, .pub .ci-doclista { list-style: none; margin: 6px 0 0; padding: 0; }
.pub .ci-campos li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 9px 0; border-top: 1px solid var(--pub-linea); }
.pub .ci-campos li span { color: var(--pub-tinta-suave); }
.pub .ci-campos li b { color: var(--pub-tinta); font-weight: 600; }
.pub .ci-campos .ci-nuevo { background: rgba(27, 94, 138, .06); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; border-top-color: transparent; }
.pub .ci-campos .ci-nuevo b em { font-style: normal; font-family: var(--pub-mono); font-size: 11px; color: var(--pub-marca); }
.pub .ci-doclista li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--pub-linea); font-size: 13.5px; color: var(--pub-tinta); }
.pub .ci-doclista li:first-child { border-top: 0; }
.pub .ci-campos li:first-child { border-top: 0; }
.pub .ci-chip { font-family: var(--pub-mono); font-size: 11px; color: var(--pub-marca); border: 1px solid var(--pub-linea); border-radius: 6px; padding: 2px 8px; background: var(--pub-papel); }

/* =====================================================================
   Qué resuelve (CLARO · bento; §6.5)
   ===================================================================== */
.pub .publico-que-hace { padding: 20px 0 74px; }
.pub .publico-lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 26px 34px; margin: 0; padding: 0;
}
.pub .publico-lista > div { min-width: 0; }
.pub .publico-tarjeta {
  background: var(--pub-superficie); border: 1px solid var(--pub-linea);
  border-radius: 12px; padding: 22px 22px 24px;
}
.pub .publico-tarjeta dt { font-family: var(--pub-sans); font-weight: 600; font-size: 15.5px; color: var(--pub-tinta); margin-bottom: 8px; }
.pub .publico-tarjeta dd { margin: 0; font-family: var(--pub-sans); font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--pub-tinta-suave); }
.pub .publico-tarjeta-destacada { border-color: var(--pub-marca); box-shadow: inset 0 0 0 1px var(--pub-marca); }

/* =====================================================================
   Cierre (CLARO; §6.6)
   ===================================================================== */
.pub .publico-cierre { padding: 60px 0 8px; border-top: 1px solid var(--pub-linea); text-align: center; }
.pub .publico-cierre .publico-h2 { margin-bottom: 14px; }
.pub .publico-cierre p { color: var(--pub-tinta-suave); max-width: 60ch; margin: 0 auto 24px; font-size: 15.5px; line-height: 1.6; }
.pub .publico-cierre .publico-cta { justify-content: center; }

/* =====================================================================
   Páginas legales + pie (coherencia clara; §6.7)
   ===================================================================== */
.pub .legal {
  background: var(--pub-superficie); border: 1px solid var(--pub-linea); border-radius: 14px;
  padding: 36px 40px; max-width: 760px; margin: 14px auto 44px; box-shadow: var(--pub-sombra);
}
.pub .legal h1 { font-family: var(--pub-sans); font-weight: 700; color: var(--pub-tinta); letter-spacing: -.02em; }
.pub .legal h2 { font-family: var(--pub-sans); font-weight: 600; color: var(--pub-tinta); }
.pub .legal p, .pub .legal li { color: var(--pub-tinta-suave); }
.pub .legal strong { color: var(--pub-tinta); }
.pub .legal a { color: var(--pub-marca); }
.pub .legal-entrada { color: var(--pub-tinta-suave); }
.pub .legal-datos dt { color: var(--pub-tinta); }
.pub .legal-datos dd { color: var(--pub-tinta-suave); }
.pub .legal-fecha { color: var(--pub-tinta-suave); }
.pub .legal-tabla th, .pub .legal-tabla td { border-color: var(--pub-linea); }
.pub .legal-tabla th { background: var(--pub-papel); color: var(--pub-tinta); }
.pub .legal code { font-family: var(--pub-mono); color: var(--pub-tinta); }

.pub .page-footer { background: var(--pub-papel); color: var(--pub-tinta-suave); border-top: 1px solid var(--pub-linea); }
.pub .pie-legal a, .pub .page-footer a { color: var(--pub-marca); }
.pub .pie-titular { color: var(--pub-tinta-suave); }

/* =====================================================================
   Mockup del hero — estado final por defecto; loop solo con JS (§10.4)
   ===================================================================== */
.pub .mk-typing { opacity: 0; } /* transitorio: nunca en estado final */
@media (prefers-reduced-motion: no-preference) {
  .pub.js-anim .mk-loop .mk-anim { opacity: 0; transition: opacity .4s ease-out; }
  .pub.js-anim .mk-loop .mk-anim.mostrar { opacity: 1; }
  .pub.js-anim .mk-loop .mk-typing { transition: opacity .22s ease-out; }
  .pub.js-anim .mk-loop .mk-typing.mostrar { opacity: 1; }
}

/* =====================================================================
   Revelados al entrar en viewport (§10.2) — visible por defecto sin JS
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pub.js-anim .pub-reveal { opacity: 0; transform: translateY(14px); transition: opacity .42s ease-out, transform .42s ease-out; }
  .pub.js-anim .pub-reveal.is-visible { opacity: 1; transform: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 860px) {
  .pub .publico-hero { grid-template-columns: 1fr; gap: 30px; }
  .pub .publico-hero-imagen { order: 2; }
  .pub .publico-hero-texto { order: 1; }
  .pub .publico-hero-inner { padding-bottom: 44px; }
}
@media (max-width: 720px) {
  .pub .publico-nav-anclas { display: none; }               /* dos anclas: no hace falta menú */
  .pub .publico-como { padding: 52px 0; }
  .pub .publico-que-hace { padding: 12px 0 52px; }
}
@media (max-width: 480px) {
  .pub .publico-nav-entrar { display: none; }               /* deja wordmark + Crear cuenta */
  .pub .publico-nav-inner { gap: 12px; }
  .pub .publico-cta .pub-btn { flex: 1 1 auto; justify-content: center; }
  .pub .legal { padding: 24px 20px; border-radius: 0; margin-left: -14px; margin-right: -14px; }
}