/* ============================================================
IG54 — main.css
Design System: cinematic sport-premium, dark-first.
Fonts: Anton · Archivo · DM Sans · JetBrains Mono · Noto Sans JP
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Narrow:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap");
/* ── TOKENS ───────────────────────────────────────────────── */
:root {
--ig-black: #06060A;
--ig-ink: #0C0C12;
--ig-surface-1: #141419;
--ig-surface-2: #1B1B21;
--ig-surface-3: #23232B;
--ig-line: #2E2E3A;
--ig-line-soft: #1F1F26;
--ig-white: #FAFAFA;
--ig-fog: #E2E2E8;
--ig-steel: #B0B0BB;
--ig-graphite: #808090;
--ig-ash: #9090A0;
--ig-red: #FF2D2D;
--ig-red-bright: #FF4747;
--ig-red-deep: #C81E1E;
--ig-red-glow: rgba(255,45,45,0.35);
--ig-red-wash: rgba(255,45,45,0.10);
--ig-acid: #C6FF3D;
--ig-acid-deep: #9FD419;
--ig-acid-glow: rgba(198,255,61,0.35);
--ig-blue: #4FB8FF;
--ig-amber: #FFC23D;
--ig-success: #2BD96B;
--ig-warning: #FFB020;
--ig-danger: #FF4040;
/* Semantic */
--bg: var(--ig-black);
--bg-section: var(--ig-ink);
--bg-card: var(--ig-surface-1);
--bg-card-raised: var(--ig-surface-2);
--bg-hover: var(--ig-surface-3);
--fg: var(--ig-white);
--fg-muted: var(--ig-fog);
--fg-dim: var(--ig-steel);
--fg-faint: var(--ig-graphite);
--border: var(--ig-line);
--border-soft: var(--ig-line-soft);
--accent: var(--ig-red);
--accent-hover: var(--ig-red-bright);
--accent-press: var(--ig-red-deep);
--accent-2: var(--ig-acid);
/* Legacy compatibility (used by existing PHP templates) */
--gold: var(--ig-red);
--gold-lt: var(--ig-red-wash);
--gold-bd: rgba(255,45,45,0.4);
--panel: var(--ig-surface-1);
--panel2: var(--ig-surface-2);
--line: var(--ig-line);
--line2: var(--ig-line-soft);
--muted: var(--ig-steel);
--radius: 4px;
--wrap: 1440px;
/* Type */
--font-display: "Anton","Archivo Narrow","Impact",system-ui,sans-serif;
--font-head: "Archivo","Archivo Narrow",system-ui,sans-serif;
--font-body: "DM Sans",system-ui,-apple-system,sans-serif;
--font-mono: "JetBrains Mono",ui-monospace,monospace;
--font-jp: "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
--t-display-xl: 800 clamp(72px,12vw,200px)/0.85 var(--font-display);
--t-display-l: 800 clamp(56px,8vw,128px)/0.88 var(--font-display);
--t-display-m: 800 clamp(40px,6vw,80px)/0.9 var(--font-display);
--t-h1: 800 clamp(40px,5vw,64px)/1.05 var(--font-head);
--t-h2: 700 clamp(28px,3.4vw,44px)/1.1 var(--font-head);
--t-h3: 700 clamp(22px,2.4vw,28px)/1.2 var(--font-head);
--t-h4: 600 18px/1.25 var(--font-head);
--t-body-l: 400 18px/1.55 var(--font-body);
--t-body: 400 15px/1.6 var(--font-body);
--t-body-s: 400 13px/1.5 var(--font-body);
--t-label: 700 12px/1.2 var(--font-head);
--t-label-s: 700 10px/1.2 var(--font-head);
--t-mono: 500 13px/1.4 var(--font-mono);
--t-mono-l: 500 16px/1.4 var(--font-mono);
/* Spacing */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
--space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
/* Radii — squared by default */
--r-0:0; --r-1:2px; --r-2:4px; --r-3:8px; --r-4:12px; --r-pill:999px;
/* Shadows */
--shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -20px rgba(0,0,0,0.6);
--shadow-raise: 0 1px 0 rgba(255,255,255,0.06) inset, 0 30px 60px -25px rgba(0,0,0,0.8);
--glow-red: 0 0 0 1px var(--ig-red-glow), 0 0 24px -4px var(--ig-red-glow);
--glow-acid: 0 0 0 1px var(--ig-acid-glow), 0 0 24px -4px var(--ig-acid-glow);
/* Motion */
--ease-out: cubic-bezier(0.16,1,0.3,1);
--ease-in-out: cubic-bezier(0.65,0,0.35,1);
--ease-snap: cubic-bezier(0.34,1.4,0.64,1);
--dur-fast: 160ms; --dur: 260ms; --dur-slow: 520ms; --dur-cine: 900ms;
}
/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html,body { background: var(--bg); color: var(--fg); font: var(--t-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; image-orientation: from-image; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1 { font: var(--t-h1); letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font: var(--t-h2); letter-spacing: -0.005em; text-transform: uppercase; }
h3 { font: var(--t-h3); text-transform: uppercase; }
h4 { font: var(--t-h4); text-transform: uppercase; letter-spacing: 0.02em; }
/* ── UTILITIES ─────────────────────────────────────────────── */
.ig-jp { font-family: var(--font-jp); font-weight: 500; }
.ig-bar { display:inline-block; width:18px; height:2px; background:var(--accent); vertical-align:middle; margin-right:10px; }
.ig-eyebrow { font: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-dim); display: flex; align-items: center; }
.ig-eyebrow--mini { font: var(--t-label-s); letter-spacing: 0.2em; color: var(--accent); }
.ig-h2 { font: var(--t-h2); text-transform: uppercase; margin: 12px 0 0; letter-spacing: -0.005em; }
.ig-h3 { font: var(--t-h3); text-transform: uppercase; margin: 0; }
.ig-h4 { font: var(--t-h4); text-transform: uppercase; margin: 0; letter-spacing: 0.02em; }
.ig-arrow { display:inline-block; width:16px; height:1.5px; background:currentColor; position:relative; margin-left:4px; }
.ig-arrow::after { content:""; position:absolute; right:0; top:-3px; width:8px; height:8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); }
.wrap,.ig-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.section,.ig-section { max-width: var(--wrap); margin: 0 auto; padding: var(--space-24) 32px; }
.ig-section__head { margin-bottom: 40px; }
.ig-section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.sec-head-left { display:flex; flex-direction:column; gap:4px; }
.sec-kicker { font: var(--t-label-s); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.sec-title { font: var(--t-h2); text-transform: uppercase; letter-spacing: -0.005em; }
.sec-link { font: var(--t-label); letter-spacing: 0.14em; color: var(--fg-dim); display:flex; align-items:center; gap:6px; transition: color var(--dur-fast); }
.sec-link:hover { color: var(--accent); }
.breadcrumb { display:flex; align-items:center; gap:8px; font:var(--t-label-s); letter-spacing:.1em; color:var(--fg-dim); }
.breadcrumb a { color:var(--fg-dim); transition:color var(--dur-fast); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb span { color:var(--ig-graphite); }
/* ── BUTTONS ──────────────────────────────────────────────── */
.ig-btn, .btn-gold {
font: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase;
padding: 14px 22px; border: 0;
border-radius: var(--r-1); display: inline-flex; align-items: center; gap: 10px;
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ig-btn--primary, .btn-gold { background: var(--accent); color: var(--ig-black); }
.ig-btn--primary:hover, .btn-gold:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--glow-red); }
.ig-btn--primary:active, .btn-gold:active { transform: scale(0.98); background: var(--accent-press); }
.ig-btn--ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.ig-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
/* ── CHIPS / BADGES ───────────────────────────────────────── */
.ig-chip { font: var(--t-label-s); letter-spacing: 0.18em; padding: 6px 10px; border-radius: var(--r-pill); display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; white-space:nowrap; }
.ig-chip--live { background: var(--accent); color: var(--ig-black); }
.ig-chip--live i { width:6px; height:6px; border-radius:50%; background:var(--ig-black); animation: igpulse 1.2s infinite; }
@keyframes igpulse { 50% { opacity: 0.3; } }
.ig-chip--line { border:1px solid var(--border); color: var(--fg-dim); }
.ig-chip--dim { background: var(--bg-card-raised); color: var(--fg-muted); }
.ig-tag { font: var(--t-mono); font-size: 11px; padding: 4px 8px; background: rgba(0,0,0,0.6); border:1px solid var(--border); color: var(--fg-muted); border-radius: var(--r-1); display:inline-block; }
.badge-active { background:rgba(45,217,107,.1); border:1px solid rgba(45,217,107,.25); color:#2bd96b; font:var(--t-label-s); letter-spacing:.12em; padding:3px 9px; border-radius:var(--r-pill); display:inline-block; }
.badge-inactive{ background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--fg-faint); font:var(--t-label-s); letter-spacing:.12em; padding:3px 9px; border-radius:var(--r-pill); display:inline-block; }
/* ── TOPBAR / NAV ─────────────────────────────────────────── */
.topbar, .ig-nav {
position: fixed; left:0; right:0; top:0; z-index: 1000;
transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
border-bottom: 1px solid transparent;
min-height: 70px;
}
.topbar.is-scrolled, .ig-nav.is-scrolled {
background: rgba(10,10,11,0.82);
border-bottom-color: var(--border);
backdrop-filter: blur(12px) saturate(120%);
}
/* Always show border after a bit */
.topbar { border-bottom-color: var(--border); background: rgba(10,10,11,0.95); }
.ig-nav__inner, .topbar-inner {
max-width: var(--wrap); margin: 0 auto;
padding: 0 32px; height: 70px;
display: flex; align-items: center; gap: 0; position: relative;
}
/* Brand */
.brand, .ig-nav__brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex-shrink:0; }
.brand-logo-wrap { display:flex; align-items:center; justify-content:center; }
.brand-logo-img {
height: 42px; width: 42px; object-fit:contain;
border-radius: var(--r-2); border: 1px solid var(--border);
display: block; flex-shrink:0;
}
.brand:hover .brand-logo-img { border-color: rgba(255,45,45,0.4); }
.brand-logo-text, .ig-nav__num {
font-family: var(--font-display); font-size: 28px;
letter-spacing: -0.02em; line-height: 1; color: var(--fg);
}
.ig-nav__mono {
width: 36px; height: 36px; border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head); font-weight: 900; font-size: 12px; letter-spacing: 2px;
}
.brand-info, .brand-text {
border-left: 1px solid var(--border); padding-left: 14px;
display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
}
.brand-name, .brand-text strong {
display: block; font-family: var(--font-head); font-size: 13px;
font-weight: 900; letter-spacing: 0.06em; color: var(--fg); text-transform: uppercase;
}
.brand-tag, .brand-text span {
display: block; font: var(--t-label-s); letter-spacing: 0.18em;
color: var(--fg-dim); text-transform: uppercase;
}
/* Nav links — centered absolutely */
.nav-menu, .ig-nav__links {
display: flex; align-items: center; gap: 0; list-style: none;
position: absolute; left: 50%; transform: translateX(-50%);
top: 50%; transform: translateX(-50%) translateY(-50%);
}
.nav-menu li { list-style: none; }
.nav-menu a, .ig-nav__link {
font: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fg-dim); text-decoration: none;
padding: 12px 14px; position: relative;
transition: color var(--dur-fast);
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.nav-menu a em, .ig-nav__link em {
font-family: var(--font-jp); font-weight: 500; font-size: 9px;
color: var(--fg-faint); font-style: normal; letter-spacing: 0;
}
.nav-menu a:hover, .ig-nav__link:hover { color: var(--fg); }
.nav-menu a.active, .ig-nav__link.is-active { color: var(--fg); }
.nav-menu a.active::after, .ig-nav__link.is-active::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
height: 2px; background: var(--accent);
}
/* Lang switch */
.lang-switch {
display: flex; align-items: center; gap: 8px;
font: var(--t-label-s); letter-spacing: 0.1em;
color: var(--fg-dim); margin-left: auto;
border: 1px solid var(--border); padding: 6px 12px; border-radius: var(--r-1);
}
.lang-switch a { color: var(--fg-dim); transition: color var(--dur-fast); }
.lang-switch a.active, .lang-switch a:hover { color: var(--accent); }
.lang-switch span { color: var(--border); }
/* Hamburger (mobile) */
.nav-toggle {
display: none; flex-direction: column; gap: 5px;
background: transparent; border: 0; padding: 8px; cursor: pointer; margin-left: auto;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--fg); transition: all var(--dur); }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── HERO ─────────────────────────────────────────────────── */
.ig-hero {
position: relative; min-height: 720px; overflow: hidden;
padding: 140px 32px 0;
display: grid; grid-template-rows: 1fr auto; align-items: end;
}
.ig-hero-bg, .ig-hero__photo {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center 20%;
will-change: transform; transform: scale(1.0);
transition: transform 20s ease-in-out;
}
.ig-hero__photo-grad {
position: absolute; inset: 0;
background: linear-gradient(180deg,rgba(0,0,0,0.35) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(10,10,11,0.98) 100%),
linear-gradient(90deg,rgba(10,10,11,0.65) 0%,rgba(10,10,11,0) 45%);
}
.ig-hero__grid {
position: absolute; inset: 0; z-index: 1; opacity: 0.35;
background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 88px 88px;
mask-image: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,1) 80%,rgba(0,0,0,0) 100%);
}
.ig-hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; opacity:.4; }
.ig-hero__num, .hero-wm-text {
position: absolute; right: -40px; top: 40px; z-index: 2;
font-family: var(--font-display);
font-size: clamp(260px, 30vw, 460px);
line-height: 0.78; color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,0.07);
letter-spacing: -0.04em;
opacity: 1; user-select: none; pointer-events: none;
}
.ig-hero__copy, .hero-content {
position: relative; z-index: 4; max-width: 680px; padding-bottom: 40px;
}
.ig-hero__eyebrow, .hero-kicker {
font: var(--t-label); letter-spacing: 0.22em; color: var(--fg);
display: flex; align-items: center; margin-bottom: 20px;
}
.ig-hero__head, .hero-title {
font: var(--t-display-l); font-family: var(--font-display);
text-transform: uppercase; letter-spacing: -0.02em;
margin: 0 0 24px; color: var(--fg);
display: flex; flex-direction: column; gap: 0;
}
.ig-hero__head em, .hero-title em { font-style: normal; color: var(--accent); }
.ig-hero__head span { display: block; }
.ig-hero__sub { font: var(--t-body-l); color: var(--fg-muted); margin: 0 0 24px; max-width: 520px; }
.ig-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-values { display:flex; gap:20px; margin-top: 18px; }
.hero-value { font: var(--t-label); letter-spacing: 0.18em; color: var(--fg-dim); }
.hero-value strong { display:block; font-family: var(--font-display); font-size: 22px; color: var(--fg); letter-spacing: -0.01em; }
/* Hero entrance animations */
@keyframes ig-num-in { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes ig-fade-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.ig-hero[data-anim="on"] .ig-hero__num { animation: ig-num-in 1200ms var(--ease-out) 80ms backwards; }
.ig-hero[data-anim="on"] .ig-hero__eyebrow { animation: ig-fade-up 700ms var(--ease-out) 200ms backwards; }
.ig-hero[data-anim="on"] .ig-hero__head span:nth-child(1) { animation: ig-fade-up 900ms var(--ease-out) 300ms backwards; }
.ig-hero[data-anim="on"] .ig-hero__head span:nth-child(2) { animation: ig-fade-up 900ms var(--ease-out) 420ms backwards; }
.ig-hero[data-anim="on"] .ig-hero__head span:nth-child(3) { animation: ig-fade-up 900ms var(--ease-out) 540ms backwards; }
.ig-hero[data-anim="on"] .ig-hero__sub { animation: ig-fade-up 700ms var(--ease-out) 700ms backwards; }
.ig-hero[data-anim="on"] .ig-hero__cta { animation: ig-fade-up 700ms var(--ease-out) 850ms backwards; }
/* Hero strip */
.ig-hero__strip {
position: relative; z-index: 4; border-top: 1px solid var(--border);
display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 24px;
}
.ig-hero__strip > div { padding: 20px 24px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.ig-hero__strip > div:last-child { border-right: 0; }
.ig-strip-k { font: var(--t-label-s); letter-spacing: 0.2em; color: var(--fg-dim); }
.ig-strip-v { font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--fg); letter-spacing: -0.01em; }
/* ── BANNER ROTATIVO ──────────────────────────────────────── */
.ig-banner { position:relative; width:100%; overflow:hidden; background:#060606; height:clamp(460px,54vw,740px); }
.ig-banner-track { position:relative; width:100%; height:100%; }
.ig-slide { position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none; }
.ig-slide.active { opacity:1; pointer-events:auto; z-index:2; }
.ig-slide.prev { opacity:0; z-index:1; }
.ig-slide-bg { position:absolute; inset:0; background-size:cover; background-position:50% 40%; transition:transform 7s ease; transform:scale(1.0); background-repeat:no-repeat; }
.ig-slide-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 38%,rgba(0,0,0,.12) 60%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,0.25) 0%,transparent 30%,rgba(10,10,11,0.85) 100%); z-index:1; }
.ig-slide-wm { position:absolute; z-index:3; right:-2%; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-size:clamp(100px,17vw,280px); font-weight:800; font-style:italic; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.07); user-select:none; pointer-events:none; line-height:1; letter-spacing:-4px; white-space:nowrap; }
.ig-slide-athlete { position:absolute; z-index:4; left:5%; bottom:14%; display:flex; flex-direction:column; gap:6px; max-width:50%; }
.ig-slide-kicker { color:var(--accent); font:var(--t-label-s); letter-spacing:.26em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.9); }
.ig-slide-sub { color:rgba(255,255,255,.65); font:var(--t-label); letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.9); }
.ig-slide-title { font:var(--t-display-m); font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.02em; color:var(--fg); line-height:1.0; text-shadow:0 2px 20px rgba(0,0,0,.9); margin-bottom:16px; }
.ig-slide-btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--ig-black); font:var(--t-label); letter-spacing:.08em; padding:12px 22px; border-radius:var(--r-1); transition:filter .2s,transform .2s; box-shadow:0 4px 18px var(--ig-red-glow); }
.ig-slide-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.ig-slide-content { position:absolute; left:5%; bottom:14%; z-index:4; max-width:480px; transform:translateY(16px); opacity:0; transition:transform .7s ease .3s,opacity .7s ease .3s; pointer-events:none; }
.ig-slide.active .ig-slide-content { transform:translateY(0); opacity:1; }
.ig-banner-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); color:var(--fg); font-size:26px; z-index:10; display:flex; align-items:center; justify-content:center; transition:background .2s,color .2s,transform .2s; padding:0; }
.ig-banner-arrow:hover { background:var(--accent); color:var(--ig-black); transform:translateY(-50%) scale(1.08); }
.ig-banner-prev { left:20px; } .ig-banner-next { right:20px; }
.ig-banner-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.ig-banner-dot { width:8px; height:8px; border-radius:var(--r-pill); background:rgba(255,255,255,.25); border:none; cursor:pointer; padding:0; transition:background .3s,width .3s; }
.ig-banner-dot.active { background:var(--accent); width:24px; }
.ig-banner-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:rgba(255,255,255,.06); z-index:10; }
.ig-banner-progress-bar { height:100%; background:var(--accent); width:0%; transition:width linear; }
.ig-banner-counter { position:absolute; top:16px; right:22px; color:rgba(255,255,255,.4); font:var(--t-mono); font-size:11px; z-index:10; }
/* ── TICKER ───────────────────────────────────────────────── */
.ig-ticker { border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--ig-ink); display:flex; align-items:stretch; gap:0; overflow:hidden; }
.ig-ticker__label { font:var(--t-label-s); letter-spacing:.22em; background:var(--accent); color:var(--ig-black); padding:14px 20px; flex:0 0 auto; display:flex; align-items:center; }
.ig-ticker__scroll { display:flex; flex:1; min-width:0; align-items:center; animation:igmarquee 32s linear infinite; white-space:nowrap; }
.ig-ticker__scroll:hover { animation-play-state:paused; }
.ig-ticker__inner { display:flex; gap:48px; padding:0 24px; }
.ig-ticker__inner span { font:var(--t-mono); font-size:13px; color:var(--fg); }
.ig-ticker__inner i { color:var(--accent-2); font-style:normal; }
.ig-ticker__inner em { color:var(--fg-dim); font-style:normal; }
@keyframes igmarquee { to { transform:translateX(-50%); } }
/* ── STATS ────────────────────────────────────────────────── */
.ig-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ig-stat { background:var(--bg-card); border:1px solid var(--border); padding:24px; position:relative; overflow:hidden; transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); }
.ig-stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.ig-stat--acid::before { background:var(--accent-2); }
.ig-stat:hover { transform:translateY(-2px); border-color:var(--accent); }
.ig-stat__lbl { display:flex; align-items:baseline; justify-content:space-between; font:var(--t-label-s); letter-spacing:.2em; color:var(--fg-dim); text-transform:uppercase; }
.ig-stat__lbl em { font-style:normal; color:var(--fg-faint); }
.ig-stat__num { font-family:var(--font-display); font-size:88px; line-height:.9; color:var(--fg); margin-top:12px; letter-spacing:-0.02em; }
.ig-stat__delta { font:var(--t-mono); color:var(--accent-2); font-size:12px; margin-top:4px; }
/* legacy stat-card compat */
.stat-grid { display:grid; gap:14px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); padding:18px 20px; position:relative; }
.stat-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.stat-card small { font:var(--t-label-s); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim); display:block; margin-bottom:8px; }
.stat-card strong { font-family:var(--font-display); font-size:40px; line-height:.9; color:var(--fg); display:block; letter-spacing:-0.02em; }
.stat-card span { font:var(--t-mono); font-size:11px; color:var(--fg-faint); margin-top:4px; display:block; }
/* ── JOGOS / MATCHES ──────────────────────────────────────── */
.ig-games-strip { background:var(--ig-ink); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:14px 5% 16px; }
.ig-games-inner { max-width:var(--wrap); margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.ig-games-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ig-games-label { font:var(--t-label); letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); display:flex; align-items:center; gap:8px; }
.ig-games-label::before { content:""; display:inline-block; width:16px; height:2px; background:var(--accent); }
.ig-games-link { font:var(--t-label-s); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); border:1px solid var(--border); padding:7px 14px; border-radius:var(--r-1); transition:color var(--dur-fast),border-color var(--dur-fast); }
.ig-games-link:hover { color:var(--accent); border-color:rgba(255,45,45,.4); }
.ig-games-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.ig-gc { background:var(--bg-card); border:1px solid var(--border); overflow:hidden; transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast); }
.ig-gc:hover { transform:translateY(-2px); border-color:rgba(255,45,45,.4); }
.ig-gc-head { background:linear-gradient(135deg,#FF2D2D,#C81E1E); display:flex; flex-direction:row; align-items:center; justify-content:center; padding:6px 12px; gap:6px; }
.ig-gc-day { font-family:var(--font-display); font-size:clamp(16px,1.6vw,22px); font-weight:800; color:var(--ig-black); line-height:1; }
.ig-gc-mon { font:var(--t-label-s); letter-spacing:.1em; color:rgba(10,10,11,.7); }
.ig-gc-body { padding:7px 10px 8px; display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.ig-gc-time { font:var(--t-mono); font-size:10px; color:var(--fg-dim); }
.ig-gc-status { font:var(--t-label-s); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); padding:2px 7px; border-radius:var(--r-1); background:var(--ig-red-wash); }
.ig-gc-status.finished { color:var(--fg-dim); background:var(--bg-card-raised); }
.ig-gc-comp { font:var(--t-mono); font-size:10px; color:var(--fg-faint); text-align:center; margin:2px 0 4px; }
.ig-gc-versus { display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; }
.ig-gc-team { font:var(--t-h4); font-size:11px; font-weight:900; color:var(--fg); text-align:center; line-height:1.2; }
.ig-gc-vs { font:var(--t-mono); font-size:9px; color:var(--accent); letter-spacing:.08em; padding:2px 10px; width:100%; text-align:center; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.ig-gc-result { font-family:var(--font-display); font-size:22px; color:var(--accent); letter-spacing:-0.02em; line-height:1; }
.ig-crest { width:28px; height:28px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font:var(--t-label-s); letter-spacing:.1em; color:var(--fg-dim); font-size:9px; }
.ig-match { background:var(--bg-card); border:1px solid var(--border); padding:16px 24px; display:grid; grid-template-columns:80px 1fr auto; gap:24px; align-items:center; transition:transform var(--dur-fast),border-color var(--dur-fast); }
.ig-match:hover { transform:translateY(-1px); border-color:rgba(255,45,45,.4); }
.ig-match__date { text-align:center; border-right:1px solid var(--border-soft); padding-right:16px; }
.ig-match__date .d { font-family:var(--font-display); font-size:40px; line-height:1; }
.ig-match__date .m { font:var(--t-label-s); letter-spacing:.2em; color:var(--fg-dim); margin-top:4px; }
/* ── FOTOS (UOL-style carousel) ───────────────────────────── */
.uol-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.85); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:var(--fg); font-size:22px; z-index:10; transition:background .2s,color .2s,transform .2s; box-shadow:0 4px 16px rgba(0,0,0,.5); padding:0; }
.uol-arrow:hover { background:var(--accent); color:var(--ig-black); transform:translateY(-50%) scale(1.08); }
.uol-arrow:disabled { opacity:.25; cursor:default; }
.uol-arrow:disabled:hover { background:rgba(0,0,0,.85); color:var(--fg); transform:translateY(-50%); }
.uol-arrow-prev { left:calc(5% - 16px); } .uol-arrow-next { right:calc(5% - 16px); }
.uol-card { flex:0 0 200px; border-radius:var(--r-2); overflow:hidden; background:var(--bg-card); border:1px solid var(--border); cursor:pointer; transition:border-color .22s,transform .22s,box-shadow .22s; position:relative; }
.uol-card:hover { border-color:rgba(255,45,45,.4); transform:translateY(-5px) scale(1.015); box-shadow:0 18px 44px rgba(0,0,0,.65),0 0 0 1px var(--ig-red-glow); z-index:2; }
.uol-card-img { position:relative; aspect-ratio:3/4; overflow:hidden; background:#0a0a0a; }
.uol-card-img img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .45s ease; }
.uol-card:hover .uol-card-img img { transform:scale(1.07); }
.uol-ph { width:100%; height:100%; min-height:180px; display:flex; align-items:center; justify-content:center; color:rgba(255,45,45,.12); font-size:18px; font-weight:900; font-style:italic; }
.uol-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.1) 40%,transparent 100%); opacity:0; transition:opacity .28s; pointer-events:none; }
.uol-card:hover .uol-card-overlay { opacity:1; }
.uol-card-badge { position:absolute; top:10px; right:10px; background:var(--accent); color:var(--ig-black); font:var(--t-label-s); padding:3px 9px; border-radius:var(--r-pill); opacity:0; transform:translateY(-4px); transition:opacity .22s,transform .22s; pointer-events:none; }
.uol-card:hover .uol-card-badge { opacity:1; transform:translateY(0); }
.uol-card-zoom { position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:var(--fg); font-size:13px; opacity:0; transition:opacity .22s; pointer-events:none; }
.uol-card:hover .uol-card-zoom { opacity:1; }
.uol-card-info { padding:10px 12px 12px; position:absolute; bottom:0; left:0; right:0; transform:translateY(6px); transition:transform .28s; pointer-events:none; }
.uol-card:hover .uol-card-info { transform:translateY(0); }
.uol-card-date { color:var(--accent); font:var(--t-label-s); letter-spacing:.1em; display:block; margin-bottom:3px; }
.uol-card-title { color:var(--fg); font:var(--t-h4); font-size:12px; line-height:1.35; text-shadow:0 1px 5px rgba(0,0,0,.9); }
.uol-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18); cursor:pointer; transition:background .2s,transform .2s; border:none; }
.uol-dot.active { background:var(--accent); transform:scale(1.3); }
/* Photo category bar */
.uol-catbar { background:var(--ig-ink); border-bottom:1px solid var(--border); position:sticky; top:70px; z-index:90; overflow-x:auto; scrollbar-width:none; }
.uol-catbar::-webkit-scrollbar { display:none; }
.uol-catbar-inner { display:flex; align-items:stretch; max-width:var(--wrap); margin:0 auto; padding:0 32px; min-width:max-content; }
.uol-tab { display:inline-flex; align-items:center; gap:7px; padding:14px 20px; font:var(--t-label); letter-spacing:.13em; color:var(--fg-dim); text-decoration:none; white-space:nowrap; border-bottom:3px solid transparent; transition:color .18s,border-color .18s; }
.uol-tab:hover { color:var(--fg); }
.uol-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.uol-cnt { background:rgba(255,255,255,.08); color:var(--fg-faint); font-size:10px; font-weight:700; padding:2px 7px; border-radius:var(--r-pill); }
.uol-tab.active .uol-cnt { background:var(--ig-red-wash); color:var(--accent); }
.pf-cattab { display:inline-flex; align-items:center; gap:5px; padding:7px 14px; border-radius:var(--r-pill); font:var(--t-label-s); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border:1px solid var(--border); color:var(--fg-dim); cursor:pointer; transition:all .2s; white-space:nowrap; flex-shrink:0; }
.pf-cattab:hover,.pf-cattab.active,.pf-cattab-active { border-color:rgba(255,45,45,.4); background:var(--ig-red-wash); color:var(--accent); }
/* Lightbox */
.lb-uol,.lb,.pf-lb { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.97); display:none; align-items:center; justify-content:center; padding:16px; }
.lb-uol.open,.lb.open,.pf-lb.open { display:flex; }
.lb-inner-uol,.lb-inner { max-width:min(90vw,560px); width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.lb-img-uol,.lb-img { max-width:100%; max-height:82vh; border-radius:var(--r-2); object-fit:contain; border:1px solid var(--border); box-shadow:0 28px 70px rgba(0,0,0,.9); display:block; }
.lb-cap-uol { text-align:center; }
.lb-cat-uol { display:inline-block; background:var(--accent); color:var(--ig-black); font:var(--t-label-s); padding:2px 10px; border-radius:var(--r-pill); margin-bottom:5px; }
.lb-title-uol { color:var(--fg); font:var(--t-h4); margin-bottom:3px; }
.lb-date-uol { color:var(--accent); font:var(--t-mono); font-size:11px; }
.lb-cnt-uol { color:var(--fg-dim); font:var(--t-mono); font-size:11px; margin-top:2px; }
.lb-btn { position:fixed; z-index:10001; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:var(--fg); cursor:pointer; transition:background .2s,color .2s; }
.lb-btn-close { top:14px; right:18px; font-size:20px; }
.lb-btn-close:hover { background:rgba(255,45,45,.25); }
.lb-btn-prev { left:14px; top:50%; transform:translateY(-50%); font-size:24px; }
.lb-btn-next { right:14px; top:50%; transform:translateY(-50%); font-size:24px; }
.lb-btn-prev:hover,.lb-btn-next:hover { background:var(--ig-red-wash); color:var(--accent); }
/* ── NOTICIAS ─────────────────────────────────────────────── */
.ig-news-list { display:flex; flex-direction:column; gap:12px; }
.ig-news { display:grid; grid-template-columns:180px 1fr; gap:24px; padding:20px; border:1px solid var(--border); background:var(--bg-card); transition:border-color var(--dur-fast),transform var(--dur-fast); }
.ig-news:hover { border-color:rgba(255,45,45,.4); transform:translateY(-1px); }
.ig-news__img { position:relative; overflow:hidden; aspect-ratio:1; background:var(--bg-card-raised); }
.ig-news__body { display:flex; flex-direction:column; gap:8px; }
.ig-news__desc { font:var(--t-body); color:var(--fg-muted); margin:0; }
.ig-news__meta { font:var(--t-mono); font-size:11px; color:var(--fg-dim); margin-top:auto; }
.content-card { background:var(--bg-card); border:1px solid var(--border); overflow:hidden; transition:border-color var(--dur-fast),transform var(--dur-fast); }
.content-card:hover { border-color:rgba(255,45,45,.4); transform:translateY(-2px); }
.content-thumb { position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--bg-card-raised); }
.content-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.content-card:hover .content-thumb img { transform:scale(1.04); }
.content-body { padding:16px 18px; }
.content-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
/* ── VÍDEOS ───────────────────────────────────────────────── */
.ig-videos { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ig-video { background:var(--bg-card); border:1px solid var(--border); overflow:hidden; transition:transform var(--dur-fast),border-color var(--dur-fast); }
.ig-video:hover { transform:translateY(-3px); border-color:rgba(255,45,45,.4); }
.ig-video__thumb { position:relative; aspect-ratio:16/10; background:var(--bg-card-raised); overflow:hidden; }
.ig-play { position:absolute; right:14px; top:14px; width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--ig-black); border:0; display:flex; align-items:center; justify-content:center; transition:transform var(--dur-fast),box-shadow var(--dur-fast); }
.ig-play:hover { transform:scale(1.08); box-shadow:var(--glow-red); }
.ig-play span { width:0; height:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; }
.ig-video__dur { position:absolute; left:14px; bottom:14px; font:var(--t-mono); font-size:11px; padding:3px 7px; background:rgba(0,0,0,.7); color:var(--accent); border-radius:var(--r-1); }
.ig-video__meta { padding:14px 16px; }
/* ── SOCIAL ───────────────────────────────────────────────── */
.ig-social-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ig-social { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:22px 24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-1); text-decoration:none; color:var(--fg); transition:transform var(--dur-fast),border-color var(--dur-fast); }
.ig-social:hover { transform:translateY(-2px); border-color:rgba(255,45,45,.4); }
.ig-social__icon { width:44px; height:44px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
.ig-social__name { font:var(--t-h4); }
.ig-social__handle { font:var(--t-mono); font-size:12px; color:var(--fg-dim); margin-top:2px; }
.ig-social__count { font-family:var(--font-display); font-size:32px; color:var(--accent); letter-spacing:-0.01em; line-height:1; }
/* ── FOOTER ───────────────────────────────────────────────── */
.ig-foot,.footer { background:var(--ig-black); border-top:1px solid var(--border); padding:64px 32px 24px; }
.ig-foot__inner { max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.2fr 2fr; gap:48px; }
.ig-foot__brand { display:flex; align-items:center; gap:10px; }
.ig-foot__line { font:var(--t-label); letter-spacing:.18em; margin:20px 0 8px; }
.ig-foot__small { font:var(--t-body-s); color:var(--fg-dim); max-width:360px; }
.ig-foot__cols { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.ig-foot__cols h5 { font:var(--t-label); letter-spacing:.2em; color:var(--fg); margin:0 0 14px; }
.ig-foot__cols a { display:block; font:var(--t-body-s); color:var(--fg-dim); text-decoration:none; padding:6px 0; transition:color var(--dur-fast); }
.ig-foot__cols a:hover { color:var(--accent); }
.ig-foot__base { max-width:var(--wrap); margin:64px auto 0; padding-top:20px; border-top:1px solid var(--border-soft); display:flex; justify-content:space-between; font:var(--t-mono); font-size:11px; color:var(--fg-dim); }
.foot-brand strong { font-family:var(--font-display); font-size:28px; letter-spacing:-0.02em; color:var(--accent); }
.foot-brand p { font:var(--t-label-s); letter-spacing:.14em; color:var(--fg-dim); margin-top:4px; }
.foot-brand span { font:var(--t-body-s); color:var(--fg-dim); display:block; margin-top:10px; max-width:300px; line-height:1.65; }
.foot-contact h4 { font:var(--t-label); letter-spacing:.2em; color:var(--fg); margin:0 0 16px; }
.foot-nav h4 { font:var(--t-label); letter-spacing:.2em; color:var(--fg); margin:0 0 16px; }
.foot-nav a, .foot-contact a { display:block; font:var(--t-body-s); color:var(--fg-dim); text-decoration:none; padding:5px 0; transition:color var(--dur-fast); }
.foot-nav a:hover, .foot-contact a:hover { color:var(--accent); }
.foot-contact-item { display:flex; align-items:center; gap:12px; padding:8px 0; }
.foot-contact-icon { width:32px; height:32px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.foot-contact-label { font:var(--t-label-s); letter-spacing:.12em; color:var(--fg-dim); display:block; }
.foot-contact-val { font:var(--t-body-s); color:var(--fg-muted); display:block; margin-top:2px; }
.foot-bottom { border-top:1px solid var(--border-soft); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.foot-bottom p { font:var(--t-mono); font-size:11px; color:var(--fg-dim); }
/* ── CONTATO ──────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:16px; }
.contact-form input,.contact-form textarea,.form-group input,.form-group textarea,.form-group select { width:100%; background:var(--bg-card); border:1px solid var(--border); color:var(--fg); font:var(--t-body); padding:12px 16px; border-radius:var(--r-2); transition:border-color var(--dur-fast); outline:none; }
.contact-form input:focus,.contact-form textarea:focus,.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:rgba(255,45,45,.5); }
.contact-form textarea,.form-group textarea { resize:vertical; min-height:140px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font:var(--t-label-s); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.contact-info-item { display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--border-soft); }
.contact-info-icon { width:36px; height:36px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.contact-info-label { font:var(--t-label-s); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:2px; }
/* ── ALERTS ───────────────────────────────────────────────── */
.alert-ok { padding:12px 16px; background:rgba(45,217,107,.06); border:1px solid rgba(45,217,107,.25); border-radius:var(--r-2); font:var(--t-body-s); color:#2BD96B; }
.alert-ok.green { color:#2BD96B; }
.alert-err { padding:12px 16px; background:rgba(255,45,45,.06); border:1px solid rgba(255,45,45,.25); border-radius:var(--r-2); font:var(--t-body-s); color:var(--accent); }
/* Page header */
.page-banner { padding:36px 5% 28px; background:linear-gradient(135deg,var(--ig-black),var(--ig-ink)); border-bottom:1px solid var(--border); }
.page-title { font:var(--t-h1); text-transform:uppercase; margin-top:10px; }
/* ── SPONSORS ─────────────────────────────────────────────── */
.sponsors-strip { background:var(--ig-ink); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:24px 32px; overflow:hidden; }
.sponsors-track { display:flex; gap:32px; align-items:center; animation:igmarquee 28s linear infinite; white-space:nowrap; }
.sponsors-track:hover { animation-play-state:paused; }
.sponsor-logo { height:36px; object-fit:contain; filter:brightness(0) invert(0.5); transition:filter .2s; }
.sponsor-logo:hover { filter:brightness(0) invert(0.9); }
/* ── HERO scroll hint ─────────────────────────────────────── */
.ig-scroll-hint { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; z-index:5; }
.ig-scroll-hint span { display:block; width:1px; height:8px; background:var(--fg-dim); animation:scrollBounce 1.6s ease infinite; }
.ig-scroll-hint span:nth-child(2){ animation-delay:.2s; } .ig-scroll-hint span:nth-child(3){ animation-delay:.4s; }
@keyframes scrollBounce { 0%,100%{opacity:.2;transform:scaleY(.6)} 50%{opacity:.8;transform:scaleY(1)} }
/* ── HERO LINES sweep ─────────────────────────────────────── */
.ig-hero-lines { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.ig-hl { position:absolute; left:-100%; right:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(255,45,45,.18),transparent); animation:lineSlide 8s linear infinite; }
.ig-hl:nth-child(1){top:30%;animation-delay:0s;animation-duration:8s}
.ig-hl:nth-child(2){top:65%;animation-delay:3s;animation-duration:11s}
@keyframes lineSlide{0%{left:-100%;right:100%}100%{left:100%;right:-100%}}
/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:1100px){
.ig-nav__link em { display:none; }
.ig-stats-grid,.ig-videos { grid-template-columns:repeat(2,1fr); }
.ig-hero__strip { grid-template-columns:repeat(3,1fr); }
.content-grid { grid-template-columns:repeat(2,1fr); }
.contact-grid { grid-template-columns:1fr; }
.uol-card { flex:0 0 180px; }
}
@media(max-width:860px){
.nav-toggle { display:flex; }
.nav-menu { position:fixed; top:70px; left:0; right:0; background:rgba(10,10,11,.98); border-bottom:1px solid var(--border); flex-direction:column; padding:16px 0 24px; transform:none; left:0; right:0; display:none; z-index:999; }
.nav-menu.open { display:flex; }
.nav-menu a { padding:14px 32px; justify-content:flex-start; }
.lang-switch { margin-left:16px; }
.brand-info,.brand-text { display:none; }
.ig-games-cards { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:720px){
.wrap,.ig-wrap,.ig-section { padding-left:20px; padding-right:20px; }
.ig-hero { padding:110px 20px 40px; min-height:600px; }
.ig-hero__num,.hero-wm-text { right:-20px; font-size:250px; }
.ig-hero__strip { grid-template-columns:repeat(2,1fr); }
.ig-stats-grid,.ig-social-row { grid-template-columns:1fr 1fr; }
.ig-foot__inner,.ig-foot__cols { grid-template-columns:1fr; }
.ig-match { grid-template-columns:60px 1fr; }
.ig-match>.ig-chip { grid-column:1/-1; justify-self:start; }
.ig-news { grid-template-columns:100px 1fr; gap:14px; padding:14px; }
.ig-banner { height:clamp(300px,70vw,480px); }
.ig-banner-arrow { display:none; }
.lb-btn-prev,.lb-btn-next { display:none; }
.uol-card { flex:0 0 150px; }
.ig-videos { grid-template-columns:1fr 1fr; }
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
/* ═══════════════════════════════════════════════════════════
FIXES: News, Videos, Footer layout + Theme switcher
═══════════════════════════════════════════════════════════ */
/* ── NEWS layout ──────────────────────────────────────────── */
.news-layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 20px;
align-items: start;
}
.news-big-card {
display: block;
text-decoration: none;
border: 1px solid var(--border);
background: var(--bg-card);
overflow: hidden;
transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.news-big-card:hover { border-color: rgba(255,45,45,.5); transform: translateY(-2px); }
.news-big-img {
width: 100%; aspect-ratio: 16/9;
background: var(--bg-card-raised);
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 80px; color: rgba(255,45,45,.12);
position: relative; overflow: hidden;
}
.news-big-img img {
width:100%;height:100%;object-fit:cover;display:block;
transition: transform .4s;
}
.news-big-card:hover .news-big-img img { transform: scale(1.04); }
.date-badge {
position: absolute; top: 12px; left: 12px;
background: var(--accent); color: var(--ig-black);
padding: 6px 10px; text-align: center; line-height: 1.1;
}
.date-badge strong { font-family: var(--font-display); font-size: 24px; display: block; }
.date-badge span { font: var(--t-label-s); letter-spacing:.1em; }
.news-big-body {
padding: 20px 24px 24px;
display: flex; flex-direction: column; gap: 8px;
}
.news-big-body small { font: var(--t-mono); font-size:11px; color: var(--fg-dim); }
.news-big-body h3 { font: var(--t-h3); text-transform: uppercase; margin: 0; }
.news-big-body p { font: var(--t-body); color: var(--fg-muted); margin: 0; }
.news-big-body b { font: var(--t-label-s); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-top:4px; }
.news-side-stack { display: flex; flex-direction: column; gap: 8px; }
.news-sm {
display: grid; grid-template-columns: 44px 80px 1fr; gap: 14px;
align-items: start; padding: 14px 16px;
border: 1px solid var(--border); background: var(--bg-card);
text-decoration: none; color: var(--fg);
transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.news-sm:hover { border-color: rgba(255,45,45,.5); transform: translateY(-1px); }
.news-sm .nd {
text-align: center; border-right: 1px solid var(--border-soft);
padding-right: 10px; padding-top: 2px;
}
.news-sm .nd strong { font-family: var(--font-display); font-size: 26px; line-height:1; display:block; }
.news-sm .nd span { font: var(--t-label-s); letter-spacing:.1em; color:var(--fg-dim); display:block; margin-top:3px; }
.news-sm .nt {
aspect-ratio: 1; background: var(--bg-card-raised);
background-size: cover; background-position: center;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 22px; color: rgba(255,45,45,.15);
border-radius: var(--r-1); overflow:hidden;
}
.news-sm .nt img { width:100%;height:100%;object-fit:cover;display:block; }
.news-sm .nb { display: flex; flex-direction:column; gap:4px; }
.news-sm .nb small { font: var(--t-mono); font-size:10px; color:var(--fg-dim); display:none; }
.news-sm .nb h3 { font: var(--t-h4); text-transform: uppercase; margin:0; font-size:13px; line-height:1.3; }
.news-sm .nb p { font: var(--t-body-s); color:var(--fg-muted); margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-sm .nb b { font: var(--t-label-s); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
.news-empty { font:var(--t-body); color:var(--fg-dim); padding:40px 0; text-align:center; }
/* ── VIDEOS layout ─────────────────────────────────────────── */
.video-layout {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 20px;
align-items: start;
}
.video-main-wrap { display:flex; flex-direction:column; gap:14px; }
.video-main-player { position:relative; }
.video-main-link {
display: block; aspect-ratio: 16/9;
background: var(--bg-card-raised);
background-size: cover; background-position: center;
position: relative; overflow: hidden;
border: 1px solid var(--border);
transition: border-color var(--dur-fast);
}
.video-main-link:hover { border-color: rgba(255,45,45,.5); }
.video-main-link::after {
content:""; position:absolute; inset:0;
background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.7) 100%);
}
.vplay-big {
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
width:64px; height:64px; border-radius:50%;
background:var(--accent); color:var(--ig-black);
display:flex; align-items:center; justify-content:center;
font-size:22px; z-index:2;
transition:transform var(--dur-fast), box-shadow var(--dur-fast);
box-shadow: 0 4px 24px var(--ig-red-glow);
}
.video-main-link:hover .vplay-big { transform:translate(-50%,-50%) scale(1.1); box-shadow:var(--glow-red); }
.video-main-info { padding:0 4px; }
.video-main-info h3 { font:var(--t-h3); text-transform:uppercase; margin:0 0 6px; }
.video-main-info p { font:var(--t-body); color:var(--fg-muted); margin:0; }
.video-side-col { display:flex; flex-direction:column; gap:0; }
.vside-progress { height:2px; background:var(--border); margin-bottom:8px; }
.vside-progress-fill { height:100%; background:var(--accent); transition:width .3s linear; }
.video-side-list { display:flex; flex-direction:column; gap:6px; }
.video-card-sm {
display:grid; grid-template-columns:12px 72px 1fr; gap:12px; align-items:center;
padding:10px 12px; border:1px solid var(--border); background:var(--bg-card);
cursor:pointer; transition:border-color var(--dur-fast),background var(--dur-fast);
}
.video-card-sm:hover, .video-card-sm.active { border-color:rgba(255,45,45,.5); background:var(--bg-card-raised); }
.video-card-sm.active .vnd { color:var(--accent); }
.vnd { font:var(--t-mono); font-size:14px; color:var(--border); transition:color var(--dur-fast); }
.vthumb {
aspect-ratio:16/9; background:var(--bg-card-raised);
background-size:cover; background-position:center;
position:relative; display:flex; align-items:center; justify-content:center;
overflow:hidden; border-radius:var(--r-1);
}
.vthumb img { width:100%;height:100%;object-fit:cover;display:block; }
.vp { position:absolute; width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--ig-black);display:flex;align-items:center;justify-content:center;font-size:9px; }
.vd { position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.8);color:var(--accent);font:var(--t-mono);font-size:9px;padding:1px 5px;border-radius:var(--r-1); }
.vthumb-ph { color:rgba(255,45,45,.2);font-family:var(--font-display);font-size:14px; }
.vbody { display:flex;flex-direction:column;gap:2px;overflow:hidden; }
.vbody small { font:var(--t-mono);font-size:10px;color:var(--fg-dim); }
.vbody strong { font:var(--t-h4);font-size:12px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.vbody b { font:var(--t-label-s);letter-spacing:.12em;text-transform:uppercase;color:var(--accent); }
.dark-bg { background:var(--ig-ink); }
/* ── FOOTER fix ────────────────────────────────────────────── */
.footer-wrap { background:var(--ig-black); border-top:1px solid var(--border); padding:56px 5% 0; }
.footer-main { max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:48px; padding-bottom:48px; }
.foot-logo-text { font-family:var(--font-display); font-size:36px; letter-spacing:-0.02em; color:var(--accent); line-height:1; }
.foot-name { font:var(--t-label); letter-spacing:.16em; text-transform:uppercase; color:var(--fg); margin-top:8px; }
.foot-tag { font:var(--t-body-s); color:var(--fg-dim); margin-top:10px; max-width:300px; line-height:1.65; }
.foot-socials { display:flex; gap:10px; margin-top:16px; }
.foot-social-btn { width:36px;height:36px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:14px;text-decoration:none;transition:border-color var(--dur-fast),color var(--dur-fast); }
.foot-social-btn:hover { border-color:var(--accent);color:var(--accent); }
.foot-nav h4, .foot-contact h4 { font:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:var(--fg);margin:0 0 16px; }
.foot-nav-links { display:flex;flex-direction:column;gap:4px; }
.foot-nav-links a, .foot-nav a { display:block;font:var(--t-body-s);color:var(--fg-dim);text-decoration:none;padding:5px 0;transition:color var(--dur-fast); }
.foot-nav-links a:hover, .foot-nav a:hover { color:var(--accent); }
.foot-contact-item { display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-soft); }
.foot-contact-icon { width:32px;height:32px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0; }
.foot-contact-label { font:var(--t-label-s);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-dim);display:block; }
.foot-contact-val { font:var(--t-body-s);color:var(--fg-muted);display:block;margin-top:2px; }
.footer-bottom { border-top:1px solid var(--border-soft); max-width:var(--wrap); margin:0 auto; padding:20px 0; display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px; }
.footer-bottom p { font:var(--t-mono);font-size:11px;color:var(--fg-dim);margin:0; }
/* ══════════════════════════════════════════════════════════
NF — FOOTER layout Neymar Jr.
══════════════════════════════════════════════════════════ */
.nf { background: var(--ig-black); }
/* ── TOPO: 2 colunas (siga | parceiros) ── */
.nf__top { padding: 56px 5% 40px; }
.nf__top-inner {
max-width: var(--wrap);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 48px;
}
.nf__col-follow { flex-shrink: 0; }
.nf__col-partners { flex-shrink: 0; text-align: left; }
.nf__label {
font-size: 11px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--fg);
margin: 0 0 20px;
}
/* Ícones sociais */
.nf__socials { display: flex; flex-wrap: wrap; gap: 12px; }
.nf__social {
width: 52px; height: 52px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
text-decoration: none;
transition: transform .2s, opacity .2s;
flex-shrink: 0;
overflow: hidden;
}
.nf__social img { width: 52px; height: 52px; display: block; border-radius: 14px; }
.nf__social:hover { transform: scale(1.08); opacity: .9; }
.nf__social--inactive { opacity: .35; cursor: default; pointer-events: none; }
.nf__social--default {
background: #333;
border: 1px solid rgba(255,255,255,.15);
color: #fff; font-size: 18px;
}
/* Grid de parceiros — alinhado à direita como no modelo */
.nf__col-partners { padding-top: 2px; }
.nf__partners {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
}
.nf__partner {
display: flex; align-items: center; justify-content: center;
padding: 8px 16px;
min-height: 48px; min-width: 80px;
background: rgba(255,255,255,.06);
border-radius: 8px;
text-decoration: none;
opacity: 1;
transition: background .2s, transform .2s;
flex-shrink: 0;
}
.nf__partner:hover { background: rgba(255,255,255,.12); transform: scale(1.04); }
.nf__partner img {
max-height: 32px; max-width: 100px;
width: auto; object-fit: contain;
display: block;
transition: opacity .2s;
}
.nf__partner:hover img { opacity: 1; }
.nf__partner span {
font-size: 10px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--fg-dim);
}
/* ── DIVISOR ── */
.nf__divider {
border: none;
border-top: 1px solid rgba(255,255,255,.1);
margin: 0 5%;
}
/* ── BASE: parceiros de marketing | sem fins | língua | contato ── */
.nf__base { padding: 0 5%; }
.nf__base-inner {
max-width: var(--wrap);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 32px;
padding: 32px 0;
}
.nf__base-group { display: flex; flex-direction: column; gap: 8px; }
.nf__base-label {
font-size: 10px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--fg-dim);
margin: 0 0 4px;
}
.nf__base-group a {
font-size: 12px;
color: var(--fg-dim);
text-decoration: none;
transition: color .2s;
line-height: 1.8;
}
.nf__base-group a:hover { color: var(--fg); }
/* Seletor de idioma */
.nf__lang { display: flex; gap: 6px; flex-wrap: wrap; }
.nf__lang-btn {
font-size: 11px; font-weight: 600;
letter-spacing: .1em;
padding: 4px 10px;
border: 1px solid rgba(255,255,255,.2);
color: var(--fg-dim);
text-decoration: none;
transition: border-color .2s, color .2s;
}
.nf__lang-btn:hover, .nf__lang-btn--active {
border-color: var(--fg);
color: var(--fg);
}
/* Link contato destacado */
.nf__base-group--contact { justify-content: flex-start; }
.nf__contact-link {
font-size: 12px; font-weight: 600;
letter-spacing: .06em;
color: var(--fg) !important;
text-decoration: underline;
text-underline-offset: 4px;
transition: color .2s, text-decoration-color .2s;
}
.nf__contact-link:hover { color: var(--accent) !important; }
/* ── COPYRIGHT ── */
.nf__copy { padding: 0 5% 32px; }
.nf__copy-inner { max-width: var(--wrap); margin: 0 auto; }
.nf__copy p {
font-size: 11px; font-family: monospace;
color: rgba(255,255,255,.55);
margin: 0; line-height: 1.7;
}
/* ── RESPONSIVO ── */
@media (max-width: 900px) {
.nf__top-inner { grid-template-columns: 1fr; gap: 36px; }
.nf__base-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 540px) {
.nf__top { padding: 40px 5% 32px; }
.nf__base-inner { grid-template-columns: 1fr; gap: 20px; }
.nf__divider { margin: 0; }
}
/* ══════════════════════════════════════════════════════════
THEME SWITCHER — 22 cores (preto + branco + 20 acentes)
══════════════════════════════════════════════════════════ */
/* Theme: white (claro) */
[data-theme="white"] {
--ig-black: #F5F5F5;
--ig-ink: #EBEBEB;
--ig-surface-1: #FFFFFF;
--ig-surface-2: #F0F0F0;
--ig-surface-3: #E5E5E5;
--ig-line: #D0D0D0;
--ig-line-soft: #E0E0E0;
--ig-white: #0A0A0B;
--ig-fog: #333333;
--ig-steel: #666666;
--ig-graphite: #999999;
--ig-ash: #CCCCCC;
--bg: #F5F5F5;
--bg-section: #EBEBEB;
--bg-card: #FFFFFF;
--bg-card-raised:#F0F0F0;
--bg-hover: #E5E5E5;
--fg: #0A0A0B;
--fg-muted: #333333;
--fg-dim: #666666;
--fg-faint: #999999;
--border: #D0D0D0;
--border-soft: #E0E0E0;
}
/* Accent color themes */
[data-accent="red"] { --accent:var(--ig-red); --accent-hover:var(--ig-red-bright); --accent-press:var(--ig-red-deep); --glow-red:0 0 0 1px rgba(255,45,45,.35),0 0 24px -4px rgba(255,45,45,.35); --gold:var(--ig-red); --gold-lt:rgba(255,45,45,.1); --gold-bd:rgba(255,45,45,.4); }
[data-accent="gold"] { --accent:#D4AF37; --accent-hover:#E8C84A; --accent-press:#A88A22; --glow-red:0 0 0 1px rgba(212,175,55,.35),0 0 24px -4px rgba(212,175,55,.35); --gold:#D4AF37; --gold-lt:rgba(212,175,55,.1); --gold-bd:rgba(212,175,55,.4); }
[data-accent="blue"] { --accent:#4FB8FF; --accent-hover:#71C9FF; --accent-press:#2A9EE8; --glow-red:0 0 0 1px rgba(79,184,255,.35),0 0 24px -4px rgba(79,184,255,.35); --gold:#4FB8FF; --gold-lt:rgba(79,184,255,.1); --gold-bd:rgba(79,184,255,.4); }
[data-accent="green"] { --accent:#2BD96B; --accent-hover:#4AE882; --accent-press:#1CAF54; --glow-red:0 0 0 1px rgba(43,217,107,.35),0 0 24px -4px rgba(43,217,107,.35); --gold:#2BD96B; --gold-lt:rgba(43,217,107,.1); --gold-bd:rgba(43,217,107,.4); }
[data-accent="acid"] { --accent:#C6FF3D; --accent-hover:#D4FF62; --accent-press:#9FD419; --glow-red:0 0 0 1px rgba(198,255,61,.35),0 0 24px -4px rgba(198,255,61,.35); --gold:#C6FF3D; --gold-lt:rgba(198,255,61,.1); --gold-bd:rgba(198,255,61,.4); }
[data-accent="orange"] { --accent:#FF7A1A; --accent-hover:#FF9240; --accent-press:#D4600D; --glow-red:0 0 0 1px rgba(255,122,26,.35),0 0 24px -4px rgba(255,122,26,.35); --gold:#FF7A1A; --gold-lt:rgba(255,122,26,.1); --gold-bd:rgba(255,122,26,.4); }
[data-accent="purple"] { --accent:#A855F7; --accent-hover:#BF7EFF; --accent-press:#8B3DD4; --glow-red:0 0 0 1px rgba(168,85,247,.35),0 0 24px -4px rgba(168,85,247,.35); --gold:#A855F7; --gold-lt:rgba(168,85,247,.1); --gold-bd:rgba(168,85,247,.4); }
[data-accent="pink"] { --accent:#FF3DAA; --accent-hover:#FF65BD; --accent-press:#D4258A; --glow-red:0 0 0 1px rgba(255,61,170,.35),0 0 24px -4px rgba(255,61,170,.35); --gold:#FF3DAA; --gold-lt:rgba(255,61,170,.1); --gold-bd:rgba(255,61,170,.4); }
[data-accent="cyan"] { --accent:#00E5CC; --accent-hover:#25FFDF; --accent-press:#00B8A4; --glow-red:0 0 0 1px rgba(0,229,204,.35),0 0 24px -4px rgba(0,229,204,.35); --gold:#00E5CC; --gold-lt:rgba(0,229,204,.1); --gold-bd:rgba(0,229,204,.4); }
[data-accent="amber"] { --accent:#FFC23D; --accent-hover:#FFD060; --accent-press:#D49E25; --glow-red:0 0 0 1px rgba(255,194,61,.35),0 0 24px -4px rgba(255,194,61,.35); --gold:#FFC23D; --gold-lt:rgba(255,194,61,.1); --gold-bd:rgba(255,194,61,.4); }
/* ── THEME SWITCHER UI ─────────────────────────────────────── */
.theme-switcher {
position: fixed; bottom: 24px; right: 24px; z-index: 2000;
}
.theme-toggle-btn {
width: 44px; height: 44px; border-radius: 50%;
background: var(--bg-card); border: 1px solid var(--border);
color: var(--fg); font-size: 18px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 20px rgba(0,0,0,.4);
transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.theme-toggle-btn:hover { border-color: var(--accent); transform: scale(1.08); }
.theme-panel {
position: absolute; bottom: 54px; right: 0;
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--r-3); padding: 16px;
width: 264px;
box-shadow: 0 16px 48px rgba(0,0,0,.6);
display: none;
animation: fadeInUp .2s var(--ease-out);
}
.theme-panel.open { display: block; }
@keyframes fadeInUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.theme-panel h5 {
font: var(--t-label-s); letter-spacing: .2em; text-transform: uppercase;
color: var(--fg-dim); margin: 0 0 12px;
}
/* Background row */
.theme-bg-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
}
.theme-bg-btn {
padding: 10px; border-radius: var(--r-2); border: 1px solid var(--border);
cursor: pointer; font: var(--t-label-s); letter-spacing: .12em;
text-transform: uppercase; text-align: center; transition: all .15s;
}
.theme-bg-btn[data-bg="black"] { background: #0A0A0B; color: #FAFAFA; }
.theme-bg-btn[data-bg="white"] { background: #F5F5F5; color: #0A0A0B; }
.theme-bg-btn.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Accent grid */
.theme-accent-grid {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
}
.theme-accent-btn {
width: 100%; aspect-ratio: 1; border-radius: var(--r-2);
border: 2px solid transparent; cursor: pointer;
transition: transform .12s, border-color .12s;
position: relative;
}
.theme-accent-btn:hover { transform: scale(1.12); }
.theme-accent-btn.active { border-color: var(--ig-white); }
.theme-accent-btn.active::after { content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:rgba(0,0,0,.8); font-weight:900; }
/* Reset button */
.theme-reset { display:block; width:100%; margin-top:12px; padding:8px; background:transparent; border:1px solid var(--border); color:var(--fg-dim); font:var(--t-label-s); letter-spacing:.12em; text-transform:uppercase; border-radius:var(--r-1); cursor:pointer; transition:border-color .15s,color .15s; }
.theme-reset:hover { border-color:var(--accent); color:var(--accent); }
@media(max-width:600px){
.theme-switcher { bottom:16px; right:16px; }
.theme-panel { right:-4px; width:240px; }
.news-layout,.video-layout { grid-template-columns:1fr; }
.footer-main { grid-template-columns:1fr; gap:32px; }
}
/* ── DATE DUPLICATE FIX ──────────────────────────────────────
The date badge and .nd column already show the date.
Hide the redundant with the full date text. */
.news-big-body small,
.news-sm .nb small { display: none; }
/* ── FOOTER contact item ─────────────────────────────── */
.foot-contact-item p { display:flex; flex-direction:column; gap:2px; }
.foot-contact-item p strong { font:var(--t-label-s); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); }
.foot-contact-item p a { font:var(--t-body-s); color:var(--fg-muted); text-decoration:none; transition:color var(--dur-fast); }
.foot-contact-item p a:hover { color:var(--accent); }
/* ── BODY PADDING for fixed topbar ──────────────────────────
Prevents content from hiding under the 70px fixed header */
body { padding-top: 70px; }
/* Banner and hero sections should still go full-bleed */
.ig-banner, .ig-hero, .banner-static { margin-top: -70px; padding-top: 70px; }
.ig-hero { padding-top: 140px; }
/* ── VIDEO thumbnail fallback ────────────────────────────── */
.video-main-link:not([style]) { background: var(--bg-card-raised); }
.vthumb:not([style]) { background: var(--bg-card-raised); }
/* ── SECTION spacing fix ─────────────────────────────────── */
.section, .ig-section { padding: var(--space-20) 5%; }
.section .wrap, .ig-section .wrap { max-width: var(--wrap); margin: 0 auto; padding:0; }
/* ── CSS version bump note: v=14 ────────────────────────── */
/* ── CENTERING FIX — all sections uniform ────────────────────
Ensures news, videos, photos and games align to same center */
.section, .ig-section {
max-width: none;
padding: var(--space-20) 0;
}
.section > .wrap,
.ig-section > .wrap {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 5%;
}
/* Games strip also centered */
.ig-games-strip .ig-games-inner {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 5%;
}
/* Dark section bg covers full width */
.dark-bg, .section.dark-bg {
background: var(--ig-ink);
}
/* Photos section */
.photos-section { padding: var(--space-20) 0; }
.photos-section .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 5%; }
/* Video layout — 4 items sidebar max visible */
.video-side-list { max-height: none; }
.video-card-sm:nth-child(n+5) { display: none; } /* Hide 5th+ if somehow present */
/* ═══════════════════════════════════════════════════════════
PHOTO CAROUSEL — portrait cards with background-image
═══════════════════════════════════════════════════════════ */
.photos-carousel-wrap { position: relative; }
.photos-track-outer {
overflow: hidden;
position: relative;
}
.photos-track {
display: flex;
gap: 12px;
transition: transform .55s cubic-bezier(.25,.46,.45,.94);
}
.photo-slide {
flex: 0 0 calc(25% - 9px);
border-radius: var(--r-2);
overflow: hidden;
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
aspect-ratio: 3/4;
cursor: pointer;
transition: border-color .25s, transform .22s;
}
.photo-slide:hover { border-color: rgba(255,45,45,.5); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.photo-slide-img {
width: 100%; height: 100%;
background: var(--bg-card-raised);
background-size: cover;
background-position: center top;
display: flex; align-items: center; justify-content: center;
color: rgba(255,45,45,.1); font-family: var(--font-display); font-size: 24px;
transition: transform .45s ease;
position: absolute; inset: 0;
}
.photo-slide:hover .photo-slide-img { transform: scale(1.06); }
.photo-slide-overlay {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 50%, transparent 100%);
opacity: 0; transition: opacity .3s;
}
.photo-slide:hover .photo-slide-overlay { opacity: 1; }
.photo-slide-info {
position: absolute; bottom: 0; left: 0; right: 0; padding: 14px;
transform: translateY(8px); transition: transform .3s;
}
.photo-slide:hover .photo-slide-info { transform: translateY(0); }
.photo-slide-info small { display: block; color: var(--accent); font: var(--t-label-s); letter-spacing: .1em; margin-bottom: 4px; }
.photo-slide-info h4 { color: #fff; font: var(--t-h4); font-size: 12px; line-height: 1.3; }
/* Controls */
.photos-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.photo-btn {
width: 40px; height: 40px; border-radius: 50%;
background: var(--bg-card); border: 1px solid var(--border);
color: var(--fg-dim); font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color .2s, background .2s, color .2s;
}
.photo-btn:hover { border-color: rgba(255,45,45,.5); background: rgba(255,45,45,.08); color: var(--accent); }
.photo-dots { display: flex; gap: 7px; align-items: center; }
.photo-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.15); cursor: pointer; transition: background .25s, transform .25s; border: none; }
.photo-dot.active { background: var(--accent); transform: scale(1.3); }
/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.97); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 88vw; max-height: 88vh; object-fit: contain; border-radius: var(--r-2); }
.lightbox-close { position: fixed; top: 16px; right: 20px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-close:hover { background: rgba(255,45,45,.25); }
.lightbox-title { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font: var(--t-mono); font-size: 12px; color: rgba(255,255,255,.5); text-align: center; pointer-events: none; white-space: nowrap; }
/* Placeholder */
.photos-placeholder { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.photo-ph { aspect-ratio: 3/4; border: 1px solid var(--border); background: var(--bg-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--fg-dim); font: var(--t-body-s); text-align: center; border-radius: var(--r-2); }
.ph-icon { font-size: 28px; opacity: .25; }
@media(max-width:860px){
.video-layout { grid-template-columns: 1fr; }
.photo-slide { flex: 0 0 calc(50% - 6px); }
}
@media(max-width:600px){
.photo-slide { flex: 0 0 calc(100% - 12px); }
.photos-placeholder { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════
VIDEO LAYOUT FIX — sidebar must not overflow player height
═══════════════════════════════════════════════════════════ */
.video-layout {
display: grid;
grid-template-columns: 55% 45%; /* player slightly wider */
gap: 14px;
align-items: start; /* don't stretch height */
}
.video-main-wrap {
display: flex;
flex-direction: column;
gap: 10px;
}
.video-main-link {
display: block;
width: 100%;
aspect-ratio: 16/9; /* fixed ratio, no overflow */
background-color: var(--bg-card-raised);
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
border: 1px solid var(--border);
transition: border-color var(--dur-fast);
}
.video-side-col {
display: flex;
flex-direction: column;
gap: 0;
/* Sidebar height = player aspect-ratio height */
height: 0; /* reset */
}
.video-side-list {
display: flex;
flex-direction: column;
gap: 1px;
}
/* Each of 4 cards same height */
.video-card-sm {
display: grid;
grid-template-columns: 12px 72px 1fr;
gap: 10px;
align-items: center;
padding: 8px 12px;
min-height: 68px;
border: 1px solid var(--border);
border-top: 0;
background: var(--bg-card);
cursor: pointer;
transition: border-color var(--dur-fast), background var(--dur-fast);
}
.video-card-sm:first-child { border-top: 1px solid var(--border); }
.video-card-sm:hover,
.video-card-sm.active { background: var(--bg-card-raised); }
.video-card-sm.active { border-left: 3px solid var(--accent); }
.video-card-sm.active .vnd { color: var(--accent); }
.vthumb {
width: 72px;
height: 48px;
background-color: var(--bg-card-raised);
background-size: cover;
background-position: center;
position: relative;
display: flex; align-items: center; justify-content: center;
overflow: hidden; border-radius: var(--r-1); flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════
GAMES CARDS — small, clean, with team crest initials
═══════════════════════════════════════════════════════════ */
.ig-games-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
.ig-gc {
background: var(--bg-card);
border: 1px solid var(--border);
overflow: hidden;
transition: transform var(--dur-fast), border-color var(--dur-fast);
}
.ig-gc:hover { transform: translateY(-2px); border-color: rgba(255,45,45,.4); }
/* Game card head — red date */
.ig-gc-head {
background: linear-gradient(135deg, var(--ig-red), var(--ig-red-deep));
display: flex; flex-direction: row;
align-items: center; justify-content: center;
padding: 5px 10px; gap: 5px;
}
.ig-gc-day { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--ig-black); line-height: 1; }
.ig-gc-mon { font: var(--t-label-s); letter-spacing: .1em; color: rgba(10,10,11,.7); }
/* Team crests row */
.ig-gc-crests {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 8px 6px;
}
.ig-gc-crest {
width: 32px; height: 32px;
border: 1px solid var(--border);
border-radius: var(--r-1);
display: flex; align-items: center; justify-content: center;
background: var(--bg-card-raised);
overflow: hidden;
flex-shrink: 0;
}
.ig-gc-crest img { width: 100%; height: 100%; object-fit: contain; }
.ig-gc-crest-txt {
font: var(--t-label-s); font-size: 9px; letter-spacing: .06em;
color: var(--fg-muted); text-align: center; line-height: 1.1;
text-transform: uppercase;
}
.ig-gc-sep {
font: var(--t-mono); font-size: 10px; color: var(--fg-faint);
flex-shrink: 0;
}
/* Body */
.ig-gc-body {
padding: 4px 8px 8px;
display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.ig-gc-time { font: var(--t-mono); font-size: 10px; color: var(--fg-dim); }
.ig-gc-status { font: var(--t-label-s); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 2px 6px; border-radius: var(--r-1); background: var(--ig-red-wash); font-size: 8px; }
.ig-gc-status.finished { color: var(--fg-dim); background: var(--bg-card-raised); }
.ig-gc-comp { font: var(--t-mono); font-size: 9px; color: var(--fg-faint); text-align: center; }
.ig-gc-versus { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.ig-gc-team { font: var(--t-label-s); font-size: 10px; font-weight: 900; color: var(--fg); text-align: center; line-height: 1.2; }
.ig-gc-vs { font: var(--t-mono); font-size: 9px; color: var(--accent); letter-spacing: .08em; padding: 2px 8px; width: 100%; text-align: center; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.ig-gc-result { font-family: var(--font-display); font-size: 20px; color: var(--accent); letter-spacing: -0.02em; line-height: 1; }
@media(max-width:860px){
.video-layout { grid-template-columns: 1fr; }
.ig-games-cards { grid-template-columns: repeat(2,1fr); }
}
/* ═══════════════════════════════════════════════════════════
GAME CARDS — with team crests (small logos)
═══════════════════════════════════════════════════════════ */
/* Override grid to be horizontal scroll on overflow */
.ig-games-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.ig-games-cards::-webkit-scrollbar { display: none; }
/* Crest row — logos of both teams */
.ig-gc-crests {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 8px 6px;
}
.ig-gc-crest {
width: 36px;
height: 36px;
border: 1px solid var(--border);
border-radius: var(--r-1);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bg-card-raised);
flex-shrink: 0;
}
.ig-gc-crest img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3px;
display: block;
filter: none;
}
.ig-gc-crest-txt {
font-family: var(--font-display);
font-size: 11px;
font-weight: 900;
color: var(--fg-dim);
letter-spacing: -0.02em;
line-height: 1;
}
.ig-gc-sep {
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
font-weight: 700;
flex-shrink: 0;
}
/* ══════════════════════════════════════════════════════════
VIDEO LAYOUT — player + 4 cards exata mesma altura
Os 4 cards dividem a altura do player igualmente (25% cada)
══════════════════════════════════════════════════════════ */
.video-layout {
display: grid;
grid-template-columns: 55% 45%;
gap: 0 16px;
align-items: stretch;
}
/* Coluna esquerda: player + título */
.video-main-wrap {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Player 16:9 */
.video-main-link {
display: block;
width: 100%;
aspect-ratio: 16/9;
position: relative;
overflow: hidden;
border: 1px solid var(--border);
transition: border-color var(--dur-fast);
flex-shrink: 0;
}
.video-main-link:hover { border-color: rgba(255,45,45,.5); }
/* Coluna direita: 4 cards que preenchem exatamente a mesma altura do player */
.video-side-col {
/* Mesma altura que o player — calculado via aspect-ratio 16:9 do container */
/* aspect-ratio: 16/9 com largura = 45% do container */
display: flex;
flex-direction: column;
gap: 0;
}
.vside-progress { display: none; } /* remove progress bar — não necessário */
.video-side-list {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
/* Forçar altura igual ao player da coluna esquerda via container query trick */
container-type: size;
}
/* Cada card: 1/4 da altura total */
.video-card-sm {
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: 14px 88px 1fr;
gap: 10px;
align-items: center;
padding: 0 14px;
border: 1px solid var(--ig-line);
border-top: none;
background: var(--bg-card);
cursor: pointer;
transition: background var(--dur-fast), border-color var(--dur-fast);
text-decoration: none;
color: inherit;
overflow: hidden;
}
.video-card-sm:first-child {
border-top: 1px solid var(--ig-line);
border-radius: var(--r-2) var(--r-2) 0 0;
}
.video-card-sm:last-child { border-radius: 0 0 var(--r-2) var(--r-2); }
.video-card-sm:hover,
.video-card-sm.active {
background: var(--bg-card-raised);
border-color: rgba(255,45,45,.45);
}
.video-card-sm.active { border-left: 2px solid var(--accent); }
.video-card-sm.active .vnd { color: var(--accent); }
/* ▶ play indicator */
.vnd {
font-family: var(--font-mono);
font-size: 14px;
color: var(--ig-ash);
transition: color var(--dur-fast);
display: flex;
align-items: center;
justify-content: center;
}
/* Thumbnail — altura relativa ao card */
.vthumb {
width: 88px;
height: 56px;
background: var(--bg-card-raised);
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: var(--r-1);
flex-shrink: 0;
}
.vthumb img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.vp {
position: absolute;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--accent);
color: var(--ig-black);
display: flex; align-items: center; justify-content: center;
font-size: 9px; z-index: 1;
box-shadow: 0 2px 8px rgba(255,45,45,.5);
}
.vd {
position: absolute; bottom: 3px; right: 4px;
background: rgba(0,0,0,.82);
color: var(--accent);
font: var(--t-mono); font-size: 9px;
padding: 1px 5px; border-radius: var(--r-1);
}
.vthumb-ph { color: rgba(255,45,45,.2); font-family: var(--font-display); font-size: 13px; }
/* Text body inside each card */
.vbody {
display: flex; flex-direction: column; gap: 2px;
overflow: hidden; min-width: 0;
}
.vbody small { font: var(--t-mono); font-size: 10px; color: var(--fg-dim); }
.vbody strong {
font: var(--t-h4); font-size: 13px;
text-transform: uppercase;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.2;
}
.vbody b {
font: var(--t-label-s); letter-spacing: .12em;
text-transform: uppercase; color: var(--accent);
}
/* Responsive */
@media(max-width:860px){
.video-layout { grid-template-columns: 1fr; }
.video-side-list { flex-direction: row; overflow-x: auto; }
.video-card-sm {
flex: 0 0 240px;
border-top: 1px solid var(--ig-line) !important;
border-radius: var(--r-2) !important;
grid-template-columns: 72px 1fr; /* hide vnd on mobile */
padding: 10px;
height: auto;
}
.vnd { display: none; }
}
/* ════════════════════════════════════════════════════════════
MOBILE RESPONSIVO COMPLETO
Breakpoints: 860px (tablet), 600px (mobile), 390px (small)
════════════════════════════════════════════════════════════ */
/* ── META viewport já está no HTML — este CSS é automático ──
Quando a tela é < 860px → layout mobile ativo */
/* ════════ TABLET (≤ 860px) ════════ */
@media (max-width: 860px) {
/* TOPBAR */
.topbar, .ig-nav { min-height: 60px; }
.ig-nav__inner, .topbar-inner { height: 60px; padding: 0 20px; }
.brand-info, .brand-text { display: none; }
.brand-logo-text { font-size: 22px; }
.brand-logo-img { height: 34px; width: 34px; }
body { padding-top: 60px; }
.ig-banner, .ig-hero { margin-top: -60px; padding-top: 60px; }
/* BANNER */
.ig-banner { height: clamp(220px, 52vw, 480px); }
.ig-banner-prev { left: 10px; }
.ig-banner-next { right: 10px; }
.ig-slide-wm { font-size: clamp(70px, 20vw, 150px); right: -10px; }
.ig-slide-title { font-size: clamp(18px, 4vw, 32px); }
.ig-slide-athlete { left: 4%; bottom: 12%; }
/* SECTION spacing */
.section, .ig-section { padding: 40px 0; }
.section > .wrap,
.ig-section > .wrap { padding: 0 20px; }
/* SEC HEADER */
.sec-head { margin-bottom: 20px; }
.sec-title { font-size: clamp(22px, 5vw, 36px); }
/* NEWS */
.news-layout { grid-template-columns: 1fr; gap: 14px; }
.news-big-img { aspect-ratio: 16/9; }
.news-side-stack { gap: 8px; }
.news-sm { grid-template-columns: 40px 70px 1fr; gap: 10px; padding: 12px; }
.news-sm .nd strong { font-size: 22px; }
/* VIDEOS */
.video-layout { grid-template-columns: 1fr; gap: 12px; }
.video-side-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
height: auto;
}
.video-card-sm {
flex: none;
min-height: 70px;
border-top: 1px solid var(--ig-line) !important;
border-radius: var(--r-2) !important;
grid-template-columns: 72px 1fr;
}
.video-card-sm:first-child { border-radius: var(--r-2) !important; }
.video-card-sm:last-child { border-radius: var(--r-2) !important; }
.vnd { display: none; }
/* PHOTOS */
.photos-track { gap: 8px; }
.photo-slide { flex: 0 0 calc(40% - 4px); }
/* GAMES */
.ig-games-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ig-games-strip { padding: 14px 20px 16px; }
/* FOOTER */
.footer-main { grid-template-columns: 1fr 1fr; gap: 28px; }
.foot-brand { grid-column: 1 / -1; }
}
/* ════════ MOBILE (≤ 600px) ════════ */
@media (max-width: 600px) {
/* TOPBAR */
.topbar, .ig-nav { min-height: 56px; }
.ig-nav__inner, .topbar-inner { height: 56px; padding: 0 16px; gap: 0; }
body { padding-top: 56px; }
.ig-banner, .ig-hero, .banner-static { margin-top: -56px; padding-top: 56px; }
/* BANNER */
.ig-banner { height: clamp(200px, 60vw, 320px); }
.ig-banner-arrow { display: none; }
.ig-slide-wm { display: none; }
.ig-slide-athlete { left: 16px; bottom: 56px; max-width: 80%; gap: 4px; }
.ig-slide-kicker { font-size: 9px; letter-spacing: .2em; }
.ig-slide-title { font-size: clamp(16px, 5vw, 26px); margin-bottom: 10px; }
.ig-slide-btn { font-size: 11px; padding: 9px 16px; }
.ig-banner-dots { bottom: 12px; gap: 6px; }
.ig-banner-dot { width: 6px; height: 6px; }
.ig-banner-dot.active { width: 18px; }
/* SECTION */
.section, .ig-section { padding: 32px 0; }
.section > .wrap,
.ig-section > .wrap { padding: 0 16px; }
.sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.sec-kicker { font-size: 9px; }
.sec-title { font-size: clamp(20px, 6vw, 30px); }
.sec-link { font-size: 10px; }
/* NEWS */
.news-layout { grid-template-columns: 1fr; gap: 12px; }
.news-big-img { aspect-ratio: 16/9; }
.news-big-body { padding: 14px 16px 18px; gap: 6px; }
.news-big-body h3 { font-size: clamp(16px, 5vw, 24px); }
.date-badge strong { font-size: 18px; }
.date-badge { padding: 4px 8px; }
.news-sm { grid-template-columns: 34px 60px 1fr; gap: 8px; padding: 10px 12px; }
.news-sm .nd strong { font-size: 18px; }
.news-sm .nt { height: 60px; }
.news-sm .nb h3 { font-size: 12px; }
.news-sm .nb p { -webkit-line-clamp: 1; }
/* VIDEOS */
.video-layout { grid-template-columns: 1fr; gap: 10px; }
.video-title-overlay { padding: 12px 14px; }
.video-overlay-title { font-size: clamp(14px, 4.5vw, 22px); }
.vplay-big { width: 48px; height: 48px; font-size: 16px; }
.video-side-list {
display: flex;
flex-direction: column;
gap: 0;
height: auto;
}
.video-card-sm {
grid-template-columns: 68px 1fr;
min-height: 62px;
padding: 8px 12px;
border-radius: 0 !important;
}
.video-card-sm:first-child { border-radius: var(--r-2) var(--r-2) 0 0 !important; }
.video-card-sm:last-child { border-radius: 0 0 var(--r-2) var(--r-2) !important; }
.vthumb { width: 68px; height: 46px; }
.vbody strong { font-size: 11px; }
.vbody small { font-size: 9px; }
/* PHOTOS */
.photo-slide { flex: 0 0 calc(55% - 6px); }
.photo-btn { width: 34px; height: 34px; font-size: 14px; }
.photos-controls { gap: 8px; margin-top: 12px; }
/* GAMES */
.ig-games-strip { padding: 12px 16px 14px; }
.ig-games-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ig-gc-day { font-size: 18px; }
.ig-gc-team { font-size: 10px; }
.ig-gc-body { padding: 6px 8px 8px; gap: 2px; }
.ig-gc-head { padding: 5px 8px; }
.ig-gc-crest { width: 28px; height: 28px; }
/* FOOTER */
.footer-main { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; }
.footer-wrap { padding: 40px 16px 0; }
.foot-logo-text { font-size: 28px; }
.foot-nav h4, .foot-contact h4 { font-size: 10px; margin-bottom: 12px; }
.footer-bottom { flex-direction: column; gap: 6px; text-align: center; }
/* THEME SWITCHER */
.theme-switcher { bottom: 16px; right: 16px; }
.theme-panel { right: -4px; width: 230px; }
/* LIGHTBOX */
.lb-btn-prev, .lb-btn-next { display: none; }
.lb-img-uol, .lb-img { max-width: 96vw; max-height: 75vh; }
/* UOL PHOTO TABS */
.uol-catbar-inner { padding: 0 16px; }
.uol-tab { padding: 12px 14px; font-size: 11px; }
}
/* ════════ SMALL PHONE (≤ 390px) ════════ */
@media (max-width: 390px) {
.ig-banner { height: clamp(180px, 65vw, 280px); }
.section > .wrap,
.ig-section > .wrap { padding: 0 12px; }
.ig-games-cards { grid-template-columns: 1fr 1fr; gap: 5px; }
.ig-gc-day { font-size: 16px; }
.news-sm { grid-template-columns: 30px 52px 1fr; gap: 7px; padding: 8px 10px; }
.photo-slide { flex: 0 0 calc(70% - 4px); }
.video-card-sm { grid-template-columns: 58px 1fr; }
.vthumb { width: 58px; height: 40px; }
.theme-panel { width: 200px; }
.theme-accent-grid { grid-template-columns: repeat(5, 1fr); gap: 5px; }
}
/* ════════ TOUCH IMPROVEMENTS ════════ */
@media (hover: none) and (pointer: coarse) {
/* Remove hover states on touch — only show active */
.ig-gc:hover,
.uol-card:hover,
.news-big-card:hover,
.news-sm:hover,
.video-card-sm:hover,
.content-card:hover {
transform: none;
border-color: var(--border);
}
/* Tap highlight */
.ig-gc:active { background: var(--bg-card-raised); }
.uol-card:active { transform: scale(0.98); }
.news-sm:active { background: var(--bg-card-raised); }
.video-card-sm:active { background: var(--bg-card-raised); }
/* Photo overlay always visible on touch */
.photo-slide-overlay { opacity: 1; }
.photo-slide-info { transform: translateY(0); }
/* Larger touch targets */
.photo-btn, .uol-arrow, .ig-banner-arrow,
.theme-toggle-btn, .lb-btn { min-width: 44px; min-height: 44px; }
}
/* ════════ SWIPE HINT ════════ */
@media (max-width: 600px) {
/* Visual hint that carousel is swipeable */
.photos-track-outer::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 48px;
background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
pointer-events: none;
z-index: 2;
}
.photos-track-outer { position: relative; }
}
/* ════════════════════════════════════════════════════════════
INNER PAGES — fotos, videos, noticias, jogos
════════════════════════════════════════════════════════════ */
/* ── PAGE HEADER ─────────────────────────────────────────── */
.page-banner {
padding: 36px 5% 28px;
background: linear-gradient(135deg, var(--ig-black), var(--ig-ink));
border-bottom: 1px solid var(--border);
max-width: 100%;
}
.page-banner .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0; }
.page-title {
font: var(--t-h1);
text-transform: uppercase;
margin-top: 10px;
display: flex;
align-items: center;
gap: 14px;
}
/* ── FOTOS PAGE ──────────────────────────────────────────── */
/* Portrait grid — 5 cols desktop, responsive */
.ig-photos-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.ig-photo-card,
.content-card {
display: block;
text-decoration: none;
color: var(--fg);
border: 1px solid var(--border);
background: var(--bg-card);
overflow: hidden;
transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.ig-photo-card:hover,
.content-card:hover {
border-color: rgba(255,45,45,.5);
transform: translateY(-3px);
}
.content-thumb {
aspect-ratio: 3/4; /* portrait */
background: var(--bg-card-raised);
background-size: cover;
background-position: center top;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,45,45,.1);
font-family: var(--font-display);
font-size: 18px;
overflow: hidden;
position: relative;
transition: transform .45s;
}
.content-card:hover .content-thumb { transform: scale(1.04); }
.content-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.content-body small { font: var(--t-mono); font-size: 10px; color: var(--fg-dim); }
.content-body h3 { font: var(--t-h4); font-size: 12px; text-transform: uppercase; margin: 0; line-height: 1.3; }
.content-body p { font: var(--t-body-s); color: var(--fg-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* ── NOTICIAS PAGE ───────────────────────────────────────── */
.ig-news-page-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
/* Notícia card uses content-card classes — aspect-ratio 16:9 for news */
.ig-news-page-grid .content-thumb { aspect-ratio: 16/9; }
.ig-news-page-grid .content-body h3 { font-size: 15px; }
/* ── VIDEOS PAGE ─────────────────────────────────────────── */
/* ig-videos already defined — override for page */
.ig-video__thumb {
position: relative;
aspect-ratio: 16/9;
background: var(--bg-card-raised);
background-size: cover;
background-position: center;
overflow: hidden;
}
.ig-video__thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform .4s;
}
.ig-video:hover .ig-video__thumb img { transform: scale(1.04); }
.ig-video__thumb .ig-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.ig-video__meta {
padding: 12px 14px 14px;
}
.ig-video__meta small { font: var(--t-mono); font-size: 11px; color: var(--fg-dim); display: block; margin-bottom: 4px; }
.ig-video__meta h3 { font: var(--t-h4); text-transform: uppercase; margin: 0 0 4px; font-size: 14px; line-height: 1.3; }
.ig-video__meta p { font: var(--t-body-s); color: var(--fg-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Play btn */
.play-btn,
.ig-play {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--accent);
color: var(--ig-black);
border: 0;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
cursor: pointer;
transition: transform var(--dur-fast), box-shadow var(--dur-fast);
box-shadow: 0 4px 20px var(--ig-red-glow);
}
.play-btn:hover, .ig-play:hover {
transform: translate(-50%,-50%) scale(1.1);
box-shadow: var(--glow-red);
}
/* ── JOGOS PAGE ──────────────────────────────────────────── */
/* Uses ig-gc classes — already defined. Just ensure page spacing */
.ig-games-cards.page-games {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--fg-dim);
font: var(--t-body);
border: 1px dashed var(--border);
border-radius: var(--r-3);
}
/* ── RESPONSIVE: inner pages ─────────────────────────────── */
@media (max-width: 1100px) {
.ig-photos-grid { grid-template-columns: repeat(4, 1fr); }
.ig-news-page-grid { grid-template-columns: repeat(2, 1fr); }
.ig-videos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
.ig-photos-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ig-news-page-grid { grid-template-columns: repeat(2, 1fr); }
.ig-videos { grid-template-columns: repeat(2, 1fr); }
.ig-games-cards { grid-template-columns: repeat(2, 1fr); }
.page-banner { padding: 24px 20px 20px; }
.page-title { font-size: clamp(22px,5vw,40px); }
}
@media (max-width: 600px) {
.ig-photos-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ig-news-page-grid { grid-template-columns: 1fr; }
.ig-videos { grid-template-columns: 1fr 1fr; gap: 8px; }
.ig-games-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.page-banner { padding: 18px 16px 16px; }
.page-title { font-size: clamp(20px, 6vw, 30px); gap: 10px; }
.content-body h3 { font-size: 11px; }
.ig-news-page-grid .content-body h3 { font-size: 13px; }
.ig-video__meta h3 { font-size: 12px; }
}
@media (max-width: 390px) {
.ig-photos-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
.ig-videos { grid-template-columns: 1fr; }
.ig-games-cards { grid-template-columns: 1fr 1fr; }
}
/* ═══════════════════════════════════════════════════════════
VIDEO SECTION — FINAL OVERRIDE (fixes duplicates above)
═══════════════════════════════════════════════════════════ */
.video-layout {
display: grid;
grid-template-columns: 55% 44%;
gap: 0 16px;
align-items: stretch;
}
.video-main-wrap {
display: flex;
flex-direction: column;
}
.video-main-player { flex: 1; }
/* Player com título overlay */
.video-main-link {
display: block;
width: 100%;
aspect-ratio: 16/9;
position: relative; /* REQUIRED for overlay */
overflow: hidden;
background-size: cover;
background-position: center;
background-color: var(--bg-card-raised);
border: 1px solid var(--border);
transition: border-color .2s;
}
.video-main-link:hover { border-color: rgba(255,45,45,.5); }
/* Title inside the thumbnail */
.video-title-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0,0,0,.88) 0%,
rgba(0,0,0,.3) 40%,
transparent 65%);
display: flex;
align-items: flex-end;
padding: 16px 18px;
z-index: 2;
pointer-events: none;
}
.video-overlay-title {
font-family: var(--font-display, 'Anton', sans-serif);
font-size: clamp(16px, 2vw, 26px);
font-weight: 800;
font-style: italic;
text-transform: uppercase;
letter-spacing: -0.01em;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,.9);
line-height: 1.1;
margin: 0;
}
.vplay-big {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
border-radius: 50%;
background: var(--accent, #FF2D2D);
color: #000;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
z-index: 3;
box-shadow: 0 4px 20px rgba(255,45,45,.45);
transition: transform .2s, box-shadow .2s;
pointer-events: none;
}
.video-main-link:hover .vplay-big {
transform: translate(-50%,-50%) scale(1.1);
}
/* Sidebar — height matches player via align-items:stretch on parent */
.video-side-col {
display: flex;
flex-direction: column;
height: 100%; /* fills grid row height */
}
.vside-progress { display: none; }
.video-side-list {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
/* 4 cards fill the sidebar equally */
.video-card-sm {
flex: 1 1 0 !important;
min-height: 0 !important;
display: grid;
grid-template-columns: 14px 88px 1fr;
gap: 10px;
align-items: center;
padding: 0 14px;
border: 1px solid var(--ig-line, #2A2A33);
border-top: none;
background: var(--bg-card, #141418);
cursor: pointer;
transition: background .2s, border-color .2s;
overflow: hidden;
}
.video-card-sm:first-child {
border-top: 1px solid var(--ig-line, #2A2A33);
border-radius: 4px 4px 0 0;
}
.video-card-sm:last-child { border-radius: 0 0 4px 4px; }
.video-card-sm:hover,
.video-card-sm.active { background: var(--bg-card-raised, #1B1B21); border-color: rgba(255,45,45,.4); }
.video-card-sm.active { border-left: 2px solid var(--accent, #FF2D2D); }
@media(max-width:860px){
.video-layout { grid-template-columns: 1fr; }
.video-side-list { flex-direction: row; overflow-x: auto; height: auto; }
.video-card-sm { flex: 0 0 220px !important; border-top: 1px solid var(--ig-line, #2A2A33) !important; border-radius: 4px !important; }
}
/* ═══════════════════════════════════════════════════════════
NEWS SECTION — IGUAL AOS VÍDEOS
Foto cover + título/desc overlay com gradiente
═══════════════════════════════════════════════════════════ */
/* Grid: big card 55% | side stack 44% */
.news-layout {
display: grid;
grid-template-columns: 55% 44%;
gap: 0 16px;
align-items: stretch;
}
/* ── BIG CARD — igual ao video-main-link ── */
.news-big-card {
display: block;
position: relative;
height: 100%;
text-decoration: none;
color: var(--fg);
border: 1px solid var(--border);
overflow: hidden;
transition: border-color .2s, transform .2s;
}
.news-big-card:hover { border-color: rgba(255,45,45,.5); transform: translateY(-2px); }
/* Foto preenche tudo — cover, sem corte forçado */
.news-big-img {
position: absolute;
inset: 0;
background-color: #111;
background-size: cover;
background-position: center;
transition: transform .4s;
}
.news-big-img img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .4s;
}
.news-big-card:hover .news-big-img { transform: scale(1.03); }
/* Manter proporção do card — igual 16:9 do player */
.news-big-card::before {
content: '';
display: block;
padding-top: 75%; /* proporção 4:3 — mais alto que vídeo para ver a foto */
}
/* Gradiente sobre a foto — igual ao video-title-overlay */
.news-big-body {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,.92) 0%,
rgba(0,0,0,.5) 40%,
transparent 70%
);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px 22px;
pointer-events: none;
}
.news-big-body small { display: none; }
.news-big-body h3 {
font-family: var(--font-display, 'Anton', sans-serif);
font-size: clamp(16px, 2vw, 24px);
font-weight: 800;
font-style: italic;
text-transform: uppercase;
letter-spacing: -0.01em;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,.9);
margin: 0 0 6px;
line-height: 1.1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-big-body p {
font-size: 11px;
color: rgba(255,255,255,.7);
margin: 0 0 8px;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.news-big-body b {
font-size: 9px;
font-weight: 900;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
pointer-events: auto;
}
/* Date badge */
.date-badge {
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 3 !important;
background: var(--accent) !important;
color: #000 !important;
padding: 5px 8px !important;
text-align: center !important;
max-width: 48px !important;
line-height: 1 !important;
pointer-events: none !important;
}
.date-badge strong { font-family: var(--font-display,'Anton',sans-serif) !important; font-size: 20px !important; display: block !important; line-height: 1 !important; }
.date-badge span { font-size: 8px !important; font-weight: 900 !important; letter-spacing: .06em !important; display: block !important; margin-top: 2px !important; }
/* ── SIDE STACK: 4 cards fill same height ── */
.news-side-stack {
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
}
.news-sm {
flex: 1 1 0;
min-height: 0;
display: grid;
grid-template-columns: 38px 80px 1fr;
gap: 12px;
align-items: center;
padding: 0 14px;
border: 1px solid #2A2A33;
border-top: none;
background: var(--bg-card);
text-decoration: none;
color: var(--fg);
overflow: hidden;
transition: background .2s, border-color .2s;
}
.news-sm:first-child { border-top: 1px solid #2A2A33; }
.news-sm:hover { background: var(--bg-card-raised); border-color: rgba(255,45,45,.4); }
/* Date */
.news-sm .nd { text-align: center; padding-right: 8px; border-right: 1px solid rgba(255,255,255,.06); }
.news-sm .nd strong { font-family: var(--font-display,'Anton',sans-serif); font-size: 20px; line-height: 1; display: block; }
.news-sm .nd span { font-size: 9px; font-weight: 700; color: var(--fg-dim); line-height: 1.3; display: block; }
/* Thumbnail */
.news-sm .nt {
width: 80px;
height: 56px;
min-width: 80px;
display: block;
background-color: #111;
background-size: cover;
background-position: center;
overflow: hidden;
border-radius: 2px;
flex-shrink: 0;
}
.news-sm .nt img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Text */
.news-sm .nb { overflow: hidden; min-width: 0; }
.news-sm .nb small { display: none; }
.news-sm .nb h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; margin: 0 0 3px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-sm .nb p { font-size: 11px; color: var(--fg-muted); margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.news-sm .nb b { font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
/* Responsive */
@media(max-width:860px){
.news-layout { grid-template-columns: 1fr; }
.news-big-card::before { padding-top: 56%; }
.news-side-stack { height: auto; }
.news-sm { flex: none; min-height: 74px; padding: 10px 14px; border-top: 1px solid #2A2A33; border-radius: 4px; }
}
/* ═══════════════════════════════════════════════════════════
PERFIL DO ATLETA — /pages/perfil.php
═══════════════════════════════════════════════════════════ */
/* Cover photo */
.pf-cover {
height: clamp(160px, 28vw, 320px);
background: linear-gradient(135deg, #0a0a0b 0%, #1a1a20 100%);
background-size: cover;
background-position: center 30%;
position: relative;
overflow: hidden;
margin-top: 0;
}
.pf-cover-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(10,10,11,.85) 100%);
}
.pf-cover-num {
position: absolute; right: 5%; bottom: -10px;
font-family: var(--font-display,'Anton',sans-serif);
font-size: clamp(80px, 16vw, 220px);
font-style: italic;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.07);
line-height: 1; letter-spacing: -0.04em;
pointer-events: none; user-select: none;
}
/* Main wrapper */
.pf-wrap {
max-width: var(--wrap, 1440px);
margin: 0 auto;
padding: 0 5% 80px;
}
/* Header card with avatar + name */
.pf-header {
display: flex;
align-items: flex-end;
gap: 28px;
margin-top: -48px;
margin-bottom: 40px;
position: relative;
z-index: 2;
}
.pf-avatar-wrap { flex-shrink: 0; }
.pf-avatar {
width: 120px; height: 120px;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--accent);
box-shadow: 0 0 0 4px var(--bg-card);
display: block;
}
.pf-avatar-ph {
width: 120px; height: 120px;
border-radius: 50%;
background: var(--bg-card);
border: 3px solid var(--accent);
box-shadow: 0 0 0 4px var(--bg-card);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display,'Anton',sans-serif);
font-size: 36px; font-style: italic;
color: var(--accent);
}
.pf-header-info { padding-bottom: 8px; }
.pf-kicker {
font-size: 10px; font-weight: 900;
letter-spacing: .22em; text-transform: uppercase;
color: var(--accent); margin-bottom: 4px;
}
.pf-name {
font-family: var(--font-display,'Anton',sans-serif);
font-size: clamp(28px, 5vw, 52px);
font-style: italic; text-transform: uppercase;
letter-spacing: -0.02em; line-height: 1;
margin: 0 0 8px;
}
.pf-sub {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 13px; color: var(--fg-dim);
}
.pf-pos { color: var(--fg); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.pf-sep { color: var(--border); }
.pf-num { font-family: var(--font-display,'Anton',sans-serif); font-size: 18px; color: var(--accent); }
.pf-socials { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pf-social-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border: 1px solid var(--border);
font-size: 11px; font-weight: 700; letter-spacing: .1em;
text-decoration: none; color: var(--fg);
transition: border-color .2s, color .2s;
border-radius: var(--r-1, 2px);
}
.pf-social-btn:hover { border-color: rgba(255,45,45,.4); color: var(--accent); }
/* Info grid */
.pf-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 16px;
margin-bottom: 40px;
}
.pf-card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 22px 24px;
}
.pf-card-about { grid-column: 2; grid-row: 1 / span 2; }
.pf-card-title {
font-size: 10px; font-weight: 900;
letter-spacing: .22em; text-transform: uppercase;
color: var(--accent); margin-bottom: 16px;
padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.pf-fields { display: flex; flex-direction: column; gap: 10px; }
.pf-field { display: flex; flex-direction: column; gap: 2px; }
.pf-field-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.pf-field-val { font-size: 14px; font-weight: 700; color: var(--fg); }
.pf-about-text { font-size: 14px; line-height: 1.75; color: var(--fg-muted); margin: 0; }
/* Strengths */
.pf-strengths { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-strength-tag {
padding: 6px 14px;
border: 1px solid rgba(255,45,45,.3);
background: rgba(255,45,45,.06);
color: var(--accent);
font-size: 11px; font-weight: 900;
letter-spacing: .1em; text-transform: uppercase;
border-radius: var(--r-pill, 999px);
}
/* Section title */
.pf-section-title {
font-family: var(--font-head,'Archivo',sans-serif);
font-size: 11px; font-weight: 900;
letter-spacing: .22em; text-transform: uppercase;
color: var(--fg-dim); margin: 40px 0 16px;
display: flex; align-items: center; gap: 12px;
}
.pf-section-title::before {
content: ''; display: block;
width: 16px; height: 2px;
background: var(--accent); flex-shrink: 0;
}
.pf-ig-handle {
font-size: 11px; color: var(--accent);
text-decoration: none; margin-left: 8px;
}
/* Stats */
.pf-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px; margin-bottom: 0;
}
.pf-stat-card {
background: var(--bg-card); border: 1px solid var(--border);
padding: 20px 16px; text-align: center;
border-left: 3px solid var(--accent);
transition: transform .2s;
}
.pf-stat-card:hover { transform: translateY(-2px); }
.pf-stat-icon { font-size: 22px; margin-bottom: 8px; }
.pf-stat-num { font-family: var(--font-display,'Anton',sans-serif); font-size: 40px; line-height: 1; color: var(--fg); letter-spacing: -0.02em; }
.pf-stat-label { font-size: 9px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); margin-top: 6px; }
/* Timeline */
.pf-timeline {
display: flex; flex-direction: column;
gap: 0; border-left: 2px solid var(--border);
margin-left: 40px; padding-left: 32px;
}
.pf-tl-item {
display: grid; grid-template-columns: 48px 14px 1fr;
gap: 0 16px; align-items: start;
padding: 0 0 28px; position: relative;
margin-left: -57px;
}
.pf-tl-year {
font-family: var(--font-display,'Anton',sans-serif);
font-size: 14px; font-style: italic;
color: var(--accent); text-align: right;
padding-top: 2px;
}
.pf-tl-dot {
width: 14px; height: 14px; border-radius: 50%;
background: var(--accent); flex-shrink: 0;
margin-top: 3px;
box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px rgba(255,45,45,.2);
}
.pf-tl-body { padding-top: 0; }
.pf-tl-title { font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--fg); margin-bottom: 4px; }
.pf-tl-desc { font-size: 12px; color: var(--fg-dim); line-height: 1.55; }
/* Instagram grid */
.pf-ig-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 8px;
min-height: 80px;
}
.pf-ig-loading {
grid-column: 1/-1;
display: flex; align-items: center; gap: 12px;
color: var(--fg-dim); font-size: 13px; padding: 24px;
}
.pf-ig-spinner {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--border);
border-top-color: var(--accent);
animation: igspin .8s linear infinite;
}
@keyframes igspin { to { transform: rotate(360deg); } }
.pf-ig-item { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border); transition: transform .2s; }
.pf-ig-item:hover { transform: scale(1.03); border-color: rgba(255,45,45,.4); }
.pf-ig-thumb {
width: 100%; height: 100%;
background: var(--bg-card-raised);
background-size: cover; background-position: center;
position: relative;
}
.pf-ig-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,.5);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .2s;
}
.pf-ig-item:hover .pf-ig-overlay { opacity: 1; }
.pf-ig-likes { font-size: 13px; font-weight: 700; color: #fff; }
.pf-ig-direct {
grid-column: 1/-1;
display: flex; align-items: center; justify-content: center;
gap: 10px; padding: 32px;
border: 1px solid var(--border);
color: var(--fg-dim); text-decoration: none; font-size: 14px;
font-weight: 700; letter-spacing: .06em;
transition: border-color .2s, color .2s;
}
.pf-ig-direct:hover { border-color: rgba(255,45,45,.4); color: var(--accent); }
/* Responsive */
@media(max-width:860px){
.pf-grid { grid-template-columns: 1fr; }
.pf-card-about { grid-column: 1; grid-row: auto; }
.pf-header { flex-direction: column; align-items: flex-start; margin-top: -60px; gap: 16px; }
.pf-avatar, .pf-avatar-ph { width: 90px; height: 90px; }
.pf-timeline { margin-left: 24px; padding-left: 20px; }
.pf-tl-item { margin-left: -41px; grid-template-columns: 40px 12px 1fr; }
.pf-ig-grid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:600px){
.pf-wrap { padding: 0 16px 60px; }
.pf-cover { height: clamp(120px, 40vw, 200px); }
.pf-cover-num { font-size: clamp(60px, 28vw, 140px); }
.pf-stats-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-stat-num { font-size: 30px; }
.pf-ig-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}
/* ═══════════════════════════════════════════════════════════════
IG54 — Opção B: Laranja principal + Branco como segundo tom
Laranja = destaques, números, botões, tags ativas
Branco = bordas secundárias, textos de apoio, separadores
═══════════════════════════════════════════════════════════════ */
:root {
--accent: #FF6B00;
--accent-hover: #CC5500;
--accent-soft: rgba(255,107,0,.08);
--accent-mid: rgba(255,107,0,.2);
}
/* ═══════════════════════════════════════════════════════════════
IG-TERMS — Página de Termos de Uso
═══════════════════════════════════════════════════════════════ */
.ig-terms { max-width: 800px; margin: 0 auto; padding: 60px 24px 80px; }
.ig-terms__hero { text-align: center; margin-bottom: 52px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ig-terms__tag { font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #FF6B00; margin-bottom: 16px; }
.ig-terms__hero h1 { font-family: 'Anton', sans-serif; font-size: clamp(28px, 5vw, 48px); font-style: italic; text-transform: uppercase; color: #fff; line-height: 1.05; }
.ig-terms__hero h1 em { color: #FF6B00; font-style: inherit; }
.ig-terms__date { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 10px; }
.ig-terms__block { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ig-terms__block:last-child { border-bottom: none; margin-bottom: 0; }
.ig-terms__block h2 { font-family: 'Anton', sans-serif; font-size: 18px; font-style: italic; text-transform: uppercase; color: #fff; margin-bottom: 14px; padding-left: 14px; border-left: 3px solid #FF6B00; }
.ig-terms__block p { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.85; margin-bottom: 10px; }
.ig-terms__block p:last-child { margin-bottom: 0; }
.ig-terms__block strong { color: rgba(255,255,255,.8); font-weight: 700; }
.ig-terms__contact-box { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); padding: 20px 24px; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ig-terms__contact-box p { font-size: 12px; color: rgba(255,255,255,.4); margin: 0; }
.ig-terms__contact-btn { display: inline-block; padding: 9px 20px; background: #FF6B00; color: #fff; font-family: 'Anton', sans-serif; font-size: 11px; font-style: italic; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .2s; }
.ig-terms__contact-btn:hover { background: #CC5500; }
/* ═══════════════════════════════════════════════════════════════
IG-SUB — Captura de e-mail no rodapé (compacta)
═══════════════════════════════════════════════════════════════ */
.ig-sub { background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.04); padding: 32px 24px; }
.ig-sub__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.ig-sub__text { flex: 0 0 auto; }
.ig-sub__tag { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #FF6B00; margin-bottom: 4px; }
.ig-sub__title { font-family: 'Anton', sans-serif; font-size: clamp(16px, 2vw, 22px); font-style: italic; text-transform: uppercase; color: #fff; line-height: 1.1; white-space: nowrap; }
.ig-sub__title em { color: #FF6B00; font-style: inherit; }
.ig-sub__sub { display: none; }
.ig-sub__form { flex: 1; min-width: 280px; }
.ig-sub__fields { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ig-sub__input { flex: 1; min-width: 140px; padding: 10px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; font-size: 12px; font-family: inherit; outline: none; transition: border-color .2s; }
.ig-sub__input::placeholder { color: rgba(255,255,255,.25); }
.ig-sub__input:focus { border-color: rgba(255,107,0,.5); }
.ig-sub__btn { padding: 10px 22px; background: #FF6B00; border: none; color: #fff; font-family: 'Anton', sans-serif; font-size: 12px; font-style: italic; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .2s; flex-shrink: 0; }
.ig-sub__btn:hover { background: #CC5500; }
.ig-sub__btn:disabled { opacity: .6; cursor: not-allowed; }
.ig-sub__msg { font-size: 11px; margin-top: 7px; min-height: 16px; font-weight: 600; }
.ig-sub__msg.ok { color: #22c55e; }
.ig-sub__msg.err { color: #ef4444; }
.ig-sub__msg.info { color: #60a5fa; }
.ig-sub__legal { font-size: 10px; color: rgba(255,255,255,.2); margin-top: 6px; line-height: 1.6; }
.ig-sub__legal a { color: rgba(255,255,255,.35); text-decoration: underline; }
@media (max-width: 680px) {
.ig-sub__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
.ig-sub__title { white-space: normal; font-size: 18px; }
.ig-sub__fields { flex-direction: column; }
.ig-sub__btn { width: 100%; justify-content: center; }
}