/* PontualWeb – landing page de vendas */

:root {
  --petroleo: #0B5566;
  --petroleo-escuro: #083F4C;
  --petroleo-claro: #E3EFF1;
  --petroleo-tinta: #0E6578;
  --marinho: #13254A;
  --marinho-fundo: #0F1F3F;
  --verde: #0E7F47;
  --verde-hover: #0A6A3A;
  --verde-vivo: #2BC777;
  --tinta: #0E1A2B;
  --texto: #2E3B4C;
  --apoio: #566476;
  --linha: #DCE5EA;
  --gelo: #F3F7F9;
  --branco: #FFFFFF;
  --sobre-marinho: #C9D5EA;

  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio: 18px;
  --raio-pequeno: 10px;
  --sombra: 0 1px 2px rgba(15, 31, 63, .06), 0 12px 32px -12px rgba(15, 31, 63, .18);
  --sombra-alta: 0 2px 4px rgba(15, 31, 63, .06), 0 28px 56px -20px rgba(11, 63, 76, .35);
  --gutter: clamp(16px, 4vw, 32px);
  --secao: clamp(36px, 4.5vw, 60px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #9DB3BB var(--gelo);
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--branco);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--petroleo);
  overflow-x: hidden;
}

::selection { background: var(--petroleo); color: var(--branco); }

[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  color: var(--tinta);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.85rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--petroleo); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--petroleo-escuro); }

:focus-visible {
  outline: 3px solid var(--petroleo-tinta);
  outline-offset: 3px;
  border-radius: 6px;
}

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

.caixa {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--branco);
  font: 700 1.0625rem/1.2 var(--fonte);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(10, 106, 58, .25), 0 10px 22px -10px rgba(10, 106, 58, .55);
  transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.botao svg { width: 22px; height: 22px; flex: none; }
.botao:hover { background: var(--verde-hover); color: var(--branco); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(10, 106, 58, .25), 0 16px 28px -12px rgba(10, 106, 58, .6); }
.botao:active { transform: translateY(0); }
.botao--pequeno { min-height: 44px; padding: 10px 18px; font-size: .95rem; }
.botao--pequeno svg { width: 18px; height: 18px; }
.botao--largo { width: 100%; }
.botao--grande { min-height: 62px; padding: 18px 36px; font-size: 1.15rem; }
.botao--escuro { background: var(--marinho); box-shadow: 0 10px 22px -12px rgba(15, 31, 63, .6); }
.botao--escuro:hover { background: var(--marinho-fundo); }
.botao[disabled] { opacity: .6; cursor: progress; transform: none; }

.link-seta {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700;
  color: var(--petroleo);
  text-decoration: underline;
  text-decoration-color: rgba(11, 85, 102, .35);
  min-height: 44px;
}
.link-seta svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.link-seta:hover { text-decoration-color: currentColor; }
.link-seta:hover svg { transform: translate(2px, -2px); }

/* ---------- Topo ---------- */

.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.topo.rolou { border-bottom-color: var(--linha); box-shadow: 0 6px 20px -16px rgba(15, 31, 63, .4); }
.topo__linha { display: flex; align-items: center; gap: 24px; min-height: 72px; }

.marca {
  display: inline-flex; align-items: center; gap: .32em;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -0.03em;
  color: var(--marinho); text-decoration: none;
}
.marca b { color: var(--petroleo); font-weight: 800; }
.marca__icone { flex: none; width: 1.05em; height: 1.39em; color: var(--petroleo); }
.marca:hover { color: var(--marinho); }

.menu { display: flex; gap: 4px; margin-left: auto; }
.menu a {
  padding: 10px 14px; border-radius: 999px;
  color: var(--texto); font-weight: 600; font-size: .95rem; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.menu a:hover { background: var(--petroleo-claro); color: var(--petroleo-escuro); }

.menu-botao {
  display: none;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--branco); color: var(--tinta);
  align-items: center; justify-content: center; cursor: pointer;
}
.menu-botao svg { width: 22px; height: 22px; }

/* ---------- 1. Herói ---------- */

.heroi {
  position: relative;
  padding-block: clamp(20px, 3vw, 44px) clamp(32px, 4vw, 56px);
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(11, 85, 102, .14), transparent 70%),
    linear-gradient(180deg, #EAF3F5 0%, #F6FAFB 55%, var(--branco) 100%);
  overflow: hidden;
}
.heroi__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}

