/* ============================================================
   YAMAHA CARTAGENA MOTO MAR SAS
   Design System — one-page
   Base estética compartida con Bogotá (contraste claro/oscuro, rojo
   Yamaha, píldoras, tarjetas con sombra suave, Inter única) con la
   variante CARIBE propia de esta sede:

     · superficies claras en tono arena en vez de gris frío,
     · oscuros en azul marino profundo en vez de negro,
     · un acento turquesa que marca la "capa local" (antetítulos,
       barra de confianza, sección de clima costero, ola del hero),
     · el rojo Yamaha se reserva para la "capa de marca"
       (botones, filtros, precios, iconos de producto).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    /* Marca */
    --red: #e00611;
    --red-dark: #b0040d;
    --red-ink: #8f030a;
    --red-tint: #fdecec;
    --red-glow: rgba(224, 6, 17, .45);

    /* Acento local (Caribe) — nunca compite con el rojo de marca */
    --teal: #0e9aad;
    --teal-dark: #0a7686;
    --teal-tint: #e2f4f7;
    --teal-glow: rgba(14, 154, 173, .34);

    /* Texto */
    --navy: #0d2431;
    --ink: #2f3238;
    --muted: #6d6f74;
    --muted-dark: #93b0bb;

    /* Superficies — arena y mar */
    --white: #ffffff;
    --alt: #f7f3ec;
    --alt-2: #ece5d9;
    --black: #071c26;
    --black-soft: #0b2733;
    --black-card: #0e2f3d;

    /* Bordes */
    --border: #e6e0d4;
    --border-strong: #d5ccbb;
    --border-dark: #1b4353;

    /* Tipografía */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs-xs: .8125rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.0625rem;
    --fs-xl: 1.25rem;
    --fs-h3: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
    --fs-h2: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
    --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
    --lh-body: 1.7;
    --lh-head: 1.12;

    /* Espaciado */
    --wrap: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --sec-y: clamp(4rem, 7vw, 7rem);

    /* Radios */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* Sombras */
    --sh-sm: 0 1px 3px rgba(7, 28, 38, .08), 0 1px 2px rgba(7, 28, 38, .05);
    --sh-md: 0 6px 18px rgba(7, 28, 38, .09), 0 2px 6px rgba(7, 28, 38, .06);
    --sh-lg: 0 18px 44px rgba(7, 28, 38, .15), 0 6px 14px rgba(7, 28, 38, .08);
    --sh-red: 0 10px 26px rgba(224, 6, 17, .32);

    /* Movimiento */
    --t-fast: 180ms cubic-bezier(.4, 0, .2, 1);
    --t: 280ms cubic-bezier(.4, 0, .2, 1);
    --header-h: 76px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Red de seguridad heredable: parte cualquier "palabra" que no quepa (el
       correo mide 274px de una pieza y desbordaba en pantallas pequeñas).
       `break-word` solo actúa cuando iba a desbordar y no altera el tamaño
       mínimo intrínseco, así que no mueve ningún grid ni flex. */
    overflow-wrap: break-word;
    /* Ojo: esto oculta el scroll horizontal pero NO elimina el desbordamiento.
       Chrome Android sigue dejando alejar el zoom y recoloca los `fixed`
       contra la caja ancha. El desbordamiento hay que evitarlo en origen. */
    overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
    margin: 0;
    color: var(--navy);
    line-height: var(--lh-head);
    letter-spacing: -.02em;
    font-weight: 700;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* El atributo hidden debe ganar siempre a los display de los componentes */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

:focus-visible {
    outline: 3px solid var(--red);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

::selection { background: var(--red); color: #fff; }

/* ---------- 3. Utilidades ---------- */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-y); }
.section--alt { background: var(--alt); }

.section--dark {
    background: var(--black);
    color: rgba(255, 255, 255, .78);
}
.section--dark h2, .section--dark h3 { color: #fff; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; top: -100px; left: 1rem; z-index: 200;
    background: var(--red); color: #fff;
    padding: .75rem 1.25rem; border-radius: var(--r-sm);
    font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.eyebrow {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--teal-dark);
    margin-bottom: .75rem;
}
.section--dark .eyebrow, .caribe .eyebrow { color: var(--teal); }

