/* ==========================================================================
   Odemir · licenciado iGreen — landing v2
   Tokens (Figma tiMJ1DHueFXJGsdBxMXXrs, desktop 25:1702; não há layout mobile no Figma)
   Base comum. Cada seção tem seu arquivo em parts/css/NN-secao.css.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Layout */
  --container: 1280px;
  --gutter: 24px;

  /* Cores (Figma) */
  --ink: #0a0a0a;             /* títulos em fundo claro, texto do botão */
  --text: #3d4a3b;            /* texto corrido em fundo claro */
  --forest: #154715;          /* verde-escuro: texto das etiquetas, fundos escuros */
  --forest-deep: #0e300e;     /* cabeçalho (88% opaco) */
  --leaf: #28a828;            /* rótulos verdes em fundo claro ("QUEM PODE MIGRAR") */
  --neon: #18ff00;            /* verde da marca em fundo escuro */
  --mist: #eef2ec;            /* fundo das etiquetas e dos ícones em fundo claro */
  --white: #ffffff;
  --on-dark: #dfe7dd;         /* texto corrido em fundo escuro */
  --on-dark-muted: #b9cfb5;   /* texto pequeno em fundo escuro */

  --grad-cta: linear-gradient(135deg, #7dff6b 0%, #18ff00 45%, #12d600 100%);

  /* Tipografia (Montserrat em todo o site) */
  --font: "Montserrat", system-ui, sans-serif;
  --fs-h1: 56px;              /* ExtraBold, 1.2, -1.6px */
  --fs-h2: 40px;              /* ExtraBold, 1.4, -1.3px */
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;

  --radius-card: 30px;        /* cartões com foto */
  --radius-cta: 16px;

  /* Animação de entrada */
  --reveal-y: 24px;
  --reveal-dur: 0.7s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --fs-h1: 38px;
    --fs-h2: 30px;
    --fs-lead: 16px;
    --radius-card: 24px;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Corte vertical dos textos igual ao Figma (leading trim) */
h1, h2, h3, h4, p, .trim { text-box: trim-both cap alphabetic; }
/* Evita palavra sozinha na última linha */
h1, h2, h3, p, li, figcaption { text-wrap: pretty; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--white);
}

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

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

/* Ícones do sprite (parts/html/05-sprite.html): <svg class="ico"><use href="#i-wa"/></svg> */
.ico { width: 1em; height: 1em; flex: none; }

/* ==========================================================================
   Componentes comuns
   ========================================================================== */

/* Etiqueta acima dos títulos (Figma 144:1472): pílula #eef2ec, ícone 14px #28a828,
   texto 12px Bold, 0,72px, caixa alta, #154715.
   <p class="tag"><svg class="ico" aria-hidden="true"><use href="#i-predio"/></svg>Conexão Livre · Mercado livre de energia</p>
   .tag--dark = em fundo verde-escuro */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 31px;
  padding: 6px 16px 6px 14px;
  border-radius: 999px;
  background: var(--mist);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;                   /* texto longo no celular quebra em 2 linhas e a pílula cresce */
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-box: none;
  color: var(--forest);
}
.tag .ico { width: 14px; height: 14px; flex: none; color: var(--leaf); }
.tag--dark { background: rgba(255, 255, 255, 0.1); color: var(--on-dark); }
.tag--dark .ico { color: var(--neon); }

/* Título de seção (Figma 144:1485: 40px ExtraBold, 1.4, -1,3px, #0a0a0a) */
.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -1.3px;
  color: var(--ink);
}
.h2--light { color: var(--white); }

/* Texto corrido (Figma 144:1486: 16px Regular, 1.4, #3d4a3b). Parágrafos: 1 linha vazia no Figma = 33,6px entre os textos cortados */
.body { font-size: var(--fs-body); line-height: 1.4; color: var(--text); }
.body p + p { margin-top: 33.6px; }
.body--light { color: var(--on-dark); }

/* Botão do WhatsApp (Figma 25:3223): 60px, raio 16, degradê neon, texto 17px Bold #0a0a0a,
   quadrado preto 44px raio 11 com o ícone em neon.
   <a class="btn-wa" href="https://wa.me/5579981186592?text=..." target="_blank" rel="noopener" data-local="hero">
     <span class="btn-wa__label">Falar agora no WhatsApp</span>
     <span class="btn-wa__ico"><svg class="ico" aria-hidden="true"><use href="#i-wa"/></svg></span>
   </a> */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  height: 60px;
  padding: 0 8px 0 28px;
  border-radius: var(--radius-cta);
  background: var(--grad-cta);
  white-space: nowrap;
  color: var(--ink);
  transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-wa__label { font-size: 17px; font-weight: 700; line-height: 1; }
.btn-wa__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--neon);
  transition: transform 0.4s var(--ease);
}
.btn-wa__ico .ico { width: 22px; height: 22px; }

@media (hover: hover) {
  .btn-wa:hover { filter: brightness(1.06) saturate(1.1); transform: translateY(-2px); }
  .btn-wa:hover .btn-wa__ico { transform: rotate(-10deg) scale(1.06); }
}
@media (max-width: 400px) {
  .btn-wa { gap: 12px; padding-left: 20px; }
  .btn-wa__label { font-size: 16px; }
}

/* Encaixe com seta no topo de uma seção (Figma 25:3287, 133×39). A cor do encaixe é a da seção de baixo:
   <a class="notch" href="#proxima" aria-label="Rolar para baixo" style="--notch-bg: #fff"><svg>…</svg></a>
   Posicione com position:absolute; top:-39px dentro da seção (que precisa de position:relative). */
.notch {
  position: absolute;
  top: -38px;
  left: 50%;
  width: 133px;
  height: 39px;
  translate: -50% 0;
  color: var(--notch-bg, var(--white));
}
.notch svg { width: 100%; height: 100%; overflow: visible; }
.notch__arrow { stroke: var(--notch-arrow, var(--ink)); }

/* Animação de entrada ao rolar: data-reveal="up" (padrão), "fade" ou "zoom".
   Atraso opcional: style="--reveal-delay: 120ms". Sem JavaScript, tudo aparece normalmente. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="zoom"] { transform: scale(0.94); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Link "Pular para o conteúdo" (acessibilidade: aparece só no foco do teclado) */
.skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  translate: 0 -200%;
}
.skip:focus { translate: 0 0; }

/* ==========================================================================
   Cabeçalho (Figma 25:3202): barra flutuante 1280×69,6, raio 24, verde 88% com desfoque
   ========================================================================== */

.header {
  position: fixed;
  z-index: 50;
  top: 23px;
  left: 0;
  right: 0;
  padding-inline: var(--gutter);
  pointer-events: none;
  transition: top 0.35s var(--ease);
}
.header__bar {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--container);
  height: 69.6px;
  margin-inline: auto;
  padding: 0 11.8px 0 27.8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(14, 48, 14, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.header.is-scrolled { top: 12px; }

.header__brand { display: flex; align-items: center; gap: 14px; flex: none; }
.header__logo { width: 108.7px; height: 30px; }
.header__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.2); }
.header__lic {
  font-size: 11px;
  font-weight: 600;
  line-height: 13.75px;
  letter-spacing: 0.44px;
  text-transform: uppercase;
  color: #b9c7b7;
}

.header__nav { margin-left: auto; }
.header__list { display: flex; align-items: center; gap: 36px; }
.header__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  border: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #e0e0e0;
  transition: color 0.25s var(--ease);
}
.header__link .ico { width: 16px; height: 16px; transition: rotate 0.3s var(--ease); }

/* Submenu de serviços */
.header__drop { position: relative; }
.header__sub {
  position: absolute;
  top: calc(100% + 22px);
  left: -20px;
  display: grid;
  gap: 2px;
  min-width: 260px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(14, 48, 14, 0.96);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), visibility 0.25s;
}
/* Ponte invisível entre o botão e o submenu (o mouse não "cai" no vão) */
.header__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.header__sub a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #e0e0e0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.header__drop.is-open .header__sub { opacity: 1; visibility: visible; translate: 0 0; }
.header__drop.is-open .header__drop-btn .ico { rotate: 180deg; }

/* Botão WhatsApp (Figma 25:3220): 124,4×36,4, contorno neon 40%, ponto 6px */
.header__wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 36.4px;
  padding: 0 18px 0 15.8px;
  border: 1px solid rgba(24, 255, 0, 0.4);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--neon);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.header__dot { width: 6px; height: 6px; border-radius: 3px; background: currentColor; }
.header__wa-ico { display: none; width: 20px; height: 20px; }

.header__toggle { display: none; }
/* WhatsApp dentro do menu: só no celular/tablet */
.header__menu-wa { display: none; }

@media (hover: hover) {
  .header__link:hover { color: var(--white); }
  .header__sub a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
  .header__wa:hover { background: var(--neon); border-color: var(--neon); color: var(--ink); }
}

/* Telas médias: menu mais compacto */
@media (max-width: 1180px) {
  .header__list { gap: 24px; }
  .header__link { font-size: 14px; }
}

/* Celular e tablet: logo + WhatsApp + menu sanduíche */
@media (max-width: 1023px) {
  .header { top: 12px; }
  .header__bar { height: 60px; padding: 0 8px 0 18px; gap: 10px; border-radius: 20px; }
  .header__logo { width: 94px; height: 26px; }
  .header__brand { gap: 10px; }
  .header__lic { font-size: 10px; line-height: 12px; }
  /* No celular o WhatsApp sai da barra e vai para o fim do menu (o botão flutuante cobre o resto) */
  .header__wa { display: none; }
  .header__menu-wa { display: block; padding: 10px 12px 8px; }
  .header__menu-wa a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px 0 18px;
    border-radius: 999px;
    background: var(--neon);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }
  .header__menu-wa .ico { width: 20px; height: 20px; }
  .header__toggle {
    margin-left: auto;
    display: grid;
    place-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
  }
  .header__toggle span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--white); transition: transform 0.3s var(--ease), opacity 0.2s; }
  .header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .header__nav {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: var(--forest-deep);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition: opacity 0.25s var(--ease), translate 0.25s var(--ease), visibility 0.25s;
  }
  .header__nav.is-open { opacity: 1; visibility: visible; translate: 0 0; }
  .header__list { flex-direction: column; align-items: stretch; gap: 0; }
  .header__link { width: 100%; justify-content: space-between; padding: 15px 12px; font-size: 16px; }
  .header__sub {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 6px 8px;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    translate: none;
  }
  .header__sub::before { display: none; }
  .header__drop.is-open .header__sub { display: grid; }
}
@media (max-width: 380px) {
  .header__sep, .header__lic { display: none; }
}

