/* LP Ponto Engenharia - estilos (mobile-first). Depende de tokens.css.
 * Linguagem visual: prancha tecnica (malha, eixos, cotas, carimbo) sobre a identidade do manual. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--cor-texto);
  font-family: var(--fonte-base);
  font-size: var(--corpo-tam);
  line-height: var(--corpo-ent);
  font-weight: 400;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { margin: 0; font-weight: 600; color: var(--cor-texto); }
p, ul, ol, dl, dd, figure { margin: 0; }

a { color: inherit; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pular-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--azul-ponto);
  color: var(--branco);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.pular-link:focus { top: var(--space-4); }
.pular-link:focus-visible { outline-color: var(--laranja-ponto); }

/* ---------- Tipografia ---------- */
.display { font-size: var(--display-tam); line-height: var(--display-ent); font-weight: 600; letter-spacing: -0.02em; }
.titulo-1 { font-size: var(--titulo-1-tam); line-height: var(--titulo-1-ent); letter-spacing: -0.015em; }
.titulo-2 { font-size: var(--titulo-2-tam); line-height: var(--titulo-2-ent); }
.titulo-3 { font-size: var(--titulo-3-tam); line-height: var(--titulo-3-ent); }
.pequeno { font-size: var(--pequeno-tam); line-height: var(--pequeno-ent); }
.suave { color: var(--cor-texto-suave); }

.chapeu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--chapeu-tam);
  line-height: var(--chapeu-ent);
  letter-spacing: var(--chapeu-esp);
  text-transform: uppercase;
  font-weight: 400;
  color: var(--cor-chapeu);
}
.chapeu__n {
  font-family: var(--fonte-dado);
  font-weight: 500;
  letter-spacing: .02em;
}
.secao__cabeca .chapeu::after {
  content: "";
  width: 56px;
  height: 1px;
  margin-left: var(--space-2);
  background: currentColor;
  opacity: .6;
}
.chapeu--ponto { gap: var(--space-3); flex-wrap: nowrap; align-items: flex-start; }
.chapeu--ponto .ponto { width: 10px; height: 10px; margin-top: 3px; }

.dado {
  font-family: var(--fonte-dado);
  font-size: var(--dado-tam);
  line-height: var(--dado-ent);
  font-weight: 500;
}

.leitura { max-width: var(--largura-leitura); }
.leitura > * + * { margin-top: var(--space-4); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--largura-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.secao { position: relative; padding: var(--secao-pad) 0; background-color: var(--cor-fundo); color: var(--cor-texto); }
.secao--alt { --cor-fundo: var(--fundo-alt); }
.secao--inversa,
.hero,
.rodape--escuro {
  --cor-fundo: var(--azul-ponto);
  --cor-texto: var(--branco);
  --cor-texto-suave: var(--texto-suave-escuro);
  --cor-chapeu: var(--laranja-ponto);
  --cor-moldura: var(--branco);
  --cor-foco: var(--laranja-ponto);
  color: var(--cor-texto);
}
.secao--divisa { border-top: var(--traco-fino) solid var(--linha); }

/* Malha de prancha: fina a cada 32 px nas claras; fina 24 px + grossa 120 px nas escuras */
.secao--malha {
  background-image:
    linear-gradient(var(--malha-clara) 1px, transparent 1px),
    linear-gradient(90deg, var(--malha-clara) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center top;
}
.secao--prancha,
.hero {
  background-image:
    linear-gradient(var(--malha-escura) 1px, transparent 1px),
    linear-gradient(90deg, var(--malha-escura) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}

.secao__cabeca { margin-bottom: var(--space-12); max-width: var(--largura-leitura); }
.secao__cabeca p { margin-top: var(--space-4); color: var(--cor-texto-suave); font-size: 18px; line-height: 28px; }

/* ---------- Cabecalho ---------- */
.topo { background: var(--branco); border-bottom: var(--traco-fino) solid var(--linha); }
.topo__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
}
/* Logo: minimo digital de 240 px de largura (manual). */
.logo { display: inline-block; padding: var(--space-2) 0; }
.logo img { width: 240px; height: auto; }
.topo .topo__acao { display: none; }
.topo__ref { display: none; }

/* Variante sobre o hero escuro (so na LP) */
.topo--escuro {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  background: transparent;
  border-bottom: var(--traco-fino) solid var(--linha-escura);
  --cor-foco: var(--laranja-ponto);
}
.topo__ref {
  color: var(--texto-suave-escuro);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .topo .topo__acao { display: inline-flex; }
  .topo--escuro .topo__ref { display: block; margin-left: auto; }
}

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--toque-min);
  padding: var(--space-3) var(--space-6);
  border: var(--traco-fino) solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  font-size: var(--corpo-tam);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, translate .15s ease;
}
/* Principal: texto azul sobre laranja (4,9:1). Branco sobre laranja e proibido. */
.btn--principal { background: var(--laranja-ponto); color: var(--azul-ponto); border-color: var(--laranja-ponto); }
.btn--principal::after {
  content: "";
  flex: none;
  width: 16px; height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: translate .15s ease;
}
.btn--principal[aria-busy="true"]::after { display: none; }
/* Hover clareia (azul sobre #F47A40 = 5,7:1); escurecer derrubaria o contraste abaixo de 4,5:1. */
.btn--principal:hover { background: #F47A40; border-color: #F47A40; }
@media (hover: hover) {
  .btn--principal:hover::after { translate: 3px 0; }
}
.btn--principal:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; box-shadow: 0 0 0 4px var(--azul-ponto); }
.btn--secundario { background: transparent; color: var(--cor-texto); border-color: currentColor; }
.btn--secundario:hover { background: var(--fundo-alt); }
.btn--contorno { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .5); font-size: 15px; padding: var(--space-2) var(--space-4); }
.btn--contorno:hover { border-color: var(--branco); background: rgba(255, 255, 255, .06); }
.btn--bloco { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: progress; opacity: .8; }

