/* ═══════════════════════════════════════════════════════════════════════
   NAILS PRO ACADEMY — Lives 17/18/19 de agosto
   Bárbara Cavalcante
   ---------------------------------------------------------------------
   Direção: "Midnight Atelier" — azul-noite profundo, serifa fina em
   itálico para os títulos, sans ultraleve para o texto, filetes de luz.
   ═══════════════════════════════════════════════════════════════════════ */


/* ───────────────────────── 1. FONTES ───────────────────────── */

/* IvyPresto Display — Thin Italic (única versão disponível hoje).
   Usada como a voz editorial da marca nos títulos. */
@font-face {
  font-family: "IvyPresto Display";
  src: url("../fonts/IvyPrestoDisplay-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* ▼▼ QUANDO CONSEGUIR A VERSÃO ROMANA (não-itálica) NA ADOBE FONTS ▼▼
   1. Converta para .woff2 e salve em assets/fonts/
   2. Descomente o bloco abaixo
   3. Em --font-display-style (linha ~90) troque `italic` por `normal`
      — os trechos em <em> continuam em itálico automaticamente.

@font-face {
  font-family: "IvyPresto Display";
  src: url("../fonts/IvyPrestoDisplay-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
*/

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ───────────────────────── 2. TOKENS ───────────────────────── */

:root {
  /* Paleta — extraída da identidade visual (azul profundo + preto) */
  --ink:            #04060D;
  --navy-950:       #060A16;
  --navy-900:       #0A1020;
  --navy-850:       #0C1526;
  --navy-800:       #0F1D35;
  --navy-700:       #16294A;
  --navy-600:       #1E3A66;

  --blue-400:       #7FA8D9;
  --blue-300:       #9FC3E8;
  --blue-200:       #C3D8EE;

  --pearl:          #EAF0F8;
  --pearl-dim:      #C6D3E4;
  --muted:          #8FA1BC;
  --muted-deep:     #63748F;

  --line:           rgba(159, 195, 232, .16);
  --line-soft:      rgba(159, 195, 232, .09);
  --line-strong:    rgba(159, 195, 232, .32);

  /* Nácar — o brilho do esmalte. Acento único da página. */
  --nacre: linear-gradient(112deg, #C3D8EE 0%, #9FC3E8 26%, #E6EEF8 48%, #7FA8D9 72%, #B9D0EA 100%);

  /* Tipografia */
  --font-display: "IvyPresto Display", "Didot", "Bodoni MT", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display-style: italic;   /* trocar para `normal` ao adicionar a romana */

  /* Ritmo */
  --shell: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(5.5rem, 13vh, 10rem);

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}


/* ───────────────────────── 3. RESET ───────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  /* No toque, o realce padrão é um retângulo azul berrante — trocado por um
     brilho discreto na cor da marca. */
  -webkit-tap-highlight-color: rgba(159, 195, 232, .16);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--pearl-dim);
  font-family: var(--font-body);
  font-weight: 200;
  font-size: clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height: 1.85;
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, figure { max-width: 100%; display: block; }
figure { margin: 0; }
p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }

a { color: inherit; text-decoration: none; }

::selection { background: rgba(159, 195, 232, .28); color: #fff; }

:focus-visible {
  outline: 1px solid var(--blue-300);
  outline-offset: 4px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: 200;
  padding: .7rem 1.15rem;
  background: var(--navy-800);
  color: var(--pearl);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: .8rem;
  letter-spacing: .08em;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }


/* ───────────────────────── 4. ATMOSFERA ───────────────────────── */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;   /* recorta os feixes na tela: menos área pintada no celular */
  background:
    radial-gradient(120% 80% at 50% -10%, #16294A 0%, #0A1020 42%, #04060D 78%),
    var(--ink);
}

/* Feixes de luz difusa, como no material da marca */
.beam {
  position: absolute;
  top: -25vh;
  width: clamp(180px, 26vw, 420px);
  height: 145vh;
  background: linear-gradient(180deg, rgba(159,195,232,.15) 0%, rgba(127,168,217,.05) 45%, transparent 82%);
  filter: blur(48px);
  opacity: .85;
  transform-origin: top center;
  will-change: transform, opacity;
}
.beam--1 { left: 6%;  transform: rotate(11deg);  animation: drift 19s var(--ease) infinite alternate; }
.beam--2 { left: 42%; transform: rotate(-7deg);  opacity: .55; animation: drift 25s var(--ease) infinite alternate-reverse; }
.beam--3 { left: 76%; transform: rotate(16deg);  opacity: .4;  animation: drift 22s var(--ease) infinite alternate; }

@keyframes drift {
  from { transform: translateX(-2.5%) rotate(9deg)  scaleY(1);    opacity: .32; }
  to   { transform: translateX(3.5%)  rotate(15deg) scaleY(1.08); opacity: .85; }
}

.haze {
  position: absolute;
  left: 50%; top: -20vh;
  width: 150vmax; height: 110vmax;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(30,58,102,.5) 0%, rgba(10,16,32,0) 70%);
  filter: blur(20px);
}

/* Granulado sutil — tira o "plástico" do gradiente */
.grain {
  position: absolute;
  inset: -30%;
  opacity: .035;
  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift 7s steps(6) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-2%, -1.5%); }
  33%  { transform: translate(1.5%, -3%); }
  50%  { transform: translate(-1.5%, 2%); }
  66%  { transform: translate(2%, 1%); }
  83%  { transform: translate(-1%, -2%); }
  100% { transform: translate(0, 0); }
}


/* ───────────────────────── 5. LAYOUT ───────────────────────── */

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

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section + .section::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - (var(--gutter) * 2), var(--shell));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.section__head { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.section__head--center { text-align: center; }
.section__head--center .eyebrow { justify-content: center; }

.section__cta { margin-top: clamp(3rem, 7vw, 5rem); text-align: center; }


/* ───────────────────────── 6. TIPOGRAFIA ───────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.5rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.66rem, .62rem + .18vw, .74rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blue-400);
}

.eyebrow__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue-300);
  box-shadow: 0 0 0 3px rgba(159, 195, 232, .13);
  flex: none;
}

.hero__title,
.section__title,
.closing__title {
  font-family: var(--font-display);
  font-style: var(--font-display-style);
  font-weight: 100;
  color: var(--pearl);
  line-height: 1.1;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

.hero__title {
  font-size: clamp(2.35rem, 1.15rem + 5.3vw, 5.15rem);
  line-height: 1.06;
}

.section__title { font-size: clamp(1.95rem, 1.1rem + 3.5vw, 3.55rem); }
.closing__title { font-size: clamp(2.05rem, 1.1rem + 4vw, 4rem); }

/* Linha de ênfase — sempre itálica, sublinhada por um filete nácar */
.hero__title em,
.section__title em,
.closing__title em,
.manifesto__close em {
  font-style: italic;
  position: relative;
  background: var(--nacre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  font-size: clamp(1.14rem, 1rem + .55vw, 1.45rem);
  line-height: 1.6;
  color: var(--pearl);
  font-weight: 200;
}


/* ───────────────────────── 7. BOTÕES ───────────────────────── */

.btn {
  --btn-py: .95rem;
  --btn-px: 2.1rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.8rem, .75rem + .2vw, .9rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), color .3s var(--ease);
}

.btn--lg {
  --btn-py: 1.15rem;
  --btn-px: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: .16em;
}

.btn--primary {
  color: var(--ink);
  background: var(--nacre);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 14px 38px -14px rgba(127, 168, 217, .55);
}

/* Varredura de brilho ao passar o mouse */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
  background-size: 260% 100%;
  background-position: 130% 0;
  opacity: 0;
  transition: background-position .85s var(--ease-out), opacity .3s var(--ease);
}

.btn--primary:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 20px 46px -14px rgba(127, 168, 217, .7);
}
.btn--primary:focus-visible::after { opacity: 1; background-position: -40% 0; }
.btn--primary:active { transform: translateY(0) scale(.985); }

.btn--ghost {
  color: var(--pearl);
  border-color: var(--line-strong);
  background: rgba(10, 16, 32, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:focus-visible {
  border-color: var(--blue-400);
  background: rgba(22, 41, 74, .55);
  transform: translateY(-1px);
}


/* ───────────────────────── 8. HEADER ───────────────────────── */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 1.15rem;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom: 1px solid transparent;
}

.site-header.is-stuck {
  padding-block: .7rem;
  background: rgba(6, 10, 22, .78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line-soft);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header__cta {
  --btn-py: .68rem;
  --btn-px: 1.5rem;
  font-size: .72rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease-out), visibility .45s;
}
.site-header.is-stuck .site-header__cta {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--pearl);
}
.brand__mark { color: var(--blue-300); flex: none; transition: transform .6s var(--ease-out); }

.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name {
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .19em;
  text-transform: uppercase;
}
.brand__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: .92rem;
  color: var(--blue-400);
  letter-spacing: .02em;
}


/* ───────────────────────── 9. HERO ───────────────────────── */

