/* ════════════════════════════════════════════════════════════ GUSTAVO BORGES · UFC GYM Jiu-Jitsu Hollywood Summit 305 Studio — mobile first, dark, cinemático Paleta: negro / rojo UFC / hueso. 2 familias tipográficas. ════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Oswald';src:url('fonts/oswald-latin.woff2') format('woff2'); font-weight:200 700;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter';src:url('fonts/inter-latin.woff2') format('woff2'); font-weight:100 900;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root{ --ink:#08080A; --ink-1:#0E0E12; --ink-2:#15151B; --line:#26262F; --bone:#F4F1EC; --muted:#A39D95; --red:#D20A0A; /* solo texto grande / fondos */ --red-lt:#FF4D4D; /* texto chico sobre negro — 6.05:1 */ --gold:#E3B23C; --silver:#C9CBD1; --bronze:#C08457; --disp:'Oswald',ui-sans-serif,'Arial Narrow',system-ui,sans-serif; --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --pad:clamp(1.15rem,5vw,2.5rem); --maxw:64rem; --r:14px; --dock-h:calc(60px + env(safe-area-inset-bottom,0px)); --topbar-h:56px; } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } /* NUNCA overflow en — congela el scroll táctil en Android */ body{ margin:0; background:var(--ink); color:var(--bone); font-family:var(--sans); font-size:16px; line-height:1.6; overflow-x:clip; touch-action:pan-y; -webkit-font-smoothing:antialiased; padding-bottom:var(--dock-h); } @media (min-width:820px){ body{padding-bottom:0} } img,video,svg{max-width:100%;display:block} h1,h2,h3{margin:0;font-family:var(--disp);font-weight:700;line-height:.95;text-transform:uppercase;letter-spacing:-.01em} p{margin:0 0 1em} a{color:inherit} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--red-lt);outline-offset:3px;border-radius:4px} .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--red);color:#fff;padding:.7rem 1rem;font-weight:600; } .skip:focus{left:.5rem;top:.5rem} /* ── eyebrow / lede compartidos ───────────────────────────── */ .eyebrow{ font-family:var(--sans);font-size:.68rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase;color:var(--red-lt); margin:0 0 .85rem; } .lede{color:var(--muted);font-size:1.02rem;max-width:44ch;margin-top:1rem} .note{color:var(--muted);font-size:.85rem;line-height:1.55;max-width:48ch;margin-top:1.4rem} /* ══════════ TOPBAR ══════════ */ /* fuera del flujo: si empuja el hero, el stage sticky de 100svh se pasa del viewport y la barra fija de abajo tapa el HUD */ .topbar{ position:absolute;top:0;left:0;right:0;z-index:40; display:flex;align-items:center;gap:.7rem; height:var(--topbar-h);padding:0 var(--pad); background:transparent; } .topbar__mark{display:flex;flex:none} .belt-mark{ display:block;width:34px;height:9px;border-radius:2px; background:linear-gradient(90deg,var(--bone) 0 72%,var(--red) 72% 100%); } .topbar__name{ font-family:var(--disp);font-weight:700;font-size:.95rem; letter-spacing:.08em;text-transform:uppercase;flex:1 1 auto;min-width:0; } .langswitch{display:flex;gap:2px;flex:none;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--ink-1)} .langswitch button{ appearance:none;border:0;background:transparent;color:var(--muted); font:600 .7rem/1 var(--sans);letter-spacing:.08em; padding:0 .75rem;border-radius:999px;cursor:pointer; min-width:44px;min-height:40px; /* pulgar, no puntero */ } .langswitch button.is-on{background:var(--red);color:#fff} /* ══════════ 1 · HERO ══════════ */ .hero{position:relative} .hero__track{ position:relative; /* 1 pantalla + 4 tramos de scroll = 5 estados */ height:calc(100svh + 260vh); } .hero__stage{ position:sticky;top:0; height:100svh;min-height:560px; display:grid; grid-template-rows:auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr); overflow:hidden; touch-action:pan-y; } .hero__glow{ position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(78% 52% at 50% 46%, rgba(210,10,10,.20), transparent 72%), radial-gradient(120% 70% at 50% 50%, rgba(255,255,255,.05), transparent 65%); transition:opacity .5s ease; } /* — las 5 fotos, superpuestas — */ .belt{ grid-row:1 / -1;grid-column:1; position:relative;align-self:center;justify-self:center; width:min(88vw,520px);aspect-ratio:1/1; z-index:1;pointer-events:none; /* el spotlight: el fondo beige se funde con el negro */ -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 52%,transparent 88%); mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 52%,transparent 88%); } .belt__frame{position:absolute;inset:0;display:block;opacity:0;will-change:opacity} .belt__frame img{width:100%;height:100%;object-fit:contain;filter:contrast(1.04) saturate(.96)} /* FAILSAFE sin JS: se ve el cinturón negro */ .no-js .belt__frame[data-i="4"]{opacity:1} /* con JS: arranca en blanco, el driver toma el control */ .js .belt__frame[data-i="0"]{opacity:1} .hero__copy{ grid-row:1;grid-column:1;z-index:3; padding:calc(var(--topbar-h) + clamp(.4rem,2vh,1.4rem)) var(--pad) 0; pointer-events:none; /* scrim para legibilidad sobre la foto */ background:linear-gradient(180deg,rgba(8,8,10,.94) 12%,rgba(8,8,10,.72) 58%,transparent 100%); padding-bottom:3.2rem; } .hero__copy .eyebrow{margin-bottom:.5rem} .hero h1{ font-size:clamp(2.9rem,15vw,6.2rem); line-height:.86;letter-spacing:-.02em;margin:0 0 .55rem; } .hero h1 em{font-style:normal;color:var(--red);display:block} .hero__tag{ font-size:clamp(.86rem,3.5vw,1.05rem);color:var(--bone); max-width:26ch;margin:0;line-height:1.4;font-weight:500; } .hero__hud{ grid-row:3;grid-column:1;z-index:3; /* el dock fijo tapa los últimos ~60px del viewport: se los devolvemos */ padding:2.6rem var(--pad) calc(var(--dock-h) + .5rem); text-align:center;pointer-events:none; background:linear-gradient(0deg,rgba(8,8,10,.96) 24%,rgba(8,8,10,.7) 62%,transparent 100%); } .hero__beltname{ font-family:var(--disp);font-weight:700; font-size:clamp(1.5rem,7vw,2.3rem);line-height:1; letter-spacing:.06em;margin:0 0 .3rem;color:var(--bone); transition:color .35s ease; } .hero__beltline{ color:var(--muted);font-size:.86rem;margin:0 0 .95rem;min-height:1.4em; transition:opacity .25s ease; } .rail{display:flex;gap:7px;justify-content:center;margin:0 0 .9rem} .rail li{ width:34px;height:5px;border-radius:3px;background:#2A2A33; position:relative;overflow:hidden; } .rail li::after{ content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left; transition:transform .3s ease;background:var(--bone); } .rail li[data-c="blue"]::after{background:#2E7BE0} .rail li[data-c="purple"]::after{background:#8B4FD0} .rail li[data-c="brown"]::after{background:#8A5A34} .rail li[data-c="black"]::after{background:linear-gradient(90deg,#6E6E78 0 68%,var(--red) 68%)} .rail li.on::after{transform:scaleX(1)} .scrollhint{ font-size:.62rem;letter-spacing:.28em;text-transform:uppercase; color:var(--muted);margin:0; } .scrollhint::after{ content:"";display:block;width:1px;height:16px;margin:.45rem auto 0; background:linear-gradient(var(--red-lt),transparent); animation:drip 1.9s ease-in-out infinite; } @keyframes drip{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}} @media (min-width:820px){ .hero__track{height:calc(100svh + 300vh)} .hero__stage{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; } .belt{grid-row:1;grid-column:2;width:min(42vw,560px)} .hero__copy{ grid-row:1;grid-column:1;background:none; padding:var(--topbar-h) 0 0 var(--pad); align-self:center; } .hero__hud{ grid-row:1;grid-column:1;align-self:end;background:none; text-align:left;padding:0 0 clamp(2rem,7vh,4rem) var(--pad); } .rail{justify-content:flex-start} .hero__beltline{margin-bottom:1.1rem} .scrollhint::after{margin-left:0} } /* ══════════ 2 · THESIS ══════════ */ .thesis{ padding:clamp(3.2rem,11vw,6rem) var(--pad); border-top:1px solid var(--line);border-bottom:1px solid var(--line); background: linear-gradient(180deg,var(--ink-1),var(--ink)); } .thesis blockquote{margin:0 auto;max-width:38rem;text-align:center} .thesis p{ font-family:var(--disp);font-weight:500;text-transform:none; font-size:clamp(1.28rem,5.6vw,2.1rem);line-height:1.22; letter-spacing:-.005em;margin:0 0 1rem;color:var(--bone); } .thesis cite{ font-style:normal;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--red-lt); } /* ══════════ secciones base ══════════ */ .sec{padding:clamp(3.2rem,11vw,6rem) var(--pad);max-width:var(--maxw);margin-inline:auto} .sec h2{font-size:clamp(1.85rem,8vw,3.1rem);margin-bottom:.15em} .sec h2 em{font-style:normal;color:var(--red)} /* ══════════ 3 · PALMARÉS ══════════ */ .medals{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem;margin-top:2.2rem} .medal{ display:flex;align-items:center;gap:1rem; background:var(--ink-2);border:1px solid var(--line); border-left:3px solid var(--line); border-radius:var(--r);padding:1rem 1.1rem; } .medal--gold{border-left-color:var(--gold)} .medal--silver{border-left-color:var(--silver)} .medal--bronze{border-left-color:var(--bronze)} .medal__pos{ font-family:var(--disp);font-weight:700;font-size:1.75rem;line-height:1; flex:none;width:2.3rem;text-align:center; } .medal--gold .medal__pos{color:var(--gold)} .medal--silver .medal__pos{color:var(--silver)} .medal--bronze .medal__pos{color:var(--bronze)} .medal h3{font-size:1rem;letter-spacing:.01em;line-height:1.15;margin-bottom:.28rem;text-wrap:balance} .medal h3 b{color:var(--red-lt)} .medal p{margin:0;font-size:.78rem;color:var(--muted);letter-spacing:.02em} .facts{margin-top:1.6rem;display:grid;gap:0;border-top:1px solid var(--line)} .facts li{ display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem; padding:.95rem 0;border-bottom:1px solid var(--line); } .facts__k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red-lt);font-weight:700} .facts__v{font-size:.92rem;color:var(--bone);line-height:1.45} @media (min-width:640px){ .medals{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} .medal{flex-direction:column;align-items:flex-start;gap:.7rem;padding:1.3rem} .medal__pos{width:auto;text-align:left;font-size:2.2rem} .facts li{grid-template-columns:11rem minmax(0,1fr);gap:1rem;align-items:baseline} } /* ══════════ 4 · COACH ══════════ */ .sec--coach{background:var(--ink-1);max-width:none} .coach{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;max-width:var(--maxw);margin-inline:auto} .coach__media{margin:0;position:relative} .coach__media video{ width:100%;height:auto;aspect-ratio:864/685;object-fit:cover; border-radius:var(--r);background:#EFEFF2; border:1px solid var(--line);border-top:3px solid var(--red); box-shadow:0 24px 60px -28px rgba(0,0,0,.9); } .coach__media figcaption{ margin-top:.7rem;font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted); } .coach__body h2{margin-bottom:.6em} .coach__body p{color:var(--bone);font-size:.98rem} .pull{ margin:1.8rem 0;padding:1.1rem 0 1.1rem 1.15rem; border-left:3px solid var(--red); } .pull p{ font-family:var(--disp);font-weight:500;text-transform:none; font-size:1.16rem;line-height:1.32;margin:0 0 .5rem; } .pull cite{font-style:normal;font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} @media (min-width:820px){ .coach{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;align-items:start} .coach__media{position:sticky;top:2rem} } /* ── chip PENDIENTE ── */ .pending{ display:flex;gap:.7rem;align-items:flex-start; border:1px dashed rgba(255,77,77,.55);border-radius:var(--r); background:rgba(210,10,10,.07); padding:.9rem 1rem;font-size:.84rem;color:var(--bone);line-height:1.5; margin-top:1.6rem; } .pending__tag{ flex:none;font:700 .6rem/1.9 var(--sans);letter-spacing:.16em; color:#fff;background:var(--red);padding:0 .5rem;border-radius:4px; white-space:nowrap; } /* ══════════ 5 · MÉTODO ══════════ */ .modules{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin-top:2.2rem} .module{ position:relative;background:var(--ink-2); border:1px solid var(--line);border-radius:var(--r); padding:1.3rem 1.2rem; } .module__n{ font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.2em; color:var(--red-lt);display:block;margin-bottom:.55rem; } .module h3{ font-size:1.05rem;letter-spacing:.04em;color:var(--muted); border:1px dashed var(--line);border-radius:8px; padding:.55rem .7rem;margin-bottom:.7rem; } .module__hint{font-size:.78rem;color:var(--muted);margin:0 0 .9rem;font-style:italic} .slots{display:grid;gap:.4rem} .slots li{ font-size:.76rem;letter-spacing:.07em;color:#8A857D; /* AA 5.04:1 */ border:1px dashed #2C2C36;border-radius:7px;padding:.5rem .65rem; background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.014) 7px 14px); } @media (min-width:640px){ .modules{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ══════════ 6 · OFERTA ══════════ */ .offer{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin-top:2.2rem} .card{ background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r); padding:1.4rem 1.25rem;display:flex;flex-direction:column; } .card--hi{border-color:rgba(210,10,10,.5);background:linear-gradient(180deg,rgba(210,10,10,.09),var(--ink-2) 62%)} .card h3{font-size:1.2rem;margin-bottom:.6rem} .card p{font-size:.9rem;color:var(--muted);margin:0 0 1rem} .price{ margin:auto 0 0!important;font-family:var(--disp);font-weight:700; font-size:.82rem;letter-spacing:.18em;color:var(--red-lt)!important; text-transform:uppercase; } @media (min-width:720px){ .offer{grid-template-columns:repeat(3,minmax(0,1fr))} } /* ══════════ 7 · BOOKING ══════════ */ .sec--book{ background: radial-gradient(80% 100% at 50% 0%,rgba(210,10,10,.18),transparent 70%), var(--ink-1); max-width:none;text-align:center; border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .sec--book .lede, .sec--book .note{margin-inline:auto} .cta-stack{display:grid;gap:.65rem;max-width:26rem;margin:2rem auto 0} .btn{ display:flex;align-items:center;justify-content:center;gap:.55rem; min-height:54px;padding:.85rem 1.2rem;border-radius:12px; font:700 .95rem/1.2 var(--sans);letter-spacing:.01em; text-decoration:none;border:1px solid transparent; transition:transform .15s ease,background .2s ease,border-color .2s ease; } .btn:active{transform:scale(.985)} .btn--wa{background:#0E7A35;color:#fff} /* verde WA oscurecido: 5.5:1 con blanco */ .btn--ig{background:var(--bone);color:#101014} .btn--ghost{background:transparent;color:var(--bone);border-color:var(--line)} .btn--ghost:hover{border-color:var(--red-lt)} .btn--sm{min-height:46px;font-size:.85rem;display:inline-flex;margin-top:1.1rem} .btn.is-pending{background:#1F3B2A;color:#BFE8CD;border-color:#2E5B40} .btn__chip{ font:700 .58rem/1.9 var(--sans);letter-spacing:.14em; background:var(--red);color:#fff;padding:0 .45rem;border-radius:4px; } /* ══════════ 8 · DÓNDE ══════════ */ .sec--where{background:var(--ink);max-width:none} .where{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;max-width:var(--maxw);margin-inline:auto;align-items:start} .where__logo{width:96px;flex:none} .where__logo img{width:96px;height:96px;border-radius:50%} .where h2{font-size:clamp(1.7rem,7vw,2.6rem)} .where address{font-style:normal;font-size:1.05rem;line-height:1.55;margin:1rem 0 0;color:var(--bone)} .where__fact{margin-top:1rem;color:var(--muted);font-size:.88rem;max-width:42ch} .where__pend{display:grid;gap:.5rem;margin:1.2rem 0 0} .where__pend li{display:flex;gap:.6rem;align-items:center;font-size:.8rem;color:var(--muted)} @media (min-width:640px){ .where{grid-template-columns:96px minmax(0,1fr);gap:2rem} } /* ══════════ 9 · TODO ══════════ */ .sec--todo{border-top:1px solid var(--line)} .todo{counter-reset:t;margin-top:1.8rem;display:grid;gap:.55rem} .todo li{ counter-increment:t;position:relative;padding:.75rem .9rem .75rem 2.6rem; background:var(--ink-2);border:1px solid var(--line);border-radius:10px; font-size:.87rem;color:var(--bone);line-height:1.45; } .todo li::before{ content:counter(t,decimal-leading-zero); position:absolute;left:.9rem;top:.78rem; font:700 .72rem/1.4 var(--disp);letter-spacing:.08em;color:var(--red-lt); } /* ══════════ FOOTER ══════════ */ .foot{ padding:clamp(2.4rem,8vw,4rem) var(--pad) 2.6rem; border-top:1px solid var(--line);background:var(--ink-1);text-align:center; } .foot__links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.6rem} .foot__links a{ text-decoration:none;font-size:.8rem;font-weight:600;letter-spacing:.04em; padding:.6rem 1rem;border:1px solid var(--line);border-radius:999px;color:var(--bone); min-height:44px;display:inline-flex;align-items:center; } .foot__links a:hover{border-color:var(--red-lt)} .foot__legal{font-size:.72rem;color:var(--muted);max-width:42rem;margin:0 auto .5rem;line-height:1.6} .foot__legal--dim{color:#8A857D;letter-spacing:.18em;text-transform:uppercase;font-size:.62rem} .langswitch--foot{display:inline-flex;margin:.4rem 0 1.4rem} /* ══════════ DOCK móvil ══════════ */ .dock{ position:fixed;left:0;right:0;bottom:0;z-index:50; display:flex;gap:.5rem;align-items:center; padding:.5rem var(--pad);padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px)); background:rgba(10,10,13,.94); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); } .dock__btn{ min-height:46px;display:flex;align-items:center;justify-content:center; border-radius:11px;text-decoration:none;font:700 .88rem/1 var(--sans); border:1px solid var(--line);color:var(--bone);padding:0 .9rem;flex:none; } .dock__btn--main{flex:1 1 auto;background:var(--red);color:#fff;border-color:var(--red)} @media (min-width:820px){ .dock{display:none} } /* ══════════ reveals ══════════ */ .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv{opacity:1!important;transform:none!important;transition:none} .scrollhint::after{animation:none;opacity:.6} .hero__track{height:calc(100svh + 140vh)} *{transition-duration:.01ms!important} }