/* ════════════════════════════════════════════
   layout.css — Nav, Hero, Flow, Features, Footer
   ════════════════════════════════════════════ */

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: saturate(160%) blur(0px);
  transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--border-lt);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.nav .wrap             { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-logo img          { height: 26px; width: auto; display: block; }
.nav-links             { display: flex; align-items: center; gap: 2.1rem; }
.nav-links a           { font-size: .92rem; font-weight: 500; color: var(--ink-2); transition: color .15s; }
.nav-links a:hover     { color: var(--ink); }
.nav-cta               { display: flex; align-items: center; gap: 1rem; }
.nav .btn              { padding: .5rem 1.15rem; font-size: .9rem; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ── Hero ── */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(56px, 9vh, 110px));
  padding-bottom: clamp(40px, 7vh, 90px);
  background: var(--mist);
  overflow: hidden;
}
.hero-inner          { max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; }
.hero .eyebrow       { display: block; margin-bottom: 1.2rem; }
.hero h1             { margin-bottom: 1.4rem; }
.hero h1 .accent     { color: var(--graphite); }
.hero-sub            { max-width: 640px; margin: 0 auto 2.2rem; }
.hero-actions        { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.device              { max-width: 1100px; margin: clamp(48px, 7vh, 84px) auto 0; padding: 0 18px; }
@media (max-width: 480px) { .device { padding: 0 12px; } }

/* ── Flow diagram (seção Problema) ── */
.flow-cap  { margin-top: 1.6rem; font-size: .95rem; }
.flow-wrap { margin-top: clamp(40px, 6vh, 72px); }

svg.flow {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .8s ease;
}
svg.flow.is-in  { opacity: 1; transform: none; }
svg.flow--h     { max-width: 960px; }
svg.flow--v     { display: none; max-width: 300px; }
@media (max-width: 600px) {
  svg.flow--h { display: none; }
  svg.flow--v { display: block; }
}

/* SVG classes */
.flow-node    { fill: rgba(252, 249, 242, .045); stroke: rgba(252, 249, 242, .2); stroke-width: 1; }
.flow-out     { fill: rgba(252, 249, 242, .08); stroke: rgba(252, 249, 242, .32); stroke-width: 1; }
.flow-hub     { fill: var(--cream); }
.flow-line {
  fill: none;
  stroke: rgba(252, 249, 242, .26);
  stroke-width: 1.5;
  stroke-dasharray: 680;
  stroke-dashoffset: 680;
  transition: stroke-dashoffset 1.15s ease;
}
.flow.is-in .flow-line                 { stroke-dashoffset: 0; }
.flow.is-in .flow-line:nth-of-type(2)  { transition-delay: .06s; }
.flow.is-in .flow-line:nth-of-type(3)  { transition-delay: .12s; }
.flow.is-in .flow-line:nth-of-type(4)  { transition-delay: .18s; }
.flow.is-in .flow-line:nth-of-type(5)  { transition-delay: .24s; }
.flow.is-in .flow-line:nth-of-type(6)  { transition-delay: .34s; }
.flow-lbl     { fill: var(--cream); font-family: var(--font); font-size: 15px; font-weight: 500; }
.flow-hub-lbl { fill: var(--coal); font-family: var(--wm); font-size: 24px; font-weight: 600; }
.flow-out-lbl { fill: var(--cream); font-family: var(--font); font-size: 14px; font-weight: 600; }

/* ── Feature rows ── */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.feature + .feature          { margin-top: clamp(72px, 10vh, 140px); }
.feature.flip .feature-text  { order: 2; }
.feature-tag {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 1rem;
}
.feature-text h3 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin-bottom: 1.1rem;
}
.feature-text p {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 680px) {
  .feature                      { grid-template-columns: 1fr; gap: 28px; }
  .feature.flip .feature-text   { order: 0; }
}

/* ── CTA final ── */
.cta-final         { text-align: center; }
.cta-final h2      { margin-bottom: 1.1rem; }
.cta-final p       { max-width: 560px; margin: 0 auto 2.1rem; }

/* ── Footer ── */
.foot {
  background: var(--coal);
  color: rgba(252, 249, 242, .62);
  padding: clamp(56px, 8vh, 84px) 0 36px;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(252, 249, 242, .1);
}
.foot-logo        { height: 30px; width: auto; margin-bottom: 1rem; }
.foot-about       { font-size: .92rem; line-height: 1.65; max-width: 460px; }
.foot-links       { display: flex; flex-direction: column; gap: .7rem; }
.foot-links h4    { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(252, 249, 242, .4); margin-bottom: .4rem; font-weight: 600; }
.foot-links a     { font-size: .92rem; color: rgba(252, 249, 242, .74); transition: color .15s; width: fit-content; }
.foot-links a:hover { color: var(--cream); }
.foot-bottom      { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: rgba(252, 249, 242, .42); }
.foot-vesti       { display: inline-flex; align-items: center; gap: 7px; }
.foot-vesti img   { height: 18px; width: auto; opacity: .85; }

@media (max-width: 680px) {
  .foot-top { grid-template-columns: 1fr; }
}