@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Orbitron:wght@400;600;700;900&display=swap');


    /* =========================
    CONFIGURACIÓN GENERAL
    ========================= */

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

    html {
        scroll-behavior: smooth;
    }

    body {
        background: #080808;
        color: #ffffff;
        font-family: 'Orbitron', sans-serif;
    }


    /* =========================
    MENÚ
    ========================= */

    .menu {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 75px;

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

        padding: 0 60px;

        background: rgba(5, 5, 5, 0.95);

        border-bottom: 1px solid #333;

        z-index: 1000;
    }


    /* LOGO */

    .logo {
        font-family: 'Cinzel', serif;

        font-size: 24px;
        font-weight: 900;

        letter-spacing: 5px;

        color: #ffffff;

        text-shadow:
            0 0 8px #ffffff,
            0 0 20px #555;
    }


    /* ENLACES */

    nav {
        display: flex;
        gap: 30px;
    }

    nav a {
        position: relative;

        color: #aaaaaa;

        text-decoration: none;

        font-size: 13px;

        letter-spacing: 2px;

        transition: 0.3s;
    }

    nav a:hover {
    color: #b52a2a;
    text-shadow:
        0 0 10px rgba(180, 0, 0, 0.6);
}

    /* LÍNEA DEBAJO DEL MENÚ */

    nav a::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: -8px;

        width: 0;
        height: 1px;

        background: #b52a2a;

        transition: 0.3s;
    }

    nav a:hover::after {
        width: 100%;
    }


    /* =========================
    PORTADA
    ========================= */

    .inicio {

        min-height: 100vh;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;

        padding: 100px 20px;

        background:
            radial-gradient(
                circle at center,
                rgba(100, 100, 100, 0.15),
                transparent 50%
            ),
            #080808;
    }


    /* TEXTO PEQUEÑO */

    .pequeno {

        font-size: 14px;

        letter-spacing: 7px;

        color: #888888;

        margin-bottom: 20px;
    }


    /* NOMBRE */

    .inicio h1 {

        font-family: 'Cinzel', serif;

        font-size: clamp(55px, 10vw, 120px);

        font-weight: 900;

        line-height: 0.9;

        letter-spacing: 8px;

        color: #ffffff;

        text-shadow:
            0 0 5px #ffffff,
            0 0 20px #777777,
            0 0 50px #222222;
    }


    .inicio h1 span {

        display: block;

        color: #777777;

        font-size: 0.65em;

        letter-spacing: 15px;
    }


    /* DESCRIPCIÓN */

    .descripcion {

        max-width: 600px;

        margin-top: 35px;

        color: #aaaaaa;

        font-size: 16px;

        line-height: 1.8;

        letter-spacing: 2px;
    }


    /* =========================
    BOTÓN
    ========================= */

    .boton {

        display: inline-block;

        margin-top: 35px;

        padding: 16px 35px;

        border: 1px solid #555555;

        color: #ffffff;

        text-decoration: none;

        font-size: 13px;

        letter-spacing: 3px;

        background: #101010;

        transition: 0.3s;
    }


    .boton:hover {

        background: #ffffff;

        color: #000000;

        border-color: #ffffff;

        transform: translateY(-4px);

        box-shadow:
            0 10px 30px rgba(255,255,255,0.15);
    }


    /* =========================
    SECCIONES
    ========================= */

    .seccion {

        min-height: 70vh;

        padding: 120px 10%;

        border-top: 1px solid #222;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;
    }


    .seccion h2 {

        font-family: 'Cinzel', serif;

        font-size: 38px;

        letter-spacing: 7px;

        margin-bottom: 40px;

        text-shadow:
            0 0 10px #777;
    }


    .seccion > p {

        max-width: 750px;

        color: #999999;

        line-height: 2;

        font-size: 16px;
    }


    /* =========================
    PROYECTOS
    ========================= */

    .proyectos {

        width: 100%;

        max-width: 1100px;

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 25px;
    }


    .proyecto {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    border: 1px solid #2f2f2f;

    background:
        linear-gradient(
            145deg,
            #151515,
            #080808
        );

    transition: 0.4s;
}

.proyecto:hover {
    transform: translateY(-8px);
    border-color: #666666;

    box-shadow:
        0 15px 35px rgba(255,255,255,0.08);
}
.contenido-proyecto h3 {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 18px;
    color: #ffffff;
}

.contenido-proyecto p {
    color: #999999;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 20px;
}


    /* =========================
   HABILIDADES
========================= */

.habilidades {

    width: 100%;

    max-width: 900px;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 10px;
}


.habilidades div {
    padding: 28px 15px;
    border: 1px solid #3a1717;
    background:
        linear-gradient(
            145deg,
            #180d0d,
            #080808
        );
    color: #999999;
    font-size: 13px;
    letter-spacing: 2px;
    transition: 0.4s;
}

