/* ==========================================================================
   Blocos da página
   ========================================================================== */

/* =============================================================== HERO ===== */
.hero{
  position:relative;display:flex;align-items:center;
  min-height:clamp(600px,88svh,880px);
  padding-block:clamp(52px,7vw,84px);
  overflow:hidden;isolation:isolate;background:var(--v-950);
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:url(../img/hero-bg.webp) center right/cover no-repeat;
}
/* scrim: escurece a esquerda para a tipografia, deixa a luz quente à direita */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(96deg,var(--v-950) 4%,rgba(11,18,14,.94) 30%,rgba(11,18,14,.62) 54%,rgba(11,18,14,.26) 76%,rgba(11,18,14,.42) 100%),
    radial-gradient(120% 90% at 12% 42%,rgba(11,18,14,.72),transparent 62%);
}
.hero__fig{
  position:absolute;z-index:2;margin:0;
  /* o busto acompanha a GRADE, não a borda da janela: assim a folga entre
     ela e o texto fica constante em qualquer largura (medido: 179-225px) */
  /* ela preenche a coluna direita inteira: ancorada no rodapé, com o TOPO DA
     CABEÇA na altura do logotipo. Ancorar na grade (não na borda da janela)
     mantém a folga para o texto estável em qualquer largura. */
  right:clamp(-20px,calc(50% - 798px),380px);bottom:0;
  height:min(84%,760px);width:auto;max-width:560px;aspect-ratio:1100/1381;
  filter:drop-shadow(-26px 18px 46px rgba(0,0,0,.5));
}
.hero__fig img{height:100%;width:100%;object-fit:contain;object-position:bottom center}
.hero__fig--mob{display:none}
/* casamento de luz: gel quente na silhueta, com máscara própria (senão pinta a caixa) */
.hero__fig::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(255deg,rgba(240,224,200,.4),rgba(240,224,200,.05) 42%,transparent 66%);
  mix-blend-mode:soft-light;
  -webkit-mask:url(../img/dra-hero.webp) center/100% 100% no-repeat;
  mask:url(../img/dra-hero.webp) center/100% 100% no-repeat;
}
/* dissolve o pé do hero ACIMA do recorte */
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;
  background:linear-gradient(to top,var(--v-950) 12%,rgba(11,18,14,.72) 48%,transparent);
  pointer-events:none;
}
.hero__wrap{position:relative;z-index:4}
.hero__cont{max-width:min(664px,56%)}
/* o lockup é vertical e o símbolo ocupa 62% da altura: abaixo de ~90px o
   logotipo fica ilegível. Ver .oferta/.pe, que usam a variante só-logotipo. */
.hero__marca{display:block;margin-bottom:clamp(30px,3.8vw,46px)}
.hero__marca img{height:clamp(74px,7.6vw,104px);width:auto}
.hero .kicker{margin-bottom:1.1rem}
.hero h1{margin-bottom:1.25rem;font-size:clamp(2.2rem,3.6vw,3.1rem)}
.hero .lead{max-width:24ch;margin-bottom:1.05rem;color:var(--creme);line-height:1.3}
.hero .lead b{color:var(--creme);font-weight:500}
.hero__corpo{
  max-width:44ch;margin:0 0 clamp(18px,2vw,24px);
  font-size:1rem;line-height:1.62;color:var(--corpo);
}
/* assinatura da marca: fecha o bloco de texto e prepara o botão */
.hero__assin{
  margin:0 0 clamp(24px,3vw,34px);
  font-family:'Jost',sans-serif;font-weight:400;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.17em;color:var(--ouro);
  hyphens:none;
}

