PRO UNIVERSITAS / PreUCV — BRANDBOOK COMPLETO PARA AGENTES IA
================================================================

LEE ESTO PRIMERO. Este archivo contiene todo el brandbook en markdown, en orden:
primero LA MARCA PRINCIPAL (el sitio institucional), al final el universo app.

LA REGLA MÁS IMPORTANTE — dos contextos, no los mezcles:

1. INSTITUCIONAL / SITIO (el default para documentos, PDFs, informes, propuestas,
   presentaciones, piezas de matrícula, colegios, campañas):
   - Tipografía: Poppins 600-800 (títulos) + Inter 400-700 (cuerpo). NUNCA Nunito.
   - Fondo: navy profundo #002A51. Acentos: amarillo #FFF100 (solo acento, texto navy
     encima) y cyan #02B0BB. Azul corporativo #003C72 (secciones alternas, footer).
   - Look: cinematográfico premium — kickers MAYÚSCULAS amarillo tracking 0.2em,
     tarjetas de vidrio (blanco 5% + borde blanco 12%, radios 14-18px), glows cyan/
     amarillo blur 64px+, fotos con overlay navy direccional, hairlines blanco 10%.
   - SIN mascota, SIN Nunito, SIN emojis como iconos, SIN rojo de alarma.
2. UNIVERSO APP preparalapaes (solo experiencia del alumno: práctica, XP, racha):
   - Nunito, el chungungo (mascota), insignias de nivel, botones 3D, navy #003C72.

PARA GENERAR UNA PIEZA, USA (URLs absolutas, todas públicas):

- PDF / informe / propuesta / one-pager  → plantilla maestra lista para editar:
  https://brandbook.prouniversitas.cl/plantillas/documento-a4.html   (también embebida al FINAL de este archivo)
- Presentación 16:9                      → https://brandbook.prouniversitas.cl/plantillas/presentacion-16-9.html
- Render a PDF: chrome --headless=new --disable-gpu --no-pdf-header-footer \
    --virtual-time-budget=15000 --print-to-pdf=salida.pdf documento.html
- Social card / post / story / ad        → https://brandbook.prouniversitas.cl/og/card?format=post&title=...
  (estilo sitio por defecto; &estilo=app para la variante con mascota)

ASSETS (patrones de URL):
- Logos:    https://brandbook.prouniversitas.cl/brand/logos/logo-horizontal-blanco.png  (sobre navy)
            https://brandbook.prouniversitas.cl/brand/logos/logo-horizontal.png          (sobre claro)
            + 11 variantes más (ver página Logos)
- Fotos:    https://brandbook.prouniversitas.cl/brand/fotos/{scene-01,scene-02,nosotros-hero,profesores-hero,metodo-bg,sede-vina,banner-experience}.jpg
- Iconos:   https://brandbook.prouniversitas.cl/brand/iconos/ui/<nombre>.svg  (35 Lucide oficiales, stroke 2, currentColor)
- Fuentes:  https://brandbook.prouniversitas.cl/brand/fonts/poppins/Poppins-{SemiBold,Bold,ExtraBold}.ttf
            https://brandbook.prouniversitas.cl/brand/fonts/inter/Inter-{Regular,Medium,SemiBold,Bold}.ttf
            (o Google Fonts CDN: family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700)
- Tokens:   https://brandbook.prouniversitas.cl/brand/tokens/web.css (variables del sitio) · https://brandbook.prouniversitas.cl/brand/tokens/tokens.json
- Manifest: https://brandbook.prouniversitas.cl/brand/manifest.json

PALETA CENTRAL (memoriza estos seis):
#002A51 navy profundo (FONDO de sitio y documentos) · #003C72 navy institucional ·
#FFF100 amarillo (acento, texto navy encima) · #02B0BB cyan · #FAF8F5 crema ·
texto sobre navy = blanco con opacidades (100% títulos / 72% cuerpo / 55% notas / 38% pie).
Estados sobre navy: #5FE0A0 bien(▲) · #FFD24A a reforzar(▼) — siempre con flecha/cifra.

CHECKLIST ANTES DE ENTREGAR CUALQUIER PIEZA INSTITUCIONAL:
[ ] Poppins títulos + Inter cuerpo (cero Nunito)   [ ] fondo #002A51, no blanco pleno
[ ] amarillo SOLO acento (kicker/1 palabra/números) [ ] iconos Lucide, cero emojis
[ ] foto oficial con overlay navy                   [ ] sin mascota/insignias/XP
[ ] tono propositivo (nunca "ALERTA"/rojo)          [ ] radios 10/14/18/22px

================================================================
# Brandbook PRO Universitas (/docs)



## El PRE que es PRO [#el-pre-que-es-pro]

**PRO Universitas** es un preuniversitario **digital chileno** enfocado en la PAES:
diagnóstico real, plan adaptativo y feedback inmediato. Es una **marca independiente**,
nativa digital — su autoridad viene de su metodología, su equipo docente y su banco de
preguntas, no de un respaldo institucional externo.

Este brandbook es la **fuente única de verdad** de la identidad. Antes de diseñar una
pieza, escribir un copy o tocar un color, empieza acá.

## ¿Vas a generar una pieza? Empieza aquí [#vas-a-generar-una-pieza-empieza-aquí]

