/* =============================================================
   RILEXOR — Web V2 design system
   Source: docs/Web V2 — Sistema visual, componentes y referencias.txt

   Dark petrol is the primary identity and the default. The light theme
   is a complete token set, not an inversion. Teal leads, cyan adds
   depth, and effects never compete with the text.

   1. Tokens            9. Solutions            17. FAQ
   2. Light theme      10. Reserva Recuperada   18. Audit form
   3. Base             11. Demo                 19. Final CTA
   4. Layout           12. Human review         20. Footer
   5. Buttons          13. NFC                  21. Lightbox
   6. Effects          14. Custom + hub         22. Legal pages
   7. Header / nav     15. Process              23. Reveal & motion
   8. Hero             16. Calculator + trust
   ============================================================= */

/* ==================== 1. Tokens (dark, default) ==================== */
:root {
  --color-bg: #070D11;
  --color-surface: #0B151B;
  --color-surface-raised: #102029;
  --color-surface-soft: #0D1A21;
  --color-text: #F4F8FA;
  --color-text-muted: #9CB0BA;
  --color-accent: #2DD4BF;
  --color-accent-strong: #14B8A6;
  --color-cyan: #38BDF8;
  --color-border: rgba(129, 230, 217, 0.14);
  --color-border-hover: rgba(45, 212, 191, 0.42);
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #FB7185;

  /* Semantic roles */
  --accent-text: var(--color-accent);
  --accent-fill: var(--color-accent);
  --on-accent: #042420;
  --accent-hover: #5EEAD4;
  --accent-soft: rgba(45, 212, 191, 0.10);
  --cyan-text: var(--color-cyan);
  --warm-text: var(--color-warning);
  --warm-soft: rgba(251, 191, 36, 0.08);
  --warm-border: rgba(251, 191, 36, 0.28);
  --danger-text: var(--color-danger);
  --danger-soft: rgba(251, 113, 133, 0.08);
  --field-bg: #0A1318;
  --field-border: rgba(156, 176, 186, 0.34);
  --nav-scrolled: rgba(7, 13, 17, 0.78);
  --preview-bg: rgba(251, 191, 36, 0.10);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.45), 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.35);
  --glass: rgba(11, 21, 27, 0.84);
  --logo-filter: invert(1) hue-rotate(180deg) saturate(1.2) brightness(1.15);

  /* Star border */
  --star-bg: #0B151B;
  --star-text: #F4F8FA;
  --star-border: rgba(129, 230, 217, 0.18);

  /* Border glow */
  --glow-a: #2DD4BF;
  --glow-b: #38BDF8;
  --glow-base: rgba(129, 230, 217, 0.16);
  --card-bg: #0B151B;

  /* Type */
  --font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(2.6rem, 7vw, 5.8rem);
  --fs-h2: clamp(2rem, 4vw, 3.6rem);
  --fs-h3: clamp(1.2rem, 2vw, 1.65rem);
  --fs-body: clamp(1rem, 1.4vw, 1.125rem);
  /* 0.9375rem = 15px is the floor for secondary text: small enough to
     stay secondary, large enough to read comfortably. Buttons sit at the
     body size so a label never looks smaller than the text around it. */
  --fs-small: 0.9375rem;
  --fs-btn: 1rem;

  /* Space & shape */
  --container-width: 1240px;
  --page-padding: clamp(20px, 4vw, 48px);
  --section-space: clamp(72px, 10vw, 144px);
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --header-h: 72px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-micro: 180ms;
  --t-card: 260ms;
  --t-enter: 450ms;

  color-scheme: dark;
}

/* ==================== 2. Light theme ==================== */
[data-theme="light"] {
  --color-bg: #F3F7F8;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-soft: #E9F1F3;
  --color-text: #0B151B;
  --color-text-muted: #445862;
  --color-border: rgba(11, 21, 27, 0.11);
  --color-border-hover: rgba(15, 118, 110, 0.45);

  --accent-text: #0F766E;
  --accent-fill: #0F766E;
  --on-accent: #FFFFFF;
  --accent-hover: #115E59;
  --accent-soft: rgba(15, 118, 110, 0.08);
  --cyan-text: #0369A1;
  --warm-text: #92400E;
  --warm-soft: rgba(217, 119, 6, 0.08);
  --warm-border: rgba(180, 83, 9, 0.30);
  --danger-text: #BE123C;
  --danger-soft: rgba(190, 18, 60, 0.06);
  --field-bg: #FFFFFF;
  --field-border: rgba(11, 21, 27, 0.32);
  --nav-scrolled: rgba(243, 247, 248, 0.86);
  --preview-bg: rgba(217, 119, 6, 0.10);
  --shadow-lg: 0 24px 60px rgba(11, 21, 27, 0.10), 0 4px 14px rgba(11, 21, 27, 0.05);
  --shadow-md: 0 12px 32px rgba(11, 21, 27, 0.08);
  --glass: rgba(255, 255, 255, 0.88);
  --logo-filter: none;

  --glow-a: #0F766E;
  --glow-b: #0369A1;
  --glow-base: rgba(15, 118, 110, 0.18);
  --card-bg: #FFFFFF;

  color-scheme: light;
}

/* ==================== 3. Base ==================== */
*, *::before, *::after { box-sizing: border-box; }
/* Components set their own display; the hidden attribute must still win,
   otherwise hidden errors, results and dialogs render (or block clicks). */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 72px);
}
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; color: var(--color-text); text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.02em; }
h4 { font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
main:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.25em; height: 1.25em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 1000;
  padding: 12px 20px; border-radius: var(--radius-sm);
  background: var(--accent-fill); color: var(--on-accent);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Brand — the PNGs carry wide transparent margins, so the visible marks
   are cropped on screen only. The files themselves are never edited. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; border-radius: 10px; }
.logo {
  --logo-h: 17px;
  display: inline-block; position: relative; overflow: hidden; flex-shrink: 0;
  height: var(--logo-h); width: calc(var(--logo-h) * 9.124);
}
.logo img {
  position: absolute; max-width: none; width: auto;
  height: calc(var(--logo-h) * 14.090);
  top: calc(var(--logo-h) * -6.214);
  left: calc(var(--logo-h) * -0.3033);
  filter: var(--logo-filter);
}
.iso {
  --iso-h: 26px;
  display: inline-block; position: relative; overflow: hidden; flex-shrink: 0;
  height: var(--iso-h); width: calc(var(--iso-h) * 1.220);
}
.iso img {
  position: absolute; max-width: none; width: auto;
  height: calc(var(--iso-h) * 2.0291);
  top: calc(var(--iso-h) * -0.55003);
  left: calc(var(--iso-h) * -0.40614);
  filter: var(--logo-filter);
}
@media (max-width: 359px) { .brand .logo { --logo-h: 14px; } .brand .iso { --iso-h: 22px; } }

