.gallery-return {
  position: absolute;
  z-index: 5;
  top: clamp(50px, calc(1.6vw + 30px), 58px);
  left: clamp(12px, 1.6vw, 24px);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 11px;
  color: #f7f7f7;
  background: #050505d9;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
}
.gallery-return:hover,
.gallery-return:focus-visible { text-decoration: underline; }
.gallery-return:focus-visible { outline: 2px solid #f7f7f7; outline-offset: 3px; }

@media (max-width: 900px) and (orientation: portrait) {
  .gallery-return {
    top: max(48px, calc(env(safe-area-inset-top) + 40px));
    left: max(10px, env(safe-area-inset-left));
  }
}

.catalog-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.catalog-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 18px clamp(22px, 3vw, 48px);
  border-bottom: 1px solid #343434;
  background: #050505;
}
.catalog-header .catalog-brand {
  position: static;
  transform: none;
  padding: 0;
  background: none;
  line-height: 1.4;
}
.catalog-home-link {
  position: static;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: #f7f7f7;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.catalog-body .catalog-app {
  flex: 1;
  height: auto;
  min-height: 0;
}
.catalog-home-link:hover,
.catalog-home-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.catalog-home-link:focus-visible { outline: 2px solid #f7f7f7; outline-offset: 3px; }
@media (max-width: 780px) {
  .catalog-header {
    padding: 14px 25px;
  }
  .catalog-body .catalog-app {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(230px, auto));
    overflow: visible;
  }
  .catalog-body {
    overflow: auto;
  }
}

/* Galería: iconos de Tabler sin marcos alrededor. */
.catalog-body .catalog-app {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.catalog-body .catalog-entry {
  overflow: hidden;
  transition: background-color .2s ease;
}
.catalog-body .catalog-entry:focus-visible {
  outline: 2px solid #f7f7f7;
  outline-offset: -6px;
}
.catalog-body .catalog-visual {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 90px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  font-size: inherit;
  letter-spacing: normal;
  color: #f2f2f2;
}
.catalog-body .catalog-visual img {
  display: block;
  width: clamp(100px, 15vh, 185px);
  height: auto;
  filter: invert(1);
  transition: transform .25s ease;
}
.catalog-body .catalog-entry:hover .catalog-visual img,
.catalog-body .catalog-entry:focus-visible .catalog-visual img {
  transform: translateY(-5px);
}
.catalog-body .catalog-copy {
  flex: none;
  padding-right: 34px;
}
.catalog-body .catalog-arrow {
  line-height: 1;
  transition: transform .2s ease;
}
.catalog-body .catalog-entry:hover .catalog-arrow,
.catalog-body .catalog-entry:focus-visible .catalog-arrow {
  transform: translate(3px, -3px);
}
@media (max-width: 780px) {
  .catalog-body .catalog-app {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(250px, auto));
  }
  .catalog-body .catalog-entry {
    min-height: 250px;
    padding: 22px 25px;
    border-right: 0;
  }
  .catalog-body .catalog-visual img {
    width: clamp(82px, 11vh, 120px);
  }
  .catalog-body .catalog-entry h2 {
    font-size: clamp(28px, 7vw, 42px);
  }
  .catalog-body .catalog-entry p {
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.35;
  }
  .catalog-body .catalog-index {
    font-size: 10px;
  }
  .catalog-body .catalog-arrow {
    right: 25px;
    bottom: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-body .catalog-entry,
  .catalog-body .catalog-visual img,
  .catalog-body .catalog-arrow {
    transition: none;
  }
}
.catalog-nav a{color:#f7f7f7;font-size:12px;font-weight:600;text-decoration:none}.catalog-nav a:hover,.catalog-nav a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.catalog-body .catalog-app{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
@media(max-width:780px){.catalog-body .catalog-app{grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(250px,auto))}.catalog-header .catalog-brand{order:3;width:100%}}

/* Acceso a la guía al pie de cada demostración. */
body.demo-guide-layout{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:100dvh}
body.demo-guide-layout .app{height:100%;min-height:0}
body.demo2-body.demo-guide-layout{grid-template-rows:var(--demo2-nav-height) minmax(0,1fr) auto}
body.demo2-body.demo-guide-layout .demo2-app{height:100%;min-height:0}
body.demo2-body.demo-guide-layout.is-camera-split{grid-template-rows:var(--demo2-nav-height) auto auto}
body.demo2-body.demo-guide-layout.is-camera-split .camera-mode-split.demo2-app{height:auto}
.demo3-app{display:flex;flex-direction:column}
.demo-guide-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px;padding:10px clamp(18px,3.5vw,58px);border-top:1px solid #343434;background:#080808;color:#a8a8a8;font:650 11px/1.4 Inter,sans-serif;letter-spacing:.09em}
.demo-guide-footer a{display:inline-flex;align-items:center;gap:8px;min-height:36px;color:#f7f7f7;font-size:13px;letter-spacing:0;text-decoration:none}
.demo-guide-footer a:hover,.demo-guide-footer a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.demo3-app>.demo-guide-footer{margin-top:auto;margin-inline:0;padding-inline:0;background:transparent}
@media(max-width:600px){.demo-guide-footer{min-height:54px;padding:8px 16px;font-size:9px}.demo-guide-footer a{font-size:12px}.demo3-app>.demo-guide-footer{margin-top:38px}}
@media(max-width:600px) and (orientation:portrait){body.demo2-body.demo-guide-layout{display:block;height:auto}body.demo2-body.demo-guide-layout .demo2-app{height:auto}}