/* ==========================================================================
   HORG — Hospital de Olhos Rollemberg Gois
   Direção: vitrines em fundo carvão, serifada em peso regular, muito respiro.
   O recorte curvo de cada foto é o arco do limbo, a borda da córnea.
   ========================================================================== */

:root{
  /* superfícies */
  --void:#16181A;          /* carvão: a base das vitrines */
  --void-2:#1E2124;        /* elevação sobre o carvão */
  --paper:#FFFFFF;         /* conteúdo denso vive no claro */
  --paper-2:#F4F5F6;
  --line:#E1E3E5;
  --line-void:#2E3235;

  /* texto */
  --on-void:#EDEDEB;
  --on-void-2:#B9BCBE;
  --on-void-mute:#8A8E91;
  --text:#3F3F3F;
  --text-strong:#16181A;
  --text-mute:#646668;

  /* acentos */
  --cobalt:#1F4FCC;        /* o azul do feixe de cobalto da lâmpada de fenda */
  --cobalt-soft:#EAF0FD;
  --vermilion:#D8432E;     /* só o arco da marca e o duocromo */
  --duo-green:#2E9B5B;

  /* tipos */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1240px;
  --gutter:clamp(20px,4.5vw,56px);
  --section:clamp(72px,10vw,150px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--serif);font-size:18px;line-height:1.6;font-weight:400;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
figure{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400;font-family:var(--serif);line-height:1.18;letter-spacing:-.005em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.on-void :focus-visible,.showcase :focus-visible,.ftr :focus-visible{outline-color:#7FA6FF}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Rótulo minúsculo: a voz que abre cada bloco ------------------------ */
.label{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);
  margin:0 0 20px;
}
.showcase .label,.ftr .label{color:var(--on-void-mute)}

/* Títulos de seção: serifada em peso regular, nunca negrito ---------- */
.sec{padding:var(--section) 0}
.sec-head{max-width:34ch;margin-bottom:clamp(40px,5.5vw,72px)}
.sec-head h2{font-size:clamp(32px,4.6vw,58px);line-height:1.14}
.sec-head .lede{
  font-family:var(--sans);font-size:clamp(16px,1.35vw,18px);line-height:1.6;
  color:var(--text-mute);max-width:52ch;margin-top:18px;
}
.sec-head.wide{max-width:48ch}

/* Botões: retangulares, discretos ------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.01em;line-height:1;
  padding:15px 22px;border:1px solid transparent;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-solid{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.btn-solid:hover{background:#173FA8;border-color:#173FA8}
.btn-line{background:transparent;color:var(--text-strong);border-color:var(--line)}
.btn-line:hover{border-color:var(--text-strong)}
.on-void .btn-line,.showcase .btn-line{color:var(--on-void);border-color:var(--line-void)}
.on-void .btn-line:hover,.showcase .btn-line:hover{border-color:var(--on-void);background:rgba(255,255,255,.04)}

/* Barra utilitária ---------------------------------------------------- */
.util{background:var(--void);color:var(--on-void-2);border-bottom:1px solid var(--line-void);
  font-family:var(--sans);font-size:12.5px;letter-spacing:.01em}
.util .wrap{display:flex;align-items:center;gap:26px;min-height:42px;flex-wrap:wrap}
.util a{color:var(--on-void);text-decoration:none}
.util a:hover{text-decoration:underline;text-underline-offset:3px}
.util .urg{color:#FF8A73;font-weight:600}
.util .sp{flex:1}
.util .hide{display:none}
@media (min-width:900px){.util .hide{display:inline}}

/* Cabeçalho ----------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--void);color:var(--on-void);
  border-bottom:1px solid var(--line-void)}
.hdr .wrap{display:flex;align-items:center;gap:32px;min-height:78px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--on-void)}
.brand svg{width:36px;height:36px;flex:none}
.brand .nm{font-family:var(--serif);font-size:26px;letter-spacing:.1em;line-height:1}

.nav{margin-left:auto;display:none;align-items:center;gap:25px}
.nav a{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--on-void-2);
  text-decoration:none;white-space:nowrap;transition:color .15s}
.nav a:hover{color:var(--on-void)}
.hdr .btn{display:none;padding:12px 18px}
.burger{margin-left:auto;display:inline-flex;align-items:center;gap:9px;background:none;
  border:1px solid var(--line-void);color:var(--on-void);padding:11px 15px;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:600}
@media (min-width:1080px){.nav{display:flex}.hdr .btn{display:inline-flex}.burger{display:none}}
.mnav{display:none;background:var(--void);border-bottom:1px solid var(--line-void)}
.mnav.open{display:block}
.mnav ul{list-style:none;margin:0;padding:6px var(--gutter) 22px}
.mnav a{display:block;padding:14px 0;font-family:var(--sans);font-size:17px;font-weight:500;
  color:var(--on-void);text-decoration:none;border-bottom:1px solid var(--line-void)}
.mnav .btn{margin:20px var(--gutter) 26px;width:calc(100% - var(--gutter)*2);justify-content:center}

/* ===== VITRINE =======================================================
   Foto alta recortada pelo arco do limbo; texto flutuando no carvão.  */
.showcase{background:var(--void);color:var(--on-void);position:relative;overflow:hidden}
.showcase-media{position:relative;overflow:hidden;background:var(--void-2)}
.showcase-media img{width:100%;height:100%;object-fit:cover}
.showcase-body{display:flex;flex-direction:column;justify-content:center}
.showcase h2{font-size:clamp(30px,3.6vw,46px);line-height:1.25;color:var(--on-void);max-width:22ch}
.showcase p{font-family:var(--sans);font-size:clamp(15.5px,1.25vw,17px);line-height:1.65;
  color:var(--on-void-2);max-width:46ch}
.showcase .cap{position:absolute;left:0;bottom:0;padding:10px 15px;font-family:var(--sans);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-void);
  background:rgba(22,24,26,.6);backdrop-filter:blur(6px)}

@media (min-width:1000px){
  .showcase{display:grid;grid-template-columns:26% 1fr;min-height:min(92vh,880px)}
  /* o arco: raio vertical bem maior que a altura, então só a barriga da elipse aparece */
  .showcase-media{clip-path:ellipse(100% 118% at 0% 50%)}
  .showcase-body{padding:clamp(64px,7vw,110px) var(--gutter) clamp(64px,7vw,110px) clamp(48px,6vw,104px);
    max-width:calc(var(--wrap) * .74)}
  .showcase.flip{grid-template-columns:1fr 26%}
  .showcase.flip .showcase-media{order:2;clip-path:ellipse(100% 118% at 100% 50%)}
  .showcase.flip .showcase-body{order:1;align-items:flex-start;
    padding-left:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-right:clamp(48px,6vw,104px)}
}
@media (max-width:999px){
  .showcase-media{aspect-ratio:16/10;clip-path:ellipse(118% 100% at 50% 0%)}
  .showcase-body{padding:clamp(40px,8vw,64px) var(--gutter) clamp(48px,9vw,72px)}
}

/* ===== HERÓI: a tabela de Snellen ==================================== */
.hero .showcase-body{justify-content:center}
.chart{margin:0}
.chart .row{display:grid;grid-template-columns:4.4em 1fr;align-items:baseline;column-gap:14px;font-size:15px}
.chart .row + .row{margin-top:clamp(12px,1.5vw,22px)}
.chart .acu{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--on-void-mute)}
.chart .tx{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.05em;
  line-height:1;color:var(--on-void);white-space:nowrap}
.r1 .tx{font-size:min(9.6vw,124px);letter-spacing:.02em}
.r2 .tx{font-size:min(5.2vw,66px);letter-spacing:.035em}
.r3 .tx{font-size:min(3.5vw,45px)}
.r4 .tx{font-size:min(1.85vw,24px);letter-spacing:.07em}
.r5 .tx{font-size:min(1.25vw,16px);letter-spacing:.1em;color:var(--on-void-2)}
.r6 .tx{font-size:min(1.15vw,15px);letter-spacing:.1em;color:var(--on-void-2)}
.r7 .tx{font-size:min(1.02vw,13.5px);letter-spacing:.11em;color:var(--on-void-mute)}
.duo{display:grid;grid-template-columns:4.4em 1fr;column-gap:14px;font-size:15px;margin-top:clamp(20px,2.6vw,34px)}
.duo .bars{display:grid;grid-template-columns:1fr 1fr;height:5px;max-width:340px}
.duo .bars i{display:block}
.duo .bars i:first-child{background:var(--vermilion)}
.duo .bars i:last-child{background:var(--duo-green)}
.hero-foot{display:grid;grid-template-columns:4.4em 1fr;column-gap:14px;font-size:15px;
  margin-top:clamp(30px,3.6vw,46px)}
.hero-note{font-family:var(--sans);font-size:clamp(15px,1.2vw,16.5px);line-height:1.6;
  color:var(--on-void-2);max-width:40ch;margin:0 0 26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* o foco: cada linha sai do desfoque, como o foróptero girando */
.chart .tx{opacity:0;filter:blur(9px)}
html.nojs .chart .tx{opacity:1;filter:none}
.ready .chart .tx{animation:focus 1s cubic-bezier(.2,.7,.2,1) forwards}
.ready .r1 .tx{animation-delay:.06s}.ready .r2 .tx{animation-delay:.22s}
.ready .r3 .tx{animation-delay:.38s}.ready .r4 .tx{animation-delay:.54s}
.ready .r5 .tx{animation-delay:.70s}.ready .r6 .tx{animation-delay:.86s}
.ready .r7 .tx{animation-delay:1.02s}
@keyframes focus{from{opacity:0;filter:blur(9px)}to{opacity:1;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.chart .tx{opacity:1;filter:none;animation:none!important}}

@media (max-width:999px){
  .chart .row,.duo,.hero-foot{grid-template-columns:3.4em 1fr;column-gap:10px}
  .r1 .tx{font-size:15.5vw}.r2 .tx{font-size:8vw}.r3 .tx{font-size:5.6vw}
  .r4 .tx,.r5 .tx,.r6 .tx,.r7 .tx{white-space:normal;line-height:1.35}
  .r4 .tx{font-size:16px}.r5 .tx{font-size:13px}.r6 .tx{font-size:13px}.r7 .tx{font-size:12.5px}
  .hero-cta .btn{flex:1;justify-content:center}
}

/* ===== Ações rápidas ================================================= */
.quick{background:var(--paper);border-bottom:1px solid var(--line)}
.quick ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr}
@media (min-width:640px){.quick ul{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.quick ul{grid-template-columns:repeat(4,1fr)}}
.quick li{border-bottom:1px solid var(--line)}
@media (min-width:640px){.quick li{border-right:1px solid var(--line)}.quick li:nth-child(2n){border-right:0}}
@media (min-width:1000px){.quick li{border-bottom:0}.quick li:nth-child(2n){border-right:1px solid var(--line)}.quick li:last-child{border-right:0}}
.quick a{display:flex;flex-direction:column;gap:9px;padding:clamp(26px,3vw,38px) clamp(20px,2.4vw,34px);
  text-decoration:none;height:100%;transition:background .2s}
.quick a:hover{background:var(--paper-2)}
.quick svg{width:22px;height:22px;color:var(--cobalt)}
.quick b{font-family:var(--sans);font-size:16.5px;font-weight:600;color:var(--text-strong)}
.quick span{font-family:var(--sans);font-size:14px;color:var(--text-mute);line-height:1.5}

/* ===== O hospital ==================================================== */
.about{display:grid;gap:clamp(36px,5vw,80px);grid-template-columns:1fr}
@media (min-width:920px){.about{grid-template-columns:1.25fr .75fr}}
.about .lead{font-size:clamp(21px,2.1vw,27px);line-height:1.45;color:var(--text-strong);margin-bottom:1.1em}
.about p{font-family:var(--sans);font-size:16.5px;line-height:1.7;color:var(--text-mute)}
.about .lead{font-family:var(--serif)}
.ficha{border-top:1px solid var(--text-strong);padding-top:22px}
.ficha dl{margin:0;display:grid;grid-template-columns:1fr;gap:0}
.ficha .r{display:grid;grid-template-columns:1fr;gap:2px;padding:15px 0;border-bottom:1px solid var(--line)}
@media (min-width:520px){.ficha .r{grid-template-columns:9.5em 1fr;gap:16px;align-items:baseline}}
.ficha dt{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
.ficha dd{margin:0;font-family:var(--sans);font-size:15.5px;color:var(--text-strong)}
.mvv{display:grid;gap:30px;grid-template-columns:1fr;margin-top:clamp(44px,5vw,72px);
  padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
@media (min-width:720px){.mvv{grid-template-columns:repeat(3,1fr)}}
.mvv h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:12px}
.mvv p{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--text-strong);margin:0}

/* ===== Especialidades ================================================ */
.specs{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:620px){.specs{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.specs{grid-template-columns:repeat(3,1fr)}}
.spec{padding:clamp(26px,2.6vw,34px) 0;border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px}
@media (min-width:620px) and (max-width:1039px){
  .spec{padding-right:clamp(24px,2.6vw,40px)}
  .spec:nth-child(2n){padding-left:clamp(24px,2.6vw,40px);padding-right:0;border-left:1px solid var(--line)}
}
@media (min-width:1040px){
  .spec{padding-right:clamp(24px,2.4vw,38px)}
  .spec:nth-child(3n-1),.spec:nth-child(3n){padding-left:clamp(24px,2.4vw,38px);border-left:1px solid var(--line)}
  .spec:nth-child(3n){padding-right:0}
}
.spec .eye{width:104px;height:66px;color:#B9BDC0}
.spec h3{font-size:22px;line-height:1.25;color:var(--text-strong)}
.spec p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--text-mute);margin:0}
.spec .part{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--cobalt);margin-top:auto;padding-top:4px}
.eye path,.eye circle,.eye ellipse,.eye line{fill:none;stroke:currentColor;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hl-lens{--c-lens:var(--cobalt);--w-lens:2.4}
.hl-cornea{--c-cornea:var(--cobalt);--w-cornea:2.4}
.hl-retina{--c-retina:var(--cobalt);--w-retina:2.6}
.hl-glaucoma{--c-nerve:var(--cobalt);--w-nerve:2.4;--c-angle:var(--cobalt);--w-angle:2}
.hl-laser{--c-laser:var(--vermilion);--w-laser:2;--c-cornea:var(--cobalt);--w-cornea:2.1}
.hl-muscle{--c-muscle:var(--cobalt);--w-muscle:2.6}
.hl-lid{--c-lid:var(--cobalt);--w-lid:2.6}
.hl-contact{--c-contact:var(--cobalt);--w-contact:2.6}
.hl-uvea{--c-iris:var(--cobalt);--w-iris:2.8}
.hl-neuro{--c-nerve:var(--cobalt);--w-nerve:2.8}
.hl-peds{--c-sclera:var(--cobalt);--w-sclera:2.2}
.hl-onco{--c-sclera:var(--cobalt);--w-sclera:2;--c-retina:var(--cobalt);--w-retina:2.4}

/* ===== Condições A–Z ================================================= */
.az{columns:1;column-gap:clamp(28px,4vw,64px)}
@media (min-width:560px){.az{columns:2}}
@media (min-width:1000px){.az{columns:3}}
.az-g{break-inside:avoid;margin-bottom:30px}
.az-g h3{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--cobalt);
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.az-g ul{list-style:none;margin:0;padding:0}
.az-g li{font-family:var(--sans);font-size:15.5px;line-height:1.55;padding:5px 0;color:var(--text)}

/* ===== Cirurgias e exames: listas editoriais ========================= */
.rows{border-top:1px solid var(--text-strong)}
.rows .r{display:grid;grid-template-columns:1fr;gap:4px 40px;padding:20px 0;border-bottom:1px solid var(--line)}
@media (min-width:820px){.rows .r{grid-template-columns:15.5em 1fr;align-items:baseline}}
.rows dt{font-family:var(--sans);font-size:16.5px;font-weight:600;color:var(--text-strong)}
.rows dd{margin:0;font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--text-mute)}
.showcase .rows{border-top-color:var(--line-void)}
.showcase .rows .r{border-bottom-color:var(--line-void)}
.showcase .rows dt{color:var(--on-void)}
.showcase .rows dd{color:var(--on-void-2)}

.exams{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr}
@media (min-width:800px){.exams{grid-template-columns:repeat(3,1fr)}}
.exams h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);padding-bottom:12px;margin-bottom:6px;
  border-bottom:1px solid var(--text-strong)}
