@font-face {
  font-family: 'AvenusType';
  src: url('../fonts/AvenusType.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('../fonts/CeraProLight.otf') format('opentype');
  font-weight: 300;
  /* Light */
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('../fonts/CeraProBlack.otf') format('opentype');
  font-weight: 900;
  /* Black */
  font-style: normal;
}


@font-face {
  font-family: 'CeraPro';
  src: url('../fonts/CeraProRegular.otf') format('opentype');
  font-weight: 400;
  /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('../fonts/CeraPro-Medium.otf') format('opentype');
  font-weight: 500;
  /* Medium */
  font-style: normal;
}

@font-face {
  font-family: 'CeraPro';
  src: url('../fonts/CeraPro-BlackItalic.otf') format('opentype');
  font-weight: 900;
  /* Black */
  font-style: italic;
  /* Italic */
}

html,
body {
  overflow-x: hidden;
}


/* ----------------Banner principal --------------------*/


/* Estilo para el div con imagen de fondo */
.top {
  width: 100%;
  height: 700px;
  /* Ajusta según tu necesidad */
  background-image: url('../img/primaria/topprimaria.webp');
  /* Cambia por la URL de tu imagen */
  background-size: cover;
  /* Asegura que la imagen cubra todo el div */
  background-position: center;
  /* Centra la imagen */
  position: relative;
  /* Necesario para controlar la superposición */
  /* Prioridad en el apilamiento */
}

/* Ajuste responsivo */
@media (max-width: 768px) {
  .top {
    height: 300px;
    /* Ajusta la altura para pantallas pequeñas */
  }
}


/* Estilo para la sección de Maternal y Preescolar */
.MaternalYPreescolar {
  position: absolute;
  background-color: #ffffff;
  /* Fondo claro para contraste */
  padding: 20px;
  /* Espaciado interno */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Apilar contenido verticalmente */
  justify-content: center;
  align-items: center;
  border-radius: 43px;
  transform: translate(0, -50px);
  /* Mueve el contenido hacia arriba */
}

/* Fila dentro de Maternal y Preescolar */


/* Primera columna: Título */
.MaternalYPreescolar .title {
  /* Ocupa el 50% del espacio */
  display: block;
  justify-content: center;
}

.MaternalYPreescolar .title h1 {
  transform: translate(0, -600px);
  /* margin-top: -400px; */
  /* Ajuste adicional para centrar */
  font-size: 7em;
  text-align: center;
  /* Centrar texto */
  font-family: 'CeraPro', sans-serif;
  /* Aplica la fuente CeraPro */
  font-weight: 900;
  /* CeraProBlack (peso 900) */
  color: #010c4d;
}



/* Segunda columna: Imagen */


.MaternalYPreescolar .col-image img {
  display: block;
  text-align: center;
  justify-content: center;
  align-items: center;
  /* Ocupa el 50% del espacio */
  /* position: relative; */
  width: 80%;
  height: auto;
  /* Imagen responsiva */
  /* Tamaño máximo de la imagen */
  transform: translateY(-500px);
  /* Superposición con el div anterior */
}

.MaternalYPreescolar .col-image {
  display: flex;
  /* Activa Flexbox en el contenedor */
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
  /* Ajusta según la altura deseada del contenedor */
}

@media (max-width: 768px) {
  .MaternalYPreescolar {
    padding: 15px;
    /* Reduce el espaciado interno */
    flex-direction: column;
    /* Asegura que los elementos se apilen verticalmente */
    border-radius: 20px;
    /* Ajusta las esquinas redondeadas */
    transform: translate(0, -20px);
    /* Reduce el desplazamiento hacia arriba */
  }

  .MaternalYPreescolar .title h1 {
    font-size: 3em;
    /* Reduce el tamaño del texto del título */
    transform: translate(0, -220px);
    /* Ajusta la posición del título */
    text-align: center;
    /* Asegura el centrado del texto */
    margin: 0 auto;
    /* Centra horizontalmente */
    padding: 0 10px;
    /* Espaciado interno para evitar que se pegue a los bordes */
  }

  .MaternalYPreescolar .col-image img {
    width: 100%;
    /* Ajusta la imagen al ancho del contenedor */
    transform: translateY(-200px);
    /* Elimina el desplazamiento vertical */
  }

  .MaternalYPreescolar .col-image {
    justify-content: center;
    /* Centra la imagen horizontalmente */
    align-items: center;
    /* Centra la imagen verticalmente */
    padding: 10px 0;
    /* Espaciado adicional para separar la imagen del título */
  }
}



/* Estilo para la descripción de Maternal y Preescolar */
.DescripcionMaternalYPreescolar {
  width: 100%;
  padding: 20px;
  /* Espaciado interno */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -500px;
  /* Ajuste para acercar el párrafo */

}

.DescripcionMaternalYPreescolar p {
  max-width: 1100px;
  /* Ancho máximo del párrafo */
  text-align: justify;
  /* Justificación del texto */
  line-height: 1.8;
  /* Espaciado entre líneas */
  font-size: 2rem;
  /* Tamaño del texto */
  color: #010c4d;
  /* Color del texto */
  margin: 0;
  /* Elimina márgenes para evitar descuadres */
  margin-top: -80px;
  font-family: 'CeraPro', sans-serif;
  /* Aplica la fuente CeraPro */
  font-weight: 400;
  /* CeraProBlack (peso 900) */
}

.DescripcionMaternalYPreescolar p strong {
  font-family: 'CeraPro', sans-serif;
  /* Aplica la fuente CeraPro */
  font-weight: 900;
  /* CeraProBlack (peso 900) */
}

@media (max-width: 768px) {
  .DescripcionMaternalYPreescolar {
    padding: 15px;
    /* Reduce el espaciado interno */
    margin-top: -10px;
    /* Ajusta el margen superior */
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    transform: translate(0, -200px);
  }

  .DescripcionMaternalYPreescolar p {
    max-width: 90%;
    /* Limita el ancho del texto al 90% del contenedor */
    font-size: 1.2rem;
    /* Reduce el tamaño del texto para móviles */
    line-height: 1.6;
    /* Ajusta el espaciado entre líneas */
    margin: 0 auto;
    /* Centra el texto horizontalmente */
    text-align: justify;
    /* Mantiene la justificación del texto */
  }
}



/* Estilo para la nueva sección: Información Adicional */
.InformacionAdicional {
  width: 1100px;
  margin-top: 20px;
  /* Espaciado superior para separar de la sección anterior */
  padding: 20px;
  /* Espaciado interno */
  display: flex;
  flex-direction: column;
  /* Alinear contenido verticalmente */
  align-items: center;
  /* Centrar contenido horizontalmente */
  gap: 20px;
  /* Espaciado entre filas */
}

/* Primera fila: Título */
.InformacionAdicional .row-title h2 {
  width: 1100px;
  font-size: 4rem;
  /* Tamaño del título */
  text-align: center;
  /* Centrar texto */
  color: #010c4d;
  /* Color del texto */
  font-family: 'CeraPro', sans-serif;
  /* Fuente personalizada */
  font-weight: 700;
  /* Peso de la fuente */
  margin: 0;
  /* Elimina márgenes predeterminados */
}


.InformacionAdicional .row-title h2 span {
  font-family: 'AvenusType', sans-serif;
  color: #6cc5f1;
  font-size: 1.5em;
}

.InformacionAdicional .row-title .estrellas {
  float: right;
  transform: translate(-220px, -30px);
}

.estrellas {
  width: 40px;
  height: 40px;
}


/* Segunda fila: Párrafo */
.InformacionAdicional .row-paragraph p {
  color: #010c4d !important;
  max-width: 1000px;
  /* Ancho máximo del párrafo */
  text-align: justify;
  /* Justificación del texto */
  line-height: 1.8;
  /* Espaciado entre líneas */
  font-size: 2rem;
  /* Tamaño del texto */
  /* Color del texto */
  margin: 0;
  /* Elimina márgenes predeterminados */
  font-family: 'CeraPro', sans-serif;
  /* Fuente personalizada */
  font-weight: 400;
  /* Peso del texto */
}

.InformacionAdicional .row-paragraph p strong {
  font-weight: 900;
  /* Resalta el texto en negritas */
}

@media (max-width: 768px) {
  .InformacionAdicional .row-title h2 {
    width: 400px;
    font-size: 4rem;
    text-align: center;
  }

  .InformacionAdicional {
    width: 90%;
    /* Asegura que ocupe el 90% del ancho disponible */
    padding: 10px;
    /* Reduce el espaciado interno */
    gap: 15px;
    /* Ajusta el espacio entre las filas */
    transform: translate(0, -200px);
  }

  /* Primera fila: Título */
  .InformacionAdicional .row-title h2 {
    font-size: 2.5rem;
    /* Reduce el tamaño del título */
    text-align: center;
    /* Asegura que esté centrado */
  }

  .InformacionAdicional .row-title h2 span {
    font-size: 1.2em;
    /* Ajusta el tamaño del texto dentro del span */
  }

  .InformacionAdicional .row-title .estrellas {
    width: 30px;
    /* Reduce el tamaño de la imagen */
    height: 30px;
    /* Mantiene las proporciones */
    transform: translate(-50px, -20px);
    /* Ajusta la posición */
  }

  /* Segunda fila: Párrafo */
  .InformacionAdicional .row-paragraph p {
    max-width: 100%;
    /* Permite que el párrafo ocupe todo el ancho disponible */
    font-size: 1.2rem;
    /* Reduce el tamaño del texto */
    line-height: 1.6;
    /* Ajusta el espaciado entre líneas */
    text-align: justify;
    /* Mantiene la justificación */
  }
}



/* Primer Row: Imagen con texto al lado */
.alianzas-header {
  display: flex;
  /* justify-content: flex-start; */
  align-items: center;
  margin-bottom: 20px;
  transform: translate(-200px);
}

@media (max-width: 768px) {

  .alianzas-header {
    transform: translate(0, 0);
  }
}

.alianzas-header-content {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  /* Alinea los elementos horizontalmente a la izquierda */
  gap: 1rem;
}

.alianzas-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.alianzas-image {
  max-width: 80px;
  height: 150px;
}

/* Título */
.alianzas-title-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 80px;
}

