/* =========================================================
   TURKO BARBERSHOP — LANDING PAGE
   CSS puro moderno — mobile-first tokens, componentes, seções
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Cor */
  --preto:            #0A0806;
  --preto-2:          #14100C;
  --preto-3:          #1C1712;
  --dourado:          #C9A24B;
  --dourado-claro:    #E8C875;
  --dourado-escuro:   #8A6A28;
  --creme:            #F4ECD8;
  --creme-muted:      #B9AF9C;
  --verde-brasil:     #1F5C3F;
  --verde-brasil-claro:#3E8A63;
  --linha:            rgba(201, 162, 75, 0.18);
  --vidro-bg:         rgba(244, 236, 216, 0.03);
  --vidro-borda:      rgba(201, 162, 75, 0.22);
  --sombra:           0 20px 50px -20px rgba(0,0,0,0.7);

  /* Tipografia */
  --fonte-display: 'Oswald', sans-serif;
  --fonte-corpo:   'Inter', sans-serif;
  --fonte-script:  'Kaushan Script', cursive;

  --fs-eyebrow: 0.78rem;
  --fs-h1: clamp(1.9rem, 1.2rem + 3vw, 3.2rem);
  --fs-h2: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
  --fs-body: clamp(0.98rem, 0.92rem + 0.2vw, 1.05rem);
  --fs-small: 0.88rem;

  /* Espaço */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5rem;
  --sp-7: 7rem;

  --raio: 14px;
  --raio-lg: 26px;
  --nav-altura: 76px;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-altura);
}

body {
  background: var(--preto);
  color: var(--creme);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--fonte-display); font-weight: 600; letter-spacing: 0.01em; line-height: 1.15; }

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

section { position: relative; }

:focus-visible {
  outline: 2px solid var(--dourado-claro);
  outline-offset: 3px;
}

/* ---------- 3. UTILITÁRIOS DE TEXTO ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--fonte-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--dourado-escuro);
}

.titulo-secao {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  color: var(--creme);
  max-width: 720px;
}
.titulo-secao .script {
  display: block;
  font-family: var(--fonte-script);
  font-size: 1.25em;
  text-transform: none;
  color: var(--dourado-claro);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 0.15em;
}

.lead {
  color: var(--creme-muted);
  max-width: 560px;
  margin-top: var(--sp-2);
}

.cabecalho-secao {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-5);
}
.cabecalho-secao .eyebrow::before { display: none; }
.cabecalho-secao .lead { text-align: center; }

/* Divisor com tesourinha — motivo recorrente da marca */
.divisor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-block: var(--sp-6);
  color: var(--dourado-escuro);
}
.divisor::before,
.divisor::after {
  content: "";
  height: 1px;
  width: clamp(40px, 12vw, 140px);
  background: linear-gradient(90deg, transparent, var(--linha));
}
.divisor::after { background: linear-gradient(270deg, transparent, var(--linha)); }

