/* ============================================================
   VETRO V2 — Figma-first experience
   Design tokens extraídos del Figma target (2026-08-16):
   cane-waffle-25583301.figma.site
   V2 SLICE 01 — screens 01-03 + AUTO conversacional
   ============================================================ */

:root {
  /* Canvas */
  --bg:        #0a0b0f;
  --bg-2:      #101219;
  --panel:     rgba(16, 18, 25, .72);
  --fg:        oklch(97% .004 260);
  --muted:     oklch(68% .012 260);
  --border:    rgba(255, 255, 255, .08);
  --border-2:  rgba(255, 255, 255, .18);
  --card:      rgba(255, 255, 255, .04);

  /* Vera semantic palette */
  --aurora:        #7fe3c4;
  --aurora-ink:    #06231c;
  --aurora-dim:    rgba(127, 227, 196, .15);
  --pulse:         #8fb4ff;
  --pulse-dim:     rgba(143, 180, 255, .15);
  --insight:       #c9a4ff;
  --insight-dim:   rgba(201, 164, 255, .15);
  --attention:     #ffb27a;
  --attention-ink: #2a1607;
  --attention-dim: rgba(255, 178, 122, .15);

  /* Type */
  --f-display: "Fraunces", ui-serif, Georgia, serif;
  --f-sans:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --f-mono:    "DM Mono", ui-monospace, monospace;

  --radius:      .625rem;
  --radius-pill: 9999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--aurora); }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--aurora);
  outline-offset: 2px;
}

/* ── Header ─────────────────────────────────────────────── */
.v2-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  /* El header no debe bloquear clicks en el mapa orbital que quede
     debajo de su franja vacía central — solo sus hijos son clicables. */
  pointer-events: none;
}
.v2-header > * { pointer-events: auto; }

.v2-logo {
  font-family: var(--f-mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .35em;
  color: var(--fg);
}

.v2-header-right { display: flex; align-items: center; gap: 1.35rem; }

/* Acceso de cliente existente — mismo lenguaje tipográfico micro-label
   que .v2-logo (mono, uppercase, letter-spacing), no una barra de nav
   legacy. Ver CUSTOMER-ROOT-CUTOVER-GATE-2026-08-20.md P1-B. */
.v2-account { display: flex; align-items: center; gap: 1.1rem; }
.v2-account-link {
  font-family: var(--f-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.v2-account-link--btn { font-family: var(--f-mono); }
.v2-account-link:hover,
.v2-account-link:focus-visible { color: var(--fg); }

.v2-progress { display: flex; gap: .45rem; align-items: center; }

.v2-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  transition: all .3s ease;
}
.v2-dot--active {
  width: 18px;
  border-radius: 3px;
  background: var(--pulse);
}

/* ── Stage: split layout ────────────────────────────────── */
.v2-stage {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  min-height: 100dvh;
}

/* ── Canvas (izquierda) ─────────────────────────────────── */
.v2-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(143, 180, 255, .06), transparent 65%),
    var(--bg);
  overflow: hidden;
  min-height: 100dvh;
  /* Deja despejada la franja del header fijo Y el legend del mapa
     (.v2-map-caption, UX ACCEPTANCE FAILURE 2026-08-26) — el nodo AUTO (top
     del mapa orbital) no debe quedar recortado ni tapado por ninguno de
     los dos. */
  padding-top: 6.5rem;
}

/* Legend permanente del mapa — responde qué es, por qué importa, qué
   relación tiene con el orb (ver comentario en index.html). Ancla al
   borde SUPERIOR de .v2-canvas, simétrico a .v2-orb-hint (borde inferior),
   mismo patrón: hermano de .v2-map, no hijo, para no competir por
   espacio con el nodo AUTO. */
