/* =========================================================
   Bruno Freitas — Japanese Tattoos
   Paleta tirada das proprias fotos: preto quente, vermilion
   do polvo do logo, ocre do tigre, osso.
   ========================================================= */

:root {
  --ink:        #0a0908;
  --ink-2:      #12100e;
  --ink-3:      #1a1714;
  --bone:       #ece7dd;
  --bone-dim:   #9c948a;
  /* 5.2:1 sobre --ink. Era #6b6459, que dava 3.4:1 e reprovava em 24 lugares
     de texto pequeno (minimo WCAG AA e 4.5:1). */
  --bone-faint: #8a8175;
  --vermilion:  #b7362a;
  --vermilion-h:#d4432f;
  /* Vermelho SO para texto: 5.3:1 sobre --ink.
     --vermilion-h nao serve: como texto da 4.4:1 (reprova), e clarear ele
     estragaria o contraste do branco em cima dele como fundo de botao.
     Sao dois requisitos opostos, entao sao duas variaveis. */
  --vermilion-txt:#e0563f;
  --ochre:      #c08a2e;
  --rule:       rgba(236, 231, 221, 0.13);
  --rule-soft:  rgba(236, 231, 221, 0.07);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Archivo", system-ui, -apple-system, sans-serif;
  --jp:      "Noto Serif JP", serif;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1440px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* saida bem longa, pro card desacelerar por muito tempo antes de parar */
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
  /* Entrada do hero. --ease-slow nao servia aqui: ele joga 62% da mudanca
     nos primeiros 500ms de uma animacao de 3,6s, entao o inicio parece um
     soco e o resto rasteja. Esta curva distribui a mudanca ao longo do
     tempo — mesma duracao, sensacao muito mais lenta. */
  --ease-soft: cubic-bezier(0.3, 0.55, 0.35, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grao sutil por cima de tudo — tira o aspecto "chapado de template" */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--vermilion); color: var(--bone); }

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

/* ---------- Tipografia ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  /* equilibra as linhas: evita orfa de uma palavra no titulo */
  text-wrap: balance;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}

.h-xl { font-size: clamp(3rem, 9.5vw, 8.5rem); }
.h-lg { font-size: clamp(2.5rem, 6.5vw, 5.5rem); }
.h-md { font-size: clamp(1.9rem, 3.6vw, 3.25rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.65;
  color: #cfc8bd;
}

.muted { color: var(--bone-dim); }

/* Kicker: rotulo pequeno com regua vermelha */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: 1.5rem;
}
.kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--vermilion);
}
.kicker .jp {
  font-family: var(--jp);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--vermilion-txt);
}

/* ---------- Layout ---------- */

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

section { position: relative; }

.section-pad { padding-block: clamp(5rem, 11vw, 10rem); }

.rule-top { border-top: 1px solid var(--rule); }

/* ---------- Botoes ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 2.1rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--vermilion);
  background: var(--vermilion);
  color: #fff;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { background: var(--vermilion-h); border-color: var(--vermilion-h); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--rule);
}
.btn-ghost:hover { background: transparent; border-color: var(--bone); color: var(--bone); }

.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  /* Anima SO background e border-color. Antes animava tambem o padding, e
     o logo animava height: as duas sao propriedades de LAYOUT, recalculadas
     a cada frame durante o scroll. Era a travada do cabecalho. */
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
  /* 0.7rem para o logo maior (3.6rem) nao aumentar a altura do cabecalho:
     o hero cabe exato em 100svh e nao tem folga para ceder */
  padding-block: 0.7rem;
}
/* Sem backdrop-filter: e fixo, largura cheia, e reavaliado a cada frame
   de scroll — fonte classica de travada. Em fundo quase preto um rgba
   opaco e visualmente equivalente. */
