/* ============================================================
   CA Salão de Beleza — folha principal
   Estética: ateliê noturno. Preto de palco, dourado em fios,
   serif editorial. Roxo SOMENTE na seção DoTerra.
   Cores: apenas via var(--token) — ver styles/tokens.css
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
  background: var(--cor-preto);
  color: var(--cor-creme);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

::selection { background: var(--cor-dourado); color: var(--cor-preto); }

/* ---- grão de filme ---- */
.grao {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
}

/* ============================================================
   TIPOGRAFIA COMUM
   ============================================================ */
.kicker {
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--cor-dourado);
  margin-bottom: var(--esp-3);
}

.secao-titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-2xl);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.secao-titulo em {
  font-weight: 400;
  color: var(--cor-dourado);
}

.secao {
  padding: var(--esp-secao) clamp(1.25rem, 5vw, 4rem);
  max-width: var(--largura-max);
  margin-inline: auto;
}
.secao-cabeca { margin-bottom: var(--esp-6); }

/* ============================================================
   HEADER
   ============================================================ */
.cabecalho {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--esp-2) clamp(1.25rem, 5vw, 4rem);
  transition: background var(--transicao), padding var(--transicao);
}
.cabecalho.rolado {
  background: color-mix(in srgb, var(--cor-preto) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cor-creme-12);
}

.marca { display: flex; align-items: baseline; gap: 0.6rem; }
.marca-monograma {
  font-family: var(--fonte-display);
  font-size: 1.6rem; font-weight: 400;
  color: var(--cor-dourado);
  border: 1px solid var(--cor-dourado-35);
  padding: 0.05em 0.35em;
  border-radius: var(--raio-sutil);
}
.marca-extenso {
  font-size: var(--texto-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-creme-60);
}

.navegacao { display: flex; align-items: center; gap: var(--esp-4); }
.navegacao a {
  font-size: var(--texto-sm);
  letter-spacing: 0.06em;
  color: var(--cor-creme-60);
  transition: color var(--transicao);
}
.navegacao a:hover { color: var(--cor-creme); }
.nav-cta {
  color: var(--cor-dourado) !important;
  border: 1px solid var(--cor-dourado-35);
  padding: 0.45em 1.1em;
  border-radius: var(--raio-sutil);
  transition: background var(--transicao), color var(--transicao) !important;
}
.nav-cta:hover { background: var(--cor-dourado); color: var(--cor-preto) !important; }

.menu-botao {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 2.2rem; height: 2.2rem;
  flex-direction: column; justify-content: center; gap: 7px;
}
.menu-botao span {
  display: block; height: 1px; width: 100%;
  background: var(--cor-creme);
  transition: transform var(--transicao), opacity var(--transicao);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(6rem, 14vh, 9rem) clamp(1.25rem, 5vw, 4rem) var(--esp-6);
  overflow: hidden;
}

.hero-foto {
  position: absolute; inset: 0 0 0 38%;
  z-index: -1;
}
.hero-foto img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(35%) brightness(0.55) contrast(1.05);
  animation: hero-zoom 18s ease-out forwards;
}
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--cor-preto) 0%, transparent 55%),
    linear-gradient(0deg, var(--cor-preto) 0%, transparent 35%);
}
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero-conteudo { max-width: 46rem; }

.hero-titulo {
  font-family: var(--fonte-display);
  font-size: var(--texto-hero);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: var(--esp-4);
}
.hero-titulo span { display: block; }
.hero-titulo em { font-weight: 400; color: var(--cor-dourado); }

.hero-lead {
  font-size: var(--texto-lg);
  color: var(--cor-creme-60);
  max-width: 30rem;
  margin-bottom: var(--esp-5);
}

.hero-acoes { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; }

.hero-rodape {
  position: absolute; bottom: var(--esp-3); right: clamp(1.25rem, 5vw, 4rem);
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--cor-creme-30);
  writing-mode: vertical-rl;
}

