/* ============================================
   CATEGORY TABS
   ============================================ */
.cfw-catalogo-wrap { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.cfw-front-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:16px 16px 0; max-width:1000px; margin:0 auto; }
.cfw-front-tab { padding:10px 22px; border:2px solid #ddd; background:#fff; color:#555; border-radius:30px; font-size:15px; font-weight:600; cursor:pointer; transition:all .2s; }
.cfw-front-tab:hover { border-color:#999; color:#333; }
.cfw-front-tab.active { background:#333; color:#fff; border-color:#333; }
.cfw-cat-panel { display:none; }
.cfw-cat-panel.active { display:block; }

/* ============================================
   BASE
   ============================================ */
.cfw-catalogo { position:relative; width:100%; overflow:hidden; background:#f2f2f2; }
.cfw-slider { width:100%; overflow:hidden; }
.cfw-track { display:flex; transition:transform .4s cubic-bezier(.25,.8,.25,1); will-change:transform; }
.cfw-track.swiping { transition:none !important; }
.cfw-slide { min-width:100%; display:flex; flex-direction:column; padding:16px; box-sizing:border-box; }

.cfw-slide-img { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#e8e8e8; border-radius:16px; min-height:0; }
.cfw-slide-img img { width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
.cfw-slide[data-active="true"] .cfw-slide-img img { animation:cfwFadeIn .4s ease forwards; }
@keyframes cfwFadeIn { from{opacity:.6;transform:scale(.97)} to{opacity:1;transform:scale(1)} }

/* Button */
.cfw-btn-whatsapp {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px 24px; margin-top:12px;
    font-size:16px; font-weight:700; border:none; border-radius:12px;
    cursor:pointer; transition:filter .2s,transform .15s; flex-shrink:0; font-family:inherit;
}
.cfw-btn-whatsapp:hover { filter:brightness(.88); transform:scale(1.02); }
.cfw-btn-whatsapp:active { transform:scale(.98); }
.cfw-btn-whatsapp svg { flex-shrink:0; }
.cfw-btn-whatsapp.loading { opacity:.7; pointer-events:none; }

/* Arrows */
.cfw-arrow {
    position:absolute; top:50%; transform:translateY(-60%); z-index:10;
    background:rgba(0,0,0,.25); backdrop-filter:blur(8px); color:#fff; border:none;
    width:44px; height:44px; border-radius:50%; font-size:26px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .2s,transform .15s;
}
.cfw-arrow:hover { background:rgba(0,0,0,.45); transform:translateY(-60%) scale(1.1); }
.cfw-arrow-left { left:20px; } .cfw-arrow-right { right:20px; }

/* Dots */
.cfw-dots { display:flex; justify-content:center; gap:8px; padding:12px 0 16px; }
.cfw-dot { width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,.2); cursor:pointer; transition:.2s; }
.cfw-dot.active { background:rgba(0,0,0,.55); transform:scale(1.3); }
.cfw-dots.cfw-dots-many { display:none; }

/* Counter */
.cfw-counter { position:absolute; top:24px; right:24px; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); color:#fff; padding:6px 14px; border-radius:20px; font-size:14px; font-weight:600; z-index:10; display:none; }

/* ============================================
   SHARED NON-SLIDER STYLES
   ============================================ */
.is-not-slider .cfw-slider { overflow:visible; }
.is-not-slider .cfw-track { transition:none; transform:none !important; }
.is-not-slider .cfw-arrow, .is-not-slider .cfw-dots, .is-not-slider .cfw-counter { display:none !important; }

/* ============================================
   === DESKTOP LAYOUTS (>768px) ===
   ============================================ */
@media (min-width:769px) {
    .cfw-catalogo { max-width:1000px; margin:24px auto; border-radius:20px; box-shadow:0 4px 30px rgba(0,0,0,.08); }

    /* SLIDER */
    .cfw-desktop-slider .cfw-slide { padding:24px; }
    .cfw-desktop-slider .cfw-slide-img { height:580px; border-radius:20px; }
    .cfw-desktop-slider .cfw-btn-whatsapp { margin-top:16px; border-radius:14px; padding:18px 24px; font-size:18px; }

    /* GRID shared */
    .cfw-desktop-grid-1 .cfw-track, .cfw-desktop-grid-2 .cfw-track, .cfw-desktop-grid-3 .cfw-track {
        display:grid; transition:none; transform:none !important;
    }
    .cfw-desktop-grid-1 .cfw-slider, .cfw-desktop-grid-2 .cfw-slider, .cfw-desktop-grid-3 .cfw-slider { overflow:visible; }
    .cfw-desktop-grid-1 .cfw-slide, .cfw-desktop-grid-2 .cfw-slide, .cfw-desktop-grid-3 .cfw-slide { min-width:0; padding:12px; }
    .cfw-desktop-grid-1 .cfw-slide-img, .cfw-desktop-grid-2 .cfw-slide-img, .cfw-desktop-grid-3 .cfw-slide-img { height:auto; max-height:500px; }
    .cfw-desktop-grid-1 .cfw-slide-img img, .cfw-desktop-grid-2 .cfw-slide-img img, .cfw-desktop-grid-3 .cfw-slide-img img { height:auto; max-height:500px; object-fit:cover; }
    .cfw-desktop-grid-1 .cfw-arrow, .cfw-desktop-grid-2 .cfw-arrow, .cfw-desktop-grid-3 .cfw-arrow,
    .cfw-desktop-grid-1 .cfw-dots, .cfw-desktop-grid-2 .cfw-dots, .cfw-desktop-grid-3 .cfw-dots,
    .cfw-desktop-grid-1 .cfw-counter, .cfw-desktop-grid-2 .cfw-counter, .cfw-desktop-grid-3 .cfw-counter { display:none !important; }

    .cfw-desktop-grid-1 .cfw-track { grid-template-columns:1fr; max-width:600px; margin:0 auto; }
    .cfw-desktop-grid-2 .cfw-track { grid-template-columns:repeat(2,1fr); }
    .cfw-desktop-grid-3 .cfw-track { grid-template-columns:repeat(3,1fr); }
    .cfw-desktop-grid-3 .cfw-slide-img { max-height:350px; }
    .cfw-desktop-grid-3 .cfw-slide-img img { max-height:350px; }

    /* MASONRY */
    .cfw-desktop-masonry .cfw-slider { overflow:visible; }
    .cfw-desktop-masonry .cfw-track {
        display:block; column-count:3; column-gap:16px; padding:16px;
        transition:none; transform:none !important;
    }
    .cfw-desktop-masonry .cfw-slide {
        min-width:0; break-inside:avoid; margin-bottom:16px; padding:0;
        background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.06);
    }
    .cfw-desktop-masonry .cfw-slide-img { height:auto; border-radius:0; }
    .cfw-desktop-masonry .cfw-slide-img img { height:auto; object-fit:cover; }
    .cfw-desktop-masonry .cfw-btn-whatsapp { border-radius:0; margin-top:0; }
    .cfw-desktop-masonry .cfw-arrow, .cfw-desktop-masonry .cfw-dots, .cfw-desktop-masonry .cfw-counter { display:none !important; }

    /* MOSAIC */
    .cfw-desktop-mosaic .cfw-slider { overflow:visible; }
    .cfw-desktop-mosaic .cfw-track {
        display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:220px; gap:12px; padding:16px;
        transition:none; transform:none !important;
    }
    .cfw-desktop-mosaic .cfw-slide {
        min-width:0; padding:0; border-radius:14px; overflow:hidden;
        box-shadow:0 2px 10px rgba(0,0,0,.06);
    }
    .cfw-desktop-mosaic .cfw-slide:nth-child(5n+1) { grid-column:span 2; grid-row:span 2; }
    .cfw-desktop-mosaic .cfw-slide:nth-child(5n+4) { grid-column:span 2; }
    .cfw-desktop-mosaic .cfw-slide-img { height:100%; border-radius:0; }
    .cfw-desktop-mosaic .cfw-slide-img img { height:100%; object-fit:cover; }
    .cfw-desktop-mosaic .cfw-btn-whatsapp {
        position:absolute; bottom:0; left:0; right:0;
        margin:0; border-radius:0; padding:12px;
        background:rgba(0,0,0,.5) !important; color:#fff !important;
        opacity:0; transition:opacity .3s;
    }
    .cfw-desktop-mosaic .cfw-slide:hover .cfw-btn-whatsapp { opacity:1; }
    .cfw-desktop-mosaic .cfw-arrow, .cfw-desktop-mosaic .cfw-dots, .cfw-desktop-mosaic .cfw-counter { display:none !important; }
}

/* ============================================
   === MOBILE LAYOUTS (<=768px) ===
   ============================================ */
@media (max-width:768px) {
    .cfw-front-tabs { padding:12px 8px 0; gap:6px; }
    .cfw-front-tab { padding:8px 16px; font-size:13px; }

    /* SLIDER */
    .cfw-mobile-slider {
        position:fixed; top:0; left:0; width:100vw;
        height:100vh; height:100dvh; z-index:9999; border-radius:0;
    }
    .cfw-mobile-slider .cfw-slider { height:100%; }
    .cfw-mobile-slider .cfw-track { height:100%; }
    .cfw-mobile-slider .cfw-slide { height:100%; padding:12px; padding-top:48px; }
    .cfw-mobile-slider .cfw-slide-img { border-radius:14px; }
    .cfw-mobile-slider .cfw-btn-whatsapp { margin-top:10px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
    .cfw-mobile-slider .cfw-arrow { width:38px; height:38px; font-size:22px; }
    .cfw-mobile-slider .cfw-arrow-left { left:12px; } .cfw-mobile-slider .cfw-arrow-right { right:12px; }
    .cfw-mobile-slider .cfw-dots { position:absolute; bottom:calc(80px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%); padding:0; }
    .cfw-mobile-slider .cfw-counter { display:block; }

    /* NON-SLIDER SHARED mobile */
    .cfw-mobile-grid-1 .cfw-slider, .cfw-mobile-grid-2 .cfw-slider, .cfw-mobile-grid-3 .cfw-slider,
    .cfw-mobile-masonry .cfw-slider, .cfw-mobile-mosaic .cfw-slider { overflow:visible; }
    .cfw-mobile-grid-1 .cfw-track, .cfw-mobile-grid-2 .cfw-track, .cfw-mobile-grid-3 .cfw-track { display:grid; transition:none; transform:none !important; }
    .cfw-mobile-grid-1 .cfw-slide, .cfw-mobile-grid-2 .cfw-slide, .cfw-mobile-grid-3 .cfw-slide { min-width:0; padding:8px; }
    .cfw-mobile-grid-1 .cfw-slide-img, .cfw-mobile-grid-2 .cfw-slide-img, .cfw-mobile-grid-3 .cfw-slide-img { height:auto; max-height:65vh; }
    .cfw-mobile-grid-1 .cfw-slide-img img, .cfw-mobile-grid-2 .cfw-slide-img img, .cfw-mobile-grid-3 .cfw-slide-img img { height:auto; max-height:65vh; object-fit:cover; }
    .cfw-mobile-grid-1 .cfw-arrow, .cfw-mobile-grid-2 .cfw-arrow, .cfw-mobile-grid-3 .cfw-arrow,
    .cfw-mobile-grid-1 .cfw-dots, .cfw-mobile-grid-2 .cfw-dots, .cfw-mobile-grid-3 .cfw-dots,
    .cfw-mobile-grid-1 .cfw-counter, .cfw-mobile-grid-2 .cfw-counter, .cfw-mobile-grid-3 .cfw-counter,
    .cfw-mobile-masonry .cfw-arrow, .cfw-mobile-masonry .cfw-dots, .cfw-mobile-masonry .cfw-counter,
    .cfw-mobile-mosaic .cfw-arrow, .cfw-mobile-mosaic .cfw-dots, .cfw-mobile-mosaic .cfw-counter { display:none !important; }

    .cfw-mobile-grid-1 .cfw-track { grid-template-columns:1fr; }
    .cfw-mobile-grid-2 .cfw-track { grid-template-columns:repeat(2,1fr); }
    .cfw-mobile-grid-2 .cfw-slide-img { max-height:40vh; }
    .cfw-mobile-grid-2 .cfw-slide-img img { max-height:40vh; }
    .cfw-mobile-grid-2 .cfw-btn-whatsapp { font-size:13px; padding:10px; }
    .cfw-mobile-grid-3 .cfw-track { grid-template-columns:repeat(3,1fr); }
    .cfw-mobile-grid-3 .cfw-slide { padding:4px; }
    .cfw-mobile-grid-3 .cfw-slide-img { max-height:30vh; border-radius:10px; }
    .cfw-mobile-grid-3 .cfw-slide-img img { max-height:30vh; }
    .cfw-mobile-grid-3 .cfw-btn-whatsapp { font-size:11px; padding:8px 4px; border-radius:8px; }

    /* MASONRY mobile */
    .cfw-mobile-masonry .cfw-track {
        display:block; column-count:2; column-gap:10px; padding:10px;
        transition:none; transform:none !important;
    }
    .cfw-mobile-masonry .cfw-slide {
        min-width:0; break-inside:avoid; margin-bottom:10px; padding:0;
        border-radius:12px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.08);
    }
    .cfw-mobile-masonry .cfw-slide-img { height:auto; border-radius:0; }
    .cfw-mobile-masonry .cfw-slide-img img { height:auto; object-fit:cover; }
    .cfw-mobile-masonry .cfw-btn-whatsapp { border-radius:0; margin:0; font-size:13px; padding:10px; }

    /* MOSAIC mobile */
    .cfw-mobile-mosaic .cfw-track {
        display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; gap:8px; padding:10px;
        transition:none; transform:none !important;
    }
    .cfw-mobile-mosaic .cfw-slide {
        min-width:0; padding:0; border-radius:12px; overflow:hidden;
    }
    .cfw-mobile-mosaic .cfw-slide:nth-child(3n+1) { grid-column:span 2; grid-row:span 1; }
    .cfw-mobile-mosaic .cfw-slide-img { height:100%; border-radius:0; }
    .cfw-mobile-mosaic .cfw-slide-img img { height:100%; object-fit:cover; }
    .cfw-mobile-mosaic .cfw-btn-whatsapp {
        position:absolute; bottom:0; left:0; right:0; margin:0; border-radius:0;
        padding:10px; font-size:13px;
        background:rgba(0,0,0,.5) !important; color:#fff !important;
    }
}