/* CONTRAMUELLE — distribución HORECA
   Identidad: el andén de carga a las seis de la mañana. Grafito de nave,
   acero, film retráctil y una única luz ámbar de muelle como acento.
   Nada de gradientes de SaaS ni cards redondeadas: aquí el objeto gráfico
   de referencia es el albarán y la plantilla estarcida sobre el palet. */

:root {
  --grafito:      #14171a;   /* nave sin luz */
  --grafito-alto: #1c2126;   /* superficie elevada */
  --acero:        #2a3138;   /* filetes y bordes */
  --humo:         #8b949c;   /* texto secundario */
  --papel:        #eceae5;   /* albarán, texto principal */
  --blanco:       #ffffff;
  --ambar:        #ff8a1f;   /* la lámpara del muelle: el único acento */
  --ambar-hondo:  #d96a00;
  --frio:         #6fd3e8;   /* cadena de frío: solo en categorías frías */

  --display: "Oswald", "Arial Narrow", sans-serif;
  --texto:   "IBM Plex Sans", system-ui, sans-serif;
  --dato:    "IBM Plex Mono", ui-monospace, monospace;

  /* Ritmo de espaciado propio: progresión de 6, como los huecos de un palet */
  --e1: 6px;  --e2: 12px; --e3: 24px; --e4: 42px;
  --e5: 72px; --e6: 120px;

  --ancho: 1280px;
  --borde: 1px solid var(--acero);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--grafito);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 3px;
}

.contenedor { width: calc(100% - var(--e3) * 2); max-width: var(--ancho); margin-inline: auto; }

/* ---------- Tipografía ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}

/* El "estarcido": rótulo pequeño de plantilla, como el que va pintado en
   el lateral de una caja. Encabeza secciones y encodea la familia. */
.estarcido {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambar);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.estarcido::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--acero);
}

/* ---------- Barra superior ---------- */

.cinta {
  background: var(--ambar);
  color: #1a0d00;
  font-family: var(--dato);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: var(--e1) 0;
  text-align: center;
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 23, 26, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: var(--borde);
}
.cabecera-in {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
}

.marca { display: flex; align-items: baseline; gap: 9px; margin-right: auto; }
.marca-n {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.marca-n em { font-style: normal; color: var(--ambar); }
.marca-s {
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--humo);
  text-transform: uppercase;
}