.section-head {
    max-width: 46rem;
    margin: 0 auto clamp(2.25rem, 4vw, 3.5rem);
    text-align: center;
}
.section-head .lead {
    margin-top: 1rem;
    font-size: var(--fs-lg);
    color: var(--muted);
}
.section--dark .section-head .lead { color: var(--muted-dark); }

/* ---------- 4. Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.75rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -.01em;
    border: 1.5px solid transparent;
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), transform var(--t-fast),
                box-shadow var(--t-fast);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--red); color: #fff; box-shadow: var(--sh-red); }
.btn--primary:hover { background: var(--red-dark); }

.btn--outline { border-color: var(--border-strong); color: var(--navy); background: #fff; }
.btn--outline:hover { border-color: var(--navy); }

.btn--outline-light { border-color: rgba(255, 255, 255, .28); color: #fff; }
.btn--outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

.btn--light { background: #fff; color: var(--red); }
.btn--light:hover { background: var(--alt); }

.btn--wide { width: 100%; }
.btn--sm { padding: .625rem 1.25rem; font-size: var(--fs-xs); }

.btn--wa { background: #25d366; color: #08331a; box-shadow: 0 10px 26px rgba(37, 211, 102, .3); }
.btn--wa:hover { background: #1fbe5b; }
/* El logo va en BLANCO sobre el verde, igual que en el botón flotante: es la
   combinación con la que la gente reconoce WhatsApp de un vistazo. El texto sí
   se queda en verde oscuro, que es donde hace falta contraste de lectura.
   El SVG usa fill="currentColor", así que basta con cambiarle el color. */
.btn--wa svg { color: #fff; }

/* ---------- 5. Header ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.header.is-stuck {
    border-bottom-color: var(--border);
    box-shadow: 0 2px 14px rgba(7, 28, 38, .07);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .75rem; flex: none; }
.brand__logo { width: 42px; height: 42px; object-fit: contain; }
.brand__name {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.02em;
    line-height: 1.15;
}
.brand__name span { display: block; font-size: .6875rem; font-weight: 600; color: var(--red); letter-spacing: .1em; text-transform: uppercase; }

.nav { margin-left: auto; display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: .25rem; }
.nav__cta { display: none; }
.nav__link {
    display: block;
    padding: .5rem .875rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__link.is-active { color: var(--red); background: var(--red-tint); }

.header__cta { flex: none; }

.burger {
    display: none;
    width: 44px; height: 44px;
    margin-left: auto;
    border-radius: var(--r-sm);
    align-items: center;
    justify-content: center;
}
.burger span {
    display: block; position: relative;
    width: 22px; height: 2px; border-radius: 2px; background: var(--navy);
    transition: transform var(--t-fast), background var(--t-fast);
}
.burger span::before, .burger span::after {
    content: ''; position: absolute; left: 0;
    width: 22px; height: 2px; border-radius: 2px; background: var(--navy);
    transition: transform var(--t-fast), top var(--t-fast);
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
    position: relative;
    background: var(--black);
    color: rgba(255, 255, 255, .74);
    overflow: hidden;
    /* El segundo valor deja hueco para la ola del final (--wave-h). */
    --wave-h: clamp(38px, 4.5vw, 72px);
    padding-block: clamp(3.5rem, 7vw, 6rem) calc(clamp(2.5rem, 5vw, 4rem) + var(--wave-h));
}
.hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto auto;
    width: min(70vw, 820px);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--red-glow) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
}
/* Resplandor turquesa del lado opuesto: da la sensación de horizonte marino
   sin cargar el hero con una foto que no tenemos del local. */
.hero::after {
    content: '';
    position: absolute;
    inset: auto auto -30% -15%;
    width: min(64vw, 720px);
    aspect-ratio: 1;
    background: radial-gradient(circle, var(--teal-glow) 0%, transparent 62%);
    filter: blur(26px);
    pointer-events: none;
}

.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.125rem;
    border-radius: var(--r-pill);
    background: rgba(224, 6, 17, .14);
    border: 1px solid rgba(224, 6, 17, .38);
    color: #ff6b6b;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.hero__badge svg { width: 16px; height: 16px; }

.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero h1 em { font-style: normal; color: var(--red); }

.hero__lead {
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    color: rgba(255, 255, 255, .72);
    max-width: 34rem;
    margin-bottom: 2rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.75rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    max-width: 34rem;
}
.hero__stat b {
    display: block;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -.04em;
    line-height: 1;
}
.hero__stat span {
    display: block;
    margin-top: .5rem;
    font-size: var(--fs-xs);
    color: var(--muted-dark);
    line-height: 1.4;
}

