/* ═══════════════════════════════════════════════════════════════════
   RAPIBOY · Restaurantes Argentina — 2026
   Sistema visual compartido con Rapilog / Ecommerce (mismos tokens).
   Propio de esta página: --green (CTA de restaurantes).
   Estructura: 17 bloques (top bar + 15 secciones + footer), cada uno con
   su bloque comentado e id propio para editar/animar por separado.
   Estado: Fase 6 · assets locales (AVIF + fallback en <picture>).
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 0 · TOKENS ─────────────────────────── */
:root{
  /* Color */
  --navy:        #242468;
  --navy-diag:   #2f2f6f;   /* vectores decorativos */
  --navy-soft:   #494970;
  --violet:      #8787b6;
  --text:        #6b6b8a;
  --nav:         #4a5565;
  --border:      #dddde8;
  --surface:     #f5f6fa;
  --white:       #ffffff;
  --yellow:      #fdc616;   /* sólo reclutamiento ("Quiero repartir") */
  --cyan:        #00a3cf;   /* eyebrows, acentos secundarios */
  --green:       #1f9e63;   /* CTA de restaurantes */
  --logo-slot:   #d9d9d9;   /* placeholder de logos pendientes */

  /* Tipografía */
  --font: 'Rubik', system-ui, -apple-system, sans-serif;

  --fs-display:    70px;   /* hero de foto: 3 líneas en 726px, fiel al Figma */
  --fs-h2:         45px;
  --fs-h3:         35px;
  --fs-stat:       68px;
  --fs-card-title: 20px;
  --fs-card-sm:    16px;   /* títulos de card horizontal (Tecnología, Ventajas) */
  --fs-faq:        16px;
  --fs-body:       15px;
  --fs-small:      13px;
  --fs-nav:        14px;
  --fs-eyebrow:    11px;

  /* Radios (sistema) */
  --r-sm:   8px;
  --r:     10px;
  --r-lg:  15px;
  --r-pill: 999px;

  /* Layout · contenido 1260px (334→1594 en el frame de 1920) */
  --container: 1308px;
  --gutter:    24px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ─────────────────────────── 1 · RESET ─────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  color:var(--text);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
picture{ display:contents; }
h1,h2,h3,h4,p,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Caja con recorte: ubica un export dentro de la caja del Figma cuando el
   archivo no coincide 1:1 con esa caja (repartidor, laptop, personaje y 2
   ilustraciones de Pasos). --w/--h/--l/--t = tamaño y posición del archivo. */
.fx{ position:relative; display:block; overflow:hidden; flex:none; }
.fx img{
  position:absolute;
  left:var(--l, 0); top:var(--t, 0);
  width:var(--w, 100%); height:var(--h, 100%);
  max-width:none;
}

/* ─────────────────── 2 · TIPOGRAFÍA COMPARTIDA ─────────────────── */
.h2{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--navy);
}
.h2--light{ color:var(--white); }

.lead{
  font-size:var(--fs-body);
  line-height:1.45;
  letter-spacing:.02em;
  color:var(--text);
}
.lead--light{ color:var(--white); }

.eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.2;
  margin-bottom:14px;
  color:var(--cyan);
}
.eyebrow__line{ width:18px; height:2px; background:currentColor; flex:none; }
.eyebrow--cyan{ color:var(--cyan); }
.eyebrow--yellow{ color:var(--yellow); }

.section-head{ margin-bottom:57px; }
.section-head .lead{ margin-top:15px; max-width:860px; }
.section-head--center{ text-align:center; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center .lead{ margin-inline:auto; }

/* ─────────────────────────── 3 · BOTONES ─────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding-inline:26px;
  border-radius:var(--r);
  border:2px solid transparent;
  font-size:var(--fs-body);
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

.btn--green{ background:var(--green); color:var(--white); min-width:249px; }
.btn--green:hover{ background:#1a8755; }

.btn--yellow{ background:var(--yellow); color:var(--navy); }
.btn--yellow:hover{ background:#eab410; }

.btn--cyan{ background:var(--cyan); color:var(--white); }
.btn--cyan:hover{ background:#008cb3; }

.btn--outline-light{ background:transparent; color:var(--white); border-color:var(--white); min-width:182px; }
.btn--outline-light:hover{ background:var(--white); color:var(--navy); }

.btn--sm{ height:36px; padding-inline:18px; font-size:var(--fs-nav); font-weight:500; letter-spacing:0; }
.btn--block{ width:100%; }

/* ─────────────────────────── 4 · CARDS ─────────────────────────── */
.card{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--r);
  transition:border-color .25s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
/* Sin sombras en reposo. La única sombra vive en hover (tinte navy). */
.card:hover,
.faq__item:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -24px rgba(36,36,104,.55);
}
.card--white{ background:var(--white); }

.card__title{
  font-size:var(--fs-card-title);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.25;
  color:var(--navy);
}
.card__text{
  font-size:var(--fs-small);
  line-height:1.45;
  letter-spacing:.03em;
  color:var(--text);
}

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:60px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:31px; }

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding-inline:14px;
  border-radius:var(--r-pill);
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--white);
}
.pill--cyan{ background:var(--cyan); }
.pill--yellow{ background:var(--yellow); color:var(--navy); } /* contraste corregido */

/* ─────────── VECTORES DECORATIVOS (navy-diag, trazo 140, puntas redondas) ───────────
   SVG inline con las coordenadas exactas del Figma (frame de 1920px).
   .vec--full = 1920px centrado; en pantallas >1920 escala al ancho.
   pathLength="1" deja todo listo para que se dibujen en la Fase 5.       */
