/* Instituto Ametista — Clínica de Reabilitação em Teófilo Otoni - MG
   Assinatura desta cidade: hero TIPOGRÁFICO PURO (sem foto, só cor e tipo
   grande), nav TOP-SÓLIDO com barra de contato acima, estrutura em TRÊS
   COLUNAS DE CARTÃO com foto no topo, shape motif BLOCOS COM SOMBRA PLANA
   (offset sólido, sem blur, sem arredondamento).
   Não repetir em nenhuma irmã da rede. */

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:600 700;font-display:swap;src:url('/fonts/bodonimoda-latin.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url('/fonts/hankengrotesk-latin.woff2') format('woff2')}

:root{
  --teal:#24818F;
  --teal-escuro:#123E45;
  --acao:#1A5F69;
  --fundo:#F4F8F8;
  --ink:#16232A;
  --ink-suave:#4C6067;
  --papel:#FFFFFF;
  --linha:#D8E4E5;
  --corpo:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Bodoni Moda',Georgia,serif;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --secao-y:clamp(3rem,7vw,5.5rem);
  --sombra-plana:6px 6px 0 var(--teal-escuro);
  --sombra-plana-clara:6px 6px 0 rgb(18 62 69 / .18);
  --teal-fundo-texto:#20707D;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;font:400 1.05rem/1.65 var(--corpo);color:var(--ink);background:var(--papel);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
.fonte a,.legal a{text-decoration:underline}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0 0 .55em;color:var(--ink)}
h2{font-size:clamp(1.55rem,2.6vw,2.15rem);max-width:20em}
h3{font-size:1.15rem}
p{margin:0 0 1em}
strong,b{font-weight:700}
.limite{width:min(1180px,100% - var(--gut)*2);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.olho{font:700 .78rem/1 var(--corpo);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin:0 0 .6em}

/* ---------- barra de contato + nav top-solido ---------- */
.faixa-contato{background:var(--teal-escuro);color:#fff;font-size:.85rem}
.faixa-contato__interno{width:min(1180px,100% - var(--gut)*2);margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap}
.faixa-contato a{color:#fff;font-weight:700}
.faixa-contato span{opacity:.85}

.topo{background:var(--teal-fundo-texto);border-bottom:4px solid var(--teal-escuro)}
.topo__interno{width:min(1180px,100% - var(--gut)*2);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.marca{display:flex;align-items:center;gap:.6rem;color:#fff}
.marca:hover{text-decoration:none}
.marca__logo{width:34px;height:34px;object-fit:contain}
.marca__texto{display:flex;flex-direction:column;line-height:1.2}
.marca__texto strong{font-family:var(--display);font-size:1.08rem;color:#fff}
.marca__texto em{font-style:normal;font-size:.7rem;color:rgb(255 255 255 / .9)}
.botao{display:inline-flex;align-items:center;gap:.5rem;font:700 .95rem/1 var(--corpo);padding:.85rem 1.4rem;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;border:2px solid transparent}
.botao:hover{text-decoration:none}
.botao--solido{background:#fff;color:var(--teal-escuro);box-shadow:var(--sombra-plana)}
.botao--solido:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--teal-escuro)}
.botao--linha{background:transparent;color:#fff;border-color:#fff}
.botao--linha:hover{background:rgb(255 255 255 / .14)}
.botao--linha-tinta{background:transparent;color:var(--teal);border-color:var(--teal)}
.botao--linha-tinta:hover{background:var(--fundo)}
.botao--mini{flex:0 0 auto;padding:.6rem 1.1rem;font-size:.88rem;background:#fff;color:var(--teal-escuro)}

/* ---------- shape motif: blocos com sombra plana (offset solido, sem blur) ---------- */
.bloco-plano{box-shadow:var(--sombra-plana);border:2px solid var(--teal-escuro)}
.bloco-plano--claro{box-shadow:var(--sombra-plana-clara);border:1px solid var(--linha)}

/* ---------- hero: TIPOGRAFICO PURO, sem foto ---------- */
.hero{background:var(--teal-fundo-texto);color:#fff;padding-block:clamp(3.5rem,9vw,6.5rem);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;z-index:0;right:-8%;top:-18%;width:60%;height:140%;background:var(--teal-escuro);clip-path:polygon(45% 0,100% 20%,80% 100%,20% 85%);opacity:.35}
.hero__interno{position:relative;z-index:1;max-width:44em}
.hero__selo{display:inline-flex;align-items:center;gap:.5rem;background:rgb(255 255 255 / .14);border:1px solid rgb(255 255 255 / .4);color:#fff;padding:.5rem 1rem;font-size:.8rem;margin-bottom:1.4rem;font-weight:700}
.hero h1{font-size:clamp(2.1rem,5.6vw,3.6rem);max-width:15em;color:#fff}
.hero__olho{font:700 .95rem/1 var(--corpo);letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255 / .92);margin:0 0 .8em}
.hero__linha{font-size:clamp(1.05rem,1.3vw,1.2rem);color:rgb(255 255 255 / .92);max-width:36em}
.hero__acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin:1.4rem 0 1.1rem}
.hero__nota{font-size:.88rem;color:rgb(255 255 255 / .9);margin:0;max-width:34em}

/* ---------- secoes ---------- */
.secao{padding-block:var(--secao-y)}
.secao--tinta{background:var(--fundo)}
.secao--acao{background:var(--teal);color:#fff;text-align:center;overflow:hidden}
.secao--acao h2,.secao--acao p{color:#fff;margin-inline:auto}
.secao__cabecalho{max-width:42em;margin-bottom:2.5rem}

.grade-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem}
.cartao{background:var(--papel);border:1px solid var(--linha);padding:1.4rem;box-shadow:0 1px 0 rgb(18 62 69 / .05)}
.cartao h3{font-size:1.1rem;margin-bottom:.5rem}
.cartao p{color:var(--ink-suave);font-size:.94rem;margin:0}

/* ---------- estrutura: TRES COLUNAS DE CARTAO com foto no topo, bloco-plano ---------- */
.cartoes-foto{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
@media (max-width:56rem){ .cartoes-foto{grid-template-columns:1fr} }
.cartao-foto{background:#fff}
.cartao-foto__img{aspect-ratio:4/3;overflow:hidden}
.cartao-foto__img img{width:100%;height:100%;object-fit:cover}
.cartao-foto__corpo{padding:1.3rem 1.4rem 1.6rem}
.cartao-foto__corpo strong{display:block;font-family:var(--display);font-size:1.15rem;margin-bottom:.3rem}
.cartao-foto__corpo span{color:var(--ink-suave);font-size:.92rem}
.aviso-fotos{font-size:.85rem;color:var(--ink-suave);margin-top:1.4rem}

.lista-check{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.lista-check li{display:flex;gap:.75rem;align-items:flex-start}
.lista-check li::before{content:"";flex:0 0 auto;width:10px;height:10px;background:var(--teal);margin-top:.5rem}
.lista-check strong{color:var(--ink)}

.faq{border-top:1px solid var(--linha)}
.faq__item{border-bottom:1px solid var(--linha)}
.faq__item summary{cursor:pointer;padding:1.1rem 0;font-weight:700;display:flex;justify-content:space-between;align-items:center;list-style:none;gap:1rem}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-size:1.3rem;color:var(--teal);transition:transform .2s ease;flex:0 0 auto}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item p{color:var(--ink-suave);padding-bottom:1.1rem;margin:0}

.mapa__caixa{overflow:hidden;box-shadow:var(--sombra-plana-clara);aspect-ratio:16/10}
.mapa__caixa iframe{width:100%;height:100%;border:0}
.mapa__legenda{font-size:.9rem;color:var(--ink-suave);margin-top:.9rem}

.zap{position:fixed;right:1rem;bottom:1rem;z-index:50;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#1F8A3B;color:#fff;box-shadow:0 3px 12px rgb(18 62 69 / .3)}
.zap:hover{background:#1A7632;text-decoration:none}
.zap svg{width:26px;height:26px}
@media (min-width:64rem){ .zap{right:1.5rem} }

.revela{opacity:0;transform:translateY(14px);transition:opacity .35s ease-out,transform .35s ease-out}
.revela.dentro{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.revela{opacity:1;transform:none;transition:none}}

.rodape{background:var(--teal-escuro);color:rgb(255 255 255 / .9);padding-block:2.5rem;font-size:.9rem;margin-top:2.5rem}
.rodape strong{color:#fff}
.rodape__links{display:flex;gap:1.2rem;flex-wrap:wrap;margin:.8rem 0}
.rodape__links a{color:rgb(255 255 255 / .85)}
.fonte{border-top:1px solid rgb(255 255 255 / .22);margin-top:1rem;padding-top:.8rem;font-size:.82rem;color:rgb(255 255 255 / .75)}

@media (max-width:28rem){
  .topo__interno{min-height:60px}
  .faixa-contato__interno{justify-content:center;text-align:center}
}