/* Design v3 — "Cinema": o site como um filme. Gradação teal & âmbar, letterbox, ficha técnica, créditos. */
/* TOKENS E PADRÕES GLOBAIS: cores, tipografia, foco e ícones. */
:root {
  --ink:#091014;
  --deep:#0e1a1f;
  --line:#24363c;
  --bone:#ece6d8;
  --mute:#9db0b0;
  --amber:#ffa73d;
  --disp:'Big Shoulders Display',Impact,sans-serif;
  --serif:'Newsreader',Georgia,serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:70px
}

body {
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font:400 18px/1.65 var(--serif);
  -webkit-font-smoothing:antialiased
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")
}

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

img {
  display:block;
  max-width:100%
}

[hidden] {
  display:none!important
}

:focus-visible {
  outline:2px solid var(--amber);
  outline-offset:3px
}

h1,h2,h3 {
  font-family:var(--disp);
  font-weight:900;
  text-transform:uppercase;
  line-height:.9;
  margin:0
}

h2 {
  font-size:clamp(44px,6.4vw,92px);
  letter-spacing:-.01em
}

h2 em,.tag {
  font:italic 400 .52em/1.1 var(--serif);
  text-transform:none;
  letter-spacing:0;
  color:var(--amber)
}

.kick,.section-kicker {
  font:italic 400 17px var(--serif);
  color:var(--amber);
  margin:0 0 18px;
  text-transform:lowercase
}

.kick::first-letter,.section-kicker::first-letter {
  text-transform:uppercase
}

.note {
  font-style:italic;
  color:var(--mute);
  font-size:15px
}

.arrow-icon {
  width:1em;
  height:1em;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  vertical-align:-.12em
}

/* CABEÇALHO: marca, navegação e botões principais. */
.top {
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  height:68px;
  padding:0 clamp(20px,5vw,72px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(#091014e6,#09101400)
}

.mark {
  font:900 30px var(--disp);
  letter-spacing:-.04em
}

.mark i {
  color:var(--amber);
  font-style:normal
}

.top nav {
  display:flex;
  gap:34px;
  font-size:15px;
  color:#cfd6d3
}

.top nav a:hover {
  color:var(--amber)
}

.pill,.button {
  font:700 15px var(--serif);
  display:inline-flex;
  gap:14px;
  align-items:center;
  padding:13px 22px;
  border-radius:99px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s,color .25s,transform .25s
}

.pill {
  border-color:#ece6d855
}

.pill:hover {
  background:var(--bone);
  color:var(--ink)
}

.button-green {
  background:var(--amber);
  color:#1a0f02
}

.button-green:hover {
  background:#ffbd6b
}

.button-line {
  border-color:#ece6d880
}

.button-line:hover {
  background:var(--bone);
  color:var(--ink)
}

/* HERO: foto de fundo, contraste, título e animação de abertura. */
.hero {
  position:relative;
  min-height:max(640px,100svh);
  display:flex;
  align-items:center;
  padding:0 clamp(22px,8vw,130px);
  overflow:hidden
}

.hero-img {
  position:absolute;
  inset:0;
  background:url(images/lucas1-hd.webp) 68% 40%/cover;
  filter:saturate(.85) contrast(1.05)
}

.grade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#091014 0%,#091014ee 30%,#0910145c 62%,#09101400 100%),radial-gradient(60% 70% at 88% 85%,#ff8a1f55,transparent 70%),linear-gradient(0deg,#091014 0%,transparent 28%)
}

.bar {
  position:absolute;
  left:0;
  right:0;
  height:9vh;
  background:#000;
  z-index:3
}

.bar-t {
  top:0
}

.bar-b {
  bottom:0
}

.title-card {
  position:relative;
  z-index:2;
  max-width:640px;
  padding-top:8vh
}

.presents {
  font:italic 400 18px var(--serif);
  color:var(--mute);
  margin:0 0 20px
}

h1 {
  font-size:clamp(84px,13vw,190px);
  letter-spacing:-.02em
}

.tag {
  font-size:clamp(30px,3.6vw,48px);
  margin:10px 0 26px
}

.lede {
  max-width:430px;
  color:#d4dad6;
  margin-bottom:30px
}

.billing {
  position:absolute;
  z-index:4;
  bottom:calc(4.5vh - .7em);
  left:0;
  right:0;
  text-align:center;
  font:500 12px var(--disp);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#c9d0cd;
  margin:0
}

/* ANIMAÇÕES: executa o movimento de abertura somente quando permitido no sistema. */
@media(prefers-reduced-motion:no-preference) {
  .bar {
    animation:open 1.5s .35s cubic-bezier(.77,0,.18,1) both
  }

  .bar-t {
    --from:-50svh
  }

  .bar-b {
    --from:50svh
  }

  @keyframes open {
    from {
      transform:translateY(calc(var(--from)*-1 * -1));
      height:50svh;
      transform:none
    }

    to {
      height:9vh
    }

  }

  .title-card,.billing {
    animation:rise 1.1s 1.5s cubic-bezier(.23,1,.32,1) both
  }

  @keyframes rise {
    from {
      opacity:0;
      transform:translateY(16px)
    }

    to {
      opacity:1;
      transform:none
    }

  }

  .billing {
    animation-name:fade
  }

  @keyframes fade {
    from {
      opacity:0
    }

    to {
      opacity:1
    }

  }

}

/* ESPAÇAMENTO COMUM: ritmo vertical das seções principais. */
.synopsis,.sheet,.cenas,.reel,.about,.quiz,.faq,.end {
  padding:clamp(70px,10vw,140px) clamp(22px,8vw,130px)
}

.big {
  font-size:clamp(26px,3.4vw,46px);
  line-height:1.3;
  max-width:24em;
  margin:0 0 70px;
  font-weight:400
}

/* FICHA TÉCNICA E CRÉDITOS: informações em colunas. */
.credits,.sheet dl {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:0;
  border-top:1px solid var(--line)
}

.credits>div,.sheet dl>div {
  padding:24px 24px 0 0
}

.credits>div+div {
  padding-left:24px;
  border-left:1px solid var(--line)
}

dt {
  font:700 14px var(--disp);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--amber);
  margin-bottom:10px
}

