@charset "utf-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}

/*----Generales-----*/

html {
    scroll-behavior: smooth; 
    scroll-padding-block-start: 5em;   
}

img {
    max-width: 100%;
    height: auto;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    background-color:#1E1E1E; 
}

h1, h2, h3, h4, h5 { /* Parrafos */ 
            text-wrap: balance; /* si ocupa mas de una linea, se equilibran los anchos de esas lineas */ 
            color: white;
}

a {  /* vinculos */
    text-decoration: none;
    font-weight: bold;
    color:#FBBD12;
}

p, li{
    text-wrap: pretty;
    color: white;
}

ul, ol {  /* listas */
    list-style: none; 
    padding: 0;
}


.contenedora {
    max-width: min(50rem, 100%);
    margin-inline: auto;
    padding: 1rem;
}


.titulos{
    color: #FBBD12;
    text-align: center;
    }
    
    /* --------------------
    componente superior y sus contenidos
    -------------------- */
    
    footer,
    header {
        background-color: #1E1E1E;
        color: #FBBD12;
        }
        
        /*-----Header------*/
            
            
header {
                position: sticky;
                top: 0;
                z-index: 10000;
                }
                
header .contenedora{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
}
                    
#logo {
                        display: flex;
                        align-items: center; 
                        position: relative;
                        z-index: 9999;
                    }

 #logo img {
                        width: 3em;
                        margin: 0;
                      }

.hamburguesa{ 
background: none;
  border-radius: 50%;
  padding: .25rem;
  aspect-ratio: 1;
  cursor: pointer;
  transition: all 0.3s ease-out; /* anima el "hover" */
   position: fixed; /*no genera scroll */
   /* emplazamiento 1 renglón del borde superior */
   top: 1em;
   /* emplazamiento 1 renglón del borde derecho */
   right: 1em;
   /* en capa superior, casi arriba de todo */
   z-index: 9000;
   }

/* ------ menu ------*/
        

nav ul{
    background-color:hsl(44 97 53 / 50%) ;
    display: grid;
    place-items: center;
    place-content: center;
    position: fixed;
    inset: 0;
    z-index: 8000;
    translate: 100%;
    transition: all .6s ease;
}    



.menuVisible ul {
    background-color:  hsl(44 78 28 / 80%);
    transition: all .4s ease; /* anima cuando "nav" tiene la clase "menuVisible" */ 
    /* se muestra */
    translate: 0; 
    left: 30%;
} 

.menuVisible .hamburguesa .linea{
    background-color: #FBBD12;
    transition: .5s
    }


nav ul li a {
    display: block;
    font-size: 1.5rem;
    margin-block-end: .5rem;
    width: min(70vw, 20rem); /* el valor menor entre el 40% del ancho de la ventana del navegador y 240px */
    text-align: center;
    padding: 1rem;
  }

nav ul li a:hover {
    color: #EEDFA9 ;
    transition: all .3s;
  }

.menu a {
    color: white;
    transition: transform 0.3s; /* transicion suave para el efecto */}

.menu a:hover, .menu a:focus, .menu a:active { 
        color: #FDBD12;
        border-bottom: 1px solid #FDBD12;
    } 
/* menu hamburguesa */

.hamburguesa {
    display: block; /* oculta el menu hamburguesa por defecto */
    cursor: pointer; /* cambia el cursor al pasar sobre el menú hamburguesa */ }
        
.hamburguesa .linea {
    display: block;
    width: 30px;
    height: 3px;
    background-color: white;
    margin: 5px ;}


/*-----Footer------*/

.footer {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 4rem;
    padding-top: 2rem;
}

.footer .titulos {
    text-align: start;
}

.indice {
    display: grid;
    flex-wrap: wrap;
    gap: 2rem;
}

.cajas-indice{
    display: grid;
    grid-template-rows: 2rem 1fr;
    margin-inline-end: 2rem;
    gap: 0.5rem
}

.cajas-indice .titulos {
    margin: 0%;
text-transform: uppercase;
color: #FBBD12;
}

.cajas-indice ul {
    color: white
}

footer {
    padding: 1rem;
}

.academicos img{
width: 20%;
}

.academicos {
    display: flex;
    gap: 5rem;
    
    align-items: center;
}

.redes img {
    margin-top: 1rem;
    width: 2rem;
}

.redes {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
}

.footer .contenedora {
    text-indent: 1rem;
    hyphens: auto;
    font-size: small;
}



/*---- Botones ------*/

