/* GhostPeg web 1.1.12 · VENTANAS (pedido de Danny, 18 oct, 11:48): «ventanas como en 3D, interactivas, que se pasan con el dedo, en todas
   las páginas; poco texto (lo largo plegado); moderno y "wow", pero ligero».
   Se carga después de gp1112_ancho.css. Prefijo gpv-. Las clases gpv-mazo, gpv-incl y gpv-plegable las pone gp1112_ventanas.js:
   sin JavaScript la web se ve como antes y no se esconde nada. Con «menos movimiento» del sistema, todo queda plano. */

/* ---------- el escaparate: Crea, comparte y crece (seis ventanas) ---------- */
.gpv-escaparate{--gpv-vw:min(74vw,560px);--gpv-hueco:12px;--gpv-giro:38;--gpv-fondo:120;--gpv-tira:34;
  position:relative;max-width:var(--gpa-max,1760px);margin:0 auto;padding:clamp(44px,5.2vw,88px) var(--gpa-margen,16px) clamp(16px,2.5vw,40px);
  box-sizing:border-box;overflow:hidden;isolation:isolate}
.gpv-escaparate.gpv-arriba{padding-top:clamp(28px,3.5vw,56px)}
.gpv-escaparate::before{content:"";position:absolute;z-index:-1;left:50%;bottom:clamp(40px,7vw,120px);width:min(1100px,96%);height:clamp(120px,16vw,240px);
  transform:translateX(-50%);background:radial-gradient(closest-side,rgba(141,92,240,.30),rgba(141,92,240,.08) 60%,transparent);pointer-events:none}
