@charset "utf-8";

*{box-sizing:border-box;}

body {font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    background-color: rgb(223 227 231);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 100%;
}

img {max-width: 30%;
    height: auto;
    align-content: center;} 

img.principal, img.noticia{
    max-width: 100%;
    height: auto;
    align-content: center;
}

*p {
    text-wrap: pretty;
}

#centroubalogo {
    display: inline;
    border-radius: 0;
    width: 2rem;
    padding: .1rem .1rem;
    background-color: hsla(34, 100%, 97%, 0.871);
    border: solid 3px hsl(0, 0%, 95%)
}

ul,ol {
    list-style: none;   
    }

main { 
    padding-inline: 2rem;
}
    
footer {
 background-color: rgb(14, 14, 59);
 color: white;
 margin: 0;
 padding: 2rem;
 margin-block-end: 0;
}


header {background-color: rgb(14, 14, 59);
    color: hsl(0%,0%,50%);}
   
   
    header {
        box-shadow: 0 4px 4px 
        hsl(0, 0%, 0% / 20% );
    }
   
   
   
    div.imagenlogo{
        display: inline;
    border-radius: 0;
    padding: .1rem .1rem;
          
    }

.iconos img {
    width: 30px;
    height: 30px;
}

/*HEADER---------------------------*/

header .contenedora {
    justify-content: space-between;
    align-items: center;
    max-width: 90%;
    margin: 0;
  }
  
  #boton-nav {
    background-color: transparent;
    border: none;
  }
  
  #botonNav img {
    width: 100%;
  }
  
  
  nav ul li a:hover {
    background-color: rgb(245 59 15);
    color: rgb(245 59 15);
  }
  /*MENU ----------------------------------*/

nav {
    position: relative;
  }
  
  .menu-btn,
  .menu-fondo {
    border-radius: 0.5em;
    padding: 1em;
    width: 3.5em;
    aspect-ratio: 1;
    cursor: pointer;
    transition: all 0.3s ease-out;
    position: fixed;
    top: 1em;
    right: 1em;
    z-index: 9000;
  }
  
  .menu-fondo {
    background: rgb(14, 14, 59);
    z-index: 8000;
  }
  
  .menuVisible .menu-fondo {
    background: rgb(14, 14, 59);
    width: 45vw;
    height: 200vw;
    inset: 0vw 0 auto auto;
    border-radius: 0em;
  }
  
  .menu-btn .btn-linea {
    width: 25px;
    height: 3px;
    margin: 4px 0 4px 0;
    background: #ffffff;
    transition: all 0.3s ease-out;
    position: relative;
    z-index: 9000;
  }
  
  .menuVisible .menu-btn .btn-linea {
    transform: rotate(180deg);
  }
  
  .menuVisible .menu-btn .btn-linea:nth-child(1) {
    transform: rotate(45deg) translate(4px, 6px);
  }
  
  .menuVisible .menu-btn .btn-linea:nth-child(2) {
    opacity: 0;
  }
  
  .menuVisible .menu-btn .btn-linea:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -6px);
  }
  
  nav ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    right: 0.25em;
    top: calc(100% + 4rem);
    z-index: 9999;
    transition: all .5s ease;
  }
  
  .menuVisible ul {
    visibility: visible;
    opacity: 100%;
    transition: all .5s .2s ease;
  }
  
  nav ul li a {
    display: block;
    color: #ffffff;
    margin-block-end: .5em;
    width: min(40vw, 15rem);
    text-align: center;
    padding: 1em 0.5em 1em 2em;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
  }
  
  nav ul li a:hover {
    background-color: #ffffff;
    transition: all .3s;
  }
h1.titulos { font-size: 250%;
    text-align: center;
    color: rgb(14, 14, 59);
}

h1 strong { 
    color: rgb(245 59 15) ;
    text-transform: uppercase;
}    

strong.inicio {
    display: block;
}

h3.marcha {
    color: rgb(25, 25, 110);
    font-weight: 300%;
    font-size: bold;
}

h4.comentado { 
    color: white;
    background-color: rgb(245 59 15);
    display: block;
    text-align: left;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    margin-block: 0;
    }

h2.principal { 
    color: rgb(14, 14, 59);
    font-size: 300%;
    font-weight: bold;
    margin-block: 0;
}

a { 
    font-weight: bold;
    color: white;
    text-decoration: none;
    border-radius: 10px;
    text-align: left;
    display: inline;
    
}

