:root {
  --blue: #4a77bb;
  --altBlue: #4d7bb9;
    /* --gold: #ecc251;
  --light: #eee;
  --dark: #222; */

  --dark: #1a171b;
  --gold: #fecc00;
  --light: #fff;
  
  --oro: #efc346;
  --plata: #9b9d9e;
  --bronce: #d0945f;
  --apoyan: #2780fe;
  
  --p-small: 1rem;
  --p-medium: 2rem;
}



* { box-sizing: border-box; margin: 0; padding: 0; }

/* html {
  scrollbar-gutter: stable both-edges;
} */


img { max-width: 100%; }

body {
  /* overflow: scroll; */
  font-family: Rambla, sans-serif;
  background-color: var(--dark);
  color: var(--light);
}

body.modal-open {
    padding-right: 0 !important;
}


.container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.5rem 0;
  display: flex;
  flex-direction: row;
  /* border-bottom: 1px solid var(--blue); */
}

@media screen and (max-width: 1350px) {
  .container {
    padding: 1.5rem;
  }
}

.centered {
  text-align: center;
}

.section-title {
  margin: 0rem auto;
  max-width: 1300px;
  padding: 0 1.5rem;
  display: flex;
}

/*==== typography ====*/
h2 {
  font-size: 2.4rem;
  font-weight: normal;
  margin-bottom: 1.5rem;
}

p {
  font-size: 1.2rem;
  font-weight: normal;
  margin-bottom: 1.5rem;
}

.location {
  transition: all .3s ease-in-out;
}

.location.small {
  font-size: 12px;
}

/*==== cabezal ====*/

img.logo {
  max-width: 10rem;
  transition: all .3s ease-in-out;
}

img.logo.small {
  max-width: 8rem;
  padding-top: .6rem;
}

header {
  color: var(--light);
  background: var(--blue);
  border-bottom: 3px solid var(--gold);
  width: 100%;
  position: fixed;
  z-index: 1000;
}

header .container {
  justify-content: space-between;
  transition: all .3s ease-in-out;
}

header .container.small {
  padding: .7rem 1rem 1rem;
}

.header-info, .expo {
  display: grid;
}

.header-info {
  grid-template-columns: 30px 1fr;
  margin-top: 9px;
  /* padding-left: 12rem; */
}

.header-info img {
  max-width: 20px;
}

#intro {
  display: flex;
  flex-direction: column;

  background-image: 
    linear-gradient(to bottom, rgba(26,23,27,.8) 0%, rgba(26,23,27,.8) 100%),
    url('../imgs/layout/foto-foro-25.jpg');
  background-position: center center;
  background-size: cover;

  border-bottom: 3px solid var(--gold);
  padding-top: 12rem;
  margin-bottom: 4rem;
}

.info-evento {
  width: 60%;
}

.evento-2025 {
  width: 40%;
  padding: 74px 0 0 2rem;
  text-align: center;
}

.evento-2025 video {
  margin: 0 0 2rem;
  border-radius: 12px;
}
 
.row {
  padding-bottom: 2rem;
}

.enlaces {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 1rem;
}

footer {
  border-bottom: 1rem solid var(--gold);
  padding-bottom: 2rem;
}

footer .contenedor {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.instituciones {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2rem;
  height: 100%;

  div {
    display: flex;
    justify-content: center;
    height: 100%;

    img {
      max-width: 100% !important;
    }
  }
}
.instituciones-logos {
  align-items: center;
}
.instituciones-logos div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.organiza {
  background-color: var(--blue);
  width: 100%;
  padding-bottom: 2rem;
}

.apoyan {
  padding-top: 3rem;
}

.instituciones img {
  margin: 2rem;
  /*height: 30px;
  margin-right: 32px;
   transform: scale(.7);
  transform-origin: left; */
}

@media screen and (max-width:660px ) {
  .instituciones-logos {
    flex-direction: column;
  }
  .instituciones img {
    margin-left: 0;
  }
}

button {
  max-width: 20rem;
  border-radius: 30px;
  border: none;
  padding: .5rem 2rem;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: .5rem;
  font-size: 1rem;
  margin-bottom: 1rem;
}

button.gold { background-color: var(--gold); transition: all .2s ease-in-out;}
button.gold:hover { background-color: var(--gold); transform: scale(1.1);}
button.accent { background-color: var(--blue); transition: all .2s ease-in-out;}
button.accent:hover { background-color: var(--blue); transform: scale(1.1);}
button.inscripcion { background-color: var(--altBlue); transition: all .2s ease-in-out;}
button.inscripcion:hover { background-color: #518dce; transform: scale(1.1);}

.enlaces button {
  width: 250px;
}

button a {
  text-decoration: none;
  color: black;
}

.video-container {
  position: relative;
  max-width: 1500px;
  /* min-height: 60vh; */
  margin: 1rem auto 2rem;
  padding: 0 3rem;
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}

#loader {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
#loader.hidden {
  opacity: 0;
}

#loader span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #62D470; /* color de los puntos */
  opacity: .2;
  animation: pulse 1.2s infinite ease-in-out;
}