/* entrada do hero — revelação escalonada no carregamento */
.hero .revelar {
  opacity: 0; transform: translateY(28px);
  animation: subir var(--transicao-lenta) forwards;
}
.hero .kicker      { animation-delay: 0.15s; }
.hero .linha-1     { animation-delay: 0.3s; }
.hero .linha-2     { animation-delay: 0.45s; }
.hero .hero-lead   { animation-delay: 0.65s; }
.hero .hero-acoes  { animation-delay: 0.85s; }
@keyframes subir { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   BOTÕES E LINKS
   ============================================================ */
.botao-dourado {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--cor-dourado);
  color: var(--cor-preto);
  font-size: var(--texto-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1em 1.8em;
  border-radius: var(--raio-sutil);
  transition: background var(--transicao), transform var(--transicao), box-shadow var(--transicao);
}
.botao-dourado:hover {
  background: var(--cor-dourado-claro);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px var(--cor-dourado-12);
}
.botao-dourado svg { transition: transform var(--transicao); }
.botao-dourado:hover svg { transform: translate(2px, -2px); }

.link-sublinhado {
  font-size: var(--texto-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-creme-60);
  padding-bottom: 0.3em;
  background: linear-gradient(var(--cor-dourado), var(--cor-dourado)) no-repeat left bottom / 0% 1px;
  transition: background-size var(--transicao), color var(--transicao);
}
.link-sublinhado:hover { color: var(--cor-creme); background-size: 100% 1px; }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  border-block: 1px solid var(--cor-creme-12);
  overflow: hidden;
  padding: var(--esp-2) 0;
}
.ticker-faixa {
  display: flex; gap: var(--esp-4); width: max-content;
  animation: rolar 36s linear infinite;
}
.ticker-faixa span {
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: var(--texto-xl);
  font-weight: 300;
  color: var(--cor-creme-30);
  white-space: nowrap;
}
.ticker-faixa i { color: var(--cor-dourado); font-style: normal; align-self: center; font-size: var(--texto-sm); }
@keyframes rolar { to { transform: translateX(-50%); } }

/* ============================================================
   SERVIÇOS — lista editorial
   ============================================================ */
.servicos-lista { list-style: none; }

.servico { position: relative; border-top: 1px solid var(--cor-creme-12); }
.servico:last-child { border-bottom: 1px solid var(--cor-creme-12); }

.servico > a {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  grid-template-areas: "num nome seta" "num desc seta";
  align-items: baseline;
  column-gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-1);
  transition: padding var(--transicao);
}
.servico > a:hover { padding-left: var(--esp-3); }

.servico-num {
  grid-area: num;
  font-size: var(--texto-xs);
  letter-spacing: 0.2em;
  color: var(--cor-dourado);
  align-self: start;
  padding-top: 0.5em;
}
.servico-nome {
  grid-area: nome;
  font-family: var(--fonte-display);
  font-size: var(--texto-xl);
  font-weight: 300;
  transition: color var(--transicao);
}
.servico > a:hover .servico-nome { color: var(--cor-dourado); }
.servico-desc { grid-area: desc; font-size: var(--texto-sm); color: var(--cor-creme-30); }
.servico-seta {
  grid-area: seta; align-self: center;
  font-size: var(--texto-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cor-creme-30);
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--transicao), transform var(--transicao), color var(--transicao);
}
.servico > a:hover .servico-seta { opacity: 1; transform: translateX(0); color: var(--cor-dourado); }

/* prévia fotográfica flutuante (somente ponteiro fino) */
.servico-preview {
  display: none;
  position: absolute; right: 8%; top: 50%;
  width: 15rem; height: 10rem; object-fit: cover;
  z-index: 5; pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) rotate(-4deg) scale(0.92);
  transition: opacity var(--transicao), transform var(--transicao);
  border: 1px solid var(--cor-dourado-35);
  filter: grayscale(20%) brightness(0.9);
}
@media (hover: hover) and (min-width: 64rem) {
  .servico-preview { display: block; }
  .servico:hover .servico-preview {
    opacity: 1;
    transform: translateY(-50%) rotate(-2deg) scale(1);
  }
}

/* ============================================================
   DOTERRA — única seção roxa do site
   ============================================================ */
.doterra {
  max-width: none;
  background:
    radial-gradient(ellipse 80% 70% at 75% 20%, var(--cor-roxo) 0%, var(--cor-roxo-profundo) 65%, var(--cor-roxo-profundo) 100%);
  position: relative;
}
.doterra::before, .doterra::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cor-dourado-35), transparent);
}
.doterra::before { top: 0; }
.doterra::after { bottom: 0; }

.doterra-interno {
  max-width: var(--largura-max); margin-inline: auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--esp-6); align-items: center;
}

.kicker-doterra { color: var(--cor-creme); opacity: 0.85; }
.doterra .secao-titulo em { color: var(--cor-dourado); }

.doterra-lead {
  font-size: var(--texto-lg);
  color: var(--cor-creme);
  opacity: 0.82;
  margin: var(--esp-3) 0 var(--esp-4);
}

.doterra-pontos { list-style: none; margin-bottom: var(--esp-5); }
.doterra-pontos li {
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cor-creme-12);
  font-size: var(--texto-sm);
  letter-spacing: 0.04em;
}
.doterra-pontos li::before {
  content: "✦"; color: var(--cor-dourado);
  margin-right: 0.8em; font-size: 0.7em;
}

.doterra-foto { position: relative; }
.doterra-foto img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 1px solid var(--cor-dourado-35);
  filter: brightness(0.85) saturate(0.9);
}
.doterra-foto figcaption {
  margin-top: var(--esp-2);
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--cor-creme-60);
  text-align: right;
}

/* ============================================================
   O ESPAÇO — colagem assimétrica
   ============================================================ */
.espaco-colagem {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--esp-3);
  align-items: start;
}
.colagem-item { overflow: hidden; }
.colagem-item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(25%) brightness(0.8);
  transition: filter 0.6s ease, transform 1.2s ease;
}
.colagem-item:hover img { filter: grayscale(0%) brightness(0.95); transform: scale(1.04); }

.colagem-a { grid-column: 1 / 8; aspect-ratio: 16 / 10; }
.colagem-b { grid-column: 9 / 13; aspect-ratio: 3 / 4; margin-top: var(--esp-6); }
.colagem-c { grid-column: 5 / 11; aspect-ratio: 16 / 9; margin-top: var(--esp-2); }

.colagem-texto {
  grid-column: 1 / 4; align-self: end;
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: var(--texto-lg);
  font-weight: 300;
  color: var(--cor-creme-60);
  line-height: 1.5;
}

/* ============================================================
   EQUIPE
   ============================================================ */
.equipe-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-4);
}
.profissional figure {
  overflow: hidden; margin-bottom: var(--esp-3);
  border: 1px solid var(--cor-creme-12);
}
.profissional img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: grayscale(100%) brightness(0.8);
  transition: filter 0.7s ease, transform 1.2s ease;
}
.profissional:hover img { filter: grayscale(0%) brightness(0.95); transform: scale(1.03); }
.profissional h3 {
  font-family: var(--fonte-display);
  font-size: var(--texto-lg); font-weight: 400;
}
.profissional p { font-size: var(--texto-sm); color: var(--cor-dourado); letter-spacing: 0.08em; }

/* ============================================================
   DEPOIMENTOS
   ============================================================ */
.depoimentos { text-align: center; position: relative; }
.aspas {
  font-family: var(--fonte-display);
  font-size: 7rem; line-height: 0.5;
  color: var(--cor-dourado);
  display: block; margin-bottom: var(--esp-3);
}
.depoimento-trilho { position: relative; min-height: 11rem; }
.depoimento {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.depoimento.ativo { opacity: 1; transform: translateY(0); pointer-events: auto; }
.depoimento p {
  font-family: var(--fonte-display);
  font-size: var(--texto-2xl);
  font-weight: 300; font-style: italic;
  line-height: 1.3;
  max-width: 46rem; margin-inline: auto;
}
.depoimento cite {
  display: block; margin-top: var(--esp-3);
  font-style: normal;
  font-size: var(--texto-xs);
  letter-spacing: var(--tracking-largo);
  text-transform: uppercase;
  color: var(--cor-creme-30);
}
.depoimento-pontos { display: flex; gap: var(--esp-2); justify-content: center; margin-top: var(--esp-4); }
.ponto {
  width: 2.2rem; height: 2px; border: none; cursor: pointer;
  background: var(--cor-creme-12);
  transition: background var(--transicao);
}
.ponto.ativo, .ponto:hover { background: var(--cor-dourado); }

/* ============================================================
   CONTATO
   ============================================================ */
.contato-interno {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--esp-6); align-items: start;
}
.contato-dados { margin: var(--esp-5) 0; }
.contato-dados > div {
  display: grid; grid-template-columns: 8rem 1fr;
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--cor-creme-12);
}
.contato-dados dt {
  font-size: var(--texto-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cor-dourado);
  padding-top: 0.3em;
}
.contato-dados dd a { border-bottom: 1px solid var(--cor-dourado-35); transition: border-color var(--transicao); }
.contato-dados dd a:hover { border-color: var(--cor-dourado); }

