/* ==========================================================
   AZKABAN STUDIO — Estrutura inicial (3 heros)
   Mobile-first · sem JavaScript · sem animações
   ========================================================== */


/* ---------- 1. Variáveis ---------- */

:root {
  --color-bg: #000;

  /* Altura de tela: 100vh como alternativa; 100svh onde houver suporte
     (ver bloco @supports abaixo). */
  --screen-h: 100vh;

  /* Espaçamento lateral e vertical que cresce com a tela */
  --gutter: clamp(1rem, 5vw, 2rem);
  --section-pad-y: clamp(2rem, 6vh, 4rem);

  /* Largura máxima do conteúdo futuro */
  --content-max: 72rem;

  /* Imagens de fundo do Hero 1 — uma para cada formato de tela.
     A ativa fica em --hero-principal-image (ver bloco "Hero 1"). */
  --hero-principal-image-vertical: url("assets/img/hero-tatuador.jpg");                 /* 900×1600 — telas em pé */
  --hero-principal-image-wide:     url("WhatsApp Image 2026-10-10 at 21.09.06.jpeg");  /* 1187×1070 — telas deitadas */
  --hero-principal-image: var(--hero-principal-image-vertical);

  /* Identidade — referência: perfil do estúdio no Instagram.
     Sem gradientes, brilhos ou molduras: a cor vem das fotografias. */
  --color-surface: #121212; /* espaço reservado para foto ainda não inserida */
  --grid-gap: 2px;          /* separação mínima entre fotos, como no feed */
  --gallery-max: 58.5rem;   /* largura da grade no computador (~935px) */
}

@supports (height: 100svh) {
  :root {
    --screen-h: 100svh; /* altura visível real no celular, sem as barras do navegador */
  }
}


/* ---------- 2. Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--color-bg);
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--color-bg);
  overflow-x: clip; /* proteção contra rolagem horizontal; a vertical continua natural */
}

img,
picture,
video {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ---------- 3. Componente hero (comum aos três) ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--screen-h); /* min-height: cresce se o conteúdo futuro precisar */
  background-color: var(--color-bg);
}

/* Camada de mídia (fundo) — fica atrás do conteúdo */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Área útil centralizada para o conteúdo futuro */
.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: var(--section-pad-y);
  padding-inline: max(var(--gutter), env(safe-area-inset-left))
                  max(var(--gutter), env(safe-area-inset-right));
}

.hero__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0; /* evita que conteúdo largo force rolagem horizontal */
}


/* ---------- 4. Hero 1 — Principal ---------- */

/* A fotografia aparece INTEIRA (contain), sem nenhum corte.
   As sobras — laterais ou em cima/embaixo, conforme a tela — são
   preenchidas pela mesma foto, ampliada, desfocada e escurecida (::before).
   Nada é inventado: é a própria imagem original nas duas camadas. */
.hero--principal {
  overflow: hidden; /* contém o desfoque, sem rolagem lateral */
}

.hero--principal .hero__media {
  background-image: var(--hero-principal-image);
  background-size: contain;
  background-position: center;
  background-color: transparent;
}

.hero--principal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2; /* atrás da foto nítida */
  background: var(--hero-principal-image) center / cover no-repeat;
  filter: blur(28px) brightness(0.35) saturate(0.8);
  transform: scale(1.15); /* esconde as bordas claras que o desfoque cria */
  pointer-events: none;
}

/* Telas deitadas (computador, notebook, tablet e celular na horizontal):
   usa a foto mais larga, que ocupa muito mais da tela. */
@media (min-aspect-ratio: 1/1) {
  .hero--principal {
    --hero-principal-image: var(--hero-principal-image-wide);
  }
}

/* Conteúdo futuro (textos e botões) ancorado na parte de baixo da tela */
.hero--principal .hero__content {
  justify-content: flex-end;
}

/* Cabeçalho com a logo oficial — no topo, à esquerda.
   Fica sobre a área de desfoque/fundo da foto, longe do tatuador. */
.hero__header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding-top: max(var(--header-pad), env(safe-area-inset-top));
  padding-left: max(var(--header-pad), env(safe-area-inset-left));
  pointer-events: none; /* não bloqueia nada da foto; a logo ainda não é link */
}

/* Logo: arquivo original, sem fundo, sombra ou efeito.
   Só a largura muda; a altura acompanha (proporção 831×296 preservada). */
.brand-logo {
  display: block;
  width: var(--logo-w);
  max-width: calc(100vw - 2 * var(--header-pad));
  height: auto;
}

