---
version: alpha
name: Teleton Peru
description: A mission-driven-solidarity charity interface whose signature move is the "Cada sol" anaphora — quantified hope, where every donated sol is pinned to a concrete impact claim. The system anchors on a single high-voltage brand red ({colors.primary} — #dc0d15) set against a white canvas, with a steel-blue secondary accent ({colors.steelblue}) and a Poppins body / Montserrat + Asap display type pairing. Brand voltage is the live donation apparatus — an animated diagonal-stripe progress bar ({component.progress-bar}) tracking the campaign goal, large impact-counter stats ({component.impact-stat}), and a persistent floating donate button ({component.floating-donate-btn}). Single-page React shell; all routing is client-side. NOTE: dark-mode tokens were not present — this is a light-only surface.
source-url: https://teleton.pe/
source-scraped: 2026-05-28
render-mode: static

voice:
  archetype: mission-driven-solidarity
  signature-move: "'Cada sol' anaphora — every donated sol pinned to a concrete impact claim ('Cada sol genera un impacto real')"
  hero-headline: "Teletón, La Hacemos Todos"
  cta-verb: "Dona"
  dimensions:
    technical-aspirational: 4
    clinical-warm: 4
    terse-rich: 3
    earnest-witty: 1
    generalist-specialist: 4

signature-components:
  - progress-bar
  - impact-stat
  - floating-donate-btn

motion:
  transitions:
    - "width 1.2s cubic-bezier(0.4, 0, 0.2, 1)"
    - "left 1.2s cubic-bezier(0.4, 0, 0.2, 1)"
    - "opacity 0.4s ease, transform 0.2s, box-shadow 0.2s"
    - "opacity 0.2s"
  animations:
    - "moveStripes 0.8s linear infinite"
    - "modalIn 0.25s ease"
  easings:
    - "cubic-bezier(0.4, 0, 0.2, 1)"

breakpoints:
  xs: 417px
  sm: 480px
  modal: 520px
  md: 768px
  tablet: 820px
  lg: 1024px
  xl: 1440px

colors:
  primary: "#dc0d15"
  primary-soft: "#e94b52"
  primary-tint: "#f28b8e"
  steelblue: "#0066b1"
  powderblue: "#4da6d4"
  # accent-teal: "#88cdd3"  # single-use (1×) — demoted; soft teal used once on a decorative splotch
  ink: "#000000"
  ink-strong: "#111111"
  muted-label: "#555555"
  muted: "#666666"
  on-primary: "#ffffff"
  canvas: "#ffffff"
  track: "#e0e0e0"
  hairline: "#eeeeee"

typography:
  display-xl:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0
  display-lg:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: 0
  display-md:
    fontFamily: "Asap, sans-serif"
    fontSize: 47px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0
  display-sm:
    fontFamily: "Asap, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0
  stat-figure:
    fontFamily: "Montserrat, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: 0
  heading-lg:
    fontFamily: "Asap, sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: "Poppins, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: "Poppins, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-md:
    fontFamily: "Poppins, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0
  caption:
    fontFamily: "Poppins, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  micro:
    fontFamily: "Poppins, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  button:
    fontFamily: "Poppins, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0
  account-number:
    fontFamily: "Poppins, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0

rounded:
  sm: 6px
  md: 10px
  lg: 12px
  xl: 20px
  full: 9999px

spacing:
  xs: 10px
  sm: 20px
  md: 24px
  lg: 30px
  xl: 36px
  xxl: 40px
  section: 60px

components:
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.heading-sm}"
    height: 80px
  nav-donate-btn:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  button-primary-soft:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  floating-donate-btn:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 14px 28px
  hero-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.display-xl}"
    padding: 60px
  progress-bar:
    trackColor: "{colors.track}"
    fillColor: "{colors.primary}"
    fillStripeColor: "{colors.primary-tint}"
    rounded: "{rounded.xl}"
    height: 28px
  progress-goal-label:
    backgroundColor: transparent
    textColor: "{colors.ink-strong}"
    typography: "{typography.heading-md}"
  impact-stat:
    backgroundColor: "{colors.canvas}"
    figureColor: "{colors.primary}"
    labelColor: "{colors.ink-strong}"
    figureType: "{typography.stat-figure}"
    labelType: "{typography.body-lg}"
  mission-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    headingType: "{typography.heading-lg}"
    bodyType: "{typography.body-lg}"
    padding: 60px
  donation-channel-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.xl}"
    padding: 24px
    shadow: "0px 4px 20px rgba(0, 0, 0, 0.1)"
  bank-account-modal:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    accentBorderColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 40px
    shadow: "0 8px 40px rgba(0,0,0,0.25)"
    labelType: "{typography.caption}"
    numberType: "{typography.account-number}"
  qr-code-tile:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 20px
  bank-logo-frame:
    backgroundColor: "{colors.canvas}"
    accentBorderColor: "{colors.primary}"
    maxWidth: 180px
  ver-cuentas-link:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button}"
  story-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-strong}"
    headingType: "{typography.heading-md}"
    bodyType: "{typography.body-md}"
    rounded: "{rounded.xl}"
  trust-band:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.body-lg}"
    padding: 60px
  download-link:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.steelblue}"
    typography: "{typography.button}"
    rounded: "{rounded.xl}"
    padding: 10px 24px
  sponsor-logo-strip:
    backgroundColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    padding: 40px
  decorative-splotch:
    backgroundColor: "{colors.primary}"
  social-link-row:
    backgroundColor: transparent
    iconColor: "{colors.primary}"
    typography: "{typography.body-md}"
  video-modal:
    backgroundColor: "#000000"
    rounded: "{rounded.lg}"
    shadow: "0 8px 40px rgba(0,0,0,0.6)"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.muted}"
    typography: "{typography.body-md}"
    padding: 40px

