@import url(fontawesome-all.min.css);

/* Google Fonts */
@import url("https://fonts.googleapis.com/css?family=Inter+Tight:300italic,600italic,300,600");
@import url("https://fonts.googleapis.com/css?family=Helvetica+Neue:300italic,600italic,300,600");

:root{
	--blue-color: #39BAFF;
	--green-color: #25E699;
	--red-color: #F15672;
	--yellow-color: #F6D851;
    
}

/*
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
*/
body {
	font-family: "Inter Tight";
	background: black;
	color: white;
}

main {
	flex: 1; /* ocupa todo o espaço restante */
}

#navbar {
	/*transition: all 0.3s ease;*/
	width: 100%;
	z-index: 1030;
  }

  /* Em mobile: começa em posição absoluta e mais abaixo */
  @media (max-width: 768px) {
	#navbar {
	  position: absolute;
	  top: 100px;
	}
  }


.responsive-title {
  font-family: 'Inter Tight';
  font-weight: 600;
  font-size: 134px;
  line-height: 140px;
  text-transform: uppercase;
}

/* Tablets e abaixo */
@media (max-width: 991.98px) {
  .responsive-title {
    font-size: 100px;
    line-height: 110px;
  }
}

/* Mobile médio */
@media (max-width: 767.98px) {
  .responsive-title {
    font-size: 80px;
    line-height: 85px;
  }
}

/* Mobile pequeno */
@media (max-width: 575.98px) {
  .responsive-title {
    font-size: 60px;
    line-height: 60px;
  }
}

.bg-dark {
    background-color: black !important;
}

.text-change-color {
	animation: changeTextColor 15s infinite linear;
  }

  @keyframes changeTextColor {
	0% { color: var(--green-color); } /* #25E699 */
    
	25% { color: var(--blue-color); } /* #39BAFF */
      
	50% { color: var(--red-color); } /* #F15672 */
      
	75% { color: var(--yellow-color); } /* #F6D851 */
      
	100% { color: var(--green-color); } /* #25E699 */
  }

/* Border Bottom Change color */
.border-bottom-change-color{
	animation: changeBorderBottomColor 15s infinite linear;
}

@keyframes changeBorderBottomColor {
	0% { border-bottom: 1.5px solid var(--green-color); } /* #25E699 */
    
	25% { border-bottom: 1.5px solid var(--blue-color); } /* #39BAFF */
      
	50% { border-bottom: 1.5px solid var(--red-color); } /* #F15672 */
      
	75% { border-bottom: 1.5px solid var(--yellow-color); } /* #F6D851 */
      
	100% { border-bottom: 1.5px solid var(--green-color); } /* #25E699 */
  }


/* Border Button */
  .border-change-color {
	animation: changeBorderColor 15s infinite linear;
  }

  @keyframes changeBorderColor {
	0% { border: 1.5px solid var(--green-color); } /* #25E699 */
    
	25% { border: 1.5px solid var(--blue-color); } /* #39BAFF */
      
	50% { border: 1.5px solid var(--red-color); } /* #F15672 */
      
	75% { border: 1.5px solid var(--yellow-color); } /* #F6D851 */
      
	100% { border: 1.5px solid var(--green-color); } /* #25E699 */
  }

  /* Border End of footer */

  .border-end-change-color {
	animation: changeBorderEndColor 15s infinite linear;
  }

  .border-end-change-color-apoios {
	animation: changeBorderEndColor 15s infinite linear;
  }

  @keyframes changeBorderEndColor {
	0% { border-right: var(--bs-border-width) var(--bs-border-style) var(--green-color); } /* #25E699 */
    
	25% { border-right: var(--bs-border-width) var(--bs-border-style) var(--blue-color); } /* #39BAFF */
      
	50% { border-right: var(--bs-border-width) var(--bs-border-style) var(--red-color); } /* #F15672 */
      
	75% { border-right: var(--bs-border-width) var(--bs-border-style) var(--yellow-color); } /* #F6D851 */
      
	100% { border-right: var(--bs-border-width) var(--bs-border-style) var(--green-color); } /* #25E699 */
  }

  @media (max-width: 991.98px) { /* equivale a col-lg- abaixo */
	.border-end-change-color-apoios {
	  border-right: none !important;
	  animation: none !important;
	}
  }



.image-change-color {
	display: flex;
	position: relative;
	width: 100%;
	
  }
  
  .image-change-color::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--green-color);
	mix-blend-mode: multiply;
	animation: changeImageColor 15s infinite linear;
	pointer-events: none;
  }


  @keyframes changeImageColor {
	0% { background-color: var(--green-color); } /* 25E699 */
    
	25% { background-color: var(--blue-color); } /* #39BAFF */
      
	50% { background-color: var(--red-color); } /* #F15672 */
      
	75% {background-color: var(--yellow-color); } /* #F6D851 */
      
	100% { background-color: var(--green-color); } /* #25E699 */
		
  }

