@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --color-green-sharing: #1b814e;
    --color-icon-title: #01a317;
    --color-icon-sn: #8d8d8d;
    --color-icon-rec: #ff7b00;
}

html {
    scroll-behavior: smooth;
}

#backToTopBtn {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en la ventana */
    bottom: 15px; /* Posición desde el fondo */
    right: 15px; /* Posición desde la derecha */
    z-index: 50; /* Asegúrate de que esté en frente */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
    border: none; /* Sin borde */
    outline: none; /* Sin contorno */
    background-color: #5050507b; /* Color de fondo */
    color: white; /* Color del texto */
    cursor: pointer; /* Cursor de puntero */
    border-radius: 50%; /* Bordes redondeados para hacerlo circular */
    display: flex; /* Flexbox para centrar el contenido */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    padding-top: 8px !important;
}

#backToTopBtn:hover {
    background-color: #8b8b8b; /* Cambio de color al pasar el ratón */
}

#backToTopBtn::before {
    content: ""; /* Contenido vacío */
    border: solid white; /* Bordes sólidos blancos */
    border-width: 0 2px 2px 0; /* Ajuste de los bordes para crear la flecha */
    display: inline-block; /* Mostrar en línea */
    padding: 8px; /* Tamaño de la flecha */
    transform: rotate(-135deg); /* Rotar para crear la flecha */
    -webkit-transform: rotate(-135deg); /* Rotar para Safari */
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

#sec1{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    padding: 50px 0;
    margin: 0;
}

.cont_princ_ind{
    width: 90%;
    max-width: 900px;
    height: auto;
    overflow: hidden;
    background-color: ;
    padding: 0 0 0 0;
    margin: 0 auto;
}

.header_art{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: ;
    padding: 0 0 16px 0;
    margin: 0 0 0 0;
    border-bottom: 1px solid gray;

}

.header_art2{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: ;
    padding: 16px 0 16px 0;
    margin: 0;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

}


h1{
    font-size: 40px;
    color: #212121;
    font-weight: 600;
    padding-top: 0;
    margin-top: 0;
}

.cont_detalles{
    width: 100%;
    background-color: ;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.cont_titlee{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 0 0 0 0;
    margin: 0 0 16px 0;
    background-color: ;
    border-bottom: 1px solid gray;

}

.cont_detalles p{
    font-size: 15px;
    font-weight: 400;
    color: gray;
    margin: 6px 0 0 0;
    padding: 0;
}

.cont_detalles p:nth-child(2){
    margin-left: 16px;
    margin-right: 16px;
}

.ico_sty{
    font-size: 18px;
    color: var(--color-icon-sn);
}

.icon-title-sty{
    font-size: 22px;
    color: var(--color-icon-title);
    margin-right: 10px;
    padding: 0;
}

.icon-title-sty-rec{
    font-size: 20px;
    color: var(--color-icon-rec);
    margin-right: 10px;
    padding: 0;
}

.ico_sty:first-child{
    margin-right: 5px;
}

.info_art{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: ;
    padding: 0;
    margin: 30px 0;
}

.txt_styles {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
}

.txt_styles_lg {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.8;
}

.clr_black {
    color: #3c4043;
}

.clr_black2 {
    color: #212121;
}

.clr_white {
  color: #fff;
}


.info_art strong{
    color: #3c4043;
}

.btn_seguir{
    display: inline-block;
    width: auto;
    background-color: var(--color-green-sharing);
    padding: 10px 15px;
    margin: 0 0 0 0;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 400;
    color: white;
}


.accordion {
    width: 100%;
    margin: 30px 0;
    padding: 0;
}

.accordion-asp {
    width: 100%;
    margin: 15px 0 40px 0;
    padding: 0;
}

.accordion-itemm {
    border-bottom: 2px solid #ddd;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: transparent;
}

.accordion-header span {
    font-size: 18px;
    font-weight: 600;
}

.accordion-header i {
    font-size: 24px;
    color: black;
    transition: transform 0.3s ease;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    padding: 0 1rem;
}

.accordion-content2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  padding: 0 1rem;
}


.accordion-itemm  .accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.accordion-itemm .accordion-content ul li {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding: 8px 0 8px 32px;
}


.accordion-itemm .li-sty{
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0;
}

