/* ============================================================
   Página: Linhas de Crédito
   Hero + 7 seções de linha de crédito (claro/escuro alternados).
   Consolida Capital de Giro + Antecipação + 5 garantias + DIP.
   Só estilos próprios — componentes vêm de components.css/base.css.
   Escala clamp() atrelada ao artboard 1920; teto de peso = 500.
   ============================================================ */

/* ---------- hero (eyebrow acima do título) ---------- */
.lc-hero { --hero-shift: clamp(4rem, 9.7vw, 11.7rem); }
.lc-hero__eyebrow { margin-bottom: 1em; }
.lc-hero__title { max-width: 20em; }   /* frase longa do hero respira em ~3 linhas */

/* ---------- wrapper de cada linha de crédito ---------- */
/* ritmo vertical próprio (maior que .section padrão): cada bloco é uma
   "página" do artboard empilhada */
.lc { padding-block: clamp(3.5rem, 6vw, 7.2rem); }
/* onda das subseções escuras BEM mais discreta — no desktop a arte vinha em opacity:1 e
   atrapalhava a leitura do texto sobre ela. (mobile já era reduzida via components.css) */
.lc .wave { opacity: .32; }
@media (max-width: 920px) { .lc .wave { opacity: .2; } }

/* ---------- cabeçalho da seção ---------- */
/* título em cima; badges/tagline empilham LOGO ABAIXO, alinhados à esquerda
   (no artboard nada fica ao lado do título) */
.lc__head { }

/* título da linha em caixa-alta, peso <=500 (cliente recusa bold) */
.lc__title {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.12;
  max-width: 16em;
}
.lc__title--normal { text-transform: none; }   /* "DIP Financing" fica em caixa mista */

/* tagline curta sob o título (#3..#7) */
.lc__tagline {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.35;
  max-width: 26em;
  margin-top: clamp(1rem, 1.6vw, 1.6rem);
}

/* ---------- badges (pílula outline azul) — Capital de Giro ---------- */
/* abaixo do título, empilhados e alinhados à esquerda */
.lc-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(.55rem, .9vw, .9rem);
  margin-top: clamp(1rem, 1.6vw, 1.6rem);
}
.lc-badge {
  display: inline-flex;
  align-items: center;
  padding: .5em 1.2em;
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- parágrafo de abertura (lead) ---------- */
.lc__lead {
  max-width: 60em;   /* largura de texto corrido do artboard */
  margin-top: clamp(1.4rem, 2.4vw, 2.4rem);
}

/* ---------- grid de 2 colunas (funciona|quem  /  garantia|condições) ---------- */
.lc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2.5rem, 8vw, 10rem);   /* colunas bem separadas, como no artboard */
  row-gap: clamp(1.6rem, 2.6vw, 2.8rem);
  align-items: start;
  margin-top: clamp(2.4rem, 4vw, 4.4rem);
}
.lc-col .section-text { margin-top: .6em; max-width: 32em; }
.lc-col .eyebrow { margin-bottom: .9em; }
/* "na UPay" como segunda linha do eyebrow "COMO FUNCIONA" */
.lc-col__sub { display: block; }

/* ---------- bloco largura total (CONDIÇÕES do Capital de Giro) ---------- */
.lc-full {
  margin-top: clamp(2.4rem, 4vw, 4.4rem);
  max-width: 60em;
}
.lc-full .section-text { margin-top: .6em; }

/* ---------- requisitos ---------- */
.lc-req { margin-top: clamp(2.4rem, 4vw, 4.4rem); }
.lc-req .eyebrow { margin-bottom: 1.1em; }
.lc-req .check-list { gap: 1rem; max-width: 46em; }

/* ---------- CTA ---------- */
/* .section-cta já centraliza; aqui só o respiro acima */
.lc-cta { margin-top: clamp(2.8rem, 4.6vw, 5rem); }

/* ============================================================
   responsivo — breakpoints do sistema: 1180 / 920 / 600
   ============================================================ */
@media (max-width: 1180px) {
  .lc-cols { column-gap: clamp(2rem, 5vw, 4rem); }
}

@media (max-width: 920px) {
  /* colunas empilham na ordem do DOM (= ordem do artboard, inclusive #5/#6) */
  .lc-cols { grid-template-columns: 1fr; }
  .lc-col .section-text { max-width: none; }
  .lc__title { max-width: none; }
}

@media (max-width: 600px) {
  /* badges simétricos no mobile: ocupam a largura toda, empilhados, texto centrado
     (assim as duas pílulas ficam do mesmo tamanho em vez de larguras diferentes) */
  .lc-badges { align-items: stretch; }
  .lc-badge { justify-content: center; text-align: center; white-space: normal; }
}