/* ==========================================================================
   Topo (Figma 25:3276 texto + 161:2286 fundo 2560×820; fundo mobile 161:2214 962×2465)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 820px;
  background: #0f2e10;
  color: var(--white);
}
.hero__bg img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  min-width: 100%;
  max-width: none;
  height: 820px;
  object-fit: cover;
  translate: -50% 0;
}
.hero__inner { position: relative; padding-top: 236px; padding-bottom: 120px; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 33px; width: 522px; max-width: 100%; }
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -1.6px;
  color: var(--white);
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.4; color: var(--on-dark); }
.hero__note { font-size: var(--fs-small); line-height: 1.5; color: var(--on-dark-muted); }

.hero .notch { top: auto; bottom: -1px; }
.hero .notch svg { transition: translate 0.3s var(--ease); }
@media (hover: hover) {
  .hero .notch:hover .notch__arrow { translate: 0 3px; }
}
.notch__arrow { transition: translate 0.3s var(--ease); }

/* Entrada do topo (sem esperar rolagem) */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .hero__text > * { animation: hero-in 0.8s var(--ease) both; }
.js .hero__text > :nth-child(2) { animation-delay: 0.08s; }
.js .hero__text > :nth-child(3) { animation-delay: 0.16s; }
.js .hero__text > :nth-child(4) { animation-delay: 0.24s; }

/* Tablet: a foto fica à direita; o texto ganha um véu escuro para ler bem */
@media (max-width: 1100px) and (min-width: 768px) {
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 38, 12, 0.85) 0%, rgba(12, 38, 12, 0.5) 50%, rgba(12, 38, 12, 0) 75%);
  }
  .hero__text { width: 480px; }
}

/* Celular: fundo vertical (Odemir embaixo), texto em cima */
@media (max-width: 767px) {
  .hero { min-height: 0; }
  .hero__bg img { left: 0; width: 100%; height: 100%; min-width: 0; object-fit: cover; object-position: center bottom; translate: none; }
  .hero__inner {
    min-height: calc(100vw * 2465 / 962);
    max-height: 1100px;
    padding-top: 118px;
    padding-bottom: 60vw;
  }
  .hero__text { gap: 24px; align-items: center; margin-inline: auto; text-align: center; }   /* celular: centralizado (pedido do cliente) */
  .hero__title { letter-spacing: -1px; }
}

/* ==========================================================================
   Mercado livre (Figma 161:884: foto 630×470 + texto 559, distância 90; seção branca y 820–1450)
   ========================================================================== */

.s30 { position: relative; background: var(--white); padding-block: 81px 79px; }
.s30__grid {
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 559fr);
  column-gap: 90px;
  align-items: center;
}

/* Cartão com foto (Figma 144:1551): raio 30, respiro 40, logo no alto e cartão branco embaixo */
.s30__foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 630 / 470;
  padding: 40px;
  border-radius: var(--radius-card);
}
.s30__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.s30__logo { width: 133px; height: 37px; }

/* Cartão "Quem pode migrar" (Figma 144:1531): branco, raio 18, 14/16, ícone 44 em #eef2ec raio 12 */
.s30__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--white);
}
.s30__card-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mist);
  color: var(--forest);
}
.s30__card-ico svg { width: 22px; height: 22px; }
.s30__card-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.s30__card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--leaf);
  text-box: trim-both cap alphabetic;
}
.s30__card-desc { font-size: 15px; font-weight: 600; line-height: 1.22; color: var(--ink); text-box: trim-both cap alphabetic; }

/* Texto (Figma 144:1506): etiqueta → título 20; título → texto 40; texto → botão 40 */
.s30__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.s30__head { display: flex; flex-direction: column; gap: 20px; }
/* Linha vazia entre parágrafos no Figma = 33,6px entre a linha de base e o topo das maiúsculas */
.s30 .body p + p { margin-top: 33.6px; }

@media (hover: hover) {
  .s30__foto:hover .s30__img { transform: scale(1.05); }
}

@media (max-width: 1100px) {
  .s30__grid { column-gap: 48px; }
  .s30__foto { padding: 28px; }
}

/* Celular e tablet: uma coluna, foto em cima */
@media (max-width: 860px) {
  .s30 { padding-block: 72px 64px; }
  .s30__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .s30__foto { min-height: 340px; padding: 20px; }
  .s30__texto { gap: 28px; }
}
@media (max-width: 767px) {
  .s30__foto { aspect-ratio: auto; }
  .s30__logo { width: 112px; height: auto; }
  .s30__card { gap: 12px; padding: 12px 14px; }
}

/* Etiqueta longa quebra em 2 linhas no celular: a pílula cresce junto */
@media (max-width: 480px) {
  .s30 .tag { height: auto; min-height: 31px; padding-block: 8px; line-height: 1.25; }
}

/* ==========================================================================
   Comparativo cativo × livre (Figma 161:520 conteúdo; fundo 146:1766 y 1450–2381, #f4f7f3 a 94%;
   o fundo continua 80px por baixo da faixa do eletroposto, que tem cantos de raio 50)
   ========================================================================== */

.s40 {
  position: relative;
  overflow: hidden;
  background: #f5f7f4;
  padding-block: 80px 160px;
}

/* Símbolo G ao fundo (Figma 144:1569: 712×947, x 1438 no quadro de 1920, 4% de opacidade) */
.s40__g {
  position: absolute;
  top: 215px;
  left: calc(50% + 478px);
  width: 712px;
  height: auto;
  max-width: none;
  opacity: 0.04;
  pointer-events: none;
}

.s40__inner { position: relative; display: flex; flex-direction: column; align-items: center; }

/* Cabeçalho centralizado (Figma 144:1552: 797 de largura; etiqueta → título 20, título → texto 40) */
.s40__head { display: flex; flex-direction: column; align-items: center; width: 797px; max-width: 100%; text-align: center; }
.s40__head .h2 { margin-top: 20px; }
.s40__lead { margin-top: 40px; }

/* Tabela (Figma 146:1743): critérios 230 + dois cartões, distância 13; linhas de 75 */
.s40__tabela {
  position: relative;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, 75px);
  column-gap: 13px;
  width: 100%;
  max-width: 1275px;                  /* Figma 161:520: 1275 de largura, centralizada */
  margin-top: 40px;
}
.s40__row { display: contents; }
/* Linha explícita para cada célula (os fundos dos cartões ocupam as 4 linhas da coluna) */
.s40__row:nth-of-type(1) > * { grid-row: 1; }
.s40__row:nth-of-type(2) > * { grid-row: 2; }
.s40__row:nth-of-type(3) > * { grid-row: 3; }
.s40__row:nth-of-type(4) > * { grid-row: 4; }
.s40__bg { grid-row: 1 / -1; border-radius: 20px; }
.s40__bg--cativo { grid-column: 2; background: var(--forest); }
.s40__bg--livre { grid-column: 3; background: var(--white); }

.s40__crit,
.s40__cel {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.s40__crit { grid-column: 1; color: var(--forest); }
.s40__cel { gap: 20px; }
.s40__cel--cativo { grid-column: 2; color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.s40__cel--livre { grid-column: 3; color: var(--forest); border-bottom: 1px solid rgba(21, 71, 21, 0.2); }
.s40__row:last-child .s40__cel { border-bottom: 0; }
.s40__ico { flex: none; width: 22px; height: 22px; margin: -1px; }
.s40__mini { display: none; }

/* Cabeçalho das colunas (Figma 146:1705): 14px a 58% + 24px */
.s40__row--head .s40__cel { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.s40__colh-sub { font-size: 14px; line-height: 1; text-box: trim-both cap alphabetic; }
.s40__colh { font-size: 24px; line-height: 1; text-box: trim-both cap alphabetic; }
.s40__row--head .s40__cel--cativo .s40__colh-sub { color: rgba(255, 255, 255, 0.58); }
.s40__row--head .s40__cel--cativo .s40__colh { color: var(--white); }
.s40__row--head .s40__cel--livre .s40__colh-sub { color: rgba(21, 71, 21, 0.58); }

/* Frase final (Figma 146:1763) e botão */
.s40__igual { margin-top: 30px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--forest); text-align: center; }
.s40 .btn-wa { margin-top: 40px; }

/* Tablet: critérios mais estreitos */
@media (max-width: 1100px) {
  .s40__tabela { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, minmax(75px, auto)); }
  .s40__cel { gap: 14px; padding: 16px; }
}

/* Celular: cada critério vira um bloco com as duas respostas, uma embaixo da outra */
@media (max-width: 767px) {
  .s40 { padding-block: 64px 136px; }
  .s40__g { display: none; }
  .s40__head { text-align: center; }
  .s40__lead { margin-top: 24px; }
  .s40__tabela { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
  .s40__row { display: flex; flex-direction: column; gap: 8px; }
  .s40__bg, .s40__row.s40__row--head { display: none; }
  .s40__crit {
    padding: 0 4px 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: var(--leaf);
  }
  .s40__cel {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    font-size: 15px;
  }
  .s40__cel--cativo { background: var(--forest); }
  .s40__cel--livre { background: var(--white); }
  .s40__ico { grid-row: 1 / span 2; margin: 0; }
  .s40__mini { display: block; font-size: 12px; font-weight: 600; line-height: 1.2; opacity: 0.7; }
  .s40__igual { margin-top: 28px; font-size: 15px; }
  .s40 .btn-wa { margin-top: 28px; }
}

/* ==========================================================================
   Eletroposto (Figma faixa 144:1572 y 2301–3002, raio 50, degradê radial; texto 144:1575 522 de largura;
   foto 145:1593 630×541). A faixa sobe 80px sobre o fundo do comparativo.
   ========================================================================== */

.s50 {
  position: relative;
  z-index: 1;
  margin-top: -80px;
  padding-block: 80px;
  border-radius: 50px;
  background: radial-gradient(1993px 659px at calc(100% - 153.6px) 42px, #0e650e 0%, var(--forest) 70%);
  color: var(--white);
}
.s50__grid {
  display: grid;
  grid-template-columns: minmax(0, 522px) minmax(0, 630px);
  justify-content: space-between;
  align-items: center;
  column-gap: 48px;
}

/* Texto: etiqueta → título 20; título → texto 40; texto → "Ideal para" 40 */
.s50__texto { display: flex; flex-direction: column; gap: 40px; }
.s50__head { display: flex; flex-direction: column; gap: 20px; }
.s50 .tag { background: rgba(238, 242, 236, 0.1); color: var(--white); }
.s50 .tag .ico { color: var(--leaf); }
.s50__body { font-size: 16px; line-height: 1.4; color: var(--white); }

/* "Ideal para" (Figma 145:1643): rótulo neon 12px, distância 17, pílulas 14px com contorno 19% */
.s50__ideal { display: flex; flex-direction: column; gap: 17px; }
.s50__ideal-t {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--neon);
}
.s50__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s50__chips li {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 74px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
  text-box: trim-both cap alphabetic;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Cartão com foto (igual ao do mercado livre): raio 30, respiro 40 */
.s50__foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 630 / 541;
  padding: 40px;
  border-radius: var(--radius-card);
}
.s50__img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.s50__logo { width: 133px; height: auto; }

.s50__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--white);
}
.s50__card-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mist);
  color: var(--forest);
}
.s50__card-ico svg { width: 24px; height: 24px; }
.s50__card-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.s50__card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--leaf);
  text-box: trim-both cap alphabetic;
}
.s50__card-desc { font-size: 15px; font-weight: 600; line-height: 1.22; color: var(--ink); text-box: trim-both cap alphabetic; }

