/**
 * Despacho Theme — Estilos base, layout y componentes.
 * Consume exclusivamente los tokens de tokens.css. Sin valores hardcodeados
 * de color/tamaño fuera de la escala.
 * =============================================================================
 * ÍNDICE
 *   1. Reset y base
 *   2. Tipografía
 *   3. Layout (contenedor, secciones, grid)
 *   4. Botones
 *   5. Cards
 *   6. Header / navegación
 *   7. Hero
 *   8. Servicios
 *   9. Sobre la abogada
 *  10. Testimonios
 *  11. Blog
 *  12. FAQ (acordeón)
 *  13. Contacto y formulario
 *  14. Footer
 *  15. WhatsApp flotante
 *  16. Breadcrumbs
 *  17. Utilidades y accesibilidad
 * =============================================================================
 */

/* ========================================================================== *
 * 1. RESET Y BASE
 * ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--ddk-header-height); }

body {
	margin: 0;
	background: var(--ddk-color-bg);
	color: var(--ddk-color-text);
	font-family: var(--ddk-font-body);
	font-size: var(--ddk-text-base);
	line-height: var(--ddk-leading-normal);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--ddk-color-secondary); text-decoration: none; transition: color var(--ddk-transition-fast); }
a:hover { color: var(--ddk-color-primary); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ddk-color-accent);
	outline-offset: 2px;
	border-radius: var(--ddk-radius-sm);
}

ul, ol { margin: 0; padding: 0; }

/* ========================================================================== *
 * 2. TIPOGRAFÍA
 * ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--ddk-space-4);
	font-family: var(--ddk-font-heading);
	font-weight: var(--ddk-weight-bold);
	line-height: var(--ddk-leading-tight);
	color: var(--ddk-color-heading);
}
h1 { font-size: clamp(2.25rem, 5vw, var(--ddk-text-4xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--ddk-text-3xl)); }
h3 { font-size: var(--ddk-text-xl); }
h4 { font-size: var(--ddk-text-lg); }

p { margin: 0 0 var(--ddk-space-4); }
p:last-child { margin-bottom: 0; }

strong { font-weight: var(--ddk-weight-semibold); }
blockquote {
	margin: var(--ddk-space-6) 0;
	padding: var(--ddk-space-4) var(--ddk-space-6);
	border-left: 4px solid var(--ddk-color-accent);
	background: var(--ddk-color-surface-alt);
	font-style: italic;
	color: var(--ddk-color-text);
}

.ddk-eyebrow {
	display: inline-block;
	font-family: var(--ddk-font-body);
	font-size: var(--ddk-text-xs);
	font-weight: var(--ddk-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ddk-color-accent);
	padding: var(--ddk-space-2) var(--ddk-space-4);
	border: var(--ddk-border-width) solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-full);
	margin-bottom: var(--ddk-space-4);
}
.ddk-section__head--center .ddk-eyebrow { margin-inline: auto; }

.ddk-lead { font-size: var(--ddk-text-lg); color: var(--ddk-color-text-muted); }

/* ========================================================================== *
 * 3. LAYOUT
 * ========================================================================== */
.ddk-container {
	width: 100%;
	max-width: var(--ddk-container-max);
	margin-inline: auto;
	padding-inline: var(--ddk-gutter);
}
.ddk-container--narrow { max-width: var(--ddk-container-narrow); }

.ddk-section { padding-block: clamp(var(--ddk-space-12), 8vw, var(--ddk-space-24)); }
.ddk-section--alt { background: var(--ddk-color-surface-alt); border-radius: var(--ddk-radius-xl); margin: var(--ddk-space-6) var(--ddk-gutter); }
.ddk-section--primary { background: var(--ddk-color-primary); color: var(--ddk-color-primary-contrast); }
.ddk-section--primary h1,
.ddk-section--primary h2,
.ddk-section--primary h3 { color: var(--ddk-color-primary-contrast); }

/* ---- Secciones oscuras: a pantalla completa (edge-to-edge) ---- */
.ddk-section--dark {
	background: var(--ddk-color-primary);
	color: rgba(255, 255, 255, 0.82);
}
.ddk-section--dark h2,
.ddk-section--dark h3 { color: #fff; }
.ddk-section--dark .ddk-lead { color: rgba(255, 255, 255, 0.72); }
.ddk-section--dark .ddk-eyebrow { border-color: rgba(255, 255, 255, 0.22); }

/* Tarjetas dentro de secciones oscuras. */
.ddk-section--dark .ddk-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.ddk-section--dark .ddk-card__text,
.ddk-section--dark .ddk-card__title a { color: rgba(255, 255, 255, 0.72); }
.ddk-section--dark .ddk-card__title,
.ddk-section--dark .ddk-service__title { color: #fff; }
.ddk-section--dark .ddk-service__icon { background: rgba(255, 255, 255, 0.08); color: var(--ddk-color-accent); }
.ddk-section--dark .ddk-btn--link { color: var(--ddk-color-accent); }
.ddk-section--dark .ddk-btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.ddk-section--dark .ddk-btn--outline:hover { background: #fff; color: var(--ddk-color-primary); border-color: #fff; }

/* (El acordeón FAQ usa tarjetas blancas incluso en sección oscura; ver sección 12.) */

/* Carrusel dentro de secciones oscuras. */
.ddk-section--dark .ddk-carousel__dot { background: rgba(255, 255, 255, 0.28); }
.ddk-section--dark .ddk-carousel__dot[aria-selected="true"] { background: var(--ddk-color-accent); }

.ddk-section__head { max-width: 720px; margin-bottom: var(--ddk-space-10); }
.ddk-section__head--center { margin-inline: auto; text-align: center; }

.ddk-grid { display: grid; gap: var(--ddk-space-6); }
.ddk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ddk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ========================================================================== *
 * 4. BOTONES
 * ========================================================================== */
.ddk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ddk-space-2);
	padding: var(--ddk-space-2) var(--ddk-space-5);
	font-family: var(--ddk-font-body);
	font-size: var(--ddk-text-sm);
	font-weight: var(--ddk-weight-semibold);
	line-height: 1;
	border: var(--ddk-border-width) solid transparent;
	border-radius: var(--ddk-radius-full);
	cursor: pointer;
	text-align: center;
	transition: background var(--ddk-transition-fast), color var(--ddk-transition-fast), transform var(--ddk-transition-fast), box-shadow var(--ddk-transition-fast);
}
.ddk-btn:active { transform: translateY(1px); }
/* El CTA "enlace" no es una píldora. */
.ddk-btn--link { border-radius: 0; }

.ddk-btn--primary { background: var(--ddk-color-primary); color: var(--ddk-color-primary-contrast); }
.ddk-btn--primary:hover { background: var(--ddk-color-primary-dark); color: var(--ddk-color-primary-contrast); box-shadow: var(--ddk-shadow-md); }

.ddk-btn--accent { background: var(--ddk-color-accent); color: var(--ddk-color-accent-contrast); }
.ddk-btn--accent:hover { filter: brightness(0.95); color: var(--ddk-color-accent-contrast); box-shadow: var(--ddk-shadow-md); }

.ddk-btn--outline { background: transparent; color: var(--ddk-color-primary); border-color: var(--ddk-color-primary); }
.ddk-btn--outline:hover { background: var(--ddk-color-primary); color: var(--ddk-color-primary-contrast); }

.ddk-btn--ghost { background: transparent; color: var(--ddk-color-primary-contrast); border-color: rgba(255,255,255,0.4); }
.ddk-btn--ghost:hover { background: rgba(255,255,255,0.12); color: var(--ddk-color-primary-contrast); }

.ddk-btn--link { background: transparent; color: var(--ddk-color-primary); border-color: transparent; padding: var(--ddk-space-2) 0; gap: var(--ddk-space-1); }
.ddk-btn--link:hover { color: var(--ddk-color-accent); }
.ddk-btn--link svg { transition: transform var(--ddk-transition-fast); }
.ddk-btn--link:hover svg { transform: translateX(3px); }

.ddk-btn--lg { padding: var(--ddk-space-3) var(--ddk-space-6); font-size: var(--ddk-text-base); }
.ddk-btn--block { width: 100%; }

/* ========================================================================== *
 * 5. CARDS
 * ========================================================================== */
.ddk-card {
	display: flex;
	flex-direction: column;
	background: var(--ddk-color-surface);
	border: var(--ddk-border-width) solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-lg);
	box-shadow: var(--ddk-shadow-sm);
	overflow: hidden;
	transition: transform var(--ddk-transition-base), box-shadow var(--ddk-transition-base);
}
.ddk-card:hover { transform: translateY(-4px); box-shadow: var(--ddk-shadow-md); }
.ddk-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ddk-gray-100); }
.ddk-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ddk-card__body { padding: var(--ddk-space-6); display: flex; flex-direction: column; gap: var(--ddk-space-3); flex: 1; }
.ddk-card__title { margin: 0; font-size: var(--ddk-text-xl); }
.ddk-card__text { color: var(--ddk-color-text-muted); margin: 0; }
.ddk-card__foot { margin-top: auto; padding-top: var(--ddk-space-2); }

