/* =============================================================
   Kairos — sistema de diseño de la web
   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: 44px;
  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: 36px; } }

/* Logo de Kairos Intelligence Agency, aprobado por José el 19/10/2026: el
   águila (isotipo) y el nombre en Montserrat. El águila es una máscara PNG
   extraída del original aprobado, así toma el color del tema: turquesa
   sobre oscuro, tinta oscura sobre claro (como las variantes de la lámina).
   El ojo va en una segunda máscara, en cian. */
.iso.iso--eagle { width: calc(var(--iso-h) * 1.1615); height: var(--iso-h); overflow: visible; }
.iso.iso--eagle::before, .iso.iso--eagle::after { content: ""; position: absolute; inset: 0; }
.iso.iso--eagle::before {
  background: var(--logo-eagle);
  -webkit-mask: url("../img/kairos-isotipo.png") center / contain no-repeat;
  mask: url("../img/kairos-isotipo.png") center / contain no-repeat;
}
.iso.iso--eagle::after {
  background: var(--logo-eye);
  -webkit-mask: url("../img/kairos-isotipo-ojo.png") center / contain no-repeat;
  mask: url("../img/kairos-isotipo-ojo.png") center / contain no-repeat;
}
.logo.logo--text {
  width: auto; height: auto; overflow: visible;
  display: inline-flex; flex-direction: column; gap: 0.3em;
  font-size: calc(var(--logo-h) * 1.4); line-height: 1; color: var(--color-text);
}
.logo__name { font-weight: 800; letter-spacing: 0.06em; }
.logo__desc { font-size: 0.3em; font-weight: 600; letter-spacing: 0.27em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; }
:root { --logo-eagle: #2DD4BF; --logo-eye: #38BDF8; }
[data-theme="light"] { --logo-eagle: #0B151B; --logo-eye: #0369A1; }
@media (forced-colors: active) { .iso.iso--eagle::before, .iso.iso--eagle::after { background: CanvasText; } }

/* ==================== 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: 42px; }
}

/* ==================== 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); }
.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 offer: 1 unit and the approved 2-unit pack (featured), then
   "more units or resale" by enquiry. Information requests only. */
.nfc-offer { display: grid; gap: 14px; margin-top: 4px; padding-top: 12px; }
@media (min-width: 480px) { .nfc-offer { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } }
@media (max-width: 479px) { .nfc-offer__card--featured { order: -1; } }
.nfc-offer__card {
  position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px 16px 16px;
  border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border);
}
.nfc-offer__card--featured {
  background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), transparent 62%), var(--color-surface-raised);
  border-color: var(--color-border-hover); box-shadow: var(--shadow-lg);
}
.nfc-offer__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 12px;
  border-radius: var(--radius-pill); background: var(--accent-fill); color: var(--on-accent);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 8px 22px -10px var(--glow-a);
}
.nfc-offer__badge .icon { width: 12px; height: 12px; }
.nfc-offer__label { font-size: var(--fs-small); font-weight: 700; color: var(--color-text); }
.nfc-offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; }
.nfc-offer__amount { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--color-text); font-variant-numeric: tabular-nums; }
.nfc-offer__card--featured .nfc-offer__amount { color: var(--accent-text); }
.nfc-offer__sub { font-size: var(--fs-small); color: var(--color-text-muted); }
.nfc-offer__each { font-size: var(--fs-small); font-weight: 700; color: var(--color-text); }
.nfc-offer__compare { font-size: 0.82rem; line-height: 1.4; color: var(--color-text-muted); }
.nfc-offer__compare s { text-decoration-thickness: 1px; }
.nfc-offer__cta { width: 100%; margin-top: auto; white-space: normal; text-align: center; }
.nfc-offer__sub, .nfc-offer__compare { margin-bottom: 12px; }
.nfc-offer__vat { margin-top: 10px; font-size: var(--fs-small); color: var(--color-text-muted); }
/* Más unidades / reventa: tarjeta llamativa como el pack, sin tarifa. */
.nfc-offer__more {
  display: flex; flex-direction: column; gap: 6px; margin-top: 26px; padding: 26px 18px 18px;
  border-radius: var(--radius-md); border-color: var(--color-border-hover);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--accent-soft), transparent 60%),
    radial-gradient(70% 90% at 0% 100%, var(--accent-soft), transparent 65%),
    var(--color-surface-raised);
}
.nfc-offer__badge--start { left: 18px; transform: translateY(-50%); }
.nfc-offer__more-title { font-size: clamp(1.15rem, 2.2vw, 1.35rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-text); }
.nfc-offer__more-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 2px; }
.nfc-offer__more-amount { font-size: clamp(1.7rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--accent-text); }
.nfc-offer__more-price-sub { font-size: var(--fs-small); font-weight: 600; color: var(--color-text-muted); }
.nfc-offer__more-text { font-size: 0.95rem; line-height: 1.5; color: var(--color-text-muted); }
.nfc-offer__more-list { display: grid; gap: 8px; margin: 8px 0 14px; padding: 0; list-style: none; }
.nfc-offer__more-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; line-height: 1.45; color: var(--color-text); }
.nfc-offer__more-list .icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-text); }
.nfc-offer__note { margin-top: 12px; }
.pack__vat { margin-top: 2px; font-size: 0.8rem; color: var(--color-text-muted); }

/* Black-background product photos: whole, undistorted, with breathing room,
   on a black close to the photos' own so the frame disappears. */