.hero--principal {
  /* celular ~144px · notebook ~246px · computador grande até 300px */
  --logo-w: clamp(9rem, 18vw, 18.75rem);
  --header-pad: clamp(1rem, 3vw, 2.5rem);
}

/* Celular em pé (até 767px): logo ~35% maior e um pouco mais perto do topo.
   400px de largura → 194px de logo, 12px do topo; lateral mantida. */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero--principal {
    --logo-w: min(62.7vw, 15.675rem); /* +10%: 400px → 251px (antes 228px) */
  }

  .hero__header {
    padding-top: max(0.125rem, env(safe-area-inset-top));
    /* Logo centralizada na largura da tela (viewport) */
    left: 50%;
    transform: translateX(-50%);
    padding-left: 0;
  }
}

/* Telas baixas (celular deitado): logo menor para não pesar na altura */
@media (max-height: 30em) and (orientation: landscape) {
  .hero--principal {
    --logo-w: clamp(7rem, 16vw, 10rem);
  }
}

/* Logo Vick Tattoo: o emblema é quase quadrado (a antiga era larga),
   então só a largura muda para manter o mesmo peso visual no mesmo
   lugar. Posição e alinhamento continuam os do .hero__header. */
.hero--principal .brand-logo--emblema {
  width: clamp(6.4rem, 10.64vw, 10.1rem); /* computador 1366px → ~145px */
  margin-top: 0.125rem;                     /* ~42px do topo */
}

@media (max-width: 47.99em) and (orientation: portrait) {
  .hero--principal .brand-logo--emblema {
    width: min(31.9vw, 8.27rem); /* 412px → ~131px · 360px → ~115px */
    margin-top: 0.5rem;         /* respiro do topo: ~10px */
  }
}

@media (max-height: 30em) and (orientation: landscape) {
  .hero--principal .brand-logo--emblema {
    width: clamp(4.5rem, 10vw, 6rem);
  }
}

/* Filetes prateados, um de cada lado da logo, na altura do centro dela.
   Prata sólido (#BFC0C4, tom dos detalhes do emblema, com um leve
   brilho metálico no meio) em quase todo o comprimento; só os últimos
   20% da ponta de fora se dissolvem. A logo não muda de tamanho nem de lugar. */
.hero--principal .hero__header {
  display: flex;
  align-items: center;
  --rule-len: max(0.75rem, calc(var(--header-pad) - 1.125rem));
  --rule-gap: 0.625rem;
  --rule-mt: 0.125rem;  /* mesmo respiro do topo que a logo */
  --rule-h: 1.5px;      /* espessura */
}

.hero--principal .hero__header::before,
.hero--principal .hero__header::after {
  content: "";
  flex: none;
  width: var(--rule-len);
  height: var(--rule-h);
  margin-top: var(--rule-mt);
  border-radius: 1px;
}

.hero--principal .hero__header::before {
  margin-right: var(--rule-gap);
  /* computador: o filete esquerdo ocupa a margem, sem empurrar a logo */
  margin-left: calc(-1 * (var(--rule-len) + var(--rule-gap)));
  background: linear-gradient(90deg, rgba(191, 192, 196, 0) 0%, #BFC0C4 20%, #D8D9DC 65%, #BFC0C4 100%);
}

.hero--principal .hero__header::after {
  margin-left: var(--rule-gap);
  background: linear-gradient(270deg, rgba(191, 192, 196, 0) 0%, #BFC0C4 20%, #D8D9DC 65%, #BFC0C4 100%);
}

/* Celular em pé: logo centralizada; filetes simétricos dos dois lados */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero--principal .hero__header {
    --rule-len: clamp(3.5rem, 19.5vw, 5rem); /* 412px → ~80px · 360px → ~70px */
    --rule-gap: clamp(0.625rem, 3vw, 1rem);
    --rule-mt: 0.5rem;
    --rule-h: 2px;
  }

  .hero--principal .hero__header::before {
    margin-left: 0;
  }
}

/* Texto do Hero 1 — bloco no lado direito da foto, abaixo da linha da logo,
   sem cobrir o tatuador. Sem fundo ou cartão: só tipografia. */
.hero--principal .hero__inner {
  max-width: none; /* o bloco alinha à borda direita da tela */
}

.hero--principal .hero__content {
  justify-content: flex-start;
  align-items: flex-end;
}

.hero__text {
  /* Posição ancorada na foto: centro vertical do bloco em --hero-text-y,
     encostado à direita com margem --hero-text-right. */
  position: absolute;
  top: var(--hero-text-y);
  right: var(--hero-text-right);
  transform: translateY(-50%);
  max-width: var(--hero-text-max);
  text-align: center;
  color: var(--hero-text-color);
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  /* sombra difusa só para leitura sobre áreas claras da foto */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.45);
}

