/* ==========================================================================
   GamePass.es — sistema visual de landings 2026
   --------------------------------------------------------------------------
   Capa compartida por las paginas pilar y evergreen. ADN comun con Nexo
   (paleta, codigo de color por plan, tratamiento de portadas) pero gramatica
   propia: una landing es superficie de consulta, no de conversacion.

   Presupuesto: este fichero debe mantenerse por debajo de 45 KB.
   ========================================================================== */

:root {
  /* Lienzo ------------------------------------------------------------- */
  --gp-canvas: #071219;
  --gp-surface: #0b1922;
  --gp-elevated: #10232e;
  --gp-line: #1b3443;
  --gp-line-soft: #142b38;

  /* Tinta -------------------------------------------------------------- */
  --gp-ink: #eef6fa;
  --gp-ink-2: #a9c2cf;
  --gp-ink-3: #7c9aaa;   /* AA sobre elevated: 5,42. #6d8b9b se quedaba en 4,47 */

  /* Identidad ---------------------------------------------------------- */
  --gp-cyan: #35d6e8;
  --gp-on-cyan: #071219;  /* texto sobre fondo cyan: en oscuro el cyan es brillante */
  --gp-cyan-deep: #0e7f8d;

  /* Codigo de color por plan — canonico del proyecto, no inventar otro.
     verde = estado Game Pass · cyan = identidad + Ultimate
     morado = Premium · ambar = PC Game Pass · plata = Essential         */
  --gp-verde: #4ade80;
  --gp-morado: #a78bfa;
  --gp-ambar: #fbbf24;
  --gp-plata: #cbd5e1;
  --gp-gris: #64748b;    /* decorativo: 3,39 sobre elevated. NO usar para texto */

  /* Semantica ---------------------------------------------------------- */
  --gp-ok: var(--gp-verde);
  --gp-warn: var(--gp-ambar);
  --gp-bad: #f87171;

  /* Ritmo -------------------------------------------------------------- */
  --gp-r1: 4px;   --gp-r2: 8px;   --gp-r3: 12px;  --gp-r4: 16px;
  --gp-r5: 24px;  --gp-r6: 32px;  --gp-r7: 48px;  --gp-r8: 72px;

  --gp-radius: 14px;
  --gp-radius-lg: 20px;

  /* Medidas ------------------------------------------------------------ */
  --gp-measure: 68ch;
  --gp-wide: 1180px;
  --gp-rail: 320px;

  /* Motion — corto y con proposito ------------------------------------- */
  --gp-fast: 140ms;
  --gp-base: 200ms;
  --gp-slow: 380ms;
  --gp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --gp-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --gp-glow: 0 0 0 1px rgba(53,214,232,.35), 0 12px 32px rgba(53,214,232,.12);
}

/* Modo claro: el lienzo se aclara, la identidad no cambia. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --gp-canvas: #f5f7f4;
    --gp-surface: #ffffff;
    --gp-elevated: #ffffff;
    --gp-line: #dfe6e2;
    --gp-line-soft: #ecf1ee;
    --gp-ink: #101412;
    --gp-ink-2: #41514b;
    --gp-ink-3: #5d6d66;
    --gp-cyan: #0b6b77;    /* el cyan brillante da 1,63 sobre fondo claro: ilegible */
    --gp-on-cyan: #ffffff; /* en claro el cyan es profundo, asi que encima va blanco */
    --gp-cyan-deep: #0a6270;
    /* Los colores de plan son legibles sobre lienzo oscuro, no sobre uno claro:
       plata 1,48 · ambar 1,67 · verde 1,74 · morado 2,72 sobre blanco. Se
       redefinen manteniendo el mismo codigo de color reconocible. */
    --gp-verde: #0f7a3d;
    --gp-morado: #6d4bd6;
    --gp-ambar: #8a5a00;
    --gp-plata: #5c6b7a;
    --gp-gris: #5d6d66;
    --gp-shadow: 0 1px 2px rgba(16,20,18,.06), 0 8px 24px rgba(16,20,18,.06);
  }
}
:root[data-theme="light"] {
  --gp-canvas: #f5f7f4;
  --gp-surface: #ffffff;
  --gp-elevated: #ffffff;
  --gp-line: #dfe6e2;
  --gp-line-soft: #ecf1ee;
  --gp-ink: #101412;
  --gp-ink-2: #41514b;
  --gp-ink-3: #5d6d66;
  --gp-cyan: #0b6b77;  /* el cyan brillante da 1,63 sobre fondo claro: ilegible */
  --gp-on-cyan: #ffffff;
  --gp-cyan-deep: #0a6270;
  /* Los colores de plan son legibles sobre lienzo oscuro, no sobre uno claro:
     plata 1,48 · ambar 1,67 · verde 1,74 · morado 2,72 sobre blanco. Se
     redefinen manteniendo el mismo codigo de color reconocible. */
  --gp-verde: #0f7a3d;
  --gp-morado: #6d4bd6;
  --gp-ambar: #8a5a00;
  --gp-plata: #5c6b7a;
  --gp-gris: #5d6d66;
  --gp-shadow: 0 1px 2px rgba(16,20,18,.06), 0 8px 24px rgba(16,20,18,.06);
}