.boton-saber {
    color: #FDBD12;
    background-color: transparent;
    border: 2px solid #FBBD12;
    font-weight: bold; /* texto en negrita */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
    font-size: 20px;
    text-transform: uppercase;
}

.boton-saber:hover {
    background-color: #FBBD12;
    color: #1E1E1E;
}

.boton-saber:active {
    border: 2px solid #1E1E1E;
    background-color: #EEDFA9; 
    color: #1E1E1E;
}

/*--- home (html) ----*/



body {
background-image: url(../imagenes/fondo6-cel.jpg);
    background-repeat: no-repeat;
    background-position: center bottom ;
    background-size: cover;
    background-attachment: fixed;
    z-index: -10;
} 

.foto-fondo {
    background-position: bottom left;
    background-size: cover;
    background-repeat: no-repeat;
}


.home-index { 
    margin: 1rem;
    max-width: min(50rem, 100%);
        margin-inline: auto;
        padding: 1rem;
}

.home-index h1 {
    font-size: 3rem;
}

.fadu {
    padding-bottom: 10rem;
    padding-top: 10rem;
    border-bottom: 1px solid #FBBD12;

}

.bloque-contenido {
    display: grid;
    gap: 1.5rem;
}

p.caja-texto { 
    hyphens: auto;
 }

.situacion, .expo, .foro{
    margin-bottom: 5rem;
    margin-top: 2.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.situacion span{
    font-weight: 700;
    color: white;

}

.foro {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.foro span {
    color: white;
    font-weight: 700;
    font-style: italic;
}

.foro .bloque-contenido {
    display: grid;
    max-width: 100vw;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.pastilla {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
background-color: hsl(44 98 53 / 75%);
color: #1E1E1E;
padding: 0.5rem;
border-radius: 10px;
width: 100%;
}

.pastilla .boton-saber {

    border: 2px solid #1E1E1E;
    background-color: none;
    color: #1E1E1E;
    }

.pastilla .botton-saber:hover:active{
    border: 2px solid #1E1E1E;
    background-color: #EEDFA9; 
    color: #1E1E1E;
    }

.pastilla h3 {
    color: #1E1E1E;
}

body {min-height: 100dvh; 
}


/*----- Sitaución-----*/

.contenedora-sit {
    display: grid;
}

.contenedora-sit .bloque-contenido{
    padding-top: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #FDBD12;
}

.contenedora-sit .bloque-contenido .bloque {
    border-radius: 10px;
    background-color: #EEDFA9;
    padding: 1rem;
    display: grid;
    justify-items: start;
    align-items: start;
}

.contenedora-sit .bloque-contenido .bloque .boton-saber {
    border: 2px solid #1E1E1E;
    background-color: #EEDFA9; 
    color: #1E1E1E;
}

.contenedora-sit .bloque-contenido .bloque .boton-saber:hover {
    border: 2px solid #1E1E1E;
    background-color: #FDBD12; 
    color: #1E1E1E;
}

#datos-top .titulos,
#datos-top2 .titulos{
    font-size: 14rem;
    font-weight: 900;
}

#datos-top .caja-texto,
#datos-top2 .caja-texto {
    color: #1E1E1E;
    font-style: italic;
    font-weight: 300;
    font-size: 1em;
}

#datos-top,
#datos-top2 {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.nota {
    padding-top: 3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #FDBD12;
}

.nota span {
    color: #ffffff;
    text-transform: uppercase;
    font-size:1rem ;
    padding-top: 2rem;
    hyphens: auto;
}

.nota h2 {
    text-transform: uppercase;
    hyphens:auto;
    font-size: 2.5rem;
    font-weight: 900;
}

.nota h4 {
    hyphens: auto;
    color: #ffffff;
    font-weight: 500;
    font-size: 2rem ;
}

.nota #titulo-nota {
    text-align: center;
}

.nota .nota-rector {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex-direction: column;
}

.contenedora-sit .caja-texto,
.nota .caja-texto { 
        text-indent: 1em;
          
}

.nota .titulos {
    text-align: start;
}

.nota .texto {
    display: grid;
    gap: 1rem;
    padding-top: 2rem;
}

.nota .texto .textos {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
}
    

.nota .parrafos {
    display: none;
    gap: 1rem;
}

.nota .mostrar {
    display: block;
}

.mapa .contenedora-mapas {
    display: grid;
    margin-top: 1rem;
    gap: 1rem;
}

.mapas .caja-mapa {
    display: grid;
    gap: 1rem;
}

