/* Siggur Rastreamento e Tecnologia: site estático
   Reconstruído a partir do site WordPress/Elementor (out/2026).
   Medidas, cores e tipografia extraídas do CSS original da página. */

/* ---------- Fontes (auto-hospedadas, sem chamada ao Google) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --laranja: #F96403;
  --laranja-botao: #C24E00;       /* fundo de botão com texto branco, e texto laranja sobre branco: 4,79:1 */
  --laranja-botao-hover: #A84300; /* 6,06:1 */
  --laranja-rotulo: #B34700;      /* rótulo laranja sobre o cinza dos cartões claros (#F4F6FA): 5,08:1 */
  --marinho: #061333;
  --marinho-2: #0B1B40;
  --texto: #384360;
  --fundo: #EBEBEB;
  --cartao: #F4F6FA;
  --branco: #FFFFFF;
  --borda: rgba(56, 67, 96, .16);
  --borda-suave: rgba(56, 67, 96, .14);

  --f-titulo: "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;
  --f-corpo: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;

  --largura: 1200px;
  --lateral: 40px;
  --raio-lg: 24px;
  --raio-md: 20px;
  --raio-sm: 16px;
  --topo-h: 76px;
  --barra-h: 65px; /* barra fixa do celular: 8 + 48 + 8 de respiro e 1 de borda */
  --sombra-cartao: 0 18px 44px rgba(6, 19, 51, .30);
  --tr: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-corpo);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[id] { scroll-margin-top: calc(var(--topo-h) + 16px); }
body[id] { scroll-margin-top: 0; }

:focus-visible { outline: 3px solid var(--marinho); outline-offset: 3px; border-radius: 6px; }
.rodape :focus-visible, .produto--escuro :focus-visible, .dd__menu :focus-visible { outline-color: var(--laranja); }

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--marinho); color: var(--branco);
  padding: 10px 16px; border-radius: 10px; font-weight: 600;
}
.pular:focus { top: 12px; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.wrap {
  max-width: calc(var(--largura) + var(--lateral) * 2); margin: 0 auto;
  padding: 0 max(var(--lateral), env(safe-area-inset-right, 0px)) 0 max(var(--lateral), env(safe-area-inset-left, 0px));
}

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 1.2;
  padding: 14px 26px; transition: background-color var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--laranja { background: var(--laranja-botao); color: var(--branco); }
.btn--laranja:hover { background: var(--laranja-botao-hover); }
.btn--marinho {
  background: var(--marinho); color: var(--branco); font-size: 15px; padding: 16px 34px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.btn--marinho:hover { background: var(--marinho-2); }
.btn--contorno { color: var(--marinho); border: 1px solid rgba(56, 67, 96, .35); padding: 13px 24px; }
.btn--contorno:hover { border-color: var(--marinho); }
.btn .ico { font-size: 1.1em; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: var(--branco);
  border-bottom: 1px solid rgba(6, 19, 51, .06);
}
.topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--topo-h); }
.topo__marca { flex: none; }
.topo__marca img { width: 175px; height: auto; }

.menu { display: flex; align-items: center; gap: 0; }
.menu > a, .dd__botao {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: #000; white-space: nowrap;
  padding: 10px 6px; border-radius: 8px; transition: color var(--tr);
}
.menu > a:hover, .dd__botao:hover, .dd__botao[aria-expanded="true"] { color: var(--laranja-botao); }
.dd { position: relative; }
.dd__botao .ico { font-size: 11px; transition: transform var(--tr); }
.dd__botao[aria-expanded="true"] .ico { transform: rotate(180deg); }
.dd__menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 240px;
  background: var(--marinho-2); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 8px; box-shadow: 0 18px 40px rgba(6, 19, 51, .35);
}
.dd__menu[hidden] { display: none; }
.dd__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  color: rgba(255, 255, 255, .82); font-size: 14px; font-weight: 600;
  transition: background-color var(--tr), color var(--tr);
}
.dd__menu a:hover { background: rgba(255, 255, 255, .06); color: var(--branco); }
.dd__menu a .ico { font-size: 12px; color: var(--laranja); }

