:root{
  --headerH: 82px;
  --brand:#5AB0DD;
  --menuAccent:#6B398D;
  --bg:#f7fbff;
  --bg2:#eef7fd;
  --text:#0f172a;
  --muted:rgba(15,23,42,.66);
  --card:rgba(255,255,255,.94);
  --stroke:rgba(15,23,42,.08);
  --shadowXs:0 6px 16px rgba(15,23,42,.06);
  --shadowSm:0 12px 28px rgba(15,23,42,.09);
  --shadowMd:0 20px 50px rgba(15,23,42,.12);
  --shadowLg:0 30px 80px rgba(15,23,42,.16);
  --rSm:12px;
  --rMd:18px;
  --rLg:24px;
  --contentPad:24px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background: url('./icons/fondo.png') no-repeat center center fixed;
  background-size: cover;
}
body{ overflow-x:hidden; }
body.viewerMode{ overflow:hidden; }
a{ text-decoration:none; color:inherit; }
img{ user-select:none; -webkit-user-drag:none; display:block; }
.hidden{ display:none !important; }
.view{ padding:var(--contentPad); }

.replicaHeader{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--headerH);
  z-index:50000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 28px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.replicaLeft,.replicaRight{ display:flex; align-items:center; gap:12px; min-width:0; }
.replicaLeft{ flex:1 1 auto; overflow:hidden; }
.replicaRight{ flex:0 0 auto; }
.replicaLogo{ height:clamp(34px, 4.5vw, 52px); max-width:min(220px, 34vw); object-fit:contain; }
.replicaDivider{
  width:1px;
  height:42px;
  background:rgba(15,23,42,.18);
  display:none;
  flex:0 0 1px;
}
.replicaTitle{
  display:none;
  font-size:18px;
  font-weight:400;
  font-family:"Aptos","Segoe UI",Arial,sans-serif;
  color:rgba(15,23,42,.62);
  white-space:nowrap;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.viewerMode .replicaDivider,
body.viewerMode .replicaTitle{ display:block; }

.hdrBtn,.hdrIconBtn,.homeBtn{
  background:var(--brand) !important;
  color:#fff;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 28px rgba(90,176,221,.28);
}
.hdrBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:114px;
  height:40px;
  padding:0 18px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:400;
}
.hdrBtn img{ width:16px; height:16px; }
.hdrIconBtn{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hdrIconBtn img{ width:18px; height:18px; }
.hdrBtn:hover,.hdrIconBtn:hover,.homeBtn:hover{ transform:translateY(-2px); filter:brightness(1.02); }
#hdrViewer{ display:none; }
#hdrHome{ display:flex; }
body.viewerMode #hdrHome{ display:none; }
body.viewerMode #hdrViewer{ display:flex; }

#view-home{
  min-height:100vh;
  padding-top:calc(var(--headerH) + 10px);
  padding-bottom:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(900px 540px at 15% 12%, rgba(90,176,221,.18), transparent 60%),
    radial-gradient(900px 540px at 82% 88%, rgba(120,90,220,.12), transparent 60%),
    linear-gradient(180deg, #fbfeff 0%, #f4f8ff 100%);
}
.homeView{ display:flex; flex-direction:column; justify-content:center; gap:10px; }
.homeHero{ text-align:center; margin-top:0; }
.homeHero h1{
  margin:0;
  font-size:clamp(44px, 4.2vw, 60px);
  line-height:1.15;
  font-weight:700;
  font-family:Arial, Helvetica, sans-serif;
  color:#5b2d90;
}
.homeHero h1 span{
  color:var(--brand);
}
.homeHero p{
  margin:6px auto 0;
  max-width:880px;
  color:var(--muted);
  font-size:clamp(18px, 1.55vw, 24px);
  line-height:1.45;
  font-weight:400;
  font-family:Arial, Helvetica, sans-serif;
}
.homeGrid{
  max-width:min(1240px, calc(100vw - 72px));
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  align-items:start;
}
.homeCard{
  background:var(--card);
  border:1px solid rgba(255,255,255,.75);
  border-radius:18px;
  padding:10px 10px 14px;
  text-align:center;
  box-shadow:var(--shadowSm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.homeCardLg{ min-height:0; }
.homeCard:hover{ transform:translateY(-8px); box-shadow:var(--shadowLg); }
.homeCover{
  border-radius:18px;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
  aspect-ratio:0.69;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.homeCover img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 8px 18px rgba(15,23,42,.14);
}
.homeName{
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  font-family:Arial, Helvetica, sans-serif;
}
.homeBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
  min-height:44px;
  padding:0 18px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-size:14px;
  font-weight:400;
  font-family:"Aptos","Segoe UI",Arial,sans-serif;
  margin-top:10px;
}

#view-viewer{ padding:0; }
.sideMenu{
  position:fixed;
  top:calc(var(--headerH) + 28px);
  left:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:45000;
  max-height:calc(100vh - var(--headerH) - 120px);
}
.menuItem{
  width:280px;
  min-height:56px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.68);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadowSm);
  cursor:pointer;
  overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.menuItem:hover{
  transform:translateX(4px);
  background:#fff;
  box-shadow:var(--shadowMd);
}
.menuItem.active{
  background:#fff;
  box-shadow:var(--shadowMd);
  border-color:rgba(107,57,141,.22);
}
.menuItem img{
  width:28px;
  height:28px;
  object-fit:contain;
  flex:0 0 28px;
}
.menuItem .label{
  color:var(--brand);
  font-size:16px;
  font-weight:400;
  font-family:"Aptos","Segoe UI",Arial,sans-serif;
  line-height:1.2;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  flex:1 1 auto;
  min-width:0;
  opacity:1;
  transform:none;
  transition:color .18s ease;
}
.menuItem:hover .label,
.menuItem.active .label{
  color:var(--menuAccent);
}

.stage{
  position:fixed;
  inset:var(--headerH) 0 0 0;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px 40px 92px 40px;
  overflow:hidden;
  background:
    radial-gradient(700px 420px at 16% 10%, rgba(90,176,221,.08), transparent 60%),
    radial-gradient(800px 500px at 90% 100%, rgba(120,90,220,.08), transparent 60%),
    linear-gradient(180deg, #fbfcff 0%, #f4f7fb 100%);
}
.viewerShell{
  position:relative;
  width:min(calc(100vw - 380px), 980px);
  height:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}
.imageViewport{
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:28px;
  touch-action:none;
  cursor:default;
}
.imageViewport.isDraggable{ cursor:grab; }
.imageViewport.isDragging{ cursor:grabbing; }
.imageCanvas{
  transform-origin:center center;
  transition:transform .18s ease-out;
  will-change:transform;
  display:flex;
  align-items:center;
  justify-content:center;

  transform: translateZ(0);
}
.imageViewport.isDragging .imageCanvas{ transition:none; }
.spreadWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:min(100%, 1040px);
  max-width:100%;
  max-height:100%;
  overflow:visible;
  perspective:2200px;
  transform-style:preserve-3d;
  position:relative;
}
.spreadWrap.double::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-1px);
  background:linear-gradient(180deg, rgba(15,23,42,.08), rgba(15,23,42,.18), rgba(15,23,42,.08));
  box-shadow:0 0 18px rgba(15,23,42,.10);
  pointer-events:none;
  z-index:3;
}
.spreadWrap.single{
  width:min(100%, 760px);
}
.catalogImage{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  image-rendering:auto;
  box-shadow:0 20px 60px rgba(15,23,42,.12);
  background:#fff;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}
.spreadWrap.single .catalogImage{
  max-width:min(100%, 700px);
  max-height:calc(100vh - 200px);
  border-radius:14px;
}
.spreadWrap.double .catalogImage{
  width:50%;
  max-width:500px;
  max-height:calc(100vh - 210px);
}
.spreadWrap.double .catalogImage.left{
  border-radius:14px 0 0 14px;
  margin-right:0;
  transform-origin:right center;
}
.spreadWrap.double .catalogImage.right{
  border-radius:0 14px 14px 0;
  margin-left:0;
  transform-origin:left center;
}

.spreadWrap.page-enter{
  opacity:1;
}
.spreadWrap.page-enter.single-flip .catalogImage,
.spreadWrap.page-enter.flip-forward .catalogImage.right,
.spreadWrap.page-enter.flip-backward .catalogImage.left{
  opacity:.82;
  filter:brightness(.92);
}
.spreadWrap.page-enter.single-flip .catalogImage{
  transform:perspective(2200px) rotateY(-96deg) scale(.985);
  transform-origin:left center;
}
.spreadWrap.page-enter.flip-forward .catalogImage.right{
  transform:perspective(2200px) rotateY(-96deg) scale(.985);
  transform-origin:left center;
  box-shadow:-18px 18px 36px rgba(15,23,42,.16);
}
.spreadWrap.page-enter.flip-backward .catalogImage.left{
  transform:perspective(2200px) rotateY(96deg) scale(.985);
  transform-origin:right center;
  box-shadow:18px 18px 36px rgba(15,23,42,.16);
}
.spreadWrap.page-enter-active.single-flip .catalogImage,
.spreadWrap.page-enter-active.flip-forward .catalogImage.right,
.spreadWrap.page-enter-active.flip-backward .catalogImage.left{
  opacity:1;
  filter:brightness(1);
  transform:perspective(2200px) rotateY(0deg) scale(1);
  transition:transform .82s cubic-bezier(.22,.8,.18,1), opacity .45s ease, filter .45s ease, box-shadow .82s ease;
}
.spreadWrap.page-enter-active.flip-forward .catalogImage.left,
.spreadWrap.page-enter-active.flip-backward .catalogImage.right,
.spreadWrap.page-enter-active.single-flip .catalogImage{
  transition:transform .82s cubic-bezier(.22,.8,.18,1), opacity .45s ease, filter .45s ease, box-shadow .82s ease;
}

.catalogLoader{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  background:transparent;
  backdrop-filter:blur(10px);
  z-index:20;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.catalogLoader.show{ opacity:1; pointer-events:auto; }
.loaderLogo{ width:min(240px, 55vw); height:auto; object-fit:contain; }
.loaderGearWrap{
  width:58px;
  height:58px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(90,176,221,.10);
}
.loaderSpinner{
  width:34px;
  height:34px;
  border-radius:999px;
  border:4px solid rgba(90,176,221,.18);
  border-top-color:var(--brand);
  animation:spin 1s linear infinite;
}
.loaderText{ font-size:19px; font-weight:400; color:#5b2d90; }
.loaderBar{
  width:min(420px, 72vw);
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(90,176,221,.18);
  box-shadow:inset 0 1px 3px rgba(15,23,42,.08);
}
.loaderBar span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:var(--brand);
  transition:width .16s ease;
}

.toolbar{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto auto auto auto auto;
  align-items:center;
  justify-content:center;
  column-gap:8px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadowMd);
  z-index:40000;
  width:auto;
}
.tbtn{
  width:42px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tbtn img{ width:18px; height:18px; }
.tinfo{
  min-width:110px;
  text-align:center;
  font-size:13px;
  font-weight:400;
  font-family:"Aptos","Segoe UI",Arial,sans-serif;
  color:rgba(15,23,42,.82);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width: 980px){
  .replicaHeader{ padding:0 16px; }
  .replicaLogo{ max-width:min(190px, 30vw); }
  .replicaTitle{ font-size:16px; }
  .hdrBtn{ min-width:96px; padding:0 14px; }
  .viewerShell{ width:min(calc(100vw - 120px), 900px); }
}
@media (max-width: 1440px) and (min-width: 981px){
  #view-home{ padding-top:calc(var(--headerH) + 8px); padding-bottom:10px; }
  .homeView{ gap:8px; }
  .homeHero h1{ font-size:clamp(40px, 4vw, 54px); line-height:1.08; }
  .homeHero p{ margin-top:4px; font-size:clamp(16px, 1.45vw, 22px); }
  .homeGrid{ max-width:min(1180px, calc(100vw - 48px)); gap:12px; }
  .homeCard{ padding:8px 8px 12px; }
  .homeName{ margin-top:8px; }
  .homeBtn{ min-width:122px; min-height:40px; font-size:13px; margin-top:8px; }
}

@media (max-width: 1200px){
  #view-home{ padding-top:calc(var(--headerH) + 8px); padding-bottom:12px; }
  .homeView{ gap:8px; }
  .homeHero h1{ font-size:clamp(34px, 3.8vw, 46px); }
  .homeHero p{ font-size:clamp(16px, 1.35vw, 20px); }
  .homeGrid{ grid-template-columns:repeat(4, minmax(0, 1fr)); max-width:min(1120px, calc(100vw - 56px)); gap:12px; }
  .homeCard{ padding:8px 8px 12px; }
  .homeCover{ border-radius:16px; padding:0; }
  .sideMenu{ left:12px; top:calc(var(--headerH) + 22px); gap:10px; }
  .menuItem{ width:240px; min-height:52px; padding:12px 14px; }
  .menuItem .label{ font-size:15px; }
  .stage{ padding:24px 28px 92px 28px; }
  .viewerShell{ width:min(calc(100vw - 120px), 900px); }
}
@media (max-width: 980px){
  .homeGrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:760px; }
}
@media (max-width: 760px){
  :root{ --contentPad:18px; --headerH:68px; }
  .replicaHeader{ padding:0 10px; gap:8px; }
  .replicaTitle{ display:none; }
  .replicaDivider{ display:none !important; }
  .hdrBtn span{ display:none; }
  .hdrBtn{ min-width:38px; width:38px; height:38px; padding:0; }
  .hdrIconBtn{ width:38px; height:38px; }
  .replicaLogo{ height:34px; max-width:min(170px, 42vw); }
  .homeGrid{ grid-template-columns:1fr; gap:14px; max-width:420px; }
  .homeCard{ padding:10px 10px 16px; border-radius:22px; }
  .homeCardLg{ min-height:auto; }
  .homeCover{
    padding:0;
    aspect-ratio:auto;
    min-height:0;
  }
  .homeCover img{
    height:auto;
    object-fit:contain;
  }
  .homeHero h1{ font-size:clamp(28px, 8vw, 40px); }
  .homeHero p{ font-size:clamp(16px, 4.2vw, 20px); }
  .sideMenu{
    left:8px;
    top:calc(var(--headerH) + 14px);
    right:auto;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    max-height:calc(100vh - var(--headerH) - 120px);
  }
  .menuItem{
    width:52px;
    min-width:52px;
    min-height:52px;
    height:52px;
    padding:0;
    justify-content:center;
    gap:0;
    border-radius:16px;
  }
  .menuItem:hover{ transform:none; }
  .menuItem img{ width:24px; height:24px; flex:0 0 24px; }
  .menuItem .label{ display:none; }
  .stage{ padding:12px 10px 96px 72px; }
  .viewerShell{ width:min(calc(100vw - 110px), 860px); }
  .viewerShell{ width:100%; }
  .spreadWrap,
  .spreadWrap.single,
  .spreadWrap.double{
    width:100%;
    max-width:100%;
    max-height:100%;
  }
  .spreadWrap.double .catalogImage{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:calc(100dvh - 190px);
  }
  .spreadWrap.single .catalogImage{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(100dvh - 190px);
  }
  .toolbar{
    width:min(320px, calc(100vw - 16px));
    max-width:calc(100vw - 16px);
    column-gap:4px;
    padding:7px 10px;
    bottom:12px;
    grid-template-columns:auto auto minmax(96px, auto) auto auto;
  }
  .tbtn{ width:30px; height:28px; }
  .tbtn img{ width:13px; height:13px; }
  .tinfo{ min-width:96px; font-size:10px; }
}
@media (max-width: 560px){
  .stage{ padding:10px 8px 92px 60px; }
  .viewerShell{ width:min(calc(100vw - 92px), 820px); }
  .sideMenu{ left:6px; gap:6px; }
  .menuItem{
    width:44px;
    min-width:44px;
    min-height:44px;
    height:44px;
  }
  .toolbar{
    width:min(300px, calc(100vw - 12px));
    max-width:calc(100vw - 12px);
    column-gap:3px;
    padding:7px 9px;
    bottom:10px;
    grid-template-columns:auto auto minmax(88px, auto) auto auto;
  }
  .tbtn{ width:28px; height:26px; }
  .tbtn img{ width:12px; height:12px; }
  .tinfo{ min-width:88px; font-size:9px; }
}

@keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

.homeCover{ padding:0 !important; }
.homeCover img{
  object-fit: cover !important; 
  background: transparent !important;
  box-shadow: none !important; 
}

@media (max-width: 1366px){
  .homeHero h1{ font-size: clamp(32px, 3.6vw, 44px); }
  .homeHero p{ font-size: clamp(14px, 1.2vw, 18px); }
  .homeGrid{ gap:10px; max-width:min(1040px, calc(100vw - 40px)); }
  .homeCard{ padding:6px 6px 10px; }
  .homeBtn{ min-width:110px; min-height:36px; font-size:12px; }
}

@media (max-width: 1024px){
  .homeHero h1{ font-size: clamp(26px, 3.2vw, 36px); }
  .homeHero p{ font-size: 14px; }
  .homeGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
  .homeCard{ padding:8px; }
}

.homeHero h1{
  white-space: normal;
}

.break-line{
  display: block;
}

@media (max-width: 1366px){
  .homeHero h1{
    white-space: nowrap;
  }

  .break-line{
    display: inline;
  }
}

@media (max-width: 1366px){
  .homeHero h1{
    font-size: clamp(26px, 3vw, 36px); 
    line-height: 1.1;
  }

  .homeHero p{
    font-size: clamp(18px, 1.6vw, 22px); 
    max-width: 720px;
  }
}

@media (max-width: 1024px){
  .homeHero h1{
    font-size: 24px;
  }

  .homeHero p{
    font-size: 18px;
  }
}

@media (max-width: 480px){
  .homeHero{
    padding: 0 10px;
  }

  .homeHero h1{
    font-size: 20px;
    white-space: normal !important; 
    text-align: center;
  }

  .break-line{
    display: block; 
  }

  .homeHero p{
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
  }
}

@media (max-width: 1366px){
  :root{
    --headerH: 64px;
  }

  .replicaHeader{
    padding: 0 16px;
  }

  .replicaLogo{
    height: 40px;
    max-width: 160px;
  }

  .hdrBtn{
    height: 34px;
    font-size: 11px;
    padding: 0 14px;
  }
}

@media (max-width: 1024px){
  :root{
    --headerH: 58px;
  }

  .replicaLogo{
    height: 36px;
  }

  .hdrBtn{
    height: 32px;
    font-size: 10px;
  }
}

@media (max-width: 480px){
  :root{
    --headerH: 54px;
  }

  .replicaLogo{
    height: 32px;
  }
}

.hdrBtnIconOnly{
  min-width:40px !important;
  width:40px;
  height:40px;
  padding:0 !important;
  gap:0 !important;
}
.hdrBtnIconOnly span{
  display:none !important;
}
.hdrBtnIconOnly img{
  width:18px;
  height:18px;
}

.replicaTitle{
  font-size:clamp(14px, 1.2vw, 18px);
  max-width:min(38vw, 420px);
}

@media (max-width: 1366px){
  .replicaTitle{
    font-size:clamp(12px, 1.1vw, 16px);
    max-width:min(34vw, 320px);
  }

  .hdrBtnIconOnly{
    min-width:34px !important;
    width:34px;
    height:34px;
  }

  .hdrBtnIconOnly img{
    width:16px;
    height:16px;
  }
}

@media (max-width: 1024px){
  .replicaTitle{
    font-size:12px;
    max-width:min(30vw, 220px);
  }

  .hdrBtnIconOnly{
    min-width:32px !important;
    width:32px;
    height:32px;
  }

  .hdrBtnIconOnly img{
    width:15px;
    height:15px;
  }
}

@media (max-width: 760px){
  body.viewerMode .replicaTitle{
    display:block;
    font-size:11px;
    max-width:120px;
  }

  body.viewerMode .replicaDivider{
    display:block !important;
    height:26px;
  }

  .hdrBtnIconOnly{
    min-width:38px !important;
    width:38px;
    height:38px;
  }
}

@media (max-width: 480px){
  body.viewerMode .replicaTitle{
    font-size:10px;
    max-width:88px;
  }

  body.viewerMode .replicaDivider{
    height:22px;
  }
}

.homeView{ gap:28px; }

.homeHero h1{
  margin-bottom:18px;
}
.homeHero h1 span{
  font-weight:900;
}
.homeHero p{
  margin-top:0;
}

.homeGrid{
  gap:48px;
}

.homeCard{
  padding:18px 18px 20px;
}

.homeCover{
  cursor:pointer;
}

.homeName{
  margin-top:14px;
  font-size:18px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.4px;
}

@media (max-width: 1366px){
  .homeView{ gap:24px; }
  .homeGrid{ gap:22px; }
  .homeCard{ padding:16px 16px 18px; }
  .homeHero h1{ margin-bottom:16px; }
  .homeName{ font-size:17px; }
}

@media (max-width: 1024px){
  .homeView{ gap:22px; }
  .homeGrid{ gap:20px; }
  .homeHero h1{ margin-bottom:14px; }
  .homeCard{ padding:14px 14px 16px; }
  .homeName{ font-size:16px; }
}

@media (max-width: 760px){
  .homeView{ gap:20px; }
  .homeGrid{ gap:18px; }
  .homeHero h1{ margin-bottom:12px; }
  .homeCard{ padding:12px 12px 16px; }
  .homeName{ font-size:15px; }
}

@media (max-width: 1366px){
  .homeHero p{
    white-space: nowrap;
  }
  .homeGrid{ gap:28px; }
}

@media (max-width: 1024px){
  .homeGrid{ gap:26px; }
}

#view-home,
.stage{
  background: transparent !important;
}

@media (max-width: 1100px){
  #view-home{
    padding-left:16px;
    padding-right:16px;
  }

  .homeHero{
    padding:0 8px;
  }

  .homeHero h1{
    white-space:normal !important;
    font-size:clamp(26px, 4.2vw, 40px) !important;
    line-height:1.12;
  }

  .break-line{
    display:inline !important;
  }

  .homeHero p{
    white-space:normal !important;
    max-width:760px;
    font-size:clamp(15px, 2vw, 20px) !important;
    line-height:1.35;
  }

  .homeGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-width:min(860px, calc(100vw - 32px)) !important;
    gap:22px !important;
  }

  .homeCard{
    display:flex;
    flex-direction:column;
    padding:14px !important;
  }

  .homeCover{
    aspect-ratio:0.69 !important;
  }

  .homeName{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.05;
  }

  .homeBtn{
    margin-top:auto;
  }
}

