/* ============================================================
   ORION — LANDING VISUAL SYSTEM v3.0 (ORDEN 9, 2026-09-19)
   Founder-approved design, implemented from deploy/landing-reference.html.
   Single explicit theme (paper / deep / teal accent), does not respond
   to the OS theme. Only this file changed for ORDEN 9 -- the HTML
   (text, nine sections, bilingual data-i18n layer) is untouched
   except for the CTA-hierarchy fix in Parte F (header button swapped
   from the demo to the primary CTA) and the reasoning-card markup
   simplification needed for the new spine treatment (same content,
   same data-i18n keys, no text changed).
   ============================================================ */

:root {
  --paper: #F4F5F3;
  --paper-2: #EBEDEA;
  --ink: #14181C;
  --ink-soft: #4E565E;
  --ink-faint: #7B838B;
  --deep: #12171A;
  --deep-2: #1A2126;
  --on-deep: #E8EBE9;
  --on-deep-soft: #9AA5A9;
  --accent: #15606B;
  --accent-on-deep: #59B3B0;
  --accent-hover: #0F4952;
  --line: #DCDFDB;
  --line-deep: #283136;

  --max: 1080px;
  --text-col: 660px;
  --card-radius: 10px;
  --card-pad-x: 24px;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (max-width: 760px) {
  :root { --card-pad-x: 20px; }
}
/* ORDEN 14 Parte B: more room for the grids on wide screens;
   --text-col stays 660px so running prose keeps its measure. */
@media (min-width: 1401px) {
  :root { --max: 1200px; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 18.5px; line-height: 1.6;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.col { max-width: var(--text-col); }

h1, h2, h3 {
  font-family: var(--serif); font-weight: 400;
  margin: 0; text-wrap: balance; letter-spacing: -0.005em;
  color: var(--ink);
}
p { margin: 0; }

/* ---- dark bands: hero, section 6 (.rigor), cierre (.final) --
   the ONLY three dark bands in the page (ORDEN 9 Parte D). ---- */
.hero, .rigor, .final {
  background: var(--deep); color: var(--on-deep);
}
.hero h1, .hero h2, .hero h3,
.rigor h1, .rigor h2, .rigor h3,
.final h1, .final h2, .final h3 { color: var(--on-deep); }

/* ---- light bands: default paper, three use the alt paper (Parte D:
   secciones 3, 5 y 8) ---- */
.audience, .cost, .example, .how, .trust, .newness {
  background: var(--paper); color: var(--ink);
}
.cost, .how, .newness { background: var(--paper-2); }

/* ---- band rhythm (Parte C): clamp(52px,6.5vw,86px) top/bottom,
   24px minimum side margin at any width. ---- */
.band, .hero, .audience, .cost, .example, .how, .rigor, .trust,
.newness, .final {
  padding-block: clamp(52px, 6.5vw, 86px);
}

.kicker {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px; display: block;
}
.rigor .kicker, .final .kicker, .hero .kicker { color: var(--accent-on-deep); }
.section-title, h2.section-title {
  font-size: clamp(29px, 4.2vw, 44px); line-height: 1.14;
  margin-bottom: 20px;
}
h3 { font-size: 21px; line-height: 1.3; font-weight: 500; }

/* ---------------------------------------------------- header --- */
.site-header {
  border-bottom: 1px solid var(--line-deep);
  background: rgba(18, 23, 26, .92);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 66px; flex-wrap: wrap; gap: 10px 0; padding-block: 12px;
}
.brand-mark {
  font-family: var(--serif); font-weight: 500; font-size: 19px;
  letter-spacing: .01em; color: var(--on-deep); text-decoration: none;
}
.header-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .header-actions { gap: 12px; }
  .header-actions .btn { font-size: 13.5px; padding: 10px 16px; }
}
.nav-link {
  font-size: 14px; font-weight: 400; color: var(--on-deep-soft);
  text-decoration: none; letter-spacing: .01em;
}
.nav-link:hover { color: var(--on-deep); }
.lang-switch { display: flex; align-items: center; gap: 7px; }
.lang-btn {
  all: unset; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em; color: var(--on-deep-soft);
  padding: 3px 2px 2px; border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.lang-btn:hover { color: var(--on-deep); }
.lang-btn.active { color: var(--accent-on-deep); border-bottom-color: var(--accent-on-deep); }
.lang-btn:focus-visible { outline: 2px solid var(--accent-on-deep); outline-offset: 2px; }
.lang-sep { font-size: 12px; color: var(--on-deep-soft); }

/* --------------------------------------------------- buttons --- */
.btn {
  display: inline-block; font-family: var(--sans);
  font-size: 16px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border-radius: 4px;
  padding: 14px 26px; cursor: pointer; border: none;
  transition: background-color .15s ease, color .15s ease;
}
.btn-lg { font-size: 16px; padding: 14px 26px; }
/* Parte F: "Empezar una decisión" is the ONE primary CTA (hero,
   header, cierre). "Probar el demo" is never a button, only the
   plain secondary link below it (.nav-link inside .cta-note). */
.btn-primary {
  background: var(--accent); color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
/* used on dark bands (header, hero, cierre) -- swapped foreground per
   the approved reference: dark text on the lighter on-deep accent,
   not white-on-accent like the light-band button. */
.btn-inverse {
  background: var(--accent-on-deep); color: var(--deep);
}
.btn-inverse:hover { background: #7BC9C6; }

.cta-cluster { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cta-support { font-size: 15.5px; color: var(--ink-faint); letter-spacing: .01em; }
.rigor .cta-support, .final .cta-support { color: var(--on-deep-soft); }
.cta-note {
  font-size: 15.5px; color: var(--ink-faint); margin-top: 14px; max-width: 54ch;
}
.rigor .cta-note, .final .cta-note { color: var(--on-deep-soft); }
.cta-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cta-note .nav-link { color: inherit; }
/* ORDEN 16 Parte C: the "short demo?" line (hero + closing) uses the
   width of its container, not the 54ch prose measure, and the link
   text -- including "(2 preguntas · unos minutos)" -- never breaks
   apart on desktop. Below 861px it may wrap, as the order allows. */
.demo-line { max-width: none; }
@media (min-width: 861px) {
  .demo-line a { white-space: nowrap; }
}

/* ------------------------------------------------------ hero --- */
.hero { padding-top: 0; }
.hero .wrap.hero-grid { padding-top: clamp(48px, 7vw, 88px); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 56px); align-items: start;
}
.hero-copy { display: flex; flex-direction: column; gap: 24px; }
/* ORDEN 18 (R2): hero headline block spans the container. */
.hero-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 24px; }
.hero-grid { row-gap: clamp(24px, 3vw, 36px); }
.hero-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-deep);
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.hero-marker, .live-dot { display: none; }
.hero h1 { font-size: clamp(36px, 5.8vw, 62px); line-height: 1.08; }
.hero-subhead {
  font-size: clamp(19px, 2.3vw, 21.5px); line-height: 1.5;
  color: var(--on-deep-soft); max-width: 54ch;
}

/* ------------------------------ hero reasoning card ---- */
.hero-nodes, .hv-back, .hero-visual::before { display: none; }
.hero-visual { position: relative; }
.hv-panel {
  position: relative; background: var(--deep-2);
  border: 1px solid var(--line-deep); border-radius: var(--card-radius);
  padding: 0; overflow: hidden; box-shadow: none;
}
.hv-titlebar {
  padding: 13px 18px; margin: 0;
  border-bottom: 1px solid var(--line-deep);
  display: flex; align-items: center; gap: 9px;
}
.hv-titlebar .hv-mark, .live-dot-panel { display: none; }
.hv-title {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-deep-soft);
}
.hv-divider {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px 9px 46px; margin: 0;
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-soft);
}
.hv-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-deep); }
.hv-cut { display: none; }

