/* =========================================================
   pgdemos — tokens + hero
   ========================================================= */

:root {
  /* verde de assinatura */
  --verde-300: #96F08C;   /* itálico do título sobre foto */
  --verde-400: #6EE05C;
  --verde-500: #57D845;   /* botão primário */
  --verde-600: #3FBE33;
  --verde-900: #072A0B;   /* tinta sobre o verde */

  /* neutros */
  --tinta-900: #0C1A12;
  --tinta-700: #2A3A2E;
  --tinta-500: #55665B;
  --papel: #F4F7F3;
  --linha: #DDE5DA;
  --branco: #FFFFFF;

  /* fotografia */
  --sombra-foto: 6 22 13;   /* rgb cru para os scrims */

  --raio-pill: 999px;
  --raio-card: 20px;

  --fonte: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --topbar-h: 62px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta-900);
  background: var(--papel);
  overflow-x: clip;              /* nunca `hidden`: quebra position:sticky */
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* superfícies do navegador — parte do design, não default do UA */
::selection { background: var(--verde-300); color: var(--verde-900); }

/* scrollbar tematizada — não a do sistema */
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--verde-600) #DCE6D9; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #DCE6D9; }
::-webkit-scrollbar-thumb {
  background: var(--verde-600);
  border: 3px solid #DCE6D9;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--verde-500); }
:focus-visible {
  outline: 2px solid var(--verde-400);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(.hero, .topbar) :focus-visible { outline-color: var(--verde-300); }

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

.skip-link {
  position: absolute; left: 50%; top: 8px;
  transform: translate(-50%, -160%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--branco);
  color: var(--tinta-900);
  border-radius: var(--raio-pill);
  font-size: .85rem; font-weight: 600;
  box-shadow: 0 10px 26px -12px rgb(var(--sombra-foto) / .5);
  transition: transform .2s var(--ease-out-expo);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* =========================================================
   Botões
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--raio-pill);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    transform .35s var(--ease-out-expo),
    box-shadow .35s var(--ease-out-expo),
    background-color .25s ease,
    border-color .25s ease;
}

.btn--sm { padding: 10px 8px 10px 18px; font-size: .84rem; gap: 7px; }

.btn--primary {
  background: var(--verde-500);
  color: var(--verde-900);
  box-shadow: 0 12px 26px -16px rgb(38 140 30 / .9);
}
.btn--primary:hover {
  background: var(--verde-400);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -16px rgb(38 140 30 / .95);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  color: var(--branco);
  background: rgb(var(--sombra-foto) / .32);
  border: 1px solid rgb(255 255 255 / .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: rgb(var(--sombra-foto) / .48);
  border-color: rgb(255 255 255 / .5);
  transform: translateY(-2px);
}

.btn--block { display: flex; justify-content: center; width: 100%; }

.btn__arrow {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgb(7 42 11 / .16);
  transition: transform .35s var(--ease-out-expo), background-color .25s ease;
}
.btn--sm .btn__arrow { width: 24px; height: 24px; }
.btn:hover .btn__arrow { transform: translateX(3px); background: rgb(7 42 11 / .26); }
.btn--ghost .btn__arrow { background: rgb(255 255 255 / .18); }

/* =========================================================
   Header flutuante
   ========================================================= */

.topbar {
  inset: 16px 0 auto;
  z-index: 20;
  display: grid;
  justify-items: center;
  padding: 0 16px;
}

.topbar__pill {
  display: flex;
  align-items: center;
  gap: 28px;
  width: min(1080px, 100%);
  padding: 8px 8px 8px 22px;
  border-radius: var(--raio-pill);
  background: rgb(255 255 255 / .93);
  border: 1px solid rgb(255 255 255 / .7);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 14px 34px -18px rgb(var(--sombra-foto) / .55);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -0.02em;
  color: var(--tinta-900);
}
.brand__mark { color: var(--verde-600); flex: none; }
.brand__dot { color: var(--verde-600); }

.topnav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline: auto;
  font-size: .86rem;
  font-weight: 500;
  color: var(--tinta-700);
}
.topnav a {
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--verde-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out-expo);
}
.topnav a:hover { color: var(--tinta-900); }
.topnav a:hover::after { transform: scaleX(1); }

.topbar__toggle {
  display: none;
  padding: 10px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--tinta-700);
}
.topbar__toggle:hover { background: rgb(12 26 18 / .06); }

.menu-mobile {
  display: grid;
  gap: 4px;
  width: min(1080px, 100%);
  margin-top: 8px;
  padding: 14px;
  border-radius: 22px;
  background: rgb(255 255 255 / .96);
  border: 1px solid rgb(255 255 255 / .7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 44px -22px rgb(var(--sombra-foto) / .6);
  animation: menu-abre .3s var(--ease-out-expo) both;
}
.menu-mobile a:not(.btn) {
  padding: 12px 10px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--tinta-700);
  border-radius: 12px;
}
.menu-mobile a:not(.btn):hover { background: rgb(12 26 18 / .05); color: var(--tinta-900); }
.menu-mobile .btn { margin-top: 6px; }

@keyframes menu-abre {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--topbar-h) + 74px) 0 clamp(150px, 22vh, 210px);
  overflow: clip;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 56% 50%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      101deg,
      rgb(var(--sombra-foto) / .86) 0%,
      rgb(var(--sombra-foto) / .70) 32%,
      rgb(var(--sombra-foto) / .36) 62%,
      rgb(var(--sombra-foto) / .03) 86%
    ),
    linear-gradient(to bottom, rgb(var(--sombra-foto) / .42) 0%, rgb(var(--sombra-foto) / 0) 22%),
    linear-gradient(to top, rgb(var(--sombra-foto) / .55) 0%, rgb(var(--sombra-foto) / 0) 34%);
}

.hero__inner {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 13px;
  border-radius: var(--raio-pill);
  border: 1px solid rgb(255 255 255 / .28);
  background: rgb(255 255 255 / .10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgb(255 255 255 / .90);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.badge svg { color: var(--verde-300); flex: none; }

.hero__title {
  margin: 22px 0 0;
  font-size: clamp(2.7rem, 6.4vw, 5.2rem);
  line-height: 1.01;
  letter-spacing: -0.038em;
  font-weight: 800;
  color: var(--branco);
  text-wrap: balance;
}
.hero__title span { display: block; }

.hero__title-em {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--verde-300);
}

.hero__sub {
  max-width: 46ch;
  margin-top: 24px;
  font-size: clamp(1rem, .95rem + .35vw, 1.1rem);
  line-height: 1.62;
  color: rgb(255 255 255 / .84);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 34px;
  font-size: .86rem;
  color: rgb(255 255 255 / .80);
}
.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust svg { width: 15px; height: 15px; color: var(--verde-400); flex: none; }

/* cartão de economia */
.savings {
  position: absolute;
  right: clamp(20px, 5vw, 56px);
  bottom: clamp(28px, 6vh, 60px);
  z-index: 2;
  margin: 0;
  padding: 18px 26px 20px;
  border-radius: var(--raio-card);
  background: rgb(var(--sombra-foto) / .46);
  border: 1px solid rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 22px 48px -26px rgb(0 0 0 / .8);
}
.savings__label {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .62);
}
.savings__value {
  margin-top: 4px;
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--verde-300);
  font-variant-numeric: tabular-nums;
}
.savings__note {
  margin-top: 6px;
  font-size: .74rem;
  color: rgb(255 255 255 / .58);
}