.nav { display: flex; gap: var(--e3); align-items: center; }
.nav a {
  font-family: var(--dato);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover, .nav a.activo { color: var(--papel); border-bottom-color: var(--ambar); }

.boton {
  font-family: var(--dato);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ambar);
  color: #1a0d00;
  border: 0;
  padding: 11px 20px;
  cursor: pointer;
  transition: background .18s, transform .18s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.boton:hover { background: var(--blanco); }
.boton:active { transform: translateY(1px); }
.boton.fantasma {
  background: transparent;
  color: var(--papel);
  border: var(--borde);
}
.boton.fantasma:hover { border-color: var(--ambar); color: var(--ambar); background: transparent; }

.cuenta-carro {
  background: #1a0d00;
  color: var(--ambar);
  font-size: 11px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

/* Menú móvil */
.hamburguesa { display: none; background: none; border: 0; color: var(--papel); padding: 8px; cursor: pointer; }

/* ---------- Portada ---------- */

.portada { position: relative; border-bottom: var(--borde); overflow: hidden; }
.portada-img { position: absolute; inset: 0; }
.portada-img img { width: 100%; height: 100%; object-fit: cover; }
.portada-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--grafito) 26%, rgba(20,23,26,.72) 58%, rgba(20,23,26,.35) 100%);
}
.portada-in {
  position: relative;
  padding: var(--e6) 0 var(--e5);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--e4);
  align-items: end;
}
.portada h1 {
  font-size: clamp(46px, 8.5vw, 108px);
  margin: var(--e3) 0;
  max-width: 13ch;
}
.portada h1 span { color: var(--ambar); display: block; }
.portada p.entrada {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--humo);
  max-width: 46ch;
  margin: 0 0 var(--e3);
}
.portada-acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Ficha de datos del muelle: cifras alineadas como en un albarán */
.datos-muelle {
  border: var(--borde);
  background: rgba(28, 33, 38, .82);
  backdrop-filter: blur(4px);
}
.datos-muelle dl { margin: 0; }
.datos-muelle div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e2);
  padding: 13px var(--e3);
  border-bottom: var(--borde);
}
.datos-muelle div:last-child { border-bottom: 0; }
.datos-muelle dt {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--humo);
}
.datos-muelle dd {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.datos-muelle dd small { font-family: var(--texto); font-size: 12px; font-weight: 400; color: var(--humo); text-transform: none; }

/* ---------- Secciones ---------- */

.seccion { padding: var(--e5) 0; border-bottom: var(--borde); }
.seccion-cab { margin-bottom: var(--e4); }
.seccion-cab h2 { font-size: clamp(30px, 4vw, 52px); margin: var(--e2) 0 var(--e1); }
.seccion-cab p { color: var(--humo); max-width: 62ch; margin: 0; }

/* ---------- Rejilla de familias ---------- */

.familias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1px;
  background: var(--acero);
  border: var(--borde);
}
.familia {
  position: relative;
  background: var(--grafito-alto);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--e3);
  overflow: hidden;
  transition: background .2s;
}
.familia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  transition: opacity .35s, transform .55s cubic-bezier(.2,.7,.3,1);
}
.familia::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(12, 14, 16, .96) 0%,
      rgba(14, 17, 19, .88) 22%,
      rgba(20, 23, 26, .48) 52%,
      rgba(20, 23, 26, .16) 100%);
}
.familia:hover img, .familia:focus-visible img { opacity: .74; transform: scale(1.05); }
.familia > * { position: relative; z-index: 2; }
.familia h3 { font-size: 26px; margin-bottom: 5px; }
.familia .cuenta {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #b3bac1;
  text-transform: uppercase;
  line-height: 1.5;
  display: block;
  max-width: 30ch;
}
.familia .flecha {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  color: var(--ambar);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}
.familia:hover .flecha, .familia:focus-visible .flecha { opacity: 1; transform: none; }
.familia.frio h3::after {
  content: "FRÍO";
  font-family: var(--dato);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--frio);
  border: 1px solid var(--frio);
  padding: 2px 6px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ---------- Albarán: la pieza firma del sitio ----------
   Cada producto es una línea de albarán, no una card de tienda. */

.albaran { border: var(--borde); background: var(--grafito-alto); }

.albaran-cab {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 190px 118px 118px 128px;
  gap: var(--e2);
  padding: 11px var(--e3);
  border-bottom: var(--borde);
  background: var(--grafito);
  font-family: var(--dato);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--humo);
  position: sticky;
  top: 63px;
  z-index: 10;
}
.albaran-cab .num { text-align: right; }