dd {
  margin:0;
  color:#cfd6d3;
  font-size:17px
}

.sheet {
  background:var(--deep);
  padding-block:70px
}

.sheet dl {
  grid-template-columns:repeat(4,1fr)
}

.sheet dl>div+div {
  padding-left:24px;
  border-left:1px solid var(--line)
}

.sheet b {
  font:900 44px var(--disp);
  color:var(--bone);
  margin-right:6px;
  vertical-align:-3px
}

/* COMO FUNCIONA: etapas numeradas do acompanhamento. */
.cenas ol {
  list-style:none;
  margin:60px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  counter-reset:c
}

.cenas li {
  border-top:2px solid var(--amber);
  padding-top:18px
}

.cena-n {
  font:italic 400 15px var(--serif);
  color:var(--amber)
}

.cenas h3 {
  font-size:42px;
  margin:8px 0 10px
}

.cenas li p {
  color:var(--mute);
  font-size:16px;
  margin:0
}

/* GALERIA: faixa horizontal com encaixe e rolagem lateral. */
.reel {
  padding-inline:0;
  background:#050a0c;
  text-align:left
}

.reel h2,.reel .note {
  padding-inline:clamp(22px,8vw,130px)
}

.strip {
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:46px clamp(22px,8vw,130px) 26px;
  margin-top:30px;
  position:relative;
  scrollbar-width:thin;
  scrollbar-color:var(--amber) transparent;
  background:linear-gradient(#050a0c,#050a0c)
}

.strip figure {
  flex:0 0 min(78vw,340px);
  margin:0;
  scroll-snap-align:start;
  position:relative
}

.strip img {
  aspect-ratio:4/5;
  width:100%;
  object-fit:cover;
  filter:saturate(.8) contrast(1.05);
  border:1px solid #ffffff1a
}

.strip figcaption {
  font:italic 400 16px var(--serif);
  color:var(--mute);
  margin-top:10px
}

/* SOBRE: retrato e apresentação profissional. */
.about {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(30px,7vw,100px);
  align-items:center
}

.about img {
  aspect-ratio:4/5;
  object-fit:cover;
  width:100%;
  filter:saturate(.85)
}

.about h2 {
  margin-bottom:24px
}

.about p:not(.kick) {
  max-width:34em;
  color:#cfd6d3
}

/* QUIZ: formulário, opções selecionáveis e mensagem de prévia. */
.quiz {
  background:var(--deep)
}

.quiz-layout,.faq-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(30px,7vw,100px);
  align-items:start
}