.btn__giro {
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: giro .8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- Moldura aberta e ponto ---------- */
.moldura { position: relative; padding: var(--space-8) var(--space-6) var(--space-8) var(--space-8); }
.moldura__traco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--cor-moldura);
}
.moldura__traco path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--traco-moldura);
  stroke-linecap: round;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.ponto {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--laranja-ponto);
  flex: none;
}
.moldura > .ponto {
  position: absolute;
  left: 0;
  top: 38%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px var(--cor-fundo);
}

/* Marcas de corte (cantos de prancha) em volta de um bloco */
.cantos { position: relative; }
.cantos::before {
  --m: rgba(255, 255, 255, .55);
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  background:
    linear-gradient(var(--m), var(--m)) left top / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left top / 1px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 1px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 1px 18px no-repeat;
}

/* Linha de cota: traco com marcas nas pontas e medida no centro */
.cota {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  margin-top: var(--space-8);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-dado);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cota::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
  opacity: .7;
}
.cota::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(currentColor, currentColor) left center / 1px 16px no-repeat,
    linear-gradient(currentColor, currentColor) right center / 1px 16px no-repeat;
}
.cota span { position: relative; z-index: 1; padding: 0 var(--space-3); background: var(--cor-fundo); }

/* ---------- Midia (imagens com fallback concreto) ---------- */
.midia {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--concreto);
  aspect-ratio: 4 / 3;
}
.midia--16x9 { aspect-ratio: 16 / 9; }
.midia img { width: 100%; height: 100%; object-fit: cover; }
.midia--vazia img { visibility: hidden; }
.legenda { margin-top: var(--space-2); font-size: var(--pequeno-tam); line-height: var(--pequeno-ent); color: var(--cor-texto-suave); }

/* ---------- Cartao com profundidade (contraplaca deslocada, sem sombra difusa) ---------- */
.cartao {
  position: relative;
  padding: var(--space-6);
  background: var(--branco);
  border: var(--traco-fino) solid var(--linha);
  border-radius: var(--radius-md);
  box-shadow: 8px 8px 0 -1px var(--fundo-alt), 8px 8px 0 0 var(--linha);
  transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@media (hover: hover) {
  .cartao:hover {
    translate: -3px -3px;
    border-color: var(--azul-ponto);
    box-shadow: 11px 11px 0 -1px var(--fundo-alt), 11px 11px 0 0 var(--azul-ponto);
  }
}
@media (min-width: 900px) {
  .cartao { padding: var(--space-8); }
}

/* ---------- 1. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  /* clip (e nao hidden): hidden cria um container rolavel e a ancora #pedido-hero rolava o hero
     por dentro, jogando o cartao por baixo do cabecalho. hidden fica como fallback. */
  overflow: hidden;
  overflow: clip;
  padding: 140px 0 var(--space-12);
  background-color: var(--azul-ponto);
}
.hero__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Modelo 3D (fundo branco) invertido + screen sobre o azul: vira um "raio X" claro da estrutura */
.hero__fundo img {
  position: absolute;
  right: -55%;
  top: 140px;
  width: 170%;
  max-width: none;
  height: auto;
  filter: invert(1) grayscale(1) contrast(1.1);
  mix-blend-mode: screen;
  opacity: .22;
}
.hero__fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 35, 79, .2) 0%, rgba(0, 35, 79, .65) 55%, var(--azul-ponto) 100%);
}

/* Eixos de projeto (A, B, C...) com linhas tracejadas */
.hero__eixos {
  position: absolute;
  left: 0; right: 0;
  top: 124px; bottom: 0;
  z-index: -1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.eixo {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: var(--traco-fino) solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  font-family: var(--fonte-dado);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, .45);
}
.eixo::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 1px; height: 3000px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 8px, transparent 8px 14px);
}
.eixo:nth-child(2), .eixo:nth-child(4) { display: none; }

