/* Globalvoip (/globalvoip/) — Certificaciones y metodologías, following the approved mockup: a wide header and one
   numbered editorial grid set directly on the background, with very faint vertical dividers. No cards, icons or arrows.
   The ISO certifications take the leading positions (first row and the start of the second) with a slightly larger,
   brighter type; NMX-025, ITIL® and PMI® complete the same grid. While the pointer is over an item it becomes the
   protagonist and the rest step back; nothing stays selected (CSS only, see "Highlight" below). */
.gv-certs{position:relative;isolation:isolate;padding:clamp(72px,8vw,120px) 0 clamp(96px,10vw,150px);--gv-cert-pad:clamp(20px,2.4vw,36px)}
/* Atmosphere: #00010E with soft blue/cyan light from the left corners and diffuse fuchsia on the right, centre kept clean.
   It starts transparent inside the end of Cobertura (no edge between sections) and fades out before the footer. */
.gv-certs::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 34% 40% at 0% 26%,rgba(0,149,229,.16),transparent 72%),
  radial-gradient(ellipse 30% 36% at 2% 100%,rgba(0,149,229,.13),transparent 72%),
  radial-gradient(ellipse 30% 34% at 100% 22%,rgba(0,149,229,.08),transparent 70%),
  radial-gradient(ellipse 26% 32% at 98% 30%,rgba(205,2,152,.08),transparent 70%),
  radial-gradient(ellipse 26% 30% at 100% 100%,rgba(205,2,152,.1),transparent 70%);
  -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-certs-head .eyebrow{margin-bottom:24px;color:#fff}
.gv-certs-head h2{font-size:clamp(2.2rem,3.8vw,3.5rem);line-height:1.15;letter-spacing:-.045em;color:#f5f5fc}
.gv-certs-head h2 span{display:block;width:fit-content}
.gv-certs-lead{max-width:540px;margin-top:24px;color:#a5afc4;font-size:1rem;line-height:1.75}

/* ---- Grid --------------------------------------------------------------------------------------------------------- */
/* The list is widened by the item padding on both sides so the first column lines up with the header text. */
.gv-certs-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:clamp(44px,5vw,72px);margin:clamp(40px,4.4vw,64px) calc(-1 * var(--gv-cert-pad)) 0;padding:0;list-style:none}
.gv-cert-cell{position:relative;display:flex}
/* Hairline vertical dividers between columns, fading at both ends. */
.gv-cert-cell::before{content:'';position:absolute;left:0;top:4%;bottom:4%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12) 20%,rgba(255,255,255,.12) 80%,transparent)}
.gv-cert-cell:nth-child(4n+1)::before{display:none}

.gv-cert{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:4px var(--gv-cert-pad);color:inherit;text-align:left;transition:opacity .25s ease}
/* Active accent: a short vertical gradient line on the divider. */
.gv-cert::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:linear-gradient(180deg,#0095e5,#cd0298);opacity:0;transform:scaleY(.4);transition:opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.gv-cert-index{margin-bottom:10px;color:#7c879f;font-size:.8rem;letter-spacing:.08em;line-height:1.4;font-variant-numeric:tabular-nums;transition:color .25s ease}
/* Names never break (ISO 20000-1 stays on one line); the ISO size is capped so it fits the column at every width. */
.gv-cert-name{display:block;width:fit-content;white-space:nowrap;font-weight:500;line-height:1.1;letter-spacing:-.03em;background:linear-gradient(90deg,#0095e5,#cd0298);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:currentColor;transition:color .25s ease}
.gv-cert--iso .gv-cert-name{color:#eef1f8;font-size:clamp(1.85rem,2.75vw,2.6rem)}
.gv-cert--standard .gv-cert-name{color:#b3bccd;font-size:clamp(1.6rem,2.3vw,2.3rem)}
.gv-cert-descriptor{max-width:230px;margin-top:10px;color:#8d98ae;font-size:.95rem;line-height:1.45;transition:color .25s ease}
.gv-cert--standard .gv-cert-descriptor{color:#7c879f}
.gv-cert-description{max-width:300px;margin-top:14px;color:#a5afc4;font-size:.86rem;line-height:1.65}

/* Highlight: a temporary effect that follows the pointer only — the hovered item gets the gradient accent and the others
   step back; leaving the item or the grid restores everything. Clicking does nothing (the items are not controls, no
   script, no stored state). Only on devices with a real hover (mouse / trackpad): on touch screens every item keeps
   its normal look and a tap never leaves one highlighted. */
@media (hover:hover) and (pointer:fine){
  .gv-cert:hover::after{opacity:1;transform:none}
  .gv-cert:hover .gv-cert-index{color:#00b0d1}
  .gv-cert:hover .gv-cert-name{-webkit-text-fill-color:transparent}
  .gv-cert:hover .gv-cert-descriptor{color:#fff}
  .gv-certs-list:has(.gv-cert:hover) .gv-cert:not(:hover){opacity:.5}
}

/* ---- Responsive ------------------------------------------------------------------------------------------------------ */
@media (max-width:900px){
  .gv-certs-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gv-cert-cell:nth-child(4n+1)::before{display:block}
  .gv-cert-cell:nth-child(2n+1)::before{display:none}
}
@media (max-width:700px){
  .gv-certs{--gv-cert-pad:18px}
  .gv-certs-head h2{font-size:clamp(1.9rem,8vw,2.4rem);letter-spacing:-.04em}
  .gv-certs-lead{font-size:.95rem}
  .gv-certs-list{row-gap:40px}
}
/* Narrow phones: one column; the dividers become horizontal hairlines between items. */
@media (max-width:480px){
  .gv-certs-list{grid-template-columns:minmax(0,1fr);row-gap:0}
  .gv-cert-cell::before,.gv-cert-cell:nth-child(n)::before{display:block;left:var(--gv-cert-pad);right:var(--gv-cert-pad);top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
  .gv-cert-cell:first-child::before{display:none}
  .gv-cert{padding-block:24px}
  .gv-cert::after{top:24px;bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  .gv-cert,.gv-cert::after,.gv-cert-index,.gv-cert-name,.gv-cert-descriptor{transition:none}
}