/* ============================================================
   TIENDA — 76.ª (2026-08-27) · carril T
   ------------------------------------------------------------
   Lo que la 76.ª añadió a la tienda pública: buscador, semáforo de
   existencias, ficha del rubro en la tarjeta, cantidad editable dentro del
   carrito y la elección de entrega.

   Lo que YA funcionaba sigue en el <style> de negocio.php: mover 100 líneas
   de CSS probado a otro archivo no arregla nada y sí puede romperle la
   pantalla a los otros carriles. Aquí solo vive lo nuevo.

   Sin terceros: ni un CDN, ni una fuente de fuera, ni un framework. Se
   apoya en las variables que el sitio ya define (--line, --card, --panel,
   --dim, --acc, --navy) y trae su propio valor de reserva por si esta
   página se sirviera sin ellas.
   ============================================================ */

/* ── Buscador ──────────────────────────────────────────────
   Un catálogo de 300 artículos sin buscador obliga a bajar la rueda hasta
   rendirse. La lupa va DENTRO del campo (un icono aparte es un elemento
   más que tocar en el celular) y la X solo aparece cuando hay algo escrito:
   un botón de limpiar sobre un campo vacío es ruido. */
.biz-buscar{position:relative;margin:0 0 .9rem}
.biz-buscar input{
  width:100%;
  /* 44 px es el mínimo que una yema toca sin fallar; el buscador es lo
     primero que se usa en el celular y no puede ser el más pequeño. */
  min-height:44px;
  padding:.55rem 2.6rem .55rem 2.5rem;
  font-size:1rem;
  border:1px solid var(--line,#dce5ea);
  border-radius:999px;
  background:var(--card,#fff) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355677c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem center;
  background-size:18px 18px;
  color:inherit;
}
.biz-buscar input:focus{
  outline:none;
  border-color:#087f8c;
  box-shadow:0 0 0 3px rgba(8,127,140,.15);
}
/* El navegador pinta su propia X en los input[type=search] y quedaban dos
   encima de la otra. Se apaga la suya y se deja la nuestra, que es más
   grande y sabe además vaciar el filtro. */
.biz-buscar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.biz-buscar button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:50%;
  background:none;color:var(--dim,#55677c);
  font-size:1.4rem;line-height:1;cursor:pointer;
}
.biz-buscar button:hover{background:rgba(8,127,140,.1);color:#087f8c}
.biz-nada{
  margin:.2rem 0 1rem;padding:1rem 1.1rem;
  border:1px dashed var(--line,#dce5ea);border-radius:14px;
  background:var(--card,#fff);color:var(--dim,#55677c);text-align:center;
}

/* ── Ficha del rubro en la tarjeta ─────────────────────────
   Dos datos del oficio, en una línea que no compite con el nombre. Se corta
   con puntos suspensivos antes que romper la altura de la rejilla: una
   tarjeta más alta que las demás descuadra la fila entera. */
.biz-ficha-mini{
  margin:.1rem 0 .35rem;
  font-size:.78rem;
  color:var(--dim,#55677c);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── Semáforo de existencias ───────────────────────────────
   Tres estados y tres colores, con el TEXTO diciendo lo mismo que el color:
   un daltónico ve «Quedan 3» igual que cualquiera, y el color solo lo
   subraya. .hay y .no ya existían para la ficha del artículo; aquí se suma
   «poco», que es el que de verdad empuja a comprar.
   Contrastes medidos sobre su propio fondo: los tres pasan de 4.5:1. */
.biz-stockb.poco{background:#fff4e3;color:#8a5200}
.biz-card .biz-stockb{align-self:flex-start;margin:.1rem 0 .2rem}
/* Lo agotado no se esconde —el comprador quiere saber que existe y que
   volverá— pero se apaga para que no compita con lo que sí se puede
   comprar. La opacidad no toca el texto del semáforo: si atenuáramos el
   «Agotado» estaríamos escondiendo justo la razón de la atenuación. */
.biz-card.sin-stock{opacity:.72}
.biz-card.sin-stock .biz-stockb{opacity:1}
.biz-card.sin-stock .biz-foto,.biz-card.sin-stock .biz-foto-ph{filter:grayscale(.65)}

/* ── Cantidad dentro del carrito ───────────────────────────
   Antes, para pedir 3 en vez de 1 había que quitar la línea y volver al
   catálogo. Ahora se corrige donde se está mirando el total. Los botones
   son cuadrados de 34 px: en el celular se tocan sin apuntar. */
.biz-cart-qty{display:flex;align-items:center;gap:.3rem;margin-top:.35rem}
.biz-cart-qty button{
  width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--line,#dce5ea);border-radius:9px;
  background:var(--card,#fff);color:#28455c;
  font-size:1.1rem;font-weight:800;line-height:1;cursor:pointer;
}
.biz-cart-qty button:hover:not(:disabled){border-color:#087f8c;color:#087f8c}
.biz-cart-qty button:disabled{opacity:.4;cursor:not-allowed}
.biz-cart-qty input{
  width:56px;min-height:34px;text-align:center;font-size:.95rem;
  border:1px solid var(--line,#dce5ea);border-radius:9px;padding:.2rem;
}
/* El tope de existencias, dicho en pequeño junto al selector: explica por
   qué el botón «+» dejó de responder. Sin esto parece que está roto. */
.biz-cart-tope{font-size:.7rem;color:#8a5200;margin-left:.15rem}

/* ── Cómo lo recibe ────────────────────────────────────────
   Recojo o envío. Se pregunta ANTES de la dirección porque quien recoge no
   tiene por qué escribir una, y un campo obligatorio que no aplica es la
   forma más rápida de perder una compra. */
.biz-entrega{display:flex;gap:.5rem;margin:.2rem 0 .6rem}
.biz-entrega label{
  flex:1 1 0;display:flex;gap:.45rem;align-items:center;justify-content:center;
  padding:.6rem .5rem;border:1px solid var(--line,#dce5ea);border-radius:12px;
  background:var(--panel,#fff);cursor:pointer;font-size:.86rem;font-weight:700;
  text-align:center;
}
.biz-entrega label.on{border-color:#087f8c;background:#eefcfd;box-shadow:0 0 0 2px rgba(8,127,140,.14)}
.biz-entrega input{margin:0}

/* ── Celular ───────────────────────────────────────────────
   Medido a 390 px, que es lo que tiene la mayoría de los que compran. */
@media(max-width:740px){
  /* El buscador se queda pegado arriba al bajar por el catálogo: es lo que
     se vuelve a usar una y otra vez y perseguirlo hacia arriba en una lista
     de 300 artículos es justo lo que se viene a evitar. */
  .biz-buscar{position:sticky;top:0;z-index:5;margin:0 -4px .8rem;padding:.5rem 4px;
              background:var(--bg,#f6f9fb)}
  .biz-buscar input{font-size:16px}  /* menos de 16px y iOS hace zoom al enfocar */
  .biz-entrega{flex-direction:column}
  .biz-entrega label{justify-content:flex-start}
  .biz-cart-qty button{width:38px;height:38px}
}

/* ══════════════════════════════════════════════════════════════
   76.ª (27/08) · carril WEB — EL SITIO PÚBLICO EN PESTAÑAS
   --------------------------------------------------------------
   Todo lo que hay aquí se llama `.sp-*` y SOLO se pinta cuando la empresa
   configuró su sitio: negocio.php no emite una sola de estas clases si
   sitiocfg_de_fabrica() es cierto. Una empresa que no tocó nada no recibe
   ni un byte de esta hoja aplicado a su página.

   La forma es la de los perfiles de Facebook / Instagram / Google Business
   —portada ancha, logo montado sobre su borde, botones de acción— porque es
   la que el visitante ya sabe leer sin que nadie se la explique. Se copia la
   FORMA, no el código: aquí no entra ni un CDN ni una librería.
   ══════════════════════════════════════════════════════════════ */

/* ── La cabecera ── */
.sp-hero{background:#fff;border-bottom:1px solid var(--line,#dce5ea)}
.sp-portada{height:220px;background-size:cover;background-position:center 50%;background-repeat:no-repeat}
.sp-cab{display:grid;grid-template-columns:auto 1fr auto;gap:0 1.1rem;align-items:end;padding-bottom:1rem}
/* El logo «a caballo» sobre el borde inferior de la portada: es el gesto que
   hace que esto se lea como un perfil y no como una cabecera cualquiera. */
.sp-logo{width:112px;height:112px;margin-top:-56px;border:4px solid #fff;background:#eef2f6;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;z-index:2;
  font-weight:800;font-size:2rem;color:#475569;box-shadow:0 2px 10px rgba(8,40,66,.16);flex:0 0 auto}
.sp-logo-circulo{border-radius:50%}
.sp-logo-cuadrado{border-radius:18px}
.sp-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.sp-titulos{min-width:0;padding-bottom:.2rem}
.sp-titulos h1{margin:0 0 .2rem;font-size:1.6rem;line-height:1.2;overflow-wrap:anywhere}
.sp-sub{margin:0;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;color:var(--dim,#64748b);font-size:.84rem}
.sp-frase{margin:.35rem 0 0;color:var(--dim,#64748b);font-size:.92rem;overflow-wrap:anywhere}

/* ── Botones de acción ── */
.sp-acciones{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding-bottom:.2rem}
.sp-seguir{margin:0}
.sp-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;border-radius:10px;
  border:1px solid var(--line,#dce5ea);background:#fff;color:#10203a;font-weight:700;font-size:.86rem;
  text-decoration:none;cursor:pointer;line-height:1.2;white-space:nowrap;transition:border-color .15s,background .15s}
.sp-btn:hover{border-color:#087f8c;background:#f4fdfe}
.sp-btn-pri{background:#087f8c;border-color:#087f8c;color:#fff}
.sp-btn-pri:hover{background:#0a6f7a;border-color:#0a6f7a;color:#fff}
.sp-btn-wa{border-color:#25d366;color:#0a7d52}
.sp-btn-wa:hover{background:#eafaf1;border-color:#25d366}
.sp-btn-grande{padding:.75rem 1.3rem;font-size:.98rem}
/* 🔴 44 px de alto de toque en el móvil: por debajo de eso se falla el botón
   de llamar, que es justo el que más se pulsa desde la calle. */
@media(max-width:640px){.sp-btn{min-height:44px}}

/* ── Las pestañas ── */
.sp-tabs-marco{border-top:1px solid var(--line,#dce5ea);background:#fff;position:sticky;top:0;z-index:5}
.sp-tabs{display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{flex:0 0 auto;border:0;background:none;padding:.85rem .95rem;font-weight:700;font-size:.88rem;
  color:var(--dim,#64748b);cursor:pointer;border-bottom:3px solid transparent;text-decoration:none;
  white-space:nowrap;line-height:1.2}
.sp-tab:hover{color:#10203a}
.sp-tab.on{color:#087f8c;border-bottom-color:#087f8c}
/* El foco se VE: estas pestañas se manejan con teclado y sin anillo no se
   sabe en cuál estás. */
.sp-tab:focus-visible{outline:2px solid #087f8c;outline-offset:-3px;border-radius:6px}

/* ── Los paneles ── */
.sp-pane{padding:1.6rem 0 2.2rem}
.sp-pane[hidden]{display:none}

/* ── Inicio y Contacto: tarjetas ── */
.sp-inicio,.sp-contacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:.9rem;margin-top:1rem}
.sp-tarjeta{border:1px solid var(--line,#dce5ea);border-radius:14px;padding:.9rem 1rem;background:#fff}
.sp-tarjeta>small{display:block;font-size:.68rem;letter-spacing:.07em;color:var(--dim,#64748b);font-weight:800;margin-bottom:.55rem}
.sp-lista,.sp-horas{list-style:none;margin:0;padding:0}
.sp-lista li{padding:.3rem 0;border-bottom:1px solid #f1f5f9;display:flex;flex-wrap:wrap;gap:.45rem;align-items:baseline}
.sp-lista li:last-child{border-bottom:0}
.sp-lista a{text-decoration:none;color:#10203a}
.sp-lista a:hover{color:#087f8c}
.sp-lista span{color:var(--dim,#64748b);font-size:.78rem}
.sp-horas li{display:flex;justify-content:space-between;gap:.6rem;padding:.26rem 0;border-bottom:1px solid #f1f5f9;font-size:.85rem}
.sp-horas li:last-child{border-bottom:0}
.sp-horas span{color:var(--dim,#64748b)}
.sp-atajos{display:flex;flex-wrap:wrap;gap:.35rem}
.sp-wa-mini{font-size:.72rem;font-weight:800;color:#0a7d52;text-decoration:none;border:1px solid #a7e8cd;
  border-radius:999px;padding:.12rem .5rem;background:#eafaf1}
.sp-wa-mini:hover{background:#d6f5e6}
.sp-cta{margin:1.3rem 0 0;text-align:center}

/* ── Sucursales ── */
.sp-sucs{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.9rem}
.sp-suc{border:1px solid var(--line,#dce5ea);border-radius:14px;padding:.9rem 1rem;background:#fff}
.sp-suc b{display:block;font-size:.98rem;margin-bottom:.25rem}
.sp-suc p{margin:0 0 .7rem;color:var(--dim,#64748b);font-size:.86rem;line-height:1.45}
.sp-suc-acc{display:flex;flex-wrap:wrap;gap:.4rem}

/* ── Galería ── */
.sp-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem}
.sp-foto{display:block;position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line,#dce5ea);
  background:#f4f6f8;text-decoration:none;aspect-ratio:4/3}
.sp-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.sp-foto:hover img{transform:scale(1.04)}
.sp-foto span{position:absolute;left:0;right:0;bottom:0;padding:.45rem .6rem;font-size:.76rem;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));line-height:1.3}

/* ── El visor de fotos (propio, sin librería) ── */
.sp-visor{position:fixed;inset:0;z-index:1200;background:rgba(6,14,24,.93);display:flex;align-items:center;
  justify-content:center;flex-direction:column;padding:1rem}
.sp-visor img{max-width:min(96vw,1400px);max-height:80vh;object-fit:contain;border-radius:10px}
.sp-visor-pie{color:#e2e8f0;font-size:.86rem;margin-top:.7rem;text-align:center;max-width:720px}
.sp-visor button{position:absolute;background:rgba(255,255,255,.14);border:0;color:#fff;width:48px;height:48px;
  border-radius:50%;font-size:1.5rem;cursor:pointer;line-height:1}
.sp-visor button:hover{background:rgba(255,255,255,.28)}
.sp-visor .sp-v-x{top:1rem;right:1rem;font-size:1.2rem}
.sp-visor .sp-v-ant{left:1rem}
.sp-visor .sp-v-sig{right:1rem}
.sp-visor button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── Redes ── */
.sp-redes-pub{display:flex;flex-wrap:wrap;gap:.5rem}

/* ── «Consultar» en lugar del precio (modo informativo) ── */
.biz-price-consultar{color:#087f8c;font-weight:800}

/* ── El texto enriquecido de «Nosotros» (carril RICH) ── */
.biz-somos-txt{line-height:1.55;overflow-wrap:anywhere}
.biz-somos-txt p{margin:0 0 .5rem}
.biz-somos-txt p:last-child{margin-bottom:0}
.biz-somos-txt img{max-width:100%;height:auto;border-radius:8px}
.biz-somos-txt ul,.biz-somos-txt ol{margin:.3rem 0 .5rem 1.1rem;padding:0}

/* ══════════════════════════════════════════════════════════════
   TEMA OSCURO
   Solo sobre lo de la EMPRESA (`.sp-oscuro` va en cada panel). La cabecera y
   el pie del sitio son de Adiasoft y se quedan como están: teñirlos habría
   dejado el menú de arriba de un color que la empresa no eligió.
   ══════════════════════════════════════════════════════════════ */
.sp-oscuro{background:#0f172a;color:#e2e8f0}
.sp-oscuro .sp-tarjeta,.sp-oscuro .sp-suc{background:#16213a;border-color:#243049}
.sp-oscuro .sp-lista li,.sp-oscuro .sp-horas li{border-bottom-color:#243049}
.sp-oscuro .sp-lista a{color:#e2e8f0}
.sp-oscuro .sp-btn{background:#16213a;border-color:#2c3a56;color:#e2e8f0}
.sp-oscuro .sp-btn:hover{background:#1d2b47;border-color:#0bb6c4}
.sp-oscuro .sp-btn-pri{background:#0bb6c4;border-color:#0bb6c4;color:#04222b}
.sp-oscuro .biz-card{background:#16213a;border-color:#243049;color:#e2e8f0}
.sp-oscuro .biz-card h3,.sp-oscuro .biz-card h3 a{color:#e2e8f0}
.sp-oscuro .biz-section-head h2{color:#f1f5f9}
.sp-oscuro .biz-somos-card{background:#16213a;border-color:#243049}
.sp-oscuro .biz-desc,.sp-oscuro .biz-card p,.sp-oscuro .sp-suc p{color:#94a3b8}
.sp-oscuro .biz-buscar input{background:#16213a;border-color:#2c3a56;color:#e2e8f0}
.sp-oscuro .biz-cat{background:#16213a;border-color:#2c3a56;color:#cbd5e1}
.sp-oscuro .biz-cat.on{background:#0bb6c4;border-color:#0bb6c4;color:#04222b}
.sp-oscuro .empty{background:#16213a;border-color:#243049;color:#94a3b8}

/* ══════════════════════════════════════════════════════════════
   MÓVIL — medido a 390 px (iPhone 12/13/14), que es el ancho real desde el
   que se abre la página de un negocio.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  /* La portada baja de altura: en un móvil, 220 px de foto empujan el nombre
     y los botones fuera de la primera pantalla, que es lo único que mucha
     gente llega a ver. */
  .sp-portada{height:132px}
  /* Una sola columna: logo, nombre y después los botones. Tres columnas en
     390 px dejan el nombre partido en dos letras por línea. */
  .sp-cab{grid-template-columns:1fr;gap:.5rem}
  .sp-logo{width:82px;height:82px;margin-top:-41px;font-size:1.5rem;border-width:3px}
  .sp-titulos h1{font-size:1.28rem}
  .sp-acciones{padding-top:.2rem}
  /* Los botones ocupan el ancho de a dos: el pulgar no falla y no queda una
     fila con un botón suelto y medio hueco al lado. */
  .sp-acciones>*{flex:1 1 calc(50% - .4rem);justify-content:center}
  .sp-tab{padding:.8rem .7rem;font-size:.84rem}
  .sp-pane{padding:1.1rem 0 1.8rem}
  .sp-inicio,.sp-contacto,.sp-sucs{grid-template-columns:1fr}
  .sp-galeria{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.45rem}
  .sp-visor button{width:44px;height:44px}
  .sp-visor .sp-v-ant{left:.35rem}
  .sp-visor .sp-v-sig{right:.35rem}
}

/* 76.ª (27/08) · carril WEB — la ficha técnica del artículo (contenido del
   carril RICH: HTML ya saneado). */
.biz-fichatec{margin:1rem 0 .4rem;padding:.85rem 1rem;border:1px solid var(--line,#dce5ea);border-radius:12px;background:#fbfdff}
.biz-fichatec>small{display:block;font-size:.68rem;letter-spacing:.07em;color:var(--dim,#64748b);font-weight:800;margin-bottom:.5rem}
.biz-fichapdf{margin:.5rem 0 0}
.sp-oscuro .biz-fichatec{background:#16213a;border-color:#243049}

/* ══════════════════════════════════════════════════════════════
   02/09/2026 · CARRITO: minimizable, compacto y sin chocar con nada
   --------------------------------------------------------------
   Sobrescribe las reglas del <style> de negocio.php (que van DESPUÉS de
   esta hoja en el HTML): por eso los selectores llevan `#bizCart` o `body `
   delante, que pesan más que una clase sola.

   Puntos de corte:
     · ≥1024  panel lateral derecho, debajo del menú (--biz-nav-h la mide el JS)
     · 600–1023 (tablet) hoja inferior al 60 % de alto
     · <600 (celular) hoja inferior a todo lo ancho con el botón de enviar
       pegado abajo; la pastilla pasa a barra ancha sobre la barra de la app.
   El bot (Adiabot .fab-wrap y chat .chatc) se esconde con el carrito abierto
   y, en tablet/celular, siempre que la pastilla está visible: eran dos globos
   en la misma esquina.
   ══════════════════════════════════════════════════════════════ */
:root{--biz-nav-h:79px}

/* ── Pastilla ── */
body .biz-cart{position:fixed;right:104px;bottom:22px;z-index:290}
body .biz-cart-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;min-height:42px;font-size:.9rem;line-height:1.1;box-shadow:0 10px 26px rgba(2,20,50,.26)}
body .biz-cart-btn:hover{filter:brightness(1.08)}
body .biz-cart-btn:focus-visible{outline:3px solid #0bb6c4;outline-offset:2px}
body .biz-cart-btn b{margin-left:0;padding:0 7px;font-size:.8rem;line-height:1.55;min-width:22px;text-align:center}
.biz-cart-pill-tot{font-weight:700;font-size:.86rem;opacity:.92;padding-left:7px;border-left:1px solid rgba(255,255,255,.35)}
.biz-cart-pill-tot:empty,.biz-cart-btn.vacio .biz-cart-pill-tot{display:none}

/* ── Velo ── */
.biz-cart-velo{position:fixed;inset:0;z-index:289;background:rgba(6,20,40,.3)}
.biz-cart-velo[hidden]{display:none}

/* ── Panel (escritorio: lateral, DEBAJO del menú, ENCIMA de todo lo demás) ── */
#bizCart{z-index:295;top:var(--biz-nav-h,79px);bottom:0;width:min(400px,100vw);overflow:hidden;
  box-shadow:-14px 0 40px rgba(2,20,50,.2);visibility:hidden;transition:transform .22s,visibility 0s linear .22s}
#bizCart.open{visibility:visible;transition:transform .22s}
#bizCart .biz-cart-head{position:relative;padding:10px 14px;gap:8px;flex:none}
#bizCart .biz-cart-head>b{font-size:1rem}
.biz-cart-hbtns{display:flex;gap:6px;margin-left:auto}
.biz-cart-hbtns button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:34px;padding:0 10px;
  border:1px solid var(--line,#dce5ea);border-radius:9px;background:var(--card,#fff);color:#28455c;font-weight:700;font-size:.8rem;cursor:pointer;line-height:1}
.biz-cart-hbtns button:hover{border-color:#087f8c;color:#087f8c}
.biz-cart-hbtns button:focus-visible{outline:2px solid #087f8c;outline-offset:2px}
#bizCartClose{width:34px;padding:0;font-size:.95rem}
.biz-cart-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
#bizCart .biz-cart-body{flex:none;overflow:visible;min-height:0;padding:4px 14px 2px}
#bizCart .biz-cart-body>.pf-sub{margin:.6rem 0;font-size:.86rem}
#bizCart .biz-cart-foot{flex:none;overflow:visible;padding:8px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line,#e2e8f0)}

/* ── Líneas: apretadas ── */
#bizCart .biz-cart-line{padding:7px 0;gap:4px 8px;align-items:start}
#bizCart .biz-cart-line b{font-size:.9rem;line-height:1.25}
#bizCart .biz-cart-line small{font-size:.76rem}
#bizCart .biz-cart-line [data-del]{font-size:.76rem;padding:2px 0;margin-top:2px}
#bizCart .biz-cart-qty{margin-top:.25rem;gap:.25rem}
#bizCart .biz-cart-qty button{width:30px;height:30px;font-size:1rem}
#bizCart .biz-cart-qty input{width:48px;min-height:30px;font-size:.9rem;padding:.1rem}
#bizCart .biz-cart-tope{font-size:.68rem}

/* ── Total y formulario: compactos ── */
#bizCart .pos-totales{margin:0 0 8px;padding:8px 10px;border:1px solid var(--line,#e2e8f0);border-radius:10px;background:#f7fafc;grid-template-columns:1fr;gap:0}
#bizCart .pos-totales>div{flex-direction:row;justify-content:space-between;align-items:baseline}
#bizCart .pos-totales span{font-size:.72rem}
#bizCart .pos-totales b{font-size:1.15rem}
#bizCart .field{margin-bottom:8px}
#bizCart .field label{font-size:.74rem;margin-bottom:3px}
#bizCart .field input,#bizCart .field select,#bizCart .field textarea{min-height:38px;padding:.4rem .6rem;font-size:.9rem;border-radius:9px}
#bizCart .field textarea{min-height:52px}
#bizCart .field-row{gap:8px}
#bizCart form>p{margin:.35rem 0 .3rem!important;font-size:.86rem}
#bizCart .biz-entrega{gap:.4rem;margin:.1rem 0 .5rem}
#bizCart .biz-entrega label{padding:.45rem .5rem;font-size:.82rem;border-radius:10px;min-height:38px}
#bizCart .biz-pago{margin:.3rem 0}
#bizCart .biz-pago>p{margin:.3rem 0 .4rem!important;font-size:.86rem}
#bizCart .biz-pago label.opt{padding:.45rem .6rem;margin-bottom:.3rem;border-radius:10px;gap:.45rem;align-items:center}
#bizCart .biz-pago label.opt b{font-size:.86rem}
#bizCart .biz-pago label.opt small{font-size:.72rem}
#bizCart .biz-pago-datos{padding:.55rem .7rem;font-size:.8rem;margin:.3rem 0 .5rem;border-radius:10px}
#bizCart .pf-sub{font-size:.78rem;line-height:1.4}
#bizCart .btn{padding:10px 16px;font-size:.92rem;border-radius:11px;min-height:44px;justify-content:center;line-height:1.1}
/* El botón de enviar se queda a la vista mientras se baja por el formulario. */
#bizCart .biz-cart-enviar{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;
  box-shadow:0 -10px 14px -6px rgba(255,255,255,.95),0 10px 26px rgba(0,40,99,.22)}

/* ── Cuenta / seguimiento bajo el botón ── */
.biz-cuenta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 0;font-size:.78rem;color:var(--dim,#55677c)}
.biz-cuenta>span{flex:1 0 100%;font-weight:700;color:#28455c}
.biz-cuenta-btn{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid var(--line,#dce5ea);border-radius:999px;
  background:var(--card,#fff);color:#0b3d52;font-weight:700;font-size:.76rem;text-decoration:none;white-space:nowrap}
.biz-cuenta-btn:hover{border-color:#087f8c;color:#087f8c}
.biz-cuenta-lnk{flex:1 0 100%;font-size:.74rem;text-decoration:underline;color:var(--dim,#55677c)}
.biz-mispedidos{white-space:nowrap}

/* ── El bot se aparta ── */
body.biz-cart-abierto .fab-wrap,body.biz-cart-abierto .chatc,body.biz-cart-abierto .chatc-toasts,
body.biz-cart-pill .fab-wrap,body.biz-cart-pill .chatc,body.biz-cart-pill .chatc-toasts{display:none!important}
body.biz-cart-lock{overflow:hidden}

/* ── Catálogo y tarjetas: menos aire («está muy separado») ── */
body .biz-grid{gap:.7rem}
body .biz-card{padding:.7rem;gap:.25rem;border-radius:12px}
body .biz-card h3{font-size:.98rem;margin:.1rem 0 .15rem;line-height:1.25}
body .biz-card .biz-price{font-size:1.08rem}
/* 211.ª · la presentación que la empresa eligió enseñar en la tienda, debajo
   del precio de la unidad base (que es el que cobra el carrito). */
.biz-price-pres{display:block;font-size:.76rem;font-weight:700;color:#0b6f7a;margin-top:2px;line-height:1.35}
.biz-price-pres span{font-weight:400;color:#7c8b9c}

body .biz-card p{margin:.1rem 0;font-size:.86rem;line-height:1.4}
body .biz-card .biz-ficha-mini{margin:0 0 .2rem}
body .biz-add{gap:.35rem;margin-top:.45rem}
body .biz-add .btn{padding:8px 12px;font-size:.84rem;border-radius:10px;min-height:38px;justify-content:center;flex:1 1 auto;gap:6px}
body .biz-add input{width:60px;min-height:38px;font-size:.95rem;padding:.3rem;border-radius:9px}
body .biz-add .biz-ver{flex:0 0 auto;margin-left:0}
body .biz-section-head{margin:1rem 0 .6rem}
body .biz-cats{margin:0 0 .7rem;gap:.35rem}
body .biz-cat{padding:.32rem .7rem;font-size:.78rem}
body .biz-buscar{margin:0 0 .7rem}
body .biz-buscar input{min-height:42px}

/* ── Tablet y celular: hoja inferior ── */
@media(max-width:1023px){
  body .biz-cart{right:16px;bottom:16px}
  #bizCart{top:auto;left:0;right:0;bottom:0;width:100%;height:60vh;max-height:60vh;border-radius:18px 18px 0 0;
    transform:translateY(100%);box-shadow:0 -14px 40px rgba(2,20,50,.22)}
  #bizCart.open{transform:none}
  #bizCart .biz-cart-head{padding-top:14px}
  #bizCart .biz-cart-head::before{content:"";position:absolute;top:5px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#cbd5e1}
  .biz-cart-hbtns button{min-height:38px}
  #bizCartClose{width:38px}
}
/* Encima de la barra inferior tipo app del sitio (app-tabbar, ≤740 px). */
@media(max-width:740px){
  body .biz-cart{right:12px;bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media(max-width:599px){
  body .biz-cart{left:12px;right:12px}
  body .biz-cart-btn{width:100%;justify-content:space-between;padding:10px 14px;min-height:46px;border-radius:14px}
  .biz-cart-pill-tot{margin-left:auto;font-size:.92rem}
  #bizCart{height:calc(100vh - var(--biz-nav-h,79px) - 8px);height:calc(100dvh - var(--biz-nav-h,79px) - 8px);max-height:none}
  #bizCart .biz-cart-foot{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  #bizCart .field-row{grid-template-columns:1fr 1fr}
  .biz-cuenta-btn{flex:1 1 auto;justify-content:center}
}

/* ══════════════════════════════════════════════════════════════
   02/09/2026 (b) · LA CABECERA, SEGUNDA VUELTA — negocio.php
   ------------------------------------------------------------
   Encargo del dueño: banner ENTERO con «Ver más» en la presentación, la
   pestaña Empleos, el carrusel «A qué nos dedicamos» con mini banner al
   costado, los dos contadores (seguidores y me gusta) y la insignia de
   verificación (doble check gris opaco / azul). Todo con los tokens de
   assets/style.css y con su variante oscura (.sp-oscuro es el tema de la
   empresa; [data-theme="dark"] el del visitante).
   ══════════════════════════════════════════════════════════════ */

/* ── El banner entero ──
   Antes la portada era una franja de 220 px (132 en móvil) con
   background-size:cover: de un banner de 1600×600 se veía un tercio. Ahora
   el hueco tiene la PROPORCIÓN de la imagen (--sp-ar la escribe PHP con
   getimagesize) y la foto cabe entera. El tope de 480 px evita que una
   portada cuadrada se coma la pantalla. */
.sp-portada.sp-portada-entera{height:auto;aspect-ratio:var(--sp-ar,8/3);max-height:480px}
.biz-banner-marco{background:var(--panel,#fff);line-height:0}
.biz-banner{display:block;width:100%;height:auto;aspect-ratio:var(--sp-ar,8/3);max-height:480px;object-fit:cover;background:#0c5b72}

/* ── La insignia: doble check ── */
.emp-verif{display:inline-flex;vertical-align:-4px;margin-left:.3rem;cursor:help;line-height:0}
.emp-verif svg{width:22px;height:22px}
.emp-verif.off{color:#9aa7b4;opacity:.72}          /* plomo opaco: sin verificar */
.emp-verif.on{color:#1d9bf0}                        /* azul: verificada / VIP     */
.biz-hero .emp-verif.off{color:#d5dde5;opacity:.7}

/* ── Seguidores · me gusta ── */
.emp-cont{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}
.emp-like-f{margin:0;display:inline-flex}
.emp-like{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem .85rem;border-radius:10px;border:1px solid var(--line,#dce5ea);
  background:var(--panel,#fff);color:var(--text,#10203a);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;line-height:1.2;white-space:nowrap}
.emp-like:hover{border-color:#e0808a;background:#fdeef0}
.emp-like.on{border-color:#e0808a;background:#fdeef0;color:#b03a48}
.biz-hero .emp-like{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
.biz-hero .emp-like.on{background:#fdeef0;color:#b03a48;border-color:#fdeef0}
@media(max-width:640px){.emp-like{min-height:44px}}

/* ── La presentación con «Ver más» ──
   Sin JavaScript el texto sale ENTERO y el botón no existe (va `hidden`
   desde el servidor). El script solo recorta si de verdad sobra texto. */
.emp-desc{margin:.5rem 0 0;font-size:.92rem;line-height:1.55;color:var(--muted,#5b6b85);white-space:pre-line;max-width:72ch;overflow-wrap:anywhere}
.emp-desc.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.emp-vermas{border:0;background:none;padding:0;margin:.25rem 0 0;color:#087f8c;font:inherit;font-size:.84rem;font-weight:800;cursor:pointer}
.emp-vermas[hidden]{display:none}
.biz-hero .emp-desc{color:rgba(255,255,255,.92)}
.biz-hero .emp-vermas{color:#fff;text-decoration:underline}

/* ── La pestaña Empleos es un ENLACE dentro de la barra de pestañas ── */
.sp-tab.sp-tab-enlace{display:inline-flex;align-items:center;gap:.3rem}
.sp-tab.sp-tab-enlace::after{content:"↗";font-size:.72em;opacity:.7}

/* ── «A qué nos dedicamos»: carrusel + mini banner ──
   Scroll horizontal con snap y dos flechas. Sin JS el carrusel sigue
   deslizándose con el dedo o la rueda; las flechas solo aparecen si el
   script ve que hay más de lo que cabe. */
.dedica{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.2rem;align-items:start;margin:.6rem 0 1.6rem}
.dedica-carr{position:relative;min-width:0}
.dedica-pista{display:flex;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem .1rem .6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dedica-pista::-webkit-scrollbar{display:none}
.dedica-item{flex:0 0 min(46%,220px);scroll-snap-align:start;border:1px solid var(--line,#dce5ea);border-radius:14px;background:var(--card,#fff);
  padding:.7rem;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.dedica-item:hover{border-color:#087f8c;box-shadow:0 3px 12px rgba(8,127,140,.12)}
.dedica-item img,.dedica-ico{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#f2f6fa;border:1px solid var(--line,#dce5ea)}
.dedica-ico{display:grid;place-items:center;background:linear-gradient(145deg,#e9f4ff,#eef7f6)}
.dedica-ico svg{width:46%;height:auto}
.dedica-item b{font-size:.9rem;line-height:1.25;overflow-wrap:anywhere}
.dedica-item small{color:var(--dim,#90a0b8);font-size:.76rem}
.dedica-item .dedica-precio{color:#087f8c;font-weight:800;font-size:.9rem}
.dedica-fl{position:absolute;top:calc(50% - 22px);width:38px;height:38px;border-radius:999px;border:1px solid var(--line,#dce5ea);background:var(--panel,#fff);
  color:var(--text,#10203a);box-shadow:0 2px 10px rgba(16,42,67,.16);cursor:pointer;font-size:1.3rem;line-height:1;display:grid;place-items:center;z-index:2}
.dedica-fl.ant{left:-6px}.dedica-fl.sig{right:-6px}
.dedica-fl[disabled]{opacity:.35;cursor:default}
.dedica-fl[hidden]{display:none}
.dedica-mini{border:1px solid var(--line,#dce5ea);border-radius:16px;overflow:hidden;background:var(--card,#fff)}
.dedica-mini>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.dedica-mini .dedica-logo{width:100%;aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,var(--sp-c1,#082842),var(--sp-c2,#0c5b72))}
.dedica-mini .dedica-logo img{max-width:46%;max-height:70%;object-fit:contain;background:#fff;border-radius:12px;padding:6px}
.dedica-mini .dedica-logo span{color:#fff;font-weight:800;font-size:2rem}
.dedica-mini div.dedica-txt{padding:.8rem .9rem}
.dedica-mini b{display:block;font-size:.95rem}
.dedica-mini p{margin:.3rem 0 0;font-size:.85rem;line-height:1.5;color:var(--muted,#5b6b85)}
.dedica-mini small{display:block;margin-top:.5rem;font-size:.74rem;color:var(--dim,#90a0b8)}
.biz-section-head .dedica-ver{font-size:.84rem;font-weight:800;color:#087f8c;text-decoration:none;white-space:nowrap}
@media(max-width:820px){
  .dedica{grid-template-columns:1fr;gap:.9rem}
  .dedica-item{flex-basis:min(68%,230px)}
  .dedica-fl.ant{left:2px}.dedica-fl.sig{right:2px}
  .dedica-mini>img,.dedica-mini .dedica-logo{aspect-ratio:21/9}
}

/* Tema oscuro de la empresa y del visitante */
.sp-oscuro .dedica-item,.sp-oscuro .dedica-mini,.sp-oscuro .dedica-fl{background:#16213a;border-color:#243049;color:#e2e8f0}
.sp-oscuro .dedica-ico,.sp-oscuro .dedica-item img{background:#1d2b47;border-color:#243049}
.sp-oscuro .dedica-mini p,.sp-oscuro .emp-desc{color:#94a3b8}
[data-theme="dark"] .dedica-item,[data-theme="dark"] .dedica-mini,[data-theme="dark"] .dedica-fl,[data-theme="dark"] .emp-like{background:var(--panel,#131e2c);border-color:var(--line,#1e2c3f);color:var(--text,#e8eef6)}
[data-theme="dark"] .dedica-ico,[data-theme="dark"] .dedica-item img{background:#1a2738;border-color:var(--line,#1e2c3f)}
[data-theme="dark"] .emp-like.on,[data-theme="dark"] .emp-like:hover{background:#3a1a22;border-color:#7a3a46;color:#ffb3bd}
[data-theme="dark"] .emp-verif.off{color:#5c6b7d}

/* ============================================================
   202.ª (10/09/2026) · EL BANNER DE LA PÁGINA PÚBLICA
   ------------------------------------------------------------
   Encargo del dueño: dibujo del rubro en vez de la franja de color,
   centrado «tipo content» salvo foto de buena resolución, franja más
   baja para quien no tiene nada, parallax con cabeza, y lightbox con
   me gusta al hacer clic.
   ============================================================ */

/* Centrado al ancho del contenido. El .wrap del sitio es 1200 px; se usa el
   mismo número para que el banner quede a plomo con el logo y el menú. */
.sp-portada-content{max-width:1200px;margin-left:auto;margin-right:auto;border-radius:14px;overflow:hidden}

/* La franja de quien no ha puesto nada: la mitad de alta. No se esconde del
   todo porque el logo se apoya sobre ella. */
.sp-portada-baja{height:96px}

/* El dibujo del rubro. `contain` y no `cover`: una escena recortada por la
   mitad no se entiende, y estas están dibujadas para verse enteras. */
.sp-portada-rubro{height:auto;min-height:180px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--sp-base,#0e2a47) 0%,var(--sp-osc,#081a2e) 100%)}
.sp-portada-svg{width:100%;max-height:280px;display:flex;align-items:center;justify-content:center}
.sp-portada-svg svg{width:100%;height:auto;max-height:280px;display:block}

/* Se puede abrir: que se note, sin gritarlo. */
.sp-portada[data-lightbox]{cursor:zoom-in}
.sp-portada[data-lightbox]:focus-visible{outline:3px solid var(--acc,#1f7ae0);outline-offset:3px}

/* Parallax. Solo con foto, solo en pantalla ancha y solo si nadie pidió
   quieto: `background-attachment:fixed` se comporta mal en iOS y marea a
   quien activó «reducir movimiento». */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .sp-portada-parallax{background-attachment:fixed}
}

/* ── El lightbox ── */
.sp-lb{border:0;padding:0;background:transparent;max-width:min(1100px,94vw);width:100%}
.sp-lb::backdrop{background:rgba(4,10,20,.82)}
.sp-lb-caja{position:relative;background:var(--card,#fff);border-radius:16px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.sp-lb-x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#fff;font-size:1.05rem;cursor:pointer;line-height:1}
.sp-lb-x:hover{background:rgba(0,0,0,.78)}
.sp-lb-img{width:100%;aspect-ratio:16/7;background-size:cover;background-position:center}
.sp-lb-img.sp-lb-svg{aspect-ratio:auto;display:flex;align-items:center;justify-content:center;padding:22px;
  background:linear-gradient(135deg,var(--sp-base,#0e2a47) 0%,var(--sp-osc,#081a2e) 100%)}
.sp-lb-img.sp-lb-svg svg{width:100%;height:auto;max-height:62vh;display:block}
.sp-lb-pie{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;flex-wrap:wrap}
.sp-lb-pie b{font-size:1rem}
.sp-lb-like{display:flex;align-items:center;gap:.5rem}

/* El nombre de la cuenta junto al rótulo de la red (Facebook @tunegocio). */
.sp-red-user{opacity:.72;font-weight:400}
.sp-redes-card .sp-redes-pub{margin-top:.45rem}

@media (max-width:640px){
  .sp-portada-content{border-radius:0;max-width:none}
  .sp-portada-baja{height:64px}
  .sp-portada-rubro{min-height:120px}
  .sp-portada-svg,.sp-portada-svg svg{max-height:170px}
}

/* 202.ª · Arriba solo el logo en la portada de la empresa: sin el nombre al
   lado, el avatar se queda solo y conviene que se vea un poco más. */
.emp-logo-solo .emp-ava{width:40px;height:40px}

/* 267.ª · Portal del detallista: el precio que es SUYO y su margen.
   Verde para lo que gana, gris tachado para lo que dejó de pagar: la bodega
   lee la tarjeta en dos segundos y sin leyenda. */
.biz-precio-tuyo{display:block;font-size:.76rem;font-weight:700;color:#0b6f7a;margin-top:2px;line-height:1.35}
.biz-precio-tuyo s{color:#9aa7b4;font-weight:400;margin-right:4px}
.biz-precio-margen{display:block;font-size:.74rem;font-weight:600;color:#1b7f3b;margin-top:1px;line-height:1.35}