/* ==================== 4. Layout ==================== */
.container {
  width: 100%;
  max-width: calc(var(--container-width) + var(--page-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.section { padding-block: var(--section-space); position: relative; }
/* The lighter band dissolves into the page at both ends instead of
   starting and stopping on a flat edge. A solid block here drew a hard
   horizontal line at every junction, which is what made the transitions
   between sections look stuck together. 150px matches the ambient fade,
   so background and ambient dissolve over the same distance. */
.section--soft {
  background: linear-gradient(
    to bottom,
    var(--color-bg) 0,
    var(--color-surface-soft) 150px,
    var(--color-surface-soft) calc(100% - 150px),
    var(--color-bg) 100%);
}

/* --- Section ambients ---------------------------------------------
   Each major block of the home gets its own light so scrolling feels
   like moving through rooms rather than down one long page. Purely
   decorative: one painted layer per section, sitting above the section
   background and below its content, never affecting layout. Only seven
   sections carry one, so the quiet ones in between still read as pauses.
   ------------------------------------------------------------------ */
:root {
  --amb-teal: rgba(45, 212, 191, 0.13);
  --amb-cyan: rgba(56, 189, 248, 0.11);
  --amb-warm: rgba(245, 158, 11, 0.10);
  --amb-line: rgba(129, 230, 217, 0.055);
  --amb-wave: rgba(129, 230, 217, 0.075);
  /* Page colour with alpha, for veiling a background behind text. */
  --scrim-a: rgba(7, 13, 17, 0.45);
  --scrim-b: rgba(7, 13, 17, 0.72);
}
[data-theme="light"] {
  --amb-teal: rgba(15, 118, 110, 0.13);
  --amb-cyan: rgba(3, 105, 161, 0.10);
  --amb-warm: rgba(180, 83, 9, 0.10);
  --amb-line: rgba(15, 118, 110, 0.07);
  --amb-wave: rgba(15, 118, 110, 0.07);
  --scrim-a: rgba(243, 247, 248, 0.50);
  --scrim-b: rgba(243, 247, 248, 0.78);
}
/* The layers move by shifting their own background, never by transform.
   A scaled layer carries its mask with it, which pushed the soft edge
   outside the section and left the solid middle cut dead at the
   boundary: a hard seam between every pair of sections. At inset 0 with
   no transform the mask lands exactly where it is meant to, nothing
   overflows, and no clipping is needed. */
[data-amb] { position: relative; isolation: isolate; }

/* Every ambient dissolves into its neighbours over a fixed distance, so
   the join reads as a fade and not as a line. In px rather than % so a
   tall section and a short one dissolve at the same rate. */
:root { --amb-edges: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%); }

[data-amb]::before,
[data-amb]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* The ambient's own shape, if it has one, intersected with the edge
     fade. Without a shape the first layer is a plain opaque mask. */
  -webkit-mask-image: var(--amb-shape, linear-gradient(#000 0 0)), var(--amb-edges);
  -webkit-mask-composite: source-in;
  mask-image: var(--amb-shape, linear-gradient(#000 0 0)), var(--amb-edges);
  mask-composite: intersect;
}
[data-amb]::before {
  background-repeat: no-repeat;
  background-size: 112% 112%;
  animation: amb-drift 30s ease-in-out infinite alternate;
}
/* Travelling wave bands: soft diagonal light crossing the section, so the
   background reads as moving and not just as a static gradient.

   no-repeat is the important part. A gradient's image is only as big as
   its positioning area, so with the default `repeat` the layer tiles and
   the seam between tiles sweeps across the section as a hard diagonal
   line. Instead the image is drawn larger than the box by more than the
   distance it travels, and never tiles: the band pattern inside it is
   what repeats. */
[data-amb]::after {
  background-image: repeating-linear-gradient(
    108deg,
    transparent 0 90px,
    var(--amb-wave) 150px,
    transparent 210px 300px);
  background-repeat: no-repeat;
  background-size: calc(100% + 400px) calc(100% + 200px);
}
[data-amb]::after { animation: amb-wave 19s linear infinite; }
@keyframes amb-drift {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}
/* One full band period. The 108deg axis points right and down as
   (0.951, 0.309), so a shift of (-285, -93) projects onto it as
   -285(0.951) + -93(0.309) = -300px: exactly one period, and the pattern
   lands on itself. Negative so the bands travel down-right. The oversize
   above keeps the box covered across the whole 285px of travel. */
@keyframes amb-wave {
  from { background-position: 0 0; }
  to   { background-position: -285px -93px; }
}

/* Each ambient sets background-image only: size, repeat and the mask are
   the shared rule's job, so the drift and the edge fade keep working. */

/* Problems: a warm haze coming in from the side, uneasy rather than cosy. */
[data-amb="warm"]::before {
  background-image:
    radial-gradient(70% 55% at 6% 0%, var(--amb-warm), transparent 62%),
    radial-gradient(45% 40% at 96% 100%, var(--amb-warm), transparent 70%);
}
/* Reserva Recuperada: a slow teal aurora entering from the left. */
[data-amb="aurora"]::before {
  background-image:
    radial-gradient(60% 45% at -8% 18%, var(--amb-teal), transparent 66%),
    radial-gradient(50% 38% at 108% 84%, var(--amb-cyan), transparent 68%);
}
/* Demo: instrument panel. The grid is tiled, so it slides by exactly one
   44px cell and the loop cannot be seen. */
[data-amb="grid"]::before {
  --amb-shape: radial-gradient(85% 75% at 50% 35%, #000 25%, transparent 85%);
  background-image:
    linear-gradient(var(--amb-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--amb-line) 1px, transparent 1px),
    radial-gradient(55% 45% at 50% 0%, var(--amb-teal), transparent 70%);
  background-size: 100% 44px, 44px 100%, 112% 112%;
  background-repeat: repeat, repeat, no-repeat;
  animation: amb-grid 26s linear infinite;
}
@keyframes amb-grid {
  from { background-position: 0 0, 0 0, 50% 50%; }
  to   { background-position: 0 44px, 44px 0, 50% 50%; }
}
/* NFC: a single spotlight on the product, from the bottom right. */
[data-amb="spot"]::before {
  background-image:
    radial-gradient(45% 50% at 88% 78%, var(--amb-cyan), transparent 66%),
    radial-gradient(40% 35% at 10% 6%, var(--amb-teal), transparent 72%);
}
/* Automations: wide orbits echoing the hub behind the whole block. They
   are concentric, so they stay put; the ripples inside the hub carry the
   movement here. */
[data-amb="orbit"]::before {
  --amb-shape: radial-gradient(70% 70% at 50% 46%, #000 20%, transparent 78%);
  background-image:
    repeating-radial-gradient(circle at 50% 46%, transparent 0 78px, var(--amb-line) 78px, transparent 80px),
    radial-gradient(42% 38% at 50% 46%, var(--amb-teal), transparent 68%);
  background-size: 100% 100%;
  animation: none;
}
/* Calculator: a soft mesh, calm enough to read numbers over. */
[data-amb="mesh"]::before {
  background-image:
    radial-gradient(38% 42% at 18% 12%, var(--amb-teal), transparent 68%),
    radial-gradient(34% 38% at 82% 30%, var(--amb-cyan), transparent 70%),
    radial-gradient(40% 44% at 50% 104%, var(--amb-teal), transparent 66%);
}
/* Audit form: a beam rising behind the call to action. */
[data-amb="beam"]::before {
  background-image:
    conic-gradient(from 168deg at 50% 118%, transparent 0deg, var(--amb-teal) 14deg, transparent 30deg, transparent 330deg, var(--amb-cyan) 346deg, transparent 360deg),
    radial-gradient(50% 40% at 50% 100%, var(--amb-teal), transparent 68%);
}

.section-head { max-width: 760px; margin-inline: auto; text-align: center; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head h2 { margin-top: 14px; }
.section-head__intro { margin-top: 18px; color: var(--color-text-muted); max-width: 65ch; margin-inline: auto; }
.section-head--left .section-head__intro { margin-inline: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent-text);
}
/* The pill carries a travelling light around its border. Both lights
   live in one pseudo-element: two radial gradients on their own
   background layers, masked to the 1px ring, moving in opposite
   directions. A single element only has two pseudo-elements, and the
   ring mask needs one of them. */
.eyebrow--pill {
  position: relative; isolation: isolate;
  padding: 7px 14px; border-radius: var(--radius-pill);
  border: 1px solid transparent; background: var(--accent-soft);
  background-clip: padding-box;
}
.eyebrow--pill > * { position: relative; z-index: 1; }
.eyebrow--pill::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  padding: 1px; border-radius: inherit;
  background-image:
    radial-gradient(circle closest-side, var(--color-cyan), transparent),
    radial-gradient(circle closest-side, var(--color-accent), transparent),
    linear-gradient(var(--color-border), var(--color-border));
  background-size: 42% 420%, 42% 420%, 100% 100%;
  background-position: -45% -160%, 145% -160%, 0 0;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pill-star 8s linear infinite alternate;
}
@keyframes pill-star {
  from { background-position: -45% -160%, 145% -160%, 0 0; }
  to   { background-position: 145% -160%, -45% -160%, 0 0; }
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 4px var(--accent-soft); }
.eyebrow--warm { color: var(--warm-text); }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--color-text-muted); max-width: 62ch; }
.note { font-size: var(--fs-small); color: var(--color-text-muted); }
.subhead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -0.015em; }

.pill {
  display: inline-flex; align-items: center; width: fit-content;
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.pill--accent { color: var(--accent-text); background: var(--accent-soft); border-color: var(--color-border-hover); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 0.8125rem; font-weight: 600;
  color: var(--color-text-muted); border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.badge--demo { color: var(--warm-text); border-color: var(--warm-border); background: var(--warm-soft); }

.checklist { display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .icon { color: var(--accent-text); margin-top: 0.2em; }
.checklist--compact { gap: 10px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; font-weight: 600; color: var(--accent-text);
  text-decoration: none;
}
.link-arrow .icon { transition: transform var(--t-micro) var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ==================== 5. Buttons ==================== */
/* Primary is solid brand teal with dark text: 9.67:1 in dark, and the
   light theme swaps to #0F766E with white, 5.47:1. White on #2DD4BF would
   be 1.86:1, which is why the label never goes white in the dark theme.
   On hover a light sweep crosses the button and it lifts slightly. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font-size: var(--fs-btn); font-weight: 600; line-height: 1.2; text-align: center;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease),
              color var(--t-micro) var(--ease), transform var(--t-micro) var(--ease),
              box-shadow var(--t-card) var(--ease);
}
.btn .icon { transition: transform var(--t-micro) var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 0 30px; font-size: 1.0625rem; }
.btn--primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 10px 28px -14px var(--glow-a); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, 0.42) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 750ms var(--ease);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 16px 36px -14px var(--glow-a); transform: translateY(-1px); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:active { transform: translateY(0); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--field-border); }
.btn--secondary:hover { border-color: var(--color-border-hover); background: var(--accent-soft); }
.btn--ghost { background: transparent; color: var(--color-text-muted); padding-inline: 16px; }
.btn--ghost:hover { color: var(--color-text); }
/* WhatsApp: recognisable through its icon and label, but inside the palette. */
.btn--whatsapp { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border-hover); }
.btn--whatsapp .icon { color: var(--accent-text); }
.btn--whatsapp:hover { background: var(--accent-soft); }
.btn--primary .icon { color: inherit; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.icon--fill { fill: currentColor; stroke: none; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: transparent; color: var(--color-text); border: 1px solid var(--color-border);
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.icon-btn:hover { border-color: var(--color-border-hover); background: var(--accent-soft); }

/* ==================== 6. Effects ==================== */
/* --- Border glow: main Reserva Recuperada and NFC cards only.
   Static gradient border by default (touch, reduced motion, no JS);
   border-glow.js moves it towards a fine pointer. Decorative only. --- */
.glow-card {
  --glow-angle: 135deg;
  --glow-proximity: 0;
  position: relative; isolation: isolate;
  background: var(--card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.glow-card::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  padding: 1px; border-radius: inherit;
  background: conic-gradient(from calc(var(--glow-angle) - 70deg),
    transparent 0deg, var(--glow-a) 55deg, var(--glow-b) 85deg, transparent 150deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: calc(0.42 + var(--glow-proximity) * 0.58);
  transition: opacity var(--t-card) var(--ease);
}
.glow-card::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 60px -10px var(--glow-a);
  opacity: calc(var(--glow-proximity) * 0.35);
  transition: opacity var(--t-card) var(--ease);
}

/* ==================== 7. Header / navigation ==================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-card) var(--ease), border-color var(--t-card) var(--ease);
}
.site-header.is-scrolled, html.is-locked .site-header {
  background: var(--nav-scrolled);
  border-bottom-color: var(--color-border);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.preview-bar { background: var(--preview-bg); border-bottom: 1px solid var(--warm-border); }
.preview-bar p {
  max-width: var(--container-width); margin: 0 auto;
  padding: 6px var(--page-padding);
  font-size: 0.8125rem; line-height: 1.4; text-align: center; color: var(--warm-text);
}
.nav { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.nav__links { display: none; margin-left: auto; }
.nav__links ul { display: flex; align-items: center; gap: clamp(2px, 0.45vw, 8px); }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 7px;
  font-size: 0.9375rem; font-weight: 500; color: var(--color-text-muted);
  text-decoration: none; white-space: nowrap; border-radius: 8px;
  transition: color var(--t-micro) var(--ease);
}
.nav__links a:hover { color: var(--color-text); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__links + .nav__actions { margin-left: 8px; }
.nav .nav__cta, .nav .nav__lang { display: none; }
.nav__cta { white-space: nowrap; }

.lang {
  display: inline-flex; padding: 0; gap: 2px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
}
.lang button {
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: var(--radius-pill); background: transparent;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-text-muted);
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.lang button:hover { color: var(--color-text); }
.lang button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }

.theme-icon--to-dark { display: none; }
[data-theme="light"] .theme-icon--to-light { display: none; }
[data-theme="light"] .theme-icon--to-dark { display: block; }

.nav__toggle .icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .icon--open { display: none; }
.nav__toggle[aria-expanded="true"] .icon--close { display: block; }

/* Height is set by main.js on open (viewport minus the header, which
   varies with the preview bar), so the panel always fills the screen. */
.mobile-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px var(--page-padding) 32px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--t-card) var(--ease), transform var(--t-card) var(--ease);
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu__links { display: grid; }
.mobile-menu__links a {
  display: flex; align-items: center; min-height: 56px;
  font-size: 1.125rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.mobile-menu__foot .btn { flex: 1 1 200px; }

@media (min-width: 640px) {
  .nav .nav__cta { display: inline-flex; }
}
@media (min-width: 1200px) {
  :root { --header-h: 80px; }
  .nav__links, .nav .nav__lang { display: flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none !important; }
  .brand .logo { --logo-h: 18px; }
}
@media (min-width: 1200px) and (max-width: 1360px) {
  .nav { gap: 10px; }
  .nav__links a { font-size: 0.875rem; padding: 0 6px; }
  .site-header .brand .logo { display: none; }
  .site-header .brand .iso { --iso-h: 30px; }
}

/* ==================== 8. Hero ==================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: calc(var(--header-h) + 88px);
  padding-bottom: clamp(72px, 9vw, 120px);
}
@media (min-width: 768px) { .hero { min-height: min(92svh, 980px); display: flex; align-items: center; } }

/* Fallback light: always present, so the hero keeps its look without
   WebGL, with reduced motion, and before the canvas has drawn. */
.hero__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__light::before {
  content: ""; position: absolute; inset: -10% -10% 0 -10%;
  background:
    radial-gradient(60% 55% at 72% -4%, rgba(45, 212, 191, 0.30), transparent 65%),
    radial-gradient(38% 42% at 92% 8%, rgba(56, 189, 248, 0.16), transparent 70%),
    repeating-conic-gradient(from 198deg at 72% -6%, rgba(45, 212, 191, 0.07) 0deg 3deg, transparent 3deg 9deg);
  -webkit-mask-image: radial-gradient(75% 85% at 72% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(75% 85% at 72% 0%, #000 30%, transparent 78%);
  transition: opacity 900ms var(--ease);
  /* Breathing for the CSS fallback, matching what the shader does. The
     target opacity is a variable so .has-rays can still dim the layer
     under the canvas: keyframes read the variable instead of replacing
     the value outright. */
  --amb-o: 1;
  opacity: var(--amb-o);
  animation: hero-breathe 17s var(--ease) infinite alternate;
}
@keyframes hero-breathe {
  from { opacity: calc(var(--amb-o) * 0.78); transform: scale(1); }
  to   { opacity: var(--amb-o); transform: scale(1.025); }
}
.hero__light::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
}
.hero.has-rays .hero__light::before { --amb-o: 0.45; }
.hero__rays { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-theme="light"] .hero__light::before {
  background:
    radial-gradient(60% 55% at 72% -4%, rgba(15, 118, 110, 0.26), transparent 65%),
    radial-gradient(38% 42% at 92% 8%, rgba(3, 105, 161, 0.16), transparent 70%),
    repeating-conic-gradient(from 198deg at 72% -6%, rgba(15, 118, 110, 0.11) 0deg 3deg, transparent 3deg 9deg);
}

.hero__grid { display: grid; gap: clamp(48px, 7vw, 80px); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 64px; } }
.hero__content { max-width: 820px; }
.hero__title {
  margin-top: 24px;
  font-size: var(--fs-h1); line-height: 1.0; letter-spacing: -0.045em;
}
.hero__text { margin-top: 26px; font-size: clamp(1.075rem, 1.7vw, 1.3rem); color: var(--color-text-muted); max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }


/* ==================== 10. Reserva Recuperada ==================== */
.rr-intro { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1024px) { .rr-intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; } }
.rr-intro__text h2 { margin-top: 16px; }
.rr-intro__text .lead { margin-top: 20px; }
.rr-intro__text .checklist { margin-top: 28px; }
.rr-intro__text .note { margin-top: 24px; max-width: 60ch; }
.status {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 6px 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: 600; color: var(--color-success);
  background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.28);
}
[data-theme="light"] .status { color: #065F46; background: rgba(4, 120, 87, 0.07); border-color: rgba(4, 120, 87, 0.28); }
.status__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Service status: green = available (default), amber = in pilot / not yet
   contractable, teal = custom work studied case by case. */
.status.status--pilot, [data-theme="light"] .status.status--pilot { color: var(--warm-text); background: var(--warm-soft); border-color: var(--warm-border); }
.status.status--info, [data-theme="light"] .status.status--info { color: var(--accent-text); background: var(--accent-soft); border-color: var(--color-border-hover); }
.showcase__body .status, .nfc-card .status, .section-head .status { margin-top: 12px; }
.hero__content .status { margin-top: 18px; }

.flow-card { padding: clamp(24px, 3vw, 36px); }
.flow-card__title { font-size: 1.2rem; }
.flow { display: grid; gap: 0; margin: 22px 0 10px; }
.flow li { position: relative; display: flex; gap: 16px; padding-bottom: 20px; }
.flow li:last-child { padding-bottom: 6px; }
.flow li:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 1px;
  background: linear-gradient(to bottom, var(--color-border-hover), var(--color-border));
}
.flow__num {
  display: grid; place-items: center; flex-shrink: 0;
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--color-border-hover);
  font-size: 0.8125rem; font-weight: 700;
}
.flow li > span:last-child { padding-top: 3px; line-height: 1.5; }

.caps { margin-top: clamp(64px, 8vw, 96px); }
.caps__grid { display: grid; gap: 16px; margin-top: 24px; }
@media (min-width: 640px) { .caps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .caps__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cap { padding: 24px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.cap h4 { color: var(--accent-text); }
.cap ul { display: grid; gap: 10px; margin-top: 14px; }
.cap li { position: relative; padding-left: 18px; font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.5; }
.cap li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); }

.limits {
  margin-top: 24px; padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  border: 1px dashed var(--field-border);
}
.limits__head { display: flex; gap: 14px; align-items: flex-start; }
.limits__head > .icon { width: 26px; height: 26px; color: var(--cyan-text); margin-top: 2px; }
.limits__head p { margin-top: 4px; color: var(--color-text-muted); }
.limits__list { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 1024px) { .limits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
.limits__list li { position: relative; padding-left: 20px; color: var(--color-text-muted); font-size: 0.975rem; }
.limits__list li::before { content: "—"; position: absolute; left: 0; color: var(--cyan-text); }

/* ==================== 12. Human review ==================== */
/* Same dissolve as .section--soft; the warm hairline stays because it is
   the marker of this block, and now it reads as a deliberate rule rather
   than as the edge of a pasted-on panel. */
.section--human {
  background: linear-gradient(
    180deg,
    var(--color-bg) 0,
    var(--color-surface-soft) 150px,
    var(--color-bg) 100%);
  border-block: 1px solid var(--warm-border);
}
.human { display: grid; gap: 48px; }
@media (min-width: 1024px) { .human { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; } }
.human__text h2 { margin-top: 14px; }
.human__text .lead { margin-top: 20px; color: var(--color-text); }
.human__how { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.human__how p { margin-top: 10px; color: var(--color-text-muted); }
.human__allergy { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: var(--warm-soft); border: 1px solid var(--warm-border); }
.human__allergy .icon { color: var(--warm-text); margin-top: 2px; }
.human__allergy span { color: var(--color-text); }
.cases { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 640px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cases li {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-weight: 500; line-height: 1.4;
}
.cases .icon { color: var(--warm-text); }

/* ==================== 13. NFC ==================== */
.nfc-top { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .nfc-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: stretch; } }
/* Scales from one photo to many without touching the markup: the first
   image spans the row as the hero shot and any others flow underneath as
   thumbnails. With a single photo the row is just that photo, which is
   what it looks like today. */
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.gallery__item:first-child { grid-column: 1 / -1; }
.gallery__item:not(:first-child) .gallery__btn img { aspect-ratio: 1; }
.gallery__item:not(:first-child) .gallery__zoom { display: none; }
.gallery__btn {
  position: relative; display: block; width: 100%; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; background: #000; cursor: zoom-in;
}
.gallery__btn img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; transition: transform 600ms var(--ease); }
.gallery__btn:hover img { transform: scale(1.02); }
.gallery__zoom {
  position: absolute; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  background: rgba(7, 13, 17, 0.78); color: #F4F8FA;
  font-size: var(--fs-small); font-weight: 600;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.nfc-card { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3.5vw, 44px); }
.nfc-card h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.price { display: grid; gap: 2px; padding: 20px 0; border-block: 1px solid var(--color-border); }
.price__label { font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 500; }
.price__value { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.price__note { font-size: var(--fs-small); color: var(--color-text-muted); }
.nfc-card__cta { display: grid; gap: 10px; justify-items: start; }
.specs { display: grid; gap: 0; margin-top: auto; }
.specs > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.specs dt { color: var(--color-text-muted); font-size: 0.95rem; }
.specs dd { font-weight: 600; text-align: right; font-size: 0.95rem; }

.nfc-details { display: grid; gap: 20px; margin-top: 56px; }
@media (min-width: 1024px) { .nfc-details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nfc-block { padding: 26px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.nfc-block .subhead { margin-bottom: 16px; }
.nfc-block > p { color: var(--color-text-muted); }
.tap-steps { display: grid; gap: 14px; counter-reset: tap; }
.tap-steps li { display: flex; gap: 14px; align-items: flex-start; }
.tap-steps .icon {
  width: 38px; height: 38px; padding: 9px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-text); stroke-width: 1.8;
}
.tap-steps span { padding-top: 7px; }
.places { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.places li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-size: 0.9375rem; font-weight: 500; }
.places .icon { color: var(--accent-text); }

.packs-block { margin-top: 56px; }
.packs-block__head { display: grid; gap: 8px; }
.packs-block__head p { color: var(--color-text-muted); }
.packs { display: grid; gap: 12px; margin-top: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .packs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pack { padding: 20px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.pack__units { font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
.pack__total { margin-top: 6px; font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.pack__each { margin-top: 6px; font-size: var(--fs-small); color: var(--accent-text); font-weight: 500; }

.nfc-info { display: grid; gap: 32px; margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--color-border); }
@media (min-width: 768px) { .nfc-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .nfc-info { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.info__title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.info__title .icon { color: var(--accent-text); }
.info ul { display: grid; gap: 10px; margin-top: 14px; }
.info li, .info p { color: var(--color-text-muted); font-size: 0.975rem; }
.info li { position: relative; padding-left: 16px; }
.info li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-muted); }
.info p { margin-top: 14px; }
.info .note { font-size: var(--fs-small); }
.info .link-arrow { margin-top: 6px; }

/* ==================== 14. Custom automations + hub ==================== */
.custom { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .custom { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; } }
.custom__text h2 { margin-top: 14px; }
.custom__text .lead { margin-top: 20px; }
.custom__text .subhead { margin-top: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.9375rem; font-weight: 500; }
.custom__text .note { margin-top: 22px; max-width: 60ch; }

.hub {
  --hub-node: 52px;
  --hub-pulse: var(--color-accent);
  --hub-ring: rgba(129, 230, 217, 0.10);
  --hub-halo: rgba(56, 189, 248, 0.10);
  --hub-sweep: rgba(45, 212, 191, 0.10);
  position: relative; width: min(500px, 100%); aspect-ratio: 1; margin-inline: auto;
  isolation: isolate;
}
[data-theme="light"] .hub {
  --hub-pulse: #0F766E;
  --hub-ring: rgba(15, 118, 110, 0.13);
  --hub-halo: rgba(3, 105, 161, 0.07);
  --hub-sweep: rgba(15, 118, 110, 0.09);
}
@media (min-width: 640px) { .hub { --hub-node: 60px; } }
/* Depth behind the diagram: a warm centre, concentric orbits and a slow
   conic sweep. All decorative, all masked to a circle so nothing squares
   off at the edges of the box. */
/* inset stays at 0: a negative inset pushed these layers past the hub box
   and added horizontal page scroll at narrow widths. The circular masks
   already keep them from squaring off at the edges. */
.hub::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, transparent 52%),
    radial-gradient(circle at 50% 50%, var(--hub-halo) 0%, transparent 38%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 8.5%, var(--hub-ring) 8.5%, transparent 8.9%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, rgba(0, 0, 0, 0.55) 55%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000 20%, rgba(0, 0, 0, 0.55) 55%, transparent 75%);
}
.hub::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, var(--hub-sweep) 26deg, transparent 62deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 24%, #000 46%, transparent 74%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 24%, #000 46%, transparent 74%);
  animation: hub-sweep 24s linear infinite;
}
.hub.is-paused::after { animation-play-state: paused; }
@keyframes hub-sweep { to { transform: rotate(360deg); } }
/* Ripples leaving the centre, one every 1.6s. They stop growing before
   they reach the hub box, so nothing overflows. */
.hub__ripples { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hub__ripples i {
  position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1;
  margin: -50% 0 0 -50%; border-radius: 50%;
  border: 1px solid var(--hub-pulse);
  opacity: 0;
  animation: hub-ripple 6.4s linear infinite;
}
.hub__ripples i:nth-child(2) { animation-delay: 1.6s; }
.hub__ripples i:nth-child(3) { animation-delay: 3.2s; }
.hub__ripples i:nth-child(4) { animation-delay: 4.8s; }
.hub.is-paused .hub__ripples i { animation-play-state: paused; }
@keyframes hub-ripple {
  0%   { transform: scale(0.28); opacity: 0; }
  12%  { opacity: 0.45; }
  100% { transform: scale(1); opacity: 0; }
}
.hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__lines line { stroke: var(--color-border-hover); stroke-width: 1.4; }
.hub__pulse {
  stroke: var(--hub-pulse); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: var(--seg) calc(var(--L) + var(--seg));
  stroke-dashoffset: var(--seg);
  opacity: 0;
  animation: hub-pulse 30s linear infinite;
}
.hub.is-paused .hub__pulse { animation-play-state: paused; }
@keyframes hub-pulse {
  0%   { stroke-dashoffset: var(--seg); opacity: 0; }
  1%   { opacity: 0.9; }
  15%  { opacity: 0.9; }
  16%  { stroke-dashoffset: calc(var(--L) * -1); opacity: 0; }
  100% { stroke-dashoffset: calc(var(--L) * -1); opacity: 0; }
}
.hub__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; align-content: center; gap: 6px;
  width: 30%; aspect-ratio: 1; padding: 8px; border-radius: 28px;
  background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-border-hover);
  box-shadow: var(--shadow-md), 0 0 44px -12px var(--glow-a), inset 0 1px 0 var(--hub-ring);
  font-size: clamp(0.75rem, 1.4vw, 0.9rem); font-weight: 700; text-align: center; line-height: 1.2;
}
.hub__core .icon { width: 26px; height: 26px; color: var(--accent-text); }
.hub__nodes { position: absolute; inset: 0; }
.hub__node { position: absolute; width: var(--hub-node); height: var(--hub-node); transform: translate(-50%, -50%); }
.hub__icon {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 16px; border: 1px solid var(--color-border);
  background: linear-gradient(158deg, var(--color-surface-raised), var(--color-surface));
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 var(--hub-ring);
  color: var(--accent-text);
}
.hub__icon .icon { width: 22px; height: 22px; }
.hub__label {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 0.8125rem; font-weight: 600; color: var(--color-text-muted);
}

/* ==================== 14b. Plans ====================
   Reserva Recuperada in three plans. The middle one is raised: it is the
   only one with an approved price and the one we recommend. Prices and
   CTAs line up across the cards so they can be compared at a glance. */
.plans { display: grid; gap: 22px; margin-top: clamp(36px, 4vw, 52px); }
@media (max-width: 719px) {
  /* Phones: a swipeable row instead of three tall cards stacked, so the
     home stays short. The Founder plan comes first and the next card
     peeks in at the edge to show there is more. */
  .plans {
    grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px;
    margin-inline: calc(var(--page-padding) * -1); padding: 18px var(--page-padding) 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--page-padding);
    scrollbar-width: none;
  }
  .plans::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: start; }
  .plan--featured { order: -1; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  /* Two columns: the featured plan spans the full width on top so the
     other two sit side by side instead of leaving holes. */
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan--featured { grid-column: 1 / -1; order: -1; }
}
@media (min-width: 1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; padding-block: 18px; }
  .plan--featured { margin-block: -18px; padding-block: calc(clamp(24px, 3vw, 34px) + 18px); }
  .plan__for { min-height: calc(1.55em * 3); }
  .plan__sub { min-height: calc(1.5em * 2); }
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border);
  transition: border-color var(--t-card) var(--ease);
}
.plan:hover { border-color: var(--color-border-hover); }
.plan--featured {
  background:
    radial-gradient(120% 70% at 50% 0%, var(--accent-soft), transparent 62%),
    var(--color-surface-raised);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-lg);
}
.plan__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--accent-fill); color: var(--on-accent);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 10px 26px -12px var(--glow-a);
}
.plan__badge .icon { width: 14px; height: 14px; }
.plan__head { display: flex; align-items: center; gap: 12px; }
.plan__icon {
  display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px;
  border-radius: 13px; border: 1px solid var(--color-border);
  background: linear-gradient(158deg, var(--color-surface-raised), var(--color-surface));
  color: var(--accent-text);
}
.plan--featured .plan__icon { background: var(--accent-fill); border-color: transparent; color: var(--on-accent); }
.plan__icon .icon { width: 20px; height: 20px; }
.plan__name { font-size: clamp(1.15rem, 1.8vw, 1.3rem); letter-spacing: -0.015em; }
.plan__for { margin-top: 14px; font-size: 0.975rem; line-height: 1.55; color: var(--color-text-muted); }
.plan__price { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.plan__amount {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-height: 3rem;
  font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--color-text);
}
.plan__amount--text { align-items: flex-end; font-size: clamp(1.6rem, 2.6vw, 1.95rem); letter-spacing: -0.03em; }
.plan--featured .plan__amount > span:first-child { color: var(--accent-text); }
.plan__per { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--color-text-muted); }
.plan__sub { margin-top: 8px; font-size: var(--fs-small); color: var(--color-text-muted); }
.plan__keep {
  display: flex; gap: 9px; align-items: center; margin-top: 16px; padding: 9px 12px;
  border-radius: 12px; background: var(--warm-soft); border: 1px solid var(--warm-border);
  font-size: 0.9rem; font-weight: 600; color: var(--warm-text);
}
.plan__keep .icon { flex-shrink: 0; width: 17px; height: 17px; }
.plan__cta { width: 100%; margin-top: 22px; }
.plan__lead { margin-top: 24px; font-size: var(--fs-small); font-weight: 700; }
.plan__list { display: grid; gap: 10px; margin-top: 12px; }
.plan__cta + .plan__list { margin-top: 24px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.975rem; line-height: 1.5; }
.plan__list .icon { flex-shrink: 0; width: 17px; height: 17px; margin-top: 3px; color: var(--accent-text); }
.plan__more { margin-top: auto; padding-top: 20px; align-self: flex-start; }
.plans__note { margin-top: 30px; text-align: center; max-width: 74ch; margin-inline: auto; }
.plans__note a { color: var(--accent-text); font-weight: 600; }

/* Founder plan terms, under the plans on the product page */
.terms-box {
  max-width: 1000px; margin: clamp(36px, 4vw, 52px) auto 0; padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border);
}
.terms-box__title { font-size: 1.1rem; }
.terms-box__list { display: grid; gap: 14px 28px; margin-top: 18px; }
@media (min-width: 720px) { .terms-box__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .terms-box__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.terms-box__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; }
.terms-box__list .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--accent-text); }

