/* ============================================================ ABERTO DO MADEIRA — Design System Tênis + Beach Tennis + Amazônia | Porto Velho/RO ============================================================ */ :root{ /* Paleta — quadra de tênis + areia de beach tennis + noite amazônica */ --court-900:#07160f; --court-800:#0b2016; --court-700:#0f2c1e; --court-600:#154028; --lime:#f86000; --lime-soft:#ffb066; --sand:#f6e3c2; --coral:#ff6b4a; --coral-deep:#e64a2e; --sky:#22c1dc; --gold:#ffcf5c; --white:#ffffff; --ink:#0c1a12; --muted:#a9c2b3; --glass:rgba(255,255,255,.06); --glass-border:rgba(255,255,255,.14); --font-head:'Poppins',sans-serif; --font-body:'Inter',sans-serif; --container:1180px; --radius-lg:28px; --radius-md:18px; --radius-sm:12px; --ease:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box;} /* overflow-x:hidden precisa estar no E no — em alguns navegadores de celular (principalmente Safari/iOS) é o que rola horizontalmente, não o ; com só um dos dois, qualquer elemento que vaze da tela (ex: muitos pontinhos de paginação) deixa a página inteira "arrastável" pro lado, e botões fixos (WhatsApp, setas de subir/descer) só aparecem se puxar a tela. */ html{scroll-behavior:smooth; overflow-x:hidden; max-width:100%;} body{ margin:0; font-family:var(--font-body); background:var(--court-900); color:var(--white); overflow-x:hidden; max-width:100%; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--font-head);margin:0 0 .5em;line-height:1.1;} p{line-height:1.7;color:var(--muted);margin:0 0 1em;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{margin:0;padding:0;list-style:none;} button{font-family:inherit;cursor:pointer;} ::selection{background:var(--lime);color:var(--ink);} .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; } /* Container mais largo — usado pela seção TV Aberto do Madeira para dar mais espaço ao vídeo principal e aos blocos de transmissão. */ .container--wide{max-width:1400px;} .section{ position:relative; padding:110px 0; } .section--tight{padding:70px 0;} /* Espaço no topo/embaixo configurável por seção (painel > Seções da home). O PHP grava --sec-pt/--sec-pb inline com o valor definido no painel (ou o padrão automático, que já é mais enxuto logo após o banner/faixa). No mobile, o espaço encolhe proporcionalmente sozinho — sem precisar de um campo separado para celular. Fica depois de .section--tight de propósito, para vencer o padding fixo dela quando o valor for diferente. */ .section.section-dyn{ padding-top:var(--sec-pt, 110px); padding-bottom:var(--sec-pb, 110px); } @media (max-width:640px){ .section.section-dyn{ padding-top:calc(var(--sec-pt, 110px) * 0.6); padding-bottom:calc(var(--sec-pb, 110px) * 0.6); } } .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--court-900); background:var(--lime); padding:8px 16px; border-radius:999px; margin-bottom:22px; } .eyebrow--ghost{ color:var(--lime); background:rgba(248,96,0,.12); border:1px solid rgba(248,96,0,.35); } .section-head{ max-width:680px; margin:0 auto 56px; text-align:center; } .section-head h2{ font-size:clamp(2rem,4.2vw,3rem); font-weight:800; } .section-head p{font-size:1.08rem;} /* Título que deve ficar sempre em uma única linha (ex: "Apoio & Patrocínio") — libera a largura máxima e reduz um pouco o tamanho da fonte em vez de quebrar. */ .section-head--nowrap{max-width:1040px;} @media (min-width:640px){ .section-head--nowrap h2{white-space:nowrap; font-size:clamp(1.4rem,3vw,2.5rem);} } .grad-text{ color:var(--lime); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:.95rem; padding:16px 30px; border-radius:999px; border:none; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, color .3s ease; white-space:nowrap; } .btn-primary{ background:linear-gradient(100deg,var(--lime),var(--lime-soft)); color:var(--ink); box-shadow:0 10px 30px -8px rgba(248,96,0,.55); } .btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 40px -8px rgba(248,96,0,.7);} .btn-outline{ background:transparent; color:var(--white); border:1.5px solid var(--glass-border); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .btn-outline:hover{border-color:var(--lime); color:var(--lime); transform:translateY(-3px);} .hero-poster-cta .btn-outline{border-color:var(--lime); color:var(--lime);} .hero-poster-cta .btn-outline:hover{background:var(--lime); color:var(--ink);} .btn-coral{ background:linear-gradient(100deg,var(--coral),var(--coral-deep)); color:var(--white); box-shadow:0 10px 30px -8px rgba(255,107,74,.55); } .btn-coral:hover{transform:translateY(-3px) scale(1.02);} .btn-block{width:100%;} .btn-sm{padding:11px 22px;font-size:.85rem;} /* ---------- Header ---------- */ .site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:background .4s ease, padding .4s ease, box-shadow .4s ease; } .site-header.is-scrolled{ padding:10px 0; background:rgba(7,22,15,.82); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); box-shadow:0 10px 30px rgba(0,0,0,.35); border-bottom:1px solid var(--glass-border); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-head); font-weight:800; font-size:1.05rem; letter-spacing:.01em; } .brand-badge{ width:44px;height:44px; border-radius:14px; display:grid;place-items:center; background:linear-gradient(145deg,var(--lime),var(--sky)); box-shadow:0 8px 20px -6px rgba(248,96,0,.6); flex:none; overflow:hidden; } .brand-badge svg{width:26px;height:26px;} .brand-badge img{width:100%;height:100%;object-fit:cover;display:block;} .brand small{display:block;font-family:var(--font-body);font-weight:500;color:var(--muted);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;} .nav-desktop{display:flex;align-items:center;gap:6px;} .nav-desktop a{ padding:10px 16px; font-size:.92rem; font-weight:600; border-radius:999px; color:var(--muted); transition:color .25s ease, background .25s ease; position:relative; } .nav-desktop a:hover, .nav-desktop a.active{color:var(--white); background:var(--glass);} .header-actions{display:flex;align-items:center;gap:14px;} .lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);} .lang-switch-item{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;padding:0 8px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--muted);transition:color .2s ease, background .2s ease;} .lang-switch-item:hover{color:var(--white);} .lang-switch-item.is-active{background:var(--lime);color:var(--ink);} .mobile-nav .lang-switch{margin:18px 0 4px;} .burger{ display:none; width:46px;height:46px; border-radius:12px; border:1px solid var(--glass-border); background:var(--glass); color:var(--white); align-items:center;justify-content:center; } .burger svg{width:20px;height:20px;} .mobile-nav{ position:fixed; inset:0; z-index:1200; background:linear-gradient(180deg,var(--court-800),var(--court-900)); display:flex; flex-direction:column; padding:24px; transform:translateY(-100%); transition:transform .5s var(--ease); } .mobile-nav.open{transform:translateY(0);} .mobile-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;} .mobile-nav a:not(.btn){ font-family:var(--font-head); font-size:1.6rem; font-weight:700; padding:16px 0; border-bottom:1px solid var(--glass-border); display:flex; justify-content:space-between; align-items:center; } .mobile-nav a:not(.btn) span{color:var(--lime);font-size:1rem;} .mobile-nav .btn{margin-top:30px;} /* ---------- Faixa de logos de destaque (acima do banner) ---------- */ .destaques-logos{ position:relative; z-index:2; background:#07160f; padding:112px 0 26px; } .destaques-logos-wrap{ width:100%; box-sizing:border-box; padding:0 clamp(20px, 4vw, 56px); } .destaques-logos-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px 32px; width:100%; } .destaque-logo-item{ display:flex; align-items:center; justify-content:center; height:64px; flex:1 1 140px; max-width:240px; opacity:.8; filter:grayscale(1) brightness(1.7); transition:opacity .25s ease, filter .25s ease, transform .25s ease; } .destaque-logo-item:hover{opacity:1; filter:grayscale(0) brightness(1); transform:translateY(-2px);} .destaque-logo-item img{max-height:100%; max-width:100%; object-fit:contain; display:block;} .destaque-logo-item a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;} .destaque-logo-item span{ font-family:var(--font-head); font-weight:700; font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; color:var(--white); text-align:center; line-height:1.25; } /* ---------- Hero / Rotating Banner ---------- */ .hero-banner{ position:relative; min-height:auto; display:flex; align-items:center; overflow:hidden; padding:48px 0 170px; } .hero-slides{ position:absolute; inset:0; z-index:0; } .hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.2s var(--ease); background-size:cover; background-position:center; } .hero-slide.active{opacity:1; visibility:visible; z-index:1;} .hero-slide::after{ content:''; position:absolute; inset:0; background: radial-gradient(60% 60% at 18% 20%, rgba(248,96,0,.16), transparent 60%), radial-gradient(50% 50% at 85% 80%, rgba(34,193,220,.18), transparent 60%), linear-gradient(180deg, rgba(7,22,15,.55) 0%, rgba(7,22,15,.86) 62%, var(--court-900) 100%); } .hero-slide .court-lines{position:absolute;inset:0;opacity:.5;} .hero-slide-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* Fundo próprio (foto ou cor enviada no admin): tira o véu escuro e a grade decorativa, deixando só um leve degradê nas bordas para o texto continuar legível. */ .hero-slide--photo::after{ background:linear-gradient(180deg, rgba(7,22,15,.1) 0%, rgba(7,22,15,.05) 40%, rgba(7,22,15,.4) 100%); } .hero-slide--photo .court-lines{display:none;} /* Vídeo de fundo (galeria do banner): a imagem em movimento varia demais de brilho/cor para o véu leve das fotos ser suficiente — aqui a camada escura fica bem mais opaca, uniforme do topo ao rodapé, garantindo que o texto por cima continue legível o tempo todo, em qualquer trecho do vídeo. */ .hero-slide--video::after{ background:linear-gradient(180deg, rgba(7,22,15,.68) 0%, rgba(7,22,15,.6) 45%, rgba(7,22,15,.8) 100%); } .hero-content{position:relative;z-index:5; width:100%;} .hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:50px; align-items:center; } .hero-kicker{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lime); margin-bottom:20px; } .hero-kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:pulse 1.8s infinite;} [data-hero-tag-text], [data-hero-subtitle-text]{transition:opacity .25s ease;} .hero-content h1{ font-size:clamp(2.2rem,5.1vw,4.25rem); font-weight:900; letter-spacing:-.02em; } .hero-content .lead{font-size:1.18rem; max-width:520px; color:#dcebe1;} .hero-cta{display:flex; flex-wrap:wrap; gap:16px; margin-top:34px;} .hero-meta{ display:flex; flex-wrap:wrap; gap:26px; margin-top:52px; padding-top:28px; border-top:1px solid var(--glass-border); } .hero-meta div{display:flex; align-items:center; gap:12px;} .hero-meta .ic{ width:44px;height:44px;border-radius:12px; background:var(--glass); border:1px solid var(--glass-border); display:grid;place-items:center; flex:none; } .hero-meta .ic svg{width:20px;height:20px;color:var(--lime);} .hero-meta strong{display:block; font-family:var(--font-head); font-size:.95rem;} .hero-meta span{font-size:.78rem; color:var(--muted);} .hero-side{position:relative;} .countdown-card{ background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-radius:var(--radius-lg); padding:34px; position:relative; overflow:hidden; } .countdown-card::before{ content:''; position:absolute; inset:-2px; background:conic-gradient(from 0deg, var(--lime), var(--sky), var(--coral), var(--lime)); opacity:.16; animation:spin 12s linear infinite; z-index:-1; } .countdown-card h3{font-family:var(--font-head); font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:18px;} .countdown-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px;} .countdown-grid div{ background:rgba(0,0,0,.25); border-radius:14px; padding:14px 4px; text-align:center; } .countdown-grid strong{display:block; font-family:var(--font-head); font-size:1.9rem; font-weight:800; color:var(--lime);} .countdown-grid span{font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);} /* Estado "torneio em andamento" (quando a data-alvo do contador já passou) — mesmo padrão visual do badge "Inscrições encerradas" (ponto pulsando + texto piscando), só que em verde. Funciona tanto no .countdown-grid maior quanto no .hero-poster-mini-countdown compacto, porque usa o próprio atributo [data-countdown] como seletor em vez de depender do elemento. */ [data-countdown].is-live{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px 4px; } .countdown-live-dot{ width:11px; height:11px; border-radius:50%; flex:none; background:#2ee6a6; box-shadow:0 0 0 0 rgba(46,230,166,.55); animation:countdownLivePulseDot 1.5s infinite; } .countdown-live-text{ font-family:var(--font-head); font-weight:800; font-size:1.1rem; letter-spacing:.04em; text-transform:uppercase; animation:countdownLiveBlinkText 1.5s infinite; } @keyframes countdownLivePulseDot{ 0%{box-shadow:0 0 0 0 rgba(46,230,166,.55);} 70%{box-shadow:0 0 0 16px rgba(46,230,166,0);} 100%{box-shadow:0 0 0 0 rgba(46,230,166,0);} } @keyframes countdownLiveBlinkText{ 0%,100%{opacity:1; color:#2ee6a6;} 50%{opacity:.55; color:#8ff5d3;} } @media (prefers-reduced-motion:reduce){ .countdown-live-dot, .countdown-live-text{animation:none;} .countdown-live-text{color:#2ee6a6;} } /* ---------- Faixa "Inscrições abertas" + Contador (entre o hero e Apoio & Patrocínio) ---------- */ .inscricoes-strip{ background:linear-gradient(135deg, var(--court-800), var(--court-900)); border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); padding:50px 0; position:relative; overflow:hidden; } .inscricoes-strip .container{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; } .inscricoes-col{display:flex; flex-direction:column; align-items:flex-start; gap:18px;} .inscricoes-badge-big{ display:inline-flex; align-items:center; gap:12px; padding:14px 24px; border-radius:999px; background:rgba(255,59,59,.09); border:1px solid rgba(255,59,59,.45); width:fit-content; } .inscricoes-badge-big .dot{ width:11px; height:11px; border-radius:50%; flex:none; background:#ff3b3b; box-shadow:0 0 0 0 rgba(255,59,59,.55); animation:inscricoesPulseDot 1.5s infinite; } .inscricoes-badge-big .txt{ font-family:var(--font-head); font-weight:800; font-size:1.2rem; letter-spacing:.05em; text-transform:uppercase; animation:inscricoesBlinkText 1.5s infinite; } .inscricoes-col p{color:var(--muted); font-size:1rem; max-width:440px; margin:0;} .inscricoes-col .btn{margin-top:4px;} @keyframes inscricoesPulseDot{ 0%{box-shadow:0 0 0 0 rgba(255,59,59,.55);} 70%{box-shadow:0 0 0 16px rgba(255,59,59,0);} 100%{box-shadow:0 0 0 0 rgba(255,59,59,0);} } @keyframes inscricoesBlinkText{ 0%,100%{opacity:1; color:#ff4d4d;} 50%{opacity:.5; color:#ffb0b0;} } @media (prefers-reduced-motion:reduce){ .inscricoes-badge-big .dot, .inscricoes-badge-big .txt{animation:none;} .inscricoes-badge-big .txt{color:#ff4d4d;} } .inscricoes-strip .countdown-card{padding:30px 30px 26px;} .inscricoes-strip .countdown-card h3{margin-bottom:20px; text-align:center;} .inscricoes-strip .countdown-grid{margin-bottom:0;} @media (max-width:860px){ .inscricoes-strip .container{grid-template-columns:minmax(0,1fr); gap:34px; text-align:center;} .inscricoes-col{align-items:center;} .inscricoes-col p{max-width:100%;} } @media (max-width:480px){ .inscricoes-strip .countdown-grid strong{font-size:1.5rem;} .inscricoes-badge-big .txt{font-size:1rem;} } .hero-slide-dots{ display:flex; gap:10px; margin-top:6px; } .hero-slide-dots button{ width:34px; height:5px; border-radius:99px; background:rgba(255,255,255,.25); border:none; padding:0; transition:background .3s ease, width .3s ease; } .hero-slide-dots button.active{background:var(--lime); width:52px;} /* ---------- Hero poster (banner central sobreposto) ---------- */ .hero-poster{ max-width:900px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .hero-poster-logo{ width:250px; height:250px; border-radius:62px; background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); display:grid; place-items:center; margin-bottom:18px; padding:6px; box-shadow:0 14px 34px -10px rgba(0,0,0,.55); animation:badge-float 3.6s ease-in-out infinite; } @keyframes badge-float{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-22px) scale(1.035);} } .hero-poster-logo img{width:100%; height:100%; object-fit:contain;} .hero-poster-logo svg{width:100%; height:100%;} .hero-poster-subtitle{ font-family:var(--font-head); font-weight:700; font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lime); margin-bottom:12px; } .hero-poster-title{ font-size:clamp(1.7rem,4.4vw,3.2rem); font-weight:900; letter-spacing:-.01em; line-height:1.06; text-transform:uppercase; margin-bottom:16px; } .hero-poster-title .hl{color:var(--lime);} .hero-poster-desc{ font-size:1.05rem; color:#dcebe1; max-width:640px; margin-bottom:22px; } .hero-poster-infobar{ display:flex; flex-wrap:wrap; justify-content:center; gap:0; background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-radius:var(--radius-lg); padding:16px 8px; margin-bottom:22px; width:100%; } .hero-poster-infobar > div{ display:flex; align-items:center; gap:12px; padding:8px 22px; border-right:1px solid var(--glass-border); text-align:left; } .hero-poster-infobar > div:last-child{border-right:none;} .hero-poster-infobar .ic{ width:40px;height:40px;border-radius:11px; background:rgba(248,96,0,.14); color:var(--lime); display:grid;place-items:center; flex:none; } .hero-poster-infobar .ic svg{width:19px;height:19px;} .hero-poster-infobar strong{display:block; font-family:var(--font-head); font-size:.92rem;} .hero-poster-infobar span{font-size:.75rem; color:var(--muted);} .hero-poster-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:18px;} .hero-poster-mini{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 18px; margin-bottom:16px; } .badge-live--mini{ padding:6px 14px; font-size:.7rem; background:rgba(255,107,74,.12); border:1px solid rgba(255,107,74,.3); border-radius:999px; } .hero-poster-mini-countdown{ font-size:.78rem; color:var(--muted); letter-spacing:.02em; } .hero-poster-mini-countdown strong{color:var(--lime); font-family:var(--font-head); font-weight:700;} .hero-poster > .hero-slide-dots{justify-content:center; margin-top:2px;} .hero-arrows{position:absolute; bottom:26px; right:26px; display:flex; gap:10px; z-index:6;} .hero-arrows button{ width:46px;height:46px;border-radius:50%; background:var(--glass); border:1px solid var(--glass-border); color:var(--white); display:grid; place-items:center; transition:background .3s ease, transform .3s ease; } .hero-arrows button:hover{background:var(--lime); color:var(--ink); transform:scale(1.08);} .hero-arrows svg{width:18px;height:18px;} .scroll-cue{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); z-index:6; } .scroll-cue .line{width:1px;height:36px;background:linear-gradient(var(--lime),transparent); animation:scrollcue 2s infinite;} /* Selo "Bola Oficial" — elemento independente do .hero-poster-logo, com tamanho e movimento próprios, fixo no canto inferior direito do banner. */ .hero-selo-oficial{ position:absolute; z-index:4; /* Ancorado ao centro do banner (não à borda da viewport): o cartão de texto central tem 900px fixos, então "50% + 470px" cai sempre logo depois da borda direita desse cartão, com uma folga de ~20px — sem colidir com o título em nenhuma largura de tela. Em telas estreitas onde não cabe, o overflow:hidden do banner esconde o selo sozinho. */ left:calc(50% + 470px); top:40%; width:176px; height:176px; border-radius:30px; background:var(--glass); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); padding:1px; box-shadow:0 14px 34px -10px rgba(0,0,0,.55); animation:selo-oficial-float 4.2s ease-in-out infinite; pointer-events:none; } .hero-selo-oficial img{display:block; width:100%; height:100%; object-fit:contain; border-radius:12px;} @keyframes selo-oficial-float{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-16px) rotate(-3deg);} } @keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:.5;}} @keyframes spin{to{transform:rotate(360deg);}} @keyframes scrollcue{0%{transform:translateY(-10px);opacity:0;}40%{opacity:1;}100%{transform:translateY(20px);opacity:0;}} /* ---------- Marquee sponsors ---------- */ .marquee-wrap{ border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); padding-top:var(--sec-pt, 26px); padding-bottom:var(--sec-pb, 26px); overflow:hidden; background:var(--court-800); } @media (max-width:640px){ .marquee-wrap{ padding-top:calc(var(--sec-pt, 26px) * 0.7); padding-bottom:calc(var(--sec-pb, 26px) * 0.7); } } .marquee-track{ display:flex; gap:64px; width:max-content; animation:marquee 28s linear infinite; } .marquee-track span{ font-family:var(--font-head); font-weight:700; letter-spacing:.04em; color:var(--muted); font-size:1.05rem; display:flex; align-items:center; gap:10px; white-space:nowrap; } .marquee-track span::before{content:'●'; color:var(--lime); font-size:.6rem;} @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} /* ---------- Reveal on scroll ---------- */ /* Entrada dos blocos ao rolar a página. Ajustado em set/2026: antes eram 900ms com 36px de deslocamento, o que fazia o conteúdo "perseguir" o scroll numa página longa. Agora 400ms com 14px — lê como um fade suave, não como um slide. Os data-delay (0 a 400ms) continuam válidos e seguem escalonando os cards irmãos. */ [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease); } [data-reveal].in{opacity:1; transform:translateY(0);} [data-reveal="zoom"]{transform:scale(.97);} [data-reveal="zoom"].in{transform:scale(1);} [data-reveal="left"]{transform:translateX(-18px);} [data-reveal="left"].in{transform:translateX(0);} [data-reveal="right"]{transform:translateX(18px);} [data-reveal="right"].in{transform:translateX(0);} /* ---------- Cards / Categorias ---------- */ .grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;} .grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px;} .grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;} .cat-card{ position:relative; background:linear-gradient(165deg, var(--court-700), var(--court-800)); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:36px 30px; overflow:hidden; transition:transform .5s var(--ease), border-color .4s ease; } .cat-card:hover{transform:translateY(-10px);} .cat-card:hover .cat-glow{opacity:.5;} /* Card com imagem de fundo enviada no painel (Categorias): a imagem entra via "style" inline (junto com um degradê escuro por cima, para o texto continuar legível) — aqui só ajustamos como ela se comporta dentro do card. */ .cat-card.has-imagem{ background-size:cover; background-position:center; background-repeat:no-repeat; } .cat-glow{ position:absolute; width:220px;height:220px; border-radius:50%; background:var(--lime); filter:blur(70px); opacity:.18; top:-80px; right:-80px; transition:opacity .4s ease; } .cat-card .cat-icon{ width:64px;height:64px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-border); display:grid; place-items:center; margin-bottom:24px; } .cat-icon svg{width:32px;height:32px; color:var(--lime);} .cat-card h3{font-size:1.35rem; font-weight:700;} .cat-tag{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--coral); background:rgba(255,107,74,.12); padding:5px 12px; border-radius:999px; margin-bottom:14px; } .cat-card a.cat-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:700; font-size:.88rem; color:var(--lime); margin-top:14px; } .cat-card a.cat-link svg{width:16px;height:16px; transition:transform .3s ease;} .cat-card a.cat-link:hover svg{transform:translateX(4px);} /* ---------- Stats ---------- */ .stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; } .stat-box{ text-align:center; padding:30px 16px; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-md); } .stat-box strong{ display:block; font-family:var(--font-head); font-weight:900; font-size:clamp(2rem,3.4vw,2.8rem); color:var(--lime); } .stat-box span{font-size:.82rem; color:var(--muted); font-weight:600;} /* ---------- Timeline (história) ---------- */ .timeline{position:relative; margin-top:40px;} .timeline::before{ content:''; position:absolute; left:24px; top:0; bottom:0; width:2px; background:linear-gradient(var(--lime), var(--sky), var(--coral)); opacity:.4; } .timeline-item{position:relative; padding:0 0 46px 68px;} .timeline-item::before{ content:''; position:absolute; left:16px; top:4px; width:18px;height:18px; border-radius:50%; background:var(--court-900); border:3px solid var(--lime); box-shadow:0 0 0 6px rgba(248,96,0,.12); } .timeline-item h3{font-size:1.3rem; margin-bottom:6px;} .timeline-year{ display:inline-block; font-family:var(--font-head); font-weight:800; color:var(--lime); font-size:.95rem; margin-bottom:8px; } /* ---------- Estrutura / amenities ---------- */ .amenity-card{ display:flex; gap:18px; align-items:flex-start; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:26px; } .amenity-card .ic{ width:52px;height:52px;border-radius:14px; flex:none; background:linear-gradient(145deg,var(--lime),var(--sky)); display:grid; place-items:center; } .amenity-card .ic svg{width:26px;height:26px; color:var(--ink);} .amenity-card .ic img{width:100%;height:100%; border-radius:14px; object-fit:cover; display:block;} .amenity-card h4{font-size:1.08rem; margin-bottom:6px;} /* ---------- Estrutura — galeria de fotos (teaser da home) ---------- */ .estrutura-galeria-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;} .estrutura-galeria-item{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--glass-border); background:var(--glass); padding:0; margin:0; cursor:zoom-in; font:inherit; color:inherit; text-align:left; display:block; } .estrutura-galeria-item:first-child{grid-column:span 2; aspect-ratio:16/10;} .estrutura-galeria-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;} .estrutura-galeria-item:hover img{transform:scale(1.06);} .estrutura-galeria-item:focus-visible{outline:2px solid var(--lime); outline-offset:2px;} .estrutura-galeria-zoom{ position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:rgba(12,26,18,.65); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:grid; place-items:center; color:#fff; opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease; } .estrutura-galeria-item:hover .estrutura-galeria-zoom, .estrutura-galeria-item:focus-visible .estrutura-galeria-zoom{opacity:1; transform:translateY(0);} .estrutura-galeria-legenda{ position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px; background:linear-gradient(to top, rgba(6,16,11,.88), rgba(6,16,11,0)); color:#fff; font-size:.82rem; font-weight:600; line-height:1.3; } .estrutura-galeria-vazia{ background:var(--glass); border:1px dashed var(--glass-border); border-radius:var(--radius-md); padding:40px 24px; text-align:center; } .estrutura-lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(6,16,11,.94); display:flex; align-items:center; justify-content:center; padding:40px; } .estrutura-lightbox[hidden]{display:none;} .estrutura-lightbox figure{margin:0; max-width:min(92vw,1100px); max-height:88vh; display:flex; flex-direction:column; align-items:center; gap:14px;} .estrutura-lightbox img{max-width:100%; max-height:78vh; border-radius:var(--radius-md); display:block; object-fit:contain;} .estrutura-lightbox figcaption{color:#fff; font-size:.92rem; text-align:center; min-height:1.2em;} .estrutura-lightbox-fechar{ position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer; } .estrutura-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer; } .estrutura-lightbox-prev{left:20px;} .estrutura-lightbox-next{right:20px;} .estrutura-lightbox-fechar:hover, .estrutura-lightbox-nav:hover{background:var(--lime); border-color:var(--lime); color:var(--ink);} @media (max-width:640px){ .estrutura-galeria-item:first-child{aspect-ratio:16/11;} .estrutura-lightbox{padding:16px;} .estrutura-lightbox-nav{width:40px; height:40px;} .estrutura-lightbox-prev{left:6px;} .estrutura-lightbox-next{right:6px;} .estrutura-lightbox-fechar{top:12px; right:12px;} } /* ---------- Regulamento (arquivos p/ download) ---------- */ .regulamento-list{display:flex; flex-direction:column; gap:18px;} .regulamento-card{ display:flex; gap:18px; align-items:center; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:22px 26px; } .regulamento-card .ic{ width:52px;height:52px;border-radius:14px; flex:none; background:linear-gradient(145deg,var(--lime),var(--sky)); display:grid; place-items:center; } .regulamento-card .ic svg{width:26px;height:26px; color:var(--ink);} .regulamento-card .info{flex:1; min-width:0;} .regulamento-card h4{font-size:1.08rem; margin-bottom:4px;} .regulamento-card p{margin:0; font-size:.92rem; color:var(--muted);} .regulamento-card .btn{flex:none;} .regulamento-empty{ background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:32px; text-align:center; color:var(--muted); } @media (max-width:640px){ .regulamento-card{flex-direction:column; align-items:flex-start;} .regulamento-card .btn{width:100%; justify-content:center;} } /* ---------- TV Aberto do Madeira (vídeo) ---------- */ .tv-madeira-paragrafo{font-size:1.05rem;} .tv-madeira-frase{ font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:#fff; margin:18px 0 0; } .tv-madeira-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; background:linear-gradient(160deg,var(--court-700),var(--court-900)); border:1px solid var(--glass-border); box-shadow:0 20px 44px -18px rgba(0,0,0,.6); } .tv-madeira-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;} .tv-madeira-video video.tv-video-proprio{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; background:#000;} /* Vídeos próprios no formato vertical (Stories/Reels, 9:16) — troca a proporção do player e limita a largura pra não ficar gigante dentro da grade/cards, que são pensados para 16:9. */ .tv-madeira-video--vertical{aspect-ratio:9/16; max-width:320px; margin:0 auto;} /* Botões de som e play/pause sobre os vídeos próprios — o vídeo sempre começa tocando sozinho e sem som (autoplay só é permitido assim pelos navegadores); a pessoa pode ativar o som e pausar quando quiser. */ .tv-video-controls{position:absolute; right:14px; bottom:14px; z-index:2; display:flex; gap:8px;} .tv-video-btn{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); cursor:pointer; display:grid; place-items:center; background:rgba(7,22,15,.55); color:#fff; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:transform .2s var(--ease), background .2s var(--ease); } .tv-video-btn:hover{background:rgba(7,22,15,.78); transform:scale(1.07);} .tv-video-btn svg{display:block;} @media (max-width:640px){ .tv-video-controls{right:10px; bottom:10px; gap:6px;} .tv-video-btn{width:33px; height:33px;} } .tv-madeira-placeholder{ position:absolute; inset:0; display:grid; place-items:center; } .tv-madeira-play{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid var(--glass-border); color:var(--lime); } /* vídeo principal bem maior (a coluna de vídeo ganha ainda mais espaço na grade, e a seção inteira usa o container largo — .container--wide) */ .tv-madeira-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:44px;} /* ---------- TV Aberto do Madeira — Transmissões (blocos) ---------- */ .tv-transmissoes-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:60px; } .tv-transmissao-card{ display:flex; flex-direction:column; gap:22px; background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:34px; } .tv-transmissao-titulo{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:1.4rem; color:var(--lime); margin:0; text-align:center; } .tv-transmissao-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px 38px; } .tv-transmissao-logo{ display:flex; align-items:center; justify-content:center; height:114px; flex:0 1 257px; max-width:324px; opacity:1; filter:none; transition:transform .25s ease; } .tv-transmissao-logo:hover{transform:translateY(-2px);} .tv-transmissao-logo img{max-height:100%; max-width:100%; object-fit:contain; display:block;} .tv-transmissao-logo a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;} .tv-transmissao-logo-texto{ font-family:var(--font-head); font-weight:700; font-size:1rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); text-align:center; line-height:1.25; } .tv-transmissao-video{margin-top:4px;} /* ---------- Programação / schedule ---------- */ .tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px;} .tab-btn{ padding:12px 22px; border-radius:999px; border:1px solid var(--glass-border); background:var(--glass); font-family:var(--font-head); font-weight:700; font-size:.85rem; color:var(--muted); transition:.3s ease; } .tab-btn.active, .tab-btn:hover{background:var(--lime); color:var(--ink); border-color:var(--lime);} .schedule-day{display:none;} .schedule-day.active{display:block;} .schedule-row{ display:grid; grid-template-columns:110px 1fr auto; gap:20px; align-items:center; padding:20px 22px; border-radius:var(--radius-sm); background:var(--glass); border:1px solid var(--glass-border); margin-bottom:14px; transition:transform .3s ease, border-color .3s ease; } .schedule-row:hover{transform:translateX(6px); border-color:var(--lime);} .schedule-time{font-family:var(--font-head); font-weight:800; color:var(--lime);} .schedule-title{font-weight:700; font-size:1.02rem;} .schedule-cat{font-size:.78rem; color:var(--muted);} .schedule-badge{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:999px; background:rgba(255,107,74,.15); color:var(--coral); white-space:nowrap; } /* ---------- Jogos (partida a partida) / Resultados ---------- */ /* Ver /backend/admin/jogos.php — cada linha é uma partida real do torneio (quadra, horário, jogadores, placar), diferente da .schedule-row acima (que é a programação geral de cerimônias/rodadas por categoria). */ .match-row{ display:grid; grid-template-columns:96px 1fr 132px; gap:20px; align-items:center; padding:20px 22px; border-radius:var(--radius-sm); background:var(--glass); border:1px solid var(--glass-border); margin-bottom:14px; transition:transform .3s ease, border-color .3s ease; } .match-row:hover{transform:translateX(6px); border-color:var(--lime);} .match-meta{display:flex; flex-direction:column; gap:4px;} .match-time{font-family:var(--font-head); font-weight:800; color:var(--lime); font-size:1.02rem;} .match-time-label{display:block; font-size:.6rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:2px;} .match-court{font-size:.72rem; color:var(--muted); white-space:nowrap;} .match-info{min-width:0;} .match-round-cat{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px;} .match-round{font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--sky);} .match-category{font-size:.78rem; color:var(--muted);} .modalidade-tag{display:inline-flex; align-items:center; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; line-height:1.4;} .modalidade-tag--tenis{background:rgba(34,193,220,.16); color:var(--sky);} .modalidade-tag--beach{background:rgba(246,227,194,.18); color:var(--gold);} .match-players{display:flex; flex-direction:column; gap:6px;} .match-player{display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:.98rem;} .match-player-seed{font-size:.68rem; font-weight:700; color:var(--muted);} .match-player-country{font-size:.7rem; font-weight:600; color:var(--muted); letter-spacing:.03em;} .match-flag{font-size:1em; margin-right:1px;} .match-flag-img{height:14px; width:auto; vertical-align:middle; margin-right:4px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.08);} .match-player.is-vencedor{color:var(--lime);} .match-vs{font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase;} .match-side{display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right;} .match-status{ font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border-radius:999px; white-space:nowrap; } .match-status--agendado{background:rgba(169,194,179,.14); color:var(--muted);} .match-status--em_andamento{background:rgba(255,207,92,.18); color:var(--gold);} /* "Encerrado" (jogo já disputado — ver Painel → Jogos e resultados): vermelho de propósito, pra se destacar dos demais status (que usam o verde-limão e o dourado da identidade do site) e ficar óbvio de longe que acabou. */ .match-status--finalizado{background:rgba(255,59,48,.16); color:#ff4d4d;} .match-status--adiado{background:rgba(169,194,179,.14); color:var(--muted);} .match-status--wo{background:rgba(255,107,74,.15); color:var(--coral);} .match-score{font-family:var(--font-head); font-weight:800; font-size:.92rem;} .match-empty{text-align:center; color:var(--muted); padding:20px;} /* ---------- Jogos do dia em duas colunas (Tênis / Beach Tennis) ---------- */ .jogos-cols{display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start;} .jogos-col{min-width:0;} .jogos-col-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--glass-border);} .jogos-col-count{font-size:.72rem; font-weight:700; color:var(--muted); white-space:nowrap;} .modalidade-tag--lg{font-size:.78rem; padding:6px 16px;} /* Cada coluna fica com metade da largura da seção — nomes longos de jogador (com bandeira/país) não cabem mais no layout de 3 colunas do .match-row original nessa largura reduzida. Por isso, dentro de uma coluna de jogos, o card sempre usa o mesmo layout compacto (empilhado) que o site já usa no celular, independente do tamanho da tela. */ .jogos-col .match-row{grid-template-columns:minmax(0,1fr); text-align:left;} .jogos-col .match-side{flex-direction:row; align-items:center; justify-content:space-between; margin-top:10px;} @media (max-width:900px){ .jogos-cols{grid-template-columns:minmax(0,1fr); gap:8px;} .jogos-col + .jogos-col{margin-top:36px; padding-top:36px; border-top:1px solid var(--glass-border);} } /* ---------- Jogos de hoje — carrossel na home (seção "jogos" em Seções da home) — mesmo padrão de carrossel de .athletes-carousel/.news-carousel logo abaixo. Cards maiores: até 4 por linha em desktop (era 5 — o usuário achou os cards pequenos demais e pediu para aumentar). ---------- */ .jogos-home-carousel{position:relative;} .jogos-home-viewport{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; } .jogos-home-viewport::-webkit-scrollbar{display:none; width:0; height:0;} .jogos-home-carousel.is-js .jogos-home-viewport{overflow:hidden; scroll-snap-type:none;} .jogos-home-track{display:flex; gap:22px; transition:transform .6s var(--ease);} .jogos-home-card-wrap{flex:0 0 calc((100% - 66px)/4); scroll-snap-align:start;} .jogos-home-carousel-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; flex-wrap:wrap;} .jogos-home-carousel.is-single-page .jogos-home-carousel-nav{display:none;} .jogos-home-arrow{ width:46px; height:46px; border-radius:50%; flex:none; background:var(--glass); border:1px solid var(--glass-border); color:var(--white); display:grid; place-items:center; transition:background .3s ease, transform .3s ease; } .jogos-home-arrow:hover{background:var(--lime); color:var(--ink); transform:scale(1.08);} .jogos-home-dots{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:100%;} .jogos-home-dots button{ width:34px; height:5px; border-radius:99px; flex:none; background:rgba(255,255,255,.25); border:none; padding:0; transition:background .3s ease, width .3s ease; } .jogos-home-dots button.active{background:var(--lime); width:52px;} .jogos-home-card{ display:flex; flex-direction:column; gap:14px; height:100%; padding:24px 22px 26px; border-radius:var(--radius-md); background:var(--glass); border:1px solid var(--glass-border); transition:transform .3s ease, border-color .3s ease; } .jogos-home-card:hover{transform:translateY(-4px); border-color:var(--lime);} .jogos-home-card-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto;} .jogos-home-card-bottom .match-status{font-size:.76rem; padding:8px 16px;} .jogos-home-card-bottom .match-score{font-family:var(--font-head); font-weight:800; font-size:.92rem;} .jogos-home-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;} .jogos-home-card-time-wrap{display:flex; flex-direction:column;} .jogos-home-card-time-label{font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);} .jogos-home-card-time{font-family:var(--font-head); font-weight:800; color:var(--lime); font-size:1.3rem;} .jogos-home-card-court{font-size:.82rem; color:var(--muted); white-space:nowrap; text-align:right;} .jogos-home-card-tags{display:flex; flex-wrap:wrap; gap:8px;} .jogos-home-card-round{font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--sky);} .jogos-home-card-cat{font-size:.8rem; color:var(--muted);} .jogos-home-card-players{display:flex; flex-direction:column; gap:9px;} .jogos-home-card-player{display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; font-weight:700; font-size:1.06rem;} .jogos-home-card-player.is-vencedor{color:var(--lime);} .jogos-home-card-vs{font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase;} .jogos-home-card .match-player-seed{font-size:.78rem;} .jogos-home-card .match-player-country{font-size:.78rem;} .jogos-home-card .match-flag-img{height:17px; margin-right:5px;} /* ---------- Athletes / news cards ---------- */ /* Altura do card 30% maior que antes (era 380px). */ .athlete-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; height:494px; background:linear-gradient(160deg,var(--court-700),var(--court-800)); border:1px solid var(--glass-border); } .athlete-card .fill{position:absolute; inset:0; display:grid; place-items:center; opacity:.5;} .athlete-card.has-foto .fill{opacity:1;} .athlete-card .fill .foto{width:100%; height:100%; object-fit:cover; display:block;} .athlete-card.has-foto .info{background:linear-gradient(0deg, rgba(7,22,15,.92) 15%, rgba(7,22,15,.15) 65%, transparent);} .athlete-card .info{ position:absolute; left:0; right:0; bottom:0; padding:24px; background:linear-gradient(0deg, rgba(7,22,15,.95), transparent); } .athlete-card .info span{font-size:.75rem; color:var(--lime); font-weight:700; text-transform:uppercase; letter-spacing:.06em;} .athlete-card .info h4{font-size:1.2rem; margin:6px 0 0;} .athlete-card .info .meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px;} .athlete-card .info .meta span{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:999px; color:var(--white); background:rgba(255,255,255,.1); border:1px solid var(--glass-border); } /* ---------- Atletas em destaque — carrossel ---------- */ .athletes-carousel{position:relative;} /* O viewport sempre permite rolagem horizontal por baixo dos panos (garantindo que nenhum atleta fique inacessível mesmo se o JS não rodar), mas a barra de rolagem nativa do navegador fica sempre ESCONDIDA — visualmente é só setas, nunca uma barra de rolagem. Quando o JS inicializa, ele adiciona a classe "is-js" e passa a controlar o deslizamento via transform (setas, autoplay, pontinhos, swipe). */ .athletes-viewport{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; } .athletes-viewport::-webkit-scrollbar{display:none; width:0; height:0;} .athletes-carousel.is-js .athletes-viewport{overflow:hidden; scroll-snap-type:none;} .athletes-track{display:flex; gap:26px; transition:transform .6s var(--ease);} .athlete-card-wrap{flex:0 0 calc((100% - 52px)/3); scroll-snap-align:start;} .athletes-carousel-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; flex-wrap:wrap;} .athletes-carousel.is-single-page .athletes-carousel-nav{display:none;} .athletes-arrow{ width:46px; height:46px; border-radius:50%; flex:none; background:var(--glass); border:1px solid var(--glass-border); color:var(--white); display:grid; place-items:center; transition:background .3s ease, transform .3s ease; } .athletes-arrow:hover{background:var(--lime); color:var(--ink); transform:scale(1.08);} /* flex-wrap + max-width evita que muitos pontos (muitos atletas cadastrados) estourem a largura da tela no celular — em vez de vazar pro lado, os pontos quebram em mais de uma linha, sempre centralizados. */ .athletes-dots{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:100%;} .athletes-dots button{ width:34px; height:5px; border-radius:99px; flex:none; background:rgba(255,255,255,.25); border:none; padding:0; transition:background .3s ease, width .3s ease; } .athletes-dots button.active{background:var(--lime); width:52px;} .news-card{ display:block; border-radius:var(--radius-md); overflow:hidden; background:var(--glass); border:1px solid var(--glass-border); transition:transform .4s var(--ease); color:inherit; text-decoration:none; cursor:pointer; } .news-card:hover{transform:translateY(-8px);} .news-card .thumb{height:190px; position:relative; overflow:hidden;} .news-card .thumb .fill{position:absolute; inset:0; display:grid; place-items:center;} .news-card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;} .news-card .body{padding:22px;} .news-card .date{font-size:.75rem; color:var(--sky); font-weight:700; text-transform:uppercase; letter-spacing:.05em;} .news-card h4{font-size:1.1rem; margin:8px 0;} .news-card .read-more{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-family:var(--font-head); font-weight:700; font-size:.88rem; color:var(--lime); } .news-card .read-more svg{width:16px;height:16px; transition:transform .3s ease;} .news-card:hover .read-more svg{transform:translateX(4px);} /* ---------- Notícias — carrossel ---------- */ .news-carousel{position:relative;} /* Mesmo esquema do carrossel de atletas: rolagem nativa (nunca mostrada como barra) funciona como rede de segurança enquanto/se o JS não rodar; quando o JS inicializa, ele adiciona "is-js" e assume o controle via transform. */ .news-viewport{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; } .news-viewport::-webkit-scrollbar{display:none; width:0; height:0;} .news-carousel.is-js .news-viewport{overflow:hidden; scroll-snap-type:none;} .news-track{display:flex; gap:26px; transition:transform .6s var(--ease);} .news-card-wrap{flex:0 0 calc((100% - 52px)/3); scroll-snap-align:start;} .news-carousel-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; flex-wrap:wrap;} .news-carousel.is-single-page .news-carousel-nav{display:none;} .news-arrow{ width:46px; height:46px; border-radius:50%; flex:none; background:var(--glass); border:1px solid var(--glass-border); color:var(--white); display:grid; place-items:center; transition:background .3s ease, transform .3s ease; } .news-arrow:hover{background:var(--lime); color:var(--ink); transform:scale(1.08);} .news-arrow svg{width:18px; height:18px;} /* mesma proteção contra estouro lateral usada nos pontos do carrossel de atletas */ .news-dots{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; max-width:100%;} .news-dots button{ width:34px; height:5px; border-radius:99px; flex:none; background:rgba(255,255,255,.25); border:none; padding:0; transition:background .3s ease, width .3s ease; } .news-dots button.active{background:var(--lime); width:52px;} /* ---------- Patrocinadores: carrosséis Ouro/Prata (logos com movimento) ---------- */ .sponsor-carousel{ position:relative; overflow:hidden; width:100%; padding:28px 0; } .sponsor-carousel-track{ display:flex; align-items:center; gap:64px; width:max-content; animation-name:marquee; animation-timing-function:linear; animation-iteration-count:infinite; /* Garante um deslocamento sempre liso (sem "engasgar"), em qualquer velocidade. */ will-change:transform; transform:translateZ(0); backface-visibility:hidden; } .sponsor-carousel:hover .sponsor-carousel-track{animation-play-state:paused;} /* Carrossel marcado como "estático" no painel: logos paradas, lado a lado, quebrando linha normalmente em vez de rolar (sem duplicar os itens). */ .sponsor-carousel-track.is-static{ animation:none; width:100%; flex-wrap:wrap; justify-content:center; } .sponsor-item{display:flex; align-items:center; justify-content:center; flex:none;} .sponsor-item img{display:block; object-fit:contain; filter:grayscale(.15); opacity:.92; transition:opacity .25s ease, filter .25s ease;} .sponsor-item:hover img{opacity:1; filter:grayscale(0);} .sponsor-item span{ font-family:var(--font-head); font-weight:700; letter-spacing:.03em; color:var(--white); white-space:nowrap; } .sponsor-carousel--ouro .sponsor-item{height:122px;} .sponsor-carousel--ouro .sponsor-item img{max-height:122px; max-width:340px;} .sponsor-carousel--ouro .sponsor-item span{font-size:2.15rem;} .sponsor-carousel--prata{padding-top:22px;} /* Caixa de tamanho FIXO (largura + altura) para cada logo Prata — assim toda logo nova cadastrada entra automaticamente do mesmo tamanho que as demais, sem depender do formato/proporção da imagem enviada. A imagem encolhe ou cresce para caber dentro dessa caixa, sem esticar nem cortar. */ .sponsor-carousel--prata .sponsor-item{height:90px; width:294px;} .sponsor-carousel--prata .sponsor-item img{width:100%; height:100%; object-fit:contain;} .sponsor-carousel--prata .sponsor-item span{font-size:1.94rem; color:var(--muted);} @media (max-width:640px){ .sponsor-carousel{padding:20px 0;} .sponsor-carousel-track{gap:40px;} .sponsor-carousel--ouro .sponsor-item{height:80px;} .sponsor-carousel--ouro .sponsor-item img{max-height:80px; max-width:230px;} .sponsor-carousel--ouro .sponsor-item span{font-size:1.45rem;} .sponsor-carousel--prata .sponsor-item{height:65px; width:213px;} .sponsor-carousel--prata .sponsor-item span{font-size:1.63rem;} } /* ---------- Forms ---------- */ .form-card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:40px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .field{margin-bottom:20px;} .field label{ display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:8px; } .field input, .field select, .field textarea{ width:100%; padding:15px 16px; border-radius:12px; background:rgba(0,0,0,.28); border:1px solid var(--glass-border); color:var(--white); font-family:var(--font-body); font-size:.96rem; transition:border-color .3s ease, background .3s ease; } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--lime); background:rgba(0,0,0,.4); } .field textarea{resize:vertical; min-height:130px;} .form-msg{ margin-top:18px; padding:14px 18px; border-radius:12px; font-size:.9rem; display:none; } .form-msg.ok{display:block; background:rgba(248,96,0,.12); border:1px solid rgba(248,96,0,.4); color:var(--lime);} .form-msg.err{display:block; background:rgba(255,107,74,.12); border:1px solid rgba(255,107,74,.4); color:var(--coral);} /* ---------- Map ---------- */ .map-card{border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--glass-border); height:100%; min-height:340px;} .map-card iframe{width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.3) invert(.92) contrast(.9);} /* ---------- Contact info list ---------- */ .info-list li{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--glass-border); } .info-list li:last-child{border-bottom:none;} .info-list .ic{ width:44px;height:44px; border-radius:12px; flex:none; background:linear-gradient(145deg,var(--lime),var(--sky)); display:grid; place-items:center; } .info-list .ic svg{width:20px;height:20px; color:var(--ink);} .info-list strong{display:block; font-family:var(--font-head); font-size:.98rem; margin-bottom:2px;} .info-list span{font-size:.88rem; color:var(--muted);} .social-row{display:flex; gap:12px; margin-top:24px;} .social-row a{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--glass); border:1px solid var(--glass-border); transition:.3s ease; } .social-row a:hover{background:var(--lime); border-color:var(--lime);} .social-row a:hover svg{color:var(--ink);} .social-row svg{width:19px;height:19px;} /* ---------- Page hero (subpages) ---------- */ .page-hero{ padding:170px 0 90px; position:relative; overflow:hidden; background:radial-gradient(70% 60% at 80% 0%, rgba(34,193,220,.18), transparent 60%), radial-gradient(60% 50% at 10% 10%, rgba(248,96,0,.14), transparent 60%); } .page-hero .crumb{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); margin-bottom:18px; } .page-hero .crumb span{color:var(--lime);} .page-hero h1{font-size:clamp(2.3rem,5vw,3.6rem); font-weight:900;} .page-hero p{max-width:640px; font-size:1.08rem;} .article-meta-date{color:var(--muted); font-size:.95rem; margin-top:6px;} /* ---------- Página de leitura de notícia (/noticia/) ---------- */ .article-wrap{max-width:760px; margin:0 auto;} .article-cover{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:36px; border:1px solid var(--glass-border); max-height:440px; } .article-cover img{width:100%; height:100%; max-height:440px; object-fit:cover; display:block;} .article-body{font-size:1.08rem; line-height:1.8; color:var(--muted);} .article-body p{margin:0 0 22px;} .article-body h2, .article-body h3{color:var(--white); font-family:var(--font-head); font-weight:800; margin:36px 0 16px;} .article-body h2{font-size:1.6rem;} .article-body h3{font-size:1.3rem;} .article-body strong{color:var(--white);} .article-body a{color:var(--lime); text-decoration:underline; text-underline-offset:3px;} .article-body ul, .article-body ol{margin:0 0 22px; padding-left:24px;} .article-body li{margin-bottom:8px;} .article-body blockquote{ margin:0 0 22px; padding:18px 24px; border-left:3px solid var(--lime); background:var(--glass); border-radius:0 var(--radius-md) var(--radius-md) 0; font-style:italic; color:var(--white); } .article-back{margin-top:44px; padding-top:32px; border-top:1px solid var(--glass-border);} /* ---------- CTA band ---------- */ .cta-band{ border-radius:var(--radius-lg); background:linear-gradient(120deg, var(--court-700), var(--court-800)); border:1px solid var(--glass-border); padding:60px; text-align:center; position:relative; overflow:hidden; } .cta-band::before{ content:''; position:absolute; inset:0; background:radial-gradient(50% 80% at 15% 0%, rgba(248,96,0,.2), transparent 60%), radial-gradient(50% 80% at 90% 100%, rgba(255,107,74,.2), transparent 60%); } .cta-band > *{position:relative; z-index:2;} .cta-band h2{font-size:clamp(1.8rem,3.6vw,2.6rem);} .cta-band .btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:26px;} /* ---------- Footer ---------- */ .site-footer{background:var(--court-800); border-top:1px solid var(--glass-border); padding:80px 0 30px; position:relative; overflow:hidden;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:60px;} .footer-brand p{max-width:320px;} .footer-col h5{font-family:var(--font-head); font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px; color:var(--white);} .footer-col a{display:block; padding:7px 0; color:var(--muted); font-size:.92rem; transition:color .25s ease;} .footer-col a:hover{color:var(--lime);} .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-top:26px; border-top:1px solid var(--glass-border); font-size:.82rem; color:var(--muted); } /* ---------- Utilities ---------- */ .text-center{text-align:center;} .mt-0{margin-top:0 !important;} .badge-live{ display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:700; color:var(--coral); text-transform:uppercase; letter-spacing:.06em; } .badge-live .dot{width:8px;height:8px;border-radius:50%;background:var(--coral); animation:pulse 1.6s infinite;} /* ---------- Botões flutuantes (WhatsApp + navegação topo/final) ---------- */ /* WhatsApp fica acima das setas de navegação (topo/final) na pilha de botões flutuantes, com um movimento suave de "flutuação" para chamar atenção. */ .whatsapp-float{ position:fixed; right:24px; bottom:152px; z-index:901; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 30px -8px rgba(0,0,0,.55); transition:transform .25s var(--ease), box-shadow .25s var(--ease); animation:whatsapp-float-bob 2.6s ease-in-out infinite; } .whatsapp-float:hover{animation-play-state:paused; transform:scale(1.08); box-shadow:0 18px 36px -8px rgba(0,0,0,.65);} .whatsapp-float svg{width:29px; height:29px;} @keyframes whatsapp-float-bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} } .back-to-top, .scroll-to-bottom{ position:fixed; right:28px; z-index:900; width:50px;height:50px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center; opacity:0; visibility:hidden; transition:.35s var(--ease); } .back-to-top{ bottom:24px; background:var(--lime); color:var(--ink); box-shadow:0 12px 28px -8px rgba(248,96,0,.6); transform:translateY(10px); } .back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);} .scroll-to-bottom{ bottom:86px; background:var(--glass); color:var(--white); border:1px solid var(--glass-border); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 12px 28px -8px rgba(0,0,0,.5); transform:translateY(-10px); } .scroll-to-bottom.show{opacity:1; visibility:visible; transform:translateY(0);} .scroll-to-bottom:hover{background:var(--lime); color:var(--ink); border-color:transparent;} .back-to-top svg, .scroll-to-bottom svg{width:20px;height:20px;} @media (max-width:640px){ .whatsapp-float{right:16px; bottom:128px; width:52px; height:52px;} .whatsapp-float svg{width:26px; height:26px;} .back-to-top, .scroll-to-bottom{right:19px; width:44px; height:44px;} .back-to-top{bottom:16px;} .scroll-to-bottom{bottom:72px;} } /* ============ Responsive ============ */ @media (max-width:1024px){ .hero-grid{grid-template-columns:minmax(0,1fr);} .tv-madeira-grid{grid-template-columns:minmax(0,1fr);} .hero-side{max-width:440px;} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));} .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px;} .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr));} .tv-transmissoes-grid{grid-template-columns:minmax(0,1fr);} .athlete-card-wrap{flex:0 0 calc((100% - 26px)/2);} .news-card-wrap{flex:0 0 calc((100% - 26px)/2);} /* Carrossel "Jogos de hoje" da home: 2 cards por vez em tablet (era 4 no desktop). */ .jogos-home-card-wrap{flex:0 0 calc((100% - 22px)/2);} } @media (max-width:860px){ .nav-desktop{display:none;} .burger{display:flex;} .form-row{grid-template-columns:minmax(0,1fr);} .hero-selo-oficial{display:none;} } @media (max-width:640px){ .section{padding:70px 0;} .grid-3, .grid-2, .grid-4{grid-template-columns:minmax(0,1fr);} .footer-grid{grid-template-columns:minmax(0,1fr);} .cta-band{padding:40px 24px;} .schedule-row{grid-template-columns:minmax(0,1fr); text-align:left;} .match-row{grid-template-columns:minmax(0,1fr); text-align:left;} .match-side{flex-direction:row; align-items:center; justify-content:space-between;} .stats-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .hero-meta{gap:18px;} .map-card{min-height:260px;} .athlete-card-wrap{flex:0 0 100%;} .athlete-card{height:420px;} .news-card-wrap{flex:0 0 100%;} /* Carrossel "Jogos de hoje" da home: 1 card por vez no celular. */ .jogos-home-card-wrap{flex:0 0 100%;} .site-header .container{flex-wrap:nowrap; gap:10px;} .brand{font-size:.82rem; gap:8px;} .brand-badge{width:36px; height:36px; border-radius:10px;} .brand-badge svg{width:20px; height:20px;} .brand small{display:none;} .header-actions{gap:8px;} .header-actions .btn-sm{display:none;} .burger{width:42px; height:42px;} .destaques-logos{padding:88px 0 18px;} .destaques-logos-wrap{padding:0 20px;} .destaques-logos-row{justify-content:center; gap:22px 26px;} .destaque-logo-item{height:46px; flex:0 1 110px;} .destaque-logo-item span{font-size:.74rem;} .tv-transmissoes-grid{gap:20px; margin-top:36px;} .tv-transmissao-card{padding:20px;} .tv-transmissao-logo{height:78px; flex:0 1 176px;} .hero-banner{padding:26px 0 140px;} .hero-content h1{font-size:2.5rem;} .hero-poster-logo{width:200px; height:200px; border-radius:50px; padding:6px; margin-bottom:16px;} .hero-poster-infobar{flex-direction:column; align-items:stretch; padding:8px;} .hero-poster-infobar > div{border-right:none; border-bottom:1px solid var(--glass-border); justify-content:flex-start; padding:14px 12px;} .hero-poster-infobar > div:last-child{border-bottom:none;} .hero-poster-mini{flex-direction:column; gap:8px;} } /* ============================================================ ACESSIBILIDADE, ALVOS DE TOQUE E POLIMENTO — set/2026 Bloco aditivo: fica no fim do arquivo de propósito, para vencer as regras anteriores no cascade sem precisar editá-las uma a uma. Nada aqui remove conteúdo ou muda a identidade visual do site. ============================================================ */ /* ---------- 1. Foco de teclado global ---------- Antes, só .estrutura-galeria-item tinha indicador de foco: quem navegava por teclado ficava sem saber onde estava. O anel usa a cor de destaque da marca e só aparece na navegação por teclado (:focus-visible), então o clique de mouse continua limpo, sem contorno. */ :focus-visible{ outline:3px solid var(--lime); outline-offset:3px; border-radius:8px; } /* Em superfícies claras (botão laranja, faixa de areia) o laranja some no fundo — ali o anel vira escuro para manter o contraste de 3:1. */ .btn-primary:focus-visible, .eyebrow:focus-visible, .lang-switch-item.is-active:focus-visible{ outline-color:var(--court-900); } /* Campos de formulário: mantém a borda laranja que já existia E devolve um anel visível, que o outline:none original havia eliminado. */ .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ outline:3px solid var(--lime); outline-offset:2px; } /* ---------- 2. Link "pular para o conteúdo" ---------- Primeiro item tabulável da página. Fica escondido até receber foco. */ .skip-link{ position:absolute; left:16px; top:-100px; z-index:2000; padding:14px 22px; border-radius:0 0 12px 12px; background:var(--lime); color:var(--ink); font-family:var(--font-head); font-weight:700; font-size:.95rem; transition:top .25s var(--ease); } .skip-link:focus{top:0;} /* Utilitário para texto só de leitor de tela (rótulos de ícone etc.). */ .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- 3. Alvos de toque de 44px ---------- Os pontinhos de paginação tinham 34x5px de área clicável. Em vez de engordar o visual, um pseudo-elemento transparente e centralizado amplia só a área de toque — o desenho na tela continua igual. */ .hero-slide-dots button, .athletes-dots button, .news-dots button, .jogos-home-dots button, .lang-switch-item, .tv-video-btn{ position:relative; } .hero-slide-dots button::after, .athletes-dots button::after, .news-dots button::after, .jogos-home-dots button::after, .lang-switch-item::after, .tv-video-btn::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; } /* Controles que já eram redondos: só completam os 44px. */ .burger{width:44px; height:44px;} .estrutura-lightbox-nav{width:44px; height:44px;} /* ---------- 4. Movimento reduzido (global) ---------- Antes o respeito a prefers-reduced-motion cobria só 2 das 18 animações. Aqui vale para a página inteira: quem pediu menos movimento no sistema recebe o conteúdo estático, sem perder nenhuma informação. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } html{scroll-behavior:auto;} /* Blocos que aparecem via scroll reveal precisam nascer visíveis, senão ficariam invisíveis para sempre sem a animação. */ [data-reveal]{opacity:1 !important; transform:none !important;} } /* ---------- 5. Polimento e modernização ---------- Efeitos de hover só onde existe mouse de verdade: no celular, o hover "gruda" após o toque e deixa o card preso no estado ativo. */ @media (hover:none){ .btn-primary:hover, .btn-outline:hover, .btn-coral:hover{transform:none;} } /* Âncoras do menu paravam atrás do cabeçalho fixo; agora param abaixo dele. */ :target, section[id], [id^="secao"]{scroll-margin-top:110px;} /* Títulos deixam de terminar com uma palavra órfã na última linha. */ h1,h2,h3,.section-head h2{text-wrap:balance;} .section-head p,.hero-content p{text-wrap:pretty;} /* Estado de clique perceptível — o site tinha hover, mas nenhum feedback no momento do toque/press. */ .btn:active{transform:translateY(-1px) scale(.99);} .nav-desktop a:active{background:var(--glass);} /* Barra fina de progresso de leitura no topo (preenchida pelo main.js). Puramente decorativa: aria-hidden, não entra na ordem de tabulação. */ .read-progress{ position:fixed; top:0;left:0; height:3px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg,var(--lime),var(--gold)); z-index:1500; pointer-events:none; } /* Imagens que ainda não têm contêiner com altura fixa reservam proporção, evitando o "pulo" do layout enquanto carregam. */ .news-card-img, .athlete-card-img{aspect-ratio:16/10;} /* ---------- 6. Botão pausar/retomar dos carrosséis ---------- Criado pelo main.js ao lado dos pontinhos. Só existe quando o carrossel realmente gira sozinho — exigência da WCAG 2.2.2 para conteúdo que se move automaticamente por mais de 5 segundos. */ .carrossel-pausa{ width:34px; height:34px; flex:none; display:inline-grid; place-items:center; border-radius:50%; border:1px solid var(--glass-border); background:var(--glass); color:var(--white); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .25s ease, border-color .25s ease, color .25s ease; position:relative; } /* área de toque de 44px sem engordar o desenho */ .carrossel-pausa::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; } .carrossel-pausa:hover{background:var(--lime); border-color:var(--lime); color:var(--ink);} /* Ícone de pausa (duas barras) desenhado em CSS. */ .carrossel-pausa-icone{ width:10px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor; box-sizing:border-box; } /* Quando pausado, vira um "play" (triângulo). */ .carrossel-pausa.is-pausado .carrossel-pausa-icone{ width:0; height:0; border-left:11px solid currentColor; border-right:0; border-top:7px solid transparent; border-bottom:7px solid transparent; margin-left:3px; } /* Linha que agrupa os pontinhos e o botão de pausa, criada pelo main.js. */ .carrossel-controles{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } /* No hero os pontinhos ficam alinhados à esquerda, junto do texto; nos carrosséis de atletas/notícias eles já vinham centralizados. */ .news-carousel .carrossel-controles, [data-athletes-carousel] .carrossel-controles{justify-content:center;} /* O .hero-slide-dots trazia margin-top:6px próprio; dentro da linha de controles isso desalinhava o botão em 3px. A margem passa para a linha. */ .carrossel-controles{margin-top:6px;} .carrossel-controles > .hero-slide-dots{margin-top:0;} /* ---------- 8. Correção do cabeçalho em telas médias ---------- PROBLEMA (existia desde antes desta revisão): o menu desktop só era trocado pelo botão sanduíche em 860px, mas o cabeçalho — marca + 6 links + seletor PT/EN + botão de inscrição — precisa de ~1180px para caber. Entre 861px e 1180px o bloco de ações era empurrado para fora do container e o botão ficava cortado (até 209px de estouro), enquanto a marca quebrava em 3 linhas e triplicava a altura da barra (44px -> 148px). Essa faixa cobre iPad deitado (1024), notebooks menores e qualquer janela de navegador não maximizada. SOLUÇÃO: antecipar a troca para 1200px, que é o ponto onde o menu completo realmente deixa de caber. O bloco de 860px acima continua valendo para as outras regras dele (formulário e selo do hero). */ @media (max-width:1200px){ .nav-desktop{display:none;} .burger{display:flex;} } /* ---------- 9. Botões longos em telas muito estreitas ---------- PROBLEMA (também anterior a esta revisão): .btn tem white-space:nowrap e 30px de padding de cada lado. Um rótulo longo — e eles são editáveis no painel — não cabe em telas de 320px e vaza para fora da tela. Ex.: "Conhecer a estrutura completa" media 336px numa tela de 320px. SOLUÇÃO: em telas estreitas o texto pode quebrar em duas linhas e o padding encolhe. Vale para qualquer rótulo que o cliente venha a digitar, não só para o texto de hoje. */ .btn{max-width:100%;} @media (max-width:400px){ .btn{ white-space:normal; padding-left:22px; padding-right:22px; text-align:center; line-height:1.25; } } /* ---------- 10. Menu mobile em telas de pouca altura ---------- PROBLEMA (anterior a esta revisão): .mobile-nav ocupa a tela inteira (inset:0) mas ficava com overflow visível. Em telas baixas — 320x640, celular deitado, janela curta — o conteúdo (6 links grandes + seletor de idioma + botão) soma mais que a altura disponível e transborda a caixa. Como o menu fechado fica logo ACIMA da tela (translateY(-100%)), esse excesso aparecia no topo da página: via-se o seletor PT/EN flutuando sobre o cabeçalho. E, com o menu aberto, os últimos itens ficavam inalcançáveis, sem como rolar até eles. SOLUÇÃO: rolagem interna. Resolve os dois casos de uma vez. */ .mobile-nav{ overflow-y:auto; -webkit-overflow-scrolling:touch; }