/* =============================================
   LANDING — Banzi × Bravê · diagnóstico de maturidade
   Creme + tinta. O display condensado e as imagens
   carregam a página; o resto sai da frente.
   ============================================= */

/* ---------- marca: integrada ao hero, logo acima do título
   (deixou de ser header isolado em 18/08) ---------- */
.hero__brand {
  margin-bottom: clamp(18px, 3vh, 32px);
  font-weight: var(--fw-bold); font-size: 1.35rem; letter-spacing: -0.01em;
  color: var(--fg);
}
.hero__brand span { color: var(--fg-faint); font-weight: var(--fw-bold); }

/* o loader (cruz dobrando em cubo) foi movido pra biblioteca de componentes
   do DS: docs/empresa/brand/visual/design-system/vigente/componentes/loader-cubo/
   e removido do diagnóstico (decisão da Aline, 18/08). A home entra direto. */

/* ---------- HERO: colagem editorial clara ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(96px, 14vh, 170px) clamp(56px, 9vh, 104px);
  overflow: hidden; isolation: isolate;
}
.theme-dark .hero__grain { display: none; }
.hero__grain {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain); background-size: 160px; opacity: 0.4;
  mix-blend-mode: multiply; pointer-events: none;
}
/* campo de pontos que reage ao cursor (à la burocratik) */
.hero__field { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

.hero__wrap {
  position: relative; z-index: 3;
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  text-align: center;
}
.hero__title {
  font-family: var(--display); font-weight: var(--fw-light);
  /* o título sangra o container em 3 linhas; a mais longa ("mas poucos
     têm processo") mede ~10,9× a fonte, então 7.6vw preenche a largura
     útil de ~85vw com o respiro de 1.7× gutter nas laterais */
  width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: calc(var(--gutter) * 1.7);
  font-size: clamp(2.6rem, 7.6vw, 7.3rem); line-height: 0.94; letter-spacing: -0.04em;
  color: var(--fg);
}
.hero__title .l { display: block; overflow: hidden; padding-block: 0.12em 0.3em; margin-block: -0.1em -0.28em; }
.hero__title .l > span { display: block; will-change: transform; white-space: nowrap; }
.hero__title em { font-style: normal; white-space: nowrap; }

.hero__lead {
  margin: clamp(22px, 3vh, 36px) auto 0; max-width: 54ch;
  /* Figtree 400, com ritmo próprio de texto grande e creme a 60%. */
  font-family: var(--font); font-size: 24px; font-weight: var(--fw-regular);
  line-height: var(--lh-lead); color: var(--fg-soft);
}
@media (max-width: 600px) {
  .hero__lead { font-size: 18px; }
}
.hero__cta { margin-top: clamp(40px, 5.5vh, 68px); }
.hero__cta .btn { border-radius: var(--radius-full); }

.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font); font-weight: var(--fw-medium);
  font-size: var(--fz-small); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); transition: color var(--t-base) var(--ease);
}
.hero__scroll span { font-size: 1.5em; line-height: 1; transform: translateY(-3px); transition: transform var(--t-base) var(--ease-out); }

@media (hover: hover) and (pointer: fine) { .hero__scroll:hover span { transform: translateY(3px); } }

@media (max-width: 600px) {
  .hero__title { font-size: clamp(1.4rem, 7.2vw, 3rem); line-height: 0.94; }
  .hero__scroll { display: none; }
}

