/* HEADER */

/* Ocultar header en la pantalla de bienvenida */
.hidden-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* Estilos para .navbar */
.navbar {
    /* Aplica padding horizontal de 12rem (unidad de medida, predeterminado 16px) a ambos lados, dejando espacio interno amplio */
    padding: 0 12rem;
    /* Usa una variable CSS para definir el color de fondo del navbar */
    background-color: var(--bg-color);
    /* Permite posicionar elementos hijos de forma absoluta dentro del navbar */
    position: relative;
}

/* Estilos para logo dentro de .logo img */
.logo img {
    /* Define el ancho fijo del logo */
    width: 120px;
    /* Mantiene la proporción original de la imagen */
    height: auto;
    /* Agrega espacio arriba del logo para separarlo del borde superior */
    margin-top: 1rem;
}

/* Logo animado integrado */
.logo .logo-animated-container {
    width: 80px;
    height: 80px;
    margin-top: 1rem;
    display: block;
    perspective: 180px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
}

.logo .logo-animated-img {
    width: 65px;
    height: 65px;
    object-fit: contain;
    display: block;
    position: relative;
    top: 4px;
    transition: transform 0.18s ease-out;
    transform-style: preserve-3d;
    transform-origin: center center;
    will-change: transform;
}

.logo .logo-animated-container.is-tilting .logo-animated-img {
    transform: translateZ(45px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

/* Estilos para los ítems del menú dentro de .header__info ul li */ 
.header__info ul li {
    /* Aplica padding: arriba, derecha, abajo, izquierda */
    padding: 2.5rem 1.2rem 1rem 1.2rem;
    /* Cambia el cursor a una mano al pasar por encima, indicando que es clickeable */
    cursor: pointer;
}

/* Estilos para el botón "Escríbeme" dentro de .hireMe__button a */
.hireMe__button a {
    background-color: var(--secondary-bg-color); /* Usa una variable CSS para el color de fondo del botón */
    color: var(--font-color); /* Define el color del texto usando una variable */
    font-family: var(--font); /* Aplica la fuente definida en la variable global */
    font-size: small; /* Establece el tamaño de fuente en pequeño */
    padding: 1rem 1.5rem; /* Aplica padding: arriba/abajo 1rem, izquierda/derecha 1.5rem */
    border-color: unset; /* Elimina cualquier color de borde heredado */
    border-width: 0; /* Elimina el grosor del borde, dejando el botón sin borde visible */
}


/* Estilo a las secciones (cambian de color al pasar cursor por encima) */ 
.header__info ul li:hover {
    background-color: var(--secondary-bg-color);
    /* Animacion de las letras de secciones hacia arriba */
    /* Demora de la transicion de la animacion */
    transition: all 0.3s ease;
    /* Redondea los bordes de las secciones al pasar el cursor */
    border-radius: 0.5rem;
}

/* Aplicar el padding del hover SOLO en pantallas grandes
   para que en pantallas chicas se mantengan las animaciones
   del menú hamburguesa */
@media screen and (min-width: 1201px) {
    .header__info ul li:hover {
        padding: 1rem 1.5rem;
    }
}

/* Animaciones y mejoras específicas para
   el menú hamburguesa en vista móvil */

/* Efecto base para los items del menú en móvil: transiciones suaves */
@media screen and (max-width: 1200px) {
    .header__info ul li {
        transition: transform 220ms cubic-bezier(.2,.9,.2,1),
                    color 220ms ease, 
                    background-color 220ms ease;
        position: relative; /* para poder colocar pseudo-elementos */
        overflow: hidden;
    }



    /* Hover: levanta ligeramente, cambia color y expande subrayado */
    .header__info ul li:hover {
        transform: translateY(-6px) scale(1.02);
        color: #000; /* acorde con fondo secundario claro */
        background-color: var(--secondary-bg-color);
    }

    .header__info ul li:hover::after {
        width: 80%;
        background: rgba(0,0,0,0.12);
    }

    /* Mejora visual para elementos activos (cuando el filtro está activo) */
    .gallery__categories .filter-item.active {
        color: #fff;
        font-weight: 600;
        transform: translateY(-4px);
    }
}

/* Responsive design navbar */
/* Aparece menu hamburguesa con toda la informacion cuando es menor a 1200px */
/* Estilos para pantallas de hasta 1200px de ancho */
@media screen and (max-width: 1200px) {
    /* Espaciado horizontal del navbar */
    .navbar {
        padding: 0 2rem;
    }

    /* Checkbox invisible que controla el menú hamburguesa */
    .navbar .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 2rem;
        right: 2rem;
        z-index: 2;
        opacity: 0; /* Oculto visualmente pero funcional */
        cursor: pointer;
    }

    /* Contenedor de las líneas del ícono hamburguesa */
    .navbar .hamburger__lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Estilo base para cada línea del ícono hamburguesa */
    .navbar .hamburger__lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #ffffff;
    }

    /* Transiciones para animar el ícono al abrir/cerrar */
    .navbar .hamburger__lines .line1 {
        transform-origin: 0% 0%;
        transition: transform 0.4s ease-in-out;
    }
    .navbar .hamburger__lines .line2 {
        transition: transform 0.2s ease-in-out;
    }
    .navbar .hamburger__lines .line3 {
        transform-origin: 0% 100%;
        transition: transform 0.4s ease-in-out;
    }

    /* Estilos para los ítems del menú desplegable */
    .header__info ul li {
        padding: 0;
        margin: 2rem 0;
        cursor: pointer;
        font-size: x-large;
    }

    /* Desactiva el fondo al hacer hover en los ítems */
    .header__info ul li:hover {
        background-color: unset;
    }

    /* Contenedor del menú desplegable oculto por defecto */
    .header__info {
        padding-top: 120px;
        height: 100vh;
        background: var(--secondary-bg-color);
        width: 100%;
        position: absolute;
        top: 0;
        right: 0;
        overflow: auto;
        transform: translate(150%); /* Oculto fuera de pantalla */
        display: flex;
        flex-direction: column;
        transition: transform 0.5s ease-in-out;
    }

    /* Ocultar el botón 'Escríbeme' dentro del header en pantallas pequeñas
    para que no aparezca en el menú hamburguesa; en pantallas grandes (>1200px)
       el botón seguirá visible. */
    .navbar .hireMe__button {
        display: none;
    }

    /* Cuando el checkbox está activado, muestra el menú */
    .navbar input[type="checkbox"]:checked ~ .header__info {
        transform: translateX(0);
    }

    /* Animación del ícono hamburguesa al abrir el menú */
    .navbar input[type="checkbox"]:checked ~ .hamburger__lines .line1 {
        transform: rotate(45deg);
    }
    .navbar input[type="checkbox"]:checked ~ .hamburger__lines .line2 {
        transform: scaleY(0);
    }
    .navbar input[type="checkbox"]:checked ~ .hamburger__lines .line3 {
        transform: rotate(-45deg);
    }
}

