/* =====================================================================
   PÁGINA LANÇAMENTOS — "Selo de Ferro" + relógio de válvulas
   ---------------------------------------------------------------------
   Um selo de latão anuncia a data, um relógio nixie conta o tempo que
   falta e o pré-save é o botão principal. Uma só capa; o único player
   é a barra fixa do rodapé, a mesma de todas as páginas.
===================================================================== */
:root{--o-creme:#F2E7D2;--o-ouro:#D9A441;--o-brasa:#C4703A;
  --o-linha:rgba(226,196,138,.2)}
body.placa-page{background:#0B0806}
.oc{position:relative}
.oc-cena{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(96px,11vh,128px) 0 clamp(132px,15vh,178px)}

/* botão de pré-save em latão, comum às opções escuras */
.oc-presave{position:relative;overflow:hidden;display:block;width:100%;border:0;
  border-radius:7px;padding:18px 22px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#2A1B0C;background:linear-gradient(160deg,#F0C871,#D9A441 46%,#B9822C);
  box-shadow:0 16px 34px rgba(217,164,65,.24),inset 0 1px 0 rgba(255,246,224,.6);
  transition:transform .16s ease,filter .16s ease}
.oc-presave:hover{transform:translateY(-2px);filter:brightness(1.06)}
.oc-presave i{position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 36%,rgba(255,251,240,.6) 50%,transparent 64%);
  transform:translateX(-120%);animation:oc-brilho 4.6s ease-in-out 1.4s infinite}
.oc-presave b{position:relative;z-index:2;display:flex;align-items:center;
  justify-content:center;gap:11px;font-weight:600;white-space:nowrap}
@keyframes oc-brilho{0%{transform:translateX(-120%)}26%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.oc-presave i{animation:none;opacity:0}}


/* =====================================================================
   OPÇÃO 2 — SELO DE FERRO
   Um selo redondo de latão, como marca de ferro de fazenda.
===================================================================== */
/* A mesa: uma faixa horizontal de madeira embaixo e penumbra em cima.
   Como a foto não tem assunto, ela aguenta ser cortada em qualquer
   proporção — é o mesmo arquivo no desktop, no tablet e no celular; o
   que muda é só o ponto de ancoragem vertical.
   O tampo começa a 58,7% da altura do arquivo: por isso o
   background-position abaixo, para a capa cair sempre sobre ele. */
