/* ==========================================================================
   D&R Transporte de água potável — style.css (v2)
   Fonte dos valores: "D&R Água — Design System" v1.0.0 (tokens → --dr-*)
   Tipografia: Poppins em todo o site (decisão do cliente, substitui Yantramanav).
   Estratégia: mobile first. Faixas: mobile < 768px · tablet 768–1023px · desktop ≥ 1024px.
   Navegação horizontal a partir de 1180px.
   ========================================================================== */

/* -------------------------------------------------------------------------- 0. Fonte (Poppins hospedada localmente) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-latin-700-normal.woff2') format('woff2');
}

/* -------------------------------------------------------------------------- 1. Tokens */
:root {
  /* Cores do design system */
  --dr-primary: #EE0D09;
  --dr-primary-action: #D90D09;
  --dr-primary-hover: #CC100C;
  --dr-primary-active: #AC0B08;
  --dr-primary-soft: #FFF0EF;
  --dr-secondary: #001659;
  --dr-text: #001659;
  --dr-text-muted: #5D6577;
  --dr-text-inverse: #FFFFFF;
  --dr-text-inverse-muted: #B2B9C5;
  --dr-surface: #FFFFFF;
  --dr-surface-alt: #F9F9F9;
  --dr-surface-dark: #081336;
  --dr-surface-brand: #08194A;
  --dr-surface-disabled: #EEF0F4;
  --dr-border: #D8DCE5;
  --dr-border-strong: #7A8294;
  --dr-success: #167347;
  --dr-success-soft: #EAF7EF;
  --dr-error: #B42318;
  --dr-focus: #005FCC;
  --dr-whatsapp: #166534;
  --dr-whatsapp-hover: #14532D;
  --dr-whatsapp-active: #104425;

  /* Tipografia: Poppins para títulos e texto */
  --dr-font-heading: 'Poppins', Arial, sans-serif;
  --dr-font-body: 'Poppins', Arial, sans-serif;
  --dr-fs-h1: clamp(2.25rem, 1.55rem + 2.9vw, 3.875rem);
  --dr-fs-h2: clamp(1.75rem, 1.4rem + 1.5vw, 2.625rem);
  --dr-fs-h3: clamp(1.125rem, 1.07rem + 0.25vw, 1.3125rem);
  --dr-fs-h4: 1rem;
  --dr-fs-h6: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --dr-fs-body: 1rem;
  --dr-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --dr-fs-small: 0.875rem;
  --dr-fs-eyebrow: 0.8125rem;

  /* Espaçamento */
  --dr-section-pad: 48px;
  --dr-head-gap: 28px;
  --dr-card-pad: 24px;
  --dr-gutter: 16px;
  --dr-row-gap: 24px;

  /* Raios: linguagem retangular da referência */
  --dr-radius-button: 2px;
  --dr-radius-card: 4px;
  --dr-radius-input: 4px;
  --dr-radius-photo: 2px;
  --dr-radius-badge: 2px;
  --dr-radius-icon: 4px;

  /* Sombras */
  --dr-shadow-small: 0 2px 8px rgba(8, 19, 54, 0.06);
  --dr-shadow-card: 0 8px 24px rgba(8, 19, 54, 0.08);
  --dr-shadow-card-hover: 0 12px 32px rgba(8, 19, 54, 0.12);
  --dr-shadow-dropdown: 0 16px 40px rgba(8, 19, 54, 0.16);
  --dr-shadow-sticky: 0 4px 16px rgba(8, 19, 54, 0.08);
  --dr-shadow-floating: 0 8px 32px rgba(8, 19, 54, 0.16);

  /* Bordas */
  --dr-border-subtle: 1px solid var(--dr-border);
  --dr-border-control: 1px solid var(--dr-border-strong);
  --dr-border-emphasis: 3px solid var(--dr-primary);

  /* Movimento */
  --dr-fast: 120ms;
  --dr-base: 180ms;
  --dr-slow: 240ms;
  --dr-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Camadas */
  --dr-z-overlap: 10;
  --dr-z-sticky: 100;
  --dr-z-dropdown: 200;
  --dr-z-backdrop: 300;
  --dr-z-mobile-menu: 400;
  --dr-z-skip: 600;

  /* Layout */
  --dr-container: 1200px;
  --dr-container-pad: 16px;
  --dr-header-h: 72px;
}

@media (min-width: 768px) {
  :root {
    --dr-section-pad: 56px;
    --dr-head-gap: 32px;
    --dr-gutter: 24px;
    --dr-container-pad: 24px;
    --dr-header-h: 80px;
  }
}

@media (min-width: 1024px) {
  :root {
    --dr-section-pad: 80px;
    --dr-head-gap: 40px;
    --dr-card-pad: 32px;
    --dr-gutter: 32px;
    --dr-row-gap: 32px;
    --dr-container-pad: 32px;
    --dr-header-h: 88px;
  }
}

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

html {
  font-size: 100%;
  scroll-padding-top: 112px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--dr-font-body);
  font-size: var(--dr-fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--dr-text);
  background: var(--dr-surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .site-header {
  z-index: var(--dr-z-mobile-menu);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--dr-font-heading);
  color: inherit;
  text-wrap: balance;
}

h1 { font-size: var(--dr-fs-h1); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; }
h2 { font-size: var(--dr-fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
h3 { font-size: var(--dr-fs-h3); font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
h4 { font-size: var(--dr-fs-h4); font-weight: 600; line-height: 1.4; }

p { margin: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  color: transparent;   /* esconde o alt de imagens ainda não geradas */
  /* Placeholder até as fotos reais: azul-marinho com linhas diagonais finas (imagery.treatment.decorativePattern) */
  background-color: #0B1D57;
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, #13286B 0%, #081336 100%);
}

strong { font-weight: 600; color: inherit; }

a {
  color: var(--dr-primary-action);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: color var(--dr-base) var(--dr-ease), text-decoration-thickness var(--dr-base) var(--dr-ease);
}

a:hover {
  color: var(--dr-primary-hover);
  text-decoration-thickness: 2px;
}

address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--dr-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: var(--dr-z-skip);
  padding: 12px 16px;
  background: var(--dr-surface);
  color: var(--dr-secondary);
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

.nowrap { white-space: nowrap; }

/* Ícones Lucide */
.icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--32 { width: 32px; height: 32px; }

/* -------------------------------------------------------------------------- 3. Layout e títulos */
.container {
  width: 100%;
  max-width: var(--dr-container);
  margin-inline: auto;
  padding-inline: var(--dr-container-pad);
}

.container--wide { max-width: 1440px; }

.section { padding-block: var(--dr-section-pad); }
.section--alt { background: var(--dr-surface-alt); }
.section--brand { background: var(--dr-surface-brand); color: var(--dr-text-inverse); }

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dr-row-gap) var(--dr-gutter);
  align-items: stretch;
}

.grid > * { min-width: 0; }

@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--3 > :first-child:nth-last-child(3) { grid-column: auto; }
}

/* Título com o traço vermelho ao lado, como na referência ("Our Featured Services ___") */
.title-line::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 2px;
  margin-left: 14px;
  vertical-align: 0.3em;
  background: var(--dr-primary);
}

.title-line--inverse::after { background: var(--dr-primary); }

/* Cabeçalho de seção: título à esquerda, resposta direta à direita (desktop) */
.head {
  display: grid;
  gap: 16px;
  margin-bottom: var(--dr-head-gap);
}

.head h2 { max-width: 22ch; }

.head__lead {
  max-width: 56ch;
  font-size: var(--dr-fs-lead);
  line-height: 1.6;
  color: var(--dr-text-muted);
}

.section--brand .head__lead { color: var(--dr-text-inverse-muted); }

@media (min-width: 1024px) {
  .head--split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 48px;
  }
  .head--split .head__lead {
    padding-bottom: 6px;
    font-size: 1.0625rem;
  }
}

.head__more {
  margin-top: var(--dr-head-gap);
}

.head__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

.head__more a:hover { gap: 14px; }
.head__more--inverse a { color: var(--dr-text-inverse); }

/* -------------------------------------------------------------------------- 4. Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--dr-radius-button);
  font-family: var(--dr-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color var(--dr-base) var(--dr-ease), color var(--dr-base) var(--dr-ease),
              border-color var(--dr-base) var(--dr-ease), box-shadow var(--dr-base) var(--dr-ease);
}

.btn:hover { text-decoration: none; }
.btn--large { min-height: 56px; padding: 16px 28px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--dr-primary-action); color: var(--dr-text-inverse); }
.btn--primary:hover { background: var(--dr-primary-hover); color: var(--dr-text-inverse); }
.btn--primary:active { background: var(--dr-primary-active); }

.btn--secondary { background: transparent; color: var(--dr-secondary); border-color: var(--dr-secondary); }
.btn--secondary:hover { background: var(--dr-secondary); color: var(--dr-text-inverse); }
.btn--secondary:active { background: var(--dr-surface-dark); color: var(--dr-text-inverse); }

.btn--whatsapp { background: var(--dr-whatsapp); color: var(--dr-text-inverse); }
.btn--whatsapp:hover { background: var(--dr-whatsapp-hover); color: var(--dr-text-inverse); }
.btn--whatsapp:active { background: var(--dr-whatsapp-active); }

.btn--line-inverse { background: transparent; color: var(--dr-text-inverse); border-color: rgba(255, 255, 255, 0.5); }
.btn--line-inverse:hover { background: var(--dr-surface); color: var(--dr-secondary); border-color: var(--dr-surface); }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--dr-surface-disabled);
  color: var(--dr-text-muted);
  border-color: var(--dr-border);
  cursor: not-allowed;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--dr-radius-badge);
  background: var(--dr-primary-soft);
  color: var(--dr-primary-action);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.badge--overlay {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--dr-primary-action);
  color: var(--dr-text-inverse);
}

/* -------------------------------------------------------------------------- 5. Topbar */
.topbar {
  background: var(--dr-surface-dark);
  color: var(--dr-text-inverse);
  font-size: 0.875rem;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 40px;
}

.topbar__msg {
  display: flex;
  align-items: stretch;
  gap: 24px;
  min-height: 40px;
}

.topbar__msg > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar__highlight {
  padding-inline: 16px;
  margin-left: calc(-1 * var(--dr-container-pad));
  background: var(--dr-primary-action);
  font-weight: 700;
}

.topbar__msg > .topbar__area,
.topbar__contacts {
  display: none;
}

.topbar__highlight,
.topbar__contacts a {
  white-space: nowrap;
}

.topbar__contacts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--dr-text-inverse);
  font-weight: 600;
  text-decoration: none;
}

.topbar__contacts a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .topbar__contacts { display: flex; gap: 24px; }
}

@media (min-width: 1024px) {
  .topbar__msg > .topbar__area { display: inline-flex; }
}

/* -------------------------------------------------------------------------- 6. Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--dr-z-sticky);
  background: var(--dr-surface);
  border-bottom: var(--dr-border-subtle);
}

.site-header.is-stuck {
  box-shadow: var(--dr-shadow-sticky);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--dr-header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
  color: var(--dr-secondary);
  text-decoration: none;
}

.brand:hover { color: var(--dr-secondary); }

/* Logo oficial (circular, /assets/marca/): altura fixa, largura pela proporção */
.brand__logo {
  flex-shrink: 0;
  width: auto;
  height: 52px;
  max-width: none;
  background: none;
}

