/* Estéreo Parque — ajustes sobre Forty */

/* Tipografía: Outfit */
@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-extrabold.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

body, input, select, textarea, button {
	font-family: "Outfit", Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	letter-spacing: -0.01em;
}

:root {
	--verde: #B3CA5E;
	--negro: #08090A;
}

body, #wrapper, #main, #main > section, #header {
	background-color: var(--negro);
}

/* Cabecera a pantalla completa con carrusel */
#banner {
	background-image: none;
	background-color: var(--negro);
	height: 100vh !important;
	height: 100svh !important;
	max-height: none !important;
	min-height: 30em !important;
	padding: 0 !important;
	justify-content: center;
	overflow: hidden;
}

	#banner:after {
		background: linear-gradient(180deg, rgba(8, 9, 10, 0.55) 0%, rgba(8, 9, 10, 0.35) 50%, rgba(8, 9, 10, 0.8) 100%);
		opacity: 1;
	}

	#banner .carrusel {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

		#banner .carrusel img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: 0;
			transform: scale(1.08);
			transition: opacity 1.8s ease, transform 7s ease-out;
		}

		#banner .carrusel img.activa {
			opacity: 1;
			transform: scale(1);
		}

	#banner > .inner {
		text-align: center;
		width: 100%;
	}

	#banner .logo-grande {
		display: block;
		width: min(72vw, 53rem, 84vh);
		height: auto;
		margin: 0 auto;
		filter: drop-shadow(0 0.4em 1.6em rgba(0, 0, 0, 0.45));
	}

	#banner .edicion {
		color: var(--verde);
		font-weight: 600;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		margin: 0.5em 0 0 0;
	}

	/* Logos abajo de la portada: organizadores a la izquierda, productora a la derecha */
	#banner .instituciones {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 2em;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
		gap: 1.5em 3em;
		padding: 0 3em;
	}

		#banner .instituciones .grupo {
			display: flex;
			flex-direction: column;
			gap: 0.6em;
		}

		#banner .instituciones .rotulo {
			color: #fff;
			font-size: 0.6em;
			font-weight: 600;
			letter-spacing: 0.3em;
			text-transform: uppercase;
			opacity: 0.7;
		}

		#banner .instituciones .logos {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 1em 2.5em;
		}

		#banner .instituciones img {
			display: block;
			width: auto;
			filter: brightness(0) invert(1);
			opacity: 0.9;
		}

		#banner .instituciones .ayto { height: 2.7em; }
		#banner .instituciones .dipu { height: 2.6em; }
		#banner .instituciones .mala { height: 2.6em; }
		#banner .instituciones .uca  { height: 4em; }

	@media screen and (max-width: 736px) {
		#banner .instituciones { padding: 0 1.25em; bottom: 1.5em; gap: 1.25em 2em; }
		#banner .instituciones .logos { gap: 1.5em; }
		#banner .instituciones .ayto { height: 2em; }
		#banner .instituciones .dipu { height: 2em; }
		#banner .instituciones .mala { height: 2em; }
		#banner .instituciones .uca  { height: 3em; }
	}

@media (prefers-reduced-motion: reduce) {
	#banner .carrusel img { transition: opacity 0.6s ease; transform: none; }
	#banner .carrusel img.activa { transform: none; }
}

