/* ═══════════════════════════════════════════════
   CATALOGO.CSS — XM Sport
═══════════════════════════════════════════════ */

/* ── HEADER ──────────────────────────────────── */
.cat-header { background:var(--black); padding:52px 6vw 40px; border-bottom:1px solid rgba(255,255,255,.06); }
.cat-header-inner { max-width:1300px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cat-eyebrow { font-family:var(--font-sub); font-weight:700; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(245,245,240,.35); margin-bottom:10px; }
.cat-titulo { font-family:var(--font-display); font-size:clamp(2.8rem,6vw,5rem); line-height:.92; letter-spacing:.03em; text-transform:uppercase; color:var(--white); }
.cat-titulo em { font-style:normal; color:rgba(245,245,240,.3); }
.cat-wa-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; background:#25d366; color:#fff; border-radius:8px; font-family:var(--font-display); font-weight:800; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:background .18s; white-space:nowrap; flex-shrink:0; }
.cat-wa-btn:hover { background:#1dba58; }

/* ── FILTROS ─────────────────────────────────── */
.cat-filtros-wrap { position:sticky; top:var(--nav-h); z-index:90; background:#0d0d0d; border-bottom:1px solid rgba(255,255,255,.06); border-top:1px solid rgba(255,255,255,.04); }
.cat-filtros { max-width:1300px; margin:0 auto; padding:0 6vw; }
.cat-tabs-scroll { display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; padding:10px 0 0; border-bottom:1px solid rgba(255,255,255,.05); }
.cat-tabs-scroll::-webkit-scrollbar { display:none; }
.cat-tab { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:6px 6px 0 0; font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,245,240,.4); text-decoration:none; white-space:nowrap; flex-shrink:0; transition:color .15s,background .15s; position:relative; }
.cat-tab:hover { color:rgba(245,245,240,.8); background:rgba(255,255,255,.04); }
.cat-tab.active { color:var(--white); background:rgba(255,255,255,.06); }
.cat-tab.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--white); border-radius:2px 2px 0 0; }
.cat-tab i { font-size:.72rem; opacity:.7; }
.cat-filtros-row { display:flex; align-items:center; gap:8px; padding:8px 0; }
.cat-search-wrap { flex:1; display:flex; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:7px; overflow:hidden; position:relative; }
.cat-search-wrap > i { position:absolute; left:12px; color:var(--gray); font-size:.75rem; pointer-events:none; }
.cat-search-input { flex:1; background:none; border:none; padding:9px 8px 9px 34px; color:var(--white); font-family:var(--font-body); font-size:.83rem; outline:none; min-width:0; }
.cat-search-input::placeholder { color:var(--gray); }
.cat-filtro-btn { padding:9px 16px; background:var(--white); color:var(--black); border:none; font-family:var(--font-display); font-weight:800; font-size:.82rem; cursor:pointer; transition:background .15s; flex-shrink:0; }
.cat-filtro-btn:hover { background:#e0e0da; }
.cat-clear-btn { font-size:.78rem; color:rgba(245,245,240,.35); text-decoration:none; white-space:nowrap; transition:color .15s; flex-shrink:0; }
.cat-clear-btn:hover { color:var(--white); }

/* ── GRID ────────────────────────────────────── */
.cat-body { max-width:1300px; margin:0 auto; padding:32px 6vw 80px; }
.cat-meta { font-size:.78rem; color:rgba(245,245,240,.3); font-family:var(--font-sub); letter-spacing:.08em; text-transform:uppercase; margin-bottom:24px; }
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

/* ── CARD ────────────────────────────────────── */
.cat-card {
    background: var(--gray3);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    transition: border-color .2s, transform .25s, box-shadow .25s;
    position: relative;
}
.cat-card:hover { border-color:rgba(255,255,255,.18); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.6); }

/* Link principal ocupa toda la card */
.cat-card-link { display:block; text-decoration:none; color:inherit; }

/* Imagen — altura fija, no aspect-ratio, para evitar bugs con sliders del admin */
.cat-card-img {
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: var(--gray2);
    position: relative;
}
.cat-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .5s ease;
}
.cat-card:hover .cat-card-img img { transform: scale(1.05); }
.cat-card-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; color:rgba(255,255,255,.07); }

/* Badge destacado */
.cat-card-badge { position:absolute; top:10px; left:10px; background:rgba(10,10,10,.7); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.18); color:var(--white); padding:3px 10px; border-radius:999px; font-family:var(--font-display); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; z-index:1; }

