/*
 * Movimiento y acabado de las páginas interiores (Alan/Alex, 2026-10-05). Lo carga mu-plugins/mg-movimiento.php,
 * nunca en la portada cinemática. Variables, enlace de cookies e idioma: mg-comun.css. Reglas de BRANDING.md §21: una sola curva
 * cubic-bezier(.2,.7,.2,1), entradas de fade + 14 px como mucho, escalonadas 120 ms, nada de más de
 * 800 ms, y todo desactivado con prefers-reduced-motion.
 */

/* Legibilidad (2026-10-06), sólo interiores: el CTA móvil era de 9 px y la etiqueta de ficha de 10 px. */
html body.mg-shared .mgc-barra .mgc-boto--barra { font-size: 12px !important; letter-spacing: .06em; }
body.mg-shared .es-single .es-badge { font-size: 12px !important; line-height: 1.5; white-space: normal; }
/* En tableta las migas también saltaban de una a dos líneas al cargar Poppins. */
@media (min-width:768px) and (max-width:1024px) {
	.es-single .es-breadcrumbs { display:block; white-space:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
	.es-single .es-breadcrumbs>* { display:inline-block; white-space:nowrap; }
	.es-single .es-breadcrumbs::-webkit-scrollbar { display:none; }
}

/* 1. Transiciones entre páginas: fundido corto en lugar del pantallazo en blanco. La cabecera se queda
   quieta porque tiene nombre propio. Navegadores sin soporte navegan como siempre. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--mg-curva); }
.mgc-barra { view-transition-name: mg-cabecera; }
.mg-contact-strip { view-transition-name: mg-franja; }
aside.mg-help { view-transition-name: mg-ayuda; }

/* 2. La franja de contacto la crea un script al final de la carga y empujaba la página 32 px
   (CLS 0,36 en el buscador). Se reserva su hueco desde el principio; en móvil no hay franja. */
@media (min-width: 768px) {
	body.mg-shared,
	body.mgc-pagina {
		--mg-contact-height: 32px;
		--admin: calc(var(--wp-admin--admin-bar--height, 0px) + var(--mg-contact-height));
	}
	body.mg-shared { padding-top: calc(var(--barra) + var(--mg-contact-height)); }
}

/* 3. Desplazamiento suave a los anclajes (#valoracion…) sólo en las páginas interiores: la portada
   cinemática mueve el scroll por su cuenta y no debe heredarlo. */
html:has(body.mg-shared) { scroll-behavior: smooth; }

/* 4. Entrada de las secciones al hacer scroll. Sólo se esconde lo que el script marca, y sólo lo que
   aún no se ve al cargar, así que no retrasa lo primero que aparece ni mueve nada de sitio. */
.mg-mov .mg-revela {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--mg-curva), transform .6s var(--mg-curva);
	transition-delay: var(--mg-retraso, 0ms);
}
.mg-mov .mg-revela.mg-visto { opacity: 1; transform: none; }

/* 5. Botón «¿Te ayudamos?» en el móvil: al bajar se queda en un círculo con el sobre, para no tapar
   el texto; arriba del todo vuelve a enseñar la frase. */
@media (max-width: 767px) {
	body.mg-contact-ready aside.mg-help .mg-help-toggle { transition: width .3s var(--mg-curva), padding .3s var(--mg-curva); }
	body.mg-contact-ready aside.mg-help.mg-ayuda-compacta .mg-help-toggle {
		justify-content: center;
		gap: 0;
		width: 52px;
		min-height: 52px;
		height: 52px;
		padding: 0;
		overflow: hidden;
		border-radius: 50%;
		font-size: 0;
		white-space: nowrap;
	}
	body.mg-contact-ready aside.mg-help.mg-ayuda-compacta .mg-help-toggle span { font-size: 20px; margin: 0; }
}

/* 5b. Botón «subir arriba» de Astra: era un cuadrado dorado macizo; pasa a círculo oscuro con filete
   dorado, igual que «¿Te ayudamos?». */
body #ast-scroll-top {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(212, 175, 55, .55);
	border-radius: 50%;
	background: var(--mg-noir);
	color: var(--mg-oro);
	box-shadow: 0 5px 24px rgba(0, 0, 0, .2);
	transition: background .25s var(--mg-curva), color .25s var(--mg-curva);
}
body #ast-scroll-top:hover { background: var(--mg-noir-alt); color: #E8D9A8; }
body #ast-scroll-top .ast-icon,
body #ast-scroll-top svg { fill: currentColor; color: currentColor; }

