/* ===================================================================
   MODO_APP_CTL — camada visual "app moderno" pro site inteiro.
   Seletores de baixa especificidade e SEM !important de propósito: assim
   só "pega" onde nenhum outro plugin CTL NET já definiu seu próprio visual
   (todos os outros usam !important em cima de classes próprias), então
   isto nunca briga com o gamer-ctl, hero-ctl, ctl-net-planos, etc.
   =================================================================== */
:root{
  --moapp-radius: 18px;
  --moapp-radius-sm: 12px;
  --moapp-shadow: 0 10px 28px rgba(20,20,30,.10);
  --moapp-shadow-hover: 0 16px 36px rgba(20,20,30,.16);
  --moapp-ease: cubic-bezier(.22,.9,.32,1);
  --moapp-speed: .32s;
  --moapp-accent: #f05a17;
}

html{ scroll-behavior: smooth; }

/* ===== Cantos arredondados + transições suaves ===== */
img, .wp-block-image img, .entry-content img, .entry-content iframe, .entry-content video, iframe{
  border-radius: var(--moapp-radius);
}
.wp-block-image, .wp-block-gallery figure, .wp-block-embed, .wp-block-cover, blockquote{
  border-radius: var(--moapp-radius);
  overflow: hidden;
}
button, input[type="submit"], input[type="button"], .wp-block-button__link, a.button{
  border-radius: var(--moapp-radius-sm);
  transition: transform var(--moapp-speed) var(--moapp-ease), box-shadow var(--moapp-speed) var(--moapp-ease), filter var(--moapp-speed) var(--moapp-ease);
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover, .wp-block-button__link:hover, a.button:hover{
  transform: translateY(-2px);
  filter: brightness(1.04);
}
button:active, input[type="submit"]:active, input[type="button"]:active, .wp-block-button__link:active, a.button:active{
  transform: scale(.96);
}
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], textarea, select{
  border-radius: var(--moapp-radius-sm);
  transition: box-shadow var(--moapp-speed) var(--moapp-ease), border-color var(--moapp-speed) var(--moapp-ease);
}

/* ===== Barra de progresso de leitura ===== */
#moapp-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--moapp-accent), #ff9a3d);
  z-index: 99999;
  pointer-events: none;
}

/* ===== Botão flutuante "voltar ao topo" ===== */
#moapp-top{
  position: fixed; right: 18px; bottom: 18px; z-index: 99998;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--moapp-accent), #ff9a3d);
  color: #fff; border: 0; cursor: pointer; padding: 0;
  box-shadow: var(--moapp-shadow);
  opacity: 0; transform: translateY(16px) scale(.9);
  pointer-events: none;
  transition: opacity var(--moapp-speed) var(--moapp-ease), transform var(--moapp-speed) var(--moapp-ease), box-shadow var(--moapp-speed) var(--moapp-ease);
}
#moapp-top.is-visible{
  opacity: 1; transform: none; pointer-events: auto;
}
#moapp-top:hover{ box-shadow: var(--moapp-shadow-hover); transform: translateY(-2px); }
#moapp-top:active{ transform: scale(.92); }
#moapp-top svg{ width: 20px; height: 20px; }

/* ===== Animação de entrada ao rolar (classe só existe se o JS rodar —
   se o JS falhar/for bloqueado, o conteúdo nunca fica invisível) ===== */
.moapp-reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--moapp-ease), transform .7s var(--moapp-ease);
}
.moapp-reveal.is-in{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  #moapp-top, .moapp-reveal{ transition: none !important; }
  .moapp-reveal{ opacity: 1 !important; transform: none !important; }
}

@media (max-width: 480px){
  #moapp-top{ right: 14px; bottom: 14px; width: 44px; height: 44px; }
}