.quiz-layout>div>p,.faq-layout>div>p {
  color:var(--mute);
  max-width:26em;
  margin:22px 0
}

.quiz-form {
  display:flex;
  flex-direction:column;
  gap:24px;
  border:1px solid var(--line);
  padding:clamp(20px,3vw,36px);
  background:var(--ink)
}

.quiz fieldset {
  border:0;
  margin:0;
  padding:0
}

.quiz legend {
  font:900 26px var(--disp);
  text-transform:uppercase;
  margin-bottom:12px;
  padding:0
}

.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.chips label {
  cursor:pointer
}

.chips input {
  position:absolute;
  opacity:0;
  pointer-events:none
}

.chips span {
  display:block;
  padding:10px 16px;
  border:1px solid #3a4f55;
  border-radius:99px;
  font-size:16px;
  transition:background .2s,color .2s
}

.chips input:checked+span {
  background:var(--amber);
  color:#1a0f02;
  border-color:var(--amber);
  font-weight:700
}

.chips input:focus-visible+span {
  outline:2px solid var(--bone);
  outline-offset:3px
}

.quiz-name {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:15px
}

.quiz-name span {
  color:var(--mute)
}

.quiz-name input {
  font:16px var(--serif);
  color:var(--bone);
  background:var(--deep);
  border:1px solid var(--line);
  padding:13px;
  border-radius:8px
}

.quiz-preview {
  margin:0;
  padding:14px 16px;
  border-left:2px solid var(--amber);
  background:var(--deep);
  font-style:italic;
  color:#cfd6d3;
  min-height:52px
}

.quiz-form .button {
  align-self:flex-start
}

.quiz-form .button[aria-disabled=true] {
  opacity:.4;
  cursor:not-allowed
}

.quiz-count {
  color:var(--mute);
  font-size:14px
}

/* FAQ: perguntas expansíveis nativas do HTML. */
.faq-list details {
  border-top:1px solid var(--line);
  padding:20px 0
}

.faq-list details:last-child {
  border-bottom:1px solid var(--line)
}

.faq-list summary {
  cursor:pointer;
  font:900 26px var(--disp);
  text-transform:uppercase;
  list-style:none;
  display:flex;
  justify-content:space-between
}

.faq-list summary::after {
  content:"+";
  color:var(--amber)
}

.faq-list details[open] summary::after {
  content:"–"
}

.faq-list details p {
  color:var(--mute);
  margin:12px 0 0
}

/* CONTATO E RODAPÉ: chamadas finais e canais oficiais. */
.end {
  text-align:center;
  background:radial-gradient(70% 60% at 50% 100%,#ff8a1f2e,transparent 70%),var(--ink)
}

.roll {
  display:flex;
  justify-content:center;
  gap:clamp(30px,8vw,120px);
  margin:0 0 50px;
  flex-wrap:wrap
}

.roll p {
  margin:0;
  font:900 clamp(34px,5vw,64px)/1 var(--disp);
  text-transform:uppercase
}

.roll span {
  display:block;
  font:italic 400 16px var(--serif);
  text-transform:none;
  color:var(--mute);
  margin-bottom:8px
}

.end h2 {
  margin-bottom:36px
}

.end-actions {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:26px
}

footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:22px clamp(22px,5vw,72px);
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--mute)
}

footer a:hover {
  color:var(--amber)
}

