/* ═══════════════════════════════════════
   contact.css  —  Sireya Systems
   Consistente con el sistema de variables de index.html
═══════════════════════════════════════ */

:root {
    --bg:       #09090b;
    --bg-card:  #18181b;
    --border:   #27272a;
    --accent:   #22d3ee;
    --text:     #f4f4f5;
    --text-muted: #a1a1aa;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background 0.3s, color 0.3s;
}

/* ── LIGHT MODE ── */
body.light {
    --bg:       #f8fafc;
    --bg-card:  #ffffff;
    --border:   #e2e8f0;
    --text:     #0f172a;
    --text-muted: #64748b;
    background: var(--bg);
    color: var(--text);
}

body.light nav {
    background: rgba(248,250,252,0.85) !important;
    border-color: #e2e8f0 !important;
}
body.light .contact-hero    { background: linear-gradient(135deg, #e2e8f0, #f1f5f9) !important; }
body.light .bg-zinc-900     { background: #f1f5f9 !important; }
body.light .bg-zinc-950     { background: #ffffff !important; }
body.light .bg-zinc-800     { background: #e2e8f0 !important; }
body.light .border-zinc-800 { border-color: #e2e8f0 !important; }
body.light .border-zinc-700 { border-color: #cbd5e1 !important; }
body.light .text-zinc-400   { color: #64748b !important; }
body.light .text-zinc-500   { color: #94a3b8 !important; }
body.light .text-zinc-600   { color: #94a3b8 !important; }
body.light .text-white      { color: #0f172a !important; }
body.light footer           { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
body.light .form-input      { color: #0f172a !important; }

/* ── HERO ── */
.contact-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1a2640 100%);
}

/* ── NAV LINKS ── */
.nav-link {
    transition: color 0.2s, transform 0.2s;
}
.nav-link:hover {
    color: #22d3ee;
    transform: translateY(-2px);
}

/* ── MOBILE MENU ── */
#mobile-menu {
    display: none;
}
#mobile-menu.open {
    display: block;
}

/* ── FORM INPUTS ── */
.form-input {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

.form-input::placeholder {
    color: #52525b;
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
    outline: none;
}

select.form-input option {
    background: #18181b;
    color: #f4f4f5;
}

/* ── STATUS MESSAGES ── */
#form-status.success {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}
#form-status.error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
#form-status.loading {
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: #67e8f9;
}

/* ── SUBMIT BUTTON LOADING STATE ── */
#submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
}

/* ── SPINNER ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block;
    width: 1em; height: 1em;
    border: 2px solid rgba(0,0,0,0.3);
    border-top-color: #09090b;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}