/* Programación: recuadros de color como el cartel */
.tiles article {
	background-color: #1a1c1e;
	align-items: flex-end;
	padding-bottom: 3em;
}

	.tiles article:after {
		background-color: rgba(8, 9, 10, 0.2);
	}

	.tiles article:before {
		opacity: 0.92;
	}

	.tiles article.verde:before    { background-color: #A9CF8C !important; }
	.tiles article.amarillo:before { background-color: #E6CF6A !important; }
	.tiles article.azul:before     { background-color: #B5CDD4 !important; }
	.tiles article.rosa:before     { background-color: #E8B6B2 !important; }

	/* Al pasar el ratón se ve la foto del grupo (si la tiene) */
	.tiles article:hover:before {
		opacity: 0.25;
	}

	.tiles article header,
	.tiles article h3,
	.tiles article .fecha {
		color: var(--negro);
	}

	.tiles article h3 {
		font-size: 2.25em;
		line-height: 1.1;
		margin: 0 0 0.6em 0;
	}

		.tiles article h3 small {
			font-size: 0.45em;
			font-weight: 600;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			vertical-align: middle;
			margin-left: 0.4em;
		}

	.tiles article header.major > :first-child:after {
		display: none;
	}

	.tiles article .fecha {
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		margin: 0 0 0.5em 0;
	}

	.tiles article .button.entradas {
		background-color: var(--negro);
		box-shadow: none;
		color: #fff !important;
	}

		.tiles article .button.entradas:hover {
			background-color: #2a2d31;
		}

	.tiles article .pase {
		display: inline-block;
		border: 2px solid var(--negro);
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.25em;
		line-height: 3.2em;
		padding: 0 1.75em;
		text-transform: uppercase;
	}

	/* Cinco conciertos: el último ocupa todo el ancho */
	.tiles article:nth-child(5):last-child {
		width: 100%;
	}

	.tiles article:hover:before,
	.tiles article:hover header * {
		transition: opacity 0.4s ease;
	}

/* Todo el recuadro lleva a la presentación del grupo; el botón de entradas queda por encima */
.tiles article h3 a.ver {
	border: 0;
	color: inherit;
}

	.tiles article h3 a.ver:after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
	}

.tiles article header { position: static; }
.tiles article header > * { position: relative; z-index: 3; }
.tiles article h3 { position: static; }
.tiles article .button.entradas { position: relative; z-index: 4; }

/* Presentación de cada grupo: foto a un lado, texto al otro */
.spotlights > section {
	background-color: #111315;
	align-items: stretch;
}

	.spotlights > section:nth-child(2n) {
		background-color: #0c0d0f;
	}

	.spotlights > section > .image {
		width: 40%;
		min-height: 24em;
		overflow: hidden;
	}

		.spotlights > section > .image img {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

	.spotlights > section.verde > .image    { background-color: #A9CF8C; }
	.spotlights > section.amarillo > .image { background-color: #E6CF6A; }
	.spotlights > section.azul > .image     { background-color: #B5CDD4; }
	.spotlights > section.rosa > .image     { background-color: #E8B6B2; }

	.spotlights > section > .content {
		width: 60%;
		padding: 4em 4em 2em 4em;
	}

	.spotlights .fecha {
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		margin: 0 0 0.5em 0;
	}

	.spotlights .verde .fecha    { color: #A9CF8C; }
	.spotlights .amarillo .fecha { color: #E6CF6A; }
	.spotlights .azul .fecha     { color: #B5CDD4; }
	.spotlights .rosa .fecha     { color: #E8B6B2; }

	.spotlights h3 {
		font-size: 2.25em;
		line-height: 1.1;
	}

		.spotlights h3 small {
			font-size: 0.45em;
			font-weight: 600;
			letter-spacing: 0.15em;
			text-transform: uppercase;
			vertical-align: middle;
			margin-left: 0.4em;
			opacity: 0.7;
		}

	.spotlights .button.entradas {
		background-color: var(--verde);
		box-shadow: none;
		color: var(--negro) !important;
	}

	.spotlights .pase {
		display: inline-block;
		border: 2px solid #fff;
		font-size: 0.8em;
		font-weight: 700;
		letter-spacing: 0.25em;
		line-height: 3.2em;
		padding: 0 1.75em;
		text-transform: uppercase;
	}

	@media screen and (max-width: 980px) {
		.spotlights > section,
		.spotlights > section:nth-child(2n) { flex-direction: column; }
		.spotlights > section > .image,
		.spotlights > section > .content { width: 100%; }
		.spotlights > section > .image { min-height: 16em; }
		.spotlights > section > .content { padding: 3em 1.5em 1em 1.5em; }
	}

/* Contacto y pie */
#contacto {
	background-color: #111315;
}

	#contacto .contact-method .icon:before {
		color: var(--verde);
	}

#footer {
	background-color: var(--negro);
}

.pendiente {
	opacity: 0.5;
	font-style: italic;
}

/* Páginas legales */
body.legal #main > section > .inner {
	max-width: 50em;
}

	body.legal .sub {
		color: var(--verde);
		font-weight: 600;
	}

	body.legal h2 {
		font-size: 1.35em;
		margin-top: 2em;
	}

	body.legal table.datos th {
		width: 9em;
		color: var(--verde);
		font-weight: 600;
	}

#footer .copyright.legales {
	margin-top: 0.5em;
}

	#footer .copyright.legales a {
		border-bottom: 0;
	}

/* Presentaciones: el fondo del texto lleva el color de su recuadro */
.spotlights > section.verde    { background-color: #A9CF8C !important; }
.spotlights > section.amarillo { background-color: #E6CF6A !important; }
.spotlights > section.azul     { background-color: #B5CDD4 !important; }
.spotlights > section.rosa     { background-color: #E8B6B2 !important; }

	.spotlights > section > .content,
	.spotlights > section > .content p,
	.spotlights > section > .content h3,
	.spotlights > section > .content h3 small,
	.spotlights > section > .content .fecha {
		color: var(--negro) !important;
	}

	.spotlights > section > .content header.major > :first-child:after {
		background-color: var(--negro);
	}

	.spotlights > section > .content .button.entradas {
		background-color: var(--negro);
		color: #fff !important;
	}

		.spotlights > section > .content .button.entradas:hover {
			background-color: #2a2d31;
		}

	.spotlights > section > .content .pase {
		border-color: var(--negro);
	}

/* Ellis D: lila, para no repetir el verde de Mod Lang */
.tiles article.lila:before                  { background-color: #C9B8E4 !important; }
.spotlights > section.lila                  { background-color: #C9B8E4 !important; }
.spotlights > section.lila > .image         { background-color: #C9B8E4; }

/* Créditos: Organiza a la izquierda; Patrocinador y Colaboran juntos a la derecha */
#banner .instituciones .derecha {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1.25em 3em;
}

/* Lugar de los conciertos, bajo «Edición especial otoño» */
#banner .lugar {
	color: #fff;
	font-size: 1.05em;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin: 0.4em 0 0 0;
	text-shadow: 0 0.1em 0.8em rgba(0, 0, 0, 0.5);
}

	#banner .lugar .alias,
	#banner .lugar .sep {
		opacity: 0.75;
	}

@media screen and (max-width: 736px) {
	#banner .lugar { font-size: 0.9em; padding: 0 1em; }
	#banner .lugar .sep { display: none; }
	#banner .lugar .alias, #banner .lugar .ciudad { display: block; }
}

/* Rótulos Organiza / Patrocinador / Colaboran a la misma altura:
   los grupos se alinean arriba y la fila de logos tiene altura fija */
#banner .instituciones,
#banner .instituciones .derecha {
	align-items: flex-start;
}

	#banner .instituciones .logos {
		height: 4em;
		align-items: center;
	}

@media screen and (max-width: 736px) {
	#banner .instituciones .logos {
		height: auto;
		min-height: 3em;
	}
}

/* Patrocinador y Colaboran a la izquierda; Organiza a la derecha */
#banner .instituciones > .grupo {
	order: 2;
}

#banner .instituciones > .derecha {
	order: 1;
}

/* Móvil: los créditos dejan de ir encima de la foto "flotando" y se colocan
   debajo del logo, para que nunca se monten sobre el texto del lugar */
@media screen and (max-width: 736px) {
	#banner {
		flex-direction: column;
		height: auto !important;
		min-height: 100svh !important;
		padding: 5em 0 2em 0 !important;
	}

		#banner > .inner {
			margin: auto 0;
		}

		#banner .instituciones {
			position: relative;
			bottom: auto;
			margin-top: 2.5em;
			justify-content: flex-start;
		}
}

/* Plano de situación en Contacto */
#contacto .plano {
	margin-top: 3em;
}

	#contacto .plano img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 6px;
	}

	#contacto .plano .como-llegar-img {
		border: 0;
		display: block;
	}

	#contacto .plano .actions {
		margin-top: 1.5em;
	}

	#contacto .button.como-llegar {
		background-color: var(--verde);
		box-shadow: none;
		color: var(--negro) !important;
	}