.site-header.is-stuck {
  background: rgba(10, 9, 8, 0.97);
  border-bottom-color: var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Selo do Bruno. O original ja vem sobre transparencia com anel branco,
   feito para fundo escuro — nao precisa de tratamento. */
.wordmark { display: block; line-height: 0; flex: 0 0 auto; }
.wordmark img {
  height: 3.6rem;
  width: auto;
  transform-origin: left center;
  /* transform, nao height: roda no compositor e nao dispara layout */
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.wordmark:hover img { opacity: 0.82; }
.site-header.is-stuck .wordmark img { transform: scale(0.84); }

/* texto so para leitor de tela e indexacao */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
.nav a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: 0.35rem;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }

/* Troca de idioma */
.lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.lang a { transition: color 0.3s var(--ease); }
.lang a:hover { color: var(--bone); }
.lang a[aria-current="true"] { color: var(--vermilion-txt); }
.lang span { opacity: 0.35; }

.btn-sm { padding: 0.8rem 1.5rem; font-size: 0.68rem; }

/* Botao hamburguer */
.burger {
  display: none;
  width: 2rem;
  height: 1.25rem;
  position: relative;
}
.burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--bone);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 50%; margin-top: -0.75px; }
.burger i:nth-child(3) { bottom: 0; }
.burger.is-open i:nth-child(1) { transform: translateY(0.61rem) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; }
.burger.is-open i:nth-child(3) { transform: translateY(-0.61rem) rotate(-45deg); }

/* Menu mobile */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }

/* No desktop o menu mobile nunca abre, mas continuava no DOM como elemento
   fixo de 99% da viewport. display:none tira ele da arvore de layout. */
@media (min-width: 1101px) {
  .mobile-nav { display: none; }
}
.mobile-nav a {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  text-transform: uppercase;
  line-height: 1.12;
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--bone);
}
.mobile-nav .m-lang {
  display: flex;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mobile-nav .m-lang a {
  font-family: var(--body);
  /* sem isto herda 800 de .mobile-nav a, peso que o Archivo nao carrega,
     e o navegador fabrica um negrito sintetico borrado */
  font-weight: 600;
  font-size: 0.8rem;
  border: 0;
  padding: 0;
  color: var(--bone-dim);
}
.mobile-nav .m-lang a[aria-current="true"] { color: var(--vermilion-txt); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* .hero-media saiu junto com o hero A. A regra de rolagem abaixo NAO era
   dele — vale para o site inteiro e fica. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}

.hero h1 {
  max-width: 17ch;
  margin-bottom: 1.75rem;
}
.hero h1 .accent { color: var(--vermilion-h); }

.hero .lede { max-width: 48ch; margin-bottom: 2.5rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Faixa vertical com kanji na borda direita */
.hero-jp {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--jp);
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  color: rgba(236, 231, 221, 0.32);
  text-orientation: upright;
}

/* Marcador de scroll */
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.hero-scroll::after {
  content: "";
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(to right, var(--vermilion), transparent);
}

/* ---------- Faixa de credenciais ---------- */

.strip {
  border-block: 1px solid var(--rule);
  background: var(--ink-2);
}
.strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip-item {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  border-right: 1px solid var(--rule-soft);
  text-align: center;
}
.strip-item:last-child { border-right: 0; }
.strip-item .num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1;
  color: var(--bone);
}
.strip-item .num em { font-style: normal; color: var(--vermilion-h); }
.strip-item .lbl {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
  line-height: 1.5;
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.about-figure { position: relative; }
.about-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Moldura deslocada — quebra a simetria de template */
.about-figure::before {
  content: "";
  position: absolute;
  inset: -1.25rem -1.25rem 1.25rem 1.25rem;
  border: 1px solid var(--rule);
  pointer-events: none;
}

.about-body h2 { margin-bottom: 1.75rem; max-width: 16ch; }

/* ---------- Pilares (ex-cards) ---------- */

.pillars { display: grid; gap: 0; }
.pillar {
  display: grid;
  grid-template-columns: auto 1fr 2fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--rule);
}
.pillar:last-child { border-bottom: 1px solid var(--rule); }

.pillar .idx {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--bone-faint);
  padding-top: 0.15rem;
}
.pillar h3 { font-size: clamp(1.3rem, 2.1vw, 1.85rem); }
.pillar p { color: var(--bone-dim); margin: 0; }

.pillar { transition: background 0.4s var(--ease); }
.pillar:hover { background: rgba(236, 231, 221, 0.018); }
.pillar:hover .idx { -webkit-text-stroke-color: var(--vermilion); }

/* ---------- Services ---------- */

