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

body {
    font-family: Poppins;
}

.navbar {
    background-color: transparent;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem;
    height: 60px;
    color: white;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-logo a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}

.navbar-menu {
    list-style: none;
    display: flex;
    gap: 1rem;
}



.navbar-menu li a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: background 0.3s;
}

.navbar-menu li a:hover {
    background-color: #f7f7f7;
    color: black;
    border-radius: 4px;
}

.navbar-toggle {
    display: none; /* Oculta el botón en vista de escritorio */
    font-size: 1.5rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}

.navbar.scrolled {
    transition: backgroud-color 0.3s;
    background-color: #ff9300; /* Cambia esto al color sólido que prefieras */
    
}

.enunciado-hero{
    display: none;
}

.enunciado-hero-1{
    display: none;
}

.enunciado-hero-2{
    display: none;
}

.enunciado-hero-3{
    display: none;
}

.enunciado-hero-4{
    display: none;
}

.enunciado-hero-5{
    display: none;
}

.dropdown-menu {
    display: none; /* Oculta el menú desplegable por defecto */
    position: absolute; /* Posición absoluta para que se superponga al contenido */
    
    background-color: #ff9300; /* Mismo color de fondo que el navbar */
    padding: 1rem; /* Espaciado interno */
    z-index: 1000; /* Asegura que esté encima de otros elementos */
    border-radius: 4px; /* Esquinas redondeadas */
}



.dropdown:hover .dropdown-menu, /* Muestra el menú al pasar el ratón */
.dropdown.active .dropdown-menu {
    display: block; /* Muestra el menú desplegable */
}

.dropdown-menu li a {
    display: block; /* Hace que el enlace ocupe todo el espacio */
    padding: 0.5rem 1rem; /* Espaciado interno */
    color: white; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
}

.dropdown-menu li a:hover {
    background-color: #f7f7f7; /* Color de fondo al pasar el ratón */
    color: black; /* Color del texto al pasar el ratón */
}




/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
    .dropdown-menu {
        display: none; /* Oculta el menú por defecto */
        position: relative; /* Cambia la posición para evitar que se desplace a un costado */
        background-color: #ff9300; /* Fondo del menú desplegable */
        padding: 1rem;
        border-radius: 4px;
        text-align: left;
    }
    
    .dropdown.active .dropdown-menu {
        display: block; /* Muestra el menú desplegable cuando está activo */
    }
    
    .dropdown-menu li a {
        display: block;
        padding: 0.5rem 0; /* Espaciado entre los elementos */
        color: white;
        text-decoration: none;
    }
    
    .dropdown-menu li a:hover {
        background-color: #f7f7f7;
        color: black;
    }
    


    .navbar{
        background-color: #ff9300;
        
    }

    .navbar-menu {
       
        display: none; /* Oculta el menú en dispositivos móviles */
        flex-direction: column;
        gap: 1rem;
        position: absolute;
        top: 60px;
        right: 0;
        background-color: #ff9300;
        width: 100%;
        text-align: right;
        padding: 1rem;
        text-align: center;
    }

    .navbar-menu.active {
        display: flex; /* Muestra el menú cuando está activo */
    }

    .navbar-toggle {
        display: block; /* Muestra el botón en dispositivos móviles */
    }

    .hero-content{
        display: none;
    }

    .enunciado-hero{
        display: block;
    }

    .enunciado-hero p{
        font-size: 50px;
        margin-top: -25px;
        font-weight: bold;
    }

    .enunciado-hero-3{
        display: block;
    }
 
    .enunciado-hero-2{
        display: block;
    }

    .enunciado-hero-1 p{
        font-size: 38px;
        margin-top: -20px;
        font-weight: bold;
    }

    .enunciado-hero-1{
        display: block;
    }

    .enunciado-hero-2 p{
        font-size: 38px;
        margin-top: -20px;
        font-weight: bold;
    }

    .enunciado-hero-3{
        display: block;
    }

    .enunciado-hero-3 p{
        font-size: 38px;
        margin-top: -20px;
        font-weight: bold;
    }

    .enunciado-hero-4{
        display: block;
    }

    .enunciado-hero-4 p{
        font-size: 38px;
        margin-top: -20px;
        font-weight: bold;
    }

    .enunciado-hero-5{
        display: block;
    }

    .enunciado-hero-5 p{
        font-size: 38px;
        margin-top: -20px;
        font-weight: bold;
    }


}