.seguirleyendo {
    background-color:  rgb(245 59 15);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    display: block;
    margin: 1rem;
    margin-block: 1rem;
}

footer {
     margin-block-start: 2rem;
     padding: 20px;
}

.contenedora {
gap: 2rem;
padding: 2rem;
}


article.principal {
    background-color: white ;
    padding-block-end: 0.25rem;
}

.principal p {
color: rgb(24, 24, 24);
padding-inline: 1.5rem;
padding-block: 0.75rem;
margin: 0;
}

.principal h2, .principal h3 {
    padding-inline: 1.5rem;
    margin: 0;
    padding-block: 0.25rem;
}

.noticia p {
    color: rgb(24, 24, 24);
    gap: 1rem;
}

.noticia p span {
    color:rgb(25, 25, 110);
    font-weight: bold ;
    font-size: 130%;
    display: block;
    margin-block: 1rem;
}

article.noticia {
    background-color: rgb(255, 255, 255);
    padding: 2rem;
    gap: 0.25rem;
    margin-block-start: 2rem;
}

h2.noticia {
    color:  rgb(14, 14, 59);
    font-weight: bold;
    font-size: 350%;
    display: block;
    margin-block: 0.75rem;
}

h3.noticia {
    color: rgb(25, 25, 110);
    font-weight: bold;
    font-size: 200%;
    margin-block-start: 0.25rem;
}

figcaption {
    color: rgb(80, 79, 79);
    display: block;
}


div.facultades {
    background-color:rgb(160 198 235);
    padding: 0 0 1rem 0;
}

h4.facultad {
    color: white;
    background-color:   rgb(25, 25, 110); 
    font-weight: bold;
    padding-block: 0.5rem;
    padding-left: 1rem;
    margin-block-start: 0;
}

h3.facultades {
    color:rgb(255, 255, 255) ;
    background-color: rgb(14, 14, 59);
    padding: 0.75rem;
    margin-block: 0;

}

h5.facultad {
    color:  rgb(14, 14, 59);
    font-weight: bold;
    font-size: 100%;
    margin: 1rem;
}

div article p { 
    color: rgb(24, 24, 24);
    margin: 1rem;
    margin-block-end: 2rem;
}


.inicio article h3 {
    font-weight: bold;
    font-size: 200%;
    color: rgb(25, 25, 110);
}

h3.comentarios {
    font-weight: bold;
    font-size: 150%;
    background-color:  rgb(51, 153, 255);
    color: white;
    display: block;
    padding: 1rem;
    margin-block-start: 0;
    margin-block-end: 2rem;
}

.comentarios h4 {
color: rgb(51, 153, 255);
margin-inline-start: 2rem;
}

.comentarios article {
    background-color: rgb(224, 235, 247);
    color: rgb(24, 24, 24);
    padding: 1rem;
    padding-left: 1rem;
    margin: 1rem 3rem 1rem 3rem;
}

.comentarios h5 {
    margin: 0;
}

.respuestas article {
    background-color: rgb(231, 228, 228);
    margin: 1rem 5rem 1rem 5rem;

}

.respuestas p {
    color:rgb(24, 24, 24) ;
}
a.comentarios {
    font-weight: bold;
    color: rgb(51, 153, 255);
    text-decoration: none;
    border-radius: 10px;
    text-align: center;
    display: inline;
}

.suscribir a {
    color: white;
    background-color: rgb(245 59 15);
    padding: 0.5rem 1rem;
}


h3.suscribir {
    display: block;
    color: #ffffff;
    margin: 0;
    font-weight: 200%;
    padding-block: 1rem ;
    text-align: center;
}

.formularioinicio a {
    color:  rgb(245 59 15);
    background-color: white;
    padding: 0.5rem 1rem;
    display: inline;
    border-radius: 10px;
    margin: 1em auto 1em auto;
    text-transform: uppercase;
}

.formularioinicio article {
    margin-block: 2rem;
    background-color: rgb(245 59 15) ;
}

.formularioinicio input  {
     display: inline;
     
}
 article.comentar input{
background-color:rgb(224, 235, 247);
}

.suscribir article {
    gap:2rem;
}

h3.reciente {
    color: #ffffff;
    background-color: rgb(245 59 15);
    display: block;
    text-align: left;
    padding: 0.5rem 8rem 0.5rem 1rem;
    margin-block-start: 0;
}

