/* ====================================================
   Dr. João Pedro Piretti: estilos (Cirurgia Vascular · Brasília-DF)
   Clonado do site do Dr. Oldack (droldack.com.br) e re-skin na identidade oficial dele.
   MOBILE-FIRST: base = celular; media queries escalam para desktop.
   ==================================================== */

:root{
  /* PALETA OFICIAL (manual de marca do Dr. João Pedro, PDF do cliente):
     #2D2D2D cinza-grafite (cor principal) · #C49882 ouro rosé · #F2F2F2 off-white
     · #454849 cinza. Nomes de variáveis herdados do molde (Oldack); valores remapeados. */
  --petroleo:#2D2D2D;      /* GRAFITE OFICIAL: títulos, footer, véus */
  --petroleo-2:#1E1E1E;    /* grafite escurecido */
  --salvia:#C49882;        /* OURO ROSÉ OFICIAL: decorativo sobre fundo escuro */
  --salvia-dark:#B8866F;   /* ouro rosé um tom abaixo: rules, .mark, bordas */
  --accent:#96705D;        /* ouro rosé escurecido: rótulos sobre fundo claro (contraste) */
  --bege:#F2F2F2;          /* OFF-WHITE OFICIAL (fundo base) */
  --bege-2:#E6E2DF;        /* superfície alternada (off-white levemente quente) */
  --white:#FFFFFF;
  --ink:#2D2D2D;           /* corpo */
  --muted:#595D5F;         /* texto secundário (derivado do #454849 da marca) */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;   /* títulos: as mesmas do site do Oldack (decisão do Henrique, 26/09/2026: o manual pede Century Gothic + Quicksand, que ficou infantil) */
  --sans:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;  /* corpo: Poppins, igual ao Oldack */
  --maxw:1180px;
  --radius:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:72px}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bege);
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- tipografia utilitária ---------- */
.eyebrow{
  display:inline-block;
  font-size:.74rem;letter-spacing:.06em;
  font-weight:600;color:var(--accent);margin-bottom:10px;
}
.eyebrow.light{color:var(--salvia)}
.section-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2rem,7vw,2.7rem);
  letter-spacing:.005em;line-height:1.12;color:var(--petroleo);
}
.section-title.light{color:var(--white)}
.section-sub{
  color:var(--accent);font-weight:500;font-size:1.02rem;
  margin-top:6px;letter-spacing:.01em;
}
.section-sub.light{color:var(--salvia)}
.section-name{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,6.5vw,2.6rem);
  letter-spacing:.005em;color:var(--petroleo);line-height:1.08;
}
.rule{display:block;width:62px;height:1px;background:var(--salvia-dark);margin:18px 0 22px}
/* destaque editorial : sublinhado sálvia p/ momentos marcantes (depoimentos, bio) */
.mark{font-weight:600;color:var(--petroleo);
  /* sublinhado vinho suave: em 100% o vinho parece link. */
  text-decoration:underline;text-decoration-color:rgba(184,134,111,.6);
  text-decoration-thickness:2px;text-underline-offset:4px}
.section-head{text-align:center;max-width:680px;margin:0 auto 38px;padding:0 22px}
.section-head .rule{margin-left:auto;margin-right:auto}
.section-lead{color:var(--muted);font-size:1.04rem;line-height:1.6;margin-top:4px;text-align:center}
/* prosa corrida (substitui grade de cards de patologias : §4f) */
.prosa{max-width:720px;margin:0 auto;padding:0 22px}
.prosa p{color:var(--muted);font-size:1.06rem;line-height:1.78;margin-bottom:18px}
.prosa p:last-child{margin-bottom:0}
.prosa p strong{color:var(--petroleo);font-weight:600}
/* logo no header/rodapé */
.nav-logo img{width:auto;display:block}
/* footer: só o monograma (o olho) numa "moeda" creme : o lockup completo não dá
   leitura ao encolher, e o símbolo terracota sumiria no footer terracota (§14f) */
.footer-logo{height:74px;width:74px;padding:14px;background:var(--bege);border-radius:50%;
  object-fit:contain;margin:0 auto 18px;display:block}

/* ===== Frentes de atuação : painéis direcionais (§4f, exceção aprovada) ===== */
.frentes{padding:clamp(54px,11vw,104px) 0;background:var(--white)}
.frentes-grid{display:grid;grid-template-columns:1fr;gap:18px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.frente{position:relative;display:block;border-radius:18px;overflow:hidden;min-height:360px;
  box-shadow:0 18px 44px -26px rgba(45,45,45,.45);isolation:isolate;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.frente img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  filter:none;transition:filter .55s var(--ease),transform .6s var(--ease)}
/* cor NORMAL por padrão; no hover (desktop) vira o tom verde da paleta (P&B + tint teal) */
.frente::after{content:"";position:absolute;inset:0;z-index:1;
  background:var(--petroleo);mix-blend-mode:color;opacity:0;transition:opacity .5s var(--ease)}
.frente-card{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  display:flex;flex-direction:column;min-height:172px;
  background:rgba(242,242,242,.60);
  -webkit-backdrop-filter:blur(15px) saturate(106%);
  backdrop-filter:blur(15px) saturate(106%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 16px 36px -22px rgba(45,45,45,.55), inset 0 1px 0 rgba(255,255,255,.4);
  border-radius:16px;padding:20px 22px}
.frente-card h3{font-family:var(--serif);font-weight:600;color:var(--petroleo);
  font-size:1.38rem;line-height:1.16;margin-bottom:6px;min-height:2.32em}
.frente-card p{color:var(--muted);font-size:.92rem;line-height:1.5;margin-bottom:12px}
.frente-link{margin-top:auto;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--accent)}
@media(min-width:768px){ .frentes-grid{grid-template-columns:repeat(3,1fr)} }
/* 2 frentes: duas colunas centralizadas (o repeat(3) deixava um buraco à direita) */
.frentes-grid.n2{max-width:880px}
@media(min-width:768px){ .frentes-grid.n2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){
  .frente{min-height:480px}
  .frente:hover{transform:translateY(-6px)}
  .frente:hover img{filter:grayscale(1);transform:scale(1.05)}   /* hover: P&B + tint teal = tom verde */
  .frente:hover::after{opacity:.85}
}

/* ===== Variações por página (classes ÚNICAS deste cliente : §9.5) ===== */
/* gap nome↔especialidade no hero (§14d) */
.lp-jp-home .hero-spec,.lp-jp-micro .hero-spec,.lp-jp-consultorio .hero-spec{margin-top:22px}
/* alternância de superfícies das dobras vizinhas (§4c):
   HOME:  hero(bege) → números(marinho) → frentes(branco) → educação(painel) → sobre(bege)
          → convênios(branco) → CTA(bege-2) → onde atende(marinho)
   LPs:   hero(bege) → o que é(branco) → tratamentos(bege-2) → números(marinho) → sobre(bege)
          → convênios(branco) → CTA(azul claro) → onde atende(marinho) */
.lp-jp-home .convenios,.lp-jp-micro .convenios,.lp-jp-consultorio .convenios{background:var(--white)}
.lp-jp-home .cta{background:var(--bege-2)}
.tratamentos-alt{background:var(--bege-2)}
/* CTA das LPs em azul claro da marca: quente entre os convênios (branco) e o
   "onde atende" (marinho). Não pode ser escuro : encostaria em duas dobras
   escuras seguidas (atendimento + rodapé), §4c. */
.lp-jp-micro .cta,.lp-jp-consultorio .cta{background:var(--salvia)}
.lp-jp-micro .cta p,.lp-jp-consultorio .cta p{color:var(--petroleo);opacity:.9}
.lp-jp-micro .cta .btn-solid:hover,.lp-jp-consultorio .cta .btn-solid:hover{
  background:var(--bege);border-color:var(--bege);color:var(--petroleo)}

/* ---------- convênios em TEXTO (sem logos) ----------
   Decisão do projeto: o acervo só tem 3 dos 6 planos dele (faltam AMS/Petrobras,
   Camed e o Select). Meia grade de logos fica pior que a lista escrita : o
   framework §5 aceita listar os nomes em texto. */
.conv-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:12px 14px;max-width:800px;margin:26px auto 0;padding:0 22px}
.conv-list li{font-size:.94rem;font-weight:500;color:var(--petroleo);
  background:var(--bege);border:1px solid rgba(45,45,45,.10);
  border-radius:var(--radius);padding:10px 20px;line-height:1.2}
@media(min-width:980px){ .conv-list li{font-size:1rem;padding:11px 24px} }

/* headline longa no hero das LPs (§4d): fonte menor p/ não virar 4 linhas no mobile */
.lp-jp-micro .hero-name,.lp-jp-consultorio .hero-name{font-size:clamp(1.62rem,6.6vw,2.5rem);line-height:1.08}

/* ---------- prosa com subtítulos (LP de varizes) ---------- */
.prosa-title{font-family:var(--serif);font-weight:600;color:var(--petroleo);
  font-size:clamp(1.3rem,5vw,1.62rem);line-height:1.2;margin:34px 0 4px;text-align:center}
.prosa-title:first-child{margin-top:0}
.prosa-lead{color:var(--accent);font-weight:600;font-size:.95rem;margin-bottom:6px;text-align:center}
.prosa-nota{margin-top:30px;padding-top:22px;border-top:1px solid rgba(45,45,45,.12);
  color:var(--muted);font-size:1rem;text-align:center}
.nota-conv{display:block;margin-top:6px;font-size:.84rem;color:var(--accent);font-weight:600}

/* texto das dobras de conteúdo centralizado (referência: alicevascular.com.br) */
.tratamentos .prosa{text-align:center}
.tratamentos .prosa p{margin-left:auto;margin-right:auto;max-width:44em}

.nb{white-space:nowrap}   /* não quebrar "Camaçari - BA" no meio */