.topo__ctas { display: flex; align-items: center; gap: 16px; }
.topo__0800 {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--marinho); transition: color var(--tr);
}
.topo__0800 .ico { font-size: 17px; color: var(--laranja); }
/* No HTML o rótulo vem antes do número, na mesma ordem do aria-label (o texto visível tem de estar contido no nome); na tela o número fica em cima. */
.topo__0800 > span { display: flex; flex-direction: column-reverse; line-height: 1.2; }
.topo__0800 strong { font-size: 15px; font-weight: 700; white-space: nowrap; transition: color var(--tr); }
.topo__0800 small { font-size: 12px; font-weight: 500; color: var(--texto); }
.topo__0800:hover strong { color: var(--laranja-botao); }
.topo__cotacao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 8px; background: var(--laranja-botao); color: var(--branco);
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color var(--tr);
}
.topo__cotacao:hover { background: var(--laranja-botao-hover); }
.topo__cotacao .ico { font-size: 17px; }

/* De 1200 a 1279 px o conteúdo tem 1120 px: logo e menu um pouco menores para tudo caber numa linha. */
@media (min-width: 1200px) and (max-width: 1279px) {
  .topo__linha { gap: 12px; }
  .topo__marca img { width: 140px; }
  .menu > a, .dd__botao { padding: 10px 5px; font-size: 13.5px; }
  .topo__ctas { gap: 12px; }
  .topo__cotacao { padding: 0 14px; font-size: 13.5px; }
}

.topo__tel, .topo__burger, .topo__acoes { display: none; }
.menu-mobile { display: none; }
.barra-fixa { display: none; }

/* ---------- Hero ---------- */
.hero { background: var(--laranja); color: var(--branco); position: relative; overflow: hidden; }
.hero__grade {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  min-height: 600px;
}
.hero__texto { padding: 80px 0 124px; }
.selo {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(6, 19, 51, .45); border-radius: 999px;
  padding: 6px 14px; color: var(--marinho);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.35;
  text-wrap: balance;
}
.selo .ico { font-size: 14px; }
.hero h1 {
  margin-top: 18px;
  font-family: var(--f-titulo); font-weight: 700;
  font-size: 52px; line-height: 1.08; letter-spacing: -1px;
  text-wrap: balance;
}
.hero__sub { margin-top: 22px; font-size: 16px; line-height: 1.65; color: var(--marinho); max-width: 520px; text-wrap: pretty; }
.hero__sub strong { font-weight: 700; white-space: nowrap; }
.hero .btn--marinho { margin-top: 40px; }
.apoio-cta { margin-top: 12px; font-size: 13px; line-height: 1.5; text-wrap: balance; }
.hero .apoio-cta { margin-top: 14px; color: var(--marinho); font-weight: 500; }
.hero__imagem { align-self: center; }
.hero__imagem img { width: 100%; border-radius: var(--raio-lg); }

/* ---------- Destaques (cartões marinho sobre o hero) ---------- */
.destaques { position: relative; z-index: 2; margin-top: -88px; }
.destaques__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.destaque {
  background: var(--marinho); border-radius: var(--raio-md); box-shadow: var(--sombra-cartao);
  padding: 30px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.destaque .ico { font-size: 30px; color: var(--laranja); }
.destaque p { color: var(--branco); font-size: 15px; font-weight: 600; line-height: 1.4; text-wrap: balance; }
.destaques__item { display: grid; }

/* ---------- Títulos de seção ---------- */
.titulo-secao {
  font-family: var(--f-titulo); font-weight: 700; color: var(--marinho);
  font-size: 32px; line-height: 1.15; letter-spacing: -.5px; text-align: center;
  text-wrap: balance;
}

/* ---------- Escolha por onde começar ---------- */
.escolha { padding-top: 56px; }
.escolha__grade { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.caminho {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-lg);
  padding: 32px; display: flex; align-items: center; gap: 20px;
}
.caminho__img { width: 175px; flex: none; }
.caminho__topo { display: flex; align-items: center; gap: 16px; }
.icone-redondo {
  width: 51px; height: 51px; border-radius: 50%; flex: none;
  background: var(--laranja); color: var(--branco);
  display: grid; place-items: center; font-size: 21px;
}
.caminho h3 {
  font-family: var(--f-titulo); font-weight: 700; color: var(--marinho);
  font-size: 23px; line-height: 1.15; letter-spacing: -.3px;
  text-wrap: pretty;
}
.caminho p { margin-top: 16px; font-size: 14px; line-height: 1.65; text-wrap: pretty; }
.caminho .btn { margin-top: 22px; padding: 14px 26px; }

/* ---------- Faixa de garantias ---------- */
.garantias { padding: 80px 0 72px; }
.garantias__frase { text-align: center; color: var(--marinho); font-size: 16px; font-weight: 600; line-height: 1.65; text-wrap: balance; }
.garantias__lista {
  margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px;
}
.garantias__lista li {
  display: flex; align-items: center; gap: 12px; flex: 0 1 18%;
  font-size: 13px; font-weight: 500; line-height: 1.35; text-wrap: balance;
}
.garantias__lista .ico { font-size: 24px; color: var(--laranja); }

/* ---------- Produtos ---------- */
.produtos { padding-bottom: 96px; }
.produtos__lista { margin-top: 32px; display: grid; gap: 32px; }
.produto {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--cartao); border: 1px solid var(--borda-suave);
  border-radius: var(--raio-lg); overflow: hidden;
}
.produto--escuro { background: var(--marinho); border-color: var(--marinho); }
.produto__texto { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.produto__foto { position: relative; min-height: 480px; }
.produto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.produto--foto-esquerda .produto__foto { order: -1; }

.olho {
  font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  line-height: 1.15; color: var(--laranja-rotulo);
}
.produto h3 {
  margin-top: 14px;
  font-family: var(--f-titulo); font-weight: 700; color: var(--marinho);
  font-size: 36px; line-height: 1.12; letter-spacing: -.5px;
  text-wrap: balance;
}
.produto__texto > p:not(.olho):not(.apoio-cta) { margin-top: 18px; font-size: 15px; line-height: 1.65; text-wrap: pretty; }
.checklist { margin-top: 26px; display: grid; gap: 12px; }
.checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--marinho); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.checklist .ico { color: var(--laranja); font-size: 16px; margin-top: 1px; }
.produto__acoes { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }

.produto--escuro h3 { color: var(--branco); }
.produto--escuro .olho { color: var(--laranja); }
.produto--escuro .produto__texto > p:not(.olho) { color: rgba(255, 255, 255, .72); }
.produto--escuro .checklist li { color: var(--branco); }

/* ---------- Como funciona ---------- */
.como { padding-bottom: 96px; }
.passos {
  margin: 40px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: start;
}
.passo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.passo:not(:last-child)::after {
  content: ""; position: absolute; top: 30px; left: calc(100% - 20px); width: 48px; height: 1px;
  background: rgba(56, 67, 96, .25);
}
.passo .icone-redondo { width: 60px; height: 60px; font-size: 24px; }
.passo p { font-size: 14px; line-height: 1.6; max-width: 200px; text-wrap: balance; }
/* Número do passo no círculo; para o leitor de tela a ordem já vem do <ol> (o círculo é aria-hidden). */
.passos { counter-reset: passo; }
.passo { counter-increment: passo; }
.passo .icone-redondo { position: relative; }
.passo .icone-redondo::after {
  content: counter(passo); position: absolute; top: -4px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marinho); color: var(--branco);
  font-family: var(--f-titulo); font-size: 13px; font-weight: 700; line-height: 1;
}
/* Link no meio da frase: sublinhado, para não depender só da cor. */
.passo p a, .faq details p a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Assistência inclusa ---------- */
.inclusa__cartao { background: var(--cartao); border-radius: var(--raio-lg); padding: 56px 40px; text-align: center; }
.inclusa__sub { margin-top: 12px; font-size: 14px; line-height: 1.6; text-wrap: balance; }
.servicos { margin-top: 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 16px; }
.servicos li { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px; font-weight: 500; line-height: 1.35; text-wrap: balance; }
.servicos .ico { font-size: 30px; color: var(--laranja); }