.mapa span {
    color: #ffffff;
    font-weight: 500;
    font-size: 2rem;
}

.mapas .titulo{
    color: #1E1E1E;
    background-color:#FDBD12;
    border: 2px solid #1E1E1E;
    font-weight: bold; /* texto en negrita */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 10px;
    font-size: 20px;
    text-transform: uppercase;
}

.mapas .titulo:hover {
    background-color:#EEDFA9;
    border-color: #1E1E1E;
    color: #1E1E1E;
}

.mapas .titulo.activo {
    background-color:#EEDFA9;
    border-color: #1E1E1E;
    color: #1E1E1E;
    align-items: center;
}

.mapa .contenido {
    display: none;
}

.mapa .activo {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 1.5rem;
}


.mapa .titulos{
    padding-top: 3rem;
}



/*-----ExpoFADU-----*/

.destacados{
    margin-top: 60px;
}

.destacados p {
    font-weight: 300;
    font-size: small;
}

.destacados h2 {
    margin-bottom: 1em;
}

.destacados figcaption {
    font-size: x-small;
}

.destacados .galeria img {
    aspect-ratio: 19/6;
}

figure{
    margin: 0%;
}
    
figcaption {
        color: white;
}          
            
.galeria {
    display: flex;
    gap: 2rem;
    max-width: 100vw; ;
    scrollbar-width: none;
}

.contenedora-galeria {
    display: -webkit-box;
    gap: 2rem;
    max-width: 100vw;
    overflow-x: scroll;
    max-height: 20rem;
}

            
.caja-galeria {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    scroll-snap-align: center;
    width: 100%;
    transition: all 0.5s;
}


.caja-galeria .titulos {
    text-transform: uppercase;
    color: white;
}
     
.caja-galeria span{
    font-style: italic;
}

/*

.btn {
    position: absolute;
    z-index: 10;
    width: 2.5em;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    background-color: #1E1E1E;
    color:#FBBD12 ;
    font-size: 1.1em;
    border: 1px solid #FBBD12 ; 
}

.btn-prox {
    right: 0.25em;
}

/*------ Expo (html)--------*/

.contenedora-expo .titulos{
            font-size: 4rem;
            padding-bottom: 0.5em;
            margin-bottom: 0.25em;
            border-bottom: 1px solid #FDBD12;
}

.bloque {
    display: grid;
    gap: .5em;
}

section.carreras {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
}

