/* ====================================================
   Dra. Ana Lavratti Borga — estilos (LP hérnias + diástase)
   Re-skin do template. Identidade: monograma AB dourado + tipografia marinho.
   Paleta: #00305B marinho · #8F7042 dourado · #C7AE7E dourado claro · creme #F4F1EA
   Tipografia: Playfair Display (títulos) + Montserrat (corpo)
   MOBILE-FIRST: base = celular; media queries escalam para desktop.
   ==================================================== */

:root{
  --petroleo:#00305B;      /* marinho primário — títulos, footer, overlay */
  --petroleo-2:#00243F;    /* marinho escuro — gradiente/hover */
  --salvia:#C7AE7E;        /* dourado claro (tint) — decorativo sobre escuro */
  --salvia-dark:#8F7042;   /* dourado da marca — sublinhado .mark, rules, bordas */
  --accent:#7E5F2E;        /* dourado profundo — rótulos/links sobre fundo claro */
  --bege:#F4F1EA;          /* creme off-white */
  --bege-2:#EAE4D6;        /* superfície alternada */
  --white:#FFFFFF;
  --ink:#1B2733;           /* azul-grafite (corpo) */
  --muted:#5C6470;         /* slate — texto secundário */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;
  --maxw:1180px;
  --radius:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{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);
  text-decoration:underline;text-decoration-color:var(--salvia-dark);
  text-decoration-thickness:2px;text-underline-offset:3px}
.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{height:40px;width:auto;display:block}
/* footer: só o monograma numa "moeda" clara — o lockup completo não dava leitura ao encolher (§manual) */
.footer-logo{height:70px;width:70px;padding:9px;background:var(--bege);border-radius:50%;object-fit:contain;margin:0 auto 20px;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(0,48,91,.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(246,246,244,.58);
  -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(0,48,91,.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)} }
@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}
}

