system: You are an assistant that generates WordPress patterns.

user: El patrón de guía de estilo presenta los bloques por defecto y los tratamientos de color de muestra para crear una página de guía de estilo en tu sitio . Este patrón es una forma sencilla de añadir el contenido por defecto de encabezados, textos, botones, citas e imágenes de muestra de la cubierta a un sitio que estés estilizando.

assistant: <!-- wp:paragraph -->
<p>El patrón de guía de estilo presenta los bloques por defecto y los tratamientos de color de muestra para crear una página de guía de estilo en tu sitio. Este patrón es una forma sencilla de añadir el contenido por defecto de encabezamientos, textos, botones, citas e imágenes de muestra de la cubierta a un sitio que estés estilizando. Entrega la guía de estilo junto al sitio del cliente para facilitar la referencia y el cumplimiento del diseño.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Tipografía</h2>
<!-- /wp:heading -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading {"level":1} -->
<h1>Encabezado 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Encabezado 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Encabezado 3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Encabezado 4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Encabezado 5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Encabezado 6</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>Tipografía de</em> <strong>párrafo</strong>. <span style="text-decoration: underline">¿Oíste eso?</span> Han apagado el reactor principal. Seguro que nos destruirán. ¡Esto es una locura! ¡Estamos condenados! Esta vez no habrá escape para la Princesa. ¿Qué es eso? ¡Artoo! Artoo-Detoo, ¿dónde estás? ¡Por fin! ¿Dónde has estado? Vienen en esta dirección. ¿Qué vamos a hacer? ¡Nos enviarán a la mina de especias de Kessel o nos estrellarán contra quién sabe qué!</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Colores</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"black","minHeight":180,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Escribe el título…","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">#000000</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"cyan-bluish-gray","minHeight":180,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Escribe el título…","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#ABB8C3</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"vivid-cyan-blue","minHeight":180,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-vivid-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Escribe el título…","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#0693E3</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"pale-cyan-blue","minHeight":180,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-pale-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Escribe el título…","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#8ED1FC</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Botones</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Botón sólido</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Contorno de los botones</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">Botón 25%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link wp-element-button">Botón 50%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link wp-element-button">Botón 75%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Botón 100%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>citas</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Cita por defecto</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Tu destino está conmigo, Skywalker. Obi-Wan sabía que esto era cierto. ¡No! Demasiado fácil. Quizás no eres tan fuerte como el Emperador pensaba. Impresionante... muy impresionante. Obi-Wan te ha enseñado bien. Has controlado tu miedo.</p><cite>Darth Vader</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p><strong>Cita simple</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-plain"} -->
<blockquote class="wp-block-quote is-style-plain"><p>Tu destino está conmigo, Skywalker. Obi-Wan sabía que esto era cierto. ¡No! Demasiado fácil. Quizás no eres tan fuerte como el Emperador pensaba. Impresionante... muy impresionante. Obi-Wan te ha enseñado bien. Has controlado tu miedo.</p><cite>Darth Vader</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Párrafos de cita</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Citas que pueden colocarse entre bloques de texto o situarse junto a ellos a la izquierda o a la derecha.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Párrafo de cita sin alineación.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p><strong>Obi-Wan sabía que eso era cierto. </strong></p><cite>Darth Vader</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Párrafo de cita con alineación amplia.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"wide"} -->
<figure class="wp-block-pullquote alignwide"><blockquote><p><strong>¡No! Todo es demasiado fácil. Tal vez usted no es tan fuerte como el Emperador pensó.</strong></p><cite>Darth Vader</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Párrafo de cita con alineación a ancho completo</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"full"} -->
<figure class="wp-block-pullquote alignfull"><blockquote><p><strong>Impresionante... muy impresionante. Obi-Wan te ha enseñado bien. Has controlado tu miedo.</strong></p></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Párrafo de cita con alineación a la izquierda y a la derecha.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>¿Oíste eso? Han apagado el reactor principal. Seguro que nos destruyen. ¡Esto es una locura! ¡Estamos condenados! Esta vez no habrá escape para la Princesa. ¿Qué es eso? ¡Artoo! Artoo-Detoo, ¿dónde estás? ¡Por fin! ¿Dónde has estado? Vienen en esta dirección.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"textAlign":"left","align":"left"} -->
<figure class="wp-block-pullquote alignleft has-text-align-left"><blockquote><p>Tu destino está conmigo, Skywalker.</p><cite>Darth Vader, párrafo de cita alineado a la izquierda</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p>Debo enfrentarme a él solo. ¡Chewie! ¡Ponte detrás de mí! ¡Ponte detrás de mí! No podemos salir por ahí. Parece que lograste cortar nuestra única ruta de escape. Tal vez le gustaría volver a su celda, Su Alteza.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>¿Estás bromeando? Al ritmo que están ganando. Viajar por el hiperespacio no es como espolvorear las cosechas, ¡muchacho! Sin cálculos precisos podríamos volar justo a través de una estrella o rebotar demasiado cerca de una supernova y eso terminaría tu viaje muy rápido, ¿no? ¿Qué es ese parpadeo? Estamos perdiendo nuestro escudo deflector. Ve a ponerte el cinturón, voy a hacer el salto a la velocidad de la luz. Hemos entrado en el sistema Alderaan.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Líder Rojo, estamos justo encima de ti. Gira al punto cero cinco, te cubriremos. Quédate ahí. Acabo de perder mi motor de estribor. Prepárense para hacer su carrera de ataque. Biggs, Wedge, cerrémoslo.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"textAlign":"left","align":"right"} -->
<figure class="wp-block-pullquote alignright has-text-align-left"><blockquote><p>Tu destino está conmigo, Skywalker.</p><cite>Darth Vader, párrafo de cita alineado a la derecha</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p>No querrás que mi vida se vuelva aburrida, ¿verdad? Luke, la Fuerza estará contigo. Todas las alas repórtense. Rojo Diez en espera. Rojo Siete a la espera. Rojo Tres a la espera. Rojo Seis a la espera. Rojo Nueve a la espera.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Mantén a la mitad de tu grupo fuera del alcance para la siguiente carrera. Copiado, Base Uno. Luke, toma a Rojo Dos y Tres. Aguanten aquí y esperen mi señal... para comenzar su carrera.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Ella es la del mensaje.. Tenemos que ayudarla. No te hagas ilusiones. El viejo quiere que esperemos aquí.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>¿A dónde vas? Bueno, no voy por ahí. Es demasiado rocoso. Este camino es mucho más fácil. ¿Qué te hace pensar que hay asentamientos por allí? No te pongas técnico conmigo. ¿Qué misión? ¿De qué estás hablando? ¡Ya he tenido suficiente de ti! ¡Vete por ahí! ¡Estarás mal en un día, montón de chatarra miope! Y no dejes que te pille siguiéndome suplicando ayuda, porque no la tendrás. No más aventuras.</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Muestra de texto y tratamiento del color</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd36-2-pia11735_orig.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=44e5721d038ddca51c84b8ff96099368","id":null,"dimRatio":60,"focalPoint":{"x":"0.37","y":"0.47"},"minHeight":596,"minHeightUnit":"px","customGradient":"linear-gradient(135deg,rgb(2,3,129) 49%,rgb(40,116,252) 100%)","contentPosition":"bottom left","align":"full","style":{"spacing":{"padding":{"top":"80px","right":"80px","bottom":"20px","left":"80px"}}}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-bottom-left" style="padding-top:80px;padding-right:80px;padding-bottom:20px;padding-left:80px;min-height:596px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgb(2,3,129) 49%,rgb(40,116,252) 100%)"></span><img class="wp-block-cover__image-background" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd36-2-pia11735_orig.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=44e5721d038ddca51c84b8ff96099368" style="object-position:37% 47%" data-object-fit="cover" data-object-position="37% 47%" /><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"contentSize":"600px"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":5,"textColor":"white","fontSize":"large"} -->
<h5 class="has-white-color has-text-color has-large-font-size">Categoría o subtítulo</h5>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Un titular convincente que atraiga a los lectores a tu contenido.</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"pale-cyan-blue","textColor":"black","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-black-color has-pale-cyan-blue-background-color has-text-color has-background wp-element-button">LLAMADA A LA ACCIÓN</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->