/* ---------- botões ---------- */
.btn{display:inline-block;cursor:pointer;font-family:var(--sans);font-weight:600;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .25s var(--ease)}
.btn-pill{padding:16px 36px;border-radius:var(--radius)}
.btn-solid{background:var(--petroleo);color:var(--bege);border:1px solid var(--petroleo)}
.btn-solid:hover{background:var(--salvia);border-color:var(--salvia);color:var(--petroleo)}
.btn-ghost{background:transparent;color:var(--petroleo);border:1px solid var(--salvia-dark)}
.btn-ghost:hover{background:var(--petroleo);border-color:var(--petroleo);color:var(--bege)}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(242,242,242,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(45,45,45,.12);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
.nav-logo{display:flex;flex-direction:row;align-items:center;gap:11px}
.nav-mono{height:44px;width:auto;flex-shrink:0}
.wm{display:flex;flex-direction:column;gap:2px;line-height:1}
.wm-name,.wm-sub{white-space:nowrap}
/* no mobile o lockup tem pouca largura (monograma + hambúrguer): encolhe sem deixar quebrar em 2 linhas */
@media(max-width:560px){ .nav-mono{height:36px} .wm-name{font-size:.98rem} .wm-sub{font-size:.42rem;letter-spacing:.16em} }
@media(max-width:360px){ .nav-mono{height:32px} .wm-name{font-size:.88rem} .wm-sub{font-size:.38rem;letter-spacing:.12em} }
.wm-name{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:.02em;color:var(--petroleo)}
.wm-sub{font-size:.54rem;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:30px}
.nav-links{display:none;gap:24px;list-style:none}
.nav-links a{font-size:.8rem;letter-spacing:.04em;font-weight:500;color:var(--petroleo);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;
  background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:none}
.nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:25px;height:2px;background:var(--petroleo);transition:.3s}

/* drawer mobile */
.nav-links.open{
  display:flex;position:fixed;inset:64px 0 auto 0;background:var(--bege);
  flex-direction:column;gap:0;padding:8px 0;
  box-shadow:0 22px 30px -22px rgba(45,45,45,.45);
  animation:drawer .35s var(--ease)}
