/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    color: #333;
}

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

/* Encabezado */
header {
    background-color: #fff;
    padding: 20px 0;
    
}

 

.banner {
  background-color: #850202; /* Un color rojo oscuro similar al de la imagen */
  color: #FFFFFF; /* Color de texto blanco */
  font-family: Arial, sans-serif; /* Una fuente legible */
   
  padding: 10px 0  ; /* Añade espacio alrededor del texto para que no quede pegado a los bordes */
  display: flex;

    align-items: center;
   
    width: 100%; /* Ancho máximo para que no se vea demasiado ancho en pantallas grandes */
}

.header-logo img {
    height: 50px; /* Tamaño del logo */
    margin-left: 20px;
    margin-right: 20px;
}

.header-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header-nav li {
    display: inline-block;
    margin-left: 20px;
}

.header-nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

/* Contenido principal */
main {
    padding: 40px 0;
    background-color: #FFFF;
}

.main-content {
      justify-content: center; /* Centra horizontalmente el contenido del div */
  align-items: center; /* Centra verticalmente el contenido del div */
   
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px; /* Espacio interno para que el contenido no pegue al borde */
    border-left: 5px solid #850202; /* Aplica un borde izquierdo de 5px, sólido y de color rojo */
    background-color: #f3f3f3; /* Color de fondo opcional para distinguirlo */
    margin-top: 50px; /* Margen solo en la parte superior */
  margin-bottom: 50px; /* Margen solo en la parte inferior */
}

.row {
    display: flex;
    gap: 20px;
}

.col {
    flex: 1;
}
.contenedor-valores {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff; /* Fondo blanco */
  border: 1px solid #e0e0e0; /* Borde gris claro */
  border-radius: 8px; /* Bordes redondeados */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: sans-serif;
  color: #555;
}

.seccion-item {
  margin-bottom: 25px; /* Espacio entre cada sección */
}

.seccion-titulo {
  font-size: 16px;
  font-weight: bold;
  color: #555;
  display: flex;
  align-items: center;
}

.seccion-texto {
  font-size: 14px;
  line-height: 1.6;
  margin-left: 25px; /* Indenta el texto para alinearlo con el título */
  color: #777;
}

.icono-check {
  font-size: 16px;
  margin-right: 8px; /* Espacio entre el ícono y el texto */
  color: #6c757d;
}




/* Contenedor principal: Establece el tamaño y la perspectiva 3D */
/* Estilos para el contenedor de la fila (Flexbox) */
.contenedor-fila {
  display: flex;
  justify-content: center; /* Opcional: Centra las cajas en el contenedor */
  gap: 20px; /* Espacio entre las cajas */
  flex-wrap: wrap; /* Permite que las cajas se envuelvan a la siguiente línea si no caben */
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  box-sizing: border-box; /* Asegura que el padding no cause desbordamiento */
}

/* ---------------------------------------------------- */
/* Estilos generales para el efecto flip-box */
/* ---------------------------------------------------- */

/* Contenedor principal de cada tarjeta: Establece el tamaño y la perspectiva 3D */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Esto hace posible el efecto 3D */
  box-sizing: border-box;
}

/* Contenedor interno: El que gira */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s; /* Transición suave de la rotación */
  transform-style: preserve-3d; /* Esencial para que las caras se muestren correctamente */
}

/* Rotar el contenedor interno cuando se pasa el cursor sobre el contenedor principal */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg); /* Para un flip horizontal */
  /* Para un flip vertical, usarías: transform: rotateX(180deg); */
}

/* Las caras del flip-box */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Oculta la cara cuando no está de frente */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box; /* Asegura que el padding no cambie el tamaño total */
}

/* Estilos comunes para la cara del frente */
.flip-box-front {
  color: white;
}

/* Estilos comunes de la parte trasera */
.flip-box-back {
  color: white;
  transform: rotateY(180deg); /* Para un flip horizontal */
  /* Para un flip vertical, usarías: transform: rotateX(180deg); */
}

/* ---------------------------------------------------- */
/* Estilos para cada color específico */
/* ---------------------------------------------------- */

/* Estilos de la caja roja */
.color-rojo .flip-box-front {
  background-color: #e74c3c;
}
.color-rojo .flip-box-back {
  background-color: #c0392b;
}

/* Estilos de la caja azul */
.color-azul .flip-box-front {
  background-color: #3498db;
}
.color-azul .flip-box-back {
  background-color: #2980b9;
}

/* Estilos de la caja verde */
.color-verde .flip-box-front {
  background-color: #2ecc71;
}
.color-verde .flip-box-back {
  background-color: #27ae60;
}

/* Estilos de la caja morada */
.color-morado .flip-box-front {
  background-color: #9b59b6;
}
.color-morado .flip-box-back {
  background-color: #8e44ad;
}


/* Pie de página */
 
  /* Estilos para el footer */
  .footer-itszas {
    background-color: #850202; /* Color tinto aproximado al del gobierno de Zacatecas */
    color: #ffffff; /* Color de texto blanco */
    padding: 20px 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    text-align: center;
  }

  .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .footer-logo {
    flex-shrink: 0;
  }

  .logo-blanco {
    height: 80px; /* Tamaño del logo. Puedes ajustarlo según tus necesidades */
  }

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

  .instituto {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .footer-info p {
    margin: 0;
    font-size: 0.9em;
  }

  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 20px;
    padding-top: 10px;
    font-size: 0.8em;
  }

  /* Media queries para ajustar el diseño en dispositivos móviles */
  @media (max-width: 768px) {
    .footer-content {
      flex-direction: column;
    }
    .footer-info {
      text-align: center;
    }
  }