/* =========================================================
   Clínica Onon — folha de estilo única
   Paleta e tipografia derivadas do cartão e das pinturas da clínica.
   Três fundos com papéis fixos:
     branco   = superfície de leitura
     plaster  = o fundo das pinturas; onde a arte encosta na página
     ink      = os dois momentos de pausa e decisão
   ========================================================= */

/* ---------- fontes, hospedadas junto com o site (sem depender do Google) ---------- */
@font-face{ font-family:'Antic Didone'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/antic-didone-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/bodoni-moda-latin-ext-400-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/bodoni-moda-latin-ext-500-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face{ font-family:'Bodoni Moda'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/newsreader-latin-ext-400-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/newsreader-latin-ext-500-normal.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face{ font-family:'Newsreader'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/newsreader-latin-500-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/newsreader-latin-ext-400-italic.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF }
@font-face{ font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD }

:root{
  /* cor */
  --branco:#fdfdfc;       /* base de leitura, levemente quente */
  --ink:#16100f;          /* preto-marrom da marca */
  --ink-2:#3a3230;        /* texto secundário */
  --plaster:#cbd2d1;      /* fundo das pinturas */
  --plaster-2:#dde1e0;    /* plaster diluído, para fios e superfícies quietas */
  --canvas:#e9e6de;       /* branco-tela quente */
  --clay:#84342f;         /* acento único */
  --clay-2:#5e241f;       /* clay pressionado */
  --earth:#716c64;        /* só fios e bordas */
  --fio:rgba(113,108,100,.28);
  --fio-claro:rgba(233,230,222,.20);

  /* tipo */
  --marca:"Antic Didone",Didot,"Bodoni Moda",Georgia,serif;
  --titulo:"Bodoni Moda",Didot,Georgia,serif;
  --corpo:"Newsreader",Georgia,"Times New Roman",serif;

  /* medida */
  --gut:24px;
  --max:1160px;
  --secao-y:clamp(76px,11vw,150px);
  --faixa-h:86px;
  --faixa-rod-h:68px;

  /* movimento */
  --ease:cubic-bezier(.22,.61,.36,1);
  --rapido:180ms;
  --medio:420ms;
}

@media (min-width:768px){ :root{ --gut:44px; --faixa-h:104px; --faixa-rod-h:82px } }
@media (min-width:1100px){ :root{ --gut:64px; --faixa-h:122px; --faixa-rod-h:96px } }

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:92px }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--branco);
  color:var(--ink);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
::selection{ background:var(--clay); color:var(--branco) }
:focus-visible{ outline:2px solid var(--clay); outline-offset:3px }

.container{
  width:100%; max-width:var(--max);
  margin-inline:auto; padding-inline:var(--gut);
}
.container--estreito{ max-width:780px }

.pular{ position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--branco); padding:12px 20px; z-index:200 }
.pular:focus{ left:8px; top:8px }

/* ---------- tipografia ---------- */

h1,h2,h3{ font-family:var(--titulo); font-weight:400; margin:0; text-wrap:balance }

h1{ font-size:clamp(31px,7vw,56px); line-height:1.11; letter-spacing:-.021em }
h2{ font-size:clamp(27px,4.4vw,42px); line-height:1.14; letter-spacing:-.017em }
h3{ font-size:clamp(19px,2.3vw,22px); line-height:1.3; letter-spacing:-.004em; font-weight:500 }

p{ margin:0 0 1.05em; max-width:62ch }
p:last-child{ margin-bottom:0 }

.led{ font-size:clamp(18px,2.3vw,21px); line-height:1.62 }
.miudo{ font-size:15px; line-height:1.55 }
.suave{ color:var(--ink-2) }

a{ color:var(--clay); text-underline-offset:3px; text-decoration-thickness:1px }
a:hover{ color:var(--clay-2) }

/* ---------- a faixa da pintura, em movimento ---------- */

.faixa{ overflow:hidden; background:var(--plaster) }
.faixa__trilho{ display:flex; width:max-content; will-change:transform }
.faixa__peca{ flex:0 0 auto; width:1916px; background-repeat:no-repeat; background-size:100% 100% }
.faixa--topo{ height:var(--faixa-h) }
.faixa--topo .faixa__peca{ height:var(--faixa-h); background-image:url("../img/onon-faixa-topo.png") }
.faixa--topo .faixa__trilho{ animation:desliza 68s linear infinite }
.faixa--rodape{ height:var(--faixa-rod-h) }
.faixa--rodape .faixa__peca{ height:var(--faixa-rod-h); background-image:url("../img/onon-faixa-rodape.png") }
.faixa--rodape .faixa__trilho{ animation:desliza 68s linear infinite reverse }
@keyframes desliza{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-1916px,0,0) } }