.vec{ position:absolute; pointer-events:none; overflow:visible; z-index:0; }
.vec--full{ left:50%; top:0; width:1920px; height:auto; margin-left:-960px; max-width:none; }
@media (min-width:1921px){ .vec--full{ width:100%; left:0; margin-left:0; } }
.vec__path{
  stroke:var(--navy-diag);
  stroke-width:140;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Glows (radiales decorativos) */
.glow{ position:absolute; width:716px; height:716px; border-radius:50%; pointer-events:none; z-index:0; }

/* Carrusel continuo (marquee) — cards de logo */
.marquee{
  position:relative;
  overflow:hidden;
  /* Aire arriba/abajo: con zoom del navegador el borde de 2px de las cards
     caía justo en el límite del recorte y se perdía la línea inferior.
     El margen negativo compensa, así el layout no cambia. */
  padding-block:6px;
  margin-block:-6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee var(--speed, 34s) linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
/* El JS duplica los ítems: desplazar la mitad del track (+ medio gap) da un loop sin costura */
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - var(--gap, 0px) / 2)); }
}
.logo-card{
  flex:none;
  display:flex;              /* flex (no grid): con <picture> el <source> abría una fila fantasma */
  align-items:center;
  justify-content:center;
  background:var(--white);
  border:2px solid var(--border);
  border-radius:var(--r);
}
.logo-card--navy{ background:var(--navy); }
.logo-ph{ display:block; width:58%; height:26px; border-radius:var(--r-sm); background:var(--logo-slot); }
.logo-card--navy .logo-ph{ background:rgba(255,255,255,.18); }

/* ═══════════════════════════════════════════════════════════════════
   0 · TOP BAR   (mismo componente que Ecommerce · logo Rapiboy)
   ═══════════════════════════════════════════════════════════════════ */
.s-topbar{
  position:fixed;
  inset:0 0 auto 0;
  height:64px;
  background:var(--white);
  z-index:100;
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.s-topbar.is-hidden{ transform:translateY(-100%); }
.s-topbar.is-stuck{ box-shadow:0 1px 0 var(--border); }

.topbar__inner{
  max-width:1895px;
  height:100%;
  margin-inline:auto;
  padding-inline:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.topbar__logo{ display:flex; align-items:center; }
.topbar__logo-svg{ height:26px; width:auto; display:block; }

.topbar__nav{ display:flex; align-items:center; gap:40px; }
.topbar__nav a{
  font-size:var(--fs-nav);
  font-weight:500;
  line-height:20px;
  color:var(--nav);
  transition:color .2s ease;
}
.topbar__nav a:hover{ color:var(--navy); }
.topbar__nav a.is-active{ color:var(--navy); font-weight:700; }

.topbar__item{ position:relative; display:flex; align-items:center; }
.topbar__item > a{ display:inline-flex; align-items:center; }

.mega{
  position:fixed;
  top:64px; left:0; right:0;
  width:100%;
  background:var(--white);
  border-top:1px solid var(--border);
  box-shadow:0 30px 50px -24px rgba(36,36,104,.35);
  padding:34px 0 38px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .25s var(--ease), visibility .2s;
  z-index:30;
}
.mega::before{ content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
.topbar__item:hover .mega,
.topbar__item:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }

.mega__inner{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 40px; }
.mega__link{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:var(--r); }
.mega__link:hover{ background:var(--surface); }
.mega__icon{
  flex:none;
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r);
  background:var(--surface);
  transition:background-color .2s ease;
}
.mega__link:hover .mega__icon{ background:var(--white); }
.mega__icon img{ width:36px; height:36px; object-fit:contain; transition:transform .25s var(--ease); }
.mega__link:hover .mega__icon img{ transform:scale(1.12); }
/* Placeholder hasta que lleguen las imágenes (36px dentro del cuadro de 44) */
.mega__icon--ph::after{ content:''; width:36px; height:36px; border-radius:var(--r-sm); background:var(--logo-slot); }
.mega__t{ font-size:var(--fs-body); font-weight:700; color:var(--navy); }

.topbar__actions{ display:flex; align-items:center; gap:22px; }
.topbar__link{ font-size:var(--fs-nav); font-weight:500; color:var(--navy); }
.topbar__link:hover{ text-decoration:underline; }
.topbar__mobile-actions{ display:none; }   /* aparece dentro del menú hamburguesa */

/* Selector de país */
.country{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding-inline:12px;
  border:1px solid var(--border);
  border-radius:var(--r);
  font-size:var(--fs-nav);
  font-weight:500;
  color:var(--nav);
  cursor:pointer;
  user-select:none;
}
.country__flag{ font-size:16px; line-height:1; }
.country__caret{ width:10px; height:6px; color:var(--nav); transition:transform .2s var(--ease); }
.country:hover, .country:focus-within{ border-color:var(--navy); color:var(--navy); }
.country:hover .country__caret,
.country:focus-within .country__caret{ transform:rotate(180deg); }
.country__menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:170px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:0 16px 32px -20px rgba(36,36,104,.35);
  padding:6px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s var(--ease), visibility .18s;
  z-index:20;
}
.country:hover .country__menu,
.country:focus-within .country__menu{ opacity:1; visibility:visible; transform:none; }
.country__opt{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm); color:var(--nav); }
.country__opt:hover{ background:var(--surface); color:var(--navy); }
.country__opt[aria-selected="true"]{ color:var(--navy); font-weight:700; }

/* Hamburguesa (mobile) */
.topbar__burger{
  display:none;
  width:40px; height:40px;
  background:none; border:0;
  flex-direction:column; justify-content:center; gap:5px;
  cursor:pointer;
}
.topbar__burger span{
  display:block; height:2px; width:22px;
  background:var(--navy); border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s ease;
}
.topbar__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.topbar__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.topbar__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════════
   1 · HERO   (fondo en 4 capas: foto · velo 15% · vector · recorte)
   La foto y el recorte comparten EXACTAMENTE la misma caja (1922×1078,
   desplazada 182px hacia arriba como en el Figma), así calzan a cualquier
   ancho. Hasta 1922px la foto se ve a escala 1:1, centrada.
   ═══════════════════════════════════════════════════════════════════ */
