:root {
	--pink-primary   : #4EBBDE;
	--pink-secondary : #FF4D70;
	--white-nav-a    : white;      
}

html {
  scroll-behavior: smooth;
}

header nav {
	background: var(--pink-primary)!important;
}

header nav ul li a {
	font-family: 'Avenir Regular';
	color: var(--white-nav-a)!important;
}

h1 {
	font-family: 'Gobold Extra1';
	color: var(--pink-primary)!important;
	font-size: 2em;
}

h2 {
	font-family: 'Gobold Extra1';
	color: var(--pink-primary);
}

h3 {
	font-family: 'Gobold Extra1';
	color: var(--pink-primary);
}

p, span, label {
	font-family: 'Avenir Regular';
}

@media (min-width: 576px) { 
	h1 {
		font-size: 3em;
	}

	h2 {
		font-size: 2em;
	}


	h3 {
		font-size: 1.5em;
	}
}

a.follow-link, span.follow-link {
	color: rgb(253, 221, 0)!important;
}

a.follow-link:hover {
   text-decoration: none;
}

a.follow-link svg  {
	fill: rgb(253, 221, 0)!important;
	width: 30px!important;
	height: 30px!important;
}

.hero-header {
	background-image: url('../images/hero/mobile.webp');
	background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  height: 400px;
}

@media (min-width: 576px) { 
	.hero-header {
		background-image: url('../images/hero/desktop.webp');
		background-size: cover;
		background-position: center center;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

	.hero-header {
		height: calc(100vh - 600px);
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.hero-header {
		height: calc(100vh - 600px);
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.hero-header {
		height: 800px;
	}
}

/* --- BOTÓN FIJO (Comportamiento Scroll) --- */
.btn-sponsor-fijo {
  position: fixed;
  top: 120px;
  right: 15px;
  z-index: 1000; /* Asegura que quede por encima de todo */
  background-color: #FF4D70; /* Color azul de la imagen */
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: 'Gobold Extra1', sans-serif;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: transform 0.2s ease;
  text-align: center;
}

.btn-sponsor-fijo:hover {
  transform: scale(1.05);
  color: white;
}

@media (min-width: 768px) { 

	.btn-sponsor-fijo {
		font-size: 2em;
	}

}



/*************************/

.container-image-full {

	position: relative;
  width: 100%;
  height: 950px; /* Altura adaptable para móviles */
  overflow: hidden;
  background-color: #222;

}

.container-image-full img {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  /*filter: brightness(0.7);*/
}


.caption-text {
	width: 90%;
	z-index: 10;
	position: relative;
	top: calc(20%);
	left : calc(10%);
	/*border: 1px solid black;*/
	text-align: right;
	padding: 30px;
}

.overlay {
	background: #0b010138;
}


@media (min-width: 767.98px) {
	.caption-text{
		width: 45%;
		top: calc(25%);
		left : calc(50%);
	}

	.overlay {
		background: none;
	}
}


/*************************/

.object-fit-cover {
  object-fit: cover;
  object-align: center;
}

.gallery-wrapper {
  position: relative;
}

.floating-flower {
  position: absolute;
  bottom: 70%;
  left: 0;
	z-index: 10;
	pointer-events: none;
}

/* Opcional: En pantallas móviles muy chicas puedes reducir su tamaño o centrarla */
@media (min-width: 767.98px) {
  .floating-flower {
  	bottom: 100%;
		left: 100%;
		transform: translate(-50%, 50%);
  }
}


/* --- ESTILOS BASE MÓVIL (Por defecto) --- */
.galeria-personalizada {
  background-color: var(--pink-primary); /* Fondo rosa idéntico */
  padding: 30px 0;
  position: relative;
}


.carousel-item img {
	border-radius: 18px;
}


/* En móvil la imagen central ocupa casi todo el ancho */
.img-principal {
  width: 90%;
  max-width: 500px;
}

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

/* --- CONTROLES DE LAS FLECHAS CIRCULARES --- */
.flecha-circular {
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid #ffffff;
  color: #ffffff;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
  transition: background 0.3s;
}

.carousel-control-prev, .carousel-control-next {
  opacity: 1; /* Hace las flechas visibles todo el tiempo */
  width: 10%; /* Ajusta la zona de clic */
}

.carousel-control-prev:hover .flecha-circular,
.carousel-control-next:hover .flecha-circular {
  background-color: rgba(255, 255, 255, 0.5);
}


/* --- COMPORTAMIENTO ESCRITORIO (A partir de 768px) --- */
@media (min-width: 768px) {
  
  /* Distribución de tamaños: 20% izquierda - 60% centro - 20% derecha */
  .img-lateral {
    width: 20%;
    height: 400px; /* Define una altura fija para un encuadre perfecto */
    overflow: hidden;
    opacity: 0.6; /* Opacidad reducida para las fotos de los lados */
  }

  .img-principal {
    width: 60%;
    max-width: 800px;
    height: 600px;
    overflow: hidden;
    padding: 0 15px; /* Separación entre imágenes */
  }

  /* Forzamos a que todas las imágenes llenen sus cajas sin deformarse */
  .img-lateral img, .img-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }
}

#infinit.carousel {
	margin: 0 auto;
	padding: 20px 0;
	width: 100%;
	overflow: hidden;
	display: flex;
}

#infinit.carousel .card {
    width: 100%;
    color: white;
    padding: 20px;
    font-size: xx-large;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    border: none!important;
}

#infinit.carousel {
/* ... */
	> * {
	  flex: 0 0 100%;
	}
}

  /* Agrupando las tarjetas para una mejor estructura. */
