/*Fuentes*/
@font-face {
    font-family: 'aviator';
    src: url('../assets/fonts/Ailerons-Typeface.otf') format('truetype');
}

@font-face {
    font-family: 'grotesk';
    src: url('../assets/fonts/Albra-Trial-Grotesk-Light.otf') format('truetype');
}

@font-face {
    font-family: 'grotesk-ita';
    src: url('../assets/fonts/Albra-Trial-Grotesk-Light-Italic.otf') format('truetype');
}


/*Varibles del css*/
:root {
    --primary: rgb(228, 228, 213);
    --secondary: rgb(201, 201, 188);
    --black-text: rgb(69, 69, 65);
    --white-text: rgb(254, 251, 238);
    --hover-to-black: rgb(69, 69, 65);
    --hover-to-white: rgb(97, 126, 119);
}

/*Estilos generales*/
* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body {
    font-family: grotesk;
}

/*Estilos del header, hero y otros*/

/* Fondo a pantalla completa con imagen y sección en blanco */
.hero-wrapper,
.hero-wrapper-sky {
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    padding-top: 10vh;
    background-size: cover;
}

.hero-wrapper {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, white 100%), url('../img/ola.webp');
}


/* El Header se queda fijo arriba y es transparente inicialmente. Cambia al hacer scroll. */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 11vh;
    z-index: 1000;
    background-color: transparent;
    transition: all 0.5s ease;
}

/*Header al hacer scroll. Se utiliza JS para detectar el scroll*/
#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.445);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.069);
}

.header-container {
    height: 100%;
    width: 100%;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}


/* Logo con opacidad que aumenta al hacer hover. Es una manera decorativa de ir a la pagina index */
.logo {
    max-height: 60px;
    width: auto;
    opacity: 0.7;
    transition: all 0.2s;
}

.logo:hover {
    opacity: 1;
}

/*Estilos del menú*/
.menu-ppl ul {
    display: flex;
    gap: 9rem;
}

.tagline {
    background-color: rgba(252, 253, 245, 0.541);
    border-radius: 20px;
    padding: 1rem 1rem;
    max-width: 600px;
    margin: 8rem auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.122);
    font-size: 1.2rem;
    color: black;
}

.menu-ppl ul li a {
    color: var(--black-text);
    font-size: 1.7rem;
    padding: 0.8rem 1rem;
    font-family: 'aviator';
    text-transform: uppercase;
    transition: all 0.2s;
}

.menu-ppl ul li {
    color: var(--black-text);
    font-size: 1.7rem;
    padding: 0.8rem 1rem;
    font-family: 'aviator';
    text-transform: uppercase;
    transition: all 0.2s;
}

.menu-ppl ul li a .langsel {
    color: blue;
}


.menu-ppl ul li a:hover {
    color: var(--hover-to-white);
}

/*Boton de contacto*/
.btn-cnt {
    background-color: white;
    color: var(--black-text);
    padding: 0.5rem 1.2rem;
    border: none;
    border-radius: 999px;
    font-size: 1rem;
    font-family: 'grotesk';
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.btn-cnt:hover {
    background-color: var(--hover-to-black);
    color: var(--white-text);
    transition: all 0.3s ease;
}

/*Estilos del contido del hero*/
.hero {
    height: 110vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-content {
    max-width: 900px;
}

.hero-content h1 {
    font-family: 'aviator';
    font-size: 5rem;
    color: var(--white-text);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.398);
}

.hero-content p {
    font-family: 'grotesk';
    font-size: 1.2rem;
    margin: auto;
    margin-top: 2rem;
    max-width: 700px;
    color: var(--black-text);
}

/*Parte con fondo blanco de las páginas*/
.white-section {
    color: var(--black-text);
    padding: 4rem 2rem;
    text-align: center;
}

.background-sky{
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 50%, white 100%), url('../img/background_sky.webp');
}

.intro-section {
    padding: 4rem 2rem;
    text-align: center;
    color: var(--black-text);
}

.intro-section h2 {
    font-family: 'aviator';
    font-size: 2.8rem;
    margin-bottom: 4rem;
}

.intro-section p {
    font-family: 'grotesk';
    font-size: 1.2rem;
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


.preview-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin: 1rem auto;
    margin-bottom: 1rem;
}

