/**
 * Estilos del Directorio de EDS.
 *
 * Los colores base salen del diseño entregado; los que el editor puede tocar
 * desde la pestaña Estilo de Elementor se sobrescriben por selector, así que
 * aquí solo viven como valor por defecto.
 */

.deds {
	--deds-azul: #1a57c4;
	--deds-rojo: #e4002b;
	--deds-texto: #111114;
	--deds-tenue: #5b6270;
	--deds-borde: #d9dde3;
	--deds-gris: #f1f2f4;

	background: #fff;
	border-radius: 24px;
	padding: 32px;
	box-shadow: 0 18px 40px rgba( 17, 17, 20, 0.08 );
	box-sizing: border-box;
}

.deds *,
.deds-ficha * {
	box-sizing: border-box;
}

.deds__titulo {
	margin: 0 0 24px;
	color: var( --deds-texto );
}

/* --- Formulario ------------------------------------------------------- */

/* El formulario se apila por encima del resultado a propósito.
   Leaflet marca sus paneles con z-index 400 y su contenedor queda en
   `z-index: auto`, así que ese 400 competía en el contexto de apilado del
   padre y tapaba los desplegables. Dando a cada bloque su propio contexto,
   el mapa queda confinado y el formulario siempre encima. */
.deds__form {
	position: relative;
	z-index: 20;
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) auto;
	gap: 16px;
	align-items: end;
}

.deds__campo {
	min-width: 0;
}

.deds__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	color: var( --deds-tenue );
}

.deds__select-wrap {
	position: relative;
}

/* --- Select nativo -----------------------------------------------------
   Sigue siendo la fuente de verdad, pero cuando el dropdown propio está
   montado se oculta visualmente sin sacarlo del árbol de accesibilidad. */

