.barra_trasparente{
    width: 100%;
    height: 50px;

    margin: 20px 0 20px 0;
}
.B1{
    width: 5.33%;
    height: 100%;
    background: #611232;
    float: left;
}
.B2{
    width: 5.33%;
    height: 100%;
    background: #a57f2c;
    float: left;
}
.B3{
    width: 20.33%;
    height: 100%;
    background: #DDC9A3;
    float: left;
}
.titulo_pagina{
  text-align: center;
  color: black;
  font-size: 30px;
    margin-top: 9px;
}


/* === Sección principal vision === */
.vision {
  position: relative;
  width: 100%;
  min-height: 250px;
  background: url("../Img/fondo.jpg") center/cover no-repeat; /* imagen opcional */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin: 30px 0 30px 0;
}

/* Capa de opacidad sobre la imagen vision*/
.vision .overlay {
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: rgba(0, 0, 0, 0.4); /* oscurece la imagen */
  z-index: 1;
}

/* Contenido dividido en dos columnas vision */
.vision-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
}

/* Columna izquierda vision */
.vision .izquierda {
  background-color: #13322e; /* #13322e con 50% opacidad */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.vision .izquierda h2 {
  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
}

/* Columna derecha  vision*/
.vision .derecha {
  background-color: #dcc79b;
  color: #555;
  padding: 40px;
  font-size: 1.1rem;
  line-height: 1.5;
}

/* === Responsive vision === */
@media (max-width: 768px) {
  .vision-content {
    grid-template-columns: 1fr; /* se apilan */
  }

  .vision .izquierda, .vision .derecha {
    text-align: center;
    padding: 20px;
  }

  .vision .izquierda h2 {
    font-size: 1.6rem;
  }
}

/* === Sección principal mision  === */
.mision {
  position: relative;
  width: 100%;
  min-height: 250px;
  background: url("../Img/fondo.jpg") center/cover no-repeat; /* imagen opcional */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin: 30px 0 30px 0;
}

/* Capa de opacidad sobre la imagen mision */
.mision .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* Contenido dividido en dos columnas (invertido) mision */
.mision-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 60% 40%; /* texto más ancho, título más angosto */
  width: 100%;
}

/* Columna izquierda (texto) mision */
.mision .izquierda {
  background-color: #dcc79b;
  color: #555;
  padding: 40px;
  font-size: 1.1rem;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Columna derecha (título) mision */
.mision .derecha {
  background-color: #13322e; /* #13322e con 50% opacidad */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mision .derecha h2 {
  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
}

/* === Responsive mision=== */
@media (max-width: 768px) {
  .mision-content {
    grid-template-columns: 1fr; /* se apilan */
  }

  .mision .izquierda,
  .mision .derecha {
    text-align: center;
    padding: 20px;
  }

  .mision .derecha h2 {
    font-size: 1.6rem;
  }
}


/* === Sección principal Filosofia === */
.filosofia {
  position: relative;
  width: 100%;
  min-height: 250px;
  background: url("../Img/fondo.jpg") center/cover no-repeat; /* imagen opcional */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin: 30px 0 30px 0;
}

/* Capa de opacidad sobre la imagen Filosofia*/
.filosofia .overlay {
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0 */
  background: rgba(0, 0, 0, 0.4); /* oscurece la imagen */
  z-index: 1;
}

/* Contenido dividido en dos columnas Filosofia */
.filosofia-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 40% 60%;
  width: 100%;
}

/* Columna izquierda Filosofia*/
.filosofia .izquierda {
  background-color: #13322e; /* #13322e con 50% opacidad */
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.filosofia .izquierda h2 {
  font-size: 2rem;
  font-weight: bold;
  font-style: italic;
}

/* Columna derecha Filosofia*/
.filosofia .derecha {
  background-color: #dcc79b;
  color: #555;
  padding: 40px;
  font-size: 1.1rem;
  line-height: 1.5;
}

/* === Responsive Filosofia === */
@media (max-width: 768px) {
  .filosofia-content {
    grid-template-columns: 1fr; /* se apilan */
  }

  .filosofia .izquierda, .filosifa .derecha {
    text-align: center;
    padding: 20px;
  }

  .filosofia .izquierda h2 {
    font-size: 1.6rem;
  }
}

.organigrama{
  width: 100%;
  height: 100px;
  background-color: #ff5353;
  margin-bottom: 50px;
}