.alianzas-title-line1 {
  font-family: 'AvenusType', sans-serif;
  font-weight: 400;
  font-size: 100px;
  color: #6cc5f1;
  margin: 0;
  line-height: 0.5;
  /* Reduce el espacio entre líneas */
}

.alianzas-title-line2 {
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  font-size: 50px;
  color: #bcd864;
  margin: 0;
}




/* =============== */
.ContenidoAdicional {
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
}

.contenidoAdicional-texto {
  margin-top: -150px;
  padding: 200px;
  text-align: justify;
  /* Opcional, por si hay más líneas */
  justify-content: center;
  text-justify: center;
  color: #010c4d;
  font-size: 1.5em;
}

.contenidoAdicional-texto p {
  font-family: 'CeraPro', sans-serif;
  /* Fuente personalizada */
  font-weight: 400;
}

.contenidoAdicional-texto strong {
  font-family: 'CeraPro', sans-serif;
  /* Fuente personalizada */
  font-weight: 900;
}



.center-content {
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
  text-align: center;
  /* Centra texto e imágenes */
  margin-top: -150px;
  margin-bottom: 80px;
}


.icon-container {
  text-align: center;
  /* Centra las imágenes */
}

.icon-container img {
  width: 150px;
  /* Ajusta el tamaño de las imágenes */
  height: auto;
  /* Mantiene la proporción */
  max-width: 100%;
  /* Ajusta el tamaño máximo de las imágenes */
  margin: 0 auto;
  /* Centra dentro del contenedor */
}

