@charset "UTF-8";
/* ==========================================================================
   LFDP Catálogo — CSS v2
   ========================================================================== */

/* ── PILLS MARCADO ───────────────────────────────────────────── */
/* Pills sobre la imagen (reemplazan al badge de categoría) */
.pf-card__marcados-img {
    position: absolute;
    bottom: 10px; left: 10px;
    display: flex; flex-wrap: wrap; gap: 4px;
    max-width: calc(100% - 20px);
}
.pf-card__marcado-img-pill {
    font-size: .58rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 8px; border-radius: 20px;
    background: rgba(153,51,153,.85);
    color: #fff;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

/* Pills en el modal */
.cat-modal__marcados {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 4px;
}
.cat-modal__marcado-pill {
    font-size: .68rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 10px; border-radius: 20px;
    background: rgba(153,51,153,.1);
    color: var(--lfdp-accent3);
    border: 1px solid rgba(153,51,153,.25);
}

/* ── CARD: precio + badge ─────────────────────────────────────────── */
/* Fondo blanco: las imágenes de proveedor vienen con fondo blanco, así que
   cuando un thumb se reduce con zoom <1 el espacio sobrante se mimetiza. */
.pf-card__img-wrap { aspect-ratio: 1 / 1; background: #fff; }

/* Barra de filtros estilo Liquid Glass: muy translúcida + blur fuerte
   para que los productos se intuyan por detrás al hacer scroll. */
.pf-filters {
    background: rgba(245,245,247,0.55);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border-bottom-color: rgba(0,0,0,0.06);
}

/* Panel desplegable de refinos (Tipos + Subcategorías) bajo la barra.
   Técnica grid-template-rows 0fr → 1fr: anima la altura REAL del contenido
   sin necesidad de fijar un max-height (que provoca saltos al final). */
.pf-refine {
    display: grid;
    grid-template-rows: 0fr;
    background: rgba(245,245,247,0.55);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    border-bottom: 1px solid transparent;
    transition: grid-template-rows .42s cubic-bezier(.32,.72,0,1),
                border-color .25s ease;
}
.pf-refine.is-open {
    grid-template-rows: 1fr;
    border-bottom-color: rgba(0,0,0,0.06);
}
.pf-refine__inner {
    overflow: hidden;     /* clave: oculta el contenido al colapsar */
    min-height: 0;
    max-width: var(--lfdp-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--lfdp-space-md, 24px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .28s ease, transform .42s cubic-bezier(.32,.72,0,1),
                padding-top .42s cubic-bezier(.32,.72,0,1),
                padding-bottom .42s cubic-bezier(.32,.72,0,1);
}
.pf-refine.is-open .pf-refine__inner {
    opacity: 1;
    transform: none;
    padding-top: 14px;
    padding-bottom: 16px;
    transition-delay: .04s;
}
.pf-refine__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pf-refine__row--all { margin-bottom: 2px; }

/* Dos columnas horizontales (Tipo / Subcategoría) con divider central */
.pf-refine__cols {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}
.pf-refine__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pf-refine__cols.has-both .pf-refine__col + .pf-refine__col {
    border-left: 1px solid rgba(0,0,0,0.12);
    padding-left: 28px;
}

.pf-refine__label {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--lfdp-txt3);
}
.pf-refine__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Móvil: apila las columnas y oculta el divider */
@media (max-width: 720px) {
    .pf-refine__cols { flex-direction: column; gap: 14px; }
    .pf-refine__cols.has-both .pf-refine__col + .pf-refine__col {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(0,0,0,0.08);
        padding-top: 12px;
    }
}
.pf-refine__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;          /* altura fija: el círculo "Ver todo" la iguala */
    padding: 0 13px;
    background: rgba(255,255,255,.85);
    color: var(--lfdp-txt);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 999px;
    font-family: var(--lfdp-font);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .18s ease;
}
.pf-refine__pill:hover {
    background: #fff;
    border-color: rgba(153,51,153,.4);
    color: var(--lfdp-accent);
    transform: translateY(-1px);
}
.pf-refine__pill.is-active {
    background: var(--lfdp-accent);
    color: #fff;
    border-color: var(--lfdp-accent);
    font-weight: 600;
}
.pf-refine__count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--lfdp-txt3);
    padding: 1px 6px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.pf-refine__pill.is-active .pf-refine__count {
    background: rgba(255,255,255,.22);
    color: #fff;
}
/* Círculo "Ver todo" como primer pill de cada columna.
   Mismo look que los demás pills (no se destaca al activo) pero perfectamente
   redondo (border-radius 50% en vez de pill) y sin texto. */
