/* ===== Dadá Mayorista — estilos (versión PHP) =====
   Los colores NO se tocan acá: se eligen en el panel /admin
   y llegan como variables --c-... */
:root{
  --radio:12px;
  --sombra:0 2px 10px rgba(30,60,60,.08);
  --sombra-2:0 10px 30px rgba(30,60,60,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;font-family:Montserrat,system-ui,sans-serif;color:var(--c-texto);background:var(--c-pagina-fondo);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.oculto{display:none!important}
.link{background:none;border:0;color:inherit;text-decoration:underline;padding:0;font-weight:600}

/* Barra superior */
.topbar{background:var(--c-barra-fondo);color:var(--c-barra-texto);font-size:13px;text-align:center;padding:7px 0;letter-spacing:.02em}

/* Encabezado */
.header{position:sticky;top:0;z-index:40;background:var(--c-header-fondo);color:var(--c-header-texto);box-shadow:0 1px 0 var(--c-linea)}
.header-in{display:flex;align-items:center;gap:24px;padding:12px 20px}
.logo img{height:74px;width:auto}
.buscador{flex:1;position:relative;max-width:460px}
.buscador input{width:100%;padding:12px 44px 12px 18px;border:2px solid var(--c-linea);border-radius:999px;font:inherit;background:var(--c-buscador-fondo);color:var(--c-texto);outline:none;transition:border-color .2s}
.buscador input:focus{border-color:var(--c-boton-fondo)}
.buscador svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:none;stroke:var(--c-boton-fondo);stroke-width:2.2}
.contacto-head{display:flex;flex-direction:column;gap:4px;font-size:13.5px;margin-left:auto}
.contacto-head .dato{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--c-header-texto)}
.contacto-head a.dato{font-weight:700}
.contacto-head svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;opacity:.8}
.btn-carrito{position:relative;display:flex;align-items:center;gap:8px;background:var(--c-carrito-btn);color:#fff;border:0;border-radius:999px;padding:11px 20px;font-weight:700;transition:background .2s}
.btn-carrito:hover{background:var(--c-carrito-hover)}
.btn-carrito svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2}
.badge{background:var(--c-etiqueta);color:var(--c-etiqueta-texto);min-width:22px;height:22px;border-radius:11px;font-size:12px;display:grid;place-items:center;padding:0 6px}
.badge.pop{animation:pop .35s}
@keyframes pop{50%{transform:scale(1.35)}}