.s-hero{
  position:relative;
  min-height:896px;
  padding:234px 0 120px;
  background:var(--navy);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
/* Stage: caja con la proporción de la foto (1922×1078), apoyada abajo.
   Hasta 1922px de ancho se ve a escala 1:1. Por debajo de ~1500px se corre
   a la izquierda (--hero-shift) para que la moza no quede cortada. */
.hero__stage{
  position:absolute;
  left:50%;
  bottom:0;
  width:max(1922px, 100%);
  aspect-ratio:1922 / 1078;
  transform:translateX(calc(-50% - max(0px, 752px - 50vw)));
}
.hero__photo{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.hero__shade{ position:absolute; inset:0; background:rgba(0,0,0,.15); }
/* Recorte de la moza: su caja del Figma (x1208 y293 · 482×785) en % del stage */
.hero__moza{ position:absolute; left:62.85%; top:27.18%; width:25.08%; height:72.82%; max-width:none; }
.hero__vec{ left:.104%; top:16.883%; width:99.896%; height:83.117%; max-width:none; }
.hero__fade{ display:none; }

.hero__inner{ position:relative; }
.hero__title{
  max-width:726px;
  font-size:var(--fs-display);
  font-weight:900;
  line-height:.97;
  letter-spacing:-.01em;
  color:var(--white);
  text-shadow:2px 2px 5.2px rgba(0,0,0,.25);
}
.hero__lead{
  margin-top:44px;
  max-width:448px;
  font-size:20px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--white);
  text-shadow:2px 2px 5.2px rgba(0,0,0,.25);
}
.hero__cta{ display:flex; gap:28px; margin-top:33px; }

/* ═══════════════════════════════════════════════════════════════════
   2 · INTEGRACIONES   (banda navy + vector · marquee sin flechas)
   ═══════════════════════════════════════════════════════════════════ */
.s-integraciones{
  position:relative;
  background:var(--navy);
  padding:42px 0 50px;
  overflow:hidden;
}
.integraciones__inner{ position:relative; z-index:1; }
.integraciones__title{
  text-align:center;
  font-size:20px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:41px;
}
.marquee--integ .marquee__track{ --gap:59px; --speed:80s; gap:var(--gap); }
.logo-card img{ display:block; max-width:84%; height:auto; object-fit:contain; }
.marquee--integ .logo-card{ width:203px; height:68px; }

/* ═══════════════════════════════════════════════════════════════════
   3 · REPARTIDORES DISPONIBLES   (2 cards · fijos / on demand)
   ═══════════════════════════════════════════════════════════════════ */
.s-repartidores-disponibles{ background:var(--surface); padding:73px 0 62px; }
.s-repartidores-disponibles .section-head{ margin-bottom:67px; }

.servicio{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-height:369px;
  padding:30px 30px 36px;
}
/* Animación de cada modalidad (SVG que arma el JS, módulo 12).
   Mismo lenguaje que las rutas de Rapilog: punto que viaja, ruta punteada
   que se pinta a su paso. Fijos = cyan · OnDemand = amarillo (sus pills). */
.servicio__anim{ width:100%; height:126px; margin-bottom:15px; }
.ranim{ display:block; width:100%; height:100%; overflow:visible; }
.ranim__base{ fill:none; stroke:var(--border); stroke-width:2; stroke-linecap:round; stroke-dasharray:2 6; }
.ranim__trail{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:1; }
.ranim__resto{ fill:var(--navy); }
.ranim__door{ fill:var(--white); }
.ranim__dest{ fill:var(--white); stroke:var(--border); stroke-width:2; transition:stroke .3s ease, fill .3s ease; }
.ranim__halo{ opacity:.22; }
.ranim__ring{ fill:none; stroke-width:2; }
.ranim__pkg{ fill:var(--navy); }
.ranim__bar{ stroke:var(--border); stroke-width:4; stroke-linecap:round; }
.ranim__barfill{ stroke-width:4; stroke-linecap:round; }
.ranim__txt{ font-family:var(--font); font-size:10px; font-weight:700; letter-spacing:.08em; fill:var(--violet); }
/* Fijos · cyan */
.ranim--fijos .ranim__trail, .ranim--fijos .ranim__barfill{ stroke:var(--cyan); }
.ranim--fijos .ranim__dot, .ranim--fijos .ranim__halo{ fill:var(--cyan); }
.ranim--fijos .ranim__dest.is-hit{ stroke:var(--cyan); fill:#e0f4fa; }
/* OnDemand · amarillo (el punto lleva borde navy para leerse sobre blanco) */
.ranim--ondemand .ranim__trail{ stroke:var(--yellow); }
.ranim--ondemand .ranim__dot{ fill:var(--yellow); stroke:var(--navy); stroke-width:1.5; }
.ranim--ondemand .ranim__halo{ fill:var(--yellow); }
.ranim--ondemand .ranim__ring{ stroke:var(--yellow); }
.ranim--ondemand .ranim__dest.is-hit{ stroke:var(--yellow); fill:#fff6d6; }
.servicio .card__title{ margin-top:17px; }
.servicio .card__text{ margin-top:12px; max-width:381px; }
.servicio__link{
  margin-top:8px;
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--navy);
}
.servicio__link:hover{ text-decoration:underline; }
.servicios__cta{ display:flex; justify-content:flex-end; margin-top:18px; }
.servicios__cta .btn{ min-width:180px; }

/* ═══════════════════════════════════════════════════════════════════
   4 · PASOS REGISTRO   (4 cards numeradas)
   ═══════════════════════════════════════════════════════════════════ */
.s-pasos{ background:var(--white); padding:60px 0 72px; }
.s-pasos .section-head{ margin-bottom:60px; }
.pasos__title{ max-width:630px; }

.paso{
  position:relative;
  min-height:240px;
  padding:31px 17px 20px;
}
.paso__num{
  position:absolute;
  top:15px; left:15px;
  width:43px; height:43px;
  display:grid; place-items:center;
  border-radius:var(--r-sm);
  background:var(--cyan);
  color:var(--white);
  font-size:26px;
  font-weight:800;
  z-index:1;
}
.paso__img{ height:125px; display:flex; justify-content:center; align-items:flex-start; }
.paso__pic{ object-fit:contain; }
.paso__text{
  margin-top:11px;
  font-size:var(--fs-body);
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--text);
}
.pasos__note{ margin-top:20px; }
.pasos__cta{ margin-top:37px; }

/* ═══════════════════════════════════════════════════════════════════
   5 · CUMPLIMIENTO   (divisor de marca · foto con blur + vector)
   El repartidor sobresale 126px hacia arriba (sobre Pasos): la sección
   NO recorta; el recorte de la foto y del vector vive en .cumpl__bg.
   ═══════════════════════════════════════════════════════════════════ */
.s-cumplimiento{
  position:relative;
  min-height:521px;
  display:flex;
  align-items:center;
  background:var(--navy);
  isolation:isolate;
  z-index:1;
  overflow-x:clip;   /* recorta a los lados sin cortar al repartidor arriba */
}
.cumpl__bg{ position:absolute; inset:0; overflow:hidden; z-index:-1; }
.cumpl__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;          /* el desenfoque ya viene en el export */
}
.cumpl__glow{
  position:absolute;
  left:calc(50% + 39px);
  top:-248px;
  width:926px; height:926px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.15), rgba(255,255,255,0));
}
.cumpl__inner{ position:relative; }
.cumpl__title{
  max-width:678px;
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.25;
  color:var(--white);
  text-shadow:0 2px 5px rgba(0,0,0,.3);
}
.cumpl__rider{
  position:absolute;
  left:calc(50% + 223px);
  top:-126px;
  width:512px;
  height:647px;
  z-index:2;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════
   6 · TECNOLOGÍA   (3 cards + laptop a sangre)
   Fase 5: sticky + las cards entran de a una con el scroll (Sohub).
   ═══════════════════════════════════════════════════════════════════ */
.s-tecnologia{ position:relative; background:var(--surface); }
.s-tecnologia .section-head{ margin-bottom:66px; }

.tec__cards{ position:relative; z-index:1; width:587px; max-width:100%; display:flex; flex-direction:column; gap:26px; align-items:flex-start; }
.tec-card{
  width:100%;
  min-height:119px;
  display:flex;
  gap:27px;
  padding:15px 22px 15px 16px;
}
.tec-card__icon{ width:85px; height:85px; flex:none; display:flex; align-items:center; justify-content:center; }
.tec-card__icon img{ width:85px; height:85px; object-fit:contain; }
.tec-card__icon img.tec-card__mini{ width:65px; height:76px; }
.tec-card__icon--box{ background:var(--white); border-radius:var(--r); }
.tec-card > div{ padding-top:12px; }
.tec-card__title,
.ventaja__title{
  font-size:var(--fs-card-sm);
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.3;
  color:var(--navy);
  margin-bottom:6px;
}
.tec-card .card__text{ max-width:434px; letter-spacing:.01em; }
.tec__cta{ margin-top:7px; }
/* El laptop sangra hasta el borde derecho: arranca 43px antes del centro
   de pantalla (el container es simétrico, así que 50% = centro) y a la
   altura de la primera card. */
.tec__body{ position:relative; }
.tec__laptop{
  position:absolute;
  top:0;
  left:calc(50% - 43px);
  width:1003px;
  height:592px;
  z-index:0;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════════
   7 · NÚMEROS   (3 stats · sin título)
   ═══════════════════════════════════════════════════════════════════ */
.s-numeros{ background:var(--white); padding:113px 0 103px; }
.numeros__grid{ gap:43px; }
.stat{
  min-height:213px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px 20px 30px;
}
.stat__num{
  font-size:var(--fs-stat);
  font-weight:900;
  line-height:1.15;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.stat__num--long{ font-size:49px; line-height:1.6; }  /* +10.000.000 entra en 388px */
.stat__label{
  font-size:24px;
  font-weight:400;
  line-height:1.05;
  color:var(--navy);
}

/* ═══════════════════════════════════════════════════════════════════
   8 · VENTAJAS DEL SERVICIO   (personaje + path navy + 4 cards)
   ═══════════════════════════════════════════════════════════════════ */
.s-ventajas{
  position:relative;
  background:var(--surface);
  padding:113px 0 144px;
  overflow:hidden;
  isolation:isolate;
}
.s-ventajas .vec{ z-index:-1; }
.ventajas__character{
  position:absolute;
  left:calc(50% - 631px);
  bottom:0;
  width:868px;
  height:891px;
  z-index:0;
  pointer-events:none;
}
.s-ventajas .container{ position:relative; z-index:1; }
.ventajas__col{ margin-left:527px; max-width:733px; }
.ventajas__list{ display:flex; flex-direction:column; gap:24px; }
.ventaja{
  min-height:115px;
  display:flex;
  align-items:flex-start;
  gap:26px;
  padding:14px 30px 14px 24px;
}
.ventaja__icon{ width:80px; height:84px; flex:none; display:flex; align-items:center; justify-content:center; }
.ventaja__icon img{ max-width:none; object-fit:contain; }   /* la cadena (116px) sobresale apenas, como en el Figma */
.ventaja > div{ padding-top:10px; }
.ventaja .card__text{ max-width:541px; letter-spacing:.01em; }

/* ═══════════════════════════════════════════════════════════════════
   9 · SOCIAL PROOF   (banda navy · marquee sin flechas ni dots)
   ═══════════════════════════════════════════════════════════════════ */
.s-social-proof{ background:var(--navy); padding:58px 0 82px; overflow:hidden; }
.s-social-proof .section-head{ margin-bottom:26px; }
.marquee--clientes .marquee__track{ --gap:71px; --speed:48s; gap:var(--gap); }
.marquee--clientes .logo-card{ width:262px; height:89px; }

/* ═══════════════════════════════════════════════════════════════════
   10 · DISPONIBILIDAD   (texto + imagen a sangre en 3 capas)
   ═══════════════════════════════════════════════════════════════════ */
.s-disponibilidad{
  position:relative;
  min-height:720px;
  padding:118px 0 120px;
  background:var(--white);
  overflow:hidden;
}
.dispo__media{
  position:absolute;
  top:0;
  left:calc(50% + 35px);
  width:959px;
  height:720px;
}
.dispo__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; }
.dispo__vec{ inset:0; width:100%; height:100%; }
.dispo__copy{ position:relative; z-index:1; max-width:520px; }
.dispo__text{ max-width:447px; }
.dispo__copy .h2{ margin-bottom:51px; }
.dispo__text{ display:flex; flex-direction:column; gap:18px; font-size:var(--fs-body); line-height:1.2; letter-spacing:.02em; }
.dispo__text b{ font-weight:700; }
.dispo__copy .btn{ margin-top:32px; }

/* ═══════════════════════════════════════════════════════════════════
   11 · RENTABILIDAD   (3 cards con ícono)
   ═══════════════════════════════════════════════════════════════════ */
.s-rentabilidad{ background:var(--surface); padding:102px 0 82px; }
.renta{ min-height:262px; padding:31px 29px 28px; }
.renta__icon{ height:99px; display:flex; align-items:flex-start; margin-bottom:16px; }
.renta__icon img{ object-fit:contain; }
.renta .card__text{ margin-top:12px; max-width:340px; }

/* ═══════════════════════════════════════════════════════════════════
   12 · REPARTIDORES   (banda navy · reclutamiento · CTA cyan)
   ═══════════════════════════════════════════════════════════════════ */
.s-repartidores{
  position:relative;
  min-height:211px;
  display:flex;
  align-items:center;
  background:var(--navy);
  padding:40px 0;
  overflow:hidden;
}
.repartidores__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.repartidores__title{
  font-size:var(--fs-h3);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--white);
}
.repartidores__title span{ display:block; margin-top:4px; font-size:20px; font-weight:700; line-height:1.7; }
.repartidores__cta{ min-width:280px; }

/* ═══════════════════════════════════════════════════════════════════
   13 · FAQ   (acordeón · 2 columnas · igual a Ecommerce)
   ═══════════════════════════════════════════════════════════════════ */
.s-faq{ background:var(--white); padding:83px 0 95px; }
.s-faq .section-head{ margin-bottom:34px; }
.faq__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; align-items:start; }
.faq__col{ display:flex; flex-direction:column; gap:15px; }
.faq__item{
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--r-lg);
  transition:border-color .25s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item[open]{ border-color:var(--violet); }
