/* ZelvIA 2.0 — Cómo probamos (fase 3).
 * Maestra: docs/maestras/zelvia-como-probamos-v1.html (= Cómo probamos v2, ver docs/maestras/INDICE.md; A-52/A-55).
 * Reglas: docs/DESIGN.md (escalas de §4 bis, máximo dos caminos por página).
 * Tokens canónicos en zelvia-tokens.css; este archivo solo es propietario de esta página.
 * Clases con prefijo zv-como-: sin colisiones con otras superficies.
 * El bloque con datos (data-zv-block) espera data/zelvia.json; lo provisional (data-zv-provisional)
 * se rotula a la vista con .zv-como-flag; lo que aún no tiene columna confirmada lleva data-zv-gap.
 */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body.zv-como-page {
  margin: 0;
  font-family: var(--zv-font-ui);
  font-size: 16px;
  line-height: 1.55;
  background: var(--zv-color-bg);
  color: var(--zv-color-ink-soft);
  -webkit-font-smoothing: antialiased;
}

.zv-como :focus-visible { outline: 2px solid var(--zv-color-teal-link); outline-offset: 3px; border-radius: var(--zv-radius-label); }
.zv-como-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.zv-como-wrap--narrow { max-width: 820px; }

/* Rótulo de lo provisional: siempre visible, misma línea que el título del bloque */
.zv-como-flag {
  display: inline-block;
  padding: 2px var(--zv-space-2);
  border-radius: var(--zv-radius-label);
  background: var(--zv-color-amber-bg);
  color: var(--zv-color-amber-text);
  font-size: 13px;
  font-weight: var(--zv-font-weight-semibold);
  line-height: 20px;
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.zv-como-hero { padding: calc(76px + var(--zv-space-12)) 0 var(--zv-space-20); }
.zv-como-title {
  margin: 0 0 var(--zv-space-4);
  color: var(--zv-color-ink);
  font-family: var(--zv-font-display);
  font-size: 42px;
  font-weight: var(--zv-font-weight-bold);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.zv-como-answer { margin: 0; color: var(--zv-color-ink-soft); font-size: 20px; line-height: 1.5; }

/* ── SECCIONES ────────────────────────────────────────────────────────────── */
.zv-como-sec { padding: var(--zv-space-4) 0 var(--zv-space-12); }
.zv-como-sec--last { padding-bottom: var(--zv-space-20); }
.zv-como-h2 {
  margin: 0 0 var(--zv-space-4);
  color: var(--zv-color-ink);
  font-family: var(--zv-font-display);
  font-size: 28px;
  font-weight: var(--zv-font-weight-bold);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.zv-como-h2__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--zv-space-2) var(--zv-space-4); margin: 0 0 var(--zv-space-4); }
.zv-como-h2__row .zv-como-h2 { margin: 0; }

/* Camino (único separador del cuerpo: el segundo lo pone el pie) */
.zv-como-sep { display: block; width: 100%; height: 64px; margin: 0 0 var(--zv-space-12); }

/* ── TRES NIVELES ─────────────────────────────────────────────────────────── */
.zv-como-levels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--zv-space-4);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}
.zv-como-lev {
  display: flex;
  flex-direction: column;
  gap: var(--zv-space-3);
  padding: var(--zv-space-4);
  border: 1px solid var(--zv-color-line);
  border-radius: var(--zv-radius-field);
  background: var(--zv-color-surface);
  box-shadow: var(--zv-shadow-e2);
}
.zv-como-lev p { margin: 0; color: var(--zv-color-ink-soft); font-size: 15px; line-height: 1.55; }
.zv-como-lev zelvia-sello { display: block; }
.zv-como-lev .zv-sello { max-width: none; }