.services {
  position: relative;
  background: var(--ink-2);
}
.services-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.services-body h2 { margin-bottom: 1.75rem; max-width: 16ch; }

.services-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.25rem;
}
.tag {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--rule);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* Mosaico de 3 fotos deslocadas */
.services-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.services-mosaic img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.services-mosaic .tall { grid-row: span 2; aspect-ratio: auto; height: 100%; }

/* ---------- The Champ ---------- */

.champ {
  position: relative;
  overflow: hidden;
}
.champ-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.champ-figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 18%;
}
.champ h2 { margin-bottom: 1.75rem; }
.champ .big-quote {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
  color: var(--bone);
}
.champ .big-quote em { font-style: normal; color: var(--vermilion-h); }

/* ---------- Galeria ---------- */

.gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 2 / 3;
  cursor: zoom-in;
}
/* Tres destaques maiores quebram a grade uniforme */

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* so transform: nenhum filter muda aqui, a transicao de filter era morta */
  transition: transform 0.8s var(--ease);
}
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.25);
  transition: opacity 0.5s var(--ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item:hover::after { opacity: 0; }

/* ---------- Lightbox ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(6, 5, 5, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.lb.is-open { opacity: 1; visibility: visible; }
.lb img {
  max-width: min(92vw, 1100px);
  max-height: 86svh;
  object-fit: contain;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  color: var(--bone);
  padding: 1rem;
  line-height: 1;
  transition: color 0.3s var(--ease);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { color: var(--vermilion-h); }
.lb-close { top: 1rem; right: 1.25rem; font-size: 1.6rem; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 2rem; }
.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }
.lb-count {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--bone-faint);
}

/* ---------- Depoimentos ---------- */

.reviews { background: var(--ink-2); overflow: hidden; }

.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.stars { color: var(--ochre); letter-spacing: 0.15em; font-size: 0.95rem; }

.reviews-rail {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.reviews-rail::-webkit-scrollbar { display: none; }

.review {
  flex: 0 0 min(30rem, 82vw);
  scroll-snap-align: start;
  padding: 0 clamp(1.5rem, 3vw, 2.75rem);
  border-left: 1px solid var(--rule);
}
.review:first-child { padding-left: 0; border-left: 0; }

.review .qt {
  font-size: 0.97rem;
  line-height: 1.75;
  color: #cbc4b9;
  margin-bottom: 1.75rem;
  /* limita a 9 linhas pra nao virar parede de texto */
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review .who {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.review .src {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 0.3rem;
}

.rail-nav { display: flex; gap: 0.5rem; }
.rail-btn {
  width: 3rem; height: 3rem;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.rail-btn:hover { border-color: var(--vermilion); color: var(--vermilion-h); }

/* ---------- CTA final ---------- */

.cta {
  position: relative;
  text-align: center;
  overflow: hidden;
}
.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; filter: grayscale(0.4); }
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10,9,8,0.55), var(--ink) 72%);
}
.cta-inner { position: relative; z-index: 1; }
.cta h2 { margin-bottom: 1.5rem; }
.cta .lede { max-width: 46ch; margin-inline: auto; margin-bottom: 2.5rem; }
.cta .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-top: clamp(3.5rem, 7vw, 6rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}
.footer-brand .seal {
  width: 7rem;
  margin-bottom: 1.5rem;
  opacity: 0.92;
}
.footer-brand p { font-size: 0.88rem; color: var(--bone-dim); max-width: 32ch; }

.footer-col h2 {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--bone-faint);
  margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.7rem; }
.footer-col a, .footer-col address {
  font-size: 0.88rem;
  font-style: normal;
  color: var(--bone-dim);
  transition: color 0.3s var(--ease);
  line-height: 1.7;
}
.footer-col a:hover { color: var(--bone); }

.hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--bone-dim);
  padding-block: 0.45rem;
  border-bottom: 1px solid var(--rule-soft);
}
.hours-row:last-child { border-bottom: 0; }
.hours-row .d { color: var(--bone-faint); }
.hours-note {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermilion-txt);
}

