/* ============================================================
   simulador.css — todo lo del simulador, en su propia hoja.

   Vivía dentro de secciones.css, pero desde que el simulador
   tiene página propia (simulador.html) el índice no necesita
   descargar mil líneas de maqueta que nunca va a pintar.
   Sólo la carga simulador.html.
   ============================================================ */

/* ============================================================
   6.2 bis SIMULADOR

   Dos cosas conviven acá: los controles, que son Pixela y usan
   el sistema de diseño; y la maqueta (.mq), que NO es Pixela —
   es el sitio de otro. Por eso la maqueta no toca un solo token
   del sistema: todo lo suyo entra por las variables --mq-*, que
   escribe el JS. Si algún día la maqueta usa --coral o --violeta
   está mal: sería Pixela disfrazada de cliente.

   El coral no aparece en esta sección. El coral de la página
   significa "acá se hace clic para contratar" y aparece tres
   veces (sección 4.1). El CTA de acá abre WhatsApp, así que va
   en el verde de WhatsApp, que ya es un color prestado y
   reconocible.
   ============================================================ */

.sim {
  display: grid;
  gap: var(--e-6);
  margin-block-start: var(--e-7);
}

@media (min-width: 1024px) {
  .sim {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

/* ---------- Controles --------------------------------------- */

.sim-controles {
  display: grid;
  gap: var(--e-5);
  align-content: start;
  min-inline-size: 0;
}

.sim-grupo {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sim-rotulo {
  margin-block-end: var(--e-3);
  padding: 0;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sim-opciones {
  display: grid;
  gap: var(--e-2);
}

.sim-opciones--dos {
  grid-template-columns: 1fr 1fr;
}

.sim-opcion {
  display: block;
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--e-3) var(--e-4);
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
  color: var(--papel-tenue);
  font-family: var(--f-cuerpo);
  font-size: var(--t-chico);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease),
              background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.sim-opcion:hover {
  border-color: var(--violeta);
  color: var(--papel);
}

.sim-opcion[aria-pressed="true"] {
  background: var(--tinta-alta);
  border-color: var(--violeta);
  color: var(--papel);
}

.sim-opcion--paleta {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.sim-opcion-titulo {
  display: block;
  line-height: 1.25;
}

.sim-opcion-pista {
  display: block;
  margin-block-start: 2px;
  color: var(--papel-tenue);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.sim-muestra {
  display: flex;
  flex: none;
  gap: 4px;
}

.sim-muestra i {
  inline-size: 20px;
  block-size: 20px;
  border: 1px solid var(--tinta-borde);
  border-radius: 5px;
}

/* ---------- El color propio ---------------------------------
   Un <input type="color"> nativo: no suma un byte y abre el
   selector del sistema operativo, que la gente ya sabe usar.
   ----------------------------------------------------------- */

.sim-propio {
  margin-block-start: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
  transition: border-color var(--dur-rapida) var(--ease),
              background-color var(--dur-rapida) var(--ease);
}

.sim-propio.es-activa {
  background: var(--tinta-alta);
  border-color: var(--violeta);
}

.sim-propio-fila {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.sim-color {
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: 10px;
  cursor: pointer;
}

.sim-color::-webkit-color-swatch-wrapper { padding: 3px; }
.sim-color::-webkit-color-swatch { border: 0; border-radius: 7px; }
.sim-color::-moz-color-swatch { border: 0; border-radius: 7px; }

.sim-propio-campos {
  min-inline-size: 0;
  flex: 1;
}

.sim-propio-titulo {
  display: block;
  color: var(--papel);
  font-size: var(--t-chico);
  line-height: 1.2;
}

.sim-hex {
  inline-size: 100%;
  margin-block-start: 4px;
  padding: 6px var(--e-2);
  background: var(--tinta);
  border: 1px solid var(--tinta-borde);
  border-radius: 8px;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.sim-hex:hover,
.sim-hex:focus {
  border-color: var(--violeta);
  color: var(--papel);
}

.sim-bases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin-block-start: var(--e-3);
}

.sim-base {
  min-block-size: 44px;
  padding: var(--e-2);
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: 8px;
  color: var(--papel-tenue);
  font-family: var(--f-cuerpo);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.sim-base:hover { border-color: var(--violeta); color: var(--papel); }
.sim-base[aria-pressed="true"] { border-color: var(--violeta); color: var(--papel); }

/* El contraste real del acento sobre el fondo, con la fórmula de
   la WCAG. Es el dato que nadie mira y que arruina un botón. */
.sim-contraste {
  margin-block-start: var(--e-3);
  color: var(--papel-tenue);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.sim-contraste.es-flojo {
  color: var(--ambar, #FFB86B);
}

/* ---------- Sitio o panel -----------------------------------
   Un segmentado, no dos botones sueltos: son dos caras de la
   misma cosa y hay que leerlas juntas. Pixela puro: el que está
   activo se marca en violeta, igual que el resto de los
   controles de esta página.
   ----------------------------------------------------------- */

.sim-pestanias {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin-block-end: var(--e-4);
}

.sim-pestania {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  min-block-size: 44px;
  padding: var(--e-3) var(--e-4);
  background: transparent;
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
  color: var(--papel-tenue);
  font-family: var(--f-cuerpo);
  font-size: var(--t-chico);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease),
              background-color var(--dur-rapida) var(--ease),
              color var(--dur-rapida) var(--ease);
}

.sim-pestania svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.sim-pestania:hover {
  border-color: var(--violeta);
  color: var(--papel);
}

.sim-pestania[aria-pressed="true"] {
  background: var(--tinta-alta);
  border-color: var(--violeta);
  color: var(--papel);
}

.sim-pestania[aria-pressed="true"] svg {
  color: var(--cian);
}

.sim-pestania-pista {
  flex-basis: 100%;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--papel-tenue);
}

/* En pantallas angostas la pista de abajo sobra: el rótulo
   alcanza y las dos pestañas tienen que entrar en una línea. */
@media (max-width: 420px) {
  .sim-pestania-pista {
    display: none;
  }
}

/* La línea que cuenta qué se está mirando. La escribe el JS y
   cambia con la pestaña. */
.sim-pista {
  margin-block-start: var(--e-4);
  font-size: var(--t-chico);
  line-height: 1.5;
  color: var(--papel-tenue);
}

/* ---------- La ventana --------------------------------------- */

.sim-preview {
  min-inline-size: 0;
}

.sim-ventana {
  overflow: hidden;
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borde);
  border-radius: var(--radio-tarjeta);
}

.sim-navegador {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-block-end: 1px solid var(--tinta-borde);
}

.sim-puntos {
  display: flex;
  flex: none;
  gap: 6px;
}

.sim-puntos i {
  inline-size: 10px;
  block-size: 10px;
  background: var(--tinta-borde);
  border-radius: 50%;
}

.sim-url {
  flex: 1;
  min-inline-size: 0;
  padding: 6px var(--e-3);
  overflow: hidden;
  background: var(--tinta);
  border: 1px solid var(--tinta-borde);
  border-radius: 6px;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sim-ancho {
  flex: none;
  color: var(--papel-tenue);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
}

@media (max-width: 620px) {
  .sim-ancho { display: none; }
}

/* El marco recorta; la altura la escribe el JS, porque un
   transform no ocupa lugar en el layout. */
.sim-marco {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
}

.sim-lienzo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  transform-origin: top left;
}

.sim-lienzo--movil {
  overflow: hidden;
  border: 6px solid #05060B;
  border-radius: 30px;
  box-shadow: 0 18px 60px rgb(0 0 0 / 0.5);
}

.sim-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-block-start: var(--e-4);
}

.sim-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-block-size: 48px;
  padding: var(--e-3) var(--e-5);
  background: #25D366;
  border-radius: var(--radio-pildora);
  color: var(--papel);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--ease);
}

.sim-cta:hover {
  background: #1FB855;
  color: var(--papel);
}

.sim-cta svg {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

.sim-nota {
  color: var(--papel-tenue);
  font-size: var(--t-chico);
}

/* ---------- "Un punto de partida, no un molde" --------------- */

.sim-medida {
  margin-block-start: var(--e-7);
  padding-block-start: var(--e-5);
  border-block-start: 1px solid var(--tinta-borde);
}

.sim-medida-grilla {
  display: grid;
  gap: var(--e-5);
  margin-block-start: var(--e-5);
}

@media (min-width: 700px) {
  .sim-medida-grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .sim-medida-grilla { grid-template-columns: repeat(4, 1fr); }
}

.sim-medida-item {
  padding-block-start: var(--e-3);
  border-block-start: 2px solid var(--violeta);
}

.sim-medida-item:nth-child(2) { border-block-start-color: var(--cian); }
.sim-medida-item:nth-child(3) { border-block-start-color: var(--coral); }

.sim-medida-titulo {
  color: var(--papel);
  font-size: var(--t-cuerpo);
  font-weight: 600;
  line-height: 1.3;
}

.sim-medida-item p {
  margin-block-start: var(--e-2);
  color: var(--papel-tenue);
  font-size: var(--t-chico);
}

/* ============================================================
   LA MAQUETA (.mq) — el sitio del cliente, no el nuestro.
   Todo entra por --mq-*. Nada de acá usa el sistema de Pixela.
   ============================================================ */

.mq {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background: var(--mq-fondo);
  color: var(--mq-texto);
  font-family: var(--mq-cuerpo);
  line-height: 1.5;
}

.mq p { margin: 0; }

/* base.css pinta todo <b> y <strong> en --papel, que es un color
   de Pixela. Adentro de la maqueta eso no va: sobre una paleta
   oscura pasaba desapercibido, pero sobre una clara los nombres
   quedaban lavados. La maqueta hereda su propio color y listo. */
.mq b,
.mq strong {
  color: inherit;
}

/* ---------- La foto que no existe ---------------------------
   Sin fotos del cliente, un placeholder tiene que parecer una
   foto y no un gráfico: manchas difusas, ningún borde duro y
   una viñeta que hunde los costados. Cada modificador mueve las
   manchas para que dos seguidas no se vean iguales.
   ----------------------------------------------------------- */

.mq-foto {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  background-image:
    radial-gradient(58% 62% at var(--fa), var(--mq-foto-a), transparent 68%),
    radial-gradient(66% 70% at var(--fb), var(--mq-foto-b), transparent 70%),
    radial-gradient(46% 52% at var(--fc), var(--mq-foto-c), transparent 66%),
    linear-gradient(158deg, var(--mq-superficie), var(--mq-fondo));
}

.mq-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 118% at 50% 38%, transparent 42%, rgb(0 0 0 / 0.34));
}

.mq-foto--velo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(6 7 12 / var(--mq-velo));
}

.mq-foto--a { --fa: 22% 28%; --fb: 78% 72%; --fc: 62% 12%; }
.mq-foto--b { --fa: 70% 30%; --fb: 25% 75%; --fc: 45% 18%; }
.mq-foto--c { --fa: 35% 70%; --fb: 80% 28%; --fc: 15% 25%; }
.mq-foto--d { --fa: 60% 62%; --fb: 18% 32%; --fc: 85% 15%; }

.mq-foto--fondo {
  position: absolute;
  inset: 0;
}

/* ---------- Piezas compartidas ------------------------------- */

.mq-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.mq-nav {
  display: flex;
  gap: 24px;
  color: var(--mq-tenue);
  font-size: 14px;
}

.mq-logo {
  margin-inline-end: auto;
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 24px;
  letter-spacing: var(--mq-tracking);
  color: var(--mq-acento);
}

.mq-logo--cursiva { font-style: italic; }

.mq-burger {
  display: none;
  flex: none;
  gap: 4px;
  flex-direction: column;
}

.mq-burger i {
  inline-size: 20px;
  block-size: 2px;
  background: currentColor;
}

.mq-pill {
  flex: none;
  padding: 10px 20px;
  background: var(--mq-acento);
  border-radius: 999px;
  color: var(--mq-sobre-acento);
  font-size: 13px;
  font-weight: 700;
}

.mq-pill--recta { border-radius: 4px; letter-spacing: 0.08em; }

.mq-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--mq-acento);
  border-radius: 999px;
  color: var(--mq-sobre-acento);
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 16px;
}