/* ==========================================================================
   Base
   ========================================================================== */

.gpl {
  background: var(--gp-canvas);
  color: var(--gp-ink);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}
.gpl *, .gpl *::before, .gpl *::after { box-sizing: border-box; }

.gpl__wrap {
  width: 100%;
  max-width: var(--gp-wide);
  margin-inline: auto;
  padding-inline: 16px;
}

/* Ancho de lectura: el texto largo nunca ocupa todo el ancho. */
.gpl__read { max-width: var(--gp-measure); }

.gpl h1, .gpl h2, .gpl h3 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.gpl h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.5rem); font-weight: 800; }
.gpl h2 { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 750; }
.gpl h3 { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); font-weight: 700; }
.gpl p  { margin: 0 0 var(--gp-r4); line-height: 1.65; color: var(--gp-ink-2); }
.gpl p.gpl__lead {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  color: var(--gp-ink-2);
  line-height: 1.55;
}

.gpl a { color: var(--gp-cyan); text-decoration-color: color-mix(in srgb, var(--gp-cyan) 40%, transparent); text-underline-offset: 3px; }
.gpl a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Seccion — el ritmo alternado es lo que evita la sensacion de plantilla
   ========================================================================== */

.gpl-section { padding-block: var(--gp-r8); border-top: 1px solid var(--gp-line-soft); }
.gpl-section:first-of-type { border-top: 0; }
.gpl-section--tint { background: var(--gp-surface); }
.gpl-section__head { margin-bottom: var(--gp-r6); }
.gpl-section__kicker {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gp-cyan); margin-bottom: var(--gp-r2);
}

/* ==========================================================================
   Hero — respuesta directa, no tabla. Sin imagen de fondo: el LCP es texto.
   ========================================================================== */

.gpl-hero { padding-block: var(--gp-r8) var(--gp-r7); position: relative; overflow: hidden; }
.gpl-hero::after {
  content: ""; position: absolute; inset: -40% 40% 55% -20%;
  background: radial-gradient(60% 60% at 30% 40%, color-mix(in srgb, var(--gp-cyan) 14%, transparent), transparent 70%);
  pointer-events: none; z-index: 0;
}
.gpl-hero > * { position: relative; z-index: 1; }
.gpl-hero__answer {
  margin-top: var(--gp-r5);
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.5; color: var(--gp-ink); max-width: var(--gp-measure);
}
.gpl-hero__answer strong { color: var(--gp-cyan); font-weight: 700; }

/* ==========================================================================
   Registro de verdad — la firma de marca
   ========================================================================== */

.gpl-verified {
  display: inline-flex; align-items: center; gap: var(--gp-r2);
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--gp-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gp-verde) 8%, transparent);
  font-size: .8rem; color: var(--gp-ink-2); line-height: 1.3;
}
.gpl-verified__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gp-verde); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gp-verde) 60%, transparent);
  animation: gpl-pulse 2.4s var(--gp-ease) 1;
}
@keyframes gpl-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gp-verde) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.gpl-verified strong { color: var(--gp-ink); font-weight: 650; }

.gpl-ledger { border: 1px solid var(--gp-line); border-radius: var(--gp-radius); padding: var(--gp-r5); background: var(--gp-surface); }
.gpl-ledger__row { display: flex; flex-wrap: wrap; gap: var(--gp-r2) var(--gp-r4); padding-block: var(--gp-r3); border-top: 1px solid var(--gp-line-soft); font-size: .88rem; }
.gpl-ledger__row:first-of-type { border-top: 0; }
.gpl-ledger__what { flex: 1 1 15rem; color: var(--gp-ink); font-weight: 600; }
.gpl-ledger__when { color: var(--gp-ink-3); font-variant-numeric: tabular-nums; }
/* El QA del navegador detecto que el enlace a la fuente tenia un hit-area
   por debajo del minimo tactil. Se le da 44 px de alto real sin romper la
   linea de texto. */
.gpl-ledger__when a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: 2px;
}

/* ==========================================================================
   Planes — el codigo de color canonico hace el trabajo pesado
   ========================================================================== */