.gallery__btn--photo { background: #0b0b0c; }
.gallery__btn--photo img { box-sizing: border-box; padding: 4%; }
.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 */

/* ==================== 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: 40px; } }
.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; } }

/* ==================== Kairos 22/10: portada, webs y nosotros ====================
   Un único momento de entrada (hero) y movimiento que responde a la persona o
   al desplazamiento. Todo se detiene con prefers-reduced-motion (bloque final). */

/* --- Hero: entrada escalonada y contacto visible --- */
.hero__in { --i: 0; }
.hero__in[data-i="1"] { --i: 1; } .hero__in[data-i="2"] { --i: 2; } .hero__in[data-i="3"] { --i: 3; }
.hero__in[data-i="4"] { --i: 4; } .hero__in[data-i="5"] { --i: 5; }
html.js-ready .hero__in { animation: hero-in 820ms calc(var(--i) * 110ms + 80ms) var(--ease) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero__line { display: inline; }
.hero__contact { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; }
.hero__contact .contact-link { font-size: var(--fs-small); color: var(--color-text-muted); }
.hero__contact .contact-link:hover { color: var(--color-text); }

/* --- Emblema: el águila aprobada con anillos que giran despacio --- */
.emblem {
  --shift: 0px;
  position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto;
  display: grid; place-items: center; transform: translateY(var(--shift));
}
.emblem::before {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.22), transparent 68%); filter: blur(18px);
}
.emblem__ring { position: absolute; border-radius: 50%; border: 1px solid var(--color-border-hover); }
.emblem__ring--1 { inset: 6%; border-style: dashed; animation: spin 48s linear infinite; }
.emblem__ring--2 { inset: 20%; border-color: var(--color-border); animation: spin 32s linear infinite reverse; }
.emblem__ring--1::after {
  content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--color-cyan); box-shadow: 0 0 18px var(--color-cyan);
}
@keyframes spin { to { transform: rotate(360deg); } }
.emblem__eagle { position: relative; display: grid; place-items: center; animation: float 7s var(--ease) infinite alternate; }
.emblem__eagle .iso { --iso-h: clamp(120px, 22vw, 190px); filter: drop-shadow(0 18px 40px rgba(45, 212, 191, 0.25)); }
@keyframes float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
html.js-ready .emblem { animation: rise-in 900ms 260ms var(--ease) both; }
.emblem__tag {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: var(--radius-pill); background: var(--glass); border: 1px solid var(--color-border);
  font-size: 0.85rem; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-md);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.emblem__tag .icon { width: 16px; height: 16px; color: var(--accent-text); }
.emblem__tag--web { top: 10%; left: -2%; animation: float 6s var(--ease) infinite alternate; }
.emblem__tag--nfc { top: 70%; right: -4%; animation: float 7.5s var(--ease) -2s infinite alternate; }
.emblem__tag--ai { bottom: 4%; left: 2%; animation: float 6.8s var(--ease) -4s infinite alternate; }
.emblem--page { width: min(100%, 340px); }
@media (max-width: 1023px) { .emblem { width: min(80%, 340px); } .emblem__tag { font-size: 0.78rem; padding: 6px 11px; } }

/* --- Banda de capacidades --- */
.marquee {
  display: flex; overflow: hidden; gap: 0; padding: 18px 0;
  border-block: 1px solid var(--color-border); background: var(--color-surface-soft);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; flex-shrink: 0; gap: 0; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap;
  font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 700; color: var(--color-text-muted);
}
.marquee__track li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-text); opacity: 0.7; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* --- Servicios en cuadrícula --- */
.bento { display: grid; gap: 18px; }
@media (min-width: 760px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .bento { grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; }
  .tile--web { grid-row: span 2; }
}
.tile {
  --mx: 50%; --my: 0%;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--card-bg);
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(45, 212, 191, 0.12), transparent 60%);
  transition: opacity var(--t-card) var(--ease);
}
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; z-index: 1; }
.tile__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: clamp(22px, 2.6vw, 32px); }
.tile__body .status { margin-top: 0; }
.tile__title { margin-top: 14px; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -0.02em; }
.tile__text { margin-top: 10px; color: var(--color-text-muted); max-width: 48ch; }
.tile__link { margin-top: auto; padding-top: 18px; }
.tile__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.tile__icon .icon { width: 22px; height: 22px; }
.tile__visual { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-surface-soft); }

/* Navegador dibujado: la web se «monta» en bucle. */
.tile__visual--browser { display: flex; flex-direction: column; padding: 22px 22px 0; min-height: 230px; }
@media (min-width: 1100px) { .tile--web .tile__visual--browser { flex: 1; } .tile--web .browser__row:last-of-type { flex: 1; } }
.browser__bar { display: flex; gap: 6px; padding: 10px 12px; border-radius: 12px 12px 0 0; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-bottom: 0; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-hover); }
.browser__hero, .browser__row, .browser__line {
  display: block; margin-inline: 0; background: var(--color-surface); border-inline: 1px solid var(--color-border);
}
.browser__hero { height: 92px; background: linear-gradient(120deg, rgba(45, 212, 191, 0.28), rgba(56, 189, 248, 0.18)); animation: build 6s var(--ease) infinite; transform-origin: left; }
.browser__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; }
.browser__row b { height: 46px; border-radius: 8px; background: var(--color-surface-raised); animation: build 6s var(--ease) infinite; transform-origin: left; }
.browser__row b:nth-child(2) { animation-delay: 0.25s; } .browser__row b:nth-child(3) { animation-delay: 0.5s; }
.browser__line { height: 10px; padding: 0 14px; background: none; }
.browser__line::before { content: ""; display: block; height: 10px; width: 70%; border-radius: 6px; background: var(--color-surface-raised); animation: build 6s 0.7s var(--ease) infinite; transform-origin: left; }
.browser__line--short::before { width: 42%; }
@keyframes build { 0%, 8% { transform: scaleX(0); opacity: 0; } 24%, 86% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* Foto real del soporte con ondas de lectura NFC. */
.tile__visual--photo { height: 220px; background: #000; }
.tile__visual--photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 900ms var(--ease); }
.tile:hover .tile__visual--photo img { transform: scale(1.05); }
.tap-ripple { position: absolute; top: 34%; left: 50%; width: 0; height: 0; }
.tap-ripple i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--color-cyan); opacity: 0; animation: ripple 2.8s var(--ease) infinite; }
.tap-ripple i:nth-child(2) { animation-delay: 1.4s; }
@keyframes ripple { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }

/* Onda de voz del asistente. */
.tile__visual--wave { display: grid; place-items: center; height: 220px; }
.wave { display: flex; align-items: center; gap: 6px; height: 90px; }
.wave i { width: 6px; height: 100%; border-radius: 6px; background: linear-gradient(var(--color-accent), var(--color-cyan)); animation: wave 1.3s ease-in-out infinite; transform-origin: center; }
.wave i:nth-child(2n) { animation-delay: -0.3s; } .wave i:nth-child(3n) { animation-delay: -0.6s; } .wave i:nth-child(4n) { animation-delay: -0.9s; } .wave i:nth-child(5n) { animation-delay: -0.15s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

/* --- Webs (resumen en portada) --- */

/* --- Asistentes --- */

/* --- Proceso: línea que se rellena con el scroll --- */
.timeline { --progress: 1; position: relative; display: grid; gap: 18px; counter-reset: none; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } }
.timeline::before, .timeline::after { content: ""; position: absolute; border-radius: 2px; }
.timeline::before { background: var(--color-border); }
.timeline::after { background: linear-gradient(90deg, var(--color-accent), var(--color-cyan)); transform-origin: left top; }
html.has-motion .timeline { --progress: 0; }
@media (min-width: 900px) {
  .timeline::before, .timeline::after { top: 22px; left: 6%; right: 6%; height: 2px; }
  .timeline::after { transform: scaleX(var(--progress)); }
}
@media (max-width: 899px) {
  .timeline::before, .timeline::after { left: 21px; top: 10px; bottom: 10px; width: 2px; }
  .timeline::after { transform: scaleY(var(--progress)); background: linear-gradient(var(--color-accent), var(--color-cyan)); }
  .timeline__step { padding-left: 62px; }
}
.timeline__step { position: relative; }
.timeline__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-bg); border: 2px solid var(--color-border-hover); color: var(--accent-text); font-weight: 800;
}
@media (max-width: 899px) { .timeline__dot { position: absolute; left: 0; top: 0; } }
.timeline__step h3 { margin-top: 16px; font-size: 1.05rem; }
@media (max-width: 899px) { .timeline__step h3 { margin-top: 10px; } }
.timeline__step p { margin-top: 6px; font-size: 0.95rem; color: var(--color-text-muted); }

/* --- Proyectos --- */

/* --- Nosotros (síntesis) --- */
.about-band__grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .about-band__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.about-band__text h2 { margin-top: 12px; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.03em; }
.about-band__quote { margin: 20px 0 22px; padding-left: 18px; border-left: 3px solid var(--accent-text); font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--color-text); }
.pillars { display: grid; gap: 12px; }
@media (min-width: 560px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pillar { display: grid; gap: 4px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); transition: border-color var(--t-card) var(--ease), transform var(--t-card) var(--ease); }
.pillar:hover { border-color: var(--color-border-hover); transform: translateY(-3px); }
.pillar__name { font-weight: 800; color: var(--accent-text); }
.pillar__act { font-size: 0.95rem; color: var(--color-text-muted); }

/* --- Página de webs --- */
.device { position: relative; width: min(100%, 440px); margin-inline: auto; padding-bottom: 40px; }
.device__screen { overflow: hidden; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }
.device__screen .browser__bar { border-radius: 0; border: 0; border-bottom: 1px solid var(--color-border); }
.device__nav { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; }
.device__nav b { width: 38px; height: 8px; border-radius: 4px; background: var(--color-surface-raised); }
.device__hero { display: grid; gap: 10px; padding: 26px 18px; background: linear-gradient(120deg, rgba(45, 212, 191, 0.20), rgba(56, 189, 248, 0.12)); }
.device__hero b { height: 12px; width: 72%; border-radius: 6px; background: var(--color-text); opacity: 0.85; }
.device__hero b:nth-child(2) { width: 52%; opacity: 0.4; }
.device__hero .device__btn { width: 96px; height: 26px; border-radius: 999px; background: var(--accent-fill); opacity: 1; animation: pulse-btn 2.6s var(--ease) infinite; }
@keyframes pulse-btn { 0%, 100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(45, 212, 191, 0); } }
.device__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 18px 20px; }
.device__cards i { height: 64px; border-radius: 10px; background: var(--color-surface-raised); border: 1px solid var(--color-border); }
.device__phone {
  position: absolute; right: -6px; bottom: 0; width: 34%; overflow: hidden; padding-top: 16px;
  border-radius: 22px; background: var(--color-surface); border: 6px solid var(--color-surface-raised); box-shadow: var(--shadow-lg);
  animation: float 6s var(--ease) infinite alternate;
}
.device__hero--phone { padding: 16px 10px; }
.device__hero--phone .device__btn { width: 60px; height: 18px; }
.device__cards--phone { grid-template-columns: 1fr; padding: 10px; }
.device__cards--phone i { height: 34px; }
.limits { margin-top: 28px; padding: 22px 24px; border-radius: var(--radius-md); border: 1px dashed var(--color-border-hover); }
.limits p { margin-top: 8px; color: var(--color-text-muted); }
.scopes { display: grid; gap: 18px; }
@media (min-width: 900px) { .scopes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scope { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 30px); border-radius: var(--radius-lg); background: var(--card-bg); overflow: hidden; }
.scope::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(45, 212, 191, 0.12), transparent 60%); transition: opacity var(--t-card) var(--ease); }
.scope:hover::before { opacity: 1; }
.scope--featured { border-color: var(--color-border-hover); }
.scope__name { font-size: 1.25rem; }
.scope__for { margin: 8px 0 16px; color: var(--color-text-muted); font-size: 0.95rem; }
.scope__price { margin-top: auto; padding-top: 20px; font-weight: 800; color: var(--accent-text); }
.scopes__cta { display: grid; justify-items: center; gap: 14px; margin-top: 32px; text-align: center; }

/* --- Página nosotros --- */
.statements { display: grid; gap: 18px; }
@media (min-width: 900px) { .statements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.statement { padding: clamp(26px, 4vw, 44px); border-radius: var(--radius-lg); }
.statement__title { margin-top: 10px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; }
.statement__text { margin-top: 16px; font-size: clamp(1.02rem, 1.4vw, 1.12rem); color: var(--color-text-muted); }
.value .value__act { margin-top: 4px; font-weight: 700; color: var(--accent-text); }
.who { display: grid; gap: 28px; }
@media (min-width: 900px) { .who { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.who__text h2 { margin-top: 10px; font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; }
.who__text p:not(.eyebrow) { margin-top: 14px; color: var(--color-text-muted); max-width: 58ch; }
.who__facts { display: grid; gap: 12px; }
.who__facts li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); font-weight: 600; }
.who__facts .icon { flex-shrink: 0; color: var(--accent-text); }

/* --- Planes del asistente: validación + a medida --- */
@media (min-width: 900px) { .plans.plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 940px; margin-inline: auto; } }
.plan__excl { margin-top: 16px; font-size: 0.85rem; color: var(--color-text-muted); }

