/* ============================================================
   GoPharma — Redesign 2026 (redesign.css)

   Camada de tema que aplica a identidade da home (bundle do Claude
   Design) sobre a estrutura ja existente de auditorias.html,
   mapa-vendas-estoque.html e 404.html.

   Carregar DEPOIS de ds.css e styles.css: os seletores aqui tem a
   mesma especificidade dos originais e vencem pela ordem da cascata.

   A identidade em uma frase: papel bege, tinta quase preta, superficies
   planas com fio de 1px, zero raio e zero sombra, display em Space
   Grotesk com tracking negativo e micro-rotulos em IBM Plex Mono
   caixa-alta. As quebras de ritmo sao blocos #0d1013.
   ============================================================ */

:root {
  /* superficies */
  --rd-paper:      #f4f3ee;
  --rd-paper-2:    #efeee8;
  --rd-surface:    #faf9f6;
  --rd-footer:     #e9e8e1;
  --rd-ink:        #14171a;
  --rd-ink-deep:   #0d1013;

  /* acento */
  --rd-teal:       #00af9b;
  --rd-teal-deep:  #00877a;   /* teal legivel sobre papel */
  --rd-teal-wash:  rgba(0, 175, 155, .06);

  /* fios e texto de apoio (claro) */
  --rd-line:       rgba(20, 23, 26, .12);
  --rd-line-2:     rgba(20, 23, 26, .18);
  --rd-line-3:     rgba(20, 23, 26, .25);
  --rd-muted:      rgba(20, 23, 26, .66);
  --rd-muted-2:    rgba(20, 23, 26, .62);
  --rd-muted-3:    rgba(20, 23, 26, .72);

  /* fios e texto de apoio (escuro) - alpha um pouco maior porque fio
     claro sobre fundo escuro rende menos que o contrario */
  --rd-d-line:     rgba(244, 243, 238, .14);
  --rd-d-line-2:   rgba(244, 243, 238, .20);
  --rd-d-muted:    rgba(244, 243, 238, .68);

  --rd-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --rd-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --rd-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --rd-gutter:  clamp(20px, 3.4vw, 44px);
  --rd-section: clamp(56px, 6.6vw, 104px);

  /* reescreve os tokens do ds.css para o que ainda consumir as vars */
  --ds-color-primary:      #00af9b;
  --ds-color-primary-dark: #00877a;
  --ds-color-primary-light: rgba(0, 175, 155, .08);
  --ds-color-bg:           #f4f3ee;
  --ds-color-bg-soft:      #efeee8;
  --ds-color-bg-tinted:    rgba(0, 175, 155, .06);
  --ds-color-text-1:       #14171a;
  --ds-color-text-2:       rgba(20, 23, 26, .66);
  --ds-color-text-3:       rgba(20, 23, 26, .5);
  --ds-color-border:       rgba(20, 23, 26, .12);
  --ds-color-border-hover: rgba(20, 23, 26, .25);
  --ds-color-footer-bg:    #e9e8e1;
  --ds-color-footer-text:  rgba(20, 23, 26, .68);
  --color-primary-500:     #00af9b;
  --color-primary-600:     #00877a;
  --color-gray-900:        #14171a;
  --color-gray-600:        rgba(20, 23, 26, .66);
  --color-gray-400:        rgba(244, 243, 238, .68);
}

/* ---------- base ---------- */

body,
body.font-body {
  background: var(--rd-paper);
  color: var(--rd-ink);
  font-family: var(--rd-body);
}

.font-heading,
h1, h2, h3, h4 {
  font-family: var(--rd-display);
  font-weight: 500;
  letter-spacing: -.035em;
}

a { color: inherit; }

/* Plano: nada de raio nem sombra em lugar nenhum. E o que mais separa a
   identidade nova da antiga - o resto e tipografia. */
