/* =========================================================
   Nexrise | Landing page
   Mesmo sistema visual da base anterior. Para outra marca,
   troque só os tokens em :root, a logo e os textos.
   ========================================================= */

:root {
  /* Cores */
  --bg: #0A0A0A;
  --surface: #121212;
  --surface-2: #171717;
  --line: #1F1F1F;
  --text: #E5E5E5;
  --muted: #8A8A8A;
  --accent: #0064FF;
  --accent-soft: #5A9BFF;
  --grad: linear-gradient(135deg, var(--accent-soft), var(--accent));
  --on-accent: #FFFFFF;
  --accent-text: #4D8DFF; /* azul mais claro para textos pequenos no preto (contraste) */

  /* Tipografia: só 3 tamanhos */
  --font: "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, "Inter Tight", Arial, sans-serif;
  --fs-l: 50px;
  --fs-m: 17px;
  --fs-s: 13px;
  --fw-btn: 500; /* peso de todos os botões: medium */

  /* Unidade de altura: ícones, botões, menu */
  --u: 40px;
  --logo-h: 22px; /* mesma altura da logo no menu e no rodapé */
  --icon: 20px;

  /* Forma: o corte diagonal do "N" */
  --r-s: 12px;
  --r-m: 24px;
  --r-pill: 999px;
  --cut: 28px;

  /* Layout */
  --max: 1040px;
  --gutter: 24px;
  --sec: 128px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 760px) {
  :root { --fs-l: 30px; --fs-m: 15px; --fs-s: 13px; --sec: 88px; --gutter: 20px; --u: 44px; --cut: 20px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-s); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
section[id] { scroll-margin-top: 88px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; }
.skip:focus { top: 16px; }

/* ---------- Tipografia ---------- */
.t-l { font-size: var(--fs-l); line-height: 1.04; font-weight: 500; letter-spacing: -.035em; }
.t-m { font-size: var(--fs-m); line-height: 1.35; font-weight: 400; letter-spacing: -.01em; }
.t-s { font-size: var(--fs-s); line-height: 1.5; font-weight: 400; }
.muted { color: var(--muted); }
.center { text-align: center; }
.title { text-align: center; text-wrap: balance; }
.title > span, h1 > span, h2 > span { display: block; }

/* ---------- Layout ---------- */
/* Uma largura só para tudo: menu, seções e rodapé usam a mesma coluna */
.wrap, .nav__bar, .foot { width: min(var(--max), 100% - var(--gutter) * 2); margin-inline: auto; }
.sec { padding-block: var(--sec); position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }

/* Tag com o triângulo do N */
.tag { display: flex; align-items: center; gap: 8px; color: var(--accent-text); margin-bottom: 20px; }
.tag--c { justify-content: center; }
.tag::before { content: ""; width: 18px; height: 8px; border-radius: var(--r-pill); background: var(--grad); }

/* ---------- Ícones e botões ---------- */
.i { width: var(--icon); height: var(--icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Logos das redes (WhatsApp, Instagram): preenchidos */
.i--fill { fill: currentColor; stroke: none; }
.ico { width: var(--u); height: var(--u); flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--grad); color: var(--on-accent); }
.btn {
  height: var(--u); padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--r-pill); font-size: var(--fs-s); font-weight: var(--fw-btn); white-space: nowrap;
  transition: transform .2s var(--ease), box-shadow .3s var(--ease), background .2s, border-color .2s;
}
.btn .i { width: 16px; height: 16px; }
.btn:active { transform: scale(.97); }
/* ---------- Botões com brilho (inspirado na OpenArt) ----------
   Borda em degradê + luz interna no topo + halo desfocado por fora */
.btn--primary {
  position: relative; isolation: isolate; color: #fff;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.35), transparent 55%) padding-box,
    linear-gradient(180deg, #2F82FF, var(--accent) 60%, #0050D6) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(120,170,255,.35) 40%, rgba(0,100,255,.2)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 18px rgba(0,30,90,.35), 0 0 0 1px rgba(0,100,255,.2), 0 12px 40px -14px rgba(0,100,255,.35);
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), filter .3s;
}
.btn--primary::after { content: ""; position: absolute; inset: -12px; z-index: -1; border-radius: inherit; background: var(--accent); filter: blur(32px); opacity: .14; transition: opacity .3s; pointer-events: none; }
.btn--primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 18px rgba(0,30,90,.3), 0 0 0 1px rgba(0,100,255,.35), 0 14px 46px -12px rgba(0,100,255,.5); }
.btn--primary:hover::after { opacity: .28; }
.btn--primary:active { transform: translateY(1px) scale(.99); }

