/* ==========================================================================
   DATAVIDENCE · Patterns y estilos de grupo
   Hero, visual de flujo, secciones, tarjetas, cifras, pasos, callouts,
   personas y rejilla de noticias. Se carga en frontend y editor.
   ========================================================================== */

/* ==========================================================================
   Iconos en bloques: añade la clase "dv-icon--nombre" (Avanzado → Clase CSS)
   ========================================================================== */
.dv-icon--database { --dv-icon: url("../icons/database.svg"); }
.dv-icon--magnifying-glass-chart { --dv-icon: url("../icons/magnifying-glass-chart.svg"); }
.dv-icon--circle-check { --dv-icon: url("../icons/circle-check.svg"); }
.dv-icon--scale-balanced { --dv-icon: url("../icons/scale-balanced.svg"); }
.dv-icon--arrows-rotate { --dv-icon: url("../icons/arrows-rotate.svg"); }
.dv-icon--chart-line { --dv-icon: url("../icons/chart-line.svg"); }
.dv-icon--chart-column { --dv-icon: url("../icons/chart-column.svg"); }
.dv-icon--arrow-right { --dv-icon: url("../icons/arrow-right.svg"); }
.dv-icon--diagram-project { --dv-icon: url("../icons/diagram-project.svg"); }
.dv-icon--lightbulb { --dv-icon: url("../icons/lightbulb.svg"); }
.dv-icon--graduation-cap { --dv-icon: url("../icons/graduation-cap.svg"); }
.dv-icon--code { --dv-icon: url("../icons/code.svg"); }
.dv-icon--arrows-to-eye { --dv-icon: url("../icons/arrows-to-eye.svg"); }
.dv-icon--handshake { --dv-icon: url("../icons/handshake.svg"); }
.dv-icon--comments { --dv-icon: url("../icons/comments.svg"); }
.dv-icon--flask { --dv-icon: url("../icons/flask.svg"); }
.dv-icon--microscope { --dv-icon: url("../icons/microscope.svg"); }
.dv-icon--users { --dv-icon: url("../icons/users.svg"); }
.dv-icon--people-group { --dv-icon: url("../icons/people-group.svg"); }
.dv-icon--brain { --dv-icon: url("../icons/brain.svg"); }
.dv-icon--file-lines { --dv-icon: url("../icons/file-lines.svg"); }
.dv-icon--filter { --dv-icon: url("../icons/filter.svg"); }
.dv-icon--laptop { --dv-icon: url("../icons/laptop.svg"); }
.dv-icon--book-open { --dv-icon: url("../icons/book-open.svg"); }
.dv-icon--circle-info { --dv-icon: url("../icons/circle-info.svg"); }
.dv-icon--dag { --dv-icon: url("../icons/dag.svg"); }
.dv-icon--forest-plot { --dv-icon: url("../icons/forest-plot.svg"); }

/* Uso genérico: icono en línea antes del texto (títulos, párrafos) */
:where([class*="dv-icon--"]):not(svg)::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-end: 0.5em;
	vertical-align: -0.125em;
	background: currentColor;
	-webkit-mask: var(--dv-icon) center / contain no-repeat;
	mask: var(--dv-icon) center / contain no-repeat;
}

/* ==========================================================================
   Secciones (estilos de bloque de Grupo)
   ========================================================================== */
.dv-section,
.is-style-dv-section-surface,
.is-style-dv-section-inverse {
	padding-block: var(--space-section);
}

.is-style-dv-section-surface {
	background-color: var(--color-surface);
}

.is-style-dv-section-inverse {
	--logo-emerald: var(--c-white);
	--logo-teal: var(--c-white);
	--logo-navy: var(--c-white);
	--logo-grey: var(--c-white);
	--color-accent-tint: rgb(52 199 155 / 0.14);
	/* Los componentes internos heredan los tokens ya invertidos */
	--color-heading: var(--color-inverse-heading);
	--color-ink: var(--color-inverse-ink);
	--color-ink-muted: var(--color-inverse-ink);
	--color-ink-soft: var(--color-inverse-ink);
	--color-accent: var(--color-inverse-accent);
	--color-on-accent: var(--c-ink-dark);
	background-color: var(--color-inverse-bg);
	color: var(--color-inverse-ink);
}

.is-style-dv-section-inverse :where(h1, h2, h3, h4, h5, h6) {
	color: var(--color-inverse-heading);
}

.is-style-dv-section-inverse :where(a:not(.wp-element-button)) {
	color: var(--color-inverse-accent);
}

.is-style-dv-section-inverse .is-style-dv-overline,
.is-style-dv-section-inverse .dv-overline {
	color: var(--color-inverse-accent);
}