/* entrada em CSS puro (funciona mesmo sem JS) */
@media (prefers-reduced-motion:no-preference){
  .hero__cont>*{animation:sobe .95s var(--curva) both}
  .hero__cont>*:nth-child(1){animation-delay:.06s}
  .hero__cont>*:nth-child(2){animation-delay:.16s}
  .hero__cont>*:nth-child(3){animation-delay:.24s}
  .hero__cont>*:nth-child(4){animation-delay:.32s}
  .hero__cont>*:nth-child(5){animation-delay:.4s}
  .hero__cont>*:nth-child(6){animation-delay:.48s}
  .hero__cont>*:nth-child(7){animation-delay:.58s}
  .hero__fig{animation:entra 1.5s var(--curva) both .1s}
}
@keyframes sobe{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes entra{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ========================================================== DESTAQUES ===== */
.dest{background:var(--v-900);padding-block:clamp(56px,6.8vw,90px) clamp(60px,7.2vw,96px)}
.dest__grid{
  display:grid;gap:clamp(38px,4.4vw,64px);
  grid-template-columns:1.14fr .95fr .91fr;align-items:start;
}
.dest__it{position:relative}
.dest__it:nth-child(2){margin-top:clamp(0px,3.2vw,42px)}
.dest__it:nth-child(3){margin-top:clamp(0px,1.4vw,18px)}
.dest__it .ic--bloco{margin-bottom:20px}
.dest__it h3{margin-bottom:.55rem}
.dest__it p{font-size:.975rem;color:var(--apagado);margin:0;max-width:34ch}
.dest__it h3 .num{color:var(--ouro)}

/* ========================================================== MANIFESTO ===== */
.mani{background:var(--v-950)}
.mani__cont{
  display:grid;grid-template-columns:.92fr 1.08fr;
  column-gap:clamp(40px,5.5vw,96px);row-gap:clamp(30px,3.6vw,46px);
  align-items:start;
}
.mani__lead{
  grid-column:1;grid-row:1/span 2;align-self:start;
  font-family:'Jost',sans-serif;font-weight:300;color:var(--creme);
  font-size:clamp(1.55rem,2.9vw,2.42rem);line-height:1.22;letter-spacing:-.008em;
  max-width:17ch;margin:0;text-wrap:balance;
}
.mani__corpo{grid-column:2;grid-row:1;max-width:54ch;font-size:1.06rem;color:var(--corpo)}
.mani__frase{
  grid-column:2;grid-row:2;max-width:52ch;margin:0;
  font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.62;color:var(--creme);font-weight:300;
}
.mani__frase i{font-style:normal;color:var(--ouro)}
.mani__fecho{
  grid-column:1/-1;grid-row:3;margin:clamp(30px,4vw,56px) 0 0;
  font-family:'Jost',sans-serif;font-weight:300;color:var(--creme);
  font-size:clamp(1.75rem,3.4vw,2.9rem);line-height:1.16;letter-spacing:-.01em;
  text-wrap:balance;
}
.mani__fecho em{font-style:normal;color:var(--ouro)}

/* =========================================================== SERVIÇOS ===== */
.serv{background:var(--v-900)}
.serv__cab{max-width:22ch;margin-bottom:clamp(44px,5vw,68px)}
.serv__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,1.7vw,22px)}

.card{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:var(--v-800);display:flex;flex-direction:column;
  transition:transform .5s var(--curva);
}
.card:hover{transform:translateY(-4px)}
.card__foto{position:relative;overflow:hidden;isolation:isolate;background:var(--v-700)}
.card__foto img{
  width:100%;height:100%;object-fit:cover;transition:transform .8s var(--curva);
  filter:brightness(.9) saturate(.9) contrast(1.02);
}
.card:hover .card__foto img{transform:scale(1.045)}
/* grade de cor da marca: unifica as fotos claras com a paleta escura */
.card__foto::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--v-600);mix-blend-mode:color;opacity:.24;
}
.card__foto::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(11,18,14,.92) 2%,rgba(11,18,14,.4) 44%,rgba(11,18,14,.16));
}
.card__txt{padding:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;flex:1}
.card__txt .ic--bloco{margin-bottom:16px}
.card h3{margin-bottom:.5rem}
.card p:not([class]){font-size:.96rem;color:var(--apagado);margin:0;max-width:46ch}
.tag{
  margin-top:auto;padding-top:20px;
  font-family:'Jost',sans-serif;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.17em;color:var(--ouro);opacity:.78;hyphens:none;
}
/* nos cards horizontais o texto é um grupo centrado: a tag acompanha o texto,
   senão ela é jogada para o pé do card e abre um vão morto */