@media (hover: hover) {
  .s50__foto:hover .s50__img { transform: scale(1.05); }
  .s50__chips li:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(24, 255, 0, 0.45); }
}

@media (max-width: 1100px) {
  .s50__foto { padding: 28px; }
}

/* Celular e tablet: uma coluna, foto embaixo */
@media (max-width: 860px) {
  .s50 { padding-block: 64px; border-radius: 32px; }
  .s50__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .s50__texto { gap: 28px; }
  .s50__foto { min-height: 340px; padding: 20px; }
}
@media (max-width: 767px) {
  .s50__foto { aspect-ratio: auto; }
  .s50__logo { width: 112px; }
  .s50__card { gap: 12px; padding: 12px 14px; }
}

/* Etiqueta longa quebra em 2 linhas no celular: a pílula cresce junto */
@media (max-width: 480px) {
  .s50 .tag { height: auto; min-height: 31px; padding-block: 8px; line-height: 1.25; }
}

/* ==========================================================================
   O mercado de energia abriu (Figma 146:1907 conteúdo, 154:1997 fundo pontilhado)
   Fundo: #f4f7f3 + grade de pontos neon 12% (shader "Pattern grid" do Figma, estático → SVG)
   + véu branco de cima para baixo. O fundo começa 60px antes do fim da faixa do eletroposto
   (y 2942; a faixa termina em 3002): margin-top -60px, e a 50 (z-index 1) fica por cima,
   então os cantos arredondados dela mostram este fundo, não o branco.
   ========================================================================== */

.mercado {
  position: relative;
  margin-top: -60px;
  padding: 141px 0 76.5px;          /* 60 sob a faixa + 81 até a etiqueta (y 3083); conteúdo até 3690,5, simulador em 3767 */
  background:
    linear-gradient(rgba(255, 255, 255, 0), #fff),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.28' height='27.28'%3E%3Crect width='27.28' height='27.28' fill='%23f5f8f4'/%3E%3Crect width='6.45' height='6.45' fill='%23daf8d6'/%3E%3C/svg%3E") -3.2px -3.2px / 27.28px 27.28px;
}

.mercado__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1076px;
  margin-inline: auto;
  text-align: center;
}
.mercado__title { max-width: 797px; margin-top: 20px; }
.mercado__text { margin-top: 40px; }

/* Árvore (Figma 146:1906): logo 32px, 11px, linhas 897,5×116,5 (sobem 4px e descem -23px sobre os ícones) */
.mercado__arvore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  max-width: 1158px;
  margin: 48px auto 0;
}
.mercado__logo { width: auto; height: 32px; }
.mercado__ramos { position: relative; width: 100%; }
/* As porcentagens fazem as pontas das linhas baterem com o centro de cada coluna em qualquer largura */
.mercado__linhas {
  position: relative;
  z-index: 0;
  width: 77.5%;
  height: 116.5px;
  margin: -4px 0 -23px 11.248%;
}
.mercado__itens {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2.245%;              /* 26px em 1158 */
}
.mercado__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: 0;
  text-align: center;
}
/* Ícone (Figma 146:1823): 48px, raio 16, degradê neon, anel 6px */
.mercado__ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(90deg, #18ff00, #12c400);
  box-shadow: 0 0 0 6px rgba(24, 255, 0, 0.12);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.mercado__ico img { width: 28px; height: 28px; }
.mercado__item:nth-child(3) .mercado__ico img { width: 30px; height: 30px; }
.mercado__item-t {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--forest);
}
.mercado__item-d {
  margin-top: -2px;                /* Figma: 16px entre título e texto (gap 18 do ícone já aplicado) */
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}

@media (hover: hover) {
  .mercado__item:hover .mercado__ico { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(24, 255, 0, 0.16); }
}

/* Tablet estreito e celular: árvore vertical (referência Figma 161:2399).
   4 linhas descem do logo lado a lado: as de fora (±21px do centro) dobram para a 1ª linha de itens,
   as de dentro (±7px) para a 2ª. Coluna da esquerda alinhada à direita e vice-versa, ícones junto ao vão central.
   Cada item desenha a própria linha (::before muito alto); .mercado__ramos corta tudo acima dos pontos. */
@media (max-width: 759px) {
  .mercado { padding: 124px 0 64px; }   /* 60 sob a faixa + 64 */
  .mercado__text { margin-top: 28px; }
  .mercado__arvore { margin-top: 48px; gap: 10px; }
  .mercado__linhas { display: none; }
  .mercado__ramos {
    --gap: 72px;                       /* vão entre as colunas */
    --linha: 1.5px solid var(--leaf);
    overflow: hidden;
    max-width: 440px;
    padding-top: 40px;
    background:
      radial-gradient(circle, var(--leaf) 3.5px, transparent 4px) calc(50% - 21px) 0 / 8px 8px no-repeat,
      radial-gradient(circle, var(--leaf) 3.5px, transparent 4px) calc(50% - 7px) 0 / 8px 8px no-repeat,
      radial-gradient(circle, var(--leaf) 3.5px, transparent 4px) calc(50% + 7px) 0 / 8px 8px no-repeat,
      radial-gradient(circle, var(--leaf) 3.5px, transparent 4px) calc(50% + 21px) 0 / 8px 8px no-repeat;
  }
  .mercado__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); }
  .mercado__item { position: relative; gap: 16px; }
  .mercado__item:nth-child(odd) { align-items: flex-end; text-align: right; }
  .mercado__item:nth-child(even) { align-items: flex-start; text-align: left; }
  .mercado__item::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -1000px;
    height: calc(1000px + 20px);       /* até o meio do ícone (40px) */
    width: calc(var(--gap) / 2 - var(--off));
    border-bottom: var(--linha);
  }
  .mercado__item:nth-child(-n + 2) { --off: 21px; }
  .mercado__item:nth-child(n + 3) { --off: 7px; }
  .mercado__item:nth-child(odd)::before { right: calc(var(--off) - var(--gap) / 2); border-right: var(--linha); border-bottom-right-radius: 10px; }
  .mercado__item:nth-child(even)::before { left: calc(var(--off) - var(--gap) / 2); border-left: var(--linha); border-bottom-left-radius: 10px; }
  .mercado__ico { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 0 0 5px rgba(24, 255, 0, 0.12); }
  .mercado__ico img,
  .mercado__item:nth-child(3) .mercado__ico img { width: 22px; height: 22px; }
  .mercado__item-t { margin-top: 0; font-size: 18px; line-height: 1.2; }
  .mercado__item-d { margin-top: 0; font-size: 14px; }
}
@media (max-width: 360px) {
  .mercado__ramos { --gap: 56px; }
}

/* ==========================================================================
   Simulador "Quanto a sua conta de luz pode cair?" (Figma 154:1996: cartão 1280×555, raio 40)
   Esquerda: degradê radial verde (centro 1177,6/33,3 → 92%/6%), texto #f4f7f3.
   Direita: painel #f4f7f3 raio 40 com encaixe/seta apontando para a esquerda (Figma 155:2003).
   Cálculo da v1: economia de 8% a 20% sobre o valor da conta (parts/js/60-simulador.js).
   ========================================================================== */

.simulador { padding-bottom: 80px; }   /* Figma: cartão termina em 4322, "Sobre" começa em 4402 */