/* ---------- o princípio ---------- */
.principio { text-align: center; overflow: clip; background: var(--paper); }
.principio .cena { position: relative; }
.principio__h2 {
  margin: var(--sp-8) auto 0;
  font-family: var(--display); font-weight: var(--fw-regular);
  font-size: var(--fz-big); line-height: var(--lh-snug); letter-spacing: var(--ls-h);
  max-width: 30ch; text-wrap: balance;
}
.principio__lead {
  margin: var(--sp-6) auto 0; max-width: 62ch;
  font-size: var(--fz-lead); font-weight: var(--fw-medium); line-height: var(--lh-lead); color: var(--fg-soft);
}
.leituras { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); margin-top: clamp(40px, 6vh, 72px); }
.leitura {
  flex: 0 1 24rem; padding: var(--sp-8); border-radius: var(--radius-card);
  text-align: left; box-shadow: 0 24px 60px rgba(39, 38, 41, 0.12); rotate: -1.5deg;
}
.leitura + .leitura { rotate: 1.5deg; }
.leitura h3 { font-family: var(--display); font-size: var(--fz-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-h); margin-bottom: var(--sp-2); }
.leitura p { font-size: var(--fz-small); line-height: var(--lh-reading); }
.leitura--brave { background: var(--accent); color: var(--accent-text); }
.leitura--brave p { color: rgba(39, 38, 41, 0.72); }
.leitura--banzi { background: var(--ink); color: var(--on-ink); }
.leitura--banzi p { color: var(--on-ink-60); }
.fecho {
  margin: clamp(40px, 6vh, 64px) auto 0; max-width: 38ch;
  font-size: var(--fz-lead); font-weight: var(--fw-medium); line-height: var(--lh-lead);
  color: var(--fg); text-wrap: pretty;
}

/* ---------- como funciona ---------- */
.how__head { margin-bottom: clamp(48px, 9vh, 90px); }
.how__title {
  margin: var(--sp-6) auto 0;
  font-family: var(--display); font-weight: var(--fw-regular);
  font-size: var(--fz-big); letter-spacing: var(--ls-h); line-height: var(--lh-snug);
  max-width: 30ch; text-wrap: balance;
}
.how__list { list-style: none; border-top: 1px solid var(--fg); }
.how__row {
  display: grid; gap: var(--sp-6);
  grid-template-columns: minmax(80px, 0.35fr) 1fr 1.3fr;
  align-items: center;
  padding-block: var(--sp-10);
  border-bottom: 1px solid var(--hair);
  transition: padding-left var(--t-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .how__row:hover { padding-left: var(--sp-4); } }
.how__num {
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
  transition: color var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .how__row:hover .how__num { color: var(--fg); -webkit-text-stroke: 0; } }
.how__name { font-size: var(--fz-h2); letter-spacing: var(--ls-h); line-height: var(--lh-snug); }
.how__desc { color: var(--fg-soft); max-width: 46ch; line-height: var(--lh-reading); }
@media (max-width: 760px) {
  .how__row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .how__num { font-size: 3rem; }
}

/* ---------- o que medimos ---------- */
.medimos {
  overflow: clip;
  margin-top: var(--sp-16);
  padding: clamp(64px, 11vh, 150px) var(--gutter) clamp(220px, 36vh, 420px);
  background: var(--cream-2);
}
.sec-header { text-align: center; max-width: var(--maxw); margin-inline: auto; }
.medimos .sec-header { position: sticky; top: clamp(84px, 11vh, 120px); z-index: 0; }
/* badge no padrão "Neutra" do DS Banzi (.bz-badge): uppercase micro,
   borda fina, sem bolinha */
.tag {
  display: inline-flex; align-items: center;
  padding: 4px var(--sp-3); line-height: 1.3;
  border: 1px solid var(--hair); border-radius: var(--radius-full);
  font-size: var(--fz-tiny); font-weight: var(--fw-medium);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg);
}
.medimos__title {
  margin: var(--sp-6) auto 0; max-width: 30ch;
  font-family: var(--display); font-weight: var(--fw-regular);
  font-size: var(--fz-big); line-height: var(--lh-snug); letter-spacing: var(--ls-h);
  text-wrap: balance;
}
.medimos__lead { margin: var(--sp-6) auto 0; max-width: 64ch; font-size: var(--fz-lead); line-height: var(--lh-lead); color: var(--fg-soft); }
.dims { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(180px, 32vh, 360px); max-width: var(--maxw); margin: clamp(48px, 9vh, 90px) auto 0; }
.dim { position: sticky; top: var(--dock-top, clamp(280px, 36vh, 380px)); width: 100%; max-width: var(--card-w, 21em); }
.dim__card {
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 2 / 3;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-card);
  color: var(--ink);
  --fg: var(--ink); --fg-soft: var(--ink-55); --hair-strong: var(--line-strong);
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(39, 38, 41, 0.18);
  will-change: transform;
}
.dim:nth-of-type(even) .dim__card {
  background: var(--ink); color: var(--on-ink);
  --fg: var(--on-ink); --fg-soft: var(--on-ink-60); --hair: var(--on-ink-line);
}
.dim-chip {
  position: absolute; top: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px);
  width: clamp(44px, 4.5vw, 56px); height: clamp(44px, 4.5vw, 56px);
  display: grid; place-items: center; border-radius: var(--radius-card);
  background: var(--accent); color: var(--accent-text);
}
.dim-chip .ic { width: 52%; height: 52%; }
.dim-meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); font-weight: var(--fw-semibold); color: var(--fg-soft); }
.dim-meta > span[aria-hidden] {
  font-family: var(--display); font-weight: var(--fw-light);
  font-size: clamp(4rem, 5.5vw, 6rem); line-height: 0.9; color: var(--fg);
}
.dim-meta .tag { padding: 4px var(--sp-3); border-color: var(--hair); color: var(--fg); }
.dim h3 { margin-top: auto; font-family: var(--display); font-weight: var(--fw-semibold); font-size: clamp(1.8rem, 2.4vw, 2.4rem); letter-spacing: var(--ls-h); line-height: 0.98; }
.dim p { margin-top: var(--sp-4); color: var(--fg-soft); font-size: var(--fz-small); line-height: var(--lh-reading); text-wrap: pretty; }
@media (max-width: 640px) {
  .dim { max-width: min(24em, 86vw); }
}