.exams ul{list-style:none;margin:0;padding:0}
.exams li{font-family:var(--sans);font-size:15.5px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--text-strong)}
.exams li em{display:block;font-style:normal;font-family:var(--serif);font-size:14.5px;color:var(--text-mute);margin-top:3px}

/* ===== Prepare sua visita ============================================ */
.steps{display:grid;gap:clamp(28px,3.4vw,48px);grid-template-columns:1fr}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border-top:1px solid var(--text-strong);padding-top:22px}
.step h3{font-size:21px;margin-bottom:14px;color:var(--text-strong)}
.step ul{list-style:none;margin:0;padding:0}
.step li{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--text-mute);
  padding:9px 0 9px 20px;position:relative;border-bottom:1px solid var(--line)}
.step li::before{content:"";position:absolute;left:0;top:17px;width:7px;height:1px;background:var(--cobalt)}
.warn{margin-top:clamp(30px,3.4vw,44px);padding:22px 24px;background:var(--cobalt-soft);
  border-left:2px solid var(--cobalt)}
.warn p{margin:0;font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--text-strong)}
.warn b{font-weight:600}

/* ===== Equipe ======================================================== */
.rt{border-top:1px solid var(--text-strong);padding:24px 0 30px;margin-bottom:clamp(30px,3.4vw,46px);
  display:grid;gap:10px 40px;grid-template-columns:1fr}
