:focus-visible {
    outline: 2px solid #9db1ff;
    outline-offset: 4px
}

.briefing-screen[hidden] {
    display: none !important
}

/* O briefing é uma tela irmã da Home, não um modal.
   Ao abrir um serviço, escondemos a Home inteira e deixamos somente
   a experiência de briefing ocupando a viewport. */
body.experience-open {
    overflow: hidden
}

body.experience-open>.site-header,
body.experience-open>.site-footer,
body.experience-open>.floating-whatsapp,
body.experience-open>.pointer-dot,
body.experience-open>.pointer-ring,
body.experience-open>main {
    display: none !important
}

body.experience-open>.briefing-screen {
    display: flex !important
}

.briefing-screen {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background: radial-gradient(ellipse at 50% 0%, rgba(73, 91, 171, .1), transparent 48%), linear-gradient(180deg, #090b12, #080a10 70%);
    animation: briefing-enter .55s cubic-bezier(.22, .68, 0, 1) both
}

.briefing-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: linear-gradient(rgba(123, 151, 218, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 151, 218, .045) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: linear-gradient(180deg, black, transparent 90%)
}

.briefing-glow {
    position: absolute;
    z-index: -1;
    top: 100px;
    left: 50%;
    width: min(720px, 90vw);
    height: 520px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(77, 99, 196, .12), rgba(135, 77, 205, .055) 38%, transparent 70%);
    filter: blur(24px);
    pointer-events: none
}

.briefing-nav {
    width: min(1160px, calc(100% - 64px));
    height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(198, 211, 242, .1)
}

.briefing-back {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none;
    border: 0;
    padding: 10px 0;
    color: #c3cbe0;
    font: 11px var(--mono);
    cursor: pointer;
    transition: color .2s, transform .2s
}

.briefing-back:hover {
    color: #fff;
    transform: translateX(-3px)
}

.briefing-nav-note {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8792a7;
    font: 9px var(--mono);
    letter-spacing: .08em
}

.briefing-main {
    position: relative;
    z-index: 1;
    width: min(760px, calc(100% - 40px));
    margin: 0 auto;
    padding: 52px 0 35px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center
}

.briefing-intro {
    text-align: center;
    margin: 0 auto 30px;
    max-width: 690px
}

.briefing-intro .eyebrow {
    justify-content: center;
    margin-bottom: 13px;
    font-size: 9px;
    color: #9aa7c0
}

.briefing-intro h1 {
    font-size: clamp(27px, 4vw, 42px);
    line-height: 1.2;
    letter-spacing: -.06em;
    font-weight: 600;
    margin: 0
}

.briefing-intro h1 span {
    color: transparent;
    background: linear-gradient(110deg, #a5b7ff, #77d9f0 75%);
    background-clip: text;
    -webkit-background-clip: text
}

.briefing-intro>p:last-child {
    font-size: 12px;
    color: #939bad;
    margin: 12px 0 0
}

.briefing-panel {
    width: 100%;
    padding: 25px 30px 22px;
    border: 1px solid rgba(122, 147, 214, .23);
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(18, 23, 34, .97), rgba(12, 15, 23, .97));
    box-shadow: 0 28px 80px #0005, 0 0 45px rgba(96, 121, 255, .045);
    backdrop-filter: blur(16px)
}

.briefing-service-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #79859b;
    font: 9px var(--mono);
    letter-spacing: .12em
}

.briefing-service-name {
    color: #a7b8ff
}

.briefing-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 18px 0 28px
}

.progress-step {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center
}

.progress-step:last-child {
    flex: 0
}

.progress-step:not(:last-child)::after {
    content: "";
    height: 1px;
    width: calc(100% - 22px);
    position: absolute;
    left: 24px;
    top: 11px;
    background: #2a3448;
    transition: background .3s
}

.progress-step.is-complete:not(:last-child)::after {
    background: linear-gradient(90deg, #718cff, #66d9f1)
}

.progress-step i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    position: relative;
    z-index: 1;
    border: 1px solid #37435c;
    border-radius: 50%;
    background: #111722;
    color: #66748b;
    font: 8px var(--mono);
    font-style: normal;
    transition: border .3s, color .3s, background .3s, box-shadow .3s
}

