/* contacto */
.contacto { padding: 130px 0 110px; }
.contacto-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contacto .kicker { color: var(--azul); margin-bottom: 16px; }
.contacto h1 { font-size: clamp(40px, 6vw, 84px); font-weight: 850; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
.dato { background: #fff; border-radius: var(--radio); padding: 24px; display: grid; gap: 8px; align-content: start; }
.dato small { font: 600 12px/1 var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--gris-osc); }
.dato strong { font: 800 24px/1.15 var(--display); font-stretch: 110%; }
.dato .boton { margin-top: 10px; justify-self: start; }
.dato .tel { white-space: nowrap; font-size: clamp(18px, 1.7vw, 24px); }
.dato-osc { grid-column: 1 / -1; background: var(--navy); color: var(--crema); }
.dato-osc small { color: var(--gris); }
.horas { display: grid; gap: 2px; margin: 4px 0 0; }
.horas dt { font-weight: 600; } .horas dt:not(:first-child) { margin-top: 8px; }
.horas dd { margin: 0; font: 800 20px/1.2 var(--display); font-stretch: 105%; }
.abierto { justify-self: start; margin-top: 6px; padding: 6px 12px; border-radius: 999px; background: #f6e3e1; color: #8a2a1e; font-size: 13px; font-weight: 600; }
.abierto.si { background: #dff3e6; color: #17633a; }
.enlace { font-weight: 600; word-break: break-all; }
.redes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.redes .soc { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 500; }
.redes svg { width: 22px; height: 22px; color: var(--azul); }
/* mapa propio: calles dibujadas y el pin que late; abre Google Maps */
.mapa { position: sticky; top: 100px; display: grid; place-items: center; border-radius: var(--radio); overflow: hidden; background: var(--navy); color: #1b1a6a; aspect-ratio: 4 / 5; text-decoration: none; isolation: isolate; }
.mapa .calles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.mapa:hover .calles { transform: scale(1.06); }
.mapa .pin { position: absolute; top: 34%; left: 50%; translate: -50% -50%; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--azul); color: #fff;
  box-shadow: 0 0 0 0 rgb(52 49 217 / .6); animation: late 2.2s infinite; }
.mapa .pin svg { width: 30px; height: 30px; }
@keyframes late { 70% { box-shadow: 0 0 0 26px rgb(52 49 217 / 0); } 100% { box-shadow: 0 0 0 0 rgb(52 49 217 / 0); } }
.mapa-txt { position: absolute; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 4px; padding: 20px; border-radius: 22px; background: var(--crema); color: var(--navy); }
.mapa-txt strong { font: 800 24px/1.1 var(--display); font-stretch: 110%; }
.mapa-txt small { color: var(--gris-osc); font-size: 15px; }
.mapa-txt .boton { justify-self: start; margin-top: 10px; }
@media (max-width: 960px) { .contacto-grilla { grid-template-columns: 1fr; } .mapa { position: relative; top: 0; aspect-ratio: 1; } .mapa .pin { top: 28%; } }
@media (max-width: 560px) { .contacto { padding-top: 110px; } .datos { grid-template-columns: 1fr; } }