/* ═══════════════════════════════════════════════════════════════════
   RAPIBOY · Ecommerce México — 2026
   Adaptado de Ecommerce Chile (mismos tokens, heredados de Rapilog).
   Estructura: 14 secciones, cada una con su bloque comentado.
   Estado: Fase 2 · build desktop completo. Pendiente: swap de assets
           (CDN Figma → /assets/ locales) y pasada responsive fina.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 0 · TOKENS ─────────────────────────── */
:root {
    /* Color — idénticos a Rapilog (el Figma de Ecommerce usa el mismo sistema) */
    --navy: #242468;
    --navy-diag: #2f2f6f;
    --navy-soft: #494970;
    --violet: #8787b6;
    --text: #6b6b8a;
    --nav: #4a5565;
    --border: #dddde8;
    --surface: #f5f6fa;
    --white: #ffffff;
    --yellow: #fdc616;
    --cyan: #00a3cf;
    --logo-slot: #d9d9d9;
    /* Tipografía */
    --font: 'Rubik', system-ui, -apple-system, sans-serif;
    --fs-display: 60px; /* Figma marca 70; el sistema usa 60 para entrar en 3 líneas */
    --fs-h2: 45px;
    --fs-h3: 35px;
    --fs-stat: 68px;
    --fs-dropoff: 26px;
    --fs-card-title: 20px;
    --fs-faq: 16px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-nav: 14px;
    --fs-eyebrow: 11px;
    /* Radios */
    --r-sm: 8px;
    --r: 10px;
    --r-lg: 15px;
    --r-pill: 999px;
    /* Layout */
    --container: 1250px;
    --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 {
    margin: 0;
}

ul {
    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);
}

/* ─────────────────── 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);
}

.h3 {
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--navy);
}

.h3--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);
}

.lead--violet {
    color: var(--violet);
}

.lead b {
    font-weight: 700;
}

.lead a {
    text-decoration: underline;
}

/* Eyebrow — la firma tipográfica del sistema */
.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;
    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);
}

.eyebrow--white {
    color: var(--white);
}

.section-head {
    margin-bottom: 48px;
}

    .section-head .lead {
        margin-top: 18px;
        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;
}

    .btn:hover {
        transform: translateY(-2px);
    }

    .btn:focus-visible {
        outline: 3px solid var(--cyan);
        outline-offset: 3px;
    }

.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 {
    background: transparent;
    color: var(--navy);
    border-color: var(--navy);
}

    .btn--outline:hover {
        background: var(--navy);
        color: var(--white);
    }

.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);
}
    /* El Figma no tiene sombras en reposo. La única sombra vive en hover:
   es feedback de movimiento, con tinte navy para no verse gris sucia. */
    .card:hover,
    .faq__item:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -24px rgba(36,36,104,.55);
    }

.card--navy:hover,
.card--navy-diag:hover {
    box-shadow: 0 20px 44px -24px rgba(0,0,0,.55);
}

.faq__item {
    transition: border-color .25s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}

.card--white {
    background: var(--white);
}

.card--navy {
    background: var(--navy);
    border-color: var(--violet);
}

.card--navy-diag {
    background: var(--navy-diag);
    border-color: var(--violet);
}

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

.card__title--light {
    color: var(--white);
}

.card__text {
    font-size: var(--fs-small);
    line-height: 1.45;
    letter-spacing: .03em;
    color: var(--text);
}

.card__text--violet {
    color: var(--violet);
}

.card__text b {
    font-weight: 700;
}

/* Grillas */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 42px;
}

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

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
}

