/* =========================================================
   Medellín Ciudad de Música — estilos del sitio
   Paleta y estructura del diseño original; tipografia unificada en Roboto.
   ========================================================= */

:root {
	--color-texto: #0c0c0c;
	--color-fondo: #ffffff;
	--color-acento: #dcff30;        /* lima de la marca */
	--color-acento-menu: #a4c812;   /* lima del item activo del menu */
	--color-menu: #333333;
	--color-crema: #f1f0e9;
	--color-whatsapp: #25d366;

	--fuente-titulos: 'Roboto', Helvetica, Arial, sans-serif;
	--fuente-texto: 'Roboto', Helvetica, Arial, sans-serif;

	--ancho-contenido: 1080px;
	--ancho-aliados: 1220px;
}

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

body {
	margin: 0;
	font-family: var(--fuente-texto);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7em;
	color: var(--color-texto);
	background-color: var(--color-fondo);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--color-acento); }

/* Titulos: Roboto Black, apretado, para que la mayuscula pese como bloque */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding-bottom: 10px;
	font-family: var(--fuente-titulos);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-texto);
}

h1 { font-size: 52px; }
h2 { font-size: 42px; }
h3 { font-size: 34px; font-weight: 700; }
h4 { font-size: 26px; font-weight: 700; }
h5 { font-size: 22px; font-weight: 500; }
h6 { font-size: 18px; font-weight: 500; letter-spacing: 0.08em; }

p { margin: 0; padding-bottom: 1em; }

.text-justify { text-align: justify; }

/* ---------- Contenedores y secciones ---------- */
.container {
	width: 80%;
	max-width: var(--ancho-contenido);
	margin: 0 auto;
}

.section { padding: 4% 0; }

.section__title {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.prose { padding: 30px 0; }
.prose--center { text-align: center; }

/* ---------- Botones ---------- */
.button-wrap { text-align: center; padding-bottom: 0; }

.button {
	display: inline-block;
	font-family: var(--fuente-texto);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.7em;
	padding: 5px 45px 5px 30px;
	color: #ffffff;
	background-color: var(--color-texto);
	border: 1px solid var(--color-texto);
	border-radius: 0;
	text-decoration: none;
	transition: all 300ms ease;
}

.button:hover {
	color: var(--color-texto);
	background-color: #ffffff;
	border-color: var(--color-texto);
}

/* =========================================================
   Cabecera
   ========================================================= */
.site-header {
	padding: 10px 0;
	background-image: url('../assets/img/bg-header.webp');
	background-repeat: repeat;
	background-size: initial;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 30px;
	width: 100%;
	padding: 0 5%;
}

.site-header__logo img { height: 80px; width: auto; }

.site-nav {
	flex: 1;
	text-align: right;
}

.site-nav__list {
	display: inline-flex;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	font-family: var(--fuente-texto);
	font-size: 18px;
	color: var(--color-menu);
	text-decoration: none;
}

.site-nav__list a.is-current,
.site-nav__list a:hover { color: var(--color-acento-menu); }

/* Selector de idioma (Google Translate): dejamos solo el <select>, sin la marca de Google */
.lang-switcher { height: 27px; overflow: hidden; }

.lang-switcher .goog-te-gadget {
	font-size: 0;      /* oculta el texto "Powered by" que agrega Google */
	line-height: 1;
	color: transparent;
}

.lang-switcher .goog-te-gadget img,
.lang-switcher .goog-logo-link { display: none; }

/* Google Translate inserta una barra superior que desplaza la pagina: la ocultamos */
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }

.lang-switcher select {
	font-family: var(--fuente-texto);
	font-size: 13px;
	padding: 3px 6px;
	color: var(--color-menu);
	background: #ffffff;
	border: 1px solid #cccccc;
}

/* Boton hamburguesa: solo visible en pantallas pequeñas */
.nav-toggle {
	display: none;
	width: 34px;
	height: 34px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	height: 2px;
	width: 24px;
	background: var(--color-acento);
	content: '';
}

.nav-toggle__bars { position: relative; margin: 0 auto; }
.nav-toggle__bars::before { position: absolute; top: -7px; }
.nav-toggle__bars::after  { position: absolute; top: 7px; }

/* =========================================================
   Hero con video
   ========================================================= */
.hero {
	position: relative;
	min-height: 618.9px;
	overflow: hidden;
	background: #000000;
}

.hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* =========================================================
   Somos Medellín Ciudad de Música
   ========================================================= */
.section--about {
	padding-top: 102px;
	padding-bottom: 80px;
	background-image: url('../assets/img/bg-about-us.webp');
	background-position: center;
	background-size: cover;
}

/* =========================================================
   ¿Sabes que tipo de fan eres?
   ========================================================= */
