El sitio principal

prouniversitas.cl es la cara principal de la marca. Cualquier pieza institucional, de campaña o de matrícula debe sentirse como el sitio — no como la app. Su carácter: cinematográfico, premium y en movimiento ("Tu futuro empieza con un paso").

La receta en una frase

Navy profundo #002A51 + fotografía nocturna en movimiento + Poppins en grande + kickers amarillos con tracking amplio + CTA amarillo. Sobrio, nada infantil, cero gamificación.

Superficies

El sitio vive sobre navy profundo (brand-blue-dark #002A51) con secciones alternadas:

Los fondos oscuros llevan glows decorativos (círculos difusos blur-3xl cyan al 15% y amarillo al 10%) — nunca gradientes morados genéricos.

El header

• Logo horizontal sobre tarjeta blanca redondeada con sombra (para contraste sobre la foto).
• Links en blanco sobre el hero; al hacer scroll el header pasa a blanco con blur y links navy.
• CTA "Matrículas" = pill amarilla rounded-full con ícono WhatsApp y texto navy.

El hero cinematográfico

La pieza más distintiva: secuencia de 273 frames controlada por el scroll (la corredora avanza a medida que bajas; cierra en el cartel de carreras). Sobre la foto:

1. Kicker pill: Preuniversitario PAES · El PRE que es PRO
2. H1 Poppins bold blanco, muy grande.
3. CTAs: amarillo sólido + outline blanco.
4. Pista de scroll ("Desliza para ver tu futuro") con flotación sutil.

La técnica completa (canvas, decode-ahead, degradación con reduced-motion) está en Animaciones. El código vive en pro-universitas-web/components/sections/HeroScrollSequence.tsx.

Firmas tipográficas

Kicker de sección — abre cada bloque del sitio:

<span class="text-sm font-semibold uppercase tracking-[0.2em] text-brand-yellow">Programas PRO</span>

Subrayado amarillo (.mark-yellow) para destacar en fondos claros: metodología comprobada

.mark-yellow { background-image: linear-gradient(transparent 60%, var(--brand-yellow) 60%); }

La marquee amarilla

Banda contínua con el método, en Poppins uppercase navy sobre amarillo:

Botones

El sitio usa shadcn/ui (radio base 10px, rounded-lg, altura contenida):

• Primario: amarillo, texto navy (bg-brand-yellow text-brand-blue), active:translate-y-px.
• Secundario: outline blanco sobre oscuro / navy sobre claro.
• Sin botones 3D — esos son de la app.

Banners de sección

SectionBanner: foto full-bleed + overlay bg-brand-blue-dark/30 + gradientes laterales + glows + kicker amarillo + H2 Poppins con drop-shadow. Úsalo para cabeceras de página interior (profesores, colegios, mundo PAES).

Fotografía (dirección de arte)

• Personas reales en movimiento: correr, avanzar, estudiar — la metáfora es "tu futuro empieza con un paso".
• Hora azul / nocturna urbana: ciudad de fondo, luces, tonos fríos que integran con el navy.
• Nada de stock sonriente genérico ni aulas fluorescentes; el drama está en la luz y el movimiento.
• La foto siempre recibe overlay navy para que el texto blanco y el amarillo funcionen encima.

Motion

Todo lo del sitio se mueve con motion/react y la física documentada en Animaciones: EASE.out [0.16,1,0.3,1], fadeUp + stagger, TextReveal palabra a palabra con acento amarillo, MagneticButton en desktop, transición de página 0.45s y ScrollProgress.

Checklist "¿se siente como el sitio?"

• ¿Fondo navy profundo (o crema) con glows sutiles — sin gradientes genéricos?
• ¿Títulos Poppins bold con tracking apretado y kicker amarillo arriba?
• ¿CTA amarillo con texto navy, secundario outline?
• ¿Foto cinematográfica con overlay navy (si lleva foto)?
• ¿Cero elementos de la app (chungungo, XP, botones 3D, Nunito)?