/* Página Inbound marketing (/marketing-digital/inbound/). Só o que é desta página. A base vem do previa.css e do previa-servico.css. Prefixo inb-.
   O que é novo: os três cartões de conta do bloco "Na prática" (.inb-contas: cartão claro sobre o roxo, com o logo do cliente)
   e os quatro cartões de "Mais exemplos" (.inb-exemplos). O bloco "O que fazemos" usa o .automacao da casa, com uma nota a mais.
   Rótulos em Fira Sans. Ilustração do topo sem número, sem marca e sem nome de pessoa. */

/* ---------- 1. topo ---------- */
/* atalhos "Nesta página" */
.inb-topo .ja-integramos .nomes a{text-decoration-thickness:1px;text-underline-offset:3px}
.inb-topo .ja-integramos .nomes a:hover{text-decoration-thickness:2px;text-decoration-color:var(--acento)}
@media (min-width:621px) and (max-width:980px){
  /* cartões estreitos: o valor desce para baixo do rótulo nas três telas, como no celular.
     Só a primeira linha: a segunda continua escondida nesta faixa, como nas outras páginas do modelo.
     A altura mínima iguala as três telas: a pílula é 2px mais alta que o valor em negrito */
  .inb-topo .hero-fluxo .ui .linha:first-child{display:grid;justify-items:start;align-content:start;gap:4px;min-height:40px}
  .inb-topo .hero-fluxo .ui .linha > b{text-align:left}
}
@media (min-width:981px) and (max-width:1060px){
  /* o primeiro e o terceiro cartão saíam da moldura pontilhada */
  .inb-topo .hero-fluxo .ui:nth-child(1){transform:translateX(-8%)}
  .inb-topo .hero-fluxo .ui:nth-child(5){transform:translateX(8%)}
}
@media (max-width:980px){
  /* atalhos são navegação: 44px de altura para o dedo */
  .inb-topo .ja-integramos > b{margin-bottom:0}
  .inb-topo .ja-integramos .nomes a{display:inline-block;padding-block:13px}
}

/* ---------- 3. na prática (#na-pratica): três contas, cartão claro sobre o roxo ---------- */
/* o título fica em meia coluna e precisa ser menor */
.inb-pratica .h2{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.inb-contas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
/* dentro do cartão as cores voltam a ser as de fundo claro (na seção roxa o destaque é oliva, que não serve de texto no branco).
   As cinco partes do cartão (logo, papel, título, texto e link) partilham as linhas da grade, para ficarem na mesma altura nos três */
.inb-conta{--acento:var(--roxo);--fg:var(--tinta);--fg2:var(--tinta-2);--titulo:var(--tinta);--linha:#ECEAE0;--logo-filtro:none;
  display:grid;grid-row:span 5;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:10px;align-content:start;
  padding:22px 22px 26px;border-radius:var(--raio);background:var(--card);color:var(--card-fg);box-shadow:var(--sombra)}
/* o logo fica numa faixa de altura fixa, alinhado à esquerda: os três arquivos têm proporções diferentes */
.inb-logo{display:flex;align-items:center;height:48px;padding-bottom:12px;border-bottom:1px solid var(--linha);box-sizing:content-box}
.inb-logo img{display:block;width:auto;height:26px;filter:none}
.inb-logo img[alt="Jabuticaba Gastronomia"]{height:34px}
.inb-logo img[alt="WWF-Brasil"]{height:46px}
/* o papel da Olivas é a etiqueta da casa, em minúsculas */
.inb-conta .tag{margin-top:6px;font-family:var(--fonte);font-size:13px;font-weight:600;letter-spacing:0;color:var(--roxo)}
.inb-conta h3{font-size:1.25rem;line-height:1.22;letter-spacing:-.01em;color:var(--roxo-900);text-wrap:balance}
.inb-conta p{font-size:15px;line-height:1.5;color:var(--tinta-2)}
.inb-conta .link-seta{justify-self:start;align-self:end;margin-top:6px;font-size:15px}
html[data-dir="a"] [data-surf="roxo"] .inb-conta .link-seta:hover{color:var(--roxo);border-bottom-color:var(--oliva)}
.inb-pratica .fecho{margin-top:32px}

/* ---------- 4. o que fazemos (#o-que-fazemos): o bloco de duas colunas da página de integração, com uma nota a mais ---------- */
.inb-ia{margin-top:22px;max-width:54ch}
.inb-ia b{color:var(--titulo)}

/* ---------- 5. mais exemplos (#exemplos): quatro cartões brancos sobre o papel ---------- */
.inb-exemplos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.inb-exemplo{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);row-gap:8px;align-content:start;
  padding:20px 20px 24px;border-radius:var(--raio);border:1px solid var(--linha);background:#fff}
.inb-exemplo .tag{font-family:var(--fonte);font-size:13px;font-weight:600;letter-spacing:0;color:var(--roxo)}
.inb-exemplo h3{font-size:1.15rem;line-height:1.24;color:var(--titulo);text-wrap:balance}
.inb-exemplo p{font-size:15px;line-height:1.5;color:var(--fg2)}
.inb-exemplo .link-seta{justify-self:start;align-self:end;margin-top:8px;font-size:15px}

/* ---------- responsivo ---------- */
@media (min-width:621px) and (max-width:1100px){
  /* quatro cartões em duas fileiras de dois */
  .inb-exemplos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:621px) and (max-width:980px){
  /* três contas, uma por linha: o logo à esquerda e o texto à direita */
  .inb-contas{grid-template-columns:minmax(0,1fr);gap:14px}
  .inb-conta{grid-row:auto;grid-template-rows:auto auto 1fr auto;grid-template-columns:150px minmax(0,1fr);column-gap:24px;row-gap:8px;padding:22px 24px}
  .inb-conta > .inb-logo{grid-column:1;grid-row:1 / -1;align-self:start;height:auto;min-height:48px;padding-bottom:0;border-bottom:0}
  .inb-conta > :not(.inb-logo){grid-column:2}
  .inb-conta .tag{margin-top:0}
}
@media (max-width:620px){
  /* no celular as duas fileiras viram carrossel (previa.css); fora da grade o subgrid não vale, e o link vai para o pé do cartão */
  .inb-contas.carrossel,.inb-exemplos.carrossel{display:flex}
  .inb-conta,.inb-exemplo{grid-row:auto;grid-template-rows:none;align-content:start}
  .inb-conta{padding:20px 20px 24px}
  .inb-conta .link-seta,.inb-exemplo .link-seta{align-self:start}
  .inb-ia{margin-top:18px}
}