.hero__media {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 65% 45%, rgba(224, 6, 17, .34) 0%, transparent 58%),
        radial-gradient(90% 80% at 18% 88%, rgba(14, 154, 173, .30) 0%, transparent 62%),
        linear-gradient(160deg, #103848 0%, #05161e 100%);
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.hero__media img {
    width: 92%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .6));
}

/* ---------- 6b. Ola del hero (propia de Cartagena) ----------
   Corta el panel oscuro contra la barra de confianza. Va absoluta para no
   sumar altura: el hueco ya está reservado en el padding del hero. */
.wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: var(--wave-h);
    fill: var(--white);
    pointer-events: none;
}

/* ---------- 7. Barra de confianza ---------- */
.trust {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding-block: 1.5rem;
}
.trust__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem 1.75rem;
}
.trust__item {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--navy);
}
.trust__item svg { width: 22px; height: 22px; flex: none; color: var(--teal-dark); }

/* ---------- 8. Catálogo ---------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .625rem;
    margin-bottom: 2.5rem;
}
.chip {
    padding: .625rem 1.25rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    background: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
    transition: all var(--t-fast);
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip[aria-pressed="true"] {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
    box-shadow: var(--sh-red);
}
.chip b { font-weight: 700; opacity: .6; margin-left: .25rem; }

.grid-motos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.moto-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.moto-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
}
.moto-card.is-hidden { display: none; }

.moto-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(165deg, #ffffff 0%, #f2ece1 100%);
    display: grid;
    place-items: center;
    padding: 1rem;
    overflow: hidden;
}
.moto-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--t);
}
.moto-card:hover .moto-card__media img { transform: scale(1.06); }

.moto-card__badge {
    position: absolute;
    top: .875rem;
    left: .875rem;
    z-index: 2;
    padding: .3125rem .75rem;
    border-radius: var(--r-pill);
    background: var(--navy);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.moto-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.375rem 1.5rem;
}
.moto-card__brand {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: .375rem;
}
.moto-card__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .875rem;
}

.moto-card__specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.moto-card__specs dt {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    order: 2;
}
.moto-card__specs dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--navy);
    order: 1;
}
.moto-card__spec { display: flex; flex-direction: column; }

.moto-card__price { margin-bottom: 1.125rem; }
.moto-card__price small {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.moto-card__price b {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.03em;
}

.moto-card__actions { margin-top: auto; display: grid; gap: .5rem; }

.catalog__meta {
    margin-top: 2rem;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--muted);
}
.catalog__empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--muted);
    grid-column: 1 / -1;
}

/* ---------- 8b. Ficha técnica (modal) ---------- */
.moto-card--clickable { cursor: pointer; }
.moto-card--clickable .moto-card__name { transition: color var(--t-fast); }
.moto-card--clickable:hover .moto-card__name { color: var(--red); }

