@charset "UTF-8";
/* ════════════════════════════════════════════════════════════════════════════
 * css/web/bh_ubicacion.css — v1.0 25/04/2026
 *
 * Estilos del bloque ubicación rediseñado.
 * Layout grid: mapa a la izquierda, datos a la derecha (escritorio).
 * En móvil: mapa arriba, datos abajo.
 * ════════════════════════════════════════════════════════════════════════════ */


/* ── INTRO ─────────────────────────────────────────────────────────────── */

.ubicacion__intro {
    max-width: 760px;
    margin: 0 auto var(--sp-5, 28px);
    text-align: center;
    color: var(--color-text-secondary, #6e6055);
    font-size: 1.05rem;
    line-height: 1.65;
}
.ubicacion__intro p {
    margin: 0 0 0.6em 0;
}


/* ── GRID PRINCIPAL ────────────────────────────────────────────────────── */

.ubicacion__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-5, 28px);
    align-items: start;
}

@media (max-width: 900px) {
    .ubicacion__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4, 20px);
    }
}


/* ── MAPA ──────────────────────────────────────────────────────────────── */

.ubicacion__mapa-canvas {
    width: 100%;
    height: 480px;
    background: var(--color-bg-alt, #faf6ec);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-accent, #c9a96a) 25%, transparent);
    /* Fallback styling antes de que Leaflet inicie */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ubicacion__mapa-canvas.leaflet-container {
    /* Cuando Leaflet ha tomado el contenedor, sobrescribimos display flex */
    display: block;
}

@media (max-width: 768px) {
    .ubicacion__mapa-canvas {
        height: 340px;
    }
}

.ubicacion__mapa-fallback {
    text-align: center;
    color: var(--color-text-secondary, #6e6055);
}
.ubicacion__mapa-fallback p {
    margin: 0.4em 0;
}

.ubicacion__mapa-credit {
    margin: 0.4em 0 0 0;
    text-align: right;
    color: var(--color-text-secondary, #6e6055);
    font-size: 0.8rem;
}
.ubicacion__mapa-credit a {
    color: inherit;
    text-decoration: underline;
}


/* ── DATOS (columna derecha) ───────────────────────────────────────────── */

.ubicacion__datos {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 16px);
}

.ubicacion__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ubicacion__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: var(--fw-semibold, 600);
    letter-spacing: var(--ls-wide, .04em);
    text-transform: uppercase;
    color: var(--color-accent, #c9a96a);
}

.ubicacion__icono {
    font-size: 1rem;
    line-height: 1;
}

.ubicacion__valor {
    color: var(--color-text-primary, #2e2820);
    font-size: 1rem;
    line-height: 1.55;
    padding-left: 24px;  /* alineado bajo la etiqueta, no bajo el icono */
}

.ubicacion__valor a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--color-accent, #c9a96a) 50%, transparent);
}
.ubicacion__valor a:hover {
    text-decoration-color: var(--color-accent, #c9a96a);
}


/* ── PLUS CODE ─────────────────────────────────────────────────────────── */

.ubicacion__plus-code code {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-bg-alt, #faf6ec);
    border: 1px solid color-mix(in srgb, var(--color-accent, #c9a96a) 30%, transparent);
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.95rem;
    color: var(--color-marron-choc, #4a2e17);
    user-select: all;  /* facilita seleccionarlo todo de un click */
    cursor: text;
}


/* ── HORARIOS ──────────────────────────────────────────────────────────── */

.ubicacion__horarios {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ubicacion__horario {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.ubicacion__horario strong {
    color: var(--color-marron-choc, #4a2e17);
    font-size: 1.05rem;
}

.ubicacion__horario-separador {
    color: var(--color-accent, #c9a96a);
    font-weight: bold;
}


/* ── CÓMO LLEGAR (texto largo) ─────────────────────────────────────────── */

.ubicacion__como-llegar {
    margin-top: 4px;
    line-height: 1.7;
}
.ubicacion__como-llegar p {
    margin: 0 0 0.8em 0;
}
.ubicacion__como-llegar p:last-child {
    margin-bottom: 0;
}


/* ── CTA "Abrir en Google Maps" con posición configurable (bl) ─────────── */
/* Variables CSS (inyectadas inline desde ubicacion.php):
     --cta-x          posición horizontal en % (0-100). Default 30 = bajo el mapa.
     --cta-y-offset   desplazamiento vertical en px (negativo sube).
     --cta-align-movil  alineación en móvil (flex-start/center/flex-end).

   Implementación: el wrap es un contenedor 100% ancho. Dentro, un
   "alineador" se desplaza con margin-left: cta-x%, y luego se centra
   el botón sobre ese punto con translateX(-50%). Así --cta-x=0 alinea
   con el borde izquierdo, =50 centra exacto, =100 alinea con el derecho.
*/

.ubicacion__cta-wrap {
    margin-top: var(--sp-4, 20px);
    transform: translateY(var(--cta-y-offset, 0px));
    width: 100%;
    position: relative;
}

.ubicacion__cta-wrap .ubicacion__cta {
    position: relative;
    left: var(--cta-x, 30%);
    transform: translateX(-50%);
    display: inline-block;
}

/* Móvil: ignoramos cta-x; el botón se centra (o lo que diga --cta-align-movil).
   Y usamos cta-y-offset-movil en lugar de cta-y-offset (bo). */
@media (max-width: 900px) {
    .ubicacion__cta-wrap {
        display: flex;
        justify-content: var(--cta-align-movil, center);
        transform: translateY(var(--cta-y-offset-movil, 0px));
    }
    .ubicacion__cta-wrap .ubicacion__cta {
        position: static;
        left: auto;
        transform: none;
    }
}


/* ── FIX OVERFLOW (bj): el bloque ubicación NO debe forzar scroll ──────── */
/* El grid puede generar overflow horizontal en navegadores quisquillosos
   si Leaflet calcula su tile container más ancho que el contenedor padre.
   max-width:100% + min-width:0 en los hijos del grid lo previenen. */

.ubicacion__grid > * {
    min-width: 0;
    max-width: 100%;
}
.ubicacion__mapa {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}


/* ── PERSONALIZACIÓN LEAFLET para que encaje con el tema ───────────────── */

.leaflet-popup-content-wrapper {
    background: var(--color-bg, #fff);
    color: var(--color-text-primary, #2e2820);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.leaflet-popup-content {
    margin: 12px 16px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
}
.leaflet-popup-content strong {
    color: var(--color-marron-choc, #4a2e17);
}
.leaflet-popup-tip {
    background: var(--color-bg, #fff);
}
.leaflet-control-attribution {
    /* Ocultamos la atribución de Leaflet en el mapa porque ya la mostramos
       debajo del mapa con nuestro estilo. */
    display: none !important;
}


/* ════════════════════════════════════════════════════════════════════════════
 * FIX bj: prevención global de scroll horizontal sin romper sticky.
 *
 * Si cualquier bloque (Leaflet, un grid mal calculado, un iframe ancho)
 * fuerza al body a ser más ancho que el viewport, el header sticky deja
 * de funcionar bien porque queda anclado a un cuerpo más ancho que la
 * ventana, y al hacer scroll horizontal se ve "fuera de sitio".
 *
 * IMPORTANTE: NO ponemos overflow-x en `html` porque eso rompe el sticky
 * en algunos navegadores. SOLO en `body`. La combinación correcta es:
 *   - body { overflow-x: clip }  (clip no crea contexto de scroll, hidden sí)
 *   - body { position: relative }
 * Con `clip` el sticky sigue funcionando perfectamente.
 *
 * Fallback a hidden para navegadores que no soportan clip (Safari < 16).
 * ════════════════════════════════════════════════════════════════════════════ */

body {
    position: relative;
    overflow-x: hidden;       /* fallback */
    overflow-x: clip;         /* navegadores modernos: no rompe sticky */
}