ltsection class=hero hero--image aria-labelledby=hero-titlegt
  ltdiv class=hero__innergt
    lth2 id=hero-title class=hero__titlegtTu título principal aquílt/h2gt
    ltp class=hero__subtitlegtUna frase breve que explique la propuesta de valor.lt/pgt
    ltdiv class=hero__ctagt
      lta class=btn btn--primary href=# role=button aria-label=Acción principalgtComenzarlt/agt
      lta class=btn btn--secondary href=# role=button aria-label=Acción secundariagtMás informaciónlt/agt
    lt/divgt
  lt/divgt
lt/sectiongt

CSS: estilos completos (solo CSS)

Este CSS crea un hero centrado, con soporte para imagen de fondo o color, superposición, tipografía, y estilos para los botones primario y secundario. Puedes ajustarlo a variables de tu tema.

:root{
  --hero-min-height: 64vh
  --hero-padding: 3rem
  --hero-bg-color: #0f1724 / fallback /
  --hero-overlay: rgba(0,0,0,0.35)
  --color-primary: #0048ff
  --color-primary-contrast: #ffffff
  --color-secondary: transparent
  --color-secondary-border: rgba(255,255,255,0.18)
  --text-color: #ffffff
  --muted-color: rgba(255,255,255,0.85)
  --max-width: 1200px
  --radius: 8px
  --gap: 1rem
  --transition: 180ms cubic-bezier(.2,.9,.2,1)
}

/ Contenedor general /
.hero{
  position: relative
  min-height: var(--hero-min-height)
  display: flex
  align-items: center
  justify-content: center
  padding: var(--hero-padding)
  color: var(--text-color)
  background-color: var(--hero-bg-color)
  background-position: center
  background-size: cover
  background-repeat: no-repeat
  overflow: hidden
}

/ Opción para usar imagen via clase (puedes inyectarla desde WP) /
.hero--image{
  background-image: linear-gradient(var(--hero-overlay), var(--hero-overlay)), url(/ruta/a/tu-imagen.jpg)
}

/ Inner para restringir ancho y centrar texto /
.hero__inner{
  width: min(100%, var(--max-width))
  text-align: center
  margin: 0 auto
  padding: 2rem
}

/ Títulos y subtítulos /
.hero__title{
  font-size: clamp(1.6rem, 3.8vw, 2.8rem)
  line-height: 1.05
  margin: 0 0 0.5rem 0
  font-weight: 700
  letter-spacing: -0.02em
}

.hero__subtitle{
  color: var(--muted-color)
  font-size: clamp(1rem, 2.1vw, 1.125rem)
  margin: 0 0 1.5rem 0
}

/ CTA: contenedor de botones /
.hero__cta{
  display: inline-flex
  gap: var(--gap)
  align-items: center
  justify-content: center
  margin-top: 0.5rem
  flex-wrap: wrap
}

/ Botones: base /
.btn{
  display: inline-block
  padding: 0.75rem 1.25rem
  border-radius: var(--radius)
  text-decoration: none
  font-weight: 600
  font-size: 0.95rem
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition)
  cursor: pointer
  -webkit-tap-highlight-color: transparent
}

/ Primario: fondo sólido /
.btn--primary{
  background-color: var(--color-primary)
  color: var(--color-primary-contrast)
  border: 1px solid transparent
  box-shadow: 0 6px 16px rgba(2,6,23,0.45)
}

/ Secundario: estilo ghost/outline /
.btn--secondary{
  background-color: var(--color-secondary)
  color: var(--text-color)
  border: 1px solid var(--color-secondary-border)
}

/ Hover / focus (solo visual) /
.btn:hover,
.btn:focus{
  transform: translateY(-3px)
  text-decoration: none
  outline: none
}

/ Foco accesible /
.btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(0,72,255,0.18)
}

/ Interacción activa /
.btn:active{
  transform: translateY(0)
  transition-duration: 80ms
}

/ Adaptación a móviles: botones apilados en pantallas estrechas /
@media (max-width: 560px){
  .hero__inner{
    padding-left: 1.25rem
    padding-right: 1.25rem
  }
  .hero__cta{
    flex-direction: column
    width: 100%
  }
  .btn{
    width: 100%
    text-align: center
  }
}

/ Respecto a reduce motion /
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:focus, .btn:active{
    transition: none
    transform: none
    box-shadow: none
  }
}

Variantes y ajustes

• Hero solo color: elimina la clase hero–image y cambia –hero-bg-color a un color de tu tema.
• Botones invertidos: intercambia variables para que el secundario sea más destacado si la UX lo requiere.
• Iconos dentro de botones: añade un SVG inline dentro del enlace ajusta padding en .btn para mantener alineación.

Ejemplo completo listo para pegar (HTML CSS)

A continuación un ejemplo completo con la estructura HTML y el CSS juntos (útil para un bloque HTML donde pegues ambos):

lt!-- HTML --gt
ltsection class=hero hero--image aria-labelledby=hero-titlegt
  ltdiv class=hero__innergt
    lth2 id=hero-title class=hero__titlegtLanza tu producto hoylt/h2gt
    ltp class=hero__subtitlegtUna solución simple y rápida para empezar con tu sitio.lt/pgt
    ltdiv class=hero__ctagt
      lta class=btn btn--primary href=# role=button aria-label=ComenzargtComenzarlt/agt
      lta class=btn btn--secondary href=# role=button aria-label=Más informacióngtMás informaciónlt/agt
    lt/divgt
  lt/divgt
lt/sectiongt

lt!-- CSS (pega este bloque dentro de un bloque de estilo o archivo CSS) --gt
ltstylegt
  / Pega aquí el CSS mostrado en el bloque anterior /
lt/stylegt

Cómo integrarlo en WordPress

1. Pegar el HTML en un bloque HTML personalizado dentro del editor de bloques (Gutenberg).
2. Agregar el CSS en el personalizador → CSS adicional, o mejor: incluirlo en tu archivo de estilos del tema (style.css) o cargarlo con enqueue en functions.php.
3. Para mayor control, convertirlo en un bloque reutilizable o crear una plantilla parcial de PHP que imprima el HTML y lea imagenes desde campos personalizados (ACF, bloques dinámicos, etc.).

Ejemplo corto para enqueue en functions.php

Consideraciones finales y buenas prácticas

• Usa imágenes optimizadas (idealmente WebP y versiones responsive). No abuses de archivos de gran peso para el fondo.
• Asegúrate de que el aria-label y la semántica del hero describan claramente la acción y el contenido.
• Prueba con lectores de pantalla y verifica el contraste con herramientas como las devtools o servicios de accesibilidad.
• Si tu tema cambia variables, integra las variables CSS del hero con las del tema para mantener coherencia visual.

Conclusión

Con este enfoque tienes un hero con botón dual totalmente realizado solo con CSS y HTML, accesible y fácil de integrar en WordPress. El patrón es flexible: adapta colores, tamaños y comportamientos para encajar en tu diseño sin necesitar JavaScript.