/* =====================================================================
   FIXTU · portada (recorrido C: informativa, con descarga directa)
   Elección final (23-sep): paleta Frambuesa, SOLO modo oscuro, letra
   Schibsted Grotesk. Colores, letra y tamaños salen del archivo único
   web/assets/marca/fixtu-tokens.css (no se edita desde acá; si hace
   falta un valor nuevo, se agrega en esta hoja). No hay modo claro,
   selector de tema ni otras paletas o letras.
   Detalle de cada decisión: docs/marca/PORTADA_GAMER_PLAN.md (plan v4).
   Cortes: 600, 900 y 1024 px.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Valores propios de la portada (no están en el archivo único; ver SISTEMA_DE_DISENO.md, "Valores propios de la portada"). */
:root {
  --t-portada-grande: clamp(2.5rem, 1.73rem + 3.4vw, 4.5rem);  /* 40 -> 72  la pregunta de la portada, la más grande de la página */
  --t-precio-portada: clamp(2.75rem, 2.2rem + 2.4vw, 4rem);    /* 44 -> 64  el precio, por debajo de la pregunta */
  --halo-marca: 14%;                                             /* luz Frambuesa detrás de la portada */
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords; /* deja animar la apertura de las preguntas y de las respuestas de la demo */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: var(--t-texto);
  line-height: var(--al-texto);
  font-weight: var(--peso-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--letra-titulos);
  font-weight: var(--peso-fuerte);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
strong { font-weight: var(--peso-fuerte); }
[hidden] { display: none !important; }

a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
/* Los fondos de "mouse encima" van dentro de @media (hover: hover): en pantallas táctiles quedarían pegados al tocar. */

:focus-visible {
  outline: var(--foco-ancho) solid var(--foco);
  outline-offset: var(--foco-separacion);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono {
  width: var(--icono);
  height: var(--icono);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.envoltura {
  width: 100%;
  max-width: calc(var(--ancho-max) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* ---------- Barra de arriba ---------- */
.barra { height: var(--alto-menu); }
@media (min-width: 600px) {
  html { scroll-padding-top: var(--alto-menu); } /* ni los saltos del menú ni el foco quedan tapados por la barra */
  .barra {
    position: sticky;
    top: 0;
    z-index: 35;
    transition: background-color var(--dur-2) var(--curva);
  }
  /* El fondo aparece recién al bajar (portada.js pone .con-fondo): arriba de todo no corta la luz de la portada. */
  .barra.con-fondo {
    background: color-mix(in srgb, var(--fondo) 85%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.barra-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: 100%;
}
.marca { display: inline-flex; align-items: center; min-height: var(--toque-min); }
.marca img { display: block; }
.menu { display: flex; align-items: center; gap: var(--e-1); margin-right: calc(-1 * var(--e-3)); }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--e-3);
  border-radius: var(--r-2);
  color: var(--texto);
  font-size: var(--t-chico);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--curva);
}
@media (hover: hover) { .menu a:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); } }
@media (max-width: 599px) {
  /* En celular el menú queda solo con Cómo funciona y Juegos (Precio y Preguntas se llegan bajando la página). */
  .menu .solo-ancho { display: none; }
  .menu a { padding: 0 10px; }
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--alto-boton);
  padding: 0 var(--e-5);
  border: 0;
  border-radius: var(--r-2);
  font-size: var(--t-boton);
  font-weight: var(--peso-fuerte);
  line-height: var(--al-control);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
.boton-principal { background: var(--acento); color: var(--sobre-acento); }
@media (hover: hover) {
  .boton-principal:hover { background: var(--acento-hover); transform: translateY(-2px); }
}
.boton-principal:active { transform: translateY(1px); }
.boton-secundario { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde); }
@media (hover: hover) { .boton-secundario:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); } }
.boton-ancho { width: 100%; min-height: var(--alto-boton-celular); }
.boton[disabled] { cursor: progress; opacity: 0.8; }