.deds__select {
	width: 100%;
	height: 56px;
	padding: 0 44px 0 18px;
	border: 1px solid var( --deds-borde );
	border-radius: 12px;
	background: #fff;
	color: var( --deds-texto );
	font-size: 16px;
	line-height: 1.2;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.deds__dd .deds__select {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* --- Dropdown propio --------------------------------------------------- */

.deds__dd {
	position: relative;
}

.deds .deds__dd-boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 56px;
	padding: 0 18px;
	border: 1px solid var( --deds-borde );
	border-radius: 12px;
	background: #fff;
	color: var( --deds-texto );
	font-family: inherit;
	font-size: 16px;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.deds .deds__dd-boton:hover:not( :disabled ) {
	border-color: var( --deds-azul );
}

.deds .deds__dd-boton:focus-visible {
	outline: 2px solid var( --deds-azul );
	outline-offset: 2px;
}

.deds__dd.is-abierto .deds__dd-boton {
	border-color: var( --deds-azul );
}

.deds__dd.is-deshabilitado .deds__dd-boton {
	background: var( --deds-gris );
	color: var( --deds-tenue );
	cursor: not-allowed;
}

.deds__dd.is-vacio:not( .is-deshabilitado ) .deds__dd-valor {
	color: var( --deds-tenue );
}

.deds__dd-valor {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.deds__dd-flecha {
	flex: 0 0 auto;
	display: flex;
	line-height: 0;
	transition: transform 0.18s ease;
}

/* La flecha gira al abrir, como en el diseño. */
.deds__dd.is-abierto .deds__dd-flecha {
	transform: rotate( 180deg );
}

.deds__dd-panel {
	position: absolute;
	z-index: 30;
	top: calc( 100% + 6px );
	left: 0;
	right: 0;
	padding: 8px 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 12px 32px rgba( 17, 17, 20, 0.14 );

	/* Recorta el fondo de la primera y última opción al pasar el ratón, que
	   si no sobresalen de las esquinas redondeadas. */
	overflow: hidden;
}

/* Buscador interno del desplegable: aparece solo en listas largas. */
.deds__dd-busqueda {
	display: block;
	width: calc( 100% - 24px );
	margin: 4px 12px 8px;
	padding: 10px 14px;
	border: 1px solid var( --deds-borde );
	border-radius: 8px;
	background: #fff;
	color: var( --deds-texto );
	font-family: inherit;
	font-size: 15px;
	box-sizing: border-box;
}

.deds__dd-busqueda:focus {
	outline: none;
	border-color: var( --deds-azul );
}

.deds__dd-busqueda[hidden] {
	display: none;
}

/* El desplazamiento vive en la lista, no en el panel, para que el buscador
   se quede fijo arriba mientras se recorren las opciones. */
.deds__dd-lista {
	max-height: 280px;
	overflow-y: auto;
	overflow-x: hidden;
}

.deds__dd-vacio {
	margin: 0;
	padding: 14px 20px;
	color: var( --deds-tenue );
	font-size: 15px;
}

.deds .deds__dd-item {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --deds-texto );
	font-family: inherit;
	font-size: 16px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;

	/* Las razones sociales son largas ("Agudelo Mejia Diomar Alonso Y/O
	   Servicentro la Variante"): sin esto la lista se desbordaba a lo ancho
	   y aparecía una barra de desplazamiento horizontal. */
	white-space: normal;
	overflow-wrap: anywhere;
}

.deds .deds__dd-item:hover,
.deds .deds__dd-item:focus,
.deds .deds__dd-item.is-elegido {
	background: var( --deds-gris );
	color: var( --deds-azul );
	outline: none;
}

.deds .deds__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: var( --deds-azul );
	color: #fff;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.deds .deds__submit:hover {
	filter: brightness( 1.1 );
}

.deds .deds__submit:focus-visible {
	outline: 2px solid var( --deds-texto );
	outline-offset: 3px;
}

/* --- Resultado -------------------------------------------------------- */

.deds__resultado {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 32px;
	margin-top: 28px;
	align-items: start;
}

.deds__mapa {
	height: 460px;
	border-radius: 16px;
	overflow: hidden;
	background: var( --deds-gris );
}

.deds__panel {
	display: flex;
	align-items: center;
	min-height: 200px;
}

/* Con ficha en pantalla el contenido se alinea arriba, con el desfase que
   muestra el diseño, en vez de quedar centrado como la burbuja inicial. */
.deds__panel--ficha {
	align-items: flex-start;
	padding-top: 42px;
}

.deds__burbuja {
	position: relative;
	max-width: 320px;
	margin: 0 auto;
	padding: 24px;
	border: 1px solid var( --deds-borde );
	border-radius: 16px;
	background: #fff;
	color: var( --deds-texto );
	font-weight: 700;
	line-height: 1.5;
}

.deds__burbuja p {
	margin: 0;
}

.deds__burbuja-icono {
	position: absolute;
	top: -20px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border: 1px solid var( --deds-borde );
	border-radius: 50%;
	background: #fff;
	color: var( --deds-tenue );
}

/* --- Ficha ------------------------------------------------------------
   Los selectores van encadenados a .deds / .deds-ficha a propósito: el tema
   y la tipografía global de Elementor pisan un `.clase` suelto en h3, ul y
   li, y la ficha salía con el tamaño y el peso del tema en vez del diseño. */

.deds .deds__ficha-nombre,
.deds-ficha .deds__ficha-nombre {
	margin: 0 0 28px;
	padding: 0;
	color: var( --deds-texto );
	font-size: 34px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.deds .deds__servicios,
.deds-ficha .deds__servicios {
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}

.deds .deds__servicios li,
.deds-ficha .deds__servicios li {
	position: relative;
	padding-left: 16px;
	margin: 0 0 9px;
	color: var( --deds-texto );
	font-size: 16px;
	line-height: 1.35;
	font-weight: 700;
	list-style: none;
}

.deds .deds__servicios li::before,
.deds-ficha .deds__servicios li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var( --deds-texto );
}

.deds .deds__direccion,
.deds-ficha .deds__direccion {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 16px;
	color: var( --deds-texto );
	font-size: 16px;
	line-height: 1.5;
}

.deds__pin {
	flex: 0 0 auto;
	color: var( --deds-rojo, #e4002b );
	line-height: 0;
	margin-top: 2px;
}

.deds__enlace-maps {
	display: inline-block;
	color: var( --deds-azul );
	font-weight: 700;
	text-decoration: underline;
}

.deds__aviso {
	margin: 0;
	padding: 24px;
	color: var( --deds-tenue );
	text-align: center;
}

/* --- Widget de ficha suelta ------------------------------------------- */

.deds-ficha {
	/* Igual que .deds-modal: este widget se puede colocar directamente en
	   una página sin el buscador (.deds) alrededor, así que no hereda sus
	   variables de color. Sin esto, `var( --deds-azul )` quedaba inválida y
	   el enlace "Conoce la ubicación" caía al azul y subrayado por defecto
	   del navegador en vez del estilo del diseño. */
	--deds-azul: #1a57c4;
	--deds-rojo: #e4002b;
	--deds-texto: #111114;
	--deds-tenue: #5b6270;
	--deds-borde: #d9dde3;
	--deds-gris: #f1f2f4;

	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 32px;
	align-items: start;
}

.deds-ficha__mapa {
	height: 420px;
}

/* --- Responsive ------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.deds__form {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.deds .deds__submit {
		grid-column: 2;
		justify-self: end;
	}
}

@media ( max-width: 767px ) {
	.deds {
		padding: 20px;
		border-radius: 16px;
	}

	.deds__form {
		grid-template-columns: minmax( 0, 1fr );
	}

	.deds .deds__submit {
		grid-column: 1;
		justify-self: stretch;
		width: 100%;
		border-radius: 12px;
	}

	.deds__resultado,
	.deds-ficha {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}

	.deds__mapa,
	.deds-ficha__mapa {
		height: 300px;
	}

	.deds__ficha-nombre {
		font-size: 26px;
	}
}

/* ====================================================================== *
 * Listado de EDS por departamento
 * ====================================================================== */

.deds-lista {
	--deds-azul: #1a57c4;
	--deds-rojo: #e4002b;
	--deds-texto: #111114;
	--deds-tenue: #5b6270;
	--deds-borde: #d9dde3;
	--deds-gris: #f1f2f4;

	box-sizing: border-box;
}

.deds-lista *,
.deds-modal * {
	box-sizing: border-box;
}

.deds-lista__titulo {
	margin: 0 0 28px;
	color: var( --deds-texto );
	text-align: center;
}

/* --- Pestañas --------------------------------------------------------- */

.deds-lista__tabs-nav {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
}

.deds-lista__tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	justify-content: center;
	overflow-x: auto;
	padding: 4px;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.deds-lista__tabs::-webkit-scrollbar {
	display: none;
}

.deds-lista__tabs-nav.tiene-desbordamiento .deds-lista__tabs {
	justify-content: flex-start;
}

.deds-lista .deds-lista__tabs-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #e4e4e6;
	color: var( --deds-texto );
	font-family: inherit;
	font-size: 25px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.deds-lista .deds-lista__tabs-control:hover:not( :disabled ) {
	background: #d2d2d6;
}

.deds-lista .deds-lista__tabs-control:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.deds-lista .deds-lista__tabs-control:focus-visible {
	outline: 2px solid var( --deds-azul );
	outline-offset: 2px;
}

.deds-lista__tabs-control[hidden] {
	display: none;
}

/* Encadenado a .deds-lista para superar `.elementor-kit-N button`, que si no
   pinta estas pastillas con el rojo de marca del tema. */
.deds-lista .deds-lista__tab {
	padding: 13px 30px;
	border: 0;
	border-radius: 999px;
	background: #e4e4e6;
	color: #6b7280;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.deds-lista .deds-lista__tab:hover {
	background: #d9d9dd;
}

.deds-lista .deds-lista__tab.is-activo {
	background: #d2d2d6;
	color: var( --deds-texto );
	font-weight: 700;
}

.deds-lista .deds-lista__tab:focus-visible {
	outline: 2px solid var( --deds-azul );
	outline-offset: 2px;
}

/* --- Rejilla ---------------------------------------------------------- */

.deds-lista__panel.is-oculto {
	display: none;
}

.deds-lista__depto {
	margin: 0 0 20px;
	color: var( --deds-texto );
	font-size: 22px;
	font-weight: 700;
}

.deds-lista__grid {
	--deds-cols: 4;

	display: grid;
	grid-template-columns: repeat( var( --deds-cols ), minmax( 0, 1fr ) );
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.deds-lista__item {
	/* Los nombres comerciales pueden ser muy largos. `min-width: 0` permite
	   que la celda respete el ancho de la rejilla, en lugar de ensancharla. */
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La tarjeta entera es el botón: toda la superficie es pulsable y queda un
   único elemento en el recorrido con teclado. */
.deds-lista .deds-lista__tarjeta {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	min-width: 0;
	/* Algunos temas aplican `white-space: nowrap` a todos los botones; sin
	   esta regla el nombre se sale por encima de la tarjeta vecina. */
	white-space: normal;
	text-align: left;
	cursor: pointer;
}

.deds-lista .deds-lista__tarjeta:focus-visible {
	outline: 2px solid var( --deds-azul );
	outline-offset: 4px;
}

.deds-lista__foto {
	display: block;
	position: relative;
	height: 170px;
	margin-bottom: 12px;
	border-radius: 12px;
	overflow: hidden;
	background: var( --deds-gris );
}

.deds-lista__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.deds-lista .deds-lista__tarjeta:hover .deds-lista__foto img {
	transform: scale( 1.04 );
}

.deds-lista__sinfoto {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b9bec7;
}

.deds-lista__pie {
	display: block;
	min-width: 0;
	font-size: 15px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.deds-lista__prefijo {
	color: var( --deds-tenue );
}

.deds-lista__nombre {
	color: var( --deds-azul );
	font-weight: 700;
}

/* --- Paginación ------------------------------------------------------ */

.deds-lista__paginacion {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 36px;
}

.deds-lista__paginacion[hidden] {
	display: none;
}

.deds-lista__paginas {
	display: flex;
	align-items: center;
	gap: 8px;
}

.deds-lista .deds-lista__pagina {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: #e4e4e6;
	color: var( --deds-tenue );
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.deds-lista .deds-lista__pagina:hover:not( :disabled ) {
	background: #d2d2d6;
	color: var( --deds-texto );
}

.deds-lista .deds-lista__pagina.is-activa {
	background: var( --deds-azul );
	color: #fff;
}

.deds-lista .deds-lista__pagina:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.deds-lista .deds-lista__pagina:focus-visible {
	outline: 2px solid var( --deds-azul );
	outline-offset: 3px;
}

.deds-lista__pagina--anterior,
.deds-lista__pagina--siguiente {
	font-size: 24px !important;
	font-weight: 400 !important;
}

.deds-lista__puntos {
	min-width: 24px;
	color: var( --deds-tenue );
	font-size: 18px;
	line-height: 1;
	text-align: center;
}

/* ====================================================================== *
 * Ventana de detalle
 * ====================================================================== */

body.deds-modal-abierto {
	overflow: hidden;
}

.deds-modal {
	/* El modal se imprime en wp_footer, colgando de <body>, así que queda
	   fuera de .deds y .deds-lista y NO hereda sus variables. Sin esto,
	   `var( --deds-rojo )` quedaba inválida y el pin heredaba el negro del
	   texto en vez del rojo del diseño. */
	--deds-azul: #1a57c4;
	--deds-rojo: #e4002b;
	--deds-texto: #111114;
	--deds-tenue: #5b6270;
	--deds-borde: #d9dde3;
	--deds-gris: #f1f2f4;

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.deds-modal[hidden] {
	display: none;
}

.deds-modal__fondo {
	position: absolute;
	inset: 0;
	background: rgba( 17, 17, 20, 0.55 );
}

.deds-modal__caja {
	position: relative;
	width: 100%;
	max-width: 980px;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	padding: 40px;
	border-radius: 24px;
	background: #f4f4f5;
	box-shadow: 0 30px 80px rgba( 17, 17, 20, 0.35 );
}

.deds-modal__caja:focus {
	outline: none;
}

.deds-modal .deds-modal__cerrar {
	position: absolute;
	top: 22px;
	left: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --deds-tenue, #5b6270 );
	cursor: pointer;
}

.deds-modal .deds-modal__cerrar:hover {
	background: rgba( 17, 17, 20, 0.06 );
	color: #111114;
}

.deds-modal .deds-modal__cerrar:focus-visible {
	outline: 2px solid #1a57c4;
	outline-offset: 2px;
}

.deds-modal__cuerpo {
	display: grid;
	grid-template-columns: minmax( 0, 0.92fr ) minmax( 0, 1.08fr );
	gap: 32px;

	/* `stretch` y no `start`: en el diseño la foto ocupa todo el alto del
	   modal. Con `start` quedaba a su altura natural y dejaba un hueco
	   grande debajo del texto cuando la ficha traía pocos datos. */
	align-items: stretch;
}

/* Ficha sin foto: una sola columna, sin dejar la mitad vacía. */
.deds-modal__cuerpo--solo-texto {
	grid-template-columns: minmax( 0, 1fr );
}

.deds-modal__datos {
	display: flex;
	flex-direction: column;

	/* Deja sitio para la X, que va en la esquina superior izquierda. */
	padding-top: 24px;
}

.deds-modal .deds-modal__titulo {
	margin: 0 0 18px;
	padding: 0;
	color: #111114;
	font-size: 30px;
	line-height: 1.15;
	font-weight: 800;
}

.deds-modal__texto {
	margin-bottom: 22px;
	color: #111114;
	font-size: 16px;
	line-height: 1.55;
}

.deds-modal__texto p {
	margin: 0 0 10px;
}

/* Dos columnas de servicios, como en el diseño. */
.deds-modal .deds-modal__servicios {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 4px 20px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.deds-modal .deds-modal__servicios li {
	position: relative;
	margin: 0;
	padding-left: 16px;
	color: #131416;
	font-size: 14px;
	line-height: 21px;
	font-weight: 700;
	letter-spacing: 0;
	list-style: none;
}

.deds-modal .deds-modal__servicios li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #131416;
}

.deds-modal__direccion {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 16px;
	color: #111114;
	font-size: 16px;
	line-height: 1.5;
}

.deds-modal__foto {
	align-self: stretch;
	min-height: 340px;
	border-radius: 14px;
	overflow: hidden;
}

.deds-modal__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Responsive ------------------------------------------------------- */

@media ( max-width: 1024px ) {
	/* Se ajusta la variable, no `grid-template-columns`: si se sobrescribiera
	   la propiedad, esta regla ganaría a los controles responsive de Elementor
	   (que escriben `--deds-cols`) y los dejaría sin efecto. */
	.deds-lista__grid {
		--deds-cols: 2;
	}
}

@media ( max-width: 767px ) {
	.deds-lista__grid {
		--deds-cols: 1;
	}

	.deds-lista__tabs {
		padding: 4px 48px 6px 4px;
	}

	.deds-lista__tabs-nav {
		display: block;
		position: relative;
		margin-bottom: 24px;
	}

	.deds-lista .deds-lista__tabs-control {
		display: inline-flex;
		position: absolute;
		top: 50%;
		z-index: 2;
		width: 34px;
		height: 34px;
		transform: translateY( -50% );
		box-shadow: 0 3px 10px rgba( 17, 17, 20, 0.12 );
	}

	.deds-lista .deds-lista__tabs-control--anterior {
		left: 0;
	}

	.deds-lista .deds-lista__tabs-control--siguiente {
		right: 0;
	}

	.deds-lista .deds-lista__tabs-control[hidden] {
		display: none;
	}

	.deds-lista .deds-lista__tab {
		flex: 0 0 auto;
	}

	.deds-lista__paginacion {
		gap: 6px;
		margin-top: 28px;
	}

	.deds-lista__paginas {
		gap: 5px;
	}

	.deds-lista .deds-lista__pagina {
		min-width: 36px;
		height: 36px;
		padding: 0 10px;
	}

	.deds-modal {
		padding: 12px;
	}

	.deds-modal__caja {
		padding: 48px 20px 24px;
		border-radius: 18px;
	}

	.deds-modal__cuerpo {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}

	/* La foto va primero en móvil, como es habitual en una ficha. */
	.deds-modal__foto {
		order: -1;
		min-height: 0;
		height: 220px;
	}

	.deds-modal__datos {
		padding-top: 0;
	}

	.deds-modal .deds-modal__titulo {
		font-size: 24px;
	}

	.deds-modal .deds-modal__servicios {
		grid-template-columns: minmax( 0, 1fr );
	}
}