/* ============================================================
   AMPLIATO — Salão de Beleza
   Paleta dourada/bege sobre off-white.
   As fotos entram na pasta img/ — os nomes estão marcados
   no index.html com o comentário "TROCAR FOTO".
   ============================================================ */

:root{
  --bg:        #FBFAF7;   /* off-white base */
  --bg-alt:    #F3EEE6;   /* bege claro */
  --ink:       #16130F;   /* quase preto */
  --muted:     #6E655B;   /* texto secundário */
  --line:      #E4DDD1;   /* traços e bordas */
  --gold:      #B8935A;   /* dourado — destaque e CTA */
  --gold-dk:   #96743F;   /* dourado no hover */
  --dark:      #17140F;   /* card escuro */

  /* As duas fontes das suas referências são comerciais e pagas, então
     entram substitutas livres com o mesmo desenho. Comprando a licença,
     é só trocar o primeiro nome de cada linha pelo arquivo local.
       Domaine Display (Klim)      -> "DM Serif Display"
       Epicene Display (Hoefler&Co) -> "Playfair Display"              */
  --display: "DM Serif Display", "Playfair Display", Georgia, serif;
  --serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body:    "Ubuntu", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* clicar numa bola desce até a seção sem pulo seco */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- Placeholders de foto -------------------------------
   Enquanto o arquivo não existir em img/, aparece uma caixa
   tracejada com o nome do arquivo. Assim que você jogar a foto
   na pasta com esse nome, ela cobre o placeholder sozinha.
   ---------------------------------------------------------------*/
.ph{
  position:relative;
  background-color:var(--bg-alt);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px dashed var(--line);
}
.ph::after{
  content:attr(data-ph);
  position:absolute;
  inset:auto 8px 8px 8px;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted);
  background:rgba(255,255,255,.82);
  padding:4px 8px;
  border-radius:2px;
  pointer-events:none;
}
.ph--dark{ background-color:var(--dark); border-color:#2A251E; }
.ph--dark::after{ background:rgba(0,0,0,.55); color:#CFC6B8; }

/* ---------- Cabeçalho ----------
   Não é mais uma barra branca acima do hero: agora flutua POR CIMA da
   foto, com fundo fosco translúcido (backdrop-filter). O hero começa
   no topo da página e passa por baixo dele.                          */
.header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:20;
  background:rgba(18,15,13,.26);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
/* navegador sem backdrop-filter (Firefox antigo): fecha mais o fundo,
   senão o menu fica ilegível sobre a foto                            */
@supports not (backdrop-filter:blur(1px)){
  .header{ background:rgba(18,15,13,.72); }
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:84px;
}

.logo{ display:block; line-height:0; flex:0 0 auto; }
.logo img{
  height:48px;
  width:auto;
  display:block;
}

.nav ul{ display:flex; gap:26px; }

/* Hover "up on / up off": a palavra sobe e sai por cima enquanto uma
   cópia idêntica sobe atrás dela e ocupa o lugar exato. Quem tem o
   overflow é o <a>, que fica parado — o que se move é o <span> e o
   ::after. A cópia vem do atributo data-txt, então não duplica texto
   pro leitor de tela nem pro buscador.                              */
.nav a{
  position:relative;
  display:block;
  overflow:hidden;
  height:1.5em;
  line-height:1.5em;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,253,249,.86);
  border-bottom:1px solid transparent;
  transition:border-color .18s;
}
.nav a > span{ display:block; }
.nav a::after{
  content:attr(data-txt);
  position:absolute;
  left:0; top:0;
  width:100%;
  transform:translateY(100%);
  color:var(--gold);
}
.nav a > span,
.nav a::after{
  transition:transform .34s cubic-bezier(.65,0,.35,1);
}
.nav a:hover > span,
.nav a:focus-visible > span{ transform:translateY(-100%); }
.nav a:hover::after,
.nav a:focus-visible::after{ transform:translateY(0); }

/* Seção em que você está: o item fica travado no mesmo quadro final
   do hover — a cópia bege ocupando o lugar da palavra. Não é uma cor
   diferente aplicada por cima, é a própria animação parada no fim.  */
.nav a.is-active > span{ transform:translateY(-100%); }
.nav a.is-active::after{ transform:translateY(0); }
.nav a.is-active{ border-bottom-color:var(--gold); }
.nav a:hover{ border-bottom-color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  .nav a > span, .nav a::after{ transition:none; }
}

/* ---------- Botões ----------
   "Liquid glass": sem fundo sólido. O que desenha o botão é o
   backdrop-filter (borra e satura o que está atrás) mais uma pilha de
   sombras internas que simulam a espessura e o brilho do vidro. Usei a
   pilha clara — a de sombras pretas deixava o botão sujo sobre a foto.
   ---------------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:16px 34px;
  border:0;
  border-radius:999px;
  cursor:pointer;
  isolation:isolate;
}

.btn--glass{
  color:#FFFDF9;
  background:transparent;
  backdrop-filter:blur(3px) saturate(160%);
  -webkit-backdrop-filter:blur(3px) saturate(160%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), color .3s;
  /* só brilho — as sombras externas pretas do componente original
     abriam um halo sujo em volta do botão sobre a foto              */
  box-shadow:
    inset  3px  3px .5px -3.5px rgba(255,255,255,.09),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset  1px  1px 1px  -.5px  rgba(255,255,255,.60),
    inset -1px -1px 1px  -.5px  rgba(255,255,255,.60),
    inset  0    0   6px 6px     rgba(255,255,255,.12),
    inset  0    0   2px 2px     rgba(255,255,255,.06),
    0 0 16px rgba(255,255,255,.10);
}
.btn--glass:hover{ transform:scale(1.05); }
.btn--glass:active{ transform:scale(.98); }
.btn--glass:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* mesmo vidro, mas sobre fundo claro: o texto precisa escurecer e o
   brilho interno vira sombra, senão o botão some na página off-white */