/* Pills (badges) */
.pill {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding-inline: 12px;
    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 */

/* Listas con flecha */
.arrow-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .arrow-list li {
        display: flex;
        gap: 7px;
        font-size: var(--fs-small);
        letter-spacing: .03em;
        color: var(--navy);
        line-height: 1.35;
    }

    .arrow-list span {
        color: var(--cyan);
        font-weight: 700;
        flex: none;
    }

.arrow-list--light li {
    color: var(--white);
    font-size: var(--fs-body);
}

.arrow-list--light {
    gap: 16px;
}

    .arrow-list--light span {
        color: var(--yellow);
    }

/* ─────────────── DECORACIONES · vectores que se dibujan + glows ───────────────
   Los .diag[data-draw] son SVG inline: se trazan de punta a punta al entrar
   (stroke-dashoffset sobre pathLength="1"). Van de fondo (absolute, z-index 0);
   el contenido de la sección va por encima con position:relative + z-index 1.  */
.diag {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 0;
}

.diag--empeza {
    left: calc(50% - 960px);
    top: 50px;
    width: 1920px;
    height: 1066px;
    overflow: visible;
    background: none;
}

.diag__path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.diag.is-drawn .diag__path {
    animation: draw-diag var(--draw, 2.4s) cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes draw-diag {
    to {
        stroke-dashoffset: 0;
    }
}

.glow {
    position: absolute;
    width: 716px;
    height: 716px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.glow--cyan {
    right: -16px;
    top: 58px;
    background: radial-gradient(circle, rgba(0,163,207,.55) 0%, rgba(0,163,207,0) 70%);
}

.glow--yellow {
    left: -180px;
    bottom: -360px;
    background: radial-gradient(circle, rgba(253,198,22,.30) 0%, rgba(253,198,22,0) 70%);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 1 · TOP BAR   (reusado de Rapiboy Restaurantes, adaptado a Chile)
   Logo Rapiboy · nav Restaurantes/E-Commerce(activo)/Servicio dedicado ·
   selector de país (Chile por defecto) · Ingresar · Quiero repartir.
   Mecánica de scroll y menú mobile heredada de Rapilog.
   NOTA: el logo va temporal como <img>; se pasa a SVG inline al arreglarlo.
   ═══════════════════════════════════════════════════════════════════ */
.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: 30.7px;
    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;
        }

/* Item con mega-menú */
.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;
}
    /* puente invisible para que el hover no se corte al bajar el mouse */
    .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: grid;
    place-items: center;
    border-radius: var(--r);
    background: var(--surface);
    color: var(--navy);
    transition: color .2s ease, background-color .2s ease;
}

.mega__link:hover .mega__icon {
    background: var(--white);
    color: var(--cyan);
}

.mega__icon svg {
    width: 22px;
    height: 22px;
}

.mega__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: transform .18s ease;
}

.mega__link:hover .mega__icon img {
    transform: scale(1.12);
}

.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;
    }

/* Selector de país (visual) */
.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);
    }

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 2 · HERO   (efecto heredado de Rapilog: flotación + parallax)
   ═══════════════════════════════════════════════════════════════════ */
.s-hero {
    padding: 161px 0 96px;
    background: var(--white);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0,560px) minmax(0,738px);
    gap: 60px;
    align-items: center;
}

.hero__title {
    font-size: var(--fs-display);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--navy);
}

    .hero__title .accent {
        color: var(--yellow);
    }

.hero__lead {
    margin-top: 20px;
    max-width: 517px;
    font-size: var(--fs-body);
    line-height: 1.5;
    letter-spacing: .02em;
}

.hero__cta {
    display: flex;
    gap: 21px;
    margin-top: 32px;
}

/* El tablero "respira" (flotación en loop) y sigue al mouse con un
   parallax 3D leve (--px / --py los alimenta el JS). Dos capas para que
   flotación y parallax no se pisen el transform. */
/* Estructura a prueba de flicker (Firefox): un solo responsable de transform
   por elemento.
   .hero__media → solo la entrada (data-anim).
   .hero__glow  → estático (no flota), sin filter:blur().
   .hero__float → solo la flotación (capa propia de GPU).
   .hero__tilt  → solo la perspectiva.
   .hero__media img → solo el parallax 3D (--px/--py) + backface-visibility. */
.hero__media {
    position: relative;
}
/* Degradé radial de profundidad, detrás del tablero. SIN filter:blur(): dentro
   de algo animado se re-rasteriza por frame y titila en Firefox. Los radiales
   caen a transparente dentro de una caja amplia (inset:-25%), así no hace falta. */
