@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Sora:wght@100..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* Fila */
body{
  color: #2D3748;
}
.column-11 a {
    color: #2D3748;
    text-decoration: initial;
}
body > header > div > div.logo.utel {
    max-width: 80px !important;
}
h3{
  font-size: 22px;
}
p{
    font-size: 18px;
}
#primer_div a {
    color: #FFB937 !important;
    text-decoration: initial;
    
}
.fondo-verde {
  background: rgba(18,136,7,1);
  background: -moz-linear-gradient(left, rgba(18,136,7,1) 0%, rgba(18,199,8,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(18,136,7,1)), color-stop(100%, rgba(18,199,8,1)));
  background: -webkit-linear-gradient(left, rgba(18,136,7,1) 0%, rgba(18,199,8,1) 100%);
  background: -o-linear-gradient(left, rgba(18,136,7,1) 0%, rgba(18,199,8,1) 100%);
  background: -ms-linear-gradient(left, rgba(18,136,7,1) 0%, rgba(18,199,8,1) 100%);
  background: linear-gradient(to right, rgba(18,136,7,1) 0%, rgba(18,199,8,1) 100%);
  padding: 16px;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
} 

.showDesktop {
  display: block;
}

.showMobile {
  display: none;
}

formb{
  height: 400px;
  background-color: white;
  display: block;
  border-radius: 10px;
}
formb{
  .nombreCompleto{
    margin-top: 20px;
  }
}


img.img-fluido.log_utel {
    max-width: 55px;
    margin-bottom: -8px;
}
div#formFemsa {
    text-align: left;
}
div#formFemsa button {
    margin: auto;
    display: block;
}
.boton-primario, #formFemsa_mov button{
  font-family: "Inter", sans-serif;
  color: #fff;
  background-color: #FFB937;
  border-color: #FFB937;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
}
.align-center{
  text-align: center !important;
}
.cards{
  h3{
    font-size: 36px;
  }
}
p.alianza {
    line-height: 36px;
    font-size: 35px;
    margin-top: 0;
}
p.alianza b {
    font-size: 1.3em;
}
div#maes .fila a,div#lic .fila a {
    pointer-events: none;
}
.navbar{
  position: fixed;
  width: 100%;
  padding: 0;
}
.navbar a.boton.boton-primario {
    float: right;
    margin-left: auto;
    height: 22px !important;
    position: relative;
    display: block;
    margin-top: 0 !important;
    align-items: center;
    display: flex;
}
body > div.bloque3 > footer > div > div:nth-child(2) {
    margin-right: 20px;
}
label.field-required.form-check-label {
    text-align: left;
    font-size: 13px;
}
.cards{
  .fila{
    margin-right: 90px;
    flex-wrap: nowrap;
    flex-direction: row;
  }
}
  .fila {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }
  
  /* Columna */
  .column-md {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
  .column-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}

  /* Centrado de texto */
  .centrado {
    text-align: center;
  }

  /* Texto en negrilla */
  .negrita {
    font-weight: bold;
  }


  

  /* Cards */
  .card {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
  }

  /* Campos de formulario */
  #formFemsa input,#formFemsa select,#formFemsa_mov input,#formFemsa_mov select{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .form-check.checkbox input {
    max-width: 20px !important;
}
header.navbar.contenedor .logo {
    max-width: 70px;
}
label.field-required.form-check-label {
    width: 100% !important;
    position: relative;
    display: block;
    margin-bottom: 1rem !important;
}
.iti.iti--separate-dial-code {
    width: 100%;
    margin-bottom: .5rem;
}
input.formio-select-autocomplete-input {
    height: 0px !important;
    margin: 0px !important;
    padding: 0px !important;
}
  /* Columnas */
  .column-6 { -webkit-box-flex: 0;flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); }
  .column-8 { -webkit-box-flex: 0;flex: 0 0 calc(66.6% - 30px); max-width: calc(66.6% - 30px); }
  .column-12 { -webkit-box-flex: 0;flex: 0 0 100%; max-width: 100%; }

  /* Estilos de botones */