.icon-container p {
  font-size: 1.5em;
  color: #010c4d;
  margin-top: 10px;
  font-family: 'CeraPro', sans-serif;
  /* Fuente personalizada */
  font-weight: 900;
}

.icon-container span {
  font-size: 1em;
  color: #010c4d;
  margin-top: 10px;
  font-family: 'CeraPro', sans-serif;
  /* Fuente personalizada */
  font-weight: 400;
}


@media (max-width: 768px) {

  /* Contenedor principal */
  .ContenidoAdicional {
    transform: translate(0, -200px);
    /* Ajusta la posición vertical */
    width: 400px;
    flex-direction: column;
    /* Cambia a layout vertical */
    padding: 20px;
    /* Reduce el espaciado */
  }

  /* Header */
  .alianzas-header-content {
    align-items: center;
    /* Centra los elementos */
    gap: 10px;
    /* Reduce el espacio entre elementos */
  }

  .alianzas-image {
    max-width: 60px;
    /* Reduce el tamaño de la imagen */
    height: auto;
    /* Mantiene la proporción */
  }

  .alianzas-title-line1 {
    font-size: 40px;
    /* Ajusta el tamaño del texto */
    text-align: center;
    /* Centra el texto */
    transform: translate(0, -30px);
    /* Ajusta la posición vertical */
  }

  .alianzas-title-line2 {
    font-size: 20px;
    /* Ajusta el tamaño del texto */
    text-align: center;
    /* Centra el texto */
    transform: translate(0, -30px);
    /* Ajusta la posición vertical */

  }

  /* Contenido adicional */
  .contenidoAdicional-texto {
    transform: translate(0, -80px);
    /* Ajusta la posición vertical */
    padding: 10px;
    font-size: 15px;
    /* Reduce el tamaño del texto */
    text-align: justify;
    /* Justifica el texto */
    margin-bottom: 100px;
  }

  .contenidoAdicional-texto p {
    line-height: 1.5;
    /* Ajusta el espaciado entre líneas */
  }

  /* Iconos e imágenes */
  .imagenesReferencia .row {
    flex-wrap: wrap;
    /* Permite que los elementos se ajusten a nuevas líneas */
    gap: 15px;
    /* Ajusta el espacio entre las filas */
  }

  .alianzas-image-container .alianzas-image {
    height: 100px;
  }

  .icon-container {
    flex-basis: 45%;
    /* Reduce el ancho para caber dos por fila */
    max-width: 45%;
    /* Limita el ancho */
    margin: 10px auto;
    /* Agrega margen entre los elementos */
  }

  .icon-container img {
    max-width: 80px;
    /* Ajusta el tamaño máximo de la imagen */
  }

  .icon-container p {
    font-size: 1.3rem;
    /* Ajusta el tamaño del texto */
  }

  .icon-container span {
    font-size: 1.5rem;
    /* Ajusta el tamaño del texto */
  }
}

