/**
 * AVADHRA / AEG
 * AEG Business Score
 *
 * Estilos de la experiencia pública
 * del Business Score.
 *
 * Version: 0.1
 */


/*
|--------------------------------------------------------------------------
| Base
|--------------------------------------------------------------------------
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        var(--color-background);

    color:
        var(--color-text);

    font-family:
        var(--font-primary);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}


/*
|--------------------------------------------------------------------------
| Shell
|--------------------------------------------------------------------------
*/

.bs-shell {
    min-height: 100vh;
}

.bs-container {
    width:
        min(
            calc(100% - 40px),
            var(--content-width)
        );

    margin-inline: auto;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.bs-header {
    padding:
        var(--space-5)
        0;

    border-bottom:
        1px solid
        var(--color-border);

    background:
        rgba(255, 255, 255, 0.72);
}

.bs-brand {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.bs-brand__name {
    margin: 0;

    color:
        var(--color-primary);

    font-size: 1.3rem;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.bs-brand__product {
    color:
        var(--color-text-secondary);

    font-size: 0.9rem;
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.bs-hero {
    padding:
        clamp(4rem, 9vw, 7rem)
        0;
}

.bs-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    gap:
        clamp(3rem, 7vw, 6rem);

    align-items: center;
}

.bs-eyebrow {
    display: inline-block;

    margin-bottom:
        var(--space-4);

    color:
        var(--color-primary);

    font-size: 0.78rem;
    font-weight: 750;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bs-title {
    max-width: 780px;

    margin:
        0
        0
        var(--space-5);

    color:
        var(--color-primary-dark);

    font-size:
        clamp(
            2.5rem,
            5.5vw,
            4.8rem
        );

    line-height: 1.02;
    letter-spacing: -0.045em;
}

.bs-lead {
    max-width:
        var(--reading-width);

    margin:
        0
        0
        var(--space-6);

    color:
        var(--color-text-secondary);

    font-size:
        clamp(
            1.05rem,
            1.8vw,
            1.25rem
        );
}


/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.bs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);

    align-items: center;
}

.bs-button {
    display: inline-flex;

    min-height: 52px;

    align-items: center;
    justify-content: center;

    padding:
        0
        var(--space-5);

    border:
        1px solid transparent;

    border-radius:
        var(--radius-small);

    font: inherit;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.bs-button:hover {
    transform:
        translateY(-1px);
}

.bs-button:focus-visible {
    outline:
        3px solid
        var(--color-secondary);

    outline-offset: 3px;
}

.bs-button--primary {
    background:
        var(--color-primary);

    color:
        var(--color-text-on-dark);
}

.bs-button--primary:hover {
    background:
        var(--color-primary-dark);
}

.bs-button--secondary {
    border-color:
        var(--color-border);

    background:
        var(--color-surface);

    color:
        var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Diagnostic card
|--------------------------------------------------------------------------
*/

.bs-diagnostic-card {
    position: relative;

    overflow: hidden;

    padding:
        clamp(
            1.75rem,
            4vw,
            2.75rem
        );

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-medium);
}

.bs-diagnostic-card::before {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary),
            var(--color-accent)
        );

    content: "";
}

.bs-diagnostic-card__label {
    margin:
        0
        0
        var(--space-3);

    color:
        var(--color-text-secondary);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bs-diagnostic-card__title {
    margin:
        0
        0
        var(--space-5);

    color:
        var(--color-primary-dark);

    font-size:
        clamp(
            1.4rem,
            2.6vw,
            2rem
        );

    line-height: 1.2;
}

.bs-metrics {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        var(--space-3);
}

.bs-metric {
    padding:
        var(--space-4);

    border-radius:
        var(--radius-medium);

    background:
        var(--color-secondary-soft);
}

.bs-metric__value {
    display: block;

    color:
        var(--color-primary-dark);

    font-size: 1.5rem;
    font-weight: 800;
}

.bs-metric__label {
    display: block;

    margin-top:
        var(--space-1);

    color:
        var(--color-text-secondary);

    font-size: 0.78rem;
    line-height: 1.35;
}


/*
|--------------------------------------------------------------------------
| Trust line
|--------------------------------------------------------------------------
*/

.bs-trust {
    display: flex;
    flex-wrap: wrap;

    gap:
        var(--space-3)
        var(--space-5);

    margin-top:
        var(--space-5);

    color:
        var(--color-text-secondary);

    font-size: 0.88rem;
}

.bs-trust__item {
    display: inline-flex;
    gap: var(--space-2);

    align-items: center;
}

.bs-trust__item::before {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--color-secondary);

    content: "";
}


/*
|--------------------------------------------------------------------------
| Assessment form
|--------------------------------------------------------------------------
*/

.bs-form-section {
    padding:
        clamp(2.5rem, 6vw, 5rem)
        0;
}

.bs-form-container {
    max-width: 860px;
}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.bs-progress {
    margin-bottom:
        var(--space-7);
}

.bs-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);

    margin-bottom:
        var(--space-2);

    color:
        var(--color-text-secondary);

    font-size: 0.78rem;
    font-weight: 650;

    letter-spacing: 0.02em;
}

