/* ============================================================
   SANITAS — Direito a saude · Dra Mariana Maia
   Paleta extraida da marca M&M Solucoes Juridicas:
   marinho #282E43 (fundo do logo) + dourado #DBB67B (tracado).
   Escrito MOBILE FIRST: o padrao e o celular; as media queries
   so acrescentam para telas maiores.
   ============================================================ */

:root {
  /* Marca */
  --marinho: #282E43;
  --marinho-90: #1E2333;
  --marinho-70: #3A4159;
  --dourado: #DBB67B;
  /* Versao do dourado legivel sobre fundo claro. O #DBB67B tem contraste 1,9:1
     sobre branco e reprova WCAG AA — so pode ser fundo ou filete, nunca texto. */
  --dourado-txt: #8A6A32;
  --dourado-suave: #F6EEE1;

  /* Neutros */
  --fundo: #FAFAFA;
  --superficie: #FFFFFF;
  --texto: #1C2030;
  --texto-2: #55596B;
  --borda: #E4E1DA;

  /* Acao — verde do WhatsApp escurecido ate passar no contraste minimo.
     O #2D9152 do site institucional da 3,97:1 com texto branco e reprova
     WCAG AA; este da 4,58:1 e continua lendo como "verde do WhatsApp". */
  --wpp: #2D8552;
  --wpp-hover: #24703F;

  /* Estado — mesmos tons ja validados para contraste sobre branco */
  --ok: #2D8552;
  --nao: #8A6A32;

  --sombra: 0 2px 10px rgba(40, 46, 67, .08);
  --sombra-md: 0 8px 28px rgba(40, 46, 67, .12);
  --sombra-cta: 0 4px 14px rgba(45, 145, 82, .28);

  --raio: 14px;
  --raio-sm: 10px;
  --pilula: 50px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* espaco para a barra fixa nao cobrir o fim do rodape */
  padding-bottom: 76px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dourado-txt); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--marinho);
  outline-offset: 2px;
  border-radius: 4px;
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--marinho); color: #fff; padding: 12px 18px; z-index: 999;
}
.pular:focus { left: 8px; top: 8px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.wrap--estreito { max-width: 760px; }

.sec { padding: 52px 0; }
.sec--suave { background: var(--dourado-suave); }
.sec--escura { background: var(--marinho); color: #fff; }
.sec--escura .sec__t { color: #fff; }
.sec--escura .sec__p { color: rgba(255, 255, 255, .85); }
.sec--dourada { background: var(--dourado); color: var(--marinho); }

.sec__t {
  font-size: 24px;
  color: var(--marinho);
  text-align: center;
  margin-bottom: .6em;
}
.sec__t--esq { text-align: left; }
.sec__p { color: var(--texto-2); font-size: 16px; }
.sec__p--centro { text-align: center; margin-bottom: 1.6em; }

.olho {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: .8em;
}

.nota { font-size: 13px; color: var(--texto-2); margin: 0; }
.nota--clara { color: rgba(255, 255, 255, .7); text-align: center; margin-top: 14px; }

/* ---------- botoes ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--pilula);
  font-family: 'Assistant', 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.btn--wpp { background: var(--wpp); color: #fff; box-shadow: var(--sombra-cta); }
.btn--wpp:hover { background: var(--wpp-hover); }
.btn--wpp:active { transform: translateY(1px); }
.btn--sm { min-height: 42px; padding: 8px 16px; font-size: 15px; box-shadow: none; }
.btn--lg { min-height: 58px; font-size: 17px; }
.btn--xl { min-height: 62px; font-size: 18px; }
.btn--bloco { display: flex; width: 100%; }
.ico { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }
.btn--sm .ico { width: 18px; height: 18px; }

/* ---------- cabecalho ---------- */
.cab {
  position: sticky; top: 0; z-index: 50;
  background: var(--marinho);
  border-bottom: 2px solid var(--dourado);
}
.cab__in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px;
}
.marca { text-decoration: none; line-height: 1.1; }
.marca__nome {
  display: block;
  font-size: 21px; font-weight: 700; letter-spacing: .14em;
  color: var(--dourado);
}
.marca__sub {
  display: block;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}
.cab__dir { display: flex; align-items: center; gap: 12px; }
.cab__oab { display: none; font-size: 12px; color: rgba(255, 255, 255, .68); }

/* ---------- topo ---------- */
.hero {
  background: linear-gradient(170deg, var(--marinho) 0%, var(--marinho-90) 100%);
  color: #fff;
  padding: 32px 0 0;
  overflow: hidden;
}
.hero__h1 { font-size: 29px; color: #fff; margin-bottom: .45em; }
.hero__sub {
  font-size: 16px; color: rgba(255, 255, 255, .82); margin-bottom: 1.4em;
}
.hero__sub strong { color: var(--dourado); font-weight: 600; }
.hero__cred {
  font-size: 13px; line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(219, 182, 123, .28);
}
.hero__cred strong { color: #fff; }
.hero__foto { margin: 22px auto 0; max-width: 300px; }
.hero__foto img { filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .35)); }

/* ---------- prazos ---------- */
.prazos { margin: 22px 0 12px; }
.prazos li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(219, 182, 123, .22);
  font-size: 15px;
}
.prazos li:last-child { border-bottom: 0; }
.prazos__q { color: rgba(255, 255, 255, .88); }
.prazos__r { color: var(--dourado); font-weight: 600; white-space: nowrap; }
.sec--escura .nota { color: rgba(255, 255, 255, .58); }

/* ---------- e o seu caso ---------- */
.casos { display: grid; gap: 10px; }
.caso {
  display: flex; align-items: center; gap: 12px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--dourado);
  border-radius: var(--raio-sm);
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--sombra);
}
.caso__i { width: 22px; height: 22px; flex: 0 0 auto; fill: var(--marinho); opacity: .85; }
.caso em { font-style: italic; color: var(--texto-2); }