.hero__glow {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(58% 58% at 62% 42%, rgba(0,163,207,.27), rgba(0,163,207,0) 70%), radial-gradient(50% 50% at 28% 82%, rgba(253,198,22,.20), rgba(253,198,22,0) 72%);
}
/* Solo flotación · capa propia de GPU */
.hero__float {
    position: relative;
    z-index: 1;
    animation: hero-float 6s ease-in-out infinite;
    will-change: transform;
}
/* Solo perspectiva, separada de la flotación */
.hero__tilt {
    perspective: 1200px;
}
/* Solo el parallax 3D alimentado por --px/--py */
.hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r);
    transform: rotateY(calc(var(--px, 0) * 5deg)) rotateX(calc(var(--py, 0) * -4deg)) translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 10px), 0);
    transition: transform .5s var(--ease);
    backface-visibility: hidden;
}
/* Firefox: desactivar SOLO el parallax (la flotación sigue). El parallax 3D
   dentro de la capa flotante titila errático solo en Firefox. */
@supports (-moz-appearance: none) {
    .hero__media img {
        transform: none;
        transition: none;
    }
}

@keyframes hero-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 3 · TESTIMONIOS   (reemplaza al carrusel de Chile)
   3 cards blancas en fila sobre banda surface: cita + logo/nombre/cargo.
   El logo del cliente es un chip con las iniciales como fallback hasta que
   Team MKT cargue la imagen dentro de .testi__logo.
   ═══════════════════════════════════════════════════════════════════ */
.s-testimonios {
    background: var(--surface);
    padding: 80px 0 90px;
}

.testimonios__grid {
    align-items: stretch;
}

.testi {
    display: flex;
    flex-direction: column;
    padding: 34px 32px 30px;
}

.testi__quote {
    width: 40px;
    height: 32px;
    fill: var(--yellow);
    margin-bottom: 22px;
    flex: none;
}

.testi__text {
    font-size: var(--fs-body);
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--navy-soft);
    margin: 0 0 26px;
}

.testi__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}
/* Placa blanca uniforme: normaliza logos de fondos distintos
   (transparente / blanco / banner de color) en un mismo marco. */
.testi__logo {
    align-self: flex-start;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    background: var(--white);
    border: 1px solid var(--border);
}

    .testi__logo img {
        max-height: 34px;
        width: auto;
        object-fit: contain;
    }