.ficha {
    width: min(94vw, 720px);
    max-height: min(90vh, 900px);
    padding: 0;
    border: none;
    border-radius: var(--r-lg);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--sh-lg);
    overflow: hidden;
}
.ficha::backdrop {
    background: rgba(4, 18, 25, .7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ficha[open] { display: flex; flex-direction: column; }

.ficha__scroll { overflow-y: auto; overscroll-behavior: contain; }

.ficha__media {
    position: relative;
    width: 100%;
    height: clamp(190px, 32vh, 320px);
    /* blanco y no degradado: varias fotos del catálogo traen fondo blanco
       sólido y sobre el degradado se les nota el recuadro. */
    background: #fff;
    border-bottom: 1px solid var(--border);
    /* flex y no grid: con una fila auto, el height:100% de la imagen
       queda cíclico y el navegador lo trata como auto (se desborda). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}
.ficha__media img { width: 100%; height: 100%; object-fit: contain; }

.ficha__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .3125rem .75rem;
    border-radius: var(--r-pill);
    background: var(--navy);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ficha__close {
    position: absolute;
    top: .875rem;
    right: .875rem;
    z-index: 3;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .92);
    color: var(--navy);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ficha__close:hover { background: var(--red); color: #fff; border-color: var(--red); }
.ficha__close svg { width: 18px; height: 18px; }

.ficha__body { padding: 1.5rem clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); }

.ficha__brand {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: .375rem;
}
.ficha__name {
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.02em;
    line-height: 1.15;
}
.ficha__price {
    margin-top: .5rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.03em;
}
.ficha__price small {
    display: block;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ficha__highlights {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .625rem;
    margin: 1.375rem 0 0;
}
.ficha__highlights li {
    padding: .875rem .75rem;
    border-radius: var(--r-sm);
    background: var(--alt);
    text-align: center;
}
.ficha__highlights b {
    display: block;
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.02em;
}
.ficha__highlights span {
    display: block;
    margin-top: .1875rem;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.ficha__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.75rem;
    margin: 1.5rem 0 0;
}
.ficha__spec {
    padding: .75rem 0;
    border-bottom: 1px solid var(--border);
}
.ficha__spec dt {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .1875rem;
}
.ficha__spec dd {
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
    color: var(--navy);
}

.ficha__note {
    margin-top: 1.25rem;
    font-size: .75rem;
    line-height: 1.6;
    color: var(--muted);
}
.ficha__cta { margin-top: 1.125rem; }

@media (max-width: 620px) {
    .ficha__specs { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ficha__highlights { gap: .5rem; }
    .ficha__highlights li { padding: .75rem .5rem; }
    .ficha__price { font-size: 1.3125rem; }
}

/* ---------- 9. Banner de financiación ---------- */
.promo {
    position: relative;
    background: var(--black);
    color: rgba(255, 255, 255, .74);
    overflow: hidden;
}
.promo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(3.5rem, 6vw, 5.5rem);
}
.promo__tag {
    display: inline-block;
    padding: .4375rem 1rem;
    border-radius: var(--r-pill);
    background: var(--red);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.promo h2 { color: #fff; margin-bottom: 1rem; }
.promo__text { color: rgba(255, 255, 255, .72); margin-bottom: 1.75rem; max-width: 32rem; }
.promo__points { display: grid; gap: .75rem; margin-bottom: 2rem; }
.promo__points li { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--fs-sm); }
.promo__points svg { width: 20px; height: 20px; flex: none; color: var(--red); margin-top: 1px; }
.promo__media {
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 11;
    background:
        radial-gradient(110% 90% at 50% 55%, rgba(224, 6, 17, .30) 0%, transparent 60%),
        radial-gradient(85% 75% at 20% 85%, rgba(14, 154, 173, .26) 0%, transparent 62%),
        linear-gradient(160deg, #123c4d 0%, #06181f 100%);
    display: grid;
    place-items: center;
}
.promo__media img { width: 94%; object-fit: contain; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); }

/* ---------- 9b. Clima costero (propia de Cartagena) ----------
   Retícula asimétrica: el texto a la izquierda y una lista de cuatro
   revisiones a la derecha. Deliberadamente distinta de .grid-cards y de
   .services para que la sección local no se confunda con el resto. */
.caribe { background: var(--white); }

.caribe__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.caribe__copy .lead {
    margin-top: 1rem;
    font-size: var(--fs-lg);
    color: var(--muted);
}

.caribe__tip {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: .75rem;
    margin-top: 1.75rem;
    padding: 1.125rem 1.25rem;
    border-radius: var(--r-sm);
    border-left: 3px solid var(--teal);
    background: var(--teal-tint);
    font-size: var(--fs-sm);
    color: #14343c;
}
.caribe__tip svg { width: 22px; height: 22px; color: var(--teal-dark); margin-top: 1px; }
.caribe__tip b { color: var(--navy); }

.caribe__cta { margin-top: 1.75rem; }

.caribe__list {
    display: grid;
    gap: .875rem;
}
.caribe__item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 1.125rem;
    align-items: start;
    padding: 1.25rem 1.375rem;
    background: var(--alt);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t), background var(--t);
}
.caribe__item:hover {
    transform: translateX(4px);
    background: #fff;
    box-shadow: var(--sh-md);
    border-color: var(--teal);
}
.caribe__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--r-pill);
    background: #fff;
    border: 1px solid var(--teal-tint);
    color: var(--teal-dark);
}
.caribe__icon svg { width: 24px; height: 24px; }
.caribe__item h3 { font-size: 1.0625rem; margin-bottom: .375rem; }
.caribe__item p { font-size: var(--fs-sm); color: var(--muted); }

