/* ==========================================================================
   JP Vans — CSS 2026
   Drop-in replacement para /recursos/css/estilos.css
   Foco: confiança, conforto, clareza e conversão no WhatsApp
   ========================================================================== */

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

@layer tokens {
  :root {
    color-scheme: light;

    --brand-950: #08111f;
    --brand-900: #0c1830;
    --brand-850: #10203e;
    --brand-800: #14294f;
    --brand-700: #1c3d74;
    --brand-600: #2454a5;
    --brand-500: #2f6fe6;
    --brand-400: #5a93ff;

    --accent-600: #0f9fd6;
    --accent-500: #1db5ea;
    --accent-100: #e7f7fe;

    --success-700: #127a39;
    --success-600: #169447;
    --success-500: #21b35a;
    --success-100: #eafaf0;

    --warning-600: #b97911;
    --warning-100: #fff5df;

    --surface-0: #f4f8fc;
    --surface-1: #ffffff;
    --surface-2: #f8fbff;
    --surface-3: #eef4fb;
    --surface-4: #e6eef8;

    --text-strong: #0f1f38;
    --text-body: #42526b;
    --text-soft: #687891;
    --text-white: #ffffff;

    --line-soft: rgba(12, 24, 48, 0.08);
    --line: rgba(12, 24, 48, 0.13);
    --line-strong: rgba(12, 24, 48, 0.20);

    --shadow-xs: 0 10px 30px rgba(7, 17, 31, 0.04);
    --shadow-sm: 0 16px 40px rgba(7, 17, 31, 0.07);
    --shadow-md: 0 24px 56px rgba(7, 17, 31, 0.10);
    --shadow-lg: 0 30px 70px rgba(7, 17, 31, 0.14);
    --shadow-brand: 0 24px 60px rgba(36, 84, 165, 0.20);
    --shadow-whatsapp: 0 22px 46px rgba(22, 148, 71, 0.22);

    --radius-xs: 12px;
    --radius-sm: 16px;
    --radius-md: 22px;
    --radius-lg: 28px;
    --radius-xl: 34px;
    --radius-pill: 999px;

    --container: 1240px;
    --header-height: 88px;

    --space-1: clamp(0.5rem, 0.35rem + 0.35vw, 0.75rem);
    --space-2: clamp(0.75rem, 0.55rem + 0.45vw, 1rem);
    --space-3: clamp(1rem, 0.8rem + 0.6vw, 1.25rem);
    --space-4: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
    --space-5: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --space-6: clamp(2rem, 1.5rem + 1.2vw, 2.75rem);
    --space-7: clamp(2.5rem, 1.9rem + 1.8vw, 3.75rem);
    --space-8: clamp(3rem, 2.2rem + 2.4vw, 5rem);

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tracking-tight: -0.03em;
    --transition-fast: 180ms ease;
    --transition: 260ms ease;
  }

  @supports (color: color-mix(in srgb, black, white)) {
    :root {
      --surface-elevated: color-mix(in srgb, var(--surface-1) 88%, #eef4fb);
      --line-soft: color-mix(in srgb, var(--brand-900) 9%, transparent);
      --line: color-mix(in srgb, var(--brand-900) 14%, transparent);
      --line-strong: color-mix(in srgb, var(--brand-900) 22%, transparent);
    }
  }
}

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

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
  }

  body,
  h1, h2, h3, h4, h5, h6,
  p, ul, ol, dl {
    margin: 0;
  }

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

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

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

