@charset "utf-8";

body {
    font-family: Helvetica, Arial, sans-serif, Verdana;;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  vertical-align: baseline;
}

html {
    /* scroll suave */
    scroll-behavior: smooth;
    /* para que el encabezado quede visible siempre */
    scroll-padding-block-start: 5em;
  }

header {
    position: sticky;
    top: 0;
    z-index: 8000;
}

header .contenedora {
    background-color: rgb(3, 76, 105);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 8rem;
    align-items: center;
    justify-content: center;
    margin: 0;
}


a  {
    text-decoration: none;
    color: white;
}


nav ul li {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: auto;
    padding: 1rem;
    gap: .25rem;
    float: left;
    color: white;
}

header nav ul li a {
    color: white;
}

h1 { 
    color: white;
    padding: 1rem;
    text-align: center;
    justify-content: center;
    margin: auto; 
}

body ul li a {
    color: black; 
}


h2 { 
    list-style: none;
    padding: 1rem;
    color: white ;
    background-color: rgb(3, 76, 105);
    display: block;
    width: 100%;
    padding-block: 0,5em;
    text-align: left;
}

article { 
    color: white;
    background-color: rgb(3, 76, 105);
    display: block;
    width: 20em;
    text-align: center;
    margin: 2rem;
}

.imagen-articulo {
    flex: 1; 
    align-items: center; 
    padding: 1rem;
    border-radius: 0.5rem;
    color: white;
    margin: auto;
    justify-content: center;
}
    
img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

figcaption {
    padding: 1rem ;
}

p {
    color: b;
    padding: 1rem;
}

section h2 li a { 
    list-style: none;
    padding: 2dvb;
    color: white ;
    display: block;
    width: auto;
    padding-block: 0.25em .5em;
    border-radius: 100vw;
    text-align: left;
}