.heroi h1 {
  font-size: clamp(2.35rem, 1.3rem + 4vw, 4.1rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  word-spacing: .04em;
  line-height: 1.05;
  max-width: 15ch;
}
.heroi h1 .h1-forte { font-size: 1.14em; line-height: 1; letter-spacing: -0.032em; }
@media (min-width: 961px) {
  .heroi h1 .h1-forte { white-space: nowrap; }
  .heroi h1 { max-width: none; }
  /* cartão de ponto acompanha a altura da coluna de texto */
  .heroi__grade { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch; }
  .ponto { display: flex; flex-direction: column; margin-block: 4px; }
  .ponto__linhas { flex: 1; display: flex; flex-direction: column; padding-block: 4px; }
  .ponto__linhas li { flex: 1; min-height: 0; }
  .ponto__cabeca { padding-block: 16px; font-size: .84rem; }
  .ponto__dia { font-size: .82rem; }
  .ponto__tarefa { font-size: 1.06rem; }
  .ponto .carimbo { font-size: .8rem; padding: 3px 10px; }
  .ponto .carimbo--grande { font-size: 1.1rem; padding: 7px 16px; }
}
.destaque { color: var(--petroleo); white-space: nowrap; }
.heroi h1 .destaque { font-size: 1.3em; line-height: 1; letter-spacing: -0.035em; }

.heroi__sub {
  margin-top: 18px;
  font-size: clamp(.98rem, .93rem + .2vw, 1.08rem);
  color: var(--texto);
  max-width: 44ch;
}
.heroi .preco { margin-top: 18px; gap: 8px; font-size: .9rem; }
.heroi .preco strong { font-size: 1.45rem; }

.botao--heroi { min-height: 62px; padding: 16px 34px; font-size: 1.18rem; }
.botao--heroi svg { width: 26px; height: 26px; }
.link-seta--heroi { font-size: 1.12rem; gap: 8px; }
.link-seta--heroi svg { width: 22px; height: 22px; transform: rotate(90deg); }
.link-seta--heroi:hover svg { transform: rotate(90deg) translate(2px, -2px); }

.preco {
  margin-top: 26px;
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-weight: 600; color: var(--apoio);
}
.preco strong {
  font-size: 1.9rem; font-weight: 800; color: var(--tinta);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}

.heroi__acoes { margin-top: 22px; display: flex; align-items: center; gap: 12px 26px; flex-wrap: wrap; }

.heroi__garantias {
  list-style: none; padding: 0; margin: 26px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.heroi__garantias li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  background: var(--branco);
  border: 1px solid #CFE0E5;
  box-shadow: 0 6px 14px -10px rgba(11, 63, 76, .45);
  font-size: .98rem; font-weight: 700; color: var(--tinta);
}
.heroi__garantias svg {
  width: 26px; height: 26px; padding: 5px;
  border-radius: 50%;
  background: var(--petroleo); color: var(--branco);
  flex: none;
}

/* Cartão de ponto */

.ponto {
  margin: 0;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: 0 1px 2px rgba(15, 31, 63, .08), 0 14px 30px -14px rgba(11, 63, 76, .3);
  overflow: hidden;
}
.ponto__cabeca {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 14px 22px;
  background: var(--marinho);
  color: var(--branco);
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ponto__cabeca span:last-child { color: var(--sobre-marinho); }

.ponto__linhas { list-style: none; margin: 0; padding: 6px 22px 4px; }
.ponto__linhas li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  border-bottom: 1px dashed var(--linha);
}
.ponto__dia {
  font-size: .78rem; font-weight: 700; color: var(--apoio);
  text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.ponto__tarefa { font-weight: 600; color: var(--tinta); font-size: .98rem; line-height: 1.3; }
.ponto__final { border-bottom: 0 !important; min-height: 72px !important; }
.ponto__final .ponto__tarefa { font-weight: 800; }

.carimbo {
  --rot: -7deg;
  display: inline-block;
  padding: 2px 9px;
  border: 3px double var(--petroleo-tinta);
  border-radius: 6px;
  color: var(--petroleo-tinta);
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  transform: rotate(var(--rot));
  opacity: .88;
  mix-blend-mode: multiply;
}
.ponto__linhas li:nth-child(even) .carimbo { --rot: 5deg; }
.carimbo--grande {
  --rot: -9deg !important;
  padding: 6px 14px;
  font-size: 1rem;
  border-width: 4px;
  color: var(--petroleo);
  border-color: var(--petroleo);
}

.ponto__nota {
  padding: 14px 22px 18px;
  background: var(--gelo);
  font-size: .85rem; line-height: 1.45; color: var(--apoio);
  border-top: 1px solid var(--linha);
}

/* Interação assinatura: os carimbos batem em sequência */
.espera .carimbo { opacity: 0; }
.anima .carimbo {
  animation: carimbar .55s var(--ease) both;
  animation-delay: calc(.2s + var(--i) * .3s);
}
@keyframes carimbar {
  0%   { opacity: 0; transform: rotate(var(--rot)) scale(1.9); filter: blur(2px); }
  55%  { opacity: .95; transform: rotate(var(--rot)) scale(.92); filter: blur(0); }
  100% { opacity: .88; transform: rotate(var(--rot)) scale(1); }
}

/* ---------- Seções ---------- */

.secao { padding-block: var(--secao); }
.secao--gelo { background: var(--gelo); }

.cabecalho-secao {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}
.cabecalho-secao h2 { max-width: 20ch; }
.secao__intro { margin-top: 16px; font-size: 1.125rem; max-width: 52ch; color: var(--texto); }
.cabecalho-secao .secao__intro { margin-top: 0; }

/* 2. Problema */

.problema__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3.5vw, 52px);
  align-items: start;
}
.problema__grade > div { align-self: center; }