.enlace-boton {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding: 0 var(--e-1);
  border: 0;
  background: none;
  color: var(--enlace);
  font-size: var(--t-chico);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.enlace-boton:hover { text-decoration-thickness: 2px; }

/* =====================================================================
   1. PORTADA
   ===================================================================== */
.portada {
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* el halo es más ancho que la pantalla en celular: sin esto habría corrimiento lateral */
  display: flex;
  align-items: flex-start;
  padding-top: max(var(--e-portada-arriba), 8svh);
  padding-bottom: var(--e-9);
}
.portada::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  top: -96px;
  width: 100%;
  height: 820px;
  background-image:
    radial-gradient(38rem circle at 18% 12%, color-mix(in srgb, var(--acento) 10%, transparent), transparent 60%),
    radial-gradient(32rem circle at 58% 30%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 65%),
    radial-gradient(42rem circle at 88% 15%, color-mix(in srgb, var(--acento) 8%, transparent), transparent 70%),
    radial-gradient(34rem circle at 35% 85%, color-mix(in srgb, var(--acento) 7%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  transition: filter var(--dur-3) var(--curva);
}
.portada::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  top: -96px;
  width: 100%;
  height: 820px;
  -webkit-mask-image:
    radial-gradient(45rem circle at 55% 30%, #000 0%, transparent 72%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(45rem circle at 55% 30%, #000 0%, transparent 72%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  mask-composite: intersect;
  background-image:
    repeating-linear-gradient(to right, color-mix(in srgb, var(--acento) 14%, transparent) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, color-mix(in srgb, var(--acento) 14%, transparent) 0 1px, transparent 1px 48px);
  transition: filter var(--dur-3) var(--curva);
}
.portada.encendida::before,
.portada.encendida::after { filter: brightness(1.35); }
@media (min-width: 1024px) {
  .portada {
    padding-top: max(var(--e-9), 8svh);
    padding-bottom: var(--e-9);
  }
}
.portada-contenido { max-width: var(--ancho-portada); margin-inline: auto; }
@media (min-width: 600px) { .portada-contenido { text-align: center; } }

.portada-titulo {
  font-size: var(--t-portada-grande);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
/* Las dos mitades del título no se parten a la mitad: en 360 px queda "Tu PC y / tus juegos, / en pocos pasos". */
.junto { display: inline-block; }
.bajada {
  max-width: var(--ancho-bajada);
  margin-top: var(--e-3);
  color: var(--texto-suave);
  font-size: var(--t-bajada);
  line-height: var(--al-bajada);
  text-wrap: balance;
}
@media (min-width: 600px) { .bajada { margin-inline: auto; } }

/* ---------- Botón principal, garantías y ayuda de descarga (pegados: contestan antes de bajar el .exe) ---------- */
.cta-principal { margin-top: var(--e-6); }
.boton-hero { width: 100%; }
@media (min-width: 600px) { .boton-hero { width: auto; min-width: 18rem; } }

.nota-plataforma {
  max-width: var(--ancho-bajada);
  margin: var(--e-3) auto 0;
  color: var(--texto-suave);
  font-size: var(--t-chico);
  line-height: var(--al-chico);
}

.ayuda-descarga {
  max-width: var(--ancho-bajada);
  margin: var(--e-4) auto 0;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-2);
  background: var(--superficie-2);
  text-align: left;
  font-size: var(--t-chico);
  line-height: var(--al-chico);
}
.ayuda-descarga-linea + .ayuda-descarga-linea { margin-top: var(--e-2); }
.ayuda-descarga-linea.es-alerta { color: var(--aviso); }

.garantias {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-5);
  color: var(--texto-suave);
  font-size: var(--t-chico);
  line-height: var(--al-chico);
}
.garantias li { display: inline-flex; align-items: center; gap: var(--e-2); }
/* En gris: el rosa queda para lo que se puede tocar. Si fuera rosa, las garantías parecerían botones. */
.garantias .icono { width: 18px; height: 18px; color: var(--texto-suave); stroke-width: 2.25; }
@media (min-width: 600px) {
  .garantias { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-5); }
}

/* ---------- "Mostrar ejemplos" y la demo "¿Esto lo hacemos?" ----------
   El botón es un enlace secundario (nunca un segundo botón principal). La demo nace cerrada (hidden) y solo la abre la persona. */
.demo-toggle { margin-top: var(--e-3); }
@media (max-width: 599px) { .demo-toggle { margin-left: calc(-1 * var(--e-1)); } } /* el texto queda alineado con las garantías */
.demo { margin-top: var(--e-5); text-align: left; }
.demo-etiqueta {
  margin-bottom: var(--e-3);
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-fuerte);
  line-height: var(--al-subtitulo);
}
@media (min-width: 600px) { .demo-etiqueta { text-align: center; } }

.caja-envoltura { position: relative; }
.caja {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  height: var(--alto-caja);
  padding: 0 var(--e-4);
  background: var(--elevado-1);
  border: var(--borde-ancho) solid var(--borde);
  border-radius: var(--r-3);
  box-shadow: var(--sombra-1);
  cursor: text;
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}
@media (hover: hover) { .caja:hover { border-color: color-mix(in srgb, var(--borde) 55%, var(--texto)); } }
.caja:focus-within {
  border-color: var(--foco);
  box-shadow: inset 0 0 0 1px var(--foco), var(--anillo-caja);
}
.caja-lupa { color: var(--texto-suave); }
.caja input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font-size: var(--t-caja);
  line-height: var(--al-control);
  text-overflow: ellipsis;
}
.caja input::placeholder {
  color: var(--texto-suave);
  opacity: 1;
  transition: opacity var(--dur-2) var(--curva);
}
.caja input.ejemplo-fuera::placeholder { opacity: 0; }
.boton-en-caja { display: none; }
.boton-celular { display: flex; width: 100%; min-height: var(--alto-boton-celular); margin-top: var(--e-4); }

@media (min-width: 600px) {
  .caja {
    height: var(--alto-caja-con-boton);
    padding: 0 var(--aire-caja) 0 var(--e-5);
  }
  .boton-en-caja { display: inline-flex; }
  .boton-celular { display: none; }
}

/* ---------- Lista de sugerencias, pegada a la caja ---------- */
.sug {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  padding: 6px;
  background: var(--elevado-2);
  border: 1px solid var(--divisor);
  border-radius: var(--r-3);
  box-shadow: var(--sombra-2);
  text-align: left;
  animation: sug-abrir var(--dur-3) var(--curva);
}
@keyframes sug-abrir { from { opacity: 0; transform: translateY(-4px); } }
.sug-titulo, .sug-nota {
  padding: 8px 12px 6px;
  color: var(--texto-suave);
  font-size: var(--t-chico);
  line-height: var(--al-chico);
}
.sug-titulo { font-weight: var(--peso-medio); }
.sug-fila {
  position: relative;
  display: grid;
  grid-template-columns: var(--icono) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--alto-fila);
  padding: 6px 12px;
  border-radius: var(--r-1);
  cursor: pointer;
}
@media (hover: hover) { .sug-fila:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); } }
.sug-fila[aria-selected="true"] {
  background: color-mix(in srgb, var(--texto) 8%, transparent);
  box-shadow: inset 0 0 0 var(--foco-ancho) var(--foco);
}
.sug-fila .icono { color: var(--texto-suave); }
.sug-texto { font-size: var(--t-texto); line-height: 1.35; overflow-wrap: anywhere; }
.sug-texto strong { font-weight: var(--peso-fuerte); }
.sug-cat { color: var(--texto-suave); font-size: var(--t-chico); white-space: nowrap; }
.sug-fila.libre { margin-top: 7px; }
.sug-fila.libre::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 12px;
  right: 12px;
  border-top: 1px solid var(--divisor);
}
.sug-fila.libre:first-child { margin-top: 0; }
.sug-fila.libre:first-child::before { display: none; }
@media (max-width: 599px) {
  .sug-fila { min-height: var(--alto-fila-celular); }
}

/* ---------- Aviso debajo de la caja (validaciones cortas: "escribí un poco más", etc.) ---------- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding: 10px 12px;
  border-radius: var(--r-2);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: var(--t-chico);
  line-height: var(--al-chico);
}
.aviso-icono { margin-top: 1px; color: var(--texto-suave); }
.aviso.es-atencion { background: var(--aviso-fondo); }
.aviso.es-atencion .aviso-icono { color: var(--aviso); }

/* ---------- Fichas: las de siempre y las "a medida", en un solo bloque debajo de la caja ----------
   Acá no arman ningún pedido: son ejemplos para probar la demo. Sin elegir: borde fino. Tocada (abierta,
   con su respuesta a la vista): borde y fondo suaves (.ficha-abierta), sin tilde ni ícono (así no se confunde
   con "elegido" del futuro programa, que sí lleva relleno y tilde: ver SISTEMA_DE_DISENO.md). */
.fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
@media (min-width: 600px) { .fichas { justify-content: center; } }
@media (min-width: 1024px) { .fichas { margin-inline: calc(-1 * var(--e-5)); } }
.ficha {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  height: var(--alto-chip);
  padding: 0 var(--e-4);
  border: var(--borde-ancho) solid var(--borde);
  border-radius: var(--r-pildora);
  background: transparent;
  color: var(--texto);
  font-size: var(--t-chip);
  font-weight: var(--peso-medio);
  line-height: var(--al-control);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva), transform var(--dur-1) var(--curva);
}
.ficha::after { content: ""; position: absolute; inset: -3px -1px; } /* zona para tocar de 44 px */
.ficha:active { transform: scale(0.97); }
@media (hover: hover) {
  .ficha:not(.ficha-abierta):hover {
    background: color-mix(in srgb, var(--texto) 6%, transparent);
    border-color: color-mix(in srgb, var(--borde) 55%, var(--texto));
  }
}
.ficha.ficha-abierta {
  border-color: var(--elegido-borde);
  background: var(--elegido-fondo);
}

/* Las 5 de "Ver más" esperan a que se abran; en celular también "Pantallazo azul".
   Una ficha abierta queda a la vista (.quedar, lo pone portada.js) aunque "Ver más" esté cerrado. */
.fichas:not(.abiertas) .ficha-extra:not(.quedar) { display: none; }
@media (max-width: 599px) {
  .fichas:not(.abiertas) .ficha[data-fam="errores"]:not(.quedar) { display: none; }
}
.ver-mas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--toque-min);
  padding: 0 var(--e-1);
  border: 0;
  background: none;
  color: var(--enlace);
  font-size: var(--t-chip);
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.ver-mas:hover { text-decoration-thickness: 2px; }
.ver-mas .icono { width: 18px; height: 18px; transition: transform var(--dur-2) var(--curva); }
.ver-mas[aria-expanded="true"] .icono { transform: rotate(180deg); }

/* Segunda fila, "A medida:" (el diferencial), pegada a la de siempre.
   Escritorio: el rótulo y las fichas en renglones centrados (.riel y .fichas-medida no arman caja propia).
   Celular: el rótulo arriba y una sola fila que se desliza de costado, de borde a borde de la pantalla. */
.fila-medida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.riel, .fichas-medida { display: contents; }
.rotulo-medida {
  flex: none;
  color: var(--texto-suave);
  font-size: var(--t-chico);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.deslizar { display: none; }
@media (min-width: 1024px) { .fila-medida { margin-inline: calc(-1 * var(--e-5)); } }
@media (max-width: 599px) {
  .fila-medida { display: block; }
  .rotulo-medida { display: block; margin-bottom: var(--e-2); }
  .riel { display: block; position: relative; margin-inline: calc(-1 * var(--margen)); }
  .fichas-medida {
    display: flex;
    gap: var(--e-3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-block: -4px;
    padding: 4px var(--margen);
    scroll-padding-inline: var(--margen) 3.5rem;
  }
  .fichas-medida::-webkit-scrollbar { display: none; }
  .riel.hay-despues .fichas-medida {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
    mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
  }
  .riel.hay-antes .fichas-medida {
    -webkit-mask-image: linear-gradient(to right, transparent 0.5rem, #000 2.5rem);
    mask-image: linear-gradient(to right, transparent 0.5rem, #000 2.5rem);
  }
  .riel.hay-antes.hay-despues .fichas-medida {
    -webkit-mask-image: linear-gradient(to right, transparent 0.5rem, #000 2.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
    mask-image: linear-gradient(to right, transparent 0.5rem, #000 2.5rem, #000 calc(100% - 4.5rem), transparent calc(100% - 0.5rem));
  }
  .riel.hay-despues .deslizar { display: grid; }
  .deslizar {
    position: absolute;
    top: 50%;
    right: var(--e-2);
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--r-pildora);
    background: var(--superficie-2);
    color: var(--texto);
    cursor: pointer;
    transform: translateY(-50%);
  }
  .deslizar::after { content: ""; position: absolute; inset: -6px; }
  .deslizar .icono { width: 18px; height: 18px; stroke-width: 2; transform: rotate(-90deg); }
}

/* ---------- Respuestas de la demo (panel compartido: una por ficha abierta, más la de la caja) ---------- */
.respuestas-demo:not(:empty) { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.respuesta-demo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-2);
  background: var(--superficie-2);
  font-size: var(--t-texto);
  line-height: var(--al-texto);
  animation: aparecer var(--dur-2) var(--curva);
}
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } }
.respuesta-demo .icono { margin-top: 2px; }
.respuesta-demo.es-ok .icono, .respuesta-demo.es-medida .icono, .respuesta-demo.es-informa .icono { color: var(--acento-linea); }
.respuesta-demo.es-bloqueado { background: var(--aviso-fondo); }
.respuesta-demo.es-bloqueado .icono { color: var(--aviso); }

.demo-disclaimer {
  margin-top: var(--e-4);
  color: var(--texto-suave);
  font-size: var(--t-chico);
  line-height: var(--al-chico);
}

/* =====================================================================
   SECCIONES
   Un solo fondo para toda la página: las secciones se separan con espacio, no con franjas
   (Linear, Raycast). El bloque de precio es la única caja destacada.
   ===================================================================== */
.seccion { padding-block: calc(var(--e-seccion) / 2); }
.seccion h2 {
  font-size: var(--t-seccion);
  line-height: var(--al-seccion);
  letter-spacing: var(--tr-seccion);
}
.seccion-linea {
  max-width: var(--ancho-texto);
  margin-top: var(--e-3);
  color: var(--texto-suave);
  font-size: var(--t-bajada);
  line-height: var(--al-bajada);
}

/* ---------- 2. Primero mirás, después decidís: los 3 pasos ---------- */
.pasos {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
@media (min-width: 768px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }
.paso {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  font-size: var(--t-bajada);
  font-weight: var(--peso-medio);
  line-height: var(--al-subtitulo);
}
.paso-numero {
  flex: none;
  color: var(--acento-linea);
  font-size: var(--t-subtitulo);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.carrusel { position: relative; margin-top: var(--e-6); }
.carrusel-pista {
  display: flex; gap: var(--e-6);
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  cursor: grab;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista.arrastrando { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carrusel-slide {
  scroll-snap-align: center; flex: none; width: 100%;
  display: grid; grid-template-columns: 3fr 2fr; gap: var(--e-6); align-items: center;
}
.carrusel-slide h3 { font-size: var(--t-subtitulo); margin: 0; }
.captura-programa {
  border: 1px solid var(--divisor); box-shadow: var(--sombra-2); cursor: zoom-in;
}
.captura-programa img { width: 100%; display: block; }
.carrusel-controles { display: flex; align-items: center; justify-content: center; gap: var(--e-4); margin-top: var(--e-5); }
.carrusel-flecha {
  display: flex; align-items: center; justify-content: center;
  width: var(--alto-boton); height: var(--alto-boton); border-radius: 50%;
  background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto); cursor: pointer;
}
.carrusel-flecha:hover { border-color: var(--texto-suave); }
.carrusel-flecha:disabled { opacity: .35; cursor: default; }
/* Reusa el chevron (apunta hacia abajo) rotado, en vez de sumar dos íconos nuevos al sprite. */
.carrusel-flecha[data-carrusel-prev] .icono { transform: rotate(90deg); }
.carrusel-flecha[data-carrusel-next] .icono { transform: rotate(-90deg); }
.carrusel-contador { font-size: var(--t-chico); color: var(--texto-suave); min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }
.visor-captura {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center; gap: var(--e-4);
  background: rgb(0 0 0 / 0.82); padding: var(--e-6); cursor: zoom-out;
}
.visor-captura.abierto { display: flex; }
.visor-captura img { max-width: min(100%, 60rem); max-height: 90vh; border: 1px solid var(--divisor); box-shadow: var(--sombra-2); cursor: zoom-out; }
/* Flechas del visor: mismo botón circular del carrusel, pero por encima de un fondo bien oscuro. */
.visor-captura .carrusel-flecha { flex: none; cursor: pointer; }
@media (max-width: 760px), (max-height: 500px) {
  .visor-captura.abierto { flex-wrap: wrap; justify-content: center; padding: var(--e-4); gap: var(--e-3); }
  .visor-captura img { flex: 1 1 100%; order: -1; max-height: 65vh; }
  .visor-captura .carrusel-flecha { width: calc(var(--alto-boton) * 0.8); height: calc(var(--alto-boton) * 0.8); }
}
@media (max-width: 760px) {
  .carrusel-slide { grid-template-columns: 1fr; }
  .carrusel-slide .captura-programa { order: -1; }
}

.grupos-logos {
  --espacio-grupos: clamp(2.5rem, 4vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(160px, .65fr) minmax(190px, .8fr);
  gap: var(--espacio-grupos);
  align-items: start;
  width: min(100%, 68.75rem);
  margin-inline: auto;
  margin-top: var(--e-5);
}
@media (max-width: 760px) {
  .grupos-logos { grid-template-columns: 1fr 1fr; }
  .grupo-logos:first-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .grupos-logos { grid-template-columns: 1fr; gap: 0; }
  .grupo-logos:first-child { grid-column: auto; }
}
.grupo-logos { position: relative; display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.grupo-logos:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--espacio-grupos) / -2);
  top: .35rem;
  bottom: .35rem;
  width: 1px;
  background: var(--divisor);
}
@media (max-width: 760px) {
  /* Acá "Juegos" ocupa su propia fila entera (arriba): a su derecha no hay nada, así que no lleva
     línea. Hardware y Plataformas quedan lado a lado en la fila de abajo: esa sí se mantiene. */
  .grupo-logos:nth-child(2)::before { content: none; }
}
@media (max-width: 599px) {
  /* Los 3 grupos quedan apilados: la línea pasa de vertical a horizontal, arriba de cada uno. */
  .grupo-logos:not(:first-child)::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
  }
  .grupo-logos:not(:first-child) { padding-top: var(--e-5); margin-top: var(--e-2); }
}
.cabecera-grupo { display: inline-flex; align-items: center; gap: var(--e-2); }
.cabecera-grupo .icono { width: 1.05rem; height: 1.05rem; color: var(--acento); opacity: .85; }
.grupo-logos .etiqueta-grupo { font-size: var(--t-legal); color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.grilla-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-5);
  padding: 0;
  margin: 0;
  list-style: none;
}
.etiqueta-resto { color: var(--texto-suave); font-size: var(--t-chico); line-height: var(--al-chico); margin-left: var(--e-2); }
.logo-ficha {
  height: 1.75rem;
  width: auto;
  display: block;
  opacity: .95;
}
@media (max-width: 599px) { .logo-ficha { height: 1.5rem; } }
.logo-ficha[src*="amd.svg"],
.logo-ficha[src*="apex.svg"],
.logo-ficha[src*="cs2.svg"],
.logo-ficha[src*="call_of_duty.svg"],
.logo-ficha[src*="rocket_league.svg"],
.logo-ficha[src*="nvidia.svg"] {
  filter: grayscale(1) brightness(0) invert(.86);
}

/* ---------- 4. Precio ---------- */
.precio {
  display: grid;
  align-items: center;
  gap: var(--e-6);
  padding: var(--e-6) var(--e-5);
  border-radius: var(--r-4);
  background: var(--superficie-2);
}
@media (min-width: 768px) {
  .precio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-7); padding: var(--e-8); }
}
.seccion .precio-cifra {
  font-size: var(--t-precio-portada);
  font-weight: var(--peso-fuerte);
  line-height: var(--al-precio);
  letter-spacing: var(--tr-precio);
}
.precio-nota { margin-top: var(--e-3); color: var(--texto-suave); }
.precio-texto { max-width: var(--ancho-texto); }
.precio-texto > p { color: var(--texto); }
.precio-accion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4); margin-top: var(--e-6); }
.precio-accion .precio-pago { color: var(--texto-suave); font-size: var(--t-chico); }
@media (max-width: 599px) {
  .precio-accion .boton { width: 100%; min-height: var(--alto-boton-celular); }
}

/* ---------- 5. Preguntas ---------- */
.preguntas { max-width: var(--ancho-portada); margin-top: var(--e-6); border-top: 1px solid var(--divisor); }
@media (min-width: 1024px) {
  #preguntas .envoltura { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-7); align-items: start; }
  #preguntas .preguntas { margin-top: 0; max-width: none; }
}
.preguntas details { border-bottom: 1px solid var(--divisor); }
.preguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 3.5rem;
  padding: var(--e-3) 0;
  font-weight: var(--peso-fuerte);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary:focus-visible { outline-offset: 0; border-radius: var(--r-1); }
.preguntas summary .icono { color: var(--texto-suave); transition: transform var(--dur-3) var(--curva); }
.preguntas details[open] summary .icono { transform: rotate(180deg); }
.preguntas details p { max-width: var(--ancho-texto); padding-bottom: var(--e-5); }
.preguntas details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--dur-3) var(--curva), content-visibility var(--dur-3) allow-discrete;
}
.preguntas details[open]::details-content { block-size: auto; }

/* ---------- Pie ---------- */
.pie {
  padding-block: var(--e-7);
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--t-legal);
  line-height: 1.45;
}
.pie-fila { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-3); }
.pie-contacto { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.pie-contacto:hover { text-decoration: underline; }

/* =====================================================================
   DIÁLOGO "MANDATE EL LINK A LA COMPU"
   Nunca aparece en Windows (ahí la descarga es directa, sin ningún paso intermedio).
   ===================================================================== */
.dialogo {
  width: min(26rem, calc(100% - 2 * var(--e-4)));
  max-height: calc(100dvh - 2 * var(--e-4));
  padding: 0;
  border: 1px solid var(--divisor);
  border-radius: var(--r-4);
  background: var(--elevado-2);
  color: var(--texto);
  box-shadow: var(--sombra-2);
}
.dialogo::backdrop { background: rgb(0 0 0 / 0.72); }
.dialogo-dentro { padding: var(--e-5); }
@media (min-width: 600px) { .dialogo-dentro { padding: var(--e-6); } }
.dialogo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }
.dialogo-cabeza h2 { font-size: var(--t-subtitulo); line-height: var(--al-subtitulo); }
.dialogo-cerrar {
  display: grid;
  place-items: center;
  width: var(--toque-min);
  height: var(--toque-min);
  margin-right: calc(-1 * var(--e-2));
  border: 0;
  border-radius: var(--r-pildora);
  background: none;
  color: var(--texto);
  cursor: pointer;
}
@media (hover: hover) { .dialogo-cerrar:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); } }
.dialogo-intro { margin-top: var(--e-4); color: var(--texto-suave); line-height: var(--al-texto); }
.dialogo-botones { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.dialogo-botones .boton { justify-content: flex-start; padding-left: var(--e-4); }
.dialogo-confirmacion { min-height: 1.5em; margin-top: var(--e-3); color: var(--texto-suave); font-size: var(--t-chico); }
.dialogo-nota { margin-top: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--divisor); color: var(--texto-suave); font-size: var(--t-chico); line-height: var(--al-chico); }

/* =====================================================================
   ALTO CONTRASTE DE WINDOWS
   ===================================================================== */
@media (forced-colors: active) {
  .caja:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
  .boton { border: 1px solid ButtonText; }
  .ficha.ficha-abierta { border-color: Highlight; }
  .deslizar { border-color: ButtonText; }
  .sug-fila[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}