/* FASE 4 — "Lo esencial" en tarjetas con icono.
   Misma tarjeta que el simulador de hipotecas: fondo #1B1710, filete dorado
   al 26%, radio de 13 px. Predomina el negro. */

.mg-fitxes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mg-fitxes .mg-fitxa {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	margin: 0;
	padding: 18px 18px;
	background: var(--mg-noir-raised, #1B1710);
	border: var(--mg-hair, 1px solid rgba(212, 175, 55, .26));
	border-radius: var(--mg-radi, 13px);
	transition: border-color 250ms var(--mg-ease, ease), transform 250ms var(--mg-ease, ease);
	overflow-wrap: anywhere;
}

.mg-fitxes .mg-fitxa:hover {
	border-color: rgba(212, 175, 55, .55);
	transform: translateY(-2px);
}

.mg-fitxa__icona {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--mg-radi-s, 4px);
	background: rgba(212, 175, 55, .10);
	color: var(--mg-gold, #D4AF37);
}

.mg-fitxa__icona svg {
	width: 21px;
	height: 21px;
	display: block;
}

.mg-fitxa__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mg-fitxes .mg-fitxa__etiqueta {
	color: var(--mg-gold-soft, #997C21);
	font-family: var(--mg-tipo, sans-serif);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.3;
}

.mg-fitxes .mg-fitxa__valor {
	color: var(--mg-cream, #F4EFE4);
	font-family: var(--mg-tipo, sans-serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
}

/* La sección entera en negro, para que las tarjetas no floten sobre blanco. */
.es-property_section--basic-facts {
	background: var(--mg-noir, #14110E);
	border: var(--mg-hair, 1px solid rgba(212, 175, 55, .26));
	border-radius: var(--mg-radi, 13px);
	padding: 26px 24px 28px;
}

.es-property_section--basic-facts .es-property-section__title {
	color: var(--mg-cream, #F4EFE4);
	font-family: var(--mg-tipo, sans-serif);
	letter-spacing: .02em;
}

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

@media (max-width: 560px) {
	.mg-fitxes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.mg-fitxes .mg-fitxa { padding: 14px 12px; gap: 10px; }
	.mg-fitxa__icona { width: 36px; height: 36px; }
	.mg-fitxa__icona svg { width: 18px; height: 18px; }
	.mg-fitxes .mg-fitxa__valor { font-size: 17px; }
	.mg-fitxes .mg-fitxa__etiqueta { font-size: 11px; }
	.es-property_section--basic-facts { padding: 20px 16px 22px; }
}

/* ---------------------------------------------------------------
   MÁRGENES DE LA FICHA ENTERA

   Medido en el navegador: `.es-single` sale a izq 0 / der 0, o sea pegado a
   los dos bordes de la pantalla, y con él la descripción y todo el texto que
   no lleve maquetado propio. En móvil las letras llegan literalmente al borde;
   en escritorio el texto arranca en el píxel 0.

   La ficha de propiedad NO la monta Elementor —la pinta el tema sobre la
   plantilla de Estatik—, así que no hereda el contenedor con relleno que sí
   tienen las páginas normales. Hay que dárselo aquí.
   --------------------------------------------------------------- */

.es-single {
	box-sizing: border-box;
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 783px) {
	.es-single {
		padding-left: 28px;
		padding-right: 28px;
	}
}

/* En pantallas grandes, además de respirar, que la línea de texto no se haga
   interminable: se limita el ancho y se centra. */
@media (min-width: 1330px) {
	.es-single {
		max-width: 1280px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Que nada de dentro se salga del nuevo relleno. */
.es-single .mg-graella,
.es-single .mg-graella__principal,
.es-single .mg-graella__lateral {
	max-width: 100%;
}

/* El plugin mete 50 px de relleno lateral a `.es-property-section__content`
   en escritorio, para indentar el contenido bajo el título. Sumado al relleno
   de nuestra tarjeta negra son 74 px por lado y las tarjetas quedan
   innecesariamente estrechas. Se anula SOLO dentro de "Lo esencial";
   las demás secciones conservan la indentación del plugin. */
.es-property_section--basic-facts .es-property-section__content {
	/* !important porque el origen de ese relleno no aparece en ninguna hoja
	   legible desde el navegador ni como estilo en línea: la enumeración de
	   `document.styleSheets` no devuelve ninguna regla que case. Se fuerza y
	   se comprueba el resultado medido, que es lo que cuenta. */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* -------------------------------------------------------------------------
 * BOTÓN "SIMULA TU HIPOTECA"
 *
 * Va debajo de "Solicitar información", en la misma columna que el precio.
 * Es deliberadamente SECUNDARIO: contacto es la acción que queremos, simular
 * es la que ayuda a decidirse. Por eso va en contorno y no en dorado macizo,
 * para que no compita con el botón de al lado.
 *
 * El color del texto es la tinta y no el dorado: sobre blanco, el dorado de
 * marca se queda en 2,1 de contraste y no se lee. El dorado se queda en el
 * filete y en el icono, donde no hay nada que leer.
 * ---------------------------------------------------------------------- */
body.single-properties .mg-boto-simulador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	padding: 11px 20px;
	border: 1px solid var(--mg-or-vius, #D4AF37);
	border-radius: 4px;
	background: transparent;
	color: var(--mg-tinta, #14110E);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	text-align: center;
	transition: background-color 200ms ease, border-color 200ms ease;
}

body.single-properties .mg-boto-simulador:hover,
body.single-properties .mg-boto-simulador:focus-visible {
	background: rgba(212, 175, 55, .12);
	border-color: var(--mg-or-text, #B8860B);
	color: var(--mg-tinta, #14110E);
}

body.single-properties .mg-boto-simulador:focus-visible {
	outline: 2px solid var(--mg-or-text, #B8860B);
	outline-offset: 2px;
}

/* El icono sí puede ir en dorado: no es texto, no hay que leerlo. */
body.single-properties .mg-boto-simulador__icona {
	display: inline-flex;
	color: var(--mg-or-text, #B8860B);
}

/* En la columna del precio los dos botones ocupan lo mismo y quedan
   alineados a la derecha, como el precio que tienen encima. */
body.single-properties .es-single__header-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

body.single-properties .es-single__header-right .es-btn--request-info,
body.single-properties .mg-boto-simulador {
	min-width: 232px;
}

/* En móvil, ancho completo: no hay sitio para dos columnas y un botón
   estrecho a la derecha queda descolgado. */
@media (max-width: 767px) {
	body.single-properties .es-single__header-right {
		align-items: stretch;
	}

	body.single-properties .es-single__header-right .es-btn--request-info,
	body.single-properties .mg-boto-simulador {
		min-width: 0;
		width: 100%;
	}
}