/* NFC showcase on the home: the product photo and one way in */
.showcase { display: grid; border-radius: var(--radius-lg); }
@media (min-width: 900px) { .showcase { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.showcase__media { display: block; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: #000; }
@media (min-width: 900px) { .showcase__media { border-radius: var(--radius-lg) 0 0 var(--radius-lg); } }
.showcase__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 700ms var(--ease); }
@media (min-width: 900px) { .showcase__media img { aspect-ratio: auto; min-height: 100%; } }
.showcase:hover .showcase__media img { transform: scale(1.03); }
.showcase__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 4vw, 52px); }
.showcase__body h2 { margin-top: 10px; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.showcase__text { margin-top: 14px; color: var(--color-text-muted); max-width: 52ch; }
.showcase__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 22px; }
.showcase__amount { font-size: clamp(2.2rem, 3.6vw, 2.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.showcase__unit { font-size: var(--fs-small); color: var(--color-text-muted); }
.showcase__points { display: grid; gap: 10px; margin-top: 18px; }
.showcase__points li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.showcase__points .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--accent-text); }
.showcase__cta { margin-top: 26px; align-self: flex-start; }
@media (max-width: 479px) { .showcase__cta { align-self: stretch; } }

/* ==================== 15. Process ==================== */
.steps { display: grid; gap: 0; position: relative; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { position: relative; padding: 28px 0 28px; border-top: 1px solid var(--color-border); }
.step::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--accent-fill), transparent);
}
.step__num { font-size: var(--fs-small); font-weight: 700; color: var(--accent-text); letter-spacing: 0.04em; }
.step h3 { margin-top: 12px; }
.step p { margin-top: 10px; color: var(--color-text-muted); max-width: 42ch; }