.ds-btn, .ds-card, .service-card, .audit-card, .benefit-card, .price-card,
.processing-card, .feature-card-v2, .step-card, .accordion-item, .shot,
.hero-shot, .icon-wrap, .section-header__badge, .page-title__badge,
.price-pill, .stat-strip, .tour-row__visual, .whatsapp-btn, .hero-btn-primary,
.hero-btn-secondary, .comparison-table, .check-list__icon, .breadcrumb,
.top-banner, .ds-nav__logo-img, .shot__bar, .callout-gradient, input, textarea, select {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- containers ---------- */

.ds-container,
.page-container {
  max-width: 1360px;
  padding-left: var(--rd-gutter);
  padding-right: var(--rd-gutter);
}

.ds-section, .ds-section--sm, .ds-section--lg {
  padding-top: var(--rd-section);
  padding-bottom: var(--rd-section);
  border-bottom: 1px solid var(--rd-line);
}

.bg-soft { background: var(--rd-paper-2); }

/* ---------- faixa superior: fora, como na home ---------- */

.top-banner { display: none !important; }

/* ---------- header ---------- */

.ds-header {
  position: sticky;
  top: 0;
  background: rgba(244, 243, 238, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(20, 23, 26, .12);
  box-shadow: none;
}
.ds-header.scrolled {
  background: rgba(244, 243, 238, .94);
  border-bottom-color: rgba(20, 23, 26, .22);
  box-shadow: none;
}

.ds-nav { height: 72px; }
.ds-nav__logo-img { height: 30px; width: auto; }

.ds-nav__links a,
.ds-nav__actions .ds-btn {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ds-nav__links a {
  position: relative;
  padding: 6px 0;
  color: var(--rd-ink);
  font-weight: 400;
}
/* sublinhado que corre da esquerda, igual ao da home */
.ds-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--rd-teal);
  transition: right .35s cubic-bezier(.2, .8, .2, 1);
}
.ds-nav__links a:hover::after { right: 0; }

.ds-nav__toggle span { background: var(--rd-ink); }

/* ---------- botoes ---------- */

.ds-btn {
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .25s;
}

.ds-btn--primary {
  background: var(--rd-ink);
  color: var(--rd-paper);
  border-color: var(--rd-ink);
}
.ds-btn--primary:hover {
  background: var(--rd-teal);
  border-color: var(--rd-teal);
  color: var(--rd-ink-deep);
}

.ds-btn--ghost,
.ds-btn--secondary {
  background: transparent;
  color: var(--rd-ink);
  border-color: var(--rd-line-3);
  padding: 12px 16px;
}
.ds-btn--ghost:hover,
.ds-btn--secondary:hover {
  background: rgba(0, 175, 155, .07);
  border-color: var(--rd-teal);
  color: var(--rd-ink);
}

.ds-btn--lg { padding: 16px 30px; font-size: 12px; }
.ds-btn--sm { padding: 9px 16px; font-size: 10.5px; }

.hero-btn-primary {
  background: var(--rd-ink);
  color: var(--rd-paper);
  border: 1px solid var(--rd-ink);
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 16px 26px;
}
.hero-btn-primary:hover {
  background: var(--rd-teal);
  border-color: var(--rd-teal);
  color: var(--rd-ink-deep);
}

.hero-btn-secondary {
  background: transparent;
  border: 1px solid var(--rd-line-3);
  color: var(--rd-ink);
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 16px 24px;
}
.hero-btn-secondary:hover {
  border-color: var(--rd-teal);
  background: rgba(0, 175, 155, .07);
}

/* ---------- micro-rotulos ---------- */

.section-header__badge,
.page-title__badge,
.breadcrumb,
.shot-caption,
.price-card__from,
.price-card__note,
.stat-strip__label,
.check-list-simple__item,
.feat-list__item,
.process-step__number,
.audit-card__subtitle {
  font-family: var(--rd-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.section-header__badge,
.page-title__badge {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--rd-muted);
}
.section-header__badge--dark { color: var(--rd-d-muted); }

.breadcrumb,
.breadcrumb a,
.breadcrumb__current {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--rd-muted);
}
.breadcrumb a:hover { color: var(--rd-teal-deep); }
.breadcrumb--light,
.breadcrumb--light a,
.breadcrumb--light .breadcrumb__current { color: var(--rd-d-muted); }

/* ---------- titulos ---------- */

.page-title,
.section-header__title,
.section-title {
  font-family: var(--rd-display);
  font-weight: 500;
  font-size: clamp(30px, 3.9vw, 56px);
  line-height: 1.02;
  letter-spacing: -.038em;
  color: var(--rd-ink);
  text-wrap: balance;
}
.page-title__highlight,
.hero-title__highlight { color: var(--rd-teal-deep); }
.section-header__title--light { color: var(--rd-paper); }

.page-title__desc,
.section-header__desc {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--rd-muted-2);
  max-width: 52ch;
  text-wrap: pretty;
}
.section-header__desc--light { color: var(--rd-d-muted); }

/* ---------- superficies ---------- */

.audit-card,
.benefit-card,
.service-card,
.processing-card,
.feature-card-v2,
.price-card,
.step-card,
.accordion-item {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line-2);
  transition: border-color .3s, background .3s;
}
.audit-card:hover,
.benefit-card:hover,
.service-card:hover,
.processing-card:hover,
.feature-card-v2:hover,
.price-card:hover {
  border-color: var(--rd-teal);
  background: var(--rd-teal-wash);
}