.progress-step.is-current i {
    border-color: #9caeff;
    background: #273251;
    color: #f4f6ff;
    box-shadow: 0 0 18px #7f98ff3b
}

.progress-step.is-complete i {
    border-color: #83d5db;
    background: #152d36;
    color: #8ce2dc
}

.question-stage,
.summary-stage {
    animation: question-enter .35s cubic-bezier(.22, .68, 0, 1) both
}

.question-meta {
    display: flex;
    justify-content: space-between;
    color: #77839a;
    font: 9px var(--mono);
    letter-spacing: .1em
}

.question-meta span:first-child {
    color: #a9b8f3
}

.question-stage h2 {
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.3;
    letter-spacing: -.045em;
    margin: 12px 0 4px;
    font-weight: 600
}

.question-hint {
    font-size: 11px;
    color: #858fa2;
    margin: 0 0 18px
}

.answer-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.answer-option {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    gap: 11px;
    padding: 10px 13px;
    text-align: left;
    color: #c8cedb;
    background: linear-gradient(120deg, #131925, #10141d);
    border: 1px solid rgba(198, 211, 242, .105);
    border-radius: 4px;
    font: 11px var(--sans);
    cursor: pointer;
    transition: transform .2s, border-color .2s, background .2s, box-shadow .2s
}

.answer-option:hover {
    transform: translateY(-2px);
    border-color: #8298d866;
    background: #182033;
    box-shadow: 0 7px 22px #0004
}

.answer-option[aria-pressed=true] {
    border-color: #8da3ff;
    background: linear-gradient(120deg, #1a2440, #151d30);
    color: #f2f5ff;
    box-shadow: inset 0 0 20px #7b94ff0a, 0 0 18px #7b94ff12
}

.answer-option[aria-pressed=true] .option-mark {
    border-color: #9bb0ff;
    background: #8098ff;
    color: #0b1120
}

.option-mark {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border: 1px solid #58657c;
    border-radius: 50%;
    color: transparent;
    font: 10px var(--sans);
    transition: all .2s
}

.question-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(198, 211, 242, .09)
}

.question-actions .button {
    min-height: 42px
}

.question-actions .button:disabled {
    opacity: .42;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.question-actions .button:disabled:hover {
    transform: none
}

.question-back[hidden] {
    display: none
}

.briefing-footnote {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: #667287;
    font: 8px var(--mono);
    letter-spacing: .055em;
    margin: 17px 0 0;
    text-align: center
}

.briefing-footnote span {
    color: #9bafff;
    font-size: 12px
}

.summary-stage {
    padding: 10px 0 0
}

.summary-success {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px
}

.summary-check {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #67cda94d;
    border-radius: 50%;
    color: #79e0b8;
    background: #142a26;
    font-size: 20px;
    box-shadow: 0 0 28px #60d3a218
}

.summary-success p {
    margin: 0;
    color: #9fe4c8;
    font: 9px var(--mono);
    letter-spacing: .12em
}

.summary-success h2 {
    font-size: clamp(21px, 3vw, 29px);
    line-height: 1.2;
    letter-spacing: -.05em;
    margin: 3px 0 0
}

.summary-description {
    max-width: 650px;
    font-size: 12px;
    color: #a9b1c1;
    line-height: 1.8;
    margin: 0 0 18px
}

.summary-label {
    color: #8998bc;
    font: 9px var(--mono);
    letter-spacing: .13em;
    margin: 0 0 9px
}

.summary-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-block: 1px solid rgba(198, 211, 242, .1)
}

.summary-list li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(198, 211, 242, .07);
    display: flex;
    flex-direction: column;
    gap: 3px
}

.summary-list li:nth-last-child(-n+2) {
    border-bottom: 0
}

.summary-list span {
    color: #77849a;
    font: 8px var(--mono);
    letter-spacing: .07em
}

.summary-list strong {
    color: #d9deea;
    font-size: 10px;
    font-weight: 600
}

