/* Real Magazine — Artistas Emergentes.
   Hereda las variables del tema (dorado/negro) y cae a valores propios por si
   el plugin se usara en otro sitio. */

.rma {
	--rma-oro: var(--dorado-real, #C19532);
	--rma-oro-claro: var(--dorado-claro, #D8B45B);
	--rma-tinta: var(--tinta, #F5F1E8);
	--rma-tenue: var(--tinta-tenue, rgba(245, 241, 232, .38));
	--rma-linea: var(--linea, rgba(193, 149, 50, .28));
	--rma-panel: var(--panel, #161514);
	--rma-radio: var(--radio, 6px);
}

/* Entradilla con el mismo tratamiento que `.entrada-lede` del tema: serif en
   cursiva y tinta suave. Sin filete lateral, que en este sitio está reservado
   a las citas (`blockquote`) y aquí haría leer el párrafo como si lo fuera. */
.rma-intro {
	color: var(--tinta-suave, rgba(245, 241, 232, .64));
	font-family: var(--serif, Georgia, serif);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-style: italic;
	line-height: 1.55;
	margin: 0 0 2.5rem;
}

/* ---------------------------------------------------------------- Listado */

.rma-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	margin: 0 0 3rem;
}

.rma-card {
	background: var(--rma-panel);
	border: 1px solid var(--rma-linea);
	border-radius: var(--rma-radio);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease;
}

.rma-card:hover {
	border-color: var(--rma-oro);
	transform: translateY(-3px);
}

.rma-card-foto {
	aspect-ratio: 4 / 5;
	display: block;
	overflow: hidden;
	position: relative;
}

.rma-card-foto img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Sin foto: inicial en dorado, como las notas sin imagen destacada. */
.rma-sin-foto {
	align-items: center;
	background: linear-gradient(160deg, rgba(193, 149, 50, .18), rgba(0, 0, 0, .6));
	color: var(--rma-oro);
	display: flex;
	font-family: var(--serif, Georgia, serif);
	font-size: 3.5rem;
	height: 100%;
	justify-content: center;
	width: 100%;
}

.rma-card-cuerpo {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1rem 1.1rem 1.2rem;
}

.rma-card-cuerpo h3 {
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0;
}

.rma-card-cuerpo h3 a {
	color: var(--rma-tinta);
	text-decoration: none;
}

.rma-card-cuerpo h3 a:hover {
	color: var(--rma-oro-claro);
}

.rma-genero {
	color: var(--rma-oro);
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.rma-ciudad {
	color: var(--rma-tenue);
	font-size: .85rem;
	margin: 0;
}

/* ----------------------------------------------------------- Plataformas */

.rma-links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
}

.rma-links a {
	border: 1px solid var(--rma-linea, var(--linea, rgba(193, 149, 50, .28)));
	border-radius: 999px;
	color: var(--rma-oro-claro);
	display: inline-block;
	font-size: .8rem;
	padding: .3rem .8rem;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.rma-links a:hover {
	background: var(--rma-oro);
	color: #1a1a1a;
}

.rma-links--mini a {
	font-size: .72rem;
	padding: .2rem .6rem;
}

/* --------------------------------------------------------------- Llamada */

.rma-llamada {
	align-items: center;
	background: linear-gradient(120deg, rgba(193, 149, 50, .14), rgba(0, 0, 0, 0));
	border: 1px solid var(--rma-linea, rgba(193, 149, 50, .28));
	border-radius: var(--rma-radio, 6px);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin: 2.5rem 0;
	padding: 1.25rem 1.5rem;
}

.rma-llamada strong {
	display: block;
	font-size: 1.05rem;
}

.rma-llamada span {
	color: var(--tinta-suave, rgba(245, 241, 232, .64));
	font-size: .92rem;
}

.rma-btn {
	background: var(--dorado-real, #C19532);
	border-radius: 3px;
	color: #1a1a1a;
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	padding: .7rem 1.3rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.rma-btn:hover {
	background: var(--dorado-claro, #D8B45B);
	color: #1a1a1a;
}

.rma-llamada--musica {
	margin: 0 0 2rem;
}

/* ----------------------------------------------------------------- Ficha */

/* Un artista no firma su propia ficha ni se mide en minutos de lectura:
   es un perfil, no una nota. */
.single-rm_artista .entrada-meta {
	display: none;
}

/* Cuando la ficha trae portada propia, la cabecera del tema sobra. */
.rma-con-portada .entrada-portada {
	display: none;
}

/* Portada: la imagen ancha que abre la ficha. Recorte fijo para que todas las
   fichas abran igual, suba el artista lo que suba. */
.rma-portada {
	border: 1px solid var(--linea, rgba(193, 149, 50, .28));
	border-radius: var(--radio, 6px);
	margin: 0 0 2rem;
	overflow: hidden;
}

.rma-portada img {
	aspect-ratio: 21 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Género y ciudad, en una línea sobria debajo de la portada. */
.rma-ficha-meta {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
	margin: 0 0 1.75rem;
}

.rma-ficha-meta .rma-ciudad::before {
	color: var(--tinta-tenue, rgba(245, 241, 232, .38));
	content: "·";
	margin-right: .9rem;
}

/* Dónde escucharlo, arriba: es a lo que viene casi todo el mundo. */
.rma-escuchar {
	margin: 0 0 2.5rem;
}

.rma-escuchar-titulo {
	color: var(--dorado-real, #C19532);
	font-size: .78rem;
	letter-spacing: .16em;
	margin: 0 0 .9rem;
	text-transform: uppercase;
}

.rma-links--grande {
	display: grid;
	gap: .6rem;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	/* Tres por fila: con cinco plataformas, 3+2 se lee mejor que 4+1. */
	max-width: 560px;
}

.rma-links--grande a {
	align-items: center;
	border-radius: var(--radio, 6px);
	display: flex;
	font-size: .92rem;
	gap: .6rem;
	justify-content: center;
	padding: .8rem 1rem;
}

/* Logotipo de cada plataforma, en su color: se reconoce antes de leer. El
   `fill` sigue a `color`, así que basta con cambiar el color por plataforma. */
.rma-logo {
	fill: currentColor;
	flex: 0 0 auto;
	height: 1.15rem;
	width: 1.15rem;
}

.rma-links--grande a[data-plataforma="spotify"] .rma-logo { color: #1DB954; }
.rma-links--grande a[data-plataforma="apple"] .rma-logo { color: #FA2D48; }
.rma-links--grande a[data-plataforma="prime"] .rma-logo { color: #FF9900; }
.rma-links--grande a[data-plataforma="youtube"] .rma-logo { color: #FF0000; }
.rma-links--grande a[data-plataforma="tiktok"] .rma-logo { color: #EE1D52; }

/* Al pasar por encima manda el dorado del sitio, también en el logotipo. */
.rma-links--grande a:hover .rma-logo,
.rma-links--grande a:focus-visible .rma-logo {
	color: #1a1a1a;
}

/* La biografía respira: es el único bloque de lectura larga de la ficha. */
.rma-bio {
	margin: 0 0 1rem;
}

.rma-bio > p:first-child {
	margin-bottom: 1.2rem;
	color: var(--tinta-suave, rgba(245, 241, 232, .64));
	font-family: var(--serif, Georgia, serif);
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-style: italic;
}

.rma-ficha {
	margin-top: 2.5rem;
}

/* Sin filete propio: el tema ya dibuja uno encima de cada h2 y salían dos. */
.rma-bloque {
	margin-top: 2.75rem;
}

.rma-bloque h2 {
	color: var(--dorado-real, #C19532);
	font-size: .78rem;
	letter-spacing: .16em;
	margin: 0 0 1.1rem;
	text-transform: uppercase;
}

.rma-fotos {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.rma-foto {
	border-radius: var(--radio, 6px);
	cursor: zoom-in;
	display: block;
	overflow: hidden;
	position: relative;
}

/* Lupa discreta en la esquina: avisa de que la foto se abre, sin taparla. */
.rma-foto::after {
	align-items: center;
	background: rgba(0, 0, 0, .55);
	border-radius: 50%;
	bottom: .5rem;
	color: var(--tinta, #F5F1E8);
	content: "+";
	display: flex;
	font-size: 1.1rem;
	height: 1.75rem;
	justify-content: center;
	opacity: 0;
	position: absolute;
	right: .5rem;
	transition: opacity .25s ease;
	width: 1.75rem;
}

.rma-foto:hover::after,
.rma-foto:focus-visible::after {
	opacity: 1;
}

.rma-foto img {
	aspect-ratio: 1 / 1;
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
	width: 100%;
}

.rma-foto:hover img,
.rma-foto:focus-visible img {
	transform: scale(1.04);
}

/* Contacto en tarjeta: lo que busca quien ya se convenció. */
.rma-bloque--contacto .rma-contacto {
	background: var(--panel, #161514);
	border: 1px solid var(--linea, rgba(193, 149, 50, .28));
	border-radius: var(--radio, 6px);
	padding: 1.25rem 1.4rem;
}

.rma-contacto {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

.rma-pie-nav {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 3rem;
}

.rma-volver {
	color: var(--dorado-claro, #D8B45B);
	font-size: .9rem;
	text-decoration: none;
}

.rma-volver:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.rma-grid { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.rma-llamada { flex-direction: column; align-items: flex-start; }
	.rma-llamada .rma-btn { width: 100%; text-align: center; }
	.rma-portada img { aspect-ratio: 16 / 9; }
	.rma-links--grande { grid-template-columns: 1fr 1fr; }
	.rma-fotos { grid-template-columns: 1fr 1fr; }
	.rma-pie-nav { flex-direction: column; align-items: stretch; }
	.rma-pie-nav .rma-btn { text-align: center; }
}

/* =========================================================
   Formulario de alta
   ========================================================= */

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

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

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

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

.rma-campo { margin: 0; }

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

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

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

/* Campos oscuros con texto claro: en blanco no se lee sobre este tema. */
.rma-form input[type=text],
.rma-form input[type=email],
.rma-form input[type=tel],
.rma-form input[type=url],
.rma-form 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%;
}

.rma-form textarea { resize: vertical; }

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

.rma-plataformas {
	border: 1px solid var(--linea, rgba(193, 149, 50, .28));
	border-radius: 4px;
	display: grid;
	gap: .9rem 1.25rem;
	grid-template-columns: 1fr 1fr;
	padding: 1.1rem 1.25rem 1.25rem;
}

.rma-plataformas legend {
	color: var(--dorado-real, #C19532);
	font-size: .78rem;
	letter-spacing: .1em;
	padding: 0 .4rem;
	text-transform: uppercase;
}

.rma-plataformas legend em {
	color: var(--tinta-tenue, rgba(245, 241, 232, .38));
	font-style: normal;
	text-transform: none;
}

.rma-contador {
	grid-column: 1 / -1;
	font-size: .85rem;
	margin: 0;
}

.rma-contador--falta { color: var(--tinta-tenue, rgba(245, 241, 232, .38)); }
.rma-contador--ok { color: #9ae6b4; }

.rma-ayuda {
	color: var(--tinta-tenue, rgba(245, 241, 232, .38));
	display: block;
	font-size: .8rem;
	margin-top: .35rem;
}

.rma-permiso label {
	align-items: flex-start;
	color: var(--tinta-suave, rgba(245, 241, 232, .64));
	display: flex;
	font-size: .88rem;
	gap: .6rem;
	letter-spacing: 0;
	text-transform: none;
}

.rma-enviar .rma-btn {
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	width: 100%;
}

.rma-enviar .rma-btn:disabled {
	background: var(--panel-alto, #1D1B18);
	color: var(--tinta-tenue, rgba(245, 241, 232, .38));
	cursor: not-allowed;
}

/* Trampa antirrobots: fuera de la vista, nunca display:none. */
.rma-trampa {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

@media (max-width: 860px) {
	.rma-form,
	.rma-plataformas { grid-template-columns: 1fr; }
}

/* =========================================================
   Visor de la galería
   ========================================================= */

.rma-visor {
	align-items: center;
	background: rgba(8, 7, 6, .94);
	display: none;
	inset: 0;
	justify-content: center;
	padding: 1.5rem;
	position: fixed;
	z-index: 9999;
}

.rma-visor--abierto {
	display: flex;
}

/* Que la página de atrás no se mueva mientras el visor está abierto. */
.rma-visor-activo {
	overflow: hidden;
}

.rma-visor-marco {
	align-items: center;
	max-width: calc(100% - 8rem);
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin: 0;
	max-height: 100%;
}

.rma-visor-marco img {
	border-radius: var(--radio, 6px);
	display: block;
	max-height: calc(100vh - 7rem);
	max-width: min(100%, 1100px);
	object-fit: contain;
}

.rma-visor-pie {
	color: var(--tinta-tenue, rgba(245, 241, 232, .38));
	font-size: .8rem;
	letter-spacing: .14em;
}

.rma-visor button {
	background: none;
	border: 0;
	color: var(--tinta, #F5F1E8);
	cursor: pointer;
	font: inherit;
	line-height: 1;
	padding: 0;
}

.rma-visor button:hover,
.rma-visor button:focus-visible {
	color: var(--dorado-claro, #D8B45B);
}

/* Área de toque cómoda en el móvil, no solo el tamaño del aspa. */
.rma-visor-cerrar {
	align-items: center;
	display: flex;
	font-size: 2.2rem;
	height: 44px;
	justify-content: center;
	position: absolute;
	right: 1rem;
	top: .5rem;
	width: 44px;
}

/* Las flechas van flotando sobre los lados y no en la fila: en el móvil la
   foto ocupa todo el ancho y las dejaba en seis píxeles, imposibles de tocar. */
.rma-visor-nav {
	align-items: center;
	background: rgba(0, 0, 0, .45);
	border-radius: 50%;
	display: flex;
	font-size: 2.4rem;
	height: 48px;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
}

.rma-visor-prev { left: .75rem; }
.rma-visor-sig { right: .75rem; }

@media (max-width: 600px) {
	.rma-visor { padding: .75rem; }
	.rma-visor-nav { font-size: 2rem; height: 44px; width: 44px; }
	.rma-visor-marco { max-width: 100%; }
	.rma-visor-marco img { max-height: calc(100vh - 9rem); }
}