/* ==========================================================================
   DURACERO · Contenido y estilos de bloque
   Se carga en la web y en el editor, para que lo que se ve al editar sea lo
   mismo que se publica.

   1. Contenido (ritmo vertical, listas, tablas)
   2. Estilos de bloque de la casa (pestaña «Estilos» del editor)
   ========================================================================== */

/* 1. Contenido
   ------------------------------------------------------------------------- */
.dc-contenido {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
}

.dc-contenido--portada {
	padding-block: 0;
}

.dc-contenido > :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--60);
}

.dc-contenido > :is(h2, h3) + * {
	margin-block-start: 0.75rem;
}

.dc-contenido > .alignfull:first-child {
	margin-block-start: 0;
}

.dc-contenido > .alignfull:last-child {
	margin-block-end: 0;
}

/* Listas escritas en el contenido (no las listas de componentes dc-…). */
:where(.dc-contenido, .editor-styles-wrapper) :is(ul, ol):not([class*="is-style-"]):not([class*="dc-"]) {
	padding-left: 1.35em;
}

:where(.dc-contenido, .editor-styles-wrapper) :where(ul, ol):not([class*="dc-"]) > li + li {
	margin-top: 0.35em;
}

:where(.dc-contenido, .editor-styles-wrapper) li::marker {
	color: var(--wp--preset--color--rojo);
}

:where(.dc-contenido, .editor-styles-wrapper) :is(strong, b) {
	font-weight: 700;
}

/* Tablas: siempre desplazables en móvil y con cifras alineadas. */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: lining-nums tabular-nums;
}

.wp-block-table :is(th, td) {
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--wp--preset--color--linea);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead {
	border-bottom: 0;
}

.wp-block-table figcaption {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--antracita);
}

/* 2. Estilos de bloque
   ------------------------------------------------------------------------- */

/* Botones rellenos · esquina cortada (firma de Duracero) */
.wp-block-button:not(.is-style-dc-contorno):not(.is-style-dc-flecha) .wp-block-button__link {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.wp-block-button:not(.is-style-dc-contorno):not(.is-style-dc-flecha) .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--blanco);
	outline-offset: -6px;
}

/* Botón · Contorno */
.wp-block-button.is-style-dc-contorno .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--grafito);
	padding: calc(0.85em - 2px) calc(1.6em - 2px);
}

.wp-block-button.is-style-dc-contorno .wp-block-button__link:hover {
	background: var(--wp--preset--color--grafito);
	border-color: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco);
}

.has-grafito-background-color .wp-block-button.is-style-dc-contorno .wp-block-button__link,
.has-antracita-background-color .wp-block-button.is-style-dc-contorno .wp-block-button__link,
.wp-block-cover .wp-block-button.is-style-dc-contorno .wp-block-button__link {
	color: var(--wp--preset--color--blanco);
}

.has-grafito-background-color .wp-block-button.is-style-dc-contorno .wp-block-button__link:hover,
.has-antracita-background-color .wp-block-button.is-style-dc-contorno .wp-block-button__link:hover,
.wp-block-cover .wp-block-button.is-style-dc-contorno .wp-block-button__link:hover {
	background: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--grafito);
}

/* Botón · Texto con flecha */
.wp-block-button.is-style-dc-flecha .wp-block-button__link {
	padding: 0.25em 0;
	background: transparent;
	color: var(--wp--preset--color--rojo-oscuro);
	border-bottom: 2px solid currentColor;
	border-radius: 0;
}

.wp-block-button.is-style-dc-flecha .wp-block-button__link::after {
	content: " →";
}

.wp-block-button.is-style-dc-flecha .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--grafito);
}

/* Grupo · Sección con espaciado vertical */
.wp-block-group.is-style-dc-seccion {
	padding-block: var(--wp--preset--spacing--70);
}

/* Grupo · Tarjeta */
.wp-block-group.is-style-dc-tarjeta {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
	border-radius: 2px;
	box-shadow: var(--wp--preset--shadow--suave);
}

/* Grupo · Acento rojo lateral */
.wp-block-group.is-style-dc-acento-lateral {
	padding-left: var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--rojo);
}

/* Encabezado · Antetítulo: marcador rojo en paralelogramo + texto en
   mayúsculas, como las etiquetas de sección de los catálogos de Duracero. */
.is-style-dc-antetitulo {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--texto) !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	line-height: 1.4 !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--rojo-oscuro);
}

.is-style-dc-antetitulo::before {
	content: "";
	flex-shrink: 0;
	width: 1.4rem;
	height: 0.85rem;
	background: var(--wp--preset--color--rojo);
	clip-path: polygon(0.45rem 0, 100% 0, calc(100% - 0.45rem) 100%, 0 100%);
}

.is-style-dc-antetitulo.has-text-align-center {
	justify-content: center;
}

.has-grafito-background-color .is-style-dc-antetitulo,
.has-antracita-background-color .is-style-dc-antetitulo,
.wp-block-cover .is-style-dc-antetitulo {
	color: var(--wp--preset--color--blanco);
}

.is-style-dc-antetitulo + :is(h1, h2, h3) {
	margin-top: 0.5rem !important;
}

/* Encabezado · Con barra roja */
.is-style-dc-con-barra {
	position: relative;
	padding-top: 1rem;
}

.is-style-dc-con-barra::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.6rem;
	height: 0.5rem;
	background: repeating-linear-gradient(115deg, var(--wp--preset--color--rojo) 0 5px, transparent 5px 11px);
}

.is-style-dc-con-barra.has-text-align-center::before {
	left: 50%;
	transform: translateX(-50%);
}

/* Lista · Con marcas de verificación */
ul.is-style-dc-check {
	padding-left: 0;
	list-style: none;
}

ul.is-style-dc-check li {
	position: relative;
	padding-left: 1.9em;
}

ul.is-style-dc-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25em;
	height: 1.25em;
	background: var(--wp--preset--color--rojo);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Lista · Con guiones rojos */
ul.is-style-dc-guiones {
	padding-left: 0;
	list-style: none;
}

ul.is-style-dc-guiones li {
	position: relative;
	padding-left: 1.5em;
}

ul.is-style-dc-guiones li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 0.8em;
	height: 2px;
	background: var(--wp--preset--color--rojo);
}

/* Tabla · Técnica (cabecera oscura, filas alternas, primera columna destacada) */
.wp-block-table.is-style-dc-tecnica table {
	border: 1px solid var(--wp--preset--color--linea);
}

.wp-block-table.is-style-dc-tecnica :is(th, td) {
	border-width: 0 0 1px;
	white-space: nowrap;
}

.wp-block-table.is-style-dc-tecnica thead th {
	background: var(--wp--preset--color--grafito);
	color: var(--wp--preset--color--blanco);
	font-weight: 700;
	font-size: 0.875rem;
	/* Sin mayúsculas forzadas: las unidades (mm, kg/ml) deben respetarse. */
	border-color: var(--wp--preset--color--grafito);
}

.wp-block-table.is-style-dc-tecnica tbody tr:nth-child(even) {
	background: var(--wp--preset--color--gris-claro);
}

.wp-block-table.is-style-dc-tecnica tbody tr:hover {
	background: #fdeced;
}

.wp-block-table.is-style-dc-tecnica tbody td:first-child {
	font-weight: 700;
}

/* Imagen · Con marco */
.wp-block-image.is-style-dc-marco img {
	padding: 0.5rem;
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--preset--color--linea);
}

/* Párrafo · Entradilla */
p.is-style-dc-entradilla {
	font-size: var(--wp--preset--font-size--mediano);
	line-height: 1.55;
	color: var(--wp--preset--color--antracita);
}