/* Ishiku Lemu · popup del Festival del Micromundo (inc/festival.php).
   El afiche al centro, tan grande como deje la pantalla (alto ≤ 82 vh), con el radio 20 px
   del sistema y, debajo, la píldora de acción en el mostaza del «MICRO» del afiche (en
   hover, el naranjo del «MUNDO»), con texto negro: se lee como parte del afiche. Sin
   sombras (brandbook): lo separa el fondo negro. Entra con un fundido y
   una escala cortos; sin ellos si se pide menos movimiento. */

.cc-festival {
	--cc-festival-alto: min(82vh, 82dvh);
	--cc-festival-mostaza: #dbbc47; /* Colores del afiche, solo para este popup. */
	--cc-festival-naranjo: #d07030;

	box-sizing: border-box;
	/* Ancho del afiche (3:4) al alto disponible menos la píldora, o el de la pantalla si es
	   menor: así la X queda en la esquina del afiche. */
	width: min(calc(100vw - 32px), calc((var(--cc-festival-alto) - 66px) * 0.75));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: visible;
	color: inherit;
	background: transparent;
	border: 0;
}

.cc-festival[open] {
	animation: cc-festival-entra 320ms var(--cc-curva, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.cc-festival::backdrop {
	background-color: rgba(0, 0, 0, 0.85);
	animation: cc-festival-fondo 320ms ease both;
}

.cc-festival__enlace {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.cc-festival__afiche {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	transition: transform var(--cc-duracion, 200ms) var(--cc-curva, ease);
}

.cc-festival__accion {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 52px;
	padding: 0 30px;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #000000;
	background-color: var(--cc-festival-mostaza);
	border: 0;
	border-radius: 50px;
	transition: background-color var(--cc-duracion, 200ms) var(--cc-curva, ease);
}

.cc-festival__accion svg {
	flex: none;
	transition: transform var(--cc-duracion, 200ms) var(--cc-curva, ease);
}

.cc-festival__enlace:hover .cc-festival__afiche {
	transform: scale(1.01);
}

.cc-festival__enlace:hover .cc-festival__accion,
.cc-festival__enlace:focus-visible .cc-festival__accion {
	background-color: var(--cc-festival-naranjo);
}

.cc-festival__enlace:hover .cc-festival__accion svg {
	transform: translateX(3px);
}

.cc-festival__enlace:focus-visible {
	outline: none;
}

.cc-festival__enlace:focus-visible .cc-festival__accion,
.cc-festival__cerrar:focus-visible {
	outline: 2px solid var(--cc-salvia, #acc08f);
	outline-offset: 3px;
}

/* La X va fuera del enlace (un botón dentro de un enlace no es válido), sobre la esquina
   del afiche. Crema sobre noche: se ve sobre cualquier zona del afiche. */
.cc-festival__cerrar {
	position: absolute;
	top: -14px;
	right: -14px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--cc-crema, #f0ecdf);
	background-color: var(--cc-noche, #1a2e1a);
	border: 2px solid var(--cc-crema, #f0ecdf);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--cc-duracion, 200ms) var(--cc-curva, ease);
}

.cc-festival__cerrar:hover {
	background-color: var(--cc-bosque, #3f5123);
}

/* Móvil: la X entra en el afiche para no salirse de la pantalla y la píldora se compacta. */
@media (max-width: 600px) {
	.cc-festival__cerrar {
		top: 8px;
		right: 8px;
	}

	.cc-festival__accion {
		min-height: 48px;
		padding: 0 24px;
		font-size: 0.8125rem;
		letter-spacing: 1px;
	}
}

@keyframes cc-festival-entra {
	from {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes cc-festival-fondo {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-festival[open],
	.cc-festival::backdrop {
		animation: none;
	}

	.cc-festival__afiche,
	.cc-festival__accion,
	.cc-festival__accion svg {
		transition: none;
	}

	.cc-festival__enlace:hover .cc-festival__afiche,
	.cc-festival__enlace:hover .cc-festival__accion svg {
		transform: none;
	}
}

@media print {
	.cc-festival {
		display: none;
	}
}

/* Pastilla fija que vuelve a abrir el popup una vez cerrado (inc/festival.php). Mostaza
   del afiche, abajo a la izquierda; en tablet y móvil sube sobre «Compra tu entrada»
   (52 px de alto a 31 px del borde, o a 18 px bajo 520 px). */
.cc-festival-pestana {
	position: fixed;
	left: 26px;
	bottom: 26px;
	z-index: 2900; /* Como «Compra tu entrada»: bajo el header fijo (3000) y el chat. */
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 20px 0 16px;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000000;
	background-color: #dbbc47;
	border: 2px solid #000000;
	border-radius: 50px;
	cursor: pointer;
	animation: cc-festival-fondo 320ms ease both;
	transition: background-color var(--cc-duracion, 200ms) var(--cc-curva, ease);
}

.cc-festival-pestana[hidden] {
	display: none;
}

.cc-festival-pestana:hover {
	background-color: #d07030;
}

.cc-festival-pestana:focus-visible {
	outline: 2px solid var(--cc-salvia, #acc08f);
	outline-offset: 3px;
}

.cc-festival-pestana__punto {
	width: 8px;
	height: 8px;
	background-color: #d07030;
	border-radius: 50%;
}

.cc-festival-pestana:hover .cc-festival-pestana__punto {
	background-color: #000000;
}

@media (max-width: 980px) {
	.cc-festival-pestana {
		bottom: calc(31px + 52px + 12px);
	}
}

@media (max-width: 600px) {
	.cc-festival-pestana {
		left: 16px;
	}
}

@media (max-width: 520px) {
	.cc-festival-pestana {
		bottom: calc(18px + 52px + 10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cc-festival-pestana {
		animation: none;
		transition: none;
	}
}

@media print {
	.cc-festival-pestana {
		display: none;
	}
}