@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&family=Raleway:wght@300;400;500;600;700&display=swap');

:root {
    /*palette*/
    --primary-solid: #ff3333;
    --primary-900: rgba(255, 51, 51, 0.9);
    --primary-500: rgba(255, 51, 51, 0.5);
    --primary-300: rgba(255, 51, 51, 0.3);

    --secondary-solid:#1D84B5;
    --secondary-900:rgba(29, 132, 181, 0.9);
    --secondary-500:rgba(29, 132, 181, 0.5);
    --secondary-300:rgba(29, 132, 181, 0.3);

    --dark-solid:#1f1f1f;
    --dark-900:rgba(31, 31, 31, 0.9);
    --dark-500:rgba(31, 31, 31, 0.5);
    --dark-300:rgba(31, 31, 31, 0.3);

    --dark-bg-solid:#30343f;
    --light-bg-solid:#fafaff;

    --light-font-solid:#fff;

    /* typography */

    --base-font:'Inter', sans-serif;
    --alternative-font:'Raleway', sans-serif;

    /* font sizes */
    --font-display: 4.6em;
    --font-jumbo: 3.8em;
    --font-xlarge: 3em;
    --font-large: 2.4em;
    --font-medium: 1.8em;
    --font-small: 1.6em;
    --font-xsmall: 1.4em;

    /* spacings */

    --spacing-128: 12.8rem;
    --spacing-68: 6.8rem;
    --spacing-36: 3.6rem;
    --spacing-28: 2.8rem;
    --spacing-24: 2.4rem;
    --spacing-20: 2rem;
    --spacing-16: 1.6rem;
    --spacing-12: 1.2rem;
    --spacing-8: 0.8rem;





}


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

html {
    font-family: var(--base-font);
    font-size: 62.5%;
    color:var(--dark-solid);
    
}


/* estilos generales */

a {
    text-decoration: none;
    font-family: inherit;
    color: inherit;
    
}

header, footer {
    font-family: var(--alternative-font);
    color: var(--light-font-solid);
}

ul , ol {
    list-style-type: none;
}

p {
    font-size: 1.8em;
}

img {
    width: 100%; /*con esto hago que la imagen pueda tomar los tamaños que yo le digo en navbar__logo*/
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* HEADER */

header {
    background-color: var(--dark-bg-solid);
    padding: var(--spacing-36); /*con esto se le da espacio arriab y abajo a los elementos*/
}
    /*con todo esto se puede centrar todo lo que haya en el navbar*/
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center; /*con esto hacemos que el logo de la pag y el menu con items se puedan centrar*/
}

.navbar__logo {
    max-width: 300px; /*para que la etiqueta pictura y img tengan un tamaño mas chico*/
}

.navbar__menu {
    display: flex; /*con esto le digo a los items que se pongan uno al lado del otro*/
    align-items: center; /*con esto se pueden centrar los items junto con el carrito*/
    gap: var(--spacing-20); /*con esto hacemos que los elemntos tenga una separacion entre si*/

}
/*---------------------------------------------------------------------*/

.navbar__link {
    font-size: var(--font-medium);
    display: inline-block;
    padding: var(--spacing-8) var(--spacing-16);
    transition: background .3s ease-in-out; /*con esta trasicion aca ya se le aplica al hover tambien, no hace falta ponerlo en los dos lados*/
    position: relative; /*con esto hacemos que le submennu sea relativo al padre, osea al link*/

}

.navbar__link:hover {
    background-color: var(--primary-900);
}