/* ---------- níveis ---------- */
.levels { background: var(--cream-2); }
.levels__layout { display: grid; gap: var(--sp-12); }
@media (min-width: 960px) { .levels__layout { grid-template-columns: 1fr 1.2fr; gap: var(--sp-24); } }
.levels__sticky { position: sticky; top: 14vh; align-self: start; }
@media (max-width: 959px) { .levels__sticky { position: static; } }
.levels__readout { margin-top: var(--sp-8); display: flex; flex-direction: column; }
.levels__num {
  font-size: clamp(8rem, 24vw, 19rem);
  line-height: 0.85;
  color: var(--fg);
}
.levels__name { font-size: var(--fz-h1); letter-spacing: var(--ls-h); font-weight: var(--fw-semibold); margin-top: var(--sp-2); }
.levels__cut { margin-top: var(--sp-4); font-size: var(--fz-small); line-height: var(--lh-reading); color: var(--fg-soft); }

.levels__list { display: flex; flex-direction: column; border-top: 1px solid var(--fg); }
.level {
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--hair);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-8); align-items: baseline;
  opacity: 0.3; transition: opacity var(--t-slow) var(--ease);
}
.level.is-active { opacity: 1; }
.level__n { font-size: var(--fz-meta); color: var(--fg-faint); font-weight: var(--fw-medium); min-width: 1.4em; }
.level__name { font-size: var(--fz-h2); letter-spacing: var(--ls-h); margin-bottom: var(--sp-3); }
.level__desc { color: var(--fg-soft); max-width: 46ch; line-height: var(--lh-reading); }
.level__tag { margin-top: var(--sp-4); font-size: var(--fz-meta); line-height: var(--lh-reading); color: var(--fg-soft); }
.level__tag::before { content: "→ "; }
.level--cut { border-bottom-color: var(--fg); }

/* ---------- quem assina ---------- */
/* a seção dimensiona pelo conteúdo: sem esticar até 100svh, que deixava
   um vão morto entre os cards e o fechamento (pedido de 17/08) */
