/* Globalvoip (/globalvoip/) — Alianzas estratégicas. Header, a carousel of official partner logos on discreet glass cards
   (the central one is the protagonist, the side ones step back in scale and opacity — no 3D rotation), and a selector
   with the four official solutions. Layout and motion are driven by globalvoip-alianzas.js (positions in --x/--s/--o);
   without JS the cards simply wrap in a grid. Colours: #0095E5, #00B0D1, #CD0298 on #00010E. */
.gv-allies{position:relative;isolation:isolate;padding:clamp(72px,8vw,120px) 0 clamp(36px,4vw,60px)} /* short bottom: the closing CTA follows closely */
/* Ambient light concentrated behind the carousel; it starts transparent inside the end of Certificaciones (no edge) and
   fades out before the footer. */
.gv-allies::before{content:'';position:absolute;left:0;right:0;top:calc(-1 * clamp(180px,24vh,300px));bottom:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 42% 30% at 50% 60%,rgba(0,149,229,.16),transparent 72%),
  radial-gradient(ellipse 30% 30% at 14% 56%,rgba(0,176,209,.08),transparent 72%),
  radial-gradient(ellipse 30% 32% at 88% 62%,rgba(205,2,152,.09),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 14%,#000 30%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 14%,#000 30%,#000 84%,transparent 100%)}

.gv-allies-head .eyebrow{margin-bottom:24px;color:#fff}
.gv-allies-head h2{font-size:clamp(2.2rem,3.8vw,3.5rem);line-height:1.15;letter-spacing:-.045em;color:#f5f5fc}
.gv-allies-head h2 span{display:block;width:fit-content}
.gv-allies-lead{max-width:590px;margin-top:24px;color:#a5afc4;font-size:1rem;line-height:1.75}

/* ---- Carousel ------------------------------------------------------------------------------------------------------ */
.gv-allies-carousel{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prev stage next" "status status status";align-items:center;column-gap:clamp(8px,1.5vw,20px);width:min(1400px,100% - 2 * clamp(16px,3vw,48px));margin:clamp(40px,5vw,64px) auto 0;overflow-x:clip}
.gv-allies-stage{grid-area:stage;position:relative;height:var(--gv-stage-h,260px);outline:none;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.gv-allies-stage:focus-visible{outline:1px solid rgba(0,176,209,.5);outline-offset:6px;border-radius:12px}
.gv-allies.is-dragging .gv-allies-stage{cursor:grabbing}
/* Soft light under the active card. */
.gv-allies-stage::after{content:'';position:absolute;left:50%;bottom:4%;width:min(520px,70%);height:42%;transform:translateX(-50%);z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(0,149,229,.22),transparent 70%)}
.gv-allies-track{position:absolute;inset:0;margin:0;padding:0;list-style:none}

.gv-ally{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--gv-card-w,240px);aspect-ratio:1.22/1;border:1px solid rgba(255,255,255,.11);border-radius:18px;
  background:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.015) 46%,rgba(255,255,255,.035)),rgba(9,19,40,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,1,14,.5);
  transform:translate(-50%,-50%) translateX(calc(var(--x,0px) + var(--gv-drag,0px))) scale(var(--s,1));opacity:var(--o,1);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease,border-color .3s ease,box-shadow .3s ease;cursor:pointer}
.gv-ally[hidden]{display:none}   /* partners of other solutions (the card's display:grid would override [hidden]) */
.gv-ally.is-hidden{visibility:hidden;pointer-events:none}
.gv-ally.is-jump,.gv-allies.is-dragging .gv-ally,.gv-allies.is-instant .gv-ally{transition:none}
.gv-ally img{display:block;width:var(--lw,50%);height:auto;max-height:46%;object-fit:contain;pointer-events:none}
/* Active card: a fine blue → fuchsia edge and a little light. */
.gv-ally::before{content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;background:linear-gradient(135deg,#0095e5,#00b0d1 45%,#cd0298);opacity:0;transition:opacity .3s ease;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.gv-ally.is-active{border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 54px rgba(0,1,14,.55),0 0 46px rgba(0,149,229,.2)}
.gv-ally.is-active::before{opacity:1}

/* position + z-index: the arrows stay above the cards. A card entering or leaving slides beyond the stage edge, over
   the arrow; without this it caught the click meant for the arrow (and started a drag that the release never ended). */
.gv-allies-arrow{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(0,1,14,.4);color:#fff;cursor:pointer;transition:border-color .2s,background .2s}
.gv-allies-arrow--prev{grid-area:prev}
.gv-allies-arrow--next{grid-area:next}
.gv-allies-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gv-allies-arrow:hover{border-color:rgba(0,176,209,.6);background:rgba(0,149,229,.12)}
.gv-allies-arrow:focus-visible{outline:2px solid #00b0d1;outline-offset:3px}

/* Small, discreet progress: a thin bar with the active position and a counter. */
.gv-allies-status{grid-area:status;display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(18px,2.4vw,28px) 0 0;color:#7c879f;font-size:.78rem;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.gv-allies-progress{position:relative;width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.gv-allies-progress span{position:absolute;left:0;top:0;bottom:0;width:var(--gv-seg,20%);border-radius:2px;background:linear-gradient(90deg,#0095e5,#00b0d1);transform:translateX(calc(var(--gv-pos,0) * 100%));transition:transform .4s cubic-bezier(.22,.61,.36,1),width .3s ease}

/* Category change: a quick fade of the carousel only (its height never changes). */
.gv-allies-stage,.gv-allies-status{transition:opacity .18s ease,transform .18s ease}
.gv-allies.is-switching :is(.gv-allies-stage,.gv-allies-status){opacity:0;transform:translateY(6px)}

/* ---- Solution selector ----------------------------------------------------------------------------------------------- */
.gv-allies-tabs{display:flex;justify-content:center;gap:4px clamp(18px,3vw,44px);margin-top:clamp(36px,4.4vw,56px);padding-top:clamp(18px,2vw,24px);border-top:1px solid rgba(255,255,255,.08)}
.gv-allies-tab{position:relative;padding:10px 0 12px;border:0;background:none;color:#8d98ae;font:inherit;font-size:.95rem;line-height:1.4;white-space:nowrap;cursor:pointer;transition:color .2s}
.gv-allies-tab::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#0095e5,#cd0298);transform:scaleX(0);transition:transform .25s ease}
.gv-allies-tab:hover{color:#d5ddeb}
.gv-allies-tab[aria-pressed=true]{color:#fff;font-weight:500}
.gv-allies-tab[aria-pressed=true]::after{transform:scaleX(1)}
.gv-allies-tab:focus-visible{outline:2px solid #00b0d1;outline-offset:4px;border-radius:4px}

/* ---- Without JS: a plain wrapped grid ------------------------------------------------------------------------------- */
.gv-allies:not(.is-ready) .gv-allies-stage{height:auto;cursor:default}
.gv-allies:not(.is-ready) .gv-allies-track{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.gv-allies:not(.is-ready) .gv-ally{position:relative;left:auto;top:auto;width:180px;transform:none}
.gv-allies:not(.is-ready) :is(.gv-allies-arrow,.gv-allies-status,.gv-allies-tabs){display:none}

/* ---- Tablet and below: the four solution names scroll horizontally inside the selector (never the page) -------------- */
@media (max-width:960px){
  .gv-allies-tabs{justify-content:flex-start;gap:24px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .gv-allies-tabs::-webkit-scrollbar{display:none}
  .gv-allies-tab{scroll-snap-align:start}
}
/* ---- Mobile: arrows next to the counter ------------------------------------------------------------------------------ */
@media (max-width:700px){
  .gv-allies-head h2{font-size:clamp(1.9rem,8vw,2.4rem);letter-spacing:-.04em}
  .gv-allies-lead{font-size:.95rem}
  .gv-allies-carousel{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"stage stage stage" "prev status next";width:100%;row-gap:18px}
  .gv-allies-stage{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
  .gv-allies-status{margin:0}
  .gv-allies-arrow{width:44px;height:44px}
  .gv-allies-arrow--prev{justify-self:start;margin-left:20px}
  .gv-allies-arrow--next{justify-self:end;margin-right:20px}
  .gv-allies-tab{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .gv-ally,.gv-ally::before,.gv-allies-progress span,.gv-allies-stage,.gv-allies-status,.gv-allies-tab::after{transition:none}
}