.is-style-dv-section-inverse .is-style-dv-lead,
.is-style-dv-section-inverse .dv-lead {
	color: var(--color-inverse-ink);
}

/* Encabezado de sección dentro de patterns */
.dv-section-intro {
	max-width: 42rem;
	margin-bottom: var(--space-2xl);
}

.dv-section-intro.has-text-align-center,
.dv-section-intro.is-content-justification-center {
	margin-inline: auto;
	text-align: center;
}

.dv-section-intro:last-child {
	margin-bottom: 0;
}

.dv-section-intro > * {
	margin-block: 0;
}

.dv-section-intro > * + * {
	margin-block-start: var(--space-sm);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.dv-hero {
	position: relative;
	padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 5vw, 6rem);
	overflow: hidden;
	isolation: isolate;
}

/* Papel de datos + halo esmeralda, solo decorativos */
.dv-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(circle, var(--color-divider) 1px, transparent 1.5px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(70% 80% at 80% 45%, #000 20%, transparent 75%);
	mask-image: radial-gradient(70% 80% at 80% 45%, #000 20%, transparent 75%);
}

.dv-hero::after {
	content: "";
	position: absolute;
	top: -20%;
	right: -10%;
	z-index: -1;
	width: 55vw;
	height: 55vw;
	max-width: 48rem;
	max-height: 48rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--color-accent-tint-strong), transparent 65%);
	opacity: 0.7;
	pointer-events: none;
}

.dv-hero__grid {
	gap: clamp(2rem, 1rem + 4vw, 4rem);
}

.dv-hero__content > * {
	margin-block: 0;
}

.dv-hero__content > * + * {
	margin-block-start: var(--space-lg);
}

.dv-hero__content h1 {
	font-size: var(--fs-display);
	line-height: 1.04;
	letter-spacing: var(--tracking-display);
}

.dv-hero__content .is-style-dv-lead {
	max-width: 34rem;
}

.dv-hero__content .wp-block-buttons {
	margin-block-start: var(--space-xl);
}

/* Entrada del hero en carga (sin esperar al scroll). El H1 solo se desplaza,
   sin opacidad, para no retrasar el Largest Contentful Paint. */
@keyframes dv-rise {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

@keyframes dv-rise-soft {
	from {
		transform: translateY(0.5rem);
	}
}

.dv-motion .dv-hero__content > * {
	animation: dv-rise var(--dur-reveal) var(--ease-out) both;
}

.dv-motion .dv-hero__content > h1 {
	animation-name: dv-rise-soft;
}

.dv-motion .dv-hero__content > :nth-child(2) { animation-delay: 60ms; }
.dv-motion .dv-hero__content > :nth-child(3) { animation-delay: 140ms; }
.dv-motion .dv-hero__content > :nth-child(4) { animation-delay: 220ms; }
.dv-motion .dv-hero__content > :nth-child(5) { animation-delay: 300ms; }

/* ==========================================================================
   Visual de flujo (imagotipo animado)
   ========================================================================== */
.dv-flow {
	position: relative;
	margin: 0;
	padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.75rem + 1.5vw, 2rem);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background:
		linear-gradient(var(--color-border-soft) 1px, transparent 1px) 0 0 / 100% 2rem,
		linear-gradient(90deg, var(--color-border-soft) 1px, transparent 1px) 0 0 / 2rem 100%,
		var(--color-card);
	box-shadow: var(--shadow-md);
}

.dv-flow::before {
	content: "fig. 1";
	position: absolute;
	top: 0.75rem;
	left: 1rem;
	color: var(--color-ink-soft);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
}

