/* contacto.css
   Estilos específicos para la página de contacto.
   Importa variables y estilos generales desde styles.css (ya enlazado en HTML).
*/

/* Layout del héroe de contacto */
.contact-hero{
  display:block;
  padding:28px 0 40px;
}
.contact-hero .wrap{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:24px;
  align-items:start;
}

/* Tarjeta de información rápida */
.contact-info-card{
  background:linear-gradient(180deg,#fff, rgba(240,139,175,0.02));
  padding:20px;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(16,24,32,0.06);
}
.contact-info-card h1{margin:0 0 8px;color:var(--blue-700)}
.contact-info-card .contact-quick{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.contact-row{display:flex;flex-direction:column;gap:6px}
.contact-row strong{font-weight:800;color:var(--blue-700)}
.contact-row a{color:var(--accent);font-weight:700}

/* Form card */
.contact-form-card{
  background:#fff;padding:20px;border-radius:12px;box-shadow:0 12px 30px rgba(16,24,32,0.06);
}
.contact-form-card h2{margin-top:0}
.contact-form-card label{display:block;margin-bottom:12px}
.contact-form-card input, .contact-form-card select, .contact-form-card textarea{
  width:100%;padding:10px;border-radius:10px;border:1px solid rgba(29,59,91,0.08);font-size:1rem;
}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:8px}
.form-msg{margin-top:10px;font-weight:700}

/* Map frame margin */
.map-frame{margin-top:14px;border-radius:10px;overflow:hidden}

/* Responsive */
@media (max-width:1000px){
  .contact-hero .wrap{grid-template-columns:1fr}
  .contact-info-card{order:2}
  .contact-form-card{order:1}
}

@media (max-width:680px){
  .wrap{padding-left:16px;padding-right:16px}
  .contact-hero .wrap{gap:16px}
}