/* SAAT Concept · a paleta é a das seis capas de destaque do Instagram, medida nos arquivos:
   branco #FFFFFF, osso #D5CCC3, cinza #C0C0C0, preto #000000, tinta #1D1D1D, grafite #49494B.
   Não existe cor de destaque fora disso: o osso faz o papel de acento sobre o preto, e a tinta
   sobre o osso. Nem verde de "aberto", nem dourado de estrela (ver CORES.md).
   As formas também são as da marca: retângulo de fio fino (a etiqueta "MORE THAN A BARBER SHOP"),
   círculo (o selo do monograma) e canto vivo. Nada arredondado, nada em itálico. */
:root{
  --preto:#000; --tinta:#1D1D1D; --grafite:#49494B; --cinza:#C0C0C0; --osso:#D5CCC3; --branco:#fff;
  /* cada seção escolhe o seu tema; o padrão é o escuro dos posts */
  --fundo:var(--preto); --cor:var(--osso); --cor-2:rgba(213,204,195,.74); --cor-3:rgba(213,204,195,.5); --fio:rgba(213,204,195,.2);
  /* "concept." é uma grotesca de peso médio; o texto miúdo das capas é IBM Plex Sans */
  --titulo:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; --texto:'IBM Plex Sans','Inter',system-ui,sans-serif;
  --lado:clamp(18px,5.5vw,88px);
  --topo:64px; --previa:0px; --tela:calc(100svh - var(--topo));
}
.tema-osso{--fundo:var(--osso); --cor:var(--tinta); --cor-2:rgba(29,29,29,.78); --cor-3:rgba(29,29,29,.56); --fio:rgba(29,29,29,.2)}
.tema-tinta{--fundo:var(--tinta)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;background:var(--preto)}
body{background:var(--preto);color:var(--osso);font-family:var(--texto);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
h1,h2,h3{font-family:var(--titulo);font-weight:500;letter-spacing:-.025em}
svg{fill:currentColor}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
section{background:var(--fundo);color:var(--cor)}

/* ─── faixa de prévia ─── */
.previa{display:flex;flex-wrap:wrap;gap:.3em 1.4em;align-items:center;justify-content:center;
  padding:8px var(--lado);background:var(--grafite);color:rgba(255,255,255,.84);font-size:12.5px;text-align:center}
.previa b{color:#fff;font-weight:500}
.previa a{color:var(--osso);font-weight:500;text-underline-offset:3px}
.previa .conferir{border-color:rgba(255,255,255,.6);color:#fff}

/* o que falta confirmar: a pauta da reunião, visível na tela, mas discreta */
.conferir{display:inline-block;padding:0 .6em;border:1px dashed currentColor;
  font-family:var(--texto);font-size:.66em;font-style:normal;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.8;vertical-align:.14em;white-space:nowrap;opacity:.72}

/* ─── a etiqueta da marca: caixa de fio fino, caixa alta espaçada ─── */
.etiqueta{display:inline-block;padding:.5em .9em;border:1px solid currentColor;
  font-size:11.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;line-height:1.3}
.sobre{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--cor-3)}
/* a segunda metade do título fica mais baixa no mesmo tom, sem itálico e sem outra cor */
h2 em{font-style:normal;color:var(--cor-3)}

/* ─── topo ─── */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:2rem;padding:10px var(--lado);
  /* sem backdrop-filter: o iPhone recalcula o desfoque a cada quadro da rolagem */
  background:#000;border-bottom:1px solid rgba(213,204,195,.14)}
.logo{display:inline-flex;align-items:baseline;gap:.5em;margin-right:auto;text-decoration:none;color:var(--osso)}
.logo svg{display:block;height:19px;width:78.5px}
.logo span{font-family:var(--titulo);font-weight:500;font-size:15px;letter-spacing:-.01em;color:rgba(213,204,195,.7)}
.topo nav{display:flex;gap:1.8rem;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.topo nav a{text-decoration:none;color:rgba(213,204,195,.7);padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
@media (hover:hover){.topo nav a:hover{color:var(--osso);border-bottom-color:var(--osso)}}
.bt-topo{text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;background:var(--osso);color:#000;border:1px solid var(--osso);transition:background .2s,color .2s}
@media (hover:hover){.bt-topo:hover{background:transparent;color:var(--osso)}}

/* ─── botões: retângulo de canto vivo, como a etiqueta ─── */
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.bt{display:inline-flex;align-items:center;justify-content:center;gap:.7em;min-height:54px;padding:0 26px;
  text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--cor);transition:background .2s,color .2s}
.bt svg{width:19px;height:19px;flex:none;fill:none}
.bt-cheio{background:var(--cor);color:var(--fundo)}
.bt-linha{color:var(--cor)}
@media (hover:hover){
  .bt-cheio:hover{background:transparent;color:var(--cor)}
  .bt-linha:hover{background:var(--cor);color:var(--fundo)}
}

/* ─── capa: o texto de um lado e, do outro, o quadro no formato das capas de reel da marca:
   etiqueta em pé no canto de cima, selo do monograma no outro canto e o texto miúdo no pé.
   O vídeo é o reel de 29/09/2026 (o acabamento da barba), que termina na grade S A / concept. / A T. ─── */
.capa{position:relative;display:grid}
.capa-texto{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(28px,5vh,64px) var(--lado)}
.capa h1{margin-top:clamp(16px,2.6vh,28px);font-size:clamp(40px,5.6vw,92px);line-height:.98;letter-spacing:-.04em;max-width:7.2em}
.lead{max-width:26em;margin-top:clamp(12px,2vh,20px);font-size:clamp(16.5px,1.35vw,20px);color:var(--cor-2)}
.selos{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:1.6rem;font-size:13.5px;color:var(--cor-2)}
.selos > span,.selos > a{display:inline-flex;align-items:center;gap:.6em;text-decoration:none}
/* aberto: bolinha cheia de osso; fechado: só o aro. Sem verde nem laranja, que não são da marca. */
.ponto{flex:none;width:9px;height:9px;border-radius:50%;background:currentColor;border:1.5px solid currentColor}
.ponto.fechado{background:transparent}
.estrelas{letter-spacing:.14em}

.capa-quadro{position:relative;margin:0;overflow:hidden;background:#0B0B0B}
.capa-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;background:#0B0B0B}
/* o vídeo é fundo, não player: sem alvo para o mouse, o navegador não põe por cima dele os botões de
   "picture in picture", "melhorar vídeo" e "baixar" (o Edge e o Chrome mostram quando o mouse passa) */
.capa-video{pointer-events:none;-webkit-user-select:none;user-select:none}
.capa-video::-webkit-media-controls,.capa-video::-webkit-media-controls-panel,.capa-video::-webkit-media-controls-overlay-play-button,.capa-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.quadro-etiqueta{position:absolute;z-index:1;left:clamp(14px,1.8vw,26px);top:clamp(14px,1.8vw,26px);
  writing-mode:vertical-rl;transform:rotate(180deg);padding:.9em .45em;font-size:10px;color:var(--osso)}
.selo{position:absolute;z-index:1;right:clamp(14px,1.8vw,26px);top:clamp(14px,1.8vw,26px);
  width:46px;height:46px;padding:11px 10px 12px;border-radius:50%;background:var(--osso);color:var(--tinta)}
.micro{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:70px 9% 20px;text-align:center;
  font-size:11.5px;line-height:1.5;letter-spacing:.01em;color:rgba(213,204,195,.86);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}

/* o título se escreve enquanto o vídeo passa; até o vídeo começar o texto fica inteiro */
.capa.tocando .l{visibility:hidden}
.capa.tocando .l.on{visibility:visible}
.capa .l.cursor{box-shadow:.06em 0 0 currentColor;animation:pisca .8s steps(1) infinite}
@keyframes pisca{50%{box-shadow:none}}
@media (prefers-reduced-motion:no-preference){
  .js .capa .etiqueta,.js .capa .acoes,.js .capa .selos{animation:sobe .8s cubic-bezier(.2,.7,.2,1) both}
  .js .capa .acoes{animation-delay:.25s}
  .js .capa .selos{animation-delay:.35s}
}
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ─── blocos ─── */
.bloco{padding:clamp(60px,7.5vw,104px) var(--lado)}
.cab{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 40px;margin-bottom:clamp(28px,3.6vw,48px)}
.cab .sobre{grid-column:1 / -1}
.cab h2,.equipe h2,.local h2,.duvidas h2{font-size:clamp(32px,3.8vw,58px);line-height:1.02;max-width:14em}
.cab-nota{font-size:14.5px;color:var(--cor-3);padding-bottom:8px;max-width:24em}

/* ─── as três palavras da bio, cada uma com uma frase dita por eles ─── */
.palavras{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--cor)}
.palavras li{padding:clamp(18px,2.4vw,32px) clamp(16px,2vw,32px) 0 0}
.palavras li + li{padding-left:clamp(16px,2vw,32px);border-left:1px solid var(--fio)}
.palavras small{display:block;font-size:12px;letter-spacing:.2em;color:var(--cor-3)}
.palavras b{display:block;margin:clamp(24px,7vh,88px) 0 .3em;font-family:var(--titulo);font-weight:500;
  font-size:clamp(34px,4.6vw,76px);line-height:1;letter-spacing:-.04em}
.palavras p{max-width:20em;font-size:16.5px;color:var(--cor-2)}

/* ─── serviços: linhas grandes, só os nomes ─── */
.servicos{list-style:none;border-bottom:1px solid var(--fio)}
.servicos li{border-top:1px solid var(--fio)}
.servicos a{display:grid;grid-template-columns:3.4em 1fr auto;align-items:baseline;gap:16px;padding:clamp(16px,2.6vh,28px) 0;
  text-decoration:none;transition:padding .35s cubic-bezier(.2,.7,.2,1),background .35s}
.servicos small{font-size:12px;letter-spacing:.2em;color:var(--cor-3)}
.servicos b{font-family:var(--titulo);font-weight:500;font-size:clamp(30px,4.4vw,68px);line-height:1;letter-spacing:-.04em}
.servicos span{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cor-2)}
@media (hover:hover){.servicos a:hover{padding-left:18px;padding-right:18px;background:rgba(213,204,195,.06)}}
.servicos-pe{margin-top:22px;font-size:15.5px;color:var(--cor-2)}

/* ─── por dentro: o carrossel ─── */
.carrossel{position:relative;margin:0 calc(-1 * var(--lado))}
/* só anda quando a pessoa manda: arrastando, nas setas ou nas bolinhas. Cada foto encaixa na borda. */
.trilho{display:flex;gap:14px;overflow-x:auto;padding:0 var(--lado);
  scroll-snap-type:x mandatory;scroll-padding:0 var(--lado);overscroll-behavior-x:contain;
  scrollbar-width:none;outline:none}
.trilho::-webkit-scrollbar{display:none}
.trilho:focus-visible{outline:1px solid var(--osso);outline-offset:4px}
.trilho figure{position:relative;flex:0 0 auto;width:clamp(230px,24vw,330px);aspect-ratio:4/5;margin:0;overflow:hidden;background:#0B0B0B;
  scroll-snap-align:start}
.trilho img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
/* zoom só com mouse: no toque o :hover fica preso na foto */
@media (hover:hover){.trilho figure:hover img{transform:scale(1.04)}}
.trilho figcaption{position:absolute;left:0;bottom:0;padding:7px 12px;background:#000;color:var(--osso);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.carrossel-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.carrossel-nav[hidden]{display:none}
.seta-foto{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:1px solid var(--fio);border-radius:50%;
  background:none;color:var(--osso);cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.seta-foto svg{width:20px;height:20px;fill:none}
@media (hover:hover){.seta-foto:hover:not(:disabled){background:var(--osso);border-color:var(--osso);color:#000}}
.seta-foto:disabled{opacity:.3;cursor:default}
.pontos{display:flex;justify-content:center;gap:10px}
.pontos button{width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;background:rgba(213,204,195,.28);transition:background .2s,width .2s}
.pontos button[aria-current="true"]{width:22px;background:var(--osso)}

/* ─── quem faz: SA + AT. O texto de um lado, os dois retratos do outro, cada um no quadro da marca ─── */
.equipe{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,88px);align-items:center}
.equipe h2{margin:.4em 0 0}
.equipe-texto > p:not(.sobre){max-width:27em;margin-top:clamp(14px,2.4vh,22px);color:var(--cor-2)}
/* a conta que dá o nome: SA de Sadi, AT de Átila, nas letras da própria assinatura */
.soma{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);margin-top:clamp(20px,4vh,40px)}
.soma svg{display:block;height:clamp(34px,3.4vw,52px);width:auto}
.soma i{font-style:normal;font-family:var(--titulo);font-size:clamp(22px,2vw,30px);color:var(--cor-3)}
.nota{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(20px,4vh,36px);text-decoration:none}
.nota b{font-family:var(--titulo);font-weight:500;font-size:52px;line-height:1;letter-spacing:-.04em}
.nota > span{display:grid;font-size:14px;color:var(--cor-2)}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,28px)}
.barbeiro{margin:0;display:flex;flex-direction:column}
.retrato{position:relative;aspect-ratio:9/11;overflow:hidden;background:var(--tinta)}
/* absoluta: sem isso a altura da foto empurra a proporção no celular */
.retrato img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.retrato .quadro-etiqueta{left:12px;top:12px}
.barbeiro h3{margin-top:16px;font-size:clamp(22px,2vw,30px);line-height:1.05}
.cargo{margin-top:4px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cor-3)}
.fala{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--cor-2);flex:1}
.barbeiro .bt{margin-top:16px;min-height:50px;padding:0 16px;font-size:12px;letter-spacing:.14em}
.barbeiro .obs{margin-top:8px;font-size:12.5px;color:var(--cor-3)}

/* ─── horário e endereço: o texto de um lado, o cartaz de abertura do outro ─── */
.local{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.local-texto{padding:clamp(60px,7.5vw,104px) clamp(28px,4vw,64px) clamp(60px,7.5vw,104px) var(--lado)}
.local h2{margin:.4em 0 0}
.status-linha{display:inline-flex;align-items:center;gap:.7em;margin-top:20px;font-weight:500;font-size:15.5px}
.dados{margin:22px 0 28px;max-width:480px;border-bottom:1px solid var(--fio)}
.dados > div{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--fio)}
.dados dt{font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--cor-3);padding-top:4px}
.dados dd{font-size:16px}
#horarios span{display:block}
#horarios .hoje{color:var(--branco)}
#horarios .hoje::after{content:"hoje";margin-left:.8em;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.cartaz{position:relative;margin:0;min-height:420px;background:#000}
.cartaz img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ─── dúvidas ─── */
.duvidas{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.duvidas h2{margin-top:.4em}
.faq{border-bottom:1px solid var(--fio)}
.faq details{border-top:1px solid var(--fio)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:20px 0;font-family:var(--titulo);font-weight:500;font-size:clamp(18px,1.55vw,22px);line-height:1.25;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--fio);border-radius:50%;
  font-family:var(--texto);font-weight:300;font-size:20px;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 22px;color:var(--cor-2);max-width:42em}