/* =========================================================
   Faixa de prova — números
   ========================================================= */

.prova {
  background: var(--branco);
  padding: clamp(44px, 6.5vw, 68px) 0 clamp(40px, 5.5vw, 60px);
}

.prova__inner {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.prova__selo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinta-500);
}
.prova__check {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--verde-500);
  color: var(--verde-900);
}
.prova__check svg { width: 12px; height: 12px; }

.prova__numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: clamp(28px, 4vw, 42px) 0 0;
}

.prova__item {
  padding: 4px clamp(16px, 2.4vw, 32px) 6px;
  border-left: 1px solid var(--linha);
}
.prova__item:first-child { padding-left: 0; border-left: 0; }

.prova__valor {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: clamp(2rem, 1.4rem + 1.9vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--tinta-900);
  font-variant-numeric: tabular-nums;
}
.prova__unidade {
  font-size: .38em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--verde-600);
}

.prova__rotulo {
  margin: 12px 0 0;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--tinta-500);
}

@media (max-width: 720px) {
  .prova__numeros {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(26px, 5vw, 34px) 0;
  }
  .prova__item { padding-block: 0; }
  .prova__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .prova__rotulo { margin-top: 9px; font-size: .8rem; }

}

/* =========================================================
   Benefícios — painel escuro + cards com profundidade
   ========================================================= */

.benef {
  background: var(--branco);
  padding: 0 0 clamp(40px, 6vw, 72px);
}

/* o painel é mais largo que o resto da página de propósito: é uma placa
   própria, com cantos próprios, não uma seção alinhada à goteira do texto */
.benef__inner {
  width: min(1340px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.benef__painel {
  --painel: #0D2E17;
  padding: clamp(28px, 4vw, 56px);
  border-radius: 30px;
  background:
    radial-gradient(120% 80% at 82% -10%, rgb(87 216 69 / .16), transparent 60%),
    var(--painel);
  color: var(--branco);
}

.benef__selo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .62);
}
.benef__seloIcone {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  background: rgb(87 216 69 / .16);
  color: var(--verde-300);
}
.benef__seloIcone svg { width: 12px; height: 12px; }

.benef__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(22px, 3vw, 34px);
}

.benef__titulo {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.038em;
  font-weight: 800;
}
.benef__titulo span { display: block; }
.benef__titulo-verde { color: var(--verde-300); }

.benef__lado { display: grid; justify-items: start; gap: 20px; }

.benef__intro {
  max-width: 42ch;
  font-size: .95rem;
  line-height: 1.62;
  color: rgb(255 255 255 / .72);
}

.benef__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 22px;
  border-radius: var(--raio-pill);
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .16);
  font-size: .88rem;
  font-weight: 600;
  color: var(--branco);
  transition: background-color .3s ease, border-color .3s ease, transform .35s var(--ease-out-expo);
}
.benef__cta:hover {
  background: rgb(255 255 255 / .13);
  border-color: rgb(255 255 255 / .3);
  transform: translateY(-2px);
}
.benef__ctaSeta {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--verde-500);
  color: var(--verde-900);
  transition: transform .4s var(--ease-out-expo);
}
.benef__ctaSeta svg { width: 13px; height: 13px; }
.benef__cta:hover .benef__ctaSeta { transform: translateX(3px); }

/* ---- a grade e o efeito de profundidade ---- */

.benef__grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(28px, 4vw, 44px);
  perspective: 1100px;
}

.dcard {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  --lift: 0px;
  position: relative;
}

.dcard__corpo {
  position: relative;
  height: 100%;
  padding: 14px 14px 20px;
  border-radius: 22px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo);
  will-change: transform;
}
.dcard.ativo .dcard__corpo { transition-duration: .12s; }

/* brilho especular que acompanha o ponteiro */
.dcard__corpo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(255 255 255 / .16), transparent 60%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.dcard.ativo .dcard__corpo::after { opacity: 1; }

.dcard--escuro .dcard__corpo {
  background: #1D5C30;
  border: 1px solid rgb(150 240 140 / .16);
  color: var(--branco);
}
.dcard--claro .dcard__corpo {
  background: #EDF3F6;
  color: var(--tinta-900);
}
.dcard--verde .dcard__corpo {
  background: #D8F0BE;
  color: #17331A;
}

.dcard--claro .dcard__corpo::after,
.dcard--verde .dcard__corpo::after {
  background: radial-gradient(340px circle at var(--mx) var(--my), rgb(255 255 255 / .5), transparent 60%);
}

/* camadas em profundidades diferentes: é daí que vem o efeito */
.dcard__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 3 / 2;
  transform: translateZ(18px);
}
.dcard__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform .6s var(--ease-out-expo);
}
.dcard.ativo .dcard__foto img { transform: scale(1.12); }

.dcard__texto {
  padding: 18px 6px 0;
  transform: translateZ(38px);
}