.dv-flow__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.dv-flow__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3xs) var(--space-2xs);
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px dashed var(--color-border-strong);
	color: var(--color-ink-soft);
	font-family: var(--font-mono);
	font-size: clamp(0.6rem, 0.55rem + 0.25vw, 0.72rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dv-flow__steps span:not(:last-child)::after {
	content: "→";
	margin-inline-start: var(--space-2xs);
	color: var(--color-accent);
}

.dv-flow__steps span:last-child {
	color: var(--color-accent);
	font-weight: 500;
}

/* Secuencia: dato (nodos) → validación (líneas) → evidencia (círculo) → acción (flecha) */
.dv-flow .fv-d1 { --d: 0; }
.dv-flow .fv-d2 { --d: 1; }
.dv-flow .fv-d3 { --d: 2; }
.dv-flow .fv-d4 { --d: 3; }
.dv-flow .fv-d5 { --d: 4; }
.dv-flow .fv-d6 { --d: 5; }
.dv-flow .fv-d7 { --d: 6.5; }
.dv-flow .fv-d8 { --d: 8; }
.dv-flow .fv-d9 { --d: 9; }
.dv-flow .fv-d10 { --d: 10; }

.dv-flow :is(.fv-node, .fv-pop, .fv-plot) {
	transform-box: fill-box;
	transform-origin: center;
}

.dv-motion .dv-flow .fv-draw {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.dv-motion .dv-flow .fv-dash {
	clip-path: inset(0 100% 0 0);
}

.dv-motion .dv-flow :is(.fv-node, .fv-pop, .fv-plot) {
	opacity: 0;
}

.dv-motion .dv-flow.is-visible .fv-draw {
	animation: dv-draw 800ms var(--ease-in-out) forwards;
	animation-delay: calc(200ms + var(--d) * 150ms);
}

.dv-motion .dv-flow.is-visible .fv-dash {
	animation: dv-wipe 600ms var(--ease-out) forwards;
	animation-delay: calc(200ms + var(--d) * 150ms);
}

.dv-motion .dv-flow.is-visible :is(.fv-node, .fv-pop) {
	animation: dv-pop 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	animation-delay: calc(200ms + var(--d) * 150ms);
}

.dv-motion .dv-flow.is-visible .fv-plot {
	animation: dv-plot 450ms var(--ease-out) forwards;
	animation-delay: calc(200ms + var(--d) * 150ms + var(--n, 0) * 45ms);
}

.dv-flow .fv-n1 { --n: 1; }
.dv-flow .fv-n2 { --n: 2; }
.dv-flow .fv-n3 { --n: 3; }
.dv-flow .fv-n4 { --n: 4; }
.dv-flow .fv-n5 { --n: 2; }
.dv-flow .fv-n6 { --n: 3; }
.dv-flow .fv-n7 { --n: 4; }
.dv-flow .fv-n8 { --n: 5; }
.dv-flow .fv-n9 { --n: 7; }

@keyframes dv-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes dv-wipe {
	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes dv-pop {
	from {
		opacity: 0;
		transform: scale(0.3);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes dv-plot {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Parallax muy ligero del visual, solo con scroll-driven animations nativas */
@supports (animation-timeline: scroll()) {
	.dv-motion .dv-hero .dv-flow {
		animation: dv-drift linear both;
		animation-timeline: scroll(root);
		animation-range: 0 80vh;
	}

	@keyframes dv-drift {
		to {
			transform: translateY(-1.75rem);
		}
	}
}

/* ==========================================================================
   Tarjetas (estilos de bloque de Grupo)
   ========================================================================== */
.is-style-dv-card,
.is-style-dv-feature {
	--card-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	position: relative;
	padding: var(--card-pad);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background-color: var(--color-card);
	transition:
		transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out),
		border-color var(--dur-base) var(--ease-out);
}

.is-style-dv-card:hover,
.is-style-dv-feature:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.is-style-dv-section-inverse :is(.is-style-dv-card, .is-style-dv-feature) {
	border-color: var(--color-inverse-border);
	background-color: rgb(255 255 255 / 0.04);
	color: var(--color-inverse-ink);
}

.is-style-dv-feature {
	display: flex;
	flex-direction: column;
}

.is-style-dv-feature > * {
	margin-block: 0;
}

.is-style-dv-feature > * + * {
	margin-block-start: var(--space-xs);
}

.is-style-dv-feature :where(h2, h3, h4) {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
}

.is-style-dv-feature p:not(.dv-link-arrow) {
	color: var(--color-ink-muted);
	font-size: 0.9375rem;
}

.is-style-dv-feature > .dv-link-arrow:last-child {
	margin-block-start: auto;
	padding-top: var(--space-md);
}

/* El enlace "Saber más" hace clicable toda la tarjeta */
.is-style-dv-feature .dv-link-arrow a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-dv-feature:has(.dv-link-arrow a:focus-visible) {
	outline: var(--outline-focus);
	outline-offset: 3px;
}

.is-style-dv-feature .dv-link-arrow a:focus-visible {
	outline: none;
}

/* Icono en baldosa: ::before es la baldosa, ::after el icono */
.is-style-dv-feature[class*="dv-icon--"]::before {
	content: "";
	display: block;
	flex: none;
	width: 3rem;
	height: 3rem;
	margin: 0 0 var(--space-md);
	border-radius: var(--radius-card);
	background: var(--color-accent-tint);
	-webkit-mask: none;
	mask: none;
	transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.is-style-dv-feature[class*="dv-icon--"]::after {
	content: "";
	position: absolute;
	top: calc(var(--card-pad) + 0.8125rem);
	left: calc(var(--card-pad) + 0.8125rem);
	width: 1.375rem;
	height: 1.375rem;
	background: var(--color-accent);
	-webkit-mask: var(--dv-icon) center / contain no-repeat;
	mask: var(--dv-icon) center / contain no-repeat;
	transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.is-style-dv-feature[class*="dv-icon--"]:hover::before {
	background: var(--color-accent);
	transform: rotate(-4deg) scale(1.04);
}

.is-style-dv-feature[class*="dv-icon--"]:hover::after {
	background: var(--color-on-accent);
	transform: rotate(-4deg) scale(1.04);
}

/* ==========================================================================
   Cifras (contadores animados)
   ========================================================================== */
.dv-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-xl) var(--space-lg);
}

.dv-stat {
	padding-inline-start: var(--space-md);
	border-inline-start: 2px dashed var(--color-accent-tint-strong);
}

.dv-stat > * {
	margin-block: 0;
}

.dv-stat__value {
	color: var(--color-heading);
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.dv-stat__label {
	margin-block-start: var(--space-2xs);
	color: var(--color-ink-soft);
	font-family: var(--font-mono);
	font-size: var(--fs-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.is-style-dv-section-inverse .dv-stat {
	border-inline-start-color: rgb(52 199 155 / 0.4);
}

.is-style-dv-section-inverse .dv-stat__label {
	color: var(--color-inverse-ink);
}

/* ==========================================================================
   Pasos del método: dato → validación → evidencia → acción
   ========================================================================== */
.dv-steps {
	--step-node: 2.75rem;
	--step-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	display: grid;
	gap: var(--step-gap);
	counter-reset: dv-step;
}

@media (min-width: 768px) {
	.dv-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.dv-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.dv-step {
	position: relative;
	padding-top: calc(var(--step-node) + var(--space-md));
	counter-increment: dv-step;
}

.dv-step > * {
	margin-block: 0;
}

.dv-step > * + * {
	margin-block-start: var(--space-2xs);
}

/* Nodo numerado (como los nodos del imagotipo) */
.dv-step::before {
	content: counter(dv-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: var(--step-node);
	height: var(--step-node);
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-family: var(--font-mono);
	font-size: 0.875rem;
	font-weight: 500;
}

.dv-step:nth-child(2)::before { background: var(--c-teal-deep); }
.dv-step:nth-child(3)::before { background: var(--color-accent-2); }
.dv-step:nth-child(4)::before { background: var(--color-heading); color: var(--color-bg); }

/* Conector punteado hacia el siguiente paso; se "dibuja" al aparecer */
.dv-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--step-node) / 2 - 1.5px);
	left: calc(var(--step-node) + var(--space-xs));
	right: calc(-1 * var(--step-gap) + var(--space-xs));
	height: 3px;
	background: repeating-linear-gradient(90deg, var(--color-accent) 0 12px, transparent 12px 20px);
	opacity: 0.45;
	transform-origin: left center;
	transition: transform 900ms var(--ease-out);
	transition-delay: calc(var(--i, 0) * var(--stagger) + 250ms);
}

@media (max-width: 767.98px) {
	.dv-step:not(:last-child)::after {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.dv-step:nth-child(2n)::after {
		display: none;
	}
}

.dv-motion .dv-stagger > .dv-step:not(.is-visible)::after {
	transform: scaleX(0);
}

.dv-step :where(h3, h4) {
	font-family: var(--font-body);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

.dv-step p {
	color: var(--color-ink-muted);
	font-size: 0.9375rem;
}

/* ==========================================================================
   Callouts de marca (estilos de bloque de Grupo)
   ========================================================================== */
[class*="is-style-dv-callout-"] {
	--callout: var(--c-emerald);
	--callout-icon: url("../icons/circle-info.svg");
	position: relative;
	padding: 1.125rem 1.375rem 1.125rem 3.625rem;
	border: 1px solid color-mix(in srgb, var(--callout) 16%, transparent);
	border-left: 3px solid var(--callout);
	border-radius: 0 var(--radius-control) var(--radius-control) 0;
	background-color: color-mix(in srgb, var(--callout) 5%, transparent);
	color: var(--color-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

[class*="is-style-dv-callout-"]::before {
	content: "";
	position: absolute;
	top: 1.3rem;
	left: 1.375rem;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--callout);
	-webkit-mask: var(--callout-icon) center / contain no-repeat;
	mask: var(--callout-icon) center / contain no-repeat;
}

[class*="is-style-dv-callout-"] > * {
	margin-block: 0;
}

[class*="is-style-dv-callout-"] > * + * {
	margin-block-start: var(--space-3xs);
}

[class*="is-style-dv-callout-"] > :first-child {
	color: var(--color-heading);
	font-weight: 600;
}

.is-style-dv-callout-metodo {
	--callout: var(--level-3);
	--callout-icon: url("../icons/diagram-project.svg");
}

.is-style-dv-callout-consenso {
	--callout: var(--level-2);
	--callout-icon: url("../icons/circle-check.svg");
}

.is-style-dv-callout-debate {
	--callout: var(--color-ink-soft);
	--callout-icon: url("../icons/comments.svg");
}

.is-style-dv-callout-compruebalo {
	--callout: var(--color-accent);
	--callout-icon: url("../icons/arrows-to-eye.svg");
}

.is-style-dv-callout-nota {
	--callout: var(--color-accent);
}

/* ==========================================================================
   Persona (equipo)
   ========================================================================== */
.dv-person > * {
	margin-block: 0;
}

.dv-person > * + * {
	margin-block-start: var(--space-2xs);
}

.dv-person .wp-block-image {
	margin-bottom: var(--space-md);
	overflow: hidden;
	border-radius: var(--radius-card);
	background: var(--color-surface);
}

.dv-person .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: grayscale(0.35);
	transition: transform 900ms var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.dv-person:hover .wp-block-image img {
	filter: none;
	transform: scale(1.03);
}

.dv-person :where(h3, h4) {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
}

.dv-person .is-style-dv-overline {
	margin-bottom: 0;
	font-size: 0.7rem;
}

.dv-person p:not([class]) {
	color: var(--color-ink-muted);
	font-size: 0.9375rem;
}

/* ==========================================================================
   Rejilla de noticias (bloque Query con la clase dv-news)
   ========================================================================== */
.dv-news .wp-block-post-template {
	gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.dv-news .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-card);
	transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.dv-news .wp-block-post:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.dv-news .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-surface);
}

.dv-news .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease-out);
}

.dv-news .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.dv-news .dv-news__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.dv-news .dv-news__body > * {
	margin-block: 0;
}

.dv-news .dv-news__body > * + * {
	margin-block-start: var(--space-2xs);
}

.dv-news .wp-block-post-terms a {
	position: relative;
	z-index: 2;
	color: var(--color-accent);
	text-decoration: none;
}

.dv-news .wp-block-post-title {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
}

.dv-news .wp-block-post-title a {
	color: var(--color-heading);
	text-decoration: none;
}

.dv-news .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dv-news .wp-block-post:hover .wp-block-post-title a {
	color: var(--color-accent-hover);
}

.dv-news .wp-block-post:has(.wp-block-post-title a:focus-visible) {
	outline: var(--outline-focus);
	outline-offset: 3px;
}

.dv-news .wp-block-post-title a:focus-visible {
	outline: none;
}

.dv-news .wp-block-post-excerpt {
	flex: 1;
	color: var(--color-ink-muted);
	font-size: 0.9375rem;
}

.dv-news .wp-block-post-excerpt__more-text {
	display: none;
}

.dv-news .wp-block-post-date {
	margin-block-start: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border-soft);
}

/* ==========================================================================
   Imagen + texto (columnas con la clase dv-media en la imagen)
   ========================================================================== */
.dv-media {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-md);
}

.dv-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 0;
	object-fit: cover;
}

@supports (animation-timeline: view()) {
	.dv-motion .dv-media img {
		animation: dv-settle linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 45%;
	}

	@keyframes dv-settle {
		from {
			transform: scale(1.08);
		}
	}
}

.dv-split {
	gap: clamp(2rem, 1rem + 5vw, 5rem);
}

.dv-split .wp-block-column > * {
	margin-block: 0;
}

.dv-split .wp-block-column > * + * {
	margin-block-start: var(--space-sm);
}

.dv-split .wp-block-column > :is(.wp-block-buttons, .wp-block-list, [class*="is-style-dv-callout-"]) {
	margin-block-start: var(--space-lg);
}

/* Los contenedores propios con display:grid anulan el margen del flujo */
.dv-stats > *,
.dv-steps > * {
	margin: 0;
}

/* ==========================================================================
   Formulario de contacto (hueco para el plugin)
   ========================================================================== */
.dv-form-slot {
	padding: var(--space-xl);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-card);
	box-shadow: var(--shadow-sm);
}

.dv-contact-list {
	padding: 0;
	list-style: none;
}

.dv-contact-list li + li {
	margin-top: var(--space-xs);
}

.dv-contact-list [class*="dv-icon--"]::before {
	background: var(--color-accent);
}