/* ==========================================================================
   landing.css — página de captura (index.html)
   Camada 4 de 4. Exclusivo da landing.
   ========================================================================== */

.page-landing { background: var(--cloud-dancer); }

/* --- Topo ---------------------------------------------------------------- */

.topbar { background: var(--anthracite); color: var(--cloud-dancer); }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap; padding-block: 18px;
}
.topbar__marca { height: 34px; width: auto; }
.topbar__dir { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.topbar__contato { font-size: var(--fs-14); color: var(--on-dark-2); }
.topbar__contato:hover { color: var(--cloud-dancer); }
@media (max-width: 620px) { .topbar__contato { display: none; } }

/* --- Hero ---------------------------------------------------------------- */

.hero { background: var(--anthracite); color: var(--cloud-dancer); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--sp-16); align-items: center; padding-block: 84px 92px;
}
.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--cloud-dancer); margin-bottom: var(--sp-6);
}
.hero__sub { font-size: var(--fs-20); line-height: 1.5; color: var(--on-dark-2); max-width: 46ch; margin-bottom: var(--sp-10); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-10); }
.hero__selos { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.hero__rodape {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8);
  padding-top: var(--sp-6); border-top: 1px solid var(--border-on-dark);
  font-size: var(--fs-14); color: var(--on-dark-3);
}
.hero__rodape strong { color: var(--cloud-dancer); }

/* --- Órbita (símbolos de produto girando ao redor do coração CoreTI) ----- */

.orbita { position: relative; width: 400px; height: 400px; max-width: 100%; display: grid; place-items: center; margin-inline: auto; }
.orbita__espectro {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--spectrum-conic);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 66%, transparent 67%);
          mask: radial-gradient(circle, transparent 61%, #000 62%, #000 66%, transparent 67%);
  animation: coreti-spin 60s linear infinite;
}
.orbita__anel { position: absolute; border-radius: 50%; border: 1px dashed var(--border-on-dark); }
.orbita__anel--1 { inset: 40px; animation: coreti-spin 46s linear infinite; }
.orbita__anel--2 { inset: 108px; animation: coreti-spin-rev 34s linear infinite; }
.orbita__satelite {
  position: absolute; width: 78px; height: 78px; border-radius: 50%;
  background: var(--anthracite-2); border: 1px solid var(--border-on-dark);
  display: grid; place-items: center;
}
.orbita__satelite--top { top: -39px; left: 50%; margin-left: -39px; }
.orbita__satelite--bottom { bottom: -39px; left: 50%; margin-left: -39px; }
.orbita__satelite--left { left: -39px; top: 50%; margin-top: -39px; }
.orbita__satelite--right { right: -39px; top: 50%; margin-top: -39px; }
.orbita__satelite img { width: 46px; height: 46px; object-fit: contain; animation: coreti-spin-rev 46s linear infinite; }
.orbita__nucleo {
  position: relative; width: 176px; height: 176px; border-radius: 50%;
  background: var(--anthracite-2); border: 1px solid var(--border-on-dark);
  display: grid; place-items: center; animation: coreti-float 9s ease-in-out infinite;
}
.orbita__nucleo img { width: 88px; height: 88px; object-fit: contain; }

@keyframes coreti-spin { to { transform: rotate(360deg); } }
@keyframes coreti-spin-rev { to { transform: rotate(-360deg); } }
@keyframes coreti-float { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .orbita__espectro, .orbita__anel, .orbita__satelite img, .orbita__nucleo { animation: none !important; }
}

/* --- Seções genéricas ---------------------------------------------------- */

.secao { padding-block: 96px; }
.secao--claro  { background: var(--cloud-dancer); }
.secao--papel  { background: var(--surface-2); }
.secao--escuro { background: var(--anthracite); color: var(--cloud-dancer); }

.secao__head { max-width: 58ch; margin-bottom: 56px; }
.secao__head .eyebrow { display: block; margin-bottom: var(--sp-4); }
.secao__head h2 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; margin-bottom: var(--sp-4); }
.secao--escuro .secao__head h2 { color: var(--cloud-dancer); }
.secao__head p { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--fg2); }

.eyebrow--bridge  { color: var(--bridge-200); }
.eyebrow--bridge-claro { color: var(--bridge-100); }
.eyebrow--infra   { color: var(--infra-300); }
.eyebrow--service { color: var(--service-200); }
.eyebrow--verde-claro { color: #a5dc9d; }

/* --- Soluções ------------------------------------------------------------ */

.solucoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--sp-5); }
.solucao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-8); transition: box-shadow var(--dur-base), transform var(--dur-base); }
.solucao:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.solucao__icone { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: var(--sp-5); color: #fff; }
.solucao__icone svg { width: 22px; height: 22px; }
.solucao:nth-child(4n+1) .solucao__icone { background: var(--bridge-200); }
.solucao:nth-child(4n+2) .solucao__icone { background: var(--service-200); }
.solucao:nth-child(4n+3) .solucao__icone { background: var(--infra-200); }
.solucao:nth-child(4n+4) .solucao__icone { background: var(--security-200); }
.solucao h3 { font-size: var(--fs-20); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--sp-2); }
.solucao p { font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg2); }