.socials { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.socials a {
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.socials a:hover { border-color: var(--vermilion); background: var(--vermilion); }
.socials svg { width: 1rem; height: 1rem; fill: currentColor; }

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  color: var(--bone-faint);
}

/* ---------- Botao flutuante do WhatsApp ---------- */

.wa-float {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 300;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  /* verde oficial da marca WhatsApp */
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 1.6rem; height: 1.6rem; fill: #fff; }

/* ---------- Animacao de entrada ---------- */

/* O estado escondido depende de .js no <html>, posto por um script inline
   no <head>. Sem isso o conteudo sumia de vez quando o JS nao rodava: o CSS
   zerava a opacidade e nao sobrava ninguem para devolver. Como .js so existe
   com JS vivo, sem JS o texto simplesmente aparece. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsivo ---------- */

@media (max-width: 1100px) {
  .nav, .header-actions .lang, .header-actions .btn { display: none; }
  .burger { display: block; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .about-grid, .services-grid, .champ-grid { grid-template-columns: 1fr; }
  .about-figure { order: -1; max-width: 26rem; }
  .champ-figure { max-width: 24rem; }
  .strip-inner { grid-template-columns: 1fr 1fr; }
  .strip-item:nth-child(2) { border-right: 0; }
  .strip-item:nth-child(1), .strip-item:nth-child(2) { border-bottom: 1px solid var(--rule-soft); }
  .pillar { grid-template-columns: auto 1fr; }
  .pillar p { grid-column: 2; }
  .hero-jp, .hero-scroll { display: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}

/* =========================================================
   Paginas internas
   ========================================================= */

/* ---------- Hero das paginas internas ---------- */

.page-hero {
  position: relative;
  padding-top: clamp(9rem, 16vw, 14rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
/* mancha vermelha discreta no canto — evita o topo chapado */
.page-hero::before {
  content: "";
  position: absolute;
  top: -35%;
  right: -10%;
  width: 45rem;
  height: 45rem;
  background: radial-gradient(circle, rgba(183, 54, 42, 0.16), transparent 68%);
  pointer-events: none;
}
.page-hero .wrap { position: relative; }
.page-hero h1 { max-width: 16ch; }

/* ---------- Passos (pagina About) ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.step {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border: 1px solid var(--rule);
  margin-left: -1px;
  margin-top: -1px;
  transition: background 0.4s var(--ease);
}
.step:hover { background: rgba(236, 231, 221, 0.02); }
.step-n {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--vermilion);
  margin-bottom: 1.25rem;
}
.step h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.step p { color: var(--bone-dim); font-size: 0.92rem; margin: 0; }

/* ---------- Galeria: filtros ---------- */

.tattoos-intro { max-width: 60ch; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--rule);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.filter:hover { border-color: var(--bone-faint); color: var(--bone); }
.filter.is-on {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fff;
}
.filter .n {
  font-size: 0.62rem;
  opacity: 0.6;
  letter-spacing: 0.06em;
}

.gallery-item.is-hidden { display: none; }

/* ---------- Aftercare ---------- */

.care-list {
  display: grid;
  gap: 0;
  max-width: 62rem;
}
.care {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
.care:last-child { border-bottom: 1px solid var(--rule); }

.care-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermilion-txt);
  margin-bottom: 0.6rem;
}
.care-head h2 { font-size: clamp(1.25rem, 2vw, 1.7rem); }

.care ul { margin: 0; padding: 0; list-style: none; }
.care li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  color: var(--bone-dim);
  font-size: 0.95rem;
}
.care li:last-child { margin-bottom: 0; }
.care li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--bone-faint);
}

.care-danger .care-tag { color: var(--vermilion-txt); }
.care-danger li::before { background: var(--vermilion); width: 0.75rem; }
.care-danger li { color: #cbc4b9; }

.care-outro {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--rule);
  max-width: 62rem;
}
.care-outro .lede { margin-bottom: 1.75rem; max-width: 56ch; }

/* ---------- Contato ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact-cards { margin-top: 2.5rem; }

.ccard {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--rule);
  margin-top: -1px;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ccard:hover { background: rgba(236, 231, 221, 0.025); border-color: var(--bone-faint); }

.ccard-ico {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  color: var(--vermilion-h);
}
.ccard-ico svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

.ccard-txt { flex: 1 1 auto; display: block; min-width: 0; }
.ccard-txt strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.ccard-txt em {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 0.25rem;
}
.ccard-arrow { color: var(--bone-faint); transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.ccard:hover .ccard-arrow { transform: translateX(4px); color: var(--vermilion-h); }

.contact-side {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--rule);
  background: var(--ink-2);
}
.side-h {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--bone-faint);
  margin-bottom: 1rem;
}
.side-addr {
  font-style: normal;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--bone);
  margin-bottom: 0.9rem;
}
.side-note {
  font-size: 0.85rem;
  color: var(--bone-dim);
  margin-bottom: 1.75rem;
}
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  color: var(--bone-dim);
}
.side-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.5rem;
  height: 1px;
  background: var(--vermilion);
}

/* ---------- Responsivo das paginas internas ---------- */

@media (max-width: 1100px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .care { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .ccard { padding: 1.15rem; gap: 1rem; }
  .ccard-txt strong { font-size: 1rem; }
}

/* =========================================================
   Hero B — fileira de cards em perspectiva
   Conceito inspirado no shot "Exclusive Blackwork Tattoo
   Studio" do Denis Faerman. Fotos, textos e paleta sao nossos.

   Geometria medida na referencia: o card do centro e o menor
   e os das pontas sao ~22% maiores, em largura E altura. Isso
   e escala uniforme, nao arco — junto com um rotateY leve da
   a sensacao de que a fileira curva na direcao de quem olha.

   A animacao e 100% CSS. Nao usa JS de proposito: animacao por
   JS dependia de rAF/IntersectionObserver, que nao disparam em
   aba em segundo plano e deixavam o hero invisivel.
   ========================================================= */

.hero-b {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding-top: clamp(4.5rem, 6vw, 5.75rem);
  padding-bottom: clamp(1rem, 1.8vw, 1.75rem);
  background:
    radial-gradient(58rem 26rem at 6% 40%, rgba(200, 192, 180, 0.075), transparent 68%),
    radial-gradient(48rem 22rem at 94% 46%, rgba(200, 192, 180, 0.06), transparent 68%),
    radial-gradient(64rem 20rem at 38% 56%, rgba(183, 54, 42, 0.055), transparent 70%),
    var(--ink);
}

.hero-b::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 45%, transparent 42%, rgba(6, 5, 5, 0.72) 100%);
  z-index: 4;
}

/* ---------- Atmosfera do hero ---------- */

/* Gradiente ESTATICO no fundo da propria secao.
   Antes eram 3 <span> posicionados com will-change: transform e animacao
   infinita. Medido: as 3 somavam 73% da area da viewport em camadas
   promovidas permanentemente a GPU, recompostas a cada frame para sempre.
   A deriva durava 40-56s — imperceptivel — e custava isso.
   Como background da secao, e pintado uma vez na camada que ja existe:
   zero camada extra, zero animacao, mesmo resultado visual. */

/* ---------- Texto ---------- */

.hero-b-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  margin-bottom: clamp(1rem, 2vw, 1.75rem);
}
.hero-b-inner .kicker { justify-content: center; margin-bottom: 1.5rem; }