.dado__titulo {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.dado__num {
  display: block;
  font-size: clamp(5.5rem, 3.5rem + 8vw, 9rem);
  font-weight: 800; line-height: .9; letter-spacing: -0.05em;
  color: var(--petroleo);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.dado__texto { margin-top: 14px; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); font-weight: 700; color: var(--tinta); max-width: 30ch; }
.dado__marca {
  text-decoration: underline;
  text-decoration-color: var(--petroleo);
  text-decoration-thickness: 3px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
}
.dado__fonte { margin-top: 12px; font-size: .85rem; color: var(--apoio); }
.dores { list-style: none; margin: 0; padding: 0; counter-reset: dor; }
.dores li {
  counter-increment: dor;
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
}
.dores li:first-child { padding-top: 6px; }
.dores li::before {
  content: "";
  grid-row: span 2;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--petroleo-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230B5566' stroke-width='2.2' stroke-linecap='round' d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.dores p { color: var(--texto); }

/* 3. Serviços */

.preco--secao { margin-top: 0; font-size: 1.1rem; }
.preco--secao strong { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); color: var(--petroleo); }

.planos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.plano {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 36px);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.plano--destaque { border: 2px solid var(--petroleo); }

.plano__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.plano h3 { font-size: 1.5rem; }
.selo {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--petroleo); color: var(--branco);
  font-size: .8rem; font-weight: 700;
}
.selo--neutro { background: var(--petroleo-claro); color: var(--petroleo-escuro); }
.plano__para { margin-top: 12px; color: var(--apoio); }

.lista-check { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.lista-check li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; color: var(--tinta); font-weight: 500; }
.lista-check svg { width: 22px; height: 22px; color: var(--petroleo); margin-top: 1px; }

.plano__selo {
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--marinho);
  color: var(--branco);
  font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

