/*
Theme Name: Vender Multipropiedad
Theme URI: https://www.vendermultipropiedad.es
Description: Tema hijo de GeneratePress para vendermultipropiedad.es. Identidad sobria de portal inmobiliario, pensada para un público mayor y para móvil, que es el 83% del tráfico.
Author: Reclamalia
Template: generatepress
Version: 1.1787848503
*/

/* ============================================================
   SISTEMA DE DISEÑO
   ============================================================ */
:root{
	--vmp-azul:        #12365f;
	--vmp-azul-osc:    #0d2846;
	--vmp-azul-claro:  #eef4fb;
	--vmp-texto:       #22303f;
	--vmp-texto-2:     #44546a;
	--vmp-texto-3:     #7a828c;
	--vmp-borde:       #e2e7ec;
	--vmp-borde-osc:   #ccd2d9;
	--vmp-fondo:       #f7f9fb;
	--vmp-verde:       #1c6b3a;
	--vmp-verde-claro: #e6f6ec;
	--vmp-ambar:       #6b5a2a;
	--vmp-ambar-claro: #fff8e6;
	--vmp-radio:       12px;
}

/* ============================================================
   ANCHURAS — una sola medida para todo, o no cuadra nada
   ============================================================ */
/* UNA sola anchura para cabecera, contenido y pie. Si no coinciden,
   el logo y el menú no se alinean con lo de abajo y todo baila. */
:root{ --vmp-ancho: 1100px; }

.grid-container,
.site.grid-container,
.site-header.grid-container,
.inside-header.grid-container,
.main-navigation .inside-navigation.grid-container,
.site-footer .grid-container,
.footer-widgets-container.grid-container{
	max-width: var(--vmp-ancho) !important;
	margin-left: auto;
	margin-right: auto;
}

/* El artículo ocupa la columna entera: así su borde izquierdo
   coincide exactamente con el del logo. */
