@charset "utf-8";
/* =========================================================================
   ADVENTURE LOG | Transporte de Cargas
   Folha única, mobile-first. CSS moderno nativo: @layer, nesting, custom
   properties, color-mix(), container queries, :has(), scroll-snap.
   Paleta herdada de adventureviagens.com.br.
   ========================================================================= */

@layer reset, tokens, base, layout, components, sections, utilities;

/* ------------------------------------------------------------------ FONTES */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ======================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 5.5rem;
  }

  body {
    min-height: 100svh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  img { height: auto; }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: 0; }

  p, h1, h2, h3, h4 { overflow-wrap: break-word; }

  h1, h2, h3, h4 { text-wrap: balance; }

  p { text-wrap: pretty; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  a { color: inherit; }

  :target { scroll-margin-block-start: 6rem; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ======================================================================== */
@layer tokens {
  :root {
    /* -------- cor: índigo (primária, do site institucional #2D2F91) ------ */
    --indigo-950: #080924;
    --indigo-900: #0C0D2E;
    --indigo-850: #101242;
    --indigo-800: #16184F;
    --indigo-700: #1E2070;
    --indigo-600: #2D2F91;
    --indigo-500: #4245B4;
    --indigo-300: #9497DC;
    --indigo-100: #E2E3F6;
    --indigo-50:  #F1F2FB;

    /* -------- cor: laranja (CTA) ---------------------------------------- */
    --orange-700: #C25E00;
    --orange-600: #E06E05;
    --orange-500: #F4811E;
    --orange-400: #FF9440;
    --orange-100: #FFEEDF;

    /* -------- cor: ciano (apoio) ---------------------------------------- */
    --cyan-600: #0090C8;
    --cyan-500: #00ADEE;
    --cyan-100: #DCF2FC;

    --green-500: #1FA855;
    /* verde escuro para TEXTO sobre branco: o --green-500 dá só 3,4:1 */
    --green-700: #157A3D;

    /* -------- superfícies e texto --------------------------------------- */
    --paper:      #FFFFFF;
    --paper-alt:  #F6F7FC;
    --line:       #E5E7F2;
    --line-soft:  #EEF0F8;

    /* -------- platina: superfície com volume das caixas ------------------ */
    --platina-1: #FDFDFF;
    --platina-2: #F1F3F9;
    --platina-3: #E4E7F1;
    --bisel:     #D7DBE9;
    --text:       #15173B;
    --text-soft:  #4A4E75;
    /* fechado o suficiente para passar em AA sobre o cartão de vidro do hero
       (4,99:1) e sobre o rodapé claro (5,22:1) */
    --text-mute:  #61658E;

    --on-dark:        #FFFFFF;
    --on-dark-soft:   #C9CCEA;
    --on-dark-mute:   #9A9EC8;

    /* -------- tipografia ------------------------------------------------ */
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Sora', 'Inter', system-ui, sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: clamp(0.9375rem, 0.9rem + 0.18vw, 1rem);
    --fs-md:   clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --fs-lg:   clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
    --fs-xl:   clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
    --fs-2xl:  clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
    --fs-3xl:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
    --fs-4xl:  clamp(2.125rem, 1.7rem + 2.1vw, 3.25rem);

    /* -------- espaço ---------------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.75rem;
    --sp-8: 4rem;
    --sp-9: 5rem;
    --section-y: clamp(3.5rem, 2.4rem + 5vw, 6.5rem);
    --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);
    --maxw: 76rem;
    --maxw-narrow: 46rem;

    /* -------- forma ----------------------------------------------------- */
    --r-sm: 0.5rem;
    --r-md: 0.875rem;
    --r-lg: 1.25rem;
    --r-xl: 1.75rem;
    --r-full: 999px;

    /* -------- sombra (tingida de índigo, nunca cinza puro) --------------- */
    --sh-sm: 0 1px 2px rgb(21 23 59 / 0.06),
             0 2px 6px rgb(21 23 59 / 0.05);
    --sh-md: 0 2px 4px rgb(21 23 59 / 0.05),
             0 8px 20px -6px rgb(21 23 59 / 0.10);
    --sh-lg: 0 4px 10px rgb(21 23 59 / 0.06),
             0 20px 46px -12px rgb(21 23 59 / 0.20);
    --sh-cta: 0 2px 6px rgb(196 84 0 / 0.24),
              0 12px 26px -8px rgb(196 84 0 / 0.42);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --header-h: 4rem;
  }

  @media (min-width: 64rem) {
    :root { --header-h: 4.75rem; }
  }
}

/* ======================================================================== */
@layer base {
  body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-optical-sizing: auto;
    color: var(--text);
    background: var(--paper);
    overflow-x: hidden;
  }

  h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.022em;
  }

  /* peso 600 e tracking folgado: 800 apertado a 60px vira display de outdoor */
  h1 {
    font-size: var(--fs-4xl);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.015em;
  }
  h2 { font-size: var(--fs-3xl); font-weight: 700; letter-spacing: -0.028em; }
  h3 { font-size: var(--fs-xl); }
  h4 { font-size: var(--fs-lg); }

  a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

  strong, b { font-weight: 650; }

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

  :focus-visible {
    outline: 2px solid var(--orange-500);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  .dark :focus-visible,
  [data-dark] :focus-visible {
    outline-color: var(--orange-400);
  }
}

/* ======================================================================== */
@layer layout {
  .wrap {
    width: min(100% - var(--gutter) * 2, var(--maxw));
    margin-inline: auto;
  }

  .wrap--narrow { max-width: var(--maxw-narrow); }

  .section {
    padding-block: var(--section-y);
    position: relative;
  }

  .section--alt { background: var(--paper-alt); }

  .section--dark {
    background: var(--indigo-900);
    color: var(--on-dark);
    isolation: isolate;
    overflow: hidden;

    & h2, & h3 { color: var(--on-dark); }
    & p { color: var(--on-dark-soft); }
  }

  /* pinceladas diagonais da marca, usadas como textura em blocos escuros */
  .section--dark::before {
    content: '';
    position: absolute;
    inset: -20% -10%;
    z-index: -1;
    background:
      linear-gradient(108deg, transparent 34%,
        color-mix(in srgb, var(--cyan-500) 22%, transparent) 40%,
        transparent 46%),
      linear-gradient(108deg, transparent 52%,
        color-mix(in srgb, var(--orange-500) 18%, transparent) 58%,
        transparent 64%),
      radial-gradient(80% 60% at 80% 0%,
        color-mix(in srgb, var(--indigo-600) 60%, transparent), transparent 70%);
    opacity: 0.9;
    pointer-events: none;
  }

  .grid { display: grid; gap: var(--sp-4); }

  .stack > * + * { margin-block-start: var(--flow, var(--sp-4)); }
}

/* ======================================================================== */
@layer components {

  /* --------------------------------------------------------- EYEBROW ----- */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--indigo-600);
    margin-block-end: var(--sp-3);
  }

  .eyebrow::before {
    content: '';
    inline-size: 1.75rem;
    block-size: 3px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--orange-500), var(--cyan-500));
  }

  .section--dark .eyebrow { color: var(--orange-400); }

  .section-head {
    max-width: 42rem;
    margin-block-end: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  }

  .section-head p {
    margin-block-start: var(--sp-4);
    font-size: var(--fs-md);
    color: var(--text-soft);
  }

  .section-head--center {
    margin-inline: auto;
    text-align: center;

    & .eyebrow { justify-content: center; }
  }

  /* ------------------------------------------------------------ BOTÃO ---- */
  .btn {
    --btn-bg: var(--indigo-600);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-block-size: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--r-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: var(--fs-base);
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
                background-color 0.18s var(--ease), color 0.18s var(--ease);
  }

  .btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

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

  .btn--cta {
    --btn-bg: var(--orange-500);
    box-shadow: var(--sh-cta);
    font-weight: 650;

    &:hover { --btn-bg: var(--orange-600); }
  }

  .btn--wa {
    --btn-bg: var(--green-500);
    box-shadow: 0 2px 6px rgb(16 110 55 / 0.22),
                0 12px 26px -8px rgb(16 110 55 / 0.36);

    &:hover { --btn-bg: #178f47; }
  }

  /* WhatsApp secundário, sobre superfície clara. O texto usa --green-700
     porque o verde da marca sobre branco fica em 3,4:1 e reprova em AA. */
  .btn--wa-outline {
    /* o preenchimento branco não é decoração: sem ele, o verde do texto fica
       em 3,4:1 quando o cartão de vidro pousa sobre uma área escura da foto */
    --btn-bg: color-mix(in srgb, #fff 78%, transparent);
    --btn-fg: var(--green-700);
    border: 1.5px solid color-mix(in srgb, var(--green-500) 48%, transparent);

    &:hover {
      --btn-bg: var(--green-500);
      --btn-fg: #fff;
      border-color: var(--green-500);
    }
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    border: 1.5px solid var(--line);

    &:hover {
      --btn-bg: var(--indigo-50);
      border-color: var(--indigo-100);
    }
  }

  .btn--ghost-light {
    --btn-bg: color-mix(in srgb, #fff 10%, transparent);
    --btn-fg: #fff;
    border: 1.5px solid color-mix(in srgb, #fff 26%, transparent);
    backdrop-filter: blur(8px);

    &:hover { --btn-bg: color-mix(in srgb, #fff 20%, transparent); }
  }

  .btn--lg { min-block-size: 3.375rem; padding-inline: 1.875rem; font-size: var(--fs-md); }
  .btn--block { inline-size: 100%; }

  /* ------------------------------------------------------------- CHIP ---- */
  .chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.4rem 0.85rem 0.4rem 0.65rem;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--on-dark-soft);
    background: color-mix(in srgb, #fff 8%, transparent);
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  }

  .chip svg {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--cyan-500);
    flex: none;
  }

  /* ----------------------------------------------------------- PLATINA --- */
  /* Superfície única das caixas claras. O que o olho lê como metal é a soma
     de três coisas: gradiente frio de cima para baixo, um fio de luz por
     dentro do topo e a borda de baixo um tom mais fechada que as laterais. */
  .card,
  .step,
  .faq__item,
  .quote-card,
  .local {
    background: linear-gradient(178deg,
      var(--platina-1) 0%, var(--platina-2) 62%, var(--platina-3) 100%);
    border: 1px solid var(--line);
    border-block-end-color: var(--bisel);
    box-shadow: var(--sh-sm), inset 0 1px 0 #fff;
  }

  /* ------------------------------------------------------------- CARD ---- */
  .card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border-radius: var(--r-lg);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
                border-color 0.25s var(--ease);
  }

  /* reflexo especular fixo no canto superior esquerdo */
  .card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg,
      color-mix(in srgb, #fff 65%, transparent) 0%, transparent 34%);
    opacity: 0.55;
    transition: opacity 0.3s var(--ease);
  }

  .card > * { position: relative; }

  .card h3 { font-size: var(--fs-lg); }

  .card p {
    margin-block-start: var(--sp-2);
    color: var(--text-soft);
    font-size: var(--fs-base);
  }

  .card__icon {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-end: var(--sp-4);
    border-radius: var(--r-md);
    color: var(--indigo-600);
    background: linear-gradient(160deg, #fff, var(--indigo-50) 52%, var(--platina-3));
    border: 1px solid var(--indigo-100);
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(21 23 59 / 0.07);
    transition: color 0.25s var(--ease), background 0.25s var(--ease),
                border-color 0.25s var(--ease);
  }

  .card__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

  @media (hover: hover) {
    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--sh-lg), inset 0 1px 0 #fff;
      border-color: color-mix(in srgb, var(--indigo-600) 22%, var(--line));
    }
    .card:hover::after { opacity: 0.9; }
    .card:hover .card__icon {
      color: #fff;
      background: linear-gradient(140deg, var(--indigo-600), var(--cyan-600));
      border-color: transparent;
    }
  }

  /* ------------------------------------------------------------- LOGO ---- */
  .logo {
    display: inline-flex;
    align-items: center;
    flex: none;
  }

  .logo img {
    inline-size: auto;
    block-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
  }

  /* ---------------------------------------------------------- SR ONLY ---- */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--sp-4);
    z-index: 200;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--indigo-600);
    color: #fff;
    font-weight: 600;
    text-decoration: none;

    &:focus { inset-block-start: 0; }
  }

  /* ------------------------------------------------------------ REVEAL --- */
  .reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--delay, 0ms);
  }

  .reveal.is-in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
  }

  /* nenhum JS? o conteúdo aparece mesmo assim */
  .no-js .reveal { opacity: 1; transform: none; }
}

