/* ==========================================================================
   Bronze — web pública · bronze.vision
   Sistema derivado de Bronze Design System (bronze-contexts)
   Paleta: Paper / Ink / Amber (único acento) / Sky (superficies) / Cream
   Tipo: DM Sans (display+body+etiquetas) · Fragment Mono (solo dentro de
   las réplicas de producto: tickets, pantallas, datos de UI simulada)
   ========================================================================== */

/* ---------- Fuentes ---------- */
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Regular.woff2') format('woff2'),
       url('../assets/fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Medium.woff2') format('woff2'),
       url('../assets/fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../assets/fonts/DMSans-Bold.woff2') format('woff2'),
       url('../assets/fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* BEGIN iconos y mono autoalojados (scripts/build-icons.py) */
/* Generado por scripts/build-icons.py. NO editar a mano: los cambios se pierden.
   Sustituye las tres hojas completas de @phosphor-icons/web de unpkg y la de
   Fragment Mono de Google Fonts, que bloqueaban el render desde dos orígenes
   ajenos. Los subsets llevan solo los 68 iconos que el sitio usa; al
   añadir uno nuevo hay que volver a ejecutar el script o saldrá en blanco.
   Los codepoints son idénticos en las tres familias, así que la regla de
   contenido es única por icono: la familia la fijan .ph, .ph-bold y .ph-fill. */
@font-face {
  font-family: 'Phosphor';
  src: url('../assets/fonts/phosphor-regular-subset.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Phosphor-Bold';
  src: url('../assets/fonts/phosphor-bold-subset.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Phosphor-Fill';
  src: url('../assets/fonts/phosphor-fill-subset.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Fragment Mono';
  src: url('../assets/fonts/FragmentMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

.ph, .ph-bold, .ph-fill {
  speak: never;
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  letter-spacing: 0;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ph { font-family: 'Phosphor' !important; }
.ph-bold { font-family: 'Phosphor-Bold' !important; }
.ph-fill { font-family: 'Phosphor-Fill' !important; }

.ph-arrow-clockwise::before { content: "\e036"; }
.ph-arrow-down::before { content: "\e03e"; }
.ph-arrow-left::before { content: "\e058"; }
.ph-arrow-right::before { content: "\e06c"; }
.ph-arrow-up::before { content: "\e08e"; }
.ph-arrows-clockwise::before { content: "\e094"; }
.ph-bag::before { content: "\e0b0"; }
.ph-bank::before { content: "\e0b4"; }
.ph-battery-full::before { content: "\e0c0"; }
.ph-bell-ringing::before { content: "\e5e8"; }
.ph-binoculars::before { content: "\ea64"; }
.ph-camera::before { content: "\e10e"; }
.ph-caret-down::before { content: "\e136"; }
.ph-cell-signal-full::before { content: "\e142"; }
.ph-chart-donut::before { content: "\eaa6"; }
.ph-chart-line-up::before { content: "\e156"; }
.ph-chat-circle-text::before { content: "\e16e"; }
.ph-chats-circle::before { content: "\e17e"; }
.ph-check::before { content: "\e182"; }
.ph-check-circle::before { content: "\e184"; }
.ph-clock::before { content: "\e19a"; }
.ph-coins::before { content: "\e78e"; }
.ph-cooking-pot::before { content: "\e764"; }
.ph-copy::before { content: "\e1ca"; }
.ph-cpu::before { content: "\e610"; }
.ph-detective::before { content: "\e83e"; }
.ph-device-mobile-camera::before { content: "\e1e2"; }
.ph-device-tablet-speaker::before { content: "\e1ea"; }
.ph-fire::before { content: "\e242"; }
.ph-flask::before { content: "\e79e"; }
.ph-flow-arrow::before { content: "\e6ec"; }
.ph-gear::before { content: "\e270"; }
.ph-gift::before { content: "\e276"; }
.ph-globe::before { content: "\e288"; }
.ph-headset::before { content: "\e584"; }
.ph-hourglass-medium::before { content: "\e2b8"; }
.ph-image::before { content: "\e2ca"; }
.ph-info::before { content: "\e2ce"; }
.ph-lightbulb::before { content: "\e2dc"; }
.ph-list::before { content: "\e2f0"; }
.ph-magnifying-glass::before { content: "\e30c"; }
.ph-map-pin::before { content: "\e316"; }
.ph-moped::before { content: "\e824"; }
.ph-package::before { content: "\e390"; }
.ph-paper-plane-tilt::before { content: "\e398"; }
.ph-plugs-connected::before { content: "\eb5a"; }
.ph-qr-code::before { content: "\e3e6"; }
.ph-question::before { content: "\e3e8"; }
.ph-receipt::before { content: "\e3ec"; }
.ph-record::before { content: "\e3ee"; }
.ph-rocket-launch::before { content: "\e3fe"; }
.ph-seal-check::before { content: "\e606"; }
.ph-shield-check::before { content: "\e40c"; }
.ph-sparkle::before { content: "\e6a2"; }
.ph-spinner::before { content: "\e66a"; }
.ph-squares-four::before { content: "\e464"; }
.ph-star::before { content: "\e46a"; }
.ph-translate::before { content: "\e4a2"; }
.ph-tray::before { content: "\e4aa"; }
.ph-trend-up::before { content: "\e4ae"; }
.ph-trophy::before { content: "\e67e"; }
.ph-users-three::before { content: "\e68e"; }
.ph-warning::before { content: "\e4e0"; }
.ph-warning-circle::before { content: "\e4e2"; }
.ph-wifi-high::before { content: "\e4ea"; }
.ph-wifi-slash::before { content: "\e4f2"; }
.ph-wrench::before { content: "\e5d4"; }
.ph-x::before { content: "\e4f6"; }
/* END iconos y mono autoalojados */

/* ---------- Tokens ---------- */
:root {
  /* Marca */
  --paper: #FFFFFF;
  --ink: #121212;
  --amber: #FCB55D;
  --amber-deep: #F1A84D;
  --cream: #FFF6EB;
  --bronze: #8B6433;
  --sky: #DDECFE;
  --sky-tint: #E2F3FF;
  --sky-mid: #5DA3FB;
  --sky-deep: #4172B0;

  /* Neutrales */
  --slate: #525252;
  --mute: #8C8C8C;
  --hairline: #E6E6E6;
  --soft: #D1D1D1;
  --bone: #F5F5F5;

  /* Semánticos (solo en mocks de UI) */
  --success: #12B981;
  --success-tint: #ECFEF6;
  --success-ink: #147353;
  --danger: #EF4444;
  --danger-tint: #FEF2F2;

  /* Tipo */
  --font-body: 'DM Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Altura de la barra de navegación (la usa el selector de idioma en móvil) */
  --nav-h: 64px;

  /* Radios */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 1000px;

  /* Sombras (mínimas: la marca sube superficies por color) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04);
  --shadow-2: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --d-fast: 120ms;
  --d-norm: 200ms;
  --d-slow: 320ms;

  /* Layout */
  --max-w: 1160px;
  --gutter: 24px;
}

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* el marquee de logos y algún badge exceden el viewport en móvil */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
a { color: inherit; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--amber); color: var(--ink); }

/* ---------- Tipografía ---------- */
.h-display {
  font-weight: 700;
  font-size: clamp(2.4rem, 4.8vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h-1 {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h-2 {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h-3 {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--slate);
  text-wrap: pretty;
}
.body-s { font-size: .9375rem; color: var(--slate); }

/* Etiqueta de sección: tinta bronce en caja de frase, al cuerpo del texto.
   Nada de mono ni versalitas: la voz editorial siempre es DM Sans. */
.eyebrow {
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
}

.mono { font-family: var(--font-mono); }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(72px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--bone { background: var(--bone); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--sky { background: var(--sky); }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .eyebrow { margin-bottom: 12px; }
.section-head .lead { margin-top: 16px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { opacity: .85; }
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: var(--amber-deep); }
.btn--ghost { border-color: var(--soft); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--bone); }
.btn--on-dark { background: var(--paper); color: var(--ink); }
.btn--on-dark:hover { opacity: .88; }
.btn .ph { font-size: 1.15em; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  transition: gap var(--d-fast) var(--ease);
}
.link-arrow:hover { gap: 10px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav .wrap { max-width: 1280px; }
.nav__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}
.nav__logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.nav__logo img { height: 24px; width: auto; }
.nav__menu { display: flex; align-items: center; gap: 20px; min-width: 0; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  display: block;
  padding: 8px 11px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { background: var(--bone); color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__cta .btn { padding: 9px 18px; font-size: .875rem; }
@media (max-width: 1080px) and (min-width: 861px) {
  .nav__cta .btn--ghost { display: none; }
  .nav__links a { padding: 8px 9px; }
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}

/* ---------- Hero: escena de cocina con la tablet Bronze ----------
   El render (assets/img/hero/kitchen.webp, 1672×941) trae la pantalla de la
   tablet recortada en el canal alfa. La demo (.demo) vive DEBAJO del PNG,
   encajada en el hueco: x=861 y=92 w=456 h=289, radio 7 (sobre 1672×941).
   El copy se superpone a la izquierda, sobre el degradado blanco que ya trae
   la propia imagen. */
.hero {
  position: relative;
  padding-block: 0;
  overflow: clip;
  /* Mismo blanco que el borde izquierdo del render de cocina (253,253,253
     uniforme en toda la altura): cuando la escena se capa por viewport bajo,
     la franja que queda a la izquierda empalma con la foto sin costura. */
  background: #FDFDFD;
}
.hero__scene {
  position: relative;
  margin-left: auto;
  /* La escena mide alto = ancho/1.777 (ratio del render 1672×941) y el CTA del
     copy centrado acaba a ~0.5×ancho, así que a viewport panorámico caía bajo
     el fold (a 1512×720 se cortaba 36px). Cap: nunca más ancha de lo que cabe
     en un viewport de alto, pegada a la derecha. El suelo de 560px garantiza
     sitio para el copy (~522px) en ventanas muy bajas. En ≤900px no aplica:
     el breakpoint del hero pisa este width con su propio layout en columna. */
  width: min(100%, calc(max(560px, 100vh) * 1672 / 941));
  width: min(100%, calc(max(560px, 100svh) * 1672 / 941));
  container-type: inline-size;
}
.hero__kitchen {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.hero__overlay .wrap { width: 100%; }
.hero__copy { max-width: min(40%, 500px); pointer-events: auto; }
.hero__copy .h-display { font-size: clamp(2.3rem, 4.3vw, 3.5rem); }
.hero__copy .eyebrow { margin-bottom: 18px; }
.hero__copy .lead { margin-top: 20px; max-width: 30rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hl {
  position: relative;
  white-space: nowrap;
  z-index: 0;
}
.hl::after {
  content: '';
  position: absolute;
  left: -2%;
  bottom: .02em;
  width: 104%;
  height: .38em;
  background: var(--amber);
  z-index: -1;
  border-radius: 4px;
  transform: skewX(-6deg);
}

/* ---------- Demo: réplica del Bronze Tracker en la pantalla de la tablet ----
   Colores, radios y textos literales de tracker-web: fondo #0C1117, azul CTA
   #2563EB, verde Analizar #3DD668, rojo #DC2626, popup blanco radius 20.
   Unidades cqw relativas al ancho de la demo (456 nativo → 100cqw). Estados
   por data-step: boot → cam → (flash) → scan → detect → alert → fixed. */
.demo {
  position: absolute;
  /* Fallback sin JS: rect del hueco ampliado ~4px por lado contra el
     antialiasing del recorte. Con JS, main.js fija el rect base y proyecta
     la perspectiva real del hueco con una homografía (matrix3d). */
  left: 51.256%;
  top: 9.352%;
  width: 27.751%;
  height: 31.562%;
  z-index: 1;
  background: #0C1117;
  border-radius: .42cqw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  font-family: var(--font-body);
}

/* Barra superior: wordmark centrado + botones "glass" grises */
.tk__bar {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 6.6cqw;
  padding: 0 1.8cqw;
}
.tk__logo { font-size: 3cqw; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.tk__logo sup { font-size: 1.3cqw; font-weight: 500; }
.tk__chipgroup { display: flex; gap: 1cqw; justify-self: end; }
.tk__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8cqw;
  height: 3.8cqw;
  border-radius: 1cqw;
  background: linear-gradient(#393E43, #393E43) padding-box,
              linear-gradient(to bottom right, #40454A, #5C6065) border-box;
  border: 1px solid transparent;
  color: #EDF0F3;
  font-size: 2cqw;
}

/* Preview de cámara: vídeo 16:9 centrado con esquinas redondeadas */
.tk__cam {
  flex: 1;
  min-height: 0;
  margin: 0 1.8cqw;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tk__frame {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1672 / 941;
  border-radius: 1.8cqw;
  overflow: hidden;
  background: #000;
}
.demo__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Máscaras sobre la bandeja real del render (encima del PNG de cocina),
   sincronizadas con las de la pantalla vía data-step en .hero__scene */
.hero__masks {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__masks path {
  fill: rgba(18, 185, 129, .14);
  stroke: var(--success);
  stroke-width: 2.2;
  stroke-linejoin: round;
  paint-order: stroke;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.hero__masks path.m--ticket {
  fill: rgba(93, 163, 251, .14);
  stroke: var(--sky-mid);
}
.hero__scene:not([data-step]) .hero__masks path { opacity: 1; }
.hero__scene[data-step="detect"] .hero__masks path,
.hero__scene[data-step="alert"] .hero__masks path,
.hero__scene[data-step="fixed"] .hero__masks path { opacity: 1; }
.hero__scene[data-step="detect"] .hero__masks path { transition-delay: var(--d, 0s); }

/* Máscaras de segmentación reales del modelo CV */
.demo__masks {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.demo__masks path {
  fill: rgba(18, 185, 129, .2);
  stroke: var(--success);
  stroke-width: 5;
  stroke-linejoin: round;
  paint-order: stroke;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.demo__masks path.m--ticket {
  fill: rgba(93, 163, 251, .16);
  stroke: var(--sky-mid);
}

/* Código de pedido flotante (pill glass clara, como en el Tracker) */
.tk__oid {
  position: absolute;
  top: 1cqw; right: 1cqw;
  z-index: 4;
  background: rgba(237, 240, 243, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(237, 240, 243, .9);
  border-radius: 1.3cqw;
  padding: .6cqw 1.6cqw;
  font-size: 2.4cqw;
  font-weight: 700;
  color: #0C1117;
}

/* Barra de acciones: Atrás · disparo · Analizar */
.tk__actions {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.4cqw;
  align-items: stretch;
  height: 7.8cqw;
  margin: 1.4cqw 1.8cqw 1.7cqw;
}
.tk__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9cqw;
  border-radius: 1.5cqw;
  font-size: 2.2cqw;
  font-weight: 700;
  color: #0C1117;
  box-shadow: 0 0 1.6cqw rgba(12, 17, 23, .3);
}
.tk__btn i { font-size: 2.2cqw; }
.tk__btn--back { background: rgba(155, 155, 155, .9); }
.tk__btn--shot {
  width: 7.8cqw;
  background: #2563EB;
  color: #fff;
}
.tk__btn--shot i { font-size: 3.2cqw; }
.tk__btn--go { background: #3DD668; position: relative; }
.tk__badge {
  position: absolute;
  top: -1.1cqw; right: -.7cqw;
  background: #9BE6A1;
  border: 1px solid #28AA4D;
  border-radius: 4cqw;
  padding: .15cqw 1cqw;
  font-size: 1.6cqw;
  font-weight: 700;
  color: #0C1117;
  opacity: 0;
  transition: opacity .25s var(--ease);
}

/* Overlays del preview */
.demo__flash {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  z-index: 8;
  pointer-events: none;
}
.tk__capturing {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  background: rgba(0, 0, 0, .45);
  border-radius: 2.4cqw;
  padding: 1.2cqw 2.8cqw;
  color: #fff;
  font-size: 2.4cqw;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.tk__scrim {
  position: absolute; inset: 0;
  z-index: 5;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}

/* Popups de análisis (modal blanco del Tracker) */
.tk__pop {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  background: #fff;
  color: #1A1A2E;
  border-radius: 2.4cqw;
  box-shadow: 0 1.2cqw 4cqw rgba(0, 0, 0, .35);
  display: none;
}
@keyframes tk-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
.tk__pop--scan {
  align-items: center;
  gap: 1.2cqw;
  padding: 1.6cqw 2.6cqw;
  font-size: 2.4cqw;
  font-weight: 700;
  white-space: nowrap;
}
.tk__pop--scan i { color: #2563EB; font-size: 2.6cqw; animation: tk-spin 1s linear infinite; }
@keyframes tk-spin { to { transform: rotate(1turn); } }
.tk__pop--ko { width: 62cqw; padding: 2.4cqw; text-align: left; }
.tk__alerthead { display: flex; gap: 1.4cqw; align-items: flex-start; }
.tk__alerthead i { font-size: 3.6cqw; color: #DC2626; flex: none; }
.tk__alerthead h4 { margin: 0; font-size: 2.6cqw; font-weight: 700; color: #DC2626; line-height: 1.2; }
.tk__alerthead p { margin: .3cqw 0 0; font-size: 1.8cqw; color: #6B7280; line-height: 1.3; }
.tk__missing {
  margin-top: 1.8cqw;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  background: #FEF2F2;
  border: .18cqw solid #FCA5A5;
  border-radius: 1.4cqw;
  padding: 1.4cqw 1.6cqw;
}
.tk__emoji { font-size: 2.6cqw; }
.tk__mname { flex: 1; font-size: 2.3cqw; font-weight: 700; color: #18181B; }
.tk__mqty {
  background: #DC2626;
  color: #fff;
  font-size: 1.7cqw;
  font-weight: 700;
  padding: .5cqw 1.4cqw;
  border-radius: 2.4cqw;
  white-space: nowrap;
}
.tk__cta {
  margin-top: 2cqw;
  height: 5.6cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  background: #2563EB;
  color: #fff;
  border-radius: 1.4cqw;
  font-size: 2.1cqw;
  font-weight: 700;
  animation: tk-glow 2s ease-in-out infinite;
}
.tk__cta i { font-size: 2.3cqw; }
@keyframes tk-glow {
  0%, 100% { box-shadow: 0 0 .8cqw rgba(37, 99, 235, .25); }
  50% { box-shadow: 0 0 2.2cqw rgba(37, 99, 235, .6); }
}
.tk__pop--ok {
  width: 52cqw;
  padding: 3cqw 2.6cqw 2.6cqw;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqw;
  text-align: center;
}
.tk__pop--ok i { font-size: 6.6cqw; color: #22C55E; }
.tk__pop--ok h4 { margin: 0; font-size: 3cqw; font-weight: 700; color: #16A34A; }
.tk__progress {
  width: 100%;
  height: 1.1cqw;
  background: #E5E7EB;
  border-radius: .8cqw;
  overflow: hidden;
}
.tk__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: #16A34A;
  border-radius: inherit;
}
@keyframes tk-fill { to { width: 100%; } }

/* ---- Estados del ciclo ---- */
/* Sin JS / reduced motion: resultado del análisis con el aviso visible */
.demo:not([data-step]) .demo__masks path { opacity: 1; }
.demo:not([data-step]) .tk__scrim { opacity: 1; }
.demo:not([data-step]) .tk__pop--ko { display: block; }
.demo:not([data-step]) .tk__badge { opacity: 1; }

.demo[data-step="cam"] .tk__btn--shot { animation: tk-tap 1.6s var(--ease) .7s; }
@keyframes tk-tap {
  0%, 55%, 90%, 100% { transform: scale(1); }
  70% { transform: scale(.9); }
}
.demo.is-flash .demo__flash { animation: d-flash .38s ease-out; }
@keyframes d-flash { 0% { opacity: 0; } 18% { opacity: .95; } 100% { opacity: 0; } }
.demo.is-flash .tk__capturing { opacity: 1; }
.demo.has-photo .tk__badge { opacity: 1; }

.demo[data-step="scan"] .tk__scrim { opacity: .8; }
.demo[data-step="scan"] .tk__pop--scan { display: flex; animation: tk-pop .3s var(--ease) backwards; }

.demo[data-step="detect"] .demo__masks path,
.demo[data-step="alert"] .demo__masks path,
.demo[data-step="fixed"] .demo__masks path { opacity: 1; }
.demo[data-step="detect"] .demo__masks path { transition-delay: var(--d, 0s); }

.demo[data-step="alert"] .tk__scrim { opacity: 1; }
.demo[data-step="alert"] .tk__pop--ko { display: block; animation: tk-pop .35s var(--ease) backwards; }

.demo[data-step="fixed"] .tk__scrim { opacity: 1; }
.demo[data-step="fixed"] .tk__pop--ok { display: flex; animation: tk-pop .35s var(--ease) backwards; }
.demo[data-step="fixed"] .tk__progress span { animation: tk-fill 2.2s ease-out .2s forwards; }

/* ---------- Pills / chips ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .02em;
}
.pill--sky { background: var(--sky-tint); color: var(--sky-deep); }
.pill--success { background: var(--success-tint); color: var(--success-ink); }
.pill--warn { background: var(--cream); color: var(--bronze); }
.pill--neutral { background: var(--bone); color: var(--slate); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 28px;
}
.card--sky { background: var(--sky); border-color: transparent; }
.card--cream { background: var(--cream); border-color: transparent; }
.card--bone { background: var(--bone); border-color: transparent; }

.icon-tile {
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}
/* sobre tarjeta azul el crema del tile se ensucia: blanco con el icono en azul */
.icon-tile--sky { background: var(--paper); color: var(--sky-deep); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--slate); font-size: .9375rem; }
.card .link-arrow { margin-top: 14px; font-size: .9375rem; }

/* ---------- Steps (cómo funciona) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gutter);
  counter-reset: step;
}
.step {
  position: relative;
  padding: 0 0 26px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.step__num {
  font-weight: 500;
  font-size: .8125rem;
  color: var(--bronze);
  background: var(--cream);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  display: inline-block;
}
.step h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; padding: 0 24px; }
.step p { font-size: .9rem; color: var(--slate); padding: 0 24px; }

/* ---------- Producto (bloques alternos) ---------- */
.product {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.product + .product { margin-top: clamp(72px, 9vw, 120px); }
.product:nth-of-type(even) .product__media { order: 2; }
.product__copy h2 { margin-bottom: 14px; }
.product__copy > p { color: var(--slate); margin-bottom: 22px; max-width: 30rem; }
.product__feats { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.product__feats li { display: flex; gap: 10px; align-items: baseline; font-size: .9375rem; }
.product__feats .ph { color: var(--amber-deep); flex: none; transform: translateY(2px); }
.product__media {
  background: var(--sky);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2.4vw, 30px);
}
.product__media--cream { background: var(--cream); }
.product__media img { border-radius: var(--r-md); width: 100%; height: auto; }

/* ==========================================================================
   Dispositivo unificado (.iphone)
   El mismo iPhone dibujado en CSS en toda la web: el del módulo de riders
   (carcasa 27 × 56,3 · pantalla 19,5:9, geometría real) elevado a
   componente. Cada instancia fija --pw (ancho del cuerpo en su unidad
   local, em o cqw) y de ahí salen en proporción radios, bisel, botones
   físicos y sombras; los comentarios dan la medida original sobre 27.
   OJO: --pw con em se resuelve donde se usa, así que solo se emplea en el
   propio cuerpo y sus pseudos (heredan el font-size raíz del dispositivo).
   La isla dinámica es un <span class="iphone__island"> DENTRO de la
   pantalla, en % + aspect-ratio para ser inmune a cambios de font-size.
   ========================================================================== */
.iphone {
  position: relative;
  background: linear-gradient(180deg, #2E2E33, #101013 26%);
  border-radius: calc(var(--pw) * .1556); /* 4,2/27 */
  padding: calc(var(--pw) * .0352); /* bisel: ,95/27 */
  box-shadow:
    0 calc(var(--pw) * .1111) calc(var(--pw) * .2222) calc(var(--pw) * -.0667) rgba(18, 18, 18, .35),
    0 calc(var(--pw) * .0444) calc(var(--pw) * .0889) calc(var(--pw) * -.0444) rgba(18, 18, 18, .25),
    inset 0 1px 1px rgba(255, 255, 255, .28);
}
/* botones físicos: encendido (dcha) y volumen ×2 (izda, copia por sombra) */
.iphone::before {
  content: '';
  position: absolute;
  right: calc(var(--pw) * -.0111);
  top: calc(var(--pw) * .4815); /* 13/27 */
  width: calc(var(--pw) * .0111);
  height: calc(var(--pw) * .2222); /* 6/27 */
  border-radius: 0 calc(var(--pw) * .0093) calc(var(--pw) * .0093) 0;
  background: #232326;
}
.iphone::after {
  content: '';
  position: absolute;
  left: calc(var(--pw) * -.0111);
  top: calc(var(--pw) * .4074); /* 11/27 */
  width: calc(var(--pw) * .0111);
  height: calc(var(--pw) * .1481); /* 4/27 */
  border-radius: calc(var(--pw) * .0093) 0 0 calc(var(--pw) * .0093);
  background: #232326;
  box-shadow: 0 calc(var(--pw) * .1926) 0 #232326; /* 5,2/27 */
}
/* Isla dinámica: % relativos a la pantalla (su ancestro posicionado) */
.iphone__island {
  position: absolute;
  left: 50%;
  top: 2.11%;
  transform: translateX(-50%);
  width: 29.32%;
  aspect-ratio: 64 / 19;
  border-radius: var(--r-pill);
  background: #000;
  z-index: 5;
}

/* ---------- Bronze Tracker en vivo (módulo #productos) ----------
   La réplica tk__ del hero corriendo en un dispositivo dibujado en CSS que
   cambia con el scroll: tablet al entrar y móvil al seguir bajando — la misma
   app responsive en ambos. .tklive__stage es contenedor de tamaño (cqw de los
   marcos = ancho del stage); dentro de cada .demo (también contenedor) los
   cqw de la interfaz son relativos a su pantalla, como en el hero. */
.product__media--tklive .demo .tk__fit img { border-radius: 0; width: 100%; height: 100%; }
.tklive__stage {
  position: relative;
  container-type: inline-size;
  margin-bottom: 3%;
}
.tkdevice {
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
/* Tablet: mismo material que el iPhone unificado (gradiente y brillo
   interior), con el bisel fino y las esquinas concéntricas de un iPad. */
.tkdevice--tablet {
  position: relative;
  width: 88cqw;
  margin-inline: auto;
  background: linear-gradient(180deg, #2E2E33, #101013 26%);
  border-radius: 2.6cqw;
  padding: 1.9cqw;
  box-shadow:
    0 3cqw 6cqw -2.4cqw rgba(18, 18, 18, .55),
    inset 0 1px 1px rgba(255, 255, 255, .28);
}
/* Móvil: el iPhone unificado (clase .iphone en el HTML), centrado sobre la
   tablet; entra al activarse .tklive.is-phone. 28,5cqw ≈ los 104% de alto
   de la tablet con la proporción 270/563 del componente. */
.tkdevice--phone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28.5cqw;
  --pw: 28.5cqw;
  aspect-ratio: 270 / 563;
  transform: translate(-50%, -50%) scale(.93);
  opacity: 0;
  pointer-events: none;
}
.tklive.is-phone .tkdevice--phone { opacity: 1; transform: translate(-50%, -50%); }
.tklive.is-phone .tkdevice--tablet { opacity: 0; transform: scale(.93); }
.tkdevice .demo {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 456 / 289;
  border-radius: .7cqw; /* concéntrico: radio exterior − bisel */
}
.tkdevice--phone .demo {
  position: absolute;
  inset: calc(var(--pw) * .0352);
  width: auto;
  height: auto;
  aspect-ratio: auto;
  border-radius: calc(var(--pw) * .1222); /* 3,3/27, concéntrico */
}
/* El logo real dentro de la app (wordmark SVG invertido sobre fondo oscuro) */
.tk__logo img {
  display: block;
  width: auto;
  height: 3.2cqw;
  border-radius: 0;
  filter: invert(1);
}
/* Envoltorio que conserva el aspecto real de la foto: en la tablet llena el
   frame 16:9; en el móvil hace de "cover" vertical (centrado, sin deformar,
   recortando los lados) y arrastra consigo las máscaras alineadas. */
.tk__fit {
  position: absolute;
  inset: 0;
}

/* Variante móvil de la interfaz: la MISMA app responsive — cabecera, cámara
   y botonera — reescalada (~2x en cqw de su pantalla). La cámara pasa a
   vertical: el frame llena el hueco y .tk__fit hace cover de la foto 16:9. */
/* La cabecera reserva arriba la zona de la isla dinámica (termina a ~13,3cqw
   de pantalla): el padding-top empuja chips y logo por debajo de ella. */
.demo--phone .tk__bar { height: 24cqw; padding: 12.6cqw 3.4cqw 0; }
.demo--phone .tk__logo img { height: 6.2cqw; }
.demo--phone .tk__chipgroup { gap: 2cqw; }
.demo--phone .tk__chip { width: 9.6cqw; height: 7.6cqw; border-radius: 2cqw; font-size: 4cqw; }
.demo--phone .tk__cam { margin: 0 3.4cqw; }
.demo--phone .tk__frame {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 3.4cqw;
}
.demo--phone .tk__fit {
  inset: auto;
  top: 0;
  height: 100%;
  aspect-ratio: 1672 / 941;
  left: 50%;
  transform: translateX(-50%);
}
.demo--phone .tk__oid { top: 2cqw; right: 2cqw; border-radius: 2.4cqw; padding: 1cqw 2.8cqw; font-size: 4.2cqw; }
.demo--phone .tk__actions { height: 14cqw; margin: 3cqw 3.4cqw 3.6cqw; gap: 2.6cqw; }
.demo--phone .tk__btn { border-radius: 3cqw; font-size: 4cqw; gap: 1.6cqw; box-shadow: 0 0 3.2cqw rgba(12, 17, 23, .3); }
.demo--phone .tk__btn i { font-size: 4cqw; }
.demo--phone .tk__btn--shot { width: 14cqw; }
.demo--phone .tk__btn--shot i { font-size: 6cqw; }
.demo--phone .tk__badge { top: -2cqw; right: -1.2cqw; border-radius: 8cqw; padding: .3cqw 1.8cqw; font-size: 3cqw; }
.demo--phone .tk__capturing { border-radius: 4.4cqw; padding: 2.2cqw 5.2cqw; font-size: 4.4cqw; }
.demo--phone .tk__pop { border-radius: 4.4cqw; box-shadow: 0 2.4cqw 8cqw rgba(0, 0, 0, .35); }
.demo--phone .tk__pop--scan { gap: 2.2cqw; padding: 3cqw 5cqw; font-size: 4.4cqw; }
.demo--phone .tk__pop--scan i { font-size: 4.8cqw; }
.demo--phone .tk__pop--ko { width: 84cqw; padding: 4.6cqw; }
.demo--phone .tk__alerthead { gap: 2.6cqw; }
.demo--phone .tk__alerthead i { font-size: 7cqw; }
.demo--phone .tk__alerthead h4 { font-size: 5cqw; }
.demo--phone .tk__alerthead p { font-size: 3.4cqw; }
.demo--phone .tk__missing { margin-top: 3.4cqw; gap: 2.2cqw; border-radius: 2.6cqw; border-width: .34cqw; padding: 2.6cqw 3cqw; }
.demo--phone .tk__emoji { font-size: 5cqw; }
.demo--phone .tk__mname { font-size: 4.4cqw; }
.demo--phone .tk__mqty { font-size: 3.2cqw; padding: .9cqw 2.6cqw; border-radius: 4.6cqw; }
.demo--phone .tk__cta { margin-top: 3.8cqw; height: 10.6cqw; gap: 1.8cqw; border-radius: 2.6cqw; font-size: 4cqw; }
.demo--phone .tk__cta i { font-size: 4.4cqw; }
.demo--phone .tk__pop--ok { width: 74cqw; padding: 5.6cqw 5cqw 5cqw; gap: 2.8cqw; }
.demo--phone .tk__pop--ok i { font-size: 12cqw; }
.demo--phone .tk__pop--ok h4 { font-size: 5.6cqw; }
.demo--phone .tk__progress { height: 2cqw; border-radius: 1.5cqw; }

.tklive__foot {
  margin: 14px 2px 0;
  font-size: .8125rem;
  color: var(--slate);
}

/* ---------- Métricas (banda oscura) ---------- */
.metrics { }
.metrics .eyebrow { color: var(--amber); }
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: var(--gutter);
  margin-top: clamp(36px, 4vw, 56px);
}
.metric { border-top: 1px solid #3A3A3A; padding-top: 22px; }
.metric__num {
  font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1;
  color: var(--amber);
  letter-spacing: -.02em;
}
/* Métrica-titular: el ROI se paga solo → verde y más grande, una sola señal verde en la sección */
.metric--lead { border-top-color: var(--success); border-top-width: 2px; }
.metric--lead .metric__num { color: var(--success); font-size: clamp(2.5rem, 4.3vw, 3.7rem); }
.metric__label { font-weight: 500; margin-top: 12px; }
.metric__note { font-size: .8125rem; color: #AFAFAF; margin-top: 6px; }
.metrics__foot { margin-top: clamp(32px, 4vw, 48px); font-size: .8125rem; color: #8C8C8C; max-width: 56rem; }

/* ---------- Logos clientes ---------- */
.logos { text-align: center; }
.logos__stat {
  margin: 16px auto 0;
  max-width: 34rem;
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--slate);
}
/* El número lo anima el JS pintando cada cifra en una celda de ancho fijo (ver
   el contador en main.js): inline-block para que la cifra no pueda partirse de
   línea y para aislar el ancho del párrafo. tabular-nums no hace nada con la DM
   Sans actual, pero queda por si la fuente gana cifras tabulares. */
.logos__statnum {
  color: var(--ink);
  font-weight: 700;
  font-size: 1.06em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4.5vw, 64px);
  margin-top: 32px;
}
.logos__row > span {
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -.02em;
  color: var(--mute);
  transition: color var(--d-norm) var(--ease);
  white-space: nowrap;
}
.logos__row > span:hover { color: var(--ink); }
.logos__item { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; }
.logos__badge {
  font-weight: 500;
  font-size: .6875rem;
  color: var(--bronze);
  background: var(--cream);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: normal;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.logos__badge i { color: var(--amber-deep); }

/* ---------- Hub demo: disputas en vivo ---------- */
.hubdemo {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  font-size: .8125rem;
}
.hubdemo__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.hubdemo__tabs { display: flex; gap: 4px; }
.hubdemo__tab {
  font: inherit;
  font-family: var(--font-body);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  color: var(--mute);
  font-weight: 500;
  font-size: .8125rem;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.hubdemo__tab:hover { color: var(--ink); background: var(--bone); }
.hubdemo__tab.is-active { background: var(--ink); color: var(--paper); }
.hubdemo__counter { text-align: right; }
.hubdemo__counter small {
  display: block;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  color: var(--mute);
}
.hubdemo__counter b {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--success-ink);
}
.hubdemo__head, .hubdemo__row {
  display: grid;
  grid-template-columns: 1.15fr .9fr .65fr 1.3fr;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
}
.hubdemo__head {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--hairline);
  padding-block: 8px;
}
.hubdemo__rows { position: relative; }
.hubdemo__row { border-bottom: 1px solid var(--bone); }
.hubdemo__row:last-child { border-bottom: 0; }
/* filas siempre a una línea: si no cabe, elipsis — la altura no baila */
.hubdemo__row > span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hubdemo__row .hpill { max-width: 100%; }
.hubdemo__row .mono { font-size: .75rem; color: var(--slate); }
.hubdemo__row.is-new { animation: hrow-in .45s var(--ease); }
@keyframes hrow-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.hpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .02em;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  white-space: nowrap;
  transition: background var(--d-norm) var(--ease), color var(--d-norm) var(--ease);
}
.hpill::before { content: '●'; font-size: .5rem; }
.hpill--open { background: var(--cream); color: var(--bronze); }
.hpill--sent { background: var(--sky-tint); color: var(--sky-deep); }
.hpill--won { background: var(--success-tint); color: var(--success-ink); }
.hpill.is-flip { animation: hpill-flip .35s var(--ease); }
@keyframes hpill-flip { 0% { transform: translateY(3px); opacity: .4; } 100% { transform: none; opacity: 1; } }
.hubdemo__counter b.is-tick { animation: hpill-flip .35s var(--ease); }
.hubdemo__foot {
  padding: 10px 18px 14px;
  font-size: .625rem;
  letter-spacing: .04em;
  color: var(--mute);
  border-top: 1px dashed var(--hairline);
}

/* ---------- Riders demo: móvil scrollytelling (home) ----------
   El móvil (.rphone) está maquetado en em con font-size raíz de 10px:
   cambiar ese font-size escala el dispositivo completo (7px en móvil).
   data-rstate en .rphone decide la pantalla: checkin | prep | almost | ready.
   Estado por defecto (sin JS / reduced motion): ready, con todos los pasos
   visibles; main.js añade .is-live al módulo y toma el control. */
.product--riders { align-items: start; grid-template-rows: auto 1fr; }
.riders-intro { grid-column: 1; grid-row: 1; }
.riders-stage { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
/* el aire final mantiene el móvil pegado un rato más tras activarse la última
   pantalla: sin él, "listo para recoger" aparece y el panel ya se está yendo */
.riders-steps { grid-column: 1; grid-row: 2; padding-bottom: clamp(80px, 34vh, 300px); }

.riders-stage__panel {
  position: sticky;
  top: clamp(80px, 12vh, 150px);
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: clamp(16px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.riders-stage__cap {
  font-size: .8125rem;
  color: var(--bronze);
  text-align: center;
  margin: 0;
}

.rsteps { list-style: none; margin: 0 0 10px; padding: 0; }
.rstep {
  min-height: clamp(240px, 40vh, 380px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding-block: 24px;
  border-top: 1px solid var(--hairline);
}
.rstep:first-child { border-top: 0; }
/* un paso con dos pantallas necesita el doble de recorrido de scroll, o al
   bajar rápido "en preparación" se pierde antes de que dé tiempo a verlo */
.rstep[data-states*=","] { min-height: clamp(420px, 72vh, 700px); }
.rstep__num {
  font-weight: 500;
  font-size: .875rem;
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .35s var(--ease);
}
.rstep__num::after { content: ''; height: 1px; width: 26px; background: currentColor; opacity: .5; }
.rstep h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
.rstep p { font-size: .9375rem; color: var(--slate); max-width: 26rem; }
.product--riders.is-live .rstep { opacity: .32; transition: opacity .4s var(--ease); }
.product--riders.is-live .rstep.is-on { opacity: 1; }
.product--riders.is-live .rstep.is-on .rstep__num { color: var(--amber-deep); }

/* --- Dispositivo ---
   Geometría real de un iPhone: pantalla 25,1 × 54,4em (19,5:9) y carcasa
   27 × 56,3em (≈1:2,08). Es el ORIGEN del componente .iphone unificado
   (marco, botones y sombras vienen de él); aquí solo queda la escala.
   El font-size raíz es la única palanca de escala y sigue la ALTURA del
   viewport, para que el teléfono nunca se corte en pantallas bajas:
   56,3em × fs + ~92px de panel deben caber bajo la nav.
   Marca del restaurante ficticio (Cluckin' Crunch, el del hero): rojo de
   fast-food para que la app se lea como la app blanca real del cliente. */
.rphone {
  --rbrand: #CE2A24;
  --rbrand-deep: #B01F1B;
  font-size: clamp(6px, calc(1.75vh - 3.2px), 9.6px);
  width: 27em;
  --pw: 27em;
}
.rphone.is-buzz { animation: rbuzz .55s var(--ease) .25s; }
@keyframes rbuzz {
  10%, 50% { transform: translateX(-.3em); }
  30%, 70% { transform: translateX(.3em); }
  20%, 60% { transform: rotate(.5deg); }
  40%, 80% { transform: rotate(-.5deg); }
}

.rphone__screen {
  border-radius: calc(var(--pw) * .1222); /* 3,3/27, concéntrico con el marco */
  overflow: hidden;
  background: #F6F7F9;
  height: 54.4em; /* 25,1em de ancho útil → 19,5:9, el ratio de la pantalla real */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* cabecera de marca del restaurante + barra de estado del sistema */
.rp__top {
  flex: none;
  background: linear-gradient(180deg, #DA3A33, var(--rbrand) 55%, var(--rbrand-deep));
  color: #fff;
  padding: 1.15em 1.9em 1.2em;
}
/* La isla dinámica es el .iphone__island absoluto del componente; la barra
   reserva su altura (1,9em aquí = la de la isla) para no perder el hueco. */
.rp__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 1.9em;
  padding-inline: .4em;
  font-size: 1.15em;
}
.rp__statusbar .mono { font-size: 1em; letter-spacing: .02em; }
.rp__sticons { display: inline-flex; gap: .45em; font-size: 1.02em; }
.rp__brand {
  text-align: center;
  font-weight: 700;
  font-size: 1.6em;
  line-height: 1.3;
  letter-spacing: .05em;
  padding-top: .95em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}

/* cuerpo: las dos vistas apiladas, transición al cambiar data-rstate */
.rp__body { flex: 1; position: relative; min-height: 0; }
.rp__view {
  position: absolute;
  inset: 0;
  padding: 2.2em 1.9em 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .2s var(--ease), transform .45s var(--ease);
}
.rphone:not([data-rstate="checkin"]) .rp__view--checkin { opacity: 0; transform: translateX(-9%); pointer-events: none; }
.rphone[data-rstate="checkin"] .rp__view--status { opacity: 0; transform: translateX(9%); pointer-events: none; }
/* la entrante espera a que la saliente se haya ido: si se cruzan a media
   opacidad se leen los dos textos superpuestos */
.rphone[data-rstate="checkin"] .rp__view--checkin,
.rphone:not([data-rstate="checkin"]) .rp__view--status { transition-delay: .18s; }

/* vista check-in */
.rp__view--checkin { text-align: center; }
.rp__avatar {
  width: 5.4em; height: 5.4em;
  flex: none;
  border-radius: 50%;
  background: #FBEBE9;
  display: grid;
  place-items: center;
  margin-bottom: 1.2em;
}
.rp__avatar i { font-size: 2.4em; color: var(--rbrand); }
.rp__view--checkin h4 { font-size: 1.8em; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.rp__view--checkin > p { font-size: 1.2em; color: var(--slate); line-height: 1.45; margin-top: .5em; max-width: 19em; }
.rp__form {
  background: #fff;
  border-radius: 1.7em;
  border: 1px solid rgba(18, 18, 18, .05);
  box-shadow: 0 1.2em 2.6em -1.4em rgba(18, 18, 18, .3);
  padding: 1.5em;
  width: 100%;
  margin-top: 1.6em;
  text-align: left;
}
.rp__form label { font-size: 1.15em; font-weight: 700; display: block; margin-bottom: .6em; }
.rp__input {
  border: 1px solid var(--soft);
  border-radius: .95em;
  padding: .9em 1.1em;
  font-size: 1.25em;
  display: flex;
  align-items: center;
  min-height: 3.1em;
  background: #fff;
}
.rp__input [data-typed] { letter-spacing: .06em; }
.rp__ph { color: var(--mute); }
.rp__input.has-text .rp__ph { display: none; }
.rp__caret {
  width: .12em; height: 1.25em;
  background: var(--ink);
  margin-left: .15em;
  animation: rblink 1.1s step-end infinite;
}
@keyframes rblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.rp__btn {
  margin-top: 1.1em;
  background: var(--rbrand);
  color: #fff;
  border-radius: 1em;
  padding: 1em;
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6em;
  box-shadow: 0 .5em 1.2em -.5em rgba(206, 42, 36, .5);
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.rp__btn.is-press { transform: scale(.95); filter: brightness(.85); }
.rp__geo {
  flex: none;
  margin-top: 1.4em;
  font-family: var(--font-mono);
  font-size: 1em;
  color: var(--sky-deep);
  background: var(--sky-tint);
  border-radius: var(--r-pill);
  padding: .55em 1.2em;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

/* vista estado del pedido: la tarjeta cambia de "temperatura" con un borde
   y un velo tintados por estado (azul → ámbar → verde), sin franjas.
   La tarjeta es una columna: cuerpo (que apila los tres estados) + stepper
   en flujo normal, para que el stepper nunca se solape con el contenido. */
.rp__view--status { gap: 1.25em; }
.rp__stcard {
  width: 100%;
  background: #fff;
  border-radius: 1.9em;
  box-shadow: 0 1.4em 3em -1.6em rgba(18, 18, 18, .35);
  border: 1px solid #C9DDF8;
  background-image: linear-gradient(180deg, rgba(93, 163, 251, .07), rgba(93, 163, 251, 0) 46%);
  padding: 1.6em 1.7em 1.4em;
  height: 22.6em;
  display: flex;
  flex-direction: column;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.rp__stbody { flex: 1; position: relative; min-height: 0; }
.rphone[data-rstate="almost"] .rp__stcard {
  border-color: #F2D6AC;
  background-image: linear-gradient(180deg, rgba(241, 168, 77, .09), rgba(241, 168, 77, 0) 46%);
}
.rphone[data-rstate="ready"] .rp__stcard {
  border-color: #B7E4D2;
  background-image: linear-gradient(180deg, rgba(18, 185, 129, .08), rgba(18, 185, 129, 0) 46%);
}
.rp__st {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.rphone[data-rstate="prep"] .rp__st--prep,
.rphone[data-rstate="almost"] .rp__st--almost,
.rphone[data-rstate="ready"] .rp__st--ready { opacity: 1; transform: none; }
/* flex:none + aspect-ratio: sin esto el contenedor flex achata el círculo */
.rp__sticon {
  width: 4.6em;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: .9em;
}
.rp__sticon i { font-size: 2.4em; line-height: 1; }
.rp__st--prep .rp__sticon { background: var(--sky-tint); color: var(--sky-deep); animation: rpulse 2.4s var(--ease) infinite; }
.rp__st--almost .rp__sticon { background: var(--cream); color: var(--amber-deep); }
.rp__st--almost .rp__sticon i { animation: rflip 2.6s var(--ease) infinite; }
.rphone[data-rstate="ready"] .rp__st--ready .rp__sticon { background: var(--success-tint); color: var(--success-ink); animation: rpop .5s var(--ease) .2s backwards; }
.rp__st--ready .rp__sticon { background: var(--success-tint); color: var(--success-ink); }
@keyframes rpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* el reloj reposa y se voltea en un gesto corto: a medio giro se lee como un
   icono deforme, así que el tramo animado es lo más breve posible */
@keyframes rflip { 0%, 76% { transform: rotate(0); } 86%, 100% { transform: rotate(180deg); } }
@keyframes rpop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.rp__st h4 { font-size: 1.7em; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.rp__st p { font-size: 1.2em; color: var(--slate); line-height: 1.4; margin-top: .45em; max-width: 17em; }
.rp__wait {
  flex: none;
  margin-top: 1em;
  background: var(--bone);
  color: var(--slate);
  border-radius: var(--r-pill);
  padding: .58em 1.3em;
  font-size: 1.12em;
  font-weight: 500;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.rp__go {
  flex: none;
  margin-top: 1em;
  background: var(--success);
  color: #fff;
  border-radius: var(--r-pill);
  padding: .62em 1.5em;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  box-shadow: 0 .6em 1.4em -.6em rgba(18, 185, 129, .55);
}

/* mini-stepper del estado: última fila de la tarjeta, en flujo normal */
.rp__track {
  flex: none;
  margin-top: 1.1em;
  padding-inline: .4em;
  display: flex;
  align-items: center;
  gap: .6em;
}
.rp__node {
  width: 1em; height: 1em;
  border-radius: 50%;
  background: #E3E5E8;
  flex: none;
  transition: background .4s var(--ease);
}
.rp__seg { flex: 1; height: .28em; border-radius: 2px; background: #E3E5E8; position: relative; overflow: hidden; }
.rp__seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--amber-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease), background .4s var(--ease);
}
.rphone[data-rstate="prep"] .rp__node--1 { background: var(--sky-mid); }
.rphone[data-rstate="almost"] .rp__node--1,
.rphone[data-rstate="almost"] .rp__node--2 { background: var(--amber-deep); }
.rphone[data-rstate="almost"] .rp__seg--1::after { transform: scaleX(1); }
.rphone[data-rstate="ready"] .rp__node--1,
.rphone[data-rstate="ready"] .rp__node--2,
.rphone[data-rstate="ready"] .rp__node--3 { background: var(--success); }
.rphone[data-rstate="ready"] .rp__seg--1::after,
.rphone[data-rstate="ready"] .rp__seg--2::after { transform: scaleX(1); background: var(--success); }

/* detalles del pedido */
.rp__details {
  flex: none;
  width: 100%;
  background: #fff;
  border-radius: 1.7em;
  border: 1px solid rgba(18, 18, 18, .05);
  box-shadow: 0 1em 2.2em -1.6em rgba(18, 18, 18, .3);
  padding: 1.25em 1.4em 1em;
}
.rp__dhead { font-size: 1.2em; font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: .5em; margin-bottom: .85em; }
.rp__dhead i { color: var(--amber-deep); }
.rp__drow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .7em;
  background: #F2F3F5;
  border-radius: .85em;
  padding: .82em 1em;
  font-size: 1.02em;
  line-height: 1.35;
}
.rp__drow + .rp__drow { margin-top: .55em; }
.rp__drow span { color: var(--slate); }
.rp__drow b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__drow .mono { font-size: .95em; }
.rp__dfoot {
  text-align: center;
  color: var(--mute);
  font-size: 1em;
  line-height: 1.4;
  margin-top: .75em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4em;
}
.rp__dfoot .mono { font-size: .95em; }

/* notificación push (estado listo) */
.rp__notif {
  position: absolute;
  top: 4.4em; /* justo bajo la isla dinámica, como en iOS */
  left: 1.1em; right: 1.1em;
  z-index: 6;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  border-radius: 1.6em;
  box-shadow: 0 1em 2.4em -1em rgba(18, 18, 18, .4);
  padding: 1.1em 1.3em;
  display: flex;
  align-items: center;
  gap: 1em;
  transform: translateY(-160%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.rphone[data-rstate="ready"] .rp__notif { transform: none; opacity: 1; transition-delay: .3s; }
.rp__notifico {
  width: 3.2em;
  aspect-ratio: 1;
  border-radius: .95em;
  background: var(--rbrand);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.rp__notifico i { font-size: 1.7em; line-height: 1; }
.rp__notif b { display: block; font-size: 1.15em; line-height: 1.25; }
.rp__notif div > span { font-size: 1.05em; color: var(--slate); line-height: 1.3; display: block; }
.rp__notif small { margin-left: auto; align-self: flex-start; color: var(--mute); font-size: .92em; }

/* pie de la app */
.rp__foot {
  flex: none;
  padding: .9em;
  border-top: 1px solid var(--hairline);
  background: #fff;
  font-size: 1.05em;
  line-height: 1.4;
  color: var(--mute);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6em;
}
.rp__foot b { color: var(--ink); font-weight: 700; }
.rp__lang {
  border: 1px solid var(--hairline);
  border-radius: .6em;
  padding: .1em .6em;
  font-size: .9em;
  letter-spacing: .06em;
}

@media (max-width: 860px) {
  /* móvil: el panel del teléfono queda fijo arriba y los pasos se leen en
     la franja inferior del viewport (línea de activación al 80% en main.js) */
  .product--riders { grid-template-rows: none; }
  .riders-intro, .riders-stage, .riders-steps { grid-column: auto; grid-row: auto; }
  .riders-stage { position: sticky; top: 72px; z-index: 3; align-self: auto; }
  .riders-stage__panel { position: static; padding: 14px; }
  .riders-stage__cap { display: none; }
  .rphone { font-size: clamp(5.4px, calc(1.15vh - 1px), 7.4px); }
  .rstep { min-height: clamp(180px, 34vh, 300px); padding-block: 20px; }
  .rstep[data-states*=","] { min-height: clamp(380px, 68vh, 560px); }
  .riders-steps { padding-bottom: clamp(48px, 17vh, 150px); }
}

/* ---------- Riders (página dedicada) ----------
   Reutiliza el móvil .rphone de la home, pero aquí lo maneja el visitante con
   botones en vez del scroll: la home cuenta la historia, esta página deja
   probarla. */
/* El hero mantiene la altura de los demás productos: el móvil se dimensiona
   para caber en la misma caja que ocupa el texto, no al revés. Así el titular
   arranca a la altura de siempre y la stat-strip sigue entrando en pantalla. */
/* la clase doble gana al .page-hero de más abajo, que define el padding base */
.page-hero.page-hero--split { padding-block: clamp(44px, 5.2vw, 74px) clamp(26px, 3.2vw, 46px); }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.page-hero--split .lead { max-width: 38rem; }

.rdemo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Control segmentado: pesa como un selector, no como un botón de primer nivel
   (el único CTA del hero es "Pide una demo"). */
.rdemo__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  background: var(--bone);
  border-radius: var(--r-pill);
}
.rdemo__tab {
  border: 0;
  background: transparent;
  color: var(--mute);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color var(--d-norm) var(--ease), background var(--d-norm) var(--ease);
}
.rdemo__tab:hover { color: var(--ink); }
.rdemo__tab.is-active {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .08);
}
/* el escenario se estira al ancho de la botonera para que los dos bloques
   compartan borde izquierdo y derecho */
.rdemo__stage {
  align-self: stretch;
  display: grid;
  justify-items: center;
  background: var(--cream);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(12px, 1.4vw, 18px);
}
/* El móvil va ligado al alto de pantalla para quedar centrado en el viewport al
   aterrizar. La recta pasa por 7,2px a 800px de alto (el punto en el que la
   stat-strip todavía asoma) y crece deprisa por encima: en pantallas grandes
   sobraba sitio y el móvil se quedaba pequeño. */
.rdemo .rphone { font-size: clamp(5.4px, calc(1.22vh - 2.6px), 10.4px); }

/* Hero de tracker.html: la demo tablet↔móvil del módulo de productos dentro
   del mismo escenario y control segmentado que el hero de Riders */
.tkdemo { width: clamp(340px, 44vw, 580px); max-width: 100%; }
.tkdemo .tklive { width: 100%; }
.tkdemo .tklive__stage { margin-bottom: 0; }
/* aire vertical dentro del escenario crema: sin él la tablet toca casi los
   bordes de arriba y abajo y el recuadro queda como una tira apretada */
.tkdemo__stage { padding-block: clamp(28px, 3.4vw, 46px); }

/* --- Hero de feedback.html: la demo de la home gobernada por botones ---
   Mismo esqueleto que .rdemo (comparte .rdemo__tabs); el ancho de la demo va
   ligado también al alto de pantalla para que la stat-strip siga asomando. */
.fdemo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fdemo__stage {
  align-self: stretch;
  display: grid;
  justify-items: center;
  background: var(--sky);
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(12px, 1.4vw, 18px);
}
.fdemo .fbdemo { width: clamp(300px, calc(62vh - 60px), 520px); max-width: 100%; }

/* --- Vista de cocina: cola de riders en puerta ---
   Mismo chrome que la réplica de Tracker (.demo): fondo #0C1117, wordmark real
   centrado, botones "glass" #393E43 y el contenido sobre tarjeta blanca. */
.product__media--plain { background: transparent; padding: 0; }
.kds {
  background: #0C1117;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  font-family: var(--font-body);
}
.kds__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 11px 14px;
}
/* el wordmark de Bronze, no una imitación tipográfica. La doble clase hace
   falta para deshacer `.product__media img`, que además del ancho le mete un
   border-radius de 20px y recorta el logo por arriba y por abajo. */
.kds__bar .kds__logo {
  justify-self: center;
  height: 16px;
  width: auto;
  border-radius: 0;
  filter: invert(1);
}
.kds__chipgroup { display: flex; gap: 6px; justify-self: end; }
.kds__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(#393E43, #393E43) padding-box,
              linear-gradient(to bottom right, #40454A, #5C6065) border-box;
  border: 1px solid transparent;
  color: #EDF0F3;
  font-size: .8125rem;
}
.kds__chip:first-child { justify-self: start; }

.kds__screen {
  background: var(--paper);
  border-radius: 14px;
  margin: 0 14px;
  padding: 14px;
}
.kds__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.kds__head h4 { margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }
.kds__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bone);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: .75rem;
  color: var(--slate);
}
.kds__count i { color: #2563EB; font-size: 1.05rem; }
.kds__count b { font-family: var(--font-mono); font-weight: 400; color: var(--ink); }
.kds__count.is-tick { animation: hpill-flip .35s var(--ease); }

/* alto de 4 filas: la cola oscila entre 3 y 4 riders y el panel no debe saltar */
.kds__rows { min-height: 202px; }
.kds__row {
  display: grid;
  grid-template-columns: 1.05fr .95fr .7fr 1.2fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F3F5F7;
  transition: background var(--d-slow) var(--ease);
}
.kds__row + .kds__row { margin-top: 6px; }
.kds__row.is-new { animation: hrow-in .45s var(--ease); }
.kds__row.is-out { animation: krow-out .5s var(--ease) forwards; }
@keyframes krow-out { to { opacity: 0; transform: translateX(14px); } }
/* el código de pedido, grande y legible a dos metros desde la mesa de salida */
.kds__id { font-family: var(--font-mono); font-size: 1.0625rem; letter-spacing: -.01em; }
.kds__plat { font-size: .8125rem; color: var(--slate); }
.kds__time {
  font-family: var(--font-mono);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
}
.kds__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: end;
  font-size: .6875rem;
  font-weight: 500;
  padding: 4px 9px;
  border-radius: 7px;
  white-space: nowrap;
  background: #E4E8EC;
  color: var(--slate);
}
.kds__state i { font-size: 1.15em; }
/* escalada de espera: el aviso sube de tono a los 2 y 4 minutos */
.kds__row[data-lvl="1"] { background: #FFF7EA; }
.kds__row[data-lvl="1"] .kds__time { color: var(--bronze); font-weight: 500; }
.kds__row[data-lvl="1"] .kds__state { background: #FBE7C8; color: var(--bronze); }
.kds__row[data-lvl="2"] { background: #FDEEED; }
.kds__row[data-lvl="2"] .kds__time { color: #DC2626; font-weight: 500; }
.kds__row[data-lvl="2"] .kds__state { background: #FADAD8; color: #DC2626; }
.kds__row[data-lvl="2"] .kds__state i { animation: rpulse 1.1s var(--ease) infinite; }
.kds__row[data-done] { background: #E9FAF0; }
.kds__row[data-done] .kds__state { background: #CDF3DD; color: var(--success-ink); }
.kds__row[data-done] .kds__time { color: var(--success-ink); }
.kds__foot {
  padding: 11px 16px 13px;
  font-size: .625rem;
  letter-spacing: .04em;
  color: rgba(237, 240, 243, .5);
}

@media (max-width: 960px) {
  .page-hero__grid { grid-template-columns: 1fr; justify-items: center; }
  .page-hero__copy { justify-self: stretch; }
  .rdemo { order: 2; }
  .tkdemo { width: min(100%, 580px); }
  .fdemo { order: 2; width: 100%; max-width: 620px; }
  .fdemo .fbdemo { width: 100%; }
}
@media (max-width: 560px) {
  /* dos líneas: código + tiempo arriba, plataforma + estado debajo */
  .kds__row { grid-template-columns: 1fr auto; row-gap: 3px; }
  .kds__id { order: 1; }
  .kds__time { order: 2; justify-self: end; }
  .kds__plat { order: 3; }
  .kds__state { order: 4; }
  .kds__rows { min-height: 0; }
}

/* Cabecera contextual por pestaña: los tres metas apilados en la misma celda
   para que la barra mida siempre lo mismo sea cual sea la pestaña activa */
.hubdemo__meta { display: grid; }
.hubdemo__meta .hubdemo__counter { grid-area: 1 / 1; }
.hubdemo__counter[hidden] { display: block; visibility: hidden; }
.hubdemo__rating { color: var(--ink) !important; }
.hubdemo__rating .ph-star { color: var(--amber-deep); font-size: .875rem; }
.hubdemo__scope { color: var(--ink) !important; }

/* Paneles apilados en la misma celda: la altura del módulo es la del panel
   más alto y no salta al cambiar de pestaña */
.hubdemo__panels { display: grid; }
.hubdemo__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hubdemo__panel[hidden] { display: flex; visibility: hidden; }
.hubdemo__panel .hubdemo__foot { margin-top: auto; }
.hubdemo__panel.is-entering { animation: hpanel-in .3s var(--ease); }
@keyframes hpanel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Pestaña Reseñas: tarjetas de estadísticas + análisis de opinión con IA */
.hubstats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
}
.hubstats__cell small {
  display: block;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
  white-space: nowrap;
}
.hubstats__cell b { font-size: 1.0625rem; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.hubstats__star { color: var(--amber-deep); font-size: .9375rem; }
.hubsent {
  display: flex;
  height: 18px;
  margin-top: 3px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--bone);
}
.hubsent span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .5625rem;
  color: #fff;
  min-width: 0;
  overflow: hidden;
}
.hubsent__pos { background: var(--success); }
.hubsent__neu { background: var(--soft); color: var(--slate) !important; }
.hubsent__neg { background: var(--danger); }
.hubreviews { }
.hubreview {
  padding: 9px 18px 10px;
  border-bottom: 1px solid var(--bone);
}
.hubreview:last-child { border-bottom: 0; }
.hubreview__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .6875rem;
  color: var(--slate);
}
.hubreview__meta .mono { font-size: .625rem; color: var(--mute); margin-left: auto; }
.hubreview__stars { display: inline-flex; gap: 1px; color: var(--amber-deep); font-size: .6875rem; }
.hubreview__stars .ph { color: var(--soft); }
.hubreview p {
  margin: 4px 0 6px;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--ink);
}
.hubreview__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.htag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .02em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.htag--pos { background: var(--success-tint); color: var(--success-ink); }
.htag--neu { background: var(--bone); color: var(--slate); }
.htag--neg { background: var(--danger-tint); color: #A03434; }
.htag--ia { background: var(--sky-tint); color: var(--sky-deep); }
.htag--ia i { font-size: .625rem; }

/* Pestaña Analítica: KPIs con comparativa + gráfica */
.hubkpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
}
.hubkpi { display: flex; flex-direction: column; align-items: flex-start; }
.hubkpi b { display: block; font-size: 1.0625rem; line-height: 1.2; color: var(--ink); }
.hubkpi small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mute);
}
.hcomp {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: .5625rem;
  padding: 2px 6px;
  border-radius: var(--r-pill);
}
.hcomp i { font-size: .5rem; }
.hcomp--up { background: var(--success-tint); color: var(--success-ink); }
.hcomp--down { background: var(--danger-tint); color: #A03434; }
.hubchart { padding: 12px 18px 8px; }
.hubchart__legend {
  display: flex;
  gap: 16px;
  font-size: .5625rem;
  letter-spacing: .04em;
  color: var(--mute);
  margin-bottom: 8px;
}
.hubchart__legend span { display: inline-flex; align-items: center; gap: 5px; }
.hubchart__dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.hubchart__dot--bar { background: var(--success); }
.hubchart__dot--line { background: var(--slate); border-radius: 50%; }
.hubchart svg { display: block; width: 100%; height: auto; }
.hubchart__bars rect { transform-origin: bottom; transform-box: fill-box; }
.is-live .hubchart__bars rect { animation: hbar-grow .6s var(--ease) backwards; }
.is-live .hubchart__bars rect:nth-child(1) { animation-delay: .05s; }
.is-live .hubchart__bars rect:nth-child(2) { animation-delay: .1s; }
.is-live .hubchart__bars rect:nth-child(3) { animation-delay: .15s; }
.is-live .hubchart__bars rect:nth-child(4) { animation-delay: .2s; }
.is-live .hubchart__bars rect:nth-child(5) { animation-delay: .25s; }
.is-live .hubchart__bars rect:nth-child(6) { animation-delay: .3s; }
.is-live .hubchart__bars rect:nth-child(7) { animation-delay: .35s; }
.is-live .hubchart__bars rect:nth-child(8) { animation-delay: .4s; }
@keyframes hbar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.is-live .hubchart__line { stroke-dasharray: 4 4; animation: hline-fade .8s var(--ease) .3s backwards; }
.is-live .hubchart__dots circle { animation: hline-fade .4s var(--ease) .8s backwards; }
@keyframes hline-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .is-live .hubchart__bars rect, .is-live .hubchart__line, .is-live .hubchart__dots circle { animation: none; }
  .hubdemo__panel.is-entering { animation: none; }
}
@media (max-width: 560px) {
  .hubkpis { grid-template-columns: repeat(2, 1fr); }
  /* la barra no cabe en una línea: el meta contextual baja a una segunda fila */
  .hubdemo__bar { flex-wrap: wrap; }
  .hubdemo__meta { margin-left: auto; }
  /* la tabla no cabe con 4 columnas: fuera Plataforma, y el estado a ancho completo */
  .hubdemo__head, .hubdemo__row { grid-template-columns: .8fr .7fr 1.8fr; gap: 8px; padding-inline: 12px; }
  .hubdemo__head span:nth-child(2), .hubdemo__row > span:nth-child(2) { display: none; }
  .hpill { font-size: .5625rem; padding: 3px 7px; }
  /* cabecera de reseñas: los dos rótulos no caben a lo ancho; el decorativo cede con elipsis */
  .hubstats { gap: 10px; padding-inline: 12px; }
  .hubstats__cell { min-width: 0; }
  .hubstats__cell small { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Feedback demo: QR → encuesta → reseña en el Hub ----------
   Réplica de la encuesta pública de Bronze Feedback (marca Deleito, la de la
   bolsa) y del panel de reseñas de Bronze Hub. El ciclo lo lleva main.js con
   data-step (qr → found → survey → send → thanks → hub) + clases is-rated /
   is-agreed / is-landed. Sin JS o con reduced motion no hay data-step y el
   CSS muestra el estado final: encuesta enviada y reseña ya en el Hub. */
.fbdemo {
  position: relative;
  aspect-ratio: 10 / 9;
  container-type: inline-size;
}

/* Escenario izquierdo: bolsa ↔ hub */
.fbdemo__stage {
  position: absolute;
  inset: 0 auto 0 0;
  width: 66%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-2);
}
.fbdemo__bag {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.fbdemo__bag img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 0 36%;
  border-radius: 0;
}
.fbdemo[data-step] .fbdemo__bag { opacity: 1; }
.fbdemo[data-step="hub"] .fbdemo__bag { opacity: 0; }
/* Marco que señala el QR del ticket durante el escaneo */
.fbdemo__qrmark {
  position: absolute;
  left: 20.5%; top: 50%;
  width: 14%; aspect-ratio: 1;
  border: 2px solid var(--amber);
  border-radius: 12%;
  box-shadow: 0 0 0 5px rgba(252, 181, 93, .28);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.fbdemo[data-step="qr"] .fbdemo__qrmark,
.fbdemo[data-step="found"] .fbdemo__qrmark { opacity: 1; animation: fbqr-pulse 1.4s var(--ease) infinite; }
.fbdemo[data-step="found"] .fbdemo__qrmark { border-color: var(--success); box-shadow: 0 0 0 5px rgba(18, 185, 129, .25); animation: none; }
@keyframes fbqr-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(252, 181, 93, .3); }
  50% { box-shadow: 0 0 0 9px rgba(252, 181, 93, .12); }
}

/* Panel de reseñas del Hub (estado final / paso hub) */
.fbdemo__hub {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  font-size: 2.2cqw;
  opacity: 1;
  transition: opacity .5s var(--ease);
}
.fbdemo[data-step] .fbdemo__hub { opacity: 0; }
.fbdemo[data-step="hub"] .fbdemo__hub { opacity: 1; }
.fbdemo__hubbar { padding: 2.2cqw 3cqw; border-bottom: 1px solid var(--hairline); }
.fbdemo__tabs { display: flex; gap: .8cqw; }
.fbdemo__tabs span {
  padding: 1cqw 2.2cqw;
  border-radius: var(--r-pill);
  color: var(--mute);
  font-weight: 500;
  font-size: 2.1cqw;
}
.fbdemo__tabs span.is-active { background: var(--ink); color: var(--paper); }
.fbdemo__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2cqw;
  /* padding derecho extra: que las tarjetas no queden bajo el móvil superpuesto */
  padding: 2.2cqw 5.5cqw 2.2cqw 3cqw;
}
.fbdemo__stat {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 1.6cqw 2cqw;
}
.fbdemo__statico {
  flex: none;
  width: 6cqw; height: 6cqw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3cqw;
}
.fbdemo__statico--avg { background: #FEFCE8; color: #EAB308; }
.fbdemo__statico--total { background: #EFF6FF; color: #3B82F6; }
.fbdemo__statbody { min-width: 0; }
.fbdemo__statbody small {
  display: block;
  font-size: 1.7cqw;
  color: var(--mute);
  white-space: nowrap;
}
.fbdemo__statbody b { font-size: 3.2cqw; letter-spacing: -.02em; }
.fbdemo.is-landed [data-fb-avg],
.fbdemo.is-landed [data-fb-total] { animation: hpill-flip .35s var(--ease); }
.fbdemo__rows { flex: 1; min-height: 0; overflow: hidden; }
.fbdemo__row {
  display: grid;
  grid-template-columns: 17.5cqw auto 1fr;
  align-items: center;
  gap: 1.8cqw;
  padding: 1.9cqw 3cqw;
  border-top: 1px solid var(--bone);
}
.fbsrc {
  justify-self: start;
  font-size: 1.7cqw;
  font-weight: 700;
  line-height: 1.4;
  padding: .4cqw 1.5cqw;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
/* Colores de marca reales del Hub (reviewSources) */
.fbsrc--bronze { background: #FCB55D; color: #121212; }
.fbsrc--glovo { background: #FFC72C; color: #006847; }
.fbsrc--uber { background: #06C167; color: #121212; }
.fbsrc--justeat { background: #FF8000; color: #fff; }
.fbsrc--gmaps { background: #fff; color: #4285F4; box-shadow: inset 0 0 0 1px #4285F4; }
.fbsrc--insta { background: #E1306C; color: #fff; }
.fbstars { display: inline-flex; gap: .3cqw; font-size: 2.1cqw; color: #C9D4E2; }
.fbstars .is-on { color: #5DA3FB; }
.fbdemo__rowtext {
  font-size: 2cqw;
  color: var(--slate);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La reseña nueva: colapsada durante la animación, entra al aterrizar */
.fbdemo__row--new {
  max-height: 10cqw;
  transition: max-height .5s var(--ease), padding .5s var(--ease), opacity .4s var(--ease) .15s;
}
.fbdemo[data-step] .fbdemo__row--new {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
}
.fbdemo.is-landed .fbdemo__row--new {
  max-height: 10cqw;
  padding: 1.9cqw 3cqw;
  opacity: 1;
  background: var(--cream);
}
.fbdemo__hubfoot {
  padding: 1.8cqw 3cqw;
  font-size: 1.7cqw;
  letter-spacing: .04em;
  color: var(--mute);
  border-top: 1px dashed var(--hairline);
}

/* Móvil del cliente: el iPhone unificado (clase .iphone en el HTML) */
.fbdemo__phone {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 37%;
  --pw: 37cqw;
  aspect-ratio: 270 / 563;
}
.fbdemo__screen {
  position: absolute;
  inset: calc(var(--pw) * .0352);
  border-radius: calc(var(--pw) * .1222); /* 3,3/27, concéntrico */
  overflow: hidden;
  background: #F9FAFB;
  font-size: 2.1cqw;
}
.fbdemo__cam, .fbdemo__survey, .fbdemo__thanks {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

/* Pantalla 1: cámara escaneando el QR */
.fbdemo__cam { background: #10141A; }
.fbdemo[data-step="qr"] .fbdemo__cam,
.fbdemo[data-step="found"] .fbdemo__cam { opacity: 1; }
.fbdemo__qrcard {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%) rotate(-2deg);
  width: 52%;
  background: #fff;
  border-radius: 1.4cqw;
  padding: 1.6cqw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.fbdemo__qr { display: block; width: 100%; height: auto; }
.fbdemo__viewfinder {
  position: absolute;
  left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 74%; aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 2.4cqw;
  /* solo esquinas: se conservan las cuñas diagonales y se recorta el centro de cada lado */
  mask: conic-gradient(from 0deg at 50% 50%, transparent 0 6%, #000 6% 19%, transparent 19% 31%, #000 31% 44%, transparent 44% 56%, #000 56% 69%, transparent 69% 81%, #000 81% 94%, transparent 94%);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.fbdemo[data-step="found"] .fbdemo__viewfinder {
  border-color: var(--success);
  transform: translate(-50%, -50%) scale(.94);
}
.fbdemo__scanline {
  position: absolute;
  left: 17%; right: 17%;
  top: 24%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: fbscan 1.7s ease-in-out infinite alternate;
}
.fbdemo[data-step="found"] .fbdemo__scanline { display: none; }
@keyframes fbscan { from { transform: translateY(0); } to { transform: translateY(19cqw); } }
.fbdemo__camhint {
  position: absolute;
  left: 0; right: 0;
  bottom: 5cqw;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  font-size: 1.9cqw;
}
.fbdemo[data-step="found"] .fbdemo__camhint { color: var(--success); }

/* Pantalla 2: encuesta (réplica de Bronze Feedback, marca Deleito) */
.fbdemo:not([data-step]) .fbdemo__survey,
.fbdemo[data-step="survey"] .fbdemo__survey,
.fbdemo[data-step="send"] .fbdemo__survey { opacity: 1; }
.fbdemo__shead {
  display: flex;
  justify-content: center;
  /* padding-top: deja pasar la isla dinámica del marco (llega a ~4,6cqw) */
  padding: 5.4cqw 2.4cqw 2.2cqw;
  background: linear-gradient(135deg, #F9FAFB, #E5E7EB);
  border-bottom: 1px solid #D1D5DB;
}
/* border-radius 0: anula el radio de .product__media img, que a esta altura
   redondea el wordmark como una píldora y recorta los trazos altos */
.fbdemo__shead img { height: 3.4cqw; width: auto; border-radius: 0; }
.fbdemo__sbody { padding: 2.4cqw; }
.fbdemo__order {
  display: grid;
  gap: .9cqw;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 1.2cqw;
  padding: 1.8cqw 2cqw;
  margin-bottom: 2.1cqw;
  font-size: 2cqw;
  color: #374151;
}
.fbdemo__order .ph { color: #4F8BD5; }
.fbdemo__order .mono { font-size: 1.9cqw; }
.fbdemo__q {
  font-weight: 500;
  font-size: 2.15cqw;
  line-height: 1.35;
  color: #374151;
  margin-bottom: 1.6cqw;
}
.fbdemo__qstars {
  display: flex;
  gap: 1.2cqw;
  font-size: 4.2cqw;
  color: #D1D5DB;
  margin-bottom: 2.1cqw;
}
.fbdemo:not([data-step]) .fbdemo__qstars i,
.fbdemo.is-rated .fbdemo__qstars i { color: #5DA3FB; }
.fbdemo.is-rated .fbdemo__qstars i { animation: fbstar-pop .4s var(--ease) both; }
.fbdemo.is-rated .fbdemo__qstars i:nth-child(2) { animation-delay: .16s; }
.fbdemo.is-rated .fbdemo__qstars i:nth-child(3) { animation-delay: .32s; }
.fbdemo.is-rated .fbdemo__qstars i:nth-child(4) { animation-delay: .48s; }
.fbdemo.is-rated .fbdemo__qstars i:nth-child(5) { animation-delay: .64s; }
@keyframes fbstar-pop {
  0% { transform: scale(.5); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.fbdemo__label {
  font-weight: 500;
  font-size: 1.9cqw;
  color: #374151;
  margin-bottom: .9cqw;
}
.fbdemo__ta {
  position: relative;
  min-height: 9.5cqw;
  background: #fff;
  border: 1px solid #ABB8C8;
  border-radius: 1.2cqw;
  padding: 1.4cqw 1.8cqw;
  font-size: 2cqw;
  line-height: 1.45;
  color: #536274;
  margin-bottom: 1.6cqw;
}
.fbdemo__caret {
  display: none;
  width: 1px;
  height: 2.4cqw;
  background: #536274;
  vertical-align: text-bottom;
  animation: fbcaret 1s steps(1) infinite;
}
.fbdemo[data-step="survey"].is-rated .fbdemo__caret { display: inline-block; }
@keyframes fbcaret { 50% { opacity: 0; } }
.fbdemo__ph { color: #9CA3AF; display: none; }
.fbdemo[data-step] .fbdemo__typing:empty ~ .fbdemo__ph { display: inline; }
.fbdemo__gdpr {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 1.7cqw;
  color: #4B5563;
  margin-bottom: 1.9cqw;
}
.fbdemo__checkbox {
  flex: none;
  width: 2.6cqw; height: 2.6cqw;
  border: 1px solid #D1D5DB;
  border-radius: .6cqw;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8cqw;
  color: transparent;
  transition: background var(--d-norm) var(--ease), color var(--d-norm) var(--ease);
}
.fbdemo:not([data-step]) .fbdemo__checkbox,
.fbdemo.is-agreed .fbdemo__checkbox { background: #5DA3FB; border-color: #5DA3FB; color: #fff; }
.fbdemo__send {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.9cqw;
  background: #5DA3FB;
  color: #fff;
  font-weight: 500;
  font-size: 2.15cqw;
  border-radius: 1.2cqw;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
.fbdemo[data-step="send"] .fbdemo__send { transform: scale(.96); filter: brightness(.9); }
.fbdemo[data-step="send"] .fbdemo__send span { opacity: .45; }
.fbdemo__send::after {
  content: '';
  position: absolute;
  width: 2.6cqw; height: 2.6cqw;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: fbspin .7s linear infinite;
}
.fbdemo[data-step="send"] .fbdemo__send::after { opacity: 1; }
@keyframes fbspin { to { transform: rotate(360deg); } }
.fbdemo__powered {
  text-align: center;
  font-size: 1.6cqw;
  color: #9CA3AF;
  margin-top: 1.1cqw;
}
.fbdemo__powered b { color: #6B7280; }

/* Pantalla 3: gracias + recompensa */
.fbdemo[data-step="thanks"] .fbdemo__thanks,
.fbdemo[data-step="hub"] .fbdemo__thanks { opacity: 1; }
.fbdemo__thead {
  display: grid;
  justify-items: center;
  gap: .9cqw;
  text-align: center;
  padding: 6cqw 2.4cqw 3.4cqw;
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border-bottom: 1px solid #DCFCE7;
}
.fbdemo__tcheck {
  width: 7cqw; height: 7cqw;
  background: #DCFCE7;
  color: #16A34A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.6cqw;
  margin-bottom: .6cqw;
}
.fbdemo[data-step="thanks"] .fbdemo__tcheck { animation: fbstar-pop .5s var(--ease) both; }
.fbdemo__thead b { font-size: 2.9cqw; letter-spacing: -.01em; color: #1F2937; }
.fbdemo__thead small { font-size: 1.9cqw; color: #4B5563; max-width: 26cqw; }
.fbdemo__promo {
  display: grid;
  justify-items: center;
  gap: 1cqw;
  margin: 3cqw 2.4cqw;
  background: #F0F7FF;
  border: 2px solid #5DA3FB;
  border-radius: 2cqw;
  padding: 2.6cqw 2.4cqw;
  text-align: center;
}
.fbdemo__promo small { font-size: 1.8cqw; color: #4B5563; font-weight: 500; }
.fbdemo__promo code {
  font-family: var(--font-mono);
  font-size: 3.4cqw;
  letter-spacing: .1em;
  color: #5DA3FB;
  font-weight: 700;
}
.fbdemo__copy {
  display: inline-flex;
  align-items: center;
  gap: .9cqw;
  background: #5DA3FB;
  color: #fff;
  font-size: 1.8cqw;
  font-weight: 500;
  padding: 1.1cqw 2.2cqw;
  border-radius: 1cqw;
  margin-top: .6cqw;
}

/* ---------- Footer: apoyos públicos obligatorios ----------
   Los logos institucionales llegan en formatos dispares (banners JPG, SVGs,
   pills): celdas uniformes con hairline para normalizarlos sin tocarlos. */
.support { margin-top: 40px; }
.support:first-child { margin-top: 0; }
.support h4 {
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  margin: 0 0 18px;
}
.support__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.support__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px 24px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-sm);
}
.support__cell img {
  height: 36px; /* height explícito: algunos SVG tienen tamaño intrínseco menor */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: lighten; /* funde el fondo oscuro de los JPG con la celda */
  opacity: .92;
}
.support__cell img.support__logo--sm { height: 28px; }
.support__cell img.support__logo--lg { height: 46px; }
.support__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 56px;
  margin-top: 30px;
}
.support__texts { flex: 1 1 460px; display: grid; gap: 10px; max-width: 66rem; }
.support__texts p {
  font-size: .75rem;
  line-height: 1.55;
  color: rgba(255,255,255,.45);
  margin: 0;
}
.support__seals { display: flex; align-items: flex-start; gap: 10px; }
.support__seal {
  background: #fff;
  border-radius: var(--r-sm);
  padding: 10px;
  width: 102px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: transform var(--d-fast) var(--ease);
}
.support__seal:hover { transform: translateY(-2px); }
.support__seal img { width: 100%; height: auto; display: block; }
.support__seal strong {
  display: block;
  color: #000;
  font-size: .5625rem;
  line-height: 1.3;
  margin: 6px 0;
  letter-spacing: .02em;
}
.support__seal small { display: block; color: #333; font-size: .5rem; margin-bottom: 6px; }

/* ---------- Integraciones ---------- */
.integrations__groups { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gutter); }
.igroup { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 26px; background: var(--paper); }
.igroup h3 {
  font-weight: 500;
  font-size: .9375rem;
  color: var(--slate);
  margin-bottom: 18px;
}
.igroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.igroup li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--bone);
  font-size: .875rem;
  font-weight: 500;
}

/* ---------- Timeline (trayectoria) ---------- */
.timeline { position: relative; margin-top: 8px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--hairline);
}
.tl-item { position: relative; padding: 0 0 36px 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--amber);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--hairline);
}
.tl-item__date {
  font-weight: 500;
  font-size: .875rem;
  color: var(--bronze);
  margin-bottom: 6px;
}
.tl-item h3 { font-size: 1.125rem; margin-bottom: 6px; }
.tl-item p { color: var(--slate); font-size: .9375rem; max-width: 34rem; }

/* ---------- Equipo ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--gutter); }
.person {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 24px;
  background: var(--paper);
}
.person__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--sky-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}
.person:nth-child(3n) .person__avatar { background: var(--cream); color: var(--bronze); }
.person__photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 16px;
  border: 1px solid var(--hairline);
  background: var(--sky);
}
.person h3 { font-size: 1.0625rem; margin-bottom: 2px; }
.person p.person__role { margin-top: 0; font-size: .875rem; font-weight: 500; color: var(--bronze); }
.person p { margin-top: 10px; font-size: .875rem; color: var(--slate); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  margin-bottom: 12px;
}
.faq summary {
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 500;
  font-size: 1.0625rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-size: 1.35rem;
  color: var(--slate);
  transition: transform var(--d-norm) var(--ease);
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 24px 22px; color: var(--slate); font-size: .9375rem; max-width: 60ch; }

/* ---------- CTA final ---------- */
.cta {
  background: var(--amber);
  border-radius: var(--r-lg);
  padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px);
  position: relative;
  overflow: hidden;
}
.cta__blob {
  position: absolute;
  right: -80px; bottom: -110px;
  width: 380px;
  color: var(--amber-deep);
  pointer-events: none;
}
.cta__blob svg, .cta__blob img { width: 100%; height: auto; }
.cta__inner { position: relative; max-width: 620px; }
.cta h2 { margin-bottom: 14px; }
.cta p { color: rgba(18,18,18,.75); margin-bottom: 30px; max-width: 32rem; }
.cta .btn--primary { background: var(--ink); }
.cta__meta { margin-top: 22px; font-size: .9375rem; color: rgba(18,18,18,.7); }
.cta__meta a { color: inherit; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding-block: clamp(56px, 6vw, 80px) 40px; }
.footer a { text-decoration: none; color: rgba(255,255,255,.6); transition: color var(--d-fast) var(--ease); }
.footer a:hover { color: var(--paper); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: 48px;
  border-bottom: 1px solid #2C2C2C;
}
.footer__brand img { height: 26px; margin-bottom: 18px; }
.footer__brand p { color: rgba(255,255,255,.55); font-size: .875rem; max-width: 26rem; }
.footer__col h4 {
  font-size: .9375rem;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  margin-bottom: 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #2C2C2C;
  margin-top: 36px;
  padding-top: 24px;
  font-size: .8125rem;
  color: rgba(255,255,255,.4);
}
.footer__legal ul { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.footer__badges span {
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  border: 1px solid #3A3A3A;
  border-radius: var(--r-xs);
  padding: 6px 10px;
}

/* ---------- Page hero (subpáginas) ---------- */
.page-hero { padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 72px); }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero .lead { margin-top: 20px; max-width: 40rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- Stat inline strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gutter);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: 28px;
}
.stat-strip > div { text-align: left; }
.stat-strip .mono { font-family: var(--font-body); font-weight: 700; font-size: 1.75rem; color: var(--ink); display: block; letter-spacing: -.02em; }
.stat-strip small { color: var(--slate); font-size: .8125rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
/* Variante para medios grandes (vídeo, capturas de producto, hub, integraciones): un punto más de recorrido y un leve zoom */
.reveal--media { transform: translateY(26px) scale(.97); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal--media.is-in { transform: none; }

/* Entrada del hero al cargar (CSS puro, no depende de JS) */
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-in-media { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: hero-in .6s var(--ease) backwards; }
.hero__copy > .h-display { animation-delay: .08s; }
.hero__copy > .lead { animation-delay: .16s; }
.hero__copy > .hero__actions { animation-delay: .24s; }
.hero__scene { animation: hero-in-media .7s var(--ease) .2s backwards; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__copy > *, .hero__scene { animation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid--4, .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .metrics__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .support__logos { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 860px) {
  .hero__copy { text-align: left; }
  .product, .product:nth-of-type(even) { grid-template-columns: 1fr; }
  .product:nth-of-type(even) .product__media { order: 0; }
  .grid--3, .integrations__groups { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; gap: 20px; }
  .support__logos { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .nav__toggle { display: block; }
  .nav__menu {
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 12px var(--gutter) 24px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .nav__menu.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__links a { padding: 12px 14px; font-size: 1.05rem; }
  .nav__cta { flex-direction: column; align-items: stretch; }
  .nav__cta .btn { justify-content: center; }
}

@media (max-width: 560px) {
  .grid--4, .team-grid, .steps, .metrics__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .page-hero__actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Capa "Bronze glass" — lenguaje liquid glass (iOS 26) adaptado a la marca.
   Solo overrides: paleta y componentes intactos. Fondo claro, un acento.
   ========================================================================== */

/* ---------- Nav: barra completa con vidrio sutil ----------
   La cápsula flotante no encajaba (logo descentrado en la curva, composición
   extraña): volvemos a la barra de la propuesta original conservando el
   blur+saturate del lenguaje glass. */
.nav {
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  border-bottom: 1px solid rgba(18, 18, 18, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.nav .wrap { position: relative; }
.nav__inner { height: var(--nav-h); }
.nav__logo svg, .nav__logo img { height: 23px; width: auto; display: block; }
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: rgba(255, 255, 255, .96); }
}

/* Overscroll superior: el canvas (html) continúa el arranque del glow,
   así el rebote elástico por encima de la página no muestra un corte blanco */
html { background: linear-gradient(105deg, #FBF1E4 0%, #FFFFFF 44%, #EAF3FE 78%, #DDECFE 100%); }

/* ---------- Secciones de color → tarjetas gigantes flotantes ---------- */
.section--bone, .section--cream, .section--sky, .section--ink {
  border-radius: clamp(20px, 2.4vw, 32px);
  margin-inline: clamp(8px, 1.2vw, 20px);
  margin-block: 10px;
}
.footer {
  border-radius: clamp(20px, 2.4vw, 32px);
  margin: 10px clamp(8px, 1.2vw, 20px) clamp(10px, 1.2vw, 20px);
}
.section--bone { background: #F3F1EC; } /* bone un punto más cálido para que se lea el borde de tarjeta */

/* ---------- Glow ambiental de marca ----------
   Vive en el fondo de la página (body::before), desde el borde superior de la
   ventana: pasa por detrás de la nav-cápsula (el vidrio tiene color que
   refractar) y muere en blanco por máscara — sin huecos ni líneas de corte.
   Sin filter: blur (ensucia límites); stops intermedios contra el banding. */
body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: min(118vh, 1150px);
  background:
    radial-gradient(48% 44% at 76% 30%, rgba(221, 236, 254, .85) 0%, rgba(221, 236, 254, .4) 46%, rgba(221, 236, 254, 0) 76%),
    radial-gradient(42% 42% at 14% 8%, rgba(252, 181, 93, .16) 0%, rgba(252, 181, 93, .07) 48%, rgba(252, 181, 93, 0) 78%),
    radial-gradient(38% 36% at 55% 72%, rgba(255, 246, 235, .9) 0%, rgba(255, 246, 235, .4) 50%, rgba(255, 246, 235, 0) 80%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 99%);
  pointer-events: none;
  z-index: -1;
}
/* ---------- Chips y píldoras glass ---------- */
.step__num, .logos__badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* ---------- Botones: brillo especular + lift ---------- */
.btn { transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), box-shadow var(--d-norm) var(--ease); }
.btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(18, 18, 18, .2), 0 10px 24px -10px rgba(18, 18, 18, .45);
}
.btn--primary:hover { opacity: 1; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(18, 18, 18, .18), 0 16px 32px -12px rgba(18, 18, 18, .5); }
.btn--amber {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(139, 100, 51, .25), 0 10px 24px -10px rgba(241, 168, 77, .6);
}
.btn--amber:hover { transform: translateY(-1px); }
.btn--ghost {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.btn--on-dark { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 24px -10px rgba(0, 0, 0, .5); }
.btn:active { transform: scale(.98) translateY(0); }

/* ---------- Tarjetas: profundidad suave + lift en hover ---------- */
.card {
  transition: transform var(--d-norm) var(--ease), box-shadow var(--d-norm) var(--ease);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .03);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(18, 18, 18, .04), 0 20px 40px -20px rgba(18, 18, 18, .18); }

/* ---------- Demos: chrome glass ---------- */
.hubdemo {
  box-shadow: var(--shadow-2), 0 28px 56px -28px rgba(18, 18, 18, .25);
}
.hubdemo__bar {
  background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
}

/* ---------- CTA: profundidad cálida ---------- */
.cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 28px 64px -28px rgba(241, 168, 77, .55); }

/* ---------- Menú móvil (barra completa): panel colgando de la barra ---------- */
@media (max-width: 860px) {
  .nav__menu {
    top: 64px;
    left: 0; right: 0;
    border: 0;
    border-bottom: 1px solid rgba(18, 18, 18, .07);
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(18px) saturate(1.7);
    backdrop-filter: blur(18px) saturate(1.7);
    box-shadow: 0 24px 48px -16px rgba(18, 18, 18, .25);
  }
  @supports not (backdrop-filter: blur(1px)) {
    .nav__menu { background: rgba(255, 255, 255, .98); }
  }
}
@media (max-width: 560px) {
  .section--bone, .section--cream, .section--sky, .section--ink { margin-inline: 6px; }
  .footer { margin-inline: 6px; }
}

/* ---------- Refinamientos glass (investigación liquid glass) ---------- */
/* Sheen especular en botones sólidos: barrido diagonal en hover */
.btn--primary, .btn--amber, .btn--on-dark { position: relative; overflow: hidden; }
.btn--primary::before, .btn--amber::before, .btn--on-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .38) 48%, transparent 64%);
  mix-blend-mode: screen;
  transform: translateX(-130%);
  transition: transform .55s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::before, .btn--amber:hover::before, .btn--on-dark:hover::before {
  transform: translateX(130%);
}

/* Sombra ambiental muy difusa en las tarjetas-sección oscuras */
.section--ink, .footer { box-shadow: 0 28px 72px -40px rgba(18, 18, 18, .5); }

/* Preferencias de usuario */
@media (prefers-reduced-transparency: reduce) {
  .nav .wrap, .nav__menu, .btn--ghost, .hubdemo__bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, .97);
  }
}
@media (prefers-contrast: more) {
  .nav .wrap, .nav__menu { background: #fff; border-color: #121212; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary::before, .btn--amber::before, .btn--on-dark::before { display: none; }
  .card:hover, .btn--primary:hover, .btn--amber:hover { transform: none; }
}

/* ==========================================================================
   Iteración feedback equipo (jul 2026): marquee clientes, chips de producto,
   pasos visuales, vídeo demo, integraciones con logos, hero más grande.
   ========================================================================== */


/* ---------- Marquee de clientes ----------
   El track contiene dos grupos idénticos y anima a -50%: como cada grupo
   mide exactamente la mitad (gap + padding-right iguales), el loop empalma
   sin salto. No usar gap en el track: desalinea el punto de reinicio. */
.logos__marquee {
  overflow: hidden;
  margin-top: 32px;
  /* acotado para que en pantallas anchas no quepan las dos tandas (logos repetidos) */
  max-width: 1160px;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logos__track {
  display: flex;
  width: max-content;
  animation: logos-slide 32s linear infinite;
  padding-block: 6px 30px; /* hueco inferior para el badge absoluto de Hundred */
  will-change: transform;
}
.logos__group {
  display: flex;
  align-items: center;
  gap: clamp(72px, 12vw, 180px);
  padding-right: clamp(72px, 12vw, 180px);
  flex: none;
}
@keyframes logos-slide { to { transform: translate3d(-50%, 0, 0); } }
.logos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  position: relative;
}
.logos__item img {
  display: block;
  width: auto;
  opacity: .9;
  transition: opacity var(--d-norm) var(--ease);
}
.logos__item:hover img { opacity: 1; }
/* Alturas por logo para igualarlos ópticamente (wordmarks anchos más bajos,
   logos apilados más altos) */
.logo--kfc { height: 44px; }
.logo--tacobell { height: 64px; }
.logo--telepizza { height: 36px; }
.logo--goiko { height: 72px; }
.logo--hundred { height: 27px; }
/* Absoluto para que no desplace el logo de Hundred respecto a la línea del resto */
.logos__badge {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  font-size: .625rem;
  line-height: 1.5;
  color: var(--bronze);
  background: var(--cream);
  padding: 3px 10px;
  border-radius: 10px;
  /* dos líneas (br en el HTML) para no pisar a los logos vecinos */
  width: max-content;
  text-align: center;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; width: auto; justify-content: center; }
  .logos__group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .logos__group[aria-hidden="true"] { display: none; } /* sin animación no hace falta el duplicado */
}

/* ---------- Chips de sub-identidad por producto ---------- */
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: .9375rem;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.pchip i { font-size: 1.05rem; }
.pchip--tracker { background: var(--cream); color: var(--bronze); }
.pchip--riders { background: var(--sky-tint); color: var(--sky-deep); }
.pchip--feedback { background: var(--success-tint); color: var(--success-ink); }

/* ---------- Cómo funciona: pasos con icono y conector ---------- */
.step { position: relative; }
.step__icon {
  width: 34px; height: 34px;
  border-radius: var(--r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
  background: var(--sky-tint);
  color: var(--sky-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.step:nth-child(2) .step__icon { background: var(--cream); color: var(--bronze); }
.step:nth-child(3) .step__icon { background: var(--danger-tint); color: var(--danger); }
.step:nth-child(4) .step__icon { background: var(--success-tint); color: var(--success-ink); }
.step .step__num { background: transparent; border: 1px solid var(--hairline); color: var(--mute); box-shadow: none; }

/* ---------- Cómo funciona: mockup visual por paso ----------
   Cada visual cuenta su micro-historia al entrar en viewport (.step.is-in).
   --so escalona los cuatro pasos en desktop para que la fila se lea 1→2→3→4;
   en columnas cada tarjeta dispara la suya al llegar. */
.step { --so: 0s; }
@media (min-width: 1025px) {
  .step:nth-child(2) { --so: .45s; }
  .step:nth-child(3) { --so: .9s; }
  .step:nth-child(4) { --so: 1.35s; }
}
.step__visual {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink);
}
.step__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step__head { display: flex; align-items: center; gap: 10px; padding: 16px 24px 10px; }

/* Paso 1 · la cámara encuadra y dispara */
.step__visual--cam img {
  transform: scale(1.09);
  transition: transform 1.1s var(--ease) calc(.15s + var(--so));
}
.step.is-in .step__visual--cam img { transform: scale(1); }
.step__frame { position: absolute; inset: 22% 12% 13%; pointer-events: none; }
.step__frame i {
  position: absolute; width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.9);
  opacity: 0;
  transition: opacity .45s ease calc(.35s + var(--so)), transform .45s var(--ease) calc(.35s + var(--so));
}
.step__frame i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; transform: translate(-9px,-9px); }
.step__frame i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; transform: translate(9px,-9px); }
.step__frame i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; transform: translate(-9px,9px); }
.step__frame i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; transform: translate(9px,9px); }
.step.is-in .step__frame i { opacity: 1; transform: none; }
.step__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.step.is-in .step__flash { animation: step-flash .5s ease calc(1.1s + var(--so)); }
@keyframes step-flash { 0% { opacity: 0; } 18% { opacity: .92; } 100% { opacity: 0; } }
.step__tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(18,18,18,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 4px 9px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 5px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .4s ease calc(1.28s + var(--so)), transform .4s var(--ease) calc(1.28s + var(--so));
}
.step.is-in .step__tag { opacity: 1; transform: none; }
.step__tag i { color: var(--amber); font-size: 8px; }

/* Paso 2 · barrido de análisis + máscaras reales del modelo CV
   (mismo lenguaje que el hero: ticket azul, productos verdes) */
.step__scan {
  position: absolute; left: 0; right: 0; top: -8%; height: 7%;
  background: linear-gradient(to bottom, rgba(252,181,93,0), rgba(252,181,93,.75), rgba(252,181,93,0));
  opacity: 0; pointer-events: none;
}
.step.is-in .step__scan { animation: step-scan 1.1s ease-in-out calc(.25s + var(--so)); }
@keyframes step-scan {
  0% { top: -8%; opacity: 0; }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 102%; opacity: 0; }
}
.step__masks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.step__masks path {
  fill: rgba(18,185,129,.18);
  stroke: var(--success);
  stroke-width: 5;
  stroke-linejoin: round;
  paint-order: stroke;
  opacity: 0;
  transform: scale(.94);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .4s ease calc(1s + var(--so) + var(--d, 0s)), transform .4s var(--ease) calc(1s + var(--so) + var(--d, 0s));
}
.step__masks .m--ticket { fill: rgba(93,163,251,.2); stroke: var(--sky-mid); }
.step.is-in .step__masks path { opacity: 1; transform: none; }

/* Paso 3 · el aviso del Tracker sobre la cámara (réplica mini del popup real) */
.step__visual--alert { display: flex; align-items: center; justify-content: center; }
.step__visual--alert > img { position: absolute; inset: 0; }
.step__scrim {
  position: absolute; inset: 0;
  background: rgba(12,17,23,.58);
  opacity: 0;
  transition: opacity .45s ease calc(.35s + var(--so));
}
.step.is-in .step__scrim { opacity: 1; }
.step__pop {
  position: relative;
  width: min(74%, 212px);
  background: #fff;
  border-radius: 12px;
  padding: 9px 10px 10px;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.5);
  opacity: 0; transform: scale(.86) translateY(8px);
  transition: opacity .4s ease calc(.65s + var(--so)), transform .45s cubic-bezier(.34,1.45,.4,1) calc(.65s + var(--so));
}
.step.is-in .step__pop { opacity: 1; transform: none; }
.step__pophead { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.step__pophead i { color: #DC2626; font-size: 14px; flex: none; }
.step__pophead b { font-size: .74rem; color: #0C1117; letter-spacing: -.01em; white-space: nowrap; }
.step__popitem {
  display: flex; align-items: center; gap: 6px;
  background: #FEF2F2; border: 1px solid #FCA5A5;
  border-radius: 8px; padding: 6px 8px;
}
.step__popemoji { font-size: .8rem; flex: none; }
.step__popname { font-size: .7rem; font-weight: 600; color: #0C1117; flex: 1; min-width: 0; white-space: nowrap; }
.step__popqty {
  font-size: .56rem; font-weight: 700; letter-spacing: .01em;
  color: #fff; background: #DC2626;
  border-radius: var(--r-pill); padding: 2px 6px; flex: none;
}
.step__popcta {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 7px; padding: 6px 8px;
  background: #DC2626; color: #fff;
  border-radius: 7px; font-size: .64rem; font-weight: 700; white-space: nowrap;
}
.step__popcta i { font-size: 11px; }

/* Paso 4 · la disputa evoluciona en el panel de Bronze (vocabulario real del Hub) */
.step__visual--hub {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(115deg, var(--sky-tint), #EEF2FF);
}
.step__hubcard {
  width: 84%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 9px 12px 11px;
  box-shadow: 0 14px 30px -16px rgba(18,18,18,.35);
}
.step__hubhead {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.step__hubhead img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; flex: none; }
.step__hubhead b { font-size: .74rem; color: var(--ink); letter-spacing: -.01em; flex: 1; min-width: 0; }
.step__plat {
  font-size: .58rem; font-weight: 700;
  background: #FFC72C; color: #006847;
  border-radius: var(--r-pill); padding: 2px 8px; flex: none;
}
.step__flow {
  list-style: none; margin: 0; padding: 9px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.step__flow::before {
  content: '';
  position: absolute; left: 9px; top: 18px; bottom: 10px;
  width: 1px; background: var(--hairline);
  opacity: 0;
  transition: opacity .45s ease calc(.5s + var(--so));
}
.step.is-in .step__flow::before { opacity: 1; }
.step__frow {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  font-size: .7rem; color: var(--slate);
  opacity: 0; transform: translateY(5px);
}
.step.is-in .step__frow { animation: step-frow .45s var(--ease) forwards; }
.step.is-in .step__frow--claim { animation-delay: calc(.5s + var(--so)); }
.step.is-in .step__frow--sent { animation-delay: calc(1.05s + var(--so)); }
.step.is-in .step__frow--won { animation-delay: calc(1.6s + var(--so)); }
@keyframes step-frow { to { opacity: 1; transform: none; } }
.step__fdot {
  width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; flex: none;
}
.step__frow--claim .step__fdot { background: #FCDBC6; color: #AA490D; }
.step__frow--sent .step__fdot { background: var(--sky-tint); color: var(--sky-deep); }
.step__frow--won .step__fdot { background: var(--success-tint); color: var(--success-ink); }
.step__frow--won > span:not(.step__fdot) { font-weight: 700; color: var(--success-ink); }
.step__frow--won em { margin-left: auto; font-style: normal; font-size: .68rem; font-weight: 700; color: var(--success-ink); }

@media (prefers-reduced-motion: reduce) {
  .step__visual--cam img, .step__frame i, .step__tag, .step__flow::before,
  .step__masks path, .step__scrim, .step__pop, .step__frow {
    transition: none; animation: none; opacity: 1; transform: none;
  }
  .step__flash, .step__scan { display: none; }
}

/* ---------- Vídeo demo ---------- */
.videotabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.videotab {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--soft);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
/* Relleno de progreso del vídeo activo (--vprog: 0..1, lo escribe main.js cada 500ms) */
.videotab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: calc(var(--vprog, 0) * 100%);
  background: var(--amber);
  transition: width .5s linear, opacity .18s var(--ease);
}
/* Al cambiar de vídeo el relleno saliente se apaga con un fundido, no se "vacía" hacia atrás */
.videotab.is-fading::before { opacity: 0; }
.videotab.is-snap::before { transition: none; }
.videotab:hover { background: var(--bone); }
.videotab.is-active { border-color: var(--ink); }
.videocard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-2), 0 32px 64px -32px rgba(18, 18, 18, .4);
}
.videocard iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ---------- Integraciones con logos reales ---------- */
.igrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 880px;
  margin-inline: auto;
}
.igrid__cell {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  min-height: 96px;
  transition: transform var(--d-norm) var(--ease), box-shadow var(--d-norm) var(--ease);
}
.igrid__cell:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(18,18,18,.18); }
.igrid__cell img {
  max-height: 34px;
  max-width: 82%;
  width: auto;
  object-fit: contain;
  /* Siempre en gris: el hover solo gana presencia, nunca color */
  filter: grayscale(1) brightness(var(--logo-dim, 1));
  opacity: .75;
  transition: filter var(--d-norm) var(--ease), opacity var(--d-norm) var(--ease);
}
.igrid__cell:hover img {
  filter: grayscale(1) brightness(calc(var(--logo-dim, 1) * .88));
  opacity: 1;
}
.igrid__more {
  font-size: .875rem;
  color: var(--slate);
  font-weight: 500;
}
@media (max-width: 860px) { .igrid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; } }
@media (max-width: 560px) { .igrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Ajuste de densidad por logo: en gris, unos salen mucho más claros que otros */
.igrid__cell img[src*="deliveroo"] { --logo-dim: .62; }
.igrid__cell img[src*="revo"] { max-height: 28px; }

.ichips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 720px;
  margin: 28px auto 0;
}
.ichips__item {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--paper);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
}

/* ==========================================================================
   Dropdown "Productos" en la nav (jul 2026)
   ========================================================================== */
.nav__item--drop { position: relative; }
.nav__droptrigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 11px;
  border-radius: var(--r-pill);
  border: 0;
  background: none;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  color: var(--slate);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.nav__droptrigger:hover, .nav__item--drop.is-open .nav__droptrigger { background: var(--bone); color: var(--ink); }
.nav__droptrigger .ph-bold { font-size: 11px; transition: transform var(--d-fast) var(--ease); }
.nav__item--drop:hover .nav__droptrigger .ph-bold,
.nav__item--drop:focus-within .nav__droptrigger .ph-bold,
.nav__item--drop.is-open .nav__droptrigger .ph-bold { transform: rotate(180deg); }

.nav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  min-width: 320px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(18, 18, 18, .07);
  box-shadow: 0 18px 50px rgba(18, 18, 18, .14), inset 0 1px 0 rgba(255, 255, 255, .75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.nav__drop::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  width: 100%;
  height: 14px;
}
.nav__item--drop:hover .nav__drop,
.nav__item--drop:focus-within .nav__drop,
.nav__item--drop.is-open .nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__drop a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--d-fast) var(--ease);
}
.nav__drop a:hover { background: rgba(18, 18, 18, .045); }
.nav__drop a strong { display: block; font-size: .9375rem; font-weight: 700; }
.nav__drop a small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mute); font-weight: 400; }
.nav__dropicon {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 17px;
}

@media (max-width: 860px) {
  .nav__droptrigger { display: none; }
  .nav__item--drop::before {
    /* Único texto que vive en el CSS: se traduce por el lang del documento
       (ver «Sistema multiidioma» en el README). */
    content: 'Productos';
    display: block;
    padding: 12px 14px 4px;
    font-weight: 500;
    font-size: .8125rem;
    color: var(--mute);
  }
  html[lang|="en"] .nav__item--drop::before { content: 'Products'; }
  .nav__drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 0;
  }
}

/* ==========================================================================
   Contacto (jul 2026)
   ========================================================================== */
.contact {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: start;
}
.contact__info .eyebrow { margin-bottom: 20px; }
.contact__steps {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact__steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--slate);
  font-size: .9375rem;
  line-height: 1.5;
}
.contact__stepnum {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: .8125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.contact__direct {
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact__direct p { font-weight: 500; margin-bottom: 4px; }

.contact__card {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(18, 18, 18, .07);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 28px 56px -28px rgba(18, 18, 18, .25);
  padding: clamp(24px, 3vw, 36px);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form label {
  font-weight: 500;
  font-size: .875rem;
  color: rgba(18, 18, 18, .7);
}
.form input, .form select, .form textarea {
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(18, 18, 18, .12);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(252, 181, 93, .25);
  outline: none;
}
.form textarea { resize: vertical; }
.form__note {
  margin-top: 14px;
  font-size: .875rem;
  color: var(--success-ink);
}
.form__legal {
  margin-top: 14px;
  font-size: .8125rem;
  color: var(--mute);
}
.form__legal a { color: var(--slate); text-decoration: underline; }
.form > .btn { margin-top: 6px; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Contenido iteración 2 (jul 2026)
   ========================================================================== */

/* ---------- Extra strip (Bronze Watcher) ---------- */
.extra-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(18, 18, 18, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
  margin-top: clamp(40px, 5vw, 64px);
}
.extra-strip__icon { flex: none; width: 52px; height: 52px; margin-bottom: 0; background: var(--cream); color: var(--bronze); }
.extra-strip__text { color: var(--slate); font-size: .9375rem; }
.extra-strip__text b { color: var(--ink); }
.extra-strip__cta { flex: none; margin-left: auto; }

@media (max-width: 720px) {
  .extra-strip { flex-direction: column; align-items: flex-start; }
  .extra-strip__cta { margin-left: 0; }
}

/* ---------- ROI steps (banda de resultados) ---------- */
.roi-steps {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 40px);
}
.roi-steps__step { display: flex; align-items: center; gap: 12px; }
.roi-steps__num {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  font-size: .75rem;
}
.roi-steps__step p { margin: 0; font-size: .875rem; color: #AFAFAF; max-width: 22rem; }
.roi-steps__arrow { color: #AFAFAF; opacity: .4; flex: none; }

@media (max-width: 720px) {
  .roi-steps { flex-direction: column; align-items: flex-start; gap: 16px; }
  .roi-steps__arrow { display: none; }
}

/* Responsive del hero-escena: en pantallas estrechas el copy vuelve al flujo
   normal y la escena se amplía y desplaza para centrar tablet + bandeja. */
@media (max-width: 900px) {
  .hero { padding-top: 40px; display: flex; flex-direction: column; }
  .hero__overlay { position: static; order: -1; margin-bottom: 20px; }
  .hero__copy { max-width: 100%; }
  .hero__copy .h-display { font-size: clamp(2.3rem, 9vw, 3rem); }
  /* la escena se amplía y sobresale solo por la izquierda (zona blanca) */
  .hero__scene { width: 165%; margin-left: -65%; }
}

/* ==========================================================================
   Blog (ago 2026) — listado de artículos y página de post.
   Mismos tokens que el resto del sitio: DM Sans para texto, Fragment Mono
   para etiquetas y datos, ámbar como único acento.
   ========================================================================== */

/* ---------- Migas ---------- */
.crumbs { font-family: var(--font-mono); font-size: .75rem; color: var(--mute); margin-bottom: clamp(18px, 2.2vw, 26px); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '/'; color: var(--soft); }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- Filtro de categorías del listado ---------- */
.blogfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.blogfilter__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--slate);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.blogfilter__btn:hover { background: var(--bone); color: var(--ink); }
.blogfilter__btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.blogfilter__btn span { font-family: var(--font-mono); font-size: .6875rem; opacity: .6; }

/* ---------- Tarjetas de artículo ---------- */
.blogcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 30px); }
.blogcards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--d-norm) var(--ease), box-shadow var(--d-norm) var(--ease);
}
.bcard:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(18, 18, 18, .04), 0 20px 40px -20px rgba(18, 18, 18, .18); }
/* el display:flex de la tarjeta gana al hidden del navegador: hay que repetirlo */
.bcard[hidden] { display: none; }
.bcard__media { aspect-ratio: 16 / 9; background: var(--bone); overflow: hidden; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bcard__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.bcard h3 { font-weight: 500; font-size: 1.125rem; line-height: 1.28; letter-spacing: -.01em; text-wrap: pretty; }
.bcard p { color: var(--slate); font-size: .9375rem; }
.bcard__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .04em;
  color: var(--mute);
}
.bcard__foot .ph { font-size: 1rem; }
.bcard__foot time + span::before { content: '·'; margin-right: 10px; color: var(--soft); }
/* Destacado: ocupa el ancho de la rejilla con el medio a la izquierda */
.bcard--lead { grid-column: 1 / -1; flex-direction: row; }
.bcard--lead .bcard__media { aspect-ratio: auto; flex: 0 0 46%; }
.bcard--lead .bcard__body { padding: clamp(26px, 3vw, 42px); gap: 14px; justify-content: center; }
.bcard--lead h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 700; line-height: 1.14; letter-spacing: -.02em; }
.bcard--lead p { font-size: 1.0625rem; }

@media (max-width: 1024px) { .blogcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .bcard--lead { flex-direction: column; }
  .bcard--lead .bcard__media { flex: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) { .blogcards, .blogcards--2 { grid-template-columns: 1fr; } }

/* ---------- Cabecera del post ---------- */
.post-hero { padding-block: clamp(28px, 3.4vw, 44px) clamp(28px, 3.4vw, 40px); }
/* la cabecera comparte columna con el cuerpo del artículo: mismo eje de lectura */
.post-hero .crumbs, .post-hero__inner { max-width: 720px; margin-inline: auto; }
.post-hero .crumbs { margin-bottom: clamp(20px, 2.4vw, 30px); }
.post-hero .pill { margin-bottom: 18px; }
.post-hero .lead { margin-top: 18px; }
.postmeta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}
.postmeta img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.postmeta__who { font-weight: 500; font-size: .9375rem; }
.postmeta__when { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--mute); margin-top: 2px; }
.postmeta__when span + span::before { content: '·'; margin: 0 6px; }

.post__cover {
  max-width: 900px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.post__cover img { width: 100%; height: auto; }
.post__cover figcaption { padding: 12px 16px; font-size: .8125rem; color: var(--mute); background: var(--bone); }

/* ---------- Cuerpo del artículo ---------- */
.post__body { max-width: 720px; margin-inline: auto; padding-block: clamp(40px, 5vw, 64px); }
.prose { font-size: 1.0625rem; line-height: 1.72; color: #2B2B2B; }
.prose > * + * { margin-top: 22px; }
.prose h2 {
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: clamp(44px, 5vw, 60px);
  text-wrap: balance;
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 {
  font-weight: 500;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 34px;
}
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { background: var(--cream); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--amber-deep); }
.prose ol li::marker { font-family: var(--font-mono); font-size: .875rem; }
.prose hr { border: none; border-top: 1px solid var(--hairline); margin-block: clamp(36px, 4vw, 52px); }
.prose figure { margin-top: clamp(28px, 3vw, 40px); }
.prose figure img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--hairline); }
.prose figcaption { margin-top: 10px; font-size: .8125rem; color: var(--mute); }
.prose figure--narrow img { max-width: 520px; margin-inline: auto; }

/* Respuesta autocontenida bajo el primer H2 (citabilidad en buscadores con IA) */
.answer {
  background: var(--cream);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 20px 24px;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.62;
}

/* Nota lateral / consejo */
.callout {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--sky-tint);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}
.callout .ph { color: var(--sky-deep); font-size: 1.5rem; flex: none; }
.callout--cream { background: var(--cream); }
.callout--cream .ph { color: #8B6433; }

/* Cita de cliente */
.prose blockquote {
  margin-top: clamp(28px, 3vw, 36px);
  padding: 24px 26px;
  background: var(--bone);
  border-radius: var(--r-md);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}
.prose blockquote p + p { margin-top: 14px; }
.prose blockquote footer {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--slate);
}

/* Tablas: con scroll propio en móvil, nunca desbordan la página */
.tablewrap { overflow-x: auto; margin-top: clamp(24px, 3vw, 32px); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 34rem; }
.prose thead th {
  text-align: left;
  background: var(--bone);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 12px 16px;
  white-space: nowrap;
}
.prose tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.prose td, .prose tbody th { padding: 14px 16px; border-top: 1px solid var(--hairline); vertical-align: top; }
.prose tbody tr:hover { background: #FCFCFC; }

/* Ficha de datos del caso de éxito */
.casefacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 26px; }
.casefacts > div { border-top: 2px solid var(--amber); padding-top: 14px; }
.casefacts .mono { display: block; font-size: 1.375rem; letter-spacing: -.02em; }
.casefacts small { display: block; margin-top: 4px; font-size: .8125rem; color: var(--slate); }
.caselogo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--bone);
  margin-bottom: 22px;
}
.caselogo img { height: 34px; width: auto; }
@media (max-width: 560px) { .casefacts { grid-template-columns: 1fr; gap: 18px; } }

/* Cierre del artículo: siguiente lectura */
.related { border-top: 1px solid var(--hairline); }
.related .section-head { margin-bottom: clamp(28px, 3vw, 40px); }

/* ============================================================
   Idiomas: selector del nav y aviso de versión traducida
   ============================================================ */

.langsel { position: relative; flex: none; }
.langsel__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(18, 18, 18, .12);
  border-radius: var(--r-pill);
  background: transparent;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.langsel__btn:hover { background: var(--bone); border-color: rgba(18, 18, 18, .18); }
.langsel__btn > .ph { font-size: 15px; color: var(--bronze); }
.langsel__caret { font-size: 10px; transition: transform var(--d-fast) var(--ease); }
.langsel.is-open .langsel__caret { transform: rotate(180deg); }

.langsel__drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 150px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid rgba(18, 18, 18, .07);
  box-shadow: 0 18px 50px rgba(18, 18, 18, .14), inset 0 1px 0 rgba(255, 255, 255, .75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}
.langsel.is-open .langsel__drop,
.langsel:focus-within .langsel__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.langsel__drop a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: .875rem;
  color: var(--slate);
  text-decoration: none;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.langsel__drop a:hover { background: rgba(18, 18, 18, .045); color: var(--ink); }
.langsel__drop a[aria-current="true"] { font-weight: 650; color: var(--ink); }
.langsel__drop a[aria-current="true"] .ph-check { font-size: 14px; color: var(--bronze); }

/* En móvil sube a la cabecera del menú desplegado, junto al botón de cerrar:
   se ve al abrir el menú y no le roba sitio a la navegación. El menú ya es un
   panel absoluto que arranca a 68px, así que basta con sacar el selector de su
   flujo hacia arriba hasta centrarlo en la barra (68 − 16 = 52). */
@media (max-width: 860px) {
  .langsel {
    position: absolute;
    /* El panel arranca justo bajo la barra, así que subir su propia altura
       deja el selector dentro de la cabecera; con la misma altura que la
       barra, se centra solo sin depender del tamaño del botón. */
    top: calc(-1 * var(--nav-h));
    height: var(--nav-h);
    display: flex;
    align-items: center;
    /* A la izquierda del botón de cerrar: su ancho (40px) más un respiro. */
    right: calc(var(--gutter) + 46px);
    z-index: 2;
  }
  .langsel__btn { padding: 6px 10px; }
  .langsel__drop {
    right: 0;
    /* Cae sobre el panel blanco del menú: casi opaco para que se lea. */
    background: rgba(255, 255, 255, .98);
  }
}

/* Aviso: "esta página existe en tu idioma". Va en flujo, antes del header,
   así que desaparece al hacer scroll sin pelearse con el nav sticky. */
.langbar {
  background: var(--cream);
  border-bottom: 1px solid rgba(139, 100, 51, .18);
  font-size: .875rem;
  color: var(--ink);
}
.langbar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 11px 0;
}
.langbar__text { display: flex; align-items: center; gap: 9px; margin: 0; flex: 1 1 auto; }
.langbar__text .ph { font-size: 17px; color: var(--bronze); flex: none; }
.langbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.langbar__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--d-fast) var(--ease);
}
.langbar__go:hover { opacity: .85; }
.langbar__dismiss {
  padding: 7px 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: inherit;
  font-size: .8125rem;
  color: var(--slate);
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.langbar__dismiss:hover { background: rgba(18, 18, 18, .06); color: var(--ink); }

@media (max-width: 560px) {
  .langbar__inner { align-items: flex-start; }
  .langbar__actions { width: 100%; }
  .langbar__go { flex: 1; justify-content: center; }
}