.summary-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 18px;
    flex-wrap: wrap
}

.summary-actions .button {
    min-height: 45px
}

.summary-edit {
    min-height: 42px
}

.summary-note {
    color: #707d92;
    font-size: 9px;
    margin: 10px 0 0
}

.briefing-assist {
    margin: 19px 0 0;
    color: #7d8799;
    font: 9px var(--mono);
    letter-spacing: .035em;
    text-align: center
}

.briefing-assist a {
    color: #b4c4ff;
    border-bottom: 1px solid #7f97ee66;
    padding-bottom: 2px
}

.briefing-assist a:hover {
    color: #fff
}

.briefing-footer {
    width: min(1160px, calc(100% - 64px));
    margin: auto auto 0;
    padding: 17px 0 19px;
    border-top: 1px solid rgba(198, 211, 242, .09);
    display: flex;
    justify-content: space-between;
    color: #68748a;
    font: 8px var(--mono);
    letter-spacing: .08em
}

.briefing-footer i {
    font-style: normal;
    color: #91a6f7
}

.briefing-footer a {
    color: #98a9d4
}

@keyframes briefing-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(3px)
    }

    to {
        opacity: 1;
        transform: none;
        filter: blur(0)
    }
}

@keyframes question-enter {
    from {
        opacity: 0;
        transform: translateY(9px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media(max-width:700px) {
    .briefing-nav {
        width: calc(100% - 36px);
        height: 66px
    }

    .briefing-main {
        width: calc(100% - 28px);
        padding: 34px 0 27px
    }

    .briefing-nav-note {
        font-size: 7px;
        gap: 6px
    }

    .briefing-nav-note .status-dot {
        width: 5px;
        height: 5px
    }

    .briefing-back {
        font-size: 9px
    }

    .briefing-nav .brand {
        font-size: 16px
    }

    .briefing-intro {
        margin-bottom: 21px
    }

    .briefing-intro .eyebrow {
        font-size: 8px
    }

    .briefing-intro>p:last-child {
        font-size: 11px;
        max-width: 340px
    }

    .briefing-panel {
        padding: 19px 16px 17px
    }

    .briefing-progress {
        margin: 15px 0 22px
    }

    .answer-options {
        grid-template-columns: 1fr;
        gap: 7px
    }

    .answer-option {
        min-height: 46px
    }

    .question-stage h2 {
        font-size: 23px
    }

    .question-hint {
        font-size: 10px;
        margin-bottom: 14px
    }

    .question-actions {
        margin-top: 15px;
        padding-top: 12px
    }

    .question-actions .button {
        padding: 0 13px;
        font-size: 10px
    }

    .briefing-footnote {
        font-size: 7px;
        line-height: 1.6
    }

    .briefing-footer {
        width: calc(100% - 36px);
        font-size: 7px
    }

    .summary-list {
        grid-template-columns: 1fr
    }

    .summary-list li:nth-last-child(-n+2) {
        border-bottom: 1px solid rgba(198, 211, 242, .07)
    }

    .summary-list li:last-child {
        border-bottom: 0
    }

    .summary-actions {
        align-items: stretch;
        flex-direction: column
    }

    .summary-actions .button {
        width: 100%
    }

    .briefing-assist {
        font-size: 8px;
        line-height: 1.8
    }

    .briefing-footer span {
        max-width: 60%
    }
}

@media(max-width:360px) {
    .briefing-main {
        width: calc(100% - 22px)
    }

    .briefing-panel {
        padding-inline: 13px
    }

    .briefing-back span {
        max-width: 130px
    }

    .briefing-nav-note {
        max-width: 96px;
        text-align: right
    }

    .question-actions .button {
        min-height: 40px
    }

    .briefing-footer {
        font-size: 6px
    }
}

@media(prefers-reduced-motion:reduce) {

    .briefing-screen,
    .question-stage,
    .summary-stage {
        animation: none
    }

    .progress-step i,
    .progress-step:not(:last-child)::after,
    .answer-option,
    .briefing-back {
        transition: none
    }
}