/* ========================================================================== *
 * 6. HEADER / NAVEGACIÓN
 * ========================================================================== */
.ddk-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ddk-color-primary);
	border-bottom: var(--ddk-border-width) solid rgba(255, 255, 255, 0.12);
	min-height: var(--ddk-header-height);
	display: flex;
	align-items: center;
}
.ddk-header .ddk-brand { color: var(--ddk-color-primary-contrast); }
.ddk-header .ddk-nav__menu a { color: rgba(255, 255, 255, 0.85); }
.ddk-header .ddk-nav__menu a:hover,
.ddk-header .ddk-nav__menu .current-menu-item > a { color: var(--ddk-color-accent); }
.ddk-header .ddk-nav-toggle span { background: var(--ddk-color-primary-contrast); }
.ddk-header .ddk-nav__cta {
	background: var(--ddk-color-accent);
	border-color: var(--ddk-color-accent);
	color: var(--ddk-color-accent-contrast);
}
.ddk-header .ddk-nav__cta:hover {
	background: var(--ddk-color-accent);
	border-color: var(--ddk-color-accent);
	color: var(--ddk-color-accent-contrast);
	opacity: 0.9;
}
.ddk-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ddk-space-6); width: 100%; }
.ddk-brand { display: inline-flex; align-items: center; gap: var(--ddk-space-3); font-family: var(--ddk-font-heading); font-weight: var(--ddk-weight-bold); font-size: var(--ddk-text-xl); color: var(--ddk-color-primary); }
.ddk-brand img { max-height: 52px; width: auto; }

.ddk-nav { display: flex; align-items: center; gap: var(--ddk-space-6); }
.ddk-nav__menu { display: flex; align-items: center; gap: var(--ddk-space-5); list-style: none; }
.ddk-nav__menu a { color: var(--ddk-color-text); font-weight: var(--ddk-weight-medium); }
.ddk-nav__menu a:hover,
.ddk-nav__menu .current-menu-item > a { color: var(--ddk-color-primary); }

.ddk-nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	padding: var(--ddk-space-2);
	cursor: pointer;
}
.ddk-nav-toggle span { width: 26px; height: 2px; background: var(--ddk-color-primary); transition: var(--ddk-transition-fast); }

@media (max-width: 1024px) {
	.ddk-nav-toggle { display: flex; }
	.ddk-nav {
		position: fixed;
		inset: var(--ddk-header-height) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--ddk-color-bg);
		border-bottom: var(--ddk-border-width) solid var(--ddk-color-border);
		box-shadow: var(--ddk-shadow-lg);
		padding: var(--ddk-space-4) var(--ddk-gutter);
		transform: translateY(-120%);
		transition: transform var(--ddk-transition-base);
	}
	.ddk-nav.is-open { transform: translateY(0); }
	.ddk-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
	.ddk-nav__menu li { border-bottom: var(--ddk-border-width) solid var(--ddk-color-border); }
	.ddk-nav__menu a { display: block; padding: var(--ddk-space-4) 0; }
	.ddk-nav__cta { margin-top: var(--ddk-space-4); }

	/* Panel móvil del header interior: mismo azul que la barra. */
	.ddk-header .ddk-nav {
		background: var(--ddk-color-primary);
		border-bottom-color: rgba(255, 255, 255, 0.15);
	}
	.ddk-header .ddk-nav__menu li { border-bottom-color: rgba(255, 255, 255, 0.12); }
}

/* ========================================================================== *
 * 7. HERO
 * ========================================================================== */
.ddk-hero { margin: 0; }
.ddk-hero__card {
	position: relative;
	background:
		radial-gradient(120% 90% at 50% 8%, rgba(60, 108, 120, 0.35) 0%, rgba(21, 35, 60, 0) 55%),
		var(--ddk-color-primary);
	color: rgba(255, 255, 255, 0.85);
	overflow: hidden;
	padding-block: clamp(var(--ddk-space-5), 3.5vw, var(--ddk-space-10));
}
.ddk-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--ddk-container-max);
	margin-inline: auto;
	padding-inline: var(--ddk-gutter);
}
.ddk-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ddk-hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }

/* --- Menú integrado --- */
.ddk-hero__nav {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--ddk-space-3);
	padding-bottom: clamp(var(--ddk-space-6), 4vw, var(--ddk-space-12));
}
.ddk-hero__brand { margin-right: auto; }
.ddk-hero__brand .ddk-brand { color: #fff; font-size: var(--ddk-text-xl); }
.ddk-hero__brand img { max-height: 44px; width: auto; }
.ddk-hero__nav-cta { order: 2; }
.ddk-hero__nav .ddk-nav-toggle { order: 3; }
.ddk-hero__nav .ddk-nav-toggle span { background: #fff; }
.ddk-hero__nav .ddk-nav__portal { color: var(--ddk-color-text); font-weight: var(--ddk-weight-medium); font-size: var(--ddk-text-sm); }
@media (max-width: 520px) { .ddk-hero__nav-cta { display: none; } }

@media (min-width: 1025px) {
	.ddk-hero__nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--ddk-space-4); }
	.ddk-hero__brand { margin-right: 0; justify-self: start; }
	.ddk-hero__nav .ddk-nav { justify-self: center; gap: var(--ddk-space-4); }
	.ddk-hero__nav-cta { justify-self: end; }
	.ddk-nav__menu--pill {
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: var(--ddk-radius-full);
		padding: 6px;
		gap: 2px;
	}
	.ddk-nav__menu--pill li a {
		display: block;
		padding: var(--ddk-space-2) var(--ddk-space-4);
		border-radius: var(--ddk-radius-full);
		color: rgba(255, 255, 255, 0.82);
		font-weight: var(--ddk-weight-medium);
		font-size: var(--ddk-text-sm);
	}
	.ddk-nav__menu--pill li a:hover,
	.ddk-nav__menu--pill .current-menu-item > a { background: rgba(255, 255, 255, 0.12); color: #fff; }
	.ddk-hero__nav .ddk-nav__portal { color: rgba(255, 255, 255, 0.78); }
	.ddk-hero__nav .ddk-nav__portal:hover { color: #fff; }
}

/* --- Cuerpo --- */
.ddk-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--ddk-space-6);
}
/* En móvil las columnas se disuelven y ordenamos hijo por hijo:
   foto · pastilla · reseña · título · CTA. */
.ddk-hero__col     { display: contents; }
.ddk-hero__figure  { order: 1; }
.ddk-hero__eyebrow { order: 2; }
.ddk-hero__review  { order: 3; }
.ddk-hero__content { order: 4; }
.ddk-hero__cta     { order: 5; }

/* En escritorio vuelve al layout de 3 columnas de siempre:
   izquierda (pastilla + título) · foto centro · reseña + CTA a la derecha. */
@media (min-width: 1000px) {
	.ddk-hero__body {
		display: grid;
		grid-template-columns: 1fr 1.15fr 1fr;
		grid-template-rows: 1fr;
		column-gap: var(--ddk-space-4);
		align-items: center;
		text-align: left;
		min-height: 620px;
	}
	/*
	 * Variante sin retrato: el hero pasa de tres a dos columnas. No queda una
	 * banda central vacía; el titular conserva protagonismo y la prueba social
	 * con el CTA forman un segundo bloque equilibrado.
	 */
	.ddk-hero__body--nophoto {
		grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
		column-gap: clamp(var(--ddk-space-10), 8vw, var(--ddk-space-24));
		min-height: clamp(360px, 34vw, 500px);
	}
	.ddk-hero__col { display: flex; flex-direction: column; }
	.ddk-hero__col--left  { grid-column: 1; gap: var(--ddk-space-5); }
	/*
	 * La figura necesita una altura propia: al tener la foto en posición
	 * absoluta, una fila de grid con solo ese contenido puede quedarse sin
	 * altura en algunos navegadores/previsualizaciones del Customizer. Con una
	 * banda explícita la foto siempre conserva su área central y no empuja el
	 * texto de las columnas laterales.
	 */
	.ddk-hero__figure {
		grid-column: 2;
		grid-row: 1;
		align-self: stretch;
		position: relative;
		height: 620px;
		min-height: 620px;
		z-index: 2;
	}
	.ddk-hero__figure .ddk-hero__photo {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 100%;
		height: 620px;
		max-width: none;
		max-height: none;
		margin: 0;
		object-fit: contain;
		object-position: bottom center;
	}
	.ddk-hero__col--right { grid-column: 3; gap: var(--ddk-space-5); align-items: flex-end; text-align: right; }
	.ddk-hero__body--nophoto .ddk-hero__col--left { max-width: 680px; }
	.ddk-hero__body--nophoto .ddk-hero__col--right {
		grid-column: 2;
		align-items: flex-start;
		text-align: left;
	}
	/* Sin reseña, no reservamos una tercera columna vacía. */
	.ddk-hero__body--noreview:not(.ddk-hero__body--nophoto) {
		grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
		column-gap: clamp(var(--ddk-space-8), 6vw, var(--ddk-space-20));
	}
	.ddk-hero__body--noreview:not(.ddk-hero__body--nophoto) .ddk-hero__figure { grid-column: 2; }

	/* Hero mínimo: sello, titular, texto y CTA centrados, sin huecos. */
	.ddk-hero__body--nophoto.ddk-hero__body--noreview {
		grid-template-columns: minmax(0, 760px);
		justify-content: center;
		min-height: clamp(360px, 34vw, 500px);
		text-align: center;
	}
	.ddk-hero__body--nophoto.ddk-hero__body--noreview .ddk-hero__col--left {
		grid-column: 1;
		align-items: center;
		margin-inline: auto;
		text-align: center;
	}
	.ddk-hero__body--nophoto.ddk-hero__body--noreview .ddk-hero__cta { text-align: center; }
}

.ddk-hero__content { max-width: 560px; }
.ddk-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ddk-space-2);
	padding: var(--ddk-space-2) var(--ddk-space-4);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--ddk-radius-full);
	font-size: var(--ddk-text-xs);
	font-weight: var(--ddk-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}
