:root {
  --carvao: #0C0F12;
  --vermelho: #D92B36;
  --grafite: #292D33;
  --branco: #F2F2F2;
  --muted: #A9ABAD;
  --line: rgba(242, 242, 242, 0.12);
  --head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --header-h: 76px;
  --cut: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--carvao); color: var(--branco);
  font-family: var(--body); font-size: 1.05rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--head); text-transform: uppercase; line-height: .95; font-weight: 800; letter-spacing: .01em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(1200px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--vermelho); color: var(--branco); padding: 10px 16px; z-index: 200; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; }
main:focus { outline: none; }

/* ---------- Transição entre abas ---------- */
.curtain { position: fixed; inset: 0; z-index: 90; background: var(--vermelho); transform: translateX(-101%); pointer-events: none; }
.curtain.is-on { animation: sweep .85s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes sweep { 0% { transform: translateX(-101%); } 45%, 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }
.page { animation: pageIn .7s ease both; overflow-x: clip; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Cabeçalho ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: var(--header-h); transition: box-shadow .3s; }
/* O desfoque fica num pseudo-elemento: backdrop-filter no próprio header prenderia o menu mobile (position: fixed) dentro dele */
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 15, 18, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transition: opacity .3s; }
.header.is-scrolled, .header.is-open { box-shadow: 0 1px 0 var(--line); }
.header.is-scrolled::before, .header.is-open::before { opacity: 1; }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 38px; height: 38px; background: var(--vermelho); color: var(--branco); display: grid; place-items: center; transform: skewX(-10deg); }
.brand__mark svg { width: 22px; height: 22px; transform: skewX(10deg); }
.brand__name { font-family: var(--head); font-weight: 800; font-size: 1.5rem; letter-spacing: .06em; line-height: 1; }
.brand__name b { font-weight: 700; margin-left: 6px; opacity: .7; }

.nav { display: flex; align-items: center; gap: 6px; }
.nav a { position: relative; padding: 10px 16px; font-family: var(--head); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); transition: color .2s; }
.nav a:not(.nav__join)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--vermelho); transform: skewX(-20deg) scaleX(0); transform-origin: left; transition: transform .3s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--branco); }
.nav a:not(.nav__join):hover::after, .nav a[aria-current="page"]::after { transform: skewX(-20deg) scaleX(1); }
.nav .nav__join { margin-left: 10px; background: var(--vermelho); color: var(--branco); padding: 11px 22px; clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); transition: background .25s, color .25s; }
.nav .nav__join:hover, .nav .nav__join[aria-current="page"] { background: var(--branco); color: var(--carvao); }
.nav .nav__join:focus-visible { outline-offset: -6px; }

.menu-btn { display: none; width: 46px; height: 46px; background: var(--grafite); border: 0; position: relative; padding: 0; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--branco); transition: transform .25s, opacity .2s, top .25s; }
.menu-btn span:nth-child(1) { top: 16px; } .menu-btn span:nth-child(2) { top: 22px; } .menu-btn span:nth-child(3) { top: 28px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- Botões ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; padding: 16px 34px; font-family: var(--head); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--branco); background: var(--vermelho);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  transition: color .3s;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--branco); transform: translateX(-102%); transition: transform .35s cubic-bezier(.7, 0, .3, 1); }
.btn:hover { color: var(--carvao); }
.btn:hover::before { transform: none; }
.btn--ghost { background: var(--grafite); }
.btn--sm { padding: 11px 24px; font-size: 1rem; }
.btn:focus-visible { outline-offset: -7px; }