/* ============== */

/* ----------------programas diferenciadores --------------------*/

.programas-diferenciadores {
  /* margin-top: 0; */
  /* Fondo azul oscuro */
  color: #ffffff;
  /* Texto blanco */
  padding: 50px 0;
}


.titulo-seccion {
  font-size: 4em;
  margin-bottom: 10px;

}

.contenedor-programas {
  width: 100%;
  /* Ajusta el ancho del contenedor */
  margin: 0 auto;
  /* Centra el contenedor horizontalmente */
  text-align: center;
  /* Asegura que el texto esté centrado dentro del contenedor */
}



.titulo-seccion .programas {
  display: inline-block;
  color: #6cc5f1;
  font-size: 100px;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  /* Black */
}

.titulo-seccion .diferenciadores {
  color: #010c4d;
  font-family: 'AvenusType', sans-serif;
  font-size: 100px;
}


.descripcion-seccion {
  font-size: 1.2em;
  margin-bottom: 40px;
}

.descripcion-seccion {
  font-family: 'CeraPro', sans-serif;
  /* Aplica tu fuente personalizada */
  font-weight: 300;
  /* Cera Light */
  font-size: 25px;
  /* Ajusta el tamaño de la fuente según tu diseño */
  line-height: 1.6;
  /* Mejora la legibilidad del texto */
  color: #010c4d;
  /* Color del texto, ajusta según tu diseño */
  text-align: center;
  /* Alinea el texto al centro */
  margin: 20px auto;
  /* Añade margen superior e inferior */
  max-width: 1100px;
  /* Limita el ancho para mejor legibilidad */
}

.descripcion-seccion strong {
  font-weight: 900;
  /* Aplica el estilo Black a los elementos <strong> */
  color: #010c4d;
  /* Destaca el texto con un color más oscuro */
  font-family: 'CeraPro', sans-serif;
  /* Asegura que use la fuente Cera Black */
}

.programa {
  margin-bottom: 30px;
}

.icono-programa {
  width: 80px;
  /* Ajusta el ancho al tamaño deseado */
  height: 80px;
  /* Mantén el alto igual para proporción cuadrada */
  margin-bottom: 15px;
  object-fit: contain;
  /* Asegura que la imagen no se deforme */

}

.titulo-programa {
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  /* Black */
  color: #ffe784;
  /* Color del texto, ajusta según tu diseño */
  font-size: 2em;
  text-align: center;
  /* Alinea el texto al centro */
  margin-bottom: 10px;
}

.descripcion-programa {

  font-size: 1.5em;
  line-height: 1.5;
  font-family: 'CeraPro', sans-serif;
  /* Aplica CeraPro */
  font-weight: 500;
  /* Medium */
  text-align: center;
}

@media (max-width: 768px) {

  .ofrecemos-rigthys {
    display: flex;
    flex-direction: column;
    /* Cambia la dirección de las columnas a filas */
  }

  /* Columna de imagen */
  .ofrecemos-rigthys .rigthyfrances {
    order: 1;
    /* Coloca la imagen en la parte superior */
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
    /* Le da espacio a la parte inferior */
  }

  .ofrecemos-rigthys .rigthyfrances img {
    max-width: 100%;
    /* Asegura que la imagen no se salga del contenedor */
  }

  /* Columna de párrafo */
  .ofrecemos-rigthys .parrafo-righty {
    order: 2;
    /* Coloca el párrafo por debajo */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centra el contenido verticalmente si es necesario */
    text-align: justify;
    /* Justifica el texto */
    width: 400px;
    /* Usamos un ancho flexible (en lugar de 400px) */
    max-width: 400px;
    /* Asegura que no se pase de 400px */
    font-size: 1.4em !important;

  }

}


/* programas diferenciadores */

/* Contenedor principal de Programas Diferenciadores */
.container {
  width: 100%;
  padding: 0 20px;
  /* Añadimos algo de padding para los márgenes */
}