.v2-map-caption {
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(86%, 380px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.v2-map-caption-eyebrow {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aurora);
}
.v2-map-caption-sub {
  font-size: .74rem;
  line-height: 1.45;
  color: var(--muted);
}

.v2-map {
  position: relative;
  width: min(78vmin, 560px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Orb de Vera ────────────────────────────────────────── */
/* HOME/VERA EXPERIENCE EVOLUTION -- MOMENTO 1 (2026-08-26, CEO): "Vera debe
   ser protagonista... debe sentirse como una inteligencia artificial
   sofisticada, empática y viva" -- no mascota, no robot de videojuego.
   Evolución CSS-only (sin canvas/WebGL, sin nuevo peso de carga): orb más
   grande (88px->116px desktop) + halo secundario más amplio/atmosférico +
   un segundo anillo, más lento, para sugerir profundidad en capas en vez
   de un solo círculo. Nada de esto cambia el mecanismo de estado
   (dormant/listening/thinking) ya existente, solo su presencia visual. */
.v2-orb {
  position: relative;
  width: 116px; height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: transform .4s ease;
}
.v2-orb:hover { transform: scale(1.04); }

.v2-orb-core {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f5f9ff, #cfe0ff 30%, #a3bdf5 55%, #6d87c4 85%);
  box-shadow:
    0 0 40px rgba(143, 180, 255, .4),
    0 0 90px rgba(143, 180, 255, .16);
  transition: background .6s ease, box-shadow .6s ease, inset .6s ease;
}

.v2-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  animation: v2-breathe 4.5s ease-in-out infinite;
}

.v2-orb-ring--outer {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(143, 180, 255, .1);
  animation: v2-breathe 7s ease-in-out infinite reverse;
}

@keyframes v2-breathe {
  0%, 100% { transform: scale(1);    opacity: .5; }
  50%       { transform: scale(1.12); opacity: 1;  }
}

/* Estados del orb (Figma: reposo / escuchando / pensando / hallazgo) */
.v2-orb[data-state="listening"] .v2-orb-core {
  background: radial-gradient(circle at 36% 32%, #eef4ff, #8fb4ff 50%, #4b6cc0 88%);
  box-shadow: 0 0 44px rgba(143, 180, 255, .55);
}
.v2-orb[data-state="thinking"] .v2-orb-core {
  background: radial-gradient(circle at 36% 32%, #f4eeff, #c9a4ff 50%, #8a5fd0 88%);
  box-shadow: 0 0 44px rgba(201, 164, 255, .55);
}
.v2-orb[data-state="thinking"] .v2-orb-ring { animation-duration: 1.6s; }

/* S1.5 Screen 01 (BL-028) — el orb debe comunicar que es una entidad que
   reacciona antes del primer tap, sin depender de que se lea la leyenda de
   texto. Distinto del "wake" (que cambia data-state) -- esto es una
   micro-reacción ambiental a la sola presencia del cursor / a que el orb
   entra en el viewport, en el MISMO estado "dormant". */
.v2-orb:hover .v2-orb-ring { animation-duration: 2.2s; opacity: .85; }
.v2-orb--noticed .v2-orb-ring { animation: v2-notice .9s ease-out; }
@keyframes v2-notice {
  0%   { transform: scale(1);    opacity: .5; }
  45%  { transform: scale(1.2);  opacity: 1;  }
  100% { transform: scale(1);    opacity: .5; }
}

@keyframes v2-tap-cue {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%      { transform: scale(1.3);  opacity: 1;  }
}

/* Hint es hermano de .v2-map (no hijo) para no competir por espacio
   con los nodos orbitales inferiores (Hogar/Vida) — se ancla al
   borde inferior de .v2-canvas, no al del mapa. */
/* CEO DECISION 2026-08-28 ("Fix de la esfera + estado general"): a .66rem
   este texto perdía por completo contra el glow del orb (116px, box-shadow
   de 90px) -- subido de tamaño y de --muted (gris apagado) a --pulse (el
   mismo azul del propio orb), para que se lea como parte del mismo objeto
   en vez de competir con él. Solo tipografía/color -- el destino del click
   (enterDiscovery) no se toca. */
.v2-orb-hint {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--pulse);
  text-shadow: 0 0 12px rgba(143, 180, 255, .5);
  white-space: nowrap;
  transition: opacity .4s ease;
}
.v2-orb-hint--hidden { opacity: 0; pointer-events: none; }

/* ── Nodos de protección ────────────────────────────────── */
.v2-nodes { position: absolute; inset: 0; pointer-events: none; }

.v2-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  pointer-events: auto;
  /* Interaction Contract Screen 02 (S1.5, BL-028): "el mapa de 5 dominios
     aparece aquí por primera vez, dim/unlit" -- no invisible. Un visitante
     nuevo (sin estado en localStorage) veía opacity:0 real en los 5 nodos
     hasta que Vera "descubre" algo de él -- el mapa completo, incluyendo la
     etiqueta cotizable/próximamente que .v2-node-avail ya documentaba como
     "visible desde que aparece (Screen 01/02)" unas líneas abajo, nunca
     llegaba a renderizarse en la primera visita real (hallazgo UX
     ACCEPTANCE, 2026-08-26 -- verificado limpiando localStorage, no solo
     con un browser ya "descubierto" por testing previo). */
  opacity: .35;
  transition: opacity .6s ease, filter .4s ease;
}
.v2-node--visible { opacity: 1; }

.v2-node-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all .5s ease;
}

.v2-node-label {
  font-size: .72rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .5s ease;
}

/* S1.5 Screen 02 (BL-028) — eje de DISPONIBILIDAD (cotizable/próximamente),
   ortogonal al eje de COMPRENSIÓN (unknown/discovered/explored). Constante
   de producto (Auto es el único cotizable hoy), visible en el nodo mismo
   desde que aparece (Screen 01/02), no solo en el chip de Screen 03. */
.v2-node-avail {
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .04em;
  color: var(--muted);
  opacity: .75;
}
.v2-node--tappable .v2-node-avail { color: var(--aurora); opacity: 1; }

/* línea orb → nodo */
.v2-node-link {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent);
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.v2-node-link--visible { opacity: 1; }

/* estados del nodo */
.v2-node--discovered .v2-node-circle {
  border-color: rgba(127, 227, 196, .45);
  color: var(--aurora);
  box-shadow: 0 0 22px rgba(127, 227, 196, .18);
  animation: v2-node-pulse 2.6s ease-in-out infinite;
}
.v2-node--discovered .v2-node-label { color: var(--fg); }

.v2-node--explored .v2-node-circle {
  background: var(--aurora);
  border-color: var(--aurora);
  color: var(--aurora-ink);
  box-shadow: 0 0 26px rgba(127, 227, 196, .35);
  animation: none;
}
.v2-node--explored .v2-node-label { color: var(--aurora); }

/* S1.5 Screen 05 (BL-028) — "recibo" visual: cada turno confirmado en la
   conversación de Auto produce un pulso retriggable en el nodo Auto,
   replicando "ver antes que solo leer" (ya vigente en Screen 03) dentro de
   la conversación transaccional. Sin campo específico del dato (el backend
   no expone esa forma hoy -- ver delta §2 SCREEN 05, fallback documentado):
   un pulso por turno, no una etiqueta por dato. Declarado DESPUÉS de
   --discovered/--explored (misma especificidad de selector -- el orden en
   la cascada decide, y el pulso de recibo debe ganar mientras está activo). */
.v2-node--receipt-pulse .v2-node-circle { animation: v2-receipt-pulse .7s ease-out; }
@keyframes v2-receipt-pulse {
  0%   { box-shadow: 0 0 14px rgba(127, 227, 196, .15); }
  40%  { box-shadow: 0 0 38px rgba(127, 227, 196, .55); }
  100% { box-shadow: 0 0 14px rgba(127, 227, 196, .15); }
}

/* AUTO es el único nodo transaccional en SLICE 01 */
.v2-node--tappable { cursor: pointer; }
.v2-node--tappable:hover .v2-node-circle { transform: scale(1.08); }

/* PRODUCT_UX "Variante B" (CEO decision 2026-08-28) — AUTO destacado desde el
   primer render, no solo tras "descubrirse". Circulo con el mismo tratamiento
   visual que --discovered (glow aurora) pero SIEMPRE activo para este nodo,
   más un boton superpuesto explicito en vez del texto pequeño "cotizable". */
.v2-node--auto-featured .v2-node-circle {
  border-color: rgba(127, 227, 196, .55);
  color: var(--aurora);
  box-shadow: 0 0 24px rgba(127, 227, 196, .22);
  animation: v2-node-pulse 2.6s ease-in-out infinite;
}
.v2-node--auto-featured .v2-node-label { color: var(--fg); font-weight: 600; }

.v2-node-cta {
  font-family: var(--f-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--aurora-ink);
  background: var(--aurora);
  padding: .22rem .55rem;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(127, 227, 196, .3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.v2-node--auto-featured:hover .v2-node-cta,
.v2-node--auto-featured:focus-visible .v2-node-cta {
  transform: scale(1.06);
  box-shadow: 0 0 22px rgba(127, 227, 196, .45);
}

@keyframes v2-node-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(127, 227, 196, .12); }
  50%       { box-shadow: 0 0 30px rgba(127, 227, 196, .3); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-orb-ring,
  .v2-orb-ring--outer,
  .v2-orb::after,
  .v2-node--discovered .v2-node-circle,
  .v2-node--auto-featured .v2-node-circle { animation: none; }
}

/* ── Panel (derecha) ────────────────────────────────────── */
.v2-panel {
  position: relative;
  background: var(--panel);
  border-left: 1px solid var(--border);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
}

.v2-screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 5.5rem 2.5rem 2.5rem;
  overflow-y: auto;
}
.v2-screen--active { display: flex; animation: v2-screen-in .45s ease; }

@keyframes v2-screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.v2-eyebrow {
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aurora);
  margin-bottom: 1rem;
}

