/* Layout: prancha clínica. Grade editorial alinhada à esquerda, réguas finas, rótulos técnicos em mono,
   um desenho de pé interativo no topo como peça central. Musgo do logo como cor de marca, tinta quase preta,
   papel neutro levemente frio. Vermelho só para marcar o ponto que dói. Tema claro único, como a marca. */
:root{
  color-scheme:light;
  --papel:#F5F6F3; --branco:#FFFFFF; --tinta:#161D19; --musgo:#3E5A47; --salvia:#9DB2A1; --nevoa:#E7EBE6;
  --linha:#D5DAD3; --apoio:#59635C; --dor:#C9573A;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
.in{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(40px,6.2vw,76px);line-height:1.02;font-weight:300}
h1 i,h2 i{font-style:italic;color:var(--musgo)}
h2{font-size:clamp(32px,4.4vw,52px);line-height:1.06;font-weight:300}
h3{font-size:26px;line-height:1.15}
p{margin:0;max-width:60ch}
.rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--apoio)}
.rot b{color:var(--musgo);font-weight:500}
a{color:inherit}
:focus-visible{outline:2px solid var(--musgo);outline-offset:3px}

.aviso{background:var(--tinta);color:var(--nevoa);font:400 12.5px var(--mono);letter-spacing:.04em;padding-block:8px}

/* topo */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(245,246,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linha)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--papel)}
.topo .in{display:flex;align-items:center;gap:20px;padding-block:10px}
.logo{display:block;line-height:0}.logo svg{height:48px;width:auto;display:block}
.topo nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.topo nav a{text-decoration:none;color:var(--apoio)}.topo nav a:hover{color:var(--tinta)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px var(--sans);text-decoration:none;border-radius:4px;padding:15px 22px;border:1px solid var(--tinta);cursor:pointer;transition:background .15s,color .15s}
.btn svg{width:19px;height:19px;flex:none}
.btn-cheio{background:var(--tinta);color:var(--papel)}.btn-cheio:hover{background:var(--musgo);border-color:var(--musgo)}
.btn-vazio{background:transparent;color:var(--tinta)}.btn-vazio:hover{background:var(--branco)}
.btn-pq{padding:10px 16px;font-size:14.5px}
.seta{font:500 15px var(--sans);color:var(--musgo);text-decoration:none;border-bottom:1px solid var(--salvia);padding-bottom:2px}.seta:hover{color:var(--tinta);border-color:var(--tinta)}

/* hero */
.hero .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;padding-block:56px 64px;align-items:start}
.hero-txt{display:flex;flex-direction:column;gap:26px;padding-top:12px;min-width:0}
.hero-txt>p{font-size:19px;color:var(--apoio)}
.acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.nota{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--apoio);border-top:1px solid var(--linha);padding-top:18px}
.nota b{font:400 34px/1 var(--serif);color:var(--tinta)}
.estr{color:#B98A2B;letter-spacing:2px;font-size:13px}

/* prancha do pé */
.prancha{background:var(--branco);border:1px solid var(--linha);min-width:0}
.prancha-cab{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--linha);padding:12px 16px}
.prancha-corpo{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:0}
.pe{border-right:1px solid var(--linha);padding:14px 10px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background-image:linear-gradient(var(--nevoa) 1px,transparent 1px),linear-gradient(90deg,var(--nevoa) 1px,transparent 1px);background-size:18px 18px;background-position:-1px -1px}
.pe svg{width:100%;max-width:170px;height:auto;display:block}
.pe .contorno{fill:var(--branco);stroke:var(--tinta);stroke-width:1.3}
.pe .unha{fill:var(--nevoa);stroke:var(--tinta);stroke-width:1}
.pe .ponto{cursor:pointer}
.pe .ponto circle.alvo{fill:transparent}
.pe .ponto circle.mira{fill:var(--branco);stroke:var(--musgo);stroke-width:1.6}
.pe .ponto circle.miolo{fill:var(--musgo)}
.pe .ponto.on circle.mira{stroke:var(--dor);fill:#FBE9E3}
.pe .ponto.on circle.miolo{fill:var(--dor)}
.pe .ponto:focus{outline:none}.pe .ponto:focus-visible circle.mira{stroke-width:3}
@media(prefers-reduced-motion:no-preference){.pe .ponto.on circle.mira{animation:pulsa 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}}
@keyframes pulsa{50%{transform:scale(1.35)}}
.pe small{font:400 11px var(--mono);color:var(--apoio);letter-spacing:.06em}
.escolha{display:flex;flex-direction:column;min-width:0}
.opcoes{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linha)}
.opcoes button{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:none;border:0;border-top:1px solid var(--linha);padding:11px 16px;font:500 15.5px var(--sans);color:var(--tinta);cursor:pointer;text-align:left}
.opcoes li:first-child button{border-top:0}
.opcoes button span{font:400 11px var(--mono);color:var(--apoio);letter-spacing:.05em;text-transform:uppercase}
.opcoes button:hover{background:var(--papel)}
.opcoes button[aria-pressed="true"]{background:var(--tinta);color:var(--papel)}
.opcoes button[aria-pressed="true"] span{color:var(--salvia)}
.res{padding:16px;display:flex;flex-direction:column;gap:12px}
.res h3{font-size:24px}
.res p{font-size:15.5px;color:var(--apoio)}
.chk{display:flex;gap:9px;align-items:center;font-size:15px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--musgo);margin:0}