@media (max-width: 760px){
  #view-home{
    padding-left:14px;
    padding-right:14px;
  }

  .homeHero h1{
    font-size:clamp(22px, 8vw, 30px) !important;
  }

  .break-line{
    display:block !important;
  }

  .homeHero p{
    font-size:15px !important;
  }

  .homeGrid{
    grid-template-columns:1fr !important;
    max-width:300px !important;
    gap:18px !important;
  }

  .homeCard{
    padding:12px !important;
  }

  .homeName{
    min-height:0;
    font-size:14px;
  }
}

.homeCard{
  display:flex;
  flex-direction:column;
}
.homeCover{
  aspect-ratio:0.69 !important;
}
.homeCover img{
  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:center top;
}
.homeName{
  min-height:2.4em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.05;
}
.homeBtn{
  margin-top:auto;
}

@media (max-width: 1100px){
  #view-home{
    min-height:100vh;
    padding-top:calc(var(--headerH) + 8px);
    padding-bottom:8px;
    padding-left:12px;
    padding-right:12px;
  }

  .homeView{
    gap:12px !important;
  }

  .homeHero{
    padding:0 6px;
  }

  .homeHero h1{
    white-space:normal !important;
    font-size:clamp(24px, 4vw, 36px) !important;
    line-height:1.05;
    margin-bottom:8px !important;
  }

  .break-line{
    display:block !important;
  }

  .homeHero p{
    white-space:normal !important;
    max-width:none !important;
    font-size:clamp(14px, 1.8vw, 18px) !important;
    line-height:1.25;
  }

  .homeGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-width:min(760px, calc(100vw - 24px)) !important;
    gap:14px !important;
  }

  .homeCard{
    padding:10px !important;
    border-radius:18px;
  }

  .homeName{
    font-size:14px !important;
    margin-top:8px !important;
  }

  .homeBtn{
    min-width:110px !important;
    min-height:34px !important;
    font-size:12px !important;
    margin-top:8px !important;
    padding:0 12px !important;
  }
}

