/* Web propia del club (fanzone). Luminosa, animada y con los colores del club.
   Todo sale de variables: --c1 principal, --c2 secundario, --ac acento, --ink texto fuerte, --bg fondo, --tint fondo suave, --sf tarjetas, --tx texto, --mu texto suave, --ln líneas, --r1/--r2 esquinas, --rb botones. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body.cb { margin: 0; color: var(--tx); font-family: var(--fb); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; background: var(--bg); }
body.cb[data-font="modern"] { --fd: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "SF Pro Display", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --fb: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --dw: 800; --dl: -.035em; --dt: none; }
body.cb[data-font="classic"] { --fd: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; --fb: Georgia, "Iowan Old Style", "Palatino Linotype", serif; --dw: 700; --dl: -.015em; --dt: none; }
body.cb[data-font="sport"] { --fd: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif; --fb: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --dw: 700; --dl: .005em; --dt: uppercase; }
:where(.cb a) { color: inherit; } .cb img { max-width: 100%; }
.cb-wrap { width: min(1240px, 100% - 44px); margin-inline: auto; }
.cb-d { font-synthesis: none; font-family: var(--fd); font-weight: var(--dw); letter-spacing: var(--dl); text-transform: var(--dt); line-height: 1.02; }
/* progreso de lectura */
.cb-prog { position: fixed; left: 0; top: 0; height: 4px; width: 0; z-index: 90; background: linear-gradient(90deg, var(--c1), var(--ac)); box-shadow: 0 0 14px color-mix(in srgb, var(--ac) 60%, transparent); }
/* botones */
.cb-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 28px; border: 2px solid transparent; border-radius: var(--rb); font: 800 .9rem/1 var(--fb); letter-spacing: .02em; text-decoration: none; cursor: pointer; color: var(--acon); background: var(--ac); box-shadow: 0 16px 30px -16px var(--ac); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.cb-btn::after { content: ""; position: absolute; inset: 0; width: 45%; transform: translateX(-130%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); } .cb-btn:hover::after { animation: cb-shine .8s; } .cb-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 34px -16px var(--ac); }
.cb-btn.ghost { color: var(--ink); background: color-mix(in srgb, var(--sf) 70%, transparent); border-color: color-mix(in srgb, var(--ink) 22%, transparent); box-shadow: none; } .cb-btn.ghost:hover { border-color: var(--ac); }
.cb-btn.sm { min-height: 42px; padding: 0 20px; font-size: .82rem; }
@keyframes cb-shine { to { transform: translateX(330%) skewX(-20deg); } }
/* anuncio */
.cb-ann { display: block; position: relative; overflow: hidden; text-align: center; padding: 9px 16px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-decoration: none; color: #fff; background: linear-gradient(90deg, var(--ink), color-mix(in srgb, var(--c1) 55%, var(--ink)), var(--ink)); background-size: 200% 100%; animation: cb-flow 9s linear infinite; } .cb-ann b { color: #fff; border-bottom: 2px solid var(--ac); }
@keyframes cb-flow { to { background-position: 200% 0; } }
/* cabecera */
.cb-head { position: sticky; top: 0; z-index: 80; color: var(--hdt); background: var(--hd); border-bottom: 1px solid color-mix(in srgb, var(--hdt) 10%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .3s; } .cb-head.on { box-shadow: 0 14px 40px -24px rgba(8, 20, 40, .45); }
.cb-head .cb-wrap { display: flex; align-items: center; gap: 22px; min-height: 92px; transition: min-height .3s; } .cb-head.on .cb-wrap { min-height: 70px; }
.cb-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.cb-logo { display: block; height: 62px; width: auto; max-width: 240px; object-fit: contain; transition: transform .3s, height .3s; } .cb-head.on .cb-logo { height: 48px; } .cb-brand:hover .cb-logo { transform: scale(1.04); }
.cb-mono { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 800 1.05rem/1 var(--fd); color: var(--c1on); background: linear-gradient(135deg, var(--c1), var(--ink)); }
.cb-brandtxt { min-width: 0; } .cb-brandtxt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--dw) 1.08rem/1.1 var(--fd); letter-spacing: var(--dl); text-transform: var(--dt); } .cb-brandtxt small { display: block; margin-top: 2px; font-size: .64rem; opacity: .6; }
.cb-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .cb-nav a { position: relative; padding: 9px 15px; font-size: .92rem; font-weight: 650; text-decoration: none; border-radius: 999px; transition: background .2s, color .2s; } .cb-nav a:hover { background: color-mix(in srgb, var(--c1) 14%, transparent); }
.cb-act { display: flex; align-items: center; gap: 10px; flex: none; }
.cb-me { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: .88rem; background: color-mix(in srgb, var(--c1) 14%, transparent); } .cb-me i { font-style: normal; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-weight: 900; color: var(--acon); background: var(--ac); } .cb-me i img { width: 100%; height: 100%; object-fit: cover; }
.cb-burger { display: none; width: 46px; height: 46px; border-radius: 14px; border: 0; cursor: pointer; font-size: 1.3rem; color: inherit; background: color-mix(in srgb, var(--c1) 16%, transparent); }
/* cabecera principal */
.cb-hero { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 56px) 0 clamp(60px, 8vw, 110px); background: linear-gradient(180deg, var(--tint), var(--bg)); }
.cb-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; animation: cb-blob 16s ease-in-out infinite alternate; } .cb-blob.b1 { width: 520px; height: 520px; left: -140px; top: -120px; background: var(--c1); } .cb-blob.b2 { width: 460px; height: 460px; right: -100px; top: 40px; background: var(--ac); opacity: .28; animation-delay: -6s; } .cb-blob.b3 { width: 380px; height: 380px; left: 38%; bottom: -160px; background: var(--c2); opacity: .3; animation-delay: -11s; }
@keyframes cb-blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.18); } 100% { transform: translate(-30px, 14px) scale(.94); } }
.cb-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .22; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.cb-hero .cb-wrap { position: relative; z-index: 2; }
.cb-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(26px, 4vw, 64px); align-items: center; }
.cb-hero[data-layout="center"] .cb-hero-in { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .cb-hero[data-layout="center"] .cb-lead { margin-inline: auto; } .cb-hero[data-layout="center"] .cb-cta { justify-content: center; } .cb-hero[data-layout="center"] .cb-stage { max-width: 560px; }
.cb-hero[data-layout="banner"] .cb-hero-bg { opacity: .55; -webkit-mask-image: none; mask-image: none; } .cb-hero[data-layout="banner"] .cb-hero-in { grid-template-columns: minmax(0, 1fr); } .cb-hero[data-layout="banner"] .cb-stage { display: none; }
.cb-tag { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--ink); background: color-mix(in srgb, var(--sf) 85%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); box-shadow: 0 10px 24px -14px rgba(8, 20, 40, .4); } .cb-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 60%, transparent); animation: cb-ping 1.8s infinite; }
@keyframes cb-ping { 70% { box-shadow: 0 0 0 10px transparent; } }
.cb-kick { margin: 20px 0 6px; font-size: .84rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--act); }
.cb-title { margin: 0; color: var(--ink); font-size: clamp(2.5rem, 6.6vw, 5.6rem); text-wrap: balance; overflow-wrap: anywhere; }
.cb-title em { position: relative; font-style: normal; color: transparent; background: linear-gradient(100deg, var(--act), color-mix(in srgb, var(--c1) 80%, var(--ac))); -webkit-background-clip: text; background-clip: text; background-size: 200% 100%; animation: cb-flow 6s linear infinite; }
.cb-title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .12em; border-radius: 99px; background: linear-gradient(90deg, var(--ac), var(--c1)); transform-origin: left; animation: cb-draw 1.1s .5s cubic-bezier(.2, .8, .2, 1) both; } @keyframes cb-draw { from { transform: scaleX(0); } }
.cb-lead { max-width: 54ch; margin: 22px 0 0; font-size: clamp(1.02rem, 1.7vw, 1.22rem); color: var(--mu); }
.cb-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cb-state { margin: 24px 0 0; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 99px; font-size: .92rem; background: color-mix(in srgb, var(--sf) 85%, transparent); border: 1px solid var(--ln); } .cb-state i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; color: var(--acon); background: var(--ac); } .cb-state b { color: var(--ink); }
.cb-rise { animation: cb-rise .9s cubic-bezier(.2, .8, .2, 1) both; } .cb-rise.d1 { animation-delay: .08s; } .cb-rise.d2 { animation-delay: .18s; } .cb-rise.d3 { animation-delay: .3s; } .cb-rise.d4 { animation-delay: .42s; } .cb-rise.d5 { animation-delay: .54s; } @keyframes cb-rise { from { opacity: 0; transform: translateY(30px); } }
/* escenario de la derecha */
.cb-stage { position: relative; min-width: 0; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.cb-ring { position: absolute; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--c1) 55%, transparent); animation: cb-spin 40s linear infinite; } .cb-ring.r1 { inset: 6%; } .cb-ring.r2 { inset: 20%; border-style: solid; border-color: color-mix(in srgb, var(--ac) 35%, transparent); animation-direction: reverse; animation-duration: 55s; } @keyframes cb-spin { to { transform: rotate(360deg); } }
.cb-disc { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c1) 55%, #fff), var(--c1) 60%, var(--ink)); box-shadow: 0 60px 90px -50px var(--ink); overflow: hidden; } .cb-disc::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .18) 0 18px, transparent 18px 36px); animation: cb-slide 14s linear infinite; } @keyframes cb-slide { to { background-position: 144px 0; } }
.cb-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; mix-blend-mode: multiply; }
.cb-front { position: relative; z-index: 3; width: 78%; animation: cb-float 7s ease-in-out infinite; } .cb-back { position: absolute; z-index: 2; width: 62%; left: -4%; bottom: 4%; transform: rotate(-9deg); animation: cb-float 9s -3s ease-in-out infinite; filter: drop-shadow(0 30px 30px rgba(8, 20, 40, .35)); }
@keyframes cb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.cb-fchip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; font-size: .84rem; font-weight: 800; color: var(--ink); background: var(--sf); box-shadow: 0 20px 36px -18px rgba(8, 20, 40, .45); animation: cb-float 6s ease-in-out infinite; } .cb-fchip.c1 { left: -4%; top: 4%; } .cb-fchip.c2 { left: -2%; bottom: 0; animation-delay: -2s; } .cb-fchip.c3 { right: 2%; bottom: 2%; animation-delay: -4s; } .cb-fchip b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: .9rem; color: var(--acon); background: var(--ac); }
.cb-match { width: 100%; border-radius: var(--r1); overflow: hidden; color: var(--ink); background: var(--sf); border: 1px solid var(--ln); box-shadow: 0 50px 70px -40px rgba(8, 20, 40, .6); }
.cb-match-h { display: flex; justify-content: space-between; gap: 10px; padding: 13px 18px; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(100deg, var(--ink), color-mix(in srgb, var(--c1) 50%, var(--ink))); } .cb-match-h b { color: #fff; opacity: .9; }
.cb-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 20px 16px 10px; text-align: center; } .cb-team strong { display: block; margin-top: 8px; font: var(--dw) .95rem/1.1 var(--fd); letter-spacing: var(--dl); text-transform: var(--dt); overflow-wrap: anywhere; }
.cb-shield { width: 72px; height: 72px; margin-inline: auto; border-radius: 20px; display: grid; place-items: center; overflow: hidden; font: 800 1.3rem/1 var(--fd); color: var(--ink); background: color-mix(in srgb, var(--c1) 16%, var(--sf)); border: 2px solid color-mix(in srgb, var(--c1) 45%, transparent); } .cb-shield img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } .cb-vs { font-size: .78rem; font-weight: 900; color: var(--mu); }
.cb-when { text-align: center; padding: 2px 16px 0; } .cb-when b { display: block; font-size: .98rem; } .cb-when span { font-size: .82rem; color: var(--mu); }
.cb-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 16px 4px; } .cb-count div { text-align: center; padding: 10px 2px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, var(--ink), color-mix(in srgb, var(--c1) 45%, var(--ink))); } .cb-count b { display: block; font: 800 1.45rem/1 var(--fd); font-variant-numeric: tabular-nums; } .cb-count small { font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.cb-match-f { padding: 12px 16px 18px; text-align: center; } .cb-match-f p { margin: 0 0 10px; font-size: .78rem; color: var(--mu); } .cb-match-f .cb-btn { width: 100%; }
.cb-tilt { transition: transform .25s ease-out; will-change: transform; }
/* cinta en movimiento */
.cb-tape { overflow: hidden; padding: 16px 0; color: #fff; background: linear-gradient(100deg, var(--ink), color-mix(in srgb, var(--c1) 50%, var(--ink))); } .cb-tape .trk { display: flex; width: max-content; animation: cb-mq 38s linear infinite; } .cb-tape:hover .trk { animation-play-state: paused; } .cb-tape span { padding: 0 28px; font: var(--dw) 1.15rem/1 var(--fd); letter-spacing: var(--dl); text-transform: var(--dt); white-space: nowrap; } .cb-tape span::after { content: "✦"; margin-left: 56px; color: var(--ac); } @keyframes cb-mq { to { transform: translateX(-50%); } }
/* secciones */
.cb-sec { position: relative; padding: clamp(54px, 8vw, 104px) 0; } main > .cb-sec:nth-of-type(even) { background: linear-gradient(180deg, var(--tint), color-mix(in srgb, var(--tint) 55%, var(--bg))); }
.cb-head2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.cb-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--act); } .cb-eyebrow::before { content: ""; width: 30px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--ac), var(--c1)); }
.cb-h2 { margin: 12px 0 10px; color: var(--ink); font-size: clamp(2rem, 4.8vw, 3.5rem); text-wrap: balance; overflow-wrap: anywhere; } .cb-sub { margin: 0; max-width: 60ch; color: var(--mu); font-size: 1.05rem; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } .cb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; font: 800 .92rem/1 var(--fb); cursor: pointer; color: var(--ink); background: var(--sf); border: 1.5px solid var(--ln); box-shadow: 0 10px 20px -16px rgba(8, 20, 40, .5); transition: transform .2s, background .2s, color .2s, border-color .2s; } .cb-chip small { padding: 2px 8px; border-radius: 99px; font-size: .74rem; background: color-mix(in srgb, var(--c1) 18%, transparent); } .cb-chip:hover { transform: translateY(-2px); border-color: var(--ac); } .cb-chip.on { color: var(--acon); background: var(--ac); border-color: var(--ac); } .cb-chip.on small { background: rgba(255, 255, 255, .25); }
/* tarjetas */
.cb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 22px; }
.cb-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r1); text-decoration: none; color: var(--tx); background: var(--sf); border: 1px solid var(--ln); box-shadow: 0 24px 40px -30px rgba(8, 20, 40, .45); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; } .cb-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--ac) 55%, var(--ln)); box-shadow: 0 40px 60px -34px rgba(8, 20, 40, .55); }
.cb-img { position: relative; aspect-ratio: 4 / 3.2; display: grid; place-items: center; overflow: hidden; background: radial-gradient(240px 190px at 50% 40%, color-mix(in srgb, var(--ac) 25%, transparent), transparent 70%), linear-gradient(150deg, color-mix(in srgb, var(--c1) 45%, #fff), color-mix(in srgb, var(--c1) 85%, var(--ink))); } .cb-img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .14) 0 14px, transparent 14px 28px); } .cb-img img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; } .cb-card:hover .cb-img img { transform: scale(1.08); } .cb-img em { position: relative; z-index: 1; font-style: normal; font-size: 3.6rem; filter: drop-shadow(0 12px 14px rgba(8, 20, 40, .35)); animation: cb-float 5s ease-in-out infinite; }
.cb-chip-s, .cb-chip-t, .cb-chip-a { position: absolute; z-index: 3; padding: 6px 13px; border-radius: 99px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; } .cb-chip-s { left: 12px; top: 12px; color: var(--ink); background: rgba(255, 255, 255, .94); } .cb-chip-t { right: 12px; top: 12px; color: var(--acon); background: var(--ac); } .cb-chip-a { left: 12px; bottom: 12px; color: #fff; background: var(--ink); }
.cb-card.live .cb-chip-s::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #10B981; animation: cb-ping 1.8s infinite; }
.cb-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 20px 20px; } .cb-by { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--act); } .cb-body h3 { margin: 0; color: var(--ink); font-size: 1.15rem; line-height: 1.22; letter-spacing: -.015em; } .cb-body p { margin: 0; font-size: .9rem; color: var(--mu); }
.cb-bar { height: 8px; border-radius: 8px; margin-top: 6px; overflow: hidden; background: color-mix(in srgb, var(--c1) 18%, transparent); } .cb-bar u { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--c1), var(--ac)); transform-origin: left; animation: cb-draw 1.2s .3s both; }
.cb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; } .cb-foot b { font-size: 1.15rem; line-height: 1.2; color: var(--ink); } .cb-foot b small { font-size: .72rem; font-weight: 700; color: var(--mu); } .cb-foot .cb-btn { min-height: 40px; padding: 0 20px; font-size: .78rem; }
.cb-card.big { grid-column: span 2; grid-row: span 2; } .cb-card.big .cb-img { aspect-ratio: auto; flex: 1; min-height: 300px; } .cb-card.big .cb-body { flex: none; } .cb-card.big h3 { font: var(--dw) clamp(1.5rem, 3vw, 2.3rem)/1.05 var(--fd); letter-spacing: var(--dl); text-transform: var(--dt); }
.cb-empty { padding: 34px; border-radius: var(--r1); text-align: center; color: var(--mu); background: var(--sf); border: 1.5px dashed var(--ln); }
/* hazte socio */
.cb-member { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 70px); align-items: center; padding: clamp(26px, 4.5vw, 62px); border-radius: var(--r2); color: var(--tx); background: linear-gradient(135deg, var(--sf), color-mix(in srgb, var(--c1) 22%, var(--sf))); border: 1px solid var(--ln); box-shadow: 0 50px 80px -56px rgba(8, 20, 40, .6); } .cb-member::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 320px at 100% 0, color-mix(in srgb, var(--ac) 26%, transparent), transparent 65%), radial-gradient(420px 300px at 0 100%, color-mix(in srgb, var(--c1) 40%, transparent), transparent 65%), repeating-linear-gradient(115deg, color-mix(in srgb, var(--c1) 12%, transparent) 0 26px, transparent 26px 52px); } .cb-member > * { position: relative; }
.cb-member .cb-btn.ghost { color: var(--ink); background: var(--sf); border-color: color-mix(in srgb, var(--ink) 22%, transparent); }
.cb-types { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; } .cb-types li { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--sf); border: 1px solid var(--ln); box-shadow: 0 16px 26px -22px rgba(8, 20, 40, .5); transition: transform .25s; } .cb-types li:hover { transform: translateX(6px); } .cb-types i { font-style: normal; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: #111; background: var(--tc); } .cb-types b { display: block; color: var(--ink); } .cb-types span { font-size: .84rem; color: var(--mu); }
.cb-steps { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: s; } .cb-steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; color: var(--mu); } .cb-steps li::before { content: counter(s); flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .88rem; color: var(--acon); background: var(--ac); }
.cb-lock { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 14px; padding: 8px 16px; border-radius: 999px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--acon); background: var(--ac); }
.cb-card-prev { width: 100%; max-width: 420px; animation: cb-float 8s ease-in-out infinite; filter: drop-shadow(0 40px 36px rgba(0, 0, 0, .45)); }
/* club / datos */
.cb-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 5vw, 64px); align-items: start; } .cb-text { white-space: pre-line; color: var(--mu); font-size: 1.06rem; }
.cb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cb-fact { position: relative; overflow: hidden; padding: 22px 22px 20px; border-radius: var(--r1); background: var(--sf); border: 1px solid var(--ln); box-shadow: 0 24px 40px -30px rgba(8, 20, 40, .4); transition: transform .3s; } .cb-fact:hover { transform: translateY(-5px); } .cb-fact::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--c1), var(--ac)); } .cb-fact b { display: block; font: var(--dw) clamp(1.6rem, 3.2vw, 2.4rem)/1.05 var(--fd); letter-spacing: var(--dl); color: var(--ink); overflow-wrap: anywhere; } .cb-fact span { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mu); }
.cb-custom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(22px, 4vw, 48px); border-radius: var(--r2); } .cb-custom.has-img { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; } .cb-custom.card { background: var(--sf); border: 1px solid var(--ln); box-shadow: 0 30px 50px -36px rgba(8, 20, 40, .5); } .cb-custom.accent { color: var(--acon); background: linear-gradient(135deg, var(--ac), color-mix(in srgb, var(--ac) 60%, var(--ink))); } .cb-custom.accent .cb-h2, .cb-custom.accent .cb-text { color: inherit; } .cb-custom.accent .cb-btn { color: var(--ac); background: var(--acon); } .cb-custom img { width: 100%; border-radius: var(--r1); display: block; }
.cb-spons { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .cb-sp { display: grid; place-items: center; min-width: 160px; height: 90px; padding: 12px 24px; border-radius: 20px; text-decoration: none; font-weight: 800; color: var(--mu); background: var(--sf); border: 1px solid var(--ln); transition: transform .25s; } .cb-sp:hover { transform: translateY(-4px); } .cb-sp img { max-height: 56px; object-fit: contain; }
.cb-soc { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .cb-soc a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 20px; text-decoration: none; font-weight: 800; background: var(--sf); border: 1px solid var(--ln); transition: transform .25s, border-color .25s; } .cb-soc a:hover { transform: translateY(-4px); border-color: var(--ac); } .cb-soc b { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-style: normal; color: var(--acon); background: var(--ac); }
.cb-acc { max-width: 840px; } .cb-acc details { margin-top: 10px; border-radius: 20px; background: var(--sf); border: 1px solid var(--ln); transition: box-shadow .25s; } .cb-acc details[open] { box-shadow: 0 24px 40px -30px rgba(8, 20, 40, .5); } .cb-acc summary { cursor: pointer; padding: 18px 22px; font-weight: 800; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 12px; } .cb-acc summary::-webkit-details-marker { display: none; } .cb-acc summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; color: var(--acon); background: var(--ac); transition: transform .25s; } .cb-acc details[open] summary::after { transform: rotate(45deg); } .cb-acc .b { padding: 0 22px 20px; color: var(--mu); white-space: pre-line; }
.cb-band { position: relative; overflow: hidden; margin: 0 0 clamp(40px, 6vw, 80px); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 26px 32px; border-radius: var(--r1); color: #fff; background: linear-gradient(100deg, var(--ink), color-mix(in srgb, var(--c1) 55%, var(--ink))); } .cb-band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 24px, transparent 24px 48px); animation: cb-slide 12s linear infinite; } .cb-band > * { position: relative; } .cb-band b { display: block; font: var(--dw) clamp(1.15rem, 2.4vw, 1.7rem)/1.1 var(--fd); letter-spacing: var(--dl); text-transform: var(--dt); } .cb-band span { opacity: .85; font-size: .94rem; }
/* pie */
.cb-foot2 { padding: 52px 0 30px; color: #fff; background: linear-gradient(180deg, var(--ink), color-mix(in srgb, var(--ink) 80%, #000)); } .cb-foot2 .cb-wrap { display: grid; gap: 28px; } .cb-fgrid { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; } .cb-fgrid p { margin: 14px 0 0; max-width: 46ch; font-size: .9rem; color: rgba(255, 255, 255, .7); } .cb-flogo { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 18px; background: #fff; } .cb-flogo img { display: block; height: 42px; width: auto; max-width: 180px; object-fit: contain; } .cb-flinks { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .92rem; } .cb-flinks a { text-decoration: none; color: rgba(255, 255, 255, .78); } .cb-flinks a:hover { color: #fff; }
.cb-legal { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .8rem; color: rgba(255, 255, 255, .65); } .cb-legal a { color: inherit; }
.cb-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); } .cb-reveal.in { opacity: 1; transform: none; }
.aud { font-size: .72rem; font-weight: 800; color: var(--act); }
@media (max-width: 1020px) { .cb-hero-in, .cb-member, .cb-about, .cb-custom.has-img { grid-template-columns: minmax(0, 1fr); } .cb-card.big { grid-column: span 1; grid-row: span 1; } .cb-card.big .cb-img { aspect-ratio: 4 / 3.2; flex: none; min-height: 0; } .cb-stage { max-width: 480px; } }
@media (max-width: 860px) {
    .cb-wrap { width: min(1240px, 100% - 30px); } .cb-head .cb-wrap { gap: 10px; min-height: 66px; } .cb-burger { display: grid; place-items: center; margin-left: auto; order: 3; } .cb-logo { height: 46px; max-width: 170px; } .cb-fchip.c1 { display: none; }
    .cb-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 15px 16px; background: var(--hd); border-bottom: 1px solid color-mix(in srgb, var(--hdt) 12%, transparent); box-shadow: 0 30px 40px -24px rgba(8, 20, 40, .4); display: none; } .cb-nav.open { display: flex; } .cb-nav a { padding: 14px 12px; border-radius: 14px; font-size: 1.02rem; }
    .cb-act .cb-btn { display: none; } .cb-brand { flex: 1 1 auto; min-width: 0; } .cb-brandtxt small { display: none; } .cb-me { padding-right: 12px; }
    .cb-title { font-size: clamp(2.2rem, 11vw, 3.3rem); } .cb-cta .cb-btn { flex: 1 1 100%; } .cb-h2 { font-size: clamp(1.8rem, 8.4vw, 2.5rem); } .cb-blob { filter: blur(54px); } .cb-blob.b1 { width: 320px; height: 320px; } .cb-blob.b2 { width: 280px; height: 280px; } .cb-blob.b3 { display: none; }
    .cb-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); gap: 16px; } .cb-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -15px; padding: 2px 15px 8px; scrollbar-width: none; } .cb-chips::-webkit-scrollbar { display: none; } .cb-chip { flex: none; min-height: 42px; }
    .cb-member { padding: 24px 18px; } .cb-band { padding: 20px; } .cb-band .cb-btn { width: 100%; } .cb-fchip { font-size: .74rem; padding: 8px 12px; } .cb-tape span { font-size: 1rem; padding: 0 18px; } .cb-tape span::after { margin-left: 36px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cb-reveal { opacity: 1; transform: none; transition: none; } .cb-rise, .cb-blob, .cb-ring, .cb-disc::before, .cb-front, .cb-back, .cb-fchip, .cb-tape .trk, .cb-ann, .cb-title em, .cb-title em::after, .cb-band::before, .cb-card-prev, .cb-img em, .cb-bar u { animation: none !important; } .cb-card, .cb-btn, .cb-tilt { transition: none; } }