/* Info abajo */
.cat-card-body { padding:12px 14px 14px; }
.cat-card-dep { font-family:var(--font-sub); font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,245,240,.35); margin-bottom:3px; }
.cat-card-nombre { font-family:var(--font-display); font-size:1.1rem; text-transform:uppercase; letter-spacing:.03em; color:var(--white); line-height:1.1; margin-bottom:3px; }
.cat-card-precio { font-family:var(--font-sub); font-weight:700; font-size:.8rem; color:rgba(245,245,240,.5); margin-bottom:10px; }
.cat-card-det { display:block; width:100%; padding:8px 10px; background:rgba(255,255,255,.07); border-radius:4px; font-family:var(--font-sub); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,245,240,.7); text-align:center; transition:background .15s; }
.cat-card:hover .cat-card-det { background:rgba(255,255,255,.14); color:var(--white); }

/* Botón WA flotante — solo desktop, aparece al hover */
.cat-card-wa { position:absolute; bottom:10px; right:10px; width:38px; height:38px; border-radius:8px; background:#25d366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; text-decoration:none; opacity:0; transform:translateY(6px); transition:opacity .2s,transform .2s,background .15s; z-index:2; }
.cat-card:hover .cat-card-wa { opacity:1; transform:translateY(0); }
.cat-card-wa:hover { background:#1dba58; }

/* WA inline — solo mobile */
.cat-card-wa-mobile { display:none; align-items:center; justify-content:center; gap:6px; padding:7px 10px; margin-top:8px; background:#25d366; color:#fff; border-radius:6px; font-family:var(--font-display); font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:background .15s; }
.cat-card-wa-mobile:hover { background:#1dba58; }

/* Empty */
.cat-empty { text-align:center; padding:80px 20px; color:rgba(245,245,240,.2); }
.cat-empty i { font-size:3rem; display:block; margin-bottom:16px; }
.cat-empty p { font-family:var(--font-display); font-size:1.1rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; }
.cat-empty-link { font-size:.82rem; color:rgba(245,245,240,.4); text-decoration:underline; transition:color .15s; }
.cat-empty-link:hover { color:var(--white); }

/* ── DETALLE ─────────────────────────────────── */
.cat-detalle { max-width:1300px; margin:0 auto; padding:40px 6vw 80px; }
.cat-detalle-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start; }
.det-galeria { position:sticky; top:calc(var(--nav-h) + 20px); }
.det-img-main { border-radius:12px; overflow:hidden; aspect-ratio:4/5; background:var(--gray3); margin-bottom:10px; }
.det-img-principal { width:100%; height:100%; object-fit:cover; display:block; }
.det-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:5rem; color:rgba(255,255,255,.07); }
.det-thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.det-thumb { width:72px; height:72px; border-radius:8px; object-fit:cover; border:2px solid transparent; cursor:pointer; transition:border-color .15s,opacity .15s; opacity:.6; }
.det-thumb:hover { opacity:1; }
.det-thumb.active { border-color:var(--white); opacity:1; }
.det-back { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:700; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(245,245,240,.35); text-decoration:none; margin-bottom:20px; transition:color .15s; }
.det-back:hover { color:var(--white); }
.det-eyebrow { font-family:var(--font-sub); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,245,240,.35); margin-bottom:10px; }
.det-titulo { font-family:var(--font-display); font-size:clamp(2.5rem,4vw,4rem); text-transform:uppercase; letter-spacing:.03em; line-height:.92; color:var(--white); margin-bottom:14px; }
.det-precio { font-family:var(--font-sub); font-weight:700; font-size:1.2rem; color:rgba(245,245,240,.6); margin-bottom:18px; }
.det-desc { font-size:.9rem; color:rgba(245,245,240,.5); line-height:1.7; margin-bottom:24px; }
.det-wa-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:15px; background:#25d366; color:#fff; border-radius:10px; font-family:var(--font-display); font-weight:800; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; margin-bottom:10px; transition:background .18s,transform .14s; }
.det-wa-btn:hover { background:#1dba58; transform:translateY(-2px); }
.det-wa-btn i { font-size:1.2rem; }
.det-cat-btn { display:flex; align-items:center; justify-content:center; width:100%; padding:13px; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:10px; font-family:var(--font-display); font-weight:700; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(245,245,240,.5); text-decoration:none; transition:border-color .18s,color .18s; }
.det-cat-btn:hover { border-color:rgba(255,255,255,.35); color:var(--white); }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:1100px) { .cat-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:860px) {
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .cat-card-img{height:260px}
    .cat-card-wa{display:none}
    .cat-card-wa-mobile{display:flex}
    .cat-header{padding:36px 5vw 28px}
    .cat-header-inner{flex-direction:column;align-items:flex-start}
    .cat-detalle-inner{grid-template-columns:1fr;gap:32px}
    .det-galeria{position:static}
    .cat-filtros{padding:0 5vw}
    .cat-body{padding:24px 5vw 60px}
}
@media (max-width:480px) {
    .cat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
    .cat-card-img{height:200px}
    .cat-detalle{padding:24px 5vw 60px}
    .det-specs{grid-template-columns:1fr}
    .det-thumbs .det-thumb{width:56px;height:56px}
}