.accordion-itemm .accordion-content ul li::before{
    content: "\F26A"; /* Código Unicode para el ícono (puedes encontrar el código específico en la documentación de Bootstrap Icons) */
    font-family: 'bootstrap-icons'; /* Asegúrate de usar la fuente correcta */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Centrar verticalmente */
    font-size: 1.5em; /* Tamaño del ícono */
    color: var(--color-green-sharing); /* Color del ícono */
}

.accordion-itemm .accordion-content ul li a {
    color: #000000;
    font-weight: 500;
    text-decoration: none;
  }

.accordion-itemm .accordion-content ul li a:hover {
    text-decoration: underline;
}

.accordion-itemm.active .accordion-content {
    max-height: 1800px; /* Ajusta este valor si es necesario */
    opacity: 1;
    padding-bottom: 15px;
}

.accordion-itemm.active .accordion-content2 {
  max-height: 2500px; /* Ajusta este valor si es necesario */
  opacity: 1;
  padding-bottom: 15px;
}

.accordion-itemm.active .accordion-header i {
    transform: rotate(180deg);
}


.accordion-itemm.active .accordion-header .icon-not-rot {
  transform: rotate(0);
}


/* estilos de el contenido siguiente */

/*h2{
    font-size: 24px;
    font-weight: 600;
}*/