/* ── QUÉ CUENTA COMO PRUEBA ───────────────────────────────────────────────── */
.zv-como-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--zv-space-12); align-items: start; }
.zv-como-steps { position: relative; max-width: 640px; margin: 0; padding: 0; list-style: none; }
.zv-como-steps::before {
  content: "";
  position: absolute;
  left: 7px; top: 10px; bottom: 22px;
  width: 2px;
  background: linear-gradient(var(--zv-color-teal-graphic), var(--zv-color-teal-soft));
}
.zv-como-steps li {
  position: relative;
  padding: 0 0 var(--zv-space-4) var(--zv-space-8);
  color: var(--zv-color-ink);
  font-size: 16px;
  font-weight: var(--zv-font-weight-semibold);
}
.zv-como-steps li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 16px; height: 16px;
  border: 2px solid var(--zv-color-teal-graphic);
  border-radius: 50%;
  background: var(--zv-color-surface);
}
.zv-como-steps li:first-child::before {
  background: var(--zv-color-teal-graphic);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--zv-color-teal-graphic) 15%, transparent);
}
.zv-como-steps__note { display: block; margin-top: 2px; color: var(--zv-color-muted); font-size: 14px; font-weight: var(--zv-font-weight-regular); }
.zv-como-note {
  margin: 0;
  padding: var(--zv-space-4) var(--zv-space-6);
  border-radius: var(--zv-radius-btn);
  background: var(--zv-color-bg-panel);
  box-shadow: var(--zv-shadow-e0);
  color: var(--zv-color-ink-soft);
  font-size: 16px;
  line-height: 1.55;
}

/* ── LO QUE SÍ / LO QUE NO HACEMOS ────────────────────────────────────────── */
.zv-como-pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zv-space-4); align-items: stretch; }
.zv-como-pcc {
  padding: var(--zv-space-6);
  border: 1px solid var(--zv-color-line);
  border-radius: var(--zv-radius-field);
  background: var(--zv-color-surface);
}
.zv-como-pcc--good { box-shadow: inset 0 3px 0 var(--zv-color-teal-graphic), var(--zv-shadow-e2); }
.zv-como-pcc--bad { box-shadow: inset 0 3px 0 var(--zv-color-danger), var(--zv-shadow-e2); }
.zv-como-pcc h2 {
  margin: 0 0 var(--zv-space-3);
  color: var(--zv-color-ink);
  font-family: var(--zv-font-ui);
  font-size: 20px;
  font-weight: var(--zv-font-weight-bold);
  line-height: 1.3;
}
.zv-como-pcc ul { margin: 0; padding-left: 20px; color: var(--zv-color-ink-soft); font-size: 16px; line-height: 1.6; }

/* ── TODAS NUESTRAS PRUEBAS ───────────────────────────────────────────────── */
.zv-como-tlog { display: grid; gap: var(--zv-space-3); }
.zv-como-empty { margin: 0; color: var(--zv-color-muted); font-size: 14px; line-height: 1.55; }
.zv-como-trow {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto 18px;
  gap: var(--zv-space-4);
  align-items: center;
  padding: var(--zv-space-3) var(--zv-space-4);
  border: 1px solid var(--zv-color-line);
  border-radius: var(--zv-radius-btn);
  background: var(--zv-color-surface);
  box-shadow: var(--zv-shadow-e1);
  color: var(--zv-color-ink);
  text-decoration: none;
  transition: box-shadow var(--zv-motion-micro-duration) var(--zv-motion-micro-easing), transform var(--zv-motion-micro-duration) var(--zv-motion-micro-easing);
}
.zv-como-trow:hover { box-shadow: var(--zv-shadow-e2); transform: translateY(-2px); }
.zv-como-trow time { color: var(--zv-color-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.zv-como-trow__main { min-width: 0; }
.zv-como-trow__main strong { display: block; color: var(--zv-color-ink); font-size: 16px; }
.zv-como-trow__main small { display: block; color: var(--zv-color-muted); font-size: 14px; overflow-wrap: anywhere; }
.zv-como-trow__link { color: var(--zv-color-muted); text-decoration: underline; text-decoration-color: var(--zv-color-line-strong); text-underline-offset: 2px; }
.zv-como-trow__link:hover { color: var(--zv-color-teal-text); text-decoration-color: var(--zv-color-teal-link); }
.zv-como-tres { color: var(--zv-color-teal-text); font-size: 14px; font-weight: var(--zv-font-weight-semibold); }
.zv-como-trow > svg { color: var(--zv-color-teal-text); }

/* ── AVISO DE ERROR ───────────────────────────────────────────────────────── */
.zv-como-errbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zv-space-6);
  padding: var(--zv-space-6) var(--zv-space-8);
  border-radius: var(--zv-radius-panel);
  background: var(--zv-color-bg-panel);
  box-shadow: var(--zv-shadow-e0);
}
.zv-como-errbox h2 {
  margin: 0 0 var(--zv-space-2);
  color: var(--zv-color-ink);
  font-family: var(--zv-font-ui);
  font-size: 22px;
  font-weight: var(--zv-font-weight-bold);
  line-height: 1.3;
}
.zv-como-errbox p { margin: 0; color: var(--zv-color-ink-soft); }
.zv-como-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--zv-space-2);
  min-height: var(--zv-height-lg);
  padding: var(--zv-space-2) var(--zv-space-6);
  border-radius: var(--zv-radius-btn);
  background: linear-gradient(var(--zv-color-navy-btn), var(--zv-color-navy));
  box-shadow: var(--zv-shadow-navy);
  color: var(--zv-color-bg);
  font-weight: var(--zv-font-weight-semibold);
  text-decoration: none;
  transition: transform var(--zv-motion-micro-duration) var(--zv-motion-enter-easing);
}
.zv-como-btn:hover { transform: translateY(-1px); }
.zv-como-btn:active { transform: translateY(1px); }

