/*
  El sitio de MaterialEX 2.0.

  Oscuro como la app y con el color de los renders: la página es el carbón
  de `crates/app/src/kit.rs`, y el color lo ponen las imágenes, que salen del
  motor de la app con los cielos HDRI y los materiales de cada modelo. Cada
  render va en un marco redondeado, con un halo difuso de sus propios colores
  detrás, y el texto va al lado: nunca encima de una imagen.

  El ámbar es el del logo: la marca, el botón de compra y los íconos. El resto
  de la paleta son los grises de la app.

  La letra es Barlow, servida desde el propio sitio (la política de
  privacidad dice que no hay terceros más que la analítica de Vercel).
*/

@font-face {
  font-family: "Barlow";
  src: url("fuentes/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fuentes/barlow-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* kit::FONDO, PANEL, TARJETA, RELIEVE y BORDE_SUAVE */
  --fondo: #0d0d0d;
  --panel: #151515;
  --tarjeta: #1e1e1e;
  --relieve: #292929;
  --borde: #282828;
  /* kit::TEXTO, TEXTO_TENUE y TEXTO_AYUDA */
  --texto: #ededed;
  --tenue: #a8a8a8;
  --ayuda: #7a7a7a;
  /* El ámbar del logo (assets/logo-MX.svg) y el texto que va sobre él
     (kit::TEXTO_SOBRE_ACENTO). */
  --ambar: #ffb92e;
  --sobre-ambar: #1a1306;

  --letra: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ancho: 1200px;
  --margen: clamp(20px, 5vw, 64px);
  --radio: 18px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 1.125rem/1.6 var(--letra);
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.5rem, 4.8vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.005em; }
p { margin: 0; }

.bajada { font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--tenue); }
.texto { color: var(--tenue); max-width: 58ch; }
* + .texto { margin-top: 18px; }
h2 + .texto { margin-top: 20px; }

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

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

/* Saltar al contenido: el primer Tab de la página, fuera de la vista hasta
   que se enfoca. Sin él, quien navega con el teclado recorre la barra en
   cada visita. */
.saltar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 40;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ambar);
  color: var(--sobre-ambar);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
}
.saltar:focus-visible { transform: none; }

/* ---- la barra ----
   Fija arriba, sobre un carbón translúcido: la página es larga, y comprar
   o saltar a una sección está siempre a un clic. */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(13 13 13 / 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgb(255 255 255 / 0.05);
}
.barra .contenedor {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.15rem;
}
.marca svg { width: 28px; height: 28px; }
.navegacion { margin-left: auto; }
.navegacion ul {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.98rem;
}
.navegacion a { color: var(--tenue); text-decoration: none; }
.navegacion a:hover { color: var(--texto); }
.idiomas { display: inline-flex; gap: 2px; }
.idiomas button {
  font: 500 0.9rem/1 var(--letra);
  color: var(--ayuda);
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 7px 9px;
  cursor: pointer;
}
.idiomas button[aria-pressed="true"] { color: var(--texto); background: var(--relieve); }
.idiomas button:hover { color: var(--texto); }

/* ---- el menú de las pantallas angostas ----
   Donde la navegación no cabe en la barra la reemplaza el botón de la
   esquina, que despliega las mismas secciones debajo de la barra. El botón
   y el panel se muestran sólo desde la media de las pantallas medianas, la
   única que sabe ese ancho; sin JS el botón queda `hidden`. Abierto, sus
   tres rayas se cruzan en una X. */
.menu {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--texto);
  cursor: pointer;
}
.menu:hover { background: var(--relieve); }
.menu svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.menu path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 220ms ease, opacity 160ms ease;
}
.menu[aria-expanded="true"] path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.menu[aria-expanded="true"] path:nth-child(2) { opacity: 0; }
.menu[aria-expanded="true"] path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }
/* Opaco y sin desenfoque propio: dentro de la barra, que ya desenfoca, un
   segundo `backdrop-filter` no ve la página de atrás, y con el carbón al
   97 % el título de la portada se asomaba entre las secciones. */
