/* ═══════════════════════════════════════════════════════════
   guia-de-vocabulario-decor.css
   Ajuste exclusivo desta página em cima do decor-elements.css
   compartilhado: aumenta a opacidade e reposiciona os elementos
   para o meio da página, já que aqui eles ficavam encobertos.
   Não altera guia-de-vocabulario.css nem decor-elements.css —
   só sobrescreve, carregando por último.
   ═══════════════════════════════════════════════════════════ */

/* Reposiciona para o meio vertical da página + opacidade bem mais alta */
.decor-circle-purple-tl {
    top: 38%;
    left: -90px;
    opacity: 0.16;
}

.decor-dots-tl {
    top: 34%;
    left: 60px;
    opacity: 0.55;
}

.decor-stripes-gold-tr {
    top: 30%;
    right: -60px;
    opacity: 0.32;
}

.decor-ring-purple-tr {
    top: 46%;
    right: 40px;
    opacity: 0.26;
}

.decor-stripes-purple-bl {
    bottom: 30%;
    left: -60px;
    opacity: 0.28;
}

.decor-dots-bl {
    bottom: 22%;
    left: 150px;
    opacity: 0.5;
}

.decor-ring-gold-br {
    bottom: -70px;
    right: -70px;
    opacity: 0.28;
}

.decor-dots-br {
    bottom: 8%;
    right: 80px;
    opacity: 0.5;
}

/* Novos elementos, centrados de fato no meio da página */
.decor-ring-gold-mid {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 30px solid var(--color-gold);
    opacity: 0.14;
    transform: translate(-50%, -50%);
}

.decor-dots-mid {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130px;
    height: 100px;
    background-image: radial-gradient(var(--color-primary) 3px, transparent 3.5px);
    background-size: 20px 20px;
    opacity: 0.35;
    transform: translate(60px, -140px) rotate(-6deg);
}

[data-theme="dark"] .decor-ring-gold-mid { opacity: 0.24; }
[data-theme="dark"] .decor-dots-mid { opacity: 0.5; }

@media (max-width: 640px) {
    .decor-ring-gold-mid { width: 220px; height: 220px; border-width: 22px; }
    .decor-dots-mid { display: none; }
}