.faq p a{font-weight:500;text-underline-offset:3px}

/* ─── contato: a grade S A / concept. / A T, como no fim dos reels ─── */
.contato{display:grid;justify-items:center;text-align:center;gap:clamp(18px,3vh,30px);padding:clamp(64px,9vw,120px) var(--lado)}
/* proporção medida na capa de reel: de centro a centro, 2,55 vezes a altura da letra, nos dois eixos */
.grade{--h:clamp(50px,8.6vh,84px);position:relative;display:grid;grid-template-columns:repeat(2,auto);
  gap:calc(var(--h) * 1.55) calc(var(--h) * 1.46);align-items:center;justify-items:center;margin-bottom:clamp(8px,2vh,22px)}
.grade svg{display:block;height:var(--h);width:auto}
/* "concept." fica no meio exato das quatro letras */
.grade span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--titulo);font-weight:500;font-size:calc(var(--h) * .38);letter-spacing:-.02em;line-height:1}
.contato h2{font-size:clamp(24px,2.6vw,38px);line-height:1.1;color:var(--cor-2)}
.contato .acoes{justify-content:center;margin-top:0}
.redes{display:flex;justify-content:center;gap:12px}
.redes a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--fio);color:var(--osso);
  transition:background .25s,color .25s,border-color .25s}
