/* ===== Yeap Marketing — base: fontes, tokens, tipografia, botões ===== */

@font-face {
  font-family: 'Blauer Nue';
  src: url('../assets/fonts/BlauerNue-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('../assets/fonts/BlauerNue-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Blauer Nue';
  src: url('../assets/fonts/BlauerNue-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Bondia';
  src: url('../assets/fonts/Bondia-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Bondia';
  src: url('../assets/fonts/Bondia-ExtraBold.otf') format('opentype');
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: 'Glitz';
  src: url('../assets/fonts/Glitz.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  --wine: #68191e;
  --wine-light: #c3454e;
  --wine-soft: #d05b63; /* tom para textos pequenos sobre preto (AA) */
  --black: #141414;
  --gray: #cecdcb;
  --white: #f5f4f2;

  --font-body: 'Blauer Nue', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Bondia', 'Arial Narrow', sans-serif;
  --font-accent: 'Glitz', 'Bondia', serif;

  /* escala tipográfica */
  --fs-hero: clamp(2.5rem, 5.8vw, 4.9rem);
  --fs-display: clamp(2.4rem, 5.2vw, 4.6rem);
  --fs-title: clamp(1.5rem, 2.4vw, 2.1rem);
  --fs-body: 1.02rem;
  --fs-meta: .74rem;

  --hairline-dark: rgba(20, 20, 20, .22);
  --hairline-light: rgba(206, 205, 203, .2);

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--black);
  line-height: 1.65;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
strong { font-weight: 600; }

::selection { background: var(--wine); color: var(--white); }
:focus-visible { outline: 2px solid var(--wine-light); outline-offset: 3px; }
section[id] { scroll-margin-top: 76px; }

/* ---- Barra de progresso de leitura ---- */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--wine-light);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 120;
  pointer-events: none;
}

/* ---- Grain de filme (seções escuras) ---- */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  pointer-events: none;
  z-index: 3;
}


.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---- Tipografia ---- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: .005em;
}

.meta {
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.icon-star { width: 11px; height: auto; }

/* ---- Folio editorial (número + label + fio) ---- */
.folio {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: clamp(44px, 6vw, 76px);
}
.folio__num { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: .06em; }
.folio__rule { flex: 1; min-width: 20px; height: 1px; background: currentColor; opacity: .25; align-self: center; }
.folio__meta { opacity: .75; font-weight: 500; letter-spacing: .14em; }

/* ---- Botões (retos, editoriais) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 17px 30px;
  border: 1px solid transparent;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn__arrow { transition: transform .3s var(--ease); font-family: var(--font-body); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--wine { background: var(--wine); color: var(--white); }
.btn--wine:hover { background: var(--black); }
.btn--light { background: var(--white); color: var(--wine); }
.btn--light:hover { background: var(--black); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(245,244,242,.4); }
.btn--ghost:hover { border-color: var(--white); background: var(--white); color: var(--black); }
.btn--sm { padding: 11px 20px; font-size: .72rem; }
.btn--full { width: 100%; justify-content: center; }

/* ---- Link editorial com seta ---- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  position: relative;
  padding-bottom: 4px;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow i {
  font-style: normal;
  transition: transform .3s var(--ease);
}
.link-arrow:hover i { transform: translateX(5px); }

/* ---- Reveal on scroll (só quando JS está ativo — fallback: tudo visível) ---- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}