/* Dr. Zico · Perdido no Espaço — estilos (versão limpa).
   Paleta dos vídeos: fundo #0F0418 / roxo-noite, neon por cima (magenta, ciano, amarelo, lima, roxo #A000D5). Fonte Inter. */
:root {
  --fundo: #0F0418; --fundo2: #1a0a3a;
  --magenta: #ff3da8; --ciano: #34e0ff; --amarelo: #ffd34a; --lima: #7dff4d; --roxo: #A000D5; --roxo-esc: #1F0041;
  --txt: #f4f1ff; --txt2: #b9b0e8; --card: rgba(46, 20, 120, 0.45); --borda: rgba(180, 160, 255, 0.16);
  --r: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, sans-serif; color: var(--txt); background: var(--fundo); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
#ceu { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
main, footer, header { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
h1, h2, h3 { letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.08; }
h2 em { font-style: normal; color: var(--magenta); }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3d5a; box-shadow: 0 0 10px #ff3d5a; animation: pisca 1.2s infinite; flex: none; }
@keyframes pisca { 50% { opacity: .25; } }
.selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255,61,168,.14); border: 1px solid rgba(255,61,168,.45); color: #ffb3dc; font-weight: 700; font-size: 12px; letter-spacing: .08em; }
.selo i { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); animation: pisca 1.2s infinite; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; border: 0; cursor: pointer; font-family: inherit; transition: transform .15s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); }
.btn.am { color: #2a1200; background: linear-gradient(180deg, #ffe680, var(--amarelo) 55%, #f0a81a); box-shadow: 0 6px 0 #b86a0a, 0 0 24px rgba(255,211,74,.35); }
.btn.mg { color: #fff; background: linear-gradient(180deg, #ff7ac4, var(--magenta) 55%, #c4127a); box-shadow: 0 6px 0 #7a0a4a, 0 0 24px rgba(255,61,168,.35); }
.btn.roxo { color: #fff; background: var(--roxo); border: 4px solid var(--roxo-esc); box-shadow: inset 0 0 0 4px rgba(255,255,255,.2), 0 0 30px rgba(160,0,213,.6); }
.btn.sm { padding: 10px 18px; font-size: 14px; }

/* ================= HERÓI ================= */
/* barra de navegação flutuante (fixa no topo, vidro escuro) */
.topo { position: fixed; z-index: 50; top: 14px; left: 50%; translate: -50% 0; width: min(1180px, calc(100% - 24px)); height: 60px; display: flex; align-items: center; gap: 20px; padding: 0 10px 0 24px; background: rgba(15,4,24,.72); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.topo-logo { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; }
.topo-links { display: flex; gap: 4px; margin: 0 auto; }
.topo-links a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; color: #e6e1ff; white-space: nowrap; }
.topo-links a:hover { background: rgba(255,255,255,.08); color: #fff; }
.topo-cta { padding: 11px 20px; border-radius: 999px; background: var(--roxo); border: 3px solid var(--roxo-esc); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), 0 0 20px rgba(160,0,213,.55); font-weight: 700; font-size: 14px; white-space: nowrap; }

.hz { position: relative; z-index: 2; width: 100%; height: clamp(620px, 90svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; background: var(--fundo); overflow: hidden; overflow: clip; isolation: isolate; }
.hz-arte { position: absolute; left: -2%; top: 0; width: 104%; max-width: none; height: 74%; object-fit: cover; object-position: 50% 26%; z-index: -4; will-change: transform; }
.hz canvas { position: absolute; left: 0; top: 0; width: 100%; height: 74%; z-index: -3; pointer-events: none; }
/* escurecimento forte embaixo: o texto fica sempre sobre fundo escuro e legível */
.hz-fade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(180deg, rgba(15,4,24,.35) 0, rgba(15,4,24,0) 14%, rgba(15,4,24,0) 34%, rgba(15,4,24,.75) 50%, var(--fundo) 64%); }
.hz-blur { position: absolute; z-index: 1; pointer-events: none; filter: blur(2px); will-change: transform; }
.hz-pocao { left: -4%; top: 20%; width: clamp(150px, 22vw, 440px); animation: flutuaA 6.5s ease-in-out infinite; }
.hz-rocha { right: -5%; top: 30%; width: clamp(130px, 20vw, 400px); animation: flutuaB 8s ease-in-out infinite; }
@keyframes flutuaA { 0%, 100% { translate: 0 0; rotate: 0deg; } 33% { translate: 1.2vw -2.4vw; rotate: 6deg; } 66% { translate: -.6vw 1.4vw; rotate: -4deg; } }
@keyframes flutuaB { 0%, 100% { translate: 0 0; rotate: 0deg; } 40% { translate: -1.4vw 2vw; rotate: -7deg; } 75% { translate: .8vw -1.6vw; rotate: 5deg; } }
.hz-texto { position: relative; z-index: 3; width: 100%; padding: 0 20px; margin-bottom: clamp(70px, 7vw, 120px); text-align: center; }
.hz-texto::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -12%; width: min(1100px, 110%); height: 124%; translate: -50% 0; background: radial-gradient(ellipse at center, rgba(15,4,24,.85) 30%, rgba(15,4,24,0) 70%); pointer-events: none; }
.hz-texto h1 { font-size: clamp(30px, 3.4vw, 62px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 8px 30px rgba(15,4,24,.9); }
.hz-texto p { font-size: clamp(15px, 1.25vw, 21px); line-height: 1.4; max-width: 40em; margin: clamp(12px, 1.3vw, 24px) auto 0; opacity: .95; }
.hz-btn { display: inline-grid; place-items: center; margin-top: clamp(20px, 2.2vw, 40px); width: clamp(260px, 26vw, 480px); height: clamp(56px, 5.2vw, 96px); border-radius: 999px; background: var(--roxo); border: clamp(3px, .4vw, 7px) solid var(--roxo-esc); box-shadow: inset 0 0 0 clamp(3px, .4vw, 7px) rgba(255,255,255,.2), 0 0 2.6vw rgba(160,0,213,.75), 0 0 6vw rgba(122,44,255,.3); color: #fff; font-weight: 700; font-size: clamp(16px, 1.35vw, 24px); transition: transform .15s; }
.hz-btn:hover { transform: translateY(-3px) scale(1.02); }
.hz-atalhos { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: clamp(14px, 1.3vw, 22px); }
.hz-atalhos a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-weight: 600; font-size: clamp(13px, .95vw, 15px); backdrop-filter: blur(6px); }
.hz-atalhos a:hover { background: rgba(255,255,255,.16); }
/* divisor de seção: faixa inteira, encostada na borda do herói, desaparecendo suave embaixo; sobe com o scroll (JS) */
.divisor { position: relative; z-index: 3; margin-top: clamp(-150px, -9vw, -60px); height: clamp(110px, 13vw, 240px); overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.divisor img { display: block; width: max(1400px, 108%); max-width: none; margin-left: 50%; translate: -50% 0; height: auto; transform-origin: 50% 100%; will-change: transform; }

/* ================= SEÇÕES ================= */
.sec { padding-top: clamp(56px, 7vw, 96px); }
.tit { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.tit p { color: var(--txt2); font-weight: 500; max-width: 520px; margin-top: 6px; }
.centro { text-align: center; margin-bottom: 24px; }

/* ao vivo */
.univ { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--borda); aspect-ratio: 16 / 7; min-height: 360px; background: #0a0228; box-shadow: 0 30px 70px rgba(5,0,30,.55); }
.univ canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hud { position: absolute; z-index: 2; }
.hud .rot { color: var(--txt2); font-weight: 600; font-size: 13px; }
.hud-esq { top: 18px; left: 20px; }
.hud-esq .km { font-weight: 800; font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.03em; color: var(--ciano); text-shadow: 0 0 24px rgba(52,224,255,.55); line-height: 1.05; margin-top: 8px; font-variant-numeric: tabular-nums; }
.hud-esq .km small { font-size: .42em; color: var(--txt2); margin-left: 6px; text-shadow: none; }
.hud-dir { top: 18px; right: 20px; text-align: right; }
.hud-dir .val { font-weight: 800; font-size: 32px; letter-spacing: -0.03em; }
.hud-baixo { left: 20px; right: 20px; bottom: 16px; }
.hud-baixo .leg { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; font-size: 13px; color: var(--txt2); margin-bottom: 8px; }
.trilho { height: 10px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.fill { height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--magenta), var(--amarelo)); box-shadow: 0 0 14px rgba(255,211,74,.6); transition: width 1.4s cubic-bezier(.2,.9,.2,1.1); }
.ultimo { margin-top: 12px; text-align: center; color: var(--txt2); font-weight: 500; font-size: 15px; }
.ultimo b { color: #fff; }

/* ao vivo + loja lado a lado */
.sec-vivo { padding-top: clamp(24px, 3vw, 48px); }
/* campo ao vivo maior que o resto da página (sai da coluna de 1180px), para caber uma frota inteira */
.vivo-loja { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(330px, 1fr); gap: 20px; align-items: stretch; width: min(1560px, calc(100vw - 32px)); margin-left: 50%; translate: -50% 0; }
.vivo-loja .univ { aspect-ratio: auto; height: clamp(600px, 50vw, 820px); }
.loja { display: flex; flex-direction: column; background: linear-gradient(170deg, rgba(60,26,170,.45), rgba(20,8,70,.75)); border: 1px solid var(--borda); border-radius: 28px; padding: 18px; height: clamp(600px, 50vw, 820px); min-height: 0; }
.loja-topo h3 { font-size: 22px; font-weight: 800; }
.loja-topo p { color: var(--txt2); font-size: 14px; font-weight: 500; margin: 4px 0 14px; }
.loja .abas { margin-bottom: 12px; }
.loja .abas button { padding: 8px 14px; font-size: 13px; }
.lista { display: grid; gap: 10px; overflow-y: auto; padding-right: 4px; flex: 1; min-height: 0; align-content: start; scrollbar-width: thin; scrollbar-color: rgba(180,160,255,.35) transparent; }
.li { display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "arte txt" "acao acao"; gap: 10px 12px; padding: 12px; border-radius: 18px; background: rgba(12,2,48,.55); border: 1px solid var(--borda); transition: border-color .2s, transform .2s; }
.li:hover { border-color: rgba(52,224,255,.45); transform: translateY(-2px); }
.li-arte { grid-area: arte; width: 64px; height: 64px; border-radius: 14px; background: radial-gradient(circle, rgba(255,255,255,.1), rgba(12,2,40,.6) 70%); display: grid; place-items: center; }
.li-arte svg, .li-arte img { width: 54px !important; height: 54px !important; object-fit: contain; }
.li-txt { grid-area: txt; min-width: 0; }
.li-txt h4 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.li-txt p { color: var(--txt2); font-size: 12.5px; font-weight: 500; line-height: 1.35; margin-top: 3px; }
.li .tag { background: var(--magenta); color: #fff; font-weight: 800; font-size: 9px; letter-spacing: .08em; padding: 3px 7px; border-radius: 999px; }
.li-acao { grid-area: acao; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.li .preco { font-size: 19px; font-weight: 800; color: var(--amarelo); letter-spacing: -0.03em; }
.li .preco s { font-size: 12px; color: var(--txt2); margin-right: 6px; font-weight: 600; }
.li .btn.sm { padding: 8px 16px; font-size: 13px; box-shadow: 0 4px 0 #b86a0a; }
.loja .aviso { margin-top: 10px; font-size: 12px; }

/* loja */
.abas { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.abas button { font-family: inherit; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--borda); background: rgba(255,255,255,.06); color: var(--txt2); cursor: pointer; white-space: nowrap; }
.abas button.on { background: var(--ciano); color: #062a3a; border-color: transparent; box-shadow: 0 0 18px rgba(52,224,255,.45); }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.item { position: relative; background: linear-gradient(170deg, rgba(70,30,190,.5), rgba(22,8,70,.8)); border: 1px solid var(--borda); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s; }
.item:hover { transform: translateY(-4px); }
.item .arte { height: 150px; border-radius: 18px; background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.08), rgba(12,2,40,.7) 70%); display: grid; place-items: center; }
.item .arte svg, .item .arte img { width: 120px; height: 120px; object-fit: contain; animation: flutuaA 5s ease-in-out infinite; }
.item h3 { font-size: 19px; font-weight: 700; }
.item p { color: var(--txt2); font-weight: 500; font-size: 14px; line-height: 1.4; flex: 1; }
.item .rod { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item .preco { font-size: 22px; font-weight: 800; color: var(--amarelo); letter-spacing: -0.03em; }
.item .preco s { font-size: 13px; color: var(--txt2); margin-right: 6px; font-weight: 600; }
.item .tag { position: absolute; top: 12px; right: 12px; background: var(--magenta); color: #fff; font-weight: 800; font-size: 10px; letter-spacing: .08em; padding: 5px 9px; border-radius: 999px; }
.aviso { margin-top: 14px; color: var(--txt2); font-weight: 500; font-size: 13px; text-align: center; }

/* linha do tempo (rolagem horizontal) */
.setas { display: flex; gap: 8px; }
.setas button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borda); background: rgba(255,255,255,.06); color: #fff; font-size: 18px; cursor: pointer; font-family: inherit; }
/* "passe de batalha": trilho horizontal no meio, cards alternando em cima/embaixo, rolagem lateral */
.marcos { --col: 240px; --h: 150px; position: relative; display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 0 20px 14px; height: calc(var(--h) * 2 + 96px + 14px); scrollbar-width: thin; scrollbar-color: rgba(180,160,255,.35) transparent; }
.bp-trilho { position: absolute; left: 20px; top: calc(var(--h) + 48px - 4px); height: 8px; width: calc(var(--col) * 0.62 * 6 + var(--col)); border-radius: 99px; background: rgba(180,160,255,.18); }
.bp-trilho i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lima), var(--amarelo)); box-shadow: 0 0 14px rgba(125,255,77,.6); }
.bp { position: relative; flex: 0 0 var(--col); margin-right: calc(var(--col) * -0.38); scroll-snap-align: start; display: grid; grid-template-rows: var(--h) 96px var(--h); justify-items: center; }
.bp .mc { grid-row: 1; align-self: end; width: 100%; }
.bp.baixo .mc { grid-row: 3; align-self: start; }
.bp-no { grid-row: 2; align-self: center; position: relative; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2a1a6a; border: 3px solid rgba(180,160,255,.5); font-weight: 800; font-size: 15px; }
.bp.feito .bp-no { background: var(--lima); border-color: #c8ffb0; color: #0a3a0a; box-shadow: 0 0 18px var(--lima); }
.bp.prox .bp-no { background: var(--amarelo); border-color: #fff3c0; color: #3a2000; box-shadow: 0 0 18px var(--amarelo); animation: pulsa 1.4s infinite; }
@keyframes pulsa { 50% { transform: scale(1.15); } }
.bp-km { display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255,211,74,.12); font-size: 11.5px; font-weight: 800; color: var(--amarelo); white-space: nowrap; }
.bp.feito .bp-km { color: var(--lima); background: rgba(125,255,77,.12); }
/* haste ligando card ao nó */
.bp .mc::after { content: ""; position: absolute; left: 50%; width: 2px; height: 28px; background: rgba(180,160,255,.35); }
.bp.cima .mc::after { top: 100%; } .bp.baixo .mc::after { bottom: 100%; }
.bp.feito .mc::after { background: var(--lima); } .bp.prox .mc::after { background: var(--amarelo); }
.mc { position: relative; background: var(--card); border: 1px solid var(--borda); border-radius: 20px; padding: 14px; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.mc .ic svg { width: 56px; height: 56px; }
.mc h3 { font-size: 15px; font-weight: 700; line-height: 1.25; }
.mc p { color: var(--txt2); font-size: 12.5px; font-weight: 500; line-height: 1.35; margin-top: 4px; }
.mc.feito { border-color: rgba(125,255,77,.55); background: linear-gradient(160deg, rgba(125,255,77,.12), var(--card)); }
.mc.prox { border-color: rgba(255,211,74,.65); background: linear-gradient(160deg, rgba(255,211,74,.12), var(--card)); }
.mc.trancado .ic { filter: grayscale(.8) brightness(.6); } .mc.trancado h3 { color: var(--txt2); }
@media (max-width: 760px) { .marcos { --col: 210px; --h: 150px; } }

/* escola */
.escola2 { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center; background: linear-gradient(120deg, rgba(122,0,255,.3), rgba(255,61,168,.16)); border: 1px solid var(--borda); border-radius: 28px; padding: 22px 28px; }
.escola2 img { width: 120px; }
.escola2 h3 { font-size: 22px; font-weight: 800; margin: 10px 0 6px; }
.escola2 p { color: var(--txt2); font-weight: 500; }
.esc-preco { display: grid; justify-items: center; gap: 4px; }
.esc-preco .de { color: var(--txt2); text-decoration: line-through; font-weight: 600; }
.esc-preco b { font-size: 32px; font-weight: 800; color: var(--amarelo); letter-spacing: -0.03em; }

/* como funciona */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passo { background: var(--card); border: 1px solid var(--borda); border-radius: var(--r); padding: 24px; }
.passo .num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(180deg, #b23cff, #7000d6); font-weight: 800; font-size: 20px; box-shadow: 0 0 22px rgba(160,0,213,.5); margin-bottom: 14px; }
.passo h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.passo p { color: var(--txt2); font-weight: 500; line-height: 1.45; }
.passo p b { color: var(--amarelo); }

footer { padding: 64px 0 40px; color: var(--txt2); font-weight: 500; font-size: 13px; text-align: center; line-height: 1.6; }
footer a { color: var(--ciano); }

/* pop-up de compra */
dialog#compra { border: 0; padding: 0; margin: auto; width: min(460px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; border-radius: 26px; color: var(--txt); background: linear-gradient(170deg, #2a0f7a, #12054a); box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); font-family: inherit; }
dialog#compra::backdrop { background: rgba(5,0,20,.72); backdrop-filter: blur(6px); }
dialog#compra[open] { animation: cpEntra .28s cubic-bezier(.2,1.4,.4,1); }
@keyframes cpEntra { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.cp-fechar { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; cursor: pointer; }
.cp-corpo { padding: 24px; }
.cp-topo { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; margin-bottom: 18px; padding-right: 30px; }
.cp-arte { width: 88px; height: 88px; border-radius: 20px; background: rgba(12,2,48,.6); display: grid; place-items: center; }
.cp-arte svg, .cp-arte img { width: 76px !important; height: 76px !important; }
.cp-topo h3 { font-size: 20px; font-weight: 800; }
.cp-topo p { color: var(--txt2); font-size: 14px; margin-top: 4px; line-height: 1.4; }
#cp-form { display: grid; gap: 14px; }
#cp-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
#cp-form small { color: var(--txt2); font-weight: 500; }
#cp-form input:not([type=radio]) { font: inherit; font-size: 16px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--borda); background: rgba(12,2,48,.6); color: #fff; outline: none; }
#cp-form input:focus { border-color: var(--ciano); box-shadow: 0 0 0 3px rgba(52,224,255,.2); }
#cp-form fieldset { border: 0; } #cp-form legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.cores { display: flex; gap: 10px; }
.cor input { position: absolute; opacity: 0; }
.cor span { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); cursor: pointer; border: 3px solid transparent; }
.cor input:checked + span { border-color: #fff; transform: scale(1.1); }
.cor input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.cp-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); font-weight: 600; }
.cp-total b { font-size: 26px; color: var(--amarelo); letter-spacing: -0.03em; }
.cp-pagar { width: 100%; }
.cp-seg { text-align: center; color: var(--txt2); font-size: 12px; }
.cp-aviso { text-align: center; color: var(--amarelo); font-weight: 600; font-size: 14px; padding: 12px; border-radius: 14px; background: rgba(255,211,74,.1); }

/* ================= TABLET ================= */
@media (max-width: 1000px) {
  .grade { grid-template-columns: 1fr 1fr; }
  .topo-links a:not(:first-child) { display: none; }
  .vivo-loja { grid-template-columns: 1fr; }
  .vivo-loja .univ { height: clamp(520px, 80vw, 700px); }
  .loja { height: auto; }
  .lista { overflow: visible; grid-template-columns: 1fr 1fr; }
}

/* ================= CELULAR ================= */
@media (max-width: 760px) {
  .topo { top: 8px; height: 52px; padding: 0 6px 0 16px; gap: 8px; }
  .topo-logo { font-size: 17px; }
  .topo-links { margin: 0 0 0 auto; }
  .topo-links a { padding: 7px 10px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.08); }
  .topo-cta { padding: 9px 14px; font-size: 12px; border-width: 2px; }
  .hz { height: auto; overflow: hidden; }
  .hz-arte { position: relative; left: 0; width: 100%; height: 96vw; max-height: 500px; object-position: 47% 22%; }
  .hz canvas { height: 96vw; max-height: 500px; }
  .hz-fade { background: linear-gradient(180deg, rgba(15,4,24,.4) 0, rgba(15,4,24,0) 16vw, rgba(15,4,24,0) 50vw, rgba(15,4,24,.85) 76vw, var(--fundo) 92vw); }
  .hz-pocao { top: 44vw; width: 32vw; left: -12vw; }
  .hz-rocha { top: 54vw; width: 28vw; right: -10vw; }
  .hz-texto { margin-top: -18vw; margin-bottom: 30px; }
  .divisor { margin-top: -28px; height: 96px; }
  .divisor img { width: 900px; }
  .vivo-loja .univ { height: auto; aspect-ratio: 3 / 4; }
  .lista { grid-template-columns: 1fr; }
  .hz-texto h1 { font-size: 27px; line-height: 1.12; }
  .hz-texto h1 br { display: none; }
  .hz-texto p { font-size: 15px; }
  .hz-btn { width: min(100%, 340px); height: 56px; font-size: 17px; margin-top: 20px; }
  .hz-atalhos { gap: 8px; }
  .hz-atalhos a { padding: 9px 14px; font-size: 13px; }
  .hz-faixa { position: relative; left: -15%; width: 130%; bottom: auto; margin-bottom: -6px; }

  h2 { font-size: 28px; }
  .univ { aspect-ratio: 4 / 5; min-height: 0; border-radius: 22px; }
  .hud-dir .val { font-size: 26px; }
  .grade { grid-template-columns: 1fr; gap: 12px; }
  .item { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "arte h" "arte p" "rod rod"; column-gap: 14px; row-gap: 4px; padding: 14px; }
  .item .arte { grid-area: arte; height: 92px; border-radius: 16px; }
  .item .arte svg, .item .arte img { width: 76px; height: 76px; }
  .item h3 { grid-area: h; font-size: 17px; align-self: end; padding-right: 72px; }
  .item p { grid-area: p; font-size: 13px; }
  .item .rod { grid-area: rod; margin-top: 8px; }
  .item .tag { top: 10px; right: 10px; }
  .escola2 { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px; }
  .passos { grid-template-columns: 1fr; }
  .passo { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 18px; }
  .passo .num { grid-row: span 2; margin: 0; }
}

/* ================= CHECKLIST (checklist.html) ================= */
header { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(14px); background: rgba(15,4,24,.7); border-bottom: 1px solid var(--borda); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; white-space: nowrap; }
.logo .bola { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--ciano) 22%, #1a6aff 60%, #0a1a6a 100%); box-shadow: 0 0 16px var(--ciano); }
.logo small { display: block; color: var(--magenta); font-size: 10px; letter-spacing: .16em; }
.menu { display: flex; gap: 6px; }
.menu a { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--txt2); }
.menu a.cta { background: var(--magenta); color: #fff; }
.neon { color: var(--amarelo); }
.sub { color: var(--txt2); font-size: 17px; font-weight: 500; line-height: 1.5; max-width: 640px; }
.painel { background: linear-gradient(160deg, rgba(60,26,170,.6), rgba(20,8,80,.8)); border: 1px solid var(--borda); border-radius: 26px; padding: 22px; }
.barra .trilho { height: 16px; }
.barra .leg { display: flex; justify-content: space-between; margin-top: 8px; color: var(--txt2); font-weight: 700; font-size: 14px; }
.ck-top { padding: 40px 0 10px; }
.ck-top h1 { font-size: clamp(32px, 5vw, 54px); font-weight: 800; margin: 14px 0 12px; }
.ck-grupo { margin-top: 18px; }
.ck-grupo summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--borda); border-radius: var(--r); padding: 16px 20px; font-weight: 800; font-size: 19px; }
.ck-grupo summary::-webkit-details-marker { display: none; }
.ck-grupo summary .n { margin-left: auto; font-size: 14px; color: var(--txt2); }
.ck-grupo summary .mini { width: 90px; height: 10px; border-radius: 99px; background: rgba(12,2,48,.7); overflow: hidden; }
.ck-grupo summary .mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--amarelo)); }
.ck-lista { list-style: none; display: grid; gap: 8px; padding: 12px 6px 4px; }
.ck-lista label { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.04); border-radius: 16px; padding: 12px 14px; cursor: pointer; font-weight: 600; line-height: 1.4; }
.ck-lista input { appearance: none; flex: 0 0 26px; height: 26px; border-radius: 9px; border: 2px solid rgba(180,160,255,.5); display: grid; place-items: center; cursor: pointer; }
.ck-lista input:checked { background: var(--lima); border-color: var(--lima); }
.ck-lista input:checked::after { content: "✓"; color: #0a3a0a; font-weight: 900; }
.ck-lista input:checked + span { color: var(--txt2); text-decoration: line-through; }
.ck-lista small { display: block; color: var(--txt2); font-weight: 500; font-size: 13px; margin-top: 2px; }
.st { font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 3px 8px; border-radius: 99px; margin-left: 6px; }
.st.and { background: rgba(255,211,74,.18); color: var(--amarelo); }
.st.voce { background: rgba(255,61,168,.18); color: #ff9ad2; }
@media (max-width: 620px) { .ck-grupo summary .mini { display: none; } }
/* impede que filhos de grid estiquem a página no celular */
.vivo-loja > *, .loja, .lista, .li, .li-txt { min-width: 0; }