.reciente h4 {
    color: rgb(14, 14, 59);
    font-weight: bold;
    margin: 0;
    padding-inline: 1rem;
    margin-block-end: 0.5rem;
}

.reciente p {
    color: rgb(24, 24, 24);
    padding: 1rem;
    margin: 0;
    padding-block-start: 0.25rem;
    padding-block-start: 0;
    margin-block-end: 1rem;
}

div.reciente {
    background-color:rgb(184 217 249) ;
    padding: 0 0 0.25rem 0;
    margin-block-start: 2rem;
}


/*INICIAR SESIÓN Y REGIS----------------------*/

main .formulario {
    background-color:rgb(184 217 249);
    margin-block-start: 2rem;
}

.formulario {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.formulario h2 {
    padding: 0.5em;
    text-align: center;
    margin: 0 3em;
    text-transform: uppercase;
    font-size: 18px;
    color: rgb(14, 14, 59);
}

form {
    display: flex;
    flex-direction: column;
}

label {
    align-self: center;;
    margin: 0;
    margin-bottom: 0.5em;
    margin-top: 1.5em;
    color: rgb(14, 14, 59);
    font-family: 'Poppins', sans-serif;
}

form input[type=date], form input[type=text], form input[type=email], form input[type=password] {
    border-radius: 1.5em;
    border: solid 1px rgba(128, 128, 128, 0.48);
    align-self: center;
    padding: 0.2em 1em;
    max-width:20em ;
    font-family: 'Poppins', sans-serif;
}

.sesion button, .perfil button {
    display: block;

    margin: 2.5em auto 1em auto;
    padding: 0.5em 2em;
    text-align: center;
    background-color: rgb(245 59 15);
    border-radius: 20px;
    color: white;
    font-weight: 600;    
    text-transform: uppercase;
    box-shadow: 2px 2px 10px rgb(128 128 128 / 48%);

}

p.registrate {
    align-self: center;
    color: rgb(14, 14, 59);
}


.a-forms {
    margin: 0 auto 3em auto;
    text-decoration: underline;
    color:rgb(14, 14, 59);
    text-align: center;
}

.formulario img {
    display: block;
    margin: 1rem;
    width: 5rem;
    align-self: center;
    height: auto;   
}


.reciente ul {
    text-wrap: pretty;
    text-align: start;
    list-style: none;
    padding: 0;
}

p {
    text-wrap:pretty;
    text-align: start;
}

article.comentar {
    background-color: rgb(224, 235, 247);
    display: block;
    padding: 1rem 0 0 0;
}

.comentar a {
    color: white;
    background-color: rgb(51, 153, 255) ;
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 10px;
}

.comentar p {
    padding: 0 0 2rem 1rem;
}

.botones a {
    display: inline;
    color: rgb(245 59 15);
    padding: 2rem 3rem 1rem 1rem;
    font-weight: lighter;


}

.comentarios article p {
    margin-block-end: 2rem;
}

section.comentarios {
    background-color: white;
    padding-block-end: 1rem;
}


/*------------*/



.publicaciones {
    background-color:  rgb(14, 14, 59) ;
    padding-block: 0.5rem;
}

div.contenedora {
    padding: 0;
    margin: 0;
    background-color:  rgb(14, 14, 59)
}

.publicaciones img {
    max-width: 100%;
}


.publicaciones h2 {
    color: white;
    font-weight: bold;
    font-size: 200%;
    display: block;
    text-align: center;
}

input.buscar {
    margin: 1rem;
    border-radius: 1.5em;
    border: solid 1px rgba(128, 128, 128, 0.48);
    align-self: center;
    padding: 0.2em 1em;
    max-width:20em ;

}

.inicio  {
    gap: 1rem;
}


div.noticia {
    gap: 1rem;
}

div.filtros a {
   display: inline;
   align-items: center;
}

div.imagenes
 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5em, 1fr));
    gap: .25em;
}

.publicaciones figure {
    /* para que cada "figure" sea origen de coordenadas de sus elementos contenidos */
  position: relative;
  /* para ocultar lo que "excede" sus límites */
  overflow: hidden;
  border-radius: 0.5vw;
}