.testi__person {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.testi__name {
    font-size: var(--fs-body);
    font-weight: 800;
    color: var(--navy);
}

.testi__role {
    font-size: var(--fs-small);
    line-height: 1.35;
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 4 · COBERTURA   (banda navy · copy + card + mapa)
   Col izq: eyebrow + h2 + lead + card navy-diag con arrow-list.
   Col der: nota + mapa (SVG inline recoloreado a la paleta, cobertura en
   cyan sobre navy).
   ═══════════════════════════════════════════════════════════════════ */
.s-cobertura {
    background: var(--navy);
    padding: 104px 0 100px;
}

.cobertura__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.cobertura__copy .h2 {
    max-width: 520px;
}

.cobertura__copy .lead {
    margin-top: 18px;
    max-width: 520px;
}

.cobertura__card {
    margin-top: 34px;
    padding: 32px 30px;
}

    .cobertura__card .card__title {
        margin-bottom: 18px;
    }

.cobertura__media {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cobertura__note {
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--violet);
    max-width: 520px;
}
/* Mapa de cobertura · SVG inline recoloreado a la paleta.
   La cobertura va en cyan y los municipios separados en navy, sobre la banda. */
.cobertura__map {
    position: relative;
    height: 500px;
    border-radius: var(--r-lg);
    border: 1px solid var(--navy-soft);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.cobertura__mapsvg {
    height: 100%;
    width: auto;
    max-width: 100%;
    display: block;
}
    /* Regiones: navy-diag con borde blanco; hover → amarillo. */
    .cobertura__mapsvg .cls-1 {
        fill: var(--navy-diag);
        stroke: var(--white);
        stroke-width: 3px;
        stroke-linejoin: round;
        transition: fill .18s ease;
        cursor: pointer;
    }

        .cobertura__mapsvg .cls-1:hover {
            fill: var(--yellow);
        }
/* Tooltip con el nombre de la región (sigue al cursor). */
.cobertura__tip {
    position: absolute;
    z-index: 5;
    left: 0;
    top: 0;
    transform: translate(-50%, calc(-100% - 14px));
    background: var(--white);
    color: var(--navy);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    padding: 6px 11px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.28);
    opacity: 0;
    transition: opacity .12s ease;
}

    .cobertura__tip.is-on {
        opacity: 1;
    }

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 5 · POR QUÉ RAPIBOY   (grilla de features 3+2, alineada a izq.)
   ═══════════════════════════════════════════════════════════════════ */
.s-por-que {
    background: var(--white);
    padding: 96px 0 96px;
}

    .s-por-que .section-head {
        margin-bottom: 56px;
        max-width: 720px;
    }

.feature {
    padding: 28px 30px;
    min-height: 192px;
}

    .feature:hover {
        border-color: var(--violet);
    }

.feature__icon {
    width: 54px;
    height: 54px;
    background: var(--white);
    border-radius: var(--r);
    display: grid;
    place-items: center;
    margin-bottom: 26px;
}
    /* Mismo gesto que en Rapilog: la imagen levanta y crece con la card. */
    .feature__icon img {
        max-width: 44px;
        max-height: 44px;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform .5s var(--ease);
    }

.feature:hover .feature__icon img {
    transform: translateY(-4px) scale(1.12);
}

.feature .card__title {
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 6 · ENVÍO FLEX · "LLEGA HOY"   (banda amarilla)
   Reusa toda la maquinaria de "reputación" (banda amarilla, deco, grid,
   card + insignia). Suma copy de certificación + stat +37%.
   Eyebrow y flechas en blanco; texto y títulos en navy.
   ═══════════════════════════════════════════════════════════════════ */
.s-reputacion {
    position: relative;
    background: var(--yellow);
    padding: 120px 0;
    overflow: hidden;
}
/* Vector amarillo más claro, superpuesto y a sangre completa, detrás del contenido */
/* Vector decorativo (amarillo más claro, zig-zag angular como el Figma).
   SVG inline con stroke, igual que Empieza hoy. Sin animación por ahora:
   estático y visible, para confirmar que se ve. */
.reputacion__deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.reputacion__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0,490px) minmax(0,722px);
    gap: 88px;
    align-items: center;
}

.reputacion .eyebrow {
    color: var(--white);
}

.reputacion .h2 {
    color: var(--navy);
    max-width: 520px;
}

.reputacion__sub {
    margin-top: 26px;
    font-size: var(--fs-card-title);
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--navy);
}

.reputacion__list {
    margin-top: 20px;
    gap: 14px;
}

    .reputacion__list li {
        color: var(--navy);
        font-size: var(--fs-body);
    }

    .reputacion__list span {
        color: var(--white);
    }
/* las flechas en blanco */

/* Contenedor SIN recorte: la insignia puede sobresalir. El recorte del
   radio vive solo en __card (la captura), no en el wrapper. */
.reputacion__media {
    position: relative;
}

.reputacion__card {
    background: var(--white);
    border-radius: 15px; /* fiel al Figma (menos redondez) */
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(36,36,104,.4);
}

.reputacion__resena {
    width: 100%;
    height: auto;
    display: block;
}
/* Insignia dorada por encima de la captura, montada en la esquina, sin cortarse */
.reputacion__badge {
    position: absolute;
    top: -42px;
    right: -26px;
    width: 160px;
    height: auto;
    transform: rotate(8deg);
    pointer-events: none;
    filter: drop-shadow(0 12px 20px rgba(36,36,104,.28));
    z-index: 2;
}

/* ── Envío Flex: copy de certificación + stat destacado ── */
.envioflex__lead {
    margin-top: 20px;
    font-size: var(--fs-body);
    line-height: 1.55;
    letter-spacing: .01em;
    color: var(--navy);
    max-width: 470px;
}

.envioflex__stat {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.envioflex__stat-num {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--navy);
}

