/* ============================================================
   Clínica Integrativa Pró Saúde — estilos
   Paleta baseada no logo (teal + verde)
   ============================================================ */
:root{
  --teal-900:#0f3f40;
  --teal-800:#164e4f;
  --teal-700:#1d6d6e;   /* primária */
  --teal-600:#2b8687;
  --teal-300:#8fbcbc;
  --teal-100:#e6f1f0;
  --green-600:#2f8b57;  /* acento */
  --green-700:#256f45;
  --highlight:#2f8b57;  /* destaque do "Chega de Dor" (verde) */
  --ink:#1c2a2a;
  --muted:#5d6c6c;
  --bg:#ffffff;
  --bg-soft:#f1f8f7;
  --border:#e0ebea;
  --shadow:0 12px 30px rgba(16,63,64,.10);
  --radius:16px;
  --max:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Poppins',sans-serif;line-height:1.2;color:var(--teal-900)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
.container--narrow{max-width:820px}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  background:var(--green-600);color:#fff;font-weight:600;
  padding:13px 24px;border-radius:999px;border:2px solid transparent;
  transition:.2s;cursor:pointer;font-size:.98rem;
}
.btn:hover{background:var(--green-700);transform:translateY(-2px)}
.btn--lg{padding:16px 32px;font-size:1.05rem}
.btn--sm{padding:9px 18px;font-size:.9rem}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.15)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:12px 0;transition:.3s;
  background:#fff;box-shadow:0 2px 14px rgba(16,63,64,.07);
}
.site-header.scrolled{box-shadow:0 4px 20px rgba(16,63,64,.10);padding:8px 0}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{height:52px;width:auto;transition:.3s}
.scrolled .brand__logo{height:46px}
.brand__fallback{display:flex;flex-direction:column;line-height:1.05;color:var(--teal-700)}
.brand__fallback strong{font-family:'Poppins';font-size:1.05rem}
.brand__fallback small{font-size:.72rem;letter-spacing:.06em;color:var(--green-600)}