.assina { min-height: auto; padding-block: clamp(72px, 10vh, 130px); }
.assina .sec-header { text-align: center; }
.assina__title { font-family: var(--display); font-weight: var(--fw-regular); font-size: var(--fz-big); letter-spacing: var(--ls-h); line-height: var(--lh-snug); max-width: 30ch; margin-inline: auto; text-wrap: balance; }
.casas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); max-width: var(--maxw); margin: clamp(40px, 8vh, 80px) auto 0; align-items: stretch; }
/* dois cards idênticos: mesma superfície, mesma borda, mesmo peso — nenhum domina */
.casa {
  --casa-logo-row: clamp(40px, 4.4vw, 54px);
  flex: 1 1 20rem; display: grid; grid-template-rows: var(--casa-logo-row) auto auto; align-content: start; gap: var(--sp-5);
  padding: clamp(32px, 4vw, 48px); border-radius: var(--radius-card);
  background: var(--cream-raised); border: 1px solid var(--line); color: var(--ink);
}
.casa__logo { height: clamp(28px, 3vw, 36px); width: auto; align-self: start; }
.casa__logo--banzi { height: var(--casa-logo-row); }
.casa p { font-size: var(--fz-body); line-height: var(--lh-reading); color: var(--ink-70); max-width: 40ch; }
.casa a { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--sp-2); font-weight: var(--fw-semibold); text-decoration: none; border-bottom: 2px solid currentColor; width: fit-content; padding-bottom: 2px; transition: opacity var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .casa a:hover { opacity: 0.7; } }
.casa a .ic { width: 1em; height: 1em; }
.assinam-juntas { margin: var(--sp-6) auto 0; max-width: 60ch; text-align: center; font-size: var(--fz-lead); font-weight: var(--fw-medium); line-height: var(--lh-lead); color: var(--fg-soft); text-wrap: pretty; }

.cta {
  --cta-edge-space: clamp(48px, 8vh, 96px);
  text-align: center; min-height: auto;
  padding-top: var(--cta-edge-space); padding-bottom: clamp(28px, 4vh, 48px);
}
.cta__title { font-family: var(--display); font-weight: var(--fw-regular); font-size: var(--fz-big); color: var(--on-ink); text-transform: none; letter-spacing: var(--ls-h); line-height: var(--lh-snug); max-width: 30ch; margin-inline: auto; }
/* linhas em máscara (mesma técnica do hero) — sem isto o texto flui na largura toda */
.cta__title .hero__line { display: block; overflow: hidden; padding-block: 0.08em 0.18em; margin-block: -0.06em -0.16em; }
.cta__title .hero__line > span { display: block; will-change: transform; }
.cta__sub {
  color: var(--fg-soft); font-size: var(--fz-lead); line-height: var(--lh-lead);
  max-width: 62ch; margin: var(--sp-8) auto 0;
}
.cta__actions { margin-top: var(--sp-10); display: flex; justify-content: center; }
/* rodapé integrado à faixa do fechamento */
.cta .footer { padding-block: 0; margin-top: var(--cta-edge-space); }

/* ---------- footer ---------- */
.footer { padding-block: var(--sp-16) var(--sp-8); }
/* faixa legal no padrão do rodapé do site (site-greige): fio sólido
   de lado a lado e caption Space Grotesk 14 em caixa alta espalhada
   na largura, texto a 50%. SEM .wrap: o rodapé ocupa a largura toda
   do navegador, só com o gutter de respiro (ordem de 18/08) */
.footer__bleed { width: 100%; padding-inline: var(--gutter); }
.footer__rule { border: 0; border-top: 1px solid color-mix(in srgb, var(--fg) 45%, transparent); }
.footer__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4) var(--sp-8);
  padding-block: var(--sp-10);
  font-family: var(--display); font-size: 0.875rem; font-weight: var(--fw-regular);
  line-height: 2.14; text-transform: uppercase; letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--fg) 50%, transparent);
}
.footer__meta a { position: relative; color: inherit; }
.footer__meta a::after {
  content: ""; position: absolute; right: 0; bottom: -0.15em;
  width: 100%; height: 1px; background: currentColor;
  transition: width 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) { .footer__meta a:hover::after { width: 0; } }