.cta-inline {
  margin-top: 26px;
  text-align: center;
}
.cta-inline p { font-size: 15px; color: var(--texto-2); margin-bottom: 1em; }
.cta-inline .btn { width: 100%; }

/* ---------- como eu trabalho ---------- */
.etapas { display: grid; gap: 18px; margin-bottom: 26px; }
.etapa { display: flex; gap: 14px; align-items: flex-start; }
.etapa__n {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marinho);
  color: var(--dourado);
  font-weight: 700; font-size: 15px;
}
.etapa h3 { font-size: 17px; color: var(--marinho); margin-bottom: .25em; }
.etapa p { font-size: 15px; color: var(--texto-2); margin: 0; }

.antipromessa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--marinho);
  border-radius: var(--raio-sm);
  padding: 16px 18px;
  margin-bottom: 26px;
}
.antipromessa p { margin: 0; font-size: 15px; color: var(--texto-2); }
.antipromessa strong { color: var(--marinho); }

.docs { margin-bottom: 26px; }
.docs__t { font-size: 16px; color: var(--marinho); margin-bottom: .7em; }
.docs__l { display: grid; gap: 8px; margin-bottom: 12px; }
.docs__l li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--texto-2);
}
.docs__l li::before {
  content: '';
  position: absolute; left: 0; top: .45em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--dourado-txt);
  border-bottom: 2px solid var(--dourado-txt);
  transform: rotate(-45deg);
}

/* ---------- quem e ---------- */
.advog__foto { max-width: 260px; margin: 0 auto 22px; }
.advog__foto img { border-radius: var(--raio); box-shadow: var(--sombra-md); }
/* Sem opacity: marinho a 75% sobre o dourado cai para 4,1:1 e reprova AA. */
.advog__oab {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--marinho); margin-bottom: 1.2em;
}
.advog__l { display: grid; gap: 12px; margin-bottom: 1.2em; }
.advog__l li {
  position: relative; padding-left: 20px;
  font-size: 15px; color: var(--marinho);
}
.advog__l li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--marinho); opacity: .5;
}
.advog__nota { font-size: 14px; color: var(--marinho); opacity: .8; margin: 0; }

/* ---------- criterio ---------- */
.crit { display: grid; gap: 16px; margin: 22px 0; }
.crit__col {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: var(--sombra);
}
.crit__col h3 { font-size: 16px; margin-bottom: .8em; }
.crit__col--sim { border-top: 3px solid var(--ok); }
.crit__col--sim h3 { color: var(--ok); }
.crit__col--nao { border-top: 3px solid var(--nao); }
.crit__col--nao h3 { color: var(--nao); }
.crit__col ul { display: grid; gap: 10px; }
.crit__col li {
  position: relative; padding-left: 22px;
  font-size: 15px; color: var(--texto-2);
}
.crit__col--sim li::before,
.crit__col--nao li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 700;
}
.crit__col--sim li::before { content: '+'; color: var(--ok); }
.crit__col--nao li::before { content: '–'; color: var(--nao); }
.crit__fecho {
  font-size: 15px; color: var(--texto-2);
  border-left: 3px solid var(--dourado);
  padding-left: 16px; margin: 0;
}