.dcard__icone {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  transform: translateZ(14px);
}
.dcard__icone svg { width: 19px; height: 19px; }
.dcard--escuro .dcard__icone { background: var(--verde-500); color: var(--verde-900); }
.dcard--claro  .dcard__icone { background: var(--branco); color: #24506B; box-shadow: 0 4px 12px -6px rgb(var(--sombra-foto) / .5); }
.dcard--verde  .dcard__icone { background: rgb(255 255 255 / .75); color: #2E6B23; }

.dcard__tag {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border-radius: var(--raio-pill);
  border: 1px solid rgb(150 240 140 / .35);
  background: rgb(87 216 69 / .12);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--verde-300);
}

.dcard__titulo {
  margin: 14px 0 0;
  font-size: clamp(1.1rem, .95rem + .5vw, 1.35rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
}

.dcard__desc {
  margin-top: 10px;
  font-size: .84rem;
  line-height: 1.55;
  opacity: .74;
}

.dcard__marca {
  position: absolute;
  top: 24px; right: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgb(10 26 16 / .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgb(255 255 255 / .85);
  transform: translateZ(46px);
}
.dcard__marca svg { width: 11px; height: 11px; }

/* ---- responsivo ---- */

@media (max-width: 980px) {
  .benef__topo { grid-template-columns: 1fr; align-items: start; }
  .benef__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .benef__painel { border-radius: 24px; }
  .benef__grade { grid-template-columns: 1fr; gap: 14px; perspective: none; }
  .dcard__texto { padding-inline: 4px; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .dcard__corpo { transform: none !important; }
  .dcard__foto,
  .dcard__texto,
  .dcard__icone,
  .dcard__marca { transform: none; }
  .dcard__corpo::after { display: none; }
  .dcard.ativo .dcard__foto img { transform: scale(1.06); }
}

/* =========================================================
   Calculadora de economia
   ========================================================= */

.calc {
  background: var(--papel);
  padding: clamp(56px, 9vw, 104px) 0 clamp(64px, 10vw, 116px);
}

.calc__inner {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.calc__head { max-width: 46ch; margin-inline: auto; text-align: center; }

.calc__titulo {
  margin: 0 auto;
  max-width: 19ch;
  text-wrap: balance;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--tinta-900);
}

.calc__intro {
  max-width: 52ch;
  margin: 18px auto 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--tinta-500);
}

/* ---- o cartão e o anel que acende sob o ponteiro ---- */

.calc__card {
  position: relative;
  display: grid;
  margin-top: clamp(34px, 5vw, 52px);
  border-radius: 26px;
  background: var(--branco);
  border: 1px solid var(--linha);
  box-shadow: 0 26px 60px -40px rgb(var(--sombra-foto) / .45);
}

.calc__glow {
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    var(--verde-400),
    rgb(87 216 69 / .25) 42%,
    transparent 72%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.calc__card.esta-perto .calc__glow { opacity: 1; }

.calc__form,
.calc__painel { position: relative; z-index: 1; }
/* ---- o cartão nasce do tamanho do formulário e se abre ao calcular ----
   As três propriedades abaixo transicionam juntas, com a mesma duração e a
   mesma curva. Isso não é decoração: com
       max-width inicial = 50% + padding − gap/2
   a largura da coluna do formulário é constante durante toda a abertura
   (a conta fecha: (M(t) − 2P − G·t)/(1+t) é invariante em t). O formulário
   não reflui um pixel; só o painel cresce ao lado. */

.calc__card {
  --calc-pad: clamp(28px, 4vw, 60px);
  --calc-gap: clamp(26px, 3.4vw, 48px);

  margin-inline: auto;

  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  gap: 0;
  padding: var(--calc-pad);
  max-width: calc(50% + var(--calc-pad) - var(--calc-gap) / 2);
  transition:
    max-width .75s var(--ease-out-expo),
    gap .75s var(--ease-out-expo),
    grid-template-columns .75s var(--ease-out-expo);
}

/* durante a abertura o cartão recorta: o painel é revelado, não empurrado */
.calc__card.abrindo { overflow: clip; }
.calc__card.abrindo .calc__glow { opacity: 0; }

.calc__card.aberto {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--calc-gap);
  max-width: 100%;
}

.calc__painel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 900px) {
  .calc__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 0fr;
    max-width: 100%;
    transition:
      grid-template-rows .7s var(--ease-out-expo),
      gap .7s var(--ease-out-expo);
  }
  .calc__card.aberto {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc__card { transition: none; }
}


.calc__form { display: grid; align-content: start; gap: clamp(24px, 2.9vw, 34px); }

/* ---- campos ---- */

.campo { display: grid; gap: 10px; }

.campo__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.campo__rotulo {
  font-size: .8rem;
  font-weight: 600;
  color: var(--tinta-700);
}

.campo__saida {
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--tinta-900);
  font-variant-numeric: tabular-nums;
  transition: transform .18s var(--ease-out-expo);
}
.campo__saida.pulsa { transform: scale(1.045); }

.campo__limites {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--tinta-500);
  font-variant-numeric: tabular-nums;
}

.entrada {
  width: 100%;
  padding: 16px 20px;
  font: inherit;
  font-size: .95rem;
  color: var(--tinta-900);
  background: #FBFCFA;
  border: 1px solid var(--linha);
  border-radius: 14px;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.entrada::placeholder { color: #93A497; }
.entrada:hover { border-color: #C7D3C4; }
.entrada:focus {
  outline: none;
  background: var(--branco);
  border-color: var(--verde-500);
  box-shadow: 0 0 0 3px rgb(87 216 69 / .18);
}
.entrada[aria-invalid="true"] {
  border-color: #C2452F;
  box-shadow: 0 0 0 3px rgb(194 69 47 / .12);
}

.campo__erro { font-size: .8rem; color: #A5341F; }

/* ---- slider ---- */

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.slider:focus { outline: none; }

.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde-500) var(--pct, 16%), var(--linha) var(--pct, 16%));
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--branco);
  border: 2px solid var(--verde-500);
  box-shadow: 0 4px 14px -4px rgb(38 140 30 / .55);
  transition: transform .22s var(--ease-out-expo), box-shadow .22s ease;
}
.slider:hover::-webkit-slider-thumb { transform: scale(1.08); }
.slider:active::-webkit-slider-thumb,
.slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.16);
  box-shadow: 0 4px 18px -4px rgb(38 140 30 / .7), 0 0 0 5px rgb(87 216 69 / .18);
}

.slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--linha); }
.slider::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--verde-500); }
.slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--branco);
  border: 2px solid var(--verde-500);
  box-shadow: 0 4px 14px -4px rgb(38 140 30 / .55);
  transition: transform .22s var(--ease-out-expo);
}
.slider:active::-moz-range-thumb { transform: scale(1.16); }

/* ---- segmentado ---- */

.segmentado {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  background: #F1F4EF;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pill);
}
.segmentado__indicador {
  position: absolute;
  top: 4px; left: 0;
  height: calc(100% - 8px);
  width: var(--seg-w, 33.33%);
  transform: translateX(var(--seg-x, 4px));
  border-radius: var(--raio-pill);
  background: var(--branco);
  box-shadow: 0 4px 12px -6px rgb(var(--sombra-foto) / .5);
  transition:
    transform .42s var(--ease-out-expo),
    width .42s var(--ease-out-expo);
}
.segmentado button {
  position: relative;
  z-index: 1;
  padding: 13px 6px;
  border-radius: var(--raio-pill);
  font-size: .86rem;
  font-weight: 600;
  color: var(--tinta-500);
  transition: color .3s ease;
}
.segmentado button:hover { color: var(--tinta-700); }
.segmentado button[aria-checked="true"] { color: var(--tinta-900); }

/* ---- botão ---- */

.calcbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  padding: 18px 28px;
  border-radius: var(--raio-pill);
  background: var(--verde-500);
  color: var(--verde-900);
  font-size: .95rem;
  font-weight: 700;
  box-shadow: 0 12px 26px -16px rgb(38 140 30 / .9);
  transition:
    transform .35s var(--ease-out-expo),
    box-shadow .35s var(--ease-out-expo);
}
.calcbtn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgb(38 140 30 / .95); }
.calcbtn:active { transform: translateY(0); }
.calcbtn[disabled] {
  background: #DCE5D9;
  color: #8B9A8D;
  box-shadow: none;
  transform: none;
  cursor: default;
}

.calcbtn__ponto {
  position: absolute;
  left: 22px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--verde-400);
  transform: scale(0);
  transition: transform .55s var(--ease-out-expo);
}
.calcbtn:hover .calcbtn__ponto { transform: scale(46); }
.calcbtn[disabled] .calcbtn__ponto { transform: scale(0); }

.calcbtn__texto,
.calcbtn__seta { position: relative; z-index: 1; }

.calcbtn__seta {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgb(7 42 11 / .16);
  transition: transform .4s var(--ease-out-expo), background-color .3s ease;
}
.calcbtn__seta svg { width: 13px; height: 13px; }
.calcbtn:hover .calcbtn__seta { transform: translateX(4px); background: rgb(7 42 11 / .24); }
.calcbtn[disabled]:hover .calcbtn__seta { transform: none; }