.hv-stage {
  position: relative; display: block;
  padding: 13px 18px 13px 46px;
}
.hv-stage + .hv-stage { margin-top: 0; }
.hv-stage::before {
  content: ""; position: absolute; left: 25px; top: 0; bottom: 0;
  width: 1px; background: var(--line-deep);
}
.hv-divider:first-of-type + .hv-stage::before { top: 14px; }
.hv-stage:last-child::before { bottom: calc(100% - 20px); }

.hv-node {
  position: absolute; left: 21px; top: 16px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--deep-2); border: 1.5px solid var(--line-deep);
  margin: 0;
}
.hv-node svg { display: none; }
.hv-card, .hv-card.restriction, .hv-card.decision {
  background: transparent; border: none; border-left: none;
  border-radius: 0; padding: 0; box-shadow: none; margin: 0;
}
.hv-restrict-head { display: contents; }
.hv-restrict-head svg { display: none; }
.hv-label {
  display: block; font-family: var(--mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; color: var(--on-deep-soft); margin-bottom: 4px;
}
.pv-text {
  font-family: var(--sans); font-size: 15.5px; line-height: 1.45;
  color: var(--on-deep);
}
.pv-assume {
  font-family: var(--mono); font-size: 11.5px; color: var(--on-deep-soft);
  margin-top: 6px; letter-spacing: .01em;
}
.pv-assume-label { text-transform: uppercase; letter-spacing: .08em; margin-right: 6px; }
/* the two highlighted rows (La fricción / Qué cambia): filled node in
   the on-deep accent, label in the same accent, text upgraded to
   Newsreader 17px -- no icons, the node + typography ARE the
   hierarchy (Parte E). */
/* the last two .hv-stage rows are the ones after the SECOND divider
   ("Lo que ORION concluye") -- selected by class, not nth-of-type,
   since .hv-titlebar/.hv-cut are also <div>s among the same siblings
   and would throw off element-position counting. */
.hv-divider:last-of-type ~ .hv-stage .hv-node {
  background: var(--accent-on-deep); border-color: var(--accent-on-deep);
}
.hv-divider:last-of-type ~ .hv-stage .hv-label { color: var(--accent-on-deep); }
.hv-divider:last-of-type ~ .hv-stage .pv-text {
  font-family: var(--serif); font-size: 17px; line-height: 1.38; color: var(--on-deep);
}
.hv-note { display: none; }

/* ---------------------------------------- audience (section 2) --- */
.audience-panel { padding: 0; display: flex; flex-direction: column; gap: 44px; }
.audience-panel .kicker { margin-bottom: 0; }
.aud-title { margin-bottom: 0; }
.aud-items {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.aud-item {
  font-family: var(--sans); font-weight: 400;
  font-size: 17px; line-height: 1.5; color: var(--ink);
  background: var(--paper); padding: 26px 24px;
  border: none;
}
.aud-closing {
  font-family: var(--sans); font-size: clamp(19px, 2.3vw, 21.5px);
  font-weight: 400; color: var(--ink-soft); max-width: var(--text-col);
  margin: 0;
}
/* ORDEN 16 Parte F: the closing of section 2 is a single column of
   prose -- centered in the container, same 660px reading measure. */
.audience .aud-closing, .audience .lede-emotional {
  margin-left: auto; margin-right: auto; width: 100%;
}
/* ORDEN 9-B: the emotional-arc line, section 2 (light) and section 9
   (dark). Same lede size as .aud-closing/.hero-subhead/.rigor-body --
   no card, no border, no background, no accent color, no icon. The
   <em> (the quoted sentence, section 2 only) switches to the display
   serif, italic; section 9's line has no <em> at all ("sin
   comillas"), so this second rule simply never applies there. */
.lede-emotional {
  font-family: var(--sans); font-size: clamp(19px, 2.3vw, 21.5px);
  font-weight: 400; line-height: 1.5; color: var(--ink-soft);
  max-width: var(--text-col); margin-top: 4px;
}
.lede-emotional em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--ink);
}
.final .lede-emotional { color: var(--on-deep-soft); max-width: 44ch; margin-top: -8px; }
.final .lede-emotional em { color: var(--on-deep); }

