/* ===============================================================
   Header
   =============================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--color-ink-100); box-shadow: var(--shadow-xs); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-ui); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--color-ink-900); }
.brand:hover { text-decoration: none; }
.brand .mark {
  width: 38px; height: 38px; border-radius: 11px; background: var(--color-brand-600); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(38, 107, 92, .28);
}
.nav-main { display: flex; gap: var(--space-6); align-items: center; }
.nav-main a { position: relative; color: var(--color-ink-700); font-family: var(--font-ui); font-weight: 600; font-size: .94rem; padding: var(--space-1) 0; }
.nav-main a:hover { color: var(--color-brand-700); text-decoration: none; }
.nav-main a.is-active { color: var(--color-brand-700); }
.nav-main a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--color-brand-500); border-radius: 2px;
}
.nav-main .btn.is-active::after { display: none; }
.nav-toggle {
  display: none; background: var(--color-paper); border: 1px solid var(--color-ink-200); border-radius: var(--radius-md);
  width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--color-ink-900);
}

@media (max-width: 1024px) { .nav-main { gap: var(--space-5); } }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-main { display: none; }
  .nav-main.is-open {
    display: flex; position: fixed; top: 71px; left: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--color-paper); flex-direction: column; align-items: stretch;
    padding: var(--space-6) var(--space-5) var(--space-10); gap: 0; overflow-y: auto;
    animation: nav-in .22s ease;
  }
  .nav-main.is-open a {
    padding: var(--space-4) var(--space-1); font-size: 1.05rem; border-bottom: 1px solid var(--color-ink-100);
  }
  .nav-main.is-open a.is-active::after { display: none; }
  .nav-main.is-open a.is-active { color: var(--color-brand-700); }
  .nav-main.is-open .btn { margin-top: var(--space-6); border-bottom: none; justify-content: center; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===============================================================
   Botão flutuante do WhatsApp
   =============================================================== */
.whatsapp-fab {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 45;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff !important;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, .38);
  transition: transform .18s ease, box-shadow .18s ease;
}
.whatsapp-fab:hover { transform: scale(1.06); text-decoration: none; box-shadow: 0 12px 32px rgba(37, 211, 102, .45); }
.whatsapp-fab::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, .5);
  animation: fab-pulse 2.6s ease-out infinite;
}
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (max-width: 620px) {
  .whatsapp-fab { right: var(--space-4); bottom: var(--space-4); width: 54px; height: 54px; font-size: 1.45rem; }
}

/* ===============================================================
   Hero
   =============================================================== */
.hero {
  position: relative; overflow: hidden; padding: var(--space-20) 0 var(--space-16);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(86, 166, 144, .18), transparent 60%),
    linear-gradient(180deg, var(--color-brand-50), var(--color-bg) 72%);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(38, 107, 92, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(720px 420px at 78% 24%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(720px 420px at 78% 24%, #000, transparent 72%);
}
.hero .container { position: relative; z-index: 1; }
.hero .grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--space-12); }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin-bottom: var(--space-5); }
.hero .lead { font-size: 1.12rem; color: var(--color-ink-700); max-width: 48ch; }
.hero .cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.hero .trust-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: .85rem; color: var(--color-ink-500); }
.hero .trust-note i { color: var(--color-brand-500); }

.hero .proof {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--space-8);
  margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-ink-100);
}
.hero .proof .item strong {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.55rem;
  color: var(--color-brand-700); line-height: 1.1; letter-spacing: -0.02em;
}
.hero .proof .item span { font-size: .8rem; color: var(--color-ink-500); }

.hero-media { position: relative; aspect-ratio: 4/5; }
.hero-media-inner {
  position: relative; width: 100%; height: 100%; border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(150deg, var(--color-brand-300), var(--color-brand-700));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.92); box-shadow: var(--shadow-lg);
}
.hero-media-inner::before, .hero-media-inner::after,
.media-placeholder::before, .media-placeholder::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.13);
}
.hero-media-inner::before, .media-placeholder::before { width: 220px; height: 220px; top: -60px; right: -60px; }
.hero-media-inner::after, .media-placeholder::after { width: 160px; height: 160px; bottom: -50px; left: -40px; }
.hero-media-mark {
  position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
}