/* ======================================================================== */
@layer sections {

  /* ====================================================== HEADER ========= */
  /* tarja branca desde o topo: a logo tem contorno branco e some sobre
     fundo escuro ou sobre a foto do hero */
  .header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: var(--header-h);
    display: flex;
    align-items: center;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 1px 0 var(--line);
    transition: box-shadow 0.3s var(--ease);
  }

  /* ao rolar, só ganha profundidade */
  .header.is-stuck {
    box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgb(21 23 59 / 0.45);
  }

  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    inline-size: min(100% - var(--gutter) * 2, var(--maxw));
    margin-inline: auto;
  }

  .header__spacer { margin-inline-start: auto; }

  .nav { display: none; }

  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 0.1rem + 1.4vw, 1.5rem);
  }

  .nav__link {
    display: inline-block;
    padding: 0.5rem 0.25rem;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    position: relative;
    transition: color 0.2s var(--ease);

    &:hover { color: var(--indigo-600); }
  }

  .nav__link::after {
    content: '';
    position: absolute;
    inset-block-end: 0.25rem;
    inset-inline: 0.25rem;
    block-size: 2px;
    border-radius: var(--r-full);
    background: var(--indigo-600);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }

  .nav__link:hover::after,
  .nav__link:focus-visible::after { transform: scaleX(1); }

  .header .btn--cta { display: none; }

  /* botão hambúrguer */
  .burger {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin-inline-end: -0.5rem;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--indigo-700);
    background: var(--indigo-50);
    border: 1px solid var(--line);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
                border-color 0.2s var(--ease);

    &:hover { background: var(--indigo-100); }
  }

  .burger__bars {
    inline-size: 1.125rem;
    block-size: 0.75rem;
    position: relative;
  }

  .burger__bars span {
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
  }

  .burger__bars span:nth-child(1) { inset-block-start: 0; }
  .burger__bars span:nth-child(2) { inset-block-start: calc(50% - 1px); }
  .burger__bars span:nth-child(3) { inset-block-end: 0; }

  .burger[aria-expanded='true'] .burger__bars span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  .burger[aria-expanded='true'] .burger__bars span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded='true'] .burger__bars span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* ------------------------------------------------------- DRAWER -------- */
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: grid;
    grid-template-rows: 1fr;
    visibility: hidden;
    pointer-events: none;
  }

  .drawer[data-open='true'] { visibility: visible; pointer-events: auto; }

  .drawer__scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--indigo-950) 65%, transparent);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }

  .drawer[data-open='true'] .drawer__scrim { opacity: 1; }

  .drawer__panel {
    position: relative;
    justify-self: end;
    inline-size: min(21rem, 88vw);
    block-size: 100%;
    padding: calc(var(--header-h) + 1rem) var(--sp-5) var(--sp-6);
    background: var(--paper);
    box-shadow: -20px 0 60px -20px rgb(8 9 36 / 0.5);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.36s var(--ease-out);
  }

  .drawer[data-open='true'] .drawer__panel { transform: none; }

  .drawer__close {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--r-md);
    background: var(--indigo-50);
    color: var(--indigo-700);
    cursor: pointer;
  }

  .drawer__close svg { inline-size: 1.25rem; block-size: 1.25rem; }

  .drawer__nav {
    display: grid;
    gap: 0.125rem;
    margin-block-end: var(--sp-5);
  }

  .drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0.25rem;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-block-end: 1px solid var(--line-soft);
    transition: color 0.2s var(--ease), padding-inline-start 0.2s var(--ease);

    &:hover { color: var(--indigo-600); padding-inline-start: 0.5rem; }
  }

  .drawer__link svg {
    inline-size: 1rem;
    block-size: 1rem;
    color: var(--indigo-300);
  }

  .drawer__actions { display: grid; gap: var(--sp-3); }

  body:has(.drawer[data-open='true']) { overflow: hidden; }

  /* ======================================================== HERO ========= */
  .hero {
    position: relative;
    isolation: isolate;
    padding-block-start: calc(var(--header-h) + clamp(2rem, 1rem + 5vw, 4rem));
    padding-block-end: clamp(3rem, 2rem + 5vw, 5.5rem);
    color: var(--on-dark);
    background: var(--indigo-950);
    /* clip e não hidden: os dois recortam o brilho ciano que sangra para fora,
       mas `hidden` transformaria o hero em scroll container e mataria o
       position:sticky da coluna de texto. `clip` recorta sem criar rolagem. */
    overflow: clip;
  }

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
  }

  /* <picture> é inline por padrão: sem block-size aqui, o 100% do <img>
     resolve contra altura automática e a foto não cobre o hero inteiro. */
  .hero__media picture {
    display: block;
    block-size: 100%;
  }

  .hero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 58% 50%;
  }

  /* Camadas do hero. A foto é um caminhão azul sob céu azul: um véu índigo
     por cima de tudo achatava a cena inteira num tom só. Aqui não há véu
     global. No lugar dele entra uma cama escura localizada, exatamente onde
     o cartão branco do formulário pousa sobre o baú branco do caminhão. */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      /* 1. topo e base: protege o header e costura com a seção seguinte */
      linear-gradient(180deg,
        color-mix(in srgb, var(--indigo-950) 46%, transparent) 0%,
        color-mix(in srgb, var(--indigo-950) 10%, transparent) 30%,
        color-mix(in srgb, var(--indigo-950) 22%, transparent) 68%,
        var(--indigo-950) 100%),
      /* 2. lateral: abre espaço de leitura à esquerda */
      linear-gradient(100deg,
        color-mix(in srgb, var(--indigo-950) 84%, transparent) 0%,
        color-mix(in srgb, var(--indigo-950) 60%, transparent) 38%,
        color-mix(in srgb, var(--indigo-950) 16%, transparent) 70%,
        transparent 100%),
      /* 3. cama do cartão de cotação */
      radial-gradient(64% 88% at 76% 52%,
        color-mix(in srgb, var(--indigo-950) 58%, transparent) 0%,
        transparent 72%);
    pointer-events: none;
  }

  /* No mobile o texto ocupa a largura toda, então o escurecimento vira
     vertical e escalonado: pesado onde a copy corre (topo), aberto na faixa
     do meio para a frota aparecer, e a cama do cartão desce junto com ele. */
  @media (max-width: 63.999rem) {
    .hero::before {
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--indigo-950) 84%, transparent) 0%,
          color-mix(in srgb, var(--indigo-950) 72%, transparent) 32%,
          color-mix(in srgb, var(--indigo-950) 34%, transparent) 50%,
          color-mix(in srgb, var(--indigo-950) 58%, transparent) 76%,
          var(--indigo-950) 100%),
        radial-gradient(90% 42% at 50% 78%,
          color-mix(in srgb, var(--indigo-950) 52%, transparent) 0%,
          transparent 74%),
        linear-gradient(0deg,
          color-mix(in srgb, var(--indigo-700) 8%, transparent),
          color-mix(in srgb, var(--indigo-700) 8%, transparent));
    }
  }

  .hero::after {
    content: '';
    position: absolute;
    inset-block-start: -30%;
    inset-inline-end: -20%;
    inline-size: 75%;
    aspect-ratio: 1;
    z-index: -1;
    background: radial-gradient(circle,
      color-mix(in srgb, var(--cyan-500) 14%, transparent), transparent 62%);
    filter: blur(20px);
    pointer-events: none;
  }

  .hero__inner {
    display: grid;
    gap: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  }

  .hero__copy { max-width: 34rem; }

  /* o índigo padrão do eyebrow não tem contraste sobre a foto escura */
  .hero .eyebrow { color: #fff; }

  .hero h1 {
    color: #fff;
    text-shadow: 0 2px 30px rgb(8 9 36 / 0.32);
  }

  /* destaque em laranja sólido: um gradiente aqui quebra entre as linhas.
     Peso maior que o do h1, senão o realce some no texto mais leve. */
  .hero h1 em {
    font-style: normal;
    font-weight: 700;
    color: var(--orange-400);
    text-shadow: 0 2px 24px color-mix(in srgb, var(--orange-600) 45%, transparent);
  }

  .hero__lead {
    margin-block-start: var(--sp-5);
    font-size: var(--fs-md);
    color: var(--on-dark-soft);
    max-width: 33rem;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-block-start: var(--sp-6);
  }

  /* em telas estreitas os botões empilham: larguras diferentes ficam tortas */
  @media (max-width: 26rem) {
    .hero__actions .btn { flex: 1 1 100%; }
  }

  .hero .chips { margin-block-start: var(--sp-6); }

  /* --------- pílula de rolagem ---------------------------------------- */
  .hero__cue-wrap { text-align: center; }

  /* pílula vertical, no formato do indicador clássico de rolagem */
  .hero__cue {
    display: inline-grid;
    justify-items: center;
    align-content: start;
    inline-size: 1.8rem;
    block-size: 3rem;
    padding-block-start: 0.55rem;
    margin-block-start: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    border-radius: var(--r-full);
    background: color-mix(in srgb, #fff 10%, transparent);
    border: 1.5px solid color-mix(in srgb, #fff 40%, transparent);
    backdrop-filter: blur(8px);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);

    &:hover {
      background: color-mix(in srgb, #fff 20%, transparent);
      border-color: color-mix(in srgb, #fff 60%, transparent);
    }
  }

  .hero__cue-dot {
    inline-size: 0.3rem;
    block-size: 0.55rem;
    border-radius: var(--r-full);
    background: #fff;
    animation: cue 2.1s var(--ease) infinite;
  }

  @keyframes cue {
    0%   { translate: 0 0;      opacity: 0; }
    18%  { translate: 0 0;      opacity: 1; }
    70%  { translate: 0 1.05rem; opacity: 0; }
    100% { translate: 0 1.05rem; opacity: 0; }
  }

  /* --------- formulário da capa --------------------------------------- */
  /* Vidro branco. A opacidade alta (92%) não é capricho: o cartão pousa
     sobre o baú branco do caminhão, e cada ponto conta para o texto escuro
     manter contraste. A separação vem da cama radial no .hero::before. */
  .quote {
    position: relative;
    padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
    border-radius: var(--r-xl);
    background: color-mix(in srgb, #fff 74%, transparent);
    backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid color-mix(in srgb, #fff 60%, transparent);
    box-shadow: 0 40px 90px -45px rgb(4 5 20 / 0.85),
                0 2px 10px -4px rgb(4 5 20 / 0.35),
                inset 0 1px 0 color-mix(in srgb, #fff 75%, transparent);
  }

  .quote::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 12%;
    block-size: 1px;
    background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--orange-500) 70%, transparent), transparent);
  }

  /* ---- variante azul: o cartão do FAQ -------------------------------- */
  /* Sobre a seção clara, o índigo da marca destaca a cotação do acordeão.
     Como o formulário base é claro, tudo o que fica dentro precisa voltar
     para o tratamento escuro. */
  .quote--blue {
    background:
      radial-gradient(120% 80% at 85% 0%,
        color-mix(in srgb, var(--indigo-700) 70%, transparent), transparent 70%),
      linear-gradient(165deg, var(--indigo-800), var(--indigo-900) 60%, var(--indigo-950));
    backdrop-filter: none;
    border: 1px solid color-mix(in srgb, #fff 14%, transparent);
    box-shadow: var(--sh-lg),
                inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  }

  .quote--blue .quote__head h2 { color: #fff; }
  .quote--blue .quote__head p { color: var(--on-dark-soft); }

  .quote--blue .field > label { color: var(--on-dark-soft); }
  .quote--blue .field > label .opt { color: var(--on-dark-mute); opacity: 1; }

  /* o `.field` a mais não é enfeite: sem ele estas regras empatam em
     especificidade com as do formulário claro, que vêm depois no arquivo */
  .quote--blue .field :is(input, select, textarea) {
    color: #fff;
    /* background-color, nunca o atalho `background`: o atalho zeraria o
       no-repeat e o position da seta do <select>, que se repetiria na faixa */
    background-color: color-mix(in srgb, #fff 8%, transparent);
    border-color: color-mix(in srgb, #fff 18%, transparent);
  }

  .quote--blue .field :is(input, select, textarea):hover {
    border-color: color-mix(in srgb, #fff 32%, transparent);
  }

  /* 58% e não 42%: a 42% o placeholder fica em 3,4:1 sobre o campo */
  .quote--blue .field :is(input, textarea)::placeholder {
    color: color-mix(in srgb, #fff 58%, transparent);
  }

  .quote--blue .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }

  .quote--blue .field :is(input, select, textarea):focus {
    background-color: color-mix(in srgb, #fff 13%, transparent);
    border-color: var(--orange-400);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-500) 26%, transparent);
  }

  .quote--blue .form.was-validated .field:has(:invalid) :is(input, select, textarea) {
    border-color: #ff8a8a;
    box-shadow: 0 0 0 3px rgb(255 138 138 / 0.18);
  }

  .quote--blue .field__error { color: #ffb3b3; }

  .quote--blue .form__or { color: var(--on-dark-soft); }

  .quote--blue .form__or::before,
  .quote--blue .form__or::after {
    background: linear-gradient(90deg, transparent,
      color-mix(in srgb, #fff 26%, transparent));
  }

  .quote--blue .form__note { color: var(--on-dark-mute); }
  .quote--blue .form__note svg { color: var(--cyan-500); }

  /* aqui o fundo é escuro, então o botão volta a ser branco vazado */
  .quote--blue .btn--wa-outline {
    --btn-bg: color-mix(in srgb, #fff 8%, transparent);
    --btn-fg: #fff;
    border-color: color-mix(in srgb, #fff 45%, transparent);
  }

  .quote--blue .form__status[data-state='success'] {
    color: #d6ffe8;
    background: color-mix(in srgb, var(--green-500) 22%, transparent);
    border-color: color-mix(in srgb, var(--green-500) 46%, transparent);
  }

  .quote--blue .form__status[data-state='error'] {
    color: #ffe0d6;
    background: color-mix(in srgb, var(--orange-500) 18%, transparent);
    border-color: color-mix(in srgb, var(--orange-500) 44%, transparent);
  }

  .quote__head { margin-block-end: var(--sp-5); }

  .quote__head h2 {
    font-size: var(--fs-xl);
    color: var(--text);
  }

  .quote__head p {
    margin-block-start: var(--sp-2);
    font-size: var(--fs-base);
    color: var(--text-soft);
  }

  /* ------------------------------------------------------- FORMULÁRIO ---- */
  .form { display: grid; gap: var(--sp-4); }

  .form__row { display: grid; gap: var(--sp-4); }

  @media (min-width: 30rem) {
    .form__row--2 { grid-template-columns: 1fr 1fr; }
  }

  .field { display: grid; gap: 0.375rem; }

  .field > label {
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-soft);
  }

  /* --text-soft e não --text-mute: o cartão é translúcido, e o que estiver
     sobre ele precisa de margem de contraste sobre a foto que passa atrás */
  .field > label .opt {
    font-weight: 400;
    color: var(--text-soft);
    opacity: 0.85;
    text-transform: none;
    letter-spacing: 0;
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--r-md);
    color: var(--text);
    background-color: #fff;
    border: 1px solid var(--line);
    font-size: 1rem; /* 16px: evita zoom automático no iOS */
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
                box-shadow 0.2s var(--ease);
  }

  .field :is(input, select, textarea):hover { border-color: var(--indigo-100); }

  .field textarea { min-block-size: 5.5rem; resize: vertical; }

  .field input::placeholder,
  .field textarea::placeholder { color: var(--text-mute); }

  .field select {
    appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315173B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1.1rem;
    cursor: pointer;
  }

  .field select option { color: var(--text); background: #fff; }

  .field :is(input, select, textarea):focus {
    outline: none;
    /* longhand: o atalho `background` apagaria a seta do <select> no foco */
    background-color: #fff;
    border-color: var(--orange-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-500) 22%, transparent);
  }

  /* estado de erro só depois da tentativa de envio */
  .form.was-validated .field:has(:invalid) input,
  .form.was-validated .field:has(:invalid) select,
  .form.was-validated .field:has(:invalid) textarea {
    border-color: #D2493C;
    box-shadow: 0 0 0 3px rgb(210 73 60 / 0.14);
  }

  .form.was-validated .field:has(:invalid) .field__error { display: block; }

  .field__error {
    display: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #9E2A1E;
  }

  /* separador entre o envio e a alternativa do WhatsApp */
  .form__or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  /* filete que esmaece nas pontas: --line puro some sobre o cartão de vidro */
  .form__or::before,
  .form__or::after {
    content: '';
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--bisel));
  }

  .form__or::after { rotate: 180deg; }

  .form__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-soft);
  }

  .form__note svg {
    inline-size: 1rem;
    block-size: 1rem;
    margin-block-start: 0.12rem;
    color: var(--cyan-600);
    flex: none;
  }

  /* honeypot */
  .hp {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .btn[data-loading='true'] {
    pointer-events: none;
    opacity: 0.75;
  }

  .btn[data-loading='true'] .btn__label::after {
    content: '';
    display: inline-block;
    inline-size: 0.9em;
    block-size: 0.9em;
    margin-inline-start: 0.6em;
    vertical-align: -0.1em;
    border: 2px solid color-mix(in srgb, #fff 40%, transparent);
    border-block-start-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  @keyframes spin { to { transform: rotate(360deg); } }

  /* mensagem de retorno */
  .form__status {
    display: none;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    line-height: 1.5;
  }

  .form__status[data-state='success'],
  .form__status[data-state='error'] { display: grid; gap: var(--sp-3); }

  .form__status[data-state='success'] {
    color: #0F5C2E;
    background: color-mix(in srgb, var(--green-500) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--green-500) 32%, #fff);
  }

  .form__status[data-state='error'] {
    color: #8A3D00;
    background: color-mix(in srgb, var(--orange-500) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--orange-500) 34%, #fff);
  }

  .form__status strong { display: block; font-family: var(--font-display); }

  /* ====================================================== MARQUEE ======== */
  .marquee {
    --speed: 42s;
    padding-block: var(--sp-4);
    background: var(--indigo-900);
    border-block: 1px solid color-mix(in srgb, #fff 8%, transparent);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .marquee__track {
    display: flex;
    inline-size: max-content;
    animation: marquee var(--speed) linear infinite;
  }

  .marquee:hover .marquee__track { animation-play-state: paused; }

  .marquee__group {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    padding-inline-end: clamp(1.5rem, 1rem + 2vw, 3rem);
  }

  .marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--on-dark-mute);
    white-space: nowrap;
  }

  .marquee__item::before {
    content: '';
    inline-size: 0.35rem;
    block-size: 0.35rem;
    border-radius: 50%;
    background: var(--orange-500);
    flex: none;
  }

  @keyframes marquee {
    to { transform: translateX(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee { mask-image: none; overflow-x: auto; }
    .marquee__track { animation: none; }
  }

  /* ====================================================== SERVIÇOS ======= */
  .services__grid {
    display: grid;
    gap: var(--sp-4);
    container-type: inline-size;
  }

  @media (min-width: 34rem) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 62rem) {
    .services__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  }

  /* ====================================================== VANTAGENS ====== */
  .why { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); }

  .why__media {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
  }

  .why__media img { inline-size: 100%; }

  .why__stamp {
    position: absolute;
    inset-block-end: var(--sp-4);
    inset-inline-start: var(--sp-4);
    padding: 0.7rem 1.1rem;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--indigo-950) 78%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, #fff 18%, transparent);
    color: #fff;
  }

  .why__stamp b {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--orange-400);
  }

  .why__stamp span {
    font-size: var(--fs-sm);
    color: var(--on-dark-soft);
  }

  /* linha condutora: um filete vertical costura os cinco pontos, e cada um
     é marcado por um ponto pequeno. Sem quadrado numerado, sem gradiente. */
  .why__list {
    position: relative;
    display: grid;
    gap: var(--sp-6);
    padding-inline-start: var(--sp-6);
  }

  .why__list::before {
    content: '';
    position: absolute;
    inset-block: 0.75rem 2rem;
    inset-inline-start: 0.33rem;
    inline-size: 1px;
    background: linear-gradient(180deg, var(--indigo-300),
      color-mix(in srgb, var(--indigo-300) 0%, transparent));
  }

  .why__item { position: relative; }

  .why__marker {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-start: calc(var(--sp-6) * -1);
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--indigo-500);
    box-shadow: 0 0 0 4px var(--paper-alt);
  }

  .why__ord {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--indigo-500);
    margin-block-end: 0.35rem;
  }

  .why__item h3 { font-size: var(--fs-lg); }

  .why__item p {
    margin-block-start: 0.35rem;
    color: var(--text-soft);
  }

  /* ======================================================== PASSOS ======= */
  /* A seta tracejada corre por trás dos três cards e emerge nos vãos: a faixa
     lê como um fluxo do passo 1 ao 3, não como três caixas soltas. */
  .steps__wrap {
    position: relative;
    isolation: isolate;
  }

  /* A faixa é 14% mais larga que o grid, para a ponta sobrar à direita do
     último card. O max-inline-size:none é obrigatório: o reset aplica
     max-width:100% em todo svg e travaria a largura em 100%. */
  .steps__flow {
    position: absolute;
    display: block;
    z-index: -1;
    inset-block-start: -12%;
    inset-inline-start: -7%;
    inline-size: 114%;
    max-inline-size: none;
    block-size: 124%;
    pointer-events: none;
  }

  /* ponta da seta: a curva termina em x=1200, a borda direita da caixa do SVG,
     que é 7% mais larga que o grid. O ângulo acompanha a saída da curva. */
  .steps__tip {
    position: absolute;
    z-index: -1;
    inset-inline-end: -6.2%;
    inset-block-start: 40%;
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-block-start: 2px solid var(--indigo-500);
    border-inline-end: 2px solid var(--indigo-500);
    rotate: 20deg;
    pointer-events: none;
  }

  /* marcha das formiguinhas: o tracejado corre para a frente e a linha vira
     uma seta em movimento, não um enfeite parado */
  .steps__flow-line { animation: dash-run 2.8s linear infinite; }

  @keyframes dash-run {
    to { stroke-dashoffset: -48; }
  }

  @media (prefers-reduced-motion: reduce) {
    .steps__flow-line { animation: none; }
  }

  /* abaixo de 48rem os cards empilham e a curva horizontal perde o sentido */
  @media (max-width: 47.999rem) {
    .steps__flow, .steps__tip { display: none; }
  }

  .steps {
    display: grid;
    gap: var(--sp-5);
    counter-reset: step;
  }

  /* o número não é mais uma etiquetinha colada no título: vira um algarismo
     grande, no fluxo, separado do texto por um filete */
  .step {
    position: relative;
    padding: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    border-radius: var(--r-lg);
    counter-increment: step;
  }

  .step::before {
    content: '0' counter(step);
    display: block;
    margin-block-end: var(--sp-4);
    padding-block-end: var(--sp-4);
    border-block-end: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: transparent;
    background: linear-gradient(160deg, var(--indigo-600), var(--cyan-600));
    -webkit-background-clip: text;
    background-clip: text;
  }

  .step h3 { font-size: var(--fs-lg); }

  .step p {
    margin-block-start: var(--sp-3);
    color: var(--text-soft);
  }

  @media (min-width: 48rem) {
    .steps {
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
    }
  }

  /* ======================================================== NÚMEROS ====== */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--sp-6);
  }

  @media (min-width: 56rem) {
    .stats {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--sp-8);
    }
  }

  .stat {
    position: relative;
    text-align: center;
    padding: var(--sp-5) var(--sp-4);
    border-radius: var(--r-lg);
    background: linear-gradient(178deg,
      color-mix(in srgb, #fff 8%, transparent),
      color-mix(in srgb, #fff 2%, transparent));
    border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
    backdrop-filter: blur(6px);
  }

  .stat b {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: linear-gradient(180deg, #fff, var(--indigo-300));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .stat span {
    display: block;
    margin-block-start: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
  }

  /* o filete de acento mora no rótulo, e não no <b>: o <b> usa
     background-clip:text, e um pseudo-elemento dentro dele se perderia */
  .stat span::before {
    content: '';
    display: block;
    inline-size: 2.25rem;
    block-size: 2px;
    margin: 0 auto var(--sp-3);
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--cyan-500),
      color-mix(in srgb, var(--indigo-300) 55%, transparent));
  }

  .stats__note {
    margin-block-start: var(--sp-9);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid color-mix(in srgb, #fff 12%, transparent);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2) var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--on-dark-mute);
    text-align: center;
  }

  /* ========================================================= SOBRE ======= */
  .about { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); }

  /* moldura deslocada atrás da foto: o detalhe de layout que a seção pedia.
     O overflow fica no <picture>, senão a moldura seria cortada junto. */
  .about__media {
    position: relative;
    isolation: isolate;
    aspect-ratio: 1;
  }

  .about__media picture {
    display: block;
    block-size: 100%;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
  }

  .about__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media (min-width: 48rem) {
    .about__media::before {
      content: '';
      position: absolute;
      z-index: -1;
      inset: 1.25rem -1.25rem -1.25rem 1.25rem;
      border: 1.5px solid var(--indigo-100);
      border-radius: var(--r-xl);
    }
  }

  .about__body p {
    color: var(--text-soft);
    font-size: var(--fs-md);
  }

  .about__body p + p { margin-block-start: var(--sp-4); }

  /* precisa da especificidade de .about__body p para vencer o tamanho base */
  .about__body .about__lead {
    font-size: var(--fs-lg);
    color: var(--text);
  }

  /* régua de acento à esquerda do texto */
  @media (min-width: 48rem) {
    .about__text {
      padding-inline-start: var(--sp-5);
      background: linear-gradient(180deg, var(--indigo-300), transparent 72%)
                  left top / 1px 100% no-repeat;
    }
  }

  /* os três fatos viram uma faixa de metadados, sem caixa cinza */
  .about__meta {
    display: grid;
    gap: var(--sp-4);
    margin-block-start: var(--sp-6);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--line);
  }

  @media (min-width: 34rem) {
    .about__meta {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      gap: 0;
    }
    .about__meta li + li {
      padding-inline-start: var(--sp-5);
      border-inline-start: 1px solid var(--line);
    }
  }

  .about__meta b {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--indigo-500);
    margin-block-end: 0.35rem;
  }

  .about__meta span {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text);
  }

  /* =================================================== DEPOIMENTOS ======= */
  /* Seção comentada no index.html até o cliente enviar depoimentos reais.
     O estilo já está pronto: basta descomentar o bloco no HTML. */
  .quotes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(88%, 26rem);
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-block-end: var(--sp-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  @media (min-width: 62rem) {
    .quotes {
      grid-auto-flow: row;
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
      overflow: visible;
      margin-inline: 0;
      padding-inline: 0;
    }
  }

  .quote-card {
    scroll-snap-align: start;
    display: grid;
    gap: var(--sp-4);
    margin: 0;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border-radius: var(--r-lg);
  }

  .quote-card blockquote p {
    font-size: var(--fs-md);
    color: var(--text);

    &::before { content: '\201C'; }
    &::after  { content: '\201D'; }
  }

  .quote-card figcaption {
    display: grid;
    gap: 0.15rem;
    padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--line-soft);
    font-size: var(--fs-sm);
  }

  .quote-card figcaption b {
    font-family: var(--font-display);
    font-weight: 650;
    color: var(--text);
  }

  .quote-card figcaption span { color: var(--text-mute); }

  /* ====================================================== CLIENTES ====== */
  /* Mesmo mecanismo da faixa de atributos (.marquee): dois grupos identicos
     lado a lado e o trilho andando 50%, o que devolve o primeiro grupo
     exatamente onde o segundo estava. Sem JavaScript e sem salto na emenda. */
  .logos {
    --speed: 96s;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .logos__track {
    display: flex;
    inline-size: max-content;
    animation: marquee var(--speed) linear infinite;
  }

  .logos:hover .logos__track { animation-play-state: paused; }

  .logos__group {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-inline-end: var(--sp-4);
    padding-block: var(--sp-2);
  }

  /* chip branco puro: e por causa dele que as logos podem ser achatadas sobre
     branco na hora de gerar o arquivo, sem recorte de fundo em JPEG */
  .logo-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 10.625rem;
    block-size: 4.6875rem;
    padding: 0.6rem 1rem;
    border-radius: var(--r-md);
    background: #fff;
    border: 1px solid var(--line);
    border-block-end-color: var(--bisel);
    box-shadow: var(--sh-sm), inset 0 1px 0 #fff;
  }

  /* teto em rem, nao em porcentagem: dentro do chip a altura percentual nao
     resolve e a logo retrato vaza por baixo. 3.4375rem e a altura util do
     chip, ja descontado o padding. */
  .logo-chip img {
    max-inline-size: 100%;
    max-block-size: 3.4375rem;
  }

  /* brasao e logo quadrada ocupam mais area que um logotipo horizontal na
     mesma altura. Segurar a altura devolve o equilibrio optico da faixa. */
  .logo-chip--sq img { max-block-size: 2.9375rem; }

  @media (prefers-reduced-motion: reduce) {
    .logos { mask-image: none; overflow-x: auto; }
    .logos__track { animation: none; }
  }

  /* =================================================== ONDE ESTAMOS ====== */
  /* filete no topo: a secao anterior tambem e branca */
  .base { border-block-start: 1px solid var(--line); }

  .base__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); }

  .base__media {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-lg);
  }

  .base__media img { inline-size: 100%; }

  .locais { display: grid; gap: var(--sp-4); }

  .local {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.35rem var(--sp-4);
    padding: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem);
    border-radius: var(--r-lg);
  }

  .local__icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--indigo-50), var(--cyan-100));
    color: var(--indigo-600);
  }

  .local__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }

  .local h3 { font-size: var(--fs-lg); }

  .local address {
    font-style: normal;
    color: var(--text-soft);
    line-height: 1.55;
  }

  /* =========================================================== FAQ ======= */
  /* dúvidas de um lado, cotação do outro: quem terminou de ler já pede */
  .faq-layout { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); }

  @media (min-width: 62rem) {
    .faq-layout {
      grid-template-columns: 1.05fr 0.95fr;
      align-items: start;
    }
    .faq-layout__form {
      position: sticky;
      inset-block-start: calc(var(--header-h) + 2rem);
    }
  }

  .faq-layout__list > p { color: var(--text-soft); }

  .faq-layout__list a { color: var(--indigo-600); }

  .faq { display: grid; gap: var(--sp-3); }

  .faq__item {
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }

  .faq__item[open] {
    border-color: color-mix(in srgb, var(--indigo-600) 30%, var(--line));
    box-shadow: var(--sh-md), inset 0 1px 0 #fff;
  }

  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s var(--ease);

    &::-webkit-details-marker { display: none; }
    &:hover { color: var(--indigo-600); }
  }

  .faq__icon {
    position: relative;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--indigo-50);
    transition: background-color 0.25s var(--ease), transform 0.3s var(--ease);
  }

  .faq__icon::before,
  .faq__icon::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0.7rem;
    block-size: 2px;
    border-radius: 2px;
    background: var(--indigo-600);
    translate: -50% -50%;
    transition: transform 0.3s var(--ease), background-color 0.25s var(--ease);
  }

  .faq__icon::after { transform: rotate(90deg); }

  .faq__item[open] .faq__icon {
    background: var(--indigo-600);
    transform: rotate(180deg);
  }

  .faq__item[open] .faq__icon::before,
  .faq__item[open] .faq__icon::after { background: #fff; }

  .faq__item[open] .faq__icon::after { transform: rotate(0deg); }

  .faq__a {
    padding: 0 var(--sp-5) var(--sp-5);
    color: var(--text-soft);
  }

  .faq__a a { color: var(--indigo-600); font-weight: 550; }

  /* ======================================================== CTA FINAL ==== */
  /* sem foto: só o índigo da marca com um verniz platinado por cima */
  .cta::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(152deg, color-mix(in srgb, #fff 13%, transparent) 0%, transparent 40%),
      linear-gradient(332deg, color-mix(in srgb, #fff 6%, transparent) 0%, transparent 44%);
  }

  .cta__inner { text-align: center; max-width: 44rem; margin-inline: auto; }

  .cta h2 { font-size: var(--fs-3xl); }

  .cta p {
    margin-block-start: var(--sp-4);
    font-size: var(--fs-md);
  }

  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-block-start: var(--sp-6);
  }

  /* ============================================ PÁGINAS DE TEXTO LONGO === */
  /* Política de privacidade e afins: uma coluna estreita, hierarquia clara e
     nenhum enfeite competindo com a leitura. */
  .legal { padding-block-start: calc(var(--header-h) + var(--section-y)); }

  .legal h1 { font-size: var(--fs-3xl); }

  .legal__date {
    display: inline-block;
    margin-block-end: var(--sp-6);
    padding: 0.35rem 0.8rem;
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    color: var(--text-soft);
    background: var(--paper-alt);
    border: 1px solid var(--line);
  }

  .legal__body { color: var(--text-soft); }

  .legal__body h2 {
    margin-block: var(--sp-7) var(--sp-4);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--line);
    font-size: var(--fs-xl);
    color: var(--text);
  }

  .legal__body h3 {
    margin-block: var(--sp-5) var(--sp-3);
    font-size: var(--fs-md);
    color: var(--text);
  }

  .legal__body p { margin-block-start: var(--sp-3); }

  .legal__body ul {
    display: grid;
    gap: var(--sp-2);
    margin-block-start: var(--sp-3);
    padding-inline-start: var(--sp-5);
  }

  .legal__body li::marker { color: var(--indigo-300); }

  .legal__body b { color: var(--text); }

  .legal__body a {
    color: var(--indigo-600);
    font-weight: 550;
    overflow-wrap: anywhere;
  }

  .legal__cta {
    margin-block-start: var(--sp-7);
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    background: linear-gradient(178deg,
      var(--platina-1) 0%, var(--platina-2) 62%, var(--platina-3) 100%);
    border: 1px solid var(--line);
    border-block-end-color: var(--bisel);
    box-shadow: inset 0 1px 0 #fff;
    text-align: center;
    color: var(--text);
  }

  /* ================================================ PÁGINA DE OBRIGADO === */
  .thanks {
    display: grid;
    align-items: center;
    min-block-size: calc(100svh - var(--header-h) - 8rem);
    padding-block-start: calc(var(--header-h) + var(--section-y));
  }

  .thanks__inner {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
  }

  .thanks__check {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    margin: 0 auto var(--sp-5);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(140deg, var(--green-500), #0f7a3a);
    box-shadow: 0 14px 34px -14px rgb(16 110 55 / 0.9),
                inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
  }

  .thanks__check svg { inline-size: 1.9rem; block-size: 1.9rem; }

  .thanks h1 { font-size: var(--fs-3xl); color: #fff; }

  .thanks__lead {
    margin-block-start: var(--sp-4);
    font-size: var(--fs-md);
    color: var(--on-dark-soft);
  }

  .thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-3);
    margin-block-start: var(--sp-6);
  }

  .thanks__meta {
    display: grid;
    gap: var(--sp-4);
    margin-block-start: var(--sp-7);
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid color-mix(in srgb, #fff 14%, transparent);
    font-size: var(--fs-base);
  }

  @media (min-width: 34rem) {
    .thanks__meta { grid-auto-flow: column; grid-auto-columns: 1fr; }
  }

  .thanks__meta b {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--orange-400);
    margin-block-end: 0.35rem;
  }

  .thanks__meta a {
    color: var(--on-dark-soft);
    text-decoration: none;
    overflow-wrap: anywhere;

    &:hover { color: #fff; }
  }

  /* ========================================================= FOOTER ====== */
  .footer {
    background: var(--paper-alt);
    color: var(--text-soft);
    border-block-start: 1px solid var(--line);
    padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem) var(--sp-6);
    font-size: var(--fs-base);
  }

  .footer__top {
    display: grid;
    gap: var(--sp-6);
    padding-block-end: var(--sp-6);
    border-block-end: 1px solid var(--line);
  }

  .footer__brand p {
    margin-block-start: var(--sp-4);
    max-width: 26rem;
    color: var(--text-mute);
  }

  .footer__legal {
    margin-block-start: var(--sp-4);
    font-size: var(--fs-sm);
  }

  .footer__legal a {
    color: var(--indigo-600);
    font-weight: 550;
    text-decoration-line: underline;
    text-underline-offset: 0.25em;

    &:hover { color: var(--indigo-700); }
  }

  .footer h3 {
    font-size: var(--fs-sm);
    font-weight: 650;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text);
    margin-block-end: var(--sp-4);
  }

  .footer__links { display: grid; gap: 0.6rem; }

  .footer__links a,
  .footer__contact a {
    color: var(--text-soft);
    text-decoration: none;
    transition: color 0.2s var(--ease);

    &:hover { color: var(--indigo-600); }
  }

  .footer__contact { display: grid; gap: 0.75rem; }

  .footer__contact a {
    display: flex;
    align-items: center;
    gap: 0.6em;
  }

  /* Endereco tem duas linhas: o pino sobe para o topo do bloco. Precisa do
     .footer__contact na frente para vencer o align-items:center de
     .footer__contact a, que tem uma especificidade a mais. */
  .footer__contact .footer__addr {
    align-items: start;

    & svg { margin-block-start: 0.2rem; }
  }

  .footer__addr b {
    display: block;
    color: var(--text);
    font-weight: 600;
  }

  .footer__contact svg {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    color: var(--indigo-500);
    flex: none;
  }

  .footer__bottom {
    display: grid;
    gap: var(--sp-3);
    padding-block-start: var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-mute);
  }

  .footer__bottom a { color: var(--indigo-600); font-weight: 550; }

  @media (min-width: 48rem) {
    .footer__top { grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--sp-7); }
    .footer__bottom {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
    .footer__bottom > :last-child { text-align: right; }
  }

  /* ============================================================ FAB ====== */
  .fab {
    position: fixed;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    inset-inline-end: 1rem;
    z-index: 90;
    display: grid;
    place-items: center;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: 50%;
    background: var(--green-500);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 28px -8px rgb(16 110 55 / 0.7);
    opacity: 0;
    transform: translateY(1rem) scale(0.94);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.35s var(--ease-out),
                background-color 0.2s var(--ease);
  }

  .fab.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .fab:hover { background: #178f47; }

  .fab svg { inline-size: 1.65rem; block-size: 1.65rem; }
}

