/* ==========================================================================
   CHICO'S FRETES — Folha de estilo principal
   --------------------------------------------------------------------------
   Arquitetura em camadas (@layer):
     reset → tokens → base → layout → components → utilities → responsive
   Escala de espaçamento: Fibonacci (3,5,8,13,21,34,55,89,144,233)
   Tokens semânticos: --ink, --bg, --surface, --line, --brand, --accent
   Responsividade de COMPONENTE: container queries
   Responsividade de PÁGINA: media queries
   Propriedades lógicas: margin-inline / padding-block / inset-* (RTL-ready)
   Tema e densidade: [data-theme] / [data-density] redefinem só os tokens
   ========================================================================== */

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

/* ==========================================================================
   1. RESET
   ========================================================================== */
@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--f7);
  }

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

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  svg {
    fill: currentColor;
  }

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

  ul,
  ol {
    list-style: none;
  }

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

  button {
    cursor: pointer;
    border: 0;
    background: none;
  }

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

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

  @media (prefers-reduced-motion: reduce) {

    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
@layer tokens {

  :root {
    /* ---- escala Fibonacci (px) ---- */
    --f-1: 2px;
    --f0: 3px;
    --f1: 5px;
    --f2: 8px;
    --f3: 13px;
    --f4: 21px;
    --f5: 34px;
    --f6: 55px;
    --f7: 89px;
    --f8: 144px;
    --f9: 233px;

    /* ---- raios (Fibonacci) ---- */
    --r-sm: 8px;
    --r-md: 13px;
    --r-lg: 21px;
    --r-xl: 34px;
    --r-pill: 999px;

    /* ---- paleta base (extraída da logo) ---- */
    --c-navy-900: #131f2e;
    --c-navy-800: #1b2a3d;
    --c-navy-700: #1f2d40;
    --c-navy-600: #2a3d54;
    --c-navy-500: #3a5070;
    --c-gray-700: #4a5560;
    --c-gray-600: #5b6772;
    --c-gray-500: #6e7c8a;
    --c-gray-300: #aab2bb;
    --c-gray-200: #dde2e8;
    --c-gray-100: #eef2f6;
    --c-gray-50: #f3f6f9;
    --c-orange-600: #cf6512;
    --c-orange-500: #e87722;
    --c-orange-400: #f08a3c;
    --c-white: #ffffff;
    --c-wa: #25d366;
    --c-wa-dark: #1da851;
    --c-danger: #e23b3b;

    /* ---- tipografia fluida (clamp) ---- */
    --fs-xs: .8rem;
    --fs-sm: .9rem;
    --fs-base: clamp(1rem, .96rem + .2vw, 1.08rem);
    --fs-lg: clamp(1.1rem, 1rem + .5vw, 1.25rem);
    --fs-xl: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
    --fs-2xl: clamp(1.7rem, 1.3rem + 2vw, 2.6rem);
    --fs-3xl: clamp(2.1rem, 1.4rem + 3.4vw, 3.7rem);

    --ff-base: 'Poppins', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* ---- layout ---- */
    --maxw: 1180px;
    --maxw-narrow: 760px;
    --gutter: clamp(var(--f4), 5vw, var(--f6));
    --section-y: clamp(var(--f6), 8vw, var(--f8));

    /* ---- sombras ---- */
    --sh-sm: 0 1px 2px rgba(19, 31, 46, .08), 0 2px 6px rgba(19, 31, 46, .06);
    --sh-md: 0 4px 12px rgba(19, 31, 46, .10), 0 8px 24px rgba(19, 31, 46, .08);
    --sh-lg: 0 12px 28px rgba(19, 31, 46, .16), 0 20px 48px rgba(19, 31, 46, .12);
    --sh-accent: 0 8px 22px rgba(232, 119, 34, .32);

    /* ---- transições ---- */
    --t-fast: .16s ease;
    --t-base: .24s cubic-bezier(.2, .7, .2, 1);
    --t-slow: .5s cubic-bezier(.2, .7, .2, 1);
  }

  /* ---- tokens SEMÂNTICOS (tema claro = padrão da marca) ---- */
  :root,
  [data-theme="light"] {
    --ink: #1b2330;
    --ink-soft: var(--c-gray-600);
    --bg: var(--c-white);
    --surface: #e8eef4;
    --surface-2: #d8e1ea;
    --line: var(--c-gray-200);
    --brand: var(--c-navy-600);
    --brand-strong: var(--c-navy-900);
    --accent: var(--c-orange-500);
    --accent-strong: var(--c-orange-600);
    --focus: var(--c-orange-500);
    --on-brand: #ffffff;
    --hero-from: rgba(19, 31, 46, .92);
    --hero-mid: rgba(31, 45, 64, .72);
    --hero-to: rgba(19, 31, 46, .40);
  }

  /* ---- tema ESCURO (redefine só tokens) ---- */
  [data-theme="dark"] {
    --ink: #e8edf2;
    --ink-soft: #aab6c2;
    --bg: #0f1722;
    --surface: #141f2c;
    --surface-2: #1b2a3a;
    --line: #26384b;
    --brand: #cdd9e6;
    --brand-strong: #ffffff;
    --accent: var(--c-orange-400);
    --accent-strong: var(--c-orange-500);
    --on-brand: #0f1722;
    --hero-from: rgba(6, 12, 20, .94);
    --hero-mid: rgba(12, 22, 34, .80);
    --hero-to: rgba(6, 12, 20, .55);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-md: 0 6px 18px rgba(0, 0, 0, .45);
    --sh-lg: 0 16px 40px rgba(0, 0, 0, .55);
  }

  /* ---- densidade (opcional) ---- */
  [data-density="compact"] {
    --section-y: clamp(var(--f5), 6vw, var(--f7));
  }
}

/* ==========================================================================
   3. BASE
   ========================================================================== */
@layer base {

  body {
    font-family: var(--ff-base);
    font-size: var(--fs-base);
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1.14;
    letter-spacing: -.01em;
    color: var(--brand);
    font-weight: var(--fw-black);
    text-wrap: balance;
  }

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

  h2 {
    font-size: var(--fs-2xl);
  }

  h3 {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
  }

  p {
    color: var(--ink-soft);
    text-wrap: pretty;
  }

  strong,
  b {
    color: var(--ink);
    font-weight: var(--fw-bold);
  }

  .ic {
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: 0 0 auto;
  }

  .skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--f3);
    z-index: 200;
    background: var(--brand);
    color: #fff;
    padding-block: var(--f2);
    padding-inline: var(--f4);
    border-radius: var(--r-sm);
    transition: var(--t-base);
  }

  .skip-link:focus {
    inset-block-start: var(--f3);
  }
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
@layer layout {

  .section {
    padding-block: var(--section-y);
    padding-inline: var(--gutter);
  }

  .section__head {
    max-inline-size: var(--maxw-narrow);
    margin-inline: auto;
    text-align: center;
    margin-block-end: var(--f6);
  }

  .section__title {
    margin-block-end: var(--f3);
  }

  .section__title--light {
    color: #fff;
  }

  .section__sub {
    font-size: var(--fs-lg);
    color: var(--ink-soft);
  }

  .section__sub--placeholder {
    font-size: var(--fs-sm);
    color: var(--accent);
    font-style: italic;
  }

  .section__head--light .section__title {
    color: #fff;
  }

  .section__head--light .section__sub {
    color: rgba(255, 255, 255, .85);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--f2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--f2);
  }

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

  .eyebrow .dot {
    inline-size: var(--f2);
    block-size: var(--f2);
    border-radius: 50%;
    background: var(--accent);
  }
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */
@layer components {

  /* ---------------------------------------------------------------- BOTÕES */
  .btn {
    --btn-py: var(--f3);
    --btn-px: var(--f5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--f2);
    padding-block: var(--btn-py);
    padding-inline: var(--btn-px);
    border-radius: var(--r-md);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    line-height: 1.1;
    white-space: nowrap;
    transition: var(--t-base);
    will-change: transform;
  }

  .btn--sm {
    --btn-py: var(--f2);
    --btn-px: var(--f3);
    font-size: var(--fs-xs);
  }

  .btn--lg {
    --btn-py: var(--f3);
    --btn-px: var(--f6);
    font-size: var(--fs-base);
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn .ic {
    inline-size: 1.15em;
    block-size: 1.15em;
  }

  .btn--wa {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--sh-accent);
  }

  .btn--wa:hover {
    background: var(--accent-strong);
    transform: translateY(-2px);
    box-shadow: var(--sh-lg);
  }

  .btn--wa:active {
    transform: translateY(0);
  }

  .btn--ghost {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .45);
  }

  .btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .8);
  }

  .btn--outline {
    color: var(--brand);
    border: 2px solid var(--brand);
  }

  .btn--outline:hover {
    background: var(--brand);
    color: var(--on-brand);
  }

  /* --------------------------------------------------------------- TOPBAR */
  .topbar {
    background: var(--brand-strong);
    color: rgba(255, 255, 255, .85);
    font-size: var(--fs-xs);
  }

  .topbar__wrap {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--f4);
    padding-block: var(--f1);
    padding-inline: var(--gutter);
  }

  .topbar__info {
    display: flex;
    gap: var(--f5);
  }

  .topbar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--f1);
  }

  .topbar__item .ic {
    inline-size: 1em;
    block-size: 1em;
    color: var(--accent);
  }

  .topbar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--f1);
    font-weight: var(--fw-medium);
    color: #fff;
  }

  .topbar__link:hover {
    color: var(--accent);
  }

  .topbar__link .ic {
    inline-size: 1em;
    block-size: 1em;
  }

  /* ---------------------------------------------------------- HEADER / NAV */
  /* transparente no topo (flutua sobre o hero); ganha fundo só ao rolar */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background: transparent;
    border-block-end: 1px solid transparent;
    transition: var(--t-base);
    /* puxa o hero pra cima, sobrepondo o cabeçalho à foto */
    margin-block-end: calc(-1 * (var(--f6) + var(--f2) + var(--f2)));
  }

  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: var(--sh-sm);
    border-block-end-color: var(--line);
  }

  /* sobre o hero (transparente): wordmark branca. Ao rolar: logo no header claro */
  .nav__brand {
    display: inline-flex;
    align-items: center;
  }

  .nav__brand-text {
    font-weight: var(--fw-black);
    font-size: var(--fs-lg);
    color: #fff;
    letter-spacing: -.01em;
  }

  .nav__brand-logo {
    display: none;
  }

  .site-header.is-scrolled .nav__brand-logo {
    display: block;
  }

  .site-header.is-scrolled .nav__brand-text {
    display: none;
  }

  .nav {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--f4);
    padding-block: var(--f2);
    padding-inline: var(--gutter);
  }

  .nav__brand-logo {
    block-size: var(--f6);
    inline-size: auto;
  }

  .nav__menu {
    display: flex;
    align-items: center;
    gap: var(--f5);
  }

  .nav__menu a {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: #fff;
    transition: var(--t-fast);
    position: relative;
  }

  /* com fundo (rolado), volta ao texto escuro sobre claro */
  .site-header.is-scrolled .nav__menu a {
    color: var(--ink);
  }

  .site-header.is-scrolled .nav__menu-cta a {
    color: #fff;
  }

  .nav__menu a:hover {
    color: var(--accent);
  }

  /* estado ativo via scrollspy */
  .nav__menu a.is-active {
    color: var(--accent);
  }

  .nav__menu a.is-active::after {
    content: "";
    position: absolute;
    inset-block-end: -6px;
    inset-inline: 0;
    block-size: 2px;
    background: var(--accent);
    border-radius: 2px;
  }

  .nav__menu-cta a {
    color: #fff;
  }

  .nav__menu-cta a.is-active::after {
    display: none;
  }

  .nav__burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: var(--f2);
    z-index: 120;
  }

  .nav__burger span {
    inline-size: 26px;
    block-size: 3px;
    background: #fff;
    border-radius: 2px;
    transition: var(--t-base);
    transform-origin: center;
  }

  .site-header.is-scrolled .nav__burger span {
    background: var(--brand);
  }

  .nav__burger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav__burger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .nav__burger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ----------------------------------------------------------------- HERO */
  .hero {
    position: relative;
    display: grid;
    align-items: center;
    min-block-size: 100svh;
    color: #fff;
    isolation: isolate;
    overflow: hidden;
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url('../assets/hero.webp') center / cover no-repeat;
    transform: scale(1.05);
    animation: heroZoom 18s ease-in-out infinite alternate;
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(108deg, var(--hero-from) 0%, var(--hero-mid) 48%, var(--hero-to) 100%);
  }

  .hero__wrap {
    max-inline-size: var(--maxw);
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: var(--f8) var(--f7);
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--f2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    padding-block: var(--f1);
    padding-inline: var(--f3);
    border-radius: var(--r-pill);
    margin-block-end: var(--f4);
  }

  .hero__eyebrow .dot {
    inline-size: var(--f2);
    block-size: var(--f2);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(232, 119, 34, .25);
  }

  .hero__title {
    color: #fff;
    max-inline-size: 17ch;
    margin-block-end: var(--f4);
  }

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

  .hero__lead {
    font-size: var(--fs-lg);
    color: rgba(255, 255, 255, .92);
    max-inline-size: 54ch;
    margin-block-end: var(--f5);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--f3);
    margin-block-end: var(--f6);
  }

  .hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--f4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
  }

  .hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: var(--f2);
  }

  .hero__badges .ic {
    inline-size: 1.2em;
    block-size: 1.2em;
    color: var(--accent);
  }

  .hero__scroll {
    position: absolute;
    inset-block-end: var(--f4);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 26px;
    block-size: 42px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: var(--r-pill);
  }

  .hero__scroll span {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 4px;
    block-size: 8px;
    background: #fff;
    border-radius: 2px;
    animation: scrollDot 1.8s ease infinite;
  }

  /* ---------------------------------------------------------------- STATS */
  .stats {
    background: var(--brand);
    color: #fff;
    padding-block: var(--f6);
    padding-inline: var(--gutter);
  }

  .stats__wrap {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--f4);
    text-align: center;
  }

  .stat {
    padding: var(--f3);
  }

  .stat__num {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: var(--fw-black);
    color: var(--accent);
    line-height: 1;
  }

  .stat__label {
    margin-block-start: var(--f2);
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .82);
  }

  /* ------------------------------------------------------------- SERVICES */
  .services__grid {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--f5);
  }

  .scard {
    container-type: inline-size;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    transition: var(--t-base);
    display: flex;
    flex-direction: column;
  }

  .scard:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-lg);
    border-color: transparent;
  }

  .scard__media {
    position: relative;
    overflow: hidden;
  }

  .scard__media img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    inline-size: 100%;
    transition: transform var(--t-slow);
  }

  .scard:hover .scard__media img {
    transform: scale(1.06);
  }

  .scard__tag {
    position: absolute;
    inset-block-start: var(--f3);
    inset-inline-start: var(--f3);
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    padding-block: var(--f0);
    padding-inline: var(--f3);
    border-radius: var(--r-pill);
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .scard__body {
    padding: var(--f5);
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .scard__title {
    color: var(--brand);
    margin-block-end: var(--f2);
  }

  .scard__text {
    font-size: var(--fs-sm);
    margin-block-end: var(--f3);
  }

  .scard__list {
    margin-block-end: var(--f4);
  }

  .scard__list li {
    position: relative;
    padding-inline-start: var(--f4);
    margin-block-end: var(--f1);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
  }

  .scard__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: .55em;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 2px;
    background: var(--accent);
  }

  .scard__link {
    margin-block-start: auto;
    font-weight: var(--fw-bold);
    color: var(--accent);
    font-size: var(--fs-sm);
    display: inline-flex;
    gap: var(--f1);
    transition: var(--t-fast);
  }

  .scard__link:hover {
    gap: var(--f3);
  }

  /* responsividade de COMPONENTE (container query) */
  @container (max-width: 320px) {

    .scard__body {
      padding: var(--f4);
    }

    .scard__title {
      font-size: var(--fs-base);
    }
  }

  /* -------------------------------------------------------------- PROCESS */
  .process {
    background: var(--surface);
  }

  .process__list {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--f5);
    counter-reset: step;
  }

  .process__step {
    position: relative;
    text-align: center;
    padding: var(--f4);
  }

  .process__step::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--f6) / 2);
    inset-inline-start: 60%;
    inline-size: 80%;
    block-size: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  }

  .process__step:last-child::after {
    display: none;
  }

  .process__num {
    inline-size: var(--f6);
    block-size: var(--f6);
    margin-inline: auto;
    margin-block-end: var(--f3);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-xl);
    font-weight: var(--fw-black);
    box-shadow: var(--sh-accent);
    position: relative;
    z-index: 1;
  }

  .process__title {
    color: var(--brand);
    margin-block-end: var(--f1);
    font-size: var(--fs-base);
  }

  .process__text {
    font-size: var(--fs-sm);
  }

  /* ------------------------------------------------------------- BENEFITS */
  .benefits__grid {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--f5);
  }

  .benefit {
    display: flex;
    flex-direction: column;
    gap: var(--f3);
    padding: var(--f5);
    border-radius: var(--r-lg);
    background: var(--bg);
    border: 1px solid var(--line);
    transition: var(--t-base);
  }

  .benefit:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-4px);
  }

  .benefit__ic {
    inline-size: var(--f6);
    block-size: var(--f6);
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--brand);
    transition: var(--t-base);
  }

  .benefit__ic svg {
    inline-size: 26px;
    block-size: 26px;
  }

  .benefit:hover .benefit__ic {
    background: var(--accent);
    color: #fff;
  }

  .benefit__title {
    color: var(--brand);
    font-size: var(--fs-base);
  }

  .benefit__text {
    font-size: var(--fs-sm);
  }

  /* ------------------------------------------------------------- COMPARE */
  .compare {
    background: var(--surface);
  }

  .compare__table {
    max-inline-size: var(--maxw-narrow);
    margin-inline: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-sm);
    background: var(--bg);
  }

  .compare__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: center;
  }

  .compare__row + .compare__row {
    border-block-start: 1px solid var(--line);
  }

  .compare__row--head {
    background: var(--brand);
    color: #fff;
  }

  .compare__cell {
    padding-block: var(--f3);
    padding-inline: var(--f4);
    font-size: var(--fs-sm);
  }

  .compare__row--head .compare__cell {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .compare__cell--feature {
    color: var(--ink);
    font-weight: var(--fw-medium);
  }

  .compare__row--head .compare__cell--feature {
    color: #fff;
  }

  .compare__cell--us {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    color: var(--ink);
    text-align: center;
    border-inline: 1px solid var(--line);
  }

  .compare__row--head .compare__cell--us {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
  }

  .compare__cell--them {
    color: var(--ink-soft);
    text-align: center;
  }

  .compare__cta {
    margin-block-start: var(--f6);
    text-align: center;
  }

  /* ---------------------------------------------------------------- FLEET */
  .fleet__wrap {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--f7);
    align-items: center;
  }

  .fleet__media img {
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    inline-size: 100%;
  }

  .fleet__text {
    margin-block: var(--f3) var(--f4);
  }

  .fleet__specs {
    display: grid;
    gap: var(--f2);
    margin-block-end: var(--f5);
  }

  .fleet__specs li {
    display: flex;
    justify-content: space-between;
    gap: var(--f3);
    padding-block: var(--f2);
    border-block-end: 1px solid var(--line);
    font-size: var(--fs-sm);
  }

  .fleet__spec-k {
    color: var(--ink-soft);
  }

  .fleet__spec-v {
    color: var(--ink);
    font-weight: var(--fw-medium);
    text-align: end;
  }

  /* ----------------------------------------------------------- QUOTE/FORM */
  .quote {
    background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  }

  .quote__wrap {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--f7);
    align-items: center;
  }

  .quote__text {
    color: rgba(255, 255, 255, .86);
    font-size: var(--fs-lg);
    margin-block: var(--f3) var(--f5);
  }

  .quote__bullets {
    display: grid;
    gap: var(--f2);
  }

  .quote__bullets li {
    display: inline-flex;
    align-items: center;
    gap: var(--f2);
    color: #fff;
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
  }

  .quote__bullets .ic {
    inline-size: 1.2em;
    block-size: 1.2em;
    color: var(--accent);
  }

  .quote__card {
    background: var(--bg);
    border-radius: var(--r-xl);
    padding: var(--f6);
    box-shadow: var(--sh-lg);
  }

  .quote__card-title {
    color: var(--brand);
    margin-block-end: var(--f4);
  }

  .form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--f3);
  }

  .form__field {
    margin-block-end: var(--f3);
    display: flex;
    flex-direction: column;
    gap: var(--f1);
  }

  .form__field label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--ink);
  }

  .form__field input,
  .form__field select,
  .form__field textarea {
    inline-size: 100%;
    padding-block: var(--f3);
    padding-inline: var(--f3);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    transition: var(--t-fast);
    font-size: var(--fs-sm);
  }

  .form__field textarea {
    resize: vertical;
    min-block-size: var(--f7);
  }

  .form__field input:focus,
  .form__field select:focus,
  .form__field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232, 119, 34, .18);
    background: var(--bg);
  }

  .form__field.has-error input,
  .form__field.has-error select {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgba(226, 59, 59, .15);
  }

  .form__error {
    font-size: var(--fs-xs);
    color: var(--c-danger);
    min-block-size: 1em;
  }

  .form__counter {
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    text-align: end;
  }

  .form__note {
    margin-block-start: var(--f2);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
    text-align: center;
  }

  /* ------------------------------------------------------------- COVERAGE */
  .coverage__states {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--f5);
  }

  .coverage__state {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--f5);
    box-shadow: var(--sh-sm);
  }

  .coverage__state h3 {
    color: var(--brand);
    margin-block-end: var(--f3);
    padding-block-end: var(--f2);
    border-block-end: 2px solid var(--accent);
    display: inline-block;
  }

  .coverage__state ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--f1) var(--f3);
  }

  .coverage__state li {
    position: relative;
    padding-inline-start: var(--f3);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
  }

  .coverage__state li::before {
    content: "›";
    position: absolute;
    inset-inline-start: 0;
    color: var(--accent);
    font-weight: var(--fw-bold);
  }

  /* -------------------------------------------------------------- GALLERY */
  .gallery {
    background: var(--surface);
  }

  .gallery__grid {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--f3);
  }

  .gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
    cursor: zoom-in;
    background: var(--surface-2);
  }

  .gallery__item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    inline-size: 100%;
    transition: transform var(--t-slow), filter var(--t-base);
    filter: saturate(.9);
  }

  .gallery__item:hover img {
    transform: scale(1.06);
    filter: saturate(1.05);
  }

  .gallery__item::after {
    content: "⤢";
    position: absolute;
    inset-block-end: var(--f2);
    inset-inline-end: var(--f2);
    inline-size: var(--f5);
    block-size: var(--f5);
    display: grid;
    place-items: center;
    background: rgba(19, 31, 46, .7);
    color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: var(--t-base);
    font-size: var(--fs-base);
  }

  .gallery__item:hover::after {
    opacity: 1;
  }

  /* ----------------------------------------------------------------- TIPS */
  .tips {
    background: var(--bg);
  }

  .tips__grid {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--f4);
  }

  .tip {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--f5);
    box-shadow: var(--sh-sm);
    transition: var(--t-base);
    position: relative;
    overflow: hidden;
  }

  .tip:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
  }

  .tip__num {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: color-mix(in srgb, var(--accent) 35%, transparent);
    line-height: 1;
    margin-block-end: var(--f2);
  }

  .tip__title {
    color: var(--brand);
    font-size: var(--fs-base);
    margin-block-end: var(--f1);
  }

  .tip__text {
    font-size: var(--fs-sm);
  }

  /* --------------------------------------------------------- TESTIMONIALS */
  .testimonials {
    background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  }

  .testi {
    max-inline-size: var(--maxw-narrow);
    margin-inline: auto;
    overflow: hidden;
  }

  .testi__track {
    display: flex;
    transition: transform var(--t-slow);
  }

  .testi__slide {
    flex: 0 0 100%;
    text-align: center;
    padding-inline: var(--f4);
  }

  .testi__stars {
    color: var(--accent);
    font-size: var(--fs-xl);
    letter-spacing: 2px;
    margin-block-end: var(--f3);
  }

  .testi__quote {
    color: #fff;
    font-size: var(--fs-xl);
    line-height: 1.5;
    font-weight: var(--fw-medium);
  }

  .testi__quote::before {
    content: "\201C";
  }

  .testi__quote::after {
    content: "\201D";
  }

  .testi__author {
    margin-block-start: var(--f4);
    color: var(--accent);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
  }

  .testi__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--f4);
    margin-block-start: var(--f6);
  }

  .testi__btn {
    inline-size: var(--f6);
    block-size: var(--f6);
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: var(--fs-xl);
    line-height: 1;
    transition: var(--t-base);
    border: 1px solid rgba(255, 255, 255, .25);
  }

  .testi__btn:hover {
    background: var(--accent);
    border-color: var(--accent);
  }

  .testi__dots {
    display: flex;
    gap: var(--f2);
  }

  .testi__dot {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: var(--t-base);
  }

  .testi__dot.is-active {
    background: var(--accent);
    inline-size: 26px;
    border-radius: var(--r-pill);
  }

  /* ---------------------------------------------------------------- ABOUT */
  .about {
    background: var(--surface);
  }

  .about__wrap {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: var(--f7);
    align-items: center;
  }

  .about__media {
    position: relative;
  }

  .about__media img {
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    inline-size: 100%;
  }

  .about__badge {
    position: absolute;
    inset-block-end: calc(var(--f5) * -1);
    inset-inline-end: var(--f4);
    background: var(--accent);
    color: #fff;
    padding-block: var(--f4);
    padding-inline: var(--f5);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    text-align: center;
    line-height: 1.2;
  }

  .about__badge strong {
    display: block;
    font-size: var(--fs-xl);
    color: #fff;
  }

  .about__badge span {
    font-size: var(--fs-sm);
  }

  .about__text {
    margin-block-end: var(--f3);
    font-size: var(--fs-base);
  }

  .about__content .btn {
    margin-block-start: var(--f3);
  }

  /* ------------------------------------------------------------------ FAQ */
  .faq__list {
    max-inline-size: var(--maxw-narrow);
    margin-inline: auto;
    display: grid;
    gap: var(--f2);
  }

  .faq__item {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--bg);
    transition: var(--t-base);
  }

  .faq__item.is-open {
    border-color: var(--accent);
    box-shadow: var(--sh-sm);
  }

  .faq__q {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--f3);
    padding: var(--f4);
    text-align: start;
    font-weight: var(--fw-bold);
    color: var(--brand);
    font-size: var(--fs-base);
  }

  .faq__icon {
    position: relative;
    inline-size: var(--f4);
    block-size: var(--f4);
    flex: 0 0 auto;
  }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    background: var(--accent);
    border-radius: 2px;
    transition: var(--t-base);
  }

  .faq__icon::before {
    inline-size: 14px;
    block-size: 2.5px;
    transform: translate(-50%, -50%);
  }

  .faq__icon::after {
    inline-size: 2.5px;
    block-size: 14px;
    transform: translate(-50%, -50%);
  }

  .faq__item.is-open .faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }

  .faq__a {
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size var(--t-slow);
  }

  .faq__a p {
    padding-block: 0 var(--f4);
    padding-inline: var(--f4);
    font-size: var(--fs-sm);
  }

  /* ------------------------------------------------------------ FINAL CTA */
  .final-cta {
    background: linear-gradient(120deg, var(--accent-strong), var(--accent));
    color: #fff;
    padding-block: var(--section-y);
    padding-inline: var(--gutter);
    text-align: center;
  }

  .final-cta__wrap {
    max-inline-size: var(--maxw-narrow);
    margin-inline: auto;
  }

  .final-cta__title {
    color: #fff;
    margin-block-end: var(--f3);
  }

  .final-cta__text {
    color: rgba(255, 255, 255, .92);
    font-size: var(--fs-lg);
    margin-block-end: var(--f5);
  }

  .final-cta .btn--wa {
    background: #fff;
    color: var(--accent-strong);
    box-shadow: var(--sh-lg);
  }

  .final-cta .btn--wa:hover {
    background: var(--brand-strong);
    color: #fff;
  }

  /* --------------------------------------------------------------- FOOTER */
  .site-footer {
    background: var(--brand-strong);
    color: rgba(255, 255, 255, .78);
    padding-block: var(--f7) var(--f5);
    padding-inline: var(--gutter);
  }

  .site-footer__grid {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--f6);
  }

  .site-footer__name {
    display: block;
    font-weight: var(--fw-black);
    font-size: var(--fs-xl);
    color: #fff;
    letter-spacing: -.01em;
    margin-block-end: var(--f3);
  }

  .site-footer__about {
    font-size: var(--fs-sm);
    max-inline-size: 36ch;
  }

  .site-footer__social {
    margin-block-start: var(--f3);
    display: flex;
    gap: var(--f2);
  }

  .site-footer__social a {
    inline-size: var(--f6);
    block-size: var(--f6);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    transition: var(--t-base);
  }

  .site-footer__social a:hover {
    background: var(--c-wa);
  }

  .site-footer__social svg {
    inline-size: 20px;
    block-size: 20px;
  }

  .site-footer__title {
    color: #fff;
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-block-end: var(--f3);
  }

  .site-footer__links {
    display: grid;
    gap: var(--f2);
  }

  .site-footer__links a,
  .site-footer__links span {
    font-size: var(--fs-sm);
    color: rgba(255, 255, 255, .72);
    transition: var(--t-fast);
  }

  .site-footer__links a:hover {
    color: var(--accent);
  }

  .site-footer__bottom {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    margin-block-start: var(--f6);
    padding-block-start: var(--f4);
    border-block-start: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--f2);
    font-size: var(--fs-xs);
    color: rgba(255, 255, 255, .55);
  }

  /* ----------------------------------------------------------- FLUTUANTES */
  .wa-float {
    position: fixed;
    inset-block-end: var(--f4);
    inset-inline-end: var(--f4);
    z-index: 90;
    inline-size: var(--f7);
    block-size: var(--f7);
    border-radius: 50%;
    background: var(--c-wa);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--sh-lg);
    transition: var(--t-base);
  }

  .wa-float:hover {
    background: var(--c-wa-dark);
    transform: scale(1.08);
  }

  .wa-float svg {
    inline-size: 32px;
    block-size: 32px;
  }

  .wa-float__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
    animation: waPulse 2.2s ease-out infinite;
  }

  .to-top {
    position: fixed;
    inset-block-end: var(--f4);
    inset-inline-start: var(--f4);
    z-index: 90;
    inline-size: var(--f6);
    block-size: var(--f6);
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--sh-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: var(--t-base);
  }

  .to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .to-top:hover {
    background: var(--accent);
  }

  .to-top svg {
    inline-size: 22px;
    block-size: 22px;
  }

  /* ------------------------------------------------------------- LIGHTBOX */
  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: rgba(8, 14, 22, .92);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--t-base);
    padding: var(--gutter);
  }

  .lightbox.is-open {
    opacity: 1;
    visibility: visible;
  }

  .lightbox__img {
    max-inline-size: min(92vw, 1100px);
    max-block-size: 86vh;
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    object-fit: contain;
  }

  .lightbox__close {
    position: absolute;
    inset-block-start: var(--f4);
    inset-inline-end: var(--f4);
    inline-size: var(--f6);
    block-size: var(--f6);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: var(--fs-2xl);
    line-height: 1;
  }

  .lightbox__close:hover {
    background: var(--accent);
  }

  .lightbox__nav {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: var(--f6);
    block-size: var(--f6);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: var(--fs-2xl);
    line-height: 1;
  }

  .lightbox__nav:hover {
    background: var(--accent);
  }

  .lightbox__nav--prev {
    inset-inline-start: var(--f4);
  }

  .lightbox__nav--next {
    inset-inline-end: var(--f4);
  }
}