/* Placeholder de imagem decorado (usado onde ainda não há foto real) */
.media-placeholder {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--color-brand-300), var(--color-brand-700)); color: rgba(255,255,255,.95);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.media-placeholder .media-mark {
  width: 84px; height: 84px; border-radius: 50%; background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.media-caption {
  position: absolute; left: var(--space-4); bottom: var(--space-4); z-index: 1;
  background: rgba(20, 30, 28, .4); backdrop-filter: blur(4px); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .4rem .85rem; border-radius: 999px;
}
.hero-floating-card {
  position: absolute; left: -22px; bottom: 32px; background: var(--color-paper); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-accent-500); border: 1px solid var(--color-ink-100);
}
.hero-floating-card strong { display: block; font-family: var(--font-ui); color: var(--color-ink-900); font-size: 1rem; line-height: 1.2; }
.hero-floating-card span { font-size: .78rem; color: var(--color-ink-500); }
.hero-badge-card {
  position: absolute; right: -14px; top: 34px; background: var(--color-paper); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-3);
  border: 1px solid var(--color-ink-100); max-width: 210px;
}
.hero-badge-card .ico {
  width: 34px; height: 34px; border-radius: 10px; background: var(--color-brand-50); color: var(--color-brand-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hero-badge-card strong { display: block; font-family: var(--font-ui); font-size: .88rem; line-height: 1.25; }
.hero-badge-card span { font-size: .76rem; color: var(--color-ink-500); }

@media (max-width: 1024px) {
  .hero { padding: var(--space-16) 0 var(--space-12); }
  .hero .grid { gap: var(--space-8); }
  .hero-badge-card { display: none; }
}
@media (max-width: 900px) {
  .hero .grid { grid-template-columns: 1fr; }
  .hero-media { order: -1; aspect-ratio: 16/10; margin-bottom: var(--space-6); }
  .hero-media-mark { width: 82px; height: 82px; }
  .hero-floating-card { left: var(--space-4); bottom: -20px; }
  .hero .proof { gap: var(--space-6); }
}
@media (max-width: 480px) {
  .hero .proof { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .hero .proof .item strong { font-size: 1.3rem; }
  .hero .proof .item span { font-size: .72rem; }
  .hero .cta-row .btn { width: 100%; }
}

.diferencial-card { text-align: left; height: 100%; }
.diferencial-card h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 700; margin-bottom: var(--space-2); }
.diferencial-card p { margin-bottom: 0; color: var(--color-ink-500); font-size: .92rem; }

/* ===============================================================
   Banner promocional / faixas
   =============================================================== */
.promo-banner {
  display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-lg);
  flex-wrap: wrap;
}
.promo-banner-brand { background: linear-gradient(120deg, var(--color-brand-700), var(--color-brand-500)); color: #fff; }
.promo-banner-accent { background: linear-gradient(120deg, var(--color-accent-600), var(--color-accent-500)); color: #fff; }
.promo-banner-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.15rem;
}
.promo-banner-text { flex: 1; min-width: 200px; }
.promo-banner-text h3 { color: #fff; margin-bottom: var(--space-1); font-family: var(--font-ui); font-size: 1.05rem; font-weight: 700; }
.promo-banner-text p { margin-bottom: 0; color: rgba(255,255,255,.88); font-size: .92rem; }
.promo-banner-cta { background: #fff !important; color: var(--color-brand-700) !important; flex-shrink: 0; }
.promo-banner-cta:hover { background: rgba(255,255,255,.9) !important; }
@media (max-width: 620px) { .promo-banner-cta { width: 100%; } }

/* Faixa de convênios */
.convenios-strip { background: var(--color-paper); border-top: 1px solid var(--color-ink-100); border-bottom: 1px solid var(--color-ink-100); padding: var(--space-6) 0; }
.convenios-strip .row { display: flex; gap: var(--space-4) var(--space-6); align-items: center; justify-content: center; flex-wrap: wrap; }
.convenios-strip .row .label {
  color: var(--color-ink-500); font-family: var(--font-ui); font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.convenios-strip .row .chip {
  padding: .4rem 1rem; border-radius: 999px; background: var(--color-ink-50); border: 1px solid var(--color-ink-100);
  color: var(--color-ink-700); font-family: var(--font-ui); font-weight: 600; font-size: .88rem;
}

/* ===============================================================
   Contato
   =============================================================== */
.contact-map { aspect-ratio: 4/3; }
.contact-info li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-ink-100); }
.contact-info li:last-child { border-bottom: none; }
.contact-info li .ico { width: 22px; text-align: center; color: var(--color-brand-600); flex-shrink: 0; margin-top: 3px; }

/* ===============================================================
   CTA final
   =============================================================== */
.cta-band {
  position: relative; overflow: hidden; background: linear-gradient(140deg, var(--color-brand-700), var(--color-brand-900));
  color: #fff; border-radius: var(--radius-xl); padding: var(--space-12) var(--space-8); text-align: center;
}
.cta-band::before, .cta-band::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06); }
.cta-band::before { width: 340px; height: 340px; top: -130px; right: -100px; }
.cta-band::after { width: 240px; height: 240px; bottom: -110px; left: -70px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-band p { color: var(--color-brand-100); max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ===============================================================
   Footer
   =============================================================== */
.site-footer { background: var(--color-ink-900); color: var(--color-ink-100); padding: var(--space-16) 0 var(--space-6); margin-top: var(--space-16); }
.site-footer a { color: var(--color-ink-100); }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; margin-bottom: var(--space-4); }
.site-footer .brand .mark { background: var(--color-brand-500); box-shadow: none; }
.site-footer .grid { grid-template-columns: 2fr 1fr 1.2fr 1.2fr; gap: var(--space-8); }
.site-footer h4 { color: #fff; font-family: var(--font-ui); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-4); }
.site-footer p { color: var(--color-ink-300); font-size: .92rem; }
.site-footer ul li { margin-bottom: var(--space-3); font-size: .92rem; }
.site-footer .footer-line { display: flex; align-items: flex-start; gap: var(--space-3); }
.site-footer .footer-line i { color: var(--color-brand-300); width: 16px; text-align: center; flex-shrink: 0; margin-top: 4px; }
.site-footer .footer-line span, .site-footer .footer-line a { min-width: 0; overflow-wrap: anywhere; }
.site-footer .bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--space-10); padding-top: var(--space-5);
  font-size: .82rem; color: var(--color-ink-300); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
}
@media (max-width: 900px) { .site-footer .grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 560px) { .site-footer .grid { grid-template-columns: 1fr; } .site-footer { padding-top: var(--space-12); } }

/* ===============================================================
   Reveal ao rolar
   =============================================================== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }

/* ===============================================================
   Carrossel (scroll-snap nativo — swipe no celular, setas no desktop)
   =============================================================== */
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: var(--space-2) 2px var(--space-4); -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* 3 por vez no desktop, 2 no tablet, 1 (com espia) no celular — sem cartão cortado ao meio */
.carousel-track > * { scroll-snap-align: start; flex: 0 0 calc((100% - var(--space-6) * 2) / 3); }
@media (max-width: 1024px) { .carousel-track > * { flex-basis: calc((100% - var(--space-6)) / 2); } }
@media (max-width: 700px) { .carousel-track > * { flex-basis: 88%; } .carousel-track { gap: var(--space-4); } }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-5); margin-top: var(--space-3); }
.carousel-nav-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-ink-200); background: var(--color-paper);
  display: flex; align-items: center; justify-content: center; color: var(--color-ink-700); flex-shrink: 0;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.carousel-nav-btn:hover { border-color: var(--color-brand-400); color: var(--color-brand-600); background: var(--color-brand-50); }