.menu-movil {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.45);
}
.menu-movil ul {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  padding: 6px var(--margen) 18px;
  list-style: none;
}
.menu-movil a {
  display: block;
  padding: 13px 0;
  border-top: 1px solid rgb(255 255 255 / 0.06);
  color: var(--tenue);
  font-size: 1.2rem;
  text-decoration: none;
}
.menu-movil li:first-child a { border-top: 0; }
.menu-movil a:hover,
.menu-movil a[aria-current="page"] { color: var(--texto); }

/* ---- comprar ---- */
.comprar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--ambar);
  color: var(--sobre-ambar);
  font: 500 1.05rem/1 var(--letra);
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 8px 30px rgb(255 185 46 / 0.22);
}
.comprar:hover { transform: translateY(-1px); box-shadow: 0 10px 36px rgb(255 185 46 / 0.32); }
.comprar svg { width: 17px; height: 17px; flex: none; }
.comprar.chico { padding: 10px 16px; font-size: 0.95rem; box-shadow: none; }
.compra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 20px;
  margin-top: 32px;
}
.compra p { color: var(--ayuda); font-size: 0.98rem; }

/* ---- la portada ---- */
.portada { padding: clamp(56px, 9vw, 112px) 0 0; text-align: center; }
.portada h1 { max-width: 20ch; margin: 0 auto; }
.portada .bajada { max-width: 50ch; margin: 22px auto 0; }
.portada .vitrina { margin-top: clamp(44px, 6vw, 72px); }
/* Las novedades de la versión, a un clic de la compra y sin competir con ella. */
.portada .que-trae { margin-top: 16px; font-size: 0.98rem; }
.que-trae a { color: var(--tenue); text-underline-offset: 3px; }
.que-trae a:hover { color: var(--texto); }

/* ---- la vitrina: un render enmarcado con su halo ----
   El halo es el mismo render, chico y muy difuminado, detrás del marco: el
   color de cada imagen se derrama un poco sobre el carbón. */
.vitrina {
  position: relative;
  isolation: isolate;
}
.vitrina .halo {
  position: absolute;
  inset: 6% 4%;
  z-index: -1;
  width: 92%;
  height: 88%;
  object-fit: cover;
  filter: blur(64px) saturate(1.5);
  opacity: 0.55;
  pointer-events: none;
}
.marco {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 30px 80px rgb(0 0 0 / 0.5);
}
.marco > img,
.marco > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.marco > video { opacity: 0; transition: opacity 800ms ease; }
.marco > video.corre { opacity: 1; }
/* La pausa del video de la portada, en la esquina: el loop no se detiene
   solo y hay quien necesita pararlo (WCAG 2.2.2). */
.pausa {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgb(10 10 10 / 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--texto);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pausa[hidden] { display: none; }
.pausa:hover { background: rgb(10 10 10 / 0.8); }
.pausa svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.pausa .icono-seguir,
.pausa.detenido .icono-pausa { display: none; }
.pausa.detenido .icono-seguir { display: block; }
/* Las capturas de la interfaz van sin la barra de estado (la receta recorta
   los 24 px de abajo). */
.marco.interfaz { aspect-ratio: 1560 / 976; }

/* ---- las ideas ---- */
.ideas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin: clamp(56px, 7vw, 88px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.ideas p { margin-top: 10px; color: var(--tenue); font-size: 1.02rem; }
.icono {
  width: 26px;
  height: 26px;
  color: var(--ambar);
  margin-bottom: 14px;
}

/* ---- las secciones ---- */
.seccion { padding: clamp(96px, 12vw, 160px) 0 0; }
.encabezado { max-width: 760px; }
.encabezado + .vitrina,
.encabezado + .pestanas { margin-top: clamp(36px, 5vw, 56px); }

/* Dos columnas: la imagen y el texto, a veces al revés. */
.dos {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.dos.al-reves { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.dos.al-reves > .vitrina { order: 2; }

/* ---- el comparador del trazado ----
   El render con trazado va encima y se recorta desde la izquierda hasta el
   corte: a la izquierda sin trazado, a la derecha con. */
.comparador { cursor: ew-resize; touch-action: pan-y; user-select: none; --corte: 50%; }
.comparador img { pointer-events: none; }
.comparador .con { clip-path: inset(0 0 0 var(--corte)); }
.comparador .linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 12px rgb(0 0 0 / 0.4);
  pointer-events: none;
}
.comparador .tirador {
  position: absolute;
  top: 50%;
  left: var(--corte);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: #fff;
  color: #111;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
}
.comparador .tirador svg { width: 22px; height: 22px; }
.comparador .lado {
  position: absolute;
  bottom: 18px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgb(10 10 10 / 0.72);
  backdrop-filter: blur(8px);
  color: var(--texto);
  font-size: 0.9rem;
  pointer-events: none;
}
.comparador .lado.sin { left: 18px; }
.comparador .lado.con-trazado { right: 18px; }

.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.fichas li {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--borde);
  color: var(--tenue);
  font-size: 0.95rem;
}
.fichas li strong { color: var(--texto); font-weight: 500; }

/* ---- los cielos ---- */
.cielos .marco img { opacity: 0; transition: opacity 600ms ease; }
.cielos .marco img.visto { opacity: 1; }
.selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.selector button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--panel);
  color: var(--tenue);
  font: 500 1rem/1 var(--letra);
  cursor: pointer;
}
.selector button:hover { color: var(--texto); border-color: #3a3a3a; }
.selector button[aria-pressed="true"] { color: var(--texto); border-color: var(--ambar); }
.selector img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

/* ---- las pestañas del muelle ---- */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.pestanas button {
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--tenue);
  font: 500 1rem/1 var(--letra);
  cursor: pointer;
}
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-selected="true"] { background: var(--tarjeta); border-color: var(--borde); color: var(--texto); }
.librerias .marco img { opacity: 0; transition: opacity 280ms ease; }
.librerias .marco img.visto { opacity: 1; }
.nota {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 20px clamp(28px, 5vw, 64px);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--borde);
}

