:root {
  --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --fundo: #0e0720;
  --fundo-2: #150a2e;
  --cartao: #1a0f38;
  --borda: rgba(196, 181, 253, .14);
  --lilas: #c4b5fd;
  --roxo: #8b5cf6;
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
/* "hidden" vale mesmo com classes como flex/inline-flex */
[hidden] { display: none !important; }
body { font-family: var(--font-body); background: var(--fundo); color: #e9e5f5; }
.font-heading { font-family: var(--font-heading); }

/* Topo: transparente sobre o hero, fica sólido ao rolar */
.topo { transition: background-color .25s, box-shadow .25s; }
.topo.rolou { background: rgba(14, 7, 32, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--borda); }
.nav-u { position: relative; }
.nav-u::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--lilas); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-u:hover::after, .nav-u.ativo::after { transform: scaleX(1); }
.nav-u.ativo { color: var(--lilas); }

/* Seletor de idioma: lista com o nome de cada idioma na própria língua; o atual fica destacado */
.idioma-lista a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .75rem; border-radius: .5rem; font-size: .875rem; color: rgba(255, 255, 255, .85); transition: background-color .15s; }
.idioma-lista a:hover { background: rgba(196, 181, 253, .1); color: #fff; }
.idioma-lista small { font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: rgba(255, 255, 255, .4); }
.idioma-lista a.atual { background: var(--roxo); color: #fff; }
.idioma-lista a.atual small { color: #ede9fe; }
#idioma-btn.aberto .seta { transform: rotate(180deg); }
#idioma-btn.aberto { border-color: rgba(196, 181, 253, .6); }

/* Painel lateral do celular */
.painel { transform: translateX(100%); transition: transform .3s ease; }
.painel.aberto { transform: translateX(0); }
.veu { opacity: 0; pointer-events: none; transition: opacity .3s; }
.veu.aberto { opacity: 1; pointer-events: auto; }

/* Hero */
.hero {
  background:
    radial-gradient(45rem 30rem at 50% 0%, rgba(139, 92, 246, .35), transparent 70%),
    radial-gradient(30rem 25rem at 100% 60%, rgba(168, 85, 247, .18), transparent 70%),
    var(--fundo);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(196, 181, 253, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 181, 253, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.texto-lateral {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-heading); font-weight: 800; letter-spacing: .35em;
  color: transparent; -webkit-text-stroke: 1px rgba(196, 181, 253, .12);
}
.estrela { position: absolute; color: var(--lilas); pointer-events: none; animation: brilho 4s ease-in-out infinite; }
@keyframes brilho { 0%, 100% { opacity: .35; transform: scale(.9) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }

.animar { opacity: 0; animation: subir .8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.d1 { animation-delay: .15s; } .d2 { animation-delay: .3s; } .d3 { animation-delay: .45s; } .d4 { animation-delay: .6s; }

/* Faixa inclinada com palavras correndo */
.faixa { transform: rotate(-3deg); margin: 0 -2rem; background: linear-gradient(90deg, #7c3aed, #a855f7); }
.faixa-trilho { display: flex; width: max-content; animation: correr 40s linear infinite; }
@keyframes correr { to { transform: translateX(-50%); } }

/* Aparecer ao rolar */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visto { opacity: 1; transform: none; }

/* Cartões */
.cartao { background: linear-gradient(180deg, var(--cartao), var(--fundo-2)); border: 1px solid var(--borda); }
/* Cartão com página própria: o link "Saiba mais"/"Ver prazo" cobre o cartão inteiro; os outros botões ficam por cima */
:has(> .link-cartao) { position: relative; transition: opacity .7s ease, transform .7s ease, border-color .2s, box-shadow .2s; }
:has(> .link-cartao):hover { border-color: rgba(196, 181, 253, .5); box-shadow: 0 12px 40px -12px rgba(139, 92, 246, .45); }
.link-cartao::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:has(> .link-cartao) > a:not(.link-cartao) { position: relative; z-index: 1; }
:has(> .link-cartao):hover .link-cartao { color: #ddd6fe; }
.hexagono { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.listras { background-image: repeating-linear-gradient(135deg, rgba(196, 181, 253, .12) 0 2px, transparent 2px 14px); }

/* Área do cliente: etapas do projeto (feita, em andamento, a seguir) */
.etapa { border-color: var(--borda); transition: border-color .3s, background-color .3s; }
.etapa-icone { border: 1px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .5); }
.etapa-feita { border-color: rgba(139, 92, 246, .35); background: rgba(139, 92, 246, .08); }
.etapa-feita .etapa-icone { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.etapa-feita .etapa-status { color: var(--lilas); }
.etapa-atual { border-color: rgba(196, 181, 253, .7); background: linear-gradient(180deg, rgba(139, 92, 246, .28), rgba(139, 92, 246, .06)); box-shadow: 0 14px 40px -16px rgba(139, 92, 246, .6); }
.etapa-atual .etapa-icone { background: #fff; border-color: #fff; color: #5b21b6; animation: pulsar 2s ease-out infinite; }
.etapa-atual .etapa-status { color: #f0abfc; }
.etapa-proxima { opacity: .55; }
.etapa-proxima .etapa-status { color: rgba(255, 255, 255, .45); }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(196, 181, 253, .6); } 100% { box-shadow: 0 0 0 14px rgba(196, 181, 253, 0); } }

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .mais { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .animar, .revelar { opacity: 1; transform: none; animation: none; transition: none; }
  .faixa-trilho, .estrela, .etapa-atual .etapa-icone { animation: none; }
}