/* ------------------------------------------------- cost (alt) --- */
.cost-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 56px); align-items: start;
}
.cost-copy { display: flex; flex-direction: column; gap: 14px; }
.cost-head { grid-column: 1 / -1; }
.cost-head .section-title { margin-bottom: 0; }
.cost-grid { row-gap: 24px; }
.cost-body { font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); max-width: 58ch; }
.cost-body.strong { color: var(--ink); }
.cost-stack { display: flex; flex-direction: column; gap: 7px; }
.cost-rail { display: none; }
.cost-ico { display: none; }
.cost-card {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 11px 16px; background: var(--paper); color: var(--ink-soft);
  display: block;
}
.cost-card.s2 { margin-left: 22px; }
.cost-card.s3 { margin-left: 44px; }
.cost-card.s4 { margin-left: 66px; }
.cost-card.s5 { margin-left: 88px; border-color: var(--accent); }
.cost-card.s5 .cost-lbl { color: var(--accent); }

/* -------------------------------------------- example (light) --- */
.example-panel { padding: 0; background: transparent; border: none; }
.example-head { margin-bottom: 28px; }
.example-head .kicker { margin-bottom: 0; }
.example-title {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 21px; line-height: 1.4; color: var(--ink);
  border-left: 2px solid var(--accent); padding: 4px 0 4px 20px;
  margin: 0; /* ORDEN 18 (R2/R4): full container width, no 660px cap */
}
/* ORDEN 16 Parte D: the story stays on the left (reading measure
   <= 660px); the result box moves to a second column on the right,
   top-aligned with the story's first paragraph (both carry the same
   20px top margin). Stacks below 960px, where the box would get too
   narrow to read well. */
