@import url('fuentes.css');

:root {
    --color-acento-principal: hsl(37, 100%, 55%);
    --color-acento-secundario: hsl(27, 88%, 40%);
    
    --color-bk-principal: hsl(38, 80%, 2%);
    --color-bk-principal-55: hsl(37, 75%, 2%, 55%);
    
    --color-primario: hsl(0, 0%, 93%);
    --color-secundario: hsl(0, 0%, 89%); 
}

.acento-principal {
    color: var(--color-acento-principal);
}

.acento-secundario {
    color: var(--color-acento-secundario);
}

.bk-principal {
    color: var(--color-bk-principal);
}

.primario {
    color: var(--color-primario);
}

.secundario {
    color: var(--color-secundario);
}

.f-subtitle {
    font-size: clamp(1.5rem, 5vw, 2rem);
}

a:hover {
    cursor: pointer;
}

/*Global*/

html {
    scroll-behavior: smooth;
    margin: 0;
    font-weight: 400;
    line-height: 1.5;
}

*,
*::before,
*::after {
    box-sizing: border-box;

    font-family: 'Nunito regular', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    box-sizing: inherit;

    margin: 0;

    font-kerning: normal;
}

.sr-only {
    position: fixed;
    top: -1000px;
    left: -1000px;
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

h1,
h1 * {
    font-family: 'Bebas Neue';
    font-size: clamp(3rem,10vw, 4rem);
    font-kerning: normal;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    text-rendering:geometricPrecision;
}

p {
    font-kerning: normal;
}

body {
    display: grid;
    background-color: var(--color-bk-principal);
    color: var(--color-primario);
}

nav,
section,
footer {
    display: grid;
    gap: 1rem;
    padding: 16px 32px;
}

/* --- Header % Nav --- */

header {
    position: sticky;
    z-index: 9999 !important;
    top: -1px;
    background-color: var(--color-bk-principal);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

main {
    padding: 0 0 5rem;
}



.menu-boton {
    background-color: transparent;
    background-image:url(../img/menu.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    width: 2em;
    aspect-ratio: 1;
    cursor: pointer;
}

.menu-boton[aria-expanded="true"] {
    background-image: url(../img/close.svg);
    transition: background-image ease-in-out 350ms;
}

.primary-navigation {
    display: flex;
    flex-direction: column;
    padding: 3rem 0;
    
    position: fixed;
    top: 96px;
    right: 0;
    left: 0;
    bottom: 75px;
    z-index: 999;

    transform: translateX(0%) translateY(-150%);
    transition: transform 350ms ease-out;
}

.primary-navigation[data-visible="true"] {
    transform: translateX(0%) translateY(0%);
    transition: transform 350ms ease-out;
}

@supports (backdrop-filter: blur(1em)) {

    .primary-navigation {
        background-color: var(--color-bk-principal-55);
        backdrop-filter: blur(2em);
    }

}

/* Compatibilidad iOS 9*/
@supports (-webkit-backdrop-filter: blur(1em)) {
    .primary-navigation {
        background-color: var(--color-bk-principal-55);
        backdrop-filter: blur(2em);
        -webkit-backdrop-filter: blur(2em);
    }
}

.primary-navigation ul {
    list-style: none;
    padding: 3rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.primary-navigation a:link,
.primary-navigation a:visited {
    text-decoration: none;
    font-family: 'Bebas Neue';
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    letter-spacing: 0.07rem;
    filter: drop-shadow(0px 4px 6px var(--color-bk-principal));
    color: var(--color-primario);
}

.primary-navigation a:hover,
.primary-navigation a:active {
    color: var(--color-acento-principal);
    cursor: pointer;
}

/* --- Bienvenida --- */
#bienvenida {
    min-height: 425px;
    padding-top: 1rem;
    align-items: start;
    align-content: start;
}

#bienvenida h1 {
    font-size: 62px;
    color: var(--color-primario);
    filter: drop-shadow(6px 6px 2px var(--color-bk-principal));
}

/* --- Sobre nosotros --- */
#sobre_nosotros {
    justify-items: center;
}

#sobre_nosotros * {
    width: min(450px, 100%);
}


/* --- Big Daddy's --- */
#bigdaddys {
    padding: 3rem 0;
    display: grid;
    justify-content: stretch;
    gap: 1rem;
    width: min(324px, 100%);
    margin: 0 auto;
}

a.main-btn:link,
a.main-btn:visited {
    background-color: var(--color-acento-principal);
    text-align: center;
    text-decoration: none;
    padding: 8px 0;
    font-family: 'Nunito black';
    color: var(--color-bk-principal);
    border-radius: 1rem;
}