/* Nome em texto ao lado da logo: no tamanho do header o texto de dentro do círculo não se lê */
.brand__name {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.brand__name strong { font-size: 1.125rem; font-weight: 700; line-height: 1.1; }

.brand__logo--footer { height: 88px; }

@media (min-width: 768px) {
  .brand__logo { height: 60px; }
  .brand__name { font-size: 0.8125rem; }
  .brand__name strong { font-size: 1.25rem; }
  .brand__logo--footer { height: 104px; }
}

.header-phone-mobile,
.nav-toggle,
.nav-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--dr-radius-button);
  background: transparent;
  color: var(--dr-secondary);
  cursor: pointer;
}

.header-phone-mobile:hover,
.nav-toggle:hover,
.nav-close:hover {
  background: var(--dr-primary-soft);
  color: var(--dr-primary-action);
}

/* Ligar em destaque no header do celular */
.header-phone-mobile {
  border-radius: 50%;
  background: var(--dr-primary-action);
  color: #fff;
  box-shadow: 0 6px 16px rgba(217, 13, 9, 0.32);
}
.header-phone-mobile:hover { background: var(--dr-primary-hover); color: #fff; }

/* ---- Navegação: base (mobile/tablet = painel lateral; sem JS = lista em fluxo) */
.nav__link,
.nav__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--dr-secondary);
  font-family: var(--dr-font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nav__link:hover,
.nav__trigger:hover {
  color: var(--dr-primary-action);
  text-decoration: none;
}

.nav__trigger .icon {
  transition: transform var(--dr-base) var(--dr-ease);
}

.nav__item.is-open > .nav__trigger .icon,
.nav__item.is-open .nav__trigger--icon .icon {
  transform: rotate(180deg);
}

.nav__split {
  display: flex;
  align-items: center;
}

.nav__trigger--icon {
  justify-content: center;
  width: 48px;
  flex-shrink: 0;
}

.nav__item {
  border-bottom: var(--dr-border-subtle);
}

.mega__inner,
.dropdown {
  padding-bottom: 16px;
}

.mega__cols {
  display: grid;
  gap: 16px;
}

.mega__col-toggle {
  display: none;
}

.mega__title {
  margin-bottom: 4px;
  font-family: var(--dr-font-heading);
  font-size: 1rem;
  font-weight: 700;
}

.mega__title a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--dr-secondary);
  text-decoration: none;
}

.mega__title a:hover {
  color: var(--dr-primary-action);
  text-decoration: underline;
}

.mega__link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-height: 44px;
  padding: 8px;
  border-radius: var(--dr-radius-card);
  color: var(--dr-secondary);
  text-decoration: none;
  transition: background-color var(--dr-base) var(--dr-ease);
}

.mega__link .icon {
  grid-row: span 2;
  margin-top: 2px;
  color: var(--dr-primary-action);
}

.mega__link:hover {
  background: var(--dr-primary-soft);
  color: var(--dr-secondary);
  text-decoration: none;
}

.mega__name {
  font-weight: 700;
  line-height: 1.3;
}

.mega__desc {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--dr-text-muted);
}

.mega__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 8px;
  font-size: 0.9375rem;
}

.mega__featured,
.mega__strip {
  display: none;
}

.dropdown__note {
  padding: 8px;
  font-size: 0.875rem;
  color: var(--dr-text-muted);
}

.nav__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--dr-secondary);
  font-weight: 700;
  text-decoration: none;
}

.nav__mobile-head {
  display: none;
}

/* Sem JS: menu em fluxo, abaixo da marca, com todos os links visíveis */
.no-js .header-phone-mobile,
.no-js .nav-toggle,
.no-js .nav__trigger--icon,
.no-js .nav__trigger .icon {
  display: none;
}

.no-js .site-header__inner {
  flex-wrap: wrap;
}

.no-js .nav {
  width: 100%;
  padding-bottom: 16px;
}

/* Com JS, abaixo de 1180px: painel lateral (mobileMenu) */
@media (max-width: 1179px) {
  .js .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--dr-z-mobile-menu);
    display: flex;
    flex-direction: column;
    width: min(100vw, 400px);
    height: 100dvh;
    padding: 0 24px calc(96px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--dr-surface);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--dr-slow) var(--dr-ease), visibility 0s linear var(--dr-slow);
  }

  .js .nav.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform var(--dr-slow) var(--dr-ease), visibility 0s;
  }

  .js .nav__mobile-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    background: var(--dr-surface);
  }

  /* Acordeão: painéis fechados até o botão abrir */
  .js .has-panel > .mega,
  .js .has-panel > .dropdown {
    display: none;
  }

  .js .has-panel.is-open > .mega,
  .js .has-panel.is-open > .dropdown {
    display: block;
  }

  /* Serviços: no mobile cada categoria vira um acordeão próprio */
  .js .nav__item[data-panel="mega"] > .nav__trigger {
    display: none;
  }

  .js .has-panel[data-panel="mega"] > .mega {
    display: block;
  }

  .js .mega__inner {
    padding-bottom: 0;
  }

  .js .mega__cols {
    gap: 0;
  }

  .js .mega__col {
    border-bottom: var(--dr-border-subtle);
  }

  .js .mega__col:last-child {
    border-bottom: 0;
  }

  .js .mega__col-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: var(--dr-secondary);
    font-family: var(--dr-font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .js .mega__col-toggle .icon {
    transition: transform var(--dr-base) var(--dr-ease);
  }

  .js .mega__col.is-open .mega__col-toggle .icon {
    transform: rotate(180deg);
  }

  .js .mega__title {
    display: none;
  }

  .js .mega__col-body {
    display: none;
    padding-bottom: 12px;
  }

  .js .mega__col.is-open .mega__col-body {
    display: block;
  }

  /* WhatsApp fixo no rodapé do menu */
  .js .nav__actions {
    position: fixed;
    right: 0;
    bottom: 0;
    width: min(100vw, 400px);
    flex-direction: row-reverse;
    gap: 8px;
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
    border-top: var(--dr-border-subtle);
    background: var(--dr-surface);
  }

  .js .nav__actions .btn {
    flex: 1;
    min-height: 48px;
  }

  .js .nav__phone {
    justify-content: center;
    width: 48px;
    border: 1px solid var(--dr-secondary);
    border-radius: var(--dr-radius-button);
  }

  .js .nav__phone-text {
    display: none;            /* só o ícone; o nome acessível vem do aria-label */
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--dr-z-backdrop);
    background: rgba(8, 19, 54, 0.64);
  }
}

/* Desktop: navegação horizontal + mega menu */
@media (min-width: 1180px) {
  .header-phone-mobile,
  .nav-toggle,
  .nav-close,
  .nav-backdrop,
  .nav__mobile-only,
  .mega__mobile-only {
    display: none !important;
  }

  .site-header__inner { gap: 24px; }

  .nav,
  .no-js .nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 0;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .nav__item {
    position: static;
    border: 0;
  }

  .nav__link,
  .nav__trigger {
    position: relative;
    width: auto;
    min-height: var(--dr-header-h);
    padding: 0;
    font-size: 1rem;
  }

  .no-js .nav__trigger .icon { display: block; }

  /* Traço inferior em hover, foco e painel aberto */
  .nav__link::after,
  .nav__trigger:not(.nav__trigger--icon)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 2px;
    background: var(--dr-primary);
    transform: scaleX(0);
    transition: transform var(--dr-base) var(--dr-ease);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after,
  .nav__trigger:hover::after,
  .nav__item.is-open > .nav__trigger::after {
    transform: scaleX(1);
  }

  .nav__trigger--icon {
    width: 32px;
    margin-left: 2px;
  }

  /* Painéis: ficam no DOM (rastreáveis), ocultos visualmente */
  .mega,
  .dropdown,
  .js .has-panel > .mega,
  .js .has-panel > .dropdown {
    display: block;
    position: absolute;
    top: 100%;
    z-index: var(--dr-z-dropdown);
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    background: var(--dr-surface);
    border-top: var(--dr-border-emphasis);
    box-shadow: var(--dr-shadow-dropdown);
    transition: opacity var(--dr-base) var(--dr-ease), transform var(--dr-base) var(--dr-ease), visibility 0s linear var(--dr-base);
  }

  /* O mega menu ancora no header (sticky) e usa a largura do header largo */
  .mega {
    --mega-w: min(calc(100vw - 2 * var(--dr-container-pad)), calc(1440px - 2 * var(--dr-container-pad)));
    left: 50%;
    width: var(--mega-w);
    margin-left: calc(var(--mega-w) / -2);
  }

  .nav__link,
  .nav__trigger,
  .nav__phone,
  .nav__actions .btn {
    white-space: nowrap;
  }

  .nav__phone {
    justify-content: center;
    min-width: 48px;
  }

  .nav__phone-text {
    display: none;
  }
  .nav__item[data-panel="dropdown"] { position: relative; }

  .dropdown {
    left: -16px;
    width: 340px;
    padding: 16px;
  }

  /* Abre por hover (com pequeno atraso de intenção), foco do teclado ou clique */
  @media (hover: hover) {
    .has-panel:hover > .mega,
    .has-panel:hover > .dropdown {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition-delay: 120ms, 120ms, 0s;
    }
  }

  .has-panel:focus-within > .mega,
  .has-panel:focus-within > .dropdown,
  .has-panel.is-open > .mega,
  .has-panel.is-open > .dropdown {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  /* Esc força o fechamento mesmo com o foco ainda dentro */
  .has-panel.is-closed > .mega,
  .has-panel.is-closed > .dropdown {
    visibility: hidden;
    opacity: 0;
  }

  .mega__col-body { display: block; }

  .mega__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-areas:
      "cols featured"
      "strip strip";
    gap: 32px;
    padding: 32px;
  }

  .mega__cols {
    grid-area: cols;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .mega__title {
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: var(--dr-border-subtle);
  }

  .mega__featured {
    grid-area: featured;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--dr-surface-alt);
    border-radius: var(--dr-radius-card);
  }

  .mega__featured-media {
    position: relative;
  }

  .mega__featured-media img {
    width: 100%;
    aspect-ratio: 360 / 200;
    object-fit: cover;
    border-radius: var(--dr-radius-photo);
  }

  .mega__featured-title {
    font-family: var(--dr-font-heading);
    font-size: var(--dr-fs-h6);
    font-weight: 700;
  }

  .mega__featured-text {
    margin-top: 0;
    font-size: 0.9375rem;
    color: var(--dr-text-muted);
  }

  .mega__featured .btn {
    margin-top: auto;
  }

  .mega__strip {
    grid-area: strip;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    padding-top: 16px;
    border-top: var(--dr-border-subtle);
  }

  .mega__strip a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--dr-secondary);
    font-size: 0.9375rem;
    text-decoration: none;
  }

  .mega__strip a .icon { color: var(--dr-primary-action); }
  .mega__strip a:hover { color: var(--dr-primary-action); text-decoration: underline; }

  .nav__actions {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 0;
  }
}