.calcbtn--zap {
  background: transparent;
  color: var(--tinta-900);
  border: 1px solid var(--linha);
  box-shadow: none;
}
.calcbtn--zap .calcbtn__ponto { background: rgb(87 216 69 / .22); }
.calcbtn--zap .calcbtn__seta { background: rgb(12 26 18 / .08); }
.calcbtn--zap:hover { box-shadow: 0 14px 30px -22px rgb(var(--sombra-foto) / .8); }

/* ---- painel de resultados ---- */

.calc__painel {
  display: grid;
  align-content: center;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: 20px;
  background: linear-gradient(168deg, #F6F9F4 0%, #EFF4ED 100%);
  border: 1px solid var(--linha);
}

.calc__carregando { display: grid; gap: 14px; }
.calc__carregandoTexto {
  font-size: .88rem;
  font-weight: 600;
  color: var(--tinta-700);
}
.barra {
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, #E4EBE1 0%, #F4F8F2 40%, #E4EBE1 80%) 0 0 / 220% 100%;
  animation: shimmer 1.25s linear infinite;
}
.barra--a { width: 62%; }
.barra--b { width: 88%; animation-delay: .12s; }
.barra--c { width: 44%; animation-delay: .24s; }

@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

.calc__resumo {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-500);
}

.calc__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
  margin: 20px 0 0;
}

.calc__res dt { font-size: .78rem; color: var(--tinta-500); }
.calc__num {
  margin: 6px 0 0;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--tinta-900);
  font-variant-numeric: tabular-nums;
}
.calc__res--destaque { grid-column: 1 / -1; }
.calc__res--destaque .calc__num {
  font-size: clamp(2.1rem, 1.5rem + 2vw, 2.9rem);
  color: var(--verde-600);
}

.calc__acao { display: grid; gap: 12px; margin-top: 26px; }
.calc__nota {
  font-size: .74rem;
  line-height: 1.5;
  color: var(--tinta-500);
  text-align: center;
}

.calc__resultados.entra .calc__resumo,
.calc__resultados.entra .calc__res,
.calc__resultados.entra .calc__acao {
  animation: sobe .62s var(--ease-out-expo) both;
  animation-delay: calc(var(--r, 0) * 70ms + 40ms);
}
.calc__resultados.entra .calc__resumo { animation-delay: 0ms; }

@keyframes sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---- responsivo ---- */

@media (max-width: 520px) {
  .calc__card { --calc-pad: 20px; border-radius: 22px; }
  .calc__grade { grid-template-columns: 1fr; gap: 18px; }
  .segmentado button { font-size: .8rem; padding: 11px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .calc__glow { display: none; }
  .barra { animation: none; background: #E4EBE1; }
  .calc__resultados.entra .calc__resumo,
  .calc__resultados.entra .calc__res,
  .calc__resultados.entra .calc__acao { animation: none; }
  .calcbtn__ponto { display: none; }
}

/* =========================================================
   Soluções por perfil — residencial · comercial · rural
   ========================================================= */

.sol {
  background: var(--papel);
  padding: clamp(56px, 8vw, 96px) 0 clamp(60px, 9vw, 104px);
}

.sol__inner {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

.sol__selo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinta-500);
}
.sol__seloIcone {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  background: rgb(63 190 51 / .14);
  color: var(--verde-600);
}
.sol__seloIcone svg { width: 12px; height: 12px; }

.sol__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: clamp(20px, 4vw, 64px);
  margin-top: clamp(20px, 3vw, 30px);
}

.sol__titulo {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-weight: 800;
  color: var(--tinta-900);
}
.sol__titulo span { display: block; }
.sol__titulo-verde { color: var(--verde-600); }

.sol__intro {
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.62;
  color: var(--tinta-500);
}

/* ---- as três linhas ---- */

.sol__lista {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4.5vw, 52px);
}

.sol__linha {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(14px, 1.4vw, 18px);
  border-radius: 26px;
  border: 1px solid var(--linha);
}

.sol__linha--casa    { background: var(--branco); }
.sol__linha--negocio { background: #EDF3F6; border-color: #DCE7EC; }
.sol__linha--campo   { background: #E9F5DC; border-color: #D6E9C2; }

/* invertida: a foto troca de lado E leva a coluna larga com ela, senão
   a linha do meio fica com a foto menor que as outras duas */
.sol__linha--inverso { grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); }
.sol__linha--inverso .sol__foto { order: 2; }

.sol__foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  background: var(--linha);
}
.sol__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out-expo);
}
.sol__linha:hover .sol__foto img { transform: scale(1.035); }

.sol__marca {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 7px;
  background: rgb(10 26 16 / .34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: rgb(255 255 255 / .85);
}
.sol__marca svg { width: 11px; height: 11px; }

.sol__texto {
  padding: clamp(6px, 1.6vw, 26px) clamp(6px, 1.6vw, 22px);
}

.sol__rotulo {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-500);
}

.sol__nome {
  margin: 12px 0 0;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -0.036em;
  font-weight: 800;
  color: var(--tinta-900);
}

.sol__desc {
  max-width: 44ch;
  margin-top: 14px;
  font-size: .9rem;
  line-height: 1.62;
  color: var(--tinta-500);
}

.sol__itens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--tinta-700);
}
.sol__itens li { display: flex; align-items: center; gap: 8px; }
.sol__itens svg { width: 14px; height: 14px; flex: none; color: var(--verde-600); }

.sol__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 11px 11px 11px 22px;
  border-radius: 14px;
  background: #0D2E17;
  color: var(--branco);
  font-size: .87rem;
  font-weight: 600;
  transition: background-color .3s ease, transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
}
.sol__cta:hover {
  background: #164A26;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -20px rgb(var(--sombra-foto) / .9);
}
.sol__ctaSeta {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--verde-500);
  color: var(--verde-900);
  transition: transform .4s var(--ease-out-expo);
}
.sol__ctaSeta svg { width: 13px; height: 13px; }
.sol__cta:hover .sol__ctaSeta { transform: translateX(3px); }

/* ---- responsivo ---- */

@media (max-width: 900px) {
  .sol__topo { grid-template-columns: 1fr; align-items: start; }
  .sol__linha { grid-template-columns: 1fr; gap: 0; }
  .sol__linha--inverso .sol__foto { order: 0; }
  .sol__foto { aspect-ratio: 16 / 10; }
  .sol__texto { padding: 22px 10px 12px; }
  .sol__desc { max-width: none; }
}

@media (max-width: 520px) {
  .sol__linha { border-radius: 22px; }
  .sol__itens { flex-direction: column; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .sol__linha:hover .sol__foto img { transform: none; }
}

/* =========================================================
   Projetos entregues — bento com brilho de borda + carrossel
   ========================================================= */

.proj {
  position: relative;
  background: var(--branco);
  padding: clamp(56px, 8vw, 96px) 0 clamp(56px, 8vw, 96px);
}

/* clarão que acompanha o ponteiro — sobre fundo claro um "screen" não
   apareceria, então é uma lavagem verde bem fraca em composição normal */
.proj__clarao {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    var(--clarao-r, 520px) circle at var(--clarao-x, 50%) var(--clarao-y, 50%),
    rgb(87 216 69 / .10),
    transparent 70%
  );
  opacity: 0;
  transition: opacity .5s ease;
}
.proj.acesa .proj__clarao { opacity: 1; }