.pf-refine__pill--all {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
}
.pf-refine__pill--all i { font-size: .92rem; color: var(--lfdp-txt2, var(--lfdp-txt)); }
/* Anula el efecto "is-active" que aplica fondo morado al resto de pills */
.pf-refine__pill--all.is-active,
.pf-refine__pill--all:hover {
    background: #fff;
    color: var(--lfdp-accent);
    border-color: rgba(153,51,153,.4);
    transform: translateY(-1px);
}
.pf-refine__pill--all.is-active i,
.pf-refine__pill--all:hover i { color: var(--lfdp-accent); }

/* Tooltip global posicionado por JS (fuera del panel para que no se recorte). */
.pf-tooltip {
    position: fixed;
    top: 0; left: 0;
    background: rgba(20,20,22,0.92);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px)) scale(.96);
    transform-origin: 50% calc(100% + 10px);
    transition: opacity .18s ease, transform .25s cubic-bezier(.22,.61,.36,1);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    z-index: 9999;
}
.pf-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border: 4px solid transparent;
    border-top-color: rgba(20,20,22,0.92);
}
.pf-tooltip.is-visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 6px)) scale(1);
}

/* Overlay con dos iconos (modo admin): ver detalle + editar producto */
.pf-card__overlay { gap: 14px; }
.pf-card__overlay-icon--edit {
    text-decoration: none;
    background: rgba(255,255,255,.95);
    color: var(--lfdp-accent);
    border-color: rgba(255,255,255,.95);
    transition: transform .2s var(--lfdp-spring, ease), background .15s ease;
}
.pf-card__overlay-icon--edit:hover {
    transform: scale(1.08);
    background: #fff;
}

/* Badge "Vídeo" en la card: ▶ minimal en top-right. Si la card también
   tiene contador de imágenes, este se desplaza para no solapar. */
.pf-card__video-badge {
    position: absolute;
    top: 10px; right: 10px;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: .82rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 2;
}
.pf-card__img-wrap:has(.pf-card__count) .pf-card__video-badge {
    right: 54px;
}

/* Toast (esquina inferior derecha) tras volver del editor */
.cat-toast {
    position: fixed;
    bottom: 24px; right: 24px;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: rgba(20,20,22,.92);
    color: #fff;
    border-radius: 12px;
    font-family: var(--lfdp-font);
    font-size: .88rem; font-weight: 600;
    box-shadow: 0 12px 32px rgba(0,0,0,.25);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    z-index: 9999;
    opacity: 0;
    transform: translateY(12px) scale(.96);
    transition: opacity .35s cubic-bezier(.22,.61,.36,1),
                transform .45s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
}
.cat-toast.is-visible { opacity: 1; transform: none; }
.cat-toast--ok      i { color: #34d399; }
.cat-toast--warning i { color: #fbbf24; }
.cat-toast--error   i { color: #f87171; }

/* Zoom configurable por imagen (admin/producto.php).
   La variable --zoom viene inline; el hover multiplica por 1.05 para
   conservar el efecto "acercamiento" original al pasar el ratón. */
.pf-card__img { transform: scale(var(--zoom, 1)); transform-origin: center center; }
.pf-card:hover .pf-card__img { transform: scale(calc(var(--zoom, 1) * 1.05)); }

.pf-card__price {
    display: flex; align-items: baseline; gap: 5px; margin-top: 6px;
}
.pf-card__price-label { font-size: .7rem; color: var(--lfdp-txt3); font-weight: 500; }
.pf-card__price-val   { font-size: .95rem; font-weight: 700; color: var(--lfdp-accent); }
.pf-card__price-budget{ font-size: .75rem; font-weight: 600; color: var(--lfdp-accent); font-style: italic; }
.pf-card__price-iva   { font-size: .66rem; font-weight: 500; color: var(--lfdp-txt3); }
/* "IVA incl." junto al precio en el modal (modo regalo/unidad) */
.cat-modal__iva-tag   { font-size: .7rem; font-weight: 500; color: var(--lfdp-txt3); margin-left: 4px; }

.pf-card__cat-badge {
    position: absolute; bottom: 10px; left: 10px;
    background: rgba(153,51,153,.85); color: #fff;
    font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 9px; border-radius: var(--lfdp-radius-pill); backdrop-filter: blur(4px);
}

.pf-card__no-img {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:2.5rem; color: var(--lfdp-bg3);
}


/* ═══════════════════════════════════════════════════════════════════
   MODAL PRODUCTO
   ═══════════════════════════════════════════════════════════════════ */
.cat-modal-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cat-modal-overlay.is-open { display: flex; }

.cat-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 860px;
    max-height: 88vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.25);
    position: relative;
    animation: modalIn .22s ease;
}
@keyframes modalIn {
    from { opacity:0; transform:scale(.96) translateY(12px); }
    to   { opacity:1; transform:none; }
}

.cat-modal__close {
    position: absolute; top: 14px; right: 14px;
    z-index: 10;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,.06); border: none;
    color: var(--lfdp-txt3); font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s;
}
.cat-modal__close:hover { background: rgba(0,0,0,.14); color: var(--lfdp-txt); }