.ddk-hero__pill svg { color: var(--ddk-color-accent); }
.ddk-hero__title {
	color: #fff;
	font-weight: 800;
	font-size: clamp(2.6rem, 5.5vw, 4.2rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
	overflow-wrap: break-word;
}
/* Escala automática según la longitud detectada en el template del hero. */
.ddk-hero__title--long { font-size: clamp(2.35rem, 4.25vw, 3.45rem); line-height: 1.06; }
.ddk-hero__title--xlong { font-size: clamp(2.1rem, 3.5vw, 3rem); line-height: 1.08; }
.ddk-hero__accent { color: var(--ddk-color-accent); display: block; }
.ddk-hero__lead { font-size: var(--ddk-text-lg); color: rgba(255, 255, 255, 0.78); margin: var(--ddk-space-5) 0 0; }

/* Foto central. En móvil (flex) hereda align-self:stretch por defecto;
   en escritorio la regla del grid (align-self:end) la ancla abajo. */
.ddk-hero__figure { text-align: center; }
.ddk-hero__photo { display: block; width: auto; max-width: 100%; max-height: 620px; margin-inline: auto; }
@media (max-width: 999px) { .ddk-hero__photo { max-height: 460px; } }

/* En móvil la reseña va sin tarjeta (limpia sobre el fondo) y centrada. */
@media (max-width: 999px) {
	/*
	 * Sin imagen, el flujo móvil prioriza el mensaje: sello → titular →
	 * reseña → CTA. La reseña recupera una anchura de tarjeta para no ocupar
	 * toda la pantalla y el titular reduce su escala en tablet y móvil.
	 */
	.ddk-hero__body--nophoto {
		gap: clamp(var(--ddk-space-4), 4vw, var(--ddk-space-6));
		padding-block: var(--ddk-space-3) var(--ddk-space-6);
	}
	.ddk-hero__body--nophoto .ddk-hero__content { max-width: 640px; }
	.ddk-hero__body--nophoto .ddk-hero__content { order: 3; }
	.ddk-hero__body--nophoto .ddk-hero__pill {
		padding: var(--ddk-space-1) var(--ddk-space-3);
		font-size: clamp(0.625rem, 2.3vw, 0.7rem);
		letter-spacing: 0.06em;
	}
	.ddk-hero__body--nophoto .ddk-hero__pill svg {
		width: 14px;
		height: 14px;
	}
	.ddk-hero__body--nophoto .ddk-hero__review {
		order: 4;
		width: min(100%, 300px);
		max-width: 300px;
		padding: 0;
		background: transparent;
		border: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		text-align: center;
	}
	.ddk-hero__body--nophoto .ddk-hero__review-head { justify-content: center; }
	.ddk-hero__body--nophoto .ddk-hero__review-brand {
		width: 26px;
		height: 26px;
	}
	.ddk-hero__body--nophoto .ddk-hero__review-brand svg { width: 17px; height: 17px; }
	/* Evita que margin-right:auto separe logos y valoración en extremos. */
	.ddk-hero__body--nophoto .ddk-hero__review-brands {
		margin-right: var(--ddk-space-3);
		flex: 0 0 auto;
	}
	.ddk-hero__body--nophoto .ddk-stars {
		display: inline-flex;
		gap: 2px;
		flex: 0 0 auto;
	}
	.ddk-hero__body--nophoto .ddk-stars svg { width: 20px; height: 20px; }
	.ddk-hero__body--nophoto .ddk-hero__review-head strong { font-size: var(--ddk-text-base); }
	.ddk-hero__body--nophoto .ddk-hero__review-count {
		font-size: var(--ddk-text-xs);
		text-align: center;
	}
	.ddk-hero__body--nophoto .ddk-hero__title {
		font-size: clamp(2.35rem, 9vw, 3.4rem);
		line-height: 1.06;
	}
	.ddk-hero__title--long { font-size: clamp(2.2rem, 7.5vw, 3rem); }
	.ddk-hero__title--xlong { font-size: clamp(2rem, 6.5vw, 2.65rem); }
	.ddk-hero__body--nophoto .ddk-hero__title--long { font-size: clamp(2.15rem, 7.5vw, 2.9rem); }
	.ddk-hero__body--nophoto .ddk-hero__title--xlong { font-size: clamp(1.95rem, 6.5vw, 2.55rem); }
	.ddk-hero__body--nophoto .ddk-hero__lead {
		font-size: clamp(1rem, 2.8vw, 1.125rem);
	}
	.ddk-hero__body--nophoto.ddk-hero__body--noreview {
		gap: clamp(var(--ddk-space-3), 3vw, var(--ddk-space-5));
		padding-block: var(--ddk-space-4) var(--ddk-space-8);
	}
	.ddk-hero__body--nophoto.ddk-hero__body--noreview .ddk-hero__cta { text-align: center; }

	/* Mayor especificidad que la regla base: evita recuperar la tarjeta desktop. */
	.ddk-hero__body .ddk-hero__review {
		width: min(100%, 300px);
		background: transparent;
		border: 0;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		padding: 0;
		max-width: 300px;
		text-align: center;
	}
	.ddk-hero__body .ddk-hero__review-head { justify-content: center; }
	.ddk-hero__body .ddk-hero__review-brands {
		margin-right: var(--ddk-space-3);
		flex: 0 0 auto;
	}
	.ddk-hero__body .ddk-stars { display: inline-flex; gap: 2px; flex: 0 0 auto; }
	.ddk-hero__body .ddk-stars svg { width: 20px; height: 20px; }
	.ddk-hero__body .ddk-hero__review-brand { width: 26px; height: 26px; }
	.ddk-hero__body .ddk-hero__review-brand svg { width: 17px; height: 17px; }
	.ddk-hero__body .ddk-hero__review-head strong { font-size: var(--ddk-text-base); }
	.ddk-hero__body .ddk-hero__review-count { font-size: var(--ddk-text-xs); text-align: center; }
	.ddk-hero__body .ddk-hero__review p { display: none; }
}
.ddk-hero__review {
	max-width: 300px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, 0.82);
	border-radius: var(--ddk-radius-lg);
	padding: var(--ddk-space-5);
	text-align: left;
}
.ddk-hero__review-head { display: flex; align-items: center; gap: var(--ddk-space-2); }
.ddk-hero__review-brands { display: inline-flex; align-items: center; margin-right: auto; }
.ddk-hero__review-brand {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: var(--ddk-radius-full);
	background: #fff;
	box-shadow: 0 0 0 2px rgba(21, 35, 60, 0.9);
}
.ddk-hero__review-brand + .ddk-hero__review-brand { margin-left: -8px; }
.ddk-hero__review-brand svg { width: 20px; height: 20px; }
.ddk-hero__review-brand--facebook { background: #1877f2; color: #fff; }
.ddk-hero__review-brand--instagram { background: #e4405f; color: #fff; }
.ddk-hero__review-brand--linkedin { background: #0a66c2; color: #fff; }
.ddk-hero__review-brand--whatsapp { background: #25d366; color: #fff; }
.ddk-hero__review-brand--x { background: #000; color: #fff; }
.ddk-hero__review-brand--star { background: var(--ddk-color-accent); color: #fff; }
.ddk-hero__review-head strong { color: #fff; font-size: var(--ddk-text-lg); }
.ddk-hero__review-count { display: block; font-size: var(--ddk-text-sm); font-weight: var(--ddk-weight-semibold); color: #fff; margin-top: 2px; }
.ddk-hero__review p { font-size: var(--ddk-text-sm); color: rgba(255, 255, 255, 0.7); margin: var(--ddk-space-3) 0 0; line-height: 1.5; }

/* Barra de estadísticas */
.ddk-hero__stats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ddk-space-6);
	padding-top: clamp(var(--ddk-space-6), 3vw, var(--ddk-space-10));
	margin-top: clamp(var(--ddk-space-6), 3vw, var(--ddk-space-10));
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
@media (min-width: 760px) { .ddk-hero__stats { grid-template-columns: repeat(4, 1fr); } }
.ddk-hero__stat { display: flex; align-items: center; gap: var(--ddk-space-3); }
.ddk-hero__stat-icon { flex: 0 0 auto; color: var(--ddk-color-accent); }
.ddk-hero__stat-text strong { display: block; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; line-height: 1; }
.ddk-hero__stat-text span { font-size: var(--ddk-text-sm); color: rgba(255, 255, 255, 0.65); }

/* --- Botón con flecha en círculo (global) --- */
.ddk-btn--arrow { gap: var(--ddk-space-2); padding-right: 5px; }
.ddk-btn__arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--ddk-radius-full); background: var(--ddk-color-primary); color: #fff; }
.ddk-btn--arrow.ddk-btn--lg .ddk-btn__arrow { width: 32px; height: 32px; }

/* ========================================================================== *
 * 8. SERVICIOS
 * ========================================================================== */
/* Cabecera de servicios (título izquierda, texto + flechas derecha). */
.ddk-services__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ddk-space-6);
	align-items: end;
	margin-bottom: var(--ddk-space-10);
}
@media (min-width: 800px) { .ddk-services__head { grid-template-columns: 1fr 1fr; } }
.ddk-services__intro h2 { margin: 0; font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.ddk-services__aside { display: flex; flex-direction: column; gap: var(--ddk-space-5); }
@media (min-width: 800px) { .ddk-services__aside { align-items: flex-end; text-align: right; } }
.ddk-services__aside .ddk-lead { max-width: 420px; margin: 0; }
.ddk-services__arrows { display: flex; gap: var(--ddk-space-3); }
.ddk-services__arrow {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: var(--ddk-radius-full);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background var(--ddk-transition-fast), color var(--ddk-transition-fast), opacity var(--ddk-transition-fast);
}
.ddk-services__arrow:hover { background: rgba(255, 255, 255, 0.2); }
.ddk-services__arrow--next { background: #fff; color: var(--ddk-color-accent); border-color: #fff; }
.ddk-services__arrow--next:hover { background: var(--ddk-color-accent); color: #fff; }
.ddk-services__arrow:disabled { opacity: 0.35; cursor: default; }
.ddk-services__arrow[hidden] { display: none; }

/* Tarjeta de servicio. */
.ddk-service-card {
	display: flex;
	flex-direction: column;
	background: var(--ddk-color-surface);
	border-radius: var(--ddk-radius-lg);
	padding: var(--ddk-space-5);
	overflow: hidden;
}
.ddk-service-card--featured {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.30));
	border: 1px solid rgba(255, 255, 255, 0.12);
}
.ddk-service-card__tag {
	align-self: flex-start;
	padding: var(--ddk-space-2) var(--ddk-space-4);
	border: 1px solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-full);
	font-size: var(--ddk-text-xs);
	font-weight: var(--ddk-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ddk-color-text);
	margin-bottom: var(--ddk-space-4);
}
.ddk-service-card--featured .ddk-service-card__tag { color: #fff; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06); }
.ddk-service-card__title { font-size: var(--ddk-text-xl); font-weight: 700; line-height: 1.15; color: var(--ddk-color-heading); margin: 0 0 var(--ddk-space-4); }
/* En sección oscura, el h3 se vuelve blanco por defecto: forzar navy en tarjetas blancas y blanco solo en la superpuesta. */
.ddk-section--dark .ddk-service-card__title { color: var(--ddk-color-heading); }
.ddk-section--dark .ddk-service-card__title--overlay { color: #fff; }

/* Media (tarjetas blancas): imagen bajo el título */
.ddk-service-card__media { border-radius: var(--ddk-radius-md); overflow: hidden; aspect-ratio: 16 / 11; margin-bottom: var(--ddk-space-4); background: var(--ddk-gray-100); }
.ddk-service-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Media destacada: imagen dominante con el título superpuesto encima */
.ddk-service-card__media--overlay { position: relative; aspect-ratio: auto; flex: 1 1 auto; min-height: 260px; }
.ddk-service-card__media--overlay img { position: absolute; inset: 0; }
.ddk-service-card__media--overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 55%); }
.ddk-service-card__title--overlay {
	position: absolute;
	left: var(--ddk-space-5);
	right: var(--ddk-space-5);
	bottom: var(--ddk-space-4);
	z-index: 1;
	color: #fff;
	margin: 0;
}

.ddk-service-card__foot { margin-top: auto; padding-top: var(--ddk-space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ddk-space-4); }
.ddk-service-card__desc {
	margin: 0;
	color: var(--ddk-color-text-muted);
	font-size: var(--ddk-text-sm);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ddk-service-card--featured .ddk-service-card__desc { color: rgba(255, 255, 255, 0.72); }
.ddk-service-card__arrow {
	flex: 0 0 auto;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: var(--ddk-radius-full);
	border: 1px solid var(--ddk-color-border);
	color: var(--ddk-color-accent);
	transition: background var(--ddk-transition-fast), color var(--ddk-transition-fast);
}
.ddk-service-card__arrow:hover { background: var(--ddk-color-accent); color: #fff; border-color: var(--ddk-color-accent); }
.ddk-service-card--featured .ddk-service-card__arrow { background: rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.ddk-service-card--featured .ddk-service-card__arrow:hover { background: var(--ddk-color-accent); border-color: var(--ddk-color-accent); color: #fff; }

/* ========================================================================== *
 * 9. SOBRE LA ABOGADA
 * ========================================================================== */
.ddk-about__grid { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-12); align-items: center; }
@media (min-width: 900px) { .ddk-about__grid { grid-template-columns: 5fr 7fr; } }
.ddk-about__photo { border-radius: var(--ddk-radius-lg); overflow: hidden; box-shadow: var(--ddk-shadow-lg); aspect-ratio: 5 / 6; }
.ddk-about__photo img { width: 100%; height: 100%; object-fit: cover; }
.ddk-about__credentials { list-style: none; display: grid; gap: var(--ddk-space-3); margin-top: var(--ddk-space-6); }
.ddk-about__credentials li { display: flex; gap: var(--ddk-space-3); align-items: flex-start; }
.ddk-about__credentials svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--ddk-color-accent); margin-top: 2px; }
.ddk-about__cta { margin-top: var(--ddk-space-8); }

/* Layout de texto a dos columnas (cuando el hero tiene foto) */
.ddk-about__split { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-8); }
@media (min-width: 900px) { .ddk-about__split { grid-template-columns: 5fr 6fr; gap: clamp(var(--ddk-space-10), 6vw, var(--ddk-space-20)); align-items: start; } }
.ddk-about__title { font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.ddk-about__body p { color: var(--ddk-color-text-muted); }
.ddk-about__body p:first-child { font-size: var(--ddk-text-lg); font-weight: var(--ddk-weight-semibold); color: var(--ddk-color-text); }

/* ========================================================================== *
 * 10. TESTIMONIOS
 * ========================================================================== */
/* Cabecera (título izquierda, flechas derecha). */
.ddk-testimonials__head { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-6); align-items: center; margin-bottom: var(--ddk-space-10); }
@media (min-width: 800px) { .ddk-testimonials__head { grid-template-columns: 1fr auto; } }
.ddk-testimonials__intro h2 { margin: 0; font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.ddk-testimonials__arrows { display: flex; gap: var(--ddk-space-3); }
.ddk-testimonials__arrow {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: var(--ddk-radius-full);
	background: var(--ddk-color-surface);
	color: var(--ddk-color-accent);
	border: 1px solid var(--ddk-color-border);
	box-shadow: var(--ddk-shadow-sm);
	cursor: pointer;
	transition: background var(--ddk-transition-fast), color var(--ddk-transition-fast), border-color var(--ddk-transition-fast), opacity var(--ddk-transition-fast);
}
.ddk-testimonials__arrow:hover { background: var(--ddk-color-accent); color: #fff; border-color: var(--ddk-color-accent); }
.ddk-testimonials__arrow:disabled { opacity: 0.4; cursor: default; }
.ddk-testimonials__arrow:disabled:hover { background: var(--ddk-color-surface); color: var(--ddk-color-accent); border-color: var(--ddk-color-border); }
.ddk-testimonials__arrow[hidden] { display: none; }

/* 2 o 3 tarjetas por vista según el Customizer (1 en móvil). El ancho exacto
   se calcula en PHP (--ddk-tst-basis) para que coincida con el área visible. */
.ddk-testimonials .ddk-carousel__item { flex-basis: 100%; }
@media (min-width: 720px) {
	.ddk-testimonials .ddk-carousel__item { flex-basis: var(--ddk-tst-basis, calc((100% - 24px) / 2)); }
}

/* Tarjeta de reseña. */
.ddk-testimonial-card {
	position: relative;
	background: var(--ddk-color-surface);
	border: 1px solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-lg);
	box-shadow: var(--ddk-shadow-md);
	padding: clamp(var(--ddk-space-6), 3vw, var(--ddk-space-10));
	overflow: hidden;
}
.ddk-testimonial-card__mark { position: absolute; top: var(--ddk-space-3); right: var(--ddk-space-8); font-family: Georgia, 'Times New Roman', serif; font-size: 7rem; line-height: 1; color: var(--ddk-gray-200); pointer-events: none; }
.ddk-testimonial-card__head { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--ddk-space-4); margin-bottom: var(--ddk-space-6); }
.ddk-testimonial-card__avatar {
	flex: 0 0 auto;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: var(--ddk-radius-full);
	background: #fff;
	border: 1px solid var(--ddk-color-border);
	box-shadow: var(--ddk-shadow-sm);
}
.ddk-testimonial-card__name { display: block; font-weight: var(--ddk-weight-bold); color: var(--ddk-color-primary); margin-bottom: 3px; }
/* Cita: sin el fondo/borde global de blockquote. */
.ddk-testimonial-card__quote {
	position: relative;
	z-index: 1;
	margin: 0 0 var(--ddk-space-6);
	padding: 0;
	border: 0;
	background: none;
	font-style: italic;
	font-size: var(--ddk-text-lg);
	line-height: 1.55;
	color: var(--ddk-gray-600);
}
.ddk-testimonial-card__role { font-weight: var(--ddk-weight-bold); color: var(--ddk-color-primary); }

/* Sin padding lateral: así el área visible = ancho de las tarjetas (sin cortes).
   Solo padding vertical para que la sombra no se recorte arriba/abajo. */
.ddk-testimonials .ddk-carousel__track {
	padding: var(--ddk-space-3) 0 var(--ddk-space-8);
}

.ddk-stars { color: var(--ddk-color-accent); display: inline-flex; gap: 2px; }
.ddk-stars svg { width: 18px; height: 18px; }

/* Carrusel (testimonios) — responsive por scroll-snap. */
.ddk-carousel { position: relative; }
.ddk-carousel__track {
	display: flex;
	gap: var(--ddk-space-6);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: var(--ddk-space-1) var(--ddk-space-1) var(--ddk-space-3);
	scrollbar-width: none;              /* Firefox */
}
.ddk-carousel__track::-webkit-scrollbar { display: none; } /* WebKit */
.ddk-carousel__track:focus-visible { outline: 3px solid var(--ddk-color-accent); outline-offset: 4px; border-radius: var(--ddk-radius-lg); }

/* 3 por vista (escritorio). item = (100% - 2*gap) / 3 */
.ddk-carousel__item {
	scroll-snap-align: start;
	flex: 0 0 calc((100% - (var(--ddk-space-6) * 2)) / 3);
	min-width: 0;
}
@media (max-width: 1024px) { /* 2 por vista (tablet) */
	.ddk-carousel__item { flex-basis: calc((100% - var(--ddk-space-6)) / 2); }
}
@media (max-width: 640px) {  /* 1 por vista (móvil) */
	.ddk-carousel__item { flex-basis: 100%; }
}

/* Puntos de navegación (dots). */
.ddk-carousel__dots {
	display: flex;
	justify-content: center;
	gap: var(--ddk-space-2);
	margin-top: var(--ddk-space-6);
}
.ddk-carousel__dots[hidden] { display: none; }
.ddk-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: var(--ddk-radius-full);
	background: var(--ddk-color-border);
	cursor: pointer;
	transition: background var(--ddk-transition-fast), transform var(--ddk-transition-fast), width var(--ddk-transition-fast);
}
.ddk-carousel__dot:hover { background: var(--ddk-gray-400); }
.ddk-carousel__dot[aria-selected="true"] {
	background: var(--ddk-color-accent);
	width: 26px;
}

/* Viewport + flechas laterales (usado en el carrusel del blog). */
.ddk-carousel__viewport { position: relative; }
.ddk-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: var(--ddk-radius-full);
	background: var(--ddk-color-surface);
	color: var(--ddk-color-primary);
	border: var(--ddk-border-width) solid var(--ddk-color-border);
	box-shadow: var(--ddk-shadow-md);
	cursor: pointer;
	transition: background var(--ddk-transition-fast), color var(--ddk-transition-fast), opacity var(--ddk-transition-fast);
}
.ddk-carousel__arrow:hover { background: var(--ddk-color-primary); color: var(--ddk-color-primary-contrast); border-color: var(--ddk-color-primary); }
.ddk-carousel__arrow--prev { left: -12px; }
.ddk-carousel__arrow--next { right: -12px; }
.ddk-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.ddk-carousel__arrow:disabled:hover { background: var(--ddk-color-surface); color: var(--ddk-color-primary); border-color: var(--ddk-color-border); }
.ddk-carousel__arrow[hidden] { display: none; }
@media (max-width: 640px) {
	.ddk-carousel__arrow { display: none; } /* En móvil se usa el deslizamiento. */
}

/* Tarjeta de artículo (blog) con imagen destacada inset. */
.ddk-post-card { padding: var(--ddk-space-5); }
.ddk-post-card:hover { transform: translateY(-4px); }
.ddk-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--ddk-radius-md);
	overflow: hidden;
	background: var(--ddk-gray-100);
	margin-bottom: var(--ddk-space-5);
}
.ddk-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ddk-transition-base); }
.ddk-post-card:hover .ddk-post-card__media img { transform: scale(1.04); }
.ddk-post-card__body { display: flex; flex-direction: column; gap: var(--ddk-space-3); flex: 1; }
.ddk-post-card__title { font-size: var(--ddk-text-xl); line-height: var(--ddk-leading-snug); margin: 0; }
.ddk-post-card__title a { color: var(--ddk-color-heading); }
.ddk-post-card__title a:hover { color: var(--ddk-color-secondary); }
.ddk-post-card__excerpt { color: var(--ddk-color-text-muted); margin: 0; }
.ddk-post-card__more {
	margin-top: auto;
	padding-top: var(--ddk-space-2);
	align-self: flex-start;
	font-size: var(--ddk-text-sm);
	font-weight: var(--ddk-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ddk-color-primary);
	border-bottom: 2px solid var(--ddk-color-accent);
	padding-bottom: 2px;
}
.ddk-post-card__more:hover { color: var(--ddk-color-accent); }