/* ---------- 10. Tarjetas con ícono ---------- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.75rem;
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: transparent; }

.card__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    background: var(--red-tint);
    color: var(--red);
    margin-bottom: 1.25rem;
}
.card__icon svg { width: 24px; height: 24px; }

.card h3 { margin-bottom: .625rem; font-size: 1.0625rem; }
.card p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.25rem; }
.card__link {
    margin-top: auto;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--red);
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    transition: gap var(--t-fast);
}
.card__link:hover { gap: .75rem; }

/* CTA de WhatsApp dentro de las tarjetas de repuestos.
   `.btn` lleva `white-space: nowrap`, así que la etiqueta define el ancho
   mínimo del botón: a 280px medía 217px dentro de una tarjeta de 169px y se
   salía del viewport. `max-width: 100%` lo encierra en la tarjeta y
   `white-space: normal` deja que la etiqueta parta en dos líneas.
   Vale para cualquier ancho, sin media query que haya que recalcular si
   alguien alarga el texto del botón. */
.card__cta,
.service__cta,
.caribe__cta {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}
.card__cta { margin-top: auto; align-self: flex-start; }

/* Variante oscura (sección respaldo) */
.section--dark .card {
    background: var(--black-card);
    border-color: var(--border-dark);
}
.section--dark .card:hover { border-color: rgba(224, 6, 17, .5); box-shadow: 0 20px 46px rgba(0, 0, 0, .6); }
.section--dark .card__icon { background: rgba(224, 6, 17, .16); color: #ff5c5c; }
.section--dark .card p { color: var(--muted-dark); }

/* ---------- 11. Servicios (lista alterna) ---------- */
.services { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.service {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.75rem;
    transition: box-shadow var(--t), border-color var(--t);
}
.service:hover { box-shadow: var(--sh-md); border-color: var(--border-strong); }
.service__num {
    display: grid; place-items: center;
    width: 88px; height: 88px;
    border-radius: var(--r-sm);
    background: linear-gradient(150deg, var(--red) 0%, var(--red-ink) 100%);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.04em;
}
.service h3 { margin-bottom: .5rem; }
.service p { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1rem; }
.service__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.service__tags li {
    padding: .25rem .75rem;
    border-radius: var(--r-pill);
    background: var(--alt);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--navy);
}
.service__cta { margin-top: 1.25rem; }

/* ---------- 12. FAQ ---------- */
.faq { max-width: 48rem; margin-inline: auto; display: grid; gap: .875rem; }
.faq__item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.faq__item[open] { border-color: var(--red); box-shadow: var(--sh-md); }
.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: '';
    flex: none;
    width: 12px; height: 12px;
    border-right: 2.5px solid var(--red);
    border-bottom: 2.5px solid var(--red);
    transform: rotate(45deg) translateY(-3px);
    transition: transform var(--t-fast);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__answer { padding: 0 1.5rem 1.375rem; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- 13. Contacto ---------- */
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
}

.contact__list { display: grid; gap: 1.5rem; margin: 2rem 0; }
.contact__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; }
.contact__item svg { width: 44px; height: 44px; padding: 11px; border-radius: var(--r-sm); background: var(--red-tint); color: var(--red); }
/* El de WhatsApp no: va con los colores de la marca, como el flotante. */
.contact__item[data-contact="whatsapp"] svg { background: #25d366; color: #fff; }
.contact__label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .1875rem;
}
.contact__value { margin: 0; font-weight: 600; color: var(--navy); }
.contact__value a:hover { color: var(--red); }
.contact__value span { display: block; font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }

.map {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--alt);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

.form-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    box-shadow: var(--sh-md);
}
.form-card h3 { margin-bottom: .5rem; }
.form-card > p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.75rem; }

