/* ============================================================
   SpecialOne — responsividade global (tablets e celulares)
   Estratégia: estilos base seguem inline (pintam na hora);
   estas media queries só ajustam em telas menores via !important.
   Obs.: o React re-serializa os estilos inline com espaço após
   os dois-pontos (ex.: "font-size: 56px"), então os seletores
   [style*="..."] abaixo usam exatamente esse formato.
   ============================================================ */

img, video, image-slot, svg, canvas { max-width: 100%; }

/* ---------- ANIMAÇÕES DE ENTRADA (banners / heros) ---------- */
@keyframes so-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.so-enter {
  opacity: 0;
  animation-name: so-enter;
  animation-duration: .72s;
  animation-timing-function: cubic-bezier(.16,.84,.44,1);
  animation-fill-mode: both;
}
.so-enter-2 { animation-delay: .08s; }
.so-enter-3 { animation-delay: .16s; }
.so-enter-4 { animation-delay: .24s; }
.so-enter-5 { animation-delay: .32s; }
.so-enter-6 { animation-delay: .40s; }
@keyframes so-enter-scale { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.so-enter-visual {
  opacity: 0;
  animation-name: so-enter-scale;
  animation-duration: .9s;
  animation-delay: .18s;
  animation-timing-function: cubic-bezier(.16,.84,.44,1);
  animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
  .so-enter, .so-enter-visual { opacity: 1 !important; animation: none !important; transform: none !important; }
}

/* ---------- TABLET (<= 1024px) ---------- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- TABLET ESTREITO / PAISAGEM (<= 860px) ---------- */
@media (max-width: 860px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-column"] { grid-column: auto !important; }
  [style*="grid-row"] { grid-row: auto !important; }
}

/* ---------- CELULAR (<= 600px) ---------- */
@media (max-width: 600px) {
  html, body { overflow-x: hidden; }
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- ESCALA TIPOGRÁFICA (<= 860px) ---------- */
@media (max-width: 860px) {
  [style*="font-size: 64px"] { font-size: 42px !important; }
  [style*="font-size: 60px"] { font-size: 40px !important; }
  [style*="font-size: 56px"] { font-size: 38px !important; }
  [style*="font-size: 54px"] { font-size: 37px !important; }
  [style*="font-size: 52px"] { font-size: 36px !important; }
  [style*="font-size: 50px"] { font-size: 35px !important; }
  [style*="font-size: 48px"] { font-size: 34px !important; }
  [style*="font-size: 46px"] { font-size: 33px !important; }
  [style*="font-size: 44px"] { font-size: 32px !important; }
  [style*="font-size: 42px"] { font-size: 31px !important; }
  [style*="font-size: 40px"] { font-size: 30px !important; }
  [style*="font-size: 38px"] { font-size: 29px !important; }
  [style*="font-size: 36px"] { font-size: 28px !important; }
  [style*="font-size: 34px"] { font-size: 27px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }
  [style*="font-size: 30px"] { font-size: 25px !important; }
}

/* ---------- ESCALA TIPOGRÁFICA (<= 600px) ---------- */
@media (max-width: 600px) {
  [style*="font-size: 64px"] { font-size: 34px !important; }
  [style*="font-size: 60px"] { font-size: 32px !important; }
  [style*="font-size: 56px"] { font-size: 31px !important; }
  [style*="font-size: 54px"] { font-size: 30px !important; }
  [style*="font-size: 52px"] { font-size: 29px !important; }
  [style*="font-size: 50px"] { font-size: 28px !important; }
  [style*="font-size: 48px"] { font-size: 28px !important; }
  [style*="font-size: 46px"] { font-size: 27px !important; }
  [style*="font-size: 44px"] { font-size: 26px !important; }
  [style*="font-size: 42px"] { font-size: 25px !important; }
  [style*="font-size: 40px"] { font-size: 25px !important; }
  [style*="font-size: 38px"] { font-size: 24px !important; }
  [style*="font-size: 36px"] { font-size: 23px !important; }
  [style*="font-size: 34px"] { font-size: 22px !important; }
  [style*="font-size: 32px"] { font-size: 22px !important; }
  [style*="font-size: 30px"] { font-size: 21px !important; }
  [style*="font-size: 28px"] { font-size: 21px !important; }
}