/* ==========================================================================
   6. UTILITIES
   ========================================================================== */
@layer utilities {

  .u-hide {
    display: none !important;
  }

  .u-center {
    text-align: center;
  }

  .u-mt-0 {
    margin-block-start: 0;
  }

  /* reveal on scroll */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--t-slow), transform var(--t-slow);
    will-change: opacity, transform;
  }

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

  body.no-scroll {
    overflow: hidden;
  }
}

/* ==========================================================================
   7. KEYFRAMES
   ========================================================================== */
@keyframes heroZoom {
  from {
    transform: scale(1.05);
  }

  to {
    transform: scale(1.14);
  }
}

@keyframes scrollDot {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }

  40% {
    opacity: 1;
  }

  80% {
    opacity: 0;
    transform: translate(-50%, 12px);
  }

  100% {
    opacity: 0;
  }
}

@keyframes waPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
  }

  70% {
    box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* ==========================================================================
   8. RESPONSIVO (layout de página)
   ========================================================================== */
@layer responsive {

  @media (max-width: 992px) {

    .fleet__wrap,
    .quote__wrap,
    .about__wrap {
      grid-template-columns: 1fr;
      gap: var(--f5);
    }

    .about__media {
      max-inline-size: 460px;
    }

    .about__badge {
      inset-block-end: var(--f4);
    }

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

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

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

    .process__step::after {
      display: none;
    }

    .stats__wrap {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--f5);
    }

    .site-footer__grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--f5);
    }

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

  @media (max-width: 768px) {

    .topbar__item--hide {
      display: none;
    }

    .nav__burger {
      display: flex;
    }

    .nav__menu {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: min(80vw, 340px);
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: var(--f4);
      padding-block: var(--f7);
      padding-inline: var(--f6);
      background: var(--brand-strong);
      transform: translateX(105%);
      transition: transform var(--t-base);
      box-shadow: var(--sh-lg);
      z-index: 110;
    }

    .nav__menu.is-open {
      transform: translateX(0);
    }

    .nav__menu a {
      color: #fff;
      font-size: var(--fs-lg);
    }

    .nav__menu a.is-active::after {
      display: none;
    }

    .nav__menu-cta {
      margin-block-start: var(--f3);
    }

    .nav__menu-cta a {
      font-size: var(--fs-base);
    }

    .nav__burger.is-open span {
      background: #fff;
    }
  }

  @media (max-width: 600px) {

    .services__grid,
    .benefits__grid,
    .coverage__states,
    .process__list,
    .gallery__grid,
    .tips__grid {
      grid-template-columns: 1fr;
    }

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

    .quote__card {
      padding: var(--f5);
    }

    .site-footer__grid {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .site-footer__about {
      margin-inline: auto;
    }

    .site-footer__social {
      justify-content: center;
    }

    .site-footer__bottom {
      justify-content: center;
      text-align: center;
    }

    .hero__actions .btn {
      flex: 1 1 100%;
    }

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

    .coverage__state ul {
      grid-template-columns: 1fr;
    }

    .compare__cell {
      padding-inline: var(--f2);
      font-size: var(--fs-xs);
    }

    .about__badge {
      position: static;
      margin-block-start: var(--f4);
      display: inline-block;
    }
  }

  @media (max-width: 380px) {

    :root {
      --gutter: var(--f3);
    }

    .hero__title {
      font-size: clamp(1.8rem, 8vw, 2.2rem);
    }

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

/* ==========================================================================
   9. PRINT
   ========================================================================== */
@media print {

  .topbar,
  .site-header,
  .hero__scroll,
  .wa-float,
  .to-top,
  .lightbox,
  .nav__burger,
  .testi__controls {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  .hero {
    min-block-size: auto;
    color: #000;
  }

  .hero__overlay,
  .hero__bg {
    display: none;
  }

  .hero__title,
  .hero__lead {
    color: #000;
  }

  .section {
    padding-block: var(--f4);
  }

  a[data-wa]::after {
    content: " (WhatsApp)";
    font-size: .8em;
  }
}

/* ==========================================================================
   10. COMPONENTS — seções adicionais (cargo, contato)
   (blocos @layer com mesmo nome são mesclados na cascata)
   ========================================================================== */
@layer components {

  /* ---------------------------------------------------------------- CARGO */
  .cargo {
    background: var(--surface);
  }

  .cargo__grid {
    max-inline-size: var(--maxw-narrow);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--f2);
  }

  .cargo__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--f1);
    padding-block: var(--f2);
    padding-inline: var(--f4);
    border-radius: var(--r-pill);
    background: var(--bg);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    box-shadow: var(--sh-sm);
    transition: var(--t-base);
  }

  .cargo__chip::before {
    content: "";
    inline-size: var(--f2);
    block-size: var(--f2);
    border-radius: 50%;
    background: var(--accent);
  }

  .cargo__chip:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--sh-md);
  }

  .cargo__note {
    max-inline-size: var(--maxw-narrow);
    margin-inline: auto;
    margin-block-start: var(--f5);
    text-align: center;
    font-size: var(--fs-sm);
  }

  .cargo__note a {
    color: var(--accent);
    font-weight: var(--fw-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* -------------------------------------------------------------- CONTACT */
  .contact {
    background: var(--surface);
  }

  .contact__cards {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--f5);
  }

  .contact__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--f2);
    padding: var(--f5);
    border-radius: var(--r-lg);
    background: var(--bg);
    border: 1px solid var(--line);
    box-shadow: var(--sh-sm);
    transition: var(--t-base);
  }

  a.contact__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-lg);
    border-color: var(--accent);
  }

  .contact__ic {
    inline-size: var(--f6);
    block-size: var(--f6);
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--brand);
    margin-block-end: var(--f2);
  }

  .contact__ic--wa {
    background: var(--c-wa);
    color: #fff;
  }

  .contact__ic svg {
    inline-size: 26px;
    block-size: 26px;
  }

  .contact__title {
    color: var(--brand);
    font-size: var(--fs-base);
  }

  .contact__text {
    font-size: var(--fs-sm);
  }

  .contact__link {
    margin-block-start: auto;
    padding-block-start: var(--f2);
    color: var(--accent);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    display: inline-flex;
    gap: var(--f1);
  }

  .contact__link--muted {
    color: var(--ink-soft);
    font-weight: var(--fw-medium);
  }
}