/* ---------- 4. BOTÕES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.7em;
  border-radius: 999px;
  font-family: var(--fonte-display);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color .25s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn-primario {
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado) 60%, var(--dourado-escuro));
  color: var(--preto);
  box-shadow: 0 12px 30px -10px rgba(201, 162, 75, 0.55);
}
.btn-primario:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -10px rgba(201, 162, 75, 0.7); }

.btn-fantasma {
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--creme);
}
.btn-fantasma:hover { border-color: var(--dourado); color: var(--dourado-claro); transform: translateY(-3px); }

.btn-escuro {
  background: var(--preto);
  color: var(--dourado-claro);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.6);
}
.btn-escuro:hover { transform: translateY(-3px); }

/* ---------- 5. NAVBAR ---------- */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-altura);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(10, 8, 6, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.navbar.scrolled {
  background: rgba(10, 8, 6, 0.86);
  border-bottom-color: var(--linha);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.navbar-marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.navbar-marca img { height: 52px; width: auto; display: block; }

.navbar-links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--fonte-display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.navbar-links a {
  position: relative;
  color: var(--creme-muted);
  padding-block: 0.4rem;
  transition: color 0.25s ease;
}
.navbar-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--dourado);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.navbar-links a:hover,
.navbar-links a.ativo { color: var(--creme); }
.navbar-links a:hover::after,
.navbar-links a.ativo::after { transform: scaleX(1); }

.navbar-acoes { display: flex; align-items: center; gap: var(--sp-3); }
.navbar-acoes .btn-primario { padding: 0.7em 1.4em; font-size: 0.82rem; }

.navbar-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--creme);
}
.navbar-toggle svg { width: 24px; height: 24px; overflow: visible; }
.linha-menu {
  transform-origin: 12px 12px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.navbar-toggle.aberto .linha-menu-1 { transform: translateY(6px) rotate(45deg); }
.navbar-toggle.aberto .linha-menu-2 { opacity: 0; }
.navbar-toggle.aberto .linha-menu-3 { transform: translateY(-6px) rotate(-45deg); }

body.menu-aberto { overflow: hidden; }

@media (max-width: 900px) {
  .navbar-links { display: none; }
  .navbar-toggle { display: flex; }

  .menu-mobile {
    position: fixed;
    inset: var(--nav-altura) 0 0 0;
    background: rgba(10, 8, 6, 0.9);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-top: 1px solid var(--linha);
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-3) var(--sp-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--fonte-display);
    font-size: 1.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .menu-mobile.aberto { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .menu-mobile a { color: var(--creme); text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
  .menu-mobile a:hover, .menu-mobile a.ativo { color: var(--dourado-claro); }
}
@media (min-width: 901px) { .menu-mobile { display: none; } }

/* ---------- 6. HERO (animação NÃO interativa) ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-altura) + var(--sp-4));
  background:
    radial-gradient(ellipse 60% 50% at 50% 28%, rgba(201,162,75,0.16), transparent 70%),
    var(--preto);
  overflow: hidden;
}

.hero-conteudo {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--sp-5);
}

.hero-conteudo .eyebrow::before { display: none; }

.hero-conteudo h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  max-width: 780px;
  margin-top: -0.5rem;
}
.hero-conteudo h1 .script {
  display: block;
  font-family: var(--fonte-script);
  color: var(--dourado-claro);
  text-transform: none;
  font-size: 0.55em;
  margin-bottom: 0.3rem;
}

.hero-conteudo .lead { text-align: center; margin-inline: auto; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-6);
  color: var(--creme-muted);
  font-family: var(--fonte-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero-scroll-cue svg {
  width: 20px; height: 20px;
  animation: descer 1.8s ease-in-out infinite;
}
@keyframes descer {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* == módulo de animação da marca (HERO — validado, intocado) == */
.modulo-animacao-marca {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem 0.01rem;
  position: relative;
}
.modulo-animacao-marca * { box-sizing: border-box; }

.modulo-animacao-marca .container-imagens {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  z-index: 1;
  /* espaço suficiente para o slogan (top:-22%) não invadir o eyebrow acima */
  margin-top: 150px;
}

/* Estado inicial = exatamente o frame 0% de cada keyframe. A animação só
   é ativada quando o JS adiciona a classe .marca-pronta (todas as imagens
   já carregadas) — assim ela nunca "estoura" pronta antes de rodar. */
.modulo-animacao-marca .imagem-fundo {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  z-index: 10;
  top: 8%;
  opacity: 0;
}
.modulo-animacao-marca.marca-pronta .imagem-fundo { animation: brasao 1s forwards; }
@keyframes brasao { 0% { top: 8%; opacity: 0; } 100% { top: 0; opacity: 1; } }

.modulo-animacao-marca .imagem-topo {
  position: absolute; top: 10%; right: 36%; width: 85%; z-index: 12;
  opacity: 0;
  transform: scale(1.4) rotate(-45deg);
}
.modulo-animacao-marca.marca-pronta .imagem-topo { animation: escrita 1s forwards; }
@keyframes escrita { 0% { right: 36%; opacity: 0; transform: scale(1.4) rotate(-45deg); } 100% { right: 9%; opacity: 1; transform: scale(1) rotate(0); } }

.modulo-animacao-marca .imagem-topo2 {
  position: absolute; top: 49%; right: -36%; width: 80%; z-index: 12;
  opacity: 0;
  transform: scale(1.2) rotate(60deg);
}
.modulo-animacao-marca.marca-pronta .imagem-topo2 { animation: faixa 1s forwards; }
@keyframes faixa { 0% { top: 49%; right: -36%; opacity: 0; transform: scale(1.2) rotate(60deg); } 100% { top: 38.8%; right: 10%; opacity: 1; transform: scale(1) rotate(0); } }

.modulo-animacao-marca .imagem-topo3 {
  position: absolute; top: -8%; left: 16%; width: 80%; z-index: 11;
  opacity: 0;
  transform: scale(1.2) rotate(-270deg);
}
.modulo-animacao-marca.marca-pronta .imagem-topo3 { animation: tesoura 1s forwards; }
@keyframes tesoura { 0% { opacity: 0; transform: scale(1.2) rotate(-270deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

.modulo-animacao-marca .imagem-topo4 {
  position: absolute; top: 20%; right: 10%; width: 92%; z-index: 8;
  opacity: 0;
  transform: scale(0.2);
}
.modulo-animacao-marca.marca-pronta .imagem-topo4 { animation: slogan 1s forwards; }
@keyframes slogan { 0% { top: 20%; opacity: 0; transform: scale(0.2); } 100% { top: -22%; opacity: 1; transform: scale(1); } }

@media (max-width: 768px) {
  .modulo-animacao-marca .container-imagens { width: 92%; margin-top: 110px; }
  .modulo-animacao-marca.marca-pronta .imagem-topo3 { animation-duration: 0.8s; }
}

/* ---------- 7. REVEAL (Intersection Observer) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-esquerda { opacity: 0; transform: translateX(-46px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-esquerda.is-visible { opacity: 1; transform: translateX(0); }

.reveal-direita { opacity: 0; transform: translateX(46px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal-direita.is-visible { opacity: 1; transform: translateX(0); }

.atraso-1 { transition-delay: 0.12s; }
.atraso-2 { transition-delay: 0.24s; }
.atraso-3 { transition-delay: 0.36s; }
.atraso-4 { transition-delay: 0.48s; }

/* ---------- 8. SOBRE ---------- */
.sobre {
  padding-block: var(--sp-6);
  background: var(--preto-2);
}
.sobre .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--sp-6);
  align-items: center;
}

.sobre-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  border: 1px solid rgba(63,138,99,0.4);
  background: rgba(31, 92, 63, 0.14);
  color: var(--verde-brasil-claro);
  font-family: var(--fonte-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: var(--sp-3);
}
.sobre-badge svg { width: 15px; height: 15px; }

.sobre-stats {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.sobre-stats .stat-numero {
  font-family: var(--fonte-display);
  font-size: 2rem;
  color: var(--dourado-claro);
  line-height: 1;
}
.sobre-stats .stat-label {
  font-size: var(--fs-small);
  color: var(--creme-muted);
  margin-top: 0.35rem;
}

.sobre-imagem-wrap {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra);
  aspect-ratio: 3 / 4;
  background: var(--preto-3);
}
.sobre-imagem-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.sobre-imagem-wrap::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,8,6,0.75));
  pointer-events: none;
}
.sobre-imagem-tag {
  position: absolute;
  left: var(--sp-3); bottom: var(--sp-3);
  z-index: 2;
  font-family: var(--fonte-script);
  color: var(--dourado-claro);
  font-size: 1.5rem;
}
.sobre-imagem-moldura {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(244,236,216,0.25);
  border-radius: calc(var(--raio-lg) - 14px);
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 900px) {
  .sobre .container { grid-template-columns: 1fr; gap: var(--sp-5); }
  .sobre-imagem-wrap { max-width: 420px; margin-inline: auto; order: -1; }
}

/* ---------- 9. DIFERENCIAIS ---------- */
.diferenciais { padding-block: var(--sp-6); }
.diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
}
.diferencial-card {
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--raio);
  border: 1px solid var(--vidro-borda);
  background: var(--vidro-bg);
  backdrop-filter: blur(6px);
  text-align: left;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.diferencial-card:hover {
  transform: translateY(-6px);
  border-color: var(--dourado);
  background: rgba(201,162,75,0.06);
}
.diferencial-icone {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,162,75,0.22), rgba(201,162,75,0.04));
  color: var(--dourado-claro);
  margin-bottom: var(--sp-2);
}
.diferencial-icone svg { width: 22px; height: 22px; }
.diferencial-card h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.4rem; }
.diferencial-card p { color: var(--creme-muted); font-size: var(--fs-small); }