/* Hero Section */
.hero {
   
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: left;
    align-items: center;
    color: white;
    text-align: left;
    overflow: hidden;
    padding-top: 60px;
    padding-left: 60px;
    perspective: 1px; /* Clave para el efecto parallax */
}

.hero-video {
    
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que el video cubra toda la sección sin distorsionarse */
    transform: translateZ(-1px) scale(2); /* Efecto parallax al desplazar el video en el eje Z */
    z-index: -1; /* Envía el video al fondo */
    filter: brightness(0.7);
}

.hero-content {
    
    padding: 20px;
    border-radius: 8px;
    z-index: 1; /* Asegura que el contenido esté encima del video */
}


.hero-content p{
    font-size: 100px;
    margin-top: -50px;
    font-weight: bold;
}


.hero-content a{
    font-size: 25px;
}


/* Secciones de contenido */
.contenido {
    padding: 100px 20px;
    text-align: center;
    background-color: #f4f4f4;
}

.carrusel img{
    width: 100px;
    margin: 20px 20px;
    transition: .5s;
    
}

.carrusel img:not(:hover){
    filter: grayscale(100%);
}

.carrusel{
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.carrusel div{
    white-space: nowrap;
    animation: animate 30s linear infinite;
}

@keyframes animate {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}

.titulo_carrusel{
    text-align: center;
    margin-top: 30px;
}

.titulo_carrusel a{
    font-size: 25px;
    font-weight: light;
}
.services{
    width: 100%;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.texto_bqc{
    padding-left: 20%;
    padding-right: 20%;
    
    text-align: justify;
}
.superior{
    display: flex;
    justify-content: center;
}

.cards-container {
    margin-top: 25px;
    margin-left: 10%;
    margin-right: 10%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Ajusta el tamaño mínimo de cada tarjeta */
    gap: 2rem; /* Espacio entre tarjetas */
    padding: 1rem; /* Margen interno */
    justify-content: center; /* Centra las filas en la última fila incompleta */
}

.card{
   
  height: 500px;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
}

.card:hover {
    background-color: #fdfdfd;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
      rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
      rgba(0, 0, 0, 0.09) 0px 32px 16px;
  }
  

.card img{
    width: 100%;
    height: 75%;
    border-radius: 15px !important;
}

.card-body{
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
}

footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas iguales */
    gap: 20px; /* Espacio entre secciones */
    background-color: #000000;
    color: white;
    padding: 20px;
    text-align: center;
    width: 100%;
  }

  .footer-section {
    padding: 10px;
  }

  .footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
    border-right: 1px solid #666;
  }

  .footer-logo img {
    max-width: 100px;
    margin-bottom: 10px;
  }

  .footer-section {
    padding-left: 20px;
  }

  .footer-section h3 {
    color: white;
    font-size: 1.1em;
    margin-bottom: 10px;
  }

  .footer-section ul {
    list-style: none;
    padding: 0;
  }

  .footer-section ul li {
    margin: 5px 0;
    font-size: 0.9em;
  }

  .footer-section ul li a {
    color: #ccc;
    text-decoration: none;
  }

  .footer-section ul li a:hover {
    color: #fff;
  }


  @media (max-width: 768px) {
    footer {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 20px;
    }

    .footer-logo {
      padding: 0;
      border-right: none;
      margin-bottom: 20px;
    }

    .footer-section {
      padding: 0;
      margin-bottom: 20px;
      border-bottom: 1px solid #666;
    }
  }


/* Contenedor principal con imagen de fondo */
.nosotros {
    margin-top: 40px;
    position: relative;
    background-image: url('img/demas/nosotros.jpg');
    min-height: 500px;
    /* Efecto parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Capa oscura para aplicar opacidad */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Ajusta el nivel de opacidad */
    z-index: 1;
}

