@charset "UTF-8";/* Variables*//* Definición de variables */ :root {  --Uno: rgba(230, 234, 192, 1.00);  --Dos: rgba(245, 247, 231, 1.00);  --Tres: rgba(161, 154, 25, 1.00);  --Cuatro: rgba(62, 59, 9, 1.00);  --Cinco: rgba(230, 234, 192, 0.78);  --Blanco: rgba(252, 252, 252, 1.00);}/* Elimina márgenes y rellenos predeterminados */* {  margin: 0;  padding: 0;  box-sizing: border-box;}/* Imagen responsibe */.imagen-responsive {    max-width: 100%;    display: flex;    justify-content: center; /* Centra la imagen */}.imagen-responsive img {    width: 100%; /* Hace que la imagen se adapte al contenedor */    max-width: 530px; /* No crecerá más allá de su tamaño original */    height: auto; /* Mantiene la proporción */    border-radius: 10px;    border: 1.5px solid var(--Tres);    padding: 5px;}/* Cambiar imagen del footer*/.logo {    text-align: center; /* Centra el contenido del header */}.logo img {    max-width: 100%; /* Asegura que la imagen no se salga del contenedor */    height: auto; /* Mantiene la proporción de la imagen */}/* Cambio de imagen en dispositivos móviles en orientación vertical */@media only screen and (max-width: 767px) and (orientation: portrait) {    .logo img {        content: url("../imgs/inicio/SoloCalandaima.png"); /* Cambia la imagen */    }}table {  width: 100%;}th, td {  padding: 10px;}.columna-izquierda {  text-align: right;  width: 50%;}.columna-derecha {  text-align: left;  width: 50%;}.divMenuGrupo {  display: flex;  justify-content: center; /* Centra los botones */  margin-top: 8px;  margin-bottom: 8px;}.menuGrupo {  display: flex;  gap: 10px; /* Espaciado entre botones */}.menuGrupo button {  padding: 8px 8px;  font-size: 12px;  background-color: var(--Tres);  color: var(--Uno);  border: none;  border-radius: 5px;  cursor: pointer;  transition: background 0.3s;}.menuGrupo button:hover {  color: var(--Cuatro);}/* Para crear una persina*/.persiana {  margin: 7px auto; /* Centra horizontalmente */  padding: 4px;  background-color: var(--Dos);  color: var(--Cuatro);  border: 1px solid;  border-radius: 3px;  text-align: center;  cursor: pointer;  width: 250px;  /*display: block;*/ /* Asegura que el margin auto funcione */}.persiana:hover {  background-color: var(--Tres);  color: var(--Dos);  border-width: 1px;  border-color: var(--Cuatro);}#contenido {  display: none;  justify-content: center; /* Centra horizontalmente */  margin-top: 10px; /* Espaciado superior */  flex-wrap: nowrap; /* No permite que los botones pasen a otra línea */}/* Una Card IA */.carousel-container {  display: flex;  align-items: center;  position: relative;  overflow: hidden;  width: 100%;  max-width: 1024px;  margin: auto;  border-top: 1px solid rgba(161, 154, 25, 1.00);  padding-top: 3px;  padding-bottom: 3px;}.carousel {  display: flex;  gap: 20px; /* Espaciado entre las cards */  overflow-x: auto; /* Permite el desplazamiento horizontal */  scroll-behavior: smooth; /* Suaviza el desplazamiento */  padding: 10px;  scrollbar-width: none; /* Para Firefox */}/* Para navegadores basados en WebKit (Chrome, Safari, Edge) */.carousel::-webkit-scrollbar {  display: none; /* Oculta la barra de desplazamiento */}.card {  min-width: 230px; /* Ancho mínimo del card para el carrusel */  max-width: 230px; /* Fija el ancho del card */  border: 1px solid #ddd; /* Borde alrededor del card */  border-radius: 8px; /* Esquinas redondeadas */  overflow: hidden; /* Asegura que nada sobresalga */  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */  background-color: white;  transition: transform 0.3s ease; /* Transición para hover */  flex-shrink: 0; /* Impide que las cards se reduzcan en tamaño */  margin-left: 0px;  margin-right: 10px;}.card:hover {  transform: translateY(-5px); /* Efecto de elevación al pasar el cursor */}.card-img {  width: 150px; /* Asegura que la imagen tenga un tamaño cuadrado */  height: 150px; /* Igual que el ancho para mantener la forma circular */  object-fit: cover; /* Recorta la imagen adecuadamente */  display: block;  margin: 0 auto; /* Centra la imagen horizontalmente */  padding-top: 5px;  border-radius: 50%; /* Hace que la imagen sea completamente circular */}.card-content {  padding: 15px;  text-align: center; /* Centra el contenido del card */}.card-title {  font-size: 1em; /* Ajusta el tamaño del título */  margin-bottom: 10px;  color: #333; /* Color del título */  font-weight: bold; /* Resalta el título */  border-width: medium;}.card-description {  font-size: 14px;  color: #555; /* Color del texto descriptivo */  line-height: 1.3em; /* Mejora la legibilidad */}.carousel-btn {  background-color: rgba(252, 252, 252, 1.00);  color: var(--Tres);  border: none;  cursor: pointer;  font-size: 1.5rem;  position: absolute;  top: 50%;  transform: translateY(-50%);  z-index: 1;}.carousel-btn:hover {  color: var(--Cuatro);}.left-btn {  left: 10px;}.right-btn {  right: 10px;}/* Cabecera*/header {  width: 100vw;  height: 120px;  background-color: var(--Uno);  display: flex;  justify-content: center; /* Centra la imagen horizontalmente */  align-items: center; /* Centra la imagen verticalmente */}body main {  width: 100vw;  height: auto;  background-color: var(--Dos);}.divBotones {  display: flex;  justify-content: center; /* Centra la imagen horizontalmente */  align-items: center; /* Centra la imagen verticalmente */  padding-top: 15px;  padding-bottom: 21px;  margin-top: 0px;}.divBoton {  border: 1px solid var(--Tres);  border-radius: 8px;  padding-top: 5px;  width: 100px;  height: auto;  padding-right: 5px;  padding-bottom: 5px;  padding-left: 5px;  margin-right: 14px;  background-color: var(--Tres);  color: var(--Blanco);  text-align: center;  cursor: pointer;  transition: background-color 0.5s ease, transform 0.5s ease; /* Transición lenta */}.divBoton:hover {  border: 1px solid var(--Tres);  border-radius: 8px;  padding-top: 5px;  width: 100px;  height: auto;  margin-top: 0px;  padding-right: 5px;  padding-bottom: 5px;  padding-left: 5px;  margin-right: 14px;  background-color: var(--Uno);  color: rgba(62, 59, 9, 1.00);  transform: scale(1.1); /* Hace que el botón se agrande ligeramente */}footer {  width: 100vw;  height: auto;  background-color: var(--Cinco);}.contenedorFotos {    display: flex; /* Activa Flexbox */    gap: 10px; /* Espacio entre las cajas (opcional) */    flex-direction: row;    justify-content: center;    flex-wrap: wrap;    padding-top: 6px;    padding-right: 6px;    padding-bottom: 6px;    padding-left: 6px;    padding: 1em;    border-width: 0px;}.contenedorComunicados {  display: flex; /* Activa Flexbox */  gap: 10px; /* Espacio entre las cajas (opcional) */  flex-direction: column;  justify-content: center;  flex-wrap: wrap;  padding-top: 6px;  padding-right: 6px;  padding-bottom: 6px;  padding-left: 6px;  padding: 1em;}.contenedorAsignaturas {  display: flex; /* Activa Flexbox */  gap: 10px; /* Espacio entre las cajas (opcional) */  flex-direction: column;  justify-content: center;  flex-wrap: wrap;  padding-top: 6px;  padding-right: 6px;  padding-bottom: 6px;  padding-left: 6px;  padding: 1em;}.divContenido {  display: flex;  flex-direction: column;  justify-content: center; /* Centra la imagen horizontalmente */  align-items: center; /* Centra la imagen verticalmente */  padding-top: 10px;  margin-bottom: 2px;  height: 80vh;}.divContenidoTitulo {  display: flex;  justify-content: center;  border: 1px solid var(--Tres);  width: 200px;  padding-top: 8px;  padding-right: 15px;  padding-bottom: 4px;  padding-left: 15px;  border-radius: 6px;}.divContenidoSubTitulo {  margin-bottom: 2px;  padding-top: 8px;  padding-right: 20px;  padding-bottom: 8px;  padding-left: 20px;  font-weight: 600;  position: relative; /* Necesario para usar ::before */}.divContenidoSubTitulo::before {  content: ""; /* Línea personalizada */  position: absolute;  top: 0; /* Ubicación en la parte superior */  left: 10%; /* Ajusta el inicio de la línea */  width: 80%; /* Longitud de la línea (ajústala según necesites) */  height: 1px; /* Grosor de la línea */  background-color: var(--Tres); /* Color de la línea */}.divContenidoSubTitulo p {  font-weight: 300;  color: rgba(53, 52, 46, 1.00);  margin-top: 6px;  column-count: 2; /* Divide el texto en dos columnas */  column-gap: 10px; /* Espaciado entre las columnas */}.divContenidoAsignatura p {  font-weight: 300;  color: rgba(53, 52, 46, 1.00);  margin-top: 6px;}.divContenidoFoto {  height: 200px; /* Altura de cada caja (ajústala según necesidad) */  display: flex; /* Centra el contenido dentro de la caja */  justify-content: center; /* Centra horizontalmente el contenido */  align-items: center; /* Centra verticalmente el contenido */  margin-right: 2px;  margin-left: 2px;}.divContenidoFoto img {  padding-top: 4px;  padding-right: 6px;  padding-bottom: 4px;  padding-left: 6px;  border: 1px solid var(--Tres);  border-radius: 4px;}.contenedorPie .celda {  flex: 1; /* Hace que cada caja crezca uniformemente */  height: 140px; /* Altura de cada caja (ajústala según necesidad) */  border: 1px solid #FCFCFC;  display: flex; /* Centra el contenido dentro de la caja */  justify-content: center; /* Centra horizontalmente el contenido */  align-items: center; /* Centra verticalmente el contenido */  flex-direction: column;  border-radius: 4px;  margin-right: 10px;  margin-left: 10px;}.contenedorPie .celda h4 {  color: rgba(45, 49, 38, 0.73);  font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;  font-size: 14px;  text-align: center;}.contenedorPie .celda div p {  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;  font-size: 13px;  margin-top: 8px;  text-align: center;  color: rgba(78, 78, 78, 1.00);}.contenedorPie .celda div ul {  display: flex;  flex-direction: column;  gap: 10px;  color: rgba(79, 79, 79, 1.00);  text-align: center;  margin-top: 0px;  padding-top: 11px;  font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;  list-style-type: none; /* Elimina los números o puntos de la lista */  padding-left: 0;}.contenedorCards {  padding: 0.5em 0.5em;  display: flex;  justify-content: center;  flex-wrap: wrap;}.cardGeneral {  max-width: 18em;  margin: 1em;  border-radius: 10px;  background-color: rgba(250, 250, 250, 0.75);  display: flex;  flex-direction: column;  flex-grow: 1;}.cardImagen {  display: flex;  justify-content: center;  max-height: 20em;  overflow: hidden;  border-radius: 10px 10px 0 0;}.cardContenido {  padding: 1em 1em 0;  flex-grow: 1;  display: flex;  flex-direction: column;}.cardCabecera {  border-bottom: 1px solid rgba(0, 78, 146, 0.2);  margin-bottom: 1em;  display: flex;  justify-content: space-between;  align-items: baseline;}.cardNombre {  color: #A19A19;  font-style: italic;}.cardFecha {  color: gray;  font-size: 80%;}.cardTexto {  font-size: 0.8em;  line-height: 1.5;  flex-grow: 1;  color: rgba(62, 59, 9, 1.00);  font-style: normal;  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;  text-align: left;}.cardPie {  /* Actúa como Botón */  cursor: pointer;  transition: background-color 0.5s ease, transform 0.5s ease; /* Transición lenta */  background-color: #A19A19;  color: white;  text-align: center;  border-radius: 0 0 10px 10px;  margin-right: -1em;  margin-left: -1em;  margin-top: 1em;  padding: 0.5em;}.cardPie a {  /* Actúa como Botón */  text-decoration: none;  cursor: pointer;  transition: background-color 0.5s ease, transform 0.5s ease; /* Transición lenta */  color: white;  text-align: center;  border: 1px solid rgba(245, 247, 231, 1.00);  border-radius: 5px 5px 5px 5px;  margin-top: 0px;  padding-top: 3px;  padding-right: 8px;  padding-bottom: 3px;  padding-left: 8px;}.cardPie a:hover {  background-color: var(--Uno);  color: rgba(62, 59, 9, 1.00);  transform: scale(1.1); /* Hace que el botón se agrande ligeramente */}.cardImagen img {  object-fit: cover;  display: block;}#btnMenu {  display: none;}#btnMenu:checked ~ .menu {  margin-left: 10px;}main label {  cursor: pointer;  margin-left: 10px;  margin-top: 0px;}.menu {  position: absolute;  margin-left: -150px;  transition: all 0.5s;  width: 151px;  margin-bottom: 0px;}.menu ul {  width: 100%;  position: absolute;  margin-left: 0%;  transition: all 0.5s;  margin-top: 2px;  z-index: 1;  list-style: none;}.menu li {  height: 31px;  width: auto;  padding-left: 10px;  padding-top: 0px;  color: rgba(230, 234, 192, 1.00);  background-color: rgba(161, 154, 25, 0.74);  margin-left: 0px;  margin-right: 5px;  border-radius: 7px;  margin-top: 1px;  padding-bottom: 4px;}.menu li a {  text-decoration: none;  padding-top: 5px;  padding-left: 5px;  display: block;  color: rgba(252, 252, 252, 1.00);  margin-left: 0px;  margin-top: 2px;}.menu li a:hover {  color: rgba(62, 59, 9, 1.00);  font-weight: bold;}.divMenu {  border: 1px solid rgba(230, 234, 192, 1.00);  width: 100%;  height: 38px;  margin-top: 1px;}.divContenidoSubTitulo h4 {  text-decoration: underline;  text-decoration-color: var(--Tres); /* Cambia el color del subrayado a gris */  text-decoration-thickness: 1px; /* Ajusta el grosor del subrayado */  text-underline-offset: 4px; /* Separa la línea del texto */}.contenedorPie {  display: flex; /* Activa Flexbox */  justify-content: space-between; /* Distribuye las cajas uniformemente */  gap: 10px; /* Espacio entre las cajas (opcional) */  flex-direction: column;  flex-grow: 1;  padding-top: 6px;  padding-right: 6px;  padding-bottom: 6px;  padding-left: 6px;  padding: 1em;}.divParrafoCentrado {  text-align: center;  margin-top: 4px;  margin-bottom: 8px;  padding-left: 20px;  padding-right: 20px;  font-size: large;  color: rgba(53, 52, 46, 1.00);}/* Si el ancho es 650px o más la configuración será*/@media (min-width: 650px) {  main label {    display: none;  }  .menu {    position: absolute;    background-color: rgba(62, 59, 9, 1.00);    width: 100%;    margin-left: 0px;    margin-bottom: 10px;    margin-top: 0px;    padding-top: 0px;    padding-right: 0px;    padding-bottom: 0px;    padding-left: 0px;  }  .menu ul {    display: flex;    flex-direction: row;    justify-content: center;  }  .menu li a {    display: block;    padding-top: 4px;    padding-right: 8px;    padding-bottom: 8px;    padding-left: 0px;    text-align: center;  }  .contenedorPie {    display: flex; /* Activa Flexbox */    justify-content: space-between; /* Distribuye las cajas uniformemente */    gap: 10px; /* Espacio entre las cajas (opcional) */    flex-direction: row;    flex-grow: 1;    padding-top: 6px;    padding-right: 6px;    padding-bottom: 6px;    padding-left: 6px;    padding: 1em;  }  .desktop-image {    display: block; /* Muestra la imagen de escritorio */  }  .mobile-image {    display: none;  }}/* Si el ancho es a lo más de 600px*/@media (max-width: 650px) {  .desktop-image {    display: none;  }  .mobile-image {    display: block; /* Muestra la imagen para dispositivos móviles */  }}