/* Botão escuro com brilho animado (shimmer) + borda em degradê */
.btn--shimmer {
  --speed: 3s; --spread: 90deg; --shimmer: var(--accent-soft); --ring: 1.5px; --btn-bg: #0B0D12;
  position: relative; z-index: 0; overflow: hidden; isolation: isolate; color: #fff;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(90,155,255,.18), transparent 60%) padding-box,
    linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(90,155,255,.35) 60%, rgba(0,100,255,.5)) border-box;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -8px 14px rgba(0,100,255,.18), 0 10px 36px -16px rgba(0,100,255,.35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--shimmer:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -8px 16px rgba(0,100,255,.3), 0 12px 42px -14px rgba(0,100,255,.45); }
.btn--shimmer:active { transform: translateY(1px); }
.shimmer { position: absolute; inset: 0; z-index: -2; overflow: visible; container-type: size; filter: blur(2px); pointer-events: none; }
.shimmer__spark { position: absolute; inset: 0; height: 100cqh; aspect-ratio: 1; animation: shimmer-slide var(--speed) ease-in-out infinite alternate; }
.shimmer__spin {
  position: absolute; inset: -100%;
  background: conic-gradient(from calc(270deg - var(--spread) * .5), transparent 0, var(--shimmer) var(--spread), transparent var(--spread));
  animation: spin-around calc(var(--speed) * 2) infinite linear;
}
.shimmer__bg { position: absolute; inset: var(--ring); z-index: -1; border-radius: inherit; background: radial-gradient(120% 120% at 50% 0%, rgba(90,155,255,.18), transparent 60%), var(--btn-bg); pointer-events: none; }
@keyframes shimmer-slide { to { transform: translate(calc(100cqw - 100%), 0); } }
@keyframes spin-around {
  0% { transform: translateZ(0) rotate(0); }
  15%, 35% { transform: translateZ(0) rotate(90deg); }
  65%, 85% { transform: translateZ(0) rotate(270deg); }
  100% { transform: translateZ(0) rotate(360deg); }
}
.btn--ghost { background: rgba(255,255,255,.04); border: 1px solid #2a2a2a; color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); border-color: #333; }

/* Foto com o canto cortado em diagonal (o N) */
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }

/* =========================================================
   MENU
   ========================================================= */
