/* Carletti Contabilidade: prévia feita pela Capixel (27/10/2026). HTML, CSS e JS puros, sem build.
   Ideia visual: a caixa d'água da empresa (o caixa, o pró-labore com hidrômetro e o lucro que sobra), desenhada como planta técnica
   no azul-marinho e no turquesa do logo. Títulos em caixa alta condensada, como nos posts da Carletti; papel de livro-razão nos desenhos.
   Letra Archivo (larguras 75 a 100), números claros para um público de empresários. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(fontes/archivo.woff2) format("woff2");
}

:root {
  --marinho: #232c6f;
  --noite: #161c4d;
  --noite-2: #10153b;
  --tinta: #141a4a;
  --turquesa: #68bbc8;
  --turquesa-texto: #24727e;
  --turquesa-claro: #cbecf1;
  --turquesa-palido: #e8f5f8;
  --papel: #f3f8fa;
  --linha: #d3e3ea;
  --texto: #353d63;
  --suave: #4b587c;
  --claro-1: #c9d0f0;
  --claro-2: #aab3df;
  --indigo: #3a4590;
  --zap: #1a7f45;
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --largura: 1200px;
  --margem: 20px;
  --topo-altura: 64px;
  --sombra: 0 1px 2px rgba(20, 26, 74, .06), 0 12px 32px rgba(20, 26, 74, .09);
  --curva: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 640px) { :root { --margem: 32px; } }
@media (min-width: 1024px) { :root { --margem: 48px; --topo-altura: 74px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 12px); }
body {
  margin: 0; background: #fff; color: var(--texto);
  font-family: var(--fonte); font-size: 1.0625rem; line-height: 1.62; font-weight: 400; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 1.125rem; } }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, dl, dd, ol, ul, address, fieldset, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--turquesa-texto); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--marinho); }
button, input, select { font: inherit; color: inherit; }
strong { font-weight: 700; color: var(--tinta); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--turquesa-texto); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--turquesa-claro); color: var(--tinta); }
input, select { caret-color: var(--marinho); accent-color: var(--marinho); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--marinho); color: #fff; border-radius: 10px; font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }
.pular:hover, .pular:focus { color: #fff; }

h1, h2 { font-stretch: 78%; font-weight: 780; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; color: var(--tinta); }
h2 { font-size: clamp(2.05rem, 1.45rem + 2.6vw, 3.4rem); line-height: 1; }
h2 span { color: var(--turquesa-texto); }
h3 { color: var(--tinta); font-weight: 700; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; }
p { text-wrap: pretty; }
.intro { font-size: 1.12em; color: var(--suave); max-width: 40em; margin-top: 18px; }
.etiqueta {
  display: inline-block; margin-bottom: 16px; padding: 5px 10px 4px; border-radius: 6px;
  background: var(--turquesa); color: var(--tinta); font-weight: 700; font-size: .78rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
}

.botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 12px;
  font-weight: 700; font-size: 1.05rem; line-height: 1.2; text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--curva), box-shadow .2s;
}
.botao svg { width: 22px; height: 22px; flex: none; }
.botao--turquesa { background: var(--turquesa); color: var(--tinta); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .6); }
.botao--turquesa:hover { background: #82cbd6; color: var(--tinta); transform: translateY(-2px); }
.botao--marinho { background: var(--marinho); color: #fff; box-shadow: 0 10px 22px -14px rgba(20, 26, 74, .8); }
.botao--marinho:hover { background: var(--tinta); color: #fff; transform: translateY(-2px); }
.botao--claro { color: #fff; border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .04); }
.botao--claro:hover { color: #fff; border-color: #fff; transform: translateY(-2px); }
.botao--linha { color: var(--tinta); border-color: rgba(20, 26, 74, .25); background: #fff; }
.botao--linha:hover { color: var(--tinta); border-color: var(--tinta); transform: translateY(-2px); }
.botao:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
@media (max-width: 479px) { .botoes .botao { width: 100%; } }

/* ---------- faixa da prévia e topo ---------- */
.faixa-previa { background: var(--noite-2); color: var(--claro-1); font-size: .8125rem; line-height: 1.3; text-align: center; padding: 8px 16px; letter-spacing: .01em; }