.card--consulta .tag,.card--intestino .tag{margin-top:0;padding-top:20px}

/* composição do bento: 5 células, 5 conteúdos */
.card--consulta{grid-column:span 7;flex-direction:row;align-items:stretch}
.card--consulta .card__foto{flex:0 0 44%}
.card--consulta .card__txt{justify-content:center}
.card--figado{grid-column:span 5}
.card--figado .card__foto{aspect-ratio:16/10}
.card--estomago{grid-column:span 5}
.card--estomago .card__foto{aspect-ratio:16/10}
.card--intestino{grid-column:span 7;flex-direction:row-reverse;align-items:stretch}
.card--intestino .card__foto{flex:0 0 44%}
.card--intestino .card__txt{justify-content:center}
.card--checkup{
  grid-column:span 12;flex-direction:row-reverse;align-items:stretch;
  background:var(--v-700);
}
.card--checkup .card__foto{flex:0 0 42%;align-self:stretch}
.card--checkup .card__foto img{filter:none}
.card--checkup .card__foto::before{opacity:.14}
.card--checkup .card__foto::after{background:linear-gradient(to left,transparent 46%,rgba(28,49,35,.9))}
.card--checkup .card__txt{
  padding:clamp(32px,4vw,58px) clamp(28px,3.6vw,56px);
  justify-content:center;max-width:none;
}
.card--checkup h3{font-size:clamp(1.42rem,2.4vw,2rem);font-weight:300;max-width:20ch}
.card--checkup p:not([class]){max-width:44ch;color:var(--corpo)}
.card--checkup .card__acao{margin-top:26px}
.card--checkup .tag{margin-top:0;padding-top:0;margin-bottom:14px}