.hero__title {
  margin: 0;
  font-size: var(--hero-title-size);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-wrap: balance;
  /* marfim acinzentado suave: sobre a luz amarelada da parede,
     aparenta o mesmo tom de "Goiânia — GO" sobre o fundo escuro */
  color: #E8E5DD;
}

.hero__subtitle {
  margin: var(--hero-text-gap) 0 0;
  font-size: var(--hero-subtitle-size);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #DDDDD9; /* cinza-marfim suave: aparenta o tom do endereço */
  opacity: 1;     /* exibe o tom exato, sem transparência sobre a foto */
}

.hero__subtitle span {
  display: block; /* "Sofisticada" / "artística e atemporal." em duas linhas */
}

/* Título + subtítulo um pouco mais para baixo (só desloca o bloco) */
.hero--principal .hero__text {
  margin-top: 1.5rem;
}

@media (max-width: 47.99em) and (orientation: portrait) {
  .hero--principal .hero__text {
    margin-top: calc(0.03 * var(--photo-h)); /* 412×780 → ~23px */
  }
}

@media (max-height: 30em) and (orientation: landscape) {
  .hero--principal .hero__text {
    margin-top: 0.75rem;
  }
}

/* Botão "Solicitar orçamento" (Hero 1) — prata da logo e preto profundo,
   centralizado na base da foto, sobre o estofado escuro. */
.hero--principal .hero__orcamento {
  position: absolute;
  left: 50%;
  bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.75rem));
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* altura vem do espaçamento interno: ~36px no computador (antes 48px) */
  padding: 0.65rem 1.75rem 0.65rem calc(1.75rem + 0.16em); /* compensa o espaçamento da última letra */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #111111;
  background: #C2C3C6;
  border: 1px solid #888A8F;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.hero--principal .hero__orcamento:hover {
  background: #D2D3D6;
}

.hero--principal .hero__orcamento:focus-visible {
  outline: 2px solid #C2C3C6;
  outline-offset: 3px;
}

/* Celular em pé: 0,625rem acima do fim da foto, largura confortável */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero--principal .hero__orcamento {
    bottom: max(calc(50% - 0.5 * var(--photo-h) + 0.625rem),
                calc(env(safe-area-inset-bottom) + 0.625rem));
    width: min(58vw, 14.5rem); /* 412px → ~239px · 360px → ~209px */
    padding: 0.64rem 0 0.64rem 0.16em; /* ~35px de altura (antes 46px) */
    font-size: 0.75rem;
  }
}

/* Celular deitado: mais baixo e compacto */
@media (max-height: 30em) and (orientation: landscape) {
  .hero--principal .hero__orcamento {
    bottom: 0.625rem;
    padding: 0.53rem 1.5rem 0.53rem calc(1.5rem + 0.16em); /* ~30px (antes 40px) */
    font-size: 0.6875rem;
  }
}

/* Localização — três linhas: cidade em destaque (ícone verde da marca
   + branco marfim), endereço e complemento em cinza-prata. */
.hero__location {
  /* + 0.371em + 1px: repõe a altura do antigo fio verde, para o bloco
     centralizado (computador/tablet) não mover o título */
  margin-top: calc(var(--hero-location-gap) + 0.371em + 1px);
  /* largura da antiga linha "ATENDIMENTO EM GOIÂNIA · JARDIM GOIÁS":
     mantém a largura do bloco e, com ela, a posição do título */
  min-width: min(21.236em, var(--hero-text-max));
  font-style: normal;
  font-size: var(--hero-location-size);
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--hero-location-color);
}

.hero__location-region,
.hero__location-line {
  display: block;
}

/* Trechos que nunca se partem: se faltar largura, a linha quebra
   só entre eles ("Cecílio," | "2929") */
.hero__location-region > span,
.hero__location-line > span {
  white-space: nowrap;
}

/* Linha 1 — cidade: a informação de maior destaque do bloco */
.hero__location-region {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin-bottom: 0.2em;
  font-size: 1.15em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #F0EBDD; /* branco marfim */
}

/* Ícone de localização: contorno fino no verde da logo */
.hero__location-icon {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: var(--brand-green);
  stroke-width: 1.8;
}

/* Telas deitadas estreitas (< 708px): a antiga linha da região quebrava
   em duas; repõe essa linha extra para o título não se mover. */
@media (max-width: 44.24em) and (orientation: landscape) {
  .hero__location {
    margin-top: calc(var(--hero-location-gap) + 1.601em + 1px);
  }
}