.linea {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 190px 118px 118px 128px;
  gap: var(--e2);
  padding: 15px var(--e3);
  border-bottom: var(--borde);
  align-items: center;
  transition: background .16s;
}
.linea:last-child { border-bottom: 0; }
.linea:hover { background: #1f252b; }

.linea .ref {
  font-family: var(--dato);
  font-size: 12px;
  color: var(--humo);
}
.linea .nombre { font-weight: 500; line-height: 1.35; }
.linea .ean {
  font-family: var(--dato);
  font-size: 10.5px;
  color: #5f676e;
  letter-spacing: .04em;
  margin-top: 3px;
}
.linea .formato { font-size: 13px; color: var(--humo); }
.linea .precio {
  font-family: var(--dato);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.linea .precio.neto { color: var(--papel); font-weight: 600; }
.linea .precio.iva { color: var(--humo); font-size: 14px; }
.linea .precio .u { font-size: 10px; color: #5f676e; display: block; letter-spacing: .1em; text-transform: uppercase; }
.linea .consultar {
  font-family: var(--dato);
  font-size: 11px;
  color: var(--frio);
  text-align: right;
  letter-spacing: .08em;
}
.linea .acc { text-align: right; }
.linea .acc button {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--papel);
  border: var(--borde);
  padding: 8px 12px;
  cursor: pointer;
  transition: .16s;
  white-space: nowrap;
}
.linea .acc button:hover { border-color: var(--ambar); color: var(--ambar); }
.linea .acc button.puesto { background: var(--ambar); border-color: var(--ambar); color: #1a0d00; }

/* ---------- Filtros ---------- */

.filtros {
  display: flex;
  gap: var(--e1);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
  align-items: center;
  row-gap: var(--e2);
}
.filtro {
  font-family: var(--dato);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--humo);
  border: var(--borde);
  padding: 9px 14px;
  cursor: pointer;
  transition: .16s;
}
.filtro:hover { color: var(--papel); border-color: var(--humo); }
.filtro.activo { background: var(--papel); color: var(--grafito); border-color: var(--papel); }
.buscador {
  margin-left: auto;
  flex: 0 1 300px;
  background: var(--grafito-alto);
  border: var(--borde);
  color: var(--papel);
  font-family: var(--dato);
  font-size: 13px;
  padding: 9px 14px;
  min-width: 240px;
}
.buscador::placeholder { color: #5f676e; }
.buscador:focus { outline: 0; border-color: var(--ambar); }

/* ---------- Bloque de servicio (dos columnas con foto) ---------- */

.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--e4);
  align-items: center;
}
.duo img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; filter: saturate(.9); }
.duo h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: var(--e3); }
.duo p { color: var(--humo); }

/* Lista de compromisos: filetes, no iconos genéricos */
.compromisos { list-style: none; padding: 0; margin: var(--e3) 0 0; }
.compromisos li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--e2);
  padding: var(--e2) 0;
  border-top: var(--borde);
  align-items: start;
}
.compromisos li:last-child { border-bottom: var(--borde); }
.compromisos .clave {
  font-family: var(--dato);
  font-size: 11px;
  color: var(--ambar);
  letter-spacing: .1em;
  padding-top: 4px;
}
.compromisos strong { display: block; font-weight: 600; }
.compromisos span { color: var(--humo); font-size: 14.5px; }

/* ---------- Eventos / administración pública ---------- */

.eventos { background: var(--grafito-alto); }
.pliego {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1px;
  background: var(--acero);
  border: var(--borde);
  margin-top: var(--e4);
}
.pliego article { background: var(--grafito); padding: var(--e3); }
.pliego h3 { font-size: 19px; margin-bottom: var(--e2); }
.pliego p { color: var(--humo); font-size: 14.5px; margin: 0; }
.pliego .cifra {
  font-family: var(--display);
  font-size: 40px;
  color: var(--ambar);
  line-height: 1;
  margin-bottom: var(--e2);
  font-variant-numeric: tabular-nums;
}

/* ---------- Formulario ---------- */

.formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e3); }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo.ancho { grid-column: 1 / -1; }
.campo label {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--humo);
}
.campo input, .campo select, .campo textarea {
  background: var(--grafito);
  border: var(--borde);
  color: var(--papel);
  font-family: var(--texto);
  font-size: 15px;
  padding: 12px 14px;
  width: 100%;
}
.campo textarea { min-height: 118px; resize: vertical; font-family: var(--texto); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 0; border-color: var(--ambar); }
.campo .ayuda { font-size: 12.5px; color: #5f676e; }

/* ---------- Cajón del pedido ---------- */

.cajon {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(440px, 100%);
  background: var(--grafito-alto);
  border-left: var(--borde);
  z-index: 120;
  transform: translateX(101%);
  transition: transform .3s cubic-bezier(.3,.8,.3,1);
  display: flex;
  flex-direction: column;
}
.cajon.abierto { transform: none; }
.cajon-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e3);
  border-bottom: var(--borde);
}
.cajon-cab h2 { font-size: 22px; }
.cajon-cuerpo { flex: 1; overflow-y: auto; padding: var(--e3); }
.cajon-pie { border-top: var(--borde); padding: var(--e3); }
.cerrar { background: none; border: 0; color: var(--humo); font-size: 26px; cursor: pointer; line-height: 1; padding: 0 6px; }
.cerrar:hover { color: var(--papel); }