.carousel-nav-btn[disabled] { opacity: .35; pointer-events: none; }
.carousel-dots { display: flex; gap: .4rem; align-items: center; }
.carousel-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--color-ink-200); padding: 0; transition: all .2s ease; }
.carousel-dots button.is-active { background: var(--color-brand-600); width: 24px; border-radius: 4px; }

/* ===============================================================
   Páginas internas
   =============================================================== */
/* Banner curto do topo das páginas internas: dá presença visual sem empurrar
   o conteúdo para fora da primeira tela. */
.page-banner {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(115deg, var(--color-brand-800), var(--color-brand-600) 62%, var(--color-brand-500));
  padding: var(--space-10) 0;
}
.page-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(100deg, transparent 32%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 32%, #000 100%);
}
.page-banner::after {
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: rgba(255,255,255,.07); top: -160px; right: -80px; pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner .banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap;
}
.page-banner .banner-text { max-width: 58ch; }
.page-banner .eyebrow { color: var(--color-brand-200); margin-bottom: var(--space-2); }
.page-banner h1 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: var(--space-2); }
.page-banner p { color: rgba(255,255,255,.8); margin-bottom: 0; font-size: .98rem; }
.page-banner .banner-aside { flex-shrink: 0; }
.page-banner .banner-stats { display: flex; gap: var(--space-6); }
.page-banner .banner-stats .item strong {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: #fff; line-height: 1.1;
}
.page-banner .banner-stats .item span { font-size: .78rem; color: rgba(255,255,255,.72); }
.page-banner .banner-chip {
  display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .45rem 1rem;
  font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: #fff;
}
@media (max-width: 900px) {
  .page-banner { padding: var(--space-8) 0; }
  .page-banner .banner-inner { gap: var(--space-5); }
}
@media (max-width: 620px) {
  .page-banner { padding: var(--space-7, 1.75rem) 0; }
  .page-banner .banner-stats { gap: var(--space-5); }
  .page-banner .banner-stats .item strong { font-size: 1.35rem; }
}