.habilidades div:hover {
    color: #ffffff;
    border-color: #8b1a1a;
    transform: translateY(-6px);
    box-shadow:
        0 10px 30px rgba(180, 0, 0, 0.15);
}



    /* =========================
   CONTACTO
========================= */

.contacto {
    min-height: 60vh;
    position: relative;
}

.contacto p {
    font-size: 18px;
    color: #aaaaaa;
    line-height: 1.8;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.contacto .boton {
    margin-top: 30px;
    padding: 17px 45px;
    border: 1px solid #5c2020;
    background: #0d0808;
    color: #ffffff;
    letter-spacing: 3px;
    transition: 0.4s;
}

.contacto .boton:hover {
    background: #8b1a1a;
    color: #ffffff;
    border-color: #b52a2a;
    transform: translateY(-5px);
    box-shadow:
        0 10px 30px rgba(180, 0, 0, 0.20);
}

    /* =========================
    PIE DE PÁGINA
    ========================= */

    footer {

    padding: 50px 20px;

    text-align: center;

    border-top: 1px solid #222222;

    background: #050505;
}


footer p {

    color: #555555;

    font-size: 11px;

    letter-spacing: 3px;

    margin: 10px;
}


footer p:first-child {

    color: #888888;

    font-size: 12px;
}


    /* =========================
    RESPONSIVE
    ========================= */

    @media (max-width: 900px) {

        .menu {

            padding: 0 25px;
        }

        nav {

            gap: 15px;
        }

        nav a {

            font-size: 10px;
        }

        .proyectos {

            grid-template-columns: 1fr;
        }

    }


    @media (max-width: 600px) {

        .menu {

            height: auto;

            padding: 20px;

            flex-direction: column;

            gap: 20px;
        }

        nav {

            flex-wrap: wrap;

            justify-content: center;
        }

        .inicio {

            padding-top: 150px;
        }

        .inicio h1 {

            letter-spacing: 4px;
        }

        .inicio h1 span {

            letter-spacing: 6px;
        }

        .seccion {

            padding: 90px 20px;
        }

        .seccion h2 {

            font-size: 28px;

            letter-spacing: 4px;
        }

    }
    .habilidades {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .habilidades div {
        padding: 22px 15px;
    }

    .proyecto {
        min-height: 480px;
    }

    .imagen-proyecto {
        height: 180px;
    }

    .contenido-proyecto {
        padding: 22px;
    }

    .contenido-proyecto h3 {
        font-size: 18px;
    }

    .contenido-proyecto p {
        font-size: 12px;
    }

    /* =========================
    IMÁGENES DE PROYECTOS
    ========================= */

    .imagen-proyecto {

        width: 100%;

        height: 190px;

        overflow: hidden;

        background: #080808;

        border-bottom: 1px solid #333333;
    }

    .imagen-proyecto img {

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: top center;

        display: block;

        transition: 0.5s;
    }


    /* EFECTO AL PASAR EL MOUSE */

    .proyecto:hover .imagen-proyecto img {

        transform: scale(1.05);
    }

    .contenido-proyecto {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.contenido-proyecto .boton-proyecto {
    margin-top: auto;
}

    .tecnologias {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 8px;

        margin-bottom: 20px;
    }

    .tecnologias span {
        padding: 7px 10px;

        border: 1px solid #333333;

        color: #777777;

        font-size: 9px;

        letter-spacing: 1px;
    }

    .boton-proyecto {
        display: inline-block;

        padding: 10px 18px;

        border: 1px solid #444444;

        color: #ffffff;

        text-decoration: none;

        font-size: 10px;

        letter-spacing: 2px;

        transition: 0.3s;
    }

    .boton-proyecto:hover {
        background: #ffffff;

        color: #000000;

        border-color: #ffffff;
    }
/* =========================
   SOBRE MÍ
========================= */

.contenido-sobre-mi {
    width: 100%;
    max-width: 750px;
    text-align: center;
}

.contenido-sobre-mi p {
    color: #999999;
    font-size: 15px;
    line-height: 2;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.contenido-sobre-mi p:last-child {
    margin-bottom: 0;
} 
/* =========================
   PRÓXIMO PROYECTO
========================= */

.proximo-proyecto {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    border-style: dashed;
}

.proximo-proyecto h3 {
    font-family: 'Cinzel', serif;
    font-size: 20px;
    letter-spacing: 3px;
    margin-bottom: 20px;
    color: #ffffff;
}

.proximo-proyecto p {
    max-width: 280px;
    color: #777777;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.proximo-proyecto span {
    padding: 8px 14px;
    border: 1px solid #333333;
    color: #666666;
    font-size: 9px;
    letter-spacing: 2px;
}  
.whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.whatsapp img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}