/* ===== Nubebe — catálogo modal con zoom ===== */
.catalog{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
  background:rgba(20,28,46,.72);backdrop-filter:blur(6px);padding:clamp(10px,3vw,40px)}
.catalog.open{display:flex}
.catalog__box{position:relative;width:min(1100px,100%);max-height:94vh;overflow:hidden;background:#fff;border-radius:18px;
  box-shadow:0 40px 100px -30px rgba(20,28,46,.7);display:flex;flex-direction:column;transform:translateY(14px) scale(.99);opacity:0;transition:.35s cubic-bezier(.22,1,.36,1)}
.catalog.open .catalog__box{transform:none;opacity:1}
.catalog__close{position:absolute;top:12px;right:14px;z-index:5;width:40px;height:40px;border:0;border-radius:50%;
  background:#fff;color:#2b3550;font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:0 8px 20px -8px rgba(43,53,80,.5);transition:.2s}
.catalog__close:hover{background:#1597e5;color:#fff;transform:rotate(90deg)}

.catalog__main{display:grid;grid-template-columns:1.15fr .85fr;gap:0;min-height:0;flex:1}
/* ---- Stage con zoom ---- */
.cat__stage{position:relative;background:#eef3f9;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3}
.cat__stage img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;transform-origin:center center;will-change:transform}
.cat__stage.zoom{cursor:zoom-out}
.cat__stage.zoom img{transform:scale(2.2);transition:transform .1s linear}
.cat__hint{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(43,53,80,.82);color:#fff;font-size:.72rem;
  letter-spacing:.06em;padding:7px 13px;border-radius:999px;display:inline-flex;gap:7px;align-items:center;pointer-events:none;transition:opacity .3s}
.cat__stage.zoom .cat__hint{opacity:0}
.cat__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:#2b3550;font-size:1.6rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(43,53,80,.5);transition:.2s}
.cat__nav:hover{background:#1597e5;color:#fff}
.cat__prev{left:12px}.cat__next{right:12px}

/* ---- Info ---- */
.cat__info{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;overflow:auto}
.cat__count{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#1597e5;font-weight:600;margin-bottom:8px}
.cat__name{font-family:'Fraunces',serif;font-size:clamp(1.6rem,3vw,2.3rem);color:#2b3550;line-height:1.05}
.cat__desc{color:#697086;margin:12px 0 18px;font-size:.98rem}
.cat__specs{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 22px;padding:0}
.cat__specs li{position:relative;padding-left:24px;font-size:.92rem;color:#1b2233}
.cat__specs li::before{content:"✓";position:absolute;left:0;color:#1597e5;font-weight:700}
.cat__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.cat__btn{flex:1;min-width:150px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.92rem;
  padding:14px 18px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:.2s;text-decoration:none}
.cat__btn--wa{background:#25d366;color:#fff;box-shadow:0 12px 26px -10px rgba(37,211,102,.7)}
.cat__btn--wa:hover{transform:translateY(-2px)}
.cat__btn--ghost{background:#fff;color:#2b3550;border-color:#e3e9f1}
.cat__btn--ghost:hover{border-color:#1597e5;color:#1597e5}

/* ---- Thumbnails ---- */
.catalog__thumbs{display:flex;gap:10px;padding:14px clamp(16px,3vw,24px);overflow-x:auto;border-top:1px solid #eef3f9;background:#fbfcfe}
.catalog__thumbs::-webkit-scrollbar{height:6px}.catalog__thumbs::-webkit-scrollbar-thumb{background:#cdd7e6;border-radius:6px}
.cat__thumb{flex:0 0 auto;width:64px;height:64px;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:#eef3f9;transition:.2s}
.cat__thumb img{width:100%;height:100%;object-fit:cover}
.cat__thumb:hover{transform:translateY(-2px)}
.cat__thumb.active{border-color:#1597e5;box-shadow:0 8px 18px -8px rgba(21,151,229,.7)}

/* Señal de que las tarjetas/rueda abren catálogo */
.card{cursor:pointer}

@media(max-width:820px){
  .catalog__main{grid-template-columns:1fr}
  .cat__stage{aspect-ratio:16/11}
  .cat__info{max-height:44vh}
}
@media(prefers-reduced-motion:reduce){
  .catalog__box,.cat__stage img,.catalog__close{transition:none}
}