/* Celular (até 767px): cada section com estrutura própria, não só encolhida. Análise aprovada pelo Alan em 29/10.
   Peças que só existem no celular (menu, WhatsApp flutuante, seletor dos serviços...) ficam escondidas no desktop. */
.so-mob, .nav__menu, .menu, .zap, .serv__seg, .reviews__dots, .eq__conta { display: none; }

@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .so-desk { display: none; }
  .so-mob { display: inline; }
  html.sem-rolar { overflow: hidden; }

  /* base: menos respiro, títulos no tamanho da tela, nada com altura de desktop */
  .serv, .sobre, .espaco, .dia, .aval, .equipe, .faq { min-height: 0; padding-top: 72px; padding-bottom: 72px; }
  .serv__title, .sobre__title, .espaco__title, .dia__title, .equipe__title, .faq__title, .t-h2 { font-size: clamp(36px, 10.6vw, 46px); }
  .row-cta { flex-wrap: wrap; justify-content: flex-start; }
  .btn { padding: 14px 22px; }

  /* ───── Nav: pílula desde o topo, logo + botão Menu ───── */
  .nav, .nav.is-compacto {
    grid-template-columns: 1fr auto; gap: 12px; translate: -50% 10px; width: calc(100% - 20px);
    padding: 6px 6px 6px 14px; border-radius: var(--radius-full);
    background: rgba(29, 10, 4, .55); border-color: rgba(255, 246, 228, .14);
    -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 10px 30px -14px rgba(29, 10, 4, .5);
  }
  .nav.is-claro { color: var(--text-primary); background: rgba(255, 246, 228, .82); border-color: rgba(58, 26, 16, .12); box-shadow: 0 10px 30px -16px rgba(58, 26, 16, .35); }
  .nav.menu-aberto { color: var(--text-primary); background: var(--cream-100); border-color: rgba(58, 26, 16, .12); box-shadow: none; }
  .nav__links, .nav > .btn, .nav__shade { display: none; }
  .nav__logo { gap: 8px; font-size: 20px; }
  .nav__logo img { width: 44px; height: 28px; }
  .nav.is-compacto .nav__logo { scale: 1; }
  .nav__menu { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border: 0; border-radius: var(--radius-full); background: var(--yellow-400); color: var(--text-primary);
    font: 800 15px/1 var(--font-body); cursor: pointer; justify-self: end; box-shadow: 0 0 0 1.5px var(--border-default); transition: scale 160ms var(--ease-out); }
  .nav__menu:active { scale: .96; }
  .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: translate 280ms var(--ease-out), rotate 280ms var(--ease-out); }
  .nav__menu i::before { top: 0; } .nav__menu i::after { bottom: 0; }
  .nav__menu[aria-expanded="true"] i::before { translate: 0 4px; rotate: 45deg; }
  .nav__menu[aria-expanded="true"] i::after { translate: 0 -4px; rotate: -45deg; }

  /* tela do menu */
  .menu { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; position: fixed; inset: 0; z-index: 1999; overflow-y: auto;
    padding: 100px 20px calc(28px + env(safe-area-inset-bottom)); background: var(--cream-100);
    opacity: 0; translate: 0 -10px; transition: opacity 260ms ease, translate 320ms var(--ease-out); }
  .menu[hidden] { display: none; }
  .menu.on { opacity: 1; translate: 0 0; }
  .menu__links a { display: block; padding: 5px 0; font: 400 36px/1.12 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary);
    opacity: 0; translate: 0 12px; transition: opacity 300ms ease, translate 450ms var(--ease-out); }
  .menu.on .menu__links a { opacity: 1; translate: 0 0; }
  .menu__links a:nth-child(2) { transition-delay: 30ms; } .menu__links a:nth-child(3) { transition-delay: 60ms; } .menu__links a:nth-child(4) { transition-delay: 90ms; }
  .menu__links a:nth-child(5) { transition-delay: 120ms; } .menu__links a:nth-child(6) { transition-delay: 150ms; } .menu__links a:nth-child(7) { transition-delay: 180ms; } .menu__links a:nth-child(8) { transition-delay: 210ms; }
  .menu__links a:active { color: var(--orange-400); }
  .menu__pe { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .menu__pe .status { align-self: flex-start; }
  .menu__pe .btn img { width: 23px; height: 23px; }

  /* WhatsApp flutuante */
  .zap { display: grid; place-items: center; position: fixed; z-index: 1500; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%;
    background: var(--green-600); box-shadow: 0 0 0 1.5px var(--border-default), 0 5px 0 0 var(--border-default);
    opacity: 0; scale: .8; pointer-events: none; transition: opacity 220ms ease, scale 320ms var(--ease-out), translate 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
  .zap.on { opacity: 1; scale: 1; pointer-events: auto; }
  .zap:active { translate: 0 5px; box-shadow: 0 0 0 1.5px var(--border-default); }

  /* ───── 01 · Hero: foto em cima, texto embaixo no marrom ───── */
  .hero { --foto: clamp(360px, 56svh, 540px); height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; }
  .hero__bg { position: relative; inset: auto; flex: none; height: var(--foto); object-position: 92% 30%; transform-origin: 80% 100%; } /* zoom de entrada preso na borda de baixo: a foto nunca passa do gradiente */
  /* só a borda de baixo da foto se funde no marrom (nada de sombra em cima da moça) */
  .hero::before { inset: auto 0 auto 0; top: 0; height: var(--foto); background: linear-gradient(180deg, rgba(58, 26, 16, 0) 70%, var(--bg-dark) 100%); }
  .hero__content { position: relative; left: auto; top: auto; margin-top: -52px; padding: 0 20px 48px; }
  .hero__title { margin: 14px 0 16px; font-size: clamp(44px, 13.4vw, 58px); }
  .hero__sub { margin-bottom: 20px; font-size: 16.5px; }
  .hero .btn--whatsapp { align-self: stretch; }
  .hero__proof { margin-top: 16px; }
  /* celular: sem etiquetas soltas e o bloco de texto todo centralizado */
  .hero__sticker { display: none; }
  .hero__content { align-items: center; text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; text-wrap: balance; }

  /* ───── 02 · Serviços: seletor + um serviço por vez ───── */
  .serv__seg { display: grid; grid-template-columns: 1fr 1fr; position: relative; max-width: 340px; margin: 26px auto 0; padding: 5px; border-radius: var(--radius-full); background: var(--bg-card); box-shadow: 0 0 0 2px var(--border-default); }
  .serv__seg button { position: relative; z-index: 1; height: 44px; border: 0; background: none; cursor: pointer; font: 800 15px/1 var(--font-body); color: var(--text-secondary); transition: color 250ms ease; }
  .serv__seg button[aria-selected="true"] { color: var(--text-primary); }
  .serv__seg i { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc(50% - 5px); border-radius: var(--radius-full); background: var(--yellow-400); box-shadow: 0 0 0 1.5px var(--border-default);
    translate: calc(var(--i, 0) * 100%) 0; transition: translate 380ms var(--ease-out); }
  .serv__grid { display: flex; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .serv__grid::-webkit-scrollbar { display: none; }
  /* card com 86% da largura: a beirada do próximo aparece e mostra que tem mais pro lado */
  .serv__side { flex: 0 0 86%; padding: 6px 6px 14px; scroll-snap-align: center; scroll-snap-stop: always; }
  .serv__name, .serv__mid { display: none; }
  .serv__photo { width: 100%; height: clamp(260px, 80vw, 340px); margin-top: 16px; }
  .serv__text { margin-top: 18px; font-size: 16px; }
  .serv__more { flex-wrap: wrap; gap: 10px; margin-top: 26px; }
  .serv__also { width: 100%; margin: 0; }
  .chip { height: 52px; padding: 0 16px 0 5px; gap: 8px; font-size: 15px; }
  .chip img { width: 42px; height: 42px; }

  /* ───── 03 · Sobre: título, baralho de fotos pra arrastar, depois o texto ───── */
  .sobre { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .sobre__txt { display: contents; }
  .sobre .t-eyebrow { order: 1; }
  .sobre__title { order: 2; }
  .sobre__stack-wrap { order: 3; margin-top: 40px; }
  .sobre__lead { order: 4; margin-top: 36px; font-size: 16.5px; }
  .quote { order: 5; width: auto; margin-top: 28px; padding: 54px 20px 20px; }
  .quote blockquote { font-size: 16px; }
  .sobre__txt > .btn { order: 6; align-self: center; margin-top: 28px; }
  /* texto centralizado e "Não é “hotelzinho”." numa linha só */
  .sobre .t-eyebrow, .sobre__title, .sobre__lead { text-align: center; }
  .sobre__title { font-size: clamp(34px, 10.2vw, 44px); }
  .sobre__title .l:first-child > span { white-space: nowrap; }
  /* os cartões de trás saem pra direita e pra cima: a pilha fica um pouco à esquerda pra caber */
  .stack { width: min(calc(100% - 72px), 290px); height: 370px; margin-right: 40px; touch-action: pan-y; }
  .stack__card { padding: 10px 10px 50px; }
  .stack__card figcaption { left: 18px; right: 18px; bottom: 15px; font-size: 15px; }
  .stack__hint { margin-top: 28px; }

  /* ───── 04 · O espaço: Stories com destaques em cima ───── */
  .espaco { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .espaco__txt { display: contents; }
  .espaco .t-eyebrow { order: 1; } .espaco__title { order: 2; } .espaco__lead { order: 3; font-size: 16px; }
  .areas { order: 4; display: flex; gap: 12px; overflow-x: auto; margin: 22px calc(-1 * var(--gutter)) 16px; padding: 4px var(--gutter) 6px; scrollbar-width: none; }
  .areas::-webkit-scrollbar { display: none; }
  .area { flex: 0 0 auto; width: 74px; align-items: center; gap: 6px; padding: 0; background: none; text-align: center; font: 700 12px/1.25 var(--font-body); }
  .area img { width: 68px; height: 68px; padding: 3px; border-radius: 50%; background: var(--bg-page); box-shadow: 0 0 0 2.5px var(--cream-300); transition: box-shadow 250ms ease; }
  .area span { padding: 0; }
  .is-in .area.on { transform: none; box-shadow: none; }
  .area.on img { box-shadow: 0 0 0 2.5px var(--orange-400); }
  .area.on span { color: var(--orange-800); }
  .story { order: 5; height: min(70svh, 600px); border-radius: 28px; }
  .story__title { font-size: 28px; }
  .story__cap { left: 18px; right: 18px; bottom: 20px; }
  .story__nav { bottom: 96px; }
  .espaco .row-cta { order: 6; margin-top: 28px; }

  /* ───── 05 · Um dia: céu e relógio grudados no topo, momentos numa linha do tempo ───── */
  .dia { display: block; }
  .dia__head { display: block; }
  .dia__gruda { position: sticky; top: 76px; z-index: 5; margin-top: 24px; }
  .dia__gruda .sky { height: 150px; margin-top: 0; border-radius: 24px; box-shadow: 0 0 0 2px var(--border-default); }
  .sky__ground { display: none; }
  .sky__sun { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
  .sky__sun img { width: 24px; height: 24px; }
  /* relógio embaixo no meio: o arco do sol passa por cima dele, nunca atrás */
  .dia__gruda .dia__clock { position: absolute; z-index: 3; left: 50%; bottom: 12px; translate: -50% 0; min-width: 150px; padding: 7px 14px 8px; border-radius: 18px; background: rgba(255, 245, 225, .9); text-align: center; }
  .dia__clock b { font-size: 26px; }
  .dia__clock span { margin-top: 3px; font-size: 12.5px; }
  .momentos { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
  .momento { display: grid; grid-template-columns: 108px 1fr; align-items: stretch; border-radius: 22px; }
  .momento img { height: 100%; min-height: 128px; }
  .momento__b { padding: 14px 16px 16px; }
  .momento strong { font-size: 17px; }
  .momento p { margin-top: 6px; font-size: 13.5px; }
  .is-in .momento.ready { transition: opacity 300ms ease, box-shadow 300ms var(--ease-out); }
  .is-in .momento.ready:not(.on) { opacity: .6; }
  .is-in .momento.on { transform: none; box-shadow: 0 0 0 2.5px var(--orange-400), 0 14px 26px -16px rgba(58, 26, 16, .35); }
  .dia .row-cta { padding-top: 28px; }

  /* ───── 06 · Avaliações: nota que cabe, depoimentos de arrastar ───── */
  .aval { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .aval__left { display: contents; }
  .nota__n { font-size: 132px; line-height: 116px; }
  .nota__de { font-size: 20px; }
  .bigstars { margin-top: 22px; }
  .bigstars i { width: 30px; height: 30px; }
  .aval__title { font-size: 28px; }
  .aval__sub { font-size: 16px; }
  .reviews { order: 7; flex-direction: row; align-items: stretch; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin: 26px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .reviews::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 84%; margin: 0; padding: 16px 20px 14px; scroll-snap-align: start; }
  .review blockquote { font-size: 16.5px; }
  .reviews__dots { order: 8; display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
  .reviews__dots i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--cream-300); transition: width 300ms var(--ease-out), background-color 300ms ease; }
  .reviews__dots i.on { width: 20px; background: var(--orange-400); }
  .aval__left > .btn { order: 9; align-self: flex-start; margin-top: 26px; }

  /* ───── 07 · Equipe: arrastar com contador ───── */
  .equipe__sub { padding-inline: 20px; font-size: 16px; }
  .carrossel { height: 370px; margin-top: 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
  .membro { width: 260px; height: 350px; border-radius: 30px; }
  .pessoa { padding-inline: 20px; }
  .pessoa__nome { font-size: 24px; }
  .pessoa__frase { font-size: 15.5px; }
  .setas { display: none; }
  .eq__conta { display: block; margin-top: 12px; font: 800 13px/1.5 var(--font-body); letter-spacing: .06em; color: var(--text-muted); font-variant-numeric: tabular-nums; }

  /* ───── 08 · Dúvidas: chat em cima, perguntas como respostas rápidas ───── */
  .faq { display: flex; flex-direction: column; height: auto; gap: 0; }
  .faq__left { display: contents; }
  .faq .t-eyebrow { order: 1; } .faq__title { order: 2; } .faq__lead { order: 3; font-size: 16px; }
  /* topo centralizado (pedido do Alan 29/10) */
  .faq .t-eyebrow, .faq__title, .faq__lead { align-self: center; text-align: center; }
  .faq__lead { max-width: 340px; }
  .chatbox { order: 4; height: 440px; margin-top: 24px; border-radius: 28px; }
  .pills { order: 5; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; justify-content: start; gap: 8px; max-width: none;
    margin: 16px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pill { min-height: 44px; white-space: nowrap; }
  .faq__left > .btn { order: 6; align-self: flex-start; margin-top: 22px; }
  .chatbox__hd { padding: 14px 16px; }
  .chatbox__hd .status { display: none; }
  .chat { padding: 16px; }
  .msg { max-width: 84%; padding: 11px 14px; font-size: 15px; }

  /* ───── 09 · Contato: cartão em cima, mapa embaixo ───── */
  .contato { height: auto; display: flex; flex-direction: column; padding-top: 72px; background: var(--bg-page); }
  .ccard { order: 1; position: relative; left: auto; top: auto; width: auto; margin: 0 var(--gutter); padding: 22px 20px; border-radius: 30px; }
  .ccard__rows li { font-size: 14px; }
  .ccard__acts { flex-direction: column; }
  .ccard__acts .btn { width: 100%; }
  .mapa { order: 2; position: relative; inset: auto; height: 420px; margin-top: 40px; }
  .perto { left: var(--gutter); right: var(--gutter); top: auto; bottom: 18px; display: flex; justify-content: center; }
  .perto__sum { flex-wrap: wrap; justify-content: center; padding: 14px 18px; border-radius: 22px; line-height: 1.35; text-align: center; }
  .mapa-dica { right: auto; left: 50%; translate: -50% 0; bottom: 90px; white-space: nowrap; }

  /* ───── 10 · Rodapé: título e contatos limpos, adesivos numa caixa embaixo ───── */
  .ft { height: auto; display: flex; flex-direction: column; }
  .ft__top { grid-template-columns: 1fr; gap: 30px; padding: 96px 20px 0; }
  .ft__title { font-size: clamp(56px, 18vw, 84px); }
  .ft__cols { grid-template-columns: 1fr 1fr; gap: 24px 20px; padding-top: 0; }
  .ft__col:first-child { grid-row: span 2; }
  .ft__col a, .ft__col span { font-size: 15px; }
  .ft__marca { display: none; }
  .ft__box { position: relative; inset: auto; height: 300px; margin-top: 8px; }
  .stk { height: 52px; padding: 0 20px; gap: 8px; font-size: 20px; }
  .stk img.ic { width: 20px; height: 20px; }
  .stk--big { height: 62px; padding: 0 24px; }
  .stk--foto { width: 86px; height: 86px; padding: 0; box-shadow: 0 0 0 4px var(--yellow-400); }
  .ft__hint, .ft__base { position: static; padding: 0 20px; text-align: center; }
  .ft__hint { margin-top: 10px; }
  .ft__base { padding: 10px 20px calc(28px + env(safe-area-inset-bottom)); font-size: 12.5px; }
}

/* ───────── Tablet (768 a 1099px): desktop reorganizado onde aperta ───────── */
@media (min-width: 768px) and (max-width: 1099px) {
  .serv, .sobre, .espaco, .dia, .aval, .equipe, .faq { padding-top: 96px; padding-bottom: 96px; }

  /* nav: logo numa linha só, links mais juntos */
  .nav { gap: 16px; }
  .nav__logo { white-space: nowrap; font-size: 22px; }
  .nav__links { gap: 18px; font-size: 14px; }

  /* Serviços: foto acompanha a coluna */
  .serv__grid { grid-template-columns: 1fr 110px 1fr; }
  .serv__name { font-size: clamp(36px, 4.6vw, 48px); white-space: nowrap; }
  .serv__photo { width: 100%; max-width: 360px; height: clamp(240px, 32vw, 330px); }
  .serv__more { flex-wrap: wrap; }

  /* Sobre: pilha menor, um pouco pra esquerda pra os cartões de trás caberem */
  .sobre { gap: 40px; min-height: 0; }
  .stack { width: min(calc(100% - 56px), 340px); height: 420px; margin-right: 40px; }

  /* Um dia: 6 momentos em 3 colunas, nada de palito */
  .dia { min-height: 0; }
  .momentos { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .momento img { height: 170px; }
  .dia__title { font-size: clamp(40px, 5.4vw, 54px); }

  /* Avaliações: nota em cima, depoimentos num carrossel de arrastar com dois por vez */
  .aval { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; }
  .nota__n { font-size: 200px; line-height: 172px; }
  .reviews { flex-direction: row; align-items: stretch; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin: 40px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .reviews::-webkit-scrollbar { display: none; }
  .review { flex: 0 0 calc(50% - 8px); margin: 0; scroll-snap-align: start; }
  .reviews__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .reviews__dots i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--cream-300); transition: width 300ms var(--ease-out), background-color 300ms ease; }
  .reviews__dots i.on { width: 20px; background: var(--orange-400); }

  /* Dúvidas: altura pelo conteúdo */
  .faq { height: auto; min-height: 860px; gap: 40px; }
  .faq__title { font-size: clamp(44px, 5.6vw, 60px); }

  /* Rodapé: título em cima, três colunas embaixo, adesivos no fundo */
  .ft { height: 1040px; }
  .ft__top { grid-template-columns: 1fr; gap: 36px; }
  .ft__title { font-size: clamp(88px, 12vw, 120px); }
  .ft__cols { grid-template-columns: 1.2fr 1fr 1.3fr; gap: 28px; padding-top: 0; }
  .ft__marca { top: 470px; font-size: 220px; }
}
/* tablet em pé: o Sobre e o Espaço viram uma coluna só */
@media (min-width: 768px) and (max-width: 899px) {
  .sobre { grid-template-columns: 1fr; }
  .sobre__stack-wrap { order: -1; }
  .espaco { grid-template-columns: 1fr 1fr; gap: 32px; }
  .story { height: 640px; }
  .areas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .mapa-mexer { right: auto; left: 50%; translate: -50% 0; bottom: 90px; white-space: nowrap; }
  .mapa-mexer:active { transform: scale(.97); }
}

/* área de toque de 44px nos links pequenos (só em tela de toque até o tablet) */
@media (max-width: 1099px) and (pointer: coarse) {
  .ft__col a { display: flex; align-items: center; min-height: 44px; line-height: 1.3; }
  .nav__links a { padding: 12px 0; margin: -12px 0; }
  .nav__links a::after { bottom: 9px; }
  .ccard__rows a { padding: 12px 4px; margin: -12px -4px; }
}

/* tablet de toque: links do rodapé em duas colunas, pra não descer até os adesivos */
@media (min-width: 768px) and (max-width: 1099px) and (pointer: coarse) {
  .ft__col:first-child { display: grid; grid-template-columns: auto auto; column-gap: 28px; align-content: start; justify-content: start; }
  .ft__col:first-child small { grid-column: 1 / -1; }
}