:root{
  --bg:#0b0906; --paper:#d9ccaa; --paper-d:#b9a97f; --ink:#1b1610;
  --cream:#efe6cf; --red:#a3211b; --green:#5ec98a; --folder:#3a3222;
  --type:'Special Elite','Courier Prime',monospace;
  --serif:'Playfair Display',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--cream);font-family:var(--type);min-height:100vh;overflow-x:hidden;position:relative}

/* ---------- Parede (fundo) ---------- */
.wall{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b0906}
.cork{position:absolute;inset:0;
  background:
    url(assets/bg.webp) 62% center/cover no-repeat,
    #0b0906;
}
.cork::after{content:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .13  0 0 0 0 .07  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 65% 45%,transparent 40%,rgba(0,0,0,.55) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
/* ---------- Barra superior / rodapé ---------- */
.topbar,.foot{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem clamp(1rem,3vw,2.5rem);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#cfc6ad;
  background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}
.topbar em{color:#7a7462;font-style:normal;margin:0 .3rem}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:.4rem;animation:blink 2.2s infinite}
@keyframes blink{50%{opacity:.25}}
.status{color:var(--green);border:1px solid rgba(94,201,138,.45);padding:.25rem .6rem;background:rgba(0,0,0,.4)}
.foot{font-size:.62rem;color:#8b846f;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8));margin-top:2rem}

/* ---------- Pasta (imagem Nano Banana) ---------- */
.stage{position:relative;z-index:5;display:grid;place-items:center;padding:.5rem clamp(.8rem,3vw,3rem);min-height:calc(100vh - 100px)}
.folder{position:relative;container-type:inline-size;
  width:min(100%,1180px,calc((100vh - 120px)*1.353));aspect-ratio:1678/1240;
  background:url(assets/pasta.webp) center/100% 100% no-repeat;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.75))}
.folder{
  --fs-kicker:max(.6rem,.95cqw);--fs-title:max(1.8rem,4.6cqw);--fs-sub:max(.7rem,1.15cqw);--fs-pitch:max(.82rem,1.4cqw);
  --fs-h2:max(1rem,2.2cqw);--fs-label:max(.6rem,.95cqw);--fs-input:max(.85rem,1.45cqw);--fs-btn:max(.9rem,1.7cqw);
}
.tab-label{position:absolute;left:4.2%;top:2.6%;width:17%;text-align:center;font-size:max(.55rem,.9cqw);letter-spacing:.12em;color:#4a3d24;transform:rotate(-.4deg)}

/* aba esquerda: título e texto datilografados na pasta */
.flap{position:absolute;left:5%;top:16%;width:40%;height:76%;display:flex;flex-direction:column;justify-content:center;gap:2.2cqw;color:#2a2010}
.kicker{font-size:var(--fs-kicker);letter-spacing:.22em;text-transform:uppercase;color:#6b5a38}
h1{font:900 var(--fs-title)/1.02 var(--serif);color:#1f1a10;mix-blend-mode:multiply}
.sub{font-size:var(--fs-sub);margin-top:-.8cqw;color:#3b3220}
.sub strong{color:#a3211b}
.pitch{font:var(--fs-pitch)/1.6 'Courier Prime',monospace;color:#2f2616}
.pitch em{color:#a3211b;font-style:normal;font-weight:700}
.countdown{display:flex;gap:.9cqw}
.countdown div{flex:1;background:rgba(30,20,8,.82);border:1px solid rgba(0,0,0,.4);padding:.8cqw .4cqw;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.countdown b{display:block;font:700 max(1.1rem,2.3cqw) var(--type);color:var(--cream)}
.countdown span{font-size:max(.5rem,.75cqw);letter-spacing:.15em;text-transform:uppercase;color:#b9ae90}

.stamp-conf{position:absolute;left:29%;top:11%;z-index:3;font:400 max(.9rem,2.1cqw) var(--type);letter-spacing:.14em;color:#b3241c;
  border:.3cqw solid #b3241c;padding:.3cqw 1.1cqw;transform:rotate(-6deg);mix-blend-mode:multiply;opacity:.9}

/* folha da direita: formulário */
.sheet{position:absolute;left:53%;top:20%;width:43.5%;height:74%;color:var(--ink);display:flex;flex-direction:column;justify-content:center}
.sheet form{margin-top:-2cqw}
.sheet h2{font:400 var(--fs-h2) var(--type);letter-spacing:.06em;text-transform:uppercase;text-align:center;margin-bottom:2.2cqw;color:#1f1a10}
.sheet h2 small{display:block;font-size:var(--fs-label);color:#6b5a38;letter-spacing:.22em;margin-top:.2cqw}

label{display:block;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:#4a3d24;margin-bottom:1.9cqw}
input[type=text],input[type=email],input[type=tel]{display:block;width:100%;margin-top:.5cqw;background:rgba(255,250,235,.5);color:var(--ink);
  border:0;border-bottom:2px solid #5a4a2a;padding:.9cqw .9cqw;font:var(--fs-input) 'Courier Prime',monospace;outline:none;transition:box-shadow .2s,background .2s}
input::placeholder{color:#8f8460;font-style:italic}
input:focus{background:#fffaf0;box-shadow:0 2px 0 2px var(--red)}
input.bad{box-shadow:0 2px 0 2px var(--red)}
.check{display:flex;gap:.9cqw;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:max(.7rem,1.1cqw);line-height:1.4;font-family:'Courier Prime',monospace;cursor:pointer}
.check input{accent-color:var(--red);width:1.4cqw;height:1.4cqw;min-width:15px;min-height:15px;margin-top:.1cqw;flex:none}
.error{color:#a3211b;font-size:max(.72rem,1.1cqw);margin-bottom:.8cqw}
#btn{width:100%;cursor:pointer;border:0;padding:1.4cqw;background:#14110c;color:var(--cream);
  font:400 var(--fs-btn) var(--type);letter-spacing:.14em;transition:transform .15s,background .2s;
  border-top:1px solid rgba(255,255,255,.12);box-shadow:0 .5cqw 0 #000,0 1cqw 2cqw rgba(0,0,0,.5)}
#btn:hover{background:var(--red);transform:translateY(-2px)}
#btn:active{transform:translateY(3px);box-shadow:0 2px 0 #000}
#btn:disabled{opacity:.6;cursor:wait}
.fine{font-size:max(.6rem,.9cqw);color:#6b5a38;text-align:center;margin-top:1.3cqw;font-family:'Courier Prime',monospace}

.success{text-align:center;padding:2cqw 0;font:max(.85rem,1.4cqw)/1.6 'Courier Prime',monospace}
.stamp{display:inline-block;font:400 max(1.1rem,2.6cqw) var(--type);letter-spacing:.12em;color:#b3241c;border:.4cqw solid #b3241c;padding:.6cqw 1.6cqw;transform:rotate(-5deg);margin-bottom:2cqw;animation:stamp .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{from{transform:rotate(-5deg) scale(2.2);opacity:0}}
.success .num{font-size:max(1rem,1.8cqw);margin:.8cqw 0 1.6cqw}
.success .num b{color:#a3211b}

/* ---------- Mobile: título/texto soltos sobre o mural, só a folha vira imagem ---------- */
@media (max-width:860px){
  .wall{position:absolute;height:100%;min-height:100vh}
  .cork{background:url(assets/bg-mobile.webp) top center/100% auto no-repeat,#0b0906;-webkit-mask-image:linear-gradient(#000 calc(177.8vw - 260px),transparent 177.8vw);mask-image:linear-gradient(#000 calc(177.8vw - 260px),transparent 177.8vw)}
  .wall::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.25) 0,rgba(0,0,0,.5) 55vh,transparent 100vh)}
  .topbar{font-size:.6rem;flex-wrap:wrap}.foot{flex-direction:column;text-align:center;font-size:.58rem}
  .stage{place-items:start center;padding:1rem 1rem 0}
  .folder{container-type:normal;width:100%;aspect-ratio:auto;background:none;filter:none;display:flex;flex-direction:column;gap:1.4rem;
    --fs-kicker:.68rem;--fs-title:2.4rem;--fs-sub:.8rem;--fs-pitch:1rem;--fs-h2:1.25rem;--fs-label:.72rem;--fs-input:1rem;--fs-btn:1.05rem}
  .tab-label{display:none}
  .flap{position:static;width:auto;height:auto;gap:1rem;color:#efe6cf}
  .kicker{color:#cfc6ad}
  h1{color:#efe6cf;mix-blend-mode:normal;text-shadow:0 2px 10px #000}
  .sub{color:#d9cfb2;margin-top:-.4rem;text-shadow:0 1px 4px #000}
  .sub strong{color:#ff6b5e;text-shadow:0 1px 4px #000,0 0 10px #000}
  .pitch{color:#e4dcc5;text-shadow:0 1px 3px #000,0 0 14px #000}
  .pitch em{color:#e0453b}
  .countdown{gap:.5rem}.countdown div{padding:.5rem;background:rgba(0,0,0,.7)}
  .countdown b{font-size:1.5rem}.countdown span{font-size:.6rem}
  .stamp-conf{position:relative;left:auto;top:auto;align-self:flex-end;margin:.4rem .6rem -3.3rem 0;z-index:3;font-size:.95rem;border-width:3px;padding:.15rem .6rem;mix-blend-mode:normal;color:#e0453b;border-color:#e0453b;background:rgba(15,8,4,.7)}
  .sheet form{margin-top:0}
  .sheet{position:relative;left:auto;top:auto;width:100%;height:auto;display:block;margin-top:.6rem;filter:drop-shadow(0 20px 30px rgba(0,0,0,.7));
    background:url(assets/pasta-folha.webp) center/100% 100% no-repeat;padding:26% 9% 9%}
  .sheet h2{margin-bottom:1.1rem}
  label{margin-bottom:.9rem}
  input[type=text],input[type=email],input[type=tel]{margin-top:.35rem;padding:.75rem .8rem}
  .check{font-size:.78rem;gap:.7rem}.check input{width:18px;height:18px}
  #btn{padding:1rem;box-shadow:0 5px 0 #000,0 8px 20px rgba(0,0,0,.5)}
  .fine{font-size:.66rem;margin-top:1rem}.error{font-size:.8rem}
  .success{font-size:.95rem;padding:1rem 0}.stamp{font-size:1.3rem;padding:.4rem 1rem;border-width:3px;margin-bottom:1rem}
  .success .num{font-size:1.1rem}
}

/* ---------- Capa da pasta (só celular) ---------- */
.cover,.pitch-short{display:none}
@media (max-width:860px){
  .pitch{display:none}
  .pitch-short{display:block;font:1rem/1.5 'Courier Prime',monospace;color:#e4dcc5;text-shadow:0 1px 3px #000,0 0 14px #000}
  .pitch-short em{color:#ff6b5e;font-style:normal;font-weight:700}
  .stage{padding-top:.4rem}
  .folder{gap:.9rem}
  .flap{gap:.7rem}
  h1{font-size:min(2.15rem,8.6vw);white-space:nowrap}
  .countdown div{padding:.35rem}.countdown b{font-size:1.25rem}
  .stamp-conf{display:none}

  .sheet{isolation:isolate;perspective:1500px;padding:26% 9% 9%;background:none;margin-top:.2rem}
  .sheet::before{content:"";position:absolute;inset:0;z-index:-1;background:url(assets/pasta-folha.webp) center/100% 100% no-repeat;transition:opacity .6s .35s}
  .sheet form,.sheet .success{transition:opacity .6s .55s}

  .cover{display:block;position:absolute;inset:-1.5% -2.5% -1.5% -2.5%;z-index:5;cursor:pointer;
    background:url(assets/pasta-fechada.webp) center/100% 100% no-repeat;filter:drop-shadow(0 18px 26px rgba(0,0,0,.75));
    transform-origin:left center;transition:transform 1.15s cubic-bezier(.65,.02,.25,1),opacity .3s .85s;backface-visibility:hidden;-webkit-tap-highlight-color:transparent}
  .cover span{position:absolute;color:#3a2a14;pointer-events:none}
  .cv-tab{left:6%;top:1.4%;font-size:.6rem;letter-spacing:.14em}
  .cv-stamp{left:14%;top:21%;font:400 1.5rem var(--type);letter-spacing:.14em;color:#b3241c!important;border:.2rem solid #b3241c;padding:.2rem .8rem;transform:rotate(-7deg);mix-blend-mode:multiply;opacity:.92}
  .cv-title{left:0;right:0;top:34%;text-align:center;font:900 1.7rem/1.15 var(--serif);color:#2b1e0c;mix-blend-mode:multiply;letter-spacing:.02em}
  .cv-hint{left:0;right:0;bottom:9%;text-align:center;font-size:.8rem;letter-spacing:.2em;color:#4a3518;animation:hint 1.8s ease-in-out infinite}
  @keyframes hint{50%{opacity:.35}}

  /* fechada: só a capa aparece, altura = proporção da pasta */
  html.m-closed .sheet{aspect-ratio:995/1375;height:auto;padding:0}
  html.m-closed .sheet::before{opacity:0;transition:none}
  html.m-closed .sheet form,html.m-closed .sheet .success{position:absolute;visibility:hidden;opacity:0;transition:none}
  /* aberta: a capa gira pela lateral e some */
  html:not(.m-closed) .cover{transform:rotateY(-155deg);opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.cv-hint{animation:none}.cover{transition:none!important}}

/* ================= Ajustes finais ================= */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.foot a,.top-right a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot a:hover{color:#efe6cf}
.check a{color:#7a1a14;text-decoration:underline;text-underline-offset:2px}
.sub strong,.pitch strong{color:#a3211b}
.pitch strong{font-weight:700}

/* topo: áudio + status */
.top-right{display:flex;align-items:center;gap:.7rem}
.audio{width:auto;background:rgba(0,0,0,.45);color:#cfc6ad;border:1px solid rgba(207,198,173,.35);padding:.28rem .7rem;font:400 .72rem var(--type);letter-spacing:.08em;box-shadow:none;cursor:pointer;text-transform:uppercase}
.audio:hover{background:rgba(163,33,27,.5);transform:none;color:#fff}
.audio[aria-pressed="true"]{color:#5ec98a;border-color:rgba(94,201,138,.55)}

/* prova social real */
.proof{font-size:max(.72rem,1.05cqw);letter-spacing:.06em;color:#5b4a2a}
.proof b{color:#a3211b;font-size:1.25em}

/* atmosfera: brilho da lâmpada, poeira e leve zoom */
.glow{position:absolute;left:74%;top:5%;width:34vw;height:34vw;transform:translate(-50%,-30%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,200,120,.32) 0,rgba(255,180,90,.10) 35%,transparent 65%);mix-blend-mode:screen;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.85}}
#dust{position:absolute;inset:0;pointer-events:none}
.cork{animation:kb 45s ease-in-out infinite alternate;transform-origin:70% 20%}
@keyframes kb{to{transform:scale(1.05)}}

/* sucesso: compartilhar */
.share-t{margin-top:1.4cqw;font-size:max(.75rem,1.2cqw)}
.share{display:flex;gap:1cqw;justify-content:center;flex-wrap:wrap;margin-top:1cqw}
.linkbtn{display:inline-block;width:auto;background:#14110c;color:var(--cream);border:0;padding:1cqw 1.6cqw;font:400 max(.7rem,1.1cqw) var(--type);letter-spacing:.1em;text-decoration:none;cursor:pointer;box-shadow:0 .4cqw 0 #000}
.linkbtn:hover{background:var(--red);transform:none}

@media (max-width:860px){
  .top-right{gap:.5rem}
  .audio{font-size:.6rem;padding:.2rem .5rem}
  .glow{left:50%;top:0;width:110vw;height:110vw;transform:translate(-50%,-25%)}
  .cork{animation:none}
  .proof{font-size:.8rem;color:#e4dcc5;text-shadow:0 1px 3px #000}
  .proof b{color:#ff6b5e}
  .sub strong{color:#ff6b5e}
  .share-t{font-size:.85rem;margin-top:1rem}
  .share{gap:.6rem;margin-top:.7rem}
  .linkbtn{padding:.7rem 1rem;font-size:.75rem;box-shadow:0 3px 0 #000}
}
@media (prefers-reduced-motion:reduce){.glow,.cork{animation:none}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= Celular: legibilidade + convite para abrir a pasta ================= */
@media (max-width:860px){
  /* fundo mais escuro atrás dos textos (mural ainda aparece, mas não compete com a leitura) */
  .wall::after{background:linear-gradient(rgba(0,0,0,.62) 0,rgba(0,0,0,.8) 42vh,rgba(0,0,0,.6) 80vh,rgba(0,0,0,.25) 115vh,transparent 140vh)}
  .kicker,.sub{text-shadow:0 1px 4px #000,0 0 12px #000}
  h1{text-shadow:0 2px 12px #000,0 0 24px rgba(0,0,0,.9)}
  .pitch-short{color:#f1e9d2;text-shadow:0 1px 3px #000,0 0 16px #000}

  /* botão bem visível sobre a capa */
  .cover span.cv-hint{left:50%;right:auto;bottom:7%;transform:translateX(-50%);width:max-content;max-width:88%;
    background:#14110c;color:#efe6cf;font:400 1.05rem var(--type);letter-spacing:.14em;padding:.95rem 1.5rem;border-radius:2px;
    box-shadow:0 5px 0 #000,0 10px 24px rgba(0,0,0,.55),0 0 0 2px rgba(239,230,207,.25);animation:tapPulse 1.6s ease-in-out infinite;text-align:center}
  .cover span.cv-hint::after{content:" →";display:inline-block;animation:nudge 1.2s ease-in-out infinite}
  @keyframes tapPulse{0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 5px 0 #000,0 10px 24px rgba(0,0,0,.55),0 0 0 2px rgba(239,230,207,.25)}
    50%{transform:translateX(-50%) scale(1.06);box-shadow:0 5px 0 #000,0 10px 24px rgba(0,0,0,.55),0 0 0 8px rgba(239,230,207,.12)}}
  @keyframes nudge{50%{transform:translateX(5px)}}

  /* a capa "espia": abre uma frestinha de tempos em tempos para chamar o toque */
  html.m-closed .cover{animation:peek 3.6s ease-in-out 1.2s infinite}
  @keyframes peek{0%,62%,100%{transform:rotateY(0)}72%{transform:rotateY(-11deg)}82%{transform:rotateY(0)}88%{transform:rotateY(-6deg)}94%{transform:rotateY(0)}}
}
@media (prefers-reduced-motion:reduce){.cover span.cv-hint,.cover span.cv-hint::after,html.m-closed .cover{animation:none!important}}