/* Atalavia page CSS: only what lives inside a visual (the Vía console, its cards, the panel pictures)
   and the logo. Layout, type, buttons, cards and grids are the kit's (system.css, cards.css, layout.css). */

:root {
  --sign-red: #d62828;
  --ok: #3ecf8e;
  --ok-bg: color-mix(in oklab, #3ecf8e 14%, transparent);
  --red: #ff6b64;
  --red-bg: color-mix(in oklab, #d62828 18%, transparent);
  --map-bg: #0b1017;
  --map-block: #141c28;
  --map-route: #3a5069;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --p-bg: #e9edf3; --p-surface: #dde2ea; --p-ink: #0a0d14; --p-muted: #4c5260;
    --p-accent: #0a0d14; --p-accent-ink: #e9edf3; --p-action: #0a0d14; --p-action-ink: #e9edf3;
    --p-inv-bg: #0a0d14; --p-inv-surface: #131824; --p-inv-ink: #e9edf3; --p-inv-muted: #9aa3b3;
    --p-inv-accent: #5ab9fc; --p-inv-accent-ink: #0a0d14; --p-inv-action: #5ab9fc; --p-inv-action-ink: #0a0d14;
    --ok: #1b7f47; --ok-bg: color-mix(in oklab, #1b7f47 12%, transparent); --red: #b81f1f;
    --map-bg: #c9d3de; --map-block: #e6ebf1; --map-route: #5d6f84;
  }
}
:root[data-theme="light"] {
  --p-bg: #e9edf3; --p-surface: #dde2ea; --p-ink: #0a0d14; --p-muted: #4c5260;
  --p-accent: #0a0d14; --p-accent-ink: #e9edf3; --p-action: #0a0d14; --p-action-ink: #e9edf3;
  --p-inv-bg: #0a0d14; --p-inv-surface: #131824; --p-inv-ink: #e9edf3; --p-inv-muted: #9aa3b3;
  --p-inv-accent: #5ab9fc; --p-inv-accent-ink: #0a0d14; --p-inv-action: #5ab9fc; --p-inv-action-ink: #0a0d14;
  --ok: #1b7f47; --ok-bg: color-mix(in oklab, #1b7f47 12%, transparent); --red: #b81f1f;
  --map-bg: #c9d3de; --map-block: #e6ebf1; --map-route: #5d6f84;
}
.ground-inverse { --ok: #1b7f47; --ok-bg: color-mix(in oklab, #1b7f47 12%, transparent); --red: #b81f1f; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- logo */
.nav__logo, .wm-lockup { display: inline-flex; align-items: center; gap: 10px; }
.at-mark { width: 26px; height: 26px; flex: none; color: var(--ink); }
.at-mark .eye, .at-mark .dash { stroke: var(--logo-hi, var(--accent)); }
.at-mark .dot { fill: var(--logo-hi, var(--accent)); stroke: none; }
.wm { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: .09em; line-height: 1; }
.wm b { font-weight: 600; color: var(--logo-hi, var(--accent)); }
.ground-inverse .wm b, .ground-inverse .at-mark { --logo-hi: color-mix(in oklab, #3d8fd1 100%, #000); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --logo-hi: #1f6fb0; } }

/* language switch */
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; gap: 2px; }
.lang button { border: 0; background: transparent; min-width: 44px; min-height: 36px; padding: 0 10px; border-radius: 999px; font: 500 13px/1 var(--font-mono); color: var(--muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.nav__actions .lang { order: 0; }
@media (max-width: 639px) { .lang button { min-height: 44px; } .nav.is-open .nav__actions .lang { justify-content: center; } }

/* ---------------------------------------------------------------- hero: the Vía console */
.hero__media.hero-console { padding: var(--s-5); display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: color-mix(in oklab, var(--accent) 10%, var(--bg)); }
.hero__media.hero-console::after { display: none; }
@media (max-width: 639px) { .hero__media.hero-console { padding: var(--s-3); } }

.console {
  position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 8%, transparent) inset, 0 40px 80px -30px rgb(0 0 0 / .65), 0 12px 24px -12px rgb(0 0 0 / .5);
  font-size: 15px; line-height: 1.5;
}
.console__bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.console__av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; background: color-mix(in oklab, var(--accent) 16%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }
.console__av .at-mark { width: 20px; height: 20px; }
.console__name { font: 600 16px/1.2 var(--font-text); letter-spacing: -.01em; }
.console__meta { font: 400 13px/1.3 var(--font-mono); color: var(--muted); }
.console__bar > div { min-width: 0; }
.console__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-mono); color: var(--ok); white-space: nowrap; }
.console__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok-bg); animation: vc-live 2.4s ease-out infinite; }
@keyframes vc-live { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.console__log { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.msg { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 100%; }
.msg.bot { align-items: flex-start; }
.msg.user { align-items: flex-end; }
.bubble { overflow-wrap: anywhere; max-width: 92%; }
.msg.bot .bubble { color: var(--ink); }
.msg.user .bubble { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); padding: 8px 14px; border-radius: 16px 16px 4px 16px; }
.bubble.typing { display: inline-flex; gap: 5px; padding: 8px 0; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: vc-dot 1s infinite ease-in-out; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; }
.bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vc-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

.console__chips { flex: none; display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; border-top: 1px solid var(--line); scrollbar-width: none; }
.console__chips::-webkit-scrollbar { display: none; }
.vc-chip { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: 500 14px/1 var(--font-text); white-space: nowrap; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.vc-chip:hover { background: var(--surface); border-color: color-mix(in oklab, var(--ink) 40%, transparent); }
.vc-chip:active { transform: scale(.97); }
.vc-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-chiprow .vc-chip { white-space: normal; text-align: left; min-height: 44px; padding: 8px 14px; }

.console__form { flex: none; display: flex; gap: 8px; padding: 0 16px 16px; align-items: center; }
.console__form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; font: 400 16px/1 var(--font-text); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
.console__form input::placeholder { color: var(--muted); }
.console__form input:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.send { flex: none; width: 48px; height: 48px; border-radius: 12px; border: 0; background: var(--action); color: var(--action-ink); display: grid; place-items: center; cursor: pointer; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.send:hover { filter: brightness(1.1); }
.send:active { transform: scale(.95); }
.send svg { width: 18px; height: 18px; }

@media (max-width: 639px) {
  .console { font-size: 15px; }
  .console__bar { padding: 8px 12px; gap: 10px; }
  .console__log { padding: 12px; }
  .console__chips { padding: 8px 12px; }
  .console__form { padding: 0 12px 12px; }
}

/* ---------------------------------------------------------------- cards inside the chat */
.vc-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vc-t { font: 500 15px/1.3 var(--font-text); }
.vc-tag { font: 500 13px/1 var(--font-mono); padding: 5px 8px; border-radius: 6px; background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--muted); }
.vc-tag.soon { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--ink); }
.vc-note { font-size: 13px; line-height: 1.4; color: var(--muted); }
.plate { font: 500 14px/1 var(--font-mono); letter-spacing: .08em; background: #fff; color: #111; border: 2px solid #111; border-radius: 6px; padding: 3px 8px; }
.livedot { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); font-weight: 500; }
.livedot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: vc-blink 1.6s infinite; }
@keyframes vc-blink { 50% { opacity: .3; } }
.vc-live canvas { width: 100%; height: 168px; border-radius: 10px; background: var(--map-bg); border: 1px solid var(--line); }
.live-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; }
.spd { font: 500 40px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.spd small { font-size: 14px; color: var(--muted); margin-left: 4px; }
.status { font-size: 13px; color: var(--ok); font-weight: 500; margin-top: 4px; }
.vc-live.is-over .status { color: var(--red); }
.sign { width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 7px solid var(--sign-red); color: #111; display: grid; place-items: center; font: 600 26px/1 var(--font-display); font-variant-numeric: tabular-nums; flex: none; }
.vc-live.is-over .sign { animation: vc-pulse .7s infinite; }
@keyframes vc-pulse { 0% { box-shadow: 0 0 0 0 rgba(214, 40, 40, .7); } 100% { box-shadow: 0 0 0 14px rgba(214, 40, 40, 0); } }
.bip { display: inline-flex; align-items: center; gap: 5px; background: var(--sign-red); color: #fff; font: 500 14px/1 var(--font-mono); padding: 7px 10px; border-radius: 8px; opacity: .3; }
.bip svg { width: 16px; height: 16px; }
.vc-live.is-over .bip { opacity: 1; }

.vc-seg { display: grid; grid-template-columns: 1fr 1fr; background: color-mix(in oklab, var(--ink) 7%, transparent); border-radius: 10px; padding: 3px; gap: 3px; }
.vc-seg button { border: 0; background: transparent; border-radius: 8px; font: 500 14px/1 var(--font-text); min-height: 44px; cursor: pointer; }
.vc-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.vc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.vc-row label { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.vc-row.off { opacity: .45; }
input.sw { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); position: relative; margin: 0; flex: none; cursor: pointer; transition: background var(--dur) var(--ease); }
input.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--dur) var(--ease); }
input.sw:checked { background: var(--ok); }
input.sw:checked::after { transform: translateX(18px); }
input.sw:disabled { cursor: not-allowed; }
input.sw:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pills { display: flex; gap: 6px; }
.pills button { border: 1px solid var(--line-strong); background: transparent; border-radius: 8px; padding: 0 10px; min-height: 44px; min-width: 56px; font: 500 14px/1 var(--font-mono); cursor: pointer; }
.pills button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pills button:disabled { cursor: not-allowed; }
.vc-step { display: inline-flex; align-items: center; gap: 6px; }
.vc-step button { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; font: 500 18px/1 var(--font-text); cursor: pointer; }
.vc-step output { font: 500 14px/1 var(--font-mono); min-width: 8ch; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vc-sum { background: color-mix(in oklab, var(--ink) 6%, transparent); border-radius: 8px; padding: 9px 11px; font-size: 14px; line-height: 1.45; }

.ring-row { display: flex; gap: 16px; align-items: center; }
.ring { width: 96px; height: 96px; flex: none; position: relative; }
.ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring .v { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 500 28px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ring .v small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.vc-band { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.vc-band span { font-size: 13px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 8%, transparent); color: var(--muted); }
.vc-band span.on { background: var(--ok-bg); color: var(--ok); }
.evs { display: grid; gap: 6px; font-size: 14px; }
.evs li { display: flex; gap: 8px; align-items: center; }
.evs li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--sign-red); flex: none; }
.evs li.warn::before { background: var(--muted); }

.price-big { font: 500 40px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-big small { font: 400 15px/1.3 var(--font-text); color: var(--muted); margin-left: 8px; white-space: normal; }
.ticks { display: grid; gap: 8px; font-size: 15px; }
.ticks li { display: flex; gap: 8px; align-items: flex-start; }
.ticks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--ok); }
.inst { font-weight: 500; border-top: 1px dashed var(--line-strong); padding-top: 10px; }

