/* Globalvoip (/globalvoip/) — Cobertura. The inline SVG map of Mexico (Simplemaps, rendered by docs/render-globalvoip.cjs)
   is the protagonist: dark states, faint cyan borders, soft blue light. Locations are HTML buttons placed with
   percentages of the SVG viewBox, so they stay on their spot at any size. Colours: #0095E5, #00B0D1, #CD0298 (accent),
   base #00010E. Layout: desktop copy (≈38%) + map (≈62%); below 960px head → map → selector → location card. */
.gv-coverage{position:relative;isolation:isolate;padding:clamp(64px,7vw,110px) 0 clamp(96px,10vw,150px)}
/* Ambient light: starts inside the end of "Globalvoip hoy" (fully transparent there) and settles around the map, which
   becomes the section's main light source; fades out before the footer. No edge between the two sections. */
.gv-coverage::before{content:'';position:absolute;left:0;right:0;top:calc(-1 * clamp(200px,26vh,320px));bottom:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 48% 52% at 68% 56%,rgba(0,149,229,.13),transparent 72%),
  radial-gradient(ellipse 36% 40% at 82% 38%,rgba(0,176,209,.075),transparent 70%),
  radial-gradient(ellipse 42% 40% at 18% 72%,rgba(205,2,152,.035),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 16%,#000 38%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 16%,#000 38%,#000 80%,transparent 100%)}

.gv-coverage-grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);grid-template-areas:"head map" "selector map";grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px);align-items:start}
.gv-coverage-head{grid-area:head;align-self:end}
.gv-coverage-head .eyebrow{margin-bottom:24px;color:#fff}
.gv-coverage-head h2{font-size:clamp(2rem,3vw,2.8rem);line-height:1.18;letter-spacing:-.045em;color:#f5f5fc}
.gv-coverage-lead{max-width:470px;margin-top:26px;color:#a5afc4;font-size:1rem;line-height:1.9}

/* ---- Map ------------------------------------------------------------------------------------------------------------ */
/* The aspect ratio comes from the extended viewBox (inline style set by the renderer). */
.gv-coverage-map{grid-area:map;position:relative;align-self:center;width:100%;aspect-ratio:1000/774}
.gv-map-svg{display:block;width:100%;height:100%;overflow:hidden}
.gv-map-states{filter:drop-shadow(0 0 22px rgba(0,149,229,.2))}
.gv-map-state{fill:#07142a;stroke:rgba(0,176,209,.3);stroke-width:.7;vector-effect:non-scaling-stroke;transition:fill .35s ease,stroke .35s ease}
.gv-map-state.has-presence{fill:#0a1f3d}
.gv-map-state.is-active-state{fill:#0d2a50}
/* Secondary geography (U.S.): darker and quieter than Mexico, drawn underneath it, so the international border reads as the
   edge of the brighter Mexican territory; the layer fades out at the top of the frame (SVG mask). */
.gv-map-state.gv-map-us{fill:#040b19;stroke:rgba(0,176,209,.13);stroke-width:.6}
/* Arizona: coverage in fuchsia. */
.gv-map-state.is-fuchsia{fill:rgba(205,2,152,.16);stroke:rgba(205,2,152,.55)}
.gv-map-state.is-fuchsia.is-active-state{fill:rgba(205,2,152,.26);stroke:rgba(205,2,152,.8)}
.gv-map-points{position:absolute;inset:0}

/* A location: a 36px touch target with a small dot inside; the name appears on hover/focus. */
.gv-map-point{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transform:translate(-50%,-50%)}
.gv-map-dot{position:relative;width:9px;height:9px;border-radius:50%;background:#00b0d1;box-shadow:0 0 0 3px rgba(0,176,209,.16);transition:background .2s,box-shadow .2s,transform .2s}
.gv-map-point.is-matriz .gv-map-dot{width:11px;height:11px}
.gv-map-point:hover .gv-map-dot,.gv-map-point:focus-visible .gv-map-dot{transform:scale(1.25);box-shadow:0 0 0 4px rgba(0,176,209,.26)}
.gv-map-point:focus-visible{outline:2px solid #00b0d1;outline-offset:1px}
/* Selected: white core, blue ring and a slow, faint ring that expands — the only continuous motion in the section. */
.gv-map-point[aria-pressed=true] .gv-map-dot{background:#fff;box-shadow:0 0 0 3px #0095e5,0 0 14px rgba(0,149,229,.55)}
.gv-map-point[aria-pressed=true]::before{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid rgba(0,176,209,.55);border-radius:50%;animation:gv-map-pulse 2.8s ease-out infinite;pointer-events:none}
@keyframes gv-map-pulse{from{transform:scale(1);opacity:.75}to{transform:scale(3.2);opacity:0}}
/* Fuchsia locations (Arizona). */
.gv-map-point.is-fuchsia .gv-map-dot{background:#cd0298;box-shadow:0 0 0 3px rgba(205,2,152,.2)}
.gv-map-point.is-fuchsia:hover .gv-map-dot,.gv-map-point.is-fuchsia:focus-visible .gv-map-dot{box-shadow:0 0 0 4px rgba(205,2,152,.3)}
.gv-map-point.is-fuchsia[aria-pressed=true] .gv-map-dot{background:#fff;box-shadow:0 0 0 3px #cd0298,0 0 14px rgba(205,2,152,.55)}
.gv-map-point.is-fuchsia[aria-pressed=true]::before{border-color:rgba(205,2,152,.6)}
.gv-map-point.is-fuchsia:focus-visible{outline-color:#cd0298}
.gv-map-label{position:absolute;left:calc(50% + 12px);top:50%;padding:3px 9px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(0,1,14,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:.72rem;line-height:1.5;white-space:nowrap;opacity:0;transform:translate(-4px,-50%);transition:opacity .18s,transform .18s;pointer-events:none}
.gv-map-point:hover .gv-map-label,.gv-map-point:focus-visible .gv-map-label{opacity:1;transform:translate(0,-50%)}

/* ---- Selector (synchronised with the map) --------------------------------------------------------------------------- */
.gv-coverage-selector{grid-area:selector;display:flex;flex-wrap:wrap;gap:6px clamp(12px,1vw,18px);margin-top:clamp(32px,4vw,48px)}
.gv-coverage-option{position:relative;padding:8px 0 10px;border:0;background:none;color:#8d98ae;font:inherit;font-size:.88rem;line-height:1.4;white-space:nowrap;cursor:pointer;transition:color .2s}
.gv-coverage-option::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,#0095e5,#00b0d1);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.gv-coverage-option:hover{color:#d5ddeb}
.gv-coverage-option[aria-pressed=true]{color:#fff;font-weight:500}
.gv-coverage-option[aria-pressed=true]::after{transform:scaleX(1)}
.gv-coverage-option.is-fuchsia::after{background:#cd0298}
.gv-coverage-option:focus-visible{outline:2px solid #00b0d1;outline-offset:4px;border-radius:4px}

/* ---- Location card: a light glass layer on the map (desktop: over the empty area at the top right) -------------------- */
.gv-coverage-card{grid-area:map;position:relative;z-index:2;align-self:start;justify-self:end;width:min(250px,36%);margin-top:3%}
.gv-location{padding:18px 20px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),rgba(3,8,20,.45);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:opacity .22s ease,transform .22s ease}
.gv-location.is-fuchsia{border-color:rgba(205,2,152,.28)}
.gv-location.is-entering{opacity:0;transform:translateY(6px);transition:none}
.gv-location-type{margin-bottom:8px;color:#00b0d1;font-size:.66rem;font-weight:500;letter-spacing:.16em;line-height:1.5}
.gv-location-city{font-size:1.3rem;line-height:1.25;letter-spacing:-.025em;color:#f5f5fc}
.gv-location-state{margin-top:4px;color:#a5afc4;font-size:.88rem;line-height:1.5}
.gv-location-address{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);color:#c3cbdb;font-size:.85rem;line-height:1.6}

/* ---- Entrance (only when the script opts in; reduced motion never hides anything) ------------------------------------ */
.gv-coverage.is-ready :is(.gv-coverage-head,.gv-coverage-map,.gv-coverage-selector,.gv-coverage-card){opacity:0;transform:translateY(14px)}
.gv-coverage.is-ready .gv-map-point{opacity:0}
.gv-coverage.is-visible :is(.gv-coverage-head,.gv-coverage-map,.gv-coverage-selector,.gv-coverage-card){opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.gv-coverage.is-visible .gv-coverage-map{transition-delay:.1s}
.gv-coverage.is-visible .gv-coverage-selector{transition-delay:.2s}
.gv-coverage.is-visible .gv-coverage-card{transition-delay:.3s}
.gv-coverage.is-visible .gv-map-point{opacity:1;transition:opacity .35s ease calc(.4s + var(--i,0) * 70ms)}

/* ---- Tablet / mobile: head → map → selector → card ------------------------------------------------------------------- */
@media (max-width:959px){
  .gv-coverage-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "selector" "card";grid-template-rows:none}
  .gv-coverage-lead{max-width:600px}
  .gv-coverage-map{margin-top:clamp(28px,5vw,44px)}
  .gv-coverage-selector{margin-top:clamp(20px,4vw,32px)}
  .gv-coverage-card{grid-area:card;justify-self:stretch;width:auto;max-width:420px;margin-top:16px}
}
@media (max-width:700px){
  .gv-coverage-head h2{font-size:clamp(1.8rem,7.4vw,2.3rem);letter-spacing:-.04em}
  .gv-coverage-lead{font-size:.95rem}
  /* Controlled horizontal scroll inside the selector only (never the page). */
  .gv-coverage-selector{flex-wrap:nowrap;gap:22px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .gv-coverage-selector::-webkit-scrollbar{display:none}
  .gv-coverage-option{scroll-snap-align:start}
  .gv-map-point{width:40px;height:40px}
  .gv-map-states{filter:drop-shadow(0 0 14px rgba(0,149,229,.2))}
}
@media (prefers-reduced-motion:reduce){
  .gv-map-point[aria-pressed=true]::before{animation:none;transform:scale(2);opacity:.35}
  .gv-map-state,.gv-map-dot,.gv-map-label,.gv-coverage-option,.gv-coverage-option::after,.gv-location{transition:none}
}