@media (min-width:820px){.rt{grid-template-columns:1fr auto;align-items:start}}
.rt h3{font-size:clamp(24px,2.4vw,30px);margin:6px 0 10px;color:var(--text-strong)}
.rt p{margin:0;font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--text-mute);max-width:58ch}
.rt .reg{font-family:var(--mono);font-size:12.5px;color:var(--text-mute);white-space:nowrap}
.team{list-style:none;margin:0;padding:0;border-top:1px solid var(--text-strong)}
.team li{display:grid;grid-template-columns:1fr;gap:3px 24px;padding:15px 0;border-bottom:1px solid var(--line)}
@media (min-width:820px){.team li{grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) 6.5em 5.5em;align-items:baseline}}
.team .n{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--text-strong)}
.team .a{font-family:var(--sans);font-size:14.5px;color:var(--text-mute)}
.team .c{font-family:var(--mono);font-size:12.5px;color:var(--text-mute)}
.thead{display:none}
@media (min-width:820px){
  .thead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.5fr) 6.5em 5.5em;gap:24px;
    font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-mute);padding-bottom:10px}
}
.tgroup{margin-top:clamp(34px,4vw,52px)}
.tgroup h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:14px}

/* ===== Convênios ===================================================== */
.plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.plans div{font-family:var(--sans);font-size:15px;color:var(--text-strong);padding:16px 18px;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.note{font-family:var(--sans);font-size:15.5px;line-height:1.65;color:var(--text-mute);max-width:64ch;margin-top:26px}

/* ===== Dicas ========================================================= */
.tips{display:grid;gap:clamp(20px,2.6vw,34px);grid-template-columns:1fr}
@media (min-width:760px){.tips{grid-template-columns:repeat(3,1fr)}}
.tip{display:flex;flex-direction:column}
.tip .im{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2);margin-bottom:20px}
.tip .im img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.tip:hover .im img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.tip .im img{transition:none}.tip:hover .im img{transform:none}}
.tip h3{font-size:21px;line-height:1.3;margin-bottom:10px}
.tip h3 a{text-decoration:none;color:var(--text-strong)}
.tip h3 a:hover{color:var(--cobalt)}
.tip p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--text-mute);margin:0 0 14px;flex:1}
.tip .more{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--cobalt);text-decoration:none}
.tip .more:hover{text-decoration:underline;text-underline-offset:3px}