.proj__inner {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.proj__selo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--tinta-500);
}
.proj__seloIcone {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  background: rgb(63 190 51 / .14);
  color: var(--verde-600);
}
.proj__seloIcone svg { width: 12px; height: 12px; }

.proj__topo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(20px, 4vw, 56px);
  margin-top: clamp(18px, 2.6vw, 28px);
}

.proj__titulo {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-weight: 800;
  color: var(--tinta-900);
}
.proj__titulo span { display: block; }
.proj__titulo-verde { color: var(--verde-600); }

.proj__lado { display: grid; justify-items: start; gap: 14px; }
.proj__intro {
  max-width: 44ch;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--tinta-500);
}
.proj__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-900);
}
.proj__link svg { width: 13px; height: 13px; color: var(--verde-600); transition: transform .35s var(--ease-out-expo); }
.proj__link:hover svg { transform: translateX(3px); }

/* ---- bento ---- */

.proj__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(28px, 4vw, 44px);
  perspective: 1200px;
}
.pcard--grande { grid-row: span 2; }

.pcard {
  --brilho-x: 50%;
  --brilho-y: 50%;
  --brilho: 0;

  position: relative;
  isolation: isolate;
  display: block;
  min-height: 216px;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .4s var(--ease-out-expo);
  box-shadow: 0 18px 40px -30px rgb(var(--sombra-foto) / .7);
  cursor: pointer;
}
.pcard--grande { min-height: 460px; }
.pcard:focus-visible { outline: 2px solid var(--verde-500); outline-offset: 3px; }

.pcard__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform .7s var(--ease-out-expo);
}
.pcard:hover .pcard__foto,
.pcard:focus-within .pcard__foto { transform: scale(1.09); }

.pcard__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgb(var(--sombra-foto) / .82) 0%, rgb(var(--sombra-foto) / .28) 42%, rgb(var(--sombra-foto) / .05) 70%),
    linear-gradient(to bottom, rgb(var(--sombra-foto) / .34) 0%, transparent 30%);
  transition: opacity .45s ease;
}
/* no hover a base escurece mais: são quatro dados sobre foto, e sem isso os
   rótulos pequenos não alcançam o piso de contraste */
.pcard__veu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgb(var(--sombra-foto) / .93) 0%,
    rgb(var(--sombra-foto) / .74) 34%,
    rgb(var(--sombra-foto) / .30) 62%,
    transparent 80%);
  opacity: 0;
  transition: opacity .45s ease;
}
.pcard:hover .pcard__veu::after,
.pcard:focus-within .pcard__veu::after { opacity: 1; }

/* anel que acende conforme o ponteiro se aproxima */
.pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    260px circle at var(--brilho-x) var(--brilho-y),
    rgb(150 240 140 / calc(var(--brilho) * .95)) 0%,
    rgb(87 216 69 / calc(var(--brilho) * .45)) 32%,
    transparent 62%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.pcard__tags {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.pcard__tags span {
  padding: 5px 11px;
  border-radius: var(--raio-pill);
  background: rgb(10 26 16 / .42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(255 255 255 / .16);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .92);
}

.pcard__base {
  position: absolute;
  left: clamp(16px, 2vw, 26px);
  bottom: clamp(16px, 2vw, 24px);
  z-index: 2;
  transition: transform .5s var(--ease-out-expo), opacity .35s ease;
}
.pcard__local {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .6);
}
.pcard__nome {
  margin: 6px 0 0;
  font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--branco);
}
.pcard--grande .pcard__nome { font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }

.pcard__selo {
  position: absolute;
  right: clamp(14px, 1.6vw, 22px);
  bottom: clamp(16px, 2vw, 24px);
  z-index: 2;
  padding: 7px 14px;
  border-radius: var(--raio-pill);
  background: var(--verde-500);
  color: var(--verde-900);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .5s var(--ease-out-expo), opacity .35s ease;
}
.pcard:not(.pcard--grande) .pcard__selo {
  font-size: .62rem;
  padding: 6px 11px;
}

/* ---- os números, no hover ---- */

.pcard__dados {
  position: absolute;
  left: clamp(16px, 2vw, 26px);
  right: clamp(14px, 1.6vw, 22px);
  bottom: clamp(16px, 2vw, 24px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 0;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .4s ease, transform .55s var(--ease-out-expo);
  pointer-events: none;
}
.pcard--grande .pcard__dados { gap: 18px 22px; }

.pcard__dados dt {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .58);
}
.pcard__dados dd {
  margin: 4px 0 0;
  font-size: clamp(.95rem, .8rem + .5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}
.pcard--grande .pcard__dados dd { font-size: clamp(1.1rem, .85rem + .8vw, 1.45rem); }

.pcard:hover .pcard__base,
.pcard:focus-within .pcard__base { transform: translate3d(0, -12px, 0); opacity: 0; }
.pcard:hover .pcard__selo,
.pcard:focus-within .pcard__selo { transform: translate3d(0, -12px, 0); opacity: 0; }
.pcard:hover .pcard__dados,
.pcard:focus-within .pcard__dados { opacity: 1; transform: none; }

/* ---- depoimentos: esteira contínua, sem controles ---- */

/* Sem faixa: as avaliações passam soltas sobre o fundo da seção. O que as
   separa do branco é o tom levemente esverdeado do cartão e um fio, não uma
   caixa em volta — assim o olho continua nas fotos dos projetos acima. */
.depo {
  margin-top: clamp(26px, 3.2vw, 44px);
  padding: 8px 0;
  overflow: hidden;
}

.depo__faixa {
  padding-inline: var(--depo-gap, 18px);
  /* as pontas desbotam para o movimento não "começar" e "acabar" na borda */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.depo__trilho {
  --depo-gap: clamp(12px, 1.4vw, 18px);

  display: flex;
  width: max-content;
  gap: var(--depo-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  /* o deslocamento vem do JS: a esteira anda sozinha, mas pode ser segurada e
     puxada, e isso uma animação CSS não permite */
}

.depo__faixa {
  cursor: grab;
  touch-action: pan-y;        /* rolar a página na vertical continua livre */
}
.depo__faixa.puxando { cursor: grabbing; }
.depo__faixa.puxando .depo__trilho { user-select: none; }
.depo__faixa.puxando .depo__card { pointer-events: none; }

.depo__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  flex: 0 0 auto;
  width: clamp(280px, 27vw, 360px);
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 18px;
  background: #F7FBF4;
  border: 1px solid #E2EDDA;
  box-shadow: 0 14px 30px -26px rgb(var(--sombra-foto) / .5);
}

.depo__estrelas {
  width: 74px;
  height: auto;
  fill: var(--verde-600);
}

.depo__fala {
  font-size: .92rem;
  line-height: 1.6;
  color: #1C3A21;
}

.depo__pe {
  display: flex;
  align-items: center;
  gap: 11px;
}

.depo__inicial {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--verde-600);
  color: var(--branco);
  font-size: .88rem;
  font-weight: 700;
}

.depo__quem { min-width: 0; margin-right: auto; }
.depo__quem strong {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--tinta-900);
}
.depo__quem em {
  display: block;
  margin-top: 1px;
  font-size: .72rem;
  font-style: normal;
  color: var(--tinta-500);
}