@layer base {
  body {
    min-height: 100vh;
    background:
      radial-gradient(circle at top left, rgba(29, 181, 234, 0.10), transparent 30%),
      radial-gradient(circle at bottom right, rgba(47, 111, 230, 0.08), transparent 34%),
      linear-gradient(180deg, #f9fbfe 0%, #f4f8fc 34%, #eef4fb 100%);
    color: var(--text-body);
    font-family: var(--font-sans);
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: rgba(47, 111, 230, 0.18);
    color: var(--brand-950);
  }

  main,
  .conteudo-principal {
    min-height: 60vh;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: 1.08;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(2.35rem, 4.9vw, 4.6rem);
  }

  h2 {
    font-size: clamp(1.75rem, 3vw, 2.8rem);
  }

  h3 {
    font-size: clamp(1.1rem, 1.45rem + 0.35vw, 1.45rem);
  }

  p,
  li,
  span {
    text-wrap: pretty;
  }

  p {
    color: var(--text-body);
    font-size: clamp(1rem, 0.97rem + 0.12vw, 1.05rem);
  }

  strong {
    color: var(--text-strong);
  }

  a {
    transition:
      color var(--transition-fast),
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast),
      opacity var(--transition-fast);
  }

  :focus-visible {
    outline: 3px solid rgba(47, 111, 230, 0.32);
    outline-offset: 3px;
  }

  .container {
    width: min(100% - 40px, var(--container));
    margin-inline: auto;
  }

  .secao {
    padding-block: var(--space-8);
  }

  .secao-clara {
    background: transparent;
  }

  .secao-suave {
    position: relative;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.45)),
      linear-gradient(180deg, #edf4fb 0%, #f8fbff 100%);
    border-block: 1px solid var(--line-soft);
  }

  .secao-hero {
    position: relative;
    padding-block: clamp(3rem, 4vw, 5rem) clamp(2.6rem, 3vw, 4rem);
    overflow: clip;
  }

  .secao-hero::after {
    content: "";
    position: absolute;
    inset: auto -14% -20% auto;
    width: min(44vw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 181, 234, 0.14), transparent 68%);
    pointer-events: none;
    filter: blur(8px);
  }

  .secao-hero-home::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(8, 17, 31, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(8, 17, 31, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 82%);
    pointer-events: none;
  }

  .hero-pagina {
    padding-block: clamp(3rem, 4.2vw, 5rem) clamp(2.2rem, 2.8vw, 3.4rem);
  }
}

@layer layout {
  .topo-secao {
    max-width: 820px;
    margin-bottom: var(--space-6);
  }

  .topo-secao-curto {
    max-width: 920px;
  }

  .topo-secao p {
    margin-top: 0.75rem;
  }

  .grade-hero,
  .grade-hero-simples {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
    gap: clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
    align-items: stretch;
  }

  .hero-conteudo,
  .painel-hero-home {
    position: relative;
    z-index: 1;
  }

  .grade-2-colunas {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
    align-items: center;
  }

  .alinhamento-topo {
    align-items: start;
  }

  .grade-3-colunas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  }

  .grade-4-colunas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.3rem);
  }

  .grade-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.2rem);
  }

  .grade-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.2rem);
  }

  .grade-confianca {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.9rem, 0.7rem + 0.8vw, 1.15rem);
  }

  .grade-resumo-servicos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem;
  }

  .grade-beneficios {
    align-items: stretch;
  }

  .grade-rodape {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr 0.95fr 1.1fr;
    gap: clamp(1.1rem, 0.8rem + 1vw, 1.7rem);
    padding-block: clamp(2.5rem, 3vw, 4rem) 1.8rem;
  }
}

