/* b2b-1-institucional — estilos próprios do template.
   Carrega DEPOIS de shared/base.css e só acrescenta o que o design system
   não cobre: layout de "sobre", layout de contato, rótulo da faixa de
   logos e os ajustes de seção escura. */

.container--narrow{ max-width:820px; }

/* A .eyebrow do base.css pinta o fundo com 10% da primária — sobre a seção
   escura isso some. Aqui ela vira vidro claro. */
.eyebrow--light,
.section--dark .eyebrow,
.hero .eyebrow{
  color:#fff;
  background:rgba(255,255,255,.12);
}

/* ── Hero ───────────────────────────────────────────────────────── */
/* Sem foto de operação real, o hero costuma receber imagem de banco só como
   textura. Dessaturar + escurecer garante que ela nunca compita com o texto
   nem seja lida como "foto da empresa". */
.hero__bg{ filter:grayscale(.35) contrast(1.05); }

/* ── Faixa de logos de clientes ────────────────────────────────── */
.logo-strip__label{
  text-align:center; font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-text-muted); margin-bottom:1.75rem;
}

/* ── Sobre ──────────────────────────────────────────────────────── */
.about{ display:grid; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (min-width:920px){ .about{ grid-template-columns:1.15fr .85fr; } }
.about__text h2{ font-size:clamp(1.8rem,3vw,2.5rem); }
.about__text p{ color:rgba(255,255,255,.82); }

.about__pillars{ display:grid; gap:1rem; }
.pillar{
  background:rgba(255,255,255,.06);
  border-left:3px solid var(--color-primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:1.15rem 1.35rem;
}
.pillar h4{
  margin:0 0 .35rem; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-accent);
}
.pillar p{ margin:0; font-size:.93rem; color:rgba(255,255,255,.82); }

/* ── Contato ────────────────────────────────────────────────────── */
.contact{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
@media (min-width:920px){ .contact{ grid-template-columns:1fr 1fr; } }
.contact__intro h2{ font-size:clamp(1.8rem,3vw,2.5rem); }
.contact__intro > p{ color:var(--color-text-muted); }

.contact__list{ display:grid; gap:1rem; margin:2rem 0; }
.contact__list li{ display:grid; gap:.15rem; }
.contact__list strong{
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-text-muted); font-weight:700;
}
.contact__list a, .contact__list span{ font-size:1.05rem; font-weight:600; color:var(--color-dark); }
.contact__list a:hover{ color:var(--color-primary); }

/* O formulário tem 8 campos: em telas largas dois deles cabem lado a lado
   sem apertar o rótulo. Abaixo disso o .lead-form do base.css já empilha. */
@media (min-width:560px){
  .lead-form{ grid-template-columns:1fr 1fr; }
  /* 7 é o select de porte e 8 a textarea: os dois ocupam a linha inteira,
     senão o select fica órfão com um vão branco do lado. */
  .lead-form > div:nth-child(7),
  .lead-form > div:nth-child(8),
  .lead-form > button,
  .lead-form__legal{ grid-column:1 / -1; }
}

/* ── Unidades ───────────────────────────────────────────────────── */
/* Unidade anunciada antes de abrir precisa ficar visivelmente diferente da
   que já atende — senão gera lead para endereço que não recebe ninguém. */
.unit-card--soon{ border-top-color:var(--color-text-muted); background:var(--color-bg-alt); }
.unit-card__badge{
  display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:#fff; background:var(--color-secondary);
  padding:.25rem .6rem; border-radius:999px; margin-bottom:.6rem;
}
.unit-card__maps{ display:inline-block; margin-top:.75rem; font-weight:700; font-size:.88rem; color:var(--color-primary); }
.unit-card__maps:hover{ text-decoration:underline; }

/* ── Rodapé ─────────────────────────────────────────────────────── */
/* Logo escuro sobre rodapé escuro some. O gerador entrega uma versão clara
   em LOGO_FOOTER_FILE; esta regra só controla o tamanho. */
.footer__logo{ height:52px; width:auto; margin-bottom:1.25rem; }
.footer p{ font-size:.92rem; max-width:34ch; }
.footer ul{ display:grid; gap:.6rem; font-size:.92rem; }

/* ── Header em telas intermediárias ─────────────────────────────── */
/* Em B2B o CTA nomeia o próximo passo real ("Falar com um consultor"),
   e .btn tem white-space:nowrap — ou seja, o botão não encolhe. Com 5 itens
   de menu + telefone + CTA, o conteúdo do header estoura o container entre
   ~950px e ~1300px, faixa que inclui 1280px (notebook). O base.css só trata
   isso a partir de 900px. Estas duas regras cobrem o vão. */
@media (max-width:1300px){
  .header__nav{ gap:1.4rem; }
  .header .container{ gap:1rem; }
}
@media (max-width:1150px){
  .header__actions .btn-outline{ display:none; }
}

/* O .wa-float é fixed no canto inferior direito e passa por cima da última
   linha do rodapé quando a página está rolada até o fim. Estes respiros
   tiram o texto de baixo do botão. */
.footer{ padding-bottom:5.5rem; }
@media (min-width:640px){ .footer__bottom{ padding-right:84px; } }