* {
    padding: unset;
    margin: unset;
    border: unset;
    outline: unset;
    text-decoration: unset;
    list-style: none;
    box-sizing: border-box;
}

:root {
    --margin-page: 0px 60px;
    --color-background: #010D00;
    --color-primary: #F21616;
    --color-secondary: #F2F2F2;
    -color-tertiary: #8C8C8C;
    --color-quaternary: #0D0D0D;
}

@font-face {
    font-family: text;
    src: url(/fonts/full\ Pack\ 2025.ttf);
}

@font-face {
    font-family: uno;
    src: url(/fonts/Allura-Regular.otf);
}

@font-face {
    font-family: dos;
    src: url(/fonts/Batuphat\ Script.otf);
}

@font-face {
    font-family: tres;
    src: url(/fonts/Reey-Regular.otf);
}

body {
    background-color: var(--color-background);
    margin: var(--margin-page);
}

/* COMIENZO DEL HEADER */
.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    align-items: center;
}

.header img {
    width: 180px;
    height: 180px;
    justify-content: start;
    /* cursor: pointer; */
}

header a {
    width: 180px;
    height: 180px;
}

nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex-grow: 1;
    order: 3;
}

.nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-primary);
    background-color: var(--color-secondary);
    padding: 8px 15px;
    border-radius: 30px;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.2s ease;

    width: 120px;
    height: 40px;
}

.nav-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    transform: translateY(-3px); /* Pequeño efecto de elevación al hacer hover */
}

.nav-btn:active {
    transform: translateY(0); /* Vuelve a la posición original al hacer clic */
}

/* Media Queries para la Responsividad */
@media (max-width: 768px) {
    .header {
        flex-direction: column; /* Apila el logo y la navegación */
        gap: 20px; /* Agrega espacio entre el logo y la navegación */
        text-align: center;
    }

    nav {
        flex-direction: row; /* Apila los enlaces de navegación */
        gap: 10px; /* Agrega espacio entre los enlaces */
        align-items: center;
        justify-content: center; 
    }
}
/*FIN de Media Queries para la Responsividad */
/* FIN DEL HEADER */

/* COMIENZO DEL JUMBOTRON-PRINCIPAL */
.jumbotron-principal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    position: relative;
    height: 50vh
}

#slider-text {
    font-family: text;
    font-size: 54px;
    color: var(--color-secondary);
    z-index: 1; /* Asegura que el texto esté por encima de la imagen */
    text-align: center;
    width: 600px;
    height: 150px;
    overflow: hidden;
}

.jumbotron-principal img {
    width: auto;
    height: auto;
    translate: 80px;
    opacity: 60%;
    mask-image: linear-gradient(
        black 80%,
        transparent
    );
}

/* Media Queries para la Responsividad */
@media (min-width: 1025px) {
    #slider-text {
        font-size: 54px;
    }
}

@media (max-width: 768px) and (max-width: 1024px) {

    .jumbotron-principal {
        flex-direction: column; /* Apila los elementos verticalmente */
        height: auto; /* La altura se ajusta al contenido */
        padding: 30px 10px;
        align-items: center;
    }
    
    #slider-text {

        position: static;
        transform: none;
        font-size: 36px;
        width: 400px;
        height: 100px;
    }
    
    .jumbotron-principal img {

        transform: none;
        max-width: 100%; /* Asegura que la imagen no se salga del contenedor */
        transform: translate(-30%);
    }
}

@media (max-width: 767px) {
    .jumbotron-principal {
        flex-direction: column;
        height: auto;
        padding: 30px 10px;
    }

    #slider-text {
        position: static;
        transform: none;
        font-size: 36px; /* Tamaño de fuente para móviles */
    }

    .jumbotron-principal img {
        transform: translate(-30%); 
        max-width: 100%;
    }
}
/* FIN de Media Queries para la Responsividad */
/* FIN DEL JUMBOTRON-PRINCIPAL */

/* COMIENZO DEL SOBRE-MI */
.sobre-mi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
    text-align: center;
    /* Estilo para el estado inicial (oculto) */
    opacity: 0;
    transform: translateY(20px); /* Un pequeño movimiento para el efecto de revelado */
    transition: opacity 1.0s ease-out, transform 1.5s ease-out; /* Transición suave */
}
/* Estilo para el estado final (visible) */
.sobre-mi.visible {
    opacity: 1;
    transform: translateY(0);
}

.sobre-mi h3 {
    font-family: text;
    font-size: 54px;
    color: var(--color-secondary);
}

.biografia {
    font-family: 'Times New Roman', times;
    font-size: 14px;
    color: var(--color-secondary);
    max-width: 800px;
    line-height: 1.5;
}

/* Media Queries para la Responsividad */
@media (max-width: 768px) {
    .sobre-mi h3 {
        font-size: 36px; /* Reduce el tamaño del título para dispositivos móviles */
        white-space: nowrap; /* Evita que el texto se rompa */
    }

    .biografia {
        font-size: 16px; /* Aumenta el tamaño del texto del párrafo para mejor legibilidad */
    }
}
/* FIN de Media Queries para la Responsividad */

