:root {
  --night: #07141d;
  --panel: #0c202a;
  --panel-2: #102a35;
  --paper: #f2f4ed;
  --aqua: #43e6d0;
  --acid: #a7f52b;
  --muted: #8da0a7;
  --ink: #07141d;
  --line: rgba(242, 244, 237, .14);
  --pad: clamp(22px, 4.4vw, 72px);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  --sans: Inter, Manrope, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--paper); background: var(--night); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
::selection { color: var(--night); background: var(--aqua); }
[hidden] { display: none !important; }
.skip-link { position: fixed; left: 18px; top: -100px; z-index: 200; padding: 12px 16px; color: var(--ink); background: var(--acid); font-weight: 800; }.skip-link:focus { top: 18px; }
.section-wrap { padding-left: var(--pad); padding-right: var(--pad); }

.masthead { height: 88px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 30px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; background: rgba(7,20,29,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.brand { width: max-content; display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 29px; line-height: 1; text-transform: uppercase; letter-spacing: .015em; }
.brand em { color: var(--aqua); font-style: normal; }
.brand-mark { width: 31px; height: 34px; display: block; border: 3px solid var(--aqua); border-radius: 7px 13px 7px 13px; transform: skewY(-12deg); position: relative; }
.brand-mark::before, .brand-mark::after, .brand-mark i { content: ""; position: absolute; left: 6px; height: 3px; background: var(--acid); }
.brand-mark::before { top: 7px; width: 16px; }.brand-mark i { top: 14px; width: 12px; }.brand-mark::after { top: 21px; width: 17px; }
.tagline { margin: 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .24em; white-space: nowrap; }
.header-nav { display: flex; align-items: center; justify-content: center; gap: 24px; }
.header-nav a { color: #c1ccd0; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; transition: color .2s ease; }.header-nav a:hover { color: var(--aqua); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.cart-button, .menu-button { border: 0; background: transparent; cursor: pointer; padding: 9px 0; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }
.cart-count { width: 24px; height: 24px; margin-left: 6px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--acid); font-weight: 800; transition: transform .2s; }.cart-count.bump { transform: scale(1.3) rotate(8deg); }
.menu-button { display: none; }
.header-cta { min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: var(--acid); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.school-chip { width: max-content; margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; color: var(--paper); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }.school-chip span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: var(--acid); font-family: var(--display); font-size: 16px; }

.hero { min-height: 630px; padding: 66px var(--pad) 55px; display: grid; grid-template-columns: minmax(0,1.28fr) minmax(320px,.72fr); gap: 60px; align-items: end; position: relative; overflow: hidden; background: linear-gradient(90deg,transparent 0 49.95%,rgba(255,255,255,.025) 50%,transparent 50.05%); }
.hero-copy, .hero-metrics { position: relative; z-index: 2; }
.eyebrow { margin: 0; display: flex; align-items: center; gap: 14px; color: var(--aqua); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .22em; }.eyebrow::before { content: ""; width: 47px; height: 2px; background: var(--aqua); }
h1 { max-width: 850px; margin: 28px 0 38px; font-family: var(--display); font-size: clamp(64px,7.2vw,118px); font-weight: 400; line-height: .86; text-transform: uppercase; letter-spacing: -.02em; } h1 em { color: var(--aqua); font-style: normal; }
.hero-bottom { display: flex; align-items: center; gap: 30px; }.hero-bottom p { max-width: 310px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.cta { min-height: 58px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; border: 1px solid var(--acid); color: var(--ink); background: var(--acid); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; transition: transform .2s,background .2s,color .2s; }.cta:hover { transform: translateY(-3px); color: var(--acid); background: transparent; }
.hero-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }.metric { min-height: 135px; padding: 27px; background: var(--panel); }.metric-main { grid-column: 1/-1; color: var(--ink); background: var(--aqua); }.metric strong { display: block; font-family: var(--display); font-size: 49px; font-weight: 400; line-height: 1; }.metric span { display: block; margin-top: 13px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.hero-number { position: absolute; right: -20px; top: -98px; z-index: 1; color: transparent; -webkit-text-stroke: 1px rgba(67,230,208,.14); font-family: var(--display); font-size: 400px; line-height: .9; letter-spacing: -.07em; pointer-events: none; }

.benefit-strip { padding: 14px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; color: var(--ink); background: var(--acid); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; white-space: nowrap; }.benefit-strip i { font-style: normal; }
.catalog { padding: 50px 0 78px; color: var(--ink); background: var(--paper); }.catalog-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 28px; }
.section-kicker { margin: 0; color: #557078; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; }
.catalog h2, .process h2, .team-section h2, .manifesto h2 { margin: 7px 0 0; font-family: var(--display); font-size: clamp(42px,5vw,72px); font-weight: 400; line-height: .94; text-transform: uppercase; letter-spacing: -.01em; }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.filters button { padding: 11px 15px; border: 1px solid rgba(7,20,29,.22); color: #496069; background: transparent; cursor: pointer; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; transition: .2s; }.filters button:hover, .filters button.active { color: var(--paper); border-color: var(--ink); background: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.product-card { min-height: 380px; padding: 17px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: #e3e8df; transition: transform .25s,background .25s,opacity .2s; }.product-card:hover { z-index: 2; transform: translateY(-7px); background: #dce4d9; }.product-card.filter-out { display: none; }
.product-top { min-height: 25px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; z-index: 2; color: #66777c; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }.product-top b { padding: 5px 7px; color: var(--ink); background: var(--acid); font-size: 7px; }
.garment { width: 148px; height: 172px; position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); background: var(--tone); clip-path: polygon(24% 8%,38% 0,62% 0,76% 8%,100% 24%,84% 46%,76% 39%,76% 100%,24% 100%,24% 39%,16% 46%,0 24%); filter: drop-shadow(0 19px 14px rgba(7,20,29,.2)); transition: transform .3s; }.product-card:hover .garment { transform: translate(-50%,-52%) rotate(-3deg) scale(1.05); }.garment::before { content: ""; position: absolute; left: 42%; top: 0; width: 16%; height: 13%; background: #e3e8df; border-radius: 0 0 14px 14px; }.garment::after { content: ""; position: absolute; left: 20%; right: 20%; top: 43px; height: 5px; background: var(--mark); }.garment span { position: absolute; inset: 63px 0 auto; color: var(--mark); font-family: var(--display); font-size: 48px; line-height: 1; text-align: center; }.garment-2 { transform: translate(-50%,-50%) rotate(4deg); }.garment-3,.garment-6 { height: 184px; }.garment-4 { transform: translate(-50%,-50%) rotate(-4deg); }.garment-7 { width: 115px; clip-path: polygon(22% 3%,78% 3%,86% 55%,75% 100%,25% 100%,14% 55%); }.garment-8 { width: 135px; clip-path: polygon(25% 0,75% 0,92% 18%,94% 100%,6% 100%,8% 18%); border-radius: 20px; }
.product-info { padding-top: 14px; position: relative; z-index: 3; border-top: 1px solid rgba(7,20,29,.15); }.product-info h3 { margin: 0 0 5px; font-size: 14px; letter-spacing: -.015em; }.product-info p { margin: 0; color: #718187; font-size: 9px; }.price-row { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; }.price-row strong { color: #405c64; font-size: 11px; }.price-row button { width: 37px; height: 37px; border: 1px solid rgba(7,20,29,.3); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; font-size: 21px; line-height: 1; transition: .2s; }.price-row button:hover { border-color: var(--acid); background: var(--acid); transform: rotate(90deg); }

.team-section { padding: 95px var(--pad); display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(55px,9vw,145px); background: var(--night); }.team-copy h2 { max-width: 530px; margin-top: 25px; }.team-intro { max-width: 590px; margin: 28px 0; color: #9fb0b6; font-size: 14px; line-height: 1.8; }.text-link { display: inline-flex; gap: 35px; padding-bottom: 8px; border-bottom: 1px solid var(--aqua); color: var(--aqua); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.team-benefits { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.team-benefits article { min-height: 210px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.team-benefits span { color: var(--aqua); font-family: var(--display); font-size: 28px; }.team-benefits h3 { margin: 35px 0 10px; font-size: 15px; }.team-benefits p { margin: 0; color: #8da0a7; font-size: 11px; line-height: 1.65; }
.process { padding: 78px 0 88px; color: var(--ink); background: #dfe6dd; }.process-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }.process-head h2 { max-width: 680px; }.process-grid { margin: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; }.process-grid li { min-height: 240px; padding: 25px; border-top: 2px solid var(--ink); border-right: 1px solid rgba(7,20,29,.22); }.process-grid li:last-child { border-right: 0; }.process-grid span { color: #557078; font-family: var(--display); font-size: 34px; }.process-grid h3 { margin: 55px 0 12px; font-size: 15px; }.process-grid p { margin: 0; color: #557078; font-size: 11px; line-height: 1.6; }
.manifesto { padding: 100px var(--pad); color: var(--ink); background: var(--aqua); }.manifesto > p { margin: 0 0 17px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }.manifesto h2 { max-width: 1100px; font-size: clamp(52px,7vw,102px); }.manifesto .cta { margin-top: 45px; color: var(--paper); border-color: var(--night); background: var(--night); }.manifesto .cta:hover { color: var(--night); background: transparent; }

footer { padding: 58px var(--pad) 30px; display: grid; grid-template-columns: 1.5fr .75fr .75fr; gap: 55px; background: var(--night); }.footer-brand p { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .18em; }.footer-brand .brand { font-size: 42px; }.footer-brand .brand::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--acid); }.footer-brand em { color: var(--aqua); }footer > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 9px; }footer > div:not(.footer-brand) strong { margin-bottom: 8px; color: var(--aqua); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }footer > div:not(.footer-brand) a { color: #98a8ad; font-size: 11px; }.copyright { grid-column: 1/-1; margin: 25px 0 0; padding-top: 25px; border-top: 1px solid var(--line); color: #64777e; font-size: 9px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(1,8,12,.68); opacity: 0; visibility: hidden; transition: .3s; }.drawer-backdrop.show { opacity: 1; visibility: visible; }
.cart-drawer { width: min(480px,100%); height: 100%; padding: 30px; position: fixed; top: 0; right: 0; z-index: 80; display: flex; flex-direction: column; transform: translateX(105%); color: var(--ink); background: var(--paper); transition: transform .35s cubic-bezier(.2,.75,.2,1); }.cart-drawer.open { transform: translateX(0); }.drawer-head { padding-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(7,20,29,.18); }.drawer-head p { margin: 0; color: #60777f; font-size: 9px; text-transform: uppercase; letter-spacing: .16em; }.drawer-head h2 { margin: 4px 0 0; font-family: var(--display); font-size: 44px; text-transform: uppercase; }.drawer-head button { width: 39px; height: 39px; border: 1px solid rgba(7,20,29,.2); color: var(--ink); background: transparent; cursor: pointer; font-size: 25px; }.drawer-lines { flex: 1; overflow-y: auto; }
.empty-cart { min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.empty-cart span { color: #c8d1c8; font-family: var(--display); font-size: 100px; line-height: 1; }.empty-cart h3 { margin: 15px 0 8px; font-size: 18px; }.empty-cart p { margin: 0 0 25px; color: #6d7e83; font-size: 12px; }.empty-cart button { padding: 12px 17px; border: 1px solid var(--ink); color: var(--paper); background: var(--ink); cursor: pointer; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.cart-line { padding: 20px 0; display: grid; grid-template-columns: 85px 1fr; gap: 18px; border-bottom: 1px solid rgba(7,20,29,.12); }.mini-garment { height: 92px; clip-path: polygon(24% 8%,38% 0,62% 0,76% 8%,100% 24%,84% 46%,76% 39%,76% 100%,24% 100%,24% 39%,16% 46%,0 24%); }.cart-line h3 { margin: 4px 0; font-size: 13px; }.cart-line p { margin: 0; color: #557078; font-size: 11px; }.quantity { margin-top: 13px; display: flex; align-items: center; gap: 13px; }.quantity button { width: 28px; height: 28px; border: 1px solid rgba(7,20,29,.2); color: var(--ink); background: transparent; cursor: pointer; }.quantity span { min-width: 15px; text-align: center; font-size: 11px; }
.drawer-total { padding-top: 20px; border-top: 1px solid rgba(7,20,29,.18); }.drawer-total > div { display: flex; align-items: flex-end; justify-content: space-between; }.drawer-total span { color: #557078; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.drawer-total strong { font-family: var(--display); font-size: 27px; }.drawer-total > a { min-height: 52px; margin-top: 18px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: var(--acid); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }.drawer-total > p { margin: 12px 0 0; color: #6d7e83; font-size: 9px; text-align: center; }
.toast { padding: 13px 18px; position: fixed; right: 25px; bottom: 25px; z-index: 100; display: flex; align-items: center; gap: 10px; transform: translateY(90px); opacity: 0; color: var(--ink); background: var(--aqua); font-size: 11px; font-weight: 800; transition: .28s; }.toast.show { opacity: 1; transform: translateY(0); }.toast span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--aqua); background: var(--ink); }

/* Ecosistema Equipla */
.ecosystem-hero { min-height: 720px; padding: 82px var(--pad); display: grid; grid-template-columns: minmax(0,1.08fr) minmax(480px,.92fr); gap: 70px; align-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 80% 35%,rgba(67,230,208,.1),transparent 32%),linear-gradient(90deg,transparent 49.9%,rgba(255,255,255,.025) 50%,transparent 50.1%),var(--night); }
.ecosystem-hero::before { content: ""; width: 700px; height: 700px; position: absolute; right: -180px; top: -260px; border: 1px solid rgba(67,230,208,.1); border-radius: 50%; }
.ecosystem-hero-copy { position: relative; z-index: 2; }.ecosystem-hero h1 { max-width: 920px; font-size: clamp(62px,6.8vw,112px); }.ecosystem-lead { max-width: 750px; margin: 0 0 34px; color: #9fb0b6; font-size: 15px; line-height: 1.8; }.hero-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }.ghost-link { display: inline-flex; gap: 25px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: #c1ccd0; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.ecosystem-orbit { min-height: 560px; position: relative; z-index: 2; border: 1px solid rgba(67,230,208,.16); border-radius: 50%; background: radial-gradient(circle,rgba(67,230,208,.1) 0 18%,transparent 18.5% 46%,rgba(167,245,43,.045) 46.5% 47%,transparent 47.5%); }.ecosystem-orbit::before,.ecosystem-orbit::after { content: ""; position: absolute; background: rgba(67,230,208,.14); }.ecosystem-orbit::before { width: 1px; inset: 0 auto 0 50%; }.ecosystem-orbit::after { height: 1px; inset: 50% 0 auto; }.orbit-core { width: 132px; height: 132px; position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%,-50%); display: grid; place-content: center; text-align: center; border-radius: 50%; color: var(--ink); background: var(--aqua); box-shadow: 0 0 50px rgba(67,230,208,.18); }.orbit-core strong { font-family: var(--display); font-size: 45px; line-height: 1; }.orbit-core span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .15em; }
.orbit-node { width: 180px; min-height: 112px; padding: 18px; position: absolute; z-index: 3; border: 1px solid var(--line); background: rgba(12,32,42,.96); box-shadow: 0 15px 35px rgba(0,0,0,.16); }.orbit-node b { color: var(--aqua); font-family: var(--display); font-size: 22px; }.orbit-node strong,.orbit-node span { display: block; }.orbit-node strong { margin-top: 10px; font-size: 13px; }.orbit-node span { margin-top: 5px; color: var(--muted); font-size: 9px; }.node-player { left: 50%; top: -28px; transform: translateX(-50%); }.node-school { right: -35px; top: 50%; transform: translateY(-50%); }.node-team { left: 50%; bottom: -28px; transform: translateX(-50%); }.node-tournament { left: -35px; top: 50%; transform: translateY(-50%); }
a.orbit-node,a.actor-card { color: inherit; text-decoration: none; }
.purpose-strip { padding: 16px var(--pad); display: flex; justify-content: space-between; gap: 18px; overflow: hidden; color: var(--ink); background: var(--acid); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }.purpose-strip i { font-style: normal; }

.actors { padding: 90px 0; color: var(--ink); background: var(--paper); }.actors-head { margin-bottom: 42px; display: grid; grid-template-columns: 1fr .65fr; gap: 80px; align-items: end; }.actors-head h2,.story-copy h2,.evolution h2,.school-stores h2,.join h2 { margin: 7px 0 0; font-family: var(--display); font-size: clamp(48px,6vw,88px); font-weight: 400; line-height: .94; text-transform: uppercase; }.actors-head > p,.school-stores-head > p { max-width: 540px; margin: 0; color: #557078; font-size: 13px; line-height: 1.75; }
.actor-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.actor-card { min-height: 340px; padding: 27px; display: flex; flex-direction: column; border-top: 2px solid var(--ink); background: #e3e8df; }.actor-card > span { color: #5f737a; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }.actor-card h3 { margin: auto 0 17px; font-family: var(--display); font-size: 35px; font-weight: 400; line-height: 1; text-transform: uppercase; }.actor-card p { margin: 0; color: #557078; font-size: 11px; line-height: 1.65; }.actor-card b { margin-top: 22px; color: var(--ink); font-size: 8px; text-transform: uppercase; letter-spacing: .11em; }.actor-featured { color: var(--paper); border-color: var(--aqua); background: var(--night); }.actor-featured > span,.actor-featured p { color: #9fb0b6; }.actor-featured b { color: var(--acid); }

.story-preview { padding: 105px var(--pad); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(60px,10vw,155px); align-items: center; background: var(--night); }.story-copy h2 { margin-top: 25px; font-size: clamp(48px,5.5vw,82px); }.story-copy > p:not(.eyebrow) { max-width: 650px; margin: 28px 0; color: #9fb0b6; font-size: 14px; line-height: 1.8; }
.profile-concept { padding: 30px; border: 1px solid var(--line); background: var(--panel); box-shadow: 20px 20px 0 rgba(67,230,208,.08); }.profile-top { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .14em; }.profile-top b { color: var(--ink); background: var(--acid); padding: 5px 8px; }.profile-person { padding: 30px 0; display: grid; grid-template-columns: 125px 1fr; gap: 24px; align-items: center; }.profile-avatar { height: 145px; display: grid; place-items: end center; padding-bottom: 18px; color: var(--aqua); background: linear-gradient(145deg,var(--night),#173845); font-family: var(--display); font-size: 58px; }.profile-person p,.profile-person span { margin: 0; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }.profile-person h3 { margin: 10px 0; max-width: 420px; font-family: var(--display); font-size: 37px; line-height: 1; text-transform: uppercase; }.profile-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.profile-stats div { padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.profile-stats strong,.profile-stats span { display: block; }.profile-stats strong { font-family: var(--display); font-size: 36px; }.profile-stats span { margin-top: 5px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .12em; }.profile-timeline { margin-top: 26px; display: flex; align-items: center; position: relative; }.profile-timeline::before { content: ""; height: 1px; position: absolute; left: 0; right: 0; background: #33505b; }.profile-timeline span { width: 11px; height: 11px; margin-right: 23%; position: relative; z-index: 2; border-radius: 50%; background: var(--aqua); }.profile-timeline p { margin: 28px 0 0; position: absolute; left: 0; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .13em; }

.evolution { padding: 95px 0; color: var(--ink); background: #dfe6dd; }.evolution-head { margin-bottom: 50px; display: grid; grid-template-columns: .55fr 1.45fr; gap: 70px; align-items: end; }.evolution-roadmap { margin: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; }.evolution-roadmap li { min-height: 300px; padding: 27px; border-top: 2px solid var(--ink); border-right: 1px solid rgba(7,20,29,.2); }.evolution-roadmap li:last-child { border-right: 0; }.evolution-roadmap li.current { color: var(--paper); border-color: var(--aqua); background: var(--night); }.evolution-roadmap span { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }.evolution-roadmap h3 { margin: 100px 0 14px; font-family: var(--display); font-size: 34px; font-weight: 400; line-height: 1; text-transform: uppercase; }.evolution-roadmap p { margin: 0; color: #557078; font-size: 11px; line-height: 1.65; }.evolution-roadmap .current p { color: var(--muted); }

.school-stores { padding: 90px 0; color: var(--ink); background: var(--paper); }.school-stores-head { margin-bottom: 38px; display: grid; grid-template-columns: 1fr .7fr; gap: 70px; align-items: end; }.school-store-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }.school-store-card { min-height: 230px; padding: 28px; display: grid; grid-template-columns: 125px 1fr; gap: 28px; align-items: center; color: var(--paper); background: var(--school-dark); transition: transform .25s; }.school-store-card:hover { transform: translateY(-6px); }.school-monogram { width: 125px; height: 145px; display: grid; place-items: center; color: var(--school-dark); background: linear-gradient(145deg,var(--school-primary),var(--school-accent)); font-family: var(--display); font-size: 48px; }.school-store-card p { margin: 0; color: var(--school-primary); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }.school-store-card h3 { margin: 12px 0 35px; font-family: var(--display); font-size: 38px; font-weight: 400; text-transform: uppercase; }.school-store-card div > span { padding-bottom: 7px; border-bottom: 1px solid var(--school-primary); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.join { padding: 105px var(--pad); color: var(--ink); background: var(--aqua); }.join > p { margin: 0 0 18px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }.join h2 { max-width: 1200px; font-size: clamp(54px,7vw,105px); }.join-actions { margin-top: 45px; display: flex; align-items: center; gap: 35px; flex-wrap: wrap; }.join-actions .cta { color: var(--paper); border-color: var(--night); background: var(--night); }.join-actions .cta:hover { color: var(--night); background: transparent; }.join-actions > a:not(.cta) { padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 800; }

@media (max-width: 1100px) { .masthead { grid-template-columns: 1fr auto auto; }.tagline { display: none; }.header-nav { position: absolute; top: 88px; left: 0; right: 0; padding: 22px var(--pad); display: none; align-items: flex-start; flex-direction: column; background: var(--panel); box-shadow: 0 20px 30px rgba(0,0,0,.2); }.header-nav.open { display: flex; }.menu-button { display: block; }.hero { grid-template-columns: 1fr; }.hero-metrics { display: none; }.product-grid { grid-template-columns: repeat(2,1fr); }.team-section { grid-template-columns: 1fr; }.process-grid { grid-template-columns: repeat(2,1fr); }.process-grid li:nth-child(2) { border-right: 0; }.ecosystem-hero { grid-template-columns: 1fr; }.ecosystem-orbit { width: min(640px,100%); margin: 35px auto 0; }.actor-grid { grid-template-columns: repeat(2,1fr); }.story-preview { grid-template-columns: 1fr; }.evolution-roadmap { grid-template-columns: repeat(2,1fr); }.evolution-roadmap li:nth-child(2) { border-right: 0; } }
@media (max-width: 650px) { .masthead { height: 72px; padding: 0 18px; grid-template-columns: 1fr auto; }.brand { font-size: 25px; }.brand-mark { width: 26px; height: 29px; }.header-actions { gap: 10px; }.header-cta { display: none; }.cart-button { font-size: 0; }.cart-count { font-size: 11px; }.header-nav { top: 72px; padding: 22px; }.hero { min-height: 590px; padding: 48px 22px; align-items: start; }.hero-number { font-size: 285px; top: 30px; }.hero h1 { margin-top: 28px; font-size: clamp(57px,18vw,78px); }.hero-bottom { align-items: flex-start; flex-direction: column; }.benefit-strip,.purpose-strip { justify-content: flex-start; overflow-x: auto; }.catalog { padding-top: 40px; }.catalog-head { align-items: flex-start; flex-direction: column; }.filters { justify-content: flex-start; }.product-grid { grid-template-columns: 1fr; }.product-card { min-height: 400px; }.team-section { padding: 72px 22px; }.team-benefits { grid-template-columns: 1fr; }.process-head { align-items: flex-start; flex-direction: column; }.process-grid { grid-template-columns: 1fr; }.process-grid li { min-height: 210px; border-right: 0; }.manifesto { padding: 75px 22px; }.manifesto h2 { font-size: 49px; }.manifesto .cta { width: 100%; }.cart-drawer { padding: 23px 20px; }footer { grid-template-columns: 1fr; padding: 48px 22px 25px; }.copyright { grid-column: 1; }.ecosystem-hero { min-height: auto; padding: 62px 22px 85px; }.ecosystem-hero h1 { font-size: 56px; }.ecosystem-lead { font-size: 13px; }.ecosystem-orbit { min-height: 460px; transform: scale(.88); margin: -10px -6% 0; width: 112%; }.orbit-node { width: 145px; padding: 14px; }.node-school { right: -12px; }.node-tournament { left: -12px; }.actors-head,.evolution-head,.school-stores-head { grid-template-columns: 1fr; gap: 25px; }.actor-grid { grid-template-columns: 1fr; }.story-preview { padding: 75px 22px; }.profile-concept { padding: 19px; }.profile-person { grid-template-columns: 85px 1fr; }.profile-avatar { height: 110px; }.profile-person h3 { font-size: 29px; }.profile-stats div { padding: 14px 10px; }.evolution-roadmap { grid-template-columns: 1fr; }.evolution-roadmap li { min-height: 240px; border-right: 0; }.evolution-roadmap h3 { margin-top: 65px; }.school-store-grid { grid-template-columns: 1fr; }.school-store-card { grid-template-columns: 85px 1fr; padding: 20px; }.school-monogram { width: 85px; height: 110px; }.school-store-card h3 { font-size: 30px; }.join { padding: 75px 22px; }.join h2 { font-size: 50px; } }

/* Registro público de jugadores */
.player-register-page{min-height:100vh;color:#07141d;background:#f2f4ed}.register-header{height:82px;padding:0 clamp(22px,5vw,75px);display:flex;align-items:center;justify-content:space-between;color:#eef3ef;background:#07141d;border-bottom:1px solid rgba(255,255,255,.12)}.register-header .brand{color:#fff}.register-back{padding-bottom:5px;color:#a7f52b;border-bottom:1px solid #a7f52b;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.register-main{width:min(1450px,100%);margin:0 auto;padding:clamp(45px,6vw,90px) clamp(20px,4vw,60px) 90px}.register-intro{max-width:950px;margin-bottom:45px}.register-intro>p,.registration-complete>p:first-of-type{margin:0 0 14px;color:#147f75;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.18em}.register-intro h1,.registration-complete h1{margin:0;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(56px,7vw,100px);font-weight:400;line-height:.9;text-transform:uppercase}.register-intro>span{max-width:780px;margin-top:23px;display:block;color:#61767d;font-size:12px;line-height:1.7}.register-alert{margin:0 0 22px;padding:17px 20px;color:#7d1e1e;background:#f8dfdc;border-left:4px solid #bd3434;font-size:12px}.public-player-form{display:grid;gap:12px}.register-section{padding:clamp(24px,3vw,38px);background:#fff;border:1px solid #d1dad4}.register-section-head{margin-bottom:30px;display:grid;grid-template-columns:42px 1fr;gap:18px}.register-section-head>b{color:#00a995;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:28px}.register-section-head h2{margin:0 0 7px;font-size:17px}.register-section-head p{margin:0;color:#768a90;font-size:10px;line-height:1.5}.register-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.register-grid>label{display:grid;align-content:start;gap:8px;color:#52676e;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.register-grid input,.register-grid select,.register-grid textarea{width:100%;min-height:49px;padding:12px 13px;color:#07141d;background:#f6f8f4;border:1px solid #cbd6cf;border-radius:0;font:600 12px Arial,sans-serif;text-transform:none;letter-spacing:0}.register-grid textarea{min-height:115px;resize:vertical}.register-grid small{color:#829398;font-size:8px;font-weight:600;text-transform:none;letter-spacing:0}.register-span-3{grid-column:1/-1}.register-consents{background:#e6eee7}.register-consent-list{display:grid;gap:12px}.register-check{padding:15px 17px;display:flex!important;grid-template-columns:18px 1fr!important;align-items:flex-start!important;gap:12px!important;background:#fff;border:1px solid #d0dad3;color:#354d55!important;font-size:10px!important;font-weight:700!important;line-height:1.55;text-transform:none!important;letter-spacing:0!important}.register-check input{width:18px!important;min-height:18px!important;margin:0;accent-color:#00a995}.register-actions{padding:25px 0;display:flex;align-items:center;justify-content:flex-end;gap:26px}.register-actions>a{font-size:9px;font-weight:900;text-transform:uppercase}.register-primary{min-height:48px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;color:#07141d;background:#a7f52b;border:1px solid #a7f52b;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;cursor:pointer}.register-primary:hover{color:#fff;background:#07141d;border-color:#07141d}.register-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.registration-complete{min-height:600px;padding:clamp(35px,6vw,85px);display:grid;align-content:center;justify-items:start;background:#fff;border-top:4px solid #43e6d0}.registration-complete>span{width:72px;height:72px;margin-bottom:28px;display:grid;place-items:center;color:#07141d;background:#a7f52b;font-size:30px;font-weight:900}.registration-complete>p:last-of-type{max-width:700px;margin:28px 0;color:#647980;font-size:13px;line-height:1.8}.register-footer{padding:25px clamp(22px,5vw,75px);display:flex;justify-content:space-between;color:#81959b;background:#07141d;font-size:8px;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:800px){.register-grid{grid-template-columns:1fr 1fr}.register-span-3{grid-column:1/-1}}
@media(max-width:560px){.register-header{height:72px}.register-header .brand{font-size:25px}.register-main{padding:42px 18px 65px}.register-grid{grid-template-columns:1fr}.register-span-3{grid-column:auto}.register-section{padding:23px 18px}.register-section-head{grid-template-columns:34px 1fr}.register-actions{align-items:stretch;flex-direction:column-reverse}.register-primary{width:100%}.register-actions>a{text-align:center}.register-footer{display:grid;gap:8px}}

/* Acceso y autogestion del perfil del jugador */
.register-entry-links,.registration-complete-actions{display:flex;align-items:center;gap:24px}.register-existing-account{width:max-content;margin:-25px 0 30px;padding-bottom:7px;display:block;color:#147f75;border-bottom:1px solid #147f75;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.registration-complete-actions{margin-top:4px}.player-login-main{width:min(1050px,100%)}.player-login-form{max-width:900px}.player-login-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.player-account-tools{display:flex;align-items:center;gap:20px}.player-account-tools>span{color:#9fb0b6;font-size:10px}.player-account-tools form{margin:0}.player-account-tools button{padding:8px 0;color:#a7f52b;background:transparent;border:0;border-bottom:1px solid #a7f52b;cursor:pointer;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.portal-pending{margin:0 0 22px;padding:18px 20px;display:grid;gap:7px;color:#07141d;background:#e7f5ce;border-left:4px solid #a7f52b}.portal-pending b{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.portal-pending span{font-size:11px;line-height:1.5}.portal-alert-success{color:#176044;background:#dff3e8;border-left-color:#20a76d}.portal-alert-error{color:#7d1e1e;background:#f8dfdc;border-left-color:#bd3434}
@media(max-width:650px){.register-entry-links{gap:13px}.register-entry-links .register-back:last-child{display:none}.registration-complete-actions{width:100%;align-items:stretch;flex-direction:column}.registration-complete-actions .register-back{text-align:center}.player-login-grid{grid-template-columns:1fr}.player-account-tools>span{display:none}.register-existing-account{width:auto;margin-top:-18px;line-height:1.5}.player-portal-page .register-header{padding:0 18px}}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