.btn--on-light{
  color:var(--ink);
  backdrop-filter:blur(3px) saturate(120%);
  -webkit-backdrop-filter:blur(3px) saturate(120%);
  box-shadow:
    inset  3px  3px .5px -3px rgba(0,0,0,.16),
    inset -3px -3px .5px -3px rgba(0,0,0,.14),
    inset  1px  1px 1px -.5px rgba(0,0,0,.10),
    inset -1px -1px 1px -.5px rgba(255,255,255,.90),
    inset  0 0 6px 6px rgba(255,255,255,.35),
    inset  0 0 0 1px rgba(0,0,0,.07);
}

/* versão baixa, pro menu */
.btn--sm{ padding:10px 24px; font-size:11px; letter-spacing:.14em; }

/* mantidos: ainda usados fora do hero se precisar */
.btn--gold{ background:var(--gold); color:#fff; border-radius:999px; }
.btn--gold:hover{ background:var(--gold-dk); }

/* ============================================================
   HERO

   A foto fica parada. Animam só duas coisas:
     0.20s  degradê preto da esquerda faz fade-in (1.1s)
     0.55s  título, subtítulo e botão surgem, escalonados,
            deslocados pra esquerda — entram junto com o degradê
   Quem tem "reduzir movimento" ligado recebe o quadro final direto.
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  background:#0B0908;
}

/* foto da fachada — estática, sem zoom nem deslocamento */
.hero__bg{
  position:absolute;
  inset:0;
  z-index:1;
  background-size:cover;
  background-position:center 55%;
  background-repeat:no-repeat;
}

/* degradê preto só na esquerda, pro texto ter contraste */
.hero__veil{
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(96deg,
      rgba(7,6,5,.92)  0%,
      rgba(7,6,5,.80) 22%,
      rgba(7,6,5,.42) 44%,
      rgba(7,6,5,0)   66%);
  opacity:0;
  animation:heroVeil 1.1s ease-out .2s forwards;
}
@keyframes heroVeil{
  from{ opacity:0; }
  to  { opacity:1; }
}

.hero__inner{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-items:center;
  gap:0 24px;
  min-height:640px;
  padding-block:140px 56px;   /* 84px de menu sobreposto + respiro */
}

.hero__copy{
  position:relative;
  z-index:4;
  grid-column:1;
}

/* o texto entra deslocado pra esquerda, acompanhando o degradê */
.hero__copy h1,
.hero__copy .hero__sub,
.hero__copy .btn{
  opacity:0;
  transform:translateX(-26px);
  animation:heroIn .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero__copy h1        { animation-delay:.55s; }
.hero__copy .hero__sub{ animation-delay:.70s; }
.hero__copy .btn      { animation-delay:.85s; }

@keyframes heroIn{
  to{ opacity:1; transform:translateX(0); }
}

.hero__copy h1{
  font-family:var(--display);
  font-weight:400;              /* DM Serif Display só tem um peso */
  font-size:clamp(40px, 4.6vw, 64px);
  line-height:1.12;
  letter-spacing:-.005em;
  margin:0 0 20px;
  white-space:nowrap;
  color:#FFFDF9;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
/* a palavra realçada troca de fonte: serifada, itálica, dourada.
   O contraste com o Ubuntu leve é o que faz o destaque funcionar.  */
/* a palavra realçada troca de serifada: a Playfair itálica tem formas
   caligráficas que a DM Serif não tem, e é isso que marca o destaque */
.hero__copy h1 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:1.04em;
  letter-spacing:0;
  color:var(--gold);
}
.hero__sub{
  margin:0 0 30px;
  max-width:38ch;
  font-family:var(--body);
  font-size:16px;
  font-weight:300;
  letter-spacing:.005em;
  color:#D9D1C6;
  text-shadow:0 1px 16px rgba(0,0,0,.5);
}

/* respeita quem pediu menos movimento: entrega o quadro final direto */
@media (prefers-reduced-motion:reduce){
  .hero__veil{ animation:none; opacity:1; }
  .hero__copy h1,
  .hero__copy .hero__sub,
  .hero__copy .btn{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   SOBRE
   ============================================================ */
/* fundo escuro texturizado (tile de 400px, repete nas duas direções).
   A textura é bem sutil, então vai uma cor sólida por baixo — se a
   imagem não carregar, a seção continua escura e legível.            */
.sobre{
  padding-block:76px;
  background-color:#141110;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color:#D9D1C6;
}
.sobre__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,.95fr);
  align-items:center;
  gap:48px;
}

/* --- Esquerda: fachada --- */
.sobre__foto{
  margin:0;
  position:relative;
}
.sobre__foto img{
  position:relative;
  z-index:1;
  width:100%;
  height:330px;
  object-fit:cover;
  object-position:center 38%;
  display:block;
}
/* moldura dourada deslocada, dá acabamento sem pesar */
.sobre__foto::before{
  content:"";
  position:absolute;
  inset:-14px -14px 14px 14px;
  border:1px solid var(--gold);
  z-index:0;
}

/* --- Centro: texto --- */
.sobre__copy h2{
  font-family:var(--display);
  font-size:clamp(34px,4.2vw,52px);
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1;
  color:var(--gold);            /* AMPLIATO na cor de destaque */
  margin:0 0 8px;
}
/* .sobre__copy na frente pra ganhar de .sobre__copy p, que vem depois */
.sobre__copy .eyebrow{
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.4;
  text-transform:uppercase;
  color:#FFFDF9;                /* era preto: o fundo agora é escuro */
  margin:0 0 18px;
}
.eyebrow::after{
  content:"";
  display:block;
  width:56px;
  height:1px;
  background:var(--gold);
  margin-top:14px;
}
.sobre__copy p{
  margin:0 0 14px;
  font-family:var(--body);
  font-size:15px;
  font-weight:300;
  color:#B8AEA1;
  line-height:1.72;
}
.sobre__copy .btn{ margin-top:8px; padding:14px 30px; }

/* --- Direita: vídeo do celular ---
   O .webm já vem com o celular renderizado sobre fundo BRANCO puro.
   O multiply apaga esse branco contra o off-white da página, então o
   celular parece recortado sem precisar de alpha no vídeo.            */
/* O render original vinha com o celular sobre fundo BRANCO e dependia
   de mix-blend-mode pra sumir com esse fundo — o que só funcionava
   sobre página clara. Agora o recorte está no próprio arquivo
   (ampliato-celular-alpha.webm, VP9 com canal alpha), então o vídeo
   não precisa de moldura nem de blend: entra limpo sobre qualquer
   fundo.                                                             */
.fone{ display:grid; place-items:center; }
.fone__video{
  width:100%;
  max-width:320px;
  height:auto;
  display:block;
}

/* ============================================================
   SERVIÇOS — as bolas

   Uma linha só enquanto couber; quando não couber, quebra sozinha.
   O grid usa auto-fit com minmax, então o número de colunas é o
   navegador que decide pela largura disponível — não há breakpoint
   fixo dizendo "aqui viram 5".
   ============================================================ */
.servicos{
  padding-block:76px;
  background:var(--bg);
  text-align:center;
}
.servicos__eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 10px;
}
.servicos__titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;
  color:var(--ink);
  margin:0 0 52px;
}