@media (min-width: 1400px) {
  .nav__phone-text { display: inline; }
}

/* -------------------------------------------------------------------------- 7. Hero */
.hero {
  position: relative;
  background: var(--dr-surface-dark);
  color: var(--dr-text-inverse);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 48px 40px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 620px;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--dr-text-inverse-muted);
}

.hero__kicker .icon { color: var(--dr-primary); }

.hero h1 { max-width: 15ch; }

.hero__lead {
  max-width: 50ch;
  font-size: var(--dr-fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.hero__lead strong { color: var(--dr-text-inverse); }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.hero__proofs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.hero__proofs li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--dr-text-inverse-muted);
}

.hero__proofs .icon { color: var(--dr-primary); }
.hero__proofs strong { display: block; color: var(--dr-text-inverse); font-weight: 600; }

.hero__photo {
  position: relative;
  margin: 0;
}

.hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.hero__tag {
  position: absolute;
  left: var(--dr-container-pad);
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 2 * var(--dr-container-pad));
  padding: 14px 18px;
  background: var(--dr-surface);
  border-left: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  box-shadow: var(--dr-shadow-floating);
  color: var(--dr-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hero__tag .icon { color: var(--dr-primary-action); }
.hero__tag span { display: flex; flex-direction: column; }
.hero__tag strong { color: var(--dr-text); font-size: 0.9375rem; }

@media (max-width: 767px) {
  .hero__actions .btn { width: 100%; }
}

@media (min-width: 768px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__proofs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

@media (min-width: 1024px) {
  .hero {
    min-height: 640px;
    display: flex;
    align-items: center;
  }

  .hero__inner { padding-block: 104px 96px; }

  .hero__content { max-width: 52%; }

  /* Foto ocupa a metade direita até a borda da tela */
  .hero__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
  }

  .hero__photo img {
    height: 100%;
    aspect-ratio: auto;
  }

  .hero__tag {
    left: -40px;
    bottom: 56px;
    max-width: 320px;
  }
}

/* -------------------------------------------------------------------------- 8. Faixa de confiança */
.stats {
  border-bottom: var(--dr-border-subtle);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stats__grid li {
  min-width: 0;
  padding: 28px 16px 28px 0;
  border-bottom: var(--dr-border-subtle);
}

.stats__grid li:nth-child(2n) { padding-left: 16px; border-left: var(--dr-border-subtle); }
.stats__grid li:nth-last-child(-n + 2) { border-bottom: 0; }

.stats__value {
  font-family: var(--dr-font-heading);
  font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--dr-secondary);
  overflow-wrap: anywhere;
}

.stats__value span {
  margin-left: 4px;
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dr-primary-action);
}

.stats__value--todo { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

.stats__label {
  margin-top: 10px;
  max-width: 24ch;
  font-size: var(--dr-fs-small);
  line-height: 1.5;
  color: var(--dr-text-muted);
}

@media (min-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats__grid li,
  .stats__grid li:nth-child(2n) {
    padding: 40px 32px;
    border-bottom: 0;
    border-left: var(--dr-border-subtle);
  }
  .stats__grid li:first-child { padding-left: 0; border-left: 0; }
}

/* -------------------------------------------------------------------------- 9. Serviços */
.services > li { display: flex; }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-bottom: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  overflow: hidden;
  transition: transform var(--dr-base) var(--dr-ease), box-shadow var(--dr-base) var(--dr-ease);
}

.svc__media { position: relative; }

.svc__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}

.svc__cat {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--dr-surface);
  color: var(--dr-secondary);
  font-size: var(--dr-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.svc__cat .icon { color: var(--dr-primary-action); }

.svc__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
}

.svc h3 { font-size: 1.25rem; }

.svc__body > p {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

.svc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: var(--dr-border-subtle);
  color: var(--dr-secondary);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.svc__link .icon {
  color: var(--dr-primary-action);
  transition: transform var(--dr-base) var(--dr-ease);
}

/* O link do card cobre o card inteiro (sem links aninhados) */
.svc__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.svc:hover .svc__link { color: var(--dr-primary-action); }
.svc:focus-within { box-shadow: var(--dr-shadow-card-hover); }

@media (hover: hover) and (pointer: fine) {
  .svc:hover {
    transform: translateY(-2px);
    box-shadow: var(--dr-shadow-card-hover);
  }
  .svc:hover .svc__link .icon { transform: translateX(4px); }
}

/* Atalhos para os hubs */
.hubs {
  display: grid;
  gap: 16px;
  margin-top: var(--dr-head-gap);
}

.hubs__label {
  font-size: var(--dr-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dr-text-muted);
}

.hubs__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--dr-secondary);
}

.hubs__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 16px 0;
  border-bottom: var(--dr-border-subtle);
  color: var(--dr-secondary);
  font-weight: 600;
  text-decoration: none;
}

.hubs__list a .icon {
  color: var(--dr-primary-action);
  transition: transform var(--dr-base) var(--dr-ease);
}

.hubs__list a:hover { color: var(--dr-primary-action); }
.hubs__list a:hover .icon { transform: translateX(4px); }

@media (min-width: 768px) {
  .hubs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dr-gutter); }
}

@media (min-width: 1024px) {
  .hubs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------- 10. Problema e solução */
.pains {
  padding-block: var(--dr-section-pad);
  background: var(--dr-primary-action);
  color: var(--dr-text-inverse);
}

/* Foto e conteúdo começam e terminam na mesma linha */
.pains__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.pains__media {
  position: relative;
  min-height: 280px;
}

.pains__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--dr-radius-card);
}

.pains__badge {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--dr-surface);
  border-left: 3px solid var(--dr-secondary);
  border-radius: var(--dr-radius-card);
  color: var(--dr-secondary);
  font-size: 0.875rem;
  font-weight: 600;
}

.pains__badge .icon { color: var(--dr-primary-action); }

.pains__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pains__content h2 { max-width: 20ch; }

.title-line--light::after { background: var(--dr-surface); }

.pains__lead {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.92);
}

.pcards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.pcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 24px;
  background: var(--dr-surface);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text);
  box-shadow: 0 10px 24px rgba(120, 6, 4, 0.18);
}

.pcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: var(--dr-radius-icon);
  background: var(--dr-primary-soft);
  color: var(--dr-primary-action);
}

.pcard h3 { font-size: 1.0625rem; }

.pcard > p:not(.pcard__pain) {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--dr-text-muted);
}

.pcard__pain {
  margin-top: 8px;
  padding-top: 12px;
  border-top: var(--dr-border-subtle);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dr-primary-action);
}

.pains__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin-top: 8px;
}

.pains__actions .btn { flex-shrink: 0; white-space: nowrap; }

.pains__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--dr-text-inverse);
  font-size: 0.9375rem;
}

.pains__link:hover { color: var(--dr-text-inverse); }

@media (max-width: 767px) {
  .pains__link { text-align: center; }
}

@media (min-width: 768px) {
  .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pains__actions { flex-direction: row; align-items: center; }
  .pains__link { justify-content: flex-start; }
}

@media (min-width: 1024px) {
  .pains__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
  }
  .pains__media { min-height: 0; }
}

/* -------------------------------------------------------------------------- 11. Como funciona (linha do tempo) */
.timeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  counter-reset: none;
}

.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 8px;
  align-content: start;
}

.timeline__num {
  grid-row: span 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--dr-secondary);
  border-radius: 50%;
  background: var(--dr-surface);
  font-family: var(--dr-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dr-secondary);
}

.timeline__step:first-child .timeline__num {
  border-color: var(--dr-primary-action);
  background: var(--dr-primary-action);
  color: var(--dr-text-inverse);
}

.timeline__step > .icon {
  width: 28px;
  height: 28px;
  color: var(--dr-primary-action);
}

.timeline__step p {
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

/* Linha vertical ligando os passos (mobile) */
.timeline__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 60px;
  bottom: -28px;
  left: 27px;
  width: 2px;
  background: var(--dr-border);
}

@media (min-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--dr-gutter);
  }

  .timeline__step {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 16px;
  }

  .timeline__num { grid-row: auto; margin-bottom: 16px; }

  /* Linha horizontal ligando os passos (desktop) */
  .timeline__step:not(:last-child)::before {
    top: 27px;
    bottom: auto;
    left: 68px;
    right: calc(-1 * var(--dr-gutter) + 12px);
    width: auto;
    height: 2px;
  }
}

/* -------------------------------------------------------------------------- 12. Diferenciais */
.perks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--dr-secondary);
}

.perk {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 8px;
  padding: 28px 0;
  border-bottom: var(--dr-border-subtle);
}

.perk .icon {
  grid-row: span 2;
  color: var(--dr-primary-action);
}

.perk p {
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

@media (min-width: 768px) {
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--dr-gutter); }
}

@media (min-width: 1024px) {
  .perks { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .perk {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
    padding: 36px 0 40px;
  }
  .perk .icon { grid-row: auto; margin-bottom: 8px; }
}

/* -------------------------------------------------------------------------- 13. Guia (Information Gain) */
.guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dr-row-gap) var(--dr-gutter);
  align-items: stretch;              /* colunas com a mesma altura */
}

.guide h3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 1.25rem;
}

.guide__step {
  font-size: var(--dr-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dr-primary-action);
}

/* Passo 1: calculadora em painel escuro */
.calc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* distribui o conteúdo na altura igual à dos tanques */
  gap: 20px;
  min-width: 0;
  padding: var(--dr-card-pad);
  background: var(--dr-surface-dark);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text-inverse);
}

