/* ============================================================
   Promoção temporária — "Show do Botijão" (seção #promocao)
   Cores próprias da campanha (não do tema): o verde/laranja da Liquigás
   + o dourado dos valores da arte oficial. Escopadas em .lp-promo.
   Assinatura: faixa de azulejos no topo e na base, como a moldura da arte.
   Arquivo separado do style.css de propósito: na próxima promoção, troca-se só ele.
   ============================================================ */
.lp-promo {
    --promo-green: #006F4D;
    --promo-green-deep: #0B4A36;
    --promo-teal: #12936B;
    --promo-orange: #FF8931;
    --promo-orange-soft: #FFB04D;
    --promo-gold-1: #FFE08A;
    --promo-gold-2: #E9A825;
    --promo-gold-3: #A8680C;
    --promo-paper: #EEF1EE;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60rem 30rem at 85% 40%, rgba(255,137,49,.10), transparent 70%),
        var(--promo-paper);
    color: var(--promo-green-deep);
}

/* ===== Faixa de azulejos (peças geradas pelo js/promo.js) ===== */
.lp-promo-tiles {
    display: flex;
    height: 56px;
    overflow: hidden;
}
.lp-promo-tile {
    flex: 0 0 56px;
    height: 56px;
    background-color: var(--promo-green);
}
/* sol nascendo no canto */
.lp-promo-tile.t1 {
    background: radial-gradient(circle at 0 100%, var(--promo-orange-soft) 0 38%, var(--promo-orange) 38% 46%, transparent 47%), var(--promo-green);
}
/* flor de 4 pétalas */
.lp-promo-tile.t2 {
    background:
        radial-gradient(circle at 50% 50%, var(--promo-green-deep) 0 9%, transparent 10%),
        radial-gradient(circle at 50% 28%, var(--promo-green-deep) 0 13%, transparent 14%),
        radial-gradient(circle at 50% 72%, var(--promo-green-deep) 0 13%, transparent 14%),
        radial-gradient(circle at 28% 50%, var(--promo-green-deep) 0 13%, transparent 14%),
        radial-gradient(circle at 72% 50%, var(--promo-green-deep) 0 13%, transparent 14%),
        var(--promo-orange);
}
/* arco na base */
.lp-promo-tile.t3 {
    background: radial-gradient(circle at 50% 100%, var(--promo-teal) 0 30%, var(--promo-green-deep) 30% 34%, var(--promo-teal) 34% 46%, transparent 47%), var(--promo-green-deep);
}
/* ondas */
.lp-promo-tile.t4 {
    background: repeating-linear-gradient(180deg, var(--promo-orange-soft) 0 7px, var(--promo-orange) 7px 11px);
}
/* botões de sanfona */
.lp-promo-tile.t5 {
    background:
        radial-gradient(circle, var(--promo-orange-soft) 0 3px, transparent 3.5px) 0 0 / 14px 14px,
        var(--promo-teal);
}
/* losangos */
.lp-promo-tile.t6 {
    background: conic-gradient(from 45deg, var(--promo-orange) 0 25%, var(--promo-green) 0 50%, var(--promo-orange) 0 75%, var(--promo-green) 0);
    background-size: 28px 28px;
    background-position: 14px 14px;
}
.lp-promo-tiles-bottom { transform: scaleX(-1); }

/* ===== Arte oficial, apresentada como cartaz colado ===== */
.lp-promo-art-wrap {
    position: relative;
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
}
.lp-promo-art {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    transform: rotate(-2deg);
    box-shadow:
        0 0 0 8px #fff,
        0 30px 60px -20px rgba(11,74,54,.45),
        0 12px 24px -12px rgba(11,74,54,.35);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.lp-promo-art img { display: block; width: 100%; height: auto; }
.lp-promo-art:hover { transform: rotate(0deg) scale(1.015); }
.lp-promo-art:focus-visible { outline: 3px solid var(--promo-orange); outline-offset: 12px; }


/* ===== Selo de status (texto escrito pelo js/promo.js) ===== */
.lp-promo-status {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--promo-green-deep);
    background: #fff;
    border: 1.5px solid rgba(11,74,54,.15);
}
.lp-promo-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--promo-orange);
}
.lp-promo-status.is-live .lp-promo-status-dot {
    background: #1DB954;
    box-shadow: 0 0 0 0 rgba(29,185,84,.6);
    animation: lpPromoPulse 1.8s ease-out infinite;
}
@keyframes lpPromoPulse {
    to { box-shadow: 0 0 0 10px rgba(29,185,84,0); }
}

/* ===== Título e texto ===== */
.lp-promo-title {
    margin-top: 1.1rem;
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.035em;
    color: var(--promo-green);
}
.lp-promo-title em {
    font-style: italic;
    font-weight: 700;
    font-size: .5em;
    color: var(--promo-orange);
    vertical-align: .55em;
    margin: 0 .05em;
}
.lp-promo-lead {
    margin-top: 1rem;
    max-width: 34rem;
    font-size: 1.075rem;
    color: #3B5249;
}

/* ===== Escada de prêmios, do maior para o menor ===== */
.lp-promo-prizes {
    margin-top: 1.75rem;
    border-top: 2px solid var(--promo-green-deep);
}
.lp-promo-prize {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px dashed rgba(11,74,54,.28);
}
.lp-promo-prize-value {
    font-family: 'Sora', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    line-height: 1.05;
    letter-spacing: -.03em;
    background: linear-gradient(180deg, var(--promo-gold-1) 0%, var(--promo-gold-2) 48%, var(--promo-gold-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1.5px 0 var(--promo-green-deep));
    white-space: nowrap;
}
.lp-promo-prize-value small {
    font-size: .45em;
    margin-right: .2em;
    vertical-align: .6em;
    letter-spacing: 0;
}
.lp-promo-prize-top .lp-promo-prize-value { font-size: clamp(2.3rem, 6vw, 3.4rem); }
.lp-promo-prize-label {
    font-size: .9rem;
    text-align: right;
    color: #3B5249;
}
.lp-promo-prize-label b { color: var(--promo-green-deep); font-weight: 800; }

.lp-promo-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    color: var(--promo-green);
    text-decoration: underline;
    text-decoration-color: var(--promo-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.lp-promo-link:hover { color: var(--promo-green-deep); }
.lp-promo-link:focus-visible { outline: 2px solid var(--promo-orange); outline-offset: 4px; border-radius: 4px; }

.lp-promo-fineprint {
    margin-top: 1.5rem;
    max-width: 34rem;
    font-size: .72rem;
    line-height: 1.5;
    color: #5E726A;
}

/* Link "Promoção" no menu: ponto laranja de novidade */
.lp-nav-promo::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: .35rem;
    vertical-align: .55em;
    border-radius: 50%;
    background: var(--color-secondary);
}

@media (max-width: 640px) {
    .lp-promo-tiles,
    .lp-promo-tile { height: 40px; }
    .lp-promo-tile { flex-basis: 40px; }
    .lp-promo-art-wrap { max-width: 400px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-promo-art,
    .lp-promo-art:hover { transform: none; transition: none; }
    .lp-promo-status.is-live .lp-promo-status-dot { animation: none; }
}