/* ---------- perguntas ---------- */
.faq { display: grid; gap: 8px; }
.faq__i {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  overflow: hidden;
}
.faq__i summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 46px 16px 16px;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--marinho);
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after {
  content: '';
  position: absolute; right: 18px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--dourado-txt);
  border-bottom: 2px solid var(--dourado-txt);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq__i[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__i[open] summary { background: var(--dourado-suave); }
.faq__c { padding: 4px 16px 16px; }
.faq__c p { margin: 0; font-size: 15px; color: var(--texto-2); }

/* ---------- fechamento ---------- */
.fim .sec__t { font-size: 23px; }

/* ---------- rodape ---------- */
.rod {
  background: var(--marinho-90);
  color: rgba(255, 255, 255, .72);
  padding: 36px 0 30px;
  font-size: 14px;
  text-align: center;
}
.rod__logo { width: 200px; margin: 0 auto 20px; border-radius: 6px; }
.rod__id { color: rgba(255, 255, 255, .88); line-height: 1.6; }
.rod__id strong { color: #fff; }
.rod__wpp a { color: var(--dourado); text-decoration: none; font-weight: 600; }
.rod__aviso {
  background: rgba(219, 182, 123, .1);
  border: 1px solid rgba(219, 182, 123, .28);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  font-size: 13px;
  text-align: left;
  margin: 20px 0;
}
.rod__aviso strong { color: var(--dourado); }
.rod__legal { font-size: 12px; color: rgba(255, 255, 255, .62); line-height: 1.6; }
.rod__links a { color: rgba(255, 255, 255, .78); }
/* Texto miudo sobre fundo escuro precisa de 4,5:1 — abaixo de .6 de opacidade reprova. */
.rod__copy { font-size: 12px; color: rgba(255, 255, 255, .6); margin: 0; }

/* ---------- barra fixa ---------- */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--superficie);
  border-top: 1px solid var(--borda);
  box-shadow: 0 -4px 18px rgba(40, 46, 67, .12);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%);
  transition: transform .25s ease;
}
.barra[hidden] { display: block; }
.barra.aparece { transform: translateY(0); }

/* ---------- cookies ---------- */
/* Discreto de proposito: numa pagina de captacao, o aviso de cookies nao pode
   competir com o CTA nem cobrir a foto. Uma faixa fina, acima da barra fixa. */
.cookies {
  position: fixed; left: 8px; right: 8px; bottom: 82px; z-index: 70;
  background: rgba(30, 35, 51, .96);
  color: rgba(255, 255, 255, .78);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-md);
  padding: 8px 10px 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  display: flex; align-items: center; gap: 10px;
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0; flex: 1; }
.cookies a { color: var(--dourado); }
.cookies button {
  flex: 0 0 auto;
  background: var(--dourado); color: var(--marinho);
  border: 0; border-radius: var(--pilula);
  padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* ============================================================
   VERSOES DA PAGINA (?c=)
   Todas as variantes vivem no HTML; o CSS mostra so a do
   anuncio clicado. Sem troca de DOM = sem piscada e sem custo
   de LCP. Fora da lista, o atributo data-c fica 'geral'.
   ============================================================ */
[data-v] { display: none; }

html[data-c="geral"]       span[data-v="geral"],
html[data-c="ame"]         span[data-v="ame"],
html[data-c="esclerose"]   span[data-v="esclerose"],
html[data-c="neuromielite"] span[data-v="neuromielite"],
html[data-c="parkinson"]   span[data-v="parkinson"],
html[data-c="epilepsia"]   span[data-v="epilepsia"],
html[data-c="alzheimer"]   span[data-v="alzheimer"] { display: block; }

html[data-c="ame"]          li[data-v="ame"],
html[data-c="esclerose"]    li[data-v="esclerose"],
html[data-c="neuromielite"] li[data-v="neuromielite"],
html[data-c="parkinson"]    li[data-v="parkinson"],
html[data-c="epilepsia"]    li[data-v="epilepsia"],
html[data-c="alzheimer"]    li[data-v="alzheimer"] { display: flex; }

/* O card da doenca do anuncio vem primeiro e destacado. */
html:not([data-c="geral"]) .caso[data-v] {
  order: -1;
  background: var(--dourado-suave);
  border-left-color: var(--marinho);
}

/* Sem JavaScript o atributo data-c nunca e escrito: mostra o texto generico. */
html:not([data-c]) span[data-v="geral"] { display: block; }

/* ============================================================
   TELAS MAIORES
   ============================================================ */
@media (min-width: 560px) {
  .sec { padding: 64px 0; }
  .sec__t { font-size: 28px; }
  .hero__h1 { font-size: 34px; }
  .hero__foto { max-width: 340px; }
  .casos { grid-template-columns: 1fr 1fr; }
  .cta-inline .btn, .btn--bloco { width: auto; display: inline-flex; }
  .cookies { left: auto; right: 16px; max-width: 400px; }
  .barra .btn { max-width: 460px; margin: 0 auto; }
}

@media (min-width: 860px) {
  body { padding-bottom: 0; }
  .cab__oab { display: inline; }
  .sec { padding: 80px 0; }
  .sec__t { font-size: 32px; }

  .hero { padding: 56px 0 0; }
  .hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; }
  .hero__h1 { font-size: 42px; }
  .hero__sub { font-size: 18px; }
  .hero__txt { padding-bottom: 56px; }
  .hero__foto { margin: 0; max-width: 100%; align-self: end; }

  .casos { grid-template-columns: repeat(3, 1fr); }
  .crit { grid-template-columns: 1fr 1fr; }

  .advog { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
  .advog__foto { margin: 0; max-width: 300px; }

  .etapas { gap: 22px; }

  /* A barra fixa e recurso de celular: no desktop os CTAs da pagina bastam. */
  .barra { display: none !important; }
  .cookies { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}