/* ---------- apresentação: foto em tela cheia, texto branco e botão de vidro ---------- */
#intro { padding: calc(var(--safe-top) + 4px) 24px 34px; color: #fff; background: #0B2A52; }
#intro > * { position: relative; z-index: 1; }
#intro > .illus { position: absolute; inset: 0; z-index: 0; }
.illus img { width: 100%; height: 100%; object-fit: cover; display: block; }
.illus::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0,.25) 0%, rgba(0, 0, 0,0) 30%, rgba(0, 0, 0,.15) 50%, rgba(0, 0, 0,.82) 100%); }
/* topo: marca no centro e "Pular" preto à direita */
.intro-top { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 19px; letter-spacing: -0.4px; }
.brand img { border-radius: 0; }
.link { border: 0; background: none; color: var(--sec); font-size: 17px; font-weight: 500; min-height: 44px; padding: 0 4px; }
#intro .link { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #fff; padding: 0 18px; border-radius: 999px; background: var(--brand); font-size: 15px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#intro .link:hover { background: var(--brand-deep); }
#intro { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.intro-text { margin-top: auto; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.intro-text h1 { font-size: 34px; color: #fff; font-style: normal; font-weight: 700; }
.intro-text .sub { color: rgba(255,255,255,.86); }
.intro-foot { padding-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* pontinhos: cada um é um botão (área de toque de 44px) e o atual estica */
#intro .dots { display: flex; gap: 0; margin: 0; }
#intro .dots button { min-width: 28px; height: 44px; padding: 0 4px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
#intro .dots span { display: block; height: 6px; width: 6px; border-radius: 3px; background: rgba(255,255,255,.45); transition: width .25s cubic-bezier(.2, .8, .2, 1), background .2s; }
#intro .dots button.on span { width: 22px; background: #fff; }
/* botão de avançar: branco sobre a foto, toque simples */
#introNext { display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; color: var(--ink); border: 0; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
#introNext:hover { background: #F4F4F5; }
#introNext svg { flex: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
#introNext:hover svg { transform: translateX(3px); }