a.main-btn:hover,
a.main-btn:active {
    background-color: var(--color-secundario);
}

a.secondary-btn:link,
a.secondary-btn:visited {
    text-align: center;
    text-decoration: none;
    font-family: 'Nunito black';
    padding: 8px 0;
    border-radius: 1rem;
    border: 2px solid var(--color-acento-principal);
    color: var(--color-acento-principal);
}

a.secondary-btn:hover,
a.secondary-btn:active {
    border: 2px solid var(--color-primario);
    color: var(--color-primario);
}

/* ---  Catálogo / items --- */
#hamburguesas img {
    display: none;
}

.catalogo-contenedor {
    display: grid;
    justify-items: center;
    gap: 2rem;
    padding: 1rem 0 2rem;
}

.catalogo-contenedor span {
    text-align: right;
}

.catalogo-contenedor article {
    display: grid;
    grid-template-columns: 4fr 1fr;
    width: min(386px, 100%);
}

.catalogo-contenedor article > h2, 
.catalogo-contenedor article > span {
    font-family: 'Bebas Neue';
    text-rendering: optimizeLegibility;
    font-weight: normal;
    letter-spacing: 0.03rem;
    font-size: 2rem;
    line-height: 1.8rem;
    grid-column: span 1;
}

.catalogo-contenedor article > p {
    grid-column: span 2;
    font-family: 'Nunito black';
    color: var(--color-acento-principal);
}

/* --- Bebidas --- */
.logos {
    width: min(100%, 550px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.logos img {
    height: 24px;
}

/* --- Extras y Ubicación --- */
#extras,
#ubicacion {
    color: var(--color-bk-principal);
    background-color: var(--color-primario);
}

#extras article p {
    color: var(--color-acento-secundario);
}

.extras-img {
    display: none;
}

#ubicacion {
    justify-items: center;
    justify-content: center;
}

#ubicacion a {
    display: block;
    width: min(550px, 100%);
    margin: 0 auto;
}

#ubicacion p {
    font-family: 'Nunito bold';
    text-align: center;
}

#ubicacion img {
    display: block;
    width: min(550px, 100%);
    margin: 0 auto;
}

/* --- Footer ---*/
footer {
    background-color: var(--color-bk-principal);
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9999;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menuweb {
    min-width: 100%;
    min-height: 98vh;
    border: none;
}


@media screen and (min-width: 996px) {

    .primary-navigation {
        bottom: 0;
    }

    /* --- Bienvenida --- */
    #bienvenida {
        min-height: 650px;
    }

    #bienvenida h1 {
        font-size: 120px;
    }

   /* ---  Catálogo / items --- */
    .catalogo-contenedor {
        display: grid;
        justify-items: center;
        gap: 2rem;
        padding: 1rem 0 2rem;
        grid-template-columns: 1fr 1fr;
    }

    .logos {
        width: 80%;
        padding: 1rem 0;
    }

    .logos img {
        height: 38px;
    }
    
    #ubicacion {
        margin: 0;
    }

    main {
        padding: 0;
    }

    
    footer {
        position: static;
        width: 550px;
        margin: 0 auto;
        z-index: 1;
    }
    
}

@media screen and (min-width:1496px) {
    .nav-principal {
        width: min(1300px, 100%);
        margin: 0 auto;
    }

    #bienvenida {
        min-height: 85vh;
        align-content: end;
        justify-content: start;
    }

    #bienvenida h1 {
        font-size: 136px;
        width: 600px;
        text-align: left;
        padding-left: 5rem;
        overflow: hidden;
    }

    #bigdaddys {
        padding: 8rem 0;
    }
    
    #sobre_nosotros {
        padding-bottom: 6rem;
    }

    #hamburguesas,
    #extras,
    #bebidas {
        justify-content: stretch;
        justify-items: stretch;
        align-items: start;
        gap: 2rem;
        grid-template-columns: 2fr 1.5fr 1.5fr;
    }

    #hamburguesas img {
        display: block;
        width: 100%;
    }

    .contenedor-izq {
        display: grid;
        gap: 2rem;
        align-items: space-between;
        align-content: space-between;
    }

    .extras-izq {
        display: grid;
        grid-template-rows: 1fr 3fr;
        align-items: stretch;
        align-content: start;
    }

    .extras-img {
        display: block;
        background-image: url('../img/slider/BACK_1');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    #ubicacion {
        grid-template-columns: 2fr 2fr;
        align-items: center;
    }

    #hamburguesas .catalogo-contenedor,
    #extras .catalogo-contenedor,
    #bebidas .catalogo-contenedor {
        grid-column: span 2;
    }

}