/*
 *
 *  * EENDA
 *  * Marketing, Desarrollo & Consulting
 *  * www.eenda.com
 *  * © 2026
 *
 */

/*
 * Cadizunderground · front
 * responsive.css
 *
 * Lo que cambia al crecer, siempre con min-width (mobile-first). Puntos de
 * corte de Bootstrap 5 (DESIGN.md §5): 576 · 768 · 992 · 1200 · 1400.
 */


/* ==========================================================================
   ≥ 768 px · tableta
   ========================================================================== */

@media (min-width: 768px){

	/* Margen lateral de 24 px (DESIGN.md §5) */
	.container{
		--bs-gutter-x: 3rem;
	}

	.cu-frase__acciones{
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 16px 24px;
	}

	.cu-modo__opcion{
		flex: 0 0 auto;
		padding: 0 28px;
	}

	.cu-frase__enviar{
		width: auto;
	}

	.cu-panel{
		padding: 32px 24px 16px;
	}

	.cu-unete__bloque{
		padding-inline: 24px;
	}

	.cu-articulos{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cu-footer__columnas{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cu-footer__columnas > nav:nth-child(2){
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.cu-footer__lista--localidades{
		columns: 3;
	}
}


/* ==========================================================================
   ≥ 992 px · escritorio
   ========================================================================== */

@media (min-width: 992px){

	:root{
		--cu-header-h: 72px;
		--cu-reproductor-h: 72px;
	}

	body{
		padding-bottom: 0;
		font-size: 1.0625rem;
	}

	body.has-reproductor{
		padding-bottom: var(--cu-reproductor-h);
	}

	/*
	 * Cabecera: el menú completo, siempre en una línea; compacta al bajar.
	 * Lo que no cabe con texto va solo con su icono (el texto queda para los
	 * lectores de pantalla) y «Sube tu música» sale desde 1200 px. Desde
	 * 1400 px, todo con su tamaño y su texto.
	 */
	.cu-header.is-compacta .cu-header__inner{
		min-height: 56px;
	}

	.cu-header__inner{
		gap: 8px 20px;
	}

	.cu-marca{
		flex-shrink: 0;
		margin-right: 0;
		font-size: 1.625rem;
	}

	.cu-nav{
		display: block;
		flex: 1 1 auto;
	}

	.cu-nav__lista{
		display: flex;
		flex-wrap: nowrap;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.cu-nav__enlace{
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 8px;
		color: var(--cu-text);
		font-family: var(--cu-mono);
		font-size: .8125rem;
		letter-spacing: .06em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.cu-nav__enlace:hover,
	.cu-nav__enlace[aria-current="page"]{
		color: var(--cu-accent);
	}

	.cu-header__acciones{
		flex-shrink: 0;
		gap: 4px;
		margin-right: 0;
	}

	.cu-header__accion{
		padding: 0 12px;
		white-space: nowrap;
	}

	.cu-header__accion--escena{
		display: inline-flex;
	}

	/* «Entrar» y «Mi escena», con texto (el icono es para el móvil); «Buscar» y «Mi cuenta», con su icono */
	.cu-header__accion--entrar .cu-header__texto,
	.cu-header__accion--escena .cu-header__texto{
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}

	.cu-header__accion--entrar .cu-icon,
	.cu-header__accion--escena .cu-icon{
		display: none;
	}

	/* Portada */
	.cu-hero{
		padding: 64px 0 56px;
	}

	.cu-hero__titulo{
		margin-bottom: 32px;
	}

	.cu-frase{
		gap: 36px;
	}

	.cu-frase__texto{
		gap: 12px 28px;
	}

	.cu-selector,
	.cu-selector + span + .cu-selector{
		flex: 0 1 auto;
	}

	.cu-selector__valor{
		white-space: nowrap;
	}

	/* En escritorio manda el <select> nativo, sin hoja */
	.cu-selector__boton{
		display: none;
	}

	.cu-frase__enviar{
		padding-inline: 2rem;
		font-size: 1.875rem;
	}

	.cu-hero__intro{
		font-size: 1.125rem;
	}

	/* Secciones */
	.cu-seccion{
		padding: 72px 0;
	}

	.cu-seccion--sin-arriba{
		padding-top: 0;
	}

	.cu-concierto{
		grid-template-columns: 170px minmax(0, 1fr) minmax(220px, 300px) 56px;
		grid-template-areas: "fecha titulo info ir";
		gap: 12px 32px;
		padding: 24px 0;
	}

	.cu-concierto__fecha{
		flex-direction: column;
		gap: 0;
	}

	.cu-concierto__dia{
		font-size: 4rem;
	}

	.cu-concierto__ir{
		width: 56px;
		height: 56px;
	}

	.cu-panel{
		padding: 32px 32px 20px;
	}

	.cu-pistas{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cu-descubrimiento{
		padding: 64px 0;
	}

	.cu-descubrimiento__inner{
		flex-direction: row;
		align-items: flex-end;
		gap: 56px;
	}

	.cu-foto{
		flex: 0 0 440px;
	}

	.cu-descubrimiento__bio{
		font-size: 1.25rem;
	}

	.cu-nube__item{
		font-size: calc(2rem + var(--peso, 0) * 3.5rem);
	}

	/* Mapa a la izquierda, lista a la derecha */
	.cu-localidades{
		grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
		gap: 48px;
		align-items: start;
	}

	.cu-mapa{
		display: block;
	}

	/* Únete: los dos bloques a sangre, con el texto pegado a la línea central */
	.cu-unete{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cu-unete__bloque{
		padding: 72px 48px 72px 24px;
	}

	.cu-unete__bloque--escena{
		justify-content: flex-end;
	}

	.cu-unete__bloque--musica{
		padding: 72px 24px 72px 48px;
	}

	.cu-articulos{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cu-footer{
		padding-top: 48px;
	}

	.cu-footer__columnas{
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
		gap: 48px;
	}

	.cu-footer__columnas > nav:nth-child(2){
		grid-column: auto;
		grid-row: auto;
	}

	.cu-footer__lista--estilos{
		columns: 1;
	}

	/* Reproductor: barra fija a todo el ancho, con todos los controles */
	.cu-reproductor{
		bottom: 0;
	}

	.cu-reproductor__progreso{
		top: 0;
		height: 3px;
	}

	.cu-reproductor__inner{
		gap: 24px;
		padding: 3px 24px 0;
	}

	.cu-reproductor__pista{
		flex: 1 1 0;
		gap: 14px;
	}

	.cu-reproductor__mini{
		width: 48px;
		height: 48px;
		font-size: 1.375rem;
	}

	.cu-reproductor__titulo{
		font-size: 1.375rem;
	}

	.cu-reproductor__controles{
		flex: 1 1 0;
		justify-content: center;
		gap: 8px;
	}

	.cu-reproductor__boton--salto{
		display: inline-flex;
	}

	.cu-reproductor__tiempo{
		display: inline;
		margin-left: 12px;
		font-family: var(--cu-mono);
		font-size: .8125rem;
		color: var(--cu-text-muted);
		white-space: nowrap;
	}

	.cu-reproductor__volumen{
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
	}

	.cu-tabbar{
		display: none;
	}
}


/* ==========================================================================
   ≥ 1200 px
   ========================================================================== */

@media (min-width: 1200px){

	.cu-header__cta{
		display: inline-flex;
		flex-shrink: 0;
		margin-left: 8px;
		white-space: nowrap;
	}

	.cu-concierto{
		grid-template-columns: 180px minmax(0, 1fr) minmax(260px, 320px) 56px;
	}

	.cu-unete__contenido{
		max-width: 580px;
	}
}


/* ==========================================================================
   ≥ 1400 px
   ========================================================================== */

@media (min-width: 1400px){

	.cu-header__inner{
		gap: 8px 28px;
	}

	.cu-marca{
		font-size: 2.125rem;
	}

	.cu-nav__enlace{
		padding: 0 12px;
	}

	/* Con sitio, «Mi cuenta» también con texto, y «Buscar» sin sesión */
	.cu-header__accion--cuenta .cu-header__texto,
	.cu-header__acciones:not(.cu-header__acciones--sesion) .cu-header__accion--buscar .cu-header__texto{
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}

	.cu-header__accion--cuenta .cu-icon{
		display: none;
	}
}


/* ==========================================================================
   Páginas interiores
   ========================================================================== */

@media (min-width: 576px){

	.cu-lista-localidades{
		columns: 2;
		column-gap: 32px;
	}

	.cu-lista-localidades li{
		break-inside: avoid;
	}

	.cu-campos-dobles{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px){

	.cu-tarjetas{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 24px;
	}

	.cu-tarjetas-salas{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cu-cruces{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.cu-paneles{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cu-ventajas-rejilla{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}

	.cu-pasos{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cu-aviso-cta{
		padding: 64px 0;
	}

	.cu-banda-acento{
		padding: 64px 0;
	}
}

@media (min-width: 992px){

	.cu-cabecera{
		padding: 40px 0 8px;
	}

	.cu-cabecera__intro{
		font-size: 1.25rem;
	}

	.cu-seccion--corta{
		padding-top: 32px;
	}

	.cu-tarjetas{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cu-ficha{
		padding: 40px 0 56px;
	}

	.cu-ficha__inner{
		flex-direction: row;
		align-items: flex-end;
		gap: 56px;
		margin-top: 32px;
	}

	.cu-ficha__inner .cu-foto{
		flex: 0 0 400px;
	}

	.cu-ficha__inner--concierto{
		align-items: flex-start;
	}

	.cu-ficha__inner--concierto .cu-fecha-grande{
		flex: 0 0 auto;
		min-width: 280px;
	}

	.cu-dos-columnas{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 56px;
	}

	.cu-dos-columnas--formulario{
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.cu-articulo--principal{
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: end;
		gap: 40px;
	}

	.cu-articulo--principal .cu-articulo__texto{
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.cu-lectura__cuerpo{
		font-size: 1.25rem;
	}

	.cu-acceso{
		padding: 56px 0 96px;
	}

	.cu-ventajas-rejilla{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cu-aviso-cta__inner{
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: end;
		gap: 16px 48px;
	}

	.cu-aviso-cta__titulo{
		grid-row: 1 / span 2;
	}

	.cu-aviso-cta .cu-btn{
		justify-self: start;
	}
}

@media (min-width: 1200px){

	.cu-tarjetas-salas{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cu-paneles{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}