.gpv-cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.gpv-cabeza h2{margin:0;color:#f7f6ff;font-size:clamp(34px,4vw,64px);line-height:.98;letter-spacing:-.05em;font-weight:860}
.gpv-cabeza p{margin:12px 0 0;color:var(--gpa-suave,#b9b3cf);font-size:clamp(15.5px,1.25vw,19px);line-height:1.45}
.gpv-flechas{display:flex;gap:10px;flex:none}
.gpv-flechas[hidden],.gpv-pestanas[hidden]{display:none}
.gpv-flechas button{width:54px;height:54px;border-radius:50%;border:1px solid var(--gpa-borde,rgba(214,201,255,.17));background:#ffffff0a;color:#f7f6ff;
  display:grid;place-items:center;cursor:pointer;padding:0;transition:background .2s,border-color .2s,opacity .2s}
.gpv-flechas button:hover:not(:disabled){background:#b18dff22;border-color:#b99aff}
.gpv-flechas button:disabled{opacity:.3;cursor:default}
.gpv-flechas i{width:12px;height:12px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(2px) rotate(45deg)}
.gpv-sig i{transform:translateX(-2px) rotate(-135deg)}
.gpv-pestanas{display:flex;gap:8px;margin:24px calc(-1*var(--gpa-margen,16px)) 0;padding:2px var(--gpa-margen,16px);overflow-x:auto;scrollbar-width:none}
.gpv-pestanas::-webkit-scrollbar{display:none}
.gpv-pestanas button{flex:none;border:1px solid var(--gpa-borde,rgba(214,201,255,.17));background:#ffffff08;color:#ddd7f0;border-radius:999px;padding:9px 17px;
  font:inherit;font-size:14.5px;font-weight:720;line-height:1.2;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.gpv-pestanas button:hover{border-color:#b99aff;color:#fff}
.gpv-pestanas button[aria-current="true"]{background:linear-gradient(120deg,#dcc5ff,#b69aff);color:#211536;border-color:transparent}
.gpv-pista{display:flex;gap:var(--gpv-hueco);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  position:relative;margin:0 calc(-1*var(--gpa-margen,16px));padding:28px 0 26px var(--gpv-pad,8vw);scroll-padding-inline:var(--gpv-pad,8vw)}
.gpv-pista::-webkit-scrollbar{display:none}
/* el hueco del final va como un elemento: las ventanas giradas encogen el área que se puede deslizar y la última no llegaría al centro */
.gpv-pista::after{content:"";flex:0 0 max(1px,calc(var(--gpv-pad,8vw) - var(--gpv-hueco)))}
.gpv-v{flex:0 0 var(--gpv-vw);min-width:0;scroll-snap-align:center;display:flex;flex-direction:column;gap:16px;z-index:var(--z,1);transform-origin:50% 45%;
  transform:perspective(1300px) translateX(var(--tx,0%)) translateZ(var(--tz,0px)) rotateY(var(--rot,0deg));opacity:var(--op,1)}
.gpv-v .gpa-ventana{transition:box-shadow .4s}
.gpv-v.gpv-frente .gpa-ventana{box-shadow:0 40px 90px -24px rgba(0,0,0,.75),0 0 0 1px rgba(205,182,255,.28),0 0 60px -10px rgba(141,92,240,.45)}
.gpv-v .gpa-pantalla img{-webkit-user-drag:none;user-select:none}
.gpv-texto{display:grid;gap:6px;padding:0 4px;justify-items:start}
.gpv-texto h3{margin:0;color:#f7f6ff;font-size:clamp(19px,1.6vw,26px);line-height:1.15;letter-spacing:-.025em;font-weight:800}
.gpv-texto p{margin:0;color:var(--gpa-suave,#b9b3cf);font-size:clamp(14.5px,1.1vw,16.5px);line-height:1.5;max-width:46ch}
body.gp110 .gpv-texto .gpv-ir{margin-top:8px;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;border:1px solid #bbb0df55;
  background:#ffffff08;color:#f7f6ff;font-size:14.5px;font-weight:780;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
body.gp110 .gpv-texto .gpv-ir:hover{border-color:#b99aff;background:#ffffff14;color:#fff}
body.gp110 .gpv-v.gpv-frente .gpv-ir{background:linear-gradient(120deg,#dcc5ff,#b69aff);border-color:transparent;color:#211536}
@media(min-width:761px){
  .gpv-escaparate{--gpv-vw:clamp(360px,38vw,600px);--gpv-hueco:28px;--gpv-giro:34;--gpv-fondo:190;--gpv-tira:16}
  .gpv-v .gpa-pantalla{--ar:16/9}
}
@media(max-width:760px){
  .gpv-cabeza{display:block}
  .gpv-flechas{display:none}
  .gpv-pista{padding-top:22px;padding-bottom:22px}
}
@media(hover:hover) and (pointer:fine){
  .gpv-js .gpv-pista{cursor:grab}
  .gpv-js .gpv-pista.gpv-arrastra{cursor:grabbing;scroll-snap-type:none;user-select:none}
  .gpv-js .gpv-v:not(.gpv-frente) a{pointer-events:none}
  .gpv-js .gpv-v:not(.gpv-frente){cursor:pointer}
}

/* ---------- el mazo: los grupos de tarjetas de cada página se pasan con el dedo (teléfono) ---------- */
body.gp110 .gpv-mazo.gpv-mazo{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;position:relative;grid-template-columns:none;grid-auto-flow:row;list-style:none;
  margin-left:calc(-1*var(--gpv-izq,0px));margin-right:calc(-1*var(--gpv-der,0px));padding:14px 0 20px var(--gpv-pad,10vw);scroll-padding-inline:var(--gpv-pad,10vw);
  max-width:none;width:auto;box-sizing:border-box;--gpv-giro:36;--gpv-fondo:100;--gpv-tira:28}
body.gp110 .gpv-mazo::-webkit-scrollbar{display:none}
body.gp110 .gpv-mazo.gpv-mazo::after{content:"";flex:0 0 max(1px,calc(var(--gpv-pad,10vw) - 12px))}
body.gp110 .gpv-mazo.gpv-mazo>*{flex:0 0 var(--gpv-w,min(72vw,320px));width:auto;max-width:none;min-width:0;margin:0;scroll-snap-align:center;box-sizing:border-box;z-index:var(--z,1);
  transform:perspective(900px) translateX(var(--tx,0%)) translateZ(var(--tz,0px)) rotateY(var(--rot,0deg));opacity:var(--op,1);transform-origin:50% 50%}
body.gp110 .gpv-mazo.gpv-sin-marco>*{background:linear-gradient(170deg,#1d1934,#141226);border:1px solid var(--gpa-borde,rgba(214,201,255,.17));border-radius:20px;padding:20px 18px}
.gpv-guia{display:flex;justify-content:center;align-items:center;gap:0;margin:0 auto;min-height:26px}
.gpv-guia button{width:22px;height:26px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.gpv-guia button::before{content:"";display:block;width:7px;height:7px;border-radius:99px;background:#ffffff38;transition:width .25s,background .25s}
.gpv-guia button[aria-current="true"]::before{width:22px;background:linear-gradient(90deg,#dcc5ff,#89efd4)}
.gpv-guia button[aria-current="true"]{width:34px}
.gpv-guia .gpv-cuenta{font-size:13px;font-weight:700;color:#cfc8e6;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.gpv-guia .gpv-barrita{width:72px;height:4px;border-radius:9px;background:#ffffff1f;margin-left:10px;overflow:hidden}
.gpv-guia .gpv-barrita i{display:block;height:100%;width:var(--gpv-avance,10%);border-radius:inherit;background:linear-gradient(90deg,#dcc5ff,#89efd4)}

/* las marcas quietas donde encaja cada tarjeta (las pone el script) */
.gpv-anclas{position:absolute;left:0;top:0;width:1px;height:100%;pointer-events:none;opacity:0}
.gpv-anclas i{position:absolute;top:0;height:100%;scroll-snap-align:center}
body.gp110 .gpv-mazo.gpv-mazo>.gpv-anclas{position:absolute;flex:none;width:1px;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;transform:none;opacity:0;z-index:0}
body.gp110 .gpv-con-anclas.gpv-con-anclas>*,.gpv-con-anclas>.gpv-v{scroll-snap-align:none}

/* ---------- «Ver más»: lo largo se pliega a tres líneas (todo el texto sigue en la página) ---------- */
.gpv-plegable{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
body.gp110 .gpv-mas{display:flex;width:max-content;align-items:center;gap:7px;margin:8px 0 0;padding:4px 0;border:0;background:none;color:#cdb6ff;font:inherit;
  font-size:14.5px;font-weight:760;line-height:1.3;cursor:pointer;text-decoration:underline;text-decoration-color:#cdb6ff66;text-underline-offset:4px;box-shadow:none;border-radius:6px}
body.gp110 .gpv-mas:hover{color:#fff;text-decoration-color:#fff}
body.gp110 .gpv-mas.gpv-centro{margin-left:auto;margin-right:auto}
.gpv-mas::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.gpv-mas[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.gpv-oculta{display:none!important}
body.gp110 li.gpv-mas-li{padding-left:0;list-style:none;background:none;border:0}
body.gp110 li.gpv-mas-li::before,body.gp110 li.gpv-mas-li::marker{content:none;display:none}
body.gp110 li.gpv-mas-li .gpv-mas{margin-top:2px}

/* ---------- con el mouse: la tarjeta se inclina hacia donde apuntas (computadora) ---------- */
@media(hover:hover) and (pointer:fine){
  body.gp110 .gpv-incl{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
    transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
  body.gp110 .gpv-incl.gpv-sobre{--ty:-6px;transition:transform .12s ease-out,box-shadow .35s,border-color .35s;
    box-shadow:0 30px 60px -22px rgba(0,0,0,.7),0 0 0 1px rgba(177,141,255,.34)}
}

/* ---------- foco visible con el teclado ---------- */
.gpv-pestanas button:focus-visible,.gpv-flechas button:focus-visible,.gpv-guia button:focus-visible,body.gp110 .gpv-mas:focus-visible,body.gp110 .gpv-texto .gpv-ir:focus-visible{
  outline:3px solid #89efd4;outline-offset:3px}

/* ---------- el editor web no lleva el escaparate ---------- */
body:has(#gpe2) .gpv-escaparate{display:none}

@media(prefers-reduced-motion:reduce){
  .gpv-v,body.gp110 .gpv-mazo.gpv-mazo>*{transform:none!important;opacity:1!important}
  body.gp110 .gpv-incl{transform:none!important;transition:none!important}
  .gpv-mas::after,.gpv-guia button::before{transition:none}
}