.boton, #formFemsa button{
  font-family: "Inter", sans-serif;
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Estilo de botón primario */
.boton-primario, #formFemsa button{
  font-family: "Inter", sans-serif;
  color: #171923;
  background-color: #FFB937;
  border-color: #FFB937;
  font-size: 18px;
  font-weight: bold;
}

/* Estilo de botón secundario */
.boton-secundario {
  color: #2D3748;
  background-color: #FFB937;
  border-color: #FFB937;
  font-weight: bold;

}

#bloque2 {
  margin-top: 12%;
  .tarjeta{
    padding: 0 1rem;
    .column-12.column-md-8{
      h2{
        font-size: 32px;
      }
      p{
        font-size: 25px;
      }
      a{
        font-size: 25px;
        margin-bottom: 4%;
      }
    }
  }
}

.tarjeta.fila {
    text-align: initial;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
.padt-5{
  padding-top: 5px;
}

.header-card{
  text-align: left;
  padding: 1rem;
}
.column-11 {
    width: 85%;
    text-align: left;
}
.column-1 {
    width: 10%;
}
.im1{ background-image: url('assets/filtro.jpg'); }
.im2{background-image: url('assets/filtro2.jpg');}
.im3{background-image: url('assets/filtro3.jpg');}
.im4{background-image: url('assets/filtro4.jpg');}

.tarjeta .fila {
    margin-top: 0.25rem;
    margin-left: initial !important;
    margin-right: initial !important;
}
.tarjeta .fila .column-11 {
    margin-top: 3px !important;
    margin-left: 10px;
    font-size: 14px;
    line-height: 20px!important;
}

.header-card h3{
  color: white;
  font-size: 22px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
}

.tarjeta icon img {
    width: 40px !important;
}
/* Estilo de botón de éxito */
.boton-exito {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

/* Estilo de botón de peligro */
.boton-peligro {
  color: #fff;
  background-color: #FFB937;
  border-color: #FFB937;
}
 /* Estilos de navbar */
  .navbar {
    background-color: white;
    
    .fila{
      align-items: center;
      width: 100%;
    }
  }
  .img-fluido{
    width: 180px;
    height: auto;
  }

  /* Estilos de logo */
  .logo{
    max-width: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 15px;  }

  /* Estilos de botón de registro */
  .registro-btn {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
  }
  .contenedor {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Estilos de contenedor fluido personalizado */
.contenedor-fluido {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.filtros.fila.texto-center {
    text-align: center;
    display: block;
}
.filtros button{
  font-size: 14px;
  border: 1px solid #FFB937;
  padding:  .7rem 1.2rem;
  border-radius: 20px;
  cursor: pointer;
  background-color: white;
}
.filtros button.active{
  border: 2px solid #FFB937;
  background:#FFB9374D;
}
.pax-15 .fila {
  width: 80%;
  margin: auto;
}

/* Media queries para contenedor */
@media (min-width: 576px) {
  .contenedor {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  
  .cards{
    .fila{
      margin-right: 0 !important;
    }
  }

/* #primer_div > div > div > div.column-md-8.izq > div > div > div:nth-child(4) {
    margin-left: 15%;
} */
.column-12.column-md-4 {
    margin-right: 15px;
    margin-left: 15px;
}
  .contenedor {
    max-width: 720px;
  }
  .fila {

    margin-left: initial;
    margin-right: initial;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .column-md-1 { -webkit-box-flex: 0;flex: 0 0 calc(8.333333% - 30px); max-width: calc(8.333333% - 30px); }
  .column-md-2 { -webkit-box-flex: 0;flex: 0 0 calc(16.666667% - 30px); max-width: calc(16.666667% - 30px); }
  .column-md-3 { -webkit-box-flex: 0;flex: 0 0 calc(25% - 30px); max-width: calc(25% - 30px); }
  .column-md-4 { -webkit-box-flex: 0;flex: 0 0 calc(33.333333% - 30px); max-width: calc(33.333333% - 30px); }
  .column-md-6 { -webkit-box-flex: 0;flex: 0 0 calc(50% - 30px); max-width: calc(50% - 30px); }
  .column-md-8 { -webkit-box-flex: 0;flex: 0 0 calc(66.6% - 30px); max-width: calc(66.6% - 30px); }
  .column-md-12 { -webkit-box-flex: 0;flex: 0 0 100%; max-width: 100%; }
  .mart-200{
  margin-top: 270px;
}
.mart--250{
  margin-top: -120px;
}
}

@media (min-width: 992px) {
  .contenedor {
    max-width: 960px;
  }
  #lic > div:nth-child(1) > div,#lic > div:nth-child(2) > div {
    height: 756px!important;
}
}

@media(min-width:1400px){
  #primer_div {
    background-image: url(assets/fondo_2.jpg) !important;
  }
}

@media (min-width: 1200px) {
  .contenedor {
   /* max-width: 1140px;*/
  }
}

@media(max-width:767px){
  #primer_div {
    background-image: url("assets/banner-convenios-responsive.png") !important;
  }


  .container-row > p {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 18px;
    line-height: 24px;
  }
  
  .container-row > ul {
    margin-bottom: 0px;
    padding-left: 15px;
  }
  
.showDesktop {
  display: none;
}

.showMobile {
  display: block;
}
  div#formFemsa_mov {
    text-align: left !important;
    .fondo-verde { padding: 14px!important; font-size: 18px!important;} 
 .logo{max-width: 180px!important; padding-top: 10px!important;} 
.mart-5 { margin-top: 15%!important; }     
}
button.btn.btn-danger.btn-md {
    background-color: #FFB937;
    padding: 10px;
    border-radius: 10px;
    color: white;
    display: block;
    margin: auto;
}
label.field-required.form-check-label {
    text-align: left !important;
    font-size: 12px !important;
}
footer.pax-15 {
    text-align: center;
}

.column-md-2 {
    width: 46% !important;
    text-align: center;
}
  .prefooter{
    padding-top: initial !important;
  }
  .navbar a.boton.boton-primario {
      margin-top: 0 !important;
  }
 
  #primer_div h1 {
    margin-top: 0px;
    font-size: 34px !important;
}
  .mv-2{
    order: 2;
  }
  .fila {
    margin-right: 0 !important;
    margin-left: initial;
    flex-wrap: wrap-reverse;
    margin-right: initial;
    width: 100% !important;
  }
  .contenedor {
    width: calc(97% - 30px);
}
  }
  .s-m{
    margin-left:0px;
    margin-right:0px;  }

  footer{
    background-color: black;
    color: white;
    font-family: "Work Sans", sans-serif;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  footer a{
    font-size: 18px !important;
    color: white;
    text-decoration: initial;
    display: block;
    padding-top: 15px;
  }

body{
  font-family: "Work Sans", sans-serif;
    margin: 0px !important;
}
.pax-15{
  padding-left: 15px;
  padding-right: 15px;
}

#primer_div{
  background-image: url('assets/fondo_lp.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  color: white;

}
.prefooter{
  background-image: url('assets/prefooter.png');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  padding: 50px 0;
  font-family: "Sora", sans-serif;
  background-position-y: 80px;
}
.prefooter img{
max-width: 400px;
display: block;
margin: auto;
}
.prefooter h2{
    font-size: 28px;
}

formb {
  height: auto;
}
.mart-5{
  margin-top: 5%;
}
div#primer_div h2 {
    font-size: 20px;
}
.mary-3{
  margin-bottom: 3%;

}
.mart-10{
  margin-top: 10%;
}

.pa-y-5{
  margin-top: 3rem;
  margin-bottom: 3rem;
}
#primer_div{
  padding-top: 150px;
  padding-bottom: 60px;
}
#primer_div h1{
  font-size: 55px;
  margin-bottom: 0;
}
.tarjeta {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: white;
  color:#2D3748;
  text-align: center;
}

