/*GENERAL*/
*{
    font-family: "Inter", sans-serif;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}


body{
    background-color: #0F172A;
    scroll-behavior: smooth;
}

.hero,
.search-section,
.publicaciones-destacadas,
.categorias-section,
.publicar-section{
    scroll-margin-top: 120px;
}

body.no-scroll{
    overflow: hidden;
}


/*HEADER-MENU*/



header{

    display:flex;
    flex-direction: row;
    align-items: center;

    padding: 1em 3em;

    background-color: #1E293B;

    z-index: 10000;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;

    transition: 1s;
}



.brand{
    display:flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 2em;

    flex:1;
}

.logo{

    width: 3em;
    height:3em;

    transition:  1s ease;
}


.brand p{
    transition: transform 1s ease;
}
.logo:hover{

    transform: rotate(50deg);
    filter: drop-shadow(0 0 10px #22d3eec3);
}

.logo:hover + p{
    filter: drop-shadow(0 0 10px rgba(59,130,246,.4));
    transform: scale(1.2);
}


.brand p{
    font-weight: 500;
     font-size: 1.4em;
     color: #F8FAFC;
}

.menu-list{

    display:flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    gap: 4em;

    list-style: none;

    flex:2;
}

.menu-link a{

     text-decoration: none;
     color: #F8FAFC;
     font-weight: 500;
     font-size: 1em;
    
     transition: color .2s;
}

.menu-link a:hover{

   color: #94A3B8; 
}

.icons{

    display:flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    gap: 2em;

    flex: 1;
}

.header-icon{

    width: 3em;
    height:3em;

     display:flex;
    justify-content: center;
    align-items: center;
    color:#F8FAFC;
}

.header-lupa, .header-user, .menu-toggle{
    width: 2em;
    height:2em;
    background-color: transparent;
    color: #F8FAFC;
}




.user-session {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

#header-username {
    text-decoration: none;
     color: #F8FAFC;
     font-weight: 500;
     font-size: 1em;
}



header.scrolled{
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

    background-color: rgba(30,41,59,.95);

    backdrop-filter: blur(10px);
}



.menu-toggle{
    display: none;

    transition: .4s ease;

    
}

.menu-toggle:hover{
    color: #3B82F6;
    transform: scale(1.1);
}



.mobile-menu{
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;
    gap: 2rem;
    background-color: #1e293bea;
    backdrop-filter: blur(10px);
    

    padding: 5rem 0 5rem 4rem ;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;

    width:80%;
    max-width:350px;

    transform: translateX(-100%);

    transition: transform .4s ease;
}

.mobile-links{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.mobile-links a{
    text-decoration: none;
     color: #F8FAFC;
     font-weight: 500;
     font-size: 1em;
    
     transition: color .2s;
}

.mobile-brand{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mobile-brand img{
    width: 2em;
}

.mobile-brand p{
    
        font-weight: 500;
        font-size: 1.4em;
        color: #F8FAFC;
    
}

.mobile-links a:hover{
    color: #94A3B8;
}

.mobile-menu.active{
    transform: translateX(0);
}


/*HERO*/


.hero{
    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2em;

    padding: 8rem 6rem;

    background: linear-gradient(to bottom, #3B82F6 50%, #0F172A 100%);
}


.hero h1{
    color: #F8FAFC;
    font-weight: 600;
    font-size: 8em;

    width: 60%;
    text-align: center;
    margin: 0 auto;

    min-width:fit-content;

    margin: 1rem;

    transition: .5s ease;
}

.hero h1:hover{
    filter: drop-shadow(0 0 20px #f8fafc8e);

}

.hero h2{
    color: #F8FAFC;
    font-weight: 500;
    font-size: 1.5em;
    width: 70%;
    text-align: center;
    margin: 0 auto;
}




.hero .learnmore{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 180px;
    height: 60px;

    background: white;
    color: #0F172A;
    text-decoration: none;

    border: 2px solid #0F172A;
    border-radius: 20px;

    font-weight: 600;
    font-size: 1.3rem;

    transition: .3s ease;
    margin-top: 2em;
}

.learnmore:hover{
    transform: scale(.98);
    filter: drop-shadow(0 0 20px #94A3B8);
}



/*SEARCH-BAR*/

.search-section{
    background:
    linear-gradient(
        to bottom,
        #0F172A 0%,
        #F8FAFC 10%,
        #F8FAFC 20%,
        #F8FAFC 80%,
        #DDE7F4 90%,
        #0F172A 100%
    );
    
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 10rem 0;

    gap: 4rem;

    transition: 1s;
    
}


.search-section h2{

    font-weight: 600;
    font-size: 3em;
    width: 80%;
    text-align: center;
    margin: 0 auto;

    
}

.search-bar{
    width: 60%;
    background-color: #1E293B;
    border-radius: 9999px;

    padding: 1.5rem 2rem;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 1rem;

    border: 5px solid transparent;


    transition: .4s ease-in-out;
}

.search-bar input{
    flex: 1;
    background-color: transparent;
    border: none;
    outline: none;
    color: #F8FAFC;
    font-size: 1rem;
}

input::placeholder{
    color: #94A3B8;
}

.search-bar:focus-within{
    border-color:#3B82F6;
    box-shadow: 0 0 30px #3B82F6;
}


 .no-results{
    color:white;
    text-align:center;
    padding:2rem;
    font-size:1.2rem;
}

.search-results-section{

    width:100%;
    padding:0 6rem 5rem;

    display: none;
    flex-direction:column;
    align-items:center;
}

#search-results{

    width: 80%;
    margin: 3rem auto 0;

    opacity: 0;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;

    transform: translateY(-20px);

    transition: opacity .8s ease, transform 1s ease, max-height 1s ease;

    overflow: scroll;
}

#search-results .post-card{
    opacity: 0;
    transform: translateY(25px) scale(.98);

    animation: aparecer .5 forwards;
}


@keyframes aparecer{

    from{

        opacity: 0;
        transform: translateY(25px) scale(.98);
    }

    to{

        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#search-results.show{

    opacity: 1;

    transform: translateY(0);

    max-height: 80vh;
}

.search-section:has(#search-results.show){

    padding-bottom: 10rem;
}




/*PUBLICACIONES DESTACADAS*/

.publicaciones-destacadas{
    
    background-color: #0F172A;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    padding: 4rem;

    
}

.publicaciones-destacadas h1{
    font-weight: 600;
    font-size: 3em;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    color: #F8FAFC;
}

.posts-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 80%;
}








/*PUBLICACION-GENÉRICA*/

.post-card{

    

    background-color: #F8FAFC;
    border-radius: 20px;
    overflow: hidden;
    transition: .3s ease-in-out;
    
    
    backface-visibility: hidden;
    will-change: transform;

    overflow: hidden;
    display: flex;
    flex-direction: column;

    min-height: 700px;

    outline: none;

    animation: aparecer .5s ease;

}

@keyframes aparecer {

    from {
        opacity:0;
        transform:translateY(30px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}

.post-card:hover,
.post-card:focus,
.post-card:focus-visible{
    outline: none;
    box-shadow: none;
}


.post-img{


    position: relative;
    height: 240px;

    overflow: hidden;

    border-radius: 20px 20px 0 0;
}


.post-card:hover .post-img img{

    transform: scale(1.04);
}
.post-img img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;

    border-radius: 20px 20px 0 0;

    transition: transform .8s ease;
    
}

.post-category{
    position: absolute;
    top: 2rem;
    left: 2rem;
    background-color: #3B82F6;
    color: #F8FAFC;
    padding: .5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    z-index: 100;

}


.post-content{
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    flex: 1;
}

.post-content h2{

    overflow-wrap: break-word;
    font-size:2rem;
    margin-bottom:1rem;
    text-align: left;

}

.post-date{
    font-size: 0.85rem;
    color: #94A3B8;
    margin: 0.4rem 0;

}

.post-content p{

    color:#475569;
    line-height:1.7;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp:3;
    line-clamp: 3;
    -webkit-box-orient:vertical;
    overflow:hidden;

}


.post-content h2,
.post-content p{
    width: 100%;
    text-align: left;
    margin: 0;
}


.post-footer{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 2rem;
   border-top: 1px solid black;

}

.post-footer .user{
    display: flex;
    align-items: center;
    gap: 1rem;
}


.post-footer .user img{
    width: 48px;
    height: 48px;

    border-radius: 50%;
}

.post-footer .user .user-info{

    display: flex;
    flex-direction: column;
    
    gap: 1rem;
    justify-content:flex-start;
}


.post-footer .reactions{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}


.post-card:hover{
    transform:  translateY(-8px);
    outline: none;
    cursor: pointer;
}






/*CATEGORIAS*/


.categorias-section{

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding: 10rem 2rem;

    

     background: linear-gradient(
        to bottom,
        #0F172A 0%,
        #F8FAFC 10%,
        #F8FAFC 20%,
        #F8FAFC 80%,
        #DDE7F4 90%,
        #0F172A 100%
    );
}

.categorias-section h1{

    font-weight: 600;
    font-size: 3em;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    color: #0F172A;

}

.categorias{ 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    width: 90%;
    

}
.categoria-card{

    height: 160px;
    width: 100%;
    background-color: red;
    border-radius: 12px;
    padding: 1rem 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    border: 3px solid black;

    transition: .3s ease-in-out;

    background-color: #1E293B;
    color: #F8FAFC;
}


#tecnologia{
    border-left: 8px solid #3B82F6;
}

#ciencia{
    border-left: 8px solid #22D3EE;
}

#entretenimiento{

    border-left: 8px solid #EC4899;
}

#animales{
    border-left: 8px solid #337b3f;
}

#idiomas{
    border-left: 8px solid #f5ce0b;
}

