/* ==========================================================================
   CentroSeg — Portaria Autônoma
   Tokens extraídos via Figma MCP (fileKey ns9qG2T0sz6ZO6staQmuj4)
   Desktop node 73:4 · Mobile node 73:343
   ========================================================================== */

/* min-width:0 is deliberate and global: flex items default to min-width:auto,
   which for nowrap text resolves to the text's full content width and
   refuses to shrink below it. On a tight window that pushes a flex row
   wider than its container and forces a page-level horizontal scrollbar —
   this codebase has no legitimate use of intrinsic min-width sizing (no
   CSS Grid, only flexbox), so resetting it everywhere is safe. */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:root {
  --font: 'Alexandria', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --bg: #0A0A0A;
  --heading-on-dark: #DAE6D4;
  --body-on-dark: #BACBB4;
  --on-accent: #00390A;

  --accent: #84FF84;       /* verde primário (desktop) */
  --accent-mobile: #00E846; /* verde primário (mobile) */
  --whatsapp: #24D45C;

  --header-h: 80px;
  --header-h-mobile: 64px;

  /* Figma's desktop frame is authored at 1280px, but a flat 1280px cap
     leaves large idle gutters on real laptop/desktop screens (1440-1920px+).
     1440px keeps the same proportions/line-lengths while using more of
     the viewport on common resolutions. */
  --container: 1440px;

  --ease: cubic-bezier(.16,.8,.3,1);
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: var(--font);
  color: var(--body-on-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, p, h1, h2, h3 { margin: 0; }

.icon { width: 1em; height: 1em; display: inline-block; }

/* Breakpoint toggles: the Figma desktop (73:4) and mobile (73:343) frames
   diverge in content/layout (not just reflow), so divergent sections ship
   as two blocks and CSS picks one — matching each frame exactly instead of
   forcing a single compromise markup. */
/* This utility only ever HIDES (never sets display:block/flex/grid to
   "show") so it can't fight a component's own display rule (flex, grid...).
   !important is needed only on the hide side, to beat those same rules
   regardless of source order. */
@media (max-width: 767.98px) {
  .only-desktop { display: none !important; }
}
@media (min-width: 768px) {
  .only-mobile { display: none !important; }
}

/* Visually-hidden-until-focused pattern. Avoids the classic left:-9999px
   technique, which can push an element far enough outside the layout to
   inflate scrollWidth and create a phantom horizontal scrollbar in some
   browsers. This version has zero layout footprint until :focus. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

/* Anchor targets (Benefícios, Economia, Como Funciona, Segurança) land
   below the sticky header instead of underneath it. */
[id] { scroll-margin-top: 88px; }

/* Full-bleed background bands: lets a section's color fill the viewport
   edge-to-edge while its content stays centered at max-width, without
   extra wrapper markup. Deliberately NOT box-shadow — a spread shadow
   bleeds equally in every direction (including vertically into the
   sections above/below), which corrupted adjacent sections' colors. This
   ::before is pinned to the section's own top/bottom, so it only ever
   fills sideways. */
.full-bleed { position: relative; z-index: 0; }
.full-bleed::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
}
.full-bleed--white::before { background: #fff; }
.full-bleed--dark::before { background: var(--bg); }
.full-bleed--footer::before { background: #071007; }

/* ---------- Scroll reveal (fade-up) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.btn--pill { border-radius: 9999px; padding: 8px 24px; font-weight: 600; }
.btn--rounded { border-radius: 12px; padding: 16px 32px; }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent-mobile { background: var(--accent-mobile); color: #006218; font-weight: 600; box-shadow: 0 0 10px rgba(132,255,132,.3); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(16,18,19,.7);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: var(--header-h-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .site-header__inner { height: var(--header-h); padding: 16px 80px; }
}

.brand__logo { height: 34px; width: auto; }
@media (min-width: 768px) { .brand__logo { height: 42px; } }

.nav-links { display: none; }
.header-cta { display: none; }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--body-on-dark);
  font-size: 18px;
}
@media (min-width: 768px) {
  .nav-links { display: flex; align-items: center; gap: 24px; }
  .nav-links a { font-weight: 600; font-size: 16px; color: var(--body-on-dark); }
  .nav-links a:hover { color: var(--heading-on-dark); }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

.mobile-menu {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 16px; }
.mobile-menu__links a { font-weight: 600; font-size: 16px; color: var(--body-on-dark); }
@media (min-width: 768px) {
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   Badges shared
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  font-weight: 600;
}
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.badge--desktop { background: #232D21; color: var(--accent); font-size: 14px; padding: 6px 16px; }
.badge--mobile {
  background: rgba(0,232,70,.1);
  border: 1px solid rgba(132,255,132,.2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

.accent-text { color: var(--accent); }

/* ==========================================================================
   Hero — desktop
   ========================================================================== */
.hero--desktop {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 112px 80px 96px;
  max-width: var(--container);
  margin: 0 auto;
}
/* align-items defaults to stretch here (not flex-start) so the heading and
   paragraph both take the column's full width and share the same right
   edge; badge and CTA opt back out to their own content width below,
   since those should stay pill-sized, not stretched. */
.hero--desktop .hero__left { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.hero--desktop .hero__left > .badge,
.hero--desktop .hero__left > .btn { align-self: flex-start; }
.hero__heading--desktop {
  width: 100%;
  max-width: 536px; /* largura exata da coluna no Figma (73:15) — mantém a mesma quebra de linha do design */
  font-weight: 800;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: var(--heading-on-dark);
}
.hero__subtitle--desktop { width: 100%; max-width: 536px; font-size: 18px; line-height: 28px; color: var(--body-on-dark); font-weight: 400; }

.hero--desktop .hero__right { flex: 1; position: relative; }
.hero__image { border-radius: 24px; width: 100%; height: 432px; object-fit: cover; }

.recognition-card {
  position: absolute;
  left: -30px;
  bottom: -30px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: rgba(16,18,19,.7);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 20px);
}
.recognition-card__icon {
  display: inline-flex;
  padding: 12px;
  border-radius: 9999px;
  background: rgba(132,255,132,.2);
  color: var(--accent);
  font-size: 20px;
  flex-shrink: 0;
}
.recognition-card__text { display: flex; flex-direction: column; gap: 2px; }
.recognition-card__text strong { font-weight: 700; font-size: 16px; color: var(--heading-on-dark); }
.recognition-card__text em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--accent); }

/* ==========================================================================
   Hero — mobile
   ========================================================================== */
.hero--mobile {
  position: relative;
  background: var(--bg);
  overflow: hidden;
  padding: 48px 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.hero__watermark {
  position: absolute;
  top: -20px;
  left: -80px;
  font-weight: 900;
  font-size: 80px;
  line-height: 1;
  color: rgba(132,255,132,.03);
  transform: rotate(12deg);
  white-space: nowrap;
  pointer-events: none;
}
.hero__content { display: flex; flex-direction: column; gap: 24px; position: relative; }
.hero__heading--mobile { font-weight: 700; font-size: 30px; line-height: 38px; letter-spacing: -0.3px; color: var(--heading-on-dark); }
.hero__subtitle--mobile { font-size: 15px; line-height: 22px; color: var(--body-on-dark); font-weight: 400; }

.hero__mockup {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(16,18,19,.7);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__mockup img { width: 100%; height: 200px; object-fit: cover; }
.hero__mockup-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,22,11,.8), rgba(12,22,11,0));
}
.toast-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(16,18,19,.7);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.toast-overlay__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(0,232,70,.15);
  color: var(--accent-mobile);
  font-size: 16px;
  flex-shrink: 0;
}
.toast-overlay__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.toast-overlay__text strong { font-weight: 600; font-size: 13px; color: var(--heading-on-dark); }
.toast-overlay__text em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--body-on-dark); }

