/* ============================================================
    BLUEY Product Detail — fonts, layout and variants
   ============================================================ */

@font-face {
    font-family: 'Hello Headlin W00 Regular';
    src: url('../fonts/HelloHeadlinW00Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Futura Round Cond';
    src: url('../fonts/futura-round-cond-medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Round Cond';
    src: url('../fonts/futura-round-cond-extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------------------------------------
   Variant tokens
   ------------------------------------------------------------ */
.qb-template.bluey {
    --qb-bg: url('../img/bluey/bluey_fundo.png');
    --qb-accent: #AEDF5B;
    --qb-text: #fff;
    --qb-text-on-bg: #ffffff;
    --qb-bg-s1: url('../img/bluey/bluey_background_section1.png');
    --qb-bg-s2: url('../img/bluey/bluey_background_section2.png');
    --qb-bg-s3: url('../img/bluey/bluey_background_section3.png');
}

/* Extend variant background up behind the navbar */
body:has(.qb-template.bluey) { background-color: #abd5f2; }
body:has(.qb-template) .main-nav,
body:has(.qb-template) .main-nav .full-wrapper { background-color: transparent; }
body:has(.qb-template) .main-nav a { color: #ffffff; }
body:has(.qb-template) .main-nav a:hover,
body:has(.qb-template) .main-nav a:focus,
body:has(.qb-template) .main-nav a.active,
body:has(.qb-template) .main-nav li.active > a,
body:has(.qb-template) .main-nav li:hover > a { color: #008B97; }

/* When the navbar is stuck on scroll, use the variant primary color */
body:has(.qb-template.bluey) .main-nav.stick-fixed,
body:has(.qb-template.bluey) .main-nav.stick-fixed .full-wrapper,
body:has(.qb-template.bluey) .main-nav .mn-sub,
body:has(.qb-template.bluey) .inner-nav .mn-sub li { background-color: #8fc0e7; }


/* Submenu links white (overrides global #b0b0b0 !important in style.css) */
body:has(.qb-template) .main-nav .mn-sub a,
body:has(.qb-template) .inner-nav ul li .mn-sub li a { color: #ffffff !important; }

body:has(.qb-template) .main-nav .mn-sub a:hover,
body:has(.qb-template) .inner-nav ul li .mn-sub li a:hover,
body:has(.qb-template) .main-nav .mn-sub li a.active { color: #008B97 !important; }

/* Mobile hamburger icon — white over dark variant background */
body:has(.qb-template) .menubars svg path { fill: #ffffff; }

/* .page has overflow:hidden which breaks position:sticky on the bottle.
   overflow:clip clips overflow without becoming a scroll container. */
body:has(.qb-template) .page { overflow: clip; }

/* ------------------------------------------------------------
   Base template
   ------------------------------------------------------------ */
.qb-template {
    position: relative;
    background: var(--qb-bg);
    color: var(--qb-text-on-bg);
    font-family: 'Futura Round Cond', sans-serif;
    overflow-x: clip;
}

.qb-template h1 {
    font-family: BebasNeueImpacto-Bold, sans-serif;
    font-weight: 800;
    margin: 0;
    font-size: 36px;
}

.qb-template h2,
.qb-template h3,
.qb-template h4 {
    font-family: 'Hello Headlin W00 Regular', sans-serif;
    font-weight: 800;
    margin: 0;
}

.qb-amesa__title,
.qb-recipes__title { font-size: 20em; }

/* ------------------------------------------------------------
   Hero: image_header banner + pills + description (left)
         sticky detail_image (right) with 3 decos
   ------------------------------------------------------------ */
.qb-hero {
    position: relative;
    padding: 40px 0 80px;

    background-image:
        var(--qb-bg-s1),
        var(--qb-bg-s2),
        var(--qb-bg-s3);

    background-position:
        left 40vh,
        right 60vh,
        left 155vh;

    background-repeat: no-repeat;
    background-size:
        30vw auto,
        30vw auto,
        30vw auto;

    animation: cloudsMove 6s ease-in-out infinite alternate;
}

@keyframes cloudsMove {

    0% {
        background-position:
            left top,
            right 60vh,
            left 165vh;
    }

    100% {
        background-position:
            -60px top,
            calc(100% + 60px) 60vh,
            -60px 165vh;
    }

}

.bluey-jump {
    display: block;
    animation: blueyFloat 8s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

@keyframes blueyFloat {

    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-12px);
    }

    50% {
        transform: translateY(-20px);
    }

    75% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }

}

.bluey-jump2 {
    display: block;
    animation: blueyFloat 8s ease-in-out infinite;
    transform-origin: center bottom;
    will-change: transform;
}

@keyframes blueyFloat {

    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-12px);
    }

    50% {
        transform: translateY(-20px);
    }

    75% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0);
    }

}

.qb-hero__deco {
    position: absolute;
    pointer-events: none;
    max-width: 22vw;
    height: auto;
    z-index: 0;
}

.qb-ideal-for__text p {
    color: #ffffff;
    font-family: 'Futura Round Cond', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0;
}

.qb-hero__banner-wrap {
    /* height: 100%; */
    position: relative;
}

.qb-hero__banner {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.qb-header__breadcrumb {
    position: relative;
    z-index: 1;
    color: #008B97;
    opacity: 0.85;
    font-family: 'P22 Mackinac Pro', serif;
    font-weight: 800;
    font-style: normal;
    font-size: 12px;
    line-height: 130%;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.qb-header__breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.qb-hero__grid {
    position: relative;
    z-index: 1;
    display:inline-block;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: stretch;
}

.qb-hero__content { min-width: 0; }

.qb-header__subtitle {
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 6px;
}

.qb-header__line {
    display: block;
    width: 280px;
    max-width: 60%;
    height: auto;
    margin: 0 0 20px;
    margin-left: 150px;
}

.qb-header__title {
    color: var(--qb-text);
    font-size: clamp(80px, 12vw, 200px);
    line-height: 0.85;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 50px;
}

.titulos_bluey_small {    
    font-size: 28px;
    color:#008B97!important;
    line-height: 95%;
    margin-bottom: 10px!important;
    margin-top: 40px!important;
}
.titulos_bluey_medium {    
    font-size: 50px;
    color:#008B97!important;
    line-height: 105%;
    margin-bottom: 10px!important; 
}
.titulos_bluey_big {    
    font-size: 55px;
    color:#008B97!important;
    line-height: 95%;
    margin-bottom: 10px!important; 
    margin-top: 40px!important;
}

.qb-description {
    min-height: 55vh;
    min-width: 360px;
    color: var(--qb-bg);
    font-size: 16px;
    line-height: 1.5;
}

.qb-description__acidity {
    font-family: 'Hello Headlin W00 Regular', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 16px;
    text-transform: uppercase;
    color: var(--qb-bg);
}

.qb-description__text {
    margin: 0;
    color: var(--qb-bg);
}

.qb-description p {
    color: #ffffff;
    font-family: 'Futura Round Cond', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0;
}

/* ------------------------------------------------------------
   Garrafa stiky
   ------------------------------------------------------------ */

.garrafa_holder{
    position:relative;
}

.qb-hero__bottle-col{
    position:absolute;
    top:0;
    left:47.5%;
    width:38%;
    height:100%;
    z-index:20;
    pointer-events:none;
}

.qb-hero__bottle{
    position:sticky;
    top:100px;
    width:90%;
    max-height:80vh;
    object-fit:contain;
    display:block;
    margin:auto;
}

.qb-hero .container{
    padding-right:38%;
}

.garrafa_holder section:nth-of-type(3) .container{
    padding-right:38%;
}

.garrafa_holder section{
    position:relative;
    z-index:1;
}

.qb-amesa {
    position: relative;
    padding: 0 0 80px;
    text-align: center;
}

.qb-template.bluey .qb-amesa { background-color: #83b7e3; }


.qb-amesa__hero {
    width: 100%;
    margin-bottom: 0px;
    overflow: hidden;
}

.qb-amesa__hero img {
    width: 100%;
    height: auto;
    max-height: 920px;
    object-fit: cover;
    display: block;
}

.qb-amesa__title {
    color: var(--qb-text);
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 800;
    font-size: clamp(120px, 20vw, 280px);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: 0.05em;
    margin: 10px 0 30px 0 !important;
}

.qb-amesa__mood {
    color: #008B97;
    font-family: 'Futura Round Cond', sans-serif;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 60px;
}

.qb-amesa__gallery { margin: 40px 0; }

.qb-amesa__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.bluey_chefgaleria {
    display: inline-flex;
    width: 300px;
    position: absolute;
    max-width: 60%;
    height: auto;
    z-index: 999;
    left: 90px;
    bottom: 100px;
}

@media (max-width: 768px) {
    .qb-amesa { padding: 0 0 40px; }
    .qb-amesa__title { font-size: clamp(56px, 18vw, 100px); }
}

/* ------------------------------------------------------------
   Receitas section (white background)
   ------------------------------------------------------------ */
.qb-recipes {
    position: relative;
    padding: 100px 0 120px;
    text-align: center;
    background-color: #ffffff;
    color: var(--qb-bg);
}

.qb-recipes__subtitle {
    color: var(--qb-bg);
    font-family: 'Hello Headlin W00 Regular', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 16px;
}

.qb-recipes__title {
    font-weight: 800;
    font-size: clamp(72px, 12vw, 180px);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.01em;
    margin: 0 0 60px;
}

.qb-recipes__list { margin-bottom: 60px; }

.qb-recipes__cta { margin-top: 30px; }

.bsentada {
    position: absolute;
    bottom: -60px;
    left: 30%;
    z-index: 99;
}

.bsentada_holder {
    padding-top: 120px;
    padding-bottom: 120px;
}


@media (max-width: 768px) {
    .qb-recipes { padding: 60px 0 80px; }
    .qb-recipes__title { font-size: clamp(56px, 18vw, 100px); }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .qb-amesa__title,
    .qb-recipes__title { font-size: 6em; }
    .qb-hero { padding: 24px 0 60px; }
    .qb-hero__bottle-col {
        order: -1;
        min-height: 0;
    }
    .qb-hero__bottle {
        position: static;
        max-height: 60vh;
        max-width: 70%;
        margin-left: -10px;
    }
    .bluey  .qb-hero__bottle {
        margin-left: 8px;
    }
    .qb-hero__bottle-col { min-height: 1vh; }
    .qb-header__title { font-size: clamp(56px, 18vw, 120px); margin-bottom: 30px; }
    .qb-description { padding: 24px 24px; }

    .qb-header__breadcrumb,
    .qb-header__subtitle,
    .qb-header__line { display: none; }
    .qb-template.qb_spray .qb-hero__banner-wrap {
        height: 40vh;
    }
    .qb-ideal-for {
        margin-bottom: 0px;
    }
    .qb-template.qb_spray .qb-hero__banner {
        max-width: 100%;
        margin-top: 0;
    }

    .bsentada {
        position: absolute;
        bottom: -23px;
        left: 2%;
        z-index: 99;
    }
    .bsentada_holder {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .titulos_bluey_small {    
        font-size: 28px;
        color:#008B97!important;
        line-height: 95%;
        margin-bottom: 10px!important;
        margin-top: 40px!important;
    }
    .titulos_bluey_medium {    
        font-size: 36px;
        color:#008B97!important;
        line-height: 105%;
        margin-bottom: 10px; 
    }
    .titulos_bluey_big {    
        font-size: 42px;
        color:#008B97!important;
        line-height: 95%;
        margin-bottom: 10px!important; 
        margin-top: 40px!important;
    }

}