#deportes{
    border-left: 8px solid #4ec522;
}

#videojuegos{
    border-left: 8px solid #2c24c4;
}

#historia{
    border-left: 8px solid #986b36;
}

#personas{
    border-left: 8px solid #ec4a38;
}

#geografia{
    border-left: 8px solid #ffa91e;
}

#cultura{
    border-left: 8px solid #8a68da;
}

#cocina{
    border-left: 8px solid #3aa898;
}

.categoria-card:hover{
    transform: scale(.95);
    cursor: pointer;
}






/* CÓMO PUBLICAR SECTION*/


.publicar-section{
    background-color: #0F172A;
    width: 100%;
    padding: 6rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;

    color:#F8FAFC;

}

.publicar-section h1{
    font-weight: 600;
    font-size: 3em;
    width: 80%;
    text-align: center;
    margin: 0 auto;
    color: #F8FAFC;
}

.publicar-section > p{
    color: #F8FAFC;
    font-weight: 500;
    font-size: 1.3em;
    width: 70%;
    text-align: center;
    margin: 0 auto;
}


.publicar-middle{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin:auto;

    background: rgba(30,41,59,.7);
    backdrop-filter: blur(12px);

    padding:4rem;

    border-radius: 24px;
    border: 2px solid rgba(255, 255, 255, 0.229);
    box-shadow: 0 0 30px #3B82F6;
}


