:root {
    --primary-red: #e61f40;
}

@font-face {
    font-family: 'MenuFont';
    src: url('fonts/fonnts.com-Filicudi_Solid.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HomeFont';
    src: url('fonts/Brunson.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;

}

.red {
    background-color: var(--primary-red);
    height: 5vw;
}

.white {
    background-color: white;
    height: 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    width: clamp(5rem, 10vw, 12rem);
    height: auto;
    display: block;
}

.nav-bar {
    padding-top: clamp(1rem, 3vw, 5rem);
    padding-bottom: 1vw;
    background-color: black;
    text-align: center;
}

.nav-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.nav-bar a {
    color: white;
    text-decoration: none;
    font-size: clamp(1.9rem, 2vw, 2.1rem);
    padding: 0 1vw;
    font-family: 'MenuFont';
    transition: padding 0.3s ease;
}

.home {
    text-align: center;
    background-image: url('assets/image_home.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.el-poder-de-la-hamburguesa {
    padding-top: 10vh;
}

.el-poder-de-la-hamburguesa h4 {
    color: white;
    font-family: 'HomeFont';
    font-size: clamp(3rem, 11vw, 20rem);
    margin: 0;
    line-height: 0.8;
    font-weight: normal;
}

.order-icon {
    max-width: clamp(10rem, 28vw, 30rem);
    padding-top: 5vw;
}

.floating-order-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 1000;
}

.floating-order-icon img {
    max-width: clamp(10rem, 19vw, 20rem);
    height: auto;
}

.social-icons {
    padding-bottom: 3vw;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.social-icons a {
    text-decoration: none;
}

.social-icons img {
    width: clamp(2rem, 5vw, 7rem);
    margin-right: 5vw;
}

.lnha {
    padding: 10vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.lnha-logo {
    width: clamp(7rem, 19vw, 31rem);
}

.separator {
    width: clamp(7rem, 19vw, 31rem);
}

.te-apoyamos {
    padding: 1vh 0;
}

.te-apoyamos h4 {
    color: white;
    font-family: 'HomeFont';
    font-size: clamp(3rem, 9vw, 15rem);
    margin: 0;
    line-height: 0.8;
    font-weight: normal;
}

.registrate {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1vh 0;
}

.registrate-text {
    color: white;
    font-family: 'MenuFont';
    font-weight: normal;
    font-size: clamp(1rem, 1.5vw, 2rem);
    margin: 0;
}

.registrate-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1vh 0;
    gap: 1rem;
}

.registrate-form input {
    background-color: var(--primary-red);
    color: white;
    font-family: 'MenuFont';
    font-size: clamp(0.8rem, 1.5vw, 1.6rem);
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: 0.5rem;
    line-height: normal;
    display: flex;
    align-items: center;
    width: 20vw;
}

.registrate-form input::placeholder {
    color: white;
}

.haciendo-click-text {
    color: white;
    font-family: 'MenuFont';
    font-weight: normal;
    font-size: clamp(0.3rem, 1.5vw, 1.6rem);
    margin: 0;
    padding: 1vh 0;
}

.registrate-button {
    background-color: var(--primary-red);
    color: white;
    font-family: 'MenuFont';
    font-size: clamp(0.8rem, 1.5vw, 1.6rem);
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: 0.5rem;
    width: clamp(5rem, 10vw, 15rem);
}

.registrate-button:active {
    background-color: var(--primary-red);
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.separator-end {
    width: clamp(7rem, 19vw, 31rem);
    padding: 1vh 0;
}

.nuestra-magia {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: clamp(0.1rem, 2vw, 5rem);
}

.nuestra-magia-title {
    display: flex;
    align-items: flex-end;
}

.nuestra-magia-text h4 {
    color: var(--primary-red);
    font-family: 'HomeFont';
    font-size: clamp(1rem, 8vw, 15rem);
    margin: 0;
    line-height: 0.8;
    font-weight: normal;
}

.hamburguesa-logo {
    max-width: 12vw;
    margin-left: -3vw;
}

.nuestra-magia p {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1rem, 3vw, 3.1rem);
    color: #5c5a5b;
    margin: 5vw;
    text-align: justify;
    font-weight: 400;
}

.sticker-hamburguesa {
    position: absolute;
    top: 0%;
    left: 0%;
    margin-left: -5vw;
    margin-top: -10vw;
    transform: rotate(-5deg);
    width: 20vw;
}

.separator-rojo-end {
    display: block;
    margin: 0 auto;
    width: clamp(15rem, 50vw, 80rem);
    padding: 2vh 0;
}

.split-wrapper {
    flex: 3;
    position: relative;
    margin: 0 auto;
    padding: 0 clamp(0rem, 5vw, 10rem);
}

.split-screen {
    display: flex;
}

.split-text,
.split-image,
.split-image-2 {
    flex: 1;
}

.split-text {
    flex: 2;
    background-color: var(--primary-red);
    color: white;
    padding: clamp(0.5rem, 1.5vw, 3rem);
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 0;
}

.split-text h2 {
    font-family: 'HomeFont';
    font-size: clamp(2rem, 8vw, 15rem);
    line-height: 0.8;
    margin: 0;
    font-weight: normal;
}

.split-text p {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1rem, 3vw, 3rem);
    text-align: justify;
    line-height: clamp(0.5, 1, 1.2);
}

.split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sticker-oro-miel {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 2vw;
    margin-bottom: -10vw;
    transform: rotate(-5deg);
    width: 15vw;
    z-index: 1;
}

.split-screen-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-red);
}

