/* ==========================================================================
   Tema "festa" — categoria da loja com identidade própria (Unidunitêlie).

   Carrega SÓ na página de uma categoria com tema festa e nos produtos dela.
   As cores vêm da categoria cadastrada no ERP, por variáveis no style do
   container (--festa-1/2/3); sem elas valem os padrões abaixo, tirados do logo
   da Unidunitêlie (nuvem rosa sobre tie-dye rosa, lilás, amarelo e verde-água).
   ========================================================================== */

/* Fredoka: arredondada, de festa. Servida pelo próprio site, como Sora/Roboto
   (ver fontes.css) — e só baixada nas páginas que usam o tema. */
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('/fontes/fredoka-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.tema-festa,
.produto-festa {
    --festa-1: #ec4f8f;          /* principal: o rosa da nuvem */
    --festa-2: #8b5cf6;          /* secundária: lilás do tie-dye */
    --festa-3: #ffc93c;          /* destaque: amarelo das estrelas */
    --festa-4: #34c3b5;          /* verde-água do letreiro (fixo) */
    --festa-tinta: #3a2350;      /* texto escuro, para o fundo claro */
    --festa-fundo: #fff7fb;
    --fonte-festa: 'Fredoka', 'Sora', sans-serif;
}

/* ---------- a seção inteira fica clara e colorida ---------- */

.secao-corte.tema-festa {
    background:
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--festa-1) 18%, transparent), transparent 40%),
        radial-gradient(circle at 92% 30%, color-mix(in srgb, var(--festa-3) 22%, transparent), transparent 38%),
        radial-gradient(circle at 20% 85%, color-mix(in srgb, var(--festa-4) 16%, transparent), transparent 40%),
        radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--festa-2) 16%, transparent), transparent 42%),
        var(--festa-fundo);
    color: var(--festa-tinta);
}

.tema-festa .cc-link { color: var(--festa-1); }

/* ---------- hero: nuvem com o logo sobre tie-dye ---------- */

.festa-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 26px;
    padding: 46px 24px 40px;
    border-radius: 32px;
    text-align: center;
    background:
        radial-gradient(circle at 12% 22%, var(--festa-1), transparent 46%),
        radial-gradient(circle at 88% 18%, var(--festa-3), transparent 42%),
        radial-gradient(circle at 78% 88%, var(--festa-2), transparent 48%),
        radial-gradient(circle at 18% 92%, var(--festa-4), transparent 44%),
        radial-gradient(circle at 50% 50%, #ffd6ea, #f9b4d6);
    box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--festa-1) 70%, transparent);
}

/* Nuvem branca: três círculos + base — o mesmo desenho do logo, em CSS. */
.festa-nuvem {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 46px 22px;
    background: #fff;
    border-radius: 60px;
    box-shadow: 0 10px 0 -2px color-mix(in srgb, var(--festa-1) 30%, #fff);
}

.festa-nuvem::before,
.festa-nuvem::after {
    content: "";
    position: absolute;
    background: #fff;
    border-radius: 50%;
    z-index: -1;
}

.festa-nuvem::before { width: 46%; aspect-ratio: 1; top: -26%; left: 12%; }
.festa-nuvem::after  { width: 38%; aspect-ratio: 1; top: -18%; right: 10%; }

.festa-logo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px var(--festa-1);
}

.festa-titulo {
    margin: 4px 0 0;
    font-family: var(--fonte-festa);
    font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.05;
    color: var(--festa-1);
}

.festa-assinatura {
    display: inline-block;
    margin: 0;
    padding: 3px 14px;
    border-radius: 999px;
    font-family: var(--fonte-festa);
    font-weight: 600;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(90deg, var(--festa-4), var(--festa-2));
}

.festa-descricao {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 22px auto 0;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 1px 2px rgba(58, 35, 80, .45);
}

.festa-instagram {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--festa-1);
    font-family: var(--fonte-festa);
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s ease;
}

.festa-instagram:hover { transform: scale(1.05) rotate(-1deg); }

/* ---------- estrelinhas e confete ---------- */

.festa-enfeites { position: absolute; inset: 0; pointer-events: none; }

.festa-enfeites span {
    position: absolute;
    display: block;
    animation: festa-flutua 6s ease-in-out infinite;
}

/* Estrela de 4 pontas, como as do logo. */
.festa-enfeites .estrela {
    width: 18px;
    height: 18px;
    background: #fff;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: .9;
}

