/* Dr. Gabriel Krauss — folha única do site.
   Tokens vêm dos defaults do artifact "Site v2": par tipográfico "Acolhedor"
   (Lora + Karla), acento #823D24, cantos "Arredondado" (999px) e densidade
   "Compacto" (96px). Atenção: os fallbacks escritos no HTML do artifact
   (Instrument Serif / 2px / 132px) NÃO são o que ele renderiza — quem manda
   são os defaults das props. */

:root{
  --display:'Lora',Georgia,serif;
  --body:'Karla',system-ui,-apple-system,sans-serif;
  --display-weight:500;
  --display-tracking:-0.012em;

  --accent:#823D24;
  --accent-soft:#c1927c;
  --parchment:#E3DFDB;
  --sand:#CFC9BD;
  --ink:#463E29;
  --ink-soft:#6b6152;
  --muted:#94887A;
  --muted-mid:#7d7365;
  --deep:#3D2A23;

  --radius:999px;
  --pad-y:96px;
  --pad-x:72px;
  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--parchment);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{filter:brightness(.82)}
::selection{background:var(--accent);color:var(--parchment)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.display{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking)}
.wrap{max-width:var(--wrap);margin:0 auto}
.section--pad{padding:var(--pad-y) var(--pad-x)}

.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 32px}
.eyebrow--light{color:var(--muted)}
.eyebrow--mid{color:var(--muted-mid)}
.micro{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.h2{font-size:52px;line-height:1.08;margin:0 0 36px;color:var(--ink)}
.h2--light{color:var(--parchment)}
.h2--light em{font-style:italic;color:var(--accent-soft)}
.accent{font-style:italic;color:var(--accent)}
.body{font-size:19px;line-height:1.7;color:var(--ink-soft);margin:0 0 24px;max-width:52ch;text-wrap:pretty}
.lead{font-size:19px;line-height:1.65;color:var(--ink-soft);margin:0 0 44px;max-width:44ch;text-wrap:pretty}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--parchment);
  padding:19px 32px;border-radius:var(--radius);
  font-size:15px;font-weight:600;letter-spacing:.02em;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(.9);transform:translateY(-1px)}
.btn--sm{padding:13px 22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.btn--invert{background:var(--parchment);color:var(--accent);padding:20px 40px;font-size:16px}

/* ---------- NAV ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:26px var(--pad-x);border-bottom:1px solid rgba(70,62,41,.12);
}
.nav__brand{display:flex;flex-direction:column;gap:2px;color:var(--ink)}
.nav__brand:hover{filter:none}
.nav__name{font-family:var(--display);font-weight:var(--display-weight);font-size:26px;line-height:1}
.nav__tag{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:500}

/* ---------- HERO ---------- */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center;
  max-width:1440px;margin:0 auto;
  padding-top:calc(var(--pad-y) * .8);padding-bottom:calc(var(--pad-y) * .72);
}
.hero__text{max-width:560px}
/* O H1 tem duas frases desde 31/08/2026 (era "Enxaqueca constante?", de 19
   caracteres): 72px fixos jogavam a segunda frase para quatro linhas dentro
   dos 560px de .hero__text e desalinhavam o hero da foto. O clamp acompanha a
   largura em vez de brigar com ela. */
.hero__title{font-size:clamp(38px,3.6vw,50px);line-height:1.1;color:var(--accent);margin:0 0 32px;text-wrap:balance}
.hero__title em{font-style:italic}
.hero__cta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:52px}
.hero__note{font-size:13px;line-height:1.5;color:var(--muted)}
.credentials{display:flex;gap:36px;flex-wrap:wrap;padding-top:30px;margin:0;border-top:1px solid rgba(70,62,41,.14)}
.credentials div{display:flex;flex-direction:column;gap:4px}
.credentials dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.credentials dd{margin:0;font-size:14px;font-weight:600;color:var(--ink)}

.hero__figure{position:relative;margin:0}
.portrait{position:relative;aspect-ratio:3/4;background:var(--deep);overflow:hidden}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.quote-card{
  position:absolute;left:-40px;bottom:44px;max-width:290px;
  background:var(--parchment);padding:24px 28px;
  box-shadow:0 24px 60px -30px rgba(61,42,35,.55);
}
.quote-card__text{font-style:italic;font-size:20px;line-height:1.35;color:var(--ink);margin:0 0 12px}

