/* GhostPeg web 1.1.12 · A LO ANCHO (pedido de Danny, 18 oct, 09:58): «amplíate a las orillas lo más que puedas… aprovechar toda la
   pantalla… apoyos visuales con fotografías… en el teléfono que se compacte… y eso es en todo».
   Se carga el último. Prefijo gpa- (GhostPeg ancho). Las ventanas llevan la barra de Windows (GhostPeg es un programa de Windows) y
   dentro, capturas DE VERDAD del programa. Sin fuentes ni scripts de fuera (la política de seguridad de la web no los deja). */
:root{--gpa-max:1760px;--gpa-margen:clamp(16px,3.4vw,64px);--gpa-barra:#1c1930;--gpa-borde:rgba(214,201,255,.17);--gpa-sombra:0 30px 80px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.03) inset;
  --gpa-texto:#f7f6ff;--gpa-suave:#b9b3cf;--gpa-lila:#cdb6ff;--gpa-menta:#89efd4;--gpa-rosa:#ff99d7;--gpa-fondo:#0b0b19}

/* ---------- el marco de toda la web: cabecera, contenido y pie usan todo el ancho ---------- */
body.gp110 .topbar{padding:0 max(var(--gpa-margen),calc((100vw - var(--gpa-max))/2))}
body.gp110 .footer{max-width:var(--gpa-max);padding-left:var(--gpa-margen);padding-right:var(--gpa-margen)}
body.gp110 .join-strip{max-width:var(--gpa-max);margin-left:auto;margin-right:auto;padding-left:var(--gpa-margen);padding-right:var(--gpa-margen);box-sizing:border-box}
@media(max-width:1050px){body.gp110 .join-strip{margin-left:0;margin-right:0}}

.gpa{width:100%;max-width:var(--gpa-max);margin:0 auto;padding:0 var(--gpa-margen);box-sizing:border-box}
.gpa *,.gpa *::before,.gpa *::after{box-sizing:border-box}
.gpa h1,.gpa h2,.gpa h3{margin:0;color:var(--gpa-texto)}
.gpa p{margin:0}
.gpa-sec{padding:clamp(40px,6vw,96px) 0 0}
.gpa-sec-cabeza{display:flex;align-items:end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,40px)}
.gpa-sec-cabeza h2{font-size:clamp(30px,3.6vw,58px);line-height:1.02;max-width:16ch}
.gpa-sec-cabeza p{color:var(--gpa-suave);font-size:clamp(15px,1.2vw,18px);line-height:1.5;max-width:46ch}

