/* ═══════════════════════════════════════════════════════════
   PAOLA VIVIAM — Pente-fino responsivo (carregar por ÚLTIMO)
   ═══════════════════════════════════════════════════════════ */

/* ───────── 0. MARCA EM CREME (rodapé e menu) ─────────
   antes o PNG escuro virava branco puro via filtro e destoava
   do texto creme ao lado. Agora usa o arquivo já na cor certa. */
.foot-logo img,.mh-logo img{filter:none;opacity:1}

/* ───────── 1. ALTURA DA BARRA COMO VARIÁVEL ─────────
   antes: 88px fixo em todo lugar — no celular a barra tem 72px
   e sobrava um vão morto no topo de cada página. */
:root{--bar-h:88px}
@media(max-width:680px){:root{--bar-h:72px}}
html{scroll-padding-top:calc(var(--bar-h) + 12px)}
.bar-offset{padding-top:var(--bar-h)}
.page-intro{padding-top:calc(var(--bar-h) + clamp(40px,7.5vh,104px))}
.hero{padding-top:calc(var(--bar-h) + clamp(28px,6vh,84px))}

/* ───────── 2. BOTÃO DO WHATSAPP ─────────
   o glifo agora é o oficial (centrado no quadro 24×24) e o anel de
   progresso tem trilho contínuo, para nunca parecer um risco solto. */
.whats svg{width:26px;height:26px}
.whats .w-ring .trk{stroke:rgba(255,255,255,.34);stroke-width:2}
.whats .w-ring .bar{stroke-width:2.5}
/* área segura (barra de gestos do iPhone) */
.whats{
  right:max(18px,env(safe-area-inset-right,0px));
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
}
@media(min-width:681px){.whats{right:max(24px,env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px))}}

/* ───────── 3. ALVOS DE TOQUE (mínimo 44px) ───────── */
@media(max-width:920px){
  .menu-btn{min-height:44px;min-width:44px;justify-content:center;padding:0;gap:11px}
  .bar-cta{min-height:44px;min-width:44px;padding:0 15px;justify-content:center}
  .bar-cta svg{width:17px;height:17px}
}
@media(max-width:680px){
  .btn{min-height:48px}
  .btn-lg{min-height:52px;padding:16px 26px}
  .fsoc,.menu-socials a{width:44px;height:44px}
  .quiz-opt{min-height:52px}
  .fq{padding-block:22px;min-height:56px}
  .site-bar-inner{gap:14px}
  .site-logo img{height:42px}
  .site-bar.scrolled .site-logo img{height:36px}
}

/* ───────── 4. BOTÕES DE LARGURA TOTAL NO CELULAR ───────── */
@media(max-width:560px){
  .hero-actions,.contact-actions,.quiz-res .acts{flex-direction:column;align-items:stretch;gap:12px}
  .hero-actions .btn,.contact-actions .btn,.quiz-res .acts .btn,.cta-inner > .btn{width:100%}
  .prod .foot{flex-direction:column;align-items:flex-start;gap:14px}
  .prod .foot .btn{width:100%}
}

/* ───────── 5. BLOCO VERDE DIVIDIDO (Especialidades) ─────────
   mais respiro para o texto e um título que não quebra em escada. */
@media(min-width:901px){
  .philo.split .split-media{width:46%}
  .philo.split .wrap{padding-right:calc(47.5% + var(--gutter))}
  .philo.split .sec-head .title{font-size:clamp(30px,3.5vw,50px);max-width:15ch}
  .philo.split .sec-head .lead{max-width:46ch}
}
@media(max-width:900px){
  .philo.split .split-media{height:clamp(260px,44vh,400px)}
}
/* a foto agora é a original, enquadrada limpa como no tríptico da home */
.philo.split .split-media img{object-position:center center}
.philo.split .split-media::after{background:linear-gradient(90deg,var(--green) 0,rgba(14,68,61,.72) 20%,rgba(14,68,61,.18) 52%,rgba(14,68,61,.06) 100%)}
@media(max-width:900px){.philo.split .split-media::after{background:linear-gradient(0deg,var(--green),rgba(14,68,61,.14) 56%,rgba(14,68,61,.06))}}
/* depois de um bloco com foto sangrada o arco vira uma faixa verde solta
   por cima da foto — corte reto fica limpo. */
.split + section.arc::before{display:none}
.split + section.arc{padding-top:clamp(72px,11vh,140px)}

/* ───────── BLOCO DO APP (Atendimento) ─────────
   texto maior ao lado do celular, marcador alinhado à primeira linha. */
