/* ── Base reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: "Rajdhani", sans-serif;
      background-color: #0e0e0e;
      color: #c8d0d8;
      overflow-x: hidden;
    }

    /* ── Noise texture overlay (simulates industrial grit) ── */
    body::before {
      content: "";
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.04;
      pointer-events: none;
      z-index: 9999;
    }

    /* ── Gear animation ── */
    @keyframes spin-cw  { to { transform: rotate(360deg); } }
    @keyframes spin-ccw { to { transform: rotate(-360deg); } }
    .gear-cw  { animation: spin-cw  12s linear infinite; }
    .gear-ccw { animation: spin-ccw 9s  linear infinite; }

    /* ── Ember pulse for status dot ── */
    @keyframes ember-pulse {
      0%, 100% { box-shadow: 0 0 4px 2px #ff6b1a88; }
      50%       { box-shadow: 0 0 14px 6px #ff6b1acc; }
    }
    .status-online { animation: ember-pulse 2s ease-in-out infinite; }

    /* ── Copper border glow ── */
    .copper-glow { box-shadow: 0 0 0 1px #b87333, 0 0 20px #b8733330; }

    /* ── Rivet decorations ── */
    .rivets {
      position: relative;
    }
    .rivets::before, .rivets::after {
      content: "●";
      font-size: 6px;
      color: #b87333;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .rivets::before { left: 8px; }
    .rivets::after  { right: 8px; }

    /* ── Section divider ── */
    .pipe-divider {
      height: 2px;
      background: linear-gradient(90deg, transparent, #b87333, #ff6b1a, #b87333, transparent);
    }

    /* ── Step number badge ── */
    .step-badge {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #b87333, #8a5520);
      display: flex; align-items: center; justify-content: center;
      font-family: "Bebas Neue", cursive;
      font-size: 1.1rem;
      color: #0e0e0e;
      flex-shrink: 0;
      border: 1px solid #d4935a;
    }

    /* ── Card hover effect ── */
    .steam-card {
      background: linear-gradient(145deg, #1a1a1a, #131313);
      border: 1px solid #434343;
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    }
    .steam-card:hover {
      border-color: #b87333;
      box-shadow: 0 0 24px #b8733330, 0 4px 20px #00000080;
      transform: translateY(-2px);
    }

    /* ── Hero background ── */
    .hero-bg {
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, #b8733318 0%, transparent 70%),
        radial-gradient(ellipse 40% 40% at 80% 30%, #ff6b1a12 0%, transparent 60%),
        linear-gradient(180deg, #111 0%, #0e0e0e 100%);
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: #1a1a1a; }
    ::-webkit-scrollbar-thumb { background: #434343; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #b87333; }

    /* ── Fade-in on load ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-up { animation: fadeUp 0.7s ease both; }
    .delay-1 { animation-delay: 0.15s; }
    .delay-2 { animation-delay: 0.30s; }
    .delay-3 { animation-delay: 0.45s; }
    .delay-4 { animation-delay: 0.60s; }

    /* ── Responsive nav ── */
    #mobile-menu { display: none; }
    #mobile-menu.open { display: flex; }


    /* Color para navegadores modernos (Chrome, Edge, Firefox, Safari) */
::selection {
    background-color: rgba(184, 115, 51, 0.6); /* El color cobre de Create */
    color: #ffffff;            /* Color del texto al ser seleccionado */
}

/* Específico para Firefox (versiones antiguas) */
::-moz-selection {
    background-color: #b87333;
    color: #ffffff;
}