/* ============================================================
JUST BALL / JB7 — justball.com.br
Direção: quadra à noite sob luz. O verde não é tinta, é luz.
Movimento: água. Entra rápido, assenta devagar. Nunca quica.
============================================================ */
/* ---- FONTES SERVIDAS PELO PROPRIO DOMINIO (V9, 05/09/2026) ----
Antes vinham do fonts.googleapis.com: dois preconnect, uma folha de
estilo bloqueante a mais e o texto so aparecia depois de resolver
outro dominio. Agora os woff2 (latin e latin-ext) moram em /fonts e o
navegador so baixa o peso que a pagina de fato desenha.
Regerar: outputs/audit-2026-09-05/fonts_selfhost.py ---- */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/barlow-condensed-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/barlow-condensed-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/barlow-condensed-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/barlow-condensed-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jetbrains-mono-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
/* ---- Cor. Preto do deck (#040404-#0c0c0c). Lima é LUZ, verde é atmosfera. ---- */
--ink: #050505;
--ink-2: #0b0b0b;
--ink-3: #121212;
--lime: #c5ff1a; /* acento. a luz. cards de Destaque + app */
--green: #03c73f; /* verde do deck. só glow e profundidade */
--mint: #83ffa9; /* acento secundário, dado de apoio */
--paper: #fafafa;
--mute: #8f8f8f;
--mute-2: #5e5e5e;
--line: rgba(255,255,255,.10);
--line-2: rgba(255,255,255,.06);
--lime-dim: rgba(197,255,26,.14);
/* ---- Tipografia. Display condensado (brand kit), corpo geométrico, mono pro número. ---- */
--disp: 'Barlow Condensed', 'Arial Narrow', sans-serif;
--body: 'Manrope', system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
/* ---- Forma ---- */
--r: 14px;
--rs: 8px;
--rp: 999px;
/* ---- Água: expo-out. Entra com força, assenta sem quicar. ---- */
--e: cubic-bezier(.22,1,.36,1);
--e-io:cubic-bezier(.65,0,.35,1);
--wrap: 1280px;
--pad: clamp(20px, 5vw, 64px);
}
/* ============================================================
RESET
============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
/* overflow-x:clip, nunca hidden: hidden transforma html/body em scroll
container e mata o position:sticky do hero. clip corta igual, sem isso. */
html{ overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
overflow-x:clip;
min-height:100vh;
display:flex; flex-direction:column;
background:var(--ink);
color:var(--paper);
font-family:var(--body);
font-weight:400;
line-height:1.72;
-webkit-font-smoothing:antialiased;
}
body > footer{ margin-top:auto }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
::selection{ background:var(--lime); color:#000 }
.skip{
position:absolute; left:-9999px; top:0; z-index:999;
background:var(--lime); color:#000; padding:14px 22px;
font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.1em;
}
.skip:focus{ left:12px; top:12px }
:focus-visible{ outline:2px solid var(--lime); outline-offset:3px; border-radius:2px }
/* ============================================================
ATMOSFERA — a quadra à noite
grid de alambrado em perspectiva + bloom de canto (padrão do deck)
============================================================ */
.court{
position:fixed; inset:0; z-index:0; pointer-events:none;
overflow:hidden;
}
/* malha de quadra, deformada em perspectiva, sangrando de borda a borda */
.court::before{
content:''; position:absolute; left:-25%; right:-25%; top:-10%; bottom:-30%;
background-image:
repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 62px),
repeating-linear-gradient(to bottom, var(--line-2) 0 1px, transparent 1px 62px);
transform:perspective(620px) rotateX(58deg) scale(1.7);
transform-origin:50% 100%;
mask-image:linear-gradient(to bottom, transparent, #000 42%, #000 78%, transparent);
opacity:.75;
}
/* bloom verde de canto. o deck faz isso em toda página. */
.court::after{
content:''; position:absolute; inset:0;
/* o bloom verde do canto superior direito saiu: no topo o fundo e preto.
Sobra so o lima muito fraco no rodape, que sustenta a atmosfera. */
background:
radial-gradient(70vw 55vh at 104% 10%, rgba(255,255,255,.022), transparent 60%),
radial-gradient(58vw 48vh at -6% 96%, rgba(197,255,26,.06), transparent 60%);
}
/* grão de filme */
.grain{
position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer{ position:relative; z-index:2 }
/* ============================================================
TIPOGRAFIA
============================================================ */
h1,h2,h3,h4{
font-family:var(--disp); font-weight:800;
line-height:1.02; letter-spacing:-.015em;
text-transform:uppercase;
}
/* V7: a chamada do hero cresceu um pouco (card do Jordan, 04/09). */
h1{ font-size:clamp(3.4rem, 9vw, 8rem); font-weight:900; letter-spacing:-.028em }
h2{ font-size:clamp(2.3rem, 5.4vw, 4.4rem) }
h3{ font-size:clamp(1.4rem, 2.4vw, 2rem) }
p{ font-size:clamp(1rem, 1.14vw, 1.09rem); color:#d2d2d2 }
strong{ color:var(--paper); font-weight:700 }
.kicker{
font-family:var(--disp); font-weight:700; text-transform:uppercase;
font-size:clamp(.76rem,1.05vw,.86rem); letter-spacing:.3em;
color:var(--lime); display:flex; align-items:center; gap:12px;
}
.kicker::before{ content:''; width:34px; height:1px; background:var(--lime); flex:none }
.kicker--mute{ color:var(--mute) }
.kicker--mute::before{ background:var(--mute-2) }
.lead{ font-size:clamp(1.06rem,1.5vw,1.24rem); color:#c8c8c8; line-height:1.68 }
.num{ font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums }
.hl{ color:var(--lime) }
/* ============================================================
LAYOUT
============================================================ */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }
section{ padding-block:clamp(76px, 9.5vw, 138px) }
/* Card 3: todo cabecalho de secao passa a ser centralizado, no desktop e
no mobile. As duas excecoes de layout em duas colunas (Metodo e Destaque)
seguem alinhadas a esquerda pelo proprio bloco. */
.sec-head{ max-width:760px; margin:0 auto clamp(40px,5vw,66px); text-align:center }
.sec-head .kicker{ justify-content:center }
.sec-head .lead{ margin-inline:auto }
.sec-head h2{ margin:18px 0 20px }
/* ============================================================
MARCAS DO PEDRO CLARK — máscaras, não imagens
O kit é branco puro sobre alpha. Vira máscara e recebe luz por dentro.
============================================================ */
.mark{
display:block;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
background:var(--paper);
}
.mark--lime{ background:var(--lime) }
/* luz líquida correndo por dentro do traço de giz. isto é o "move like water". */
.mark--flow{
background:linear-gradient(100deg, var(--green) 0%, var(--lime) 28%, var(--mint) 46%, var(--lime) 64%, var(--green) 100%);
background-size:280% 100%;
animation:flow 7s linear infinite;
}
@keyframes flow{ to{ background-position:280% 0 } }
/* bola: o Pedro já desenhou as setas de giro dentro dela. só girar. */
.ball-spin{ animation:spin 9s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
/* ============================================================
BARRA DE PROGRESSO — ARROW_04 (135x448, 1:3.3). É água correndo.
============================================================ */
.prog{
position:fixed; right:clamp(10px,1.7vw,22px); top:50%; translate:0 -50%;
width:26px; height:min(300px,38vh); z-index:40; pointer-events:none;
-webkit-mask:url('../images/marks/arrow_04.webp') no-repeat center/contain;
mask:url('../images/marks/arrow_04.webp') no-repeat center/contain;
background:rgba(255,255,255,.15);
}
.prog__fill{
position:absolute; inset:auto 0 0 0; height:0%;
background:linear-gradient(to top, var(--green), var(--lime));
transition:height .16s linear;
}
@media(max-width:1080px){ .prog{ display:none } }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; inset:0 0 auto; z-index:50;
transition:background .4s var(--e), backdrop-filter .4s var(--e), border-color .4s var(--e);
border-bottom:1px solid transparent;
}
.nav.is-stuck{
background:rgba(5,5,5,.82); backdrop-filter:blur(16px) saturate(1.3);
border-bottom-color:var(--line);
}
.nav__in{
max-width:var(--wrap); margin-inline:auto; padding:16px var(--pad);
display:flex; align-items:center; gap:clamp(16px,3vw,40px);
}
.nav__logo{ flex:none; display:block }
/* A marca é o maior elemento da barra. Ela sustenta o menu, não o contrário. */
.nav__logo img{ height:clamp(38px,3.6vw,50px); width:auto; transition:height .4s var(--e) }
.nav.is-stuck .nav__logo img{ height:clamp(32px,2.9vw,40px) }
.nav__links{ display:flex; gap:clamp(14px,2vw,30px); margin-left:auto }
.nav__links a{
font-family:var(--disp); font-weight:700; text-transform:uppercase;
font-size:.94rem; letter-spacing:.11em; color:#c4c4c4;
padding:6px 0; position:relative; transition:color .25s var(--e);
}
.nav__links a::after{
content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0;
background:var(--lime); transition:width .3s var(--e);
}
.nav__links a:hover{ color:var(--paper) }
.nav__links a:hover::after{ width:100% }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--disp); font-weight:800; text-transform:uppercase;
letter-spacing:.11em; font-size:1rem;
padding:13px 26px; border-radius:var(--rp);
min-height:44px; white-space:nowrap;
transition:transform .3s var(--e), box-shadow .3s var(--e), background .3s var(--e), color .3s var(--e);
}
.btn--lime{
background:var(--lime); color:#050505;
box-shadow:0 0 0 rgba(197,255,26,0);
}
.btn--lime:hover{ transform:translateY(-2px); box-shadow:0 10px 40px rgba(197,255,26,.34) }
.btn--ghost{ border:1px solid var(--line); color:var(--paper) }
.btn--ghost:hover{ border-color:var(--lime); color:var(--lime); transform:translateY(-2px) }
.btn__ar{ transition:transform .3s var(--e) }
.btn:hover .btn__ar{ transform:translateX(4px) }
.nav .btn{ flex:none; padding:11px 20px; font-size:.9rem }
.burger{ display:none; flex:none; width:44px; height:44px; margin-left:auto; position:relative }
.burger span{
position:absolute; left:11px; width:22px; height:2px; background:var(--paper);
transition:transform .34s var(--e), opacity .2s var(--e);
}
.burger span:nth-child(1){ top:15px } .burger span:nth-child(2){ top:21px } .burger span:nth-child(3){ top:27px }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger.is-open span:nth-child(2){ opacity:0 }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }
.mmenu{
position:fixed; inset:0; z-index:45; background:rgba(5,5,5,.97); backdrop-filter:blur(20px);
display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--pad);
opacity:0; visibility:hidden; transition:opacity .38s var(--e), visibility .38s;
}
.mmenu.is-open{ opacity:1; visibility:visible }
.mmenu a{
font-family:var(--disp); font-weight:800; text-transform:uppercase;
font-size:clamp(2rem,9vw,3rem); letter-spacing:-.01em; line-height:1.3;
border-bottom:1px solid var(--line-2); padding:12px 0;
}
.mmenu a:active{ color:var(--lime) }
@media(max-width:940px){
.nav__links{ display:none }
/* Esconde o CTA da nav no mobile porque o burger assume. Mas NÃO pode pegar
o "Voltar ao site" do app: ele é o único caminho de volta lá, e o app não
tem burger. Sem esta exceção o Joel abre o app no celular e fica sem saída. */
.nav .btn:not(.app-back){ display:none }
.burger{ display:block }
}
/* ============================================================
HERO V3 - a arte inteira no palco, carimbos como camadas
A imagem (1800x750) entra INTEIRA, na largura total: as bandas
pretas de cima e de baixo somem no fundo preto. Cada X e cada
flecha e um elemento proprio, posicionado em % da arte (medido
por diff de pixel contra a arte original) e andando numa
velocidade diferente de parallax. O hero e pinado (sticky):
o conteudo seguinte (.rise) desliza por cima, estilo ancora.
============================================================ */
.hero{
position:sticky; top:0; z-index:1;
height:100svh; min-height:600px;
display:flex; align-items:center;
overflow:hidden;
padding-top:clamp(84px,9vw,120px);
}
.hero__stage{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none }
/* A arte nova nao tem mais os tracos verdes das laterais, entao o fundo do
hero e preto puro. O que sobra e um respiro escuro, sem tinta verde. */
.hero__glow{
position:absolute; right:-10%; top:-22%; width:70%; height:96%;
background:radial-gradient(46% 50% at 60% 50%, rgba(255,255,255,.035), transparent 68%);
}
.hero__beam{
position:absolute; right:6%; top:-46%; width:30%; height:200%;
/* propriedade `rotate`, nao `transform`: o parallax escreve transform e
apagaria a inclinacao se ela morasse la. */
rotate:15deg;
background:linear-gradient(92deg,
transparent 0%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.08) 50%,
rgba(255,255,255,.04) 60%, transparent 100%);
filter:blur(58px); opacity:.4;
}
/* A ARTE. Largura total, centrada na vertical, proporcao travada.
Sem object-fit: a imagem nunca e cortada, entao os carimbos em %
caem SEMPRE no lugar exato da arte. */
.hero__art{
position:absolute; left:0; top:50%; translate:0 -50%;
width:100%; aspect-ratio:1800/750;
will-change:transform;
}
.hero__art > picture img{
width:100%; height:100%; display:block;
filter:contrast(1.04);
-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* Carimbos X / flecha do kit, cada um com seu data-px */
.st{
position:absolute; display:block; height:auto;
will-change:transform;
filter:drop-shadow(0 0 10px rgba(3,199,63,.4));
opacity:0; animation:stampin 1.1s var(--e) forwards;
}
@keyframes stampin{ to{ opacity:1 } }
/* Tamanhos e posicoes MEDIDOS na arte original por deteccao de pixel
(mascara HSV do verde, erosao pra matar os riscos finos), ja compensando
o padding transparente de cada PNG: o X ocupa 93.2% do arquivo, a flecha 89.5%.
Sao exatamente 2 X (um a esquerda, um no alto a direita) e 2 flechas
(uma abaixo a esquerda do atleta, outra no ombro dele). */
.sx1{ left:85.73%; top:5.82%; width:4.44%; animation-delay:.55s }
.sx2{ left:46.56%; top:28.57%; width:3.02%; animation-delay:.80s }
/* D1b: as flechas ganharam ~13%. Os movimentos ficaram, so o tamanho subiu. */
.sa2{ left:70.12%; top:62.92%; width:1.31%; animation-delay:1.05s }
.sa3{ left:81.43%; top:37.30%; width:1.15%; animation-delay:1.30s }
/* O veu: legibilidade do texto sobre a metade esquerda da arte. */
.hero__veil{
position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(97deg,
rgba(5,5,5,.88) 0%, rgba(5,5,5,.72) 26%, rgba(5,5,5,.38) 42%,
rgba(5,5,5,.08) 56%, rgba(5,5,5,0) 68%);
}
.hero__in{ position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); will-change:opacity }
.hero__c{ max-width:840px }
/* a headline nunca quebra em 3 linhas: cada linha e um span que nao quebra.
No mobile o clamp cuida do tamanho, entao a trava fica so no desktop. */
@media(min-width:901px){ .hero h1 .l > span{ white-space:nowrap } }
.hero h1{ margin:0 0 26px }
.hero h1 .l{ display:block; overflow:hidden }
/* Entrada do hero em CSS puro, NUNCA em rAF: rAF nao dispara em aba de fundo
e o headline ficaria clipado pra sempre. Animation roda sozinha. */
.hero h1 .l > span{ display:block; animation:rise 1.05s var(--e) both }
.hero h1 .l:nth-child(1) > span{ animation-delay:.12s }
.hero h1 .l:nth-child(2) > span{ animation-delay:.23s }
@keyframes rise{ from{ transform:translateY(102%) } to{ transform:none } }
.hero .rv{ animation:fadein .9s var(--e) both }
.hero__sub{ animation-delay:.46s }
.hero__cta{ animation-delay:.58s }
@keyframes fadein{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
.hero__sub{ max-width:520px; margin-bottom:34px }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px }
.hero__scroll{
position:absolute; left:var(--pad); bottom:26px; z-index:3;
display:flex; align-items:center; gap:12px;
font-family:var(--disp); font-weight:700; text-transform:uppercase;
font-size:.76rem; letter-spacing:.26em; color:var(--mute-2);
}
.hero__scroll i{ display:block; width:1px; height:36px; background:linear-gradient(to bottom,var(--lime),transparent); animation:drip 2.6s var(--e-io) infinite }
@keyframes drip{ 0%{ transform:scaleY(0); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:top } 56%{ transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }
@media(max-width:640px){ .hero__scroll{ display:none } }
/* ============================================================
O MOMENTO-ASSINATURA — a barra 60/40
============================================================ */
.split{ position:relative; overflow:hidden }
/* 60 e 40 gigantes atrás do conteúdo, cortados pela borda. Fundo, não enfeite:
o número é o argumento da marca, então ele é a arquitetura da seção. */
.split__ghost{
position:absolute; inset:0; z-index:0; pointer-events:none;
display:flex; align-items:center; justify-content:space-between;
font-family:var(--disp); font-weight:900; line-height:.78;
font-size:clamp(11rem,30vw,26rem); letter-spacing:-.05em;
color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.055);
will-change:transform;
}
.split__ghost span:first-child{ margin-left:-.14em }
.split__ghost span:last-child{ margin-right:-.14em; -webkit-text-stroke-color:rgba(197,255,26,.07) }
.split > .wrap{ position:relative; z-index:1 }
.split__head{ max-width:900px; margin-bottom:clamp(44px,5vw,64px) }
.split__head .a{ color:var(--mute-2) }
.split__head .b{ color:var(--paper) }
.scale{ position:relative }
.scale__bar{
display:flex; height:clamp(78px,9vw,104px); border-radius:var(--rs); overflow:hidden;
border:1px solid var(--line); background:var(--ink-2);
}
.scale__seg{
position:relative; display:flex; align-items:center; justify-content:center;
width:0; overflow:hidden;
transition:width 1.5s var(--e);
}
.is-vs .scale__seg--core{ width:60% }
.is-vs .scale__seg--fund{ width:40% }
.scale__seg--core{
/* verde vivo: a mesma luz liquida do logo Justball (mark--flow),
correndo do verde JB7 pro fosforescente */
background:linear-gradient(105deg, var(--green) 0%, var(--lime) 30%, var(--mint) 50%, var(--lime) 70%, var(--green) 100%);
background-size:280% 100%;
animation:flow 7s linear infinite;
color:#050505;
}
.scale__seg--fund{ background:var(--ink-3); color:var(--mute) }
.scale__seg--fund::before{
content:''; position:absolute; inset:0;
background:repeating-linear-gradient(115deg, transparent 0 9px, rgba(255,255,255,.045) 9px 10px);
}
.scale__t{
position:relative; z-index:2; text-align:center; padding:0 10px;
font-family:var(--disp); font-weight:800; text-transform:uppercase;
letter-spacing:.1em; white-space:nowrap;
font-size:clamp(.66rem,1.05vw,.84rem);
}
.scale__t b{ display:block; font-family:var(--mono); font-size:clamp(1.5rem,3.4vw,2.5rem); letter-spacing:-.03em; line-height:1.1 }
.scale__legend{ display:grid; grid-template-columns:60fr 40fr; gap:clamp(14px,2vw,26px); margin-top:22px }
.scale__col h4{ font-size:1.02rem; letter-spacing:.06em; margin-bottom:12px }
.scale__col--core h4{ color:var(--lime) }
.scale__col--fund h4{ color:var(--mute) }
.scale__col ul{ list-style:none; display:flex; flex-wrap:wrap; gap:7px }
.scale__col li{
font-family:var(--mono); font-size:.74rem; font-weight:500;
padding:5px 11px; border-radius:var(--rp); border:1px solid var(--line);
color:#b6b6b6; white-space:nowrap;
}
.scale__col--core li{ border-color:var(--lime-dim); color:var(--lime); background:rgba(197,255,26,.05) }
.scale__note{ margin-top:30px; max-width:640px; color:var(--mute) }
@media(max-width:700px){
.scale__legend{ grid-template-columns:1fr; gap:22px }
.scale__t b{ font-size:1.5rem }
}
/* ============================================================
OS 7 INDICADORES
============================================================ */
.ind{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px }
.card{
position:relative; overflow:hidden;
background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
padding:clamp(20px,2.4vw,28px);
transition:transform .42s var(--e), border-color .42s var(--e), background .42s var(--e);
}
.card:hover{ transform:translateY(-4px); border-color:rgba(197,255,26,.30); background:var(--ink-3) }
/* vidro inset, sem relevo pra fora */
.card::before{
content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.card--core{ border-color:rgba(197,255,26,.18) }
.card--core::after{
content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
background:linear-gradient(to bottom, var(--lime), transparent);
}
.ind__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px }
.ind__n{ font-family:var(--mono); font-size:.7rem; color:var(--mute-2) }
.ind h3{ font-size:1.42rem; margin-bottom:9px }
.card--core h3{ color:var(--lime) }
.ind p{ font-size:.93rem; color:#a8a8a8; line-height:1.62 }
.ind__w{
font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
color:var(--mute-2); text-transform:uppercase;
}
/* ============================================================
BLOCO DO APP
============================================================ */
.app-cta{ position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--ink-2) }
.app-cta__grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:0 }
.app-cta__c{ padding:clamp(28px,4vw,58px) }
.app-cta__c h2{ margin:14px 0 18px }
.app-cta__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px }
.app-cta__peek{
display:inline-block; margin-top:18px;
font-family:var(--mono); font-size:.74rem; color:var(--mute-2);
border-bottom:1px solid var(--line); padding-bottom:3px;
transition:color .25s var(--e), border-color .25s var(--e);
}
.app-cta__peek:hover{ color:var(--lime); border-color:var(--lime) }
/* selo de obra: a barra corre pra sempre porque a obra ainda não acabou */
.build{
display:inline-flex; align-items:center; gap:9px; margin-top:16px;
font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
color:var(--mint); text-transform:uppercase;
border:1px solid rgba(131,255,169,.26); border-radius:var(--rp); padding:5px 13px 5px 9px;
}
.build i{ position:relative; width:34px; height:3px; border-radius:99px; background:rgba(131,255,169,.2); overflow:hidden; flex:none }
.build i::after{
content:''; position:absolute; inset:0 auto 0 0; width:45%; border-radius:99px;
background:var(--mint); animation:crawl 1.9s var(--e-io) infinite;
}
@keyframes crawl{ 0%{ left:-45% } 100%{ left:100% } }
.app-cta__v{ position:relative; align-self:stretch; min-height:470px; padding-top:48px; background:var(--ink); overflow:hidden; display:flex; align-items:flex-end; justify-content:center }
.app-cta__v::after{ content:''; position:absolute; inset:0; background:radial-gradient(58% 56% at 62% 34%, rgba(3,199,63,.20), transparent 72%) }
/* CELULAR DE VERDADE, em pé. É assim que a mãe vai abrir. */
.dev{ position:relative; z-index:2; width:min(78%,286px); margin-bottom:-2px }
.dev__body{
position:relative; border-radius:34px 34px 0 0;
border:1px solid rgba(255,255,255,.16); border-bottom:none;
background:linear-gradient(180deg,#141414,#0a0a0a);
padding:9px 9px 0; box-shadow:0 -26px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.09);
}
.dev__notch{ position:absolute; left:50%; translate:-50% 0; top:15px; width:74px; height:19px; border-radius:99px; background:#000; z-index:3 }
.dev__scr{ border-radius:27px 27px 0 0; background:var(--ink-2); padding:12px 14px 0; overflow:hidden; min-height:398px }
/* fica ACIMA do aparelho. Embaixo ele cobria a barra de abas da tela. */
.dev__tag{
position:absolute; left:50%; translate:-50% 0; top:-32px; z-index:4;
font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--mute-2); background:rgba(5,5,5,.82); border:1px solid var(--line);
border-radius:var(--rp); padding:4px 11px; backdrop-filter:blur(8px); white-space:nowrap;
}
.scr__bar{ display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:.56rem; color:var(--mute-2); padding:2px 4px 12px }
.scr__ic{ display:flex; gap:3px }
.scr__ic i{ width:3px; height:7px; border-radius:1px; background:var(--mute-2); display:block }
.scr__ic i:nth-child(2){ height:9px } .scr__ic i:nth-child(3){ height:11px }
.scr__hd{ display:flex; align-items:center; gap:9px; padding-bottom:16px; border-bottom:1px solid var(--line-2) }
.scr__av{
width:30px; height:30px; border-radius:50%; flex:none;
display:grid; place-items:center; background:linear-gradient(150deg,var(--green),var(--lime));
color:#050505; font-family:var(--disp); font-weight:800; font-size:.9rem;
}
.scr__who{ display:flex; flex-direction:column; line-height:1.25; font-family:var(--mono); font-size:.56rem; color:var(--mute-2) }
.scr__who b{ font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.86rem; color:var(--paper) }
.scr__score{ padding:18px 0 16px; text-align:center }
.scr__lab{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:.58rem; letter-spacing:.2em; color:var(--mute-2) }
.scr__n{ font-family:var(--mono); font-weight:700; font-size:3.1rem; color:var(--lime); line-height:1.06; letter-spacing:-.04em }
.scr__delta{ font-family:var(--mono); font-size:.62rem; color:var(--mint) }
.scr__bars{ display:flex; flex-direction:column; gap:9px; padding-bottom:16px }
.ph__b{ display:grid; grid-template-columns:60px 1fr; align-items:center; gap:8px }
.ph__b span{ font-family:var(--mono); font-size:.58rem; color:var(--mute) }
.ph__t{ height:5px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden }
.ph__f{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--lime)); transition:width 1.3s var(--e) }
.scr__tabs{ display:flex; gap:4px; border-top:1px solid var(--line-2); padding:11px 0 14px }
.scr__tabs span{ flex:1; text-align:center; font-family:var(--mono); font-size:.54rem; color:var(--mute-2); padding:5px 0; border-radius:var(--rs) }
.scr__tabs .is-on{ color:#050505; background:var(--lime) }
@media(max-width:900px){
.app-cta__grid{ grid-template-columns:1fr }
.app-cta__v{ min-height:400px; order:-1; padding-top:34px }
}
/* ============================================================
TREINOS
============================================================ */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(276px,1fr)); gap:16px }
.plan{ display:flex; flex-direction:column; overflow:hidden }
.plan__img{ position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--rs); background:var(--ink); margin-bottom:20px }
.plan__img img{ width:100%; height:100%; object-fit:contain; transition:transform .7s var(--e) }
.plan:hover .plan__img img{ transform:scale(1.05) }
.plan__img::after{ content:''; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 100%, rgba(3,199,63,.14), transparent 70%) }
.plan h3{ margin-bottom:8px }
.plan__tag{ font-family:var(--mono); font-size:.66rem; color:var(--lime); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; display:block }
.plan p{ font-size:.93rem; color:#a8a8a8; margin-bottom:16px }
.plan ul{ list-style:none; margin-top:auto; display:flex; flex-direction:column; gap:7px }
.plan li{ display:flex; gap:9px; align-items:flex-start; font-size:.86rem; color:#9c9c9c; line-height:1.5 }
.plan li i{ flex:none; width:13px; height:13px; margin-top:5px; background:var(--lime);
-webkit-mask:url('../images/marks/plus.webp') no-repeat center/contain;
mask:url('../images/marks/plus.webp') no-repeat center/contain; }
/* ============================================================
HORÁRIOS + VALORES
============================================================ */
.sched{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(16px,2.4vw,28px); align-items:start }
@media(max-width:900px){ .sched{ grid-template-columns:1fr } }
.days{ display:flex; flex-direction:column; gap:2px }
.day{ display:grid; grid-template-columns:104px 1fr; gap:14px; padding:15px 0; border-top:1px solid var(--line-2) }
.day:first-child{ border-top:none }
.day__n{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.02rem; letter-spacing:.1em; color:var(--paper); padding-top:2px }
.day__s{ display:flex; flex-direction:column; gap:8px }
.slot{ display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px }
.slot__h{ font-family:var(--mono); font-weight:700; font-size:.9rem; color:var(--lime); flex:none }
.slot__l{ font-size:.83rem; color:var(--mute) }
.slot--game .slot__h{ color:var(--mint) }
/* faixa de chamada do personal na manha de Barreiros */
.pers{
display:grid; grid-template-columns:auto 1fr auto; align-items:center;
gap:8px 20px; padding:16px 20px; margin-bottom:clamp(34px,4vw,52px);
background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
text-decoration:none; transition:border-color .25s ease, background .25s ease;
}
.pers:hover{ border-color:rgba(197,255,26,.34) }
.pers__h{
font-family:var(--mono); font-weight:700; font-size:.94rem; color:var(--lime);
white-space:nowrap; font-variant-numeric:tabular-nums;
}
.pers__t{ font-size:.86rem; color:#9c9c9c; line-height:1.55 }
.pers__t b{ color:var(--paper); font-weight:600 }
.pers__go{ font-size:.78rem; color:var(--lime); white-space:nowrap }
@media(max-width:720px){
.pers{ grid-template-columns:1fr; gap:8px }
.pers__go{ margin-top:2px }
}
@media(max-width:560px){ .day{ grid-template-columns:1fr; gap:8px } }
.price{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.6vw,30px); position:relative; overflow:hidden }
.price::before{ content:''; position:absolute; inset:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.055); border-radius:var(--r); pointer-events:none }
.price h3{ margin-bottom:6px }
.price__sub{ font-size:.8rem; color:var(--mute-2); margin-bottom:22px }
.price__l{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:13px 0; border-top:1px solid var(--line-2) }
.price__l:first-of-type{ border-top:none }
.price__k{ font-size:.9rem; color:#c4c4c4; line-height:1.35 }
.price__k small{ display:block; font-size:.7rem; color:var(--mute-2) }
.price__v{ font-family:var(--mono); font-weight:700; font-size:1.16rem; color:var(--lime); white-space:nowrap; flex:none }
.price__v small{ font-family:var(--body); font-size:.66rem; color:var(--mute-2); font-weight:400 }
.price .btn{ width:100%; margin-top:22px }
.price__where{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2); font-size:.78rem; color:var(--mute-2); line-height:1.6 }
.price__where b{ color:var(--mute); display:block; margin-bottom:3px; font-weight:600 }
.price__where a{ display:inline-block; margin-top:6px; color:var(--lime); border-bottom:1px solid transparent; transition:border-color .25s var(--e) }
.price__where a:hover{ border-bottom-color:var(--lime) }
/* ============================================================
ONDE TREINAMOS — os dois ginásios, cada um linkado no perfil real
============================================================ */
.gyms{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,20px) }
@media(max-width:820px){ .gyms{ grid-template-columns:1fr } }
.gym{
display:flex; gap:clamp(14px,1.8vw,20px); align-items:flex-start;
padding:clamp(20px,2.4vw,28px);
border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2);
position:relative; overflow:hidden;
transition:border-color .4s var(--e), transform .4s var(--e), background .4s var(--e);
}
.gym::before{ content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.055) }
.gym:hover{ border-color:rgba(197,255,26,.32); transform:translateY(-3px); background:var(--ink-3) }
.gym__pin{
flex:none; width:42px; height:42px; border-radius:50%;
display:grid; place-items:center; background:rgba(197,255,26,.09); border:1px solid var(--lime-dim);
}
.gym__pin svg{ width:21px; height:21px; fill:none; stroke:var(--lime); stroke-width:1.6; stroke-linejoin:round }
.gym__b{ flex:1; min-width:0 }
.gym__city{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2) }
.gym h3{ margin:4px 0 8px }
.gym__ad{ font-size:.85rem; color:#a8a8a8; line-height:1.55; margin-bottom:16px }
.gym__h{ list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:18px }
.gym__h li{ display:flex; gap:12px; align-items:baseline; border-top:1px solid var(--line-2); padding-top:6px }
.gym__h li:first-child{ border-top:none; padding-top:0 }
.gym__h b{ font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:var(--mute); width:34px; flex:none }
.gym__h span{ font-family:var(--mono); font-size:.78rem; color:var(--lime) }
.gym__go{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.72rem; color:var(--mute-2); transition:color .3s var(--e) }
.gym:hover .gym__go{ color:var(--lime) }
@media(max-width:420px){
.gym{ flex-direction:column; gap:14px }
.gym__h span{ font-size:.72rem }
}
/* ============================================================
EXPERIENCE — o produto que sai do bairro
============================================================ */
.xp{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid rgba(197,255,26,.20) }
.xp__bg{ position:absolute; inset:0; z-index:0 }
.xp__bg img{ width:100%; height:100%; object-fit:cover; object-position:center }
.xp__bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(95deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.82) 44%, rgba(5,5,5,.34) 100%) }
.xp__in{ position:relative; z-index:2; padding:clamp(30px,5vw,72px); max-width:660px }
.xp h2{ margin:16px 0 18px }
.xp__list{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:26px 0 30px }
.xp__list li{ display:flex; gap:13px; align-items:flex-start }
.xp__list b{ display:block; font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:1.05rem; margin-bottom:2px }
.xp__list p{ font-size:.9rem; color:#a8a8a8 }
.xp__list i{ flex:none; width:15px; height:15px; margin-top:5px; background:var(--lime);
-webkit-mask:url('../images/marks/arrow_01.webp') no-repeat center/contain;
mask:url('../images/marks/arrow_01.webp') no-repeat center/contain; }
.xp__where{ display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.72rem; color:var(--mint); border:1px solid rgba(131,255,169,.25); padding:6px 13px; border-radius:var(--rp); margin-bottom:8px }
/* ============================================================
EQUIPE
============================================================ */
.team{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px }
/* D10: o frame e igual pros tres, mas cada PNG mantem a propria altura
dentro dele (a hierarquia que o Jordan desenhou). Como sao arquivos sem
fundo, no hover a figura cresce e passa da linha da moldura. */
.mem__img{
position:relative; aspect-ratio:1/1; border-radius:var(--r);
overflow:visible; margin-bottom:18px;
}
.mem__img::before{
content:''; position:absolute; inset:0; border-radius:var(--r); z-index:0;
background:linear-gradient(160deg,var(--ink-3),var(--ink));
border:1px solid var(--line);
}
/* a figura sai do fluxo e se ancora na base do frame. A altura de cada uma
e a hierarquia que o Jordan desenhou: Joel e Diego passam da moldura,
o retrato do Jordan fica contido. */
.mem__img img{
position:absolute; left:50%; bottom:0; translate:-50% 0; z-index:2;
width:auto; max-width:none; height:112%;
filter:drop-shadow(0 16px 24px rgba(0,0,0,.6));
transition:transform .7s var(--e), filter .7s var(--e);
transform-origin:bottom center;
}
/* V7: zoom pela metade (era 1.13), mais suave */
.mem:hover .mem__img img{ transform:scale(1.065); filter:drop-shadow(0 22px 30px rgba(0,0,0,.68)) }
.mem--diego .mem__img img{ height:106% }
.mem--jordan .mem__img img{ height:92% }
.mem__img::after{ content:''; position:absolute; inset:0; background:radial-gradient(64% 64% at 50% 108%, rgba(3,199,63,.2), transparent 70%) }
.mem h3{ font-size:1.3rem }
.mem__role{ font-family:var(--mono); font-size:.68rem; color:var(--lime); text-transform:uppercase; letter-spacing:.1em; margin:5px 0 11px; display:block }
.mem p{ font-size:.88rem; color:#a0a0a0 }
.mem__ig{ display:inline-flex; align-items:center; gap:7px; margin-top:13px; font-family:var(--mono); font-size:.72rem; color:var(--mute); transition:color .25s var(--e) }
.mem__ig:hover{ color:var(--lime) }
/* ============================================================
PROVA — quem saiu daqui
============================================================ */
/* Dois trilhos em sentidos opostos. O de cima é quem se formou aqui, o de baixo
é quem passou pelo Lab. Separado porque as duas coisas não são a mesma coisa. */
.rails__lab{
font-family:var(--disp); font-weight:700; text-transform:uppercase;
font-size:clamp(.78rem,1.05vw,.88rem); letter-spacing:.3em; color:var(--mute-2);
display:flex; align-items:center; gap:12px; margin:clamp(30px,3.4vw,44px) 0 clamp(16px,1.8vw,22px);
}
.rails__lab::before{ content:''; width:34px; height:1px; background:var(--mute-2); flex:none }
/* o rotulo agora vive sobre a foto: sobe o contraste pra continuar legivel */
.rails__band .rails__lab{ color:#d0d0d0; text-shadow:0 1px 12px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.8) }
.rails__band .rails__lab::before{ background:rgba(255,255,255,.55) }
.rail{
display:flex; overflow:hidden; padding:4px 0;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rail__t{ display:flex; gap:12px; padding-right:12px; flex:none; animation:march 46s linear infinite }
.rail--back .rail__t{ animation-direction:reverse; animation-duration:38s }
.rail:hover .rail__t{ animation-play-state:paused }
.ath{
display:flex; align-items:center; gap:14px; flex:none;
width:290px; padding:14px 18px 14px 14px;
border:1px solid var(--line); border-radius:var(--rp); background:var(--ink-2);
transition:border-color .35s var(--e), background .35s var(--e);
}
a.ath:hover{ border-color:rgba(197,255,26,.34); background:var(--ink-3) }
.ath__ph{
flex:none; width:54px; height:54px; border-radius:50%; overflow:hidden;
display:grid; place-items:center;
background:linear-gradient(150deg, var(--ink-3), #1e1e1e);
border:1px solid var(--line);
font-family:var(--disp); font-weight:800; font-size:1.06rem; letter-spacing:.04em; color:var(--mute-2);
}
.ath__ph::after{ content:attr(data-i) }
.ath__ph img{ width:100%; height:100%; object-fit:cover }
/* quando a foto real entrar, a inicial de preset sai sozinha */
.ath__ph:has(img)::after{ content:none }
.ath--pro .ath__ph{ border-color:var(--lime-dim); color:var(--lime); background:linear-gradient(150deg, rgba(197,255,26,.07), var(--ink-3)) }
.ath__b{ display:flex; flex-direction:column; min-width:0; line-height:1.35 }
.ath__b b{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.04rem; letter-spacing:.01em }
.ath__b span{ font-size:.78rem; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ath__b i{ font-family:var(--mono); font-style:normal; font-size:.68rem; color:var(--lime); margin-top:3px }
.ath__b i.is-todo{ color:var(--mute-2); opacity:.6 }
@media(max-width:520px){ .ath{ width:250px } }
/* ============================================================
LOJA
============================================================ */
.shop{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px }
.prod{ position:relative; border:1px solid var(--line); border-radius:var(--rs); overflow:hidden; background:var(--ink-2); transition:border-color .35s var(--e), transform .35s var(--e) }
.prod:hover{ border-color:rgba(197,255,26,.34); transform:translateY(-3px) }
.prod__i{ aspect-ratio:1/1; overflow:hidden; background:#fff }
.prod__i img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--e) }
.prod:hover .prod__i img{ transform:scale(1.06) }
.prod__b{ padding:12px 13px 14px }
.prod__n{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:.94rem; letter-spacing:.04em; line-height:1.2 }
.prod__a{ display:flex; align-items:center; gap:6px; margin-top:7px; font-family:var(--mono); font-size:.66rem; color:var(--mute-2); transition:color .3s var(--e) }
.prod:hover .prod__a{ color:var(--lime) }
/* ============================================================
FAQ
============================================================ */
.faq{ max-width:880px }
.q{ border-top:1px solid var(--line-2) }
.q:last-child{ border-bottom:1px solid var(--line-2) }
.q__b{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 0; text-align:left }
.q__t{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:clamp(1.02rem,1.7vw,1.28rem); letter-spacing:.015em; line-height:1.25; transition:color .3s var(--e) }
.q__b:hover .q__t, .q.is-open .q__t{ color:var(--lime) }
.q__i{ flex:none; width:15px; height:15px; position:relative }
.q__i::before,.q__i::after{ content:''; position:absolute; background:var(--lime); transition:transform .38s var(--e) }
.q__i::before{ inset:7px 0 auto; height:1.5px }
.q__i::after{ inset:0 7px auto; width:1.5px; height:15px }
.q.is-open .q__i::after{ transform:scaleY(0) }
.q__a{ overflow:hidden; height:0; transition:height .42s var(--e) }
.q__a p{ padding-bottom:23px; max-width:700px; font-size:.97rem; color:#a8a8a8 }
/* ============================================================
FECHO + FOOTER
============================================================ */
.close{ position:relative; text-align:center; padding-block:clamp(90px,12vw,160px); overflow:hidden }
.close__mark{ width:min(420px,74vw); height:auto; aspect-ratio:928/372; margin:0 auto 30px;
-webkit-mask:url('../images/marks/just_ball.webp') no-repeat center/contain;
mask:url('../images/marks/just_ball.webp') no-repeat center/contain; }
.close h2{ margin-bottom:16px }
.close p{ max-width:520px; margin:0 auto 32px }
.close__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center }
.foot{ border-top:1px solid var(--line); padding-block:clamp(44px,5vw,64px) }
.foot__g{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(24px,3vw,44px); margin-bottom:44px }
@media(max-width:820px){ .foot__g{ grid-template-columns:1fr 1fr; gap:32px } }
@media(max-width:480px){ .foot__g{ grid-template-columns:1fr } }
.foot__logo img{ height:30px; width:auto; margin-bottom:16px }
.foot__tag{ font-size:.85rem; color:var(--mute); max-width:270px }
.foot h3{ font-size:.84rem; letter-spacing:.2em; color:var(--mute-2); margin-bottom:16px }
.foot ul{ list-style:none; display:flex; flex-direction:column; gap:10px }
.foot a{ font-size:.87rem; color:#a8a8a8; transition:color .25s var(--e) }
.foot a:hover{ color:var(--lime) }
.foot__bot{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line-2) }
.foot__c{ font-family:var(--mono); font-size:.68rem; color:var(--mute-2) }
.foot__brands{ display:flex; align-items:center; gap:16px; opacity:.4 }
.foot__brands img{ height:17px; width:auto }
/* ============================================================
SELO DE PREVIEW — canto inferior DIREITO (o centro é do scroll cue).
Impede o Joel de achar que o site já está no ar. Sai no go-live.
============================================================ */
.stamp{
position:fixed; right:12px; bottom:12px; z-index:60;
display:flex; align-items:center; gap:8px;
background:rgba(10,10,10,.86); backdrop-filter:blur(10px);
border:1px solid var(--lime-dim); border-radius:var(--rp);
padding:7px 13px; pointer-events:none;
font-family:var(--mono); font-size:.6rem; letter-spacing:.08em;
color:var(--mute); line-height:1.3;
}
.stamp b{ color:var(--lime); font-weight:700; text-transform:uppercase; letter-spacing:.12em }
.stamp i{ width:5px; height:5px; border-radius:50%; background:var(--lime); flex:none; animation:blip 2.4s ease-in-out infinite }
@keyframes blip{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }
@media(max-width:600px){ .stamp{ right:8px; bottom:8px; font-size:.54rem; padding:6px 10px } }
/* ============================================================
MARQUEE — o ticker dos cards de Destaque
============================================================ */
.tick{ border-block:1px solid var(--line-2); padding:13px 0; overflow:hidden; display:flex; gap:0 }
.tick__t{ display:flex; gap:34px; padding-right:34px; flex:none; animation:march 34s linear infinite }
.tick span{
font-family:var(--disp); font-weight:700; text-transform:uppercase;
font-size:.86rem; letter-spacing:.28em; color:var(--mute-2); white-space:nowrap;
display:flex; align-items:center; gap:34px;
}
.tick span::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--lime); flex:none }
@keyframes march{ to{ transform:translateX(-100%) } }
/* ============================================================
REVEAL — água. entra e assenta.
============================================================ */
/* Sem JS, nada fica escondido. A classe .js é posta por um script inline no
, antes do primeiro paint. Se o JS falhar ou o bot não executar,
o site aparece inteiro em vez de aparecer em branco. */
html:not(.js) .rv{ opacity:1; transform:none }
html:not(.js) .wr{ clip-path:none }
html:not(.js) .prog{ display:none }
html:not(.js) .is-vs .scale__seg--core, html:not(.js) .scale__seg--core{ width:60% }
html:not(.js) .is-vs .scale__seg--fund, html:not(.js) .scale__seg--fund{ width:40% }
.rv{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e), transform .9s var(--e) }
.rv.is-vs{ opacity:1; transform:none }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.24s }
.d4{ transition-delay:.32s } .d5{ transition-delay:.4s } .d6{ transition-delay:.48s }
.d7{ transition-delay:.56s }
/* mask reveal: a palavra é escrita agora, da esquerda pra direita */
.wr{ clip-path:inset(0 100% 0 0); transition:clip-path 1.15s var(--e) }
.wr.is-vs{ clip-path:inset(0 0 0 0) }
@media(prefers-reduced-motion:reduce){
html{ scroll-behavior:auto }
*,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
.rv{ opacity:1; transform:none }
.wr{ clip-path:none }
.is-vs .scale__seg--core{ width:60% } .is-vs .scale__seg--fund{ width:40% }
/* sem animação os trilhos parariam vazios: viram lista rolável na mão */
.rail{ overflow-x:auto }
.rail__t:not(:first-child){ display:none }
.hx path{ stroke-dashoffset:0 }
.ha{ opacity:var(--o,.9) }
}
/* ============================================================
HERO NO MOBILE V3 - a arte em cima, texto centrado embaixo
(mockup do card). Carimbos reposicionados pro recorte 1008x750.
============================================================ */
@media(max-width:900px){
.hero{ min-height:100svh; height:auto; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; padding-top:76px; padding-bottom:34px }
/* o palco entra no fluxo: a arte empurra o texto pra baixo em vez de
morar atras dele (e da nav) num absoluto */
.hero__stage{ position:relative; inset:auto; overflow:visible }
.hero__art{ position:relative; top:auto; translate:none; width:100%; aspect-ratio:1008/750; margin-bottom:6px }
/* mesmas marcas remapeadas pro recorte mobile (x 720-1728 de 1800) */
.sx1{ left:81.66%; top:5.82%; width:7.93% }
.sx2{ left:11.72%; top:28.57%; width:5.39% }
.sa2{ left:53.79%; top:62.92%; width:2.34% }
.sa3{ left:73.98%; top:37.30%; width:2.06% }
.hero__veil{ display:none }
.hero__glow{ right:-20%; top:-10%; width:110%; height:60% }
.hero__beam{ display:none }
.hero__in{ text-align:center; flex:1; display:flex; align-items:center }
.hero__c{ max-width:560px; margin-inline:auto; width:100% }
.hero h1{ font-size:clamp(3rem,14.6vw,4.6rem); margin-bottom:16px }
.hero__sub{ margin-inline:auto; margin-bottom:26px; font-size:1.02rem }
.hero__cta{ justify-content:center }
.hero__cta .btn{ padding:15px 30px }
}
/* tela muito baixa: hero sai do sticky pra CTA nunca ficar inalcancavel */
@media(max-width:900px) and (max-height:700px){
.hero{ position:relative; min-height:auto }
}
/* ============================================================
MOBILE BREATHING ROOM
============================================================ */
@media(max-width:600px){
section{ padding-block:64px }
.shop{ grid-template-columns:1fr 1fr }
.proof{ grid-template-columns:1fr 1fr }
.ind{ grid-template-columns:1fr }
}
/* ============================================================
APP DO ATLETA — mesma casa, cômodo privado.
Mesmos tokens do site. O atleta atravessa e não sente costura.
============================================================ */
.app-tag{
font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--mute-2); border:1px solid var(--line); padding:5px 11px; border-radius:var(--rp);
flex:none;
}
@media(max-width:600px){ .app-tag{ display:none } }
.app-back{ margin-left:auto; padding:9px 18px; font-size:.84rem }
.app-main{ padding-top:clamp(96px,11vw,124px); padding-bottom:clamp(60px,8vw,110px) }
.app-wrap{ max-width:1080px }
.view{ display:none }
.view.is-on{ display:block; animation:fadeup .7s var(--e) both }
@keyframes fadeup{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }
/* ---------- PORTA ---------- */
.gate{ text-align:center; padding-block:clamp(20px,5vw,50px) }
.gate .kicker{ justify-content:center }
.gate__h{ font-size:clamp(2.8rem,7.4vw,5.6rem); margin:18px 0 18px }
.gate__sub{ max-width:520px; margin:0 auto clamp(38px,5vw,58px) }
.doors{ display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left }
@media(max-width:760px){ .doors{ grid-template-columns:1fr } }
.door{
position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start;
background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
padding:clamp(24px,3vw,34px); min-height:230px;
transition:transform .42s var(--e), border-color .42s var(--e), background .42s var(--e);
}
.door::before{ content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.055) }
.door::after{
content:''; position:absolute; right:-34%; top:-46%; width:78%; aspect-ratio:1; border-radius:50%;
background:radial-gradient(circle, rgba(3,199,63,.24), transparent 68%);
opacity:0; transition:opacity .5s var(--e);
}
.door:hover{ transform:translateY(-4px); border-color:rgba(197,255,26,.34); background:var(--ink-3) }
.door:hover::after{ opacity:1 }
.door__k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2) }
.door__n{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(2rem,3.6vw,2.9rem); letter-spacing:-.02em; line-height:1.05; margin:8px 0 12px; color:var(--lime) }
.door--coach .door__n{ color:var(--paper) }
.door__d{ font-size:.9rem; color:#a0a0a0; line-height:1.6; margin-bottom:22px }
.door__a{ margin-top:auto; display:inline-flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:.92rem }
.door__a i{ transition:transform .3s var(--e); font-style:normal }
.door:hover .door__a i{ transform:translateX(5px) }
/* ---------- LOGIN ---------- */
.login{ display:flex; justify-content:center; padding-block:clamp(20px,4vw,44px) }
.login__box{
position:relative; width:100%; max-width:430px; text-align:center;
background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
padding:clamp(30px,4vw,44px);
}
.login__box::before{ content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.055) }
.login__ball{ width:46px; height:46px; margin:0 auto 18px;
-webkit-mask:url('../images/marks/ball.webp') no-repeat center/contain;
mask:url('../images/marks/ball.webp') no-repeat center/contain; }
.login__h{ font-size:clamp(2.2rem,4vw,2.9rem); margin:14px 0 26px }
.fld{ display:block; text-align:left; margin-bottom:14px }
.fld span{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin-bottom:7px }
.fld input{
width:100%; background:var(--ink); border:1px solid var(--line); border-radius:var(--rs);
padding:13px 15px; color:var(--paper); font-family:var(--body); font-size:.95rem; min-height:46px;
transition:border-color .3s var(--e), background .3s var(--e);
}
.fld input::placeholder{ color:#4a4a4a }
.fld input:focus{ outline:none; border-color:var(--lime); background:var(--ink-3) }
.fld__err{ font-size:.78rem; color:#ff6b6b; text-align:left; margin:-6px 0 12px }
.fld__err[hidden]{ display:none }
.login__go{ width:100%; margin-top:8px }
.login__demo{ font-size:.76rem; color:var(--mute-2); margin-top:18px; line-height:1.6 }
.lnk{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; font:inherit }
.lnk:hover{ opacity:.75 }
.login__back{ margin-top:20px; font-size:.8rem; color:var(--mute); text-decoration:none }
/* ---------- SELO DEMO ---------- */
.demo-flag{
display:flex; flex-wrap:wrap; gap:4px 9px; align-items:baseline;
background:rgba(197,255,26,.06); border:1px solid var(--lime-dim);
border-radius:var(--rs); padding:12px 16px; margin-bottom:clamp(26px,3vw,38px);
font-size:.79rem; color:#9a9a9a; line-height:1.55;
}
.demo-flag b{
font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.11em;
font-size:.76rem; color:var(--lime); flex:none;
}
/* ---------- TOPO DO ATLETA ---------- */
.pl-top{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; margin-bottom:clamp(26px,3vw,36px) }
.pl-id{ display:flex; align-items:center; gap:18px }
.pl-av{
flex:none; width:clamp(62px,7vw,80px); aspect-ratio:1; border-radius:50%;
display:grid; place-items:center; border:1px solid rgba(197,255,26,.3);
background:radial-gradient(circle at 32% 26%, rgba(3,199,63,.28), var(--ink-2) 68%);
}
.pl-av span{ font-size:clamp(1.2rem,2vw,1.5rem); font-weight:700; color:var(--lime) }
.pl-name{ font-size:clamp(2rem,4.4vw,3.2rem); line-height:1 }
.pl-meta{ font-family:var(--mono); font-size:.74rem; color:var(--mute); margin-top:9px }
/* ---------- KPIs ---------- */
.kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:12px }
@media(max-width:980px){ .kpis{ grid-template-columns:repeat(2,1fr) } .kpi--hero{ grid-column:span 2 } }
@media(max-width:520px){ .kpis{ grid-template-columns:1fr 1fr } .kpi--streak{ grid-column:span 2 } }
.kpi{
position:relative; overflow:hidden;
background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:18px;
display:flex; flex-direction:column; gap:5px;
}
.kpi::before{ content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.055) }
.kpi__k{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute-2) }
.kpi__v{ font-size:clamp(1.7rem,2.8vw,2.1rem); line-height:1.1; letter-spacing:-.04em; color:var(--paper) }
.kpi__v--t{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.3rem,2.1vw,1.6rem); letter-spacing:.01em; color:var(--lime) }
.kpi__s{ font-size:.75rem; color:var(--mute) }
.kpi__s i{ color:var(--mute-2); font-style:normal }
.kpi--hero{ border-color:rgba(197,255,26,.24) }
.kpi--hero::after{ content:''; position:absolute; right:-30%; top:-56%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(3,199,63,.2), transparent 68%) }
.kpi--hero .kpi__v{ color:var(--lime); font-size:clamp(2.6rem,5vw,3.4rem) }
.kpi__vr{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; position:relative; z-index:2 }
.kpi__up{ font-size:.76rem; color:var(--mint) }
.kpi__math{ font-family:var(--mono); font-size:.62rem; color:var(--mute-2); margin-top:6px; padding-top:9px; border-top:1px solid var(--line-2); position:relative; z-index:2 }
.kpi__math i{ color:var(--lime); font-style:normal }
.kpi--streak .kpi__v{ color:var(--mint) }
/* ---------- GRÁFICOS ---------- */
.charts{ display:grid; grid-template-columns:1.55fr 1fr; gap:10px; margin-bottom:clamp(34px,4vw,52px) }
@media(max-width:860px){ .charts{ grid-template-columns:1fr } }
.chart{ position:relative; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:18px }
.chart::before{ content:''; position:absolute; inset:0; border-radius:var(--r); pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.055) }
.chart__h{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin-bottom:14px }
.chart__d{ font-size:.72rem; color:var(--mint) }
.chart__svg{ width:100%; height:auto; display:block }
.chart__lg{ display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.62rem; color:var(--mute-2) }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block }
.dot--you{ background:var(--lime) }
.dot--avg{ background:var(--mute-2) }
/* ---------- OS 7 ---------- */
.blk{ margin-bottom:clamp(34px,4vw,52px) }
.blk__h{ margin-bottom:26px; max-width:640px }
.blk__h h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-bottom:10px }
.blk__h p{ font-size:.92rem; color:var(--mute) }
.grp{ margin-bottom:22px }
.grp__h{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line-2) }
.grp__h h3{ font-size:1.3rem }
.grp__w{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-2) }
.ind7{ display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:10px }
.i7{ background:var(--ink-2); border:1px solid rgba(197,255,26,.16); border-radius:var(--r); padding:16px; transition:border-color .35s var(--e), transform .35s var(--e) }
.i7:hover{ border-color:rgba(197,255,26,.4); transform:translateY(-3px) }
.i7--f{ border-color:var(--line) }
.i7--f:hover{ border-color:rgba(255,255,255,.22) }
.i7__t{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:9px }
.i7__t span{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.06rem; letter-spacing:.03em }
.i7__t b{ font-size:1.16rem; color:var(--lime) }
.i7--f .i7__t b{ color:var(--paper) }
.i7__t2{ height:4px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; margin-bottom:11px }
.i7__f{ height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--lime)); transition:width 1.2s var(--e) }
.i7--f .i7__f{ background:linear-gradient(90deg,#3a3a3a,#8a8a8a) }
.i7 p{ font-size:.79rem; color:#909090; line-height:1.55 }
/* ---------- FORÇAS / FOCO / COACH ---------- */
.btm{ display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:10px; margin-bottom:12px }
@media(max-width:900px){ .btm{ grid-template-columns:1fr 1fr } .card--coach{ grid-column:span 2 } }
@media(max-width:520px){ .btm{ grid-template-columns:1fr } .card--coach{ grid-column:span 1 } }
.rank{ list-style:none; margin-top:15px; display:flex; flex-direction:column; gap:2px }
.rank li{ display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--line-2); font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1.02rem; letter-spacing:.03em }
.rank li:first-child{ border-top:none }
.rank i{ flex:none; width:19px; height:19px; border-radius:50%; display:grid; place-items:center; font-size:.6rem; background:rgba(197,255,26,.14); color:var(--lime); font-style:normal }
.rank--f i{ background:rgba(255,255,255,.07); color:var(--mute) }
.rank b{ margin-left:auto; font-size:1.02rem; color:var(--lime) }
.rank--f b{ color:var(--mute) }
.card--coach{ display:flex; flex-direction:column; border-color:rgba(197,255,26,.2) }
.card--coach blockquote{
font-family:var(--disp); font-weight:700; text-transform:none;
font-size:clamp(1.16rem,2vw,1.44rem); line-height:1.3; letter-spacing:.005em;
margin:15px 0 auto; color:var(--paper);
}
.card--coach cite{ font-family:var(--mono); font-size:.66rem; font-style:normal; color:var(--mute-2); text-transform:uppercase; letter-spacing:.1em; margin-top:18px }
/* ---------- POSTAR ---------- */
.post{
position:relative; overflow:hidden;
display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,3vw,32px);
}
.post::after{ content:''; position:absolute; left:-14%; bottom:-70%; width:44%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(197,255,26,.1), transparent 68%) }
.post__c{ position:relative; z-index:2 }
.post h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:9px 0 8px }
.post p{ font-size:.86rem; color:var(--mute) }
.post .btn{ position:relative; z-index:2; flex:none }
/* ============================================================
APP SHELL (CRM) — sidebar à esquerda, painel à direita
============================================================ */
.app-body.is-shell .nav{ display:none }
.app-body.is-shell .app-main{ padding:0 }
#v-app.view.is-on{ animation:none }
.ax{ display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh }
/* ---- sidebar ---- */
.ax__side{
position:sticky; top:0; align-self:start; height:100vh;
display:flex; flex-direction:column; min-width:0;
background:var(--ink-2); border-right:1px solid var(--line);
padding:26px 18px 18px; z-index:20;
}
.ax__logo{ display:block; padding:0 8px 4px }
.ax__logo img{ height:26px; width:auto }
.ax__lbl{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2); padding:22px 10px 12px }
.ax__nav{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-height:0; overflow-y:auto }
.ax__i{
display:flex; align-items:center; gap:12px; width:100%; text-align:left;
padding:11px 12px; border-radius:10px; border-left:2px solid transparent;
font-family:var(--body); font-weight:600; font-size:.92rem; color:var(--mute);
transition:color .25s var(--e), background .25s var(--e), border-color .25s var(--e);
}
.ax__i svg{ width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.ax__i:hover{ color:var(--paper); background:rgba(255,255,255,.04) }
.ax__i.is-on{ color:var(--lime); background:rgba(197,255,26,.08); border-left-color:var(--lime) }
.ax__me{
display:flex; align-items:center; gap:11px; margin-top:14px; padding:12px 10px;
border-top:1px solid var(--line-2);
}
.ax__av{
flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
background:linear-gradient(150deg,var(--green),var(--ink-3)); border:1px solid var(--lime-dim);
font-family:var(--disp); font-weight:800; font-size:.9rem; color:var(--lime); letter-spacing:.02em;
}
.ax__meid{ min-width:0; line-height:1.25 }
.ax__meid b{ display:block; font-size:.9rem; color:var(--paper); font-weight:700 }
.ax__meid span{ font-family:var(--mono); font-size:.62rem; color:var(--mute-2) }
.ax__out{ margin-left:auto; flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); color:var(--mute); transition:color .25s var(--e), border-color .25s var(--e) }
.ax__out svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.ax__out:hover{ color:var(--lime); border-color:var(--lime-dim) }
/* ---- área de conteúdo ---- */
.ax__main{ min-width:0; padding:26px clamp(20px,3.4vw,46px) clamp(48px,6vw,80px) }
.ax__top{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; margin-bottom:20px }
.ax__topid{ display:flex; align-items:center; gap:14px; min-width:0 }
.ax__burger{ display:none; flex:none; width:42px; height:42px; place-items:center; border-radius:10px; border:1px solid var(--line); color:var(--paper) }
.ax__burger svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round }
.ax__crumb{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-2); margin-bottom:5px }
.ax__title{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.01em; line-height:1 }
.ax__coach{ flex:none; padding:10px 18px; font-size:.82rem }
.ax__main .demo-flag{ margin-bottom:24px }
.panel{ display:none }
.panel.is-on{ display:block; animation:fadeup .55s var(--e) both }
.panel[hidden]{ display:none }
.pnl-intro{ margin-bottom:26px; max-width:680px }
.pnl-intro h3{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:10px }
.pnl-intro p{ font-size:.92rem; color:var(--mute); line-height:1.6 }
/* ---- inputs comuns aos painéis (16px = sem zoom no iOS) ---- */
.ax .fld input, .ax .fld select, .ax .fld textarea{
width:100%; background:var(--ink); border:1px solid var(--line); border-radius:var(--rs);
padding:12px 14px; color:var(--paper); font-family:var(--body); font-size:16px; min-height:46px;
transition:border-color .3s var(--e), background .3s var(--e);
}
.ax .fld textarea{ line-height:1.5; resize:vertical; min-height:76px }
.ax .fld select{ appearance:none; -webkit-appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 14px center; padding-right:38px }
.ax .fld input:focus, .ax .fld select:focus, .ax .fld textarea:focus{ outline:none; border-color:var(--lime); background:var(--ink-3) }
.fld--u{ position:relative }
.fld--u input{ padding-right:44px }
.fld--u i{ position:absolute; right:14px; bottom:13px; font-family:var(--mono); font-style:normal; font-size:.8rem; color:var(--mute-2); pointer-events:none }
/* ============================================================
PAINEL: MEU PERFIL (o formulário)
============================================================ */
.pf7{ max-width:760px }
.pf7__grp{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.4vw,26px); margin-bottom:12px }
.pf7__gh{ display:flex; align-items:baseline; gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line-2) }
.pf7__n{ font-family:var(--mono); font-size:.72rem; color:var(--lime) }
.pf7__gh h4{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.14rem; letter-spacing:.03em }
.pf7__hint{ margin-left:auto; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-2) }
.pf7__hint b{ color:var(--lime); font-weight:400 }
.pf7__id{ display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap }
.pf7__photo{ flex:none; width:104px; height:104px; border-radius:var(--r); position:relative; overflow:hidden;
border:1px dashed var(--line); background:linear-gradient(150deg,var(--ink-3),var(--ink)); display:grid; place-items:center; transition:border-color .3s var(--e) }
.pf7__photo:hover{ border-color:var(--lime-dim) }
.pf7__ph{ font-family:var(--disp); font-weight:800; font-size:2rem; color:var(--lime) }
.pf7__phc{ position:absolute; inset:auto 0 0 0; background:rgba(0,0,0,.55); font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); padding:5px 0 }
.pf7__idf{ flex:1 1 300px; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:12px }
.pf7__row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px }
.pf7__row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.pf7 .fld{ margin-bottom:12px }
.pf7__row2 .fld, .pf7__row3 .fld, .pf7__idf .fld{ margin-bottom:0 }
.pf7__note{ font-size:.78rem; color:var(--mute-2); line-height:1.55; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2) }
.pf7__word{ max-width:260px }
.pf7__save{ display:flex; align-items:center; gap:16px; margin-top:16px }
.pf7__saved{ font-family:var(--mono); font-size:.8rem; color:var(--mint) }
.pf7__saved[hidden]{ display:none }
@media(max-width:560px){ .pf7__idf, .pf7__row3, .pf7__row2{ grid-template-columns:1fr } }
/* ============================================================
PAINEL: MEU FUTURO (medidas + NBA)
============================================================ */
.fut{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:900px }
.fut__parents, .fut__nba{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.4vw,24px) }
.fut__result{ grid-column:1 / -1; position:relative; overflow:hidden;
background:var(--ink-2); border:1px solid rgba(197,255,26,.24); border-radius:var(--r); padding:clamp(20px,2.8vw,30px) }
.fut__result::after{ content:''; position:absolute; right:-16%; top:-60%; width:52%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(3,199,63,.16),transparent 68%) }
.fut__pgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:12px }
.fut__disc, .fut__foot{ font-size:.74rem; color:var(--mute-2); line-height:1.5; margin-top:14px }
.fut__big{ display:flex; align-items:baseline; gap:10px; margin:12px 0 22px; position:relative; z-index:2 }
.fut__big b{ font-family:var(--mono); font-weight:700; font-size:clamp(2.6rem,6vw,3.8rem); color:var(--lime); letter-spacing:-.04em; line-height:1 }
.fut__big span{ font-size:1rem; color:var(--mute) }
.fut__big i{ font-family:var(--mono); font-style:normal; font-size:1rem; color:var(--mute-2); align-self:flex-end; margin-bottom:6px }
.fut__bar{ position:relative; z-index:2; margin-bottom:20px }
.fut__scale{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.6rem; color:var(--mute-2); margin-bottom:7px }
.fut__track{ position:relative; height:16px; border-radius:99px; background:var(--ink); border:1px solid var(--line); overflow:visible }
.fut__band{ position:absolute; top:-1px; bottom:-1px; border-radius:99px; background:linear-gradient(90deg,var(--green),var(--lime)); opacity:.9; transition:left .6s var(--e), width .6s var(--e) }
.fut__now{ position:absolute; top:50%; transform:translate(-50%,-50%); transition:left .6s var(--e); z-index:3; display:flex; flex-direction:column; align-items:center }
.fut__now i{ width:3px; height:26px; background:var(--paper); border-radius:2px; box-shadow:0 0 0 3px var(--ink) }
.fut__now span{ font-family:var(--mono); font-size:.54rem; text-transform:uppercase; letter-spacing:.08em; color:var(--paper); margin-top:4px; background:var(--ink); padding:1px 5px; border-radius:4px }
.fut__mid{ position:relative; z-index:2; font-size:.82rem; color:var(--mute); line-height:1.55 }
.fut__mid b{ color:var(--lime); font-family:var(--mono) }
.fut__nba{ grid-column:1 / -1 }
.fut__players{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:14px }
.fut__pl{ background:var(--ink); border:1px solid var(--line); border-radius:var(--rs); padding:14px 16px; transition:border-color .3s var(--e) }
.fut__pl--in{ border-color:rgba(197,255,26,.4); background:rgba(197,255,26,.05) }
.fut__pl b{ display:block; font-family:var(--mono); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; color:var(--mute) }
.fut__pl--in b{ color:var(--lime) }
.fut__pl span{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.02rem; letter-spacing:.02em; color:var(--paper); display:block; margin-top:6px }
.fut__pl i{ font-family:var(--mono); font-style:normal; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--mute-2) }
@media(max-width:640px){ .fut{ grid-template-columns:1fr } .fut__pgrid{ grid-template-columns:1fr 1fr 1fr } }
/* ============================================================
PAINEL: PRESENÇA
============================================================ */
.prs{ display:grid; grid-template-columns:1fr 1.3fr; gap:12px; margin-bottom:12px }
.prs__hero{ background:var(--ink-2); border:1px solid rgba(197,255,26,.24); border-radius:var(--r); padding:clamp(20px,2.8vw,28px); position:relative; overflow:hidden }
.prs__hero b{ font-family:var(--mono); font-weight:700; font-size:clamp(3rem,7vw,4.4rem); color:var(--mint); line-height:1; letter-spacing:-.04em; display:block }
.prs__hero>span{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:.04em; color:var(--paper); display:block; margin:8px 0 14px }
.prs__hero p{ font-size:.82rem; color:var(--mute); line-height:1.55 }
.prs__week{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.8vw,28px) }
.prs__dots{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 14px }
.prs__dot{ width:22px; height:22px; border-radius:6px; flex:none }
.prs__dot--on{ background:linear-gradient(150deg,var(--green),var(--lime)) }
.prs__dot--off{ background:var(--ink-3); border:1px solid var(--line) }
.prs__lg{ display:flex; gap:16px; font-family:var(--mono); font-size:.62rem; color:var(--mute-2); text-transform:uppercase; letter-spacing:.06em }
.prs__d{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px }
.prs__d--on{ background:var(--lime) }
.prs__d--off{ background:var(--ink-3); border:1px solid var(--line) }
.prs__check{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.8vw,28px) }
.prs__ci{ font-size:.82rem; color:var(--mute); margin:6px 0 16px }
.prs__opts{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px }
.prs__o{ text-align:left; background:var(--ink); border:1px solid var(--line); border-radius:var(--rs); padding:16px; transition:border-color .3s var(--e), transform .3s var(--e), background .3s var(--e) }
.prs__o:hover{ transform:translateY(-3px); border-color:rgba(197,255,26,.34) }
.prs__o.is-sel{ border-color:var(--lime); background:rgba(197,255,26,.06) }
.prs__o b{ display:block; font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.1rem; letter-spacing:.02em; color:var(--lime); margin-bottom:5px }
.prs__o span{ font-size:.76rem; color:var(--mute); line-height:1.45 }
.prs__done{ font-size:.84rem; color:var(--mint); margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2) }
.prs__done[hidden]{ display:none }
@media(max-width:760px){ .prs{ grid-template-columns:1fr } .prs__opts{ grid-template-columns:1fr } }
/* ============================================================
PAINEL: RANKING
============================================================ */
.rk{ list-style:none; max-width:640px; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:8px clamp(12px,2vw,20px) }
.rk__li{ display:flex; align-items:center; gap:14px; padding:14px 6px; border-top:1px solid var(--line-2) }
.rk__li:first-child{ border-top:none }
.rk__pos{ flex:none; width:26px; font-family:var(--mono); font-weight:700; font-size:.92rem; color:var(--mute-2); text-align:center }
.rk__nm{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:1.08rem; letter-spacing:.02em; color:var(--paper) }
.rk__sc{ margin-left:auto; font-family:var(--mono); font-weight:700; font-size:1.04rem; color:var(--mute) }
.rk__li--me{ background:rgba(197,255,26,.07); border-radius:10px; border-top-color:transparent; margin:2px 0; padding-inline:12px }
.rk__li--me+.rk__li{ border-top-color:transparent }
.rk__li--me .rk__pos{ color:var(--lime) }
.rk__li--me .rk__nm{ color:var(--lime) }
.rk__li--me .rk__sc{ color:var(--lime) }
.rk__me{ font-family:var(--mono); font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; color:#050505; background:var(--lime); padding:2px 6px; border-radius:4px; margin-left:8px }
.rk__note{ font-size:.8rem; color:var(--mute-2); line-height:1.55; margin-top:16px; max-width:560px }
/* ============================================================
PAINEL: FEEDBACKS
============================================================ */
.fb{ display:flex; flex-direction:column; gap:10px; max-width:720px }
.fb__c{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.4vw,24px); position:relative }
.fb__c--now{ border-color:rgba(197,255,26,.26) }
.fb__c--now::before{ content:''; position:absolute; left:0; top:18px; bottom:18px; width:2px; border-radius:2px; background:linear-gradient(to bottom,var(--lime),transparent) }
.fb__h{ display:flex; align-items:center; gap:12px; margin-bottom:12px }
.fb__tag{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); background:rgba(197,255,26,.08); border:1px solid var(--lime-dim); padding:3px 9px; border-radius:99px }
.fb__h time{ font-family:var(--mono); font-size:.64rem; color:var(--mute-2) }
.fb__c blockquote{ font-family:var(--disp); font-weight:700; font-size:clamp(1.16rem,2vw,1.4rem); line-height:1.32; color:var(--paper) }
.fb__c cite{ display:block; font-family:var(--mono); font-size:.64rem; font-style:normal; text-transform:uppercase; letter-spacing:.1em; color:var(--mute-2); margin-top:14px }
/* ============================================================
PAINEL: DESTAQUES
============================================================ */
.dq{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px }
.dq__c{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.4vw,24px); transition:border-color .3s var(--e), transform .3s var(--e) }
.dq__c:hover{ transform:translateY(-3px); border-color:rgba(255,255,255,.2) }
.dq__c--me{ border-color:rgba(197,255,26,.3); background:rgba(197,255,26,.04) }
.dq__b{ font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-2); margin-bottom:14px }
.dq__c--me .dq__b{ color:var(--lime) }
.dq__c h4{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.24rem; letter-spacing:.02em; line-height:1.1; margin-bottom:10px; color:var(--paper) }
.dq__c--me h4{ color:var(--lime) }
.dq__c p{ font-size:.84rem; color:var(--mute); line-height:1.55 }
/* ============================================================
APP SHELL — mobile (drawer)
============================================================ */
@media(max-width:900px){
.ax{ grid-template-columns:1fr }
.ax__side{
position:fixed; top:0; left:0; bottom:0; width:270px; height:100%;
transform:translateX(-100%); transition:transform .4s var(--e);
box-shadow:0 0 60px rgba(0,0,0,.6);
}
.ax.is-open .ax__side{ transform:translateX(0) }
.ax__scrim{
position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:15;
opacity:0; visibility:hidden; transition:opacity .4s var(--e), visibility .4s var(--e);
}
.ax.is-open .ax__scrim{ opacity:1; visibility:visible }
.ax__burger{ display:grid }
.ax__main{ padding-top:20px }
.ax__coach{ display:none }
}
@media(max-width:520px){
.ax__main{ padding-inline:16px }
.fut__pgrid{ grid-template-columns:1fr }
}
/* ============================================================
V3 - RISE: o conteudo desliza por cima do hero pinado
============================================================ */
.rise{
position:relative; z-index:3;
background:var(--ink);
border-radius:clamp(18px,2.4vw,28px) clamp(18px,2.4vw,28px) 0 0;
box-shadow:0 -28px 70px rgba(0,0,0,.6);
}
/* o fundo fixo (quadra) some atras do rise opaco; o bloom de canto
e o grao voltam por dentro pra atmosfera nao morrer */
.rise::before{
content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
background:
radial-gradient(70vw 55vh at 100% 0%, rgba(3,199,63,.10), transparent 62%),
radial-gradient(50vw 40vh at 0% 14%, rgba(197,255,26,.045), transparent 60%);
}
.rise::after{
content:''; position:absolute; inset:0; pointer-events:none; z-index:4; opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rise > *{ position:relative; z-index:1 }
.foot{ background:var(--ink); position:relative; z-index:3 }
/* ============================================================
V3 - OS 7 EM CHIP (home enxuta; a profundidade mora em /metodo)
============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(30px,4vw,44px) }
.chip{
display:flex; align-items:baseline; gap:11px; padding:12px 20px 12px 16px;
border:1px solid var(--line); border-radius:var(--rp); background:var(--ink-2);
transition:border-color .35s var(--e), transform .35s var(--e);
}
.chip:hover{ transform:translateY(-2px); border-color:rgba(197,255,26,.3) }
.chip--core{ border-color:rgba(197,255,26,.2); background:rgba(197,255,26,.045) }
.chip__n{ font-family:var(--mono); font-size:.62rem; color:var(--mute-2) }
.chip b{ font-family:var(--disp); font-weight:800; text-transform:uppercase; font-size:1.04rem; letter-spacing:.02em }
.chip--core b{ color:var(--lime) }
.chip__w{ font-family:var(--mono); font-size:.56rem; letter-spacing:.08em; color:var(--mute-2); text-transform:uppercase }
.metodo__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:clamp(28px,3.5vw,40px) }
/* ============================================================
V3 - DESTAQUE DO MES (card holografico com tilt, paleta JB7)
============================================================ */
/* D3b: as duas colunas passam a ter peso proprio pra que o card possa se
centralizar dentro do bloco da direita, com folga igual dos dois lados. */
.dest{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(30px,4vw,56px); align-items:center }
.dest__v{ display:flex; justify-content:center; min-width:0 }
@media(max-width:900px){ .dest{ grid-template-columns:1fr } }
.dest__copy h2{ margin:18px 0 20px }
.dest__copy .lead{ max-width:520px; margin-bottom:28px }
.pc{
position:relative; width:min(370px,80vw); margin:0 auto;
perspective:640px; touch-action:pan-y;
--px:50%; --py:50%; --rx:0deg; --ry:0deg; --op:0;
}
.pc__behind{
position:absolute; inset:-9%; z-index:0; pointer-events:none; border-radius:36px;
background:radial-gradient(circle at var(--px) var(--py), rgba(197,255,26,.4), transparent 56%);
filter:blur(46px) saturate(1.1); opacity:calc(.8*var(--op)); transition:opacity .55s var(--e);
}
/* D3a: o card ja nasce com cara de vidro, antes de qualquer hover: borda
clara em cima, sombra funda embaixo e um brilho fixo na moldura. */
.pc__card{
position:relative; z-index:1; border-radius:22px; overflow:hidden; aspect-ratio:4/5;
transform:rotateX(var(--ry)) rotateY(var(--rx));
transition:transform .9s var(--e), box-shadow .5s var(--e);
border:1px solid rgba(255,255,255,.16); background:var(--ink-2);
box-shadow:
0 30px 70px rgba(0,0,0,.7),
inset 0 1px 0 rgba(255,255,255,.22),
inset 0 -1px 0 rgba(255,255,255,.06),
0 0 0 1px rgba(197,255,26,.08);
}
/* halo suave permanente, que o ponteiro so intensifica */
.pc::before{
content:''; position:absolute; inset:-6%; z-index:0; pointer-events:none; border-radius:30px;
background:radial-gradient(60% 55% at 50% 45%, rgba(197,255,26,.13), transparent 70%);
filter:blur(26px);
}
.pc.is-live .pc__card{ transition:none }
.pc__card > img{ width:100%; height:100%; object-fit:cover; display:block }
/* brilho limpo que segue o ponteiro. As listras diagonais sairam: o que
fica e o mesmo vocabulario de luz da borda dos cards de treino. Entra e
sai em rampa de .55s, nunca aparece de estalo. */
.pc__shine{
position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:screen;
opacity:calc(.5*var(--op)); transition:opacity .55s var(--e);
background:radial-gradient(farthest-corner circle at var(--px) var(--py),
rgba(197,255,26,.5) 0%, rgba(3,199,63,.16) 34%, transparent 68%);
}
/* anel de luz na borda, igual ao dos cards de treino */
.pc__card::after{
content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
border-radius:20px; padding:1.5px;
background:radial-gradient(150px circle at var(--px) var(--py),
rgba(197,255,26,calc(.95*var(--op))), rgba(3,199,63,calc(.45*var(--op))) 44%, transparent 74%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
transition:opacity .55s var(--e);
}
.pc__glare{
position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:overlay;
opacity:calc(.34*var(--op)); transition:opacity .55s var(--e);
background:radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255,255,255,.5) 10%, rgba(40,48,40,.32) 90%);
}
/* D3c: a pilula de legenda saiu (o Jordan riscou de vermelho). */
.pc__tag{ display:none }
.pc__tag--off{
position:absolute; left:50%; translate:-50% 0; bottom:-34px; z-index:4;
font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--mute); background:rgba(5,5,5,.85); border:1px solid var(--line);
border-radius:var(--rp); padding:5px 13px; white-space:nowrap; backdrop-filter:blur(8px);
}
/* ============================================================
V3 - DEPOIMENTOS (nota real do Google + trilho de reviews)
============================================================ */
.reviews-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,3.6vw,44px) }
.gscore{ display:flex; align-items:center; gap:20px }
.gscore__n{ font-family:var(--mono); font-weight:700; font-size:clamp(3.4rem,6vw,4.8rem); color:var(--lime); line-height:.95; letter-spacing:-.04em }
.stars{ display:flex; gap:4px }
.stars i{ width:16px; height:16px; background:var(--lime); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%) }
.gscore__l{ font-family:var(--mono); font-size:.72rem; color:var(--mute); margin-top:8px }
.gscore__l a{ color:var(--lime); border-bottom:1px solid transparent; transition:border-color .25s var(--e) }
.gscore__l a:hover{ border-bottom-color:var(--lime) }
.rev{
flex:none; width:min(360px,78vw); padding:20px 22px;
border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2);
display:flex; flex-direction:column; gap:12px; white-space:normal;
}
.rev .stars i{ width:11px; height:11px }
.rev p{ font-size:.9rem; color:#c2c2c2; line-height:1.6 }
.rev__w{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:auto }
.rev__n{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:.9rem; letter-spacing:.05em }
.rev__g{ font-family:var(--mono); font-size:.6rem; color:var(--mute-2); white-space:nowrap }
.rail--rev .rail__t{ animation-duration:80s; align-items:stretch }
.rail--rev.rail--back .rail__t{ animation-duration:92s }
/* ============================================================
V3 - PAREDE DE FOTOS (drift automatico, sem interacao)
============================================================ */
.wall{
display:flex; gap:10px; height:clamp(340px,44vw,470px); overflow:hidden;
-webkit-mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
mask-image:linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
.wall__col{ flex:1; min-width:0; overflow:hidden }
.wall__track{ display:flex; flex-direction:column; gap:10px; padding-bottom:10px; animation:driftY var(--dur,44s) linear infinite; will-change:transform }
.wall__col--rev .wall__track{ animation-direction:reverse }
.wall img{ width:100%; height:auto; border-radius:var(--rs); border:1px solid var(--line-2); filter:saturate(.94) contrast(1.02) }
@keyframes driftY{ to{ transform:translateY(-50%) } }
@media(max-width:700px){ .wall__col:nth-child(n+4){ display:none } .wall{ height:64vw } }
/* ============================================================
V3 - TREINOS com border-glow (React Bits repintado em JB7)
e as imagens PNG transbordando o card
============================================================ */
.plans{ gap:18px }
.plan{
position:relative; border:1px solid var(--line); border-radius:28px;
background:var(--ink-2); padding:clamp(20px,2.4vw,26px);
overflow:visible;
/* coluna flex de novo: e o que faz a lista de cada card ancorar na base
(margin-top:auto no ul) e os tres cards fecharem alinhados. */
display:flex; flex-direction:column;
}
.plan::after{
content:''; position:absolute; inset:0; border-radius:28px; pointer-events:none; z-index:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
/* o anel de luz que segue o mouse na borda */
.plan::before{
content:''; position:absolute; inset:-1px; border-radius:29px; pointer-events:none; z-index:3;
padding:1.6px;
background:radial-gradient(170px circle at var(--gx,50%) var(--gy,50%),
rgba(197,255,26,calc(.95*var(--gi,0))),
rgba(3,199,63,calc(.5*var(--gi,0))) 42%,
transparent 72%);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite:exclude;
}
/* D7d: as tres fotos vem recortadas na mesma proporcao, entao o frame e
identico pros tres. A imagem sai do FLUXO (absoluta): assim ela nunca
empurra a altura do frame, e pode passar da moldura no hover mostrando
que e um PNG sem fundo. */
.plan__img{
position:relative; z-index:2; overflow:visible; background:transparent;
border-radius:0; aspect-ratio:1/1; margin-bottom:16px;
}
.plan__img img{
position:absolute; left:50%; top:50%; translate:-50% -50%;
height:100%; width:auto; max-width:none;
transform-origin:center;
}
.plan__img::after{ border-radius:var(--rs) }
.plan__img img{
transition:transform .8s var(--e), filter .8s var(--e);
filter:drop-shadow(0 18px 26px rgba(0,0,0,.55));
}
.plan:hover .plan__img img{ transform:scale(1.17); filter:drop-shadow(0 30px 40px rgba(0,0,0,.7)) }
.plan > *{ position:relative; z-index:1 }
/* ============================================================
V3 - GINASIOS com foto dentro do box (degrade preto -> foto)
============================================================ */
.gym{ min-height:320px }
.gym__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:var(--r); overflow:hidden }
.gym__bg img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center;
-webkit-mask-image:linear-gradient(to right, transparent 26%, rgba(0,0,0,.45) 52%, #000 78%);
mask-image:linear-gradient(to right, transparent 26%, rgba(0,0,0,.45) 52%, #000 78%);
filter:saturate(.96) contrast(1.03);
transition:transform .8s var(--e);
}
.gym:hover .gym__bg img{ transform:scale(1.045) }
.gym__bg::after{
content:''; position:absolute; inset:0;
background:linear-gradient(90deg, var(--ink-2) 30%, rgba(11,11,11,.72) 52%, rgba(11,11,11,.28) 72%, transparent 90%);
}
.gym__pin, .gym__b{ position:relative; z-index:2 }
.gym__b{ max-width:60% }
.gym__h span{ text-shadow:0 1px 8px rgba(0,0,0,.8) }
@media(max-width:820px){
.gym{ min-height:0 }
.gym__b{ max-width:66% }
}
@media(max-width:560px){
.gym__bg img{
object-position:right bottom;
-webkit-mask-image:linear-gradient(to right, transparent 30%, rgba(0,0,0,.55) 55%, #000 80%);
mask-image:linear-gradient(to right, transparent 30%, rgba(0,0,0,.55) 55%, #000 80%);
}
.gym__b{ max-width:78% }
}
/* ============================================================
V3 - VIDEO (fachada leve; iframe so entra no clique)
============================================================ */
.vidwrap{ max-width:940px; margin-inline:auto }
.vid{
position:relative; display:block; width:100%; aspect-ratio:16/9;
border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
background:var(--ink-2); cursor:pointer; padding:0;
}
.vid > img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e); filter:contrast(1.02) }
.vid:hover > img{ transform:scale(1.03) }
.vid::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to top, rgba(5,5,5,.72), transparent 42%);
}
.vid__play{
position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
width:clamp(64px,7vw,84px); height:clamp(64px,7vw,84px); border-radius:50%;
background:var(--lime); display:grid; place-items:center;
box-shadow:0 12px 44px rgba(197,255,26,.35);
transition:transform .35s var(--e);
}
.vid:hover .vid__play{ transform:scale(1.08) }
.vid__play::before{
content:''; display:block; width:0; height:0; margin-left:4px;
border-style:solid; border-width:11px 0 11px 19px;
border-color:transparent transparent transparent #050505;
}
.vid__tag{
position:absolute; left:16px; bottom:14px; z-index:2;
font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#e8e8e8;
}
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:4 }
/* ============================================================
V3 - TRILHOS com fundo de quadra e fotos reais
============================================================ */
.rails{ position:relative; overflow:hidden }
.rails__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
/* a faixa e a caixa dos dois trilhos: o fundo mora dentro dela, entao a
quadra aparece exatamente atras dos cards que deslizam. */
/* D4: a faixa cresce pra imagem ter corpo de verdade atras do carrossel,
como na referencia. O degrade de baixo faz a transicao limpa pra secao
seguinte. */
.rails__band{ position:relative; padding-block:clamp(64px,11vw,150px) }
.rails__band > .wrap{ position:relative; z-index:1 }
.rails__bg img{
width:100%; height:100%; object-fit:cover; object-position:center 32%;
/* a arte tem as laterais pretas (o conteudo vivo vai de 13%% a 90%% da
largura). O zoom leve faz a quadra chegar de ponta a ponta, sem as
duas faixas escuras que apareciam nas bordas. */
transform:scale(1.3); transform-origin:center 38%;
opacity:.92; filter:saturate(.98);
-webkit-mask-image:linear-gradient(to bottom, transparent, #000 6%, #000 82%, transparent 100%);
mask-image:linear-gradient(to bottom, transparent, #000 6%, #000 82%, transparent 100%);
}
/* veu leve so pra sustentar o texto: a quadra tem que aparecer atras */
.rails__bg::after{
content:''; position:absolute; inset:0;
background:
linear-gradient(90deg, var(--ink) 0%, rgba(5,5,5,.28) 3%, transparent 13%, transparent 87%, rgba(5,5,5,.28) 97%, var(--ink) 100%),
linear-gradient(to bottom, rgba(5,5,5,.3) 0%, rgba(5,5,5,.04) 22%, rgba(5,5,5,.42) 78%, var(--ink) 100%);
}
.rails > *{ position:relative; z-index:1 }
/* os cards viram vidro: leem bem e deixam a quadra passar por tras */
.rails .ath{ background:rgba(9,9,9,.55); backdrop-filter:blur(13px) saturate(1.2); border-color:rgba(255,255,255,.16) }
.rails .ath__b b{ text-shadow:0 1px 10px rgba(0,0,0,.9) }
.rails .ath__b span{ color:#c9c9c9; text-shadow:0 1px 8px rgba(0,0,0,.9) }
/* ============================================================
V3 - TEASERS (experience e loja apontando pras paginas)
============================================================ */
.tease{
position:relative; border-radius:var(--r); overflow:hidden;
border:1px solid var(--line); background:var(--ink-2);
display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
}
@media(max-width:860px){ .tease{ grid-template-columns:1fr } }
.tease__c{ padding:clamp(28px,4vw,54px); display:flex; flex-direction:column; align-items:flex-start; gap:0 }
.tease__c h2{ margin:14px 0 16px }
.tease__c .lead{ margin-bottom:26px; max-width:480px }
.tease__v{ position:relative; min-height:280px; background:var(--ink); overflow:hidden }
.tease__v img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e) }
.tease:hover .tease__v img{ transform:scale(1.04) }
.tease__v::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, var(--ink-2), transparent 46%) }
@media(max-width:860px){ .tease__v{ order:-1; min-height:220px } .tease__v::after{ background:linear-gradient(to top, var(--ink-2), transparent 52%) } }
.tease--shop .tease__v{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px; align-content:center }
/* so a peca sob o ponteiro cresce, e ela sobe de camada com sombra
pra dar profundidade em vez de encavalar na vizinha */
.tease--shop .tease__v img{
position:relative; inset:auto; border-radius:var(--rs); aspect-ratio:1/1; height:auto; background:#fff;
z-index:1; transition:transform .45s var(--e), box-shadow .45s var(--e);
}
.tease:hover .tease__v img{ transform:none }
/* V7: sombra mais suave e zoom menor no hover (so desktop) */
.tease--shop .tease__v img:hover{
transform:scale(1.08); z-index:3;
box-shadow:0 10px 22px rgba(0,0,0,.42), 0 0 0 1px rgba(197,255,26,.16);
}
.tease--shop .tease__v::after{ content:none }
/* ============================================================
V3 - FAQ centralizado ("Ficou alguma duvida" numa linha so)
============================================================ */
/* bloco de secao centrado (usado no "Aperta o play") */
.sec-head--mid{ text-align:center; margin-inline:auto }
.sec-head--mid .kicker{ justify-content:center }
.sec-head--mid h2{ white-space:nowrap }
.faqsec{ text-align:center }
.faqsec .sec-head{ max-width:none; margin-inline:auto }
.faqsec .sec-head h2{ white-space:nowrap; font-size:clamp(1.72rem,5.2vw,4rem) }
.faqsec .faq{ margin-inline:auto; text-align:left }
/* ============================================================
V3 - RODAPE com icones nos contatos
============================================================ */
.flink{ display:inline-flex; align-items:center; gap:9px }
.flink svg{ width:15px; height:15px; flex:none; stroke:var(--lime); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; opacity:.9 }
/* ============================================================
V3 - HERO DE SUBPAGINA (metodo, experience, loja)
============================================================ */
.phero{ padding-top:clamp(148px,17vw,200px); padding-bottom:clamp(16px,2.4vw,28px) }
.phero h1{ font-size:clamp(2.7rem,6.6vw,5.8rem); margin:18px 0 0 }
.phero .lead{ max-width:640px; margin-top:22px }
.crumb{ font-family:var(--mono); font-size:.68rem; color:var(--mute-2); margin-bottom:18px; display:flex; gap:8px; align-items:center }
.crumb a{ color:var(--mute); transition:color .25s var(--e) }
.crumb a:hover{ color:var(--lime) }
/* ============================================================
V3 - PREVIA DO APP refocada (perfil + presenca do mes)
============================================================ */
.scr__meta{ display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:14px 0 12px }
.scr__mi{ background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:9px; padding:8px 10px }
.scr__mi b{ display:block; font-family:var(--mono); font-size:.5rem; color:var(--mute-2); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px }
.scr__mi span{ font-family:var(--mono); font-size:.74rem; color:var(--paper) }
.scr__wl{ font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:.6rem; letter-spacing:.2em; color:var(--mute-2); padding:4px 0 8px }
.scr__week{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; padding-bottom:14px }
.scr__day{ display:flex; flex-direction:column; align-items:center; gap:4px; font-family:var(--mono); font-size:.5rem; color:var(--mute-2) }
.scr__day i{
width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
border:1px solid var(--line-2); background:rgba(255,255,255,.03);
font-style:normal; font-size:.6rem; color:var(--mute-2);
}
.scr__day.is-ok i{ background:rgba(197,255,26,.14); border-color:rgba(197,255,26,.4); color:var(--lime) }
.scr__loc{ display:flex; align-items:center; gap:7px; border-top:1px solid var(--line-2); padding:11px 0 14px; font-family:var(--mono); font-size:.62rem; color:var(--mute) }
.scr__loc i{ width:6px; height:6px; border-radius:50%; background:var(--lime); flex:none }
/* ============================================================
V3 - AJUSTES FINOS
============================================================ */
/* Jordan alinhado mais pra baixo (a foto flutuava) */
/* contagem grande da conta ao vivo (pagina do metodo) */
.calc{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(12px,2vw,22px); margin-top:clamp(30px,4vw,44px); font-family:var(--mono) }
.calc__t{ font-size:clamp(.9rem,1.6vw,1.2rem); color:var(--mute) }
.calc__t b{ color:var(--lime); font-weight:700 }
.calc__eq{ font-size:clamp(1.4rem,2.4vw,2rem); color:var(--mute-2) }
.calc__r{ font-size:clamp(2.6rem,5vw,4rem); font-weight:700; color:var(--lime); line-height:1 }
.calc__lab{ font-size:.66rem; color:var(--mute-2); width:100% }
/* horarios clicaveis levando pro Google Meu Negocio */
a.slot__l{ transition:color .25s var(--e); border-bottom:1px solid transparent }
a.slot__l:hover{ color:var(--lime); border-bottom-color:rgba(197,255,26,.4) }
/* loja: segunda foto entra no hover (peca em uso) */
.prod__i{ position:relative }
.prod__i img + img{
position:absolute; inset:0; opacity:0;
transition:opacity .5s var(--e), transform .6s var(--e);
}
.prod--swap:hover .prod__i img + img,
.prod--swap.is-alt .prod__i img + img{ opacity:1 }
@media(prefers-reduced-motion:reduce){
.st{ opacity:1; animation:none }
.wall__track{ animation:none }
.rail--rev{ overflow-x:auto }
.pc__card{ transform:none }
}
/* ============================================================
V4 - SKETCH DO ARREMESSO (frames do arremesso.webm em sprite)
30 quadros numa folha 5x6. O scroll varre os quadros: descendo
ele arremessa, subindo ele volta. O fundo do video e preto puro,
entao `screen` recorta o traco sem precisar de canal alpha.
============================================================ */
/* D2: preso a LARGURA DO CONTAINER (a mesma da barra 60/40), nunca a vw.
Assim, em monitor grande, ele cresce junto com o conteudo em vez de
ficar perdido num canto. */
.shot{
/* a base do sketch encosta no topo da barra 60/40, como na referencia, e a
altura manda na largura (ele e quadrado). Tudo em %% do container, entao
em monitor grande ele acompanha o conteudo em vez de se perder. */
/* V8 (05/09): recalibrado contra a referencia do Jordan por medida, nao
por olho. Na referencia o vao das maos e 15% mais largo que o alto
(maos ate os ombros), e no sprite os bracos sao mais compridos: a
celula ganha 15% de largura (aspect-ratio 1.15/1) pra casar o vao sem
esmagar o traco, e a altura e a que poe a base da cabeca e dos ombros
(62% da celula) uns 35px acima da barra 60/40, com as maos 95px acima
do kicker. Mao esquerda em ~55% da largura, cotovelo direito na borda
do wrap, cabeca e ombros inteiros acima da barra. */
position:absolute; right:-4.2%; top:-17.4%;
height:126%; width:auto; aspect-ratio:1.15/1;
pointer-events:none; z-index:0;
background-image:url("../images/shot-sprite.webp");
background-size:500% 600%;
background-position:0% 0%;
mix-blend-mode:screen; opacity:.78;
filter:contrast(1.22) brightness(1.06);
/* o preto do sprite nunca e 0 perfeito depois do webp, e sob screen
a celula inteira viraria um retangulo tenue. A mascara suave apaga
a borda da caixa, independente do que sobrou de artefato. */
-webkit-mask-image:radial-gradient(closest-side, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
mask-image:radial-gradient(closest-side, #000 58%, rgba(0,0,0,.55) 82%, transparent 100%);
}
.shot::after{
content:''; position:absolute; inset:-14%;
background:radial-gradient(circle, rgba(3,199,63,.15), transparent 66%);
}
@media(max-width:1100px){ .shot{ display:none } }
/* ============================================================
V4 - HERO DE SUBPAGINA COM IMAGEM
============================================================ */
.phero--img .wrap{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(20px,3vw,48px); align-items:center }
.phero__t{ min-width:0 }
.phero__v{ position:relative; min-width:0 }
.phero__v img{ width:100%; height:auto; border-radius:var(--r) }
.phero__v::before{
content:''; position:absolute; inset:-10%; z-index:0;
background:radial-gradient(circle, rgba(3,199,63,.24), transparent 68%);
}
.phero__v img{ position:relative; z-index:1 }
@media(max-width:860px){
.phero--img .wrap{ grid-template-columns:1fr; text-align:center }
.phero--img .kicker{ justify-content:center }
.phero--img .lead{ margin-inline:auto }
.phero--img .crumb{ justify-content:center }
.phero__v{ order:-1; max-width:400px; margin-inline:auto }
}
/* experience: a foto principal e o fundo do hero */
.phero--bg{ position:relative; overflow:hidden }
.phero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none }
/* V9: a capa dos heros virou (variante -sm pro celular). O
e inline por padrao, entao sem display:block a altura 100%
da img nao resolve e o object-fit:cover para de cobrir a caixa. */
.phero__bg picture{ display:block; width:100%; height:100% }
.phero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 32% }
.phero__bg::after{
content:''; position:absolute; inset:0;
background:linear-gradient(95deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.8) 40%, rgba(5,5,5,.42) 72%, rgba(5,5,5,.3) 100%),
linear-gradient(to bottom, rgba(5,5,5,.6), rgba(5,5,5,0) 30%, var(--ink) 97%);
}
.phero--bg .wrap{ position:relative; z-index:1 }
/* no mobile a foto sai do fundo e vira uma faixa ACIMA do titulo, igual
ao hero da home e ao hero do metodo. Mesmo gesto nas tres paginas. */
@media(max-width:860px){
.phero--bg{
text-align:center; display:flex; flex-direction:column;
padding-top:76px; overflow:visible;
}
.phero--bg .kicker{ justify-content:center }
.phero--bg .lead{ margin-inline:auto }
.phero--bg .crumb{ justify-content:center }
.phero--bg .hero__cta{ justify-content:center }
.phero__bg{
position:relative; inset:auto; order:-1;
width:100%; aspect-ratio:16/10; overflow:hidden;
margin:0 auto clamp(20px,4vw,30px); border-radius:var(--r);
}
.phero__bg img{ object-position:center 30% }
/* V8: no hero da Experience a faixa 16/10 cobre a arte a 501px de largura;
86% poe o Joel (62% da arte) no centro da faixa, como no card da home */
.phero--xp .phero__bg img{ object-position:86% 30% }
.phero__bg::after{
background:linear-gradient(to bottom, rgba(5,5,5,.22) 0%, rgba(5,5,5,.05) 34%, rgba(5,5,5,.55) 82%, var(--ink) 100%);
}
}
/* ============================================================
V4 - MOBILE: todo botao centralizado
============================================================ */
@media(max-width:900px){
.hero__cta, .app-cta__cta, .metodo__cta, .close__cta{ justify-content:center }
.metodo__cta, .app-cta__cta{ display:flex; flex-wrap:wrap }
.dest__copy, .sec-head, .split__head, .rails > .wrap, .reviews-head{ text-align:center }
.dest__copy .kicker, .sec-head .kicker, .split__head .kicker,
.rails__lab, .rails > .wrap .kicker, .reviews-head .kicker{ justify-content:center }
/* D6: a nota do Google inteira centralizada, com o link caindo na 3a linha */
.reviews-head{ justify-content:center }
.reviews-head > div{ width:100% }
.gscore{ flex-direction:column; align-items:center; gap:10px }
.gscore .stars{ justify-content:center }
.gscore__l{ text-align:center }
.gscore__l a{ display:block; margin-top:4px }
.dest__copy .lead, .sec-head .lead{ margin-inline:auto }
.dest__copy > div{ display:flex; justify-content:center }
.xp__in .hero__cta, .tease__c .btn{ justify-content:center }
.tease__c{ align-items:center; text-align:center }
.tease__c .lead{ margin-inline:auto }
.tease__c .kicker{ justify-content:center }
.price .btn{ width:100% }
.vidwrap{ margin-inline:auto }
}
/* ============================================================
V4 - MOBILE: o que no desktop nasce do mouse, aqui nasce do scroll
O JS poe .is-hot quando o elemento entra na tela (so em touch).
============================================================ */
@media(hover:none){
.btn{ transition:transform .6s var(--e), box-shadow .6s var(--e), border-color .6s var(--e), color .6s var(--e) }
.btn .btn__ar{ transition:transform .6s var(--e) }
.btn.is-hot{ transform:translateY(-2px) }
.btn--lime.is-hot{ box-shadow:0 10px 40px rgba(197,255,26,.34) }
.btn--ghost.is-hot{ border-color:var(--lime); color:var(--lime) }
.btn.is-hot .btn__ar{ transform:translateX(4px) }
.plan{ transition:transform .7s var(--e), border-color .7s var(--e) }
.plan.is-hot{ transform:translateY(-4px) }
.plan.is-hot .plan__img img{ transform:scale(1.17) }
.plan--grupo.is-hot .plan__img img{ transform:scale(1.28) }
.card.is-hot{ border-color:rgba(197,255,26,.30); background:var(--ink-3) }
.gym.is-hot{ border-color:rgba(197,255,26,.32) }
.gym.is-hot .gym__go{ color:var(--lime) }
.prod.is-hot{ border-color:rgba(197,255,26,.34) }
.prod.is-hot .prod__a{ color:var(--lime) }
.mem.is-hot .mem__img img{ transform:scale(1.04) }
/* V7: as pecas do teaser da loja nao animam mais sozinhas no celular */
.scale__seg--core{ animation-duration:5s }
}
/* ============================================================
CARD 3 - AJUSTES FINAIS
============================================================ */
/* D3b: no desktop o card do Destaque se centraliza na coluna direita */
@media(min-width:901px){
.dest__copy{ text-align:left }
.dest__copy .kicker{ justify-content:flex-start }
.dest__copy .lead{ margin-inline:0 }
}
/* D12: hero do Experience com a foto em forca total, sem veu pesado */
.phero--bg .phero__bg img{ opacity:1 }
.phero--bg .phero__bg::after{
background:linear-gradient(95deg, rgba(5,5,5,.92) 0%, rgba(5,5,5,.66) 34%, rgba(5,5,5,.14) 62%, rgba(5,5,5,0) 100%),
linear-gradient(to bottom, rgba(5,5,5,.5), rgba(5,5,5,0) 26%, rgba(5,5,5,.35) 88%, var(--ink) 100%);
}
@media(max-width:860px){
.phero--bg .phero__bg::after{
background:linear-gradient(to bottom, rgba(5,5,5,.12) 0%, rgba(5,5,5,0) 40%, rgba(5,5,5,.4) 84%, var(--ink) 100%);
}
}
/* D11: "Um dia com o Joel" fica so com a linha verde em cima do video */
.vidsec--bare .sec-head{ margin-bottom:clamp(20px,2.6vw,30px) }
/* D7b: "Tres jeitos de entrar" numa linha so */
#treinos .sec-head h2{ white-space:nowrap }
@media(max-width:560px){ #treinos .sec-head h2{ white-space:normal } }
@media(hover:none){
.mem.is-hot .mem__img img{ transform:scale(1.065); filter:drop-shadow(0 22px 30px rgba(0,0,0,.68)) }
}
/* card 3: o hero do /metodo divide a linha com a imagem, entao o titulo
precisa de equilibrio de quebra (senao sobra um "É." orfao) e de um
corpo um pouco menor. */
.phero--img h1{ font-size:clamp(2rem,3.3vw,3.35rem); text-wrap:balance }
/* so no desktop: no mobile a imagem sobe pro topo em coluna unica, e essa
regra nao pode vazar pra la (ela vem depois no arquivo e venceria). */
@media(min-width:861px){ .phero--img .wrap{ grid-template-columns:1.18fr .82fr } }
.phero--img .lead{ text-wrap:pretty }
/* o hero do Experience ganha corpo, como na referencia */
.phero--bg{ min-height:min(86vh, 780px); display:flex; align-items:center }
.phero--bg > .wrap{ width:100% }
@media(max-width:860px){ .phero--bg{ min-height:0; display:flex } }
/* ============================================================
V5 - FAIXA PROMO (topo, fixa, com relogio real)
A lima e a luz da marca, entao a faixa e lima chapada com o
preto por cima: e o unico bloco do site que inverte, e e de
proposito, pra ela nao virar mais uma faixa escura no escuro.
============================================================ */
.promo{
position:fixed; inset:0 0 auto; z-index:60;
background:var(--lime); color:#050505;
box-shadow:0 1px 0 rgba(0,0,0,.35);
}
.promo[hidden]{ display:none }
.promo__in{
max-width:var(--wrap); margin-inline:auto; position:relative;
padding-inline:var(--pad); padding-right:calc(var(--pad) + 34px);
display:flex; align-items:center; min-width:0;
}
/* a faixa inteira e o alvo de toque: no celular nao sobra espaco pra um
botao separado, e um alvo largo vale mais que um link fino. */
.promo__link{
flex:1 1 auto; min-width:0; min-height:46px;
display:flex; align-items:center; gap:clamp(9px,1.5vw,16px);
}
.promo__off{
flex:none; font-family:var(--disp); font-weight:800; font-size:1.24rem;
letter-spacing:.02em; line-height:1;
background:#050505; color:var(--lime);
padding:6px 10px 5px; border-radius:var(--rs);
}
/* cor declarada, nunca herdada: existe um p{color:#d2d2d2} global e a faixa
e o unico bloco claro do site, entao heranca aqui e armadilha. */
.promo__t{ font-size:.86rem; line-height:1.3; min-width:0; color:#050505 }
.promo__t b{ font-weight:800; color:#050505 }
.promo__short{ display:none }
.promo__sub{ color:rgba(5,5,5,.62) }
.promo__clock{
flex:none; font-family:var(--mono); font-weight:700; font-size:.86rem;
letter-spacing:.02em; white-space:nowrap; color:#050505;
background:rgba(5,5,5,.1); border-radius:var(--rp); padding:5px 12px;
font-variant-numeric:tabular-nums;
}
.promo__go{
flex:none; margin-left:auto; font-family:var(--disp); font-weight:800;
text-transform:uppercase; letter-spacing:.11em; font-size:.86rem; white-space:nowrap;
box-shadow:inset 0 -1.5px 0 rgba(5,5,5,.38);
transition:box-shadow .25s var(--e);
}
.promo__x{
position:absolute; right:calc(var(--pad) - 12px); top:50%; translate:0 -50%;
width:40px; height:40px; border-radius:50%; color:#050505; font-size:.8rem;
display:grid; place-items:center; opacity:.5;
transition:opacity .25s var(--e), background .25s var(--e);
}
@media(hover:hover) and (pointer:fine){
.promo__link:hover .promo__go{ box-shadow:inset 0 -1.5px 0 #050505 }
.promo__x:hover{ opacity:1; background:rgba(5,5,5,.1) }
}
.promo__link:active{ scale:.995 }
.promo__x:active{ scale:.94 }
/* a nav desce a altura da faixa. --promo-h e escrito pelo JS. */
.nav{ top:var(--promo-h,0px) }
/* Celular: uma linha so. O texto encolhe, os segundos e o rotulo do CTA
somem, e quem recebe o toque e a faixa inteira. */
@media(max-width:860px){
.promo__in{ padding-right:calc(var(--pad) + 30px) }
.promo__link{ gap:9px; min-height:44px }
.promo__off{ font-size:.98rem; padding:4px 7px 3px }
.promo__t{ font-size:.76rem; flex:1 1 auto; min-width:0;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.promo__long,.promo__sub{ display:none }
.promo__short{ display:inline }
.promo__clock{ font-size:.72rem; padding:4px 9px }
.promo__s{ display:none }
.promo__go{ font-size:0; margin-left:0; box-shadow:none }
.promo__go span{ font-size:1rem }
.promo__x{ right:calc(var(--pad) - 14px); width:40px; height:40px }
}
/* ============================================================
V5 - TOGGLE DE DURACAO
============================================================ */
.dur{
display:flex; gap:6px; justify-content:center; flex-wrap:nowrap;
margin-bottom:12px; min-width:0;
overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.dur::-webkit-scrollbar{ display:none }
.dur__b{ flex:none }
.dur__b{
font-family:var(--disp); font-weight:700; text-transform:uppercase;
letter-spacing:.1em; font-size:.86rem; color:#a8a8a8;
min-height:44px; padding:10px 18px; border-radius:var(--rp);
border:1px solid var(--line); background:var(--ink-2);
display:inline-flex; align-items:center; gap:8px;
transition:color .28s var(--e), border-color .28s var(--e), background .28s var(--e);
}
.dur__b.is-on{ color:#050505; background:var(--lime); border-color:var(--lime) }
.dur__off{
font-family:var(--mono); font-weight:700; font-size:.7rem; letter-spacing:0;
color:var(--lime); background:var(--lime-dim); border-radius:var(--rp); padding:2px 7px;
transition:color .28s var(--e), background .28s var(--e);
}
.dur__b.is-on .dur__off{ color:var(--lime); background:rgba(5,5,5,.82) }
@media(hover:hover) and (pointer:fine){
.dur__b:not(.is-on):hover{ color:var(--paper); border-color:rgba(197,255,26,.34) }
}
.dur__b:active{ scale:.97 }
@media(max-width:520px){
.dur{ justify-content:flex-start }
.dur__b{ padding:10px 14px; font-size:.8rem }
}
.dur__note{
text-align:center; font-size:.78rem; color:var(--mute-2);
margin:0 auto clamp(26px,3vw,36px); max-width:52ch;
}
/* ============================================================
V5 - PRECO DENTRO DO CARD DE TREINO
============================================================ */
.plan__price{
margin:2px 0 18px; padding:16px 0 0; border-top:1px solid var(--line-2);
display:flex; flex-direction:column; gap:12px;
}
.plan__pl{
display:grid; grid-template-columns:1fr auto; align-items:baseline;
column-gap:12px; row-gap:1px;
}
.plan__pk{ font-size:.88rem; color:#c4c4c4; line-height:1.35; grid-column:1; grid-row:1 }
.plan__pk small{ display:block; font-size:.7rem; color:var(--mute-2); line-height:1.35 }
.plan__pv{
font-family:var(--mono); font-weight:700; font-size:1.24rem; color:var(--lime);
white-space:nowrap; grid-column:2; grid-row:1; font-variant-numeric:tabular-nums;
}
.plan__pu{
font-family:var(--body); font-size:.7rem; color:var(--mute-2);
grid-column:2; grid-row:2; text-align:right; line-height:1.3;
}
.plan__pw{
font-family:var(--mono); font-size:.74rem; color:var(--mute);
text-decoration:line-through; grid-column:1; grid-row:2;
align-self:start; padding-top:2px;
}
.plan__pw[hidden]{ display:none }
/* a lista solta a ancora da base: agora quem fecha o card e o botao */
.plan ul{ margin-top:0 }
.plan__cta{ margin-top:auto; padding-top:22px }
.plan__cta .btn{ width:100% }
.plans__foot{
text-align:center; font-size:.82rem; color:var(--mute-2);
margin-top:clamp(22px,2.6vw,30px);
}
/* ============================================================
V5 - FILTRO DE GINASIO NA AGENDA
============================================================ */
.filt{
display:flex; gap:8px; margin-bottom:clamp(20px,2.4vw,28px);
overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
min-width:0; padding-bottom:2px;
}
.filt::-webkit-scrollbar{ display:none }
.filt__b{
flex:none; font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
text-transform:uppercase; color:var(--mute); white-space:nowrap;
min-height:40px; padding:9px 16px; border-radius:var(--rp);
border:1px solid var(--line); background:var(--ink-2);
transition:color .28s var(--e), border-color .28s var(--e), background .28s var(--e);
}
.filt__b.is-on{ color:#050505; background:var(--lime); border-color:var(--lime) }
@media(hover:hover) and (pointer:fine){
.filt__b:not(.is-on):hover{ color:var(--paper); border-color:rgba(197,255,26,.34) }
}
.filt__b:active{ scale:.97 }
@media(min-width:861px){ .filt{ justify-content:center; overflow-x:visible } }
.day[hidden],.slot[hidden]{ display:none }
/* o filtro esconde dias, entao "primeiro da coluna" nao e :first-child: e o
primeiro VISIVEL. O JS numera com data-vis e a borda le esse numero. */
.day[data-vis="0"]{ border-top:none }
/* a agenda deixou de dividir espaco com o card de valores: vira uma faixa
larga de duas colunas no desktop, que e o que cabe cinco dias sem esticar. */
/* V8: o bloco (chips + agenda) e uma caixa do tamanho do conteudo, centrada;
o texto dentro dela segue alinhado a esquerda. No celular estreito o que
estourava a caixa era o rotulo do jogo da semana (mais largo que a tela):
ele desce pra linha de baixo (regra no bloco mobile) e a caixa encolhe. */
.days{ margin-bottom:clamp(34px,4vw,52px); width:max-content; max-width:100%; margin-inline:auto }
@media(min-width:861px){
.days{
display:grid; grid-template-columns:1fr 1fr;
column-gap:clamp(28px,4vw,60px); row-gap:0; align-content:start;
}
.day{ border-top:1px solid var(--line-2) }
.day[data-vis="1"]{ border-top:none }
}
/* ginasio sem horario: a descricao curta entra no lugar da lista */
.gym__d{ font-size:.84rem; color:#9c9c9c; line-height:1.55; margin-bottom:18px }
/* o ancora tem que parar ABAIXO da nav, e a nav agora carrega a faixa promo
em cima. --promo-h e escrito pelo JS, entao a folga acompanha sozinha. */
section[id]{ scroll-margin-top:calc(var(--promo-h,0px) + 96px) }
/* ============================================================
V6 - LOJA: produto, carrinho, checkout e a gaveta
Mecanica portada do Mercado Livre, identidade JB7 inteira:
preto de quadra a noite, lima como luz, Barlow no display,
JetBrains Mono em tudo que e numero.
============================================================ */
/* ---- carrinho na nav ---- */
.navcart{ position:relative; flex:none; width:44px; height:44px; display:grid; place-items:center; margin-left:4px }
.navcart svg{ width:23px; height:23px; fill:none; stroke:var(--paper); stroke-width:1.7; stroke-linejoin:round; stroke-linecap:round; transition:stroke .25s var(--e) }
.navcart__n{
position:absolute; top:4px; right:2px; min-width:17px; height:17px; padding:0 4px;
border-radius:var(--rp); background:var(--lime); color:#050505;
font-family:var(--mono); font-weight:700; font-size:.62rem; line-height:17px; text-align:center;
}
.navcart__n[hidden]{ display:none }
@media(hover:hover) and (pointer:fine){ .navcart:hover svg{ stroke:var(--lime) } }
.navcart:active{ scale:.94 }
/* no celular o carrinho encosta no burger, nunca boia no meio da barra:
os dois tinham margin-left:auto e dividiam a folga entre si. */
@media(max-width:860px){
.navcart{ margin-left:auto }
.nav .burger{ margin-left:0 }
}
/* ============================================================
PAGINA DE PRODUTO
============================================================ */
.pdp{ padding-top:clamp(104px,11vw,136px) }
.pdp__g{ display:grid; grid-template-columns:1fr .82fr; gap:clamp(24px,4vw,60px); align-items:start; margin-top:clamp(18px,2.4vw,30px) }
.pgal{ display:grid; grid-template-columns:74px 1fr; gap:14px; align-items:start }
.pgal__t{ display:flex; flex-direction:column; gap:10px; min-width:0 }
.pgal__t[hidden]{ display:none }
.pth{
width:74px; height:74px; flex:none; border-radius:var(--rs); overflow:hidden;
border:1px solid var(--line); background:var(--ink-2); padding:0;
transition:border-color .28s var(--e);
}
.pth img{ width:100%; height:100%; object-fit:cover; display:block }
.pth.is-on{ border-color:var(--lime) }
@media(hover:hover) and (pointer:fine){ .pth:not(.is-on):hover{ border-color:rgba(197,255,26,.4) } }
.pth:active{ scale:.96 }
.pgal__palco{
border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
background:var(--ink-2); aspect-ratio:1/1; position:relative;
}
.pgal__palco img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* a caixa de compra acompanha o scroll, como no ML */
.pbuy{ position:sticky; top:calc(var(--promo-h,0px) + 96px) }
.pbuy__marca{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute) }
.pbuy h1{ font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.06; margin:8px 0 6px }
.pbuy__prova{ font-size:.82rem; color:var(--mute); margin-bottom:20px }
.pbuy__preco{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line-2) }
.pbuy__v{ font-family:var(--mono); font-weight:700; font-size:clamp(1.6rem,2.8vw,2.1rem); color:var(--lime); font-variant-numeric:tabular-nums }
.pbuy__x{ font-size:.82rem; color:var(--mute) }
.pbuy__seg{ list-style:none; display:flex; flex-direction:column; gap:9px; padding:18px 0; border-bottom:1px solid var(--line-2) }
.pbuy__seg li{ font-size:.86rem; color:#a8a8a8; line-height:1.5; padding-left:20px; position:relative }
.pbuy__seg li::before{
content:''; position:absolute; left:0; top:8px; width:9px; height:9px;
background:var(--lime); clip-path:polygon(14% 44%,0 60%,39% 100%,100% 22%,84% 8%,37% 66%);
}
.pbuy__seg b{ color:var(--paper); font-weight:600 }
.pbuy__tam{ padding:20px 0 0 }
.pbuy__tam[hidden]{ display:none }
.pbuy__rot{ font-size:.88rem; color:#c4c4c4 }
.pbuy__rot b{ color:var(--paper) }
/* a medida do tamanho ESCOLHIDO. So aparece depois da escolha, e e
o que evita a troca: "G" muda de peca pra peca. */
.pbuy__med{ font-family:var(--mono); font-size:.74rem; color:var(--lime); margin-top:3px }
.pbuy__med[hidden]{ display:none }
.ptams{ display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-top:12px; min-width:0; padding-bottom:2px }
.ptams::-webkit-scrollbar{ display:none }
.ptam{
flex:none; min-width:52px; min-height:44px; padding:11px 14px;
border:1px solid var(--line); border-radius:var(--rs); background:var(--ink-2);
font-family:var(--disp); font-weight:700; font-size:.94rem; letter-spacing:.06em; color:#c4c4c4;
transition:color .25s var(--e), border-color .25s var(--e), background .25s var(--e);
}
.ptam.is-on{ background:var(--lime); border-color:var(--lime); color:#050505 }
@media(hover:hover) and (pointer:fine){ .ptam:not(.is-on):hover{ color:var(--paper); border-color:rgba(197,255,26,.4) } }
.ptam:active{ scale:.96 }
.pguia{ margin-top:14px }
.pguia summary{ font-size:.78rem; color:var(--mute); cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px; min-height:40px }
.pguia summary::-webkit-details-marker{ display:none }
.pguia summary::before{ content:'+'; font-family:var(--mono); color:var(--lime) }
.pguia[open] summary::before{ content:'\2212' }
.pguia p{ font-size:.82rem; color:#9c9c9c; line-height:1.6; padding:4px 0 0 16px }
.pbuy__qtd{ display:flex; align-items:center; gap:12px; padding:20px 0 4px }
.pbuy__qtd label{ font-size:.88rem; color:#c4c4c4 }
.pbuy__qtd select{
min-height:44px; padding:10px 14px; border-radius:var(--rs);
border:1px solid var(--line); background:var(--ink-2); color:var(--paper);
font-family:var(--mono); font-size:.9rem;
}
/* o aviso que substitui o botao ativo enquanto falta escolher */
.pbuy__aviso{ font-size:.8rem; color:var(--mint); margin:4px 0 12px }
.pbuy__aviso[hidden]{ display:none }
.pbuy__cta{ display:flex; flex-direction:column; gap:10px; margin-top:8px }
.pbuy__cta .btn{ width:100% }
.pbuy__cta .btn:disabled{ opacity:.4; pointer-events:none }
.pbuy__zap{ font-size:.8rem; color:var(--mute-2); margin-top:16px }
.pbuy__zap a{ color:var(--lime); border-bottom:1px solid transparent; transition:border-color .25s var(--e) }
@media(hover:hover) and (pointer:fine){ .pbuy__zap a:hover{ border-bottom-color:var(--lime) } }
.pdesc{
display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(24px,4vw,60px);
margin-top:clamp(48px,6vw,84px); padding-top:clamp(28px,3.4vw,44px); border-top:1px solid var(--line-2);
}
.pdesc h2{ font-size:clamp(1.2rem,2vw,1.5rem); margin-bottom:12px }
.pdesc p{ font-size:.95rem; color:#a8a8a8; line-height:1.75 }
.pspecs{ display:flex; flex-direction:column; gap:0 }
.pspec{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line-2); font-size:.86rem }
.pspec:first-child{ border-top:none }
.pspec dt{ color:var(--mute) }
.pspec dd{ color:#c4c4c4; text-align:right }
.pmais{ margin-top:clamp(56px,7vw,96px) }
.prod__v{ font-family:var(--mono); font-weight:700; font-size:.9rem; color:var(--lime); margin-top:4px }
@media(max-width:920px){
.pdp__g{ grid-template-columns:1fr; gap:26px }
.pbuy{ position:static }
.pdesc{ grid-template-columns:1fr; gap:22px }
}
@media(max-width:560px){
.pgal{ grid-template-columns:1fr; gap:10px }
.pgal__t{ flex-direction:row; overflow-x:auto; scrollbar-width:none; order:2 }
.pgal__t::-webkit-scrollbar{ display:none }
.pth{ width:62px; height:62px }
}
/* ============================================================
GAVETA "foi pro carrinho"
============================================================ */
.gv{ position:fixed; inset:0; z-index:70 }
.gv[hidden]{ display:none }
.gv__vidro{
position:absolute; inset:0; background:rgba(0,0,0,.6);
opacity:0; transition:opacity .26s var(--e);
}
.gv.is-on .gv__vidro{ opacity:1 }
.gv__p1{
position:absolute; inset:0 0 0 auto; width:min(430px,100%);
background:var(--ink-2); border-left:1px solid var(--line);
display:flex; flex-direction:column; padding:clamp(20px,3vw,28px);
translate:100% 0; transition:translate .3s cubic-bezier(.32,.72,0,1);
overflow-y:auto;
}
.gv.is-on .gv__p1{ translate:0 0 }
.gv__x{
position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
display:grid; place-items:center; color:var(--mute); font-size:.85rem;
transition:color .25s var(--e), background .25s var(--e);
}
@media(hover:hover) and (pointer:fine){ .gv__x:hover{ color:var(--paper); background:rgba(255,255,255,.06) } }
.gv__top{ display:flex; gap:14px; align-items:center; padding-right:44px }
.gv__mini{ position:relative; flex:none; width:64px; height:64px; border-radius:var(--rs); overflow:hidden; background:var(--ink) }
.gv__mini img{ width:100%; height:100%; object-fit:cover; display:block }
.gv__mini i{
position:absolute; right:-4px; bottom:-4px; width:22px; height:22px; border-radius:50%;
background:var(--lime); color:#050505; display:grid; place-items:center;
font-size:.7rem; font-style:normal; font-weight:700; border:2px solid var(--ink-2);
}
.gv__ok{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.92rem; color:var(--lime) }
.gv__nome{ font-size:.95rem; color:var(--paper); margin-top:2px; line-height:1.3 }
.gv__var{ font-family:var(--mono); font-size:.74rem; color:var(--mute); margin-top:3px }
/* o argumento do cross-sell e verdadeiro: o Joel posta no correio,
entao duas pecas viajam numa caixa so. Nao e empurrao, e fato. */
.gv__frete{
margin:20px 0 16px; padding:13px 15px; border-radius:var(--rs);
background:rgba(197,255,26,.09); border:1px solid rgba(197,255,26,.22);
font-size:.82rem; line-height:1.55; color:#c8c8c8;
}
.gv__frete b{ color:var(--lime); font-weight:700 }
.gv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.gv__p{ display:flex; flex-direction:column; border:1px solid var(--line-2); border-radius:var(--rs); overflow:hidden; background:var(--ink); transition:border-color .25s var(--e) }
@media(hover:hover) and (pointer:fine){ .gv__p:hover{ border-color:rgba(197,255,26,.34) } }
.gv__p:active{ scale:.98 }
.gv__pi{ display:block; aspect-ratio:1/1; overflow:hidden; background:var(--ink-3) }
.gv__pi img{ width:100%; height:100%; object-fit:cover; display:block }
.gv__pn{ font-size:.78rem; color:#c4c4c4; padding:9px 10px 0; line-height:1.35 }
.gv__pv{ font-family:var(--mono); font-weight:700; font-size:.82rem; color:var(--lime); padding:4px 10px 10px }
.gv__rod{ margin-top:auto; padding-top:20px; display:flex; flex-direction:column; gap:9px }
.gv__rod .btn{ width:100% }
/* ============================================================
CARRINHO
============================================================ */
.cart{ padding-top:clamp(104px,11vw,136px) }
.cart .sec-head{ text-align:left; margin-inline:0; margin-bottom:clamp(22px,3vw,32px) }
.cart .sec-head .kicker{ justify-content:flex-start }
.cart__toast{
display:flex; align-items:center; gap:14px; flex-wrap:wrap;
padding:13px 16px; margin-bottom:18px; border-radius:var(--rs);
background:var(--ink-2); border:1px solid var(--line); font-size:.86rem; color:#c4c4c4;
}
.cart__toast[hidden]{ display:none }
.cart__toast button{
font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.11em;
font-size:.82rem; color:var(--lime); min-height:40px; padding:0 4px;
box-shadow:inset 0 -1.5px 0 rgba(197,255,26,.4); transition:box-shadow .25s var(--e);
}
@media(hover:hover) and (pointer:fine){ .cart__toast button:hover{ box-shadow:inset 0 -1.5px 0 var(--lime) } }
.cart__g{ display:grid; grid-template-columns:1fr .46fr; gap:clamp(20px,3vw,36px); align-items:start }
.cart__vazio{ padding:clamp(28px,4vw,44px); border:1px solid var(--line); border-radius:var(--r); background:var(--ink-2); text-align:center }
.cart__vazio[hidden]{ display:none }
.cart__vazio p{ font-size:.94rem; color:#a8a8a8; margin-bottom:6px }
.cart__vazio b{ color:var(--paper) }
.cart__vazio .btn{ margin-top:16px }
.cart__lista[hidden]{ display:none }
.cli{ display:grid; grid-template-columns:88px 1fr auto; gap:16px; align-items:start; padding:18px 0; border-top:1px solid var(--line-2) }
.cli:first-child{ border-top:none; padding-top:0 }
.cli__i{ display:block; width:88px; aspect-ratio:1/1; border-radius:var(--rs); overflow:hidden; background:var(--ink-2); border:1px solid var(--line-2) }
.cli__i img{ width:100%; height:100%; object-fit:cover; display:block }
.cli__b{ min-width:0 }
.cli__n{ display:block; font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:1.06rem; color:var(--paper) }
@media(hover:hover) and (pointer:fine){ .cli__n:hover{ color:var(--lime) } }
/* a variacao escolhida fica VISIVEL no carrinho, em destaque.
Terceira confirmacao do tamanho, e e o que zera troca por engano. */
.cli__v{ font-family:var(--mono); font-size:.76rem; color:var(--lime); margin-top:5px }
.cli__q{ display:flex; align-items:center; gap:2px; margin-top:12px }
.cli__q button{
width:34px; height:38px; border:1px solid var(--line); background:var(--ink-2); color:#c4c4c4;
font-family:var(--mono); font-size:.95rem; transition:color .22s var(--e), border-color .22s var(--e);
}
.cli__q button:first-of-type{ border-radius:var(--rs) 0 0 var(--rs) }
.cli__q span{
min-width:42px; height:38px; display:grid; place-items:center;
border-block:1px solid var(--line); font-family:var(--mono); font-size:.88rem; color:var(--paper);
}
.cli__q [data-mais]{ border-radius:0 var(--rs) var(--rs) 0 }
@media(hover:hover) and (pointer:fine){ .cli__q button:hover{ color:var(--lime); border-color:rgba(197,255,26,.4) } }
.cli__q button:active{ scale:.94 }
.cli__x{
width:auto !important; border:none !important; background:none !important;
margin-left:12px; padding:0 6px !important; font-family:var(--body) !important;
font-size:.78rem !important; color:var(--mute-2) !important; min-height:40px;
}
@media(hover:hover) and (pointer:fine){ .cli__x:hover{ color:#ff6b6b !important } }
.cli__p{ font-family:var(--mono); font-weight:700; font-size:1.02rem; color:var(--paper); white-space:nowrap; font-variant-numeric:tabular-nums }
.cart__res,.ck__res{
position:sticky; top:calc(var(--promo-h,0px) + 96px);
background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r);
padding:clamp(20px,2.6vw,28px);
}
.cart__res[hidden]{ display:none }
.cart__res h2,.ck__res h2{ font-size:1.1rem; margin-bottom:16px }
.cres__l{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; padding:10px 0; font-size:.86rem; color:#a8a8a8; border-top:1px solid var(--line-2) }
.cres__l:first-of-type{ border-top:none }
.cres__l span:last-child{ color:#c4c4c4; font-family:var(--mono); font-size:.86rem; text-align:right }
.cres__t{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:15px 0 4px; margin-top:6px; border-top:1px solid var(--line) }
.cres__t span:first-child{ font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:1rem; color:var(--paper) }
.cres__t span:last-child{ font-family:var(--mono); font-weight:700; font-size:1.3rem; color:var(--lime); font-variant-numeric:tabular-nums }
/* o resumo diz o que a pessoa GANHOU, nao so o que paga */
.cres__eco{ font-size:.8rem; color:var(--mint); line-height:1.5; margin:10px 0 2px }
.cres__eco[hidden]{ display:none }
.cart__res .btn,.ck__res .btn{ width:100%; margin-top:18px }
.cres__nota{ font-size:.75rem; color:var(--mute-2); line-height:1.55; margin-top:12px; text-align:center }
.ok{ color:var(--lime) }
.cres__l s{ color:var(--mute-2) }
@media(max-width:900px){ .cart__g{ grid-template-columns:1fr } .cart__res,.ck__res{ position:static } }
@media(max-width:560px){
.cli{ grid-template-columns:70px 1fr; gap:12px }
.cli__i{ width:70px }
.cli__p{ grid-column:2; margin-top:10px; font-size:.95rem }
}
/* ============================================================
CHECKOUT: uma pagina, cabecalho decapitado
Sem menu, sem busca, sem carrinho. Nenhuma porta de saida
na tela onde a pessoa paga. Foi o padrao do Mercado Livre.
============================================================ */
.ckhead{ border-bottom:1px solid var(--line); background:var(--ink) }
.ckhead .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px }
.ckhead .wrap > a:first-child{ display:inline-flex; align-items:center; min-height:44px }
.ckhead img{ height:clamp(30px,3vw,38px); width:auto }
.ckhead__z{ font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); min-height:40px; display:inline-flex; align-items:center }
@media(hover:hover) and (pointer:fine){ .ckhead__z:hover{ color:var(--lime) } }
.ck{ padding-block:clamp(30px,4vw,52px) }
.ck__t{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:clamp(22px,3vw,32px) }
.ck__g{ display:grid; grid-template-columns:1fr .5fr; gap:clamp(20px,3vw,36px); align-items:start }
.ck__col{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.kbox{ background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(18px,2.4vw,26px) }
.kbox h2{ font-size:1.05rem; margin-bottom:16px }
.kbox__nota{ font-size:.76rem; color:var(--mute-2); line-height:1.55; margin-top:14px }
.kseg{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.kseg__b{
display:block; padding:14px 16px; border:1px solid var(--line); border-radius:var(--rs);
background:var(--ink); cursor:pointer; transition:border-color .25s var(--e), background .25s var(--e);
}
.kseg__b input{ position:absolute; opacity:0; width:0; height:0 }
.kseg__b b{ display:block; font-size:.92rem; color:var(--paper); font-weight:600 }
.kseg__b small{ display:block; font-size:.74rem; color:var(--mute-2); margin-top:3px; line-height:1.4 }
.kseg__b.is-on{ border-color:var(--lime); background:rgba(197,255,26,.07) }
.kseg__b.is-on b{ color:var(--lime) }
.kseg__b:focus-within{ outline:2px solid var(--lime); outline-offset:2px }
.kfields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px }
.kfields[hidden]{ display:none }
.kf{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.kf--wide{ grid-column:1 / -1 }
.kf span{ font-size:.76rem; color:var(--mute); letter-spacing:.02em }
.kf input,.kf select{
min-height:46px; padding:11px 14px; border-radius:var(--rs);
border:1px solid var(--line); background:var(--ink); color:var(--paper);
font-family:var(--body); font-size:.92rem; width:100%;
transition:border-color .25s var(--e);
}
.kf input:focus,.kf select:focus{ outline:none; border-color:var(--lime) }
.kf input::placeholder{ color:var(--mute-2) }
.kpay{ display:flex; flex-direction:column; gap:10px }
.kpay__o{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--rs); background:var(--ink); cursor:pointer; transition:border-color .25s var(--e) }
.kpay__o input{ accent-color:var(--lime); width:18px; height:18px; flex:none }
.kpay__o b{ display:block; font-size:.92rem; color:var(--paper); font-weight:600 }
.kpay__o small{ display:block; font-size:.74rem; color:var(--mute-2); margin-top:2px }
.kpay__o:has(input:checked){ border-color:var(--lime) }
.kpay__o:focus-within{ outline:2px solid var(--lime); outline-offset:2px }
.kitens{ display:flex; flex-direction:column; gap:12px; padding-bottom:16px; margin-bottom:6px; border-bottom:1px solid var(--line-2) }
.kit{ display:grid; grid-template-columns:48px 1fr auto; gap:11px; align-items:center }
.kit__i{ display:block; width:48px; height:48px; border-radius:var(--rs); overflow:hidden; background:var(--ink) }
.kit__i img{ width:100%; height:100%; object-fit:cover; display:block }
.kit__b{ min-width:0 }
.kit__b b{ display:block; font-size:.84rem; color:#c4c4c4; font-weight:500; line-height:1.3 }
.kit__b small{ display:block; font-family:var(--mono); font-size:.7rem; color:var(--mute-2); margin-top:2px }
.kit__p{ font-family:var(--mono); font-size:.84rem; color:var(--paper); white-space:nowrap }
.ck__ok{ text-align:center; max-width:560px; margin:clamp(30px,6vw,70px) auto }
.ck__ok[hidden]{ display:none }
.ck__okic{
width:64px; height:64px; margin:0 auto 22px; border-radius:50%;
background:var(--lime); color:#050505; display:grid; place-items:center; font-size:1.6rem; font-weight:700;
}
.ck__ok h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:14px }
.ck__ok .lead{ margin-bottom:26px }
@media(max-width:900px){ .ck__g{ grid-template-columns:1fr } }
@media(max-width:560px){
.kseg{ grid-template-columns:1fr }
.kfields{ grid-template-columns:1fr }
.kf--wide{ grid-column:auto }
}
/* ============================================================
V7 - RODADA DO CARD "Alteracoes Site JB7" (04/09/2026)
Tudo que e novo desta rodada mora aqui embaixo. Regra de
desktop nasce dentro de min-width; regra de celular, de max-width.
============================================================ */
/* ---- 1. header some ao descer, volta ao subir (padrao AGIBEM) ----
A classe hd-gone vive no . A faixa promo e a nav sobem juntas;
--hd-off e a folga que as barras que travam no topo (.stick) usam:
promo + nav quando o header esta na tela, zero quando ele saiu. */
html{ --hd-off:calc(var(--promo-h,0px) + var(--nav-h,78px)) }
html.hd-gone{ --hd-off:0px }
.nav{ transition:background .4s var(--e), backdrop-filter .4s var(--e), border-color .4s var(--e), transform .45s var(--e) }
.promo{ transition:transform .45s var(--e) }
html.hd-gone .nav{ transform:translateY(calc(-100% - var(--promo-h,0px))) }
html.hd-gone .promo{ transform:translateY(-100%) }
/* o burger volta pra direita: o carrinho (quando existe) leva a folga e
o burger encosta nele; sem carrinho, o proprio burger leva a folga. */
@media(max-width:860px){
.nav .burger{ margin-left:auto }
.navcart{ margin-left:auto }
.navcart ~ .burger{ margin-left:0 }
}
/* ---- barras que travam no topo: toggle de pacote (home) e filtro da loja ----
Trava com respiro do topo e acompanha o header quando ele some. So
background e sombra mudam ao travar: o padding e fixo pra nada pular. */
.stick{
position:sticky; top:calc(var(--hd-off,0px) + 12px); z-index:30;
padding:6px; border-radius:var(--rp);
transition:top .45s var(--e), background .3s var(--e), box-shadow .3s var(--e);
}
.stick.is-stuck{
background:rgba(5,5,5,.74); backdrop-filter:blur(14px) saturate(1.2);
box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}
@media(max-width:400px){
.stick{ padding:4px }
.dur__b{ padding:10px 12px }
}
/* ---- 4. "Comecou aqui": a foto do Joel inteira em cima, e os dois
trilhos correndo por cima da base dela, sobre o fundo escuro ---- */
.rails__band{ padding-block:0 }
.rails__pic{
position:relative; z-index:0; width:100%; max-width:1600px; margin-inline:auto;
aspect-ratio:1920/800; overflow:hidden;
}
.rails__pic img{
width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
-webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}
.rails__rows{ position:relative; z-index:1; margin-top:-6.5% }
.rails__band .rails__lab{ margin:12px 0 8px }
@media(max-width:700px){
.rails__pic{ aspect-ratio:1/0.9 }
.rails__pic img{ object-position:47% 28% }
.rails__rows{ margin-top:-13% }
}
/* ---- 5. parede de fotos mais alta (30 fotos, 6 por coluna) ---- */
.wall{ height:clamp(560px,60vw,780px) }
@media(max-width:700px){ .wall{ height:120vw } }
/* ---- 7. horarios: no celular o bloco centraliza; o conteudo segue a esquerda ---- */
@media(max-width:860px){
.filt{ width:max-content; max-width:100%; margin-inline:auto }
/* coluna, nao wrap: a largura intrinseca do flex com wrap soma as duas
partes na mesma linha, e e ela que dita a caixa max-content da agenda */
.slot--game{ flex-direction:column; align-items:flex-start; gap:2px }
}
/* ---- 8. equipe: respiro vertical entre os tres so no celular ---- */
@media(max-width:900px){
.team{ row-gap:clamp(64px,16vw,90px) }
}
/* V8: a figura do Joel sai 12% acima da moldura, entao a distancia do texto
ate a moldura tem que pagar esse estouro mais ~45px de ar. O estouro e
proporcional a largura da coluna (3 colunas no desktop, 2 ate 900px e 1
abaixo de 536px, pela grade auto-fit de 240px), por isso tres regras. */
#equipe .sec-head{ margin-bottom:92px }
@media(max-width:900px){ #equipe .sec-head{ margin-bottom:calc(6vw + 42px) } }
@media(max-width:535px){ #equipe .sec-head{ margin-bottom:calc(12vw + 40px) } }
/* ---- 9. experience na home: a arte fecha o card e os botoes sentam sobre ela ---- */
.xp--home{ overflow:hidden }
.xp--home .xp__art{ position:absolute; inset:0 0 0 44%; z-index:0; pointer-events:none }
/* os tres atletas moram entre 46% e 78% da largura da arte: o corte mira ali */
.xp--home .xp__art img{
width:100%; height:100%; object-fit:cover; object-position:60% 30%; display:block;
-webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 26%, #000 52%);
mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 26%, #000 52%);
}
.xp--home .xp__in{ max-width:600px; padding-bottom:26px }
.xp--home .xp__cta{
position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px;
padding:0 clamp(30px,5vw,72px) clamp(30px,5vw,72px);
}
@media(max-width:860px){
.xp--home{ display:flex; flex-direction:column }
.xp--home .xp__in{ padding-bottom:0; text-align:center; max-width:none }
.xp--home .xp__in .kicker{ justify-content:center }
.xp--home .xp__in .lead{ margin-inline:auto }
.xp--home .xp__art{ position:relative; inset:auto; aspect-ratio:1/0.92; margin-top:-6px }
.xp--home .xp__art img{
/* V8: o trio mora em 46-78% da arte, Joel em 62%; com a caixa de 335px
e a arte coberta a 739px, 72% poe o Joel no centro da caixa */
object-position:72% 24%;
-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
mask-image:linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
}
.xp--home .xp__cta{ flex-direction:column; align-items:center; margin-top:-150px; padding:0 22px 26px }
.xp--home .xp__cta .btn{ width:min(100%,320px) }
}
/* ---- 11. loja: capa, vitrine com preco no card e filtro por tipo ---- */
.phero--shop{ min-height:min(72vh,660px) }
.phero--shop .phero__bg img{ object-position:center 40% }
#shopfilt{ margin-bottom:clamp(18px,2.4vw,28px) }
.shop--nike{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px }
@media(max-width:600px){ .shop--nike{ grid-template-columns:1fr 1fr; gap:10px } }
.shop--nike .prod{
border-radius:var(--r);
transition:border-color .35s var(--e), transform .35s var(--e), opacity .5s var(--e), filter .5s var(--e);
}
.shop--nike .prod__b{ padding:14px 14px 16px }
.shop--nike .prod__n{ font-size:1.02rem }
.prod__k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute-2); margin-top:4px }
.shop--nike .prod__v{ margin-top:8px; font-size:.98rem }
/* o filtro nao esconde: escurece o que nao e do tipo escolhido */
.shop--nike.is-filt .prod:not(.is-match){ opacity:.22; filter:saturate(.25) brightness(.65) }
.shop--nike.is-filt .prod.is-match{ border-color:rgba(197,255,26,.3) }
/* ---- 12. rodape: no celular vira cartao de visita ---- */
.foot__social{ display:flex; gap:12px; margin-top:22px }
.foot__social a{
width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
border:1px solid rgba(197,255,26,.32); background:rgba(197,255,26,.06); color:var(--lime);
transition:background .3s var(--e), color .3s var(--e), transform .3s var(--e), border-color .3s var(--e);
}
.foot__social svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
@media(hover:hover) and (pointer:fine){
.foot__social a:hover{ background:var(--lime); color:#050505; border-color:var(--lime); transform:translateY(-2px) }
}
.foot__social a:active{ scale:.96 }
/* .foot ul (elemento com ancestral) vence uma classe solta: por isso a
classe vem qualificada, senao os enderecos aparecem no desktop. */
.foot .foot__where{ display:none }
@media(max-width:600px){
.foot{ padding-block:54px 40px }
.foot__g{ grid-template-columns:1fr; gap:0; margin-bottom:30px }
.foot__col{ display:none }
.foot__brand{ display:flex; flex-direction:column; align-items:center; text-align:center }
.foot__logo img{ height:34px; margin-bottom:18px }
.foot__tag{ max-width:30ch; font-size:.92rem; color:#b4b4b4 }
.foot__social{ justify-content:center; gap:16px; margin-top:26px }
.foot__social a{ width:60px; height:60px }
.foot__social svg{ width:27px; height:27px }
/* uma coluna do tamanho do endereco mais largo, centralizada: os dois
pinos dividem a mesma margem esquerda em vez de cada um se centrar */
.foot .foot__where{
display:grid; grid-template-columns:max-content; justify-content:center; row-gap:14px;
list-style:none; margin-top:30px; padding-top:26px; border-top:1px solid var(--line-2); width:100%;
}
.foot .foot__where li{ text-align:left }
.foot__where .flink{ display:flex; font-size:.86rem; color:#b4b4b4; text-align:left; align-items:flex-start; line-height:1.45 }
.foot__where .flink svg{ margin-top:5px }
.foot__where b{ display:block; font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.94rem; color:var(--paper) }
.foot__bot{ flex-direction:column; justify-content:center; gap:14px; text-align:center }
}
/* ---- 13. carrossel de videos: o segundo deixa a borda a mostra ---- */
.vids{ max-width:1040px; margin-inline:auto }
.vids__t{
position:relative; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:4px 0 6px; min-width:0;
}
.vids__t::-webkit-scrollbar{ display:none }
.vids__t .vid{ flex:0 0 88%; scroll-snap-align:start }
.vids__t .vid:last-child{ scroll-snap-align:end }
.vids__nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px }
.vids__ar{ width:52px; height:48px; display:grid; place-items:center; border-radius:var(--rp); transition:transform .3s var(--e) }
.vids__ar i{
display:block; width:32px; height:36px; background:var(--lime);
-webkit-mask:url('../images/marks/arrow_05.webp') no-repeat center/contain;
mask:url('../images/marks/arrow_05.webp') no-repeat center/contain;
}
.vids__ar--prev i{ transform:scaleX(-1) }
@media(hover:hover) and (pointer:fine){
.vids__ar--next:hover{ transform:translateX(3px) }
.vids__ar--prev:hover{ transform:translateX(-3px) }
}
.vids__ar:active{ scale:.94 }
.vids__dots{ display:flex; gap:6px }
.vids__dots button{ width:40px; height:44px; display:grid; place-items:center }
.vids__dots button::before{
content:''; display:block; width:34px; height:3px; border-radius:99px;
background:rgba(255,255,255,.18); transform:scaleX(.7);
transition:background .3s var(--e), transform .3s var(--e);
}
.vids__dots button.is-on::before{ background:var(--lime); transform:none }
@media(max-width:700px){ .vids__t{ gap:10px } .vids__t .vid{ flex-basis:86% } }
/* ---- 14. pagina do metodo: a segunda secao vira o hero, com a foto no lugar do boneco ---- */
.split--hero{ padding-top:calc(var(--promo-h,0px) + clamp(112px,12vw,150px)) }
.split--hero .split__head--img{
max-width:none; display:grid; grid-template-columns:1.08fr .92fr; align-items:end;
gap:clamp(20px,4vw,56px);
}
.split--hero h1{ font-size:clamp(2.3rem,5.4vw,4.4rem); font-weight:800; letter-spacing:-.015em; margin:0 }
.split--hero h1 .a{ color:var(--mute-2) }
.split--hero h1 .b{ color:var(--paper) }
.split__art{ position:relative; min-width:0; z-index:1 }
.split__art::before{ content:''; position:absolute; inset:-8% -6% -14%; z-index:0; background:radial-gradient(circle, rgba(3,199,63,.22), transparent 66%) }
.split__art img{ position:relative; z-index:1; width:100%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)) }
@media(max-width:860px){
.split--hero .split__head--img{ grid-template-columns:1fr; gap:10px; text-align:center }
.split__art{ order:-1; max-width:420px; margin-inline:auto; width:100% }
.app-cta__c{ text-align:center }
.app-cta__c .kicker{ justify-content:center }
.app-cta__c .lead{ margin-inline:auto }
}
/* ---- 15. experience: o card "jogador ensina jogador" com a arte nova saindo da moldura ---- */
.xp--team{
overflow:visible; display:grid; grid-template-columns:1.06fr .94fr; align-items:end;
background:linear-gradient(160deg,var(--ink-2),var(--ink)); border-color:var(--line);
}
.xp--team .xp__in{ max-width:none; padding-right:0 }
.xp--team .xp__art{ position:relative; z-index:1; align-self:end; margin:0 3% 0 0; pointer-events:none }
.xp--team .xp__art img{ width:100%; height:auto; display:block; filter:drop-shadow(0 22px 34px rgba(0,0,0,.6)) }
@media(max-width:860px){
.xp--team{
display:flex; flex-direction:column; align-items:center; text-align:center;
padding:0 clamp(22px,5vw,40px) clamp(30px,6vw,40px);
}
.xp--team .xp__in{ display:contents }
.xp--team .kicker{ order:-2; justify-content:center; padding-top:26px }
.xp--team .xp__art{ order:-1; width:min(88%,380px); margin:14px auto -16% }
.xp--team h2{ position:relative; z-index:2; margin:0 0 14px; text-shadow:0 2px 24px rgba(0,0,0,.9) }
.xp--team .lead{ margin:0 auto 22px }
.xp--team .hero__cta{ margin:0 }
}
/* ---- flow like water: a superficie d'agua (canvas criado pelo main.js) ---- */
.ripple{
position:fixed; inset:0; z-index:30; width:100%; height:100%; display:block;
pointer-events:none; opacity:var(--ripple-op,.10);
}