@layer components {
  .chamada-secao,
  .hero-etiqueta,
  .selo-painel,
  .pill-servico {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.3rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(36, 84, 165, 0.10);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 244, 251, 0.96));
    color: var(--brand-700);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .hero-etiqueta,
  .selo-painel {
    margin-bottom: 1.1rem;
  }

  .pill-servico {
    margin-bottom: 1rem;
  }

  .titulo-hero {
    max-width: 16ch;
    margin-bottom: 1rem;
  }

  .texto-hero {
    max-width: 68ch;
    margin-bottom: 1.5rem;
    font-size: clamp(1.03rem, 0.98rem + 0.2vw, 1.1rem);
  }

  .hero-conteudo-centralizado {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
  }

  .texto-hero-centralizado {
    margin-inline: auto;
  }

  .acoes-hero,
  .faixa-cta-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
  }

  .faixa-cta-acoes {
    justify-content: flex-end;
  }

  .faixa-cta-acoes-esquerda {
    justify-content: flex-start;
  }

  .lista-diferenciais,
  .lista-check,
  .lista-rodape {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .lista-diferenciais {
    display: grid;
    gap: 0.9rem;
    max-width: 58rem;
  }

  .lista-diferenciais li,
  .lista-check li {
    position: relative;
    padding-left: 1.7rem;
    color: var(--text-strong);
  }

  .lista-diferenciais li::before,
  .lista-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--accent-500), var(--brand-500));
    box-shadow: 0 0 0 0.23rem rgba(29, 181, 234, 0.12);
  }

  .lista-check {
    display: grid;
    gap: 0.85rem;
  }

  .lista-check-compacta {
    gap: 0.7rem;
  }

  .lista-check li::before {
    border-radius: 999px;
    background: linear-gradient(180deg, var(--success-500), var(--success-700));
    box-shadow: 0 0 0 0.23rem rgba(22, 148, 71, 0.10);
  }

  .botao-whatsapp,
  .botao-principal,
  .botao-secundario {
    --button-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 54px;
    padding-inline: 1.2rem;
    border-radius: 18px;
    font-weight: 900;
    font-size: 0.96rem;
    line-height: 1.1;
    border: 1px solid transparent;
    cursor: pointer;
    box-shadow: var(--button-shadow);
    transform: translateY(0);
  }

  .botao-whatsapp {
    color: var(--text-white);
    background: linear-gradient(180deg, #22c55e 0%, #169447 100%);
    --button-shadow: var(--shadow-whatsapp);
  }

  .botao-principal {
    color: var(--text-white);
    background: linear-gradient(180deg, var(--brand-500) 0%, var(--brand-700) 100%);
    --button-shadow: var(--shadow-brand);
  }

  .botao-secundario {
    color: var(--text-strong);
    background: rgba(255, 255, 255, 0.84);
    border-color: var(--line);
    box-shadow: 0 12px 26px rgba(7, 17, 31, 0.06);
    backdrop-filter: blur(10px);
  }

  .botao-whatsapp:hover,
  .botao-principal:hover,
  .botao-secundario:hover,
  .link-card:hover,
  .cartao-servico:hover,
  .cartao-beneficio:hover,
  .cartao-informativo:hover,
  .painel-padrao:hover,
  .item-confianca:hover,
  .item-faq:hover,
  .cartao-foto-frota:hover,
  .cartao-resumo:hover {
    transform: translateY(-2px);
  }

  .botao-whatsapp:hover {
    box-shadow: 0 26px 58px rgba(22, 148, 71, 0.28);
  }

  .botao-principal:hover {
    box-shadow: 0 28px 62px rgba(36, 84, 165, 0.24);
  }

  .botao-secundario:hover {
    background: #ffffff;
    border-color: var(--line-strong);
  }

  .icone-whatsapp {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
  }

  .cabecalho-site {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 1px 0 rgba(12, 24, 48, 0.04);
  }

  @supports selector(.cabecalho-site:has(.menu-principal.menu-aberto)) {
    .cabecalho-site:has(.menu-principal.menu-aberto) {
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 22px 60px rgba(7, 17, 31, 0.10);
    }
  }

  .cabecalho-superior {
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.25rem;
  }

  .marca-site {
    min-width: 0;
  }

  .marca-link {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .marca-nome {
    color: var(--brand-900);
    font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.65rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .marca-subtitulo {
    color: var(--text-soft);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.03em;
  }

  .menu-principal {
    justify-self: center;
  }

  .lista-menu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .lista-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 2.8rem;
    padding-inline: 0.95rem;
    border-radius: 999px;
    color: var(--text-strong);
    font-size: 0.94rem;
    font-weight: 800;
  }

  .lista-menu a:hover,
  .lista-menu a.ativo {
    color: var(--brand-700);
    background: rgba(36, 84, 165, 0.08);
  }

  .acoes-cabecalho {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .botao-whatsapp-cabecalho {
    min-height: 48px;
    padding-inline: 1rem;
    border-radius: 15px;
    white-space: nowrap;
  }

  .botao-menu-mobile {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-xs);
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.28rem;
    cursor: pointer;
  }

  .botao-menu-mobile span {
    width: 20px;
    height: 2px;
    border-radius: 99px;
    background: var(--brand-900);
  }

  :where(
    .painel-hero,
    .painel-padrao,
    .cartao-informativo,
    .cartao-servico,
    .cartao-beneficio,
    .link-card,
    .item-confianca,
    .item-faq,
    .cartao-foto-frota,
    .cartao-resumo,
    .aviso-frota-sem-imagem,
    .faixa-cta,
    .pagina-texto
  ) {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95));
    box-shadow: var(--shadow-sm);
  }

  :where(
    .painel-hero,
    .painel-padrao,
    .cartao-informativo,
    .cartao-servico,
    .cartao-beneficio,
    .link-card,
    .item-confianca,
    .item-faq,
    .cartao-foto-frota,
    .cartao-resumo,
    .aviso-frota-sem-imagem,
    .pagina-texto
  )::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.15));
    pointer-events: none;
  }

  .painel-hero,
  .painel-padrao,
  .cartao-informativo,
  .pagina-texto {
    padding: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
  }

  .cartao-servico,
  .cartao-beneficio,
  .link-card,
  .item-confianca,
  .cartao-foto-frota,
  .cartao-resumo,
  .item-faq {
    padding: clamp(1.1rem, 0.95rem + 0.55vw, 1.35rem);
  }

  .painel-hero {
    background:
      radial-gradient(circle at top right, rgba(29, 181, 234, 0.10), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.95));
  }

  .painel-hero-home {
    box-shadow: var(--shadow-md);
  }

  .painel-topo p:last-child,
  .bloco-info-empresa .lista-check li:last-child,
  .cartao-foto-frota-conteudo span:last-child,
  .texto-rodape:last-child {
    margin-bottom: 0;
  }

  .grade-resumo-home {
    margin-top: 1rem;
  }

  .cartao-resumo strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1rem;
  }

  .cartao-resumo p {
    color: var(--text-soft);
    font-size: 0.95rem;
  }

  .bloco-info-empresa {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
  }

  .faixa-confianca {
    padding-block: 0 1rem;
  }

  .faixa-confianca-clara {
    background: transparent;
  }

  .item-confianca strong {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 1.02rem;
  }

  .item-confianca span {
    color: var(--text-soft);
    font-size: 0.96rem;
  }

  .cartao-servico,
  .cartao-beneficio,
  .cartao-informativo,
  .link-card,
  .item-faq,
  .item-confianca,
  .cartao-foto-frota,
  .cartao-resumo {
    transition:
      transform var(--transition),
      box-shadow var(--transition),
      border-color var(--transition),
      background-color var(--transition);
  }

  .cartao-servico h2,
  .cartao-servico h3,
  .cartao-informativo h2,
  .cartao-informativo h3,
  .painel-padrao h2 {
    margin-bottom: 0.75rem;
  }

  .cartao-servico p,
  .cartao-informativo p,
  .painel-padrao p,
  .cartao-beneficio p,
  .item-faq p {
    color: var(--text-body);
  }

  .cartao-servico-alto {
    height: 100%;
  }

  .link-seta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1rem;
    font-weight: 900;
    color: var(--brand-700);
  }

  .link-seta::after {
    content: "→";
    transform: translateX(0);
    transition: transform var(--transition-fast);
  }

  .link-seta:hover::after {
    transform: translateX(2px);
  }

  .link-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 100%;
    color: var(--text-body);
  }

  .link-card strong {
    color: var(--text-strong);
    font-size: 1.05rem;
  }

  .link-card span {
    color: var(--text-soft);
    font-size: 0.96rem;
  }

  .item-faq {
    padding: 1.05rem 1.2rem;
  }

  .item-faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 900;
    color: var(--text-strong);
    padding-right: 2rem;
    position: relative;
  }

  .item-faq summary::-webkit-details-marker {
    display: none;
  }

  .item-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: -0.05rem;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--brand-600);
  }

  .item-faq[open] {
    border-color: rgba(36, 84, 165, 0.18);
    box-shadow: var(--shadow-md);
  }

  @supports selector(.item-faq:has(summary)) {
    .item-faq:has(summary:hover) {
      border-color: rgba(36, 84, 165, 0.16);
    }
  }

  .item-faq[open] summary::after {
    content: "–";
  }

  .item-faq p {
    margin-top: 0.75rem;
    color: var(--text-soft);
  }

  .aviso-destaque {
    margin-top: 1rem;
    padding: 1rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(185, 121, 17, 0.14);
    background:
      linear-gradient(180deg, rgba(255, 248, 228, 0.96), rgba(255, 252, 242, 0.98));
    color: #6d4a05;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  }

  .faixa-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);
    padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
    border-radius: var(--radius-lg);
    border-color: rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(circle at top right, rgba(29, 181, 234, 0.20), transparent 34%),
      linear-gradient(135deg, #0b1730 0%, #14305f 58%, #19457e 100%);
    box-shadow: 0 28px 70px rgba(7, 17, 31, 0.28);
  }

  .faixa-cta h2,
  .faixa-cta p,
  .faixa-cta .chamada-secao {
    color: #fff;
  }

  .faixa-cta p {
    max-width: 60ch;
    color: rgba(255, 255, 255, 0.82);
  }

  .faixa-cta .chamada-secao {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
  }

  .rodape-site {
    position: relative;
    margin-top: 0;
    background:
      radial-gradient(circle at top left, rgba(29, 181, 234, 0.12), transparent 28%),
      linear-gradient(180deg, #091324 0%, #0b1528 100%);
    color: rgba(255, 255, 255, 0.82);
  }

  .titulo-rodape {
    color: #fff;
    font-size: 1.08rem;
    margin-bottom: 0.85rem;
  }

  .texto-rodape {
    color: rgba(255, 255, 255, 0.76);
    margin-bottom: 1rem;
  }

  .lista-rodape {
    display: grid;
    gap: 0.7rem;
  }

  .lista-rodape a {
    color: rgba(255, 255, 255, 0.74);
  }

  .lista-rodape a:hover {
    color: #fff;
  }

  .lista-rodape-duas-colunas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1rem;
  }

  .faixa-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.8rem 1.3rem;
    padding-block: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .faixa-rodape-dados {
    padding-top: 0;
    padding-bottom: 1rem;
  }

  .faixa-rodape p,
  .faixa-rodape a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.94rem;
  }

  .barra-sticky-whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding-inline: 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    background: linear-gradient(180deg, #22c55e 0%, #169447 100%);
    box-shadow: 0 26px 60px rgba(22, 148, 71, 0.28);
    font-weight: 900;
    backdrop-filter: blur(12px);
  }

  .barra-sticky-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 32px 72px rgba(22, 148, 71, 0.32);
  }

  .hero-frota .painel-hero {
    align-self: start;
  }

  .destaque-frota {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(1rem, 0.8rem + 1.2vw, 1.6rem);
    align-items: center;
  }

  .botao-imagem-frota,
  .cartao-foto-frota-imagem {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: zoom-in;
  }

  .botao-imagem-frota {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  .botao-imagem-frota img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .bloco-categoria-frota + .bloco-categoria-frota {
    margin-top: 2rem;
  }

  .topo-categoria-frota {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .topo-categoria-frota p {
    margin-top: 0.35rem;
  }

  .contador-categoria-frota {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding-inline: 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--accent-100);
    border: 1px solid rgba(15, 159, 214, 0.12);
    color: #0d78a2;
    font-size: 0.88rem;
    font-weight: 900;
  }

  .galeria-frota-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .cartao-foto-frota {
    padding: 0;
  }

  .cartao-foto-frota-imagem {
    width: 100%;
    display: block;
  }

  .cartao-foto-frota-imagem img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .cartao-foto-frota-conteudo {
    display: grid;
    gap: 0.3rem;
    padding: 0.95rem 1rem 1.05rem;
  }

  .cartao-foto-frota-conteudo strong {
    font-size: 1rem;
  }

  .cartao-foto-frota-conteudo span {
    color: var(--text-soft);
    font-size: 0.93rem;
  }

  .aviso-frota-sem-imagem {
    padding: 1.4rem;
  }

  .modal-frota {
    position: fixed;
    inset: 0;
    z-index: 1200;
  }

  .modal-frota[hidden] {
    display: none;
  }

  .modal-frota-fundo {
    position: absolute;
    inset: 0;
    background: rgba(4, 9, 18, 0.78);
    backdrop-filter: blur(10px);
  }

  .modal-frota-dialogo {
    position: relative;
    z-index: 1;
    width: min(100% - 26px, 1120px);
    margin: 3vh auto;
    max-height: 94vh;
    overflow: auto;
    border-radius: 24px;
    background: #0a1322;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.36);
  }

  .modal-frota-imagem {
    width: 100%;
    height: auto;
  }

  .modal-frota-legenda {
    padding: 1rem 1.2rem 1.35rem;
    color: #fff;
  }

  .modal-frota-fechar {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    background: rgba(11, 23, 48, 0.88);
    color: #fff;
    font-size: 1.55rem;
    cursor: pointer;
  }

  .modal-frota-aberta {
    overflow: hidden;
  }

  .carrossel-home {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    margin-bottom: 1rem;
    border-radius: var(--radius-lg);
    background: #dbe7f4;
    box-shadow: var(--shadow-md);
  }

  .carrossel-home-trilha {
    position: relative;
    min-height: inherit;
  }

  .slide-home {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
  }

  .slide-home.ativo {
    opacity: 1;
    pointer-events: auto;
  }

  .slide-home img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
  }

  .slide-home-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(8, 17, 31, 0.08) 0%, rgba(8, 17, 31, 0.24) 40%, rgba(8, 17, 31, 0.78) 100%);
  }

  .slide-home-conteudo {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 24px;
    z-index: 2;
    color: #fff;
  }

  .slide-home-categoria {
    display: inline-flex;
    margin-bottom: 0.7rem;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .slide-home-conteudo strong {
    display: block;
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: clamp(1.1rem, 1.02rem + 0.6vw, 1.45rem);
    text-wrap: balance;
  }

  .slide-home-conteudo p {
    color: rgba(255, 255, 255, 0.88);
    max-width: 52ch;
    font-size: 0.96rem;
  }

  .carrossel-home-seta {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    transform: translateY(-50%);
    background: rgba(8, 17, 31, 0.40);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
  }

  .carrossel-home-seta:hover {
    background: rgba(8, 17, 31, 0.68);
  }

  .carrossel-home-seta-esquerda { left: 14px; }
  .carrossel-home-seta-direita { right: 14px; }

  .carrossel-home-indicadores {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 3;
    display: flex;
    gap: 0.45rem;
    transform: translateX(-50%);
  }

  .carrossel-home-indicador {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.42);
    cursor: pointer;
    padding: 0;
  }

  .carrossel-home-indicador.ativo {
    width: 28px;
    background: #fff;
  }
}

