/* Footer Lambe-lambe */
.site-footer {
    margin-top: 60px;
    background: var(--ink-black);
    color: var(--paper-bg);
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 4px double var(--clay-red);
}

.footer-content {
    padding: 40px 20px;
    position: relative;
    z-index: 2;
}

.lambe-lambe-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: repeating-linear-gradient(90deg, var(--clay-red), var(--clay-red) 20px, var(--sun-yellow) 20px, var(--sun-yellow) 40px, var(--cactus-green) 40px, var(--cactus-green) 60px);
}

.btn-sorteio {
    margin-top: 15px;
    background: var(--sun-yellow);
    color: var(--ink-black);
    border: 2px solid var(--paper-bg);
    padding: 10px 20px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--clay-red);
    transform: rotate(-2deg);
    transition: transform 0.2s;
}

.btn-sorteio:hover {
    transform: scale(1.1) rotate(2deg);
}

/* Sorteio Modal */
#sorteio-modal {
    display: flex !important;
    /* Override inline style when active class added via JS? No, inline style is display:none initially. We'll toggle it. */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

#sorteio-modal.active {
    visibility: visible;
    opacity: 1;
}

#sorteio-modal .woodcut-card {
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#sorteio-modal.active .woodcut-card {
    transform: scale(1);
}