@keyframes drawer{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.nav-links.open li{text-align:center;border-top:1px solid rgba(45,45,45,.07)}
.nav-links.open a{display:block;padding:15px}

/* ===================== HERO ===================== */
/* ===== HERO (base = MOBILE): foto + card de vidro claro sobreposto =====
   Este é o desenho aprovado no celular : NÃO mexer aqui. O padrão "foto na dobra
   inteira com texto por cima" (ref. uro.drjoaoestrela.com.br) vive só no bloco
   de ≥980px, mais abaixo. Mobile e desktop são independentes (§10). */
.hero{background:var(--bege)}
.hero-media{height:56vh;min-height:340px;max-height:520px;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.hero-card{
  position:relative;z-index:2;margin:-58px 14px 0;
  /* liquid glass (iOS-style): fundo translúcido + blur forte + borda iluminada + brilho interno */
  background:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(22px) saturate(106%);
  backdrop-filter:blur(22px) saturate(106%);
  border:1px solid rgba(255,255,255,.5);
  border-radius:26px;
  box-shadow:0 28px 60px -28px rgba(45,45,45,.55), inset 0 1px 0 rgba(255,255,255,.45);
  padding:34px 24px 36px;text-align:center;
}
.hero-name{font-family:var(--serif);font-weight:600;color:var(--petroleo);
  font-size:clamp(1.78rem,8.2vw,3rem);line-height:1.05;letter-spacing:.01em}
.hero-spec{font-family:var(--serif);font-weight:500;color:var(--petroleo);
  font-size:clamp(1.18rem,5.4vw,1.8rem);line-height:1.15;margin-top:2px}
.hero-loc{color:var(--accent);font-weight:600;font-size:.92rem;margin-top:10px;letter-spacing:.01em}
.hero .rule{margin:18px auto 16px}
.hero-tagline{font-family:var(--serif);font-style:normal;font-weight:500;
  font-size:clamp(1.16rem,4.4vw,1.42rem);color:var(--muted);line-height:1.45;max-width:24em;margin:0 auto 16px}
.hero-cred{font-size:.76rem;letter-spacing:.1em;color:var(--petroleo);font-weight:600;margin-bottom:22px}
.hero .btn{width:100%;max-width:320px}

/* ===================== DEPOIMENTOS ===================== */
.depoimentos{padding:clamp(54px,11vw,96px) 0;background:var(--bege)}
.carousel{display:flex;align-items:center;gap:10px;max-width:860px;margin:0 auto;padding:0 14px}
.car-track{overflow:hidden;flex:1;display:grid;align-items:center}
.slide{font-family:var(--serif);font-size:clamp(1.3rem,5vw,1.6rem);font-weight:500;
  line-height:1.4;color:var(--petroleo);text-align:center;font-style:normal;
  grid-area:1/1;opacity:0;visibility:hidden}
.slide.active{opacity:1;visibility:visible;animation:fadeInUp 1s ease}
.slide cite{display:block;margin-top:20px;font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
.car-arrow{background:none;border:1px solid var(--salvia);color:var(--accent);
  width:40px;height:40px;border-radius:50%;font-size:1.3rem;cursor:pointer;
  flex-shrink:0;transition:.3s;line-height:1}
.car-arrow:hover{background:var(--salvia);color:var(--white)}
.car-dots{display:flex;gap:9px;justify-content:center;margin-top:30px}
.car-dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--bege-2);cursor:pointer;transition:.3s;padding:0}
.car-dots button.active{background:var(--accent);width:24px;border-radius:6px}

/* ===================== NÚMEROS / AUTORIDADE (dobra logo após depoimentos) ===================== */
.numeros{padding:clamp(40px,8vw,66px) 0;background:var(--petroleo)}
.numeros-grid{max-width:var(--maxw);margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:30px 18px}
.num-item{position:relative;text-align:center;display:flex;flex-direction:column;gap:6px}
.num-big{font-family:var(--serif);font-weight:600;color:var(--salvia);
  font-size:clamp(1.85rem,7vw,2.7rem);line-height:1.02}
.num-label{font-size:.86rem;letter-spacing:.03em;color:#E4DEDA;line-height:1.4;max-width:15em;margin:0 auto}
@media(min-width:768px){
  .numeros-grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .num-item + .num-item::before{content:"";position:absolute;left:-12px;top:50%;
    transform:translateY(-50%);width:1px;height:56px;background:rgba(196,152,130,.34)}
}
/* n3 = três números: 1 coluna no mobile (tudo vertical), 3 no desktop (tudo horizontal, sem buraco) */
.numeros-grid.n3{grid-template-columns:1fr;max-width:640px}
@media(min-width:768px){ .numeros-grid.n3{grid-template-columns:repeat(3,1fr);max-width:var(--maxw)} }

/* ===================== TRATAMENTOS ===================== */
.tratamentos{padding:clamp(54px,11vw,104px) 0;background:var(--white)}
.cards{display:grid;grid-template-columns:1fr;gap:18px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.card{background:var(--bege);padding:34px 28px;border-radius:14px;
  border:1px solid rgba(45,45,45,.05);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -24px rgba(45,45,45,.4)}
.card h3{font-family:var(--serif);font-weight:600;color:var(--petroleo);
  font-size:1.5rem;margin-bottom:10px;line-height:1.2}
.card-sub{display:block;font-family:var(--sans);font-weight:500;font-size:.84rem;color:var(--accent);letter-spacing:.02em}
.card p{color:var(--muted);font-size:1rem;margin-bottom:18px}
.card-link{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--accent);transition:.3s}
.card-link:hover{color:var(--petroleo)}

/* ===================== EDUCAÇÃO (painel sálvia) ===================== */
.educacao{display:flex;flex-direction:column}
.educacao-photo{height:52vh;min-height:320px;max-height:480px}
.educacao-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.educacao-panel{background:var(--petroleo);color:var(--bege);padding:clamp(40px,9vw,72px) 22px}
.educacao-panel .eyebrow{color:var(--salvia);opacity:1}
.educacao-panel p{margin-bottom:16px;color:var(--bege);font-size:1.06rem;max-width:34em}
.educacao-panel .signature{font-family:var(--serif);font-style:normal;font-size:1.2rem;
  font-weight:600;color:var(--salvia);opacity:1}

/* ===================== SOBRE ===================== */
.sobre{display:flex;flex-direction:column;background:var(--bege)}
.sobre-photo{height:58vh;min-height:360px;max-height:560px}
.sobre-photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.sobre-text{padding:clamp(40px,9vw,72px) 22px}
.sobre-spec{color:var(--accent);font-weight:600;letter-spacing:.02em;margin-top:2px}
.sobre-text p{margin-bottom:16px;color:var(--muted);font-size:1.02rem;max-width:36em}
.sobre-text p strong{color:var(--petroleo);font-weight:600}
.sobre-highlight{color:var(--petroleo)!important;font-family:var(--serif);font-style:normal;
  font-size:clamp(1.2rem,4.6vw,1.6rem)!important;font-weight:600;line-height:1.36;
  margin-top:6px!important;padding-left:18px;border-left:3px solid var(--salvia-dark)}

/* ===================== CTA STRIP ===================== */
.cta{text-align:center;padding:clamp(54px,10vw,92px) 22px;background:var(--white)}
.cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,6.5vw,2.6rem);
  color:var(--petroleo);margin-bottom:12px;line-height:1.1}
.cta p{color:var(--muted);max-width:32em;margin:0 auto 26px}
.cta-phone{font-size:1.05rem!important;letter-spacing:.06em;color:var(--petroleo);
  font-weight:600;margin-top:20px!important}

/* ===================== LOCAIS DE ATENDIMENTO ===================== */
.atendimento{position:relative;overflow:hidden;padding:clamp(60px,12vw,110px) 0;background:var(--petroleo)}
.atend-bg{position:absolute;left:0;right:0;top:-28%;height:156%;z-index:0;
  background:linear-gradient(rgba(45,45,45,.86),rgba(45,45,45,.92)),url('img/atend.jpg');
  background-size:cover;background-position:center 25%;will-change:transform}