.calc .guide__step { color: #FF8A86; }   /* vermelho clareado para contraste no escuro (≥ 4.5:1) */

.calc__intro,
.calc__note {
  font-size: 0.9375rem;
  color: var(--dr-text-inverse-muted);
}

.calc__note { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.calc__note a { color: var(--dr-text-inverse); }
.calc__note a:hover { color: var(--dr-text-inverse); }

.calc__field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.calc__input {
  display: flex;
  align-items: stretch;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--dr-radius-input);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color var(--dr-base) var(--dr-ease);
}

.calc__input:focus-within { border-color: var(--dr-surface); }

.calc__input input {
  flex: 1;
  min-width: 0;
  min-height: 64px;
  padding: 8px 16px;
  border: 0;
  background: transparent;
  color: var(--dr-text-inverse);
  font-family: var(--dr-font-heading);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  -moz-appearance: textfield;
}

.calc__input input::-webkit-outer-spin-button,
.calc__input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.calc__input input:focus-visible { outline: none; box-shadow: none; }

.calc__input span {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 600;
  color: var(--dr-text-inverse-muted);
}

.calc__out { margin: 0; }

.calc__out > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.calc__out dt { font-size: 0.9375rem; color: var(--dr-text-inverse-muted); }
.calc__out dt small { margin-left: 6px; font-size: 0.75rem; opacity: 0.8; }

.calc__out dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__out .calc__total {
  margin-top: 8px;
  padding: 16px;
  border: 0;
  border-left: var(--dr-border-emphasis);
  background: rgba(255, 255, 255, 0.06);
}

.calc__out .calc__total dt { color: var(--dr-text-inverse); font-weight: 600; }

.calc__out .calc__total dd {
  font-family: var(--dr-font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  white-space: normal;
  text-align: right;
}

/* Passo 2: tanques */
.guide__tanks {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: var(--dr-card-pad);
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
}

.guide__intro,
.guide__foot {
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

.guide__foot { margin-top: auto; padding-top: 16px; border-top: var(--dr-border-subtle); }

.tanks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  flex: 1;
}

.tank { display: flex; }

.tank a {
  overflow-wrap: normal;
  hyphens: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--dr-radius-card);
  color: var(--dr-text);
  text-decoration: none;
  transition: border-color var(--dr-base) var(--dr-ease), background-color var(--dr-base) var(--dr-ease), transform var(--dr-base) var(--dr-ease);
}

.tank__flag {
  position: absolute;
  top: -11px;
  left: 50%;
  z-index: 1;
  padding: 2px 10px;
  border-radius: var(--dr-radius-badge);
  background: var(--dr-primary-action);
  color: var(--dr-text-inverse);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  visibility: hidden;
}

.tank__body {
  position: relative;
  display: block;
  height: 150px;
  margin-bottom: 12px;
  border: 2px solid var(--dr-secondary);
  border-radius: 12px 12px 4px 4px;
  overflow: hidden;
  background:
    linear-gradient(var(--dr-border), var(--dr-border)) left 25% / 12px 1px no-repeat,
    linear-gradient(var(--dr-border), var(--dr-border)) left 50% / 18px 1px no-repeat,
    linear-gradient(var(--dr-border), var(--dr-border)) left 75% / 12px 1px no-repeat,
    var(--dr-surface);
}

.tank__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fill);
  background: linear-gradient(180deg, rgba(0, 22, 89, 0.72) 0%, var(--dr-secondary) 100%);
  border-top: 3px solid rgba(255, 255, 255, 0.5);
  transition: height 900ms var(--dr-ease);
}

/* Com JS, os tanques enchem quando entram na tela */
.js .tanks:not(.is-filled) .tank__water { height: 0; }

.tank:nth-child(2) .tank__water { transition-delay: 120ms; }
.tank:nth-child(3) .tank__water { transition-delay: 240ms; }
.tank:nth-child(4) .tank__water { transition-delay: 360ms; }

.tank__vol {
  font-family: var(--dr-font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.tank__use {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--dr-text-muted);
}

.tank__more {
  padding-top: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dr-primary-action);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.tank a:hover { border-color: var(--dr-border); background: var(--dr-surface-alt); }

/* Tanque indicado pelo cálculo */
.tank.is-active a {
  border-color: var(--dr-primary-action);
  background: var(--dr-primary-soft);
}

.tank.is-active .tank__flag { visibility: visible; }
.tank.is-active .tank__body { border-color: var(--dr-primary-action); }
.tank.is-active .tank__water { border-top-color: var(--dr-primary); }

@media (min-width: 768px) {
  .tanks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

/* Passo 3: checklist */
.guide__check {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  padding: var(--dr-card-pad);
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
}

.checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.checks__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 22px;
  background: var(--dr-surface-alt);
  border-radius: var(--dr-radius-card);
}

.checks__col h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
}

.checks__col h4 .icon { color: var(--dr-primary-action); }

.checks__list {
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
}

.checks__list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.checks__list .icon {
  margin-top: 2px;
  padding: 2px;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: var(--dr-success-soft);
  color: var(--dr-success);
}

.checks__col--note {
  background: var(--dr-primary-soft);
  border-left: var(--dr-border-emphasis);
  font-size: 0.9375rem;
}

@media (min-width: 1024px) {
  .guide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .guide__check { grid-column: 1 / -1; }
  .checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------- 14. Áreas atendidas */
.areas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dr-row-gap) var(--dr-gutter);
  align-items: stretch;              /* diagrama e zonas com a mesma altura */
}

.radius {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: var(--dr-card-pad);
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
}

.radius__map {
  position: relative;
  flex: 1;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--dr-radius-card);
  background: var(--dr-surface-disabled);
}

.radius__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.radius__legend {
  display: grid;
  gap: 14px;
}

.radius__legend li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.875rem;
  color: var(--dr-text-muted);
}

.radius__legend .icon { margin-top: 2px; color: var(--dr-primary-action); }
.radius__legend span { display: flex; flex-direction: column; line-height: 1.45; }
.radius__legend strong { color: var(--dr-text); }

.radius__ask {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: var(--dr-surface-alt);
  border-radius: var(--dr-radius-card);
  font-size: 0.875rem;
  color: var(--dr-text-muted);
}

.radius__ask strong { display: block; color: var(--dr-text); font-size: 0.9375rem; }

.radius__map svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--dr-font-body);
}

.radius text { paint-order: stroke; stroke: #FFFFFF; stroke-width: 5px; stroke-linejoin: round; }
.radius__ring { fill: none; stroke: var(--dr-border); stroke-width: 1.5; }
.radius__ring--outer { fill: rgba(0, 22, 89, 0.04); stroke: var(--dr-secondary); stroke-width: 2; stroke-dasharray: 6 6; }
.radius__axis { stroke: var(--dr-secondary); stroke-width: 1.5; }
.radius__km { font-size: 15px; font-weight: 600; fill: var(--dr-secondary); }
.radius__pin { fill: var(--dr-primary-action); }
.radius__pin-halo { fill: rgba(217, 13, 9, 0.16); }
.radius__base { font-size: 17px; font-weight: 700; fill: var(--dr-secondary); }
.radius__zone { font-size: 15px; font-weight: 600; fill: var(--dr-secondary); }
.radius__out { font-size: 15px; font-weight: 600; fill: var(--dr-primary-action); }



.radius__legend span:last-child { display: flex; flex-direction: column; line-height: 1.4; }

.key { width: 20px; height: 20px; border-radius: 50%; }
.key--base { background: var(--dr-primary-action); box-shadow: inset 0 0 0 5px var(--dr-primary-soft); }
.key--ring { border: 2px dashed var(--dr-secondary); background: rgba(0, 22, 89, 0.04); }
.key--out { position: relative; border: 2px solid var(--dr-primary-action); }
.key--out::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 2px;
  background: var(--dr-primary-action);
  transform: rotate(-45deg);
}



/* Zonas: painel único com 4 linhas; acompanha a altura do diagrama sem deixar vão */
.zones {
  display: flex;
  flex-direction: column;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-top: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
}

.zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 24px;
  flex: 1 1 auto;
  align-content: center;
  padding: 24px;
  border-bottom: var(--dr-border-subtle);
}

.zone:last-child { border-bottom: 0; }

.zone h3 { font-size: 1.0625rem; }
.zone h3 a { color: var(--dr-secondary); text-decoration: none; }
.zone h3 a:hover { color: var(--dr-primary-action); text-decoration: underline; }

.zone__meta {
  font-size: var(--dr-fs-small);
  color: var(--dr-text-muted);
}

.zone__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--dr-primary-action);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.zone__more .icon { transition: transform var(--dr-base) var(--dr-ease); }
.zone__more:hover { text-decoration: underline; }
.zone__more:hover .icon { transform: translateX(4px); }

@media (min-width: 768px) {
  /* Título e link à esquerda, bairros à direita */
  .zone {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas:
      "title chips"
      "meta  chips"
      "more  chips";
    align-items: start;
  }
  .zone h3 { grid-area: title; }
  .zone__meta { grid-area: meta; }
  .zone__more { grid-area: more; align-self: end; }
  .zone .chips { grid-area: chips; margin: 0; }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-badge);
  background: var(--dr-surface-alt);
  color: var(--dr-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dr-base) var(--dr-ease), color var(--dr-base) var(--dr-ease);
}

.chips a:hover {
  border-color: var(--dr-primary-action);
  color: var(--dr-primary-action);
}


@media (min-width: 1024px) {
  .areas { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* -------------------------------------------------------------------------- 14b. CTA de fechamento de seção (padrão único, centralizado) */
.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: var(--dr-head-gap);
  padding-top: 32px;
  border-top: var(--dr-border-subtle);
  text-align: center;
}

.section-cta > p {
  max-width: 56ch;
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

.section-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

.section-cta--inverse { border-top-color: rgba(255, 255, 255, 0.16); }
.section-cta--inverse > p { color: var(--dr-text-inverse-muted); }

@media (min-width: 768px) {
  .section-cta__actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
}

.btn--inverse { background: var(--dr-surface); color: var(--dr-secondary); }
.btn--inverse:hover { background: var(--dr-surface-alt); color: var(--dr-secondary); }
.btn--inverse:active { background: var(--dr-surface-disabled); }

/* -------------------------------------------------------------------------- 15. Avaliações do Google (resumo + avaliações reais) */
.reviews {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dr-gutter);
  align-items: stretch;
}

/* Painel de resumo: mesma altura da grade de avaliações */
.rsum {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* espaço distribuído por igual, sem vão acima do botão */
  gap: 24px;
  padding: var(--dr-card-pad);
  background: var(--dr-surface-dark);
  border-top: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
}

.rsum__label {
  font-size: var(--dr-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dr-text-inverse-muted);
}

.rsum__score {
  display: flex;
  align-items: center;
  gap: 20px;
}

.reviews__score {
  font-family: var(--dr-font-heading);
  font-size: clamp(3.5rem, 3rem + 2vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.reviews__count { margin-top: 6px; font-weight: 600; }

.rsum__themes {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rsum__themes > p {
  margin-bottom: 14px;
  font-size: 0.875rem;
  color: var(--dr-text-inverse-muted);
}

.rsum__themes ul { display: grid; gap: 10px; }

.rsum__themes li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--dr-radius-card);
  font-size: 0.9375rem;
  font-weight: 500;
}

.rsum__themes .icon { color: #FFC53D; }

.quote__stars {
  display: flex;
  gap: 3px;
  color: #FFC53D;
}

.quote__stars .icon { fill: currentColor; }

/* Avaliações: cards brancos 2 × 2 */
.reviews__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dr-gutter);
}

.reviews__list > li { display: flex; }

.review {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: var(--dr-card-pad);
  background: var(--dr-surface);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text);
  overflow: hidden;
}

/* Aspas decorativas grandes no fundo do card */
.review::after {
  content: "\201D";
  position: absolute;
  right: 20px;
  bottom: -36px;
  font-family: var(--dr-font-heading);
  font-size: 9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dr-primary-soft);
  pointer-events: none;
}

.review__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.review__tag {
  padding: 4px 10px;
  border-radius: var(--dr-radius-badge);
  background: var(--dr-primary-soft);
  color: var(--dr-primary-action);
  font-size: 0.75rem;
  font-weight: 600;
}

.review blockquote {
  position: relative;
  z-index: 1;
  flex: 1;
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--dr-secondary);
}

.review figcaption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: var(--dr-border-subtle);
}

.review__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--dr-secondary);
  color: var(--dr-text-inverse);
}

.review figcaption > span:last-child {
  display: flex;
  flex-direction: column;
  font-size: var(--dr-fs-small);
  color: var(--dr-text-muted);
}