@media (max-width: 980px) { .diferenciais-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .diferenciais-grid { grid-template-columns: 1fr; } }

/* ---------- 10. SERVIÇOS (cards com flip 3D) ---------- */
.servicos { padding-block: var(--sp-6); background: var(--preto-2); }

.servicos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}

.servico-card { perspective: 1400px; height: 320px; }
.servico-box {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
}
.servico-card:hover .servico-box,
.servico-card.is-flipped .servico-box { transform: rotateY(180deg); }

.servico-face {
  position: absolute; inset: 0;
  border-radius: var(--raio);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
}

.servico-frente {
  background:
    linear-gradient(160deg, rgba(201,162,75,0.16), transparent 55%),
    linear-gradient(200deg, var(--preto-3), var(--preto));
  border: 1px solid var(--vidro-borda);
  justify-content: space-between;
}
.servico-frente .servico-icone {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,162,75,0.1);
  border: 1px solid var(--linha);
  color: var(--dourado-claro);
}
.servico-frente .servico-icone svg { width: 26px; height: 26px; }
.servico-frente h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: var(--sp-3);
}
.servico-frente .virar-dica {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-small);
  color: var(--creme-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--fonte-display);
}
.servico-frente .virar-dica svg { width: 15px; height: 15px; }

.servico-verso {
  background: linear-gradient(160deg, var(--dourado-claro), var(--dourado) 55%, var(--dourado-escuro));
  color: var(--preto);
  transform: rotateY(180deg);
  justify-content: space-between;
}
.servico-verso h3 { font-size: 1.1rem; text-transform: uppercase; }
.servico-verso p { font-size: var(--fs-small); margin-top: 0.6rem; color: rgba(10,8,6,0.78); }
.servico-verso .servico-preco {
  font-family: var(--fonte-display);
  font-size: 1.9rem;
  margin-top: auto;
}
.servico-verso .servico-preco span { font-size: 0.9rem; opacity: 0.75; }
.servico-verso .btn-escuro { margin-top: var(--sp-2); align-self: flex-start; }