/* ---- los materiales: las esferas de la app ---- */
.esferas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 22px 18px;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.esferas li { text-align: center; font-size: 0.9rem; color: var(--tenue); line-height: 1.3; }
.esferas img {
  width: 100%;
  /* Sin esto manda el height="240" del HTML y la esfera queda en el medio
     de un rectángulo alto, lejos de su nombre. */
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 8px;
}

/* ---- todo lo demás ---- */
.lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px clamp(24px, 3vw, 40px);
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
.lista p { margin-top: 8px; color: var(--tenue); font-size: 1rem; line-height: 1.55; }

/* ---- la salida ---- */
.destinos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.destinos li {
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--borde);
  font-weight: 500;
}
/* Un gris algo más claro que el de ayuda: sobre el panel, el #7a7a7a daba
   4,26:1 y la letra chica pide 4,5:1. */
.destinos li span { color: #8a8a8a; font-weight: 400; }
.tabla { overflow-x: auto; margin-top: 44px; }
.requisitos {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.requisitos th,
.requisitos td {
  text-align: left;
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.requisitos thead th { color: var(--ayuda); font-weight: 500; }
.requisitos td:first-child { color: var(--tenue); }

/* ---- el precio ---- */
.precio {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: clamp(48px, 7vw, 88px) var(--margen);
  border-radius: 28px;
  background: var(--panel);
  border: 1px solid var(--borde);
  overflow: hidden;
}
.precio::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 90%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(255 185 46 / 0.18), transparent);
}
.cifra {
  font-size: clamp(4.5rem, 11vw, 8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ambar);
}
.precio h2 { margin-top: 14px; }
.precio .texto { margin: 16px auto 0; }

.preguntas { max-width: 860px; margin: clamp(80px, 10vw, 128px) auto 0; }
.preguntas details { border-top: 1px solid var(--borde); }
.preguntas details:last-of-type { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 1.15rem;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; color: var(--ambar); font-size: 1.4rem; line-height: 1; }
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { padding: 0 0 22px; color: var(--tenue); max-width: 68ch; }

.clasificacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: 56px;
  color: var(--ayuda);
  font-size: 0.92rem;
}
.clasificacion .logos { display: flex; flex-wrap: wrap; gap: 8px; }
.clasificacion img { height: 32px; width: auto; }

/* ---- sobre mí ----
   El retrato y el texto al lado, como las secciones de dos columnas, pero
   con la foto más angosta que un render: es una cara, no una vitrina. */