/* ======================================================================== */
@layer utilities {
  /* quebra manual que só vale no desktop: no mobile a linha é curta demais e
     um <br> fixo deixaria buraco no meio do título */
  .br-lg { display: none; }

  @media (min-width: 64rem) {
    .br-lg { display: inline; }
  }

  .text-center { text-align: center; }
  .mt-5 { margin-block-start: var(--sp-5); }
  .mt-6 { margin-block-start: var(--sp-6); }
  .hidden { display: none !important; }
}

/* ========================================================================
   BREAKPOINTS DE LAYOUT (min-width, mobile-first)
   ======================================================================== */

/* ------------------------------------------------------------------ MOBILE */
/* No telefone a página inteira vira uma coluna só. Texto centralizado lê
   melhor nessa largura do que alinhado à esquerda com sobra à direita. */
@media (max-width: 47.999rem) {
  /* o formulário da capa sai de cena: no telefone ele empurrava tudo para
     baixo. A cotação continua a um toque, no formulário ao lado do FAQ e nos
     botões de WhatsApp. O JS reaponta os links de #cotacao para lá. */
  .hero .quote { display: none; }

  .hero__copy { text-align: center; }

  .hero__copy .eyebrow,
  .hero__actions,
  .hero .chips { justify-content: center; }

  /* a subheadline sai: no telefone ela empurrava os botões para fora da
     primeira tela, e o título com os chips já entrega a mensagem */
  .hero__lead { display: none; }

  /* títulos de seção centralizados, o corpo do texto continua como está */
  #vantagens .section-head,
  #sobre .section-head { text-align: center; }

  #vantagens .section-head .eyebrow,
  #sobre .section-head .eyebrow { justify-content: center; }

  /* CNPJ, base e tempo de estrada saem da seção A empresa: são reforço, e o
     CNPJ continua no rodapé para quem procurar */
  .about__meta { display: none; }

  /* "Ficou alguma dúvida?", abaixo do acordeão */
  .faq-layout__list > p { text-align: center; }

  /* rodapé: só a coluna da marca e a base, as listas seguem alinhadas */
  .footer__brand { text-align: center; }
  .footer__brand p { margin-inline: auto; }
  .footer__bottom { text-align: center; }
}