.hb-title {
  font-family: "Prata", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--bone);
  margin: 0 auto 1.35rem;
  max-width: 18ch;
}
.hb-title .accent { color: var(--vermilion-h); }

.hb-sub {
  font-size: clamp(0.85rem, 1.05vw, 0.98rem);
  line-height: 1.7;
  color: var(--bone-dim);
  /* largo o bastante pra caber em 2 linhas — 3 linhas roubavam altura dos cards */
  max-width: 58ch;
  margin: 0 auto;
}

/* ---------- Fileira em perspectiva ---------- */

.hb-strip {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Sem perspective no container de proposito. Com perspectiva compartilhada
     a origem fica no centro da fileira, entao a posicao de cada card e
     multiplicada pela escala e as pontas sao arremessadas pra fora: as folgas
     mediram 14 / 36 / 60px crescendo, contra 8 / 14 / 17 da referencia.
     Cada card usa perspective() no proprio transform, com origem no seu
     centro — o trapezio aparece sem deslocar nada. */
  gap: clamp(0.3rem, 0.55vw, 0.7rem);
  width: 100%;
}

.hb-card {
  /* --d  = posicao relativa ao centro (-3 a 3)
     --da = |d|
     --delay = atraso da entrada, vem do gerador

     Todos os cards tem O MESMO tamanho. Quem faz as pontas parecerem
     maiores e a perspectiva: translateZ traz o card para mais perto da
     camera. Isso vem junto com duas coisas que nao se consegue imitando
     com scale ou largura:

       1. o card projeta mais pra fora do centro, abrindo a folga
       2. o rotateY deixa a aresta externa mais alta que a interna —
          o trapezio que da a leitura de 3D

     O tamanho e largura real: 1 + |d| * 0.153 da 1.46 na ponta, que e a
     razao de altura medida na referencia (238 / 163). Largura real faz o
     flex reservar o espaco, entao as folgas ficam parelhas.

     O 3D vem de perspective() + rotateY no proprio card. A aresta externa
     fica mais alta que a interna — o trapezio que se ve na referencia. */
  --base: min(14vw, 15rem, 20.5svh);
  --ry: calc(var(--d) * -11deg);

  flex: 0 0 auto;
  width: calc(var(--base) * (1 + var(--da) * 0.153));
  min-width: 7rem;
  /* 3:4, medido na referencia (razao largura/altura 0.72-0.75).
     Era 2/3 e os cards saiam estreitos demais. 3:4 e mais baixo para a
     mesma largura, o que libera altura para alargar tudo. */
  aspect-ratio: 3 / 4;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
  transform: perspective(760px) rotateY(var(--ry));
  animation: cardIn 0.9s var(--ease-soft) var(--delay, 0ms) both;
}