/* ---------- cabeçalho ---------- */

.cabecalho{
  position:sticky; top:0; z-index:100;
  background:rgba(253,253,252,0);
  transition:background var(--medio) var(--ease), box-shadow var(--medio) var(--ease);
}
.cabecalho--preso{
  background:rgba(253,253,252,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--fio);
}
.cabecalho__linha{ display:flex; align-items:center; gap:16px; height:72px }
.cabecalho__marca{
  font-family:var(--marca); font-size:42px; line-height:1; letter-spacing:.045em;
  color:var(--ink); text-decoration:none;
  transition:opacity var(--rapido) var(--ease);
}
.cabecalho__marca:hover{ color:var(--ink); opacity:.6 }

.nav{ display:none; margin-left:auto; gap:32px }
.nav a{ white-space:nowrap }
.nav a{ color:var(--ink); text-decoration:none; font-size:16px; position:relative; padding-block:5px }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1.5px; background:var(--clay); transition:right var(--medio) var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0 }

.cabecalho__linha .cabecalho__cta{ display:none }   /* especificidade acima de .botao */

.menu-botao{
  margin-left:auto; width:44px; height:44px;
  display:grid; place-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:0;
}
.menu-botao span{
  display:block; width:24px; height:1.5px; background:var(--ink);
  transition:transform var(--medio) var(--ease), opacity var(--rapido) var(--ease);
}
.menu-botao[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg) }
.menu-botao[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.menu-botao[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg) }

.gaveta{
  position:fixed; inset:0; z-index:99; background:var(--branco);
  padding:104px var(--gut) 40px;
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--medio) var(--ease), transform var(--medio) var(--ease), visibility var(--medio);
}
.gaveta[data-aberta="true"]{ opacity:1; visibility:visible; transform:none }
.gaveta a{
  font-family:var(--titulo); font-size:29px; color:var(--ink); text-decoration:none;
  padding:14px 0; border-bottom:1px solid var(--fio);
}
.gaveta .botao{ margin-top:32px; font-family:var(--corpo); font-size:16px; border-bottom:0 }

@media (min-width:980px){
  /* três colunas: marca à esquerda, menu centrado na página, WhatsApp à direita.
     As colunas laterais têm a mesma largura, então o menu fica no meio de verdade. */
  .cabecalho__linha{
    display:grid; grid-template-columns:1fr auto 1fr;
    max-width:1440px; height:80px;
  }
  .cabecalho__marca{ justify-self:start; font-size:48px }
  .nav{ display:flex; margin-left:0; justify-self:center; gap:clamp(24px,2.6vw,40px) }
  .cabecalho__linha .cabecalho__cta{
    display:inline-flex; justify-self:end; margin-left:0; padding:13px 22px;
  }
  .menu-botao,.gaveta{ display:none }
}

/* ---------- botões ---------- */

.botao{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--corpo); font-weight:500; font-size:16px; line-height:1;
  padding:18px 28px;
  border:1.5px solid transparent; border-radius:0;   /* o raio pertence só ao arco */
  text-decoration:none; cursor:pointer;
  transition:background var(--rapido) var(--ease), color var(--rapido) var(--ease),
             border-color var(--rapido) var(--ease), transform var(--rapido) var(--ease);
}
.botao:active{ transform:translateY(1px) }
.botao--clay{ background:var(--clay); color:var(--branco); border-color:var(--clay) }
.botao--clay:hover{ background:var(--clay-2); border-color:var(--clay-2); color:var(--branco) }
.botao--linha{ background:transparent; color:var(--ink); border-color:var(--ink) }
.botao--linha:hover{ background:var(--ink); color:var(--branco) }
.botao--claro{ background:var(--branco); color:var(--ink); border-color:var(--branco) }
.botao--claro:hover{ background:var(--plaster); border-color:var(--plaster) }
.botao--largo{ width:100% }
@media (min-width:600px){ .botao--largo{ width:auto } }
.zap{ width:17px; height:17px; flex:0 0 auto; fill:currentColor }