.audit-card__title,
.benefit-card__title,
.service-card__title,
.processing-card__title,
.feature-card-v2__title,
.step-card__title,
.tour-row__title {
  font-family: var(--rd-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--rd-ink);
}

.audit-card__desc,
.benefit-card__desc,
.service-card__desc,
.processing-card__desc,
.step-card__desc,
.tour-row__desc,
.prose p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--rd-muted-2);
}

/* icone sem bolha: so o glifo, como nas linhas da home */
.icon-wrap {
  background: none !important;
  border: 0;
  width: auto;
  height: auto;
  color: var(--rd-teal-deep);
}
.icon-wrap i { font-size: 22px; }
.icon-wrap--lg i { font-size: 26px; }
.icon-wrap--sm i { font-size: 18px; }

/* ---------- listas ---------- */

.check-list, .feat-list, .price-card__list, .check-list-simple {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.check-list__item,
.feat-list__item,
.price-card__list li,
.check-list-simple__item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--rd-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--rd-muted-3);
}

/* o "+" da home no lugar do check dentro de bolha */
.check-list__icon {
  background: none !important;
  width: auto;
  height: auto;
  flex: none;
  color: var(--rd-teal);
}
.check-list__icon i { display: none; }
.check-list__icon::before {
  content: "+";
  color: var(--rd-teal);
  font-family: var(--rd-mono);
}
.feat-list__item::before,
.price-card__list li::before {
  content: "+";
  color: var(--rd-teal);
}

/* ---------- numeros e passos ---------- */

.process-step__number,
.stat-strip__num,
.price-card__value {
  font-family: var(--rd-display);
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--rd-ink);
  background: none;
  border: 0;
}
.process-step__number { font-family: var(--rd-mono); font-size: 11px; color: var(--rd-muted); }
.stat-strip__num { font-size: clamp(30px, 3vw, 42px); line-height: 1; }
.price-card__value { font-size: clamp(34px, 3.4vw, 46px); line-height: 1; }

.stat-strip {
  background: none;
  border-top: 1px solid var(--rd-line);
  border-bottom: 1px solid var(--rd-line);
}
.stat-strip__label {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--rd-muted);
}

.process-step {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rd-line);
}
.process-step__title {
  font-family: var(--rd-display);
  font-weight: 500;
  letter-spacing: -.025em;
}

/* ---------- screenshots ---------- */

.shot, .hero-shot, .tour-row__visual {
  border: 1px solid var(--rd-line-2);
  background: var(--rd-surface);
  overflow: hidden;
}
.shot__bar {
  background: var(--rd-paper-2);
  border-bottom: 1px solid var(--rd-line);
}
.shot__url, .shot-caption {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--rd-muted);
}
.shot__dot { border-radius: 50%; }

/* ---------- blocos escuros: a quebra de ritmo ---------- */

.bg-dark,
.hero-dark,
.contact-section {
  background: var(--rd-ink-deep) !important;
  color: var(--rd-paper);
}
.bg-dark, .hero-dark { border-bottom: 1px solid var(--rd-d-line); }

.hero-dark__title,
.contact-section__title {
  font-family: var(--rd-display);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -.038em;
  color: var(--rd-paper);
}
.hero-dark__title-highlight { color: var(--rd-teal); }

.hero-dark__desc,
.contact-section__desc {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: var(--rd-d-muted);
  max-width: 56ch;
}

.bg-dark .step-card,
.bg-dark .accordion-item,
.bg-dark .comparison-table {
  background: transparent;
  border-color: var(--rd-d-line-2);
}
.bg-dark .step-card__title,
.bg-dark .section-header__title { color: var(--rd-paper); }
.bg-dark .step-card__desc,
.bg-dark .section-header__desc { color: var(--rd-d-muted); }
.bg-dark .icon-wrap,
.bg-dark .step-icon { color: var(--rd-teal); background: none !important; }

.comparison-table th {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rd-d-muted);
  border-bottom: 1px solid var(--rd-d-line-2);
}
.comparison-table td { border-bottom: 1px solid var(--rd-d-line); }
.comparison-table__check { color: var(--rd-teal); }

/* dentro do escuro o teal escuro nao le: ~3,6:1 contra ~6:1 */
.bg-dark .comparison-table__check,
.bg-dark .check-list__icon::before,
.hero-dark .check-list__icon::before { color: var(--rd-teal); }