.hero--principal {
  --hero-text-color: #f3efe8; /* branco suave, levemente quente */
  /* Desktop/tablet: região direita, na altura da área principal da foto */
  --hero-text-y: 35%;
  --hero-text-right: max(var(--gutter), env(safe-area-inset-right));
  --hero-text-max: min(42vw, 40rem);
  --hero-title-size: clamp(1.5rem, 2.9vw, 3.25rem);
  --hero-subtitle-size: clamp(1rem, 1.35vw, 1.5rem);
  --hero-text-gap: clamp(0.5rem, 1.4vh, 1rem);

  /* Localização */
  --brand-green: #4fd40c;     /* tirado da faixa de verdes da logo */
  --hero-location-color: #D0D0CC; /* cinza-prata: endereço e complemento */
  --hero-location-size: clamp(0.875rem, 1.1vw, 1.1875rem);
  --hero-location-gap: clamp(1.25rem, 3.2vh, 2.25rem);
}

/* Celular em pé: bloco na região central-direita da foto — entre o fim
   do rosto/luz da parede e o início das mãos (≈44% da altura da foto).
   A foto vertical tem altura = min(tela, largura × 16/9), por isso o
   cálculo acompanha a foto em qualquer celular. */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero--principal {
    --hero-text-y: calc(50% - 0.2 * min(var(--screen-h), 177.78vw));
    --hero-text-right: max(1.75rem, env(safe-area-inset-right));
    --hero-text-max: 36vw;
    /* título 22→24px e complemento 15→16px (em 412px), proporcionais à tela */
    --hero-title-size: clamp(1.375rem, 5.8vw, 1.5rem);
    --hero-subtitle-size: clamp(0.9375rem, 3.88vw, 1rem);
  }

  /* Contraste sutil: o bloco passa pela luz clara da parede */
  .hero__text {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 14px rgba(0, 0, 0, 0.6);
  }

  /* O bloco vira uma coluna à direita: começa no topo da cabeça
     (18% da altura da foto) e vai até o rodapé. Título e complemento
     ficam no alto; a localização desce para a base, sobre o estofado
     escuro, no mesmo eixo direito — longe do tatuador e das mãos. */
  .hero__text {
    top: calc(50% - 0.319 * min(var(--screen-h), 177.78vw));
    /* base do bloco 1rem acima do fim da foto (ou da tela, se a foto
       ocupar a altura toda) — a localização fica dentro da fotografia */
    bottom: max(calc(50% - 0.5 * var(--photo-h) + 1rem),
                calc(env(safe-area-inset-bottom) + 1rem));
    transform: none;
    display: flex;
    flex-direction: column;
  }

  /* ── Título + complemento dentro da área livre à direita da cabeça ──
     Medida na própria foto vertical (900×1600), em qualquer celular:
       • horizontal: dos 63,3% da largura da foto (logo após o cabelo)
         até a borda direita;
       • vertical: dos 18,4% (topo da cabeça) aos 53,4% (antes das mãos).
     --photo-w / --photo-h = tamanho real da foto na tela (contain). */
  .hero--principal {
    --photo-w: min(100vw, calc(var(--screen-h) * 0.5625));
    --photo-h: min(var(--screen-h), 177.78vw);
    --hero-text-right: max(0.75rem, env(safe-area-inset-right));
    /* largura = dos 60% da foto (+0,125rem) até a margem direita.
       As linhas são centralizadas, então só a linha mais longa do
       complemento — que fica abaixo do cabelo — usa a largura toda. */
    --hero-text-max: calc(50vw - 0.1 * var(--photo-w) - 0.875rem);
  }

  /* Complemento opaco: o cinza-prata aparece no tom exato */
  .hero__subtitle {
    opacity: 1;
  }

  .hero__text {
    top: calc(50% - 0.316 * var(--photo-h)); /* topo da área (18,4% da foto) */
    width: var(--hero-text-max);
  }

  /* O conjunto fica no centro vertical da área (35% da altura da foto) */
  .hero__headline {
    height: calc(0.35 * var(--photo-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero__location {
    margin-top: auto;
    /* 18px da borda (bloco 10px mais à direita); em celulares estreitos
       (< ~400px) chega um pouco mais perto da borda para o ícone não
       encostar nos dedos do pé (que terminam a ~61% da largura da foto).
       Nunca passa de 12px da borda (margem do bloco de texto). */
    margin-right: max(0px, calc(clamp(0.25rem,
                        calc(50vw - 0.111 * var(--photo-w) - 8.69em - 1.125rem),
                        1rem) - 0.625rem));
    align-self: flex-end;
    /* coluna estreita: cabe entre o pé do cliente e a borda direita */
    width: max-content;
    min-width: 0;
    max-width: 44vw; /* 400px → 176px: o endereço cabe em uma linha */
    text-align: right;
  }

  /* Cidade e ícone alinhados à direita, como o endereço */
  .hero__location-region {
    justify-content: flex-end;
  }

  /* Degradê escuro discreto no rodapé da foto: dá leitura à localização
     sobre os reflexos claros do plástico, sem caixa nem painel. */
  .hero--principal::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% - 0.5 * var(--photo-h)); /* nasce no fim da foto */
    height: calc(0.2 * var(--photo-h));        /* sobe 20% da foto */
    z-index: -1; /* acima da foto, abaixo dos textos */
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.5) 28%,
      rgba(0, 0, 0, 0.18) 55%,
      rgba(0, 0, 0, 0) 85%);
    pointer-events: none;
  }

  .hero--principal {
    --hero-location-size: 0.8125rem;
  }
}