/* Contacto en dos columnas: datos a la izquierda, plano a la derecha */
@media screen and (min-width: 737px) {
	#contacto > .inner {
		display: grid;
		grid-template-columns: minmax(16em, 1fr) 2fr;
		column-gap: 4em;
		align-items: start;
	}

		#contacto > .inner > header {
			grid-column: 1 / -1;
		}

		#contacto .plano {
			margin-top: 0;
		}
}

/* Ordenador: el plano ocupa exactamente la altura de Dónde / Correo / Instagram,
   de modo que «Cómo llegar» termina a la misma altura que Instagram */
@media screen and (min-width: 737px) {
	#contacto > .inner {
		align-items: stretch;
	}

		#contacto > .inner > .split {
			margin-bottom: 0;
		}

		#contacto .plano {
			display: flex;
			flex-direction: column;
		}

			#contacto .plano .como-llegar-img {
				position: relative;
				flex: 1 1 auto;
				min-height: 12em;
			}

				#contacto .plano .como-llegar-img img {
					position: absolute;
					inset: 0;
					height: 100%;
					object-fit: cover;
					object-position: 43% 37%;
				}

			#contacto .plano .actions {
				margin: 1.25em 0 0 0;
			}
}

@media screen and (min-width: 737px) {
	#contacto .split > section:last-child .contact-method {
		margin-bottom: 0;
	}

	#contacto .plano .actions {
		margin-bottom: 0 !important;
	}

		#contacto .plano .actions li {
			padding-bottom: 0;
			margin-bottom: 0;
		}
}