/* ---------- seções e ritmo ---------- */

.secao{ padding-block:var(--secao-y) }
.secao--branco{ background:var(--branco) }
.secao--plaster{ background:var(--plaster) }
.secao--ink{ background:var(--ink); color:var(--canvas) }
.secao--ink h1,.secao--ink h2,.secao--ink h3{ color:var(--canvas) }
.secao--ink .suave{ color:var(--plaster) }
.secao--emenda{ padding-top:0 }   /* segue a seção anterior sem recomeçar o espaço */
/* quando a seção termina no ornamento, ele fica perto do título seguinte */
.secao--ornamento{ padding-bottom:clamp(38px,4vw,58px) }

/* cabeça de seção centralizada — o texto de apoio fica sob o título */
.secao__cabeca{
  text-align:center;
  max-width:640px; margin:0 auto clamp(44px,5.5vw,76px);
}
.secao__cabeca p{ margin:16px auto 0; max-width:54ch }

/* ornamento: o motivo da pintura em miniatura, separando dois blocos claros */
.ornamento{
  display:block; width:74px; height:auto;
  margin:0 auto clamp(46px,6vw,80px);
  opacity:.9;
}
.ornamento--fim{ margin-block:clamp(46px,6vw,80px) 0 }
/* ornamento que abre uma seção: fica logo acima do título que anuncia */
.ornamento--abre{ margin-bottom:clamp(20px,2.4vw,30px) }

.fio-central{
  width:74px; height:1px; background:var(--fio);
  border:0; margin:0 auto;
}

/* ---------- hero ---------- */

.hero{ background:var(--plaster); padding-block:clamp(48px,6vw,84px) clamp(64px,8vw,104px) }
.hero__grade{ display:grid; gap:clamp(40px,5vw,72px) }

.lockup{ text-align:center; margin-bottom:clamp(32px,4vw,46px) }
.lockup__marca{
  font-family:var(--marca);
  font-size:clamp(54px,13vw,102px); line-height:1; letter-spacing:.035em; margin:0;
}
.lockup__fio{ width:min(70%,320px); height:1.5px; background:var(--clay); border:0; margin:14px auto }
.lockup__sub{ margin:0 auto; font-size:clamp(15px,1.9vw,18px) }

.hero__texto{ text-align:center }
.hero__texto h1{ margin-bottom:22px }
.hero__texto .led{ margin-inline:auto; max-width:46ch }
.hero__acoes{ display:flex; flex-direction:column; gap:12px; margin-top:34px; align-items:center }
.hero__nota{ margin:18px auto 0; font-size:14px; color:var(--ink-2) }
.hero__credencial{ margin:12px auto 0; max-width:46ch; font-size:15px; color:var(--ink-2) }
@media (min-width:600px){ .hero__acoes{ flex-direction:row; justify-content:center; flex-wrap:wrap } }

@media (min-width:1024px){
  /* no desktop a marca já está no cabeçalho — o hero abre direto na frase */
  .hero{ padding-block:clamp(72px,7vw,104px) clamp(72px,8vw,112px) }
  .lockup{ display:none }
  .hero__texto h1{ font-size:clamp(44px,4.1vw,60px) }
  .hero__texto .led{ margin-top:24px; font-size:clamp(17px,1.35vw,19.5px) }
  .hero__acoes{ margin-top:40px }
  .hero__grade{ grid-template-columns:1.08fr .92fr; align-items:center; gap:clamp(48px,6vw,88px) }
  .hero__quadro{
    aspect-ratio:3/4;
    /* TROCA DA IMAGEM DO HERO: basta pôr o arquivo em site/img/ e mudar o nome aqui. */
    background:url("../img/pintura-hero.jpg") center/cover no-repeat;
  }
}
.hero__quadro{ display:none }
@media (min-width:1024px){ .hero__quadro{ display:block } }

/* ---------- lista de dores ---------- */

.dores{ display:grid; gap:0 }
.dor{ padding-block:clamp(26px,3vw,34px); border-top:1px solid var(--fio) }
.dor:last-child{ border-bottom:1px solid var(--fio) }
.dor h3{ margin-bottom:7px }
.dor p{ margin:0; color:var(--ink-2); font-size:16.5px }
@media (min-width:760px){
  .dores{ grid-template-columns:1fr 1fr; column-gap:clamp(40px,6vw,88px) }
  .dor:nth-child(2){ border-top:1px solid var(--fio) }
  .dor:nth-child(3){ border-bottom:0 }
  .dor:last-child{ border-bottom:0 }
  .dores{ border-bottom:1px solid var(--fio) }
}