/* ========================================================================== *
 * 11. BLOG
 * ========================================================================== */
.ddk-post-meta { font-size: var(--ddk-text-sm); color: var(--ddk-color-text-muted); display: flex; flex-wrap: wrap; gap: var(--ddk-space-3); align-items: center; }
.ddk-post-meta a { color: var(--ddk-color-text-muted); }
.ddk-post-meta a:hover { color: var(--ddk-color-primary); }

/* Entrada individual — escala tipográfica editorial (fluida/responsive). */
.ddk-article { padding-block: clamp(var(--ddk-space-8), 5vw, var(--ddk-space-12)); }

.ddk-article__header { margin-bottom: clamp(var(--ddk-space-6), 4vw, var(--ddk-space-8)); }
.ddk-article__header h1 {
	font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.6rem);
	line-height: 1.15;
	margin-bottom: 0;
}

/* Línea dorada bajo el título. */
.ddk-article__divider {
	width: 190px;
	height: 2px;
	background: var(--ddk-color-accent);
	margin-top: var(--ddk-space-4);
}

/* Imagen destacada: banner ancho arriba del título (estilo editorial),
   tamaño uniforme recortando lo que sobre. margin:0 anula el margen
   lateral que el navegador da a <figure>. */
.ddk-article__featured {
	border-radius: var(--ddk-radius-md);
	overflow: hidden;
	margin: 0 0 clamp(var(--ddk-space-6), 4vw, var(--ddk-space-8));
}
.ddk-article__featured img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}
@media (max-width: 640px) {
	.ddk-article__featured img { aspect-ratio: 16 / 9; }
}