/* Botão "Solicitar orçamento" — verde da logo, texto quase preto.
   Computador / tablet / celular deitado: canto inferior esquerdo,
   espelhando a logo (mesma margem), sobre a área livre da foto. */
.hero__cta {
  position: absolute;
  z-index: 1;
  left: max(var(--header-pad), env(safe-area-inset-left));
  bottom: max(var(--header-pad), env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem; /* 44px: área de toque confortável */
  padding: 0 1.15em 0 1em;
  border-radius: 6px;
  background-color: #79D638;
  color: #10110F;
  /* sem serifa, a fonte nativa do aparelho: letras nítidas e firmes */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--cta-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); /* só destaca do fundo */
  transition: background-color 0.2s ease;
}

.hero__cta:hover {
  background-color: #86E047; /* verde um tom mais claro */
}

.hero__cta:focus-visible {
  outline: 2px solid #F0EBDD;
  outline-offset: 3px;
}

/* Ícone de mensagem: contorno fino, na cor do texto */
.hero__cta-icon {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.hero--principal {
  --cta-size: clamp(0.875rem, 1vw, 1rem);
}

/* Celular em pé: lado esquerdo da foto, na altura de "Goiânia — GO"
   (equilíbrio com a localização, à direita): sobre a parte escura do
   tatuador, à esquerda dos dedos do pé — longe do rosto, das mãos,
   da máquina e das tatuagens. Texto em uma linha. */
@media (max-width: 47.99em) and (orientation: portrait) {
  .hero__cta {
    left: calc(50% - 0.475 * var(--photo-w)); /* 2,5% da largura da foto */
    /* texto do botão na mesma linha de "Av. Dep. Jamel Cecílio, 2929":
       base da localização (mesma conta do .hero__text) menos 3,98×
       o tamanho da localização, mais meia altura do botão
       (compensa o translateY(-50%)) */
    top: calc(100% - max(calc(50% - 0.5 * var(--photo-h) + 1rem),
                         calc(env(safe-area-inset-bottom) + 1rem))
              - 3.98 * var(--hero-location-size)
              + 0.5 * min(2.625rem, calc(0.068 * var(--photo-h))));
    bottom: auto;
    transform: translateY(-50%);
    /* 42px; só encolhe em celulares muito pequenos (320px), onde a
       área livre da foto é mais baixa */
    min-height: min(2.625rem, calc(0.068 * var(--photo-h)));
    padding: 0 1em 0 0.85em;
  }

  .hero--principal {
    --cta-size: min(0.8125rem, calc(0.0203 * var(--photo-h))); /* 13px */
  }
}

/* Celulares muito estreitos (< 360px): o endereço quebra em duas linhas
   e a altura de "Goiânia — GO" encostaria o botão nos dedos do pé;
   o botão fica na posição anterior, sobre a manga escura (79,5% da foto). */
@media (max-width: 22.49em) and (orientation: portrait) {
  .hero__cta {
    top: calc(50% + 0.295 * var(--photo-h));
  }
}


/* ---------- 5. Hero 2 — Portfólio ---------- */

/* Fundo preto cinematográfico, com profundidade em carvão:
   1. topo: continua o tom escuro do fim do Hero 1 e se dissolve no preto
      (transição suave, sem linha de corte);
   2. luz difusa de carvão atrás do título, com um toque verde quase
      imperceptível (o "ponto de luz" da marca);
   3. leve claridade de carvão na base, para o fundo não ficar chapado.
   As fotos ficam por cima de tudo e não recebem nenhum filtro. */
.hero--destaque {
  --pf-black: #080908;
  --pf-charcoal: #171816;
  --pf-green: #C2C3C6;
  --pf-ivory: #F0EBDD;
  --pf-silver: #D0D0CC;
  --pf-seam: #151513; /* tom da borda inferior do Hero 1 no celular */
  background-color: var(--pf-black);
  background-image:
    linear-gradient(to bottom, var(--pf-seam) 0, rgba(8, 9, 8, 0) clamp(5rem, 14vh, 9rem)),
    radial-gradient(ellipse 60% 26% at 50% 11%, rgba(194, 195, 198, 0.05), transparent 70%),
    radial-gradient(ellipse 120% 45% at 50% 9%, var(--pf-charcoal), transparent 75%),
    radial-gradient(ellipse 100% 35% at 50% 100%, rgba(23, 24, 22, 0.8), transparent 80%);
}

/* Telas deitadas: o Hero 1 termina mais escuro; a emenda acompanha */
@media (min-aspect-ratio: 1/1) {
  .hero--destaque {
    --pf-seam: #0D0C0A;
  }
}

/* Granulação de filme quase invisível: evita "degraus" nos degradês
   escuros e dá textura de fotografia, sem aparecer como padrão */
.hero--destaque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.045;
}