/* Contenido encima de la capa oscura */
.contenido-nosotros {
    text-align: center;
    position: relative;
    color: #ffffff;
    padding: 20px;
    z-index: 2; /* Coloca el texto encima de la capa oscura */
    text-align: center;
    padding: 10%;
}

.texto{
    text-align: justify;
}







/*---------------------------------*/


.containerObj {
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 40px;
  }

  .titleObj {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

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

  .objective-boxObj {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    flex: 1 1 calc(50% - 20px);
    min-width: 300px;
   
    box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
  }

  .objective-boxObj h3 {
    font-size: 20px;
    margin-bottom: 10px;
    text-align: center;
  }

  .objective-boxObj ul {
    text-align: justify;
    list-style-type: disc;
  }

  .dentroObj {
    text-align: justify;
    list-style-type: disc;
    padding-left: 20px;
  }



  .objective-boxObj ul li {
    margin-bottom: 8px;
    font-size: 16px;
  }

  @media (max-width: 768px) {
    

    .objective-boxObj{
        margin-top: 15px;
        margin-left: 20px;
        margin-right: 20px;
    }
  }


/*---------------------------------*/














/* Estilos generales de la sección porque elegirnos*/
.encapsulador{
    padding-top: 30px;
    text-align: center;
}
.porque-elegirnos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    gap: 0.5rem;
}

/* Estilos para el texto */
.text-porque-elegirnos {
    flex: 1;
    font-size: 1rem;
    text-align: justify;
    padding-left: 50px;
}


/* Estilos para la imagen */
.image-content-porque-elegirnos {
    flex: 1;
    text-align: center;
}

.image-content-porque-elegirnos img {
    width: 100%;
    max-width: 400px;
    height: auto;
  border-radius: 30px;
  background: #e0e0e0;
  box-shadow: 15px 15px 30px #bebebe,
             -15px -15px 30px #ffffff;
}

/* Estilos responsivos para dispositivos móviles */
@media (max-width: 768px) {
    .porque-elegirnos {
        flex-direction: column; /* Cambia los divs a columna en pantallas pequeñas */
        text-align: center;
    }
    
    .text-porque-elegirnos {
        margin-bottom: 1rem;
        padding-left: 0px;
    }
}

.aviso{
    text-align: center;
    padding: 5%;
    background-color: #000000;
    font-weight: bold;
    color: white;
}


/* Estilos generales para la sección */
.dual-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 2rem;
    padding-left: 5rem;
    padding-right: 5rem;
    /*padding: 2rem;*/
    /*margin: 3rem;*/
    padding-bottom: 2rem;
}

/* Estilos para cada div padre */
.parent-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    
}

/* Estilos para el contenido de texto */
.text-content-parent {
    flex: 1;
    font-size: 1rem;
    
   text-align: justify;
}

/* Estilos para el contenido de imagen */
.image-content-parent {
    text-align: left;
    flex: 1;
    text-align: center;
  
}

.image-content-parent img {
    width: 60px;
    max-width: 200px; /* Tamaño máximo para la imagen */
    height: auto;
    border-radius: 8px;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    /* En pantallas pequeñas, cada div padre se apila en columna */
    .parent-div {
        flex-direction: column;
        text-align: center;
    }

    .text-content-parent, .image-content-parent {
        width: 100%; /* Asegura que los elementos ocupen todo el ancho disponible */
    }
     /* Alterna el orden de texto e imagen */
     .parent-div:nth-child(odd) .text-content-parent { /*INPARES*/
        order: 1;
    }
    .parent-div:nth-child(odd) .image-content-parent {
        order: 2;
    }
}


  
  .center-button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #ff9300;;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .center-button:hover {
    background-color: #b26902;;
  }


.datos-content{
    padding-top: 2rem;
    background-color: #000000; /* Color de fondo para la sección */
    text-align: center;
    padding-bottom: 2rem;
}

.datos-content h2{
    
    color: #ff9300;;
}

.image-text-section {
    display: flex;
    justify-content: center;
    gap: 2rem;
    
    padding: 2rem;
}

.image-text-box {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 200px; /* Ajusta el ancho máximo de cada caja */
}