.v2-title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
  text-wrap: balance;
}

.v2-body {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 1.5rem;
  max-width: 42ch;
}
.v2-body strong { color: var(--fg); font-weight: 600; }

.v2-panel-footer { margin-top: auto; padding-top: 1.5rem; }

/* ── CTAs ───────────────────────────────────────────────── */
.v2-cta {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: .92rem;
  font-weight: 500;
  transition: all .25s ease;
}
.v2-cta:disabled { opacity: .35; cursor: not-allowed; }

.v2-cta--aurora { background: var(--aurora); color: var(--aurora-ink); }
.v2-cta--aurora:hover:not(:disabled) { box-shadow: 0 0 28px rgba(127, 227, 196, .35); }

.v2-cta--pulse { background: var(--pulse); color: #0d1830; }
.v2-cta--pulse:hover:not(:disabled) { box-shadow: 0 0 28px rgba(143, 180, 255, .35); }

/* ── Entry híbrida (screen 01) — Experience V3 Slice 1 ──── */
/* ACCEPTANCE ITERATION (2026-08-26): un solo CTA primario visualmente
   distinto -- investigación de mercado/UX confirmó que los 5 puntos de
   entrada con el mismo peso visual diluían "qué debo hacer" (hallazgo
   aceptado #7). Auto es la única capacidad vendible hoy (Protection Map ya
   lo etiqueta "cotizable" vs. "próximamente") -- el CTA primario refleja
   esa misma verdad, no una jerarquía inventada. */
.v2-entry-primary { margin-bottom: .9rem; }
.v2-entry-primary-hint {
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  margin-top: .5rem;
}

.v2-entry-grid {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: .8rem;
}

.v2-entry-chip {
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: .86rem;
  font-weight: 500;
  color: var(--fg);
  text-align: left;
  transition: all .2s ease;
}
.v2-entry-chip:hover,
.v2-entry-chip:focus-visible { border-color: rgba(127, 227, 196, .4); background: var(--aurora-dim); }

.v2-entry-chip--primary {
  background: var(--aurora);
  border-color: var(--aurora);
  color: var(--aurora-ink);
  font-weight: 600;
  text-align: center;
  width: 100%;
}
.v2-entry-chip--primary:hover,
.v2-entry-chip--primary:focus-visible { background: var(--aurora); border-color: var(--aurora); opacity: .92; }

/* ── Siniestro intro (screen 03b) — reconciliado desde reportar-siniestro.html
   V1, Board Baseline 1.0 Closure Decision 2026-08-22 ─────────────────── */
.v2-siniestro-choices {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.75rem;
}

.v2-siniestro-choice {
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: .86rem;
  font-weight: 500;
  color: var(--fg);
  text-align: left;
  transition: all .2s ease;
}
.v2-siniestro-choice--safe:hover,
.v2-siniestro-choice--safe:focus-visible { border-color: rgba(127, 227, 196, .4); background: var(--aurora-dim); }
.v2-siniestro-choice--help {
  border-color: rgba(255, 178, 122, .3);
  color: var(--attention);
}
.v2-siniestro-choice--help:hover,
.v2-siniestro-choice--help:focus-visible { border-color: var(--attention); background: var(--attention-dim); }

.v2-siniestro-timeline {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  list-style: none;
  margin-bottom: .5rem;
}

.v2-siniestro-step {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
}

.v2-siniestro-step-num {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--aurora-dim);
  color: var(--aurora);
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
}