.subtitles-h2{
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

/*
h3{
    font-size: 18px;
    font-weight: 600;
}
    */

.subtitles-h3{
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.subtitles-h4{
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.subtitles-oe-h2{
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

/*
h3{
  font-size: 18px;
  font-weight: 600;
}
  */

.subtitles-oe-h3{
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.subtitles-oe-h4{
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  padding: 0;
}


.clr_gray_black {
    color: #3a3a3a;
}

.lh-txt{
    line-height: 1.5;
}

.ul-styles {
    padding-left: 16px;
    margin: 0;
}

.ol-styles {
    padding-left: 16px;
    margin: 0;
}

.cont_frame {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
    margin: 30px 0;
}

.cont_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.info_temas{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: ;
    padding: 0;
    margin: 30px 0;
}

.mto-30{
    margin-top: 30px;
}

.mto-10{
    margin-top: 10px;
}

.mto-5 {
    margin-top: 5px;
}

.mto-0 {
    margin-top: 0;
}

.mbo-30{
    margin-bottom: 30px;
}

.mbo-10{
    margin-bottom: 10px;
}

.mbo-5 {
    margin-bottom: 5px;
}

.mbo-0 {
    margin-bottom: 0;
}

.mri-auto {
    margin-right: auto;
}

.mle-auto {
    margin-left: auto;
}

.cont_btn_nextt{
    width: 100%;
    max-width: 900px;
    height: auto;
    overflow: hidden;
    background-color: ;
    padding: 0;
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.cont_btn_prevv{
    width: 100%;
    max-width: 900px;
    height: auto;
    overflow: hidden;
    background-color: ;
    padding: 0;
    margin: 0 auto 30px auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;    
}

.cont_btn_nextt p{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}

.cont_btn_prevv p{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;   
}

.cont_btn_nextt span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 16px;
    margin: 10px auto 0 auto;
    overflow: hidden;
    background-color: var(--color-green-sharing);
    text-align: center;
    color: #f0d806;
}

.cont_btn_prevv span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 16px;
    margin: 0 auto 10px auto;
    overflow: hidden;
    background-color: var(--color-green-sharing);
    color: #f0d806;
}

.cont_btn_nextt .img_next{
  width: 150px; 
  height: auto; 
  margin: 0 auto; 
  padding: 0; 
  object-fit: cover;
}

.link-downloadd{
    text-decoration: none;
    color: var(--color-green-sharing);
    font-weight: 600;

}

.link-downloadd:hover{
    text-decoration: underline;

}

.frame-styless{
    width: 100%;
    height: 470px;
    border: none;
    margin-bottom: 20px;

}


/* clases e ids de orientacion voc. */

.cont_ejemplos{
    width: 100%;
    background-color: ;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0;
}

.ejms{
    width: 32%;
    max-width: 280px;
    background-color: #f1f1f1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 16px;
    margin: 10px;
    border-radius: 10px;
}

.ejms img{
    width: 60%;
    height: auto;
    padding: 0;
    margin: 0 auto 16px auto;
    border-radius: 50%;
}

.ejms i{
    font-size: 48px;
    color: #00b837;
    padding: 0;
    margin: 0 0 8px 0;
    background-color: ;
}

.ejms span{
    display: inline-block;
    color: rgb(2, 2, 2);
    font-size: 17px;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

.ejms p{
    color: black;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    margin: 0;
}

.ejms-2{
    width: 45%;
    max-width: 420px;
    background-color: #f1f1f1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 16px;
    margin: 10px;
    border-radius: 10px;
}

.ejms-2 img{
    width: 40%;
    height: auto;
    padding: 0;
    margin: 0 auto 16px auto;
    border-radius: 50%;
}

.ejms-2 i{
    font-size: 48px;
    color: #00b837;
    padding: 0;
    margin: 0 0 8px 0;
    background-color: ;
}

.ejms-2 span{
    display: inline-block;
    color: rgb(2, 2, 2);
    font-size: 17px;
    font-weight: 600;
    padding: 0;
    margin: 0;
}

.ejms-2 p{
    color: black;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    margin: 0;
}

.cont_recomendacion{
    width: 100%;
    background-color: #fff7d7;
    overflow: hidden;
    border-radius: 10px;
    padding: 16px;
}

.cont_puntos_ord{
    width: 100%;
    background-color: #e8feff;
    overflow: hidden;
    border-radius: 10px;
    padding: 16px;
}

.cont_puntos_ord ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  
  .cont_puntos_ord ul li{
      position: relative; /* Para posicionar el ícono */
      padding-left: 2em; /* Espacio para el ícono */
      margin-bottom: .5em; /* Espaciado entre los ítems */
      line-height: 1.5;
  }
  
  .cont_puntos_ord ul li:last-child{
    margin-bottom: 0; 

}

  .cont_puntos_ord ul li::before{
      position: absolute;
      left: 0;
      top: 0;
      transform: translateY(0); /* Centrar verticalmente */
      font-size: 1.2em; /* Tamaño del ícono */
      color: #0361db; /* Color del ícono */
    
  }

  .cont_ejercicios{
    width: 100%;
    background-color: ;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 15px;
    border: 2px solid #ffb01e;
  }

  .cont_ejercicios .ejr1 {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color:;
    padding: 0;
  }


  .cont_ejercicios .ejr-uni {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: ;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 0;
  }

  .cont_ejercicios .ejr1:last-child {
  }

  .custom_hr{
    width: 95%;
    height: auto;
    border: 1px solid var(--color-icon-rec);
    margin: 10px auto;
    padding: 0;
  }



  .cont_ejercicios .ejr1 .icon-ej{
    width: 15%;
    min-width: 100px;
    max-width: 140px;
    background-color: ;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 0 0 0;
  }

  .cont_ejercicios .ejr1 .icon-ej i{
    font-size: 3rem;
    color: white;
    background-color: #ffb01e;
    padding: 1rem 1.7rem;
    margin: 0 auto;
    border-radius: 50%;

  }

  .cont_ejercicios .ejr1 .txt-ej{
    width: 85%;
    max-width: 720px;
    background-color: ;
    padding: 0;
    margin: 0;
  }
  
  .cont_ejercicios .ejr1 span{
    font-size: 16px;
    font-weight: 600;
    color: black;
  }

  .cont_ejercicios .ejr1 p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: black;
  }


  .cont_ejercicios .ejr-uni .icon-ej{
    width: 15%;
    min-width: 100px;
    max-width: 140px;
    background-color: ;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0 0 0 0;
  }

  .cont_ejercicios .ejr-uni .icon-ej i{
    font-size: 3rem;
    color: white;
    background-color: #ffb01e;
    padding: 1rem 1.7rem;
    margin: 0 auto;
    border-radius: 50%;

  }

  .cont_ejercicios .ejr-uni .txt-ej{
    width: 85%;
    max-width: 720px;
    background-color: ;
    padding: 0;
    margin: 0;
  }
  
  .cont_ejercicios .ejr-uni span{
    font-size: 16px;
    font-weight: 600;
    color: black;
  }

  .cont_ejercicios .ejr-uni p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: black;
    background-color: ;
  }

  .cont_bg_img {
    position: relative;
    width: 100%;
    background-image: url('/img/tecnologia.jpg'); /* Cambia por tu imagen */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 20px;
}

.cont_bg_img2 {
    position: relative;
    width: 100%;
    background-image: url('/img/salud-bio.jpg'); /* Cambia por tu imagen */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 20px;
}

.cont_bg_img3 {
    position: relative;
    width: 100%;
    background-image: url('/img/energia.png'); /* Cambia por tu imagen */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 20px;
}

.cont_bg_img4 {
    position: relative;
    width: 100%;
    background-image: url('/img/diseño.jpg'); /* Cambia por tu imagen */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 20px;
}

.opacity_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1); /* Blanco con opacidad */
    z-index: 0;
}
.opacity_bg2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 1); /* Blanco con opacidad */
    z-index: 0;
}
.cont_info_campos {
    position: relative;
    z-index: 1;
    padding:  0;
}