.envioflex__stat-note {
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--navy-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 7 · CÓMO FUNCIONA   (2 cards: retiro diario vs drop off)
   Retiro = card navy-diag (lista clara, flechas amarillas).
   Drop off = card surface (lista navy, flechas cyan).
   ═══════════════════════════════════════════════════════════════════ */
.s-como-funciona {
    background: var(--white);
    padding: 90px 0 110px;
}

    .s-como-funciona .section-head {
        margin-bottom: 44px;
    }

.func {
    padding: 32px 34px 34px;
    min-height: 336px;
    display: flex;
    flex-direction: column;
}

    .func .pill {
        align-self: flex-start;
        margin-bottom: 22px;
    }

    .func .card__title {
        margin-bottom: 10px;
    }

.func__desc {
    font-size: var(--fs-small);
    line-height: 1.45;
    letter-spacing: .03em;
    color: var(--violet);
    margin-bottom: 22px;
}

.func__desc--dark {
    color: var(--text);
}

.func .arrow-list {
    gap: 12px;
}

/* ── Rutas de cada modalidad (arriba de la card), estilo servicios Rapilog ──
   Retiro: un punto (chofer) va de A a B entregando.
   Drop off: la tienda (cyan) va a un punto cercano, y desde ahí el chofer
   (amarillo) toma los paquetes y reparte hasta el destino final.        */
.flujo {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    overflow: visible;
}

.flujo__base {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 2 6;
}

.flujo__trail {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.flujo__dest,
.flujo__drop {
    fill: var(--white);
    stroke-width: 2;
}

.flujo__halo {
    opacity: .2;
}

.flujo__dot--2,
.flujo__halo--2 {
    opacity: 0;
    transition: opacity .2s ease;
}
/* el chofer aparece en su fase */
.flujo.is-relay .flujo__dot--2,
.flujo.is-relay .flujo__halo--2 {
    opacity: 1;
}

/* Retiro (card navy-diag → colores claros) */
.flujo--retiro .flujo__base {
    stroke: rgba(255,255,255,.28);
}

.flujo--retiro .flujo__trail {
    stroke: var(--yellow);
}

.flujo--retiro .flujo__dot,
.flujo--retiro .flujo__halo {
    fill: var(--yellow);
}

.flujo--retiro .flujo__origin {
    fill: var(--white);
}

.flujo--retiro .flujo__dest {
    fill: var(--navy-diag);
    stroke: var(--yellow);
}

/* Drop off (card surface → colores normales) */
.flujo--dropoff .flujo__base {
    stroke: var(--border);
}

.flujo--dropoff .flujo__trail--1 {
    stroke: var(--cyan);
}

.flujo--dropoff .flujo__trail--2 {
    stroke: var(--yellow);
}

.flujo--dropoff .flujo__dot--1,
.flujo--dropoff .flujo__halo--1 {
    fill: var(--cyan);
}

.flujo--dropoff .flujo__dot--2,
.flujo--dropoff .flujo__halo--2 {
    fill: var(--yellow);
}

.flujo--dropoff .flujo__origin {
    fill: var(--navy);
}

.flujo--dropoff .flujo__drop {
    stroke: var(--cyan);
}

.flujo--dropoff .flujo__dest {
    stroke: var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 8 · RAPIBOY EN NÚMEROS   (4 stats · contadores)
   ═══════════════════════════════════════════════════════════════════ */
.s-numeros {
    background: var(--surface);
    padding: 86px 0 102px;
}

    .s-numeros .section-head {
        margin-bottom: 44px;
    }

.stat {
    padding: 34px 24px;
    min-height: 181px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat__num {
    font-size: var(--fs-stat);
    font-weight: 900;
    line-height: 1.1;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    margin-bottom: 10px;
}

    .stat__num .stat__plus {
        color: var(--yellow);
    }

.stat__label {
    font-size: var(--fs-card-title);
    font-weight: 400;
    color: var(--navy);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 9 · INTEGRACIONES · convergencia scroll-driven
   Idéntica dinámica que Rapilog: los logos arrancan dispersos y grandes,
   y con el scroll convergen a su recuadro. Se anima el alpha del fondo
   (--box), NO la opacidad de la card (apagaría el logo, que es su hijo).
   ═══════════════════════════════════════════════════════════════════ */
.s-integraciones {
    position: relative;
    background: var(--white);
}

.integraciones__scroll {
    height: 230vh;
}

.integraciones__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 640px;
    display: grid;
    align-items: center;
    overflow: hidden;
}

.integraciones__stage {
    position: relative;
}

    .integraciones__stage .section-head {
        position: relative;
        z-index: 2;
        margin-bottom: 64px;
    }

.integraciones__lead {
    opacity: var(--lead, 1);
    transition: opacity .4s ease;
}

.integraciones__grid {
    position: relative;
    z-index: 1;
}

.integracion {
    position: relative;
    height: 90px;
    display: grid;
    place-items: center;
    padding: 12px;
    background-color: rgb(245 246 250 / var(--box, 1));
    border-color: rgb(221 221 232 / var(--box, 1));
    transition: background-color .35s ease, border-color .25s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
    /* Sin hover a propósito: delataba la posición de aterrizaje. */
    .integracion:hover {
        transform: none;
        box-shadow: none;
        border-color: rgb(221 221 232 / var(--box, 1));
    }

.integracion__logo {
    display: grid;
    place-items: center;
    transform-origin: center;
    will-change: transform;
}

    .integracion__logo img {
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

.integracion__logo--text {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--cyan);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 10 · ¿APLICA PARA TU TIENDA?   (3 cards · revelado escalonado)
   Estilo alineado a "¿Calificás?" de Rapilog: banda surface e íconos
   grandes (128px) que flotan con el scroll y levantan en hover.
   Cierra con una línea CTA ("¿No estás seguro? Hablemos...").
   ═══════════════════════════════════════════════════════════════════ */
.s-aplica {
    background: var(--surface);
    padding: 110px 0;
}

    .s-aplica .section-head {
        margin-bottom: 56px;
    }

.aplica__cta {
    margin-top: 44px;
    text-align: center;
    font-size: var(--fs-body);
    color: var(--text);
}

    .aplica__cta a {
        color: var(--navy);
        font-weight: 800;
        border-bottom: 2px solid var(--yellow);
        padding-bottom: 2px;
        transition: color .2s ease, border-color .2s ease;
    }

        .aplica__cta a:hover {
            color: var(--cyan);
            border-color: var(--cyan);
        }

.encaja {
    padding: 40px 36px 36px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
}

    .encaja:hover {
        border-color: var(--violet);
    }

.encaja__icon {
    width: 128px;
    height: 128px;
    margin-bottom: 36px;
    display: grid;
    place-items: center;
}

    .encaja__icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform: translateY(var(--float, 0px));
        transition: transform .5s var(--ease);
        will-change: transform;
    }

.encaja:hover .encaja__icon img {
    transform: translateY(calc(var(--float, 0px) - 8px)) scale(1.05);
}

.encaja .card__title {
    margin-bottom: 14px;
}

.encaja .card__text {
    font-size: var(--fs-body);
    letter-spacing: .02em;
}

/* Revelado escalonado por scroll (cards suben con scale) */
.card[data-reveal],
[data-reveal] {
    opacity: 0;
    transform: translateY(64px) scale(.94);
    transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .25s ease;
    transition-delay: var(--d, 0ms);
    will-change: transform, opacity;
}

    .card[data-reveal].is-in,
    [data-reveal].is-in {
        opacity: 1;
        transform: none;
    }

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 11 · REPARTIDORES   (banda navy · CTA cyan)
   ═══════════════════════════════════════════════════════════════════ */
.s-repartidores {
    position: relative;
    background: var(--navy);
    padding: 72px 0 89px;
    overflow: hidden;
}

.repartidores__deco {
    position: absolute;
    inset: 0;
    background: url("https://www.figma.com/api/mcp/asset/e0d1e951-6c68-466f-b6ca-92da2623433a.svg") center center / cover no-repeat;
    pointer-events: none;
    z-index: 0;
}

.repartidores__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 12 · FAQ   (acordeón · 2 columnas)
   El círculo del "+" va con borde (no relleno amarillo); al abrir rota
   45° y el borde vira a cyan, fiel al Figma de Ecommerce.
   ═══════════════════════════════════════════════════════════════════ */
.s-faq {
    background: var(--white);
    padding: 101px 0 130px;
}

    .s-faq .section-head {
        margin-bottom: 47px;
    }

.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;
}

    .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 22px;
        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% 8px 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;
    font-size: var(--fs-small);
    line-height: 1.55;
    letter-spacing: .03em;
    color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 13 · EMPIEZA HOY   (form · vectores que se dibujan · glows)
   Labels del form en estilo eyebrow (uppercase), fiel al Figma.
   ═══════════════════════════════════════════════════════════════════ */
.s-empeza-hoy {
    position: relative;
    background: var(--navy);
    padding: 99px 0 96px;
    overflow: hidden;
}

    .s-empeza-hoy .container {
        position: relative;
        z-index: 1;
    }

.empeza__grid {
    display: grid;
    grid-template-columns: minmax(0,640px) 544px;
    gap: 81px;
    align-items: start;
}

.empeza__copy .h2 {
    max-width: 530px;
}

.empeza__copy .lead {
    margin-block: 24px 40px;
    max-width: 447px;
}

.form {
    background: var(--white);
    border-radius: var(--r);
    padding: 40px;
}

.form__title {
    font-size: var(--fs-card-title);
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--navy);
}

.form__sub {
    margin-top: 8px;
    font-size: var(--fs-small);
    letter-spacing: .03em;
    color: var(--text);
    margin-bottom: 26px;
}

.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 {
        width: 100%;
        height: 50px;
        padding-inline: 15px;
        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 input::placeholder {
            color: var(--text);
        }

        .field select:invalid {
            color: var(--navy-soft);
        }

        .field input:focus,
        .field select:focus {
            outline: none;
            border-color: var(--cyan);
        }

        .field input[aria-invalid="true"],
        .field select[aria-invalid="true"] {
            border-color: #e0464b;
        }
        /* Fondo del desplegable (en Firefox las opciones se ven transparentes sin esto) */
        .field select option {
            background: var(--white);
            color: var(--navy);
        }
/* WhatsApp: renglón de código de país + número */
.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;
    }

.form .btn {
    margin-top: 12px;
}

.form__status {
    margin-top: 14px;
    font-size: var(--fs-small);
    text-align: center;
    min-height: 18px;
}

    .form__status.is-ok {
        color: var(--cyan);
        font-weight: 700;
    }

    .form__status.is-error {
        color: #e0464b;
    }

/* ═══════════════════════════════════════════════════════════════════
   SECCIÓN 14 · FOOTER   (logo Rapiboy + 2 columnas de links + redes)
   LOGO TEMPORAL igual que el top bar (isotipo + wordmark del Figma).
   ═══════════════════════════════════════════════════════════════════ */
.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;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    .footer__bottom p {
        font-size: var(--fs-nav);
        line-height: 20px;
        color: #6a7282;
    }

.footer__legal a {
    font-size: var(--fs-nav);
    line-height: 20px;
    color: #6a7282;
    transition: color .2s ease;
}

    .footer__legal a:hover {
        color: var(--navy);
        text-decoration: underline;
    }

/* Responsive del footer */
@media (max-width:768px) {
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOTION · fade-in-up
   ═══════════════════════════════════════════════════════════════════ */
[data-anim] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--d, 0ms);
}

    [data-anim].is-in {
        opacity: 1;
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    [data-anim] {
        opacity: 1;
        transform: none;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .diag__path {
        stroke-dashoffset: 0;
    }

    .hero__float {
        animation: none !important;
    }

    .hero__media img {
        transform: none !important;
    }

    .marquee__track {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE   (base · el detalle por sección se agrega al construirlas)
   ═══════════════════════════════════════════════════════════════════ */

/* ── ≤1280 · el hero deja de ser rígido, se achican títulos ── */
@media (max-width:1280px) {
    :root {
        --fs-display: 56px;
        --fs-h2: 38px;
        --fs-stat: 58px;
    }

    .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ── ≤1024 · tablet ── */
@media (max-width:1024px) {
    :root {
        --fs-h3: 30px;
    }

    .s-hero {
        padding: 120px 0 72px;
    }

    .hero__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero__lead {
        max-width: none;
    }

    .hero__media {
        max-width: 640px;
    }

    .grid-3 {
        grid-template-columns: repeat(2,1fr);
    }

    .grid-2 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .grid-4 {
        grid-template-columns: repeat(3,1fr);
    }

    /* Menú hamburguesa */
    .topbar__burger {
        display: flex;
    }

    .topbar__actions {
        display: none;
    }

    .topbar__nav {
        position: absolute;
        inset: 64px 0 auto 0;
        flex-direction: column;
        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 {
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
            font-size: 16px;
        }

            .topbar__nav a:last-child {
                border-bottom: 0;
            }

    /* Mobile/tablet: el submenú NO se muestra; quedan solo las opciones
     principales (Restaurantes, E-Commerce, Servicio dedicado). */
    .topbar__item {
        display: block;
    }

        .topbar__item > a {
            display: block;
        }

    .mega {
        display: none;
    }

    /* Reputación y Empieza hoy: a una columna */
    .reputacion__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .reputacion__badge {
        width: 120px;
        top: -30px;
        right: -14px;
    }

    .empeza__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .form {
        max-width: 544px;
    }

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

    /* Integraciones: sin sticky ni dispersión. Grilla estática y listo. */
    .integraciones__scroll {
        height: auto;
    }

    .integraciones__sticky {
        position: static;
        height: auto;
        min-height: 0;
        padding: 96px 0 104px;
        overflow: visible;
    }

    .integracion__logo {
        transform: none !important;
    }

    .integraciones__grid {
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }

    /* Números: 4 stats en 2×2 (más prolijo que 3+1) */
    .numeros__grid {
        grid-template-columns: repeat(2,1fr);
    }

    /* Cobertura: copy y mapa apilados */
    .cobertura__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cobertura__map {
        height: 420px;
    }

    .cobertura__copy .h2,
    .cobertura__copy .lead,
    .cobertura__note {
        max-width: none;
    }
}

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

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-4 {
        grid-template-columns: repeat(2,1fr);
    }

    .hero__cta {
        flex-direction: column;
        align-items: stretch;
    }

        .hero__cta .btn {
            width: 100%;
        }

    .social-proof__title {
        font-size: 16px;
    }

    .faq__cols {
        grid-template-columns: 1fr;
    }

    /* Paddings de banda más compactos en mobile */
    .s-cobertura {
        padding: 72px 0 64px;
    }

    .s-testimonios {
        padding: 64px 0 72px;
    }

    .s-por-que,
    .s-aplica {
        padding: 72px 0;
    }

    .s-reputacion {
        padding: 80px 0;
    }

    .s-como-funciona {
        padding: 64px 0 80px;
    }

    .s-numeros {
        padding: 64px 0 72px;
    }

    .s-faq {
        padding: 72px 0 90px;
    }

    .s-empeza-hoy {
        padding: 72px 0;
    }

    .s-footer {
        padding: 64px 0 40px;
    }

    .section-head {
        margin-bottom: 36px;
    }

    /* Reputación: la insignia más chica y hacia adentro */
    .reputacion__badge {
        width: 104px;
        top: -26px;
        right: -8px;
    }

    /* Empieza hoy: form full width */
    .empeza__copy .h2 {
        max-width: none;
    }

    .form {
        max-width: none;
        padding: 32px 24px;
    }

    /* Cómo funciona: cards un poco más bajas */
    .func {
        min-height: 0;
    }
}

/* ── ≤480 · mobile chico ── */
@media (max-width:480px) {
    :root {
        --fs-display: 34px;
    }

    .container {
        padding-inline: 18px;
    }

    .grid-4 {
        grid-template-columns: 1fr;
    }

    .integraciones__grid {
        grid-template-columns: repeat(2,1fr);
    }
    /* logos chicos → 2 col, no 1 */
    .numeros__grid {
        grid-template-columns: 1fr;
    }

    .brand {
        width: 210px;
    }

    .hero__title {
        line-height: 1.15;
    }

    .reputacion__badge {
        width: 92px;
        top: -22px;
        right: -4px;
    }

    .btn {
        padding-inline: 20px;
    }
}