/* ══════════════════════════════════════════════════════════════════════════════════════════
   HERO DA PLATAFORMA: BANNER PRÓPRIO E DESCRIÇÃO ROTATIVA
   Carregado SÓ por /plataforma/index.html.

   POR QUE UM ARQUIVO PRÓPRIO, E NÃO O style.css
   O style.css é pedido com o MESMO `?v=` por 10 páginas, e a suíte hero-plataforma-mobile (5.1)
   exige isso: o mesmo arquivo com duas versões faz o visitante baixá-lo de novo ao trocar de
   página. Pôr estas regras lá obrigaria a trocar o `?v=` nas 10, inclusive na raiz do Método
   CPC, que não muda sem autorização. Aqui elas chegam na hora a quem já visitou, porque o
   endereço é novo, e o style.css continua idêntico ao do servidor.

   Os caminhos das imagens são relativos a ESTE arquivo (`assets/css/`), e não à página:
   `url()` resolve a partir da folha de estilo.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── O banner, em três recortes ───────────────────────────────────────────────────────────
     banner-plataforma-desktop.webp  2492x1402   acima de 1024px
     banner-plataforma-tablet.webp   1752x1402   de 769px a 1024px
     banner-plataforma-mobile.webp   1084x1928   até 768px

   São as mesmas fotos da página de planos. A classe repetida (`.hero.hero-plataforma`) vence o
   `.hero` do style.css por especificidade, e não pela ordem dos arquivos.

   Os degradês são os do hero da home: escurecem a área onde fica o texto.

   POSIÇÃO: no desktop e no tablet a pessoa está à DIREITA da foto. `right top` faz o corte do
   `cover`, quando a tela é mais estreita que a imagem, cair na parte escura da esquerda, que é a
   que fica embaixo do texto. Com `center`, o corte comia metade da pessoa. No celular ela está
   centralizada. */
.hero.hero-plataforma {
    background-image: linear-gradient(to right, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0) 66.6%),
                      url('../../image/WEBP/banner-plataforma/banner-plataforma-desktop.webp');
    background-position: right top;
}

@media (max-width: 1024px) {
    .hero.hero-plataforma {
        background-image: linear-gradient(to right, rgba(10, 10, 10, 0.8) 0%, rgba(10, 10, 10, 0) 66.6%),
                          url('../../image/WEBP/banner-plataforma/banner-plataforma-tablet.webp');
        background-position: right top;
    }
}

@media (max-width: 768px) {
    .hero.hero-plataforma {
        background-image: linear-gradient(to bottom, rgba(10, 10, 10, 0.05), rgba(10, 10, 10, 0.95)),
                          url('../../image/WEBP/banner-plataforma/banner-plataforma-mobile.webp');
        background-position: center top;
    }
}

/* ─── A descrição que alterna ──────────────────────────────────────────────────────────────
   Quem esconde os textos é o atributo HTML `hidden`, e não este CSS. Com o controle no CSS, uma
   folha que não carregasse deixaria os quatro empilhados; com `hidden`, o pior caso é o texto
   não trocar. Esta regra só reforça o nativo, caso algum reset o tenha sobrescrito.

   A altura do bloco é reservada pelo JS, que mede o texto mais longo. Os parágrafos continuam
   herdando o `.hero p` do style.css: tamanho, cor e largura máxima não mudaram. */
.hero-desc .hero-desc-item[hidden] { display: none; }

/* A troca entra com um esmaecer curto, e só para quem não pediu menos movimento. A animação
   dispara sozinha quando o parágrafo sai de `display: none`, sem precisar de classe. */
@media (prefers-reduced-motion: no-preference) {
    .hero-desc .hero-desc-item { animation: hero-desc-entra 0.6s ease; }
}

@keyframes hero-desc-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}