/* COMIENZO DE PROJECTS */
.projects {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 60px;
}

.projects h2 {
    font-family: text;
    font-size: 54px;
    color: var(--color-secondary);
    text-align: center;
    margin-top: 30px;
}

.projects-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

.video-projects {
    width: 500px;
    height: 250px;
    border-radius: 30px;
}

.project-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-right: 200px;
}

.project-description h4 {
    font-family: sans-serif;
    font-size: 24px;
    color: var(--color-secondary);
}

.project-description p {
    font-family: sans-serif;
    font-size: 14px;
    color: var(--color-secondary);
    width: 365px;
    height: auto;
    text-align: center;
    line-height: 1.5;
}

.project-description .btn-project {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 8px 15px;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.project-description .btn-project:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    transform: translateY(-3px); /* Pequeño efecto de elevación al hacer hover */
}

.project-description .btn-project:active {
    transform: translateY(0); /* Vuelve a la posición original al hacer clic */
}

/* Media Queries para la Responsividad */
@media (max-width: 1200px) {
    .projects-container {
        gap: 30px;
    }
    .video-projects {
        width: 400px;
        height: 200px;
    }
    .project-description {
        margin-right: 50px;
    }
    .project-description p {
        width: 300px;
    }
}

@media (max-width: 900px) {
    .projects h2 {
        font-size: 40px;
    }
    .projects-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
    }
    .video-projects {
        width: 90vw;
        max-width: 350px;
        height: 180px;
    }
    .project-description {
        margin-right: 0;
        width: 100%;
        max-width: 350px;
    }
    .project-description p {
        width: 100%;
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .projects h2 {
        font-size: 28px;
        margin-top: 15px;
    }
    .projects-container {
        gap: 15px;
    }
    .video-projects {
        width: 100vw;
        max-width: 95vw;
        height: 120px;
        border-radius: 16px;
    }
    .project-description {
        max-width: 95vw;
        padding: 0 5vw;
    }
    .project-description h4 {
        font-size: 18px;
    }
    .project-description p {
        font-size: 14px;
    }
    .project-description .btn-project {
        font-size: 16px;
        padding: 6px 12px;
    }
}
/* FIN de Media Queries para la Responsividad */

/* FIN DE PROJECTS */

/* COMIENZO DE CONTACTAME */
.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    gap: 20px;
    margin-bottom: 100px;
}

.contact h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: text;
    font-size: 54px;
    color: var(--color-secondary);
}

.icon-contacto {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.icon-contacto img {
    width: 40px;
    height: 40px;
}

.formulario-contacto form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.formulario-contacto input {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-background);
    padding: 10px;
    border-radius: 4px;
    width: 300px;
}

.formulario-contacto input::placeholder {
    color: var(--color-primary);
}

.formulario-contacto textarea::placeholder {
    color: var(--color-primary);
}

.formulario-contacto textarea {
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    border-radius: 4px;
    width: 300px;
    height: 100px;
    resize: vertical; /* Permite al usuario cambiar la altura del textarea */
}

.formulario-contacto button {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-color: var(--color-secondary);
    color: var(--color-primary);
    padding: 10px;
    border-radius: 30px;
    width: 100px;
    align-self: center; /* Centra el botón horizontalmente */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.formulario-contacto button:hover {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    transform: translateY(-3px); /* Pequeño efecto de elevación al hacer hover */
}

.formulario-contacto button:active {
    transform: translateY(0); /* Vuelve a la posición original al hacer clic */
}

/* --- Media Queries para la Responsividad --- */
@media (max-width: 900px) {
    .contact {
        margin-bottom: 40px;
        padding: 0 5vw;
    }
    .contact h2 {
        font-size: 32px;
    }
    .icon-contacto {
        gap: 20px;
    }
    .icon-contacto img {
        width: 32px;
        height: 32px;
    }
    .formulario-contacto form {
        gap: 20px;
        width: 100%;
        max-width: 400px;
    }
    .formulario-contacto input,
    .formulario-contacto textarea {
        font-size: 15px;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .contact {
        margin-bottom: 30px;
        padding: 0 2vw;
    }
    .contact h2 {
        font-size: 22px;
    }
    .icon-contacto {
        gap: 12px;
    }
    .icon-contacto img {
        width: 24px;
        height: 24px;
    }
    .formulario-contacto form {
        gap: 12px;
        max-width: 98vw;
    }
    .formulario-contacto input,
    .formulario-contacto textarea {
        font-size: 13px;
        padding: 8px;
    }
    .formulario-contacto button {
        font-size: 14px;
        padding: 8px 16px;
    }
}
/* --- FIN de Media Queries para la Responsividad --- */

/* FIN DE CONTACTAME */