.atend-head{position:relative;z-index:2;text-align:center;max-width:740px;margin:0 auto 40px;padding:0 22px}
/* flex + wrap + justify-center: centraliza linhas incompletas (2, 5, ímpares) : §7 */
.atend-grid{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.atend-card{flex:1 1 300px;max-width:380px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(18px) saturate(104%);
  backdrop-filter:blur(18px) saturate(104%);
  box-shadow:0 22px 46px -26px rgba(70,44,32,.6), inset 0 1px 0 rgba(255,255,255,.2);
  border-radius:18px;padding:30px 26px}
.atend-card h3{font-family:var(--serif);color:var(--salvia);font-weight:600;font-size:1.5rem;margin-bottom:12px;line-height:1.15}
.atend-card p{color:#E4DEDA;font-size:1rem}
.atend-card .pin{margin-right:6px}
.atend-card em{color:var(--salvia);font-style:normal;font-size:.85rem;display:inline-block;margin-top:6px}

/* ===================== CONVÊNIOS ===================== */
.convenios{padding:clamp(54px,11vw,100px) 0;background:var(--bege)}
.convenios{overflow:hidden}
.conv-wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;display:grid;gap:26px}
.conv-head{text-align:center}
.conv-sub{margin-top:8px;color:var(--petroleo);opacity:.72;font-size:.95rem}

/* faixa de logos : banner por GPU (transform) + arrastar; cor original, sem caixa */
.conv-marquee{position:relative;overflow:hidden;width:100%;
  cursor:grab;touch-action:pan-y;        /* vertical rola a página; horizontal é da JS */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.conv-marquee.dragging{cursor:grabbing}
.conv-track{display:flex;align-items:center;width:max-content;will-change:transform;
  user-select:none;-webkit-user-select:none}
/* logos: MESMA ALTURA para todos, largura livre (§5a-v2). Espaçamento por margin
   (com gap o loop de -50% não fecha exato e dá pulinho na emenda). */
.conv-track img{height:34px;width:auto;flex:0 0 auto;margin:0 clamp(22px,5vw,40px);
  object-fit:contain}
@media(min-width:980px){ .conv-track img{height:40px} }

/* nomes dos convênios em TEXTO (resolve a baixa qualidade de logos obscuros);
   tamanho uniforme por natureza, separados por um ponto sálvia */
.conv-name{flex:0 0 auto;display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--sans);font-weight:600;letter-spacing:.04em;
  font-size:clamp(1rem,3.6vw,1.12rem);color:var(--petroleo)}
.conv-name::after{content:"•";color:var(--salvia-dark);font-size:.7em;
  margin:0 clamp(20px,5.5vw,40px)}


/* ===== Dobra "vidro sobre foto" (§4h) : usada nas LPs no lugar da dobra branca
   de texto corrido: foto de fundo + véu marinho + 2 caixas de liquid glass.
   Mobile-first; o desktop só põe as duas caixas lado a lado. ===== */
.caixas{position:relative;overflow:hidden;padding:clamp(56px,11vw,104px) 0;background:var(--petroleo)}
.caixas-bg{position:absolute;left:0;right:0;top:-24%;height:148%;z-index:0;
  background-size:cover;background-position:center 22%;will-change:transform}
.caixas > *:not(.caixas-bg){position:relative;z-index:2}
.caixas .section-title,.caixas .section-sub{color:var(--white)}
.caixas .eyebrow{color:var(--salvia)}
.caixas .rule{background:rgba(255,255,255,.45)}
.caixas-grid{display:grid;grid-template-columns:1fr;gap:18px;
  max-width:var(--maxw);margin:0 auto;padding:0 18px}
.caixa{
  /* liquid glass sobre foto escura: tint claro baixo + blur + borda iluminada */
  background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(20px) saturate(106%);
  backdrop-filter:blur(20px) saturate(106%);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 22px 46px -26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.38);
  border-radius:22px;padding:26px 22px 28px;text-align:center;color:var(--white)}
.caixa h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.24rem,5vw,1.5rem);
  line-height:1.18;margin-bottom:4px;color:var(--white)}
.caixa .caixa-sub{color:var(--salvia);font-size:.82rem;font-weight:600;
  letter-spacing:.02em;margin-bottom:16px}
.caixa p{color:rgba(255,255,255,.92);font-size:.98rem;line-height:1.6;margin-bottom:14px}
.caixa p:last-child{margin-bottom:0}
.caixas-nota{max-width:44em;margin:26px auto 0;padding:0 22px;text-align:center;
  color:rgba(255,255,255,.80);font-size:.96rem}
