/* Increment 3: lens selection, preferences, processing and recommendation.
   'pairing' (configuração do totem) entrou nesta mesma lista: ela não faz parte
   da jornada do cliente, mas herda o tema escuro e os estilos de card daqui.
   Sem isso ela caía no tema claro da home com o card sem regra nenhuma — e o
   ícone do cabeçalho, sem tamanho, virava um retângulo preto gigante. */
body:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) { background:#081a36; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) { width:min(100%,1440px); background:#081a36; box-shadow:none; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .topbar { height:100px; padding:24px 6%; gap:18px; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .brand { color:#fff; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .brand-copy small { color:#a8c8ef; font-size:9px; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .brand-copy small i { background:#65b8ff; animation:none; box-shadow:none; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .brand-mark svg { stroke:#68bbff; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .brand-mark circle { fill:#f3ce70; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .brand-mark .milie-spark { stroke:#f3ce70; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .icon-button { background:#122948; border-color:#365071; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) .icon-button svg { stroke:#fff; }
.kiosk:has(:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]).active) :is(button,a,input):focus-visible { outline:3px solid #69baff; outline-offset:4px; }

:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) { --ink:#10213b; --muted:#506078; --green:#2264a5; --green-dark:#194f87; --lime:#f3ce70; --paper:#081a36; --line:#d4e0ef; color:#fff; padding:30px 6% 38px; min-height:calc(100svh - 100px); background:radial-gradient(ellipse at 85% 15%,#16427770,transparent 55%); }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .step-row { color:#b4c4da; font-size:12px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .progress { background:#294261; margin:14px 0 30px; height:5px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .progress i { background:#65b8ff; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .eyebrow { color:#a8c8ef; font-size:12px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) h2 { font:700 clamp(36px,4.5vw,60px)/1.12 var(--sans); letter-spacing:-.04em; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) h2 em { font:inherit; color:#65b8ff; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .step-heading > p:last-child { font-size:18px; line-height:1.6; color:#b4c4da; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .option-list { gap:14px; margin:30px 0; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-card { min-height:132px; padding:22px; background:#f6f9fe; color:#10213b; border:2px solid #d4e0ef; grid-template-columns:68px minmax(0,1fr) 30px; box-shadow:none; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-card.selected { border-color:#65b8ff; background:#e5f1ff; box-shadow:0 0 0 3px #65b8ff30; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-icon { background:#e3edfb; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-copy b { font:700 24px/1.25 var(--sans); }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-copy small { font-size:16px; line-height:1.5; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-copy strong { font-size:15px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .select-circle { border-color:#7e94af; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .sticky-action { position:static; padding:24px 0 0; margin-top:auto; background:none; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .primary-button { min-height:66px; background:#f3ce70; color:#10213b; box-shadow:none; font-size:18px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .primary-button:hover:not(:disabled) { background:#ffdf8e; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .secondary-button { min-height:66px; background:#122948; border-color:#6e98c8; color:#d5eaff; font-size:16px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .primary-button:disabled { background:#344760; color:#aabbcf; cursor:not-allowed; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .secondary-button:disabled { background:#182c46; border-color:#40536d; color:#94a8c2; cursor:not-allowed; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-list { gap:18px; margin:30px 0; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-card { color:#10213b; padding:24px; background:#f6f9fe; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-icon { background:#e3edfb; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-title small { font-size:11px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-title h3 { font:700 22px/1.3 var(--sans); }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .answer-group { gap:8px; margin-top:24px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .answer-group button { min-height:56px; font-size:14px; border-color:#bdcde1; background:#fff; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .answer-group button.selected { background:#2264a5; color:#fff; border-color:#2264a5; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .processing-content { width:min(740px,100%); padding:40px 0; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .processing-intro { color:#b4c4da; font-size:18px; max-width:520px; line-height:1.6; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-core { background:#244d80; font-family:var(--sans); box-shadow:0 0 50px #3188f033; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-orbit, :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-orbit::before, :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-orbit::after { border-color:#547cad80; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-orbit i { box-shadow:none; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-orbit i:nth-child(2) { background:#65b8ff; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-orbit i:nth-child(3) { background:#b4d5f5; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .processing-message { color:#fff; font:500 24px/1.5 var(--sans); }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .processing-skip { color:#b4c4da; opacity:1; font-size:15px; min-height:52px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-rx-card { background:#f6f9fe; color:#10213b; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-card-head { background:#e3edfb; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-card-head b { font:700 23px/1.3 var(--sans); }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-card-head small, :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-rx-body > span { font-size:12px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-rx-body strong { font:700 24px/1.3 var(--sans); }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-rx-body p { font-size:16px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .analysis-profile { background:#e3edfb; font-size:15px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-card { background:#173b64; border:1px solid #416c9b; padding:28px; border-radius:20px; margin:22px 0 18px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-label { font-size:11px; color:#10213b; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-card h3 { font:700 32px/1.2 var(--sans); }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-card > p { font-size:17px; color:#c3d7ed; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-card ul { font-size:16px; line-height:1.5; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-note { color:#c3d7ed; font-size:14px; line-height:1.5; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .treatments-button { font-size:16px; min-height:52px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .lens-suggestions-button { font-size:16px; min-height:54px; margin:0 0 24px; padding:12px 18px; }
:is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) :is(button,a):focus-visible { outline:3px solid #65b8ff; outline-offset:4px; }
@media (max-width:600px) {
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) { padding:20px 5% 30px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-card { grid-template-columns:44px minmax(0,1fr) 25px; gap:12px; padding:16px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-icon { width:44px; height:48px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-icon svg { width:34px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-copy b { font-size:20px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .choice-copy small { font-size:14px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-list { grid-template-columns:1fr; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-card { padding:20px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .question-title h3 { font-size:20px; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-features { flex-direction:column; align-items:flex-start; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-glass { display:none; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-card h3, :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .recommendation-card > p { max-width:100%; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .triple-action { grid-template-columns:1fr; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .dual-action { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
 S, :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-orbit, :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .spinner-core { animation:none; }
 :is([data-screen="lenses"], [data-screen="preferences"], [data-screen="marcas"], [data-screen="multifocal"], [data-screen="antireflexo"], [data-screen="fotossensivel"], [data-screen="processing"], [data-screen="analysis"], [data-screen="pairing"]) .processing-message { transition:none; }
}

/* Etapa 1: CTA única (autoatendimento) que leva ao perfil de estilo de vida
   e necessidades especiais. Alvo grande, hierarquia de leitura e affordance
   de toque explícita — substitui o par "Informações complementares/Analisar". */
[data-screen="lenses"] .lifestyle-cta {
  display:grid; grid-template-columns:78px minmax(0,1fr) 52px; align-items:center; gap:20px;
  width:100%; min-height:110px; padding:20px 24px; text-align:left; cursor:pointer;
  border:0; border-radius:22px; background:linear-gradient(135deg,#f9dc91,#eec25c);
  color:#10213b; box-shadow:0 16px 38px #00000047; -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, box-shadow .18s ease, transform .12s ease;
}
[data-screen="lenses"] .lifestyle-cta:hover:not(:disabled) { background:linear-gradient(135deg,#ffe8a6,#f6cd6d); }
[data-screen="lenses"] .lifestyle-cta:active:not(:disabled) { transform:scale(.99); box-shadow:0 8px 20px #00000047; }
[data-screen="lenses"] .lifestyle-cta:disabled { background:#1b3252; color:#8ea3bc; box-shadow:none; cursor:not-allowed; }
[data-screen="lenses"] .lifestyle-cta-icon { display:grid; place-items:center; width:78px; height:78px; border-radius:20px; background:#10213b14; }
[data-screen="lenses"] .lifestyle-cta-icon svg { width:46px; height:46px; fill:none; stroke:#10213b; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
[data-screen="lenses"] .lifestyle-cta-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
[data-screen="lenses"] .lifestyle-cta-copy small { font:800 12px/1 var(--sans); letter-spacing:.18em; opacity:.62; }
[data-screen="lenses"] .lifestyle-cta-copy b { font:700 27px/1.18 var(--sans); letter-spacing:-.02em; }
[data-screen="lenses"] .lifestyle-cta-copy em { font:500 15px/1.45 var(--sans); font-style:normal; opacity:.76; }
[data-screen="lenses"] .lifestyle-cta-arrow { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#10213b; color:#f3ce70; font-size:24px; font-weight:700; animation:lifestyleNudge 2.4s ease-in-out infinite; }
[data-screen="lenses"] .lifestyle-cta:disabled .lifestyle-cta-icon { background:#ffffff10; }
[data-screen="lenses"] .lifestyle-cta:disabled .lifestyle-cta-icon svg { stroke:#8ea3bc; }
[data-screen="lenses"] .lifestyle-cta:disabled .lifestyle-cta-arrow { background:#ffffff10; color:#8ea3bc; animation:none; }
@keyframes lifestyleNudge { 0%,72%,100% { transform:translateX(0); } 84% { transform:translateX(5px); } }
@media (max-width:600px) {
 [data-screen="lenses"] .lifestyle-cta { grid-template-columns:56px minmax(0,1fr) 42px; gap:14px; padding:16px; min-height:96px; }
 [data-screen="lenses"] .lifestyle-cta-icon { width:56px; height:56px; border-radius:16px; }
 [data-screen="lenses"] .lifestyle-cta-icon svg { width:34px; height:34px; }
 [data-screen="lenses"] .lifestyle-cta-copy b { font-size:21px; }
 [data-screen="lenses"] .lifestyle-cta-copy em { font-size:13px; }
 [data-screen="lenses"] .lifestyle-cta-arrow { width:42px; height:42px; font-size:20px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="lenses"] .lifestyle-cta { grid-template-columns:100px minmax(0,1fr) 64px; gap:26px; min-height:146px; padding:26px 30px; }
 [data-screen="lenses"] .lifestyle-cta-icon { width:100px; height:100px; }
 [data-screen="lenses"] .lifestyle-cta-icon svg { width:60px; height:60px; }
 [data-screen="lenses"] .lifestyle-cta-copy small { font-size:15px; }
 [data-screen="lenses"] .lifestyle-cta-copy b { font-size:34px; }
 [data-screen="lenses"] .lifestyle-cta-copy em { font-size:19px; }
 [data-screen="lenses"] .lifestyle-cta-arrow { width:64px; height:64px; font-size:30px; }
}
@media (prefers-reduced-motion:reduce) {
 [data-screen="lenses"] .lifestyle-cta-arrow { animation:none; }
}

/* Perfil visual com número ímpar de perguntas: a última ocupa a linha inteira
   para não deixar meia coluna vazia no layout de 2 colunas. */
[data-screen="preferences"] .question-card:last-child:nth-child(odd) { grid-column:1 / -1; }

/* Perfil visual: seção educativa "Transparência e Anti-Reflexo".
   Card escuro (voz da Milie) para não competir com os cards de pergunta.
   As duas fotos ficam lado a lado sempre — a comparação é o conteúdo.
   Sem a foto no disco, o <img> falha e a View marca .sem-foto, revelando
   o placeholder que já está no DOM (ver _bindComparacaoAntirreflexo). */
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card { background:#173b64; border:1px solid #416c9b; border-radius:22px; padding:28px; margin:0; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card + .milie-card { margin-top:18px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-head { display:flex; align-items:center; gap:16px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-icon { flex:0 0 58px; width:58px; height:58px; border-radius:16px; background:#0e2b4d; display:grid; place-items:center; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-icon svg { width:34px; height:34px; fill:none; stroke:#65b8ff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-head small { display:block; font:800 11px/1 var(--sans); letter-spacing:.18em; color:#a8c8ef; margin-bottom:8px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-head h3 { font:700 26px/1.2 var(--sans); letter-spacing:-.02em; color:#fff; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-text { margin:18px 0 22px; font-size:17px; line-height:1.6; color:#c3d7ed; max-width:68ch; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot { margin:0; min-width:0; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-frame { position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:#0e2b4d; border:1px solid #37608d; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot[data-destaque="sim"] .photo-shot-frame { border-color:#f3ce70; box-shadow:0 0 0 3px #f3ce7024; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-frame img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center 28%; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot.sem-foto img { display:none; }
/* Fotossensível é um card só, com vídeo: no antirreflexo o que importa são dois
   estados; aqui o argumento é a TRANSIÇÃO — ver a lente escurecendo. Largura
   limitada porque o clipe tem 480px: esticado numa tela de 32" ficaria mole. */
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-compare-video { grid-template-columns:1fr; justify-items:center; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-compare-video .photo-shot { width:min(100%,520px); }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-frame video { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; background:#0e2b4d; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-ghost { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:4px; padding:14px; text-align:center; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-ghost svg { width:min(46%,110px); fill:none; stroke:#3f6793; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:10px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-ghost b { font:800 12px/1.3 var(--sans); letter-spacing:.1em; color:#88a9cf; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-ghost small { font:600 11px/1.3 var(--sans); color:#5e80a8; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-tag { position:absolute; z-index:2; left:10px; bottom:10px; padding:7px 12px; border-radius:999px; font:800 11px/1 var(--sans); letter-spacing:.08em; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-tag.off { background:#071c33d6; color:#d5eaff; border:1px solid #4a6c94; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-tag.on { background:#f3ce70; color:#10213b; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot figcaption { margin-top:11px; font-size:14px; line-height:1.45; color:#a8c8ef; }
@media (max-width:600px) {
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card { padding:20px; border-radius:18px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-icon { flex-basis:46px; width:46px; height:46px; border-radius:13px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-icon svg { width:27px; height:27px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-head h3 { font-size:21px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-text { font-size:15px; margin:14px 0 18px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-compare { gap:10px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-tag { left:7px; bottom:7px; padding:6px 9px; font-size:9px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot figcaption { font-size:12px; margin-top:8px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card { padding:36px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-icon { flex-basis:76px; width:76px; height:76px; border-radius:20px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-icon svg { width:44px; height:44px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-head small { font-size:14px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-head h3 { font-size:34px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-text { font-size:22px; margin:24px 0 28px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-compare { gap:24px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-tag { left:16px; bottom:16px; padding:10px 18px; font-size:15px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot figcaption { font-size:19px; margin-top:16px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-ghost b { font-size:16px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .photo-shot-ghost small { font-size:14px; }
}

/* Escolha do residual do antirreflexo. As quatro cores são as mesmas de
   AR_RESIDUALS (Lens3DViewer.js) — verde/azul/roxo/dourado — para o tom que a
   pessoa vê aqui ser o mesmo da lente 3D. Cada chip recebe a cor em
   --swatch (inline, como o --progress das barras) e a "lente" é desenhada
   em gradiente: brilho principal no alto à esquerda, retorno fraco embaixo à
   direita e um facho especular branco por cima. Sem imagem e sem canvas. */
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-block { margin-top:18px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lead { font-size:16px; line-height:1.6; color:#c3d7ed; max-width:68ch; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lead b { color:#fff; font-weight:700; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip { position:relative; display:grid; justify-items:center; gap:4px; padding:18px 12px 16px; border:2px solid #3d6491; border-radius:18px; background:#0e2b4d; color:#fff; cursor:pointer; text-align:center; transition:border-color .16s ease, background .16s ease, transform .12s ease; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip:hover:not(.selected) { background:#123a63; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip:active { transform:scale(.985); }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip.selected { border-color:var(--swatch); background:#12355c; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip b { font:700 18px/1.2 var(--sans); margin-top:12px; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip small { font:500 12px/1.35 var(--sans); color:#a8c8ef; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lens { position:relative; width:min(100%,104px); aspect-ratio:1/.84; border-radius:50%/46%; overflow:hidden; background:linear-gradient(155deg,#ffffff1f,#ffffff08 46%,#ffffff16); box-shadow:inset 0 0 0 1.5px #ffffff33, 0 8px 18px #00000059; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lens i { position:absolute; left:-14%; top:14%; width:58%; height:22%; border-radius:50%; background:linear-gradient(90deg,#ffffff00,#ffffffcc,#ffffff00); transform:rotate(-24deg); opacity:.5; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .residual-lens::before { content:''; position:absolute; inset:0; background:radial-gradient(78% 66% at 30% 24%, var(--swatch), transparent 64%); opacity:.66; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .residual-lens::after { content:''; position:absolute; inset:0; background:radial-gradient(68% 58% at 80% 86%, var(--swatch), transparent 68%); opacity:.3; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-check { position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%; background:var(--swatch); color:#0b2038; font:800 13px/24px var(--sans); opacity:0; transform:scale(.6); transition:.16s ease; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip.selected .swatch-check { opacity:1; transform:scale(1); }
@media (max-width:600px) {
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-block { margin-top:14px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lead { font-size:14px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lens { width:min(100%,84px); }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip b { font-size:16px; margin-top:10px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip small { font-size:11px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-block { margin-top:24px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lead { font-size:21px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-grid { gap:20px; margin-top:26px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip { padding:26px 16px 22px; border-radius:22px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-lens { width:min(100%,150px); }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip b { font-size:25px; margin-top:18px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-chip small { font-size:16px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-check { width:34px; height:34px; font-size:18px; line-height:34px; top:14px; right:14px; }
}

/* Tela fotossensível: a "lente" do swatch mostra o tom ATIVADO — quem escolhe
   cor precisa ver a cor. A classe .sol vem fixa no HTML desde que o alternador
   "ambiente interno / sol forte" saiu: o vídeo já mostra a lente clareando e
   escurecendo de verdade, e a simulação em CSS só repetia isso pior. Sem ela,
   os nove swatches ficariam nove ovais cinzentas iguais (opacity .07). */
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .tint-lens::before { content:''; position:absolute; inset:0; background:var(--swatch); opacity:.07; transition:opacity .85s ease; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-grid.sol .tint-lens::before { opacity:.92; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .swatch-grid.sol .tint-lens i { opacity:.26; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .tint-lens i { transition:opacity .85s ease; }

[data-screen="fotossensivel"] .swatch-grid { grid-template-columns:repeat(3,1fr); }

/* Cartão de sol aceso: o fundo da grade esquenta junto, para a simulação não
   ficar presa dentro das três bolinhas. */
[data-screen="fotossensivel"] .swatch-grid { border-radius:20px; padding:10px; margin-left:-10px; margin-right:-10px; transition:background .85s ease; }
[data-screen="fotossensivel"] .swatch-grid.sol { background:radial-gradient(120% 140% at 50% -20%, #f3ce7026, transparent 62%); }

:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-note { display:flex; gap:12px; align-items:flex-start; margin-top:22px; padding:16px 18px; border-radius:14px; background:#0e2b4d; color:#b4c4da; font-size:14px; line-height:1.55; }
:is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-note span { flex:0 0 22px; height:22px; border:1px solid #4a6c94; border-radius:50%; display:grid; place-items:center; font:700 12px/1 var(--sans); color:#8fb4dd; }

@media (max-width:600px) {
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-note { font-size:12px; padding:13px 14px; margin-top:16px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-note { font-size:18px; padding:22px 24px; margin-top:30px; gap:16px; }
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .milie-card-note span { flex-basis:28px; height:28px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce) {
 :is([data-screen="marcas"],[data-screen="multifocal"],[data-screen="antireflexo"],[data-screen="fotossensivel"],[data-screen="pairing"]) .tint-lens::before,
 [data-screen="fotossensivel"] .swatch-grid { transition:none; }
}

/* Revelação progressiva do perfil visual: a lista começa com só a primeira
   pergunta no DOM visível e cada resposta traz a seguinte. A classe
   .revelando fica na lista (e não em cada card) para que, sem JS, TODAS as
   perguntas apareçam — a revelação é melhoria, nunca requisito. */
[data-screen="preferences"] .question-list.revelando .question-card:not(.revelado) { display:none; }
[data-screen="preferences"] .question-card.revelado.entrando { animation:perguntaEntra .52s cubic-bezier(.2,.85,.25,1) both; }
@keyframes perguntaEntra {
  from { opacity:0; transform:translateY(26px) scale(.97); }
  60%  { opacity:1; }
  to   { opacity:1; transform:none; }
}
/* Pulso de atenção no card recém-chegado: some sozinho e não repete. */
[data-screen="preferences"] .question-card.entrando::after { content:''; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 2px #65b8ff; animation:perguntaPulso 1.5s ease-out both; }
[data-screen="preferences"] .question-card { position:relative; }
@keyframes perguntaPulso { from { opacity:.9; } to { opacity:0; } }

/* Cada tipo de uso tem o seu questionário; só um fica visível por atendimento. */
[data-screen="preferences"] .question-list[hidden] { display:none; }

/* Contador no cabeçalho: sobe junto com as respostas. */
[data-screen="preferences"] .question-counter { color:#65b8ff; }
[data-screen="preferences"] .question-counter.completo { color:#f3ce70; }

/* Ao responder tudo, o botão de continuar ganha um realce curto. */
[data-screen="preferences"] .sticky-action .primary-button { transition:box-shadow .4s ease; }
[data-screen="preferences"] #preferenceQuestions.completo ~ .sticky-action .primary-button { box-shadow:0 0 0 4px #f3ce7038; }

@media (prefers-reduced-motion:reduce) {
 [data-screen="preferences"] .question-card.revelado.entrando { animation:none; }
 [data-screen="preferences"] .question-card.entrando::after { animation:none; box-shadow:none; }
}

/* ── Tela multifocal: campos de visão, um nível por vez ─────────────────────
   Foto no lugar do diagrama: o cliente não precisa traduzir uma convenção de
   cores para entender o que vai enxergar — ele vê. Um nível de cada vez e em
   largura total porque os rótulos "Longe / Intermediário / Perto" vêm dentro
   da imagem: partida ao meio, ela fica ilegível no tamanho real da tela.
   As quatro fotos têm de ser a MESMA cena, MESMA armação e MESMO enquadramento.
   Se a sala muda junto com a lente, a comparação deixa de provar o que diz —
   ver assets/multifocal/LEIA-ME.txt. */
[data-screen="multifocal"] .mf-campos { margin-top:22px; }
[data-screen="multifocal"] .mf-niveis { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
[data-screen="multifocal"] .mf-nivel { min-height:52px; padding:10px 6px; border-radius:14px; border:1px solid #37608d; background:#0e2b4d; color:#d5eaff; font:700 15px/1.2 var(--sans); cursor:pointer; }
[data-screen="multifocal"] .mf-nivel[aria-selected="true"] { background:#f3ce70; border-color:#f3ce70; color:#10213b; }
[data-screen="multifocal"] .mf-vista { margin:14px 0 0; }
[data-screen="multifocal"] .mf-vista-frame { position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:#0e2b4d; border:1px solid #37608d; }
[data-screen="multifocal"] .mf-vista-frame img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
[data-screen="multifocal"] .mf-vista.sem-foto img { display:none; }
[data-screen="multifocal"] .mf-vista-ghost { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:4px; padding:14px; text-align:center; }
[data-screen="multifocal"] .mf-vista-ghost svg { width:min(40%,150px); fill:none; stroke:#3f6793; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; margin-bottom:10px; }
[data-screen="multifocal"] .mf-vista-ghost b { font:800 12px/1.3 var(--sans); letter-spacing:.1em; color:#88a9cf; }
[data-screen="multifocal"] .mf-vista-ghost small { font:600 11px/1.3 var(--sans); color:#5e80a8; }
[data-screen="multifocal"] .mf-vista-tag { position:absolute; z-index:2; left:12px; bottom:12px; padding:7px 14px; border-radius:999px; background:#f3ce70; color:#10213b; font:800 12px/1 var(--sans); letter-spacing:.08em; }
/* Altura mínima: as legendas têm comprimentos diferentes, e sem isto a página
   pula para cima e para baixo a cada toque. */
[data-screen="multifocal"] .mf-vista figcaption { margin-top:12px; font-size:15px; line-height:1.5; color:#a8c8ef; min-height:3em; }

/* Os quatro fatores de adaptação. */
:is([data-screen="marcas"],[data-screen="multifocal"]) .trait-list { display:grid; gap:2px; margin-top:6px; list-style:none; }
:is([data-screen="marcas"],[data-screen="multifocal"]) .trait { display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:start; padding:16px 0; border-top:1px solid #2f557f; }
:is([data-screen="marcas"],[data-screen="multifocal"]) .trait:first-child { border-top:0; padding-top:4px; }
:is([data-screen="marcas"],[data-screen="multifocal"]) .trait-icon { width:52px; height:52px; border-radius:15px; background:#0e2b4d; display:grid; place-items:center; }
:is([data-screen="marcas"],[data-screen="multifocal"]) .trait-icon svg { width:28px; height:28px; fill:none; stroke:#65b8ff; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
:is([data-screen="marcas"],[data-screen="multifocal"]) .trait b { display:block; font:700 18px/1.3 var(--sans); color:#fff; }
:is([data-screen="marcas"],[data-screen="multifocal"]) .trait small { display:block; margin-top:5px; font-size:15px; line-height:1.55; color:#b4c4da; }

/* Prioridade: respostas longas pedem uma coluna, não três colunas apertadas. */
[data-screen="multifocal"] .answer-group.wide { grid-template-columns:1fr; gap:10px; margin-top:18px; }
[data-screen="multifocal"] .answer-group.wide button { min-height:62px; font-size:16px; text-align:left; padding:14px 20px; }

@media (max-width:600px) {
 [data-screen="multifocal"] .mf-niveis { gap:6px; }
 [data-screen="multifocal"] .mf-nivel { min-height:46px; padding:8px 4px; border-radius:11px; font-size:12px; }
 [data-screen="multifocal"] .mf-vista figcaption { font-size:13px; min-height:3.6em; }
 [data-screen="multifocal"] .mf-vista-tag { left:8px; bottom:8px; padding:6px 10px; font-size:10px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait { grid-template-columns:42px minmax(0,1fr); gap:12px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait-icon { width:42px; height:42px; border-radius:12px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait-icon svg { width:23px; height:23px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait b { font-size:16px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait small { font-size:13px; }
 [data-screen="multifocal"] .answer-group.wide button { font-size:14px; min-height:56px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="multifocal"] .mf-campos { margin-top:30px; }
 [data-screen="multifocal"] .mf-niveis { gap:14px; }
 [data-screen="multifocal"] .mf-nivel { min-height:74px; border-radius:20px; font-size:22px; }
 [data-screen="multifocal"] .mf-vista { margin-top:20px; }
 [data-screen="multifocal"] .mf-vista figcaption { margin-top:18px; font-size:20px; }
 [data-screen="multifocal"] .mf-vista-tag { left:18px; bottom:18px; padding:10px 20px; font-size:16px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait { grid-template-columns:72px minmax(0,1fr); gap:22px; padding:24px 0; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait-icon { width:72px; height:72px; border-radius:20px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait-icon svg { width:40px; height:40px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait b { font-size:25px; }
 :is([data-screen="marcas"],[data-screen="multifocal"]) .trait small { font-size:20px; }
 [data-screen="multifocal"] .answer-group.wide button { min-height:82px; font-size:22px; padding:18px 26px; }
}

/* Marcas de destaque: só aparecem para quem deu algum peso à marca (ver
   deveMostrarMarcasDestaque). Tratamento tipográfico, sem logotipos — são
   marcas de terceiros, e o nome bem composto informa igual sem imitar ninguém. */
[data-screen="marcas"] .brand-highlights { margin-top:24px; padding-top:22px; border-top:1px solid #2f557f; }
[data-screen="marcas"] .brand-highlights[hidden] { display:none; }
[data-screen="marcas"] .brand-highlights.entrando { animation:marcasEntram .5s cubic-bezier(.2,.85,.25,1) both; }
@keyframes marcasEntram { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
[data-screen="marcas"] .brand-highlights-lead { font-size:16px; line-height:1.6; color:#c3d7ed; }
[data-screen="marcas"] .brand-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
[data-screen="marcas"] .brand-card { display:grid; justify-items:center; gap:7px; padding:22px 14px; border:1px solid #3d6491; border-radius:18px; background:#0e2b4d; text-align:center; }
[data-screen="marcas"] .brand-card::before { content:''; width:34px; height:3px; border-radius:2px; background:#f3ce70; margin-bottom:4px; }
[data-screen="marcas"] .brand-card b { font:700 22px/1.15 var(--sans); color:#fff; letter-spacing:-.01em; }
[data-screen="marcas"] .brand-card small { font:600 12px/1.3 var(--sans); color:#a8c8ef; letter-spacing:.04em; }
@media (max-width:600px) {
 [data-screen="marcas"] .brand-highlights { margin-top:18px; padding-top:16px; }
 [data-screen="marcas"] .brand-highlights-lead { font-size:14px; }
 [data-screen="marcas"] .brand-grid { gap:8px; }
 [data-screen="marcas"] .brand-card { padding:16px 8px; border-radius:14px; }
 [data-screen="marcas"] .brand-card b { font-size:17px; }
 [data-screen="marcas"] .brand-card small { font-size:10px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="marcas"] .brand-highlights { margin-top:34px; padding-top:30px; }
 [data-screen="marcas"] .brand-highlights-lead { font-size:21px; }
 [data-screen="marcas"] .brand-grid { gap:22px; margin-top:24px; }
 [data-screen="marcas"] .brand-card { padding:32px 20px; border-radius:22px; gap:10px; }
 [data-screen="marcas"] .brand-card::before { width:46px; height:4px; }
 [data-screen="marcas"] .brand-card b { font-size:31px; }
 [data-screen="marcas"] .brand-card small { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
 [data-screen="marcas"] .brand-highlights.entrando { animation:none; }
}

/* Atalho da tela de lentes: para quem já sabe o que quer e não precisa do
   perfil visual nem das telas temáticas. Discreto de propósito — é uma saída
   lateral, não um concorrente da ação principal. Fica escondido (e não
   desabilitado) até tipo de visão e receita existirem: oferecer um caminho
   que ainda não leva a lugar nenhum só gera toque frustrado. */
[data-screen="lenses"] .fast-track { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:14px; min-height:54px; padding:0 18px; border:1px solid #2f557f; border-radius:14px; background:none; color:#a8c8ef; font:500 15px/1.35 var(--sans); cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; }
[data-screen="lenses"] .fast-track[hidden] { display:none; }
[data-screen="lenses"] .fast-track b { font-weight:700; color:#d5eaff; }
[data-screen="lenses"] .fast-track:hover { background:#112f52; border-color:#4a7bad; color:#d5eaff; }
[data-screen="lenses"] .fast-track:active { transform:scale(.995); }
[data-screen="lenses"] .fast-track-icon { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; }
[data-screen="lenses"] .fast-track-icon svg { width:18px; height:18px; fill:none; stroke:#f3ce70; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
[data-screen="lenses"] .fast-track-seta { font-size:17px; opacity:.75; }
@media (max-width:600px) {
 [data-screen="lenses"] .fast-track { font-size:13px; min-height:50px; gap:8px; padding:0 12px; }
 [data-screen="lenses"] .fast-track-icon { width:22px; flex-basis:22px; }
}
@media (orientation:portrait) and (min-width:700px) and (min-height:1000px) {
 [data-screen="lenses"] .fast-track { margin-top:20px; min-height:74px; font-size:20px; gap:14px; border-radius:18px; }
 [data-screen="lenses"] .fast-track-icon { width:32px; height:32px; flex-basis:32px; }
 [data-screen="lenses"] .fast-track-icon svg { width:24px; height:24px; }
 [data-screen="lenses"] .fast-track-seta { font-size:22px; }
}

/* ── Fotossensível: vídeo e cores lado a lado ────────────────────────────────
   Antes eram dois cards empilhados, e escolher a cor exigia rolar a tela — a
   pessoa perdia de vista justamente o vídeo que a escolha muda. Num totem em pé
   sobra largura e falta altura: as duas coisas cabem lado a lado, e aí tocar
   numa cor e ver a lente trocar acontece no mesmo campo de visão.
   Abaixo de 820px volta a empilhar (celular, janela estreita). */
[data-screen="fotossensivel"] .fs-layout { display:grid; gap:22px; align-items:start; }
[data-screen="fotossensivel"] .fs-cores { margin-top:0; }
[data-screen="fotossensivel"] .fs-cores-titulo { display:flex; align-items:center; gap:10px; margin:0 0 4px; font:700 20px/1.25 var(--sans); color:#fff; }
[data-screen="fotossensivel"] .fs-cores-icone { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:#0e2b4d; }
[data-screen="fotossensivel"] .fs-cores-icone svg { width:18px; fill:none; stroke:#68bbff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[data-screen="fotossensivel"] .fs-cores .swatch-lead { margin-top:8px; }

@media (min-width:820px) {
  [data-screen="fotossensivel"] .fs-layout { grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:26px; }
  /* Na coluna o vídeo usa a largura toda dela; o limite de 520px era para quando
     ele ocupava o card inteiro. */
  [data-screen="fotossensivel"] .fs-layout .photo-compare-video .photo-shot { width:100%; }

  /* Nove cores em 3x3, e os chips encolhem. Com o tamanho de toque original a
     coluna passava de 1800px de altura — lado a lado, mas com o mesmo scroll de
     antes, que era justamente o que queríamos matar. Aqui o 3x3 fecha perto da
     altura do vídeo: escolher e ver acontecem sem rolar. */
  [data-screen="fotossensivel"] .fs-layout .swatch-grid { grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
  [data-screen="fotossensivel"] .fs-layout .swatch-chip { padding:12px 8px 11px; border-radius:16px; }
  [data-screen="fotossensivel"] .fs-layout .swatch-lens { width:min(100%,66px); }
  [data-screen="fotossensivel"] .fs-layout .swatch-chip b { font-size:15px; margin-top:8px; }
  [data-screen="fotossensivel"] .fs-layout .swatch-chip small { font-size:11px; line-height:1.25; }
  [data-screen="fotossensivel"] .fs-layout .swatch-check { width:20px; height:20px; font-size:11px; line-height:20px; top:7px; right:7px; }

  /* Se ainda sobrar altura na direita, o vídeo acompanha em vez de sair de vista. */
  [data-screen="fotossensivel"] .fs-layout > .photo-compare-video { position:sticky; top:16px; }
}

/* ── Pareamento do totem ─────────────────────────────────────────────────────
   Tela de gerente, não de cliente: sem ilustração, sem narração, o essencial
   grande o bastante para ser lido em pé na frente de um painel de 32". */
[data-screen="pairing"] .pairing-form { display:grid; gap:14px; margin-top:18px; }
[data-screen="pairing"] .pairing-form label { display:grid; gap:8px; }
[data-screen="pairing"] .pairing-form label span { font:700 12px/1 var(--sans); letter-spacing:.14em; color:#a8c8ef; }
[data-screen="pairing"] .pairing-form input { min-height:58px; padding:0 18px; border-radius:14px; border:1px solid #37608d; background:#0e2b4d; color:#fff; font:600 18px/1 var(--sans); }
[data-screen="pairing"] .pairing-form input:focus { outline:none; border-color:#68bbff; box-shadow:0 0 0 3px #68bbff2e; }
[data-screen="pairing"] .pairing-atual { display:grid; gap:4px; padding:16px 18px; margin-top:4px; border-radius:16px; background:#0e2b4d; border:1px solid #37608d; }
[data-screen="pairing"] .pairing-atual b { font:700 22px/1.2 var(--sans); color:#fff; }
[data-screen="pairing"] .pairing-atual small { font:600 14px/1.3 var(--sans); color:#a8c8ef; }
[data-screen="pairing"] .pairing-atual .secondary-button { justify-self:start; margin-top:10px; }
[data-screen="pairing"] .pairing-status { margin:14px 0 0; padding:12px 14px; border-radius:12px; background:#10213b; border:1px solid #3d6491; font:600 15px/1.45 var(--sans); color:#f3ce70; }

/* [hidden] perde para qualquer display explícito: sem esta linha o bloco da loja
   pareada aparecia com "—" mesmo antes de existir pareamento. */
[data-screen="pairing"] .pairing-atual[hidden] { display:none; }

/* Dois vídeos empilhados para a troca de cor não piscar. Trocar o src de um
   <video> destrói o quadro atual: aparece o poster por um instante e só depois
   o clipe novo — na tela isso lê como uma tremida. Aqui o que está no ar só sai
   quando o novo já tem imagem pronta.
   
   A TROCA É SECA, SEM CROSSFADE, e isso é o ponto. Com meio segundo de
   opacidade parcial os dois clipes se sobrepõem e as cores SE MISTURAM: saindo
   de âmbar e entrando pink, o que aparece por um instante é marrom — justo numa
   tela cujo trabalho é mostrar cor. O que resolvia a tremida era não deixar a
   moldura vazia, e disso o segundo vídeo já dá conta. */
[data-screen="fotossensivel"] .photo-shot-frame .fs-video { opacity:0; }
[data-screen="fotossensivel"] .photo-shot-frame .fs-video.fs-ativo { opacity:1; }

/* ── Antirreflexo: a comparacao virou escolha ───────────────────────────────
   As duas fotos nao eram clicaveis e a tela parecia decorativa: a pessoa
   olhava a diferenca e seguia sem que nada disso chegasse na busca. */
.photo-shot.escolhivel { cursor:pointer; border-radius:18px; transition:box-shadow .16s ease, transform .16s ease; }
.photo-shot.escolhivel:focus-visible { outline:3px solid #f3ce70; outline-offset:3px; }
.photo-shot.escolhivel[aria-pressed="true"] { box-shadow:0 0 0 3px #f3ce70; transform:translateY(-2px); }
.photo-shot-escolha { display:block; margin-top:9px; text-align:center; font:800 11px/1.2 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:#8aa6c4; }
.photo-shot.escolhivel[aria-pressed="true"] .photo-shot-escolha { color:#f3ce70; }

/* Residual travado: fica visivel, mas nao se escolhe o brilho de fundo de um
   tratamento que nao foi escolhido. */
.swatch-block.travado .swatch-grid { opacity:.38; pointer-events:none; filter:grayscale(1); }
.swatch-aviso { margin:0 0 12px; padding:11px 14px; border-radius:12px; background:#173b64; color:#f3ce70; font:700 13px/1.4 var(--sans); }
.swatch-aviso[hidden] { display:none; }