/* Old West · padrão visual do site. Regras e motivos em MANUAL.md. Toda página usa este arquivo; o CSS de cada página só cuida do próprio layout. */
:root{
  /* Cor: couro escuro de fundo, palha no texto, latão como o único acento. */
  --couro:#1C140E;        /* fundo da página */
  --sela:#261B13;         /* cartão */
  --sela-2:#33251A;       /* controle e cartão elevado */
  --sela-3:#3E2E21;       /* controle pressionado ou em foco */
  --borda:rgba(241,230,208,.10);
  --palha:#F1E6D0;        /* texto principal e papel do ingresso */
  --poeira:#BFAE93;       /* texto de apoio */
  --latao:#CFA052;        /* acento: botão principal, rótulo, foco */
  --latao-claro:#DDB46A;  /* acento ao passar o mouse */
  --tinta:#22170F;        /* texto sobre latão e sobre papel */
  --tinta-2:#5A4632;      /* texto de apoio sobre papel */
  --zap:#128C4A;          /* só ações que abrem o WhatsApp */
  --zap-claro:#169C53;
  --brasa:#C8402E;        /* só "ao vivo" e urgência */
  --brasa-texto:#F08A79;
  --ok:#7FD99B;           /* só estado concluído ou aberto */
  --linha:rgba(207,160,82,.42); /* pesponto */

  /* Tipo: Ultra só em título curto; Archivo no resto. */
  --f-display:"Ultra","Rockwell Extra Bold","Rockwell",Georgia,serif;
  --f-corpo:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Espaço em múltiplos de 4. */
  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;

  /* Raio: 8 selo, 12 controle, 16 cartão, 20 cartão grande. */
  --r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;

  /* Controle: 44px é o mínimo de toque; 52px é o botão principal. */
  --ctl:44px;--ctl-lg:52px;

  --press:160ms;--ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  margin:0;min-height:100%;
  background:var(--couro);
  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 type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .6 0 0 0 0 .35 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 60% at 50% 0%,#2E2016 0%,var(--couro) 70%);
  color:var(--palha);font:400 16px/1.5 var(--f-corpo);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--latao);outline-offset:3px;border-radius:var(--r-sm)}
[id]{scroll-margin-top:var(--e5)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lado{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* Texto de interface não selecionável: evita o sublinhado do "toque para pesquisar" do Chrome no Android. */
.ui,.btn,.rotulo,.selo{-webkit-user-select:none;user-select:none}

/* Tipografia */
.t-display{margin:0;font:400 clamp(34px,10vw,44px)/1 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.t-titulo{margin:0;font:800 22px/1.2 var(--f-corpo);font-stretch:105%;text-wrap:balance}
.t-destaque{margin:0;font:800 17px/1.3 var(--f-corpo);font-stretch:104%}
.t-apoio{margin:0;font-size:15px;line-height:1.5;color:var(--poeira)}
.t-legenda{margin:0;font-size:13px;line-height:1.4;color:var(--poeira)}
.rotulo{margin:0 0 var(--e3);font:700 12px/1 var(--f-corpo);font-stretch:118%;letter-spacing:.14em;text-transform:uppercase;color:var(--latao)}

/* Botões: um principal por tela. Pressionar encolhe de leve; passar o mouse muda o fundo, nunca sublinha. */
.btn{
  display:flex;align-items:center;justify-content:center;gap:var(--e2);
  min-height:var(--ctl);padding:0 var(--e4);border:1px solid transparent;border-radius:var(--r);
  font:700 15px/1.2 var(--f-corpo);text-align:center;cursor:pointer;touch-action:manipulation;
  transition:transform var(--press) var(--ease),background-color var(--press) var(--ease);
}
.btn:active{transform:scale(.97)}
.btn .ico{width:20px;height:20px}
.btn-principal{min-height:var(--ctl-lg);background:var(--latao);color:var(--tinta);font-size:16px;font-weight:800}
.btn-principal:hover{background:var(--latao-claro)}
.btn-zap{min-height:var(--ctl-lg);background:var(--zap);color:#fff;font-size:16px}
.btn-zap:hover{background:var(--zap-claro)}
.btn-zap .ico{fill:currentColor;stroke:none;width:22px;height:22px}
.btn-secundario{background:var(--sela-2);border-color:var(--borda);color:var(--palha)}
.btn-secundario:hover{background:var(--sela-3)}
.btn-texto{background:none;color:var(--poeira);font-weight:600}
.btn-texto:hover{background:var(--sela)}
.btn-texto b{color:var(--palha)}

/* Superfícies */
.cartao{position:relative;background:var(--sela);border-radius:var(--r-xl);padding:var(--e5) var(--e4) var(--e4)}
.costura::after{content:"";position:absolute;inset:6px;border:1.5px dashed var(--linha);border-radius:calc(var(--r-xl) - 6px);pointer-events:none}
.selo{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;font:600 12px/1 var(--f-corpo);background:rgba(241,230,208,.07);color:var(--poeira);white-space:nowrap}
.selo i{width:7px;height:7px;border-radius:50%;background:currentColor}
.selo.ok{color:var(--ok);background:rgba(18,140,74,.16)}
.selo.vivo{color:#fff;background:var(--brasa)}

/* Ingresso do Grupo VIP: papel palha com canhoto de latão e picote. */
.ingresso{
  --corte:80px;
  display:grid;grid-template-columns:var(--corte) 1fr;
  background:var(--palha);color:var(--tinta);border-radius:var(--r-lg);
  -webkit-mask:radial-gradient(circle at var(--corte) 0,#0000 10px,#000 10.5px) top/100% 51% no-repeat,radial-gradient(circle at var(--corte) 100%,#0000 10px,#000 10.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at var(--corte) 0,#0000 10px,#000 10.5px) top/100% 51% no-repeat,radial-gradient(circle at var(--corte) 100%,#0000 10px,#000 10.5px) bottom/100% 51% no-repeat;
}
.ingresso .canhoto{display:grid;place-items:center;background:var(--latao);color:var(--tinta);border-radius:var(--r-lg) 0 0 var(--r-lg);border-right:2px dashed rgba(34,23,15,.35)}
.ingresso .canhoto span{writing-mode:vertical-rl;transform:rotate(180deg);font:400 28px/1 var(--f-display);letter-spacing:.06em}

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