/* ==========================================================================
   gitoledo.music · sistema visual
   Contrato: site/DESIGN.md. Tokens = camada Base do brandbook (brand/brandbook.md §4.1).
   Dark only. Stardom (H1/H2) + Fraunces (display) + Instrument Sans (corpo/UI). Ver TIPOGRAFIA.md.
   ========================================================================== */

:root {
  --ground:    #170A0C;
  --ground-2:  #200D10;
  --surface:   #2C1216;
  --surface-2: #38171C;
  --line:      #50242A;
  --line-soft: #35181C;
  --shade-rgb: 23 10 12;      /* cor dos véus e degradês sobre foto (= --ground) */

  --ink:   #FAFAF8;
  --ink-2: #E8D5A3;
  --ink-3: #D4B9A7;
  --ink-4: #9E8078;

  --gold:      #C9A84C;
  --gold-dim:  #9A7F35;
  --gold-soft: rgba(201, 168, 76, .14);
  --sepia:     #D4B896;
  --mogno:     #7A4B2A;
  --whatsapp:  #25D366;

  /* botão primário: branco quente com texto vinho (pedido do Alessandro em 05/11/2026) */
  --cta-bg:    #FAFAF8;
  --cta-ink:   #170A0C;
  --cta-hover: #E9E1D6;

  /* paleta "Vinho noturno" escolhida pelo Alessandro em 05/11/2026 (fundos de vinho, champagne e dourado).
     cor de contraponto: bordô veludo (chave D · Salão do brandbook), só como fundo de faixa.
     Nunca em botão, link, título ou texto. Escolhida pelo Alessandro em 13/10 (/_opcoes-paleta.html) */
  --wine:      #5E1A21;
  --wine-deep: #3E1015;
  --wine-glow: rgba(150, 44, 52, .45);

  /* tipografia (site/TIPOGRAFIA.md, opção 1 do Fable + Stardom nos títulos, pedido do Alessandro 13/10)
     Stardom: H1 e H2 · Fraunces: wordmark, H3, lead, frase poética · Instrument Sans: corpo e UI */
  --f-headline: "Stardom", "Fraunces", Georgia, serif;
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-label:   "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-script:  "La Belle Aurore", "Snell Roundhand", "Segoe Script", cursive;   /* só a assinatura */
  --track-wordmark: .16em;
  --track-label: .12em;

  --t-hero:  clamp(2.3rem, 5.8vw, 4.3rem);
  --t-h2:    clamp(1.8rem, 3.7vw, 2.8rem);
  --t-h3:    clamp(1.35rem, 2.2vw, 1.75rem);
  --t-lead:  clamp(1.12rem, 1.5vw, 1.35rem);
  --t-body:  1.0625rem;
  --t-label: .75rem;

  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --sec: clamp(4rem, 9vw, 8rem);
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --measure: 62ch;
  --max: 1200px;

  --radius: 2px;
  --grain: .05;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 4.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--f-label);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (max-width: 899px) {
  body { padding-bottom: 4.5rem; }
}
body.nav-open { overflow: hidden; }

/* grão 35mm, por cima de tudo, sem interferir no clique */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
}

img, picture, video, svg { display: block; max-width: 100%; }
.hero__media picture, .split__media picture, .path picture, .fotos-teaser picture { width: 100%; height: 100%; }
.path picture { position: absolute; inset: 0; }
img { height: auto; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + .5rem); }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.005em;
  text-wrap: balance;
}
/* Stardom tem um peso só (400); para não pesar: champagne em vez de branco, entrelinha aberta */
h1, h2 { font-family: var(--f-headline); font-weight: 400; letter-spacing: .005em; }
h1 { font-size: var(--t-hero); line-height: 1.1; color: var(--h1, var(--ink-2)); }
h2 { font-size: var(--t-h2); line-height: 1.14; color: var(--ink); }
h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.2; }
/* Fraunces: terminais suavizados nos títulos, sem o eixo "torto" (só na frase poética) */
h3, .lead, .wordmark, .proof__list li, .faq__item summary, .formations__table td:first-child,
.ig-band__handle, .path__body h3, .testimonial p { font-variation-settings: "SOFT" 30, "WONK" 0; }