/* .contact-section a pintava tudo de teal - e o unico <a> ali dentro e o
   proprio botao do WhatsApp, que tem fundo teal: o rotulo sumia. Com
   0,1,1 contra os 0,1,0 de .whatsapp-btn, era o seletor generico que
   ganhava. Ele nao tinha alvo legitimo, entao saiu. O par abaixo fica
   mais especifico que qualquer descendente de secao, para o rotulo nao
   voltar a ser repintado por engano. */
.contact-section .whatsapp-btn,
.contact-section .whatsapp-btn i {
  color: var(--rd-ink-deep);
}
.contact-section .whatsapp-btn:hover,
.contact-section .whatsapp-btn:hover i {
  color: var(--rd-ink-deep);
}

.whatsapp-btn {
  background: var(--rd-teal);
  color: var(--rd-ink-deep);
  border: 1px solid var(--rd-teal);
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 16px 30px;
}
.whatsapp-btn:hover { background: var(--rd-paper); border-color: var(--rd-paper); color: var(--rd-ink-deep); }
.contact-cta__number {
  font-family: var(--rd-display);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--rd-paper);
}

/* o padrao de bolinhas nao pertence a esta identidade */
.bg-pattern-dots { display: none !important; }

/* ---------- rodape ---------- */

.ds-footer {
  background: var(--rd-footer);
  color: var(--rd-muted-3);
  border-top: 1px solid var(--rd-line-2);
}
.ds-footer__col h5 {
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rd-muted);
}
.ds-footer__col a,
.ds-footer__tagline,
.ds-footer__copyright,
.ds-footer__cnpj {
  color: var(--rd-muted-3);
}
.ds-footer__col a {
  transition: color .25s, padding-left .25s;
}
.ds-footer__col a:hover {
  color: var(--rd-teal-deep);
  padding-left: 8px;
}
.ds-footer__divider { background: var(--rd-line); }
.ds-footer__cnpj,
.ds-footer__copyright {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .06em;
}

/* ============================================================
   Ajustes finos: componentes que nao cedem so com a troca de tokens
   ============================================================ */

:root {
  /* o "secundario" azul (#00699b) esta fora desta paleta: vira teal */
  --color-secondary-500: #00877a;
  --color-secondary-600: #00af9b;
  --color-secondary-700: #007063;
  --color-secondary-100: rgba(0, 175, 155, .1);
  --color-gray-50:       #efeee8;
  --color-primary-100:   rgba(0, 175, 155, .1);
  --color-primary-300:   #00af9b;
}

/* heros claros vinham com degrade cinza->branco */
.hero-section {
  background: var(--rd-paper);
  border-bottom: 1px solid var(--rd-line);
}

/* O destaque do titulo escuro e um degrade recortado no texto via
   background-clip. So trocar `color` nao adianta: o texto continua com
   -webkit-text-fill-color transparente e some. Desmonta os tres. */
.hero-dark__title-highlight {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--rd-teal);
}

.hero-dark {
  padding-top: var(--rd-section);
  padding-bottom: var(--rd-section);
}

/* o play sobre o screenshot continua redondo de proposito: e affordance
   de video, nao superficie de layout */
.shot-play__label {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(13, 16, 19, .72);
  border: 1px solid var(--rd-d-line-2);
  border-radius: 0;
}
.shot-play__veil {
  background: linear-gradient(180deg, rgba(13, 16, 19, .08) 0%, rgba(13, 16, 19, .04) 40%, rgba(13, 16, 19, .55) 100%);
}

.price-pill {
  border: 1px solid var(--rd-d-line-2);
  border-radius: 0;
  background: transparent;
  font-family: var(--rd-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--rd-d-muted);
}
.price-pill strong { color: var(--rd-paper); font-weight: 500; }
.price-pill__cta { color: var(--rd-teal); font-weight: 400; }
.price-card__sub { color: var(--rd-muted-2); }

.video-modal__backdrop { background: rgba(13, 16, 19, .88); }
.video-modal__close {
  border-radius: 0;
  background: rgba(244, 243, 238, .12);
  border: 1px solid var(--rd-d-line-2);
}
.video-modal__close:hover { background: rgba(244, 243, 238, .22); }

/* os modificadores de cor dos icones herdavam o azul secundario */
.icon-wrap--primary i,
.icon-wrap--secondary i,
.check-list-simple__item--primary i,
.check-list-simple__item--secondary i { color: var(--rd-teal-deep); }
.bg-dark .icon-wrap i,
.hero-dark .icon-wrap i { color: var(--rd-teal); }