/* ---------- ofertas ---------- */

.ofertas{ display:grid }
.oferta{ padding-block:clamp(28px,3.2vw,38px); border-top:1px solid var(--fio); display:grid; gap:9px }
.oferta:last-child{ border-bottom:1px solid var(--fio) }
.oferta h3{ color:var(--clay) }
.oferta p{ margin:0; color:var(--ink-2) }
@media (min-width:880px){
  .oferta{ grid-template-columns:minmax(230px,.85fr) 2fr; gap:clamp(28px,5vw,64px); align-items:start }
  .oferta h3{ margin-top:2px }
}
.acao-central{ display:flex; justify-content:center; margin-top:clamp(36px,4.5vw,56px) }

/* ---------- quem atende ---------- */

.equipe{ display:grid; gap:clamp(44px,5vw,56px) }

.pessoa{ text-align:center }
.pessoa__retrato{
  width:100%; max-width:196px; aspect-ratio:7/8;
  border-radius:999px 999px 0 0; overflow:hidden;
  background:var(--plaster-2);
  border:1px solid var(--fio);
  margin:0 auto 20px;
  transition:transform var(--medio) var(--ease);
}
.pessoa:hover .pessoa__retrato{ transform:translateY(-5px) }
.pessoa__retrato img{ width:100%; height:100%; object-fit:cover; object-position:center 30% }
.pessoa h3{ margin-bottom:5px }
.pessoa__meta{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:2px 14px; margin:0 0 14px; max-width:none; font-size:14px; line-height:1.5;
}
.pessoa__crp{ color:var(--ink-2) }
.pessoa__modo{ color:var(--clay) }
.pessoa__bio{ color:var(--ink-2); font-size:16.5px; max-width:42ch; margin:0 auto 10px }
.pessoa__publico{ font-size:15.5px; color:var(--ink-2); max-width:42ch; margin-inline:auto }
.pessoa__publico span{ color:var(--clay); font-weight:500 }

@media (min-width:820px){
  .equipe{ gap:0; border-top:1px solid var(--fio) }
  .pessoa{
    display:grid; grid-template-columns:196px 1fr; grid-template-rows:auto auto auto 1fr;
    gap:0 clamp(36px,4vw,56px);
    align-items:start; text-align:left;
    padding-block:clamp(38px,4vw,52px);
    border-bottom:1px solid var(--fio);
  }
  .pessoa__retrato{ grid-row:1/span 4; margin:0 }
  .pessoa h3{ margin-top:-4px }
  .pessoa__meta{ justify-content:flex-start; gap:2px 16px }
  .pessoa__bio,.pessoa__publico{ margin-inline:0; max-width:68ch }
}

/* ---------- a clínica ---------- */

.clinica{ display:grid; gap:clamp(36px,4.5vw,64px); align-items:center }
@media (min-width:880px){ .clinica{ grid-template-columns:1fr 1fr } }
.clinica__quadro{
  aspect-ratio:4/3; background:url("../img/pintura-alta.jpg") center 62%/cover no-repeat;
}
@media (min-width:880px){ .clinica__quadro{ aspect-ratio:3/4 } }

/* ---------- como funciona ---------- */