.review figcaption strong { color: var(--dr-text); font-size: 0.9375rem; }

@media (min-width: 768px) {
  .reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .reviews { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

/* -------------------------------------------------------------------------- 16. FAQ */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 64px;
}

.faq-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-layout__aside h2 { max-width: 18ch; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem); }

.ask {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 24px;
  background: var(--dr-surface-alt);
  border-left: var(--dr-border-emphasis);
  font-size: 0.9375rem;
}

.ask p { color: var(--dr-text-muted); }
.ask strong { display: block; color: var(--dr-text); }

.faq { border-top: 2px solid var(--dr-secondary); }

.faq__item { border-bottom: var(--dr-border-subtle); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  transition: color var(--dr-fast) var(--dr-ease);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary h3 {
  font-size: var(--dr-fs-h6);
  font-weight: 600;
  line-height: 1.45;
}

.faq__item summary .icon {
  padding: 4px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--dr-border);
  border-radius: 50%;
  color: var(--dr-primary-action);
  transition: transform var(--dr-fast) var(--dr-ease), background-color var(--dr-fast) var(--dr-ease);
}

.faq__item[open] summary .icon {
  transform: rotate(45deg);
  background: var(--dr-primary-action);
  border-color: var(--dr-primary-action);
  color: var(--dr-text-inverse);
}

.faq__item summary:hover { color: var(--dr-primary-action); }

.faq__answer {
  max-width: 64ch;
  padding: 0 52px 24px 0;
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

@media (min-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .faq-layout__aside { position: sticky; top: calc(var(--dr-header-h) + 32px); align-self: start; }
}

/* -------------------------------------------------------------------------- 17. Blog */
.posts > li { display: flex; }

.post {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.post img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--dr-radius-photo);
}

.post__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}

.post__meta {
  font-size: var(--dr-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dr-primary-action);
}

.post h3 { font-size: 1.1875rem; }

.post h3 a {
  color: var(--dr-secondary);
  text-decoration: none;
}

.post h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.post:hover h3 a,
.post h3 a:focus-visible { text-decoration: underline; }

.post__body > p:last-child {
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

/* -------------------------------------------------------------------------- 18. Pedido (CTA final + formulário) */
.order {
  padding-block: var(--dr-section-pad);
  background: var(--dr-primary-action);
  color: var(--dr-text-inverse);
}

.order__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}

.order__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order__intro h2 {
  max-width: 12ch;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
}

.order__intro > p {
  max-width: 40ch;
  font-size: var(--dr-fs-lead);
  color: #FFFFFF;
}

.order__contacts {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.order__contacts a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  color: var(--dr-text-inverse);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.order__contacts .icon {
  padding: 12px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.order__contacts span { display: flex; flex-direction: column; line-height: 1.3; }
.order__contacts small { font-size: 0.8125rem; font-weight: 400; color: #FFFFFF; }
.order__contacts a:hover span { text-decoration: underline; }

.form {
  padding: 28px 24px;
  background: var(--dr-surface);
  border-radius: var(--dr-radius-card);
  box-shadow: 0 24px 48px rgba(8, 19, 54, 0.24);
  color: var(--dr-text);
}

.form__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: var(--dr-border-subtle);
  font-family: var(--dr-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
}

.form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 20px;
  margin-bottom: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.field__req { font-weight: 400; color: var(--dr-text-muted); }

.field input,
.field select {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: var(--dr-border-control);
  border-radius: var(--dr-radius-input);
  background: var(--dr-surface);
  color: var(--dr-text);
  font-family: var(--dr-font-body);
  font-size: 1rem;
  transition: border-color var(--dr-base) var(--dr-ease);
}

.field input:hover,
.field select:hover { border-color: var(--dr-secondary); }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"] { border: 2px solid var(--dr-error); }

.field__help { font-size: var(--dr-fs-small); color: var(--dr-text-muted); }
.field__error { font-size: var(--dr-fs-small); font-weight: 600; color: var(--dr-error); }

.form__privacy {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: var(--dr-text-muted);
}

.form__status:not(:empty) {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--dr-radius-card);
  background: var(--dr-primary-soft);
  color: var(--dr-error);
  font-weight: 600;
}

@media (min-width: 768px) {
  .form { padding: 36px; }
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .order__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; }
}

/* -------------------------------------------------------------------------- 19. Rodapé */
.site-footer {
  padding: 48px 0 24px;
  background: var(--dr-surface-dark);
  color: var(--dr-text-inverse-muted);
  font-size: 1rem;
}

.site-footer a {
  color: var(--dr-text-inverse-muted);
  font-weight: 400;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--dr-text-inverse);
  text-decoration: underline;
}

.footer-contacts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-contacts li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-contacts .icon {
  color: var(--dr-primary);
}

.footer-contacts span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-contacts span a { color: var(--dr-text-inverse-muted); }
.footer-contacts strong {
  color: var(--dr-text-inverse);
}

.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-block: 48px 32px;
}

.footer-col__title {
  margin-bottom: 16px;
  font-size: var(--dr-fs-h6);
  font-weight: 600;
  color: var(--dr-text-inverse);
}

.footer-col__title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 12px;
  background: var(--dr-primary);
}

.footer-col ul {
  display: grid;
  gap: 4px;
}

.footer-col li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-col address li {
  padding-block: 4px;
}

.footer-col address strong {
  color: var(--dr-text-inverse);
}

.footer-col__note {
  margin-top: 16px;
  font-size: var(--dr-fs-small);
}

.footer-zones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-zones p {
  color: var(--dr-text-inverse);
  font-weight: 700;
}

.footer-zones ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.footer-zones a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 300px;
}

.seals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.seals li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--dr-fs-small);
  color: var(--dr-text-inverse);
}

.seals .icon {
  color: var(--dr-primary);
}

.seals span {
  display: flex;
  flex-direction: column;
}

.seals a {
  text-decoration: underline;
}

.social {
  display: flex;
  gap: 8px;
}

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--dr-radius-button);
}

.social a:hover {
  border-color: var(--dr-text-inverse);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--dr-fs-small);
}

.footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 768px) {
  .footer-contacts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-trust {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
  }
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ==========================================================================
   21. Página de serviço / landing de conversão (ex.: /abastecimento/emergencial/)
   ========================================================================== */

/* Breadcrumb */
.breadcrumb { padding-top: 28px; padding-bottom: 4px; font-size: 0.875rem; }

@media (min-width: 1024px) {
  .breadcrumb { padding-top: 36px; }
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: var(--dr-text-muted); }

.breadcrumb li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.breadcrumb a { color: var(--dr-secondary); font-weight: 500; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb--inverse li { color: var(--dr-text-inverse-muted); }
.breadcrumb--inverse a { color: var(--dr-text-inverse); }
.breadcrumb--inverse [aria-current="page"] { color: var(--dr-text-inverse-muted); }

/* Hero de conversão: texto à esquerda, formulário curto à direita */
.lp-hero {
  padding-bottom: var(--dr-section-pad);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 16px),
    var(--dr-surface-dark);
  color: var(--dr-text-inverse);
}

.lp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-top: 16px;
}

.lp-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lp-hero h1 { max-width: 18ch; }

.lp-hero__checks {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.lp-hero__checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
}

.lp-hero__checks .icon { margin-top: 3px; color: #3FBF7F; }   /* verde de confirmação clareado para fundo escuro */

.lp-hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  color: var(--dr-text-inverse-muted);
}

.lp-hero__rating strong { color: var(--dr-text-inverse); }
.lp-hero__rating a { color: var(--dr-text-inverse); }
/* Data de atualização da página (sinal de confiança, Etapa 37) */
.lp-hero__updated { display: flex; align-items: center; gap: 8px; margin-top: -12px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.72); }

.lp-form { border-top: 4px solid var(--dr-primary); }

.lp-form .form__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

.form__title .icon { color: var(--dr-primary-action); }

.form--wa .form__title {
  margin-bottom: 4px;
  padding-bottom: 0;
  border-bottom: 0;
}

.lp-form__intro {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: var(--dr-border-subtle);
  font-size: 0.875rem;
  color: var(--dr-text-muted);
}

.form__grid--single { grid-template-columns: minmax(0, 1fr) !important; gap: 16px; }

@media (min-width: 768px) {
  .lp-hero__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lp-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 64px;
    padding-top: 20px;
  }
  .lp-form { position: sticky; top: calc(var(--dr-header-h) + 24px); }
}

/* O que fazer agora: passos + mensagem pronta, com a mesma altura */
.now {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dr-gutter);
  align-items: stretch;
}

.now__steps {
  display: grid;
  border-top: 2px solid var(--dr-secondary);
}

.now__step {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-bottom: var(--dr-border-subtle);
}

.now__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--dr-primary-soft);
  color: var(--dr-primary-action);
  font-family: var(--dr-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
}

.now__step h3 { margin-bottom: 6px; font-size: 1.125rem; }
.now__step p { font-size: 0.9375rem; color: var(--dr-text-muted); }

.msg {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--dr-card-pad);
  background: var(--dr-surface-alt);
  border: var(--dr-border-subtle);
  border-top: 3px solid var(--dr-whatsapp);
  border-radius: var(--dr-radius-card);
}

.msg__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dr-font-heading);
  font-weight: 700;
}

.msg__title .icon { color: var(--dr-whatsapp); }

.msg__text {
  flex: 1;
  margin: 0;
  padding: 20px;
  background: var(--dr-surface);
  border: 1px dashed var(--dr-border-strong);
  border-radius: var(--dr-radius-card);
  font-family: var(--dr-font-body);
  font-size: 0.9375rem;
  line-height: 1.8;
  white-space: pre-wrap;
  color: var(--dr-text);
}

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

.msg__status {
  min-height: 1.5em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dr-success);
}

.now__more {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
  text-align: center;
}