.fan-type {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.fan-type__text {
	flex: 1 1 50%;
	padding: 15vw 6% 15vw 8%;   /* aire lateral: con Roboto el texto quedaba pegado al borde */
}

.fan-type__text .section__title { text-align: center; }

.fan-type__image {
	flex: 1 1 50%;
	align-self: stretch;
	min-height: 40vw;
	background-image: url('../assets/img/banner-fan-type.webp');
	background-position: center;
	background-size: cover;
}

/* =========================================================
   Franja parallax
   ========================================================= */
.parallax {
	padding: 15vw 0;
	background-image: url('../assets/img/bg-parallax.jpg');
	background-position: top center;
	background-size: cover;
	background-attachment: fixed;
}

/* =========================================================
   Venues (degradado crema/blanco del diseño original)
   ========================================================= */
.section--venues {
	background-image: linear-gradient(180deg, var(--color-crema) 24%, #ffffff 24%);
}

/* =========================================================
   Grupo empresarial
   ========================================================= */
.section--partners { background-color: var(--color-texto); }
.section--partners .section__title,
.section--partners .prose { color: #ffffff; }

/* Cuatro aliados: fila centrada con separacion pareja, en vez de repartir los bordes */
.partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 30px 5vw;
	width: 100%;
	max-width: var(--ancho-aliados);
	margin: 0 auto;
	padding: 30px 5%;
}

.partners__item {
	backface-visibility: hidden;
}

.partners__item img { height: 9vw; max-height: 130px; width: auto; }

/* Cada logo llega en un color distinto: estos filtros los unifican en blanco/gris */
.partners__item--invert { filter: invert(100%); }
.partners__item--grey   { filter: saturate(0%) brightness(200%) contrast(0%) invert(60%); }

/* =========================================================
   Playlist de Spotify
   ========================================================= */
.section--playlist {
	padding: 0;
	background-color: var(--color-texto);
}

.playlist {
	display: block;
	width: 100%;
	height: 400px;
	border: 0;
	border-radius: 12px;
}

.site-footer { background-color: var(--color-fondo); }

/* =========================================================
   Boton flotante de WhatsApp
   ========================================================= */
.whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-size: 15px;
}

.whatsapp__button {
	position: relative;
	width: 60px;
	height: 60px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: var(--color-whatsapp);
	border: 0;
	border-radius: 50%;
	box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, 0.24);
	cursor: pointer;
	transition: transform 300ms ease;
}

.whatsapp__button:hover { transform: scale(1.06); }

.whatsapp__icon { display: block; }

.whatsapp__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
	color: #ffffff;
	background: #ff0000;
	border-radius: 50%;
}

.whatsapp__box {
	width: 280px;
	overflow: hidden;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.2);
}

.whatsapp__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	font-weight: 400;
	color: #ffffff;
	background: #075e54;
}

.whatsapp__close {
	font-size: 22px;
	line-height: 1;
	color: #ffffff;
	background: none;
	border: 0;
	cursor: pointer;
}

.whatsapp__body { padding: 14px; background: #e5ddd5; }

.whatsapp__message {
	padding: 10px 12px;
	background: #ffffff;
	border-radius: 0 8px 8px 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.whatsapp__cta {
	display: block;
	padding: 8px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	background: var(--color-whatsapp);
	border-radius: 8px;
}

/* =========================================================
   Responsive
   ========================================================= */
@media only screen and (max-width: 980px) {
	h2 { font-size: 36px; }

	.site-header__logo img { height: 60px; }

	.nav-toggle { display: block; order: 3; }

	.lang-switcher { margin-left: auto; }

	.site-nav {
		display: none;
		order: 4;
		flex: 0 0 100%;
		text-align: left;
		padding: 10px 0;
		background: #ffffff;
		border-top: 3px solid var(--color-acento-menu);
	}

	.site-nav.is-open { display: block; }

	.site-nav__list { display: block; }
	.site-nav__list a { display: block; padding: 8px 5%; }

	.site-header__inner { flex-wrap: wrap; gap: 12px; }

	.fan-type { flex-direction: column-reverse; }
	.fan-type__text,
	.fan-type__image { flex: 1 1 100%; width: 100%; }
	.fan-type__text { padding: 12vw 8%; }
	.fan-type__image { min-height: 60vw; }

	.parallax {
		padding: 25vw 0;
		background-attachment: scroll;   /* el fixed no funciona bien en movil */
	}

	.partners { width: 90%; }
	.partners__item img { height: 80px; }
}

@media only screen and (max-width: 767px) {
	h2 { font-size: 30px; }

	.hero { min-height: 380px; }
	.parallax { padding: 40vw 0; }

	/* Los cuatro aliados en cuadricula 2x2: en una fila corrida quedaba uno huérfano */
	.partners { width: 100%; gap: 30px 0; }

	.partners__item {
		display: flex;
		flex: 0 0 50%;
		justify-content: center;
	}

	.partners__item img { height: 60px; }

	.whatsapp__box { width: calc(100vw - 40px); max-width: 280px; }
}