/* ============================================================
   Campos, etiquetas y estados de formulario
   ============================================================ */

.form-panel{ background:var(--white); padding:clamp(var(--sp-8),4vw,var(--sp-12)); border:1px solid var(--line); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.form-group{ margin-bottom:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); }
.form-group label{ font-family:var(--font-mono); font-size:var(--fs-lbl); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); }
/* Se marcan los campos opcionales, no los obligatorios: son menos y así el
   visitante sabe qué puede saltarse. */
.form-group label .opcional{ font-weight:400; letter-spacing:.02em; text-transform:none; color:var(--steel-light); }
/* width:100% + min-width:0 son obligatorios: un <select> se dimensiona por su
   opción más larga y, dentro de un grid, arrastraba la columna entera fuera de
   la pantalla en móvil. */
.form-group input, .form-group select, .form-group textarea{
  border:none; border-bottom:1px solid var(--line); background:transparent; padding:var(--sp-3) 2px;
  color:var(--graphite); transition:border-color .2s ease;
  width:100%; min-width:0; max-width:100%;
}
.form-group{ min-width:0; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--yellow-ochre); }
.form-group textarea{ resize:vertical; min-height:96px; }
.form-success{ display:none; padding:var(--sp-6); background:var(--blue-100); border-left:3px solid var(--yellow); font-size:var(--fs-xs); color:var(--navy); }
.form-success.show{ display:block; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }