/* =====================================================================
PÚBLICO — landing y pantallas de autenticación.
Es el ÚNICO lugar del proyecto con fondo oscuro, y vive en un archivo
aparte a propósito: la app por dentro sigue clara y nada de acá tiene
que poder filtrarse hacia ella. Por eso todo cuelga de .publico.
No es una inconsistencia — es la separación entre la presentación
pública y la herramienta de trabajo, que se usa en la cancha (bajo techo).
Todos los colores salen de tokens.css.
Mobile-first. Las versiones de escritorio viven en layout.css, que es el
único lugar del proyecto con media queries de ancho.
===================================================================== */
.publico{
min-height:100dvh;background:var(--pub-fondo);color:var(--sobre-oscuro);
display:flex;flex-direction:column;
position:relative;isolation:isolate;
}
/* El resplandor del color del club arriba de todo, detrás de la marca y del
hero. Estático. Va en un pseudo-elemento y la intensidad en opacity porque
el gradiente con color-mix() (--club mezclado con transparente) costó
~+450 ms de FCP y ~+900 ms de LCP en Lighthouse mobile; con var(--club) puro
y opacity, que compone la GPU, el costo desaparece. */
.publico::before{
content:"";position:absolute;inset:0 0 auto;height:28rem;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse 75% 100% at 50% 0,var(--club),transparent);
opacity:.4;
}
.publico[hidden]{display:none}
.vista{display:none}
.vista.on{display:block}
/* ---- marca: escudo + nombre, arriba de todo ---- */
.marca{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);padding:var(--sp-6) var(--sp-4) 0}
.marca img{width:2.75rem;height:2.75rem;flex:0 0 auto}
.marca .t{font-family:var(--ff-titulo);font-weight:700;font-size:var(--fs-230);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.marca .s{font-size:var(--fs-100);color:var(--gris-osc);letter-spacing:.14em;text-transform:uppercase;margin-top:.1875rem}
/* ---- landing ---- */
.hero{padding:var(--sp-6) var(--sp-4) var(--sp-5);text-align:center}
.hero .club{font-family:var(--ff-titulo);font-size:var(--fs-125);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-osc);margin-bottom:var(--sp-3)}
/* Escudo con el nombre del club girando alrededor. El SVG gira entero (su
centro es el del escudo) y sólo anima transform. Es la única animación
continua del proyecto (excepción en DESIGN.md): un observer le pone .quieto
cuando sale de pantalla, y con prefers-reduced-motion base.css la apaga y el
texto queda en su lugar, legible. */
.escudo-anillo{position:relative;width:9rem;height:9rem;margin:0 auto var(--sp-5)}
.escudo-anillo img{position:absolute;inset:26%;width:48%;height:48%;object-fit:contain}
.anillo{position:absolute;inset:0;width:100%;height:100%;animation:giro var(--dur-giro) linear infinite}
.anillo.quieto{animation-play-state:paused}
.anillo text{font-family:var(--ff-titulo);font-weight:600;letter-spacing:.04em;fill:var(--gris-osc)}
@keyframes giro{from{transform:rotate(-360deg)}}
.hero h1{font-size:clamp(1.75rem,1.35rem + 2vw,2.75rem);line-height:1.03;letter-spacing:.01em}
.hero h1 .r{color:var(--primario)}
.hero .bajada{color:var(--gris-osc);font-size:var(--fs-170);line-height:1.45;margin:var(--sp-4) auto 0;max-width:34rem}
.acciones-landing{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-6);max-width:24rem;margin-inline:auto;width:100%}
.beneficios{display:grid;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-6)}
/* Cada beneficio lleva un filete del color del club a la izquierda: marca la
jerarquía sin sumar fondo. NO entran animados: se probó un fade escalonado y
subía el LCP de la landing ~+316 ms (+2.6 %) en Lighthouse mobile, porque un
párrafo de estas tarjetas es el elemento más grande y no cuenta hasta que se
ve. Sin la animación el LCP queda igual que antes. */
.ben{
position:relative;background:var(--pub-tarjeta);border:1px solid var(--pub-borde);
border-radius:var(--r);padding:var(--sp-4);
transition:transform var(--dur-2) var(--ease-salida);
animation:subir-ben var(--dur-3) var(--ease-salida) backwards;
}
/* Entran subiendo, pero SIN opacity: con opacity 0 el párrafo (que es el LCP)
no contaba hasta verse y costaba ~+316 ms. Un translateY no oculta nada, así
que se pinta desde el primer frame. Sólo escalonan las 6 de la landing. */
@keyframes subir-ben{from{transform:translateY(.75rem)}}
.ben:nth-child(2){animation-delay:60ms}
.ben:nth-child(3){animation-delay:120ms}
.ben:nth-child(4){animation-delay:180ms}
.ben:nth-child(5){animation-delay:240ms}
.ben:nth-child(6){animation-delay:300ms}
.ben::before{
content:"";position:absolute;left:-1px;top:var(--sp-4);bottom:var(--sp-4);width:3px;
background:var(--primario);border-radius:0 2px 2px 0;transform-origin:left;
transition:transform var(--dur-2) var(--ease-salida);
}
/* Anillo y resplandor del club, que aparecen con opacity. */
.ben::after{
content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
box-shadow:var(--brillo-club);opacity:0;transition:opacity var(--dur-2) var(--ease-salida);
}
.ben .t{
font-family:var(--ff-titulo);font-size:var(--fs-170);font-weight:600;
text-transform:uppercase;letter-spacing:.04em;line-height:1.15;
display:flex;align-items:baseline;gap:var(--sp-2);
}
.ben .t::before{
content:"";width:.4375rem;height:.4375rem;background:var(--primario);flex:0 0 auto;
transform:translateY(-.15em);transition:transform var(--dur-2) var(--ease-salida);
}
.ben .d{color:var(--gris-osc);font-size:var(--fs-135);line-height:1.5;margin-top:var(--sp-2)}
/* ---- demos de la landing ----
Gráficos chicos con datos INVENTADOS, escritos en HTML/SVG y decorativos
(aria-hidden): sólo muestran cómo se ve la función, no dicen nada real. Corren una sola vez: quedan pausadas,
con fill-mode backwards (se ve el primer cuadro), hasta que landingAnimada.js
le pone .en-vista a la tarjeta. Sólo se animan los gráficos: el texto de la
tarjeta (.t y .d) se ve desde el primer cuadro porque es el LCP. */
.demo{margin-bottom:var(--sp-4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.ben:not(.en-vista) .demo *,.ben:not(.en-vista) .demo *::before{animation-play-state:paused}
@keyframes entra-demo{from{transform:translateY(.5rem);opacity:0}}
@keyframes aparece-demo{from{opacity:0}}
@keyframes destapa-demo{from{transform:translateX(0)}}
/* Planilla en miniatura con las columnas de la CABB. Una franja del color del
club baja fila por fila (opacity, sin repintar) y cada fila "se convierte"
en su chip de la derecha, con el mismo compás. */
.planilla{background:var(--pub-fondo);border:1px solid var(--pub-borde);border-radius:var(--r-s);overflow:hidden;font-family:var(--ff-mono);font-size:var(--fs-115);min-width:13.5rem}
.fila{position:relative;display:grid;grid-template-columns:2rem 1fr 2rem;gap:var(--sp-2);padding:var(--sp-1) var(--sp-2);color:var(--sobre-oscuro)}
.fila + .fila{border-top:1px solid var(--pub-borde)}
.fila span:first-child,.fila span:last-child,.fila b:first-child,.fila b:last-child{text-align:right}
.fila.cab{color:var(--gris-osc);background:var(--pub-tarjeta);font-weight:500}
.fila:not(.cab)::before{
content:"";position:absolute;inset:0;background:var(--primario);opacity:0;pointer-events:none;
animation:barre-fila var(--dur-3) var(--ease-salida);
}
.fila:nth-child(2)::before{animation-delay:150ms}
.fila:nth-child(3)::before{animation-delay:450ms}
.fila:nth-child(4)::before{animation-delay:750ms}
.fila:nth-child(5)::before{animation-delay:1050ms}
.fila:nth-child(6)::before{animation-delay:1350ms}
/* Sin fill backwards: en el retardo la fila está sin marcar (opacity 0) y no en el "from". */
@keyframes barre-fila{from{opacity:.4}}
.flecha{color:var(--gris-osc);font-size:var(--fs-190)}
.chips-j{display:flex;flex-wrap:wrap;gap:var(--sp-2);flex:1 1 12rem}
.chips-j span{
font-family:var(--ff-mono);font-weight:500;font-size:var(--fs-115);color:var(--sobre-oscuro);
background:var(--pub-fondo);border:1px solid var(--pub-borde);border-radius:var(--r-s);padding:var(--sp-1) var(--sp-2);
animation:entra-demo var(--dur-3) var(--ease-salida) backwards;
}
.chips-j span:nth-child(1){animation-delay:300ms}
.chips-j span:nth-child(2){animation-delay:600ms}
.chips-j span:nth-child(3){animation-delay:900ms}
.chips-j span:nth-child(4){animation-delay:1200ms}
.chips-j span:nth-child(5){animation-delay:1500ms}
.chips-j span:nth-child(6){animation-delay:1800ms}
.chips-j .mas{color:var(--gris-osc)}
.demo-tiro svg{width:100%;max-width:22rem;height:auto;display:block}
.demo-tiro{gap:var(--sp-3) var(--sp-6)}
.curva-demo{fill:none;stroke:var(--primario);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
/* stroke-dashoffset repinta cada cuadro y está prohibido: la curva se "dibuja"
corriendo un rectángulo del color de la tarjeta, que en reposo ya está afuera. */
.tapa{fill:var(--pub-tarjeta);transform:translateX(100%);animation:destapa-demo var(--dur-demo) var(--ease-salida) backwards}
.punto{fill:var(--primario);animation:aparece-demo var(--dur-3) var(--ease-salida) var(--dur-demo) backwards}
.cifra-tiro{fill:var(--sobre-oscuro);font-family:var(--ff-mono);font-weight:600;animation:aparece-demo var(--dur-3) var(--ease-salida) var(--dur-demo) backwards}
.demo-salto{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3)}
.etq{font-family:var(--ff-titulo);font-weight:600;font-size:var(--fs-125);letter-spacing:.11em;text-transform:uppercase;color:var(--gris-osc)}
.cifra-salto{font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-260);color:var(--sobre-oscuro);font-variant-numeric:tabular-nums}
.sube-osc{
font-family:var(--ff-mono);font-weight:600;font-size:var(--fs-115);color:var(--sube-osc);
background:var(--pub-fondo);border-radius:var(--r-s);padding:var(--sp-1) var(--sp-2);
animation:aparece-demo var(--dur-3) var(--ease-salida) var(--dur-demo) backwards;
}
/* La pizarra de la landing es la misma que la de la app (cancha clara, fichas
del club): sobre la tarjeta oscura queda como un recuadro de papel. La anima
landingAnimada.js con la jugada de jugadaDemoLanding.js. */
.demo-jugadas{display:block}
.demo-jugadas svg.pz{max-width:24rem;margin-inline:auto}
/* Línea de tiempo: la línea se llena con scaleY desde arriba y los nodos se
prenden en secuencia. El texto de cada temporada se ve siempre. */
.linea-t{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:var(--sp-3);flex:1 1 100%}
.linea-t li{position:relative;padding-left:var(--sp-6);font-size:var(--fs-125);line-height:1.2rem;color:var(--sobre-oscuro)}
.linea-t::before{
content:"";position:absolute;left:calc(.3125rem - 1px);top:.6rem;bottom:.6rem;width:2px;
background:var(--primario);transform-origin:top;
animation:llena-demo var(--dur-demo) var(--ease-salida) backwards;
}
.linea-t li::before{
content:"";position:absolute;left:0;top:.3rem;width:.625rem;height:.625rem;border-radius:50%;background:var(--primario);
animation:nodo-demo var(--dur-3) var(--ease-salida) backwards;
}
.linea-t li:nth-child(2)::before{animation-delay:300ms}
.linea-t li:nth-child(3)::before{animation-delay:600ms}
@keyframes llena-demo{from{transform:scaleY(0)}}
@keyframes nodo-demo{from{transform:scale(0);opacity:0}}
/* Lo único que se dice del futuro, y se dice separado de lo que ya anda. */
.futuro{
color:var(--gris-osc);font-size:var(--fs-125);text-align:center;
padding:0 var(--sp-4) var(--sp-8);max-width:34rem;margin-inline:auto;
border-top:1px solid var(--pub-borde);padding-top:var(--sp-5);margin-top:var(--sp-2);
}
/* ---- Portal "Básquet Newell's" (public/portal.html) ----
Ronda 2 (21/10): quien más la usa es un padre que viene a inscribir o a
mandar un comprobante. Esas dos acciones son las protagonistas de la banda
roja y negra de arriba (la camiseta); profes y jugadores tienen Semillero
en el encabezado; el coordinador aparece una vez, al final de las preguntas
frecuentes. Se alternan bandas a todo el ancho y tarjetas para que no se
lea como un formulario. El LCP es la foto del hero (fetchpriority alto), no su
texto: por eso el hero sí anima su entrada. Una columna en el celular; lo de compu vive en
layout.css. Cada sección sin datos queda con [hidden] (lo pone src/ui/portal.js). */
/* Lo mismo que el de portal.html, por si el navegador
mira el CSS: el portal ya es oscuro y el oscurecimiento automático (Samsung
Internet, Chromium) no tiene que recolorearlo. Va sobre la raíz de ESTA página
y no sobre .publico a secas, que también es el shell de la app. */
:root:has(.portal-d),.portal-d{color-scheme:dark}
.portal-d::before{height:22rem;background:radial-gradient(ellipse 90% 90% at 85% 0,var(--club),transparent);opacity:.38}
.portal{width:100%}
/* El hero va a todo el ancho; lo demás, en una columna centrada. El lugar de la barra fija lo deja el pie. */
.portal-cuerpo{max-width:64rem;margin-inline:auto}
.portal [hidden]{display:none}
/* Encabezado: flota sobre la foto del hero. Marca a la izquierda y, a la
derecha, el botón de Semillero para profes y jugadores. La ayuda ya no
está acá: se abre desde los atajos, el pie y los "¿Dudas?". */
.portal-barra{position:absolute;inset:0 0 auto;z-index:5;display:flex;align-items:center;gap:var(--sp-2);max-width:64rem;margin-inline:auto;width:100%;padding:var(--sp-3) var(--sp-4)}
.portal-barra img{width:2.25rem;height:2.25rem;flex:0 0 auto}
.portal-marca{min-width:0}
.portal-barra .t{font-family:var(--ff-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:var(--fs-190);line-height:1}
.portal-barra .t span{color:var(--primario)}
/* El subtítulo no entra junto al link en el celular: aparece desde 40rem (layout.css). */
.portal-barra .s{display:none;font-size:var(--fs-100);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-osc);margin-top:.125rem}
.portal-barra-acc{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1)}
.portal-barra-btn{
display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-3);
font-size:var(--fs-135);font-weight:600;line-height:1.1;text-align:center;color:var(--sobre-oscuro);text-decoration:none;
cursor:pointer;
}
/* "Semillero": un botón con borde e ícono (no un link subrayado), sobre un velo para que se lea encima de la foto. */
.portal-sem-btn{list-style:none;white-space:nowrap;gap:var(--sp-2);background:var(--velo-pub-medio);border:1px solid var(--gris-osc);border-radius:var(--r-btn)}
.portal-sem-btn::-webkit-details-marker{display:none}
.portal-sem-btn svg{width:1.125rem;height:1.125rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portal-sem[open] .portal-sem-btn{border-color:var(--primario)}
@media (hover:hover){.portal-sem-btn:hover{background:var(--toque-osc)}}
.portal-sem-panel{
position:absolute;right:var(--sp-4);top:calc(100% - var(--sp-1));width:min(22rem,calc(100vw - 2rem));
padding:var(--sp-4);background:var(--pub-tarjeta);border:1px solid var(--pub-borde);border-radius:var(--r);
}
.portal-sem-panel > b{display:block;font-family:var(--ff-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-230)}
.portal-sem-panel p{color:var(--gris-osc);font-size:var(--fs-135);line-height:1.45;margin:var(--sp-1) 0 var(--sp-3)}
.portal-sem-panel .btn{text-decoration:none}
.portal-sem-inst{margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--pub-borde)}
.portal-sem-inst small{display:block;font-size:var(--fs-100);letter-spacing:.12em;text-transform:uppercase;color:var(--gris-osc)}
.portal-sem-inst p{margin:var(--sp-2) 0 0;color:var(--sobre-oscuro)}
/* El hero: foto a pantalla completa, velos para que se lea el texto, corte
diagonal abajo, título gigante y los dos botones. El título se achica con
el ancho Y el alto de la pantalla (--fs-hero). El hero mide la pantalla
menos la cinta, así la cinta queda pegada al borde de abajo de la primera
pantalla, en el celu y en compu. Se reserva el lugar de la cinta aunque
todavía no hayan llegado las fechas: si no, el hero se achicaría de golpe
al aparecer. El texto va abajo, sobre el degradé; el padding de abajo deja
lugar al corte diagonal. */
.portal-heroe{
position:relative;isolation:isolate;overflow:hidden;color:var(--sobre-oscuro);
display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - var(--alto-cinta));
padding:5rem var(--sp-4) 3.5rem;
clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 2.5rem));
}
.portal-heroe-foto{position:absolute;inset:0;z-index:-2;display:block}
.portal-heroe-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.portal-heroe::before{
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(to top,var(--pub-fondo) 0,var(--velo-pub-fuerte) 28%,var(--velo-pub-cero) 72%),
linear-gradient(to bottom,var(--velo-pub-fuerte) 0,var(--velo-pub-cero) 8rem);
}
/* Color real, un poco apagado: el piso azul de la cancha no domina. */
.portal-heroe-foto img{filter:saturate(.75)}
.portal-heroe-cuerpo{position:relative;width:100%;max-width:64rem;margin-inline:auto}
.portal-heroe-ey{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-2);font-family:var(--ff-titulo);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:var(--fs-145)}
.portal-heroe-ey span:first-child{flex:0 0 2rem;height:.125rem;background:var(--primario)}
.portal-titulo{position:relative}
.portal-heroe h1{font-size:var(--fs-hero);line-height:.82;letter-spacing:-.01em}
/* Cada línea sube desde su propia máscara (la entrada, más abajo). */
.portal-heroe .linea{display:block;overflow:hidden;padding-bottom:.06em}
.portal-heroe .linea > span{display:block}
/* El rojo del club sobre el negro llega a 3.8:1: alcanza para texto de este tamaño, no para uno chico. */
.portal-heroe .linea.rojo{color:var(--primario)}
.portal-heroe-bajada{max-width:30rem;margin:var(--sp-3) 0 var(--sp-4);font-size:var(--fs-170);line-height:1.4}
/* La bajada vive dentro del h1 (para el SEO) pero se ve como un párrafo, no como título. */
.portal-heroe h1 .portal-heroe-bajada{display:block;font-family:var(--ff-cuerpo);font-weight:400;text-transform:none;letter-spacing:normal}
.portal-acciones{display:grid;gap:var(--sp-2)}
/* Cada botón es la tarjeta entera: ícono, título, una línea y la flecha (o "Pronto"). */
.portal-accion{
display:grid;grid-template-columns:2.5rem 1fr auto;align-items:center;gap:var(--sp-3);width:100%;min-height:3.5rem;padding:var(--sp-2) var(--sp-3);
border:0;border-radius:var(--r-btn);text-decoration:none;font:inherit;text-align:left;cursor:pointer;
transition:transform var(--dur-1) var(--ease-salida);
}
.portal-accion:not(.apagada):active{transform:scale(.97)}
.portal-accion i{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%}
.portal-accion svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portal-accion b{display:block;font-family:var(--ff-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:var(--fs-200);line-height:1}
.portal-accion small{display:block;font-size:var(--fs-135);line-height:1.3;margin-top:.1875rem}
.portal-accion em{font-style:normal;font-size:var(--fs-190)}
.portal-accion.principal{background:var(--primario);color:var(--sobre-club)}
.portal-accion.principal i{background:var(--presion-osc)}
.portal-accion.pago{background:var(--papel);color:var(--tinta)}
.portal-accion.pago i{background:var(--primario);color:var(--sobre-club)}
.portal-accion.pago small{color:var(--gris)}
/* Sin formulario activo (o todavía sin respuesta): oscura y maciza, con el ícono gris y, si corresponde, "Pronto". */
.portal-accion.apagada{background:var(--pub-tarjeta);color:var(--sobre-oscuro);border:1px solid var(--pub-borde);cursor:default}
.portal-accion.apagada i{background:var(--pub-fondo);color:var(--gris-osc)}
.portal-accion.apagada small{color:var(--gris-osc)}
.portal-accion.apagada em{font-family:var(--ff-titulo);font-weight:700;font-size:var(--fs-100);letter-spacing:.08em;text-transform:uppercase;color:var(--gris-osc);border:1px solid var(--pub-borde);border-radius:var(--r-btn);padding:.125rem var(--sp-2)}
/* El sticker de sponsor: un círculo dorado (el rojo es del botón del hero) con
el pedido en un anillo que gira despacio y "Sumate" fijo al centro. Es el
único elemento del portal que gira (con el anillo del escudo de la landing,
del que reusa el keyframe y la duración): un observer le pone .quieto cuando
el hero sale de pantalla y, con prefers-reduced-motion, base.css lo apaga y
el texto queda legible. En el celu va dentro de .portal-titulo, arriba a la
derecha, al lado de "ACÁ SE" y "FORMA": esas dos líneas miden ~2.7em y --fs-hero
no pasa de 23vw, así que dejan libre más de un tercio del ancho; "LA LEPRA",
que es más ancha, queda debajo del sticker. Así no le roba alto al título. En
compu, abajo a la derecha de la foto (layout.css). */
.portal-sponsor{
position:absolute;top:0;right:0;z-index:1;display:grid;place-items:center;width:5rem;height:5rem;
border-radius:50%;background:var(--dorado);color:var(--pub-fondo);text-decoration:none;
transition:transform var(--dur-1) var(--ease-salida);
}
.portal-sponsor:active{transform:scale(.94)}
@media (hover:hover){.portal-sponsor:hover{transform:scale(1.06)}}
.portal-sponsor-anillo{position:absolute;inset:0;width:100%;height:100%;animation:giro var(--dur-giro) linear infinite}
.portal-sponsor-anillo.quieto{animation-play-state:paused}
.portal-sponsor-anillo text{font-family:var(--ff-titulo);font-weight:700;letter-spacing:.04em;fill:currentColor}
.portal-sponsor-centro{position:relative;font-family:var(--ff-titulo);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:var(--fs-170);line-height:1}
/* Entrada del hero, una sola vez al cargar: cada elemento sube escalonado
(--i lo pone el HTML) y cada línea del título sube desde su máscara. Sólo
con .js-anim: sin JS o con movimiento reducido, todo está ya en su lugar. */
.js-anim .entra{animation:subir var(--dur-rise) var(--ease-salida) backwards;animation-delay:calc(var(--retardo-entrada) + var(--i) * var(--paso-entrada))}
.js-anim .portal-heroe .linea > span{animation:subir-linea var(--dur-linea) var(--ease-salida) backwards;animation-delay:calc(var(--retardo-entrada) + var(--i) * var(--paso-entrada))}
@keyframes subir{from{opacity:0;transform:translateY(1.5rem)}}
@keyframes subir-linea{from{transform:translateY(105%)}}
/* Parallax suave de la foto: baja hasta un 18% mientras se scrollea el hero.
Va con la línea de tiempo del scroll donde el navegador la tiene; en los
demás (Safari anterior al 26) lo hace animaciones.js. El estado de
reposo es el FINAL; el keyframe define sólo el de partida. */
@supports (animation-timeline:scroll()){
.js-anim .portal-heroe-foto{transform:translateY(18%) scale(1.1);animation:parallax-hero linear both;animation-timeline:scroll(root);animation-range:0 100svh}
}
@keyframes parallax-hero{from{transform:translateY(0) scale(1.1)}}
/* Botón de una tarjeta sin formulario activo: visible pero claramente apagado
(borde punteado y sin relleno), con el texto en una línea o dos legibles. */
.portal .btn:disabled{
background:transparent;color:var(--gris-osc);border:1px dashed var(--gris-osc);
font-size:var(--fs-135);letter-spacing:.06em;line-height:1.25;text-align:center;cursor:not-allowed;
}
/* Recaudación: una franja a todo el ancho en negro tibio, con filete y
detalles dorados y un cuadrado girado de adorno (como en la propuesta de
v0). Sin foto y con el botón dorado: el rojo queda para el hero (un solo
bloque rojo por pantalla). */
.portal-rec{position:relative;overflow:hidden;margin-top:var(--sp-8);background:var(--pub-oro-fondo);border-block:1px solid var(--dorado-borde);scroll-margin-top:var(--sp-4)}
.portal-rec::before{content:"";position:absolute;top:-6rem;right:-6rem;width:18rem;height:18rem;border:1.75rem solid var(--dorado-suave);transform:rotate(45deg)}
.portal-rec-cuerpo{position:relative;max-width:64rem;margin-inline:auto;padding:var(--sp-8) var(--sp-4);display:grid;gap:var(--sp-6)}
.portal-rec .portal-st{color:var(--dorado)}
.portal-rec h2{font-size:clamp(2.25rem,1.5rem + 3.2vw,3.75rem);line-height:.92;margin:0 0 var(--sp-3);text-wrap:balance}
.portal-rec p{margin:0;color:var(--gris-osc);font-size:var(--fs-170);line-height:1.5;max-width:30rem}
.portal-rec-ej{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.portal-rec-ej li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3);border-radius:var(--r-full);background:var(--dorado-suave);font-size:var(--fs-160);font-weight:600}
.portal-rec-ej i{display:grid;color:var(--dorado)}
.portal-rec-ej svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portal-rec-btn{
display:flex;align-items:center;justify-content:center;gap:var(--sp-2);width:100%;min-height:3.5rem;padding:0 var(--sp-5);
background:var(--dorado);color:var(--pub-fondo);text-decoration:none;border:0;border-radius:var(--r-btn);
font-family:var(--ff-titulo);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:var(--fs-230);
transition:transform var(--dur-1) var(--ease-salida);
}
.portal-rec-btn:active{transform:scale(.97)}
.portal-rec-btn:disabled{background:transparent;color:var(--sobre-oscuro);border:1px dashed var(--dorado);font-size:var(--fs-145);letter-spacing:.04em;cursor:not-allowed;transform:none}
/* "Sumate al básquet de Newell's": las dos formas de colaborar y un botón y,
al lado (abajo en el celular), el afiche de sponsors del club. Sin fotos de
fondo: el afiche ya es la imagen de la sección. */
.portal-colaborar .portal-st{color:var(--dorado)}
.portal-colaborar h2{font-size:clamp(2rem,1.6rem + 2vw,2.75rem);line-height:.95;margin-bottom:var(--sp-4)}
.portal-colaborar-cuerpo{display:grid;gap:var(--sp-6)}
.portal-afiche{display:block;justify-self:center;width:min(100%,18rem);height:auto;border:1px solid var(--pub-borde);border-radius:var(--r)}
.portal-formas{list-style:none;margin:0 0 var(--sp-4);padding:0;display:grid;gap:var(--sp-3)}
.portal-formas li{display:grid;grid-template-columns:2.75rem 1fr;gap:var(--sp-3);align-items:start;padding:var(--sp-4);background:var(--pub-tarjeta);border:1px solid var(--pub-borde);border-radius:var(--r);color:var(--sobre-oscuro);font-size:var(--fs-145);line-height:1.45}
.portal-formas i{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--pub-fondo);color:var(--primario)}
.portal-formas svg{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portal-formas b{display:block;font-family:var(--ff-titulo);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:var(--fs-200);line-height:1.1;color:var(--sobre-oscuro);margin-bottom:var(--sp-1)}
.portal-colaborar .btn{text-decoration:none}
/* La hoja de Ayuda (