.hero {
  position: relative;
  padding-top: clamp(8.5rem, 20vh, 12rem);
  padding-bottom: clamp(4rem, 9vh, 7rem);
}

.hero__inner { text-align: center; }

.hero__lead {
  max-width: 44ch;
  margin: clamp(1.5rem, 3vw, 2.1rem) auto 0;
  font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem);
  color: var(--muted);
  line-height: 1.7;
}

/* Faixa de datas */
.dateline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.1rem, 3.5vw, 2.4rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
}

.dateline__item {
  display: flex;
  align-items: baseline;
  gap: .55rem;
}

.dateline__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.1rem);
  line-height: .9;
  color: var(--pearl);
}

.dateline__meta {
  display: flex;
  flex-direction: column;
  font-size: .64rem;
  line-height: 1.5;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-deep);
  text-align: left;
}

.dateline__sep {
  width: 1px;
  height: clamp(1.9rem, 4vw, 2.8rem);
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}

.hero__actions { margin-top: clamp(2.75rem, 6vw, 4rem); }

.hero__note {
  margin: 1.4rem 0 0;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-deep);
}


/* ───────────────────── 10. VÍDEO (espaço reservado) ───────────────────── */

.video {
  margin: clamp(3.5rem, 8vw, 6rem) auto 0;
  max-width: 940px;
}

.video__frame {
  position: relative;
  padding: clamp(.6rem, 1.4vw, 1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, rgba(22, 41, 74, .5), rgba(6, 10, 22, .72));
  box-shadow:
    0 1px 0 rgba(159, 195, 232, .1) inset,
    0 50px 90px -50px rgba(0, 0, 0, .95);
}

/* Cantos técnicos — detalhe de "moldura de estúdio" */
.video__tick {
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--blue-400);
  opacity: .5;
}
.video__tick--tl { top: -1px; left: -1px;  border-right: 0; border-bottom: 0; border-top-left-radius: var(--r-lg); }
.video__tick--tr { top: -1px; right: -1px; border-left: 0;  border-bottom: 0; border-top-right-radius: var(--r-lg); }
.video__tick--bl { bottom: -1px; left: -1px;  border-right: 0; border-top: 0; border-bottom-left-radius: var(--r-lg); }
.video__tick--br { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; border-bottom-right-radius: var(--r-lg); }

.video__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--r-lg) - 8px);
  overflow: hidden;
  background:
    repeating-linear-gradient(-45deg, rgba(159,195,232,.028) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #0C1526, #05070F);
}

.video__stage > iframe,
.video__stage > video,
.video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  background: #000;
}

.video__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  color: var(--blue-400);
  text-align: center;
  padding: 1.5rem;
}
.video__placeholder svg { opacity: .75; margin-bottom: .5rem; }

.video__placeholder-title {
  margin: 0;
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pearl-dim);
}
.video__placeholder-sub {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted-deep);
  text-transform: none;
}

/* Fachada do YouTube/Vimeo — carrega o player só no clique (bom para o LCP) */
.video__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #05070F center/cover no-repeat;
}
.video__facade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,6,13,.15), rgba(4,6,13,.55));
  transition: background .4s var(--ease);
}

.video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--nacre);
  color: var(--ink);
  box-shadow: 0 18px 44px -14px rgba(127,168,217,.8);
  transition: transform .4s var(--ease-out);
}
.video__facade:active .video__play { transform: translate(-50%, -50%) scale(.94); }