p, li { max-width: var(--measure); }
p { margin: 0 0 1em; }
strong { font-weight: 500; color: var(--ink); }
em { font-style: italic; }
ul, ol { padding-left: 1.2em; margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--gap) 0; }

.lead { font-family: var(--f-display); font-size: var(--t-lead); line-height: 1.4; color: var(--ink-2); }
/* assinatura pessoal: sempre em letra cursiva, como um bilhete dela (texto v2) */
.poetic { font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 1.6rem; line-height: 1.3; color: var(--ink-2); }
.eyebrow {
  font-family: var(--f-label);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.note {
  font-family: var(--f-label);
  font-weight: 400;
  font-size: .8rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink-4);
}
.wordmark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.site-footer .wordmark { color: var(--word-foot, var(--gold)); font-weight: 400; }
@media (max-width: 599px) { .site-header .wordmark { font-size: 1.05rem; letter-spacing: .14em; } }

.skip-link {
  position: absolute;
  left: var(--pad);
  top: -4rem;
  z-index: 10000;
  padding: .6rem 1rem;
  background: var(--gold);
  color: var(--ground);
  font-family: var(--f-label);
  border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { padding-block: var(--sec); position: relative; }
.section--alt { background: var(--ground-2); }
.section--tight { padding-block: calc(var(--sec) * .6); }
.section__head { margin-bottom: calc(var(--gap) * 1.25); }
.section__head h2 { margin-bottom: .4em; }
.section__head .lead { max-width: 48ch; }

.split {
  display: grid;
  gap: var(--gap);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 1.6); }
  .split--reverse > :first-child { order: 2; }
}
.split__media { position: relative; overflow: hidden; border-radius: var(--radius); }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-2x3 { aspect-ratio: 2 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--cta-bg); color: var(--cta-ink); border-color: var(--cta-bg); }
.btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: var(--cta-ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: rgb(250 250 248 / .7); }
.btn--ghost:hover { background: rgb(250 250 248 / .1); color: var(--ink); border-color: var(--ink); }

.btn--sm { min-height: 40px; padding: .6rem 1rem; font-size: .74rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: wait; }

.link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--f-label);
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: .25em;
  cursor: pointer;
}
.link:hover { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease);
  background: linear-gradient(to bottom, rgb(var(--shade-rgb) / .78) 0%, rgb(var(--shade-rgb) / .35) 60%, rgb(var(--shade-rgb) / 0) 100%);
}
.site-header.is-scrolled {
  background: rgb(var(--shade-rgb) / .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line-soft);
}
.site-header .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.site-nav a:not(.btn) {
  font-family: var(--f-label);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: .4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--f-label);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  min-height: 40px;
  padding: .5rem .9rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle[aria-expanded="true"] { color: var(--cta-ink); background: var(--cta-bg); border-color: var(--cta-bg); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .5rem; position: relative; z-index: 102; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 101;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: var(--pad);
    background: rgb(var(--shade-rgb) / .97);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .site-nav a:not(.btn) { font-size: 1rem; letter-spacing: .16em; }
  .site-nav .btn { margin-top: 1rem; width: min(100%, 22rem); }
  /* O blur do cabeçalho rolado vira "containing block" do menu fixo e o
     espreme na altura do cabeçalho (fundo some). Com o menu aberto, sem blur. */
  body.nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   Herói
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: transparent;
  --focus: 50% 35%;
}
@media (min-width: 900px) {
  .hero { min-height: 88vh; }
}
.hero__media {
  /* parallax: a foto fica fixa no fundo e o conteúdo rola por cima */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
  background: var(--ground-2);
}
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus);
  /* sem transform/will-change: em foto vertical grande o Chrome deixava a camada em branco */
}
/* camada desfocada (clonada pelo JS): o blur cresce com a rolagem só mudando a opacidade,
   o que roda no compositor e não pesa no celular */
