/* ============================================
   Variables CSS - Lux One Builders
   Design Tokens para linea de construccion
   ============================================ */

:root {
    /* ---- BUILDERS: PRIMARY (Gold/Champagne) ---- */
    --builders-primary: #ff914d;
    --builders-primary-dark: #e67a35;
    --builders-primary-light: #ffa66b;
    --builders-primary-rgb: 255, 145, 77;

    /* BUILDERS - ACCENT (Pure Black for titles/subtitles) */
    --builders-accent: #000000;
    --builders-accent-light: #333333;
    --builders-accent-hover: #111111;
    --builders-accent-rgb: 0, 0, 0;

    /* ---- BUILDERS: SURFACES ---- */
    --builders-surface: #F8F6F0;
    --builders-surface-dark: #12261C;
    --builders-border: #E8E0D0;
    --builders-border-light: #F0EBE0;

    /* ---- BUILDERS: GRADIENTS ---- */
    --builders-gradient-primary: linear-gradient(135deg, #ff914d 0%, #e67a35 100%);
    --builders-gradient-accent: linear-gradient(135deg, #000000 0%, #333333 100%);
    --builders-gradient-hero: linear-gradient(160deg, #0A0E27 0%, #000000 100%);
    --builders-gradient-cta: linear-gradient(135deg, #000000 0%, #ff914d 100%);
    --builders-gradient-overlay: linear-gradient(180deg, rgba(10,14,39,0.7) 0%, rgba(26,58,42,0.85) 100%);

    /* ---- BUILDERS: SHADOWS ---- */
    --builders-shadow-sm: 0 2px 8px rgba(201, 169, 97, 0.1);
    --builders-shadow-md: 0 4px 20px rgba(201, 169, 97, 0.15);
    --builders-shadow-lg: 0 8px 40px rgba(201, 169, 97, 0.2);
    --builders-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
    --builders-shadow-card-hover: 0 12px 40px rgba(201, 169, 97, 0.18);
    --builders-shadow-glow: 0 0 20px rgba(201, 169, 97, 0.3);

    /* ---- BUILDERS: BORDERS ---- */
    --builders-radius-sm: 6px;
    --builders-radius-md: 12px;
    --builders-radius-lg: 20px;
    --builders-radius-full: 9999px;
}

/* ============================================
   Scroll Animations (used by builders.js)
   .builders-animate = initial hidden state
   .builders-visible = triggered by IntersectionObserver
   ============================================ */
.builders-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.builders-animate.builders-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Builders Shared Components
   ============================================ */

/* Breadcrumbs (Global styling for all Builders headers) */
.builders-breadcrumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px;
    font-size: 14px;
    font-weight: 500;
}

.builders-page .builders-breadcrumbs a,
.builders-breadcrumbs a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.builders-page .builders-breadcrumbs a:hover,
.builders-breadcrumbs a:hover {
    color: var(--builders-primary) !important;
}

.builders-page .builders-breadcrumbs span,
.builders-breadcrumbs span {
    color: rgba(255, 255, 255, 0.4) !important;
}