@media (max-width: 980px) { .servicos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .servicos-grid { grid-template-columns: 1fr; } .servico-card { height: 300px; } }

/* ---------- 10b. PROMOÇÕES DA SEMANA ---------- */
.promocoes { padding-block: var(--sp-6); background: var(--preto-2); }

.promocoes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
.promocao-card {
  padding: var(--sp-3);
  border-radius: var(--raio);
  border: 1px solid var(--vidro-borda);
  background: var(--vidro-bg);
  text-align: center;
  transition: transform .3s ease, border-color .3s ease;
}
.promocao-card:hover { transform: translateY(-6px); border-color: var(--dourado); }
.promocao-dia {
  display: inline-block;
  font-family: var(--fonte-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dourado);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.3em 0.8em;
  margin-bottom: var(--sp-2);
}
.promocao-card h3 { font-size: 1rem; text-transform: uppercase; margin-bottom: 0.4rem; }
.promocao-card p { color: var(--creme-muted); font-size: 0.82rem; min-height: 2.6em; }
.promocao-preco {
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  color: var(--dourado-claro);
  margin-top: var(--sp-2);
}
.promocao-preco span { font-size: 0.8rem; opacity: 0.75; }

.promocoes-mensalista {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--raio-lg);
  border: 1px solid var(--vidro-borda);
  background: linear-gradient(120deg, rgba(201,162,75,0.1), transparent 60%), var(--vidro-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.promocoes-mensalista h3 { font-size: 1.3rem; text-transform: uppercase; }

@media (max-width: 980px) { .promocoes-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) {
  .promocoes-grid { grid-template-columns: repeat(2, 1fr); }
  .promocoes-mensalista { flex-direction: column; text-align: center; }
}

/* ---------- 11. CTA BANNER ---------- */
.cta-banner {
  padding-block: var(--sp-5);
  background: linear-gradient(120deg, var(--dourado-claro), var(--dourado) 55%, var(--dourado-escuro));
  color: var(--preto);
}
.cta-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.cta-banner h2 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  max-width: 560px;
}
.cta-banner h2 .script {
  display: block;
  font-family: var(--fonte-script);
  text-transform: none;
  font-size: 1.5em;
  line-height: 1;
  margin-bottom: 0.2rem;
}