/* ==================== 16. Calculator + trust ==================== */
/* The estimator is the one place on the page where someone types, so it
   is built as an instrument: lit top edge, a form side that reads as
   input and a results side that reads as a readout. */
.calc {
  position: relative; display: grid; gap: 0; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
.calc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-cyan), transparent);
  opacity: 0.6;
}
@media (min-width: 1024px) { .calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.calc__form {
  display: grid; gap: 18px; padding: clamp(24px, 3.5vw, 40px);
  background: radial-gradient(90% 70% at 0% 0%, var(--accent-soft), transparent 62%);
}
/* Fields inside the estimator sit slightly recessed, so the panel reads
   as a surface with inputs cut into it. */
.calc__form .field input {
  background: var(--color-bg);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
}
[data-theme="light"] .calc__form .field input { box-shadow: inset 0 1px 3px rgba(11, 21, 27, 0.07); }
.calc__form .field input:focus-visible { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--accent-soft); }
@media (min-width: 640px) { .calc__form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .calc__form .field:first-child, .calc__form .form-alert, .calc__actions { grid-column: 1 / -1; } }
.calc__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.calc__panel {
  position: relative; display: grid; align-content: start; gap: 18px;
  padding: clamp(24px, 3.5vw, 40px);
  background:
    radial-gradient(85% 60% at 100% 0%, var(--amb-cyan), transparent 60%),
    var(--color-surface-soft);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 1024px) { .calc__panel { border-top: 0; border-left: 1px solid var(--color-border); } }