.bs-progress__track {
    width: 100%;
    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background:
        var(--color-secondary-soft);
}

.bs-progress__bar {
    height: 100%;

    border-radius: inherit;

    background:
        var(--color-primary);

    transition:
        width var(--transition-normal);
}

.bs-progress__bar--context {
    width: 8%;
}


/*
|--------------------------------------------------------------------------
| Form heading
|--------------------------------------------------------------------------
*/

.bs-form-header {
    max-width:
        var(--reading-width);

    margin-bottom:
        var(--space-6);
}

.bs-form-title {
    margin:
        0
        0
        var(--space-4);

    color:
        var(--color-primary-dark);

    font-size:
        clamp(
            2rem,
            4vw,
            3.25rem
        );

    line-height: 1.08;
    letter-spacing: -0.035em;
}

.bs-form-lead {
    max-width: 680px;

    margin: 0;

    color:
        var(--color-text-secondary);

    font-size: 1.05rem;
}


/*
|--------------------------------------------------------------------------
| Form card
|--------------------------------------------------------------------------
*/

.bs-form-card {
    padding:
        clamp(
            1.5rem,
            4vw,
            2.5rem
        );

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-soft);
}


/*
|--------------------------------------------------------------------------
| Fields
|--------------------------------------------------------------------------
*/

.bs-field {
    padding:
        var(--space-5)
        0;

    border-bottom:
        1px solid
        var(--color-border);
}

.bs-field:first-of-type {
    padding-top: 0;
}

.bs-field__label {
    display: block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-text);

    font-size: 0.95rem;
    font-weight: 700;
}

.bs-field__required {
    color:
        var(--color-accent);
}

.bs-field__control {
    display: block;

    width: 100%;
    min-height: 52px;

    padding:
        0
        var(--space-4);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-small);

    background:
        var(--color-surface);

    color:
        var(--color-text);

    font:
        inherit;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}

select.bs-field__control {
    cursor: pointer;
}

.bs-field__control:hover {
    border-color:
        var(--color-secondary);
}

.bs-field__control:focus {
    border-color:
        var(--color-primary);

    outline: none;

    box-shadow:
        0 0 0 3px
        var(--color-secondary-soft);
}

.bs-field__control::placeholder {
    color:
        var(--color-text-secondary);
}


/*
|--------------------------------------------------------------------------
| Form footer
|--------------------------------------------------------------------------
*/

.bs-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap:
        var(--space-5);

    padding-top:
        var(--space-6);
}

.bs-form-note {
    margin: 0;

    color:
        var(--color-text-secondary);

    font-size: 0.82rem;
}

.bs-form-version {
    margin:
        var(--space-4)
        0
        0;

    color:
        var(--color-text-secondary);

    font-size: 0.76rem;

    text-align: center;
}

/* ========================================
   Assessment questions
   ======================================== */

.bs-assessment {
    padding:
        clamp(2rem, 5vw, 4.5rem)
        0
        4rem;
}

.bs-question-card {
    margin-top: 1.5rem;
    padding:
        clamp(1.5rem, 4vw, 2.75rem);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-soft);
}

.bs-question-card__meta {
    margin-bottom: 0.75rem;

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color:
        var(--color-secondary);
}

.bs-question-card__title {
    max-width: 850px;
    margin: 0;

    font-size:
        clamp(1.55rem, 3vw, 2.15rem);

    line-height: 1.2;
    letter-spacing: -0.025em;

    color:
        var(--color-primary-dark);
}

.bs-question-card__instruction {
    max-width: 720px;
    margin:
        1rem
        0
        2rem;

    color:
        var(--color-text-secondary);

    line-height: 1.65;
}

.bs-question-form {
    margin-top: 1.5rem;
}

.bs-options {
    display: grid;
    gap: 0.85rem;

    margin: 0;
    padding: 0;

    border: 0;
}

.bs-option {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 1rem;

    width: 100%;
    padding: 1rem 1.1rem;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-medium);

    background:
        var(--color-surface);

    cursor: pointer;

    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.bs-option:hover {
    border-color:
        var(--color-secondary);

    background:
        var(--color-secondary-soft);

    transform:
        translateY(-1px);
}

.bs-option:focus-within {
    border-color:
        var(--color-primary);

    box-shadow:
        0 0 0 3px
        rgba(18, 60, 70, 0.10);
}

.bs-option__input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

.bs-option__indicator {
    flex: 0 0 auto;

    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;

    border:
        2px solid
        var(--color-border);

    border-radius: 50%;

    background:
        var(--color-surface);

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.bs-option__input:checked
+ .bs-option__indicator {
    border-color:
        var(--color-primary);

    box-shadow:
        inset 0 0 0 4px
        var(--color-surface);

    background:
        var(--color-primary);
}

.bs-option:has(
    .bs-option__input:checked
) {
    border-color:
        var(--color-primary);

    background:
        var(--color-secondary-soft);
}

.bs-option__content {
    display: grid;
    grid-template-columns:
        1.75rem
        minmax(0, 1fr);

    gap: 0.65rem;

    align-items: start;

    width: 100%;
}

.bs-option__letter {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 1.75rem;

    border-radius: 0.4rem;

    background:
        var(--color-background);

    font-size: 0.78rem;
    font-weight: 800;

    color:
        var(--color-primary);
}

.bs-option__text {
    padding-top: 0.12rem;

    line-height: 1.55;

    color:
        var(--color-text);
}

.bs-question-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;

    margin-top: 2rem;
}