/* Serviços — lista detalhada */
.service-detail-list .service-detail {
  display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-10); align-items: center;
  padding: var(--space-12) 0; border-bottom: 1px solid var(--color-ink-100);
}
.service-detail-list .service-detail:last-child { border-bottom: none; }
.service-detail-media {
  aspect-ratio: 4/3; border-radius: var(--radius-lg); background: linear-gradient(140deg, var(--color-brand-200), var(--color-brand-500));
  display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-md);
}
.service-detail-media.order-last { order: 2; }
.lead-sm { color: var(--color-ink-700); font-size: 1.02rem; }

/* Lista com marcador de "check" (tópicos de serviço, sobre) */
.about-list { display: grid; gap: var(--space-3); }
.about-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-ink-700); }
.about-list li::before {
  content: '✓'; color: var(--color-brand-600); font-weight: 700; flex-shrink: 0; line-height: 1.6;
}

.promo-banner-wrap { padding: var(--space-4) 0 var(--space-8); }
@media (max-width: 900px) {
  .service-detail-list .service-detail { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-8) 0; }
  .service-detail-media.order-last { order: 0; }
  .service-detail-media { aspect-ratio: 16/9; }
}
.text-center-card { text-align: center; }

/* Blog */
.blog-post-header { max-width: 720px; margin: 0 auto var(--space-8); text-align: center; }
.blog-post-body { max-width: 680px; margin: 0 auto; font-size: 1.06rem; color: var(--color-ink-700); line-height: 1.75; }
.blog-post-body h2 { margin-top: var(--space-10); font-size: 1.5rem; }

/* Miniaturas do blog: cada categoria com um tom, para a listagem não ficar repetitiva */
.thumb-cat-default { background: linear-gradient(140deg, var(--color-brand-200), var(--color-brand-500)); }
.thumb-cat-refluxo { background: linear-gradient(140deg, #e8a06a, #c07332); }
.thumb-cat-exames { background: linear-gradient(140deg, var(--color-brand-300), var(--color-brand-600)); }
.thumb-cat-doencas-inflamatorias { background: linear-gradient(140deg, #8fa8d8, #4b5bbf); }
.thumb-cat-nutricao { background: linear-gradient(140deg, #7fc4ae, #2f7f68); }