/* ==========================================================================
   LAYOUT — container, seções, a grade de linhas verticais, splits, footer
   ========================================================================== */

.page_wrapper { position: relative; overflow-x: clip; }
.page_main { display: block; }

.section {
  position: relative;
  padding-top: var(--padding-vertical--lg);
  padding-bottom: var(--padding-vertical--lg);
}
/* Na referência a <section> tem padding vertical ZERO — todo o ritmo mora
   no .container, via os atributos top-padding/bottom-padding. Aqui a
   section soma os 132px dela por cima do container, o que dobra o vão.
   .is-flush devolve o modelo deles onde o vão está grande demais. */
.section.is-flush { padding-top: 0; padding-bottom: 0; }

.container {
  container-type: inline-size;
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: var(--max-width--lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding-horizontal--md);
  padding-right: var(--padding-horizontal--md);
}

/* --------------------------------------------------------------------------
   SECTION GRID — a "planta baixa" visível.
   Linhas verticais de 1px em cada seção. É o que dá a cara de estúdio.
   -------------------------------------------------------------------------- */
.section-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--max-width--lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  pointer-events: none;
  z-index: 1;
}
.section-grid_col {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.section-grid_line-inner {
  width: 1px;
  min-width: 1px;
  max-width: 1px;
  height: 100%;
  background-color: var(--swatch--shade-light-10);
}
.section-grid_line-outer {
  width: 1px;
  height: 100%;
  background-color: var(--swatch--shade-light-10);
}
.section-grid_line-outer.is-left  { margin-right: auto; }
.section-grid_line-outer.is-right { margin-left: auto; }

/* linha horizontal no topo da seção */
.top-line {
  position: absolute;
  top: 0;
  left: 2.5rem;
  right: 2.5rem;
  height: 1px;
  background-color: var(--swatch--shade-light-10);
}

/* variante para seções claras */
:is([background-color="light"], [background-color="cream"]) .section-grid_line-inner,
:is([background-color="light"], [background-color="cream"]) .section-grid_line-outer,
:is([background-color="light"], [background-color="cream"]) .top-line { background-color: var(--swatch--shade-xdark-10); }

@media screen and (max-width: 991px) {
  .section-grid_line-inner { display: none; }
}
@media screen and (max-width: 479px) {
  .section-grid { padding-left: 1.12rem; padding-right: 1.12rem; }
  .top-line { left: 1.12rem; right: 1.12rem; }
}

/* --------------------------------------------------------------------------
   Splits e slots
   -------------------------------------------------------------------------- */
.split-section_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1.625rem;
  padding-left: 1px;
  padding-right: 1px;
  align-items: center;
}
.split-slot { display: block; width: 100%; min-width: 0; }

.section-empty_slot { width: 100%; padding-left: 1px; padding-right: 1px; }
.section-empty_slot.col-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}
.section-empty_slot.col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.section-empty_slot.is-pricing-model {
  display: flex;
  flex-flow: column;
  gap: 5rem;
}

.copy-block { display: flex; flex-flow: column; align-items: flex-start; }
.copy-block.is-large-heading {
  padding-left: var(--padding-horizontal--sm);
  padding-right: var(--padding-horizontal--sm);
}

.content-center_wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 41.6rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.button-wrapper { display: flex; flex-flow: column; align-items: flex-start; justify-content: flex-end; gap: 0.75rem; padding-top: 2rem; }
.button-wrapper.is--horizontal { flex-flow: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }

@media screen and (max-width: 991px) {
  .split-section_wrapper { grid-template-columns: 1fr; }
  .section-empty_slot.col-3 { grid-template-columns: 1fr 1fr; }
  .section-empty_slot.col-2 { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .section-empty_slot.col-3 { grid-template-columns: 1fr; }
  .section-empty_slot.col-2 { grid-template-columns: 1fr; gap: 0; }
}
@media screen and (max-width: 479px) {
  .container { padding-left: var(--size--18px); padding-right: var(--size--18px); }
  .content-center_wrapper { padding-left: 1.125rem; padding-right: 1.125rem; }
  .split-section_wrapper { gap: 1rem; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
footer.section { overflow: hidden; }
.footer_container { position: relative; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  padding-bottom: 4rem;
}
.footer-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.footer-link_wrapper { display: flex; flex-flow: column; align-items: flex-start; gap: 0.125rem; }

.footer_label {
  font-family: var(--font--primary-family);
  font-size: var(--size--10px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--swatch--shade-light-55);
  margin-bottom: 0.75rem;
}

.footer-subscribe { display: flex; flex-flow: column; align-items: flex-start; }

.footer-meta_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  padding-top: 2rem;
  padding-bottom: max(6rem, 11vw);
  border-top: 1px solid var(--swatch--shade-light-10);
  font-family: var(--font--primary-family);
  font-size: var(--size--10px);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--swatch--shade-light-55);
}
.footer-meta_logo-wrapper { display: flex; flex-flow: column; gap: 1rem; }
.footer_meta-link { margin-left: 1rem; text-decoration: none; transition: color 0.3s var(--ease--main); }
.footer_meta-link:hover { color: var(--swatch--primary-accent); }

/* wordmark gigante no rodapé — os paths sobem em stagger */
.footer-logo_wrapper {
  position: absolute;
  bottom: -3.3rem;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 84.9rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  pointer-events: none;
}

/* Faixa royal atrás do wordmark. Mora no <footer>, não no wrapper: o
   wrapper precisa de overflow:hidden para esconder as letras antes de
   entrarem, e isso recortaria a faixa junto. Aqui ela desce até o fim
   do rodapé, onde o overflow:hidden do próprio footer a corta. */
footer.section { position: relative; }
footer.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* cobre a caixa do wordmark (font-size x line-height) mais a folga com
     que ele transborda o container */
  height: calc(clamp(2.5rem, 15.5vw, 14rem) * 0.78 + 3.3rem);
  z-index: 0;
  pointer-events: none;
  /* Fecha no MESMO valor em que a rampa do rodapé termina. Preso em
     xxdark ele derrubava a saturação de 49 para 33 justo no último
     trecho, cortando a rampa antes do fim da página. */
  background-color: #192f48;
}
/* conteúdo do rodapé (wordmark incluso) por cima da faixa */
.footer_container { z-index: 1; }

/* botões de resumo por IA */
.ai-summary_wrapper { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ai-summary_label { font-size: var(--size--10px); color: var(--swatch--shade-light-75); }
.ai-info-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--swatch--shade-light-10);
  border-radius: var(--radius--xs);
  color: var(--swatch--shade-light-75);
  transition: border-color 0.3s var(--ease--main), color 0.3s var(--ease--main);
}
.ai-info-button:hover { border-color: var(--swatch--primary-accent); color: var(--swatch--primary-accent); }
.ai-info-button svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }

@media screen and (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo_wrapper { bottom: -1.8rem; }
}
@media screen and (max-width: 767px) {
  .footer-content { grid-template-columns: 1fr 1fr; }
  .footer-meta_wrapper { flex-flow: column; align-items: flex-start; padding-bottom: 4rem; }
  .footer-logo_wrapper { bottom: -1rem; }
}

/* Wordmark gigante do rodapé — as letras sobem em stagger.
   font-size em clamp(), não vw puro.
   O contêiner tem max-width fixo em rem, então vw sem teto continua
   crescendo depois que ele já parou, e a última letra some no
   overflow:hidden do wrapper. O teto em rem trava os dois juntos.

   Não aumentar para a palavra "encher" a largura: o que limita aqui é a
   ALTURA. O wrapper é absolute em bottom:-3.3rem, então subir o font-size
   levanta o topo das letras por cima do .footer-meta_wrapper (a linha do
   resumo por IA e a do copyright). Uma palavra curta simplesmente ocupa
   menos largura — é assim mesmo. */
.footer-logo {
  display: flex;
  font-family: var(--font--secondary-family);
  font-size: clamp(2.5rem, 15.5vw, 14rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.045em;
  white-space: nowrap;
  user-select: none;
  width: max-content;
  /* Cor sólida, nunca background-clip:text aqui: o GSAP aplica transform
     em cada letra, e transform quebra o clip do pai — as letras somem.
     Branco translúcido: marca d'água sobre a faixa navy, não um bloco
     chapado que compete com o conteúdo do rodapé. */
  color: rgb(245 247 255 / 0.16);
}
.footer-logo_char { display: inline-block; }
.footer-logo_char.is-space { width: 0.22em; }

/* redes sociais na linha de meta do rodapé */
.footer-social { display: flex; align-items: center; gap: 0.625rem; }
.footer-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--swatch--shade-light-10);
  color: var(--swatch--shade-light-75);
  transition: color 0.3s var(--ease--main), border-color 0.3s var(--ease--main);
}
.footer-social__icon svg { width: 1.125rem; height: 1.125rem; }
.footer-social__icon:hover {
  color: var(--swatch--primary-accent);
  border-color: var(--swatch--primary-accent);
}