/* ==========================
   Estilos profesionales para la página de contacto
   - organiza layout, tarjetas, mapa, formulario y estados
   (movido desde styles.css)
   ========================== */
.contact-grid {
  display: grid;
  /* Formulario con ancho fijo para consistencia, información flexible */
  grid-template-columns: 1fr 520px;
  gap: 2.5rem;
  align-items: start;
}

.contact-info .info-card,
.contact-form {
  padding: 1.5rem;
  border: 1px solid rgba(30,58,138,0.06);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-info .info-card:hover,
.contact-form:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.contact-info h3, .contact-form h3 { margin-top: 0; }

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.info-list li { display:flex; gap:.5rem; align-items:flex-start; color:var(--text-secondary); }
.info-list li strong { width: 110px; display:inline-block; color:var(--text-primary); font-weight:700; }

.map-wrap {
  margin-top: 1rem;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: calc(var(--radius-lg) - 4px);
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(2,6,23,0.06);
  border: 1px solid rgba(2,6,23,0.03);
}
.map-wrap iframe { width:100%; height:100%; border:0; display:block; filter: grayscale(0%); }

/* Contact form */
.contact-form { display:flex; flex-direction:column; gap: .75rem; }
.contact-form .muted { margin: 0 0 0.75rem 0; }
.contact-form .form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.contact-form .form-field { display:flex; flex-direction:column; gap:.375rem; }
.contact-form label { font-weight:600; color:var(--text-primary); font-size:0.95rem; }

.contact-form__header h3 { margin: 0 0 .25rem 0; font-size: 1.4rem; }
.contact-form__header .muted { margin: 0 0 .75rem 0; }

.form-field--full { grid-column: 1 / -1; }

.contact-form input::placeholder, .contact-form textarea::placeholder { color: #94a3b8; }

/* Estilos para campos inválidos tras intento de submit (soporte visual) */
.contact-form input:invalid, .contact-form textarea:invalid, .contact-form select:invalid {
  border-color: rgba(185,28,28,0.9);
  box-shadow: 0 6px 18px rgba(185,28,28,0.06);
}

.consent-label { font-weight: 500; color: var(--text-secondary); display: flex; gap: .5rem; align-items: center; }
.consent-label a { color: var(--primary); margin-left: .25rem; text-decoration: underline; }

.form-actions { display:flex; gap:.75rem; margin-top:.5rem; justify-content: flex-end; }
.form-actions .btn.btn--alt { background: transparent; border: 1px solid rgba(2,6,23,0.06); color: var(--text-primary); }

/* Mobile adjustments keep buttons full width and stacked */
@media (max-width: 900px) {
  .form-actions { flex-direction: column; justify-content: stretch; }
  .form-actions .btn { width: 100%; }
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  padding: .75rem 1rem;
  border: 1px solid rgba(2,6,23,0.06);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-primary);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(30,58,138,0.06);
}

.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%); background-position: calc(100% - 1rem) calc(1em + .25rem), calc(100% - .5rem) calc(1em + .25rem); background-size: .5rem .5rem, .5rem .5rem; background-repeat: no-repeat; padding-right: 2.5rem; }

.form-consent { display:flex; align-items:center; gap:.5rem; font-size:.95rem; color:var(--text-secondary); }
.form-consent input { width:1.05rem; height:1.05rem; }

.form-actions { display:flex; gap:.75rem; margin-top:.5rem; }
.form-actions .btn { padding: .75rem 1.25rem; font-size: 0.95rem; }

/* Estados del formulario */
.form-status { margin-top:.5rem; min-height:1.4rem; font-weight:600; font-size:.95rem; }
.form-status--error { color: #b91c1c; }
.form-status--success { color: #065f46; }
.form-status--sending { color: #0ea5e9; }

/* Botones en móvil: full width para mejor usabilidad */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form .form-grid { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; }
  .form-actions .btn { width:100%; }
  .map-wrap { aspect-ratio: 16/9; }
}

/* Mejora de foco para accesibilidad */
:focus {
  outline: 3px solid rgba(59,130,246,0.12);
  outline-offset: 2px;
}