/* ==========================================================================
   OMNITEK — contacto.css
   Estilos exclusivos de /contacto.html.
   ========================================================================== */

.contact-layout{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px){
  .contact-layout{ grid-template-columns: 1fr; }
}

/* ---------- formulario ---------- */

.contact-form{
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  padding: var(--space-7);
}

.form-row{ margin-bottom: var(--space-5); }
.form-row label{
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.form-row input,
.form-row select,
.form-row textarea{
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  color: var(--color-text);
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--color-blue);
}
.form-row textarea{ resize: vertical; min-height: 120px; }

.form-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 600px){
  .form-grid-2{ grid-template-columns: 1fr; }
}

/* campo trampa anti-spam: oculto para personas, visible para bots */
.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit{
  width: 100%;
  justify-content: center;
  border: none;
}

.form-note{
  font-size: 12px;
  color: var(--color-text-dim);
  margin-top: var(--space-4);
  text-align: center;
}

/* ---------- mensajes de estado ---------- */

.form-alert{
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  display: none;
}
.form-alert.show{ display: block; }
.form-alert.success{
  border: 1px solid var(--color-blue);
  background: rgba(63,169,245,0.08);
  color: var(--color-text);
}
.form-alert.error{
  border: 1px solid var(--color-red-bright);
  background: rgba(176,23,23,0.08);
  color: var(--color-text);
}

/* ---------- panel lateral de información ---------- */

.contact-info-card{
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}
.contact-info-card h3{
  font-size: var(--fs-sm);
  letter-spacing: 0.5px;
  margin-bottom: var(--space-4);
}
.contact-info-row{
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.contact-info-row:last-child{ margin-bottom: 0; }
.contact-info-row .k{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-blue);
  min-width: 92px;
}
.contact-info-row a{ color: var(--color-text); }
.contact-info-row a:hover{ color: var(--color-blue); }

.map-frame{
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 240px;
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.9) contrast(0.9); }