.mq-cta--recta { border-radius: 6px; font-family: var(--mq-cuerpo); font-weight: 600; }

.mq-icono-fecha {
  inline-size: 14px;
  block-size: 14px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

/* ---------- 1 · Tienda --------------------------------------- */

.mq-cinta {
  display: flex;
  align-items: center;
  gap: 46px;
  flex: none;
  padding: 9px 24px;
  overflow: hidden;
  background: var(--mq-panel);
  color: var(--mq-panel-texto);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mq--tienda .mq-cabecera {
  padding: 18px 32px;
  background: var(--mq-superficie);
}

.mq-buscador {
  flex: 0 0 250px;
  padding: 9px 14px;
  border: 1px solid var(--mq-borde);
  border-radius: 6px;
  color: var(--mq-tenue);
  font-size: 13px;
}

.mq-marca {
  flex: 1;
  text-align: center;
}

.mq-marca-nombre {
  display: block;
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 26px;
  letter-spacing: var(--mq-tracking);
  line-height: 1;
}

.mq-marca-volanta {
  display: block;
  margin-block-start: 3px;
  color: var(--mq-tenue);
  font-family: var(--mq-volanta);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.mq-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex: 0 0 250px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.mq-carrito {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.mq-bolsa {
  inline-size: 15px;
  block-size: 13px;
  border: 1.5px solid currentColor;
  border-radius: 2px 2px 4px 4px;
}

.mq-nav--tienda {
  padding: 0 32px 14px;
  background: var(--mq-superficie);
  border-block-end: 1px solid var(--mq-borde);
  color: var(--mq-texto);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

.mq-grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  flex: 1;
  min-block-size: 0;
  padding: 18px 24px 22px;
}

.mq-producto {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

.mq-producto .mq-foto {
  flex: 1;
  min-block-size: 0;
  border-radius: 4px;
}

.mq-prod-nombre {
  margin-block-start: 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.mq-prod-precio {
  margin-block-start: 5px;
  font-size: 16px;
  font-weight: 600;
}

.mq-prod-cuotas {
  margin-block-start: 3px;
  color: var(--mq-tenue);
  font-size: 11.5px;
}

.mq-prod-cuotas b { color: var(--mq-acento); font-weight: 600; }

/* ---------- 2 · Gimnasio ------------------------------------- */

.mq--gimnasio .mq-cabecera {
  padding: 14px 30px;
  background: var(--mq-superficie);
}

.mq--gimnasio .mq-logo { font-size: 26px; letter-spacing: 0.02em; }
.mq--gimnasio .mq-nav { color: var(--mq-texto); }

.mq-hero {
  position: relative;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
  background: var(--mq-panel);
}

.mq-hero-cuerpo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 36px 40px;
}

.mq--gimnasio .mq-titular {
  max-inline-size: 78%;
  color: var(--mq-panel-texto);
  font-family: var(--mq-display);
  font-weight: 800;
  font-size: 58px;
  line-height: 1;
  letter-spacing: var(--mq-tracking);
  text-transform: uppercase;
}

.mq--gimnasio .mq-titular span { color: var(--mq-acento); }

.mq-burbujas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block-start: 26px;
}

.mq-burbujas span {
  padding: 10px 18px;
  background: var(--mq-panel-texto);
  border-radius: 999px;
  color: #14100E;
  font-size: 14px;
  font-weight: 600;
}

.mq-burbujas span:nth-child(2) { margin-block-start: 16px; }

.mq-plan {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-start: auto;
}

.mq-plan-nombre,
.mq-plan-precio {
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--mq-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: var(--mq-tracking);
}

.mq-plan-nombre { background: #0C0C0E; color: var(--mq-acento); }
.mq-plan-precio { background: var(--mq-acento); color: var(--mq-sobre-acento); }

.mq-franja {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 16px 30px;
  background: var(--mq-acento);
}

.mq-chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  flex: 1;
}

.mq-chips span {
  padding: 12px 10px;
  background: rgb(12 12 14 / 0.82);
  border-radius: 8px;
  color: var(--mq-panel-texto);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.mq-cta-fuerte {
  flex: none;
  padding: 16px 30px;
  background: #D62828;
  border-radius: 8px;
  color: #FFF6F2;
  font-family: var(--mq-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: var(--mq-tracking);
}

/* ---------- 3 · Restaurante ---------------------------------- */

.mq--resto .mq-cabecera {
  padding: 14px 34px;
  background: var(--mq-panel);
  color: var(--mq-panel-texto);
}

.mq--resto .mq-nav { color: inherit; font-family: var(--mq-display); font-size: 15px; }

.mq-nav--separada span + span {
  padding-inline-start: 20px;
  border-inline-start: 1px solid rgb(255 255 255 / 0.25);
}

.mq-banda {
  position: relative;
  flex: none;
  block-size: 230px;
  overflow: hidden;
}

.mq-frase {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: var(--mq-sobre-foto);
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 30px;
  letter-spacing: var(--mq-tracking);
  text-align: center;
}

.mq-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
  flex: 1;
  min-block-size: 0;
  padding: 38px 46px;
}

.mq-titulo {
  color: var(--mq-acento);
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: var(--mq-tracking);
}

.mq-parrafo {
  margin-block-start: 16px !important;
  color: var(--mq-tenue);
  font-size: 16px;
  line-height: 1.65;
}

.mq-dos-texto .mq-cta { margin-block-start: 28px; }

.mq-figura .mq-foto { block-size: 240px; border-radius: 2px; }

.mq-puntos {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-block-start: 14px;
}

.mq-puntos i {
  inline-size: 7px;
  block-size: 7px;
  background: var(--mq-borde);
  border-radius: 50%;
}

.mq-puntos i.es { background: var(--mq-acento); }

.mq-pie {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 14px 46px;
  border-block-start: 1px solid var(--mq-borde);
  color: var(--mq-tenue);
  font-size: 13px;
}

/* ---------- 4 · Estudio -------------------------------------- */

.mq--estudio {
  position: relative;
  display: block;
  background: var(--mq-panel);
}

.mq--estudio .mq-cabecera {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 2;
  padding: 18px 34px;
  color: var(--mq-panel-texto);
}

.mq--estudio .mq-logo {
  color: inherit;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mq--estudio .mq-nav {
  color: inherit;
  font-size: 12.5px;
  letter-spacing: 0.08em;
}

.mq-centro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
  color: var(--mq-panel-texto);
}

.mq--estudio .mq-titular {
  font-family: var(--mq-display);
  font-weight: var(--mq-peso);
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: var(--mq-tracking);
}

.mq-subtitulo {
  margin-block-start: 6px !important;
  font-family: var(--mq-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: var(--mq-tracking);
}

.mq-bajada {
  margin-block-start: 18px !important;
  color: var(--mq-panel-tenue);
  font-size: 17px;
}

.mq-centro .mq-cta {
  align-self: flex-start;
  margin-block-start: 28px;
}

/* ---------- 5 · El panel de administración -------------------

   El back office del cliente. Se dibuja a 1180 px como el resto
   de las maquetas y usa las mismas --mq-*: es su panel, con sus
   colores, no una pantalla genérica de Pixela.

   El lateral va sobre --mq-panel, que ya existe y que el JS
   calcula oscuro tanto para paletas claras como oscuras. Es la
   convención de cualquier admin y además separa de un vistazo
   la navegación del contenido.
   ----------------------------------------------------------- */

.mq--panel {
  background: var(--mq-fondo);
}

.mq-adm {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  flex: 1;
  min-block-size: 0;
}

/* ---- Lateral ---- */

.mq-adm-lateral {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 18px;
  background: var(--mq-panel);
  color: var(--mq-panel-texto);
  border-inline-end: 1px solid rgb(255 255 255 / 0.07);
}

.mq-adm-marca,
.mq-adm-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mq-adm-usuario {
  margin-block-start: auto;
  padding-block-start: 16px;
  border-block-start: 1px solid rgb(255 255 255 / 0.09);
}

.mq-adm-cubo {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  border-radius: 9px;
  background: var(--mq-acento);
  color: var(--mq-sobre-acento);
  font-family: var(--mq-display);
  font-size: 17px;
  font-weight: var(--mq-peso);
  line-height: 1;
}

.mq-adm-avatar {
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--mq-acento2), var(--mq-acento));
}

.mq-adm-marca-texto {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  gap: 2px;
}

.mq-adm-marca-texto b {
  font-family: var(--mq-display);
  font-size: 14px;
  font-weight: var(--mq-peso);
  letter-spacing: var(--mq-tracking);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mq-adm-marca-texto small {
  font-size: 11px;
  line-height: 1.2;
  color: var(--mq-panel-tenue);
}

.mq-adm-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mq-adm-menu span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--mq-panel-tenue);
}

/* El cuadradito que hace de ícono. No es un pictograma: a este
   tamaño un ícono de librería sería ruido. */
.mq-adm-menu span::before {
  content: "";
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  opacity: 0.55;
}

.mq-adm-menu .es-activo {
  background: rgb(255 255 255 / 0.09);
  color: var(--mq-panel-texto);
  font-weight: 600;
}

.mq-adm-menu .es-activo::before {
  background: var(--mq-acento);
  border-color: var(--mq-acento);
  opacity: 1;
}

/* ---- Cuerpo ---- */

.mq-adm-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-inline-size: 0;
  padding: 22px 26px;
}

.mq-adm-barra {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mq-adm-titulo {
  flex: none;
  font-family: var(--mq-display);
  font-size: 24px;
  font-weight: var(--mq-peso);
  letter-spacing: var(--mq-tracking);
  text-transform: var(--mq-mayus);
}

.mq-adm-buscar {
  flex: 1;
  min-inline-size: 0;
  padding: 9px 14px;
  background: var(--mq-superficie);
  border: 1px solid var(--mq-borde);
  border-radius: 8px;
  color: var(--mq-tenue);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mq-adm-accion {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--mq-acento);
  color: var(--mq-sobre-acento);
  font-size: 13px;
  font-weight: 600;
}

.mq-adm-accion i {
  font-style: normal;
  font-size: 15px;
  line-height: 1;
}

/* ---- Métricas ---- */

.mq-adm-metricas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mq-adm-metrica {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--mq-superficie);
  border: 1px solid var(--mq-borde);
  border-radius: 10px;
}

.mq-adm-metrica b {
  font-family: var(--mq-display);
  font-size: 26px;
  font-weight: var(--mq-peso);
  letter-spacing: var(--mq-tracking);
  line-height: 1.05;
}

.mq-adm-metrica b.es-aviso {
  color: var(--mq-acento);
}

.mq-adm-metrica small {
  font-size: 11.5px;
  line-height: 1.25;
  color: var(--mq-tenue);
}

/* ---- Tabla ---- */

.mq-adm-tabla {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
  background: var(--mq-superficie);
  border: 1px solid var(--mq-borde);
  border-radius: 10px;
}

/* El paginado, pegado al fondo de la tabla. Sin esto, con pocas
   filas la tarjeta queda a media asta y se nota que es un dibujo. */
.mq-adm-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: auto;
  padding: 12px 16px;
  border-block-start: 1px solid var(--mq-borde);
  color: var(--mq-tenue);
  font-size: 11.5px;
}

.mq-adm-paginas {
  display: flex;
  gap: 6px;
}

.mq-adm-paginas i {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 1px solid var(--mq-borde);
  border-radius: 6px;
  font-style: normal;
  font-size: 11.5px;
}

.mq-adm-paginas i:first-child {
  background: var(--mq-acento);
  border-color: var(--mq-acento);
  color: var(--mq-sobre-acento);
  font-weight: 600;
}

.mq-adm-fila {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) 120px 56px;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-block-end: 1px solid var(--mq-borde);
  font-size: 13px;
}

