/* LA TERCERA FÚTBOL — v2.
El sistema es el de edison-lawn-tenis (CSS + un solo IntersectionObserver, cero
librerías), traducido a fondo oscuro. El reproductor de video con audio viene de
forzaclub.
La paleta es la de la primera versión de esta página, traída de vuelta a pedido de
Ciro: casi-negro, verde, amarillo y celeste, con brillos. Se había probado una sacada
del escudo (bordó y azul tinta) y quedaba más sobria y editorial, pero para una cancha
de fútbol ese registro resultó demasiado tranquilo: acá lo que tiene que pegar es el
contraste fuerte y el brillo.
El fondo oscuro no es capricho: la cancha se alquila de 17 a 00, con reflectores. Pero
oscuro parejo de arriba a abajo se lee como página de gimnasio, así que se alternan
tres tonos, igual que Edison alterna papel / papel-alt / celeste-pale.
Los verdes se reparten con una regla: el VERDE WHATSAPP (--wa) es solo de los botones
que abren un chat y no se usa para nada más. El verde de marca (--verde) es para
superficies y detalles. Si se mezclaran, se dejaría de saber qué abre el WhatsApp. */
/* ── Tipografías, servidas desde acá ──
Vienen de Edison, ya subseteadas al alfabeto latino. Se sirven propias y no desde
Google Fonts porque un a un dominio ajeno son dos viajes encadenados —primero
baja el CSS, y recién ahí empieza a bajar la fuente—; así viajan con la hoja de estilos.
Anton viene en un solo grosor (400) y ya es pesada de fábrica: por eso los títulos
NO llevan font-weight 700 u 800. Pedírselo haría que el navegador la engorde por su
cuenta y el resultado es una letra sucia, con los trazos embarrados.
NO se usa fuente manuscrita: el escudo de La Tercera no tiene nada cursivo, así que
meterla sería inventarle a la marca algo que no tiene. */
@font-face {
font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap;
src: url('assets/fonts/anton-400.woff2?v=8') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 400; font-display: swap;
src: url('assets/fonts/switzer-400.woff2?v=8') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 500; font-display: swap;
src: url('assets/fonts/switzer-500.woff2?v=8') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 600; font-display: swap;
src: url('assets/fonts/switzer-600.woff2?v=8') format('woff2');
}
@font-face {
font-family: 'Switzer'; font-style: normal; font-weight: 700; font-display: swap;
src: url('assets/fonts/switzer-700.woff2?v=8') format('woff2');
}
:root {
--tinta: #0A0E0A; /* el casi-negro de la v1, con dejo verde */
--tinta-alt: #101710; /* la banda alterna */
--panel: #18211A; /* tarjetas sobre cualquiera de los dos fondos */
--crema: #F4F7F4;
--crema-soft: #9FAC9F; /* 8,4:1 sobre el fondo */
--verde: #16A34A; /* el verde de la v1: bandas y superficies grandes */
--verde-hi: #22C55E; /* el claro: texto y detalles chicos sobre oscuro (7,4:1) */
--amarillo: #FACC15; /* el acento que da el brillo */
--celeste: #74ACDF;
--celeste-hi: #9CC6EC;
--wa: #25D366;
--wa-ink: #062514;
--star: #FACC15;
--display: 'Anton', 'Impact', system-ui, sans-serif;
--body: 'Switzer', system-ui, -apple-system, sans-serif;
--maxw: 1140px;
--radius: 14px;
--ease: cubic-bezier(.22, 1, .36, 1);
--shadow: 0 14px 34px rgba(0, 0, 0, .5);
/* Los brillos son la firma de la v1: en vez de repetir el mismo box-shadow verde en
cinco lugares, viven acá y se aplican con var(). */
--glow-verde: 0 0 28px rgba(34, 197, 94, .38);
--glow-amarillo: 0 0 26px rgba(250, 204, 21, .42);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--tinta);
color: var(--crema);
font-family: var(--body);
font-size: 16.5px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: var(--celeste-hi); }
h1, h2, h3 {
font-family: var(--display); font-weight: 400; line-height: 1.08;
letter-spacing: .002em; text-transform: uppercase; margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
/* Va por DEBAJO del alto del header bajado (~60px): la sección entra apenas por detrás
del header y del bloque anterior no asoma nada. El aire lo pone el padding propio de
la sección, que ya mide más de 100px. Con el valor "correcto" (8rem, que era la regla
vieja) lo que se ve al tocar un link del nav es una tira del bloque anterior. */
.section[id] { scroll-margin-top: 2.5rem; }
/* Fuera del flujo para no empujar la foto del hero: el header es fixed y no ocupa lugar
propio, así que la foto llega hasta el borde de arriba. */
#top { position: absolute; top: 0; height: 1px; width: 1px; }
.title { font-size: clamp(2.2rem, 5.2vw, 3.5rem); margin-bottom: 1.5rem; letter-spacing: .004em; }
.lead { font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--crema-soft); max-width: 60ch; }
.alt { background: var(--tinta-alt); }
/* ── Header ──
Arriba de todo es invisible y flota sobre la foto del hero; al bajar toma el fondo
tinta con desenfoque. El velo degradado del ::before garantiza que el blanco se lea
sobre cualquiera de las cuatro fotos del pase. El disparador es un centinela de 1px,
no el evento scroll, que corre en cada frame. */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: rgba(18, 22, 30, 0);
border-bottom: 1px solid transparent;
transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.site-header::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(9, 12, 17, .62), rgba(9, 12, 17, 0));
transition: opacity .35s ease;
}
.site-header.scrolled {
background: rgba(18, 22, 30, .88);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom-color: rgba(242, 237, 230, .1);
box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
.site-header.scrolled::before { opacity: 0; }
/* El achique toca el layout (padding y tamaño del logo) en vez de escalar: un scale es
solo visual, el logo seguiría ocupando sus 46px y la barra no bajaría. Se puede porque
el header es fixed y el recálculo no sale de estos cinco elementos. */
.header-in {
position: relative; display: flex; align-items: center; gap: .8rem;
padding-block: .75rem; transition: padding-block .35s ease;
max-width: 1400px; /* Stretch to edges */
}
.site-header.scrolled .header-in { padding-block: .6rem; }
.mark {
width: 46px; height: 46px; border-radius: 50%; flex: none;
transition: width .35s ease, height .35s ease;
}
.site-header.scrolled .mark { width: 40px; height: 40px; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--crema); }
.brand span { display: flex; flex-direction: column; line-height: 1.15; }
.brand b { font-family: var(--display); font-size: 1.16rem; font-weight: 400; letter-spacing: .01em; text-transform: uppercase; }
.brand small { font-size: .72rem; color: rgba(242, 237, 230, .72); letter-spacing: .12em; white-space: nowrap; }
.site-nav { margin-left: auto; margin-right: 0.2rem; display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.site-nav a { font-size: .88rem; font-weight: 500; color: rgba(242, 237, 230, .9); text-decoration: none; transition: color .2s; white-space: nowrap; }
.site-nav a:hover { color: var(--celeste-hi); }
.soc { display: flex; gap: .7rem; margin-left: -.4rem; }
/* La palabra solo acompaña al ícono en el panel del celular: en la barra de escritorio
el ícono solo alcanza y "Instagram" escrito al lado compite con los links. */
.soc-txt { display: none; }
.soc a { display: flex; color: inherit; }
.soc svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.header-in .btn-wa { margin-left: 1.4rem; padding: .55rem 1rem; font-size: .85rem; }
/* ── Menú hamburguesa (solo celular) ── */
.burger { display: none; flex-direction: column; gap: 4px; background: 0; border: 0; padding: 9px; cursor: pointer; }
.burger span {
width: 22px; height: 2px; border-radius: 2px; background: var(--crema);
transition: transform .3s var(--ease), opacity .2s ease;
}
/* Las tres barritas se cruzan en X: la del medio se apaga y las otras dos giran. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 899px) {
/* El auto va acá y no en .site-nav: abajo de 900px el nav es `position: absolute`, así
que no ocupa lugar en la fila y su margin-left no empuja nada. Sin esto la hamburguesa
queda pegada al nombre del club en vez de irse al borde derecho. */
.burger { display: flex; margin-left: auto; }
.soc-txt { display: inline; }
/* Panel sólido y no translúcido: arriba de todo el header es transparente sobre la foto
del hero, y con fondo semitransparente el menú quedaría ilegible sobre la cancha. */
.site-nav {
position: absolute; top: 100%; left: 0; right: 0; margin: 0;
flex-direction: column; align-items: stretch; gap: 0;
background: var(--panel); padding: .4rem 1.2rem 1.1rem;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
/* El visibility no es decorativo: sin él el panel sigue en el flujo de foco y se
tabula hacia links que están fuera de pantalla. */
transform: translateY(-115%); visibility: hidden;
transition: transform .4s var(--ease), visibility .4s;
}
.site-nav.abierto { transform: translateY(0); visibility: visible; }
.site-nav a {
display: block; color: var(--crema); font-size: 1.02rem; font-weight: 500;
padding-block: .85rem; border-bottom: 1px solid rgba(242, 237, 230, .1);
}
/* El SVG va como bloque y el conjunto con line-height 1: un SVG inline se apoya en la
línea base del texto y arrastra el hueco del descender, que lo dejaba un par de
píxeles más arriba que la palabra. */
.site-nav .soc { margin: .9rem 0 0; }
.site-nav .soc a {
display: inline-flex; align-items: center; gap: .55rem;
color: var(--celeste-hi); font-weight: 600; font-size: .98rem; line-height: 1;
border-bottom: 0; padding-block: 0;
}
.site-nav .soc svg { display: block; width: 22px; height: 22px; }
.header-in .btn-wa { margin-left: .6rem; margin-right: .2rem; order: 3; }
/* Sin la bajada el nombre entra en un renglón; con ella el header del celular se
partía en cuatro líneas y se comía media pantalla del hero. */
.brand small { display: none; }
.brand b { font-size: .98rem; }
.mark, .site-header.scrolled .mark { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
/* El botón queda en ícono solo: con la palabra "WhatsApp" el nombre del club se partía
en dos renglones. Igual está el botón flotante, que es el que se usa. */
.header-in .btn-wa { font-size: 0; padding: .55rem; gap: 0; }
}
/* ── Botones ──
El verde significa una sola cosa en toda la página: "esto te abre un WhatsApp". */
.btn-wa {
display: inline-flex; align-items: center; gap: .55rem;
background: var(--wa); color: var(--wa-ink);
font-weight: 600; text-decoration: none;
padding: .85rem 1.5rem; border-radius: 999px;
position: relative; overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
box-shadow: 0 6px 18px rgba(37, 211, 102, .3), var(--glow-verde);
cursor: pointer;
}
.btn-wa svg { fill: var(--wa-ink); flex: none; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(37, 211, 102, .5), 0 0 40px rgba(34, 197, 94, .5); }
.btn-wa::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%);
transform: translateX(-120%);
}
.btn-wa:hover::after { transition: transform .6s ease; transform: translateX(120%); }
.btn-wa--xl { padding: 1rem 1.9rem; font-size: 1.04rem; }
.btn-wa--xl::after { animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
.btn-ghost {
display: inline-flex; align-items: center; gap: .5rem;
color: var(--crema); font-weight: 600; text-decoration: none;
padding: .95rem 1.6rem; border-radius: 999px;
border: 1.5px solid rgba(242, 237, 230, .5);
transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgba(242, 237, 230, .12); border-color: var(--crema); transform: translateY(-2px); }
/* FAB flotante: círculo, solo ícono */
.wa-float {
position: fixed; right: 1.1rem; bottom: max(1.25rem, env(safe-area-inset-bottom));
z-index: 70; width: 3.5rem; height: 3.5rem; border-radius: 999px;
display: flex; align-items: center; justify-content: center;
background: var(--wa); color: var(--wa-ink);
box-shadow: 0 8px 22px rgba(37, 211, 102, .45), var(--glow-verde);
transition: transform .2s ease;
}
.wa-float svg { fill: var(--wa-ink); }
.wa-float:hover { transform: scale(1.07); }
.wa-float::after {
content: ''; position: absolute; inset: 0; border-radius: inherit;
border: 2px solid var(--wa); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } }
/* ── Hero: foto a pantalla completa con pase de cuatro ── */
.hero {
position: relative; min-height: 100svh;
display: flex; align-items: flex-end;
color: var(--crema); overflow: clip;
}
.hero-media { position: absolute; inset: 0; }
/* Las cuatro fotos apiladas; solo la que tiene .activa está visible. El cruce es un
fundido largo para que no se sienta un cambio de diapositiva. */
.hero-media picture {
position: absolute; inset: 0; display: block;
opacity: 0; transition: opacity 1.2s ease;
}
.hero-media picture.activa { opacity: 1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Las fotos son 4:3 y el celular las recorta a lo alto. En la del plantel la gente está
en la mitad de abajo, así que el encuadre se corre para no cortarles la cabeza. */
@media (max-width: 700px) {
.hero-media picture:nth-child(2) img { object-position: center 62%; }
}
.hero::after {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(80% 55% at 22% 78%, rgba(22, 163, 74, .3), transparent 60%),
linear-gradient(90deg, rgba(6, 10, 6, .78) 0%, rgba(6, 10, 6, .4) 58%, rgba(6, 10, 6, .18) 100%),
linear-gradient(200deg, rgba(6, 10, 6, .3) 0%, rgba(6, 10, 6, .52) 52%, rgba(6, 10, 6, .9) 100%);
}
.hero-in { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 8vw, 5rem); }
.hero h1 {
font-size: clamp(3.1rem, 9.2vw, 6.2rem); font-weight: 400; letter-spacing: .006em;
line-height: .96; margin-bottom: .38em; color: var(--crema);
text-shadow: 0 4px 30px rgba(0, 0, 0, .55);
}
.hero .lead { color: rgba(242, 237, 230, .88); max-width: 48ch; font-size: clamp(1.05rem, 2.2vw, 1.2rem); }
.hero-cred {
display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
margin: 1.3rem 0 1.7rem; font-size: .92rem; font-weight: 500; color: rgba(242, 237, 230, .92);
}
.hero-cred .stars { color: var(--star); letter-spacing: .12em; font-size: 1rem; }
.hero-cred .sep { opacity: .4; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
/* El botón mide 30px aunque el punto sea de 9: abajo de 24px el dedo no acierta y
Lighthouse lo marca como target chico. El punto lo dibuja el ::after. */
.hero-dots { display: flex; gap: .15rem; margin-top: 1.7rem; margin-left: -.4rem; }
.hero-dots button {
width: 30px; height: 30px; padding: 0; border: 0; background: none;
cursor: pointer; display: grid; place-items: center;
}
.hero-dots button::after {
content: ''; width: 9px; height: 9px; border-radius: 999px;
background: rgba(242, 237, 230, .45);
transition: background .3s ease, width .3s ease;
}
.hero-dots button[aria-current="true"]::after { background: var(--amarillo); width: 24px; box-shadow: var(--glow-amarillo); }
/* ── Motion del hero ──
El titular sube desde atrás del renglón: cada línea va en una cajita con el desborde
oculto. El padding + margin negativo le da aire a las colas de las letras para que el
recorte no se las coma, sin tocar el interlineado. */
.ln { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; padding-top: .16em; margin-top: -.16em; }
@keyframes sube { from { transform: translateY(112%); } to { transform: none; } }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js-anim .hero .ln > span { display: block; animation: sube .8s var(--ease) both; }
.js-anim .hero .ln:nth-of-type(2) > span { animation-delay: .12s; }
.js-anim .hero .lead { animation: entra .55s var(--ease) .3s both; }
.js-anim .hero-cred { animation: entra .55s var(--ease) .42s both; }
.js-anim .hero-cta { animation: entra .55s var(--ease) .54s both; }
.js-anim .hero-dots { animation: entra .55s var(--ease) .66s both; }
/* Parallax y salida del hero atados al scroll, que corren fuera del hilo principal.
El @supports no es opcional: sin él, un navegador que no entiende la línea de tiempo
de scroll ejecuta la animación una vez al cargar, que es lo contrario de lo buscado. */
@supports (animation-timeline: scroll()) {
@keyframes parallax { to { transform: translateY(7%); } }
@keyframes heroSale { to { opacity: 0; transform: translateY(-40px); } }
.js-anim .hero-media {
animation: parallax linear both;
animation-timeline: scroll(); animation-range: 0 100vh;
}
.js-anim .hero-in {
animation: heroSale linear both;
animation-timeline: scroll(); animation-range: 25vh 88vh;
}
}
/* ── Jugá hoy: lo primero que se ve al bajar del hero ──
El texto pesa más que la foto (1.15 contra 1) porque acá lo que vende son los cuatro
puntos concretos: cancha, luz, estacionamiento y formas de pago. La foto acompaña. */
.jugar-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.jugar-ph img {
border-radius: var(--radius); width: 100%;
height: clamp(340px, 42vw, 520px); object-fit: cover;
box-shadow: var(--shadow);
}
.features {
list-style: none; margin: 2rem 0 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
}
.features li {
display: flex; align-items: center; gap: .8rem;
background: var(--panel); border-radius: 12px; padding: .95rem 1.1rem;
border: 1px solid rgba(244, 247, 244, .06);
}
/* El ícono va en su propia chapita verde: sobre el panel oscuro un trazo suelto se
pierde, y la chapa le da el peso que en la v1 tenía el emoji de color. */
.features svg {
flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 10px;
background: rgba(34, 197, 94, .14); color: var(--verde-hi);
stroke: currentColor; fill: none; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.features b { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.jugar .btn-wa { margin-top: 2rem; }
@media (max-width: 1000px) { .features { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .jugar-grid { grid-template-columns: 1fr; } .jugar-ph { order: -1; } }
/* ── Números ── */
.stats { border-block: 1px solid rgba(242, 237, 230, .08); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.stat { text-align: center; }
.stat b {
display: block; font-family: var(--display); font-weight: 400;
font-size: clamp(2.4rem, 5.4vw, 3.8rem); color: var(--verde-hi); line-height: 1;
text-shadow: 0 0 30px rgba(34, 197, 94, .45);
}
.stat span { font-size: .85rem; color: var(--crema-soft); font-weight: 500; }
@media (max-width: 720px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; } }
/* ── Las tres líneas de negocio: bandas grandes con video ──
Van como bandas y no como tarjetas porque cada una es un negocio distinto con su
propio precio y su propia conversación de WhatsApp, y porque el material que hay
para mostrarlas es video vertical, que en una tarjeta chica no se ve. */
.panel {
display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center;
padding-inline: max(clamp(1.1rem, 4vw, 2rem), (100% - var(--maxw)) / 2);
}
/* La banda del medio invierte el orden para que las tres no se lean como la misma
plantilla repetida. En celular vuelve a apilarse con el video arriba. */
.panel--inv .panel-media { order: 2; }
@media (max-width: 860px) {
.panel { grid-template-columns: 1fr; }
.panel-media, .panel--inv .panel-media { order: -1; }
}
.panel .lista { margin: 1.3rem 0 0; padding: 0; list-style: none; color: var(--crema-soft); font-size: .97rem; }
.panel .lista li { padding-left: 1.35rem; position: relative; margin-bottom: .45rem; }
.panel .lista li::before {
content: ''; position: absolute; left: 0; top: .52em;
width: 8px; height: 8px; border-radius: 50%; background: var(--amarillo);
}
.panel-quote {
margin: 1.5rem 0 0; padding: 1.1rem 1.3rem; background: var(--panel);
border-left: 3px solid var(--celeste); border-radius: 0 10px 10px 0; font-size: .95rem;
}
.panel-quote .stars { color: var(--star); font-size: .85rem; letter-spacing: .1em; display: block; margin-bottom: .3rem; }
.panel-quote b { display: block; margin-top: .45rem; font-size: .82rem; color: var(--crema-soft); font-weight: 500; }
.panel .btn-wa { margin-top: 1.6rem; }
/* ── Reproductor de video (patrón de forzaclub) ──
El video arranca CON AUDIO al tocar play, que es lo que se pidió. Por eso no puede
autoreproducirse: ningún navegador deja arrancar con sonido sin que alguien toque algo.
`preload="none"` es lo que hace que esto no pese: los tres mp4 suman 8 MB y no se baja
ni un byte hasta que alguien aprieta play. Mientras tanto se ve el poster, que son 60K. */
.reel-player {
position: relative; border-radius: 18px; overflow: hidden;
aspect-ratio: 9 / 16; background: #000; box-shadow: var(--shadow);
max-width: 380px; margin-inline: auto; width: 100%;
}
.reel-player video { width: 100%; height: 100%; object-fit: cover; }
/* El reel de la escuelita es cuadrado. Forzado al marco 9:16 el recorte se comía casi la
mitad del cuadro por los costados, así que ese reproductor toma la forma del video. */
.reel-player--cuadrado { aspect-ratio: 1; max-width: 440px; }
.reel-play, .reel-restart {
position: absolute; border: 0; cursor: pointer; display: grid; place-items: center;
transition: transform .2s ease, opacity .25s ease, background .2s ease;
}
/* Amarillo y no verde: en esta página el verde quiere decir "esto te abre un WhatsApp",
y un play verde haría dudar antes de tocarlo. */
.reel-play {
inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
background: var(--amarillo); color: var(--tinta);
box-shadow: 0 10px 30px rgba(0, 0, 0, .55), var(--glow-amarillo);
}
.reel-play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.reel-play:hover { transform: scale(1.08); background: #FFD83D; }
/* Mientras corre, el botón central se va; al pausar o terminar vuelve, y ahí funciona
como "reproducir de nuevo". */
.is-playing .reel-play { opacity: 0; pointer-events: none; transform: scale(.7); }
.reel-restart {
right: .8rem; bottom: .8rem; width: 42px; height: 42px; border-radius: 50%;
background: rgba(9, 12, 17, .6); color: var(--crema);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
}
.reel-restart svg { width: 20px; height: 20px; fill: currentColor; }
.is-playing .reel-restart { opacity: 1; pointer-events: auto; }
.reel-restart:hover { background: rgba(9, 12, 17, .85); }
/* Aviso de que tiene sonido: si no, el que lo toca en el celular a la noche se lleva
un susto y lo primero que hace es cerrar la página. */
.reel-nota {
text-align: center; font-size: .82rem; color: var(--crema-soft);
margin: .8rem 0 0; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.reel-nota svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
/* ── Banda de texto que se desplaza ──
Reusa el keyframe mq (-50%), que cierra sin salto porque el contenido está duplicado
exacto en el HTML. Se frena al pasar el mouse. */
.banda-mq { overflow: hidden; background: var(--amarillo); padding-block: .95rem; }
.banda-track {
display: flex; align-items: center; gap: 2.2rem; width: max-content;
animation: mq 34s linear infinite;
}
@media (hover: hover) {
.banda-mq:hover .banda-track { animation-play-state: paused; }
}
.banda-track span {
font-family: var(--display); font-weight: 400; text-transform: uppercase;
letter-spacing: .01em; font-size: clamp(.92rem, 1.8vw, 1.12rem);
white-space: nowrap; color: var(--tinta);
}
.banda-track i { width: 9px; height: 9px; border-radius: 50%; background: rgba(10,14,10,.55); flex: none; }
/* ── Galería: carrusel de fotos verticales ──
Verticales porque el material lo es: el Instagram del club son reels, así que de 275
fotos bajadas 215 son 4:5 y solo 6 apaisadas. En vez de recortar todo a lo ancho y
perder media foto, la galería está hecha para el formato que hay. */
.mq { overflow: hidden; margin-top: 2.6rem; position: relative; }
.mq-track { display: flex; gap: 14px; width: max-content; animation: mq 46s linear infinite; }
@media (hover: hover) {
.mq:hover .mq-track { animation-play-state: paused; }
}
.mq img { height: clamp(230px, 30vw, 330px); width: auto; border-radius: 12px; }
@keyframes mq { to { transform: translateX(-50%); } }
/* El keyframe recorre la mitad del track, no una distancia fija. En el celular las fotos
son más bajas, el track queda más angosto y esa misma mitad son menos píxeles: con los
46s de escritorio el carrusel se siente frenado. */
@media (max-width: 860px) { .mq-track { animation-duration: 30s; } }
.gal-ig { text-align: center; margin: 2rem 0 0; font-size: .95rem; color: var(--crema-soft); }
.gal-ig a { font-weight: 600; text-decoration: underline; text-decoration-color: rgba(140, 194, 230, .35); text-underline-offset: 3px; }
/* ── Opiniones: fichas con formato de Google ──
Es el bloque estándar de todas las landings del taller. Cinco piezas que no se
negocian: la chapa de puntaje arriba, el logo de Google en cada ficha, la fecha
ABSOLUTA de la reseña —"hace 2 meses" empieza a mentir al mes siguiente—, carrusel con
scroll-snap en el celular y grilla de tres en escritorio, y la pista de deslizar solo
en el celular. */
.g-resumen {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center;
width: fit-content; margin: 0 auto; padding: 1rem 1.5rem;
background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow);
}
.g-logo { width: 1.5rem; height: 1.5rem; flex: none; }
.g-resumen .puntaje { font-family: var(--display); font-weight: 400; font-size: 2.3rem; line-height: 1; margin: 0; }
.estrellas-fijas { color: var(--star); letter-spacing: .06em; font-size: 1.02rem; }
.g-resumen small { display: block; color: var(--crema-soft); font-size: .86rem; }
.g-resumen a {
margin-left: .4rem; font-weight: 600; font-size: .92rem;
color: var(--celeste-hi); text-decoration: none; border-bottom: 1px solid currentColor;
}
@media (hover: hover) { .g-resumen a:hover { color: var(--crema); } }
.op-viewport {
display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; margin-top: 1.8rem; padding-bottom: .5rem;
}
.op-viewport::-webkit-scrollbar { display: none; }
/* En escritorio deja de ser carrusel: si no, las últimas fichas no se ven nunca. */
@media (min-width: 900px) {
.op-viewport {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
overflow: visible; margin-top: 2.2rem; padding-bottom: 0;
}
}
.op {
flex: 0 0 min(340px, 84vw); scroll-snap-align: center;
background: var(--panel); border-radius: var(--radius); padding: 1.4rem;
display: flex; flex-direction: column; margin: 0;
box-shadow: var(--shadow); transition: transform .25s ease;
}
@media (hover: hover) { .op:hover { transform: translateY(-4px); } }
.op-cab { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.op-ava {
width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%;
display: grid; place-items: center; color: #fff;
font-weight: 700; font-size: .88rem; line-height: 1;
}
.op-cab div { margin-right: auto; min-width: 0; }
.op cite { display: block; font-style: normal; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.op small { display: block; color: var(--crema-soft); font-size: .8rem; }
.op .estrellas { color: var(--star); letter-spacing: .08em; font-size: 1rem; }
.op p { margin: .6rem 0 0; font-size: .97rem; color: rgba(242, 237, 230, .9); }
.pista { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .85rem; color: var(--crema-soft); }
.pista svg {
width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2;
animation: desliza 1.6s ease-in-out infinite;
}
@keyframes desliza { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (min-width: 900px) { .pista { display: none; } }
/* ── Ubicación ── */
.locale-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; }
.locale-info { display: flex; flex-direction: column; gap: 1.05rem; }
.locale-item { display: flex; gap: .8rem; align-items: flex-start; }
.locale-item svg { flex: none; margin-top: .2rem; stroke: var(--celeste-hi); fill: none; stroke-width: 1.8; width: 22px; height: 22px; }
.locale-item b { display: block; font-size: .95rem; }
.locale-item span { color: var(--crema-soft); font-size: .92rem; }
.locale-item a { color: var(--celeste-hi); text-decoration: none; border-bottom: 1px solid rgba(140,194,230,.35); }
/* El fondo no es decorativo: hasta que el iframe recibe su src pinta blanco, y sin esto
el hueco del mapa se ve como un rectángulo blanco en medio de una sección oscura. */
.locale-map {
position: relative; border-radius: var(--radius); box-shadow: var(--shadow);
background: var(--panel); overflow: hidden;
}
.locale-map iframe { width: 100%; height: 380px; border: 0; display: block; border-radius: var(--radius); }
@media (max-width: 860px) { .locale-grid { grid-template-columns: 1fr; } }
/* ── Preguntas ──
nativo: el acordeón no necesita una línea de JS, y el que llega buscando el
precio lo encuentra con Cmd+F aunque esté cerrado. */
/* Sin `margin-inline: auto`: centrada quedaba corrida a la derecha respecto del h2, que
arranca en el borde del wrap, y se leía como un bloque desalineado. */
.faq { max-width: 820px; }
.faq details {
border-bottom: 1px solid rgba(242, 237, 230, .12);
padding: .3rem 0;
}
.faq summary {
cursor: pointer; list-style: none; padding: 1.05rem 2.4rem 1.05rem 0;
font-family: var(--display); font-weight: 400; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .01em;
position: relative; transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--celeste-hi); }
/* La cruz gira 45° al abrir y se convierte en una X. Dos barritas con ::after. */
.faq summary::after {
content: ''; position: absolute; right: .4rem; top: 50%;
width: 14px; height: 2px; background: var(--verde-hi);
transform: translateY(-50%);
}
/* Las dos barritas tienen que cruzarse en el MISMO punto. La horizontal mide 14px con su
borde derecho en .4rem, así que su centro cae en .4rem + 7px; la vertical mide 2px y su
centro en right + 1px. De ahí el calc: con un valor suelto las barras quedaban separadas
y el "+" se veía como un ⊢. */
.faq summary::before {
content: ''; position: absolute; right: calc(.4rem + 6px); top: 50%;
width: 2px; height: 14px; background: var(--verde-hi);
transform: translateY(-50%); transition: transform .3s var(--ease), opacity .3s ease;
}
.faq details[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq details p { color: var(--crema-soft); margin: 0 0 1.05rem; font-size: .98rem; max-width: 66ch; }
/* ── CTA final ── */
/* El cierre va con la foto de la cancha de noche, con los reflectores prendidos. Antes
eran las líneas de una cancha dibujadas en SVG sobre un fondo plano, y se leía como un
dibujo genérico pegado al pie. Una foto real del lugar cierra mejor: es el sitio al que
estás invitando a venir.
Esta foto es la menos nítida de las cuatro apaisadas que hay, y acá eso no importa: va
detrás de un velo oscuro fuerte y de un titular enorme. Al revés, su tema —jugar de
noche— es justo el del cierre. */
.cta-band {
position: relative; color: #fff; background: var(--tinta);
text-align: center; overflow: hidden;
padding-block: clamp(5.5rem, 13vw, 9rem);
}
.cta-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* En el celular la banda es mucho más angosta que la foto y el recorte centrado dejaba
afuera el cuadro de Messi con la copa, que es lo mejor que tiene el museo. Corrido al 78%
entran la camiseta enmarcada a la izquierda y ese cuadro a la derecha. */
@media (max-width: 700px) { .cta-ph { object-position: 78% center; } }
/* Dos degradados encima: uno parejo que baja el brillo general y otro vertical que funde
los bordes con el negro de arriba y con el pie de abajo, para que la banda no quede
como un recorte pegado sino como parte de la página. */
.cta-band::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(rgba(10,14,10,.92), rgba(10,14,10,.58) 40%, rgba(10,14,10,.62) 60%, rgba(10,14,10,.95)),
radial-gradient(110% 80% at 50% 45%, rgba(22,163,74,.1), transparent 68%);
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-title {
font-size: clamp(3rem, 9.5vw, 6rem); letter-spacing: .004em; margin: 0 0 .3em; color: #fff;
text-shadow: 0 0 44px rgba(34, 197, 94, .5), 0 6px 24px rgba(0, 0, 0, .55);
}
.cta-band p { max-width: 46ch; margin-inline: auto; color: rgba(255, 255, 255, .9); }
.cta-band .btn-wa { margin-top: 1.4rem; }
.cta-hours { margin-top: 1.6rem; max-width: none; font-size: .88rem; font-weight: 500; color: rgba(255, 255, 255, .75); }
/* ── Pie ── */
.site-footer { background: #0C1016; color: rgba(242, 237, 230, .68); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 2.5rem; align-items: start; padding-block: 3.5rem 2.5rem; }
.f-col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
/* Al lado del nombre y no encima: así los títulos de las tres columnas arrancan a la
misma altura. Antes el escudo empujaba el de la primera media cabeza para abajo y las
tres quedaban desalineadas. */
.f-marca { display: flex; align-items: center; gap: .6rem; }
.f-logo { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.f-col b { display: flex; align-items: center; min-height: 40px; color: var(--crema); font-family: var(--display); font-weight: 400; font-size: 1.14rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; margin-bottom: .55rem; }
.f-col p { margin: 0; max-width: 30ch; color: rgba(242, 237, 230, .5); }
.f-col a { color: rgba(242, 237, 230, .68); text-decoration: none; transition: color .2s; }
.f-col a:hover { color: var(--celeste-hi); }
.footer-bar {
display: flex; justify-content: space-between; gap: 1rem;
padding-block: 1.3rem; font-size: .8rem; color: rgba(242, 237, 230, .55);
border-top: 1px solid rgba(242, 237, 230, .1);
}
/* El subrayado va siempre, no solo en hover: un link dentro de un renglón de texto no
puede distinguirse solo por el color. Lighthouse lo marca como link-in-text-block y
baja la accesibilidad de 100 a 96. */
.firma a {
color: rgba(242, 237, 230, .8); text-decoration: underline;
text-decoration-color: rgba(242, 237, 230, .28);
text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s;
}
.firma a:hover { color: var(--celeste-hi); text-decoration-color: var(--celeste-hi); }
@media (max-width: 720px) {
.footer-grid { grid-template-columns: 1fr; text-align: center; }
.f-col { align-items: center; }
.f-marca { justify-content: center; }
.footer-bar { flex-direction: column; text-align: center; gap: .3rem; }
}
/* ── Reveals ──
El JS solo agrega .visible y un --i con el orden dentro de la tanda; el resto es CSS.
Los estados ocultos cuelgan de .js-anim, así que sin JS la página se ve entera y quieta. */
/* Todos los selectores de acá pesan lo mismo que `.js-anim .visible` (dos clases). No es
casual: si alguno llevara un tipo o una clase de más le ganaría al estado visible y ese
elemento no aparecería nunca —ya pasó con `.js-anim .faq details`, que dejaba las seis
preguntas invisibles—. Lo que hay que revelar y no tiene clase propia recibe `.reveal`
desde el JS, justamente para no romper este equilibrio. */
.js-anim .reveal, .js-anim .stat,
.js-anim .jugar-ph, .js-anim .panel-media, .js-anim .locale-map {
opacity: 0; transform: translateY(22px);
}
/* El botón entra SOLO con opacidad, sin transform. Su hover ya usa transform, y como
`.js-anim .visible` tiene la misma especificidad y viene después en el archivo, le
pisaba el translateY(-2px) y el botón quedaba sin hover. */
.js-anim .panel .btn-wa, .js-anim .jugar .btn-wa { opacity: 0; }
.js-anim .panel .btn-wa.visible, .js-anim .jugar .btn-wa.visible { opacity: 1; transition: opacity .5s var(--ease), transform .2s ease, box-shadow .2s ease; }
.js-anim .visible {
opacity: 1; transform: none;
transition: opacity .5s var(--ease), transform .6s var(--ease);
transition-delay: calc(var(--i, 0) * .07s);
}
/* Títulos: cada palabra sube desde atrás de su renglón. */
.title .w {
display: inline-block; overflow: hidden; vertical-align: bottom;
padding-bottom: .1em; margin-bottom: -.1em;
padding-top: .18em; margin-top: -.18em;
}
.js-anim .title .w > span { display: inline-block; transform: translateY(112%); }
.js-anim .title.visible .w > span {
transform: none;
transition: transform .7s var(--ease);
transition-delay: calc(var(--i, 0) * .05s);
}
/* Las estrellas de cada opinión aparecen de a una. El disparador es el contenedor y no
cada ficha: en el celular las fichas viven en un carrusel horizontal y las de la
derecha nunca entran a pantalla, así que un reveal por ficha las dejaría invisibles
hasta que alguien deslice. El orden va escrito acá porque siempre son seis. */
.js-anim .op .estrellas { opacity: 0; }
.js-anim .op-viewport.visible .estrellas {
opacity: 1; transition: opacity .4s ease;
transition-delay: calc(var(--j, 0) * .09s + .3s);
}
.js-anim .op:nth-child(2) .estrellas { --j: 1; }
.js-anim .op:nth-child(3) .estrellas { --j: 2; }
.js-anim .op:nth-child(4) .estrellas { --j: 3; }
.js-anim .op:nth-child(5) .estrellas { --j: 4; }
.js-anim .op:nth-child(6) .estrellas { --j: 5; }
/* El video entra apenas agrandado y se asienta. Va en la propiedad `scale` y no dentro
de `transform` a propósito: así no se pisa con el translateY de la entrada. */
.js-anim .panel-media .reel-player { scale: 1.06; }
.js-anim .panel-media.visible .reel-player {
scale: 1; transition: scale 1.1s var(--ease);
transition-delay: calc(var(--i, 0) * .07s);
}
/* ── Mobile: centrado ── */
@media (max-width: 899px) {
.hero-in, .hero-cta, .hero-cred, .hero-dots { justify-content: center; text-align: center; }
.hero h1, .hero .lead { margin-inline: auto; }
.title, .lead { text-align: center; margin-inline: auto; }
.panel > div:not(.panel-media) { text-align: center; }
.panel .lista { display: inline-block; text-align: left; }
.panel .lista li { display: block; text-align: left; }
.panel-quote { text-align: left; }
/* Las fichas de opinión NO se centran: el texto de una reseña se lee alineado a la
izquierda. Sí se centra la pista de deslizar, que acompaña al carrusel. */
.pista { justify-content: center; }
}
/* ── Mobile: el hero tiene que ENTRAR ──
En una pantalla de 390×640 el titular a dos líneas, la bajada a cuatro renglones y la
chapa de Google empujaban los tres botones abajo del pliegue: se veía una foto linda y
ninguna forma de escribir. Todo lo de acá abajo es recortar aire para que el botón de
WhatsApp quede arriba del pliegue, que es lo único que la página tiene que lograr. */
@media (max-width: 700px) {
/* El contenido se centra en vez de apoyarse abajo. Con la alineación al pie, en un
teléfono alto quedaban 280px de foto vacía entre el header y el titular y casi nada
abajo: todo el aire junto arriba. Centrado se reparte, y el padding de arriba mayor que
el de abajo lo deja apenas por debajo del medio, que es donde el velo tapa mejor. */
.hero { align-items: center; }
.hero-in { padding-block: 3.4rem 1.4rem; }
.hero h1 { font-size: clamp(2.7rem, 12.4vw, 4rem); margin-bottom: .3em; max-width: 16ch; }
.hero .lead { font-size: 1.06rem; line-height: 1.5; max-width: 32ch; margin-bottom: 0; }
.hero-cred { margin: .9rem 0 1.25rem; gap: .35rem .7rem; font-size: .86rem; }
/* El punto separador quedaba solo al final del renglón cuando la dirección bajaba de
línea. Acá el salto es a propósito y el punto sobra. */
.hero-cred .sep { display: none; }
.hero-cred > span:last-child { flex-basis: 100%; }
.hero-cta { gap: .6rem; }
.hero-cta .btn-ghost { padding: .8rem 1.25rem; font-size: .95rem; }
.hero-dots { margin-top: 1.1rem; }
}
/* ── Mobile: motion más suave ──
Todo el motion se calibró mirando una pantalla ancha, y en el celular la misma receta
se lee brusca por tres motivos distintos. Acá se corrige cada uno; en escritorio no
cambia nada. */
@media (max-width: 899px) {
/* 1) La curva. La de escritorio arranca disparada y frena largo: en 390px de ancho ese
arranque se siente un tirón. Esta sale del mismo lado pero con menos violencia. */
:root { --ease: cubic-bezier(.33, 1, .68, 1); }
/* 2) El recorrido. 22px sobre una pantalla de 390px pesan el doble que sobre una de
1400px: lo que en el monitor es un deslizamiento, en el celular es un salto. */
.js-anim .reveal, .js-anim .stat,
.js-anim .jugar-ph, .js-anim .panel-media, .js-anim .locale-map { transform: translateY(12px); }
/* 3) El escalonado. Se pensó para filas de 2 a 4 columnas, donde reparte la entrada a
lo ancho. Acá todo se apila en una sola columna y ese mismo retraso acumulado
convierte la sección en una fila de espera. */
.js-anim .visible { transition-delay: calc(var(--i, 0) * .03s); }
.js-anim .title.visible .w > span { transition-delay: calc(var(--i, 0) * .025s); }
}
/* En una sola columna el título queda entre la foto de arriba y el texto de abajo, y con las
medidas de escritorio el aire quedaba repartido al revés: pegado arriba y suelto abajo. Se
agranda el hueco entre la foto y el bloque de texto, y se achica el de abajo del título. */
@media (max-width: 860px) {
.jugar-grid, .panel, .locale-grid { gap: 2.6rem; }
.title { margin-bottom: 1.05rem; }
}
/* ── Reduced motion ──
El JS no agrega .js-anim en este caso, así que los estados ocultos ni existen. Acá solo
quedan los loops infinitos, que son de CSS puro y hay que apagar a mano. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.mq, .banda-mq { overflow-x: auto; }
.mq-track, .banda-track { animation: none; }
.btn-wa--xl::after { animation: none; }
.wa-float::after { animation: none; }
* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.beelup-logo { height: clamp(2.8rem, 6.5vw, 4.5rem); }
.btn-group-indumentaria { align-items: flex-start; }
@media (max-width: 768px) {
.logo-stamp {
display: block;
margin-left: auto;
margin-right: auto;
}
.beelup-logo {
height: 4.5rem;
}
.btn-group-indumentaria {
align-items: center;
}
}