/* ===== Contato ======================================================= */
.contact{display:grid;gap:clamp(30px,4vw,64px);grid-template-columns:1fr}
@media (min-width:920px){.contact{grid-template-columns:.85fr 1.15fr}}
.contact dl{margin:0;border-top:1px solid var(--text-strong)}
.contact .r{padding:18px 0;border-bottom:1px solid var(--line)}
.contact dt{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:6px}
.contact dd{margin:0;font-family:var(--sans);font-size:17.5px;font-weight:500;color:var(--text-strong)}
.contact dd a{text-decoration:none}
.contact dd a:hover{color:var(--cobalt)}
.contact dd small{display:block;font-weight:400;font-size:15px;color:var(--text-mute);margin-top:4px}
.contact .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.map{background:var(--paper-2);aspect-ratio:4/3;min-height:320px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}

/* ===== Rodapé ======================================================== */
.ftr{background:var(--void);color:var(--on-void-2);padding:clamp(56px,7vw,96px) 0 34px}
.ftr .cols{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:820px){.ftr .cols{grid-template-columns:1.5fr 1fr 1fr}}
.ftr .brand{color:var(--on-void)}

.ftr .blurb{font-family:var(--sans);font-size:15px;line-height:1.7;color:var(--on-void-mute);
  max-width:42ch;margin-top:20px}
