/* =========================================================================
   Despacho 41 FSE — styles.css
   Única hoja de estilos escrita manualmente. Se carga en frontend
   (wp_enqueue_scripts) y en el editor (add_editor_style) desde functions.php.
   No existe CSS en plantillas, patrones, atributos style="" ni <style>.

   Lenguaje visual: base blanca, mucho espacio, jerarquía tipográfica clara,
   bordes suaves (12-18px), sombras muy sutiles, acento azul cobalto.

   Índice
   1. Tokens y fundamentos
   2. Accesibilidad
   3. Header y navegación
   4. Hero y portadas
   5. Secciones y layout
   6. Tarjetas y servicios
   7. Botones y enlaces
   8. Testimonios
   9. Blog y recursos
   10. Formularios y elementos nativos disponibles
   11. Footer
   12. Responsive
   13. Reducción de movimiento
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens y fundamentos
   Colores, tipografías, espacios, anchos, bordes y sombras se definen como
   presets en theme.json. Aquí solo se derivan tokens auxiliares.
   ------------------------------------------------------------------------- */
:root {
	--d41-borde-suave: 1px solid var(--wp--preset--color--borde-claro, #E4E9F0);
	--d41-borde-oscuro: 1px solid var(--wp--preset--color--borde-oscuro, #26314A);
	--d41-radio: 10px;
	--d41-radio-grande: 18px;
	--d41-sombra-suave: 0 1px 2px rgba(16, 22, 35, 0.04), 0 10px 28px rgba(16, 22, 35, 0.06);
	--d41-sombra-media: 0 2px 6px rgba(16, 22, 35, 0.06), 0 20px 48px rgba(16, 22, 35, 0.10);
	--d41-transicion: 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
	--d41-toque-min: 44px;
	--d41-rejilla: 74rem;
	--d41-margen-raiz: clamp(1.375rem, 4.5vw, 4rem);
	--d41-hueco-bloque: clamp(1.5rem, 3.2vw, 2.5rem);
}

/* Modelo de caja unico. Sin esto, los campos del formulario con width:100%
   sumaban su padding y su borde por fuera del ancho de la columna: los
   campos se desbordaban de la tarjeta y las dos columnas quedaban pegadas. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* overflow-x: hidden convertiria a body en su propio contenedor de scroll
	   (efecto secundario de la especificacion CSS) y eso rompe position:
	   sticky en el encabezado, que necesita anclarse a la ventana real. */
	overflow-x: clip;
}

p,
li {
	text-wrap: pretty;
}

/* Rejilla unica: el contenedor mide 74rem en todo el sitio y el texto de
   primer nivel conserva una medida de lectura comoda sin centrarse. */
.d41-seccion > :where(p, h2, h3, h4, ul, ol, .wp-block-list, .wp-block-details, .wp-block-buttons) {
	max-width: 68ch;
}

/* WordPress centra con !important cualquier hijo de un contenedor constrained
   que no llegue al ancho del contenedor. El contenido de las secciones se
   alinea al mismo borde izquierdo que el encabezado y el pie. */
.d41-seccion > *:not(.aligncenter):not(.has-text-align-center),
.d41-hero > *:not(.aligncenter):not(.has-text-align-center) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

h1,
h2,
h3,
h4,
.wp-block-post-title {
	text-wrap: balance;
}

/* Antetítulo editorial (kicker) */
.d41-kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
}