@media (max-width: 600px){
  :root{
    --headerH: 50px !important;
  }

  .replicaHeader{
    padding:0 8px !important;
  }

  .replicaLogo{
    height:24px !important;
    max-width:110px !important;
  }

  .hdrBtn{
    min-width:34px !important;
    width:34px !important;
    height:34px !important;
    padding:0 !important;
  }

  .hdrBtn span{
    display:none !important;
  }

  #view-home{
    min-height:100dvh;
    padding-top:calc(var(--headerH) + 6px) !important;
    padding-bottom:6px !important;
    padding-left:10px !important;
    padding-right:10px !important;
    justify-content:flex-start !important;
  }

  .homeView{
    gap:10px !important;
  }

  .homeHero{
    padding:0 2px !important;
  }

  .homeHero h1{
    font-size:clamp(18px, 7vw, 24px) !important;
    line-height:1.02 !important;
    margin-bottom:6px !important;
  }

  .homeHero p{
    font-size:12px !important;
    line-height:1.2 !important;
    margin:0 auto !important;
  }

  .homeGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-width:calc(100vw - 20px) !important;
    gap:12px !important;
  }

  .homeCard{
    padding:8px !important;
    border-radius:16px !important;
  }

  .homeCover{
    border-radius:14px !important;
  }

  .homeCover img{
    border-radius:14px !important;
  }

  .homeName{
    font-size:10px !important;
    margin-top:6px !important;
    min-height:2.2em !important;
    letter-spacing:0 !important;
  }

  .homeBtn{
    min-width:84px !important;
    min-height:28px !important;
    height:28px !important;
    font-size:10px !important;
    padding:0 8px !important;
    margin-top:6px !important;
  }
}