.with-icon {
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.with-submenu:hover .submenu{  /*con esto le digo al menu que cuando le hago hover se muestre*/
    display: block;
}

.submenu {
    display: none; /*con esto le digo al menu que cuando no este haciendo hover, se oculte*/
    width: 300px;
    position: absolute; /*para sacar al submenu del flujo de la pagina, osea que la palabra shop, vuelve a estar en su lugar original y el submenu no lo corre para arriba*/
    background-color: var(--dark-bg-solid);
    z-index: 3; /*esto es para que el menu desplegable no quede atrapado entre las tres capas del hero*/
}

.submenu__link {
    display: block;
    padding: var(--spacing-8) var(--spacing-16);
    font-size: var(--font-medium);
    transition: background .3s ease-in-out;
}

.submenu__link:hover {
    background-color: var(--primary-900);
}


/* HERO */

.hero {
    background-image: url(../img/funkos-banner.webp);
    padding: var(--spacing-128); /*para agrandar el alto del banner, en lugar de poner un heigth pongo el padding y asi los elementos dentro, se posicionan solos*/
    background-position: top;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.hero::before {  /*posiciona la capa de difunminado entre la imagen y el texto*/
    content: '';
    background-color: rgba(0, 0, 0,  0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(2px) brightness(.9);
}

.hero__content {
    display: flex;  /*con estos tres hago que os elementos esten en columna y con padding*/
    flex-direction: column;
    gap: var(--spacing-20);
    align-items: start; /*con esto el boton de shop solo toma el tamaño del elemento y no del ancho total del container*/
    z-index: 2;
    position: relative;
}

.hero__title {
    font-family: var(--alternative-font);
    font-size: var(--font-jumbo);
    color: var(--light-font-solid);
}

.hero__text {
    font-family: var(--alternative-font);
    color: var(--light-font-solid);
    font-size: var(--font-medium);
}

.hero__link {
    display: inline-block;
    font-size: var(--font-medium);
    background-color: var(--light-bg-solid);
    padding: var(--spacing-12) var(--spacing-68);
    border-radius: 50px;
    font-weight: 500;
    transition: all .3s ease-in-out;
}

.hero__link:hover {
    background-color: var(--primary-900);
    color: var(--light-font-solid);
}

/* COLLECTIONS */

.collection {
    display: grid; /*con este display puedo hacer que esten un elemento al lado del otro */
    grid-template-columns: repeat(2, 1fr); /*con este le digo que quiero dos (2) columnas de un fraccion cada una, es decir 50 y 50 */
    align-items: center; /*con esto los alinea al centro porque antes estaban a los costados*/
    padding: var(--spacing-16) 0;
}

/*cambiar de posicion el segundo funko con nth-child en posicion 2 indicandole al collection__cover(la imagen), se invierte posicion, tome el orden -1*/

.collection:nth-child(2) .collection__cover{
    order: -1;
}

.collection__content {
    display: flex;
    flex-direction: column; 
    gap: var(--spacing-24); /*con esto separamos los textos un poco entre si*/
    align-items: start; /*con esto le sacamos la propiedad por defecto que es 'stretch' (el boton ocupa todo el ancho de la columna, y align-items:start hace que se achique el boton en collection__link)*/
}

.collection__title {
    font-family: var(--alternative-font);
    font-size: var(--font-display);
    font-weight: 500;
}

.collection__text {
    font-family: var(--alternative-font);
    font-size: var(--font-large);
    font-weight: 300;
    border-bottom: 2px solid var(--primary-solid);
    padding-bottom: var(--spacing-20);
}

.collection__link {
    display: inline-block;
    font-size: var(--font-medium);
    background-color: var(--dark-bg-solid);
    color: var(--light-font-solid);
    padding: var(--spacing-16) var(--spacing-36);
    border-radius: 50px;
    font-weight: 500;
    transition: background .3s ease-in-out;
}

.collection__link:hover {
    background-color: var(--primary-900);
}

/* SLIDER */

.slider {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-36);
    margin: var(--spacing-68) auto;
}

.slider__title {
    font-family: var(--alternative-font);
    font-size: var(--font-display);
    text-transform: uppercase; /*para que el titulo sea en mayuscula*/
}

iconify-icon {
    color: var(--dark-bg-solid);
    font-size: var(--font-small);
    font-weight: 700;
}

.glide__arrow--left {
    left: 0;
}

.glide__arrow--right {
    right: 0;
}



/*todo esto para el hover de cambiar imagenes*/
.card-item__cover {
    display: flex;
    position: relative;
}

.card-item__tag {
    font-size: var(--font-xsmall);
    text-transform: uppercase;
    background-color: var(--primary-solid);
    color: var(--light-font-solid);
    padding: var(--spacing-8) var(--spacing-12);
    position: absolute; /*con esto el tag nuevo, de color rojo, se achica a su propio tamaño y no toma todo el largo del padre*/
    right: 0; /*poniendo position:relative a su padre card-item__cover, hacemos que el tag se posicione en el right:0 de su padre y no del body*/
} 


.card-item__cover img {
    animation: fade .7s;
}

.card-item__img--back {
    display: none;
}


.card-item__cover:hover .card-item__img--back {
    display: block;
}

.card-item__cover:hover .card-item__img--front {
    display: none;
}
/*---------------------------------------------*/
.card-item__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    padding: var(--spacing-16);
}

.card-item__licence {
    font-size: var(--font-xsmall);
    font-weight: 500;
}
.card-item__name {
    font-size: var(--font-medium);
    font-weight: 700;
}
.card-item__price {
    font-size: var(--font-xsmall);
}
.card-item__promo {
    font-size: var(--font-xsmall);
    color: var(--secondary-solid);
    font-weight: 700;
}

.card-item__add {
    background-color: #ff4500;
    color: white;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    margin-top: 10px;
}

.card-item__add:hover {
    background-color: #e03e00;
}

.navbar__cart {
    position: relative;
}

.navbar__cart::after {
    content: attr(data-items);
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}


/* FOOTER */

.footer {
    background-color: var(--dark-bg-solid);
    padding: var(--spacing-68);
}

.footer__copy {
    margin-top: var(--spacing-36);
    text-align: center;

}


/* ANIMATIONS */

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}