/* Etapa 9 — slides, entrada pública, instalação e guia de primeira vez. Não muda a identidade visual (cores, letras e fotografias). */

/* ---------- Slides: fotografias inteiras (proporção do original 1408×768), sem texto por cima ---------- */
.cx-story { position: relative; }
.cx-story-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 18px; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; background: #E6EEF1; }
.cx-story-track::-webkit-scrollbar { display: none; }
.cx-story-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; aspect-ratio: 1408 / 768; background: #E6EEF1; overflow: hidden; }
.cx-story-slide picture, .cx-story-slide img { display: block; width: 100%; height: 100%; }
.cx-story-slide img { object-fit: cover; } /* a caixa tem a proporção da imagem: nada é cortado, a legenda desenhada fica inteira */
.cx-story-slide figcaption { position: static; background: none; padding: 0; color: inherit; text-shadow: none; }
.cxp-slide .cx-story-slide { aspect-ratio: 1408 / 768; }
.cxp-slide .cx-story-dots, .cxp-slide .cx-story-num { display: flex !important; }
.cx-story-note { display: flex; gap: .4rem; align-items: flex-start; font-size: .88rem; color: #3C5462; background: #F1F6F8; border-radius: 12px; padding: .45rem .7rem; margin: 0 0 .5rem; line-height: 1.35; }
.cx-story-note i { color: var(--cx-primary-2, #0b5cad); margin-top: .1rem; }

/* controlos: setas e pontos com área de toque ≥ 44 px de altura */
.cx-story-ctrl { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; }
.cx-story-arrow { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #24414F; display: grid; place-items: center; font-size: 1.15rem; }
.cx-story-arrow:hover { background: #EEF3F5; }
.cx-story-dots { display: flex; justify-content: center; gap: 0; margin: 0; }
.cx-story-dots button { border: 0; background: none; padding: 0; width: 30px; height: 44px; display: grid; place-items: center; }
.cx-story-dots span { width: 9px; height: 9px; border-radius: 9px; background: #B9C7CF; transition: width .2s, background-color .2s; }
.cx-story-dots button.active span { width: 24px; background: var(--cx-accent, #1B9A45); }
.cx-story-arrow:focus-visible, .cx-story-dots button:focus-visible, .cx-story-pause:focus-visible, .cx-story-track:focus-visible { outline: 3px solid var(--cx-primary-2, #0b5cad); outline-offset: 2px; }
.cx-story-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: -2px; }
.cx-story-hint { margin: 0; font-size: .84rem; color: #4A6170; line-height: 1.3; min-width: 0; }
.cx-story-pause { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; min-height: 44px; padding: 0 .6rem; border: 0; background: none; color: var(--cx-link, #0b5cad); font-weight: 600; font-size: .88rem; }
.cx-story.is-single .cx-story-ctrl, .cx-story.is-single .cx-story-foot { display: none; }

/* introdução genérica (outras profissões): os mesmos passos, em cartões, sem fotografias */
.cx-story--cards .cx-story-track { background: #F1F6F8; }
.cx-story-card { aspect-ratio: auto; min-height: 168px; display: flex; gap: .9rem; align-items: center; padding: 1.1rem 1.1rem; background: linear-gradient(135deg, #F4F9F6 0%, #EAF3F8 100%); }
.cx-story-card-ico { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--cx-accent, #1B9A45); font-size: 1.6rem; box-shadow: 0 2px 8px rgba(8, 40, 55, .08); }
.cx-story-card figcaption { display: flex; flex-direction: column; gap: .2rem; min-width: 0; text-align: left; }
.cx-story-card-n { font-size: .78rem; font-weight: 700; color: #4A6170; text-transform: uppercase; letter-spacing: .03em; }
.cx-story-card strong { font-size: 1.08rem; color: #10303F; line-height: 1.25; }
.cx-story-card figcaption > span:last-child { font-size: .92rem; color: #3C5462; line-height: 1.35; overflow-wrap: anywhere; }

.cx-story-hidebtn { border: 0; background: none; color: #4A6170; font-size: .88rem; font-weight: 600; min-height: 44px; padding: 0 .4rem; }
.cx-story-reopen { display: inline-flex; align-items: center; gap: .35rem; border: 1px dashed #B9C7CF; background: #fff; color: var(--cx-link, #0b5cad); border-radius: 12px; min-height: 44px; padding: 0 .9rem; font-weight: 600; font-size: .9rem; margin: 0 0 .9rem; }
.cx-story-reopen[hidden] { display: none; }

/* Início do cliente: o slide segue a ordem da Etapa 8 (slide → pesquisa), agora com controlos */
.cxc-slide-e9 { margin-bottom: .6rem; }
@media (min-width: 768px) { .cx-story { max-width: 760px; margin-inline: auto; } } /* no computador a imagem fica inteira (sem cortar a legenda) */
@media (prefers-reduced-motion: reduce) { .cx-story-track { scroll-behavior: auto; } .cx-story-dots span { transition: none; } }

/* ---------- Página pública: Criar conta em destaque, Já tenho conta por baixo, instalar como opção ---------- */
.cx-land-actions { display: grid; gap: .6rem; }
.cx-land-explore { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; font-weight: 600; color: var(--cx-link, #0b5cad); text-decoration: none; }
.cx-land-install-box { margin-top: 1rem; border: 1px solid #DCE6EB; border-radius: 16px; padding: .9rem; background: #FAFCFD; }
.cx-land-install-box h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; color: #10303F; }
.cx-land-install-box p { margin: 0 0 .6rem; font-size: .9rem; color: #3C5462; }
.cx-land-install-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
@media (max-width: 359px) { .cx-land-install-row { grid-template-columns: 1fr; } }
.cx-land-install-row .cx-btn { min-height: 44px; white-space: normal; line-height: 1.2; }
.cx-install-status { margin: .6rem 0 0; font-size: .9rem; border-radius: 10px; padding: .5rem .7rem; background: #EEF5FB; color: #123A55; }
.cx-install-status[data-kind="ok"] { background: #E9F7EE; color: #11502A; }
.cx-install-how { margin-top: .6rem; }
.cx-install-how[hidden] { display: none; }
.cx-install-how ol { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .9rem; color: #24414F; }
.cx-install-how li { margin-bottom: .35rem; }
.cx-install-how li.is-mine { font-weight: 600; color: #10303F; }
.cx-install-how li.is-mine::marker { color: var(--cx-accent, #1B9A45); }

/* ---------- Faixa «Instalar» dentro da app: nunca tapa a barra de baixo, o rodapé nem o microfone ---------- */
.cx-install { bottom: calc(84px + env(safe-area-inset-bottom)); max-height: 40vh; overflow: auto; }
@media (min-width: 992px) { .cx-install { bottom: 24px; } }

/* ---------- Guia de primeira vez: sem fundo a bloquear; não tapa a barra de baixo ---------- */
.cx-coach { z-index: 1035; bottom: calc(90px + env(safe-area-inset-bottom)); max-height: calc(100vh - 140px); overflow: auto; }
.cx-coach-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.cx-coach-count { font-size: .82rem; color: #4A6170; font-weight: 600; }
.cx-coach-x { margin-left: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F1F5F7; color: #24414F; display: grid; place-items: center; }
.cx-coach-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.cx-coach-actions .btn { min-height: 44px; flex: 1 1 auto; }
.cx-coach-skip { border: 0; background: none; color: #4A6170; font-weight: 600; min-height: 44px; padding: 0 .3rem; font-size: .9rem; }
.cx-coach-target { z-index: auto; }
.cx-coach-reopen { border: 0; background: none; color: var(--cx-link, #0b5cad); font-weight: 600; font-size: .9rem; min-height: 44px; padding: 0; display: inline-flex; align-items: center; gap: .3rem; }
.cx-coach-reopen[hidden] { display: none; }
@media (min-width: 992px) { .cx-coach { bottom: 24px; } }
/* cartões da introdução genérica: texto alinhado à esquerda e descrição em peso normal (sobrepõe o estilo antigo das legendas) */
.cx-story .cx-story-card figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; text-align: left; font-weight: 400; font-size: 1rem; padding: 0; background: none; color: #3C5462; }
.cx-story .cx-story-card figcaption strong { font-weight: 700; }