/* Respuesta directa GEO tras el H1 */
.d41-respuesta-directa {
	max-width: 62ch;
	border-left: 2px solid var(--wp--preset--color--cielo, #7C9CF0);
	padding-left: clamp(1rem, 2vw, 1.5rem);
}

/* Dentro del cuerpo de las guias, sin el limite de 62ch: debe ocupar el
   mismo ancho que los parrafos normales del articulo, no verse angosta.
   ".single" (body de entrada individual) evita que esto afecte a las
   paginas normales, que tambien usan un bloque post-content. */
.single .wp-block-post-content .d41-respuesta-directa {
	max-width: none;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Nota interna / contenido provisional */
.d41-nota {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.55;
}

.d41-placeholder-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   2. Accesibilidad
   ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, .wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--azul, #2F4EC8);
	outline-offset: 3px;
	border-radius: 4px;
}

.skip-link:focus {
	background: var(--wp--preset--color--blanco, #FFFFFF);
	color: var(--wp--preset--color--tinta, #101623);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wp-block-button__link,
.wp-block-navigation-item__content,
.wp-block-search__button,
.wp-block-read-more {
	min-height: var(--d41-toque-min);
	display: inline-flex;
	align-items: center;
}

/* Entre bloques de primer nivel no hay hueco: encabezado, migas, contenido y
   pie se tocan. El blockGap raiz dejaba una franja blanca antes del pie. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* -------------------------------------------------------------------------
   3. Header y navegación
   ------------------------------------------------------------------------- */
.d41-header {
	border-bottom: var(--d41-borde-oscuro);
	position: relative;
	z-index: 20;
}

/* Encabezado fijo solo en escritorio (>=1280px, el mismo punto en el que
   aparece el menu completo en linea). En tablet y movil sigue en su lugar
   habitual para no interferir con el menu desplegable de pantalla completa. */
@media (min-width: 1280px) {
	/* El sticky se aplica al contenedor <header> que WordPress genera para la
	   parte de plantilla (no al .d41-header interno): un elemento sticky solo
	   permanece fijo mientras su propio contenedor siga en pantalla, y ese
	   contenedor envolvente mide lo mismo que el menu (~70px), asi que el
	   encabezado dejaba de pegarse a los pocos pixeles de scroll. */
	header.wp-block-template-part:has(.d41-header) {
		position: sticky;
		top: 0;
		z-index: 100;
	}
}

/* Logo, menu y boton comparten eje vertical. IMPORTANTE: nunca se fuerza el
   display del contenedor responsive del bloque de navegacion; hacerlo anula
   el display:none que WordPress aplica al menu cerrado en movil y los
   enlaces quedan superpuestos sobre la pagina bloqueando el tacto. */
.d41-header .d41-header-barra,
.d41-header .d41-header-acciones {
	align-items: center;
}

.d41-header .d41-header-barra > *,
.d41-header .d41-header-acciones > * {
	align-self: center;
}

/* El centrado vertical del menu completo solo aplica cuando ese menu se
   muestra en linea (escritorio, a partir de 1280px). */
@media (min-width: 1280px) {
	.d41-header .wp-block-navigation,
	.d41-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default),
	.d41-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) .wp-block-navigation__responsive-dialog,
	.d41-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) .wp-block-navigation__responsive-container-content {
		display: flex;
		align-items: center;
		width: auto;
		max-width: none;
		margin-block: 0;
	}
}

.d41-header .wp-block-navigation-item {
	display: flex;
	align-items: center;
}

.d41-header .wp-block-navigation-item__content {
	min-height: 40px;
	display: flex;
	align-items: center;
	line-height: 1.25;
}

.d41-header .wp-block-navigation__submenu-icon {
	align-self: center;
}

.d41-header-barra {
	gap: clamp(1rem, 2.5vw, 2.5rem);
	flex-wrap: nowrap;
}

.d41-header-acciones {
	gap: clamp(0.75rem, 2vw, 2rem);
	flex-wrap: nowrap;
}

.d41-header .wp-block-site-logo,
.d41-header .d41-logo-respaldo {
	flex: 0 0 auto;
	margin: 0;
}

.d41-header .wp-block-site-logo img,
.d41-header .d41-logo-respaldo img {
	height: auto;
	max-height: 34px;
	width: auto;
	display: block;
}

/* La navegación no debe romperse en dos filas: una sola línea o menú overlay */
.d41-header .wp-block-navigation__container {
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
	row-gap: 0;
}

.d41-header .wp-block-navigation .wp-block-navigation-item {
	white-space: nowrap;
}

/* Submenú Servicios: panel oscuro sobre el resto de la página */
.d41-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--superficie, #1A2233);
	border: var(--d41-borde-oscuro);
	border-radius: 12px;
	padding: 0.5rem;
	min-width: 17rem;
	box-shadow: 0 20px 48px rgba(6, 10, 20, 0.5);
}

.d41-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.625rem 0.75rem;
	border-radius: 8px;
	min-height: var(--d41-toque-min);
	display: flex;
	align-items: center;
	white-space: normal;
}

.d41-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.d41-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--borde-oscuro, #26314A);
	color: var(--wp--preset--color--blanco, #FFFFFF);
}

.d41-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--sm);
}

.d41-header .wp-block-buttons {
	flex: 0 0 auto;
	margin: 0;
}

.d41-header .wp-block-button,
.d41-header .wp-block-button__link {
	flex: 0 0 auto;
}

.d41-header .wp-block-button__link {
	padding: 0.6875rem 1.25rem;
	min-height: 42px;
	white-space: nowrap;
}

