.contact-layout{
  display:grid;
  gap:24px;
  align-items:flex-start;
  margin-bottom:32px;
}

@media (min-width: 980px){
  .contact-layout{
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  }
}

.contact-card{
  background: var(--color-surface, #FFFDF5);
  border-radius: var(--radius-lg, 16px);
  padding: 18px 16px 20px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  border: 1px solid var(--outline, #E6E6E6);
}

.contact-subtitle{
  margin:0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary, #0D1B2A);
}

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}

.field label{
  font-size:.9rem;
  font-weight:600;
}

.field input,
.field textarea{
  border-radius: 10px;
  border: 1px solid var(--outline, #E6E6E6);
  padding:8px 10px;
  font: inherit;
}

.actions-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.info-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:6px;
  font-size:.95rem;
}

.info-row .material-symbols-outlined{
  font-size:20px;
  color: var(--color-primary, #0D1B2A);
}

.info-row a{
  color: var(--color-primary, #0D1B2A);
  text-decoration: underline;
}

.map-wrap{
  margin-top:12px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--outline, #E6E6E6);
  height:230px;
}

.info-row .info-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.info-row .info-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;        /* usa el color del texto */
  color: var(--color-primary, #0D1B2A);
}

.info-row{
  display:flex;
  align-items:flex-start;  /* icono y texto alineados arriba */
  gap:8px;
  margin-bottom:6px;
  font-size:.95rem;
}

/* quita el margen del párrafo para que arranque a la altura del icono */
.info-row .info-text{
  margin:0;
}

.btn-whatsapp{
  background: #25D366;
  border-color: #25D366;
  color: #ffffff;
}

.btn-whatsapp:hover{
  background: #1ebe5d;
  border-color: #1ebe5d;
}

.btn-whatsapp:active{
  transform: translateY(1px);
}

.btn-whatsapp .wa-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:6px;
}

.btn-whatsapp .wa-icon svg{
  width: 18px;
  height: 18px;
  fill: currentColor; /* usa el color del texto del botón */
}