.nav{background:var(--c-menu-fondo)}
.nav-in{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav-in::-webkit-scrollbar{display:none}
.nav a{color:var(--c-menu-texto);text-decoration:none;font-weight:600;font-size:14px;padding:11px 14px;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:currentColor;background:rgba(255,255,255,.08)}

/* 1) Slider */
.slider{position:relative;overflow:hidden;background:var(--c-slider-fondo)}
.slides{display:flex;transition:transform .6s ease}
.slide{position:relative;min-width:100%;aspect-ratio:1600/560;max-height:520px;background:var(--c-slider-fondo) center/cover no-repeat;display:flex;align-items:center}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,40,40,.55) 0%,rgba(20,40,40,.15) 55%,transparent 80%)}
.slide.sin-texto::before{display:none}
.slide-txt{position:relative;color:var(--c-slider-texto);max-width:1240px;width:100%;margin:0 auto;padding:0 70px}
.slide-txt .etiqueta{display:inline-block;background:var(--c-etiqueta);color:var(--c-etiqueta-texto);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:12px}
.slide-txt h2{font-family:Lora,serif;font-size:clamp(26px,4vw,50px);line-height:1.1;margin:0 0 10px;max-width:640px;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.slide-txt p{font-size:clamp(15px,1.6vw,19px);margin:0 0 22px;max-width:540px}
.slide-precio{font-size:clamp(24px,3vw,38px);font-weight:800;margin:0 0 18px}
.slide-precio del{font-size:.55em;opacity:.75;font-weight:500;margin-left:10px}
.btn-slider{background:var(--c-slider-boton);color:var(--c-slider-boton-txt)}
.btn-slider:hover{filter:brightness(.94)}
.sl-flecha{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#35605f;font-size:30px;line-height:1;display:grid;place-items:center;box-shadow:var(--sombra)}
.sl-flecha:hover{background:#fff}
.prev{left:16px}.next{right:16px}
.sl-puntos{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.sl-puntos button{width:10px;height:10px;border-radius:5px;border:0;background:rgba(255,255,255,.55);padding:0;transition:width .3s}
.sl-puntos button.activo{width:28px;background:#fff}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 24px;font-weight:700;border:2px solid transparent;text-decoration:none;transition:.2s}
.btn-lleno{background:var(--c-boton-fondo);color:var(--c-boton-texto)}
.btn-lleno:hover{background:var(--c-boton-hover)}
.btn-lleno:disabled{opacity:.45;cursor:not-allowed}
.btn-borde{background:#fff;color:var(--c-boton-fondo);border-color:var(--c-boton-fondo)}
.btn-borde:hover{background:var(--c-chip-fondo)}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1DA851}

/* Secciones */
.bloque{padding:56px 20px}
.titulo-seccion{text-align:center;margin-bottom:32px}
.titulo-seccion h2{font-family:Lora,serif;font-size:clamp(24px,3vw,34px);margin:0 0 6px}
.titulo-seccion h2::after{content:"";display:block;width:60px;height:3px;background:currentColor;opacity:.6;margin:12px auto 0;border-radius:2px}
.titulo-seccion p{color:var(--c-texto-suave);margin:0}
.sec-resultados{background:var(--c-pagina-fondo)}
#resultados .titulo-seccion{display:flex;justify-content:space-between;align-items:center;text-align:left;color:var(--c-precio)}
#resultados .titulo-seccion h2::after{margin-left:0}

/* 2) Promociones */
.sec-promos{background:var(--c-promos-fondo)}
.sec-promos .titulo-seccion{color:var(--c-promos-titulo)}
.sec-promos .titulo-seccion p{color:inherit;opacity:.8}
.promos-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.promos-pre{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-promo-marca)}
.promos-cab h2{margin:4px 0 0;font-family:Lora,serif;font-size:clamp(28px,3vw,36px);color:var(--c-promos-titulo)}
.promos-cab p{margin:0;font-size:13.5px;color:var(--c-texto-suave);max-width:420px;text-align:right}
.lista-promos{background:var(--c-promo-tarjeta);border:1px solid var(--c-linea);border-radius:14px;overflow:hidden;box-shadow:var(--sombra)}
.fila-promo{display:grid;grid-template-columns:160px minmax(0,1fr) 190px 250px;gap:22px;align-items:center;padding:16px 24px;border-bottom:1px solid var(--c-linea)}
.fila-promo:last-child{border-bottom:0}
.fila-promo:nth-child(even){background:var(--c-promo-fila)}
.fila-promo.agotado{opacity:.6}
.lp-marca{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--c-promo-marca)}
.lp-nombre{font-size:17px;font-weight:700;line-height:1.3;color:var(--c-producto-titulo);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lp-precio{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.lp-precio span{font-size:23px;font-weight:800;color:var(--c-precio)}
.lp-precio del{font-size:13.5px;color:var(--c-texto-suave)}
.lp-precio.consultar{font-size:16px;font-weight:700;color:var(--c-texto-suave)}
.lp-comprar .comprar{margin:0}
.det{color:var(--c-texto-suave);font-size:14px;margin:0}

/* Precio + comprar */
.precio{font-size:24px;font-weight:800;color:var(--c-precio);margin-top:auto;padding-top:6px}
.precio del{font-size:14px;color:var(--c-texto-suave);font-weight:500;margin-left:8px}
.precio.consultar{font-size:17px;color:var(--c-texto-suave);font-weight:700}
.comprar{display:flex;gap:8px;margin-top:10px}
.cant{display:flex;align-items:center;border:1.5px solid var(--c-linea);border-radius:999px;overflow:hidden;flex:none;background:#fff}
.cant button{width:34px;height:40px;border:0;background:#fff;color:var(--c-precio);font-size:18px;font-weight:700}
.cant button:hover{background:var(--c-chip-fondo)}
.cant input{width:42px;border:0;text-align:center;font:inherit;font-weight:700;-moz-appearance:textfield;appearance:textfield}
.cant input::-webkit-outer-spin-button,.cant input::-webkit-inner-spin-button{-webkit-appearance:none}
.agregar{flex:1;border:0;background:var(--c-boton-fondo);color:var(--c-boton-texto);border-radius:999px;font-weight:700;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;transition:.2s}
.agregar:hover{background:var(--c-boton-hover)}
.agregar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
.agregar.ok{background:var(--c-etiqueta);color:var(--c-etiqueta-texto)}
.agregar:disabled{background:#c9d3d2;color:#fff;cursor:not-allowed}

/* 3) Marcas */
.sec-marcas{background:var(--c-marcas-fondo)}
.sec-marcas .titulo-seccion{color:var(--c-marcas-titulo)}
.grilla-marcas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.tarjeta-marca{background:var(--c-marca-tarjeta);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column}
.tarjeta-marca .tm-img{height:96px;background:var(--c-encabezado-marca) center/cover no-repeat;display:flex;align-items:center;justify-content:center;text-decoration:none}
.tarjeta-marca .tm-img img{max-height:70px;max-width:70%;background:#fff;padding:8px 14px;border-radius:8px}
.tarjeta-marca .tm-nombre{font-family:Lora,serif;color:#fff;font-size:26px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.25);padding:0 12px;text-align:center}
.tarjeta-marca .tm-cuerpo{padding:16px 18px 18px}
.tarjeta-marca h3{margin:0 0 4px;font-size:18px}
.tarjeta-marca h3 a{text-decoration:none;color:var(--c-precio)}
.tarjeta-marca .cuenta{font-size:13px;color:var(--c-texto-suave);margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1.5px solid transparent;background:var(--c-chip-fondo);color:var(--c-chip-texto);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;text-decoration:none;transition:.2s}
.chip:hover,.chip.activo{background:var(--c-boton-fondo);color:var(--c-boton-texto)}

/* 4) Sección por marca (cada marca puede tener sus colores) */
.seccion-marca{background:var(--c-catalogo-fondo);padding:44px 0 20px}
.banner-marca{position:relative;border-radius:var(--radio);overflow:hidden;min-height:170px;background:var(--c-encabezado-marca) center/cover no-repeat;display:flex;align-items:flex-end;margin-bottom:18px}
.banner-marca .bm-txt{position:relative;padding:22px 28px;color:#fff;width:100%;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent);background:linear-gradient(0deg,color-mix(in srgb,var(--c-encabezado-marca) 88%,transparent) 0%,color-mix(in srgb,var(--c-encabezado-marca) 35%,transparent) 70%,transparent)}
.banner-marca h2{margin:0;font-family:Lora,serif;font-size:clamp(24px,3vw,34px)}
.banner-marca p{margin:2px 0 0;opacity:.95}
.banner-marca .bm-logo{position:absolute;top:18px;right:22px;max-height:64px;max-width:160px;background:#fff;border-radius:8px;padding:6px 12px}
.filtros-marca{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}

/* 5) Listado 4 por línea sin imagen */
.grilla-lista{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.item{background:var(--c-producto-tarjeta);border:1px solid var(--c-linea);border-top:4px solid var(--c-producto-borde);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:6px;transition:.2s}
.item:hover{box-shadow:var(--sombra-2)}
.item .cat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--c-producto-borde);font-weight:700}
.item h3{margin:0;font-size:19px;line-height:1.25;font-weight:800;color:var(--c-producto-titulo)}
.item .precio{font-size:22px}
.item .cod{font-size:11.5px;color:var(--c-texto-suave);opacity:.8}
.item.agotado{opacity:.7}
.tag{display:inline-block;background:#fbebd0;color:#8a5a00;font-size:10.5px;letter-spacing:.04em;padding:2px 8px;border-radius:4px;text-transform:uppercase}
.tag-gris{background:#eceff0;color:#6a7575}
.leyenda-seccion{font-size:12.5px;color:var(--c-texto-suave);text-align:right;margin:12px 0 0}
.vacio-busqueda{grid-column:1/-1;text-align:center;color:var(--c-texto-suave);padding:30px}
.aviso-admin{background:#fff4e5;border:1px solid #f3d19e;color:#7a4b00;padding:12px 16px;border-radius:10px;margin:16px auto;max-width:1200px;font-size:14px}

/* Pie */
.footer{background:var(--c-pie-fondo);color:var(--c-pie-texto)}
.footer-in{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:40px;padding:48px 20px}
.footer-logo{width:190px;height:auto}
.footer h3{margin:0 0 12px;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.footer p{margin:0 0 6px}
.footer a{color:inherit}
.pasos{margin:0;padding-left:18px}
.pasos li{margin-bottom:6px}
.redes a{margin-right:14px}
.footer-bajo{border-top:1px solid rgba(255,255,255,.15);font-size:13px;padding:14px 0;opacity:.8}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25);z-index:30;transition:transform .2s}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:32px;height:32px}

/* Carrito */
.velo{position:fixed;inset:0;background:rgba(15,30,30,.45);opacity:0;pointer-events:none;transition:.3s;z-index:60}
.velo.visible{opacity:1;pointer-events:auto}
.carrito{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:#fff;color:#1f2a2a;z-index:70;transform:translateX(100%);transition:transform .35s ease;display:flex;flex-direction:column;box-shadow:var(--sombra-2)}
.carrito.abierto{transform:none}
.carrito-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;background:var(--c-carrito-cabecera);color:#fff}
.carrito-head h2{margin:0;font-size:20px}
.cerrar{background:none;border:0;color:#fff;font-size:22px}
.carrito-cuerpo{flex:1;overflow-y:auto;padding:14px 22px}
.carrito-vacio{text-align:center;color:#5e6b6b;padding:50px 10px}
.linea{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid #dce5e4}
.linea .nom{font-weight:700;line-height:1.3}
.linea .sub{font-size:13px;color:#5e6b6b}
.linea .imp{font-weight:800;color:var(--c-precio);text-align:right}
.linea .cant{justify-self:start}
.linea .cant button{height:32px;width:30px}
.linea .cant input{width:40px}
.quitar{background:none;border:0;color:#a0564a;font-size:13px;text-decoration:underline;justify-self:end;align-self:center}
.carrito-pie{border-top:1px solid #dce5e4;padding:16px 22px 20px;background:var(--c-carrito-pie)}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:17px}
.total strong{font-size:24px;color:var(--c-precio)}
.leyenda{font-size:12px;color:#5e6b6b;margin:4px 0 12px}
.aviso-minimo{font-size:13px;color:#8a4b00;background:#fff4e5;padding:8px 10px;border-radius:8px}
#acciones-items,#acciones-datos{display:flex;flex-direction:column;gap:8px}
#acciones-items .btn,#acciones-datos .btn{width:100%}
.vaciar{align-self:center;font-size:13px;color:#5e6b6b}
#paso-datos h3{margin:6px 0 10px;color:var(--c-precio)}
#paso-datos label{display:block;font-size:13px;font-weight:600;margin-bottom:10px;color:#5e6b6b}
#paso-datos input,#paso-datos textarea{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1.5px solid #dce5e4;border-radius:8px;font:inherit;color:#1f2a2a}
#paso-datos input:focus,#paso-datos textarea:focus{outline:none;border-color:var(--c-boton-fondo)}
#paso-datos .invalido{border-color:#c0584a}
.form-error{color:#a0443a;font-size:13px;min-height:1em}
.volver{font-size:13px;color:var(--c-precio)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:#244443;color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:.3s;z-index:80;max-width:90vw;text-align:center}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* Responsive */
@media (max-width:1080px){
  .grilla-lista{grid-template-columns:repeat(3,1fr)}
  .contacto-head{display:none}
  .buscador{max-width:none}
}
@media (max-width:820px){
  .grilla-lista{grid-template-columns:repeat(2,1fr)}
  .fila-promo{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 18px}
  .lp-marca{grid-column:1/-1}
  .lp-prod{grid-column:1/-1}
  .lp-precio{align-items:flex-start;text-align:left}
  .lp-comprar{justify-self:end;min-width:230px}
  .footer-in{grid-template-columns:1fr;gap:26px}
  .slide-txt{padding:0 56px}
  .slide{aspect-ratio:auto;min-height:300px}
}
@media (max-width:600px){
  html{scroll-padding-top:170px}
  .topbar{font-size:12px}
  .header-in{flex-wrap:wrap;gap:10px 12px;padding:10px 16px}
  .logo img{height:54px}
  .buscador{order:3;flex-basis:100%}
  .btn-carrito{margin-left:auto;padding:10px 14px}
  .btn-carrito-txt{display:none}
  .wrap{padding-left:16px;padding-right:16px}
  .bloque{padding:40px 16px}
  .grilla-lista{grid-template-columns:1fr}
  .promos-cab{flex-direction:column;align-items:flex-start}
  .promos-cab p{text-align:left}
  .lp-comprar{min-width:0;grid-column:1/-1;justify-self:stretch}
  .slide-txt{padding:0 24px 30px}
  .sl-flecha{display:none}
  .banner-marca .bm-logo{max-height:44px;top:12px;right:12px}
  #resultados .titulo-seccion{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ================= CATÁLOGO COMPACTO ================= */
.nav a.activo{border-bottom-color:currentColor;background:rgba(255,255,255,.12)}
.catalogo{background:var(--c-catalogo-fondo);padding:36px 0 48px}
.cat-wrap{max-width:1400px;margin:0 auto;padding:0 24px}
.cat-encab{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.cat-encab h2{margin:0;font-family:Lora,serif;font-size:clamp(26px,3vw,34px);color:var(--c-promos-titulo)}
.cat-tipos{display:flex;flex-wrap:wrap;gap:8px}
.tipo{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:2px solid transparent;background:var(--c-chip-fondo);color:var(--c-chip-texto);font-family:inherit;font-size:14px;font-weight:700;transition:.15s}
.tipo span{font-size:12px;font-weight:600;opacity:.75}
.tipo:hover{border-color:var(--c-tipo-activo)}
.tipo.activo{background:var(--c-tipo-activo);color:var(--c-tipo-activo-texto);border-color:var(--c-tipo-activo)}

.cat-cuerpo{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start}
.cat-lateral{position:sticky;top:calc(var(--alto-header,150px) + 12px);max-height:calc(100vh - var(--alto-header,150px) - 24px);overflow-y:auto;background:var(--c-lateral-fondo);border:1px solid var(--c-linea);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.lat-cab{display:none}
.lat-item,.lat-cat{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:0;border-radius:8px;background:transparent;color:var(--c-texto);font-family:inherit;text-align:left;cursor:pointer}
.lat-item{min-height:42px;padding:8px 12px;font-size:14.5px;font-weight:600}
.lat-item:hover,.lat-cat:hover{background:var(--c-chip-fondo)}
.lat-item.activo{background:var(--c-lateral-activo);color:var(--c-lateral-activo-texto);font-weight:700}
.lat-item .n,.lat-cat .n{font-size:12px;font-weight:600;color:var(--c-texto-suave)}
.lat-item.activo .n{color:inherit;opacity:.8}
.lat-promos{color:var(--c-precio)}
.lat-titulo{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-texto-suave);padding:14px 12px 6px}
.lat-cats{display:none;flex-direction:column;gap:2px;margin:2px 0 8px}
.lat-marca.abierta .lat-cats{display:flex}
.lat-marca.una-cat .lat-cats{display:none}
.lat-cat{min-height:38px;padding:6px 12px 6px 28px;font-size:13.5px;font-weight:500;color:var(--c-texto)}
.lat-cat.activo{background:var(--c-chip-fondo);color:var(--c-chip-texto);font-weight:700}
.lat-velo{display:none}

.cat-main{min-width:0;background:var(--c-catalogo-fondo);border-radius:14px}
.cat-barra-movil{display:none}
.cat-banner{position:relative;height:120px;border-radius:14px;overflow:hidden;background:var(--c-encabezado-marca);margin-bottom:14px;display:flex;align-items:flex-end}
.cat-banner .cb-img{position:absolute;inset:0;background:center/cover no-repeat}
.cat-banner .cb-txt{position:relative;width:100%;padding:16px 22px;color:#fff;display:flex;flex-direction:column;background:linear-gradient(0deg,color-mix(in srgb,var(--c-encabezado-marca) 90%,transparent),color-mix(in srgb,var(--c-encabezado-marca) 30%,transparent) 80%,transparent)}
.cat-banner .cb-txt strong{font-family:Lora,serif;font-size:26px}
.cat-banner .cb-txt span{font-size:14px;opacity:.95}
.cat-banner .cb-logo{position:absolute;top:14px;right:18px;max-height:52px;max-width:150px;background:#fff;border-radius:8px;padding:5px 10px;z-index:1}
.cat-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 12px}
.cat-migas{font-size:13px;color:var(--c-texto-suave)}
.cat-cab h3{margin:2px 0 0;font-family:Lora,serif;font-size:26px;color:var(--c-producto-titulo)}
.cat-ctrl{display:flex;align-items:center;gap:18px;font-size:14px;color:var(--c-texto-suave)}
.chk-stock{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--c-texto);cursor:pointer}
.chk-stock input{width:18px;height:18px;accent-color:var(--c-boton-fondo)}

.cat-tabla{background:var(--c-producto-tarjeta);border:1px solid var(--c-linea);border-radius:14px}
.fila:last-child{border-radius:0 0 14px 14px}
.cat-th,.fila{display:grid;grid-template-columns:78px minmax(0,1fr) 180px 150px 170px;gap:16px;align-items:center;padding:0 20px}
.cat-th{position:sticky;top:var(--alto-header,150px);z-index:2;background:var(--c-pagina-fondo);border-bottom:1px solid var(--c-linea);height:40px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-texto-suave);border-radius:14px 14px 0 0}
.cat-th .der{text-align:right}.cat-th .cen{text-align:center}
.fila{min-height:64px;padding-top:8px;padding-bottom:8px;border-bottom:1px solid var(--c-linea)}
.fila:last-child{border-bottom:0}
.fila:hover{background:color-mix(in srgb,var(--c-producto-tarjeta) 92%,var(--c-boton-fondo))}
.fila.en-pedido{background:var(--c-en-pedido)}
.fila.agotado .f-nombre{color:var(--c-texto-suave)}
.f-cod{font-size:12.5px;color:var(--c-texto-suave)}
.f-nombre{font-size:15px;font-weight:700;color:var(--c-producto-titulo);line-height:1.3}
.f-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12.5px;color:var(--c-texto-suave);margin-top:2px}
.f-marca{display:none;font-weight:600}
.mostrar-marca .f-marca{display:inline}
.f-det{font-size:13.5px;color:var(--c-texto)}
.f-precio{text-align:right;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.f-precio span{font-size:18px;font-weight:800;color:var(--c-precio)}
.f-precio del{font-size:12.5px;color:var(--c-texto-suave)}
.f-precio.consultar{font-size:14px;font-weight:700;color:var(--c-texto-suave)}
.f-accion{display:flex;justify-content:center}
.f-agregar{height:44px;width:150px;border:0;border-radius:999px;background:var(--c-boton-fondo);color:var(--c-boton-texto);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.f-agregar:hover{background:var(--c-boton-hover)}
.f-step{height:44px;width:150px;display:flex;align-items:center;justify-content:space-between;border:2px solid var(--c-boton-fondo);border-radius:999px;background:#fff;box-sizing:border-box}
.f-step button{width:44px;height:40px;border:0;background:transparent;font-size:20px;font-weight:700;color:var(--c-boton-fondo);cursor:pointer}
.f-qty{font-size:15px;font-weight:800;color:var(--c-producto-titulo)}
.f-nodisp{font-size:13px;font-weight:600;color:var(--c-texto-suave)}
.cat-vacio{padding:50px 20px;text-align:center;color:var(--c-texto-suave)}
.cat-pedido{position:sticky;bottom:12px;z-index:5;margin-top:14px;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 22px;background:var(--c-pie-fondo);color:var(--c-pie-texto);border-radius:12px;box-shadow:var(--sombra-2);font-size:14.5px}
.cat-pedido strong{color:#fff}
.cat-pedido .cp-total{font-size:18px}
.cat-pedido .btn{background:var(--c-etiqueta);color:var(--c-etiqueta-texto);white-space:nowrap}

@media (max-width:1100px){
  .cat-th,.fila{grid-template-columns:minmax(0,1fr) 140px 150px 160px}
  .f-cod,.cat-th>div:first-child{display:none}
}
@media (max-width:900px){
  .cat-cuerpo{grid-template-columns:1fr}
  .cat-lateral{position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);max-height:none;z-index:90;border-radius:0;transform:translateX(-105%);transition:transform .3s;box-shadow:8px 0 30px rgba(0,0,0,.25);padding-top:0}
  .lateral-abierto .cat-lateral{transform:none}
  .lat-cab{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1;margin:0 -10px 8px;padding:12px 10px 12px 18px;background:var(--c-menu-fondo);color:var(--c-menu-texto)}
  .lat-cerrar{width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:20px}
  .lat-velo{position:fixed;inset:0;background:rgba(15,30,30,.45);z-index:85}
  .lateral-abierto .lat-velo{display:block}
  .cat-barra-movil{display:flex;gap:8px;margin-bottom:12px}
  .btn-lateral{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--c-lateral-activo);color:var(--c-lateral-activo-texto);font-family:inherit;font-size:14px;font-weight:700}
  .btn-lateral svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2}
  .cat-tipos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:0 24px}
  .cat-tipos::-webkit-scrollbar{display:none}
  .tipo{flex-shrink:0}
}
@media (max-width:640px){
  .cat-wrap{padding:0 14px}
  .cat-tipos{margin:0 -14px;padding:0 14px}
  .cat-cab{flex-direction:column;align-items:flex-start;gap:6px}
  .cat-ctrl{gap:12px;flex-wrap:wrap}
  .cat-th{display:none}
  .fila{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 12px}
  .f-prod{grid-column:1/-1}
  .f-det{font-size:12.5px;color:var(--c-texto-suave)}
  .f-precio{grid-column:1;grid-row:3;align-items:flex-start;text-align:left}
  .f-accion{grid-column:2;grid-row:2/4;align-self:center}
  .f-agregar,.f-step{width:128px}
  .cat-banner{height:96px}
  .cat-pedido{flex-direction:column;align-items:stretch;padding:10px 12px;font-size:13.5px;text-align:center}
}

.con-pedido .wa-flotante{bottom:92px}
@media (max-width:640px){.con-pedido .wa-flotante{bottom:130px}}