.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 50; pointer-events: none; }
.nav__bar {
  pointer-events: auto; height: 56px; padding: 8px 8px 8px 20px;
  display: flex; align-items: center; gap: 8px; border-radius: 16px; position: relative; z-index: 0;
}
.nav__bar::before, .nav__links::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(0, 0, 0, .72); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nav__links::before { display: none; }
.nav__logo { display: flex; align-items: center; height: var(--u); margin-right: auto; }
.nav__logo img, .foot .nav__logo img { width: auto; height: var(--logo-h); }
.nav__links { display: flex; gap: 2px; }
.nav__link { height: var(--u); padding: 0 12px; display: flex; align-items: center; border-radius: var(--r-pill); color: var(--muted); transition: color .2s, background .2s; }
.nav__link.is-current { color: #fff; background: linear-gradient(rgba(0,100,255,.16), rgba(0,100,255,.04)) padding-box, linear-gradient(180deg, rgba(141,184,255,.9), rgba(0,100,255,.6)) border-box; border: 1px solid transparent; box-shadow: inset 0 0 10px rgba(0,100,255,.3), 0 0 14px -4px rgba(0,100,255,.6); }
.nav__link--m { display: none; }
@media (hover: hover) { .nav__link:hover { color: var(--text); background: var(--surface-2); } }
.nav__fottu { margin-left: 6px; padding: 0 14px; }
.nav__toggle { display: none; width: var(--u); height: var(--u); flex: none; border-radius: 50%; place-items: center; background: var(--surface-2); }

@media (max-width: 1060px) {
  .nav__toggle { display: grid; }
  .nav__fottu { display: none; }
  .nav__link--m { display: flex; color: var(--accent-text); }
  .nav__links {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 0; flex-direction: column; padding: 8px; border-radius: 16px;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .25s var(--ease); pointer-events: auto;
  }
  .nav.is-open .nav__links { opacity: 1; visibility: visible; transform: none; }
  .nav__links::before { display: block; }
}
@media (max-width: 520px) { .nav__cta { display: none; } }

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(520px, 72vh, 660px); display: flex; align-items: center; padding-block: 120px 88px;
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.slide { position: absolute; inset: 0; margin: 0; clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0); transition: clip-path 1.2s var(--ease); }
.slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translateY(calc(var(--hp, 0) * 1px)) scale(1.08); transition: transform 7s linear; will-change: transform;
}
/* Abertura diagonal, como um obturador no ângulo do N */
.slide.is-on { z-index: 1; clip-path: polygon(-100% 0, 100% 0, 100% 100%, 0% 200%); }
.slide.is-on img { transform: translateY(calc(var(--hp, 0) * 1px)) scale(1.02); }
.slide.is-out { z-index: 0; clip-path: polygon(-100% 0, 100% 0, 100% 100%, 0% 200%); }
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(10,10,10,.88) 34%, rgba(10,10,10,.3) 62%, transparent 80%),
    linear-gradient(180deg, rgba(10,10,10,.5) 0%, transparent 25%, transparent 70%, var(--bg) 100%);
}
/* Flash de câmera: um disparo na entrada e outros bem sutis de tempos em tempos */
.flash { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #fff; opacity: 0; }
.flash.is-firing { animation: flash .6s ease-out; }
/* Disparo de câmera: clarão branco e escuro rápido do obturador */
@keyframes flash { 0% { opacity: .95; } 12% { opacity: .55; } 22% { opacity: .9; } 100% { opacity: 0; } }
.hero__copy > * { max-width: 640px; }
.hero__h1 { margin: 0; font-weight: inherit; }
.hero__h1 .tag { margin-bottom: 20px; }
.hero__sub { color: var(--muted); margin-top: 20px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.hero__dots { position: absolute; left: 0; right: 0; bottom: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero__label { color: #bdbdbd; }
.dots { display: flex; align-items: center; gap: 4px; }
/* Pontos redondos: o ativo vira uma pílula que enche com o tempo da foto */
.dot { position: relative; width: 24px; height: 32px; display: grid; place-items: center; transition: width .5s var(--ease); }
.dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.28); transition: width .5s var(--ease), background .3s; }
.dot:hover::before { background: rgba(255,255,255,.55); }
.dot i { position: absolute; left: 0; top: 50%; height: 8px; margin-top: -4px; width: 0; border-radius: var(--r-pill); background: var(--accent); }
.dot.is-on { width: 48px; }
.dot.is-on::before { width: 40px; background: rgba(255,255,255,.2); }
.dot.is-on i { left: 4px; animation: prog var(--dur, 5.5s) linear forwards; }
.dot.is-done::before { background: rgba(0,100,255,.55); }
@keyframes prog { to { width: 40px; } }

@media (max-width: 760px) {
  .hero { min-height: 84svh; align-items: flex-end; padding-block: 96px 64px; }
  .hero__shade { background: linear-gradient(180deg, rgba(10,10,10,.5) 0%, transparent 18%, transparent 35%, rgba(10,10,10,.85) 60%, var(--bg) 82%); }
  .hero__copy > * { max-width: none; }
  .hero__dots { bottom: 24px; }
  .hero__label { display: none; }
}

/* =========================================================
   2. OS INSTANTES (acordeão de fotos)
   ========================================================= */
.reel { display: flex; gap: 10px; height: 520px; margin-top: 56px; }
.reel__item {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; text-align: left;
  border-radius: 20px; background: var(--surface); transition: flex-grow .7s var(--ease);
}
.reel__item.is-active { flex-grow: 4; }
.reel__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: filter .6s var(--ease), transform 1.2s var(--ease); transform: scale(1.08); }
.reel__item.is-active img { filter: brightness(.9); transform: scale(1); }
.reel__cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-direction: column;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transform: translateY(8px); transition: .5s var(--ease);
}
.reel__item.is-active .reel__cap { opacity: 1; transform: none; transition-delay: .25s; }
.reel__cap .muted { color: #b0b0b0; }

@media (max-width: 760px) {
  .reel { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .reel::-webkit-scrollbar { display: none; }
  .reel__item, .reel__item.is-active { flex: 0 0 78%; aspect-ratio: 3/4; scroll-snap-align: center; }
  .reel__item img { filter: brightness(.85); transform: none; }
  .reel__cap { opacity: 1; transform: none; }
}

/* =========================================================
   3. 90 MINUTOS
   ========================================================= */
.match { margin-top: 56px; }
.match__shot { position: relative; aspect-ratio: 16/8; overflow: hidden; border-radius: var(--r-m); background: var(--surface); }
.match__shot img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s, transform 1.2s var(--ease); }
.match__shot img.is-swap { opacity: 0; transform: scale(1.03); }
.match__shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.7), transparent 55%); }
.match__cap { position: absolute; z-index: 1; left: 32px; bottom: 28px; display: flex; flex-direction: column; gap: 4px; }
.match__min { color: var(--accent-text); font-variant-numeric: tabular-nums; }