.ftr h4{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-void-mute);margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin:8px 0;font-family:var(--sans);font-size:14.5px}
.ftr a{color:var(--on-void);text-decoration:none}
.ftr a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr .legal{margin-top:46px;padding-top:22px;border-top:1px solid var(--line-void);
  font-family:var(--sans);font-size:12px;color:var(--on-void-mute);
  display:flex;flex-wrap:wrap;gap:10px 36px;justify-content:space-between}

/* ===== Revelação ao rolar ============================================ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
html.nojs .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ===== Matérias ====================================================== */
.article{max-width:700px;margin:0 auto;padding:clamp(44px,6vw,84px) var(--gutter) var(--section)}
.article .back{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--cobalt);text-decoration:none}
.article h1{font-size:clamp(34px,5vw,56px);line-height:1.12;margin:22px 0 24px}
.article .lede{font-size:clamp(19px,2vw,23px);line-height:1.5;color:var(--text-strong)}
.article-hero{aspect-ratio:21/9;overflow:hidden;background:var(--paper-2);margin:34px 0 40px}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article h2{font-size:clamp(21px,2.2vw,26px);margin:42px 0 12px;color:var(--text-strong)}
.article p{font-family:var(--sans);font-size:16.5px;line-height:1.75;color:var(--text-mute)}
.article .cta{margin-top:52px;padding-top:28px;border-top:1px solid var(--text-strong);
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.article .cta p{margin:0;font-family:var(--serif);font-size:19px;color:var(--text-strong)}
.hl-all{--c-sclera:var(--cobalt);--w-sclera:2.2;--c-cornea:var(--cobalt);--w-cornea:2.2}

/* Ajustes finos para telas estreitas ---------------------------------- */
@media (max-width:999px){
  /* no celular o arco corta os cantos de baixo: a legenda cairia no vazio */
  .showcase .cap{display:none}
}
@media (max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}

/* ===== Páginas internas: especialidade e médico ====================== */
.showcase.compact{min-height:0}
@media (min-width:1000px){
  .showcase.compact{min-height:min(72vh,620px);grid-template-columns:24% 1fr}
}
.showcase.compact h1{font-size:clamp(34px,4.6vw,58px);line-height:1.14;color:var(--on-void);max-width:18ch;margin:0 0 20px}
.showcase.compact .lede{font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);line-height:1.5;
  color:var(--on-void-2);max-width:44ch}