@media (max-width: 380px) and (max-height: 700px){
  #view-home{
    padding-top:calc(var(--headerH) + 4px) !important;
    padding-bottom:4px !important;
  }

  .homeView{
    gap:8px !important;
  }

  .homeHero h1{
    font-size:16px !important;
    margin-bottom:4px !important;
  }

  .homeHero p{
    font-size:11px !important;
    line-height:1.15 !important;
  }

  .homeGrid{
    gap:10px !important;
  }

  .homeCard{
    padding:7px !important;
  }

  .homeName{
    font-size:9px !important;
    margin-top:5px !important;
  }

  .homeBtn{
    min-width:78px !important;
    min-height:26px !important;
    height:26px !important;
    font-size:9px !important;
    margin-top:5px !important;
  }
}

.homeCard{
  padding:22px !important;
  border-radius:28px !important;
  background:#ffffff !important;
  box-shadow:0 25px 60px rgba(0,0,0,0.18) !important;
}

.floatingLinks{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:52000;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.floatingBtn{
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 14px 30px rgba(15,23,42,.18);
}
.floatingBtn img{
  width:28px;
  height:28px;
  object-fit:contain;
}
.floatingBtn:hover{
  transform:translateY(-2px);
}

@media (max-width: 1366px) and (min-width: 1025px){
  .sideMenu{
    top:calc(var(--headerH) + 18px);
    gap:8px;
    max-height:calc(100vh - var(--headerH) - 88px);
  }
  .menuItem{
    min-height:48px;
    padding:10px 14px;
  }
  .menuItem img{
    width:24px;
    height:24px;
    flex:0 0 24px;
  }
  .menuItem .label{
    font-size:14px;
    line-height:1.1;
  }
}

@media (max-width: 1024px){
  .sideMenu{
    left:8px;
    top:calc(var(--headerH) + 14px);
    right:auto;
    flex-direction:column;
    flex-wrap:nowrap;
    gap:8px;
    max-height:calc(100vh - var(--headerH) - 120px);
  }
  .menuItem{
    width:52px;
    min-width:52px;
    min-height:52px;
    height:52px;
    padding:0;
    justify-content:center;
    gap:0;
    border-radius:16px;
  }
  .menuItem:hover{ transform:none; }
  .menuItem img{
    width:24px;
    height:24px;
    flex:0 0 24px;
  }
  .menuItem .label{
    display:none !important;
  }
  .stage{
    padding-left:72px;
  }
}

@media (max-width: 760px){
  .floatingLinks{
    right:12px;
    bottom:12px;
    gap:10px;
  }
  .floatingBtn{
    width:48px;
    height:48px;
  }
  .floatingBtn img{
    width:24px;
    height:24px;
  }
}

.floatingBtnShare{
  display:none;
}
body.viewerMode .floatingBtnShare{
  display:flex;
}

body:not(.viewerMode) .replicaHeader{
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

#view-home{
  padding-top:0 !important;
}

#view-home{
  padding-top:calc(var(--headerH) + 18px) !important;
}