.match__line { position: relative; margin: 40px 12px 0; height: 56px; }
.match__track { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: #262626; border-radius: 2px; }
.match__fill { position: relative; display: block; height: 100%; width: 0; background: var(--grad); border-radius: inherit; }
/* Ponta luminosa que anda pela linha (mostra que o tempo está passando) */
.match__fill::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(0,100,255,.35), 0 0 16px rgba(0,100,255,.9); }
.mark {
  position: absolute; top: 15px; left: var(--at); width: 32px; height: 32px; margin: -16px 0 0 -16px;
  display: grid; place-items: center; border-radius: 50%;
}
/* Cada momento é um ponto; o ativo vira pílula */
.mark::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: #3a3a3a; transition: width .4s var(--ease), background .3s; }
.mark:hover::before { background: #6a6a6a; }
.mark.is-on::before { background: rgba(0,100,255,.55); }
.mark.is-active::before { width: 24px; background: var(--accent); box-shadow: 0 0 12px rgba(0,100,255,.5); }
.match__ticks { position: absolute; left: 0; right: 0; top: 34px; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .match__shot { aspect-ratio: 4/5; }
  .match__shot::after { background: linear-gradient(0deg, rgba(0,0,0,.8), transparent 55%); }
  .match__cap { left: 20px; bottom: 20px; }
}

/* =========================================================
   4. COMO FUNCIONA
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 56px; counter-reset: s; }
.step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.step .ico { margin-bottom: 16px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* =========================================================
   5. COBERTURAS (bento)
   ========================================================= */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 56px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px; min-height: 260px;
  border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s;
}
.card:hover { border-color: #2c2c2c; }
.card .ico { margin-bottom: auto; }
.card--wide { grid-column: span 2; }
.card--photo { justify-content: flex-end; border: 0; }
.card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); transition: transform 1s var(--ease), filter .6s; }
.card--photo:hover img { transform: scale(1.04); filter: brightness(.85); }
.card--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(0,0,0,.85)); }
.card__txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.card__txt .t-s { color: #c0c0c0; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .card { min-height: 200px; }
  .card--photo { min-height: 280px; }
}

/* =========================================================
   6. PARA QUEM (abas)
   ========================================================= */
