/* Sideral Host - páginas do site (2026): carrossel de banners, carrossel de planos e o visual próprio de cada página.
   Mantém o padrão do site: botões suaves de borda fina, hover sólido com texto branco, cursor de mão e ícones em cards. */

/* ---------- Temas de cor (usados por banners e páginas de produto) ---------- */
[data-tema], .bn__slide { --t1: #1e3a8a; --t2: #2563eb; --t3: #93c5fd; --ts: #dbeafe; }
[data-tema="verde"], .bn__slide--verde { --t1: #064e3b; --t2: #059669; --t3: #6ee7b7; --ts: #d1fae5; }
[data-tema="roxo"], .bn__slide--roxo { --t1: #3b0764; --t2: #7c3aed; --t3: #c4b5fd; --ts: #ede9fe; }
[data-tema="teal"] { --t1: #134e4a; --t2: #0d9488; --t3: #5eead4; --ts: #ccfbf1; }
[data-tema="vermelho"] { --t1: #7f1d1d; --t2: #dc2626; --t3: #fca5a5; --ts: #fee2e2; }
[data-tema="laranja"], .bn__slide--laranja { --t1: #7c2d12; --t2: #ea580c; --t3: #fdba74; --ts: #ffedd5; }
[data-tema="rosa"] { --t1: #831843; --t2: #db2777; --t3: #f9a8d4; --ts: #fce7f3; }
[data-tema="ciano"] { --t1: #164e63; --t2: #0891b2; --t3: #67e8f9; --ts: #cffafe; }
[data-tema="indigo"] { --t1: #312e81; --t2: #4f46e5; --t3: #a5b4fc; --ts: #e0e7ff; }
.bn__slide--escuro { --t1: #020617; --t2: #1e293b; --t3: #38bdf8; --ts: #e0f2fe; }

/* ---------- Peças comuns ---------- */
.ic { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.1rem; }
.ic--g { width: 64px; height: 64px; border-radius: 18px; font-size: 1.7rem; }
.ic--azul { background: #dbeafe; color: #1d4ed8; }
.ic--verde { background: #dcfce7; color: #15803d; }
.ic--roxo { background: #ede9fe; color: #6d28d9; }
.ic--laranja { background: #ffedd5; color: #c2410c; }
.ic--vermelho { background: #fee2e2; color: #b91c1c; }
.ic--rosa { background: #fce7f3; color: #be185d; }
.ic--teal { background: #ccfbf1; color: #0f766e; }
.ic--cinza { background: #e2e8f0; color: #334155; }

.sobretitulo { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 4px 12px; border: 1px solid #bfdbfe; border-radius: 999px; background: var(--az-claro); color: var(--az-esc); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.secao__cab { max-width: 760px; margin: 0 auto 36px; text-align: center; }

.btn--branco { background: #fff; border-color: #fff; color: var(--t1, #1e3a8a); box-shadow: 0 10px 24px -12px rgba(2,6,23,.5); }
.btn--branco:hover { background: var(--t1, #0b1b4d); border-color: #fff; color: #fff; }
.bn .btn--invertido:hover, .ph .btn--invertido:hover, .pd .btn--invertido:hover { background: var(--t1, #0b1b4d); border-color: #fff; color: #fff; }

/* Ícones coloridos nos cards (cada card com uma cor, em sequência) */
.cards-cor > :nth-child(6n+1) > i { background: #dbeafe; border-color: #bfdbfe; color: #1d4ed8; }
.cards-cor > :nth-child(6n+2) > i { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.cards-cor > :nth-child(6n+3) > i { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
.cards-cor > :nth-child(6n+4) > i { background: #ffedd5; border-color: #fed7aa; color: #c2410c; }
.cards-cor > :nth-child(6n+5) > i { background: #fce7f3; border-color: #fbcfe8; color: #be185d; }
.cards-cor > :nth-child(6n+6) > i { background: #ccfbf1; border-color: #99f6e4; color: #0f766e; }
.cards-cor a.card:hover > i { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
.card { box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card--estatico:hover { box-shadow: var(--sombra); transform: translateY(-2px); border-color: var(--borda); }
.grade-cards--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.beneficios .beneficio:nth-child(6n+2) > i { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 8px 18px -8px rgba(5,150,105,.6); }
.beneficios .beneficio:nth-child(6n+3) > i { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 8px 18px -8px rgba(124,58,237,.6); }
.beneficios .beneficio:nth-child(6n+4) > i { background: linear-gradient(135deg, #ea580c, #fb923c); box-shadow: 0 8px 18px -8px rgba(234,88,12,.6); }
.beneficios .beneficio:nth-child(6n+5) > i { background: linear-gradient(135deg, #db2777, #f472b6); box-shadow: 0 8px 18px -8px rgba(219,39,119,.6); }
.beneficios .beneficio:nth-child(6n+6) > i { background: linear-gradient(135deg, #0d9488, #2dd4bf); box-shadow: 0 8px 18px -8px rgba(13,148,136,.6); }
.confianca__in > div:nth-child(2) i { background: #dcfce7; border-color: #bbf7d0; color: #15803d; }
.confianca__in > div:nth-child(3) i { background: #ede9fe; border-color: #ddd6fe; color: #6d28d9; }
.confianca__in > div:nth-child(4) i { background: #ffedd5; border-color: #fed7aa; color: #c2410c; }

/* Passos com ícone colorido */
.passos--cor li > span { width: 52px; height: 52px; border-radius: 15px; font-size: 1.3rem; background: #dbeafe; color: #1d4ed8; }
.passos--cor li:nth-child(2) > span { background: #ede9fe; color: #6d28d9; }
.passos--cor li:nth-child(3) > span { background: #dcfce7; color: #15803d; }

/* ---------- Carrossel de banners (home) ---------- */
.bn { position: relative; overflow: hidden; color: #fff; background: #0b1b4d; }
.bn__pista { display: grid; }
.bn__slide { position: relative; grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.bn__slide::before { content: ""; position: absolute; inset: 0; background: radial-gradient(640px 380px at 86% 8%, var(--t3), transparent 70%); opacity: .38; }
.bn__slide::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(180deg, #000, transparent 90%); pointer-events: none; }
.bn__slide.is-ativo { opacity: 1; visibility: visible; z-index: 1; }
.bn__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 32px; min-height: 470px; padding: 60px 40px 88px; }
.bn__selo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 5px 14px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.12); font-size: .82rem; font-weight: 700; letter-spacing: .03em; }
.bn h2 { margin: 0 0 14px; color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 800; line-height: 1.1; }
.bn h2 em { font-style: normal; background: linear-gradient(90deg, #fff, var(--t3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bn__txt > p { max-width: 54ch; margin-bottom: 20px; color: rgba(255,255,255,.88); font-size: 1.08rem; }
.bn__preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: rgba(255,255,255,.85); }
.bn__preco strong { color: #fff; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1; letter-spacing: -.02em; }
.bn__preco small { font-size: 1.1rem; font-weight: 600; }
.bn__off { align-self: center; padding: 4px 12px; border-radius: 999px; background: #fde047; color: #713f12; font-size: .82rem; }
.bn__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.bn__acoes .btn + .btn { margin-left: 0; }
.bn__busca { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 4px 0 16px; padding: 6px; border-radius: 14px; background: #fff; color: var(--tx); box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.bn__busca i { padding-left: 12px; color: var(--tx3); }
.bn__busca input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font-size: 1rem; }
.bn__busca .btn--primario { background: var(--t2); border-color: var(--t2); }
.bn__busca .btn--primario:hover { background: var(--t1); border-color: var(--t1); }
.bn__tlds { display: flex; flex-wrap: wrap; gap: 8px; }
.bn__tlds li { padding: 3px 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .85rem; font-weight: 600; }

.bn__arte { position: relative; height: 340px; }
.bn__orb { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 30px 60px -24px rgba(0,0,0,.5), 0 0 0 28px rgba(255,255,255,.05), 0 0 0 64px rgba(255,255,255,.03); font-size: 6rem; color: #fff; }
.bn__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: #fff; color: var(--t1); font-size: .88rem; font-weight: 700; box-shadow: 0 16px 30px -14px rgba(0,0,0,.55); animation: bn-flutua 5s ease-in-out infinite; }
.bn__chip i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ts); color: var(--t2); }
.bn__chip--1 { left: 2%; top: 12%; }
.bn__chip--2 { right: 0; top: 40%; animation-delay: -1.7s; }
.bn__chip--3 { left: 10%; bottom: 8%; animation-delay: -3.2s; }
@keyframes bn-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.bn__seta { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -23px; border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; cursor: pointer; transition: background-color .15s, border-color .15s; backdrop-filter: blur(4px); }
.bn__seta:hover { background: #0b1b4d; border-color: #fff; color: #fff; }
.bn__seta--ant { left: 16px; } .bn__seta--prox { right: 16px; }
.bn__rodape { position: absolute; z-index: 3; left: 0; right: 0; bottom: 22px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.bn__pontos { display: flex; gap: 8px; }
.bn__ponto { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .25s, background-color .2s; }
.bn__ponto:hover { background: rgba(255,255,255,.75); }
.bn__ponto.is-ativo { width: 30px; background: #fff; }
.bn__pausa { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%; background: transparent; color: #fff; font-size: .75rem; cursor: pointer; transition: background-color .15s; }
.bn__pausa:hover { background: #0b1b4d; border-color: #fff; }
.bn__barra { position: absolute; z-index: 3; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.85); transform-origin: left; transform: scaleX(0); }
.bn.is-rodando .bn__barra { animation: bn-barra var(--bn-ms, 6500ms) linear forwards; }
@keyframes bn-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Carrossel de planos ---------- */
.carrossel[data-n="1"], .carrossel[data-n="2"], .carrossel[data-n="3"] { justify-content: safe center; }
.carrossel[data-n="1"] > .plano, .carrossel[data-n="2"] > .plano, .carrossel[data-n="3"] > .plano { flex: 0 0 min(340px, 86%); }
.car-btn { box-shadow: 0 10px 24px -12px rgba(15,23,42,.45); }
.car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.car-dots[hidden] { display: none; }
.car-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--borda); cursor: pointer; transition: width .25s, background-color .2s; }
.car-dot:hover { background: var(--tx3); }
.car-dot.is-ativo { width: 30px; background: var(--az); }
.ciclos { box-shadow: var(--sombra); }
.secao--planos { background: linear-gradient(180deg, #f8fafc, #fff 60%); }
.secao[data-tema] .sobretitulo { border-color: var(--ts); background: var(--ts); color: var(--t1); }
.secao[data-tema] .plano--destaque { border-color: var(--t2); box-shadow: 0 12px 32px -16px var(--t2); }
.secao[data-tema] .plano__selo, .secao[data-tema] .btn--primario, .secao[data-tema] .ciclo.is-ativo, .secao[data-tema] .ciclo:hover { background: var(--t2); border-color: var(--t2); color: #fff; }
.secao[data-tema] .btn { border-color: var(--t2); color: var(--t2); }
.secao[data-tema] .btn--primario { color: #fff; }
.secao[data-tema] .btn:hover { background: var(--t1); border-color: var(--t1); color: #fff; }
.secao[data-tema] .plano__mais summary, .secao[data-tema] .plano__lista .fa { color: var(--t2); }
.secao[data-tema] .car-dot.is-ativo { background: var(--t2); }
.secao[data-tema] .aba:hover, .secao[data-tema] .aba.is-ativa { background: var(--t2); border-color: var(--t2); }