/* ---------- Dúvidas (FAQ) ---------- */
.duvidas { padding-bottom: 96px; }
.faq { margin: 32px auto 0; max-width: 760px; background: var(--branco); border: 1px solid var(--borda); }
.faq details + details { border-top: 1px solid var(--borda); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; color: var(--marinho); font-size: 16px; font-weight: 600; line-height: 1.45;
  transition: color var(--tr); text-wrap: pretty;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) {
  .faq summary:hover { color: var(--laranja-botao); }
}
.faq summary .ico { font-size: 22px; color: var(--laranja); }
.faq summary .ico--menos { display: none; }
.faq details[open] summary .ico--mais { display: none; }
.faq details[open] summary .ico--menos { display: block; }
.faq details p { padding: 0 24px 22px; font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.duvidas__fim { margin: 32px auto 0; max-width: 760px; text-align: center; }
.duvidas__fim .apoio-cta { margin: 12px auto 0; max-width: 520px; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--marinho); color: rgba(255, 255, 255, .7); padding: 64px 0 0; }
.rodape__grade {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr auto; gap: 32px; align-items: start;
}
.rodape__marca img { width: 185px; }
.rodape__marca p { margin-top: 14px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .68); max-width: 260px; }
.rodape h3 { font-family: var(--f-corpo); font-size: 14px; font-weight: 700; color: var(--branco); letter-spacing: 0; text-align: left; }
.rodape__col ul { margin-top: 12px; display: grid; gap: 4px; }
.rodape__col a { display: inline-block; padding: 4px 0; font-size: 13px; transition: color var(--tr); text-wrap: balance; }
.rodape__col a .ico { display: inline-block; vertical-align: -.125em; }
.rodape__col a:hover { color: var(--laranja); }
.central {
  border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--raio-sm);
  padding: 24px 20px; text-align: center; min-width: 230px;
}
.central h3 { text-align: center; font-size: 15px; }
.central a {
  margin-top: 2px; padding: 8px 0; display: inline-flex; align-items: center; gap: 8px;
  color: var(--laranja); font-size: 18px; font-weight: 700; white-space: nowrap;
}
.central a:hover { color: #FF8A3D; }
.central p { margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
.rodape__base {
  margin-top: 56px; border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 20px 0 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255, 255, 255, .5);
}
.rodape__base a:hover { color: var(--branco); }
.rodape__topo { display: inline-block; padding: 4px 0; }

/* ================= Menu do celular (até 1199px) ================= */
@media (max-width: 1199px) {
  .menu, .topo__ctas { display: none; }
  .topo__tel {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--laranja); color: var(--laranja); font-size: 16px;
  }
  .topo__burger {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px;
    border: 1.5px solid var(--marinho); color: var(--marinho);
  }
  .topo__burger .ico { font-size: 20px; }
  .topo__burger .ico--fechar { display: none; }
  .topo__burger[aria-expanded="true"] .ico--abrir { display: none; }
  .topo__burger[aria-expanded="true"] .ico--fechar { display: block; }
  .topo__acoes { display: flex; align-items: center; gap: 12px; margin-left: auto; }

  .menu-mobile {
    display: block; border-top: 1px solid rgba(6, 19, 51, .08);
    background: var(--branco); max-height: calc(100vh - var(--topo-h)); max-height: calc(100dvh - var(--topo-h)); overflow-y: auto;
  }
  .menu-mobile[hidden] { display: none; }
  .menu-mobile nav { display: grid; padding: 8px 0 20px; }
  .menu-mobile a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid rgba(56, 67, 96, .1);
    color: var(--marinho); font-size: 16px; font-weight: 500;
  }
  .menu-mobile a:hover { color: var(--laranja-botao); }
  .menu-mobile__rotulo { margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--laranja-botao); }
  .menu-mobile a .ico { font-size: 13px; color: var(--laranja); }
  .menu-mobile__acoes { margin-top: 20px; display: grid; gap: 10px; }
  .menu-mobile .menu-mobile__acoes .btn { width: 100%; justify-content: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 15px 20px; border-bottom: 0; }
  .menu-mobile .menu-mobile__acoes .btn--laranja,
  .menu-mobile .menu-mobile__acoes .btn--laranja .ico { color: var(--branco); }
  .menu-mobile .menu-mobile__acoes .btn--contorno { color: var(--marinho); border: 1px solid rgba(56, 67, 96, .35); }
  .menu-mobile .menu-mobile__acoes .btn .ico { font-size: 17px; }

  /* Barra fixa: a página que tem a barra (a 404 não tem) reserva a altura dela, para nada do fim ficar embaixo. */
  body.com-barra { padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px)); }
  .barra-fixa {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; justify-content: center; gap: 8px;
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--branco); border-top: 1px solid rgba(6, 19, 51, .08);
    box-shadow: 0 -8px 24px rgba(6, 19, 51, .10);
  }
  .barra-fixa .btn { flex: 1 1 auto; max-width: 320px; min-height: 48px; padding: 0 14px; }
  /* Escondida pelo JS enquanto o botão do hero está na tela ou o menu está aberto; sem JS fica sempre visível. */
  .barra-fixa--oculta { transform: translateY(100%); visibility: hidden; }
  .barra-fixa--animada { transition: transform 250ms cubic-bezier(.22, .61, .36, 1), visibility 0s; }
  .barra-fixa--animada.barra-fixa--oculta { transition: transform 250ms cubic-bezier(.22, .61, .36, 1), visibility 0s 250ms; }
}