@media (max-width: 768px) {
  .que-ofrecemos-header {
    width: 100%;
    /* Asegura que el contenedor ocupe todo el ancho disponible */
    padding: 20px;
    /* Agrega un poco de padding si es necesario */
    box-sizing: border-box;
    /* Incluye el padding en el ancho total */
    display: flex;
    justify-content: center;
    /* Centra el contenido horizontalmente */
    align-items: center;
    /* Centra el contenido verticalmente */
    text-align: center;
    /* Asegura que el texto esté centrado */
  }

  .que-ofrecemos-header-content {
    display: flex;
    flex-direction: column;
    /* Asegura que los elementos estén en columna */
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Asegura que el texto dentro del contenido esté centrado */
    width: 100%;
    /* Asegura que el contenedor ocupe todo el ancho disponible */
    max-width: 400px;
    /* Limita el ancho del contenido si es necesario */
  }

  .que-ofrecemos-header-content h1 {
    font-size: 2em !important;
    line-height: 1.2;
    word-wrap: break-word;
    /* Evita que el texto se desborde */
    width: 400px;
  }

  .que-ofrecemos-header-content .unico {
    font-size: 1.8em !important;
  }

  .estrellasU {
    max-width: 80%;
    /* Ajusta el tamaño de la imagen */
    height: auto;
    /* Mantiene la relación de aspecto */
    margin-bottom: 15px;
    /* Espacio entre la imagen y el título */
  }
}


.ProgramasDiferenciadores {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  transform: translate(100px);
}

.ProgramasDiferenciadores .efecto-visual {
  width: 150px !important;
  height: auto;
  transform: translate(-100px);
}


/* Estilo para cada row */
.ProgramasDiferenciadores .row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  width: 100%;
  /* Aseguramos que los rows ocupen todo el ancho */
}

/* Estilo para las columnas de contenido */
.ProgramasDiferenciadores .col-content {
  flex: 0 0 48%;
  /* Cada columna ocupa el 48% del ancho */
  display: flex;
  align-items: center;
  gap: 20px;
  /* Espaciado entre la imagen representativa y el contenido */
  box-sizing: border-box;
}

/* Estilo para los contenedores de texto en cada columna (Título, imagen de efecto visual y párrafo) */
.ProgramasDiferenciadores .col-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  /* Cambiado a columna para alinear de forma vertical */
  justify-content: flex-start;
  /* Asegura que el contenido esté alineado desde el principio */
  gap: 10px;
  /* Espaciado entre el título, la imagen de efecto y el párrafo */
  align-items: flex-start;
  /* Alineamos los elementos a la izquierda */
}

@media (max-width: 768px) {
  .programas-diferenciadores h2 {
    width: 400px;
  }

  .programas-diferenciadores .titulo-seccion .contenedor-programas .programas {
    font-size: 60px;
  }

  .programas-diferenciadores .titulo-seccion .contenedor-programas .diferenciadores {
    font-size: 55px;
  }

  .programas-diferenciadores .descripcion-seccion {
    margin: auto;
    max-width: 350px;
    text-align: justify;
    /* Justifica el texto */
    text-align-last: center;
    /* Centra la última línea */
    font-size: 20px;
  }

}

/* Títulos */
.ProgramasDiferenciadores .col-text h3 {
  font-size: 2rem;
  color: #010c4d;
  margin: 0;
  text-align: center;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
}

/* Imagen de efecto visual */
.ProgramasDiferenciadores .col-text img.efecto-visual {
  width: 100px;
  margin: 0 auto;
  /* Centrar la imagen de efecto visual */
}

/* Párrafo */
.ProgramasDiferenciadores .col-text p {
  font-size: 1.8rem;
  color: #010c4d;
  margin: 0;
  text-align: justify;
  line-height: 1.5;
  font-family: 'CeraPro', sans-serif;
  font-weight: 500;
}