.crumb{font-family:var(--sans);font-size:12.5px;color:var(--on-void-mute);margin:0 0 22px}
.crumb a{color:var(--on-void-2);text-decoration:none}
.crumb a:hover{color:var(--on-void);text-decoration:underline;text-underline-offset:3px}

/* corpo de texto de página interna */
.prose{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr;align-items:start}
@media (min-width:920px){.prose{grid-template-columns:1.35fr .65fr}}
.prose .body p{font-family:var(--sans);font-size:17px;line-height:1.75;color:var(--text-mute);max-width:62ch}
.prose .body p:first-child{font-family:var(--serif);font-size:clamp(20px,1.9vw,24px);line-height:1.5;color:var(--text-strong)}
.aside-eye{border-top:1px solid var(--text-strong);padding-top:22px}
.aside-eye .eye{width:100%;max-width:230px;height:auto;aspect-ratio:120/80;color:#B9BDC0;margin-bottom:16px}
.aside-eye h3{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);margin-bottom:8px}
.aside-eye p{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--text-mute);margin:0}

/* listas de sinais e exames lado a lado */
.duo-cols{display:grid;gap:clamp(30px,4vw,60px);grid-template-columns:1fr}
@media (min-width:820px){.duo-cols{grid-template-columns:1fr 1fr}}
.blk h3{font-size:23px;margin-bottom:18px;color:var(--text-strong)}
.blk ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--text-strong)}
.blk li{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--text-mute);
  padding:12px 0 12px 20px;position:relative;border-bottom:1px solid var(--line)}
