/* === Contacto — Tema Jesús Pérez (CSS-only skin) ===
   Objetivo: integrarse con el estilo global sin tocar la funcionalidad.
   - Hereda tipografía, tamaños y colores base del tema.
   - Usa variables CSS si existen; si no, aplica fallbacks suaves.
   - Mantiene la estructura y clases actuales (NO cambia el markup ni el JS).
*/

/* Variables de integración (opcionales) */
:root{
  --jpz-panel-bg: var(--card-bg, rgba(255, 255, 255, 0.08));
  --jpz-panel-border: var(--border-color, rgba(255,255,255,.06));
  --jpz-text: var(--text-color, inherit);
  --jpz-overlay: var(--overlay-color, rgba(0,0,0,.6));
  --jpz-radius: var(--radius-2xl, 16px);
  --jpz-space: var(--space-4, 1rem);
  --jpz-space-sm: var(--space-2, .5rem);
  --jpz-input-bg: var(--input-bg, rgba(6, 8, 14, 0.9));
  --jpz-input-border: var(--input-border, rgba(255,255,255,.08));
  --jpz-input-text: var(--input-text, inherit);
  --jpz-input-focus: var(--focus-ring, rgba(250,204,21,.45));
  --jpz-accent: var(--accent, #facc15);
  --jpz-shadow: 0 12px 48px rgba(0,0,0,.35);
}

/* Visibilidad modal */
.jp-modal[hidden]{ display:none !important; }
.jp-modal{ position:fixed; inset:0; z-index:9999; }

/* Capa oscura: usa overlay del tema si existe */
.jp-modal__overlay{
  position:absolute; inset:0;
  background: var(--jpz-overlay);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
}

/* Contenedor del diálogo: panel semitransparente, borde sutil y radios amplios */
.jp-modal__dialog{
  position:relative;
  margin:8vh auto 0;
  max-width:min(880px, calc(100vw - 32px));
  padding: calc(var(--jpz-space) * 1.25);
  background: var(--jpz-panel-bg);
  color: var(--jpz-text);
  border: 1px solid var(--jpz-panel-border);
  border-radius: var(--jpz-radius);
  box-shadow: var(--jpz-shadow);
}

/* Cierre */
.jp-modal__close{
  position:absolute; top:10px; right:12px;
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border: 0; background: transparent; color: currentColor;
  opacity:.9; cursor:pointer;
}
.jp-modal__close:hover{ opacity:1; transform: scale(1.04); }

/* Título: hereda tipografía global */
.jp-modal__title{
  margin: 0 0 var(--jpz-space);
  font: inherit; font-weight: 600; letter-spacing: .2px;
}

/* Grid del formulario: fluido y con gap coherente */
.jp-form-2col{ display:grid; grid-template-columns:1fr 1fr; gap: calc(var(--jpz-space) * .75); }
@media (max-width: 680px){ .jp-form-2col{ grid-template-columns:1fr; } }

.jp-field{ margin-bottom: var(--jpz-space-sm); }
.jp-field label{ display:block; margin: 0 0 6px; font: inherit; opacity:.9; }

/* Inputs y textarea: heredan tipografía/tamaño; fondo y borde suaves */
.jp-field input,
.jp-field textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: calc(var(--jpz-radius) - 4px);
  background: var(--jpz-input-bg);
  color: var(--jpz-input-text);
  border: 1px solid var(--jpz-input-border);
  font: inherit;
  line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.jp-field textarea{ resize: vertical; min-height: 140px; }
.jp-field input:focus, .jp-field textarea:focus{
  outline: 2px solid var(--jpz-input-focus);
  outline-offset: 1px;
  border-color: var(--jpz-input-focus);
}

/* Acciones */
.jp-actions{
  display:flex; align-items:center; gap: .75rem;
  margin-top: calc(var(--jpz-space) * .75);
}
/* Botón: utiliza la clase .btn del tema si existe; aquí solo añadimos fallback */
.jp-actions .btn{
  font: inherit; font-weight: 700;
  border: 0; border-radius: 999px;
  padding: 10px 16px; cursor: pointer;
  background: var(--button-bg, var(--jpz-accent));
  color: var(--button-fg, #111827);
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
  transition: transform .08s ease, box-shadow .15s ease, opacity .15s ease;
}
.jp-actions .btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.jp-actions .btn:disabled{ opacity:.65; cursor:not-allowed; }

/* Nota de estado */
.jp-note{ min-height: 1.25em; font: inherit; opacity:.95; }

/* Honeypot totalmente oculto pero accesible */
.jp-field.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* Preferir que el modal se integre con capas/gradientes de la home si existen */
@media (min-width: 1200px){
  .jp-modal__dialog{ backdrop-filter: blur(1px) saturate(1.05); }
}

/* Reduce al máximo cualquier choque con estilos globales: sin !important salvo en [hidden] */