@layer pages {
  .pagina-texto {
    max-width: 920px;
  }

  .hero-area .titulo-hero,
  .hero-area-servico .titulo-hero {
    max-width: 18ch;
  }
}

@layer utilities {
  .texto-centralizado {
    text-align: center;
  }

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

  .oculto {
    display: none !important;
  }
}

@layer motion {
  @supports (content-visibility: auto) {
    .secao:not(.secao-hero) {
      content-visibility: auto;
      contain-intrinsic-size: auto 760px;
    }
  }

  @supports (container-type: inline-size) {
    :where(
      .cartao-servico,
      .cartao-beneficio,
      .cartao-informativo,
      .item-faq,
      .item-confianca,
      .link-card,
      .cartao-foto-frota,
      .faixa-cta,
      .painel-hero,
      .painel-padrao
    ) {
      container-type: inline-size;
    }

    @container (max-width: 430px) {
      .faixa-cta-acoes {
        width: 100%;
        justify-content: stretch;
      }

      .faixa-cta-acoes > * {
        width: 100%;
      }
    }

    @container (max-width: 360px) {
      .cartao-servico,
      .cartao-beneficio,
      .link-card,
      .cartao-informativo,
      .item-confianca,
      .item-faq {
        padding: 1rem;
      }
    }
  }

  @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 responsive {
  @media (max-width: 1180px) {
    .grade-3-colunas,
    .grade-links,
    .grade-rodape {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grade-4-colunas,
    .grade-confianca {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 1024px) {
    :root {
      --header-height: 82px;
    }

    .cabecalho-superior {
      grid-template-columns: auto auto;
      justify-content: space-between;
    }

    .botao-menu-mobile {
      display: inline-flex;
      justify-self: end;
    }

    .acoes-cabecalho {
      display: none;
    }

    .menu-principal {
      grid-column: 1 / -1;
      width: 100%;
      display: none;
      justify-self: stretch;
      padding-bottom: 0.8rem;
    }

    .menu-principal.menu-aberto {
      display: block;
    }

    .lista-menu {
      flex-direction: column;
      align-items: stretch;
      gap: 0.3rem;
      padding: 0.8rem;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.94);
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(14px);
    }

    .lista-menu a {
      width: 100%;
      justify-content: flex-start;
      border-radius: 14px;
    }

    .grade-hero,
    .grade-hero-simples,
    .grade-2-colunas,
    .destaque-frota {
      grid-template-columns: 1fr;
    }

    .faixa-cta {
      flex-direction: column;
      align-items: flex-start;
    }

    .faixa-cta-acoes {
      justify-content: flex-start;
    }

    .galeria-frota-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 780px) {
    .container {
      width: min(100% - 24px, var(--container));
    }

    .secao {
      padding-block: clamp(2.9rem, 7vw, 4rem);
    }

    .secao-hero,
    .hero-pagina {
      padding-block: clamp(2.8rem, 7vw, 4rem) clamp(2.1rem, 5vw, 3rem);
    }

    .titulo-hero {
      max-width: 100%;
    }

    .acoes-hero,
    .faixa-cta-acoes {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }

    .botao-whatsapp,
    .botao-principal,
    .botao-secundario {
      width: 100%;
    }

    .grade-3-colunas,
    .grade-4-colunas,
    .grade-links,
    .grade-confianca,
    .grade-faq,
    .grade-rodape,
    .lista-rodape-duas-colunas,
    .grade-resumo-servicos,
    .galeria-frota-grid {
      grid-template-columns: 1fr;
    }

    .topo-categoria-frota {
      display: grid;
      grid-template-columns: 1fr;
      align-items: start;
    }

    .contador-categoria-frota {
      justify-self: start;
    }

    .barra-sticky-whatsapp {
      left: 12px;
      right: 12px;
      bottom: 12px;
      text-align: center;
    }

    .carrossel-home,
    .carrossel-home-trilha,
    .slide-home img {
      min-height: 300px;
    }

    .slide-home-conteudo {
      left: 18px;
      right: 18px;
      bottom: 18px;
    }

    .modal-frota-dialogo {
      width: min(100% - 16px, 1120px);
      margin: 4vh auto;
      border-radius: 18px;
    }
  }

  @media (max-width: 520px) {
    .marca-nome {
      font-size: 1.3rem;
    }

    .marca-subtitulo {
      font-size: 0.78rem;
    }

    .hero-etiqueta,
    .selo-painel,
    .chamada-secao,
    .pill-servico {
      font-size: 0.72rem;
      letter-spacing: 0.07em;
      padding-inline: 0.78rem;
    }

    .carrossel-home,
    .carrossel-home-trilha,
    .slide-home img {
      min-height: 260px;
      border-radius: 22px;
    }

    .carrossel-home-seta {
      width: 38px;
      height: 38px;
    }

    .slide-home-conteudo p {
      font-size: 0.9rem;
    }
  }
}