/* Type */

html {
	font-size: 16pt;
}

	@media screen and (max-width: 1680px) {

		html {
			font-size: 12pt;
		}

	}

	@media screen and (max-width: 736px) {

		html {
			font-size: 11pt;
		}

	}

	@media screen and (max-width: 360px) {

		html {
			font-size: 10pt;
		}

	}


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

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

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

hr{
	opacity: unset;
}


/* Badge */

.badge {
 color: black;
}

.badge:hover {
	transform: scale(1.15);
   }

.bg-bk-change-color {
	animation: changeBgChangeColor 15s infinite linear;
  }

  @keyframes changeBgChangeColor {
	0% { background-color: var(--green-color); } /* #25E699 */
    
	25% { background-color: var(--blue-color); } /* #39BAFF */
      
	50% { background-color: var(--red-color); } /* #F15672 */
      
	75% { background-color: var(--yellow-color); } /* #F6D851 */
      
	100% { background-color: var(--green-color); } /* #25E699 */
  }


/* Button Download */

.btn-download{
	background-color: black;
	border-radius: 40px;
	border: 1.5px solid white;
	color: white;
	cursor: pointer;
	display: inline-block;
	font-weight: 500;
	height: 1.85rem;
	line-height: 1.75rem;
	padding: 0 0.5rem 0 0.5rem;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.3s;
	font-weight: bold;

}

.btn-download:hover {
	transform: scale(1.08);
	background-color: white;
	color: black;
}


/* Button and Input */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		background-color: black;
		border-radius: 40px;
		border: 2px solid white;
		color: white ;
		cursor: pointer;
		display: inline-block;
		/*font-size: 0.8rem;*/
		font-weight: 500;
		height: 2.75rem;
		line-height: 2.75rem;
		/*outline: 0;*/
		padding: 0 1.25rem 0 1.35rem;
		text-align: center;
		text-decoration: none;
		/*text-transform: uppercase;*/
		white-space: nowrap;
	}

	/*
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			text-decoration: underline;
		}
		*/
		

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(255, 255, 255, 0.175);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.6rem;
			height: 2.0625rem;
			line-height: 2.0625rem;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			background-color: black;
			color: white !important;
			border: 2px solid white;
			padding: 0 2.25rem 0 2.25rem;
		}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			cursor: default;
			opacity: 0.25;
		}

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button {
		line-height: calc(2.75rem - 2px);
	}

	.row {
		margin-right: 0 !important;
		overflow-x: hidden;
	  }

	  .row>* {
		padding-right: 0 !important;
	  }


	/* Accordion */
	  .accordion-title {
		flex: 1;
		display: flex;
		align-items: center;
		transition: margin-left 0.3s ease;
		margin-left: 1rem; /* margem inicial quando fechado */
	}

	/* Margens diferentes por título */
	.margin-programacao {
		margin-left: 2rem;
	}

	.margin-bilheteira {
		margin-left: 8rem;
	}

	.margin-masterclasse {
		margin-left: 4rem;
	}

	.margin-recitais {
		margin-left: 6rem;
	}

	.margin-sobre {
		margin-left: 10rem;
	}


	.accordion-button:not(.collapsed) .accordion-title {
		margin-left: 0; /* elimina margem quando aberto */
	}

	.accordion-button {
		color: white;
		background-color: black;
		display: flex;
  		align-items: center; /* Alinha conteúdo verticalmente */
		position: relative;
	}

	.accordion-body {
     	padding: 0;
		animation: changeTextColor 15s infinite linear;
	}

	/* Custom Code */

	.accordion-item{
		/* Aplicar animação da cor */
		animation: changeBorderBottomColor 15s infinite linear;
	}

	.accordion-button:not(.collapsed) {
		color: var(--bs-accordion-active-color);
		background-color: black;
		box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
	}

	.accordion-button:focus {
		box-shadow: none;
		outline: none;
	}

	.accordion-flush>.accordion-item:last-child {
		border-bottom: 1px solid white;
	}

	.accordion-button::after {
		content: '+'; /* símbolo para fechado */
		font-size: 1.50rem;
		color: white;
		font-weight: bold;
		background-image: none !important; /* remove seta padrão */
		transform: none !important; /* remove rotação padrão */
		margin-left: auto;
		display: flex;
		align-items: center;     /* Garante centralização vertical */
		justify-content: center; /* Centraliza o símbolo no espaço disponível */
		height: 100%;            /* Ocupa toda a altura do botão */

		/* Posição inicial (fechado → à direita) */
		position: absolute;
		right: 1.5rem;
		transition: all 0.3s ease;

		/* Aplicar animação da cor */
		animation: changeTextColor 15s infinite linear;
	}

	.accordion-button:not(.collapsed)::after {
		content: '−'; /* símbolo para aberto */
		right: 50%;
		transform: translateX(50%);
	}

	/* --- Responsivo para ecrãs pequenos (max 576px) --- */
	@media (max-width: 576px) {
		.accordion-button:not(.collapsed)::after {
			right: 1.5rem;               /* Volta para a direita */
			transform: none;           /* Sem centralizar */
		}
	}