.passos{ display:grid }
.passo{ border-top:1px solid var(--fio-claro); padding-block:clamp(26px,3vw,36px); display:grid; gap:9px }
.passo:last-child{ border-bottom:1px solid var(--fio-claro) }
.passo__n{ font-family:var(--titulo); font-size:15px; color:#c98b7f; letter-spacing:.1em; margin:0 }
.passo p{ margin:0; color:var(--plaster) }
@media (min-width:820px){
  .passo{ grid-template-columns:70px minmax(200px,1fr) 2fr; gap:clamp(20px,3.5vw,44px); align-items:start }
  .passo__n{ padding-top:6px }
}

/* ---------- a pintura em tela cheia ---------- */

/* no celular a pintura aparece inteira e o texto vem abaixo;
   no desktop o texto ocupa o vazio pintado à direita da tela */
.quadro-largo{ background:var(--plaster); padding-bottom:clamp(48px,6vw,72px) }
.quadro-largo__tela{
  aspect-ratio:16/10;
  background:url("../img/pintura-larga.jpg") left center/cover no-repeat;
  margin-bottom:clamp(34px,4.5vw,48px);
}
.quadro-largo__texto{ text-align:center }
@media (min-width:900px){
  .quadro-largo{
    padding:0;
    min-height:clamp(460px,46vw,700px);
    display:grid; align-items:center;
    background:url("../img/pintura-larga.jpg") left center/cover no-repeat;
  }
  .quadro-largo__tela{ display:none }
  .quadro-largo__texto{ text-align:left; margin-left:auto; width:min(42%,400px) }
}
.quadro-largo blockquote{
  margin:0;
  font-family:var(--titulo);
  font-size:clamp(27px,4.4vw,44px); line-height:1.16; letter-spacing:-.017em;
  text-wrap:balance;
}
.quadro-largo cite{
  display:block; margin-top:18px;
  font-family:var(--corpo); font-style:normal; font-size:15px; color:var(--ink-2);
}

/* ---------- biblioteca (chamada) ---------- */

.bibl__lista{ display:grid; gap:28px; margin-bottom:clamp(36px,4.5vw,52px); text-align:center }
.bibl__item h3{ font-family:var(--corpo); font-size:17px; font-weight:500; color:var(--clay); margin-bottom:4px }
.bibl__item p{ margin:0 auto; color:var(--ink-2); font-size:16.5px; max-width:34ch }
@media (min-width:800px){ .bibl__lista{ grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,48px) } }

/* ---------- FAQ ---------- */

.faq{ border-top:1px solid var(--fio) }
.faq__item{ border-bottom:1px solid var(--fio) }
.faq__botao{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:24px 0; text-align:left;
  font-family:var(--titulo); font-size:clamp(18px,2.1vw,21px); line-height:1.35; color:var(--ink);
  transition:color var(--rapido) var(--ease);
}
.faq__botao:hover{ color:var(--clay) }
.faq__sinal{ flex:0 0 auto; width:18px; height:18px; margin-top:6px; position:relative }
.faq__sinal::before,.faq__sinal::after{
  content:""; position:absolute; inset:50% 0 auto 0; height:1.5px; background:var(--clay);
  transition:transform var(--medio) var(--ease);
}
.faq__sinal::after{ transform:rotate(90deg) }
.faq__botao[aria-expanded="true"] .faq__sinal::after{ transform:rotate(0deg) }
/* as respostas só ficam fechadas quando há JS para abri-las */
.js .faq__resposta{ overflow:hidden; height:0; transition:height var(--medio) var(--ease) }
.faq__resposta > div{ padding-bottom:26px }
.faq__resposta p{ color:var(--ink-2); margin:0; max-width:66ch }

/* ---------- contato ---------- */

.contato{ text-align:center }
.contato p{ margin-inline:auto }
.contato__acoes{ display:flex; flex-direction:column; gap:12px; margin-top:34px; align-items:center }
@media (min-width:600px){ .contato__acoes{ flex-direction:row; justify-content:center; flex-wrap:wrap } }
.contato__dados{
  display:flex; flex-direction:column; gap:8px; align-items:center;
  margin-top:clamp(38px,4.5vw,54px); padding-top:clamp(30px,3.5vw,40px);
  border-top:1px solid var(--fio-claro);
}
.contato__dados a{ color:var(--canvas); font-size:19px; text-decoration:none; border-bottom:1px solid rgba(233,230,222,.35) }
.contato__dados a:hover{ color:var(--canvas); border-color:var(--canvas) }
.contato__dados .miudo{ color:var(--plaster); margin-top:0; max-width:44ch }

/* ---------- rodapé ---------- */

.rodape{ background:var(--plaster); padding-block:clamp(52px,6vw,76px) }
.rodape__grade{ display:grid; gap:30px; text-align:center; justify-items:center }
@media (min-width:820px){
  .rodape__grade{ grid-template-columns:1fr auto; align-items:end; text-align:left; justify-items:stretch }
}
.rodape .rodape__marca{ font-family:var(--marca); font-size:clamp(56px,7vw,72px); color:var(--ink); line-height:1; letter-spacing:.045em; margin:0 0 12px }
.rodape p{ margin:0 auto; font-size:14px; color:var(--ink-2) }
@media (min-width:820px){ .rodape p{ margin:0 } }
.rodape__links{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center }
.rodape__links a{ font-size:15px }
.rodape__codigos{ display:flex; flex-direction:column; gap:4px; margin-top:18px !important }
.rodape__codigos a{ font-size:14px }