body.viewerMode .replicaHeader{
  background:transparent !important;
  border-bottom:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}

body.viewerMode .stage{
  inset:0 !important;
  padding-top:calc(var(--headerH) + 20px) !important;
}

.replicaLeft{
  gap:10px;
}
body.viewerMode .replicaTitle{
  max-width:min(32vw, 260px);
}

.floatingLinks{
  right:max(10px, env(safe-area-inset-right));
  bottom:max(10px, env(safe-area-inset-bottom));
  gap:clamp(8px, 1.4vw, 12px);
}
.floatingBtn{
  width:clamp(42px, 4.8vw, 56px);
  height:clamp(42px, 4.8vw, 56px);
}
.floatingBtn img{
  width:clamp(20px, 2.3vw, 28px);
  height:clamp(20px, 2.3vw, 28px);
}

@media (max-width: 900px){
  #view-home{
    padding-top:calc(var(--headerH) + 14px) !important;
  }

  body.viewerMode .stage{
    padding-top:calc(var(--headerH) + 14px) !important;
  }

  body.viewerMode .replicaTitle{
    max-width:140px;
    font-size:11px;
  }

  .floatingLinks{
    right:10px;
    bottom:10px;
    gap:8px;
  }

  .floatingBtn{
    width:44px;
    height:44px;
  }

  .floatingBtn img{
    width:22px;
    height:22px;
  }
}