/* START COLORS */

	/* Background colors */
    .bg-yellow { background-color: var(--yellow-color); }
    .bg-green { background-color: var(--green-color); }
    .bg-blue { background-color: var(--blue-color); }
    .bg-red { background-color: var(--red-color); }

	/* Text colors */
    .txt-yellow { color: var(--yellow-color); }
    .txt-green { color: var(--green-color); }
    .txt-blue { color: var(--blue-color); }
    .txt-red { color: var(--red-color); }

/* END COLORS */

/* Start Schedule / Programação */

/* Define a keyframe para pano a descer */
@keyframes panoDescer {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: var(--hover-color);
  }
}

/* E pano a subir */
@keyframes panoSubir {
  0% {
    background-color: var(--hover-color);
  }
  100% {
    background-color: transparent;
  }
}

.carousel-inner img {
  height: auto;
  object-fit: cover;
}

.carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
}

.carousel-indicators .active {
  opacity: 1;
}

	/* Wrapper do carrossel */
    .card-scroll-container-wrapper {
      position: relative;
      overflow: hidden;
    }

    /* Container que faz o scroll horizontal */
    .card-scroll-container {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      gap: 0; /* Sem espaço entre os cards */
      cursor: default; /* <- cursor normal por defeito */
      -webkit-overflow-scrolling: touch;

	  /* Para scroll natural com dedo e rato */
		touch-action: auto;
		user-select: none;
    }


	/* Cursor só quando a classe estiver presente */
	.card-scroll-container.drag-enabled {
	cursor: grab;
	}

	.card-scroll-container.drag-enabled.dragging {
	cursor: grabbing;
	}

    /* Card responsivo */
    .concert-card {
      flex: 0 0 50%;
      max-width: 50%; /* Mobile: 2 cards*/
	  height: 100%;
      background-color: black;
      color: white;
      border-radius: 0;
      overflow: hidden;
    }

   /* Tablet ≥768px: 4 cards */
@media (min-width: 768px) {
  .concert-card {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Desktop XXL ≥1400px: 5 cards */
@media (min-width: 1400px) {
  .concert-card {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

    .card-image-container img {
      width: 100%;
      height: auto;
      display: block;
    }

    .label-local {
      	width: 100%;
		display: flex;
		align-items: center;
  		justify-content: center;
		padding: 0.3rem 0.5rem;
		font-size: 0.75rem;
		font-weight: bold;
		color: white;
		text-align: center;
		line-height: 1.1;
		height: 2.6em;             /* Fixa a altura para 2 linhas */
		overflow: hidden;
		text-wrap: balance;
    }


   .concert-info {
		height: 130px;
		background-color: transparent;
      	padding: 1rem;
      	/*font-size: clamp(1rem, 2.5vw, 1.3rem);*/
		font-weight: bold;
		line-height: 1.3rem;
		text-transform: uppercase;
    }

	.concert-info,
	.dia-semana,
	.data-concerto {
		transition: font-size 0.3s ease-in-out;
	}

    .concert-footer {
      background-color: transparent;
      padding: 1rem;

	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  flex-wrap: wrap;
    }


	.concert-btn-purchase {
		width: 40%;
		text-align: left;
	}

	.concert-div-date{
		width: 60%;
		text-align: right;
	}

	.dia-semana {
		/*font-size: clamp(0.7rem, 2.5vw, 0.85rem);*/
		font-weight: normal;
		display: block;
		margin-bottom: 0;
	}

	.data-concerto {
		/*font-size: clamp(1rem, 2.5vw, 1.2rem);*/
		font-weight: bold;
		display: block;
		margin-bottom: 0;
	}

	/* Para Mobile: botão passa para baixo */
	@media (max-width: 575.98px) {
		.concert-btn-purchase {
			width: 100%;
			text-align: center;
			margin-bottom: 0.7rem;
		}

		.concert-div-date {
			width: 100%;
			text-align: right;
		}
	}

	.masterclasse-info{
		height: auto;
		font-weight: bold;
		line-height: 1.3rem;
		background-color: transparent;
		padding: 1rem;
	}


	/* Formulário cresce para ocupar o espaço restante */
	.inscricao-content {
	background-color: black;
	color: white;
	display: flex;
	}

/* Comportamento responsivo: stack no mobile */
@media (max-width: 768px) {
  .masterclasse-card-wrapper {
    flex-direction: column;
  }

  .inscricao-content {
    width: 100%;
  }
}


	/* Estado ao fazer hover */
	.concert-card.hover-ativo .concert-info,
	.concert-card.hover-ativo .masterclasse-info,
	.concert-card.hover-ativo .concert-footer {
	animation: panoDescer 1s ease forwards;
	}

	/* Estado ao sair do hover */
	.concert-card.hover-inativo .concert-info,
	.concert-card.hover-inativo .masterclasse-info,
	.concert-card.hover-inativo .concert-footer {
	animation: panoSubir 1s ease forwards;
	}

    /* Botões de navegação */
    .arrow-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      font-size: 2rem;
      padding: 0 0.75rem;
      cursor: pointer;
      height: 10%;
	  transition: opacity 0.3s ease;
    }

	.arrow-btn[style*="display: none"] {
		opacity: 0;
		pointer-events: none;
	}

    .arrow-left {
      left: 0;
    }

    .arrow-right {
      right: 0;
	}
    

/* End Schedule / Programação */



/* Footer Scrolling */

.scroll-container {
	width: 100%;
	overflow: hidden;
	position: relative;
  }

  .scrolling-track-mobile {
	display: flex;
	width: fit-content;
	animation: scroll 20s linear infinite;
  }

  .scrolling-track-mobile img {
	max-height: 70px;
	display: inline-block;
  	margin: 0;
  	padding: 0;
	margin-right: 1%;
  }

  .scrolling-track {
	display: flex;
	width: fit-content;
	animation: scroll 10s linear infinite;
  }

  .scrolling-track img {
	max-height: 70px;
	display: inline-block;
  	margin: 0;
  	padding: 0;
	margin-right: 1%;
  }

/*
  @media (max-width: 767.98px) {
  .scroll-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: transparent;
    
  }

  .scrolling-track-mobile {
    padding-left: 100%;
  }
}
  */

  @keyframes scroll {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-50%);
	}
  }

/* Footer */

	#footer {
		background: black;
		font-size: 14px;
		font-weight: 600;
		color: white;
		font-family: 'Inter Tight';
		/*margin-bottom: 0;*/
		text-transform: uppercase;
		border: white;
		overflow: hidden;
	}

	.footer-border-end {
		border-right: var(--bs-border-width) var(--bs-border-style) white !important;
	}

	.footer-icon{
		padding: 10px;
		overflow: hidden;
		transition: transform 0.3s ease;
		/*will-change: transform;*/
	}

	.footer-icon img {
		max-height: 60px;
		transition: transform 0.3s ease;
	}

	.footer-icon:hover img{
		transform: scale(1.08);
	}


	.footer-accordion .accordion-button {
		background-color: transparent;
		color: white;
		box-shadow: none;
		justify-content: flex-start;
		padding-left: 1rem;
		position: relative;
		z-index: 1;
		font-weight: bold;
		display: flex;
		align-items: center;
		gap: 0.5rem;
}

.footer-accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: white;
}

.footer-accordion .footer-accordion-item {
  border: none;
  border-bottom: 1px solid white; /* Linha inferior personalizada */
}

.footer-accordion .accordion-header {
  text-align: left;
}

.footer-accordion .accordion-body {
  padding: 1rem 2rem;
}

/* Estilo exclusivo para cor animada */
.footer-accordion.image-change-color {
  position: relative;
  display: flex;
  flex-direction: column;
}

.footer-accordion.image-change-color::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--green-color);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

/* Texto com efeito */
.footer-accordion .accordion-title {
  color: white;
  mix-blend-mode: multiply;
  animation: changeTextColor 15s infinite linear;
  position: relative;
  z-index: 1;
}

/* Ícone (o "chevron") que aparece à direita */
.footer-accordion .accordion-button::after {
  mix-blend-mode: multiply;
  animation: changeTextColor 15s infinite linear;
  filter: brightness(1.2); /* Melhora visibilidade */
}


	#footer-h7 {
		font-size: 14pt;
	}
	
	#footer-p {
		font-size: 12pt;
	}

		@media screen and (max-width: 1680px) {
	
			p .footer-p {
				font-size: 12pt;
			}
	
		}
	
		@media screen and (max-width: 736px) {
	
			p .footer-p {
				font-size: 11pt;
			}
	
		}
	
		@media screen and (max-width: 360px) {
	
			p .footer-p {
				font-size: 10pt;
			}
	
		}