@media (min-width: 1024px) {
  .now { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
}

/* Situações */
.situation {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: var(--dr-card-pad);
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-bottom: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
}

.situation > .icon { color: var(--dr-primary-action); }
.situation h3 { font-size: 1.125rem; }

.situation p {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

.situation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 12px;
  border-top: var(--dr-border-subtle);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Cargas (tanques fora do guia) */
.cargas {
  padding: var(--dr-card-pad);
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
}

@media (min-width: 1024px) {
  .cargas .tanks { gap: 32px; }
  .cargas .tank__body { height: 200px; border-radius: 16px 16px 4px 4px; }
}

/* Depoimentos em 3 colunas */
@media (min-width: 1024px) {
  .quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Serviços e artigos relacionados */
.related {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px var(--dr-gutter);
}

.related__card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  height: 100%;
  min-height: 88px;
  padding: 20px 24px;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  transition: border-color var(--dr-base) var(--dr-ease), box-shadow var(--dr-base) var(--dr-ease);
}

.related__card > .icon:first-child { color: var(--dr-primary-action); }
.related__card > .icon:last-child { color: var(--dr-secondary); transition: transform var(--dr-base) var(--dr-ease); }
.related__card span { display: flex; flex-direction: column; gap: 2px; }
.related__card strong { color: var(--dr-secondary); font-size: 1rem; }

.related__card:hover {
  border-color: var(--dr-primary-action);
  box-shadow: var(--dr-shadow-small);
  color: var(--dr-text-muted);
}

.related__card:hover > .icon:last-child { transform: translateX(4px); color: var(--dr-primary-action); }

.related__label {
  margin: 40px 0 16px;
  font-size: var(--dr-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dr-text-muted);
}

@media (min-width: 768px) {
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .related:not(.related--posts) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Contato flutuante: botão fixo no canto, abre a escolha entre ligar e WhatsApp (_build/contato-flutuante.html + main.js) */
.fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--dr-z-dropdown);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
body.menu-open .fab { display: none; }

.fab__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 20px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--dr-whatsapp);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(8, 19, 54, 0.32);
  cursor: pointer;
  transition: background var(--dr-dur-fast, 120ms) ease, transform var(--dr-dur-fast, 120ms) ease;
}
.fab__btn:hover { background: #14532D; }
.fab__btn:active { transform: scale(0.97); }
.fab__btn:focus-visible { outline: 3px solid var(--dr-focus); outline-offset: 3px; }

.fab__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--dr-whatsapp);
}
/* anel pulsando na logo: chama a atenção sem cobrir nada */
.fab__icon--open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: fab-pulso 2.4s ease-out infinite;
}
@keyframes fab-pulso {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}
.fab__icon--close { display: none; }
.fab.is-open .fab__icon--open { display: none; }
.fab.is-open .fab__icon--close { display: inline-flex; }

.fab__menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(300px, calc(100vw - 32px));
}
.fab__menu[hidden] { display: none; }
.no-js .fab__menu[hidden] { display: flex; }      /* sem JavaScript, as opções ficam sempre à mostra */
.no-js .fab__btn { display: none; }

.fab__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px 10px 10px;
  border-radius: var(--dr-radius-card);
  background: var(--dr-surface);
  color: var(--dr-secondary);
  font-size: 0.8125rem;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(8, 19, 54, 0.22);
}
.fab__opt span:last-child { display: flex; flex-direction: column; color: var(--dr-text-muted); }
.fab__opt strong { font-size: 1rem; color: var(--dr-secondary); }
.fab__opt:hover strong { text-decoration: underline; }
.fab__opt:focus-visible { outline: 3px solid var(--dr-focus); outline-offset: 2px; }
.fab__opt-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
}
.fab__opt--tel .fab__opt-icon { background: var(--dr-primary-action); }
.fab__opt--wa .fab__opt-icon { background: var(--dr-whatsapp); }

/* espaço no fim da página para o botão não cobrir o rodapé no celular */
@media (max-width: 767px) {
  .footer-bottom { padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  .fab__icon--open::after { animation: none; }
}

/* ==========================================================================
   22. Componentes das páginas internas (capacidade, reservatório, zona, sobre)
   ========================================================================== */

@media (min-width: 768px) {
  .grid--2,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Equivalências (quanto rende uma carga) */
.equiv__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: var(--dr-card-pad);
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-top: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
}

.equiv__value {
  font-family: var(--dr-font-heading);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--dr-secondary);
}

.equiv__label { font-size: 0.9375rem; color: var(--dr-text-muted); }

.callout-line {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 16px;
  margin-top: var(--dr-gutter);
  padding: 20px 24px;
  background: var(--dr-primary-soft);
  border-left: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  font-size: 0.9375rem;
}

.callout-line .icon { margin-top: 2px; color: var(--dr-primary-action); }

/* Tanque da própria página (sem link) */
.tank__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 12px 16px;
  border: 1px solid var(--dr-primary-action);
  border-radius: var(--dr-radius-card);
  background: var(--dr-primary-soft);
}

.tank.is-active .tank__card .tank__flag { visibility: visible; }
.tank__more--here { color: var(--dr-text-muted); text-decoration: none; }

/* Bairros da zona */
.bairros {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px var(--dr-gutter);
}

.bairro {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  height: 100%;
  min-height: 76px;
  padding: 16px 20px;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-left: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  text-decoration: none;
  transition: border-color var(--dr-base) var(--dr-ease), box-shadow var(--dr-base) var(--dr-ease);
}

.bairro > .icon:first-child { color: var(--dr-primary-action); }
.bairro > .icon:last-child { color: var(--dr-secondary); transition: transform var(--dr-base) var(--dr-ease); }
.bairro span { display: flex; flex-direction: column; }
.bairro strong { color: var(--dr-secondary); font-size: 1rem; }
.bairro:hover { border-color: var(--dr-primary-action); box-shadow: var(--dr-shadow-small); color: var(--dr-text-muted); }
.bairro:hover > .icon:last-child { transform: translateX(4px); color: var(--dr-primary-action); }

/* Zona ou bairro ainda não publicado: o build.py tira o href (vira marcador, sem clique) até a página existir */
a.is-pendente { cursor: default; }
a.is-pendente:hover { text-decoration: none; }
.bairro.is-pendente:hover { border: var(--dr-border-subtle); border-left: var(--dr-border-emphasis); box-shadow: none; }
.chips a.is-pendente:hover { border-color: var(--dr-border); color: var(--dr-secondary); }
.mega__link.is-pendente:hover { background: none; }
.bairro.is-pendente > .icon:last-child,
.zone__more.is-pendente .icon { display: none; }
.zone__more.is-pendente { color: var(--dr-text-muted); }

@media (min-width: 768px) { .bairros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .bairros { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Card vertical no desktop: o nome do bairro cabe inteiro na coluna */
  .bairro {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 10px;
    min-height: 128px;
    padding: 20px;
  }
  .bairro > .icon:last-child { display: none; }
}

.bairro, .bairro * { overflow-wrap: normal; hyphens: none; }

/* Lista de motivos ao lado do mapa (mesma altura do mapa) */
.now__steps--panel {
  align-content: space-between;
  padding: 8px var(--dr-card-pad);
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-top: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
}

.now__steps--panel .now__step:last-child { border-bottom: 0; }

/* Cartão de dados da empresa (Sobre) */
.company {
  padding: 28px 24px;
  background: var(--dr-surface);
  border-top: 4px solid var(--dr-primary);
  border-radius: var(--dr-radius-card);
  box-shadow: 0 24px 48px rgba(8, 19, 54, 0.24);
  color: var(--dr-text);
}

.company .form__title { margin-bottom: 12px; }
.company__list { margin: 0 0 20px; }

.company__list > div {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: var(--dr-border-subtle);
}

.company__list dt { font-size: 0.8125rem; color: var(--dr-text-muted); }
.company__list dd { margin: 0; font-weight: 600; }

@media (min-width: 768px) {
  .company { padding: 36px; }
  .company__list > div { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
}

/* História (Sobre): foto e texto com a mesma altura */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dr-gutter);
  align-items: stretch;
}

.story__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--dr-radius-card);
}

.story__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: var(--dr-card-pad);
  background: var(--dr-surface-alt);
  border-left: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text-muted);
}

.story__text p + p { margin-top: 0; }

@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; }
}

/* Sócios */
.person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-bottom: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
}

.person img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.person__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--dr-card-pad);
}

.person__body h3 { font-size: 1.25rem; }
.person__role { font-size: 0.875rem; font-weight: 600; color: var(--dr-primary-action); }
.person__body p:last-child { font-size: 0.9375rem; color: var(--dr-text-muted); }

@media (min-width: 768px) {
  .person { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .person img { height: 100%; aspect-ratio: auto; min-height: 280px; }
  .person__body { justify-content: center; }
}

/* Tabelas: rolagem horizontal só dentro da região da tabela */
.table-wrap {
  overflow-x: auto;
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.table caption {
  padding: 12px 16px;
  background: var(--dr-surface-alt);
  font-weight: 700;
  text-align: left;
}

.table th,
.table td {
  padding: 14px 16px;
  border-top: var(--dr-border-subtle);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  background: var(--dr-secondary);
  color: var(--dr-text-inverse);
  font-weight: 600;
}

.table tbody tr:nth-child(even) { background: var(--dr-surface-alt); }
.table tbody th { font-weight: 600; color: var(--dr-secondary); }

/* ==========================================================================
   23. Artigo do blog (modelo M12)
   ========================================================================== */

/* Cabeçalho do artigo */
.ahero {
  padding-bottom: 48px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 16px),
    var(--dr-surface-dark);
  color: var(--dr-text-inverse);
}

.ahero__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  padding-top: 16px;
}

.ahero__cat a {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: var(--dr-radius-badge);
  background: var(--dr-primary-action);
  color: var(--dr-text-inverse);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.ahero h1 { max-width: 24ch; font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); }

.ahero__lead {
  max-width: 62ch;
  font-size: var(--dr-fs-lead);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.ahero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8125rem;
  color: var(--dr-text-inverse-muted);
}

.ahero__meta li { display: inline-flex; align-items: center; gap: 8px; }
.ahero__meta .icon { color: var(--dr-primary); }
.ahero__meta a { color: var(--dr-text-inverse); }

/* Layout: texto + lateral fixa */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding-block: 48px var(--dr-section-pad);
}

.article { min-width: 0; max-width: 780px; }

.article-side { display: none; }

@media (min-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; }
  .article-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: calc(var(--dr-header-h) + 24px);
    align-self: start;
  }
  .toc--mobile { display: none; }
}

/* Resposta direta (para buscadores e IAs) */
.answer {
  padding: 24px 28px;
  background: var(--dr-surface-dark);
  border-left: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.answer__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF8A86;
}

.answer strong { color: var(--dr-text-inverse); }

/* O essencial em 4 pontos */
.essentials {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--dr-surface-alt);
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
}

.essentials__title { margin-bottom: 14px; font-size: 1.125rem; }

.essentials ul { display: grid; gap: 12px; }

.essentials li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.essentials li .icon {
  margin-top: 1px;
  padding: 2px;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: var(--dr-success-soft);
  color: var(--dr-success);
}

.essentials__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: var(--dr-border-subtle);
  font-size: 0.8125rem;
  color: var(--dr-text-muted);
}

/* Sumário */
.toc {
  padding: 22px 24px;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-top: 3px solid var(--dr-secondary);
  border-radius: var(--dr-radius-card);
}

.toc__title {
  margin-bottom: 12px;
  font-size: var(--dr-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dr-text-muted);
}

.toc ol { display: grid; gap: 2px; counter-reset: toc; }

.toc li { counter-increment: toc; }

.toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  min-height: 40px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--dr-border);
  color: var(--dr-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dr-primary-action);
}

.toc a:hover { color: var(--dr-primary-action); }
.toc a.is-current { color: var(--dr-primary-action); font-weight: 600; }

.toc--mobile { margin-top: 24px; padding: 0; }

.toc--mobile summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 20px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.toc--mobile summary::-webkit-details-marker { display: none; }
.toc--mobile summary .icon { color: var(--dr-primary-action); }
.toc--mobile ol { padding: 0 20px 16px; }

/* Texto do artigo */
.prose { margin-top: 48px; }
.prose:first-of-type { margin-top: 32px; }