/* --- Movimiento reducido: todo quieto y visible --- */
@media (prefers-reduced-motion: reduce) {
  html.js-ready .hero__in, html.js-ready .emblem { animation: none; }
  .emblem__ring, .emblem__eagle, .emblem__tag, .marquee__track, .browser__hero, .browser__row b,
  .browser__line::before, .tap-ripple i, .wave i, .device__phone, .device__hero .device__btn { animation: none; }
  .tap-ripple { display: none; }
  .wave i { transform: scaleY(0.6); }
  .marquee { overflow-x: auto; }
}
@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; }
  .gallery__btn:hover img { transform: none; }
}

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

.browser__row--gallery { grid-template-columns: 1.4fr 1fr; padding-top: 18px; }
.browser__row--gallery b { height: auto; min-height: 70px; background: linear-gradient(140deg, rgba(56, 189, 248, 0.18), rgba(45, 212, 191, 0.10)); }

/* ==================== Kairos 22/10 (2): órbita, botones, escena, asistente ==================== */

/* --- Botones: menos píldora con brillo, más objeto. Esquinas contenidas,
   relieve sutil y la flecha en su propia pieza. --- */
.btn { border-radius: 12px; font-weight: 700; letter-spacing: -0.005em; }
.btn--sm { border-radius: 10px; }
.btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 8px 18px -10px rgba(45, 212, 191, 0.7);
}
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.14), 0 14px 26px -12px rgba(45, 212, 191, 0.75); }
.btn--primary .icon--arrow {
  width: 28px; height: 28px; padding: 6px; margin-right: -12px; border-radius: 8px;
  background: rgba(4, 36, 32, 0.14); box-sizing: border-box;
}
[data-theme="light"] .btn--primary .icon--arrow { background: rgba(255, 255, 255, 0.18); }
.btn--secondary { background: var(--color-surface); border-color: var(--color-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.btn--secondary:hover { transform: translateY(-1px); }
.btn--whatsapp { border-radius: 12px; }

/* --- Etiquetas de estado: chapa sobria; el punto late solo cuando el
   servicio está disponible. --- */
.status { border-radius: 8px; padding: 6px 12px 6px 10px; font-weight: 700; letter-spacing: 0.005em; border-width: 1px; }
.status__dot { position: relative; }
.status:not(.status--info):not(.status--pilot) .status__dot::after,
.status--pilot .status__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0;
  animation: live 2.2s var(--ease) infinite;
}
@keyframes live { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }

/* --- Hero: sectores que rotan --- */
.hero__for { margin-top: 18px; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; color: var(--color-text); }
/* --- Emblema: el águila es el sol y los servicios giran en órbita --- */
.emblem { container-type: inline-size; width: min(100%, 470px); }
.emblem__rays {
  position: absolute; inset: 24%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(45, 212, 191, 0.16) 0deg 4deg, transparent 4deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 36%, #000 37%, transparent 70%);
  mask: radial-gradient(circle, transparent 36%, #000 37%, transparent 70%);
  animation: spin 90s linear infinite;
}
.emblem__sun { position: relative; z-index: 1; display: grid; place-items: center; width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(45, 212, 191, 0.22), rgba(56, 189, 248, 0.08) 55%, transparent 72%);
  animation: sun-pulse 5s var(--ease) infinite alternate; }
.emblem__sun .iso { --iso-h: clamp(80px, 19cqi, 128px); filter: drop-shadow(0 12px 34px rgba(45, 212, 191, 0.35)); }
@keyframes sun-pulse { from { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.0), 0 0 60px 10px rgba(45, 212, 191, 0.10); } to { box-shadow: 0 0 0 14px rgba(45, 212, 191, 0.05), 0 0 90px 24px rgba(45, 212, 191, 0.16); } }
.emblem__ring--1 { inset: 15%; }
.emblem__ring--2 { inset: 29%; }
.emblem { width: min(100%, 520px); }

