/* ===== Catalogo (fondo claro) ===== */
.pagina-catalogo { background: #f4f6f9; color: #0f172a; }
.pagina-catalogo .nav { background: rgba(7, 11, 20, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pagina-catalogo .nav, .pagina-catalogo .nav-movil { color: var(--texto); }

.cat-cabeza { position: relative; overflow: hidden; background: var(--fondo); color: var(--texto); padding: 120px 0 44px; }
.cat-cabeza h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; margin: 12px 0 10px; }
.cat-cabeza p { color: var(--texto-suave); margin: 0; }
.cat-cabeza .contenedor { position: relative; z-index: 1; }
.acceso-precios { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acceso-precios form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acceso-precios form[hidden] { display: none; }
.acceso-precios input { padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: var(--texto); font: inherit; min-width: 0; width: 200px; }
.acceso-precios input:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.acceso-msj { color: #fca5a5; font-size: 14px; }
.tarjeta .precio.sin-precio { font-weight: 600; font-size: 13px; color: #64748b; }
.ficha .precio-grande.sin-precio span { font-size: 22px; }

.cat-barra { position: sticky; top: 72px; z-index: 30; background: rgba(244, 246, 249, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #e2e8f0; }
.cat-barra .contenedor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #64748b; pointer-events: none; }
.buscador input { width: 100%; padding: 14px 44px; border-radius: 14px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 16px; }
.buscador input:focus { outline: 2px solid var(--marca); outline-offset: 0; border-color: transparent; }
.buscador .limpiar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 10px; border: 0; background: #eef2f7; color: #475569; display: none; }
.buscador.con-texto .limpiar { display: grid; place-items: center; }
.filtros { min-width: 0; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; max-width: 100%; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 8px 14px; border-radius: 99px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-size: 14px; font-weight: 500; transition: all .2s; }
.chip span { color: #94a3b8; margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.chip[aria-pressed="true"] span { color: #94a3b8; }
.orden { padding: 8px 12px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 14px; }

.cat-cuerpo { padding: 28px 0 120px; }
.cat-estado { color: #64748b; font-size: 14px; margin: 0 0 18px; }
.grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.tarjeta { background: #fff; border-radius: 18px; border: 1px solid #e2e8f0; overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .35); border-color: #cbd5e1; }
.tarjeta .foto { position: relative; aspect-ratio: 1; background: #f8fafc; padding: 14px; border: 0; display: grid; place-items: center; width: 100%; }
.tarjeta .foto img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.tarjeta:hover .foto img { transform: scale(1.05); }
.tarjeta .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta .cat { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--marca-oscura); }
.tarjeta h3 { font-family: var(--fuente); font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: 0; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.9em; }
.tarjeta .pie-tarjeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.tarjeta .precio { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.tarjeta .precio small { display: block; font-weight: 500; font-size: 11px; color: #94a3b8; }
.boton-agregar { width: 40px; height: 40px; border-radius: 12px; border: 0; background: #0f172a; color: #fff; display: grid; place-items: center; transition: background .2s, transform .2s; flex: none; }
.boton-agregar:hover { background: var(--marca-oscura); }
.boton-agregar:active { transform: scale(.92); }
.boton-agregar svg { width: 18px; height: 18px; }
.tarjeta .paso-cantidad button { border-color: #cbd5e1; background: #f1f5f9; color: #0f172a; }
.tarjeta .paso-cantidad output { color: #0f172a; }
.en-cotizacion { outline: 2px solid var(--marca); outline-offset: -2px; }

.vacio { text-align: center; padding: 60px 16px; color: #64748b; }
.vacio b { display: block; font-size: 20px; color: #0f172a; margin-bottom: 6px; font-family: var(--fuente-titulo); }
.mas-productos { display: flex; justify-content: center; margin-top: 28px; }
.boton-claro { background: #fff; border: 1px solid #cbd5e1; color: #0f172a; }
.boton-claro:hover { border-color: #94a3b8; }

/* cotizacion flotante */
.btn-cotizacion { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%); z-index: 55; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 999px; border: 0; background: #0f172a; color: #fff; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .6); transition: transform .4s cubic-bezier(.2, .8, .2, 1); max-width: calc(100% - 32px); }
.btn-cotizacion.visible { transform: translateX(-50%) translateY(0); }
.btn-cotizacion > span { white-space: nowrap; }
@media (max-width: 480px) { .btn-cotizacion { left: 16px; right: 88px; transform: translateY(140%); justify-content: flex-start; overflow: hidden; } .btn-cotizacion.visible { transform: translateY(0); } .btn-cotizacion .ir { display: none; } }
.btn-cotizacion .cuenta { min-width: 26px; height: 26px; border-radius: 99px; background: var(--marca); color: #04110f; display: grid; place-items: center; font-weight: 800; font-size: 13px; padding: 0 6px; }
.btn-cotizacion b { font-variant-numeric: tabular-nums; }
.btn-cotizacion .ir { padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .12); font-size: 14px; font-weight: 600; white-space: nowrap; }
.pagina-catalogo .flotante-wa { bottom: 84px; }
@media (max-width: 480px) { .pagina-catalogo .flotante-wa { bottom: 16px; right: 16px; } }

/* paneles (cotizacion y ficha) */
.velo { position: fixed; inset: 0; z-index: 70; background: rgba(2, 6, 23, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.velo.abierto { opacity: 1; pointer-events: auto; }
.panel-lateral { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(440px, 100%); background: #fff; color: #0f172a; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .4s; box-shadow: -20px 0 60px rgba(2, 6, 23, .3); }
.panel-lateral.abierto { transform: translateX(0); visibility: visible; transition: transform .4s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.panel-cabeza { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #e2e8f0; }
.panel-cabeza h2 { font-size: 22px; }
.cerrar { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; display: grid; place-items: center; font-size: 22px; line-height: 1; color: #334155; }
.panel-lista { flex: 1; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; }
.item-cot { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #f1f5f9; }
.item-cot img { width: 56px; height: 56px; object-fit: contain; background: #f8fafc; border-radius: 12px; padding: 4px; }
.item-cot b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.item-cot small { color: #64748b; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.item-cot .paso-cantidad button { border-color: #cbd5e1; background: #f1f5f9; color: #0f172a; }
.item-cot .paso-cantidad output { color: #0f172a; }
.panel-pie { padding: 18px 20px 22px; border-top: 1px solid #e2e8f0; display: grid; gap: 12px; }
.panel-pie .total { display: flex; justify-content: space-between; align-items: baseline; }
.panel-pie .total b { font-family: var(--fuente-titulo); font-size: 28px; font-variant-numeric: tabular-nums; }
.panel-pie small { color: #64748b; }
.vaciar { border: 0; background: none; color: #64748b; font-size: 14px; text-decoration: underline; justify-self: center; }

.ficha { position: fixed; z-index: 71; left: 50%; top: 50%; width: min(860px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; background: #fff; color: #0f172a; border-radius: 26px; transform: translate(-50%, -46%) scale(.97); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s; display: grid; box-shadow: 0 40px 100px -30px rgba(2, 6, 23, .6); }
.ficha.abierta { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; visibility: visible; transition: opacity .35s cubic-bezier(.2, .8, .2, 1), transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
@media (min-width: 760px) { .ficha { grid-template-columns: 1fr 1fr; } }
.ficha .foto-grande { background: #f8fafc; display: grid; place-items: center; padding: 18px; height: min(38vh, 340px); }
@media (min-width: 760px) { .ficha .foto-grande { height: auto; aspect-ratio: 1; padding: 28px; } }
.ficha .foto-grande img { width: 100%; height: 100%; object-fit: contain; }
.ficha .detalle { padding: 22px; display: flex; flex-direction: column; gap: 12px; position: relative; }
@media (min-width: 760px) { .ficha .detalle { padding: 28px; gap: 14px; } }
.ficha .detalle .cerrar { position: absolute; top: 16px; right: 16px; }
.ficha h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); padding-right: 48px; }
.ficha .precio-grande { font-family: var(--fuente-titulo); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ficha .precio-grande small { display: block; font-family: var(--fuente); font-size: 13px; font-weight: 500; color: #64748b; }
.ficha .fila-cantidad { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.ficha .paso-cantidad button { width: 44px; height: 44px; border-radius: 12px; border-color: #cbd5e1; background: #f1f5f9; color: #0f172a; font-size: 20px; }
.ficha .paso-cantidad output { color: #0f172a; min-width: 32px; font-size: 18px; }
.ficha .boton-primario { flex: 1; }

body.sin-scroll { overflow: hidden; }

/* compartir producto */
.compartir-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid #e2e8f0; }
.compartir-fila > span { width: 100%; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.boton-compartir { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: 14px; font-weight: 600; transition: border-color .2s, background .2s; }
.boton-compartir:hover { border-color: #94a3b8; background: #f8fafc; }
.boton-compartir svg { width: 18px; height: 18px; flex: none; }
.boton-compartir.wa { color: #128c4b; }
.aviso-catalogo { position: fixed; left: 50%; top: 88px; z-index: 80; transform: translate(-50%, -20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 14px; background: #0f172a; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .6); transition: opacity .3s, transform .3s; max-width: calc(100% - 32px); text-align: center; }
.aviso-catalogo.visible { opacity: 1; transform: translate(-50%, 0); }