/* =====================================================================
   Ajustes por tela (30/09/2026), da revisão em 2560, 1920, 1440, 1366,
   1280, tablet deitado e em pé, celulares de 360 a 430 e celular deitado.
   Carregado por último.
   ===================================================================== */

/* Coluna do conteúdo: a mesma do header (1280px com respiro nas laterais).
   --col-esq é a distância da borda da tela até onde o logo começa. */
:root { --col-esq: 18px; }
/* 100% (e não 100vw) para não contar a barra de rolagem: a variável vale onde é usada,
   então o 100% é a largura do bloco da própria seção, igual ao header */
@media (min-width: 1024px) { :root { --col-esq: calc(max(0px, (100% - 1280px) / 2) + clamp(20px, 5vw, 48px)); } }

/* Início: título e botões alinhados com o logo do header (antes colavam na borda em telas largas) */
@media (min-width: 1024px) {
  .Inicio { padding-left: var(--col-esq); padding-right: var(--col-esq); }
}

/* Header entre 1024 e 1279px: o menu encostava no logo */
@media (min-width: 1024px) and (max-width: 1279px) { .Header__nav { padding-left: 1.5rem; } }

/* O que muda: título, cartões e fechamento na mesma coluna do header.
   Os cartões anteriores (cópias do giro) somem num degradê à esquerda. */
@media (min-width: 1024px) {
  .FullWidthCardCarousel .Carousel__footer,
  .Carousel__fim { max-width: none; padding-left: var(--col-esq); padding-right: var(--col-esq); }
  .Carousel__viewport {
    padding: 0 var(--col-esq) 48px; margin-bottom: -48px;
    -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--col-esq) - 28px), #000 calc(var(--col-esq) - 2px));
            mask-image: linear-gradient(90deg, transparent calc(var(--col-esq) - 28px), #000 calc(var(--col-esq) - 2px));
  }
}

/* Roda de serviços: a posição do texto e do índice em telas largas vem do js/frentes.js (medir) */

/* Rodapé entre 620 e 1023px: três colunas espremiam o e-mail, que quebrava no meio */
@media (min-width: 620px) and (max-width: 1023px) {
  .Rodape__inner { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
  .Rodape__marca { grid-column: 1 / -1; }
}
.Rodape__col a { overflow-wrap: break-word; }


/* Celular deitado: na janela do teste o radar sai (css/momento.css) e o topo e o rodapé do chat encolhem */
@media (orientation: landscape) and (max-height: 500px) {
  .Chat__topo { padding-block: .55rem; }
  .Chat__rodape { min-height: 2.2rem; padding-block: .25rem .4rem; }
}

/* O que muda "entrando" na tela: uma camada só faz o efeito. O fundo da seção tem a cor do
   cartão e é ele que chega estreito e arredondado e abre até a largura toda (js/main.js);
   o cartão por cima fica sem fundo nem cantos, então não sobra canto de outra cor atrás. */
#revealApps > .ScrollRevealSection__bg {
  background: linear-gradient(180deg, #FBFAFF 0%, #fff 420px);
  box-shadow: 0 -18px 60px -24px rgba(47, 28, 106, .22), 0 -40px 120px -40px rgba(103, 61, 230, .18);
  will-change: transform;
}
#revealApps .Applications__carouselWrap { background: transparent; border-radius: 0; box-shadow: none; }

/* Celular deitado: WhatsApp flutuante um pouco menor */
@media (orientation: landscape) and (max-height: 500px) { .WaFlutuante { width: 48px; height: 48px; } .WaFlutuante svg { width: 26px; height: 26px; } }