/* acento oliva (cor secundária da marca) só na página de Pele — diferencia o clima */
body.lp-pele .eyebrow{color:#5D6442}
body.lp-pele .rule{background:#5D6442}
body.lp-pele .frente-link{color:#5D6442}
/* o oliva não lê sobre o painel verde → manter eyebrow do painel em sálvia clara */
body.lp-pele .educacao-panel .eyebrow{color:var(--salvia)}

/* ===== Landing pages — leve variação de cores (dentro da paleta) ===== */
/* Hérnia: inverte o contraste cards/seção e dá um tom mais quente ao CTA */
.lp-hernia .tratamentos{background:var(--bege)}
.lp-hernia .tratamentos .card{background:var(--white)}
.lp-hernia .cta{background:var(--bege-2)}
/* Diástase: clima sálvia (sage) — CTA em sálvia */
.lp-diastase .cta{background:var(--salvia)}
.lp-diastase .cta p{color:var(--petroleo);opacity:.85}
/* Vesícula: CTA escuro (petróleo) com botão sálvia — mais dramático */
.lp-vesicula .cta{background:var(--petroleo)}
.lp-vesicula .cta h2{color:var(--bege)}
.lp-vesicula .cta p{color:var(--salvia)}
.lp-vesicula .cta .cta-phone{color:var(--bege)!important}
.lp-vesicula .cta .btn-solid{background:var(--salvia);border-color:var(--salvia);color:var(--petroleo)}
.lp-vesicula .cta .btn-solid:hover{background:var(--bege);border-color:var(--bege);color:var(--petroleo)}
/* Headlines longas: fonte menor p/ caber em 2 linhas */
.lp-onco .hero-name,.lp-pele .hero-name,.lp-histero .hero-name{font-size:clamp(1.6rem,6.2vw,2.4rem);line-height:1.1}
/* Subtítulo (spec) separado do H1 p/ não parecer uma coisa só */
.lp-onco .hero-spec,.lp-pele .hero-spec,.lp-histero .hero-spec{margin-top:14px;font-size:clamp(1.02rem,4.2vw,1.22rem);font-weight:500;color:var(--accent)}

/* ---------- 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(244,241,234,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,48,91,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:64px}
.nav-logo{display:flex;flex-direction:column;gap:2px;line-height:1}
.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(0,48,91,.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(0,48,91,.07)}
.nav-links.open a{display:block;padding:15px}

/* ===================== HERO ===================== */
.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(252,252,252,.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(0,48,91,.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(2.1rem,8.5vw,3rem);line-height:1.03;letter-spacing:.01em}
.hero-spec{font-family:var(--serif);font-weight:500;color:var(--petroleo);
  font-size:clamp(1.35rem,5.6vw,1.8rem);line-height:1.1;margin-top:2px}
.hero-loc{color:var(--accent);font-weight:600;font-size:.96rem;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.32rem,4.8vw,1.46rem);color:var(--muted);line-height:1.42;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:.8rem;letter-spacing:.03em;color:#E4E9E7;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(199,174,126,.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)} }
/* Início de marca (lp-parede): pula uma linha entre o nome da médica e a especialidade */
.lp-parede .hero-spec{margin-top:22px}

/* ===================== 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(0,48,91,.05);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px -24px rgba(0,48,91,.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:.95rem;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.02rem;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:.98rem;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(0,48,91,.84),rgba(0,48,91,.9)),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 (1, 2, í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(10,30,30,.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:#E4E9E7;font-size:.94rem}
.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}
/* 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)}

/* ===================== 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:.92rem;color:#CFD8D5;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:#CFD8D5;transition:.3s}
.footer-map a:hover{color:var(--salvia)}
.footer-bottom{border-top:1px solid rgba(156,192,191,.22);margin-top:6px;padding-top:26px;
  font-size:.76rem;color:#9FB0AC;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)}
  .conv-track img{height:46px}
  .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 FIXO (mobile/tablet < 980px)
   Imagem "presa" (position:fixed); o conteúdo rola por cima e a foto
   demora a sumir — mesmo efeito do background-attachment:fixed da Bruna,
   mas funcionando no iOS/Android (onde fixed-attachment é ignorado).
   ==================================================== */
@media(max-width:979px){
  .hero{background:transparent}
  .hero-media{position:fixed;top:0;left:0;right:0;height:58vh;min-height:0;max-height:none;z-index:0}
  .hero-card{margin-top:calc(58vh - 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}

  /* hérnia (mobile): tratamentos é bege (override lp-hernia), então depoimentos
     bege ficaria igual à dobra de baixo — diferenciar com bege-2 (só mobile) */
  .lp-hernia .depoimentos{background:var(--bege-2)}
}

/* ====================================================
   ESCALA DESKTOP  (≥ 980px)
   ==================================================== */
@media(min-width:980px){
  html{scroll-padding-top:86px}
  .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 lado a lado */
  /* altura TRAVADA na dobra (senão a imagem retrato estica a seção além da tela
     e o texto, centrado na seção, cai pra baixo da dobra visível) */
  .hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;height:calc(100vh - 86px);min-height:600px}
  .hero-media{height:auto;max-height:none;min-height:0;order:2}
  .hero-card{order:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;
    margin:0;max-width:none;background:transparent;border:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;border-radius:0;text-align:left;padding:48px clamp(40px,5vw,90px)}
  .hero-card > .rule,.hero-card > .btn{align-self:flex-start}   /* não esticar linha/botão no flex */
  .hero .rule{margin-left:0;margin-right:auto}
  .hero-tagline{margin-left:0}
  .hero .btn{width:auto;max-width:none}

  /* 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,.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 */
  .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(0,48,91,.4), inset 0 1px 0 rgba(255,255,255,.5)}
}

/* ===== Ana (lp-parede) — alternância de superfícies das dobras (§4c) =====
   classe única: NÃO usar lp-hernia (colide com regras remanescentes do template Crespo) */
.lp-parede .depoimentos{background:var(--bege-2)}    /* difere do hero bege */
.lp-parede .tratamentos{background:var(--white)}     /* bloco branco (não herdar o bege do .lp-hernia do Crespo) */
.lp-parede .cta{background:var(--bege-2)}            /* quente entre atendimento e footer (escuros) */
/* Home: só 2 frentes → 2 colunas centralizadas (o .cards padrão é 3) */
@media(min-width:640px){ .lp-parede .cards{grid-template-columns:repeat(2,1fr);max-width:780px;margin-left:auto;margin-right:auto} }

/* ===== Sub-páginas Ana (classes ÚNICAS — não usar lp-hernia/lp-diastase do template) ===== */
.lp-hernia-ab .depoimentos,.lp-diastase-ab .depoimentos{background:var(--bege-2)}
.lp-hernia-ab .cta{background:var(--bege-2)}
/* Diástase: CTA em dourado claro (sálvia) — leve distinção entre as duas sub-páginas */
.lp-diastase-ab .cta{background:var(--salvia)}
.lp-diastase-ab .cta p{color:var(--petroleo);opacity:.82}

/* ===== FAQ (dobra — pedido da Dra. Ana) ===== */
.faq{padding:clamp(54px,11vw,100px) 0;background:var(--white)}
.faq-list{max-width:760px;margin:0 auto;padding:0 22px;display:grid;gap:14px}
.faq-item{border:1px solid rgba(0,48,91,.12);border-radius:14px;background:var(--bege);overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--serif);
  font-weight:600;font-size:clamp(1.04rem,3.4vw,1.16rem);color:var(--petroleo);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--salvia-dark);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 24px 22px;color:var(--muted);font-size:1rem;line-height:1.72}
.faq-item .faq-a strong{color:var(--petroleo);font-weight:600}