/* ── RESPONSIVE (≤ 860 px) ────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .zv-como-hero { padding: calc(76px + var(--zv-space-8)) 0 var(--zv-space-12); }
  .zv-como-sep { margin-bottom: var(--zv-space-8); }
  .zv-como-title { font-size: 34px; }
  .zv-como-sec { padding-top: var(--zv-space-6); }
  .zv-como-sec--last { padding-bottom: var(--zv-space-12); }
  .zv-como-levels { grid-template-columns: 1fr; }
  .zv-como-how, .zv-como-pc { grid-template-columns: 1fr; }
  .zv-como-how { gap: var(--zv-space-6); }
  .zv-como-trow {
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-areas: "time arrow" "main arrow" "res arrow";
    row-gap: var(--zv-space-1);
  }
  .zv-como-trow time { grid-area: time; }
  .zv-como-trow__main { grid-area: main; }
  .zv-como-tres { grid-area: res; }
  .zv-como-trow > svg { grid-area: arrow; align-self: center; }
  .zv-como-errbox { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .zv-como-title { font-size: 30px; }
}

/* ── BANNER DE CONSENTIMIENTO (mismo bloque que el resto de superficies) ──── */
#zv-cookie-backdrop {
  position: fixed;
  z-index: 9998;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--zv-color-navy) 72%, transparent);
}
#zv-cookie-banner {
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--zv-color-line);
  border-radius: 10px;
  background: var(--zv-color-surface);
}
.zvcb-title {
  margin: 0 0 10px;
  color: var(--zv-color-ink);
  font-family: var(--zv-font-display);
  font-size: 16px;
  line-height: 1.35;
}
.zvcb-text { margin: 0 0 16px; color: var(--zv-color-evidence); font-size: 13px; line-height: 1.55; }
.zvcb-text a { color: var(--zv-color-teal); }
.zvcb-btns { display: flex; gap: 8px; }
.zvcb-btns button { flex: 1; min-height: 40px; border-radius: 6px; cursor: pointer; font-weight: var(--zv-font-weight-semibold); }
.zvcb-accept { border: 1px solid var(--zv-color-teal); background: var(--zv-color-teal); color: var(--zv-color-on-teal); }
.zvcb-reject { border: 1px solid var(--zv-color-line); background: transparent; color: var(--zv-color-text); }
@media (max-width: 480px) { .zvcb-btns { flex-direction: column; } }

@media (prefers-reduced-motion: reduce) {
  .zv-como-trow, .zv-como-btn { transition: none; }
  .zv-como-trow:hover, .zv-como-btn:hover, .zv-como-btn:active { transform: none; }
}