.calc__empty { color: var(--color-text-muted); }
.calc__results { display: grid; gap: 12px; }
.calc__results > div {
  position: relative; overflow: hidden;
  padding: 16px 18px 16px 22px; border-radius: var(--radius-sm);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
/* A lit edge marks each figure as a readout rather than a plain box. */
.calc__results > div::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-cyan));
  opacity: 0.8;
}
.calc__results dt { font-size: var(--fs-small); color: var(--color-text-muted); }
.calc__results dd {
  margin-top: 4px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.calc__assumptions h4 { font-size: 0.95rem; }
.calc__assumptions ul { display: grid; gap: 8px; margin-top: 10px; }
.calc__assumptions li { position: relative; padding-left: 16px; font-size: var(--fs-small); color: var(--color-text-muted); }
.calc__assumptions li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-text); }
.calc__disclaimer { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--warm-border); background: var(--warm-soft); font-size: var(--fs-small); }
.calc__disclaimer .icon { color: var(--warm-text); margin-top: 1px; }


/* ==================== 17. FAQ ==================== */
.faq-wrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .faq-wrap { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 72px; align-items: start; } .faq-wrap .section-head { position: sticky; top: calc(var(--header-h) + 60px); } }
.faq { border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__item h3 { font-size: inherit; letter-spacing: normal; }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 64px; padding: 18px 4px;
  background: transparent; border: 0; text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 600; line-height: 1.4; color: var(--color-text);
}
.faq__btn:hover { color: var(--accent-text); }
.faq__btn .icon { color: var(--accent-text); transition: transform var(--t-card) var(--ease); }
.faq__btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__a { padding: 0 4px 22px; }
.faq__a p { color: var(--color-text-muted); max-width: 68ch; }
.faq__a:not([hidden]) { animation: faq-open 260ms var(--ease); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ==================== 18. Audit form ==================== */
.audit { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1024px) { .audit { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; } }
.audit__intro h2 { margin-top: 14px; }
.audit__intro .lead { margin-top: 20px; }
.audit__how { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--color-border-hover); font-size: 0.975rem; }
.audit__how .icon { color: var(--accent-text); margin-top: 2px; }
.audit__alt { margin-top: 36px; }
.contact-list { display: grid; gap: 6px; margin-top: 12px; }
.contact-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--color-text); }
.contact-link .icon { color: var(--accent-text); }
.contact-link:hover { color: var(--accent-text); }