.v2-siniestro-step h4 {
  font-size: .84rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: .2rem;
}

.v2-siniestro-step p {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}

.v2-entry-guided {
  width: 100%;
  padding: .8rem 1.1rem;
  border-radius: var(--radius);
  border: 1px dashed var(--border-2);
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  transition: all .2s ease;
  margin-bottom: 1.4rem;
}
.v2-entry-guided:hover,
.v2-entry-guided:focus-visible { color: var(--fg); border-color: var(--pulse); }

.v2-trust-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--muted);
}
.v2-trust-line svg { flex-shrink: 0; color: var(--aurora); }

/* ── Journey strip (MOMENTO 3, "no termina cuando compras") ─ */
.v2-journey {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.v2-journey-eyebrow {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--aurora);
  margin-bottom: .5rem;
}
.v2-journey-lead {
  font-size: .8rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 42ch;
  margin-bottom: 1.1rem;
}
.v2-journey-steps {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0; padding: 0;
}
.v2-journey-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
}
/* Línea conectora: un solo trazo detrás de los dots, no un borde por
   step (evita duplicar/grosor irregular en los extremos). */
.v2-journey-step::before {
  content: '';
  position: absolute;
  top: 4px;
  left: -50%;
  width: 100%;
  height: 1px;
  background: var(--border-2);
}
.v2-journey-step:first-child::before { display: none; }
.v2-journey-dot {
  position: relative;
  z-index: 1;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border-2);
}
.v2-journey-step--active .v2-journey-dot {
  background: var(--aurora);
  border-color: var(--aurora);
  box-shadow: 0 0 10px rgba(127, 227, 196, .5);
}
.v2-journey-label {
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-journey-step--active .v2-journey-label { color: var(--fg); }

/* MOMENTO 4 — cierre que repite la acción primaria tras el journey strip.
   Énfasis medio a propósito: no compite visualmente con el CTA primario
   (aurora sólido) de arriba del fold -- es un eco, no una segunda
   decisión. Borde sólido (no punteado como .v2-entry-guided) porque SÍ es
   una acción real repetida, no una invitación a "no sé por dónde
   empezar". */
.v2-journey-cta {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: .85rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--fg);
  font-size: .84rem;
  font-weight: 600;
  text-align: center;
  transition: all .2s ease;
}
.v2-journey-cta:hover,
.v2-journey-cta:focus-visible { border-color: var(--aurora); color: var(--aurora); }