.image-text-box img {
    width: 100%;
    height: auto;
    
    margin-bottom: 1rem; /* Espacio entre la imagen y el texto */
}

.image-text-box p {
    font-size: 1rem;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    font-weight: bold;
}

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .image-text-section {
        flex-direction: column;
        align-items: center;
    }

    .image-text-box {
        max-width: 90%; /* Asegura que el contenedor ocupe un buen ancho en pantallas pequeñas */
    }

    .image-text-box img{
        width: 200px;
    }
}







/* Estilos del botón flotante */
.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #ff6600; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 15px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
    z-index: 9999; /* Asegura que el botón esté al frente */
}

/* Efecto hover */
.floating-button:hover {
    background-color: #cc5200; /* Cambia el color al pasar el mouse */
}




/* Contenedor principal */
.container-requisitos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #ffffff; /* Fondo similar al de la imagen */
    box-sizing: border-box;
}

/* Título principal */
.main-title-requisitos {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2rem;
}

/* Contenedor para los textos complementarios */
.complementary-texts-requisitos {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 2rem;
    text-align: center;
}

.complementary-texts-requisitos p {
    font-size: 1rem;
    margin: 0;
    text-align: center;
    width: 200px; /* Ancho fijo para un diseño consistente */
}

/* Frase motivadora */
.motivational-phrase {
    font-size: 2rem;
    text-align: center;
    margin-top: 1rem;
    font-style: italic;
    font-weight: bold;
    color: #ff9300;
}

.requisito-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 200px; /* Ajusta según sea necesario */
}

.requisito-item img {
    width: 100px; /* Ajusta el tamaño de la imagen según tus necesidades */
    height: auto;
    margin-bottom: 0.5rem; /* Espacio entre la imagen y el texto */
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .container-requisitos {
        font-size: 1.5rem;
    }

    .complementary-texts-requisitos {
        gap: 1rem; /* Espacio más pequeño entre los textos */
    }

    .complementary-texts-requisitos p {
        font-size: 0.9rem;
        width: 80px; /* Ajuste del ancho para móviles */
    }

    .motivational-phrase {
        font-size: 0.9rem;
    }

    .complementary-texts-requisitos p {
        font-size: 1rem;
        margin: 0;
        text-align: center;
        width: 300px; /* Ancho fijo para un diseño consistente */
    }
}



/* Contenedor principal */
.container-malla {
    text-align: center;
    padding: 2rem;
    background-color: #ffffff; /* Fondo gris */
}