.gpl-plans { display: grid; gap: var(--gp-r4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.gpl-plan {
  position: relative; display: flex; flex-direction: column; gap: var(--gp-r3);
  padding: var(--gp-r5); border-radius: var(--gp-radius);
  background: var(--gp-elevated); border: 1px solid var(--gp-line);
  transition: transform var(--gp-base) var(--gp-ease), box-shadow var(--gp-base) var(--gp-ease), border-color var(--gp-base) var(--gp-ease);
}
.gpl-plan::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  border-radius: var(--gp-radius) var(--gp-radius) 0 0;
  background: var(--plan-color, var(--gp-gris));
}
.gpl-plan:hover { transform: translateY(-3px); box-shadow: var(--gp-shadow); border-color: color-mix(in srgb, var(--plan-color, var(--gp-cyan)) 45%, var(--gp-line)); }
.gpl-plan--essential { --plan-color: var(--gp-plata); }
.gpl-plan--premium   { --plan-color: var(--gp-morado); }
.gpl-plan--pc        { --plan-color: var(--gp-ambar); }
.gpl-plan--ultimate  { --plan-color: var(--gp-cyan); }

.gpl-plan__name { font-size: .95rem; font-weight: 700; color: var(--gp-ink); }
.gpl-plan__price { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--gp-ink); font-variant-numeric: tabular-nums; }
.gpl-plan__price small { font-size: .9rem; font-weight: 500; color: var(--gp-ink-3); letter-spacing: 0; }
.gpl-plan__lib { font-size: .82rem; color: var(--plan-color); font-weight: 650; }
.gpl-plan__feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gpl-plan__feats li { display: flex; gap: var(--gp-r2); align-items: flex-start; font-size: .85rem; color: var(--gp-ink-2); line-height: 1.4; }
.gpl-plan__feats li[data-on="0"] { color: var(--gp-ink-3); }
.gpl-plan__note { font-size: .8rem; color: var(--gp-ink-3); line-height: 1.5; margin: 0; }

/* Icono de estado: SVG propio, cero emojis. */
.gpl-ic { width: 16px; height: 16px; flex: none; margin-top: 2px; }

/* ==========================================================================
   Selector de plan — la herramienta. JS progresivo: sin JS sigue leyendose.
   ========================================================================== */

.gpl-picker { border: 1px solid var(--gp-line); border-radius: var(--gp-radius-lg); background: var(--gp-surface); overflow: hidden; }
.gpl-picker__head { padding: var(--gp-r5) var(--gp-r5) var(--gp-r4); border-bottom: 1px solid var(--gp-line-soft); }
.gpl-picker__body { padding: var(--gp-r5); display: grid; gap: var(--gp-r5); }
.gpl-q__label { display: block; font-size: .9rem; font-weight: 650; color: var(--gp-ink); margin-bottom: var(--gp-r3); }
.gpl-opts { display: flex; flex-wrap: wrap; gap: var(--gp-r2); }
.gpl-opt { position: relative; }
.gpl-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gpl-opt span {
  display: block; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--gp-line); background: var(--gp-elevated);
  font-size: .87rem; color: var(--gp-ink-2); cursor: pointer;
  transition: border-color var(--gp-fast) var(--gp-ease), color var(--gp-fast) var(--gp-ease), background var(--gp-fast) var(--gp-ease);
}
.gpl-opt input:hover + span { border-color: var(--gp-ink-3); }
.gpl-opt input:focus-visible + span { outline: 2px solid var(--gp-cyan); outline-offset: 2px; }
.gpl-opt input:checked + span { border-color: var(--gp-cyan); color: var(--gp-ink); background: color-mix(in srgb, var(--gp-cyan) 12%, transparent); font-weight: 600; }

.gpl-picker__out { padding: var(--gp-r5); border-top: 1px solid var(--gp-line-soft); background: var(--gp-elevated); }
.gpl-picker__out[hidden] { display: none; }
.gpl-result { display: grid; gap: var(--gp-r3); animation: gpl-in var(--gp-base) var(--gp-ease); }
.gpl-result__plan { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; color: var(--gp-ink); letter-spacing: -.02em; }
.gpl-result__why { font-size: .92rem; color: var(--gp-ink-2); line-height: 1.6; margin: 0; }
.gpl-result__why + .gpl-result__why { margin-top: calc(var(--gp-r2) * -1); }

@keyframes gpl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Enlaces a otras piezas del ecosistema
   ========================================================================== */

.gpl-links { display: grid; gap: var(--gp-r3); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.gpl-link {
  display: grid; gap: 6px; padding: var(--gp-r4) var(--gp-r5);
  border: 1px solid var(--gp-line); border-radius: var(--gp-radius);
  background: var(--gp-elevated); text-decoration: none;
  transition: transform var(--gp-base) var(--gp-ease), border-color var(--gp-base) var(--gp-ease);
}
.gpl-link:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gp-cyan) 45%, var(--gp-line)); }
.gpl-link__t { font-weight: 700; color: var(--gp-ink); font-size: .98rem; }
.gpl-link__d { font-size: .85rem; color: var(--gp-ink-3); line-height: 1.45; }