.publicaciones img {
    /* para que la imagen "llene" la etiqueta "img" aun con otras porporciones */
    object-fit: cover;
    object-position: left center;
    min-width: 100%;
    min-height: 100%;
    border-radius: 2%;
  
}

  .publicaciones figcaption {
    background-color: rgba(3, 8, 54, 0.432);
    /* mix-blend-mode: hard-light; */
    color: white;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 700;
    
    /* para superponer el epígrafe sobre la foto */
    position: absolute;
    /* estirar para que ocupe todo figure */
    inset: 0;
    /* mover para que se vea apenas el "titulo" de la foto */
    transform: translateY(calc(100%));
    
    transition: all .6s ease;
  }
 
  .publicaciones figure:hover figcaption {
    background-color: rgba(4, 13, 65, 0.432);
    transition: all .3s ease;
  
    /* emplazamiento, 0 del borde superior */
    transform: translateY(0);
    /* grid */
    display: grid;
    /* texto centrado */
    text-align: center;
    place-items: center;
    place-content: center;
    /* relleno en linea 2 renglones */
    padding-inline: 2em;
  }

/*VIDEO----------------------*/
video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1em;
}

strong.centrouba {
    display: inline;
}

figcaption.video {
    color:rgb(14, 14, 59) ;
}

.informacion h2 {
    color:rgb(14, 14, 59) ;
}

.informacion p {
    color: rgb(24, 24, 24);
}


/*FACULTADES---------*/

section.facultades article {
    background-color: white;

}

.centros h2 {
    color: white;
    background-color:rgb(51, 153, 255) ;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    margin-block-start: 0;
}

.centros h3, .centros h4 {
    color: rgb(14, 14, 59);
    margin-inline: 1rem;
    margin-block: 0.25rem;
}

.centros h4 {
    margin-inline: 0;
    margin-block-end: 1rem;
}

.centros ul {
    display: block;
}

.centros li {
    margin-block-end: 1rem;
}


@media (min-width: 600px) {

.centros ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 1rem;
    margin: 0;
    margin-block-end: 1rem;
}

}


.titulos h3 {
    color:  rgb(24, 24, 24);
    display: block;
    text-align: center;
    margin-block-end: 2rem;
}

#portada img {
    width: 100%;
    height: auto;
    max-width: 100%;
    overflow-clip-margin: content-box;
    overflow: clip;
}

/*CONOCENOS---------*/
 article.video{
    background-color: rgb(144, 193, 241);
    margin-block-start: 2rem;
    padding: 2rem;
    border-radius: 1em;
 }

 
/*RESPONSIVE-MOVIL*/

@media screen and (min-width: 576px) {


    /*NAV---------------------------*/
    #nav-desplegable ul {
     display: flex;
     justify-content: space-between;
      gap: 0.5em;
    }
  
    #boton-nav {
     display: none;
    }
    .iconos ul li {
        display: inline;
        margin-inline-end: 2rem;
     }
    
     .iconos ul {
        gap: 2rem;
        align-items: center;
     }
     .iconos ul {
        align-items: center;
        }
        
            .iconos ul li {
            display: inline;
        }
        
         .iconos ul {
            display: block;
        }
         
         .iconos h4 {
            display: inline;
         }
        
         .iconos h3 {
            color:rgb(144, 193, 241);
            display: block;
            text-align: left;
            margin-inline-start: 2rem;
         }
}
 /*RESPONSIVE-TABLET*/

@media screen and (min-width: 768px) {


    /*NAV---------------------------*/
    #nav-desplegable ul {
     display: flex;
     justify-content: space-between;
      gap: 0.5em;
    }
  
    #boton-nav {
     display: none;
    }
    div.inicio {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
    
    div.noticia {
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
}
/*RESPONSIVE-DESKTOP*/

@media screen and (min-width: 992px) {

    /*HEADER----------------------------*/
  
    header nav {
      margin-bottom: 0.5em;
      width: 100%;
  }
  
  .menu-btn {
      display: none;
  }
  
  header nav ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: right;
      align-items: center;
      margin: 0;
      position: inherit;
      padding-top: 0;
      width: 100%;
      transition: none;
      visibility: visible;
      opacity: 1;
  }
  
  header nav ul li {
      min-width: 4em;
      margin: .25em;
  }
  
  header nav ul li a {
      border-radius: .25em;
      font-size: 1rem;
      width: auto;
      padding: .35em 1em;
  }
    
    /*NAV
    -------------------------------------*/
  
    .img-logo {
      margin: 0;
    }
  
    #nav-desplegable ul {
      margin: 0 2em;
    }
  
    header .contenedora{
      margin: 0;
  
    }
}