refined: []

review-first:
  - "Typography § Hierarchy — only six raw font-size values carried explicit declarations in index.css; the display ladder (display-xl 72px through heading levels) was reconstructed from the --fs-20…--fs-72 variable scale plus ad-hoc inline sizes, then mapped to the three faces by convention (Montserrat for the biggest figures, Asap for mid display, Poppins for body). The exact face-to-size pairing per heading is inferred, not declared. Verify against the rendered hero once the React app loads."
  - "Layout § Grid & Container — the entire site is a client-side-rendered single-page React shell, so no server-rendered section markup or container widths were observable; the max-width and column counts in this section are convention-based estimates, not extracted tokens. Confirm in the live DOM before building to spec."
  - "Components § impact-stat and story-card — the impact counters (128,826 / 732) and Historias de vida cards are present in the copy and class names, but their exact card chrome (border, shadow, internal padding) was not in the static CSS; treatment is synthesized from the donation-channel-card pattern. Re-scrape with a headless browser if these are built at scale for the raffle."
---

## Overview

Teleton Peru is a **mission-driven-solidarity** donation surface, and its defining rhetorical move is the **"Cada sol" anaphora** — every donated sol is pinned to a concrete impact claim ("Cada sol genera un impacto real", "Cada sol donado se convirtió en terapias, atención y esperanza"). The visual system exists to make that promise legible: a single high-voltage brand red against a clean white canvas, with the live donation apparatus front and center.

The brand voltage is **the donation machinery itself**, not decoration. Three components carry it: the **animated diagonal-stripe progress bar** (`{component.progress-bar}`) that tracks the campaign goal in real time with a `{colors.primary}` → `{colors.primary-tint}` repeating-stripe fill; the **large impact-counter stats** (`{component.impact-stat}`) rendering figures like "128,826 Atenciones realizadas" in red Montserrat; and a **persistent floating donate button** (`{component.floating-donate-btn}`) that slides into view and follows the scroll. Where a SaaS brand shows product chrome, Teleton shows the act of giving.