/* faixa de prova */
.prova{border-block:1px solid var(--linha);background:var(--branco)}
.prova .in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.prova div{padding:26px 22px;border-left:1px solid var(--linha);display:flex;flex-direction:column;gap:4px;min-width:0}
.prova div:first-child{border-left:0;padding-left:0}
.prova b{font:300 44px/1 var(--serif);font-variant-numeric:tabular-nums}
.prova span{font-size:14.5px;color:var(--apoio)}

section{padding-block:96px}
.cab{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px;margin-bottom:48px}
.cab .rot{padding-top:12px}
.cab p{color:var(--apoio);margin-top:16px;font-size:18px}

/* casos */
.caso{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,.9fr);gap:24px 40px;padding-block:44px;border-top:1px solid var(--tinta)}
.caso:last-child{border-bottom:1px solid var(--linha)}
.caso-txt{display:flex;flex-direction:column;gap:20px;min-width:0}
.caso-txt>p{color:var(--apoio)}
.sinais{list-style:none;margin:0;padding:0}
.sinais li{padding:10px 0;border-top:1px solid var(--linha);display:grid;grid-template-columns:28px 1fr;gap:8px}
.sinais li::before{content:attr(data-n);font:400 12px/1.9 var(--mono);color:var(--apoio)}
.caso img{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.85)}
.caso figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.caso figcaption{font:400 11.5px var(--mono);color:var(--apoio);letter-spacing:.04em}
.unha-desenho{aspect-ratio:4/3;background:var(--branco);border:1px solid var(--linha);display:flex;align-items:center;justify-content:center}
.unha-desenho svg{width:62%;height:auto}

/* depoimento */
.voz{background:var(--musgo);color:var(--papel)}
.voz .rot{color:var(--salvia)}
.voz blockquote{margin:22px 0 0;font:300 clamp(28px,3.6vw,46px)/1.18 var(--serif);max-width:24ch;text-wrap:balance}
.voz .quem{margin-top:22px;font-size:15px;color:var(--salvia)}
.vozes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid rgba(245,246,243,.25)}
.vozes figure{margin:0;padding:24px 28px 0 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.vozes figure+figure{padding-left:28px;border-left:1px solid rgba(245,246,243,.25)}
.vozes blockquote{margin:0;font:400 19px/1.45 var(--serif)}
.vozes figcaption{font-size:14px;color:var(--salvia)}

/* passos */
.passos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--tinta)}
.passos li{padding:24px 28px 0 0;display:flex;flex-direction:column;gap:10px;min-width:0}
.passos li+li{padding-left:28px;border-left:1px solid var(--linha)}
.passos .rot{color:var(--musgo)}
.passos p{color:var(--apoio);font-size:16px}

/* quem atende */
.andrea{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.andrea figure{margin:0;display:flex;flex-direction:column;gap:8px}
.andrea img{width:100%;max-width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;display:block}
.andrea figcaption{font:400 11.5px var(--mono);color:var(--apoio);letter-spacing:.04em}
.andrea-txt{display:flex;flex-direction:column;gap:22px;min-width:0}
.andrea-txt>p{color:var(--apoio);font-size:18px}
.ficha{margin:0;border-top:1px solid var(--tinta)}
.ficha div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--linha)}
.ficha dt{font:400 12px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--apoio)}
.ficha dd{margin:0}