.video__caption {
  margin-top: 1.15rem;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.scroll-hint {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.scroll-hint__line {
  width: 1px; height: 64px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-hint__line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 22px;
  background: var(--blue-300);
  animation: fall 2.6s var(--ease) infinite;
}
@keyframes fall {
  0%   { transform: translateY(-24px); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(64px); opacity: 0; }
}


/* ───────────────────────── 11. MANIFESTO ───────────────────────── */

.manifesto__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}

@media (min-width: 860px) {
  .manifesto__grid { grid-template-columns: 1fr 1fr; }
  .manifesto__col + .manifesto__col {
    padding-left: clamp(2rem, 4vw, 4rem);
    border-left: 1px solid var(--line-soft);
  }
}

.manifesto__close {
  margin-top: 1.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.05rem);
  line-height: 1.35;
  color: var(--pearl);
}
.manifesto__close em { font-style: italic; }


/* ───────────────────────── 12. AS LIVES ───────────────────────── */

.lives__list {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .lives__list { grid-template-columns: repeat(3, 1fr); align-items: start; }
  /* Escalonamento vertical — quebra a grade e cria movimento */
  .lives__list > :nth-child(2) { transform: translateY(clamp(1.5rem, 3vw, 2.75rem)); }
  .lives__list > :nth-child(3) { transform: translateY(clamp(3rem, 6vw, 5.5rem)); }
  .lives { padding-bottom: calc(var(--section-y) + 5.5rem); }
}

.live {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(165deg, rgba(15, 29, 53, .55), rgba(6, 10, 22, .55));
  overflow: hidden;
  transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease-out);
}

/* Filete de luz que cresce no topo do card */
.live::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px; width: 0;
  background: var(--nacre);
  transition: width .7s var(--ease-out);
}

.live:focus-within {
  border-color: var(--line-strong);
  background: linear-gradient(165deg, rgba(22, 41, 74, .68), rgba(6, 10, 22, .6));
  box-shadow: 0 34px 70px -44px rgba(0, 0, 0, .95);
}
.live:focus-within::before { width: 100%; }

.live__date {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-soft);
}

.live__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: clamp(3.4rem, 2.4rem + 3vw, 4.6rem);
  line-height: .82;
  background: var(--nacre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.live__month {
  font-size: .84rem;
  color: var(--pearl-dim);
  letter-spacing: .04em;
}

.live__weekday {
  width: 100%;
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.live__order {
  margin: 0 0 .95rem;
  font-size: .68rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--blue-400);
}

.live__desc {
  margin: 0;
  font-size: .965rem;
  line-height: 1.78;
  color: var(--muted);
}

.live__theme {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 1.6rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--line-soft);
}
.live__theme-label {
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted-deep);
}
.live__theme-value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: 1.28rem;
  line-height: 1.35;
  color: var(--pearl);
}


/* ───────────────────────── 13. PARA QUEM ───────────────────────── */

.audience__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-soft);
}

@media (min-width: 800px) {
  .audience__list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4.5rem); }
}

.audience__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: clamp(1.1rem, 2.4vw, 1.55rem) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  font-weight: 200;
  color: var(--pearl-dim);
  transition: color .4s var(--ease), padding-left .4s var(--ease-out);
}

.audience__mark {
  position: relative;
  flex: none;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  border: 1px solid var(--blue-400);
  transition: background .4s var(--ease), transform .55s var(--ease-out), box-shadow .4s var(--ease);
}

/* No celular o losango já vem preenchido — o hover não existe lá, e o item
   ficaria "apagado" sem nenhum destaque. */
@media (hover: none) {
  .audience__mark { background: var(--nacre); opacity: .85; }
}


/* ───────────────────────── 14. MENTORA ───────────────────────── */

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

@media (min-width: 900px) {
  .mentor__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(22,41,74,.6), rgba(6,10,22,.85));
  box-shadow: 0 50px 90px -55px rgba(0,0,0,.95);
}

.portrait__img { width: 100%; height: 100%; object-fit: cover; }

.portrait__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  color: var(--blue-400);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.9;
  text-align: center;
  background: repeating-linear-gradient(-45deg, rgba(159,195,232,.028) 0 2px, transparent 2px 11px);
}

/* Filete nácar na base do retrato */
.portrait__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--nacre);
  opacity: .75;
}

