@media (max-width: 768px) {
  header { padding: 16px 5%; }
  .hero { padding: 60px 16px 40px; }
}

/* Live preview del admin (assets/js/admin/livePreview.js) — mobile:
   overlay a pantalla completa que se abre/cierra con el botón flotante
   "👁️ Preview" (.admin-preview-panel.open). El botón y el header con la
   × solo tienen sentido acá; en desktop el panel queda siempre visible
   como columna fija, ver el min-width más abajo. */
@media (max-width: 999px) {
  .admin-preview-panel.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(9, 13, 22, 0.97);
    backdrop-filter: blur(10px);
    padding: 20px;
    box-sizing: border-box;
    justify-content: center;
  }
}

/* Desktop: panel de preview siempre visible como segunda columna del
   modal (split-view) — no hace falta el botón flotante ni la ×, así
   que se ocultan. */
@media (min-width: 1000px) {
  .modal-box { max-width: 1000px; }

  .admin-preview-panel {
    display: flex;
    flex-direction: column;
    flex: 0 0 300px;
    border-left: 1px solid var(--border-glass);
    padding: 20px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.02);
  }

  .admin-preview-close-btn,
  .admin-preview-toggle-btn { display: none; }
}

@media (max-width: 600px) {
  .hero p { font-size: 1rem; }
  .client-card { padding: 28px 18px; }
  .modal-box-form { padding: 18px; }

  /* Campos y títulos del admin (incluye el Page Builder — blockManager.js
     usa .form-control/.form-group/.field-label para todo) más compactos
     en mobile: menos padding, tipografía un toque más chica, look más
     limpio en vez de inputs gigantes de golpe. */
  .form-control {
    padding: 9px 12px;
    font-size: 0.88rem;
    border-radius: 8px;
  }

  .form-group { margin-bottom: 10px; }

  .form-group label,
  .field-label { font-size: 0.78rem; }

  .field-label { margin-top: 14px; margin-bottom: 6px; }

  .block-card-title { padding: 7px 9px; font-size: 0.8rem; }
}