/* ============================================================
   KLYRO LABS — plano.css
   Estilos exclusivos da página do plano (R$100/mês).
   ============================================================ */

.bg-fixed{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(37,99,235,0.15), transparent 60%),
    radial-gradient(800px 460px at 100% 40%, rgba(30,58,138,0.12), transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 50%, var(--bg-deep) 100%);
}

/* ---------- hero ---------- */
.hero{
  min-height:92svh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:160px 0 80px;
}
.hero > .wrap{ display:flex; flex-direction:column; align-items:center; }
.hero-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--gray-400);
  border:1px solid var(--border-strong); border-radius:999px; padding:7px 16px;
  margin-bottom:30px;
}
.hero-tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.hero h1{
  font-size:clamp(36px, 5.4vw, 66px);
  line-height:1.05; max-width:820px; margin-bottom:26px;
}
.hero h1 .price-inline{ color:var(--blue-soft); white-space:nowrap; }
.hero p.lead{
  font-size:17.5px; line-height:1.7; color:var(--gray-400);
  max-width:560px; margin-bottom:40px;
}
.hero p.lead strong{ color:var(--gray-300); font-weight:600; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:26px; }
.hero-note{ font-size:13px; color:var(--gray-500); }

/* ---------- comparison ---------- */
.compare-sec{ padding:60px 0 110px; }
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto; }
.compare-card{
  border-radius:18px; padding:38px 36px;
  border:1px solid var(--border); background:var(--bg-mid);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.compare-card.new{ will-change:transform; }
.compare-card.old{ opacity:0.85; }
.compare-card.new{
  border-color:rgba(37,99,235,0.45);
  background:linear-gradient(170deg, rgba(37,99,235,0.10), rgba(8,17,32,0.9) 45%);
  position:relative;
}
.compare-card.new::before{
  content:"MODELO KLYRO"; position:absolute; top:-11px; left:32px;
  font-family:'JetBrains Mono'; font-size:10.5px; letter-spacing:0.12em;
  background:var(--blue); color:#fff; padding:4px 12px; border-radius:999px;
}
.compare-card .c-label{
  font-family:'JetBrains Mono'; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gray-500); margin-bottom:18px; display:block;
}
.compare-card .c-price{ font-family:'Space Grotesk'; font-weight:600; line-height:1; margin-bottom:6px; }
.compare-card.old .c-price{ font-size:clamp(26px,3vw,34px); color:var(--gray-400); text-decoration:line-through; text-decoration-color:rgba(248,113,113,0.7); text-decoration-thickness:2px; }
.compare-card.new .c-price{ font-size:clamp(38px,4.4vw,52px); }
.compare-card.new .c-price .cents{ font-size:0.45em; color:var(--blue-soft); font-weight:500; }
.compare-card .c-sub{ font-size:13.5px; color:var(--gray-500); margin-bottom:26px; }
.compare-card ul{ list-style:none; display:flex; flex-direction:column; gap:13px; }
.compare-card li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--gray-300); line-height:1.5; }
.compare-card li svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.compare-card.old li{ color:var(--gray-500); }
.compare-card.old li svg{ color:var(--red-soft); }
.compare-card.new li svg{ color:var(--green); }

/* ---------- niches ---------- */
.niche-grid{ margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.niche-item{ border-top:1px solid var(--border-strong); padding-top:20px; transition:border-color .3s var(--ease); }
.niche-item:hover{ border-top-color:var(--blue); }
.niche-item h3{ font-size:15.5px; margin-bottom:9px; }
.niche-item p{ font-size:13.5px; color:var(--gray-400); line-height:1.65; }

/* ---------- included grid ---------- */
.inc-grid{
  margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:18px; overflow:hidden;
}
.inc-item{ background:var(--bg-mid); padding:32px 28px; transition:background .3s var(--ease); }
.inc-item:hover{ background:#0A1424; }
.inc-item .i-icon{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(37,99,235,0.3); color:var(--blue-soft); margin-bottom:18px;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.inc-item:hover .i-icon{ transform:translateY(-2px); border-color:var(--blue); }
.inc-item .i-icon svg{ width:17px; height:17px; }
.inc-item h3{ font-size:16px; margin-bottom:8px; }
.inc-item p{ font-size:13.5px; color:var(--gray-400); line-height:1.6; }

/* ---------- how it works ---------- */
.steps{ margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:36px; }
.step .s-num{ font-family:'JetBrains Mono'; font-size:12px; color:var(--blue-soft); display:block; margin-bottom:14px; }
.step h3{ font-size:17px; margin-bottom:8px; }
.step p{ font-size:13.5px; color:var(--gray-400); line-height:1.6; }

/* ---------- pricing card ---------- */
.pricing-sec{ padding:110px 0; }
.price-card{
  max-width:520px; margin:56px auto 0;
  border:1px solid rgba(37,99,235,0.4);
  border-radius:22px; padding:48px 44px;
  background:linear-gradient(175deg, rgba(37,99,235,0.10), rgba(8,17,32,0.95) 50%);
  text-align:center; position:relative; isolation:isolate;
  box-shadow:0 40px 100px rgba(0,0,0,0.4);
}
/* aurora suave girando atrás do card */
.price-card::before{
  content:""; position:absolute; inset:-2px; border-radius:24px; z-index:-1;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(37,99,235,0.55) 90deg, transparent 200deg, rgba(91,141,247,0.5) 300deg, transparent 360deg);
  filter:blur(14px); opacity:0.55;
  animation:auroraSpin 9s linear infinite;
}
@keyframes auroraSpin{ to{ transform:rotate(360deg); } }
.price-card .p-plan{
  font-family:'JetBrains Mono'; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue-soft); margin-bottom:22px; display:block;
}
.price-card .p-value{ font-family:'Space Grotesk'; font-weight:600; font-size:clamp(52px,7vw,72px); line-height:1; }
.price-card .p-value .cur{ font-size:0.36em; vertical-align:super; color:var(--gray-400); font-weight:500; margin-right:4px; }
.price-card .p-value .per{ font-size:0.28em; color:var(--gray-500); font-weight:400; }
.price-card .p-desc{ font-size:14px; color:var(--gray-400); margin:14px 0 32px; }
.price-card ul{
  list-style:none; text-align:left; display:flex; flex-direction:column; gap:13px;
  margin-bottom:36px; padding:28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.price-card li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--gray-300); }