.tarjeta.column-md-3 {
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 30px;
    width: 100%;
}
.tarjeta h4{
  font-size: 20px;
}
.cards{
  .tarjeta{
    p{
      display: none;    
    }
  }
}

.tarjeta p{
  font-family: "Inter", sans-serif;
  font-size: 18px;

}
.logo.utel {
    border: 0px;
    padding-right: 15px;
}
div#primer_div .tarjeta {
    border: initial !important;
    box-shadow: initial !important;
}
.formulario-input {
  width: calc(100% - 1.8rem);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Estilos para Select personalizados */
.select-p {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.checkbox-p {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.alianza{
  max-width: 600px;
}
h3{
  font-family: "Sora", sans-serif;
}
.filtro-lic,.filtro-diplo,.filtro-maes,.filtro-doc {
    margin-top: 3rem !important;
}
.centrado{
  align-items: center; /* Centra verticalmente */
  justify-content: center; /* Centra horizontalmente */
}

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

.prefooter .fem-utel{
  max-width: 250px;
  margin:initial;
}

.tarjeta.fila {
    margin-top: -60px;
}

.rojo{
  color: #00C41C;
}
.texto-center{
  text-align: center;
}

.bloque3

{h2{
  font-size: 32px;
  font-family: "Sora", sans-serif; 
}
a{
  margin-top: 15px;
  font-size: 25px;
}
}

.tarjeta h4 {
    margin: 5px;
}
.bloque3{
  color:#2D3748;
}
.navbar a.boton.boton-primario {
    float: right;
    margin-left: auto;
}
.header-card {
    height: 200px;
    position: relative;
    display: block;
    margin-bottom: 1rem;
}
.text-head {
    position: absolute;
    bottom: 15px;
}
a.boton.boton-primario {
    text-decoration: initial;
}
html {
    scroll-behavior: smooth;
}
.hidden {
  opacity: 0;
  transition: opacity 0.5s ease;
  display: none;
}

#ebuydus-program > option:nth-child(9),#ebuydus-program > option:nth-child(12),#ebuydus-program > option:nth-child(27),#ebuydus-program > option:nth-child(26),#ebuydus-program > option:nth-child(31){
  display:none !important;
}

.check {
  max-width: 21px!important;
  margin-top: 2px!important;
}

.container-row {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 10px;
}


.metricas {
  background: #fff;
  color: #00C41C;
  padding: 60px 20px;
  text-align: center;
      background-image: url(assets/map.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.metricas .container {
  max-width: 1200px;
  margin: auto;
}

.metricas h2 {
  color: #000;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 40px;
}

.metricas-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.metrica {
  flex: 1 1 200px;
  max-width: 220px;
}

.metrica .valor {
  font-size: 34px;
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.metrica p {
  color: #000;
  font-size: 25px;
  margin: 0;
}

#bloqueProgramas {
  padding: 0 150px;
  .season_tabs {
    position: relative;
    min-height: 350px;
    clear: both;
    margin: 25px 0;
  }
  h1{
    font-size: 32px;
  }
  p{
    font-size: 25px;
  }
  
  .season_tab {
    float: left;
    clear: both;
    margin-bottom: 12px;
    width: 286px;
  
  }
  
  .season_tab label {
    background: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    left: 1px;
    width: 320px;
    height: 48px;
    border-radius: 10px;
    display: table-cell;
    color: #1E1E1E;
    box-shadow: 0px 4px 4px 0px #00000040;
  }
  
  .season_tab [type=radio] {
    display: none;
  }
  
  .season_content {
    position: absolute;
    top: 0;
    left: 300px;
    background: white;
    right: 0;
    bottom: 0;
    padding: 0px;
    /*border: 1px solid #ccc;*/
  }
  
  .season_content span {
    animation: 0.5s ease-out 0s 1 slideInFromTop;
  }
  
  .season_content_oferta {
    min-width: 460px;
    background: white;
    border-radius: 10px;
    border: 1px solid #00B204;
  }
  
  .season_content_oferta .liga {
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 6px;
    padding-top: 6px;
    font-size: 25px;
  }
  
  .season_content_oferta .liga:hover {
    background: #ccf0cd;
  }
  
  .season_content_foto {
    max-width: 400px;
    border-radius: 10px;
    float: right;
    vertical-align: top;
    margin-left: 30px;
  }
  
  .season_flex_container {
    display: flex;
    flex-direction: row;
    /* align-items: flex-start;*/
    /*flex-wrap: nowrap; */
  }
  
  .season_flex_item {
    padding: 10px;
    flex: 80% !Important;
    text-align: left !Important;
  }
  
  .season_flex_item_ch {
    padding: 10px;
    flex: 16%;
    text-align: left !Important;
  }
  
  [type=radio]:checked~label {
    background: #7fd881;
    font-weight: 500 !Important;
    border-radius: 10px;
    font-size: 25px;
    /*border-bottom: 2px solid #8bc34a;*/
    z-index: 2;
  }
  
  [type=radio]:checked~label~.season_content {
    z-index: 1;
  }

  

  @media(min-width:991px) {
    .season_content_oferta {
      max-height: 265px;
      overflow-y: scroll;
    }
  
    .season_content.season_flex_container {
      left: initial !important;
      width: 66% !important;
      height: 290px;
    }
  
    .season_content_oferta {
      width: 50% !important;
      max-width: 50% !important;
      min-width: initial !important;
    }
  
    .season_content_foto {
      width: 50% !important;
      max-width: initial !important;
    }
  
    .season_tab {
      width: calc(33% - 20px) !important;
    }
  
    .season_tab label {
      display: block !important;
      width: 100%;
      font-size: 25px;
    }
    
    
  
  }
}

#bloqueProgramasMobile{
  padding: 0 25px;
  .acordeon2 {
    background-color: #fff;
    border: 1px solid #595151;
    border-radius: 10px;
    color: #1E1E1E;
    display: block;
    font-weight: 500;
    font-size: 21px;
    font-family: 'Work Sans', sans-serif !Important;
    cursor: pointer;
    padding: 20px;
    width: 90%;
    text-align: left;
    margin-top: 10px;
  }
  
  .acordeon2:after {
    content: '\002B';
    color: #1E1E1E;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size: 24px;
  }
  
  .active,
  .acordeon2:hover {
    background-color: #F5F5F5;
    color: #1E1E1E;
  
  }
  
  
  .acordeon2:focus {
    outline: none !important;
    border-color: #06b706;
    box-shadow: 0 0 4px #d2d2d2;
  }
  
  .panel2 {
    padding-top: 15px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: #F5F5F5;
    text-align: left;
    font-size: 19px;
    line-height: 30px;
    overflow: hidden;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-top: 20px;
    width: 90%;
  }
  
  .panel2 a {
    color: #000;
    line-height: 24px;
  }
  
  .panel2 a:hover {
    color: #3b3987;
  }

  @media(min-width:991px) {
  .acordeon2 {
    font-size: 18px;
    padding: 18px;
  }

  .panel2 {
    font-size: 16px;
    line-height: 26px;
  }
}
}

#bloque3{
  margin-top: 10%;
}

#videoTestimonios{
 
  width: 100%;
  height: 215px;
  margin-bottom: 10px;
}


@media (min-width: 1200px) {
  .hidden-lg {
      display: none !important;
  }
}

@media screen and (max-width: 700px) {
  #bloque2{
    .contenedor{
      width: 85% !important;
            margin-left: 15px !important;
            display: flex;
            justify-content: center;
            .tarjeta{
              text-align: center;
            }
    }
  }
  .navbar{
    padding: 0 10px;
    .fila{
      width: 95% !important;
    }
  }

  #primer_div{
    padding-top: 75px;
  }

  .hidden-xs {
      display: none !important;
  }
  .boton-primario, #formFemsa button{
    font-size: 20px;
  }
  #videoTestimonios{
    width: 100%;
    height: 300px;
  }
  .bloque3{
    .prefooter{
      padding: 50px 0;
      text-align: center;
      .column-12.column-md-6.text-left{
        text-align: center !important;  
      }
    img{
      display: none;
    }
    .boton-primario{
      text-align: center;
      margin-top: 15px;
      font-weight: bold;
      font-size: 20px;
    }
  }
  }

}