* {
	margin: 0;
	padding: 0;
	font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

html, body {
  height: 100%;   /* necesario si usas height:100% */
}

#menu-toggle {display: none;}

header {z-index: 999;  width: 100%; text-align: center; position: fixed; text-align: center; background: linear-gradient(to bottom, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 100%);}
header nav {display: flex; margin: 0 auto; max-width: 1280px; height: 160px; align-items: center; justify-content: center;}
#logo { width:340px; transition: all 0.3s ease; }
header nav a { align-items: center; justify-content: center; box-shadow: 0px 0px 5px #000; transition: background-color 0.5s ease, transform 0.3s ease; color: #000; font-weight: bold; text-decoration: none; border: solid 3px #ff4002; border-radius: 1em; padding: 5px 30px 5px 30px; margin: 20px;  background-color: #ff751f;}
header nav a:hover {background-color: #010101; color: #ff751f;}


section {
  display: flex; /* activa flexbox */
  justify-content: center; /* centra horizontalmente */
  flex-direction: column;  /* apila elementos uno debajo del otro */
  margin: 0 auto;
}

article {max-width: 1280px; margin: 0 auto;}

#principal {padding-top: 220px; vertical-align:bottom; background-image: url(imgs/bg-100.jpg); background-size:cover; background-position:center center;}
#principal .columnas {marbin-bottom: 0; padding-bottom: 30px;}

.fondo1 {
  background-image: url("imagen1.jpg");
}

.fondo2 {
  background-image: url("imagen2.jpg");
}

@keyframes cambiarFondo {
  0% { background-image: url("imgs/bg-1.png"); }
  50% { background-image: url("imgs/bg-2.png"); }
  100% { background-image: url("imgs/bg-1.png"); }
}

.fondo_cambia {
  animation: cambiarFondo 10s infinite;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

#sobre {background-color: #000; color: #fff; padding-top: 120px; padding-bottom: 120px;}

#sobre .item { padding:30px; border-radius:1em; background-color: #2b2b2b; text-align:center; vertical-align:center; color:#ff4002; }
#sobre .item {font-weight: bold; text-transform: uppercase;}
#sobre .item img {width: 50%; margin-bottom: 30px;}

.gap40 {gap: 40px; padding: 40px;}

#sobre h1 {
  text-align: center; 
  font-size: clamp(24px, 6vw, 44px);
}
#sobre h2 {
  text-align: center; 
  font-size: clamp(18px, 4vw, 36px);
}

#sobre h3 {
  text-align: center; 
  font-size: clamp(14px, 3vw, 28px);
}

#sobre p {
  text-align: center; 
  font-size: clamp(12px, 2vw, 22px);
}

#sobre .destacado {margin-top: 60px; padding: 60px; background-color: #ff4002; color: #2b2b2b; border-radius: 1em;}

.texto_derecha {text-align: right;}

.columnas {
  display: flex;              /* activa flexbox */
  justify-content: space-between; /* separa las columnas */
  align-items: center;        /* alinea verticalmente */
  gap: 20px;                  /* espacio entre columnas */
  padding: 30px;
  margin-bottom: 20px;
}

.columnas h2 {font-size: 40px;}
.columnas p {font-size: 20px;}
.columnas .col1 {flex: 1;}
.columnas .col2 {flex: 2;}

.al90 {width: 90%;}

#video {
      position: relative;
      height: 80vh;
      overflow: hidden;
}

#video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none; /* evita interacción con el video */
}

#banner_tickets {width: 60%; padding: 20px; background-color: #ff751f; border-radius: 1em; margin: 0 auto; box-shadow: 0px 0px 40px #000; text-align: center;}
#banner_tickets img {}
#banner_tickets h2 {}
#banner_tickets h3 {}
#banner_tickets p {margin-top: 30px;}
#banner_tickets button {transition: background-color 0.5s ease, transform 0.3s ease; background: #fff; color red; font-weight: bold; padding: 10px 80px; background-color: #ff4002; border: solid 2px #fff; border-radius:1em; color:#fff; font-size:16px; text-transform:uppercase; }
#banner_tickets button:hover { background-color:#000; }

#tickets {height: 60vh; width:100%; background-attachment:fixed; background-size: cover; background-position:center center; background-image: url('imgs/bg_tickets.jpg'); }

.lotes {margin: 0 auto; color: #fff; width: 60%; padding: 20px; text-align: center;}
.lotes .columnas {align-items: top; gap: 80px; }
.lotes h4 {text-transform: uppercase; background-color: #ff4002; padding: 4px 10px; border-radius:1em; margin-bottom:10px; }
.lotes p { font-size:24px; padding-bottom: 5px; margin-bottom: 20px; margin-top: 5px; border-bottom: 1px solid #fff;}

#speakers {width:100%; padding-top: 40px; margin:0 auto; background-color: #2b2b2b; color:#fff;}
#speakers h3 {margin-bottom: 20px;}
#speakers .flag {position: absolute; top: 10px; left: 20px;}
#speakers .flag img {width: 36px; }

.bx-wrapper {background: none !important; padding: 0; margin: 0; border: 0 !important;-moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;}

.bx-wrapper .bx-viewport {
    max-width: 1280px;
    margin: 0 auto;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: none !important; /* Optional: ensures no background color is causing issues */
}

#contacto {padding-top: 100px; height: 30vh; width:100%; background-attachment:fixed; background-size: cover; background-position:center center; background-image: url('imgs/bg_contacto.jpg'); }

#footer {height: 200px; background: #000; padding: 20px;}

/* Breakpoint para pantallas pequeñas */
@media (max-width: 768px) {

  #menu-toggle {display: block; font-size: 22px; position: fixed; top: 20px; right: 20px; color: #fff; z-index: 99999999;}
  
  #principal {padding-top: 150px;}

  .columnas {
    flex-direction: column;   /* apila las columnas */
    text-align: center;       /* opcional: centra el texto */
  }

  .col1 {
    flex: none;               /* evita que se estiren */
    width: 100%;              /* cada columna ocupa todo el ancho */
  }

  .col2 {
    flex: none;               /* evita que se estiren */
    width: 100%;              /* cada columna ocupa todo el ancho */
  }

  .imagen img {
    max-width: 90%;
    margin: 0 auto;           /* opcional: reduce un poco la imagen */
  }

  #logo { width:140px; transition: all 0.3s ease; }
  header nav {flex-direction: column; padding-top: 60px; padding-bottom: 30px; background-color: #000; border-radius: 1em;}
  header nav a { flex: none; width: 80%; }
  header nav .link {margin-bottom: 30px;}

  #principal .columnas {padding: 10px;}

  #tickets {height: auto; padding-top: 40px;}
  #banner_tickets {width: 80%; padding: 10px;}
  #banner_tickets h2 {font-size: 22px;}
  #banner_tickets h3 {font-size: 16px;}

  .lotes .columnas {gap: 20px;}

  #banner_tickets button {padding: 10px;}

  #sobre {padding-top: 40px; padding-bottom: 40px;}
  #sobre article {width: 90%; margin: 0 auto;}
  #sobre .destacado {overflow-wrap: break-word; hyphens: auto; padding: 20px;}
  #sobre .item img {width: 30%; margin-bottom: 10px;}
  .gap40 {gap: 20px; padding: 20px;}

  .img_speaker {width: 80%; margin: 0 auto;}
}