| Quiero hacer…                                | Usa                                                                                                                                      |
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| **Un PDF / informe / propuesta / one-pager** | [Documentos y PDF](/docs/documentos) → plantilla [`documento-a4.html`](https://brandbook.prouniversitas.cl/plantillas/documento-a4.html) |
| **Una presentación**                         | [`presentacion-16-9.html`](https://brandbook.prouniversitas.cl/plantillas/presentacion-16-9.html) (misma guía)                           |
| **Un post / story / ad**                     | [Generador de piezas](/herramientas/og)                                                                                                  |
| **Una web / landing / componente**           | [El sitio principal](/docs/web) + [tokens](/docs/tokens) (`web.css`)                                                                     |
| **Algo de la app** (XP, práctica, racha)     | [Mascota](/docs/mascota) + [Niveles](/docs/niveles) + Nunito                                                                             |

**Las piezas institucionales nunca llevan**: la mascota, Nunito, emojis como iconos, fondos blancos
planos ni el rojo de alarma. Llevan: navy `#002A51`, Poppins/Inter, kickers amarillos, iconos
[Lucide](/docs/iconografia) y [fotos con overlay](/docs/fotografia).

## Mapa rápido [#mapa-rápido]

| Eje                 | Valor                                                                                  |
| ------------------- | -------------------------------------------------------------------------------------- |
| **Nombre**          | PRO Universitas (PreUCV)                                                               |
| **Categoría**       | Preuniversitario digital chileno enfocado en PAES                                      |
| **Promesa**         | Tu PAES con metodología comprobada: profesores PRO, programas PRO y ecosistema digital |
| **Lema**            | *El PRE que es PRO*                                                                    |
| **Sitio principal** | prouniversitas.cl — navy cinematográfico, Poppins + Inter                              |
| **Colores**         | Navy `#003C72` / noche `#002A51` · Amarillo `#FFF100` · Celeste `#02B0BB`              |
| **Universo app**    | preparalapaes.cl — Nunito, XP, niveles y el chungungo (secundario)                     |

## La jerarquía de la marca [#la-jerarquía-de-la-marca]

1. **Principal — el sitio ([prouniversitas.cl](https://www.prouniversitas.cl))**: cinematográfico y
   premium. Navy profundo, fotografía en movimiento, **Poppins + Inter**, kickers amarillos, marquee.
   Toda pieza institucional, de campaña o matrícula parte de acá → [El sitio principal](/docs/web).
2. **Secundario — el universo app ([preparalapaes.cl](https://preparalapaes.cl))**: gamificado y
   cercano. **Nunito**, XP, niveles y **el chungungo**. Solo para la app y sus comunicaciones →
   [La mascota](/docs/mascota) · [Niveles](/docs/niveles).

Si dudas en qué contexto estás: ¿la pieza habla del preu (venta, becas, colegios, institucional)?
→ **sitio**. ¿Habla de la experiencia dentro de la app (práctica, racha, XP)? → **app**.

## Cómo usar este brandbook [#cómo-usar-este-brandbook]

* **El sitio principal** → el look & feel de prouniversitas.cl: hero, kickers, marquee, secciones, fotografía.
* **Colores, tipografía y logos** → las bases, con valores por contexto y descargas.
* **Documentos y PDF** → el sistema de documentos premium con plantillas listas y receta de render.
* **Iconografía** → Lucide, chips contenedores y los 35 SVG oficiales descargables.
* **Fotografía** → el banco oficial con URLs absolutas y las recetas de overlay navy.
* **Voz y tono** → cómo habla la marca, con ejemplos a copiar y a evitar.
* **Animaciones** → la física del movimiento con demos en vivo y el código real de producción.
* **La mascota y niveles*&#x2A; &#x2A;(universo app)* → el chungungo, sus estados, insignias y personajes por curso.
* **Design tokens** → para desarrolladores: CSS, Tailwind y JSON listos para importar.
* **Plantillas** → piezas de redes, ads, OG, informes, presentaciones y firma de correo.

## Para agentes IA [#para-agentes-ia]

Si le pides a una IA que cree una pieza con esta marca, **no necesita analizar los sitios*&#x2A;: dale
&#x2A;*`/llms-full.txt`** (todo el brandbook en una sola respuesta markdown) o `/llms.txt` (el índice).
Cada página también expone su markdown con el botón **Copy Markdown**.

> Esta identidad se consolidó desde el ecosistema de **aprendizaje adaptativo**
> (`preparalapaes.cl`) y el sitio **pro-universitas-web**. Reemplaza a las copias
> dispersas de assets y a los documentos `DESIGN.md` / `Identidad_marca/` previos.


# El sitio principal (/docs/web)



**[prouniversitas.cl](https://www.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 [#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 [#superficies]

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

| Superficie        | Color                             | Cuándo                                     |
| ----------------- | --------------------------------- | ------------------------------------------ |
| Fondo principal   | `#002A51` navy profundo           | Hero, programas, becas, testimonios, FAQ   |
| Marquee / acentos | `#FFF100` amarillo                | Banda de método, CTAs, kickers             |
| Secciones claras  | `#FAF8F5` crema · `#E6EDF3` bruma | Metodología, comparativas, contenido largo |
| Footer            | `#003C72` navy                    | Cierre con lockup                          |

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 [#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 [#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**: <span className="not-prose inline-flex items-center rounded-full bg-navy px-4 py-1.5 text-xs font-semibold uppercase tracking-[0.2em] text-amarillo">Preuniversitario PAES · El PRE que es PRO</span>
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](/docs/animaciones#el-hero-por-scroll-scroll-driven-sequence). El código vive en
`pro-universitas-web/components/sections/HeroScrollSequence.tsx`.

## Firmas tipográficas [#firmas-tipográficas]

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

```html
<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:
<span className="mark-yellow font-semibold text-navy">metodología comprobada</span>

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

## La marquee amarilla [#la-marquee-amarilla]

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

<div className="not-prose overflow-hidden rounded-lg bg-amarillo py-2.5">
  <div className="marquee-track font-heading text-sm font-bold uppercase tracking-wide text-navy">
    {['Diagnóstico inicial','Entrenamiento diario','Ensayos PAES','Reportes de avance','Profesores PRO','Becas disponibles','Garantía 2º año $0','Diagnóstico inicial','Entrenamiento diario','Ensayos PAES','Reportes de avance','Profesores PRO','Becas disponibles','Garantía 2º año $0'].map((t, i) => (
          <span key={i} className="flex items-center gap-10">{t} <span aria-hidden>·</span></span>
        ))}
  </div>
</div>

## Botones [#botones]

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

<div className="not-prose flex flex-wrap items-center gap-3 rounded-xl bg-[#002A51] p-6">
  <span className="rounded-lg bg-amarillo px-6 py-3 text-sm font-bold text-navy">
    Postula a una beca
  </span>

  <span className="rounded-lg border border-white/25 px-6 py-3 text-sm font-bold text-white">
    Conoce los programas
  </span>

  <span className="inline-flex items-center gap-1.5 rounded-full bg-amarillo px-4 py-1.5 text-sm font-bold text-navy">
    💬 Matrículas
  </span>
</div>

* 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 [#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) [#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 [#motion]

Todo lo del sitio se mueve con `motion/react` y la física documentada en
[Animaciones](/docs/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?" [#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)?


# Colores (/docs/colores)



La marca se construye sobre tres colores: **navy**, **amarillo** y **celeste**. El resto
(materias, feedback, neutrales) son de apoyo. Haz click en cualquier muestra para copiar su hex.

<Palette />

## La paleta central (valores exactos) [#la-paleta-central-valores-exactos]

| Color              | Hex                                                  | Uso                                                                                                                       |
| ------------------ | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Amarillo           | `#FFF100`                                            | Acento primario: CTAs, kickers, números, la pastilla "PRO". **Siempre con texto navy encima; nunca como fondo de página** |
| Navy institucional | `#003C72`                                            | Azul corporativo: secciones alternas del sitio, footer, texto sobre amarillo, color de Matemáticas                        |
| **Navy profundo**  | **`#002A51`**                                        | **El fondo del sitio y de todo documento institucional** (hero, páginas de PDF, presentaciones)                           |
| Celeste / cyan     | `#02B0BB`                                            | Acento secundario: datos, iconos de contacto, "correcto/éxito", avatares                                                  |
| Crema              | `#FAF8F5`                                            | Secciones claras y mockups de la app                                                                                      |
| Amarillo soft      | `#FFF7A8` · Celeste soft `#D5F3F5` · Bruma `#E6EDF3` | Softs del sitio (hover, fondos suaves sobre claro)                                                                        |

## La regla de los cuatro azules (no los confundas) [#la-regla-de-los-cuatro-azules-no-los-confundas]

| Hex       | Nombre             | Cuándo                                                                                                |
| --------- | ------------------ | ----------------------------------------------------------------------------------------------------- |
| `#002A51` | Navy profundo      | **Fondo base**: sitio, documentos, presentaciones, portadas. Si dudas cuál usar de fondo oscuro: este |
| `#003C72` | Navy institucional | Color corporativo "de día": secciones alternas, footer, texto sobre amarillo/claro, Matemáticas       |
| `#002B50` | Navy dark (app)    | Variante oscura del universo app (botones 3D, sombras). No es el fondo del sitio                      |
| `#1A2B48` | Ink                | Solo **texto** sobre fondos claros                                                                    |

Sobre `#002A51` el texto va **blanco con jerarquía de opacidad**: títulos `#FFFFFF` · cuerpo
`rgba(255,255,255,.72)` · secundario `.55` · pie `.38`. Los verdes/ámbar de estado en dark:
`#5FE0A0` (bien/sube) y `#FFD24A` (a reforzar) — siempre con ▲/▼ o cifra, nunca color solo.

## Reglas de contraste (críticas) [#reglas-de-contraste-críticas]

<DoDont type="do">
  El 

  **amarillo `#FFF100` siempre lleva texto navy**

  . Es la firma de la marca (la pastilla "PRO").
</DoDont>

<DoDont type="dont">
  Nunca pongas 

  **texto blanco sobre amarillo**

  : el contraste es insuficiente y se lee mal.
</DoDont>

<DoDont type="do">
  Para 

  **"correcto / éxito"**

   usa 

  **celeste**

  , no navy — mejor semántica y contraste.
</DoDont>

<DoDont type="do">
  **Navy**

   y 

  **celeste**

   aceptan texto 

  **blanco**

   sin problema.
</DoDont>

<DoDont type="dont">
  El amarillo como fondo de secciones largas o páginas: solo es acento (marquee, badges, CTAs).
</DoDont>

## Colores por materia [#colores-por-materia]

Cada asignatura PAES tiene un color fijo. Úsalo en cards de materia, gráficos, filtros y en el
generador de piezas.

| Materia     | Color   | Hex       |
| ----------- | ------- | --------- |
| Matemáticas | Navy    | `#003C72` |
| Lenguaje    | Morado  | `#7B4FE8` |
| Ciencias    | Celeste | `#02B0BB` |
| Historia    | Ámbar   | `#D4A017` |

## En gráficos y data-viz (sobre navy) [#en-gráficos-y-data-viz-sobre-navy]

Máximo **3 series** por gráfico: cyan `#02B0BB`, amarillo `#FFF100` y naranjo/ámbar — cada una con
**forma distinta** (círculo/rombo/triángulo) para no depender solo del color. Grilla
`rgba(255,255,255,.10)`, ejes `rgba(255,255,255,.5–.75)`, área bajo curva: gradiente del color al 35% → 0%.

> Los valores viven en `tokens/tokens.json` (app) y `tokens/dist/web.css` (sitio) — este último
> también público en [`/brand/tokens/web.css`](https://brandbook.prouniversitas.cl/brand/tokens/web.css).
> Ver [Design tokens](/docs/tokens).


# Tipografía (/docs/tipografia)



La marca tiene **dos contextos tipográficos**. El principal es el del **sitio**
([prouniversitas.cl](https://www.prouniversitas.cl)); el de la app es un sub-universo.

## Sitio principal: Poppins + Inter [#sitio-principal-poppins--inter]

| Rol                          | Familia                                              | Pesos                 | Uso                                                              |
| ---------------------------- | ---------------------------------------------------- | --------------------- | ---------------------------------------------------------------- |
| **Títulos** (`font-heading`) | [Poppins](https://fonts.google.com/specimen/Poppins) | 500 · 600 · 700 · 800 | H1–H5, botones destacados, marquee. Siempre con `tracking-tight` |
| **Cuerpo** (`font-sans`)     | [Inter](https://fonts.google.com/specimen/Inter)     | 400–700               | Párrafos, UI, formularios                                        |

<div className="not-prose mt-4 rounded-xl bg-[#002A51] p-6 text-white">
  <p className="kicker">
    Preuniversitario PAES · El PRE que es PRO
  </p>

  <p className="font-heading mt-3 text-4xl font-bold leading-tight">
    Tu futuro empieza

    <br />

    con un paso
  </p>

  <p className="mt-3 max-w-md text-white/80">
    Preparamos tu PAES con una metodología comprobada: profesores PRO, programas PRO y un ecosistema digital pensado para ti.
  </p>
</div>

Rasgos del sitio a respetar:

* **Kicker de sección**: mayúsculas, `tracking [0.2em]`, semibold, **amarillo** sobre navy (o navy sobre claro).
* Los H1 del hero son **Poppins bold, muy grandes, blancos**, alineados con generosidad de espacio.
* El énfasis en texto claro se hace con &#x2A;*`.mark-yellow`** (subrayado amarillo al 40% inferior): <span className="mark-yellow font-semibold text-navy">así se ve</span>.
* Cuerpo siempre Inter — nunca Poppins para párrafos largos.

### Escala del sitio (clases reales de producción) [#escala-del-sitio-clases-reales-de-producción]

| Rol                | Clase / valores                                                                                          |
| ------------------ | -------------------------------------------------------------------------------------------------------- |
| Kicker             | `text-sm font-semibold uppercase tracking-[0.2em] text-brand-yellow` (14px/600) — sin punto final        |
| Kicker pill (hero) | ídem en `text-xs` dentro de `rounded-full bg-white/10 px-4 py-1.5 ring-1 ring-white/20 backdrop-blur-sm` |
| H1 hero            | `text-4xl sm:text-6xl lg:text-7xl` · `leading-[1.03] tracking-tight` (36→72px)                           |
| H1 interior        | `font-heading text-4xl sm:text-5xl leading-[1.1] tracking-tight`                                         |
| H2 sección         | `font-heading text-3xl sm:text-4xl lg:text-5xl leading-tight tracking-tight` — 1 palabra en amarillo     |
| Bajada             | `text-base sm:text-lg text-white/70`                                                                     |
| Card: título       | `font-heading text-xl` · texto `text-sm leading-relaxed text-white/65`                                   |
| Número stat        | `font-heading text-4xl font-extrabold text-brand-yellow`                                                 |
| Fine print         | `text-xs text-white/40`                                                                                  |

Jerarquía de opacidad del blanco (constante en todo el sitio): títulos `#FFF` · cuerpo `/70` ·
secundario `/55–/65` · pie `/38–/45`.

## Universo app: Nunito [#universo-app-nunito]

La app de entrenamiento ([preparalapaes.cl](https://preparalapaes.cl)) usa &#x2A;*una sola familia:
[Nunito](https://fonts.google.com/specimen/Nunito)** (400/500/700/800) — redondeada y cálida, coherente
con su carácter gamificado. **No se usa en el sitio principal** ni en comunicación institucional.

| Rol (app)            | Tamaño / peso                             |
| -------------------- | ----------------------------------------- |
| Display (splash, XP) | 28 px / 800                               |
| H1                   | 22 px / 800                               |
| H2                   | 18 px / 700                               |
| Body                 | 15 px / 500                               |
| Caption              | 12 px / 700 · MAYÚSCULAS · tracking 0.5px |

<div className="not-prose font-nunito mt-4 rounded-xl border border-line p-6">
  <p className="text-2xl font-extrabold text-navy">
    ¡Muy bien! +10 XP · BONUS RACHA +5
  </p>

  <p className="mt-1 font-bold text-fd-muted-foreground">
    Subiste de nivel: ahora estás en Medio. AaBbCc 0123456789
  </p>
</div>

## Reglas [#reglas]

<DoDont type="do">
  Pieza del 

  **sitio / institucional**

   → Poppins títulos + Inter cuerpo.
</DoDont>

<DoDont type="do">
  Pieza de la 

  **app**

   (XP, racha, chungungo) → Nunito.
</DoDont>

<DoDont type="dont">
  No mezcles los contextos: nada de Nunito en el sitio, nada de Poppins en la UI de la app.
</DoDont>

<DoDont type="dont">
  No uses pesos extremos (100/900) en ninguna familia.
</DoDont>

## Descargar / instalar [#descargar--instalar]

**CDN (lo más simple para HTML/documentos):**

```html
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

**Self-hosted (URLs absolutas, para PDFs offline, Satori/OG o entornos sin CDN):**

| Familia               | Archivos                                                                                                                                                                                                                                                                                                                                                                                                                               |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Poppins (títulos)     | [`/brand/fonts/poppins/Poppins-SemiBold.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/poppins/Poppins-SemiBold.ttf) (600) · [`Poppins-Bold.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/poppins/Poppins-Bold.ttf) (700) · [`Poppins-ExtraBold.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/poppins/Poppins-ExtraBold.ttf) (800)                                                                              |
| Inter (cuerpo)        | [`/brand/fonts/inter/Inter-Regular.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/inter/Inter-Regular.ttf) (400) · [`Inter-Medium.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/inter/Inter-Medium.ttf) (500) · [`Inter-SemiBold.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/inter/Inter-SemiBold.ttf) (600) · [`Inter-Bold.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/inter/Inter-Bold.ttf) (700) |
| Nunito (**solo app**) | [`/brand/fonts/Nunito-Variable.ttf`](https://brandbook.prouniversitas.cl/brand/fonts/Nunito-Variable.ttf) + estáticas 700/800                                                                                                                                                                                                                                                                                                          |

Todas OFL (licencias en `LICENSES/`). En Next.js, el patrón del sitio real es `next/font/google`
con variables `--font-heading` / `--font-sans` (ver `pro-universitas-web/app/layout.tsx`).


# Logos (/docs/logos)



El logotipo es **“PRO” en pastilla amarilla*&#x2A; + &#x2A;*“Universitas®”** en navy, con la bajada **PREUCV**.
El isotipo (birrete + ola) es la versión reducida para favicon y avatares. Descarga cada variante con
el botón de cada tarjeta.

<LogoGrid />

## Reglas de uso [#reglas-de-uso]

<DoDont type="do">
  Deja 

  **aire**

   alrededor del logo: un margen mínimo igual a la altura de la “O” de PRO.
</DoDont>

<DoDont type="do">
  Sobre fondos oscuros o de color, usa la versión 

  **blanca**

   o la 

  **placa blanca**

  .
</DoDont>

<DoDont type="do">
  Para espacios cuadrados o muy chicos (favicon, avatar de redes), usa el 

  **isotipo**

  .
</DoDont>

<DoDont type="dont">
  No deformes, rotes ni cambies los colores del logo.
</DoDont>

<DoDont type="dont">
  No pongas el logotipo a todo color sobre fondos saturados: pierde legibilidad. Usa placa.
</DoDont>

<DoDont type="dont">
  No recrees el logo con otra tipografía ni rehagas la pastilla a mano.
</DoDont>

## Convivencia con la mascota [#convivencia-con-la-mascota]

El chungungo **no reemplaza** al logo. En el header va el logo; la mascota es el personaje del
producto. Pueden convivir en la misma pantalla (logo arriba, mascota como personaje), pero **no se
fusionan** en un solo lockup. Ver [La mascota](/docs/mascota).


# Iconografía (/docs/iconografia)



**El único set de iconos de la marca es [Lucide](https://lucide.dev)** — el mismo que usa el sitio
en producción (`lucide-react`). Trazo limpio, geométrico, profesional. **Nunca emojis como iconos,
nunca clipart, nunca mezclar sets** (Font Awesome, Material, Heroicons…): un solo icono ajeno rompe
el aire premium.

## La regla [#la-regla]

| Parámetro         | Valor                                                                    |
| ----------------- | ------------------------------------------------------------------------ |
| Set               | **Lucide** (`lucide-react` / `lucide-static`)                            |
| Stroke            | **2** (default) · 3–3.5 solo en checks pequeños dentro de píldoras       |
| Tamaños           | 16px en línea · 20px listas · **24px dentro de chips** · 28px destacados |
| Color sobre navy  | amarillo `#FFF100` · cyan `#02B0BB` · blanco (según jerarquía)           |
| Color sobre claro | navy `#003C72` · cyan `#02B0BB`                                          |
| Esquinas          | `stroke-linecap="round" stroke-linejoin="round"` (viene así en Lucide)   |

## Chips contenedores (las recetas del sitio, exactas) [#chips-contenedores-las-recetas-del-sitio-exactas]

El icono casi nunca va "suelto": va dentro de un **chip translúcido** con ring. Recetas de producción:

```html
<!-- Chip amarillo (patrón firma) — Tailwind del sitio -->
<span class="inline-flex size-12 items-center justify-center rounded-xl
             bg-brand-yellow/15 text-brand-yellow ring-1 ring-brand-yellow/30">
  <Icon class="size-6" />
</span>

<!-- CSS puro equivalente (para documentos/PDF standalone) -->
.ichip { display:inline-flex; align-items:center; justify-content:center;
         width:48px; height:48px; border-radius:14px;
         background:rgba(255,241,0,.15); color:#FFF100;
         box-shadow:inset 0 0 0 1px rgba(255,241,0,.3); }
```

Variantes: **cyan** `bg-brand-cyan/15 text-brand-cyan ring-brand-cyan/30` · **sello redondo**
(garantías) `size-9 rounded-full` + icono 16px · **check en lista** `size-5 rounded-full bg-brand-cyan
text-brand-blue` + `<Check size={12} strokeWidth={3.5}/>` · **social del footer** `rounded-full
bg-white/10 p-2` con hover a amarillo.

## Los 35 iconos oficiales, descargables [#los-35-iconos-oficiales-descargables]

Todos en [`/brand/iconos/ui/`](https://brandbook.prouniversitas.cl/brand/iconos/ui/check.svg)
(SVG 24×24, stroke 2, `currentColor` — píntalos con CSS). Patrón de URL:
`https://brandbook.prouniversitas.cl/brand/iconos/ui/<nombre>.svg`

| Uso                  | Iconos                                                                                    |
| -------------------- | ----------------------------------------------------------------------------------------- |
| UI / navegación      | `check` `x` `chevron-down` `chevron-up` `chevron-right` `arrow-right` `arrow-left` `menu` |
| Valor / método       | `gauge` `compass` `target` `crosshair` `trending-up` `rotate-cw` `sparkles` `brain`       |
| Personas / académico | `users` `user-check` `graduation-cap` `heart-handshake` `monitor-play` `school`           |
| Confianza / becas    | `shield-check` `award` `medal` `lock` `clock` `star`                                      |
| Contacto / contenido | `mail` `map-pin` `message-circle` `quote` `newspaper` `file-text` `calendar-clock`        |

Para usarlos inline en un documento (recomendado en PDF — sin dependencias de red), copia el
contenido del SVG y pinta con `color`:

```html
<span class="ichip" style="color:#FFF100">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24" height="24">
    <path d="M20 6 9 17l-5-5"/> <!-- check -->
  </svg>
</span>
```

## Redes sociales [#redes-sociales]

Los iconos de RRSS (Facebook, Instagram, YouTube, TikTok) son SVG custom `fill="currentColor"`
(no Lucide, que no trae marcas). En el footer del sitio van en círculos `bg-white/10` con hover
amarillo. No uses los logos de color oficiales de cada red sobre navy — siempre monocromo.

## Do / Don't [#do--dont]

<DoDont type="do">
  Icono Lucide stroke 2 dentro de un chip translúcido con ring del mismo color.
</DoDont>

<DoDont type="dont">
  Emojis como iconos (📊 ✅ 🎯) en documentos, presentaciones o piezas — jamás. Se ve barato al instante.
</DoDont>

<DoDont type="do">
  Sobre navy: iconos en amarillo, cyan o blanco. Sobre claro: navy o cyan.
</DoDont>

<DoDont type="dont">
  Mezclar sets (un Material aquí, un FontAwesome allá) o usar iconos 3D/con sombra/de color plano estilo clipart.
</DoDont>


# Fotografía (/docs/fotografia)



La fotografía es **la mitad del look premium**: escenas reales de estudiantes chilenos, ambiente
nocturno/"hora azul", &#x2A;*grading azul `#003C72` + dorado `#FFF100`**, el sujeto desplazado a un lado
dejando aire para el texto. Una pieza sin foto (o con foto de stock genérica y clara) nunca se verá
como la marca.

## Banco oficial (URLs absolutas, listas para usar) [#banco-oficial-urls-absolutas-listas-para-usar]

JPEG optimizados (\~1600px, q80, 130–280 KB). Patrón:
`https://brandbook.prouniversitas.cl/brand/fotos/<nombre>.jpg`

| Foto                                                                                             | Cuándo usarla                                                 | Encuadre sugerido             |
| ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------------------------- |
| [`scene-01.jpg`](https://brandbook.prouniversitas.cl/brand/fotos/scene-01.jpg)                   | Hero / portada — corredora en la ciudad, hora azul            | `object-position: 60% 30%`    |
| [`scene-02.jpg`](https://brandbook.prouniversitas.cl/brand/fotos/scene-02.jpg)                   | Portada de informes — corredora frente a letreros de carreras | `object-position: 30% 30%`    |
| [`nosotros-hero.jpg`](https://brandbook.prouniversitas.cl/brand/fotos/nosotros-hero.jpg)         | Cierres, institucional, equipo                                | `object-position: 50% 32%`    |
| [`profesores-hero.jpg`](https://brandbook.prouniversitas.cl/brand/fotos/profesores-hero.jpg)     | Piezas académicas / profesores                                | `object-position: 70% center` |
| [`metodo-bg.jpg`](https://brandbook.prouniversitas.cl/brand/fotos/metodo-bg.jpg)                 | Método, plan de estudio, fondos de sección                    | tenue: `opacity .08–.40`      |
| [`sede-vina.jpg`](https://brandbook.prouniversitas.cl/brand/fotos/sede-vina.jpg)                 | Presencial, sedes, colegios                                   | `object-position: center 35%` |
| [`banner-experience.jpg`](https://brandbook.prouniversitas.cl/brand/fotos/banner-experience.jpg) | Programas, sala de clases                                     | `object-position: center 35%` |

## La regla de oro: toda foto lleva overlay navy [#la-regla-de-oro-toda-foto-lleva-overlay-navy]

Nunca una foto "cruda" de fondo. El overlay **oscurece el lado donde va el texto** y funde la foto
con el navy de la página. Recetas exactas del sitio en producción:

```css
/* Portada de documento (footer de foto fundiendo a #002A51 sólido) */
background: linear-gradient(180deg,
  rgba(0,26,49,.62) 0%, rgba(0,32,60,.38) 34%,
  rgba(0,42,81,.86) 66%, #002A51 84%);

/* Hero con texto a la izquierda (patrón PageHero del sitio) */
background: rgba(0,42,81,.40);                       /* base */
background: linear-gradient(90deg,                    /* + direccional */
  rgba(0,42,81,.95), rgba(0,42,81,.65), rgba(0,42,81,.15));
background: linear-gradient(0deg,                     /* + pie */
  rgba(0,42,81,.80), transparent 45%);

/* Banda de sección (SectionBanner) */
background: linear-gradient(90deg,
  rgba(0,42,81,.95), rgba(0,42,81,.65), transparent);

/* Foto de contexto casi subliminal bajo contenido */
img { opacity: .08; }   /* o .10–.40 según jerarquía */
```

En Tailwind (el código real): `bg-brand-blue-dark/40` + `bg-gradient-to-r from-brand-blue-dark/95
via-brand-blue-dark/65 to-brand-blue-dark/15` + `bg-gradient-to-t from-brand-blue-dark/80
via-transparent to-brand-blue-dark/30`.

## Encaje y esquinas [#encaje-y-esquinas]

* **`object-fit: cover`** siempre (contain solo en mockups de producto).
* Aspect ratios del sitio: cards de programa `4/5` · blog/banners `16/9` · retratos `1/1`.
* En cards, la imagen va en contenedor `border-radius: 18–22px` + `overflow: hidden`, con
  `ring-1 ring-white/10` (o `ring-2 ring-brand-cyan/50` en avatares).
* Sin filtros CSS (ni grayscale ni blur sobre fotos de contenido): el grading ya viene en la imagen.
* **Sin ruido/grain**: la textura del sitio es limpia.

## Do / Don't [#do--dont]

<DoDont type="do">
  Foto del banco oficial + overlay navy direccional + texto sobre la zona oscurecida.
</DoDont>

<DoDont type="dont">
  Stock genérico luminoso (oficinas blancas, gente aplaudiendo, apretones de manos) — mata la marca al instante.
</DoDont>

<DoDont type="do">
  JPEG ~1600px q80 (~200 KB). PNG solo para logos.
</DoDont>

<DoDont type="dont">
  Foto sin overlay con texto encima, o fotos con la mascota: el chungungo no aparece en fotografía institucional.
</DoDont>

> ¿Necesitas una escena nueva? Genera con IA siguiendo la dirección de arte (estudiante chileno real,
> hora azul, grading azul+dorado, aire para texto) y valida contra estas referencias antes de usarla.


# Voz y tono (/docs/voz-y-tono)



**Voz** es cómo hablamos siempre (no cambia). **Tono** es cómo la modulamos según la pantalla y la
emoción (sí cambia).

## Quiénes somos [#quiénes-somos]

> **El preuniversitario digital chileno que combina rigor académico con la experiencia de una app
> moderna que se adapta a cada alumno.** El PRE que es PRO.

**Arquetipo:** el Sabio Cercano (autoridad real, sin distancia académica) + el Compañero (la mascota).

**Cinco atributos:** Cercano · PRO · Curioso e inteligente · Optimista energizante · Costero / chileno.

## Voz: principios permanentes [#voz-principios-permanentes]

* **Tuteamos siempre.** “Empieza gratis”, no “Empiece gratis”. (Usted solo en legal / apoderados.)
* **Frases cortas, verbos al frente.** “Practica PAES con feedback adaptativo”, no párrafos.
* **Chileno, no latino genérico.** “Acá vas a ver tu progreso”. Sin jerga forzada (“wn dale”) ni “español neutro” robótico.
* **El error es información, no castigo.** Explicamos por qué, no consolamos con “¡tú puedes!”.
* **La gamificación es lenguaje.** XP, racha, nivel, ranking se nombran siempre igual.
* **Sin miedo ni urgencia falsa.** Cero “última oportunidad”, cero descuentos cronometrados.

## Léxico oficial [#léxico-oficial]

| Concepto            | Decimos                                | NO decimos                    |
| ------------------- | -------------------------------------- | ----------------------------- |
| El examen           | **PAES**                               | “la prueba”, “el test”        |
| Práctica diaria     | **sesión**                             | “rutina”, “ejercicio del día” |
| Tema de una materia | **eje**                                | “tópico”, “capítulo”          |
| Niveles del alumno  | **Base / Medio / Avanzado / Élite**    | “principiante”, “experto”     |
| Puntos en sesión    | **XP**                                 | “puntos”, “monedas”           |
| Días seguidos       | **racha**                              | “streak”, “sequía”            |
| Comunidad           | **ranking**                            | “leaderboard”, “tabla”        |
| App / producto      | **PRO Universitas** → luego **la app** | “la plataforma”, “el sistema” |
| Mascota             | **el chungungo**                       | “la nutria”, “el animalito”   |

## Tono por contexto [#tono-por-contexto]

| Pantalla             | Energía            | Mascota        | Ejemplo                                          |
| -------------------- | ------------------ | -------------- | ------------------------------------------------ |
| Landing              | Alta               | Protagonista   | “Practica PAES con feedback adaptativo”          |
| Sesión (pregunta)    | Neutra             | No             | “Pregunta 3 de 10”                               |
| Feedback correcto    | Alta               | Celebra        | “¡Muy bien! +10 XP · BONUS RACHA +5”             |
| Feedback incorrecto  | Calma              | Anima          | “Incorrecto. Acá va el por qué: …”               |
| Error crítico (pago) | Sobria             | **No aparece** | “No pudimos procesar tu pago. Revisa el método.” |
| Apoderado            | Profesional-cálida | Acento         | “Tu hijo/a completó 4 sesiones esta semana.”     |

## Ejemplos [#ejemplos]

<DoDont type="do">
  Correcto: “¡Muy bien! +10 XP · BONUS RACHA +5”
</DoDont>

<DoDont type="do">
  Incorrecto: “Incorrecto. La respuesta es 

  **B ($15.000)**

   porque 25% de $20.000 son $5.000.”
</DoDont>

<DoDont type="dont">
  “¡Excelente trabajo!! 🎉🎉” — exceso de emoji + condescendencia.
</DoDont>

<DoDont type="dont">
  “¡Tú puedes con todo!” / “Hola crack” — falsamente motivacional, apodos inflados.
</DoDont>

<DoDont type="dont">
  “Has obtenido 10 puntos de experiencia” — lenguaje de manual. Decimos “ganaste 10 XP”.
</DoDont>

## Emojis: casi nunca [#emojis-casi-nunca]

Por defecto, **cero emojis**. Excepciones: 💡 en feedback explicativo (uno, al final) y 🦦 para la
mascota en push/redes. Prohibido 🎉🔥💪🚀✨.

## Promesas que NO hacemos [#promesas-que-no-hacemos]

* No prometemos “ingreso garantizado a tal carrera” (trabajamos puntaje y dominio).
* No prometemos “PAES fácil” ni “atajos”.
* No vendemos “IA mágica”: decimos qué hace, no qué tecnología usa.
* No comparamos despectivamente con otros preus.

## Antes de escribir cualquier copy [#antes-de-escribir-cualquier-copy]

1. **¿Tutea?** Si dice “usted”, reescribe.
2. **¿Suena a un compañero chileno que sabe del PAES?** Si suena a manual o robot motivacional, reescribe.
3. **¿Cabe en una pantalla de celular sin scroll?** Si no cabe, sobra.


# Animaciones (/docs/animaciones)



El movimiento es parte de la identidad: **sutil, con rebote amable y física consistente**. Esta página
documenta el sistema real implementado en `pro-universitas-web` (librería `motion/react`, ex Framer
Motion) y en la app de `aprendizaje-adaptativo-v2` (web con `framer-motion`, móvil con Reanimated).
Todo lo que ves acá corre con **las mismas constantes** que producción.

## La física de la marca [#la-física-de-la-marca]

Una sola "física" compartida. Si animas algo nuevo, usa estos valores — no inventes curvas.

### Easings (web) [#easings-web]

| Nombre       | Valor                            | Cuándo                                                                             |
| ------------ | -------------------------------- | ---------------------------------------------------------------------------------- |
| `EASE.out`   | `cubic-bezier(0.16, 1, 0.3, 1)`  | **El default de la marca** (estilo Apple). Entradas, reveals, transición de página |
| `EASE.inOut` | `cubic-bezier(0.65, 0, 0.35, 1)` | Movimientos que van y vuelven                                                      |
| `backOut`    | (preset de motion)               | Entradas con rebote: la mascota, chips, badges                                     |

### Springs [#springs]

| Contexto | Nombre    | Valores                    | Cuándo                                     |
| -------- | --------- | -------------------------- | ------------------------------------------ |
| Web      | `SPRING`  | damping 20 · stiffness 100 | Spring por defecto                         |
| Web      | magnético | damping 18 · stiffness 220 | Botón magnético (sigue el cursor)          |
| Móvil    | `snappy`  | damping 18 · stiffness 220 | Micro-interacciones, botones               |
| Móvil    | `bouncy`  | damping 12 · stiffness 180 | Entradas “pop” con rebote (XP, logros)     |
| Móvil    | `gentle`  | damping 20 · stiffness 120 | Entradas “slide”, transiciones de pantalla |

### Duraciones [#duraciones]

| Token     | ms  | Cuándo                                       |
| --------- | --- | -------------------------------------------- |
| `instant` | 120 | Feedback táctil (press)                      |
| `fast`    | 200 | Hovers, toggles                              |
| `base`    | 320 | Transiciones de UI                           |
| `slow`    | 500 | Entradas de sección, elementos protagonistas |

> Estas constantes están portadas en `src/lib/motion.ts` de este repo y en los
> [design tokens](/docs/tokens) (`tokens.motion`). Fuente original:
> `pro-universitas-web/lib/animations.ts` y `mobile/constants/theme.ts`.

## La mascota animada [#la-mascota-animada]

El chungungo **flota** en reposo, **entra con rebote** y **reacciona al hover**. Pasa el cursor y
repite la entrada con el botón ↺:

<MascotMotionDemo />

Specs exactas (de `LandingMascot.tsx` / `MascotAccent`):

| Momento                 | Valores                                                                              |
| ----------------------- | ------------------------------------------------------------------------------------ |
| **Idle (flotación)**    | `y: [0, -10, 0]` · 3.4 s · easeInOut · loop ∞ (versión acento: `[0, -6, 0]` · 2.6 s) |
| **Entrada en viewport** | `opacity 0→1 · scale 0.6→1 · rotate −10°→0°` · 0.5 s · `backOut` · una sola vez      |
| **Hover**               | `scale 1.08 · rotate 4°`                                                             |
| **Parallax en hero**    | al hacer scroll: `y 0→−40 · rotate 0→−5°`                                            |
| **Celebración**         | brincos cortos en `y` — **nunca** spins de 360° ni escalas bruscas                   |

Código real (framer-motion), listo para copiar:

```tsx
// Idle + parallax (LandingMascot.tsx — aprendizaje-adaptativo-v2)
const { scrollYProgress } = useScroll({ target: ref, offset: ['start start', 'end start'] });
const y = useTransform(scrollYProgress, [0, 1], [0, -40]);
const rotate = useTransform(scrollYProgress, [0, 1], [0, -5]);

<motion.div style={{ y, rotate }}
  animate={{ y: [0, -10, 0] }}
  transition={{ duration: 3.4, ease: 'easeInOut', repeat: Infinity }}>
  <Mascot mood="celebra" />
</motion.div>

// Entrada + hover (MascotAccent)
<motion.div
  initial={{ opacity: 0, scale: 0.6, rotate: -10 }}
  whileInView={{ opacity: 1, scale: 1, rotate: 0 }}
  viewport={{ once: true, margin: '-100px' }}
  transition={{ duration: 0.5, ease: 'backOut' }}
  whileHover={{ scale: 1.08, rotate: 4 }}>
```

<DoDont type="dont">
  En 

  **sesión activa**

   (pregunta en pantalla) el chungungo 

  **no se mueve**

   — no distrae la lectura.
</DoDont>

## Reveals de sección (fadeUp + stagger) [#reveals-de-sección-fadeup--stagger]

Todo el contenido de landing entra con **fade + slide-up** y las listas en **cascada**:

<RevealDemo />

```tsx
// lib/animations.ts (pro-universitas-web) — usar tal cual
export const fadeUp = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] } },
};
export const staggerContainer = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.1, delayChildren: 0.1 } },
};

<motion.section variants={staggerContainer} initial="hidden" whileInView="visible"
  viewport={{ once: true, margin: '-80px' }}>
  {items.map((i) => <motion.div key={i} variants={staggerItem}>…</motion.div>)}
</motion.section>
```

## Titulares palabra a palabra (TextReveal) [#titulares-palabra-a-palabra-textreveal]

Los H1 de la landing se revelan **palabra por palabra** (stagger 0.06 s), con las palabras clave en
amarillo de marca:

<TextRevealDemo />

```tsx
// TextReveal.tsx (pro-universitas-web): reparte el texto en <motion.span> por palabra
<motion.span initial="hidden" whileInView="visible" transition={{ staggerChildren: 0.06 }}>
  {words.map((w, i) => (
    <motion.span key={i} variants={{ hidden: { opacity: 0, y: 18 },
      visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE.out } } }}
      className={esAcento(w) ? 'text-brand-yellow' : undefined}>{w} </motion.span>
  ))}
</motion.span>
```

## Botones: 3D + magnético [#botones-3d--magnético]

El botón de marca es **3D** (sombra dura del color `dark`, se hunde al presionar) y en desktop puede
ser **magnético** (se atrae al cursor con spring 18/220, fuerza 0.4):

<MagneticDemo />

```css
/* Botón 3D (DESIGN.md) */
.btn-3d { box-shadow: 0 4px 0 var(--amarillo-dark); border-radius: 16px; font-weight: 800; }
.btn-3d:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--amarillo-dark); }
```

## Transición de página [#transición-de-página]

Cada navegación entra con un fade + slide sutil (`app/template.tsx` de la web):

```tsx
<motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}>{children}</motion.div>
```

## El hero por scroll (scroll-driven sequence) [#el-hero-por-scroll-scroll-driven-sequence]

La animación **más distintiva del sitio**: el hero de `preucv.cl` reproduce una secuencia de
**273 frames webp controlada por el scroll** (la corredora avanza a medida que bajas). No es un video:
es un `<canvas>` que dibuja el frame correspondiente al progreso de scroll.

Arquitectura (código en `pro-universitas-web`):

* **`hero/useHeroFrames.tsx`** — precarga compartida de los frames (hero y preloader leen el mismo
  progreso y el mismo array; una sola descarga). Expone `{ images, progress, ready, degraded }`.
* **`HeroScrollSequence.tsx`** — sección sticky con `useScroll({ offset: ['start start','end end'] })`;
  mapea el progreso `[0, 0.92]` linealmente a los frames y deja el último frame fijo en `[0.92, 1]`.
* **Decode-ahead**: decodifica `img.decode()` 24 frames por delante **en la dirección del scroll**
  para que el canvas nunca dibuje un frame sin decodificar (evita jank).
* **Capas**: `<img>` estático de respaldo → `<canvas>` con el frame → overlays de texto/CTA.
* **Degradación**: con `prefers-reduced-motion`, red 2G/`saveData` o error de carga, muestra un
  **póster estático** en vez del scrub.

```tsx
// Esqueleto del patrón
const { scrollYProgress } = useScroll({ target: sectionRef, offset: ['start start', 'end end'] });
useMotionValueEvent(scrollYProgress, 'change', (p) => {
  const frame = Math.min(FRAME_COUNT - 1, Math.round((p / 0.92) * (FRAME_COUNT - 1)));
  ensureDecoded(frame);           // + decode-ahead en la dirección del scroll
  drawFrame(canvasRef.current, images[frame]);
});
```

> Los frames de esa secuencia (una persona corriendo en la pista) son **material del hero del sitio**,
> no un asset de la mascota — por eso no viven en `public/brand/`. Si necesitas la secuencia, está en
> `pro-universitas-web/public/frames/{run,run-mobile}/`.

## Accesibilidad: reduced motion [#accesibilidad-reduced-motion]

**Regla obligatoria**: todo componente animado respeta `prefers-reduced-motion` — devuelve el
contenido **estático** (la web usa `useReducedMotion()` de motion; el hero cae a póster). Los demos
de esta página lo cumplen.

## Checklist al animar algo nuevo [#checklist-al-animar-algo-nuevo]

* ¿Usaste `EASE.out` / los springs de la tabla (no curvas inventadas)?
* ¿La entrada es una sola vez (`viewport: { once: true }`) y con `margin` negativo?
* ¿Respeta `prefers-reduced-motion`?
* ¿En sesión de práctica no hay nada moviéndose?
* ¿La mascota sigue sus reglas ([ver mascota](/docs/mascota)) — sin spins, sin escalas bruscas?


# Documentos y PDF (/docs/documentos)



**Todo documento institucional se ve como el sitio [prouniversitas.cl](https://www.prouniversitas.cl):
navy profundo, Poppins en grande, kickers amarillos, tarjetas de vidrio, fotografía con overlay.**
Nada de Nunito, nada de mascota, nada de fondos blancos planos. Esta página contiene el sistema
completo: plantillas, receta y decisiones.

## Empieza por la plantilla (no desde cero) [#empieza-por-la-plantilla-no-desde-cero]

La plantilla maestra ya trae el look correcto — **cambia solo textos, datos y fotos**:

| Plantilla                                       | URL pública                                                                                                   | En el repo                            |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| **Documento A4** (portada + contenido + cierre) | [`/plantillas/documento-a4.html`](https://brandbook.prouniversitas.cl/plantillas/documento-a4.html)           | `templates/informe/informe.html`      |
| **Presentación 16:9** (2 slides base)           | [`/plantillas/presentacion-16-9.html`](https://brandbook.prouniversitas.cl/plantillas/presentacion-16-9.html) | `templates/presentacion/portada.html` |

Ambas son **autocontenidas**: cargan Poppins/Inter desde Google Fonts (o desde
[`/brand/fonts/`](/docs/tipografia) si prefieres self-hosted), y las fotos y logos por URL absoluta
del brandbook. Se pueden abrir, editar y renderizar en cualquier máquina sin clonar nada.

## Render a PDF [#render-a-pdf]

Así se generan los PDF oficiales (Chrome headless respeta colores y fuentes):

```bash
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new --disable-gpu \
  --no-pdf-header-footer --virtual-time-budget=15000 \
  --print-to-pdf="salida.pdf" documento.html
```

En Linux/Windows cambia la ruta del binario (`google-chrome` / `chrome.exe`). El
`virtual-time-budget` da tiempo a que carguen fuentes y fotos remotas.

## Anatomía del documento A4 [#anatomía-del-documento-a4]

1. **Portada** — foto oficial a sangre + overlay navy (`180deg` hacia `#002A51` sólido abajo) +
   lockup PRO arriba + fecha · abajo: kicker amarillo → título Poppins 800 (39px) → subtítulo con
   separadores `·` → línea amarilla 64×4px → 3 stats de vidrio → pie.
2. **Páginas de contenido** — glows cyan/amarillo sangrando del marco · header con kicker + H2 +
   bajada + lockup mini · secciones con label uppercase amarillo · KPIs con barra superior de color ·
   chips de icono Lucide · tabla con headers uppercase tenues y hairlines · barras de progreso ·
   callout "en simple" con borde izquierdo amarillo · pie con folio.
3. **Cierre** — foto en banda superior (52%) fundiendo a navy · frase del método con acento amarillo
   (`No estudias más. Estudias lo que te falta.`) · cards de contacto · pie legal.

## Los valores que hacen el look (no los cambies) [#los-valores-que-hacen-el-look-no-los-cambies]

| Qué               | Valor exacto                                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Fondo de página   | `#002A51` (navy profundo del sitio) — **nunca blanco pleno**                                                             |
| Títulos           | Poppins 600–800 · `letter-spacing` levemente negativo · blanco con **1 palabra en amarillo**                             |
| Cuerpo            | Inter · jerarquía de opacidad: títulos `#FFF` · cuerpo `rgba(255,255,255,.72)` · notas `.55` · pie `.38`                 |
| Kicker            | Poppins 700 · MAYÚSCULAS · `letter-spacing: 3px` · `#FFF100` · sin punto final                                           |
| Tarjeta de vidrio | `background: rgba(255,255,255,.05)` + `border: 1px solid rgba(255,255,255,.12)` + radio 14–18px                          |
| Radios            | 10 / 14 / 18 / 22 px (los del sitio; `rounded-2xl` real = **18px**, no 16)                                               |
| Glows             | círculos `blur(70px+)` · cyan `rgba(2,176,187,.10–.15)` · amarillo `rgba(255,241,0,.07–.10)` · sangrando fuera del marco |
| Línea de acento   | 1px `linear-gradient(90deg, transparent, rgba(255,241,0,.4), transparent)`                                               |
| Estados           | verde `#5FE0A0` = bien/sube · ámbar `#FFD24A` = a reforzar — **siempre con ▲/▼ o cifra, nunca color solo**               |
| Separadores       | hairlines `rgba(255,255,255,.10)` — nunca bordes duros                                                                   |
| Numeración        | siempre 2 dígitos: `01`, `02`, `03`                                                                                      |

## Decisiones de diseño (el porqué — respétalas) [#decisiones-de-diseño-el-porqué--respétalas]

* **Datos con valor real, no técnicos**: un apoderado entiende "530 puntos PAES", no "40 de 65
  correctas". Convierte siempre al dato que el lector valora.
* **Gráficos: máximo 3 series**, cada una con **color + forma** (círculo/rombo/triángulo) — la marca
  solo tiene 3 colores usables sobre navy (cyan, amarillo, naranjo) y la forma cubre daltonismo. Si
  hay más series, parte en dos gráficos; **nunca inventes un 4º color**.
* **Escalas comunes entre documentos** de la misma familia (p. ej. eje Y 350–900 en informes PAES),
  para que sean comparables.
* **Tono propositivo**: los focos se llaman "el foco del semestre", &#x2A;*nunca "ALERTA"**, nunca rojo
  de alarma. El documento moviliza, no asusta.
* **Consistencia > novedad**: usa el mismo lenguaje gráfico en todas las páginas; un gráfico
  "creativo" que rompe la familia se descarta.
* **Fotos en JPEG** (q80, \~1600px, \~200 KB); PNG solo para logos (transparencia). Un PNG de fondo
  infla el PDF de 1.6 a 6.8 MB.

## Checklist antes de entregar [#checklist-antes-de-entregar]

* [ ] Fondo `#002A51`, títulos Poppins, cuerpo Inter — ¿cero Nunito?
* [ ] Amarillo **solo como acento** (kicker, 1 palabra del título, números, línea) — ¿nunca como fondo de página ni texto largo?
* [ ] ¿Foto oficial del [banco](/docs/fotografia) con overlay navy — no foto cruda ni stock genérico?
* [ ] ¿Iconos [Lucide](/docs/iconografia) en chips — cero emojis?
* [ ] ¿Estados con ▲/▼ y tono propositivo — cero "ALERTA"/rojo?
* [ ] ¿Sin mascota, sin insignias, sin XP? (eso es la [app](/docs/mascota))
* [ ] Renderiza a PDF y míralo: ¿se parece a una página de prouniversitas.cl impresa?

<Callout title="Para agentes IA">
  Si te pidieron "un PDF / informe / propuesta con la marca PRO Universitas": descarga
  [la plantilla maestra](https://brandbook.prouniversitas.cl/plantillas/documento-a4.html), reemplaza
  textos/datos/fotos, y renderiza con el comando de arriba. No reconstruyas el estilo desde cero ni
  mezcles con el universo app (Nunito/mascota). Referencia completa machine-readable:
  [`/llms-full.txt`](https://brandbook.prouniversitas.cl/llms-full.txt).
</Callout>


# Plantillas (/docs/plantillas)



Herramientas para producir contenido **siempre en marca**, sin partir de cero. Regla previa: define
el contexto — **pieza institucional → estilo sitio** (Poppins/Inter, navy `#002A51`, sin mascota);
**pieza del universo app → estilo app** (Nunito + chungungo).

## Documentos y presentaciones (institucional) [#documentos-y-presentaciones-institucional]

El sistema completo está en &#x2A;*[Documentos y PDF](/docs/documentos)**. Plantillas públicas:

| Pieza                                        | URL                                                                                                           | Repo                                  |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| Documento A4 (informe, propuesta, one-pager) | [`/plantillas/documento-a4.html`](https://brandbook.prouniversitas.cl/plantillas/documento-a4.html)           | `templates/informe/informe.html`      |
| Presentación 16:9                            | [`/plantillas/presentacion-16-9.html`](https://brandbook.prouniversitas.cl/plantillas/presentacion-16-9.html) | `templates/presentacion/portada.html` |

Si el documento lo va a generar una **IA**, pásale la plantilla + [`/llms-full.txt`](/llms-full.txt)
como contexto — sale con la identidad correcta sin analizar los sitios.

## Generador de piezas (social cards, posts, stories, ads, OG) [#generador-de-piezas-social-cards-posts-stories-ads-og]

La forma más rápida de crear una pieza de redes. Ajustas título, formato y color, y descargas el PNG.

<Cards>
  <Card title="Abrir el generador →" href="/herramientas/og" description="Social cards, posts (1080×1080), stories (1080×1920), ads (1200×628) y OG (1200×630)." />
</Cards>

También por URL directa:

```
# Estilo sitio (default): Poppins, navy profundo, kicker, SIN mascota
/og/card?format=post&title=Tu+futuro+empieza+con+un+paso&subtitle=Preuniversitario+PAES&kicker=El+PRE+que+es+PRO

# Estilo app (opt-in): Nunito + mascota
/og/card?format=post&estilo=app&title=Empieza+gratis&mascot=celebra
```

Parámetros: `estilo` (`sitio`*default*`|app`), `title`, `subtitle`, `kicker` (estilo sitio),
`mascot` (`celebra|default|corre|triste|none` — solo estilo app),
`subject` (`matematicas|lenguaje|ciencias|historia`), `variant` (`navy|amarillo`), `format`.

## OG / social cards de páginas [#og--social-cards-de-páginas]

Cada página del brandbook genera su propia imagen OG (`/og/docs/...`). Para tu propio sitio, reusa
el generador con `format=og`.

## Firma de correo [#firma-de-correo]

`templates/email-signature/signature.html` — tabla con CSS inline (Gmail / Outlook), fuentes
email-safe. Reemplaza nombre, cargo y la URL del logo
(`https://brandbook.prouniversitas.cl/brand/logos/logo-horizontal.png`), y pégala en la
configuración de firma.

## Kit de assets [#kit-de-assets]

Todos los assets con URL absoluta: [logos](/docs/logos) · [fotos](/docs/fotografia) ·
[iconos Lucide](/docs/iconografia) · [fuentes](/docs/tipografia) · mascota y niveles (app).
Índice machine-readable: [`/brand/manifest.json`](https://brandbook.prouniversitas.cl/brand/manifest.json).
Para desarrolladores, los [design tokens](/docs/tokens) traen colores, radios y sombras para
cualquier stack.

<DoDont type="do">
  Antes de publicar, pasa el copy por la 

  [voz y tono](/docs/voz-y-tono)

  : tuteo, frases cortas, sin urgencia falsa.
</DoDont>

<DoDont type="dont">
  No agregues emojis motivacionales (🎉🔥💪) ni cambies los colores de la pieza.
</DoDont>


# Design tokens (/docs/tokens)



Todos los valores de marca viven en una **única fuente de verdad**: `tokens/tokens.json`. Con
`pnpm build:tokens` se generan artefactos listos para cualquier stack, en `tokens/dist/`.

<DoDont type="do">
  Consume los tokens; 

  **no**

   copies los hex a mano en cada repo. Así el rebranding es un solo cambio.
</DoDont>

<DoDont type="dont">
  No edites 

  `tokens/dist/*`

   a mano — se regeneran. Edita 

  `tokens/tokens.json`

  .
</DoDont>

## Artefactos [#artefactos]

| Archivo               | Para qué                                                                                                                                 |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `web.css`             | **El sitio principal** — variables con los nombres del código real (`--brand-blue-dark`, `--brand-cream`, `.mark-yellow`, Poppins/Inter) |
| `tokens.css`          | Vanilla — `var(--navy)`, `var(--radius-lg)`                                                                                              |
| `theme.css`           | **Tailwind v4** — clases `bg-navy`, `text-amarillo`, `shadow-3d-navy`, `rounded-lg`                                                      |
| `tailwind-preset.js`  | **Tailwind v3** — `presets: [require(...)]`                                                                                              |
| `tokens.js` + `.d.ts` | JS / TS — `tokens.color.navy`, `tokens.web.color['brand-blue-dark']`, `tokens.motion`                                                    |
| `fonts.css`           | `@font-face` Nunito (**solo universo app**)                                                                                              |

> ¿Pieza institucional / del sitio? Parte por &#x2A;*`web.css`** (contexto principal). Los tokens `navy/amarillo/celeste` a secas son la paleta compartida; los soft de la app difieren de los del sitio.

## Ejemplos [#ejemplos]

**Tailwind v4** (como este brandbook):

```css
@import 'tailwindcss';
@import 'pro-universitas-brand/tokens/dist/theme.css';
```

```html
<button class="rounded-lg bg-amarillo text-navy shadow-3d-amarillo">Empieza gratis</button>
```

**Vanilla CSS:**

```css
@import 'pro-universitas-brand/tokens/dist/tokens.css';
.cta { background: var(--navy); color: #fff; border-radius: var(--radius-lg); }
```

**JS / TS:**

```ts
import { tokens } from 'pro-universitas-brand/tokens/dist/tokens.js';
tokens.color.navy;          // "#003C72"
tokens.subject.matematicas; // "navy"
```

## Instalar en otro repo [#instalar-en-otro-repo]

```bash
pnpm add github:Pbezama/pro-universitas-brand
```

o copia la carpeta `tokens/dist/` (y `public/brand/fonts/` si haces self-host de Nunito).

## Recordatorios de marca [#recordatorios-de-marca]

* **Amarillo siempre con texto navy** (`text-navy` sobre `bg-amarillo`).
* **Éxito = celeste**, no navy.
* Botón principal: **3D** (`shadow-3d-navy` / `shadow-3d-amarillo`), radio `lg` (16px), Nunito ExtraBold.


================================================================
UNIVERSO APP (SECUNDARIO) — todo lo que sigue aplica SOLO a la app
preparalapaes y sus comunicaciones. NO usar en documentos, PDFs,
presentaciones ni piezas institucionales.
================================================================
# La mascota — el chungungo (/docs/mascota)



> **Ámbito: universo app (preparalapaes).** El chungungo es la mascota de la **app de
> entrenamiento**, no de la marca institucional: **no aparece** en el sitio principal, en
> comunicación a colegios ni en piezas de matrícula. Para esas piezas, ver
> [El sitio principal](/docs/web).

El chungungo es el **compañero de estudio** del alumno dentro de la app. No es un narrador ni una
autoridad: estudia a tu lado, celebra cuando aciertas y te acompaña cuando fallas.

## Estados [#estados]

Cuatro variantes según el momento emocional de la pantalla. Descarga cada una con su botón. El estado
**Corre** es la pose para transiciones y CTAs enérgicos.

<MascotGallery />

## Por qué un chungungo [#por-qué-un-chungungo]

El **chungungo** (*Lontra felina*) es una nutria marina **endémica del Pacífico chileno** — no existe
en ningún otro país. Lo elegimos por tres razones:

1. **Chilenidad real.** Adoptarlo declara que somos una marca nacida en Chile, para alumnos chilenos.
2. **Originalidad.** Las apps educativas saturan con búhos, zorros y pingüinos. El chungungo es solo nuestro.
3. **Carácter.** Pequeño, ágil, juguetón, expresivo. Ternura sin caer en infantil (calza con 16–19 años).

## La especie real [#la-especie-real]

Estos hechos son la base de su personalidad. Respetarlos se siente auténtico; traicionarlos (ponerlo
en un bosque) se siente falso.

| Hecho             | Detalle                                                                    |
| ----------------- | -------------------------------------------------------------------------- |
| Nombre científico | *Lontra felina*                                                            |
| Otros nombres     | chungungo, gato marino, chinchimén, nutria marina chilena                  |
| Tamaño            | La nutria más pequeña del mundo (\~90 cm, 3–5 kg)                          |
| Hábitat           | **Exclusivamente costa del Pacífico**, litorales rocosos y algas pardas    |
| Endemismo         | Solo en Chile y zonas vecinas del Pacífico                                 |
| Carácter          | Solitario y tímido, pero juguetón. Excelente nadador, ágil entre las rocas |
| Conservación      | **En peligro** (UICN)                                                      |

<DoDont type="dont">
  **No**

   afirmar que el chungungo “usa herramientas”. Eso lo hace la nutria marina norteamericana (

  *Enhydra lutris*

  ), no el chungungo. Para el nuestro destacamos 

  **agilidad, inteligencia espacial y curiosidad**

  .
</DoDont>

## Personalidad [#personalidad]

1. **Curioso.** Mete la cabeza en todo. La versión animal del alumno que pregunta “¿pero por qué?”.
2. **Ágil y rápido.** No se queda quieto: gestos rápidos, no poses estáticas.
3. **Cercano, no infantil.** Tierno pero no aniñado. Es un compañero, no un peluche.
4. **Inteligente sin ser sabelotodo.** Sabe cosas, pero también se equivoca y vuelve a intentar.
5. **Hijo del mar chileno.** Su lugar son las rocas, las olas, las algas. No vive en bosques ni nieve.

**Sin nombre propio (por ahora):*&#x2A; lo llamamos &#x2A;*“el chungungo”**, no “Chumi” ni “Otto”. Un nombre
propio se decide con campaña dedicada, no por inercia.

## Apariencia [#apariencia]

| Elemento  | Detalle                                              |
| --------- | ---------------------------------------------------- |
| Cuerpo    | Marrón chocolate `#6B4423`                           |
| Barriga   | Crema `#E8D4A0`                                      |
| Ojos      | Grandes, expresivos, pupilas claras                  |
| Bigotes   | Finos, presentes (firma del personaje)               |
| Mejillas  | Blush rosado suave                                   |
| Accesorio | **Lápiz amarillo** (`#FFF100`) en contexto educativo |

<DoDont type="do">
  En contexto educativo (sesión, feedback, progreso), el chungungo 

  **lleva su lápiz amarillo**

  .
</DoDont>

<DoDont type="do">
  **Puede**

   usar accesorios de profesor (anteojos, gorro de graduación, corbatín) cuando explica.
</DoDont>

<DoDont type="dont">
  **Nunca**

   fuera de contexto costero: no bosques, no nieve, no espacio, no oficinas.
</DoDont>

<DoDont type="dont">
  No lo ilustres realista tipo zoológico: es chocolate estilizado, color de marca primero.
</DoDont>

## Dónde aparece [#dónde-aparece]

**Protagonista:** splash, onboarding, diagnóstico, intro de práctica, feedback correcto (celebra),
resumen de sesión, referidos, estados vacíos, hero de landing.

**No aparece:** login/registro, pantalla de pregunta activa, errores críticos (pago, datos),
términos y privacidad, comunicación a colegios, panel docente. En esos contextos quita seriedad o distrae.

## Cuidado con la variante triste [#cuidado-con-la-variante-triste]

`chungungo-triste` es la más delicada. Úsala **solo** en racha perdida (con copy empático, no culposo:
“Tu racha se rompió. Empezamos una nueva.”) o estados vacíos persistentes. **Nunca** para feedback de
respuesta incorrecta ni errores del sistema. La mascota **no manipula emocionalmente**.

## Checklist antes de aprobar una pieza [#checklist-antes-de-aprobar-una-pieza]

* ¿La variante (default / celebra / corre / triste) corresponde al estado de la pantalla?
* ¿Está en una pantalla donde corresponde que aparezca?
* ¿Lleva su lápiz amarillo si el contexto es educativo?
* ¿La animación es sutil y no distrae durante la lectura?
* ¿El texto que la acompaña respeta la [voz y tono](/docs/voz-y-tono)?


# Niveles y personajes por curso (/docs/niveles)



> **Ámbito: universo app (preparalapaes).** Insignias y personajes viven en la app y sus
> comunicaciones. En piezas del sitio principal / institucionales no se usan.

El alumno progresa por **cuatro niveles** — el "sistema de personajes" de la app. Cada nivel tiene
su **insignia ilustrada con el chungungo** asomado en el escudo. Se usan en el perfil, el resultado
del diagnóstico, los mails de progreso y las piezas de marketing por segmento.

<NivelesGallery />

## Nombres oficiales [#nombres-oficiales]

Siempre **Base / Medio / Avanzado / Élite** (con tilde en Élite). Ver el
[léxico de voz y tono](/docs/voz-y-tono): nunca "principiante", "intermedio", "experto" ni "pro".

* ✅ "Subiste de nivel: ahora estás en **Medio**"
* ❌ "Ahora eres nivel intermedio"

## Reglas de uso [#reglas-de-uso]

<DoDont type="do">
  Usa la insignia del nivel 

  **real**

   del alumno (perfil, resultado de diagnóstico, mail de progreso).
</DoDont>

<DoDont type="do">
  En marketing por segmento, la insignia identifica el tramo (ej. campaña para alumnos Base).
</DoDont>

<DoDont type="dont">
  No uses 

  **Élite**

   como decoración genérica — es una meta, se gana.
</DoDont>

<DoDont type="dont">
  No mezcles insignias de niveles distintos en una misma pieza sin jerarquía clara (confunde el progreso).
</DoDont>

<DoDont type="dont">
  No recolorees los escudos: el sistema azul/celeste con acentos es parte de la ilustración.
</DoDont>

## Personajes por curso [#personajes-por-curso]

Para segmentar por **curso escolar** (no por desempeño) existe este set: el mismo chungungo en cinco
momentos de su camino al ingreso, de 1° medio a egresado. Úsalos en campañas por curso, onboarding,
mails de bienvenida y piezas de matrícula. Descarga el PNG 2048px con el botón de cada tarjeta.

<CursosGallery />

La historia del set: llega con su mochila (1° medio), construye la base (2°), se pone serio (3°),
entra en modo PAES (4°) y se gradúa para ir por su mejor puntaje (egresado). Mismo personaje, mismos
anteojos, lápiz amarillo siempre presente y accesorios en colores de marca (navy, celeste, amarillo).

<DoDont type="do">
  Usa el personaje del curso 

  **real**

   del alumno o del segmento de la campaña.
</DoDont>

<DoDont type="dont">
  No los mezcles con las insignias de nivel en una misma pieza: 

  **curso ≠ nivel**

   (un alumno de 2° puede estar en Avanzado).
</DoDont>

> Generados con IA (Higgsfield `nano_banana_pro`) usando los renders oficiales como referencia y las
> [reglas de la mascota](/docs/mascota). Para regenerar o crear variantes: `scripts/gen-cursos.sh`.

## Niveles vs. cursos [#niveles-vs-cursos]

Los **niveles** son por desempeño: un alumno de 2° medio puede estar en Medio y uno de 4° en Base.
Los **personajes por curso** segmentan por año escolar. No los intercambies.

## Futuro: mascota evolutiva [#futuro-mascota-evolutiva]

Idea registrada en la doc de la mascota (no comprometida): el chungungo **gana accesorios sutiles** al
subir de nivel (Base → Élite). Si se implementa, las variantes nuevas deben respetar las
[reglas de la mascota](/docs/mascota) y sumarse a este brandbook como assets oficiales.


================================================================
APÉNDICE A · tokens del sitio (web.css — mismos nombres que producción)
================================================================

```css
/* Generado por scripts/build-tokens.mjs — NO editar a mano. Editá tokens/tokens.json. */
/* Tokens del SITIO PRINCIPAL (prouniversitas.cl) — mismos nombres que
   pro-universitas-web/app/globals.css. Tipografías: Poppins (títulos) + Inter
   (cuerpo) vía Google Fonts o next/font. Firma de marca:
   .mark-yellow y kickers uppercase tracking .2em en amarillo. */
:root {
  --brand-yellow: #FFF100;
  --brand-yellow-soft: #FFF7A8;
  --brand-blue: #003C72;
  --brand-blue-dark: #002A51;
  --brand-blue-soft: #E6EDF3;
  --brand-cyan: #02B0BB;
  --brand-cyan-soft: #D5F3F5;
  --brand-cream: #FAF8F5;
  --foreground: #0F1B2D;
  --muted-foreground: #5B6B7D;
  --border: #E2E8F0;
  --font-heading: Poppins, var(--font-sans), sans-serif;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --radius: 0.625rem;
}
.mark-yellow {
  background-image: linear-gradient(transparent 60%, var(--brand-yellow) 60%);
}

```

================================================================
APÉNDICE B · PLANTILLA MAESTRA documento-a4.html COMPLETA
(cópiala tal cual, cambia solo textos/datos/fotos; también en
https://brandbook.prouniversitas.cl/plantillas/documento-a4.html)
================================================================

```html
<!DOCTYPE html>
<html lang="es">
<head>
<!--
  ═══════════════════════════════════════════════════════════════════════════
  PRO UNIVERSITAS · PLANTILLA MAESTRA DE DOCUMENTO A4 (estilo SITIO — institucional)
  https://brandbook.prouniversitas.cl · fuente de verdad de la marca
  ═══════════════════════════════════════════════════════════════════════════

  PARA AGENTES IA — LEE ESTO ANTES DE EDITAR:

  1. Este archivo ES el look correcto. Cambia SOLO los textos, datos y fotos.
     No cambies colores, fuentes, radios, sombras ni espaciados: ya son los del
     sitio www.prouniversitas.cl en producción.
  2. Contexto: los documentos institucionales (informes, propuestas, one-pagers,
     certificados, presentaciones) usan SIEMPRE este estilo:
     Poppins (títulos) + Inter (texto) · fondo navy #002A51 · acentos #FFF100 y #02B0BB.
     NUNCA uses aquí: Nunito, la mascota (chungungo), insignias de nivel, XP,
     botones 3D — eso es el universo APP (secundario), no el institucional.
  3. Iconos: SOLO Lucide (https://brandbook.prouniversitas.cl/brand/iconos/ui/),
     stroke 2, dentro de un chip .ichip. NUNCA emojis como iconos, nunca clipart.
  4. Fotos: usa el banco oficial (URLs absolutas abajo). Toda foto lleva overlay
     navy direccional — jamás una foto "cruda" de fondo ni fotos de stock genéricas.
  5. Render a PDF (Chrome headless, así se generó el original):
     "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless=new \
       --disable-gpu --no-pdf-header-footer --virtual-time-budget=15000 \
       --print-to-pdf="salida.pdf" documento.html
  6. Checklist final antes de entregar:
     [ ] Títulos en Poppins 600–800, cuerpo Inter · [ ] fondo #002A51, nunca blanco pleno
     [ ] kickers MAYÚSCULAS amarillo tracking 3px, sin punto final
     [ ] amarillo #FFF100 solo como ACENTO (kickers, números, 1 palabra del título, línea)
     [ ] texto blanco con jerarquía de opacidad (100% títulos / 72% cuerpo / 55% notas / 38% pie)
     [ ] tarjetas de vidrio (blanco 5% + borde blanco 12%), radios 14–18px
     [ ] estados: verde #5FE0A0 = bien/sube · ámbar #FFD24A = a reforzar (con ▲/▼, nunca color solo)
     [ ] tono propositivo: "el foco del semestre", NUNCA "ALERTA" ni rojo de alarma
     [ ] sin mascota, sin Nunito, sin emojis

  Banco de fotos oficial (grading azul+dorado ya horneado, listas para overlay):
    https://brandbook.prouniversitas.cl/brand/fotos/scene-01.jpg          (corredora, hora azul — hero/portada)
    https://brandbook.prouniversitas.cl/brand/fotos/scene-02.jpg          (corredora + letreros carreras — portada informes)
    https://brandbook.prouniversitas.cl/brand/fotos/nosotros-hero.jpg     (equipo/sala — cierre, institucional)
    https://brandbook.prouniversitas.cl/brand/fotos/profesores-hero.jpg   (profesor en clase — académico)
    https://brandbook.prouniversitas.cl/brand/fotos/metodo-bg.jpg         (estudio nocturno — método/plan)
    https://brandbook.prouniversitas.cl/brand/fotos/sede-vina.jpg         (sede Viña — presencial/colegios)
    https://brandbook.prouniversitas.cl/brand/fotos/banner-experience.jpg (sala de clases — programas)
  Logos oficiales:
    https://brandbook.prouniversitas.cl/brand/logos/logo-horizontal-blanco.png  (sobre navy)
    https://brandbook.prouniversitas.cl/brand/logos/logo-horizontal.png         (sobre blanco)
  Fuentes self-hosted (si no puedes usar Google Fonts CDN):
    https://brandbook.prouniversitas.cl/brand/fonts/poppins/Poppins-SemiBold.ttf (600)
    https://brandbook.prouniversitas.cl/brand/fonts/poppins/Poppins-Bold.ttf     (700)
    https://brandbook.prouniversitas.cl/brand/fonts/poppins/Poppins-ExtraBold.ttf(800)
    https://brandbook.prouniversitas.cl/brand/fonts/inter/Inter-Regular.ttf … Inter-Bold.ttf (400–700)
-->
<meta charset="utf-8">
<title>Documento — PRO Universitas · PreUCV</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  @page { size: A4; margin: 0; }
  * { box-sizing: border-box; -webkit-print-color-adjust: exact; print-color-adjust: exact; margin: 0; }

  /* ── Tokens del sitio (prouniversitas.cl, valores de producción) ─────────── */
  :root {
    --yellow: #FFF100; --yellow-soft: #FFF7A8;
    --blue: #003C72;            /* azul institucional (secciones alternas, texto sobre amarillo) */
    --deep: #002A51;            /* navy profundo — FONDO BASE de todo documento */
    --deeper: #001A31;          /* solo para gradientes de overlay */
    --cyan: #02B0BB; --cyan-soft: #D5F3F5;
    --cream: #FAF8F5;           /* fondo claro de mockups de la app (no de páginas) */
    --ink: #FFFFFF; --ink-72: rgba(255,255,255,.72); --ink-55: rgba(255,255,255,.55); --ink-38: rgba(255,255,255,.38);
    --glass: rgba(255,255,255,.05); --glass-border: rgba(255,255,255,.12);
    --hairline: rgba(255,255,255,.10);
    --good: #5FE0A0; --warn: #FFD24A;   /* estados: siempre acompañados de ▲/▼ o cifra */
    --r-lg: 10px; --r-xl: 14px; --r-2xl: 18px; --r-3xl: 22px;  /* radios reales del sitio */
  }
  body { font-family: "Inter", system-ui, sans-serif; color: var(--ink); background: var(--deep); }
  .page { width: 210mm; height: 296.5mm; page-break-after: always; position: relative; overflow: hidden; background: var(--deep); }
  .page:last-child { page-break-after: avoid; }
  .pad { padding: 12mm 14mm; position: relative; z-index: 3; }

  h1, h2, h3, .num { font-family: "Poppins", "Inter", sans-serif; }

  /* Kicker/eyebrow — la firma tipográfica del sitio */
  .eyebrow { font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--yellow); }
  .eyebrow.sm { font-size: 8.5px; letter-spacing: 2.4px; }

  /* Lockup PRO (validado contra el logo oficial; para imagen usa logo-horizontal-blanco.png) */
  .lockup { display: inline-flex; align-items: center; gap: 8px; }
  .lockup .badge { background: var(--yellow); color: var(--blue); font-family: "Poppins", sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .5px; padding: 3px 9px 4px; border-radius: 9px; line-height: 1; }
  .lockup .word { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 16px; color: #fff; letter-spacing: .2px; }
  .lockup .word small { display: block; font-size: 7.5px; font-weight: 600; letter-spacing: 3.5px; color: var(--ink-55); margin-top: 1px; }
  .lockup.mini .badge { font-size: 11px; padding: 2.5px 7px 3.5px; border-radius: 7px; }
  .lockup.mini .word { font-size: 12px; }
  .lockup.mini .word small { font-size: 6px; letter-spacing: 2.6px; }

  /* Glows del sitio: círculos cyan/amarillo al 10–15%, blur fuerte, sangrando del marco */
  .glow { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 1; pointer-events: none; }

  /* Línea de acento (firma de heros y banners del sitio) */
  .accent-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,241,0,.4), transparent); }

  /* ═══ PORTADA ═══ */
  .cover-img { position: absolute; inset: 0; z-index: 0; }
  .cover-img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
  .cover-shade { position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,26,49,.62) 0%, rgba(0,32,60,.38) 34%, rgba(0,42,81,.86) 66%, #002A51 84%); }
  .cover-side { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,26,49,.55), rgba(0,26,49,0) 55%); }
  .cover { position: absolute; inset: 0; z-index: 3; padding: 13mm 15mm; display: flex; flex-direction: column; }
  .cover-top { display: flex; justify-content: space-between; align-items: flex-start; }
  .cover-date { font-size: 9.5px; color: var(--ink-55); font-weight: 500; }
  .cover-bottom { margin-top: auto; }
  .cover h1 { font-size: 39px; font-weight: 800; line-height: 1.08; letter-spacing: -.5px; margin: 7px 0 7px; }
  .cover h1 em { font-style: normal; color: var(--yellow); }
  .cover .who { font-size: 12.5px; color: var(--ink-72); font-weight: 500; }
  .cover .who b { color: #fff; font-weight: 600; }
  .cover-line { width: 64px; height: 4px; background: var(--yellow); border-radius: 2px; margin: 15px 0 17px; }
  .cover-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cstat { background: rgba(2,20,40,.55); border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: 11px 13px; backdrop-filter: blur(4px); }
  .cstat .v { font-family: "Poppins", sans-serif; font-size: 19px; font-weight: 700; color: #fff; }
  .cstat .v em { font-style: normal; color: var(--yellow); }
  .cstat .l { font-size: 9px; color: var(--ink-55); margin-top: 3px; line-height: 1.35; }
  .cover-foot { display: flex; justify-content: space-between; font-size: 8.5px; color: var(--ink-38); margin-top: 13px; }

  /* ═══ PÁGINAS DE CONTENIDO ═══ */
  .head-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
  h2 { font-size: 25px; font-weight: 700; letter-spacing: -.3px; margin-top: 4px; }
  h2 em { font-style: normal; color: var(--yellow); }
  .lead { font-size: 11px; color: var(--ink-72); line-height: 1.55; max-width: 168mm; margin-top: 5px; }
  .lead b { color: #fff; font-weight: 600; }
  .sec { font-family: "Poppins", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--yellow); margin: 19px 0 9px; }

  /* Tarjeta de vidrio — la superficie estándar del sitio */
  .card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-2xl); padding: 13px 15px; position: relative; z-index: 3; }

  /* KPI con barra superior de color (patrón TarjetaValor del sitio) */
  .kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .kpi { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: 11px 13px; position: relative; overflow: hidden; }
  .kpi .kt { border-radius: 3px 3px 0 0; height: 3px; position: absolute; top: 0; left: 0; right: 0; }
  .kpi .kl { font-size: 8px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--ink-55); font-weight: 600; }
  .kpi .kv { font-family: "Poppins", sans-serif; font-size: 22px; font-weight: 800; margin-top: 3px; line-height: 1; }
  .kpi .kv small { font-size: 11px; font-weight: 700; }
  .kpi .kv em { font-style: normal; color: var(--yellow); }
  .kpi .kd { font-size: 8.5px; color: var(--ink-72); margin-top: 4px; line-height: 1.35; }

  /* Chip de icono (receta exacta del sitio: fondo color/15, ring color/30) */
  .feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .fitem { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-2xl); padding: 13px 14px; }
  .ichip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-lg); margin-bottom: 8px; }
  .ichip svg { width: 17px; height: 17px; }
  .ichip.yellow { background: rgba(255,241,0,.15); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255,241,0,.3); }
  .ichip.cyan { background: rgba(2,176,187,.15); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(2,176,187,.3); }
  .fitem .t { font-family: "Poppins", sans-serif; font-size: 11px; font-weight: 700; }
  .fitem p { font-size: 9px; color: var(--ink-72); line-height: 1.5; margin-top: 3px; }

  /* Tabla estilo sitio: headers uppercase tenues, hairlines, números tabulares */
  table.vals { width: 100%; border-collapse: collapse; font-size: 9.6px; margin-top: 9px; }
  table.vals th { text-align: right; font-size: 7.8px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-38); font-weight: 600; padding: 3px 10px 4px 0; border-bottom: 1px solid var(--glass-border); }
  table.vals th:first-child { text-align: left; }
  table.vals td { padding: 5.5px 10px 5.5px 0; border-bottom: 1px solid var(--hairline); text-align: right; color: var(--ink-72); font-variant-numeric: tabular-nums; }
  table.vals td:first-child { text-align: left; font-weight: 600; color: #fff; }
  table.vals tr:last-child td { border-bottom: none; }
  .hl-good { color: var(--good); font-weight: 700; } .hl-warn { color: var(--warn); font-weight: 700; }

  /* Barras de progreso */
  .brow { display: grid; grid-template-columns: 118px 1fr 74px; align-items: center; gap: 11px; padding: 6.5px 0; border-bottom: 1px solid var(--hairline); }
  .brow:last-child { border-bottom: none; }
  .brow .bn { font-size: 10px; font-weight: 600; color: #fff; }
  .btrack { display: block; height: 15px; background: rgba(255,255,255,.06); border-radius: 8px; position: relative; overflow: hidden; }
  .bfill { display: block; position: absolute; top: 0; left: 0; bottom: 0; border-radius: 8px; }
  .bval { text-align: right; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 12px; }
  .bval small { display: block; font-family: "Inter", sans-serif; font-weight: 500; font-size: 8px; color: var(--ink-38); }

  /* Callout "en simple" (borde izquierdo amarillo, como blockquote del sitio) */
  .insimple { border-left: 3px solid var(--yellow); border-radius: 4px var(--r-xl) var(--r-xl) 4px; background: var(--glass); padding: 11px 14px; }
  .insimple .t { font-family: "Poppins", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--yellow); margin-bottom: 4px; }
  .insimple p { font-size: 10.6px; line-height: 1.6; color: var(--ink-72); }
  .insimple p b { color: #fff; font-weight: 600; }

  .foot { position: absolute; bottom: 7mm; left: 14mm; right: 14mm; display: flex; justify-content: space-between; font-size: 8px; color: var(--ink-38); border-top: 1px solid var(--hairline); padding-top: 5px; z-index: 4; }

  /* ═══ CIERRE ═══ */
  .close-img { position: absolute; top: 0; left: 0; right: 0; height: 52%; z-index: 0; }
  .close-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
  .close-shade { position: absolute; top: 0; left: 0; right: 0; height: 52%; z-index: 1;
    background: linear-gradient(180deg, rgba(0,26,49,.42), rgba(0,42,81,.55) 62%, #002A51 96%); }
  .close { position: absolute; inset: 0; z-index: 3; padding: 13mm 15mm; display: flex; flex-direction: column; }
  .close .big { font-family: "Poppins", sans-serif; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.4px; }
  .close .big em { font-style: normal; color: var(--yellow); }
  .contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .citem { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-xl); padding: 11px 13px; }
  .citem .l { font-size: 8px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--ink-55); font-weight: 600; }
  .citem .v { font-size: 11px; font-weight: 600; color: #fff; margin-top: 3px; }
  .citem .v.yellow { color: var(--yellow); }
</style>
</head>
<body>

<!-- ════════════════ PÁGINA 1 · PORTADA ════════════════ -->
<div class="page">
  <div class="cover-img"><img src="https://brandbook.prouniversitas.cl/brand/fotos/scene-02.jpg" alt=""></div>
  <div class="cover-shade"></div>
  <div class="cover-side"></div>
  <div class="cover">
    <div class="cover-top">
      <span class="lockup"><span class="badge">PRO</span><span class="word">Universitas®<small>PREUCV</small></span></span>
      <span class="cover-date">Julio 2026</span>
    </div>
    <div class="cover-bottom">
      <div class="eyebrow">Informe ejecutivo · Primer semestre 2026</div>
      <h1>Un título que ordena<br>la <em>historia</em></h1>
      <div class="who"><b>Subtítulo del documento</b> · Programa Dúo · Generación PAES 2026 · Matemática · Historia</div>
      <div class="cover-line"></div>
      <div class="cover-stats">
        <div class="cstat"><div class="v">530 <em>pts</em></div><div class="l">El dato más fuerte del documento — su mejor resultado</div></div>
        <div class="cstat"><div class="v">+54 <em>pts</em></div><div class="l">El avance: lo que subió entre mediciones</div></div>
        <div class="cstat"><div class="v">Constancia</div><div class="l">El foco del período: una palabra que orienta la acción</div></div>
      </div>
      <div class="cover-foot"><span>Preparado por el Equipo Académico · PRO Universitas — PreUCV</span><span>El PRE que es PRO</span></div>
    </div>
  </div>
</div>

<!-- ════════════════ PÁGINA 2 · CONTENIDO (patrones del sitio) ════════════════ -->
<div class="page">
  <div class="glow" style="width:340px;height:340px;background:rgba(2,176,187,.12);top:-120px;right:-120px;"></div>
  <div class="glow" style="width:280px;height:280px;background:rgba(255,241,0,.08);bottom:-100px;left:-100px;"></div>
  <div class="pad">
    <div class="head-row">
      <div>
        <div class="eyebrow">Sección · Cómo va</div>
        <h2>Los datos, contados <em>en simple</em></h2>
        <div class="lead">La bajada explica en una o dos frases qué va a encontrar el lector. <b>Lo importante en negrita blanca.</b> Máximo tres líneas.</div>
      </div>
      <span class="lockup mini"><span class="badge">PRO</span><span class="word">Universitas®<small>PREUCV</small></span></span>
    </div>

    <div class="sec">Indicadores clave</div>
    <div class="kpi3">
      <div class="kpi"><div class="kt" style="background:var(--yellow)"></div><div class="kl">Indicador A</div><div class="kv">86<small>%</small></div><div class="kd">Qué significa este número, en una frase.</div></div>
      <div class="kpi"><div class="kt" style="background:var(--cyan)"></div><div class="kl">Indicador B</div><div class="kv">612 <em>pts</em></div><div class="kd">Los números grandes van en Poppins 800.</div></div>
      <div class="kpi"><div class="kt" style="background:rgba(255,255,255,.35)"></div><div class="kl">Indicador C</div><div class="kv">24<small>h</small></div><div class="kd">Barra superior: amarillo, cyan o blanco.</div></div>
    </div>

    <div class="sec">Tres pilares (chips de icono Lucide)</div>
    <div class="feat">
      <div class="fitem">
        <span class="ichip yellow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span>
        <div class="t">Pilar uno</div><p>Icono Lucide stroke 2 en chip amarillo 15% con ring 30%. Nunca un emoji.</p>
      </div>
      <div class="fitem">
        <span class="ichip cyan"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg></span>
        <div class="t">Pilar dos</div><p>Variante cyan para alternar. Título Poppins 700, texto Inter al 72%.</p>
      </div>
      <div class="fitem">
        <span class="ichip yellow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg></span>
        <div class="t">Pilar tres</div><p>Más iconos en /brand/iconos/ui/ (35 SVG oficiales listos para pegar).</p>
      </div>
    </div>

    <div class="sec">Tabla de datos</div>
    <div class="card" style="padding-top:6px;">
      <table class="vals">
        <tr><th>Concepto</th><th>Ene</th><th>Abr</th><th>Jul</th><th>Δ</th></tr>
        <tr><td>Fila principal</td><td>480</td><td>512</td><td>530</td><td class="hl-good">▲ +50</td></tr>
        <tr><td>Segunda fila</td><td>455</td><td>470</td><td>509</td><td class="hl-good">▲ +54</td></tr>
        <tr><td>Tercera fila</td><td>402</td><td>398</td><td>395</td><td class="hl-warn">▼ −7</td></tr>
      </table>
    </div>

    <div class="sec">Avance por área</div>
    <div class="card" style="padding-top:4px;padding-bottom:8px;">
      <div class="brow"><span class="bn">Área uno</span><span class="btrack"><span class="bfill" style="width:86%;background:var(--cyan)"></span></span><span class="bval">86%<small>asistencia</small></span></div>
      <div class="brow"><span class="bn">Área dos</span><span class="btrack"><span class="bfill" style="width:64%;background:var(--yellow)"></span></span><span class="bval">64%<small>avance plan</small></span></div>
    </div>

    <div class="sec">En simple</div>
    <div class="insimple">
      <div class="t">Qué significa esto</div>
      <p>Cierra cada página con un párrafo que traduce los datos a una decisión. <b>Verde ▲ = va bien; ámbar ▼ = el foco del período</b> — nunca "alerta", nunca rojo.</p>
    </div>
  </div>
  <div class="foot"><span>PRO Universitas — PreUCV · Documento interno</span><span>02</span></div>
</div>

<!-- ════════════════ PÁGINA 3 · CIERRE ════════════════ -->
<div class="page">
  <div class="close-img"><img src="https://brandbook.prouniversitas.cl/brand/fotos/nosotros-hero.jpg" alt=""></div>
  <div class="close-shade"></div>
  <div class="close">
    <span class="lockup"><span class="badge">PRO</span><span class="word">Universitas®<small>PREUCV</small></span></span>
    <div style="margin-top:auto;">
      <div class="eyebrow">El método</div>
      <div class="big" style="margin-top:6px;">No estudias más.<br>Estudias <em>lo que te falta.</em></div>
      <div class="accent-line" style="margin:14px 0 16px;"></div>
      <div class="contact">
        <div class="citem"><div class="l">Sitio</div><div class="v yellow">www.prouniversitas.cl</div></div>
        <div class="citem"><div class="l">Correo</div><div class="v">contacto@pre-ucv.cl</div></div>
        <div class="citem"><div class="l">Sedes</div><div class="v">Santiago · Viña del Mar</div></div>
      </div>
      <div class="cover-foot" style="margin-top:14px;"><span>© 2026 PRO Universitas — PreUCV. Todos los derechos reservados.</span><span>El PRE que es PRO</span></div>
    </div>
  </div>
</div>

</body>
</html>

```