.caixas-nota strong{color:var(--white)}
.caixa p strong{color:var(--white)}
@media(min-width:900px){
  .caixas-grid{grid-template-columns:repeat(2,1fr);gap:26px;padding:0 22px}
  .caixa{padding:34px 32px 36px;display:flex;flex-direction:column}
}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--petroleo);color:var(--bege);padding:54px 0 28px;text-align:center}
.footer-block{margin-bottom:30px}
.footer-block h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--salvia);font-weight:600;margin-bottom:14px}
.footer-block p{font-size:.96rem;color:#E4DEDA;margin-bottom:8px;line-height:1.6}
.footer-phone strong{color:var(--bege);font-size:1.08rem;letter-spacing:.04em}
.footer-map ul{list-style:none}
.footer-map li{margin-bottom:9px}
.footer-map a{font-size:.92rem;color:#E4DEDA;transition:.3s}
.footer-map a:hover{color:var(--salvia)}
.footer-bottom{border-top:1px solid rgba(196,152,130,.26);margin-top:6px;padding-top:26px;
  font-size:.76rem;color:#B9B1AC;letter-spacing:.02em;line-height:1.7}
.footer-bottom p{margin-bottom:6px}

/* ===================== WHATSAPP FLUTUANTE ===================== */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:90;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(37,211,102,.7);transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}

/* ====================================================
   ESCALA TABLET  (≥ 640px)
   ==================================================== */
@media(min-width:640px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .atend-grid{grid-template-columns:repeat(2,1fr)}
  .hero-card{margin:-72px auto 0;max-width:600px;padding:42px 44px 44px}
  .hero-media{height:62vh;max-height:600px}
}

/* ====================================================
   HERO MOBILE/TABLET (< 980px) : em fluxo
   ==================================================== */
@media(max-width:979px){
  /* hero EM FLUXO (§1): a foto rola normal e começa abaixo do header sticky.
     O parallax acontece DENTRO da moldura (JS), com o zoom crescendo p/ baixo. */
  .hero-media img{will-change:transform;transform-origin:center top}
  .hero{background:var(--bege)}
  .hero-media{position:relative;height:56vh;min-height:320px;max-height:520px;z-index:0}
  .hero-card{margin-top:-110px;margin-bottom:14px}
  /* as seções seguintes precisam pintar por cima da imagem fixa e cobri-la ao rolar */
  .depoimentos,.tratamentos,.educacao,.sobre,.cta,.atendimento,.convenios,.site-footer{position:relative;z-index:1}

  /* Educação: foto EM FLUXO e limpa (sem sticky/scale) : mostra a cabeça
     inteira (§6b) e evita a "faixa-fantasma" do iOS. O painel vem abaixo. */
  .educacao-photo{position:relative;height:64vh;min-height:340px;max-height:560px;
    z-index:1;overflow:hidden}
  .educacao-photo img{object-position:center top}
  .educacao-panel{position:relative;z-index:1}

}

/* ====================================================
   ESCALA DESKTOP  (≥ 980px)
   ==================================================== */
@media(min-width:980px){
  html{scroll-padding-top:86px}
  .hero-spec{font-size:1.55rem}
  .nav{height:86px}
  .nav-toggle{display:none}
  .nav-links{display:flex}
  .nav-cta{display:inline-block}
  .wm-name{font-size:1.42rem}

  /* desktop: depoimentos em tom diferente p/ separar das dobras vizinhas (mobile inalterado) */
  .depoimentos{background:var(--bege-2)}

  /* ===== HERO SÓ NO DESKTOP (ref. uro.drjoaoestrela.com.br) =====
     A foto ocupa a dobra inteira e o texto fica POR CIMA dela, à esquerda, sobre
     um véu marinho. O card de vidro claro do celular é zerado aqui. */
  .hero{position:relative;isolation:isolate;display:flex;align-items:center;
    height:calc(100vh - 86px);min-height:620px;max-height:none;
    background:var(--petroleo);overflow:hidden}
  .hero-media{position:absolute;inset:0;z-index:0;height:auto;max-height:none;min-height:0}
  .hero-media img{object-position:right top}   /* respiro acima da cabeça, §6b */
  /* véu na horizontal: escuro à esquerda (onde fica o texto), limpo sobre ele */
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(45,45,45,.95) 0%, rgba(45,45,45,.90) 30%,
      rgba(45,45,45,.62) 48%, rgba(45,45,45,.18) 66%, rgba(45,45,45,0) 80%)}
  /* o card de vidro do mobile some: aqui o texto fica solto sobre a foto */
  .hero-card{position:relative;z-index:2;width:100%;max-width:none;
    margin:0;padding:0 22px 0 clamp(38px,6vw,96px);text-align:left;
    background:transparent;border:0;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    display:flex;flex-direction:column;align-items:flex-start}
  .hero-card > *{max-width:min(540px,46%)}
  .hero-name{font-family:var(--serif);font-size:clamp(2.6rem,4vw,3.4rem);color:var(--white)}
  .hero-spec{font-family:var(--sans);font-weight:400;font-size:1.34rem;margin-top:12px;
    color:rgba(255,255,255,.95)}
  .hero-loc{color:var(--salvia)}
  .hero .rule{margin:20px 0 16px;background:rgba(255,255,255,.45)}
  .hero-tagline{font-family:var(--sans);font-weight:400;font-size:1.06rem;
    color:rgba(255,255,255,.96);margin:0 0 22px;line-height:1.55}
  .hero-cred{color:rgba(255,255,255,.82)}
  .hero .btn{width:auto;max-width:none;min-width:230px;
    background:var(--white);border-color:var(--white);color:var(--petroleo)}
  .hero .btn:hover{background:var(--salvia);border-color:var(--salvia);color:var(--petroleo)}

  /* LPs no desktop: as fotos delas são RETRATO. No full-bleed a foto vira um
     rosto ampliado e cortado (o container fica 2:1). Então, só no computador, as
     LPs usam 2 colunas: painel marinho à esquerda, foto à direita em tamanho
     natural. Mesma linguagem visual, sem deformar a foto. */
  .lp-jp-home .hero,.lp-jp-micro .hero,.lp-jp-consultorio .hero{
    display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}
  .lp-jp-home .hero-media,.lp-jp-micro .hero-media,.lp-jp-consultorio .hero-media{position:relative;inset:auto;order:2}
  .lp-jp-home .hero-media img,.lp-jp-micro .hero-media img,.lp-jp-consultorio .hero-media img{object-position:center top}
  .lp-jp-home .hero::after,.lp-jp-micro .hero::after,.lp-jp-consultorio .hero::after{display:none}
  .lp-jp-home .hero-card,.lp-jp-micro .hero-card,.lp-jp-consultorio .hero-card{
    order:1;justify-content:center;margin:0;max-width:none;
    padding:48px clamp(40px,5vw,84px)}
  .lp-jp-home .hero-card > *,.lp-jp-micro .hero-card > *,.lp-jp-consultorio .hero-card > *{max-width:34em}
  .lp-jp-micro .hero-name,.lp-jp-consultorio .hero-name{font-size:clamp(2.1rem,3.1vw,2.7rem)}

  /* blocos foto + painel lado a lado : a foto preenche (cover) a altura do painel de texto */
  .educacao{display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch}
  /* célula ALTA (≈retrato) p/ mostrar o corpo da Dra. sem corte vertical brusco */
  .educacao-photo{position:relative;height:auto;max-height:none;min-height:1040px}
  .educacao-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
  .educacao-panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,6vw,90px)}
  .sobre{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
  .sobre-photo{position:relative;height:auto;max-height:none;min-height:1040px;order:2}
  .sobre-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
  .sobre-text{order:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,6vw,90px)}

  /* convênios estilo Bruna: título à esquerda, faixa rolando à direita */
  .conv-wrap{grid-template-columns:minmax(220px,300px) 1fr;align-items:center;gap:clamp(32px,5vw,64px)}
  .conv-head{text-align:left}
  .conv-name{font-size:1.18rem}
  .conv-name::after{margin:0 clamp(34px,3vw,52px)}

  /* atendimento: 3 cards em UMA linha (sem quebra), mesma altura + conteúdo centralizado */
  .atend-grid{grid-template-columns:repeat(3,1fr);max-width:var(--maxw)}
  .atend-card{display:flex;flex-direction:column;justify-content:center}

  /* footer no desktop : logo e contato nos DOIS QUARTOS CENTRAIS (não nas extremidades) */
  .site-footer{padding:44px 0 26px}
  .footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;
    display:flex;align-items:center;justify-content:center;gap:clamp(48px,10vw,150px);text-align:left}
  .footer-logo{margin:0}
  .footer-block{margin-bottom:0}
  .footer-bottom{text-align:center}

  /* ===== Dinamismo desktop (não afeta mobile) ===== */
  /* containers das fotos com parallax precisam recortar o overflow do scale(1.12) */
  .hero-media,.educacao-photo,.sobre-photo{overflow:hidden}
  .hero-media img{will-change:transform;transform-origin:center top}
  .hero-media img,.educacao-photo img,.sobre-photo img{will-change:transform;transform-origin:center top}

  /* revelar ao rolar */
  .reveal-on .reveal{opacity:0;transform:translateY(24px);
    transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .reveal-on .reveal.in-view{opacity:1;transform:none}
  .reveal-on .reveal-fade{opacity:0;transition:opacity .7s var(--ease)}
  .reveal-on .reveal-fade.in-view{opacity:1}
  /* leve stagger entre os 3 cards da mesma linha */
  .reveal-on .cards .card:nth-child(2){transition-delay:.09s}
  .reveal-on .cards .card:nth-child(3){transition-delay:.18s}

  /* micro-interações */
  .card:hover{transform:translateY(-8px)}
  .btn:hover{transform:translateY(-2px)}
  .nav-cta:hover{transform:translateY(-2px)}
}