.publicar-middle .post-card{
    color: black;
}

.publicar-steps{

    color: #F8FAFC;
    font-weight: 500;
    font-size: 1em;
    width: auto;
    text-align: center;
    padding: 0;
   
    flex: 1;

    line-height: 2;


    margin: 0 auto;

    list-style: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.publicar-section button{

    color: #1E293B;
    font-weight: 600;
    font-size: 1.2em;
    padding: 1em;
    border-radius: 12px;
    margin: 2em;

    transition: .5s ease-in-out;

    display: flex;
    align-items: center;
    gap: 1rem;

}

.publicar-section button a{
    text-decoration: none;
    color: black;
}

.publicar-section button span img{
    width: 2em;
    height: 2em;
}


.publicar-section button:hover{
    transform: scale(.98);
    filter: drop-shadow(0 0 30px #94A3B8);
}





/*PUBLICAR*/


.create-post{
    background-color: #0F172A;
    padding: 6rem;
}


.create-post h1{
    font-weight: 600;
    font-size: 2.5em;
    width: 80%;
    text-align: center;
    margin: 1.5rem auto;
    color: #F8FAFC;

}

.create-post > p{
    font-weight: 500;
    font-size: 1.2em;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    color: #F8FAFC;
}


/*FORMULARIO PARA POST*/

.post-template{
    width:90%;
    min-height: 90vh;
    height: auto;

    background-color: #F8FAFC;
    border: 2px solid black;
    border-radius: 20px;

    margin: 2rem auto;

    padding: 4rem;

    display: flex;
    align-items:center;
    justify-content: space-around;
    gap: 4rem;

    box-shadow: 0 0 30px #3B82F6;
}

.post-template form{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .5rem;

    flex: 1;
    min-width: 420px;
}

.post-template form label{
    font-weight: 600;
    margin-top: 1rem;
    font-size: 1rem;

}

.post-template form textarea{
    resize: none;
    overflow: hidden;
    font-size: .8rem;
}

.form-input{
    padding: 1rem 1.5rem;
    border: 2px solid #0F172A;
    border-radius: 12px;
    background-color: white;
    font-size: .8rem;

    transition: .3s;
}

.form-input:focus{
    border: 2px solid #3B82F6;
    box-shadow: 0 0 10px #1E293B;
}


select{
    appearance:none;
    cursor:pointer;

    background-image:url("imgs/icons/flecha-hacia-abajo.png");
    background-repeat:no-repeat;
    background-position:right 1.2rem center;
    background-size:18px;
}


input[type="file"]{
    display:none;
}

.upload-box{
    border:2px dashed #94A3B8;
    border-radius:16px;
    padding:3rem;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;

    cursor:pointer;

    transition:.3s;
}

.upload-box:hover{
    border-color:#3B82F6;
    background:#F8FAFC;
}

#resumen{
    min-height:120px;
}

#contenido{
    min-height:280px;
}


#form-message{

    min-height: 25px;
    color: black;
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem .5rem;
    text-align: start;


    display:block;
}


#form-message.form-error{

    color: red;
}

#form-message.form-success{
    color: green;
}




.publish-btn{
    
    background:#3B82F6;
    color:white;
    border:none;

    padding:1rem 2.5rem;

    border-radius:12px;

    font-weight:600;

    cursor:pointer;

    transition: .8s;


    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.publish-btn:hover{
    background-color: #1E293B;
    box-shadow: 0 0 10px #1e293bd8;
}


.contador{
    width: 100%;
    text-align: right;
    font-size: .8rem;
    font-weight: 500;
    color: #64748B;
}

.contador-normal{
    color: #64748B;
}

.contador-warning{
    color: #F59E0B;
}

.contador-danger{
    color: #EF4444;
}




/*PREVIEW POST*/

.post-preview .post-card:hover{
    background-color: white;
}



.post-preview{
    flex:1.3;

    display:flex;
    justify-content:center;
    align-items:center;

    min-height: 90%;
    align-self: center;

}

.post-preview .post-card{

    width: 70%;
    max-width:600px;

    cursor:default;

    display: flex;
    flex-direction: column;

    height: auto;
    min-height:600px;

    overflow:visible;

    border: 2px solid #0F172A;
}


.post-preview .post-card .post-content{
    padding: 2rem;
    font-size: .8rem;
}

.post-preview .post-card:hover{
    transform:none;
}

.post-preview .post-img{

    height:240px;
}

.post-preview .post-img img{

    width:100%;
    height:100%;
    object-fit:cover;
}


#preview-titulo{

    font-size:2rem;

    line-height:1.2;

    

    overflow-wrap:break-word;
    word-break:break-word;
}


