/* Fialho · celular (até 767px) e tablet (768 a 1099px). O desktop fica no style.css. */

/* ===================== TABLET ===================== */
@media (min-width: 768px) and (max-width: 1099px) {
  .nav .aberto { display: none; }
  .nav .menu { gap: 22px; padding: 0 20px; }

  .hero .baixo { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero .sub { font-size: 42px; }
  .hero .meta { text-align: left; }
  .hero .contador { justify-content: flex-start; }

  .intro .topo { grid-template-columns: 1fr; gap: 28px; }
  .intro h2 { font-size: 88px; }
  .intro .lado { max-width: 560px; }
  .intro .fotos { height: 460px; }

  .servicos .topo { flex-direction: column; align-items: flex-start; }
  .servicos .card { width: 300px; }
  .servicos .card .ft { height: 440px; }

  .ritual { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .ritual .painel { grid-column: span 2; }
  .ritual .ph-w { height: 320px; }

  .aval .topo { grid-template-columns: auto 1fr; }
  .aval .topo .pill { grid-column: 1 / -1; justify-self: start; margin: 0; }
  .aval .nota { font-size: 160px; }
  .aval .cards { grid-template-columns: 1fr 1fr; row-gap: 40px; }

  .ender .linha { flex-direction: column; align-items: flex-start; }
  .ender .card { width: 100%; max-width: 480px; }

  .rodape .topo { grid-template-columns: repeat(4, 1fr); row-gap: 56px; }
  .rodape .prom { grid-column: 1 / -1; }
}

/* ===================== CELULAR ===================== */
@media (max-width: 767px) {
  :root { --pad: 16px; }
  html { scroll-padding-top: 72px; }

  /* nav em pílula: logo, WhatsApp e Menu */
  .nav { top: 12px; }
  .nav.mini { top: 8px; }
  .nav .menu, .nav .aberto { display: none; }
  .nav .logo span { font-size: 20px; }
  .nav .zap { padding: 0 14px; }
  .nav .zap span { display: none; }
  .nav .zap::after { content: 'Agendar'; }
  .nav .menu-bt { display: inline-flex; gap: 10px; }
  .nav .menu-bt i { width: 14px; height: 8px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform .3s var(--ease); }
  .nav.aberto .menu-bt i { transform: scaleY(.25); }
  .nav.mini .nav-in { max-width: none; }
  .menu-painel { display: flex; flex-direction: column; pointer-events: auto; margin-top: 8px; padding: 10px 22px 22px; border-radius: 24px; background: rgba(16,14,15,.92); border: 1px solid var(--line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top center; visibility: hidden; transition: opacity .25s var(--ease), transform .3s var(--ease), visibility 0s .3s; }
  .nav.aberto .menu-painel { opacity: 1; transform: none; visibility: visible; transition: opacity .25s var(--ease), transform .3s var(--ease); }
  .menu-painel > a:not(.pill) { font-family: var(--f-titulo); font-size: 28px; font-weight: 700; letter-spacing: -.04em; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .menu-painel .pill { margin-top: 18px; }

  /* hero */
  .hero { min-height: 600px; }
  .hero .fotos div { background-position: center 30%; }
  .hero .veu { background: linear-gradient(180deg, rgba(16,14,15,.55) 0%, rgba(16,14,15,0) 16%, rgba(16,14,15,0) 36%, rgba(16,14,15,.7) 62%, rgba(16,14,15,.94) 100%); }
  .hero .conteudo { padding-bottom: 24px; }
  .hero .titulo { margin-bottom: 18px; }
  .hero .baixo { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero .sub { font-size: 30px; margin-bottom: 20px; text-wrap: balance; }
  .hero .bts { flex-direction: column; }
  .hero .bts .pill { width: 100%; }
  .hero .meta { text-align: left; font-size: 12.5px; }
  .hero .contador { justify-content: flex-start; margin-bottom: 10px; }

  /* intro */
  .intro { padding-top: 88px; }
  .intro .topo { grid-template-columns: 1fr; gap: 24px; }
  .intro h2 { font-size: 50px; }
  .intro .chips { margin: 32px calc(-1 * var(--pad)) 0; padding: 0 var(--pad); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .intro .chips::-webkit-scrollbar { display: none; }
  .intro .fotos { margin-top: 32px; height: auto; grid-template-columns: 1fr; }
  .intro .fotos figure { height: 340px; }

  /* serviços: arrastar, um card por vez */
  .servicos { padding: 88px 0; }
  .servicos .topo { flex-direction: column; align-items: flex-start; gap: 20px; }
  .servicos h2 { font-size: 40px; }
  .servicos .topo .dir .contorno { display: none; }
  .servicos .faixa { margin-top: 32px; }
  .servicos .trilho { overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad); scroll-padding: 0 var(--pad); scrollbar-width: none; transform: none !important; }
  .servicos .trilho::-webkit-scrollbar { display: none; }
  .servicos .card { width: 82vw; scroll-snap-align: start; }
  .servicos .card .ft { height: 400px; }
  .servicos .card .sub-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: 2px; }

  /* como marcar */
  .ritual { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; padding: 6px; gap: 6px; }
  .ritual .painel { grid-column: span 2; padding: 40px 24px; }
  .ritual .ph-w { height: 200px; }
  .painel h3 { font-size: 32px; }
  .painel.escala { padding: 40px 24px; }
  .painel.escala h3 { font-size: 28px; }
  .painel .barra i { font-size: 9px; }

  /* avaliações: arrastar */
  .aval { padding: 88px 0; }
  .aval .topo { grid-template-columns: auto 1fr; gap: 8px 20px; }
  .aval .nota { font-size: 104px; }
  .aval .info { padding-bottom: 8px; }
  .aval .info b { font-size: 22px; }
  .aval .info > span { font-size: 13px; }
  .aval .topo .pill { grid-column: 1 / -1; justify-self: start; margin: 16px 0 0; min-height: 44px; }
  .aval .cards { display: flex; gap: 8px; margin: 32px calc(-1 * var(--pad)) 0; padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .aval .cards::-webkit-scrollbar { display: none; }
  .dep { width: 84vw; flex: none; scroll-snap-align: start; }
  .dep .ft { height: 260px; }

  /* endereço */
  .ender { min-height: 0; }
  .ender .caixa { padding-top: 96px; padding-bottom: 24px; gap: 40px; }
  .ender .linha { flex-direction: column; align-items: stretch; gap: 32px; }
  .ender .esq .sub { font-size: 30px; text-wrap: balance; }
  .ender .esq .bts { flex-direction: column; }
  .ender .esq .bts .pill { width: 100%; }
  .ender .card { width: 100%; padding: 22px 20px; }
  .ender .card li { min-height: 44px; align-items: center; }

  /* rodapé */
  .rodape { padding-top: 88px; }
  .rodape .topo { grid-template-columns: 1fr 1fr; gap: 40px 20px; }
  .rodape .prom { grid-column: 1 / -1; }
  .rodape .prom .selo { width: 72px; height: 72px; }
  .rodape .prom li { font-size: 28px; }
  .rodape .prom .pill { width: 100%; }
  .rodape .col a { padding: 8px 0; line-height: 1.5; }
  .rodape .legal { margin-top: 56px; flex-direction: column; }
  .rodape .wm { margin-top: 32px; }

  /* WhatsApp flutuante depois do hero */
  .zap-flut { display: grid; place-items: center; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--acc); color: var(--acc-fg); box-shadow: 0 8px 24px rgba(0,0,0,.45); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease); }
  .zap-flut.on { opacity: 1; transform: none; pointer-events: auto; }
  .zap-flut svg { width: 28px; height: 28px; }
  .zap-flut:active { transform: scale(.94); }
}

@media (pointer: coarse) {
  .pill { min-height: 44px; }
}