.field { margin-bottom: 1.125rem; }
.field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--navy);
    margin-bottom: .4375rem;
}
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: .8125rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: #fff;
    font-size: var(--fs-sm);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(224, 6, 17, .11);
}
.field input::placeholder, .field textarea::placeholder { color: #a7adb8; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.field__error { display: none; margin-top: .375rem; font-size: var(--fs-xs); font-weight: 600; color: var(--red); }
.field.has-error .field__error { display: block; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }

.form-note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.form-note a { color: var(--red); font-weight: 600; text-decoration: underline; }

/* ---------- 14. Footer ---------- */
.footer {
    background: var(--black);
    color: var(--muted-dark);
    padding-block: clamp(3rem, 5vw, 4.5rem) 0;
    font-size: var(--fs-sm);
}
.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 3rem);
    padding-bottom: 3rem;
}
.footer .brand__name { color: #fff; }
.footer__about { margin-top: 1.25rem; max-width: 26rem; }
.footer__contact {
    margin-top: 1rem;
    max-width: 26rem;
    font-style: normal;
    line-height: 1.9;
}
.footer__contact a { transition: color var(--t-fast); }
.footer__contact a:hover { color: var(--red); }
.footer h4 {
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 1.125rem;
}
.footer__links { display: grid; gap: .75rem; }
.footer__links a { transition: color var(--t-fast); }
.footer__links a:hover { color: var(--red); }

.social { display: flex; gap: .625rem; margin-top: 1.5rem; }
.social:empty { display: none; }
.social a {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border: 1px solid var(--border-dark);
    border-radius: var(--r-sm);
    color: #fff;
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.social a:hover { background: var(--red); border-color: var(--red); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; }

.footer__bottom {
    border-top: 1px solid var(--border-dark);
    padding-block: 1.5rem 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-xs);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer__legal a:hover { color: #fff; }
.footer__disclaimer {
    padding-bottom: 2rem;
    font-size: .75rem;
    line-height: 1.6;
    color: #6b6b72;
}

/* ---------- 15. Flotantes ---------- */
/* Con el menú móvil o la ficha abiertos (body.is-locked) los flotantes estorban:
   el aviso de cookies tapaba los últimos enlaces del menú. */
body.is-locked .wa-float,
body.is-locked .cookie { display: none; }

.wa-float {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 90;
    width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .42);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.wa-float:hover { transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.55); opacity: 0; }
}

/* ---------- 16. Cookies ---------- */
.cookie {
    position: fixed;
    left: clamp(1rem, 3vw, 1.75rem);
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 120;
    max-width: 30rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    padding: 1.375rem 1.5rem;
    display: none;
}
.cookie.is-open { display: block; }
.cookie p { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.125rem; }
.cookie p a { color: var(--red); font-weight: 600; text-decoration: underline; }
.cookie__actions { display: flex; gap: .625rem; flex-wrap: wrap; }

/* ---------- 17. Toast ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translate(-50%, 150%);
    z-index: 130;
    max-width: min(90vw, 25rem);
    padding: .875rem 1.375rem;
    border-radius: var(--r-pill);
    background: var(--navy);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 600;
    box-shadow: var(--sh-lg);
    /* El translate no basta para ocultarlo: vacío mide ~28px y asomaba por
       encima de la barra fija en móvil. visibility/opacity lo ocultan de verdad. */
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
}
.toast.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

/* ---------- 18. Reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 620ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 19. Páginas legales ---------- */
.page-head {
    background: var(--black);
    color: rgba(255, 255, 255, .72);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}
.page-head h1 { color: #fff; margin-bottom: .75rem; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); }
.page-head p { color: var(--muted-dark); }
.crumbs { display: flex; gap: .5rem; font-size: var(--fs-xs); color: var(--muted-dark); margin-bottom: 1.25rem; }
.crumbs a:hover { color: #fff; }

.legal { max-width: 48rem; margin-inline: auto; }
.legal h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); margin: 2.5rem 0 1rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.0625rem; margin: 1.75rem 0 .625rem; }
.legal p, .legal li { color: var(--ink); }
.legal ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; display: grid; gap: .5rem; }
.legal a { color: var(--red); font-weight: 600; text-decoration: underline; }
.legal .updated {
    display: inline-block;
    padding: .375rem 1rem;
    border-radius: var(--r-pill);
    background: var(--alt);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 2rem;
}

/* ---------- 20. Responsive ----------
   Nota: las columnas van en `minmax(0, 1fr)` y no en `1fr`. `1fr` es
   `minmax(auto, 1fr)`, cuyo mínimo es el contenido, así que un elemento ancho
   (una píldora, una palabra larga) estiraba la columna más allá del viewport y
   provocaba scroll horizontal en pantallas de ~280px. */
@media (max-width: 1024px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero__media { order: -1; aspect-ratio: 16 / 10; }
    .hero__stats { max-width: none; }
    .promo__grid { grid-template-columns: minmax(0, 1fr); }
    .caribe__grid { grid-template-columns: minmax(0, 1fr); }
    .contact__grid { grid-template-columns: minmax(0, 1fr); }
    .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El header de escritorio de esta sede (marca + 7 enlaces + botón Cotizar)
   necesita ~1129px: el enlace extra "Clima costero" lo hace más ancho que el de
   Bogotá, que cabía en ~985px. Medido en el navegador así:

     const i = document.querySelector('.header__inner'), c = getComputedStyle(i);
     document.querySelector('.header .brand').scrollWidth
       + document.querySelector('.nav__list').scrollWidth
       + document.querySelector('.header__cta').scrollWidth
       + parseFloat(c.gap) * 2 + parseFloat(c.paddingLeft) + parseFloat(c.paddingRight);

   Si el corte al menú hamburguesa se queda en los 1024px del resto del layout,
   entre 1025 y 1128px `.header__cta` se sale del viewport y genera scroll
   horizontal. Por eso ESTE bloque corta a 1180px y no a 1024px.
   ⚠️ Si se añade o alarga un enlace del menú, hay que volver a medir y subir
   este número. */
@media (max-width: 1180px) {
    :root { --header-h: 68px; }

    .burger { display: flex; }
    .header__cta { display: none; }

    /* CLAVE: sin backdrop-filter el header deja de ser el bloque contenedor del
       `.nav` fijo. Con él, el panel off-canvas contaba como desbordamiento del
       documento (scrollWidth = 2x la pantalla) y Chrome Android recolocaba TODOS
       los fijos contra esa caja ancha: el flotante caía fuera de pantalla.
       Aquí el header va opaco: se ve igual de limpio y ahorra el blur. */
    .header {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav {
        position: fixed;
        inset: var(--header-h) 0 0;
        display: block;
        background: #fff;
        padding: 1.5rem var(--gutter) 2.5rem;
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--t), visibility var(--t);
        margin-left: 0;
    }
    .nav.is-open { transform: none; visibility: visible; }
    .nav__list { flex-direction: column; align-items: stretch; gap: .25rem; }
    .nav__link {
        padding: .9375rem 1rem;
        font-size: 1.0625rem;
        font-weight: 600;
        border-radius: var(--r-sm);
        border-bottom: 1px solid var(--border);
    }
    .nav__cta { margin-top: 1.5rem; display: block; }
    .nav__cta .btn { width: 100%; }
}

@media (max-width: 860px) {
    /* El flotante se queda en su esquina (igual que en las otras sedes). En
       móvil el aviso de cookies ocupa todo el ancho, así que se apila por
       encima: si comparten `bottom` lo tapa por completo. */
    .cookie,
    .toast { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

    .service { grid-template-columns: minmax(0, 1fr); gap: 1.125rem; }
    .service__num { width: 60px; height: 60px; font-size: 1.375rem; }
}

@media (max-width: 560px) {
    .hero__stats { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .hero__stat:last-child { grid-column: 1 / -1; }
    .hero__actions .btn { width: 100%; }
    .form-row { grid-template-columns: minmax(0, 1fr); }
    .footer__grid { grid-template-columns: minmax(0, 1fr); }
    .footer__bottom { justify-content: flex-start; }
    .grid-motos { grid-template-columns: minmax(0, 1fr); }
}

/* Pantallas muy estrechas (Galaxy Fold cerrado, 280px): la marca va con
   `flex: none`, así que ni ella ni el gap encogían y el botón hamburguesa se
   salía 1–2px del viewport. Medido con:
     document.body.style.overflowX='visible';
     document.documentElement.scrollWidth - document.documentElement.clientWidth;  // debe dar 0
   No basta con `overflow-x: hidden`: oculta la barra pero deja que Chrome
   Android recoloque los `position: fixed` contra la caja ancha. */
@media (max-width: 380px) {
    .header__inner { gap: .625rem; }
    .brand { flex: 0 1 auto; min-width: 0; }
    .brand__logo { width: 34px; height: 34px; }
    .brand__name { font-size: .875rem; }
    .brand__name span { font-size: .625rem; }
}

/* ---------- 21. Preferencias / impresión ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

@media print {
    .header, .nav, .wa-float, .cookie, .toast, .form-card, .map, .wave { display: none !important; }
    body { color: #000; }
    .hero, .promo, .section--dark, .footer { background: #fff !important; color: #000 !important; }
    .hero h1, .promo h2, .section--dark h2, .section--dark h3 { color: #000 !important; }
}