.hero__grade { position: relative; display: grid; gap: var(--space-12); }
/* Mobile: o formulario sobe para logo abaixo do subtitulo; ficha e RT vao para depois dele */
@media (max-width: 999px) {
  .hero__grade { gap: 0; }
  .hero__texto { display: contents; }
  .hero__texto > .chapeu { order: 1; }
  .hero__texto > .display { order: 2; }
  .hero__texto > .hero__sub { order: 3; }
  .hero__form { order: 4; margin-top: var(--space-8); }
  .hero__texto > .hero__ficha { order: 5; }
  .hero__texto > .hero__rt { order: 6; }
}
@media (max-width: 599px) {
  .hero .display { font-size: 32px; line-height: 37px; }
  .hero__sub { font-size: 16px; line-height: 25px; margin-top: var(--space-4); }
}
.hero__texto > * { animation: subir .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero__texto > :nth-child(2) { animation-delay: .08s; }
.hero__texto > :nth-child(3) { animation-delay: .16s; }
.hero__texto > :nth-child(4) { animation-delay: .24s; }
.hero__texto > :nth-child(5) { animation-delay: .32s; }
.hero__form { animation: subir .9s .2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.hero .display { max-width: 15em; text-wrap: balance; }
.hero__sub { margin-top: var(--space-6); color: var(--texto-suave-escuro); max-width: 540px; font-size: 18px; line-height: 29px; }

.hero__ficha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-8);
  max-width: 540px;
  border-top: var(--traco-fino) solid var(--linha-escura);
  border-bottom: var(--traco-fino) solid var(--linha-escura);
}
.hero__ficha div { display: flex; flex-direction: column-reverse; padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.hero__ficha div + div { padding-left: var(--space-3); border-left: var(--traco-fino) solid var(--linha-escura); }
.hero__ficha dt {
  font-family: var(--fonte-dado);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave-escuro);
}
.hero__ficha dd { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--branco); }
.hero__rt { margin-top: var(--space-6); font-size: var(--pequeno-tam); line-height: var(--pequeno-ent); color: var(--texto-suave-escuro); }
.hero__rt .dado { color: var(--branco); font-size: 13px; }

@media (min-width: 600px) {
  .eixo:nth-child(2), .eixo:nth-child(4) { display: grid; }
  .hero__ficha div { padding-right: var(--space-4); }
  .hero__ficha div + div { padding-left: var(--space-4); }
  .hero__ficha dd { font-size: 18px; }
}
@media (min-width: 1000px) {
  .hero { padding: 172px 0 var(--space-20); min-height: 780px; }
  .hero__grade { grid-template-columns: minmax(0, 1fr) 440px; align-items: center; gap: var(--space-16); }
  .hero__fundo img { right: -8%; top: 50%; translate: 0 -46%; width: 76%; opacity: .3; }
  .hero__fundo::after { background: linear-gradient(90deg, var(--azul-ponto) 0%, rgba(0, 35, 79, .88) 38%, rgba(0, 35, 79, .35) 100%); }
}

/* ---------- Formulario (cartao, usado no hero e no final) ---------- */
.cartao-form {
  --cor-texto: var(--azul-ponto);
  --cor-texto-suave: var(--texto-suave);
  --cor-fundo: var(--branco);
  --cor-foco: var(--laranja-texto);
  container-type: inline-size;
  padding: var(--space-6) var(--space-4) var(--space-6);
  background: var(--branco);
  color: var(--azul-ponto);
  border-radius: var(--radius-md);
  box-shadow: 12px 12px 0 0 rgba(255, 255, 255, .06);
  scroll-margin-top: var(--space-6);
}
.cartao-form:focus { outline: none; }
@media (min-width: 400px) {
  .cartao-form { padding: var(--space-6); }
}
@media (min-width: 900px) {
  .cartao-form { padding: var(--space-8); }
}

.etapa-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--fonte-dado);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.etapa-status__barra { position: relative; flex: 1; height: 2px; background: var(--concreto); }
.etapa-status__barra span { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--azul-ponto); transition: width .35s ease; }
.etapa-status__barra span::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--laranja-ponto);
}
.etapa-status[data-etapa="2"] .etapa-status__barra span { width: 100%; }

.form-etapa { animation: entrar .35s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form-etapa__titulo { margin-bottom: var(--space-4); font-size: 22px; line-height: 28px; color: var(--azul-ponto); }
.form-etapa__titulo:focus { outline: none; }
.form-etapa__titulo:focus-visible { outline: 2px solid var(--cor-foco); outline-offset: 4px; }

.grade-campos { display: grid; gap: 0 var(--space-6); align-items: start; }
@container (min-width: 560px) {
  .grade-campos { grid-template-columns: 1fr 1fr; }
}

.campo { margin: 0 0 var(--space-4); }
fieldset.campo { border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--azul-ponto);
}
.campo__nota { font-weight: 400; color: var(--texto-suave); font-size: 13px; }
.campo__dica { margin: -2px 0 var(--space-2); font-size: 13px; line-height: 18px; color: var(--texto-suave); }

