@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Variables globales */
  :root {
    --color-primary: #ff6600;
    --color-secondary-boton: #ffa060;
    --color--neutral--0: #ffffff;
    --color--principal-rojo-oscuro: #DB3C0B;
    --color--main-dark: #FF9D5C ;
    --radius-circle: 50%;
    --transition: all 0.3s ease-in-out;
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.15);
    --font-main: 'Montserrat', sans-serif !important;
    --Main-Neutral-H1: #222;
    --Main-Neutral-H2: #383B3B;
 
  }
  html {
    scroll-behavior: smooth;
  }



  body {
    font-family: 'Montserrat', sans-serif !important;
  }

  /* Botón primario naranja */
  a.btn-eventos-emp {
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 25px;
    color: var(--color--neutral--0);
    background: var(--gradiants-y-linear-gradiant-boton, linear-gradient(0deg, var(--color--principal-rojo-oscuro) 0%, var(--color-primary) 100%));
    border: 1px solid var(--color-primary);
  }

  a.btn-eventos-emp:hover {
    box-shadow: 2px 2px 3px 0px var(--color--main-dark);
    background: linear-gradient(180deg, var(--color--principal-rojo-oscuro) 0%, var(--color-primary) 100%);
    color: var(--color--neutral--0);
}


  section.hero.py-5 {
    margin-top: 2em;
    padding:2em 4em;

  }

  /* Hero */
  .heroColum {
    margin: 4em 0;
  }

  .hero h1 {
    color: var(--Main-Neutral-H1);
    font-size: 64px;
    line-height: 1;
    font-family: 'montserrat';
    font-weight: 900;

  }

  .hero p {
    color: var(--Main-Neutral-H2);
    max-width: 480px;
    margin: 1rem 0 4rem 0;
    font-size: 16px;
      font-family: 'montserrat';

  }


  /* conveciones */
  #convenciones h2{
    color: var(--Main-Neutral-H2);
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    text-align: right;
      font-family: 'montserrat';
          font-weight: 900;

    }
    #convenciones p{
        text-align: right;
          font-family: 'montserrat';

    }
    
    .bg-convenciones{
        background: #ebf9fc;
        padding: 4em;
        border-radius: 36px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
    }
    
  /* Carrusel servicios _______________________________________________________ */
  :root {
    --shadow-soft: 0 8px 6px rgba(0, 0, 0, .10);
  }

  .productos-swiper .swiper-button-prev {
    left: 0 !important;
    /* sácala hacia afuera */
  }

  .productos-swiper .swiper-button-next {
    right: 0 !important;
  }

  /* ----- */
  .swiper-slide,
  swiper-slide {
    display: flex !important;
    justify-content: center !important;
  }

  .container {
    overflow: visible;
  }

  .swiper,
  swiper-container {
    height: 380px !important;
    padding: 2em 0;
  }

  /* Título */

  .productos .text-primary {
    color: var(--color-primary) !important;
      font-family: 'montserrat';

  }

  /* Card */
    section#serviciosEmpresa {
    padding: 8em 2em ;
  }

  .producto-card {

    /* background: #fff; */
    /* border-radius: 1rem; */
    /* box-shadow: var(--shadow-soft); */
    overflow: hidden;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content:end;
    text-align: right;
      font-family: 'montserrat';


  }

  .producto-card img {
    width: auto;
    height: 224px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }

  .producto-card .card-body {
    padding: 1.25rem 1.25rem 1.5rem;
      font-family: 'montserrat';

  }

  .producto-card h5 {
    font-weight: 600;
    margin-bottom: 0.85rem;
      font-family: 'montserrat';


  }


  /* Flechas Swiper */
  .productos-swiper .swiper-button-prev,
  .productos-swiper .swiper-button-next {
    width: 46px;
    height: 46px;
    /* border-radius: 50%;
    border: 2px solid var(--color-primary);
    background: var(--color-primary); */
    /* box-shadow: var(--shadow-soft); */
  } 

  .productos-swiper .swiper-button-prev::after,
  .productos-swiper .swiper-button-next::after {
    font-size: 40px;
    color: var(--color-primary);
  }

  .productos-swiper .swiper-button-prev {
    left: -8px;
  }

  .productos-swiper .swiper-button-next {
    right: -8px;
  }

  /* Paginación (bolitas) */

  .productos-swiper .swiper-pagination-bullet {
    background: var(--color-primary);
    opacity: .4;

  }

  .productos-swiper .swiper-pagination-bullet-active {
    opacity: 1;
  }


  /* plaza de eventos */
  .plaza-eventos {
  text-align: left;
  padding: 60px 20px;
  max-width: 1200px;
  margin: auto;
}

.plaza-eventos h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-family: 'montserrat';
  color: #333;
  font-weight: 900;
}

.plaza-eventos p {
  color: #555;
  margin-bottom: 40px;
    font-family: 'montserrat';

}

.cards {
  
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;padding: 15px !important;
}

.img-container {
  overflow: hidden;
}

.img-container img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}
.card h3 {
    margin-top: 15px;
      font-family: 'montserrat';
          font-weight: 900;

}

.card:hover .img-container img {
  transform: scale(1.1);
}

/* Opcional: animación de elevación */

.card:hover {
  transform: translateY(-6px);

}
 
  

  /* porque */
    .benefit{
    display: flex;
    height: 80px;
    }

    #benefit h2 {
    color: var(--Main-Neutral-H2);
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    text-align: left;
      font-family: 'montserrat';

    }

    .benefit img {
        width: 40px;
        height: 40px;
        display: flex;
        margin-right: 2em;
    }
    .bg-benefit {
        background: #ebf9fc;
        padding: 4em;
        border-radius: 36px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
    }

     /* serviciosExpositor */
  .serviciosExpositor {
  text-align: center;
  padding: 60px 20px;
  max-width: 1200px;
  margin: auto;
}

.serviciosExpositor h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  font-family: 'montserrat';
  color: #333;
  font-weight: 900;
}

.serviciosExpositor p {
  color: #555;
  margin-bottom: 40px;
    font-family: 'montserrat';

}

.cards-serviciosExpositor {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.card-serviciosExpositor {
  background: #fff;
  overflow: hidden;
  width: 320px;
}

.img-container-serviciosExpositor  {
  overflow: hidden;
}

.img-container-serviciosExpositor img {
  width: 100%;
  height: auto;
border-radius: 12px;}
.card-serviciosExpositor h3 {
    margin-top: 15px;
      font-family: 'montserrat';
          font-weight: 900;
          text-align: right;
}
.card-serviciosExpositor p {
      font-family: 'montserrat';
          text-align: right;

}

/* Opcional: animación de elevación */

.card:hover {
  transform: translateY(-6px);

}

/* maps */
.sedes {
    background-color: #113158;
    padding: 50px 0;
    border-radius: 10px 10px 0 0;
}
.sedes h2{
    color: white;
    font-size: 3rem;
    font-weight: bold;
    line-height: 1;
    font-family: 'montserrat';
}
.sedes p {
    color: white;
    font-size: 16px;
    line-height: 1;
    font-family: 'montserrat';
}
.t-sedes a {
    background-color: #ff6600;
    display: inline-block;
    padding: 7px 20px;
    border-radius: 30px;
    margin-top: 10px;
    color: white;
    font-size: 16px;
    transition: 0.5s;cursor: pointer;
}
.t-sedes a:hover {
    background-color: #13a6b2;
    transform: scale(105%);
    color: white;
}
.sedes .map iframe {
    border-radius: 10px;
}
 
  


    /* responsive */

    @media (max-width: 768px) {
        .producto-card img {
        height: 150px;
        }
            .sedes .map iframe {
        border-radius: 10px;
        width: auto;
        height: 250px;
    }
    }
    
  @media (max-width: 576px) {

      /* Hero */
    .hero h1 {
      font-size: 54px;
      line-height: 1 !important;
    }
    section.hero.py-5 {
      height: 840px;
          padding: 4em 0;
    }

    /* convenciones */
    .producto-card img {
      height: 140px;
    }

  }