/* Indiferentes — tokens de identidad visual y base tipográfica.
   Paleta derivada del logo: negro/carbón, crema envejecido, turquesa apagado. */

:root {
	--indf-negro: #1c1b19;
	--indf-negro-suave: #262420;
	--indf-crema: #f3e9c9;
	--indf-crema-apagada: #e4d9b4;
	--indf-turquesa: #4f9d92;
	--indf-turquesa-oscuro: #2e6b63;
	--indf-blanco-roto: #f7f4ea;

	/* ------------------------------------------------------------------
	 * Sistema tipográfico global — cuatro papeles, no cuatro fuentes:
	 *
	 * --fuente-display (Anton, condensada): identidad de marca. SOLO para
	 *   H1/H2 grandes y nombres de sección (PODCAST, ARTISTAS, NOTICIAS,
	 *   CRÍTICAS, CRÓNICAS, AGENDA, NOSOTROS, CONTACTO) y rótulos
	 *   decorativos muy cortos (una o dos palabras). Nunca para textos que
	 *   haya que leer con velocidad o que puedan ser largos.
	 *
	 * --fuente-titular (Archivo Black): títulos de CONTENIDO — episodios,
	 *   noticias, críticas, crónicas, artistas, discos... Misma presencia
	 *   editorial en negrita que Anton, pero mucho más ancha: no se rompe
	 *   con nombres largos ni con tildes.
	 *
	 * --fuente-ui (Work Sans, negrita + mayúsculas + tracking): todo
	 *   elemento FUNCIONAL que se necesita leer rápido — formularios,
	 *   botones, checkboxes, navegación secundaria, metadatos, filtros,
	 *   badges/categorías largas, calendario, mapa, agenda, tooltips,
	 *   nombres de artista en tarjetas. Usar junto con .texto-ui (clase de
	 *   apoyo, más abajo) o replicando sus mismas propiedades.
	 *
	 * --fuente-cuerpo (Work Sans regular): texto de párrafo.
	 * ------------------------------------------------------------------ */
	--fuente-display: 'Anton', 'Arial Narrow', sans-serif;
	--fuente-cuerpo: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;
	--fuente-titular: 'Archivo Black', 'Arial Black', sans-serif;
	--fuente-ui: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;

	--ancho-contenido: 1180px;
	--radio: 2px;
}

/* Clase de apoyo para cualquier elemento funcional nuevo (formularios,
   botones, metadatos, filtros...): así una sección futura no vuelve a
   caer sin querer en --fuente-display para texto que hay que leer rápido. */
.texto-ui {
	font-family: var(--fuente-ui);
	font-weight: 700;
	letter-spacing: 0.03em;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--indf-blanco-roto);
	color: var(--indf-negro);
	font-family: var(--fuente-cuerpo);
	line-height: 1.55;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.contenedor {
	max-width: var(--ancho-contenido);
	margin: 0 auto;
	padding: 0 20px;
}

/* Textura de grano ligera, sin imagen: da el punto "impresión desgastada"
   sobre fondos oscuros sin coste de peso. */
.textura-grano {
	position: relative;
	isolation: isolate;
}

.textura-grano::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.btn {
	display: inline-block;
	font-family: var(--fuente-ui);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
	padding: 12px 26px;
	border: 2px solid var(--indf-negro);
	border-radius: var(--radio);
	transition: transform 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translate(-2px, -2px);
}

.btn--primario {
	background: var(--indf-turquesa);
	color: var(--indf-negro);
	box-shadow: 4px 4px 0 var(--indf-negro);
}

.btn--outline {
	background: transparent;
	color: var(--indf-crema);
	border-color: var(--indf-crema);
	box-shadow: 4px 4px 0 var(--indf-turquesa);
}

/* Misma idea que .btn--outline pero para usarse sobre fondos claros
   (la mayoría de los bloques de la Home, fuera del hero). */
.btn--outline-oscuro {
	background: transparent;
	color: var(--indf-negro);
	border-color: var(--indf-negro);
	box-shadow: 4px 4px 0 var(--indf-turquesa);
}

@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Vocabulario editorial compartido: título de sección, enlace "ver más",
 * cabecera de listado, el grid de tarjetas y el efecto de foto recortada.
 * Nació en la Home pero lo reutiliza cualquier archivo/listado del sitio
 * (Podcast, y más adelante Noticias/Críticas/Crónicas/Artistas) — por eso
 * vive aquí, en base.css, y no en un CSS específico de una sola sección.
 * ------------------------------------------------------------------ */