.campo input[type="text"],
.campo input[type="tel"] {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: var(--traco-fino) solid var(--linha-forte);
  border-radius: var(--radius-sm);
  background: var(--branco);
  color: var(--azul-ponto);
  font: inherit;
  font-size: 17px; /* >= 16px evita zoom no iOS */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input::placeholder { color: #8391A3; }
.campo input[type="text"]:hover,
.campo input[type="tel"]:hover { border-color: var(--azul-ponto); }
.campo input:focus-visible {
  outline: 2px solid var(--laranja-ponto);
  outline-offset: 0;
  border-color: var(--laranja-ponto);
}
.campo input[aria-invalid="true"] { border-color: var(--erro); box-shadow: inset 0 0 0 1px var(--erro); }

/* Chips: radio real, visualmente escondido mas focavel; o span e o botao visivel */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; max-width: 100%; cursor: pointer; }
.chip input {
  position: absolute;
  top: 50%; left: 12px;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.chip span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--toque-min);
  padding: 7px 12px 7px 10px;
  border: var(--traco-fino) solid var(--linha-forte);
  border-radius: var(--radius-sm);
  background: var(--branco);
  color: var(--azul-ponto);
  font-size: 14px;
  line-height: 19px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip span::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: .55;
  transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.chip:hover span { border-color: var(--azul-ponto); background: var(--fundo-alt); }
.chip input:checked + span { background: var(--azul-ponto); border-color: var(--azul-ponto); color: var(--branco); }
.chip input:checked + span::before { background: var(--laranja-ponto); border-color: var(--laranja-ponto); opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--laranja-ponto); outline-offset: 2px; }
.chips--mono span { font-family: var(--fonte-dado); font-size: 13px; font-weight: 500; letter-spacing: -.02em; }
.fieldset-invalido .chip span { border-color: var(--erro); }

/* Checkboxes de consentimento */
.consentimento { margin: var(--space-2) 0 var(--space-4); }
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--azul-ponto);
  cursor: pointer;
}
.check + .campo__erro + .check, .check + .check { margin-top: var(--space-2); }
.check input {
  flex: none;
  width: 20px; height: 20px;
  margin: 0;
  accent-color: var(--azul-ponto);
}
/* Area de toque do checkbox: o label inteiro e clicavel; o input ganha folga extra */
.check input { outline-offset: 2px; }
.check input:focus-visible { outline: 2px solid var(--laranja-ponto); }
.check a { color: var(--azul-ponto); font-weight: 600; }
.check--discreto { color: var(--texto-suave); }
.check--invalido input { outline: 2px solid var(--erro); outline-offset: 2px; }

.campo__erro {
  display: flex;
  gap: var(--space-2);
  margin-top: 6px;
  color: var(--erro);
  font-size: 13px;
  line-height: 19px;
  font-weight: 600;
}
.campo__erro::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; background: var(--erro); color: var(--branco); font-size: 11px; line-height: 1; }

.aviso-form {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--erro);
  border-radius: var(--radius-sm);
  background: var(--erro-fundo);
  color: var(--erro);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.aviso-form:empty { display: none; }
.aviso-form a { color: inherit; }

/* Honeypot fora da tela, fora da ordem de foco */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.form-rodape { margin-top: var(--space-3); text-align: center; color: var(--texto-suave); font-size: 13px; line-height: 19px; }

/* ---------- 2. Espelho ---------- */
.espelho { display: grid; gap: var(--space-8); }
.espelho__col { padding-top: var(--space-12); }
.espelho__eixo {
  position: absolute;
  top: var(--space-4); left: var(--space-6);
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: var(--traco-fino) solid var(--azul-ponto);
  border-radius: 50%;
  font-family: var(--fonte-dado);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.espelho__eixo::after {
  content: "";
  position: absolute;
  left: 100%; top: 50%;
  width: 72px; height: 1px;
  background: repeating-linear-gradient(90deg, var(--linha-forte) 0 6px, transparent 6px 10px);
}
.espelho__col h3 { margin-bottom: var(--space-4); }
.espelho__col p { color: var(--texto-suave); }
.espelho__col p + p { margin-top: var(--space-3); color: var(--azul-ponto); }
@media (min-width: 900px) {
  .espelho { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .espelho__col { padding-top: 72px; }
  .espelho__eixo { left: var(--space-8); top: var(--space-6); }
}

/* ---------- 3. O que e ---------- */
.oque { display: grid; gap: var(--space-8); }
.carimbo { border: var(--traco-moldura) solid var(--azul-ponto); border-radius: var(--radius-sm); background: var(--branco); }
.carimbo__topo {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: var(--azul-ponto);
  color: var(--branco);
  font-family: var(--fonte-dado);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ficha { display: grid; grid-template-columns: 1fr 1fr; }
.ficha__linha {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-bottom: var(--traco-fino) solid var(--linha);
}
.ficha__linha:last-child, .ficha__linha--meia { border-bottom: 0; }
.ficha__linha--meia { grid-column: auto; border-top: var(--traco-fino) solid var(--linha); margin-top: -1px; }
.ficha__linha--meia + .ficha__linha--meia { border-left: var(--traco-fino) solid var(--linha); }
.ficha dt {
  font-family: var(--fonte-dado);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--texto-suave);
}
.ficha__valor { font-family: var(--fonte-dado); font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -.01em; }

.naoinclui {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 12px);
  background: var(--fundo-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
/* Hachura de corte na lateral */
.naoinclui::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 12px;
  background: repeating-linear-gradient(135deg, var(--azul-ponto) 0 1px, transparent 1px 6px);
  opacity: .55;
}
.naoinclui h3 { margin-bottom: var(--space-4); }
.lista-x { list-style: none; padding: 0; }
.lista-x li { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--traco-fino) dashed var(--linha-forte); }
.lista-x li::before {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  margin-top: 8px;
  background:
    linear-gradient(45deg, transparent 45%, var(--texto-suave) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--texto-suave) 45% 55%, transparent 55%);
}
.naoinclui p { margin-top: var(--space-4); color: var(--texto-suave); font-size: 15px; line-height: 24px; }
@media (min-width: 600px) {
  .ficha__linha:not(.ficha__linha--meia) { grid-template-columns: 180px 1fr; gap: var(--space-6); padding: var(--space-4) var(--space-6); }
  .ficha__linha--meia { padding: var(--space-4) var(--space-6); }
}
@media (min-width: 900px) {
  .oque { grid-template-columns: 1.55fr 1fr; align-items: start; gap: var(--space-12); }
  .ficha__valor { font-size: 26px; line-height: 34px; }
}