@media (max-width: 600px){
  #view-home{
    padding-top:calc(var(--headerH) + 20px) !important;
  }

  .homeHero{
    padding-top:4px !important;
  }

  .homeHero h1{
    max-width:100%;
    margin-top:0 !important;
  }

  body.viewerMode .replicaHeader{
    padding:10px 8px 0 !important;
    align-items:flex-start !important;
  }

  body.viewerMode .replicaLogo{
    height:22px !important;
    max-width:96px !important;
  }

  body.viewerMode .replicaDivider{
    height:18px !important;
    margin-top:2px;
  }

  body.viewerMode .replicaTitle{
    display:block !important;
    max-width:86px !important;
    font-size:10px !important;
    line-height:1.05;
  }

  body.viewerMode .hdrBtnIconOnly,
  body.viewerMode .hdrIconBtn{
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
  }

  body.viewerMode .hdrBtnIconOnly img,
  body.viewerMode .hdrIconBtn img{
    width:14px !important;
    height:14px !important;
  }

  body.viewerMode .stage{
    inset:0 !important;
    padding:60px 8px 88px 60px !important;
  }

  .floatingLinks{
    right:8px !important;
    bottom:8px !important;
    gap:8px !important;
  }

  .floatingBtn{
    width:40px !important;
    height:40px !important;
  }

  .floatingBtn img{
    width:20px !important;
    height:20px !important;
  }
}