section { 
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

section .contenedorActualidad article{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}


img section .contenedorComunidades {
    max-width: 25%;
    width: auto;
}

article a {
    background-color: rgb(255, 115, 0);
    padding: 0.5rem;
    margin: auto;
    display: block;
    width: 5rem;
}


section .contenedorActualidad {
    display: flex;
    height: 100%;
}

.contenedorActualidad article {
    display: flex; /* Utilizamos flexbox */
    justify-content: space-between; /* Espacio entre elementos */
    align-items: center; /* Centrar verticalmente */
    margin-bottom: 20px; /* Espacio inferior entre artículos */
}

.contenedorActualidad article img {
    max-width:100%; /* Ancho máximo de la imagen */
    margin-right: 20px; /* Espacio a la derecha de la imagen */
}


.contenedora { 
    display: flex;
    background-color: rgb(255, 115, 0);
    color:  rgb(255, 115, 0);
    border-radius: none;
    text-align: center;
    justify-content: center;
    padding: 5rem;
    margin: 2rem;
    height: 100%;
}

.mail {
    display: flex;
    background-color: rgb(255, 115, 0);
    color:  rgb(255, 115, 0);
    text-align: center;
    justify-content: center;
    padding: 5rem;
    margin: 0;
    height: 100%;
}

h4 {
    color: white;
    padding: 1rem;
}

.contenedora h2 {
    color: white;
    background-color: rgb(255, 115, 0);
}

.contenedora p {
    color: white;
}



/* BOTON AZUL */

button {
    background-color:rgb(3, 76, 105) ;
    padding: 0.5rem;
    color: white;
}


.contenedora2 {
    display: flex;
    background-color:rgb(3, 76, 105);
    color: rgb(3, 76, 105);
    border-radius: none;
    text-align: center;
    justify-content: center;
    padding: 5rem;
    margin: 2rem;
    height: 100%;
}


div {
    display: block;
    unicode-bidi: isolate;
}

header nav {
    display: flex;
    flex-direction: column;
}

/* BOTON NARANJA */
.contenedora2 button {
    background-color: rgb(255, 115, 0);
}



/* NOTICIA 1 */

section.info1 {
    display: flex;
    justify-content: left;
    padding: 1rem;
    
}

section .info1 figcaption {
    display: flex;
    flex-wrap: wrap;
}

section .info1 p { 
    text-wrap: pretty;
    display: flex;
    align-items: left;
    justify-content:  left;
    text-align:  left;
    margin: 2rem;
}
section .info1 li {
    padding: 1rem;
}



/* MAIL INDEX */
main .mailin {
    background-color: white;

    width: 100%;
    height: 30rem;
    align-content: center;
}

.mailin p {
    color: white;
    border: 3px solid rgb(255, 115, 0);
    background-color: rgb(255, 115, 0);
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mailin h2 {
    background-color: rgb(255, 115, 0);
    align-items: center;
    justify-content: center;
    text-align: center;
}

/**/

@media screen and (min-width: 62em) {
    h1 { 
        color: white;
        padding: 1rem;
        text-align: center;
        justify-content: center;
        margin: 1rem; 
    }

}
   



@media screen and (min-width: 75em) {
    h1 { 
        color: white;
        padding: 1rem;
        text-align: center;
        justify-content: center;
        margin: 1rem; 
    }
    
    .organizadoraHome {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        flex-direction: column;

    }
    .menu {
        display: flex;
        justify-content: flex-end;
        padding-right: 2rem; }
    
    .menu li {
        margin: 0 1rem; }
    
}

input {
    width: 20rem;
    padding: 1rem;
}

/* VIDEOS */
div video {
    width: 80%;
    height: auto;
    aspect-ratio: 16 / 9;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 1rem;
}


/*********
Navegacion
*********/
.encabezado {
    background-color: rgb(1, 43, 59);
}


header nav ul {
    /* caja flexible */
    display: flex;
    /* elementos que no caben van a otra linea */
    flex-wrap: wrap;
    /* eje principal */
    justify-content: flex-end;
    margin-top: 0.8em;
  }
  
  /* items de lista  que contienen los vínculos del menu */
  header nav ul li {
    /* que no midan menos que: */
    min-width: 5em;
    /* separados */
    margin: 0.25em 0 0.25em 0.25em;
  }
  
  /* vínculos del menu principal */
  header nav ul li a {
    color:white ;
    padding: 0.25em 0.5em;
    text-align: center;
    /* para que estas etiquetas "a" sean "cajas" */
    display: block;
  }
  
  /* cuando el cursor se posiciona sobre los vínculos y le agrega color/subrayado */
  header nav ul li a:hover {
    color: rgb(255, 115, 0);
    text-decoration: underline;
  }


/* FOOTER */
footer {
    color: white;
    background-color: rgb(3, 76, 105);  
    padding: 2rem ;
    text-align: left ;
    flex-wrap: wrap;
    display: flex;
  }
  
  footer p {
      justify-content: left; 
      padding: 1rem;
      text-align: left;
  }
  
  footer li {
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center; /* Centra verticalmente las imágenes */
      align-content: left;
  }
  
  footer nav {
      display: flex;
      align-content: space-between;
  }
  
  footer li img {
      display: flex;
      align-content: space-between;
      max-width: 70%; /* Ajusta el ancho máximo de las imágenes */
      height: auto; /* Ajusta automáticamente la altura para mantener la proporción */
  }

  /*AGENDA*/
  .contenedorAgenda li {
    color: black;
}
  
.contenedorAgenda {
    display: flex;
    background-color: white;
    color:  rgb(255, 115, 0);
    text-align: center;
    justify-content: center;
    padding: 5rem;
    margin: 0;
    height: 100%;
}


  .calendario{
    width: 25em;
    border-radius: 1em;
    margin-left: 20%;
    margin-right: 5%;
    margin-top: 2%;
}

.mesjulio,
.mesagosto {
    width: 100%;
    margin:1.5em;
    padding: 0.5em 1.5em 0em 1em;
    background-color: white;
    border: 0.25em solid #1b4965;
    border-radius: 1em;
}

.mesjulio h3,
.mesagosto h3 {
    display: grid;
    justify-content: center;
}

.mesjulio {
margin-left: -3em;
}

.mesagosto {
    margin-left: -3em;
}

.numeroscalendario *:not(.dianombre, .diasengris, .examenes, .inscripciones, .eventos, .actividades) {
    color: #000000;
    background-color: rgba(246, 247, 251, 0);
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    line-height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.numeroscalendario {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 700;
    margin-left: 4%;
}

/* calendario nums gris */
.diasengris {
    color: #818181;
    background-color: rgba(246, 247, 251, 0);
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    line-height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.numeroscalendario li {
    margin: 0.3em;
}

.examenes {
    background-color: #76c893;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    line-height: 3em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eventos {
    background-color: #61a5c2;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    line-height: 3em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.actividades {
    background-color: #fd9e02;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    line-height: 3em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inscripciones {
    background-color:#b8b8ff;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    line-height: 3em;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;

}

.datos {
    display: grid;
align-self: center;}

.datos li {
    margin-bottom: 1em;
    margin-top: 0px;
    position: relative;
    padding-left: 1.5em;
}

.datos li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
} 


.item-inscripcion::before {
    background-color: #9381ff; /* Color para inscripción */
}

.item-examenes::before {
    background-color: #76c893; /* Color para exámenes */
}

.item-eventos::before {
    background-color: #61a5c2; /* Color para eventos */
}

.item-actividades::before {
    background-color: #fd9e02; /* Color para actividades */
}


.eventos-adicionales {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4em;
}

.evento-columna {
    background-color: rgb(3, 76, 105); 
    color: white;
    padding: 1em;
    border-radius: 1em;
    width: calc(25% - 1em); /* ancho para que haya espacio entre las columnas */
}

.evento-columna h4 {
    margin-top: 0;
}

.evento-columna button {
    background-color: #9381ff; /* Color del botón */
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 1em;
    cursor: pointer;
    margin-top: 1em;
}


.calendario-columna1 {
    display: flex;
}

/*CONFIGURACIONES GENERALES - MOBILE FIRTS*/
body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: sans-serif;
    min-height: 100vh;
}
header {
    box-shadow: 0 4px 2px #0000003f;
    position: sticky;
    top: 0;
    z-index: 8000;
}

main {
    background-color: #ffffff;
}


#boton-nav {
    background-color: transparent;
    border: none;
}

#botonNav img {
    width: 100%;
}
footer {
color: white;
background-color: rgb(3, 76, 105);  
padding: 2rem ;
text-align: left ;
          }
          
footer p {
    justify-content: left; 
    padding: 1rem;
    text-align: left;
}