.sim {
  display: flex;
  overflow: hidden;
  border-radius: 40px;
  background: radial-gradient(103.8% 94% at 92% 6%, #0e650e 0%, #154715 70%);
}

/* Coluna de texto (Figma 149:1923): 639px, padding 80, espaços 40 (etiqueta→título 20) */
.sim__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 49.92%;
  padding: 80px;
}
.sim__title { margin-top: 20px; color: #f4f7f3; }
.sim__lead { margin-top: 40px; font-size: var(--fs-body); line-height: 1.4; color: #f4f7f3; }

/* Lista com check (Figma 150:1978): ícone 20px #28a828, 12px, texto 16 Medium */
.sim__checks { display: flex; flex-direction: column; gap: 16px; max-width: 393px; margin-top: 40px; }
.sim__checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.22;
  text-wrap: wrap;                     /* quebras iguais às do Figma */
  color: #f4f7f3;
}
.sim__checks svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #28a828;
  stroke-width: 1.67;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Encaixe: 101×30 girado -90°, centro a 15px da borda direita da coluna */
.sim__divisor {
  position: absolute;
  top: calc(50% - 15px);
  right: -35.5px;
  width: 101px;
  height: 30px;
  rotate: -90deg;
  color: #f4f7f3;
}

/* Painel claro (Figma 150:1992): 641px, padding 80, espaços 40 entre grupos e 24 dentro deles */
.sim__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  flex: 1;
  min-width: 0;
  padding: 80px;
  border-radius: 40px;
  background: #f4f7f3;
  color: var(--forest);
}
.sim__entrada { display: flex; flex-direction: column; }
.sim__k { font-size: 16px; line-height: 1.4; text-box: trim-both cap alphabetic; }

/* Valor da conta: no Figma é só texto ("R$ 500,00", 24px, 31px entre eles). O fundo aparece no hover/foco */
.sim__money {
  display: flex;
  align-items: center;
  gap: 31px;
  margin: 8px -14px 0;               /* 24px do rótulo até o topo do valor, como no Figma */
  padding: 0 14px;
  border-radius: 12px;
  font-size: 24px;
  line-height: 1.4;
  cursor: text;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sim__money input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 24px;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.sim__money input:focus-visible { outline: none; box-shadow: none; }
.sim__money:focus-within { background: var(--white); box-shadow: 0 0 0 2px var(--leaf); }

/* Régua do valor (interação da v1): trilho 8px, preenchimento verde-escuro, botão neon */
.sim__range {
  --p: 13.8%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 36px;
  margin: 4px 0 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.sim__range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(var(--forest), var(--forest)) 0 0 / var(--p) 100% no-repeat, #dbe4d7;
}
.sim__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -9px;
  border: 4px solid var(--forest);
  border-radius: 50%;
  background: var(--neon);
  transition: transform 0.2s var(--ease);
}
.sim__range::-moz-range-track { height: 8px; border-radius: 999px; background: #dbe4d7; }
.sim__range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--forest); }
.sim__range::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid var(--forest); border-radius: 50%; background: var(--neon); }
.sim__range:active::-webkit-slider-thumb { transform: scale(1.12); }

.sim__result { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.sim__v { font-size: 24px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sim__note { font-size: var(--fs-small); line-height: 1.4; }
.sim__note strong { font-weight: 600; white-space: nowrap; }

@media (hover: hover) {
  .sim__money:hover:not(:focus-within) { background: rgba(21, 71, 21, 0.06); }
}

/* Telas médias: menos respiro */
@media (max-width: 1180px) {
  .sim__intro, .sim__panel { padding: 56px 48px; }
}

/* Tablet e celular: colunas empilhadas; o encaixe passa para a base do texto, apontando para cima */
@media (max-width: 899px) {
  .sim { flex-direction: column; background: radial-gradient(140% 70% at 92% 0%, #0e650e 0%, #154715 70%); }
  .sim__intro { flex-basis: auto; padding-bottom: 64px; }
  .sim__divisor { top: auto; right: auto; bottom: -1px; left: 50%; translate: -50% 0; rotate: none; }
  .sim__checks { max-width: none; }
}
@media (max-width: 767px) {
  .simulador { padding-bottom: 64px; }
  .sim { border-radius: 28px; }
  .sim__intro { padding: 40px 24px 56px; }
  .sim__lead, .sim__checks { margin-top: 28px; }
  .sim__panel { gap: 32px; padding: 36px 24px 32px; border-radius: 28px; }
  .sim__result { gap: 18px; }
}

/* ==========================================================================
   Sobre / Quem te atende (Figma 161:895: layout 50/50 da seção "Sua empresa pode escolher",
   foto 630×489 raio 30 padding 40 + cartão branco; texto 559px; 90px entre as colunas).
   No Figma a seção é uma cópia do mercado livre; conteúdo, foto e números vêm do "Quem te atende" da v1.
   G verde decorativo a 5% (Figma 146:1908: x -171, y 4577, 712×947), escondido sob Serviços.
   ========================================================================== */

.sobre {
  position: relative;
  overflow: clip;
  padding-bottom: 80px;             /* Figma: seção termina em 4891, Serviços começa em 4971 */
}
.sobre__g {
  position: absolute;
  z-index: -1;
  top: 175px;
  left: -171px;
  width: 712px;
  height: 947px;
  max-width: none;
  opacity: 0.05;
  pointer-events: none;
}

.sobre__grid {
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 559fr);
  column-gap: 90px;
  align-items: center;
}

/* Foto (Figma 160:38) */
.sobre__foto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 489px;
  padding: 40px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--forest);
}
.sobre__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform 0.8s var(--ease);
}

/* Cartão branco (Figma 160:40): raio 18, padding 14/16, ícone 44 #eef2ec raio 12 */
.sobre__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--white);
}
.sobre__card-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mist);
  color: var(--forest);
}
.sobre__card-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sobre__card-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sobre__card-k {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-box: trim-both cap alphabetic;
  color: var(--leaf);
}
.sobre__card-v {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-box: trim-both cap alphabetic;
  color: var(--ink);
}

/* Texto (Figma 160:21): 40px entre blocos, etiqueta→título 20px */
.sobre__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.sobre__head { display: flex; flex-direction: column; gap: 20px; }

/* Números (v1 "Quem te atende"): três colunas sem caixa */
.sobre__fatos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}
.sobre__fatos dt {
  font-size: 18px;                    /* pedido do cliente 2026-11-09: títulos 18px, texto 16px */
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.3px;
  text-box: trim-both cap alphabetic;
  color: var(--forest);
}
.sobre__fatos dd {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
}

@media (hover: hover) {
  .sobre__foto:hover img { transform: scale(1.05); }
}

@media (max-width: 1180px) {
  .sobre__grid { column-gap: 56px; }
}

/* Tablet e celular: foto em cima, texto embaixo */
@media (max-width: 899px) {
  .sobre__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .sobre__foto { height: auto; aspect-ratio: 630 / 489; min-height: 340px; padding: 20px; }
  .sobre__g { display: none; }
}
@media (max-width: 767px) {
  .sobre { padding-bottom: 64px; }
  .sobre__texto { gap: 28px; }
  .sobre__fatos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sobre__fatos > div { display: flex; align-items: baseline; gap: 12px; }
  .sobre__fatos dt { flex: none; min-width: 108px; font-size: 18px; }
  .sobre__fatos dd { margin-top: 0; }
}

/* ==========================================================================
   Serviços (Figma: fundo 161:1120, encaixe 161:1146, carrossel 161:81, G 146:1908)
   Faixa verde com raio 50 e degradê radial; 7 cartões (305 / ativo 628, vão 20, altura 466),
   o ativo sempre no centro e o carrossel vazando dos dois lados.
   Conteúdo e animação = v1 (assets/servicos-carousel.js): os 6 serviços, ícone, rótulo, texto,
   "Para quem" e CTA; no Figma as fotos eram todas a mesma (exemplo).
   ========================================================================== */

.servicos {
  position: relative;
  overflow-x: clip;                         /* o G passa da borda esquerda; no eixo y ele sobe sobre a seção de cima */
  padding: 80px 0;                          /* 4971 → 5051 e 5846 → 5926 */
  border-radius: 50px;
  background: radial-gradient(103.8% 94% at 92% 6%, #0e650e 0%, #154715 70%);
  color: var(--white);
}

/* G da marca a 5% (Figma 146:1908: x −171, y −394 em relação ao topo da faixa, 712×947) */
.servicos__g {
  position: absolute;
  z-index: 1;
  top: -394px;
  left: calc(50% - 1131px);
  width: 712px;
  height: 947px;
  max-width: none;
  opacity: 0.05;
  pointer-events: none;
}

/* Encaixe com seta pendurado no topo (Figma 161:1146, 101×30, girado 180°): cor da seção de cima */
.servicos__encaixe {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 50%;
  width: 101px;
  height: 30px;
  translate: -50% 0;
  rotate: 180deg;
  color: var(--white);
}

.servicos__head,
.servicos__carrossel,
.servicos__indique { position: relative; z-index: 2; }

/* Cabeçalho centralizado (Figma 161:56: 559 de largura; etiqueta → título 20, título → texto 40) */
.servicos__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(559px + 2 * var(--gutter));
  text-align: center;
}
.servicos__head .tag { color: var(--white); background: rgba(238, 242, 236, 0.1); }
.servicos__head .tag .ico { color: var(--leaf); }
.servicos__head .h2 { margin-top: 20px; }
.servicos__lead { margin-top: 40px; font-size: var(--fs-body); line-height: 1.4; color: var(--white); }

/* --------------------------------------------------------------------------
   Carrossel: o JS posiciona o trilho (translateX) para o cartão ativo ficar no centro
   (@property faz o navegador entregar as medidas já em px para o JS, mesmo com min()/vw)
   -------------------------------------------------------------------------- */
@property --w { syntax: "<length>"; inherits: true; initial-value: 305px; }
@property --wa { syntax: "<length>"; inherits: true; initial-value: 628px; }
@property --gap { syntax: "<length>"; inherits: true; initial-value: 20px; }