/* ==========================================================================
   Authority Strip — desktop
   ========================================================================== */
.authority--desktop {
  border-top: 1px solid #D2DDD0;
  border-bottom: 1px solid #D2DDD0;
  display: flex;
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 80px;
}
.authority__metric { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.authority__value { font-weight: 800; font-size: 32px; color: var(--on-accent); }
.authority__label { font-weight: 600; font-size: 14px; color: #3D4F3C; }

/* ==========================================================================
   Authority Belt — mobile
   ========================================================================== */
.authority-belt {
  background: #fff;
  border-top: 1px solid rgba(60,75,57,.2);
  border-bottom: 1px solid rgba(60,75,57,.2);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.authority-belt__item { display: flex; align-items: center; gap: 12px; }
.authority-belt__number { font-weight: 700; font-size: 36px; color: var(--accent-mobile); min-width: 43px; }
.authority-belt__label { font-weight: 600; font-size: 14px; line-height: 18px; color: #101213; }
.authority-belt__icon { width: 32px; height: 32px; color: var(--accent-mobile); flex-shrink: 0; }
.authority-belt__divider { border: none; border-top: 1px solid rgba(60,75,57,.2); margin: 0; }

/* ==========================================================================
   Benefits — desktop
   ========================================================================== */
.benefits--desktop {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.benefits__header { display: flex; flex-direction: column; gap: 12px; }
.benefits__heading { font-weight: 800; font-size: 32px; line-height: 1.2; color: #0F1E11; max-width: 900px; }
.benefits__subtitle { font-weight: 400; font-size: 16px; color: #3D4F3C; }
.benefits__cards { display: flex; gap: 32px; }
.benefit-card {
  flex: 1;
  background: #F9FAF8;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.benefit-card__title { font-weight: 800; font-size: 18px; color: var(--on-accent); }
.benefit-card__body { font-weight: 400; font-size: 15px; line-height: 22px; color: #3D4F3C; }

/* ==========================================================================
   Benefits — mobile
   ========================================================================== */
.benefits--mobile { background: #fff; padding: 64px 20px; display: flex; flex-direction: column; gap: 40px; }
.benefits__heading--mobile { font-weight: 700; font-size: 26px; line-height: 32px; color: #101213; }
.accent-text-mobile { color: var(--accent-mobile); }
.benefits__list { display: flex; flex-direction: column; gap: 24px; }
.benefit-row { display: flex; gap: 16px; align-items: flex-start; }
.benefit-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: rgba(0,232,70,.12);
  color: var(--accent-mobile);
  font-size: 20px;
  flex-shrink: 0;
}
.benefit-row__body { display: flex; flex-direction: column; gap: 4px; }
.benefit-row__title { font-weight: 600; font-size: 16px; color: #101213; }
.benefit-row__text { font-weight: 400; font-size: 14px; line-height: 20px; color: #485344; }

.device-glow { position: relative; padding: 12px; }
.device-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,232,70,.15);
  filter: blur(20px);
  border-radius: 9999px;
}
.device-glow img {
  position: relative;
  width: 100%;
  aspect-ratio: 350 / 192;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(10,10,10,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

/* ==========================================================================
   Economy Table — desktop
   ========================================================================== */
.economy--desktop {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.economy__header { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.economy__heading { font-weight: 800; font-size: 32px; color: var(--heading-on-dark); }
.economy__subtitle { font-weight: 400; font-size: 16px; color: var(--body-on-dark); }

.economy-table-wrap {
  width: 100%;
  max-width: 837px; /* soma exata das 3 colunas (264+348+225), evita a tabela forçar mais largura que o wrapper permite */
  background: #161815;
  border: 1px solid #2E342B;
  border-radius: 24px;
  overflow: hidden;
}
.economy-table { width: 100%; border-collapse: collapse; }
.economy-table--desktop th, .economy-table--desktop td { text-align: left; padding: 24px; font-size: 16px; }
.economy-table--desktop thead th {
  background: rgba(35,45,33,.5);
  border-bottom: 1px solid #2E342B;
  font-weight: 700;
  color: var(--heading-on-dark);
}
.economy-table--desktop tbody td { color: var(--body-on-dark); font-weight: 400; border-top: 1px solid #2E342B; }
.economy-table--desktop tbody tr:first-child td { border-top: none; }
.economy-table--desktop .economy-table__highlight td { background: rgba(132,255,132,.05); color: var(--accent); font-weight: 700; }
.economy-table--desktop th:nth-child(1), .economy-table--desktop td:nth-child(1) { width: 264px; }
.economy-table--desktop th:nth-child(2), .economy-table--desktop td:nth-child(2) { width: 348px; }
.economy-table--desktop th:nth-child(3), .economy-table--desktop td:nth-child(3) { width: 225px; }

.economy__footnote { font-weight: 400; font-size: 13px; color: var(--body-on-dark); text-align: center; max-width: 900px; }

/* ==========================================================================
   Economy Table — mobile
   ========================================================================== */
.economy--mobile { background: var(--bg); padding: 64px 20px; display: flex; flex-direction: column; gap: 32px; }
.economy__heading--mobile { font-weight: 700; font-size: 26px; text-align: center; }
.economy__subtitle--mobile { font-size: 14px; text-align: center; }

.economy-table-wrap--mobile { background: #121415; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; overflow: hidden; }
.economy-table--mobile { table-layout: fixed; }
.economy-table--mobile th:nth-child(1), .economy-table--mobile td:nth-child(1) { width: 32%; }
.economy-table--mobile th:nth-child(2), .economy-table--mobile td:nth-child(2) { width: 38%; }
.economy-table--mobile th:nth-child(3), .economy-table--mobile td:nth-child(3) { width: 30%; }
.economy-table--mobile th, .economy-table--mobile td { padding: 16px 8px; font-size: 13px; }
.economy-table--mobile th:first-child, .economy-table--mobile td:first-child { padding-left: 16px; }
.economy-table--mobile th:last-child, .economy-table--mobile td:last-child { padding-right: 16px; }
.economy-table--mobile thead th {
  background: rgba(45,55,43,.25);
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-weight: 600;
  font-size: 13px;
  color: var(--body-on-dark);
  padding: 14px 16px;
}
.economy-table--mobile tbody td { color: var(--heading-on-dark); font-weight: 500; border-top: 1px solid rgba(255,255,255,.1); }
.economy-table--mobile tbody tr:first-child td { border-top: none; }
.economy-table--mobile .is-center { text-align: center; }
.economy-table--mobile .is-right { text-align: right; color: var(--body-on-dark); }
.cell-icon-label { display: inline-flex; align-items: center; gap: 4px; }
.cell-icon-label .icon { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.economy-table--mobile .economy-table__highlight td { background: rgba(0,232,70,.06); color: var(--accent); font-weight: 700; }
.economy-table--mobile .economy-table__highlight .is-right { color: var(--accent); }

.cost-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(255,255,255,.1);
  color: var(--heading-on-dark);
  font-size: 12px;
  font-weight: 500;
}
.cost-badge--max { background: var(--accent-mobile); color: #006218; font-weight: 700; padding: 4px 10px; }

/* ==========================================================================
   How It Works — mobile only (não existe no frame desktop 73:4)
   ========================================================================== */
.how-it-works { background: #fff; padding: 64px 20px; display: flex; flex-direction: column; gap: 40px; }
.how-it-works__header { display: flex; flex-direction: column; gap: 8px; }
.how-it-works__heading { font-weight: 700; font-size: 26px; line-height: 32px; color: #101213; }
.how-it-works__subtitle { font-weight: 400; font-size: 14px; color: #485344; }

.how-it-works__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.step { position: relative; padding-top: 24px; }
.step__number {
  position: absolute;
  top: -16px;
  left: 0;
  font-weight: 700;
  font-size: 48px;
  color: rgba(0,232,70,.12);
  line-height: 1;
}
.step__title { position: relative; font-weight: 600; font-size: 18px; color: #101213; margin-bottom: 4px; }
.step__text { position: relative; font-weight: 400; font-size: 14px; line-height: 20px; color: #485344; }

/* ==========================================================================
   Media placeholder (Vídeo / Fotos)
   ========================================================================== */
.media-section { padding: 64px 20px; max-width: var(--container); margin: 0 auto; }
@media (min-width: 768px) { .media-section { padding: 96px 80px; } }

.media-placeholder {
  aspect-ratio: 16 / 9;
  background: #F3F4F1;
  border: 2px dashed #D2DDD0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
}
@media (min-width: 768px) { .media-placeholder { border-radius: 24px; } }
.media-placeholder__label { font-weight: 700; font-size: 14px; letter-spacing: 0.1em; color: #7A8A76; }
.media-placeholder__hint { font-weight: 400; font-size: 14px; color: #7A8A76; max-width: 480px; }

/* Vídeo real: caixa 16:9 (mede o mesmo espaço do placeholder que substitui),
   mas o vídeo em si é vertical (Reels) — object-fit:contain faz letterbox
   em vez de cortar a pessoa nas laterais como "cover" faria. */
.video-frame {
  aspect-ratio: 16 / 9;
  background: #0A0A0A;
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 768px) { .video-frame { border-radius: 24px; } }
.video-frame__video { width: 100%; height: 100%; object-fit: contain; background: #0A0A0A; }

/* ==========================================================================
   Video-embed: tap-to-unmute overlay (mesmo padrão do lp-monitoramento-
   comercial-residencial) — autoplay mudo, clique alterna som com ícone
   animado no centro, selo "Toque para ativar o som" some após 5s ou ao
   interagir. Reaproveitado no vídeo do Hero e nos do carrossel de totens.
   ========================================================================== */
.video-embed { position: relative; width: 100%; height: 100%; cursor: pointer; }
.video-embed video { width: 100%; height: 100%; }
.video-embed__icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.75);
  width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.video-embed__icon.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.video-embed__icon .icon-unmuted { display: none; }
.video-embed.is-unmuted .icon-muted { display: none; }
.video-embed.is-unmuted .icon-unmuted { display: block; }
.video-embed__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none;
  opacity: 1; transition: opacity .3s ease;
}
.video-embed__hint::before { content: "🔇"; font-size: 13px; }
.video-embed.is-unmuted .video-embed__hint,
.video-embed__hint.is-hidden { opacity: 0; }

/* ==========================================================================
   Totem instalado — vídeo vertical real, mudo, em loop
   Mobile: empilhado e centralizado. Desktop (≥768px): duas colunas, texto
   à esquerda e vídeo à direita — mesmo padrão do Hero (.hero--desktop).
   ========================================================================== */
.totens { padding: 64px 20px; max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .totens { flex-direction: row; align-items: center; padding: 96px 80px; gap: 48px; } }

.totens__left { display: flex; flex-direction: column; gap: 8px; text-align: center; }
@media (min-width: 768px) { .totens__left { flex: 1; text-align: left; gap: 16px; } }
.totens__heading { font-weight: 800; font-size: 26px; color: #0F1E11; }
@media (min-width: 768px) { .totens__heading { font-size: 32px; } }
.totens__subtitle { font-weight: 400; font-size: 14px; color: #3D4F3C; }
@media (min-width: 768px) { .totens__subtitle { font-size: 16px; } }

.totens__right { display: flex; justify-content: center; }
@media (min-width: 768px) { .totens__right { flex: 1; justify-content: flex-end; } }

.totem-frame {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #0A0A0A;
  border: 1px solid #D2DDD0;
}
.totem-video { width: 100%; height: 100%; object-fit: cover; background: #0A0A0A; }

/* ==========================================================================
   FAQ (native <details>/<summary> — accordion sem JS)
   ========================================================================== */
.faq--desktop { max-width: var(--container); margin: 0 auto; padding: 96px 120px; display: flex; flex-direction: column; gap: 48px; }
.faq__heading { font-weight: 800; font-size: 32px; color: #0F1E11; text-align: center; }
.faq__list { display: flex; flex-direction: column; gap: 16px; }

.faq-item { background: #F9FAF8; border: 1px solid #D2DDD0; border-radius: 12px; padding: 24px; }
.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
  color: #0F1E11;
  list-style: none;
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__chevron { width: 12px; height: 12px; flex-shrink: 0; color: #0F1E11; transition: transform .2s var(--ease); }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
.faq-item__answer { margin-top: 12px; font-weight: 400; font-size: 14px; line-height: 22px; color: #3D4F3C; }

/* ---------- FAQ — mobile ---------- */
.faq--mobile { background: var(--bg); padding: 64px 20px; display: flex; flex-direction: column; gap: 32px; }
.faq__heading--mobile { font-weight: 700; font-size: 26px; color: var(--heading-on-dark); }
.faq__list--mobile { gap: 12px; }
.faq-item--mobile { background: #121415; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 0; }
.faq-item__summary--mobile { padding: 16px; font-weight: 600; font-size: 14px; color: var(--heading-on-dark); }
.faq-item--mobile .faq-item__chevron { color: var(--heading-on-dark); }
.faq-item__answer--mobile { padding: 0 16px 16px; color: var(--body-on-dark); margin-top: 0; }

/* ==========================================================================
   Final Action — formulário de diagnóstico
   ========================================================================== */
.final-action {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 20px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
@media (min-width: 768px) {
  .final-action { flex-direction: row; align-items: center; gap: 64px; padding: 96px 80px; }
}

.final-action__intro { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.final-action__heading { font-weight: 800; font-size: 26px; line-height: 1.25; color: var(--heading-on-dark); }
@media (min-width: 768px) { .final-action__heading { font-size: 32px; } }
.final-action__body { font-size: 16px; line-height: 1.6; color: var(--body-on-dark); }

.final-action__contacts { display: flex; flex-direction: column; gap: 20px; padding-top: 16px; }
.final-action__contact { display: flex; align-items: center; gap: 16px; }
.final-action__contact-icon {
  display: inline-flex;
  padding: 12px;
  border-radius: 9999px;
  background: rgba(132,255,132,.2);
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}
.final-action__contact small { display: block; font-size: 12px; font-weight: 400; color: var(--body-on-dark); }
.final-action__contact strong { display: block; font-size: 16px; font-weight: 700; color: var(--heading-on-dark); }

.final-action__form {
  flex: 1;
  background: rgba(16,18,19,.7);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) { .final-action__form { border-radius: 40px; padding: 40px; gap: 24px; } }

.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 14px; font-weight: 500; color: var(--body-on-dark); }
.form-field--honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-field input, .select-wrap select {
  background: #182217;
  border: 1px solid #3C4B39;
  border-radius: 12px;
  padding: 16px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--heading-on-dark);
  width: 100%;
}
.form-field input::placeholder { color: rgba(255,255,255,.3); }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap__chevron {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--body-on-dark);
  pointer-events: none;
}

.final-action__submit { width: 100%; box-shadow: 0 8px 8px rgba(132,255,132,.2); margin-top: 8px; }
.final-action__success { color: var(--accent); font-size: 14px; text-align: center; margin-top: 8px; }
.final-action__error { color: #FF8484; font-size: 14px; text-align: center; margin-top: 8px; }

/* ==========================================================================
   WhatsApp FAB
   ========================================================================== */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: var(--whatsapp);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .2s var(--ease);
}
.whatsapp-fab:hover { transform: scale(1.06); }
@media (min-width: 768px) {
  .whatsapp-fab { right: 32px; bottom: 32px; width: 64px; height: 64px; border-radius: 32px; }
}

/* ==========================================================================
   Footer — desktop
   ========================================================================== */
.footer--desktop {
  border-top: 1px solid #3C4B39;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 80px 48px;
}
.footer__top { display: flex; gap: 48px; padding-bottom: 48px; }
.footer__brand { flex: 0 0 320px; display: flex; flex-direction: column; gap: 20px; }
.footer__tagline { font-size: 14px; line-height: 22px; color: var(--body-on-dark); max-width: 320px; }
.footer__col { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.footer__col h3 { font-weight: 700; font-size: 16px; color: var(--heading-on-dark); }
.footer__col a { font-size: 14px; color: var(--body-on-dark); }
.footer__col a:hover { color: var(--accent); }
.footer__address { font-size: 14px; line-height: 20px; color: var(--body-on-dark); }
.footer__phone { font-size: 14px; color: var(--body-on-dark); }
.footer__phone:hover { color: var(--accent); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; }
.footer__bottom p { font-size: 13px; color: var(--body-on-dark); }

/* ---------- Footer — mobile ---------- */
.footer--mobile {
  background: #fff;
  border-top: 1px solid rgba(60,75,57,.2);
  padding: 64px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.footer__brand--mobile { display: flex; flex-direction: column; gap: 16px; }
.footer__tagline--mobile { color: #485344; max-width: 320px; }
.footer__socials { display: flex; gap: 12px; }
.footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(10,10,10,.05);
  color: #101213;
  font-size: 16px;
}

.footer__cta-card { background: #121415; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.footer__cta-card h3 { font-weight: 700; font-size: 18px; color: var(--heading-on-dark); }
.footer__cta-card p { font-size: 14px; color: var(--body-on-dark); margin-bottom: 8px; }

.footer__bottom--mobile { border-top: 1px solid rgba(60,75,57,.2); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.footer__bottom--mobile p { font-size: 12px; color: #485344; }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__legal-links a { font-size: 12px; color: #485344; }

/* ==========================================================================
   LGPD
   ========================================================================== */

.lgpd--desktop { max-width: var(--container); margin: 0 auto; padding: 96px 80px; }
.lgpd--desktop .lgpd__card {
  background: rgba(16,18,19,.7);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 40px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lgpd__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  border-radius: 9999px;
  background: rgba(132,255,132,.2);
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}
.lgpd__heading { font-weight: 800; font-size: 32px; color: var(--heading-on-dark); max-width: 720px; }
.lgpd__body { font-weight: 400; font-size: 16px; line-height: 26px; color: var(--body-on-dark); max-width: 720px; }

.lgpd__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.lgpd__checklist li { display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--heading-on-dark); }
.lgpd__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: rgba(132,255,132,.2);
  color: var(--accent);
  flex-shrink: 0;
}
.lgpd__check .icon { width: 12px; height: 12px; }

/* ---------- LGPD — mobile ---------- */
.lgpd--mobile { padding: 64px 20px; }
.lgpd--mobile .lgpd__card--mobile {
  background: #121415;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lgpd__badge--mobile {
  background: rgba(0,232,70,.1);
  color: var(--accent);
  font-size: 12px;
  padding: 6px 16px;
}
.lgpd__badge--mobile .icon { width: 14px; height: 16px; }
.lgpd__heading--mobile { font-weight: 700; font-size: 22px; line-height: 28px; }
.lgpd__body--mobile { font-size: 14px; line-height: 22px; }

.lgpd__features { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(60,75,57,.3); }
.lgpd__feature-title { font-weight: 600; font-size: 15px; color: var(--accent); margin-bottom: 2px; }
.lgpd__feature-text { font-weight: 400; font-size: 13px; color: var(--body-on-dark); }

/* ==========================================================================
   Contingency
   ========================================================================== */
.contingency--desktop {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px 80px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.contingency__header { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.contingency__heading { font-weight: 800; font-size: 32px; color: #0F1E11; }
.contingency__subtitle { font-weight: 400; font-size: 16px; color: #3D4F3C; }
.contingency__cards { display: flex; gap: 32px; }
.contingency-card {
  flex: 1;
  background: #F9FAF8;
  border: 1px solid #D2DDD0;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contingency-card__icon { width: 28px; height: 28px; color: var(--on-accent); }
.contingency-card__title { font-weight: 700; font-size: 18px; color: #0F1E11; }
.contingency-card__body { font-weight: 400; font-size: 14px; line-height: 22px; color: #3D4F3C; }

/* ---------- Contingency — mobile ---------- */
.contingency--mobile { background: #fff; padding: 64px 20px; display: flex; flex-direction: column; gap: 32px; }
.contingency__heading--mobile { font-weight: 700; font-size: 26px; color: #101213; }
.contingency__subtitle--mobile { font-size: 14px; color: #485344; }
.contingency__cards--mobile { flex-direction: column; gap: 16px; }
.contingency-card--mobile {
  background: #F5F8F4;
  border: 1px solid rgba(10,10,10,.12);
  border-left-width: 4px;
  border-radius: 16px;
}
.contingency-card--mobile .contingency-card__icon { width: 24px; height: 24px; }
.contingency-card__title--mobile { font-weight: 600; }
.contingency-card__body--mobile { color: #485344; }

/* ==========================================================================
   About — desktop only (não existe no frame mobile 73:343)
   ========================================================================== */
.about {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px 80px;
  display: flex;
  align-items: center;
  gap: 64px;
}
.about__text { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.about__heading { font-weight: 800; font-size: 32px; color: var(--heading-on-dark); }
.about__body { font-weight: 400; font-size: 16px; line-height: 28px; color: var(--body-on-dark); }
.about__image { flex: 1; width: 100%; height: 441px; object-fit: cover; border-radius: 24px; }