@media(min-width:1180px){
  .hero-name{font-size:3.2rem}
}

/* ====================================================
   AJUSTES SÓ-MOBILE (não tocar no desktop)
   ==================================================== */
@media(max-width:979px){
  /* Head-safety: respiro acima da cabeça (não cortar cabelo/rosto) : §6b.
     Home: a foto é DEITADA (a única do ensaio), então o recorte puxa p/ o lado
     onde ele está; as LPs são retratos e ficam ancoradas no topo. */
  .lp-jp-home .hero-media img{object-position:72% top}
  .lp-jp-micro .hero-media img,
  .lp-jp-consultorio .hero-media img{object-position:center top}
  .sobre-photo img{object-position:center top}

  /* Frentes: no mobile não há espaço para foto + box → remover a foto e manter só
     o box de texto; a dobra ganha fundo bege (como atrás das fotos das landings). */
  .frentes{background:var(--bege)}
  .frente{min-height:0;background:transparent;box-shadow:none;border-radius:0}
  .frente img,.frente::after{display:none}
  .frente-card{position:static;min-height:0;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 14px 30px -20px rgba(45,45,45,.4), inset 0 1px 0 rgba(255,255,255,.5)}
}


/* mobile: título do painel de frente com 1 linha não precisa reservar 2 (§ só desktop) */
@media(max-width:767px){ .frente-card h3{min-height:0} }