/* ---------- STATS ---------- */
.stats{background:var(--sand);padding:44px var(--pad-x)}
.stats__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stats__grid div{display:flex;flex-direction:column;gap:8px}
.stats__n{font-size:46px;line-height:1;color:var(--accent)}
.stats__l{font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* ---------- PONTO A ---------- */
.pain{background:var(--ink)}
.pain__inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:88px;align-items:start}
.pain__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pain__list li{
  display:flex;gap:24px;padding:26px 0;
  border-bottom:1px solid rgba(227,223,219,.16);
  font-size:19px;line-height:1.5;color:var(--parchment);
}
.pain__n{font-size:16px;color:var(--muted);min-width:24px}

/* ---------- SOBRE ---------- */
.about{background:var(--parchment)}
.about__inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}
.about__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:28px;border-top:1px solid rgba(70,62,41,.14);margin-top:20px}
.about__foot > div{display:flex;flex-direction:column;gap:4px}
.about__role{font-size:15px;font-weight:600;color:var(--ink)}
.about__foot .micro{letter-spacing:normal;text-transform:none;font-size:13px}
.link-ig{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}

/* ---------- MÉTODO ---------- */
.method{background:var(--sand)}
.section__head{max-width:620px;margin-bottom:76px}
.section__head--split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.section__head--split .h2{margin-bottom:0}
.section__aside{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0;max-width:320px;text-wrap:pretty}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
/* 4 passos em 1080px dão ~230px por coluna — o gap de 56px do grid-3 deixaria o
   texto estreito demais, então aqui ele é menor. */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.step{display:flex;flex-direction:column;gap:16px;padding-top:26px;border-top:2px solid var(--accent)}
.step__n{font-size:15px;letter-spacing:.1em;color:var(--accent)}
.step__t{font-size:28px;line-height:1.2;color:var(--ink);margin:0}
.step p{font-size:16px;line-height:1.65;color:var(--ink-soft);margin:0}

/* ---------- PACIENTES ---------- */
.patients{background:var(--parchment)}
.rating{display:flex;align-items:baseline;gap:12px;margin:0}
.rating__n{font-size:44px;line-height:1;color:var(--accent)}
.rating .micro{letter-spacing:normal;text-transform:none;font-size:13px;line-height:1.5}
.patients .grid-3{gap:48px}
.testimonial{margin:0;display:flex;flex-direction:column;gap:22px;padding-top:26px;border-top:1px solid rgba(70,62,41,.18)}
.testimonial blockquote{font-size:22px;line-height:1.4;color:var(--ink);margin:0;flex:1}

