/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Verdana, sans-serif;
    color:#f8f1d5;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(30,60,180,.45) 0%,
            transparent 30%
        ),

        radial-gradient(
            circle at 20% 20%,
            rgba(249,212,118,.08) 0%,
            transparent 15%
        ),

        radial-gradient(
            circle at 60% 85%,
            rgba(20,50,120,.25) 0%,
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #000000 0%,
            #000805 35%,
            #001005 70%,
            #000000 100%
        );

    min-height:100vh;
    overflow-x:hidden;
    padding-top:90px;
}

.team{
    padding:40px 0;

    text-align:center;
}

.team-subtitle{
    max-width:600px;

    margin:20px auto 20px;

    color:rgba(248,241,213,.7);

    line-height:1.7;
}

.team-grid{
    width:80%;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:30px;
}

.button-lang{

    background:transparent;

    color:#f8f1d5;

    border:1px solid rgba(249,212,118,.35);

    padding:6px 12px;

    font-size:.75rem;

    letter-spacing:1px;

    cursor:pointer;

    transition:.3s ease;

    font-family:inherit;

}


.button-lang:hover{

    color:#f9d476;

    border-color:#f9d476;

    background:rgba(249,212,118,.05);

}

.member-card{
    padding:40px 30px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(0,16,5,.8),
            rgba(0,0,0,.65)
        );

    border:
        1px solid rgba(249,212,118,.12);

    backdrop-filter:blur(20px);

    transition:.3s;
}

.member-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.6);
}

.member-avatar{
    width:70px;
    height:70px;

    margin:0 auto 20px;

    border-radius:50%;

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

    background:
        radial-gradient(
            circle,
            rgba(249,212,118,.25),
            rgba(249,212,118,.05)
        );

    border:
        1px solid rgba(249,212,118,.2);

    color:#f9d476;

    font-weight:bold;

    font-size:1.2rem;
}

.member-card h3{
    color:#f8f1d5;

    margin-bottom:8px;
}

.member-card span{
    display:block;

    color:#f9d476;

    font-size:.9rem;

    letter-spacing:1px;

    margin-bottom:20px;
}

.member-card p{
    color:rgba(248,241,213,.7);

    line-height:1.7;
}

/* RUIDO */

.noise{
    position:fixed;
    inset:0;

    background-image:
        radial-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:4px 4px;

    opacity:.12;

    pointer-events:none;

    z-index:1;
}

/* SCANLINES */

.scanlines{
    position:fixed;
    inset:0;

    background:
        repeating-linear-gradient(
            transparent 0px,
            transparent 2px,
            rgba(255,255,255,.015) 3px
        );

    pointer-events:none;

    z-index:2;
}

/* PUNTOS */

.dots{
    position:fixed;
    inset:0;

    background-image:
        radial-gradient(
            rgba(249,212,118,.4) 1px,
            transparent 1px
        );

    background-size:28px 28px;

    opacity:.05;

    pointer-events:none;

    z-index:0;
}

.dots2{
    position:fixed;
    inset:-100px;

    background-image:
        radial-gradient(
            rgba(255,255,255,.1) 1px,
            transparent 1px
        );

    background-size:55px 55px;

    opacity:.04;

    pointer-events:none;

    z-index:0;
}

/* NAV */

nav{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:80px;

    padding:0 8%;

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

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

    backdrop-filter:blur(20px);

    border-bottom:
        1px solid rgba(249,212,118,.12);

    z-index:1000;
}

.logo{
    font-size:1.7rem;
    font-weight:bold;
    letter-spacing:4px;

    color:#f9d476;

    text-shadow:
        0 0 10px rgba(249,212,118,.5);
}

nav ul{
    display:flex;
    gap:30px;
    list-style:none;
}

nav a{
    color:#f8f1d5;
    text-decoration:none;
    transition:.3s;
}

nav a:hover{
    color:#f9d476;
}

/* HERO */

.hero{
    min-height:85vh;

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

    text-align:center;

    padding:40px;
}

.hero span{
    letter-spacing:4px;
    font-size:.8rem;
    opacity:.7;
}

.hero h1{
    max-width:900px;

    margin-top:20px;

    font-size:4.8rem;

    text-shadow:
        0 0 25px rgba(249,212,118,.15);
}

.hero p{
    max-width:650px;

    margin-top:30px;

    line-height:1.8;

    color:rgba(248,241,213,.8);
}

/* SECCIONES */



section{
    scroll-margin-top:120px;
}

.card{
    width:80%;

    margin:40px auto;

    padding:50px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(0,16,5,.8),
            rgba(0,0,0,.65)
        );

    border:
        1px solid rgba(249,212,118,.1);

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.6);
}

.card h2{
    color:#f9d476;

    margin-bottom:20px;
}

.card h2::after{
    content:" ✦";
    opacity:.6;
}

.card p{
    line-height:1.8;
}

.services{
    width:100%;
    padding:30px 0;

    position:relative;

    text-align:center;
}

/* título */
.section-title{
    font-size:2.5rem;
    letter-spacing:4px;

    color:#f9d476;

    margin-bottom:60px;

    text-shadow:
        0 0 15px rgba(249,212,118,.4);
}