/* Ajustes para el tercer row (centrado y única columna) */
.ProgramasDiferenciadores .row:last-child {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.ProgramasDiferenciadores .row:last-child .col-single {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* Ajuste responsivo */
@media (max-width: 768px) {
  .ProgramasDiferenciadores .row {
    flex-direction: column;
    /* Los rows se apilan en columnas */
  }

  .ProgramasDiferenciadores .col-content {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centra los elementos verticalmente */
    transform: translate(-70px);
  }

  .ProgramasDiferenciadores .col-content>* {
    /* Selecciona todos los hijos directos de .col-content */
    text-align: center;
    /* Centra el texto horizontalmente */
  }

  /* Si tienes clases específicas para los elementos, puedes usarlas: */
  .ProgramasDiferenciadores .imagen-representativa {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .ProgramasDiferenciadores .efecto-visual {
    transform: translate(1px);
  }

  .programas-diferenciadores .col-content p {
    word-break: break-all;
  }
}


/* --------------------- que ofrecemos? / Campos formativo / Testimonio------------------------- */
/* =================================== */
/* Sección principal */
.que-ofrecemos-section {
  padding: 50px;
  font-family: 'Arial', sans-serif;
  background-color: #ffffff;
  border-radius: 50px;
}

/* Contenedor general */
.que-ofrecemos-header-content {
  align-items: center;
  text-align: center;


}

.que-ofrecemos-header-content h1 {
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  font-size: 60px;
  color: #010c4d;
  margin-bottom: 20px;
}

.que-ofrecemos-header-content .unico {
  color: #ffffff;
  font-family: 'AvenusType', sans-serif;
  font-weight: 400;
  font-size: 100px;
}

.que-ofrecemos-header-content .estrellasU {
  width: 40px;
  height: 40px;
  transform: translate(-60px, 40px);
}

.que-ofrecemos-image-right {
  width: 100%;
  max-width: 500px;
  height: auto;

}


.que-ofrecemos-image-container {
  flex-shrink: 0;
}

.que-ofrecemos-image {
  width: 100%;
  height: auto;
  /* max-width: 80px;
    height: 150px; */
}

.parrafo-righty {
  width: 700px;
  font-family: 'CeraPro', sans-serif;
  font-weight: 400;
  text-align: justify;
  padding: 20px;
  font-size: 1.8em;
}

.parrafo-righty strong {
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  color: #010c4d;
}

.rigthyfrances img {
  width: 100%;

  /* width: 300px; */
  height: auto;
  display: block;
  margin: 0 auto;
}

.ofrecemos-rigthys {
  display: flex;
  justify-content: center;
  /* Centra las columnas horizontalmente */
  align-items: center;
  /* Alinea verticalmente */
  text-align: center;
  /* Alinea el texto de forma centrada */
}



/* ================== Sección desCimagenes ================== */
/* Estilo general de .desCimagenes */
.desCimagenes {
  margin-top: 50px;
  /* Fondo claro para distinguir */
  padding: 20px;
  border-radius: 10px;
}

/* Configuración de las filas */
.desCimagenes .que-ofrecemos-row {
  display: flex;
  flex-wrap: wrap;
  /* Permite que se ajusten en pantallas pequeñas */
  justify-content: space-between;
  /* Espacia las columnas */
  align-items: stretch;
  /* Estira las columnas para que tengan la misma altura */
  margin-bottom: 0;
  /* Espaciado entre filas */
  gap: 20px;
  /* Espacio entre columnas */
}



/* Configuración de las columnas */
.desCimagenes .que-ofrecemos-column {
  flex: 1 1 45%;
  /* Cada columna ocupa un 45% del ancho disponible */
  max-width: 100%;
  /* Limita el ancho máximo */
  display: flex;
  /* Asegura que los elementos internos respeten el diseño flex */
  flex-direction: column;
  /* Alinea los elementos internos verticalmente */
  justify-content: center;
  /* Centra el contenido verticalmente */
  box-sizing: border-box;
  /* Incluye el padding y border en el tamaño total */
  transform: translate(120px);

}

/* Contenedor de imágenes */
.desCimagenes .que-ofrecemos-image-container {
  text-align: center;
  /* Centra las imágenes horizontalmente */
  display: flex;
  justify-content: center;
  /* Centra horizontalmente */
  align-items: center;
  /* Centra verticalmente */
}


.desCimagenes .que-ofrecemos-paragraph strong {
  /* Resalta el texto en negritas */
  color: #ffffff;
  /* Color del texto */
  /* Aplica la fuente CeraPro */
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
}

/* Estilo de las imágenes */
.desCimagenes .que-ofrecemos-image {
  width: 150px;
  /* Ajusta el tamaño de las imágenes */
  height: auto;
  /* Mantiene la proporción */
  border-radius: 10px;
}


/* Estilos de los párrafos */
.desCimagenes .que-ofrecemos-paragraph {
  flex: 1;
  text-align: left;
  font-size: 22px;
  color: #010c4d;
  line-height: 1.6;
  /* Justifica el texto */
  margin: 0;
  padding: 10px;
  flex-grow: 1;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  max-width: 400px;
  /* Hace que el párrafo ocupe el espacio disponible */
}

.desCimagenes .que-ofrecemos-row p {
  width: 100%;
}

/* Contenedor de contenido en las columnas */
.desCimagenes .que-ofrecemos-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Centra verticalmente la imagen y el texto */
  gap: 20px;
  /* Espaciado entre la imagen y el texto */
}

.que-ofrecemos-image-right {
  display: block;
  /* Necesario para que `margin: auto` funcione */
  margin: 0 auto;
}


/* Estilos generales */
.desCimagenes {
  margin-top: 50px;
  padding: 20px;
  border-radius: 10px;
}

/* Configuración de las filas */
.desCimagenes .que-ofrecemos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 0;
  gap: 20px;
}

/* Configuración de las columnas */
.desCimagenes .que-ofrecemos-column {
  flex: 1 1 45%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  transform: translate(120px);
}

/* Contenedor de imágenes */
.desCimagenes .que-ofrecemos-image-container {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo de las imágenes */
.desCimagenes .que-ofrecemos-image {
  width: 150px;
  height: auto;
  border-radius: 10px;
}

/* Estilos de los párrafos */
.desCimagenes .que-ofrecemos-paragraph {
  flex: 1;
  text-align: left;
  font-size: 22px;
  color: #010c4d;
  line-height: 1.6;
  margin: 0;
  padding: 10px;
  flex-grow: 1;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  max-width: 400px;
}

/* Contenedor de contenido en las columnas */
.desCimagenes .que-ofrecemos-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

/* Media query para pantallas pequeñas */
@media (max-width: 768px) {

  /* Ajustes en las filas */
  .desCimagenes .que-ofrecemos-row {
    flex-direction: column;
    /* Apilamos las filas verticalmente */
    align-items: center;
    /* Centramos los elementos */
  }

  /* Ajuste en las columnas */
  .desCimagenes .que-ofrecemos-column {
    flex: 1 1 100%;
    /* Hacemos que cada columna ocupe el 100% del ancho */
    max-width: 100%;
    /* Asegura que no exceda el 100% */
    transform: translate(0);
    /* Reseteamos la transformación */
    padding: 10px;
    /* Añadimos un pequeño padding para separación */
  }

  /* Ajuste en las imágenes */
  .desCimagenes .que-ofrecemos-image {
    width: 100px;
    /* Reducimos el tamaño de la imagen */
  }

  /* Ajustes en los párrafos */
  .desCimagenes .que-ofrecemos-paragraph {
    font-size: 18px;
    /* Reducimos el tamaño del texto */
    max-width: 100%;
    /* Permitimos que ocupe todo el ancho disponible */
    text-align: center;
    /* Centramos el texto */
  }

  /* Ajuste en el contenedor de imágenes */
  .desCimagenes .que-ofrecemos-image-container {
    margin-bottom: 10px;
    /* Añadimos un pequeño margen abajo */
  }
}




/* ========================================================== */


/* ======================================= */
.subtitulos {
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  font-size: 40px;
  color: #010c4d;
  text-align: center;
  margin-top: 100px;
}


/* Estilo para la sección de testimonio */
.testimonio {
  transform: translate(0, 50px);
  background-color: #ffffff;
  border-radius: 50px;
  padding: 30px;
  /* Agregar un poco de padding alrededor para darle espacio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Sombra suave para dar un toque elegante */
}

/* Estilo para el título dentro de la sección de testimonio */
.testimonio .title-testimonio h2 {
  width: 1100px;
  text-align: center;
  display: block;
  margin: auto;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  font-size: 90px;
  color: #010c4d;
  text-align: center;
  margin-top: 100px;
}

.testimonio .title-testimonio {
  margin-bottom: 100px;
}

@media (max-width: 768px) {
  .testimonio .title-testimonio h2 {
    width: 100%;
    /* Ocupa todo el ancho del contenedor */
    max-width: 100%;
    /* Asegura que no se salga del contenedor */
    text-align: center;
    /* Centra el texto */
    font-size: 60px;
    /* Reduce el tamaño del texto para pantallas pequeñas */
    margin: 0 auto;
    /* Asegura que esté centrado */
    padding: 0 15px;
    /* Agrega un padding interno para evitar que se pegue a los bordes */
  }
}

/* Contenedor del video: Usamos flexbox para centrar el video horizontalmente */
.testimonio .video-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  /* Centra el video horizontalmente */
  align-items: center;
  /* Opcional: si le das una altura al contenedor, también centra verticalmente */
}

/* Estilo para el video */
.testimonio video {
  max-width: 100%;
  /* Asegura que el video no se desborde */
  height: auto;
  /* Mantiene la proporción del video */
  border-radius: 20px;
  /* Bordes redondeados para el video */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Sombra suave para el video */
  transition: transform 0.3s ease-in-out;
  /* Efecto de transición en hover */
}

/* Efecto de hover en el video */
.testimonio video:hover {
  transform: scale(1.05);
  /* Aumenta un poco el tamaño del video al pasar el mouse */
}


/* aulas */
/* Estilos para la sección Aulas */
.aulas {
  border-radius: 50px;
  background-color: #ffffff;
}

.aulas-section {
  text-align: center;
  /* Centrar todo el contenido de la sección */
  padding: 50px 20px;
  /* Espaciado interno para separar elementos */
}

/* Estilos para el título */
.title-conoce-nuestras-aulas h2 {
  color: #010c4d;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  /* Fuente personalizada */
  margin: 0;
  font-size: 80px;
  /* Tamaño de texto por defecto */
}

.title-conoce-nuestras-aulas span {
  color: #bcd864;
  font-family: 'AvenusType', sans-serif;
  font-weight: 400;
  font-size: 100px;
  /* Centrado del texto */
  text-align: center;
}

.title-conoce-nuestras-aulas {
  margin-bottom: 40px;

}

@media (max-width: 768px) {
  .title-conoce-nuestras-aulas h2 {
    font-size: 40px;
    /* Tamaño de texto por defecto */
  }

  .title-conoce-nuestras-aulas span {
    font-size: 60px;
    /* Centrado del texto */
  }

}

/* Carrusel */
.carousel-inner {
  width: 100%;
  /* Asegura que el carrusel ocupe todo el ancho disponible */
  overflow: hidden;
  /* Esconde cualquier contenido que sobresalga */
}

.carousel-inner .item {
  display: none;
  /* Ocultamos las imágenes por defecto */
  width: 100%;
  /* Cada imagen ocupará el 100% del contenedor */
  text-align: center;
  /* Centra las imágenes dentro de su contenedor */
}

.carousel-inner .item.active {
  display: block;
  /* Solo mostramos la imagen activa */
}

.carousel-inner img {
  max-width: 100%;
  /* Asegura que las imágenes no se salgan del contenedor */
  height: auto;
  /* Mantiene la proporción de las imágenes */
  object-fit: cover;
  /* Asegura que las imágenes cubran el área sin distorsionarse */
  margin: 0 auto;
  /* Centra la imagen */
}

/* Opcional: bordes redondeados */
.carousel {
  border-radius: 10px;
  overflow: hidden;
  /* Asegura que las imágenes no sobresalgan */
}

/* Ajuste de tamaño del carrusel */
#genericCarousel {
  max-width: 80%;
  /* Ajusta el tamaño máximo según tus necesidades */
  margin: 0 auto;
  display: block;
  /* Asegura que el carrusel esté visible */
  visibility: visible !important;
  /* Forzar visibilidad */
}