.chip { display: inline-block; background: var(--vermelho); color: var(--branco); padding: 6px 20px 6px 14px; font-family: var(--head); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .16em; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.note { margin-top: 14px; color: var(--muted); font-size: .9rem; border-left: 3px solid var(--vermelho); padding-left: 12px; }
.lead { max-width: 560px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 8vw, 100px)) 0 clamp(70px, 10vw, 130px); }
.hero__slash { position: absolute; top: -10%; bottom: -10%; right: -8%; width: 46%; background: linear-gradient(145deg, #71121b 0%, var(--vermelho) 48%, #26080c 100%); transform: skewX(-14deg); box-shadow: inset 0 0 100px rgba(0,0,0,.35); }
.hero__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 25%) var(--my, 30%), rgba(217, 43, 54, .18), transparent 60%), linear-gradient(90deg, rgba(12,15,18,.1), rgba(12,15,18,.55)); }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.3fr .8fr; gap: 40px; align-items: center; }
.hero__copy { display: grid; gap: 22px; justify-items: start; }
.hero__title { display: grid; font-size: clamp(5.5rem, 21vw, 15rem); line-height: .8; letter-spacing: -.01em; }
.outline { color: transparent; -webkit-text-stroke: 2px var(--branco); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

.card__label { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .9rem; color: var(--muted); }

/* ---------- Faixa animada ---------- */
.marquee { background: var(--branco); color: var(--carvao); overflow: hidden; padding: 14px 0; transform: rotate(-1.2deg); margin: -22px -20px 0; position: relative; z-index: 2; }
.marquee__track { display: flex; width: max-content; gap: 28px; font-family: var(--head); font-weight: 800; font-size: 2.2rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; animation: marquee 30s linear infinite; }
.marquee__track i { font-style: normal; color: var(--vermelho); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Seções ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding-top: clamp(24px, 4vw, 48px); }
.head { display: grid; gap: 14px; justify-items: start; margin-bottom: 36px; max-width: 680px; }
.head h2 { font-size: clamp(2.6rem, 7vw, 5rem); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 3px solid var(--vermelho); }
.stats li { padding: 28px 20px 8px 0; }
.stats strong { display: block; font-family: var(--head); font-weight: 800; font-size: clamp(3.4rem, 8vw, 6rem); line-height: .95; font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }

.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card { position: relative; background: var(--grafite); padding: 30px; display: grid; gap: 12px; align-content: start; min-height: 240px; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%); transition: transform .2s ease-out; }
.card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--vermelho); transform: scaleX(.18); transform-origin: left; transition: transform .4s; }
.card:hover::after { transform: scaleX(1); }
.card__big { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }
.card__link { margin-top: auto; padding-top: 14px; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; display: inline-flex; gap: 8px; }
.card__link::after { content: "→"; transition: transform .25s; }
.card__link:hover::after { transform: translateX(6px); }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { position: relative; overflow: hidden; background: var(--grafite); padding: 28px 24px 70px; min-height: 320px; display: grid; align-content: start; gap: 10px; transition: background .3s, transform .3s; }
.tile:hover { background: var(--vermelho); transform: translateY(-8px); }
.tile__num { font-family: var(--head); font-weight: 800; font-size: 6.5rem; line-height: .9; color: transparent; -webkit-text-stroke: 2px rgba(242, 242, 242, .35); transition: color .3s, -webkit-text-stroke-color .3s; }
.tile:hover .tile__num { color: var(--branco); -webkit-text-stroke-color: var(--branco); }
.tile h3 { font-size: 2.1rem; margin-top: 10px; }
.tile p { color: var(--muted); transition: color .3s; }
.tile:hover p { color: var(--branco); }
.tile__arrow { position: absolute; left: 24px; bottom: 22px; font-family: var(--head); font-size: 2.4rem; line-height: 1; transition: transform .3s; }
.tile:hover .tile__arrow { transform: translateX(10px); }

.cta { padding: clamp(40px, 6vw, 80px) 0 clamp(70px, 10vw, 120px); }
.cta__inner { position: relative; overflow: hidden; background: var(--vermelho); padding: clamp(40px, 7vw, 90px) clamp(24px, 6vw, 80px); display: grid; gap: 18px; justify-items: start; }
.cta__inner::after { content: "NCR"; position: absolute; right: -10px; bottom: -40px; font-family: var(--head); font-weight: 800; font-size: clamp(9rem, 26vw, 20rem); line-height: 1; color: rgba(12, 15, 18, .18); pointer-events: none; }
.cta h2 { font-size: clamp(2.6rem, 7vw, 5.2rem); position: relative; z-index: 1; }
.cta p { position: relative; z-index: 1; max-width: 480px; }
.cta .btn { position: relative; z-index: 1; background: var(--carvao); }
.cta .btn::before { background: var(--branco); }

