:root {
    --black: #000000;
    --accent: #00E0FF;
    --white: #ffffff;
    --gray: #888888;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--black);
    background-color: var(--white);
}

.fw-black { font-weight: 900; }
.text-accent { color: var(--accent); }
.text-gray { color: var(--gray); }
.bg-black { background-color: var(--black) !important; }

/* Hero */
.hero-section {
    min-height: 85vh;
    background-color: var(--black);
    color: var(--white);
}

.headline {
    font-weight: 900;
    letter-spacing: -4px;
    line-height: 0.9;
}

.btn-light-custom {
    background-color: var(--white);
    color: var(--black);
    font-weight: 900;
    padding: 15px 40px;
    border-radius: 0;
    text-transform: uppercase;
}

.btn-outline-light-custom {
    border: 2px solid var(--gray);
    color: var(--white);
    padding: 15px 40px;
    font-weight: 900;
    border-radius: 0;
}

.btn-accent {
    background-color: var(--accent);
    color: var(--black);
    font-weight: 900;
}

/* Servicios */
.section-padding { padding: 100px 0; }
.service-box { transition: all 0.3s ease; }
.service-box:hover {
    background-color: var(--black);
    color: var(--white) !important;
}

/* Testimonios */
.custom-quote p { font-style: italic; position: relative; }
.custom-quote p::before {
    content: '"';
    font-size: 4rem;
    position: absolute;
    left: -30px;
    top: -20px;
    opacity: 0.2;
}
.blockquote-footer::before { content: "" !important; }

/* Form */
.form-control:focus { border-color: var(--accent); box-shadow: none; }

/* Interacción del Proceso */
.step-group {
    cursor: pointer;
    outline: none;
}

.step-dot {
    fill: var(--black);
    transition: all 0.3s ease;
}

.step-group:hover .step-dot, 
.step-group.active .step-dot {
    fill: var(--accent);
    r: 20; /* Se agranda al pasar el mouse */
}

.step-label {
    font-weight: 900;
    font-size: 14px;
    fill: var(--black);
    transition: fill 0.3s;
}

.step-group:hover .step-label,
.step-group.active .step-label {
    fill: var(--accent);
}

.detail-card {
    background: white;
    max-width: 400px;
    margin: 0 auto;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}