/* ---------- 12. DEPOIMENTOS ---------- */
.depoimentos { padding-block: var(--sp-6); }
.depoimentos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.depoimento-card {
  padding: var(--sp-4);
  border-radius: var(--raio);
  background: var(--vidro-bg);
  border: 1px solid var(--vidro-borda);
}
.depoimento-estrelas { display: flex; gap: 0.2rem; color: var(--dourado); margin-bottom: var(--sp-2); }
.depoimento-estrelas svg { width: 16px; height: 16px; }
.depoimento-card p.depoimento-texto { color: var(--creme); font-size: var(--fs-small); line-height: 1.7; }
.depoimento-autor { display: flex; align-items: center; gap: 0.7rem; margin-top: var(--sp-3); }
.depoimento-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado-escuro));
  color: var(--preto);
  font-family: var(--fonte-display);
  font-size: 0.85rem;
}
.depoimento-nome { font-size: var(--fs-small); font-weight: 600; }
.depoimento-bairro { font-size: 0.78rem; color: var(--creme-muted); }

@media (max-width: 900px) { .depoimentos-grid { grid-template-columns: 1fr; } }

/* ---------- 13. HORÁRIO + LOCALIZAÇÃO ---------- */
.infos {
  padding-block: var(--sp-6);
  background: var(--preto-2);
}
.infos .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
.infos-bloco {
  padding: var(--sp-4);
  border-radius: var(--raio);
  border: 1px solid var(--vidro-borda);
  background: var(--vidro-bg);
}
.infos-bloco-titulo {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--fonte-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  color: var(--dourado-claro);
  margin-bottom: var(--sp-3);
}
.infos-bloco-titulo svg { width: 20px; height: 20px; }

.horario-linha {
  display: flex;
  justify-content: space-between;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--linha);
  font-size: var(--fs-small);
}
.horario-linha:last-child { border-bottom: none; }
.horario-linha span:first-child { color: var(--creme-muted); }
.horario-linha span:last-child { font-family: var(--fonte-display); letter-spacing: 0.03em; }

.local-item { display: flex; gap: 0.9rem; margin-bottom: var(--sp-3); }
.local-item svg { width: 20px; height: 20px; color: var(--dourado); flex-shrink: 0; margin-top: 0.15rem; }
.local-item p { font-size: var(--fs-small); color: var(--creme); }
.local-item span { display: block; font-size: 0.78rem; color: var(--creme-muted); margin-top: 0.15rem; }

@media (max-width: 820px) { .infos .container { grid-template-columns: 1fr; } }

/* ---------- 14. SEÇÃO ASSINATURA — animação interativa por scroll ---------- */
.assinatura {
  padding-block: var(--sp-6);
  background: var(--preto);
}
.assinatura .cabecalho-secao { margin-bottom: var(--sp-3); }

/* == módulo de animação por SCROLL (validado, classes isoladas com prefixo si-) == */
.modulo-scroll-marca {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem 0.01rem 2rem;
  position: relative;
  --scroll-progress: 0;
}
.modulo-scroll-marca * { box-sizing: border-box; }

.modulo-scroll-marca .si-container-imagens {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  z-index: 1;
  /* espaço suficiente para o slogan (top:-22%) não invadir o texto lead acima */
  margin-top: 250px;
  container-type: size;
}

.modulo-scroll-marca img {
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll-progress) * -1s);
  will-change: transform, opacity;
}