/* ---------- Páginas internas ---------- */
.page-hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(40px, 7vw, 90px)) 0 clamp(30px, 5vw, 60px); background: linear-gradient(180deg, var(--grafite) 0, var(--carvao) 100%); }
.page-hero::after { content: ""; position: absolute; left: 0; bottom: 0; height: 6px; width: min(240px, 40%); background: var(--vermelho); }
.page-hero .container { position: relative; display: grid; gap: 18px; justify-items: start; }
.page-hero h1 { font-size: clamp(3.6rem, 12vw, 9rem); line-height: .85; }
.page-hero__num { position: absolute; right: 0; top: -30px; font-family: var(--head); font-weight: 800; font-size: clamp(9rem, 28vw, 22rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(242, 242, 242, .1); pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip-btn { background: var(--grafite); border: 0; padding: 10px 22px; font-family: var(--head); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background .25s, color .25s; }
.chip-btn:hover { background: #3a3f47; }
.chip-btn.is-active { background: var(--vermelho); }
.chip-btn:focus-visible { outline-offset: -5px; }
.chips--sm { margin-bottom: 0; }
.chips--sm .chip-btn { font-size: 1rem; padding: 8px 18px; }

/* Estatuto */
.season { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
.season__main { background: var(--grafite); padding: clamp(24px, 4vw, 44px); display: grid; gap: 16px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.season__main h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.season__main .lead { max-width: none; }
.season__highlight { border-left: 4px solid var(--vermelho); padding-left: 14px; }
.season__highlight span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.numbers li { background: var(--carvao); padding: 16px 8px; text-align: center; }
.numbers strong { display: block; font-family: var(--head); font-weight: 800; font-size: 2.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.numbers span { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.bar { display: flex; height: 16px; background: var(--carvao); overflow: hidden; }
.bar i { display: block; width: 0; transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.bar__w { background: var(--vermelho); } .bar__d { background: var(--muted); } .bar__l { background: var(--branco); }
.bar__legend { font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.k { width: 12px; height: 12px; display: inline-block; }
.k--w { background: var(--vermelho); } .k--d { background: var(--muted); } .k--l { background: var(--branco); }
.bar__legend .k:not(:first-child) { margin-left: 8px; }

.season__side { display: grid; gap: 18px; }
.results { display: grid; gap: 10px; }
.result { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px; background: var(--grafite); padding: 14px 18px; border-left: 5px solid var(--grafite); animation: pop .4s ease both; }
.result--V { border-left-color: var(--vermelho); }
.result--E { border-left-color: var(--muted); }
.result--D { border-left-color: var(--branco); }
.result time { font-family: var(--head); font-weight: 700; font-size: 1.3rem; color: var(--muted); }
.result__teams { font-family: var(--head); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; }
.result__teams b { background: var(--carvao); padding: 2px 10px; margin: 0 6px; }
.badge { font-family: var(--head); font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; padding: 4px 12px; background: var(--carvao); }
.result--V .badge { background: var(--vermelho); }
.result--D .badge { background: var(--branco); color: var(--carvao); }
.empty { color: var(--muted); padding: 20px 0; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* História */
.story { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.story__aside { position: sticky; top: calc(var(--header-h) + 28px); display: flex; gap: 20px; }
.story__rail { width: 4px; background: var(--grafite); position: relative; align-self: stretch; }
.story__rail i { position: absolute; inset: 0; background: var(--vermelho); transform: scaleY(0); transform-origin: top; }
.story__nav { display: grid; gap: 6px; }
.story__nav button { background: none; border: 0; padding: 8px 0; text-align: left; font-family: var(--head); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); transition: color .25s, transform .25s; }
.story__nav button:hover { color: var(--branco); }
.story__nav button.is-active { color: var(--branco); transform: translateX(8px); }
.chapter { position: relative; padding: 0 0 clamp(60px, 9vw, 110px); display: grid; gap: 16px; max-width: 680px; }
.chapter__num { font-family: var(--head); font-weight: 800; font-size: clamp(6rem, 16vw, 11rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--vermelho); }
.chapter h2 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
.chapter p { color: var(--muted); font-size: 1.15rem; }

.values { background: var(--grafite); }
.values .head { margin-bottom: 30px; }
.flip { background: none; border: 0; padding: 0; perspective: 1000px; min-height: 260px; text-align: left; }
.flip__inner { position: relative; display: block; width: 100%; height: 100%; min-height: 260px; transition: transform .7s cubic-bezier(.3, .8, .2, 1); transform-style: preserve-3d; }
.flip__face { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 26px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__front { background: var(--carvao); }
.flip__front b { font-family: var(--head); font-size: 5.5rem; font-weight: 800; line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--vermelho); }
.flip__front strong, .flip__back strong { font-family: var(--head); font-size: 2.6rem; font-weight: 800; text-transform: uppercase; line-height: 1; }
.flip__back { background: var(--vermelho); transform: rotateY(180deg); align-content: start; gap: 14px; }
.flip__back em { font-style: normal; font-size: 1.1rem; }
.flip[aria-pressed="true"] .flip__inner { transform: rotateY(180deg); }
@media (hover: hover) { .flip:hover .flip__inner { transform: rotateY(180deg); } }

/* Vestiário */
.dlg { border: 0; padding: 0; background: transparent; color: var(--branco); width: min(560px, 92vw); max-height: 90vh; overflow: visible; }
.dlg::backdrop { background: rgba(12, 15, 18, .82); backdrop-filter: blur(4px); }
.dlg[open] { animation: dlgIn .35s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.dlg__box { position: relative; background: var(--grafite); padding: 40px 32px 28px; display: grid; gap: 10px; border-top: 6px solid var(--vermelho); overflow: hidden; }
.dlg__box h2 { position: relative; font-size: 3.4rem; }
.dlg__close { position: absolute; z-index: 2; right: 12px; top: 12px; width: 40px; height: 40px; background: var(--carvao); border: 0; font-size: 1.6rem; line-height: 1; }
.dlg__close:hover { background: var(--vermelho); }

/* Participar */
.join { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.join__info h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 22px; }
.faq details { background: var(--grafite); margin-bottom: 10px; }
.faq summary { list-style: none; padding: 18px 54px 18px 20px; font-family: var(--head); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; position: relative; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: var(--vermelho); display: grid; place-items: center; font-size: 1.3rem; line-height: 1; transition: transform .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { padding: 0 20px 20px; color: var(--muted); animation: pop .35s ease both; }

.form { background: var(--grafite); padding: clamp(24px, 4vw, 40px); display: grid; gap: 20px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.profiles { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.profiles legend { font-family: var(--head); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; padding: 0; }
.profile { position: relative; cursor: pointer; }
.profile input { position: absolute; opacity: 0; inset: 0; }
.profile span { display: grid; gap: 2px; padding: 14px 12px; background: var(--carvao); border-bottom: 4px solid transparent; transition: background .25s, border-color .25s; text-align: center; height: 100%; }
.profile b { font-family: var(--head); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.profile small { color: var(--muted); font-size: .8rem; }
.profile:hover span { background: #14181c; }
.profile input:checked + span { background: var(--vermelho); border-bottom-color: var(--branco); }
.profile input:checked + span small { color: var(--branco); }
.profile input:focus-visible + span { outline: 2px solid var(--branco); outline-offset: 2px; }

.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; background: var(--carvao); border: 0; border-bottom: 3px solid var(--carvao); padding: 14px 16px; transition: border-color .25s; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--branco) 50%), linear-gradient(135deg, var(--branco) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--vermelho); }
.field [aria-invalid="true"] { border-bottom-color: var(--vermelho); }
.error { min-height: 1.2em; color: var(--branco); font-size: .88rem; }
.error:not(:empty)::before { content: "! "; background: var(--vermelho); padding: 0 6px; font-weight: 700; }
.form .btn { justify-self: start; }
.join-result { background: var(--carvao); border-left: 5px solid var(--vermelho); padding: 18px 20px; display: grid; gap: 12px; }
.join-result[hidden] { display: none; }
.join-result strong { font-family: var(--head); font-size: 1.6rem; text-transform: uppercase; }
.join-result pre { margin: 0; white-space: pre-wrap; font-family: var(--body); color: var(--muted); font-size: .95rem; }

/* Rodapé */
.footer { background: var(--grafite); padding-top: 56px; margin-top: 20px; border-top: 6px solid var(--vermelho); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer__about { margin-top: 16px; max-width: 320px; }
.footer h4 { font-size: 1rem; letter-spacing: .16em; color: var(--muted); margin-bottom: 16px; }
.footer li { margin-bottom: 8px; }
.footer li a { transition: color .2s, padding .2s; }
.footer li a:hover { color: var(--branco); padding-left: 6px; box-shadow: inset 3px 0 0 var(--vermelho); }
.footer__bar { border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); font-size: .9rem; }

/* Revelar ao rolar */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0ms), transform .7s ease var(--d, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__slash { width: 70%; right: -30%; opacity: .55; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .season { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; gap: 24px; }
  .story__aside { position: static; }
  .story__rail { display: none; }
  .story__nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .story__nav button { background: var(--grafite); padding: 8px 16px; font-size: 1.15rem; }
  .story__nav button.is-active { background: var(--vermelho); color: var(--branco); transform: none; }
  .join { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0 0; background: var(--carvao);
    flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding: 24px 28px 40px;
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, transform .3s, visibility .3s;
  }
  .header.is-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav a { font-size: 2.6rem; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav a:not(.nav__join)::after { display: none; }
  .nav a[aria-current="page"] { color: var(--branco); box-shadow: inset 6px 0 0 var(--vermelho); padding-left: 18px; }
  .nav .nav__join { margin: 20px 0 0; text-align: center; font-size: 1.8rem; padding: 16px; }
  .grid--3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 230px; }
  .actions .btn { flex: 1 1 100%; }
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .result { grid-template-columns: 52px 1fr; }
  .result .badge { grid-column: 2; justify-self: start; }
  .profiles { grid-template-columns: 1fr; }
  .form .btn { justify-self: stretch; }
  .marquee__track { font-size: 1.7rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .outline { -webkit-text-stroke-width: 1.5px; }
  .dlg__box h2 { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track, .page, .curtain, .result, .dlg[open], .faq p { animation: none !important; }
  .flip__inner, .bar i, .btn::before, .card::after { transition: none; }
}
/* Ajustes de identidade esports NCR */
.brand { gap: 10px; }
.brand__logo { max-width: 78px; }
.hero__copy .lead { max-width: 590px; }
.hero__title { text-shadow: 0 8px 40px rgba(0,0,0,.25); }
.marquee { border-block: 1px solid rgba(217,43,54,.35); }
@media (max-width: 600px) { .brand__logo { width: 58px; height: 48px; } }

.brand__logo { display: block; width: 72px; height: 60px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 0 12px rgba(217, 43, 54, .22)); }
@media (max-width: 600px) { .brand__logo { width: 58px; height: 48px; } }

/* Correção da tipografia NCR SPORTS */
.hero__title .outline {
    font-family: "Montserrat", "Arial Black", sans-serif;
    color: var(--branco);
    -webkit-text-stroke: 0;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.hero__title .outline {
    font-size: 0.55em;
}


.hero__title span:not(.outline) {
    font-size: 0.75em;
}

/* ============ REDES SOCIAIS ============ */

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.social-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 26px;
  background: var(--grafite);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--vermelho);
  transition: transform .25s ease, background .25s ease;
}

.social-card:hover {
  background: #343940;
  transform: translateY(-5px);
}

.social-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  color: var(--branco);
  background: var(--vermelho);
}

.social-icon svg {
  width: 27px;
  height: 27px;
}

.social-info {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.social-info strong {
  font-family: var(--head);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.social-info small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.social-arrow {
  margin-left: auto;
  color: var(--vermelho);
  font-size: 1.8rem;
  transition: transform .25s ease;
}

.social-card:hover .social-arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 600px) {
  .social-grid {
    grid-template-columns: 1fr;
  }

  .social-card {
    padding: 20px;
    gap: 14px;
  }
}

/* ============ CAMISA (VESTIÁRIO) ============ */
.shirt-card { width: 100%; border: 0; text-align: left; cursor: pointer; }
.shirt-card:focus-visible { outline-offset: -6px; }
.shirt-card .card__big { font-family: var(--head); font-weight: 800; text-transform: uppercase; line-height: .95; }
.shirt-card__img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--carvao); overflow: hidden; }
.shirt-card__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s ease; }
.shirt-card:hover .shirt-card__img img { transform: scale(1.06); }

.dlg--lg { width: min(940px, 94vw); }
.dlg--lg .dlg__box { padding: 56px clamp(16px, 4vw, 40px) 28px; gap: 14px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
.shirt__stage { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.shirt__view { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; max-height: 60vh; background: var(--carvao); overflow: hidden; }
.shirt__view img { width: 100%; height: 100%; padding: 8%; object-fit: contain; }
.shirt__missing { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }
.shirt__arrow { width: 52px; height: 52px; background: var(--carvao); border: 0; font-family: var(--head); font-weight: 800; font-size: 1.8rem; line-height: 1; transition: background .25s; }
.shirt__arrow:hover { background: var(--vermelho); }
.shirt__arrow:focus-visible { outline-offset: -6px; }

@media (max-width: 560px) {
  .shirt__stage { grid-template-columns: 1fr; }
  .shirt__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; background: rgba(12, 15, 18, .85); }
  .shirt__arrow--prev { left: 8px; }
  .shirt__arrow--next { right: 8px; }
  .shirt__arrow:hover { background: var(--vermelho); }
}
@media (prefers-reduced-motion: reduce) {
  .shirt-card__img img, .shirt__view img { transition: none; }
}
/* ============ AJUSTES CELULAR E COMPUTADOR ============ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { max-width: 100%; }

.header__inner { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.footer__bar { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

.dlg { max-height: 90vh; max-height: 90dvh; }
.dlg__box { max-height: 90vh; max-height: 90dvh; overflow-y: auto; }
.dlg__box h2, .dlg__box p { overflow-wrap: anywhere; }

/* Efeitos de hover só onde existe mouse, para não ficarem presos no toque */
@media (hover: none) {
  .tile:hover { background: var(--grafite); transform: none; }
  .tile:hover .tile__num { color: transparent; -webkit-text-stroke-color: rgba(242, 242, 242, .35); }
  .tile:hover p { color: var(--muted); }
  .tile:hover .tile__arrow { transform: none; }
  .social-card:hover { background: var(--grafite); transform: none; }
  .card:hover::after { transform: scaleX(.18); }
  .btn:hover { color: var(--branco); }
  .btn:hover::before { transform: translateX(-102%); }
  .btn:active { color: var(--carvao); }
  .btn:active::before { transform: none; }
  .tile:active { background: var(--vermelho); }
  .social-card:active { background: #343940; }
}

/* Alvos de toque confortáveis */
@media (pointer: coarse) {
  .chip-btn { min-height: 44px; }
  .dlg__close { width: 46px; height: 46px; }
  .shirt__arrow { min-width: 46px; min-height: 46px; }
  .btn--sm { min-height: 44px; }
  .story__nav button { min-height: 44px; }
  .footer li a { display: inline-block; padding: 6px 0; }
}

@media (max-width: 1000px) {
  .hero__grid { gap: 28px; }
  .page-hero__num { top: -10px; }
}

@media (max-width: 860px) {
  .nav { overflow-y: auto; justify-content: flex-start; padding-top: 28px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .nav a { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .head h2 { line-height: 1; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .container { width: min(1200px, 100% - 32px); }
  .hero { padding-top: calc(var(--header-h) + 28px); }
  .hero__title { font-size: clamp(5rem, 28vw, 8rem); }
  .card { min-height: 0; padding: 24px; }
  .card__big { font-size: 2.2rem; }
  .stats strong { font-size: 3.2rem; }
  .season__main { padding: 22px; }
  .numbers strong { font-size: 2.2rem; }
  .result { padding: 12px 14px; gap: 10px 12px; }
  .result__teams, .result time { font-size: 1.15rem; }
  .flip, .flip__inner { min-height: 300px; }
  .flip__front strong, .flip__back strong { font-size: 2.2rem; }
  .chapter p { font-size: 1.05rem; }
  .page-hero h1 { font-size: clamp(3.2rem, 17vw, 5rem); }
  .page-hero__num { font-size: 9rem; }
  .cta__inner { padding: 36px 22px; }
  .dlg { width: 94vw; }
  .dlg__box { padding: 52px 20px 22px; }
  .dlg--lg .dlg__box { padding: 52px 12px 20px; }
  .shirt__view { max-height: 55vh; max-height: 55dvh; }
  .social-info strong { font-size: 1.35rem; }
  .shirt-card__img { aspect-ratio: 1 / 1; }
}

@media (max-width: 360px) {
  .brand__logo { width: 50px; height: 42px; }
  .chip { font-size: .85rem; letter-spacing: .1em; }
}

/* Celular deitado */
@media (max-height: 480px) and (orientation: landscape) {
  :root { --header-h: 60px; }
  .hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 50px; }
  .nav a { font-size: 1.6rem; padding: 6px 0; }
  .nav .nav__join { margin-top: 10px; font-size: 1.4rem; padding: 10px; }
  .dlg__box, .dlg--lg .dlg__box { max-height: 92vh; max-height: 92dvh; }
  .shirt__view { max-height: 50vh; max-height: 50dvh; }
}

/* Telas grandes */
@media (min-width: 1500px) {
  .container { width: min(1320px, 100% - 80px); }
}
/* ============ HOME COMO LANDING (TELA ÚNICA) ============ */
body[data-page="home"] .footer { display: none; }

#pg-home .hero {
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: calc(var(--header-h) + 24px) 0 clamp(32px, 6vh, 64px);
}
#pg-home .hero__grid { grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); }
#pg-home .hero__copy, #pg-home .hero__visual { min-width: 0; }
.hero__title { font-size: clamp(4.6rem, 15vw, 11.5rem); }

.hero__visual { display: grid; gap: 22px; justify-items: center; align-content: center; }
.hero__logo { display: block; width: min(100%, 420px); height: auto; max-height: 40vh; max-height: 40svh; object-fit: contain; filter: drop-shadow(0 14px 40px rgba(0, 0, 0, .55)); }

@media (max-width: 1000px) {
  #pg-home .hero { align-items: start; }
  #pg-home .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__title { font-size: clamp(4.4rem, 20vw, 9rem); }
  .hero__logo { width: min(64%, 340px); max-height: none; }
}

@media (max-width: 560px) {
  .hero__title { font-size: clamp(4rem, 24vw, 6.5rem); }
  .hero__logo { width: min(66%, 260px); }
  .hero__visual { gap: 18px; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .hero__logo { display: none; }
  #pg-home .hero__grid { grid-template-columns: 1.2fr .8fr; }
  .hero__title { font-size: clamp(3.4rem, 14vh, 6rem); }
  #pg-home .hero { align-items: center; }
}
/* ============ ESTATUTO (MODELO) ============ */
.statute { display: grid; gap: 22px; }
.statute__meta { display: flex; flex-wrap: wrap; gap: 10px; }
.statute__meta span { background: var(--grafite); border-left: 4px solid var(--vermelho); padding: 8px 16px; color: var(--muted); font-size: .95rem; }
.statute__meta b { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--branco); margin-right: 6px; }

.st-chapter { background: var(--grafite); padding: clamp(24px, 4vw, 40px); display: grid; gap: 8px; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.st-chapter__head { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.st-chapter__num { font-family: var(--head); font-weight: 800; font-size: clamp(3.4rem, 8vw, 5rem); line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--vermelho); min-width: 1.4em; }
.st-chapter__head h2 { font-size: clamp(2rem, 5vw, 3rem); }
.st-arts { display: grid; }
.st-art { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.st-art b { font-family: var(--head); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vermelho); line-height: 1.4; }
.st-art p { color: var(--muted); font-size: 1.1rem; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .st-chapter__head { gap: 12px; }
  .st-art { grid-template-columns: 1fr; gap: 4px; }
}

/* TESTES */