/* Home — branch boxes with an address popover (docs/render-home-sucursales.cjs + home-sucursales.js).
   The boxes keep their existing look (compact-sections.css / refinements.css); as <button>s they only need the native
   button styles neutralised and a focus state. The popover is a discreet dark liquid glass, the same family as the
   header and the map's location card; it floats over the page (fixed, placed by JS), so nothing around it moves. */
.about .locations button.location{margin:0;font:inherit;font-size:.8125rem;line-height:1.5;color:#e1eaf7;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s ease}
.about .locations button.location:hover,.about .locations button.location[aria-expanded=true]{border-color:rgba(0,176,209,.5)}
.about .locations button.location:focus-visible{outline:2px solid #00b0d1;outline-offset:3px}

.branch-pops[hidden],.branch-pop[hidden]{display:none}
/* One permanent, transparent layer over the viewport holds the popovers. Opening one only repaints inside this layer, so
   Chrome's layer tree never changes. A popover that appeared as a new layer over the animated partner logos (the boxes of
   the second row reach them) made Chrome re-layer the blurred certification chips, and they flickered. */
.branch-pops{position:fixed;inset:0;z-index:60;pointer-events:none;will-change:transform;overflow:hidden}
.branch-pop{position:absolute;left:0;top:0;pointer-events:auto;box-sizing:border-box;width:max-content;max-width:min(300px,calc(100vw - 24px));padding:14px 16px 15px;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  /* No backdrop-filter: the section already has blurred boxes and chips over the playing background video; one more
     blurred layer adds work for Chrome every video frame. The glass look comes from a near-opaque navy, a soft sheen, a
     fine border and the inner highlight instead. */
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.015) 55%),rgba(6,13,32,.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,1,14,.55);
  color:#f5f5fc;opacity:0;transition:opacity .16s ease}
.branch-pop.is-open{opacity:1}
.branch-pop.is-fuchsia{border-color:rgba(205,2,152,.3)}
.branch-pop p{margin:0}
.branch-pop-type{margin-bottom:6px!important;color:#00b0d1;font-size:.625rem;font-weight:500;letter-spacing:.16em;line-height:1.5}
.branch-pop-name{font-size:.95rem;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.branch-pop-region{margin-top:2px!important;color:#a5afc4;font-size:.75rem;line-height:1.5}
.branch-pop-address{margin-top:10px!important;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);color:#c9d2e2;font-size:.78rem;line-height:1.6}
@media (prefers-reduced-motion:reduce){
  .branch-pop,.about .locations button.location{transition:none}
}