.item-pedido { border-bottom: var(--borde); padding-bottom: var(--e2); margin-bottom: var(--e2); }
.item-pedido .t { display: flex; justify-content: space-between; gap: var(--e2); align-items: start; }
.item-pedido .n { font-size: 14.5px; font-weight: 500; }
.item-pedido .f { font-family: var(--dato); font-size: 11px; color: var(--humo); margin-top: 2px; }
.item-pedido .quitar { background: none; border: 0; color: #5f676e; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }
.item-pedido .quitar:hover { color: var(--ambar); }
.cantidad { display: flex; align-items: center; gap: 0; margin-top: 9px; }
.cantidad button {
  background: var(--grafito);
  border: var(--borde);
  color: var(--papel);
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.cantidad button:hover { border-color: var(--ambar); color: var(--ambar); }
.cantidad input {
  width: 58px; height: 32px;
  background: var(--grafito);
  border: var(--borde);
  border-left: 0; border-right: 0;
  color: var(--papel);
  text-align: center;
  font-family: var(--dato);
  font-size: 14px;
}
.cantidad input:focus { outline: 0; }
.cantidad .sub {
  margin-left: auto;
  font-family: var(--dato);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.totales { font-family: var(--dato); font-size: 13px; }
.totales div { display: flex; justify-content: space-between; padding: 5px 0; }
.totales .total {
  border-top: var(--borde);
  margin-top: var(--e2);
  padding-top: var(--e2);
  font-size: 22px;
  font-family: var(--display);
  font-weight: 600;
}
.totales .total span:last-child { color: var(--ambar); }

.velo {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 14, .68);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.velo.visible { opacity: 1; pointer-events: auto; }
.vacio { color: var(--humo); font-size: 14.5px; text-align: center; padding: var(--e4) 0; }

/* ---------- Pie ---------- */

.pie { background: #0f1214; padding: var(--e5) 0 var(--e3); }
.pie-rejilla {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, 1fr);
  gap: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: var(--borde);
}
.pie h4 {
  font-family: var(--dato);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--humo);
  margin: 0 0 var(--e2);
  font-weight: 400;
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 9px; }
.pie a { color: var(--papel); font-size: 14.5px; transition: color .16s; }
.pie a:hover { color: var(--ambar); }
.pie .sobre { color: var(--humo); font-size: 14.5px; max-width: 36ch; }

/* Redes: cuadros con filete, no círculos de plantilla */
.redes { display: flex; gap: var(--e1); flex-wrap: wrap; margin-top: var(--e3); }
.redes a {
  width: 40px; height: 40px;
  border: var(--borde);
  display: grid;
  place-items: center;
  color: var(--humo);
  transition: .18s;
}
.redes a:hover { border-color: var(--ambar); color: var(--ambar); transform: translateY(-2px); }
.redes svg { width: 17px; height: 17px; fill: currentColor; }

.pie-fin {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  padding-top: var(--e3);
  font-family: var(--dato);
  font-size: 11.5px;
  color: #5f676e;
  letter-spacing: .04em;
}

/* Aviso de datos: honestidad sobre el origen de los precios */
.aviso {
  border-left: 2px solid var(--ambar);
  background: rgba(255, 138, 31, .07);
  padding: var(--e2) var(--e3);
  font-size: 13.5px;
  color: var(--humo);
  margin-top: var(--e3);
}
.aviso strong { color: var(--papel); }

/* WhatsApp flotante */
.wa {
  position: fixed;
  bottom: 22px; right: 22px;
  z-index: 90;
  width: 54px; height: 54px;
  background: var(--ambar);
  color: #1a0d00;
  display: grid;
  place-items: center;
  transition: .2s;
}
.wa:hover { background: var(--blanco); transform: translateY(-3px); }
.wa svg { width: 27px; height: 27px; fill: currentColor; }

/* Entrada al hacer scroll */
.revela { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.revela.visible { opacity: 1; transform: none; }

/* ---------- Adaptación ---------- */

@media (max-width: 1080px) {
  .albaran-cab, .linea { grid-template-columns: 84px minmax(0,1fr) 108px 108px 116px; }
  .albaran-cab .col-formato, .linea .formato { display: none; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .portada-in { grid-template-columns: 1fr; padding: var(--e5) 0 var(--e4); }
  .nav { display: none; }
  .nav.desplegado {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--grafito-alto);
    border-bottom: var(--borde);
    padding: var(--e2) var(--e3) var(--e3);
  }
  .nav.desplegado a { padding: 13px 0; border-bottom: var(--borde); border-left: 2px solid transparent; padding-left: 10px; }
  .nav.desplegado a:hover, .nav.desplegado a.activo { border-bottom-color: var(--acero); border-left-color: var(--ambar); }
  .hamburguesa { display: block; }
  .cabecera-in { position: relative; }
}

@media (max-width: 640px) {
  :root { --e5: 52px; --e6: 68px; }
  .albaran-cab { display: none; }
  .linea {
    grid-template-columns: 1fr auto;
    grid-template-areas: "ref ref" "nombre nombre" "neto acc" "iva acc";
    gap: 5px var(--e2);
    padding: var(--e3);
  }
  .linea .ref { grid-area: ref; }
  .linea .nombre-c { grid-area: nombre; }
  .linea .precio.neto, .linea .consultar { grid-area: neto; text-align: left; }
  .linea .precio.iva { grid-area: iva; text-align: left; font-size: 12.5px; }
  .linea .acc { grid-area: acc; align-self: center; }
  .linea .precio .u { display: inline; margin-left: 6px; }
  .buscador { margin-left: 0; width: 100%; min-width: 0; }
  .pie-rejilla { grid-template-columns: 1fr; gap: var(--e3); }
  .datos-muelle dd { font-size: 19px; }
  .portada h1 { font-size: clamp(38px, 12vw, 62px); }
}

/* ---------- Correcciones de cabecera en móvil ----------
   A 390 px la fila de cabecera no cabía y empujaba el documento (scrollWidth
   516). La marca deja de ser rígida, el descriptor se oculta y el botón de
   pedido se reduce a icono + contador, que es lo único accionable ahí. */

@media (max-width: 860px) {
  .cabecera-in { gap: var(--e2); }
  .marca { min-width: 0; flex-wrap: wrap; }
  .marca-s { display: none; }
}

@media (max-width: 640px) {
  .marca-n { font-size: 21px; }
  .cinta { font-size: 10.5px; letter-spacing: 0; padding: 5px var(--e2); }
  #abrir-pedido { font-size: 0; padding: 10px 12px; gap: 0; }
  #abrir-pedido::before {
    content: "";
    width: 17px; height: 17px;
    background: currentColor;
    /* Silueta de palet: es el objeto del negocio, no un carro de supermercado */
    -webkit-mask: var(--icono-palet) center / contain no-repeat;
    mask: var(--icono-palet) center / contain no-repeat;
  }
  .cuenta-carro { font-size: 11px; margin-left: 7px; }
}

:root {
  --icono-palet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='6'/%3E%3Crect x='3' y='13' width='18' height='3'/%3E%3Crect x='3' y='18' width='18' height='3'/%3E%3C/svg%3E");
}

/* El velo del pedido y el cajón nunca deben generar scroll horizontal. */
body { overflow-x: hidden; }

/* La cabecera pegajosa tapaba el rótulo de cada sección al llegar por un
   enlace del menú. Se reserva su altura en el destino del salto. */
.seccion, .portada { scroll-margin-top: 74px; }
@media (max-width: 640px) { .seccion, .portada { scroll-margin-top: 62px; } }