/* ── Statement cards (screen 02) ────────────────────────── */
.v2-statements { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1.75rem; }

.v2-statement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  font-size: .88rem;
  font-weight: 500;
  color: var(--fg);
  text-align: left;
  transition: all .25s ease;
}
.v2-statement:hover { border-color: var(--border-2); }

.v2-statement-check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  display: grid;
  place-items: center;
  color: transparent;
  transition: all .25s ease;
}

.v2-statement--selected {
  border-color: rgba(127, 227, 196, .5);
  background: var(--aurora-dim);
}
.v2-statement--selected .v2-statement-check {
  background: var(--aurora);
  border-color: var(--aurora);
  color: var(--aurora-ink);
}

/* ── Áreas comprendidas ─────────────────────────────────── */
.v2-areas {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
}
.v2-areas-label {
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-areas-count {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--pulse);
}

.v2-areas-bars { display: flex; gap: .4rem; }
.v2-areas-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  transition: background .5s ease;
}
.v2-areas-bar--on { background: var(--pulse); }

/* ── Chips (screen 03) ──────────────────────────────────── */
.v2-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.v2-chip {
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .4rem .8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(127, 227, 196, .3);
  color: var(--aurora);
  background: var(--aurora-dim);
}

/* ── Chat (screen 04) ───────────────────────────────────── */
.v2-screen--chat { padding-bottom: 1.5rem; }

