# Texturas para web

Estado: **RECOMENDACIÓN** · 2026-08-14

Activos derivados de las texturas seleccionadas por el responsable del proyecto en esta conversación. Estas selecciones autorizan la prueba técnica; no convierten las propuestas en una guía de marca aprobada.

## Qué incluye

- `cardon-topography-seamless.svg`: interpretación vectorial repetible. Es la opción recomendada para fondos largos, módulos y patrones continuos.
- `cardon-topography-exact.webp`: versión optimizada de la imagen seleccionada. Conserva mejor el relieve y la irregularidad de la referencia, pero no es un mosaico perfectamente repetible.
- `cardon-topography-compact.webp`: alternativa de menor resolución para módulos pequeños o carga especialmente contenida.
- `cardon-topography.css`: clases listas para integrar ambas versiones.
- `demo.html`: galería visual local acumulativa de las trece direcciones y sus formatos. Cada muestra se puede ampliar con clic, toque, Enter o barra espaciadora; la vista conserva el formato seleccionado —SVG o WebP— y se cierra con el botón visible, Escape o el fondo oscuro.
- `demo.js`: comportamiento accesible del visor ampliado, incluido retorno de foco a la muestra que lo abrió. Esta interacción pertenece únicamente al catálogo técnico local.

Segunda dirección, **Cintas entrelazadas**:

- `cardon-ribbons-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado. Conserva la misma composición, densidad y proporción que la muestra seleccionada; no es vectorial ni seamless.
- `cardon-ribbons-exact.webp`: versión optimizada que conserva con mayor fidelidad la referencia seleccionada.
- `cardon-ribbons-compact.webp`: versión más pequeña para módulos de menor tamaño.
- `cardon-ribbons.css`: clases y variables propias de esta dirección, sin modificar la integración topográfica existente.
- `cardon-ribbons-seamless.svg`: exploración vectorial anterior conservada como histórico técnico; fue descartada para la galería por no respetar la densidad original.

Tercera dirección, **Cardones y dunas**:

- `cardon-desert-stipple-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado. Conserva la misma composición, densidad y proporción que la muestra seleccionada; no es vectorial ni seamless.
- `cardon-desert-stipple-exact.webp`: versión optimizada fiel a la referencia seleccionada.
- `cardon-desert-stipple-compact.webp`: versión compacta para módulos pequeños.
- `cardon-desert-stipple.css`: clases y variables independientes de la tercera dirección.
- `cardon-desert-stipple-seamless.svg`: exploración vectorial anterior conservada como histórico técnico; fue descartada para la galería por no respetar la densidad original.

Cuarta dirección, **Secciones de cardón**:

- `cardon-cross-sections-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado. Conserva la misma composición, densidad y proporción que la muestra seleccionada; no es vectorial ni seamless.
- `cardon-cross-sections-exact.webp`: versión optimizada de 1672 × 941 que conserva la referencia seleccionada.
- `cardon-cross-sections-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `cardon-cross-sections.css`: clases independientes para integrar SVG o WebP sin alterar las direcciones anteriores.

Quinta dirección, **Cardones en el horizonte**:

- `cardon-horizon-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado. Conserva la composición, densidad y proporción de la muestra seleccionada; no es vectorial ni seamless.
- `cardon-horizon-exact.webp`: versión optimizada de 1672 × 941 que conserva la referencia seleccionada.
- `cardon-horizon-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `cardon-horizon.css`: clases independientes para integrar SVG o WebP sin alterar las direcciones anteriores.

Sexta dirección, **Corrientes entrelazadas**:

- `marine-interlocking-currents-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado. Conserva composición, densidad y proporción; no es vectorial ni seamless.
- `marine-interlocking-currents-exact.webp`: versión optimizada de 1672 × 941 fiel a la referencia seleccionada.
- `marine-interlocking-currents-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `marine-interlocking-currents.css`: clases independientes para integrar SVG o WebP sin alterar las cinco direcciones anteriores.

Séptima dirección, **Cardón y marea**:

- `cardon-tide-horizon-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado. Conserva composición, escala, proporción y amplio espacio negativo; no es vectorial ni seamless.
- `cardon-tide-horizon-exact.webp`: versión optimizada de 1672 × 941 fiel a la muestra seleccionada.
- `cardon-tide-horizon-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `cardon-tide-horizon.css`: clases independientes para integrar SVG o WebP sin alterar las seis direcciones anteriores.

Octava dirección, **Hilos de marea de Cortés**:

- `cortez-tidal-threads-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado; no es vectorial ni seamless.
- `cortez-tidal-threads-exact.webp`: versión optimizada de 1672 × 941 fiel a la muestra seleccionada.
- `cortez-tidal-threads-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `cortez-tidal-threads.css`: clases independientes para integrar el arte previsto para Guides.

Novena dirección, **Oleaje del Pacífico**:

- `pacific-edge-surge-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado; no es vectorial ni seamless.
- `pacific-edge-surge-exact.webp`: versión optimizada de 1672 × 941 fiel a la muestra seleccionada.
- `pacific-edge-surge-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `pacific-edge-surge.css`: clases independientes para integrar el arte previsto para Newsletter.

Décima dirección, **Bahías laterales**:

- `twin-bay-side-rails-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado; no es vectorial ni seamless.
- `twin-bay-side-rails-exact.webp`: versión optimizada de 1672 × 941 fiel a la muestra seleccionada.
- `twin-bay-side-rails-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `twin-bay-side-rails.css`: clases independientes para Living Map o un bloque editorial.

Undécima dirección, **Convergencia de dos mares**:

- `two-seas-convergence-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado; no es vectorial ni seamless.
- `two-seas-convergence-exact.webp`: versión optimizada de 1672 × 941 fiel a la muestra seleccionada.
- `two-seas-convergence-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `two-seas-convergence.css`: clases independientes para la firma visual “Pacífico × Mar de Cortés”.

Duodécima dirección, **Dunas al viento · diagonal**:

- `editorial-dunes-diagonal-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado; no es vectorial ni seamless.
- `editorial-dunes-diagonal-exact.webp`: versión optimizada de 1672 × 941 fiel a la muestra seleccionada.
- `editorial-dunes-diagonal-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `editorial-dunes-diagonal.css`: clases independientes para probar la composición en blogs de aventura y road trips.

Decimotercera dirección, **Dunas al viento · horizontal**:

- `editorial-dunes-horizontal-exact.svg`: contenedor SVG autocontenido con el WebP fiel incrustado; no es vectorial ni seamless.
- `editorial-dunes-horizontal-exact.webp`: versión optimizada de 1672 × 941 fiel a la variante horizontal seleccionada.
- `editorial-dunes-horizontal-compact.webp`: versión de 1200 × 676 para módulos pequeños.
- `editorial-dunes-horizontal.css`: clases independientes para probar la composición como fondo o separador editorial.

## Integración recomendada

Carga la hoja de estilos:

```html
<link rel="stylesheet" href="/assets/homepage-textures/production/cardon-topography.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/cardon-ribbons.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/cardon-desert-stipple.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/cardon-cross-sections.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/cardon-horizon.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/marine-interlocking-currents.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/cardon-tide-horizon.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/cortez-tidal-threads.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/pacific-edge-surge.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/twin-bay-side-rails.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/two-seas-convergence.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/editorial-dunes-diagonal.css">
<link rel="stylesheet" href="/assets/homepage-textures/production/editorial-dunes-horizontal.css">
```

Usa el patrón vectorial repetible:

```html
<section class="wic-texture wic-texture--vector">
  <!-- contenido -->
</section>
```

O usa el acabado fiel en WebP:

```html
<section class="wic-texture wic-texture--webp">
  <!-- contenido -->
</section>
```

Para la segunda dirección, ambas clases reproducen la misma composición fiel:

```html
<section class="wic-texture wic-texture--ribbons-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--ribbons-webp">
  <!-- contenido -->
</section>
```

Para la tercera dirección, ambas clases reproducen la misma composición fiel:

```html
<section class="wic-texture wic-texture--desert-stipple-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--desert-stipple-webp">
  <!-- contenido -->
</section>
```

Para la cuarta dirección:

```html
<section class="wic-texture wic-texture--cross-sections-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--cross-sections-webp">
  <!-- contenido -->
</section>
```

Para la quinta dirección:

```html
<section class="wic-texture wic-texture--cardon-horizon-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--cardon-horizon-webp">
  <!-- contenido -->
</section>
```

Para la sexta dirección:

```html
<section class="wic-texture wic-texture--marine-interlocking-currents-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--marine-interlocking-currents-webp">
  <!-- contenido -->
</section>
```

Para la séptima dirección:

```html
<section class="wic-texture wic-texture--cardon-tide-horizon-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--cardon-tide-horizon-webp">
  <!-- contenido -->
</section>
```

Para la octava dirección:

```html
<section class="wic-texture wic-texture--cortez-tidal-threads-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--cortez-tidal-threads-webp">
  <!-- contenido -->
</section>
```

Para la novena dirección:

```html
<section class="wic-texture wic-texture--pacific-edge-surge-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--pacific-edge-surge-webp">
  <!-- contenido -->
</section>
```

Para la décima dirección:

```html
<section class="wic-texture wic-texture--twin-bay-side-rails-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--twin-bay-side-rails-webp">
  <!-- contenido -->
</section>
```

Para la undécima dirección:

```html
<section class="wic-texture wic-texture--two-seas-convergence-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--two-seas-convergence-webp">
  <!-- contenido -->
</section>
```

Para la duodécima dirección:

```html
<section class="wic-texture wic-texture--editorial-dunes-diagonal-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--editorial-dunes-diagonal-webp">
  <!-- contenido -->
</section>
```