.hb-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O retrato fica no centro e e o MENOR da fileira — e assim na referencia
   (123px contra 130 do vizinho). Nao leva bump de tamanho nem giro (--d:0). */

/* Surge na propria posicao: sem deslocamento lateral.
   So opacidade, um respiro de escala e o desfoque saindo.
   O scale existe apenas durante a animacao — em repouso volta a 1, senao
   voltaria a sobrepor o vizinho. */
/* Sem blur animado. Tinha filter: blur(16px) -> 0 nos 7 cards; filter
   animado nao e acelerado, forca rasterizar o card inteiro a cada frame.
   opacity e transform ficam no compositor. A sensacao de suavidade vem da
   duracao longa e do easing, nao do desfoque. */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: perspective(760px) rotateY(var(--ry)) scale(0.9);
  }
  to {
    opacity: 1;
    transform: perspective(760px) rotateY(var(--ry)) scale(1);
  }
}

/* ---------- Botoes sobrepostos ---------- */

/* Abaixo da fileira, nao por cima. Antes tinha margin-top negativo e as
   pills cobriam a base dos cards. */
.hb-cta {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: clamp(1.25rem, 2.4vw, 2.25rem);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(236, 231, 221, 0.22);
  background: rgba(18, 16, 14, 0.93);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bone);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pill:hover { transform: translateY(-2px); border-color: var(--bone); }
