Big type on photo

# Prompt — Hero "big type sobre foto" (texto gigante con blend de color)

Copia este prompt en tu IA. **Edita solo el bloque EDÍTAME**. El resto reprodúcelo tal cual.

---

Reproduce este **hero a pantalla completa** con **HTML semántico + CSS puro** (sin frameworks ni build, un solo archivo), totalmente responsive. Respeta cada valor literal; no improvises.

## EDÍTAME (contenido)

> ⚠️ CAMBIA TODOS estos textos por los tuyos. No uses los del ejemplo ni los de ninguna web existente, o parecerá copiado.

- **Palabra grande 1 (arriba):** "Creative"
- **Palabra grande 2 (abajo):** "Studio Werk"
- **Etiqueta ©:** "©20-25"
- **Categorías (lista, der.):** Art Direction · Web Design · Motion · Strategy
- **Descripción (abajo izq.):** "We build bold digital brands that move fast and convert. More than a website — real outcomes for your business."
- **Foto de fondo:** `https://carlosriobo.es/hero-bigtype-photo.png`
- **Header — logo:** "Volta" + "®"  ·  **enlaces:** About · Projects · Contact  ·  **botón:** "MENU"
- **Fuentes:** títulos/UI = **Inter** (700/600/500); © y logo/MENU = **Bebas Neue** (Google Fonts).

## Estructura (todo dentro de UNA `<section>`)

`<section>` = `position:relative; height:100vh; overflow:hidden; isolation:isolate`. Es el ÚNICO contexto de apilado. Dentro, por orden:

1. **Foto** `<img src="https://carlosriobo.es/hero-bigtype-photo.png">`: `position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0`.
2. **Header** (`z-index:4`) — ver abajo.
3. **Palabras gigantes** (copias con blend, `z-index:2`) — ver abajo.
4. **UI**: ©, categorías, descripción (`z-index:3`, texto blanco normal).
5. **Grano** (`z-index:5`, encima de todo) — ver abajo.

## Header (barra superior, blanco sobre la foto)

`position:absolute; top:0; left:0; right:0; z-index:4; display:flex; align-items:center; justify-content:space-between; padding:14px 24px`. Cinco grupos repartidos (`space-between`):

1. **Logo** (izq.): "Volta" Bebas Neue `font-size:50px; line-height:.85em; letter-spacing:-0.04em; color:#fff` + "®" pequeño (`16px`, arriba), `gap:4px`.
2-4. **About · Projects · Contact**: Inter `14px; font-weight:700; letter-spacing:-0.05em; text-transform:uppercase; color:#fff; text-decoration:none`; hover `color:rgba(255,255,255,.7)`.
5. **Menú** (der.): hamburguesa (dos barras `width:42px; height:2px; background:#fff; gap:8px`) + "MENU" Bebas Neue `50px`. `gap:20px`.

Móvil (`max-width:809px`): oculta los 3 enlaces, deja logo + hamburguesa/MENU; baja logo/MENU a ~34px.

## Las dos palabras gigantes (lo más importante)

Ambas con el **MISMO tamaño grande**, apiladas y **casi tocándose** abajo-izquierda; la 2ª (más larga) se extiende hasta el borde derecho. NO escales cada palabra a su ancho (eso encoge la larga): usa **tamaño fijo igual para las dos**.

```css
.word{
  position:absolute;
  font:700 clamp(52px, 11.5vw, 200px)/.8 Inter;
  letter-spacing:-0.06em; white-space:nowrap; color:#fff;
}
.word--1{ left:30px;  bottom:26%; }   /* "Creative" — anclada IZQUIERDA */
.word--2{ right:24px; bottom:5%;  }   /* "Studio Werk" — anclada DERECHA (así NO se corta) */
```

- **NINGUNA palabra puede cortarse horizontalmente.** La palabra 1 va anclada a la izquierda: si su última letra se sale por la derecha y la `overflow:hidden` la corta, **baja el tamaño** (reduce el `vw`/máximo) hasta que ENTERA quepa dentro del viewport (deja un margen a la derecha). El tamaño correcto es el mayor con el que **ambas** palabras caben completas.
- Mismo `font-size` para las dos → la 2ª, al ser más larga, llega sola hasta cerca del borde derecho (anclada a la derecha nunca se corta).
- `line-height:.8` + esos `bottom` → quedan apiladas y solapadas verticalmente, como un bloque compacto (la 2ª empieza justo bajo la 1ª).
- Si en alguna pantalla la 2ª se solapa con el texto de la izquierda, ajusta `bottom`/tamaño, pero mantén las dos al mismo tamaño.

### EFECTO DE COLOR: cada palabra toma el color de la foto (blend)

Cada palabra se pinta **DOS veces**, superpuestas en la misma posición, **como hijas DIRECTAS de la `<section>`** (no dentro de wrappers):

