/* FLAMANGO — components.css · cards, bilhetes, loja, patrocinio, forms, reveal */

/* GRIDS */
.grid{display:grid;gap:18px;grid-template-columns:1fr}
.grid-4{display:grid;gap:16px;grid-template-columns:1fr}
.grid-2{display:grid;gap:16px;grid-template-columns:1fr}

/* FEATURE CARDS (sobre) */
.card-mini{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 20px 20px;overflow:hidden;
  transition:transform .2s var(--ease),border-color .2s}
.card-mini::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--rubro)}
.card-mini:hover{transform:translateY(-4px);border-color:var(--line2)}
.card-mini h3{color:#fff;font-size:1.3rem;margin-bottom:8px}
.card-mini p{color:var(--mute);font-size:.92rem}

/* CARD BASE */
.card{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 20px;transition:transform .2s var(--ease),border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--line2)}
.card h3{color:#fff;font-size:1.25rem;margin-bottom:6px}
.card p{color:var(--mute);font-size:.9rem}
.preco{font-family:'Anton',sans-serif;color:var(--rubro);font-size:1.9rem;line-height:1;margin:10px 0 4px}

/* BILHETES (ingressos) — serrilha de bilhete */
#ingressosGrid .card{position:relative;padding-left:30px;background:var(--panel2);border:0;border-radius:10px;
  -webkit-mask:radial-gradient(circle 7px at left center,transparent 7px,#000 7.5px) left/100% 24px repeat-y;
          mask:radial-gradient(circle 7px at left center,transparent 7px,#000 7.5px) left/100% 24px repeat-y}
#ingressosGrid .card::before{content:"";position:absolute;left:10px;top:14px;bottom:14px;width:2px;
  background:repeating-linear-gradient(180deg,var(--line2) 0 6px,transparent 6px 12px)}
#ingressosGrid .card h3{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:1.1rem}
#ingressosGrid .card .preco{margin-top:6px}
#ingressosGrid .card p{margin-top:auto;padding-top:10px}

/* LOJA — grade de produto com badge de preco */
#lojaGrid .card{align-items:flex-start;text-align:left}
#lojaGrid .card h3{font-size:1.6rem}
#lojaGrid .card .preco{display:inline-block;background:var(--rubro);color:#fff;font-size:1.1rem;
  padding:5px 12px;border-radius:999px;margin-top:12px}

/* CARAVANAS */
#caravanasGrid .card{border-left:3px solid var(--rubro)}
#caravanasGrid .card .preco{font-size:1.1rem;color:var(--ouro);font-family:'Oswald',sans-serif;font-weight:600}

/* PATROCINIO — master + apoiadores */
.patroc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:38px}
.patroc-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  min-height:92px;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.04em;color:var(--mute);
  transition:border-color .2s,color .2s}
.patroc-item:hover{border-color:var(--rubro);color:var(--mute2)}
.patroc-item img{max-height:56px;width:auto;object-fit:contain}
.patroc-item:first-child{grid-column:1/-1;min-height:130px;border:1px solid var(--ouro);
  background:linear-gradient(135deg,rgba(217,180,90,.1),rgba(217,180,90,.02));
  color:var(--ouro);font-size:1.15rem;position:relative}
.patroc-item:first-child::before{content:"MASTER";position:absolute;top:10px;left:14px;
  font-size:.6rem;letter-spacing:.2em;color:var(--ouro);opacity:.8}