/* Por debajo de 1280px el menú completo no cabe: se usa el menú desplegable */
@media (max-width: 1279px) {
	.d41-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	/* Menu cerrado: oculto por completo y sin capturar toques */
	.d41-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.d41-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		position: fixed;
		inset: 0;
		z-index: 100000;
		overflow: auto;
	}

	.d41-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
	.d41-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.d41-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		width: 100%;
	}

	/* En el menú desplegable los enlaces se apilan y respiran */
	.d41-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 0.25rem;
		font-size: var(--wp--preset--font-size--md);
	}

	.d41-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding-block: 0.625rem;
		min-height: var(--d41-toque-min);
		display: flex;
		align-items: center;
	}
}

/* Botón de agenda: en pantallas estrechas cede el paso al menú */
@media (max-width: 599px) {
	.d41-header-cta {
		display: none;
	}
}

.d41-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 1px solid transparent;
	transition: border-color var(--d41-transicion), color var(--d41-transicion);
}

.d41-header .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.d41-header .wp-block-navigation a:where(:not(.wp-element-button)):focus {
	border-bottom-color: var(--wp--preset--color--cielo, #7C9CF0);
}

.d41-header .wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--blanco, #FFFFFF);
}

.d41-header .wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--superficie, #1A2233);
	border: var(--d41-borde-oscuro);
	border-radius: var(--d41-radio-grande);
	padding-block: 0.5rem;
	min-width: 17rem;
	box-shadow: 0 16px 40px rgba(6, 10, 20, 0.45);
}

.d41-header .wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 0.6875rem 1.125rem;
}

.d41-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--tinta, #101623);
	padding: clamp(1.5rem, 5vw, 3rem);
}

.d41-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0.5rem;
}

.d41-header .wp-block-navigation__responsive-container.is-menu-open a {
	font-size: var(--wp--preset--font-size--lg);
	min-height: var(--d41-toque-min);
}

.d41-header .wp-block-navigation__responsive-container-open,
.d41-header .wp-block-navigation__responsive-container-close {
	min-width: var(--d41-toque-min);
	min-height: var(--d41-toque-min);
	justify-content: center;
}

/* Barra de migas: banda oscura continua bajo el encabezado, como en la vista
   previa del tema. Antes quedaba en blanco y cortaba el bloque oscuro. */