.split-image-2 {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.split-image-2 img {
    width: 40vw;
    height: auto;
}

.split-text-2 {
    flex: 1;
    background-color: #e2e2e2;
    color: #4b4b4b;
    padding: clamp(0.5rem, 1.5vw, 3rem);
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 0;
}

.split-text-2 h2 {
    font-family: 'HomeFont';
    font-size: clamp(2rem, 8vw, 15rem);
    line-height: 0.8;
    margin: 0;
    font-weight: normal;
}

.encuentranos-links {
    padding: 2vw 0;
    font-size: clamp(1rem, 1vw, 1rem);
}

.encuentranos-links h2 {
    font-size: clamp(1rem, 4vw, 5rem);
    padding-bottom: 1vw;
}

.encuentranos-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

.encuentranos-links a {
    color: #5c5a5b;
    text-decoration: none;
    font-size: clamp(0.8rem, 3vw, 3rem);
    font-family: 'MenuFont';
}

.sticker-tartarazo {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -2vw;
    margin-bottom: -10vw;
    transform: rotate(10deg);
    width: 30vw;
    z-index: 1;
}

.cervezas {
    margin: 0 auto;
    padding: 0 clamp(0rem, 5vw, 10rem);
}

.cervezas h4 {
    text-align: center;
    color: var(--primary-red);
    font-family: 'HomeFont';
    font-size: clamp(3rem, 7vw, 11rem);
    margin: 0;
    line-height: 0.8;
    font-weight: normal;
    padding: 3vw 0;
}

.cervezas-p {
    position: relative;
    background-color: var(--primary-red);
    padding: 2vw;
}

.cervezas-p1 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1rem, 3vw, 3rem);
    color: white;
    text-align: justify;
    padding-right: clamp(4rem, 21vw, 21rem);
}

.cervezas-p2 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1rem, 3vw, 3rem);
    color: white;
    text-align: justify;
}

.cervezas-p3 {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(1rem, 3vw, 3rem);
    color: white;
    text-align: justify;
    padding-left: clamp(4rem, 21vw, 21rem);
}

.cerveza-1 {
    position: absolute;
    bottom: -15vw;
    left: 0vw;
    width: clamp(6rem, 20vw, 25rem);
}

.cerveza-2 {
    position: absolute;
    top: -17vw;
    right: 0vw;
    width: clamp(6rem, 20vw, 25rem);
}

.menu {
    text-align: center;
    padding: 1vw;
}

.menu h4 {
    color: var(--primary-red);
    font-family: 'HomeFont';
    font-size: clamp(3rem, 7vw, 11rem);
    margin: 0;
    line-height: 0.8;
    font-weight: normal;
    padding: 3vw 0;
}

