/* =====================================================================
   Clínica Jarbas Gomide — estilo premium institucional
===================================================================== */

:root{
  --verde-claro:#8FA47A;
  --verde-escuro:#6B8E4E;
  --verde-deep:#4F6B3A;
  --dourado:#C9A961;
  --dourado-deep:#A88845;
  --bg:#FFFFFF;
  --bg-soft:#FAF8F3;
  --bg-mute:#F2EEE4;
  --texto:#3D4A35;
  --texto-soft:#6B7560;
  --muted:#A0A595;
  --line:#E9E4D5;
  --shadow: 0 8px 28px rgba(60,75,50,.08);
  --shadow-lg: 0 24px 60px rgba(60,75,50,.12);
  --radius: 18px;
  --radius-sm: 10px;
  --t: 280ms cubic-bezier(.2,.7,.2,1);
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--texto);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font);
  font-weight:600;
  color:var(--verde-deep);
  letter-spacing:-.01em;
  line-height:1.22;
  margin:0 0 .6em;
}

p{margin:0 0 1em}
a{color:var(--verde-escuro);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--dourado-deep)}

img{max-width:100%;height:auto;display:block}
.text-muted-soft{color:var(--texto-soft) !important}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--verde-deep);color:#fff;padding:.6rem 1rem;border-radius:0 0 6px 0;z-index:9999}
.skip-link:focus{left:0}

/* =====================  HEADER  =================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .container{height:84px}
.brand{
  display:inline-flex; align-items:center; gap:.7rem; flex-shrink:0;
  text-decoration:none; color:inherit;
}
.brand .brand-icon{
  height:52px !important; width:52px !important; max-width:none !important;
  display:block; flex-shrink:0;
}
.brand .brand-logo{
  height:38px; width:auto; max-width:100%;
  display:block; flex-shrink:0;
}
.brand .brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand .brand-name{
  font-family:var(--font);
  font-size:1.35rem; font-weight:500; letter-spacing:-.01em;
  color:var(--verde-claro);
}
.brand .brand-sub{
  font-family:var(--font);
  font-size:.62rem; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted); margin-top:.18rem;
}
.brand-footer{display:inline-flex !important}
.brand-footer .brand-icon{height:48px !important; width:48px !important}
.brand-footer .brand-name{font-size:1.2rem}
/* logo-branco.svg já vem branco com a árvore vazada — nada de filtro, que achatava o desenho */
.brand-footer .brand-logo{height:40px}

@media (max-width: 575.98px){
  .brand .brand-icon{height:42px !important; width:42px !important}
  .brand .brand-name{font-size:1.05rem}
  .brand .brand-sub{font-size:.55rem; letter-spacing:.18em}
  /* object-fit segura a proporção quando o max-width aperta a caixa (telas < ~337px) */
  .brand .brand-logo{height:34px !important; max-width:calc(100vw - 90px); object-fit:contain; object-position:left}
}

.main-nav{display:flex;align-items:center;gap:.25rem}
.main-nav > ul{list-style:none;margin:0;padding:0;display:flex;gap:.15rem;align-items:center}
.main-nav > ul > li{position:relative}
.main-nav > ul > li > a{
  display:inline-flex;align-items:center; gap:.35rem;
  padding:.6rem 1rem;border-radius:999px;
  color:var(--texto);font-weight:500;font-size:.93rem;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.has-sub:hover > a{background:var(--bg-soft);color:var(--verde-deep)}
.main-nav .caret{
  width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--t);
}
.main-nav > ul > li.has-sub:hover .caret,
.main-nav > ul > li.has-sub.is-open .caret{transform:rotate(-135deg) translate(-2px,-2px)}

