/* ============================================================
   STORGE — CAMADA DE TESTE

   Carrega DEPOIS do style.css e só por cima dele. Nada aqui apaga
   regra antiga: tudo é acréscimo ou ajuste de cor/espaço.
   Para desligar, basta tirar o <link> dele do index.html.

   As cores novas saíram do @storgendv, não foram inventadas.
   ============================================================ */

:root{
  --grama:#15663A;      /* verde-grama: fundo de seção inteira */
  --grama-claro:#9FE0AB;
  --ouro:#EFB22B;       /* amarelo-ouro: letreiro, destaque de data */
  --caneta:#2F3E9E;     /* azul-caneta: o logotipo sobre o amarelo */
  --papel:#F4F1E8;
  --carvao:#111A14;
  --linha:#27322C;
}

/* ---------------- MENU EM PÍLULA ---------------- */
.nav__in{
  max-width:1120px;margin:0 auto;
  background:rgba(12,18,13,.82);
  border:1px solid rgba(244,241,232,.16);
  border-radius:999px;
  padding:10px 12px 10px 22px;
  backdrop-filter:blur(8px);
}
.nav{background:transparent;border-bottom:0;padding:14px 20px}
.nav.is-stuck{background:transparent}
.nav.is-stuck .nav__in{background:rgba(8,13,9,.94)}
.nav__ig{background:var(--ouro);color:#15190F;border-radius:999px;padding:8px 15px}
.nav__ig:hover{background:#ffc94a;color:#15190F}

/* ---------------- TOPO: ETIQUETAS DE CANTO ---------------- */
.etiq{
  position:absolute;top:118px;left:0;right:0;
  display:flex;justify-content:flex-start;align-items:flex-start;
  padding:0 44px;z-index:3;pointer-events:none;
}
.etiq__b{
  font-family:var(--corpo);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;line-height:1.85;
  color:#CBD3CE;text-shadow:0 1px 10px rgba(0,0,0,.75);
}
.etiq__v{color:var(--verde)}

/* ---------------- TOPO: TIRA DE DADOS ---------------- */
/* O conteúdo do topo sobe para abrir espaço: sem isso a tira passava por
   cima do botão "Ativar som" e da setinha de descer. */
.hero__content{padding-bottom:188px}
.hero__down{bottom:18px}

.tira{
  position:absolute;left:0;right:0;bottom:74px;z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 44px;pointer-events:none;
}
.tira__c{text-align:center}
.tira__c:first-child{text-align:left}
.tira__c:last-child{text-align:right}
.tira__l{
  display:block;font-family:var(--corpo);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#CBD3CE;
  text-shadow:0 1px 10px rgba(0,0,0,.75);
}
.tira__v{
  display:block;margin-top:3px;font-family:var(--display);font-weight:900;
  font-size:21px;letter-spacing:.02em;color:var(--branco);
  text-shadow:0 1px 12px rgba(0,0,0,.75);
}
.tira__v--verde{color:var(--verde)}

/* ---------------- LETREIRO ROLANTE ---------------- */
.letreiro{background:var(--ouro);overflow:hidden;padding:10px 0;position:relative;z-index:4}
.letreiro__in{display:flex;width:max-content;animation:correr 32s linear infinite}
.letreiro span{
  font-family:var(--display);font-weight:900;font-size:25px;
  letter-spacing:.04em;text-transform:uppercase;color:#15190F;
  white-space:nowrap;padding-right:24px;
}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.letreiro__in{animation:none}}

/* ---------------- CARTÃO DO EVENTO ---------------- */
.camp{max-width:var(--wrap);margin:0 auto;padding:56px 24px 8px}
.camp__grade{display:grid;grid-template-columns:1.05fr 1fr;gap:22px}

.cartao{
  border-radius:20px;overflow:hidden;background:var(--carvao);
  border:1px solid var(--linha);display:flex;flex-direction:column;
}
.cartao__foto{position:relative;height:212px}
.cartao__foto img{width:100%;height:100%;object-fit:cover;display:block}
.cartao__veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,13,9,.1) 40%,rgba(17,26,20,.96) 100%)}
.cartao__selo{
  position:absolute;top:16px;left:18px;
  font-family:var(--corpo);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;background:var(--verde);color:#06180A;
  padding:6px 12px;border-radius:999px;
}
.cartao__corpo{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px;flex-grow:1}
.cartao__logo{height:26px;width:auto;display:block}
.cartao__t{
  font-family:var(--display);font-weight:900;font-size:40px;line-height:.9;
  text-transform:uppercase;margin:10px 0 0;color:var(--branco);
}
.cartao__d{margin:0;font-size:14px;line-height:1.5;color:#B9C2BC}
.cartao__dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:auto}
.dado{display:flex;gap:10px;align-items:flex-start}
.dado svg{flex-shrink:0;margin-top:2px;width:17px;height:17px}
.dado__l{font-family:var(--corpo);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8A948E}
.dado__v{font-size:13.5px;font-weight:600;margin-top:2px;color:var(--branco)}
.dado__v span{color:#B9C2BC;font-weight:400}

/* ---------------- CONTAGEM ---------------- */
.camp__lado{display:flex;flex-direction:column;gap:20px}
.conta{background:var(--ouro);color:#15190F;border-radius:20px;padding:24px 26px}
.conta__l{font-family:var(--corpo);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.74}

/* ---------------- O RELÓGIO ---------------- */
.relogio{display:flex;align-items:flex-start;gap:6px;margin-top:12px}
.relogio__c{display:flex;flex-direction:column;align-items:center;flex:1 1 auto;min-width:0}
.relogio__c b{
  font-family:var(--display);font-weight:900;font-size:62px;line-height:.86;
  letter-spacing:.01em;
  /* números de largura fixa: sem isso o relógio treme a cada segundo */
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.relogio__c span{
  font-family:var(--corpo);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-top:5px;opacity:.74;
}
.relogio > i{
  font-family:var(--display);font-weight:900;font-size:44px;line-height:1.2;
  font-style:normal;opacity:.4;flex:0 0 auto;
}
.relogio--chegou .relogio__c b{color:#15663A}

/* ---------------- PROVA SOCIAL ---------------- */
.prova{
  background:var(--carvao);border:1px solid var(--linha);border-radius:20px;
  padding:22px 24px;display:flex;flex-direction:column;gap:14px;flex-grow:1;
}
.prova__topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.prova__t{font-family:var(--display);font-weight:900;font-size:28px;text-transform:uppercase;line-height:.95;color:var(--branco);margin:0}
.prova__tag{font-family:var(--corpo);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A948E;text-align:right}
.prova__fotos{display:flex;gap:12px;align-items:flex-start}
.pola{background:var(--papel);padding:7px 7px 22px;border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.4);flex-shrink:0}
.pola img{width:136px;height:102px;object-fit:cover;display:block}
.pola--a{transform:rotate(-3.5deg)}
.pola--b{transform:rotate(2.5deg);margin-top:10px}
.prova__d{margin:0;font-size:13.5px;line-height:1.5;color:#B9C2BC}
.prova__link{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;
  font-family:var(--corpo);font-size:12.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--verde);text-decoration:none;
}
.prova__link:hover{color:#54ff66}

/* ---------------- ETIQUETAS NA FICHA ---------------- */
.form .fs > legend{position:relative}
.form .fs > legend::before{
  content:"// ";color:var(--grama);font-weight:700;letter-spacing:.1em;
}
.panel .trilha__p.is-on i{background:var(--grama);color:var(--papel)}
.panel .trilha__p.is-feito i{background:var(--verde);color:#06180A}

/* ---------------- RESPONSIVO ---------------- */
@media(max-width:980px){
  .camp__grade{grid-template-columns:1fr}
}
@media(max-width:820px){
  .etiq{top:100px;padding:0 20px}
  .etiq__b{font-size:9.5px;letter-spacing:.14em}
  .hero__content{padding-bottom:150px}
  .tira{bottom:62px;padding:0 20px}
  .tira__v{font-size:16px}
  .tira__l{font-size:9px;letter-spacing:.12em}
  .letreiro span{font-size:19px}
  .camp{padding:38px 20px 4px}
  .relogio{gap:3px}
  .relogio__c b{font-size:36px}
  .relogio > i{font-size:24px;line-height:1.3}
  .relogio__c span{font-size:8.5px;letter-spacing:.1em;margin-top:4px}
  .cartao__t{font-size:32px}
  .nav{padding:10px 12px}
  .nav__in{padding:9px 10px 9px 16px}
}
@media(max-width:400px){
  .relogio__c b{font-size:31px}
  .relogio > i{font-size:20px}
}
@media(max-width:560px){
  .etiq{display:none}
  .prova__fotos{justify-content:center}
  .pola img{width:116px;height:86px}
}