.hero--destaque .hero__content {
  justify-content: flex-start; /* título na parte superior do Hero 2 */
}

/* Hero 2: metade do espaço superior padrão — título mais perto do topo */
.hero--destaque .hero__inner {
  padding-top: calc(var(--section-pad-y) * 0.5);
}

/* Peso 300 (light) da mesma Cormorant Garamond, só para o título do
   Hero 2. Arquivo próprio, com nome de família separado, para não
   mudar o desenho dos textos do Hero 1 (que usam o peso 500).
   Licença: assets/fonts/OFL.txt */
@font-face {
  font-family: "Cormorant Garamond Hero2";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-300.woff2") format("woff2");
}

/* Título do Hero 2 — mesma identidade tipográfica de "Goiânia — GO"
   (Hero 1): família de .hero__text e branco marfim de
   .hero__location-region; traço fino (300). */
.hero--destaque .destaque__title {
  width: 100%;
  margin: 0;
  /* compensa o espaço que o letter-spacing deixa depois da última
     letra: o desenho fica exatamente no meio da tela */
  padding-left: 0.02em;
  font-family: "Cormorant Garamond Hero2", "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.75rem, 7.3vw, 3.25rem); /* 400px → ~29px */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
  color: #F0EBDD; /* branco marfim, igual a "Goiânia — GO" */
}

/* Uma frase por linha, centralizadas, em qualquer celular/navegador */
.hero--destaque .destaque__title > span {
  display: block;
}

/* ── Carrossel do portfólio ──────────────────────────────────────────
   Celular: 1 foto em destaque (4:5) + a ponta da próxima à direita;
   desliza com o dedo e "encaixa" em cada foto (CSS scroll-snap).
   Computador: 3 fotos por vez + setas discretas. Sem autoplay.
   As fotos não recebem filtro; só são enquadradas no formato 4:5. */
.portfolio {
  --pf-gap: 0.75rem;
  --pf-edge: max(var(--gutter), env(safe-area-inset-left));
  /* largura do card no celular: tela − margens − a "ponta" da próxima */
  --pf-card-w: calc(100vw - 2 * var(--pf-edge) - 2.75rem);
  /* o carrossel vai de borda a borda da tela no celular */
  width: 100vw;
  margin: clamp(1.25rem, 4vh, 2.25rem) calc(50% - 50vw) 0;
}

.portfolio__track {
  display: flex;
  gap: var(--pf-gap);
  margin: 0;
  /* sobra no fim: a última foto também encaixa no começo */
  padding: 0 calc(100vw - var(--pf-edge) - var(--pf-card-w)) 0 var(--pf-edge);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pf-edge);
  scrollbar-width: none; /* sem barra de rolagem visível */
  -webkit-overflow-scrolling: touch;
}

.portfolio__track::-webkit-scrollbar {
  display: none;
}

.portfolio__track:focus-visible {
  outline: 1px solid rgba(240, 235, 221, 0.35);
  outline-offset: 6px;
}

.portfolio__slide {
  flex: 0 0 var(--pf-card-w);
  scroll-snap-align: start;
}

.portfolio__card {
  margin: 0;
}

/* Moldura 4:5: a foto preenche sem deformar (o excesso é cortado,
   centrado na tatuagem pelo --pos de cada foto) */
.portfolio__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
  background-color: #121311;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* fio de luz finíssimo na borda: separa a foto do fundo preto */
