@charset "UTF-8";

/*Reseteo de Márgenes*/

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

/*-------------------------------------------- Tipografías --------------------------------------------*/

@font-face {
    font-family: 'Space Grotesk Regular';
    src: url('/styles/Fonts/Space_grotesk/static/SpaceGrotesk-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Manrope';
    src: url('fonts/Manrope-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('/styles/Fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf') format('truetype');
}
/*-------------------------------------------- Scroll Suave --------------------------------------------*/

html{
    scroll-behavior: smooth;
    font-size: 16px;
}

/*-------------------------------------------- Root --------------------------------------------*/

:root{
    /*colores prinicipales*/
        --color-primario: #d08b7b;
        --color-secundario: #2D2E2E;
        --color-blanco: #F8FAFC;

    /*Tipografías*/

        --fuente-títulos: 'Space Grotesk Regular', sans-serif;
        --fuente-texto: 'Manrope', sans-serif;
        --altura-linea-base: 1.5;


    /*Tamaños*/

        --tamaño-h1: 3rem;
        --tamaño-h2: 1.5rem;
        --tamaño-h3: 1.5rem;
        --tamaño-nav: 1.3rem;
        --tamaño-texto: 1.25rem;
}

/*-------------------------------------------- Body --------------------------------------------*/

body {
    background: linear-gradient(to bottom, var(--color-secundario), #1a1a1a);
    background-attachment: fixed;
    color: var(--color-blanco);
    font-family: var(--fuente-texto);
    line-height: var(--altura-linea-base);
}

/*-----------------------------------Decoración básica Hs-------------------------------------------------------------------*/
h1, h2, h3{
    font-family: var(--fuente-títulos);
    color: var(--color-primario);
}

/*-------------------------------------------- Header --------------------------------------------*/

#contenedor_header {
    position: relative;
    width: 100%;
    height: 400vh;
    margin-top: -6rem;
}

#header {
    position: sticky;
    top: 0;
    width: 100%;
    
}
.header-img {
    width: 100%;
    height: auto;
    display: block;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

#header h1 {
    margin-left: 6rem;
    font-size: var(--tamaño-h1);
    z-index: 10;
}

.highlight {
    color: #1E445D;
}


@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.reveal-scroll {
    display: inline-block;
    opacity: 0;
    margin-top: 5rem;
    animation: appear linear both;
    animation-timeline: scroll(root); 
    animation-range: 2% 30%; 
}

.reveal-scroll-sub {
    display: block;
    font-size: 1.1rem;
    font-family: var(--fuente-texto);
    color: var(--color-blanco);
    font-weight: 300;
    margin-top: 1.5rem;
    opacity: 0;
    animation: appear linear both;
    animation-timeline: scroll(root);
    animation-range: 30% 70%;
}

/*-------------------------------------------- Nav --------------------------------------------*/

nav {
    position: sticky;
    top: 0;
    z-index: 2000;
    padding: 1.5rem;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(0, 0, 0, 0.3);
}



nav ul {
    text-align: center;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 5vw, 3rem); 
    padding: 0.5rem;
}

nav ul li a{
    color: var(--color-blanco);
    text-decoration: none;
    font-size: var(--tamaño-nav);
    padding: 0.8rem;
    border-radius: 25%;
    transition: background-color 0.7s ease;
}

nav ul li a:hover{
    background-color: var(--color-primario);
}



/*-------------------------------------------- Main --------------------------------------------*/
main {
    margin-left: 6rem;
    font-size: var(--tamaño-h2);
    z-index: 10;
}

#grid_productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8rem;
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.producto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 5rem;
    text-decoration: none;
}

.producto img {
    width: 20rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2rem; 
}

.prod-link {
    text-decoration: none;
    color: inherit;      
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform 2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease;
}

.prod-link:hover {
    transform: translateY(-15px) scale(1.03);
    filter: brightness(1.1);                 
}

.prod-link img {
    width: 100%;
    max-width: 20rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: box-shadow 0.4s ease;
}

.prod-link:hover img {
    box-shadow: 0 20px 45px rgba(208, 139, 123, 0.4);
}