@media (max-width: 420px){
  #view-home{
    padding-top:calc(var(--headerH) + 24px) !important;
  }

  .homeHero h1{
    font-size:17px !important;
    line-height:1.04 !important;
  }

  .homeHero p{
    font-size:11px !important;
  }

  body.viewerMode .replicaTitle{
    max-width:72px !important;
    font-size:9px !important;
  }

  body.viewerMode .stage{
    padding:58px 6px 84px 56px !important;
  }

  .floatingBtn{
    width:38px !important;
    height:38px !important;
  }

  .floatingBtn img{
    width:18px !important;
    height:18px !important;
  }
}

:root{
  --floatingBtnSize:48px;
  --floatingBtnIcon:24px;
  --headerActionSize:40px;
}

.hdrBtn,
.hdrIconBtn,
.hdrBtnIconOnly{
  width:var(--headerActionSize) !important;
  min-width:var(--headerActionSize) !important;
  height:var(--headerActionSize) !important;
  padding:0 !important;
  gap:0 !important;
}

.hdrBtn img,
.hdrIconBtn img,
.hdrBtnIconOnly img{
  width:18px;
  height:18px;
}

.floatingBtn{
  width:var(--floatingBtnSize) !important;
  height:var(--floatingBtnSize) !important;
  will-change:transform;
}

.floatingBtn img{
  width:var(--floatingBtnIcon) !important;
  height:var(--floatingBtnIcon) !important;
}

.replicaHeader,
.menuItem,
.homeCard,
.toolbar,
.catalogLoader,
.imageCanvas,
.floatingBtn{
  will-change:transform;
}

@media (max-width: 1024px){
  :root{
    --floatingBtnSize:41px;
    --floatingBtnIcon:20px;
    --headerActionSize:34px;
  }

  .hdrBtn img,
  .hdrIconBtn img,
  .hdrBtnIconOnly img{
    width:15px;
    height:15px;
  }
}

@media (max-width: 600px){
  :root{
    --floatingBtnSize:37px;
    --floatingBtnIcon:18px;
    --headerActionSize:32px;
  }

  .hdrBtn img,
  .hdrIconBtn img,
  .hdrBtnIconOnly img{
    width:14px;
    height:14px;
  }
}


@media (max-width: 900px){
  .menuItem{
    width:44px !important;
    min-width:44px !important;
    height:44px !important;
    min-height:44px !important;
    border-radius:14px;
  }

  .menuItem img{
    width:20px !important;
    height:20px !important;
  }
}



.catalogImage{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
}