/* ============================================================
   Eletrônica JRC — Ajustes responsivos (static build)
   Carregado após style.css para reforçar a responsividade
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

img, video, iframe { max-width: 100%; height: auto; }

/* Evita rolagem horizontal em telas pequenas */
html, body { overflow-x: hidden; max-width: 100%; }

/* Containers fluidos */
.elementor-container,
.container,
.row { max-width: 100%; }

/* ---------- Tablets (<= 1024px) ---------- */
@media (max-width: 1024px) {
  .jrc-hero-title { font-size: 48px; }
  .elementor-column { width: 100% !important; }
}

/* ---------- Telas médias (<= 768px) ---------- */
@media (max-width: 768px) {
  .jrc-static-hero { min-height: 360px; }
  .jrc-hero-title { font-size: 36px; }
  .jrc-hero-sub { font-size: 15px; }

  /* Colunas do Elementor viram 1 por linha */
  .elementor-column,
  .elementor-col-33,
  .elementor-col-50,
  .elementor-col-25,
  .elementor-inner-column { width: 100% !important; }

  /* Tipografia mais legível */
  h1 { font-size: 32px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }

  /* Padding lateral de segurança */
  .elementor-section .elementor-container { padding-left: 16px; padding-right: 16px; }

  /* Menu / cabeçalho */
  .header-mobile, .mobile-menu { display: block; }
}

/* ---------- Celulares (<= 480px) ---------- */
@media (max-width: 480px) {
  .jrc-static-hero { min-height: 280px; }
  .jrc-hero-title { font-size: 28px; }
  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  body { font-size: 15px; }

  /* Botões ocupam largura total e ficam fáceis de tocar */
  .elementor-button, .btn, button[type="submit"] {
    width: 100%;
    display: block;
    text-align: center;
    padding: 14px 18px;
  }
}