/**
 * PLANTILLA FORMULARIO SEOLUCIONES — Estilos funcionales mínimos
 * 
 * Solo estilos necesarios para el funcionamiento del formulario:
 * errores, foco, honeypot, loading del botón.
 * Sin branding ni colores corporativos.
 * Compatible con cualquier proyecto.
 */

/* ============================================================
   HONEYPOT — oculto para bots, invisible para humanos
   ============================================================ */
.form-group--honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================
   MENSAJES DE ERROR
   ============================================================ */
.form-error {
  display: none;
  margin-top: 4px;
  font-size: 13px;
  color: #d93025;
  line-height: 1.4;
}

.form-error--visible {
  display: block;
}

/* ============================================================
   CAMPO INVÁLIDO
   ============================================================ */
.form-input--error {
  border-color: #d93025 !important;
  outline-color: #d93025;
}

.form-input--error:focus {
  box-shadow: 0 0 0 2px rgba(217, 48, 37, 0.15);
}

.form-group--invalid .form-label {
  color: #d93025;
}

/* ============================================================
   FOCO ACCESIBLE
   ============================================================ */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: 2px solid #4a90d9;
  outline-offset: 1px;
}

/* ============================================================
   BOTÓN — ESTADO LOADING / DISABLED
   ============================================================ */
.form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.form-submit--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.form-submit--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: form-spin 0.6s linear infinite;
}

@keyframes form-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   CHECKBOX
   ============================================================ */
.form-group--checkbox .form-error {
  margin-top: 6px;
}
/* Plecartón — integración visual */
.plecarton-form{background:#fff;border:1px solid #e7ded0;border-radius:24px;padding:28px;box-shadow:0 12px 35px rgba(38,31,22,.07)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{display:grid;gap:7px}.form-group--full{grid-column:1/-1}
.form-label{font-weight:800;color:#1d2421}.optional{font-weight:500;color:#65706a;font-size:.88em}
.form-input{width:100%;padding:13px 14px;border:1px solid #cfc7bb;border-radius:12px;background:#fff;color:#1d2421}
.form-textarea{min-height:130px;resize:vertical}.form-select{appearance:auto}
.form-checkbox-wrapper{display:flex;gap:10px;align-items:flex-start}.form-checkbox{margin-top:5px}.form-checkbox-label{font-size:.92rem;color:#46514b;line-height:1.5}.form-checkbox-label a{color:#355e4a;text-decoration:underline;font-weight:700}
.form-actions{margin-top:20px}.form-submit{min-width:220px}.contact-form__legal{margin:14px 0 0;color:#65706a;font-size:.86rem}
.contact-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:42px;align-items:start}.contact-aside{background:#355e4a;color:#fff;border-radius:24px;padding:28px;position:sticky;top:105px}.contact-aside h2{font-size:1.65rem}.contact-aside p{color:#e5eee9}.contact-aside ul{padding-left:20px}.contact-aside li{margin:10px 0}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr}.contact-aside{position:static}.form-grid{grid-template-columns:1fr}.form-group--full{grid-column:auto}}
@media(max-width:600px){.plecarton-form{padding:20px}.form-submit{width:100%}}