/* ==========================================================================
   Desktop editorial: contenido + rail. No una columna estirada.
   ========================================================================== */

@media (min-width: 1060px) {
  .gpl__wrap { padding-inline: 24px; }
  .gpl-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--gp-rail); gap: var(--gp-r8); align-items: start; }
  .gpl-split__rail { position: sticky; top: var(--gp-r5); display: grid; gap: var(--gp-r4); }
}

/* ==========================================================================
   Accesibilidad y respeto por el usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .gpl *, .gpl *::before, .gpl *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .gpl-plan:hover, .gpl-link:hover { transform: none; }
}

.gpl :focus-visible { outline: 2px solid var(--gp-cyan); outline-offset: 3px; border-radius: var(--gp-r1); }
.gpl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   Ofertas — precio oficial y precio detectado uno al lado del otro.
   Sin urgencia falsa, sin contadores, sin dark patterns.
   ========================================================================== */

.gpl-offers { display: grid; gap: var(--gp-r4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

.gpl-offer {
  position: relative; display: grid; gap: var(--gp-r3); align-content: start;
  padding: var(--gp-r5); border-radius: var(--gp-radius);
  background: var(--gp-elevated); border: 1px solid var(--gp-line);
  transition: transform var(--gp-base) var(--gp-ease), box-shadow var(--gp-base) var(--gp-ease), border-color var(--gp-base) var(--gp-ease);
}
.gpl-offer::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  border-radius: var(--gp-radius) var(--gp-radius) 0 0;
  background: var(--plan-color, var(--gp-gris));
}
.gpl-offer:hover { transform: translateY(-3px); box-shadow: var(--gp-shadow); border-color: color-mix(in srgb, var(--plan-color, var(--gp-cyan)) 45%, var(--gp-line)); }
.gpl-offer--essential { --plan-color: var(--gp-plata); }
.gpl-offer--premium   { --plan-color: var(--gp-morado); }
.gpl-offer--pc        { --plan-color: var(--gp-ambar); }
.gpl-offer--ultimate  { --plan-color: var(--gp-cyan); }

.gpl-offer__plan { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--plan-color); }
.gpl-offer__prices { display: flex; align-items: baseline; gap: var(--gp-r3); flex-wrap: wrap; }
.gpl-offer__now { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; color: var(--gp-ink); font-variant-numeric: tabular-nums; }
.gpl-offer__was { font-size: 1rem; color: var(--gp-ink-3); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.gpl-offer__save { font-size: .9rem; color: var(--gp-verde); font-weight: 600; }
.gpl-offer__save strong { font-weight: 800; }
.gpl-offer__meta { font-size: .84rem; color: var(--gp-ink-3); }

.gpl-offer__cta {
  /* El texto sobre el cyan cambia con el tema, igual que el propio cyan:
     oscuro sobre cyan brillante, blanco sobre cyan profundo. */
  color: var(--gp-on-cyan);
  display: inline-block; text-align: center; text-decoration: none;
  padding: 11px 18px; border-radius: 999px; font-size: .9rem; font-weight: 700;
  background: var(--gp-cyan);
  transition: filter var(--gp-fast) var(--gp-ease);
}
.gpl-offer__cta:hover { filter: brightness(1.08); }
.gpl-offer__warn { margin: 0; font-size: .78rem; color: var(--gp-ink-3); line-height: 1.45; }

/* ==========================================================================
   Veredicto del checker — el color comunica antes que el texto
   ========================================================================== */

.gpl-verdict {
  display: grid; gap: var(--gp-r3);
  padding: var(--gp-r5); border-radius: var(--gp-radius);
  border: 1px solid var(--v-color, var(--gp-line));
  background: color-mix(in srgb, var(--v-color, var(--gp-cyan)) 8%, transparent);
  animation: gpl-in var(--gp-base) var(--gp-ease);
}
.gpl-verdict--no  { --v-color: var(--gp-bad); }
.gpl-verdict--ojo { --v-color: var(--gp-ambar); }
.gpl-verdict--si  { --v-color: var(--gp-verde); }

.gpl-verdict__head {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.25; color: var(--gp-ink);
  padding-left: var(--gp-r4); border-left: 4px solid var(--v-color);
}
.gpl-verdict__line { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--gp-ink-2); }
.gpl-verdict__do {
  margin-top: var(--gp-r2); padding-top: var(--gp-r4);
  border-top: 1px solid color-mix(in srgb, var(--v-color) 25%, transparent);
}
.gpl-verdict__do strong {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--v-color); margin-bottom: var(--gp-r3);
}
.gpl-verdict__do ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 7px; }
.gpl-verdict__do li { font-size: .89rem; line-height: 1.55; color: var(--gp-ink-2); }