.mq-adm-fila:last-child {
  border-block-end: 0;
}

.mq-adm-fila--cabecera {
  padding-block: 10px;
  background: var(--mq-fondo);
  color: var(--mq-tenue);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mq-adm-c1 {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
}

.mq-adm-mini {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  overflow: hidden;
  border-radius: 7px;
}

.mq-adm-nombre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.mq-adm-nombre b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mq-adm-nombre small {
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--mq-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mq-adm-c2,
.mq-adm-c3 {
  min-inline-size: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mq-adm-c3 {
  color: var(--mq-tenue);
}

.mq-adm-fila--cabecera .mq-adm-c1 {
  padding-inline-start: 52px;
}

/* Los tres estados salen de la paleta del cliente: ninguno es un
   color nuevo. El fondo es el mismo tono al 16%. */
.mq-adm-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.mq-adm-estado::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mq-adm-estado--ok    { background: var(--mq-ok-suave);    color: var(--mq-ok); }
.mq-adm-estado--aviso { background: var(--mq-aviso-suave); color: var(--mq-aviso); }
.mq-adm-estado--baja  { background: var(--mq-baja-suave);  color: var(--mq-baja); }

/* Los dos controles del final de cada fila: editar y el menú de
   tres puntos. Dibujados, no tipografiados. */
.mq-adm-c5 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--mq-tenue);
}

.mq-adm-lapiz {
  position: relative;
  inline-size: 4px;
  block-size: 11px;
  border-radius: 1px 1px 0 0;
  background: currentColor;
  rotate: 45deg;
  opacity: 0.7;
}

/* la punta del lápiz: un triangulito debajo del cuerpo */
.mq-adm-lapiz::after {
  content: "";
  position: absolute;
  inset-block-end: -4px;
  inset-inline: 0;
  border-inline: 2px solid transparent;
  border-block-start: 4px solid currentColor;
}

.mq-adm-puntos {
  position: relative;
  inline-size: 3px;
  block-size: 3px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
  opacity: 0.75;
}

/* ============================================================
   La maqueta en 390 px. No es la misma maqueta achicada: cambian
   las columnas, aparece el menú hamburguesa y se esconde lo que
   en un teléfono no entra. Es lo mismo que hace un sitio de
   verdad, y de paso lo demuestra.
   ============================================================ */

.sim-lienzo--movil .mq-burger { display: flex; }
.sim-lienzo--movil .mq-nav,
.sim-lienzo--movil .mq-buscador,
.sim-lienzo--movil .mq-sesion,
.sim-lienzo--movil .mq-carrito span { display: none; }

.sim-lienzo--movil .mq-cinta { gap: 24px; padding: 7px 14px; font-size: 9px; }

.sim-lienzo--movil .mq--tienda .mq-cabecera { padding: 14px 16px; }
.sim-lienzo--movil .mq-burger { margin-inline-end: auto; }
.sim-lienzo--movil .mq-marca-nombre { font-size: 20px; }
.sim-lienzo--movil .mq-marca-volanta { font-size: 8px; }
.sim-lienzo--movil .mq-acciones { flex: 0 0 auto; }
.sim-lienzo--movil .mq-grilla {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 16px;
}
.sim-lienzo--movil .mq-producto:nth-child(n + 3) { display: none; }
.sim-lienzo--movil .mq-prod-nombre { font-size: 12px; }
.sim-lienzo--movil .mq-prod-precio { font-size: 14px; }
.sim-lienzo--movil .mq-prod-cuotas { font-size: 10px; }

.sim-lienzo--movil .mq--gimnasio .mq-cabecera { padding: 12px 16px; }
.sim-lienzo--movil .mq--gimnasio .mq-logo { font-size: 20px; }
.sim-lienzo--movil .mq-pill { padding: 8px 14px; font-size: 12px; }
.sim-lienzo--movil .mq-hero-cuerpo { padding: 20px 18px; }
.sim-lienzo--movil .mq--gimnasio .mq-titular { max-inline-size: 100%; font-size: 30px; }
.sim-lienzo--movil .mq-burbujas { gap: 8px; margin-block-start: 14px; }
.sim-lienzo--movil .mq-burbujas span { padding: 7px 12px; font-size: 11px; margin-block-start: 0; }
.sim-lienzo--movil .mq-plan-nombre,
.sim-lienzo--movil .mq-plan-precio { padding: 9px 16px; font-size: 16px; }
.sim-lienzo--movil .mq-franja { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
.sim-lienzo--movil .mq-chips { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sim-lienzo--movil .mq-chips span { padding: 8px; font-size: 9px; }
.sim-lienzo--movil .mq-chips span:nth-child(n + 4) { display: none; }
.sim-lienzo--movil .mq-cta-fuerte { padding: 11px; font-size: 17px; text-align: center; }

.sim-lienzo--movil .mq--resto .mq-cabecera { padding: 12px 16px; }
.sim-lienzo--movil .mq-banda { block-size: 150px; }
.sim-lienzo--movil .mq-frase { font-size: 19px; }
.sim-lienzo--movil .mq-dos { display: block; padding: 20px 18px; }
.sim-lienzo--movil .mq-titulo { font-size: 24px; }
.sim-lienzo--movil .mq-parrafo { font-size: 14px; }
.sim-lienzo--movil .mq-figura { display: none; }
.sim-lienzo--movil .mq-cta { padding: 11px 20px; font-size: 14px; }
.sim-lienzo--movil .mq-pie { padding: 10px 18px; font-size: 11px; }

.sim-lienzo--movil .mq--estudio .mq-cabecera { padding: 14px 16px; }
.sim-lienzo--movil .mq--estudio .mq-logo { font-size: 16px; }
.sim-lienzo--movil .mq-centro { padding: 0 18px; }
.sim-lienzo--movil .mq--estudio .mq-titular { font-size: 32px; }
.sim-lienzo--movil .mq-subtitulo { font-size: 22px; }
.sim-lienzo--movil .mq-bajada { font-size: 14px; }


/* El panel en 390 px. Un back office en el teléfono no es la
   tabla achicada: desaparece el lateral, las métricas van de a
   dos y cada fila se convierte en una tarjeta. Es exactamente lo
   que hay que mostrar —"lo cargás desde el celular"— así que
   vale la pena que se vea bien y no apretado. */

.sim-lienzo--movil .mq-adm {
  grid-template-columns: minmax(0, 1fr);
}

.sim-lienzo--movil .mq-adm-lateral {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-inline-end: 0;
  border-block-end: 1px solid rgb(255 255 255 / 0.09);
}

.sim-lienzo--movil .mq-adm-menu { display: none; }

.sim-lienzo--movil .mq-adm-usuario {
  margin-block-start: 0;
  margin-inline-start: auto;
  padding-block-start: 0;
  border-block-start: 0;
}

.sim-lienzo--movil .mq-adm-usuario .mq-adm-marca-texto { display: none; }

.sim-lienzo--movil .mq-adm-cuerpo {
  gap: 14px;
  padding: 16px;
}

.sim-lienzo--movil .mq-adm-barra { flex-wrap: wrap; gap: 10px; }
.sim-lienzo--movil .mq-adm-titulo { font-size: 22px; }
.sim-lienzo--movil .mq-adm-buscar { flex-basis: 100%; order: 3; }
.sim-lienzo--movil .mq-adm-accion { margin-inline-start: auto; padding: 9px 14px; }

.sim-lienzo--movil .mq-adm-metricas {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sim-lienzo--movil .mq-adm-metrica { padding: 11px 13px; }
.sim-lienzo--movil .mq-adm-metrica b { font-size: 21px; }

/* La cabecera de la tabla no tiene sentido sin columnas */
.sim-lienzo--movil .mq-adm-fila--cabecera { display: none; }

.sim-lienzo--movil .mq-adm-fila {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 12px 14px;
}

.sim-lienzo--movil .mq-adm-c1 { grid-column: 1; }
.sim-lienzo--movil .mq-adm-c5 { grid-column: 2; grid-row: 1; }

/* Precio y stock pasan a una línea suelta debajo del nombre, con
   el rótulo adelante: sin cabecera, un número solo no dice nada. */
.sim-lienzo--movil .mq-adm-c2,
.sim-lienzo--movil .mq-adm-c3 {
  grid-row: 2;
  font-size: 12px;
  color: var(--mq-tenue);
}

.sim-lienzo--movil .mq-adm-c2 { grid-column: 1; font-weight: 600; color: var(--mq-texto); }
.sim-lienzo--movil .mq-adm-c3 { grid-column: 2; justify-self: end; }

.sim-lienzo--movil .mq-adm-c4 { grid-column: 1 / -1; grid-row: 3; }

/* En 390 x 740 entran tres tarjetas enteras y el paginado. Mejor
   tres completas que cuatro con la última cortada al medio: en el
   teléfono la lista se termina, no se recorta.

   Y la tabla deja de estirarse: con pocas filas, una tarjeta a
   media asta delata que es un dibujo. */
.sim-lienzo--movil .mq-adm-tabla { flex: none; }
.sim-lienzo--movil .mq-adm-fila:nth-child(n + 5) { display: none; }
.sim-lienzo--movil .mq-adm-fila { padding: 10px 13px; gap: 6px 10px; }
.sim-lienzo--movil .mq-adm-mini { inline-size: 36px; block-size: 36px; }
.sim-lienzo--movil .mq-adm-pie { padding: 10px 13px; }

/* Sin JS no hay maqueta: la sección se explica igual, pero el
   marco vacío no tiene por qué ocupar media pantalla. */
html:not(.js) .sim {
  display: none;
}