#preview-explicacion{

    line-height:1.7;

    

    overflow-wrap:break-word;
    word-break: break-word;

    max-height:220px;
}

#preview-titulo,
#preview-explicacion,
#preview-explicacion-larga{
    text-align: left;
    width: 100%;
}

.preview-text{
    line-height: 1.7;

    

    overflow-wrap: break-word;
    word-break: break-word;

    max-height: 220px;
    overflow-y: auto;
}
















/*POST GRANDE*/

.post-page{
    
    background: #0F172A;
    overflow: hidden;

    display: flex;
    justify-content: center;
    padding: 1rem 0;
}

.post-full{
    width:min(100%, 700px);
    height: 80vh;

    box-shadow: 0 10px 30px #3B82F6;
}


.post-full .post-img{
    height: 800px;
    width: 100%;
    position: relative;
}

.post-full .post-img img{
    height:500px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    
}



.post-page .post-category{
    position: absolute;
    top: 2rem;
    left: 2rem;
    background-color: #3B82F6;
    color: #F8FAFC;
    padding: 1rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: .8rem;
}


.post-full .post-content h2{
    font-size:3rem;
    margin-bottom:2rem;
}

.post-full .post-content p{
    display:block;
    overflow:visible;
    -webkit-line-clamp:unset;
    line-clamp:unset;
    font-size: .8rem;
}

.post-full:hover{
    box-shadow: 0 0 30px #3B82F6;
}

#post-long-description{
    margin-top:2rem;
    white-space:pre-wrap;
}




.button-content{
    width: 100%;
    height: auto;
    background-color: #0F172A;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8rem;
    padding-left: 2rem;
}



.button-content button{

    color: #1E293B;
    background-color: #F8FAFC;
    font-weight: 600;
    font-size: .8em;
    padding: 1em;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: .6rem;

    transition: .5s ease-in-out;
}