.depo__chip {
  flex: none;
  padding: 5px 11px;
  border-radius: var(--raio-pill);
  background: var(--branco);
  border: 1px solid #CFE3BE;
  color: #22651B;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .depo__card { width: min(78vw, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .depo__faixa {
    cursor: auto;
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    scroll-snap-type: x mandatory;
  }
  .depo__card { scroll-snap-align: start; }
}

/* ---- responsivo ---- */

@media (max-width: 980px) {
  .proj__topo { grid-template-columns: 1fr; align-items: start; }
  .proj__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    perspective: none;
  }
  .pcard--grande { grid-row: auto; min-height: 360px; }
  .pcard { min-height: 280px; }
}

@media (max-width: 560px) {
  .pcard__dados { grid-template-columns: 1fr; gap: 9px; }
  .pcard__dados dd { font-size: 1rem; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .pcard { transform: none !important; }
  .pcard::after { display: none; }
  .proj__clarao { display: none; }
}

/* Em toque não existe hover: os números não podem ficar escondidos atrás de um
   gesto que não acontece. Aqui eles entram no fluxo, sempre visíveis, e o selo
   sobe para o topo para não disputar espaço. */
@media (hover: none), (pointer: coarse) {
  .pcard,
  .pcard--grande {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 400px;
    padding-bottom: 18px;
  }
  .pcard__veu::after { opacity: 1; }

  .pcard__base {
    position: static;
    padding-inline: 18px;
    transform: none;
    opacity: 1;
  }
  .pcard__selo {
    top: 16px;
    right: 16px;
    bottom: auto;
    transform: none;
    opacity: 1;
  }
  .pcard__dados {
    position: static;
    margin-top: 16px;
    padding-inline: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    opacity: 1;
    transform: none;
  }
  .pcard__dados dd { font-size: 1rem; }
  .pcard--grande .pcard__dados dd { font-size: 1.05rem; }
}



/* =========================================================
   Tecnologia por dentro — seção cinematográfica com scrub
   ========================================================= */

.tech {
  --tech-fundo: #071A0D;
  position: relative;
  /* mesmo respiro das outras seções que têm cabeçalho direto sobre o fundo
     (calculadora, soluções, projetos): com 60px o título encostava na virada
     de cor e a seção parecia começar já falando */
  padding: clamp(56px, 7.5vw, 96px) 0 clamp(40px, 5vw, 64px);
  background: var(--tech-fundo);
  color: var(--branco);
}

.tech__cabecalho {
  width: min(1180px, 100%);
  margin: 0 auto clamp(14px, 2vw, 24px);
  padding-inline: clamp(20px, 5vw, 56px);
  text-align: center;
}

.tech__h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.038em;
  font-weight: 800;
  text-wrap: balance;
}
.tech__h2 span { display: block; }
.tech__h2-verde { color: var(--verde-300); }

.tech__sub {
  max-width: 58ch;
  margin: 12px auto 0;
  font-size: .92rem;
  line-height: 1.62;
  color: rgb(255 255 255 / .60);
}

/* Não há mais trilho nem sticky: a seção ocupa uma tela e se apresenta ao
   entrar no campo de visão. */
.tech__palco {
  position: relative;
  /* o palco acompanha o tamanho de ENTRADA da placa (o maior momento), com uma
     folga: assim não sobra moldura vazia em volta na composição final */
  --placa-alt: min(82vh, 620px);
  height: calc(var(--placa-alt) + 36px);
  min-height: 560px;
  overflow: hidden;
  /* vinheta discreta: o produto fica no claro, as bordas cedem */
  background:
    radial-gradient(120% 90% at 50% 45%, rgb(20 62 34 / .45), transparent 62%),
    var(--tech-fundo);
}

/* ---- a placa ---- */

.tech__centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* O vídeo é 1080×1920 e o módulo cresce para cima enquanto abre. Medindo o
   alfa linha a linha quadro a quadro, o conteúdo vai de 12,37% (topo, no
   quadro final) a 75,54% (base, também no final) da altura. O resto é vazio.
   A janela de recorte vai de 10,87% a 77,04% — 1,5% de folga de cada lado —,
   o que dá a proporção e o object-position abaixo.
   A placa é dimensionada pela ALTURA, já que a fonte é retrato. */
.tech__placa {
  position: relative;
  height: var(--placa-alt);
  aspect-ratio: 1080 / 1270;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.tech__glow {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 86%;
  aspect-ratio: 2 / 1;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(87 216 69 / .16), transparent 72%);
  pointer-events: none;
}

.tech__video,
.tech__mock {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.tech__video { object-fit: cover; object-position: 50% 32.1%; }
.tech__mock  { object-fit: contain; }

/* o mock só aparece quando o vídeo não carregou */
.tech__mock { display: none; }
.tech.sem-video .tech__video { display: none; }
.tech.sem-video .tech__mock { display: block; }

.mk {
  /* --p (0→1) é escrito pelo JS no elemento raiz do mock */
  transform: translateY(calc(var(--p, 0) * var(--z) * -26px));
  transition: none;
}
.mk--vidro { opacity: calc(1 - var(--p, 0) * .18); }

/* ---- diferenciais ---- */

.tech__info {
  position: absolute;
  top: 50%;
  left: calc(50% + 44px);
  width: min(420px, 34vw);
  transform: translate3d(0, -50%, 0);
}

.tech__titulo {
  opacity: 0;
  margin-bottom: 34px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .5);
}