.plano__prazo {
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--raio-pequeno);
  background: var(--petroleo);
  color: var(--branco);
  font-weight: 800; font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em;
}
.plano__prazo svg { width: 24px; height: 24px; flex: none; color: #8CCFDC; }
.plano__prazo + .plano__limite { margin-top: 16px; }

.plano__limite {
  margin: 22px 0 26px;
  padding-top: 16px;
  border-top: 1px dashed var(--linha);
  font-size: .92rem; color: var(--apoio);
}
.plano .botao { margin-top: auto; }

.opcional {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px;
  padding: 24px clamp(24px, 3vw, 36px);
  border: 1.5px dashed #B9CCD3;
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .6);
}
.opcional > div { max-width: 70ch; }
.opcional h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.opcional p { margin-top: 8px; color: var(--texto); }
.opcional__tag {
  padding: 3px 10px; border-radius: 999px;
  background: var(--petroleo-claro); color: var(--petroleo-escuro);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* 4. Trabalhos */

.casos { display: grid; gap: clamp(28px, 4vw, 48px); }
.caso {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
  gap: clamp(16px, 2.5vw, 36px);
  align-items: center;
}
.caso--invertido .caso__telas { order: 2; }

.caso__telas { position: relative; padding: 0 9% 9% 0; }
.caso--invertido .caso__telas { padding: 0 0 9% 9%; }

.tela-pc {
  border-radius: 12px;
  overflow: hidden;
  background: var(--branco);
  box-shadow: var(--sombra-alta);
}
.tela-pc__barra {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: #EEF3F5; border-bottom: 1px solid #DCE5EA;
}
.tela-pc__barra i { width: 9px; height: 9px; border-radius: 50%; background: #C5D3D9; }
.tela-pc__barra span {
  margin-left: 10px; padding: 2px 12px; border-radius: 999px;
  background: var(--branco); color: var(--apoio);
  font-size: .72rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tela-pc img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; }

.tela-cel {
  position: absolute; right: 0; bottom: 0;
  width: 25%;
  padding: 6px;
  border-radius: 26px;
  background: var(--tinta);
  box-shadow: 0 30px 50px -20px rgba(15, 31, 63, .55);
}
.caso--invertido .tela-cel { right: auto; left: 0; }
.tela-cel img { border-radius: 20px; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; width: 100%; }

.caso__meta {
  margin-top: 8px;
  font-size: .92rem; font-weight: 600; color: var(--petroleo);
}
.caso__info h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.caso__info > p:not(.caso__meta) { margin-top: 16px; }
.caso__info .link-seta { margin-top: 14px; }

.cta-linha {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px;
  padding: 28px;
  border-radius: var(--raio);
  background: var(--petroleo-claro);
  text-align: center;
}
.cta-linha p { font-size: 1.25rem; font-weight: 700; color: var(--tinta); }

/* 5. Faixa azul-marinho */

.faixa {
  padding-block: var(--secao);
  background: var(--marinho);
  color: var(--sobre-marinho);
}
.faixa h2, .faixa h3 { color: var(--branco); }
.cabecalho-secao--claro .secao__intro { color: var(--sobre-marinho); }
.cabecalho-secao--claro h2 { max-width: 22ch; }

.passos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px;
  position: relative;
}
.passos li { position: relative; padding-top: 4px; }
.passos li::after {
  content: "";
  position: absolute; top: 26px; left: 64px; right: -10px;
  border-top: 2px dashed rgba(201, 213, 234, .35);
}
.passos li:last-child::after { display: none; }
.passos__num {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--branco); color: var(--marinho);
  font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.passos p { margin-top: 8px; font-size: 1rem; }

.garantia-prazo {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--raio);
  background: rgba(255, 255, 255, .06);
  border: 1.5px dashed rgba(201, 213, 234, .4);
}
.garantia-prazo p { flex: 1 1 320px; font-size: 1.08rem; max-width: 64ch; }
.garantia-prazo strong { display: block; color: var(--branco); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); letter-spacing: -0.02em; margin-bottom: 6px; }
.carimbo--claro {
  --rot: -8deg;
  padding: 8px 16px;
  font-size: 1rem;
  border-width: 4px;
  color: #8CCFDC;
  border-color: #8CCFDC;
  mix-blend-mode: normal;
  opacity: 1;
}
.carimbo--recebido {
  --rot: -6deg;
  flex: none;
  padding: 5px 12px;
  font-size: .9rem;
  border-width: 4px;
  color: var(--petroleo);
  border-color: var(--petroleo);
  opacity: 1;
}

