/* Real Magazine — formulario de contacto y directorio. */

.rm-contacto {
	margin: 0 0 2rem;
}

.rm-contacto-aviso {
	border-left: 3px solid;
	border-radius: 3px;
	font-size: .95rem;
	margin: 0 0 1.5rem;
	padding: .85rem 1rem;
}

.rm-contacto-aviso--ok {
	background: rgba(40, 140, 80, .14);
	border-color: #38a169;
	color: #9ae6b4;
}

.rm-contacto-aviso--mal {
	background: rgba(179, 45, 46, .14);
	border-color: #b32d2e;
	color: #feb2b2;
}

/* Los datos en fila, no apilados con hueco. */
.rm-contacto-datos {
	display: grid;
	gap: 1rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.rm-contacto-datos li {
	font-size: .95rem;
	line-height: 1.5;
}

.rm-contacto-datos span {
	color: var(--dorado-real, #C19532);
	display: block;
	font-size: .72rem;
	letter-spacing: .14em;
	margin-bottom: .3rem;
	text-transform: uppercase;
}

.rm-contacto-datos a {
	color: var(--dorado-claro, #D8B45B);
}

/* Tarjeta oscura con el filo dorado arriba. */
.rm-contacto-form {
	background: var(--panel, #161514);
	border: 1px solid var(--linea, rgba(193, 149, 50, .28));
	border-radius: 6px;
	border-top: 3px solid var(--dorado-real, #C19532);
	display: grid;
	gap: 1rem 1.25rem;
	grid-template-columns: 1fr 1fr;
	padding: 1.75rem;
}

.rm-contacto-campo {
	margin: 0;
}

.rm-contacto-campo--ancho,
.rm-contacto-enviar {
	grid-column: 1 / -1;
	margin: 0;
}

.rm-contacto-campo label {
	color: var(--tinta-suave, rgba(245, 241, 232, .64));
	display: block;
	font-size: .78rem;
	letter-spacing: .08em;
	margin-bottom: .4rem;
	text-transform: uppercase;
}

.rm-req {
	color: var(--dorado-real, #C19532);
}

/* La clave: campos oscuros con texto crema. En blanco no se leía. */
.rm-contacto input,
.rm-contacto textarea {
	background: var(--panel-alto, #1D1B18);
	border: 1px solid var(--linea, rgba(193, 149, 50, .28));
	border-radius: 4px;
	color: var(--tinta, #F5F1E8);
	font: inherit;
	padding: .7rem .85rem;
	width: 100%;
}

.rm-contacto textarea {
	resize: vertical;
}

.rm-contacto input:focus,
.rm-contacto textarea:focus {
	border-color: var(--dorado-real, #C19532);
	box-shadow: 0 0 0 3px rgba(193, 149, 50, .18);
	outline: none;
}

.rm-contacto-enviar .btn-oro {
	border: 0;
	cursor: pointer;
	font: inherit;
	width: 100%;
}

/* Trampa antirrobots: fuera de la vista, nunca oculta con display:none
   porque algunos bots detectan ese truco. */
.rm-contacto-trampa {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.rm-contacto-directorio {
	margin-top: 2.5rem;
}

.rm-contacto-directorio h2 {
	color: var(--dorado-real, #C19532);
	font-size: .8rem;
	letter-spacing: .14em;
	margin: 0 0 1rem;
	text-transform: uppercase;
}

.rm-contacto-directorio ul {
	display: grid;
	gap: 1rem 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.rm-contacto-directorio li {
	border-top: 1px solid var(--linea, rgba(193, 149, 50, .28));
	padding-top: .75rem;
}

.rm-contacto-directorio strong,
.rm-contacto-directorio span,
.rm-contacto-directorio a {
	display: block;
}

.rm-contacto-directorio span {
	color: var(--tinta-tenue, rgba(245, 241, 232, .38));
	font-size: .85rem;
}

.rm-contacto-directorio a {
	color: var(--dorado-claro, #D8B45B);
	font-size: .85rem;
	margin-top: .2rem;
}

@media (max-width: 860px) {
	.rm-contacto-form {
		gap: 1rem;
		grid-template-columns: 1fr;
		padding: 1.25rem;
	}
}