.button-content button:hover{
    transform: scale(.98);
    filter: drop-shadow(0 0 10px #94A3B8);
}



posts.html{
    background-color: #0F172A;
}



/*ACERCA DE DISCOVERLY*/

.info-section{
    background: linear-gradient(
        to bottom,
        #0F172A 0%,
        #F8FAFC 10%,
        #F8FAFC 20%,
        #F8FAFC 80%,
        #DDE7F4 90%,
        #DDE7F4 100%
    );

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;

    padding: 8rem 2rem;
}

.info-section h1{

    font-weight: 600;
    font-size: 2.5em;
    width: 90%;
    text-align: center;
    margin: 0 auto;
    color: #0F172A;
    margin-bottom: 2em;
}

.info-section p{
    line-height:1.7;

    white-space: pre-wrap;

    overflow-wrap:break-word;
    word-break: break-word;

    columns: black;

    float: inline-start;
    font-size: 1em;
}


.info-cards{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 2em;
    align-items: stretch;
}


.info-cards h2{
    margin-bottom: .5em;
    font-size: 1.5rem;
}

.info-section .categoria-card{
    width: clamp(200px, 40em, 80%);
    height: auto;


    background-color: #1e293beb;

    border-left: 10px solid #3B82F6;

    padding: 2rem 4rem;

    flex: 1;
}

.info-section .categoria-card:hover{
    filter: drop-shadow(0 0 40px #1E293B);
    
}


/*FOOTER*/


footer{
    background: linear-gradient(to top, #3B82F6 50%, #0F172A 100%);
    color: #F8FAFC;
    height: 60vh;
    width: 100%;

    display: flex;
    align-items: center;
}


.columns{

    width: 90%;
    height: auto;
    padding: 2rem 0;

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 8rem;
    align-items: center;
}


.column h3{


    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.column ul li{
    font-size: 1rem;
}

.column ul li a{
    text-decoration: none;
    color: #F8FAFC;

    transition: .2s;
}
.column ul{
    list-style: none;
    text-align: left;
    line-height: 1.8;
}

.column ul li img{
    width: 4rem;
    height: 4rem;
}



.column ul li a:hover{
    color: #94A3B8;
}













/*PUBLICACIONES-TODAS*/




.publicaciones-top{
    width: 100%;
    height: auto;
    padding: 6rem 1.5rem 0 1.5rem;

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;


    background: linear-gradient(to bottom, #3B82F6 50%, #0F172A 100%);
    color: #DDE7F4;

    border-bottom: 4px solid #F8FAFC;
}



.publicaciones-up{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 2rem;

    color: #F8FAFC;

}


.publicaciones-up h1{
    color: #F8FAFC;
    font-weight: 600;
    font-size: 3em;

    margin-bottom: 1rem;


    transition: .5s ease;
}

.publicaciones-up p{
    color: #F8FAFC;
    font-weight: 500;
    font-size: 1em;
    
}


.publicaciones-up .search-bar{
    width: 30%;
    background-color: #DDE7F4;
    border-radius: 9999px;

    padding: 1rem 1.2rem;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 1rem;

    border: 4px solid transparent;


    transition: .4s ease-in-out;
}

.publicaciones-up .search-bar input{
    color: #0F172A;
}

.publicaciones-up .search-bar input::placeholder{
    color: #1e293bcb;
}


.publicaciones-up .search-bar:focus-within{
    border-color:#1e293bd1;
    box-shadow: 0 0 40px #1E293B;
    width: 60%;
}




.btn-filtros{
    display:none;

    justify-content: space-around;
    align-items: center;
    padding: 1rem 2rem;
    gap: 1rem;

    color: #F8FAFC;

    background-color: #1e293b66;
    border-radius: 12px;
    border: 2px solid #3B82F6;
    backdrop-filter: blur(20px);

    margin: 2rem;

    transition: .5s ease;
}


.publicaciones-filters{
    display: flex;
    justify-content: space-between;
    align-items: center;


    padding-bottom: 1rem;
    gap: 1rem;

    color: #F8FAFC;
}






.filters{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    gap: 2rem;

    color: #F8FAFC;
}


.filter-group{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem 1.2rem;
    gap: 1rem;

    color: #F8FAFC;
    font-size: .8rem;

    background-color: #1e293b66;
    border-radius: 12px;
    border: 2px solid #3B82F6;
    backdrop-filter: blur(20px);

    transition: .5s ease;
}


.filter-group:hover{
    background-color: #1e293bcf;
}


.filter-group label{
    font-weight: 600;
}


.filter-group .form-input{
    min-width:200px;

    appearance:none;
    cursor:pointer;

    background-image:url("imgs/icons/flecha-hacia-abajo.png");
    background-repeat:no-repeat;
    background-position:right 1rem center;
    background-size:16px;

    padding-right:2rem;
}


.filter-group .form-input:focus{
    border-color:#3B82F6;
    box-shadow:0 0 30px #3B82F6;
}

select.form-input{

    appearance:none;

    cursor:pointer;

    padding-right:3rem;
    font-size: .8rem;

    background-image:url("imgs/icons/flecha-hacia-abajo.png");
    background-repeat:no-repeat;
    background-position:right 1rem center;
    background-size:16px;
}











.publicaciones-todas{
    
    background-color: #0F172A;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 1rem;

    
}



.posts-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 90%;
}









.loader{
    min-height:50vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1.5rem;

    color:white;
}

.spinner{

    width:60px;
    height:60px;

    border:6px solid rgba(255,255,255,.2);
    border-top:6px solid #3B82F6;

    border-radius:50%;

    animation:girar 1s linear infinite;
}

@keyframes girar{

    to{
        transform:rotate(360deg);
    }
}

.loader.oculto{
    display:none;
}




.no-results{
    display:none;
    flex-direction: column;
    align-items: center;

    gap: 2rem;

    text-align:center;

    color:white;

    font-size:1.4rem;
    font-weight:500;

    padding:4rem 2rem;
}

.no-results.mostrar{
    display:block;
}






#posts-grid {

    transition: opacity 1.4s ease, transform 1.4s ease;

}



.ocultar-posts {

    opacity: 0;
    transform: translateY(20px);

}








.main-form body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(135deg, #0F172A, #1E293B);
    font-family: "Inter", sans-serif;
}


.main-form main{
    min-height:100vh;
    min-width: 100vw;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:2rem;
}


.form-register {

    width: min(600px, 90%);

    background: #1E293B;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;

    padding: 3rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;

    box-shadow: 0 20px 70px #3B82F6;

    animation: aparecer .4s ease;
}

.form-register h1{

    margin:0;

    color:white;

    font-size:2rem;

    text-align:center;

}

.form-register p{

    margin:0 0 1rem;

    color:#94A3B8;

    text-align:center;

}

.form-register label{

    color:white;

    font-weight:600;

    font-size:.95rem;

}

.form-register input{

    width:100%;

    padding:15px;

    border-radius:12px;

    border:1px solid #334155;

    background:#0F172A;

    color:white;

    font-size:1rem;

    box-sizing:border-box;

    transition:.25s;

}

.form-register input::placeholder{

    color:#64748B;

}

.form-register input:focus{

    outline:none;

    border-color:#3B82F6;

    box-shadow:0 0 0 4px rgba(59,130,246,.2);

}

.form-register button{

    margin-top:1rem;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#3B82F6;

    color:white;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.form-register button:hover{

    background:#2563EB;

    transform:translateY(-2px);

}

.form-register button:active{

    transform:scale(.98);

}

#register-message,
#login-message{

    min-height:24px;

    text-align:center;

    font-weight:600;

}

.form-error{

    color:#EF4444;

}

.form-success{

    color:#22C55E;

}

.auth-link{

    text-align:center;

    color:#94A3B8;

}

.auth-link a{

    color:#3B82F6;

    text-decoration:none;

    font-weight:600;

}

.auth-link a:hover{

    text-decoration:underline;

}

@keyframes aparecer{

    from{

        opacity:0;
        transform:translateY(25px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}









/* ===========================
        PROFILE
=========================== */

.profile-page{

    width:90%;
    max-width:1300px;

    margin:120px auto 80px;

}

/* ---------- CABECERA ---------- */

.profile-header{

    background:#1E293B;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:3rem;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    box-shadow:0 10px 60px #3b83f6de;

}

/* FOTO */

#profile-photo{

    width:170px;
    height:170px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid #3B82F6;

    background:#0F172A;

    margin-bottom:1.5rem;

}

/* NOMBRE */

#profile-name{

    color:white;

    font-size:2.5rem;

    font-weight:700;

    margin-bottom:.5rem;

}

/* EMAIL */

#profile-email{

    color:#94A3B8;

    font-size:1rem;

    margin-bottom:1rem;

}

/* BIO */

#profile-bio{

    max-width:700px;

    color:#CBD5E1;

    line-height:1.7;

    margin-bottom:2rem;

}

/* BOTONES */

.profile-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

    justify-content:center;

}

/* BOTONES GENERALES */

.profile-buttons button{

    padding:14px 30px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

    transition:.25s;

}

/* EDITAR */

#edit-profile-btn{

    background:#3B82F6;

    color:white;

}

#edit-profile-btn:hover{

    background:#2563EB;

    transform:translateY(-2px);

}

/* LOGOUT */

#logout-btn{

    background:#334155;

    color:white;

}

#logout-btn:hover{

    background:#475569;

    transform:translateY(-2px);

}

/* ---------- POSTS ---------- */

.profile-posts{

    margin-top:4rem;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.profile-posts h2{

    color: black;

    font-size:2rem;

    margin-bottom:2rem;

    text-align:center;

}

/* Reutiliza el mismo grid de posts */

#profile-posts-grid{

    display:grid;

    grid-template-columns: repeat(2, minmax(320px, 1fr));

    gap:2rem;
    color: black;

}





.modal{

    position:fixed;

    inset: 0;


    background:rgba(0,0,0,.7);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    backdrop-filter:blur(10px);


}

.modal.activo{

    display:flex;

}



.modal-content{

    width:80%;
    max-width:700px;

    background:#1E293B;
    color: #F8FAFC;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:3rem;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap: 1rem;

    text-align:center;

    box-shadow:0 10px 60px #3b83f6de;

    animation:aparecer .25s;

}


.modal-content h2{
    font-size: 2.5rem;
}

#fto-perfil-editar{
    padding: .5rem;
    border: 3px dotted #F8FAFC;
    border-radius: 12px;
}
.modal-content label{
    margin-top: 1rem;
}

.modal-content input,
.modal-content textarea{

    width:100%;

    padding:14px;

    border-radius:12px;

    border:1px solid #334155;

    background:#0F172A;

    color:white;

    font-size:1rem;

}



#edit-photo-preview{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    align-self:center;

}


.modal-buttons{
    display: flex;
    justify-content: space-around;
    gap: 2rem;
}

#cancel-edit-btn, #save-edit-btn{

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 10rem;
    height: 4rem;

    background: white;
    color: #0F172A;
    text-decoration: none;

    border: 2px solid #0F172A;
    border-radius: 20px;

    font-weight: 600;
    font-size: 1rem;

    transition: .3s ease;
    margin-top: 2em;

}


#cancel-edit-btn:hover, #save-edit-btn:hover{
    transform:translateY(-2px);
    background-color: #DDE7F4;
}



/*MENU CAMBIA*/

@media (max-width: 1555px){

    
    .menu-list{
    display:none;
    }

    .menu-toggle{
    display: block;
}

.info-section{
    padding: 14rem 2rem;
    
}


.info-section .categoria-card{
    margin: 0 auto;
}
.info-cards{
    flex-direction: column;
    justify-content: center;
}



.categorias{
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}



.create-post{
    padding: 6rem 2rem;
}
.create-post h1{
    font-size: 4rem;
    width:90%;
    min-width:0;
    
}

.create-post > p{
    width:90%;
    font-size:1.8rem;
}

.post-template{
    flex-direction: column;
    width: 90%;
    padding: 2rem;
}

.post-template form{
    min-width: 0;
    width: 100%;
}

.post-preview{
    width: 100%;
}

.post-preview .post-card{
    width: 100%;
    max-width: none;
}

.create-post .contador{
    width: 100%;
    text-align: right;
    font-size: .9rem;
    font-weight: 500;
    color: #64748B;
}

.posts-grid{
    grid-template-columns:1fr 1fr;
    width:100%;
}



.publicaciones-up{
    flex-direction: column;
    gap: 4rem;
    align-items: flex-start;
}

.publicaciones-up .search-bar{
    width: 50%;
}

.publicaciones-up .search-bar:focus-within{
    width: 90%;
}



.publicaciones-up{
    flex-direction: column;
    gap: 4rem;
    align-items: flex-start;
}

.publicaciones-up .search-bar{
    width: 60%;
}

.publicaciones-up .search-bar:focus-within{
    width: 90%;
}


.publicaciones-filters{
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}



.publicaciones-top{
    align-items:flex-start;
}



.btn-filtros{
    display:block;
}



.filters{
    display:none;
}

.filters.activo{

    display:flex;
    flex-direction:column;
    position:absolute;

    top: 100%;
    left:1rem;

    width: 40vw;
    max-width: auto;

    padding:1.5rem;

    background:#1e293bea;
    backdrop-filter:blur(10px);

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

    z-index:1000;
}


.filters.activo .filter-group{


    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;

   width: 100%;
   padding: 1rem;

    margin: 0 auto;


    box-sizing: none;
}

.filters.activo .form-input{

    width:100%;
    min-width:100%;
}


.filters.activo select{
    width:100%;
}


}