.d41-breadcrumbs {
	background-color: var(--wp--preset--color--superficie, #1A2233);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
	padding-block: 0.6875rem !important;
	border-bottom: var(--d41-borde-oscuro);
}

.d41-breadcrumbs p,
.d41-breadcrumbs .wp-block-post-title,
.d41-breadcrumbs h1,
.d41-breadcrumbs h2 {
	color: var(--wp--preset--color--texto-secundario-oscuro, #A9B6CE) !important;
	font-family: var(--wp--preset--font-family--mono) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	letter-spacing: 0.04em;
	line-height: 1.4;
}

.d41-breadcrumbs a {
	color: var(--wp--preset--color--cielo, #7C9CF0) !important;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.d41-breadcrumbs a:hover,
.d41-breadcrumbs a:focus {
	color: var(--wp--preset--color--blanco, #FFFFFF) !important;
}

/* -------------------------------------------------------------------------
   4. Hero y portadas
   ------------------------------------------------------------------------- */
.d41-hero {
	position: relative;
	overflow: hidden;
}

.d41-hero .wp-block-heading {
	max-width: 22ch;
}

.d41-hero p {
	max-width: 58ch;
}

.d41-hero .wp-block-image img {
	box-shadow: 0 24px 70px rgba(6, 10, 20, 0.35);
}

/* Arte del hero: pieza contenida, no un fondo gigante */
.d41-figura--hero {
	max-width: 460px;
	margin-inline: 0 0;
}

.d41-figura--hero img {
	width: 100%;
	height: auto;
	border-radius: var(--d41-radio-grande);
}

/* Retrato profesional */
.d41-figura--retrato img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: var(--d41-radio-grande);
	box-shadow: 0 18px 48px rgba(6, 10, 20, 0.28);
}

.d41-acento-superior {
	border-top: 1px solid var(--wp--preset--color--azul, #2F4EC8);
}

/* -------------------------------------------------------------------------
   5. Secciones y layout
   ------------------------------------------------------------------------- */
.d41-seccion {
	position: relative;
}

/* El contenido de pagina no debe quedar encerrado en la medida de lectura:
   las secciones traen su propio ancho. Red de seguridad por si una plantilla
   guardada en la base de datos conserva el marcado anterior. */
main.wp-block-group > .entry-content,
main.wp-block-group > .wp-block-post-content {
	max-width: none;
}

/* Las secciones de ancho completo sangran de borde a borde.
   No se declara width: con useRootPaddingAwareAlignments WordPress ya aplica
   los margenes negativos del padding raiz. Fijar width: 100% medía el 100%
   del contenedor ya sangrado y dejaba una franja sin cubrir a la derecha. */
.wp-site-blocks .d41-seccion.alignfull {
	max-width: none;
	padding-inline: calc(var(--wp--style--root--padding-left, var(--d41-margen-raiz)) + max(0px, (100% - var(--d41-rejilla)) / 2)) calc(var(--wp--style--root--padding-right, var(--d41-margen-raiz)) + max(0px, (100% - var(--d41-rejilla)) / 2));
}

/* Entre secciones no hay hueco: cada una trae su propio padding vertical.
   Anula el blockGap heredado del contenido de la pagina. */
.wp-site-blocks .d41-seccion,
.wp-block-post-content > .d41-seccion,
main > .d41-seccion {
	margin-block: 0;
}

.d41-franja-confianza .wp-block-column {
	border-left: var(--d41-borde-oscuro);
	padding-left: clamp(1rem, 2vw, 1.75rem);
}

/* La primera columna marca el borde izquierdo de la sección: no lleva filete */
.d41-franja-confianza .wp-block-column:first-child {
	border-left: 0;
	padding-left: 0;
}

/* Ritmo vertical dentro de la seccion.
   Antes se anulaba margin-block por completo en los hijos directos, lo que
   tambien anulaba el blockGap del bloque: los titulares quedaban pegados a
   las tarjetas y dos filas de columnas seguidas se encimaban. Ahora se fija
   una separacion propia entre hermanos y solo se limpia el primero. */
.d41-seccion > * {
	margin-block-end: 0;
}

.d41-seccion > * + * {
	margin-block-start: var(--wp--style--block-gap, var(--d41-hueco-bloque));
}

.d41-seccion > *:first-child {
	margin-block-start: 0;
}

/* Dos filas de tarjetas seguidas respiran igual que el resto */
.d41-seccion > .wp-block-columns + .wp-block-columns {
	margin-block-start: var(--d41-hueco-bloque);
}

.d41-seccion .wp-block-columns {
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

/* Las tarjetas llenan la altura de su columna repartiendola entre ellas.
   Con height: 100% cada tarjeta tomaba la altura completa y la segunda
   desbordaba la seccion. */
.d41-seccion > .wp-block-columns > .wp-block-column,
.d41-seccion .wp-block-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* flex-shrink en 0: con 1 la tarjeta se encogia por debajo de su contenido
   cuando la fila igualaba alturas, y el texto se salia por el borde inferior
   de la tarjeta blanca. */
.d41-seccion .wp-block-column > .d41-card,
.d41-seccion .wp-block-column > .d41-testimonio,
.d41-seccion .wp-block-column > .d41-paso {
	flex: 1 0 auto;
	min-height: -moz-fit-content;
	min-height: fit-content;
}

.d41-seccion .wp-block-column > .wp-block-image,
.d41-seccion .wp-block-column > .d41-figura {
	flex: 0 0 auto;
}

/* Figura del hero: ocupa su columna y se alinea al borde derecho */
.d41-hero .wp-block-column > .d41-figura--hero {
	width: 100%;
	margin-inline-start: auto;
}

.d41-medida-corta {
	max-width: 60ch;
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Variante de una sola linea en escritorio; se ajusta de forma natural
   cuando el contenedor no tiene espacio suficiente (movil). */
.d41-medida-linea {
	max-width: none;
	margin-block-end: var(--d41-hueco-bloque) !important;
}

/* Titulo de seccion mas compacto: cabe en una linea en escritorio y se
   ajusta de forma fluida en pantallas angostas, como el resto de la escala. */
.d41-titulo-linea {
	font-size: var(--wp--preset--font-size--xxl) !important;
}

/* La columna de imagen se estira a la altura de la columna de texto vecina
   (en vez de centrarse con su propia altura natural) y la imagen recorta
   con object-fit para llenar ese alto sin deformarse. */
.d41-columna-imagen-ajustada {
	display: flex;
}

/* La figura no aporta su propia altura natural (la imagen dentro va en
   posicion absoluta, fuera del flujo): asi el alto de la fila lo decide
   unicamente la columna de texto, y flexbox estira esta columna vacia
   hasta esa altura en vez de al reves. */
.d41-columna-imagen-ajustada .d41-figura {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	flex: 1 1 auto !important;
	min-height: 12rem;
}

.d41-columna-imagen-ajustada .d41-figura img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Icono y titulo en la misma linea, en vez de apilados */
.d41-paso-icono {
	align-items: center;
}

.d41-paso-icono .d41-icono {
	margin: 0;
	flex: 0 0 auto;
}

.d41-paso-icono .wp-block-heading {
	margin: 0;
}

/* Un <hr> dentro de un contenedor flex (como .d41-card) no se estira solo
   en varios navegadores; sin esto queda con ancho cero e invisible. */
.wp-block-separator {
	width: 100%;
	align-self: stretch;
}

.d41-divisor {
	border: 0;
	border-top: var(--d41-borde-suave);
	height: 0;
}

.d41-paso {
	border-top: 2px solid var(--wp--preset--color--azul, #2F4EC8);
	padding-top: clamp(1rem, 2vw, 1.5rem);
}

.d41-paso .d41-paso-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.12em;
}

/* -------------------------------------------------------------------------
   6. Tarjetas y servicios
   ------------------------------------------------------------------------- */
.d41-card {
	background: var(--wp--preset--color--blanco, #FFFFFF);
	border: var(--d41-borde-suave);
	border-radius: var(--d41-radio-grande);
	box-shadow: var(--d41-sombra-suave);
	transition: box-shadow var(--d41-transicion), transform var(--d41-transicion), border-color var(--d41-transicion);
	display: flex;
	flex-direction: column;
}

/* El layout "constrained" centra los hijos que no llenan el ancho de la
   tarjeta (visible sobre todo con textos cortos como un kicker o un precio
   sin cifra). Se alinean a la izquierda, igual que el resto del sitio. */
.d41-card > * {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* Tarjeta de contacto: el boton no es el ultimo elemento (hay texto
   despues), asi que no debe anclarse al fondo con margen automatico -
   solo necesita un espacio fijo normal antes y despues. Selector mas
   especifico que ".d41-card > .wp-block-buttons" para poder ganarle. */
.d41-card > .wp-block-buttons.d41-botones-en-linea {
	margin-block-start: var(--d41-hueco-bloque) !important;
	margin-block-end: calc(var(--d41-hueco-bloque) / 2) !important;
}

/* El grupo de botones se ancla al fondo de la tarjeta, para que los botones
   de una misma fila queden a la misma altura sin importar cuanto texto
   tenga cada tarjeta arriba. Se centran horizontalmente; el resto del
   contenido de la tarjeta (kicker, precio, texto) se mantiene a la izquierda. */
.d41-card > .wp-block-buttons {
	margin-block-start: auto !important;
	margin-inline-start: auto !important;
	margin-inline-end: auto !important;
}

.d41-card:hover,
.d41-card:focus-within {
	box-shadow: var(--d41-sombra-media);
	border-color: var(--wp--preset--color--cielo, #7C9CF0);
	transform: translateY(-2px);
}

.d41-card--oscura {
	background: transparent;
	border: var(--d41-borde-oscuro);
	box-shadow: none;
}

.d41-card--oscura:hover,
.d41-card--oscura:focus-within {
	border-color: var(--wp--preset--color--cielo, #7C9CF0);
	box-shadow: none;
	transform: none;
}

/* Escala fluida: el rango de precio cabe en una linea dentro de una tarjeta
   de tres columnas y no rompe la caja en pantallas estrechas. */
.d41-precio {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: clamp(1.5rem, 1.05rem + 1.15vw, 2.125rem);
	line-height: 1.1;
	letter-spacing: -0.025em;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.d41-precio-nota {
	font-size: var(--wp--preset--font-size--xs);
}

.d41-lista-incluye {
	list-style: none;
	padding-left: 0;
}

.d41-lista-incluye li {
	padding-left: 1.625rem;
	position: relative;
	margin-block: 0.5rem;
}

.d41-lista-incluye li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.58em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--azul, #2F4EC8);
}

.d41-card--oscura .d41-lista-incluye li::before,
.has-tinta-background-color .d41-lista-incluye li::before,
.has-superficie-background-color .d41-lista-incluye li::before,
.has-azul-profundo-background-color .d41-lista-incluye li::before {
	background: var(--wp--preset--color--cielo, #7C9CF0);
}

/* Iconos de línea (core/image con SVG local del tema) */
.d41-icono {
	margin: 0 0 0.25rem;
	line-height: 0;
}

.d41-icono img {
	display: block;
	width: 28px;
	height: 28px;
	max-width: 28px;
	border-radius: 0;
}

.d41-card .d41-icono img,
.d41-paso .d41-icono img {
	width: 32px;
	height: 32px;
}

/* Figuras e imágenes de sección */
.d41-imagen-placeholder,
.d41-figura {
	border-radius: var(--d41-radio-grande);
	overflow: hidden;
}

.d41-imagen-placeholder img,
.d41-figura img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--d41-radio-grande);
}

/* Logotipo del pie */
.d41-footer .wp-block-site-logo img,
.d41-footer .d41-logo-respaldo img {
	height: auto;
	max-height: 40px;
	width: auto;
	display: block;
}

.d41-footer .wp-block-site-logo,
.d41-footer .d41-logo-respaldo {
	margin: 0 0 0.5rem;
}

/* Retrato en tarjeta "quién te atiende" */
.d41-atiende .d41-figura--retrato {
	max-width: 190px;
	margin-inline: 0;
}

/* -------------------------------------------------------------------------
   7. Botones y enlaces
   ------------------------------------------------------------------------- */
.wp-block-button__link {
	transition: background-color var(--d41-transicion), color var(--d41-transicion), border-color var(--d41-transicion), box-shadow var(--d41-transicion);
	text-align: center;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(16, 22, 35, 0.06);
}

.wp-block-button__link:hover {
	box-shadow: 0 6px 18px rgba(47, 78, 200, 0.22);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	font-weight: 600;
	box-shadow: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	box-shadow: none;
	background-color: rgba(47, 78, 200, 0.08);
}

.d41-enlace-secundario a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.d41-enlace-secundario a:hover,
.d41-enlace-secundario a:focus {
	border-bottom-color: transparent;
}

.has-tinta-background-color a:where(:not(.wp-element-button)),
.has-superficie-background-color a:where(:not(.wp-element-button)),
.has-azul-profundo-background-color a:where(:not(.wp-element-button)),
.has-azul-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--azul-suave, #EDF2FF);
}

.has-tinta-background-color a:where(:not(.wp-element-button)):hover,
.has-superficie-background-color a:where(:not(.wp-element-button)):hover,
.has-azul-profundo-background-color a:where(:not(.wp-element-button)):hover,
.has-azul-background-color a:where(:not(.wp-element-button)):hover {
	color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   8. Testimonios
   ------------------------------------------------------------------------- */
.d41-testimonio {
	background: var(--wp--preset--color--blanco, #FFFFFF);
	border: var(--d41-borde-suave);
	border-radius: var(--d41-radio-grande);
	box-shadow: var(--d41-sombra-suave);
}

.d41-testimonio blockquote,
.d41-testimonio .wp-block-quote {
	border: 0;
	margin: 0;
	padding: 0;
}

.d41-estrellas {
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.2em;
	margin: 0;
}

.d41-testimonio-autor {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   9. Blog y recursos
   ------------------------------------------------------------------------- */
.wp-block-post-template {
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.d41-recurso {
	background: var(--wp--preset--color--blanco, #FFFFFF);
	border: var(--d41-borde-suave);
	border-radius: var(--d41-radio-grande);
	box-shadow: var(--d41-sombra-suave);
	padding: clamp(1.375rem, 2.5vw, 1.875rem);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: border-color var(--d41-transicion), box-shadow var(--d41-transicion), transform var(--d41-transicion);
}

.d41-recurso:hover,
.d41-recurso:focus-within {
	border-color: var(--wp--preset--color--cielo, #7C9CF0);
	box-shadow: var(--d41-sombra-media);
	transform: translateY(-2px);
}

.d41-recurso .wp-block-post-title {
	font-size: var(--wp--preset--font-size--lg);
	margin: 0;
}

.d41-recurso .wp-block-post-title a {
	text-decoration: none;
}

.d41-recurso .wp-block-post-title a:hover,
.d41-recurso .wp-block-post-title a:focus {
	text-decoration: underline;
}

.d41-recurso .wp-block-post-featured-image img {
	border-radius: var(--d41-radio);
	width: 100%;
	height: auto;
}

.d41-meta-articulo {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-secundario-claro, #4E5A70);
}

.wp-block-post-content > * {
	margin-block: 1.2em;
}

.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-query-pagination a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* -------------------------------------------------------------------------
   10. Formularios y elementos nativos disponibles
   (búsqueda, detalles/FAQ). El tema no simula envíos.
   ------------------------------------------------------------------------- */
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.8125rem 0.9375rem;
	min-height: var(--d41-toque-min);
	border: var(--d41-borde-suave);
	border-radius: var(--d41-radio);
	background: var(--wp--preset--color--blanco, #FFFFFF);
	color: var(--wp--preset--color--tinta, #101623);
	max-width: 100%;
}

.wp-block-search__input:focus,
input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--azul, #2F4EC8);
}

.wp-block-search__button {
	border-radius: var(--d41-radio);
	border: 0;
	background: var(--wp--preset--color--azul, #2F4EC8);
	color: var(--wp--preset--color--blanco, #FFFFFF);
	padding-inline: 1.375rem;
	font-weight: 600;
}

.wp-block-details {
	border-top: var(--d41-borde-suave);
	padding-block: clamp(1rem, 2vw, 1.375rem);
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
	list-style-position: outside;
	padding-block: 0.375rem;
	min-height: var(--d41-toque-min);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--d41-transicion);
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--azul, #2F4EC8);
}

.wp-block-details > *:not(summary) {
	max-width: 68ch;
	margin-top: 0.5rem;
}

.has-tinta-background-color .wp-block-details,
.has-superficie-background-color .wp-block-details,
.has-azul-profundo-background-color .wp-block-details {
	border-top: var(--d41-borde-oscuro);
}

.has-tinta-background-color .wp-block-details summary:hover,
.has-superficie-background-color .wp-block-details summary:hover,
.has-azul-profundo-background-color .wp-block-details summary:hover {
	color: var(--wp--preset--color--azul-suave, #EDF2FF);
}

/* Validacion del formulario de diagnostico: mensaje en rojo debajo del
   campo, casilla o campo obligatorio que falte por llenar. */
.d41-form-error {
	display: block;
	color: #B3261E;
	font-size: var(--wp--preset--font-size--xs);
	margin-top: 0.35rem;
}

.d41-form [aria-invalid="true"] {
	border-color: #B3261E;
}

/* Formulario de diagnóstico (shortcode [despacho41_formulario]) */
.d41-form {
	background: var(--wp--preset--color--blanco, #FFFFFF);
	border: var(--d41-borde-suave);
	border-radius: var(--d41-radio-grande);
	box-shadow: var(--d41-sombra-suave);
	padding: clamp(1.375rem, 3vw, 2.25rem);
	display: grid;
	gap: clamp(1rem, 2vw, 1.375rem);
}

.d41-form-fila {
	display: grid;
	gap: 0.4375rem;
	align-content: start;
	margin: 0;
	border: 0;
	padding: 0;
	min-width: 0;
}

.d41-form-dos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1rem, 2vw, 1.375rem);
	align-items: start;
}

.d41-form label,
.d41-form legend {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--tinta, #101623);
}

.d41-form abbr {
	color: var(--wp--preset--color--azul, #2F4EC8);
	text-decoration: none;
	border: 0;
}

.d41-form-opcional {
	font-weight: 400;
	color: var(--wp--preset--color--texto-secundario-claro, #4E5A70);
}

.d41-form input[type="text"],
.d41-form input[type="email"],
.d41-form input[type="tel"],
.d41-form textarea,
.d41-form select {
	width: 100%;
	max-width: 100%;
	align-self: start;
}

.d41-form textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.d41-form-ayuda {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-secundario-claro, #4E5A70);
}

.d41-form-radios {
	align-content: start;
}

.d41-form-radio {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	min-height: 2.25rem;
}

.d41-form-consentimiento label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.625rem;
	align-items: start;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

.d41-form input[type="checkbox"],
.d41-form input[type="radio"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--wp--preset--color--azul, #2F4EC8);
	margin: 0.2rem 0 0;
}

.d41-form-trampa {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.d41-form-enviar {
	margin: 0.25rem 0 0;
}

.d41-form button[type="submit"] {
	background: var(--wp--preset--color--azul, #2F4EC8);
	color: var(--wp--preset--color--blanco, #FFFFFF);
	border: 0;
	border-radius: var(--d41-radio);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	padding: 0.9375rem 1.75rem;
	min-height: var(--d41-toque-min);
	cursor: pointer;
	transition: background-color var(--d41-transicion), box-shadow var(--d41-transicion);
}

.d41-form button[type="submit"]:hover {
	background: var(--wp--preset--color--azul-oscuro, #1E3A8F);
	box-shadow: 0 6px 18px rgba(47, 78, 200, 0.22);
}

/* Estructura de campos del diagnóstico (referencia visual, sin envío) */
.d41-campos {
	max-width: 52rem;
}

.d41-campos > .d41-campo:first-child {
	padding-top: 0;
}

.d41-campos > .d41-campo:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.d41-campo {
	border-bottom: var(--d41-borde-suave);
	padding-block: 0.8125rem;
	min-height: var(--d41-toque-min);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.d41-campo .d41-campo-tipo {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--texto-secundario-claro, #4E5A70);
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-table th,
.wp-block-table td {
	border: var(--d41-borde-suave);
	padding: 0.8125rem 0.9375rem;
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	background: var(--wp--preset--color--azul-suave, #EDF2FF);
	font-weight: 600;
}

.wp-block-table figure,
.wp-block-table {
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.d41-footer {
	border-top: var(--d41-borde-oscuro);
}

.d41-footer .wp-block-site-logo img {
	max-height: 28px;
	width: auto;
	height: auto;
}

.d41-footer .wp-block-navigation {
	gap: 0.375rem 1.25rem;
}

.d41-footer .wp-block-navigation a {
	text-decoration: none;
}

.d41-footer .wp-block-navigation a:hover,
.d41-footer .wp-block-navigation a:focus {
	text-decoration: underline;
}

.d41-footer-legal {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.6;
}

/* Los enlaces legales son texto pequeno, no botones principales: se les
   quita la altura minima de toque para que su caja mida lo mismo que el
   texto del copyright y ambos queden alineados en la misma linea. */
.d41-footer-legal .wp-block-navigation-item__content {
	min-height: auto;
}

/* Credito de la agencia: discreto, alineado al mismo borde izquierdo */
.d41-credito {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--xs);
}

.d41-credito .wp-block-image,
.d41-credito figure {
	margin: 0;
	line-height: 0;
}

.d41-credito img {
	display: block;
	width: 108px;
	height: auto;
	opacity: 0.72;
	transition: opacity var(--d41-transicion);
}

.d41-credito a:hover img,
.d41-credito a:focus-visible img {
	opacity: 1;
}

.d41-credito p {
	margin: 0;
}

/* -------------------------------------------------------------------------
   12. Responsive (mobile-first; 360, 390, 768, 1024, 1280, 1440)
   ------------------------------------------------------------------------- */
.wp-block-columns {
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

img,
figure,
video,
iframe,
table {
	max-width: 100%;
}

@media (max-width: 781px) {
	/* Sin filas de tarjetas que igualar en altura, el margen automatico que
	   ancla el boton al fondo no tiene espacio libre que repartir y colapsa
	   a cero. Se usa un espacio fijo en su lugar. */
	.d41-card > .wp-block-buttons {
		margin-block-start: var(--d41-hueco-bloque) !important;
	}

	.d41-franja-confianza .wp-block-column {
		border-left: 0;
		border-top: var(--d41-borde-oscuro);
		padding-left: 0;
		padding-top: 1rem;
	}

	.d41-hero .wp-block-heading {
		max-width: none;
	}

	.d41-hero p,
	.d41-medida-corta,
	.d41-respuesta-directa {
		max-width: none;
	}

	.d41-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons,
	.d41-header .wp-block-buttons .wp-block-button,
	.d41-header .wp-block-buttons .wp-block-button__link {
		width: auto;
	}

	.d41-figura--hero {
		max-width: 100%;
		margin-inline: auto;
	}

	.d41-atiende .d41-figura--retrato {
		max-width: 160px;
	}

	.d41-campo {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.d41-card:hover,
	.d41-recurso:hover {
		transform: none;
	}
}

@media (max-width: 640px) {
	.d41-form-dos {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.d41-header .wp-block-site-logo img {
		max-height: 26px;
	}

	.d41-header .wp-block-button__link {
		padding-inline: 0.9375rem;
	}
}

@media (min-width: 782px) and (max-width: 1023px) {
	.d41-header .wp-block-site-logo img,
	.d41-header .d41-logo-respaldo img {
		max-height: 28px;
	}

	/* Tablet: los repartos 62/38 y 38/62 se igualan para no dejar
	   columnas de texto demasiado estrechas */
	.d41-seccion .wp-block-columns:not(.d41-franja-confianza) > .wp-block-column {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	.d41-seccion .wp-block-columns {
		gap: clamp(1.5rem, 3vw, 2.25rem);
	}

	.d41-figura--hero {
		max-width: 340px;
	}

	.d41-atiende .d41-figura--retrato {
		max-width: 150px;
	}

	.d41-form-dos {
		grid-template-columns: 1fr;
	}
}

@media (max-height: 500px) and (orientation: landscape) {
	.d41-hero {
		padding-block: clamp(2rem, 6vh, 3rem);
	}
}

/* -------------------------------------------------------------------------
   12b. Banner de cookies
   ------------------------------------------------------------------------- */
.d41-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--wp--preset--color--tinta, #101623);
	color: var(--wp--preset--color--blanco, #FFFFFF);
	padding: 1rem clamp(1.25rem, 4vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	border-top: var(--d41-borde-oscuro);
	box-shadow: 0 -8px 24px rgba(6, 10, 20, 0.25);
}

.d41-cookies[hidden] {
	display: none;
}

.d41-cookies-texto {
	flex: 1 1 320px;
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
}

.d41-cookies-texto p {
	margin: 0;
}

.d41-cookies-texto a {
	color: var(--wp--preset--color--cielo, #7C9CF0);
}

.d41-cookies-acciones {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   13. Reducción de movimiento
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.d41-card:hover,
	.d41-recurso:hover,
	.d41-card:focus-within,
	.d41-recurso:focus-within {
		transform: none;
	}
}