.example-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px); align-items: start;
}
.example-story { max-width: var(--text-col); }
@media (max-width: 960px) {
  .example-grid { grid-template-columns: 1fr; }
}
.example-story { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.example-story p {
  font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}
.example-closing { margin-top: 20px; }
.example-closing .example-result {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0;
  padding: 20px 22px; font-size: 16.5px; line-height: 1.5; color: var(--ink);
}
.cta-note.example-note, .example-panel .cta-note { margin-top: 20px; }

/* -------------------------------------------- how (alt) --- */
.how .kicker { margin-bottom: 0; }
.how .section-title { margin-bottom: 44px; } /* ORDEN 18 (R2/R4): the 20ch cap is gone -- a headline spans the container */
.how-rows {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px;
}
.how-row {
  display: flex; flex-direction: column; gap: 9px;
  grid-template-columns: none; padding: 18px 0 0; border: none;
  border-top: 1px solid var(--line);
}
.how-row:last-of-type { border-bottom: none; }
.how-id { display: block; }
.how-node { display: none; }
.how-num {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; color: var(--accent);
}
.how-row h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.3; }
.how-row p { font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); }

/* -------------------------------------- section 6 (dark, .rigor) --- */
/* ORDEN 16 Parte B: this band used to carry `padding-top: 0` (a
   leftover from an earlier layout) with nothing compensating for it,
   so it started flush against the previous band. It now takes the
   same top padding as every other band (.band group above). */
/* ORDEN 18 (R3): in Spanish the two short paragraphs (left) are much
   shorter than the email card (right) -- centered vertically against
   it, the contract's second way out. .fol-head and .compound-row span
   the full width, alone in their rows, so they are unaffected. */