/* ── GALERÍA (izquierda) ──────────────────────────────────────────── */
.cat-modal__gallery {
    background: var(--lfdp-bg3);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    min-width: 0;
}

.cat-modal__main-wrap {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    aspect-ratio: 1 / 1;
    max-height: calc(88vh - 110px);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Cuando el slot muestra un embed de vídeo, suelta el aspect-ratio cuadrado
   y deja crecer al embed a su altura natural (sin recortar). */
.cat-modal__main-wrap.is-video {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    max-height: none;
    align-items: stretch;
}
.cat-modal__main-img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: opacity .2s;
}

.cat-modal__thumbs-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.cat-modal__thumbs-row::-webkit-scrollbar { display: none; }

.cat-modal__thumb {
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 7px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: .6;
    transition: all .15s;
}
.cat-modal__thumb:hover  { opacity: .85; }
.cat-modal__thumb.is-active { border-color: var(--lfdp-accent); opacity: 1; }
.cat-modal__thumb img { width:100%; height:100%; object-fit:cover; }


/* ── INFO (derecha) ───────────────────────────────────────────────── */
.cat-modal__info {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.cat-modal__cat-tag {
    display: inline-block;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--lfdp-accent);
    background: rgba(153,51,153,.08);
    border: 1px solid rgba(153,51,153,.2);
    padding: 3px 10px; border-radius: 20px;
    align-self: flex-start;
}

.cat-modal__title {
    font-size: 1.35rem; font-weight: 800;
    color: var(--lfdp-txt); line-height: 1.2;
    margin: 0;
}

.cat-modal__price-display {
    font-size: 1.5rem; font-weight: 800; color: var(--lfdp-txt);
    display: flex; align-items: baseline; gap: 6px;
}
.cat-modal__from-label   { font-size: .78rem; font-weight: 500; color: var(--lfdp-txt3); }
.cat-modal__budget-label { font-size: 1rem; font-style: italic; color: var(--lfdp-accent); }

.cat-modal__desc {
    font-size: .78rem; color: var(--lfdp-txt2); line-height: 1.65;
    border-top: 1px solid var(--lfdp-border);
    padding-top: 12px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--lfdp-border2) transparent;
    padding-right: 4px;
}
.cat-modal__desc p        { margin-bottom: 6px; }
.cat-modal__desc ul       { padding-left: 18px; }
.cat-modal__desc strong   { color: var(--lfdp-txt); }

/* ── Bloques opcionales: chips (colores, materiales), packaging, specs ── */
.cat-modal__chips-section { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.cat-modal__chips-label   { font-size: .72rem; font-weight: 600; color: var(--lfdp-txt3); text-transform: uppercase; letter-spacing: .04em; }
.cat-modal__chips         { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-modal__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    font-size: .75rem;
    background: var(--lfdp-input-bg, rgba(255,255,255,.04));
    border: 1px solid var(--lfdp-border);
    border-radius: 999px;
    color: var(--lfdp-txt2);
}
.cat-modal__chip-dot {
    width: 12px; height: 12px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15);
    box-shadow: 0 1px 2px rgba(0,0,0,.12);
}

