/* Visual da página inicial. A San Francisco só existe em aparelhos Apple; nos demais entra a Inter. */
@font-face {
  font-family: "Inter";
  src: url("fontes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

html:has(.pagina-inicial) { overflow-x: clip; }
.pagina-inicial {
  --painel: #121318;
  --linha: rgba(255, 255, 255, .12);
  --texto-claro: #f5f5f7;
  --texto-suave: #a1a1a6;
  --azul-vivo: #2997ff;
  --violeta: #a78bfa;
  --rosa: #f0abfc;
  --degrade: linear-gradient(90deg, var(--azul-vivo), var(--violeta) 55%, var(--rosa));
  background: #050509;
  color: var(--texto-claro);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  overflow-x: clip;
}
.pagina-inicial a { color: var(--azul-vivo); }
.pagina-inicial h1 em, .pagina-inicial h2 em {
  font-style: normal; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pagina-inicial .topo { background: rgba(5, 5, 9, .65); border-color: var(--linha); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.pagina-inicial .marca, .pagina-inicial .marca span { color: var(--texto-claro); }

.pagina-inicial .botao, .pagina-inicial .botao-whatsapp, .pagina-inicial .barra-celular .botao {
  border-radius: 999px; background: #3a3a3c; color: #f5f5f7; box-shadow: none; transition: transform .2s, background .2s;
}
.pagina-inicial .botao:hover { background: #515154; color: #fff; transform: scale(1.03); }
.pagina-inicial .acoes { justify-content: center; }

.pagina-inicial .abertura { position: relative; padding: 64px 0 28px; background: none; text-align: center; overflow: clip; }
.aurora { position: absolute; inset: 0; pointer-events: none; }
.aurora i { position: absolute; width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; border-radius: 50%; filter: blur(90px); opacity: .42; animation: aurora 14s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: -10%; top: 12%; background: var(--azul-vivo); }
.aurora i:nth-child(2) { right: -12%; top: 26%; background: #7c3aed; animation-delay: -5s; }
.aurora i:nth-child(3) { left: 32%; top: 58%; background: #db2777; opacity: .28; animation-delay: -9s; }
@keyframes aurora { to { transform: translate(8%, -10%) scale(1.15); } }

.abertura-texto { position: relative; max-width: 1160px; }
.selo-topo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--linha); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .9rem; }
.selo-topo span { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }
.pagina-inicial h1 { font-size: clamp(2.5rem, 7.6vw, 5.4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; margin: 18px 0; }
.pagina-inicial .destaque { color: #c7c7cc; font-size: clamp(1.1rem, 2.3vw, 1.45rem); max-width: 660px; margin: 0 auto; }

.palco { position: relative; width: min(1040px, 92vw); margin: 48px auto 0; perspective: 1500px; }
.quadro {
  padding: 8px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px;
  background: rgba(255, 255, 255, .07);
  box-shadow: 0 40px 120px rgba(76, 80, 255, .4);
  transform: rotateX(var(--inclinacao, 16deg)) scale(var(--escala, .96));
  transform-origin: 50% 100%;
}
.quadro img { width: 100%; border-radius: 11px; }
.flutuante {
  position: absolute; display: grid; gap: 2px; min-width: 120px; padding: 12px 16px; text-align: left;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px;
  background: rgba(22, 23, 32, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  animation: flutuar 6s ease-in-out infinite;
}
.flutuante small { color: var(--texto-suave); }
.flutuante b { font-size: clamp(1.2rem, 3vw, 1.9rem); letter-spacing: -.02em; line-height: 1.1; }
.f1 { left: -3%; top: 16%; }
.f2 { right: -3%; top: 40%; animation-delay: -2s; }
.f3 { left: 8%; bottom: -5%; animation-delay: -4s; }
.barra { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.barra u { display: block; width: 53%; height: 100%; background: var(--degrade); }
@keyframes flutuar { 50% { transform: translateY(-12px); } }
.legenda-demo { position: relative; margin-top: 44px; color: var(--texto-suave); font-size: .85rem; }

.faixa { overflow: hidden; padding: 16px 0; border-block: 1px solid var(--linha); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.faixa div { display: flex; width: max-content; animation: faixa 90s linear infinite; }
.faixa span { padding: 0 26px; color: var(--texto-suave); white-space: nowrap; }
.faixa span::before { content: "✦"; margin-right: 26px; color: var(--violeta); }
@keyframes faixa { to { transform: translateX(-50%); } }

.pagina-inicial .numeros { background: none; padding: 56px 0 8px; }
.pagina-inicial .numeros strong { display: block; font-size: clamp(2.6rem, 9vw, 5.6rem); line-height: 1.05; letter-spacing: -.04em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pagina-inicial .numeros p { color: var(--texto-suave); }

.pagina-inicial .secao { background: none; color: var(--texto-claro); }
.pagina-inicial .titulo-grande { font-size: clamp(2.2rem, 6.4vw, 4.4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; margin-bottom: 24px; }

.historia { display: grid; gap: 26px; margin-top: 64px; align-items: center; }
.historia > * { min-width: 0; }
.historia h3 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -.025em; }
.historia p { color: #c7c7cc; }
.etiqueta, .pagina-inicial .historia .etiqueta, .pagina-inicial .oferta .etiqueta { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; }
.marcados { margin: 16px 0 0; padding: 0; list-style: none; color: var(--texto-suave); }
.marcados li { padding: 4px 0; }
.marcados li::before { content: "✓"; margin-right: 10px; color: var(--azul-vivo); font-weight: 700; }
.vitrine { position: relative; margin: 0; }
.vitrine::before { content: ""; position: absolute; inset: 6%; background: var(--degrade); filter: blur(60px); opacity: .4; }
.vitrine img { position: relative; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; }

.grade-bento { display: grid; gap: 14px; }
.grade-bento article { position: relative; overflow: hidden; padding: 26px; min-height: 170px; border: 1px solid var(--linha); border-radius: 24px; background: var(--painel); transition: transform .25s, border-color .25s; }
.grade-bento article:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .35); }
.grade-bento h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.grade-bento p { margin: 0; color: #b4b4ba; }
.grade-bento .cor-azul { background: linear-gradient(150deg, rgba(41, 151, 255, .3), var(--painel) 65%); }
.grade-bento .cor-violeta { background: linear-gradient(150deg, rgba(124, 58, 237, .38), var(--painel) 65%); }
.grade-bento .cor-rosa { background: linear-gradient(150deg, rgba(219, 39, 119, .3), var(--painel) 65%); }
.com-imagem { display: grid; gap: 18px; }
.com-imagem img { border-radius: 12px; border: 1px solid var(--linha); }

.oferta { max-width: 860px; padding-block: 56px; text-align: center; border: 1px solid var(--linha); border-radius: 32px; background: radial-gradient(70% 90% at 50% 0%, rgba(124, 58, 237, .4), var(--painel) 72%); }
.oferta p { color: #c7c7cc; }
.pagina-inicial .compra-destaque { color: var(--texto-claro); font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 600; }
.oferta .botao { margin-top: 12px; }

.pagina-inicial details { border-color: var(--linha); }
.pagina-inicial details p { color: var(--texto-suave); }
.pagina-inicial .secao-final { background: radial-gradient(60% 60% at 50% 60%, rgba(41, 151, 255, .22), transparent 75%); text-align: center; }
.pagina-inicial form { background: rgba(255, 255, 255, .06); border: 1px solid var(--linha); border-radius: 24px; text-align: left; }
.pagina-inicial input { background: rgba(0, 0, 0, .5); color: var(--texto-claro); border-color: #48484d; border-radius: 12px; }
.pagina-inicial .aviso { color: var(--texto-suave); }

.pagina-inicial .rodape { background: none; border-top: 1px solid var(--linha); color: var(--texto-suave); }
.pagina-inicial .rodape a { color: var(--texto-claro); }
.pagina-inicial .barra-celular { background: rgba(5, 5, 9, .8); border-color: var(--linha); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

.com-animacao .revelar { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; }
.com-animacao .revelar.visivel { opacity: 1; transform: none; }

@media (max-width: 699px) {
  .flutuante { min-width: 0; padding: 8px 12px; font-size: .78rem; }
  .f1 { left: -1%; top: -8%; }
  .f2 { right: -1%; top: 34%; }
  .f3 { left: 4%; bottom: -14%; }
}

@media (min-width: 700px) {
  .grade-bento { grid-template-columns: repeat(2, 1fr); }
  .largo { grid-column: span 2; }
}

@media (min-width: 960px) {
  .historia { grid-template-columns: 2fr 3fr; gap: 56px; margin-top: 110px; }
  .historia.invertida { grid-template-columns: 3fr 2fr; }
  .historia.invertida > div { order: 2; }
  .grade-bento { grid-template-columns: repeat(3, 1fr); }
  .com-imagem { grid-template-columns: 1fr 1.4fr; align-items: center; }
}


/* Efeito de vidro nas barras e nos botões. */
.pagina-inicial .topo,
.pagina-inicial .barra-celular {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), rgba(18, 19, 26, .5);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, .16);
}
.pagina-inicial .botao,
.pagina-inicial .botao-whatsapp,
.pagina-inicial .barra-celular .botao {
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08)), rgba(58, 58, 60, .55);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 8px 24px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.pagina-inicial .botao:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .14)), rgba(81, 81, 84, .6);
}

/* Vidro mais transparente: menos desfoque e menos preenchimento. */
.pagina-inicial .topo,
.pagina-inicial .barra-celular {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  -webkit-backdrop-filter: blur(8px) saturate(200%);
  backdrop-filter: blur(8px) saturate(200%);
}
.pagina-inicial .botao,
.pagina-inicial .botao-whatsapp,
.pagina-inicial .barra-celular .botao {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(4px) saturate(200%) brightness(1.15);
  backdrop-filter: blur(4px) saturate(200%) brightness(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 6px 18px rgba(0, 0, 0, .3);
}
.pagina-inicial .botao:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07));
}

/* A caixa da oferta mantém margem das bordas da tela. */
.oferta.conteudo { width: min(860px, calc(100% - 32px)); padding-inline: 20px; }