.blk li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:1px;background:var(--cobalt)}

/* médicos: cartões com retrato */
.docs{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.doc{display:flex;flex-direction:column;text-decoration:none}
.doc .por{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);margin-bottom:16px}
.doc .por img,.doc .por svg{width:100%;height:100%;object-fit:cover;display:block}
.doc .nm2{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--text-strong);line-height:1.35}
.doc .ar{font-family:var(--sans);font-size:14px;color:var(--text-mute);margin-top:5px;line-height:1.5}
.doc .rg{font-family:var(--mono);font-size:12px;color:var(--text-mute);margin-top:8px}
.doc:hover .nm2{color:var(--cobalt)}
.doc:hover .por img{transform:scale(1.03)}
.doc .por img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.doc .por img{transition:none}.doc:hover .por img{transform:none}}

/* ficha do médico */
.medico{display:grid;gap:clamp(30px,4.5vw,64px);grid-template-columns:1fr}
@media (min-width:820px){.medico{grid-template-columns:300px 1fr}}
.medico .por{aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.medico .por img,.medico .por svg{width:100%;height:100%;object-fit:cover;display:block}
.medico h1{font-size:clamp(30px,4vw,46px);line-height:1.15;margin:0 0 12px;color:var(--text-strong)}
.medico .role{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);margin:0 0 14px}
.medico .reg2{font-family:var(--mono);font-size:13.5px;color:var(--text-mute);margin:0 0 26px}
.medico .sum{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);line-height:1.5;color:var(--text-strong);margin:0 0 26px}
.medico .body p{font-family:var(--sans);font-size:16.5px;line-height:1.75;color:var(--text-mute);max-width:60ch}
.fblock{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--text-strong);padding-top:22px}
.fblock h2{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cobalt);margin:0 0 14px}
.fblock ul{list-style:none;margin:0;padding:0}
.fblock li{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--text-strong);
  padding:11px 0;border-bottom:1px solid var(--line)}