.faq__item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:65px;
  padding:14px 26px 14px 16px;
  cursor:pointer;
  list-style:none;
  font-size:var(--fs-faq);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--navy);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary i{
  position:relative;
  flex:none;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--yellow);
  transition:transform .25s var(--ease);
}
.faq__item summary i::before,
.faq__item summary i::after{
  content:'';
  position:absolute;
  inset:50% 9px auto;
  height:2px;
  background:var(--navy);
  transform:translateY(-1px);
}
.faq__item summary i::after{ transform:translateY(-1px) rotate(90deg); }
.faq__item[open] summary i{ transform:rotate(45deg); }
.faq__answer{
  padding:0 22px 20px 16px;
  font-size:var(--fs-small);
  line-height:1.55;
  letter-spacing:.03em;
  color:var(--text);
}
.faq__answer a{ color:var(--navy); font-weight:700; text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════════
   15 · EMPEZÁ HOY   (banda navy · vector · glows · form centrado)
   ═══════════════════════════════════════════════════════════════════ */
.s-empeza-hoy{
  position:relative;
  background:var(--navy);
  padding:88px 0 92px;
  overflow:hidden;
}
.glow--cyan{
  left:calc(50% + 348px);
  top:-177px;
  background:radial-gradient(closest-side, rgba(0,163,207,.10), rgba(0,163,207,0));
}
.glow--yellow{
  left:calc(50% - 890px);
  top:670px;
  background:radial-gradient(closest-side, rgba(253,198,22,.10), rgba(253,198,22,0));
}
.empeza__inner{ position:relative; z-index:1; }
.s-empeza-hoy .section-head{ margin-bottom:11px; }
.empeza__lead{ max-width:659px; line-height:1.4; margin-top:3px !important; min-height:64px; }

.form{
  max-width:886px;
  margin-inline:auto;
  background:var(--white);
  border-radius:var(--r);
  padding:38px 64px 29px;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:38px; }
.field{ margin-bottom:14px; }
.field label{
  display:block;
  margin-bottom:8px;
  font-size:var(--fs-eyebrow);
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--navy);
}
.field input,
.field select,
.field textarea{
  width:100%;
  height:50px;
  padding-inline:22px;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:var(--r);
  font-family:var(--font);
  font-size:var(--fs-small);
  letter-spacing:.03em;
  color:var(--navy);
  transition:border-color .2s ease;
}
.field textarea{ height:96px; padding-block:12px; resize:vertical; display:block; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--text); }
.field textarea::placeholder{ color:var(--navy-soft); }
.field select option{ background:var(--white); color:var(--navy); }
.field select:invalid{ color:var(--navy-soft); }
.field__phone{ display:flex; gap:10px; }
.field__phone .field__code{ width:auto; flex:none; padding-inline:12px; }
.field__phone .field__num{ flex:1 1 auto; min-width:0; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--cyan); }
.form .btn{ margin-top:18px; }