/* ====================================================
   AJUSTES DO DR. JOÃO PEDRO (26/09/2026)
   ==================================================== */

/* HERO NO CELULAR: todas as fotos do ensaio são de roupa e fundo escuros. O card de vidro
   CLARO do molde não daria leitura (diretrizes §6 e §4h). Aqui o card vira vidro GRAFITE
   com letra clara. Só no celular; o desktop usa o painel grafite em 2 colunas. */
@media(max-width:979px){
  .hero{background:var(--petroleo)}
  .hero-media img{object-position:center top}
  .hero-card{background:rgba(30,30,30,.62);border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(20px) saturate(104%);backdrop-filter:blur(20px) saturate(104%);
    box-shadow:0 28px 60px -28px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.18);
    margin-bottom:0;padding-bottom:40px}
  /* respiro de fundo grafite entre o card e a 2ª dobra (Henrique, 28/09/2026). Vai no padding da
     seção, não na margem do card: margem do último filho vaza para fora da seção e não pinta o fundo. */
  .hero{padding-bottom:30px}
  .hero-name,.hero-spec{color:var(--white)}
  .hero-tagline{color:rgba(255,255,255,.86)}
  .hero-cred{color:var(--salvia)}
  .hero .rule{background:var(--salvia)}
  .hero .btn-solid{background:var(--salvia);border-color:var(--salvia);color:var(--petroleo-2)}
  .depoimentos{padding-top:clamp(64px,13vw,104px)}
}
/* o hero grafite encosta na dobra de depoimentos: no celular ela fica off-white (contraste ok) */

/* grupo de 3 caixas: 1 linha x 3 colunas no desktop (diretrizes §6c) */
@media(min-width:900px){ .caixas-grid.n3{grid-template-columns:repeat(3,1fr)} }

/* convênios: faixa de NOMES (a lista dele tem 42 planos e o acervo só tem 9 logos) */
.conv-sub{text-align:center}
@media(min-width:980px){ .conv-sub{text-align:left} }

/* header no celular: o nome dele é mais longo que o do molde e encostava no menu */
@media(max-width:560px){ .nav-logo{gap:8px} .wm-name{font-size:.92rem} .wm-sub{font-size:.4rem;letter-spacing:.08em} }
@media(max-width:360px){ .wm-name{font-size:.82rem} .wm-sub{font-size:.36rem;letter-spacing:.05em} }

/* ===== Convênios em GRADE (40 planos: a faixa deslizante não daria pra percorrer) =====
   Celular: 4 por linha. Tablet: 5. Computador: 8 por linha (5 linhas). Célula de mesma
   altura, logo centralizado e contido; os 2 sem logo entram como nome escrito. */
.lp-jp-home .convenios .conv-wrap,.lp-jp-micro .convenios .conv-wrap,.lp-jp-consultorio .convenios .conv-wrap{
  display:block;max-width:var(--maxw)}
.convenios .conv-head{text-align:center;margin-bottom:30px}
.convenios .conv-sub{text-align:center}
.conv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;margin:0;padding:0}
.conv-cell{background:var(--bege);border:1px solid rgba(45,45,45,.06);border-radius:12px;
  height:64px;display:flex;align-items:center;justify-content:center;padding:8px 10px}
.conv-cell img{max-height:38px;max-width:100%;width:auto;height:auto;object-fit:contain}
.conv-cell span{font-size:.66rem;font-weight:600;line-height:1.25;text-align:center;color:var(--petroleo)}
@media(min-width:640px){ .conv-grid{grid-template-columns:repeat(5,1fr);gap:12px} .conv-cell{height:76px} .conv-cell img{max-height:44px} }
@media(min-width:980px){
  .conv-grid{grid-template-columns:repeat(8,1fr);gap:14px}
  .conv-cell{height:84px;padding:10px 14px} .conv-cell img{max-height:48px} .conv-cell span{font-size:.74rem}
  .convenios .conv-head{text-align:center} .convenios .conv-sub{text-align:center}
}

/* Fundos com foto no celular ("Os tratamentos" e "Onde atende"), 28/09/2026: no celular a caixa
   do fundo era bem mais alta que a seção (sobra para o parallax) e a cabeça do médico ficava
   acima da borda, aparecendo só nariz e boca. Aqui o fundo fica do tamanho da seção, colado no
   topo e sem parallax. O computador continua com o parallax de antes. */
@media(max-width:979px){
  .atend-bg,.caixas-bg{top:0;height:100%;background-position:center top !important;transform:none !important}
}