/* FORMS */
.form{display:flex;flex-direction:column;gap:13px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:26px;margin-top:30px;max-width:560px}
.form-center{margin-inline:auto}
.sec-hot .form{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.22)}
.form h3{color:#fff;font-size:1.3rem;margin-bottom:2px}
.form input,.form select,.form textarea{width:100%;background:var(--ink);color:#fff;
  border:1px solid var(--line2);border-radius:var(--r);padding:14px;font-size:1rem;font-family:inherit;
  transition:border-color .18s}
.form input::placeholder,.form textarea::placeholder{color:#6f6f77}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--rubro-hi)}
.form select:disabled{opacity:.5}
.form-msg{font-size:.9rem;min-height:1.1em}
.form-msg.ok{color:#53d07f}
.form-msg.err{color:#ff8089}
.sorte-box{background:linear-gradient(135deg,var(--ouro),#e7c977);color:#1a1205;border-radius:10px;
  padding:20px;text-align:center;font-weight:700}
.sorte-box strong{font-family:'Anton',sans-serif;font-size:2.4rem;display:block;margin:6px 0;letter-spacing:3px}
.sorte-box p{color:#3a2a08;font-size:.85rem}

.aviso{font-size:.8rem;color:var(--mute);font-style:italic;margin-top:16px}
.sec-hot .lead{color:#ffe7da}

/* REVEAL (so quando ha JS) */
.js-reveal .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal .reveal.in{opacity:1;transform:none}

/* HERO load */
.hero-inner>*{opacity:0;animation:rise .8s var(--ease) forwards}
.hero-inner>*:nth-child(1){animation-delay:.05s}
.hero-inner>*:nth-child(2){animation-delay:.15s}
.hero-inner>*:nth-child(3){animation-delay:.28s}
.hero-inner>*:nth-child(4){animation-delay:.4s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-inner>*{opacity:1;animation:none}
  .js-reveal .reveal{opacity:1;transform:none}
}

@media (min-width:680px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .patroc-grid{grid-template-columns:repeat(4,1fr)}
  .patroc-item:first-child{grid-column:1/-1}
}

/* UTIL + patrocinio CTA */
.svg-defs{position:absolute;width:0;height:0}
.sub-h{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;color:var(--ouro);margin:4px 0 16px}
.cta-patroc{background:var(--panel);border:1px solid var(--rubro);border-radius:12px;padding:28px}
.cta-patroc>h3{color:#fff;font-size:1.6rem;margin-bottom:6px}
.cta-patroc .form{margin-top:18px;background:transparent;border:0;padding:0}

/* ============================================================
   SOM DA TORCIDA — botao flutuante (alto-falante) + estados
   ============================================================ */
.som-btn{
  position:fixed;right:16px;bottom:16px;z-index:120;
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel2);color:var(--mute2);
  border:1px solid var(--line2);cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.7);
  transition:transform .15s var(--ease),background .2s,color .2s,border-color .2s;
}
.som-btn:hover{transform:translateY(-2px)}
.som-btn:active{transform:translateY(0)}
.som-btn .wave{opacity:0;transition:opacity .2s}
.som-btn .slash{opacity:1;transition:opacity .2s}
.som-btn.is-on{background:var(--rubro);color:#fff;border-color:var(--rubro-hi);
  box-shadow:0 10px 26px -8px rgba(197,34,51,.75)}
.som-btn.is-on .wave{opacity:1}
.som-btn.is-on .slash{opacity:0}
@media (min-width:768px){ .som-btn{right:22px;bottom:22px;width:52px;height:52px} }

/* ============================================================
   FUTEBOL — palco do gol (cena noturna cinematografica)
   ============================================================ */
.gol-stage{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:46px}
.gol-scene{position:relative;width:100%;max-width:660px;aspect-ratio:400/240;
  border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden;
  background:#07080c;box-shadow:0 26px 60px -26px rgba(0,0,0,.9)}
.gol-cam{position:absolute;inset:0;transform-origin:62% 52%}
.gol-svg{display:block;width:100%;height:100%}
.gol-replay{align-self:center}

/* estados base dos elementos animados */
.l-ball{transform:translate(110px,150px)}
.ball{transform-box:fill-box;transform-origin:center}
.net-bulge{transform-box:fill-box;transform-origin:left center}
.net-mesh{transform-box:fill-box;transform-origin:left center}
.kick-body,.cross-body{transform-box:fill-box;transform-origin:50% 96%}
.flashlights{opacity:.5}

/* overlay de efeitos */
.gol-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gol-fx .flash{position:absolute;inset:0;background:radial-gradient(circle at 62% 50%,#fff,transparent 62%);opacity:0}
.gol-word{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.3);
  font-family:'Anton',sans-serif;font-size:clamp(2.6rem,13vw,5.6rem);color:#fff;
  letter-spacing:.02em;text-transform:uppercase;opacity:0;white-space:nowrap;
  text-shadow:0 0 22px rgba(197,34,51,.95),0 5px 0 var(--rubro-deep);-webkit-text-stroke:2.5px var(--rubro)}
.confetti{position:absolute;inset:0}
.confetti i{position:absolute;top:-12%;width:8px;height:12px;opacity:0;border-radius:1px}
.confetti i:nth-child(3n+1){background:var(--rubro)}
.confetti i:nth-child(3n+2){background:#0c0c0c}
.confetti i:nth-child(3n+3){background:var(--ouro)}
.confetti i:nth-child(1){left:8%}.confetti i:nth-child(2){left:16%}.confetti i:nth-child(3){left:24%}
.confetti i:nth-child(4){left:32%}.confetti i:nth-child(5){left:40%}.confetti i:nth-child(6){left:48%}
.confetti i:nth-child(7){left:56%}.confetti i:nth-child(8){left:64%}.confetti i:nth-child(9){left:72%}
.confetti i:nth-child(10){left:80%}.confetti i:nth-child(11){left:88%}.confetti i:nth-child(12){left:12%}
.confetti i:nth-child(13){left:36%}.confetti i:nth-child(14){left:60%}.confetti i:nth-child(15){left:84%}
.confetti i:nth-child(16){left:52%}

/* ---- animacoes (so quando .playing) — total ~4.4s ---- */
.gol-scene.playing .gol-cam{animation:camZoom 4.4s var(--ease) forwards}
.gol-scene.playing .l-stadium{animation:panBg 4.4s var(--ease) forwards}
.gol-scene.playing .l-pitch{animation:panFg 4.4s var(--ease) forwards}
.gol-scene.playing .flashlights{animation:twinkle 1.1s ease-in-out infinite,standsLit 1.3s ease-out 2.85s}
.gol-scene.playing .cross-move{animation:crossRun 4.4s var(--ease) forwards}
.gol-scene.playing .cross-body{animation:runBob .42s ease-in-out 0s 4 alternate}
.gol-scene.playing .kick-body{animation:kickSwing 4.4s var(--ease) forwards}
.gol-scene.playing .l-ball{animation:golBall 4.4s var(--ease) forwards}
.gol-scene.playing .ball{animation:ballDeform 4.4s linear forwards}
.gol-scene.playing .ball-trail{animation:trailShow 4.4s linear forwards}
.gol-scene.playing .net-bulge{animation:netPunch .9s ease-out 2.82s forwards}
.gol-scene.playing .net-mesh{animation:netWave .8s ease-out 2.82s}
.gol-scene.playing .flash{animation:golFlash .6s ease-out 2.82s}
.gol-scene.playing .gol-word{animation:golPop .7s var(--ease) 3.02s forwards,golShake .45s ease-in-out 3.55s}
.gol-scene.playing .confetti i{animation:confFall 1.9s ease-in 3.0s forwards}
.gol-scene.playing .confetti i:nth-child(2n){animation-duration:2.3s}
.gol-scene.playing .confetti i:nth-child(3n){animation-duration:1.6s}

@keyframes camZoom{0%{transform:scale(1.015)}62%{transform:scale(1.065)}100%{transform:scale(1.05)}}
@keyframes panBg{0%{transform:translateX(0)}100%{transform:translateX(-5px)}}
@keyframes panFg{0%{transform:translateX(0)}100%{transform:translateX(-12px)}}
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:.7}}
@keyframes standsLit{0%{opacity:.5}18%{opacity:1}100%{opacity:.62}}
@keyframes crossRun{0%{transform:translateX(-86px)}22%,100%{transform:translateX(0)}}
@keyframes runBob{0%{transform:translateY(0)}100%{transform:translateY(-2px)}}
@keyframes kickSwing{0%,30%{transform:rotate(0)}40%{transform:rotate(-11deg)}48%{transform:rotate(10deg)}58%{transform:rotate(3deg)}100%{transform:rotate(4deg)}}
@keyframes golBall{
  0%{transform:translate(110px,150px)}
  16%{transform:translate(196px,150px)}
  40%{transform:translate(198px,149px)}
  46%{transform:translate(198px,148px)}
  52%{transform:translate(252px,138px)}
  64%{transform:translate(346px,122px)}
  70%{transform:translate(349px,123px)}
  100%{transform:translate(348px,122px)}
}
@keyframes ballDeform{
  0%,46%{transform:scale(1,1)}
  52%{transform:scale(1.5,.68)}
  64%{transform:scale(1.25,.85)}
  70%{transform:scale(.9,1.1)}
  78%,100%{transform:scale(1,1)}
}
@keyframes trailShow{0%,44%{opacity:0}53%{opacity:.9}66%{opacity:.5}72%,100%{opacity:0}}
@keyframes netPunch{0%{opacity:0;transform:scaleX(0)}30%{opacity:.85;transform:scaleX(1.3)}100%{opacity:.28;transform:scaleX(1)}}
@keyframes netWave{0%{transform:translateX(0)}30%{transform:translateX(5px)}60%{transform:translateX(-2px)}100%{transform:translateX(0)}}
@keyframes golFlash{0%{opacity:0}25%{opacity:.92}100%{opacity:0}}
@keyframes golPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.14)}
  75%{transform:translate(-50%,-50%) scale(.95)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes golShake{0%,100%{transform:translate(-50%,-50%) rotate(0)}
  25%{transform:translate(-51%,-50%) rotate(-1.6deg)}75%{transform:translate(-49%,-50%) rotate(1.6deg)}}
@keyframes confFall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(240px) rotate(560deg)}}

/* ---- quadro final estatico (prefers-reduced-motion) ---- */
.gol-scene.ended .l-ball{transform:translate(348px,122px)}
.gol-scene.ended .net-bulge{opacity:.28;transform:scaleX(1)}
.gol-scene.ended .flashlights{opacity:.72}
.gol-scene.ended .kick-body{transform:rotate(4deg)}
.gol-scene.ended .gol-word{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* ============================================================
   LINHA DO TEMPO DE TITULOS
   ============================================================ */
.titulos{max-width:720px;margin-inline:auto}
.titulos .sub-h{font-size:1.5rem;color:#fff;margin-bottom:6px}
.titulos .lead{margin-bottom:26px}
.timeline{list-style:none;position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;
  background:linear-gradient(var(--rubro),var(--ouro))}
.tl-item{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0}
.tl-dot{position:absolute;left:-26px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--panel2);
  border:3px solid var(--rubro);box-sizing:border-box}
.tl-dest .tl-dot{border-color:var(--ouro);box-shadow:0 0 0 4px rgba(217,180,90,.18)}
.tl-box{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 16px;flex:1}
.tl-dest .tl-box{border-color:var(--line2)}
.tl-ano{font-family:'Anton',sans-serif;font-size:1.3rem;color:var(--ouro);line-height:1}
.tl-dest .tl-ano{color:var(--ouro)}
.tl-tit{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.02em;color:var(--mute2)}
.tl-dest .tl-tit{color:#fff}