Para la decimotercera dirección:

```html
<section class="wic-texture wic-texture--editorial-dunes-horizontal-svg">
  <!-- contenido -->
</section>

<section class="wic-texture wic-texture--editorial-dunes-horizontal-webp">
  <!-- contenido -->
</section>
```

La densidad del SVG repetible de la Dirección 01 se controla con su variable:

```css
.mi-seccion {
  --wic-texture-tile-size: 480px;
}
```

## Criterio de uso

- SVG repetible de la Dirección 01: navegación, franjas, tarjetas amplias y fondos largos.
- SVG exacto de las Direcciones 02–13: cuando la integración requiera un único archivo SVG autocontenido sin sacrificar la composición original.
- WebP exacto: hero o bloque editorial donde importe reproducir la muestra con la mayor fidelidad y el menor peso disponible.
- WebP compacto: tarjetas o secciones de menor tamaño.

El SVG de la Dirección 01 está compuesto por geometría y filtros declarativos. Los SVG exactos de las Direcciones 02–13 son contenedores raster: incrustan el WebP seleccionado para evitar cualquier cambio en separación, densidad o textura. Escalan como un SVG, pero su detalle sigue siendo raster.

Áreas previstas para las selecciones del batch 11:

- Dirección 07 · Cardón y marea: Cabo Passport en escritorio.
- Dirección 08 · Hilos de marea de Cortés: Guides.
- Dirección 09 · Oleaje del Pacífico: Newsletter.
- Dirección 10 · Bahías laterales: Living Map o bloque editorial.
- Dirección 11 · Convergencia de dos mares: firma visual “Pacífico × Mar de Cortés”.

Áreas para prueba de las selecciones del batch 12:

- Dirección 12 · Dunas al viento · diagonal: blogs de aventura y road trips.
- Dirección 13 · Dunas al viento · horizontal: fondos y separadores de blogs o páginas editoriales.

Las clases heredadas `--ribbons-vector` y `--desert-stipple-vector` se mantienen como alias de compatibilidad, pero no deben usarse en integraciones nuevas porque estos archivos ya no son vectoriales.

## Fuente y límites

- Fuente visual: `../concepts/patterns/cardon-pattern-topography-v1.png`.
- Segunda fuente visual canónica: `../concepts/patterns/cardon-pattern-interlocking-arms-v1.png`.
- Tercera fuente visual canónica: `../concepts/patterns/cardon-pattern-desert-stipple-v1.png`.
- Cuarta fuente visual canónica: `../concepts/patterns/cardon-pattern-cross-sections-v1.png`.
- Quinta fuente visual canónica: `../concepts/cardon-linework-concept.png`.
- Sexta fuente visual canónica: `../concepts/marine/marine-pattern-interlocking-currents-v1.png`.
- Séptima fuente visual canónica: `../concepts/marine/home-premium-batch-11/09-cardon-tide-horizon-v1.png`.
- Octava fuente visual canónica: `../concepts/marine/home-premium-batch-11/01-cortez-tidal-threads-v1.png`.
- Novena fuente visual canónica: `../concepts/marine/home-premium-batch-11/05-pacific-edge-surge-v1.png`.
- Décima fuente visual canónica: `../concepts/marine/home-premium-batch-11/06-twin-bay-side-rails-v1.png`.
- Undécima fuente visual canónica: `../concepts/marine/home-premium-batch-11/12-two-seas-convergence-v1.png`.
- Duodécima fuente visual canónica: `../concepts/editorial/blog-patterns-batch-12/03-wind-carved-dunes-v1.png`.
- Decimotercera fuente visual canónica: `../concepts/editorial/blog-patterns-batch-12/03-wind-carved-dunes-horizontal-v2.png`.
- Solicitud y selección: responsable del proyecto, conversaciones del 2026-08-13 y 2026-08-14.
- DEC-004 establece que las Direcciones 02 y 03 no deben reinterpretarse; DEC-005 aplica el mismo criterio a la Dirección 04, DEC-006 a la Dirección 05, DEC-007 a la Dirección 06, DEC-011 a la Dirección 07, DEC-012 a las Direcciones 08–11 y DEC-015 a las Direcciones 12–13. Sus muestras SVG deben conservar el arte original.
- Los WebP actuales son optimizaciones visualmente fieles, no codificaciones lossless píxel por píxel del PNG fuente.
- Las Direcciones 07–11 tienen áreas previstas, pero todavía no están montadas ni aprobadas en `Home Premium Preview`; tampoco se han definido sus tratamientos móviles.
- Las Direcciones 12–13 están seleccionadas para la galería y cuentan con áreas para prueba; no están montadas en una plantilla editorial real ni validadas como mosaicos seamless.
- Falta validar las direcciones sobre `Home Premium Preview` con contenido y breakpoints finales antes de trasladarlas al Home público.