.pend{font-family:var(--sans);font-size:15.5px;line-height:1.65;color:var(--text-mute);margin:0}
.chips2{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.chips2 a{display:inline-block;font-family:var(--sans);font-size:14.5px;color:var(--text-strong);
  border:1px solid var(--line);padding:9px 14px;text-decoration:none;transition:border-color .2s,color .2s}
.chips2 a:hover{border-color:var(--cobalt);color:var(--cobalt)}

/* faixa final de chamada */
.endcta{background:var(--void);color:var(--on-void);padding:clamp(56px,7vw,96px) 0}
.endcta h2{font-size:clamp(28px,3.4vw,42px);color:var(--on-void);max-width:20ch;margin:0 0 18px}
.endcta p{font-family:var(--sans);font-size:16.5px;line-height:1.65;color:var(--on-void-2);max-width:48ch;margin:0 0 30px}
.endcta .acts{display:flex;gap:12px;flex-wrap:wrap}

/* grade de especialidades como índice */
.esp-index{display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--line)}
@media (min-width:700px){.esp-index{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.esp-index{grid-template-columns:repeat(3,1fr)}}
.chips2 li{border:0;padding:0}
.fblock ul:not(.chips2) li:last-child{border-bottom:0}

/* ===== Herói em slides =============================================== */
.hero{position:relative;background:var(--void)}
.slides{display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s}
.slide.on{opacity:1;visibility:visible}
html.nojs .slide{opacity:1;visibility:visible}
html.nojs .slide ~ .slide{display:none}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}

.slide-nav{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:0 var(--gutter) clamp(24px,3vw,40px);
}
@media (min-width:1000px){
  .slide-nav{left:26%;padding-left:clamp(48px,6vw,104px)}
}
.slide-dots{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.slide-dots button{
  appearance:none;background:none;border:0;cursor:pointer;padding:14px 0 10px;margin-right:20px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--on-void-mute);
  border-top:1px solid var(--line-void);min-width:34px;text-align:left;
  transition:color .25s,border-color .25s;
}
.slide-dots button:hover{color:var(--on-void-2);border-top-color:var(--on-void-mute)}
.slide-dots button[aria-current="true"]{color:var(--on-void);border-top-color:var(--on-void)}
.slide-play{
  appearance:none;background:none;border:1px solid var(--line-void);color:var(--on-void-2);
  cursor:pointer;padding:8px 12px;font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;transition:border-color .2s,color .2s;
}
.slide-play:hover{border-color:var(--on-void);color:var(--on-void)}

/* slides de texto (2 a 4) */
.slide .s-body h2{font-size:clamp(30px,3.8vw,50px);line-height:1.2;color:var(--on-void);max-width:19ch;margin:0 0 20px}
.slide .s-body p{font-family:var(--sans);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.7;
  color:var(--on-void-2);max-width:46ch;margin:0 0 14px}
.slide .s-body .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.slide .showcase-body{padding-bottom:clamp(88px,9vw,132px)}
.hero .duo{margin-bottom:0}
@media (max-width:560px){.slide .s-body .acts .btn{width:100%;justify-content:center}}