/* =========================================================
   4i FORENSICS — Sistema de Diseño
   Paleta: Obsidiana / Grafito / Platino / Acento Dorado tenue
   ========================================================= */

:root {
    --obsidian: #0a0c10;
    --graphite: #14171d;
    --carbon:   #1c2028;
    --platinum: #d4d6db;
    --accent:   #c9a961;   /* Dorado tenue, "lujo silencioso" */
    --accent-soft: rgba(201, 169, 97, 0.12);
}

/* Colores personalizados (fallback Tailwind CDN) */
.bg-obsidian { background-color: var(--obsidian) !important; }
.bg-graphite\/40 { background-color: rgba(20, 23, 29, 0.4); }
.bg-obsidian\/70 { background-color: rgba(10, 12, 16, 0.7); }
.bg-obsidian\/95 { background-color: rgba(10, 12, 16, 0.95); }
.text-platinum { color: var(--platinum); }
.text-accent { color: var(--accent); }
.bg-accent { background-color: var(--accent); }
.border-accent\/40 { border-color: rgba(201, 169, 97, 0.4); }
.text-accent\/80 { color: rgba(201, 169, 97, 0.8); }
.bg-accent\/40 { background-color: rgba(201, 169, 97, 0.4); }
.hover\:bg-accent:hover { background-color: var(--accent); }
.hover\:text-accent:hover { color: var(--accent); }
.hover\:border-accent:hover { border-color: var(--accent); }
.hover\:text-obsidian:hover { color: var(--obsidian); }

/* Tipografía */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--obsidian);
    color: var(--platinum);
    -webkit-font-smoothing: antialiased;
}
.font-serif { font-family: 'Cormorant Garamond', Georgia, serif; }

/* Scroll suave */
html { scroll-behavior: smooth; }

/* Selección personalizada */
::selection {
    background: var(--accent);
    color: var(--obsidian);
}

/* Scrollbar minimalista */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb { background: var(--carbon); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* =================== HERO =================== */
.hero {
    background:
        radial-gradient(ellipse at top, rgba(201, 169, 97, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(20, 23, 29, 0.8) 0%, var(--obsidian) 70%);
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Animación entrada */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* =================== SOLUTION CARDS =================== */
.solution-card {
    position: relative;
    padding: 2.5rem 2rem;
    background: linear-gradient(180deg, rgba(28, 32, 40, 0.4) 0%, rgba(20, 23, 29, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.4s ease;
    overflow: hidden;
}
.solution-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.6s ease;
}
.solution-card:hover {
    border-color: rgba(201, 169, 97, 0.3);
    transform: translateY(-4px);
    background: linear-gradient(180deg, rgba(28, 32, 40, 0.7) 0%, rgba(20, 23, 29, 0.4) 100%);
}
.solution-card:hover::before { width: 100%; }

.card-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 2rem;
    font-weight: 500;
}

/* =================== TESTIMONIOS =================== */
.testimonial {
    position: relative;
    padding: 3rem 2.5rem 2.5rem;
    background: rgba(28, 32, 40, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 2px solid var(--accent);
}
.quote-mark {
    position: absolute;
    top: -10px;
    left: 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 5rem;
    color: var(--accent);
    line-height: 1;
}

/* =================== FORMULARIO =================== */
.form-container {
    background: linear-gradient(180deg, rgba(28, 32, 40, 0.5) 0%, rgba(20, 23, 29, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 3rem;
}
.zoho-placeholder, .placeholder-inner { width: 100%; }

.form-input {
    width: 100%;
    background: rgba(10, 12, 16, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--platinum);
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(10, 12, 16, 0.9);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 768px) {
    .hero h1 { font-size: 3rem; }
    .solution-card { padding: 2rem 1.5rem; }
    .form-container { padding: 2rem 1.5rem; }
}