/* 6. Pie de página en negro de marca (BRANDING.md §17: el logo va siempre sobre fondo oscuro). */
body .site-footer,
body .site-footer .site-above-footer-wrap,
body .site-footer .site-primary-footer-wrap,
body .site-footer .site-below-footer-wrap {
	background: var(--mg-noir);
	color: var(--mg-crema);
}
body .site-footer .site-above-footer-wrap { padding-top: 56px; }
body .site-footer .site-primary-footer-wrap { padding-bottom: 40px; }
body .site-footer .site-below-footer-wrap {
	border-top: 1px solid rgba(212, 175, 55, .22);
	background: var(--mg-noir-alt);
}
body .site-footer .footer-nav-wrap a,
body .site-footer .ast-footer-copyright,
body .site-footer .ast-footer-copyright p,
body .site-footer .ast-footer-copyright a {
	color: var(--mg-crema) !important;
	transition: color .25s var(--mg-curva);
}
body .site-footer .footer-nav-wrap a:hover,
body .site-footer .footer-nav-wrap a:focus-visible,
body .site-footer .ast-footer-copyright a:hover { color: var(--mg-oro) !important; }
body .site-footer .ast-footer-html-1 img { max-width: 132px; height: auto; }
body .site-footer .ast-footer-html-1 p {
	color: var(--mg-champan);
	font: 500 12px/1.6 Poppins, Arial, sans-serif;
	letter-spacing: .32em;
	text-transform: uppercase;
}
body .site-footer .mg-peu-legal,
body .site-footer .mg-peu-legal a { color: var(--mg-oro-suave); }
body .site-footer .mg-peu-legal a:hover { color: var(--mg-oro); }
body .site-footer a:focus-visible,
body .site-footer button:focus-visible { outline: 2px solid #E8D9A8; outline-offset: 3px; }

/* 6b. Buscador: la maqueta de lista + mapa (mapa-buscador.css, .mg-con-mapa) desde el primer pintado. */
@media (min-width: 1025px) {
	body.mg-buscador-mapa .es-properties.js-es-properties:not(.mg-sin-mapa) {
		display: grid !important;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}
	body.mg-buscador-mapa .es-properties.js-es-properties:not(.mg-sin-mapa) > .es-properties__search { grid-column: 1 / -1; grid-row: 1; }
	body.mg-buscador-mapa .es-properties.js-es-properties:not(.mg-sin-mapa) > .es-properties__list { grid-column: 1; grid-row: 2; min-width: 0; }
	body.mg-buscador-mapa .es-properties.js-es-properties:not(.mg-sin-mapa) > .es-properties__map { display: none !important; }
}

/* 6c. Título del buscador y de los resultados: estaba pegado a la cabecera (0 px). Misma separación que las páginas
   legales: 56 px en escritorio y 36 px en móvil. */
body.mg-shared:has(.es-properties) .entry-header { padding-top: 56px; margin-bottom: 8px; }
@media (max-width: 767px) { body.mg-shared:has(.es-properties) .entry-header { padding-top: 36px; } }

/* 7. Tarjetas del buscador: la foto se acerca un poco al pasar el ratón (sólo transform). */
@media (hover: hover) {
	.es-listing { transition: box-shadow .4s var(--mg-curva), transform .4s var(--mg-curva); }
	.es-listing:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20, 17, 14, .12); }
	.es-listing .slick-slide img { transition: transform .8s var(--mg-curva); }
	.es-listing:hover .slick-slide img { transform: scale(1.03); }
}


/* 8. «Aterrizaje» de los botones principales de Vende (Alan/Alex, 2026-10-05; tercera versión tras verlo):
   el botón sube rápido desde abajo, se pasa de su sitio, derrapa de lado inclinándose y vuelve a colocarse con
   un par de coletazos; al pararse suelta dos ondas doradas y lo recorre un destello. El enlace «Pide tu valoración
   gratuita más detallada…» y la nota (los dos <p> que añade mg-seller-copy.php detrás del botón) caen desde
   arriba rebotando, cuando el botón ya ha llegado. ~1,7 s en total, una sola vez y nada con «reducir movimiento».
   Se sale a propósito de BRANDING §21 porque lo pidieron expresamente. botones.css fija `transform: none
   !important` en el botón, pero no las propiedades sueltas `translate`, `rotate` y `scale`: con ellas se mueve
   sólo el botón. La onda es su ::after y el destello su ::before. */
