/* Agent C: transitions, compat, problema, coste, expediente, precio, FAQ, footer */

.lead { font-size: 18px; line-height: 1.55; color: var(--tone-6); }
.section--dark .lead { color: var(--tone-3); }

/* ── Transitions: canvas drawn by sections.js; stepped gradient is the no-JS fallback ── */
/* data-from / data-to name a token: "tone-9", "tone-1" or "bg" (the legacy hexes #0A0B0C / #FEFEFE mean tone-9 / bg).
   --from / --to carry them into CSS for the fallbacks below. */
.trans { --from: var(--tone-9); --to: var(--bg); position: relative; z-index: 1; height: 88px; width: 100%; overflow: hidden; }
/* the band reaches 1 px into the sections on both sides (its first and last rows are their colours), so where a
   section edge falls between device pixels the two never blend into a seam with the page behind */
main > .trans { margin-block: -1px; }
.trans:is([data-from="bg"], [data-from="#FEFEFE"]) { --from: var(--bg); }
.trans[data-from="tone-1"] { --from: var(--tone-1); }
.trans:is([data-to="tone-9"], [data-to="#0A0B0C"]) { --to: var(--tone-9); }
.trans[data-to="tone-1"] { --to: var(--tone-1); }
/* white and grey are close: a shorter, two-tone dissolve */
.trans:is([data-from="bg"][data-to="tone-1"], [data-from="tone-1"][data-to="bg"]) { height: 56px; }
.trans canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
/* once the canvas is drawn, only flat colours sit behind it: the top half is the section above and the bottom
   half the section below, so sub-pixel edges never show the stepped fallback or the white page */
.trans:has(canvas[data-done]) { background: linear-gradient(var(--from) 50%, var(--to) 50%) !important; }
/* no JS: dark to light steps through the palette's own tones (tone-9 … tone-2, then bg or tone-1), like drawBand;
   white to grey is a plain split */
.trans { background: linear-gradient(var(--from) 50%, var(--to) 50%); }
.trans:is([data-from="tone-9"], [data-from="#0A0B0C"]) {
  background: linear-gradient(to bottom,
    var(--tone-9) 0% 15.2%,
    var(--tone-8) 15.2% 27.7%,
    var(--tone-7) 27.7% 37.2%,
    var(--tone-6) 37.2% 45.8%,
    var(--tone-5) 45.8% 54.2%,
    var(--tone-4) 54.2% 62.8%,
    var(--tone-3) 62.8% 72.3%,
    var(--tone-2) 72.3% 84.8%,
    var(--to) 84.8% 100%);
}
.trans:is([data-to="tone-9"], [data-to="#0A0B0C"]) {
  background: linear-gradient(to bottom,
    var(--from) 0% 15.2%,
    var(--tone-2) 15.2% 27.7%,
    var(--tone-3) 27.7% 37.2%,
    var(--tone-4) 37.2% 45.8%,
    var(--tone-5) 45.8% 54.2%,
    var(--tone-6) 54.2% 62.8%,
    var(--tone-7) 62.8% 72.3%,
    var(--tone-8) 72.3% 84.8%,
    var(--tone-9) 84.8% 100%);
}

/* ── Shared section scaffolding ── */
main > section[id], #pie { scroll-margin-top: 72px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: lowercase; }
.eyebrow__num { color: var(--ink); font-weight: 500; }
.section--dark .eyebrow__num { color: var(--bg); }
.eyebrow__dot { width: 6px; height: 6px; background: var(--ok); flex: none; }
.section--dark .eyebrow__dot { background: var(--ok-bright); }
.shead { display: flex; flex-direction: column; gap: 16px; }
.shead h2, .coste__text h2, .pie__copy h2 {
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.06; letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance;
}
.shead .lead { max-width: 560px; }
.shead--split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 64px; row-gap: 20px; align-items: end; }
.shead--split .eyebrow { grid-column: 1 / -1; }
.shead--split h2 { max-width: 14ch; }
.shead--center { align-items: center; text-align: center; }
.shead--center h2 { max-width: none; }
.shead--center .lead { max-width: 640px; text-wrap: balance; }
.mono { font-family: var(--font-code); font-size: 0.9em; }