.contato-mapa {
  border: 1px solid var(--cor-creme-12);
  aspect-ratio: 4 / 5;
}
.contato-mapa iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(100%) invert(90%) contrast(0.9);
}

/* ============================================================
   FOOTER
   ============================================================ */
.rodape {
  border-top: 1px solid var(--cor-creme-12);
  background: var(--cor-preto-profundo);
  padding: var(--esp-5) clamp(1.25rem, 5vw, 4rem);
}
.rodape-interno {
  max-width: var(--largura-max); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); flex-wrap: wrap;
}
.rodape-redes { display: flex; gap: var(--esp-3); }
.rodape-redes a {
  font-size: var(--texto-sm); color: var(--cor-creme-60);
  letter-spacing: 0.08em;
  transition: color var(--transicao);
}
.rodape-redes a:hover { color: var(--cor-dourado); }
.rodape-credito { font-size: var(--texto-xs); color: var(--cor-creme-30); }
.rodape-credito a { color: var(--cor-creme-60); }
.rodape-credito a:hover { color: var(--cor-dourado); }

/* ============================================================
   WHATSAPP FLUTUANTE
   ============================================================ */
.wpp-flutuante {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90;
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  background: var(--cor-dourado);
  color: var(--cor-preto);
  border-radius: 50%;
  box-shadow: 0 8px 28px var(--cor-dourado-12);
  transition: transform var(--transicao), background var(--transicao);
}
.wpp-flutuante:hover { transform: scale(1.08); background: var(--cor-dourado-claro); }

/* ============================================================
   REVELAÇÃO NO SCROLL (fora do hero)
   ============================================================ */
main > :not(.hero) .revelar {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
main > :not(.hero) .revelar.visivel { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 64rem) {
  .doterra-interno, .contato-interno { grid-template-columns: 1fr; }
  .doterra-foto { order: -1; max-width: 26rem; }
  .equipe-grade { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
  .colagem-a { grid-column: 1 / 13; }
  .colagem-b { grid-column: 7 / 13; margin-top: var(--esp-3); }
  .colagem-c { grid-column: 1 / 9; }
  .colagem-texto { grid-column: 1 / 7; order: 3; }
  .contato-mapa { aspect-ratio: 16 / 10; }
}

@media (max-width: 48rem) {
  .menu-botao { display: flex; }

  .navegacao {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center;
    background: var(--cor-preto-profundo);
    opacity: 0; pointer-events: none;
    transition: opacity var(--transicao);
  }
  .navegacao a { font-family: var(--fonte-display); font-size: var(--texto-xl); }
  body.menu-aberto .navegacao { opacity: 1; pointer-events: auto; z-index: 95; }
  body.menu-aberto { overflow: hidden; }
  body.menu-aberto .menu-botao { z-index: 96; }
  body.menu-aberto .menu-botao span:first-child { transform: translateY(4px) rotate(45deg); }
  body.menu-aberto .menu-botao span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .hero-foto { inset: 0; }
  .hero-foto::after {
    background: linear-gradient(0deg, var(--cor-preto) 8%, transparent 60%),
                linear-gradient(180deg, var(--cor-preto) 0%, transparent 40%);
  }
  .hero-foto img { filter: grayscale(35%) brightness(0.4); }
  .hero-rodape { display: none; }

  .servico > a {
    grid-template-columns: 2.2rem 1fr;
    grid-template-areas: "num nome" "num desc";
  }
  .servico-seta { display: none; }

  .contato-dados > div { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero .revelar, main > :not(.hero) .revelar { opacity: 1; transform: none; }
}