@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 (100% ancho y alto, sin recortes ni
   marco) 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: var(--bg-dark);
    padding: 0;
  }

  .admin-preview-panel.open .admin-preview-panel-header {
    margin: 0;
    padding: 16px 16px 10px;
  }

  .admin-preview-panel.open .admin-preview-frame-wrap {
    border-radius: 0;
    /* Deja lugar a la barra de gestos/navegación del navegador mobile
       en vez de que el iframe quede tapado en el borde inferior. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Desktop: panel de preview siempre visible como segunda columna del
   modal (split-view), amplia y sin restricciones artificiales de ancho
   — cover/avatar/botones/redes se ven grandes y bien distribuidos, no
   apretados. No hace falta el botón flotante ni la ×, así que se
   ocultan. */
@media (min-width: 1000px) {
  .modal-box { max-width: 1400px; }

  .modal-box-form {
    flex: 1 1 460px;
    min-width: 380px;
  }

  .admin-preview-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 560px;
    min-width: 420px;
    border-left: 1px solid var(--border-glass);
    padding: 24px;
    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; }
}