/* Cuerpo del artículo: jerarquía clara H2 > H3 > texto. */
.ddk-article__content {
	font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
	line-height: 1.75;
}
.ddk-article__content > * + * { margin-top: var(--ddk-space-4); }
.ddk-article__content h2 {
	font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem);
	line-height: 1.25;
	margin-top: clamp(var(--ddk-space-8), 5vw, var(--ddk-space-10));
	margin-bottom: var(--ddk-space-3);
}
.ddk-article__content h3 {
	font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
	line-height: 1.3;
	margin-top: clamp(var(--ddk-space-6), 4vw, var(--ddk-space-8));
	margin-bottom: var(--ddk-space-2);
}
.ddk-article__content h4 { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.25rem); margin-top: var(--ddk-space-6); }
/* Solo en entradas del blog: las páginas (p. ej. el portal) mantienen
   sus propios estilos de enlace. */
.single .ddk-article__content a { color: var(--ddk-color-secondary); text-decoration: underline; text-underline-offset: 2px; }
.single .ddk-article__content a:hover { color: var(--ddk-color-primary); }
.ddk-article__content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--ddk-radius-md);
	margin-block: var(--ddk-space-6);
}
.ddk-article__content ul,
.ddk-article__content ol { margin: 0 0 var(--ddk-space-4) var(--ddk-space-6); }
.ddk-article__content li { margin-bottom: var(--ddk-space-2); }
.ddk-article__content blockquote {
	margin: var(--ddk-space-6) 0;
	padding: var(--ddk-space-4) var(--ddk-space-6);
	border-left: 3px solid var(--ddk-color-accent);
	background: var(--ddk-color-surface-alt);
	border-radius: var(--ddk-radius-md);
	font-style: italic;
	color: var(--ddk-color-text-muted);
}
.ddk-article__content blockquote p { margin: 0; }

/* Categorías y etiquetas como chips. */
.ddk-article__terms a {
	display: inline-block;
	padding: var(--ddk-space-1) var(--ddk-space-4);
	margin: 0 var(--ddk-space-2) var(--ddk-space-2) 0;
	border: var(--ddk-border-width) solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-full);
	font-size: var(--ddk-text-sm);
	font-weight: var(--ddk-weight-medium);
	color: var(--ddk-color-text);
}
.ddk-article__terms a:hover { border-color: var(--ddk-color-primary); color: var(--ddk-color-primary); }

.ddk-author-box { display: flex; gap: var(--ddk-space-5); align-items: center; padding: var(--ddk-space-6); background: var(--ddk-color-surface-alt); border-radius: var(--ddk-radius-lg); margin-top: var(--ddk-space-12); }
.ddk-author-box img { width: 72px; height: 72px; border-radius: var(--ddk-radius-full); object-fit: cover; flex: 0 0 auto; }

/* Comentarios: formulario integrado con el diseño. */
.ddk-article .comments-area { margin-top: clamp(var(--ddk-space-8), 5vw, var(--ddk-space-12)); }
.ddk-article .comment-reply-title,
.ddk-article .comments-title {
	font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem);
	margin-bottom: var(--ddk-space-4);
}
.ddk-article .comment-form { display: block; }
.ddk-article .comment-form p { margin: 0 0 var(--ddk-space-4); }
.ddk-article .comment-form label {
	display: block;
	font-weight: var(--ddk-weight-semibold);
	margin-bottom: var(--ddk-space-2);
}
.ddk-article .comment-form textarea,
.ddk-article .comment-form input[type="text"],
.ddk-article .comment-form input[type="email"],
.ddk-article .comment-form input[type="url"] {
	width: 100%;
	padding: var(--ddk-space-3) var(--ddk-space-4);
	border: var(--ddk-border-width) solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-md);
	background: var(--ddk-color-surface);
	color: var(--ddk-color-text);
	font: inherit;
}
.ddk-article .comment-form textarea:focus,
.ddk-article .comment-form input:focus {
	outline: 2px solid var(--ddk-color-secondary);
	outline-offset: 1px;
	border-color: var(--ddk-color-secondary);
}
.ddk-article .comment-form input[type="submit"] {
	display: inline-block;
	background: var(--ddk-color-primary);
	color: var(--ddk-color-primary-contrast);
	border: 0;
	border-radius: var(--ddk-radius-full);
	padding: var(--ddk-space-3) var(--ddk-space-6);
	font: inherit;
	font-weight: var(--ddk-weight-semibold);
	cursor: pointer;
}
.ddk-article .comment-form input[type="submit"]:hover { background: var(--ddk-color-primary-dark); }
.ddk-article .comment-form .comment-notes,
.ddk-article .comment-form .logged-in-as { font-size: var(--ddk-text-sm); color: var(--ddk-color-text-muted); }

/* Paginación */
.ddk-pagination { display: flex; gap: var(--ddk-space-2); justify-content: center; margin-top: var(--ddk-space-12); flex-wrap: wrap; }
.ddk-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding-inline: var(--ddk-space-3); border: var(--ddk-border-width) solid var(--ddk-color-border); border-radius: var(--ddk-radius-md); color: var(--ddk-color-text); }
.ddk-pagination .page-numbers.current { background: var(--ddk-color-primary); color: var(--ddk-color-primary-contrast); border-color: var(--ddk-color-primary); }
.ddk-pagination a.page-numbers:hover { border-color: var(--ddk-color-primary); }

/* ========================================================================== *
 * 12. FAQ (acordeón)
 * ========================================================================== */
/* Sección FAQ: fondo con imagen opcional + dos columnas. */
.ddk-faq-section { position: relative; overflow: hidden; }
.ddk-faq-section__bg { position: absolute; inset: 0; z-index: 0; }
.ddk-faq-section__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.ddk-faq-section .ddk-container { position: relative; z-index: 1; }

.ddk-faq-grid { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-10); align-items: start; }
@media (min-width: 900px) { .ddk-faq-grid { grid-template-columns: 5fr 7fr; gap: var(--ddk-space-16); } }
.ddk-faq-intro__title { font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.05; }
.ddk-faq-intro .ddk-hero__accent { color: var(--ddk-color-accent); display: block; }
.ddk-faq-intro__cta { margin-top: var(--ddk-space-8); }