/* Chip clicable (selección de color) */
.cat-modal__chip--select {
    cursor: pointer;
    border-width: 1.5px;
    font-family: inherit;
    font-weight: 500;
    transition: all .15s cubic-bezier(.32,.72,0,1);
}
.cat-modal__chip--select:hover {
    border-color: var(--lfdp-accent, #993399);
    background: rgba(153,51,153,.06);
    color: var(--lfdp-accent, #993399);
}
.cat-modal__chip--select.is-selected {
    border-color: var(--lfdp-accent, #993399);
    background: rgba(153,51,153,.12);
    color: var(--lfdp-accent, #993399);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(153,51,153,.18);
}
.cat-modal__chips-req { color: #d62b2b; font-weight: 700; margin-left: 4px; }
.cat-modal__chips-hint {
    font-size: .7rem; color: var(--lfdp-txt3);
    margin-top: 2px;
    transition: color .2s;
}

/* Estado "el cliente intentó añadir sin elegir color" */
.cat-modal__chips-section--required {
    animation: cat-color-shake .35s cubic-bezier(.32,.72,0,1);
}
.cat-modal__chips-section--required .cat-modal__chips-label,
.cat-modal__chips-section--required .cat-modal__chips-hint {
    color: #d62b2b;
}
.cat-modal__chips-section--required .cat-modal__chip--select {
    border-color: #f5a3a3;
}
@keyframes cat-color-shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-6px); }
    50%  { transform: translateX(6px); }
    75%  { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

.cat-modal__details {
    border-top: 1px solid var(--lfdp-border);
    border-bottom: 1px solid var(--lfdp-border);
    padding: 10px 0;
    font-size: .78rem;
    color: var(--lfdp-txt2);
}
.cat-modal__details > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--lfdp-txt);
    list-style: none;
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0;
}
.cat-modal__details > summary::-webkit-details-marker { display: none; }
.cat-modal__details > summary::before {
    content: '›';
    display: inline-block;
    transition: transform .18s ease;
    color: var(--lfdp-txt3);
}
.cat-modal__details[open] > summary::before { transform: rotate(90deg); }
.cat-modal__pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--lfdp-input-bg, rgba(255,255,255,.03));
    border: 1px solid var(--lfdp-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: .76rem;
    color: var(--lfdp-txt2);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Grid de tarjetas para "Embalaje y medidas" — icono + valor + label */
.cat-modal__pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.cat-modal__pkg-card {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--lfdp-input-bg, rgba(255,255,255,.03));
    border: 1px solid var(--lfdp-border);
    border-radius: 10px;
    transition: border-color .18s ease, transform .18s ease;
}
.cat-modal__pkg-card:hover { border-color: var(--lfdp-accent); transform: translateY(-1px); }
.cat-modal__pkg-card i {
    font-size: 1.1rem;
    color: var(--lfdp-accent);
    margin-bottom: 2px;
}
.cat-modal__pkg-val {
    font-size: .82rem; font-weight: 600;
    color: var(--lfdp-txt);
    line-height: 1.25;
    word-break: break-word;
}
.cat-modal__pkg-lbl {
    font-size: .68rem;
    color: var(--lfdp-txt3);
    text-transform: uppercase; letter-spacing: .04em;
}
.cat-modal__specs {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: .76rem;
}
.cat-modal__specs td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--lfdp-border);
    vertical-align: top;
}
.cat-modal__specs td:first-child { color: var(--lfdp-txt3); width: 40%; font-weight: 500; }
.cat-modal__specs td:last-child  { color: var(--lfdp-txt); word-break: break-word; }
.cat-modal__specs tr:last-child td { border-bottom: 0; }

/* Vídeo dentro de la galería (Instagram / YouTube) */
.cat-modal__main-video {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4px;
}
/* El embed de IG (blockquote → iframe) ocupa el ancho del slot completo. */
.cat-modal__main-video .instagram-media {
    max-width: 100% !important;
    min-width: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.cat-modal__thumb.is-video {
    position: relative;
    cursor: pointer;
}
.cat-modal__thumb-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 1.1rem;
    border-radius: inherit;
    transition: background .18s ease;
}
.cat-modal__thumb.is-video:hover .cat-modal__thumb-play { background: rgba(0,0,0,0.6); }

