/* =========================================================
   🍂 Octubre tierno — decoración suave para la página principal
   Solo se activa en octubre (js/october.js agrega .october-theme).
   Paleta: durazno, crema, salvia — acorde a la marca.
   ========================================================= */

.october-theme {
    --oct-peach: hsl(24, 70%, 84%);
    --oct-peach-deep: hsl(20, 55%, 72%);
    --oct-cream: hsl(36, 60%, 96%);
    --oct-sage: hsl(95, 18%, 68%);
    --oct-lilac: hsl(275, 30%, 88%);
}

/* ---------- Cinta de anuncio (bajo el menú) ---------- */
.oct-ribbon {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, hsl(31, 44%, 96%), hsl(24, 70%, 92%), hsl(275, 35%, 94%), hsl(24, 70%, 92%), hsl(31, 44%, 96%));
    background-size: 300% 100%;
    animation: oct-ribbon-flow 14s ease-in-out infinite;
    border-bottom: 1px solid hsl(24, 50%, 88%);
    color: var(--color-fg, #4a3c33);
    font-size: 13px;
    text-align: center;
    padding: 9px 44px;
    line-height: 1.4;
}
.oct-ribbon a {
    color: hsl(18, 45%, 52%);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed hsl(18, 45%, 70%);
    margin-left: 6px;
    white-space: nowrap;
}
.oct-ribbon a:hover { color: hsl(18, 55%, 42%); }
.oct-ribbon .oct-mini-pumpkin {
    display: inline-block;
    width: 16px; height: 16px;
    vertical-align: -3px;
    margin-right: 6px;
    animation: oct-wiggle 3.2s ease-in-out infinite;
}
.oct-ribbon-close {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-muted, #8b7b70); font-size: 16px; line-height: 1; padding: 4px;
}

/* ---------- Héroe: decoración flotante ---------- */
.october-theme #inicio { position: relative; overflow: hidden; }
.october-theme #inicio > .max-w-7xl { position: relative; z-index: 1; }

.oct-hero-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.oct-float {
    position: absolute;
    opacity: .55;
    animation: oct-float 7s ease-in-out infinite;
}
.oct-float svg { width: 100%; height: 100%; display: block; }

/* Hojitas que caen muy despacio */
.oct-leaf {
    position: absolute;
    top: -40px;
    width: 18px; height: 18px;
    opacity: 0;
    animation: oct-leaf-fall linear infinite;
}
.oct-leaf svg { width: 100%; height: 100%; display: block; }

/* Calabacita junto a la foto principal */
.oct-photo-pumpkin {
    position: absolute;
    top: -22px; left: -18px;
    width: 64px; height: 64px;
    z-index: 2;
    filter: drop-shadow(0 6px 10px hsla(25, 30%, 40%, .15));
    animation: oct-wiggle 4s ease-in-out infinite;
    pointer-events: none;
}

/* Sello suave sobre el título */
.oct-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 500;
    color: hsl(18, 40%, 50%);
    background: hsla(24, 70%, 90%, .75);
    border: 1px solid hsl(24, 55%, 86%);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    animation: oct-fade-in .9s ease-out both;
}
.oct-badge svg { width: 14px; height: 14px; }

/* ---------- Animaciones ---------- */
@keyframes oct-ribbon-flow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes oct-wiggle {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50%      { transform: rotate(5deg) translateY(-3px); }
}
@keyframes oct-float {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-14px) rotate(4deg); }
}
@keyframes oct-leaf-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    10%  { opacity: .55; }
    50%  { transform: translate(40px, 50vh) rotate(160deg); }
    90%  { opacity: .45; }
    100% { transform: translate(-20px, 105vh) rotate(320deg); opacity: 0; }
}
@keyframes oct-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
    .oct-ribbon { font-size: 12px; padding: 8px 36px; }
    .oct-float.oct-hide-mobile { display: none; }
    .oct-photo-pumpkin { width: 48px; height: 48px; top: -16px; left: -8px; }
}

@media (prefers-reduced-motion: reduce) {
    .oct-ribbon, .oct-ribbon *, .oct-float, .oct-leaf, .oct-photo-pumpkin, .oct-badge { animation: none !important; }
    .oct-leaf { display: none; }
}