.modulo-scroll-marca .si-imagem-fundo {
  position: relative; top: 0; width: 100%; height: auto; display: block; z-index: 10;
  animation-name: si-brasao;
}
@keyframes si-brasao {
  0%   { transform: translateY(8cqh); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

.modulo-scroll-marca .si-imagem-topo {
  position: absolute; top: 10%; right: 9%; width: 85%; z-index: 12;
  animation-name: si-escrita;
}
@keyframes si-escrita {
  0%   { opacity: 0; transform: translateX(-27cqw) scale(1.4) rotate(-425deg); }
  100% { opacity: 1; transform: translateX(0)       scale(1)   rotate(0); }
}

.modulo-scroll-marca .si-imagem-topo2 {
  position: absolute; top: 38.8%; right: 10%; width: 80%; z-index: 12;
  animation-name: si-faixa;
}
@keyframes si-faixa {
  0%   { opacity: 0; transform: translate(46cqw, 10.2cqh) scale(1.2) rotate(760deg); }
  100% { opacity: 1; transform: translate(0, 0)            scale(1)   rotate(0); }
}

.modulo-scroll-marca .si-imagem-topo3 {
  position: absolute; top: -8%; left: 16%; width: 80%; z-index: 11;
  animation-name: si-tesoura;
}
@keyframes si-tesoura {
  0%   { opacity: 1; transform: scale(1.2) rotate(-22800deg); }
  100% { opacity: 1; transform: scale(1)   rotate(0); }
}

.modulo-scroll-marca .si-imagem-topo4 {
  position: absolute; top: -22%; right: 10%; width: 92%; z-index: 8;
  animation-name: si-slogan;
}
@keyframes si-slogan {
  0%   { opacity: 0; transform: translateY(42cqh) scale(0.2); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}

@media (max-width: 768px) {
  .modulo-scroll-marca .si-container-imagens { width: 92%; margin-top: 250px; }
}

/* ---------- 15. FOOTER ---------- */
.rodape {
  padding-top: var(--sp-6);
  background: var(--preto-3);
  border-top: 1px solid var(--linha);
}
.rodape-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
}
.rodape-marca {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--fonte-display);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--creme);
  margin-bottom: var(--sp-2);
}
.rodape-marca svg { width: 24px; height: 24px; color: var(--dourado); }
.rodape p.rodape-texto { color: var(--creme-muted); font-size: var(--fs-small); max-width: 320px; }

.rodape-social { display: flex; gap: 0.7rem; margin-top: var(--sp-3); }
.rodape-social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--vidro-borda);
  color: var(--creme-muted);
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.rodape-social a:hover { border-color: var(--dourado); color: var(--dourado-claro); transform: translateY(-3px); }
.rodape-social svg { width: 18px; height: 18px; }

.rodape-titulo {
  font-family: var(--fonte-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--dourado-claro);
  margin-bottom: var(--sp-2);
}
.rodape-links { display: flex; flex-direction: column; gap: 0.65rem; }
.rodape-links a { color: var(--creme-muted); font-size: var(--fs-small); transition: color .25s ease; }
.rodape-links a:hover { color: var(--creme); }

.rodape-contato { display: flex; flex-direction: column; gap: 0.9rem; }
.rodape-contato a, .rodape-contato p {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: var(--fs-small);
  color: var(--creme-muted);
}
.rodape-contato svg { width: 17px; height: 17px; color: var(--dourado); flex-shrink: 0; margin-top: 0.1rem; }
.rodape-contato a:hover { color: var(--creme); }

.rodape-base {
  border-top: 1px solid var(--linha);
  padding-block: var(--sp-3);
  text-align: center;
  font-size: 0.8rem;
  color: var(--creme-muted);
}
.rodape-base strong { color: var(--dourado-claro); font-weight: 600; }

@media (max-width: 820px) {
  .rodape-grid { grid-template-columns: 1fr; gap: var(--sp-4); text-align: center; }
  .rodape-marca { justify-content: center; }
  .rodape p.rodape-texto { margin-inline: auto; }
  .rodape-social { justify-content: center; }
  .rodape-links { align-items: center; }
  .rodape-contato { align-items: center; }
  .rodape-contato a, .rodape-contato p { justify-content: center; text-align: left; }
}

/* ---------- 16. RESPONSIVO GERAL ---------- */
@media (max-width: 620px) {
  :root { --sp-6: 3.5rem; --sp-7: 4.5rem; }
  .cta-banner .container { flex-direction: column; text-align: center; }
  .cta-banner h2 { max-width: none; }
}

/* ---------- 17. MOTION REDUZIDO ---------- */
/* Por decisão do cliente, toda a experiência de animação da TURKO
   (marca no hero, marca por scroll e os reveals de seção) toca sempre,
   para todo mundo, independente da preferência de sistema. Suavizamos
   apenas as transições de hover/UI, que não fazem parte da identidade. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}