/* ---------- 4. Como funciona (escura) ---------- */
.passos { position: relative; list-style: none; padding: 0; display: grid; gap: var(--space-8); counter-reset: passo; }
.passo { position: relative; padding-left: var(--space-12); counter-increment: passo; }
/* Mobile: linha vertical conectando os nos */
.passos::before {
  content: "";
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--linha-escura);
}
.passo__no {
  position: absolute;
  left: 0; top: 2px;
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  border: var(--traco-fino) solid var(--branco);
  border-radius: 50%;
  background: var(--azul-ponto);
}
.passo__no .ponto { width: 9px; height: 9px; }
.passo::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--fonte-dado);
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
}
.passo h3 { margin-bottom: var(--space-2); color: var(--branco); }
.passo p { color: var(--texto-suave-escuro); }
.passo--destaque::before { -webkit-text-stroke-color: var(--laranja-ponto); }
.passo--destaque .passo__no { border-color: var(--laranja-ponto); }

.como__rodape { display: grid; gap: var(--space-6); margin-top: var(--space-8); align-items: center; }
.nota-inversa {
  padding: var(--space-4) var(--space-6);
  border: var(--traco-fino) dashed rgba(255, 255, 255, .35);
  border-radius: var(--radius-sm);
  color: var(--texto-suave-escuro);
  max-width: var(--largura-leitura);
}
.nota-inversa strong { color: var(--branco); font-weight: 600; }
.como__rodape .btn { justify-self: start; }
@media (min-width: 900px) {
  .passos { grid-template-columns: repeat(4, 1fr); gap: var(--space-8); padding-top: var(--space-8); }
  .passos::before { left: 0; right: 0; top: 16px; bottom: auto; width: auto; height: 1px; }
  .passo { padding-left: 0; padding-top: var(--space-8); }
  .passo__no { top: -24px; }
  .passo::before { font-size: 56px; line-height: 60px; }
  .como__rodape { grid-template-columns: 1fr auto; }
}

