
/* =========================================
   HEADER DESKTOP
========================================= */

.header-ctas{

    display:flex;

    align-items:center;

    gap:8px;

}
/* =========================================
   BOTÃO WHATSAPP
========================================= */

.btn-header-whatsapp{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:
    linear-gradient(
    135deg,
    #25d366 0%,
    #119c4d 100%
    );

    color:#ffffff;

    padding:7px 24px;

    border-radius:var(--header-button-radius);

    font-size:var(--header-button-font);

    font-weight:800;

    text-decoration:none;

    box-shadow:
    0 10px 24px rgba(37,211,102,.26);

    transition:all .25s ease;

    position:relative;

    overflow:hidden;
}

.btn-header-whatsapp:hover{
    transform:
    translateY(-3px)
    scale(1.03);

    box-shadow:
    0 18px 34px rgba(37,211,102,.38);

    filter:brightness(1.04);
}

/* =========================================
   BOTÃO COMPRAR
========================================= */

.btn-header-buy{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:
    linear-gradient(
    135deg,
    #ffd54f 0%,
    #ffb300 100%
    );

    color:#5a1a00 !important;

    padding:7px 24px;

    border-radius:var(--header-button-radius);

    font-size:var(--header-button-font);

    font-weight:900;

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.4px;

    box-shadow:
    0 12px 28px rgba(255,179,0,.26);

    transition:all .25s ease;

    position:relative;

    overflow:hidden;

    animation:
pulseButton 2.5s infinite;
}

/* brilho premium */

.btn-header-buy::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:90%;
    height:100%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.5),
    transparent
    );

    transition:.7s;
}

.btn-header-buy:hover::before{
    left:130%;
}

.btn-header-buy:hover{
    transform:
    translateY(-3px)
    scale(1.04);

    box-shadow:
    0 18px 38px rgba(255,179,0,.38);

    filter:brightness(1.03);
}

.btn-header-whatsapp:hover{
    transform:translateY(-2px);
}

.brand-area{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-menu-img{

    width:var(--logo-size);

    height:var(--logo-size);

    object-fit:contain;

}

/* =========================================
   HEADER MOBILE
========================================= */

@media (max-width:768px){

.topbar-master{
    padding:0 !important;

    overflow:visible !important;

    backdrop-filter:blur(16px);

    background:rgba(20,0,0,.75);
}

.header-main{
    display:flex !important;
    position:relative;

    overflow:visible !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:10px !important;

    padding:6px 12px !important;
}

/* LOGO */

.brand-area{
    display:flex !important;

    align-items:center !important;

    gap:6px !important;

    flex:1 !important;

    min-width:0 !important;

    overflow:hidden !important;
}

.logo-menu-img{
    width:34px !important;
    height:34px !important;

    flex-shrink:0 !important;
}

.brand-text h1{
    font-size:15px !important;

    margin:0 !important;

    line-height:1 !important;

    white-space:nowrap !important;
}

.brand-text p{
    font-size:9px !important;

    margin-top:2px !important;

    line-height:1 !important;

    white-space:nowrap !important;
}

/* Por padrão mostra o texto completo — só troca pro compacto
   em telas bem estreitas (ver breakpoint mais abaixo) */
.brand-subtitulo__compact{
    display:none !important;
}

/* ESCONDE MENU */

.menu-master{
    display:none;
}

/* BOTÕES */

.header-ctas{
    display:flex !important;
    flex-wrap:wrap !important;

    align-items:center !important;

    gap:6px !important;

    flex-shrink:0 !important;
}
.btn-header-whatsapp,
.btn-header-buy{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    padding:7px 10px !important;

    font-size:11px !important;

    line-height:1.15 !important;

    border-radius:8px !important;

    min-height:32px !important;

    max-width:none !important;

    min-width:0 !important;

    width:auto !important;

    text-align:center !important;

    white-space:nowrap !important;

    flex-shrink:1 !important;

    overflow:hidden !important;
}

}

/* Telas bem estreitas (celulares menores/médios, ex: 412px):
   o texto completo "Festa do Padroeiro São Sebastião" não cabe
   nessa largura, e ficava cortado no meio da palavra. Troca pra
   uma versão curta, que cabe inteira sem cortar. */
@media (max-width:430px){

    .brand-subtitulo__full{
        display:none !important;
    }

    .brand-subtitulo__compact{
        display:inline !important;
    }

}

@media (max-width:360px){

    .barra-urgencia{
        font-size:10px !important;

        padding:8px 10px !important;

        line-height:1.3 !important;
    }

.header-main{
    padding:8px 8px !important;
    overflow:visible !important;
    gap:6px !important;
}

}

/* =========================================
   (removido) COMPENSA HEADER FIXO
   Não é mais necessário: o header usa position:sticky
   (desktop e mobile), que já reserva seu próprio espaço
   no fluxo normal da página — sem precisar de padding
   artificial no body. Essa regra antiga (de quando o
   header era position:fixed) estava criando um espaço
   em branco extra no topo da página.
========================================= */

@keyframes pulseButton{

    0%{
        box-shadow:
        0 0 0 0 rgba(255,174,0,.55);
    }

    70%{
        box-shadow:
        0 0 0 18px rgba(255,174,0,0);
    }

    100%{
        box-shadow:
        0 0 0 0 rgba(255,174,0,0);
    }
}


/* ---- LOGO: tamanho fixo no header ---- */
.brand-area .logo-menu-img {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}