.prose > p,
.prose li { font-size: 1.0625rem; line-height: 1.75; color: #2B3550; }

.prose > p + p { margin-top: 16px; }

.prose h2 {
  margin-bottom: 16px;
  padding-top: 8px;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  scroll-margin-top: 120px;
}

.prose h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--dr-primary);
}

/* Primeira frase que responde ao título */
.prose__answer {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--dr-primary-soft);
  border-left: 3px solid var(--dr-primary);
  border-radius: 0 var(--dr-radius-card) var(--dr-radius-card) 0;
  font-weight: 500;
  color: var(--dr-secondary) !important;
}

.prose a { font-weight: 600; }

/* Passo a passo numerado */
.steps { display: grid; gap: 0; counter-reset: step; }

.steps li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 18px 0 18px 64px;
  border-bottom: var(--dr-border-subtle);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 18px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dr-secondary);
  color: var(--dr-text-inverse);
  font-family: var(--dr-font-heading);
  font-weight: 700;
}

.steps li:first-child::before { background: var(--dr-primary-action); }
.steps h3 { font-size: 1.125rem; }
.steps p { font-size: 0.9875rem; line-height: 1.65; color: var(--dr-text-muted); }

/* Números de destaque */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.figures li {
  padding: 18px;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-top: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  font-size: 0.8125rem !important;
  line-height: 1.45 !important;
  color: var(--dr-text-muted) !important;
}

.figures__value {
  margin-bottom: 4px;
  font-family: var(--dr-font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--dr-secondary);
}

.figures__value span { margin-left: 2px; font-size: 0.5em; color: var(--dr-primary-action); }

@media (min-width: 768px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.prose .table-wrap { margin-top: 8px; }
.prose .table { min-width: 620px; font-size: 0.9375rem; }

.source {
  margin-top: 10px !important;
  font-size: 0.8125rem !important;
  color: var(--dr-text-muted) !important;
}

/* Fórmula */
.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 18px 20px;
  background: var(--dr-surface-dark);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text-inverse);
  font-size: 0.9375rem;
  font-weight: 600;
}

.formula span {
  padding: 6px 12px;
  border-radius: var(--dr-radius-badge);
  background: rgba(255, 255, 255, 0.08);
}

.formula .icon { color: var(--dr-primary); }

/* CTA no meio do texto */
.inline-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 40px;
  padding: 24px;
  background: var(--dr-surface-dark);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text-inverse-muted);
  font-size: 0.9375rem;
}

.inline-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--dr-primary-action);
  color: var(--dr-text-inverse);
}

.inline-cta__title { margin-bottom: 4px; font-family: var(--dr-font-heading); font-size: 1.125rem; font-weight: 700; color: var(--dr-text-inverse); }

@media (min-width: 768px) {
  .inline-cta { grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; }
}

/* CTA discreto no topo do artigo (dentro do bloco de resposta) */
.answer__cta { margin-top: 12px; font-size: 0.875rem; font-weight: 600; }
.answer__cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--dr-whatsapp); }
.essentials__lead { margin-bottom: 12px; color: var(--dr-text-muted); }

/* Imagem do artigo */
.article__figure { margin: 40px 0 0; }

.article__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--dr-radius-card);
}

.article__figure figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--dr-text-muted);
}

/* Citação legal */
.legal {
  margin: 8px 0 20px;
  padding: 24px 28px;
  background: var(--dr-surface-alt);
  border-left: 4px solid var(--dr-secondary);
  border-radius: 0 var(--dr-radius-card) var(--dr-radius-card) 0;
}

.legal p { font-size: 1.0625rem; font-style: italic; line-height: 1.7; color: var(--dr-secondary); }

.legal footer {
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dr-text-muted);
}

.legal cite { font-style: normal; }

.disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px !important;
  font-size: 0.8125rem !important;
  color: var(--dr-text-muted) !important;
}

.disclaimer .icon { margin-top: 3px; color: var(--dr-primary-action); }

/* Comunicado dentro do artigo */
.msg--article { margin-bottom: 16px; }
.msg__actions--row { display: flex; justify-content: flex-start; }

/* Listas de verificação */
.checkbox-list {
  margin-block: 20px;
  padding: 22px 24px;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-top: 3px solid var(--dr-success);
  border-radius: var(--dr-radius-card);
}

.checkbox-list__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 600;
}

.checkbox-list__title .icon { color: var(--dr-success); }

.checkbox-list ul,
.ticks { display: grid; gap: 10px; }

.checkbox-list li,
.ticks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 1rem !important;
}

.checkbox-list li .icon,
.ticks li .icon {
  margin-top: 4px;
  padding: 2px;
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: var(--dr-success-soft);
  color: var(--dr-success);
}

.prose .faq { margin-top: 8px; }
.prose .faq__answer p { font-size: 0.9875rem; }

/* Autor */
.author {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  margin-top: 48px;
  padding: 24px;
  background: var(--dr-surface-alt);
  border-radius: var(--dr-radius-card);
  font-size: 0.9375rem;
  color: var(--dr-text-muted);
}

.author__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dr-secondary);
  color: var(--dr-text-inverse);
}

.author__name { margin-bottom: 4px; font-weight: 600; color: var(--dr-text); }

/* CTA da lateral */
.side-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--dr-surface-dark);
  border-top: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  color: var(--dr-text-inverse-muted);
  font-size: 0.9375rem;
}

.side-cta__title { font-family: var(--dr-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--dr-text-inverse); }

.side-cta__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: var(--dr-text-inverse);
  font-weight: 600;
  text-decoration: none;
}

.side-cta__phone:hover { color: var(--dr-text-inverse); text-decoration: underline; }

/* Relacionados em 3 colunas */
@media (min-width: 1024px) {
  .related.related--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------- 20. Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .svc:hover,
  .post:hover {
    transform: none !important;
  }
}

/* =========================================================================
   24. HUBS (serviços e áreas)
   ========================================================================= */
/* Seletor do hero: lista de situações que leva direto ao serviço */
.chooser__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chooser__opt {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 16px;
  border: var(--dr-border-subtle);
  border-radius: var(--dr-radius-card);
  background: var(--dr-surface);
  color: var(--dr-text);
  text-decoration: none;
  transition: border-color var(--dr-base) var(--dr-ease), background var(--dr-base) var(--dr-ease);
}
.chooser__opt > .icon:first-child { color: var(--dr-primary-action); }
.chooser__opt > .icon:last-child { color: var(--dr-text-muted); transition: transform var(--dr-base) var(--dr-ease); }
.chooser__opt span { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; color: var(--dr-text-muted); line-height: 1.4; }
.chooser__opt strong { color: var(--dr-secondary); font-size: 0.9375rem; font-weight: 600; }
.chooser__opt:hover, .chooser__opt:focus-visible { border-color: var(--dr-primary-action); background: var(--dr-surface-alt); }
.chooser__opt:hover > .icon:last-child { transform: translateX(4px); color: var(--dr-primary-action); }

.finder { display: flex; flex-direction: column; gap: 16px; }
.finder select { width: 100%; }
.finder__note { margin-top: 16px; font-size: 0.875rem; color: var(--dr-text-muted); }
.finder__note a { color: var(--dr-primary-action); font-weight: 600; }

/* Grade de serviços do hub: 1 / 2 / (2 grandes + 3) colunas, sem célula vazia */
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dr-row-gap) var(--dr-gutter); margin: 0; padding: 0; list-style: none; }
.svc-hub {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 24px;
  background: var(--dr-surface);
  border: var(--dr-border-subtle);
  border-bottom: var(--dr-border-emphasis);
  border-radius: var(--dr-radius-card);
  transition: transform var(--dr-base) var(--dr-ease), box-shadow var(--dr-base) var(--dr-ease);
}
.svc-hub__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 6px;
  border-radius: var(--dr-radius-card);
  background: var(--dr-primary-soft); color: var(--dr-primary-action);
}
.svc-hub__when { font-size: var(--dr-fs-eyebrow); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dr-primary-action); }
.svc-hub h3 { font-size: 1.25rem; color: var(--dr-secondary); }
.svc-hub__text { flex: 1; color: var(--dr-text-muted); }
.svc-hub .svc__link { margin-top: 6px; }
.svc-hub:hover { transform: translateY(-2px); box-shadow: var(--dr-shadow-card-hover); }
.svc-hub:hover .svc__link { color: var(--dr-primary-action); }
.svc-hub:hover .svc__link .icon { transform: translateX(4px); }
.svc-hub:focus-within { box-shadow: var(--dr-shadow-card-hover); }
.svc-hub:nth-child(-n+2) { background: var(--dr-secondary); border-color: var(--dr-secondary); border-bottom-color: var(--dr-primary); }
.svc-hub:nth-child(-n+2) h3, .svc-hub:nth-child(-n+2) .svc__link { color: #FFFFFF; }
.svc-hub:nth-child(-n+2) .svc-hub__text { color: rgba(255, 255, 255, 0.78); }
.svc-hub:nth-child(-n+2) .svc-hub__when { color: #FF8A87; }
.svc-hub:nth-child(-n+2) .svc-hub__icon { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; }
.svc-hub:nth-child(-n+2):hover .svc__link { color: #FFFFFF; }

@media (min-width: 768px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-grid > .svc-hub:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .hub-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hub-grid > .svc-hub { grid-column: span 2; }
  .hub-grid > .svc-hub:nth-child(-n+2) { grid-column: span 3; }
  .hub-grid > .svc-hub:last-child { grid-column: span 2; }
}

/* Tabela comparativa: primeira coluna fixa ao rolar no celular */
.table--compare { min-width: 860px; }
.table--compare thead th a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.table--compare tbody th { position: sticky; left: 0; background: inherit; }
.table--compare tbody tr { background: var(--dr-surface); }
.table--compare tbody tr:nth-child(even) { background: var(--dr-surface-alt); }
.table-note { margin-top: 16px; font-size: 0.875rem; color: var(--dr-text-muted); }
.table-note a { color: var(--dr-primary-action); font-weight: 600; }

/* =========================================================================
   25. SOBRE (entity home)
   ========================================================================= */
/* Linha do tempo de marcos: 1 / 2 / 4 colunas, linha horizontal ligando os pontos */
.milestones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dr-row-gap) var(--dr-gutter); margin: 0; padding: 0; list-style: none; counter-reset: m; }
.milestone {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 24px; background: var(--dr-surface); border: var(--dr-border-subtle);
  border-top: var(--dr-border-emphasis); border-radius: var(--dr-radius-card); min-width: 0;
}
.milestone__year { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--dr-secondary); overflow-wrap: anywhere; }
.milestone__dot { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dr-primary-soft); color: var(--dr-primary-action); }
.milestone:last-child { background: var(--dr-secondary); border-color: var(--dr-secondary); border-top-color: var(--dr-primary); }
.milestone:last-child .milestone__year, .milestone:last-child h3 { color: #FFFFFF; }
.milestone:last-child p:not(.milestone__year) { color: rgba(255,255,255,.78); }
.milestone:last-child .milestone__dot { background: rgba(255,255,255,.1); color: #FFFFFF; }
.milestone h3 { font-size: 1.0625rem; color: var(--dr-secondary); overflow-wrap: anywhere; }
.milestone p:not(.milestone__year) { color: var(--dr-text-muted); font-size: 0.9375rem; overflow-wrap: anywhere; }
@media (min-width: 768px) { .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .milestones { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Foto da página: faixa logo abaixo do topo das páginas principais (build.py + imagens.py) */
.page-photo { padding-top: var(--dr-section-pad); }
.page-photo__figure { margin: 0; }
.page-photo__figure img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--dr-radius-card); background: var(--dr-surface-alt); }
.page-photo__figure figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--dr-text-muted); }
@media (min-width: 1024px) { .page-photo__figure img { aspect-ratio: 12 / 5; } }