/* ---------- 5. Por que a Ponto ---------- */
.razoes { list-style: none; padding: 0; display: grid; gap: var(--space-8); }
.razao__n {
  display: inline-block;
  margin-bottom: var(--space-6);
  padding: 2px var(--space-2);
  border: var(--traco-fino) solid var(--azul-ponto);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .08em;
}
.razao h3 { margin-bottom: var(--space-3); }
.razao p { color: var(--texto-suave); }
@media (min-width: 900px) {
  .razoes { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* ---------- 6. Prova ---------- */
.numeros {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.numero {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  border-left: var(--traco-moldura) solid var(--azul-ponto);
}
.numero dd {
  font-family: var(--fonte-dado);
  font-weight: 500;
  font-size: 52px;
  line-height: 56px;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.numero dt {
  margin-top: var(--space-2);
  font-family: var(--fonte-dado);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--texto-suave);
}

.galeria { display: grid; gap: var(--space-4); }
.galeria__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); }
.galeria__item .midia { aspect-ratio: 16 / 10; border-radius: 0; height: 100%; }
.galeria__item img { transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .galeria__item:hover img { scale: 1.04; }
}
/* Legenda num bloco solido (manual: texto nunca solto sobre a foto) */
.galeria__item .legenda {
  position: absolute;
  left: 0; bottom: 0;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 12px;
  background: var(--azul-ponto);
  color: var(--branco);
  border-top-right-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 18px;
}
.legenda__n { font-family: var(--fonte-dado); font-weight: 500; color: var(--texto-suave-escuro); margin-right: 6px; }
@media (min-width: 600px) {
  .numeros { grid-template-columns: repeat(3, 1fr); }
  .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .galeria__item .midia { aspect-ratio: auto; }
  .galeria__item--a { grid-column: 1 / -1; grid-row: span 2; }
}
@media (min-width: 900px) {
  .numero dd { font-size: 64px; line-height: 68px; }
  .galeria { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 230px; gap: var(--space-6); }
  .galeria__item--a { grid-column: 1; grid-row: 1 / span 2; }
  .galeria__item--d { grid-column: 2 / span 2; }
}
@media (min-width: 1100px) {
  .numero dd { font-size: 76px; line-height: 80px; }
}

/* ---------- 7. Quem responde ---------- */
.rt { display: grid; gap: var(--space-8); align-items: center; }
.rt__foto { max-width: 300px; }
.rt__foto .moldura { padding: var(--space-4); }
.iniciais {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(var(--malha-clara) 1px, transparent 1px),
    linear-gradient(90deg, var(--malha-clara) 1px, transparent 1px),
    var(--concreto);
  background-size: 20px 20px, 20px 20px, auto;
  border-radius: var(--radius-sm);
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
  color: var(--azul-ponto);
  letter-spacing: .02em;
}
.rt__nome { margin-bottom: var(--space-6); }
.rt__carimbo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 520px;
  border: var(--traco-fino) solid var(--azul-ponto);
  border-radius: var(--radius-sm);
}
.rt__carimbo div { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); }
.rt__carimbo div + div { border-left: var(--traco-fino) solid var(--azul-ponto); }
.rt__carimbo dt {
  font-family: var(--fonte-dado);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.rt__carimbo dd { font-weight: 600; font-size: 16px; line-height: 24px; }
.rt__carimbo dd.dado { font-size: 15px; }
.rt__texto { margin-top: var(--space-6); color: var(--texto-suave); }
@media (min-width: 900px) {
  .rt { grid-template-columns: 300px 1fr; gap: var(--space-16); }
}

/* ---------- 8. FAQ (details/summary) ---------- */
.faq-grade { display: grid; gap: var(--space-4); }
.faq { border-top: var(--traco-fino) solid var(--azul-ponto); counter-reset: q; }
.faq__item { border-bottom: var(--traco-fino) solid var(--linha-forte); counter-increment: q; }
.faq__item summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--toque-min);
  padding: var(--space-4) 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  cursor: pointer;
  list-style: none;
  transition: color .15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "Q." counter(q, decimal-leading-zero);
  flex: none;
  min-width: 40px;
  font-family: var(--fonte-dado);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--texto-suave);
}
.faq__item summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 32px; height: 32px;
  border: var(--traco-fino) solid var(--linha-forte);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: background-size .2s ease, background-color .2s ease, border-color .2s ease;
}
.faq__item summary:hover::after { border-color: var(--azul-ponto); }
.faq__item[open] summary::after {
  background-color: var(--azul-ponto);
  border-color: var(--azul-ponto);
  background-image: linear-gradient(var(--branco), var(--branco)), linear-gradient(var(--branco), var(--branco));
  background-size: 12px 1.5px, 1.5px 0;
}
.faq__resposta { padding: 0 0 var(--space-6) 56px; max-width: var(--largura-leitura); color: var(--texto-suave); }
.faq__resposta p + p { margin-top: var(--space-3); }
@media (min-width: 900px) {
  .faq-grade { grid-template-columns: 1fr 1.7fr; gap: var(--space-16); align-items: start; }
  .faq-grade__cabeca { position: sticky; top: var(--space-8); }
  .faq__item summary { font-size: 20px; line-height: 28px; padding: var(--space-6) 0; }
}

/* ---------- 9. Pedido final (escura) ---------- */
.secao--pedido { scroll-margin-top: 0; }
.form-secao__grade { display: grid; gap: var(--space-12); }
.form-secao__sub { margin-top: var(--space-4); color: var(--texto-suave-escuro); font-size: 18px; line-height: 28px; }
.trilha { list-style: none; padding: 0; margin-top: var(--space-8); counter-reset: t; }
.trilha li {
  position: relative;
  padding: 0 0 var(--space-6) var(--space-12);
  counter-increment: t;
  color: var(--branco);
}
.trilha li::before {
  content: counter(t, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: var(--traco-fino) solid var(--linha-escura);
  border-radius: 50%;
  font-family: var(--fonte-dado);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--texto-suave-escuro);
  background: var(--azul-ponto);
}
.trilha li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px; top: 32px; bottom: 2px;
  width: 1px;
  background: var(--linha-escura);
}
@media (min-width: 900px) {
  .form-secao__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: var(--space-16); align-items: start; }
  .form-secao__lado { position: sticky; top: var(--space-8); }
}