.menu-photos {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.menu-photos::-webkit-scrollbar-thumb {
    background-color: var(--primary-red);
    border-radius: 4px;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: clamp(20rem, 30vw, 31rem);
}

.menu-photo {
    width: 100%;
    height: auto;
}

.menu-text {
    width: 100%;
    font-family: 'MenuFont';
    font-size: 1rem;
    color: white;
    margin: 0;
    background-color: black;
    height: 15vh;
    display: flex;          
    justify-content: center;
    align-items: center;    
    text-align: center;     
}
.merch {
    text-align: center;
    padding: 1vw;
}

.merch h4 {
    color: var(--primary-red);
    font-family: 'HomeFont';
    font-size: clamp(3rem, 7vw, 11rem);
    margin: 0;
    line-height: 0.8;
    font-weight: normal;
    padding: 3vw 0;
}

.merch-photos {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.merch-photos::-webkit-scrollbar-thumb {
    background-color: var(--primary-red);
    border-radius: 4px;
}

.merch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: clamp(20rem, 30vw, 31rem);
}

.merch-photo {
    width: 100%;
    height: auto;
}

.merch-text {
    width: 100%;
    font-family: 'MenuFont';
    font-size: 1rem;
    color: #5c5a5b;
    margin: 0;
    height: 15vh;
    display: flex;          
    justify-content: center;
}

.footer {
    background-color: var(--primary-red);
    text-align: center;
    padding: 2vh 0;
}

.back-to-top-button {
    background-color: white;
    color: var(--primary-red);
    font-family: 'MenuFont';
    font-size: clamp(0.5rem, 1.5vw, 1.6rem);
    padding: 0.5rem 0.5rem;
    border: none;
    border-radius: 0.5rem;
    width: clamp(5rem, 10vw, 15rem);
    margin-bottom: 3vw;
}

.logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.1rem, 5vw, 10rem);
    flex-wrap: nowrap;
    margin-bottom: 3vw;
}

.footer-logo {
    height: clamp(3rem, 10vw, 12rem);
    width: auto;
    object-fit: contain;
}

.footer-block {
    display: flex;
    align-items: stretch;
    padding: 1vw;
}

.referals-links,
.encuentranos-links-2 {
    border-right: 2px solid #ffffff;
    padding-right: 0.5vw;
    padding-left: 0.5vw;
    flex: 1;
}

.disclaimer {
    flex: 2;
}

.footer-block h2 {
    font-family: 'MenuFont';
    color: white;
    margin: 0 0 0.45rem 0;
    font-size: clamp(0.5rem, 2vw, 3rem);
    line-height: 0.8;
    font-weight: 600;
}

.referals-links::before {
    content: "enlaces útiles";
    display: block;
    visibility: hidden;
    margin: 0 0 0.45rem 0;
    font-size: clamp(0.8rem, 3vw, 3rem);
    line-height: 0.8;
    font-weight: 600;
    font-family: 'MenuFont';
}

.encuentranos-links-2 ul,
.referals-links ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 0.8;
}

.encuentranos-links-2 a,
.referals-links a {
    color: white;
    text-decoration: none;
    font-size: clamp(0.3rem, 1.9vw, 3rem);
    font-family: 'MenuFont';
}

.disclaimer p {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: white;
    text-align: justify;
    font-size: clamp(0.5rem, 1.5vw, 2rem);
    padding: 1vw;
}

.footer-block ul li+li {
    margin-top: 0.35rem;
}


@media (max-width: 1024px) {
    .nav-bar a {
        font-size: clamp(1.2rem, 2.5vw, 1.5rem);
        padding: 1vw 1vw;
    }

    .merch-photos {
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .menu-photos {
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .cerveza-1 {
        bottom: -12vw;
    }

    .cerveza-2 {
        top: -15vw;
    }

    .menu-text {
        height: 15vh;
    }
}


@media (max-width: 480px) {
    .white {
        height: 2vw;
    }

    .nav-bar ul {
        flex-direction: column;
    }

    .nav-bar a {
        font-size: clamp(1rem, 2vw, 1.2rem);
        padding: 1vw 0;
        display: block;
    }

    .home {
        min-height: 40vh;
    }

    .red {
        height: 6vh;
    }

    .cerveza-1 {
        bottom: -12vw;
    }

    .cerveza-2 {
        top: -15vw;
    }

        .menu-text {
        height: 22vh;
    }
}