.servicos__carrossel {
  --w: 305px;                               /* cartão (Figma 161:78) */
  --wa: 628px;                              /* cartão ativo (Figma 161:73) */
  --gap: 20px;
  --h: 466px;
  margin-top: 40px;
  overflow: hidden;
  outline-offset: -3px;
}
.servicos__trilho {
  display: flex;
  gap: var(--gap);
  width: max-content;
  touch-action: pan-y;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sem JS: faixa com rolagem lateral */
html:not(.js) .servicos__carrossel { overflow-x: auto; }
/* Troca instantânea (volta do laço infinito e mudança de tamanho de tela) */
.servicos__trilho.is-jump,
.servicos__trilho.is-jump * { transition: none !important; }
.servicos__trilho.is-moving { pointer-events: none; }

.svc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 24px;
  width: var(--w);
  height: var(--h);
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: #154715;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc.is-active { width: var(--wa); cursor: default; }
.svc__foto {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: scale 0.8s var(--ease);
}
/* Véu verde do Figma (35,6% transparente → 64,8% 76% → #153d15); no ativo sobe um pouco para o texto ler bem */
.svc::before,
.svc::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.svc::before { background: linear-gradient(180deg, rgba(21, 71, 21, 0) 35.581%, rgba(21, 71, 21, 0.76) 64.761%, #153d15 100%); }
.svc::after { background: linear-gradient(180deg, rgba(21, 71, 21, 0) 8%, rgba(21, 71, 21, 0.82) 42%, #153d15 72%); opacity: 0; }
.svc.is-active::before { opacity: 0; }
.svc.is-active::after { opacity: 1; }

.svc__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--neon);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.svc__ico svg { width: 26px; height: 26px; }
.svc__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--neon);
}
.svc__titulo { font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--white); text-wrap: balance; }

/* Texto extra: abre só no cartão ativo (v1: grid-template-rows 0fr → 1fr) */
.svc__mais {
  display: grid;
  grid-template-rows: 0fr;
  align-self: stretch;
  margin-top: -24px;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, visibility linear 0.6s;
}
.svc__mais > div {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.svc__mais > div > :first-child { margin-top: 24px; }
.svc.is-active .svc__mais {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, opacity 0.5s ease 0.25s, visibility 0s;
}
.svc__texto { max-width: 540px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); text-box: none; }
.svc__quem { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); text-box: none; }
.svc__quem b { font-weight: 600; color: var(--white); }
.svc__cta { height: 52px; gap: 16px; padding-left: 22px; padding-right: 6px; }
.svc__cta .btn-wa__label { font-size: 15px; }
.svc__cta .btn-wa__ico { width: 40px; height: 40px; }

@media (hover: hover) {
  .svc:not(.is-active):hover .svc__foto { scale: 1.05; }
}

/* Frase final (Figma 161:82: 16px, 24 de entrelinha, branco; trecho em Bold) */
/* Setas + pontos abaixo do carrossel (pedido do cliente; não estão no Figma) */
.servicos__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.servicos__seta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.servicos__seta .ico { width: 20px; height: 20px; }
.servicos__seta--prev .ico { rotate: 180deg; }
.servicos__dots { display: flex; align-items: center; gap: 8px; }
.servicos__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.35s var(--ease), background 0.35s var(--ease);
}
/* Área de toque maior sem mudar o desenho */
.servicos__dot { position: relative; }
.servicos__dot::after { content: ""; position: absolute; inset: -12px -4px; }
.servicos__dot[aria-current="true"] { width: 28px; background: var(--neon); }
@media (hover: hover) {
  .servicos__seta:hover { background: var(--neon); color: var(--ink); transform: scale(1.05); }
  .servicos__dot:not([aria-current="true"]):hover { background: rgba(255, 255, 255, 0.6); }
}

.servicos__indique {
  margin-top: 32px;
  font-size: var(--fs-body);
  line-height: 1.5;
  text-align: center;
  color: var(--white);
}
.servicos__indique strong { font-weight: 700; }

/* Tablet */
@media (max-width: 1023px) {
  .servicos { border-radius: 36px; }
  .servicos__carrossel { --w: 240px; --wa: 500px; }
  .svc { padding: 28px; }
}

/* Celular: cartões do mesmo tamanho, o do centro mostra o texto */
@media (max-width: 767px) {
  .servicos { padding: 72px 0 64px; border-radius: 28px; }
  .servicos__g { display: none; }
  .servicos__lead { margin-top: 24px; }
  .servicos__carrossel { --w: min(310px, 82vw); --wa: var(--w); --gap: 14px; --h: 540px; margin-top: 32px; }
  .svc { gap: 18px; padding: 24px 22px; }
  .svc__ico { width: 44px; height: 44px; }
  .svc__ico svg { width: 22px; height: 22px; }
  .svc__titulo { font-size: 21px; }
  .svc__mais { margin-top: -18px; }
  .svc__mais > div { gap: 12px; }
  .svc__mais > div > :first-child { margin-top: 18px; }
  .svc__texto { font-size: 14px; }
  .svc__cta { width: 100%; justify-content: space-between; gap: 10px; padding-left: 18px; white-space: normal; }
  .svc__cta .btn-wa__label { font-size: 14px; line-height: 1.2; }
  .svc__cta .btn-wa__ico { flex: none; }
  .servicos__indique { margin-top: 32px; font-size: 15px; }
}

/* ==========================================================================
   Como funciona (Figma 161:902: texto 521 + vão 128 + cartão com foto 629×737; G 161:647)
   Passos, ícones, fotos e a troca automática = v1 (os passos do Figma estavam repetidos).
   ========================================================================== */

.passos {
  position: relative;
  overflow-x: clip;                         /* o G passa da borda direita; no eixo y ele pode descer sobre os depoimentos */
  padding: 80px 0 79px;                     /* 5926 → 6006 e 6743 → 6822 */
}

/* G da marca girado, a 5% (Figma 161:647: 745×560 a partir de x +293 do centro, 466 abaixo do topo) */
.passos__g {
  position: absolute;
  z-index: 1;
  top: 466px;
  left: calc(50% + 293px);
  width: 745px;
  height: 560px;
  opacity: 0.05;
  pointer-events: none;
}
.passos__g img {
  position: absolute;
  top: -92.5px;
  left: 92.5px;
  width: 560px;
  height: 745px;
  max-width: none;
  rotate: -90deg;
}

/* Grade: título e lista à esquerda (centralizados na altura do cartão), cartão à direita */
.passos__grid {
  display: grid;
  grid-template-columns: minmax(0, 521fr) minmax(0, 629fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".     card"
    "head  card"
    "lista card"
    ".     card";
  column-gap: 128px;
}
.passos__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; }
.passos__head .h2 { margin-top: 20px; }
.passos__lead { margin-top: 40px; max-width: 513px; }

/* Lista de passos (Figma 161:197: vão 17; item com borda #e7ece5, raio 20, 18/20 de respiro) */
.passos__lista { grid-area: lista; display: flex; flex-direction: column; gap: 17px; margin-top: 40px; }
.passo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 18px 20px;
  border: 1px solid #e7ece5;
  border-radius: 20px;
  background: var(--white);
  text-align: left;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.passo__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid #e2e8df;
  border-radius: 16px;
  background: var(--white);
  transition: border-color 0.4s ease;
}
.passo__ico img { width: 30px; height: 30px; opacity: 0.75; transition: opacity 0.4s ease; }
.passo__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.passo__linha { display: flex; align-items: baseline; gap: 15px; }
.passo__num { flex: none; font-size: 13px; font-weight: 700; color: #8a9687; font-variant-numeric: tabular-nums; transition: color 0.4s ease; }
.passo__titulo { font-size: 18px; font-weight: 700; line-height: 1.3; color: #5c6a59; transition: color 0.4s ease; }

/* Texto do passo: abre só no ativo (v1) */
.passo__mais {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.passo__mais > span { min-height: 0; overflow: hidden; }
.passo__texto { display: block; padding-top: 8px; padding-left: 33.2px; font-size: 15px; line-height: 1.6; color: #4f5d4c; text-wrap: pretty; }

/* Barra de tempo do passo ativo (6 s; no fim, o JS passa para o próximo) */
.passo__barra { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--leaf); }

.passo.is-active { align-items: flex-start; border-color: #dfe6dc; box-shadow: 0 18px 40px -24px rgba(21, 71, 21, 0.35); }
.passo.is-active .passo__ico { border-color: rgba(40, 168, 40, 0.35); }
.passo.is-active .passo__ico img { opacity: 1; }
.passo.is-active .passo__txt { padding-top: 14px; }
.passo.is-active .passo__num { color: var(--leaf); }
.passo.is-active .passo__titulo { color: var(--ink); }
.passo.is-active .passo__mais { grid-template-rows: 1fr; opacity: 1; }

@keyframes passo-barra { from { width: 0; } to { width: 100%; } }
.passos.is-playing .passo.is-active .passo__barra { animation: passo-barra 6s linear forwards; }
.passos__lista:hover .passo__barra,
.passos__lista:has(:focus-visible) .passo__barra { animation-play-state: paused !important; }

@media (hover: hover) {
  .passo:not(.is-active):hover { border-color: #d3dccf; }
  .passo:not(.is-active):hover .passo__titulo { color: var(--ink); }
}

/* Cartão com foto (Figma 161:105: raio 30, 40 de respiro, logo no topo, selo branco embaixo) */
.passos__card {
  grid-area: card;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 737px;
  padding: 40px;
  border-radius: var(--radius-card);
  background: var(--forest);
}
/* Véu leve no topo para o logo branco ler bem em qualquer foto */
.passos__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 30%;
  background: linear-gradient(180deg, rgba(10, 30, 10, 0.45), rgba(10, 30, 10, 0));
  pointer-events: none;
}
.passos__foto {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  opacity: 0;
  scale: 1.06;
  transition: opacity 0.6s ease, scale 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.passos__foto.is-active { opacity: 1; scale: 1; }
.passos__logo { width: 126px; height: 37px; }

/* Selo (Figma 161:107: branco, raio 18, ícone 44 em #eef2ec, rótulo verde 12px, texto 15px SemiBold) */
.passos__selo {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--white);
}
.passos__selo-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--mist); }
.passos__selo-ico img { width: 26px; height: 26px; }
.passos__selo-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.passos__selo-num { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.72px; text-transform: uppercase; color: var(--leaf); text-box: trim-both cap alphabetic; }
.passos__selo-titulo { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink); text-box: trim-both cap alphabetic; }

/* Telas médias */
@media (max-width: 1180px) {
  .passos__grid { column-gap: 56px; }
  .passos__card { height: 680px; }
}

/* Tablet e celular: título → foto → passos */
@media (max-width: 899px) {
  .passos { padding: 72px 0; }
  .passos__g { display: none; }
  .passos__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "card" "lista";
  }
  .passos__lead { margin-top: 24px; }
  .passos__card { height: auto; aspect-ratio: 4 / 4.2; margin-top: 32px; padding: 24px; }
  .passos__lista { margin-top: 24px; gap: 12px; }
}
@media (max-width: 767px) {
  .passos { padding: 64px 0; }
  .passos__card { aspect-ratio: 4 / 4.6; }
  .passo { gap: 12px; padding: 14px; }
  .passo__ico { width: 48px; height: 48px; border-radius: 14px; }
  .passo__ico img { width: 26px; height: 26px; }
  .passo__linha { gap: 10px; }
  .passo__titulo { font-size: 16px; }
  .passo.is-active .passo__txt { padding-top: 10px; }
  .passo__texto { padding-left: 0; font-size: 14px; }
  .passos__selo { padding: 12px; gap: 12px; }
  .passos__selo-titulo { font-size: 14px; }
}