/* ---------- Rodape ---------- */
.rodape { padding: var(--space-12) 0 var(--space-8); background: var(--branco); border-top: var(--traco-fino) solid var(--linha); }
.rodape__grade { display: grid; gap: var(--space-8); }
.rodape__dados { display: grid; gap: var(--space-2); font-size: var(--pequeno-tam); line-height: var(--pequeno-ent); color: var(--texto-suave); }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--pequeno-tam); }
.rodape__links a, .link-botao {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  color: var(--azul-ponto);
  font-weight: 600;
}
.link-botao { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rodape__base { margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--traco-fino) solid var(--linha); font-size: var(--pequeno-tam); color: var(--texto-suave); }
@media (min-width: 900px) {
  .rodape__grade { grid-template-columns: auto 1fr auto; align-items: start; gap: var(--space-12); }
}
.rodape--escuro { background: var(--azul-ponto); border-top-color: var(--linha-escura); }
.rodape--escuro .rodape__dados,
.rodape--escuro .rodape__base { color: var(--texto-suave-escuro); }
.rodape--escuro .rodape__links a,
.rodape--escuro .link-botao { color: var(--branco); }
.rodape--escuro .rodape__base { border-top-color: var(--linha-escura); }

/* ---------- Barra CTA fixa (mobile) ---------- */
.barra-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--azul-ponto);
  border-top: var(--traco-fino) solid var(--linha-escura);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .2s ease, visibility 0s linear .2s;
}
.barra-cta .btn { width: 100%; }
.barra-cta.is-visivel { transform: translateY(0); visibility: visible; transition: transform .2s ease, visibility 0s; }
body.tem-barra-cta { padding-bottom: 72px; }
@media (min-width: 900px) {
  .barra-cta { display: none; }
  body.tem-barra-cta { padding-bottom: 0; }
}
body.cookies-aberto .barra-cta { visibility: hidden; }

/* ---------- Aviso de cookies (compacto) ---------- */
.cookies {
  position: fixed;
  left: var(--space-2); right: var(--space-2);
  bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  background: var(--azul-ponto);
  color: var(--branco);
  border: var(--traco-fino) solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 18px;
  --cor-foco: var(--laranja-ponto);
  animation: subir .4s ease both;
}
.cookies p { flex: 1; min-width: 0; }
.cookies a { color: var(--branco); font-weight: 600; white-space: nowrap; }
.cookies__acoes { display: flex; gap: var(--space-1); flex: none; }
.cookies .btn {
  min-height: var(--toque-min);
  padding: 0 var(--space-3);
  font-size: 14px;
  color: var(--branco);
  border-color: rgba(255, 255, 255, .5);
  background: transparent;
}
.cookies .btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--branco); }
@media (min-width: 600px) {
  .cookies { left: var(--space-4); right: auto; bottom: var(--space-4); max-width: 460px; }
}

/* ---------- Animacao de entrada (so com JS e sem movimento reduzido) ---------- */
.js-anima [data-revelar] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1), translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.js-anima [data-revelar].is-visivel { opacity: 1; transform: none; }
.js-anima [data-revelar="2"] { transition-delay: .1s; }
.js-anima [data-revelar="3"] { transition-delay: .2s; }
.js-anima [data-revelar="4"] { transition-delay: .3s; }

/* ---------- Paginas internas (obrigado, privacidade) ---------- */
.pagina { padding: var(--space-12) 0 var(--secao-pad); }
.pagina .moldura { max-width: 760px; }
.pagina .hero__sub { color: var(--texto-suave); }
.proximos { list-style: none; padding: 0; margin-top: var(--space-8); max-width: var(--largura-leitura); }
.proximos li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top: var(--traco-fino) solid var(--linha); }
.proximos li:last-child { border-bottom: var(--traco-fino) solid var(--linha); }
.proximos__n { font-family: var(--fonte-dado); font-weight: 500; font-size: var(--dado-tam); line-height: 28px; color: var(--texto-suave); }
.proximos h2 { font-size: var(--titulo-3-tam); line-height: var(--titulo-3-ent); margin-bottom: var(--space-1); }
.proximos p { color: var(--texto-suave); }
.proximos .ponto { width: 12px; height: 12px; margin-left: var(--space-2); vertical-align: middle; }

.texto-legal { max-width: var(--largura-leitura); }
.texto-legal h2 { font-size: var(--titulo-2-tam); line-height: var(--titulo-2-ent); margin: var(--space-12) 0 var(--space-4); }
.texto-legal h3 { font-size: var(--titulo-3-tam); line-height: var(--titulo-3-ent); margin: var(--space-6) 0 var(--space-2); }
.texto-legal p, .texto-legal ul { margin-bottom: var(--space-4); }
.texto-legal ul { padding-left: 1.2em; }
.texto-legal li + li { margin-top: var(--space-2); }
.tabela-legal { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); font-size: var(--pequeno-tam); line-height: var(--pequeno-ent); }
.tabela-legal th, .tabela-legal td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: var(--traco-fino) solid var(--linha); }
.tabela-legal th { font-weight: 600; background: var(--fundo-alt); }
.tabela-rolagem { overflow-x: auto; }
.pendente { background: var(--destaque-fundo); padding: 0 var(--space-1); border-radius: 2px; font-family: var(--fonte-dado); font-size: .9em; }
.pagina__nota { margin-top: var(--space-8); }
.pagina__acao { margin-top: var(--space-6); }

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .btn__giro { animation: none; border-right-color: currentColor; opacity: .6; }
}

