/* Banner de serviço (.servico-banner). Leva de uma página de conteúdo para a
   página do serviço da Marvee que resolve aquilo: o fim de cada post do blog e
   a faixa "A Marvee implanta isso na sua empresa" das páginas de app do Hub.
   Marcação em src/lib/servicos.ts, dados em src/config/servicos.ts, catálogo
   em marca/design-system.md.

   A imagem é o banner da biblioteca do Marvee Links (public/site/links/
   banner-<serviço>.webp, 1500 x 500): o principal no terço esquerdo e a direita
   limpa no navy, que é onde o texto entra. O mesmo arranjo do bloco com imagem
   da página de links (.com-imagem, em links/telas/pagina-publica.ts). Texto
   sempre em cor sólida.

   Mora fora do site.css como a calculadoras.css: é um bloco com vida própria,
   carregado só pelas páginas que o mostram. */

.servico-banner{
  container-type:inline-size;
  position:relative;isolation:isolate;
  display:flex;align-items:stretch;
  /* A proporção da imagem. Texto que não cabe estica o cartão em vez de ser
     cortado: o overflow é clip, e não hidden, porque com hidden a altura
     mínima automática de quem tem aspect-ratio vira zero e o fim do texto
     sumiria no corte. O hidden antes é só para navegador sem clip. */
  aspect-ratio:3/1;
  overflow:hidden;overflow:clip;
  border-radius:24px;
  background:#04081F;color:#F9F9F9;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px -28px rgba(4,8,31,.55);
  font-family:'Manrope',sans-serif;line-height:1.4;
  text-decoration:none;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.servico-banner:hover{transform:translateY(-2px);border-color:rgba(91,192,190,.55);box-shadow:0 26px 54px -30px rgba(4,8,31,.7)}
.servico-banner:focus-visible{outline:3px solid #5BC0BE;outline-offset:4px}

.servico-banner-img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:left center;
}

/* O texto ocupa a metade direita, por cima do navy limpo do banner. */
.servico-banner-txt{
  position:relative;
  margin-left:auto;width:54%;
  display:flex;flex-direction:column;justify-content:center;gap:8px;
  padding:28px 36px 28px 44px;
  padding:clamp(20px,4cqi,44px) clamp(20px,4.5cqi,52px) clamp(20px,4cqi,44px) clamp(24px,6cqi,64px);
  background:linear-gradient(90deg,rgba(4,8,31,0),rgba(4,8,31,.92) 30%);
}
.servico-banner small{
  font-size:11.5px;font-weight:700;line-height:1.35;
  letter-spacing:.1em;text-transform:uppercase;color:#5BC0BE;
}
.servico-banner b{
  font-size:22px;font-size:clamp(19px,3cqi,30px);
  font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#F9F9F9;
  text-wrap:balance;
}
.servico-banner-dor{
  font-size:15px;font-size:clamp(14px,1.9cqi,17px);
  line-height:1.55;color:#AEB6CF;text-wrap:pretty;
}
.servico-banner-ir{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin-top:4px;
  font-size:15px;font-weight:600;color:#F9F9F9;
}
.servico-banner-ir svg{width:18px;height:18px;flex:none;transition:transform .2s ease}
.servico-banner:hover .servico-banner-ir svg{transform:translateX(4px)}

/* Celular: a metade direita não comporta o texto. A tela vai em cima, com o
   recorte no terço esquerdo, e o texto embaixo, no navy. */
@media (max-width:640px){
  .servico-banner{flex-direction:column;aspect-ratio:auto}
  .servico-banner-img{position:static;height:auto;aspect-ratio:16/10;object-position:6% center}
  .servico-banner-txt{width:100%;margin:0;padding:14px 20px 22px;background:none}
}

@media (prefers-reduced-motion:reduce){
  .servico-banner,.servico-banner-ir svg{transition:none}
  .servico-banner:hover{transform:none}
  .servico-banner:hover .servico-banner-ir svg{transform:none}
}

/* ---------------------------------------------------- onde ele aparece -- */

/* No post do blog, no fim do texto e antes das perguntas frequentes. */
.blog-servico{margin:clamp(40px,5vw,56px) 0}

/* Nas páginas de app do Hub, entre os casos e o catálogo de apps. */
.hub-implantacao{padding:clamp(16px,3vw,48px) 0 0}