.audit__panel { padding: clamp(22px, 3.5vw, 40px); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); }
.form__note { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: 20px; }
.form__grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: 7px; align-content: start; }
.field label { font-size: 0.95rem; font-weight: 600; }
.field__req { color: var(--accent-text); }
.field__opt { font-weight: 400; color: var(--color-text-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-size: 1rem; line-height: 1.4;
  background: var(--field-bg); color: var(--color-text);
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 42px; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-border-hover); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent-text);
}
.field [aria-invalid="true"] { border-color: var(--danger-text); }
.field__hint { font-size: var(--fs-small); color: var(--color-text-muted); }
.field__error { display: flex; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--danger-text); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 0.7rem; line-height: 1; }
.field__link { justify-self: start; font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.field--check { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; flex-shrink: 0; accent-color: var(--accent-fill); }
.check label { font-weight: 500; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { display: grid; gap: 10px; justify-items: start; margin-top: 26px; }
.form-alert { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--danger-text); background: var(--danger-soft); color: var(--color-text); font-size: 0.95rem; margin-bottom: 18px; }
.calc__form .form-alert { margin-bottom: 0; }
.form-alert__title { font-weight: 700; color: var(--danger-text); }

.confirm__head { display: flex; gap: 12px; align-items: center; }
.confirm__head .icon { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--accent-fill); color: var(--on-accent); stroke-width: 2.2; }
.confirm__head h3:focus { outline: none; }
.confirm > p { margin-top: 14px; color: var(--color-text-muted); }
.confirm__label { font-size: var(--fs-small); font-weight: 600; color: var(--color-text) !important; margin-top: 22px !important; }
.confirm__preview {
  margin-top: 8px; padding: 16px; border-radius: var(--radius-sm);
  background: var(--color-bg); border: 1px solid var(--color-border);
  font-size: 0.95rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow-y: auto;
}
.confirm__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ==================== 19. Final CTA ==================== */
/* Taller than a normal section on purpose. The shader divides x by the
   aspect ratio, so a wide, short block smears the ribbons into
   horizontal streaks; giving the block height brings its proportions
   closer to the reference and lets the ribbons sweep diagonally. */
.cta-final { padding-block: clamp(96px, 13vw, 190px); overflow: hidden; isolation: isolate; }
.cta-final::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 120%); height: 100%;
  z-index: -2; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, var(--accent-soft), transparent 70%);
}
/* Color Bends canvas. Two masks do the work: the same 150px edge fade as
   the section ambients, so the block still dissolves into the form above
   and the footer below, and a hole in the middle so the bands stay away
   from the text they sit behind. */
.bends {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 900ms var(--ease);
  /* Only the edge fade, so the block still dissolves into the form above
     and the footer below. Protecting the text is the scrim's job, and
     doing it twice just washed the bands out. */
  -webkit-mask-image: var(--amb-edges);
  mask-image: var(--amb-edges);
}
/* 0.95 is the brightest setting that still leaves 3.77:1 behind the
   heading and 6.19:1 behind the lead, measured against the brightest
   pixel the shader actually produces. */
.bends.is-live { opacity: 0.95; }
[data-theme="light"] .bends.is-live { opacity: 0.7; }
.bends__canvas { display: block; width: 100%; height: 100%; }
/* Scrim between the canvas and the text, in two zones because the two
   pieces of text have different requirements.

   The heading is large bold type, so WCAG asks 3:1 and a light veil is
   enough; the ribbons still read clearly behind it. The lead underneath
   is normal-size muted text and needs 4.5:1, so a second veil sits over
   that band only. Everything outside stays untouched, which is where the
   ribbons are at full strength.

   Worst case with a ribbon at full coverage: behind the heading the
   bands land at 47% and the composite measures about 6:1 against white;
   behind the lead they land at 13% and measure about 7:1. */
.cta-final::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(54% 32% at 50% 64%, var(--scrim-b) 0%, var(--scrim-b) 38%, transparent 82%),
    radial-gradient(78% 82% at 50% 46%, var(--scrim-a) 0%, var(--scrim-a) 42%, transparent 86%);
}
.cta-final__inner { position: relative; text-align: center; display: grid; justify-items: center; gap: 18px; }
.cta-final__inner .lead { margin-inline: auto; }
.cta-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 16px; }

/* ==================== 20. Footer ==================== */
/* The footer keeps its dividing line, but the tone fades in below it so
   the join matches the rest of the page instead of being the one hard
   step left on the way down. */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: linear-gradient(to bottom, var(--color-bg) 0, var(--color-surface-soft) 150px);
  padding-top: clamp(56px, 7vw, 88px);
}
.footer { display: grid; gap: 40px; }
@media (min-width: 640px) { .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.footer__brand p { margin-top: 14px; color: var(--color-text-muted); }
.footer__location { display: flex; align-items: center; gap: 8px; }
.footer__location .icon { color: var(--accent-text); }
.footer__social { display: flex; gap: 8px; margin-top: 16px; }
.footer__title { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; color: var(--color-text); }
.footer__col ul { display: grid; gap: 2px; margin-top: 12px; }
.footer__col a:not(.contact-link) { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); text-decoration: none; }
.footer__col a:not(.contact-link):hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; }
.footer__col .contact-link { font-weight: 500; color: var(--color-text-muted); overflow-wrap: anywhere; }
.footer__bottom { display: grid; gap: 6px; margin-top: 48px; padding-block: 24px 32px; border-top: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-text-muted); }
@media (min-width: 1024px) { .footer__bottom { grid-template-columns: 1fr 1fr auto; gap: 24px; } }

/* ==================== 21. Lightbox ==================== */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center; padding: 72px var(--page-padding) 32px;
  background: rgba(3, 7, 9, 0.9);
  opacity: 0; transition: opacity 200ms var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__img { max-width: min(100%, 900px); max-height: calc(100dvh - 120px); width: auto; border-radius: var(--radius-md); }