/* ---------- Ajustes de telas pequenas e baixas (revisao mobile, v3) ---------- */
/* Fundo da pagina = rodape escuro: a folga da barra CTA nao vira faixa branca */
body.lp { background: var(--azul-ponto); }
/* Folga para o aviso de cookies nao cobrir o fim da pagina */
body.cookies-aberto { padding-bottom: 96px; }

/* Notebook baixo (1366x620, 1280x600): hero mais curto, cartao inteiro mais perto do topo */
@media (min-width: 1000px) and (max-height: 760px) {
  .hero { padding-top: 148px; min-height: 0; }
  .hero__eixos { top: 120px; }
}

/* Abaixo de 1000 px (celular, tablet, celular deitado) as bolhas dos eixos colidiam com o
   chapeu do hero; ficam so as linhas tracejadas */
@media (max-width: 999px), (max-height: 480px) and (orientation: landscape) {
  .eixo, .eixo:nth-child(2), .eixo:nth-child(4) { width: 1px; height: 1px; border: 0; font-size: 0; color: transparent; }
}

@media (max-width: 599px) {
  /* "ATENDIMENTO" em mono espacado nao cabia na coluna */
  .hero__ficha dt { font-size: 10px; letter-spacing: .06em; }
  .hero__ficha dd { font-size: 15px; }
  /* Prazo/Custo da ficha tecnica: valor numa linha so */
  .ficha__valor { font-size: 17px; line-height: 24px; white-space: nowrap; letter-spacing: -.03em; }
  /* Linha do tempo: no alinhado ao numero grande */
  .passo__no { top: 13px; }
  .como__rodape .btn { justify-self: stretch; }
  /* Galeria: legenda abaixo da foto (sobreposta cobria metade da imagem) */
  .galeria__item { background: var(--azul-ponto); }
  .galeria__item .midia { height: auto; }
  .galeria__item .legenda { position: static; max-width: none; border-radius: 0; padding: 8px 12px; }
  /* Quem responde: placeholder menor e carimbo empilhado (o CREA quebrava no meio) */
  .rt__foto { max-width: 200px; }
  .iniciais { font-size: 56px; }
  .rt__carimbo { grid-template-columns: 1fr; }
  .rt__carimbo div + div { border-left: 0; border-top: var(--traco-fino) solid var(--azul-ponto); }
  /* FAQ: resposta sem recuo para nao estreitar o texto */
  .faq__item summary { gap: var(--space-3); font-size: 17px; line-height: 24px; }
  .faq__item summary::before { min-width: 32px; font-size: 11px; }
  .faq__resposta { padding-left: 0; }
  /* Aviso de cookies: texto em ate 2 linhas */
  .cookies { gap: var(--space-2); font-size: 12.5px; line-height: 17px; }
  .cookies .btn { padding: 0 10px; }
}
.rt__carimbo dd.dado, .hero__rt .dado { white-space: nowrap; }

/* Celular deitado (740x360): hero com menos respiro vertical */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: 128px; }
  .hero__eixos { top: 116px; }
  .cookies { left: auto; right: var(--space-2); max-width: 440px; }
}

/* ---------- Etapa 2 em passo a passo (quiz, montado pelo lp.js) ---------- */
.etapa-status[data-etapa="2"] .etapa-status__barra span { width: var(--progresso, 100%); }
.quiz .form-etapa__titulo { margin-bottom: var(--space-2); font-size: 15px; line-height: 22px; color: var(--texto-suave); }
.quiz .grade-campos { display: block; }
.quiz .quiz__passo { margin: 0; }
.quiz .quiz__passo > legend,
.quiz .quiz__passo > label {
  margin-bottom: var(--space-4);
  font-size: 20px;
  line-height: 27px;
  letter-spacing: -.01em;
}
.quiz .quiz__passo .campo__dica { margin: -8px 0 var(--space-3); }
.quiz .chips { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@container (min-width: 340px) {
  .quiz .chips { grid-template-columns: 1fr 1fr; }
}
.quiz .chip { display: flex; }
.quiz .chip span { flex: 1; min-height: 52px; padding: 12px 14px; font-size: 15px; line-height: 20px; }
.quiz .chips--mono span { font-size: 14px; }
.quiz__passo--frente { animation: quizFrente .28s cubic-bezier(.2, .7, .2, 1) both; }
.quiz__passo--tras { animation: quizTras .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes quizFrente { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes quizTras { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.quiz__nav { display: flex; align-items: center; gap: var(--space-3); min-height: var(--toque-min); margin-top: var(--space-6); }
.quiz__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--toque-min);
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--azul-ponto);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.quiz__voltar::before {
  content: "";
  width: 8px; height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
}
.quiz__nav .btn { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .quiz__passo--frente, .quiz__passo--tras { animation: none; }
}