.tabs { margin-top: 56px; }
.tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px; }
.tab { font-weight: var(--fw-btn); height: var(--u); padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--muted); transition: .25s; }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: #fff;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(255,255,255,.35), transparent 55%) padding-box,
    linear-gradient(180deg, #2F82FF, var(--accent) 60%, #0050D6) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(120,170,255,.35) 40%, rgba(0,100,255,.2)) border-box;
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 18px rgba(0,30,90,.35), 0 0 0 1px rgba(0,100,255,.2), 0 12px 40px -14px rgba(0,100,255,.35); }
.panel { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding: 16px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); animation: fade .5s var(--ease); }
.panel[hidden] { display: none; }
.panel__img { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; }
.panel__img img { width: 100%; height: 100%; object-fit: cover; }
.panel__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-right: 24px; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 760px) {
  .tabs__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .tab { flex: none; }
  .panel { grid-template-columns: 1fr; gap: 20px; }
  .panel__txt { padding: 0 8px 8px; }
}

/* =========================================================
   7. NOSSO OLHAR
   ========================================================= */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 32px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, transform .4s var(--ease); }
.feat:hover { border-color: #2c2c2c; transform: translateY(-2px); }
.feat .ico { margin-bottom: 12px; }
.feat .t-s { max-width: 280px; }
@media (max-width: 760px) { .feats { grid-template-columns: 1fr; gap: 12px; } }

/* =========================================================
   8. FOTTU
   ========================================================= */
.fottu { overflow: hidden; }
.gallery { display: flex; flex-direction: column; gap: 16px; margin-top: 56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.gallery__row { display: flex; gap: 16px; width: max-content; animation: drift 60s linear infinite; }
.gallery__row--rev { animation-name: drift-r; }
@keyframes drift-r { from { transform: translateX(calc(-50% - 8px)); } to { transform: none; } }
@keyframes drift { to { transform: translateX(calc(-50% - 8px)); } }
/* Mesmo tamanho dos cards de "Nosso olhar" (512×212) */
.thumb { width: 512px; height: 212px; flex: none; overflow: hidden; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: filter .4s; }
.thumb:hover img { filter: brightness(1); }
.fottu__center { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.fottu__center .tag { margin-bottom: -8px; }
@media (max-width: 760px) {
  .thumb { width: 280px; height: 170px; }
  }

/* =========================================================
   9. CONTATO
   ========================================================= */
.lead { margin-top: 16px; }
.form { margin-top: 40px; padding: 28px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field input, .field select {
  height: var(--u); padding: 0 14px; border-radius: var(--r-s); background: #0c0c0c; border: 1px solid var(--line);
  font-size: var(--fs-s); color: var(--text); outline: none; transition: border-color .2s; color-scheme: dark; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field input::placeholder { color: #555; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.field input.is-bad { border-color: #ff6b6b; }
.form__btn { width: 100%; margin-top: 8px; }
@media (max-width: 760px) { .form { padding: 20px; } .form__grid { grid-template-columns: 1fr; } }

/* =========================================================
   10. FAQ
   ========================================================= */
.faq { margin-top: 48px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.chev { width: var(--u); height: var(--u); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); transition: transform .3s var(--ease), background .3s, color .3s; }
.faq details[open] .chev { transform: rotate(180deg); background: var(--grad); color: var(--on-accent); }
.faq details p { padding: 0 64px 28px 0; }
@media (max-width: 760px) { .faq details p { padding-right: 0; } }

/* =========================================================
   RODAPÉ
   ========================================================= */
.foot { position: relative; margin-top: 48px; padding: 48px 40px 32px; border-radius: 28px 28px 0 0; border: 1px solid var(--line); border-bottom: 0; background: linear-gradient(180deg, #111 0%, #0c0c0c 100%); overflow: hidden; }
.foot__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.foot__top .nav__logo { margin-right: 0; }
.foot__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 48px; }
.foot__brand { display: flex; flex-direction: column; gap: 16px; }
.foot__wa { display: flex; align-items: center; gap: 12px; width: fit-content; line-height: 1.3; }
.foot__wa:hover .t-m { color: var(--accent-text); }
.foot__region:hover .t-m { color: var(--text); }
.foot__wa > .t-s { color: var(--muted); }
.foot__wa .t-m { color: var(--text); }
.ico--soft { background: var(--surface-2); border: 1px solid var(--line); color: var(--accent-text); }
.foot__brand { gap: 20px; }
.foot__col { display: flex; flex-direction: column; gap: 4px; }
.foot__col .foot__h { font-size: var(--fs-s); font-weight: 400; color: var(--muted); margin-bottom: 8px; }
.foot__col a { width: fit-content; min-height: 28px; display: flex; align-items: center; transition: color .2s; }
.foot__col a:hover { color: var(--accent-text); }
.social { display: flex; gap: 8px; }
.social a { width: var(--u); height: var(--u); display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); transition: .2s; }
.social a:hover { color: var(--on-accent); background: var(--grad); border-color: transparent; }
.social .i { width: 18px; height: 18px; }
.foot__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line); }
.foot__bottom nav { display: flex; gap: 20px; }
.foot__bottom a:hover { color: var(--text); }
.foot__peek { height: 140px; margin: 48px 0 -32px; overflow: hidden; display: flex; justify-content: center; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.foot__mark { flex: none; width: 280px; height: auto; opacity: .07; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .foot { margin-top: 32px; padding: 32px 20px 24px; border-radius: 20px 20px 0 0; }
  .foot__top { flex-direction: column; align-items: flex-start; }
  .foot__grid { gap: 32px 16px; padding-block: 32px; }
}

/* =========================================================
   Revelar ao rolar (com leve corte diagonal)
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .flash.is-firing { animation-duration: .4s !important; }
  .gallery__row { animation: none; }
  .slide img { transform: none !important; }
  /* O carrossel do hero continua rodando: vídeo mudo, sem piscar */
  .dot.is-on i { animation-duration: var(--dur, 7s) !important; }
  .slide { transition-duration: .6s !important; }
}

/* ---------- Faixa de vidro desfocado na base das fotos (estilo OpenArt) ---------- */
.reel__cap, .card--photo .card__txt {
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  background: linear-gradient(180deg, rgba(10,10,10,.05), rgba(10,10,10,.55));
  -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%);
}
.reel__cap { padding-top: 48px; }
.card--photo .card__txt { margin: 0 -28px -28px; padding: 44px 28px 24px; }
.card--photo::after { background: linear-gradient(transparent 55%, rgba(0,0,0,.35)); }
.reel__item, .card--photo, .thumb, .panel__img { box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.reel__item.is-active { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* ---------- Hero: troca de copy ---------- */
.hero__swap { display: block; }
.hero__swap > span { display: block; }
[data-swap], [data-h="sub"], .hero__h1 .tag { transition: opacity .38s var(--ease), transform .38s var(--ease), filter .38s; }
.is-swapping { opacity: 0; transform: translateY(10px); filter: blur(6px); }

/* Menu menos redondo: barra 16px, itens e botões 10px */
.nav__bar .nav__link, .nav__toggle { border-radius: var(--r-pill); }
.nav__bar { padding-left: 20px; }

/* Troca de foto como disparo: corte seco + clarão (substitui a abertura diagonal) */
.slide, .slide.is-on, .slide.is-out { clip-path: none !important; transition: none !important; opacity: 0; }
.slide.is-on { opacity: 1; z-index: 1; }
.slide.is-on.is-shot img { animation: shot .9s var(--ease); }
@keyframes shot { from { transform: scale(1.08); filter: brightness(1.6) contrast(1.1); } to { transform: scale(1.02); filter: none; } }

/* Pontos da linha do tempo: deixam claro que são clicáveis */
.mark { cursor: pointer; }
.mark::after { content: attr(title); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font-size: var(--fs-s); color: #fff; background: rgba(20,20,20,.9); border: 1px solid var(--line); padding: 4px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: .2s var(--ease); }
.mark:hover::after, .mark:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.mark:not(.is-active)::before { animation: markPulse 2.4s ease-in-out infinite; }
.mark:nth-of-type(3)::before { animation-delay: .3s; } .mark:nth-of-type(4)::before { animation-delay: .6s; } .mark:nth-of-type(5)::before { animation-delay: .9s; }
@keyframes markPulse { 50% { box-shadow: 0 0 0 5px rgba(0,100,255,.18); } }
.mark:hover::before { transform: scale(1.4); background: var(--accent-soft); }

/* Etiqueta do último ponto (90') alinhada à direita, sem vazar da tela */
.mark:last-of-type::after { left: auto; right: 0; transform: translate(0, 4px); }
.mark:last-of-type:hover::after { transform: translate(0, 0); }

/* Formato único dos clicáveis: quadrado com cantos suaves */
:root { --r-btn: 10px; }
.btn, .btn .shimmer__bg, .nav__bar .nav__link, .nav__toggle, .tab, .chev, .nav__links .nav__link { border-radius: var(--r-btn) !important; }

/* ---------- Topo branco + hero em destaque (estilo Superpower) ---------- */
.hero-wrap { background: var(--bg); padding: 88px 20px 20px; }
.hero {
  min-height: calc(100svh - 108px) !important; max-height: 860px; border-radius: 28px; overflow: hidden;
  padding-block: 96px 88px !important;
}
.hero__shade { background:
  linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 32%, transparent 58%),
  linear-gradient(0deg, rgba(0,0,0,.35) 0%, transparent 30%) !important; }
.hero__media img, .slide img { filter: saturate(1.08) contrast(1.04); }
.hero__dots { bottom: 28px; }

/* Menu claro enquanto está sobre o topo branco */
.logo--dark { display: none; }
.nav.is-light .logo--dark { display: block; }
.nav.is-light .logo--light { display: none; }
.nav.is-light .nav__bar::before, .nav.is-light .nav__links::before { background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.08); box-shadow: 0 4px 24px -12px rgba(0,0,0,.18); }
.nav.is-light .nav__link { color: #555; }
@media (hover: hover) { .nav.is-light .nav__link:hover { color: #111; background: rgba(0,0,0,.05); } }
.nav.is-light .nav__toggle { background: rgba(0,0,0,.06); color: #111; }
.nav__bar::before, .nav__link, .nav__toggle { transition: background .3s, color .3s, border-color .3s; }

@media (max-width: 760px) {
  .hero-wrap { padding: 80px 10px 10px; }
  .hero { min-height: calc(100svh - 90px) !important; border-radius: 22px; padding-block: 80px 64px !important; }
  .hero__shade { background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 45%, transparent 70%) !important; }
}
/* Texto do hero legível sobre fotos claras */
.hero .t-l { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero .t-l.muted { color: rgba(255,255,255,.72); }
.hero__sub { color: rgba(255,255,255,.88) !important; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__h1 .tag { color: #fff; }
.hero__label { color: rgba(255,255,255,.85); }

/* Menu dentro do card da foto */
.hero-wrap { padding-top: 20px !important; }
.hero { min-height: calc(100svh - 40px) !important; padding-top: 140px !important; }
.nav { transition: top .35s var(--ease); }
.nav.is-top { top: 40px; }
@media (max-width: 760px) {
  .hero-wrap { padding-top: 10px !important; }
  .hero { min-height: calc(100svh - 20px) !important; }
  .nav.is-top { top: 22px; }
}


/* Botões escuros neutros, no mesmo tom do menu (sem tom azulado) */
.btn--shimmer {
  --btn-bg: #0A0A0A;
  background: linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px -14px rgba(0,0,0,.8) !important;
}
.btn--shimmer:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 30px -14px rgba(0,0,0,.9) !important; background: linear-gradient(#141414, #141414) padding-box, linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.1)) border-box !important; }
.btn--shimmer .shimmer__bg { background: var(--btn-bg) !important; }
.btn--shimmer:hover .shimmer__bg { background: #141414 !important; }

/* Menu no mesmo preto dos botões escuros */
.nav__bar::before, .nav__links::before {
  background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)) border-box !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px -14px rgba(0,0,0,.8);
}