.orbit { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; animation: spin 60s linear infinite; }
.orbit__item { --r: 35cqi; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.orbit__item--1 { --a: -90deg; } .orbit__item--2 { --a: -30deg; } .orbit__item--3 { --a: 30deg; }
.orbit__item--4 { --a: 90deg; } .orbit__item--5 { --a: 150deg; } .orbit__item--6 { --a: 210deg; }
.orbit__chip {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 6px; border-radius: 14px; white-space: nowrap;
  background: var(--color-surface); border: 1px solid var(--color-border-hover);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-size: 0.86rem; font-weight: 700; line-height: 1; color: var(--color-text);
  transform: translate(-50%, -50%); animation: spin-back 60s linear infinite;
}
@keyframes spin-back { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.orbit__ico { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; color: #042420;
  background: linear-gradient(140deg, #5EEAD4, #2DD4BF); }
.orbit__ico .icon { width: 16px; height: 16px; }
.orbit__ico--voice, .orbit__ico--wa { background: linear-gradient(140deg, #7DD3FC, #38BDF8); }
.orbit__ico--nfc { background: linear-gradient(140deg, #A7F3D0, #34D399); }
.orbit__ico--maint, .orbit__ico--auto { background: linear-gradient(140deg, #99F6E4, #14B8A6); }
.orbit__label { display: block; padding-top: 1px; }
.emblem:hover .orbit, .emblem:hover .orbit__chip, .emblem:hover .emblem__rays { animation-play-state: paused; }
@media (max-width: 640px) {
  .emblem { width: min(96%, 390px); margin-top: 8px; }
  .orbit__item { --r: 37cqi; }
  .orbit__chip { flex-direction: column; gap: 5px; padding: 7px 8px; border-radius: 12px; font-size: 0.68rem; white-space: normal; text-align: center; max-width: 92px; }
  .orbit__ico { width: 26px; height: 26px; }
}

/* --- Bloque humano y escena NFC --- */
@keyframes star { 0%, 42% { transform: scale(0); } 48%, 80% { transform: scale(1); } 90%, 100% { transform: scale(0); } }

/* --- Asistente de ayuda flotante --- */
.helper { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 120; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.helper__launcher {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border-hover);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(45, 212, 191, 0.06);
  transition: transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease);
}
.helper__launcher:hover { transform: translateY(-3px) rotate(-3deg); }
.helper__launcher::before { content: ""; position: absolute; inset: -6px; border-radius: 24px; border: 2px solid rgba(45, 212, 191, 0.35); opacity: 0; animation: launcher-ping 3.2s var(--ease) infinite; }
@keyframes launcher-ping { 0% { transform: scale(0.9); opacity: 0.8; } 70%, 100% { transform: scale(1.18); opacity: 0; } }
.helper.is-open .helper__launcher::before { animation: none; }
.helper__launcher-logo .iso { --iso-h: 32px; }
.helper__badge { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #25D366; color: #fff; border: 3px solid var(--color-bg); }
.helper__badge .icon { width: 13px; height: 13px; }
.helper__hint { position: relative; max-width: 240px; padding: 12px 36px 12px 14px; border-radius: 14px 14px 4px 14px; background: var(--color-surface); border: 1px solid var(--color-border-hover); box-shadow: var(--shadow-md); font-size: 0.9rem; font-weight: 600; animation: rise-in 500ms var(--ease) both; }
.helper__hint-close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.helper__hint-close .icon { width: 14px; height: 14px; }
.helper__panel {
  display: flex; flex-direction: column; width: min(392px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 120px)); overflow: hidden;
  border-radius: 22px; background: var(--color-bg); border: 1px solid var(--color-border-hover); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  animation: panel-in 320ms var(--ease) both; transform-origin: bottom right;
}
.helper__panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.helper__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: linear-gradient(120deg, rgba(45, 212, 191, 0.14), rgba(56, 189, 248, 0.06)); border-bottom: 1px solid var(--color-border); }
.helper__logo { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }
.helper__logo .iso { --iso-h: 22px; }
.helper__who { flex: 1; min-width: 0; }
.helper__title { font-size: 1rem; line-height: 1.2; }
.helper__sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 0.78rem; color: var(--color-text-muted); }
.helper__online { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.helper__close { flex-shrink: 0; }
.helper__log { flex: 1; min-height: 140px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.helper__msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: 0.92rem; line-height: 1.45; animation: rise-in 280ms var(--ease) both; }
.helper__msg--bot { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 5px; }
.helper__msg--user { align-self: flex-end; background: var(--accent-fill); color: var(--on-accent); border-bottom-right-radius: 5px; font-weight: 600; }
.helper__typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.helper__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); animation: typing 1s ease-in-out infinite; }
.helper__typing i:nth-child(2) { animation-delay: 0.15s; } .helper__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(-4px); opacity: 1; } }
.helper__actions { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; max-width: 92%; }
.helper__action { padding: 8px 12px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; text-decoration: none; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--color-border-hover); }
.helper__action:hover { background: var(--color-surface-raised); }
.helper__action--wa { color: #fff; background: #15803D; border-color: transparent; }
.helper__action--wa:hover { background: #166534; }
.helper__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.helper__chip { padding: 8px 12px; border-radius: 10px; font: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease); }
.helper__chip:hover { border-color: var(--color-border-hover); background: var(--color-surface-raised); }
.helper__chip--primary { color: var(--accent-text); border-color: var(--color-border-hover); background: var(--accent-soft); }
.helper__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--color-border); }
.helper__form input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 0.92rem; color: var(--color-text); background: var(--field-bg); border: 1px solid var(--field-border); }
.helper__form input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.helper__send { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 12px; cursor: pointer; background: var(--accent-fill); color: var(--on-accent); }
.helper__wa { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 12px; min-height: 46px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 0.92rem; color: #fff; background: #15803D; }
.helper__wa:hover { background: #166534; }
.helper__wa .icon { width: 18px; height: 18px; }
.helper__note { padding: 8px 14px 12px; font-size: 0.72rem; color: var(--color-text-muted); text-align: center; }
@media (max-width: 520px) {
  .helper__panel { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: calc(100vh - 16px); }
  .helper.is-open .helper__launcher { display: none; }
}

/* --- Barra de progreso de lectura y titulares que se revelan --- */
.scroll-progress { position: fixed; inset: 0 0 auto 0; z-index: 130; height: 3px; transform-origin: left; transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, var(--color-accent), var(--color-cyan)); pointer-events: none; }
html.js-ready .section-head.reveal h2, html.js-ready .reveal > h2 { clip-path: inset(0 0 100% 0); transform: translateY(18px); transition: clip-path 900ms var(--ease) 80ms, transform 900ms var(--ease) 80ms; }
html.js-ready .section-head.reveal.is-visible h2, html.js-ready .reveal.is-visible > h2 { clip-path: inset(0 0 -10% 0); transform: none; }

@media (prefers-reduced-motion: reduce) {
  .orbit, .orbit__chip, .emblem__rays, .emblem__sun, .helper__launcher::before, .status__dot::after { animation: none !important; }
  .orbit__chip { transform: translate(-50%, -50%); }
  html.js-ready .section-head.reveal h2, html.js-ready .reveal > h2 { clip-path: none; transform: none; }
}
.hero__for { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.4em; line-height: 1.35; }
.helper__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 12px; mask: linear-gradient(90deg, #000 88%, transparent); -webkit-mask: linear-gradient(90deg, #000 88%, transparent); }
.helper__chip { flex-shrink: 0; white-space: nowrap; }

/* =============================================================
   Textos de Marca v1 (27/10): portada con tres servicios, proceso en
   cuatro pasos, Sobre Kairos con la forma de trabajar y precios de webs.
   ============================================================= */
.hero__for { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-muted); }
.hero__for .icon { width: 18px; height: 18px; color: var(--accent-text); }

@media (min-width: 760px) and (max-width: 1099px) { .bento--three .tile--web { grid-column: span 2; } }
@media (min-width: 1100px) {
  .bento--three { grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto; }
  .bento--three .tile--web { grid-row: auto; }
}
.tile__lead { margin-top: 8px; font-weight: 700; color: var(--color-text); max-width: 44ch; }
.tile__lead + .tile__text { margin-top: 8px; }

@media (min-width: 900px) { .timeline--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process-band__cta { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }

.about-band__lead { margin-top: 14px; color: var(--color-text-muted); max-width: 56ch; }
.about-band__lead:last-of-type { margin-bottom: 22px; }
.about-band__how .subhead { margin-bottom: 14px; }
.about-band__how .pillar:last-child { grid-column: 1 / -1; }
@media (max-width: 559px) { .about-band__how .pillar:last-child { grid-column: auto; } }

.scope__price { margin-top: 10px; padding-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--color-text); }
.scope__amount { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--accent-text); }
.scope__vat { font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); }
.scope__for { margin-top: 12px; font-weight: 600; color: var(--color-text); }
.limits p + p { margin-top: 10px; }
/* Botones con textos largos («Pedir presupuesto para mi web») y la maqueta
   del móvil: en pantallas estrechas no deben provocar scroll lateral. */