.mg-mov .mg-aterriza a.elementor-button { opacity: 0; transform-origin: 50% 60%; }
.mg-mov .mg-aterriza.mg-aterrizado a.elementor-button { opacity: 1; animation: mg-derrape 1.15s both; }
@keyframes mg-derrape {
	0%   { opacity: 0; translate: -36px 190px; rotate: 9deg; scale: .9 1.1; animation-timing-function: cubic-bezier(.3, .75, .45, 1); }
	10%  { opacity: 1; }
	30%  { translate: 6px -14px; rotate: -2deg; scale: 1.02 .97; animation-timing-function: cubic-bezier(.3, .6, .4, 1); }
	48%  { translate: 28px 2px; rotate: -7deg; scale: 1; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
	64%  { translate: -9px 0; rotate: 2.5deg; animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
	78%  { translate: 4px 0; rotate: -1deg; }
	90%  { translate: -1px 0; rotate: .3deg; }
	100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
}
.mg-mov .mg-aterriza .elementor-button-wrapper > p { opacity: 0; }
.mg-mov .mg-aterriza.mg-aterrizado .elementor-button-wrapper > p { animation: mg-cae .85s .5s both; }
.mg-mov .mg-aterriza.mg-aterrizado .elementor-button-wrapper > p + p { animation-delay: .62s; }
@keyframes mg-cae {
	0%   { opacity: 0; translate: 0 -46px; animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
	30%  { opacity: 1; }
	50%  { translate: 0 0; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
	68%  { translate: 0 -12px; animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
	84%  { translate: 0 0; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
	92%  { translate: 0 -3px; }
	100% { opacity: 1; translate: 0 0; }
}
/* Ninguna animación (el derrape, las ondas) puede ensanchar la página: se recorta en el bloque a todo ancho que
   contiene el botón, nunca en html/body (en el iPhone eso afectaba al scroll de la página; Alan/Alex, 2026-10-05). */
.e-con.e-parent:has(.mg-aterriza) { overflow-x: clip; }
/* z-index: el enlace y la nota caen desde detrás del botón, no por encima */
html body:not(#mg-boto) .mg-aterriza a.elementor-button { position: relative !important; z-index: 1 !important; overflow: visible !important; }
.mg-aterriza a.elementor-button::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--mg-oro);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}
.mg-mov .mg-aterriza.mg-aterrizado a.elementor-button::after { animation: mg-onda .7s .72s ease-out 2 backwards; } /* backwards: al acabar vuelve a su tamaño; con «both» se quedaba invisible pero al 175 % y daba scroll lateral en el móvil */
@keyframes mg-onda {
	0%   { opacity: .95; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.22, 1.75); }
}
.mg-aterriza a.elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(110deg, transparent 35%, rgba(255, 250, 230, .65) 50%, transparent 65%) no-repeat;
	background-size: 250% 100%;
	background-position: 160% 0;
	opacity: 0;
	pointer-events: none;
}
.mg-mov .mg-aterriza.mg-aterrizado a.elementor-button::before { animation: mg-destello .9s 1.1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mg-destello {
	0%   { opacity: 1; background-position: 160% 0; }
	100% { opacity: 1; background-position: -60% 0; }
}

/* 10. Cabecera del simulador más luminosa (Alan/Alex, 2026-10-05): un solo velo radial suave detrás del título en vez
   de dos oscuros. Estaba en header-hover.css; vive aquí desde que la portada volvió a su versión anterior (el scroll
   del recorrido se notaba menos fluido) y esta hoja no se carga en la portada. */
html body.page-id-2598 .elementor.elementor-2598 .elementor-element.elementor-element-e1d0917{background-color:#29251e;background-image:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(20,17,14,.34),rgba(20,17,14,.06) 75%),url('../../prototips/portada-cinematica/mortgage-hero-20260924.jpg');background-size:cover;background-position:center 58%;background-repeat:no-repeat;}
html body.page-id-2598 .elementor-element-e3d0917 .elementor-heading-title{color:#fff8e9;text-shadow:0 2px 18px rgba(20,17,14,.55),0 1px 3px rgba(20,17,14,.45);}
html body.page-id-2598 .elementor.elementor-2598 .elementor-element.elementor-element-e1d0917::before{opacity:0 !important;}

@media (prefers-reduced-motion: reduce) {
	html:has(body.mg-shared) { scroll-behavior: auto; }
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
	.mg-mov .mg-revela { opacity: 1; transform: none; transition: none; }
	.mg-mov .mg-aterriza a.elementor-button,
	.mg-mov .mg-aterriza .elementor-button-wrapper > p { opacity: 1; animation: none; }
	.mg-aterriza a.elementor-button::after,
	.mg-aterriza a.elementor-button::before { display: none; }
	.es-listing,
	.es-listing:hover,
	.es-listing .slick-slide img { transition: none; transform: none; }
}