/* ============================================================
   «Horarios y ubicación» ESTÁNDAR del sitio web — estilos (ubicacion-estandar.js)
   ============================================================
   Mismo diseño que el de ZUK: franja oscura con los horarios · «¿Cómo llegar?» con el logo, el botón y la dirección a un lado y el mapa al otro.
   Para darle el diseño de un cliente NO se toca la estructura: se redefinen las variables `--ub-*` en la hoja del sitio (después de esta):

     .ub { --ub-franja: #1B1410; --ub-panel: #2A2018; --ub-acento: #E9BE8C; --ub-titulo: 'Playfair Display', serif; }

   Contrastes: cada texto tiene que dar 4,5:1 sobre su fondo. */

.ub {
  --ub-franja: #161C1A;         /* fondo de la franja de horarios */
  --ub-panel: #243532;          /* fondo del panel «¿Cómo llegar?» */
  --ub-tinta: #FFFFFF;          /* texto principal */
  --ub-suave: #B9B2A2;          /* texto secundario (dirección, días) */
  --ub-acento: #E8A07A;         /* etiquetas, ícono y borde del botón «¿Cómo llegar?» */
  --ub-linea: rgba(255, 255, 255, .22);
  --ub-pin: #E23B2E;
  --ub-tarjeta: #FFFFFF;        /* tarjeta blanca del logo */
  --ub-radio-logo: 0;           /* esquinas de las tarjetas del logo (0 = rectas, como ZUK; p. ej. 12px = redondeadas) */
  --ub-titulo: Georgia, 'Times New Roman', serif;
  --ub-texto: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ub-pad: clamp(20px, 5vw, 64px);
  font-family: var(--ub-texto); color: var(--ub-tinta);
}
.ub *, .ub *::before, .ub *::after { box-sizing: border-box; }
.ub a:focus-visible { outline: 3px solid var(--ub-acento); outline-offset: 3px; }

/* ---------- franja de horarios ---------- */
.ub-horarios { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(20px, 4vw, 64px); padding: clamp(22px, 2.8vw, 38px) max(var(--ub-pad), calc((100% - 1040px) / 2)); background: var(--ub-franja); }
.ub-titulo { margin: 0 0 clamp(10px, 1.4vw, 16px); font: 800 clamp(20px, 2.3vw, 30px)/1.1 var(--ub-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--ub-tinta); }
.ub-hor-grid { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 4.5vw, 64px); }
.ub-hor-col { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.ub-etq { font: 700 11px var(--ub-texto); letter-spacing: .28em; text-transform: uppercase; color: var(--ub-acento); }
.ub-hora { font: 700 clamp(18px, 2vw, 26px)/1.15 var(--ub-texto); color: var(--ub-tinta); }
.ub-dias { font-size: 12.5px; letter-spacing: .06em; color: var(--ub-suave); }
.ub-hor-der { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 1.6vw, 18px); align-self: stretch; padding-left: clamp(20px, 4vw, 64px); border-left: 1px solid var(--ub-linea); }
.ub-boton { display: inline-block; padding: 12px 32px; border: 1.5px solid rgba(255, 255, 255, .8); background: transparent; color: var(--ub-tinta); font: 800 12px var(--ub-texto); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; text-align: center; transition: background .3s, color .3s, border-color .3s; }
.ub-boton:hover { background: var(--ub-tinta); color: var(--ub-franja); border-color: var(--ub-tinta); }
.ub-nota { display: flex; align-items: center; gap: 9px; font: 700 11px var(--ub-texto); letter-spacing: .2em; text-transform: uppercase; color: #E2DCCE; text-align: left; }
.ub-nota svg { width: 20px; height: 20px; flex: none; color: var(--ub-acento); }

/* ---------- ¿Cómo llegar? ---------- */
.ub-llegar { display: grid; grid-template-columns: 1fr 1.35fr; min-height: 380px; }
.ub-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: 40px var(--ub-pad); background: var(--ub-panel); }
.ub-cabecera { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ub-titulo-llegar { margin: 0; font-size: 26px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.ub-logo { padding: 12px 20px; border-radius: var(--ub-radio-logo); background: var(--ub-tarjeta); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.ub-logo img { display: block; height: 44px; width: auto; max-width: 220px; }
.ub-llegar-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border: 1px solid var(--ub-acento); color: var(--ub-acento); font: 700 12px var(--ub-texto); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; transition: background .25s, color .25s; }
.ub-llegar-btn:hover { background: var(--ub-acento); color: var(--ub-panel); }
.ub-llegar-btn svg { width: 16px; height: 16px; }
.ub-direccion { margin: 0; font-size: 14px; line-height: 1.7; color: var(--ub-suave); }

.ub-mapa { position: relative; display: block; width: 100%; height: 100%; min-height: 380px; overflow: hidden; background: var(--ub-panel); cursor: pointer; contain: paint layout; }
/* UNA imagen en blanco y negro (mapa-bn) sobre la misma a color (mapa-color): al tocar o pasar el mouse se revela el color con solo opacidad */
.ub-grid { position: absolute; left: 50%; top: 50%; transition: transform 1.2s cubic-bezier(.22, .61, .36, 1); }
.ub-grid img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.ub-color { z-index: 0; }
.ub-bn { z-index: 1; transition: opacity .5s ease; }
.ub-mapa:hover .ub-bn, .ub-mapa.tocado .ub-bn { opacity: 0; }
.ub-mapa:hover .ub-grid, .ub-mapa.tocado .ub-grid { transform: scale(1.04); }
.ub-marcador { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.ub-logo-chico { margin-bottom: 6px; padding: 7px 12px; border-radius: var(--ub-radio-logo); background: var(--ub-tarjeta); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); white-space: nowrap; }
.ub-logo-chico img { display: block; height: 22px; width: auto; }
.ub-pin { width: 32px; height: 32px; color: var(--ub-pin); filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4)); transform-origin: 50% 100%; }
.ub-mapa:hover .ub-pin { animation: ub-salta .6s ease; }
.ub-creditos { position: absolute; right: 8px; bottom: 6px; z-index: 3; padding: 2px 6px; background: rgba(255, 255, 255, .75); color: #333; font: 10px var(--ub-texto); }
@keyframes ub-salta { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 70% { transform: translateY(0); } }

/* ---------- botón de WhatsApp (flotante) ---------- */
.ub-wsp { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #1FA855; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); transition: transform .2s; }
.ub-wsp:hover { transform: scale(1.07); }
.ub-wsp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #1FA855; }

@media (max-width: 760px) {
  .ub-llegar { grid-template-columns: 1fr; }
  .ub-mapa { min-height: 300px; }
  .ub-info { align-items: center; text-align: center; }
}
@media (max-width: 640px) {
  .ub-horarios { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .ub-hor-grid { justify-content: center; }
  .ub-hor-col { align-items: center; }
  .ub-hor-der { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--ub-linea); }
}
@media (prefers-reduced-motion: reduce) { .ub-grid, .ub-bn, .ub-wsp, .ub-boton, .ub-llegar-btn { transition: none; } .ub-mapa:hover .ub-pin { animation: none; } }