/* ---------- barra fixa de WhatsApp (celular) ---------- */

.barra-zap{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:rgba(253,253,252,.93);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--fio);
  transform:translateY(115%);
  transition:transform var(--medio) var(--ease);
}
.barra-zap[data-visivel="true"]{ transform:none }
.barra-zap .botao{ width:100% }
@media (min-width:980px){ .barra-zap{ display:none } }

/* ---------- revelação ao rolar ---------- */

.js [data-revela]{
  opacity:0; transform:translateY(10px);
  transition:opacity 680ms var(--ease), transform 680ms var(--ease);
}
.js [data-revela].vista{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  .faixa__trilho{ animation:none !important }
  .quadro-largo{ background-attachment:scroll !important }
  .js [data-revela]{ opacity:1 !important; transform:none !important; transition:none }
  *,*::before,*::after{ transition-duration:1ms !important; animation-duration:1ms !important }
}

/* ---------- biblioteca (página) ---------- */

.bibl-cabeca{ background:var(--plaster); padding-block:clamp(44px,5.5vw,76px) clamp(40px,5vw,64px); text-align:center }
.bibl-cabeca h1{ margin-block:16px 18px }
.bibl-cabeca p{ margin-inline:auto; max-width:52ch }

.filtros{ display:flex; flex-wrap:wrap; gap:26px; justify-content:center; padding-block:clamp(32px,4vw,48px) 0 }
.filtro{
  background:none; border:0; padding:4px 0 9px; cursor:pointer;
  font-family:var(--corpo); font-size:16px; color:var(--ink-2); position:relative;
}
.filtro::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--clay);
  transition:right var(--medio) var(--ease);
}
.filtro[aria-pressed="true"]{ color:var(--ink); font-weight:500 }
.filtro[aria-pressed="true"]::after,.filtro:hover::after{ right:0 }

.acervo{ display:grid; gap:clamp(56px,7vw,88px) }
.grupo[hidden]{ display:none }
.grupo__cabeca{ margin-bottom:clamp(18px,2.4vw,26px) }
.grupo__cabeca h2{ font-size:clamp(26px,3.4vw,34px) }
.grupo__cabeca p{ margin:8px 0 0 }
.grupo__sub{
  font-family:var(--corpo); font-size:14px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--clay); margin:clamp(28px,3.4vw,38px) 0 4px;
}
.entrada{ border-top:1px solid var(--fio); padding-block:clamp(22px,2.6vw,30px); display:grid; gap:8px }
.entrada:last-child{ border-bottom:1px solid var(--fio) }
.entrada h3{ font-size:clamp(19px,2.2vw,22px); line-height:1.35 }
.entrada p{ margin:0 }
.entrada__meta{ font-size:14px }
.entrada__acao{ justify-self:start; font-size:16px; font-weight:500 }

.obras{ list-style:none; margin:0; padding:0; border-top:1px solid var(--fio) }
.obras li{ border-bottom:1px solid var(--fio); padding-block:14px; display:grid; gap:2px }
.obra__titulo{ font-family:var(--titulo); font-size:clamp(18px,2vw,20px); line-height:1.35 }
.obra__meta{ font-size:15px; color:var(--ink-2) }
@media (min-width:760px){
  .obras li{ grid-template-columns:1fr auto; gap:24px; align-items:baseline }
  .obra__meta{ text-align:right }
}
.vazio{ padding-block:52px; color:var(--ink-2); text-align:center }

/* ---------- navegadores antigos sem aspect-ratio (iPhone com iOS 14 ou anterior) ---------- */
@supports not (aspect-ratio:1/1){
  .clinica__quadro{ min-height:320px }
  .quadro-largo__tela{ min-height:230px }
  .hero__quadro{ min-height:520px }
  .pessoa__retrato{ height:224px }
}

/* ---------- página 404 ---------- */
.erro{ text-align:center; padding-block:clamp(72px,12vw,140px) }
.erro h1{ margin-block:22px 18px }
.erro p{ margin-inline:auto }