.nav{display:flex;align-items:center;gap:26px}
.nav__link{font-weight:500;color:var(--ink);transition:.2s;font-size:.98rem}
.nav__link:hover{color:var(--teal-700)}
.nav__cta{color:#fff!important}
.nav-toggle{display:none;background:none;border:0;color:var(--teal-800);font-size:1.5rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:stretch;
  background:url('../img/hero.jpg') center/cover no-repeat;
  color:#fff;padding:92px 0 42px;
}
.hero__overlay{
  position:absolute;inset:0;
  /* forte à esquerda (texto branco sobre a parede clara), quase limpo à direita (logo) */
  background:linear-gradient(105deg,rgba(15,63,64,.90) 0%,rgba(20,80,80,.80) 36%,rgba(29,109,110,.34) 62%,rgba(29,109,110,.06) 100%);
}
.hero__content{position:relative;max-width:760px;display:flex;flex-direction:column;align-items:flex-start}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(47,139,87,.95);color:#fff;font-weight:600;font-size:.72rem;
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.badge i{font-size:.78em}
.hero__title{color:#fff;font-size:clamp(2.1rem,5vw,3.5rem);font-weight:800;margin-bottom:18px}
/* Destaque estilo "marca-texto" atrás do Chega de Dor */
.mark{
  background:linear-gradient(0deg,var(--highlight),var(--highlight));
  background-repeat:no-repeat;
  background-size:100% 48%;
  background-position:0 88%;
  padding:0 8px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero__subtitle{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:600px;margin-bottom:32px;color:rgba(255,255,255,.92)}
.hero__actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:auto}
.hero__tagline{
  font-size:clamp(1rem,2.2vw,1.18rem);font-weight:600;color:#fff;
  max-width:440px;margin-bottom:12px;text-shadow:0 1px 8px rgba(0,0,0,.25);
}

/* ---------- Blob buttons (efeito gooey) ---------- */
.blob-btn{
  z-index:1;position:relative;padding:12px 26px;text-align:center;
  color:var(--teal-700);font-size:.9rem;font-weight:600;letter-spacing:.01em;
  background:transparent;outline:none;border:none;cursor:pointer;border-radius:30px;
  transition:color .5s;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
}
.blob-btn:before{
  content:"";z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;
  border:2px solid var(--teal-700);border-radius:30px;
}
.blob-btn:after{
  content:"";z-index:-2;position:absolute;left:3px;top:3px;width:100%;height:100%;
  transition:all .3s .2s;border-radius:30px;
}
.blob-btn:hover{color:#fff}
.blob-btn:hover:after{transition:all .3s;left:0;top:0}
.blob-btn__inner{
  z-index:-1;overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;
  border-radius:30px;background:#fff;
}
.blob-btn__blobs{position:relative;display:block;height:100%;filter:url('#goo')}
.blob-btn__blob{
  position:absolute;top:2px;width:25%;height:100%;background:var(--teal-700);
  border-radius:100%;transform:translate3d(0,150%,0) scale(1.7);transition:transform .45s;
}
@supports(filter:url('#goo')){.blob-btn__blob{transform:translate3d(0,150%,0) scale(1.4)}}
.blob-btn__blob:nth-child(1){left:0%;transition-delay:0s}
.blob-btn__blob:nth-child(2){left:30%;transition-delay:.08s}
.blob-btn__blob:nth-child(3){left:60%;transition-delay:.16s}
.blob-btn__blob:nth-child(4){left:90%;transition-delay:.24s}
.blob-btn:hover .blob-btn__blob{transform:translateZ(0) scale(1.7)}
@supports(filter:url('#goo')){.blob-btn:hover .blob-btn__blob{transform:translateZ(0) scale(1.4)}}
/* variante verde preenchido (botão principal de agendar) */
.blob-btn--green{color:#fff}
.blob-btn--green:hover{color:#fff}
.blob-btn--green:before{border-color:var(--green-600)}
.blob-btn--green .blob-btn__inner{background:var(--green-600)}
.blob-btn--green .blob-btn__blob{background:var(--green-700)}

/* ---------- Diferenciais (features) ---------- */
.features{background:var(--teal-100);padding:56px 0}
.features__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature{text-align:center;padding:0 10px}
.feature__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  background:#fff;color:var(--teal-700);font-size:1.5rem;margin-bottom:14px;box-shadow:var(--shadow);
}
.feature h3{font-size:1.08rem;margin-bottom:6px}
.feature p{font-size:.92rem;color:var(--muted)}

/* ---------- Seções genéricas ---------- */
.section{padding:80px 0}
.section--soft{background:var(--bg-soft)}
.section--dark{background:linear-gradient(135deg,var(--teal-800),var(--teal-700));color:#fff}
.section__head{text-align:center;max-width:680px;margin:0 auto 48px}
.eyebrow{
  display:inline-block;text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;font-weight:600;color:var(--green-600);margin-bottom:10px;
}
.eyebrow--light{color:#bfe6d5}
.section__title{font-size:clamp(1.7rem,3.5vw,2.4rem)}
.section--dark .section__title{color:#fff}
.section__lead{margin-top:12px;color:var(--muted);font-size:1.05rem}
.section--dark .section__lead{color:rgba(255,255,255,.85)}
.section__cta{text-align:center;margin-top:44px}

/* ---------- Esteira contínua (marquee) ---------- */
.carousel{position:relative}
.mq-viewport{overflow:hidden;padding:10px 0 18px}
.mq-track{display:flex;gap:26px;width:max-content;will-change:transform}
.mq-track .service{flex:0 0 340px}
.mq-track .staff-card{flex:0 0 331px}
/* cards dos médicos na esteira: menores que antes, maiores que os técnicos */
.mq-track .member{flex:0 0 470px;grid-template-columns:260px 1fr}
.mq-track .member .member__photo img{min-height:225px}
.mq-track .member .member__body{padding:18px 18px 20px}
.mq-track .member .member__body h3{font-size:1.05rem}
.mq-track .member .member__role{margin:3px 0 10px;font-size:.82rem}
.mq-track .member .member__tags{font-size:.76rem!important;padding-top:10px;margin-bottom:10px!important}
.member__bio{font-size:.82rem;color:var(--muted);line-height:1.45}
/* na esteira, os serviços mostram só o resumo (sem expandir) */
.mq-track .service .expand-btn,
.mq-track .service .service__more{display:none}

/* ---------- Serviços ---------- */
.service{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.25s;
}
.carousel__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:#fff;color:var(--teal-700);box-shadow:var(--shadow);
  font-size:1rem;display:flex;align-items:center;justify-content:center;transition:.2s;
}
.carousel__arrow:hover{background:var(--teal-700);color:#fff}
.carousel__arrow--prev{left:6px}
.carousel__arrow--next{right:6px}
.carousel__arrow:disabled{opacity:.35;cursor:default}
.carousel__arrow:disabled:hover{background:#fff;color:var(--teal-700)}
.carousel__dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.carousel__dot{
  width:9px;height:9px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:var(--teal-300);transition:.25s;
}
.carousel__dot.active{background:var(--teal-700);width:26px}
.service:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.service__media{aspect-ratio:16/11;overflow:hidden}
.service__media img{width:100%;height:100%;object-fit:cover;transition:.4s}
.service:hover .service__media img{transform:scale(1.05)}
.service__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px}
.service__title{font-size:1.22rem;color:var(--teal-800)}
.service__body p{font-size:.94rem;color:var(--muted)}
.service__meta strong{color:var(--ink)}
.service__pro{
  margin-top:auto;font-weight:600;color:var(--teal-700)!important;font-size:.9rem!important;
  display:flex;align-items:center;gap:8px;border-top:1px solid var(--border);padding-top:12px;
}

/* ---------- Expandir/recolher (serviços e equipe) ---------- */
.service__more,.member__more{display:none}
.is-open .service__more,.is-open .member__more{display:block}
.expand-btn{
  align-self:flex-start;background:none;border:0;cursor:pointer;padding:0;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.92rem;color:var(--green-600);
  display:inline-flex;align-items:center;gap:7px;transition:.2s;
}
.expand-btn:hover{color:var(--green-700)}
.expand-btn i{font-size:.78rem;transition:transform .25s}
.is-open .expand-btn i{transform:rotate(180deg)}

/* ---------- Como funciona (steps) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{background:#fff;border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow);position:relative}
.step__num{
  font-family:'Poppins';font-weight:800;font-size:2rem;color:var(--teal-300);
  display:block;margin-bottom:8px;
}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{font-size:.92rem;color:var(--muted)}

/* ---------- Equipe ---------- */
.team{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.member{
  display:grid;grid-template-columns:200px 1fr;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}
.member__photo img{width:100%;height:100%;object-fit:cover;min-height:320px}
.member__body{padding:26px}
.member__body h3{font-size:1.25rem}
.member__role{display:inline-block;color:var(--green-600);font-weight:600;font-size:.88rem;margin:4px 0 14px}
.member__body p{font-size:.92rem;color:var(--muted);margin-bottom:10px}
.member__tags{font-size:.82rem!important;color:var(--teal-700)!important;font-weight:500;border-top:1px solid var(--border);padding-top:12px;margin-bottom:14px!important}
.member__more{margin-bottom:6px}

/* ---------- Equipe técnica (cards menores) ---------- */
.team-sub__title{
  font-size:1.15rem;color:var(--teal-800);text-align:center;
  margin:44px 0 24px;font-family:'Poppins',sans-serif;
}
.staff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.staff-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.25s;
}
.staff-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.staff-card__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.staff-card__body{padding:16px 18px 20px}
.staff-card__body h4{font-size:1.05rem;color:var(--ink);margin-bottom:3px}
.staff-card__role{display:block;color:var(--green-600);font-weight:600;font-size:.82rem;margin-bottom:12px}
.staff-card__info{font-size:.82rem;color:var(--muted);margin-bottom:5px;line-height:1.4}
.staff-card__info strong{color:var(--teal-700)}

/* ---------- Por que nos escolher ---------- */
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.reason{display:flex;gap:16px;background:rgba(255,255,255,.08);padding:22px;border-radius:var(--radius)}
.reason i{font-size:1.6rem;color:#bfe6d5;flex-shrink:0;margin-top:2px}
.reason h3{color:#fff;font-size:1.05rem;margin-bottom:4px}
.reason p{color:rgba(255,255,255,.82);font-size:.92rem}

/* ---------- Convênios ---------- */
.convenios{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.convenios li{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:18px 34px;font-family:'Poppins';font-weight:700;color:var(--teal-800);
  letter-spacing:.03em;box-shadow:var(--shadow);
}

/* ---------- Depoimentos ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.reviews-track{transition:transform .4s ease}
/* setas dos depoimentos: transparentes pra não atrapalhar a leitura */
.carousel--reviews .carousel__arrow{background:transparent;box-shadow:none;color:var(--teal-700);opacity:.55}
.carousel--reviews .carousel__arrow:hover{background:transparent;color:var(--teal-800);opacity:1}
.mq-track .review{flex:0 0 360px}
.review__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.review__avatar{
  width:44px;height:44px;border-radius:50%;background:var(--teal-700);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Poppins';
}
.review__head strong{display:block;font-size:.98rem}
.stars{color:#f5a623;font-size:.82rem}
.review__g{margin-left:auto;color:#4285f4;font-size:1.1rem}
.review blockquote{font-size:.95rem;color:var(--muted);font-style:italic}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq__item{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.faq__item summary{
  list-style:none;cursor:pointer;padding:18px 22px;font-family:'Poppins';font-weight:600;
  color:var(--teal-800);display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:'\f067';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--green-600);transition:.2s;font-size:.85rem}
.faq__item[open] summary::after{content:'\f068'}
.faq__answer{padding:0 22px 20px}
.faq__answer p{color:var(--muted);font-size:.95rem}

/* ---------- CTA final ---------- */
.cta-final{
  position:relative;padding:90px 0;color:#fff;text-align:center;
  /* usa img/cta.jpg quando existir; enquanto isso, cai no placeholder */
  background:url('../img/cta.jpg') center/cover no-repeat fixed,
             url('https://picsum.photos/seed/cta-clinica/1600/700') center/cover no-repeat fixed;
}
.cta-final__overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(15,63,64,.94),rgba(37,111,69,.86))}
.cta-final__content{position:relative;max-width:680px;margin:0 auto}
.cta-final h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:16px}
.cta-final p{color:rgba(255,255,255,.9);font-size:1.1rem;margin-bottom:28px}

/* ---------- Footer ---------- */
.footer{background:var(--teal-900);color:rgba(255,255,255,.82);padding-top:56px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr 1fr;gap:32px;padding-bottom:40px}
.footer__nav{display:flex;flex-direction:column;gap:9px}
.footer__nav a{font-size:.92rem}
.footer__nav a:hover{color:#bfe6d5}
.footer__col h4{color:#fff;font-size:1.05rem;margin-bottom:14px}
.footer__col p{font-size:.92rem;margin-bottom:8px}
.footer__col a{display:inline-flex;align-items:center;gap:8px;transition:.2s}
.footer__col a:hover{color:#bfe6d5}
.brand--footer .brand__logo{height:60px;background:#fff;padding:8px;border-radius:12px}
.footer__about{margin-top:14px;font-size:.9rem;line-height:1.7}
.footer__bar{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;font-size:.85rem;text-align:center}

/* ---------- WhatsApp flutuante ---------- */
.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;font-size:1.7rem;
  box-shadow:0 8px 24px rgba(37,211,102,.5);transition:.2s;
}
.wa-float:hover{transform:scale(1.08)}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .features__grid,.steps{grid-template-columns:repeat(2,1fr)}
  .staff-grid{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .service{flex-basis:calc((100% - 26px)/2)}
  .team{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav{
    position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;
    flex-direction:column;align-items:flex-start;gap:8px;
    background:#fff;padding:90px 30px 30px;box-shadow:-10px 0 40px rgba(0,0,0,.15);transition:.3s;
  }
  .nav.open{right:0}
  .nav__link{color:var(--ink);width:100%;padding:10px 0;border-bottom:1px solid var(--border)}
  .nav__cta{margin-top:10px}
  .nav-toggle{display:block;z-index:110;color:var(--teal-800)}
  .reviews,.features__grid,.steps{grid-template-columns:1fr}
  .mq-track{gap:16px}
  .mq-track .review{flex:0 0 82vw}
  .mq-track .service{flex:0 0 280px}
  .mq-track .staff-card{flex:0 0 288px}
  .mq-track .member{flex:0 0 340px;grid-template-columns:170px 1fr}
  .mq-track .member .member__photo img{min-height:180px}
  .mq-track .member .member__body{padding:14px}
  /* versão retrato do hero, feita sob medida para o mobile */
  .hero{min-height:88vh;background-image:url('../img/hero-mobile.jpg');background-position:center;padding-bottom:34px}
  .cta-final{background-attachment:scroll}
}