/* Unboxforyou Premium Design System CSS Variables & Utility Styles
   Extracted from Google Stitch UI Kit / Homepage Mockups */

:root {
    /* Fonts */
    --font-display: 'Space Grotesk', 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Palette colors */
    --unbox-yellow: #FFC107;
    --unbox-yellow-light: #FFD54F;
    --unbox-yellow-glow: rgba(255, 193, 7, 0.4);
    --unbox-red: #E53935;
    --unbox-red-glow: rgba(229, 57, 53, 0.2);
    
    --bg-start: #F7F7F7;
    --bg-end: #F1F1F1;
    --bg-tertiary: #EBEBEB;
    
    --text-primary: #171c1f;
    --text-secondary: #45464d;
    --text-muted: #76777d;
    
    --surface: #f6fafe;
    --surface-container-high: #e4e9ed;
    
    --border-glass: rgba(255, 255, 255, 0.5);
    --bg-glass: rgba(255, 255, 255, 0.4);
}

/* Neomorphic Styles */
.neo-convex {
    box-shadow: 10px 10px 20px #d1d9e6, -10px -10px 20px #ffffff;
}

.neo-convex-hover {
    transition: all 0.3s ease-in-out;
}
.neo-convex-hover:hover {
    box-shadow: 12px 12px 24px #c8d0de, -12px -12px 24px #ffffff;
    transform: translateY(-2px);
}

.neo-convex-active:active {
    box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff;
    transform: translateY(1px);
}

.neo-concave {
    box-shadow: inset 10px 10px 20px #d1d9e6, inset -10px -10px 20px #ffffff;
}

/* Glassmorphism Styles */
.neo-glass {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08);
}

/* Specific Cards & Components */
.neo-card {
    background: #F4F4F4;
    border-radius: 24px;
    box-shadow: 12px 12px 24px #d1d5d9, -12px -12px 24px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.neo-card-convex {
    background: linear-gradient(145deg, #ffffff, #dcdcdc);
    border-radius: 24px;
    box-shadow: 12px 12px 24px #d1d5d9, -12px -12px 24px #ffffff;
}

.neo-button {
    background: #F4F4F4;
    box-shadow: 4px 4px 8px #d1d5d9, -4px -4px 8px #ffffff;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.neo-button:active {
    box-shadow: inset 4px 4px 8px #d1d5d9, inset -4px -4px 8px #ffffff;
}

/* Inset button — used in contacto.html and loja.html */
.neo-button-inset {
    background: #F4F4F4;
    box-shadow: inset 3px 3px 7px #d1d5d9, inset -3px -3px 7px #ffffff;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.neo-button-inset:hover {
    box-shadow: inset 4px 4px 9px #c8ccd0, inset -4px -4px 9px #ffffff;
}
.neo-button-inset:active {
    box-shadow: 3px 3px 7px #d1d5d9, -3px -3px 7px #ffffff;
}

/* Buttons custom classes */
.btn-primary-gradient {
    background: linear-gradient(135deg, var(--unbox-yellow-light), var(--unbox-yellow));
    box-shadow: 0 4px 15px var(--unbox-yellow-glow), inset 2px 2px 5px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    color: #000;
}
.btn-primary-gradient:hover {
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.6), inset 2px 2px 5px rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

.btn-danger-custom {
    background-color: var(--unbox-red);
    box-shadow: 0 4px 15px var(--unbox-red-glow);
    transition: all 0.3s ease;
    color: #fff;
}
.btn-danger-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229, 57, 53, 0.4);
}

/* Ambient Lights — fixed to viewport to avoid iOS horizontal scroll */
.ambient-light-yellow {
    position: fixed;
    top: -10%;
    right: -10%;
    width: min(600px, 80vw);
    height: min(600px, 80vw);
    background: radial-gradient(circle, rgba(255, 213, 79, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.ambient-light-red {
    position: fixed;
    bottom: -10%;
    left: -10%;
    width: min(500px, 70vw);
    height: min(500px, 70vw);
    background: radial-gradient(circle, rgba(229, 57, 53, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

/* Animations */
.float-anim {
    animation: float 6s ease-in-out infinite;
}
.float-anim-delay-1 {
    animation: float 6s ease-in-out infinite 1s;
}
.float-anim-delay-2 {
    animation: float 6s ease-in-out infinite 2s;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

.pulse-dot {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
}

.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.glass-panel { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.8); }
.shadow-glass { box-shadow: 10px 10px 30px rgba(0,0,0,0.08), -10px -10px 30px rgba(255,255,255,0.8); }


.neo-base { background: #F7F7F7; box-shadow: 10px 10px 20px #d1d9e6, -10px -10px 20px #ffffff; border-radius: 24px; }
.neo-inset { background: #F7F7F7; box-shadow: inset 5px 5px 10px #d1d9e6, inset -5px -5px 10px #ffffff; }
.shadow-glow-yellow { box-shadow: 0 0 15px rgba(255, 193, 7, 0.4); }

/* Mobile sidebar filter collapse */
.sidebar-filter-mobile-closed { max-height: 0; overflow: hidden; }
.sidebar-filter-mobile-open { max-height: 9999px; }

/* Ensure no element causes horizontal scroll */
.overflow-x-safe {
    overflow-x: clip;
    max-width: 100vw;
}