.vc-btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--action); color: var(--action-ink); font: 500 15px/1 var(--font-text); cursor: pointer; transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
.vc-btn:hover { filter: brightness(1.08); }
.vc-btn:active { transform: scale(.98); }
.vc-btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.blk-ok { color: var(--ok); font-weight: 500; display: flex; gap: 8px; align-items: center; }
.blk-ok svg { width: 22px; height: 22px; flex: none; }
.twin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hw { display: grid; gap: 10px; counter-reset: s; }
.hw li { display: flex; gap: 10px; font-size: 15px; align-items: flex-start; }
.hw li::before { counter-increment: s; content: counter(s); flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: 500 13px/1 var(--font-mono); display: grid; place-items: center; }

/* ---------------------------------------------------------------- panels: the pictures of the sections */
.map-panel { position: relative; width: 100%; height: 100%; min-height: 360px; border-radius: var(--r-lg); overflow: hidden; background: var(--map-bg); border: 1px solid var(--line-strong); }
.map-panel > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-stat { position: absolute; left: var(--s-5); bottom: var(--s-5); max-width: 280px; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); display: grid; gap: var(--s-1); }
.map-stat b { font: 500 var(--t-stat)/1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.map-stat span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.map-bip { position: absolute; right: var(--s-5); top: var(--s-5); display: inline-flex; align-items: center; gap: 6px; background: var(--sign-red); color: #fff; font: 500 14px/1 var(--font-mono); padding: 9px 12px; border-radius: 10px; }
.map-bip svg { width: 16px; height: 16px; }

.steps-list { counter-reset: st; display: grid; }
.steps-list > li { counter-increment: st; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.steps-list > li:first-child { padding-top: 0; }
.steps-list > li::before { content: counter(st); grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font: 500 14px/1 var(--font-mono); background: color-mix(in oklab, var(--ink) 10%, transparent); }
.steps-list h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -.01em; }
.steps-list p { color: var(--ink); max-width: 52ch; }
.dg-panel { width: 100%; height: 100%; min-height: 420px; position: relative; border-radius: var(--r-lg); background: color-mix(in oklab, var(--ink) 4%, var(--bg)); border: 1px solid var(--line); overflow: hidden; }
.dg-panel > .dg { position: absolute; inset: 0; }

/* bento pictures */
.bento-v { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; }
.bento-v .vc-card { max-width: 380px; }
.mini-map { position: relative; width: 100%; height: 100%; }
.mini-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mini-sign { display: flex; gap: 20px; align-items: center; justify-content: center; }
.mini-sign .sign { width: 96px; height: 96px; font-size: 38px; border-width: 10px; }
.mini-sign .bip { opacity: 1; font-size: 16px; padding: 9px 12px; }
.mini-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.mini-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: color-mix(in oklab, var(--accent) 55%, transparent); }
.mini-bars i.hi { background: var(--accent); }
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini-kpis div { display: grid; gap: 2px; }
.mini-kpis b { font: 500 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.mini-kpis span { font-size: 13px; color: var(--muted); }

/* the WhatsApp phone */
.phone { width: min(100%, 300px); margin-inline: auto; border: 8px solid color-mix(in oklab, var(--ink) 22%, var(--bg)); border-radius: 36px; overflow: hidden; background: #0c1a14; color: #e8f0ea; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); }
.ph-h { background: #12362a; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.ph-h img { width: 28px; height: 28px; flex: none; }
.ph-h b { font-weight: 500; display: block; line-height: 1.15; font-size: 15px; }
.ph-h small { font-size: 13px; opacity: .8; }
.ph-b { padding: 14px 10px 18px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
.wm-b { max-width: 88%; padding: 7px 10px; border-radius: 10px; overflow-wrap: anywhere; }
.wm-b.in { background: #1f2c27; border-top-left-radius: 2px; align-self: flex-start; }
.wm-b.out { background: #1d5a43; border-top-right-radius: 2px; align-self: flex-end; }
.wm-b .t { display: block; font-size: 13px; opacity: .9; text-align: right; font-family: var(--font-mono); margin-top: 2px; }
.wm-b svg { border-radius: 6px; margin-top: 6px; width: 100%; height: auto; }
.rows .rows__value.soon { font: 500 13px/1 var(--font-mono); padding: 6px 9px; border-radius: 6px; background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--ink); align-self: start; white-space: nowrap; }

/* price + form */
.price-card { height: 100%; border-radius: var(--r-lg); padding: var(--s-7); background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); display: flex; flex-direction: column; gap: var(--s-4); justify-content: flex-start; }
.price-card .big { font: var(--display-weight) clamp(44px, 4.4vw, 56px)/1 var(--font-display); letter-spacing: var(--display-tracking-xl); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-card .per { font-size: var(--t-lead); }
.price-card .ins { border-top: 1px solid var(--line-strong); padding-top: var(--s-4); font-weight: 500; }
.price-card .btn { align-self: flex-start; margin-top: var(--s-3); }

.err { color: var(--red); font-size: 14px; }
.err[hidden] { display: none; }
.okbox { border-left: 3px solid var(--ok); background: var(--ok-bg); border-radius: 4px var(--r-sm) var(--r-sm) 4px; padding: 10px 12px; display: grid; gap: 4px; }
.okbox[hidden] { display: none; }
.okbox .ok-l { color: var(--ok); font-weight: 500; }
@media (max-width: 639px) { .price-card { padding: var(--s-5); } }

@media (prefers-reduced-motion: reduce) {
  .console__live::before, .livedot::before, .vc-live.is-over .sign, .bubble.typing i { animation: none !important; }
}

/* static pictures in the bento panels (the real controls live in the chat) */
.sw-s { width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); position: relative; flex: none; }
.sw-s::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.sw-s.on { background: var(--ok); }
.sw-s.on::after { transform: translateX(18px); }
.pill-s { border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px; font: 500 13px/1 var(--font-mono); }
.pill-s.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bento-two { gap: 16px; align-items: center; }
.bento-two .vc-card { flex: 1 1 0; max-width: 300px; }
.bento-v .vc-card { background: var(--bg); }
.map-chip { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); }
.map-chip__v { font: 500 14px/1 var(--font-mono); }
.mini-map { position: absolute; inset: 0; }
.mini-sign .spd { font-size: 34px; }
.wa-wrap { display: grid; place-items: center; }
.field input[aria-invalid="true"] { border-color: var(--red); }
#chat { scroll-margin-top: 96px; }
.footer .lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.nav__logo .at-mark, .footer .nav__logo .at-mark { width: 26px; height: 26px; }
.nav__logo .wm { display: inline-block; }
.console__av .at-mark { width: 20px; height: 20px; }
.hero-facts > div { display: flex; flex-direction: column-reverse; gap: var(--s-1); }
.hero-facts dd { font: 500 28px/1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }

/* compact console so the first answer (the live car) is whole on the first screen */
.console__bar { padding: 10px 14px; }
.console__log { padding: 14px; gap: 10px; }
.vc-card { padding: 12px; gap: 10px; }
.vc-live canvas { height: 132px; }
.spd { font-size: 34px; }
.sign { width: 60px; height: 60px; border-width: 6px; font-size: 22px; }
.console__chips { padding: 8px 14px; }
.console__form { padding: 0 14px 14px; }

.map-stat { top: var(--s-5); bottom: auto; }
.map-bip { top: auto; bottom: var(--s-5); }
.steps-list > li { align-content: start; gap: 0 var(--s-4); }
.steps-list p { margin: var(--s-1) 0 0; }
.wa-wrap { height: 100%; }
.wa-panel { width: 100%; height: 100%; min-height: 360px; display: grid; place-items: center; padding: var(--s-6); border-radius: var(--r-lg); background: color-mix(in oklab, var(--ink) 4%, var(--bg)); border: 1px solid var(--line); }
.price-card { justify-content: center; }

/* Tu voz en cada auto: the editor */
.voice-list { display: grid; gap: var(--s-4, 16px); margin: 0; padding: 0; list-style: none; }
.voice-list h3 { font-size: 18px; line-height: 1.25; margin: 0 0 4px; }
.voice-list p { margin: 0; color: var(--muted); }
.voice-note { margin: var(--s-5, 24px) 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.voice-panel { display: grid; place-items: center; }
.voice-ed { max-width: 628px; width: 100%; padding: 18px; gap: 12px; }
.vc-seg3 { grid-template-columns: repeat(3, 1fr); }
.voice-ed .vc-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ed-field { position: relative; display: grid; gap: 6px; }
.ed-field label { font: 500 13px/1.2 var(--font-text); color: var(--muted); }
.ed-field textarea { min-height: 76px; padding: 10px 14px 26px; resize: none; font: 400 16px/1.4 var(--font-text); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; width: 100%; box-sizing: border-box; }
.ed-field textarea:focus-visible, .voice-ed select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-count { position: absolute; right: 12px; bottom: 8px; font: 500 12px/1 var(--font-mono); color: var(--muted); }
.ed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.voice-ed select { width: 100%; height: 48px; padding: 0 12px; font: 400 16px/1 var(--font-text); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
.ed-play { min-width: 160px; gap: 8px; }
.ed-play svg { width: 18px; height: 18px; flex: none; }
.ed-stage { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--ink) 6%, transparent); }
.ed-top { display: flex; align-items: center; gap: 14px; }
.ed-spk { width: 44px; height: 44px; flex: none; color: var(--ink); }
.ed-spk .r1, .ed-spk .r2 { opacity: .3; transform-origin: 24px 24px; }
.is-speaking .ed-spk .r1 { animation: ed-ring 1.2s ease-out infinite; }
.is-speaking .ed-spk .r2 { animation: ed-ring 1.2s ease-out .3s infinite; }
@keyframes ed-ring { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: .15; transform: scale(1.1); } }
.ed-wave { flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; gap: 3px; }
.ed-wave i { flex: 1; min-width: 2px; height: 100%; border-radius: 2px; background: var(--accent); transform: scaleY(.1); transform-origin: center; opacity: .45; }
.is-speaking .ed-wave i { animation: ed-bar .9s ease-in-out infinite; opacity: 1; }
@keyframes ed-bar { 0%, 100% { transform: scaleY(.15); } 50% { transform: scaleY(1); } }
.ed-sub { min-height: 2.8em; font-size: 15px; line-height: 1.4; margin: 0; }
.ed-sub.is-idle { color: var(--muted); }
.ed-rest { color: var(--muted); }
.ed-done { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .is-speaking .ed-wave i, .is-speaking .ed-spk .r1, .is-speaking .ed-spk .r2 { animation: none; } .is-speaking .ed-wave i { transform: scaleY(.6); } }
@media (max-width: 639px) { .ed-row { grid-template-columns: 1fr; } .ed-play { width: 100%; } .voice-ed { padding: 14px; } }

/* round-two fixes */
.btn--secondary { box-shadow: inset 0 0 0 1px var(--ink); }
.voice-list p { color: color-mix(in oklab, var(--ink) 84%, var(--bg)); }
.voice-panel { display: block; align-self: start; min-width: 0; }
.voice-ed { min-width: 0; }
#voz .grid.fill { align-items: start; }

/* ---------------------------------------------------------------- fix: sections grow to their content on narrow screens */
@media (max-width: 1279px) {
  main > :is(section, .section):not(.hero), footer.closing { height: auto; }
  main > :is(section, .section):not(.hero) > :is(.wrap, .container), footer.closing > .wrap { height: auto; flex: 0 0 auto; }
  main > :is(section, .section):not(.hero) > .wrap > .fill, .group > .fill { flex: 0 0 auto; min-height: auto; }
}
@media (max-width: 1023px) {
  .grid.fill { height: auto; }
  .map-panel, .dg-panel, .wa-panel { height: auto; min-height: 360px; }
  .dg-panel { min-height: 420px; }
}
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero), footer.closing { min-height: 100svh; --h: 1; }
  main > :is(section, .section).g2, main > :is(section, .section).g2m, footer.closing.g2m { --hm: 1; }
  main > :is(section, .section).g2 > .wrap, main > :is(section, .section).g2m > .wrap, footer.closing.g2m > .wrap { display: flex; flex-direction: column; row-gap: var(--s-6); }
  main > :is(section, .section).g2 > .wrap > *, main > :is(section, .section).g2 > .wrap > .group { align-self: stretch; }
  html, body { overflow-x: clip; }
}

/* ---------------------------------------------------------------- fix: #incluye as one grid on tablets / small laptops (stays within two screens) */
@media (min-width: 640px) and (max-width: 1279px) {
  #incluye > .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: none; column-gap: var(--gutter); row-gap: var(--card-gap); align-content: start; }
  #incluye > .wrap > .group, #incluye > .wrap > .grid, #incluye > .wrap > .group > .grid { display: contents; }
  #incluye .section-head { grid-column: 1 / -1; }
  #incluye .card { grid-column: auto / span 6; align-self: stretch; }
  #incluye .card.inc-wide { grid-column: 1 / -1; }
  #incluye .panel { --p-h: 240px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #incluye .card { grid-column: auto / span 4; }
  #incluye .card.inc-wide { grid-column: auto / span 8; }
  #incluye .panel { --p-h: 270px; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav--centre .nav__bar { gap: var(--s-3); grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav--centre .nav__link { font-size: 14px; padding: 0 var(--s-1); }
  .nav--centre .nav__link::before { left: var(--s-1); right: var(--s-1); }
  .nav--centre .nav__actions { gap: var(--s-2); }
  .nav--centre .lang button { min-width: 34px; padding: 0 6px; }
  .nav--centre .nav__actions .btn { padding-inline: var(--s-4); }
}

/* ---------------------------------------------------------------- fix: phone hero, the Vía chat gets room */
@media (max-width: 639px) {
  main > .hero { height: auto; min-height: 100svh; }
  main > .hero > .wrap { height: auto; }
  .hero--split .hero__media { flex: none; min-height: 600px; height: 600px; }
  .console__log { scroll-padding: 0; }
}

/* ---------------------------------------------------------------- #probar: words + what happens next beside the form */
.probar-text .section-head { margin-bottom: var(--s-6); }
.probar-next { margin: 0 0 var(--s-4); font: 500 13px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.probar-text .steps-list { margin-bottom: var(--s-5); }
.probar-text .steps-list > li:last-child { border-bottom: 0; }

/* AI Shield panel: its two cards sit side by side where there is room, stacked and in flow on a phone (the panel grows) */
.bento-v.bento-two { display: flex; flex-direction: row; justify-content: center; align-items: center; }
@media (max-width: 639px) {
  .bento-v.bento-two { position: static; flex-direction: column; align-items: stretch; padding: 14px; }
  .bento-two .vc-card { flex: none; max-width: none; }
  #incluye .panel:has(.bento-two) { min-height: 0; }
}
#contact-form { align-self: start; align-content: start; }

/* AI Shield pair: equal heights, tops aligned, centred in the panel */
@media (min-width: 640px) {
  .bento-v.bento-two { inset: auto 20px; top: 50%; transform: translateY(-50%); padding: 0; align-items: stretch; }
  .bento-two .vc-card { justify-content: flex-start; }
}
/* 1024-1279: the small speed card fits its 270px panel */
@media (min-width: 1024px) and (max-width: 1279px) {
  .mini-sign { gap: 10px; }
  .mini-sign .sign { width: 72px; height: 72px; font-size: 28px; border-width: 8px; }
  .mini-sign .spd { font-size: 28px; }
  .mini-sign .bip { padding: 7px 9px; font-size: 14px; }
}

/* ================================================================ UX review pass */

/* 1. price: a compact card, one primary button */
.price-card { height: auto; align-self: start; justify-content: flex-start; padding: var(--s-6); gap: var(--s-3); }
.price-card .ins { padding-top: var(--s-3); }
.price-card .btn { margin-top: var(--s-2); }
@media (max-width: 639px) { .price-card { padding: var(--s-5); max-width: none; } }

/* 2. hero stats: value row on one line, labels on the next, same size */
.hero-facts { align-items: start; }
.hero-facts > div { display: grid; grid-template-rows: auto 1fr; gap: var(--s-2); align-content: start; }
.hero-facts dd { grid-row: 1; font: 500 28px/1 var(--font-display); letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; white-space: nowrap; margin: 0; }
.hero-facts dt { grid-row: 2; line-height: 1.35; }

/* 3. dark surfaces for the pictures of #incluye and #como (same on a light or dark page) */
#incluye .panel:not([data-fx], .panel--device), .dg-panel {
  --bg: #0a0d14; --surface: #131824; --ink: #e9edf3; --muted: #a1aabb; --accent: #5ab9fc; --accent-ink: #0a0d14; --card: #131824;
  --line: color-mix(in oklab, #e9edf3 11%, transparent); --line-strong: color-mix(in oklab, #e9edf3 20%, transparent);
  --map-bg: #0b1017; --map-block: #141c28; --map-route: #3a5069; --ok: #3ecf8e; --ok-bg: color-mix(in oklab, #3ecf8e 14%, transparent); --red: #ff6b64;
  --dg-ink: #e9edf3;
  color: var(--ink);
}
#incluye .panel:not([data-fx], .panel--device) {
  background-color: #0e131d;
  background-image:
    radial-gradient(70% 90% at 12% 0%, color-mix(in oklab, #5ab9fc 15%, transparent), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in oklab, #5ab9fc 9%, transparent), transparent 72%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #e9edf3 10%, transparent);
}
.dg-panel { background: #0e131d radial-gradient(60% 70% at 50% 40%, color-mix(in oklab, #5ab9fc 10%, transparent), transparent 75%); border: 1px solid color-mix(in oklab, #e9edf3 14%, transparent); }
#incluye .panel { --p-h: 250px; }
#incluye .card:not(.inc-wide) .panel { --p-h: 230px; }
.bento-v .vc-card { max-width: 420px; }
.mini-sign .sign { width: 88px; height: 88px; font-size: 34px; border-width: 9px; }
.mini-sign .spd { font-size: 32px; }
.mini-bars { height: 120px; }
.pill-s { white-space: nowrap; min-width: 54px; text-align: center; }
.pills { flex-wrap: nowrap; }
.vc-row:has(.pills) { flex-wrap: wrap; row-gap: 6px; }
@media (min-width: 640px) and (max-width: 1279px) {
  #incluye .panel { --p-h: 250px; }
  #incluye .card:not(.inc-wide) .panel { --p-h: 230px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #incluye .panel { --p-h: 270px; }
  #incluye .card:not(.inc-wide) .panel { --p-h: 250px; }
}

/* 5. voice editor: demo plate select, inline message */
.ed-field[hidden] { display: none; }
.ed-plate select { max-width: 220px; }
.ed-sub.is-err { color: var(--red); font-weight: 500; }

/* 6. Lo que viene: one label, a compact list */
.soon-box { align-self: center; }
.soon-label { margin: 0 0 var(--s-4); }
.rows--soon > li { padding-block: var(--s-3); grid-template-columns: minmax(0, 1fr); }
.rows--soon > li:first-child { padding-top: var(--s-3); }
.rows--soon .rows__name { font-weight: 400; display: flex; align-items: center; gap: var(--s-3); }
.rows--soon .rows__name::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7; }
.rows--soon > li:first-child .rows__name { font-weight: 500; }

/* 8. #probar: errors reserve their own line, the note is a neutral box */
#probar .grid { align-items: start; }
#contact-form { align-items: start; row-gap: 0; }
#contact-form .field { position: relative; padding-bottom: 24px; }
#contact-form .field .err { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 13px; line-height: 18px; font-weight: 400; }
#contact-form > .btn-row { margin-top: var(--s-2); }
.demo-note { border-left: 3px solid var(--line-strong); background: color-mix(in oklab, var(--ink) 6%, transparent); border-radius: 4px var(--r-sm) var(--r-sm) 4px; padding: 10px 12px; margin: var(--s-3) 0 0; font-size: 14px; line-height: 1.45; }
.demo-note[hidden] { display: none; }
.probar-text .section-head { margin-bottom: var(--s-5); }

/* 9. chips row: right-edge fade while there is more to scroll (the rule above it moves to the log so the fade does not cut it) */
.console__chips { border-top: 0; --fade: 48px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent); }
.console__chips.is-end { -webkit-mask-image: none; mask-image: none; }
.console__log { border-bottom: 1px solid var(--line); }

/* 10. chat price card: price on one line, "por auto por mes" under it */
.price-big { display: grid; gap: 4px; justify-items: start; }
.price-big small { margin-left: 0; display: block; font-size: 14px; }

/* 12. phone: tap targets in the footer, air above the second row of #incluye */
@media (max-width: 639px) {
  .footer__col a { display: inline-flex; align-items: center; min-height: 44px; }
  #incluye > .wrap > .group + .grid { margin-top: var(--s-5); }
  #incluye .group .grid > .card + .card { margin-top: var(--s-5); }
}

/* 13. small grey text must reach 4.5:1 */
.console__meta, .vc-note, .ed-field label, .probar-next, .muted, .voice-note, .voice-list p, .ed-count { color: color-mix(in oklab, var(--ink) 74%, var(--bg)); }

/* 7. closing button: its own width */
.closing__cta .btn--xl { width: auto; min-width: min(100%, 360px); padding-inline: var(--s-7); }
@media (max-width: 639px) { .closing__cta .btn--xl { width: 100%; padding-inline: var(--s-4); } }

/* 3b. desktop: the pictures keep a set height (not a whole screen) and their mocks are drawn larger */
@media (min-width: 1280px) {
  #incluye .panel { flex: none; --p-h: 410px; }
  #incluye .card:not(.inc-wide) .panel { --p-h: 370px; }
  #incluye .bento-v .vc-card { zoom: 1.2; }
}

/* "AI" with a serifed I so it never reads as "Al" */
.ai { font-family: var(--font-mono); font-weight: inherit; letter-spacing: -.02em; }

/* 7b. the kit stretches the close button across the wrap; here it keeps its own width */
.closing__cta.close--type > .btn--xl { align-self: start; width: auto; }
@media (max-width: 639px) { .closing__cta.close--type > .btn--xl { align-self: stretch; width: 100%; } }

/* 8b. #probar: the price line closes the form column so both columns end together */
.probar-recap { display: grid; gap: 2px; margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-weight: 400; font-size: 16px; }
.probar-recap__big { font: 500 28px/1.1 var(--font-display); letter-spacing: var(--display-tracking); }
.probar-recap__inst { color: color-mix(in oklab, var(--ink) 74%, var(--bg)); font-size: 14px; margin-top: var(--s-1); }

/* review follow-up: fill what the compact price card leaves, taller pictures on tablets */
@media (min-width: 1024px) {
  #precio .rows > li { padding-block: var(--s-5); font-size: var(--t-lead); }
  #precio .rows > li:first-child { padding-top: var(--s-2); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #incluye .panel { --p-h: 320px; }
  #incluye .card:not(.inc-wide) .panel { --p-h: 300px; }
}

/* 8c. desktop: a little more air so the two columns of #probar end near each other */
@media (min-width: 1280px) {
  #probar .probar-text .steps-list > li { padding-block: var(--s-5); }
  #probar .probar-text .steps-list > li:first-child { padding-top: 0; }
  #probar .probar-text .section-head { margin-bottom: var(--s-7); }
  #contact-form .field { padding-bottom: 32px; }
  #contact-form .field .err { bottom: 6px; }
  #contact-form .probar-recap { margin-top: var(--s-7); padding-top: var(--s-6); }
}

/* ================================================================ wide screens (1440 and up)
   At 1440 nothing changes (80px gutters, 1280 column, 72px h1). From there the column grows with the
   screen (the same gutter on both sides, so the edges stay equal) and the type, the console and the
   panel mocks grow with it, so a 1920x1080 or 2560x1440 first screen is as full as the 1440 one. */
@media (min-width: 1440px) {
  :root {
    --gut: clamp(80px, 5vw, 128px);
    --container: 2160px;
    --ly-h1: clamp(72px, 4.6vw, 120px);          /* 72 / 88 / 118 at 1440 / 1920 / 2560 */
    --ly-lead: clamp(20px, 1.25vw, 30px);
    --t-h2: clamp(48px, 3.2vw, 80px);
    --t-h3: clamp(28px, 1.9vw, 44px);
    --t-lead: clamp(20px, 1.25vw, 30px);
    --t-card: clamp(20px, 1.25vw, 30px);
    --t-body: clamp(16px, .6vw + 7.4px, 22px);
    --t-small: clamp(14px, .45vw + 7.5px, 18px);
    --t-label: clamp(13px, .4vw + 7.2px, 16px);
    --t-stat: clamp(38px, 2.6vw, 64px);
    --head-gap: clamp(48px, 3.4vw, 80px);
  }
  .hero-facts dd, .probar-recap__big { font-size: clamp(28px, 1.95vw, 48px); }
  .hero-facts dt { font-size: var(--t-small); }
  .hero__kicker { font-size: var(--t-small); }
}
@media (min-width: 1680px) {
  :root { --nav: 80px; --btn-h: 52px; --padt: 136px; --padb: 80px; --hgap: 56px; --hpadb: 72px; }
  .nav__actions .btn { font-size: 16px; }
  .nav__link { font-size: 16px; }
  .lang button { font-size: 14px; min-height: 40px; min-width: 48px; }
  .wm { font-size: 22px; }
  .console { zoom: 1.2; }
}
@media (min-width: 1920px) {
  .console { zoom: 1.3; }
}
@media (min-width: 2200px) {
  :root { --nav: 92px; --btn-h: 60px; --padt: 160px; --padb: 96px; --hgap: 72px; --hpadb: 88px; }
  .nav__link, .nav__actions .btn { font-size: 18px; }
  .lang button { font-size: 16px; min-height: 46px; min-width: 56px; }
  .wm { font-size: 26px; }
  .console { zoom: 1.65; }
}

/* wide screens: the mocks and panels grow with the column */
@media (min-width: 1440px) {
  .voice-ed { max-width: none; }
  .voice-list h3 { font-size: var(--t-card); }
  .voice-list p, .steps-list p { font-size: var(--t-body); }
  .voice-note, .vc-note { font-size: var(--t-small); }
  .phone { width: min(100%, 300px); }
}
@media (min-width: 1680px) {
  #incluye .panel { --p-h: 470px; }
  #incluye .card:not(.inc-wide) .panel { --p-h: 420px; }
  #incluye .bento-v .vc-card { zoom: 1.4; }
  .voice-ed { zoom: 1.15; }
  .phone { zoom: 1.3; }
  .map-stat { max-width: 340px; }
  .dg-panel, .map-panel, .wa-panel { min-height: 460px; }
}
@media (min-width: 2200px) {
  #incluye .panel { --p-h: 600px; }
  #incluye .card:not(.inc-wide) .panel { --p-h: 540px; }
  #incluye .bento-v .vc-card { zoom: 1.75; }
  .voice-ed { zoom: 1.5; }
  .phone { zoom: 1.65; }
  .map-stat { max-width: 440px; }
  .dg-panel, .map-panel, .wa-panel { min-height: 640px; }
}

/* four languages: in the footer's narrow column the switch sits in two rows until the column fits it */
@media (min-width: 640px) and (max-width: 1439px) {
  .footer__col .lang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; max-width: 100%; }
}