/* ==========================================================================
   Depoimentos (Figma: fundo 161:1148 #f4f7f3 a 94%, carrossel 161:1045 com cartões 413 vazando dos lados)
   Os 8 cartões e o texto de apoio = v1 (o subtítulo do Figma era cópia do de Serviços).
   ========================================================================== */

.depoimentos {
  position: relative;
  padding: 81px 0 80px;                     /* 6822 → 6903 e 7337 → 7417 */
  background: rgba(244, 247, 243, 0.94);
}

/* Cabeçalho (Figma 161:906: 805 de largura; etiqueta → título 20, título → texto 40) */
.depoimentos__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(805px + 2 * var(--gutter));
  text-align: center;
}
.depoimentos__head .h2 { margin-top: 20px; }
.depoimentos__lead { margin-top: 40px; }

/* Faixa rolável: o cartão do meio fica no centro, os outros vazam para os lados */
.depoimentos__carrossel { margin-top: 40px; }
.depoimentos__trilho {
  display: flex;
  gap: 20px;
  padding: 4px calc(50% - 206.5px) 24px;   /* 24 embaixo: espaço para a sombra no foco/hover */
  margin-bottom: -24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  outline-offset: -3px;
}
.depoimentos__trilho::-webkit-scrollbar { display: none; }

/* Faixa contínua (JS duplica os cartões): anda metade da largura em loop.
   padding-right = vão, para a metade bater exatamente com um conjunto de cartões + vãos. */
.depoimentos__carrossel { overflow: hidden; }
.depoimentos__trilho.is-marquee {
  width: max-content;
  padding: 4px 20px 24px 0;
  overflow: visible;
  scroll-snap-type: none;
  animation: depo-marquee 80s linear infinite;
}
@keyframes depo-marquee { to { transform: translateX(-50%); } }
.depoimentos__carrossel:hover .is-marquee,
.depoimentos__carrossel:focus-within .is-marquee { animation-play-state: paused; }

/* Cartão (Figma 161:258: branco, borda #e7ece5, raio 24, 32 de respiro, vão 24) */
.depo {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 413px;
  padding: 32px;
  border: 1px solid #e7ece5;
  border-radius: 24px;
  background: var(--white);
  scroll-snap-align: center;
  transition: box-shadow 0.35s var(--ease), translate 0.35s var(--ease);
}
.depo__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.depo__estrelas { width: 85.6px; height: 13px; }
.depo__servico {
  padding: 9px 10px;
  border-radius: 999px;
  background: var(--mist);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--forest);
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.depo__texto { font-size: 16px; line-height: 1.4; color: #1a1a1a; }

/* Autor (Figma 161:273: linha 0,8px #eceeeb, 20 acima; foto 48; nome 15 Bold + selo verde; cidade 13 #6b6b6b) */
.depo__autor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 0.8px solid #eceeeb;
}
.depo__foto { flex: none; width: 48px; height: 48px; border-radius: 24px; background: var(--mist); overflow: hidden; }
.depo__quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.depo__nome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  text-box: trim-both cap alphabetic;
}
.depo__ok { flex: none; width: 15px; height: 15px; color: var(--leaf); }
.depo__cidade { font-size: 13px; line-height: 1.2; color: #6b6b6b; text-box: trim-both cap alphabetic; }

@media (hover: hover) {
  .depo:hover { translate: 0 -4px; box-shadow: 0 18px 40px -24px rgba(21, 71, 21, 0.35); }
}

@media (max-width: 767px) {
  .depoimentos { padding: 64px 0; }
  .depoimentos__lead { margin-top: 24px; }
  .depoimentos__carrossel { margin-top: 32px; }
  .depoimentos__trilho { gap: 14px; padding-inline: calc(50% - min(160px, 41vw)); }
  .depoimentos__trilho.is-marquee { padding-inline: 0 14px; animation-duration: 60s; }
  .depo { width: min(320px, 82vw); padding: 24px; gap: 20px; }
}

/* ==========================================================================
   Rostos conhecidos da marca (Figma 161:1056, y 7500–7967)
   Topo: 83px abaixo do fim do fundo dos depoimentos (7417); base: 80px até o fundo das dúvidas (8047)
   ========================================================================== */

.rostos { padding: 83px 0 80px; background: var(--white); }

/* Título à esquerda (595px) e texto à direita (515px), alinhados pelo topo */
.rostos__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.rostos__head .h2 { flex: 0 1 595px; }
.rostos__lead { flex: 0 1 515px; }

/* Cartões 630×393,75 (16:10), raio 28, verde #154715 */
.rostos__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rostos__card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 630 / 393.75;
  border-radius: 28px;
  background: var(--forest);
  color: var(--white);
}
.rostos__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }

/* Espaço reservado da peça oficial (Figma 161:420): véu cinza 8% + contorno tracejado 35% */
.rostos__slot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 24px 6px;
  border-radius: inherit;
  background: rgba(127, 127, 127, 0.08);
  text-align: center;
}
.rostos__slot::after { content: ""; position: absolute; inset: 0; border: 1px dashed rgba(244, 247, 243, 0.35); border-radius: inherit; }
.rostos__slot img { width: 28px; height: 28px; }
.rostos__slot span { font-size: 13px; font-weight: 500; line-height: 16.9px; letter-spacing: 0.13px; color: rgba(244, 247, 243, 0.75); }

/* Degradê de baixo (Figma 161:427): de 45% da altura até o fim, verde 0 → 88% */
.rostos__card::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, rgba(21, 71, 21, 0) 0%, rgba(21, 71, 21, 0.88) 100%);
  pointer-events: none;
}

.rostos__info { position: absolute; z-index: 1; left: 24px; bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.rostos__role {
  font-size: 12px;
  font-weight: 700;
  line-height: 15.2px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-box: none;
  color: var(--neon);
}
.rostos__name { font-size: 26px; font-weight: 800; line-height: 31.2px; letter-spacing: -0.26px; text-box: none; }

/* Selo "Campanha oficial" (Figma 161:430): pílula translúcida com desfoque, ícone neon 14px */
.rostos__badge {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30.8px;
  padding: 0 13.8px 0 11.8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.rostos__check {
  width: 14px;
  height: 14px;
  background: var(--neon);
  -webkit-mask: url("assets/icones/82-check.svg") center / contain no-repeat;
  mask: url("assets/icones/82-check.svg") center / contain no-repeat;
}

@media (hover: hover) {
  .rostos__card:hover .rostos__img { transform: scale(1.05); }
}

@media (max-width: 1023px) {
  .rostos__head { flex-direction: column; gap: 16px; }
  .rostos__head .h2, .rostos__lead { flex: none; }
}

@media (max-width: 767px) {
  .rostos { padding: 64px 0; }
  .rostos__head { margin-bottom: 28px; }
  .rostos__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rostos__card { aspect-ratio: 4 / 3; border-radius: var(--radius-card); }
  .rostos__info { left: 20px; bottom: 20px; }
  .rostos__name { font-size: 24px; }
  /* No celular o selo sobe para o canto de cima e não disputa espaço com o nome */
  .rostos__badge { top: 16px; right: 16px; bottom: auto; }
}

/* ==========================================================================
   Dúvidas (Figma: fundo 161:1147 y 8047–8851, coluna 161:480, acordeão 161:569, G 161:1095)
   Topo 80px; base 80px até o bloco da licença (9015)
   ========================================================================== */

.faq { position: relative; isolation: isolate; padding: 80px 0; background: var(--white); }

/* Fundo (Figma 161:1147): #f4f7f3 + grade de pontos neon a 10% (quadradinhos de 7px a cada 27,28px,
   centrada na tela) + degradê para branco. O shader do Figma é estático, então vai como padrão em CSS. */
.faq::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 auto;
  height: 804px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.28' height='27.28'%3E%3Crect x='10.14' y='10.14' width='7' height='7' fill='%23def8db'/%3E%3C/svg%3E") 50% 5.86px / 27.28px 27.28px,
    #f5f8f4;
}

/* G da marca a 5% (Figma 161:1095): 560×744,8 girado 90°, canto em (container + 40px, 517,6px);
   desce por trás do bloco da licença */
.faq__g {
  position: absolute;
  z-index: -1;
  top: 517.6px;
  left: calc(50% - var(--container) / 2 + 40px);
  width: 560px;
  height: 744.8px;
  max-width: none;
  opacity: 0.05;
  transform: rotate(90deg);
  transform-origin: 0 0;
  pointer-events: none;
}

/* Colunas: 559px | 630px, separadas por 92px */
.faq__grid { display: grid; grid-template-columns: minmax(0, 559px) minmax(0, 630px); justify-content: space-between; column-gap: 40px; align-items: start; }

/* Coluna da esquerda acompanha a rolagem no computador (como na v1) */
.faq__side { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; padding-top: 2px; }
.faq__intro { display: flex; flex-direction: column; gap: 20px; }
.faq__tag-ico {
  background: currentColor;
  -webkit-mask: url("assets/icones/85-pergunta.svg") center / contain no-repeat;
  mask: url("assets/icones/85-pergunta.svg") center / contain no-repeat;
}

/* Cartão "Ainda com dúvida?" (Figma 161:557) */
.faq__contato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  border: 1px solid rgba(21, 71, 21, 0.2);
  border-radius: 20px;
  background: #f4f7f3;
}
.faq__pessoa { display: flex; align-items: center; gap: 21px; width: 100%; }
.faq__avatar { width: 65px; height: 65px; flex: none; border-radius: 50%; object-fit: cover; }
.faq__pessoa-txt { display: flex; flex-direction: column; gap: 17px; color: var(--text); }
.faq__pessoa-t { font-size: 20px; font-weight: 700; line-height: 1.4; }
.faq__pessoa-s { font-size: 16px; line-height: 1.4; }