.fol-inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 56px); align-items: center;
}
.fol-copy { display: flex; flex-direction: column; gap: 20px; }
.fol-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 20px; }
.fol-head .kicker { margin-bottom: 0; }
.fol-copy .kicker { margin-bottom: 0; }
.rigor-title { font-size: clamp(29px, 4.2vw, 44px); line-height: 1.14; }
.rigor-body {
  font-size: clamp(19px, 2.3vw, 21.5px); line-height: 1.5;
  color: var(--on-deep-soft); max-width: 56ch; margin: 0;
}
.fol-inner .compound-row { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 860px) {
  .fol-inner { grid-template-columns: 1fr; }
  .fol-inner .compound-row { margin-top: 44px; }
}

.email-card, .fol-email figure {
  border: 1px solid var(--line-deep); border-radius: var(--card-radius);
  background: var(--deep-2); overflow: hidden; max-width: 560px;
}
.email-kicker {
  padding: 12px 18px; margin: 0; border-bottom: 1px solid var(--line-deep);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--on-deep-soft);
}
.email-body {
  padding: 20px 18px 0; margin: 0;
  font-size: 15.5px; line-height: 1.55; color: var(--on-deep);
}
.email-question {
  padding: 13px 18px 0; margin: 0;
  font-family: var(--serif); font-weight: 400; font-size: 18px;
  color: var(--accent-on-deep);
}
.email-note {
  padding: 13px 18px 0; margin: 0;
  font-size: 15px; line-height: 1.5; color: var(--on-deep-soft);
}
.email-cta {
  display: block; padding: 13px 18px 20px; margin: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-on-deep);
}

.compound-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(29px, 4.2vw, 44px); line-height: 1.14;
  color: var(--on-deep); max-width: 46ch; margin-bottom: 8px;
}
.compound-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: start; gap: 0; margin-top: 8px;
}
.compound-col {
  display: flex; flex-direction: column; gap: 7px;
  border-left: 1px solid var(--line-deep); padding: 18px 20px 0;
}
.compound-col.c1 { border-left: none; padding-left: 0; margin-bottom: 0; }
.compound-col.c2 { margin-bottom: 26px; }
.compound-col.c5 { margin-bottom: 52px; }
.compound-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-deep);
}
.compound-col p { font-size: 15.5px; line-height: 1.45; color: var(--on-deep-soft); }
.compound-col.c5 p { color: var(--on-deep); }
@media (max-width: 700px) {
  .compound-cols { grid-template-columns: 1fr; align-items: stretch; }
  .compound-col { border-left: none; border-top: 1px solid var(--line-deep); padding-left: 0; margin-bottom: 0 !important; }
  .compound-col.c1 { border-top: none; }
}
.compound-bold {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(19px, 2.3vw, 24px); color: var(--on-deep);
  margin-top: 24px; max-width: 40ch;
}
.compound-closing {
  font-size: clamp(19px, 2.3vw, 21.5px); line-height: 1.5;
  color: var(--on-deep-soft); max-width: none; margin-top: 8px;
}

/* ---------------------------------------------- trust (light) --- */
/* ORDEN 17: the evidence-state list is vertically centered against the
   text column on its left (Founder's call, superseding the top
   alignment of ORDEN 14/16 for this one grid). The heading block
   (.trust-head) is alone in its row, so it is unaffected. */
.trust-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 56px); align-items: center;
}
/* ORDEN 16 Parte A: heading block full width on top; below it the
   text column and the evidence-state list share the same top line. */