.tech__lista {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.tech__item {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(8px);
  will-change: transform, opacity, filter;
}

.tech__cabeca {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tech__num {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--verde-400);
  font-variant-numeric: tabular-nums;
}

.tech__risco {
  flex: 1;
  height: 1px;
  color: rgb(255 255 255 / .22);
}

.tech__nome {
  margin: 13px 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tech__desc {
  max-width: 34ch;
  margin-top: 7px;
  font-size: .85rem;
  line-height: 1.55;
  color: rgb(255 255 255 / .62);
}

/* ---- mobile: a placa sobe, os diferenciais vêm abaixo ---- */

@media (max-width: 900px) {
  /* sem sticky, o palco não precisa caber numa tela nem recortar nada */
  .tech__palco { height: auto; min-height: 0; overflow: visible; }

  /* no mobile placa e lista dividem o palco em fluxo: posicionar as duas em
     absoluto deixava um vão morto entre elas em telas altas */
  .tech__palco {
    display: grid;
    grid-template-rows: auto auto;
    align-content: center;
    gap: 1vh;
    padding: 3vh clamp(20px, 6vw, 40px) 6vh;
  }
  .tech__centro { position: static; height: auto; }
  /* No mobile a placa é dimensionada pela LARGURA, não pela altura: com
     `height` em vh, a largura derivada da proporção cresce junto com telas
     altas e estreitas e estoura o palco (num aparelho de 390px dava 388px de
     placa dentro de 344px de espaço). Com `width: min(100%, …)` isso não tem
     como acontecer. */
  .tech__placa {
    width: min(100%, 400px);
    height: auto;
    margin-inline: auto;
  }

  .tech__info {
    position: static;
    left: auto;
    width: 100%;
    padding: 0;
    transform: none;
  }
  .tech__titulo { margin-bottom: 20px; }
  .tech__lista { gap: 20px; }
  .tech__nome { font-size: 1.02rem; margin-top: 11px; }
  .tech__desc { font-size: .82rem; margin-top: 6px; max-width: none; }
}

@media (max-width: 900px) and (max-height: 700px) {
  .tech__lista { gap: 14px; }
  .tech__desc { display: none; }
}

/* ---- sem animação: tudo no estado final ---- */

.tech.estatico .tech__item,
.tech.estatico .tech__titulo {
  opacity: 1;
  transform: none;
  filter: none;
}

/* =========================================================
   Dúvidas · Contato · Rodapé
   ========================================================= */

.faq {
  background: var(--branco);
  padding: clamp(44px, 6vw, 76px) 0 clamp(16px, 2vw, 24px);
}

.faq__inner {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.faq__painel {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: 28px;
  background: #0D2E17;
  color: var(--branco);
}

.faq__foto {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  min-height: 320px;
}
.faq__foto img { width: 100%; height: 100%; object-fit: cover; }

.faq__marca {
  position: absolute;
  left: 18px; bottom: 18px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgb(10 26 16 / .5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / .14);
}
.faq__marca strong {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--branco);
}
.faq__marca span {
  max-width: 15ch;
  font-size: .66rem;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .66);
}

.faq__conteudo { padding: clamp(6px, 1.4vw, 18px) clamp(4px, 1vw, 14px) 4px 0; }

.faq__selo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .58);
}
.faq__seloIcone {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  background: rgb(87 216 69 / .16);
  color: var(--verde-300);
}
.faq__seloIcone svg { width: 12px; height: 12px; }

.faq__titulo {
  margin: 16px 0 clamp(18px, 2.4vw, 28px);
  font-size: clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.036em;
  font-weight: 800;
}
.faq__titulo span { display: block; }
.faq__titulo-verde { color: var(--verde-300); }

.faq__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.faq__item { border-top: 1px solid rgb(255 255 255 / .12); }
.faq__item:last-child { border-bottom: 1px solid rgb(255 255 255 / .12); }
.faq__item h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.faq__pergunta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 2px;
  text-align: left;
  color: var(--branco);
  transition: color .25s ease;
}
.faq__pergunta:hover { color: var(--verde-300); }

.faq__num {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--verde-400);
  font-variant-numeric: tabular-nums;
}
.faq__texto {
  flex: 1;
  font-size: clamp(.92rem, .85rem + .25vw, 1.02rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.faq__cruz {
  position: relative;
  flex: none;
  width: 16px; height: 16px;
}
.faq__cruz::before,
.faq__cruz::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transition: transform .35s var(--ease-out-expo), opacity .25s ease;
}
.faq__cruz::before { width: 13px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__cruz::after  { width: 1.5px; height: 13px; transform: translate(-50%, -50%); }
.faq__pergunta[aria-expanded="true"] .faq__cruz::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__resposta { overflow: hidden; }
.faq__resposta p {
  max-width: 62ch;
  padding: 0 34px 20px 0;
  font-size: .88rem;
  line-height: 1.62;
  color: rgb(255 255 255 / .66);
}

/* =========================================================
   Contato
   ========================================================= */

.cta {
  background: var(--branco);
  padding: clamp(16px, 2vw, 24px) 0 clamp(44px, 6vw, 76px);
}

.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(24px, 3vw, 48px);
  /* mesma largura do painel de dúvidas: lá o painel é o conteúdo de um wrapper
     de 1240px com goteira, aqui o painel é o próprio elemento — então a conta
     da goteira entra na largura, senão os dois painéis empilhados ficam
     desalinhados em 96px. */
  width: min(1144px, calc(100% - 2 * clamp(20px, 5vw, 48px)));
  margin-inline: auto;
  padding: clamp(26px, 3.4vw, 52px);
  border-radius: 28px;
  background: #0D2E17;
  color: var(--branco);
}

.cta__selo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .58);
}
.cta__seloIcone {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  border-radius: 6px;
  background: rgb(87 216 69 / .16);
  color: var(--verde-300);
}
.cta__seloIcone svg { width: 12px; height: 12px; }

.cta__titulo {
  margin: 16px 0 0;
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
  font-weight: 800;
}
.cta__titulo span { display: block; }
.cta__titulo-verde { color: var(--verde-300); }

.cta__intro {
  max-width: 42ch;
  margin-top: 16px;
  font-size: .92rem;
  line-height: 1.62;
  color: rgb(255 255 255 / .66);
}

.cta__horarios {
  display: grid;
  gap: 10px;
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid rgb(255 255 255 / .14);
}
.cta__horarios > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  max-width: 42ch;
}
.cta__horarios dt { font-size: .84rem; color: rgb(255 255 255 / .62); }
.cta__horarios dd {
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
}

.cta__contatos {
  display: grid;
  gap: 12px;
  margin-top: clamp(22px, 2.6vw, 30px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid rgb(255 255 255 / .14);
  font-size: .88rem;
}
.cta__contatos li { display: flex; align-items: center; gap: 11px; color: rgb(255 255 255 / .82); }
.cta__contatos svg { width: 17px; height: 17px; flex: none; color: var(--verde-400); }
.cta__contatos a { transition: color .2s ease; }
.cta__contatos a:hover { color: var(--verde-300); }

/* ---- formulário ---- */

.cta__form {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: 22px;
  background: var(--branco);
  color: var(--tinta-900);
  box-shadow: 0 26px 60px -40px rgb(0 0 0 / .7);
}

.cta__formTopo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}
.cta__formTopo h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.cta__formSelo {
  padding: 5px 11px;
  border-radius: var(--raio-pill);
  background: rgb(63 190 51 / .13);
  color: #22651B;
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
}

.cta__linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cta__form .campo { margin: 0; gap: 7px; }
.cta__form .campo__rotulo { font-size: .76rem; }
.cta__form .campo__rotulo span { font-weight: 400; color: var(--tinta-500); }
.cta__form .entrada { padding: 12px 14px; font-size: .9rem; border-radius: 12px; }
.cta__form textarea.entrada { resize: vertical; min-height: 74px; }
.cta__form select.entrada { appearance: none; background-image: none; }

.cta__enviar { width: 100%; margin-top: 4px; }

.cta__nota {
  font-size: .72rem;
  line-height: 1.5;
  color: var(--tinta-500);
  text-align: center;
}