/* ---------- la ventana (barra de Windows + captura) ---------- */
.gpa-ficha{margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.gpa-ventana{border-radius:12px;overflow:hidden;background:#0d0b1c;border:1px solid var(--gpa-borde);box-shadow:var(--gpa-sombra);position:relative}
.gpa-barra{height:32px;display:flex;align-items:center;gap:8px;padding-left:12px;background:var(--gpa-barra);color:#d9d3ee;font:600 12px/1 "Segoe UI",system-ui,-apple-system,sans-serif;user-select:none}
.gpa-barra img{width:16px;height:16px;flex:none}
.gpa-barra span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.gpa-barra i{flex:none;width:44px;height:32px;position:relative;opacity:.8}
.gpa-barra i::before,.gpa-barra i::after{content:"";position:absolute;left:50%;top:50%}
.gpa-min::before{width:10px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.gpa-max::before{width:9px;height:9px;border:1px solid currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.gpa-x::before,.gpa-x::after{width:12px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.gpa-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.gpa-pantalla{position:relative;background:#0b0a16;aspect-ratio:var(--ar,16/10)}
.gpa-pantalla img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 0)}
.gpa-ficha figcaption{display:grid;gap:4px;padding:0 4px}
.gpa-ficha figcaption b{font-size:clamp(16px,1.25vw,20px);line-height:1.25;color:var(--gpa-texto);font-weight:780;letter-spacing:-.015em}
.gpa-ficha figcaption span{font-size:14.5px;line-height:1.5;color:var(--gpa-suave)}
.gpa-etiqueta{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;vertical-align:2px;background:#ffffff14;color:var(--gpa-lila);border:1px solid #cdb6ff40}

/* ---------- el teléfono (un video vertical de verdad) ---------- */
.gpa-telefono{border-radius:28px;padding:9px;background:linear-gradient(160deg,#2a2546,#14122a);border:1px solid #ffffff2a;box-shadow:var(--gpa-sombra)}
.gpa-telefono img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:20px}

/* ---------- Descargar: el primer golpe de vista ---------- */
.gpa-heroe{display:grid;grid-template-columns:minmax(360px,5fr) 7fr;gap:clamp(28px,4.4vw,88px);align-items:center;padding:clamp(28px,4.6vw,76px) 0 clamp(16px,2vw,32px)}
.gpa-heroe h1{font-size:clamp(46px,6.3vw,112px);line-height:.94;letter-spacing:-.055em;font-weight:880}
.gpa-heroe h1 span{display:block;color:var(--gpa-lila)}
.gpa-lema{margin-top:18px !important;font-size:clamp(17px,1.5vw,22px);color:var(--gpa-texto);font-weight:650}
.gpa-free{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.gpa-free li{padding:7px 12px;border-radius:999px;background:#ffffff0c;border:1px solid var(--gpa-borde);font-size:13.5px;line-height:1.3;color:#e5e0f5}
.gpa-free li b{color:var(--gpa-menta);font-weight:750}
.gpa-bajar{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
body.gp110 .gpa-bajar .button.primary{font-size:clamp(16px,1.25vw,19px);padding:17px 28px;border-radius:16px}
.gpa-dato{font-size:13px;color:var(--gpa-suave);line-height:1.45}
.gpa-dato b{color:var(--gpa-texto);font-weight:700}

/* «Versión 1.1.12»: corta; al tocarla se abren las notas completas */
.gpa-version{margin-top:22px;border-radius:16px;border:1px solid var(--gpa-borde);background:#ffffff08;max-width:680px}
.gpa-version summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;font-weight:750;color:var(--gpa-texto)}
.gpa-version summary::-webkit-details-marker{display:none}
.gpa-version summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid var(--gpa-lila);border-bottom:2px solid var(--gpa-lila);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.gpa-version[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.gpa-version summary:hover{background:#ffffff0a}
.gpa-version summary:focus-visible{outline:2px solid var(--gpa-lila);outline-offset:2px}
.gpa-version summary small{font-weight:600;color:var(--gpa-suave);font-size:13px}
.gpa-version-num{padding:3px 10px;border-radius:999px;background:linear-gradient(120deg,#dcc5ff,#b69aff);color:#211536;font-size:13px;font-weight:850}
.gpa-notas{padding:4px 18px 18px}
.gpa-notas h3{font-size:14px;color:var(--gpa-suave);font-weight:700;margin:6px 0 10px}
.gpa-notas ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.gpa-notas li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.55;color:#e6e1f6}
.gpa-notas li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--gpa-menta)}
.gpa-notas .gpa-tecnico{margin-top:14px;padding-top:12px;border-top:1px solid var(--gpa-borde);font-size:12.5px;line-height:1.55;color:var(--gpa-suave);overflow-wrap:anywhere}
.gpa-notas .gpa-tecnico code{font-size:11.5px;color:#d8cff5}

/* el escritorio: la ventana grande, el recuadro de «¡Felicidades!» encima y el teléfono */
.gpa-escritorio{position:relative;padding:0 0 9% 0}
.gpa-escritorio::before{content:"";position:absolute;inset:-8% -6% -4% -4%;z-index:-1;background:radial-gradient(60% 60% at 70% 30%,#7c4dff38,transparent 70%),radial-gradient(40% 50% at 15% 85%,#ff99d726,transparent 70%),radial-gradient(35% 40% at 95% 90%,#89efd41f,transparent 70%);filter:blur(4px)}
.gpa-escritorio .gpa-principal{width:92%}
.gpa-escritorio .gpa-flotante{position:absolute;left:-4%;bottom:0;width:50%;z-index:2}
.gpa-escritorio .gpa-telefono{position:absolute;right:0;bottom:4%;width:21%;z-index:3}

/* ---------- lo nuevo: ventanas grandes (2 por fila) y medianas (3 por fila) ---------- */
.gpa-rejilla{display:grid;gap:clamp(22px,2.6vw,44px) clamp(18px,2vw,34px)}
.gpa-dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.gpa-tres{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(22px,2.6vw,44px)}

/* ---------- lo que puedes hacer: carteles de videos de verdad ---------- */
.gpa-carteles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.gpa-cartel{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#151327;border:1px solid var(--gpa-borde);box-shadow:var(--gpa-sombra);aspect-ratio:9/14}
.gpa-cartel img{width:100%;height:100%;object-fit:cover;display:block}
.gpa-cartel figcaption{position:absolute;inset:auto 0 0 0;padding:56px 16px 16px;background:linear-gradient(180deg,transparent,#07061acc 45%,#07061af2);display:grid;gap:3px}
.gpa-cartel figcaption b{font-size:clamp(16px,1.3vw,21px);line-height:1.2;color:#fff}
.gpa-cartel figcaption span{font-size:13.5px;line-height:1.45;color:#d9d3ec}
.gpa-ancha-dos{grid-column:span 2;aspect-ratio:auto}
.gpa-mas{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.gpa-mas a{color:var(--gpa-menta);font-weight:700}

/* ---------- instalarlo: los pasos (sí son una secuencia) ---------- */
.gpa-pasos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);counter-reset:paso}
.gpa-pasos li{counter-increment:paso;position:relative;padding:20px 20px 22px;border-radius:18px;background:linear-gradient(170deg,#1b1830,#141226);border:1px solid var(--gpa-borde);display:grid;gap:12px;align-content:start}
.gpa-pasos li::before{content:counter(paso);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:850;font-size:15px;background:linear-gradient(120deg,#dcc5ff,#b69aff);color:#211536}
.gpa-pasos b{font-size:16.5px;line-height:1.3;color:var(--gpa-texto)}
.gpa-pasos span{font-size:14px;line-height:1.55;color:var(--gpa-suave)}
.gpa-pasos code{font-size:12.5px;color:#e8e1ff;background:#ffffff10;padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.gpa-aviso-win{margin-top:2px;border-radius:10px;overflow:hidden;border:1px solid #ffffff22;font:12.5px/1.4 "Segoe UI",system-ui,sans-serif}
.gpa-aviso-win div{background:#0b4fa6;color:#fff;padding:10px 12px}
.gpa-aviso-win div strong{display:block;font-size:14px;margin-bottom:4px}
.gpa-aviso-win div u{text-underline-offset:2px}
.gpa-aviso-win p{background:#0a3f86;color:#fff;padding:8px 12px;text-align:right}
.gpa-aviso-win p span{display:inline-block;padding:4px 10px;border:1px solid #ffffffb0;border-radius:4px;color:#fff}
.gpa-icono-escritorio{display:flex;align-items:center;gap:12px}
.gpa-icono-escritorio img{width:52px;height:52px;border-radius:12px;filter:drop-shadow(0 6px 14px #8d5cf066)}
.gpa-icono-escritorio small{font-size:13px;color:#fff;text-shadow:0 1px 3px #000}
.gpa-nota{margin-top:18px !important;font-size:14px;color:var(--gpa-suave);line-height:1.55;max-width:90ch}
.gpa-nota a{color:var(--gpa-menta);font-weight:700}
.gpa-mac{margin-top:clamp(24px,3vw,44px);display:grid;grid-template-columns:auto 1fr auto;gap:16px 24px;align-items:center;padding:20px 24px;border-radius:18px;border:1px dashed #cdb6ff55;background:#ffffff06}
.gpa-mac b{font-size:17px;color:var(--gpa-texto)}
.gpa-mac span{color:var(--gpa-suave);font-size:14px;line-height:1.5}
.gpa-mac ol{margin:8px 0 0;padding-left:20px;color:var(--gpa-suave);font-size:14px;line-height:1.55}
.gpa-fin{height:clamp(40px,6vw,96px)}

/* ---------- pantallas medianas ---------- */
@media(max-width:1180px){
  .gpa-heroe{grid-template-columns:1fr;gap:34px}
  .gpa-escritorio{max-width:980px}
  .gpa-carteles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gpa-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gpa-tres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- teléfono: todo se compacta; las ventanas pasan de lado a lado con el dedo ---------- */
@media(max-width:760px){
  .gpa-heroe{padding-top:22px;gap:26px}
  .gpa-heroe h1{font-size:clamp(40px,12.6vw,58px)}
  .gpa-lema{margin-top:12px !important}
  .gpa-free{margin-top:14px;gap:6px}
  .gpa-free li{font-size:12.5px;padding:6px 10px}
  .gpa-bajar{margin-top:20px}
  body.gp110 .gpa-bajar .button.primary{width:100%;justify-content:center;text-align:center}
  .gpa-version{margin-top:16px}
  .gpa-escritorio{padding:0 0 14% 0;margin-right:6px}
  .gpa-escritorio .gpa-principal{width:100%}
  .gpa-escritorio .gpa-flotante{display:none}
  .gpa-escritorio .gpa-telefono{width:30%;right:-6px;bottom:0;border-radius:20px;padding:6px}
  .gpa-escritorio .gpa-telefono img{border-radius:15px}
  .gpa-barra{height:26px;font-size:11px}
  .gpa-barra i{width:30px;height:26px}
  .gpa-sec{padding-top:46px}
  .gpa-sec-cabeza{margin-bottom:16px}
  .gpa-sec-cabeza h2{font-size:clamp(28px,8.4vw,38px)}
  .gpa-riel{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    margin:0 calc(-1*var(--gpa-margen));padding:0 var(--gpa-margen) 8px;scroll-padding:0 var(--gpa-margen);scrollbar-width:none}
  .gpa-riel::-webkit-scrollbar{display:none}
  .gpa-riel>*{scroll-snap-align:start}
  .gpa-tres{margin-top:22px}
  .gpa-carteles{grid-auto-columns:62%}
  .gpa-carteles .gpa-ancha-dos{grid-column:auto}
  .gpa-pasos{grid-template-columns:1fr;gap:10px}
  .gpa-pasos li{grid-template-columns:34px 1fr;gap:6px 12px;padding:14px}
  .gpa-pasos li::before{grid-row:span 3}
  .gpa-pasos li>*{grid-column:2}
  .gpa-mac{grid-template-columns:1fr;padding:16px}
}
@media(prefers-reduced-motion:reduce){.gpa-version summary::after{transition:none}}
.gpa-tras{margin-top:clamp(22px,2.6vw,44px)}

/* ===================================================================== el resto de la web, a lo ancho («y eso es en todo») */
/* los contenedores de siempre usan todo el ancho (con su margen), en todas las páginas */
body.gp110 .hero,body.gp110 .section,body.gp110 .page,body.gp110 .gp-hero{max-width:var(--gpa-max);padding-left:var(--gpa-margen);padding-right:var(--gpa-margen);box-sizing:border-box}
body.gp110 .feature-ribbon,body.gp110 .gp-cta{max-width:calc(var(--gpa-max) - 2*var(--gpa-margen))}
body.gp110 .taller-page{max-width:var(--gpa-max)}

/* páginas de formulario (Contacto, Feedback, Publicar, Comentar): la explicación a la izquierda con la mascota y el formulario a la derecha */
@media(min-width:1000px){
  body.gp110 .narrow:has(> form.panel){max-width:var(--gpa-max);padding:0 var(--gpa-margen);margin:clamp(36px,5vw,80px) auto;box-sizing:border-box;
    display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,96px);align-items:start}
  body.gp110 .narrow:has(> form.panel) > *{grid-column:1}
  body.gp110 .narrow:has(> form.panel) > form.panel{grid-column:2;grid-row:1 / span 30;margin:0;padding:clamp(24px,2.4vw,40px)}
  body.gp110 .narrow:has(> form.panel) > h1{font-size:clamp(40px,4.6vw,76px);line-height:.98;margin:10px 0 16px}
  body.gp110 .narrow:has(> form.panel) > .muted{font-size:clamp(16px,1.25vw,19px);line-height:1.6;max-width:44ch}
  body.gp110 .narrow:has(> form.panel)::after{content:"";grid-column:1;display:block;width:min(100%,380px);aspect-ratio:1;margin-top:clamp(18px,3vw,48px);
    background:url(/assets/gp110/mascota_sudadera_512.webp) center/contain no-repeat;filter:drop-shadow(0 24px 60px #7c4dff55)}
}

/* textos largos con varias secciones (Novedades, Requisitos, Diario): dos columnas de tarjetas, el título a todo lo ancho */
body.gp110 .gpa-articulo{max-width:var(--gpa-max);padding:0 var(--gpa-margen);box-sizing:border-box}
@media(min-width:1100px){
  body.gp110 .gpa-articulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(22px,2.4vw,40px);align-items:start}
  body.gp110 .gpa-articulo > *{grid-column:1/-1}
  body.gp110 .gpa-articulo > h1{max-width:18ch}
  body.gp110 .gpa-articulo > .muted,body.gp110 .gpa-articulo > p.lead{max-width:70ch}
  body.gp110 .gpa-articulo > section.release,body.gp110 .gpa-articulo > section.panel{grid-column:auto;margin-top:0;margin-bottom:clamp(20px,2.2vw,36px)}
}
body.gp110 .gpa-articulo > section.release p,body.gp110 .gpa-articulo > section.panel p{max-width:80ch}
.gpa-articulo .gpa-sec{grid-column:1/-1}
/* 1.1.12 · Novedades sin los bloques viejos: aire entre «Lo nuevo en la 1.1.12» y «Lo que viene» */
.gpa-articulo .gpa-sec + section.panel,.gpa-articulo .gpa-sec + section.release{margin-top:clamp(28px,3vw,48px)}