/* ==========================================================================
   Vazto — a vitrine do ecossistema, em folha própria

   Os cartões de "Procurando outra solução?" estavam escritos dentro do bloco
   `<style>` de cada página de produto — quatro cópias. A página do
   Go-to-Market nunca teve a secção e por isso também nunca teve as regras.

   Ao ganhá-la, precisava delas. Copiá-las para dentro dela seria a quinta
   cópia: ficam aqui, ao lado de `assets/js/vitrine.js`, que é onde o
   componente vive. As quatro páginas que já as têm no bloco copiado não
   carregam este ficheiro — quando esse bloco for extraído, é aqui que ele
   assenta.

   O que muda com a montra: a grelha e o contentor vêm de
   `site/assets/css/montra.css` (`.showcase__grid`), que é o mesmo da Home. As
   regras de coluna daqui só valem para uma `.cross` fora da montra.
   ========================================================================== */
.cross{ display:grid; gap:16px }
.cross__card{
  position:relative; display:flex; flex-direction:column;
  border-radius:20px; border:1px solid var(--rule-dark);
  background:rgba(241,247,247,.04); overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background-color .3s ease;
}
.cross__card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px; z-index:3;
  background:linear-gradient(90deg,var(--c),transparent);
}
.cross__card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 55%,transparent); background:rgba(241,247,247,.07) }
.cross__art{
  --acc:var(--c); --acc-2:var(--c);
  position:relative; aspect-ratio:56/46; overflow:hidden;
  background:
    radial-gradient(78% 54% at 50% 110%, color-mix(in srgb,var(--c) 32%,transparent), transparent 72%),
    radial-gradient(130% 96% at 50% -10%, #05b0a8 0%, #037c7d 22%, #025159 46%, #0e3034 68%, #03070d 100%);
}
.cross__art svg{ position:absolute; inset:0; inline-size:100%; block-size:100% }
.cross__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 58%,rgba(3,7,13,.55) 100%);
}
.cross__body{ display:grid; gap:10px; padding:20px 22px 24px }
.cross__logo{ block-size:26px; inline-size:auto; display:none }
.cross__logo.is-on{ display:block }
.cross__logo.is-on ~ .cross__lockup{ display:none }
.cross__lockup{ display:flex; align-items:center; gap:9px }
.cross__lockup b{ font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.03em; color:#fff; line-height:1 }
.cross__lockup i{ inline-size:1px; block-size:17px; background:rgba(241,247,247,.32) }
.cross__lockup img{ block-size:13px; inline-size:auto; opacity:.9 }
.cross__card em{ display:block; font-style:normal; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c) }
.cross__card p{ font-size:14.5px; line-height:1.5; color:var(--on-dark-soft) }
.cross__go{ margin-block-start:2px; font-size:13.5px; font-weight:600; color:var(--c); display:inline-flex; align-items:center; gap:7px }
.cross__go svg{ inline-size:14px; block-size:14px; transition:transform .22s }
.cross__card:hover .cross__go svg{ transform:translateX(3px) }
@media (min-width:700px){ .cross{ grid-template-columns:1fr 1fr } }
@media (min-width:1120px){ .cross{ grid-template-columns:repeat(4,1fr) } }