.hero__media .hero__blur {
  filter: blur(18px) saturate(.9);
  opacity: var(--hero-p, 0);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ground);
  opacity: calc(var(--hero-p, 0) * .45);
  pointer-events: none;
}
html.hero-gone .hero__media { visibility: hidden; }
/* tudo depois do herói é opaco e passa por cima da foto fixa */
:where(main > :not(.hero)) { position: relative; z-index: 1; background-color: var(--ground); }
.site-footer { position: relative; z-index: 1; }
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgb(var(--shade-rgb) / .25) 0%, rgb(var(--shade-rgb) / .1) 35%, rgb(var(--shade-rgb) / .72) 70%, var(--ground) 100%),
    rgb(var(--shade-rgb) / .28);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.hero__content h1 { max-width: 16ch; margin-bottom: .6em; }
.hero__content .lead { max-width: 44ch; margin-bottom: 1.6em; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
}
@media (max-width: 599px) {
  .hero__actions .btn { width: 100%; }
}
.hero--short { min-height: 70svh; }

/* home: foto vertical. No desktop ela fica inteira, centralizada e menor (como no site
   original), e some nas bordas com uma máscara; o texto fica alinhado à esquerda. */
@media (min-width: 900px) {
  .hero--portrait .hero__media img {
    left: 0;
    right: 0;
    margin-inline: auto;
    width: auto;
    max-width: none;
    top: 0;
    bottom: auto;
    height: 94%;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, #000 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 50% 60% at 50% 40%, #000 50%, transparent 100%);
  }
  .hero--portrait .hero__shade {
    background: linear-gradient(to bottom, rgb(var(--shade-rgb) / .15) 0%, rgb(var(--shade-rgb) / 0) 40%, rgb(var(--shade-rgb) / .7) 78%, var(--ground) 100%);
  }
  .hero--portrait { min-height: 100vh; }
}

@media (min-width: 900px) {
  .hero--right .hero__content {
    display: grid;
    grid-template-columns: 1fr minmax(0, 36rem);
  }
  .hero--right .hero__content > * { grid-column: 2; }
  .hero--right .hero__shade {
    background:
      linear-gradient(to left, rgb(var(--shade-rgb) / .88) 0%, rgb(var(--shade-rgb) / .6) 38%, rgb(var(--shade-rgb) / 0) 68%),
      linear-gradient(to bottom, rgb(var(--shade-rgb) / .2) 0%, rgb(var(--shade-rgb) / 0) 40%, rgb(var(--shade-rgb) / .55) 80%, var(--ground) 100%);
  }
}
@media (max-width: 899px) {
  /* no celular a foto ocupa o topo e o texto entra abaixo do rosto */
  .hero--right .hero__media {
    height: 62svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  }
  .hero--right .hero__media img { object-position: var(--focus-mobile, 22% 8%); }
}
@media (min-width: 900px) { .hero--short { min-height: 64vh; } }

/* --------------------------------------------------------------------------
   CTA fixo (celular)
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 90;
  transform: translateY(calc(100% + 2rem));
  transition: transform 240ms var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta .btn { box-shadow: 0 10px 28px rgb(0 0 0 / .4); }

/* --------------------------------------------------------------------------
   Faixa de prova
   -------------------------------------------------------------------------- */
.proof { text-align: center; }
.proof .eyebrow { margin-bottom: 1.25rem; }
.proof__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 0;
  max-width: 60rem;
}
.proof__list li {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--ink);
  font-weight: 400;
  max-width: none;
}
.proof__list li:not(:last-child)::after {
  content: "·";
  color: var(--gold);
  margin: 0 .9em;
}