/* Acordeão (Figma 161:458): contorno verde 13%, raio 20, 16px 24px; número 14px ExtraBold #28a828,
   pergunta 17px Bold; botão branco 38px com "+" 18px */
.faq__list { display: flex; flex-direction: column; gap: 20px; }
.faq__item {
  border: 1px solid rgba(21, 71, 21, 0.13);
  border-radius: 20px;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.faq__h { text-box: none; }
.faq__btn {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 70px;
  padding: 16px 24px;
  border: 0;
  border-radius: 20px;
  background: none;
  text-align: left;
  color: var(--ink);
}
.faq__n { flex: none; min-width: 18px; font-size: 14px; font-weight: 800; line-height: 1; color: var(--leaf); font-variant-numeric: tabular-nums; }
.faq__q { flex: 1; font-size: 17px; font-weight: 700; line-height: 22.95px; transition: color 0.2s var(--ease); }
.faq__ico {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 19px;
  background: var(--white);
  transition: background 0.25s var(--ease);
}
.faq__ico::before {
  content: "";
  position: absolute;
  inset: 10px;
  background: var(--ink);
  -webkit-mask: url("assets/icones/85-mais.svg") center / contain no-repeat;
  mask: url("assets/icones/85-mais.svg") center / contain no-repeat;
  transition: transform 0.35s var(--ease);
}

/* Resposta: abre com animação de altura (grid 0fr → 1fr, como na v1). Sem JavaScript, tudo aparece aberto. */
.faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--ease), opacity 0.35s ease, visibility 0s linear 0s; }
.faq__a-in { min-height: 0; overflow: hidden; }
.faq__a p { padding: 0 24px 22px 62px; font-size: 16px; line-height: 1.5; text-box: none; color: var(--text); }
.js .faq__item:not(.is-open) .faq__a {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--ease), opacity 0.35s ease, visibility 0s linear 0.45s;
}

/* Item aberto: cartão branco com sombra suave, "+" vira "×" em fundo neon */
.faq__item.is-open { border-color: transparent; background: var(--white); box-shadow: 0 14px 34px -18px rgba(21, 71, 21, 0.35); }
.faq__item.is-open .faq__ico { background: var(--neon); }
.faq__item.is-open .faq__ico::before { transform: rotate(45deg); }
.faq__item.is-open .faq__q { color: var(--forest); }

@media (hover: hover) {
  .faq__btn:hover .faq__q { color: var(--forest); }
  .faq__btn:hover .faq__ico { background: var(--mist); }
  .faq__item.is-open .faq__btn:hover .faq__ico { background: var(--neon); }
}

@media (max-width: 1100px) {
  .faq__g { display: none; }
}

/* Tablet e celular: uma coluna — título, perguntas e, por último, o cartão de contato */
@media (max-width: 959px) {
  .faq__grid { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .faq__side { display: contents; }
  .faq__intro { order: 1; }
  .faq__side > .body { order: 2; margin-top: -12px; }
  .faq__list { order: 3; }
  .faq__contato { order: 4; align-self: flex-start; }
}

@media (max-width: 767px) {
  .faq { padding: 64px 0; }
  .faq__list { gap: 12px; }
  .faq__btn { gap: 14px; padding: 14px 16px; }
  .faq__q { font-size: 16px; line-height: 1.35; }
  .faq__ico { width: 34px; height: 34px; }
  .faq__ico::before { inset: 9px; }
  .faq__a p { padding: 0 16px 20px 48px; font-size: 15px; }
  .faq__contato { align-self: stretch; padding: 24px 20px; }
  .faq__pessoa { gap: 16px; }
  .faq__avatar { width: 56px; height: 56px; }
  .faq__pessoa-txt { gap: 12px; }
  .faq__pessoa-t { font-size: 18px; }
}

/* ==========================================================================
   Licença (Figma 161:801, y 9015–9790): bloco verde #123e12, raio 32, 80px de respiro, 1278px
   Fica por cima do G decorativo das dúvidas; base de 80px até os cartões "Papo reto"
   ========================================================================== */

.licenca { position: relative; z-index: 1; padding: 0 0 80px; }

.licenca__box {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 80px;
  border-radius: 32px;
  background: #123e12;
  color: var(--white);
}
.licenca__row { display: flex; align-items: stretch; gap: 72px; }

/* Coluna do texto (434px): etiqueta, título 48px, texto 17px e botão, 30px entre eles.
   Aqui o Figma não corta os textos (altura de linha "normal" = 1,219 na Montserrat). */
.licenca__main { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 30px; flex: 0 0 434px; }
.licenca__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32.8px;
  padding: 0 14px 0 13.8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-box: none;
}
.licenca__dot { width: 6px; height: 6px; border-radius: 3px; background: var(--neon); }
.licenca__title { font-size: 48px; font-weight: 800; line-height: 1.219; letter-spacing: -1.3px; text-box: none; text-wrap: balance; }
.licenca__title span { color: var(--neon); }
.licenca__text { font-size: 17px; line-height: 1.219; text-box: none; color: #d6e4d3; }

/* "O que está incluso": 2×2, 1ª linha 182px, 2ª linha ocupa o resto da altura do bloco */
.licenca__inc { display: flex; flex-direction: column; gap: 14px; flex: 1 1 612px; min-width: 0; }
.licenca__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 15.2px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  text-box: none;
  color: var(--neon);
}
.licenca__grid { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 182px minmax(0, 1fr); gap: 12px; }
/* Cartão (Figma 161:694): contorno branco 14%, raio 20, degradê branco 12% → 4%.
   Ícone 34px a 19,8px do canto; texto 15px SemiBold com a base 137px abaixo do topo */
.licenca__item {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 19.8px 40px 0 19.8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.licenca__item img { width: 34px; height: 34px; }
.licenca__item span { text-wrap: wrap; display: flex; align-items: flex-end; min-height: 63px; font-size: 15px; font-weight: 600; line-height: 21px; }

/* Faixa do portfólio (Figma 161:732): linha de 0,8px branca 16% + título 16px + 6 serviços */
.licenca__port { display: flex; flex-direction: column; gap: 22px; padding-top: 22px; border-top: 0.8px solid rgba(255, 255, 255, 0.16); }
.licenca__port-t { font-size: 16px; font-weight: 700; line-height: 22.4px; text-align: center; text-box: none; }
.licenca__port-t span { color: var(--neon); }
.licenca__svcs { display: grid; grid-template-columns: repeat(6, 144.66px); justify-content: space-between; }
.licenca__svcs li { display: flex; align-items: center; gap: 10px; height: 30px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; color: #e6efe4; }
.licenca__svcs img { width: 30px; height: 30px; flex: none; }

@media (hover: hover) {
  .licenca__item:hover { transform: translateY(-4px); background: linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.06) 100%); }
}

/* Telas médias: menos respiro */
@media (max-width: 1240px) {
  .licenca__box { padding: 64px 48px; }
  .licenca__row { gap: 48px; }
  .licenca__main { flex-basis: 400px; }
  .licenca__title { font-size: 42px; }
  .licenca__svcs { grid-template-columns: repeat(6, auto); }
}

/* Tablet: texto em cima, cartões embaixo; serviços em 3 colunas */
@media (max-width: 1023px) {
  .licenca__row { flex-direction: column; gap: 40px; }
  .licenca__main { flex: none; }
  .licenca__grid { grid-template-rows: none; grid-auto-rows: minmax(160px, auto); }
  .licenca__item { padding-bottom: 20px; }
  .licenca__svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; justify-content: stretch; }
  .licenca__svcs li { justify-content: center; }
}

@media (max-width: 767px) {
  .licenca { padding-bottom: 64px; }
  .licenca__box { gap: 40px; padding: 40px 20px; border-radius: var(--radius-card); }
  .licenca__main { gap: 24px; }
  .licenca__tag { height: auto; min-height: 32.8px; padding-block: 8px; font-size: 11px; letter-spacing: 0.5px; line-height: 1.3; }
  .licenca__title { font-size: 34px; letter-spacing: -1px; }
  .licenca__text { font-size: 16px; line-height: 1.4; }
  /* Celular: tudo centralizado (pedido do cliente 2026-11-09) */
  .licenca__main { align-items: center; text-align: center; }
  .licenca__label { text-align: center; }
  .licenca__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 10px; }
  .licenca__item { align-items: center; gap: 12px; padding: 20px 24px; text-align: center; }
  .licenca__item span { min-height: 0; display: block; }
  .licenca__svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .licenca__svcs li { flex-direction: column; justify-content: flex-start; gap: 8px; height: auto; font-size: 13px; text-align: center; }
}

/* ==========================================================================
   Papo reto + Investimento (Figma 161:1063, y 9870–10179; fundo branco 161:2292)
   Base de 80px: é o respiro até o CTA final (10259), que começa sem respiro em cima
   ========================================================================== */

.papo { padding: 0 0 80px; background: var(--white); }
.papo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Cartão (Figma 161:856): branco, contorno #e7ece5, raio 28, min. 309,2px; ícone 56px a 39,8px;
   textos começam 115,8px da borda (39,8 + 56 + 20). O Figma não corta estes textos. */
