/* Estilos y efectos GLOBALES de El rincón del chascao: los cargan TODAS las páginas (home, fichas, /tienda, /reels y las que se creen). */
body { font-family: 'Poppins', sans-serif; }
h1, h2, h3, .font-heading { font-family: 'Montserrat', sans-serif; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 4s ease-in-out infinite; }
body.modo-dormido { filter: hue-rotate(90deg) contrast(120%); animation: temblor 0.2s infinite; }
@keyframes temblor { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 127, 0.4); } 50% { box-shadow: 0 0 30px rgba(255, 204, 0, 0.7); } }
.glow-box { animation: pulse-glow 3s infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.animate-nudge { display: inline-block; animation: nudge 1s ease-in-out infinite; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Cursor plátano predeterminado */
html, body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><text y='22' font-size='22'>🍌</text></svg>"), auto;
}

/* Partículas flotantes que siguen al cursor */
.particula-cursor {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 1.2rem;
    animation: flotarYDesaparecer 0.8s ease-out forwards;
    user-select: none;
}

@keyframes flotarYDesaparecer {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(var(--dr));
    }
}

/* Botón de compra que se escapa (Modo Rata) */
.btn-rata {
    transition: transform 0.15s ease-out;
}

/* Pantalla de camuflaje en el trabajo (Modo Pánico) */
#pantalla-panico {
    display: none;
}
#pantalla-panico.activo {
    display: flex;
}

/* BORDE RGB / NEON STROBO AL PRODUCTO ESTRELLA */
@keyframes neonStrobo {
    0% { border-color: #ff007f; box-shadow: 0 0 15px rgba(255, 0, 127, 0.4); }
    33% { border-color: #ffcc00; box-shadow: 0 0 15px rgba(255, 204, 0, 0.4); }
    66% { border-color: #7928ca; box-shadow: 0 0 15px rgba(121, 40, 202, 0.4); }
    100% { border-color: #ff007f; box-shadow: 0 0 15px rgba(255, 0, 127, 0.4); }
}

.producto-estrella-neon {
    animation: neonStrobo 3s infinite linear !important;
    border-width: 2px !important;
}

/* EFECTO 3D TILT EN TARJETAS */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

/* Banners animados del home: gradiente en movimiento con los colores de la marca, brillo que barre el botón y pulso de luz */
@keyframes gradienteMovil { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes barrido { 0% { transform: translateX(-130%) skewX(-20deg); } 55%, 100% { transform: translateX(230%) skewX(-20deg); } }
.btn-brillo { position: relative; overflow: hidden; }
.btn-brillo::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: translateX(-130%) skewX(-20deg); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
        .btn-brillo::after { animation: barrido 3s ease-in-out infinite; }
}

/* Transición entre páginas (View Transitions): sale con el temblor y el hue-rotate del modo dormido; entra con un pop */
@keyframes salidaGamberra { to { opacity: 0; filter: hue-rotate(90deg) contrast(120%); } }
@keyframes entradaPop { from { opacity: 0; transform: scale(1.06); filter: hue-rotate(-90deg) contrast(120%); } to { opacity: 1; transform: scale(1); filter: none; } }
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: temblor 0.2s ease-in-out 2, salidaGamberra 0.4s ease-in both; }
    ::view-transition-new(root) { animation: entradaPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
}

/* Hover de tarjetas y reels: en vez de oscurecer, la imagen se ilumina y el borde resplandece con los colores de la marca */
.luz-hover { transition: box-shadow 0.35s ease; }
.luz-hover img { transition: filter 0.35s ease, transform 0.6s ease; }
.group:hover .luz-hover { box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.9), 0 0 26px rgba(255, 0, 127, 0.65), 0 0 44px rgba(255, 204, 0, 0.35); }
.group:hover .luz-hover img { filter: brightness(1.18) saturate(1.2); transform: scale(1.04); }
.luz-play span { opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease; }
.group:hover .luz-play span { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 26px rgba(255, 204, 0, 0.9)); }