/* --- Argumentos (faixa escura) ------------------------------------------- */

.argumentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px 32px; }
.argumento__tick { width: 40px; height: 3px; border-radius: var(--r-pill); background: var(--spectrum); margin-bottom: var(--sp-5); }
.argumento h3 { font-size: var(--fs-20); line-height: 1.2; margin-bottom: 10px; color: var(--cloud-dancer); }
.argumento p { font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--on-dark-2); }

/* --- Como funciona (passos numerados) ------------------------------------ */

.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-8); }
.passo { border-top: 2px solid var(--border-strong); padding-top: var(--sp-6); }
.passo__num { font-family: var(--font-display); font-weight: var(--w-black); font-size: 56px; line-height: 1; letter-spacing: -0.04em; color: var(--anthracite); margin-bottom: var(--sp-4); }
.passo__num--spectrum { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.passo h3 { font-size: var(--fs-20); line-height: 1.2; margin-bottom: var(--sp-2); }
.passo p { font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--fg2); }

/* --- CTA final ----------------------------------------------------------- */

.cta-final { background: var(--anthracite-2); color: var(--cloud-dancer); padding-block: 96px; text-align: center; }
.cta-final__inner { display: grid; justify-items: center; }
.cta-final img { width: 48px; height: 48px; object-fit: contain; margin-bottom: var(--sp-6); }
.cta-final h2 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; margin-bottom: var(--sp-4); max-width: 24ch; color: var(--cloud-dancer); }
.cta-final p { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--on-dark-2); max-width: 52ch; margin-bottom: var(--sp-8); }

/* --- Seção do formulário ------------------------------------------------- */

.secao-form { background: var(--anthracite); color: var(--cloud-dancer); padding-block: 96px; }
.secao-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: start; }
.secao-form__copy .eyebrow { display: block; margin-bottom: var(--sp-4); }
.secao-form__copy h2 { font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.06; letter-spacing: -0.025em; color: var(--cloud-dancer); margin-bottom: var(--sp-4); }
.secao-form__lead { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--on-dark-2); margin-bottom: var(--sp-8); }
.garantias { display: grid; gap: var(--sp-4); }
.garantias li { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); align-items: start; font-size: var(--fs-14); color: color-mix(in oklab, var(--cloud-dancer) 88%, var(--anthracite)); }
.garantias .marcador { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in oklab, var(--infra-200) 22%, transparent); border: 1px solid color-mix(in oklab, var(--infra-100) 45%, transparent); display: grid; place-items: center; }
.garantias .marcador svg { width: 12px; height: 12px; }

/* Cartão branco do formulário */
.form-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.form-card__corpo { padding: var(--sp-8); }
@media (max-width: 480px) { .form-card__corpo { padding: var(--sp-6) var(--sp-5); } }
.form-card__titulo { font-size: var(--fs-24); line-height: 1.15; color: var(--anthracite); margin-bottom: 6px; }
.form-card__lead { font-size: var(--fs-14); color: var(--fg3); margin-bottom: var(--sp-6); }
.form-card__nota { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg3); text-align: center; margin-top: var(--sp-4); }

/* --- Sucesso ------------------------------------------------------------- */

.sucesso { text-align: center; }
.sucesso__check { width: 62px; height: 62px; border-radius: 50%; background: var(--infra-200); display: grid; place-items: center; margin: 0 auto var(--sp-5); }
.sucesso__check svg { width: 30px; height: 30px; }
.sucesso h2 { font-size: var(--fs-24); line-height: 1.15; color: var(--anthracite); margin-bottom: 10px; }
.sucesso__lead { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg2); margin-bottom: var(--sp-6); }
.sucesso__resumo { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: var(--sp-4); font-size: var(--fs-14); margin-bottom: var(--sp-6); }
.sucesso__resumo div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 4px 0; }
.sucesso__resumo span { color: var(--fg3); }
.sucesso__resumo strong { color: var(--anthracite); text-align: right; }
.sucesso__passos { text-align: left; display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.sucesso__passos li { display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); font-size: var(--fs-14); color: var(--fg1); align-items: start; }
.sucesso__passos .num { width: 24px; height: 24px; border-radius: 50%; background: var(--anthracite); color: var(--cloud-dancer); font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-12); display: grid; place-items: center; }

/* --- FAQ ----------------------------------------------------------------- */

.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 0 56px; align-items: start; }
.faq details { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-18); color: var(--anthracite); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--service-200); transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq details p { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg2); margin-top: var(--sp-3); max-width: 62ch; }

/* --- Rodapé -------------------------------------------------------------- */

.site-footer { background: var(--anthracite); color: var(--on-dark-3); border-top: 1px solid var(--border-on-dark); padding: 40px 0 48px; }
.site-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.site-footer__marca { height: 28px; width: auto; margin-bottom: var(--sp-4); }
.site-footer p { font-size: var(--fs-14); line-height: var(--lh-loose); color: var(--on-dark-3); max-width: 60ch; }
.site-footer a { color: var(--service-100); }
.site-footer__links { display: grid; gap: 6px; font-size: var(--fs-14); }