.preview-card {
    width: 240px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: var(--black-text);
    background-color: rgba(255, 255, 255, 0.615);
    backdrop-filter: blur(4px);
}

.preview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.preview-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.preview-card h3 {
    font-family: 'grotesk';
    font-size: 1rem;
    padding: 1rem;
}


/* Elemento decorativo para indicar al usuario que puede hacer scroll */
#scroll-icon {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--black-text);
    font-family: 'grotesk';
}

.mouse {
    width: 1.9rem;
    height: 3.2rem;
    border: 0.2rem solid black;
    opacity: 0.7;
    border-radius: 25px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
}

.dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--black-text);
    border-radius: 50%;
    animation: scrollDot 1.5s infinite;
}

/* Animación para hacer que el punto de dentro del mouse baje y desaparezca*/
@keyframes scrollDot {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    80% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

#scroll-icon p {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 0.3rem;
    text-transform: lowercase;
}

/*Estilos página Sobre Mi*/

.sobremi-wrapper {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
    margin: 0 auto;
    margin-bottom: 10rem;
}

.sobremi-box {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    background-color: rgba(128, 125, 109, 0.145);
    border-radius: 15px;
    padding: 2rem;
    max-width: 1000px;
    width: 95%;
    color: var(--black-text);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.122);
}

.sobremi-texto {
    flex: 1.5;
}

.sobremi-texto h2 {
    font-family: aviator;
    font-size: 2.5rem;
    color: var(--black-text);
    margin-bottom: 1rem;
}

.sobremi-texto p {
    font-family: 'grotesk';
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 1rem;
    text-align: justify;
}

.sobremi-photo {
    min-width: 250px;
    display: flex;
    align-items: center;
    opacity: 0.9;
}

.sobremi-photo img {
    max-width: 300px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.065);
}


/*Estilo del contenedor del lightbox que aparece al hacer clic mi imagen. En este caso, se utiliza 
para mostrar una imagen en grande sobre un fondo, centrada en la pantalla.*/

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    /*Para que la imagen este por encima de todo el contenido de la página*/
}

/* Estilos de la imagen que está dentro del lightbox */
#lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    animation: zoomIn 3s ease;
}

/*Estilos de proyectos*/
.proyectos {
    padding: 4rem 2rem;
    text-align: center;
}

.proyectos h2 {
    font-family: 'aviator';
    font-size: 3rem;
    color: var(--black-text);
    margin-bottom: 3rem;
}

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

.proyecto-card {
    width: 20rem;
    background-color: rgba(255, 255, 255, 0.308);
    backdrop-filter: blur(4px);
    border-radius: 15px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-bottom: 2rem;
}



.proyecto-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
    object-fit: cover;
    height: 200px;
}

.proyecto-card h3 {
    font-family: 'grotesk';
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--black-text);
}

.proyecto-card p {
    font-size: 0.95rem;
    color: var(--black-text);
}


/*Estilos del CV*/

.cv-wrapper {
    background-color: rgba(128, 125, 109, 0.145);
    border-radius: 20px;
    padding: 3rem 2rem;
    max-width: 1000px;
    margin: 3rem auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.122);
}

.cv-wrapper-contacto {
    padding: 3rem 2rem;
    max-width: 1000px;
    margin: 1rem auto;
}

.cv-header {
    text-align: center;
}