/* Fundadores: cards simétricos, só nome, cargo e ficha (sem foto) */
.founders { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dr-row-gap) var(--dr-gutter); margin: 0; padding: 0; list-style: none; }
.founder { display: flex; overflow: hidden; background: var(--dr-surface); border: var(--dr-border-subtle); border-bottom: var(--dr-border-emphasis); border-radius: var(--dr-radius-card); }
.founder__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: var(--dr-card-pad); min-width: 0; }
.founder__body h3 { font-size: 1.25rem; color: var(--dr-secondary); }
.founder__facts { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; flex: 1; }
.founder__facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-top: 8px; border-top: var(--dr-border-subtle); }
.founder__facts dt { font-size: 0.8125rem; color: var(--dr-text-muted); }
.founder__facts dd { margin: 0; font-size: 0.9375rem; font-weight: 500; overflow-wrap: anywhere; }
.founder__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--dr-secondary); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.founder__link:hover { color: var(--dr-primary-action); text-decoration: underline; }
@media (min-width: 1024px) {
  .founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Missão, visão e valores */
.mvv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dr-row-gap) var(--dr-gutter); margin: 0; padding: 0; list-style: none; }
.mvv__item { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; background: var(--dr-surface); border: var(--dr-border-subtle); border-bottom: var(--dr-border-emphasis); border-radius: var(--dr-radius-card); }
.mvv__item h3 { font-size: 1.25rem; color: var(--dr-secondary); }
.mvv__item p { color: var(--dr-text-muted); overflow-wrap: anywhere; }
@media (min-width: 768px) { .mvv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Números dentro de seção de marca */
.section--brand .numbers { margin: 0; padding: 0; list-style: none; }
.section--brand .numbers .stats__value { color: #FFFFFF; }
.section--brand .numbers .stats__label { color: rgba(255,255,255,.78); }

/* Registros */
.cred { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--dr-surface); border: var(--dr-border-subtle); border-top: var(--dr-border-emphasis); border-radius: var(--dr-radius-card); height: 100%; }
.cred .icon { color: var(--dr-primary-action); }
.cred h3 { font-size: 1.0625rem; color: var(--dr-secondary); }
.cred p { font-size: 0.9375rem; color: var(--dr-text-muted); overflow-wrap: anywhere; }

/* NAP + perfis oficiais */
.nap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dr-row-gap) var(--dr-gutter); align-items: stretch; }
.nap__card { display: flex; flex-direction: column; padding: 28px 24px; background: var(--dr-surface); border: var(--dr-border-subtle); border-top: 4px solid var(--dr-primary); border-radius: var(--dr-radius-card); }
.nap__card .company__list { flex: 1; }
.nap__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.nap__profiles { display: flex; flex-direction: column; }
.nap__profiles .related__label { margin-top: 0; }
.profiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; flex: 1; margin: 0; padding: 0; list-style: none; grid-auto-rows: 1fr; }
.profiles .related__card { height: 100%; }
.related__card--pending { border-style: dashed; background: var(--dr-surface-alt); }
@media (min-width: 768px) {
  .nap__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .nap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .nap__card { padding: 36px; } }
.mvv__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--dr-text-muted); }
.mvv__list li { position: relative; padding-left: 20px; }
.mvv__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--dr-primary-action); }

/* Pedido rápido: janela com o formulário que abre nos botões de WhatsApp (_build/wa-modal.html + main.js) */
.wa-modal {
  width: min(480px, calc(100% - 2 * var(--dr-container-pad)));
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--dr-radius-card);
  background: none;
}
.wa-modal::backdrop { background: rgba(8, 19, 54, 0.64); }
.wa-modal__form { position: relative; border-top: 4px solid var(--dr-primary); }
.wa-modal__form .form__title { padding-right: 48px; }
.wa-modal__form .form__grid { margin-bottom: 20px; }
.wa-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--dr-radius-button);
  background: none;
  color: var(--dr-secondary);
  cursor: pointer;
}
.wa-modal__close:hover { background: var(--dr-surface-alt); }

/* Telefone nunca quebra em duas linhas */
a[href^="tel:"], .nav__phone-text { white-space: nowrap; }

/* =========================================================================
   26. BLOG (home), POLÍTICAS E 404
   ========================================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Cabeçalho do blog */
.ahero__cat:not(:has(a)) { font-size: var(--dr-fs-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dr-primary); }
.bsearch {
  position: relative; display: flex; align-items: center; max-width: 640px;
  background: var(--dr-surface); border-radius: var(--dr-radius-card);
}
.bsearch .icon { position: absolute; left: 16px; color: var(--dr-text-muted); pointer-events: none; }
.bsearch input {
  width: 100%; min-height: 56px; padding: 0 16px 0 48px; border: 0; border-radius: var(--dr-radius-card);
  background: transparent; color: var(--dr-text); font: inherit; font-size: 1rem;
}
.bsearch input:focus-visible { outline: 3px solid var(--dr-primary); outline-offset: 2px; }
.bchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bchips a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--dr-radius-badge);
  color: var(--dr-text-inverse); font-size: 0.875rem; font-weight: 500; text-decoration: none;
  transition: border-color var(--dr-base) var(--dr-ease), background var(--dr-base) var(--dr-ease);
}
.bchips a .icon { color: var(--dr-primary); }
.bchips a span { padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 0.75rem; }
.bchips a:hover { border-color: var(--dr-primary); background: rgba(255, 255, 255, 0.06); }

/* Cards de artigo */
.bgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dr-row-gap) var(--dr-gutter); margin: 0; padding: 0; list-style: none; }
.bcard {
  position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 24px; background: var(--dr-surface); border: var(--dr-border-subtle);
  border-bottom: var(--dr-border-emphasis); border-radius: var(--dr-radius-card);
  transition: transform var(--dr-base) var(--dr-ease), box-shadow var(--dr-base) var(--dr-ease);
}
.bcard__cat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--dr-fs-eyebrow); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dr-primary-action); }
.bcard h3 { font-size: 1.125rem; line-height: 1.35; }
.bcard h3 a { color: var(--dr-secondary); text-decoration: none; }
.bcard h3 a::after { content: ""; position: absolute; inset: 0; }
.bcard__text { flex: 1; font-size: 0.9375rem; color: var(--dr-text-muted); }
.bcard__more { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--dr-secondary); }
.bcard:hover { transform: translateY(-2px); box-shadow: var(--dr-shadow-card-hover); }
.bcard:hover .bcard__more, .bcard:hover h3 a { color: var(--dr-primary-action); }
.bcard:focus-within { box-shadow: var(--dr-shadow-card-hover); }
.bcard--big { background: var(--dr-secondary); border-color: var(--dr-secondary); border-bottom-color: var(--dr-primary); }
.bcard--big h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.bcard--big h3 a, .bcard--big .bcard__more { color: #FFFFFF; }
.bcard--big .bcard__text { color: rgba(255, 255, 255, 0.8); }
.bcard--big .bcard__cat { color: #FF8A87; }
.bcard--big:hover h3 a, .bcard--big:hover .bcard__more { color: #FFFFFF; }
@media (min-width: 768px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bgrid > .bcard:nth-child(3):last-child { grid-column: 1 / -1; } .bgrid--feat > .bcard--big { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bgrid > .bcard:nth-child(3):last-child { grid-column: auto; }
  .bgrid--feat { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; }
  .bgrid--feat > .bcard--big { grid-column: 1; grid-row: 1 / span 2; justify-content: flex-end; padding: 40px; }
}
.bresults__count { margin: 8px 0 24px; color: var(--dr-text-muted); }

/* Faixa de CTA no meio do blog */
.bcta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.bcta p { margin-top: 12px; max-width: 56ch; color: rgba(255, 255, 255, 0.85); }
.bcta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) { .bcta__actions .btn { width: 100%; } }
@media (min-width: 1024px) { .bcta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .bcta__actions { justify-content: flex-end; } }

/* Políticas */
.ahero--legal { padding-bottom: 40px; }
.ahero--legal h1 { max-width: 20ch; }
.article-layout--legal .prose ul { padding-left: 20px; list-style: disc; }
.article-layout--legal .prose ul li + li { margin-top: 6px; }
.article-layout--legal .prose + .prose { margin-top: 40px; }
.legal-links { padding: 24px; background: var(--dr-surface-alt); border-radius: var(--dr-radius-card); }
.legal-links ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.legal-links a { display: flex; align-items: center; min-height: 40px; color: var(--dr-secondary); font-size: 0.9375rem; font-weight: 500; }
.legal-links a:hover { color: var(--dr-primary-action); }

/* 404 */
.e404 {
  padding-block: 64px 72px; text-align: center; color: var(--dr-text-inverse);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 16px),
    var(--dr-surface-dark);
}
.e404__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.e404__code { font-size: clamp(5rem, 3rem + 10vw, 9rem); font-weight: 700; line-height: 1; color: var(--dr-primary); letter-spacing: -0.04em; }
.e404 h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
.e404__lead { max-width: 56ch; font-size: var(--dr-fs-lead); color: rgba(255, 255, 255, 0.85); }
.e404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
@media (max-width: 767px) { .e404__actions { width: 100%; } .e404__actions .btn { width: 100%; } }
/* Resultados da busca: lista em linhas, sem células vazias */
.bresults__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bresults__list .bcard { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 18px 24px; border-bottom-width: 1px; border-left: var(--dr-border-emphasis); }
.bresults__list .bcard__cat { flex: 0 0 auto; min-width: 160px; }
.bresults__list .bcard h3 { flex: 1 1 320px; font-size: 1.0625rem; }

/* =========================================================================
   27. CATEGORIA DO BLOG E OBRIGADO
   ========================================================================= */
.bhero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) { .bhero__actions .btn { width: 100%; } }
.bgrid--one { grid-template-columns: minmax(0, 1fr) !important; }
.bgrid--one > .bcard--big { padding: 40px; }
/* Grade automática sem células vazias: a última linha se estica */
@media (min-width: 768px) and (max-width: 1023px) {
  .bgrid--auto > .bcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bgrid--auto { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bgrid--auto > .bcard { grid-column: span 2; }
  .bgrid--auto > .bcard:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .bgrid--auto > .bcard:last-child:nth-child(3n+2),
  .bgrid--auto > .bcard:nth-last-child(2):nth-child(3n+1) { grid-column: span 3; }
}
.thanks__icon { display: inline-flex; color: #4ADE80; }
.thanks h1 { max-width: 22ch; }