.cta__sucesso {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 10px 10px;
  text-align: center;
}
.cta__sucessoIcone {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--verde-500);
  color: var(--verde-900);
}
.cta__sucessoIcone svg { width: 22px; height: 22px; }
.cta__sucesso h4 { margin: 4px 0 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.025em; }
.cta__sucesso p { max-width: 34ch; font-size: .86rem; line-height: 1.55; color: var(--tinta-500); }
.cta__zap {
  margin-top: 6px;
  padding: 11px 20px;
  border-radius: var(--raio-pill);
  border: 1px solid var(--linha);
  font-size: .86rem;
  font-weight: 700;
  transition: border-color .25s ease, background-color .25s ease;
}
.cta__zap:hover { border-color: var(--verde-500); background: #F6FBF4; }

/* =========================================================
   Rodapé
   ========================================================= */

.rodape {
  background: #071A0D;
  color: var(--branco);
  padding: clamp(40px, 5vw, 68px) 0 clamp(22px, 2.6vw, 32px);
}

.rodape__inner {
  width: min(1240px, 100%);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.rodape__topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(28px, 4vw, 64px);
}

.rodape .brand { color: var(--branco); }
.rodape .brand__mark { color: var(--verde-400); }
.rodape .brand__dot { color: var(--verde-400); }

.rodape__frase {
  max-width: 34ch;
  margin-top: 16px;
  font-size: .88rem;
  line-height: 1.62;
  color: rgb(255 255 255 / .56);
}

.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.rodape__colunas h2 {
  margin: 0 0 14px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .42);
}
.rodape__colunas ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.rodape__colunas li { font-size: .86rem; color: rgb(255 255 255 / .72); }
.rodape__colunas a { transition: color .2s ease; }
.rodape__colunas a:hover { color: var(--verde-300); }

.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: 1px solid rgb(255 255 255 / .12);
  font-size: .76rem;
  color: rgb(255 255 255 / .45);
}
.rodape__base ul { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.rodape__base a:hover { color: rgb(255 255 255 / .8); }

/* =========================================================
   Responsivo
   ========================================================= */

@media (max-width: 980px) {
  .faq__painel { grid-template-columns: 1fr; }
  .faq__foto { min-height: 240px; max-height: 300px; }
  .faq__conteudo { padding: 6px 4px 4px; }

  .cta__inner { grid-template-columns: 1fr; }
  .rodape__topo { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .cta__linha { grid-template-columns: 1fr; }
  .rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .rodape__base { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Barra flutuante e botão de WhatsApp
   ========================================================= */

.topbar {
  position: fixed;
  transition:
    transform .45s var(--ease-out-expo),
    opacity .3s ease;
}

/* recolhida ao descer */
.topbar--oculta {
  transform: translate3d(0, calc(-100% - 24px), 0);
  opacity: 0;
  pointer-events: none;
}

/* passada a primeira dobra a pílula fecha um pouco e firma o fundo */
.topbar--compacta .topbar__pill {
  padding-block: 6px;
  background: rgb(255 255 255 / .97);
  box-shadow: 0 16px 38px -20px rgb(var(--sombra-foto) / .7);
}
.topbar__pill { transition: padding .35s var(--ease-out-expo), background-color .3s ease, box-shadow .35s ease; }

/* âncoras não podem aterrissar embaixo da barra */
:target,
main > section[id] { scroll-margin-top: calc(var(--topbar-h) + 26px); }

/* ---- WhatsApp ---- */

.zap {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 28px);
  z-index: 30;

  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 16px;
  border-radius: var(--raio-pill);
  background: #25D366;
  color: #05310F;
  box-shadow: 0 16px 34px -14px rgb(7 60 24 / .6);

  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.9);
  pointer-events: none;
  transition:
    opacity .4s ease,
    transform .5s var(--ease-out-expo),
    gap .4s var(--ease-out-expo),
    box-shadow .3s ease;
}
.zap--visivel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.zap svg { width: 26px; height: 26px; flex: none; }

.zap__texto {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: max-width .45s var(--ease-out-expo);
}
.zap:hover,
.zap:focus-visible { gap: 10px; box-shadow: 0 20px 40px -14px rgb(7 60 24 / .7); }
.zap:hover .zap__texto,
.zap:focus-visible .zap__texto { max-width: 170px; }

/* pulso discreto de chegada, uma vez só */
.zap--visivel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25D366;
  animation: zap-pulso 2.4s var(--ease-out-expo) 2;
  pointer-events: none;
}
@keyframes zap-pulso {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.35); }
  100% { opacity: 0;  transform: scale(1.35); }
}

@media (max-width: 560px) {
  .zap { height: 52px; padding: 0 13px; }
  .zap svg { width: 24px; height: 24px; }
  /* em tela pequena o rótulo não abre: ocuparia metade da largura */
  .zap:hover .zap__texto,
  .zap:focus-visible .zap__texto { max-width: 0; }
  .zap:hover, .zap:focus-visible { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
  .zap { transition: opacity .2s ease; transform: none; }
  .zap--visivel::after { animation: none; opacity: 0; }
}

/* =========================================================
   Navegação: seção ativa e entrada do menu
   ========================================================= */

/* rolagem suave para as âncoras internas */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- link da seção em que o visitante está ---- */

.topnav a.ativo { color: var(--tinta-900); }
.topnav a.ativo::after { transform: scaleX(1); }

/* ---- entrada escalonada do menu mobile ---- */

.menu-mobile a {
  animation: menu-item .4s var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}
@keyframes menu-item {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-mobile a { animation: none; }
}

/* =========================================================
   Entrada — um único momento orquestrado, opt-in por JS
   ========================================================= */

.has-js .reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(7px);
}
.has-js .is-ready .reveal,
.has-js .reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .85s var(--ease-out-expo),
    transform .95s var(--ease-out-expo),
    filter .85s var(--ease-out-expo);
  transition-delay: calc(var(--d, 0) * 95ms);
}

.has-js .topbar__pill { opacity: 0; transform: translateY(-14px); }
.has-js .is-ready .topbar__pill {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out-expo), transform .8s var(--ease-out-expo);
}

/* =========================================================
   Responsivo
   ========================================================= */

@media (max-width: 1080px) {
  .topbar__pill { gap: 18px; }
  .topnav { gap: 18px; font-size: .82rem; }
  .savings { padding: 16px 20px 18px; }
}

@media (max-width: 900px) {
  .topnav, .topbar__cta { display: none; }
  .topbar__toggle { display: block; }
  .topbar__pill { padding: 8px 8px 8px 18px; }

  .hero { padding-bottom: clamp(190px, 30vh, 260px); }
  .savings {
    left: clamp(20px, 5vw, 56px);
    right: clamp(20px, 5vw, 56px);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
  }
  .savings__label { width: 100%; }
  .savings__note { margin-top: 0; }
}

@media (max-width: 640px) {
  .hero {
    padding-top: calc(var(--topbar-h) + 40px);
    align-content: start;
  }
  .hero__media img { object-position: 50% 46%; }
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgb(var(--sombra-foto) / .90) 0%,
        rgb(var(--sombra-foto) / .84) 46%,
        rgb(var(--sombra-foto) / .58) 70%,
        rgb(var(--sombra-foto) / .22) 88%),
      linear-gradient(to top, rgb(var(--sombra-foto) / .72) 0%, rgb(var(--sombra-foto) / 0) 30%);
  }

  .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero__sub { margin-top: 18px; font-size: 1rem; }
  .hero__actions { margin-top: 28px; gap: 10px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__trust {
    margin-top: 26px;
    gap: 10px;
    flex-direction: column;
    font-size: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .reveal,
  .has-js .topbar__pill {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .menu-mobile { animation: none; }
  * { transition-duration: .01ms !important; }
}