/* ==========================================================================
   BaseFly — A base que te faz voar
   Base + animações vindas do design original (Claude Design).
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* O header é sticky (78px): compensa o deslocamento das âncoras. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 78px; }
body { font-family: 'Figtree', sans-serif; color: #f4f1fb; background: #0d0a1a; line-height: 1.6; }
a { color: #c084fc; text-decoration: none; }
a:hover { color: #d8b4fe; }
button { cursor: pointer; border: none; font-family: inherit; font-weight: 700; transition: all 0.25s ease; }
input[type=range] { accent-color: #7c3aed; }

@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes grid-move { from { background-position: 0 0; } to { background-position: 0 56px; } }
@keyframes trail-dash { to { background-position: 24px 0; } }
@keyframes node-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes merge-p1 { 0% { left: 50%; top: 170px; opacity: 0; transform: scale(1); } 12% { opacity: 1; } 85% { opacity: 0.9; } 100% { left: 50%; top: 50%; opacity: 0; transform: scale(0.3); } }
@keyframes merge-p2 { 0% { left: calc(100% - 180px); top: 50%; opacity: 0; transform: scale(1); } 12% { opacity: 1; } 85% { opacity: 0.9; } 100% { left: 50%; top: 50%; opacity: 0; transform: scale(0.3); } }
@keyframes merge-p3 { 0% { left: 50%; top: calc(100% - 170px); opacity: 0; transform: scale(1); } 12% { opacity: 1; } 85% { opacity: 0.9; } 100% { left: 50%; top: 50%; opacity: 0; transform: scale(0.3); } }
@keyframes merge-p4 { 0% { left: 180px; top: 50%; opacity: 0; transform: scale(1); } 12% { opacity: 1; } 85% { opacity: 0.9; } 100% { left: 50%; top: 50%; opacity: 0; transform: scale(0.3); } }
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbit-counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes nucleo-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 36px rgba(217,70,239,0.45); } 50% { transform: scale(1.1); box-shadow: 0 0 64px rgba(217,70,239,0.75); } }
@keyframes col-pulse { 0%,100% { transform: scale(1); box-shadow: 0 0 20px rgba(217,70,239,0.3); border-color: rgba(217,70,239,0.5); } 50% { transform: scale(1.022); box-shadow: 0 0 48px rgba(217,70,239,0.65); border-color: rgba(217,70,239,0.95); } }
@keyframes layer-float0 { 0%,100% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(0px); } 50% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(12px); } }
@keyframes layer-float1 { 0%,100% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(44px); } 50% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(58px); } }
@keyframes layer-float2 { 0%,100% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(88px); } 50% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(104px); } }
@keyframes layer-float3 { 0%,100% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(132px); } 50% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(150px); } }
@keyframes layer-float4 { 0%,100% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(176px); } 50% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(196px); } }
@keyframes layer-float5 { 0%,100% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(220px); } 50% { transform: rotateX(58deg) rotateZ(-45deg) translateZ(242px); } }

/* --------------------------------------------------------------------------
   Estados de hover (eram `style-hover` no design; viram classes aqui).
   `!important` porque as declarações-base são inline, como no original.
   -------------------------------------------------------------------------- */
.hv-1:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(124,58,237,0.45) !important;
}
.hv-2:hover {
  background: rgba(124,58,237,0.16) !important;
  transform: translateY(-6px) !important;
}
.hv-3:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 48px rgba(217,70,239,0.7) !important;
}
.hv-4:hover {
  background: rgba(124,58,237,0.15) !important;
  box-shadow: 0 8px 24px rgba(124,58,237,0.2) !important;
}
.hv-5:hover {
  transform: translateY(-2px) !important;
}

/* Foco visível para navegação por teclado nos controles da calculadora. */
[data-click]:focus-visible {
  outline: 2px solid #d946ef;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Camada responsiva. O design é desenhado para 1240px; abaixo disso as
   grades fixas são convertidas em colunas e as composições absolutas
   (stack isométrico, órbita, timelines) viram empilhamentos verticais.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .nav-main { gap: 20px !important; }
  .nav-main a { font-size: 13px !important; }
  .grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-visual { height: 460px !important; }
  /* minmax(0,…): sem isso o min-content do painel de resumo estica a grade. */
  .calc-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr !important; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Só os links somem; o CTA do topo continua acessível. */
  .nav-main a { display: none !important; }

  .hero-stats { flex-wrap: wrap; gap: 28px !important; }
  .grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-3 { grid-template-columns: 1fr !important; }

  /* Órbita dos pilares: cartões empilhados, decoração removida. */
  .orbit { height: auto !important; }
  .orbit > div:nth-child(1),
  .orbit > div:nth-child(2) { display: none !important; }
  .orbit > div:nth-child(3) {
    position: static !important;
    transform: none !important;
    margin: 0 auto 28px !important;
  }
  .orbit > div:nth-child(4) {
    position: static !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .orbit > div:nth-child(4) > div[style*="animation: merge"] { display: none !important; }
  .orbit > div:nth-child(4) > div {
    position: static !important;
    transform: none !important;
    inset: auto !important;
  }
  .orbit > div:nth-child(4) > div > div { animation: none !important; }
  .orbit > div:nth-child(4) > div > div > div { width: auto !important; }

  /* Timelines: o trilho horizontal vira uma coluna simples. */
  .timeline { height: auto !important; }
  .timeline > div:not(.timeline-grid) { display: none !important; }
  .timeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
  }
  .timeline-grid > div { height: auto !important; gap: 10px; }
  .timeline-grid > div > div[style*="flex: 1"]:empty { display: none !important; }
  .timeline-grid > div > div[style*="height: 14px"] { display: none !important; }
  .timeline-grid > div > div[style*="padding-bottom: 16px"],
  .timeline-grid > div > div[style*="padding-top: 16px"] { padding: 0 !important; }

  /* Comparativo: 4 colunas ainda cabem, mas apertadas — reduz o texto. */
  .compare-grid { font-size: 13px; }
}

@media (max-width: 720px) {
  section { padding-left: 18px !important; padding-right: 18px !important; }
  h1 { font-size: 38px !important; min-height: 0 !important; letter-spacing: -1px !important; }
  h2 { font-size: 30px !important; }
  .hero-visual { height: 380px !important; }
  .grid-5 { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .orbit > div:nth-child(4),
  .timeline-grid { grid-template-columns: 1fr !important; }

  /* Calculadora: o conteúdo mínimo dos seletores estourava a viewport. */
  .calc-panel { padding: 24px 18px !important; }
  .calc-models { grid-template-columns: 1fr !important; }
  .calc-bands { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .price-row { gap: 8px !important; }
  .price-row > div:first-child div:last-child { font-size: 30px !important; }
  .price-row > div:last-child div:last-child { font-size: 22px !important; }

  /* Tabela comparativa rola horizontalmente em vez de espremer. */
  .compare-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
    min-width: 640px;
  }
  .compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}