/* Globalvoip (/globalvoip/) — Historia: editorial intro + timeline. Typography and colour only: no photos, icons or cards.
   Base layout (mobile, tablet, no JS): a vertical timeline with every period readable.
   globalvoip-historia.js adds .is-enhanced (states follow the scroll) and, on wide and tall enough screens, .is-horizontal:
   a pinned stage with the five periods on one thin line and a single content scene that changes at five clear thresholds. */
.gv-history,.gv-timeline{--gv-grad:linear-gradient(90deg,#0688ff,#da1fff);--gv-muted:#a5afc4}

/* ---- Intro: centred editorial pause between the Hero and "Nuestra historia"; height follows its content ------------- */
.gv-history{position:relative;padding:clamp(72px,7vw,112px) 0 clamp(48px,4vw,64px)}
.gv-history-intro{text-align:center}
.gv-history-intro .eyebrow{margin-bottom:28px;color:#fff}
.gv-history-intro h2{font-size:clamp(2.3rem,4vw,3.7rem);line-height:1.16;letter-spacing:-.045em;color:#f5f5fc}
.gv-history-intro h2 span{display:block;width:fit-content;margin-inline:auto}
.gv-history-lead{max-width:700px;margin:clamp(32px,3.2vw,44px) auto 0;color:var(--gv-muted);font-size:1rem;line-height:1.9}

/* ---- Timeline: shared ----------------------------------------------------------------------------------------------- */
.gv-timeline{position:relative;padding:24px 0 clamp(88px,9vw,130px)}
.gv-timeline-head{margin-bottom:clamp(40px,5vw,64px)}
.gv-timeline-head .eyebrow{margin-bottom:20px;color:#fff}
.gv-timeline-head h2{font-size:clamp(1.9rem,2.8vw,2.6rem);line-height:1.2;letter-spacing:-.04em;color:#f5f5fc}
.gv-timeline-rail{display:none}

/* Background: the Home hero's light-arc video (hero-movimiento.mp4, 16:9: dark upper half, arc at ~67% of the frame).
   Full width, its own aspect ratio, anchored to the bottom; the same edge mask as the "Hablemos" closings fades it in at
   the top and out at the bottom, so it never ends in a hard line. Vertical layout: the arc closes the section below the
   last period (extra bottom padding = the arc's height above the frame's bottom + breathing room). */
.gv-timeline-video{position:absolute;left:0;bottom:0;z-index:-1;display:block;width:100%;height:auto;max-width:none;aspect-ratio:16/9;object-fit:cover;opacity:.9;pointer-events:none;
  -webkit-mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.gv-timeline{padding-bottom:calc(100vw * 9 / 16 * .33 + 56px)}

/* Ambient depth: #00010E stays the base; a very faint corporate blue (a touch of fuchsia) gives the section some depth so it
   no longer reads as flat black. Vertical layout: one static layer that fades out at the top and bottom edges. */
.gv-timeline{isolation:isolate}
.gv-timeline::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 70% 30% at 18% 35%,rgba(6,136,255,.07),transparent 72%),
  radial-gradient(ellipse 60% 26% at 85% 70%,rgba(0,149,229,.05),transparent 72%),
  radial-gradient(ellipse 45% 18% at 70% 88%,rgba(218,31,255,.025),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}

.gv-timeline-periods{position:relative;list-style:none;margin:0;padding:0 0 0 44px}
.gv-timeline-index{margin-bottom:10px;color:#5d6780;font-size:.72rem;letter-spacing:.14em;font-variant-numeric:tabular-nums}
.gv-timeline-index span{color:#c3cbdb}
.gv-timeline-years{position:relative;display:flex;align-items:baseline;margin:0 0 14px;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:300;line-height:1;letter-spacing:-.05em;color:#f5f5fc}
.gv-timeline-dash{margin:0 .06em;background:var(--gv-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gv-timeline-stage-name{margin-bottom:14px;color:#00b0d1;font-size:.72rem;font-weight:500;letter-spacing:.16em;line-height:1.5}
.gv-timeline-copy h3{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.35;letter-spacing:-.03em;color:#f5f5fc}
.gv-timeline-text{max-width:680px;margin-top:14px;color:var(--gv-muted);font-size:.95rem;line-height:1.85}
.gv-timeline-closing{position:relative;max-width:640px;margin-top:24px;padding-left:18px;color:#d5ddeb;font-size:.95rem;line-height:1.75}
.gv-timeline-closing::before{content:'';position:absolute;left:0;top:.3em;bottom:.3em;width:1px;background:linear-gradient(180deg,#0688ff,#da1fff)}

/* ---- Vertical timeline (default: tablet, mobile, no JS) ------------------------------------------------------------ */
.gv-timeline-periods::before,.gv-timeline-periods::after{content:'';position:absolute;left:7px;top:6px;bottom:0;width:1px}
.gv-timeline-periods::before{background:rgba(255,255,255,.1)}
/* Progress line: full without JS; the script reveals it down to the reading line (--gv-tl-fill). */
.gv-timeline-periods::after{background:linear-gradient(180deg,#0688ff,#da1fff);clip-path:inset(0 0 calc(100% - var(--gv-tl-fill,100%)) 0)}
.gv-timeline-period{position:relative;padding-bottom:clamp(52px,8vw,76px);transition:opacity .25s ease}
.gv-timeline-period:last-child{padding-bottom:0}
.gv-timeline-years::before{content:'';position:absolute;left:-44px;top:50%;width:15px;height:15px;margin-top:-7.5px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:#00010e;transition:border-color .25s,background .25s}
.gv-timeline.is-enhanced .gv-timeline-period{opacity:.42}
.gv-timeline.is-enhanced .gv-timeline-period.is-past{opacity:.75}
.gv-timeline.is-enhanced .gv-timeline-period.is-active{opacity:1}
.gv-timeline-period.is-past .gv-timeline-years::before{border-color:#0688ff;background:#0688ff;box-shadow:inset 0 0 0 4px #00010e}
.gv-timeline-period.is-active .gv-timeline-years::before{border-color:transparent;background:linear-gradient(135deg,#0688ff,#da1fff)}

/* ---- Horizontal timeline (desktop / laptop) ------------------------------------------------------------------------ */
@media (min-width:1025px) and (min-height:720px){
  .gv-timeline.is-horizontal{--gv-tl-step:58vh;--gv-tl-stage:calc(100vh - var(--header-height,75px));height:calc(var(--gv-tl-stage) + var(--gv-tl-count,5) * var(--gv-tl-step));padding:0}
  @supports (height:100svh){.gv-timeline.is-horizontal{--gv-tl-stage:calc(100svh - var(--header-height,75px))}}
  .is-horizontal .gv-timeline-stage{position:sticky;top:var(--header-height,75px);height:var(--gv-tl-stage);overflow:hidden;isolation:isolate}
  /* Desktop: the light-arc video is the stage's background, pinned with it. The script shifts it down only when needed
     (--gv-arc-shift, short screens) so the arc always sits below the content, as in the reference. A faint cyan at the top
     keeps the upper area from reading as flat black. */
  .gv-timeline.is-horizontal::before{display:none}
  .is-horizontal .gv-timeline-video{bottom:calc(-1 * var(--gv-arc-shift,0px))}
  .is-horizontal .gv-timeline-stage::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(0,149,229,.03),transparent 70%)}
  /* Transition into "Globalvoip hoy": when the video is shifted down its own bottom fade is cut by the stage edge, which
     left a hard edge when the stage is released. The stage therefore ends by fading into #00010E (below the arc, never
     over the content). */
  .is-horizontal .gv-timeline-stage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:clamp(110px,17vh,170px);z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,1,14,0),#00010e)}
  /* Content starts at the top of the stage (no vertical centring), so "Nuestra historia" follows the intro closely. */
  .is-horizontal .gv-timeline-inner{display:flex;flex-direction:column;height:100%;padding-block:clamp(40px,6vh,64px) clamp(24px,4vh,48px)}
  .is-horizontal .gv-timeline-head{margin-bottom:clamp(28px,5vh,52px)}

  /* The five periods on one thin line: range + stage above it, a node on the line at the start of each span.
     The line fills smoothly with the scroll; the active period is lit, the others stay legible but secondary. */
  .is-horizontal .gv-timeline-rail{position:relative;display:block;margin-bottom:clamp(32px,6vh,64px)}
  .gv-timeline-track{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.12)}
  .gv-timeline-fill{position:absolute;inset:0;background:var(--gv-grad);clip-path:inset(0 calc((1 - var(--gv-tl-progress,0)) * 100%) 0 0)}
  .gv-timeline-nodes{position:relative;display:grid;grid-template-columns:repeat(var(--gv-tl-count,5),minmax(0,1fr))}
  .gv-timeline-node{position:relative;display:block;padding:0 16px 22px 0;border:0;background:none;color:#6c7894;font:inherit;text-align:left;cursor:pointer;transition:color .25s}
  .gv-timeline-node-range{display:block;font-size:.98rem;line-height:1.4;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .gv-timeline-node-stage{display:block;margin-top:5px;font-size:.66rem;font-weight:500;letter-spacing:.14em;line-height:1.5}
  .gv-timeline-dot{position:absolute;left:0;bottom:-6px;width:13px;height:13px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:#00010e;transition:border-color .25s,background .25s}
  .gv-timeline-node:hover{color:#c3cbdb}
  .gv-timeline-node:focus-visible{outline:2px solid var(--cyan,#00b0d1);outline-offset:6px;border-radius:4px}
  .gv-timeline-node.is-past{color:#8d98ae}
  .gv-timeline-node.is-past .gv-timeline-dot{border-color:#0688ff;background:#0688ff;box-shadow:inset 0 0 0 3px #00010e}
  .gv-timeline-node[aria-selected=true]{color:#fff}
  .gv-timeline-node[aria-selected=true] .gv-timeline-node-stage{color:#00b0d1}
  .gv-timeline-node[aria-selected=true] .gv-timeline-dot{border-color:transparent;background:linear-gradient(135deg,#0688ff,#da1fff)}

  /* A single scene: only the active period is displayed (never two at once). The scene fades out up 8px, the content is
     swapped, then it fades in from 8px below — about 300 ms in total (globalvoip-historia.js). */
  .is-horizontal .gv-timeline-periods{position:relative;flex:1 1 auto;min-height:0;padding:0;transition:opacity .17s cubic-bezier(.2,.7,.3,1),transform .17s cubic-bezier(.2,.7,.3,1)}
  .is-horizontal .gv-timeline-periods.is-out{opacity:0;transform:translateY(-8px);transition-duration:.13s;transition-timing-function:cubic-bezier(.4,0,1,1)}
  .is-horizontal .gv-timeline-periods.is-in{opacity:0;transform:translateY(8px);transition:none}
  .is-horizontal .gv-timeline-periods::before,.is-horizontal .gv-timeline-periods::after,.is-horizontal .gv-timeline-years::before{display:none}
  .is-horizontal .gv-timeline-period{display:none;opacity:1;padding:0;transition:none}
  .is-horizontal .gv-timeline-period.is-active{position:static;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,4vw,72px);align-items:start}
  .is-horizontal .gv-timeline-meta{padding-top:.35rem}
  .is-horizontal .gv-timeline-years{margin:0 0 12px;font-size:clamp(1.9rem,2.6vw,2.5rem);letter-spacing:-.035em}
  .is-horizontal .gv-timeline-copy h3{max-width:820px;font-size:clamp(1.8rem,2.6vw,2.55rem);line-height:1.22;letter-spacing:-.04em}
  .is-horizontal .gv-timeline-text{max-width:700px;margin-top:20px;font-size:1.02rem}
}

@media (max-width:900px){
  .gv-history-lead{max-width:600px;margin-top:28px}
}
@media (max-width:700px){
  .gv-history-intro .eyebrow{margin-bottom:20px}
  .gv-history-intro h2{font-size:clamp(1.9rem,8vw,2.4rem);line-height:1.18;letter-spacing:-.04em}
  .gv-history-lead{margin-top:22px;font-size:.95rem}
  .gv-timeline-head h2{font-size:clamp(1.6rem,7vw,2rem)}
  .gv-timeline-periods{padding-left:38px}
  .gv-timeline-years::before{left:-38px}
  .gv-timeline-copy h3{font-size:1.2rem}
  .gv-timeline-text,.gv-timeline-closing{font-size:.92rem}
}
/* Reduced motion: the period still changes at each threshold, instantly; the video rests on a still frame (script). */
@media (prefers-reduced-motion:reduce){
  .gv-timeline-period,.gv-timeline-years::before,.gv-timeline-node,.gv-timeline-dot,
  .is-horizontal .gv-timeline-periods,.is-horizontal .gv-timeline-periods.is-out{transition:none!important}
  .is-horizontal .gv-timeline-periods.is-out{opacity:1;transform:none}
}