/* ============================================================= OFERTA ===== */
.oferta{position:relative;padding-block:clamp(28px,3.4vw,52px) clamp(46px,5vw,70px);background:var(--v-900)}
.oferta__painel{
  position:relative;overflow:hidden;border-radius:26px;
  max-width:940px;margin-inline:auto;
  padding:clamp(38px,4.6vw,60px) clamp(28px,4.4vw,64px) clamp(36px,4.2vw,56px);
  text-align:center;isolation:isolate;
  background:#0E1A12 url(../img/oferta-plate.webp) 26% 26%/cover no-repeat;
}
/* deixa o brilho dourado atravessar sem comer a legibilidade */
.oferta__luz{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(118deg,rgba(11,18,14,.28),rgba(11,18,14,.58) 46%,rgba(11,18,14,.86)),
    radial-gradient(64% 78% at 50% 16%,rgba(240,224,200,.2),transparent 66%),
    radial-gradient(120% 100% at 50% 52%,transparent 34%,rgba(11,18,14,.5));
}
.oferta__cant{
  position:absolute;z-index:1;width:clamp(54px,6vw,82px);height:auto;
  opacity:.62;pointer-events:none;
}
.oferta__cant--a{top:26px;left:26px}
.oferta__cant--b{bottom:26px;right:26px;transform:rotate(180deg)}
.oferta__cont{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.oferta__marca{height:clamp(76px,7.4vw,104px);width:auto;margin-bottom:clamp(22px,2.6vw,30px)}
.oferta__frase{
  margin:0 0 clamp(26px,3vw,34px);max-width:24ch;
  font-family:'Jost',sans-serif;font-weight:300;color:var(--creme);
  font-size:clamp(1.34rem,2.5vw,2.05rem);line-height:1.24;letter-spacing:-.008em;
  text-wrap:balance;
}
.oferta__frase b{color:var(--ouro);font-weight:300}
.oferta__itens{
  list-style:none;margin:0 0 clamp(28px,3.2vw,38px);padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px clamp(24px,3vw,42px);
}
.oferta__itens li{display:inline-flex;align-items:center;gap:.6em;
  font-size:.94rem;color:var(--corpo);line-height:1.4}
.oferta__itens .ic{width:19px;height:19px;flex:none;color:var(--ouro)}
.oferta__btn{font-size:1.06rem;padding:1.1em 2.1em;
  box-shadow:0 14px 46px rgba(217,194,155,.28)}
.oferta__btn:hover{box-shadow:0 20px 58px rgba(217,194,155,.4)}

/* ------------------------------------------- divisor ornamental de bloco -- */
/* sem padding próprio: o respiro já vem do padding das duas seções vizinhas */
/* o ornamento fecha o bloco de cima e anuncia o de baixo: por isso herda o
   fundo da seção ANTERIOR e puxa a seguinte para o vão ficar no alvo */
.divisor{padding-block:0;margin-bottom:-38px;position:relative;z-index:1;
  display:flex;justify-content:center;background:var(--v-950)}
.divisor--900{background:var(--v-900)}
.divisor img{width:min(340px,52vw);height:auto;opacity:.5}

/* ============================================================== SOBRE ===== */
/* espelho da hero: cenário + recorte à ESQUERDA, conteúdo à direita */
.sobre{
  position:relative;overflow:hidden;isolation:isolate;background:var(--v-850);
  padding-block:clamp(76px,8.6vw,116px);
}
.sobre__bg{
  position:absolute;inset:0;z-index:-3;
  background:url(../img/sobre-bg.webp) center left/cover no-repeat;
}
.sobre__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(266deg,var(--v-850) 3%,rgba(19,30,23,.97) 26%,rgba(19,30,23,.9) 44%,rgba(19,30,23,.6) 66%,rgba(19,30,23,.44) 84%,rgba(19,30,23,.62) 100%),
    radial-gradient(92% 96% at 82% 50%,rgba(19,30,23,.88),transparent 66%);
}
.sobre__fig{
  position:absolute;z-index:-1;margin:0;
  left:clamp(-96px,-3vw,-16px);bottom:0;
  height:min(82%,660px);aspect-ratio:920/1380;
  filter:drop-shadow(26px 16px 44px rgba(0,0,0,.5));
}
.sobre__fig img{height:100%;width:100%;object-fit:contain;object-position:bottom center}
/* casa a luz do recorte com a janela da cena, com máscara própria */
.sobre__fig::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(240,224,200,.34),rgba(240,224,200,.04) 44%,transparent 68%);
  mix-blend-mode:soft-light;
  -webkit-mask:url(../img/dra-sobre.webp) center/100% 100% no-repeat;
  mask:url(../img/dra-sobre.webp) center/100% 100% no-repeat;
}
/* dissolve o pé ACIMA do recorte */
.sobre::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:22%;z-index:0;
  background:linear-gradient(to top,var(--v-850) 10%,rgba(19,30,23,.72) 46%,transparent);
  pointer-events:none;
}
.sobre .wrap{position:relative;z-index:1}
.sobre__grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(38px,5vw,72px);align-items:start}
.sobre__txt h2{margin-bottom:clamp(22px,2.6vw,32px)}
.sobre__txt p:not([class]){max-width:58ch}
.cit{
  position:relative;overflow:hidden;margin:clamp(28px,3.2vw,40px) 0;
  padding:clamp(30px,3.2vw,42px) clamp(26px,3vw,42px) clamp(28px,3vw,38px);
  border-radius:var(--r);
  background:var(--v-700) url(../img/textura.webp) center/cover no-repeat;
  background-blend-mode:soft-light;
}
.cit::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(19,30,23,.72),rgba(19,30,23,.9));
}
.cit__cant{
  position:absolute;top:14px;right:14px;width:46px;height:auto;
  opacity:.4;transform:rotate(90deg);transform-origin:center;pointer-events:none;
}
.cit__aspas{
  z-index:1;position:absolute;top:-6px;left:16px;
  font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:6rem;line-height:1;color:var(--ouro);opacity:.24;pointer-events:none;
}
.cit p{
  z-index:1;position:relative;margin:0;font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(1.1rem,1.65vw,1.32rem);line-height:1.5;color:var(--creme);
  hanging-punctuation:first allow-end last;max-width:40ch;
}
.assin{margin-top:clamp(30px,3.4vw,42px)}
.assin__nome{
  font-family:'Jost',sans-serif;font-size:1.06rem;font-weight:400;color:var(--creme);
  letter-spacing:.04em;margin:0 0 6px;
}
.assin__esp{font-size:.86rem;color:var(--ouro);margin:0 0 12px;letter-spacing:.06em;
  font-family:'Jost',sans-serif;text-transform:uppercase}