.price-card li svg{ width:16px; height:16px; color:var(--green); flex-shrink:0; margin-top:2px; }
.price-card .btn-primary{ width:100%; padding:16px; font-size:15px; }
.price-card .p-foot{ font-size:12.5px; color:var(--gray-500); margin-top:16px; }

/* ---------- faq ---------- */
.faq-list{ margin-top:56px; max-width:760px; }
.faq-item{ border-bottom:1px solid var(--border); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 0; text-align:left; font-size:16px; font-weight:600; font-family:'Space Grotesk';
  transition:color .25s;
}
.faq-q:hover{ color:var(--blue-soft); }
.faq-q .fa-icon{
  width:24px; height:24px; flex-shrink:0; color:var(--gray-500);
  transition:transform .3s var(--ease), color .3s;
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:400;
}
.faq-item.open .fa-icon{ transform:rotate(45deg); color:var(--blue-soft); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 40px 24px 0; font-size:14.5px; color:var(--gray-400); line-height:1.7; }

/* ---------- final cta ---------- */
.final-cta{ padding:130px 0; border-top:1px solid var(--border); text-align:center; }
.final-cta h2{ font-size:clamp(30px,4.4vw,52px); line-height:1.08; margin-bottom:18px; max-width:760px; margin-left:auto; margin-right:auto; }
.final-cta p{ color:var(--gray-400); font-size:16px; max-width:480px; margin:0 auto 36px; line-height:1.7; }

/* ============================================================
   Revelação escalonada — os itens das grades entram em cascata
   quando a seção aparece, dando um toque mais "à mão".
   ============================================================ */
.niche-grid .niche-item,
.inc-grid .inc-item,
.steps .step{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.niche-grid.in .niche-item,
.inc-grid.in .inc-item,
.steps.in .step{ opacity:1; transform:none; }

.niche-grid.in .niche-item:nth-child(1),
.inc-grid.in .inc-item:nth-child(1),
.steps.in .step:nth-child(1){ transition-delay:.04s; }
.niche-grid.in .niche-item:nth-child(2),
.inc-grid.in .inc-item:nth-child(2),
.steps.in .step:nth-child(2){ transition-delay:.10s; }
.niche-grid.in .niche-item:nth-child(3),
.inc-grid.in .inc-item:nth-child(3),
.steps.in .step:nth-child(3){ transition-delay:.16s; }
.niche-grid.in .niche-item:nth-child(4),
.inc-grid.in .inc-item:nth-child(4),
.steps.in .step:nth-child(4){ transition-delay:.22s; }
.niche-grid.in .niche-item:nth-child(5),
.inc-grid.in .inc-item:nth-child(5){ transition-delay:.28s; }
.niche-grid.in .niche-item:nth-child(6),
.inc-grid.in .inc-item:nth-child(6){ transition-delay:.34s; }
.niche-grid.in .niche-item:nth-child(7){ transition-delay:.40s; }
.niche-grid.in .niche-item:nth-child(8){ transition-delay:.46s; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .compare-grid{ grid-template-columns:1fr; max-width:520px; }
  .inc-grid{ grid-template-columns:repeat(2,1fr); }
  .niche-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .inc-grid{ grid-template-columns:1fr; }
  .niche-grid{ grid-template-columns:1fr; gap:26px; }
  .steps{ grid-template-columns:1fr; gap:30px; }
  .pricing-sec{ padding:80px 0; }
  .hero{ padding:140px 0 60px; }
  .price-card{ padding:40px 26px; }
}
@media (prefers-reduced-motion: reduce){
  .price-card::before{ animation:none; }
  .niche-grid .niche-item,
  .inc-grid .inc-item,
  .steps .step{ opacity:1; transform:none; }
}