.lightbox__close { position: absolute; top: 16px; right: 16px; background: rgba(7, 13, 17, 0.8); color: #F4F8FA; border-color: rgba(129, 230, 217, 0.3); }

/* ==================== 22. Legal pages ==================== */
.legal-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.legal-header .nav { height: 72px; }
.legal-main { padding-block: clamp(48px, 7vw, 96px); }
.legal-header .nav__actions { margin-left: auto; }
@media (max-width: 479px) { .legal-header .brand .logo { display: none; } .legal-header .brand .iso { --iso-h: 30px; } }
.link-arrow--back { margin-bottom: 8px; }
.link-arrow--back:hover .icon { transform: translateX(-3px); }
.legal-doc > p:has(.badge) { margin-top: 12px; }
.legal-doc { max-width: 780px; margin-inline: auto; }
.legal-doc h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.035em; margin-top: 18px; }
.legal-draft {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 24px; padding: 16px 18px; border-radius: var(--radius-sm);
  background: var(--warm-soft); border: 1px solid var(--warm-border); font-size: 0.975rem;
}
.legal-draft .icon { color: var(--warm-text); margin-top: 2px; }
.legal-meta { margin-top: 14px; font-size: var(--fs-small); color: var(--color-text-muted); }
.legal-doc section { margin-top: 40px; }
.legal-doc h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -0.02em; }
.legal-doc section > p { margin-top: 12px; color: var(--color-text-muted); max-width: 70ch; }
.legal-facts { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid var(--color-border); }
.legal-facts > div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
@media (min-width: 640px) { .legal-facts > div { grid-template-columns: 200px 1fr; gap: 16px; } }
.legal-facts dt { color: var(--color-text-muted); font-size: 0.95rem; }
.legal-facts dd { font-weight: 600; overflow-wrap: anywhere; }
.legal-facts a { display: inline-flex; align-items: center; min-height: 44px; }
.is-pending { color: var(--warm-text); font-style: italic; font-weight: 600; }
.legal-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 480px; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.legal-table th { font-weight: 700; background: var(--color-surface); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table code { font-size: 0.875rem; }
.legal-doc .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .legal-doc .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legal-toc { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.legal-toc ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; text-underline-offset: 4px; }
.legal-footer { border-top: 1px solid var(--color-border); padding-block: 24px 32px; font-size: 0.8125rem; color: var(--color-text-muted); }
.legal-footer .container { display: grid; gap: 6px; }

/* ==================== 23. V3 components ====================
   Home compacto, páginas de producto, reproductor de llamada de Ane,
   tarjetas de solución con precio, garantías en ámbar y contacto. */

/* --- Navigation: the page you are on --- */
.nav__links a { position: relative; }
.nav__links a[aria-current="page"] { color: var(--color-text); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 7px; right: 7px; bottom: 7px; height: 2px;
  border-radius: 2px; background: var(--accent-fill);
}
.mobile-menu__links a[aria-current="page"] { color: var(--accent-text); }

/* --- Gradient word in headings. Forced-colours modes get plain text. --- */
.grad {
  background: linear-gradient(100deg, var(--accent-text) 0%, var(--color-cyan) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
[data-theme="light"] .grad { background-image: linear-gradient(100deg, #0F766E 0%, #0369A1 100%); }
@media (forced-colors: active) { .grad { background: none; color: CanvasText; } }

/* --- Hero (home) --- */
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 470px); gap: 56px; } }
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; }
.hero__proof li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--color-text); }
.hero__proof .icon { width: 18px; height: 18px; color: var(--accent-text); }
.hero__call { width: 100%; display: flex; justify-content: center; scroll-margin-top: calc(var(--header-h) + 24px); }
@media (min-width: 1024px) { .hero__call { justify-content: flex-end; } }
html.js-ready .hero__call { animation: rise-in 700ms 120ms var(--ease) both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) { .hero__actions > .btn { flex: 1 1 100%; } }

/* Secondary "watch a call" button carries a small play disc. */
.btn--listen { padding-left: 10px; }
.btn__play {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  transition: background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.btn__play .icon { width: 14px; height: 14px; margin-left: 2px; }
.btn--listen:hover .btn__play { background: var(--accent-fill); color: var(--on-accent); }

/* --- Ane call player ---
   Built as a call screen, not a chat: who is calling, a live status with
   a running clock, a waveform that moves for whoever speaks, and the
   transcript arriving in order. data-speaking drives the colour. */
.call {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 470px;
  padding: 18px 18px 16px; border-radius: 28px;
  background:
    radial-gradient(120% 70% at 50% -20%, var(--accent-soft), transparent 62%),
    var(--card-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}
.call::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--color-accent), var(--color-cyan), transparent);
  opacity: 0.65;
}
.call__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.call__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.call__avatar {
  position: relative; display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(140deg, var(--color-accent), var(--color-cyan));
  color: #042420;
}
.call__avatar .icon { width: 22px; height: 22px; }
.call__avatar::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--color-accent); opacity: 0;
}
.call[data-speaking="ane"] .call__avatar::after,
.call[data-speaking="ring"] .call__avatar::after { animation: avatar-ring 1.4s var(--ease) infinite; }
@keyframes avatar-ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.35); opacity: 0; } }
.call__name { font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.call__role { font-size: 0.8125rem; color: var(--color-text-muted); }

.call__status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 9px 12px; border-radius: 14px;
  background: var(--color-bg); border: 1px solid var(--color-border);
}
.call__state { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--accent-text); }
.call__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-muted); }
.call[data-status="live"] .call__dot,
.call[data-status="ringing"] .call__dot { background: var(--accent-fill); animation: dot-blink 1.2s ease-in-out infinite; }
@keyframes dot-blink { 50% { opacity: 0.35; } }
.call__timer { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }

/* Waveform: 28 bars with fixed resting heights, so the shape reads as a
   voice even before anything plays. */
.call__wave { display: flex; align-items: center; gap: 3px; height: 40px; margin: 14px 2px 4px; }
.call__wave i {
  flex: 1; height: 100%; border-radius: 2px;
  background: var(--color-text-muted); opacity: 0.25;
  transform: scaleY(0.18); transform-origin: center;
  transition: background-color var(--t-card) var(--ease), opacity var(--t-card) var(--ease);
}
.call__wave i:nth-child(4n)   { transform: scaleY(0.30); }
.call__wave i:nth-child(4n+1) { transform: scaleY(0.14); }
.call__wave i:nth-child(4n+2) { transform: scaleY(0.40); }
.call[data-speaking="ane"] .call__wave i { background: linear-gradient(180deg, var(--color-cyan), var(--color-accent)); opacity: 0.95; animation: bar 0.9s var(--ease) infinite alternate; }
.call[data-speaking="client"] .call__wave i { background: var(--color-text-muted); opacity: 0.7; animation: bar 1.1s var(--ease) infinite alternate; }
.call[data-speaking="event"] .call__wave i { opacity: 0.4; }
.call__wave i:nth-child(3n)   { animation-duration: 1.3s; }
.call__wave i:nth-child(3n+1) { animation-duration: 0.75s; }
.call__wave i:nth-child(5n)   { animation-delay: -0.4s; }
.call__wave i:nth-child(7n)   { animation-delay: -0.7s; }
.call__wave i:nth-child(2n)   { animation-delay: -0.2s; }
@keyframes bar { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }

.call__log {
  display: flex; flex-direction: column; gap: 10px;
  height: 300px; margin-top: 8px; padding: 12px 4px 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 100%);
}
.call__log:focus-visible { outline-offset: -2px; border-radius: 12px; }
.call--tall .call__log { height: 380px; }
.call__line { display: grid; gap: 4px; max-width: 88%; }
.call__line p {
  padding: 10px 14px; border-radius: 18px;
  font-size: 0.9375rem; line-height: 1.5;
}
.call__speaker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--color-text-muted); }
.call__line[data-who="ane"] .call__speaker { color: var(--accent-text); }
.call__line[data-who="ane"] p {
  background: var(--accent-soft); border: 1px solid var(--color-border-hover);
  border-bottom-left-radius: 6px;
}
.call__line[data-who="client"] { align-self: flex-end; text-align: right; }
.call__line[data-who="client"] p {
  text-align: left; background: var(--color-surface-raised); border: 1px solid var(--color-border);
  border-bottom-right-radius: 6px;
}
.call__event {
  align-self: center; display: flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 7px 12px; border-radius: var(--radius-pill);
  border: 1px dashed var(--field-border);
  font-size: 0.8125rem; color: var(--cyan-text);
}
.call__event .icon { width: 15px; height: 15px; flex-shrink: 0; }
.call__event--human { color: var(--warm-text); border-color: var(--warm-border); background: var(--warm-soft); border-style: solid; }
.call__event--done { color: var(--accent-text); border-color: var(--color-border-hover); background: var(--accent-soft); border-style: solid; font-weight: 600; }
.call__line.is-new, .call__event.is-new { animation: line-in 380ms var(--ease) both; }
@keyframes line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.call__word { opacity: 0; animation: word-in 320ms var(--ease) forwards; animation-delay: var(--w, 0ms); }
@keyframes word-in { to { opacity: 1; } }

.call__controls { display: none; margin-top: 12px; }
html.js-ready .call__controls { display: flex; }
.call__play {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 18px 0 6px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-hover); background: transparent;
  font-size: 0.9375rem; font-weight: 600; color: var(--color-text); cursor: pointer;
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.call__play:hover { background: var(--accent-soft); }
.call__play-icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent);
}
.call__play-icon .icon { width: 15px; height: 15px; }
.call__i-pause, .call__i-replay { display: none; }
.call__i-play { margin-left: 2px; }
.call__play[data-state="live"] .call__i-play, .call__play[data-state="ringing"] .call__i-play,
.call__play[data-state="done"] .call__i-play { display: none; }
.call__play[data-state="live"] .call__i-pause, .call__play[data-state="ringing"] .call__i-pause { display: block; }
.call__play[data-state="done"] .call__i-replay { display: block; }
.call__note { margin-top: 10px; font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: var(--color-text-muted); }
@media (max-width: 479px) { .call { padding: 16px 14px 14px; border-radius: 24px; } .call__log { height: 280px; } }