.mentor__role {
  margin-top: 1.6rem;
  margin-bottom: 1.9rem;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.16rem);
  color: var(--blue-300);
  font-weight: 200;
  line-height: 1.65;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  gap: 1px;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.stats__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .85rem;
  min-height: 118px;
  padding: 1.3rem 1.35rem;
  background: rgba(6, 10, 22, .65);
}

.stats__label {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-deep);
  line-height: 1.7;
}

.stats__value {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: clamp(1.2rem, 1.05rem + .45vw, 1.42rem);
  line-height: 1.25;
  color: var(--pearl);
  text-wrap: balance;
}


/* ───────────────────────── 15. CTA FINAL ───────────────────────── */

.closing { text-align: center; }
.closing__inner { display: flex; flex-direction: column; align-items: center; }

.closing::after {
  content: "";
  position: absolute;
  left: 50%; top: 12%;
  width: min(760px, 90vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(30, 58, 102, .55), transparent 72%);
  filter: blur(30px);
  z-index: -1;
  pointer-events: none;
}

.countdown { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.countdown[hidden] { display: none; }

.countdown__label {
  margin: 0 0 1.15rem;
  font-size: .64rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.countdown__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.5rem, 2vw, 1.35rem);
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-width: clamp(52px, 12vw, 76px);
}

.countdown__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--pearl);
  font-variant-numeric: tabular-nums;
}

.countdown__cap {
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

.countdown__colon {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--line-strong);
}

/* Estado exibido quando a data da primeira live já passou */
.countdown__live {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 100;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.2;
  background: var(--nacre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ───────────────────────── 16. RODAPÉ ───────────────────────── */

.site-footer {
  position: relative;
  padding-block: clamp(3rem, 7vw, 4.5rem);
  border-top: 1px solid var(--line-soft);
  background: rgba(4, 6, 13, .6);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

@media (min-width: 820px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.35rem 2rem;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer__nav a { position: relative; padding-bottom: 3px; transition: color .35s var(--ease); }
.site-footer__nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--blue-300);
  transition: width .4s var(--ease-out);
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0;
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--muted-deep);
  line-height: 1.8;
}
@media (min-width: 820px) { .site-footer__legal { text-align: right; } }

.site-footer__links { display: inline-flex; gap: .5rem; justify-content: inherit; }
.site-footer__links a { transition: color .3s var(--ease); }


/* ───────────────────── 17. CTA FIXO (MOBILE) ───────────────────── */

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: .8rem var(--gutter) calc(.8rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(4,6,13,0), rgba(4,6,13,.92) 42%);
  transform: translateY(115%);
  transition: transform .5s var(--ease-out);
  pointer-events: none;
}
.sticky-cta .btn { width: 100%; pointer-events: auto; }
.sticky-cta.is-visible { transform: translateY(0); }

@media (min-width: 760px) { .sticky-cta { display: none; } }


/* ───────────────────── 18. REVELAÇÃO NO SCROLL ───────────────────── */

/* ── Acima da dobra: entrada por CSS, sem esperar o JavaScript ────────
   O conteúdo do topo NÃO usa o observer de rolagem. Ele já está na tela
   quando a página abre, então esperar o JS baixar, rodar e disparar o
   observer só atrasaria o título — que é justamente o elemento que o
   Google cronometra como LCP. Aqui a animação começa junto com a página,
   e o <h1> entra primeiro (delay zero). */
.js .hero [data-reveal] {
  /* anula o estado escondido do observer — aqui quem manda é a animação */
  opacity: 1;
  transform: none;
  animation: entradaHero .9s var(--ease-out) both;
  animation-delay: var(--hero-delay, 0ms);
}
.js .hero .hero__title   { --hero-delay:   0ms; }
.js .hero .eyebrow       { --hero-delay: 140ms; }
.js .hero .hero__lead    { --hero-delay: 220ms; }
.js .hero .dateline      { --hero-delay: 300ms; }
.js .hero .hero__actions { --hero-delay: 380ms; }
.js .hero .video         { --hero-delay: 460ms; }