/* ═══════════════════════════════════════════════════════════════════
   16 · FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.s-footer{ background:var(--surface); padding:80px 0 40px; border-top:.8px solid #e5e7eb; }
.footer__inner{ max-width:1300px; }
.footer__grid{ display:grid; grid-template-columns:minmax(0,1fr) 200px 200px; gap:64px; align-items:start; }
.footer__logo{ display:flex; align-items:center; gap:10px; }
.footer__logo-svg{ height:34px; width:auto; display:block; }
.footer__brand{ max-width:410px; }
.footer__desc{ margin-top:24px; max-width:320px; font-size:var(--fs-nav); line-height:1.625; color:#6a7282; }
.footer__social{ display:flex; align-items:center; gap:16px; margin-top:24px; }
.footer__social a{ display:inline-flex; align-items:center; color:var(--nav); transition:color .2s ease; }
.footer__social a:hover{ color:var(--navy); }
.footer__social svg{ display:block; width:20px; height:20px; }
.footer__col-title{ font-size:16px; font-weight:600; color:var(--navy); margin-bottom:24px; }
.footer__col ul{ display:flex; flex-direction:column; gap:16px; }
.footer__col a{ font-size:var(--fs-nav); line-height:1.43; color:var(--nav); transition:color .2s ease; }
.footer__col a:hover{ color:var(--navy); }
.footer__bottom{ margin-top:56px; padding-top:17px; border-top:.8px solid #e5e7eb; }
.footer__bottom p{ font-size:var(--fs-nav); line-height:20px; color:#6a7282; }
.footer__bottom a{ color:var(--navy); text-decoration:underline; }
.footer__bottom a:hover{ color:var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════
   MOTION
   ═══════════════════════════════════════════════════════════════════ */