.bs-question-form__note {
    max-width: 560px;

    font-size: 0.88rem;
    line-height: 1.55;

    color:
        var(--color-text-secondary);
}

.bs-visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}

/* ========================================
   Business Score results
   ======================================== */

.bs-result {
    padding:
        clamp(2rem, 5vw, 4.5rem)
        0
        4rem;
}

.bs-result .bs-form-container {
    width: min(
        calc(100% - 2rem),
        var(--content-width)
    );

    margin-inline: auto;
}

.bs-result__header {
    max-width: 760px;
    margin-bottom: 2rem;
}

.bs-result__eyebrow {
    display: block;

    margin-bottom: 0.75rem;

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color:
        var(--color-secondary);
}

.bs-result__title {
    margin: 0;

    font-size:
        clamp(2rem, 4vw, 3.25rem);

    line-height: 1.1;
    letter-spacing: -0.035em;

    color:
        var(--color-primary-dark);
}

.bs-result__business {
    margin:
        0.85rem
        0
        0;

    font-size: 1.05rem;

    color:
        var(--color-text-secondary);
}

.bs-result-summary {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 0.75fr);

    gap: 1rem;

    margin-bottom: 2rem;
}

.bs-result-score,
.bs-result-maturity {
    min-width: 0;

    padding:
        clamp(1.5rem, 4vw, 2.25rem);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-soft);
}

.bs-result-score {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.bs-result-score__value {
    font-size:
        clamp(3rem, 7vw, 5.25rem);

    font-weight: 750;
    line-height: 0.95;
    letter-spacing: -0.055em;

    color:
        var(--color-primary);
}

.bs-result-score__scale {
    font-size: 1rem;
    font-weight: 600;

    color:
        var(--color-text-secondary);
}

.bs-result-maturity {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}

.bs-result-maturity__label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color:
        var(--color-text-secondary);
}

.bs-result-maturity__value {
    font-size:
        clamp(1.4rem, 3vw, 2rem);

    line-height: 1.2;

    color:
        var(--color-primary-dark);
}

.bs-result-domains {
    padding:
        clamp(1.5rem, 4vw, 2.5rem);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-large);

    background:
        var(--color-surface);

    box-shadow:
        var(--shadow-soft);
}

.bs-result-domains__header {
    max-width: 720px;
    margin-bottom: 2rem;
}

.bs-result-domains__header h2 {
    margin: 0;

    font-size:
        clamp(1.4rem, 3vw, 1.9rem);

    color:
        var(--color-primary-dark);
}

.bs-result-domains__header p {
    margin:
        0.75rem
        0
        0;

    line-height: 1.6;

    color:
        var(--color-text-secondary);
}

.bs-domain-list {
    display: grid;
    gap: 1.35rem;
}

.bs-domain-result {
    min-width: 0;
}

.bs-domain-result__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 0.55rem;
}

.bs-domain-result__name {
    font-weight: 650;

    color:
        var(--color-text);
}

.bs-domain-result__score {
    flex: 0 0 auto;

    font-variant-numeric:
        tabular-nums;

    color:
        var(--color-primary);
}

.bs-domain-result__track {
    width: 100%;
    height: 0.55rem;

    overflow: hidden;

    border-radius: 999px;

    background:
        var(--color-secondary-soft);
}

.bs-domain-result__bar {
    height: 100%;

    border-radius: inherit;

    background:
        var(--color-primary);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (
    max-width: 820px
) {

    .bs-hero__grid {
        grid-template-columns:
            1fr;

        gap:
            var(--space-7);
    }

    .bs-hero {
        padding:
            var(--space-7)
            0;
    }
}

@media (
    max-width: 520px
) {

    .bs-container {
        width:
            min(
                calc(100% - 28px),
                var(--content-width)
            );
    }

    .bs-brand {
        display: block;
    }

    .bs-brand__product {
        display: block;

        margin-top:
            var(--space-1);
    }

    .bs-actions {
        display: grid;

        grid-template-columns:
            1fr;
    }

    .bs-button {
        width: 100%;
    }

    .bs-metrics {
        grid-template-columns:
            1fr;
    }
        .bs-progress__meta {
        display: block;
    }

    .bs-progress__meta span {
        display: block;
    }

    .bs-progress__meta span + span {
        margin-top:
            var(--space-1);
    }

    .bs-form-footer {
        display: grid;

        grid-template-columns:
            1fr;
    }

    .bs-form-footer .bs-button {
        width: 100%;
    }
}
/* AVADHRA-CSS-CHECK-20260916 */