/* Hoja de estilos de mi landing page "Luna Marsella" (portfolio)

   V.1.0 (29/08/26) · Luna Marsella

   -> Logo / marca
        De momento la marca es solo el nombre "Luna Marsella" escrito con la
        tipografía Prata. Cuando tenga el logotipo del WordPress lo pondré
        aquí y en el header.

   -> Colores
        NEGRO    RGB 23, 19, 15      |   HEX #17130f    (fondo de la página)
        BLANCO   RGB 244, 239, 233   |   HEX #f4efe9    (texto principal)
        GRIS     RGB 164, 155, 144   |   HEX #a49b90    (texto secundario)
        ROJO     RGB 230, 52, 25     |   HEX #e63419    COLOR PRINCIPAL (acento / marca, sacado de la foto de portada)
        AZUL     RGB 72, 92, 186     |   HEX #485cba    COLOR SECUNDARIO (etiqueta y botón "Descargar CV")

   -> Tipografías
        Prata (serif) para los títulos i/o tipografías principales.
        Inter (sans-serif) para el texto normal i/o tipografías secundarias.
        Las dos se cargan desde Google Fonts.

*/


/* Tipografías externas de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');


/* ... Propiedades generales ... */

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #17130f;
    color: #f4efe9;

    /* Tipografía (Inter) */
    font-family: Inter, sans-serif;
    line-height: 1.6;

    /* anulo scroll horizontal, se vea en la pantalla que se vea */
    overflow-x: hidden;
}

/* Contenedor centrado y con un límite para pantallas muy grandes */
.contenedor {
    width: 90%;
    margin: 0 auto;
    max-width: 1600px;
}


/* ... Estilos Cabecera ... */

header {
    padding: 25px 0;

    /* Cabecera flexible: marca a la izquierda y menú a la derecha */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Si no caben, que bajen de línea */
    flex-wrap: wrap;
    gap: 15px;
}

.logo {
    font-family: Prata, serif;
    font-size: 26px;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Cada enlace del menú es una "pastilla" con borde */
.menu a {
    color: #f4efe9;
    text-decoration: none;
    border: 1px solid rgba(244, 239, 233, 0.2);
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 14px;
    text-transform: uppercase;
}

.menu a:hover {
    border-color: #e63419;
    color: #e63419;
}


/* ... Estilos portada (hero) ... */

.hero {
    /* Dos capas de fondo:
       1) un degradado oscuro (para que se lea el texto por la izquierda)
       2) la foto de portada (retrato de Luna) */
    background-image:
        linear-gradient(90deg, rgba(23, 19, 15, 0.94), rgba(23, 19, 15, 0.72) 42%, rgba(23, 19, 15, 0.2)),
        url(../img/retrato.webp);

    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;

    /* Efecto parallax: el fondo queda "fijo" y el contenido pasa por encima al hacer scroll (aprendí a hacerlo en la universidad) */
    background-attachment: fixed;

    /* Contenido centrado en vertical para que no quede hueco muerto
       debajo de los botones */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Altura del visualizador (no píxeles) para que la foto cubra
       la pantalla también en vertical / móvil */
    min-height: 62vh;
    padding: 45px 0;
}

/* El texto no ocupa todo el ancho, se queda en la mitad izquierda */
.texto {
    max-width: 900px;
}

/* Etiqueta superior (pastilla azul) */
.etiqueta {
    display: inline-block;
    border: 1px solid #485cba;
    color: #485cba;
    border-radius: 50px;
    padding: 8px 20px;
    margin-bottom: 26px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Encabezado principal. Usa la tipografía Prata (títulos) */
h1 {
    font-family: Prata, serif;
    font-weight: normal;
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 18px;
}

/* "Luna Marsella" va debajo de "Hola, soy" y muy grande, casi tocando
   a la chica de la foto */
.nombre {
    display: block;
    font-size: 130px;
    line-height: 1;
}

.subtitulo {
    font-size: 26px;
    margin-bottom: 22px;
}

.descripcion {
    color: #cdc6bd;
    max-width: 600px;
    margin-bottom: 10px;
    font-size: 19px;
    /* La cursiva la pone la etiqueta <em> del HTML */
}


/* ... Botones / Llamada a la acción ... */

/* Grupo de los dos botones */
.acciones {
    margin-top: 16px;
}

.boton {
    display: inline-block;
    text-decoration: none;

    background-color: #f4efe9;
    color: #17130f;
    border: 1px solid #f4efe9;
    border-radius: 50px;

    padding: 16px 34px;
    margin-top: 18px;
    margin-right: 10px;

    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.boton:hover {
    background-color: #e63419;
    border-color: #e63419;
    color: #f4efe9;
}

/* Segundo botón (Descargar CV): solo contorno, y azul al pasar el ratón */
.descargar {
    background-color: transparent;
    color: #f4efe9;
}

.descargar:hover {
    background-color: #485cba;
    border-color: #485cba;
    color: #f4efe9;
}


/* ... Estilos pie de página ... */

footer {
    padding: 30px 0;
    border-top: 1px solid rgba(244, 239, 233, 0.2);

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

footer p {
    font-size: 14px;
    color: #a49b90;
}

.rrss {
    display: flex;
    gap: 12px;
}

.rrss img {
    width: 30px;
}


/* ... Responsive (móviles y tablets) ... */

@media (max-width: 700px) {

    /* En móvil el 90% desperdicia demasiado espacio a los lados */
    .contenedor {
        width: 94%;
    }

    header {
        justify-content: center;
        text-align: center;
    }

    .hero {
        padding: 60px 0;

        /* Degradado más suave que en escritorio: se ve más la foto por
           detrás del texto */
        background-image:
            linear-gradient(90deg, rgba(23, 19, 15, 0.82), rgba(23, 19, 15, 0.48) 45%, rgba(23, 19, 15, 0.08)),
            url(../img/retrato.webp);

        /* Coloco la foto un poco a la derecha para que se le vean los
           ojos y el texto se quede en su hueco a la izquierda */
        background-position: 55% top;

        /* En móviles 'fixed' da problemas, lo dejamos normal */
        background-attachment: scroll;
    }

    /* El texto no ocupa todo el ancho: se queda a la izquierda y no
       se mete encima de la chica */
    .texto {
        max-width: 64%;
    }

    /* La etiqueta pasa a hashtags: cada palabra en su línea y sin la píldora */
    .etiqueta {
        border: none;
        padding: 0;
        letter-spacing: 0;
        line-height: 1.8;
        margin-bottom: 30px;
    }

    .etiqueta span {
        display: block;
    }

    /* "Hola, soy" pequeño para que destaque el nombre */
    h1 {
        font-size: 26px;
        margin-bottom: 22px;
    }

    .nombre {
        font-size: 55px;
        /* separo un poco el nombre del "Hola, soy" */
        margin-top: 14px;
    }

    .subtitulo {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 24px;
    }

    /* En blanco porque en móvil va sobre la foto y se lee peor.
       Y más pequeña que en escritorio. */
    .descripcion {
        color: #f4efe9;
        font-size: 13px;
        margin-bottom: 26px;
    }

    /* Los botones no ocupan todo el ancho: cada uno pegado a la
       izquierda y uno debajo del otro */
    .acciones {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .acciones .boton {
        margin: 0;
        /* Más pequeños que en escritorio para que el texto no se parta
           en la columna estrecha del móvil */
        font-size: 13px;
        padding: 13px 26px;
    }

    footer {
        justify-content: center;
        text-align: center;
    }
}