/* Notas debajo del selector de cantidad */
.cat-modal__price-notes {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 4px;
}
.cat-modal__note {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: .72rem; line-height: 1.45;
    margin: 0;
}
.cat-modal__note i { font-size: .85rem; margin-top: 1px; flex-shrink: 0; }
.cat-modal__note--ok        { color: #059669; }
.cat-modal__note--ok i      { color: #10b981; }
.cat-modal__note--ok strong { color: #047857; font-weight: 700; }
.cat-modal__note--info      { color: var(--lfdp-txt3); }
.cat-modal__note--info i    { color: var(--lfdp-accent); }

/* Pills de cantidad */
.cat-modal__qty-section { display: flex; flex-direction: column; gap: 8px; }
.cat-modal__qty-label   { font-size: .78rem; font-weight: 600; color: var(--lfdp-txt3); }

.cat-modal__qty-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.cat-modal__qty-pill {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--lfdp-border2);
    background: var(--lfdp-bg);
    cursor: pointer;
    transition: all .15s;
    font-family: var(--lfdp-font);
}
.cat-modal__qty-pill:hover {
    border-color: var(--lfdp-accent);
    background: rgba(153,51,153,.05);
}
.cat-modal__qty-pill.is-active {
    border-color: var(--lfdp-accent);
    background: rgba(153,51,153,.08);
    box-shadow: 0 0 0 3px rgba(153,51,153,.15);
}
.pill-qty   { font-size: .82rem; font-weight: 700; color: var(--lfdp-txt); }
.pill-price { font-size: .72rem; font-weight: 600; color: var(--lfdp-accent); margin-top: 1px; }

.cat-modal__total-ref {
    font-size: .82rem; color: var(--lfdp-txt3);
    min-height: 20px;
}
.cat-modal__total-ref strong { color: var(--lfdp-txt); font-weight: 700; }
.cat-modal__total-ref span   { color: var(--lfdp-txt4); font-size: .75rem; }

/* Botón añadir */
.cat-modal__actions { margin-top: auto; }

.cat-modal__btn-add {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px;
    background: var(--lfdp-accent); color: #fff;
    border: none; border-radius: 10px;
    font-family: var(--lfdp-font); font-size: .9rem; font-weight: 700;
    cursor: pointer; transition: all .18s;
}
.cat-modal__btn-add:hover:not(:disabled) {
    background: var(--lfdp-accent3); transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(153,51,153,.3);
}
.cat-modal__btn-add:disabled {
    background: var(--lfdp-bg3); color: var(--lfdp-txt4); cursor: not-allowed;
}
.cat-modal__btn-add.is-added {
    background: #10b981;
}

.cat-modal__legal {
    font-size: .7rem; color: var(--lfdp-txt4);
    display: flex; align-items: flex-start; gap: 5px; line-height: 1.4;
    margin: 0;
}
.cat-modal__legal i { color: var(--lfdp-accent); margin-top: 1px; flex-shrink: 0; }

/* Responsive modal */
@media (max-width: 640px) {
    /* Hoja deslizante (bottom sheet) con UN ÚNICO scroll: galería e info se
       desplazan juntas. Antes el grid con overflow:hidden recortaba la info
       y el modal no se podía scrollear en móvil. */
    .cat-modal-overlay { padding: 0; align-items: flex-end; }
    .cat-modal {
        display: flex;
        flex-direction: column;
        max-height: 94vh;                 /* fallback navegadores viejos */
        max-height: 94dvh;                /* iOS: no baila con la barra de Safari */
        border-radius: 16px 16px 0 0;
        align-self: flex-end;
        margin: 0;
        overflow-y: auto;                 /* el scroll vive en la hoja entera */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;     /* no arrastra el scroll a la página */
    }
    /* Asa visual de hoja */
    .cat-modal::before {
        content: '';
        flex: 0 0 auto;
        width: 40px; height: 4px;
        border-radius: 999px;
        background: rgba(0,0,0,.16);
        margin: 8px auto 2px;
    }
    /* Cerrar: sticky para que siga visible mientras se hace scroll */
    .cat-modal__close {
        position: sticky;
        top: 10px;
        align-self: flex-end;
        flex: none;                       /* sin esto, el flex column lo achata (óvalo) */
        margin: 0 10px -36px auto;        /* se solapa sobre la galería */
        width: 36px; height: 36px;
        min-height: 36px;
        background: rgba(255,255,255,.92);
        box-shadow: 0 2px 10px rgba(0,0,0,.18);
        font-size: 1rem;
    }
    .cat-modal__gallery { padding: 10px 14px; gap: 8px; flex: 0 0 auto; }
    .cat-modal__main-wrap {
        flex: none;
        width: 100%;
        aspect-ratio: 4 / 3;
        max-height: 38vh;
        max-height: 38dvh;
    }
    .cat-modal__thumb { width: 46px; height: 46px; }
    .cat-modal__info {
        flex: none;
        overflow-y: visible;              /* sin scroll anidado: solo el de la hoja */
        padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
    }
    /* CTA siempre a mano mientras se hace scroll */
    .cat-modal__actions {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: 0 -20px;
        padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(to top, #fff 72%, rgba(255,255,255,0));
    }
}


/* ═══════════════════════════════════════════════════════════════════
   CARRITO PRESUPUESTO
   ═══════════════════════════════════════════════════════════════════ */
.cat-cart-fab {
    position: fixed; bottom: 28px; right: 28px;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--lfdp-accent); color: #fff;
    border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(153,51,153,.4);
    font-size: 1.2rem;
    display: flex; align-items: center; justify-content: center;
    z-index: 500; transition: transform .2s, box-shadow .2s;
}
.cat-cart-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(153,51,153,.5); }
.cat-cart-fab__count {
    position: absolute; top: -4px; right: -4px;
    background: #ef4444; color: #fff;
    font-size: .6rem; font-weight: 800;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}

.cat-cart-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 600;
}
.cat-cart-overlay.is-open { display: block; }

