/**
 * Pie de página ([rm_pie], ver rm-pie.php).
 *
 * Fondo Acero: cierra la página con el mismo azul de la portada, y separa sin necesidad de
 * líneas lo que es navegación del sitio de lo que es contenido.
 */

/* La plantilla de Elementor que envuelve al shortcode no suma márgenes propios. */
footer .elementor-widget-shortcode,
footer .elementor-widget-shortcode > .elementor-widget-container,
footer .elementor-section .elementor-column > .elementor-widget-wrap,
footer .e-con,
footer .e-con-inner {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

.rm-pie {
	margin-top: 72px;
	background: var( --rm-acero );
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 15px;
	line-height: 1.5;
}

.rm-pie__ancho {
	display: grid;
	grid-template-columns: minmax( 0, 1.5fr ) repeat( 4, minmax( 0, 1fr ) );
	gap: 40px 32px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 20px 48px;
	box-sizing: border-box;
}

/* El logo es un PNG rojo sobre fondo BLANCO (no transparente). Para dejarlo blanco sobre
   el azul sin mantener un segundo archivo: se invierte (el fondo pasa a negro y el rojo a
   un celeste claro), se lleva a grises y se aclara, y `screen` hace desaparecer el negro
   contra el azul. Un simple brightness(0) invert(1) dejaba un rectángulo blanco. */
.rm-pie .rm-pie__logo img {
	display: block;
	width: auto;
	max-width: none;
	height: 36px;
	filter: invert( 1 ) grayscale( 1 ) brightness( 1.45 );
	mix-blend-mode: screen;
}

.rm-pie__bajada {
	max-width: 32ch;
	margin: 16px 0 20px;
	color: rgba( 255, 255, 255, 0.78 );
}

.rm-pie__contacto,
.rm-pie__redes,
.rm-pie__columna ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rm-pie__contacto li {
	margin: 0 0 4px;
}

.rm-pie a {
	color: #fff !important;
	text-decoration: none;
}

.rm-pie a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rm-pie__redes {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.rm-pie__redes a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 50%;
	font-size: 17px;
}

.rm-pie__redes a:hover {
	border-color: #fff;
	text-decoration: none;
}

.rm-pie__titulo {
	margin: 0 0 14px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.rm-pie__columna li {
	margin: 0 0 8px;
}

.rm-pie__columna a {
	color: rgba( 255, 255, 255, 0.78 ) !important;
}

.rm-pie__columna a:hover {
	color: #fff !important;
}

.rm-pie__base {
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
}

.rm-pie__ancho--base {
	display: block;
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 14px;
}

.rm-pie__ancho--base p {
	margin: 0;
	color: rgba( 255, 255, 255, 0.6 );
}

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

	.rm-pie__marca {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 520px ) {
	.rm-pie__ancho {
		grid-template-columns: minmax( 0, 1fr );
		gap: 28px;
		padding-top: 40px;
	}
}

/* -------------------------------------------------------------------------
 * Textos legales
 * ---------------------------------------------------------------------- */

.rm-dato-falta {
	padding: 0 3px;
	background: #fff3b0;
	color: #5c4700;
}

.rm-aviso-borrador {
	padding: 12px 16px;
	border-left: 4px solid var( --rm-senal );
	background: #fff8db;
	color: #4a3b00;
	font-size: 15px;
}

/* -------------------------------------------------------------------------
 * Página de contacto ([rm_contacto], rm-pie.php)
 * ---------------------------------------------------------------------- */

/* Con `.rm-ancho` delante: el bloque lleva también esa clase y su `margin: 0 auto` de
   portada.css, que carga después, anulaba este margen (se medía 0) y el título quedaba
   pegado a la cabecera.
   Arriba van 64 px (los mismos que abajo, antes del pie): con 40 px el título se veía
   apretado contra la cabecera de 73 px (comentario del dueño: «un poco más de espacio
   arriba»). En el resto de páginas simples el aire ronda los 40–50 px medidos hasta el
   primer contenido, pero aquí lo primero es un título sin caja ni fondo, así que necesita
   algo más para que se lea como respiro y no como pegado. En móvil baja a 48 px. */
.rm-ancho.rm-contacto-sitio,
.rm-contacto-sitio {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
	gap: 32px;
	margin: 64px auto;
}

.rm-contacto-sitio h1 {
	margin: 0 0 6px;
	color: var( --rm-tinta );
	font-size: 32px;
	font-weight: 800;
}

.rm-contacto-sitio__bajada {
	margin: 0 0 20px;
	color: var( --rm-gris );
}

.rm-contacto-sitio__form {
	display: grid;
	gap: 14px;
}

.rm-contacto-sitio__fila {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 14px;
}

/* Flex y no grid: en una grilla el «(opcional)» de Teléfono pasaba a una fila propia y
   bajaba su campo 12 px respecto de «Motivo», en la misma fila. Así el nombre y la nota
   comparten la línea y el campo va siempre en la siguiente, a todo el ancho. */
.rm-contacto-sitio__form label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	margin: 0;
	color: var( --rm-tinta );
	font-size: 14px;
	font-weight: 650;
}

.rm-contacto-sitio__form input,
.rm-contacto-sitio__form select,
.rm-contacto-sitio__form textarea {
	flex: 0 0 100%;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var( --rm-linea );
	border-radius: 4px;
	background: var( --rm-hormigon );
	color: var( --rm-tinta );
	font: inherit;
	font-weight: 400;
}

/*
 * Una línea de texto: alto fijo e igual en los campos y en «Motivo».
 *
 * El <select> medía 58 px contra los 47 de los inputs vecinos (una regla del tema le fija
 * el alto a los select) y traía la flecha nativa del sistema, con otro aspecto que el
 * resto (comentario del dueño: «botón de tamaño incorrecto»). Se le quita la apariencia
 * nativa y la flecha se dibuja con un SVG de fondo, en el gris de los textos secundarios.
 */
.rm-contacto-sitio__form input,
.rm-contacto-sitio__form select {
	height: 46px;
	min-height: 0;
	line-height: 1.5;
}

.rm-contacto-sitio__form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 38px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-position: right 14px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	cursor: pointer;
}