.o2-fundo{position:absolute;inset:-1px;z-index:-1;background:
  /* véu: escurece o alto (onde ficam selo e título) e o pé da cena */
  linear-gradient(180deg,rgba(11,8,6,.9) 0%,rgba(11,8,6,.58) 26%,
    rgba(11,8,6,.34) 48%,rgba(11,8,6,.5) 74%,rgba(11,8,6,.88) 100%),
  /* sombra localizada atrás da coluna do selo, para o latão destacar */
  radial-gradient(58% 56% at 76% 40%,rgba(11,8,6,.72),transparent 74%),
  url("../images/mesa.webp") center 44%/cover no-repeat,
  #0D0906}
/* No celular e no tablet a capa cai embaixo, então o tampo precisa subir:
   a imagem é ampliada 18% na altura e ancorada quase no pé, o que traz a
   borda da mesa para cima da capa. É o mesmo arquivo — muda só a âncora. */
@media(max-width:1023px){
  .o2-fundo{background:
    linear-gradient(180deg,rgba(11,8,6,.94) 0%,rgba(11,8,6,.86) 26%,
      rgba(11,8,6,.7) 44%,rgba(11,8,6,.34) 58%,rgba(11,8,6,.22) 74%,
      rgba(11,8,6,.44) 90%,rgba(11,8,6,.8) 100%),
    radial-gradient(92% 34% at 50% 20%,rgba(11,8,6,.8),transparent 78%),
    url("../images/mesa.webp") center 92%/auto 118% no-repeat,
    #0D0906}}
/* mesma caixa do resto do site (.wrap): o conteúdo alinha exatamente
   com o logo e o menu do header, na mesma largura das outras páginas */
.o2-in{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 20px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,72px);align-items:center}
@media(min-width:640px){.o2-in{padding:0 32px}}
.o2-capa{margin:0;position:relative;justify-self:start;width:min(100%,500px)}
/* a capa deixa de ser um retângulo colado e passa a ser um OBJETO:
   papel fotográfico com borda, levemente torto, com sombra de contato
   na mesa. É isso que vende a ilusão de estar apoiada ali. */
.o2-capa img{display:block;width:100%;height:auto;
  padding:clamp(6px,.72vw,10px);background:#E0D2B4;border-radius:2px;
  transform:rotate(-1.4deg);
  box-shadow:inset 0 0 0 1px rgba(60,40,18,.22),
    0 2px 3px rgba(0,0,0,.55),0 24px 40px rgba(0,0,0,.66),
    0 58px 88px rgba(0,0,0,.52)}
/* sombra de contato: a linha escura onde o papel encosta na madeira */
.o2-capa::after{content:"";position:absolute;left:2%;right:0;bottom:-14px;height:34px;
  z-index:-1;pointer-events:none;transform:rotate(-1.4deg);
  background:radial-gradient(62% 100% at 50% 0,rgba(0,0,0,.9),transparent 74%);
  filter:blur(9px)}
.o2-dir{display:flex;flex-direction:column;align-items:center;text-align:center}

.o2-selo{position:relative;width:min(100%,296px);aspect-ratio:1;display:grid;
  place-items:center;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 22%,#3A2A16,#171009 70%);
  box-shadow:0 0 0 2px rgba(217,164,65,.5),0 0 0 12px rgba(217,164,65,.08),
    0 0 0 13px rgba(217,164,65,.34),0 30px 60px rgba(0,0,0,.6),
    inset 0 2px 18px rgba(240,200,113,.12)}
.o2-anel{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  animation:o2-gira 46s linear infinite}
.o2-anel text{font-family:var(--display);font-size:8.8px;font-weight:600;
  letter-spacing:.24em;fill:rgba(240,200,113,.72);text-transform:uppercase}
@keyframes o2-gira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.o2-anel{animation:none}}
.o2-miolo{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;padding:0 16%}
.o2-estrelas{display:flex;gap:7px;color:var(--o-ouro);opacity:.8}
.o2-dia{margin-top:10px;font-family:var(--titulo);font-weight:400;line-height:.86;
  font-size:clamp(3.4rem,8.6vw,4.6rem);color:#FBF3E0;
  text-shadow:0 2px 0 rgba(0,0,0,.45)}
.o2-mes{margin-top:6px;font-size:10px;letter-spacing:.36em;text-transform:uppercase;
  color:var(--o-ouro)}
.o2-fio{width:52%;height:1px;margin:13px 0;background:rgba(217,164,65,.4)}
.o2-hora{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(242,231,210,.62)}

.o2-kick{margin-top:clamp(20px,2.4vw,26px);font-size:10px;letter-spacing:.38em;
  text-transform:uppercase;color:var(--o-ouro)}
.o2-tit{margin-top:10px;font-family:var(--titulo);font-weight:400;line-height:1.04;
  font-size:clamp(1.9rem,3.4vw,2.5rem);color:var(--o-creme)}
.o2-sub{margin-top:10px;max-width:26rem;font-size:.92rem;line-height:1.68;
  color:rgba(242,231,210,.6)}
.o2-conta{display:flex;justify-content:center;gap:clamp(18px,3vw,32px);
  margin-top:clamp(16px,2vw,22px);list-style:none;padding:0}
.o2-conta b{display:block;font-family:var(--display);font-weight:var(--tw);
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1;color:var(--o-creme);
  font-variant-numeric:tabular-nums}
.o2-conta span{display:block;margin-top:7px;font-size:8.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(242,231,210,.42)}
/* o botão ocupa a coluna inteira: assim o conteúdo encosta nas duas
   bordas da caixa do site, igual ao header */
.o2-dir .oc-presave{max-width:none}
.o2-nota{margin-top:13px;max-width:26rem;font-size:.8rem;line-height:1.64;
  color:rgba(242,231,210,.45)}
.o2-nota b{color:rgba(242,231,210,.78);font-weight:500}
@media(max-width:1023px){
  .o2-in{grid-template-columns:minmax(0,1fr);justify-items:center}
  .o2-capa{justify-self:center;width:min(100%,400px);order:2}
  .o2-dir{order:1}
}


.rl{display:flex;flex-direction:column;align-items:center;
  margin-top:clamp(18px,2.2vw,26px)}
.rl-faltam{font-size:9px;letter-spacing:.36em;text-transform:uppercase;
  color:rgba(242,231,210,.42);margin-bottom:11px}
.rl-conta{display:flex;gap:8px;list-style:none;padding:0;margin:0}
.rl-conta li{display:flex;flex-direction:column;align-items:center}
.rl-conta span{margin-top:8px;font-size:8px;letter-spacing:.26em;
  text-transform:uppercase;color:rgba(242,231,210,.4)}
.rl-data{margin-top:14px}
@media(prefers-reduced-motion:reduce){
  .rl-conta li,.rl-conta li b,.d-plate::before{animation:none!important}}


/* =====================================================================
   B · VÁLVULAS NIXIE
   Números incandescentes dentro do vidro, como os relógios de válvula.
===================================================================== */
.b-cel{position:relative;display:block;min-width:70px;padding:17px 12px 16px;
  border-radius:10px 10px 7px 7px;text-align:center;
  font-family:var(--display);font-weight:var(--tw);font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,3vw,2.35rem);line-height:1;
  color:#FFB65E;
  text-shadow:0 0 5px rgba(255,150,40,.95),0 0 16px rgba(255,120,20,.7),
    0 0 34px rgba(255,90,10,.45);
  background:
    linear-gradient(180deg,rgba(255,180,90,.09),transparent 46%),
    radial-gradient(120% 80% at 50% 108%,rgba(255,120,30,.16),transparent 62%),
    linear-gradient(160deg,#1A1410,#0B0806);
  border:1px solid rgba(255,170,80,.2);
  box-shadow:0 0 22px rgba(255,120,30,.16),inset 0 0 22px rgba(255,120,30,.1),
    0 8px 18px rgba(0,0,0,.5);
  animation:b-tremula 5.2s ease-in-out infinite}
/* malha fina do vidro */
.b-cel::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.5;
  pointer-events:none;background:
    repeating-linear-gradient(90deg,rgba(255,190,110,.07) 0 1px,transparent 1px 4px)}