#genericCarousel .carousel-control.left,
#genericCarousel .carousel-control.right {
  background-image: none !important;
  filter: none !important;
}

/* Responsividad: Ajustar para pantallas pequeñas */
@media (max-width: 767px) {
  #genericCarousel {
    max-width: 100%;
    /* El carrusel ocupará todo el ancho en pantallas pequeñas */
  }

  .carousel-inner img {
    height: 200px;
    /* Ajusta la altura para pantallas pequeñas */
    object-fit: contain;
    /* Asegura que las imágenes no se recorten */
  }
}

/* Responsividad: Ajustar para pantallas medianas */
@media (max-width: 1024px) {
  #genericCarousel {
    max-width: 100%;
    /* Ajusta el tamaño en pantallas medianas */
  }
}

.dentroAula {
  margin-top: -30px !important;
  text-align: center;
  justify-content: center;
  margin: 100px;
  align-items: center;
}

.dentroAula .titulo {
  display: block;
  text-align: left;
  color: #010c4d;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  /* Fuente personalizada */
  font-size: 40px;
  margin-bottom: 30px;
}

.dentroAula .titulo span {
  color: #6cc5f1;

}

.dentroAula .descripcion {
  font-size: 18px;
  color: #010c4d;
  font-family: 'CeraPro', sans-serif;
  font-weight: 400;
  /* Fuente personalizada */
  text-align: justify;
  margin-bottom: 40px;
}

.dentroAula .descripcion strong {
  color: #010c4d;
  font-family: 'CeraPro', sans-serif;
  font-weight: 900;
  /* Fuente personalizada */
}

@media (max-width: 768px) {
  .dentroAula {
    margin: 20px;
    /* Reduce los márgenes generales para pantallas pequeñas */
    text-align: center;
    /* Centra el contenido principal */
  }

  .dentroAula .titulo {
    font-size: 30px;
    /* Ajusta el tamaño del título */
    text-align: center;
    /* Centra el título en pantallas pequeñas */
    margin-bottom: 20px;
    /* Reduce el espacio inferior */
  }

  .dentroAula .descripcion {
    font-size: 16px;
    /* Reduce el tamaño del texto descriptivo */
    text-align: justify;
    /* Mantiene la justificación para buena lectura */
    padding: 0 15px;
    /* Agrega espacio interno para evitar que se pegue a los bordes */
    margin-bottom: 30px;
    /* Ajusta el espacio inferior */
  }
}