/* outros */
.lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;border-top:1px solid var(--tinta)}
.lista div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--linha);min-width:0}
.lista b{font:400 21px var(--serif)}
.lista span{font:400 11.5px var(--mono);color:var(--apoio);text-transform:uppercase;letter-spacing:.05em;text-align:right}

/* dúvidas */
.faq{border-top:1px solid var(--tinta)}
details{border-bottom:1px solid var(--linha)}
summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:16px;padding:20px 0;font:400 22px/1.3 var(--serif)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:300 26px/1 var(--sans);color:var(--musgo);text-align:right}
details[open] summary::after{content:"−"}
details p{padding:0 40px 22px 0;color:var(--apoio)}
.conf{font:400 12.5px var(--mono);background:#F4EAD2;color:#6E5212;padding:2px 6px}

/* local e fim */
.local{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.local dl{margin:0;border-top:1px solid var(--tinta)}
.local dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--linha)}
.local dt{font:400 12px/1.9 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--apoio)}
.local dd{margin:0}
.fim{background:var(--tinta);color:var(--papel)}
.fim .in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end;padding-block:88px}
.fim .rot{color:var(--salvia)}
.fim .acoes{justify-content:flex-start}
.fim .btn-cheio{background:var(--papel);color:var(--tinta);border-color:var(--papel)}.fim .btn-cheio:hover{background:var(--salvia);border-color:var(--salvia)}
.fim .btn-vazio{color:var(--papel);border-color:rgba(245,246,243,.5)}.fim .btn-vazio:hover{background:rgba(245,246,243,.08)}
footer{background:var(--tinta);color:var(--salvia);font-size:13.5px;border-top:1px solid rgba(245,246,243,.15)}
footer .in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px 110px}

.barra{display:none}
@media(max-width:900px){
  .topo nav{display:none}.topo .btn{margin-left:auto}
  .hero .in{grid-template-columns:1fr;gap:36px;padding-block:32px 48px}
  .prova .in{grid-template-columns:1fr}
  .prova div{border-left:0;padding-left:0;padding-block:18px}
  .prova div+div{border-top:1px solid var(--linha)}
  section{padding-block:64px}
  .cab,.caso,.andrea,.local,.fim .in{grid-template-columns:1fr}
  .caso{gap:20px}
  .passos,.vozes,.lista{grid-template-columns:1fr}
  .passos li+li,.vozes figure+figure{padding-left:0;border-left:0;border-top:1px solid var(--linha);margin-top:20px}
  .vozes figure+figure{border-color:rgba(245,246,243,.25)}
  .barra{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--papel);border-top:1px solid var(--linha);padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .barra .btn{justify-content:center;padding:13px 10px}
}
@media(max-width:560px){
  .prancha-corpo{grid-template-columns:1fr}
  .pe{border-right:0;border-bottom:1px solid var(--linha)}
  .pe svg{max-width:150px}
  .ficha div,.local dl div{grid-template-columns:1fr;gap:2px}
  .logo svg{height:42px}
}

/* páginas de tratamento */
.migalha{font:400 12.5px var(--mono);color:var(--apoio);letter-spacing:.03em;padding-top:28px}
.migalha a{color:var(--apoio)}
.trat-topo{padding-block:20px 56px;display:flex;flex-direction:column;gap:22px;max-width:860px}
.resumo{border-left:3px solid var(--musgo);background:var(--branco);padding:18px 22px;font-size:18px;max-width:none}
.artigo{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:24px 40px;padding-block:36px;border-top:1px solid var(--linha)}
.artigo h2{font-size:clamp(26px,3vw,34px)}
.artigo p{color:var(--apoio)}
.outros{display:flex;flex-wrap:wrap;gap:10px 22px}
.bairros{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:16px 0 0;padding:0}
.bairros li{font:400 13px var(--mono);border:1px solid var(--linha);padding:4px 10px;color:var(--apoio);background:var(--branco)}
.lista a{color:inherit;text-decoration:none}.lista a:hover b{color:var(--musgo)}
@media(max-width:900px){.artigo{grid-template-columns:1fr}}