/* Título principal */
.main-title-malla {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

/* Estructura de columnas */
.content-columns-malla {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
}

/* Columnas individuales */
.column-malla {
    text-align: center;
}

/* Estilos para el título y subtítulo de cada columna */
.column-title-malla {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.column-subtitle-malla {
    font-size: 0.9rem;
    font-weight: normal;
    margin-bottom: 1rem;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .content-columns-malla {
        flex-direction: column;
        align-items: center;
    }
}

/* Contenedor de la sección */
.location-section {
    padding: 40px;
    background-color: #ffffff;
    text-align: center;
}

/* Contenedor responsivo para las columnas */
.container-ubi {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Dirección */
.address {
    flex: 1;
    padding-bottom: 20px;
}

/* Mapa */
.map iframe {
    width: 80%;
    height: 400px;
    border-radius: 15px;
}

/* Estilos para pantallas más grandes */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }

    .address, .map {
        flex: 1;
    }
}


.mission-vision {
    padding: 40px 20px;
    background-color: #ffffff;
}

.mission-vision .container-m {
    max-width: 1200px;
    margin: 0 auto;
}

.mission-vision .row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mission-vision .col {
    flex: 1 1 45%;
    padding: 20px;
    background: #ff9300;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.mission-vision h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #000000;
    text-align: center;
    
}

.mission-vision p {
    font-size: 16px;
    line-height: 1.6;
    color: #000000;
    text-align: justify;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mission-vision .col {
        flex: 1 1 100%;
    }
}


.jerarquia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
  }
  .row-jerarquia {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .row-jerarquia img {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 5px;
  }

  


  @media (max-width: 768px) {
    .row-jerarquia img {
      max-width: 150px;
    }
  }
  @media (max-width: 480px) {
    .row-jerarquia img {
      max-width: 100px;
    }
  }



  .oferta-academica {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
   
    
  }

  .oferta-academica img {
    max-width: 200px;
    width: 100%;
    border-radius: 5px;
    padding-right: 50px;
  }
  
  .oferta-academica .text {
    flex: 1;
 
    line-height: 1.6;
    color: #000000;
    text-align: justify;
  }

  /* Responsividad */
  @media (max-width: 768px) {
    .oferta-academica {
      flex-direction: column;
      text-align: center;
    }
    .oferta-academica img {
      max-width: 200px;
      margin-bottom: 10px;
      padding-right: 0px;
    }
    .oferta-academica .text {
      text-align: justify;
      
    }
  }


  .section-niveles {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .column-niveles {
    display: flex;
    flex-direction: column;
    align-items: center;


  }

  .column-niveles h3 {
    font-size: 24px;
    color: #000000;
    margin-bottom: 20px;
  }

  .item-niveles {
    min-height: 50px; /* Mantener altura consistente */
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    line-height: 1.5; /* Mantener coherencia con el texto */
    text-align: center;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



  .item-niveles span {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
  }

  /* Responsividad */
  @media (max-width: 768px) {
    .section-niveles {
      grid-template-columns: 1fr;
      gap: 30px;
    }
  }


  .container-frase {
    text-align: center; /* Centrar texto e imagen */
    max-width: 400px;
    margin: 0 auto;
  }

  .container-frase img {
    width: 100%;
    max-width: 250px; /* Limita el ancho máximo */
    border-radius: 10px;
    object-fit: cover;
  }

  .text-frase {
    font-size: 18px;
   
    color: #000000;
    margin-bottom: 15px;
    font-weight: 500;
    width: 400px;

  }




  .container-tec {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.main-text-tec {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    
}

.columns-tec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    font-weight: bold;
}

.column-tec {
    flex: 1 1 calc(50% - 40px); /* Cada columna ocupa el 50% menos los márgenes */
    max-width: 400px;
    min-width: 280px; /* Para mantener un buen diseño en pantallas pequeñas */
    text-align: center;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .column-tec {
        flex: 1 1 100%; /* En pantallas pequeñas, cada columna ocupa el 100% */
    }
}



.campo-laboral-section {
    padding: 40px 20px;
    background-color: #ffffff;
    color: #000000;
  }
  
  .campo-laboral-section .container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
  }
  
  .campo-laboral-section h2 {
    
    margin-bottom: 20px;
    color: #000000;
  }
  
  .campo-laboral-section .intro {
    font-size: 1.1rem;
    margin-bottom: 30px;
    color: #000000;
  }
  
  .opportunities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: justify;
  }
  
  .opportunities-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
  }
  
  .list-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
  }
  
  .opportunities-list div {
    flex: 1;
  }
  
  .opportunities-list strong {
    color: #000000;
  }
  
  /* Responsivo */
  @media (max-width: 768px) {
    .campo-laboral-section h1 {
      font-size: 2rem;
    }
  
    .campo-laboral-section .intro {
      font-size: 1rem;
    }
  
    .opportunities-list li {
      flex-direction: column;
      align-items: center;
    }
  
    .list-image {
      margin-bottom: 10px;
    }
  }



/* Estilos generales para el contenedor */
.faq-section {
    max-width: 800px; /* Limita el ancho del contenedor */
    margin: 0 auto; /* Centra horizontalmente */
    padding: 20px 15px; /* Padding superior/inferior y laterales */
    font-family: Arial, sans-serif;
    box-sizing: border-box; /* Incluye padding en el ancho total */
  }
  
  .faq h2 {
    text-align: center; /* Centra el título */
    margin-bottom: 20px;
  }
  
  /* Estilo de cada pregunta y respuesta */
  .faq-item {
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  .faq-question {
    
    color: #ff9300;
    width: 100%;
    padding: 15px;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    background-color: #000000;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
  }
  
  .faq-question:hover {
    background-color: #f1f1f1;
  }
  
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    font-size: 14px;
    padding: 0 15px;
    color: #333;
  }