/* o degrade do callout nao existe nesta identidade */
.callout-gradient {
  background: var(--rd-ink-deep);
  border: 1px solid var(--rd-d-line-2);
  color: var(--rd-paper);
}
.callout-gradient__title { font-family: var(--rd-display); font-weight: 500; letter-spacing: -.03em; color: var(--rd-paper); }
.callout-gradient__desc { color: var(--rd-d-muted); }

/* ============================================================
   Padroes trazidos da pagina Mapa de Vendas para a de Auditorias
   ============================================================ */

/* linhas numeradas, no lugar de caixas soltas - mesmo desenho das
   linhas de servico da home */
.rd-rows { border-top: 1px solid var(--rd-line-2); }
.rd-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--rd-line);
}
.rd-row__num {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--rd-muted);
  padding-top: 6px;
}
.rd-row__title {
  font-family: var(--rd-display);
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 0;
  color: var(--rd-ink);
}
.rd-row__desc {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--rd-muted-2);
  max-width: 62ch;
}

/* painel de especificacao: o equivalente do screenshot da pagina Mapa
   para uma pagina que nao tem captura de tela para mostrar */
.rd-spec {
  border: 1px solid var(--rd-line-2);
  background: var(--rd-surface);
}
.rd-spec__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rd-line);
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rd-muted);
}
.rd-spec__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--rd-teal-deep);
}
.rd-spec__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rd-teal);
}
.rd-spec__list { list-style: none; margin: 0; padding: 0 16px; }
.rd-spec__item {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20, 23, 26, .08);
}
.rd-spec__item:last-child { border-bottom: 0; }
.rd-spec__code {
  font-family: var(--rd-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.02em;
  color: var(--rd-ink);
}
.rd-spec__what {
  font-family: var(--rd-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--rd-muted-3);
}

/* grade em fio, sem caixa */
.rd-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rd-line-2);
}
.rd-grid3 > * {
  padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--rd-line);
  border-right: 1px solid var(--rd-line);
}
.rd-grid3 > *:last-child { border-right: 0; }
.rd-grid3 h3 {
  font-family: var(--rd-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: -.025em;
  margin: 14px 0 0;
}
.rd-grid3 p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--rd-muted-2); }
.rd-grid3 i { font-size: 20px; color: var(--rd-teal-deep); }

/* prosa alinhada ao resto */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 16px; }
.prose ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.prose li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--rd-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--rd-muted-3);
}
.prose li::before { content: "+"; color: var(--rd-teal); flex: none; }
.prose strong { color: var(--rd-ink); font-weight: 600; }

@media (max-width: 860px) {
  .rd-grid3 { grid-template-columns: 1fr; }
  .rd-grid3 > * { border-right: 0; }
  .rd-row { grid-template-columns: 44px 1fr; }
  .rd-spec__item { grid-template-columns: 66px 1fr; }
}

/* ============================================================
   FAQ — <details>/<summary> nativo.
   Motivo do <details>: o texto da resposta fica no HTML mesmo
   fechado, entao Google e motores de resposta (ChatGPT, Claude,
   Perplexity) leem tudo sem executar JavaScript, e o teclado
   funciona sem nenhum script. Pareado com schema FAQPage.
   ============================================================ */
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--rd-line);
}

.faq-item {
  border-bottom: 1px solid var(--rd-line);
}

.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--rd-display);
  font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--rd-ink);
  transition: color .18s ease;
}

.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--rd-teal-deep); }
.faq-item__q:focus-visible {
  outline: 2px solid var(--rd-teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Sinal de abrir/fechar: um "+" que vira "−" */
.faq-item__q::after {
  content: "+";
  margin-left: auto;
  flex: none;
  font-family: var(--rd-mono);
  font-size: 20px;
  line-height: 1.2;
  color: var(--rd-teal);
  transition: transform .18s ease;
}
.faq-item[open] > .faq-item__q::after { content: "−"; }
.faq-item[open] > .faq-item__q { color: var(--rd-teal-deep); }

.faq-item__a {
  padding: 0 46px 24px 4px;
}
.faq-item__a p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--rd-muted-3);
  margin: 0;
}
.faq-item__a p + p { margin-top: 12px; }
.faq-item__a a { color: var(--rd-teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.faq-item__a strong { color: var(--rd-ink); font-weight: 600; }

@media (max-width: 640px) {
  .faq-item__q { padding: 18px 2px; gap: 12px; }
  .faq-item__a { padding: 0 8px 20px 2px; }
}