/* grid */
.services-grid{
    width:80%;
    margin:auto;

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

/* CARD PREMIUM (distinta a las normales) */
.service-card{
    padding:40px;

    border-radius:26px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(40,90,200,.25),
            transparent 60%
        ),

        linear-gradient(
            180deg,
            rgba(0,16,5,.85),
            rgba(0,0,0,.75)
        );

    border:1px solid rgba(249,212,118,.18);

    backdrop-filter:blur(25px);

    box-shadow:
        0 25px 80px rgba(0,0,0,.7);

    text-align:left;

    position:relative;

    overflow:hidden;
}

/* glow azul detrás */
.service-card::before{
    content:"";
    position:absolute;
    inset:-40%;

    background:
        radial-gradient(
            circle,
            rgba(60,120,255,.25),
            transparent 60%
        );

    filter:blur(60px);

    z-index:0;
}

/* contenido encima del glow */
.service-card h3,
.service-card p,
.service-card ul{
    position:relative;
    z-index:1;
}

.service-card h3{
    color:#f9d476;
    margin-bottom:5px;

    font-size:1.4rem;

    text-shadow:0 0 10px rgba(249,212,118,.3);
}

.service-card p{
    margin-bottom:5px;
    color:rgba(248,241,213,.85);
    line-height:1.6;
}

.service-card ul{
    padding-left:18px;
}

.service-card li{
    margin-bottom:10px;
    color:rgba(248,241,213,.8);
}

/* hover suave */
.service-card:hover{
    transform:translateY(-5px);
    transition:.3s;
    box-shadow:
        0 30px 100px rgba(0,0,0,.8);
}


/* GRID */

.grid{
    width:100%;

    margin:auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(300px,1fr));

    gap:30px;
}

/* ESTRELLAS */

.star{
    position:fixed;

    color:#f9d476;

    font-size:22px;

    opacity:.3;

    text-shadow:
        0 0 10px #f9d476;

    pointer-events:none;

    animation:twinkle 3s infinite alternate;
}

.star1{
    top:180px;
    left:8%;
}

.star2{
    top:500px;
    right:10%;
}

.star3{
    bottom:180px;
    left:15%;
}

@keyframes twinkle{
    from{
        opacity:.15;
        transform:scale(.9);
    }

    to{
        opacity:.5;
        transform:scale(1.1);
    }
}

/* PIXELES */

.pixel{
    position:fixed;

    width:16px;
    height:16px;

    background:#f9d476;

    opacity:.08;

    box-shadow:
        16px 0 #f9d476,
        0 16px #f9d476,
        16px 16px #f9d476;
}

.pixel1{
    top:220px;
    right:120px;
}

.pixel2{
    bottom:150px;
    left:100px;
}

/* PROJECTS */

.projects{

    padding:40px 0;

    text-align:center;

}


.projects-grid{

    width:80%;

    margin:auto;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.project-card{


    padding:40px 30px;

    border-radius:24px;


    background:

    radial-gradient(
        circle at 20% 20%,
        rgba(40,90,200,.25),
        transparent 60%
    ),


    linear-gradient(
        180deg,
        rgba(0,16,5,.85),
        rgba(0,0,0,.75)
    );


    border:

    1px solid rgba(249,212,118,.18);


    backdrop-filter:blur(25px);


    box-shadow:

    0 25px 80px rgba(0,0,0,.7);


    position:relative;

    overflow:hidden;


    transition:.35s;


}



.project-card::before{


    content:"";

    position:absolute;

    inset:-50%;


    background:

    radial-gradient(
        circle,
        rgba(60,120,255,.25),
        transparent 60%
    );


    filter:blur(60px);


}



.project-card:hover{


    transform:translateY(-8px);


    box-shadow:

    0 30px 100px rgba(0,0,0,.8);


}



.project-image{


    width:140px;

    height:140px;


    margin:0 auto 25px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:

    radial-gradient(
        circle,
        rgba(249,212,118,.18),
        rgba(249,212,118,.03)
    );


    border:

    1px solid rgba(249,212,118,.2);


}



.project-image img{


    max-width:90%;

    max-height:90%;


}



.project-card h3{


    color:#f9d476;

    margin-bottom:8px;


}



.project-card span{


    color:

    rgba(248,241,213,.7);


    font-size:.9rem;


}



.project-info{


    margin-top:25px;

    opacity:0;


    max-height:0;


    overflow:hidden;


    transition:.35s;


}



.project-card:hover .project-info{


    opacity:1;

    max-height:200px;


}



.project-info ul{


    padding-left:20px;

    text-align:left;


}



.project-info li{


    margin-bottom:10px;

    color:

    rgba(248,241,213,.8);


}

/* STATUS */

.status{
    position:fixed;

    bottom:20px;
    right:20px;

    padding:10px 18px;

    border-radius:20px;

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

    border:1px solid rgba(249,212,118,.15);

    color:#f9d476;

    font-size:.7rem;

    letter-spacing:2px;
}

/* FOOTER */

footer{
    margin-top:100px;

    padding:50px;

    text-align:center;

    color:rgba(248,241,213,.6);

    border-top:
        1px solid rgba(249,212,118,.08);
}

@media (max-width:800px){

    nav ul{
        display:none;
    }

    .hero h1{
        font-size:2.8rem;
    }

    .card,
    .grid{
        width:90%;
    }

    .card{
        padding:35px;
    }
}