.group {
	display: flex;
	gap: 20px;
	/* Agrega padding a la derecha para crear un espacio entre la última y la primera tarjeta. */
	padding-right: 20px;
}

.group {
	/* ... */
	will-change: transform; /* Deberíamos ser amables con el navegador: hazle saber qué vamos a animar. */
	animation: scrolling 120s linear infinite;
}

@keyframes scrolling {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(-100%);
	}
}

#infinit.carousel {
	/* ... */
	&:hover .group {
	  animation-play-state: paused;
	}
}

.bg-rounded {
	border-radius: 25px;
}

.bg-player {
	background: var(--pink-primary);
}

.image-rounded {
	border-radius: 25px;
}


/*
Gallery
*/
.festival-gallery{
	padding:0;
}

.festival-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #ddd;
  height: 100%;
}

.festival-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Alturas */
.festival-card--hero{
  min-height: 760px;
}

.festival-card--sm{
  min-height: 360px;
}

/* Separación similar a la imagen */
.festival-gallery .row{
  margin-left: -12px;
  margin-right: -12px;
}

.festival-gallery .row > [class*="col-"]{
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 24px;
}

/* Responsive */
@media (max-width: 991.98px){
  .festival-card--hero{
    min-height: 520px;
  }

  .festival-card--sm{
    min-height: 260px;
  }
}

@media (max-width: 767.98px){
  .festival-card--hero,
  .festival-card--sm{
    min-height: 280px;
  }
}
/*
Gallery
*/


/*
Overides
*/
.btn {
	border-radius: 25px!important;
}

.btn-primary {
	
	background: #63c0df!important;
	border-color: #63c0df!important;
}


/*
Event Banner
*/


.event-banner{
	background:#e53492;
	min-height:190px;
	overflow:hidden;
	position:relative;
}

.event-title-left,
.event-title-right{
	position:relative;
	z-index:4;
	font-size:2rem;
	line-height:1.35;
}

.event-title-left{
	text-align:center;
}

.event-title-right{
	font-size:1.15rem;
}

/* Figura izquierda */
.event-shape-left{
	position:absolute;
	left:-55px;
	top:-8px;
	width:150px;
	height:150px;
	z-index:1;
}

.event-shape-left .outer-circle{
	position:absolute;
	width:150px;
	height:150px;
	border-radius:50%;
	background:#f7dd00;
	display:block;
}

.event-shape-left .inner-circle{
	position:absolute;
	width:90px;
	height:90px;
	border-radius:50%;
	background:#e53492;
	left:22px;
	top:28px;
	display:block;
	box-shadow: -18px 0 0 0 #e53492;
}

/* Estrella detrás */
.event-star{
	position:absolute;
	left:50%;
	top:50%;
	width:320px;
	transform:translate(-50%, -50%);
	z-index:1;
	pointer-events:none;
}

.event-star img{
	width:100%;
	display:block;
}

/* Imagen central */
.event-artist{
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	width:290px;
	z-index:3;
}

.event-artist img{
	width:100%;
	height:auto;
	display:block;
}

@media (max-width: 991.98px){
	.event-banner{
	  min-height:auto;
	  padding:40px 0 180px;
	}

	.event-star{
	  width:250px;
	  top:auto;
	  bottom:10px;
	  transform:translateX(-50%);
	}

	.event-artist{
	  width:180px;
	}

	.event-title-left,
	.event-title-right{
	  text-align:center;
	}

	.event-title-left{
	  font-size:1.7rem;
	  margin-bottom:1rem;
	}

	.event-title-right{
	  font-size:1rem;
	}
}

@media (max-width: 575.98px){
	.event-banner{
	  padding:30px 15px 160px;
	}

	.event-title-left{
	  font-size:1.4rem;
	}

	.event-title-right{
	  font-size:.95rem;
	  line-height:1.6;
	}

	.event-artist{
	  width:220px;
	}
}
/*
Event Banner
*/


form#contact label {
	color: white;
	font-weight: bold;
}


/* ==========================================================================
   ESTILOS DEL LOADER Y MODAL (Norsan Media Identity)
   ========================================================================== */
  .overlay-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .overlay-container.active { opacity: 1; pointer-events: auto; }

  .spinner {
    width: 50px; height: 50px;
    border: 5px solid #f3f3f3; border-top: 5px solid #1373c8;
    border-radius: 50%; animation: spin 1s linear infinite;
  }
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

  .status-modal {
    background-color: white; padding: 30px; border-radius: 8px;
    max-width: 400px; width: 90%; text-align: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    transform: scale(0.8); transition: transform 0.3s ease;
  }
  .overlay-container.active .status-modal { transform: scale(1); }

  .modal-icon { font-size: 45px; margin-bottom: 15px; display: inline-block; }
  .modal-title { margin: 0 0 10px 0; font-size: 20px; font-weight: bold; color: #1e293b; }
  .modal-desc { margin: 0 0 20px 0; font-size: 14.5px; color: #64748b; line-height: 1.5; }

  .modal-close-btn {
    padding: 10px 24px; border: none; border-radius: 4px; color: white;
    font-weight: 600; cursor: pointer; font-size: 14px; transition: background-color 0.2s;
  }

  /* Modificadores de estado de respuesta */
  .success-ui .modal-icon { color: #10b981; }
  .success-ui .modal-close-btn { background-color: #10b981; }
  .success-ui .modal-close-btn:hover { background-color: #059669; }

  .error-ui .modal-icon { color: #ef4444; }
  .error-ui .modal-close-btn { background-color: #ef4444; }
  .error-ui .modal-close-btn:hover { background-color: #dc2626; }