/* ================= Tablet (até 1024px) ================= */
@media (max-width: 1100px) {
  .topo__marca img { width: 150px; }
}
@media (max-width: 1024px) {
  :root { --lateral: 28px; }

  .hero h1 { font-size: 44px; }
  .hero__grade { gap: 28px; min-height: 0; }
  .hero__texto { padding: 64px 0 124px; }

  .destaques__grade { gap: 16px; }
  .destaque { padding: 24px 16px; }

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

  .garantias__lista { justify-content: center; gap: 24px 32px; }
  .garantias__lista li { flex: 1 1 0; }

  .produto__texto { padding: 44px 36px; }
  .produto h3 { font-size: 30px; }
  .produto__foto { min-height: 420px; }

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

  .rodape__grade { grid-template-columns: repeat(4, 1fr); }
  .rodape__marca { grid-column: 1 / -1; }
  .central { grid-column: 1 / -1; justify-self: start; }
}

/* ================= Celular (até 767px) ================= */
@media (max-width: 767px) {
  :root { --lateral: 16px; --topo-h: 68px; }
  .topo__marca img { width: 132px; }

  .hero__grade { grid-template-columns: 1fr; gap: 0; }
  .hero__texto { padding: 40px 0 112px; }
  .hero h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.6px; }
  .hero__sub { font-size: 15px; }
  .hero .btn--marinho { margin-top: 32px; }
  .hero__imagem { display: none; }

  .destaques { margin-top: -80px; }
  .destaques__grade { grid-template-columns: 1fr 1fr; gap: 12px; }
  .destaque { padding: 22px 12px; gap: 10px; border-radius: 18px; }
  .destaque .ico { font-size: 26px; }
  .destaque p { font-size: 14px; }

  .titulo-secao { font-size: 26px; }
  .escolha { padding-top: 48px; }
  .escolha__grade { margin-top: 24px; gap: 16px; }
  .caminho { flex-direction: column; align-items: flex-start; padding: 24px 22px; gap: 18px; }
  .caminho__img { width: 160px; align-self: center; }
  .caminho--frota .caminho__img { order: -1; }
  .caminho h3 { font-size: 21px; }

  .garantias { padding: 56px 0 48px; }
  .garantias__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .garantias__lista li { align-items: flex-start; flex-direction: column; gap: 8px; }
  .garantias__lista li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .produtos { padding-bottom: 72px; }
  .produtos__lista { margin-top: 24px; gap: 20px; }
  .produto { grid-template-columns: 1fr; }
  .produto__foto { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .produto__texto { padding: 32px 22px 28px; }
  .produto h3 { font-size: 26px; }
  .produto__acoes .btn, .duvidas__fim .btn { white-space: normal; text-wrap: balance; text-align: center; }
  .produto__acoes .btn { width: 100%; }

  .como { padding-bottom: 72px; }
  .passos { grid-template-columns: 1fr 1fr; gap: 32px 16px; margin-top: 32px; }
  .passo::after { display: none; }

  .inclusa__cartao { padding: 40px 18px; }
  .servicos { gap: 24px 8px; }
  .servicos .ico { font-size: 26px; }

  .duvidas { padding-bottom: 72px; }
  .faq { margin-top: 24px; border-radius: 0; }
  .faq summary { padding: 18px 18px; font-size: 15px; }
  .faq details p { padding: 0 18px 20px; }

  .rodape { padding-top: 48px; }
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .rodape__col a { padding: 11px 0; font-size: 14px; }
  .rodape__col ul { gap: 0; margin-top: 8px; }
  .rodape__base a { display: inline-flex; align-items: center; min-height: 44px; }
  .central { justify-self: stretch; }
  .rodape__base { margin-top: 40px; flex-direction: column; gap: 6px; }
}

@media (max-width: 359px) {
  .hero h1 { font-size: 30px; }
  .servicos { grid-template-columns: repeat(2, 1fr); }
  /* Os 2 botões da barra somam mais que a tela: menos folga interna para sobrar respiro nas bordas. */
  .barra-fixa { padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  .barra-fixa .btn { padding: 0 10px; gap: 6px; }
}

/* ---------- Página 404 ---------- */
.erro {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 40px 16px; text-align: center;
}
.erro img { width: 180px; margin-bottom: 24px; }
.erro p:not(.olho) { max-width: 420px; }
.erro__acoes { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Surgimento ao rolar (melhoria progressiva) ----------
   Só esconde algo quando o JS confirmou que está rodando (classe .reveal-on no <html>).
   Sem JS, com JS quebrado ou com "reduzir movimento" ligado, tudo fica visível. */
.reveal-on [data-reveal]:not(.revelado) { opacity: 0; transform: translateY(24px); }
.reveal-on [data-reveal].revelado {
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--atraso, 0ms);
}
.reveal-on [data-reveal].sem-transicao { transition: none !important; }
.produto { isolation: isolate; } /* mantém os cantos arredondados durante o movimento (Safari) */
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
  .barra-fixa { display: none !important; }
}