.pill-solid { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.pill-solid:hover { background: var(--vermilion-h); border-color: var(--vermilion-h); }

/* ---------- Cabecalho e texto do hero: sem entrada ---------- */

/* Nao ha regra aqui de proposito.
   O cabecalho entrava por animacao com 4s de atraso, e o titulo, o texto e
   os botoes vinham numa fila antes dele. Ficava bonito e custava o que o
   site existe para fazer: quem chega para agendar passava 4s sem conseguir
   clicar em nada. Agora cabecalho, titulo, texto e botoes nascem visiveis.

   Se for para reanimar algo aqui um dia, anime as FOTOS. Texto e navegacao
   ficam de fora — o conteudo nao pode depender de animacao para aparecer. */

/* ---------- Acessibilidade ---------- */

@media (prefers-reduced-motion: reduce) {
  .hb-card { animation-duration: 1ms; animation-delay: 0ms; }
}

/* ---------- Tela baixa ---------- */

@media (min-width: 861px) and (max-height: 820px) {
  .hero-b {
    padding-top: clamp(4rem, 4.6vw, 5rem);
    padding-bottom: 0.5rem;
  }
  .hero-b-inner { margin-bottom: 0.6rem; }
  .hb-title { font-size: clamp(1.85rem, 3.9vw, 3rem); margin-bottom: 0.9rem; }
  .hb-sub { font-size: 0.82rem; line-height: 1.55; }
  .hero-b-inner .kicker { margin-bottom: 1rem; }
  /* tela baixa: o texto encolheu, entao o card pode usar mais altura —
     sem isso a fileira nao passa da largura da tela e perde o corte */
  /* Em tela baixa nao cabe card grande E botoes abaixo da dobra ao mesmo
     tempo. Prioridade e o CTA visivel, entao o card cede. */
  .hb-card { --base: min(13vw, 13.5rem, 19.8svh); }
  .hb-cta { margin-top: 1.6rem; }
}

/* ---------- Celular ---------- */

@media (max-width: 860px) {
  /* a perspectiva nao cabe numa tela estreita: vira rolagem lateral */
  .hb-strip {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    perspective: none;
  }
  .hb-strip::-webkit-scrollbar { display: none; }
  .hb-card {
    --ry: 0deg;
    scroll-snap-align: center;
    width: 8.5rem;
  }
  .hb-cta { margin-top: 1.75rem; }
}

/* ---------- Faixa de premios (pagina Sobre) ---------- */

/* As fotos tem orientacoes diferentes (trofeu em pe, placa deitada, recorte
   de jornal), entao altura fixa e largura livre — nao force aspect-ratio. */
.awards-rail {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: 0.5rem;
}
.awards-rail::-webkit-scrollbar { display: none; }

.award {
  flex: 0 0 auto;
  margin: 0;
  height: clamp(13rem, 26vh, 20rem);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: 10px;
  background: var(--ink-3);
  cursor: zoom-in;
}
.award img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity 0.4s var(--ease);
}
.award:hover img { transform: scale(1.05); }

.awards-count {
  margin-top: 1.25rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ---------- CTA depois do carrossel de depoimentos ---------- */

/* Momento de maior conviccao da pagina: a pessoa acabou de ler as avaliacoes.
   Antes daqui ate o fim da pagina nao havia nenhum botao de agendar. */
.rail-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.rail-cta p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--bone-dim);
  max-width: 42ch;
}

@media (max-width: 560px) {
  .rail-cta { flex-direction: column; align-items: stretch; }
  .rail-cta .btn { justify-content: center; }
}

/* ---------- Skip link ---------- */

/* Primeiro elemento focavel da pagina. Fica fora da tela e aparece ao receber
   foco pelo teclado. Sem ele, quem navega por Tab precisa passar por todo o
   cabecalho e o menu antes de chegar ao conteudo. */
.skip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: 400;
  padding: 0.85rem 1.5rem;
  background: var(--vermilion);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* =========================================================
   Formulario de contato
   ========================================================= */

.cta-form {
  max-width: 34rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: left;
}

/* "ou preencha aqui" com regua dos dois lados */
.cta-ou {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.75rem;
  font-size: 0.8rem;
  color: var(--bone-dim);
  text-align: center;
}
.cta-ou::before,
.cta-ou::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}
.cta-ou span { flex: 0 1 auto; }

.contact-form {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.contact-form h2 { margin-bottom: 1.75rem; }

/* ---------- Campos ---------- */

.form-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-campo { margin: 0 0 1.1rem; }

.form-campo label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.form-campo .req { color: var(--vermilion-txt); }

.form-campo input,
.form-campo textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--bone);
  background: rgba(236, 231, 221, 0.035);
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.form-campo textarea { resize: vertical; min-height: 6.5rem; line-height: 1.6; }

.form-campo input::placeholder,
.form-campo textarea::placeholder { color: var(--bone-faint); }

.form-campo input:focus,
.form-campo textarea:focus {
  outline: none;
  border-color: var(--vermilion);
  background: rgba(236, 231, 221, 0.06);
}

/* campo reprovado na validacao — marcado por JS, nao pelo :invalid do
   navegador, que acusaria antes da pessoa terminar de digitar */
.form-campo.erro input,
.form-campo.erro textarea { border-color: var(--vermilion-h); }

/* ---------- Honeypot ----------
   Fora da tela, sem display:none: alguns bots ignoram campo com display none.
   Humano nao ve nem alcanca por Tab (tabindex -1). */