/* reflexo no vidro */
.b-cel::after{content:"";position:absolute;left:11%;top:8%;width:16%;height:52%;
  border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,215,.16),transparent)}
@keyframes b-tremula{0%,100%{filter:brightness(1)}42%{filter:brightness(1.05)}
  46%{filter:brightness(.95)}52%{filter:brightness(1.03)}}
.rl-b .rl-conta li.muda .b-cel{animation:b-acende .34s ease-out}
@keyframes b-acende{0%{filter:brightness(1.5)}100%{filter:brightness(1)}}
.b-data{display:inline-flex;align-items:center;gap:11px;padding:9px 17px;
  border-radius:999px;border:1px solid rgba(255,170,80,.22);
  background:linear-gradient(160deg,#161009,#0B0806);
  font-family:var(--display);font-weight:var(--tw);font-size:13px;letter-spacing:.2em;
  color:#FFB65E;text-shadow:0 0 8px rgba(255,130,30,.6)}
.b-data em{font-style:normal;color:rgba(242,231,210,.5);text-shadow:none;
  font-size:10px;letter-spacing:.24em}


/* ---------------------------------------------------------------------
   O relógio de válvulas é mais alto que uma linha simples de números,
   então a coluna encolhe um pouco para caber na tela sem rolagem.
--------------------------------------------------------------------- */
.o2-selo{width:min(100%,244px)}
.o2-dia{font-size:clamp(2.9rem,7vw,3.7rem)}
.o2-kick{margin-top:clamp(15px,1.8vw,20px)}
.o2-tit{margin-top:7px;font-size:clamp(1.8rem,3vw,2.2rem)}
.o2-sub{margin-top:8px;font-size:.88rem;line-height:1.62;max-width:34rem}
.rl{margin-top:clamp(14px,1.8vw,20px)}
.rl-faltam{margin-bottom:9px}
.rl-data{margin-top:11px}
.o2-dir .oc-presave{margin-top:clamp(14px,1.8vw,20px)}
.o2-nota{margin-top:11px;font-size:.76rem;max-width:32rem}
@media(max-width:640px){
  .b-cel{min-width:0;padding-left:8px;padding-right:8px}
  .rl-conta{gap:5px}
  .es-lojas{grid-template-columns:1fr}
}

/* ---------- painel ilustrativo do pré-save ---------- */
.es-modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(6,4,3,.82)}
.es-modal[hidden]{display:none}
.es-modal-cx{position:relative;width:100%;max-width:430px;border-radius:14px;
  padding:34px 30px 30px;background:#15100B;border:1px solid var(--es-linha);
  box-shadow:0 40px 90px rgba(0,0,0,.7)}
.es-fechar{position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(226,196,138,.2);background:transparent;cursor:pointer;
  color:rgba(242,231,210,.6);font-size:17px;line-height:1;transition:.18s}
.es-fechar:hover{color:var(--es-ouro);border-color:var(--es-linha)}
.es-modal-cx h2{margin-top:10px;font-family:var(--titulo);font-weight:400;
  font-size:1.5rem;color:var(--es-creme)}
.es-modal-tx{margin-top:12px;font-size:.9rem;line-height:1.7;color:rgba(242,231,210,.7)}
.es-lojas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;
  list-style:none;padding:0}
.es-lojas li span{display:block;padding:13px 10px;border-radius:8px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  color:rgba(242,231,210,.62);border:1px solid var(--es-linha);
  background:rgba(255,246,230,.03)}
.es-modal-aviso{margin-top:20px;font-size:.75rem;line-height:1.66;
  color:rgba(242,231,210,.4)}
.es-modal-aviso code{font-family:ui-monospace,monospace;font-size:.72rem;
  color:rgba(242,231,210,.8)}