.festa-enfeites .confete {
    width: 10px;
    height: 16px;
    border-radius: 3px;
}

.festa-enfeites span:nth-child(1)  { top: 12%; left: 6%;  animation-delay: 0s; }
.festa-enfeites span:nth-child(2)  { top: 20%; right: 8%; animation-delay: .8s; transform: scale(1.4); }
.festa-enfeites span:nth-child(3)  { bottom: 18%; left: 12%; animation-delay: 1.6s; }
.festa-enfeites span:nth-child(4)  { bottom: 12%; right: 14%; animation-delay: 2.4s; transform: scale(.8); }
.festa-enfeites span:nth-child(5)  { top: 8%; left: 38%; animation-delay: 3s; transform: scale(.7); }
.festa-enfeites span:nth-child(6)  { top: 30%; left: 18%; background: var(--festa-3); rotate: 20deg; animation-delay: .4s; }
.festa-enfeites span:nth-child(7)  { top: 14%; right: 24%; background: var(--festa-4); rotate: -30deg; animation-delay: 1.2s; }
.festa-enfeites span:nth-child(8)  { bottom: 26%; right: 6%; background: #fff; rotate: 45deg; animation-delay: 2s; }
.festa-enfeites span:nth-child(9)  { bottom: 8%; left: 30%; background: var(--festa-2); rotate: -15deg; animation-delay: 2.8s; }
.festa-enfeites span:nth-child(10) { top: 55%; left: 4%; background: var(--festa-1); rotate: 60deg; animation-delay: 3.6s; }

@keyframes festa-flutua {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
    .festa-enfeites span { animation: none; }
}

/* ---------- abas de categoria nesta página ---------- */

.tema-festa .loja-categorias a {
    background: #fff;
    border-color: color-mix(in srgb, var(--festa-1) 25%, #fff);
    color: var(--festa-tinta);
}

.tema-festa .loja-categorias a.ativo {
    background: var(--festa-1);
    border-color: var(--festa-1);
    color: #fff;
}

/* ---------- cards ---------- */

.tema-festa .loja-card {
    background: #fff;
    border: 2px solid color-mix(in srgb, var(--festa-1) 22%, #fff);
    border-radius: 24px;
    color: var(--festa-tinta);
}

.tema-festa .loja-card:hover {
    transform: translateY(-6px) rotate(-.6deg);
    border-color: var(--festa-1);
    box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--festa-1) 60%, transparent);
}

.tema-festa .loja-card:nth-child(even):hover { transform: translateY(-6px) rotate(.6deg); }

.tema-festa .loja-card-foto {
    background: color-mix(in srgb, var(--festa-3) 12%, #fff);
}

.tema-festa .loja-card-nome {
    font-family: var(--fonte-festa);
    font-weight: 600;
    font-size: 1.08rem;
}

.tema-festa .loja-card-preco { color: var(--festa-1); }
.tema-festa .loja-card-preco small { color: color-mix(in srgb, var(--festa-tinta) 55%, #fff); }
.tema-festa .conta-tag { background: color-mix(in srgb, var(--festa-2) 14%, #fff); color: var(--festa-2); }

/* ---------- faixa da coleção na página do produto ---------- */

.festa-faixa {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-family: var(--fonte-festa);
    font-weight: 600;
    background: linear-gradient(90deg, var(--festa-1), var(--festa-2) 60%, var(--festa-4));
    box-shadow: 0 8px 20px -10px var(--festa-1);
}

.festa-faixa img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
}

.festa-faixa small { opacity: .85; font-weight: 500; }
.festa-faixa i { margin-left: auto; }

/* ---------- página do produto da coleção: o resto da página é SyncLaser, mas
   o que pede ação (botão, total, nome) fala a língua da marca ---------- */

.produto-festa .loja-nome { font-family: var(--fonte-festa); font-weight: 700; }
.produto-festa .cc-preco-total strong { color: var(--festa-1); }
.produto-festa .cc-continuar {
    background: linear-gradient(90deg, var(--festa-1), var(--festa-2));
    color: #fff;
}
.produto-festa .cc-continuar:hover { filter: brightness(1.08); }
.produto-festa .loja-faixas { border-color: color-mix(in srgb, var(--festa-1) 45%, transparent); }
.produto-festa .cc-link { color: var(--festa-1); }