.garantias {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.garantias li {
  padding: 24px 20px 0 0;
  font-size: 1rem;
}
.garantias strong { display: block; color: var(--branco); font-size: 1.08rem; margin-bottom: 2px; }

/* 6. FAQ */

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0;
  min-height: 64px;
  font-weight: 700; font-size: 1.08rem; color: var(--tinta);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--petroleo-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230B5566' stroke-width='2.2' stroke-linecap='round' d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .3s var(--ease), background-color .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--petroleo); }
.faq details p { padding: 0 48px 22px 0; color: var(--texto); max-width: 62ch; }

/* 7. CTA final */

.faixa--cta {
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(14, 101, 120, .45), transparent 60%),
    var(--marinho-fundo);
}
.cta-final { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-final h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); max-width: 20ch; }
.cta-final > p { margin-top: 18px; font-size: 1.15rem; max-width: 46ch; }
.cta-final .botao, .cta-final .botao:hover { margin-top: 34px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 14px 28px -12px rgba(0, 0, 0, .45); }
.cta-final__numero {
  margin-top: 14px !important;
  font-size: 1rem !important;
  font-weight: 700; letter-spacing: .02em; color: var(--branco);
  font-variant-numeric: tabular-nums;
}

/* 8. Formulário */

.formulario__grade {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: start;
}
.formulario__texto h2 { max-width: 13ch; }
.formulario__prazo {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--branco); border: 1px solid var(--linha);
  font-weight: 700; font-size: .95rem; color: var(--petroleo-escuro);
}

.formulario {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px;
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--branco);
  border-radius: var(--raio);
  border: 1px solid var(--linha);
}
.campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; border: 0; margin: 0; padding: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo label, .campo legend { font-weight: 700; font-size: .95rem; color: var(--tinta); padding: 0; }
.campo__opcional { font-weight: 500; color: var(--apoio); }

.campo input:not([type="radio"], [type="checkbox"], [type="color"]), .campo select, .campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid #C6D4DA;
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  color: var(--tinta);
  font: 500 1rem/1.4 var(--fonte);
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230B5566' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 14px center / 20px no-repeat;
  cursor: pointer;
}
.campo input::placeholder { color: #6B7888; }
.campo input:not([type="radio"], [type="checkbox"], [type="color"]):hover, .campo select:hover, .campo textarea:hover { border-color: #9DB3BB; }
.campo input:not([type="radio"], [type="checkbox"], [type="color"]):focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--petroleo);
  box-shadow: 0 0 0 4px rgba(11, 85, 102, .15);
}
.campo [aria-invalid="true"] { border-color: #B42318; }
.campo [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .14); }
.campo__erro { min-height: 0; font-size: .88rem; font-weight: 600; color: #B42318; }
.campo__erro:empty { display: none; }

.opcoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.opcoes label {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 10px 16px;
  border: 1.5px solid #C6D4DA; border-radius: 999px;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.opcoes label:hover { border-color: #9DB3BB; }
.opcoes input { accent-color: var(--petroleo); width: 18px; height: 18px; margin: 0; }
.opcoes label:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo-claro); color: var(--petroleo-escuro); }
.opcoes label:has(input:focus-visible) { outline: 3px solid var(--petroleo-tinta); outline-offset: 2px; }

.formulario__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 4px; }
.lgpd { font-size: .88rem; color: var(--apoio); max-width: 40ch; }

.formulario__ok {
  grid-column: 1 / -1;
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px;
  border-radius: var(--raio-pequeno);
  background: var(--petroleo-claro);
  border: 1px solid #B9D3DA;
  color: var(--tinta);
}
.formulario__ok[hidden] { display: none; }
.formulario__falha {
  padding: 14px 16px;
  border-radius: var(--raio-pequeno);
  background: #FDECEA;
  border: 1px solid #F4C7C2;
  color: #8A1C12;
  font-weight: 600; font-size: .95rem;
}
.formulario__falha a { color: #8A1C12; }

.obrigado { min-height: 100vh; display: grid; place-items: center; }
.obrigado__caixa { max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.obrigado h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); font-weight: 800; }
.obrigado .secao__intro { margin-top: 0; }
.obrigado__acoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: 8px; }
.formulario__ok-titulo { font-weight: 800; font-size: 1.1rem; margin-bottom: 4px !important; }
.formulario__ok:focus { outline: none; }

/* 9. Rodapé */