@media (max-width: 479px) {
  .btn--lg { max-width: 100%; white-space: normal; text-align: center; padding-inline: 22px; }
}
.device { overflow-x: clip; }

/* =============================================================
   Estilo v3 (28/10, petición de José): negro de verdad, saltos de
   color (turquesa → cielo → violeta, con un toque ámbar), botones con
   más presencia, órbita en 3D y sección de chatbots.
   ============================================================= */
:root:not([data-theme="light"]) {
  --color-bg: #000000;
  --color-surface: #0A1114;
  --color-surface-raised: #111B20;
  --color-surface-soft: #060B0D;
  --card-bg: #0A1114;
  --nav-scrolled: rgba(0, 0, 0, 0.78);
  --glass: rgba(6, 11, 13, 0.86);
}
:root {
  --violet: #8B7CFF;
  --amber: #FFC857;
  --aurora: linear-gradient(100deg, #2DD4BF 0%, #38BDF8 48%, #8B7CFF 100%);
  --aurora-soft: linear-gradient(100deg, rgba(45, 212, 191, 0.16), rgba(56, 189, 248, 0.12) 50%, rgba(139, 124, 255, 0.16));
}
[data-theme="light"] {
  --violet: #5B4BDB; --amber: #B45309;
  --aurora: linear-gradient(100deg, #0F766E 0%, #0369A1 52%, #5B4BDB 100%);
  --aurora-soft: linear-gradient(100deg, rgba(15, 118, 110, 0.08), rgba(3, 105, 161, 0.06) 50%, rgba(91, 75, 219, 0.08));
}

/* --- Botones --- */
.btn--primary {
  color: #001412; border: 0;
  background: var(--aurora); background-size: 180% 100%; background-position: 0% 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 12px 30px -12px rgba(56, 189, 248, 0.65), 0 4px 14px -6px rgba(139, 124, 255, 0.55);
  transition: background-position 500ms var(--ease), transform var(--t-micro) var(--ease), box-shadow var(--t-card) var(--ease);
}
.btn--primary:hover {
  background: var(--aurora); background-size: 180% 100%; background-position: 100% 50%; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 18px 40px -14px rgba(56, 189, 248, 0.8), 0 8px 22px -8px rgba(139, 124, 255, 0.7);
}
.btn--primary .icon--arrow { background: #000; color: #fff; border-radius: 50%; width: 30px; height: 30px; padding: 7px; margin-right: -14px; }
[data-theme="light"] .btn--primary { color: #fff; }
[data-theme="light"] .btn--primary .icon--arrow { background: rgba(255, 255, 255, 0.2); }

.btn--secondary, .btn--whatsapp {
  color: var(--color-text); border: 1px solid transparent;
  background: linear-gradient(var(--color-bg), var(--color-bg)) padding-box, var(--aurora) border-box;
  box-shadow: none;
}
.btn--secondary:hover, .btn--whatsapp:hover {
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--aurora) border-box;
  box-shadow: 0 10px 30px -14px rgba(139, 124, 255, 0.7); transform: translateY(-2px);
}
.btn--whatsapp .icon { color: #25D366; }
[data-theme="light"] .btn--whatsapp .icon { color: #15803D; }
.btn:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 3px; }

/* --- Saltos de color --- */
.grad, .hero__line.grad { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marquee { border: 0; background: var(--aurora); -webkit-mask: none; mask: none; padding: 16px 0; }
.marquee__track li { color: #001412; font-weight: 800; }
.marquee__track li::after { background: #001412; opacity: 0.55; }
[data-theme="light"] .marquee__track li { color: #fff; }
[data-theme="light"] .marquee__track li::after { background: #fff; }
.eyebrow { color: var(--color-cyan); }
[data-theme="light"] .eyebrow { color: var(--cyan-text); }
.process-band {
  background: radial-gradient(60% 80% at 15% 0%, rgba(139, 124, 255, 0.10), transparent 70%),
              radial-gradient(50% 70% at 90% 100%, rgba(45, 212, 191, 0.10), transparent 70%), var(--color-surface-soft);
}
.timeline::after { background: var(--aurora); }
.pillar__name { background: var(--aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile__visual--wave .wave i { background: var(--aurora); }

/* --- Órbita en 3D --- */
.emblem--system {
  position: relative; container-type: inline-size; width: min(100%, 560px); aspect-ratio: 1; display: grid; place-items: center;
  perspective: 1100px; perspective-origin: 50% 40%; transform-style: preserve-3d;
}
.emblem--system::before { display: none; }
.emblem__stars {
  position: absolute; inset: -6%; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 78% 14%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 62%, #BFF6EE, transparent 60%), radial-gradient(1px 1px at 22% 80%, #fff, transparent 60%),
    radial-gradient(1px 1px at 52% 6%, #C9D8FF, transparent 60%), radial-gradient(1.5px 1.5px at 6% 52%, #fff, transparent 60%),
    radial-gradient(1px 1px at 64% 92%, #fff, transparent 60%), radial-gradient(1px 1px at 94% 36%, #fff, transparent 60%);
  opacity: 0.7; animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.9; } }
.emblem__glow {
  position: absolute; inset: 20%; border-radius: 50%; filter: blur(50px); opacity: 0.5; pointer-events: none;
  background: conic-gradient(from 0deg, #2DD4BF, #38BDF8, #8B7CFF, #2DD4BF); animation: spin 18s linear infinite;
}
.system { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(66deg) rotateZ(-8deg); }
.system__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(129, 230, 217, 0.20); }
.system__ring--in { inset: 22%; }
.system__ring--out { inset: 6%; border-color: rgba(139, 124, 255, 0.26); }
.system__ring--far { inset: -6%; border-style: dashed; border-color: rgba(56, 189, 248, 0.14); }
/* Cometa: un arco de luz que recorre cada órbita. */
.system__ring--in::before, .system__ring--out::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, #2DD4BF 96%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: spin 9s linear infinite;
}
.system__ring--out::before { background: conic-gradient(from 180deg, transparent 0 72%, #8B7CFF 96%, #fff 100%); animation-duration: 14s; animation-direction: reverse; }
.system__orbit { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; animation: spin var(--dur) linear infinite; }
.system__orbit--in { --r: 28cqi; --dur: 34s; }
.system__orbit--out { --r: 44cqi; --dur: 52s; animation-direction: reverse; }
.sat {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.sat--1 { --a: -90deg; } .sat--2 { --a: 30deg; } .sat--3 { --a: 150deg; }
.sat--4 { --a: -30deg; } .sat--5 { --a: 90deg; } .sat--6 { --a: 210deg; } .sat--7 { --a: 30deg; } .sat--8 { --a: 150deg; }
.sat__chip {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px;
  white-space: nowrap; border-radius: 14px; font-size: 0.85rem; font-weight: 700; color: #fff;
  background: rgba(8, 14, 17, 0.86); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) rotateZ(8deg) rotateX(-66deg);
  animation: sat-upright var(--dur) linear infinite;
}
.system__orbit--in .sat__chip { --dur: 34s; }
.system__orbit--out .sat__chip { --dur: 52s; animation-direction: reverse; }
/* Gira al revés que su órbita y deshace la inclinación: siempre derecho. */
@keyframes sat-upright {
  from { transform: translate(-50%, -50%) rotateZ(0deg) rotateZ(8deg) rotateX(-66deg); }
  to { transform: translate(-50%, -50%) rotateZ(-360deg) rotateZ(8deg) rotateX(-66deg); }
}
.sat__ico { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; color: #001412; }
.sat__ico .icon { width: 17px; height: 17px; }
.sat__ico--web { background: linear-gradient(140deg, #5EEAD4, #2DD4BF); }
.sat__ico--nfc { background: linear-gradient(140deg, #FFE29A, #FFC857); }
.sat__ico--maint { background: linear-gradient(140deg, #A7F3D0, #34D399); }
.sat__ico--voice { background: linear-gradient(140deg, #C4BBFF, #8B7CFF); }
.sat__ico--wa { background: linear-gradient(140deg, #86EFAC, #25D366); }
.sat__ico--auto { background: linear-gradient(140deg, #7DD3FC, #38BDF8); }
.sat--dot .sat__chip { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px rgba(139, 124, 255, 0.8); }
.sat--8 .sat__chip { background: #FFC857; box-shadow: 0 0 14px 3px rgba(255, 200, 87, 0.7); }
.emblem--system .emblem__sun {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 34%; aspect-ratio: 1; margin: 0; border-radius: 50%;
  display: grid; place-items: center; transform: translate(-50%, -50%) translateZ(1px);
  background: radial-gradient(circle at 50% 40%, #0E1A1F, #000 70%); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 60px -6px rgba(45, 212, 191, 0.55), 0 0 120px -10px rgba(139, 124, 255, 0.45);
  animation: none;
}
.emblem__corona {
  position: absolute; inset: -9%; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #2DD4BF, #38BDF8, #8B7CFF, #FFC857, #2DD4BF);
  -webkit-mask: radial-gradient(farthest-side, transparent 80%, #000 82%, transparent 100%);
  mask: radial-gradient(farthest-side, transparent 80%, #000 82%, transparent 100%);
  animation: spin 10s linear infinite;
}
.emblem--system .emblem__sun .iso { --iso-h: clamp(70px, 17cqi, 118px); filter: drop-shadow(0 10px 30px rgba(45, 212, 191, 0.45)); }
.emblem--system:hover .system__orbit, .emblem--system:hover .sat__chip { animation-play-state: paused; }
[data-theme="light"] .sat__chip { color: #0B151B; background: rgba(255, 255, 255, 0.92); border-color: rgba(11, 21, 27, 0.10); }
[data-theme="light"] .emblem--system .emblem__sun { background: radial-gradient(circle at 50% 40%, #fff, #E9F1F3 70%); }
[data-theme="light"] .emblem__stars { display: none; }
@media (max-width: 1023px) {
  .emblem--system { width: min(100%, 440px); margin-inline: auto; }
  .sat__chip { font-size: 0.72rem; padding: 5px 10px 5px 5px; gap: 6px; border-radius: 11px; }
  .sat__ico { width: 24px; height: 24px; border-radius: 7px; }
  .sat__ico .icon { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .system__orbit, .sat__chip, .emblem__corona, .emblem__glow, .emblem__stars, .system__ring::before { animation: none !important; }
}

/* --- Chatbots --- */
.bots { position: relative; overflow: hidden; isolation: isolate; }
.bots::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 85% 30%, rgba(139, 124, 255, 0.20), transparent 70%),
              radial-gradient(35% 45% at 70% 85%, rgba(37, 211, 102, 0.12), transparent 70%);
}
.bots__grid { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
@media (min-width: 960px) { .bots__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.bots__text h2 { margin-top: 12px; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.035em; }
.bots__lead { margin-top: 18px; color: var(--color-text-muted); max-width: 54ch; font-size: var(--fs-body); }
.bots__points { display: grid; gap: 14px; margin-top: 26px; }
.bots__points li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.bots__ico { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px; color: #001412; }
.bots__ico .icon { width: 18px; height: 18px; }
.bots__ico--a { background: linear-gradient(140deg, #86EFAC, #25D366); }
.bots__ico--b { background: linear-gradient(140deg, #7DD3FC, #38BDF8); }
.bots__ico--c { background: linear-gradient(140deg, #C4BBFF, #8B7CFF); }
.bots__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 32px; }
.bots__demo { position: relative; margin: 0; display: grid; justify-items: center; }
.phone {
  position: relative; width: min(100%, 340px); border-radius: 34px; padding: 12px; background: #0A0F11;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 40px 90px -30px rgba(139, 124, 255, 0.55), 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}
.phone__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 24px 24px 8px 8px; background: #0F2A24; }
.phone__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #25D366; color: #00210D; }
.phone__avatar .icon { width: 18px; height: 18px; }
.phone__who { display: grid; line-height: 1.2; }
.phone__who b { font-size: 0.92rem; color: #fff; }
.phone__who small { font-size: 0.75rem; color: #9FE8BC; }
.phone__chat {
  display: flex; flex-direction: column; gap: 8px; min-height: 340px; padding: 14px 10px 12px; border-radius: 8px 8px 24px 24px;
  background: radial-gradient(circle at 20% 20%, rgba(37, 211, 102, 0.06), transparent 60%), #0B141A;
}
.bubble {
  max-width: 84%; margin: 0; padding: 9px 12px; border-radius: 14px; font-size: 0.86rem; line-height: 1.4; color: #E9EDEF;
  opacity: 0; transform: translateY(8px) scale(0.98); animation: bubble 14s var(--ease) infinite;
}
.bubble--in { align-self: flex-end; background: #005C4B; border-bottom-right-radius: 4px; }
.bubble--out { align-self: flex-start; background: #1F2C34; border-bottom-left-radius: 4px; }
.bubble--typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; background: #1F2C34; animation-name: bubble-typing; }
.bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: typing 1s ease-in-out infinite; }
.bubble--1 { animation-delay: 0.3s; } .bubble--2 { animation-delay: 1.8s; } .bubble--3 { animation-delay: 3.8s; } .bubble--4 { animation-delay: 5.2s; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(8px) scale(0.98); } 4%, 86% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes bubble-typing { 0%, 9% { opacity: 0; } 10%, 12% { opacity: 1; } 13%, 100% { opacity: 0; } }
.handoff {
  position: relative; margin-top: -42px; margin-left: clamp(0px, 22%, 180px); display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 16px; border: 1px solid transparent;
  background: linear-gradient(var(--color-surface-raised), var(--color-surface-raised)) padding-box, var(--aurora) border-box;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9); animation: float 6s var(--ease) infinite alternate;
}
.handoff__ico { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: #FFC857; color: #2A1A00; }
.handoff__ico .icon { width: 18px; height: 18px; }
.handoff__text { display: grid; line-height: 1.3; }
.handoff__text b { font-size: 0.86rem; }
.handoff__text small { font-size: 0.78rem; color: var(--color-text-muted); }
.bots__caption { margin-top: 18px; font-size: 0.8rem; color: var(--color-text-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: 1; transform: none; }
  .bubble--typing { display: none; }
  .handoff { animation: none; }
}

/* --- Asistente de ayuda: nada se aplasta y se lee desde el principio --- */
.helper__head, .helper__chips, .helper__form, .helper__wa, .helper__note, .helper__actions { flex-shrink: 0; }
.helper__chips { min-height: 52px; align-items: center; padding-top: 2px; }
.helper__log { min-height: 180px; }
.helper__msg { flex-shrink: 0; white-space: pre-line; }
.helper__panel { width: min(410px, calc(100vw - 32px)); max-height: min(680px, calc(100dvh - 110px)); }
.helper__head { background: var(--aurora-soft); }
.helper__wa { min-height: 42px; }
.helper__log { position: relative; }
/* Órbita v3, ajuste: los seis servicios en un solo anillo (no se cruzan),
   menos inclinación y sol más pequeño; el anillo interior lleva luces. */
.emblem--system { aspect-ratio: 1 / 0.86; perspective: 1300px; perspective-origin: 50% 30%; }
.system { inset: 0 0 auto; aspect-ratio: 1; top: 50%; translate: 0 -50%; transform: rotateX(58deg) rotateZ(-6deg); }
.system__ring--in { inset: 24%; }
.system__ring--out { inset: 5%; }
.system__ring--far { inset: -5%; }
.system__orbit--in { --r: 26cqi; --dur: 26s; animation-direction: normal; }
.system__orbit--out { --r: 45cqi; --dur: 60s; animation-direction: normal; }
.system__orbit--out .sat__chip { --dur: 60s; animation-direction: normal; }
.system__orbit--in .sat__chip { --dur: 26s; animation-direction: normal; }
.sat--1 { --a: -90deg; } .sat--2 { --a: -30deg; } .sat--3 { --a: 30deg; } .sat--4 { --a: 90deg; } .sat--5 { --a: 150deg; } .sat--6 { --a: 210deg; }
.sat--7 { --a: 20deg; } .sat--8 { --a: 200deg; }
.sat__chip { transform: translate(-50%, -50%) rotateZ(6deg) rotateX(-58deg); animation-name: sat-upright-58; }
@keyframes sat-upright-58 {
  from { transform: translate(-50%, -50%) rotateZ(0deg) rotateZ(6deg) rotateX(-58deg); }
  to { transform: translate(-50%, -50%) rotateZ(-360deg) rotateZ(6deg) rotateX(-58deg); }
}
.emblem--system .emblem__sun { width: 27%; }
.emblem--system .emblem__sun .iso { --iso-h: clamp(56px, 13cqi, 92px); }
.emblem__glow { inset: 24% 22%; }
@keyframes sat-upright-58 {
  from { transform: translate(-50%, -50%) rotateZ(0deg) rotateZ(6deg) rotateX(-58deg) translateZ(26px); }
  to { transform: translate(-50%, -50%) rotateZ(-360deg) rotateZ(6deg) rotateX(-58deg) translateZ(26px); }
}
@media (max-width: 600px) {
  .emblem--system { width: 100%; margin-top: 0; }
  .system__orbit--out { --r: 35cqi; }
  .system__orbit--in { --r: 21cqi; }
  .system__ring--out { inset: 15%; } .system__ring--in { inset: 29%; } .system__ring--far { inset: 6%; }
  .emblem--system .emblem__sun { width: 25%; }
  .sat__chip { font-size: 0.66rem; padding: 4px 8px 4px 4px; gap: 5px; }
  .sat__ico { width: 20px; height: 20px; border-radius: 6px; }
  .sat__ico .icon { width: 11px; height: 11px; }
}