The color story is deliberately simple: one **brand red** (`{colors.primary}` — #dc0d15) does almost all the work — every CTA, the progress fill, the stat figures, the modal accent borders. A **steel-blue** (`{colors.steelblue}` — #0066b1) and a softer **powder-blue** (`{colors.powderblue}`) provide the only secondary accents, used on download links and supporting UI. Everything else is white canvas, near-black ink, and gray hairlines. This is single-accent discipline — the red is the campaign's heartbeat.

Type runs a three-face pairing: **Poppins** (400/500/700) for all body, navigation, and UI; **Montserrat** (700) for the heaviest display figures and impact counters; **Asap** (700) for mid-tier display headings. The combination reads warm, institutional, and human-centered — earnest throughout, never witty.

NOTE: the static scrape exposed a clean `:root` token block (the firm foundation of this document) but the site is a **client-side-rendered React single-page app** — every route (`/dona`, `/nosotros`, `/historias`, etc.) returns the identical shell, so structural layout was reconstructed from class names and the inline `<style>` block rather than server-rendered markup. No dark-mode tokens exist; this is a light-only surface.

**Key Characteristics:**
- **Animated stripe progress bar** (`{component.progress-bar}`) — a 28px-tall `{colors.track}` track with a `{colors.primary}`/`{colors.primary-tint}` repeating-diagonal-stripe fill that animates left-to-right (`moveStripes` 0.8s linear infinite) and grows on `width 1.2s {motion.easings.0}`. The single most-distinctive element; the campaign's live pulse.
- **Impact-counter stats** (`{component.impact-stat}`) — oversized red Montserrat figures (`{typography.stat-figure}` — 40px/700) over Poppins labels ("Atenciones realizadas a nivel nacional"). Quantified hope made visual.
- **Floating donate button** (`{component.floating-donate-btn}`) — a pill (`{rounded.full}`) in `{colors.primary}` that fades and slides in as the user scrolls, keeping "¡Dona ahora!" always one tap away.
- Single brand red (`{colors.primary}` — #dc0d15) carries every CTA, progress fill, stat figure, and modal accent. Steel-blue (`{colors.steelblue}`) is the only secondary accent.
- White canvas (`{colors.canvas}`) throughout — clean, bright, optimistic; no dark surfaces anywhere.
- Three-face type: Poppins body, Montserrat (700) for big figures, Asap (700) for mid display.
- Bank-account donation modals (`{component.bank-account-modal}`) with a red accent border and monospace-feeling account numbers — the practical core of a Peru donation flow (Yape, BCP, Interbank, Izipay, PayPal).
- Generous `{rounded.xl}` (20px) corners dominate — buttons, cards, and the progress bar all share the soft, friendly radius.
- Section rhythm `{spacing.section}` (60px) — tighter than a typical SaaS marketing page, keeping the donation CTAs close together.

## Colors

### Brand & Accent
- **Primary / Brand Red** (`{colors.primary}` — #dc0d15): The Teleton red. The campaign's heartbeat — every primary CTA, the progress-bar fill, all impact-stat figures, modal accent borders, the floating donate button. The most-used color on the page by far.
- **Primary Soft** (`{colors.primary-soft}` — #e94b52): A lighter red (token `--color-red-100`) for secondary red surfaces and softer CTA variants.
- **Primary Tint** (`{colors.primary-tint}` — #f28b8e): A pale pink used only inside the progress-bar's diagonal stripes, alternating with `{colors.primary}` to create the animated barber-pole effect. Signature to `{component.progress-bar}`.
- **Steel Blue** (`{colors.steelblue}` — #0066b1): The primary secondary accent (token `--color-steelblue`, 5 uses). Download links, supporting UI, occasional section accents.
- **Powder Blue** (`{colors.powderblue}` — #4da6d4): A lighter companion blue (token `--color-powderblue`) for softer secondary moments.

### Surface
- **Canvas** (`{colors.canvas}` — #ffffff): The single page floor. Pure white — bright and optimistic, no tint, no dark variant.
- **Track** (`{colors.track}` — #e0e0e0): The empty (unfilled) portion of the progress bar. Light neutral gray.
- **Hairline** (`{colors.hairline}` — #eeeeee): 1px dividers inside the bank-account modal rows.

### Text
- **Ink** (`{colors.ink}` — #000000): True black, used on the strongest figures and a few high-contrast labels.
- **Ink Strong** (`{colors.ink-strong}` — #111111): Headlines and primary text. (Consolidated from the modal's near-black #111/#222 pair — they were within RGB-distance Δ<20.)
- **Muted Label** (`{colors.muted-label}` — #555555): Field labels inside the bank-account modal ("Cuenta Soles:", "CCI Dólares:").
- **Muted** (`{colors.muted}` — #666666): Secondary text, captions, footer copy, QR instructions (token `--color-dimgray`).
- **On Primary** (`{colors.on-primary}` — #ffffff): White text on all red CTAs and the floating button.

### Note on Consolidation
Raw extraction yielded 14 distinct hex values plus a single-use soft teal (#88cdd3) on a decorative splotch, which was demoted to a YAML comment per the single-use rule. The two near-black modal text shades (#111111, #222222) were within RGB-distance Δ<20 and consolidated into `{colors.ink-strong}`. Final palette: 14 tokens — dominated by one brand red doing the heavy lifting.

## Typography

### Font Family
The system loads three Google Fonts: **Poppins** (weights 400/500/700) for all body, navigation, buttons, and UI; **Montserrat** (700) for the heaviest display figures and impact counters; **Asap** (700) for mid-tier display headings. All three are confirmed from `font-family` declarations and `<link>` tags pointing at `fonts.googleapis.com`. All are open-source and freely available, so no substitutes are needed.

The display/body split:
- Montserrat 700 → biggest display figures, impact-stat counters (`{typography.stat-figure}`)
- Asap 700 → mid display headings, mission-band headings
- Poppins 400/500/700 → body, navigation, buttons, captions, account numbers

### Hierarchy

| Token | Size | Weight | Line Height | Use |
|---|---|---|---|---|
| `{typography.display-xl}` | 72px | 700 | 1.0 | Hero display (`--fs-72`) — Montserrat [inferred face] |
| `{typography.display-lg}` | 60px | 700 | 1.05 | Large section heads (`--fs-60`) — Montserrat |
| `{typography.display-md}` | 47px | 700 | 1.1 | Sub-section heads — Asap |
| `{typography.display-sm}` | 36px | 700 | 1.15 | Smaller section heads (`--fs-36`) — Asap |
| `{typography.stat-figure}` | 40px | 700 | 1.1 | Impact counters ("128,826", "732") — Montserrat |
| `{typography.heading-lg}` | 34px | 700 | 1.2 | Mission-band headings — Asap |
| `{typography.heading-md}` | 24px | 700 | 1.3 | Card titles, "Así vamos:" goal label (`--fs-24`) — Poppins |
| `{typography.heading-sm}` | 20px | 500 | 1.4 | Nav items, sub-labels (`--fs-20`) — Poppins |
| `{typography.body-lg}` | 18px | 400 | 1.6 | Default running text — Poppins (most-used size, 7×) |
| `{typography.body-md}` | 14px | 400 | 1.55 | Secondary body, footer — Poppins |
| `{typography.caption}` | 13px | 400 | 1.4 | Modal field labels — Poppins |
| `{typography.micro}` | 10px | 400 | 1.4 | Fine print — Poppins |
| `{typography.button}` | 18px | 700 | 1.0 | Button labels, "Ver Cuentas" links — Poppins |
| `{typography.account-number}` | 13px | 700 | 1.4 | Bank account numbers (`191-011-11-11-0-33`) — Poppins bold |

### Principles
Display weight is 700 across the board — this is a loud, confident, campaign voice, not an editorial whisper. Body type sits at Poppins 400 with generous 1.55-1.6 line-height for readability (18px is the dominant body size). The impact figures use Montserrat 700 to feel weighty and official; the mission and section headings use Asap 700 for slightly warmer character. Account numbers are set in Poppins 700 with `word-break: break-all` so long Peru CCI strings wrap cleanly inside the modal.

### Note on Font Sizes
Only six font-size values were declared as `:root` variables (`--fs-20` through `--fs-72`); the remaining ad-hoc sizes (47px, 40px, 34px, 28px, etc.) were harvested from inline declarations. The face-to-heading mapping (which face pairs with which size) is partly inferred — see `review-first`.

## Layout

### Spacing System
- **Base unit:** 10px (the scale steps in 10px increments — `{spacing.xs}` 10px through `{spacing.section}` 60px).
- **Tokens:** `{spacing.xs}` 10px · `{spacing.sm}` 20px · `{spacing.md}` 24px · `{spacing.lg}` 30px · `{spacing.xl}` 36px · `{spacing.xxl}` 40px · `{spacing.section}` 60px. All extracted from the `--padding-*` and `--gap-*` variable families.
- **Section padding:** `{spacing.section}` (60px) — tighter than typical SaaS, keeping donation CTAs densely stacked.
- **Card / modal internal padding:** `{spacing.xxl}` (40px) for the bank-account modal; `{spacing.md}` (24px) for donation-channel cards.
- **Gaps:** card-to-card and column gaps run the `--gap-*` scale (10/20/30/40/60px).

### Grid & Container
- **Max content width:** ~1200px centered [inferred — not observable in the SPA shell].
- **Donation channels:** a multi-column grid of channel cards (Yape / BCP / Interbank / Izipay / PayPal), each with a logo, instruction line, and "Ver Cuentas" link.
- **Impact stats:** 2-up figure + label blocks ("128,826 Atenciones" / "732 Niños beneficiados").
- **Bank modal:** a 2-column internal layout — logo frame on the left (with a red bottom-border), account-number rows on the right.

### Whitespace Philosophy
The page is dense by charity-campaign standards — the goal is to keep the donate action and the running total always in view. The 60px section rhythm is tighter than a marketing site's typical 96px. White canvas provides the breathing room; the red elements punctuate it.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Body sections, nav, hero, mission bands |
| Standard drop | `{component.donation-channel-card}` shadow `0px 4px 20px rgba(0,0,0,0.1)` (token `--shadow-drop`) | Donation-channel cards, raised tiles |
| Tight drop | `0px 4px 12px rgba(0,0,0,0.15)` (token `--shadow-drop-1`) | Smaller raised UI, hover-elevated buttons |
| Modal | `0 8px 40px rgba(0,0,0,0.25)` over a `rgba(0,0,0,0.55)` overlay | `{component.bank-account-modal}` |
| Video modal | `0 8px 40px rgba(0,0,0,0.6)` over a `rgba(0,0,0,0.85)` overlay | `{component.video-modal}` |

The elevation philosophy is **two canonical drop shadows** (`--shadow-drop`, `--shadow-drop-1`) for surfaces, escalating to heavier shadows + dark scrims for modal layers. Most of the page is flat-on-white; depth appears at the donation cards and the overlay modals.

### Decorative Depth
- **Paint splotches** (`{component.decorative-splotch}`, class `mancha`) — organic red blob shapes used as decorative accents behind sections.
- **Rotated heart** (class `corazon-img`) — a heart glyph rotated 15deg, placed inline near donation copy. (In source it is a pictographic heart; treat as a heart-icon asset, never as a literal emoji in editorial output.)
- **Separator icons** (class `separador-h-icon`) — horizontal section dividers, the most-repeated decorative element (10 uses).

## Shapes

### Border Radius Scale

| Token | Value | Use |
|---|---|---|
| `{rounded.sm}` | 6px | Smallest inline elements |
| `{rounded.md}` | 10px | Secondary cards, small tiles (token `--br-10`) |
| `{rounded.lg}` | 12px | Bank modal box, video modal |
| `{rounded.xl}` | 20px | Dominant radius — buttons, progress bar, donation cards (token `--br-20`, 32 uses) |
| `{rounded.full}` | 9999px / 50% | Floating donate button, QR frames, icon circles |

`{rounded.xl}` (20px) is the system's signature corner — it appears 32 times across buttons, the progress bar, and content cards, giving the whole surface a soft, friendly, approachable feel appropriate to a children's charity.

### Photography & Illustrations
- Real photography of beneficiary children + families (the emotional core — "Historias de vida" story cards).
- Bank and partner logos (BCP, Yape, Interbank, Izipay, PayPal, Vivanda, TV Perú) rendered inside `{component.bank-logo-frame}` containers.
- QR codes for Yape and Izipay donations, framed in `{component.qr-code-tile}`.
- Decorative red paint-splotch shapes (`mancha`) and a rotated heart accent.

## Components

### Top Navigation

**`top-nav`** — White nav bar, 80px tall (token `--height-80`). Carries the Teleton logo at left, horizontal menu ("Dona ahora", "Resultados", "Historias", "Contacto") in `{typography.heading-sm}` (Poppins 20px / 500), and a `{component.nav-donate-btn}` at right. Text color `{colors.ink-strong}`.

### Buttons

**`nav-donate-btn`** / **`button-primary`** — The signature red CTA. Background `{colors.primary}` (#dc0d15), white text, `{typography.button}` (Poppins 18px / 700), pill radius `{rounded.xl}` (20px), padding 10px × 24px. Label is typically "¡Dona ahora!" or "Dona ya".

**`button-primary-soft`** — A lighter-red variant on `{colors.primary-soft}` (#e94b52) for secondary or hover-adjacent CTAs.

**`button-secondary`** — White button with `{colors.primary}` text. Used where a CTA must sit on a red or busy background.

**`floating-donate-btn`** — SIGNATURE. A persistent pill (`{rounded.full}`) in `{colors.primary}` that starts hidden (`opacity: 0`, `pointer-events: none`) and fades + slides into view on scroll via `transition: opacity 0.4s ease, transform 0.2s, box-shadow 0.2s` (class `botn-aninado-celeste3.visible`). Keeps the donate action one tap away at all times.

**`ver-cuentas-link`** — "Ver Cuentas" text link in `{colors.primary}`, `{typography.button}` weight, no background. Opens a `{component.bank-account-modal}`.

### Donation Apparatus (Brand Voltage)

**`progress-bar`** — SIGNATURE. The campaign's live pulse. A 28px-tall track in `{colors.track}` (#e0e0e0), `{rounded.xl}`, holding a fill built from a `repeating-linear-gradient(-45deg, {colors.primary} 0-10px, {colors.primary-tint} 10-20px)` — diagonal barber-pole stripes. The stripes animate continuously (`moveStripes` 0.8s linear infinite) and the fill width grows on `transition: width 1.2s {motion.easings.0}`. Min-width 18px so it's always visible. Paired with a `{component.progress-goal-label}` showing "Meta:" and "Así vamos:".

**`progress-goal-label`** — The "Meta:" (goal) and "Así vamos:" (progress) labels above/beside the bar, in `{typography.heading-md}` (Poppins 24px / 700).

**`impact-stat`** — SIGNATURE. Oversized impact counter. Figure in `{typography.stat-figure}` (Montserrat 40px / 700) colored `{colors.primary}` ("128,826", "732"), over a label in `{typography.body-lg}` colored `{colors.ink-strong}` ("Atenciones realizadas a nivel nacional", "Niños beneficiados a nivel nacional"). The visual embodiment of the "Cada sol" promise.

### Cards & Modals

**`donation-channel-card`** — A card for each donation rail (Yape, BCP, Interbank, Izipay, PayPal). White background, `{rounded.xl}`, padding `{spacing.md}` (24px), `--shadow-drop` (`0px 4px 20px rgba(0,0,0,0.1)`). Carries a bank/wallet logo, an instruction line in `{typography.body-lg}`, and a "Ver Cuentas" link or QR.

**`bank-account-modal`** — The practical core of the Peru donation flow. White box, `{rounded.lg}` (12px), padding 40px, shadow `0 8px 40px rgba(0,0,0,0.25)` over a `rgba(0,0,0,0.55)` overlay, animating in via `modalIn 0.25s ease` (scale 0.9 → 1, fade). Internal 2-column layout (`modal-banco-layout`): a logo frame on the left with a 2px `{colors.primary}` bottom-border, account-number rows on the right. Labels in `{typography.caption}` colored `{colors.muted-label}` ("Cuenta Soles:"); numbers in `{typography.account-number}` (Poppins 13px / 700) colored `{colors.ink-strong}` with `word-break: break-all` for long CCI strings. Collapses to a single column below `{breakpoints.modal}` (520px).

**`qr-code-tile`** — Frames a Yape or Izipay QR code with a short instruction in `{typography.body-md}` ("o abre tu app Yape y escanea este código QR").

**`bank-logo-frame`** — Container for a partner-bank logo, max-width 180px, `object-fit: contain`, with a `{colors.primary}` accent border in the modal context.

**`story-card`** — "Historias de vida" beneficiary story card. White, `{rounded.xl}`, heading in `{typography.heading-md}`, body in `{typography.body-md}`. Carries beneficiary photography. [Card chrome partly inferred — see review-first.]

### Bands

**`hero-band`** — White hero carrying the Teleton logo/slogan ("Teletón, La Hacemos Todos") in `{typography.display-xl}` and the primary "¡Dona ahora!" CTA. Vertical padding `{spacing.section}` (60px).

**`mission-band`** — The "Tu donación transforma vidas" section. Heading in `{typography.heading-lg}` (Asap), body in `{typography.body-lg}` carrying the "Cada sol genera un impacto real" copy. White background, 60px padding.

**`trust-band`** — The accountability/audit section ("cada sol recibido es auditado externamente por PwC y administrado de forma independiente por La Fiduciaria"). Body in `{typography.body-lg}` colored `{colors.muted}`, with `{component.download-link}` buttons for the PwC audit and "Rinde Cuentas" reports.

**`sponsor-logo-strip`** — "Agradecemos a:" partner/sponsor logo row. White background, 40px padding.

### Supporting

**`download-link`** — "Descargar" / "Revisa aquí la auditoría" link styled as a button in `{colors.steelblue}` — one of the few places the secondary blue accent surfaces. `{rounded.xl}`, padding 10px × 24px.

**`decorative-splotch`** — Organic red paint-blob shape (class `mancha`) in `{colors.primary}`, layered behind sections as brand texture.

**`social-link-row`** — Footer social links (class `rrss-link`) with `{colors.primary}` icons.

**`video-modal`** — Full-screen video lightbox (class `modal-video-box`). Black background, `{rounded.lg}`, 16:9 iframe, shadow `0 8px 40px rgba(0,0,0,0.6)` over a `rgba(0,0,0,0.85)` scrim, with a circular white close button top-right.

**`footer`** — White footer. Carries the legal block ("Av. Petit Thouars 5162", "teleton@teleton.pe", "RUC: 20523760689", "Razón Social: Fundación Teletón San Juan de Dios", "Todos los derechos reservados - Teletón Perú"), social links, in `{typography.body-md}` colored `{colors.muted}`. Padding `{spacing.xxl}` (40px).

## Do's and Don'ts

### Do
- Let `{colors.primary}` (the Teleton red) carry the page. One accent, used everywhere it matters — CTAs, progress fill, stat figures, modal borders. This single-accent discipline IS the brand.
- Keep the `{component.progress-bar}` animated and live. The moving diagonal stripes + growing fill are the campaign's heartbeat; a static bar loses the urgency.
- Render impact figures big, in red Montserrat (`{typography.stat-figure}`), with a plain Poppins label beneath. Quantified hope is the whole pitch.
- Pin the `{component.floating-donate-btn}` to the viewport on scroll. The donate action is never more than one tap away.
- Pair every emotional claim with a number ("Cada sol genera un impacto real"). The "Cada sol" anaphora is the verbal signature — keep money and impact in the same sentence.
- Use `{rounded.xl}` (20px) corners on buttons, cards, and the progress bar — the soft radius reads warm and approachable, right for a children's charity.
- Keep bank-account numbers in `{typography.account-number}` (Poppins 700) with `word-break: break-all` so long Peru CCI strings stay readable in the modal.

### Don't
- Don't introduce a second loud accent. The blues (`{colors.steelblue}`, `{colors.powderblue}`) are quiet, support-only; nothing competes with the red.
- Don't add dark surfaces. This is a light-only, white-canvas system; a dark band would break the bright, optimistic tone.
- Don't bury the running total or the donate CTA below the fold. Keep both in constant view.
- Don't render the heart or close glyphs as literal pictographic emoji in any spec or editorial doc — treat them as icon assets.
- Don't soften the figures. The impact numbers are the proof; show them at full `{typography.stat-figure}` size, never shrunk into body copy.
- Don't slow the donation modal. The `modalIn 0.25s` scale-in is quick by design — friction kills donations.

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | < `{breakpoints.xs}` (417px) | Tightest layout; single-column everything; reduced hero figure sizes |
| Mobile | < `{breakpoints.sm}` (480px) | Single-column donation channels; stacked stats |
| Modal | < `{breakpoints.modal}` (520px) | `{component.bank-account-modal}` flips to single column — logo frame full-width with red bottom-border, account rows stack; modal padding tightens to 28px 16px 22px; labels/numbers drop to 11px |
| Tablet | < `{breakpoints.md}` (768px) | Hamburger nav; donation channels 2-up; impact stats may stack |
| Tablet wide | < `{breakpoints.tablet}` (820px) | Intermediate grid adjustments |
| Desktop | `{breakpoints.lg}` (1024px)+ | Full horizontal nav; multi-column donation channels; 2-up stats side by side |
| Wide | `{breakpoints.xl}` (1440px)+ | Max content width caps; extra outer breathing room |

All seven breakpoints are real values harvested from `@media` queries in `index.css` and the inline `<style>` block.

### Touch Targets
- `{component.nav-donate-btn}` / `{component.button-primary}` — generous pill, comfortably > 44px tall with 18px/700 label and 10px × 24px padding.
- `{component.floating-donate-btn}` — large pill (14px × 28px padding), well above minimum tap size.
- `{component.ver-cuentas-link}` — full link text is tappable; sized for thumb use.

### Collapsing Strategy
- Top nav collapses to a hamburger below `{breakpoints.md}` (768px).
- Donation-channel grid reduces columns (desktop multi-up → tablet 2-up → mobile 1-up).
- The bank-account modal's defining responsive move: at `{breakpoints.modal}` (520px) the 2-column `modal-banco-layout` becomes a single stacked column, the logo frame goes full-width with its red bottom-border preserved, and account rows stack vertically.
- Impact stats stack from side-by-side to vertical on mobile.

### Image / Motion Behavior
- Progress-bar stripe animation (`moveStripes`) and fill-width transition run at all breakpoints — the live pulse is never disabled. NOTE: no `prefers-reduced-motion` guard was found in the CSS; the continuous stripe animation always runs. Adding a `prefers-reduced-motion` media query is a recommended accessibility improvement.
- Bank/partner logos use `object-fit: contain` within fixed-max-width frames, scaling down cleanly.
- Beneficiary photography in story cards scales proportionally.

## Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key (`{component.progress-bar}`, `{component.impact-stat}`, `{component.bank-account-modal}`).
2. Variants of an existing component (`-soft`, `-secondary`) live as separate entries in `components:`.
3. Use `{token.refs}` everywhere — never inline hex outside the `## Colors` bullets.
4. Default and Active/Pressed states only. The system encodes scroll-reveal (floating button) and a modal scale-in; document those as the transitions in `motion:`, not as hover styling.
5. Motion is real and load-bearing: the progress fill grows on `{motion.transitions.0}` (`width 1.2s cubic-bezier(0.4, 0, 0.2, 1)`), the floating button reveals on `{motion.transitions.2}`, and the bank modal scales in via `modalIn 0.25s`. Preserve these; they carry urgency.
6. One brand red is the rule. Don't introduce a fourth surface tone or a second loud accent — the blues stay quiet and support-only.
7. When in doubt about emphasis: bigger red Montserrat figure before any new color. The `{signature-components.0}` progress bar and the impact-stats are where the brand lives — every iteration should keep them prominent, animated, and red.

## Known Gaps

- The site is a **client-side-rendered React single-page app** — every probed route (`/dona`, `/donar`, `/nosotros`, `/quienes-somos`, `/historias`, `/voluntariado`, `/contacto`, `/blog`, `/about`) returned the identical 27KB shell. No server-rendered section markup, container widths, or grid definitions were observable; layout/grid tokens are convention-based estimates. A headless-browser (Playwright) re-scrape would firm up the structural sections.
- The full color palette, type scale, spacing, radii, two shadows, and motion came from a clean `:root` block in `index.css` plus an inline `<style>` block (firm extraction) — but the face-to-heading-size pairing in the type ladder is partly inferred (only six sizes were declared as variables).
- No dark-mode tokens exist; this is a light-only surface. No `prefers-reduced-motion` guard was found.
- The pictographic heart (`corazon-img`) and the modal close glyph in the source are rendered as Unicode characters; they are documented here as icon assets, not reproduced literally (per editorial convention).
- Donation-flow specifics (exact QR rendering, Izipay/PayPal embed chrome, the "tiendas de pago" retail-cash option that appears commented-out in the markup) would need the live app to confirm — several donation channels are present in the HTML as commented blocks (`<!-- ... -->`), suggesting seasonal toggling around the annual telethon event.
- Sponsor/partner logos ("Agradecemos a:") and beneficiary photography are content assets, not system tokens.