/* =====================================================================
   HERO "CARD" — primeiro passo do site em estilo de cartoes.

   Arquivo proprio, carregado DEPOIS do layout.css: o layout.css continua
   identico ao do site vanilla (a referencia), e tudo que muda mora aqui.

   Da landing vem a identidade (logo e frase no azul #1C3AA8, fonte ABeeZee,
   capsula com a bandeira). O video deixa de ser fundo de tela cheia e vira
   um cartao arredondado — a primeira peca do estilo card-y.
   ===================================================================== */

.lm-hero2 {
  --lm-azul: #1C3AA8;
  --lm-hero-fonte: "ABeeZee", var(--font-display);
  --lm-card-raio: clamp(20px, 2.4vw, 32px);
  --lm-card-sombra: 0 1px 2px rgba(1, 23, 134, 0.06), 0 24px 60px -28px rgba(1, 23, 134, 0.38);

  display: grid;
  justify-items: center;
  text-align: center;
  padding: clamp(var(--space-12), 7vw, var(--space-20)) var(--space-4) clamp(var(--space-5), 2vw, var(--space-8));
}

/* ---- Logo + frase: um titulo so, como na landing ---- */
.lm-hero2__titulo {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
}
.lm-hero2__logo {
  width: clamp(168px, 18vw, 264px);
  height: auto;
  display: block;
}
.lm-hero2__frase {
  display: block;
  max-width: 20ch;
  font: var(--weight-regular) clamp(1.6rem, 4.16vw, 3.2rem)/1.14 var(--lm-hero-fonte);
  letter-spacing: var(--tracking-display);
  color: var(--lm-azul);
  text-wrap: balance;
}
/* A capsula vira um mini-cartao: o mesmo cream do fundo, separado pelo fio
   e pela sombra dos cartoes (so cream e azul valem como fundo). */
.lm-hero2__frase .lm-pill {
  border: 1px solid rgba(28, 58, 168, 0.14);
  background: #F7EEDB;
  color: inherit;
  box-shadow: 0 1px 2px rgba(28, 58, 168, 0.08), 0 8px 20px -12px rgba(28, 58, 168, 0.35);
}
.lm-hero2__bandeira {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-left: 0.28em;
  vertical-align: -0.08em;
  border-radius: 2px;
}

/* ---- O cartao do video ---- */
.lm-hero2__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* A mesma largura dos cartoes de baixo (cards.css). */
  width: min(1180px, 100%);
  aspect-ratio: 16 / 7.5;
  min-height: 340px;
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  border-radius: var(--lm-card-raio);
  /* Azul por baixo do video: com a palavra branca no meio, um fundo claro
     deixaria o texto sumir nos instantes em que o video nao carrega. */
  background: var(--lm-azul, #1C3AA8);
  box-shadow: var(--lm-card-sombra);
}
/* O .lm-hero__media do layout.css ja cobre o cartao (e o main.js faz o
   parallax nele); so o recorte arredondado e daqui. */
/* Carrossel do topo (Site > Carrossel do topo): os slides empilhados no
   mesmo lugar, um visivel por vez; o main.js troca a classe e o fade e daqui. */
.lm-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.lm-hero__slide.is-ativo { opacity: 1; }
.lm-hero2__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(1, 13, 79, 0.42) 0%, rgba(1, 13, 79, 0) 78%),
    linear-gradient(to top, rgba(1, 13, 79, 0.30) 0%, rgba(1, 13, 79, 0) 55%);
  pointer-events: none;
}

/* ---- As palavras que giram, no centro do cartao (15/09/2026) ----
   Antes viviam num chip de vidro no canto de baixo. O pedido foi: maiores,
   centradas, brancas e sem capsula. O scrim de cima escurece o video para
   o branco nunca sumir num quadro claro. */
.lm-hero2__palavras {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  pointer-events: none;
}
.lm-hero2 .lm-hero__rotator {
  justify-content: center;
  font-family: var(--lm-hero-fonte);
  font-weight: var(--weight-regular);
  /* Grande de verdade: acompanha a largura do cartao, com teto para nao
     estourar numa tela muito larga. */
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-display, -0.01em);
  color: #FFFFFF;
  /* Sombra larga e suave: legibilidade sem virar contorno duro. */
  text-shadow: 0 2px 28px rgba(1, 13, 79, 0.45), 0 1px 3px rgba(1, 13, 79, 0.35);
  text-align: center;
  min-height: 1.1em;
}
/* O main.js reserva a largura da MAIOR palavra no span de dentro; centrado,
   a palavra curta fica no meio do cartao, e nao encostada a esquerda. */
.lm-hero2 .lm-hero__rotator > span { text-align: center; }
/* ---- Celular: cartao mais alto, para o video nao virar uma faixa fina ---- */
@media (max-width: 720px) {
  .lm-hero2__card {
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}