/* RESPONSIVIDADE: reorganiza colunas, galeria e formulários em telas menores. */
@media(max-width:860px) {
  .top nav {
    display:none
  }

  .credits,.sheet dl,.cenas ol,.about,.quiz-layout,.faq-layout {
    grid-template-columns:1fr
  }

  .credits>div+div,.sheet dl>div+div {
    border-left:0;
    padding-left:0
  }

  .sheet dl>div,.credits>div {
    padding:20px 0;
    border-bottom:1px solid var(--line)
  }

  .sheet dl,.credits {
    border-top:0
  }

  .hero-img {
    background-position:74% 30%
  }

  .grade {
    background:linear-gradient(0deg,#091014 8%,#091014c0 48%,#09101440 100%)
  }

  .hero {
    align-items:flex-end;
    padding-bottom:16vh
  }

  .bar {
    height:7vh
  }

  .quiz-form .button {
    align-self:stretch;
    justify-content:center
  }

}

/* Antes e depois: mesmo formato da galeria (fila rolável), fotos puras, sem efeitos */
/* RESULTADOS: comparativos antes/depois em faixa rolável. */
.results {
  padding:clamp(70px,10vw,140px) 0;
  background:linear-gradient(var(--ink),var(--deep))
}

.res-copy {
  max-width:640px;
  margin:0 clamp(22px,8vw,130px) 10px
}

.res-copy h2 {
  margin-bottom:22px
}

.res-copy>p:not(.kick) {
  color:var(--mute);
  margin-bottom:28px
}

.res-strip {
  background:none
}

.res-strip figure {
  flex:0 0 auto
}

.res-strip .ba-img {
  position:relative;
  display:block
}

.res-strip img {
  width:auto;
  max-width:none;
  height:min(62vh,520px);
  aspect-ratio:auto;
  object-fit:cover;
  filter:none
}

.ba-l,.ba-r {
  position:absolute;
  top:12px;
  padding:5px 14px;
  border-radius:99px;
  font:700 13px var(--disp);
  letter-spacing:.2em;
  text-transform:uppercase;
  background:#091014d9;
  color:var(--bone)
}

.ba-l {
  left:12px
}

.ba-r {
  right:12px;
  background:var(--amber);
  color:#1a0f02
}

.res-note {
  margin:6px clamp(22px,8vw,130px) 0;
  max-width:46em
}

@media(max-width:860px) {
  .res-strip img {
    height:min(56vh,430px)
  }

}

/* Texto do hero começa ~10 mm abaixo do cabeçalho fixo (68px) */
.hero {
  padding-top:calc(68px + 10mm)
}

@media(min-width:861px) {
  .hero {
    align-items:flex-start;
    padding-bottom:calc(9vh + 40px)
  }

  .title-card {
    padding-top:0
  }

}

/* Selos para fotos inteiras com antes e depois empilhados */
/* ETIQUETAS DE ANTES/DEPOIS para fotos empilhadas. */
.ba-t,.ba-bt {
  position:absolute;
  left:12px;
  padding:5px 14px;
  border-radius:99px;
  font:700 13px var(--disp);
  letter-spacing:.2em;
  text-transform:uppercase
}

.ba-t {
  top:12px;
  background:var(--amber);
  color:#1a0f02
}

.ba-bt {
  bottom:12px;
  background:#091014d9;
  color:var(--bone)
}

/* Menu do celular: botão ☰ na barra fixa abre um painel com os tópicos */
/* MENU RESPONSIVO: controle e painel de navegação para celulares. */
.menu-btn {
  display:none
}

@media(max-width:860px) {
  .top {
    gap:8px
  }

  .pill {
    margin-left:auto;
    padding:10px 16px;
    font-size:14px
  }

  .menu-btn {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:7px;
    width:44px;
    height:44px;
    padding:0;
    background:none;
    border:1px solid #ece6d855;
    border-radius:50%;
    cursor:pointer
  }

  .menu-btn span {
    display:block;
    width:20px;
    height:2px;
    background:var(--bone);
    transition:transform .25s
  }

  .top.open .menu-btn span:first-child {
    transform:translateY(4.5px) rotate(45deg)
  }

  .top.open .menu-btn span:last-child {
    transform:translateY(-4.5px) rotate(-45deg)
  }

  .top.open {
    background:var(--ink)
  }

  .top nav {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    gap:0;
    padding:6px clamp(20px,5vw,72px) 22px;
    background:var(--ink);
    border-bottom:1px solid var(--line);
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .25s,transform .25s,visibility .25s
  }

  .top.open nav {
    visibility:visible;
    opacity:1;
    transform:none
  }

  .top nav a {
    padding:16px 0;
    border-bottom:1px solid var(--line);
    font:900 30px/1 var(--disp);
    text-transform:uppercase;
    letter-spacing:.01em;
    color:var(--bone)
  }

  .top nav a:last-child {
    border-bottom:0
  }

}