.etiqueta-seccion {
	font-family: var(--fuente-display);
	text-transform: uppercase;
	font-size: clamp(22px, 3vw, 30px);
	letter-spacing: 0.01em;
	margin: 0;
}

.seccion-listado__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 28px;
}

.enlace-mas {
	font-family: var(--fuente-ui);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.03em;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	white-space: nowrap;
}

/* Dos .enlace-mas en la misma cabecera de sección (ronda v1.7: Escenario en
   Home añade un segundo CTA discreto junto al de siempre) — se apilan en
   columna con separación pequeña, sin competir en peso visual entre ellos. */
.seccion-home__cabecera-enlaces {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.btn--pequeno {
	padding: 8px 16px;
	font-size: 12px;
}

/* CTA editorial discreto (sección 12 de la ampliación v1.1: "no convertir
   estos CTAs en banners gigantes, deben integrarse de forma editorial"). */
.cta-editorial {
	margin: 32px 0 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(28, 27, 25, 0.12);
	font-size: 15px;
}

.cta-editorial a {
	font-weight: 700;
	text-decoration: underline;
	color: inherit;
}

.badge-escenario {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 10px;
	font-family: var(--fuente-ui);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--indf-negro);
	background: var(--indf-turquesa);
	border-radius: var(--radio);
}

.tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 28px 24px;
}

.tarjeta {
	position: relative;
}

.tarjeta__enlace-imagen {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--indf-crema-apagada);
	border: 2px solid var(--indf-negro);
}

.tarjeta__imagen {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tarjeta__titulo {
	font-family: var(--fuente-titular);
	text-transform: uppercase;
	font-size: 17px;
	line-height: 1.25;
	margin: 10px 0 6px;
}

.tarjeta__titulo a {
	text-decoration: none;
}

.tarjeta__titulo a:hover,
.tarjeta__titulo a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--indf-turquesa);
}

.tarjeta__categoria {
	font-family: var(--fuente-ui);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--indf-turquesa-oscuro);
	margin: 12px 0 0;
}

.tarjeta__meta {
	font-size: 13px;
	opacity: 0.75;
	margin: 0 0 6px;
}

.tarjeta__meta a {
	text-decoration: underline;
}

.tarjeta__extracto {
	font-size: 14.5px;
	line-height: 1.5;
	margin: 0;
}

/* Ligera irregularidad tipo collage: cada tarjeta de una posición distinta
   se inclina un poco, nunca al azar en cada carga (nada "tiembla"). */
.tarjeta--variante-0 { transform: rotate(-0.6deg); }
.tarjeta--variante-1 { transform: rotate(0.5deg); }
.tarjeta--variante-2 { transform: rotate(-0.3deg); }

@media (max-width: 640px) {
	.tarjeta--variante-0,
	.tarjeta--variante-1,
	.tarjeta--variante-2 {
		transform: none;
	}
}

/* Valoración por fuegos (el marcado y las clases las genera
   Indiferentes_Valoracion::render() en el Core; aquí solo se presenta).
   Se usa en Home, Críticas y en cualquier tarjeta/single que muestre una
   crítica. */
.indf-valoracion {
	display: inline-block;
	font-size: 18px;
	letter-spacing: 2px;
	margin-bottom: 8px;
}

@media (prefers-reduced-motion: no-preference) {
	.indf-valoracion {
		animation: indf-fuego-vivo 2.4s ease-in-out infinite;
		transform-origin: center bottom;
	}
}

@keyframes indf-fuego-vivo {
	0%, 100% { transform: scale(1) rotate(0deg); }
	25%      { transform: scale(1.05) rotate(-2deg); }
	50%      { transform: scale(0.98) rotate(1deg); }
	75%      { transform: scale(1.03) rotate(-1deg); }
}

/* La crónica usa el efecto de foto recortada (.indf-foto-recortada, más
   abajo): el marco cuadrado con borde/fondo de .tarjeta__enlace-imagen no
   encaja con ese recorte irregular, así que se retira aquí para cualquier
   tarjeta de crónica del sitio (Home y archivo de Crónicas). */
.tarjeta--cronica .tarjeta__enlace-imagen {
	display: block;
	border: none;
	background: none;
	aspect-ratio: auto;
}

.tarjeta--cronica .tarjeta__imagen {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: drop-shadow(5px 6px 0 rgba(28, 27, 25, 0.25));
}

