/* Ajustes propios de valorarmicasaahora.com sobre las hojas copiadas del tema (que no se tocan).
   Nombres de zona largos (src/lib/ajustes.js): en pantallas estrechas se pueden partir en vez de salirse
   recortados por la derecha («Villanueva de la Cañada» en el titular a 375 px). */
@media (max-width: 29.99em) {
	.sin-corte--largo { white-space: normal; }
}

/* Logo del pie por debajo de 360 px: el mismo tamaño que el tema ya da al logo de la cabecera a esos anchos.
   El nombre «Valorar mi casa ahora» es más largo que el de la web actual y a 320 px se salía 37 px. */
@media (max-width: 22.4375em) {
	.logo--pie { gap: 10px; }
	.logo--pie .logo__nombre { font-size: 13px; letter-spacing: 0.08em; }
}

/* Por debajo de 360 px ningún nombre de zona de varias palabras cabe entero en el titular: se dejan partir todos. */
@media (max-width: 22.4375em) {
	.sin-corte { white-space: normal; }
}

/* Cabecera: «Valorar mi casa ahora» es más ancho que el nombre de la web actual y por debajo de ~410 px chocaba con
   el botón del menú. Hasta 409 px toma el tamaño que el tema ya da al logo por debajo de 360 px; por debajo de 360,
   un punto menos para que no toque el botón a 320. */
@media (max-width: 25.5625em) {
	.logo--cabecera .logo__nombre { font-size: 13px; letter-spacing: 0.08em; }
}
@media (max-width: 22.4375em) {
	.logo--cabecera .logo__nombre { font-size: 12px; letter-spacing: 0.06em; }
}

/* Cabecera siempre visible arriba, en móvil y en escritorio (Fernando, 13-11). Las anclas (#valorar…) paran
   por debajo de ella. */
.cabecera { position: sticky; top: 0; }
html { scroll-padding-top: 88px; }
@media (min-width: 60em) { html { scroll-padding-top: 112px; } }

/* Pie (Fernando, 13-11): primera fila con el logo y el nombre en grande y, a su lado, el botón de valorar;
   las cuatro columnas van en una fila propia debajo. */
.pie__marca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24);
	padding-bottom: var(--space-32);
	border-bottom: 1px solid var(--c-borde-suave);
}
.pie__boton { min-height: 48px; border-color: var(--c-lino); color: var(--c-lino); }
@media (min-width: 48em) {
	.pie__marca { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (min-width: 60em) {
	.logo--pie { gap: 20px; }
	.logo--pie .logo__sello { width: 88px; height: 88px; }
	.logo--pie .logo__nombre { font-size: 24px; }
}
@media (min-width: 75em) {
	.pie__superior { display: block; }
	.pie__columnas { justify-content: space-between; }
}