```html
<section> … <img class="bg">
  <span class="word word--1" style="mix-blend-mode:difference">Creative</span>
  <span class="word word--1" style="mix-blend-mode:overlay">Creative</span>
  <span class="word word--2" style="mix-blend-mode:difference">Studio Werk</span>
  <span class="word word--2" style="mix-blend-mode:overlay">Studio Werk</span>
  … UI … grano …
</section>
```

- `difference` con blanco INVIERTE el color de la foto → las letras cogen colores complementarios (sobre azul→naranja, rojo→cian). `overlay` sube brillo. Las dos copias llevan `z-index:2`.
- Para que el blend vea la foto: la `<section>` lleva `isolation:isolate` (contiene foto + palabras), y las palabras son **hijas directas de la section**, sin ningún wrapper con `z-index/opacity/transform/will-change/filter/isolation` entre medias. Si salen blancas, hay un wrapper rompiendo el contexto.

## UI (texto blanco normal, `z-index:3`)

- **©** `position:absolute; left:30px; bottom:50%`: Bebas Neue `60px; letter-spacing:-0.04em; color:#fff`. Debe quedar **por encima** de la palabra 1, SIN solaparse con ella (sube el `bottom` si hace falta).
- **Categorías** `position:absolute; right:30px; top:46%; text-align:right`: lista vertical, Inter `600 18px/1.6; letter-spacing:-0.05em; color:#fff`. Separadas del título, con aire.
- **Descripción** `position:absolute; left:30px; bottom:30px; max-width:400px`: Inter `500 16px/1.3; letter-spacing:-0.04em; color:rgba(255,255,255,.9)`.

## Grano de película (OBLIGATORIO y VISIBLE, encima de todo)

Último elemento de la section. NO lo omitas. Un `<svg>` de ruido a pantalla completa:

```html
<svg class="grain" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
  <filter id="grainFilter"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter>
  <rect width="100%" height="100%" filter="url(#grainFilter)"/>
</svg>
```
```css
.grain{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:5; pointer-events:none;
  opacity:.6; mix-blend-mode:overlay;
}
```

Debe NOTARSE bien el grano sobre la foto Y las letras (grano marcado, no sutil). Si aún se ve poco, sube `opacity` hasta ~.75 o prueba `mix-blend-mode:soft-light`. (Si tu entorno no pinta `feTurbulence`, usa un PNG de ruido tileado con el mismo `opacity`/blend.)

## Animación de entrada (al cargar) — añade vida, no la dejes seca

Todo entra solo al cargar la página, escalonado. Usa estos `@keyframes` y `animation` con `animation-fill-mode:both`:

```css
@keyframes riseIn   { from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeDown { from{ opacity:0; transform:translateY(-16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes wipeUp   { from{ opacity:0; clip-path:inset(100% 0 0 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
```

Easing común: `cubic-bezier(0.16, 1, 0.3, 1)` (suave, con salida elegante). Secuencia (con `animation-delay`):

- **Header**: `fadeDown .6s` a los `0s`.
- **Palabra 1** ("Creative", las 2 copias): `wipeUp .9s` a los `.15s` (se revela de abajo arriba).
- **Palabra 2** ("Studio Werk", las 2 copias): `wipeUp .9s` a los `.30s`.
- **©**: `riseIn .7s` a los `.45s`.
- **Categorías** (cada línea con `riseIn .6s`, escalonadas `.5s, .58s, .66s, .74s`).
- **Descripción**: `riseIn .7s` a los `.6s`.
- **Grano**: `opacity` de 0 a `.6` con un `fade 1s` a los `.2s` (que aparezca suave).

> IMPORTANTE: el `transform`/`clip-path` de la animación NO debe romper el blend. Como cada palabra ya es hija directa de la section, aplícalo a cada copia `.word` directamente (no a un wrapper). El `transform` en el propio elemento con blend no crea problema; lo que rompe el blend es un wrapper intermedio con transform. Si notas que durante la animación las letras parpadean en blanco, anima solo `opacity` + `clip-path` en las palabras (sin `translate`).

- Micro-interacción opcional: parallax muy sutil de la foto con el ratón (`transform: translate(calc(var(--mx)*-6px), calc(var(--my)*-6px))`), suave. Respeta el blend igual.
- **Respeta `prefers-reduced-motion: reduce`**: desactiva las animaciones y deja todo en su estado final.

## Responsive

- `max-width:1199px`: baja el tamaño de las palabras (`clamp(48px,12vw,150px)`), categorías y descripción a ancho cómodo.
- `max-width:809px`: todo en columna, palabras al 100% de ancho que quepa, © y categorías reordenadas arriba, header colapsado.

## Notas

- Las dos palabras MISMO tamaño, apiladas y solapadas; la 2ª anclada a la derecha para no cortarse.
- El blend necesita: `isolation` en la section + palabras como hijas directas, sin wrappers que aíslen.
- El grano va el último, visible, sobre todo.