/*Tablet / Portátil*/

@media (max-width: 1200px){

    header{
        justify-content: space-between;
    }
    .menu-list{
    display:none;
    }

    .menu-toggle{
    display: block;
}


.categorias{
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}






.info-section{
    padding: 14rem 2rem;
    
}

.info-section .categoria-card{
    margin: 0 auto;
}
.info-cards{
    flex-direction: column;
    justify-content: center;
}





footer{
    height:auto;
    padding:4rem 16rem;
}

.columns{
    flex-direction:column;
    gap:3rem;
    text-align:center;
}

.column ul{
    text-align:center;
}





.create-post{
    padding: 6rem 2rem;
}
.create-post h1{
    font-size: 4rem;
    width:90%;
    min-width:0;
    
}

.create-post > p{
    width:90%;
    font-size:1.8rem;
}

.post-template{
    flex-direction: column;
    width: 90%;
    padding: 2rem;
}

.post-template form{
    min-width: 0;
    width: 100%;
}

.post-preview{
    width: 100%;
}

.post-preview .post-card{
    width: 100%;
    max-width: none;
}

.create-post .contador{
    width: 100%;
    text-align: right;
    font-size: .9rem;
    font-weight: 500;
    color: #64748B;
}

.posts-grid{
    grid-template-columns:1fr 1fr;
    width:100%;
}




.publicar-section{
    padding:6rem 2rem;
    display:flex;
        flex-direction:column;
        align-items:center;
}

.publicar-middle{
    
    padding:2rem;
    gap:3rem;

    display:flex;
    flex-direction:column;
    align-items:center;

    width: 90%;


}
.publicar-middle .post-preview{
    width:100%;
        max-width:500px;
        min-width:0;
}

.publicar-middle .post-preview .post-card{
        max-width: 100%;
        min-height: auto;
    }

.publicar-middle .post-preview .post-img{
    height: 180px;
}

.publicar-middle .post-preview .post-content{
    padding: 1.5rem;
}

.publicar-steps{
    width: 100%;
    font-size:1rem;
    text-align: center;
}



.publicaciones-up{
    flex-direction: column;
    gap: 4rem;
    align-items: flex-start;
}

.publicaciones-up .search-bar{
    width: 60%;
}

.publicaciones-up .search-bar:focus-within{
    width: 90%;
}




.publicaciones-up{
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
}


.publicaciones-up h1{
    font-weight: 600;
    font-size: 3em;

    margin-bottom: .5rem;
}

.publicaciones-up p{
    font-weight: 400;
    font-size: 1.6em;
}

.publicaciones-up .search-bar{
    width: 50%;

    padding: 1.2rem 1rem;
    gap: .5rem;
}


.publicaciones-up .search-bar:focus-within{
    width: 90%;
}


.publicaciones-filters{
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}




.publicaciones-top{
    align-items:flex-start;
}




.btn-filtros{
    display:block;
}



.filters{
    display:none;
}

.filters.activo{

    display:flex;
    flex-direction:column;
    position:absolute;

    top: 100%;
    left:1rem;

    width: 40vw;
    max-width: auto;

    padding:1.5rem;

    background:#1e293bea;
    backdrop-filter:blur(10px);

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

    z-index:1000;
}


.filters.activo .filter-group{


    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;

   width: 100%;
   padding: 1rem;

    margin: 0 auto;


    box-sizing: none;
}

.filters.activo .form-input{

    width:100%;
    min-width:100%;
}


.filters.activo select{
    width:100%;
}


}




/*Mövil*/

@media (max-width: 768px){


    .header{
        justify-content: space-around;
    }
    .brand{
    gap: .5em;

    }

    .logo{

        width: 1.5em;
        height:1.5em;
    }


    .brand p{
        font-weight: 500;
        font-size: 1.2em;
        color: #F8FAFC;
    }

    .menu-list{
    display:none;
    }

    #header-username{
        display: none;
    }
    .menu-toggle{
    display: block;
}





.hero{

    padding: 0 2rem;
    min-height: 100vh;
}

.hero h1{
    font-size: 4rem;
    width:100%;
    min-width:0;
}

.hero h2{
    width:100%;
    font-size:1.2rem;
}

.hero .learnmore{
    width:140px;
    height:55px;
    font-size:1rem;
}







.post-card{
    min-height: auto;
}

.post-content p{
    font-size: .8rem;
}

.post-content h2{
    font-size: 1.5rem;
}


.post-footer h4, .post-footer span{
    font-size: .8rem;
}



.post-footer .user img{
    width: 2rem;
    height: 2rem;
}























.posts-grid{
    grid-template-columns:1fr;
    width:100%;
}


.publicaciones-destacadas h1{
    font-size: 2.4rem;
    margin: 0 auto;
    width: auto;
}

.publicaciones-destacadas{
    gap: 4rem;
    padding: 4rem 2rem;
}





.categorias-section{
    padding: 6rem 1rem;
}