/* Buttons: square, 1px, no radius */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border: 1px solid transparent;
  font: 500 15px/1 var(--font-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--line { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.btn--solid { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.btn--solid:hover { background: var(--tone-2); border-color: var(--tone-2); }

.tag {
  display: inline-block; flex: none; min-width: 88px; padding: 3px 8px; border: 1px solid currentColor;
  font: 500 11px/1.3 var(--font-code); text-align: center; letter-spacing: .02em;
}
.tag--stop { color: var(--stop); }
.tag--ok { color: var(--ok); }

/* ── Compatibles ── */
.compat { padding: 40px 0 var(--space-9); }
.compat__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.compat__head h2 { color: var(--bg); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }
.compat__grid {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-left: 1px solid var(--tone-7); border-top: 1px solid var(--tone-7);
}
.compat__grid li {
  height: 136px; display: flex; align-items: center; justify-content: center; gap: 14px;
  border-right: 1px solid var(--tone-7); border-bottom: 1px solid var(--tone-7);
  font-size: 19px; color: var(--tone-2); transition: background .15s, color .15s;
}
.compat__grid li:hover { background: var(--tone-8); color: var(--bg); }
.compat__grid svg { width: 28px; height: 28px; flex: none; fill: var(--bg); }
.compat__grid .compat__more:hover { background: transparent; color: var(--tone-2); }
.compat__dots { display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 28px; height: 28px; flex: none; }
.compat__dots i { width: 6px; height: 6px; background: var(--bg); }

/* ── 01 El problema ── */
.problema { padding: var(--space-9) 0; }
/* headline and lead sit side by side, the lead's last line on the headline's last baseline */
.problema__head {
  display: grid; grid-template-columns: auto minmax(0, 460px); justify-content: start;
  column-gap: 72px; row-gap: 20px; align-items: last baseline;
}
.problema__head .eyebrow { grid-column: 1 / -1; }
.problema__head h2 { max-width: 14ch; }
.problema__head .lead { font-size: 20px; color: var(--tone-7); max-width: none; }

/* two scenes: the same three visitors meet a brick wall (hoy) or a door (con Open2Agents) */
.scenes { margin-top: 64px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.scene { display: flex; flex-direction: column; border: 1px solid var(--tone-3); background: var(--bg); }
.scene--door { }
.scene__head { padding: 28px 32px 24px; }
.scene__k { font: 500 12px/1.4 var(--font-code); color: var(--tone-5); }
.scene--door .scene__k { color: var(--ok); }
.scene__h { margin-top: 8px; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.scene__stage { position: relative; border-top: 1px solid var(--tone-2); }
.scene--door .scene__stage { border-top-color: var(--tone-3); }
.scene__shop {
  padding: 10px 16px 0; background: var(--tone-1);
  font: 500 11px/1.4 var(--font-code); letter-spacing: .04em; text-transform: uppercase; color: var(--tone-5);
}

/* lanes share rows through subgrid so names and outcomes line up across the three visitors */
.lanes {
  --zone: 132px; --sprite: 72px;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: var(--zone) 24px var(--zone) auto auto;
}
.lane { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; justify-items: center; min-width: 0; }
.lane__in { justify-self: stretch; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; background: var(--tone-1); }
.lane__out { position: relative; justify-self: stretch; display: flex; align-items: flex-start; justify-content: center; padding-top: 10px; }
.lane__fig { display: inline-flex; align-items: flex-end; gap: 2px; position: relative; z-index: 1; }
.lane .sprite { width: var(--sprite); }
.lane__face { position: relative; display: inline-block; line-height: 0; }
/* the neutral face a robot walks in with; hidden at rest, the outcome face (.lane__now) shows */
.lane__face .lane__was { position: absolute; left: 0; top: 0; opacity: 0; }
.lane .lane__pkg { width: 30px; margin-bottom: 22px; }

/* the gate: a strip of pixel bricks (mask tile 24 x 16, 2 px mortar); --gap and --door cut an opening in it */
.lane__gate { position: relative; justify-self: stretch; }
.lane__gate::before {
  content: ""; position: absolute; inset: 0; background: var(--tone-6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M0 0h22v6H0zM0 8h10v6H0zM12 8h12v6H12z'/%3E%3C/svg%3E") 0 1px / 24px 16px repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Cpath d='M0 0h22v6H0zM0 8h10v6H0zM12 8h12v6H12z'/%3E%3C/svg%3E") 0 1px / 24px 16px repeat;
}
.lane__gate i {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 76px; margin-left: -38px;
  background: var(--bg); border: solid var(--tone-7); border-width: 0 4px;
}
.lane__gate--door i { border-color: var(--ok); }
/* the door leaf, swung open into the shop */
.lane__gate--door i::after { content: ""; position: absolute; right: -4px; bottom: 100%; width: 4px; height: 36px; background: var(--ok); }
/* impact: a burst of red pixels under the wall, only while the visitor bumps into it */
.lane__hit {
  position: absolute; left: 50%; top: 100%; width: 4px; height: 4px; margin: 2px 0 0 -2px; opacity: 0; z-index: 2;
  background: var(--stop);
  box-shadow: -12px 4px 0 var(--stop), 12px 4px 0 var(--stop), -22px 0 0 var(--stop), 22px 0 0 var(--stop), -6px 10px 0 var(--stop), 6px 10px 0 var(--stop);
}

.lane__who { padding: 16px 12px 0; text-align: center; font-size: 16px; line-height: 1.3; color: var(--tone-8); text-wrap: balance; }
.lane__res {
  margin: 10px 0 0; padding: 4px 10px; border: 1px solid currentColor; align-self: start;
  font: 500 12px/1.4 var(--font-code); white-space: nowrap;
}
.lane__res--ok { color: var(--ok); }
.lane__res--stop { color: var(--stop); }
.lane__res--loss { color: var(--bg); background: var(--stop); border-color: var(--stop); }
.lane__res--sale { color: var(--bg); background: var(--ok); border-color: var(--ok); }

.scene__take {
  margin-top: 28px; padding: 20px 32px 24px; border-top: 1px solid var(--tone-2);
  display: flex; align-items: center; gap: 12px;
  font: 500 22px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--ink);
}
.scene--door .scene__take { border-top-color: var(--tone-3); }
.scene__take::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--stop); }
.scene--door .scene__take::before { background: var(--ok); }

/* the door's scanner (con Open2Agents): corner brackets in front of the gate, a beam that sweeps the visitor.
   At rest the frame stays: green where the agent was let in, red where the scraper stands. */
.lane__scan {
  position: absolute; z-index: 2; top: 4px; left: 50%; transform: translateX(-50%);
  width: calc(var(--sprite) + 20px); height: calc(var(--sprite) * 44 / 30 + 12px);
  color: var(--ok);
  --c: linear-gradient(currentColor, currentColor);
  background:
    var(--c) top left / 12px 3px, var(--c) top left / 3px 12px,
    var(--c) top right / 12px 3px, var(--c) top right / 3px 12px,
    var(--c) bottom left / 12px 3px, var(--c) bottom left / 3px 12px,
    var(--c) bottom right / 12px 3px, var(--c) bottom right / 3px 12px;
  background-repeat: no-repeat;
}
.lane--sale .lane__scan { width: calc(var(--sprite) * 1.42 + 24px); }
.lane--stop .lane__scan { color: var(--stop); }
.lane__beam {
  position: absolute; left: 3px; right: 3px; top: 0; height: 3px; opacity: 0; background: var(--ok);
  box-shadow: 0 -3px 0 color-mix(in srgb, var(--ok) 40%, transparent), 0 -6px 0 color-mix(in srgb, var(--ok) 15%, transparent);
}
/* closed door leaf, only seen while the agent is being scanned */
.lane__gate--door i::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: var(--ok); opacity: 0; }

/* walk-in, once on scroll-in (sections.js arms .rv--walk; reduced motion / no JS = everyone already in place).
   The right scene waits for the left one on wide screens, where both are seen together. */
.lane.rv--walk { opacity: 1; transform: none; transition: none; --walk-delay: calc(var(--walk-base, 0ms) + var(--rv-i, 0) * 240ms); }
.scene--door .lane.rv--walk { --walk-base: 1100ms; }
.lane.rv--walk .lane__fig, .lane.rv--walk .lane__res { opacity: 0; }
.lane--pass.rv--walk.is-in .lane__fig { animation: lane-pass 1100ms steps(11, end) var(--walk-delay) both; }
.lane--stop.rv--walk.is-in .lane__fig { animation: lane-bump 1100ms steps(4, end) var(--walk-delay) both; }
.lane--stop.rv--walk.is-in .lane__hit { animation: lane-hit 1100ms steps(1, end) var(--walk-delay) both; }
.lane.rv--walk.is-in .lane__res { animation: lane-res 240ms steps(3, end) calc(var(--walk-delay) + var(--res-at, 1000ms)) both; }
@keyframes lane-pass {
  0% { opacity: 0; transform: translateY(calc(var(--zone) + 84px)); }
  10% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes lane-bump {
  0% { opacity: 0; transform: translateY(56px); }
  12% { opacity: 1; }
  52% { transform: translateY(-8px); }
  60% { transform: translateY(-8px); }
  74% { transform: translateY(12px) translateX(-3px); }
  86% { transform: translateY(4px) translateX(3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lane-hit { 0%, 52% { opacity: 0; } 54%, 76% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes lane-res { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: none; } }
/* faces: neutral while walking, the outcome face from the moment of the outcome (wall hit, scan result) */
.lane.rv--walk.is-in .lane__was { animation: lane-was 1100ms steps(1, end) var(--walk-delay) both; }
.lane.rv--walk.is-in .lane__now { animation: lane-now 1100ms steps(1, end) var(--walk-delay) both; }
.lane--scan.rv--walk.is-in .lane__was { animation-duration: var(--scan-dur); animation-name: lane-was-scan; }
.lane--scan.rv--walk.is-in .lane__now { animation-duration: var(--scan-dur); animation-name: lane-now-scan; }
.lane--sale.lane--scan.rv--walk { --scan-dur: 2400ms; }
.lane--stop.lane--scan.rv--walk { --scan-dur: 2200ms; }
@keyframes lane-was { 0%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes lane-now { 0%, 51% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes lane-was-scan { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes lane-now-scan { 0%, 54% { opacity: 0; } 55%, 100% { opacity: 1; } }
/* scanned lanes: walk up to the scanner, get swept, then the door opens (agent) or the frame trips red and the
   scraper bounces off the wall */
.lane--scan.rv--walk { --res-at: 2300ms; }
.lane--sale.rv--walk .lane__gate--door i::before { opacity: 1; }
.lane--sale.rv--walk .lane__gate--door i::after { opacity: 0; }
.lane--sale.lane--scan.rv--walk.is-in .lane__fig { animation: lane-scan-pass 2400ms steps(5, end) var(--walk-delay) both; }
.lane--sale.rv--walk.is-in .lane__beam { animation: lane-beam 2400ms steps(8, end) var(--walk-delay) both; }
.lane--sale.rv--walk.is-in .lane__scan { animation: lane-scan-ok 2400ms steps(1, end) var(--walk-delay) both; }
.lane--sale.rv--walk.is-in .lane__gate--door i::before { animation: lane-door-shut 2400ms steps(1, end) var(--walk-delay) both; }
.lane--sale.rv--walk.is-in .lane__gate--door i::after { animation: lane-door-open 2400ms steps(1, end) var(--walk-delay) both; }
.lane--stop.lane--scan.rv--walk.is-in .lane__fig { animation: lane-scan-bump 2200ms steps(4, end) var(--walk-delay) both; }
.lane--stop.lane--scan.rv--walk.is-in .lane__beam { animation: lane-beam 2200ms steps(8, end) var(--walk-delay) both; }
.lane--stop.lane--scan.rv--walk.is-in .lane__scan { animation: lane-scan-trip 2200ms steps(1, end) var(--walk-delay) both; }
.lane--stop.lane--scan.rv--walk.is-in .lane__hit { animation: lane-hit-late 2200ms steps(1, end) var(--walk-delay) both; }
@keyframes lane-scan-pass {
  0% { opacity: 0; transform: translateY(calc(var(--sprite) * 44 / 30 + 90px)); }
  8% { opacity: 1; }
  30% { transform: translateY(calc(var(--sprite) * 44 / 30 + 40px)); }
  60% { transform: translateY(calc(var(--sprite) * 44 / 30 + 40px)); }
  100% { opacity: 1; transform: none; }
}
@keyframes lane-scan-bump {
  0% { opacity: 0; transform: translateY(56px); }
  8% { opacity: 1; }
  30% { transform: none; }
  58% { transform: none; }
  66% { transform: translateY(-8px); }
  72% { transform: translateY(-8px); }
  84% { transform: translateY(12px) translateX(-3px); }
  92% { transform: translateY(4px) translateX(3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes lane-beam {
  0%, 30% { opacity: 0; top: 0; }
  31% { opacity: 1; top: 0; }
  42% { top: calc(100% - 3px); }
  43% { top: 0; }
  54% { opacity: 1; top: calc(100% - 3px); }
  55%, 100% { opacity: 0; top: calc(100% - 3px); }
}
@keyframes lane-scan-ok { 0% { color: var(--tone-4); } 55%, 100% { color: var(--ok); } }
@keyframes lane-scan-trip { 0% { color: var(--tone-4); } 55% { color: var(--stop); } 59% { color: var(--tone-4); } 63%, 100% { color: var(--stop); } }
@keyframes lane-door-shut { 0% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes lane-door-open { 0% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes lane-hit-late { 0%, 66% { opacity: 0; } 67%, 82% { opacity: 1; } 84%, 100% { opacity: 0; } }

.why { margin-top: 96px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 64px; align-items: start; }
.why__head { display: flex; flex-direction: column; gap: 12px; }
.why__k { font-family: var(--font-code); font-size: 12px; color: var(--tone-5); }
.why__h { font-size: 28px; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.why__sub { font-size: 16px; color: var(--tone-6); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.stat { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 0; }
.stat:first-child { padding-left: 0; }
.stat + .stat { border-left: 1px solid var(--tone-2); }
.stat__fig { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 3.9vw, 56px); letter-spacing: -0.04em; line-height: 1.05; color: var(--ink); white-space: nowrap; }
.stat__txt { font-size: 15px; line-height: 1.5; color: var(--tone-6); max-width: 28ch; }
.stat__src { margin-top: auto; padding-top: 8px; font-family: var(--font-code); font-size: 11px; color: var(--tone-4); }

/* ── 02 Por qué ahora (ES): own section, FAQ layout. Sticky head left, two block charts right; 1 block = a fixed amount per chart ── */
.porque { padding: var(--space-9) 0; }
.porque__inner { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 80px; align-items: start; }
.porque__head { position: sticky; top: 96px; }
.porque__head h2 { max-width: 13ch; }
.now { display: flex; flex-direction: column; gap: 72px; min-width: 0; }
.now__chart { margin: 0; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.now__fig { display: flex; flex-direction: column; gap: 10px; }
.now__k { font-family: var(--font-code); font-size: 12px; color: var(--tone-5); }
.now__big { font-family: var(--font-display); font-weight: 500; font-size: clamp(56px, 5.6vw, 88px); letter-spacing: -0.04em; line-height: 1; color: var(--ink); white-space: nowrap; }
.now__chart--cb .now__big { color: var(--stop); }
.now__txt { font-size: 16px; line-height: 1.5; color: var(--tone-6); max-width: 40ch; }
.now__src { font-family: var(--font-code); font-size: 11px; color: var(--tone-4); }
.now__plot { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* chargebacks use 23 columns: cap the width so its blocks stay close in size to the 39-column chart */
.now__chart--cb .now__plot { max-width: 640px; }
.now__row { display: flex; flex-direction: column; gap: 8px; }
.now__lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-code); font-size: 12px; color: var(--tone-5); }
.now__lbl b { font-weight: 500; font-size: 13px; color: var(--ink); text-align: right; }
.now__lbl em { font-style: normal; color: var(--stop); margin-left: 6px; }
.now__bar { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; }
/* on the grey band, empty blocks are a step darker than the page (tone-2) */
.now__bar i, .now__key i { display: block; aspect-ratio: 1; background: var(--tone-2); }
.now__bar i.on, .now__key i.on { background: var(--ink); }
/* uncertain upper part of the 2030 range: 2 px dither, same pattern as the coste «sold blind» meter */
.now__bar i.dim, .now__key i.dim { background: repeating-conic-gradient(var(--tone-8) 0 25%, var(--bg) 0 50%) 0 0 / 4px 4px; }
.now__bar i.up, .now__key i.up { background: var(--stop); }
.now__key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 4px; font-family: var(--font-code); font-size: 11px; color: var(--tone-5); }
.now__key span { display: inline-flex; align-items: center; gap: 8px; }
.now__key i { width: 12px; }
.now__unit { margin-left: auto; color: var(--tone-4); }
.now__note { margin-top: -8px; font-family: var(--font-code); font-size: 11px; line-height: 1.5; color: var(--tone-4); }
/* scroll-in fill, once (sections.js adds is-armed then is-in); without JS or with reduced motion the final state shows */
.now.is-armed .now__bar i { opacity: 0; transition: opacity 0s calc(var(--d, 0) * 1ms); }
.now.is-armed .now__bar i:not(.on):not(.dim):not(.up) { opacity: 1; transition: none; }
.now.is-armed.is-in .now__bar i { opacity: 1; }
@media (max-width: 1100px) {
  .porque__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .porque__head { position: static; max-width: 640px; }
  .porque__head h2 { max-width: 16ch; }
}
@media (max-width: 720px) {
  .now { gap: 56px; }
  .now__chart { gap: 24px; }
  .now__big { font-size: 52px; }
  .now__bar { gap: 2px; }
  .now__bar i.dim { background-size: 2px 2px; }
  .now__unit { margin-left: 0; }
}
/* ── end por qué ahora ── */

/* ── 03 Coste ── */
.coste { padding: var(--space-9) 0; }
.coste__inner { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; align-items: center; }
.coste__text { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.coste__text h2 { max-width: 13ch; }
.coste__text .btn { margin-top: 8px; }
.coste__text .btn span { font-size: 11px; }
.coste__panel { border: 1px solid var(--tone-3); padding: 20px 28px 20px; }
.coste__bar-head {
  display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--tone-2);
  font-family: var(--font-code); font-size: 11px; color: var(--tone-5);
}
.coste__foot { margin-top: 14px; font-family: var(--font-code); font-size: 11px; color: var(--tone-4); }
.race { list-style: none; margin: 0; padding: 0; min-width: 0; }
.race__row {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) 80px; column-gap: 16px; row-gap: 6px; align-items: center;
  padding: 18px 0; border-bottom: 1px dashed var(--tone-2); font-family: var(--font-code); font-size: 14px;
}
.race__name { white-space: nowrap; color: var(--tone-6); }
.race__row--win .race__name { color: var(--ink); font-weight: 500; }
.race__track { min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.race__bar { flex: none; height: 12px; width: var(--w); background: var(--c); }
.race__dots {
  flex: 1; height: 12px;
  background: radial-gradient(circle, var(--tone-4) 1px, transparent 1.4px) left center / 25px 12px repeat-x;
}
.race__val { text-align: right; font-weight: 500; color: var(--ink); white-space: nowrap; }
.race__row--win .race__val { color: var(--ok); }
.race__why { grid-column: 2 / -1; font-family: var(--font-text); font-size: 14px; line-height: 1.4; color: var(--tone-5); }
.race.is-reset .race__bar { width: 0; }
.race.is-running .race__bar { transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.race.is-running .race__row:nth-child(2) .race__bar { transition-delay: .15s; }
.race.is-running .race__row:nth-child(3) .race__bar { transition-delay: .3s; }

/* 03 Coste, ES redesign: three outcomes as pixel meters (18 blocks = 90 €) */
.coste__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 64px; row-gap: 16px; align-items: end; }
.coste__head .eyebrow { grid-column: 1 / -1; }
.coste__head h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; max-width: 20ch; text-wrap: balance; }
.coste__head .lead { max-width: 460px; }
.loss { margin-top: 48px; border: 1px solid var(--tone-3); }
.loss__top, .loss__foot {
  display: flex; justify-content: space-between; gap: 16px; padding: 14px 28px;
  font-family: var(--font-code); font-size: 11px; color: var(--tone-5);
}
.loss__top { border-bottom: 1px solid var(--tone-2); }
.loss__foot { border-top: 1px solid var(--tone-2); color: var(--tone-4); }
.loss__key { display: inline-flex; align-items: center; gap: 8px; }
.loss__key i { width: 10px; height: 14px; background: var(--tone-6); }
.loss__list { list-style: none; margin: 0; padding: 0; }
.loss__row {
  --c: var(--ink);
  display: grid; grid-template-columns: 56px minmax(0, 300px) minmax(0, 1fr) 168px; column-gap: 28px; align-items: center;
  padding: 24px 28px;
}
.loss__row + .loss__row { border-top: 1px dashed var(--tone-2); }
.loss__row--stop { --c: var(--stop); }
.loss__row--win { --c: var(--ok); background: var(--tone-1); }
.loss__face { width: 56px; }
.loss__say { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.loss__name { font-family: var(--font-code); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.loss__row--stop .loss__name { color: var(--stop); }
.loss__row--win .loss__name { color: var(--ok); }
.loss__why { font-size: 15px; line-height: 1.45; color: var(--tone-6); }
.loss__meter { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 4px; height: 28px; min-width: 0; }
.loss__meter i { background: var(--ink); }
/* lost sale: the 90 € you never see, as empty dashed slots */
.loss__row--stop .loss__meter i { background: transparent; outline: 1px dashed var(--tone-3); outline-offset: -1px; }
/* sold blind: the money is there but at risk, so it's dithered */
.loss__row--risk .loss__meter i { background: repeating-conic-gradient(var(--tone-8) 0 25%, var(--tone-2) 0 50%) 0 0 / 4px 4px; }
.loss__row--win .loss__meter i { background: var(--ok); }
.loss__amt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.loss__val { font-family: var(--font-code); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--c); white-space: nowrap; font-variant-numeric: tabular-nums; }
.loss__tag { padding: 2px 8px; border: 1px solid currentColor; font: 500 11px/1.3 var(--font-code); color: var(--c); white-space: nowrap; }
.loss__row--risk .loss__tag { border-style: dashed; }
/* scroll-in reveal (armed by sections.js; reduced motion / no JS = final state) */
.loss.is-armed .loss__meter i { opacity: 0; transition: opacity 0s calc(var(--r, 0) * 260ms + var(--s, 0) * 45ms); }
.loss.is-armed.is-in .loss__meter i { opacity: 1; }
.loss.is-armed .loss__face { opacity: 0; transform: translateY(6px); transition: opacity .3s steps(3) calc(var(--r, 0) * 260ms), transform .3s steps(3) calc(var(--r, 0) * 260ms); }
.loss.is-armed.is-in .loss__face { opacity: 1; transform: none; }

/* ── 05 Expediente (white): the copy and a sample evidence file, printed like a receipt ── */
.expediente { padding: var(--space-9) 0; background: var(--bg); }
.expediente__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 80px; align-items: center; }
.feats { list-style: none; margin: 48px 0 0; padding: 0; }
.feats li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--tone-3); }
.feats li:last-child { border-bottom: 1px solid var(--tone-3); }
.feats__k { font-family: var(--font-code); font-size: 12px; line-height: 28px; color: var(--ok); }
.feats h3 { font-size: 20px; line-height: 28px; color: var(--ink); }
.feats h3 + p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--tone-6); }
.feats .mono { color: var(--tone-7); }

/* the file: a white sheet framed in ink, a grey header band, dotted rows; green only for what checks out */
.exp {
  margin: 0; background: var(--bg); border: 1px solid var(--ink);
  font-family: var(--font-code); font-size: 13px; color: var(--tone-7);
}
.exp__top, .exp__foot {
  display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px;
  font-size: 11px; color: var(--tone-5);
}
.exp__top { background: var(--tone-9); color: var(--tone-4); }
.exp__title { color: var(--bg); text-transform: uppercase; letter-spacing: .1em; }
.exp__id { border: 1px solid var(--tone-6); padding: 0 6px; color: var(--tone-3); }
.exp__who {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 20px; border-bottom: 1px dashed var(--tone-3); background: var(--tone-1);
}
.exp__who .sprite { width: 72px; }
.exp__agent { font-size: 14px; color: var(--ink); }
.exp__check { margin-top: 6px; font-size: 12px; color: var(--ok); }
.exp__score { font-size: 12px; color: var(--tone-5); text-align: right; }
.exp__score span { display: block; font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.exp__rows { margin: 0; padding: 6px 0; }
.exp__rows div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 9px 20px; }
.exp__rows div + div { border-top: 1px dotted var(--tone-3); }
.exp__rows dt { color: var(--tone-5); }
.exp__rows dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.exp__ok { margin-left: 8px; color: var(--ok); }
.exp__big { font-family: var(--font-display); font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink) !important; }
.exp__stamp {
  display: inline-block; padding: 2px 10px; border: 1px solid var(--ok); color: var(--ok);
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 500;
}
.exp__foot { border-top: 1px solid var(--tone-2); }
.exp__hash { color: var(--tone-6); }

/* ── Para quién es (closing band of «por qué ahora», white) ── */
.para {
  margin-top: 96px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 64px; row-gap: 16px; align-items: start;
}
.para__k { grid-column: 1 / -1; font-family: var(--font-code); font-size: 12px; color: var(--tone-5); }
.para__h { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.03em; max-width: 18ch; text-wrap: balance; color: var(--ink); }
.para__body { display: flex; flex-direction: column; gap: 20px; padding-top: 6px; }
.para__txt { font-size: 18px; line-height: 1.55; color: var(--tone-6); max-width: 46ch; }
.para__hook { margin-top: 24px; font-family: var(--font-display); font-size: 24px; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); max-width: 28ch; }
@media (max-width: 860px) { .para { grid-template-columns: minmax(0, 1fr); margin-top: 64px; } }

/* ── 06 Panel (grey, follows the expediente): three data points + a dashboard mock in the real panel's look:
   white cards with tone-2 frames on the grey, tone-9 for data, green and red only for agents and scrapers ── */
.panel { padding: var(--space-9) 0; }
.panel__inner { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 80px; align-items: center; }
.panel__pts { margin-top: 0; }
.dash { margin: 0; display: flex; flex-direction: column; gap: 12px; font-family: var(--font-code); font-size: 12px; color: var(--tone-6); }
.dash__top, .dash__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 11px; color: var(--tone-5); }
.dash__title { display: inline-block; font-family: var(--font-display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.dash__title::first-letter { text-transform: uppercase; }
.dash__id { border: 1px dashed var(--tone-4); padding: 0 6px; }
.dash__block { padding: 18px 20px; background: var(--bg); border: 1px solid var(--tone-2); }
.dash__k { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 11px; color: var(--tone-5); }
.dash__k span:first-child { color: var(--ink); }
.dash__seg { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; height: 28px; }
.dash__seg i, .dash__key i { display: block; background: var(--tone-3); }
.dash__seg i.s, .dash__key i.s { background: var(--stop); }
.dash__seg i.a, .dash__key i.a { background: var(--ok); }
.dash__key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 11px; color: var(--tone-6); }
.dash__key span { display: inline-flex; align-items: center; gap: 8px; }
.dash__key i { width: 10px; height: 10px; }
.dash__agents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash__agents li { display: grid; grid-template-columns: 34px 72px minmax(0, 1fr); gap: 12px; align-items: center; }
/* each agent's head on a tone-9 tile, like the panel's agent list */
.dash__agents .sprite { display: grid; place-items: center; width: 34px; height: 28px; background: var(--tone-9); }
.dash__agents .sprite svg { width: 30px; height: auto; }
.dash__name { color: var(--ink); }
.dash__bar { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 2px; height: 12px; }
.dash__bar i { background: var(--tone-1); }
.dash__bar i.on { background: var(--tone-9); }
.dash__block--win { border-color: var(--ok); }
.dash__big { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 1; letter-spacing: -0.03em; color: var(--ok); font-variant-numeric: tabular-nums; }
/* scroll-in (sections.js adds is-armed then is-in; no JS / reduced motion = final state) */
.dash.is-armed .dash__seg i, .dash.is-armed .dash__bar i.on { opacity: 0; transition: opacity 0s calc(var(--d, 0) * 1ms); }
.dash.is-armed.is-in .dash__seg i, .dash.is-armed.is-in .dash__bar i.on { opacity: 1; }
@media (max-width: 1100px) {
  .panel__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .panel__inner .dash { max-width: 560px; }
}
@media (max-width: 720px) {
  .panel__inner { margin-top: 32px; }
  .dash__block { padding-inline: 16px; }
  .dash__seg { gap: 1px; height: 22px; }
  .dash__agents li { grid-template-columns: 30px 64px minmax(0, 1fr); gap: 10px; }
  .dash__agents .sprite { width: 30px; height: 24px; }
  .dash__agents .sprite svg { width: 26px; }
  .dash__k span + span { text-align: right; }
  .dash__big { font-size: 40px; }
}

/* waitlist privacy link: its own line, so it stays when waitlist.js swaps the note for a status message */
.waitlist__legal { margin-top: 2px; font-family: var(--font-code); font-size: 12px; color: var(--tone-4); }
.waitlist__legal a { color: var(--tone-3); text-underline-offset: 3px; }
.waitlist__legal a:hover { color: var(--bg); }

/* ── 05 Precio ── */
.precio { padding: var(--space-9) 0; }
.plans {
  max-width: 1344px; margin: 56px auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch;
}
.plan {
  position: relative; background: var(--bg); border: 1px solid var(--tone-3); padding: 40px;
  display: flex; flex-direction: column; gap: 28px;
}
.plan__head { display: flex; flex-direction: column; gap: 6px; }
.plan__name { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.plan__for { font-size: 15px; color: var(--tone-5); }
.plan__price { display: flex; align-items: flex-end; gap: 12px; }
.plan__fig { font-family: var(--font-display); font-weight: 500; font-size: 80px; letter-spacing: -0.05em; line-height: .9; color: var(--ink); }
.plan__per { font-family: var(--font-code); font-size: 12px; line-height: 1.4; color: var(--tone-5); padding-bottom: 4px; }
.plan__cta { width: 100%; }
.plan__inc { padding-top: 24px; border-top: 1px solid var(--tone-2); display: flex; flex-direction: column; gap: 16px; }
.plan__inc-h { font-family: var(--font-code); font-size: 11px; color: var(--tone-5); text-transform: uppercase; letter-spacing: .08em; }
.plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--tone-7); }
.plan__list li::before {
  content: "✓"; flex: none; width: 16px; font: 500 15px/1.4 var(--font-code); color: var(--ok);
}
.plan:not(.plan--mid):not(.plan--dark) { border-color: transparent; background: transparent; }
.plan--mid { background: var(--bg); border-color: var(--ink); box-shadow: none; }
.plan--mid .plan__inc { border-top-color: var(--tone-2); }
.plan--dark { background: var(--tone-9); border-color: var(--tone-9); color: var(--bg); box-shadow: none; }
.plan--dark .plan__name, .plan--dark .plan__fig { color: var(--bg); }
.plan--dark .plan__for, .plan--dark .plan__per { color: var(--tone-4); }
.plan--dark .plan__inc { border-top-color: var(--tone-7); }
.plan--dark .plan__inc-h { color: var(--tone-4); }
.plan--dark .plan__list li { color: var(--tone-2); }
.plan--dark .plan__list li::before { color: var(--ok-bright); }
.plan__badge {
  position: absolute; top: -1px; right: -1px; padding: 6px 12px;
  background: var(--ok-bright); color: var(--tone-9);
  font: 500 11px/1.2 var(--font-code); text-transform: uppercase; letter-spacing: .08em;
}
.precio__strip {
  max-width: 1344px; margin: 48px auto 0;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 64px;
}
.precio__strip > p { padding: 0; font-size: 15px; line-height: 1.55; color: var(--tone-6); }
.precio__strip strong { font-weight: 500; color: var(--ink); }
.precio__k { display: block; margin-bottom: 6px; font-family: var(--font-code); font-size: 11px; color: var(--tone-4); text-transform: uppercase; letter-spacing: .08em; }

/* ── 06 FAQ ── */
.faq { padding: var(--space-9) 0; }
.faq__inner { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 80px; align-items: start; }
.faq__head { position: sticky; top: 96px; }
.faq__list { margin: 0; border-bottom: 1px solid var(--tone-3); }
.faq__item { padding: 28px 0; border-top: 1px solid var(--tone-3); }
.faq__item dt {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline;
  font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink);
}
.faq__n { font-family: var(--font-code); font-size: 12px; letter-spacing: 0; color: var(--tone-4); }
.faq__item dd { margin: 10px 0 0 40px; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--tone-6); }

/* ── Pie ── */
.pie__cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 64px;
  padding-block: var(--space-9);
}
.pie__copy { display: flex; flex-direction: column; gap: 16px; }
.pie__copy h2 { color: var(--bg); font-size: clamp(40px, 5.4vw, 76px); max-width: 12ch; }
.pie__copy .lead { max-width: 480px; }
.pie__act { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; min-width: 0; padding-bottom: 6px; }
.pie__btn { height: 56px; padding: 0 32px; font-size: 16px; }
.pie__note { font-family: var(--font-code); font-size: 12px; color: var(--tone-4); }
/* inline waitlist form (ES): the form column gets a fixed share so the input is comfortably wide */
.pie__cta:has(.pie__act--form) { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
.pie__act--form { align-items: stretch; gap: 0; }
.pie__act--form .waitlist { max-width: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .coste__inner, .expediente__inner, .pie__cta, .pie__cta:has(.pie__act--form) { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .pie__act { align-items: flex-start; }
  .pie__act--form { max-width: 520px; }
  .coste__head { grid-template-columns: minmax(0, 1fr); }
  .loss__row { grid-template-columns: 56px minmax(0, 1fr) 140px; row-gap: 16px; }
  .loss__meter { grid-column: 2 / -1; grid-row: 2; }
  .expediente__inner .exp { max-width: 560px; }
  .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .why { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .why__head { max-width: 560px; }
  .faq__head { position: static; }
  .plan { padding: 32px; }
}
@media (max-width: 860px) {
  .shead--split { grid-template-columns: minmax(0, 1fr); }
  .problema__head { grid-template-columns: minmax(0, 1fr); }
  .problema__head .lead { max-width: 560px; }
  .scenes { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .scene--door .lane.rv--walk { --walk-base: 0ms; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .precio__strip { max-width: 560px; grid-template-columns: minmax(0, 1fr); }
  .precio__strip { gap: 24px; }
}
@media (max-width: 720px) {
  .compat { padding-top: 24px; }
  .compat__grid { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
  .compat__grid li { height: 88px; font-size: 16px; gap: 10px; }
  .compat__grid svg { width: 22px; height: 22px; }
  .problema__head .lead { font-size: 18px; }
  .scenes { gap: 20px; margin-top: 40px; }

  .scene__head { padding: 20px 20px 18px; }
  .scene__h { font-size: 24px; }
  .scene__shop { padding: 8px 12px 0; }
  .lanes { --zone: 92px; --sprite: 48px; }
  .lane .lane__pkg { width: 20px; margin-bottom: 14px; }
  .lane__gate i { width: 60px; margin-left: -30px; }
  .lane__who { padding: 12px 6px 0; font-size: 14px; }
  .lane__res { padding: 3px 6px; font-size: 11px; white-space: normal; text-align: center; }
  .scene__take { margin-top: 20px; padding: 16px 20px 18px; font-size: 19px; }
  .why { margin-top: 64px; }
  .stats { grid-template-columns: minmax(0, 1fr); border-top-width: 2px; }
  .stat, .stat:first-child { padding: 20px 0 24px; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--tone-2); }
  .coste__panel { padding: 16px; }
  .compat__dots { width: 22px; height: 22px; gap: 3px; }
  .compat__dots i { width: 5px; height: 5px; }
  .loss { margin-top: 32px; }
  .loss__top, .loss__foot { padding: 12px 16px; }
  .loss__row { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 14px; padding: 20px 16px; align-items: start; }
  .loss__face { width: 40px; }
  .loss__say { grid-column: 2 / -1; grid-row: 1; }
  .loss__amt { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; justify-content: space-between; }
  .loss__meter { grid-column: 1 / -1; grid-row: 2; height: 22px; gap: 3px; }
  .loss__val { font-size: 28px; }
  .race__row { grid-template-columns: 88px minmax(0, 1fr) 56px; column-gap: 10px; font-size: 12px; padding: 14px 0; }
  .race__why { grid-column: 1 / -1; font-size: 13px; }
  .feats { margin-top: 32px; }
  .feats li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; }
  .exp { font-size: 12px; }
  .exp__who { gap: 14px; padding: 16px; }
  .exp__who .sprite { width: 48px; }
  .exp__score span { font-size: 32px; }
  .exp__rows div { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 8px 16px; }
  .exp__top, .exp__foot { padding: 10px 16px; }
  .plan { padding: 24px; gap: 24px; }
  .plan__fig { font-size: 64px; }
  .plan--dark, .plan--mid { box-shadow: none; }
  .faq__item { padding: 22px 0; }
  .faq__item dt { grid-template-columns: 32px minmax(0, 1fr); font-size: 19px; }
  .faq__item dd { margin-left: 32px; font-size: 16px; }
  .pie__cta { padding-block: var(--space-9) 40px; gap: 32px; }
}
/* waitlist--big pins the row at 56px, which beats waitlist.css's stacked mobile layout; let the footer form stack */
@media (max-width: 479px) {
  .pie .waitlist--big .waitlist__row { height: auto; }
  .pie .waitlist--big input, .pie .waitlist--big button { height: 52px; }
}

/* ── Scroll-in reveals (sections.js adds .rv only when JS runs and motion is allowed; no-JS = all visible) ── */
.rv { opacity: 0; transform: translateY(10px); transition: opacity 320ms ease-out, transform 320ms cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rv-i, 0) * 70ms); }
.rv.is-in { opacity: 1; transform: none; }
/* printed line: wipes in left to right in hard steps, like a receipt printer */
.rv--print { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 260ms steps(10); transition-delay: calc(var(--rv-i, 0) * 90ms); }
.rv--print.is-in { clip-path: inset(0); }
/* stamp: pops in on a 3-step scale once its line is printed */
.rv--stamp { opacity: 0; transform: scale(1.4); transition: opacity 180ms steps(3), transform 180ms steps(3); transition-delay: calc(var(--rv-i, 0) * 90ms); }
.rv--stamp.is-in { opacity: 1; transform: none; }
/* ── end reveals ── */

/* Footer (lead): the popup's three heads above the form (no block behind), the cast line-up on the
   bottom edge, and the «by laaabs.» wordmark (design/visado.pen «Marca/by laaabs») */
.pie__cta { padding-top: var(--space-8); padding-bottom: 0; }
.pie__stage { margin-bottom: 16px; }
.pie__stage .wl-modal__stage { background: none; height: 140px; padding-bottom: 0; }
.pie__crowd {
  display: flex; justify-content: space-between; align-items: flex-end;
}
.pie__crowd .sprite { width: 120px; flex: none; opacity: .55; }
.pie__crowd .pie__chosen { opacity: 1; }
/* order: CTA, then the wordmark, then the line-up as the very last thing on the bottom edge */
.pie__base { padding-block: 72px; display: flex; justify-content: center; }
.legal-page .pie__base { padding-block: 40px 48px; }
.pie__by {
  display: block; width: 104px; height: 24px; background: var(--tone-4);
  -webkit-mask: url(/assets/by-laaabs.svg) center / contain no-repeat; mask: url(/assets/by-laaabs.svg) center / contain no-repeat;
  transition: background-color .15s;
}
.pie__by:hover { background: var(--bg); }
@media (max-width: 1100px) { .pie__crowd .sprite:nth-child(n+7) { display: none; } }
@media (max-width: 720px) { .pie__base { padding-block: 48px; } }
@media (max-width: 720px) {
  .pie__crowd .sprite { width: 64px; }
  .pie__crowd .sprite:nth-child(n+5) { display: none; }
  .pie__crowd .pie__chosen { display: block; order: 2; }
}
@media (max-width: 599px) {
  .pie__stage .wl-modal__stage { height: 100px; gap: 16px; }
  .pie__stage .wl-modal__bot { width: 60px; }
  .pie__stage .wl-modal__cone { left: calc(50% + 76px); width: 104px; }
}

/* ── Privacy page (src/privacidad.html, /privacidad/) ── */
.legal-page { background: var(--tone-9); }
.legal-page main { background: var(--bg); }
.legal__back { margin-left: auto; font-family: var(--font-code); font-size: 13px; color: var(--tone-3); }
.legal__back:hover { color: var(--bg); }
.legal__hero { padding: calc(var(--nav-h) + 48px) 0 56px; }
.legal__hero .wrap { display: flex; flex-direction: column; gap: 16px; }
.legal__hero h1 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.035em; max-width: 16ch; color: var(--bg); }
.legal { width: 100%; max-width: 880px; margin: 0 auto; padding: 56px var(--margin) var(--space-9); }
.legal__list { margin: 0; border-bottom: 1px solid var(--tone-3); }
.legal__list > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--tone-3); }
.legal__list dt { font-family: var(--font-code); font-size: 12px; line-height: 27px; color: var(--tone-5); }
.legal__list dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tone-7); }
.legal__todo { font-family: var(--font-code); font-size: .9em; background: var(--tone-1); outline: 1px dashed var(--stop); padding: 0 4px; color: var(--stop); }
.legal__date { margin-top: 20px; font-family: var(--font-code); font-size: 11px; color: var(--tone-4); }
@media (max-width: 720px) {
  .legal__hero { padding-top: calc(64px + 40px); }
  .legal__list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Secondary pages (404, privacy, unsubscribe, admin, brand kit): the nav holds only the logo and .nav__end, which
   goes to the right like on the home page («Volver a la web» as the .nav__cta button). */
.nav > .nav__end:nth-child(2) { grid-column: -2; }
/* /marca/ (src/marca.html): the site nav sits above the brand header, so the header drops its own logo */
.mk-page .mk-head { padding-top: 64px; }
.mk-page .mk-head .mk-logo { display: none; }
@media (min-width: 901px) { .mk-page .mk-head__in { grid-template-columns: minmax(0, 1fr) auto; } }

/* ── 404 (src/404.html, src/en/404.html; served for any missing path) ── */
.nf-page main { background: var(--tone-9); }
.nf { min-height: max(520px, calc(100svh - 320px)); display: flex; align-items: center; padding: calc(64px + 40px) 0 48px; }
.nf__wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.nf__copy { display: flex; flex-direction: column; gap: 18px; }
.nf__code { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: clamp(104px, 15vw, 200px); line-height: .8; letter-spacing: -0.06em; color: var(--tone-7); }
.nf h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; letter-spacing: -0.035em; color: var(--bg); }
.nf .lead { max-width: 36ch; margin: 0; }
.nf__act { margin: 14px 0 0; }
.nf__stage { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.nf__head { width: min(280px, 60vw); }
.nf__log { margin: 0; font-size: 13px; color: var(--tone-4); }
.nf__path { color: var(--tone-2); }
.nf__no { color: var(--stop-bright); }
.nf-page .pie__base { padding-block: 48px 40px; }
.nf-page .pie__crowd { padding-bottom: 56px; }
@media (max-width: 899px) {
  .nf-page .nav__end > .nf__lang { display: flex; }
}
@media (max-width: 720px) {
  .nf { min-height: 0; padding: calc(64px + 40px) 0 56px; }
  .nf__wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .nf__stage { order: -1; justify-self: start; align-items: flex-start; gap: 16px; }
  .nf__head { width: 152px; }
}

/* Pricing (option 13): each plan's agent in the top-left corner; the recommended one inside the door scanner */
.plan__agent { position: relative; align-self: flex-start; width: 112px; height: 100px; display: grid; place-items: center; margin: -16px 0 -20px -18px; }
.plan__agent .sprite { width: 72px; display: block; }
.plan__agent .sprite svg { width: 100%; height: auto; display: block; }
.plan__agent i { position: absolute; width: 12px; height: 12px; border: 0 solid var(--ok-bright); }
.plan__agent i.tl { top: 10px; left: 12px; border-width: 3px 0 0 3px; }
.plan__agent i.tr { top: 10px; right: 12px; border-width: 3px 3px 0 0; }
.plan__agent i.bl { bottom: 10px; left: 12px; border-width: 0 0 3px 3px; }
.plan__agent i.br { bottom: 10px; right: 12px; border-width: 0 3px 3px 0; }
.plan__agent b { position: absolute; left: 18px; right: 18px; height: 2px; top: 18%; background: var(--ok-bright); box-shadow: 0 -3px 0 color-mix(in srgb, var(--ok-bright) 35%, transparent), 0 -6px 0 color-mix(in srgb, var(--ok-bright) 15%, transparent); animation: plan-scan 1.6s steps(12) infinite alternate; }
@keyframes plan-scan { from { top: 18%; } to { top: 78%; } }
@media (prefers-reduced-motion: reduce) { .plan__agent b { animation: none; top: 50%; } }