/* dropdown submenu */
.submenu{
  list-style:none; margin:0; padding:.5rem;
  position:absolute; top:calc(100% + 6px); left:50%; transform:translate(-50%, 10px);
  min-width:260px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity var(--t), transform var(--t);
  z-index:200;
}
/* Ponte invisível sobre o vão de 6px: mantém o :hover ao mover o mouse do item para o submenu */
.submenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.main-nav > ul > li.has-sub:hover > .submenu,
.main-nav > ul > li.has-sub.is-open > .submenu{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.submenu li{margin:0}
.submenu a{
  display:block; padding:.55rem .85rem; border-radius:8px;
  color:var(--texto); font-size:.9rem; font-weight:500;
}
.submenu a:hover{background:var(--bg-soft); color:var(--dourado-deep)}
.submenu .sep{height:1px; background:var(--line); margin:.35rem .5rem}
.submenu a.all{color:var(--dourado-deep)}

.nav-toggle{
  width:44px;height:44px;border:0;background:transparent;
  display:none;flex-direction:column;justify-content:center;gap:5px;padding:0
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--verde-deep);margin:0 auto;transition:transform var(--t)}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width: 991.98px){
  .site-header .container{height:72px}
  .brand img{height:42px !important}
  .main-nav{
    position:fixed; inset:72px 0 auto 0; background:#fff;
    flex-direction:column; gap:0; padding:.6rem 1rem 1.2rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform var(--t);
    box-shadow:var(--shadow); max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .main-nav.is-open{transform:translateY(0)}
  .main-nav > ul{flex-direction:column;width:100%; gap:0}
  .main-nav > ul > li{width:100%}
  .main-nav > ul > li > a{padding:.85rem 1rem;border-radius:8px; justify-content:space-between}
  .submenu{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; border:0; padding:0 0 .4rem 1.2rem;
    min-width:0; display:none;
  }
  .main-nav > ul > li.has-sub.is-open > .submenu{display:block; transform:none}
  .main-nav .btn-pill{width:100%;margin-top:.6rem;text-align:center}
  .nav-socials{width:100%;justify-content:center;gap:.7rem;margin-top:.9rem}
  .nav-toggle{display:flex}
}

/* =====================  BOTÕES  =================================== */
.btn-pill{
  display:inline-block;padding:.85rem 1.6rem;border-radius:999px;
  font-weight:500;font-size:.92rem;letter-spacing:.01em;
  border:1px solid transparent; cursor:pointer; line-height:1;
  transition:all var(--t); text-align:center; white-space:nowrap;
  font-family:var(--font);
}
.btn-pill:hover{transform:translateY(-1px)}
.btn-gold{background:var(--dourado);color:#fff;border-color:var(--dourado)}
.btn-gold:hover{background:var(--dourado-deep);color:#fff;border-color:var(--dourado-deep)}
.btn-green{background:var(--verde-escuro);color:#fff;border-color:var(--verde-escuro)}
.btn-green:hover{background:var(--verde-deep);color:#fff}
.btn-outline{background:transparent;color:var(--verde-deep);border-color:var(--verde-claro)}
.btn-outline:hover{background:var(--verde-deep);color:#fff;border-color:var(--verde-deep)}
.btn-link{color:var(--dourado-deep);font-weight:600}
.btn-link:hover{color:var(--verde-deep)}

/* =====================  TIPOGRAFIA AUXILIAR  ====================== */
.eyebrow{
  display:inline-block; color:var(--dourado-deep);
  font-family:var(--font); font-size:.74rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:.9rem;
}
.section{padding:104px 0; position:relative}
.section-soft{background:var(--bg-soft)}
.section-title{font-size:clamp(1.7rem, 2.8vw, 2.4rem); margin:.2rem 0 .6rem; font-weight:600}
.section-sub{color:var(--texto-soft); max-width:680px; margin:0 auto}

.page-hero{padding:84px 0 16px; background:linear-gradient(180deg,var(--bg-soft) 0%, #fff 100%)}
.page-title{font-size:clamp(1.9rem,3.5vw,2.8rem); margin:.2rem 0 .6rem; font-weight:600}
.page-sub{font-size:1.02rem; color:var(--texto-soft); max-width:760px}
.crumb{font-size:.85rem; color:var(--texto-soft); margin-bottom:.8rem}
.crumb a{color:var(--texto-soft)} .crumb span{margin:0 .4rem; opacity:.6}
/* Sem vão duplo: a 1ª seção logo após o cabeçalho da página não repete o respiro de topo */
.page-hero + .section{padding-top:24px}

/* =====================  ANIMAÇÕES DE SCROLL  ====================== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.in-view{opacity:1; transform:translateY(0)}
.reveal.delay-1{transition-delay:80ms}
.reveal.delay-2{transition-delay:160ms}
.reveal.delay-3{transition-delay:240ms}
.reveal.delay-4{transition-delay:320ms}
.reveal-left{opacity:0; transform:translateX(-30px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1)}
.reveal-left.in-view{opacity:1; transform:translateX(0)}
.reveal-right{opacity:0; transform:translateX(30px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1)}
.reveal-right.in-view{opacity:1; transform:translateX(0)}
.reveal-scale{opacity:0; transform:scale(.96); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1)}
.reveal-scale.in-view{opacity:1; transform:scale(1)}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1; transform:none; transition:none}
}

/* =====================  HERO  ===================================== */
.hero{
  position:relative; padding:128px 0 116px; overflow:hidden;
  background:var(--hero-bg, none) center/cover no-repeat;
  background-color:var(--verde-deep);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; border:0; pointer-events:none;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(38,54,28,.92) 0%, rgba(50,69,38,.78) 45%, rgba(50,69,38,.42) 100%);
}
.hero .container{position:relative;z-index:2}
.hero-inner{max-width:620px}
.hero .eyebrow{color:var(--dourado)}
.hero-title{font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:clamp(2.3rem,4.8vw,3.8rem); margin-bottom:1.2rem; font-weight:600; letter-spacing:-.01em; line-height:1.12; color:#fff}
.hero-text{font-size:1.08rem;color:rgba(255,255,255,.9);max-width:560px;margin-bottom:2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:0}
.btn-outline-light{border-color:rgba(255,255,255,.7);color:#fff}
.btn-outline-light:hover{background:#fff;border-color:#fff;color:var(--verde-deep)}

.hero-trust{display:flex;gap:2.2rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:1.4rem}
.hero-trust > div{display:flex;flex-direction:column}
.hero-trust strong{font-size:1.9rem;color:var(--verde-deep);font-weight:600;line-height:1.1}
.hero-trust span{font-size:.78rem;color:var(--texto-soft);text-transform:uppercase;letter-spacing:.14em; margin-top:.2rem}

.hero-card{position:relative;padding:1rem}
.hero-card::before{
  content:""; position:absolute; inset:30px 0 0 30px; border:2px solid var(--dourado); border-radius:var(--radius); z-index:0;
}
.hero-card-inner{position:relative;z-index:1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.hero-card-inner img{width:100%;height:auto;display:block}

/* =====================  FEATURE CARDS  ============================ */
.feature-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.7rem 1.5rem; height:100%; transition:transform var(--t), box-shadow var(--t);
}
.feature-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.feature-icon{width:46px;height:46px;border-radius:12px;background:var(--bg-mute);position:relative;margin-bottom:1rem}
.feature-icon span{position:absolute;inset:14px;border:2px solid var(--dourado);border-radius:6px}
.feature-card h3{font-size:1.15rem;margin-bottom:.4rem;color:var(--verde-deep); font-weight:600}
.feature-card p{margin:0;color:var(--texto-soft);font-size:.93rem}

/* =====================  ESPECIALIDADES CARD  ====================== */
.esp-card{
  display:flex;flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:1.8rem 1.5rem; height:100%;
  color:var(--texto); text-decoration:none; transition:all var(--t);
  position:relative; overflow:hidden;
}
.esp-card::after{
  content:""; position:absolute; right:-30px; top:-30px; width:90px; height:90px;
  border-radius:50%; background:var(--bg-mute); transition:transform var(--t);
}
.esp-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.esp-card:hover::after{transform:scale(1.5)}
.esp-icon{width:40px;height:40px;border-radius:50%;background:var(--dourado);position:relative;margin-bottom:1.1rem; z-index:1}
.esp-icon::after{content:"";position:absolute;inset:11px;border:2px solid #fff;border-radius:50%}
.esp-card h3{font-size:1.18rem;color:var(--verde-deep);margin-bottom:.4rem;z-index:1;position:relative; font-weight:600}
.esp-card p{color:var(--texto-soft);font-size:.93rem;flex:1;z-index:1;position:relative}
.esp-link{color:var(--dourado-deep);font-weight:600;font-size:.88rem;z-index:1;position:relative; letter-spacing:.01em}

/* =====================  DR / AUTORIDADE  ========================== */
.dr-photo{position:relative;padding:1rem}
.dr-photo::before{
  content:""; position:absolute; inset:35px 35px 0 0; border:2px solid var(--verde-claro); border-radius:var(--radius); z-index:0;
}
.dr-photo img{position:relative; z-index:1; border-radius:var(--radius); box-shadow:var(--shadow-lg); width:100%}

/* =====================  CARDS DE MÉDICO  ========================== */
.medico-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; height:100%;
  display:flex; flex-direction:column;
  transition:transform var(--t), box-shadow var(--t);
}
.medico-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.medico-foto{
  aspect-ratio:1/1;
  background:var(--bg-mute) center/cover no-repeat;
  overflow:hidden; position:relative;
}
.medico-foto img{width:100%; height:100%; object-fit:cover; transition:transform 600ms}
.medico-card:hover .medico-foto img{transform:scale(1.04)}
.medico-info{padding:1.6rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1}
.medico-info h3{
  font-size:1.2rem; color:var(--verde-deep); font-weight:600;
  margin:0 0 .25rem;
}
.medico-esp{
  display:inline-block; font-size:.72rem; font-weight:600;
  color:var(--dourado-deep); letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:.6rem;
}
.medico-crm{
  font-size:.85rem; color:var(--texto-soft);
  margin-bottom:.7rem;
}
.medico-bio{
  font-size:.92rem; color:var(--texto-soft);
  flex:1; margin-bottom:1.2rem;
}
.medico-info .btn-pill{align-self:flex-start}
.btn-pill.btn-sm{padding:.6rem 1.1rem; font-size:.85rem}

/* =====================  ESTRUTURA  ================================ */
.estrutura-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); text-align:center;
  transition:transform var(--t);
}
.estrutura-card:hover{transform:translateY(-4px)}
.estrutura-card img{aspect-ratio:4/3;object-fit:cover;width:100%;background:var(--bg-mute)}
.estrutura-card h4{padding:1rem .8rem 1.2rem;font-size:1.02rem;color:var(--verde-deep);margin:0; font-weight:600}

/* =====================  DEPOIMENTOS  ============================== */
.depo-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;height:100%;
  position:relative;
}
.depo-card::before{
  content:"\201C"; font-family:Georgia, "Times New Roman", serif; font-size:5rem; color:var(--dourado);
  position:absolute;top:-12px;left:1.2rem;line-height:1;opacity:.55;
}
.depo-text{font-style:italic;color:var(--texto);padding-top:1.5rem;margin-bottom:1.4rem; font-size:.97rem}
.depo-autor strong{display:block;color:var(--verde-deep); font-weight:600}
.depo-autor span{font-size:.82rem;color:var(--texto-soft)}

/* =====================  POSTS  ==================================== */
.post-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; height:100%; color:var(--texto);
  transition:all var(--t);
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--texto)}
.post-thumb{aspect-ratio:16/9;background:var(--bg-mute) center/cover no-repeat; overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover; transition:transform 600ms}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-card .post-date{display:block;font-size:.74rem;color:var(--dourado-deep);padding:1.2rem 1.4rem 0;letter-spacing:.14em;text-transform:uppercase; font-weight:600}
.post-card h3{padding:.5rem 1.4rem 0;font-size:1.12rem;color:var(--verde-deep); font-weight:600}
.post-card p{padding:.4rem 1.4rem 0;color:var(--texto-soft);font-size:.92rem;flex:1}
.post-card .esp-link{padding:.8rem 1.4rem 1.4rem;display:inline-block}

/* =====================  FAQ  ====================================== */
.faq .accordion-item{background:transparent;border:0;border-bottom:1px solid var(--line)}
.faq .accordion-button{
  background:transparent;font-family:var(--font);font-size:1.05rem;color:var(--verde-deep);
  padding:1.25rem .5rem; box-shadow:none !important; font-weight:600;
}
.faq .accordion-button:not(.collapsed){color:var(--dourado-deep);background:transparent}
.faq .accordion-button::after{filter:saturate(0)}
.faq .accordion-body{padding:.2rem .5rem 1.4rem;color:var(--texto-soft)}

/* =====================  CTA FINAL  ================================ */
/* Faixa do CTA final no mesmo verde do footer: fecho escuro contínuo, card destacado por cima */
.cta-final{padding:88px 0; background:linear-gradient(180deg,#3E5230 0%, #34452A 100%)}
.cta-card{
  background:linear-gradient(135deg,var(--verde-escuro) 0%, var(--verde-deep) 100%);
  color:#fff; border-radius:24px; padding:64px 40px; text-align:center; box-shadow:var(--shadow-lg);
  position:relative; overflow:hidden;
}
.cta-card::before{
  content:""; position:absolute; top:-100px; right:-100px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,169,97,.3) 0%, transparent 70%);
}
.cta-card h2{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:.8rem; font-weight:600}
.cta-card p{color:rgba(255,255,255,.9);max-width:620px;margin:0 auto 2rem;font-size:1.02rem}
.cta-buttons{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}

.cta-mini{background:var(--bg-soft);border-radius:var(--radius);padding:1.8rem;border-left:4px solid var(--dourado)}
.cta-mini h3{color:var(--verde-deep);margin-bottom:.4rem; font-weight:600}

.cta-box{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:2.4rem 2rem; text-align:center; height:100%;
  display:flex; flex-direction:column; align-items:center;
  transition:transform var(--t), box-shadow var(--t);
}
.cta-box:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.cta-box-green{border-top:4px solid #25D366}
.cta-box-gold{border-top:4px solid var(--dourado)}
.cta-icon{
  font-size:2.4rem; margin-bottom:1rem;
  width:74px; height:74px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}
/* Instagram: mesmo degradê usado no hover do ícone do rodapé (.sm-instagram) */
.cta-box-insta{border-top:4px solid #d62976}
.cta-box-green .cta-icon{background:rgba(37,211,102,.12); color:#25D366}
.cta-box-gold .cta-icon{background:rgba(201,169,97,.16); color:var(--dourado-deep)}
.cta-box-insta .cta-icon{
  background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
  color:#fff;
}
.cta-box h3{font-size:1.25rem; color:var(--verde-deep); font-weight:600; margin-bottom:.5rem}
.cta-box p{color:var(--texto-soft); margin-bottom:1.4rem; flex:1}

/* =====================  FORMULÁRIO  =============================== */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:2.2rem; box-shadow:var(--shadow);
}
.form-card h2{margin-bottom:1.4rem; color:var(--verde-deep); font-weight:600}
.form-label{font-size:.85rem;font-weight:500;color:var(--texto);margin-bottom:.35rem}
.form-control,.form-select{
  border-radius:10px;border-color:var(--line);padding:.7rem .9rem;
  font-size:.93rem;transition:all var(--t); font-family:var(--font);
}
.form-control:focus,.form-select:focus{
  border-color:var(--dourado); box-shadow:0 0 0 .2rem rgba(201,169,97,.18);
}

/* =====================  SIDE CARD  ================================ */
.side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.8rem 1.6rem; box-shadow:var(--shadow);
}
.side-card h3{color:var(--verde-deep);font-size:1.05rem;margin-bottom:.8rem; font-weight:600}
.side-list{list-style:none;padding:0;margin:0}
.side-list li{border-top:1px solid var(--line);padding:.7rem 0}
.side-list li:first-child{border-top:0;padding-top:0}
.side-list a{color:var(--texto); font-size:.93rem}
.side-list a:hover{color:var(--dourado-deep)}

/* =====================  MAPA  ===================================== */
.map-wrap iframe{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);min-height:380px;display:block}

/* =====================  PROSE (artigos)  ========================== */
.prose{font-size:1.02rem; color:var(--texto)}
/* Texto corrido justificado, sem hifenização: com hyphens:auto o Chrome quebra
   palavra demais em pt-br ("Angio-logia", "acom-panhantes") e polui a leitura. */
.prose, .medico-resumo{text-align:justify}
.prose h2,.prose h3,.prose h4{margin-top:2rem;color:var(--verde-deep); font-weight:600}
.prose h2{font-size:1.5rem}
.prose h3{font-size:1.25rem}
.prose p{margin-bottom:1.1em}
.prose ul,.prose ol{padding-left:1.2rem;margin-bottom:1.2em}
.prose li{margin-bottom:.4em}
.prose blockquote{
  border-left:4px solid var(--dourado);
  padding:.6rem 0 .6rem 1.2rem;color:var(--texto-soft);font-style:italic;
  margin:1.4rem 0;
}
.prose .lead{font-size:1.1rem;color:var(--texto-soft)}
.prose img{border-radius:var(--radius);margin:1.4rem 0}

/* =====================  WHATSAPP FLOAT  =========================== */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:58px;height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4); transition:transform var(--t);
  font-size:1.7rem;
}
.wa-float:hover{transform:scale(1.08); color:#fff}
.wa-float i{line-height:1}

/* =====================  FOOTER  =================================== */
/* Footer escuro: verde profundo da marca (peso visual do modelo, identidade Jarbas) */
.site-footer{background:linear-gradient(180deg,#3E5230 0%, #34452A 100%);border-top:none;padding:64px 0 32px;margin-top:0;color:rgba(255,255,255,.72)}
.site-footer h6{font-family:var(--font);font-size:.74rem;color:#fff;text-transform:uppercase;letter-spacing:.18em;margin-bottom:1rem;font-weight:600}
.site-footer p{color:rgba(255,255,255,.72)}
.site-footer .brand-name{color:#fff}
.site-footer .brand-sub{color:rgba(255,255,255,.6)}
.site-footer hr{border-color:rgba(255,255,255,.16);opacity:1}
.site-footer .text-muted-soft{color:rgba(255,255,255,.55) !important}
.site-footer a{color:rgba(255,255,255,.72)}
.site-footer a:hover{color:var(--dourado)}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{margin-bottom:.45rem}
.footer-list a{color:rgba(255,255,255,.72);font-size:.9rem}
.footer-list a:hover{color:var(--dourado)}
.btn-outline-sm{display:inline-block;margin-top:.6rem;padding:.42rem .95rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;font-size:.85rem;transition:all var(--t)}
.btn-outline-sm:hover{background:var(--dourado);border-color:var(--dourado);color:#fff;transform:translateY(-1px)}
.social-icons{display:flex; gap:.5rem; flex-wrap:wrap}
.social-icons a{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.24); border-radius:50%;
  color:#fff; background:transparent;
  font-size:.95rem;
  transition:all var(--t);
}
.social-icons a:hover{transform:translateY(-2px); color:#fff; border-color:transparent}
.social-icons a.sm-whatsapp:hover{background:#25D366}
.social-icons a.sm-instagram:hover{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)}
.social-icons a.sm-facebook:hover{background:#1877F2}
.social-icons a.sm-linkedin:hover{background:#0A66C2}
.social-icons a.sm-youtube:hover{background:#FF0000}

/* =====================  ROTEIRO JARBAS — extras  ================== */
/* Ícone do tratamento (Font Awesome dentro do círculo dourado) */
.esp-icon{display:flex;align-items:center;justify-content:center}
.esp-icon i{color:#fff;font-size:1.05rem;position:relative;z-index:2}
.esp-icon:has(i)::after{display:none}

/* Ícone social no cabeçalho */
.nav-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--verde-escuro);font-size:1.05rem;
  transition:background var(--t),color var(--t),border-color var(--t)
}
.nav-social:hover{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);color:#fff;border-color:transparent}
.nav-socials{display:inline-flex;align-items:center;gap:.4rem}
.nav-social-wa:hover{background:#25D366;color:#fff;border-color:transparent}
.nav-social-yt:hover{background:#FF0000;color:#fff;border-color:transparent}

/* Foto grande do médico (home + página do Dr.) */
.medico-foto-lg{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-soft)}
.medico-foto-lg img{width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover}
/* Imagem do topo da pagina de tratamento: inteira (sem corte), so limitada em altura */
.tratamento-img{display:block;max-width:100%;width:auto;height:auto;max-height:480px;margin-inline:auto}
@media (max-width:575.98px){.tratamento-img{max-height:360px}}

/* Carrossel do tratamento (fotos + vídeo do YouTube no mesmo fluxo).
   Setas e indicadores do Bootstrap nascem brancos, para foto escura — aqui o
   fundo é claro, então invertem para escuro. Indicadores ficam FORA da imagem
   (position:static): as fotos têm alturas diferentes e sobrepor cobriria o
   conteúdo clínico logo na borda de baixo. */
.trat-carousel .carousel-item{text-align:center}
.trat-carousel .carousel-control-prev-icon,
.trat-carousel .carousel-control-next-icon{filter:invert(1) grayscale(100%)}
.trat-carousel .carousel-control-prev,
.trat-carousel .carousel-control-next{width:12%;opacity:.55}
.trat-carousel .carousel-control-prev:hover,
.trat-carousel .carousel-control-next:hover{opacity:1}
.trat-carousel .carousel-indicators{position:static;margin:.9rem 0 0}
.trat-carousel .carousel-indicators [data-bs-target]{
  width:9px;height:9px;border-radius:50%;border:0;margin-inline:5px;
  background-color:var(--verde-deep);opacity:.25;transition:opacity var(--t);
}
.trat-carousel .carousel-indicators .active{opacity:1}
.trat-legenda{margin:.7rem 0 0;font-size:.9rem;color:var(--texto-soft);text-align:center}

/* Slide de vídeo: capa com play; o iframe do YouTube só entra no clique */
.trat-video{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--verde-deep);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;
}
.trat-video img{width:100%;height:100%;object-fit:cover;display:block}
.trat-video:hover .video-play{background:#fff;transform:translate(-50%,-50%) scale(1.06)}
.trat-video:focus-visible{outline:3px solid var(--dourado);outline-offset:2px}
.trat-video-frame{
  display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);
}

/* Estrelas dos depoimentos */
.depo-stars{color:var(--dourado);font-size:.85rem;letter-spacing:.12em;margin-bottom:.2rem}

/* Lista de informações (A Clínica) */
.info-list{list-style:none;margin:0;padding:0}
.info-list li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;color:var(--texto)}
.info-list li i{color:var(--dourado-deep);margin-top:.2rem;width:18px;text-align:center}
.info-list a{color:var(--texto)}
.info-list a:hover{color:var(--dourado-deep)}

/* Mapa */
.map-wrap{box-shadow:var(--shadow);line-height:0}
.map-wrap iframe{display:block;width:100%;border:0}

/* Embeds do Instagram / Publicações */
.ig-embed{display:flex;justify-content:center}
.pub-grid .instagram-media{min-width:auto !important}
.pub-titulo{font-size:1.05rem;color:var(--verde-deep);font-weight:600;margin-bottom:.6rem;text-align:center}

/* Títulos de bloco da página Publicações (Destaques do Instagram / Vídeos) */
.pub-section-title{font-family:var(--font);font-size:1.5rem;font-weight:600;color:var(--verde-deep);margin:0 0 1.4rem}

/* Cards de vídeo (arte com link pro YouTube) */
.video-card{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  aspect-ratio:16/9; background:var(--verde-deep);
  box-shadow:0 6px 20px rgba(0,0,0,.08); transition:transform var(--t), box-shadow var(--t);
}
.video-card img{width:100%; height:100%; object-fit:cover; display:block}
.video-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.15)}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); color:var(--verde-deep); border-radius:50%;
  font-size:1.35rem; padding-left:5px; transition:background var(--t), transform var(--t);
}
.video-card:hover .video-play{background:#fff; transform:translate(-50%,-50%) scale(1.06)}
.video-titulo{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem .8rem;
  color:#fff; font-weight:500; font-size:.98rem; line-height:1.3;
  background:linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
}

/* =====================  ARTIGOS (PUBLICAÇÕES)  ==================== */
.artigo-card{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.artigo-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.artigo-card-img{display:block; aspect-ratio:16/10; background:var(--bg-mute); overflow:hidden}
.artigo-card-img img{width:100%; height:100%; object-fit:cover; transition:transform 600ms cubic-bezier(.2,.7,.2,1)}
.artigo-card:hover .artigo-card-img img{transform:scale(1.04)}
.artigo-card-semfoto{
  display:flex; align-items:center; justify-content:center; height:100%;
  color:var(--verde-claro); font-size:2.2rem;
}
.artigo-card-corpo{display:flex; flex-direction:column; flex:1; padding:1.5rem 1.4rem 1.6rem}
.artigo-card-titulo{font-size:1.1rem; line-height:1.35; margin:0 0 .6rem; font-weight:600}
.artigo-card-titulo a{color:var(--verde-deep)}
.artigo-card-titulo a:hover{color:var(--dourado-deep)}
.artigo-card-resumo{color:var(--texto-soft); font-size:.93rem; flex:1; margin-bottom:1rem}
.artigo-card-link{
  color:var(--dourado-deep); font-weight:600; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
}

.artigo-paginacao{display:flex; justify-content:center; gap:.4rem; margin-top:3rem}
.artigo-paginacao a, .artigo-paginacao .pag-atual{
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; font-size:.92rem; font-weight:500;
  color:var(--texto-soft); transition:all var(--t);
}
.artigo-paginacao a:hover{border-color:var(--verde-claro); color:var(--verde-deep)}
.artigo-paginacao .pag-atual{background:var(--verde-deep); border-color:var(--verde-deep); color:#fff}

/* Página do artigo — coluna estreita, do jeito que texto longo se lê melhor.
   O cabeçalho segue a mesma coluna do texto, senão o título fica solto na esquerda. */
.artigo-single{max-width:820px; margin:0 auto}
.artigo-hero .container{max-width:880px}
.artigo-hero .crumb{text-align:center}
.artigo-hero .page-title{text-align:center; margin-bottom:0}
.artigo-capa{margin:0 0 2rem}
.artigo-capa img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow)}
.artigo-chamada{
  font-size:1.1rem; color:var(--texto-soft); text-align:justify;
  border-left:3px solid var(--verde-claro); padding-left:1.1rem; margin-bottom:1.8rem;
}

.artigo-nav{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.artigo-nav-item{display:flex; flex-direction:column; max-width:46%}
.artigo-nav-rot{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.artigo-nav-tit{color:var(--verde-deep); font-weight:500; font-size:.95rem; line-height:1.35; margin-top:.2rem}
.artigo-nav-item:hover .artigo-nav-tit{color:var(--dourado-deep)}

.artigo-share{display:flex; align-items:center; gap:.7rem; margin-top:2rem}
.artigo-share-rot{font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:.2rem}
.artigo-share a{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:50%; color:var(--texto-soft); font-size:.9rem;
  transition:all var(--t);
}
.artigo-share a:hover{background:var(--verde-deep); border-color:var(--verde-deep); color:#fff}

@media (max-width:575.98px){
  .artigo-nav{flex-direction:column; gap:1.2rem}
  .artigo-nav-item{max-width:100%}
  .artigo-nav-item.text-end{text-align:left !important}
}

/* =====================  GALERIA DA CLÍNICA  ======================= */
.galeria{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
}
.galeria-item{
  padding:0; border:0; background:none; cursor:zoom-in; position:relative;
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
}
.galeria-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--t);
}
.galeria-item:hover img, .galeria-item:focus-visible img{transform:scale(1.06)}
.galeria-item::after{
  content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:1.5rem; background:rgba(79,107,58,.45);
  opacity:0; transition:opacity var(--t);
}
.galeria-item:hover::after, .galeria-item:focus-visible::after{opacity:1}
.galeria-item:focus-visible{outline:3px solid var(--dourado); outline-offset:2px}

/* Foto ampliada: sem "caixa" de modal, só a imagem sobre o fundo escurecido */
.galeria-modal .modal-content{background:transparent; border:0; box-shadow:none}
.galeria-modal .carousel-item img{
  display:block; width:auto; max-width:100%; max-height:80vh;
  margin:0 auto; border-radius:var(--radius);
}
.galeria-modal .galeria-legenda{
  color:#fff; text-align:center; margin:.9rem 0 0; font-size:.95rem;
}
.galeria-modal .btn-close{
  position:absolute; top:-2.6rem; right:0; z-index:2;
  filter:brightness(0) invert(1); opacity:.9;
}
.galeria-modal .carousel-control-prev, .galeria-modal .carousel-control-next{width:9%}
/* O Bootstrap põe o .modal-backdrop no <body>, irmão do modal — não dá para
   alcançá-lo por dentro de .galeria-modal. Único modal do site, então é global. */
.modal-backdrop{--bs-backdrop-opacity:.85}
@media (max-width: 575.98px){
  .galeria{grid-template-columns:repeat(2, 1fr); gap:.6rem}
  .galeria-modal .btn-close{top:-2.2rem; right:.4rem}
}

/* Parceira ECCUS no rodapé (logo em JPEG com fundo claro → chip branco) */
.eccus-chip{display:inline-block;background:#fff;border-radius:10px;padding:.5rem .8rem;line-height:0}
.eccus-chip img{max-height:42px;width:auto;display:block;opacity:.95;transition:opacity var(--t)}
.eccus-chip:hover img{opacity:1}

/* Barra de cookies (LGPD) */
.cookie-bar{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1200;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:1rem 1.3rem;
  max-width:920px;margin:0 auto;
  opacity:0;transform:translateY(12px);transition:opacity var(--t),transform var(--t)
}
.cookie-bar.is-visible{opacity:1;transform:none}
.cookie-text{margin:0;font-size:.88rem;color:var(--texto-soft);flex:1;min-width:240px}
.cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.btn-pill.btn-sm{padding:.5rem 1.1rem;font-size:.82rem}
@media (max-width: 575.98px){
  .cookie-bar{flex-direction:column;align-items:stretch;text-align:center}
  .cookie-actions{justify-content:center}
}

/* =====================  RESPONSIVO  =============================== */
@media (max-width: 767.98px){
  .section{padding:72px 0}
  .hero{padding:88px 0 72px; background-position:center right}
  .hero-cta .btn-pill{flex:1;text-align:center}
  .cta-card{padding:48px 24px}
}