/* ---------- ARTIGOS ---------- */
.articles{background:var(--sand)}
.articles__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-mid);margin:0 0 18px}
.meta__cat{color:var(--accent);font-weight:600}
.meta__upd{opacity:.72}
.feature{display:flex;flex-direction:column;color:var(--ink)}
.feature:hover{filter:none}
.feature__img{aspect-ratio:16/10;background:var(--deep);overflow:hidden;margin-bottom:28px}
.feature__img img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;transition:transform .5s ease}
.feature:hover .feature__img img{transform:scale(1.03)}
.feature__t{font-size:36px;line-height:1.14;margin:0 0 18px;text-wrap:pretty}
.feature:hover .feature__t{color:var(--accent)}
.feature__d{font-size:17px;line-height:1.65;color:var(--ink-soft);margin:0 0 22px;max-width:52ch;text-wrap:pretty}
.more{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.more--standalone{align-self:flex-start;margin-top:32px}
.article-list{display:flex;flex-direction:column}
.article-list a{display:flex;flex-direction:column;gap:12px;padding:26px 0;border-top:1px solid rgba(70,62,41,.2);color:var(--ink)}
.article-list a:hover{filter:none}
.article-list a:hover .article-list__t{color:var(--accent)}
.article-list a:last-of-type:not(.more){border-bottom:1px solid rgba(70,62,41,.2)}
.article-list .meta{margin:0;gap:16px}
.article-list__t{font-size:24px;line-height:1.22}
.article-list .more--standalone{padding:0;border:0}

/* ---------- VÍDEOS ---------- */
.videos{background:var(--deep)}
.videos .section__head{max-width:600px;margin-bottom:64px}
.videos__grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.video{aspect-ratio:16/9;background:#000;overflow:hidden}
.video iframe{width:100%;height:100%;border:0;display:block}

/* Reels: cards com capa estatica e link para o Instagram -- nao embed. O
   porque esta no topo de scripts/build_reels.py (cookies da Meta em pagina de
   saude, e o embed anonimo que deixou de funcionar).

   Os cards sao ESTREITOS de proposito: a capa que o Instagram entrega tem
   360px de largura, e e o maior tamanho disponivel por aquele caminho. Num
   card de 400px ela apareceria borrada; em 300px ela sobra. */
.reels{display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:36px;justify-content:start}
.reel{display:flex;flex-direction:column;gap:14px;color:var(--parchment)}
.reel:hover{filter:none}
.reel__capa{display:block;aspect-ratio:9/16;background:#000;overflow:hidden}
.reel__capa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.reel:hover .reel__capa img{transform:scale(1.04)}
.reel__t{font-size:20px;line-height:1.3;text-wrap:pretty}
.reel:hover .reel__t{color:var(--accent-soft)}
.reel__meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.more--light{color:var(--accent-soft)}
/* O link fica embaixo da GRADE, nao do primeiro card. Com o espaco padrao de
   .more--standalone ele encostava no titulo da primeira capa e parecia parte
   dela -- as colunas terminam em alturas diferentes, entao a separacao precisa
   ser maior aqui do que na lista de artigos. */
.videos .more--standalone{display:inline-block;margin-top:48px}

/* ---------- DIÁRIO DE DOR ----------
   Entra entre os vídeos (--deep) e o atendimento (--parchment), então usa
   --sand para manter a alternância clara/escura da página. O cartão da direita
   é um registro de exemplo montado em HTML: mostra o que a ferramenta captura
   sem depender de screenshot (que envelhece a cada mudança do app e, pior,
   sairia da conta de alguém). */
.diario{background:var(--sand)}
.diario__inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.diario__d{font-size:17px;line-height:1.7;color:var(--ink-soft);margin:0 0 18px;max-width:460px;text-wrap:pretty}
.diario__free{display:inline-flex;align-items:center;gap:10px;margin:0 0 34px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-mid)}
.diario__free::before{content:"";width:22px;height:1px;background:var(--accent)}

.card-crise{
  background:var(--parchment);padding:30px 32px;
  box-shadow:0 18px 44px rgba(70,62,41,.10);
  display:flex;flex-direction:column;gap:0;
}
.card-crise__cap{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.card-crise__linha{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:13px 0;border-top:1px solid rgba(70,62,41,.14);font-size:15px;color:var(--ink)}
.card-crise__linha:first-of-type{border-top:0;padding-top:0}
.card-crise__k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-mid);flex:0 0 auto}
.card-crise__v{text-align:right;text-wrap:pretty}
.card-crise__forte{font-family:var(--display);font-weight:var(--display-weight);font-size:26px;line-height:1;color:var(--accent)}

@media (max-width:1000px){
  /* O grid vira coluna unica na media query geral, junto com as outras secoes
     de duas colunas -- ver ".hero,.pain__inner,..." mais abaixo. Aqui fica so
     o que e proprio deste bloco. */
  .card-crise{padding:26px 22px}
}

/* ---------- ATENDIMENTO ---------- */
.reach{background:var(--parchment)}
.reach__inner{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.reach__facts{display:flex;flex-direction:column;gap:18px;margin:0 0 44px}
.reach__facts div{display:flex;gap:16px;align-items:baseline}
.reach__facts dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);min-width:96px}
.reach__facts dd{margin:0;font-size:16px;color:var(--ink)}

/* Mapa do Brasil — o PNG do Claude Design, com fundo transparente */
.mapa{margin:0;display:flex;flex-direction:column;align-items:center;gap:24px}
/* aspect-ratio + object-fit:contain: mesmo que algo force uma altura, o mapa
   nunca distorce — no máximo sobra espaço. Sem isso o object-fit computa `fill`,
   e qualquer altura imposta achata o desenho. */
.mapa img{
  width:100%;max-width:420px;height:auto;
  aspect-ratio:840/906;object-fit:contain;
}
.mapa__cap{text-align:center;letter-spacing:.22em}

/* ---------- CTA FINAL ---------- */
.cta{background:var(--accent);padding:calc(var(--pad-y) + 16px) var(--pad-x);text-align:center}
.cta__t{font-size:64px;line-height:1.06;color:var(--parchment);max-width:760px;margin:0 auto 28px}
.cta__note{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(227,223,219,.6);margin:28px 0 0}

/* ---------- FOOTER ---------- */
.foot{
  background:var(--deep);padding:56px var(--pad-x);
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.foot > div:first-child{display:flex;flex-direction:column;gap:10px}
.foot__name{font-size:24px;color:var(--parchment)}
.foot__reg{font-size:12px;color:var(--muted)}
.foot__links{display:flex;align-items:center;gap:28px}
.foot__links a{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);font-weight:500}
.foot__wa{color:var(--accent-soft);font-weight:600}