.topo { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .95); backdrop-filter: saturate(1.3) blur(10px); -webkit-backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.topo.rolou { border-color: var(--linha); box-shadow: 0 6px 24px -18px rgba(20, 26, 74, .55); }
.topo__dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); height: var(--topo-altura); display: flex; align-items: center; gap: 22px; }
.topo__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; padding: 4px 0; color: var(--marinho); }
.topo__simbolo { width: 32px; height: 39px; flex: none; color: var(--turquesa); }
.topo__nome { display: flex; flex-direction: column; gap: 5px; }
.topo__palavra { width: 118px; height: 12px; color: var(--marinho); }
.topo__sub { font-size: .62rem; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--turquesa-texto); font-weight: 600; white-space: nowrap; }
.topo__nav { display: none; gap: 2px; }
.topo__nav a { color: var(--texto); text-decoration: none; font-weight: 600; font-size: .98rem; padding: 10px 13px; border-radius: 8px; transition: background-color .2s, color .2s; }
.topo__nav a:hover { background: var(--turquesa-palido); color: var(--tinta); }
.topo__nav a[aria-current="true"] { color: var(--tinta); background: var(--turquesa-palido); box-shadow: inset 0 -2px 0 var(--turquesa); }
.topo__zap { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 13px; border-radius: 10px; background: var(--marinho); color: #fff; font-weight: 700; font-size: .98rem; text-decoration: none; transition: background-color .2s, transform .2s var(--curva); }
.topo__zap:hover { background: var(--tinta); color: #fff; transform: translateY(-1px); }
.topo__zap svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 960px) { .topo__simbolo { width: 36px; height: 44px; } .topo__palavra { width: 134px; height: 13.2px; } }
@media (min-width: 1140px) { .topo__nav { display: flex; } }
@media (max-width: 479px) { .topo__sub-mais { display: none; } .topo__dentro { gap: 12px; } .topo__zap { padding: 0 14px 0 12px; } }
@media (max-width: 339px) { .topo__zap span { display: none; } }

/* ---------- capa ---------- */
.capa {
  position: relative; overflow: hidden; color: var(--claro-1);
  background-color: var(--noite);
  background-image:
    radial-gradient(ellipse 70% 60% at 85% 30%, rgba(104, 187, 200, .16), transparent 70%),
    linear-gradient(rgba(104, 187, 200, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 187, 200, .06) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
}
.capa__dentro { position: relative; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 44px var(--margem) 56px; display: grid; gap: 40px; }
.capa__onde { font-size: .95rem; font-weight: 600; color: var(--turquesa); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.capa h1 { color: #fff; font-size: clamp(2.5rem, 1.5rem + 3.9vw, 4.35rem); line-height: .98; max-width: 13ch; font-weight: 800; }
.capa h1 em { font-style: normal; color: var(--turquesa); }
.capa__lead { margin-top: 22px; font-size: 1.1rem; line-height: 1.58; max-width: 34em; color: var(--claro-1); }
.capa .status { margin-top: 26px; }
.capa__caixa { margin: 0; }
.caixa { position: relative; border-radius: 22px; border: 1px solid rgba(104, 187, 200, .28); background: rgba(10, 14, 46, .42); padding: 14px 10px 6px; }
.caixa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(rgba(104, 187, 200, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 187, 200, .07) 1px, transparent 1px); background-size: 16px 16px; }
.caixa__svg { position: relative; width: 100%; height: auto; overflow: visible; }
.capa__caixa figcaption { margin-top: 14px; font-size: .98rem; line-height: 1.5; color: var(--claro-2); max-width: 36em; }
@media (min-width: 640px) { .capa__dentro { padding-top: 64px; } .capa__lead { font-size: 1.2rem; } }
@media (min-width: 1024px) {
  .capa__dentro { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); column-gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 92px; }
  .capa h1 { max-width: 13ch; }
}

/* desenho da caixa d'água */
.caixa__svg text { font-family: var(--fonte); font-stretch: 85%; font-weight: 700; font-size: 16px; letter-spacing: .06em; fill: var(--turquesa-claro); }
.caixa__svg .cx-miudo { font-stretch: 100%; font-weight: 500; font-size: 14px; letter-spacing: 0; fill: var(--claro-2); }
@media (max-width: 639px) { .caixa__svg text { font-size: 19px; letter-spacing: .03em; } .caixa__svg .cx-miudo { font-size: 16px; } .caixa__svg .cx-placa text, .caixa__svg .cx-lucro text:last-child { font-size: 17px; } }
.cx-cano { fill: none; stroke: var(--turquesa); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.cx-fluxo { fill: none; stroke: #effcff; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .1 15; }
.cx-gotas circle { fill: #bfe7ee; opacity: 0; }
.cx-fundo { fill: #1d2560; }
.cx-tanque { fill: none; stroke: var(--turquesa); stroke-width: 4; }
.cx-tampa { fill: var(--marinho); stroke: var(--turquesa); stroke-width: 3; }
.cx-alca { fill: var(--turquesa); }
.cx-agua { transform-box: fill-box; transform-origin: 50% 100%; }
.cx-agua__corpo { fill: rgba(104, 187, 200, .5); }
.cx-onda { fill: #8fd0da; }
.cx-placa rect { fill: #fff; }
.caixa__svg .cx-placa text { fill: var(--marinho); font-weight: 800; font-size: 15px; text-anchor: middle; }
.cx-regua { fill: none; stroke: var(--claro-2); stroke-width: 2; stroke-linecap: round; }
.cx-ponteiro { fill: var(--turquesa); }
.cx-lucro rect { fill: var(--turquesa); }
.caixa__svg .cx-lucro text:last-child { fill: var(--tinta); font-weight: 800; text-anchor: middle; }
.cx-guia rect { fill: var(--marinho); stroke: var(--turquesa); stroke-width: 3; }
.cx-guia path { fill: none; stroke: var(--turquesa-claro); stroke-width: 2.5; stroke-linecap: round; }
.cx-hidro__corpo { fill: var(--marinho); stroke: var(--turquesa); stroke-width: 4; }
.cx-hidro__marcas { fill: none; stroke: var(--turquesa-claro); stroke-width: 2; stroke-linecap: round; }
.cx-ponteiro-hidro { transform-box: view-box; transform-origin: 400px 314px; }
.cx-ponteiro-hidro path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.cx-hidro__eixo { fill: var(--turquesa); }
.cx-casa__corpo { fill: var(--marinho); stroke: var(--turquesa); stroke-width: 3; stroke-linejoin: round; }
.cx-casa__janela { fill: var(--turquesa-claro); }
.cx-hidro, .cx-casa, .cx-guia, .cx-placa, .cx-lucro { transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
  html.anima .caixa .cx-tanque, html.anima .caixa .cx-tampa { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.anima .caixa .cx-fundo, html.anima .caixa .cx-alca, html.anima .caixa .cx-placa, html.anima .caixa .cx-regua, html.anima .caixa .cx-lucro,
  html.anima .caixa .cx-guia, html.anima .caixa .cx-hidro, html.anima .caixa .cx-casa, html.anima .caixa .cx-rotulo, html.anima .caixa .cx-fluxo { opacity: 0; }
  html.anima .caixa .cx-cano { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.anima .caixa .cx-agua { transform: scaleY(0); }
  html.anima .caixa .cx-ponteiro { opacity: 0; transform: translateY(128px); }
  html.anima .caixa.rodando .cx-tanque, html.anima .caixa.rodando .cx-tampa { animation: desenha 1s .15s var(--curva) forwards; }
  html.anima .caixa.rodando .cx-fundo { animation: surge .8s .35s ease forwards; }
  html.anima .caixa.rodando .cx-alca { animation: surge .4s .9s ease forwards; }
  html.anima .caixa.rodando .cx-cano { animation: desenha .7s calc(2.15s + var(--i, 0) * .16s) cubic-bezier(.45, .05, .35, 1) forwards; }
  html.anima .caixa.rodando .cx-cano--entrada { animation-delay: .5s; animation-duration: .9s; }
  html.anima .caixa.rodando .cx-agua { animation: enche 1.4s 1.25s cubic-bezier(.3, .6, .3, 1) forwards; }
  html.anima .caixa.rodando .cx-placa { animation: aparece .5s 1.9s var(--curva) forwards; }
  html.anima .caixa.rodando .cx-regua { animation: surge .5s 2.2s ease forwards; }
  html.anima .caixa.rodando .cx-ponteiro { animation: sobe 1.2s 1.45s cubic-bezier(.3, .6, .3, 1) forwards; }
  html.anima .caixa.rodando .cx-lucro { animation: aparece .5s 2.75s var(--curva) forwards; }
  html.anima .caixa.rodando .cx-guia { animation: aparece .45s 2.6s var(--curva) forwards; }
  html.anima .caixa.rodando .cx-hidro { animation: aparece .45s 2.8s var(--curva) forwards; }
  html.anima .caixa.rodando .cx-casa { animation: aparece .45s 2.95s var(--curva) forwards; }
  html.anima .caixa.rodando .cx-rotulo { animation: surge .5s calc(2.5s + var(--i, 0) * .14s) ease forwards; }
  html.anima .caixa.rodando .cx-rotulo[style*="--i:0"] { animation-delay: .7s; }
  html.anima .caixa.rodando .cx-fluxo { animation: surge .4s 3.1s ease forwards, flui 1.1s 3.1s linear infinite; }
  html.anima .caixa.rodando .cx-fluxo:not(.cx-fluxo--saida) { animation-delay: 1.3s, 1.3s; }
  html.anima .caixa.rodando .cx-gotas circle { animation: gota 1.1s linear infinite; }
  html.anima .caixa.rodando .cx-gotas circle:nth-child(1) { animation-delay: 1.3s; }
  html.anima .caixa.rodando .cx-gotas circle:nth-child(2) { animation-delay: 1.66s; }
  html.anima .caixa.rodando .cx-gotas circle:nth-child(3) { animation-delay: 2.03s; }
  html.anima .caixa.rodando .cx-onda { animation: onda 3.2s linear infinite; }
  html.anima .caixa.rodando .cx-ponteiro-hidro { animation: gira 4s 3.1s linear infinite; }
  html.anima .caixa.pausado .cx-fluxo, html.anima .caixa.pausado .cx-gotas circle, html.anima .caixa.pausado .cx-onda, html.anima .caixa.pausado .cx-ponteiro-hidro { animation-play-state: paused; }
}
@keyframes enche { to { transform: scaleY(1); } }
@keyframes sobe { 0% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes flui { to { stroke-dashoffset: -15.1; } }
@keyframes gota { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes onda { to { transform: translateX(-50px); } }
@keyframes gira { to { transform: rotate(360deg); } }

/* status aberto/fechado */
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--tinta); font-size: 1rem; line-height: 1.35; }
.status--escuro { color: #fff; }
.status__ponto { position: relative; width: 12px; height: 12px; border-radius: 50%; background: #9aa3ad; flex: none; }
.status.aberto .status__ponto { background: #3ccf8e; }
.status.aberto .status__ponto::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #3ccf8e; opacity: 0; animation: anel 2.4s ease-out infinite; }
.status.almoco .status__ponto { background: #f2c14e; }
@keyframes anel { 0% { transform: scale(.5); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ---------- consultiva ---------- */
.consultiva { padding: clamp(72px, 9vw, 128px) 0; }
.consultiva__dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 40px; }
.consultiva h2 { max-width: 16ch; }
.consultiva h2 span { display: block; }
.anos { margin-top: 30px; display: flex; align-items: center; gap: 18px; }
.anos__n { font-stretch: 75%; font-weight: 800; font-size: clamp(4.2rem, 3rem + 4vw, 6rem); line-height: .85; color: var(--marinho); font-variant-numeric: tabular-nums; min-width: 1.15em; }
.anos__t { font-weight: 600; color: var(--tinta); max-width: 16em; line-height: 1.4; }
.consultiva__foto img { width: 100%; border-radius: 22px; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--sombra); }
.consultiva__foto figcaption { margin-top: 10px; font-size: .95rem; color: var(--suave); }
.comparativo { border: 1px solid var(--linha); border-radius: 22px; background: #fff; box-shadow: var(--sombra); padding: 6px 8px 18px; }
.comparativo table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.comparativo caption { text-align: left; padding: 16px 12px 8px; font-weight: 700; color: var(--tinta); font-size: 1.08rem; }
.comparativo th, .comparativo td { padding: 14px 10px; border-top: 1px solid var(--linha); vertical-align: middle; text-align: center; }
.comparativo thead th { border-top: 0; font-size: .85rem; color: var(--suave); font-weight: 700; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
.comparativo thead th:last-child { color: var(--turquesa-texto); }
.comparativo th[scope="row"], .comparativo thead th:first-child { text-align: left; padding-left: 12px; }
.comparativo th[scope="row"] { font-weight: 700; color: var(--tinta); line-height: 1.3; }
.comparativo th[scope="row"] span { display: block; font-weight: 400; color: var(--suave); font-size: .9rem; margin-top: 2px; }
.comparativo td svg { width: 24px; height: 24px; margin: 0 auto; color: var(--turquesa-texto); }
.comparativo td:last-child { background: var(--turquesa-palido); }
.comparativo tbody tr:last-child td:last-child { border-radius: 0 0 12px 12px; }
.comparativo td.nao { color: #9aa3b8; font-weight: 700; }
.comparativo__nota { margin: 16px 12px 0; padding-top: 14px; border-top: 1px dashed var(--linha); color: var(--suave); font-size: 1rem; }
@media (max-width: 479px) { .comparativo th, .comparativo td { padding: 12px 6px; } .comparativo thead th { font-size: .74rem; } .comparativo th[scope="row"] { padding-left: 8px; } }
@media (min-width: 640px) and (max-width: 999px) {
  .consultiva__dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "texto texto" "foto tabela"; align-items: start; }
  .consultiva__texto { grid-area: texto; } .consultiva__foto { grid-area: foto; } .comparativo { grid-area: tabela; }
}
@media (min-width: 1000px) {
  .consultiva__dentro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "texto foto" "tabela foto"; column-gap: 72px; row-gap: 44px; align-items: start; }
  .consultiva__texto { grid-area: texto; } .consultiva__foto { grid-area: foto; position: sticky; top: calc(var(--topo-altura) + 24px); } .comparativo { grid-area: tabela; }
}

/* ---------- serviços ---------- */
.servicos { background: var(--papel); padding: clamp(72px, 9vw, 128px) 0; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.servicos__cabeca, .servicos__grade { max-width: calc(var(--largura) + 2 * var(--margem)); margin-left: auto; margin-right: auto; padding-left: var(--margem); padding-right: var(--margem); }
.servicos__cabeca h2 { max-width: 16ch; }
.servicos__grade { margin-top: 44px; display: grid; gap: 22px; }
@media (min-width: 720px) { .servicos__grade { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .servicos__grade { grid-template-columns: repeat(3, 1fr); } }
.servico { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linha); border-radius: 22px; overflow: hidden; transition: border-color .25s, box-shadow .3s var(--curva), transform .3s var(--curva); }
.servico:hover, .servico:focus-within { border-color: #a9d3dc; box-shadow: 0 18px 40px -26px rgba(20, 26, 74, .5); transform: translateY(-3px); }
.servico__tela {
  position: relative; aspect-ratio: 360 / 172; padding: 6px 10px 2px;
  background-color: #f7fbfc;
  background-image:
    linear-gradient(90deg, transparent 27px, rgba(104, 187, 200, .45) 27px, rgba(104, 187, 200, .45) 28px, transparent 28px),
    repeating-linear-gradient(to bottom, transparent 0 21px, rgba(35, 44, 111, .07) 21px 22px);
  border-bottom: 1px solid var(--linha);
}
.servico__tela svg { width: 100%; height: 100%; overflow: visible; }
.servico__corpo { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.servico__pergunta { font-weight: 600; color: var(--turquesa-texto); font-size: .98rem; }
.servico h3 { margin-top: 6px; font-size: 1.42rem; font-stretch: 90%; }
.servico__corpo > p:not(.servico__pergunta) { margin-top: 10px; margin-bottom: 22px; }
.servico__botao {
  margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; border-radius: 12px; padding: 0 16px;
  border: 2px solid var(--marinho); color: var(--marinho); font-weight: 700; text-decoration: none; font-size: 1rem;
  transition: background-color .2s, color .2s;
}
.servico__botao svg { width: 20px; height: 20px; }
.servico__botao:hover { background: var(--marinho); color: #fff; }

/* desenhos (serviços, transição e kit) */
.vis { font-family: var(--fonte); }
.vis text { font-family: var(--fonte); }
.vis__cartao { fill: #fff; stroke: #bcd3de; stroke-width: 1.6; }
.vis__cartao-topo { fill: var(--marinho); }
.vis__argolas rect { fill: var(--turquesa); }
.vis__dias rect { fill: var(--papel); stroke: #d6e4ea; stroke-width: 1; }
.vis__prazos rect { fill: var(--turquesa-claro); stroke: var(--turquesa); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; }
.vis__marcas path, .vis__ok { fill: none; stroke: var(--marinho); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.vis__guias rect { fill: #fff; stroke: #bcd3de; stroke-width: 1.6; }
.vis__guias g { transform-box: fill-box; }
.vis__traco { fill: none; stroke: #c8d7e0; stroke-width: 4; stroke-linecap: round; }
.vis__selo { fill: var(--turquesa-claro); }
.vis__ramo { fill: none; stroke: #b9c8d4; stroke-width: 5; stroke-linecap: round; }
.vis__destaque-ramo { fill: none; stroke: var(--turquesa); stroke-width: 5; stroke-linecap: round; }
.vis__no { fill: var(--marinho); }
.vis__barras rect { fill: #9aa6c9; transform-box: fill-box; transform-origin: 0 50%; }
.vis__barras rect[style*="--i:1"] { fill: var(--marinho); }
.vis__escolha circle { fill: var(--turquesa); }
.vis__escolha path { fill: none; stroke: var(--tinta); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.vis__escolha { transform-box: fill-box; transform-origin: center; }
.vis__legenda text, .vis__nota text { font-size: 12px; font-weight: 600; fill: var(--suave); text-anchor: middle; }
.vis__base { fill: none; stroke: #9fb1c0; stroke-width: 2; stroke-linecap: round; }
.vis__entradas rect { fill: var(--turquesa); transform-box: fill-box; transform-origin: 50% 100%; }
.vis__saidas rect { fill: #9aa6c9; transform-box: fill-box; transform-origin: 50% 0; }
.vis__linha { fill: none; stroke: var(--marinho); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vis__aperto { fill: none; stroke: #c0392b; stroke-width: 2.4; stroke-dasharray: 5 5; transform-box: fill-box; transform-origin: center; }
.vis__nota text { fill: #a93226; }
.vis__arco-fundo { fill: none; stroke: #dbe7ed; stroke-width: 16; stroke-linecap: round; }
.vis__arco { fill: none; stroke: var(--turquesa); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .38; }
.vis__escala path { fill: none; stroke: #9fb1c0; stroke-width: 2; stroke-linecap: round; }
.vis__agulha { transform-box: view-box; transform-origin: 106px 140px; transform: rotate(21.6deg); }
.vis__agulha path { fill: none; stroke: var(--marinho); stroke-width: 4; stroke-linecap: round; }
.vis__eixo { fill: var(--marinho); }
.vis__painel rect { fill: #fff; stroke: #bcd3de; stroke-width: 1.6; }
.vis__painel g { transform-box: fill-box; }
.vis__mini { fill: none; stroke: var(--turquesa-texto); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vis__blocos rect { fill: #fff; stroke: var(--marinho); stroke-width: 2; }
.vis__blocos g:nth-child(4) rect { fill: var(--turquesa-claro); stroke: var(--turquesa-texto); }
.vis__blocos text { font-size: 13px; font-weight: 700; font-stretch: 85%; letter-spacing: .06em; fill: var(--tinta); text-anchor: middle; }
.vis__blocos g { transform-box: fill-box; }
.vis__igual path { fill: none; stroke: var(--marinho); stroke-width: 4; stroke-linecap: round; }
.vis__etiqueta { transform-box: fill-box; transform-origin: 30% 50%; transform: rotate(-6deg); }
.vis__etiqueta path { fill: var(--marinho); }
.vis__etiqueta circle { fill: #f7fbfc; }
.vis__etiqueta text { font-size: 19px; font-weight: 800; font-stretch: 80%; letter-spacing: .08em; fill: #fff; text-anchor: middle; }
.vis__pontos circle { fill: var(--turquesa); stroke: #fff; stroke-width: 2; }
.vis--decisao .vis__linha { stroke: var(--marinho); }
.vis__ponta { fill: none; stroke: var(--marinho); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }

/* animação dos desenhos: só com JS (html.anima) e sem preferência por menos movimento */
@media (prefers-reduced-motion: no-preference) {
  html.anima [data-anima]:not(.rodou) .vis__marcas path, html.anima [data-anima]:not(.rodou) .vis__ok,
  html.anima [data-anima]:not(.rodou) .vis__ramo, html.anima [data-anima]:not(.rodou) .vis__destaque-ramo,
  html.anima [data-anima]:not(.rodou) .vis__linha, html.anima [data-anima]:not(.rodou) .vis__mini { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.anima [data-anima].rodando .vis__marcas path { animation: desenha .4s calc(.5s + var(--i) * .3s) ease-out forwards; }
  html.anima [data-anima]:not(.rodou) .vis__prazos rect { opacity: 0; transform: scale(.4); }
  html.anima [data-anima].rodando .vis__prazos rect { animation: aparece .4s calc(.25s + var(--i) * .3s) var(--curva) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__guias g { opacity: 0; transform: translateX(26px); }
  html.anima [data-anima].rodando .vis__guias g { animation: entra .5s calc(.4s + var(--i) * .35s) var(--curva) forwards; }
  html.anima [data-anima].rodando .vis__guias g:nth-child(1) .vis__ok { animation: desenha .35s 1.1s ease-out forwards; }
  html.anima [data-anima].rodando .vis__guias g:nth-child(2) .vis__ok { animation: desenha .35s 1.45s ease-out forwards; }
  html.anima [data-anima].rodando .vis__guias g:nth-child(3) .vis__ok { animation: desenha .35s 1.8s ease-out forwards; }

  html.anima [data-anima].rodando .vis__ramo { animation: desenha .8s calc(var(--i) * .18s) cubic-bezier(.45, .05, .35, 1) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__barras rect { transform: scaleX(0); }
  html.anima [data-anima].rodando .vis__barras rect { animation: cresce-x .6s calc(.8s + var(--i) * .18s) var(--curva) forwards; }
  html.anima [data-anima].rodando .vis__destaque-ramo { animation: desenha .7s 1.7s cubic-bezier(.45, .05, .35, 1) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__escolha { opacity: 0; transform: scale(.3); }
  html.anima [data-anima].rodando .vis__escolha { animation: aparece .45s 2.3s var(--curva) forwards; }

  html.anima [data-anima]:not(.rodou) .vis__entradas rect, html.anima [data-anima]:not(.rodou) .vis__saidas rect { transform: scaleY(0); }
  html.anima [data-anima].rodando .vis__entradas rect, html.anima [data-anima].rodando .vis__saidas rect { animation: cresce-y .45s calc(var(--i) * .09s) var(--curva) forwards; }
  html.anima [data-anima].rodando .vis--caixa .vis__linha { animation: desenha 1.6s 1s cubic-bezier(.45, .05, .35, 1) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__aperto, html.anima [data-anima]:not(.rodou) .vis__nota { opacity: 0; }
  html.anima [data-anima].rodando .vis__aperto { animation: aparece .5s 2.2s var(--curva) forwards; }
  html.anima [data-anima].rodando .vis__nota { animation: surge .5s 2.5s ease forwards; }

  html.anima [data-anima].rodando .vis__arco { animation: arco 1.3s .2s cubic-bezier(.3, .6, .3, 1) both; }
  html.anima [data-anima].rodando .vis__agulha { animation: agulha 1.3s .2s cubic-bezier(.3, 1.4, .5, 1) both; }
  html.anima [data-anima]:not(.rodou) .vis__painel g { opacity: 0; transform: translateX(22px); }
  html.anima [data-anima].rodando .vis__painel g { animation: entra .5s calc(.5s + var(--i) * .2s) var(--curva) forwards; }
  html.anima [data-anima].rodando .vis__mini { animation: desenha .8s calc(.9s + var(--i) * .2s) ease-out forwards; }

  html.anima [data-anima]:not(.rodou) .vis__blocos g { opacity: 0; transform: translateY(-34px); }
  html.anima [data-anima].rodando .vis__blocos g { animation: cai .5s calc(.15s + var(--i) * .3s) cubic-bezier(.3, 1.35, .5, 1) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__igual { opacity: 0; }
  html.anima [data-anima].rodando .vis__igual { animation: surge .4s 1.45s ease forwards; }
  html.anima [data-anima]:not(.rodou) .vis__etiqueta { opacity: 0; transform: rotate(-24deg) scale(.6); }
  html.anima [data-anima].rodando .vis__etiqueta { animation: etiqueta .6s 1.7s var(--curva) forwards; }

  html.anima [data-anima]:not(.rodou) .vis__pontos circle { transform: translate(var(--dx), var(--dy)); }
  html.anima [data-anima].rodando .vis__pontos circle { animation: alinha .9s calc(.1s + var(--i) * .07s) cubic-bezier(.3, .7, .2, 1) forwards; }
  html.anima [data-anima].rodando .vis--decisao .vis__linha { animation: desenha 1s 1.25s cubic-bezier(.45, .05, .35, 1) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__ponta { opacity: 0; transform: scale(.4); }
  html.anima [data-anima].rodando .vis__ponta { animation: aparece .4s 2.15s var(--curva) forwards; }

  html.anima [data-anima]:not(.rodou) .vis__coluna { opacity: 0; transform: translateY(24px); }
  html.anima [data-anima].rodando .vis__coluna { animation: entra-y .6s calc(.15s + var(--c) * .45s) var(--curva) forwards; }

  html.anima [data-anima]:not(.rodou) .vis__livro { opacity: 0; transform: translate(-18px, 10px) rotate(-6deg); }
  html.anima [data-anima].rodando .vis__livro { animation: livro .7s .1s var(--curva) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__calc { opacity: 0; transform: translateY(26px); }
  html.anima [data-anima].rodando .vis__calc { animation: entra-y .6s .45s var(--curva) forwards; }
  html.anima [data-anima]:not(.rodou) .vis__cenario { transform: scaleX(0); }
  html.anima [data-anima].rodando .vis__cenario { animation: cresce-x .6s calc(1s + var(--i) * .3s) var(--curva) forwards; }
}
.vis__cenario { transform-box: fill-box; transform-origin: 0 50%; }
.vis__livro, .vis__calc, .vis__coluna { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes desenha { to { stroke-dashoffset: 0; } }
@keyframes surge { to { opacity: 1; } }
@keyframes aparece { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes entra { to { opacity: 1; transform: translateX(0); } }
@keyframes entra-y { to { opacity: 1; transform: translateY(0); } }
@keyframes cresce-x { to { transform: scaleX(1); } }
@keyframes cresce-y { to { transform: scaleY(1); } }
@keyframes cai { to { opacity: 1; transform: translateY(0); } }
@keyframes etiqueta { to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes alinha { to { transform: translate(0, 0); } }
@keyframes arco { from { stroke-dashoffset: 1; } to { stroke-dashoffset: .38; } }
@keyframes agulha { from { transform: rotate(-90deg); } to { transform: rotate(21.6deg); } }
@keyframes livro { to { opacity: 1; transform: translate(0, 0) rotate(0); } }

/* ---------- regimes ---------- */
.regimes { padding: clamp(72px, 9vw, 120px) 0; }
.regimes__dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 36px; }
@media (min-width: 1000px) { .regimes__dentro { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; } }
.regimes h2 { max-width: 15ch; }
.regimes h2 span { display: block; }
.tabela { border: 1px solid var(--linha); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--sombra); }
.tabela table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.tabela caption { text-align: left; padding: 18px 20px 10px; font-weight: 700; color: var(--tinta); font-size: 1.08rem; }
.tabela th, .tabela td { padding: 16px 18px; border-top: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela thead th { border-top: 0; font-size: .82rem; color: var(--suave); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: var(--papel); }
.tabela th[scope="row"] { font-stretch: 85%; font-weight: 800; color: var(--marinho); font-size: 1.12rem; white-space: nowrap; }
.tabela__nota { padding: 16px 20px 20px; border-top: 1px dashed var(--linha); color: var(--suave); font-size: .98rem; }
@media (max-width: 719px) {
  .tabela thead { display: none; }
  .tabela table, .tabela tbody, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela tr { padding: 6px 0 10px; border-top: 1px solid var(--linha); }
  .tabela th[scope="row"] { border-top: 0; padding: 14px 20px 4px; }
  .tabela td { border-top: 0; padding: 6px 20px; }
  .tabela caption { display: block; }
  .tabela td::before { content: attr(data-rotulo); display: block; font-size: .78rem; font-weight: 700; color: var(--turquesa-texto); text-transform: uppercase; letter-spacing: .05em; }
}

/* ---------- reforma ---------- */
.reforma { background: var(--noite); color: var(--claro-1); padding: clamp(72px, 9vw, 128px) 0; position: relative; overflow: hidden; }
.reforma::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(ellipse 60% 50% at 10% 0%, rgba(104, 187, 200, .14), transparent 70%); }
.reforma__dentro { position: relative; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.reforma h2 { color: #fff; max-width: 14ch; }
.reforma h2 span { color: var(--turquesa); display: block; }
.reforma h3 { color: #fff; }
.reforma .intro { color: var(--claro-1); }
.reforma :focus-visible { outline-color: var(--turquesa); }
.reforma__grade { margin-top: 44px; display: grid; gap: 36px; }
@media (min-width: 1000px) { .reforma__grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; } }
.transicao__tela { border-radius: 22px; border: 1px solid rgba(104, 187, 200, .25); background: rgba(10, 14, 46, .4); padding: 16px 12px 8px; }
.transicao__tela svg { width: 100%; height: auto; overflow: visible; }
.vis--transicao text { font-size: 16px; font-weight: 700; font-stretch: 85%; letter-spacing: .05em; fill: #e3e7fb; text-anchor: middle; }
.vis--transicao .t-nova { fill: var(--tinta); }
.vis--transicao .t-teste { fill: var(--turquesa); font-size: 13px; }
.vis--transicao .t-menor { font-size: 14px; }
.b-hoje { fill: var(--indigo); }
.b-nova { fill: var(--turquesa); }
.b-teste { fill: none; stroke: var(--turquesa); stroke-width: 1.6; stroke-dasharray: 4 4; }
.vis__chao { fill: none; stroke: var(--indigo); stroke-width: 2; }
.vis__anos text { fill: var(--claro-1); font-size: 15px; }
.transicao__legenda { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .92rem; color: var(--claro-2); }
.leg { display: inline-flex; align-items: center; gap: 8px; }
.leg::before { content: ""; width: 14px; height: 14px; border-radius: 4px; flex: none; }
.leg--hoje::before { background: var(--indigo); }
.leg--nova::before { background: var(--turquesa); }
.leg--teste::before { border: 1.6px dashed var(--turquesa); }
.leg--fim { margin-left: auto; font-style: italic; }
.leg--fim::before { display: none; }
.linha-tempo { display: grid; gap: 4px; position: relative; }
.linha-tempo li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(170, 179, 223, .2); }
.linha-tempo li:first-child { border-top: 0; }
.linha-tempo__ano { font-stretch: 75%; font-weight: 800; font-size: 1.45rem; line-height: 1.1; color: var(--turquesa); }
.linha-tempo h3 { font-size: 1.18rem; }
.linha-tempo p { margin-top: 4px; color: var(--claro-1); }
.reforma__acoes { margin-top: 56px; display: grid; gap: 22px; }
@media (min-width: 1000px) { .reforma__acoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } }
.diagnostico { position: relative; border-radius: 22px; padding: 28px 24px; background: var(--marinho); border: 1px solid rgba(104, 187, 200, .35); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .8); }
@media (min-width: 640px) { .diagnostico { padding: 32px 32px; } }
.diagnostico__icone, .cartao-reforma__icone { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(104, 187, 200, .16); color: var(--turquesa); margin-bottom: 16px; }
.diagnostico__icone svg, .cartao-reforma__icone svg { width: 28px; height: 28px; }
.diagnostico h3 { font-size: 1.5rem; font-stretch: 85%; text-transform: uppercase; letter-spacing: .01em; }
.diagnostico p { margin-top: 8px; }
.lista-ok { margin-top: 16px; display: grid; gap: 10px; }
.lista-ok li { position: relative; padding-left: 32px; color: #fff; font-weight: 600; }
.lista-ok li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--turquesa) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23141a4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.diagnostico .botao { margin-top: 26px; }
.reforma__lado { display: grid; gap: 22px; }
.cartao-reforma { border-radius: 22px; padding: 24px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(170, 179, 223, .22); }
.cartao-reforma h3 { font-size: 1.25rem; }
.cartao-reforma p { margin-top: 6px; }
.kit { margin-top: 28px; display: grid; gap: 8px; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, #232c6f, #1b2363); border: 1px solid rgba(104, 187, 200, .35); }
.kit__tela { padding: 22px 18px 0; background-image: linear-gradient(rgba(104, 187, 200, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 187, 200, .07) 1px, transparent 1px); background-size: 16px 16px; }
.kit__tela svg { width: 100%; max-width: 380px; height: auto; margin: 0 auto; overflow: visible; }
.kit__texto { padding: 8px 24px 30px; }
.kit__texto .etiqueta { margin-bottom: 12px; }
.kit__texto h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-stretch: 80%; font-weight: 780; text-transform: uppercase; }
.kit__texto p:not(.etiqueta) { margin-top: 10px; max-width: 34em; }
.kit__texto .botao { margin-top: 22px; }
@media (min-width: 860px) {
  .kit { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 24px; }
  .kit__tela { padding: 28px 10px 28px 28px; align-self: stretch; display: grid; place-items: center; }
  .kit__texto { padding: 32px 36px 32px 8px; }
}
.vis__paginas { fill: #d9e6ec; }
.vis__capa { fill: #fff; }
.vis__capa-faixa { fill: var(--turquesa); }
.vis__livro svg { color: var(--marinho); }
.vis__titulo { font-size: 19px; font-weight: 800; font-stretch: 78%; letter-spacing: .02em; fill: var(--tinta); }
.vis__linhas { fill: none; stroke: #c8d7e0; stroke-width: 5; stroke-linecap: round; }
.vis__sub { font-size: 11px; font-weight: 600; fill: var(--turquesa-texto); }
.vis__calc-corpo { fill: var(--noite); stroke: var(--turquesa); stroke-width: 3; }
.vis__visor { fill: var(--turquesa-claro); }
.vis__cenario { fill: var(--marinho); }
.vis__cenario--b { fill: var(--turquesa-texto); }
.vis__teclas rect { fill: var(--indigo); }
.vis__teclas .vis__tecla-igual { fill: var(--turquesa); }

/* ---------- como começar ---------- */
.comecar { background: var(--papel); padding: clamp(72px, 9vw, 128px) 0; border-bottom: 1px solid var(--linha); }
.comecar__dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 44px; }
@media (min-width: 1000px) { .comecar__dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; align-items: start; } }
.comecar h2 span { color: var(--turquesa-texto); }
.passos { margin-top: 34px; display: grid; gap: 24px; }
.passos li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.passos__n { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-stretch: 80%; font-size: 1.5rem; color: var(--tinta); background: var(--turquesa); }
.passos h3 { font-size: 1.3rem; margin-top: 2px; }
.passos p { margin-top: 4px; }
.comecar__horario { margin-top: 30px; display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--tinta); }
.comecar__horario svg { width: 26px; height: 26px; flex: none; color: var(--turquesa-texto); }

/* ficha que vira mensagem */
.ficha { background: #fff; color: var(--texto); border-radius: 24px; padding: 28px 20px; box-shadow: 0 30px 60px -36px rgba(20, 26, 74, .45); border: 1px solid var(--linha); }
@media (min-width: 480px) { .ficha { padding: 32px 30px; } }
.ficha__titulo { font-size: 1.55rem; font-stretch: 85%; text-transform: uppercase; }
.ficha__intro { margin-top: 4px; color: var(--suave); font-size: 1rem; }
.campo { margin-top: 18px; display: grid; gap: 6px; border: 0; padding: 0; min-width: 0; }
.campo > label, .campo legend { font-weight: 700; color: var(--tinta); font-size: 1rem; padding: 0; }
.campo__opcional { font-weight: 400; color: var(--suave); }
.campo input[type="text"], .campo select {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: 12px; border: 1.5px solid #c4d2dc; background: #fff; font-size: 1.05rem;
  transition: border-color .2s, box-shadow .2s;
}
.campo select { appearance: none; -webkit-appearance: none; padding-right: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23141a4a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 22px; }
.campo input[type="text"]:focus, .campo select:focus { outline: none; border-color: var(--marinho); box-shadow: 0 0 0 4px rgba(104, 187, 200, .35); }
.campo input[aria-invalid="true"] { border-color: #b03a2e; box-shadow: 0 0 0 4px rgba(176, 58, 46, .12); }
.campo__erro { color: #b03a2e; font-size: .95rem; font-weight: 600; }
.campo__aviso { color: var(--turquesa-texto); font-size: .95rem; font-weight: 600; margin-top: 6px; }
.campo__aviso:empty { display: none; }
.campo--escolha legend { margin-bottom: 8px; }
.escolhas { display: flex; flex-wrap: wrap; gap: 8px; }
.escolhas label { position: relative; }
.escolhas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.escolhas span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #c4d2dc; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s; }
.escolhas input:checked + span { background: var(--marinho); border-color: var(--marinho); color: #fff; }
.escolhas input:focus-visible + span { outline: 3px solid var(--turquesa-texto); outline-offset: 3px; }
.ficha__previa { margin-top: 22px; border-radius: 18px; padding: 16px 14px 18px; background-color: #efeae2; background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 12px 12px; }
.ficha__previa-rotulo { font-size: .9rem; font-weight: 700; color: #55606b; margin-bottom: 10px; }
.balao { position: relative; margin-left: auto; max-width: 94%; width: fit-content; background: #d9fdd3; color: #111b21; padding: 10px 14px 12px; border-radius: 14px 4px 14px 14px; font-size: 1rem; line-height: 1.45; white-space: pre-line; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.balao::after { content: ""; position: absolute; top: 0; right: -8px; border: 8px solid transparent; border-top-color: #d9fdd3; border-left-color: #d9fdd3; border-right-width: 0; border-bottom-width: 6px; }
.balao.mudou { animation: balao .35s var(--curva); }
@keyframes balao { 0% { transform: scale(.98); } 50% { transform: scale(1.015); } 100% { transform: scale(1); } }
.ficha__botao { width: 100%; margin-top: 20px; }
.ficha__nota { margin-top: 12px; color: var(--suave); font-size: .95rem; text-align: center; }

/* ---------- onde fica ---------- */
.onde { padding: clamp(72px, 9vw, 128px) 0; }
.onde__dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 40px; }
@media (min-width: 1000px) { .onde__dentro { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; } }
.onde h2 span { display: block; }
.onde__endereco { margin-top: 22px; font-size: 1.18rem; line-height: 1.5; color: var(--tinta); font-weight: 600; }
.horario { margin-top: 26px; padding: 20px 22px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linha); }
.horario__tabela { margin-top: 12px; display: grid; }
.horario__tabela div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--linha); }
.horario__tabela div:first-child { border-top: 0; }
.horario__tabela dd { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.horario__tabela .hoje { font-weight: 700; color: var(--tinta); }
.horario__tabela .hoje dt::after { content: " (hoje)"; font-weight: 600; color: var(--turquesa-texto); }
.onde__mapa {
  position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--linha);
  background-color: #e6eff3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23232c6f' d='M12 22s-7-6.1-7-11.8a7 7 0 0 1 14 0C19 15.9 12 22 12 22z'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='%2368bbc8'/%3E%3C/svg%3E"),
    linear-gradient(28deg, transparent 47%, #fff 47%, #fff 50%, transparent 50%),
    linear-gradient(118deg, transparent 31%, #fff 31%, #fff 33.5%, transparent 33.5%),
    linear-gradient(118deg, transparent 68%, #fff 68%, #fff 70%, transparent 70%),
    linear-gradient(28deg, transparent 80%, #fff 80%, #fff 82%, transparent 82%);
  background-repeat: no-repeat; background-position: center 44%, center, center, center, center; background-size: 44px 44px, cover, cover, cover, cover;
}
.onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- perguntas ---------- */
.perguntas { background: var(--papel); padding: clamp(72px, 9vw, 128px) 0; border-top: 1px solid var(--linha); }
.perguntas__dentro { max-width: calc(900px + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }
.perguntas h2 { max-width: 18ch; }
.perguntas h2 span { display: block; }
.perguntas__lista { margin-top: 36px; border-top: 1px solid #c9d8e0; }
.pergunta { border-bottom: 1px solid #c9d8e0; }
.pergunta summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; font-weight: 700; font-size: 1.12rem; color: var(--tinta); border-radius: 8px; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary svg { width: 26px; height: 26px; flex: none; color: var(--turquesa-texto); transition: transform .3s var(--curva); }
.pergunta[open] summary svg { transform: rotate(180deg); }
.pergunta summary:hover { color: var(--turquesa-texto); }
.pergunta__resposta { padding: 0 4px 22px; max-width: 46em; }
@supports (interpolate-size: allow-keywords) {
  .perguntas { interpolate-size: allow-keywords; }
  .pergunta::details-content { block-size: 0; overflow: hidden; transition: block-size .35s var(--curva), content-visibility .35s allow-discrete; }
  .pergunta[open]::details-content { block-size: auto; }
}

/* ---------- chamada final ---------- */
.final { position: relative; overflow: hidden; text-align: center; padding: clamp(84px, 10vw, 140px) 0; background: var(--marinho); color: var(--claro-1); }
.final__onda { position: absolute; left: 0; right: 0; top: 26px; width: 100%; height: 80px; }
.final__linha { fill: none; stroke: var(--turquesa); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.final__dentro { position: relative; max-width: calc(780px + 2 * var(--margem)); margin: 0 auto; padding: 56px var(--margem) 0; }
.final__simbolo { width: 58px; height: 71px; margin: 0 auto 22px; color: var(--turquesa); }
.final h2 { color: #fff; margin: 0 auto; max-width: 16ch; }
.final h2 span { display: block; color: var(--turquesa); }
.final p { margin: 18px auto 0; max-width: 32em; font-size: 1.12rem; }
.final .botoes { justify-content: center; }
.final :focus-visible { outline-color: var(--turquesa); }
@media (prefers-reduced-motion: no-preference) {
  html.anima .final:not(.visto) .final__linha { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.anima .final.visto .final__linha { animation: desenha 2.2s cubic-bezier(.45, .05, .35, 1) forwards; }
}

/* ---------- rodapé ---------- */
.rodape { background: var(--noite-2); color: var(--claro-2); padding: 64px 0 30px; font-size: 1rem; }
.rodape__dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); display: grid; gap: 32px; }
@media (min-width: 720px) { .rodape__dentro { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .rodape__dentro { grid-template-columns: 1.1fr 1.1fr 1fr 1fr; } }
.rodape a { color: #fff; text-decoration-color: rgba(255, 255, 255, .4); }
.rodape__col a { display: inline-block; padding: 7px 0; margin: -7px 0; }
.rodape a:hover { color: #fff; text-decoration-color: #fff; }
.rodape p + p { margin-top: 8px; }
.rodape :focus-visible { outline-color: var(--turquesa); }
.rodape__marca { display: flex; align-items: center; gap: 14px; }
.rodape__simbolo { width: 44px; height: 54px; color: var(--turquesa); flex: none; }
.rodape__nome { font-weight: 800; font-stretch: 85%; font-size: 1.3rem; color: #fff; letter-spacing: .02em; text-transform: uppercase; }
.rodape__titulo { font-weight: 700; color: #fff; margin-bottom: 8px; }
.rodape__fim { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 40px auto 0; padding: 22px var(--margem) 0; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.rodape__aviso { font-size: .9rem; color: var(--claro-2); max-width: 46em; }
.rodape__credito a { display: inline-flex; align-items: center; gap: 8px; color: var(--claro-1); text-decoration: none; min-height: 32px; font-size: .92rem; }
.rodape__credito a:hover { color: #fff; }
.rodape__credito svg { width: 20px; height: 20px; border-radius: 5px; flex: none; }

/* ---------- botão flutuante ---------- */
.zap-flutuante {
  position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--zap); color: #fff; font-weight: 700; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .45);
  transition: opacity .3s, transform .35s var(--curva), background-color .2s;
}
.zap-flutuante svg { width: 26px; height: 26px; }
.zap-flutuante:hover { background: #146a39; color: #fff; }
html.sem-flutuante .zap-flutuante { opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; }

/* ---------- entradas ao rolar ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.anima [data-revelar]:not(.visivel) { opacity: 0; transform: translateY(14px); }
  html.anima [data-revelar] { transition: opacity .6s var(--curva), transform .7s var(--curva); transition-delay: var(--ordem, 0s); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}