.portfolio__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(240, 235, 221, 0.07);
  pointer-events: none;
}

.portfolio__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* Foto horizontal: aparece inteira, sem corte */
.portfolio__frame--inteira img {
  object-fit: contain;
}

/* Legenda: mesma família da localização do Hero 1, em cinza-prata */
.portfolio__caption {
  min-height: 1.5em; /* mantém o alinhamento quando não há legenda */
  margin-top: 0.8rem;
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--pf-silver);
}

/* Setas + posição "01 / 09" */
.portfolio__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(0.5rem, 2vh, 1.25rem);
}

.portfolio__counter {
  min-width: 5.5em;
  margin: 0;
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--pf-silver);
}

.portfolio__current {
  color: var(--pf-green); /* número atual em prata */
}

.portfolio__sep {
  color: rgba(208, 208, 204, 0.5);
}

/* Setas: só aparecem com o script ativo (sem ele, o deslize continua) */
.portfolio__arrow {
  display: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(240, 235, 221, 0.22);
  border-radius: 50%;
  background: transparent;
  color: var(--pf-ivory);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.portfolio.is-ready .portfolio__arrow {
  display: grid;
}

.portfolio__arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.portfolio__arrow:hover:not(:disabled) {
  border-color: var(--pf-green);
  color: var(--pf-green);
}

.portfolio__arrow:focus-visible {
  outline: 2px solid var(--pf-ivory);
  outline-offset: 3px;
}

.portfolio__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Frase de fechamento: itálico da Cormorant (a mesma do complemento do
   Hero 1), em marfim, centralizada abaixo dos controles do carrossel */
.hero--destaque .destaque__phrase {
  margin: clamp(1.25rem, 3.5vh, 2.25rem) 0 0;
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.125rem, 4.6vw, 1.5rem); /* 400px → ~18px */
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
  color: #F0EBDD; /* marfim */
}

/* Botão de conversão do Hero 2 — mesma linguagem do botão do Hero 1
   (verde da logo, texto quase preto, cantos 6px, sombra leve), em
   caixa alta com espaçamento sutil. Centralizado, uma linha só. */
.hero--destaque .destaque__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 3rem; /* 48px: boa área de toque */
  margin: clamp(1rem, 2.5vh, 1.5rem) auto 0;
  padding: 0 1.6em;
  border-radius: 6px;
  background-color: #C2C3C6;
  color: #10110F;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.75rem, 3.3vw, 0.875rem); /* 360px → 12px · computador 14px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease;
}

.hero--destaque .destaque__cta:hover {
  background-color: #D2D3D6; /* prata um tom mais claro, como no Hero 1 */
}

.hero--destaque .destaque__cta:focus-visible {
  outline: 2px solid #F0EBDD;
  outline-offset: 3px;
}

/* Celulares muito estreitos (< 360px): se não couber, quebra em duas
   linhas em vez de cortar o texto */
@media (max-width: 22.49em) {
  .hero--destaque .destaque__cta {
    padding: 0.75em 1.2em;
    white-space: normal;
  }
}

/* Tablet / computador: 3 fotos por vez, dentro da largura do conteúdo */
@media (min-width: 48em) {
  .portfolio {
    --pf-gap: 1.25rem;
    --pf-edge: 0px;
    --pf-card-w: calc((100% - 2 * var(--pf-gap)) / 3);
    width: 100%;
    max-width: 62rem;
    margin-inline: auto;
  }

  .portfolio__track {
    padding: 0;
    scroll-padding-inline: 0;
  }
}


/* ---------- 6. Hero 3 — Galeria ---------- */

/* Fundo: mesmas cores e mesmo tratamento do Hero 2 (preto #080908,
   luz de carvão #171816, toque verde quase imperceptível, emenda
   suave no topo e granulação de filme). Regras próprias do Hero 3,
   sem mexer nas do Hero 2. */
.hero--galeria {
  --h3-seam: #151513; /* mesmo tom de emenda do Hero 2 no celular */
  background-color: #080908;
  background-image:
    linear-gradient(to bottom, var(--h3-seam) 0, rgba(8, 9, 8, 0) clamp(5rem, 14vh, 9rem)),
    radial-gradient(ellipse 60% 26% at 50% 11%, rgba(194, 195, 198, 0.05), transparent 70%),
    radial-gradient(ellipse 120% 45% at 50% 9%, #171816, transparent 75%),
    radial-gradient(ellipse 100% 35% at 50% 100%, rgba(23, 24, 22, 0.8), transparent 80%);
}

/* Telas deitadas: mesma emenda mais escura usada no Hero 2 */
@media (min-aspect-ratio: 1/1) {
  .hero--galeria {
    --h3-seam: #0D0C0A;
  }
}

/* Granulação de filme quase invisível, igual à do Hero 2 */
.hero--galeria::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.045;
}