@media (hover:hover){.redes a:hover{background:var(--osso);border-color:var(--osso);color:#000}}
.redes svg{width:20px;height:20px;fill:none}

.rodape{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:20px var(--lado) 24px;
  font-size:12.5px;letter-spacing:.02em;color:rgba(213,204,195,.5);background:#000;border-top:1px solid rgba(213,204,195,.14)}

/* ─── menu: abaixo de 1061px as seções do topo viram um ícone que abre uma lista ─── */
.abre-menu{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;color:var(--osso)}
.abre-menu span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .3s,top .3s,opacity .2s}
.abre-menu span:nth-child(1){top:15px}
.abre-menu span:nth-child(2){top:21px}
.abre-menu span:nth-child(3){top:27px}
.menu-aberto .abre-menu span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-aberto .abre-menu span:nth-child(2){opacity:0}
.menu-aberto .abre-menu span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ─── telas menores ─── */
@media (max-width:1060px){
  .topo{gap:14px}
  .abre-menu{display:block}
  .topo nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:6px var(--lado) 18px;
    background:#000;font-size:15px;border-bottom:1px solid rgba(213,204,195,.14)}
  .menu-aberto .topo nav{display:flex}
  .topo nav a{padding:15px 0;border-bottom:1px solid rgba(213,204,195,.12)}
  .topo nav a:last-child{border-bottom:0}
  .equipe,.duvidas{grid-template-columns:1fr}
  /* entre 641 e 1060px a capa empilha: o quadro em cima e o texto embaixo. O quadro mantém a
     proporção do vídeo (9:11), centrado: numa faixa larga o vídeo era cortado e as letras da grade saíam */
  .capa-quadro{justify-self:center;width:auto;height:min(64svh,680px);aspect-ratio:9/11;max-width:100%;background:#000}
}
@media (max-width:860px){
  .cab{grid-template-columns:1fr}
  .local{grid-template-columns:1fr}
  .local-texto{padding-right:var(--lado)}
  .cartaz{min-height:0;aspect-ratio:3/4;max-height:72svh;width:100%}
  .palavras{grid-template-columns:1fr;border-top:0}
  .palavras li,.palavras li + li{display:grid;grid-template-columns:2.6em 1fr;column-gap:8px;padding:18px 0;border-left:0;border-top:1px solid var(--fio)}
  .palavras li:first-child{border-top-color:var(--cor)}
  .palavras small{grid-row:1 / 3;padding-top:.7em}
  .palavras b{margin:0 0 .2em;font-size:clamp(34px,10vw,52px)}
}
@media (max-width:640px){
  body{font-size:16px}
  .previa-dica{display:none}
  .topo{gap:10px}
  .bt-topo{padding:10px 14px;font-size:12px}
  .logo svg{height:16px;width:66px}
  .logo span{font-size:13.5px}
  .acoes .bt{flex:1 1 100%}
  .servicos a{grid-template-columns:2.4em 1fr auto;gap:10px}
  .servicos span{font-size:0}
  .servicos span::after{content:"→";font-size:20px}
  .trilho{gap:10px}
  .trilho figure{width:72vw}
  /* no celular é arrastar: a foto seguinte já aparece cortada na borda */
  .carrossel-nav{margin-top:14px}
  .seta-foto{display:none}
  .pontos{gap:0}
  .pontos button{box-sizing:content-box;padding:6px;background-clip:content-box}
  .dados > div{grid-template-columns:1fr;gap:2px}
  .micro{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .trilho img,.servicos a{transition:none}
  .abre-menu span{transition:none}
}

/* ─── telas: uma seção por tela, no molde do Puramô ───
   Cada .tela tem a altura da janela menos o topo, e a primeira desconta também a faixa de
   prévia (--previa, medida pelo script logo abaixo dela). A rolagem é livre, sem scroll-snap:
   o que dá a passagem entre as seções é o conteúdo surgindo ao entrar na tela (.revela).
   min-height, e não height: numa janela baixa demais a seção cresce em vez de cortar texto. */
@media (prefers-reduced-motion:no-preference){
  .js .revela{opacity:0;transform:translateY(28px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--atraso,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--atraso,0s)}
  .js .revela.visto{opacity:1;transform:none}
}
@media (prefers-reduced-motion:no-preference) and (max-width:640px){
  .js .revela{transform:translateY(16px);transition-duration:.55s;transition-delay:calc(var(--atraso,0s) / 2)}
}
@media (min-width:1061px) and (min-height:560px){
  html{scroll-padding-top:var(--topo)}
  .topo{height:var(--topo);padding-top:0;padding-bottom:0}
  .tela{min-height:var(--tela);overflow:hidden}
  .bloco.tela{display:flex;flex-direction:column;justify-content:center;padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(28px,6vh,72px)}
  .cab{margin-bottom:clamp(18px,3.6vh,44px)}
  .cab h2,.equipe h2,.local h2,.duvidas h2{font-size:clamp(30px,min(3.8vw,6.6vh),58px)}

  /* capa: o quadro tem a altura da tela e a proporção do vídeo (9:11), então nada é cortado */
  .capa{scroll-margin-top:var(--previa);min-height:calc(var(--tela) - var(--previa));grid-template-columns:minmax(0,1fr) auto}
  .capa-quadro{order:2;height:calc(var(--tela) - var(--previa));min-height:100%;aspect-ratio:9/11;max-width:46vw}
  .capa h1{font-size:clamp(40px,min(5.6vw,11vh),92px)}

  .palavras{flex:1;max-height:360px}
  .palavras li{display:flex;flex-direction:column}
  .palavras b{margin-top:auto}
  /* duas linhas reservadas: com frase de uma linha só a palavra descia e saía do alinhamento */
  .palavras p{min-height:3.2em}

  .servicos a{padding:clamp(12px,2.6vh,28px) 0}
  .servicos b{font-size:clamp(30px,min(4.4vw,8vh),68px)}

  /* por dentro: a altura das fotos segue a da janela, a largura vem da proporção 4:5 */
  .trilho figure{width:auto;height:clamp(220px,calc(var(--tela) - 340px),480px)}
  .carrossel-nav{margin-top:clamp(12px,2.4vh,22px)}

  .equipe.tela{display:grid;align-content:center}
  /* os retratos cabem na tela: a largura de cada um sai da altura que sobra */
  .dupla{grid-template-columns:repeat(2,minmax(0,min(100%,calc((var(--tela) - 330px) * .818))));justify-content:end}
  .fala{font-size:15px}

  .local-texto{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
    padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(28px,6vh,72px)}
  .cartaz{min-height:0}
  .dados{margin:clamp(14px,2.6vh,22px) 0 clamp(18px,3.4vh,28px)}
  .dados > div{padding:clamp(9px,1.6vh,13px) 0}

  .duvidas.tela{display:grid;align-items:center;align-content:center}
  .faq summary{padding:clamp(12px,2.4vh,20px) 0}

  /* contato e rodapé na mesma tela, o rodapé colado no fim */
  .tela-fim{display:flex;flex-direction:column}
  .tela-fim .contato{flex:1;align-content:center;padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(28px,6vh,72px)}
}

/* ─── celular: uma seção por tela também, com a rolagem livre ─── */
@media (max-width:640px){
  html{scroll-padding-top:var(--topo)}
  .topo{height:var(--topo);padding-top:0;padding-bottom:0}
  .tela,.local > .local-texto{min-height:var(--tela)}
  .bloco.tela{display:flex;flex-direction:column;justify-content:center;padding-top:28px;padding-bottom:28px}

  /* capa: o quadro em cima, como um post no feed, e o texto embaixo.
     Sem os botões: o "Agendar" já está no topo. */
  .capa{scroll-margin-top:var(--previa);min-height:calc(var(--tela) - var(--previa));grid-template-rows:auto 1fr}
  /* no celular o quadro ocupa a largura toda, como um post no feed, e corta um pouco o alto */
  .capa-quadro{justify-self:stretch;width:100%;aspect-ratio:auto;height:min(38svh,122vw);background:#0B0B0B}
  .capa-texto{justify-content:flex-start;padding:20px var(--lado) 18px}
  .capa h1{font-size:clamp(34px,10.4vw,46px);margin-top:12px}
  .lead{margin-top:10px}
  .capa .acoes{display:none}
  .capa .selos{margin-top:auto;padding-top:16px;flex-direction:column;gap:8px}

  /* equipe: os dois retratos lado a lado, o texto enxuto */
  /* a nota do Google já está na capa; aqui ela sairia da tela */
  .equipe.tela{gap:18px;padding-top:22px;padding-bottom:22px}
  .equipe h2{font-size:30px}
  .equipe-texto > p:not(.sobre){margin-top:10px}
  .soma{margin-top:14px}
  .soma svg{height:28px}
  .nota{display:none}
  .dupla{gap:12px}
  .retrato{aspect-ratio:1/1.1}
  .barbeiro h3{font-size:20px;margin-top:12px}
  .cargo{font-size:10.5px;letter-spacing:.14em}
  .fala{font-size:13.5px;line-height:1.45;margin-top:8px}
  .barbeiro .bt{min-height:46px;padding:0 8px;font-size:11px;letter-spacing:.1em}
  .barbeiro .bt svg{display:none}
  .retrato .quadro-etiqueta{display:none}

  .local.tela{display:block;min-height:0;padding:0}
  .local-texto{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px var(--lado)}
  /* o cartaz, em pé, dobraria a altura da seção */
  .cartaz{display:none}

  .grade{--h:50px}
  .tela-fim{display:flex;flex-direction:column}
  .tela-fim .contato{flex:1;align-content:center;padding-top:36px;padding-bottom:32px;gap:16px}
}