.cat-cart-panel {
    position: fixed; top: 0; right: -380px;
    width: 360px; max-width: 90vw; height: 100%;
    background: #fff;
    box-shadow: -4px 0 32px rgba(0,0,0,.12);
    z-index: 700;
    display: flex; flex-direction: column;
    transition: right .3s cubic-bezier(.4,0,.2,1);
    font-family: var(--lfdp-font);
}
.cat-cart-panel.is-open { right: 0; }

.cat-cart-panel__header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--lfdp-border);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--lfdp-bg);
    font-size: .92rem; font-weight: 700; color: var(--lfdp-txt);
}
.cat-cart-panel__close {
    background: none; border: none; font-size: 1rem;
    color: var(--lfdp-txt3); cursor: pointer; padding: 4px;
}
.cat-cart-panel__close:hover { color: var(--lfdp-txt); }

.cat-cart-panel__body { flex:1; overflow-y:auto; padding: 16px; }

.cat-cart-empty {
    text-align: center; padding: 40px 20px; color: var(--lfdp-txt3);
}
.cat-cart-empty i {
    font-size: 2rem; color: var(--lfdp-accent); opacity: .3;
    display: block; margin-bottom: 10px;
}

.cat-cart-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--lfdp-border);
}
.cat-cart-item:last-child { border-bottom: none; }
.cat-cart-item__img {
    width: 52px; height: 52px; border-radius: 8px;
    overflow: hidden; flex-shrink: 0; background: var(--lfdp-bg3);
}
.cat-cart-item__img img { width:100%; height:100%; object-fit:cover; }
.cat-cart-item__img-empty {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.3rem; color: var(--lfdp-txt4);
}
.cat-cart-item__info { flex:1; min-width:0; }
.cat-cart-item__nombre {
    font-size:.84rem; font-weight:600; color:var(--lfdp-txt);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cat-cart-item__detalle { font-size:.73rem; color:var(--lfdp-txt3); margin-top:2px; }
.cat-cart-item__remove {
    background:none; border:none; color:var(--lfdp-txt4);
    cursor:pointer; font-size:.85rem; padding:4px 6px;
    border-radius:4px; transition:all .15s; flex-shrink:0;
}
.cat-cart-item__remove:hover { background:#fee2e2; color:#ef4444; }

.cat-cart-panel__footer {
    padding: 14px 16px;
    border-top: 1px solid var(--lfdp-border);
    background: var(--lfdp-bg);
    display: flex; flex-direction: column; gap: 8px;
}
.cat-cart-panel__btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px; border: none; border-radius: 8px;
    font-family: var(--lfdp-font); font-size: .83rem; font-weight: 700;
    cursor: pointer; transition: all .15s;
}
.cat-cart-panel__btn--wa    { background: #25d366; color: #fff; }
.cat-cart-panel__btn--wa:hover { background: #1ebe5a; }
.cat-cart-panel__btn--email {
    background: var(--lfdp-accent); color: #fff;
}
.cat-cart-panel__btn--email:hover { background: var(--lfdp-accent3); }
.cat-cart-panel__btn--clear {
    background: none; color: var(--lfdp-txt3);
    border: 1px solid var(--lfdp-border2);
    font-weight: 500; font-size: .76rem;
}
.cat-cart-panel__btn--clear:hover { border-color: #ef4444; color: #ef4444; }


/* ==========================================================================
   MODO REGALO · Filtro chip, tarjeta especial e input libre de cantidad
   ========================================================================== */

/* Chip "🎁 Regalos desde 1 unidad" en la barra de filtros */
.pf-filter--regalo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pf-filter--regalo i { font-size: .9em; }

/* Tarjeta de la variante regalo (toque sutil para distinguirla) */
.pf-card--regalo .pf-card__price-val { color: var(--lfdp-accent); }

/* Badge "Desde 1 ud." dentro de la imagen de la card regalo */
.pf-card__regalo-badge {
    position: absolute;
    top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: .68rem; font-weight: 700;
    color: var(--lfdp-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    letter-spacing: .2px;
    z-index: 2;
}
.pf-card__regalo-badge i { font-size: .85em; }

/* Input libre de cantidad en el modal (modo regalo) */
.cat-modal__qty-free {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px;
    border-radius: 12px;
    border: 1.5px solid var(--lfdp-border2);
    background: var(--lfdp-bg);
    width: max-content;
    transition: border-color .15s, box-shadow .15s;
}
.cat-modal__qty-free:focus-within {
    border-color: var(--lfdp-accent);
    box-shadow: 0 0 0 3px rgba(153,51,153,.15);
}
.cat-modal__qty-step {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px;
    background: rgba(153,51,153,.06);
    color: var(--lfdp-accent);
    cursor: pointer;
    transition: background .12s, transform .12s;
    font-size: .78rem;
}
.cat-modal__qty-step:hover  { background: rgba(153,51,153,.14); }
.cat-modal__qty-step:active { transform: scale(.92); }
.cat-modal__qty-input {
    width: 70px;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--lfdp-font);
    font-size: 1rem; font-weight: 700;
    color: var(--lfdp-txt);
    -moz-appearance: textfield;
    appearance: textfield;
    outline: none;
}
.cat-modal__qty-input::-webkit-outer-spin-button,
.cat-modal__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cat-modal__qty-suffix {
    font-size: .82rem; font-weight: 600; color: var(--lfdp-txt3);
    padding-right: 6px;
}


/* ==========================================================================
   FORMULARIO DE PRESUPUESTO — botón primario + modal Liquid Glass
   ========================================================================== */

/* ── Botón primario y fila secundaria del carrito ───────────── */
.cat-cart-panel__btn--form {
    background: linear-gradient(135deg, #b347b3, #993399);
    color: #fff;
    padding: 14px;
    font-size: .9rem;
    box-shadow: 0 6px 18px rgba(153,51,153,.28);
    letter-spacing: .01em;
}
.cat-cart-panel__btn--form:hover {
    background: linear-gradient(135deg, #993399, #802980);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(153,51,153,.36);
}

/* ── Overlay del modal ──────────────────────────────────────── */
.cat-form-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 10, 30, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    z-index: 10000;
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.cat-form-modal-overlay.is-open { opacity: 1; visibility: visible; }

/* ── Caja del modal ─────────────────────────────────────────── */
.cat-form-modal {
    position: relative;
    background: #fff;
    width: 100%; max-width: 720px;
    max-height: calc(100vh - 48px);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
    overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateY(20px) scale(.96);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
}
.cat-form-modal-overlay.is-open .cat-form-modal {
    transform: translateY(0) scale(1);
}
.cat-form-modal__close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,.06); color: #555;
    border: none; cursor: pointer;
    display: grid; place-items: center;
    font-size: .92rem;
    transition: background .15s, color .15s, transform .15s;
    z-index: 2;
}
.cat-form-modal__close:hover {
    background: rgba(0,0,0,.12); color: #111; transform: rotate(90deg);
}

/* ── Header del modal ───────────────────────────────────────── */
.cat-form-modal__header {
    padding: 32px 40px 22px;
    text-align: center;
    background: linear-gradient(180deg, #faf5fb 0%, #fff 100%);
    border-bottom: 1px solid #f0e8f2;
}
.cat-form-modal__icon {
    width: 56px; height: 56px; border-radius: 50%;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, #b347b3, #993399);
    color: #fff;
    display: grid; place-items: center;
    font-size: 1.4rem;
    box-shadow: 0 6px 18px rgba(153,51,153,.28);
}
.cat-form-modal__title {
    margin: 0 0 6px;
    font-size: 1.32rem; font-weight: 700;
    color: #1d1d1f; letter-spacing: -.01em;
}
.cat-form-modal__sub {
    margin: 0; font-size: .88rem;
    color: #6e6e73; line-height: 1.5;
}

/* ── Formulario ─────────────────────────────────────────────── */
.cat-form {
    padding: 26px 40px 30px;
    overflow-y: auto;
    flex: 1;
}
.cat-form__field {
    margin-bottom: 18px;
    position: relative;
}
.cat-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
.cat-form__row .cat-form__field { margin-bottom: 0; }
.cat-form__field label {
    display: block;
    font-size: .78rem; font-weight: 600;
    color: #3a3a3c;
    margin-bottom: 6px;
    letter-spacing: .01em;
}
.cat-form__req { color: #d62b2b; font-weight: 700; }

.cat-form__field input[type="text"],
.cat-form__field input[type="tel"],
.cat-form__field input[type="email"],
.cat-form__field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid #e5e3e8;
    border-radius: 10px;
    font-family: inherit;
    font-size: .92rem;
    color: #1d1d1f;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.cat-form__field input:focus,
.cat-form__field textarea:focus {
    outline: none;
    border-color: #993399;
    box-shadow: 0 0 0 3px rgba(153,51,153,.12);
}
.cat-form__field textarea { resize: vertical; min-height: 70px; }

/* ── Campo destacado: texto/logo a grabar ──────────────────── */
.cat-form__field--grabado {
    padding: 18px 22px 20px;
    background: linear-gradient(180deg, #faf5fb 0%, #fff 100%);
    border: 1.5px solid #e5d6e7;
    border-radius: 14px;
    margin-bottom: 22px;
}
.cat-form__field--grabado label {
    display: flex; align-items: center; gap: 8px;
    color: #993399;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
}
.cat-form__field--grabado label i { font-size: .95rem; }
.cat-form__field--grabado textarea {
    background: #fff;
    min-height: 100px;
}
.cat-form__hint {
    margin: 12px 0 0;
    font-size: .78rem; color: #6e6e73;
    line-height: 1.6;
}
.cat-form__hint i { color: #993399; margin-right: 6px; }
.cat-form__hint a { color: #993399; font-weight: 600; word-break: break-word; }

/* ── Toggle WhatsApp ────────────────────────────────────────── */
.cat-form__wa-toggle {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    border: 1.5px solid #e5e3e8; border-radius: 10px;
    cursor: pointer;
    background: #fff;
    transition: all .18s;
    user-select: none;
}
.cat-form__wa-toggle:hover { border-color: #25d366; background: #f7fff9; }
.cat-form__wa-toggle.is-active { border-color: #25d366; background: #ecfdf2; }
.cat-form__wa-toggle__icon {
    color: #25d366; font-size: 1.15rem;
}
.cat-form__wa-toggle__label {
    flex: 1; font-size: .85rem; font-weight: 500; color: #3a3a3c;
}
.cat-form__wa-switch {
    width: 36px; height: 20px; border-radius: 999px;
    background: #d1d1d6; position: relative;
    transition: background .2s;
    flex-shrink: 0;
}
.cat-form__wa-switch::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: transform .2s cubic-bezier(.32,.72,0,1);
}
.cat-form__wa-toggle.is-active .cat-form__wa-switch { background: #25d366; }
.cat-form__wa-toggle.is-active .cat-form__wa-switch::after { transform: translateX(16px); }

/* ── Resumen del presupuesto dentro del modal ───────────────── */
.cat-form__resumen {
    background: #faf8f5;
    border: 1px solid #efe9e2;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 6px 0 20px;
}
.cat-form__resumen-head {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: #3a3a3c;
    margin-bottom: 8px;
}
.cat-form__resumen-head i { color: #993399; }
.cat-form__resumen-head strong { font-weight: 700; }
.cat-form__resumen-head span {
    margin-left: auto; font-size: .75rem; color: #6e6e73; font-weight: 500;
}
.cat-form__resumen-list {
    list-style: none; margin: 0; padding: 0;
    max-height: 140px; overflow-y: auto;
}
.cat-form__resumen-item {
    padding: 6px 0;
    border-top: 1px solid #efe9e2;
}
.cat-form__resumen-item:first-child { border-top: none; }
.cat-form__resumen-item-nombre {
    font-size: .82rem; font-weight: 600; color: #1d1d1f;
    line-height: 1.35;
}
.cat-form__resumen-item-color {
    font-weight: 500; color: #6e6e73; font-size: .76rem;
}
.cat-form__resumen-item-detalle {
    font-size: .76rem; color: #6e6e73; margin-top: 2px;
}

/* ── Legal ──────────────────────────────────────────────────── */
.cat-form__field--legal { margin-bottom: 18px; }
.cat-form__legal {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer;
    font-size: .8rem;
    line-height: 1.55;
    color: #555;
}
.cat-form__legal input[type="checkbox"] {
    margin-top: 3px;
    width: 16px; height: 16px;
    accent-color: #993399;
    cursor: pointer; flex-shrink: 0;
}
.cat-form__legal a { color: #993399; text-decoration: underline; }

/* ── Botones de acción ──────────────────────────────────────── */
.cat-form__actions {
    display: flex; gap: 12px; justify-content: flex-end;
    padding-top: 10px;
}
.cat-form__btn {
    padding: 11px 20px;
    border-radius: 10px;
    border: none;
    font-family: inherit;
    font-size: .88rem; font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: all .15s;
}
.cat-form__btn--ghost {
    background: transparent; color: #6e6e73;
    border: 1.5px solid #e5e3e8;
}
.cat-form__btn--ghost:hover { background: #f5f5f7; color: #1d1d1f; }
.cat-form__btn--primary {
    background: linear-gradient(135deg, #b347b3, #993399);
    color: #fff;
    box-shadow: 0 4px 14px rgba(153,51,153,.28);
}
.cat-form__btn--primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #993399, #802980);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(153,51,153,.36);
}
.cat-form__btn--primary:disabled {
    background: #d8d6dc;
    color: #fff;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .8;
}

/* ── Móvil ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cat-form-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .cat-form-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }
    .cat-form-modal-overlay.is-open .cat-form-modal {
        transform: translateY(0);
    }
    .cat-form__row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 0; }
    .cat-form__row .cat-form__field { margin-bottom: 14px; }
    .cat-form__actions { flex-direction: column-reverse; }
    .cat-form__btn { width: 100%; justify-content: center; }
}