/* ==========================================================================
   11. RESPONSIVO — seções adicionais
   ========================================================================== */
@layer responsive {

  @media (max-width: 992px) {

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

  @media (max-width: 600px) {

    .cargo__grid {
      gap: var(--f1);
    }

    .cargo__chip {
      font-size: var(--fs-xs);
      padding-inline: var(--f3);
    }
  }
}

/* ==========================================================================
   12. COMPONENTS — compromissos + barra de progresso
   ========================================================================== */
@layer components {

  /* --------------------------------------------------- BARRA DE PROGRESSO */
  .scroll-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 200;
    block-size: 4px;
    inline-size: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transition: inline-size .1s linear;
    pointer-events: none;
  }

  /* ----------------------------------------------------------- COMMIT BAND */
  .commit {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    padding-block: var(--f6);
    padding-inline: var(--gutter);
  }

  .commit__wrap {
    max-inline-size: var(--maxw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--f5);
  }

  .commit__item {
    display: flex;
    align-items: center;
    gap: var(--f3);
  }

  .commit__ic {
    inline-size: var(--f6);
    block-size: var(--f6);
    flex: 0 0 auto;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    color: var(--accent);
  }

  .commit__ic svg {
    inline-size: 26px;
    block-size: 26px;
  }

  .commit__txt {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
  }

  .commit__txt strong {
    color: #fff;
    font-size: var(--fs-base);
  }

  .commit__txt span {
    color: rgba(255, 255, 255, .78);
    font-size: var(--fs-xs);
  }
}

/* ==========================================================================
   13. RESPONSIVO — compromissos
   ========================================================================== */
@layer responsive {

  @media (max-width: 900px) {

    .commit__wrap {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--f4);
    }
  }

  @media (max-width: 480px) {

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

/* ==========================================================================
   14. UTILITIES — acessibilidade e refinamentos finais
   ========================================================================== */
@layer utilities {

  /* visível só para leitores de tela */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* foco consistente em elementos interativos-chave */
  .btn:focus-visible,
  .gallery__item:focus-visible,
  .faq__q:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
  }

  /* respeita modo de alto contraste do SO */
  @media (forced-colors: active) {

    .btn,
    .scard,
    .benefit,
    .contact__card {
      border: 1px solid CanvasText;
    }
  }

  /* desativa animações pesadas quando o usuário pede menos movimento */
  @media (prefers-reduced-motion: reduce) {

    .hero__bg {
      animation: none;
    }

    .wa-float__pulse {
      animation: none;
    }

    .hero__scroll span {
      animation: none;
    }
  }
}