.trust-grid { row-gap: 28px; }
.trust-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; }
.trust-head .kicker { margin-bottom: 0; }
.trust-head .section-title { margin-bottom: 0; }
.trust-copy { display: flex; flex-direction: column; gap: 16px; }
.trust-sub {
  font-size: 18.5px; line-height: 1.6; color: var(--ink-soft);
  max-width: 56ch; margin: 0;
}
.trust-quote {
  border-left: 2px solid var(--accent); border-radius: 0;
  background: transparent; padding: 4px 0 4px 20px; margin: 4px 0;
  max-width: 56ch;
}
.trust-quote p {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 18px; line-height: 1.4; color: var(--ink);
}
.trust-main {
  font-size: 18.5px; line-height: 1.6; color: var(--ink-soft);
  max-width: 56ch; margin: 0;
}
.ev-states { display: flex; flex-direction: column; gap: 2px; }
.ev-state {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line); border-top: none;
}
.ev-state:last-child { border-bottom: none; }
.ev-state i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--accent); background: transparent;
}
.ev-state span {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.ev-state.confirmed i { background: var(--accent); }
.ev-state.reported i { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.ev-state.inferred i { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); opacity: .7; }
.ev-state.uncertain i { border-style: dashed; opacity: .55; }
.ev-state.conflicting i { border-style: dashed; opacity: .35; }

/* -------------------------------------------- newness (alt) --- */
.newness-panel {
  background: transparent; border: none; border-radius: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px; max-width: var(--text-col);
}
.newness-panel .kicker { margin-bottom: 0; }
/* ORDEN 16 Parte E: two short fact lists beside the existing block,
   same treatment as .ev-states (mono label, hairline-separated rows,
   no card, no background, no icons). */
.newness-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 56px); align-items: center;
  row-gap: 24px;
}
/* ORDEN 18: headline block full width on top; below it, the two short
   bodies (left) are centered vertically against the taller fact lists
   (right) -- contract R3, second way out. */
.newness-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; }
.newness-head .kicker { margin-bottom: 0; }
.newness-head .newness-title { margin-bottom: 0; }
.newness-lists { display: flex; flex-direction: column; gap: 32px; }
.fact-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 4px;
}
.fact-row {
  font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.fact-list .fact-row:last-child { border-bottom: none; }
@media (max-width: 860px) {
  .newness-grid { grid-template-columns: 1fr; }
}
.newness-title { font-size: clamp(29px, 4.2vw, 44px); line-height: 1.14; margin-bottom: 4px; }
.newness-body { font-size: 18.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------- cierre (dark) --- */
.final { padding-top: 0; }
.final-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 56px); align-items: start;
  padding-block: clamp(52px, 6.5vw, 86px);
}
.final-left { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.final-head { grid-column: 1 / -1; }
.final .final-left .lede-emotional { margin-top: 0; }
.final-grid { row-gap: 24px; }
.final h2 { font-size: clamp(29px, 4.2vw, 44px); line-height: 1.14; margin: 0; }
.final-cta-support {
  font-size: 15.5px; color: var(--on-deep-soft); letter-spacing: .01em; margin-top: -10px;
}
.final-cta-support a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.final-right {
  border-left: 1px solid var(--line-deep); padding-left: 48px;
  display: flex; flex-direction: column; gap: 16px;
}
.final-note {
  font-family: var(--serif); font-size: clamp(19px, 2.3vw, 21.5px);
  line-height: 1.5; color: var(--on-deep); max-width: 34ch;
}
.final-flow {
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
  color: var(--on-deep-soft);
}
@media (max-width: 860px) {
  .final-grid { grid-template-columns: 1fr; }
  .final-right { border-left: none; padding-left: 0; border-top: 1px solid var(--line-deep); padding-top: 28px; }
}

/* -------------------------------------------------------- footer --- */
.site-footer { padding: 28px 0; border-top: 1px solid var(--line); background: var(--paper); }
.site-footer .wrap {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-note { font-size: 14px; color: var(--ink-faint); }

.demo-notice { display: none; }
.page-bg { display: none; }
.page-shell {
  background: transparent; box-shadow: none; max-width: none; margin: 0;
}

/* ---------------------------------------------------- responsive --- */
@media (max-width: 860px) {
  .hero-grid, .cost-grid, .fol-inner, .trust-grid { grid-template-columns: 1fr; }
  .aud-items { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .how-rows { grid-template-columns: 1fr; gap: 32px; }
}