.form-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Envio ---------- */

.form-enviar { margin-top: 0.4rem; }
.form-enviar[disabled] { opacity: 0.55; cursor: progress; }

.form-aviso {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  min-height: 1.2em;
}
.form-aviso.ok { color: #7fbf8a; }
.form-aviso.falhou { color: var(--vermilion-txt); }

@media (max-width: 560px) {
  .form-linha { grid-template-columns: 1fr; gap: 0; }
  .form-enviar { width: 100%; justify-content: center; }
}

/* Botao flutuante em idioma de e-mail: leva para o formulario, nao para o
   WhatsApp. Cor da marca do site, nao o verde do WhatsApp. */
.wa-float.is-mail { background: var(--vermilion); }
.wa-float.is-mail:hover { background: var(--vermilion-h); }

/* Em EN/ES o formulario e a acao principal do CTA, sem botoes acima, entao
   a linha de apoio nao e um "ou" — e uma instrucao. */
.cta-sub {
  margin: 0 0 1.75rem;
  font-size: 0.92rem;
  color: var(--bone-dim);
  text-align: center;
}

/* ---------- Formulario: referencias e privacidade ---------- */

/* Orientacao de como mandar foto de referencia. O formulario nao aceita
   anexo: o Netlify Forms ate suporta arquivo, mas so em envio multipart, e
   o envio aqui e urlencoded por fetch. Trocar isso custaria o envio sem
   recarregar a pagina. Entao a foto vai por e-mail, respondendo o retorno
   do Bruno — que e para onde a conversa ia de qualquer jeito. */
.form-refs {
  margin: 0 0 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--bone-faint);
  border-left: 2px solid var(--rule);
  padding-left: 0.85rem;
}

/* Aviso de privacidade junto do botao, nao numa pagina separada: a duvida
   aparece na hora de apertar enviar, e e ali que ela tem que ser respondida.
   Fechado por padrao para nao competir com os campos. */
.form-privacidade {
  margin-top: 1rem;
  font-size: 0.82rem;
  color: var(--bone-faint);
}
.form-privacidade summary {
  cursor: pointer;
  color: var(--bone-faint);
  text-underline-offset: 3px;
  text-decoration: underline;
}
.form-privacidade summary:hover { color: var(--bone); }
.form-privacidade p {
  margin: 0.6rem 0 0;
  line-height: 1.6;
  max-width: 46ch;
}

/* ---------- Area de toque ---------- */

/* Medido no celular (375px): o hamburguer dava 32x20, os links de idioma
   22x14 e os do rodape 38x15. O minimo da WCAG 2.5.8 e 24x24 CSS px, e
   dedo nao e ponteiro de mouse — errar o alvo no cabecalho e justamente
   onde a pessoa desiste.

   O aumento e so de PADDING: a area clicavel cresce e o desenho continua
   do mesmo tamanho. A margem negativa devolve o espaco ao layout, senao o
   cabecalho e o rodape cresceriam junto. */
.burger {
  padding: 0.75rem;
  margin: -0.75rem;
  box-sizing: content-box;   /* o padding nao pode encolher as 3 barras */
}

.lang a {
  display: inline-block;
  padding: 0.7rem 0.35rem;
  margin: -0.7rem 0;
}

/* Rodape e troca de idioma do menu mobile: mesma logica.
   Os seletores sao .footer-col ul li a e .m-lang a — conferidos no DOM, nao
   chutados pelo nome que a classe "deveria" ter. */
.footer-col ul li a {
  display: inline-block;
  padding: 0.4rem 0;
}

.mobile-nav .m-lang a {
  display: inline-block;
  padding: 0.7rem 0.5rem;
  margin: -0.7rem 0;
}

/* O resumo do aviso de privacidade dava 22px de altura. */
.form-privacidade summary {
  padding: 0.35rem 0;
}

/* Filtros da galeria e setas dos carrosseis ja sao botoes grandes; aqui so
   garante o minimo em telas estreitas. */
@media (max-width: 860px) {
  .filter { min-height: 2.75rem; }
  [data-rail] { min-width: 2.75rem; min-height: 2.75rem; }
}