.cv-header img {
    height: 10rem;
    opacity: 0.7;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.cv-header h1 {
    font-size: 4rem;
    font-family: 'aviator';
    color: var(--black-text);
    margin-bottom: 4rem;
}

.cv-header p {
    font-size: 1.7rem;
    font-family: 'grotesk-ita';
    color: var(--black-text);
    margin-bottom: 4.5rem;
}

.cv-perfil {
    
    background-color: rgba(128, 125, 109, 0.1);
    border-radius: 10px;
    padding: 2rem;
    margin: auto;
    max-width: 800px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

.cv-perfil h2 {
    font-family: 'aviator';
    font-size: 2rem;
    color: var(--black-text);
    margin-bottom: 1rem;
    display: inline-block;
    padding-bottom: 0.6rem;
}

.cv-wrapper h2 {
    font-family: 'aviator';
    font-size: 2rem;
    color: var(--black-text);
    margin-bottom: 1rem;
    display: inline-block;
    padding-bottom: 0.6rem;
}

.cv-wrapper-contacto h2 {
    font-family: 'aviator';
    font-size: 2rem;
    color: var(--black-text);
    margin-bottom: 1rem;
    display: inline-block;
    padding-bottom: 0.6rem;
}

.cv-perfil p {
    font-family: 'grotesk';
    font-size: 1.1rem;
    color: var(--black-text);
    text-align: justify;
    line-height: 1.7;
}

.cv-block h2 {
    font-size: 2rem;
    font-family: 'aviator';
    color: var(--black-text);
    border-bottom: 0.1rem solid #ccc;
    padding-bottom: 1rem;
}

.cv-item {
    margin: 2rem;
    margin-left: 0;
}

.cv-item h3 {
    margin-bottom: 0.2rem;
}

.cv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1000px;
    margin: auto;
    padding: 2rem;
}

.cv-block {
    text-align: left;
    padding: 0;
}

/* Contenedor de cada idioma individual */
.lang-item {
    margin-bottom: 1rem;
}

/* Estilo para el nombre del idioma */
.lang-item span {
    display: inline-block;
    margin-bottom: 0.3rem;
    font-weight: bold;
}

/* Contenedor de la barra de nivel de idioma */
.lang-bar {
    width: 100%;
    height: 0.7rem;
    border-radius: 5px;
    background-color: #d2cfcf;
    position: relative;
    overflow: hidden;
}

/* Parte interior de la barra que indica el nivel */
.lang-bar::after {
    content: "";
    /*Necesario para cuando el contenido está vacio de caracteres*/
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--hover-to-black);
}

/* Clases para cada niveles, que en este caso, se corresponde a un width dentro del lang-bar*/
.lang-bar.nativo::after {
    width: 100%;
}

.lang-bar.c1::after {
    width: 85%;
}

.lang-bar.b1::after {
    width: 50%;
}

.lang-bar.a2::after {
    width: 20%;
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 1rem 0;
}

.skills li {
    background-color: rgba(69, 69, 65, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.95rem;
    color: var(--black-text);
}

/* ====== ESTILOS LOCALES SOLO PARA ESTA SECCIÓN ====== */
#proyectos .proyectos-grid {
    gap: 2rem;
    align-items: stretch;
}

/* Tarjeta: columna, nada se pisa */
#proyectos .proyecto-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    width: 25rem;
    /* tu tamaño base */
    min-height: 100%;
}

#proyectos .proyecto-card img {
    width: 100%;
    height: auto;
    display: block;
}

#proyectos .proyecto-card h3 {
    margin: .6rem 0 .2rem;
}

/* Badges de estado */
#proyectos .status-badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    border: 1px solid transparent;
    vertical-align: middle;
}

#proyectos .status--done {
    background: #e7f7ec;
    color: #226b3d;
    border-color: #bfe8cb;
}

#proyectos .status--live {
    background: #eef7ff;
    color: #0b57d0;
    border-color: #cfe2ff;
}

#proyectos .status--wip {
    background: #fff7e6;
    color: #8a4b00;
    border-color: #ffe0ad;
}

#proyectos .meta {
    opacity: .95;
    font-size: .9rem;
    margin: .35rem 0 .6rem;
}

/* Chips (reutiliza tu .skills) */
#proyectos .skills {
    margin-top: .6rem;
}

/* Acciones: grid robusto (no se solapan nunca) */


/* Botones propios (no .btn-cnt) */
#proyectos .pbtn {
    display: flex;
    /* en vez de inline-block */
    align-items: center;
    /* centra vertical */
    justify-content: center;
    width: 100%;
    text-align: center;
    font-size: .95rem;
    font-family: grotesk, system-ui, sans-serif;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #fff;
    color: #454541;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    line-height: 1.1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
    text-decoration: none;
    padding: 0.5rem;
}

#proyectos .pbtn:hover {
    background: #f7f7f7;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#proyectos .pbtn:active {
    transform: translateY(1px);
}

#proyectos .card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: auto;
    /* empuja acciones al final */
    align-items: stretch;
}

/* Variante gris (solo texto informativo) */
#proyectos .pbtn-ghost {
    background: #f3f3f3;
    color: #454541;
    border-color: #e1e1e1;
    cursor: default;
    box-shadow: none;
    height: 3rem;
}

