@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;600&family=Barlow:wght@400;600&display=swap');


* {
    box-sizing: border-box;
}



:root {
    --color-1: #BF7EAE;
    --color-2: hsla(316, 34%, 62%, 0.459);
    --color-3: #7540bf; 
    --color-4: #6630d9;
    --color-5: #F2A950; 
    --color-6: #fff;
    --color-7: rgb(122 117 131);
    --color-8: #000;
    --sombra: rgba(122, 117, 131, 60%);
}

.contenedor {
    width: min(70rem, 100%);
    margin-inline: auto;
    padding: 1rem;
}

.margen {
    margin-block: 3rem;
}

body {
    margin: 0%;
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
}

img {
    max-width: 100%;
}
/*
nav {
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
} */

h1, h2, h3, h4, h5, p {
    margin: 0;
}

h1 {
    color: var(--color-6);
    font-size: 3em;
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
    
}

h2 {
    color: var(--color-3);
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;

}

h3 {
    color: var(--color-3);
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

h4 {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    color: var(--color-3);
    text-transform: uppercase;
}

h5 {
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    color: var(--color-3);
}

p {
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    color: var(--color-8);
    font-size: 1.25rem;
    margin-block-start: 0.5rem;
}

li {
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    color: var(--color-3);
}

.grande {
    font-size: 1.25em;
}

.chiquito {
    font-size: .95em;
}

.negrita {
    font-weight: 600;
}

.color {
    color: var(--color-3);
}

.gris {
    color: var(--color-7);
}

.mayus {
    text-transform: uppercase;
}

.oracion {
    text-transform: none;
}

/*barra de nav y logo*/

header {
    background-color:var(--color-3) ;
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
}

header .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

@media screen and (min-width:954px) {
    header .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    
    }
}

header .logo img {
    width: 5em;
}

header ul {
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media screen and (min-width:954px) {
    header ul {
        padding-inline-start: 0;
        display: flex;
        flex-direction: row;
    }   
}

header ul li {
    padding: .25em .5em .25em .5em;
    margin-inline:.5em;
    text-align: center;
    width: 7.4em;
    list-style: none;
    font-size: .9em;
    color: var(--color-6);
}

@media screen and (min-width:954px) {
    header ul li {
        padding: .25em .5em .25em .5em;
        margin-inline:.5em;
        border: solid 2px var(--color-5);
        border-radius: 10px;
        text-align: center;
        width: 7.4em;
        list-style: none;
        font-size: .9em;
        color: var(--color-6);
    }
    
}

header ul a {
    text-decoration: none;
    color: var(--color-6);
}

header ul li:hover {
    background-color: var(--color-1);
    border: solid 2px var(--color-6);
}

header #boton_perfil img {
    width: 2.25em;
    border-radius: 100%;
    border: solid 2px var(--color-5);
}

/* menu hamburguesa */

.menu_linea {
    width: 30px;
    height: 3px;
    margin: 6px 0 6px 0;
    background: var(--color-5);
    right: 1rem;
}

#btn-menu{display: none;}

header label{
    display: none; 
}

header label:hover{
    cursor: pointer; 
}

.menu ul{
    margin: 0;
    list-style: none;
    padding: 1rem;
    display: flex;
    justify-content: flex-start;
}

.menu li a{
    display: block;
    padding: 1rem 2rem;
    color: white;
    text-decoration: none;
}

@media (max-width:954px) {
    header label{
        display: block;
    }
    
    .menu{
        position: absolute;
        background: var(--color-3);
        width: 40%;
        margin-left: -70%;
    }

    .menu ul{
        flex-direction: column;
    }

    #btn-menu:checked ~ .menu{
        margin-top: 45%;
        margin-left: 71%;
    }
}

@media (max-width: 426px) {
    #btn-menu:checked ~ .menu {
        margin-top: 82%;
        margin-left: 58%;
    }
}
/* nav dif segun pag actual*/

.pagina_actual {
    background-color: var(--color-1);
    border: solid 2px var(--color-6);
}

/*encabezado con imagen fondo*/

.encabezado {
    background-color: var(--color-1);
    text-align: center;
    height: 11em;
    display: grid;
    align-items: center;
}

.encabezadotexto {
    margin-block: 1rem;
    }

