/* =============================================
   ECOROOF — GLOBAL STYLES
   Archivo unificado para todos los estilos compartidos
   ============================================= */

/* BASE */
body {
    background-color: #F3FBF6;
    color: #0f172a;
    overflow-x: hidden;
    background-image:
        radial-gradient(circle at 20% 10%, rgba(0, 200, 116, 0.16), transparent 42%),
        radial-gradient(circle at 80% 30%, rgba(46, 229, 157, 0.14), transparent 40%),
        linear-gradient(rgba(2, 132, 68, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 68, 0.07) 1px, transparent 1px);
    background-size: auto, auto, 46px 46px, 46px 46px;
}

/* GLASS CARDS */
.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 200, 116, 0.18);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

.glass-card-strong {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 200, 116, 0.22);
    box-shadow: 0 18px 55px rgba(2, 6, 23, 0.10);
}

/* GLOW BORDER EFFECT */
.glow-border {
    position: relative;
    transition: all 0.4s ease;
}
.glow-border:hover {
    border-color: rgba(0, 200, 116, 0.55);
    box-shadow: 0 0 40px -10px rgba(0, 200, 116, 0.25);
    transform: translateY(-5px);
}

/* TEXT GRADIENT */
.text-gradient {
    background: linear-gradient(135deg, #0f172a 0%, #00C874 45%, #2EE59D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* CUSTOM CURSOR (Desktop only) */
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #00C874;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(0, 200, 116, 0.55);
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}

/* ANIMATIONS */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 10s infinite;
}

@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

/* SCROLLBAR */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }