:root {
    --primary-color: #7B0914;
    --white-color: #f5efe6;
    --primary-color-hover: #b72400;
}



@font-face {
    font-family: "Season Mix";
    src: url(../fonts/SeasonMixTRIAL-Regular.otf);
}

@font-face {
    font-family: "Poppins Light";
    src: url(../fonts/Poppins-Light.ttf);
}
@font-face {
    font-family: "Flicker";
    src: url(../fonts/Flicker-Variable-Desktop_3.ttf);
}
.ff-flicker{
    font-family: "Flicker";
}

.ff-season-mix {
    font-family: "Season Mix";
}
.ff-poppins {
    font-family: "Poppins Light";
}

body{
    font-family: "Poppins Light";
}
.custom-bg{
    background-image:url(../images/Fondo.jpg);
    background-size:contain;
    background-repeat: repeat-y;
}
h1 {
    font-size: 56px;
    line-height: 1;
}
h2 {
    font-size: 56px;
    line-height: 1;
}
@media(max-width:576px) {
    h2 {
        font-size: 36px;
        line-height: 1;
    }
}

h3 {
    font-size: 32px;;
    line-height: 1;
}

p {
    font-family: "Poppins Light";
    font-size: 20px;
}



.bg-header {
    background-image:
            linear-gradient(to top, rgba(5, 5, 5, 0.45), transparent), url(../images/home-2025.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--primary-color);
}

@media(max-width: 576px){
    .bg-header {
        height:100vh;
        background-image:
        linear-gradient(to top, rgb(5, 5, 5), transparent), url(../images/home-mobile-4.webp) ;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: var(--primary-color);
    }

}
.bg-header a {
    text-decoration: none;
    color: var(--white-color)
}

.bg-header-cancelado {
    background-image: url(../images/banner_cancelado.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--primary-color);
}

.gradient {
    background: rgb(200,91,78);
    background: -moz-radial-gradient(circle, rgba(200,91,78,1) 0%, rgba(102,51,51,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(200,91,78,1) 0%, rgba(102,51,51,1) 100%);
  background: radial-gradient(circle, rgba(200,91,78,1) 0%, rgba(123,9,20,1) 100%);
}

.button-primary {
    /* background-color: var(--primary-color); */
    background: radial-gradient(circle, rgba(200,91,78,1) 0%, rgba(123,9,20,1) 100%);
    color: var(--white-color);
    border: 1px solid white;
}

.button-primary:hover, .button-primary:active {
    background-color: var(--primary-color-hover) !important;
    border-color: var(--primary-color-hover) !important;
    color: var(--white-color) !important;
}

.button-white {
    background-color: var(--white-color) !important;
    color: var(--primary-color);
    border: 1px solid white;
}

.button-white:hover, .button-white:active {
    background-color: var(--white-color) !important;
    border-color: var(--primary-color-hover) !important;
    color: var(--primary-color) !important;
}


.nav-link {
    color: var(--white-color);
    font-size: 18px;
}

.nav-link:hover {
    color: var(--primary-color);
}

.nav-link--active {
    color: var(--primary-color) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--primary-color);
}

/* Globals */
.g--color-primary {
    color: var(--primary-color);
}

.g--color-white {
    color: var(--white-color);
}

.g--background-color-primary {
    background-color: var(--primary-color);
}

.g--background-color-white {
    background-color: var(--white-color);
}

.g--max-width-85 {
    max-width: 90%;
}

@media(min-width:576px){
    .g--margin-top-100px {
        margin-top: 100px;
    }
}

.g--margin-bottom-100px {
    margin-bottom: 100px;
}

.g--margin-right-50px {
    margin-right: 50px;
}

.g--width-26px {
    width: 26px;
}

.g--width-130px {
    width: 130px;
}
.g--width-275px {
    width: 275px;
}
@media(max-width:576px){
    .g--width-275px {
        width: 200px;
    }
}

.meta{
    color:#ecd96f;
    color:#ab1a32;
}
.g--width-648px {
    width: 648px;
}

.g--height-80px {
    height: 80px;
}

.g--list-style-none {
    list-style: none;
}

.g--width-fit-content {
    width: fit-content;
}

.g--font-size-18px {
    font-size: 18px;
}

.g--font-size-20px {
    font-size: 20px;
}

.g--text-shadow-3d3d3d {
    text-shadow: 4px 1px 6px #000000;
}

/* Font family clases */
.g--font-family-chamberi-headline-regular {
    font-family: "ChamberiHeadlineRegular";
}

.g--font-family-chamberi-headline-bold {
    font-family: "ChamberiHeadlineBold";
}

.g--font-family-chamberi-headline-italic {
    font-family: "ChamberiHeadlineItalic";
}

.g--font-family-chamberi-headline-lightItalic {
    font-family: "ChamberiHeadlineLightItalic";
}

.g--font-family-real-text-pro {
    font-family: "RealTextPro";
}

.iframe {
    opacity: 0;
    visibility: hidden;
    height: 0;
}

.iframe.show {
    opacity: 1;
    visibility: visible;
    height: auto;
    transition: all 0.5s ease;
}

#r0c0m1i1 {

    background-color: var(--primary-color);
    background: radial-gradient(circle, rgba(200,91,78,1) 0%, rgba(123,9,20,1) 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;

}

.rotate-10deg {
    transform: rotate(10deg);
}

@media(max-width: 576px){
    .w-75{
        width:100% !important;
    }
}

.esmorzar-tapear{
    font-family: 'Flicker';
    text-transform:uppercase;
    text-align:center;
    font-size:10rem;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 45px;
    aspect-ratio: 1;
    background:
            linear-gradient(#0000 calc(1*100%/6),#000 0 calc(3*100%/6),#0000 0) left   bottom,
            linear-gradient(#0000 calc(2*100%/6),#000 0 calc(4*100%/6),#0000 0) center bottom,
            linear-gradient(#0000 calc(3*100%/6),#000 0 calc(5*100%/6),#0000 0) right  bottom;
    background-size: 20% 600%;
    background-repeat: no-repeat;
    animation: l3 1s infinite linear;
}
@keyframes l3 {
    100% {background-position: left top,center top,right top }
}

.oval {
    margin: 0 auto;
    width: 181px;
    height: 50px;
    border: 1px solid white;
    border-radius: 50%;
    opacity: 0.3;
    transform: rotate(-6deg);
}


a{
color: var(--primary-color)
}