/* =========================================================================
   gss-vs — Comparativa de competidores (head-to-head)  ·  GlobalSuite Solutions
   Marker: .gss-vs   ·   assets/css/components/gss-vs.css
   Reutilizable para GlobalSuite vs Archer / Pirani / Risk4all / etc.
   Poppins se carga globalmente (handle gss-poppins) — aquí NO se importa.
   ========================================================================= */

.gss-vs{
  /* --- tokens de marca autocontenidos --- */
  --neon:#5078ff; --neon-600:#4166e6; --neon-700:#3655c4; --neon-100:#eaeefc; --neon-50:#f4f6ff;
  --aqua:#00ffd7; --aqua-600:#00e6c2; --sky:#50dcff;
  --ink:#041438; --ink-950:#020a22; --ink-700:#3a4758; --ink-500:#787882; --ink-400:#9aa0ad;
  --ink-300:#c4cad4; --ink-200:#dfe3ea; --ink-100:#eef1f6; --ink-50:#f7f8fb; --white:#fff;
  --ok:#12b981; --partial:#c47f10; --no:#c4cad4;
  --grad-hero:linear-gradient(135deg,#041438 0%,#0a1f4d 46%,#123a86 100%);
  --grad-side:linear-gradient(135deg,#5078ff 0%,#4d84ff 58%,#37b0d8 100%);
  --shadow-md:0 6px 16px rgba(4,20,56,.08),0 2px 4px rgba(4,20,56,.04);
  --shadow-lg:0 16px 40px rgba(4,20,56,.12),0 4px 10px rgba(4,20,56,.06);
  --shadow-glow:0 12px 40px rgba(80,120,255,.28);
  --maxw:1180px;
  /* Ajusta si la cabecera del sitio es sticky: alto del header en px */
  --vs-navtop:0px;
  --ck-aqua:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300b596' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ck-neon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235078ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ck-bright:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ffd7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  line-height:1.55;
  /* Sin `contain` en el root: rompería el position:sticky del subnav
     (contain crea contexto de recorte y el sticky deja de fijarse).
     La página es ligera (solo texto, sin media pesada), así que la
     contención de layout no aporta apenas y sí quitaría el sticky. */
}
.gss-vs *,.gss-vs *::before,.gss-vs *::after{box-sizing:border-box}
.gss-vs h1,.gss-vs h2,.gss-vs h3,.gss-vs h4{margin:0;line-height:1.1;letter-spacing:-.015em;text-wrap:balance;color:var(--ink)}
.gss-vs p{margin:0;text-wrap:pretty}
.gss-vs a{color:var(--neon);text-decoration:none;transition:color .14s}
.gss-vs a:hover{color:var(--neon-600)}
.gss-vs :focus-visible{outline:3px solid var(--neon);outline-offset:2px;border-radius:4px}
.gss-vs img{max-width:100%}

.gss-vs .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.gss-vs .section{padding:88px 0}
.gss-vs .bg-soft{background:linear-gradient(180deg,#fff 0%,var(--ink-50) 100%)}
.gss-vs .bg-muted{background:var(--ink-50)}

.gss-vs .eyebrow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--neon);margin:0 0 14px}
.gss-vs .eyebrow--light{color:var(--aqua)}
.gss-vs .h-sec{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.02em}
.gss-vs .lead{font-size:clamp(17px,1.6vw,19px);line-height:1.6;color:var(--ink-700);font-weight:400}

/* checkmark list markers */
.gss-vs .ck{list-style:none;padding-left:32px;background-repeat:no-repeat;background-position:0 4px;background-size:19px 19px}
.gss-vs .ck.aqua{background-image:var(--ck-aqua)}
.gss-vs .ck.neon{background-image:var(--ck-neon)}
.gss-vs .ck.bright{background-image:var(--ck-bright)}

/* ---------- HERO ---------- */
.gss-vs .hero{background:var(--grad-hero);color:#fff;position:relative;overflow:hidden;padding:66px 0 96px}
.gss-vs .hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(560px 340px at 88% 12%,rgba(0,255,215,.16),transparent 70%),
  radial-gradient(620px 420px at 6% 96%,rgba(80,220,255,.13),transparent 70%);pointer-events:none}
.gss-vs .hero .wrap{position:relative;z-index:1}
.gss-vs .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.gss-vs .hero h1{color:#fff;font-size:clamp(38px,5.6vw,66px);font-weight:800;letter-spacing:-.03em;line-height:1.02}
.gss-vs .hero h1 .vs{color:var(--aqua);font-weight:500}
.gss-vs .hero-sub{margin:22px 0 0;max-width:520px;font-size:clamp(17px,1.7vw,19px);line-height:1.55;color:rgba(255,255,255,.82);font-weight:300}
.gss-vs .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.gss-vs .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 30px;border-radius:999px;font-weight:600;font-size:15.5px;letter-spacing:.01em;cursor:pointer;border:1px solid transparent;transition:transform .16s,box-shadow .2s,background .2s;white-space:nowrap}
.gss-vs .btn-primary{background:var(--aqua);color:var(--ink);box-shadow:0 8px 30px rgba(0,255,215,.32)}
.gss-vs .btn-primary:hover{transform:translateY(-2px);color:var(--ink);box-shadow:0 14px 40px rgba(0,255,215,.42)}
.gss-vs .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.gss-vs .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.gss-vs .btn-neon{background:var(--neon);color:#fff;box-shadow:var(--shadow-glow)}
.gss-vs .btn-neon:hover{transform:translateY(-2px);background:var(--neon-600);color:#fff}

/* hero scorecard (the "vs" visual) */
.gss-vs .scorecard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:10px;backdrop-filter:blur(6px);box-shadow:0 24px 60px rgba(2,10,34,.4)}
.gss-vs .sc-row{padding:22px 24px;border-radius:16px;display:flex;flex-direction:column;gap:8px}
.gss-vs .sc-row.you{background:rgba(0,255,215,.08)}
.gss-vs .sc-top{display:flex;align-items:center;gap:10px}
.gss-vs .sc-top .sc-name{color:#fff;font-size:19px;font-weight:700}
.gss-vs .sc-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--aqua);color:var(--ink);padding:3px 9px;border-radius:999px}
.gss-vs .sc-row p{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.5}
.gss-vs .sc-div{display:flex;align-items:center;justify-content:center;padding:6px 0;font-size:11px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.4)}

/* ---------- SUBNAV ---------- */
.gss-vs .subnav{position:sticky;top:var(--vs-navtop);z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-100)}
.gss-vs .subnav .wrap{display:flex;justify-content:center;gap:4px;overflow-x:auto;padding:0 24px}
.gss-vs .subnav a{color:var(--ink-700);font-size:14px;font-weight:500;padding:16px 14px;white-space:nowrap;border-bottom:2px solid transparent}
.gss-vs .subnav a:hover{color:var(--neon)}

