/* =============================================
   Distribuidora Fluviales — Shared Design System
   ============================================= */

:root {
    --blue:   #0072BC;
    --cyan:   #00AEEF;
    --coral:  #FF6F61;
    --white:  #FFFFFF;
    --slate:  #F8F9FA;
    --dark:   #1A2A3A;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Glassmorphism card */
.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px rgba(0, 114, 188, 0.08);
}

/* Glassmorphism on dark */
.glass-dark {
    background: rgba(0, 30, 60, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Sticky nav glass */
.nav-glass {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0, 114, 188, 0.08);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* WhatsApp FAB pulse */
@keyframes fab-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    50%       { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
}
.fab-whatsapp {
    animation: fab-pulse 2.4s ease-in-out infinite;
}

/* Product card hover lift */
.product-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0, 114, 188, 0.14);
}

/* Coral CTA button */
.btn-coral {
    background: var(--coral);
    color: #fff;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-coral:hover {
    background: #e85d50;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 111, 97, 0.4);
}
.btn-coral:active { transform: translateY(0); }

/* Blue CTA button */
.btn-blue {
    background: var(--blue);
    color: #fff;
    transition: background 0.2s, transform 0.15s;
}
.btn-blue:hover { background: #005fa3; transform: translateY(-1px); }

/* Cart panel transition */
#cart-panel {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Parallax hero */
.parallax-hero {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* Sector badge */
.sector-badge {
    border: 2px solid rgba(0, 114, 188, 0.15);
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.sector-badge:hover {
    border-color: var(--cyan);
    background: rgba(0, 174, 239, 0.08);
    transform: translateY(-3px);
}

/* Urgency blink */
@keyframes urgency-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}
.urgency-dot { animation: urgency-blink 1.4s ease-in-out infinite; }