@media (min-width: 48rem) {
  .hero__inner { gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
  .why { grid-template-columns: 0.82fr 1.18fr; align-items: center; }
  .about { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  .base__grid { grid-template-columns: 0.95fr 1.05fr; align-items: center; }
}

@media (min-width: 64rem) {
  .nav { display: block; }

  /* ONDE ESTAMOS: a coluna da foto sangra até a borda esquerda da janela e
     gruda enquanto os endereços rolam ao lado. Não precisa de margem negativa:
     basta o .wrap voltar a ocupar a seção inteira, que já tem a largura da
     janela. align-items:start é obrigatório, com center o sticky não gruda. */
  .base__grid {
    /* width e max-width, e nao os equivalentes logicos: o .wrap declara width,
       e misturar as duas formas nao vence o valor dele de forma confiavel */
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
  }

  .base__media {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
    /* o lado esquerdo sai da tela: arredondar ali não faria sentido */
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  /* A altura extra é o que dá percurso para a foto ficar parada: o sticky corre
     a diferença entre esta coluna e a altura da foto. O padding da direita
     alinha o fim do texto com a margem do resto da página, em porcentagem da
     própria área (metade da seção), sem vw, que contaria a barra de rolagem. */
  .base__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: min(100vh, 46rem);
    padding-inline: clamp(2rem, 1rem + 3vw, 4rem)
                    max(var(--gutter), calc(100% - var(--maxw) / 2));
  }

  .locais { gap: var(--sp-5); }

  /* a foto acompanha a leitura da linha condutora.
     align-items:start é obrigatório: com center o sticky não gruda. */
  .why { align-items: start; }
  .why__media { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
  .why__body { padding-block-start: 0.5rem; }
  .header .btn--cta { display: inline-flex; min-block-size: 2.75rem; padding-inline: 1.25rem; }
  .burger { display: none; }

  /* a coluna de texto acompanha a rolagem do hero enquanto o formulário,
     que é mais alto, corre ao lado */
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .hero__copy {
    max-width: none;
    position: sticky;
    /* offset menor = a coluna prende mais alto = mais curso antes de soltar */
    inset-block-start: calc(var(--header-h) + 1rem);
  }

  /* O curso do sticky é a altura da linha menos a altura da própria coluna.
     Esta folga abaixo do formulário estica a linha e, com ela, o tempo que o
     texto fica preso. */
  .hero__inner > .quote { margin-block-end: clamp(2rem, 4vw, 5rem); }

  /* no desktop o FAB perde a função: o CTA fica sempre visível no header */
  .fab { inset-block-end: 1.5rem; inset-inline-end: 1.5rem; }
}

@media (min-width: 80rem) {
  .hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: 4.5rem; }
}

/* impressão: enxuto e legível */
@media print {
  .header, .drawer, .fab, .marquee, .hero__media, .quote,
  .hero__cue-wrap, .steps__flow, .steps__tip { display: none !important; }
  .section--dark, .hero { background: #fff !important; color: #000 !important; }
  .section--dark *, .hero * { color: #000 !important; }
}