.categorias{
    grid-template-columns:1fr;
    gap:2rem;
    width: 100%;
}



.categoria-card h2{
    font-size: 1.2rem;
}

.categoria-card p{
    font-size: .8rem;
}



.publicar-section{
    padding: 4rem 2rem;
    display:flex;
        flex-direction:column;
        align-items:center;
        gap: 2rem;
}

.publicar-section h1{
    font-size: 2rem;
    width: auto;
}

.publicar-section p{
    font-size: 1rem;
}

.publicar-middle{
    
    padding:1rem;
    gap:3rem;

    display:flex;
    flex-direction:column;
    align-items:center;

    width: 100%;


}
.publicar-middle .post-preview{
    width:100%;
        max-width:500px;
        min-width:0;
}

.publicar-middle .post-preview .post-card{
        max-width: 100%;
        min-height: auto;
    }

.publicar-middle .post-preview .post-img{
    height: 180px;
}

.publicar-middle .post-preview .post-card .post-img .post-category{
    font-size: .8rem;
}
.publicar-middle .post-preview .post-content p{
    padding: 1.5rem;
    font-size: .8rem;
}

.publicar-steps{
    width: 100%;
    font-size:.8rem;
    text-align: center;
}

#btn-create-post{
    font-size: 1rem;
}





.info-section{
    padding: 6rem 1rem;
    
}

.info-section .categoria-card{
    width: 100%;
}


.info-section .categoria-card h2{
    font-size: 1.2rem;
}
.info-section .categoria-card{
    margin: 0 auto;
    padding: 1rem 2rem ;
    font-size: .8rem;
}
.info-cards{
    flex-direction: column;
    justify-content: center;
}





footer{
    height:auto;
    padding:4rem 2rem;
}

.columns{
    flex-direction:column;
    gap:3rem;
    text-align:center;
}

.column ul{
    text-align:center;
}






.create-post{
    padding: 6rem 2rem;
}
.create-post h1{
    font-size: 2rem;
    width: auto;
    min-width:0;
    
}

.create-post > p{
    width:90%;
    font-size:.8rem;
}

.post-template{
    flex-direction: column;
    width: 100%;
    padding: 2rem;
}

.post-template form{
    min-width: 0;
    width: 100%;
}


.post-template form{

    gap:.2rem;


}

.post-template form label{

    font-size: 1rem;

}

.post-template form textarea{
    resize: none;
    overflow: hidden;
    font-size: .8rem;
}



.post-preview{
    width: 100%;
}

.post-preview .post-card{
    width: 100%;
    max-width: none;
}


#preview-titulo{
    font-size: 1.5rem;
}




#preview-explicacion .preview-text, #preview-explicacion-larga .preview-text{
    font-size: .8rem;
}


.post-preview .post-footer h4{
    font-size: .8rem;
}





.create-post .contador{
    width: 100%;
    text-align: right;
    font-size: .6rem;
    font-weight: 500;
    color: #64748B;
}






.publicaciones-up{
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
}

.publicaciones-up h1{
    font-weight: 600;
    font-size: 1.8em;
    width: auto;
    margin-bottom: .5rem;
}

.publicaciones-up p{
    font-weight: 400;
    font-size: .8em;
}

.publicaciones-up .search-bar{
    width: 60%;

    padding: .5rem 1rem;
    gap: .5rem;

}

.publicaciones-up .search-bar #search-input{
    font-size: .7rem;
}



.publicaciones-up .search-bar:focus-within{
    width: 100%;
}



.publicaciones-top{
    align-items:flex-start;
}



.btn-filtros{
    display:block;
}



.filters{
    display:none;
}

.filters.activo{

    display:flex;
    flex-direction:column;
    position:absolute;

    top: 100%;
    left:1rem;

    width: 70vw;
    max-width: auto;

    padding:1rem;
    gap: 1rem;

    background:#1e293bea;
    backdrop-filter:blur(10px);

    border-radius:20px;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

    z-index:1000;
}


.filters.activo .filter-group{


    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;

   width: 100%;
   padding: 1rem;

    margin: 0 auto;


    box-sizing: none;
}

.filters.activo  .filter-group .form-input{

    width:100%;
    min-width:100%;
    font-size: .6rem;

}


.filters.activo select{
    width:100%;
}




    .profile-header{

        padding:2rem;

    }

    #profile-photo{

        width:130px;
        height:130px;

    }

    #profile-name{

        font-size:2rem;

    }

    .profile-buttons{

        width:100%;

        flex-direction:column;

    }

    .profile-buttons button{

        width:100%;

    }

    #profile-posts-grid{
        grid-template-columns: 1fr;
    }




    .post-page{
        padding: 1rem 2rem;
    }

    .post-full .post-content h2{
        font-size: 2.2rem;
    }

    .main-form main{
        padding: 1rem;
    }

    .form-register{
        width: 100%;
        padding: 1.5rem;
    }

    .form-register h1{
        font-size: 1.8rem;
    }

    .form-register p{
        font-size: .8rem;
    }

    .form-register label{
        font-size: .8rem;
    }

    .form-register input{
        font-size: .8rem;
    }


    #login-btn{
        font-size: .8rem;
    }

    .auth-link{
        font-size: .8rem;
    }

}