.autor {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.marco.retrato { aspect-ratio: 4 / 5; }
/* Sin una palabra sola en el último renglón: en inglés, «keep.» quedaba
   colgando del primer párrafo. */
.autor .texto { text-wrap: pretty; }
.firma {
  display: grid;
  gap: 2px;
  margin-top: 30px;
  color: var(--ayuda);
  font-size: 1rem;
}
.firma span:first-child { color: var(--texto); font-weight: 500; font-size: 1.2rem; }

/* ---- el pie ---- */
.pie { margin-top: clamp(80px, 10vw, 120px); border-top: 1px solid var(--borde); }
.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 32px;
  padding-bottom: 44px;
  color: var(--ayuda);
  font-size: 0.95rem;
}
.pie a { color: var(--tenue); }
.pie .lejos { margin-left: auto; }

/* ---- las páginas de texto: la política de privacidad ---- */
.documento { max-width: calc(46rem + 2 * var(--margen)); margin: 0 auto; padding: 40px var(--margen) 96px; }
.documento h1 { font-size: clamp(2.2rem, 4.4vw, 3rem); }
.documento h2 { font-size: 1.5rem; margin: 2.4rem 0 0.8rem; }
.documento p,
.documento li { color: var(--tenue); }
.documento p { margin: 0 0 1em; }
.documento strong,
.documento code { color: var(--texto); font-weight: 500; }
.documento .fecha { color: var(--ayuda); font-size: 0.95rem; margin: 10px 0 2rem; }
.documento hr { margin: 4rem 0; border: 0; border-top: 1px solid var(--borde); }
.documento ul { padding-left: 1.2rem; margin: 0 0 1em; }
.documento li { margin-bottom: 0.4rem; }
.documento a { color: var(--ambar); }

/* ---- las novedades ----
   Texto largo: la columna de la política, con los títulos del sitio. Cada
   parche va en el desplegable de su versión, el último abierto (Alex,
   2026-09-28): la página junta las notas y el desplegable las ordena. La
   raya y el «+» son los de las preguntas de la portada. */
.notas h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin-top: 24px; }
.notas .entrada { font-size: 1.15rem; margin: 18px 0 0; }
.version { border-top: 1px solid var(--borde); }
.notas h1 + .version { margin-top: 2.4rem; }
.version:last-of-type { border-bottom: 1px solid var(--borde); }
.version summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.version summary::-webkit-details-marker { display: none; }
.version summary::after { content: "+"; color: var(--ambar); font-size: 1.6rem; line-height: 1; }
.version[open] summary::after { content: "−"; }
.version summary h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.version > section:last-child { padding-bottom: 1.2rem; }
.notas h3 { font-size: 1.2rem; color: var(--texto); margin: 1.4rem 0 0.7rem; }
.version summary + section h3 { margin-top: 0.2rem; }
.notas h4 { font-size: 1.05rem; color: var(--texto); margin: 1.4rem 0 0.6rem; }
.notas li { margin-bottom: 0.65rem; }
.notas code {
  font: 500 0.92em var(--letra);
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--relieve);
}
.navegacion a[aria-current="page"] { color: var(--texto); }

/* ---- pantallas medianas y angostas ---- */
/* La barra entera —siete secciones, el idioma y el botón de comprar— mide
   974 px en español y 949 en inglés, y con la barra de desplazamiento de
   Windows cabe desde unos 1.100 px de ventana: a 1.041, con «Sobre mí»,
   entradas y botón se partían en dos renglones. La navegación se va al menú
   un poco antes, con margen para otra letra u otro navegador. Es el ÚNICO
   sitio con ese ancho: el menú y su panel se muestran sólo acá, y sitio.js
   mira si el botón se ve. */
@media (max-width: 1160px) {
  .navegacion { display: none; }
  .idiomas { margin-left: auto; }
  .menu:not([hidden]) { display: grid; }
  .menu-movil:not([hidden]) { display: block; }
}
@media (max-width: 980px) {
  .barra .contenedor { gap: 16px; }
  .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ideas,
  .dos,
  .dos.al-reves,
  .autor,
  .nota { grid-template-columns: minmax(0, 1fr); }
  .marco.retrato { max-width: 320px; }
  .dos.al-reves > .vitrina { order: 0; }
  .lista { grid-template-columns: minmax(0, 1fr); }
  .esferas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; }
  .comprar.chico { display: none; }
  .pie .lejos { margin-left: 0; }
  :root { --radio: 14px; }
}

/* ---- menos movimiento ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}