.cont_info_campos ul{
    list-style: none;
    padding: 10px;
      margin: 0;
}
  
  .cont_info_campos ul li{
      position: relative; /* Para posicionar el ícono */
      padding-left: 2em; /* Espacio para el ícono */
      margin-bottom: .5em; /* Espaciado entre los ítems */
      line-height: 1.5;
  }
  
  .cont_info_campos ul li::before{
      
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%); /* Centrar verticalmente */
      font-size: 1.2em; /* Tamaño del ícono */
      color: green; /* Color del ícono */
  }

  .cont_cap5  {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #fff5ed;
    padding: 16px;
    border-radius: 15px;
  }

  .disp_normm{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .disp_revv{
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .cont_cap5 .icon-ej-cap5{
    width: 15%;
    max-width: 140px;
    background-color: ;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 0;
    margin: 0 0 0 0;
  }

  .cont_cap5 .icon-ej-cap5 i{
    font-size: 3rem;
    color: white;
    background-color: #ffb01e;
    padding: 1.3rem 1.3rem;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .cont_cap5 .txt-ej-cap5{
    width: 85%;
    max-width: 720px;
    background-color: ;
    padding: 0;
    margin: 0;
  }
  
  .cont_cap5 span{
    font-size: 16px;
    font-weight: 600;
    color: black;
  }

  .cont_cap5 p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: black;
    padding: 0;
    margin: 0;
  }


  .cont_esc_img  {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 16px;
    border-radius: 15px;
  }

  .cont_esc_img .img-ejm{
    width: 15%;
    max-width: 140px;
    background-color: ;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 0;
    margin: 0 0 0 0;
  }

  .cont_esc_img .img-ejm-v-mini{
    width: 10%;
    max-width: 100px;
    background-color: ;
    display: flex;
    justify-content: center;
    align-items: start;
    padding: 0;
    margin: 0 0 0 0;
  }

  .cont_esc_img .img-ejm-v-mini img{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 auto;
    border-radius: 50%;
    border: .5px solid #d1d1d1;

  }

  .cont_esc_img .img-ejm img{
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 auto;
    border-radius: 50%;
    border: .5px solid #d1d1d1;

  }

  .cont_esc_img .txt-ejm{
    width: 85%;
    max-width: 720px;
    background-color: ;
    padding: 0;
    margin: 0;
  }

  .cont_esc_img .txt-ejm-v-mini{
    width: 90%;
    max-width: 760px;
    background-color: ;
    padding: 0;
    margin: 0;
  }
  
  .cont_esc_img span{
    font-size: 17px;
    font-weight: 600;
    color: black;
  }

  .cont_esc_img p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    color: black;
  }


  .cont_etapas{
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    padding: 0;
  }

  .cont_etapas .titulo_etapa {
    width: 100%;
    background-color: #cefdda;
    overflow: hidden;
    padding: 8px 8px;
    margin: 0 0 16px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
  }


  .cont_etapas .titulo_etapa i{
    font-size: 1.5rem;
    color: #00b837;
    padding: 0;
    margin: 0 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cont_etapas .titulo_etapa h3{
    font-size: 20px;
    font-weight: 600;
    color: black;
    padding: 0;
    margin: 0;
  }





  .cont_etapas .info_etapa {
    width: 100%;
    overflow: hidden;
    padding: 0;
    border-radius: 10px;
  }

  .bg-info-etapa-1{
    background-color: #cffff9;
  }

  .bg-info-etapa-2{
    background-color: #f9facd;
  }

  .info_etapa .box-etapa-1{
    width: 100%;
    background-color: ;
    padding: 10px;
    margin: 0;
    overflow: hidden;
    text-align: center;
  }

  .info_etapa .box-etapa-2{
    width: 100%;
    background-color: ;
    padding: 10px;
    margin: 0;
    overflow: hidden;
    border-top: 2px solid white;
    border-bottom: 2px solid white;

  }

  .info_etapa .box-etapa-3{
    width: 100%;
    background-color: ;
    padding: 0 10px;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
  }

  .info_etapa .box-etapa-3 .box-sitios{
    width: 50%;
    background-color: ;
    padding: 10px 10px 10px 0;
    margin: 0;
    overflow: hidden;
  }

  .info_etapa .box-etapa-3 .box-docs{
    width: 50%;
    background-color: ;
    padding: 10px 0 10px 10px;
    margin: 0;
    overflow: hidden;
    border-left: 2px white solid;

  }

  .info_etapa .box-etapa-3 .box-sitios-1{
    width: 50%;
    background-color: ;
    padding: 10px 10px 10px 0;
    margin: 0;
    overflow: hidden;
    border-right: 2px white solid;
  }

  .info_etapa .box-etapa-3 .box-docs-1{
    width: 50%;
    background-color: ;
    padding: 10px 0 10px 10px;
    margin: 0;
    overflow: hidden;
  }

  .cont_bachillerato{
    width: 100%;
    background-color: #e4e4e4;
    overflow: hidden;
    padding: 8px 0;
    margin: 0 0 16px 0;
    border-radius: 10px;
    text-align: center;
  }

  .cont_bachillerato span{
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: black;
  }

  .cont_bachillerato_info{
    width: 100%;
    overflow: hidden;
    padding: 0;
  }

  .cont_hoja_reg {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
  }

  .info_hj {
    width: 70%;
    height: auto;
    overflow: hidden;
    padding: 0 16px 0 0;
    margin: 0;
  }

  .img_hj {
    width: 30%;
    height: auto;
    overflow: hidden;
    padding: 0;
  }

  .img_hj img{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn_download_hoja{
    display: inline-block;
    width: auto;
    height: auto;
    padding: 8px 16px;
    margin: 0;
    border-radius: 5px;
    background-color: #7a1111;
    color: white;
    font-size: 16px;
  }

  .cont_aviso{
    width: 100%;
    background-color: #e7e7e7;
    overflow: hidden;
    border-radius: 10px;
    padding: 16px;
}

.img_docs{
    width: 80%;
    height: auto;
    padding: 0;
    margin: 0;
    border: 1px solid gray;
}

.img_ejemp{
  display: block;
  width: 90%;
  height: auto;
  padding: 0;
  margin: 0;
}

.img_ejemp_mov{
  display: none;
  width: 80%;
  height: auto;
  padding: 0;
  margin: 0;
}

.cont_border{
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 2px solid gray;
  border-radius: 10px;
  padding: 16px;
}

.cont_folio_res{
  width: 100%;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;

}

.box_folio{
  width: 25%;
  margin: 0 8px;
  padding: 0;

}

.box_folio:nth-child(2){
  width: 45%;
  margin: 0 8px;
  padding: 0;

}

.box_folio span{
  display: block;
}

.word-mark{
  font-size: 20px;
  font-weight: 500;
  color: black;
  text-align: center;
}

.word-desc{
  font-size: 17px;
  font-weight:500;
  color: black;
  text-align: center;
}

.word-info{
  font-size: 16px;
  font-weight: 400;
  color: black;
  text-align: center;
}


/* estilos tabla de centros */

.container_tabless{
  width: 100% !important; /* Ajusta según sea necesario */
  max-width: 800px !important; /* Limita el ancho del contenedor */
  overflow-x: hidden !important; /* Permite el scroll horizontal */
  margin: 0 auto !important;
  padding: 0 !important;
}

.table-centros {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;

}

.table-centros th {
  border: 2px solid #006605; /* Color de los bordes */
  padding: 5px 10px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;

}

.table-centros td {
  border: 2px solid #006605; /* Color de los bordes */
  padding: 5px 10px;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
}

.table-centros thead {
  background-color: #006605; /* Color de fondo de los encabezados */
  color: white; /* Color del texto de los encabezados */
}

.table-centros .link-maps {
  text-decoration: none;
  color: #006605;
  font-weight: 600;
}

/* contenedor felicidades */
.cont_felicidades{
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 16px;
  border-radius: 15px;
}

.icono_fel{
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0 auto 10px auto;
}

.icono_fel i{
  font-size: 5rem;
  color: #fff;

}

.texto_fel{
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.texto_fel span{
  display: block;
}

.txt-span-lg{
  font-size: 24px;
  font-weight: 700;
}
.txt-span{
  font-size: 18px;
  font-weight: 600;
}

.cont_btn_fel{
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-fel{
  display: inline-block;
  width: auto;
  background-color: white;
  padding: 10px 20px;
  margin: 0 auto;
  border-radius: 5px;
  text-decoration: none;
  color: rgb(0, 89, 255);
  font-size: 18px;
  font-weight: 500;

}



/* */
/* */
/* estilos nuevos de opciones  */

.cont_title_school{
    width: 100%;
    height: auto;
    padding: 16px;
    overflow: hidden;
    background-color: goldenrod;
    display: flex;
    flex-direction: grid;
    justify-content: start;
    border-radius: 15px;
}

.img_logo_school{
    width: 12%;
    max-width: 108px;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: ;

}

.img_logo_school img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.title_school{
    width: 90%;
    max-width: 750px;
    height: auto;
    padding: 0;
    margin: 0 0 0 16px;
    overflow: hidden;
    background-color: ;

}


.cont_title_school2{
    width: 100%;
    height: auto;
    padding: 0;
    overflow: hidden;
    background-color: ;
    display: flex;
    flex-direction: grid;
    justify-content: center;
}

.img_logo_school2{
    width: 10%;
    max-width: 90px;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-color: ;

}

.img_logo_school2 img{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.title_school2{
    width: 80%;
    max-width: 660px;
    height: auto;
    padding: 0;
    margin: 0 0 0 16px;
    overflow: hidden;
    background-color: ;

}





.cont_table_info_esc{
    width: 100%;
    height: auto;
    padding: 0;
    overflow: hidden;
    background-color: ;
    display: flex;
    justify-content: center;
}

.table_info_esc{
    width: 80% !important;
  border-collapse:collapse
   !important;
  overflow: hidden;
  margin: 0 auto !important;
  background-color: rgb(255, 255, 255);
}


  
.table_info_esc td {
  border: 2px solid #646464; /* Color de los bordes */
  padding: 5px 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.table_info_esc td:first-child {
    background-color: rgb(216, 216, 216);
    text-align: right;
    color: black;
  }


  .cont_map_ins{
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color:;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
  }

  .cont_map_ins .subcont1{
    position: relative;
    width: 50%;
    max-width: 430px;
    height: auto;
    padding-top: 26.25%;
    margin: 0 16px 0 0;
    background-color: ;
    overflow: hidden;

  }

  .cont_map_ins .subcont1 iframe {
    position: absolute; /* Posicionamiento absoluto */
    top: 0; 
    left: 0;
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */

  }

  .cont_map_ins .subcont2{
    width: 50%;
    max-width: 440px;
    height: auto;
    padding: 0;
    margin: 0 0 0 0;
    background-color: ;

  }

  .cont_map_ins .subcont2 img{
   width: 100%;
   height: auto;
   object-fit: cover;
  }



@media (min-width: 0) and (max-width: 560px){
    .frame-styless{
        width: 100%;
        height: 500px;
        border: none;
        margin-bottom: 20px;
    }
}

@media (min-width: 0) and (max-width: 699px){

    #backToTopBtn {
        display: none; /* Oculto por defecto */
        position: fixed; /* Fijo en la ventana */
        bottom: 65px; /* Posición desde el fondo */
        right: 15px; /* Posición desde la derecha */
        z-index: 50; /* Asegúrate de que esté en frente */
        width: 50px; /* Ancho del botón */
        height: 50px; /* Altura del botón */
        border: none; /* Sin borde */
        outline: none; /* Sin contorno */
        background-color: #5050507b; /* Color de fondo */
        color: white; /* Color del texto */
        cursor: pointer; /* Cursor de puntero */
        border-radius: 50%; /* Bordes redondeados para hacerlo circular */
        display: flex; /* Flexbox para centrar el contenido */
        align-items: center; /* Centrar verticalmente */
        justify-content: center; /* Centrar horizontalmente */
        padding-top: 8px !important;
    }

    h1{
        font-size: 30px;
        color: black;
        font-weight: 600;
    }

    .txt_styles {
        font-size: 14px;
    }

    .txt_styles_lg {
        font-size: 15px;
    }

    .btn_seguir{
        font-size: 14px;
    }
    
    .accordion-header {
        padding: 1rem 0;
    }

    .accordion-header span {
        font-size: 16px;
    }

    .accordion-header i {
        font-size: 20px;
    }

    .accordion-content {
        padding: 0;
    }

    .accordion-content ul li {
        font-size: 14px;
        padding: 5px 0 5px 32px;

    }

    .icon-title-sty{
        font-size: 22px;
    }

    .accordion-content ul li::before{
        font-size: 1.2em; /* Tamaño del ícono */
    }

    /* info */

    .subtitles-h2{
        font-size: 20px;
    }
    
        .subtitles-h3{
            font-size: 16px;
        }

        .subtitles-h4{
            font-size: 14px;
        }

        .subtitles-oe-h2{
          font-size: 30px;
         
        }  
        
        .subtitles-oe-h3{
          font-size: 26px;
        }
  
        .subtitles-oe-h4{
          font-size: 20px;
        
        }

        .cont_btn_nextt p{
            font-size: 14px;
        }

        .cont_btn_prevv p{
            font-size: 14px;
        }
        
        .cont_btn_nextt .img_next{
          width: 120px; 
          height: auto; 
          margin: 0 auto; 
          padding: 0; 
          object-fit: cover;
        }

        .ejms{
            width: 100%;
            max-width: 350px;
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 16px;
            margin: 10px;
        }

        .ejms img{
            width: 50%;
            height: auto;
        }
        
        .ejms i{
            font-size: 40px;
        }
        
        .ejms span{
            font-size: 15px;
        }
        
        .ejms p{
            font-size: 14px;
          
        }
        
        .ejms-2{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 16px;
            margin: 10px;
        }

        .ejms-2{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 16px;
            margin: 10px;
        }

        .ejms-2 img{
            width: 50%;
            height: auto;
        }
        
        .ejms-2 i{
            font-size: 40px;
        }
        
        .ejms-2 span{
            font-size: 15px;
        }
        
        .ejms-2 p{
            font-size: 14px;
          
        }

        /*cont ejercicios */


        
          .cont_ejercicios .ejr1 .icon-ej{
            width: 100%;
            min-width: none;
            max-width: none;
            margin: 0 0 10px 0;
          }
        
          .cont_ejercicios .ejr1 .icon-ej i{
        
          }
        
          .cont_ejercicios .ejr1 .txt-ej{
            width: 100%;
            max-width: none;
          }
          
          .cont_ejercicios .ejr1 span{
            font-size: 14px;
        
          }
        
          .cont_ejercicios .ejr1 p{
            font-size: 14px;
           
          }
        
        
          .cont_ejercicios .ejr-uni .icon-ej{
            width: 100%;
            min-width: none;
            max-width: none;
          }
        
          .cont_ejercicios .ejr-uni .icon-ej i{
        
          }
        
          .cont_ejercicios .ejr-uni .txt-ej{
            width: 100%;
            max-width: none;
           
          }
          
          .cont_ejercicios .ejr-uni span{
            font-size: 14px;
          }
        
          .cont_ejercicios .ejr-uni p{
            font-size: 14px;
          }
        
        
        /*cont iconos-texto*/

          
          .cont_cap5 .icon-ej-cap5{
            width: 100%;
            max-width: none;
            padding: 0;
            margin: 0 0 10px 0;
          }
        
          .cont_cap5 .icon-ej-cap5 i{
            font-size: 3.5rem;
            margin: 0;
        
          }
        
          .cont_cap5 .txt-ej-cap5{
            width: 100%;
            max-width: none;
          }
          
          .cont_cap5 span{
            font-size: 14px;
          }
        
          .cont_cap5 p{
            font-size: 14px;
          }

          /* cont img-texto */

          .cont_esc_img  {
            padding: 0;
          }
        
          .cont_esc_img .img-ejm{
            width: 40%;
            max-width: none;
            padding: 0;
            margin: 0 auto 10px auto;
          }
        
          .cont_esc_img .img-ejm img{
          
          }
        
          .cont_esc_img .txt-ejm{
            width: 100%;
            max-width: none;
          }
          
          .cont_esc_img span{
            font-size: 15px;
    
          }
        
          .cont_esc_img p{
            font-size: 14px;
            font-weight: 400;
          }
        
          /* resp. de tablas de etapas */

          .cont_etapas .titulo_etapa {
            padding: 8px 8px;
            margin: 0 0 10px 0;
          }

          .cont_etapas .titulo_etapa i{
            font-size: 1.5rem;
          }
        
          .cont_etapas .titulo_etapa h3{
            font-size: 16px;
          }

          .cont_etapas .info_etapa {
            border-radius: 10px;
          }
        
          .info_etapa .box-etapa-3{
            width: 100%;
            background-color: ;
            padding: 0 0;
            margin: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: start;
          }
        
          .info_etapa .box-etapa-3 .box-sitios{
            width: 100%;
            padding: 10px;

          }
        
          .info_etapa .box-etapa-3 .box-docs{
            width: 100%;
            border-left: 0;
            padding: 10px;
            border-top: 2px solid white;
          }
        
          .info_etapa .box-etapa-3 .box-sitios-1{
            width: 100%;
            border-right: 0;
            border-bottom: 2px solid white;
            padding: 10px;

          }
        
          .info_etapa .box-etapa-3 .box-docs-1{
            width: 100%;
            padding: 10px;

        
          }
        
        /* resp. contenedor 2 info/img */

        .cont_hoja_reg {
          width: 100%;
          height: auto;
          overflow: hidden;
          padding: 0;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        }
      
        .info_hj {
          width: 100%;
          height: auto;
          padding: 0 0 0 0;
        }
      
        .img_hj {
          width: 80%;
          height: auto;
          overflow: hidden;
          padding: 10px 0 0 0;
        
        }
      
        .img_hj img{
          width: 100%;
          height: auto;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      
        .btn_download_hoja{
          font-size: 14px;
        }
      
    
        /* imgs docs */
        .img_docs{
          width: 90%;
      }
    
      /* titulos de bachillerato */
      .cont_bachillerato{
        margin: 0 0 10px 0;

      }
    
      .cont_bachillerato span{
        font-size: 16px;
      }

      /* img ejemplo asignacion */
      .img_ejemp{
        display: none;
      }

      .img_ejemp_mov{
        display: block;
        width: 100%;
      }

      /* contenedor info escuela */
      .cont_folio_res{
        width: 100%;
        overflow: hidden;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      
      }
      
      .box_folio{
        width: 100%;
        margin: 0 0;
      
      }
      
      .box_folio:nth-child(2){
        width: 100%;
        margin: 16px 0;
      
      }
      
      
      .word-mark{
        font-size: 18px;
      }
      
      .word-desc{
        font-size: 15px;
      }
      
      .word-info{
        font-size: 14px;
      }

      /* resp. de acordeon  */
      .accordion-header span {
        font-size: 16px;
    }

    .accordion-itemm .li-sty{
      font-size: 14px;

  }

  /* contenedor felicidades */
.cont_felicidades{
  width: 100%;
  align-items: start;
  padding: 10px;
  border-radius: 10px;
}

.icono_fel{
}

.icono_fel i{
  font-size: 4.5rem;
  color: #fff;
}

.txt-span-lg{
  font-size: 22px;
  font-weight: 700;
}
.txt-span{
  font-size: 16px;
  font-weight: 600;
}


.btn-fel{
  padding: 7px 15px;
  margin: 0 auto;
  font-size: 16px;

}


/* estilos tabla de centros */
.container_tabless{
  width: 100% !important; /* Ajusta según sea necesario */
  overflow-x: auto !important; /* Permite el scroll horizontal */
  white-space: nowrap !important; /* Evita que el contenido se divida en varias líneas */
}


.table-centros {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 auto !important;

}


.table-centros th {
  border: 2px solid #006605; /* Color de los bordes */
  padding: 5px 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
}

.table-centros td {
  border: 2px solid #006605; /* Color de los bordes */
  padding: 5px 10px;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}

.table-centros thead {
  background-color: #006605; /* Color de fondo de los encabezados */
  color: white; /* Color del texto de los encabezados */
}

.table-centros .link-maps {
  text-decoration: none;
  color: #006605;
  font-weight: 600;
}
    

.cont_title_school{
  display: flex;
  flex-direction: column;
}

.img_logo_school{
  width: 50%;
  max-width: 80px;
  height: auto;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  background-color: ;

}

.img_logo_school img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.title_school{
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 0 0 0;
  overflow: hidden;
  text-align: center;

}

.cont_title_school2{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img_logo_school2{
  width: 50%;
  max-width: 80px;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: hidden;

}

.img_logo_school2 img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

.title_school2{
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 0 0 0;
  overflow: hidden;
  text-align: center;
}

.cont_table_info_esc{
  width: 100%;
  height: auto;
  padding: 0;
  overflow: hidden;
  background-color: ;
  display: flex;
  justify-content: center;
}

/*est. resp. tabla */

.table_info_esc{
  width: 100% !important;
border-collapse:collapse
 !important;
overflow: hidden;
margin: 0 auto !important;
background-color: rgb(255, 255, 255);
}



.table_info_esc td {
font-size: 14px;
}

/* estilos resp. de mapa e imagen plantel */

.cont_map_ins{
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: start;
}

.cont_map_ins .subcont1{
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  margin: 0 0 16px 0;
  overflow: hidden;

}


.cont_map_ins .subcont2{
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 0 0 0;

}



}