/* O conteúdo futuro fica centralizado na tela; se passar da altura
   da tela, a seção cresce naturalmente com a rolagem. */
.hero--galeria .hero__content {
  justify-content: center;
}

/* ── Contato e agendamento ───────────────────────────────────────────
   Celular: tudo empilhado e centralizado. Computador: mesmo eixo
   central, com os três contatos lado a lado. Cores: marfim, prata e
   verde só nos ícones (e no botão). Regras só do Hero 3. */
.hero--galeria .contato {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

/* Título: mesma tipografia do título do Hero 2 (Cormorant fina) */
.hero--galeria .contato__title {
  max-width: 18ch;
  margin: 0 auto;
  font-family: "Cormorant Garamond Hero2", "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.75rem, 7.3vw, 3.25rem); /* 400px → ~29px */
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-wrap: balance;
  color: #F0EBDD; /* marfim */
}

/* Texto de apresentação: linhas curtas para leitura confortável */
.hero--galeria .contato__text {
  max-width: 30rem;
  margin: clamp(1rem, 2.5vh, 1.5rem) auto 0;
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.0625rem, 4.3vw, 1.25rem); /* 400px → ~17px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-wrap: balance; /* evita palavra sozinha na última linha */
  color: #D0D0CC; /* prata */
}

/* Botão: mesma linguagem do botão do Hero 2 */
.hero--galeria .contato__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 3rem; /* 48px: boa área de toque */
  margin: clamp(1.5rem, 4vh, 2.25rem) auto 0;
  padding: 0 1.6em;
  border-radius: 6px;
  background-color: #C2C3C6;
  color: #10110F;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.75rem, 3.3vw, 0.875rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease;
}

.hero--galeria .contato__cta:hover {
  background-color: #D2D3D6;
}

.hero--galeria .contato__cta:focus-visible {
  outline: 2px solid #F0EBDD;
  outline-offset: 3px;
}

/* Contatos: separados do botão por um fio finíssimo */
.hero--galeria .contato__info {
  display: grid;
  gap: 1.75rem;
  max-width: 22rem;
  margin: clamp(2.25rem, 6vh, 3.5rem) auto 0;
  padding: clamp(1.75rem, 4vh, 2.5rem) 0 0;
  border-top: 1px solid rgba(240, 235, 221, 0.1);
  list-style: none;
}

.hero--galeria .contato__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.hero--galeria .contato__icon {
  width: 1.3rem;
  height: 1.3rem;
  margin-bottom: 0.15rem;
  fill: none;
  stroke: #C2C3C6; /* prata do botão do Hero 1, discreto */
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hero--galeria .contato__label {
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D0D0CC; /* prata */
}

.hero--galeria .contato__value {
  font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  font-size: clamp(1.0625rem, 4.3vw, 1.1875rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: #F0EBDD; /* marfim */
}

.hero--galeria .contato__link {
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 195, 198, 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero--galeria .contato__link:hover {
  color: #C2C3C6;
  border-color: #C2C3C6;
}

.hero--galeria .contato__link:focus-visible {
  outline: 2px solid #F0EBDD;
  outline-offset: 3px;
}

/* Celulares muito estreitos (< 360px): o botão pode quebrar em duas
   linhas em vez de cortar o texto */
@media (max-width: 22.49em) {
  .hero--galeria .contato__cta {
    padding: 0.75em 1.2em;
    white-space: normal;
  }
}

/* Computador / tablet: título em duas linhas e os três contatos lado a lado */
@media (min-width: 48em) {
  .hero--galeria .contato__title {
    max-width: 24ch;
  }

  .hero--galeria .contato__info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    max-width: 56rem;
  }
}


/* ---------- 7. Responsividade ---------- */

/* Tablets (≥ 768px) */
@media (min-width: 48em) {
  :root {
    --section-pad-y: clamp(3rem, 8vh, 5rem);
    --grid-gap: 4px; /* em telas maiores, a separação acompanha o feed na web */
  }
}

/* Computadores (≥ 1024px) */
@media (min-width: 64em) {
  :root {
    --gutter: 3rem;
  }
}

/* Telas baixas (celular deitado): menos espaço vertical interno */
@media (max-height: 30em) and (orientation: landscape) {
  :root {
    --section-pad-y: 1rem;
    --gallery-max: 28rem; /* grade menor para não virar fotos gigantes na tela baixa */
  }
}