.separate-containers .inside-article,
.separate-containers .page-header,
.site-main > .page-header{
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* La comodidad de lectura se consigue limitando la línea de texto,
   no encogiendo la caja. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3{
	max-width: 72ch;
}

/* Mis bloques heredan la anchura de la columna en vez de imponer la suya.
   Antes cada uno traía la suya (640, 680, libre) y quedaban descuadrados. */
.entry-content .vmpf,
.entry-content .vmpt,
.entry-content .vmph,
.entry-content .vmpd,
.entry-content .vmpx,
.entry-content .vmpv,
.entry-content .vmpp,
.entry-content .vmpc-wrap,
.entry-content .vmpp-caja{
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

/* Contenedor general de la web */
.site.grid-container{ max-width: 1140px; }

/* ============================================================
   BASE — texto grande a propósito: el público pasa de los 60
   ============================================================ */
body{
	font-size: 17px;
	line-height: 1.75;
	color: var(--vmp-texto);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
.entry-content p{ margin-bottom: 1.4em; }
a{ color: var(--vmp-azul); }
a:hover{ color: var(--vmp-azul-osc); }

h1,h2,h3,h4{ color: var(--vmp-azul); line-height: 1.28; font-weight: 700; }
h1{ font-size: 2em;   margin-bottom: .5em; }
h2{ font-size: 1.45em; margin: 1.8em 0 .6em; }
h3{ font-size: 1.2em;  margin: 1.5em 0 .5em; }

.entry-content img{ border-radius: var(--vmp-radio); }

/* ============================================================
   CABECERA — fija, con el botón de acción siempre visible
   ============================================================ */
.site-header{
	background: #fff;
	border-bottom: 1px solid var(--vmp-borde);
	position: -webkit-sticky;   /* Safari lo necesita con prefijo */
	position: sticky;
	top: 0; z-index: 500;
	padding-top: 0; padding-bottom: 0;
}

/* Safari no fija un elemento si algún ancestro tiene overflow distinto
   de visible. Sin esto, la cabecera se queda quieta en iPhone. */
html, body, .site, #page{ overflow-x: clip; }
@supports not (overflow-x: clip){ html, body{ overflow-x: visible; } }
.inside-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5em;
	padding-top: .7em; padding-bottom: .7em;
}
.site-branding-container{ display: flex; align-items: center; gap: .8em; }
.site-branding{ margin: 0; }
.main-title{ margin: 0; font-size: 1.22em; line-height: 1.2; }
.site-description{ margin: 0; font-size: .82em; color: var(--vmp-texto-3); line-height: 1.3; }
.main-navigation{ flex: 0 1 auto; }
.main-navigation .inside-navigation{ padding: 0; }
.site-logo img, .site-header img{ max-height: 46px; width: auto; }
.main-title a{ color: var(--vmp-azul); font-weight: 700; letter-spacing: -.3px; }

.main-navigation{ background: transparent; }
.main-navigation .main-nav ul li a{
	color: var(--vmp-texto-2);
	font-weight: 500;
	font-size: .97em;
	padding-left: 16px; padding-right: 16px;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a{
	color: var(--vmp-azul);
	background: var(--vmp-azul-claro);
}

/* El CTA del menú: la clase se añade desde functions.php */
.main-navigation .main-nav ul li.vmp-cta > a{
	background: var(--vmp-azul);
	color: #fff;
	border-radius: 8px;
	margin: 8px 4px;
	padding: .55em 1.1em;
	font-weight: 600;
}
.main-navigation .main-nav ul li.vmp-cta > a:hover{ background: var(--vmp-azul-osc); color:#fff; }

/* ============================================================
   MÓVIL — menú a pantalla completa, botones grandes
   ============================================================ */
@media (max-width: 768px){
	body{ font-size: 16.5px; }
	h1{ font-size: 1.55em; }
	h2{ font-size: 1.25em; }

	/* La cabecera ocupaba media pantalla y el título se salía por la derecha */
	.site-header{ padding: 0 !important; }
	.inside-header{
		display: flex !important;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: .6em;
		padding: .5em .9em !important;
		min-height: 0;
	}
	.site-branding-container{ flex: 1 1 auto; min-width: 0; gap: .55em; }
	.site-logo{ flex: 0 0 auto; margin: 0; }
	.site-logo img, .site-header img{ max-height: 38px; width: auto; }

	/* El nombre ya está en el logo: en pantalla pequeña sobra y desborda */
	.site-branding{ min-width: 0; }
	.main-title{
		font-size: .92em;
		line-height: 1.15;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.site-description{ display: none; }

	/* El nombre se queda SIEMPRE. Antes lo escondía en pantallas
	   pequeñas y desaparecía la marca: mal. Se parte en dos líneas. */
	.main-title{
		white-space: normal;
		text-overflow: clip;
		font-size: .82em;
		line-height: 1.12;
		letter-spacing: -.2px;
		word-break: break-word;
	}
	@media (max-width: 420px){
		.main-title{ font-size: .74em; }
		.site-logo img, .site-header img{ max-height: 32px; }
	}

	/* El botón de menú estaba dentro de una caja gigante */
	.main-navigation.mobile-menu-control-wrapper{
		flex: 0 0 auto;
		width: auto !important;
		margin: 0 !important;
		background: transparent;
	}
	.main-navigation .menu-toggle{
		color: var(--vmp-azul);
		font-size: .95em;
		font-weight: 600;
		padding: .55em .8em !important;
		line-height: 1.2 !important;
		background: var(--vmp-azul-claro);
		border-radius: 8px;
		width: auto !important;
		display: inline-flex;
		align-items: center;
		gap: .4em;
	}
	.main-navigation .menu-toggle:hover{ background: #dbe6f2; }
	.main-navigation.toggled .main-nav > ul{
		background: #fff;
		border-top: 1px solid var(--vmp-borde);
		padding: .5em 0 1em;
	}
	.main-navigation.toggled .main-nav ul li a{
		padding: 1.05em 1.2em;
		font-size: 1.06em;
		border-bottom: 1px solid var(--vmp-borde);
	}
	.main-navigation .main-nav ul li.vmp-cta > a{
		margin: .8em 1em;
		text-align: center;
		font-size: 1.06em;
		padding: .95em 1.2em;
	}
	/* Nada de barra inferior flotante: molesta y tapa contenido */
}

/* ============================================================
   ENTRADAS Y ARCHIVOS
   ============================================================ */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header{
	background: #fff;
	border: 1px solid var(--vmp-borde);
	border-radius: var(--vmp-radio);
	padding: 2em;
}
@media (max-width: 768px){
	.separate-containers .inside-article{ padding: 1.3em; border-radius: 0; border-left: 0; border-right: 0; }
	.separate-containers .site-main{ margin: 0 0 1.5em !important; }
}

/* Espaciado uniforme entre bloques: sin esto unos se pegan y otros bailan */
.entry-content > *{ margin-top: 0; margin-bottom: 1.5em; }
.entry-content > *:last-child{ margin-bottom: 0; }
.entry-title{ font-size: 1.55em; }
.entry-title a{ color: var(--vmp-azul); text-decoration: none; }
.entry-title a:hover{ color: var(--vmp-azul-osc); }
.entry-meta{ color: var(--vmp-texto-3); font-size: .86em; }

/* Los archivos de complejo: rejilla en vez de lista larga */
body.category .site-main{ display: block; }

/* ============================================================
   BOTONES
   ============================================================ */
.wp-block-button__link, button, input[type=submit], .button{
	background: var(--vmp-azul);
	border-radius: 9px;
	font-weight: 600;
	padding: .8em 1.5em;
	border: 0;
}
.wp-block-button__link:hover, button:hover, input[type=submit]:hover{ background: var(--vmp-azul-osc); }

/* ============================================================
   PIE
   ============================================================ */
.site-footer, .footer-widgets{
	background: var(--vmp-azul);
	color: rgba(255,255,255,.86);
	border: 0;
}
.site-footer a, .footer-widgets a{ color: #fff; }
.footer-widgets .widget-title{ color: #fff; font-size: 1.02em; }
.site-info{ background: var(--vmp-azul-osc); color: rgba(255,255,255,.7); font-size: .88em; }
.site-info a{ color: rgba(255,255,255,.92); }

/* ============================================================
   ACCESIBILIDAD — foco visible, importa con público mayor
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
	outline: 3px solid rgba(18,54,95,.4);
	outline-offset: 2px;
}

/* ============================================================
   AJUSTES PARA SAFARI / iPHONE
   ============================================================ */

/* Los campos nativos de iOS se pintan con estilo propio si no se anula */
.vmpp input, .vmpp select, .vmpp textarea,
.vmpc-wrap input, .vmpc-wrap textarea,
input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=search], select, textarea{
	-webkit-appearance: none;
	appearance: none;
	border-radius: 8px;
}

/* iOS hace zoom automático si el campo baja de 16px. Muy molesto al escribir. */
@media (max-width: 768px){
	input, select, textarea{ font-size: 16px !important; }
}

/* Las imágenes de fondo en <span> necesitan display:block en Safari */
.vmpd-i, .vmpf-img{ display: block; }

/* Safari antiguo no entiende gap en flex: separación de respaldo */
@supports not (gap: 1em){
	.vmph-grid > *{ margin: .5em; }
	.vmpd-g > *{ margin: .45em; }
}

/* Evita que el texto se agrande solo al girar el móvil */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Safari recorta sombras y bordes redondeados dentro de enlaces en bloque */
.vmpd-c, .vmpx-c{ -webkit-transform: translateZ(0); overflow: hidden; }

/* ============================================================
   TABLAS
   ============================================================ */
.entry-content table{ border-collapse: collapse; width: 100%; font-size: .95em; }
.entry-content th{ background: var(--vmp-azul-claro); color: var(--vmp-azul); text-align: left; }
.entry-content th, .entry-content td{ border: 1px solid var(--vmp-borde); padding: .6em .8em; }