#loader span:nth-child(1) {
  animation-delay: 0s;
}

#loader span:nth-child(2) {
  animation-delay: .2s;
}

.loader span:nth-child(3) {
  animation-delay: .4s;
}

.loader span:nth-child(4) {
  animation-delay: .6s;
}

@keyframes pulse {
  0%, 100% {
    opacity: .2;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

video {
  box-shadow: 0px 4px 41px black;
  border: none;
  border-radius: 20px;
  border: transparent;
  background-color: transparent;
}

#miVideo {
  opacity: 0;
  transition: opacity .3s ease-in;
}

#miVideo.visible {
  opacity: 1;
}

@media screen and (max-width: 900px) {
  button {
    font-size: .9rem;
  }
  .video-container {
    padding: 1rem
  }
}

@media screen and (max-width: 850px) {
  .location {
    font-size: 10px;
  }

  p {
    font-size: 1rem;
  }

  img.logo {
    max-width: 6rem ;
  }

  button {
    font-size: .9rem;
  }

  .info {
    flex-direction: column;
  }

  #intro {
    padding: 12rem 0;
  }

  #intro .container {
    flex-direction: column;
  }
  
  .info-evento {
    border-bottom: 2px solid var(--gold);
  }
  
  .info-evento,
  .evento-2025 {
    width: 100%;
  }

  .evento-2025 {
    padding-top: 34px;
  }

  .evento-2025, .enlaces {
    padding-left: 0;
  }

  .container.organizan {
    flex-direction: column;
  }

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

  .organizan .left div,
  .organizan .right div {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: center;
    height: auto;

    padding-top: 18px;
    margin-bottom: 18px;
  }

  .organizan .left div {
    flex-direction: column;
    align-items: center;
  }

  .organizan img {
    /* height: 30px; */
    margin-bottom: 22px;
    margin-right: 0;
  }

  .organizan .right {
    margin: 0 0 0 0rem;
  }

  .location {
    width: 60%;
  }

  header {
    height: auto;
  }

}

/*==== agenda ====*/

#agenda .container {
  flex-direction: column;
  padding-bottom: var(--p-medium);
  border-bottom: 1px solid var(--accent);

  h2 {
    background: url('../imgs/icon-calendario.png') center right no-repeat;
    background-size: 3%;
  }
}

.expo {
  grid-template-columns: 60px 1fr;
  margin-bottom: .5rem;
  padding: .3rem 0 .6rem;
  border-bottom: 1px solid #3d3c3f;
}

.hora {
  font-weight: bold;
}

.descripcion {
  line-height: 1.4;
}

/*==== sponsors ====*/

/* --oro --plata --bronce */

h2 {
  color: var(--blue);
}

#sponsors h3 {
  display: inline-block;
  text-transform: uppercase;
  color: var(--light);
  padding: .4rem 2.2rem;
  border-radius: 30px;
}

h3.oro { background-color: var(--gold); }
h3.plata { background-color: var(--plata); }
h3.bronce { background-color: var(--bronce); }
h3.apoyan { background-color: var(--apoyan); color: var(--light); }
h3.media-partner { background-color: #333; color: var(--light); }


#sponsors {
  background-color: white;
  padding: 1.5rem 0 3rem;

  .container.flex {
    align-items: start;
    padding: 0;

    h2 {
      margin: 0;
      padding: 0;
    }

    .right {
      text-align: right;
      padding-top: .5rem;
    }
  }
}
.sponsors-logos {
  max-width: 1000px;
  display: flex;
  justify-content: center;
  padding-top: 2.5rem;
  margin-bottom: 5rem;

  flex-wrap: wrap;
  
  .sponsor-logo {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sponsor-logo {
    padding: 0 2.5rem;
    .usa {
      /* margin-right: 3rem; */
    }
  }
  .sponsor-logo.observa {
    flex-direction: column;
    a {
      margin-bottom: 2rem;
    }
  }
}

.sponsor-logo img {
  min-width: 0; 
  height: auto;
  object-fit: contain;
  margin-bottom: 2rem;
  transition: all .2s ease-in-out;
  /* transform: scale(60%); */
}

.sponsor-logo img:hover {
  transform: scale(1.1);
}

img#latu {
  margin-right: 2rem;
}

img#usa {
  margin-left: 3rem;
}

img#audico {
  margin-left: 4rem;
}

img#afap {
  max-width: 75px;
}

img#btg-pactual {
  max-width: 175px;
}

img#ibf-negocios {
  max-width: 205px;
}