/* Lista de acordeones (tarjetas blancas). */
.ddk-faq-list { display: grid; gap: var(--ddk-space-4); }
.ddk-accordion { background: var(--ddk-color-surface); border-radius: var(--ddk-radius-lg); box-shadow: var(--ddk-shadow-sm); overflow: hidden; }
.ddk-accordion__head { margin: 0; }
.ddk-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ddk-space-5);
	padding: var(--ddk-space-5) var(--ddk-space-6);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}
.ddk-accordion__q { font-family: var(--ddk-font-heading); font-size: var(--ddk-text-lg); font-weight: var(--ddk-weight-bold); color: var(--ddk-color-heading); line-height: 1.3; }
.ddk-accordion__toggle {
	flex: 0 0 auto;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: var(--ddk-radius-full);
	border: 1px solid var(--ddk-color-border);
	color: var(--ddk-color-heading);
	transition: background var(--ddk-transition-fast), color var(--ddk-transition-fast), border-color var(--ddk-transition-fast);
}
.ddk-accordion__toggle svg { transition: transform var(--ddk-transition-base); }
.ddk-accordion__trigger[aria-expanded="true"] .ddk-accordion__toggle { background: var(--ddk-color-accent); color: #fff; border-color: var(--ddk-color-accent); }
.ddk-accordion__trigger[aria-expanded="true"] .ddk-accordion__toggle svg { transform: rotate(180deg); }
.ddk-accordion__panel { padding: 0 var(--ddk-space-6); max-height: 0; overflow: hidden; transition: max-height var(--ddk-transition-base); color: var(--ddk-color-text-muted); }
.ddk-accordion__panel.is-open { padding-block: var(--ddk-space-3) var(--ddk-space-8); }
.ddk-accordion__panel p { margin: 0; line-height: 1.6; }

/* ========================================================================== *
 * 13. CONTACTO Y FORMULARIO
 * ========================================================================== */
/* Cabecera: texto (izquierda) + imagen (derecha). */
.ddk-contact__header { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-8); align-items: center; }
@media (min-width: 900px) { .ddk-contact__header { grid-template-columns: 1fr 1fr; } }
.ddk-contact__title { font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.05; margin: 0; }
.ddk-contact__header-cta { margin-top: var(--ddk-space-6); }
.ddk-contact__header-media { border-radius: var(--ddk-radius-lg); overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--ddk-shadow-md); }
@media (min-width: 900px) { .ddk-contact__header-media { justify-self: end; width: 100%; max-width: 440px; } }
.ddk-contact__header-media img { width: 100%; height: 100%; object-fit: cover; }
.ddk-contact__divider { border: 0; border-top: 1px solid var(--ddk-color-border); margin: clamp(var(--ddk-space-8), 4vw, var(--ddk-space-12)) 0; }

/* Cuerpo: info (izquierda) + formulario (derecha). */
.ddk-contact__body { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-10); align-items: start; }
@media (min-width: 900px) { .ddk-contact__body { grid-template-columns: 4fr 8fr; gap: clamp(var(--ddk-space-10), 5vw, var(--ddk-space-16)); } }
.ddk-contact__info-title { font-weight: 800; font-size: var(--ddk-text-2xl); margin: 0 0 var(--ddk-space-4); }
.ddk-contact__info-text { color: var(--ddk-color-text-muted); margin: 0 0 var(--ddk-space-8); }
.ddk-contact__wa { margin-bottom: var(--ddk-space-5); }
.ddk-contact__wa-label { display: block; font-weight: var(--ddk-weight-bold); color: var(--ddk-color-heading); margin-bottom: var(--ddk-space-1); }
.ddk-contact__wa a { color: var(--ddk-color-text); }
.ddk-contact__wa a:hover { color: var(--ddk-color-primary); }

/* Tarjeta del formulario. */
.ddk-contact__form-card {
	background: var(--ddk-color-surface);
	border: 1px solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-xl);
	padding: clamp(var(--ddk-space-6), 3vw, var(--ddk-space-10));
	box-shadow: var(--ddk-shadow-lg);
}
.ddk-cform { display: grid; gap: var(--ddk-space-5); }
.ddk-cform__row { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-5); }
@media (min-width: 620px) { .ddk-cform__row { grid-template-columns: 1fr 1fr; } }

.ddk-cform input[type="text"],
.ddk-cform input[type="email"],
.ddk-cform input[type="tel"],
.ddk-cform textarea,
.ddk-cform select {
	width: 100%;
	padding: var(--ddk-space-4) var(--ddk-space-5);
	font: inherit;
	color: var(--ddk-color-text);
	background: var(--ddk-color-surface);
	border: 1px solid var(--ddk-color-border);
	border-radius: var(--ddk-radius-md);
	transition: border-color var(--ddk-transition-fast), box-shadow var(--ddk-transition-fast);
}
.ddk-cform input::placeholder,
.ddk-cform textarea::placeholder { color: var(--ddk-color-text-muted); }
.ddk-cform input:focus,
.ddk-cform textarea:focus,
.ddk-cform select:focus { border-color: var(--ddk-color-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05); outline: none; }
.ddk-cform textarea { min-height: 180px; resize: vertical; }
.ddk-cform select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--ddk-space-5) center;
	padding-right: var(--ddk-space-10);
}
.ddk-cform__submit { justify-self: start; margin-top: var(--ddk-space-2); }

/* Checkbox de confirmación. */
.ddk-checkbox { display: flex; align-items: flex-start; gap: var(--ddk-space-3); margin: var(--ddk-space-1) 0; }
.ddk-checkbox input { flex: 0 0 auto; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ddk-color-primary); }
.ddk-checkbox label { font-weight: var(--ddk-weight-regular); font-size: var(--ddk-text-sm); color: var(--ddk-color-text-muted); }

/* ========================================================================== *
 * 14. FOOTER
 * ========================================================================== */
.ddk-footer {
	position: relative;
	overflow: hidden;
	background: var(--ddk-color-primary);
	color: rgba(255, 255, 255, 0.72);
	padding-block: clamp(var(--ddk-space-12), 6vw, var(--ddk-space-20)) var(--ddk-space-8);
}
.ddk-footer__bg { position: absolute; inset: 0; z-index: 0; }
.ddk-footer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.12; }
.ddk-footer__inner { position: relative; z-index: 1; }

.ddk-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-10); }
@media (min-width: 640px) { .ddk-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ddk-footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: var(--ddk-space-12); } }

/* Columna de marca. */
.ddk-footer__brand { max-width: 360px; }
.ddk-footer__title { color: #fff; font-weight: 800; font-size: var(--ddk-text-2xl); line-height: 1.1; margin: 0 0 var(--ddk-space-4); }
.ddk-footer__title-accent { color: var(--ddk-color-accent); display: block; }
.ddk-footer__text { color: rgba(255, 255, 255, 0.68); margin: 0 0 var(--ddk-space-5); }
.ddk-footer__cta { color: #fff; font-weight: var(--ddk-weight-bold); }
.ddk-footer__cta:hover { color: var(--ddk-color-accent); }

/* Columnas de enlaces. */
.ddk-footer__heading { color: #fff; font-weight: var(--ddk-weight-bold); font-size: var(--ddk-text-lg); margin: 0 0 var(--ddk-space-5); }
.ddk-footer__menu { list-style: none; display: grid; gap: var(--ddk-space-3); }
.ddk-footer__menu a { color: rgba(255, 255, 255, 0.7); }
.ddk-footer__menu a:hover { color: #fff; }
.ddk-footer__muted { color: rgba(255, 255, 255, 0.4); font-size: var(--ddk-text-sm); }

/* Columna de contacto. */
.ddk-footer__contact { list-style: none; display: grid; gap: var(--ddk-space-4); margin: 0 0 var(--ddk-space-6); }
.ddk-footer__contact li { display: flex; gap: var(--ddk-space-3); align-items: flex-start; }
.ddk-footer__contact svg { flex: 0 0 auto; color: var(--ddk-color-accent); margin-top: 2px; }
.ddk-footer__contact a,
.ddk-footer__contact span { color: rgba(255, 255, 255, 0.75); }
.ddk-footer__contact a:hover { color: #fff; }

/* Redes en círculos dorados. */
.ddk-social { display: inline-flex; gap: var(--ddk-space-3); }
.ddk-social--footer a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--ddk-radius-full); background: var(--ddk-color-accent); color: var(--ddk-color-primary); transition: filter var(--ddk-transition-fast), transform var(--ddk-transition-fast); }
.ddk-social--footer a:hover { filter: brightness(1.08); transform: translateY(-2px); }
.ddk-social svg { width: 18px; height: 18px; }

.ddk-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--ddk-space-4); justify-content: space-between; align-items: center; margin-top: clamp(var(--ddk-space-10), 5vw, var(--ddk-space-16)); padding-top: var(--ddk-space-6); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--ddk-text-sm); color: rgba(255, 255, 255, 0.5); }