/* --- Before / after --- */
.compare { display: grid; gap: 18px; align-items: stretch; max-width: 1040px; margin-inline: auto; }
@media (min-width: 900px) { .compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; } }
.compare__col { height: 100%; padding: clamp(24px, 3vw, 34px); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.compare__col--before { background: var(--color-surface); }
.compare__col--after { background: radial-gradient(110% 80% at 100% 0%, var(--accent-soft), transparent 60%), var(--card-bg); }
.compare__label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.compare__label .icon { width: 22px; height: 22px; }
.compare__col--before .compare__label { color: var(--color-text-muted); }
.compare__col--after .compare__label { color: var(--accent-text); }
.compare__list { display: grid; gap: 16px; margin-top: 22px; }
.compare__list li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.compare__list .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.compare__col--before .compare__list li { color: var(--color-text-muted); }
.compare__col--before .compare__list .icon { color: var(--danger-text); }
.compare__col--after .compare__list .icon { color: var(--accent-text); }
.compare__arrow {
  display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 10px 30px -10px var(--glow-a);
}
.compare__arrow .icon { width: 22px; height: 22px; }
@media (min-width: 900px) { .compare__arrow { display: grid; } }

/* --- Three steps --- */
.flow3 { position: relative; display: grid; gap: 18px; }
@media (min-width: 900px) {
  .flow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .flow3::before {
    content: ""; position: absolute; top: 52px; left: 12%; right: 12%; height: 1px; z-index: -1;
    background: repeating-linear-gradient(90deg, var(--color-border-hover) 0 8px, transparent 8px 16px);
  }
}
.flow3__item {
  position: relative; padding: 28px; border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.flow3__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(140deg, var(--color-accent), var(--color-cyan)); color: #042420;
  box-shadow: 0 12px 30px -14px var(--glow-a);
}
.flow3__icon .icon { width: 24px; height: 24px; }
.flow3__num { position: absolute; top: 24px; right: 26px; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--color-border-hover); }
.flow3__item h3 { margin-top: 22px; font-size: clamp(1.15rem, 1.6vw, 1.3rem); }
.flow3__item p { margin-top: 10px; color: var(--color-text-muted); }

/* --- Guarantees: amber, the colour of the human side --- */
.guarantees { display: grid; gap: 14px; }
@media (min-width: 640px) { .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guarantees { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.guarantee {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border);
  transition: border-color var(--t-card) var(--ease);
}
.guarantee:hover { border-color: var(--warm-border); }
.guarantee__icon {
  display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px;
  background: var(--warm-soft); border: 1px solid var(--warm-border); color: var(--warm-text);
}
.guarantee__icon .icon { width: 21px; height: 21px; }
.guarantee h3 { font-size: 1.05rem; }
.guarantee p { margin-top: 6px; font-size: 0.95rem; color: var(--color-text-muted); }

/* --- Value grid (NFC, automations) --- */
.values { display: grid; gap: 14px; }
@media (min-width: 640px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .values { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .values--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value { padding: 24px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); }
.value__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid var(--color-border-hover); color: var(--accent-text);
}
.value__icon .icon { width: 21px; height: 21px; }
.value h3 { margin-top: 16px; font-size: 1.05rem; }
.value p { margin-top: 6px; font-size: 0.95rem; color: var(--color-text-muted); }
.chips--center { justify-content: center; max-width: 860px; margin-inline: auto; }
.ideas__title { margin-top: clamp(48px, 6vw, 72px); text-align: center; }
.ideas__intro { margin: 8px auto 24px; text-align: center; max-width: 62ch; }
.ideas__scope { margin-top: 24px; text-align: center; max-width: 70ch; margin-inline: auto; }

/* --- Page hero (product and contact pages) --- */
.page-hero {
  position: relative; isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(44px, 6vw, 84px));
  padding-bottom: clamp(56px, 7vw, 96px);
}
.page-hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
  .page-hero__grid--hub { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.page-hero h1 { margin-top: 14px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 18ch; }
.page-hero__lead { margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--color-text-muted); max-width: 58ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
@media (max-width: 479px) { .page-hero__actions > .btn { flex: 1 1 100%; } }
.page-hero .status { margin-top: 18px; }
.page-hero--product .nfc-card h1 { font-size: clamp(2rem, 4vw, 3.1rem); }

.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.875rem; color: var(--color-text-muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs [aria-current="page"] { color: var(--color-text); font-weight: 600; }
.page-hero--product .crumbs { margin-bottom: 20px; }

/* --- Price chip (hero aside) --- */
.price-chip { padding: 26px; }
.price-chip__label { font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
.price-chip__plans { display: grid; gap: 10px; margin-top: 12px; }
.price-chip__plan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.price-chip__plan--featured { background: var(--accent-soft); border-color: var(--color-border-hover); }
.price-chip__name { font-weight: 700; }
.price-chip__tag {
  display: inline-block; margin-left: 2px; padding: 2px 8px; border-radius: var(--radius-pill); vertical-align: 2px;
  background: var(--accent-fill); color: var(--on-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.price-chip__amount { display: inline-flex; align-items: baseline; gap: 2px; font-size: 1.65rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.price-chip__plan--featured .price-chip__amount { color: var(--accent-text); }
.price-chip__per { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; color: var(--color-text-muted); }
.price-chip__meta { grid-column: 1 / -1; font-size: 0.85rem; color: var(--color-text-muted); }
.price-chip__list { display: grid; gap: 10px; margin: 18px 0 6px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.price-chip__list li { display: flex; gap: 10px; align-items: center; font-weight: 600; font-size: 0.95rem; }
.price-chip__list .icon { width: 18px; height: 18px; color: var(--accent-text); }

.price-footnote { margin-top: 18px; text-align: center; }
.price-footnote a { color: var(--accent-text); }

/* --- Listen section (product page) --- */
.listen { display: grid; gap: 28px; align-items: start; justify-items: center; }
@media (min-width: 1024px) { .listen { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; justify-items: stretch; } .listen__call { display: flex; justify-content: center; } }
.listen__call { width: 100%; scroll-margin-top: calc(var(--header-h) + 24px); }
.listen .call { max-width: 520px; }
.listen .call__log { height: 360px; }

/* --- NFC page extras --- */
.proof-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--color-border-hover); font-weight: 600; font-size: 0.95rem; }
.proof-line .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); }
.included-note { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 18px; font-size: var(--fs-small); color: var(--color-text-muted); }
.included-note .icon { width: 17px; height: 17px; color: var(--accent-text); }
.included-note a { color: var(--accent-text); font-weight: 600; }

/* --- Contact page --- */
.page-hero--contact .audit { align-items: start; }
.page-hero--contact h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.next-steps { display: grid; gap: 16px; margin: 30px 0 4px; }
.next-steps li { display: flex; gap: 14px; align-items: flex-start; }
.next-steps__num {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-accent); font-weight: 700; font-size: 0.95rem;
}
.next-steps__t { font-weight: 700; }
.next-steps p:not(.next-steps__t) { margin-top: 2px; font-size: 0.95rem; color: var(--color-text-muted); }

/* --- Proof band: verifiable demo-environment facts, not client results --- */
.proof-band { padding-block: clamp(44px, 5.5vw, 72px); }
.proof-band__head { text-align: center; }
.proof-band__head h2 { margin-top: 8px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.proof-stats { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .proof-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.proof-stat {
  display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2vw, 24px);
  border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border);
}
.proof-stat__num {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  color: var(--accent-text); font-variant-numeric: tabular-nums;
}
.proof-stat__label { font-size: 0.925rem; line-height: 1.45; color: var(--color-text-muted); }
.proof-band__note { margin-top: 18px; text-align: center; }

/* Form status (server mode only; hidden while the form just prepares a
   WhatsApp message) */
.form__status { margin-top: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
.form__status--error {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 12px;
  background: var(--warm-soft); border: 1px solid var(--warm-border); color: var(--warm-text);
}

/* --- Final CTA proof line --- */
.cta-final__proof { margin-top: 18px; font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }

/* --- Sub pages: the first section sits under the fixed header --- */
.subpage .site-header { background: var(--nav-scrolled); border-bottom-color: var(--color-border); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ==================== 24. Reveal & motion ==================== */
html.js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-enter) var(--ease), transform var(--t-enter) var(--ease); }
html.js-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.js-ready .reveal { opacity: 1; transform: none; }
  html.js-ready .hero__call { animation: none; }
  .btn--primary::after { display: none; }
  .eyebrow--pill::before {
    background-image: linear-gradient(90deg, var(--color-cyan), var(--color-accent));
    background-size: 100% 100%; background-position: 0 0;
  }
  .hub__pulse { display: none; }
  .hub::after { display: none; }
  .hub__ripples { display: none; }
  /* Ambient colour stays, including its edge fade, so the joins between
     sections still dissolve; only the movement goes. */
  [data-amb]::after { display: none; }
  /* The call plays back without movement: bars keep a resting shape and
     words appear whole. */
  .call__wave i { animation: none !important; }
  .call__avatar::after { animation: none !important; }
  .btn--primary:hover { transform: none; }
  .showcase:hover .showcase__media img { transform: none; }
  .gallery__btn:hover img { transform: none; }
}

@media print {
  .site-header, .hero__light, .lightbox, .bends, .call__controls { display: none !important; }
  body { background: #fff; color: #000; }
}