.servicos__lista{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:38px 20px;
  justify-items:center;
}

.bola a,
.bola__estatico{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
}

.bola__foto{
  position:relative;
  display:block;
  width:100%;
  max-width:150px;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:var(--bg-alt);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s;
  box-shadow:0 6px 20px rgba(22,19,15,.10);
}
.bola__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* anel dourado que fecha no hover */
.bola__foto::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid transparent;
  transition:border-color .35s;
}
.bola a:hover .bola__foto,
.bola a:focus-visible .bola__foto{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(22,19,15,.20);
}
.bola a:hover .bola__foto::after,
.bola a:focus-visible .bola__foto::after{ border-color:var(--gold); }

.bola__nome{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink);
  line-height:1.35;
  transition:color .25s;
}
.bola a:hover .bola__nome,
.bola a:focus-visible .bola__nome{ color:var(--gold); }

/* Podologia ainda não tem foto: fica marcada, não quebrada */
.bola__estatico{ cursor:default; }
.bola__foto--vazia{
  background:
    repeating-linear-gradient(45deg,
      var(--bg-alt) 0 10px, #EAE3D8 10px 20px);
  border:1px dashed var(--line);
}
.bola__foto--vazia::before{
  content:"foto pendente";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:var(--sans);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

@media (prefers-reduced-motion:reduce){
  .bola__foto{ transition:none; }
  .bola a:hover .bola__foto{ transform:none; }
}

/* ============================================================
   SEUS CABELOS — carrossel + tabela de preços
   ============================================================ */
/* ============================================================
   SEÇÃO DE SERVIÇO — molde reaproveitado por todos os serviços
   (cabelos, cílios, estética...). Carrossel sangrando à esquerda,
   preços em duas colunas à direita, tudo na altura do carrossel.
   As seções alternam entre escura (padrão) e clara (.servico--claro).
   ============================================================ */
.servico{
  --h-carrossel:520px;
  padding-block:0;
  background-color:#141110;
  /* Ruído fino gerado em SVG, não um tile de imagem. O tile anterior
     vinha com vinheta — topo mais claro que a base — e cada repetição
     abria uma linha visível de cinza claro contra cinza escuro.      */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color:#D9D1C6;
  overflow:hidden;
}

/* variante alta: pra serviços com muitos preços (unhas tem 20). Não dá
   pra espremer tudo na altura padrão sem as linhas ficarem ilegíveis,
   então o carrossel é que cresce junto.                              */
/* Variante densa: pra serviços com muitos preços (unhas tem 20). Em
   vez de esticar a seção, aperta a tipografia — assim ela fica quase
   na altura das outras (560 contra 520) em vez de destoar com 690.  */
.servico--alta{ --h-carrossel:580px; }
.servico--alta .servico__tabela{ gap:0 30px; }
.servico--alta .servico__intro{ margin-bottom:14px; }
.servico--alta .servico__titulo{ margin-bottom:6px; }
.servico--alta .preco{ padding:3px 0; }
.servico--alta .preco__nome,
.servico--alta .preco__valor{ font-size:12px; }
.servico--alta .servico__grupo{ font-size:10px; margin:11px 0 4px; }
.servico--alta .servico__acao{ padding-top:12px; }

/* variante clara: só as cores mudam, a estrutura é a mesma */
.servico--claro{
  background-color:var(--bg);
  background-image:none;
  color:var(--muted);
}
.servico--claro .servico__titulo{ color:var(--ink); }
.servico--claro .servico__intro{ color:var(--muted); }
.servico--claro .preco__nome{ color:#2A241D; }
.servico--claro .preco__valor{ color:var(--ink); }
.servico--claro .preco{ border-bottom-color:var(--line); }
.servico--claro .preco__pontos{ border-bottom-color:rgba(22,19,15,.28); }
.servico--claro .servico__nota{ color:#8A8073; }
/* sem .wrap: a coluna esquerda encosta na borda da tela. O padding
   da coluna direita é que devolve o alinhamento com as outras seções
   — mesma conta do .wrap (max-width 1180 + 24 de padding).          */
.servico__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  height:var(--h-carrossel);
}
.servico__info{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  padding-left:52px;
  padding-right:max(24px, calc(100% - 566px));   /* 1180/2 - 24 */
}

/* ---------- carrossel ---------- */
.carrossel{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  height:100%;
}
.carrossel__trilha{
  display:flex;
  gap:14px;
  height:100%;
  width:max-content;
  margin:0; padding:0;
  list-style:none;
  animation:carrosselAnda 46s linear infinite;
}
/* slide estreito de propósito: com a foto inteira em 3:4 cabiam menos
   de duas na coluna e o carrossel não lia como carrossel. Assim ficam
   três na tela — uma nítida, uma atravessando o fosco e uma entrando. */
.carrossel__trilha li{ height:100%; flex:0 0 176px; }
.carrossel__trilha img{
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center 30%;   /* mantém o rosto no quadro */
  display:block;
  border-radius:4px;
}
/* a trilha tem a sequência duplicada: andar exatamente -50% devolve a
   trilha ao ponto de partida, então o laço não tem emenda visível.
   O gap da última foto entra na conta, daí o cálculo em vez de -50%. */
@keyframes carrosselAnda{
  from{ transform:translateX(0); }
  to  { transform:translateX(calc(-50% - 7px)); }
}

/* o vidro fosco cobrindo a metade direita. A borda esquerda não é um
   corte seco: um degradê na máscara faz o embaçado começar suave, pra
   não parecer que colaram um retângulo por cima.                     */
.carrossel__fosco{
  position:absolute;
  top:0; right:0; bottom:0;
  width:32%;
  pointer-events:none;
  backdrop-filter:blur(13px) saturate(115%);
  -webkit-backdrop-filter:blur(13px) saturate(115%);
  background:linear-gradient(90deg,
      rgba(20,17,16,.10) 0%,
      rgba(20,17,16,.34) 45%,
      rgba(20,17,16,.52) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
}
/* na seção clara o véu inverte: vidro leitoso em vez de fumê, senão
   ficaria uma faixa escura no meio de uma seção branca               */
.servico--claro .carrossel__fosco{
  background:linear-gradient(90deg,
      rgba(251,250,247,.14) 0%,
      rgba(251,250,247,.40) 45%,
      rgba(251,250,247,.58) 100%);
}

/* sem backdrop-filter o fosco vira só um véu chapado — sem o embaçado,
   mas ainda separando as duas metades                                */
@supports not (backdrop-filter:blur(1px)){
  .carrossel__fosco{
    background:linear-gradient(90deg,
        rgba(20,17,16,0) 0%, rgba(20,17,16,.72) 55%, rgba(20,17,16,.82) 100%);
  }
  .servico--claro .carrossel__fosco{
    background:linear-gradient(90deg,
        rgba(251,250,247,0) 0%, rgba(251,250,247,.78) 55%, rgba(251,250,247,.88) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .carrossel__trilha{ animation:none; }
}

/* ---------- variante sem carrossel ----------
   Alguns serviços têm uma imagem só. Ela entra no lugar do carrossel,
   ocupando a mesma coluna e a mesma altura. Como a arte da depilação
   é um logotipo (não uma foto), usa "contain": recortar em cover
   cortaria o desenho.                                               */
.servico__foto{
  position:relative;
  height:100%;
  margin:0;              /* <figure> nasce com margem do navegador */
  overflow:hidden;
  background:var(--bg-alt);
}
.servico--claro .servico__foto{ background:#F6F2EA; }
.servico__foto img{
  position:absolute;     /* preenche a coluna inteira, como o carrossel */
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:12%;
  display:block;
  /* a arte da depilação é um JPG com fundo branco chapado, que abria um
     retângulo branco no meio da coluna bege. O multiply apaga esse
     branco contra o fundo, como já se faz com o vídeo do celular.    */
  mix-blend-mode:multiply;
}
/* quando a imagem for foto de verdade, é só trocar a classe */
.servico__foto--cobre img{ object-fit:cover; padding:0; mix-blend-mode:normal; }
.servico--invertido .servico__foto{ order:2; }

/* ---------- variante espelhada ----------
   Carrossel na direita andando pra direita, informações na esquerda.
   Tudo espelha junto: a ordem das colunas, o padding que realinha o
   texto com o resto do site, o lado do fosco e o sentido da animação.
   O efeito se mantém — as fotos nascem foscas do lado do texto e
   emergem nítidas na borda da tela.                                 */
.servico--invertido .carrossel{ order:2; }
.servico--invertido .servico__info{
  order:1;
  padding-left:max(24px, calc(100% - 566px));
  padding-right:52px;
}
.servico--invertido .carrossel__trilha{
  animation-name:carrosselVolta;
}
@keyframes carrosselVolta{
  from{ transform:translateX(calc(-50% - 7px)); }
  to  { transform:translateX(0); }
}
.servico--invertido .carrossel__fosco{
  right:auto;
  left:0;
  -webkit-mask-image:linear-gradient(270deg, transparent 0%, #000 16%, #000 100%);
          mask-image:linear-gradient(270deg, transparent 0%, #000 16%, #000 100%);
  background:linear-gradient(270deg,
      rgba(20,17,16,.10) 0%,
      rgba(20,17,16,.34) 45%,
      rgba(20,17,16,.52) 100%);
}
.servico--claro.servico--invertido .carrossel__fosco{
  background:linear-gradient(270deg,
      rgba(251,250,247,.14) 0%,
      rgba(251,250,247,.40) 45%,
      rgba(251,250,247,.58) 100%);
}
@supports not (backdrop-filter:blur(1px)){
  .servico--invertido .carrossel__fosco{
    background:linear-gradient(270deg,
        rgba(20,17,16,0) 0%, rgba(20,17,16,.72) 55%, rgba(20,17,16,.82) 100%);
  }
  .servico--claro.servico--invertido .carrossel__fosco{
    background:linear-gradient(270deg,
        rgba(251,250,247,0) 0%, rgba(251,250,247,.78) 55%, rgba(251,250,247,.88) 100%);
  }
}

/* ---------- informações e preços ---------- */
.servico__eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 6px;
}
.servico__titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(28px,3vw,40px);
  line-height:1.06;
  color:#FFFDF9;
  margin:0 0 8px;
}
.servico__intro{
  font-family:var(--body);
  font-size:14px;
  font-weight:300;
  line-height:1.6;
  color:#B8AEA1;
  margin:0 0 20px;
}

/* Duas colunas fechadas, não fluxo automático: a esquerda leva
   Coloração + Cortes e finalização, a direita leva Tratamentos e,
   embaixo, a nota e o botão — que preenchem o vão e fecham o bloco
   num retângulo em vez de deixar um canto vazio.                    */
.servico__tabela{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 38px;
  align-items:stretch;
}
.servico__col{ display:flex; flex-direction:column; min-width:0; }
/* empurra nota + botão pro pé da coluna, alinhando com o fim da outra */
.servico__acao{ margin-top:auto; padding-top:18px; }
.servico__grupo{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:18px 0 6px;
}
.servico__grupo:first-of-type{ margin-top:0; }

.servico__precos{ margin:0; padding:0; list-style:none; }

/* nome à esquerda, valor à direita, pontinhos preenchendo o meio */
.preco{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:0 8px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.preco__nome{
  font-family:var(--body);
  font-size:13px;
  font-weight:400;
  color:#E8E1D7;
}
.preco__pontos{
  border-bottom:1px dotted rgba(255,255,255,.22);
  transform:translateY(-4px);
}
.preco__valor{
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  color:#FFFDF9;
  white-space:nowrap;
}
/* a observação da tinta ocupa a linha inteira, embaixo */
.preco__obs{
  grid-column:1 / -1;
  font-family:var(--body);
  font-size:11.5px;
  font-weight:300;
  font-style:italic;
  color:var(--gold);
  margin-top:3px;
}

.servico__nota{
  font-family:var(--body);
  font-size:11.5px;
  font-weight:300;
  line-height:1.5;
  color:#8E857A;
  margin:0 0 14px;
}
.servico__acao .btn{ padding:13px 28px; }

/* ============================================================
   INSTAGRAM — fecho da página
   ============================================================ */
.insta{
  padding-block:84px;
  background:var(--bg);
  text-align:center;
}
.insta__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.insta__icone{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin-bottom:20px;
  border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
}
.insta__icone svg{ width:26px; height:26px; display:block; }

.insta__eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 8px;
}
.insta__titulo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;
  color:var(--ink);
  margin:0 0 14px;
}
.insta__texto{
  font-family:var(--body);
  font-size:15px;
  font-weight:300;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 30px;
  max-width:42ch;
}
.insta__btn{ padding:15px 34px; }

/* ============================================================
   RODAPÉ

   Porte do componente React de referência pra CSS puro. O que veio de
   lá: o topo arredondado, o brilho radial saindo do meio da borda, o
   fio luminoso cortando o topo, as colunas de links e a entrada com
   desfoque subindo — que no original era Framer Motion e aqui é uma
   transição disparada por IntersectionObserver.
   ============================================================ */
.rodape{
  background:#0E0C0B;
  color:#B8AEA1;
  padding-block:64px 44px;
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:34px 34px 0 0;
  /* clarão suave descendo do topo, no lugar do gradiente radial do original */
  background-image:radial-gradient(38% 130px at 50% 0%,
      rgba(255,255,255,.07), transparent);
}
.rodape__inner{ position:relative; }

/* fio de luz atravessando o topo */
.rodape__fio{
  position:absolute;
  top:-64px;
  left:50%;
  transform:translateX(-50%);
  width:34%;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,
      transparent, rgba(184,147,90,.55), transparent);
  filter:blur(.5px);
}

.rodape__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:48px;
  align-items:start;
}

.rodape__marca img{ height:44px; width:auto; }
.rodape__endereco{
  font-family:var(--body);
  font-size:13px;
  font-weight:300;
  font-style:normal;          /* <address> vem em itálico por padrão */
  line-height:1.75;
  color:#9C9387;
  margin:20px 0 0;
}
.rodape__copy{
  font-family:var(--body);
  font-size:12.5px;
  font-weight:300;
  line-height:1.6;
  color:#7E766B;
  margin:16px 0 0;
  max-width:30ch;
}

.rodape__colunas{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:32px 24px;
}
.rodape__coluna h3{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px;
}
.rodape__coluna ul{ display:grid; gap:9px; }
.rodape__coluna a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--body);
  font-size:13.5px;
  font-weight:300;
  color:#B8AEA1;
  transition:color .3s;
}
.rodape__coluna a:hover{ color:#FFFDF9; }
.rodape__icone{ width:15px; height:15px; flex:0 0 auto; }

/* horários: dia à esquerda, faixa à direita, empilhando quando aperta */
.rodape__horarios li{
  display:flex;
  flex-wrap:wrap;
  gap:2px 10px;
  justify-content:space-between;
  font-family:var(--body);
  font-size:13px;
  font-weight:300;
  color:#B8AEA1;
  line-height:1.5;
}
.rodape__horarios li > span:first-child{ color:#8E857A; }
.rodape__fechado{ color:#6F675D; }

/* Entrada: desfoca e sobe, escalonada por coluna (--atraso).
   O estado escondido só vale quando o JS assumiu (.js-anima no <html>).
   Sem isso, um erro de script ou um observer que não dispara deixaria
   o rodapé invisível pra sempre — o conteúdo tem que aparecer mesmo
   que a animação nunca rode.                                        */
.js-anima [data-anima]{
  opacity:0;
  filter:blur(4px);
  transform:translateY(-8px);
  transition:opacity .8s ease, filter .8s ease, transform .8s ease;
  transition-delay:var(--atraso, 0s);
}
.js-anima [data-anima].aparece{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){
  .js-anima [data-anima]{ opacity:1; filter:none; transform:none; transition:none; }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:minmax(0,1fr) minmax(0,.8fr); row-gap:40px; min-height:560px; }
  .hero__copy{ grid-column:1; }
  .sobre__grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .servico{ --h-carrossel:420px; }
  .servico--alta{ --h-carrossel:440px; }
  .servico__grid{ grid-template-columns:1fr; height:auto; }
  .servico__info{
    height:auto;
    padding:36px 24px 0;
  }
  /* em coluna única o espelhamento não faz sentido: a foto vem sempre
     primeiro, senão metade das seções abriria com um bloco de preços */
  .servico--invertido .carrossel{ order:0; }
  .servico--invertido .servico__info{
    order:0;
    padding:36px 24px 0;
  }
  .carrossel{ height:var(--h-carrossel); }
  .carrossel__trilha li{ flex-basis:150px; }
  .carrossel__fosco{ width:30%; }
  .sobre__copy{ grid-column:1 / -1; order:-1; }
  .sobre__foto img{ height:300px; }
}

@media (max-width:760px){
  .nav, .header .btn{ display:none; }
  .header__inner{ min-height:64px; justify-content:center; }
  .logo img{ height:38px; }

  .hero__inner{
    grid-template-columns:1fr;
    min-height:420px;
    padding-block:104px 44px;  /* 64px de menu sobreposto + respiro */
    text-align:center;
  }
  .hero__copy h1{ font-size:clamp(32px,9vw,44px); }
  .hero__copy{ grid-column:1; }
  .hero__sub{ margin-inline:auto; }

  .sobre{ padding-block:52px; }
  .servicos{ padding-block:52px; }
  .insta{ padding-block:56px; }
  .rodape{ padding-block:48px 36px; border-radius:24px 24px 0 0; }
  .rodape__grid{ grid-template-columns:1fr; gap:36px; }
  .rodape__colunas{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 20px; }
  .rodape__endereco{
  font-family:var(--body);
  font-size:13px;
  font-weight:300;
  font-style:normal;          /* <address> vem em itálico por padrão */
  line-height:1.75;
  color:#9C9387;
  margin:20px 0 0;
}
.rodape__copy{ max-width:none; }
  .servico{ padding-block:0 48px; --h-carrossel:340px; }
  .servico--alta{ --h-carrossel:360px; }
  .servico__tabela{ grid-template-columns:1fr; gap:0; }
  .servico__acao{ margin-top:0; }
  .carrossel__trilha li{ flex-basis:124px; }
  /* no celular a coluna é estreita: o fosco cobriria quase tudo, então
     ele encolhe e vira só um respiro na borda direita              */
  .carrossel__fosco{ width:20%; }
  .servico__info{ text-align:left; }
  .servico__intro, .servico__nota{ max-width:none; }
  .servicos__titulo{ margin-bottom:38px; }
  .servicos__lista{ grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:30px 14px; }
  .bola__foto{ max-width:118px; }
  .bola__nome{ font-size:11px; letter-spacing:.08em; }
  .sobre__grid{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .sobre__copy{ order:0; }
  .sobre__foto img{ height:280px; }
  .sobre__foto::before{ inset:-10px -10px 10px 10px; }
  .eyebrow::after{ margin-inline:auto; }
  /* no celular a coluna some: o degradê vira vertical, de baixo pra cima */
  .hero__veil{
    background:linear-gradient(180deg,
        rgba(7,6,5,.30)  0%,
        rgba(7,6,5,.62) 45%,
        rgba(7,6,5,.90) 100%);
  }
  /* e o texto sobe em vez de vir da esquerda */
  .hero__copy h1,
  .hero__copy .hero__sub,
  .hero__copy .btn{ transform:translateY(22px); }
  @keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
}