/* ============================================================
   tribo-componentes.css — componentes compartilhados entre as páginas.

   Gerado em 12/09/2026. Entram aqui apenas as regras que existiam
   IDÊNTICAS em duas ou três folhas de página E apareciam uma única vez
   em cada uma. Regra declarada duas vezes na mesma folha (base +
   override adiante) NÃO entra: colapsá-la perde declarações. Foi assim
   que a primeira tentativa derrubou o .ig-band h2 de 42px para o padrão
   do navegador.

   Antes, uma correção no formulário ou no FAQ era feita em três lugares —
   o LEIA-ME já dizia "se mudar de um lado, mudar do outro". Agora aqui.

   Ordem de carga: tribo-base.css → ESTE → a folha da página.
   ============================================================ */
.ga-auth{background:var(--sl-sage-dark);position:relative;overflow:hidden}
.ga-auth::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 85% 50%,rgba(164,151,112,.18),transparent 70%);pointer-events:none}
.ga-auth .container{position:relative}
.ga-auth-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center}
.ga-auth h2{font-size:clamp(28px,3.4vw,40px);margin:16px 0 14px}
.ga-auth-lead{font-size:16px;line-height:1.65;color:var(--sl-gray-600);margin:0 0 26px;max-width:520px}
.ga-stats{display:flex;flex-direction:column;gap:12px}
.ga-stat{display:grid;grid-template-columns:176px minmax(0,1fr);border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:#fff;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.ga-stat:hover{transform:translateX(4px);box-shadow:var(--sl-shadow-md)}
.ga-stat > b{display:flex;align-items:center;justify-content:center;gap:.22em;flex-wrap:wrap;background:var(--sl-forest);color:#fff;font-size:clamp(19px,1.9vw,23px);font-weight:800;letter-spacing:-0.03em;padding:18px 10px;line-height:1;text-align:center;white-space:nowrap}
.ga-stat > b span{font:inherit;color:inherit}
.ga-stat > span{display:block;align-self:center;padding:14px 18px;font-size:15px;line-height:1.4;color:var(--sl-gray-600);font-weight:500}
.ga-stat > span strong{color:var(--sl-forest);font-weight:700}
.ga-mapa-wrap{position:relative;width:100%;max-width:600px;margin:0 auto}
.ga-mapa{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(20,20,20,.08))}
.ga-mapa .uf{fill:url(#dots-off);stroke:var(--sl-sage-dark);stroke-width:3;stroke-linejoin:round;transition:fill .3s var(--ease);cursor:default}
.ga-mapa .uf.on{fill:url(#dots-on);animation:ga-uf-in .55s cubic-bezier(.22,.61,.36,1);transform-box:fill-box;transform-origin:center}
@keyframes ga-uf-in{
  0%{transform:scale(.94);filter:brightness(1.6)}
  60%{transform:scale(1.03)}
  100%{transform:none;filter:none}
}
.ga-mapa .uf:hover,.ga-mapa .uf.is-hover{fill:url(#dots-off-dark)}
.ga-mapa .uf.on:hover,.ga-mapa .uf.on.is-hover{fill:url(#dots-on-dark)}
.ga-mapa .pin .hit{fill:transparent;cursor:pointer}
.ga-tip{position:absolute;z-index:3;pointer-events:none;background:#fff;color:var(--sl-forest);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 14px;box-shadow:var(--sl-shadow-lg);min-width:150px;transform:translate(-50%,calc(-100% - 16px));transition:opacity .15s var(--ease);white-space:nowrap}
.ga-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#fff;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:translateX(-50%) rotate(45deg)}
.ga-tip b{display:block;font-size:14px;font-weight:800;letter-spacing:-0.01em}
.ga-tip span{display:block;font-size:12px;color:var(--sl-gray-500);margin-top:2px}
.ga-tip span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sl-olive);margin-right:6px;vertical-align:1px;font-style:normal}
.ga-tip.off span i{background:rgba(20,20,20,.25)}
.ga-mapa-reveal{transform:none}
.ga-mapa-ufs{opacity:0;transition:opacity .9s var(--ease)}
.sl-in .ga-mapa-ufs{opacity:1}
.ga-mapa .pin{opacity:0;transform-box:fill-box}
.ga-mapa.pins-on .pin{animation:ga-pin .5s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes ga-pin{
  from{opacity:0}
  to{opacity:1}
}
.ga-mapa .pin .dot{fill:var(--sl-olive);stroke:#fff;stroke-width:2;transition:transform .2s var(--ease);transform-box:fill-box;transform-origin:center}
.ga-mapa .pin:hover .dot{transform:scale(1.35);fill:var(--sl-forest)}
.ga-mapa .pin .pulse{fill:none;stroke:var(--sl-olive);stroke-width:1.6;transform-box:fill-box;transform-origin:center;animation:ga-pulse-pin 2.4s ease-out infinite;animation-delay:calc(var(--i,0) * 260ms)}
@keyframes ga-pulse-pin{
  0%{transform:scale(.5);opacity:1}
  100%{transform:scale(2.4);opacity:0}
}
.ga-mapa-cap{position:absolute;left:0;bottom:8%;max-width:190px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid var(--border);border-radius:var(--r-xl);padding:14px 16px;box-shadow:var(--sl-shadow-md)}
.ga-mapa-cap b{display:block;white-space:nowrap;font-size:26px;font-weight:800;letter-spacing:-0.03em;color:var(--sl-forest);line-height:1}
.ga-mapa-cap b span{font:inherit;color:inherit;display:inline;margin:0}
.ga-mapa-cap > span{display:block;font-size:12.5px;color:var(--sl-gray-600);margin-top:4px;line-height:1.35}
.ga-mapa-leg{display:flex;gap:18px;justify-content:center;margin-top:14px;font-size:12.5px;color:var(--sl-gray-600)}
.ga-mapa-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.ga-mapa-leg .on i{background:var(--sl-olive-dark)}
.ga-mapa-leg .off i{background:rgba(20,20,20,.3)}
.ga-mapa-leg .pn i{background:var(--sl-olive);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--sl-olive)}
@media (max-width:720px){
  .ga-auth h2{margin-bottom:12px}
  .ga-auth-lead{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){
  .ga-mapa-ufs{opacity:1;transition:none}
  .ga-mapa .uf.on{animation:none}
  .ga-mapa .pin{opacity:1;animation:none}
  .ga-mapa .pin .pulse{animation:none;opacity:.5}
}
@media (max-width:960px){
  .ga-auth-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .ga-mapa-wrap{max-width:460px}
}
@media (max-width:520px){
  .ga-stat{grid-template-columns:132px minmax(0,1fr)}
  .ga-stat > b{font-size:17px;padding:16px 6px}
  .ga-stat > span{font-size:14px;padding:12px 14px}
  .ga-mapa-cap{position:static;max-width:none;margin-top:14px;display:flex;align-items:center;gap:12px}
  .ga-mapa-cap > span{margin:0}
}
.ig-plan-photo{position:sticky;top:100px;margin:0}
.ig-plan-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sl-olive)}
.ig-plan-group::after{content:"";flex:1;height:1px;background:var(--border)}
.ig-plan-value{flex:0 0 auto;display:inline-flex;align-items:center}
@media (max-width:960px){
  .ig-plan-photo{position:static}
  .ig-plan-cta{width:100%}
}
@media (max-width:480px){
  .ig-plan-row{align-items:flex-start}
  .ig-plan-value{margin-top:1px}
  .ig-plan-label{gap:10px;align-items:flex-start}
  .ig-plan-ico{margin-top:2px}
}

@keyframes igSweep{
  0%{transform:translateX(-60%) rotate(12deg)}
  100%{transform:translateX(160%) rotate(12deg)}
}
@media (prefers-reduced-motion:reduce){
  
}



@media (max-width:480px){
  
}
main{counter-reset:sec}
.section-header > *{position:relative;z-index:1}

/* ===================== FORMULARIO DE REUNIAO =====================
   Uma cópia só, para as três páginas. Antes vivia triplicado nas folhas
   de página, porque o dedupe de 12/09 só movia seletor que aparecesse
   uma única vez por folha — e o formulário declara quase tudo duas
   vezes: a regra base e o acerto que veio depois.

   Triplicado, divergiu. Acertos que existiam na Assessoria e no Google
   Ads nunca chegaram ao Instagram: o filete acima do botão, a altura de
   54px do botão, o white-space:nowrap que impedia a quebra do rótulo, o
   align-self:start dos campos, o display:flex do alerta de erro (sem ele
   o ícone e o texto não se alinhavam) e a altura de campo no celular.
   Ao unificar, o Instagram recebeu todos. (14/09/2026)

   A ordem abaixo é a da Assessoria antes do dedupe, preservada regra a
   regra: aqui a segunda declaração de um seletor é que vale, e inverter
   duas linhas muda a aparência sem dar erro de sintaxe.
   ================================================================ */
/* O scroll-margin-top:90px daqui saiu em 21/09/2026 pelo mesmo motivo do
   assessoria.css: somava com o html{scroll-padding-top} e o cartao do
   formulario parava 168px abaixo do topo. Vale para a home, a de Google
   Ads e a de Instagram, que sao as tres que usam .mp-form-wrap. */
@media (max-width:960px){
  .mp-form-legal a{display:inline-block;padding:6px 0}
}
.mp-form-sec{background:var(--sl-sage-dark);position:relative}
.mp-form-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(164,151,112,.6),transparent)}
.mp-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 16px}
.mp-form .field{--fld-gap:6px;--fld-h:50px;display:flex;flex-direction:column;gap:6px}
.mp-form .field.full{grid-column:1 / -1}
.mp-form label{font-size:13px;font-weight:700;color:var(--sl-forest);letter-spacing:.01em}
.mp-form label small{font-weight:500;color:var(--fg-muted);margin-left:4px}
.mp-form label .req{color:var(--sl-olive-text)}
/* A BORDA DO CAMPO E O TAMANHO DO TEXTO            (22/09/2026)

   BORDA: era --sl-gray-200 (#e8e3d6), que da 1,22:1 contra o preenchimento
   do campo e 1,28:1 contra o cartao. O WCAG 1.4.11 pede 3:1 para o contorno
   de um componente de interface — o campo era praticamente sem borda, e
   quem enxerga pouco nao via onde clicar. --sl-olive-dark e o tom mais
   CLARO da paleta que passa dos dois lados: 3,86:1 e 4,07:1. Os que ja
   estavam no arquivo e reprovam: --sl-gray-300 (1,75) e --sl-olive (2,90).

   TAMANHO: era 15px aqui e subia para 16px so abaixo de 640px. O iOS da
   zoom sozinho em qualquer campo abaixo de 16px, em QUALQUER largura — um
   iPad a 768px caia no zoom. O 16px subiu para a regra base e os dois
   blocos de 640px ficaram sem funcao. */
.mp-form input,.mp-form select{width:100%;border:1.5px solid var(--sl-olive-dark);border-radius:var(--r-lg);padding:13px 14px;font-size:16px;color:var(--sl-forest);background:var(--sl-off-white);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.mp-form input:hover,.mp-form select:hover{border-color:var(--sl-gray-300)}
.mp-form input:focus,.mp-form select:focus{border-color:var(--sl-olive);box-shadow:0 0 0 3px rgba(164,151,112,.2);background:#fff}
.mp-form .field.is-erro input,.mp-form .field.is-erro select{border-color:#c0392b;background:#fff8f8}
.mp-form .msg-erro{font-size:12.5px;color:#c0392b;min-height:0}
.mp-form .field.is-erro .msg-erro{min-height:16px}
.mp-form .hp{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;overflow:hidden}
.mp-form-actions{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.mp-form-actions .btn{width:100%}
.mp-form-legal{font-size:12.5px;color:var(--fg-muted);line-height:1.55}
.mp-form-legal a{text-decoration:underline;text-underline-offset:2px}
.mp-form-alert{grid-column:1 / -1;background:#f7e8e8;color:#a14040;border:1px solid #e9c7c7;border-radius:var(--r-lg);padding:12px 14px;font-size:14px;font-weight:600}
@media (max-width:640px){
  .mp-form{grid-template-columns:minmax(0,1fr);padding:24px 16px;border-radius:var(--r-xl)}
  .mp-form input,.mp-form select{font-size:16px}
}
.mp-form .field{position:relative}
.mp-form .field.is-ok::after{content:"";position:absolute;right:15px;top:auto;bottom:calc(var(--fld-gap) + (var(--fld-h) - 18px) / 2);width:18px;height:18px;border-radius:50%;background:#1a8754 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat;animation:mp-pop .25s var(--ease);pointer-events:none}
.mp-form .field.is-ok:has(select)::after{right:40px}
.mp-form .field.is-ok input,.mp-form .field.is-ok select{padding-right:42px}
.mp-form .field.is-ok select{padding-right:64px}
.mp-form .field.is-ok input,.mp-form .field.is-ok select{border-color:rgba(26,135,84,.5)}
.mp-form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6e4c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;cursor:pointer}
.mp-form select:disabled{color:var(--fg-muted);cursor:not-allowed;background-color:var(--sl-gray-100)}
.mp-form select option{color:var(--sl-forest)}
.mp-form .field.is-hidden{display:none}
.mp-form .field.is-loading select{background-image:none}
.mp-form .field.is-loading::after{content:"";position:absolute;right:15px;top:auto;bottom:calc(var(--fld-gap) + (var(--fld-h) - 16px) / 2);width:16px;height:16px;border-radius:50%;border:2px solid var(--sl-gray-200);border-top-color:var(--sl-olive);animation:mp-spin .8s linear infinite}
.mp-form .field.is-erro input,.mp-form .field.is-erro select{border-color:#c0392b;background-color:#fff8f8}
.mp-form .field.is-erro label{color:#a14040}
.mp-form .msg-erro{transition:opacity var(--dur-fast) var(--ease)}
.mp-form input:invalid,.mp-form select:invalid{box-shadow:none}
.mp-form{gap:10px 20px;align-items:start}
.mp-form .field{gap:6px}
.mp-form label{display:flex;align-items:baseline;gap:8px;font-size:13px;letter-spacing:.01em}
.mp-form label small{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sl-olive-text);background:var(--sl-sage);border-radius:var(--r-pill);padding:2px 8px}
.mp-form input,.mp-form select{height:var(--fld-h);padding:0 14px;line-height:48px;border-radius:var(--r-lg)}
.mp-form select{line-height:normal;padding-right:44px}
/* O placeholder era --sl-gray-300 (#c5beb0): 1,75:1 sobre o campo, menos
   da metade dos 4,5:1. E ele carrega informacao que nao existe em outro
   lugar da tela — e o placeholder do WhatsApp que ensina o formato.
   --sl-gray-500 da 5,13:1 e continua bem mais claro que o texto digitado,
   que esta a 15,9:1. (21/09/2026) */
.mp-form input::placeholder{color:var(--sl-gray-500)}
.mp-form .msg-erro{display:block;min-height:0;line-height:1.35;overflow:hidden;max-height:0;transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease);opacity:0}
.mp-form .field.is-erro .msg-erro{max-height:48px;opacity:1;min-height:0}
.mp-form-alert{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.mp-form-alert svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.mp-form .field.mp-form-actions{margin-top:4px;gap:34px}
.mp-form-actions .btn{height:54px}
@media (max-width:640px){
  .mp-form{gap:9px 18px}
  .mp-form label{font-size:12.5px}
  .mp-form .field{--fld-h:52px}
  .mp-form input,.mp-form select{height:var(--fld-h);line-height:50px;font-size:16px}
  .mp-form select{line-height:normal}
  .mp-form-actions .btn{height:56px;font-size:16px}
  .mp-form-legal{font-size:12px;text-align:center}
  .mp-form-sec .container{padding:0 12px}
}
.mp-form .field{align-self:start}
.mp-form .field.full{grid-column:1 / -1}
.mp-form .field + .field{margin-top:0}
.mp-form-actions{border-top:1px solid var(--sl-gray-100);padding-top:22px;margin-top:6px}
@media (max-width:640px){
  .mp-form-actions{padding-top:18px;margin-top:2px}
}
.mp-form-legal{margin-top:2px}
@media (max-width:640px){
  .mp-form .field.mp-form-actions{gap:30px}
}
.mp-form-sec::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 400px at 18% 100%,rgba(164,151,112,.18),transparent 70%);pointer-events:none}
.mp-form-sec .container{position:relative;z-index:1}
.mp-form-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:stretch;max-width:1120px;margin:0 auto}
.mp-form-aside{background:var(--sl-forest);color:#fff;border-radius:var(--r-2xl);padding:40px 36px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.mp-form-aside::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(164,151,112,.32),transparent 65%);pointer-events:none}
.mp-form-aside > *{position:relative;z-index:1}
.mp-form-aside .eyebrow{color:var(--sl-amber-light)}
.mp-form-aside h2{color:#fff;font-size:clamp(26px,2.9vw,34px);margin:16px 0 14px;letter-spacing:-0.03em;line-height:1.12;text-wrap:wrap}
.mp-form-aside > p{font-size:15.5px;line-height:1.65;color:rgba(245,242,236,.72)}
.mp-aside-foto{margin:26px 0 4px;position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid rgba(164,151,112,.28)}
.mp-aside-foto img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:50% 18%;display:block}
.mp-aside-foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,transparent,rgba(14,14,14,.92));pointer-events:none}
.mp-aside-foto figcaption{position:absolute;left:18px;right:18px;bottom:14px;z-index:2;font-size:12.5px;line-height:1.4;color:rgba(245,242,236,.72)}
.mp-aside-foto figcaption b{display:block;color:#fff;font-size:14.5px;letter-spacing:-0.01em}
.mp-form-aside ol{list-style:none;margin:22px 0 auto;padding:0;display:flex;flex-direction:column;gap:0}
.mp-form-aside li{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:rgba(245,242,236,.85);padding:15px 0}
.mp-form-aside li + li{border-top:1px solid rgba(245,242,236,.10)}
.mp-form-aside li:first-child{padding-top:0}
.mp-form-aside li:last-child{padding-bottom:0}
.mp-form-aside li b{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(164,151,112,.6);color:var(--sl-amber-light);font-size:12.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.mp-form-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:34px 26px 30px;box-shadow:var(--sl-shadow-lg)}
.mp-form-head h2{font-size:clamp(22px,2.5vw,28px);margin:0 0 8px;letter-spacing:-0.025em}
.mp-form-head p{font-size:15px;line-height:1.6;color:var(--sl-gray-600)}
.mp-form-time{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--sl-olive-text);background:var(--sl-sage);border-radius:var(--r-pill);padding:7px 13px;margin:18px 0 22px}
.mp-form-time svg{width:14px;height:14px}
@media (max-width:960px){
  .mp-form-layout{grid-template-columns:minmax(0,1fr);gap:20px}
  .mp-form-aside{padding:32px 26px}
  .mp-aside-foto{margin:22px 0 2px}
  .mp-aside-foto img{aspect-ratio:16 / 10}
}
@media (max-width:640px){
  .mp-form-wrap{padding:22px 14px 22px;border-radius:var(--r-xl)}
  .mp-form-aside{padding:26px 18px;border-radius:var(--r-xl)}
  .mp-form-time{margin:16px 0 18px}
}
.mp-form-actions .btn{white-space:nowrap;padding-left:18px;padding-right:18px}
@media (max-width:400px){
  .mp-form-actions .btn{font-size:15px;gap:8px}
}
/* Abaixo de 380px o rotulo pode quebrar. O nowrap e o overflow:hidden do
   .btn-primary cortavam "Agendar reuniao estrategica" a 320px nas quatro
   paginas, e a 360px (Android comum) no Diagnostico (29/09/2026). */
@media (max-width:380px){
  .mp-form-actions .btn{white-space:normal;height:auto;min-height:54px;padding-top:12px;padding-bottom:12px;line-height:1.25;text-align:center}
}


.mp-faq{background:var(--sl-off-white)}
.mp-faq .section-header{position:sticky;top:100px;margin-bottom:0}
.mp-faq .section-header .btn{margin-top:20px}
.section-header.left::before{left:0;transform:none}
/* Duas colunas: cabeçalho fixo à esquerda, lista à direita. Estava escrito
   nas três folhas de página; veio para cá em 14/09/2026 na versão do Google
   Ads, com minmax(0,...), que impede uma pergunta longa de empurrar a grade. */
.mp-faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
@media (max-width:960px){
  .mp-faq-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
}
.mp-faq-list{border-top:1px solid var(--border);counter-reset:faq}
.mp-faq-item{border-bottom:1px solid var(--border);counter-increment:faq}
.mp-faq-item h3{margin:0;font:inherit;letter-spacing:inherit}
.mp-faq-q{width:100%;background:none;border:0;padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:0;text-align:left;cursor:pointer;font-family:inherit;font-size:17px;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--sl-forest);transition:color var(--dur) var(--ease)}
.mp-faq-q:hover{color:var(--sl-olive)}
.mp-faq-q::before{content:counter(faq,decimal-leading-zero);flex:0 0 auto;margin-right:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--sl-olive-text);opacity:.8}
.mp-faq-q > span:not(.chev){flex:1 1 auto;min-width:0}
.mp-faq-q .chev{margin-left:24px;flex:0 0 16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:300;line-height:1;color:var(--sl-olive);transition:transform var(--dur) var(--ease)}
.mp-faq-item.is-open>h3>.mp-faq-q{color:var(--sl-olive-text)}
.mp-faq-item.is-open>h3>.mp-faq-q::before{opacity:1}
.mp-faq-item.is-open>h3>.mp-faq-q .chev{transform:rotate(45deg)}
.mp-faq-a{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;padding-bottom:0;transition:grid-template-rows .42s var(--ease),opacity .34s var(--ease),padding-bottom .42s var(--ease),visibility .42s var(--ease)}
.mp-faq-a>div{min-height:0;overflow:hidden}
.mp-faq-a p{margin:0;padding-right:40px;font-size:15px;line-height:1.72;color:var(--sl-gray-600)}
.mp-faq-item.is-open>.mp-faq-a{grid-template-rows:1fr;opacity:1;visibility:visible;padding-bottom:27px}
/* O FAQ sobre fundo escuro. O componente nasceu para fundo claro — as tres
   primeiras paginas poem o FAQ numa secao off-white. A landing de Site para
   Medicos e a primeira com FAQ dentro de uma secao .on-dark, e trouxe os
   valores que ela ja usava. Sem isto a pergunta sai #141414 sobre #141414.
   (14/09/2026 — e em 21/09/2026 aquele FAQ clareou, entao hoje nenhuma
   pagina exercita este caminho. Ver o bloco .on-dark .mp-faq-* no fim.) */
/* Destas, so o ::before sobreviveu a virada para cartoes em 20/09/2026: as
   outras cinco (borda da lista, borda de baixo do item, cor da pergunta,
   cor no hover e cor da pergunta aberta) eram reescritas pela variante
   .on-dark no fim deste arquivo. Regra que nunca vence e pior que regra
   ausente: ela faz o leitor acreditar que manda em alguma coisa. */
.on-dark .mp-faq-q::before{color:var(--sl-amber-light)}
.on-dark .mp-faq-item.is-open>h3>.mp-faq-q::before{color:var(--sl-amber-light)}
.on-dark .mp-faq-a p{color:rgba(245,242,236,.78)}
.on-dark .mp-faq-a strong{color:#f5f2ec}
@media (prefers-reduced-motion:reduce){
  .mp-faq-a{transition-duration:1ms}
}
@media (max-width:960px){
  .mp-faq .section-header{position:static}
}
@keyframes mp-pop{
  from{transform:scale(.4);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes mp-spin{
  to{transform:rotate(360deg)}
}

/* ========================== CARTÃO ==========================
   Superfície branca, borda de 1px, filete dourado que entra no hover,
   ladrilho de ícone, h3 e p. O mesmo componente tinha quatro nomes —
   .mp-card, .ga-card, .ig-card, .feat-card — e quatro medidas: padding
   32/30, 30/28, 28/26 e 26/22; raio 16 e 24; texto 15px #4a4a4a,
   14,5px e 14px #6a6a6a. São 40 cartões em quatro páginas.

   Valeu o que 2 das 3 páginas de referência já faziam; em empate, a
   Assessoria. As contas estão no LEIA-ME. (14/09/2026)
   ============================================================ */
.tb-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:32px 30px;overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tb-card::before{content:"";position:absolute;left:30px;right:30px;top:0;height:2px;background:linear-gradient(90deg,var(--sl-olive),var(--sl-amber-light));border-radius:0 0 2px 2px;transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease)}
.tb-card:hover{transform:translateY(-4px);box-shadow:var(--sl-shadow-md);border-color:var(--sl-amber-light)}
.tb-card:hover::before{transform:scaleX(1)}
.tb-card .ico{width:48px;height:48px;border-radius:var(--r-xl);background:var(--sl-sage);display:flex;align-items:center;justify-content:center;color:var(--sl-olive-text);margin-bottom:20px;flex-shrink:0;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tb-card:hover .ico{background:var(--sl-forest);color:var(--sl-amber-light);transform:rotate(-4deg)}
.tb-card .ico svg{width:22px;height:22px}
.tb-card h3{font-size:var(--fs-h3);margin-bottom:10px;letter-spacing:-0.015em}
.tb-card p{font-size:15px;line-height:1.62;color:var(--sl-gray-600)}
@media (max-width:640px){
  .tb-card{padding:24px 22px}
}

/* ========================= FAIXA DE CTA =========================
   O painel escuro com chamada centrada, no fim da pagina. Tinha dois nomes e
   dois desenhos: .mp-faixa na Assessoria (h2 46px, p 17px, fundo chapado com
   um radial) e .ig-band no Google Ads e no Instagram (h2 42px, p 16,5px,
   gradiente com ruido e filete). Pendencia aberta desde 12/09/2026.

   Agora o .on-dark da base ja da malha, ruido e filete — a faixa nao precisa
   pintar superficie nenhuma. Ficou so a composicao centrada, e a marcacao
   passou a ser <section class="section on-dark tb-band">.

   Valores por maioria: h2 42px e p 16,5px (2 de 3). (14/09/2026)
   ============================================================ */
.tb-band{text-align:center}
.tb-band > .container{position:relative;z-index:1;max-width:840px;counter-increment:sec}
.tb-band .eyebrow::before{content:counter(sec,decimal-leading-zero);display:inline-block;width:auto;height:auto;background:none;border-radius:var(--r-sm);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;font-weight:700;letter-spacing:.08em;line-height:1;padding:4px 7px;color:var(--sl-amber-light);border:1px solid rgba(201,194,171,.4)}
.tb-band .eyebrow{color:var(--sl-amber-light);justify-content:center}
.tb-band h2{color:#fff;font-size:clamp(28px,3.6vw,42px);margin:18px 0 16px}
.tb-band p{color:rgba(245,242,236,.75);font-size:16.5px;line-height:1.65;max-width:620px;margin:0 auto 30px}
.tb-band .micro{font-size:13px;color:rgba(245,242,236,.55);margin-top:16px}
.tb-band-provas{list-style:none;margin:30px auto 0;padding:26px 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:14px 26px;border-top:1px solid rgba(245,242,236,.12)}
.tb-band-provas li{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:rgba(245,242,236,.82);white-space:nowrap}
.tb-band-provas svg{width:18px;height:18px;color:var(--sl-amber-light);flex-shrink:0}
@media (max-width:720px){
  .tb-band-provas{max-width:520px}
}
@media (max-width:560px){
  .tb-band .btn{width:100%;max-width:420px}
  .tb-band-provas{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:340px;margin:28px auto 0;padding:0;border-top:0;border:1px solid rgba(245,242,236,.14);border-radius:var(--r-lg);overflow:hidden;background:rgba(255,255,255,.03)}
  .tb-band-provas li{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:16px 12px;font-size:13px;line-height:1.35;white-space:normal;border-right:1px solid rgba(245,242,236,.14);border-bottom:1px solid rgba(245,242,236,.14)}
  .tb-band-provas li:nth-child(2n){border-right:0}
  .tb-band-provas li:nth-last-child(-n+2){border-bottom:0}
  .tb-band-provas svg{width:20px;height:20px}
}

/* ============================================================
   FAQ EM CARTOES — a camada visual do .mp-faq

   Troca o desenho de lista com filetes por cartoes. NAO toca no JS, no
   markup nem na mecanica: o acordeao exclusivo, o grid-template-rows
   0fr->1fr, o aria-expanded e a medicao faq_abrir seguem como estao.

   VEM NO FIM DO ARQUIVO de proposito: varias regras aqui tem a MESMA
   especificidade das antigas (.mp-faq-item.is-open>h3>.mp-faq-q, por
   exemplo), entao quem vence e quem vier depois. Nenhuma usa !important.

   Executado em 20/09/2026 a partir do PROMPT-faq-cartoes.md, com DUAS
   divergencias do que aquele documento pedia. As duas estao anotadas onde
   acontecem, e o motivo e o mesmo nas duas: o documento foi escrito antes
   das decisoes da semana, e executar spec velha ao pe da letra e como nao
   ter spec.

   POR QUE A BORDA EXISTE AQUI e nao existe no card do blog: a secao tem
   fundo --sl-off-white (#faf9f5) e o cartao e #fff. Isso da 1,03:1 — sem o
   fio, o cartao nao se ve, e a mudanca inteira perderia o sentido. O card
   do blog pousa sobre #f6f4ef, mais fundo, e ali o branco se sustenta
   sozinho; foi por isso que a moldura saiu de la em 18/09 e fica aqui.
   ============================================================ */

/* --- A lista perde o filete de topo: cartao nao encosta em regua --- */
.mp-faq-list{
  border-top:0;
  counter-reset:faq;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* --- Cada pergunta e um cartao --- */
.mp-faq-item{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-bottom:1px solid var(--border);   /* anula o filete da regra antiga */
  border-radius:var(--r-lg);
  overflow:hidden;
  counter-increment:faq;
  transition:border-color var(--dur) var(--ease);
}
/* DIVERGENCIA 1 — o box-shadow do prompt nao entrou, nem no hover nem no
   aberto. Com a borda mudando de cor E o trilho dourado nascendo, a sombra
   seria o TERCEIRO sinal do mesmo estado. E o mesmo raciocinio que tirou a
   sombra do card do blog em 18/09: tres separadores para um trabalho so. */
.mp-faq-item:hover{ border-color:var(--sl-gray-300,#cfc9bd); }
.mp-faq-item.is-open{ border-color:var(--sl-gray-300,#cfc9bd); }

/* Trilho dourado a esquerda: cresce de cima para baixo ao abrir */
.mp-faq-item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:linear-gradient(180deg,var(--sl-olive),var(--sl-amber-light));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .3s var(--ease);
}
.mp-faq-item.is-open::before{ transform:scaleY(1); }

/* --- A pergunta --- */
.mp-faq-q{
  padding:18px 18px 18px 22px;
  font-size:15.5px;
  font-weight:500;                 /* era 600; o Medium existe e esta declarado */
  letter-spacing:0;
  color:var(--sl-gray-600);        /* #4a4a4a sobre branco: 8,86:1 */
  transition:color var(--dur) var(--ease),
             padding-left var(--dur) var(--ease);
}
.mp-faq-q:hover{ color:#2e2e2e; }
/* A pergunta aberta NAO muda de cor: quem sinaliza estado e o trilho e o
   botao. Cor de destaque em texto longo prejudica a leitura. */
.mp-faq-item.is-open > h3 > .mp-faq-q{
  color:var(--sl-gray-600);
  padding-left:26px;
}
.mp-faq-q:focus-visible{
  outline:3px solid var(--sl-forest);
  outline-offset:-3px;
  border-radius:var(--r-lg);
}

/* Sem opacidade: .75 levava o numeral a 3,09:1 sobre o cartao branco. Em
   cheio, --sl-olive-text da 5,05:1. A discricao vem do corpo de 11px, nao
   de transparencia. */
.mp-faq-q::before{
  margin-right:12px;
  font-size:11px;
  opacity:1;
}

/* --- O botao + / x --- */
.mp-faq-q .chev{
  margin-left:16px;
  flex:0 0 26px;
  width:26px;
  height:26px;
  border:1px solid var(--border);
  border-radius:50%;
  background:transparent;
  font-size:17px;
  font-weight:400;
  color:var(--sl-gray-600);
  transition:transform .32s var(--ease),
             background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}
.mp-faq-q:hover .chev{
  border-color:var(--sl-gray-300,#cfc9bd);
  background:var(--sl-gray-100,#f4f2ee);
  color:#2e2e2e;
}
.mp-faq-item.is-open > h3 > .mp-faq-q .chev{
  transform:rotate(45deg);          /* o + vira x — mecanica original mantida */
  background:var(--sl-sage);
  border-color:var(--sl-sage-dark,#e6e0d3);
  color:var(--sl-gray-600);
}

/* --- A resposta --- */
.mp-faq-a p{
  padding-right:22px;
  font-size:15px;
  line-height:1.72;
  color:var(--sl-gray-600);
}
.mp-faq-item.is-open > .mp-faq-a{ padding-bottom:0; }
/* O respiro interno vai para o wrapper, para o cartao fechar certo */
.mp-faq-a > div{ padding:0 18px 18px 22px; }
/* O botao mora dentro do <h3>, entao ele NAO e irmao do .mp-faq-a. Um
   seletor com "+" aqui nunca casaria e a resposta ficaria desalinhada. */
.mp-faq-item.is-open > .mp-faq-a > div{ padding-left:26px; }

/* Filete curto separando pergunta e resposta */
.mp-faq-a > div > p:first-child::before{
  content:"";
  display:block;
  width:26px;
  height:1px;
  background:var(--sl-gray-300,#cfc9bd);
  margin:0 0 13px;
}

/* A variante para fundo escuro esta no FIM deste arquivo. Ela e obrigatoria:
   o FAQ de site-para-medicos.php e escuro. Nao se descobre isso olhando a
   pagina — ela nao contem "mp-faq"; quem contem e o partial que ela inclui. */

/* ============================================================
   Celular — UM breakpoint, e nao tres.
   Antes o componente tinha 680 (componentes), 720 (google-ads) e 768, com
   os dois primeiros byte a byte iguais e o da pagina vencendo por ordem de
   carga. O padding:19px 0 daquele bloco zerava o respiro lateral do cartao
   em qualquer tela <=720px — o defeito que o Passo 1 do prompt existia para
   evitar. Os dois sairam; ficou este.
   ============================================================ */
@media (max-width:768px){
  .mp-faq-list{ gap:8px; }
  .mp-faq-q{
    padding:15px 15px 15px 18px;
    font-size:15px;
  }
  .mp-faq-item.is-open > h3 > .mp-faq-q{ padding-left:21px; }
  .mp-faq-q::before{ margin-right:10px; }
  .mp-faq-q .chev{ margin-left:12px; flex:0 0 24px; width:24px; height:24px; font-size:16px; }
  .mp-faq-a > div{ padding:0 15px 15px 18px; }
  .mp-faq-item.is-open > .mp-faq-a > div{ padding-left:21px; }
  .mp-faq-a p{ padding-right:0; font-size:14.5px; }
}

@media (prefers-reduced-motion:reduce){
  .mp-faq-item,
  .mp-faq-item::before,
  .mp-faq-q,
  .mp-faq-q .chev{ transition-duration:1ms; }
}

/* ============================================================
   FAQ EM CARTOES · variante sobre fundo escuro (.on-dark)

   O cartao branco vira VIDRO: fundo translucido e borda de luz. Sem isto o
   .mp-faq-item{background:#fff} la de cima pousaria um cartao branco sobre
   a secao escura.

   NENHUMA PAGINA USA ESTA VARIANTE HOJE. Ela nasceu para o FAQ da landing de
   Site para Medicos, que era a unica com FAQ dentro de uma secao escura. Em
   21/09/2026 aquele FAQ clareou — a pagina passou a alternar claro e escuro
   de ponta a ponta — e a secao virou <section class="section sec-clara
   sec-creme lp-faq" id="faq">.

   O bloco fica, e de proposito: ele e o custo de UMA folha compartilhada
   servir cinco paginas, e a proxima que puser FAQ sobre fundo escuro vai
   precisar dele inteiro. Mas quem vier depurar "por que o FAQ escuro nao
   muda" precisa saber que nao ha FAQ escuro para mudar.
   ============================================================ */
.on-dark .mp-faq-list{ border-top:0; }
.on-dark .mp-faq-item{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(245,242,236,.14);
  border-bottom:1px solid rgba(245,242,236,.14);
}
.on-dark .mp-faq-item:hover,
.on-dark .mp-faq-item.is-open{ border-color:rgba(245,242,236,.26); }
.on-dark .mp-faq-q,
.on-dark .mp-faq-item.is-open > h3 > .mp-faq-q{ color:#f5f2ec; }
.on-dark .mp-faq-q:hover{ color:#fff; }
.on-dark .mp-faq-q .chev{
  border-color:rgba(245,242,236,.22);
  color:var(--sl-amber-light);
}
.on-dark .mp-faq-q:hover .chev{
  background:rgba(245,242,236,.08);
  border-color:rgba(245,242,236,.34);
  color:#fff;
}
.on-dark .mp-faq-item.is-open > h3 > .mp-faq-q .chev{
  background:rgba(201,194,171,.16);
  border-color:rgba(201,194,171,.4);
  color:var(--sl-amber-light);
}
.on-dark .mp-faq-a > div > p:first-child::before{
  background:rgba(245,242,236,.22);
}
/* O anel de foco do bloco claro e --sl-forest, quase a mesma cor do fundo
   escuro: quem navega por teclado no FAQ de Sites nao veria nada. Com o
   ambar claro o anel sobe para 9,46:1. */
.on-dark .mp-faq-q:focus-visible{ outline-color:var(--sl-amber-light); }