/* Variables basadas en el manual de identidad de GEN141 [1] */
:root {
    --morado: #a054ff;
    --rosa: #f357c3;
    --gris-oscuro: #595959;
    --gris-claro: #eeeef0;
    --aqua: #a4efe5;
    --fuente-titulos: 'Montserrat', sans-serif;
    --fuente-cuerpo: 'Open Sans', sans-serif;
}

body {
    font-family: var(--fuente-cuerpo);
    background-color: var(--gris-claro);
    color: var(--gris-oscuro);
    margin: 0;
    /* Degradado sutil inspirado en los fondos de marca [8, 9] */
    background: linear-gradient(135deg, #f5edff 0%, #eef2ff 100%);
}

h1, .brand-logo {
    font-family: var(--fuente-titulos);
    font-weight: 700;
}

.brand-logo img {
    max-width: 100%;
}

.cta {
    color: #f357c3;
    font-weight: 700;
    font-size: 1.5rem;
    font-family: var(--fuente-titulos);
}

.card-construction {
    background: #ffffff;
    padding: 3.5rem 2rem;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(160, 84, 255, 0.1);
    max-width: 650px;
    width: 100%;
    border-bottom: 6px solid var(--morado);
}

.brand-logo {
    font-size: 3rem;
    color: var(--gris-oscuro);
    letter-spacing: -1px;
}

.text-purple {
    color: var(--morado);
}

.badge-status {
    background-color: var(--rosa);
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    text-transform: uppercase;
}

.service-tag {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--gris-oscuro);
    display: block;
}

.btn-custom {
    background-color: var(--morado);
    color: white;
    padding: 12px 32px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-custom:hover {
    background-color: #8a36ff;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(160, 84, 255, 0.3);
}

/* Accesibilidad: Indicador de foco mejorado [3, 10] */
.btn-custom:focus {
    outline: 4px solid var(--aqua);
    outline-offset: 3px;
}

/* Responsividad Mobile First [5] */
@media (max-width: 576px) {
    .brand-logo { font-size: 2.2rem; }
    .card-construction { padding: 2rem 1.5rem; }
}