img#balanz {
  max-width: 150px;
}

img#bavarian {
  max-width: 320px;
}

img#media-tech {
  max-width: 125px;
}

img#salus {
  max-width: 110px;
}

img#guyer {
  max-width: 180px;
}

img#pwc {
  max-width: 150px;
}

img#conaprole {
  max-width: 150px;
}

.animar-entrada {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition-delay: var(--delay, .1s);
}

.animar-entrada.activo {
  opacity: 1;
}

@media screen and (max-width: 800px) {
  .sponsors-logos {
    flex-direction: column;
    margin-bottom: 2rem;
    img {
      margin-bottom: 2rem;
    }
  }
  img#usa, img#latu {
    max-width: 100px;
  }
  img#latu {
    margin-right: 0;
  }
  img#bid {
    max-width: 170px;
  }
  img#usa, img#audico {
    margin-left: 0;
  }
  img#draper {
    max-width: 180px;
  }
  img#guyer {
    max-width: 180px;
  }

}



/*==== speakers ====*/
#speakers .section-title h2 {
  background: url('../imgs/icon-speakers.png') center right no-repeat;
  background-size: 30px;
  /* background-color: yellow; */
  width: 100%;
}

#speakers .container {
  /* padding-bottom: var(--p-medium); */
  border-bottom: 1px solid var(--blue);

  h2 {
    /* background-size: 3%; */
  }

  .card-speaker {
    width: 25%;
    max-width: 250px;
    min-width: 205px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease-in-out;
    padding: 2rem 0 .5rem;
    border-radius: 20px;

    .card-pic {
      text-align: center;
      display: flex;
    }

    .card-pic img {
      /* transform: scale(45%); */
      text-align: center;
      max-width: 140px;
      margin: 0 auto .5rem;
      border-radius: 50%;
      border: 4px solid white;
    }
    
    .card-info {
      margin-bottom: 1rem;
      text-align: center;
    }
  }

  .card-speaker:hover {
    transform: scale(.95);
    background: #111;

  }

  .modal-dialog { width: 65%; max-width:700px }
  .modal-content { background: #232323; color: white; }
  .modal-body { padding: 1.5rem }
  .modal-body img {
    border-radius: 50%;
    border: 4px solid white;
    margin: 1.5rem auto;
    max-width: 160px;
  }
  .modal-header {
    border-bottom: 2px solid var(--blue);
  }
  .modal-footer {
    border-top: 2px solid var(--blue);
  }
  .modal-header .btn-close { color: white }
  .modal-footer { justify-content: center; }
    
    .btn-primary:hover { cursor: pointer; }
    
    .speakers-container { 
      display: flex; 
      flex-wrap: wrap;
      width: 100%;
    }

    .card-speaker {
      margin-bottom: 2.75rem;
    }

    .card-pic {
      display: flex;
    }
    
    .card-name h3 {
      font-size: 1.3rem;
      text-align: center;
    }

    .card-name h3.twenty {
      font-size: 20px !important;
    }

    .card-flag img {
      max-width: 50px;
      margin-bottom: 1rem;
    }
    
    button.btn-primary,
    button.btn-secondary {
      border-radius: 30px;
      font-size: .8rem;
      padding: 6px 16px;
      background-color: var(--blue) !important;
    }

    button.btn.btn-secondary {
      background-color: var(--blue) !important;
    }

    button.btn.btn-secondary:hover {
      background: #5488d6 !important;
    }

    @media screen and (max-width: 500px) {
      .card-speaker {
        max-width: 60%;
        margin: auto;
      }
    }
    
    @media screen and (max-width: 600px) {
      #speakers .container .card-speaker {
        width: 50%;
      }
    }

    @media screen and (max-width: 790px) {
      #speakers .container {

       .card-speaker {
        width: 33.33%;
      }
    }
  }
}

/*==== donde ====*/

#ubicacion {
  padding-bottom: 1.5rem;

  h2 {
    background: url('../imgs/icon-ubicacion.png') center right no-repeat;
    background-size: 3%;
  }
  p { margin-bottom: 1.5rem;}
}

#ubicacion .container {
  flex-direction: column;
  /* padding: 1.5rem 0; */
}

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.left, 
.right {
  width: 49.8%;
}

#ubicacion .container .container.flex .left {
  padding-right: 2px;
  width: 50%;
  img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
}

#ubicacion .container .container.flex .right {
  padding-left: 2px;
  width: 50%;
}

@media screen and (max-width: 660px) {
  #ubicacion .container {
    padding: 1.5rem;
  }

  .flex-container {
    flex-direction: column;
    padding: 0;
    .left, 
    .right {
      width: 100%;
    }
    .left {
      margin-bottom: 4px;
    }
    .right {
      margin-left: -2px;
      height: 260px;
    }
  }
}