/* ---------- BOTÃO FLUTUANTE DE WHATSAPP ---------- */
/* Cor do site, não o verde do WhatsApp: o ícone já identifica o canal, e o
   #25D366 brigaria com a paleta terrosa em todas as seções. */
.fab{
  position:fixed;right:24px;bottom:24px;z-index:60;
  display:inline-flex;align-items:center;gap:12px;
  height:58px;padding:0 22px;border-radius:var(--radius);
  background:var(--accent);color:var(--parchment);
  font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 16px 36px -14px rgba(61,42,35,.65);
  transition:opacity .3s ease,transform .3s ease,filter .18s ease;
}
.fab:hover{filter:brightness(.92);color:var(--parchment);transform:translateY(-2px)}
.fab svg{flex:none}

/* Só o JS habilita o estado escondido — sem JS o botão fica sempre visível. */
.js .fab{opacity:0;transform:translateY(14px);pointer-events:none}
.js .fab.is-visible{opacity:1;transform:none;pointer-events:auto}

@media (max-width:640px){
  /* No celular vira círculo: o rótulo comeria a largura útil da tela. */
  .fab{right:16px;bottom:16px;height:56px;width:56px;padding:0;justify-content:center}
  .fab__label{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fab{transition:opacity .01s}
  .js .fab{transform:none}
}

/* ================= RESPONSIVO =================
   O artifact é desktop-only (preview 1440px, zero media query). Tudo abaixo
   existe só na versão publicada. */

@media (max-width:1000px){
  :root{--pad-y:72px;--pad-x:24px}
  /* Tres capas 9:16 empilhadas dariam uma coluna de rolagem interminavel.
     Rolagem horizontal mantem os tres a um gesto de distancia. */
  .reels{
    grid-template-columns:repeat(3,72vw);gap:16px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(var(--pad-x) * -1);padding:0 var(--pad-x) 8px;
  }
  .reel{scroll-snap-align:start}
  .hero,.pain__inner,.about__inner,.diario__inner,.reach__inner,.articles__grid,.videos__grid{
    grid-template-columns:1fr;gap:44px;
  }
  .hero__text{max-width:none}
  /* 8.2vw da 32px num viewport de 390px, que e onde o H1 de duas frases quebra
     limpo: "Voce ja tentou de tudo." inteira numa linha e a segunda frase em
     duas. Com os 10vw de antes davam 39px e cinco linhas, com "com" sozinho
     numa delas -- o titulo comia a dobra e empurrava o CTA para fora. */
  .hero__title{font-size:clamp(30px,8.2vw,46px)}
  .h2{font-size:clamp(30px,6.5vw,40px)}
  .cta__t{font-size:clamp(32px,7.5vw,44px)}
  .feature__t{font-size:28px}
  .grid-3{grid-template-columns:1fr;gap:40px}
  /* 4 passos viram 2x2 no tablet e coluna única no celular (regra de 520px) */
  .grid-4{grid-template-columns:1fr 1fr;gap:32px}
  .stats__grid{grid-template-columns:1fr 1fr;gap:28px}
  .section__head{margin-bottom:48px}
  .body,.lead,.feature__d{max-width:none}
  /* o card de citação sai do canto negativo e passa a ficar sob a foto */
  /* `relative`, e nao `static`: o cartao sobe -40px para encostar na foto, e
     elemento POSICIONADO pinta por cima de elemento nao posicionado. Com
     `static` o retrato (que e `position:relative`) cobria a citacao -- no
     celular a frase da paciente aparecia atras da foto, cortada ao meio. */
  .quote-card{position:relative;z-index:1;max-width:none;margin-top:-40px;margin-left:24px;margin-right:24px;box-shadow:0 18px 44px -26px rgba(61,42,35,.5)}
  .about__inner .portrait--about{max-width:420px}
}

@media (max-width:520px){
  .stats__grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr;gap:36px}
  .credentials{gap:24px}
  .btn{width:100%}
  .hero__cta{gap:16px}
  .foot{flex-direction:column;align-items:flex-start;gap:24px}
}

/* Os links do nav somem quando a marca, os 5 links e o CTA deixam de caber na
   mesma linha. Esse limite morava no bloco de 1000px, mas a conta nunca fechou:
   medido em 31/08/2026, com a assinatura antiga ("Alívia · medicina da dor") o
   header já precisava de 1093px, e entre 1001px e 1093px a marca quebrava em
   duas linhas e o header crescia junto. A assinatura nova ("cuidando além da sua
   dor") levou a conta para 1129px. 1140px cobre as duas com folga.

   Se a assinatura mudar de novo, remedir: é a largura da marca que manda aqui. */
@media (max-width:1140px){
  .nav__links{display:none}
}

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