/* ---------- VERDICT (panel bicolor cara a cara) ---------- */
.gss-vs .vd-head{max-width:880px}
.gss-vs .vd-head .eyebrow{margin-bottom:12px}
.gss-vs .vd-head h2{font-size:clamp(24px,3vw,34px);font-weight:800}
.gss-vs .vd-head p{margin-top:16px;color:var(--ink-700);font-size:16.5px;line-height:1.64}
.gss-vs .vd-head strong{color:var(--ink);font-weight:600}
.gss-vs .vd-panel{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);margin-top:40px}
.gss-vs .vd-side{position:relative;padding:40px 40px 44px}
.gss-vs .vd-side.gss{background:radial-gradient(460px 260px at 90% -5%,rgba(0,255,215,.16),transparent 70%),var(--grad-side);color:#fff}
.gss-vs .vd-side.arc{background:var(--ink-50)}
.gss-vs .vd-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.gss-vs .vd-top h3{font-size:21px;font-weight:800}
.gss-vs .vd-side.gss .vd-top h3{color:#fff}
.gss-vs .vd-tag{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--aqua);color:var(--ink);padding:3px 9px;border-radius:999px}
.gss-vs .vd-sub{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:22px}
.gss-vs .vd-side.gss .vd-sub{color:var(--aqua)}
.gss-vs .vd-side.arc .vd-sub{color:var(--ink-500)}
.gss-vs .vd-side ul{margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.gss-vs .vd-side li{font-size:14.5px;line-height:1.45}
.gss-vs .vd-side.gss li{color:rgba(255,255,255,.92)}
.gss-vs .vd-side.arc li{color:var(--ink-700)}
.gss-vs .vd-vs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.04em;box-shadow:0 8px 24px rgba(4,20,56,.2);z-index:2}

/* ---------- WHAT IS ---------- */
.gss-vs .whatis{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.gss-vs .wcard{border:1px solid var(--ink-200);border-radius:20px;padding:34px;background:#fff}
.gss-vs .wcard.gss{border-color:var(--neon);background:linear-gradient(160deg,var(--neon-50),#fff)}
.gss-vs .wcard h3{font-size:22px;font-weight:800;margin-bottom:6px}
.gss-vs .wcard .kicker{font-size:12.5px;font-weight:600;color:var(--ink-500);margin-bottom:16px}
.gss-vs .wcard p{color:var(--ink-700);font-size:15px;line-height:1.62;margin-bottom:0}
.gss-vs .wcard .facts{list-style:none;padding:18px 0 0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--ink-100)}
.gss-vs .wcard .facts li{display:flex;gap:10px;font-size:13.5px;color:var(--ink-700)}
.gss-vs .wcard .facts b{color:var(--ink);font-weight:600;min-width:96px;display:inline-block;flex:0 0 96px}

/* ---------- TABLE ---------- */
.gss-vs .tablewrap{border:1px solid var(--ink-200);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md);background:#fff}
.gss-vs .tscroll{overflow-x:auto}
.gss-vs table.cmp{width:100%;border-collapse:collapse;min-width:720px}
.gss-vs table.cmp thead th{position:sticky;top:var(--vs-navtop);background:var(--ink);color:#fff;font-weight:600;font-size:14px;text-align:center;padding:18px 16px;z-index:2}
.gss-vs table.cmp thead th.feat{text-align:left;width:46%}
.gss-vs table.cmp thead th.you{background:linear-gradient(180deg,#0a2a6e,#123a86)}
.gss-vs table.cmp thead th .subt{display:block;font-size:11px;font-weight:400;color:rgba(255,255,255,.6);margin-top:3px}
.gss-vs table.cmp thead th.you .subt{color:var(--aqua)}
.gss-vs .grouprow td{padding:0;background:var(--neon-50)}
.gss-vs .grp-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--neon-50);color:var(--neon-700);font:inherit;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.07em;padding:13px 16px;border:0;cursor:pointer;text-align:left}
.gss-vs .grp-toggle:hover{background:var(--neon-100)}
.gss-vs .grp-toggle .chev{flex:0 0 auto;width:14px;height:14px;position:relative;transition:transform .25s}
.gss-vs .grp-toggle .chev::before{content:"";position:absolute;left:1px;top:2px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.gss-vs .grp.is-open .grp-toggle .chev{transform:rotate(180deg)}
.gss-vs table.cmp tbody.grp:not(.is-open) tr:not(.grouprow){display:none}
.gss-vs .tbl-tools{display:flex;justify-content:flex-end;margin-bottom:14px}
.gss-vs .expand-all{background:none;border:1px solid var(--ink-200);border-radius:999px;padding:8px 16px;font:inherit;font-size:13px;font-weight:600;color:var(--neon);cursor:pointer;transition:background .15s,border-color .15s}
.gss-vs .expand-all:hover{border-color:var(--neon);background:var(--neon-50)}
.gss-vs table.cmp tbody td{padding:14px 16px;border-top:1px solid var(--ink-100);font-size:14.5px;vertical-align:middle}
.gss-vs table.cmp td.feat{color:var(--ink-700);font-weight:500}
.gss-vs table.cmp td.mark{text-align:center;width:27%}
.gss-vs table.cmp td.you{background:rgba(80,120,255,.035)}
.gss-vs table.cmp tbody tr:hover td{background:var(--neon-50)}
.gss-vs table.cmp tbody tr:hover td.you{background:rgba(80,120,255,.08)}
.gss-vs .mk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:14px;font-weight:700}
.gss-vs .mk.ok{background:rgba(18,185,129,.12);color:var(--ok)}
.gss-vs .mk.part{background:rgba(196,127,16,.14);color:var(--partial)}
.gss-vs .mk.no{background:var(--ink-100);color:var(--ink-400)}
.gss-vs .legend{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;font-size:13.5px;color:var(--ink-500)}
.gss-vs .legend span{display:inline-flex;align-items:center;gap:8px}

/* ---------- DIFFERENCES ---------- */
.gss-vs .diffgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.gss-vs .diff{border:1px solid var(--ink-200);border-radius:18px;padding:28px;background:#fff;transition:transform .18s,box-shadow .2s,border-color .2s}
.gss-vs .diff:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--neon-100)}
.gss-vs .diff .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ink);margin-bottom:18px}
.gss-vs .diff .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gss-vs .diff h3{font-size:18px;font-weight:700;margin-bottom:10px}
.gss-vs .diff p{font-size:14px;color:var(--ink-700);line-height:1.6}
.gss-vs .diff .stat{margin-top:16px;font-size:13px;color:var(--ink-500);border-top:1px solid var(--ink-100);padding-top:14px}
.gss-vs .diff .stat b{color:var(--neon);font-weight:700}
.gss-vs .diff.span2{grid-column:span 2}
/* timeline data-viz */
.gss-vs .tl{margin-top:18px;border-top:1px solid var(--ink-100);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.gss-vs .tl-row{display:grid;grid-template-columns:104px 1fr;align-items:center;gap:14px}
.gss-vs .tl-row .lab{font-size:13px;font-weight:600;color:var(--ink)}
.gss-vs .tl-bar{position:relative;height:30px;background:var(--ink-100);border-radius:8px;overflow:hidden}
.gss-vs .tl-fill{position:absolute;inset:0 auto 0 0;border-radius:8px;display:flex;align-items:center;padding:0 12px;font-size:12.5px;font-weight:600;color:#fff}
.gss-vs .tl-fill.you{background:var(--aqua);width:25%}
.gss-vs .tl-fill.you span{color:var(--ink)}
.gss-vs .tl-fill.arc{background:#5b6576;width:100%;justify-content:flex-start}
.gss-vs .tl-note{font-size:12px;color:var(--ink-400);margin-top:2px}

/* ---------- WHEN TO CHOOSE ---------- */
.gss-vs .choose{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.gss-vs .chcard{border-radius:22px;padding:38px;position:relative;overflow:hidden}
.gss-vs .chcard.arc{background:var(--ink-50);border:1px solid var(--ink-200)}
.gss-vs .chcard.gss{background:var(--grad-side);color:#fff}
.gss-vs .chcard.gss::after{content:"";position:absolute;inset:0;background:radial-gradient(460px 300px at 92% 6%,rgba(0,255,215,.13),transparent 72%);pointer-events:none}
.gss-vs .chcard h3{font-size:21px;font-weight:800;margin-bottom:22px;position:relative}
.gss-vs .chcard.gss h3{color:#fff}
.gss-vs .chcard ul{margin:0;padding:0;display:flex;flex-direction:column;gap:15px;position:relative}
.gss-vs .chcard li{font-size:14.5px;line-height:1.5}
.gss-vs .chcard.arc li{color:var(--ink-700)}
.gss-vs .chcard.gss li{color:rgba(255,255,255,.92)}

/* ---------- FAQ ---------- */
.gss-vs .faq{max-width:860px;margin:36px auto 0;border-top:1px solid var(--ink-200)}
.gss-vs .faq details{border-bottom:1px solid var(--ink-200)}
.gss-vs .faq summary{list-style:none;cursor:pointer;padding:24px 8px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:17px;font-weight:600;color:var(--ink)}
.gss-vs .faq summary::-webkit-details-marker{display:none}
.gss-vs .faq summary .pl{flex:0 0 24px;height:24px;position:relative}
.gss-vs .faq summary .pl::before,.gss-vs .faq summary .pl::after{content:"";position:absolute;background:var(--neon);border-radius:2px}
.gss-vs .faq summary .pl::before{top:11px;left:2px;right:2px;height:2px}
.gss-vs .faq summary .pl::after{left:11px;top:2px;bottom:2px;width:2px;transition:transform .25s,opacity .25s}
.gss-vs .faq details[open] summary .pl::after{transform:rotate(90deg);opacity:0}
.gss-vs .faq .ans{padding:0 8px 26px;font-size:15px;line-height:1.68;color:var(--ink-700)}

/* ---------- FINAL CTA (mismo estilo que .gss-cta-final del tema) ---------- */
.gss-vs .finalcta{background:linear-gradient(120deg,#5078FF 0%,#3D5FD9 45%,#50DCFF 120%);color:#fff;text-align:center;position:relative;overflow:hidden}
.gss-vs .finalcta::after{content:"";position:absolute;right:-140px;bottom:-160px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,215,.16),transparent 65%);pointer-events:none}
.gss-vs .finalcta .wrap{position:relative;z-index:1;max-width:760px}
.gss-vs .finalcta h2{color:#fff;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.02em}
.gss-vs .finalcta p{margin:18px auto 0;font-size:18px;color:rgba(255,255,255,.82);max-width:560px}
.gss-vs .finalcta .cta-row{justify-content:center}

/* ---------- LEGAL NOTE ---------- */
.gss-vs .legal{padding:32px 0 48px;background:var(--ink-50);border-top:1px solid var(--ink-100)}
.gss-vs .legal p{max-width:920px;margin:0 auto;font-size:12px;line-height:1.7;color:var(--ink-400);text-align:center}

/* ---------- REVEAL on scroll (a prueba de fallos: base visible) ---------- */
.gss-vs .reveal{opacity:1;transform:none}
.gss-vs.gss-vs--anim .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.gss-vs.gss-vs--anim .reveal.is-in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .gss-vs .hero-grid{grid-template-columns:1fr;gap:40px}
  .gss-vs .hero{padding:48px 0 72px}
}
@media(max-width:860px){
  .gss-vs .section{padding:60px 0}
  .gss-vs .subnav .wrap{justify-content:flex-start}
  .gss-vs .whatis,.gss-vs .choose,.gss-vs .diffgrid,.gss-vs .vd-panel{grid-template-columns:1fr}
  .gss-vs .diff.span2{grid-column:auto}
  .gss-vs .vd-side{padding:28px}
  .gss-vs .tl-row{grid-template-columns:88px 1fr}
}
@media(prefers-reduced-motion:reduce){
  .gss-vs.gss-vs--anim .reveal{opacity:1;transform:none;transition:none}
  .gss-vs *,.gss-vs *::before,.gss-vs *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .gss-vs .diff:hover,.gss-vs .btn:hover{transform:none}
}