.v2-chat {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .5rem 0 1rem;
  min-height: 0;
}

.v2-msg {
  max-width: 88%;
  padding: .8rem 1.05rem;
  border-radius: 1.1rem;
  font-size: .88rem;
  line-height: 1.55;
  animation: v2-screen-in .3s ease;
}
.v2-msg--user {
  align-self: flex-end;
  background: var(--pulse-dim);
  border: 1px solid rgba(143, 180, 255, .25);
  border-bottom-right-radius: .3rem;
}
.v2-msg--vera {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-left-radius: .3rem;
}
.v2-msg--error {
  align-self: flex-start;
  background: var(--attention-dim);
  border: 1px solid rgba(255, 178, 122, .3);
  color: var(--attention);
}

.v2-msg p { margin-bottom: .5rem; }
.v2-msg p:last-child { margin-bottom: 0; }
.v2-msg ul { margin: .3rem 0 .5rem 1.1rem; }
.v2-msg hr { border: none; border-top: 1px solid var(--border); margin: .6rem 0; }
.v2-msg a { color: var(--aurora); font-weight: 600; }

.v2-msg--typing { display: flex; gap: .3rem; padding: 1rem 1.2rem; }
.v2-msg--typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: v2-typing 1.2s ease-in-out infinite;
}
.v2-msg--typing span:nth-child(2) { animation-delay: .15s; }
.v2-msg--typing span:nth-child(3) { animation-delay: .3s; }

@keyframes v2-typing {
  0%, 60%, 100% { transform: none; opacity: .4; }
  30%            { transform: translateY(-4px); opacity: 1; }
}

.v2-consent {
  font-size: .62rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: .75rem;
}

.v2-input-row { display: flex; gap: .6rem; }

.v2-input {
  flex: 1;
  font-family: inherit;
  font-size: .9rem;
  color: var(--fg);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .85rem 1.2rem;
  transition: border-color .25s ease;
}
.v2-input::placeholder { color: var(--muted); }
.v2-input:focus { outline: none; border-color: rgba(143, 180, 255, .5); }

.v2-send {
  width: 46px; height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--aurora);
  color: var(--aurora-ink);
  display: grid;
  place-items: center;
  transition: all .25s ease;
}
.v2-send:hover { box-shadow: 0 0 22px rgba(127, 227, 196, .4); }
.v2-send:disabled { opacity: .35; }

