/* Dentelo — reglas responsive compartidas (tablet ≤1024px, móvil ≤640px).
   Los estilos base son inline, así que estas reglas usan !important para poder ganarles. */

.nav-burger { display: none; }

/* ---------------- TABLET ---------------- */
@media (max-width: 1024px) {
  .page h1 { width: auto !important; height: auto !important; }
  .r-hero-title { font-size: 46px !important; max-width: 15ch !important; text-wrap: balance !important; white-space: normal !important; }
  .hero-br { display: none !important; }

  .r-split  { grid-template-columns: 1fr !important; }
  .r-cat    { grid-template-columns: 1fr !important; }
  .r-cols-2 { grid-template-columns: 1fr !important; }
  .r-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .r-foot   { grid-template-columns: repeat(2, 1fr) !important; }

  /* Nav → menú hamburguesa */
  .desktop-nav, .desktop-cta { display: none !important; }
  .nav-burger { display: flex !important; }

  /* El aside de filtros deja de ser fijo cuando se apila */
  .r-aside { position: static !important; }
}

/* ---------------- MÓVIL ---------------- */
@media (max-width: 640px) {
  .page section { padding-left: 20px !important; padding-right: 20px !important; }
  .page h1 { font-size: 32px !important; line-height: 1.15 !important; }
  .page h2 { font-size: 25px !important; line-height: 1.2 !important; }
  .r-hero-title { font-size: 30px !important; }

  .r-split, .r-cat, .r-cols-3, .r-cols-4, .r-foot { grid-template-columns: 1fr !important; }
  .r-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Formulario de contacto y specs de producto: apilar */
  .r-form2 { grid-template-columns: 1fr !important; }
  .r-specs { grid-template-columns: 1fr !important; gap: 2px !important; }

  .r-hero-pad { padding-top: 64px !important; padding-bottom: 64px !important; }
  .r-navwrap { padding-left: 20px !important; padding-right: 20px !important; }

  /* Caso destacado: el video vertical no debe estirarse */
  .r-case-video { max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; }

  /* Nunca desbordar el ancho en móvil */
  .page img, .page iframe, .page video { max-width: 100% !important; }
  .page { overflow-x: hidden !important; }
}


/* Splash de carga con el logo de Dentelo */
@keyframes om-splash-out { to { opacity: 0; visibility: hidden; } }
.om-splash { position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; align-items: center; justify-content: center; animation: om-splash-out .5s ease 1.1s forwards; }