@media(min-width:1041px){
  .how-app{align-items:center;grid-template-columns:1.18fr .82fr}
}
.how-app .txt{display:flex;flex-direction:column;justify-content:center}
.how-app .txt h3{font-size:clamp(26px,2.7vw,40px);margin-bottom:18px}
.how-app .txt p{font-size:clamp(16.5px,1.35vw,19px);line-height:1.68;max-width:540px}
.app-feats{grid-template-columns:1fr 1fr;gap:15px 30px;max-width:580px;align-content:start;margin-top:30px}
.app-feats li{align-items:flex-start;line-height:1.5;font-size:clamp(15px,1.15vw,16.5px)}
.app-feats .dot{margin-top:.6em;width:7px;height:7px}
@media(max-width:560px){.app-feats{gap:12px}}

.app-lbl2{margin-top:14px}
.app-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.astat{background:#fff;border:1px solid var(--hairline);border-radius:11px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.astat b{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--green);line-height:1}
.astat span{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-l)}
.app-track{height:6px;border-radius:6px;background:rgba(14,68,61,.12);margin-top:11px;overflow:hidden}
.app-track i{display:block;height:100%;width:78%;border-radius:6px;background:var(--green)}
.app-body{display:flex;flex-direction:column;padding:13px 12px 10px}
.meal{padding:9px 11px;margin-bottom:7px}
.app-tabs{padding:10px 14px 14px}
.app-note{margin-top:auto;padding-top:11px;font-size:9.5px;font-weight:600;letter-spacing:.05em;color:var(--muted-l)}

/* celular do Atendimento — sem a foto de fundo, o bloco respira sozinho */
.how-app .shot{padding-block:clamp(8px,2vw,20px)}
.how-app .phone{width:min(300px,96%)}
@media(max-width:1040px){.how-app .phone{width:min(300px,64%)}}
@media(max-width:680px){.how-app .phone{width:min(280px,78%)}}

/* ───────── 6. QUEBRAS DE TEXTO ───────── */
h1,h2,h3,p,li,blockquote,.quiz-q{overflow-wrap:break-word}
.hero h1,.page-intro h1,.sec-head .title,.cta-inner h2,.contact h2{text-wrap:balance}
p,.lead,.hero-sub,.tcard .quote,.spec p,.pcard p{text-wrap:pretty}

/* ───────── 7. ÍNDICE LATERAL — só quando há margem de sobra ───────── */
@media(max-width:1320px){.dots{display:none}}

/* ───────── 8. MENU LATERAL EM TELAS BAIXAS ───────── */
@media(max-height:720px){
  .m-link{font-size:clamp(21px,3.6vw,29px);padding-block:11px}
  .menu-head{margin-bottom:22px}
  .menu-foot{padding-top:26px}
  .menu-meta{margin-top:16px}
  .menu-socials{margin-top:14px}
}

/* ───────── 9. AJUSTES FINOS DE CELULAR ───────── */
@media(max-width:680px){
  .hero-byline{flex-wrap:wrap;gap:8px 12px;margin-top:34px;padding-top:22px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:6px}
  .shop-soon{flex-direction:column;text-align:left;align-items:flex-start;gap:10px}
  .cinfo{padding:18px 18px}
  .g-rating{padding:9px 14px 9px 12px}
  .step{gap:16px}
  .step .num{width:38px;height:38px;font-size:14px}
  .quiz-shell{border-radius:20px}
  .tcard{--rot:0deg;--off:0px}
}
@media(max-width:400px){
  .m-link .idx{width:22px;font-size:11px}
  .lphoto .cap{padding:12px 14px}
}

/* ───────── 10. SEM HOVER (toque): estados de repouso legíveis ───────── */
@media(hover:none){
  .show-card:hover,.prod:hover,.tcard:hover,.ccard:hover,.spec:hover{transform:none;box-shadow:inherit}
  .show-card:hover img,.prod:hover .vis img,.lphoto:hover img,.dish-strip figure:hover img{transform:scale(1.02)}
  /* o anel de progresso recorta mal no Safari do iPhone — só no desktop */
  .whats .w-ring{display:none}
}

/* ═══════════ 11. REVISÃO DE CELULAR ═══════════ */
@media(max-width:680px){
  /* marcas-d'água: na tela pequena só aparece um pedaço do sol, que lê
     como um borrão solto. Fora do celular, o fundo fica limpo. */
  main .wm{display:none}

  /* logo do topo com mais presença */
  .site-logo img{height:46px}
  .site-bar.scrolled .site-logo img{height:39px}

  /* respiro entre seções: 144px de vão somados era demais no celular */
  section{padding-block:clamp(54px,7.5vh,96px)}
  .about-aside{padding-bottom:0}
  .about-aside blockquote{padding-bottom:44px}
  .about-aside .sig-img{bottom:2px}

  /* selo do hero deixa de cobrir a foto e passa a ficar abaixo dela */
  .hero-photo .badge{
    position:static;max-width:none;margin-top:14px;
    box-shadow:0 10px 26px -18px rgba(43,42,41,.4);
  }
  .hero{padding-bottom:clamp(40px,6vh,72px)}
  .hero-photo::before{display:none}
}