/* --------------------------------------------------------------------------
   Cartões-caminho (home)
   -------------------------------------------------------------------------- */
.paths {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 700px) { .paths { grid-template-columns: 1fr 1fr; } }
.path {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
@media (min-width: 900px) { .path { aspect-ratio: 3 / 2; } }
.path img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.path:hover img { transform: scale(1.03); }
.path__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: linear-gradient(to top, rgb(var(--shade-rgb) / .9) 0%, rgb(var(--shade-rgb) / .35) 55%, transparent 100%);
}
.path__body h3 { margin-bottom: .3em; }
.path__body p { color: var(--ink-2); margin-bottom: .8em; max-width: 36ch; }
.path__cta {
  font-family: var(--f-label);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.path__cta::after { content: " →"; }
.path:hover .path__cta { color: var(--ink); }


/* faixa bordô (uma por página) */
.section--wine {
  background-color: var(--wine);
  background-image: radial-gradient(120% 90% at 50% 0%, var(--wine-glow, rgba(122, 31, 36, .45)) 0%, transparent 60%),
                    linear-gradient(to bottom, var(--wine) 0%, var(--wine-deep) 100%);
}
:where(main > .section--wine) { background-color: var(--wine); }
.section--wine .proof__caption,
.section--wine .note { color: var(--ink-3); }
.section--wine .logos img { opacity: .9; }

/* logos das casas (substitui a lista de nomes) */
.proof__logos {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 72rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.25rem clamp(1.5rem, 3vw, 2.5rem);
}
.proof__logos > li { flex: 0 1 calc(33.33% - 1.75rem); min-width: 0; }
@media (max-width: 599px) { .proof__logos > li { flex-basis: calc(50% - 1rem); } }
@media (min-width: 1040px) {
  .proof__logos { flex-wrap: nowrap; gap: 2rem; }
  .proof__logos > li { flex: 0 1 auto; }
}
.proof__mark img { object-fit: contain; }
.proof__mark--text { max-width: 8rem; }
.proof__logos li { display: flex; flex-direction: column; align-items: center; gap: .8rem; max-width: none; }
.proof__mark { height: 64px; display: flex; align-items: center; justify-content: center; width: 100%; }
.proof__mark img { width: auto; max-width: 100%; opacity: .92; transition: opacity 200ms var(--ease); }
.proof__logos li:hover .proof__mark img { opacity: 1; }
.proof__mark--text {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: .14em;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
  font-variation-settings: "SOFT" 30, "WONK" 0;
}
.proof__caption {
  font-family: var(--f-label);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Logos de clientes (corporativo)
   -------------------------------------------------------------------------- */
.logos { margin-top: calc(var(--gap) * 1.4); }
.logos img { width: 100%; max-width: 54rem; margin-inline: auto; opacity: .85; }
.logos .note { text-align: center; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Galeria de fotos
   -------------------------------------------------------------------------- */
.gallery { columns: 2; column-gap: var(--gap); }
@media (min-width: 900px) { .gallery { columns: 3; } }
.gallery a {
  display: block;
  break-inside: avoid;
  margin-bottom: var(--gap);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.gallery img { width: 100%; height: auto; transition: opacity 300ms var(--ease), transform 700ms var(--ease); }
.gallery a:hover img { opacity: .9; transform: scale(1.015); }
.gallery a:focus-visible { outline-offset: 2px; }

.fotos-teaser { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--gap) * .6); }
@media (min-width: 900px) { .fotos-teaser { grid-template-columns: repeat(4, 1fr); gap: var(--gap); } }
.fotos-teaser a { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.fotos-teaser img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 30%); transition: transform 700ms var(--ease); }
.fotos-teaser a:hover img { transform: scale(1.03); }
.fotos-teaser__more { margin-top: var(--gap); text-align: center; }

/* --------------------------------------------------------------------------
   Vídeo
   -------------------------------------------------------------------------- */
.video { margin: 0; }
.video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ground-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.video--vertical .video__frame { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.video__frame video { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 0;
  background: var(--cta-bg);
  color: var(--cta-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 10px rgba(232, 213, 163, .16);
  transition: transform 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.video__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 20px;
  border-color: transparent transparent transparent currentColor;
}
.video__play:hover { transform: scale(1.06); background: var(--cta-hover); box-shadow: 0 0 0 14px rgba(232, 213, 163, .22); }
.video.is-playing .video__play { display: none; }
.video figcaption { margin-top: .75rem; }
.video-grid { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .video-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.video--feature { max-width: 56rem; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Momentos
   -------------------------------------------------------------------------- */
.moments {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 900px) {
  .moments { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .moment { padding-inline: var(--gap); }
  .moment:first-child { padding-left: 0; }
  .moment:last-child { padding-right: 0; }
  .moment + .moment { border-left: 1px solid var(--line-soft); }
}
@media (max-width: 899px) {
  .moment + .moment { border-top: 1px solid var(--line-soft); padding-top: var(--gap); }
}
.moment h3 { margin-bottom: .4em; }
.moment__songs {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  font-family: var(--f-label);
  font-weight: 300;
  font-size: .9rem;
  color: var(--ink-3);
}
.moment__songs li { padding: .3rem 0; border-top: 1px solid var(--line-soft); }
.moment__songs li:first-child { border-top: 0; }

/* --------------------------------------------------------------------------
   Formações
   -------------------------------------------------------------------------- */
.formations__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-label);
  font-weight: 300;
  font-size: .95rem;
}
.formations__table th {
  text-align: left;
  font-weight: 400;
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold);
  padding: 0 1rem .9rem 0;
  border-bottom: 1px solid var(--line);
}
.formations__table td {
  padding: 1.1rem 1rem 1.1rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.formations__table td:first-child {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 599px) {
  .formations__table thead { display: none; }
  .formations__table, .formations__table tbody, .formations__table tr, .formations__table td { display: block; width: 100%; }
  .formations__table tr { padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
  .formations__table td { border: 0; padding: .2rem 0; }
  .formations__table td:first-child { white-space: normal; margin-bottom: .3rem; }
  .formations__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--t-label);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--gold);
    margin: .5rem 0 .15rem;
  }
}
.formations .note { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   Para quem organiza (corporativo)
   -------------------------------------------------------------------------- */
.organizers { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .organizers { grid-template-columns: repeat(3, 1fr); } }
.organizers__item h3 { font-size: 1.3rem; margin-bottom: .35em; }
.organizers__item p { font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Depoimentos
   -------------------------------------------------------------------------- */
.testimonials { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } }
.testimonial {
  margin: 0;
  padding: 0 0 0 1.4rem;
  position: relative;
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  left: -.15rem;
  top: -.9rem;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 4rem;
  line-height: 1;
  color: var(--gold);
}
.testimonial p { font-family: var(--f-display); font-style: italic; font-weight: 300; font-size: 1.3rem; line-height: 1.45; color: var(--ink-2); }
.testimonial footer {
  font-family: var(--f-label);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 52rem; }
.faq__item { border-top: 1px solid var(--line-soft); }
.faq__item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex: none;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 200ms var(--ease);
}
.faq__item[open] summary::after { content: "×"; }
.faq__item summary:hover { color: var(--ink-2); }
.faq__item > p, .faq__item > div { padding: 0 0 1.25rem; }

/* --------------------------------------------------------------------------
   Formulário de proposta
   -------------------------------------------------------------------------- */
.proposal-wrap { display: grid; gap: calc(var(--gap) * 1.5); }
@media (min-width: 900px) { .proposal-wrap { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.proposal-aside { padding-top: .5rem; }
.proposal-aside .btn { margin-top: .5rem; }

.proposal { max-width: 34rem; }
.proposal fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.proposal legend, .proposal label {
  display: block;
  font-family: var(--f-label);
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: .04em;
  color: var(--ink-2);
  margin-bottom: .45rem;
}
.proposal legend { padding: 0; margin-bottom: .6rem; }
.proposal__progress { margin-bottom: 1.5rem; }
.field { margin-bottom: 1.25rem; }
.field__help { margin: .35rem 0 0; }
.field__error {
  display: none;
  margin: .4rem 0 0;
  font-family: var(--f-label);
  font-size: .82rem;
  color: var(--sepia);
}
.field__error:not(:empty) { display: block; }

.proposal input[type="text"],
.proposal input[type="tel"],
.proposal input[type="date"],
.proposal input[type="number"],
.proposal input[type="email"],
.proposal select,
.proposal textarea {
  width: 100%;
  min-height: 48px;
  padding: .7rem .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--f-label);
  font-weight: 300;
  font-size: 1rem;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.proposal select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23C9A84C' stroke-width='1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
.proposal input::placeholder { color: var(--ink-4); }
.proposal input:focus, .proposal select:focus, .proposal textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.proposal .is-invalid, .proposal [aria-invalid="true"] { border-color: var(--sepia); }
.proposal input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(.6); }

.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { position: relative; margin: 0; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-label);
  font-weight: 400;
  font-size: .86rem;
  letter-spacing: .03em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.pill input:checked + span { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-ink); }
.pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.pill:hover span { border-color: var(--gold); }

.proposal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
@media (max-width: 599px) { .proposal__actions .btn { width: 100%; } }
.proposal__success {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.proposal__success h3 { margin-bottom: .4em; }
.proposal__success .btn { margin: .5rem .75rem 0 0; }

/* --------------------------------------------------------------------------
   Quem é a Gi
   -------------------------------------------------------------------------- */
.about .split__media { max-width: 30rem; }
.about .poetic { font-size: 1.75rem; margin: 1.25rem 0; }

/* --------------------------------------------------------------------------
   Faixa de CTA final
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lead { max-width: 44ch; margin-inline: auto; }
.cta-band .btn { margin-top: .75rem; }

/* --------------------------------------------------------------------------
   Instagram
   -------------------------------------------------------------------------- */
.nav-ig {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.nav-ig svg { width: 1.15rem; height: 1.15rem; flex: none; }
@media (min-width: 900px) { .nav-ig .nav-ig__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.ig-band { border-top: 1px solid var(--line-soft); }
.ig-band .wrap {
  display: grid;
  gap: 1.25rem 2rem;
  align-items: center;
}
@media (min-width: 900px) { .ig-band .wrap { grid-template-columns: 1fr auto; } }
.ig-band__handle {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.ig-band__handle svg { width: .8em; height: .8em; color: var(--ink-3); flex: none; }
.ig-band__handle:hover { color: var(--ink-2); }
.ig-band p { margin: 0; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ground-2);
  border-top: 1px solid var(--line-soft);
  padding-block: calc(var(--sec) * .6) calc(var(--sec) * .45);
}
.site-footer .wrap { display: grid; gap: 1.25rem; }
.site-footer .wordmark { font-size: 1.15rem; }
.site-footer .poetic { margin: .35rem 0 0; font-size: 1.45rem; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 0;
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  font-family: var(--f-label);
  font-weight: 300;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.site-footer__links li { max-width: none; }
.site-footer__links li + li::before { content: "·"; color: var(--gold); margin: 0 .7em; }
.site-footer__links a { color: var(--ink-2); }
.site-footer__links a:hover { color: var(--gold); }
.site-footer .note { margin: .25rem 0 0; }

/* --------------------------------------------------------------------------
   Movimento (aparição suave)
   -------------------------------------------------------------------------- */
/* Aparição por seção desligada de propósito: um site de 3 páginas não precisa de entrada
   repetida em cada bloco, e a página nunca pode ficar em branco se o JS atrasar. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .path img, .video__play, .site-header, .sticky-cta, .site-nav { transition: none; }
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.measure { max-width: var(--measure); }
.center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Texto v2 (revisão da Giovanna, 04/11)
   -------------------------------------------------------------------------- */
.arrow-link {
  font-family: var(--f-label);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: .15rem;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}
.arrow-link::after { content: " →"; }
.arrow-link:hover { color: var(--ink); border-bottom-color: currentColor; }
.hero__link { margin: 0; }
.hero__support { font-size: .95rem; color: var(--ink-2); max-width: 44ch; margin: 0; }

.path img { object-position: var(--focus, 50% 50%); }
@media (min-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }

.proof__brands {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem) 0 0;
  max-width: 66rem;
  border-top: 1px solid rgb(232 213 163 / .16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem clamp(1.75rem, 4vw, 3.25rem);
}
.proof__brands li { max-width: none; }
.proof__brands img { width: auto; max-width: 100%; opacity: .9; }
.proof__legend { text-align: center; margin: 2rem auto 0; max-width: none; }

.includes { list-style: none; padding: 0; margin: 0; }
.includes li { padding: .7rem 0; border-top: 1px solid var(--line-soft); max-width: none; }
.includes__label { margin: 1.75rem 0 .75rem; }

.statement .wrap { max-width: 46rem; text-align: center; }
.statement p { margin-inline: auto; }
.fernweh { font-size: clamp(3rem, 9vw, 6rem); line-height: 1; margin-bottom: .2em; }
.fernweh__def { margin-bottom: 1.75rem; font-size: .9rem; }

.formation__desc {
  display: block;
  font-family: var(--f-label);
  font-size: .82rem;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: .2rem;
  white-space: normal;
}
.bio__proposal { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.organizers__refer { margin: 0; max-width: none; }
.signed-nights { list-style: none; padding: 0; margin: 0; }
.signed-nights li { padding: .9rem 0; border-top: 1px solid var(--line-soft); max-width: none; }
.ig-band .arrow-link { justify-self: start; }

/* --------------------------------------------------------------------------
   Ícones de linha (momentos e formações) · desenhados para o site, 05/11/2026
   Traço fino em dourado; só decoram, o texto ao lado carrega a informação.
   -------------------------------------------------------------------------- */
.moment__icon {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.formation__name { display: inline-flex; align-items: center; gap: 1rem; }
.formation__icon {
  flex: none;
  width: 3rem;
  height: 3rem;
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Lightbox da galeria (05/11/2026)
   -------------------------------------------------------------------------- */
html.has-lightbox { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgb(var(--shade-rgb) / .96);
  color: var(--ink);
}
.lightbox::backdrop { background: rgb(var(--shade-rgb) / .9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure {
  margin: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 4rem clamp(1rem, 6vw, 5.5rem) 3.25rem;
}
.lightbox__img {
  max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto;
  object-fit: contain; border-radius: var(--radius);
}
.lightbox__cap { font-family: var(--f-label); font-size: .85rem; color: var(--ink-3); text-align: center; max-width: 60ch; }
.lightbox__count {
  position: absolute; top: 1.25rem; left: 50%; transform: translateX(-50%); margin: 0;
  font-family: var(--f-label); font-size: var(--t-label); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--gold);
}
.lightbox__btn {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0; border-radius: 999px;
  background: rgb(var(--shade-rgb) / .55); color: var(--ink);
  border: 1px solid rgb(250 250 248 / .35);
  font: 300 1.9rem/1 var(--f-display); cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.lightbox__btn:hover { background: rgb(250 250 248 / .12); border-color: var(--ink); }
.lightbox__close { top: .75rem; right: .75rem; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 599px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: .75rem; transform: none; }
  .lightbox__figure { padding: 3.75rem .75rem 4.5rem; }
}