/* Listado de eventos en fila (fecha + info + precio/CTA): pensado por
   defecto para fondo claro, ya que lo usan la ficha de artista y el listado
   de Agenda. La Home lo reutiliza sobre fondo oscuro con pequeños ajustes
   en seccion-agenda.css. */
.lista-eventos {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lista-eventos__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 16px 12px;
	background: var(--indf-crema);
	border-left: 3px solid var(--indf-turquesa);
}

.lista-eventos__fecha {
	text-align: center;
	line-height: 1.1;
}

.lista-eventos__dia {
	display: block;
	font-family: var(--fuente-ui);
	font-weight: 700;
	font-size: 24px;
}

.lista-eventos__mes {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	opacity: 0.7;
}

.lista-eventos__tipo {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--indf-turquesa-oscuro);
	margin: 0 0 4px;
}

.lista-eventos__icono {
	display: inline-block;
	margin-right: 4px;
}

.lista-eventos__nombre {
	font-family: var(--fuente-titular);
	text-transform: uppercase;
	font-size: 15px;
	line-height: 1.25;
	margin: 0 0 4px;
}

.lista-eventos__nombre a {
	color: inherit;
	text-decoration: none;
}

.lista-eventos__meta {
	font-size: 13px;
	opacity: 0.8;
	margin: 0;
}

.lista-eventos__extra {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.lista-eventos__precio {
	font-size: 13px;
	font-weight: 600;
}

@media (max-width: 640px) {
	.lista-eventos__item {
		grid-template-columns: 48px 1fr;
	}

	.lista-eventos__extra {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 8px;
	}
}

/* Fallback de artista sin fotografía (indiferentes_imagen_artista() en
   functions.php): nunca una cara inventada, un monograma de marca —
   iniciales grandes sobre un bloque de color con grano, ligeramente girado
   para que se lea como una decisión de diseño y no como una imagen que
   falta. Se usa en tarjetas (Home + archivo de Artistas) y en la cabecera
   de la ficha individual (con el modificador --grande). */
.artista-sin-foto {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--indf-negro);
	overflow: hidden;
	isolation: isolate;
}

.artista-sin-foto::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.08;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.artista-sin-foto__iniciales {
	position: relative;
	font-family: var(--fuente-display);
	color: var(--indf-turquesa);
	line-height: 1;
	letter-spacing: 0.02em;
	transform: rotate(-4deg);
	font-size: clamp(26px, 9vw, 42px);
}

.artista-sin-foto--grande .artista-sin-foto__iniciales {
	font-size: clamp(36px, 8vw, 64px);
}

/* Efecto "foto recortada": máscara de borde irregular en CSS puro, aplicada
   solo en la presentación — el archivo que sube Nía en Medios no se toca. */
.indf-foto-recortada {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='2,5 16,1 33,4 49,0 64,5 81,1 98,4 100,17 96,33 100,49 97,65 100,81 98,98 82,96 65,100 49,97 33,100 17,96 2,99 4,82 0,65 3,49 0,33 4,17' fill='white'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='2,5 16,1 33,4 49,0 64,5 81,1 98,4 100,17 96,33 100,49 97,65 100,81 98,98 82,96 65,100 49,97 33,100 17,96 2,99 4,82 0,65 3,49 0,33 4,17' fill='white'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Dos variantes más del mismo recorte, con otra silueta cada una, para que
   una galería no repita el mismo "papel cortado" en todas las fotos
   (petición explícita de Crónicas: "recortes diferentes"). */
.indf-foto-recortada--2 {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='3,2 20,0 35,3 51,1 66,4 83,0 99,3 97,19 100,35 98,50 100,67 97,82 100,98 84,99 67,97 51,100 35,98 19,100 2,98 0,83 3,66 0,50 2,35 0,19' fill='white'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='3,2 20,0 35,3 51,1 66,4 83,0 99,3 97,19 100,35 98,50 100,67 97,82 100,98 84,99 67,97 51,100 35,98 19,100 2,98 0,83 3,66 0,50 2,35 0,19' fill='white'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.indf-foto-recortada--3 {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='1,6 15,2 34,5 48,1 63,6 79,2 100,5 98,20 100,36 96,49 99,65 100,81 96,99 81,95 66,100 48,96 34,100 18,95 3,100 1,81 4,65 0,48 4,34 1,20' fill='white'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='1,6 15,2 34,5 48,1 63,6 79,2 100,5 98,20 100,36 96,49 99,65 100,81 96,99 81,95 66,100 48,96 34,100 18,95 3,100 1,81 4,65 0,48 4,34 1,20' fill='white'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}