/* Ajustes específicos para pantallas entre 992px y 1200px */
@media screen and (min-width: 992px) and (max-width: 1200px) {
    /* Aumenta el padding lateral del navbar */
    .navbar {
        padding: 0 12rem;
    }

    /* Reposiciona el ícono hamburguesa y el checkbox */
    .navbar .checkbox,
    .navbar .hamburger__lines {
        right: 12rem;
    }
}


/* Mobile nav polish */
@media screen and (max-width: 576px) {
    .navbar {
        padding: 0 1rem;
        min-height: 5rem;
    }

    .logo .logo-animated-container {
        width: 64px;
        height: 64px;
        margin-top: 0.75rem;
    }

    .logo .logo-animated-img {
        width: 54px;
        height: 54px;
    }

    .navbar .checkbox,
    .navbar .hamburger__lines {
        top: 1.65rem;
        right: 1rem;
    }

    .header__info {
        padding-top: 6rem;
        align-items: center;
    }

    .header__info ul {
        align-items: center;
        width: 100%;
    }

    .header__info ul li {
        width: min(100%, 16rem);
        margin: 1rem 0;
        padding: 0.85rem 1rem;
        border-radius: 0.5rem;
        font-size: 1.35rem;
        text-align: center;
    }
}
/* Compact responsive menu */
@media screen and (max-width: 1200px) {
    .header__info {
        top: 4.35rem;
        right: clamp(1rem, 8vw, 12rem);
        width: min(72vw, 14.5rem);
        height: auto;
        max-height: calc(100vh - 6rem);
        padding: 0.42rem;
        border: 1px solid rgba(255, 73, 0, 0.26);
        border-radius: 0.8rem;
        background: rgba(5, 5, 6, 0.86);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
        overflow: hidden;
        align-items: stretch;
        transform: translateY(-0.65rem) scale(0.96);
        transform-origin: top right;
        opacity: 0;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(.2,.9,.2,1), opacity 0.24s ease;
    }

    .header__info::before {
        content: "";
        display: block;
        height: 2px;
        margin: 0.06rem 0.18rem 0.28rem;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--secondary-bg-color), rgba(255, 73, 0, 0.15));
    }

    .header__info ul {
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .header__info ul li {
        width: 100%;
        margin: 0;
        padding: 0.68rem 0.74rem 0.68rem 0.9rem;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        outline: 0;
        box-shadow: none;
        border-radius: 0;
        color: rgba(255, 255, 255, 0.74);
        background: transparent;
        font-family: var(--font);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.085em;
        line-height: 1;
        text-align: left;
        text-transform: uppercase;
    }

    .header__info ul li:last-child {
        border-bottom: 0;
    }

    .header__info ul li::before {
        content: "";
        position: absolute;
        left: 0.35rem;
        top: 50%;
        width: 3px;
        height: 0;
        border-radius: 999px;
        background: var(--secondary-bg-color);
        transform: translateY(-50%);
        transition: height 220ms ease;
    }

    .header__info ul li:hover {
        transform: translateX(2px);
        color: #fff;
        background-color: rgba(255, 73, 0, 0.11);
    }

    .header__info ul li:hover::before {
        height: 58%;
    }

    .header__info ul li:focus,
    .header__info ul li:focus-visible {
        outline: 0;
        box-shadow: none;
    }

    .navbar input[type="checkbox"]:checked ~ .header__info {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
    }
}

@media screen and (max-width: 576px) {
    .header__info {
        top: 4.25rem;
        right: 1rem;
        width: min(74vw, 13.5rem);
        padding: 0.38rem;
    }

    .header__info ul li {
        padding: 0.64rem 0.68rem 0.64rem 0.88rem;
        font-size: 0.64rem;
    }
}