/* Plano: ocupa toda la altura de los datos; «Cómo llegar» encima del plano,
   abajo a la derecha, y la atribución de OpenStreetMap abajo a la izquierda */
#contacto .plano {
	position: relative;
}

	#contacto .plano .button.como-llegar {
		position: absolute;
		right: 1em;
		bottom: 1em;
		z-index: 2;
	}

	#contacto .plano .atribucion {
		position: absolute;
		left: 0.6em;
		bottom: 0.4em;
		z-index: 2;
		font-size: 0.7em;
		color: #bbb;
		background: rgba(8, 9, 10, 0.75);
		padding: 0 0.5em;
		border-radius: 3px;
	}

		#contacto .plano .atribucion a {
			color: inherit;
			border-bottom: 0;
		}

@media screen and (min-width: 737px) {
	#contacto .plano .como-llegar-img {
		min-height: 14em;
	}
}

/* Móvil: el plano es pequeño, así que «Cómo llegar» va debajo, a la derecha */
@media screen and (max-width: 736px) {
	#contacto .plano {
		text-align: right;
	}

		#contacto .plano .button.como-llegar {
			position: static;
			margin-top: 1em;
		}

		#contacto .plano .atribucion {
			bottom: auto;
			top: 0.4em;
		}
}

/* Campus Rock, entre UCA y Ayuntamiento */
#banner .instituciones .campus { height: 3.2em; }

@media screen and (max-width: 736px) {
	#banner .instituciones .campus { height: 2.4em; }
}

/* Ventana emergente con el cartel. En móvil no ocupa toda la pantalla:
   deja ver la web por detrás (Google penaliza las que la tapan entera) */
