/* Ostermann Laboratories · Explorar el archivo: el robot de SERO y su índice del sitio.
   Mismo papel, tinta y rojo que el resto del archivo. En el teléfono es una hoja baja; en
   pantallas grandes, un panel lateral. */
.sx-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sx-boton {
  position: fixed; z-index: 70; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sx-boton img {
  width: 80px; height: 80px; display: block; transform-origin: 50% 85%;
  filter: drop-shadow(0 6px 14px rgba(14, 14, 15, .22));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.sx-boton:hover img, .sx-boton:focus-visible img { transform: translateY(-3px) rotate(-4deg); }
.sx-boton:active img { transform: scale(.94); }
.sx-boton:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 999px; }
.sx-etiqueta {
  padding: 9px 14px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 759px) {
  .sx-boton { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sx-boton img { width: 72px; height: 72px; }
  /* En el teléfono la etiqueta solo aparece como saludo, una vez por visita. */
  .sx-etiqueta { position: absolute; right: calc(100% + 4px); top: 50%; white-space: nowrap; opacity: 0; transform: translate(8px, -50%); pointer-events: none; transition: opacity .4s ease, transform .4s ease; }
  .sx-boton.is-saludando .sx-etiqueta { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
}
/* El saludo: el robot se asoma con su lupa, una sola vez, sin brillos ni pulsos. */
@keyframes sx-asomarse {
  0% { transform: rotate(0) translateY(0); }
  18% { transform: rotate(-9deg) translateY(-6px); }
  36% { transform: rotate(7deg) translateY(-3px); }
  54% { transform: rotate(-4deg) translateY(-1px); }
  72%, 100% { transform: rotate(0) translateY(0); }
}
.sx-boton.is-saludando img { animation: sx-asomarse 1.5s cubic-bezier(.3, .7, .3, 1) 1; }

.sx-velo {
  position: fixed; inset: 0; z-index: 80; background: rgba(14, 14, 15, .34);
  opacity: 0; transition: opacity .3s ease;
}
.sx-velo.is-visible { opacity: 1; }

.sx-panel {
  position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border-top: 2px solid var(--ink); border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 48px rgba(14, 14, 15, .18);
  transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.sx-panel[hidden], .sx-velo[hidden] { display: none !important; }
/* Visible = sin transform: en iOS, un campo de texto dentro de un fijo transformado pierde el cursor. */
.sx-panel.is-visible { transform: none; }
/* Al buscar en el teléfono, la hoja ocupa la pantalla visible (encima del teclado). */
.sx-panel.is-buscando { top: var(--sx-arriba, 0px); bottom: auto; height: var(--sx-alto, 100%); max-height: none; border-radius: 0; }
.sx-panel.is-buscando .sx-asa { display: none; }
.sx-panel.is-arrastrando { transition: none; }
@media (min-width: 760px) {
  .sx-panel {
    left: auto; top: 0; width: 440px; max-height: none; border-top: 0; border-left: 2px solid var(--ink);
    border-radius: 0; box-shadow: -18px 0 48px rgba(14, 14, 15, .14); transform: translateX(100%);
  }
  .sx-panel.is-visible { transform: none; }
  .sx-asa { display: none; }
}
html.sx-abierto, html.sx-abierto body { overflow: hidden; }

.sx-cabeza {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 22px 22px 18px; border-bottom: 1px solid var(--rule); touch-action: none;
}
.sx-asa { position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--rule); }
.sx-cabeza img { width: 44px; height: 44px; }
.sx-cabeza h2 { margin: 2px 0 0; font-family: var(--serif-display); font-weight: 500; font-size: 30px; line-height: 1.05; }
.sx-cabeza h2 em { font-style: italic; }
.sx-kicker { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.sx-cerrar {
  padding: 8px 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; cursor: pointer;
}
.sx-cerrar:hover { border-color: var(--ink); }

.sx-cuerpo { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 22px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 26px; }
.sx-buscar input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px;
  background: #fffdf8; color: var(--ink); font: inherit; font-size: 16px;
}
.sx-buscar input:focus { outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.sx-grupo { display: grid; gap: 10px; }
.sx-grupo[hidden], .sx-grupo [hidden] { display: none !important; }
.sx-grupo ul { list-style: none; margin: 0; padding: 0; }
.sx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chips a {
  padding: 8px 13px; border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .03em;
}
.sx-chips a:hover { border-color: var(--ink); }
.sx-item { display: grid; gap: 3px; padding: 13px 26px 13px 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); position: relative; }
.sx-grupo li:last-child .sx-item { border-bottom: 1px solid var(--rule); }
.sx-item::after { content: "→"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--muted); transition: transform .2s ease, color .2s ease; }
.sx-item:hover::after { transform: translate(3px, -50%); color: var(--red-ink); }
.sx-item b { font-family: var(--serif-display); font-weight: 600; font-size: 20px; line-height: 1.2; }
.sx-item span { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }
.sx-item.is-aqui b::after { content: " · estás aquí"; font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; color: var(--red-ink); }
.sx-mas { justify-self: start; margin-top: 4px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--red-ink); text-decoration: none; }
.sx-mas:hover { text-decoration: underline; }
.sx-nada { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.sx-activar { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .sx-panel, .sx-velo, .sx-boton img { transition: none; }
  .sx-boton.is-saludando img { animation: none; }
}
@media print { .sx-boton, .sx-velo, .sx-panel { display: none !important; } }