#proyectos .pbtn-ghost:hover {
    background: #f3f3f3;
    box-shadow: none;
}

/* Responsive */
@media (max-width: 900px) {
    #proyectos .proyecto-card {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #proyectos .card-actions {
        grid-template-columns: 1fr;
    }
}

/*Estilos del formulario de contacto*/
.form-wrapper {
    background-color: rgba(128, 125, 109, 0.145);
    max-width: 600px;
    margin: 5rem auto;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.122);
    color: var(--black-text);
}

.form-wrapper fieldset {
    padding: 1rem;
}

.form-wrapper fieldset legend {
    font-weight: bold;
}

.form-title {
    font-family: 'aviator';
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--black-text);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

form label {
    display: block;
    margin: 1rem 0 0.3rem;
    font-family: 'grotesk';
}

form input,
form textarea {
    width: 100%;
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: 'grotesk';
    font-size: 1rem;
    resize: vertical;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: border 0.2s;
}

form input:focus,
form textarea:focus {
    border-color: var(--hover-to-black);
    outline: none;
}

form button {
    margin-top: 2rem;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 999px;
    font-family: 'grotesk';
    background-color: white;
    color: var(--black-text);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

form button:hover {
    background-color: var(--hover-to-black);
    color: var(--white-text);
}

form button:active {
    transform: scale(1.06);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
}


/*Estilos Footer*/
.footer {
    background-color: rgba(255, 255, 255, 0.199);
    padding: 2rem 1rem;
    text-align: center;
    font-family: 'grotesk';
    color: var(--black-text);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-content {
    max-width: 1000px;
    margin: auto;
}

.footer p {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    padding: 0;
    list-style: none;
}

.footer-links a {
    color: var(--black-text);
    font-size: 0.95rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--hover-to-white);
}

/*Hamburguesa*/
/* Ocultar checkbox */
.menu-toggle {
    display: none;
}

/* Estilo del icono hamburguesa */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--black-text);
    opacity: 95%;
    transition: all 0.3s ease;
}


/* Media query para ser responsive en móvil */
@media (max-width: 1080px) {

    #main-header {
        height: 14vh;
    }

    .cv-grid {
        grid-template-columns: 1fr;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero {
        height: 70vh;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .proyectos {
        padding: 0;
    }

    .intro-section h2 {
        font-size: 2rem;
    }

    .proyectos h2 {
        font-size: 2.5rem;
    }

    .cv-header h1 {
        font-size: 2rem;
    }

    .cv-header p {
        font-size: 1.2rem;
    }

    .sobremi-texto p {
        font-size: 1rem;
    }

    .sobremi-photo img {
        width: 82%;
    }

    .cv-wrapper {
        padding: 1rem;
        padding-bottom: 0.8rem;
        margin-bottom: 0;
    }

    .cv-perfil {
        margin: 1rem;
    }

    .form-wrapper {
        padding: 2rem;
    }

    /* Estilos del menú desplegable que aparece cuando se pulsa la hamburguesa */
    .menu-ppl {
        position: absolute;
        top: 16vh;
        left: 50%;
        transform: translateX(-50%);   /* centra horizontalmente */
        width: 95%;
        background-color: rgba(255, 255, 255, 0.88);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.069);
        flex-direction: column;
        align-items: left;
        display: none;
        padding: 1rem 0;
        border-radius: 20px;
    }

    .tagline {
        margin: 4rem auto;
        max-width: 80vw;
        font-size: 1rem;
    }

    /* Adaptación del <ul> del menú para convertir la lista en vertical */
    .menu-ppl ul {
        flex-direction: column;
        gap: 1.2rem;
    }

    .menu-ppl ul li a{
        font-size: 1.5rem;
    }

    .hamburger {
        display: flex;
    }

    /* Mostrar el menú si el checkbox está marcado */
    .menu-toggle:checked+.hamburger+.menu-ppl {
        display: flex;
    }
}

@media (orientation: landscape) and (max-height: 480px) {
  .hero { height:130vh;}
  #main-header { height: 20vh; }  /* evita headers fijos gigantes */
.menu-ppl ul {
        gap: 1.3rem;
}
    .menu-ppl {
        top: 22vh;
        width: 50%;
    }

}