:root {
    --bg0: #000000; --bg1: #010101; --bg2: #020201;
    --border: rgba(230,185,74,.10);
    --border2: rgba(255,216,106,.22);
    --t1: #f5edd8; --t2: #cdbf9b; --t3: #8d8062;
    --accent: #e6b94a; --accent2: #fff1a8;
    --accent-rgb: 230 185 74;
    --glass: rgba(1,1,1,.86);
    --btn-ink: #0d0900;
    --shadow2: 0 14px 52px rgba(0,0,0,.82), 0 0 22px rgba(230,185,74,.05);
    --shadow3: 0 30px 100px rgba(0,0,0,.94), 0 0 44px rgba(255,216,106,.06);
    --paper: #fbf7ee; --paper-ink: #1c1913;
    --err: #c96a5a; --ok: #8fbf7a;
    --serif: 'EB Garamond', Georgia, serif;
    --display: 'Cinzel', serif;
    --letreiro: 'Valdemar', 'Cinzel', serif;   
    --sans: 'Inter', system-ui, sans-serif;
    
    --fade: 0ms;
    --stroke: 0px; --stroke-a: 0; --glow-a: .04;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  
  html { scroll-behavior: smooth; overflow-x: clip; }
  body {
    background: var(--bg0);
    color: var(--t1);
    font-family: var(--serif);
    font-size: 19px; line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    transition: background .6s ease, color .6s ease;
  }
  ::selection { background: rgb(var(--accent-rgb) / .35); }

  #sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  main, header, footer { position: relative; z-index: 1; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }


  .btn-primary {
    font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .03em;
    color: var(--btn-ink); background: linear-gradient(135deg, var(--accent2), var(--accent));
    padding: 15px 35px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 8px 40px rgb(var(--accent-rgb) / .38);
    transition: transform .15s, box-shadow .25s;
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 56px rgb(var(--accent-rgb) / .58); }

  h2 { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; letter-spacing: .02em; }

  .shot-frame {
    border: 1px solid var(--border2); border-radius: 14px; overflow: hidden;
    box-shadow: var(--shadow3); background: var(--bg1);
    transition: border-color .6s ease, background .6s ease;
  }
  .shot-frame img { width: 100%; display: block; }

  .faq { max-width: 760px; margin: 56px auto 0; text-align: left; }
  .faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
  .faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px;
    font-family: var(--display); font-size: 18.5px; padding: 20px 6px; letter-spacing: .02em;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: '+'; font-family: var(--sans); color: var(--accent); font-size: 22px; transition: transform .25s; flex: 0 0 auto; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { padding: 0 6px 22px; color: var(--t2); font-size: 17.5px; }
  .faq code { font-size: .85em; color: var(--accent); }


  .stub {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    aspect-ratio: 16 / 9; border: 1px dashed rgb(var(--accent-rgb) / .38); border-radius: 12px;
    background: repeating-linear-gradient(135deg, rgb(var(--accent-rgb) / .028) 0 12px, transparent 12px 24px);
    text-align: center; padding: 24px;
  }
  .stub .st-t { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
  .stub .st-d { font-size: 14.5px; color: var(--t3); max-width: 420px; line-height: 1.6; }


  .btn-primary, .cta-mini, .foco-toggle, .plano .p-cta, .to-top {
    
    background: linear-gradient(180deg,
        rgb(var(--accent-rgb) / .22),
        rgb(var(--accent-rgb) / .09));
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    color: color-mix(in oklab, var(--accent) 42%, #fff7e6);
    border: 0;
    border-radius: 999px;
    font-family: 'Marcellus', var(--serif);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 400;
    white-space: nowrap;
    box-shadow:
      inset 0 1px 0 rgb(var(--accent-rgb) / .5),
      inset 0 -1px 0 rgb(0 0 0 / .5),
      inset 0 0 0 1px rgb(var(--accent-rgb) / .4),
      0 2px 12px rgb(0 0 0 / .42),
      0 1px 0 rgb(0 0 0 / .6);
    transition: box-shadow .22s ease, transform .12s ease;
  }
  .btn-primary:hover, .cta-mini:hover, .foco-toggle:hover, .plano .p-cta:hover, .to-top:hover {
    transform: none;
    box-shadow:
      inset 0 1px 0 rgb(var(--accent-rgb) / .8),
      inset 0 -1px 0 rgb(0 0 0 / .5),
      inset 0 0 0 1px rgb(var(--accent-rgb) / .72),
      0 3px 16px rgb(0 0 0 / .46),
      0 1px 0 rgb(0 0 0 / .6);
  }
  .btn-primary:active, .cta-mini:active, .foco-toggle:active, .plano .p-cta:active {
    transform: translateY(1px);
    box-shadow:
      inset 0 1px 0 rgb(var(--accent-rgb) / .28),
      inset 0 0 0 1px rgb(var(--accent-rgb) / .5),
      0 1px 5px rgb(0 0 0 / .4);
  }

  .sec-kicker, .kicker, .rt-eyebrow {
    font-family: var(--serif);
    
    font-variant-caps: all-small-caps;
    text-transform: none;
    letter-spacing: .13em;
    
    font-size: clamp(15px, .82rem + .3vw, 18px);
    font-weight: 400;
    color: var(--t3);
    margin-bottom: 9px;
  }
  
  .sec-kicker::before, .kicker::before, .rt-eyebrow::before {
    content: '';
    display: inline-block;
    width: 4px; height: 4px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    vertical-align: .12em;
    margin-right: 9px;
    background: rgb(var(--accent-rgb) / .8);
  }
  
  .hero .kicker { font-size: clamp(12px, .58rem + .3vw, 15px); letter-spacing: .14em; }
  .hero .kicker::before { width: 4px; height: 4px; margin-right: 8px; }
  html.js .sec-kicker.rv.on { letter-spacing: .13em; }


  .mark{ position:relative; z-index:2; display:flex; flex-direction:column;
    align-items:center; gap:clamp(10px,1.4vw,20px); margin-top:8px; }

  .mark .the{ position:relative; display:inline-block; font-family:var(--letreiro);
    font-weight:500; letter-spacing:.42em; text-indent:.42em;
    font-size:clamp(15px,2.4vw,26px); line-height:1.15; opacity:.9; }
  .mark .the-sizer,.mark .the-gold,.mark .the-film,.mark .the-gleam{
    font:inherit; letter-spacing:inherit; text-indent:inherit; }
  .mark .the-sizer{ visibility:hidden; }
  .mark .the-gold,.mark .the-film,.mark .the-gleam{ position:absolute; inset:0; }
  .mark .the-gold{ z-index:1; -webkit-text-fill-color:transparent; color:transparent;
    background:linear-gradient(180deg,#fff3b0,#ecc65e 50%,#cda43e);
    -webkit-background-clip:text; background-clip:text; }
  .mark .the-film{ z-index:2; -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    background-size:cover; background-position:center 42%; background-repeat:no-repeat; opacity:0; }
  .mark .the-gleam{ z-index:3; -webkit-text-fill-color:transparent; color:transparent;
    background:linear-gradient(100deg, transparent 42%, rgba(255,248,210,.95) 49%, transparent 57%);
    -webkit-background-clip:text; background-clip:text;
    background-size:280% 100%; background-position:170% 0; opacity:0; }

  .mark .word{ position:relative; display:inline-block; }
  .mark .word .sizer{ visibility:hidden; }
  .mark .word .layer{ position:absolute; inset:0; z-index:2;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    background-size:cover; background-position:center 42%; background-repeat:no-repeat;
    will-change:opacity; filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
  .mark .word .layer.b{ opacity:0; }
  .mark .word .layer.fade{ transition:opacity var(--fade) linear; }
  
  .mark .word .goldfill{ position:absolute; inset:0; z-index:1;
    -webkit-text-fill-color:transparent; color:transparent;
    background:linear-gradient(180deg,#fff3b0 4%, #ecc65e 44%, #cda43e 72%, #a97f2c);
    -webkit-background-clip:text; background-clip:text;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.55)); transition:opacity 1s ease; }
  .mark .sizer,.mark .word .layer,.mark .word .frameink,.mark .word .goldfill,.mark .word .gleam{
    font-family:var(--letreiro); font-weight:700;
    
    font-size:clamp(82px, 22vw, 236px); line-height:1.06; letter-spacing:.01em; }
  
  .mark .word .frameink{ position:absolute; inset:0; z-index:3; color:transparent;
    -webkit-text-stroke:var(--stroke) rgb(var(--accent-rgb) / var(--stroke-a));
    text-shadow:0 0 10px rgb(var(--accent-rgb) / var(--glow-a)); pointer-events:none; }
  .mark .word .gleam{ position:absolute; inset:0; z-index:2; pointer-events:none;
    -webkit-text-fill-color:transparent; color:transparent;
    background:linear-gradient(100deg, transparent 42%, rgba(255,248,210,.95) 49%, transparent 57%);
    -webkit-background-clip:text; background-clip:text;
    background-size:280% 100%; background-position:170% 0; opacity:0; }

  .hero .caption{ margin-top:16px; position:relative; z-index:2;
    font-family:var(--sans); text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:.55em; min-height:2.7em; }
  .hero .caption .cap-pre{ font-size:11px; letter-spacing:.3em; color:var(--t3); font-weight:400; }
  .hero .caption .cap-pre::after{ content:':'; }
  .hero .caption .cap-genre{ font-size:15px; letter-spacing:.24em; color:var(--accent2); font-weight:600; }
  @media (max-width:520px){
    .hero .caption .cap-pre{ font-size:10px; letter-spacing:.24em; }
    .hero .caption .cap-genre{ font-size:13px; }
  }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

  @keyframes riseThe   { from{opacity:0; transform:translateY(46px);  filter:blur(3px)} to{opacity:.9;  transform:none; filter:blur(0)} }
  @keyframes riseWord  { from{opacity:0; transform:translateY(118px) scale(1.05); filter:blur(4px)} to{opacity:1; transform:none; filter:blur(0)} }
  @keyframes riseSigilHero{ from{opacity:0; transform:translateY(70px); filter:blur(3px)} to{opacity:1; transform:none; filter:blur(0)} }
  @keyframes ignite    { 0%{transform:scale(1)} 30%{transform:scale(1.045)} 60%{transform:scale(.994)} 100%{transform:scale(1)} }
  @keyframes wipeUp    { from{clip-path:inset(100% 0 0 0)} to{clip-path:inset(0 0 0 0)} }
  @keyframes gleamSweep{ 0%{opacity:0; background-position:170% 0} 12%{opacity:1} 100%{opacity:0; background-position:-70% 0} }
  
  body.intro .hero .hero-logo{ animation:riseSigilHero 1.15s cubic-bezier(.19,.6,.24,1) both; }
  body.intro .mark .the { animation:riseThe  1.0s cubic-bezier(.19,.6,.24,1) .12s both; }
  body.intro .mark .word{ animation:riseWord 1.15s cubic-bezier(.19,.6,.24,1) .08s both; }
  body.intro .hero .caption{ opacity:0; }
  body.intro.rolling .hero .caption{ opacity:1; transition:opacity .7s ease; }
  body.igniting .mark{ animation:ignite .5s cubic-bezier(.3,1.4,.5,1); }
  .mark .word .layer.flood{ animation:wipeUp .6s cubic-bezier(.25,.72,.2,1) forwards; }
  .mark .the-film.flood { animation:wipeUp .6s cubic-bezier(.25,.72,.2,1) forwards; }
  .mark .word .gleam.go { animation:gleamSweep .6s ease-out; }
  .mark .the-gleam.go   { animation:gleamSweep .6s ease-out; }

  .hero .vig{ position:absolute; inset:0; pointer-events:none; z-index:4;
        background:radial-gradient(125% 105% at 50% 45%, transparent 72%, rgba(0,0,0,.42) 100%); }

  @media (prefers-reduced-motion:reduce){
    body.intro .hero .hero-logo,body.intro .mark .the,body.intro .mark .word,
    body.intro .hero .caption,body.igniting .mark{ animation:none; opacity:1; }
    .hero .fx{ animation:none; }
  }