.rodape {
  padding-block: 28px 88px;
  background: var(--marinho-fundo);
  color: var(--sobre-marinho);
  font-size: .95rem;
}
.rodape a { color: var(--branco); text-decoration-color: rgba(255, 255, 255, .35); }
.rodape a:hover { color: var(--branco); text-decoration-color: currentColor; }
.rodape__grade { display: grid; grid-template-columns: 1fr auto; gap: 28px 48px; align-items: start; }
.rodape__grade > div p { margin-top: 12px; max-width: 34ch; }
.marca--clara, .marca--clara:hover { color: var(--branco); text-decoration: none; }
.marca--clara b { color: #8CCFDC; }
.marca--clara .marca__icone { color: var(--branco); --marca-ponto: var(--verde-vivo); }
.rodape__contato { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rodape__fim { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(201, 213, 234, .2); font-size: .88rem; }

/* WhatsApp flutuante */

.whats-flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--verde); color: var(--branco);
  box-shadow: 0 4px 8px rgba(10, 106, 58, .25), 0 18px 32px -10px rgba(10, 106, 58, .6);
  transition: transform .25s var(--ease), background-color .2s;
}
.whats-flutuante svg { width: 32px; height: 32px; }
.whats-flutuante.escondido { opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; }
.whats-flutuante:not(.escondido) { transition: opacity .3s, transform .35s var(--ease), background-color .2s, visibility 0s; }
.whats-flutuante:hover { transform: scale(1.06); background: var(--verde-hover); color: var(--branco); }

/* ---------- Responsivo ---------- */

@media (max-width: 1080px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .passos li::after { display: none; }
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .heroi__grade, .problema__grade, .formulario__grade { grid-template-columns: minmax(0, 1fr); }
  .heroi h1 { max-width: 15ch; }
  .ponto { transform: none; max-width: 520px; }
  .caso { grid-template-columns: minmax(0, 1fr); }
  .caso--invertido .caso__telas { order: 0; }
  .planos { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 16px;
    background: var(--branco);
    border-bottom: 1px solid var(--linha);
    box-shadow: 0 16px 24px -16px rgba(15, 31, 63, .3);
    display: none;
  }
  .menu.aberto { display: flex; }
  .menu a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--linha); font-size: 1.05rem; }
  .menu a:last-child { border-bottom: 0; }
  .menu a:hover { background: none; }
  .topo__linha { gap: 10px; }
  .topo .botao--pequeno { margin-left: auto; }
  .menu-botao { display: inline-flex; }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .rodape__grade { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .topo__linha { min-height: 64px; }
  .marca { font-size: 1.15rem; }
  .topo .botao--pequeno span { display: none; }
  .topo .botao--pequeno { width: 44px; padding: 0; }
  .heroi__acoes .botao { width: 100%; }
  .heroi__acoes { gap: 6px; }
  .heroi__acoes .link-seta { margin-inline: auto; }
  .ponto__linhas { padding-inline: 16px; }
  .ponto__cabeca, .ponto__nota { padding-inline: 16px; }
  .ponto__linhas li { grid-template-columns: 44px 1fr auto; gap: 10px; min-height: 40px; }
  .ponto__final { min-height: 60px !important; }
  .ponto__tarefa { font-size: .9rem; }
  .ponto__cabeca { padding-block: 11px; }
  .ponto__nota { padding-block: 11px 13px; font-size: .8rem; }
  .heroi__grade { gap: 18px; }
  .heroi__garantias { margin-top: 18px; gap: 8px 18px; }
  .heroi__sub { margin-top: 16px; }
  .preco { margin-top: 18px; }
  .passos, .garantias { grid-template-columns: minmax(0, 1fr); }
  .passos { gap: 14px; }
  .passos li { display: grid; grid-template-columns: 46px 1fr; column-gap: 16px; padding-top: 0; }
  .passos__num { grid-row: span 2; margin-bottom: 0; }
  .passos h3 { align-self: center; }
  .passos p { margin-top: 4px; }
  .garantias li { padding-right: 0; padding-top: 18px; }
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .formulario__ok { flex-direction: column; gap: 18px; }
  .formulario__rodape .botao { width: 100%; }
  .botao--grande { width: 100%; padding-inline: 20px; }
  .tela-cel { border-radius: 18px; padding: 4px; }
  .tela-cel img { border-radius: 14px; }
  .cta-linha { padding: 24px 20px; }
  .cta-linha .botao { width: 100%; }
  .faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}