.rm-contacto-sitio__form input:focus,
.rm-contacto-sitio__form select:focus,
.rm-contacto-sitio__form textarea:focus {
	border-color: var( --rm-acero );
	outline: 2px solid var( --rm-acero-claro );
	outline-offset: 0;
}

/* El style.css del tema le fija a todo <textarea> su propio borde con !important, y
   «Mensaje» salía con otro gris que los campos de arriba: se le devuelve el mismo. */
.rm-contacto-sitio__form textarea {
	border: 1px solid var( --rm-linea ) !important;
}

.rm-contacto-sitio__form textarea:focus {
	border-color: var( --rm-acero ) !important;
}

.rm-contacto-sitio__form .rm-btn {
	justify-self: start;
}

.rm-contacto-sitio__aviso {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-left: 4px solid var( --rm-acero );
	border-radius: 4px;
	background: var( --rm-acero-claro );
	color: var( --rm-tinta );
}

.rm-contacto-sitio__aviso--error {
	border-left-color: var( --rm-oxido );
	background: #fff;
	box-shadow: inset 0 0 0 1px var( --rm-linea );
}

.rm-contacto-sitio__datos {
	align-self: start;
	padding: 20px;
	border: 1px solid var( --rm-linea );
	border-top: 4px solid var( --rm-acero );
	border-radius: 4px;
	background: var( --rm-hormigon );
}

.rm-contacto-sitio__datos h2 {
	margin: 0 0 12px;
	color: var( --rm-tinta );
	font-size: 18px;
	font-weight: 800;
}

.rm-contacto-sitio__datos ul {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.rm-contacto-sitio__datos li span {
	display: block;
	color: var( --rm-gris );
	font-size: 12px;
}

.rm-contacto-sitio__datos a {
	color: var( --rm-acero );
	font-weight: 700;
	word-break: break-word;
}

.rm-contacto-sitio__datos p {
	margin: 0;
	color: var( --rm-gris );
	font-size: 13px;
}

@media ( max-width: 760px ) {
	.rm-ancho.rm-contacto-sitio,
	.rm-contacto-sitio,
	.rm-contacto-sitio__fila {
		grid-template-columns: minmax( 0, 1fr );
	}

	/* En pantallas angostas la cabecera es más baja (65 px) y el ancho útil menor: 48 px
	   arriba mantienen el respiro sin empujar el formulario fuera de la primera vista. */
	.rm-ancho.rm-contacto-sitio,
	.rm-contacto-sitio {
		margin-top: 48px;
	}

	.rm-contacto-sitio__form .rm-btn {
		justify-self: stretch;
	}
}