/* Direction: cinematic product page — designed for Fusión, not a copy of the reference. */
:root {
  --ink: #09090b;
  --paper: #101114;
  --paper-deep: #17191e;
  --lime: #d5ff32;
  --orange: #ff6a39;
  --violet: #8d7dff;
  --line: rgba(255,255,255,.14);
  --muted: rgba(255,255,255,.54);
}

body {
  color: #f4f4ef;
  background: #09090b;
  background-image: radial-gradient(circle at 75% -5%, rgba(213,255,50,.11), transparent 28%), radial-gradient(circle at 3% 60%, rgba(141,125,255,.12), transparent 28%);
}
.bg-noise { opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
.confetti { display: none; }
.app-shell { width: min(1440px, calc(100% - 64px)); padding-top: 27px; }
.event-chip { background: transparent; border: 1px solid var(--line); box-shadow: none; border-radius: 999px; padding: 6px 13px 6px 6px; }
.event-chip > span { width: 29px; height: 29px; border-radius: 50%; background: var(--lime); font-size: .85rem; }
.event-chip strong { font-size: .61rem; letter-spacing: .1em; }.event-chip small { font-size: .53rem; }
.live-box { color: #09090b; border: 0; background: #f4f4ef; padding: 10px 14px; font-size: .61rem; }.live-dot { background: var(--orange); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }.display-launch, .display-toolbar button { border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: transparent; color: #f4f4ef; padding: 10px 13px; font: 800 .58rem 'Sora', sans-serif; letter-spacing: .1em; cursor: pointer; transition: background .2s ease, color .2s ease; }.display-launch:hover, .display-toolbar button:hover { background: var(--lime); border-color: var(--lime); color: #09090b; }.display-toolbar { display: none; }

.hero { min-height: 495px; padding: 86px 0 42px; overflow: hidden; }
.hero::before { content: 'TEMPORADA 2026 — 2027'; top: 66px; color: rgba(255,255,255,.56); font-size: .56rem; letter-spacing: .25em; }
.hero::after { content: ''; position: absolute; width: min(47vw, 620px); aspect-ratio: 1; top: 45px; left: 50%; transform: translateX(-50%); border-radius: 50%; z-index: -1; background: radial-gradient(circle at 40% 34%, #4b4d54 0 1%, #202126 24%, #0b0c0f 56%, #30323a 57%, #0a0a0c 63%, transparent 64%), conic-gradient(from 0deg, transparent 0 15%, rgba(213,255,50,.65) 17% 18%, transparent 20% 48%, rgba(255,106,57,.56) 50% 51%, transparent 53% 100%); opacity: .9; filter: drop-shadow(0 30px 55px rgba(0,0,0,.75)); }
.logo-word { position: relative; z-index: 1; transform: none; line-height: .75; mix-blend-mode: screen; }
.logo-word span { color: #eeeeea; font-family: 'Sora', sans-serif; font-size: clamp(1.1rem, 2.5vw, 2.1rem); font-weight: 600; letter-spacing: .35em; margin-right: -.35em; }
.logo-word strong { color: #f4f4ef; font-family: 'Sora', sans-serif; font-size: clamp(4.8rem, 11vw, 10.5rem); font-weight: 900; letter-spacing: -.095em; text-shadow: none; }
.table-title { margin-top: 36px; color: #f4f4ef; font-size: .59rem; letter-spacing: .22em; }.table-title i { width: 28px; height: 1px; background: rgba(255,255,255,.55); }

.summary-grid { gap: 0; margin: 0 0 64px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.025); box-shadow: none; }
.summary-card { min-height: 146px; border: 0; border-radius: 0; border-right: 1px solid var(--line); background: transparent; box-shadow: none; padding: 25px 30px; }.summary-card:last-child { border-right: 0; }.summary-card span, .summary-card small { color: var(--muted); font-size: .59rem; }.summary-card strong { color: #f4f4ef; font-size: clamp(2.5rem, 4vw, 4.4rem); letter-spacing: -.075em; }.leader-card strong { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -.07em; }.leader-card, .purple-card { background: transparent; }

.glass-card, .section-panel, .ranking-stage { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.ranking-stage { padding: 0; margin-bottom: 82px; }.section-title span, .eyebrow { color: var(--lime); font-size: .58rem; letter-spacing: .22em; }.section-title h2 { color: #f4f4ef; font-family: 'Sora', sans-serif; font-size: clamp(2.8rem, 5vw, 5.2rem); font-weight: 700; letter-spacing: -.09em; line-height: .85; }.ranking-stage .section-title { padding-bottom: 24px; border-bottom: 1px solid var(--line); }.ranking-stage .section-title span { color: var(--lime); }
.ranking-cards { grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 1px; background: var(--line); border-bottom: 1px solid var(--line); }.rank-card { min-height: 390px; padding: 25px; border: 0; border-radius: 0; background: #101114; box-shadow: none; }.rank-card::before { width: 190px; height: 190px; right: -80px; top: -75px; border-width: 1px; opacity: .55; }.position-badge { width: 29px; height: 29px; background: transparent; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; font-size: .68rem; }.rank-1 .position-badge { background: var(--lime); color: #09090b; border-color: var(--lime); }.rank-card h3 { margin: 68px 0 15px; font-family: 'Sora', sans-serif; font-size: clamp(1.35rem, 2vw, 2.15rem); font-weight: 700; letter-spacing: -.075em; line-height: .93; }.team-label { background: transparent; border: 1px solid color-mix(in srgb, var(--team-color) 55%, transparent); border-radius: 99px; color: #f4f4ef; padding: 5px 8px; font-size: .53rem; }.rank-card p { font-size: .56rem; margin-top: auto; }.rank-card strong { font-size: 3.15rem; }.last-score { margin-top: 21px; font-size: .62rem; }.rank-card.quitamanchas { background: #e9e8e1; color: #101114; }.rank-card.quitamanchas h3, .rank-card.quitamanchas p, .rank-card.quitamanchas .last-score small { color: #101114; }.rank-card.quitamanchas .team-label { border-color: rgba(16,18,27,.35); color: #101114; }.rank-card.the-black-boys { border: 0; background: #09090b; }

.teams-panel { padding: 0; margin-bottom: 82px; }.teams-grid { margin-top: 26px; gap: 10px; }.team-card { min-height: 195px; padding: 19px; background: #17191e; border: 1px solid var(--line); border-radius: 10px; }.team-card::after { opacity: .12; }.team-card h3 { font-size: 1rem; }.members-list span { background: rgba(255,255,255,.05); color: #f4f4ef; border-color: rgba(255,255,255,.1); }.members-count { color: var(--muted); }

.two-columns { gap: 48px; }.moves-panel { padding: 0; }.moves-list { gap: 0; margin-top: 26px; border-top: 1px solid var(--line); }.move-item { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }.move-icon { background: rgba(255,255,255,.06); }.move-copy span { color: var(--muted); }.move-points { color: var(--lime); }.champion-card { padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, #20223a, #101114 65%); box-shadow: none; }.champion-card .eyebrow { color: var(--lime); }.champion-card h3, .prize-content h3 { font-family: 'Sora', sans-serif; font-weight: 800; letter-spacing: -.08em; }.prize-card { background: rgba(255,255,255,.05); border-color: var(--line); }.prize-content h3 { color: var(--lime); }.prize-item { background: rgba(0,0,0,.2); }
.footer-line { padding-top: 28px; border-top: 1px solid var(--line); }

/* Full-screen loading sequence, removed after the first data sync. */
.is-loading { overflow: hidden; }
.is-loading .app-shell, .is-loading .bg-noise { opacity: 0; }
.site-loader { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; overflow: hidden; color: #f4f4ef; background: radial-gradient(circle at 50% 48%, #242830 0, #111216 34%, #070708 75%); transition: opacity .65s ease, visibility .65s ease; }
.site-loader::before, .site-loader::after { content: ''; position: absolute; inset: -20%; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; transform: perspective(440px) rotateX(62deg) translateY(15%); mask-image: linear-gradient(to bottom, transparent, #000 32%, transparent 78%); }
.site-loader::after { background: radial-gradient(circle at 50% 50%, rgba(255,90,0,.22), transparent 17%), radial-gradient(circle at 58% 40%, rgba(213,255,50,.13), transparent 22%); transform: none; mask-image: none; }
.loader-copy { position: relative; z-index: 2; width: min(360px, calc(100vw - 48px)); text-align: center; }.loader-kicker { display: block; margin-bottom: 14px; color: var(--lime); font-size: .58rem; font-weight: 800; letter-spacing: .28em; }.loader-copy strong { display: block; font-family: 'Sora', sans-serif; font-size: clamp(2.5rem, 7vw, 4.7rem); font-weight: 800; line-height: .8; letter-spacing: -.08em; }.loader-copy em { color: #ff5a00; font-style: normal; }.loader-progress { height: 3px; margin: 28px 0 11px; overflow: hidden; background: rgba(255,255,255,.2); }.loader-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--lime), #ff5a00); box-shadow: 0 0 22px #ff5a00; transition: width .18s ease; }.loader-copy small { color: rgba(255,255,255,.62); font-size: .59rem; font-weight: 800; letter-spacing: .16em; }.loader-copy small b { color: #f4f4ef; }
.loader-core { position: absolute; z-index: 1; display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: radial-gradient(circle at 35% 30%, #3f444d, #101114 63%); box-shadow: 0 0 90px rgba(255,90,0,.22), inset 0 0 32px rgba(255,255,255,.11); animation: loader-pulse 1.8s ease-in-out infinite; }.loader-core span { color: var(--lime); font-size: 3.3rem; font-weight: 900; font-style: italic; }.loader-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }.loader-orbit::after { content: ''; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #ff5a00; box-shadow: 0 0 18px #ff5a00; }.loader-orbit-one { width: 285px; height: 285px; animation: loader-spin 3.8s linear infinite; }.loader-orbit-one::after { top: 22px; left: 33px; }.loader-orbit-two { width: 390px; height: 390px; border-color: rgba(213,255,50,.22); animation: loader-spin 6.4s linear infinite reverse; }.loader-orbit-two::after { right: 44px; bottom: 32px; background: var(--lime); box-shadow: 0 0 18px var(--lime); }.site-loader.is-finished { opacity: 0; visibility: hidden; }@keyframes loader-spin { to { transform: rotate(360deg); } }@keyframes loader-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 120px rgba(255,90,0,.36), inset 0 0 42px rgba(255,255,255,.14); } }
@media (prefers-reduced-motion: reduce) { .loader-core, .loader-orbit { animation: none; } }

/* Refined loader composition: one focal point, no visual collisions. */
.site-loader { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: radial-gradient(ellipse at 50% 48%, #24262d 0, #121317 37%, #09090b 76%); }
.site-loader::before { opacity: .42; background-size: 64px 64px; transform: perspective(560px) rotateX(64deg) translateY(20%); }
.site-loader::after { opacity: .58; background: radial-gradient(circle at 50% 50%, rgba(255,90,0,.2), transparent 18%), radial-gradient(circle at 62% 34%, rgba(213,255,50,.11), transparent 25%); }
.loader-copy { display: flex; flex-direction: column; align-items: center; width: min(460px, calc(100vw - 48px)); padding-top: 2px; }
.loader-kicker { margin-bottom: 17px; font-size: .56rem; }
.loader-copy strong { font-size: clamp(2.5rem, 6.5vw, 4.25rem); line-height: .86; letter-spacing: -.09em; }
.loader-copy em { display: block; margin-top: 3px; }
.loader-progress { width: min(250px, 70vw); margin: 29px auto 13px; }
.loader-copy small { font-size: .55rem; }
.loader-core { width: 250px; height: 250px; opacity: .5; background: radial-gradient(circle at 35% 28%, #50545b, #17181d 58%, #0a0b0d 100%); }
.loader-core span { display: none; }
.loader-orbit-one { width: 340px; height: 340px; border-color: rgba(213,255,50,.28); opacity: .72; }
.loader-orbit-one::after { top: 28px; left: 39px; width: 9px; height: 9px; }
.loader-orbit-two { display: none; }
@media (max-width: 620px) { .loader-copy strong { font-size: 2.65rem; }.loader-orbit-one { width: 290px; height: 290px; }.loader-core { width: 215px; height: 215px; } }

/* Dedicated viewer for a TV or secondary display. */
.display-mode .topbar, .display-mode .teams-panel, .display-mode .two-columns, .display-mode .footer-line { display: none; }
.display-mode .app-shell { width: min(100% - 72px, 1920px); padding-top: 24px; }.display-mode .display-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .16em; }.display-mode .hero { min-height: 300px; padding-top: 46px; padding-bottom: 14px; }.display-mode .hero::before { top: 14px; }.display-mode .hero::after { top: 26px; }.display-mode .summary-grid { margin-top: -18px; margin-bottom: 48px; }.display-mode .ranking-stage { margin-bottom: 0; }.display-mode .ranking-cards { grid-template-columns: repeat(4, 1fr); }.display-mode .rank-card { min-height: min(49vh, 510px); }.display-mode .rank-card h3 { font-size: clamp(1.5rem, 2.4vw, 3rem); }.display-mode .display-launch { display: none; }
@media (max-width: 850px) { .topbar-actions { gap: 7px; }.display-launch { font-size: .5rem; padding: 9px; }.display-mode .app-shell { width: min(100% - 28px, 1920px); }.display-mode .ranking-cards { grid-template-columns: repeat(2, 1fr); }.display-mode .hero { min-height: 235px; }.display-mode .display-toolbar span { display: none; } }

/* Phone cards: team name and identity tag share one clean header row. */
@media (max-width: 620px) {
  .rank-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  .rank-card::before { width: 165px; height: 165px; top: -118px; right: -88px; }
  .rank-card .rank-heading h3 { flex: 1 1 auto; min-width: 0; margin: 42px 0 0; font-size: clamp(1.55rem, 7.8vw, 2.1rem); line-height: .92; }
  .rank-heading .team-label { flex: 0 0 auto; margin-top: 42px; padding: 5px 7px; font-size: .49rem; white-space: nowrap; }
  .rank-card p { margin: auto 0 6px; }
  .rank-card strong { line-height: .8; }
  .last-score { margin-top: 17px; padding-top: 11px; }
}

/* Ranking polish: tighter handoff from the opener and team-owned typography. */
.summary-grid { margin-top: -42px; position: relative; z-index: 2; }
.leader-card strong { color: var(--leader-color, #f4f4ef); }
.leader-card strong.is-black-team { color: #09090b; -webkit-text-stroke: 1px #f4f4ef; text-stroke: 1px #f4f4ef; }
.team-mark { display: none !important; }
.rank-card h3 { color: var(--team-color); }
.rank-card.quitamanchas { background: #17181b; color: #f4f4ef; }
.rank-card.quitamanchas h3 { color: #fff; }
.rank-card.quitamanchas p, .rank-card.quitamanchas .last-score small { color: rgba(255,255,255,.65); }
.rank-card.quitamanchas .team-label { border-color: rgba(255,255,255,.42); color: #fff; }
.rank-card.quitamanchas .last-score { border-color: rgba(255,255,255,.24); }
.rank-card.the-black-boys h3 { color: #09090b; -webkit-text-stroke: 1px #f4f4ef; text-stroke: 1px #f4f4ef; }

/* A quieter, readable title treatment for the opening scene. */
.hero { min-height: 520px; padding: 100px 0 52px; }
.hero::before { top: 58px; }
.hero::after { width: min(82vw, 1120px); aspect-ratio: 1.9; top: 95px; border-radius: 42% 58% 48% 52% / 58% 42% 58% 42%; opacity: .78; background: radial-gradient(ellipse at 27% 52%, rgba(255,90,0,.2), transparent 21%), radial-gradient(ellipse at 68% 34%, rgba(213,255,50,.11), transparent 26%), radial-gradient(ellipse at 51% 57%, #24262d 0, #15161b 40%, #0b0c0f 72%, transparent 73%); filter: blur(2px) drop-shadow(0 30px 55px rgba(0,0,0,.72)); }
.logo-word { gap: 20px; line-height: 1; }
.logo-word span { min-height: 1.2em; font-size: clamp(.85rem, 1.7vw, 1.3rem); letter-spacing: .48em; }
.logo-word strong { min-height: .98em; color: #ff5a00; font-size: clamp(4.5rem, 10.3vw, 9.7rem); line-height: .8; letter-spacing: -.095em; text-shadow: 0 12px 32px rgba(255,90,0,.16); }
.logo-word .is-typing::after { content: '|'; display: inline-block; margin-left: .04em; color: var(--lime); font-weight: 400; animation: typing-cursor .72s steps(1) infinite; }
@keyframes typing-cursor { 50% { opacity: 0; } }

@media (max-width: 1050px) { .ranking-cards { grid-template-columns: repeat(2, 1fr); }.summary-grid { grid-template-columns: repeat(3, 1fr); }.summary-card { padding: 20px; } }
@media (min-width: 621px) {
  .summary-card {
    position: relative;
    height: 100%;
    min-height: 190px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .summary-card .summary-content {
    position: absolute;
    top: 50%;
    right: 30px;
    left: 30px;
    transform: translateY(-50%);
  }
  /* Compatibility with the previous index.php, which has no summary-content wrapper. */
  .summary-card:not(.leader-card) > span {
    position: absolute;
    top: calc(50% - 45px);
    right: 30px;
    left: 30px;
  }
  .summary-card:not(.leader-card) > strong {
    position: absolute;
    top: calc(50% - 22px);
    right: 30px;
    left: 30px;
    margin: 0;
  }
  .summary-card:not(.leader-card) > small {
    position: absolute;
    top: calc(50% + 43px);
    right: 30px;
    left: 30px;
  }
}
@media (max-width: 620px) { .app-shell { width: min(100% - 28px, 1440px); }.hero { min-height: 405px; padding-top: 82px; }.hero::after { width: 110vw; top: 92px; }.logo-word { gap: 15px; }.logo-word span { font-size: .62rem; }.logo-word strong { font-size: 4.25rem; }.summary-grid { grid-template-columns: 1fr; border-radius: 10px; margin-top: -18px; margin-bottom: 58px; }.summary-card { min-height: 112px; border-right: 0; border-bottom: 1px solid var(--line); }.summary-card:last-child { border-bottom: 0; }.ranking-stage { margin-bottom: 62px; }.ranking-cards { grid-template-columns: 1fr; }.rank-card { min-height: 300px; }.rank-card h3 { margin-top: 42px; font-size: 2rem; }.teams-panel { margin-bottom: 60px; }.teams-grid { grid-template-columns: 1fr; }.two-columns { gap: 58px; }.champion-card { padding: 21px; } }