Logotipo
Color (SVG)
Descargar
Color (PNG)
Descargar
Blanco (SVG)
Descargar
Blanco (PNG)
Descargar
Favicon (PNG)
Descargar
Avatar (JPG)
Descargar
Colores
Oscuro
#1f212e
Títulos, fondos dark
--pw-color-dark
Gris
#595b64
Texto cuerpo
--pw-color-grey
Rojo Piensa
#ff3b38
Acento, CTAs, antetítulos
--pw-color-red
Rojo hover
#e52d27
Hover de botones rojos
--pw-color-red-hover
Blanco
#ffffff
Fondos cards
--pw-color-white
Beige
#f7f2f0
Fondo de acento: secciones destacadas, iconos, hover
--pw-color-beige
Degradado hero
linear-gradient(#fff, #f7f2f0)
Fondo de heroes. De blanco a beige
Borde
#0000001f — rgba(0,0,0,12%)
Separadores, bordes
--pw-color-border
Degradado CTA
#c62828 → #b71c1c
Bloque CTA rojo full-width
Tipografía
Muestras en vivo — Bw Modelica
Antetítulo
.antetitulo
12px / w600 / lh —
Uppercase · letter-spacing 0.05em · color rojo
SEO + GEO + CONTENIDOS
Título Hero
.titulo-hero
60px → 36px / w800 / lh 1.05
Solo el hero principal
Posicionamiento web
Título 1
.titulo-1
48px → 30px / w800 / lh 1.1
Secciones principales
Nuestro método de trabajo
Título 2
.titulo-2
36px → 24px / w800 / lh 1.15
Subsecciones
Nuestra receta anti humo
Título 3
.titulo-3
27px → 20px / w800 / lh 1.2
Bloques internos, pasos
Auditoría y optimización técnica
Título 4
.titulo-4
21px → 18px / w700 / lh 1.3
Detalles, labels pricing
Contenidos recurrentes — 200 €/mes
Subtítulo
.subtitulo
19px / w300 / lh 1.65
Bajadas de hero, subtítulos de bloque
Posicionamiento web que te trae clientes cada mes, sin depender de anuncios.
Párrafo grande
.cita
26px → 20px / w300 / lh 1.45
Manifiestos, citas. Bold = w500
Si haces lo mismo que todos ¿cómo esperas destacar? Cualquiera puede pagar hoy una buena IA.
Cuerpo
.descripcion
16px / w400 / lh 1.8
NUNCA se reduce en responsive
Tus clientes siguen buscando en Google, pero ahora también preguntan a ChatGPT, Gemini, Claude, etc. Te ayudamos a estar en todos lados para que te encuentren.
Caption
.caption
13px / w400 / lh 1.8
Badges, footnotes, condiciones
23 años de experiencia • 11 clientes SEO activos • Resultados verificables
Reglas inquebrantables de tipografía
- • Todos los headings llevan
text-wrap: balance - • Max-width títulos:
850px. Max-width cuerpo:650px - •
margin-bottom: 0.5emen todos los headings - • El body (16px) nunca se reduce en responsive — solo los títulos
- • En mobile vertical: quitar
text-wrap: balancede párrafos (solo mantener en títulos) - • No inventar textos — respetar el contenido al 100%
- • No hacer capitalize — respetar el texto original (excepto antetítulos que van uppercase)
- • Letter-spacing
-0.03emen títulos hero/1/2. Nada en 3/4 - • Bold dentro de cuerpo = weight 600 (Medium), no 700. Para evitar salto visual con Bw Modelica
Botones
CTAs principales
.btn.btn-primary
CTAs secundarios
.btn.btn-outline
.btn-white-wrap > .btn.btn-white
Espaciado
1400px
--pw-space-max-width
Max-width de página / container
80px
--pw-space-section
Padding vertical sección (desktop)
60px
--pw-space-gap-lg
Gap layouts split 50/50 (about, textacc, swipe)
50px
--pw-space-section-sm
Padding vertical sección (mobile <478px)
40px
--pw-space-pad-h
Padding horizontal container (desktop)
24px
--pw-space-pad-h-sm
Padding horizontal container (tablet <991px)
24px
--pw-space-gap
Gap grids estándar (cards, features, pricing)
20px
--pw-space-pad-h-xs
Padding horizontal container (mobile <478px)
12px
--pw-space-gap-sm
Gap entre CTAs / elementos compactos
Bordes
50em
--pw-radius-pill
Pill — botones, badges, CTAs
16px
--pw-radius-xl
Cards grandes — pricing, swipe
12px
--pw-radius-lg
Cards estándar — pilar, feature, svc, testimonio, invest
10px
--pw-radius-md
Contenedores de icono — feature-icon
7px
--pw-radius
Base — portfolio cards, elementos pequeños
3px
--pw-radius-xs
Decorativo — líneas de énfasis, markers
Sombras
Variables de sombra estandarizadas del sistema. Úsalas en lugar de valores inline para mantener coherencia.
xs
--pw-shadow-xs
0 1px 4px rgba(31,33,46,0.06)
sm
--pw-shadow-sm
0 2px 8px rgba(31,33,46,0.08)
md
--pw-shadow-md
0 8px 24px rgba(31,33,46,0.10)
lg
--pw-shadow-lg
0 16px 40px rgba(31,33,46,0.10)
xl
--pw-shadow-xl
0 24px 60px rgba(31,33,46,0.12)
card
--pw-shadow-card
0 0 50px rgba(31,33,46,0.06)
red
--pw-shadow-red
0 6px 20px rgba(255,59,56,0.25)
red-lg
--pw-shadow-red-lg
0 8px 32px rgba(255,59,56,0.12)
Formularios
Componentes de formulario con prefijo pw-. Interactivos y accesibles. Compatibles con el sistema de colores y tipografía del DS.
Inputs — normal, error, disabled
Tal como aparece en tu documento
Introduce un email válido
Campo deshabilitado
Textarea
Máximo 500 caracteres
Select
Checkbox y Radio
Checkbox
Radio
Toggle
Formulario de ejemplo
Breakpoints
Cuatro breakpoints estandarizados. En CSS nativo no son usables como custom properties en media queries, pero sirven como referencia y documentación.
| Nombre | Valor | Uso típico | |
|---|---|---|---|
| sm | 640px | Móvil grande / tablet pequeño. Ajustes de tipografía y grid. | |
| md | 768px | Tablet. Sidebar oculto, layouts en columna única. | |
| lg | 1024px | Desktop pequeño. Grids 2col, precios apilados. | |
| xl | 1280px | Desktop estándar. Layout completo a 3 columnas. |
Uso en CSS
- •
@media (max-width: 640px)— Breakpoint sm - •
@media (max-width: 768px)— Breakpoint md — sidebar oculto - •
@media (max-width: 1024px)— Breakpoint lg - •
@media (max-width: 1280px)— Breakpoint xl (usar con moderación)
Imágenes
Imágenes actualmente en uso en el catálogo de bloques. Clic en cada miniatura para ver a tamaño completo.
Iconos
Los bloques usan SVG inline directamente (sin librería externa). Trazo 2px, fill="none", stroke-linecap/linejoin="round", viewBox="0 0 24 24". Visualmente compatibles con Lucide.
Especificación base
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><!-- paths --></svg>
Iconos en uso en bloques
layers
feature-icon
file-text
feature-icon
package
feature-icon
clock
pilar-icon
search
metodo-paso
check-check
metodo-paso
check
trust-item
chevron-right
btn CTA
Elementos
Componentes UI reales de bloques. Clases y estructura de producción.
Acordeón — .faq-item
¿Cuánto tarda en verse resultados?
Los primeros resultados de posicionamiento orgánico suelen verse entre 3 y 6 meses, dependiendo de la competencia del sector.
¿Qué incluye el servicio?
Auditoría técnica, estrategia de palabras clave, optimización on-page y reporting mensual.
.faq-item / .faq-q / .faq-a — toggle JS (.open)
Cards
feature-card (unifica pilar)
Auditoría técnica
Análisis completo del estado SEO técnico del sitio.
.feature-card / .feature-icon
svc-card
Posicionamiento web
Estrategia SEO y contenidos para buscadores e IA.
.svc-card / .svc-card--featured
Listas
Bullet punto rojo
- Auditoría técnica completa
- Estrategia de palabras clave
- Contenidos optimizados
- Reporting mensual verificable
ul li::before — 6px circle rojo
Trust items (SVG check inline)
Sin permanencia
Soporte incluido
Informes mensuales
Resultados verificables
.trust-item — SVG check 13px