.encabezado .acumar img {
    width: 15em;
}

.encabezado p {
    color:var(--color-6);
    font-size: 1.25em;
}

/*concursos*/

.opcionesconcursos {
    border: solid 5px var(--color-6);
    display: grid;
    place-items: center;
    width: 25rem;
    height: 12rem;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 600;
}

.opcionesconcursos:hover {
    border: solid 5px var(--color-5);
}

.cajaconcursos {
    display: flex;
    gap: 2rem;    
    align-items: center;
    flex-direction: column;
    margin-block-start: 1rem;
}

.cajaconcursos a {
    text-decoration: none;
}

@media screen and (min-width:700px) {
    .cajaconcursos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        gap: 2rem;
    }
}

@media screen and (min-width:426x) {
    .cajaconcursos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        justify-items: center;
        gap: 2rem;
    }
}


.juveniles2022 {
    background-image: url(../imagenes/juveniles2022.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}

.adultos2022 {
    background-image: url(../imagenes/adultos2022.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/*
.juveniles2022 {
    justify-content: center;
    background-image: url(../imagenes/juveniles2022.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: block;
    aspect-ratio: 2 / 1;
}

.adultos2022 {
    justify-content: center;
    background-image: url(../imagenes/adultos2022.jpeg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    display: block;
    aspect-ratio: 2 / 1;
}
*/

.concursostextos h3, .concursostextos p {
    color: var(--color-6);
}

.concursostextos h3 {
    font-size: 1.25em;
}

.concursostextos p {
    font-size: 1.11em;
}

/*libros*/

.librosnuevos {
    margin-block-start: 1rem;
}

.galeria_libros img {
    height: 15rem;
    border: solid 4px var(--color-3);
}

#opciones_libros {
    height: 29.2rem;
    overflow: hidden;
    text-align: center;
    margin-block-start: 1rem;
}

.galeria_libros .libro {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.galeria_libros .libro .flecha {
    text-decoration: none;
    color:  var(--color-3);
    font-size: 2rem;
}

.libro_texto {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

@media screen and (min-width:600px) {
    .libro_texto {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: row;    
    }
    #opciones_libros {
        height: 15rem;
        overflow: hidden;
        text-align: center;
        margin-block-start: 1rem;
    }
}

.textos_nuevos {
    width: 75%;
    height: 14rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media screen and (min-width:600px) {
    .textos_nuevos {
        width: 40%;
        height: 14rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
}

.sinopsis_biblioteca {
    height: 8rem;
    overflow: hidden;
}

/*************************************/
/*concursos*/

/*sobre los concursos*/


/*recuerda*/

.recuerda h3, .recuerda p {
    color: var(--color-7);
}

.recuerda ul {
    color: var(--color-7);
    margin-block-start: 0;
    padding-inline-start: 1rem;
}

.recuerda ul li {
    color: var(--color-7);
}

/*votar y postularse*/

.votarpostularse {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.votarpostularse a {
    text-decoration: none;
}

/*.librohtml .libro_derecha .descargar {
    display: inline;
    border: solid 2px var(--color-1);
    padding: .5rem 2rem .5rem 2rem;
    color: var(--color-6);
    background-color: var(--color-5);
    border-radius: 6px;
    line-height: 3rem;
    opacity: 80%;
}

.librohtml .libro_derecha .descargar:hover {
    opacity: 100%;
}*/

.votarpostularse h4 {
    border: solid 2px var(--color-1);
    padding: 0.5rem 2rem 0.5rem 2rem;
    color: var(--color-6);
    background-color: var(--color-5);
    border-radius: 6px;
    opacity: 80%;
    font-size: .9em;
    width: 10rem;
    text-align: center;
}


.votarpostularse h4:hover {
    opacity: 100%;
}

.votarpostularse h4:active {
    transform: scale(0.95);
}

.tenescuenta {
    text-align: center;
}

.tenescuenta ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.tenescuenta ul a {
    text-decoration: none;
    color: var(--color-1);
}

/*  Galeria con filtros https://lawsofux.com/  */

.categorias .filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    justify-items: center;
    gap: 1rem;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.categorias .filtros h4 {
    padding: .25em .5em .25em .5em;
    border: solid 2px var(--color-5);
    border-radius: 10px;
    text-align: center;
    width: 7.4em;
    font-size: .9em;
    background-color: var(--color-6);
}

.categorias .filtros h4:hover  {
    background-color: var(--color-1);
    color: var(--color-6);
}


/***************************************************/
/*Postularse*/
/* formulario */

.postularse .guia {
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
}

.postularse .guia a {
    text-decoration: none;
}

.postularse .opcionesconcursos {
    border: solid 5px var(--color-5);
    margin: auto;
}


.formulario .formulario_labels span {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    color: var(--color-4);

    display: block;
    padding-inline-end: 0.35rem;
}



.formulario .formulario_labels div {
    display: flex;
    align-items: center;

    border: solid 2px var(--color-1);
    border-radius: 6px;
    height: 2rem;
    width: 25rem;
    padding-inline: 0.5rem;
    justify-content: space-between;
}

.formulario .formulario_labels div input {
    border-bottom: solid 2px var(--color-1);
    border-top: solid 2px var(--color-1);
    border-left: solid 2px var(--color-1);
    border-right: none;
    border-radius: 0;
}

.formulario a {
    text-decoration: none;
}

/***************************************************/
/*Galeria*/
/*4 concursos*/

.cajaconcursosgaleria {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.juveniles2021 {
    background-image: url(../imagenes/juveniles2021.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.adultos2021 {
    background-image: url(../imagenes/adultos2021.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.juveniles2020 {
    background-image: url(../imagenes/juveniles2020.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.adultos2020 {
    background-image: url(../imagenes/adultos2020.jpeg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


/***************************************************/
/*Biblioteca*/

.librospremiados {
    margin-block-start: 1rem;
    background-color: var(--color-2);
    padding-block: 2rem;
}

.grid_premiados {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 35px;
    align-items: start;
    margin-block-start: 1rem;
}

.grid_premiados img {
    border: none;
    height: 23rem;
}

/*buscador de libros*/

.librosgenerales .buscador {
    display: flex;
    align-items: center;
    margin-block-start: 1rem;
    border: solid 2px var(--color-4);
    border-radius: 6px;
}

.librosgenerales .buscador input:enabled {
    width: 100%;
    height: 2rem;
    padding-inline: 1rem;
    border-top: none;
    border-right: solid 2px var(--color-4);
    border-bottom: none;
    border-left: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.librosgenerales .buscador span {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
   /* Support for all WebKit browsers. */
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
   text-rendering: optimizeLegibility;
   color: var(--color-4);
   padding-inline: 1rem;

}

/* 5 botones filtros */

.librosgenerales .filtros {
    margin-block-start: .5rem;
}

.librosgenerales .filtros button {
    height: 2.5rem;
    padding-inline: 1rem;
    background-color: var(--color-6);
    border: solid 1px var(--color-1);
}

.librosgenerales .filtros button:active {
    background-color: var(--color-1);
    color: var(--color-6);
}

/* grilla de libros */

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 35px;
    align-items: start;
    margin-block-start: 1rem;
}

@media screen and (min-width:426px) {
    .grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        align-items: start;
        grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
        gap: 35px;
        margin-block-start: 1rem;

    }
}

.item_grid {
    border: solid 2px var(--color-1);
    /*box-shadow: 0.1em 0.1em 0.3em 0 var(--sombra);*/
}

.item_grid div {
    border-bottom: solid 2px var(--color-1);
}

.item_grid ul {
    padding: .5rem;
    list-style: none;
} 

/******************************************/
/* LIBROS */
/*info de libro*/

.guia {
    text-transform: uppercase;
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    display: block;
}

.guia a {
    text-decoration: none;
}

.librohtml {
    display: grid;
    grid-template-rows: 33rem 1fr;
    justify-items: center;
}

@media screen and (min-width:770px) {
    .librohtml {
        display: grid;
        grid-template-columns: 50% 1fr;
        grid-template-rows: auto;
        justify-items: center;
    }
    
}

.librohtml .libro_derecha h3 {
    margin-block-end: .5rem;
    margin-block-start: 2rem;
}

.librohtml .libro_derecha .oracion .material-icons-outlined {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;

     color: var(--color-3);
     margin-block-start: .5rem;

}

.librohtml .libro_derecha .detalles {
    line-height: 2rem;
}

.librohtml .libro_derecha .detalles .material-symbols-outlined {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;

     color: var(--color-3);
     margin-block-start: .5rem;
}

.librohtml .libro_derecha .descargar {
    display: inline;
    border: solid 2px var(--color-1);
    padding: .5rem 2rem .5rem 2rem;
    color: var(--color-6);
    background-color: var(--color-5);
    border-radius: 6px;
    line-height: 3rem;
    opacity: 80%;
}

.librohtml .libro_derecha .descargar:hover {
    opacity: 100%;
}

.librohtml .libro_derecha .descargar:active {
    transform: scale(0.95);
}

/* libros similares */

.grid_similares {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 35px;
    margin-block-start: 1rem;
    align-items: start;
}

.item_grid_similares {
    border: solid 2px var(--color-1);
}

.item_grid_similares div {
    border-bottom: solid 2px var(--color-1);
}

.item_grid_similares ul {
    padding: .5rem;
    list-style: none;
} 

/******************************************/
/* GANADORES */
/* TARJETAS GANADORES 1 2 3*/

.ganadores {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-block-start: 1rem;
}

@media screen and (min-width:770px) {
    .ganadores {
        flex-direction: row;
    }
}


.tarjeta_ganadores {
    border: solid 3px var(--color-1);
    display: flex;
    flex-direction: column;
}

.tarjeta_ganadores a {
    text-decoration: none;
}

.votos_ganador {
    background-image: url(../imagenes/ganador_1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 13rem;
}


figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    width: 21.7rem;
    height: 15.8rem;
}

figcaption {
    position: absolute;
    inset: 0;
    background-color: var(--color-2);
    transform: translateY(100%);
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    color: var(--color-6);
    font-size: 1.25rem;
}


figure:hover figcaption {
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    place-items: center;
    place-content: center;
    padding-inline: 2em;
    text-align: center;

}

figcaption span {
    font-size: 1rem;
}


/*
#ganador_1 {
    width: 0;
    height: 0;
}

:target { 
    display:flex;
    position: fixed;
    top: 1em;
    left: 1em;
    right: 1em;
    bottom: 1em;
    padding: 1em;
    font-size: 2em;
    text-align: center;
    align-items: center;
    width: 15rem;
    height: 15rem;
}
*/

.votos_ganador p {
    color: var(--color-6);
    padding: .5rem;
    text-align: right;
}

.detalles_ganador {
    display: flex;
    align-items: center;
    border-top: solid 3px var(--color-1);
    width: 21.7rem;
}

.numero_ganador {
    border-right: solid 3px var(--color-1);
    padding: .5rem;
    text-align: center;
    width: 3rem;
}

.numero_ganador p {
    font-weight: 600;
    font-size: 1.5rem;
}

.autor_ganador {
    padding: .5rem;
}

.autor_ganador span {
    font-weight: 600;
    text-transform: uppercase;
}

.ganadores_categorias .filtros {
        margin-block-start: .5rem;
}
    
.ganadores_categorias .filtros button {
    height: 2.5rem;
    padding-inline: 1rem;
    background-color: var(--color-6);
    border: solid 1px var(--color-1);
}

.ganadores_categorias .filtros button:active {
    background-color: var(--color-1);
    color: var(--color-6);
}

/*********************************************************/
/* FORMULARIO DE UNIRSE E INICIAR SESION */

.formulario {
    display: flex;    
    flex-direction: column;
    align-items: center;
    margin-block-start: 1rem;
}

.formulario div img {
    width: 9rem;
    border: solid 4px var(--color-5);
    border-radius: 100%;
}

.formulario .mas {
    position: absolute;
}

.formulario_labels {
    display: flex;
    flex-direction: column;
    line-height: 3rem;
}

.formulario label {
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    color: var(--color-8);
    text-transform: uppercase;
    height: 2rem;
    margin-block-end: .25rem;
}

.formulario input {
    border: solid 2px var(--color-1);
    border-radius: 6px;
    height: 2rem;
    width: 25rem;
    padding-inline: 1rem;
}

.formulario #selector {
    border: solid 2px var(--color-1);
    border-radius: 6px;
    height: 2rem;
    width: 25rem;
    padding-inline: 1rem;

}

.formulario .boton_perfil {
    text-decoration: none;
}

.formulario .boton {
    margin-block-start: 2rem;
    border: solid 2px var(--color-1);
    padding: 0.5rem 2rem 0.5rem 2rem;
    color: var(--color-6);
    background-color: var(--color-5);
    border-radius: 6px;
    opacity: 80%;
}

.formulario .boton:hover {
    opacity: 100%;
}

.formulario .boton:active {
    transform: scale(0.95);
}


.formulario .link_iniciar_sesion {
    margin-block-start: 1rem;
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
}

/*********************************************************/
/* perfil */

.perfil h1 {
    color: var(--color-3);
}

.perfil {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

@media screen and (min-width:770px) {
    .perfil {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        text-align: left;
    }
}

.perfil .foto img {
    width: 15rem;
    border: solid 5px var(--color-5);
    border-radius: 100%;
}

.info_perfil {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
}

.info_perfil .material-icons-outlined {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
    padding-inline-start: 0;
    color: var(--color-8);
}

.redes_perfil {
    margin-block-start: 2rem;
}

.redes_perfil a {
    text-decoration: none;
}

.redes_perfil img {
    width: 2rem;
    margin-inline-end: .5rem;
}

.datos_perfil {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
}

@media screen and (min-width:770px) {
    .datos_perfil {
        display: flex;
        justify-content: space-between;
        gap: 2rem;
        flex-direction: row;
    }
}

.cerrar_sesion {
    display: flex;
    justify-content: center;
}

.cerrar_sesion a {
    text-decoration: none;
}

.cerrar_sesion h4{
    border: solid 2px var(--color-1);
    padding: 0.5rem 2rem 0.5rem 2rem;
    background-color: var(--color-5);
    border-radius: 6px;
    opacity: 80%;
    font-size: .9em;
    width: 11rem;
    text-align: center;
        color: var(--color-6);

}

.cerrar_sesion h4:hover {
    opacity: 100%;
}

.cerrar_sesion h4:active {
    transform: scale(0.95);
}

.datos_general, .datos_privados {
    border: solid 4px var(--color-3);
    padding: 1rem;
    width: 100%;
}

@media screen and (min-width:770px) {
    .datos_general, .datos_privados {
        width: 50%;
    }
}

.datos_general ul, .datos_privados ul {
    padding: 0;
    margin-block-end: 0;
}

.datos_general li, .datos_privados li {
    list-style: none;
    color: var(--color-8);
}

.item_concursos_participados {
    display: flex;
    gap: 2rem;
    margin-block: 1rem;
    flex-direction: column;
    align-items: center;
}

@media screen and (min-width:770px) {
    .item_concursos_participados {
        display: flex;
        gap: 2rem;
        margin-block: 1rem;
        flex-direction: row;
    }
    
}

.item_concursos_participados img {
    width: 40rem;
}

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

.participados_informacion p, .participados_informacion h4 {
    margin-block-start: .5rem;
}

.participados_informacion .compartir {
    text-align: right;
}

/*********************************************************/
/*pie con sobre proyecto y nav*/

footer {
    background-color: var(--color-1);
}

footer .footer .footer_arriba {
    margin-block-start: 2rem;
}

.footer_redes_perfil {
    margin-block-start: 0;
    margin-inline-end: 0.5rem;
    display: flex;
}

.footer_redes_perfil img {
    width: 2rem;
}

footer .footer p, footer .footer h5, footer .footer li {
    color: var(--color-6);
}

footer h5, footer p {
    margin-block-start: 0;
}

.sobre_proyecto img {
    width: 5rem;
}

footer nav ul {
    list-style: none;
    padding: 0;    
}

footer nav ul li a {
    text-decoration: none;
    color: var(--color-6);
}

.copyright {
    margin-block-start: 3rem;
    border-block-start: solid 1px var(--color-6);
    padding-block-start: 0.5rem;
}

.copyright p {
    font-size: .9em;
}

@media screen and (min-width:770px) {
        footer .footer .footer_arriba {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 2rem;
            margin-block-start: 2rem;
            justify-items: center;
        }

        .footer_redes_perfil {
            margin-block-start: 1rem;
        }

    }