.papo__card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  min-height: 309.2px;
  padding: 39.8px 40px 39.8px 39.8px;
  border: 1px solid #e7ece5;
  border-radius: 28px;
  background: var(--white);
}
.papo__ico { width: 56px; height: 56px; }
.papo__body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.papo__body > * { text-box: none; text-wrap: wrap; }
.papo__label { font-size: 12px; font-weight: 700; line-height: 15.2px; letter-spacing: 0.72px; text-transform: uppercase; color: var(--forest); }
.papo__frase { font-size: 22px; font-weight: 700; line-height: 30.8px; color: var(--ink); }
.papo__text { font-size: 15px; line-height: 24px; color: var(--text); }
.papo__text--lg { font-size: 16px; line-height: 25.6px; }

/* Link "Perguntar o valor no WhatsApp" (Figma 161:874): 15px Bold #154715 + seta 16px */
.papo__link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; line-height: 18.4px; color: var(--forest); }
.papo__seta {
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("assets/icones/90-seta.svg") center / contain no-repeat;
  mask: url("assets/icones/90-seta.svg") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}

@media (hover: hover) {
  .papo__link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .papo__link:hover .papo__seta { transform: translateX(4px); }
}

@media (max-width: 1023px) {
  .papo__grid { grid-template-columns: minmax(0, 1fr); }
  .papo__card { min-height: 0; }
}

@media (max-width: 767px) {
  .papo { padding-bottom: 64px; }
  .papo__grid { gap: 16px; }
  .papo__card { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 28px 22px; border-radius: var(--radius-card); }
  .papo__ico { width: 44px; height: 44px; }
  .papo__frase { font-size: 20px; line-height: 28px; }
}

/* ==========================================================================
   Chamada final (Figma 161:1069): cartão 1280×528, #154715, raio 32.
   O fundo da página clareia até #f4f7f3 e termina com cantos arredondados sobre o rodapé.
   ========================================================================== */

.contato {
  position: relative;
  z-index: 1;
  padding: 0 0 91px;                 /* os 80px de cima vêm do fim da seção 90 (papo reto) */
  border-radius: 0 0 40px 40px;
  background: linear-gradient(180deg, var(--white) 0%, #f4f7f3 100%);
}
.contato__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 528px;
  padding: 102px 24px 99px;
  border-radius: 32px;
  background: var(--forest);
  text-align: center;
}
/* Marca-d'água (Figma 161:1070: g-verde a 8%, inset -20% -4% -20% 60,56%) */
.contato__deco {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 60.56%;
  width: auto;
  height: 140%;
  max-width: none;
  opacity: 0.08;
  pointer-events: none;
}
.contato__title {
  position: relative;
  max-width: 719px;
  font-size: 58px;
  font-weight: 800;
  line-height: 60.9px;
  letter-spacing: -1.45px;
  color: var(--white);
}
.contato__lead {
  position: relative;
  max-width: 560px;
  margin-top: 50px;
  font-size: 18px;
  line-height: 28.8px;
  color: #e0e0e0;
}
.contato .btn-wa { position: relative; margin-top: 37px; }
.contato__note { position: relative; margin-top: 28px; font-size: 14px; line-height: 1.4; color: #cfe5cb; }

@media (max-width: 767px) {
  .contato { padding: 0 0 64px; border-radius: 0 0 28px 28px; }
  .contato__card { min-height: 0; padding: 56px 20px; border-radius: 24px; }
  .contato__title { font-size: 34px; line-height: 1.12; letter-spacing: -1px; }
  .contato__lead { margin-top: 28px; font-size: 16px; line-height: 1.55; }
  .contato .btn-wa { margin-top: 28px; }
  .contato__note { margin-top: 22px; }
  .contato__deco { left: 40%; opacity: 0.06; }
}

/* ==========================================================================
   Página 404 e Política de Privacidade (não existem no Figma; seguem os tokens)
   ========================================================================== */

.not-found { background: var(--forest); }
.not-found__inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

.policy { background: #f4f7f3; }
.policy__header { background: var(--forest); }
.policy__bar { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.policy__brand { display: flex; align-items: center; gap: 14px; }
.policy__brand img { width: 109px; height: 30px; }
.policy__lic { font-size: 11px; font-weight: 600; line-height: 13.75px; letter-spacing: 0.44px; text-transform: uppercase; color: #b9c7b7; }
.policy__back { font-size: 15px; font-weight: 600; color: var(--neon); }
.policy__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: calc(860px + 2 * var(--gutter));
  padding-block: 80px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}
.policy__content p,
.policy__content li { text-box: none; }
.policy__content h1 { margin-bottom: 4px; }
.policy__content h2 { margin-top: 24px; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--ink); text-box: none; }
.policy__content strong { color: var(--ink); }
.policy__content ul { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; list-style: disc; }
.policy__content a,
.policy__link { color: var(--forest); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.policy__link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.policy__updated { font-size: 14px; }
.policy__table { overflow-x: auto; border-radius: 16px; background: var(--white); }
.policy__table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.policy__table th,
.policy__table td { padding: 12px 16px; text-align: left; }
.policy__table th { background: var(--mist); color: var(--forest); font-weight: 700; }
.policy__table tr:nth-child(even) td { background: #f7f9f6; }

.policy__footer { padding: 28px 0; background: var(--forest); color: var(--on-dark-muted); font-size: 13px; }
.policy__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.policy__foot p { text-box: none; }
.policy__foot p:last-child { display: flex; gap: 24px; }
.policy__foot a,
.policy__foot .policy__link { color: var(--on-dark); font-weight: 500; }

@media (hover: hover) {
  .policy__back:hover { color: var(--white); }
  .policy__foot a:hover,
  .policy__foot .policy__link:hover { color: var(--neon); }
}


/* ==========================================================================
   Aviso de cookies (LGPD) — não existe no Figma; segue os tokens do site
   ========================================================================== */

.consent {
  position: fixed;
  z-index: 60;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent[hidden] { display: none; }
.consent__box {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 860px;
  padding: 24px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 20px 50px -20px rgba(5, 30, 5, 0.45), 0 0 0 1px rgba(21, 71, 21, 0.12);
  color: var(--text);
}
.consent__title { font-size: 18px; font-weight: 700; color: var(--forest); }
.consent__text { font-size: 14px; line-height: 1.5; text-box: none; }
.consent__text a { color: var(--forest); text-decoration: underline; }
.consent__prefs { display: flex; flex-direction: column; gap: 10px; }
.consent__prefs[hidden] { display: none; }
.consent__opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}
.consent__opt input { margin-top: 2px; accent-color: var(--forest); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.consent__btn {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--forest);
  border-radius: 999px;
  background: var(--white);
  font-size: 14px;
  font-weight: 700;
  color: var(--forest);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.consent__btn[hidden] { display: none; }
.consent__btn--primary { border-color: transparent; background: var(--grad-cta); color: var(--ink); }
.consent__btn--link {
  border-color: transparent;
  padding-inline: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-transform: none;
}

@media (hover: hover) {
  .consent__btn:hover { background: var(--forest); color: var(--white); }
  .consent__btn--primary:hover { background: var(--neon); color: var(--ink); }
  .consent__btn--link:hover { background: none; color: var(--forest); text-decoration-thickness: 2px; }
}

/* ==========================================================================
   Rodapé — no Figma é só o fundo #154715 (161:2289) com "RODAPÉ" de exemplo;
   conteúdo e colunas vêm da v1 (15-rodape), no visual do site novo.
   Sobe 40px por trás dos cantos arredondados da chamada final.
   ========================================================================== */

.footer {
  margin-top: -40px;
  padding: 120px 0 40px;
  background: var(--forest);
  color: var(--on-dark);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
}
.footer__logo { width: 131px; height: 36px; }
.footer__phrase { max-width: 300px; margin-top: 28px; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--white); }
.footer__person { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--on-dark-muted); text-box: none; }
.footer__person strong { color: var(--on-dark); font-weight: 600; }

.footer__title {
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--neon);
}
.footer__col ul { display: grid; gap: 14px; }
.footer__col a,
.footer__col span { font-size: 15px; line-height: 1.4; color: var(--on-dark); transition: color 0.2s var(--ease); }
.footer__contact { display: inline-flex; align-items: center; gap: 10px; }
.footer__contact .ico { width: 18px; height: 18px; color: var(--neon); }

/* Aviso + linha legal num bloco mais escuro (sem linhas divisórias) */
.footer__base {
  margin-top: 64px;
  padding: 28px 32px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.18);
}
.footer__notice { max-width: 980px; font-size: 13px; line-height: 1.6; color: var(--on-dark-muted); text-box: none; }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 20px; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; color: var(--on-dark-muted); }
.footer__legal a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s var(--ease); }
.footer__top { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--white); }
.footer__top .ico { width: 18px; height: 18px; transition: translate 0.3s var(--ease); }

@media (hover: hover) {
  .footer__col a:hover,
  .footer__legal a:hover { color: var(--neon); }
  .footer__top:hover .ico { translate: 0 -3px; }
}

@media (max-width: 1023px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer { margin-top: -28px; padding: 88px 0 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__col a,
  .footer__col span { font-size: 14px; }
  .footer__base { margin-top: 48px; padding: 22px 20px; }
}

/* Botão flutuante do WhatsApp — sobe acima do aviso de cookies enquanto ele está aberto
   (--consent-h vem do 98-consent.js; sem aviso, o fallback -20px dá os 24px de margem) */
.wa-float {
  position: fixed;
  z-index: 55;
  right: 24px;
  bottom: calc(var(--consent-h, -20px) + 44px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  box-shadow: 0 10px 24px -8px rgba(5, 30, 5, 0.45);
  transition: translate 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wa-float svg { width: 30px; height: 30px; }
@media (hover: hover) {
  .wa-float:hover { translate: 0 -3px; box-shadow: 0 14px 28px -8px rgba(5, 30, 5, 0.5); }
}
@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: calc(var(--consent-h, -20px) + 36px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
  .wa-float svg { width: 28px; height: 28px; }
}