section.carreras .cajas-carreras {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/*.cajita-carrera {
    background-color: hsl(44 98 53 / 75%);
    border-radius: 15px;
    padding: 1rem;
    display:grid;
    gap: 0.5em;
} */

 .cajita-carrera {  
    border: 2px solid hsl(44 98 53 / 100%);
    border-radius: 15px;
    padding: 1.5rem;
    gap: 0.5em; 
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    }

.carrera-off {
    display: block;
    position: absolute;
    max-width: 100%;
    padding: 1rem;
}    

.carrera-on {
    position: relative;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.cajita-carrera .carrera-on {
    opacity: 0;
    backface-visibility: hidden;
}

.cajita-carrera:hover{
    transition: all 0.3s;
    background-color: hsl(44 98 53 / 75%);
}

.cajita-carrera:hover .carrera-on {
    opacity: 1;
    transition: opacity 0,8s;
}

.cajita-carrera:hover .carrera-on .titulos {
    color: #1E1E1E;
}

.carrera-on .boton-saber {
    border: 2px solid #1E1E1E;
    color: #1E1E1E;
}

.cajita-carrera:hover .carrera-off {
opacity: 0;
}

.carrera-off .titulos {
    font-weight: 900;
    font-size: 10rem;
    text-transform: uppercase;
}

#cbc-off .titulos {
    font-weight: 300;
}

/*----ExpoFADU // Carreras HTML -----*/

.home-index .frente {
    background-image: url(../imagenes/fondo-dg.png);
    background-repeat: no-repeat;
    background-position: center center ;
    background-size: cover;
    z-index: -1;
    padding: 5rem;
    margin: -1rem;
}

.home-index .frente h1 {
    text-transform: uppercase;
    font-weight: 900;
    color: #ffffff;
    text-align: center;
}

.frente h4 {
     color: #ffffff;
    text-transform: uppercase;
    font-weight: 300;
    
}

.materias {
    padding-top: 5em;
    display: flex;
    gap: 10rem;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5em;
}

.materias h3 {
    font-size: 2.5rem;
}

.materias-bloque {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    flex-direction: column;

}

.materias .bloque-contenido {
    display: grid;
    justify-content: space-between
}

.cajas-materias h3 {
    color: #ffffff;
    font-size: 2rem;
    padding-bottom: 1rem;
    text-align: center;
}

.cajas-materias span {
    color: #ffffff;
    font-size: .75rem;
    padding-bottom: 1rem;
    text-align: center;
    text-transform: uppercase;
    hyphens: auto;
    text-align: center;
}

.catedra-bloque {
    padding-top: 3rem;
}

.niveles {
    display: grid;
    grid-template-rows: auto;
    gap: 3rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #FDBD12;
}

.niveles h3 {
    font-weight: 200;
    text-transform: uppercase;
    font-size: 2.5rem;
}

.trabajos-catedra {
    display: flex ;
    flex-direction: column;
    gap: .75rem;
}

.trabajos-catedra .titulos {
    text-transform: uppercase;
}

.cajas-materias {
    display: grid;
    justify-items: center;
    padding: 20px;
}
.cajita-catedra {
    display: grid;
    gap: 5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.barra-niveles {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    justify-content: center;
    padding-bottom: 3rem;
}

.barra-niveles a {
    color: #ffffff;
}

.barra-niveles a:hover {
    color: #FDBD12;
    border-bottom: 1px solid #FDBD12;
}


/*--Subi tu trabajo---*/

.tu-trabajo .titulos {
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.contenedora-form { 
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
 } 

 .tu-trabajo span {
    margin-top: 1rem;
    color: white;
 }

 .formulario {
    background-color: #FDBD12;
    padding: 1rem;
    border-radius: 15px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: .5rem;
    align-items: end;
}

.formulario form {
    display: grid;
    gap: 1.5rem;
}

.formulario input, textarea {
    font-family: 'Roboto', sans-serif;
padding: .25em;
}

.formulario .datos-formulario {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.formulario .boton-saber {
    color: #1E1E1E;
    border-color: #1E1E1E;
}


.formulario .boton-saber:hover:active {
    border: 2px solid #1E1E1E;
    background-color: #EEDFA9; 
    color: #1E1E1E;
}

.contend-formu h4 {
    padding-bottom: 1rem;
}

.requisitos {
    padding: 1rem;
    border-radius: 15px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: .5rem;
}

.requisitos h3 {
    border-bottom: 2px solid #FDBD12;
padding-bottom: .5em;
}

.requisitos span {
    color: #FDBD12;
    font-style: italic;
    font-weight: 300;
    margin: 0%;
}

.requisitos ul li {
    list-style: disc;
    margin-left: 1rem;
}

/*----- votación ------*/

.votacion h2 {
    margin-bottom: 1em;
}

.estructura-votacion {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.caja-votacion {
     background-color: hsl(44 98 53 / 75%);
     color: #1E1E1E;
     padding: 0.5rem;
     border-radius: 10px;
}

.caja-votacion {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1rem;
}
      
.caja-votacion .titulos {
    text-transform: uppercase;
    color:#1E1E1E ;
    font-weight:900;
}

.estrella {
    font-size: 20px;
    color: #1E1E1E;
    transition: color 0.3s;
    cursor: pointer;
}

.estrella:hover,
.estrella.checked {
    color: #ffffff;
}


 /* Pantallas Pequeñas (cel) 
------------------------------------------------------------------*/
                    
@media (min-width: 40em) {  
    
/* Estilos para menú hamburguesa desplegado */

  /*---manu---*/

  .hamburguesa {
    display: none; /* Oculto en pantallas grandes */
      }
   
    header nav {
        position: relative;
        flex-direction: column; /* Elementos uno debajo del otro */
        text-align: center; /* Centra el texto */
        }

        header nav ul,
        header .menuVisible ul {
          /* caja flexible para menu horizontal*/
          display: flex;
          /* separación entre sus elementos */
          gap: .25em;
      
          /* para que esté en capa superior pero que no parezca */
          position: relative;
      
          /* elimina desplazamiento */
          translate: 0;
      
          /* elimina fondo */
          background-color: unset;
 }


    header nav ul li {
        min-width: 4em; /* que no midan menos de: */
        }
           
    header nav ul li a {
        font-size: 1rem;
        width: auto;
        padding: .25em 1em;
        text-align: center;
        display: block; /* para que sean "cajas" */
        margin-block-end: unset;
        border-block-end: unset;
    }

    header nav ul li a:hover {
        color: #9c9c9c;
        border-bottom: 1px solid #9c9c9c;
    }
        
                        
    header nav li {
        margin: 5px 0; /* Espacio entre elementos del menú */
        }
                        

/*---textos---*/

.bloque-contenido {
    font-size: medium ;
}
}


@media(min-width: 50em) {

.galeria {
     padding: 1em;
}
                          
.textos h3 {
    padding: 1em;
}

}

/* Pantalla Media (tablet)
------------------------------*/
@media screen and (min-width: 768px) {
 

/*---Situacion----*/
#datos-top,
#datos-top2 {
    display: grid;
    gap: .5rem;
    grid-template-columns: auto 1fr;
}

/*---Secciones---*/

.contenedora-seccion {
    display: grid;
    gap: 2rem;
    grid-template-columns: auto auto;
}   

/*---votacion---*/

.estructura-votacion {
    display: grid;
    gap: 1rem;
    grid-template-columns: auto auto;
}

/*---Destacados---*/



.galeria {
    display: flex;
    gap: 20rem;

}


    /*---textos---*/
    
    .bloque-contenido {
        font-size: large ;
    }

    /*----footer----*/
    .footer {
        gap: 10rem;
    }

    .indice {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% auto;
    }

 }


 /*---Carreras (Expo html) ----*/

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

    .materias .bloque-contenido {
        grid-template-columns: auto auto; 
    }

    section.carreras .cajas-carreras  {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    section.carreras #caja-cbc {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none
    }

 /*---Formulario ----*/
 .contenedora-form { 
    display: grid;
    grid-template-columns: 1fr 1fr;
 }  

 .fadu {
    padding-bottom: .5rem;
    padding-top: .5rem;
    border-bottom: 1px solid #FBBD12;

}
  }  

  
  /*---galeria----*/
  @media screen and (min-width: 1200px ) { 

  /*---Situacion HTML----*/


 /*--Quienes somos---*/


  .bloque-contenido {
    grid-area: header;
  }   

  #datos-top {
    grid-area: main;
  }

  #datos-top2 {
    grid-area: footer;
  }

  .contenedora-sit {
      display: grid;
      gap: 1rem;
      grid-template-columns: 50% 50%;
      grid-template-rows: auto;
      grid-template-areas: 
      "header main"
      "header footer"   ;
    }
     }

@media screen and (min-width: 800px) {
         
     /*----Nota rector----*/
    .nota .texto {
        display: grid;
        grid-template-columns: 50% 50%;
    }  

    /*--foto fondo---*/
    .home-index .frente {
        position: absolute;
        right: 0;
        left: 0;
    }

    .materias {
        margin-top: 10rem;
    }

    .barra-niveles {
        margin-top: 15rem
    }
}

    
@media screen and (min-width: 1000px) {
    
.materias .bloque-contenido {
    grid-template-columns: auto auto auto; 
} }

    /*----Max vista-----*/
  @media screen and (min-width: 1200px ) {
   
    .contenedora {
        max-width: min(75rem, 100%);
        margin-inline: auto;
        padding: 1rem;
    }

    .home-index {
        max-width: min(75rem, 100%);
        margin-inline: auto;
        padding: 1rem;
    }


  /*---Expo (html)----*/
  

    section.carreras .cajas-carreras  {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    section.carreras #caja-cbc {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: none
    }

    .estructura-votacion {
        grid-template-columns: auto auto auto;
    }

  }  
 
  @media(min-width: 75em) {

    .galeria {
      
      margin-block-start: 4em;
      margin-block-end: 3em;
    }
   
  } 

.verificado {
    margin-top: 10rem;
    margin-bottom: 10rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

.verificado span {
    font-weight: 200;
    font-size: 2rem;
    color: #ffffff;
}

#volver {
    margin-top:2rem;
    font-size: 1em;
}

/*-----Foro (html)----*/
.comentarios {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #FDBD12;
}


.contenedora-coment {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1rem;
}

.contenedora-coment .comentario-usuario {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 1rem;
}

.contenedora-coment .comentario-usuario h1 {
    border: 2px solid #1E1E1E;
    color: #1E1E1E;
    background-color: #EEDFA9;
    font-size: 1.5em;
    border-radius: 50%;
    aspect-ratio: 1;
    width: 3em;
    padding: 0.5em;
}

.contenedora-coment .comentario-usuario .coment {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.25em;
    border: 1px solid #FDBD12;
    border-radius: 15px;
    padding: 1rem;

}