/* Distribuidora Pilcomayo · base común de la portada y el catálogo */
:root {
  --azul: #1871B9;          /* logo, CMYK 85/50/0/0 */
  --azul-hondo: #0F4C80;
  --azul-claro: #E8F1F9;
  --tinta: #231F20;         /* negro del logo */
  --hormigon: #EEF0F0;      /* piso del depósito */
  --chapa: #C9CFD4;         /* estantes galvanizados */
  --zinc: #5F686F;
  --blanco: #FFFFFF;
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --radio: 10px;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --rotulo: "Big Shoulders Text", "Arial Narrow", sans-serif;
  --texto: "Figtree", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--blanco); color: var(--tinta); font: 400 17px/1.55 var(--texto); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 4px; }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }

/* Botones: el rectángulo redondeado del logo */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: 15px 22px 13px; border-radius: var(--radio); font: 800 18px/1 var(--rotulo); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--azul); transition: background .15s, color .15s, transform .15s; cursor: pointer; }
.boton:hover { transform: translateY(-1px); }
.boton--lleno { background: var(--azul); color: var(--blanco); }
.boton--lleno:hover { background: var(--azul-hondo); border-color: var(--azul-hondo); }
.boton--hueco { background: var(--blanco); color: var(--azul); }
.boton--hueco:hover { background: var(--azul-claro); }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.boton svg { width: 20px; height: 20px; flex: none; }
@media (prefers-reduced-motion: reduce) { .boton:hover { transform: none; } }