.aviso {
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5em;
	background: rgba(8, 9, 10, 0.72);
	opacity: 0;
	transition: opacity 0.3s ease;
}

	.aviso[hidden] { display: none; }
	.aviso.visible { opacity: 1; }

	.aviso-caja {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1em;
		transform: translateY(1em) scale(0.98);
		transition: transform 0.3s ease;
	}

	.aviso.visible .aviso-caja { transform: none; }

	.aviso-caja img {
		display: block;
		width: auto;
		height: auto;
		max-width: min(30rem, 80vw);
		max-height: 72vh;
		border-radius: 6px;
		box-shadow: 0 1.5em 4em rgba(0, 0, 0, 0.6);
	}

	.aviso-cerrar {
		position: absolute;
		top: -0.9em;
		right: -0.9em;
		width: 2.2em;
		height: 2.2em;
		padding: 0;
		border-radius: 50%;
		border: 0;
		background: var(--verde);
		color: var(--negro) !important;
		font-size: 1.1em;
		line-height: 2.2em;
		font-weight: 700;
		box-shadow: none;
		cursor: pointer;
	}

	.aviso .button.aviso-ver {
		background-color: var(--verde);
		box-shadow: none;
		color: var(--negro) !important;
	}

@media screen and (max-width: 736px) {
	.aviso-caja img { max-width: 78vw; max-height: 62vh; }
	.aviso-cerrar { top: -0.8em; right: -0.8em; }
}

/* «Edición especial otoño» más grande y destacada, en el hueco que dejó «Cádiz» */
#banner .logo-grande {
	width: min(72vw, 53rem, 94vh);
}

#banner .edicion {
	display: inline-block;
	margin: 1.1em 0 0 0;
	padding: 0.35em 1em;
	background-color: var(--verde);
	color: var(--negro);
	font-size: 1.5em;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1.3;
	border-radius: 4px;
}

#banner .lugar {
	margin-top: 0.9em;
}

@media screen and (max-width: 736px) {
	#banner .edicion {
		font-size: 1.05em;
		letter-spacing: 0.12em;
	}
}

/* Contacto sin título: un poco de aire arriba */
#contacto > .inner {
	padding-top: 1em;
}

/* Edición y lugar más pegados al logo */
#banner .edicion { margin-top: 0.35em; }
#banner .lugar   { margin-top: 0.6em; }

/* El título (el logo) traía margen de la plantilla: fuera, y un poco de aire propio */
#banner h1 { margin: 0; line-height: 0; }
#banner .edicion { margin-top: 1.1em; }
@media screen and (max-width: 736px) {
	#banner .edicion { margin-top: 0.9em; }
}

/* Bloque central (logo + edición + lugar) un poco más arriba, para que respire
   respecto a los logos de abajo */
@media screen and (min-width: 737px) {
	#banner > .inner {
		transform: translateY(-7vh);
	}
}

/* Firma de CraftedLanding en el pie: pequeña y discreta */
#footer .firma {
	margin: 1.5em 0 0 0;
	font-size: 0.7em;
	letter-spacing: 0.05em;
	opacity: 0.55;
}

	#footer .firma a {
		color: inherit;
		border-bottom: 0;
	}

		#footer .firma a:hover {
			color: var(--verde) !important;
		}

/* Pie: legales a la izquierda y la firma de CraftedLanding abajo a la derecha */
#footer .pie-fila {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5em 2em;
}

	#footer .pie-fila .legales { margin: 0; }
	#footer .pie-fila .firma   { margin: 0; text-align: right; }
#footer > .inner > .firma { text-align: right; }

/* Pie centrado: créditos en una línea y legales debajo, todo del mismo color */
#footer .inner {
	text-align: center;
}

	#footer .copyright {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.4em 0;
	}

		#footer .copyright a {
			color: inherit;
			border-bottom: 0;
		}

			#footer .copyright a:hover {
				color: var(--verde) !important;
			}

@media screen and (max-width: 736px) {
	#footer .copyright li {
		display: inline-block;
		border-left: 0 !important;
		margin: 0 !important;
		padding: 0 0.6em !important;
	}
}