/* =========================================================
   Eva.intim — contacto.css
   ========================================================= */

.contacto { padding-top: 4px; padding-bottom: var(--seccion); }

.contacto__contenido { display: grid; gap: 24px; }
.contacto__columna { display: grid; gap: 16px; }

.datos { display: grid; gap: 10px; }

.dato {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--linea);
  border-radius: 14px;
  box-shadow: var(--sombra);
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
a.dato:active { transform: scale(.98); }
@media (hover: hover) {
  a.dato:hover { border-color: var(--oro); background: var(--blanco); }
}

.dato__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  color: var(--oro);
  background: var(--crema);
  border: 1px solid rgba(181, 138, 62, .5);
  border-radius: 50%;
}
.dato__icono svg { width: 23px; height: 23px; stroke-width: 1.3; }

.dato__texto { display: grid; flex: 1; min-width: 0; }
.dato__etiqueta {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-texto);
}
.dato__valor { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.dato__ir { width: 20px; height: 20px; color: var(--oro); }

.contacto .btn--grande { width: 100%; }

/* Mapa */
.mapa {
  position: relative;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(181, 138, 62, .35);
  background:
    repeating-linear-gradient(0deg, rgba(217, 188, 133, .08) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(217, 188, 133, .08) 0 1px, transparent 1px 40px),
    linear-gradient(160deg, #45454F 0%, #34343D 100%);
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (min-width: 900px) {
  .contacto__contenido { grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
  .contacto__columna { align-content: start; }
  .mapa { height: auto; min-height: 460px; }
}