.reg{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none}
.reg li{font-size:.875rem;color:var(--corpo);letter-spacing:.05em}
.reg li b{color:var(--apagado);font-weight:400;margin-right:.35em}

/* ================================================================ FAQ ===== */
.faq{background:var(--v-900)}
.faq__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(34px,4.4vw,72px);align-items:start}
.faq__lista{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(20px,2.1vw,26px) 44px clamp(20px,2.1vw,26px) 0;
  position:relative;font-family:'Jost',sans-serif;font-weight:400;
  font-size:clamp(1.03rem,1.35vw,1.17rem);line-height:1.4;color:var(--creme);
  transition:color .3s var(--curva);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ouro)}
.faq summary .ic{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--ouro);transition:transform .45s var(--curva);
}
.faq details[open] summary .ic{transform:translateY(-50%) rotate(45deg)}
.faq__resp{overflow:hidden}
.faq__resp p{padding:0 44px 26px 0;margin:0;color:var(--apagado);font-size:1rem;max-width:60ch}
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .faq__resp{animation:abre .42s var(--curva)}
}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ========================================================== CTA FINAL ===== */
.fim{position:relative;overflow:hidden;isolation:isolate;background:var(--v-950);
  padding-block:clamp(82px,9.2vw,128px)}
.fim__bg{position:absolute;inset:0;z-index:-2;
  background:url(../img/cta-bg.webp) center right/cover no-repeat}
.fim__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(94deg,var(--v-950) 6%,rgba(11,18,14,.93) 34%,rgba(11,18,14,.6) 62%,rgba(11,18,14,.34) 100%),
    radial-gradient(110% 100% at 8% 50%,rgba(11,18,14,.7),transparent 60%)}
.fim__cont{max-width:min(700px,64%)}
.fim__marca{height:clamp(70px,7vw,96px);width:auto;margin-bottom:clamp(22px,2.8vw,32px)}
.fim h2{margin-bottom:clamp(26px,3vw,36px);max-width:21ch;font-size:clamp(1.8rem,3.2vw,2.8rem)}
.fim__acao{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.fim__apoio{font-size:.98rem;color:var(--corpo);margin:0;max-width:44ch}

/* ============================================================= RODAPÉ ===== */
.pe{background:var(--v-900);padding-block:clamp(48px,5.2vw,68px) clamp(28px,3vw,38px);
  border-top:1px solid var(--linha)}
.pe__topo{display:grid;grid-template-columns:1.05fr 1fr .9fr;gap:clamp(30px,4vw,60px);align-items:start}
.pe__marca{height:46px;width:auto;margin-bottom:20px}
.pe__col h4{font-family:'Jost',sans-serif;font-size:.76rem;font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ouro);margin:0 0 16px}
.pe__col p{font-size:.92rem;color:var(--corpo);margin:0 0 .7em}
.locais{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.locais li{display:grid;grid-template-columns:20px 1fr;gap:11px;font-size:.9rem;line-height:1.5}
.locais .ic{width:18px;height:18px;color:var(--ouro);margin-top:3px}
.locais b{display:block;color:var(--creme);font-weight:500}
.locais span{color:var(--apagado)}
.contatos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.contatos a{display:inline-flex;align-items:center;gap:10px;color:var(--corpo);
  text-decoration:none;font-size:.94rem;transition:color .3s var(--curva)}
.contatos a:hover{color:var(--ouro)}
.contatos .ic{width:19px;height:19px;color:var(--ouro)}
.pe__base{margin-top:clamp(40px,4.4vw,58px);padding-top:26px;border-top:1px solid var(--linha);
  display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:space-between;align-items:flex-end}
.pe__base p{margin:0;font-size:.875rem;color:var(--corpo);line-height:1.65}
.pe__aviso{max-width:62ch}

/* ============================================ BARRA FIXA DE WHATSAPP ====== */
.zap{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:inline-flex;align-items:center;gap:.55em;
  padding:.9em 1.35em;border-radius:999px;
  background:var(--ouro);color:var(--v-950);text-decoration:none;
  font-family:'Jost',sans-serif;font-size:.94rem;letter-spacing:.03em;hyphens:none;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .45s var(--curva),transform .45s var(--curva),visibility .45s,background-color .3s;
}
.zap.is-on{opacity:1;visibility:visible;transform:none}
.zap:hover{background:var(--ouro-claro)}
.zap .ic{width:1.25em;height:1.25em}

/* ============================ desktop de tela BAIXA (notebook 1280x800) === */
/* mesmo princípio do tier mobile: sem isto o CTA da hero cai abaixo da dobra
   em janela com ~673px úteis */
@media (min-width:901px) and (max-height:780px){
  .hero{padding-block:clamp(30px,3.6vw,48px)}
  .hero__marca img{height:clamp(60px,5.4vw,78px)}
  .hero__marca{margin-bottom:clamp(20px,2.4vw,28px)}
  .hero h1{font-size:clamp(1.95rem,3.05vw,2.66rem);margin-bottom:1rem}
  .hero .lead{font-size:1.06rem;line-height:1.45;margin-bottom:.7rem}
  .hero__corpo{font-size:.94rem;line-height:1.55;margin-bottom:16px}
  .hero__assin{font-size:.74rem;margin-bottom:22px}
  .hero__fig{max-height:88%}
}

/* ================================================================= 1080 === */
@media (max-width:1080px){
  .dest__grid{grid-template-columns:1fr 1fr;gap:38px 34px}
  .dest__it:nth-child(2),.dest__it:nth-child(3){margin-top:0}
  .dest__it:nth-child(3){grid-column:span 2;max-width:none}
  .dest__it:nth-child(3) p{max-width:52ch}
  .faq__grid{grid-template-columns:1fr;gap:30px}
  .serv__cab{max-width:26ch}
  .card--consulta,.card--intestino{grid-column:span 12}
  .card--figado,.card--estomago{grid-column:span 6}
  .sobre__grid{grid-template-columns:.68fr 1.32fr;gap:clamp(28px,3.6vw,48px)}
  .pe__topo{grid-template-columns:1fr 1fr;gap:38px}
  .pe__col--marca{grid-column:span 2}
}

/* ================================================================== 900 === */
@media (max-width:900px){
  :root{--pad-b:clamp(66px,10vw,92px)}
  /* HERO vira faixa visual no topo + conteúdo abaixo.
     O conteúdo SOBE para dentro da zona de dissolução da faixa: sem essa
     sobreposição a faixa acaba numa linha reta e lê como corte, não como fade. */
  .hero{display:block;min-height:0;padding-top:calc(var(--faixa) - 52px);padding-bottom:46px}
  .hero{--faixa:clamp(252px,34vh,322px)}
  .hero__bg{
    bottom:auto;height:var(--faixa);
    background-image:url(../img/hero-bg-mob.webp);background-position:center 32%;
    /* dissolução longa: começa cedo e vai até o fim, sem borda perceptível */
    -webkit-mask:linear-gradient(to bottom,#000 22%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.18) 84%,transparent 100%);
    mask:linear-gradient(to bottom,#000 22%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.18) 84%,transparent 100%);
  }
  .hero__scrim{bottom:auto;height:var(--faixa);
    background:linear-gradient(to bottom,rgba(11,18,14,.42),rgba(11,18,14,.16) 40%,rgba(11,18,14,.72) 82%,var(--v-950) 100%)}
  .hero__fig{
    top:0;bottom:auto;right:-13%;left:auto;
    width:auto;max-height:none;
    height:var(--faixa);aspect-ratio:760/900;
    filter:drop-shadow(-14px 10px 26px rgba(0,0,0,.44));
    -webkit-mask:linear-gradient(to bottom,#000 40%,rgba(0,0,0,.4) 68%,transparent 88%);
    mask:linear-gradient(to bottom,#000 40%,rgba(0,0,0,.4) 68%,transparent 88%);
  }
  /* o logotipo entra sobre o pé já escuro da faixa: garante leitura */
  .hero__marca{position:relative}
  .hero__marca::before{
    content:'';position:absolute;left:-8%;right:-24%;top:-80%;bottom:-60%;z-index:-1;
    background:radial-gradient(78% 150% at 32% 52%,rgba(11,18,14,.94),rgba(11,18,14,.6) 58%,transparent 82%);
  }
  .hero__fig::after{display:none}
  .hero__fig--desk{display:none}
  .hero__fig--mob{display:block}
  .hero::after{display:none}
  .hero__cont{max-width:none}
  .hero__marca img{height:43px}
  .hero__marca{margin-bottom:20px}
  .kicker>span{display:block}
  .kicker>.kicker__sep{display:none}
  .hero h1{font-size:clamp(1.82rem,7.4vw,2.5rem);margin-bottom:.9rem}
  .hero .lead{font-size:1.08rem;line-height:1.4;margin-bottom:.7rem;max-width:none}
  .hero__corpo{font-size:.95rem;line-height:1.55;margin-bottom:16px;max-width:none}
  .hero__assin{font-size:.72rem;margin-bottom:22px}
  .hero .btn{width:100%;justify-content:center}

  /* SOBRE vira faixa visual no topo, igual à hero. O texto começa DEPOIS
     da faixa: h2 grande em cima de blazer claro fica ilegível. */
  .sobre{--faixa:clamp(230px,32vh,300px);padding-top:calc(var(--faixa) + 22px);padding-bottom:clamp(58px,8vw,76px)}
  .sobre__bg{
    bottom:auto;height:var(--faixa);
    background-image:url(../img/sobre-bg-mob.webp);background-position:center 40%;
    -webkit-mask:linear-gradient(to bottom,#000 54%,transparent 99%);
    mask:linear-gradient(to bottom,#000 54%,transparent 99%);
  }
  .sobre__scrim{bottom:auto;height:var(--faixa);
    background:linear-gradient(to bottom,rgba(19,30,23,.4),rgba(19,30,23,.18) 44%,var(--v-850) 99%)}
  .sobre__fig{
    top:0;bottom:auto;left:auto;right:2%;
    height:var(--faixa);aspect-ratio:920/1380;
    filter:drop-shadow(14px 10px 26px rgba(0,0,0,.44));
    -webkit-mask:linear-gradient(to bottom,#000 64%,transparent 98%);
    mask:linear-gradient(to bottom,#000 64%,transparent 98%);
  }
  .sobre__fig::after{display:none}
  .sobre::after{display:none}
  .sobre__grid{grid-template-columns:1fr;gap:0}
  .sobre__vazio{display:none}

  .mani__corpo,.mani__frase{margin-left:0;max-width:none}
  .mani__lead{max-width:none}
  .card--consulta,.card--intestino{flex-direction:column}
  .card--consulta .card__foto,.card--intestino .card__foto{flex:none;aspect-ratio:16/9}
  .card--figado,.card--estomago{grid-column:span 12}
  .card--checkup{flex-direction:column;align-items:stretch}
  .card--checkup .card__foto{flex:none;aspect-ratio:16/10}
  .card--checkup .card__foto::after{background:linear-gradient(to top,rgba(22,36,27,.92),transparent 60%)}
  /* o vão mobile já é curto: sem o puxão, senão o ornamento invade a faixa
     visual do bloco seguinte */
  .divisor{margin-bottom:0}
  .divisor img{width:min(240px,58vw)}
  /* o plate cortado em coluna estreita cai na parte mais clara: escurece mais */
  .oferta__luz{background:
    linear-gradient(160deg,rgba(11,18,14,.5),rgba(11,18,14,.76) 46%,rgba(11,18,14,.9)),
    radial-gradient(70% 50% at 50% 14%,rgba(240,224,200,.16),transparent 68%)}
  .oferta__painel{padding-inline:clamp(22px,5.4vw,32px)}
  .oferta__frase{max-width:none;font-size:clamp(1.3rem,6vw,1.72rem)}
  .oferta__itens{flex-direction:column;align-items:flex-start;gap:12px;text-align:left;width:100%}
  .oferta__cant{width:52px}
  .oferta__btn{width:100%;justify-content:center}
  .fim__cont{max-width:none}
  .fim__bg{background-position:center right;opacity:.9}
  .fim__scrim{background:linear-gradient(to bottom,rgba(11,18,14,.9) 8%,rgba(11,18,14,.62) 46%,rgba(11,18,14,.8))}
  .fim h2{max-width:none}
  .fim__acao{width:100%}
  .fim__acao .btn{width:100%;justify-content:center}
  .pe__topo{grid-template-columns:1fr;gap:34px}
  .pe__col--marca{grid-column:auto}
  .zap{left:16px;right:16px;justify-content:center}
}

/* ============================================ tela BAIXA (iPhone SE) ====== */
@media (max-width:900px) and (max-height:720px){
  .hero{--faixa:clamp(214px,30vh,258px);padding-top:calc(var(--faixa) - 46px);padding-bottom:36px}
  /* ⚠️ .hero__marca é um <picture>: a altura vai no img, não no wrapper */
  .hero__marca img{height:38px}
  .hero__marca{margin-bottom:15px}
  .hero h1{font-size:clamp(1.62rem,6.6vw,2rem)}
  .hero .lead{font-size:1rem;line-height:1.36;margin-bottom:.6rem}
  .hero__corpo{font-size:.9rem;line-height:1.5;margin-bottom:13px}
  .hero__assin{font-size:.69rem;margin-bottom:18px}
}

@media (max-width:620px){
  .dest__grid{grid-template-columns:1fr;gap:34px}
  .dest__it:nth-child(3){grid-column:auto}
  .card--figado .card__foto,.card--estomago .card__foto{aspect-ratio:16/9}
  .pe__base{flex-direction:column;align-items:flex-start}
}

/* neutraliza svh na captura de página inteira em headless */
@media (min-height:2200px) and (min-width:981px){.hero{min-height:820px}}

/* marca d'água do manifesto ancorada no vão inferior esquerdo, cortada pela borda */
.mani .tela::after{right:auto;top:auto;left:-15%;bottom:-30%}




/* ==========================================================================
   Enquadramento das fotos dos cards
   As fotos sao verticais (900x1124) e os cards recortam em 16/9 e 16/10.
   Com object-position padrao (centro) o recorte pega a faixa do meio e
   corta o rosto. 15% sobe o recorte e mantem o rosto inteiro com respiro.
   Os dois cards sem pessoa mantem enquadramento proprio.
   ========================================================================== */
.card__foto img{object-position:50% 15%}
.card--estomago .card__foto img{object-position:50% 58%}
.card--checkup .card__foto img{object-position:50% 50%}

/* --------------------------------------------------------------------------
   Fotos dos cards: mais area visivel e menos veu verde
   1. o filtro e a camada de cor da marca escureciam e esverdeavam a foto,
      escondendo o que ela segura na mao. Reduzidos ao minimo.
   2. o degrade inferior ia a 92% de preto e comia a parte de baixo da
      imagem, justamente onde estao as maos e os aparelhos. Suavizado.
   3. no celular o recorte 16/9 numa foto vertical sobrava so o rosto.
      4/3 abre o enquadramento e mostra a cena.
   -------------------------------------------------------------------------- */
.card__foto img{filter:brightness(.98) saturate(.98) contrast(1.01)}
.card__foto::before{opacity:.08}
.card__foto::after{
  background:linear-gradient(to top,rgba(11,18,14,.55) 0%,rgba(11,18,14,.16) 34%,transparent 62%);
}

@media (max-width:900px){
  .card--consulta .card__foto,
  .card--intestino .card__foto,
  .card--figado .card__foto,
  .card--estomago .card__foto,
  .card--checkup .card__foto{aspect-ratio:4/3}
  .card--checkup .card__foto::after{
    background:linear-gradient(to top,rgba(22,36,27,.6),transparent 55%);
  }
}

@media (max-width:620px){
  .card--figado .card__foto,.card--estomago .card__foto{aspect-ratio:4/3}
}