@keyframes entradaHero {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* O <h1> é o elemento que o Google cronometra como LCP — e o Chrome
   DESCARTA da medição qualquer elemento que comece em opacity 0. Com o
   fade, a métrica acabava registrando o logo do topo (3 mil px²) em vez
   do título (61 mil px²). Por isso o título só desliza: ele está pintado
   desde o primeiro quadro, e o que o Google mede passa a ser o que a
   pessoa realmente veio ler. */
.js .hero .hero__title {
  animation-name: entradaTitulo;
  animation-duration: .75s;
}
@keyframes entradaTitulo {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

/* ── Abaixo da dobra: revelação conforme a pessoa rola ───────────────
   A classe `js` é adicionada por um script inline no <head>.
   Sem JavaScript o conteúdo simplesmente aparece — nada fica escondido. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .95s var(--ease-out),
    transform .95s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}


/* ═══════════════ 19. INTERAÇÕES DE MOUSE ═══════════════
   Tudo que depende de hover mora aqui. Em telas de toque o :hover fica
   "grudado" depois do tap (o dedo não tem como sair de cima), então esses
   efeitos simplesmente não existem no celular — lá o feedback é o :active.
   Os estados de teclado (:focus-visible / :focus-within) ficam de fora
   deste bloco, para continuarem funcionando em qualquer dispositivo. */

@media (hover: hover) and (pointer: fine) {

  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.6) inset,
      0 20px 46px -14px rgba(127, 168, 217, .7);
  }
  .btn--primary:hover::after { opacity: 1; background-position: -40% 0; }

  .btn--ghost:hover {
    border-color: var(--blue-400);
    background: rgba(22, 41, 74, .55);
    transform: translateY(-1px);
  }

  .brand:hover .brand__mark { transform: rotate(90deg); }

  .video__facade:hover::before { background: linear-gradient(180deg, rgba(4,6,13,.05), rgba(4,6,13,.4)); }
  .video__facade:hover .video__play { transform: translate(-50%, -50%) scale(1.07); }

  .live:hover {
    border-color: var(--line-strong);
    background: linear-gradient(165deg, rgba(22, 41, 74, .68), rgba(6, 10, 22, .6));
    box-shadow: 0 34px 70px -44px rgba(0, 0, 0, .95);
  }
  .live:hover::before { width: 100%; }

  .audience__item:hover { color: #fff; padding-left: .5rem; }
  .audience__item:hover .audience__mark {
    background: var(--nacre);
    transform: rotate(135deg);
    box-shadow: 0 0 0 4px rgba(159, 195, 232, .1);
  }

  .site-footer__nav a:hover { color: var(--pearl); }
  .site-footer__nav a:hover::after { width: 100%; }
  .site-footer__links a:hover { color: var(--blue-300); }
}


/* ═══════════════ 20. MOBILE ═══════════════ */

/* ── 20.1 Desempenho em aparelhos de toque ───────────────────────────
   Os feixes de luz e o granulado são animados o tempo todo. Em desktop
   isso é irrelevante; num Android intermediário custa bateria e engasga
   a rolagem. No toque eles ficam parados — visualmente quase idêntico. */
@media (hover: none), (max-width: 760px) {
  .beam  { animation: none; filter: blur(32px); }
  .grain { animation: none; opacity: .042; }
  .haze  { filter: none; }

  /* backdrop-filter sobre fundo animado é caro no celular:
     fundo sólido resolve e fica igual sobre uma página escura. */
  .site-header.is-stuck {
    background: rgba(6, 10, 22, .95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .btn--ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── 20.2 Alvos de toque ─────────────────────────────────────────────
   Mínimo de 44px de altura (recomendação da Apple e do Google). */
@media (max-width: 900px) {
  .btn { touch-action: manipulation; min-height: 48px; }
  .brand { padding-block: .35rem; }

  .site-footer__nav { gap: .2rem 1.6rem; }
  .site-footer__nav a { padding-block: .7rem; }
  .site-footer__links a { display: inline-block; padding-block: .75rem; }
  .audience__item { min-height: 48px; }
}

/* ── 20.3 Tipografia no celular ──────────────────────────────────────
   Os rótulos em caixa-alta desciam a 9px, abaixo do legível. Aqui eles
   sobem para ~11–12px e o espaçamento entre letras afrouxa menos,
   porque em tamanho pequeno o excesso de tracking atrapalha a leitura. */
@media (max-width: 620px) {
  body { line-height: 1.8; }

  .eyebrow          { font-size: .75rem;  letter-spacing: .2em;  margin-bottom: 1.15rem; }
  .dateline__meta   { font-size: .72rem;  letter-spacing: .14em; }
  .live__weekday,
  .live__order,
  .live__theme-label,
  .stats__label,
  .countdown__cap   { font-size: .72rem;  letter-spacing: .15em; }
  .countdown__label { font-size: .74rem;  letter-spacing: .18em; }
  .hero__note,
  .video__caption   { font-size: .78rem;  letter-spacing: .1em;  }
  .site-footer__nav { font-size: .78rem;  letter-spacing: .14em; }
  .site-footer__legal { font-size: .76rem; }
  .btn              { font-size: .82rem;  letter-spacing: .1em;  }
  .live__desc       { font-size: 1rem; }
}

/* ── 20.4 Ritmo vertical ─────────────────────────────────────────────
   A página tem 8 mil pixels no celular. Respiro menor entre seções
   encurta a rolagem sem apertar o conteúdo. */
@media (max-width: 620px) {
  :root { --section-y: clamp(3.75rem, 9vh, 5.5rem); }
  .hero { padding-top: 6.5rem; padding-bottom: 2.5rem; }
  .scroll-hint { margin-top: 2.25rem; }
  .scroll-hint__line { height: 44px; }
  .video { margin-top: 2.75rem; }
  .stats { margin-top: 2rem; }
}

/* ── 20.5 Faixa de datas ─────────────────────────────────────────────
   Em linha, "17 AGO SEGUNDA · 18 …" estourava a tela a 320px.
   Vira uma grade de três colunas, com o dia acima e a legenda abaixo. */
@media (max-width: 620px) {
  .dateline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 360px;
    margin-inline: auto;
  }
  .dateline__sep { display: none; }

  .dateline__item {
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding-inline: .25rem;
  }
  .dateline__item + .dateline__item,
  .dateline__sep + .dateline__item {
    border-left: 1px solid var(--line-soft);
  }

  .dateline__num { font-size: 2.85rem; }
  .dateline__meta {
    align-items: center;
    gap: 0;
    line-height: 1.6;
    text-align: center;
  }
}

/* ── 20.6 Contagem regressiva ────────────────────────────────────────
   Quatro blocos + três dois-pontos não cabem em 320px. */
@media (max-width: 400px) {
  .countdown__grid { gap: .35rem; }
  .countdown__unit { min-width: 0; flex: 1; }
  .countdown__colon { display: none; }
  .countdown__num { font-size: 2.05rem; }
  .countdown__cap { font-size: .7rem; letter-spacing: .08em; }
}

/* ── 20.7 Títulos ────────────────────────────────────────────────────
   As quebras de linha manuais foram desenhadas para telas largas;
   no celular o texto flui melhor sozinho. */
@media (max-width: 620px) {
  .hero__title br,
  .closing__title br { display: none; }
  .hero__title { font-size: clamp(2.1rem, 1.35rem + 3.6vw, 2.9rem); line-height: 1.14; }
  .closing__title { line-height: 1.16; }
  .section__title { line-height: 1.14; }
  .hero__lead { max-width: 34ch; }
}

/* ── 20.8 CTA fixo ───────────────────────────────────────────────────
   Precisa de espaço no rodapé para não cobrir os links legais. */
@media (max-width: 759px) {
  .site-footer { padding-bottom: clamp(6.5rem, 18vw, 8.5rem); }
}

@media (max-width: 760px) {
  .site-header__cta { display: none; }   /* o CTA fixo de baixo já cobre */
}


/* ───────────────────── 21. ACESSIBILIDADE ───────────────────── */

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

@media (prefers-contrast: more) {
  :root {
    --muted: #B9C6D9;
    --muted-deep: #9AAABF;
    --line: rgba(159, 195, 232, .35);
    --line-soft: rgba(159, 195, 232, .22);
  }
}


/* ───────────────────── 22. IMPRESSÃO ───────────────────── */

@media print {
  .atmosphere, .sticky-cta, .site-header, .scroll-hint, .video__frame { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__title, .section__title, .closing__title, .live__num, .live__theme-value,
  .stats__value, .countdown__num, .manifesto__close {
    color: #000 !important;
    background: none !important;
    -webkit-text-fill-color: #000;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}