/* ========================================================================== *
 * 15. WHATSAPP FLOTANTE
 * ========================================================================== */
.ddk-whatsapp {
	position: fixed;
	right: clamp(1rem, 4vw, 2rem);
	bottom: clamp(1rem, 4vw, 2rem);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: var(--ddk-space-3);
	padding: var(--ddk-space-3) var(--ddk-space-5) var(--ddk-space-3) var(--ddk-space-4);
	background: #25d366;
	color: #08331b;
	font-weight: var(--ddk-weight-semibold);
	border-radius: var(--ddk-radius-full);
	box-shadow: var(--ddk-shadow-lg);
	transition: transform var(--ddk-transition-fast);
}
.ddk-whatsapp:hover { transform: scale(1.04); color: #08331b; }
.ddk-whatsapp svg { width: 26px; height: 26px; }
.ddk-whatsapp__label { display: none; }
@media (min-width: 560px) { .ddk-whatsapp__label { display: inline; } }

/* ========================================================================== *
 * 16. BREADCRUMBS
 * ========================================================================== */
.ddk-breadcrumb { font-size: var(--ddk-text-sm); color: var(--ddk-color-text-muted); padding-block: var(--ddk-space-5); }
.ddk-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ddk-space-2); align-items: center; }
.ddk-breadcrumb li::after { content: "/"; margin-left: var(--ddk-space-2); color: var(--ddk-gray-300); }
.ddk-breadcrumb li:last-child::after { content: ""; }
.ddk-breadcrumb a { color: var(--ddk-color-text-muted); }
.ddk-breadcrumb a:hover { color: var(--ddk-color-primary); }

/* ========================================================================== *
 * 17. UTILIDADES Y ACCESIBILIDAD
 * ========================================================================== */
.ddk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ddk-color-primary);
	color: var(--ddk-color-primary-contrast);
	padding: var(--ddk-space-3) var(--ddk-space-5);
	z-index: 999;
	border-radius: 0 0 var(--ddk-radius-md) 0;
}
.ddk-skip-link:focus { left: 0; color: var(--ddk-color-primary-contrast); }

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}

.ddk-text-center { text-align: center; }
.ddk-mt-8 { margin-top: var(--ddk-space-8); }
.ddk-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Notas de estado del formulario (feedback simple sin JS de terceros). */
.ddk-alert { padding: var(--ddk-space-4) var(--ddk-space-5); border-radius: var(--ddk-radius-md); margin-bottom: var(--ddk-space-5); }
.ddk-alert--success { background: rgba(46,125,91,0.12); color: var(--ddk-color-success); border: 1px solid rgba(46,125,91,0.3); }
.ddk-alert--error { background: rgba(178,59,59,0.10); color: var(--ddk-color-danger); border: 1px solid rgba(178,59,59,0.3); }

/* ========================================================================== *
 * 18. PROCESO (timeline con línea/ola dorada)
 * ========================================================================== */
.ddk-process__head { max-width: 620px; margin-bottom: var(--ddk-space-10); }
.ddk-process__head h2 { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.ddk-process__cta { margin-top: var(--ddk-space-6); }

.ddk-process__flow { position: relative; }
.ddk-process__steps { display: grid; grid-template-columns: 1fr; gap: var(--ddk-space-6); position: relative; z-index: 1; }

/* Línea/ola dorada por ENCIMA de las tarjetas (la traza el JS por los nodos). */
.ddk-process__wave { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; display: none; }
.ddk-process__wave-path { fill: none; stroke: var(--ddk-color-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }

/* Tarjeta de paso. */
.ddk-process__card {
	position: relative;
	background: var(--ddk-color-surface);
	border-radius: var(--ddk-radius-lg);
	padding: var(--ddk-space-6);
	box-shadow: var(--ddk-shadow-lg);
	overflow: hidden;
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.ddk-process__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ddk-space-4); margin-bottom: var(--ddk-space-8); position: relative; z-index: 1; }
.ddk-process__num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--ddk-color-heading); }
.ddk-process__icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--ddk-radius-full); border: 1px solid var(--ddk-color-border); color: var(--ddk-color-accent); }
.ddk-process__title { position: relative; z-index: 1; font-size: var(--ddk-text-xl); font-weight: 700; line-height: 1.15; margin: 0; }
.ddk-process__desc { position: relative; z-index: 1; margin: var(--ddk-space-3) 0 0; color: var(--ddk-color-text-muted); font-size: var(--ddk-text-sm); line-height: 1.5; }

/* En sección oscura, el h3 se vuelve blanco: forzar navy en tarjeta blanca. */
.ddk-section--dark .ddk-process__title { color: var(--ddk-color-heading); }

/* Nodo (punto dorado) — solo en móvil; en escritorio lo dibuja el SVG. */
.ddk-process__node {
	display: none;
	position: absolute;
	z-index: 2;
	width: 18px; height: 18px;
	border-radius: var(--ddk-radius-full);
	background: var(--ddk-color-accent);
	border: 4px solid var(--ddk-color-primary);
	top: -9px; left: var(--ddk-space-6);
}

/* Nodos dibujados en el SVG (escritorio). */
.ddk-process__wave-node-ring { fill: rgba(255, 255, 255, 0.14); }
.ddk-process__wave-node-dot { fill: var(--ddk-color-accent); stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }

/* Paso destacado (con imagen). */
.ddk-process__card--featured { color: #fff; }
.ddk-process__card--featured .ddk-process__num,
.ddk-section--dark .ddk-process__card--featured .ddk-process__title { color: #fff; }
.ddk-process__card--featured .ddk-process__desc { color: rgba(255, 255, 255, 0.78); }
.ddk-process__card--featured .ddk-process__icon { border-color: rgba(255, 255, 255, 0.25); }
.ddk-process__card-bg { position: absolute; inset: 0; z-index: 0; }
.ddk-process__card-bg img { width: 100%; height: 100%; object-fit: cover; }
.ddk-process__card-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 46, 0.82), rgba(15, 26, 46, 0.92)); }

/* Timeline vertical en móvil. */
@media (max-width: 899px) {
	.ddk-process__steps { padding-left: var(--ddk-space-6); }
	.ddk-process__steps::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--ddk-color-accent), rgba(200, 162, 76, 0.2)); }
	.ddk-process__node { display: block; left: calc(-1 * var(--ddk-space-6) + 1px); top: var(--ddk-space-6); border-color: var(--ddk-color-primary); }
}

/* Escritorio: encabezado a la izquierda + 4 columnas escalonadas.
   La ola dorada la traza el JS por encima de las tarjetas. */
@media (min-width: 900px) {
	.ddk-process .ddk-container { position: relative; }
	.ddk-process__head { position: absolute; top: 0; left: 0; width: clamp(380px, 46%, 620px); margin: 0; z-index: 4; }
	.ddk-process__flow { padding-block: 0; }
	.ddk-process__wave { display: block; }
	.ddk-process__steps { grid-template-columns: repeat(4, 1fr); gap: var(--ddk-space-6); align-items: start; }
	.ddk-process__card:nth-child(1) { margin-top: 470px; } /* 01 (bajo el encabezado) */
	.ddk-process__card:nth-child(2) { margin-top: 390px; } /* 02 (bajo el encabezado) */
	.ddk-process__card:nth-child(3) { margin-top: 265px; } /* 03 (nivel del botón) */
	.ddk-process__card:nth-child(4) { margin-top: 150px; } /* 04 (nivel del párrafo) */
}

/* Entrada de tarjetas + dibujado de la línea (activado por JS con --ready/is-visible). */
.ddk-process--ready .ddk-process__card { opacity: 0; transition-delay: calc(var(--i) * 0.14s); }
.ddk-process.is-visible .ddk-process__card { opacity: 1; }
.ddk-process__wave-path { stroke-dasharray: var(--wave-len, 3000); stroke-dashoffset: 0; }
.ddk-process--ready .ddk-process__wave-path { stroke-dashoffset: var(--wave-len, 3000); }
.ddk-process.is-visible .ddk-process__wave-path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s ease 0.25s; }