/* Beauty Home · tablet (768 a 1099px) e celular (até 767px)
   Estrutura própria pro dedo; o desktop fica no style.css. */

/* ================= tablet + celular (até 1099px) ================= */
@media (max-width: 1099px) {
  :root { --gut: 40px; }
  .ctn { width: 100%; min-width: 0; padding: 0 var(--gut); }
  .sec-t { font-size: 64px; }

  /* nav: logo, botão e Menu */
  .nav { padding: 12px 16px 0; }
  .nav-bar, .nav.mini .nav-bar { max-width: 100%; height: 64px; border-radius: 999px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(42,22,32,.08); box-shadow: 0 8px 24px rgba(42,22,32,.08); padding: 0 8px 0 22px; }
  .nav.mini { padding-top: 12px; }
  .nav-logo, .nav.mini .nav-logo { font-size: 26px; margin-right: 0; }
  .nav-links, .nav-bar .ico-btn { display: none; }
  .nav-bar .pill, .nav.mini .nav-bar .pill { height: 48px; padding: 0 20px; font-size: 16px; margin-right: 8px; }
  .nav-menu { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 999px; background: var(--noite); color: #fff; font-weight: 600; font-size: 16px; }
  .nav-menu i { position: relative; width: 16px; height: 10px; }
  .nav-menu i::before, .nav-menu i::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
  .nav-menu i::before { top: 0; } .nav-menu i::after { bottom: 0; }
  .nav.aberto .nav-menu i::before { transform: translateY(4px) rotate(45deg); }
  .nav.aberto .nav-menu i::after { transform: translateY(-4px) rotate(-45deg); }
  .menu-painel { display: flex; flex-direction: column; pointer-events: none; position: absolute; top: 84px; left: 16px; right: 16px; background: #fff; border-radius: 28px; padding: 12px 24px 24px; box-shadow: 0 24px 60px rgba(42,22,32,.18); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center; transition: opacity .25s var(--ease), transform .35s var(--ease); color: var(--noite); }
  .nav.aberto .menu-painel { opacity: 1; transform: none; pointer-events: auto; }
  .menu-painel > a:not(.pill) { font-family: var(--f-titulo); font-stretch: 62%; font-weight: 800; font-size: 34px; line-height: 1; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .menu-painel .pill { margin-top: 20px; justify-content: center; }
  .nav.escuro .nav-bar { background: rgba(42,22,32,.78); color: #fff; border-color: rgba(255,255,255,.12); }
  .nav.escuro .nav-menu { background: #fff; color: var(--noite); }

  /* hero: texto em cima, celular embaixo */
  .hero { height: auto; padding-top: 120px; }
  .hero-stage { position: static; transform: none; width: auto; height: auto; display: flex; flex-direction: column; }
  .hero-tt { position: static; order: 1; width: auto; padding: 0 var(--gut); font-size: 104px; }
  .hero-tt .h-l3 { padding-left: .9em; }
  .hero-side { position: static; order: 2; width: auto; max-width: 560px; padding: 32px var(--gut) 0; }
  .hero-side p { font-size: 22px; margin-bottom: 24px; }
  .hero-side .row { flex-wrap: wrap; }
  .hero-img { position: relative; order: 3; left: auto; top: auto; width: 880px; height: 880px; flex: none; margin: 8px 0 -380px calc(50% - 334px); }

  /* serviços */
  .svc .top { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
  .svc .top > * { max-width: 100%; }
  .cards4 { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }

  /* abas: lista vira trilho de pílulas */
  .ab-row { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .ab-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scroll-snap-type: x proximity; }
  .ab-list::-webkit-scrollbar { display: none; }
  .ab-list button { width: auto; flex: none; padding: 0 18px; min-height: 46px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 16px; position: relative; overflow: hidden; scroll-snap-align: start; }
  .ab-list button i { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; border-radius: 0; background: transparent; }
  .ab-list button i::after { transform: scaleX(0); transform-origin: left; background: var(--magenta); }
  .ab-list button.on { background: var(--noite); color: #fff; border-color: var(--noite); }
  .ab-card { height: 460px; }
  .ab-txt { min-height: 0; display: grid; }
  .ab-txt > div { position: relative; inset: auto; grid-area: 1 / 1; }
  .ab-txt .tt { font-size: 48px; margin-bottom: 16px; }

  /* passos */
  .p3 { grid-template-columns: 1fr; gap: 64px; margin-top: 48px; max-width: 520px; }
  .ilu { height: auto; margin-bottom: 28px; }

  /* galeria */
  .gal .hd { padding: 0 var(--gut); }

  /* avaliações */
  .ad .ctn { grid-template-columns: 1fr; gap: 48px; }
  .ad-foto { height: 520px; max-width: 560px; width: 100%; }

  /* sobre */
  .sobre .ctn { grid-template-columns: 1fr; gap: 56px; }
  .sb-fotos { height: 560px; max-width: 560px; width: 100%; }

  /* footer */
  .ft { padding: 96px var(--gut) 0; }
  .ft-topo { grid-template-columns: 1fr; gap: 40px; margin-bottom: 64px; padding-bottom: 64px; }
  .ft-fachada { height: 340px; }
  .ft-cols { grid-template-columns: 1.3fr 1fr 1fr; gap: 40px 32px; }
  .wa-box > span:not(.ar) { white-space: nowrap; }
  .ft-bot { height: auto; padding: 20px 0 28px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .ft-bot nav { flex-wrap: wrap; gap: 20px; }
}

/* toque: área mínima de 44px */
@media (pointer: coarse) {
  .ft li a, .ft-bot nav a { display: inline-block; padding: 11px 0; }
  .ft-bot nav { row-gap: 0; }
  .ft li { margin-bottom: 2px; }
  .rev-nav button { width: 48px; height: 48px; }
}

/* ================= celular (até 767px) ================= */
@media (max-width: 767px) {
  :root { --gut: 20px; --r: 24px; }
  body { font-size: 17px; }
  .sec-t { font-size: 46px; }
  .lead { font-size: 18px; }
  .svc, .abas, .passos, .gal, .ad, .faq, .sobre { padding: 88px 0; }

  .nav { padding: 10px 12px 0; }
  .nav.mini { padding-top: 10px; }
  .nav-bar, .nav.mini .nav-bar { height: 60px; padding: 0 6px 0 20px; }
  .nav-logo, .nav.mini .nav-logo { font-size: 24px; }
  .nav-bar .nav-cta { display: none; }
  .nav-menu { height: 46px; }
  .menu-painel { top: 78px; left: 12px; right: 12px; }

  /* WhatsApp flutuante depois do hero */
  .wa-float { display: inline-flex; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55; align-items: center; gap: 8px; height: 56px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--magenta); color: #fff; font-weight: 600; font-size: 17px; box-shadow: 0 12px 30px rgba(138,26,77,.35); opacity: 0; transform: translateY(16px) scale(.94); pointer-events: none; transition: opacity .3s var(--ease), transform .4s var(--ease); }
  .wa-float svg { width: 24px; height: 24px; }
  .wa-float.claro { background: #fff; color: var(--magenta); box-shadow: 0 12px 30px rgba(42,22,32,.3); }
  .wa-float.on { opacity: 1; transform: none; pointer-events: auto; }
  .wa-float:active { transform: scale(.96); }

  /* hero */
  .hero { padding-top: 104px; }
  .hero-tt { font-size: 21vw; line-height: .9; }
  .hero-side { padding-top: 24px; }
  .rate { font-size: 16px; margin-bottom: 14px; }
  .hero-side p { font-size: 19px; line-height: 1.45; }
  .hero-side .pill { height: 54px; }
  .hero-img { width: 820px; height: 820px; margin: 0 0 -290px calc(50% - 311px); }

  /* serviços: carrossel de arrastar, um card e a beirada do próximo */
  .cards4 { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut) 4px; scroll-padding: 0 var(--gut); }
  .cards4::-webkit-scrollbar { display: none; }
  .c4 { flex: 0 0 78%; scroll-snap-align: start; }
  .c4 .ph { margin-bottom: 16px; }

  /* abas */
  .ab-card { height: 380px; border-radius: 28px; }
  .ab-txt .tt { font-size: 40px; }
  .ab-txt p { font-size: 17px; }

  /* passos */
  .p3 { gap: 56px; }
  .p3 .h3 { font-size: 30px; }
  .p3 p { font-size: 17px; }
  .ui-row { padding: 0 18px; font-size: 15px; }
  .stk .ui { padding: 0 16px; font-size: 15px; gap: 12px; }
  .stk .ui .tt { font-size: 26px; }

  /* galeria */
  .gal .hd { margin-bottom: 36px; }
  .gal .hd .tt { margin-bottom: 22px; }
  .mq + .mq { margin-top: 14px; }
  .mq-t { gap: 14px; padding-left: 14px; animation-duration: 55s; }
  .gc { width: 280px; height: 200px; border-radius: 22px; }
  .gc .tag { top: 12px; left: 12px; font-size: 13px; padding: 5px 11px; }
  .gc .inf { left: 10px; right: 10px; bottom: 10px; padding: 9px 12px; border-radius: 14px; gap: 10px; }
  .gc .av { width: 32px; height: 32px; font-size: 12px; }
  .gc .inf b { font-size: 15px; }
  .gc .inf small { font-size: 13px; }

  /* avaliações */
  .ad-foto { height: 400px; border-radius: 28px; }
  .rev-card { padding: 24px 20px 20px; }
  .rev-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rev-body q { font-size: 18px; }
  .rev-nav { flex-wrap: wrap; }
  .meta { gap: 8px; margin-bottom: 28px; }
  .meta .chip { height: 32px; font-size: 14px; }

  /* sobre */
  .sobre .tt { font-size: 50px; margin-bottom: 22px; }
  .sobre p { font-size: 18px; margin-bottom: 40px; }
  .nums { gap: 28px 20px; }
  .nums b { font-size: 64px; }
  .nums span { font-size: 15px; }
  .sb-fotos { height: 440px; }
  .sb2 { border-width: 6px; }

  /* faq */
  .faq .lead { margin: 16px 0 32px; }
  .acc button { font-size: 18px; padding: 22px 0; gap: 16px; }
  .acc .ans p { font-size: 17px; }

  /* footer */
  .ft { padding: 88px var(--gut) 0; }
  .ft-chamada .tt { font-size: 46px; }
  .ft-chamada p { font-size: 18px; }
  .ft-chamada .row .pill { flex: 1 1 100%; justify-content: center; }
  .ft-fachada { height: 220px; border-radius: 22px; }
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .ft-cols > div:first-child { grid-column: 1 / -1; }
  .ft h4 { font-size: 22px; margin-bottom: 14px; }
  .giant { margin-top: 40px; }
  .ft-bot { padding-bottom: 96px; }
}