/* 1 · Slide-in-up (entrada por defecto) — IntersectionObserver al 15%,
   una sola vez, stagger de 80ms entre hermanos. La transición vive en
   .is-anim sólo mientras entra (el JS la quita al terminar), así no pisa el
   hover de las cards. Sin JS, nada queda oculto (.js lo agrega el script). */
.js [data-anim]:not(.is-in){ opacity:0; transform:translateY(24px); }
[data-anim].is-anim{
  transition:opacity .6s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms);
}

/* 2 · Vectores que se dibujan — trazo de punta a punta sobre pathLength="1".
   Arranca invisible (así la punta redonda no asoma antes de tiempo). */
.js .vec[data-draw] .vec__path{ stroke-dasharray:1 1; stroke-dashoffset:1; opacity:0; }
.js .vec[data-draw].is-drawn .vec__path{
  opacity:1;
  animation:vec-draw var(--draw, 2.2s) cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes vec-draw{ to{ stroke-dashoffset:0; } }
.hero__vec{ --draw:2.4s; }

/* 3 · Contadores: el ancho no "baila" mientras cuentan */
[data-count]{ font-variant-numeric:tabular-nums; }

/* 4 · Tecnología (desktop): sección fija + cards de a una (ref. Sohub).
   El JS fija el alto del recorrido (--tec-scroll) y el tope del sticky
   (--tec-top, negativo si el contenido es más alto que la pantalla). */
.s-tecnologia{ overflow:clip; padding:0; }
.tec__sticky{ padding:93px 0 121px; }
@media (min-width:1025px){
  .tec__scroll.is-pinned{ height:var(--tec-scroll, auto); }
  .tec__scroll.is-pinned .tec__sticky{
    position:sticky;
    top:var(--tec-top, 0px);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:56px 0 0;          /* el contenido ocupa ~88% de la pantalla */
  }
  .tec__scroll.is-pinned .section-head{ margin-bottom:40px; }
  /* Franja inferior (~12%): 3 puntos de progreso (uno por card) + flecha */
  .tec__scroll.is-pinned .tec__progress{
    flex:1;
    min-height:12vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
  }
  .tec__scroll.is-pinned [data-tec]{
    opacity:var(--a, 0);
    transform:translateY(calc((1 - var(--a, 0)) * 60px)) scale(calc(.96 + var(--a, 0) * .04));
    transition:none;
  }
}
/* Indicador (sólo visible con la sección fija) */
.tec__progress{ display:none; color:var(--cyan); }
.tec__dots{ display:flex; gap:10px; }
.tec__dots i{
  width:10px; height:10px;
  border-radius:50%;
  border:2px solid var(--cyan);
  background:rgb(0 163 207 / var(--a, 0));
}
.tec__arrow{
  width:16px; height:10px;
  opacity:var(--more, 1);
  transition:opacity .3s ease;
  animation:tec-bounce 1.4s ease-in-out infinite;
}
@keyframes tec-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ≤1024 (o sin pin): las cards entran como el resto */
.js .tec__scroll:not(.is-pinned) [data-tec]:not(.is-in){ opacity:0; transform:translateY(24px); }
.tec__scroll:not(.is-pinned) [data-tec].is-anim{
  transition:opacity .6s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .marquee__track{ animation:none !important; }
  .js [data-anim]:not(.is-in),
  .js .tec__scroll:not(.is-pinned) [data-tec]:not(.is-in){ opacity:1; transform:none; }
  .js .vec[data-draw] .vec__path{ opacity:1; stroke-dashoffset:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE   ·   breakpoints 1600 / 1280 / 1024 / 768 / 480
   Criterio: no se pierde ninguna imagen del mensaje; lo que en desktop
   convive lado a lado, en mobile se apila en el orden de lectura
   (título → contenido → imagen → CTA). Los <br> forzados se apagan en mobile.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ≤1600 · notebooks: la laptop de Tecnología se achica y se apoya en el
      borde derecho (su 15% derecho es sombra, puede sangrar) ── */
@media (max-width:1600px){
  .tec__laptop{
    left:auto;
    width:min(1003px, 62vw);
    height:auto;
    aspect-ratio:1003 / 592;
    right:calc((100% - 100vw) / 2 + 24px - .15 * min(1003px, 62vw));
  }
}

/* ── ≤1280 · títulos un escalón más chicos ── */
@media (max-width:1280px){
  :root{
    --fs-display:60px;
    --fs-h2:38px;
    --fs-stat:56px;
  }
  .stat__num--long{ font-size:40px; line-height:1.7; }
  .cumpl__title{ font-size:40px; }
  .hero__title{ max-width:600px; }               /* mantiene las 3 líneas del Figma */
  .ventajas__col{ margin-left:auto; }            /* pegado a la derecha, el personaje respira */
  .ventajas__character{ left:calc(50% - 700px); }
}

/* ── ≤1024 · tablet: menú hamburguesa, se apagan las composiciones laterales ── */
@media (max-width:1024px){
  :root{ --fs-display:52px; --fs-h2:34px; --fs-h3:30px; --fs-stat:46px; }

  /* Top bar: hamburguesa (igual que Ecommerce; el mega-menú no se muestra) */
  .topbar__burger{ display:flex; }
  .topbar__actions{ display:none; }
  .topbar__nav{
    position:absolute;
    inset:64px 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--white);
    border-top:1px solid var(--border);
    padding:8px 24px 20px;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, transform .2s var(--ease), visibility .2s;
    box-shadow:0 16px 32px -20px rgba(36,36,104,.35);
  }
  .topbar__nav.is-open{ transform:none; opacity:1; visibility:visible; }
  .topbar__nav a{ display:block; padding:14px 0; border-bottom:1px solid var(--border); font-size:16px; }
  .topbar__nav > a:last-child{ border-bottom:0; }
  .topbar__item{ display:block; }
  .topbar__item > a{ display:block; }
  .mega{ display:none; }
  /* Ingresar + Quiero repartir siempre presentes al final del menú mobile */
  .topbar__mobile-actions{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    padding-top:16px;
  }
  .topbar__nav .topbar__mobile-actions a{ border-bottom:0; }
  .topbar__nav .topbar__mobile-actions .topbar__link{ padding:10px 0; font-size:16px; color:var(--navy); font-weight:500; }
  .topbar__nav .topbar__mobile-actions .btn{ display:flex; padding:0 26px; font-size:var(--fs-body); color:var(--navy); font-weight:700; }

  /* Hero: el título baja de tamaño; la moza sigue a la derecha */
  .s-hero{ min-height:760px; padding:170px 0 100px; }
  .hero__title{ max-width:520px; }
  .hero__lead{ margin-top:32px; max-width:420px; font-size:18px; }

  /* Repartidores disponibles */
  .grid-2{ gap:28px; }
  .servicio{ min-height:0; }

  /* Pasos: 2 × 2 */
  .grid-4{ grid-template-columns:repeat(2,1fr); gap:20px; }

  /* Cumplimiento: repartidor más chico, pegado a la derecha */
  .cumpl__title{ font-size:34px; max-width:56%; }
  .cumpl__rider{ left:auto; right:-20px; top:-60px; width:400px; height:505px; }

  /* Tecnología: cards a todo el ancho y la laptop abajo, en el flujo */
  .tec__sticky{ padding-bottom:80px; }
  .tec__cards{ width:100%; }
  .tec__laptop{
    position:relative;
    top:auto; right:auto; left:auto;
    width:min(760px, 100%);
    margin:24px auto 0;
  }

  /* Números: 3 columnas más compactas */
  .numeros__grid{ gap:20px; }
  .stat{ min-height:170px; }
  .stat__num--long{ font-size:31px; line-height:1.8; }
  .stat__label{ font-size:20px; }

  /* Ventajas: lista a todo el ancho y el personaje cierra la sección, abajo */
  .s-ventajas{ display:flex; flex-direction:column; padding-bottom:0; }
  .s-ventajas .container{ order:1; }
  .ventajas__col{ margin-left:0; max-width:none; }
  .ventajas__character{
    order:2;
    position:relative;
    left:auto; bottom:auto;
    width:351px; height:360px;
    margin:48px auto 0;
  }

  /* Disponibilidad: texto arriba, imagen a todo el ancho abajo */
  .s-disponibilidad{ min-height:0; padding:80px 0 0; display:flex; flex-direction:column; }
  .s-disponibilidad .container{ order:1; }
  .dispo__copy{ max-width:620px; }
  .dispo__text{ max-width:none; }
  .dispo__media{
    order:2;
    position:relative;
    left:auto; top:auto;
    width:100%;
    height:auto;
    aspect-ratio:959 / 720;
    margin-top:56px;
  }

  /* Rentabilidad: 3 columnas, sin cortes forzados */
  .renta{ min-height:0; padding:26px 22px 24px; }
  .renta .card__text br{ display:none; }

  /* Repartidores: texto y CTA apilados */
  .repartidores__inner{ flex-direction:column; align-items:flex-start; gap:24px; }


  /* Footer */
  .footer__grid{ grid-template-columns:minmax(0,1fr) 160px 160px; gap:40px; }
}

/* ── ≤768 · mobile ── */
@media (max-width:768px){
  :root{ --fs-display:40px; --fs-h2:30px; --fs-h3:26px; --fs-stat:56px; }

  .h2 br, .cumpl__title br{ display:none; }
  .section-head{ margin-bottom:36px; }
  .btn--green{ min-width:0; }

  /* Hero: texto arriba sobre navy; la foto (achicada) queda abajo con la moza
     a la derecha. Un degradé navy funde el borde superior de la foto. */
  .s-hero{ min-height:0; padding:112px 0 430px; }
  .hero__stage{ left:0; width:1100px; transform:translateX(calc(62vw - 829px)); }
  .hero__fade{
    display:block;
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, var(--navy) 0%, rgba(36,36,104,.9) 30%, rgba(36,36,104,0) 60%);
  }
  .hero__title{ max-width:none; }
  .hero__lead{ margin-top:22px; font-size:17px; max-width:none; }
  .hero__cta{ flex-direction:column; align-items:stretch; gap:12px; margin-top:28px; }

  /* Integraciones / Social proof: cards más chicas en el carrusel */
  .s-integraciones{ padding:36px 0 40px; }
  .integraciones__title{ font-size:15px; margin-bottom:28px; }
  .marquee--integ .marquee__track,
  .marquee--clientes .marquee__track{ --gap:24px; }
  .marquee--integ .logo-card{ width:160px; height:56px; }
  .marquee--integ .logo-card img{ transform:scale(.8); }
  .marquee--clientes .logo-card{ width:190px; height:68px; }
  .marquee--clientes .logo-card img{ transform:scale(.8); }
  .s-social-proof{ padding:56px 0 60px; }

  /* Repartidores disponibles: una columna, CTA a lo ancho */
  .s-repartidores-disponibles{ padding:64px 0; }
  .s-repartidores-disponibles .section-head{ margin-bottom:36px; }
  .grid-2{ grid-template-columns:1fr; }
  .servicio{ padding:24px 22px 28px; }
  .servicio__anim{ height:110px; }
  .servicios__cta .btn{ width:100%; }

  /* Pasos */
  .s-pasos{ padding:56px 0 64px; }
  .s-pasos .section-head{ margin-bottom:36px; }
  .grid-4{ gap:14px; }
  .paso{ min-height:0; padding:28px 14px 18px; }
  .paso__img{ height:110px; }
  .paso__img .fx, .paso__pic{ transform:scale(.85); transform-origin:top center; }
  .paso__text{ font-size:14px; }
  .pasos__cta{ width:100%; }

  /* Cumplimiento: texto arriba y el repartidor debajo, apoyado en el borde */
  .s-cumplimiento{ display:block; min-height:0; padding:64px 0 380px; }
  .cumpl__title{ font-size:30px; max-width:none; }
  .cumpl__rider{ top:auto; bottom:0; right:auto; left:50%; margin-left:-150px; width:300px; height:379px; }
  .cumpl__glow{ left:50%; top:auto; bottom:-460px; margin-left:-463px; }

  /* Tecnología: card con ícono arriba del texto */
  .tec__sticky{ padding:64px 0 64px; }
  .s-tecnologia .section-head{ margin-bottom:36px; }
  .tec__cards{ gap:14px; }
  .tec-card{ gap:16px; padding:14px 16px; }
  .tec-card__icon, .tec-card__icon img{ width:64px; height:64px; }
  .tec-card__icon img.tec-card__mini{ width:48px; height:56px; }
  .tec-card > div{ padding-top:4px; }
  .tec__cta{ width:100%; }

  /* Números: apilados */
  .s-numeros{ padding:64px 0; }
  .numeros__grid{ grid-template-columns:1fr; gap:14px; }
  .stat{ min-height:150px; }
  .stat__num--long{ font-size:44px; line-height:1.3; }

  /* Ventajas */
  .s-ventajas{ padding-top:64px; }
  .ventajas__list{ gap:14px; }
  .ventaja{ gap:14px; padding:14px 16px; }
  .ventaja__icon{ width:64px; height:70px; }
  .ventaja__icon img{ transform:scale(.8); }
  .ventaja__icon img.ventaja__big{ transform:scale(.6); }
  .ventaja > div{ padding-top:4px; }
  .ventajas__character{ width:273px; height:280px; margin-top:36px; }

  /* Disponibilidad */
  .s-disponibilidad{ padding-top:64px; }
  .dispo__copy .h2{ margin-bottom:28px; }
  .dispo__copy .btn{ width:100%; }
  .dispo__media{ margin-top:40px; }

  /* Rentabilidad */
  .s-rentabilidad{ padding:64px 0; }
  .grid-3{ grid-template-columns:1fr; gap:14px; }
  .renta__icon{ height:80px; }
  .renta__icon img{ transform:scale(.8); transform-origin:left top; }

  /* Repartidores */
  .s-repartidores{ padding:48px 0; }
  .repartidores__title span{ font-size:16px; line-height:1.5; margin-top:8px; }
  .repartidores__cta{ min-width:0; width:100%; }

  /* FAQ */
  .s-faq{ padding:64px 0; }
  .faq__cols{ grid-template-columns:1fr; gap:15px; }
  .faq__item summary{ font-size:15px; padding:14px 16px; }


  /* Empezá hoy: form a lo ancho, WhatsApp debajo del email */
  .s-empeza-hoy{ padding:64px 0; }
  .form{ padding:26px 20px 22px; }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .empeza__lead{ min-height:0; }
  .s-empeza-hoy .section-head{ margin-bottom:28px; }

  /* Footer */
  .s-footer{ padding:56px 0 32px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__bottom{ margin-top:40px; }
}

/* ── ≤480 · mobile chico ── */
@media (max-width:480px){
  :root{ --fs-display:36px; --fs-h2:27px; --fs-stat:50px; }
  .container{ padding-inline:18px; }
  .s-hero{ padding-bottom:400px; }
  .hero__stage{ width:1020px; transform:translateX(calc(64vw - 769px)); }
  .grid-4{ grid-template-columns:1fr; }
  .paso{ display:grid; grid-template-columns:116px 1fr; align-items:center; gap:12px; padding:18px 16px; }
  .paso__img{ height:100px; align-items:center; }
  .paso__text{ margin-top:0; }
  .paso__num{ top:10px; left:10px; width:34px; height:34px; font-size:20px; }
  .paso__img .fx, .paso__pic{ transform:scale(.72); transform-origin:center; }
  .cumpl__title{ font-size:27px; }
  .stat__num--long{ font-size:38px; }
  .ventaja{ flex-direction:row; }
}