/* ── Responsive: mobile stack ───────────────────────────── */
@media (max-width: 860px) {
  .v2-header-right { gap: .75rem; }
  .v2-account { gap: .6rem; }
  .v2-account-link { font-size: .58rem; letter-spacing: .04em; }

  /* S1.5 Screen 01 (BL-028) — orden de render corregido: el headline y los
     CTAs deben ser lo primero visible a 375px (condición de éxito ya
     vinculante del Interaction Contract), no el mapa orbital completo.
     `order` reordena visualmente sin tocar el orden del DOM (accesibilidad
     de lectura no cambia); el panel pasa a la fila flexible (1fr, prioridad
     de espacio) y el canvas a la fija (34dvh, secundario en mobile). */
  .v2-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 34dvh; }

  .v2-panel { order: 1; }
  .v2-canvas {
    order: 2;
    min-height: 42dvh;
    padding-top: 4.5rem;
    border-top: 1px solid var(--border);
  }
  .v2-map { width: min(58vmin, 260px); }
  .v2-map-caption { top: .7rem; width: 92%; gap: .2rem; }
  .v2-map-caption-eyebrow { font-size: .58rem; letter-spacing: .16em; }
  .v2-map-caption-sub { font-size: .68rem; line-height: 1.35; }

  .v2-panel {
    min-height: 0;
    border-left: none;
  }

  /* El panel pasa a ser lo primero visible en mobile (order:1) -- debe
     despejar el header fijo por sí mismo; antes lo hacía el canvas, que
     ahora va segundo. */
  .v2-screen { padding: 4.75rem 1.35rem 1.1rem; }

  /* Screen 01 (Entry) tiene más contenido que las demás -- el headline,
     los 5 puntos de entrada y la línea de confianza deben caber en el
     viewport inicial sin scroll (CEO DECISION 2026-08-21, Slice 1). */
  #screen-intro .v2-body { margin-bottom: 1rem; }
  .v2-entry-grid { gap: .45rem; margin-bottom: .6rem; }
  .v2-entry-chip { padding: .7rem 1rem; font-size: .82rem; }
  .v2-entry-guided { padding: .65rem 1rem; margin-bottom: .9rem; font-size: .8rem; }
  .v2-orb { width: 80px; height: 80px; }
  .v2-orb-core { inset: 16px; }
  .v2-orb-ring--outer { inset: -10px; }
  .v2-node-circle { width: 42px; height: 42px; }
  /* bottom-anchor (desktop) colisiona con Hogar/Vida en mobile ahora que
     los nodos son dim/unlit en vez de invisibles (ver .v2-node arriba) --
     el comentario original de este bloque ya advertía la colisión, resuelta
     entonces solo porque los nodos no se veían. Se reancla justo debajo del
     orb (centro del canvas + su radio + margen) en vez del borde del
     canvas -- el hueco real entre el orb y el anillo Hogar/Vida. */
  /* UX ACCEPTANCE FAILURE — PROTECTION MAP (2026-08-26): el offset fijo
     calc(50% + 46px) estaba calibrado para la altura de canvas anterior
     (34dvh/1.75rem padding) y quedó inválido al crecer el canvas para dar
     espacio a .v2-map-caption (4.5rem/42dvh) -- volvía a colisionar con el
     orb y con Familia, el mismo tipo de bug de PR #69. En vez de perseguir
     otro offset frágil en un espacio ya apretado (5 nodos + orb + caption +
     hint en ~42dvh), se retira el TEXTO del hint en mobile -- el espacio
     sigue sin alcanzar. Desktop no se toca, sigue anclado al borde inferior
     del canvas sin conflicto de espacio. */
  .v2-orb-hint { display: none; }

  /* CEO DECISION 2026-08-28 ("Fix de la esfera + estado general"): el
     razonamiento de 2026-08-26 de que el hint era "redundante" con el CTA
     resultó incorrecto -- sin ninguna señal, el orb se lee como decorativo
     (confirmado por el propio CEO). No hay espacio para el texto completo,
     pero sí para un cue mínimo: un punto pulsante en el borde del orb, sin
     texto, que no compite en tamaño con el CTA. Solo CSS (::after sobre
     .v2-orb, ya position:relative) -- no toca el click handler ni el markup. */
  .v2-orb::after {
    content: '';
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pulse);
    box-shadow: 0 0 0 3px var(--bg), 0 0 8px rgba(143, 180, 255, .8);
    animation: v2-tap-cue 1.8s ease-in-out infinite;
  }

  /* Journey strip (MOMENTO 3) — verificado visualmente: una sola fila de
     6 labels ("COMPARAR"/"CONTRATAR"/"PROTEGER") no cabe en 375px, los
     textos se encimaban entre sí. Grid 3x2 en vez de fila única -- más
     ancho por label, sin necesitar abreviar palabras reales. La línea
     conectora de escritorio (pensada para una secuencia horizontal) no
     tiene sentido visual en una cuadrícula de 2 filas, así que se oculta
     aquí en vez de forzarla a un layout para el que no fue diseñada. */
  .v2-journey-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.1rem;
  }
  .v2-journey-step::before { display: none; }
  .v2-journey-label { font-size: .56rem; }
}

/* ── Vera Comparison — tarjeta de NormalizedQuote (ADR-030/033, CA-V9) ── */
.v2-quote { max-width: 92%; padding: .95rem 1.1rem; }
.v2-quote-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.v2-quote-plan { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--aurora); }
.v2-quote-badge {
  font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: var(--radius-pill);
  background: var(--pulse-dim); color: var(--pulse);
}
.v2-quote-price { font-family: var(--f-display); font-size: 1.55rem; font-weight: 300; letter-spacing: -.02em; margin: .15rem 0 .5rem; }
.v2-quote-price small { font-family: var(--f-sans); font-size: .72rem; color: var(--muted); font-weight: 500; }
.v2-quote-cov { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .25rem; font-size: .8rem; color: var(--fg); }
.v2-quote-note { font-size: .72rem; color: var(--muted); line-height: 1.5; margin: 0; }