/* ===========================================================================
   Distribuidora Marcial - catalogo
   ---------------------------------------------------------------------------
   Usa la identidad visual de Marcial (guia: marcial-prototipo,
   coordinacion/IDENTIDAD-VISUAL.md). Los valores crudos viven en
   ../marca/tokens.css (variables --m-*); aca solo se les da el nombre que
   usa esta hoja. Si hace falta un color nuevo, se agrega alla, no suelto aca.

   En claro: marino sobre gris azulado, tarjetas blancas. En oscuro la marca
   se invierte: el azul claro de la identidad resalta sobre el marino hondo.
   =========================================================================== */

/* El atributo hidden tiene que ganarle a cualquier display que pongamos
   despues. Sin esto, un panel con display:flex queda visible para siempre. */
[hidden] { display: none !important; }

:root {
  /* --- Marca (de tokens.css) --- */
  --marino:       var(--m-marino-800);
  --marino-hondo: var(--m-marino-900);
  --marino-claro: var(--m-marino-600);
  --azul:         var(--m-azul-500);
  /* Los acentos que sobre marino van claros (banner, modo oscuro). Se llaman
     --beige por historia: la marca anterior era beige y el nombre esta usado
     en toda la hoja. Hoy son los azules claros de la identidad. */
  --beige:        var(--m-azul-200);
  --beige-claro:  var(--m-azul-100);
  --gris:         var(--m-linea-2);
  --gris-hondo:   var(--m-tinta-3);
  --blanco:       #ffffff;
  --negro:        #000000;

  /* --- Roles --- */
  --piso:      var(--m-fondo);
  --piso-alto: var(--m-superficie-2);
  --losa:      var(--m-superficie);
  --losa-2:    var(--m-superficie-2);
  --tinta:     var(--m-tinta);
  --tinta-2:   var(--m-tinta-2);
  --tinta-3:   var(--m-tinta-3);
  --linea:     var(--m-linea);
  --borde:     var(--m-linea-2);

  --marca:       var(--m-marino-800);
  --marca-tinta: #ffffff;

  /* Estados */
  --ok:     var(--m-ok-tinta);
  --error:  var(--m-error-tinta);

  /* Sombras: las de la identidad, teñidas de marino */
  --flota-0: var(--m-sombra-1);
  --flota-1: var(--m-sombra-1);
  --flota-2: var(--m-sombra-2);
  --flota-3: var(--m-sombra-3);
  --flota-4: 0 8px 16px rgba(14, 34, 64, .12), 0 36px 72px -16px rgba(14, 34, 64, .32);

  --r-chico:  var(--m-r-md);
  --r-medio:  var(--m-r-lg);
  --r-grande: var(--m-r-xl);

  /* Una sola familia (Manrope); los importes llevan cifras tabulares */
  --display: var(--m-fuente);
  --texto:   var(--m-fuente);
  --datos:   var(--m-fuente);

  --ancho: 1240px;
  /* --curva queda para hovers y cambios de color. Para lo que entra, sale o
     se desplaza en pantalla, las built-in de CSS son demasiado flojas. */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-fuerte: cubic-bezier(.23, 1, .32, 1);      /* entra y sale */
  --curva-vaiven: cubic-bezier(.77, 0, .175, 1);     /* se mueve en pantalla */
}

/* ---------- Modo oscuro ----------
   Se enciende de dos maneras y las dos tienen que dar el mismo resultado: por
   preferencia del sistema, y por el interruptor de la barra. El cuerpo esta
   duplicado a proposito - CSS no deja compartirlo entre una regla dentro de
   @media y una de primer nivel - y hay una prueba que verifica que los dos
   digan exactamente lo mismo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --piso:      var(--m-marino-950);
    --piso-alto: var(--m-marino-900);
    --losa:      var(--m-marino-800);
    --losa-2:    var(--m-marino-700);
    --tinta:     #E8EEF6;
    --tinta-2:   var(--m-sobre-marino-2);
    --tinta-3:   #8196B2;
    --linea:     rgba(147, 178, 217, .18);
    --borde:     rgba(147, 178, 217, .34);

    /* Invertido: sobre marino, el que resalta es el azul claro */
    --marca:       var(--m-azul-200);
    --marca-tinta: var(--m-marino-900);

    --ok:     #6FD3A0;
    --error:  #F29AA5;

    --flota-0: 0 1px 1px rgba(0, 0, 0, .4);
    --flota-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .38);
    --flota-2: 0 2px 4px rgba(0, 0, 0, .55), 0 12px 26px rgba(0, 0, 0, .46);
    --flota-3: 0 4px 8px rgba(0, 0, 0, .6), 0 24px 50px rgba(0, 0, 0, .54);
    --flota-4: 0 8px 16px rgba(0, 0, 0, .66), 0 42px 84px rgba(0, 0, 0, .64);
  }
}
:root[data-theme="dark"] {
  --piso:      var(--m-marino-950);
  --piso-alto: var(--m-marino-900);
  --losa:      var(--m-marino-800);
  --losa-2:    var(--m-marino-700);
  --tinta:     #E8EEF6;
  --tinta-2:   var(--m-sobre-marino-2);
  --tinta-3:   #8196B2;
  --linea:     rgba(147, 178, 217, .18);
  --borde:     rgba(147, 178, 217, .34);

  /* Invertido: sobre marino, el que resalta es el azul claro */
  --marca:       var(--m-azul-200);
  --marca-tinta: var(--m-marino-900);

  --ok:     #6FD3A0;
  --error:  #F29AA5;

  --flota-0: 0 1px 1px rgba(0, 0, 0, .4);
  --flota-1: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .38);
  --flota-2: 0 2px 4px rgba(0, 0, 0, .55), 0 12px 26px rgba(0, 0, 0, .46);
  --flota-3: 0 4px 8px rgba(0, 0, 0, .6), 0 24px 50px rgba(0, 0, 0, .54);
  --flota-4: 0 8px 16px rgba(0, 0, 0, .66), 0 42px 84px rgba(0, 0, 0, .64);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--piso);
  background-image: radial-gradient(120% 60% at 50% -10%, var(--piso-alto) 0%, transparent 68%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Los titulos siguen al logotipo: caja alta, geometrica, con aire entre letras */
.display {
  font-family: var(--display); font-weight: 800;
  letter-spacing: -.02em; text-transform: none;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--marino); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--r-chico) 0; text-decoration: none;
}
.saltar:focus { left: 0; }

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

/* ---------- Logotipo ----------
   SVG de la marca (assets/marca/logo/). Sobre claro va el azul, sobre marino el
   blanco; en modo oscuro la barra es marino, asi que se cambia de version. Los
   dos <img> estan en el HTML y solo se ve uno. */
.marca {
  display: flex; align-items: center; text-decoration: none;
  color: inherit; flex: 0 0 auto; padding-left: 14px; min-width: 0;
}
.marca img { height: 30px; width: auto; }
.logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-claro { display: none; }
  :root:not([data-theme="light"]) .logo-oscuro { display: block; }
}
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-oscuro { display: block; }

/* ---------- Botones ---------- */
.boton, .boton-fantasma {
  appearance: none; cursor: pointer; border: 1px solid transparent; font: inherit; font-weight: 700;
  font-size: 14px; min-height: 40px; padding: 0 18px; border-radius: var(--r-chico);
  text-decoration: none; letter-spacing: -.005em; text-transform: none;
  font-family: var(--display);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva), background .18s var(--curva);
}
.boton { background: var(--marca); color: var(--marca-tinta); box-shadow: 0 1px 2px rgba(8, 22, 41, .25); }
.boton:hover { transform: translateY(-1px); box-shadow: var(--flota-2); }
.boton:active { transform: translateY(0); }

.boton-fantasma { background: var(--losa); color: var(--tinta); border-color: var(--borde); }
.boton-fantasma:hover { transform: translateY(-1px); box-shadow: var(--flota-2); }

.boton-ancho { width: 100%; }

.enlace {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--marca);
}
.enlace:hover { text-decoration: underline; }
.enlace-apagado { color: var(--tinta-3); }
.enlace-apagado:hover { color: var(--tinta-2); }
.enlace-peligro { color: var(--error); }

.cerrar {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 34px; height: 34px; border-radius: var(--r-chico);
  background: var(--losa); color: var(--tinta); border: 1px solid var(--linea);
  display: grid; place-items: center; flex: 0 0 auto;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva);
}
.cerrar:hover { transform: scale(1.06); box-shadow: var(--flota-2); }
.cerrar svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  max-width: var(--ancho); margin: 0 auto; padding: 14px 24px;
}
.barra::before {
  content: ''; position: absolute; inset: 6px 16px;
  background: var(--losa); opacity: .92; border-radius: var(--r-medio);
  border: 1px solid var(--linea); backdrop-filter: saturate(180%) blur(14px);
  z-index: -1; transition: opacity .2s var(--curva), box-shadow .2s var(--curva);
}
body.scrolleado .barra::before { opacity: .98; box-shadow: var(--flota-2); }

.barra-buscar { position: relative; flex: 1 1 auto; min-width: 0; }
.lupa {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; fill: none; stroke: var(--tinta-3);
  stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
#buscar {
  width: 100%; border: 1px solid var(--borde); background: var(--losa); color: var(--tinta);
  font: inherit; font-size: 14px; font-weight: 500; min-height: 40px; padding: 0 14px 0 36px; border-radius: var(--m-r-pill);
  transition: background .18s var(--curva), box-shadow .18s var(--curva);
}
#buscar::placeholder { color: var(--tinta-3); }
#buscar:hover { border-color: var(--m-azul-300); }
#buscar:focus { outline: none; border-color: var(--m-azul-500); box-shadow: var(--m-foco); }

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


/* ---------- Rail de filtros ---------- */
.rail {
  position: sticky; top: 62px; z-index: 30;
  background: var(--piso);   /* sin esto, lo que pasa por debajo se asoma entre los chips */
  max-width: var(--ancho); margin: 0 auto; padding: 10px 24px 14px;
  display: flex; align-items: center; gap: 12px;
}
.rail-pistas {
  display: flex; gap: 7px; overflow-x: auto; flex: 1 1 auto; padding: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}
.rail-pistas::-webkit-scrollbar { display: none; }

.pista {
  appearance: none; border: 0; cursor: pointer; white-space: nowrap;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  min-height: 36px; padding: 0 16px; border-radius: var(--m-r-pill);
  border: 1px solid var(--borde);
  background: var(--losa); color: var(--tinta-2);
  transition: transform .18s var(--curva), box-shadow .18s var(--curva),
              background .18s var(--curva), color .18s var(--curva);
}
.pista:hover { border-color: var(--m-azul-300); color: var(--tinta); }
.pista.viva { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }

.rail-fin { display: flex; gap: 7px; flex: 0 0 auto; }
.menu {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  min-height: 36px; padding: 0 30px 0 14px; border-radius: var(--m-r-pill);
  border: 1px solid var(--borde);
  background: var(--losa); color: var(--tinta-2);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* ---------- Grilla ---------- */
main { max-width: var(--ancho); margin: 0 auto; padding: 12px 24px 140px; }

.grilla {
  display: grid; gap: 32px 22px;
  grid-template-columns: repeat(auto-fill, 272px);
  justify-content: center;
  perspective: 1100px;
}

.pieza { position: relative; display: flex; flex-direction: column; gap: 12px; }

.pieza-losa {
  position: relative; aspect-ratio: 1 / 1;
  display: grid; align-items: end; justify-items: center;
}
.pieza-losa.sin-foto::after {
  content: 'Sin foto'; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--tinta-3); font-family: var(--display); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
}
.pieza:hover .pieza-losa { box-shadow: var(--flota-3); }

.mas {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  appearance: none; border: 0; cursor: pointer; padding: 0;
  width: 42px; height: 42px; border-radius: var(--r-chico);
  background: var(--marca); color: var(--marca-tinta); box-shadow: 0 1px 2px rgba(8, 22, 41, .25);
  display: grid; place-items: center;
  transition: transform .2s var(--curva), background .2s var(--curva), color .2s var(--curva);
}
.mas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.mas:hover { box-shadow: var(--flota-2); transform: translateZ(28px) scale(1.08); }
.mas[disabled] { opacity: .4; cursor: default; }
.mas[disabled]:hover { background: var(--marca); color: var(--marca-tinta); transform: translateZ(28px); }

.pieza-paso {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  display: flex; align-items: center; gap: 2px;
  background: var(--marca); color: var(--marca-tinta);
  border-radius: var(--r-chico); box-shadow: var(--flota-2); padding: 3px;
  transform: translateZ(28px);
}
.pieza-paso .paso-btn { width: 30px; height: 30px; color: inherit; }
.pieza-paso .paso-btn:hover { background: rgba(255, 255, 255, .18); }
.pieza-paso .paso-valor { width: 30px; color: inherit; font-size: 13px; }

.senias { display: flex; gap: 10px; flex-wrap: wrap; }
.pieza-senias { position: absolute; top: 12px; left: 13px; z-index: 2; transform: translateZ(20px); }
.senia {
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2);
}
.senia-destacado { color: var(--marca); }
.senia-nuevo { color: var(--ok); }
.senia-sin-stock { color: var(--error); }

.pieza-pie { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pieza-nombre {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--tinta); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pieza-nombre::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.pieza-precio {
  font-family: var(--display); font-size: 15px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; flex: 0 0 auto; letter-spacing: .01em; color: var(--tinta);
}
.pieza-precio:empty { display: none; }

/* Las piezas NO arrancan en opacity:0. Antes lo hacian y solo se revelaban al
   recibir una clase por scroll; al no existir ese codigo, el catalogo entero
   quedaba invisible. Nada que el cliente deba ver depende de una animacion. */

.hueso { display: flex; flex-direction: column; gap: 12px; }
.hueso-losa { aspect-ratio: 1 / 1; border-radius: var(--r-medio); background: var(--losa); opacity: .55; }
.hueso-linea { height: 11px; width: 65%; border-radius: 4px; background: var(--losa); opacity: .55; }
.hueso-losa, .hueso-linea { animation: latir 1.5s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: .55; } 50% { opacity: .3; } }

.estado { text-align: center; color: var(--tinta-2); padding: 70px 20px; display: grid; gap: 16px; justify-items: center; }

/* ---------- Velo ---------- */
.velo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(18, 41, 63, .5);
  backdrop-filter: blur(3px);
}

/* ---------- Ficha de producto ---------- */
.ficha {
  position: fixed; z-index: 60; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(940px, calc(100vw - 40px)); max-height: calc(100vh - 60px);
  display: grid; grid-template-columns: 1.05fr 1fr;
  background: var(--losa); border-radius: var(--r-grande);
  box-shadow: var(--flota-4); overflow: hidden;
}

.ficha .cerrar { position: absolute; top: 14px; right: 14px; z-index: 4; }

.ficha-visual { background: var(--losa-2); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.ficha-marco {
  flex: 1; min-height: 0; border-radius: var(--r-medio); background: var(--losa);
  box-shadow: var(--flota-1); display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1 / 1;
}
.ficha-marco img { width: 100%; height: 100%; object-fit: contain; }
.ficha-marco.sin-foto::after {
  content: 'Sin foto'; color: var(--tinta-3); font-family: var(--display);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}

.ficha-tiras { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha-tira {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 50px; height: 50px; border-radius: var(--r-chico); overflow: hidden;
  background: var(--losa); box-shadow: var(--flota-0);
  transition: transform .18s var(--curva), box-shadow .18s var(--curva);
}
.ficha-tira img { width: 100%; height: 100%; object-fit: cover; }
.ficha-tira:hover { transform: translateY(-2px); box-shadow: var(--flota-1); }
.ficha-tira.viva { box-shadow: var(--flota-1), 0 0 0 2px var(--marca); }

.ficha-texto { padding: 34px 34px 30px; overflow-y: auto; display: flex; flex-direction: column; }
.ficha-texto h2 {
  margin: 8px 0 0; font-size: 24px; line-height: 1.15;
  letter-spacing: .03em; text-transform: uppercase;
}
.ficha-sub { margin: 8px 0 0; color: var(--tinta-2); font-size: 14px; }
.ficha-sub:empty { display: none; }

.ficha-precio {
  margin-top: 18px; font-family: var(--display); font-size: 28px; font-weight: 700;
  letter-spacing: 0; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ficha-precio small {
  display: block; font-family: var(--texto); font-size: 13px; font-weight: 400;
  color: var(--tinta-3); letter-spacing: 0; margin-top: 5px; text-transform: none;
}
.ficha-precio:empty { display: none; }

.ficha-descripcion { margin: 18px 0 0; color: var(--tinta-2); font-size: 14.5px; white-space: pre-line; }
.ficha-descripcion:empty { display: none; }

.ficha-obs {
  margin: 14px 0 0; padding: 10px 14px; border-radius: 10px;
  background: var(--fondo-2, rgba(23, 41, 74, .07)); color: var(--tinta);
  font-size: 14px; font-weight: 600; border-left: 3px solid currentColor;
}
.ficha-obs[hidden] { display: none; }

.specs {
  margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: auto 1fr; gap: 9px 22px; font-size: 13.5px;
}
.specs:empty { display: none; }
.specs dt {
  color: var(--tinta-3); font-family: var(--display); font-size: 10.5px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding-top: 2px;
}
.specs dd { margin: 0; font-weight: 500; }

.ficha-acciones { margin-top: auto; padding-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ficha-sumar { display: flex; gap: 10px; align-items: center; flex: 1 1 100%; }
.ficha-sumar .boton { flex: 1; }

/* ---------- Contador ---------- */
.paso { display: flex; align-items: center; background: var(--losa-2); border-radius: var(--r-chico); padding: 3px; }
.paso-btn {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  width: 32px; height: 32px; border-radius: 6px; color: var(--tinta);
  display: grid; place-items: center; transition: background .15s var(--curva);
}
.paso-btn:hover { background: rgba(27, 58, 92, .12); }
.paso-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.paso-valor {
  width: 34px; border: 0; background: none; padding: 0; text-align: center;
  font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.paso-valor:focus { outline: none; }

/* ---------- Panel del pedido ---------- */
.pedido {
  position: fixed; z-index: 60; right: 20px; bottom: 20px;
  width: min(400px, calc(100vw - 32px)); max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  background: var(--losa); border-radius: var(--r-grande);
  box-shadow: var(--flota-4); overflow: hidden;
}
.pedido-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px; flex: 0 0 auto;
}
.pedido-cabeza h2 { margin: 0; font-size: 17px; letter-spacing: .1em; }

.pedido-vista { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.pedido-lineas { list-style: none; margin: 0; padding: 0 20px; overflow-y: auto; flex: 1 1 auto; }
.pedido-linea { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; }
.pedido-linea + .pedido-linea { border-top: 1px solid var(--linea); }
.pedido-foto { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--losa-2); box-shadow: var(--flota-0); }
.pedido-foto-vacia { width: 46px; height: 46px; border-radius: 6px; background: var(--losa-2); }
.pedido-nombre { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.pedido-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.pedido-fila .paso { padding: 2px; }
.pedido-fila .paso-btn { width: 26px; height: 26px; }
.pedido-fila .paso-valor { width: 28px; font-size: 13px; }
.pedido-subtotal { font-family: var(--display); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pedido-vacio { color: var(--tinta-2); font-size: 14px; padding: 30px 20px 40px; margin: 0; text-align: center; }
.mas-inline {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px;
  background: var(--losa-2); color: var(--tinta); font-weight: 700; font-size: 13px; vertical-align: -4px;
}

.pedido-pie {
  flex: 0 0 auto; padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 9px;
  background: var(--losa-2);
}
.pedido-total {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.pedido-total span:first-child {
  font-size: 10.5px; font-weight: 600; color: var(--tinta-2);
  letter-spacing: .12em; text-transform: uppercase;
}

.campo {
  width: 100%; border: 0; background: var(--losa); color: var(--tinta);
  font: inherit; font-size: 13.5px; padding: 10px 14px; border-radius: var(--r-chico);
  box-shadow: var(--flota-0);
}
.campo::placeholder { color: var(--tinta-3); }
.campo:focus { outline: none; box-shadow: var(--flota-1), 0 0 0 2px var(--marca); }

.pedido-largo {
  margin: 0; padding: 10px 12px; border-radius: var(--r-chico);
  border-left: 3px solid var(--marca);
  background: var(--losa); color: var(--tinta); font-size: 12.5px; line-height: 1.45;
  box-shadow: var(--flota-0);
}
.alerta {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2);
  background: var(--losa); border-radius: var(--r-chico); padding: 10px 13px;
  box-shadow: var(--flota-0); border-left: 3px solid var(--marca);
}

.pedido-menores { display: flex; align-items: center; gap: 14px; justify-content: space-between; min-height: 20px; }
.confirmar { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tinta-2); }

/* ---------- Estado enviado ---------- */
.enviado { padding: 12px 26px 30px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.enviado-marca {
  width: 52px; height: 52px; border-radius: var(--r-medio); display: grid; place-items: center;
  background: var(--marca); color: var(--marca-tinta); box-shadow: var(--flota-2);
}
.enviado-marca svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.enviado h3 { margin: 4px 0 0; font-size: 17px; letter-spacing: .08em; }
.enviado p { margin: 0; color: var(--tinta-2); font-size: 14px; max-width: 30ch; }
.enviado .enviado-ref { font-size: 12.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.enviado .enviado-ref:empty { display: none; }
.enviado .alerta { text-align: left; max-width: 34ch; }

/* Verificacion anti-robots (Turnstile): vacia mientras no hace falta un clic */
.pedido-verificacion:empty { display: none; }
.pedido-verificacion { display: flex; justify-content: center; }

/* Aviso de catalogo de respaldo o precios guardados (auditoria H01/H06) */
.aviso-datos { margin: 0 0 18px; }
.enviado .boton { margin-top: 8px; }

/* ---------- Pie ---------- */
.pie {
  max-width: var(--ancho); margin: 0 auto; padding: 0 24px 60px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; color: var(--tinta-3); font-size: 13px;
}
.pie-firma { display: flex; flex-direction: column; align-items: center; }
.pie-nombre {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2);
}
.pie-bajo {
  font-family: var(--display); font-weight: 500; font-size: 8px;
  letter-spacing: .4em; text-transform: uppercase; color: var(--tinta-3); margin-top: 4px;
}
.pie-contacto { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.pie-contacto a { color: var(--tinta-2); text-decoration: none; }
.pie-contacto a:hover { color: var(--marca); }
.pie-nota { margin: 0; max-width: 48ch; font-size: 12px; }
.pie-nota:empty { display: none; }

/* ---------- Nota flotante ---------- */
.nota {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; padding: 11px 20px; border-radius: var(--r-chico);
  background: var(--marino); color: #fff;
  font-size: 13px; font-weight: 500; box-shadow: var(--flota-3);
 max-width: calc(100vw - 40px); text-align: center;
}

/* ---------- Ajustes puntuales del modo oscuro ----------
   Van al final y SIEMPRE dentro del guardado de tema: una regla
   ':root:not([data-theme="light"])' suelta se aplica tambien en modo claro,
   y eso dejaba el icono + en beige sobre blanco, invisible. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nota { background: var(--m-azul-200); color: var(--marino-hondo); }
  :root:not([data-theme="light"]) .paso-btn:hover { background: rgba(236, 234, 228, .14); }
  :root:not([data-theme="light"]) .banner { background: var(--marino-hondo); }
  :root:not([data-theme="light"]) .pieza-losa.sin-foto { background: var(--losa-2); }
  :root:not([data-theme="light"]) .pieza-losa:not(.sin-foto)::before { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%); }
  :root:not([data-theme="light"]) .cajon { background: var(--piso-alto); }
}

:root[data-theme="dark"] .nota { background: var(--m-azul-200); color: var(--marino-hondo); }
:root[data-theme="dark"] .paso-btn:hover { background: rgba(236, 234, 228, .14); }
:root[data-theme="dark"] .banner { background: var(--marino-hondo); }
:root[data-theme="dark"] .pieza-losa.sin-foto { background: var(--losa-2); }
:root[data-theme="dark"] .pieza-losa:not(.sin-foto)::before { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%); }
:root[data-theme="dark"] .cajon { background: var(--piso-alto); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ficha { grid-template-columns: 1fr; overflow-y: auto; }
  .ficha-visual { padding: 18px; }
  .ficha-marco { aspect-ratio: 4 / 3; }
  .ficha-texto { padding: 22px 20px 24px; overflow: visible; }
}

@media (max-width: 620px) {
  body { font-size: 14.5px; }

  .barra { padding: 9px 10px; gap: 8px; }
  .barra::before { inset: 3px 6px; border-radius: var(--r-chico); }
  .marca { padding-left: 10px; }
  .firma-nombre { font-size: 12.5px; letter-spacing: .11em; }
  .firma-bajo { font-size: 6.5px; letter-spacing: .3em; }
  .marca img { height: 24px; }
  #buscar { font-size: 16px; padding: 8px 12px 8px 32px; }  /* 16px evita el zoom de iOS */
  .lupa { left: 11px; width: 14px; height: 14px; }


  .rail { top: 52px; padding: 8px 10px 12px; gap: 8px; flex-wrap: wrap; }
  .rail-pistas { width: 100%; flex: 1 1 100%; }
  .rail-fin { width: 100%; }
  .rail-fin .menu { flex: 1; text-align: left; }

  main { padding: 8px 10px 120px; }
  .grilla { gap: 20px 10px; grid-template-columns: repeat(2, 1fr); }
  .pieza { gap: 9px; }
  .pieza-pie { flex-direction: column; align-items: flex-start; gap: 3px; padding: 0 2px; }
  .pieza-nombre { font-size: 13.5px; }
  .pieza-precio { font-size: 14.5px; }
  .mas { width: 38px; height: 38px; right: 8px; bottom: 8px; }
  .pieza-paso { right: 8px; bottom: 8px; }
  .pieza-paso .paso-btn { width: 27px; height: 27px; }
  .pieza-paso .paso-valor { width: 26px; }

  /* La ficha ocupa toda la pantalla, como una vista aparte */
  .ficha {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    top: 0; left: 0; transform: none; border-radius: 0;
 grid-template-rows: auto 1fr;
  }
  .ficha .cerrar { top: 10px; right: 10px; }
  .ficha-marco { aspect-ratio: 1 / 1; }
  .ficha-texto { padding-bottom: 34px; }
  .ficha-acciones { padding-top: 20px; }
  .ficha-sumar .boton { min-height: 46px; }

  /* El pedido sube desde abajo, como una hoja */
  .pedido {
    right: 0; left: 0; bottom: 0; width: 100%;
    max-height: 90dvh; border-radius: var(--r-grande) var(--r-grande) 0 0;
  }
  /* Sube apenas, no desde fuera de la pantalla: si la animacion no llegara a
     correr (por ejemplo con la pestania en segundo plano), el panel queda
     igual en su lugar y no inaccesible. */
  .pedido-cabeza { padding: 16px 16px 10px; }
  .pedido-lineas { padding: 0 16px; }
  .pedido-pie { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .campo { font-size: 16px; }   /* evita el zoom al enfocar en iOS */
  .boton, .boton-fantasma { min-height: 44px; }


  .pie { padding: 0 18px 40px; }
  .nota { bottom: 84px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Se cortan las animaciones en bucle y se acortan las transiciones, pero no
     se llevan a cero: el fundido de un panel que aparece ayuda a entender que
     aparecio. Lo que se saca abajo es el desplazamiento. */
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  html { scroll-behavior: auto; }
}

/* ===========================================================================
   Numeros y pedido
   ---------------------------------------------------------------------------
   Los importes llevan cifras tabulares (los digitos alinean en columna) y el
   pedido se lee como una lista de comprobante. La tipografia es Manrope, la de
   la identidad; mas abajo, en "Capa de identidad Marcial", se ajustan pesos y
   tamanios.

   Nada de esto depende de animaciones: los paneles aparecen y ya. Tres veces
   una animacion congelada dejo contenido invisible o corrido, asi que solo
   queda el pulso de los placeholders de carga, que no oculta nada real.
   =========================================================================== */

/* ---------- Los numeros, con cifras tabulares ---------- */
.pieza-precio,
.ficha-precio,
.pedido-subtotal,
.pedido-total,
.paso-valor {
  font-family: var(--datos);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.pieza-precio { font-weight: 500; font-size: 14.5px; }
.ficha-precio { font-weight: 600; letter-spacing: -.03em; }
.ficha-precio small { font-family: var(--texto); letter-spacing: 0; }
.pedido-total { font-weight: 600; }

/* ---------- El pedido como remito ---------- */
.remito-sello { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.remito-linea {
  font-family: var(--datos); font-size: 10px; font-weight: 400;
  letter-spacing: .04em; color: var(--tinta-3); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* La linea de puntos entre el producto y su importe: el gesto del comprobante */
.pedido-linea + .pedido-linea { border-top: 0; }
.pedido-linea { padding: 11px 0; }
.pedido-fila { position: relative; }
.pedido-fila::before {
  content: ''; position: absolute; left: 0; right: 0; top: -7px;
  border-top: 1px dotted var(--linea);
}
.pedido-subtotal { font-size: 13.5px; font-weight: 500; }

/* El total cierra el remito con una regla llena, no punteada */
.pedido-total { border-top: 2px solid var(--tinta); padding-top: 12px; margin-bottom: 2px; }
.pedido-total span:first-child {
  font-family: var(--datos); font-size: 10px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2);
}

@media (max-width: 620px) {
  .pieza-precio { font-size: 13.5px; }
  .remito-linea { font-size: 9px; }
  .pedido-total { padding-top: 10px; }
}

/* ===========================================================================
   Banner, destacados y vitrina
   ---------------------------------------------------------------------------
   El banner lleva el titulo a la izquierda y el carrusel de los mas pedidos a
   la derecha, dentro del mismo bloque marino. En celular el carrusel queda
   debajo del boton.
   =========================================================================== */

/* ---------- Banner ---------- */
.banner {
  position: relative; overflow: hidden; color: #fff; background: var(--marino);
  padding: 48px 44px 116px; min-height: 320px; display: flex; flex-direction: column;
}
/* Titulo a la izquierda, carrusel a la derecha. Sin carrusel queda solo el texto. */
.banner-in {
  max-width: var(--ancho); width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center;
}
.banner-in:has(.destacados[hidden]) { grid-template-columns: 1fr; }
.banner-texto { min-width: 0; }
.banner-tit {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 5vw, 58px); line-height: .98; letter-spacing: -.02em;
  text-transform: uppercase; margin: 0; max-width: 12ch; position: relative; z-index: 3;
}

/* El recorrido del dia. Cada parada se completa a su paso, queda marcada casi
   todo el ciclo y se limpia al final para volver a empezar. */
/* ---------- Destacados, a la derecha del titulo ---------- */
.destacados { min-width: 0; position: relative; z-index: 3; }
.destacados-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 0 0 12px; }
.destacados-tit {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; margin: 0; color: #fff;
}
.destacados-nota { font-family: var(--datos); font-size: 10.5px; color: rgba(255, 255, 255, .6); letter-spacing: .04em; }
.destacados-pista {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 4px 2px 16px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* se desvanece en los bordes: el carrusel no termina en un corte seco */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 30px), transparent);
}
.destacados-pista::-webkit-scrollbar { display: none; }

.dest {
  flex: 0 0 204px; position: relative;
  border-radius: var(--r-medio); overflow: hidden; background: var(--losa);
  box-shadow: var(--flota-2);
  transition: transform .24s var(--curva), box-shadow .24s var(--curva);
}
.dest:hover { transform: translateY(-4px); box-shadow: var(--flota-3); }
.dest-foto { aspect-ratio: 4/3; display: grid; place-items: center; background: var(--losa-2); }
.dest-foto { display: grid; align-items: end; justify-items: center; }
.dest-foto img {
  /* Mas angosta y mas abajo que en la grilla: aca el boton + esta arriba a la
     derecha y una foto apaisada le llegaba encima. */
  width: 76%; aspect-ratio: 5 / 3; height: auto;
  object-fit: contain; object-position: center bottom;
  margin-bottom: 7%;
}
.dest-foto.sin-foto::after {
  content: 'Sin foto'; font-family: var(--datos); font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3);
}
.dest-orden {
  position: absolute; top: 10px; left: 10px; background: var(--marino); color: #fff;
  font-family: var(--datos); font-size: 10px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px; letter-spacing: .04em; z-index: 2;
}
.dest-cuerpo { padding: 11px 13px 13px; }
.dest-nom {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em;
}
.dest-nom::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.dest-precio { font-family: var(--datos); font-size: 15px; font-weight: 600; margin-top: 7px; }
.dest-precio:empty { display: none; }
.dest-sumar { position: absolute; right: 10px; top: 10px; z-index: 3; }
.dest-sumar .mas { position: static; width: 34px; height: 34px; transform: none; }
.dest-sumar .mas:hover { transform: scale(1.08); }
.dest-sumar .pieza-paso { position: static; transform: none; }

/* ---------- Vitrina: el producto apoyado sobre el papel ----------
   Las fotos van en PNG sin fondo, asi que la pieza no lleva tarjeta: el
   producto se apoya directo sobre el fondo de la pagina y lo unico que le da
   volumen es una sombra de piso.

   La clave del tamanio parejo esta en `object-fit: contain` con relleno fijo:
   todos los productos entran en el mismo cuadrado sin importar como este
   encuadrada la foto. Con `cover` el que salio chico en su foto se veia chico.
   Una foto que igual traiga fondo no queda rota, pero se nota: se ve como una
   lamina rectangular apoyada donde deberia haber solo producto. */
.grilla {
  gap: 30px 20px; grid-template-columns: repeat(auto-fill, 272px);
  justify-content: center; perspective: none;
}

/* La sombra de piso no se mueve con el producto: se queda en el suelo y se
   ensancha cuando el producto se levanta. Es lo que vende el volumen. */
.pieza-losa:not(.sin-foto)::before {
  content: ''; position: absolute; z-index: 0;
  left: 20%; right: 20%; bottom: 17%; height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18, 34, 56, .22), rgba(18, 34, 56, 0) 70%);
  transition: transform .26s var(--curva-fuerte), opacity .26s var(--curva-fuerte);
}

/* Todos los productos se ven del mismo tamanio y apoyados en la misma linea.

   Lo que fallaba antes: con `contain` dentro de un cuadrado, lo que se iguala
   es la caja, no lo pintado. Una foto vertical toca arriba y abajo y llena el
   alto; una horizontal toca los costados y queda baja. Medido en la grilla
   real: una panceta 3:4 salia de 210px de alto y un pan 4:3 de 123px.

   La solucion es fijar el ALTO y sobrar ancho: asi la que manda es siempre la
   altura y todas las fotos se pintan igual de altas, sea cual sea su
   proporcion.

   La banda se define con `aspect-ratio` y no con un alto en porcentaje: dentro
   de un grid, un `height: 55%` no resuelve de forma fiable — medido, la misma
   regla daba 150px en un momento y 364px en otro. Con el ancho definido y
   `aspect-ratio`, el alto sale siempre igual.

   5 a 3 significa que toda foto menos apaisada que eso entra por altura, que
   son practicamente todas. Para la rarisima mas ancha, `object-position:
   bottom` la deja apoyada en la misma linea que las demas. */
.pieza-losa img {
  position: relative; z-index: 1;
  width: 90%; aspect-ratio: 5 / 3; height: auto;
  object-fit: contain; object-position: center bottom;
  padding: 0; margin-bottom: 21%;   /* deja libre la esquina del boton + */
  border-radius: 0; transform: none;
  transition: transform .26s var(--curva-fuerte);
}

/* Sin foto no hay producto que levantar: queda una placa sobria que mantiene
   la grilla armada en vez de un hueco. */
.pieza-losa.sin-foto {
  border-radius: var(--r-medio); background: var(--losa-2);
  box-shadow: inset 0 0 0 1px var(--linea);
}

.pieza-cuerpo { padding: 0 3px; }
.pieza-cuerpo .pieza-nombre { font-size: 14.5px; min-height: 2.7em; }
.pieza-meta {
  font-family: var(--datos); font-size: 10.5px; color: var(--tinta-3);
  margin-top: 2px; min-height: 1.4em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pieza-pie { padding: 0 3px; min-height: 20px; }
.pieza-unit { font-family: var(--datos); font-size: 10.5px; color: var(--tinta-3); }


@media (hover: hover) and (pointer: fine) {
  .pieza:hover .pieza-losa img { transform: translateY(-8px) scale(1.03); }
  .pieza:hover .pieza-losa:not(.sin-foto)::before { transform: scaleX(1.18); opacity: .55; }
  .mas:hover { transform: scale(1.08); }
}
.mas:active { transform: scale(.94); }

@media (max-width: 620px) {
  .destacados { margin-inline: -18px; padding-inline: 18px; }
  .destacados-pista { gap: 11px; }
  .dest { flex: 0 0 168px; }

  /* Dos productos por fila, como en la mayoria de los catalogos de celular. */
  .grilla { gap: 22px 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0; justify-content: stretch; }
  .pieza-losa { aspect-ratio: 1 / 1; }
  .pieza-losa img { width: 92%; margin-bottom: 16%; }   /* deja lugar al boton + */
  .pieza-losa:not(.sin-foto)::before { bottom: 12%; }
  .pieza-cuerpo .pieza-nombre { font-size: 13.5px; }
  .pieza-meta { font-size: 10.5px; }
  .pieza-precio { font-size: 15px; }
  .mas { width: 38px; height: 38px; right: 6px; bottom: 6px; }
  .mas svg { width: 18px; height: 18px; }
}

/* Tiras que se arrastran con el mouse. La clase la pone el JS, asi que si no
   corre no queda un cursor de agarre sobre algo que no se mueve. */
.arrastrable { cursor: grab; }
.arrastrable.agarrando { cursor: grabbing; user-select: none; }
.arrastrable.agarrando * { cursor: grabbing; }

/* ===========================================================================
   Entradas, salidas y respuesta al toque
   ---------------------------------------------------------------------------
   El estado en reposo de cada panel es el visible. El estado inicial de la
   entrada vive en la clase .entrando, que el JS pone y saca en el mismo tick;
   la salida vive en .saliendo, que el JS saca con un plazo maximo.

   Se probo con @starting-style y se descarto: deja al elemento en su estado
   inicial mientras la transicion no avance, y si no avanza nunca — pestania en
   segundo plano, navegador que no compone — el panel queda invisible pero
   ocupando lugar. Aca la unica forma de quedar invisible es que el JS no
   llegue a sacar la clase, y la saca dos lineas despues de ponerla.
   =========================================================================== */

/* Apagar la transicion un instante hace que el valor salte al de reposo. El JS
   la usa como red por si la transicion de entrada no llega a correr. */
.llego { transition: none !important; }

.velo { opacity: 1; transition: opacity .22s var(--curva-fuerte); }
.velo.entrando, .velo.saliendo { opacity: 0; }

/* La ficha no cuelga de ningun disparador: aparece centrada, y por eso escala
   desde el centro. */
.ficha { opacity: 1; transition: opacity .24s var(--curva-fuerte), transform .24s var(--curva-fuerte); }
.ficha.entrando, .ficha.saliendo { opacity: 0; transform: translate(-50%, -48%) scale(.97); }

/* El pedido si cuelga de algo: sale del boton flotante de abajo a la derecha,
   asi que crece desde esa esquina. */
.pedido {
  opacity: 1; transform: none; transform-origin: bottom right;
  transition: opacity .26s var(--curva-fuerte), transform .26s var(--curva-fuerte);
}
.pedido.entrando, .pedido.saliendo { opacity: 0; transform: translateY(14px) scale(.96); }


/* El aviso se dispara seguido, asi que va por transicion y no por keyframes:
   una transicion retoma desde donde esta, un keyframe vuelve a empezar. */
.nota { opacity: 1; transition: opacity .2s var(--curva-fuerte), transform .2s var(--curva-fuerte); }
.nota.entrando, .nota.saliendo { opacity: 0; transform: translate(-50%, 10px); }

/* Respuesta al toque: sin esto los botones se sienten muertos al hacer clic.
   Va despues de `.boton:active { transform: translateY(0) }`, que era un
   apagado y no una respuesta. */
.boton, .boton-fantasma, .pista, .cerrar, .paso-btn, .ficha-tira {
  transition: transform .16s var(--curva-fuerte), box-shadow .18s var(--curva),
              background .18s var(--curva), color .18s var(--curva);
}
.boton:active, .boton-fantasma:active, .pista:active,
.cerrar:active, .paso-btn:active, .ficha-tira:active { transform: scale(.96); }
.dest:active { transform: translateY(-2px) scale(.99); }

/* En pantallas tactiles el hover se queda pegado despues de tocar: el color
   puede quedarse (sirve de feedback), el movimiento no. */
@media (hover: none) {
  .pista:hover, .dest:hover, .ficha-tira:hover,
  .cerrar:hover, .mas:hover, .boton:hover, .boton-fantasma:hover { transform: none; }
  .pieza:hover .pieza-losa img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Las entradas y salidas quedan en puro fundido: se saca el desplazamiento. */
  .ficha.entrando, .ficha.saliendo { transform: translate(-50%, -50%); }
  .pedido.entrando, .pedido.saliendo { transform: none; }
  .nota.entrando, .nota.saliendo { transform: translateX(-50%); }
  .boton:active, .boton-fantasma:active, .pista:active,
  .cerrar:active, .paso-btn:active, .ficha-tira:active,
  .dest:active { transform: none; }
}

/* ===========================================================================
   Hamburguesa, cajon de rubros e interruptor de tema
   =========================================================================== */

.hamburguesa {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
  appearance: none; border: 0; cursor: pointer; border-radius: var(--r-chico);
  background: transparent; color: var(--tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: background 160ms var(--curva), transform 160ms var(--curva-fuerte);
}
.hamburguesa span {
  display: block; width: 18px; height: 1.8px; border-radius: 2px; background: currentColor;
}
.hamburguesa:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .hamburguesa:hover { background: rgba(23, 41, 74, .07); }
}

/* El cajon entra desde la izquierda porque de ahi sale el boton: el movimiento
   explica de donde vino. */
.cajon {
  position: fixed; z-index: 60; left: 0; top: 0; bottom: 0;
  width: min(320px, 86vw);
  background: var(--losa); box-shadow: var(--flota-4);
  display: flex; flex-direction: column;
  padding: 20px 18px 24px;
  opacity: 1; transform: none;
  transition: opacity .24s var(--curva-fuerte), transform .26s var(--curva-fuerte);
}
.cajon.entrando, .cajon.saliendo { opacity: 0; transform: translateX(-100%); }

.cajon-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cajon-titulo {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase;
}
.cajon-bajada { margin: 6px 0 18px; font-size: 13px; color: var(--tinta-2); }
.cajon-lista { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }

.rubro {
  appearance: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-chico);
  background: transparent; color: var(--tinta);
  font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .04em;
  transition: background 160ms var(--curva), color 160ms var(--curva), transform 160ms var(--curva-fuerte);
}
.rubro-cuenta {
  margin-left: auto; font-family: var(--datos); font-size: 10.5px; font-weight: 400;
  color: var(--tinta-3); letter-spacing: 0;
}
.rubro.viva { background: var(--marca); color: var(--marca-tinta); }
.rubro.viva .rubro-cuenta { color: inherit; opacity: .65; }
.rubro:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .rubro:hover { background: rgba(23, 41, 74, .07); }
  .rubro.viva:hover { background: var(--marca); }
}

/* Interruptor claro / oscuro. La bola se mueve con transform, nunca con left. */
.tema {
  flex: 0 0 auto; appearance: none; border: 0; padding: 6px; cursor: pointer;
  background: transparent; border-radius: 999px;
  transition: transform 160ms var(--curva-fuerte);
}
.tema:active { transform: scale(.94); }
.tema-pista {
  display: block; width: 42px; height: 24px; border-radius: 999px;
  background: var(--gris); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: background 200ms var(--curva);
}
.tema-bola {
  display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%;
  background: var(--blanco); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform 220ms var(--curva-fuerte);
}
.tema[aria-checked="true"] .tema-pista { background: var(--marino); }
.tema[aria-checked="true"] .tema-bola { transform: translateX(18px); }

@media (max-width: 620px) {
  .cajon { width: min(300px, 88vw); padding: 18px 14px 20px; }
  .tema-pista { width: 38px; height: 22px; }
  .tema-bola { width: 16px; height: 16px; }
  .tema[aria-checked="true"] .tema-bola { transform: translateX(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .cajon.entrando, .cajon.saliendo { transform: none; }
}

/* ===========================================================================
   Boton flotante de WhatsApp
   ---------------------------------------------------------------------------
   Abajo a la izquierda, en la esquina que queda libre: el boton del pedido y el
   panel viven a la derecha, y encimarlos taparia el carrito.
   El verde es el de WhatsApp y no sale de la paleta de la marca a proposito —
   es un logo ajeno y tenirlo de marino lo volveria irreconocible.
   =========================================================================== */
.wasap {
  position: fixed; left: 24px; bottom: 24px; z-index: 45;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: var(--flota-3);
  transition: transform .2s var(--curva-fuerte), box-shadow .2s var(--curva);
}
.wasap svg { width: 30px; height: 30px; fill: currentColor; }

/* Con la ficha, el pedido o el cajon abiertos el boton queda debajo del velo:
   se ve como una mancha verde apagada y no se puede tocar. Mejor sacarlo. Los
   tres velos estan antes en el HTML, por eso alcanza con el hermano. */
.velo:not([hidden]) ~ .wasap { display: none; }
.wasap:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .wasap:hover { transform: translateY(-3px); box-shadow: var(--flota-4); }
}

@media (max-width: 620px) {
  .wasap { left: 16px; bottom: 18px; width: 48px; height: 48px; }
  .wasap svg { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .wasap { transition-duration: .12s; }
}

/* ===========================================================================
   Capa de identidad Marcial
   ---------------------------------------------------------------------------
   Lo que la identidad cambia en la forma de las piezas, no solo en el color:
   tarjetas blancas con borde fino, precios en Manrope pesado con cifras
   tabulares, titulares en minuscula normal, el bloque marino de portada y el
   pie con el logo. Va al final para ganarle a las reglas de arriba con el
   mismo peso; los valores salen de assets/marca/tokens.css.
   =========================================================================== */

/* ---------- Numeros: Manrope con cifras tabulares ---------- */
.pieza-precio, .ficha-precio, .pedido-subtotal, .pedido-total,
.paso-valor, .dest-precio {
  font-family: var(--datos); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pieza-precio { font-weight: 800; font-size: 17px; }
.dest-precio { font-weight: 800; font-size: 15px; }
.ficha-precio { font-weight: 800; font-size: 30px; letter-spacing: -.03em; }
.pedido-subtotal { font-weight: 700; }
.pedido-total { font-weight: 800; }
.pieza-meta, .pieza-unit, .remito-linea, .destacados-nota, .rubro-cuenta {
  font-family: var(--texto); letter-spacing: 0;
}
.pieza-meta { font-size: 12.5px; font-weight: 500; }
.pieza-unit { font-size: 12px; }
.remito-linea { font-size: 11.5px; text-transform: none; }
.pedido-total span:first-child {
  font-family: var(--texto); font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none;
}
.pedido-total { border-top: 1px solid var(--linea); }
.pedido-fila::before { display: none; }
.pedido-linea + .pedido-linea { border-top: 1px solid var(--linea); }

/* ---------- Producto apoyado sobre el fondo ----------
   El producto NO lleva tarjeta: flota directo sobre el fondo de la pagina, con
   su sombra de piso, como en el diseno anterior. Solo el producto sin foto
   queda en una placa suave para no dejar un hueco en la grilla. */
.pieza { padding: 0; background: none; border: 0; box-shadow: none; }
.pieza:hover .pieza-losa { box-shadow: none; }
.pieza-losa { background: none; }
.pieza-losa.sin-foto { border-radius: var(--m-r-lg); background: var(--losa-2); box-shadow: inset 0 0 0 1px var(--linea); }
.pieza-losa.sin-foto::after, .dest-foto.sin-foto::after, .ficha-marco.sin-foto::after {
  font-family: var(--texto); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.pieza-pie { padding: 0 3px; align-items: baseline; justify-content: flex-start; gap: 8px; }
.pieza-cuerpo .pieza-nombre { font-weight: 700; letter-spacing: -.01em; }
.senia {
  font-family: var(--texto); font-size: 11px; font-weight: 700;
  letter-spacing: .01em; text-transform: none; padding: 3px 9px; border-radius: var(--m-r-pill);
  background: var(--m-superficie-3); color: var(--tinta-2);
}
.senia-destacado { background: var(--m-info-fondo); color: var(--m-info-tinta); }
.senia-nuevo { background: var(--m-ok-fondo); color: var(--m-ok-tinta); }
.senia-sin-stock { background: var(--m-error-fondo); color: var(--m-error-tinta); }
.pieza-senias { top: 10px; left: 10px; }
.hueso-losa { border-radius: var(--m-r-lg); }

/* ---------- Portada: el bloque marino ---------- */
.banner { background: var(--marino); border-radius: 0 0 var(--m-r-xl) var(--m-r-xl); }
.banner-tit {
  text-transform: none; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.04; max-width: 16ch;
}
.destacados-tit { text-transform: none; letter-spacing: -.01em; font-size: 16px; font-weight: 800; }
.destacados-nota { font-size: 12px; font-weight: 600; }
.dest { border: 1px solid var(--linea); border-radius: var(--m-r-lg); box-shadow: none; }
.dest:hover { box-shadow: var(--flota-3); border-color: transparent; }
.dest-orden {
  font-family: var(--texto); font-weight: 700; border-radius: var(--m-r-pill);
  background: var(--marino); letter-spacing: 0;
}
.dest-nom { font-weight: 700; letter-spacing: -.01em; }

/* ---------- Ficha, cajon y pedido ---------- */
.ficha-texto h2 { text-transform: none; letter-spacing: -.025em; font-size: 26px; font-weight: 800; }
.ficha-visual { background: var(--losa-2); }
.ficha-marco { box-shadow: none; border: 1px solid var(--linea); }
.specs dt { font-family: var(--texto); font-size: 12px; font-weight: 700; letter-spacing: .01em; text-transform: none; }
.pedido-cabeza h2 { font-size: 19px; letter-spacing: -.02em; }
.cajon-titulo { text-transform: none; letter-spacing: -.01em; font-size: 17px; font-weight: 800; }
.rubro { font-size: 14px; font-weight: 600; letter-spacing: 0; border-radius: var(--m-r-md); }
.enviado h3 { letter-spacing: -.01em; font-size: 20px; }
.campo { border: 1px solid var(--borde); box-shadow: none; border-radius: var(--m-r-md); min-height: 40px; }
.campo:focus { border-color: var(--m-azul-500); box-shadow: var(--m-foco); }
.alerta, .pedido-largo { box-shadow: none; border: 1px solid var(--linea); border-left: 3px solid var(--azul); }
.paso { border: 1px solid var(--linea); background: var(--losa); }
.pieza-paso.paso { border: 0; background: var(--marca); }
.tema[aria-checked="true"] .tema-pista { background: var(--m-azul-500); }

/* ---------- Pie con el logo ---------- */
.pie {
  max-width: none; margin: 40px 0 0; padding: 36px 24px 56px;
  background: var(--losa); border-top: 1px solid var(--linea);
  gap: 16px; color: var(--tinta-2); font-size: 14px;
}
.pie-logo { height: 34px; width: auto; }
.pie-contacto a { color: var(--tinta-2); font-weight: 600; }
.pie-contacto a:hover { color: var(--azul); }
.pie-nota { font-size: 13px; }

@media (max-width: 620px) {
  .pieza-precio { font-size: 18px; }
  .banner { border-radius: 0 0 var(--m-r-lg) var(--m-r-lg); }
  .pie { padding: 28px 18px 44px; }
}

/* ===========================================================================
   Estructura: portada, carrito, precio con boton, contacto y barra inferior
   ---------------------------------------------------------------------------
   Seis ajustes de uso, no de estilo: el carrito se ve siempre arriba, la
   portada tiene una sola llamada a la accion, el boton de sumar queda junto al
   precio, el contacto tiene su bloque, el celular tiene barra inferior y el
   filtro de rubros dice cual esta activo.
   =========================================================================== */

/* ---------- Portada: titulo, una linea y un boton ---------- */
.banner { padding: 52px 44px 56px; min-height: 0; }
.banner-sub {
  margin: 16px 0 28px; max-width: 46ch; position: relative; z-index: 3;
  font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .82);
}
.boton-claro {
  position: relative; z-index: 3;
  background: #fff; color: var(--m-marino-800); box-shadow: none;
}
.boton-claro:hover { background: var(--m-azul-100); box-shadow: none; }

/* ---------- Carrito en el encabezado ---------- */
.carrito {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
  appearance: none; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: var(--m-r-md);
  background: var(--losa); color: var(--tinta);
  transition: transform .16s var(--curva-fuerte), border-color .16s var(--curva);
}
.carrito .ico { width: 20px; height: 20px; }
.carrito:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .carrito:hover { border-color: var(--m-azul-300); }
}
.carrito-cuenta, .bi-cuenta {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--m-r-pill);
  background: var(--marca); color: var(--marca-tinta);
  font: 800 11px/18px var(--texto); text-align: center; font-variant-numeric: tabular-nums;
}
.carrito-cuenta { position: absolute; top: -6px; right: -6px; box-shadow: 0 0 0 2px var(--losa); }
.salta { animation: salta .22s var(--curva-fuerte); }
@keyframes salta { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------- Rubros: boton con texto, dice cual esta activo ---------- */
.hamburguesa {
  width: auto; min-width: 40px; height: 40px; padding: 0 14px;
  flex-direction: row; gap: 9px;
  border: 1px solid var(--borde); background: var(--losa);
  border-radius: var(--m-r-md);
  font: 700 14px/1 var(--texto); letter-spacing: -.005em; color: var(--tinta);
}
.hamburguesa .hamburguesa-rayas { display: flex; flex-direction: column; gap: 4px; width: auto; height: auto; background: none; border-radius: 0; }
.hamburguesa .hamburguesa-rayas span { display: block; width: 16px; height: 1.8px; border-radius: 2px; background: currentColor; }
.hamburguesa .hamburguesa-txt { width: auto; height: auto; background: none; border-radius: 0; white-space: nowrap; }
.hamburguesa.activo { background: var(--marca); border-color: var(--marca); color: var(--marca-tinta); }

/* ---------- Precio y boton en la misma fila ---------- */
.pieza-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 3px; min-height: 44px; }
.pieza-precios { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pieza-mando { position: relative; z-index: 3; flex: 0 0 auto; }
.pieza-mando .mas, .pieza-mando .pieza-paso { position: static; transform: none; }
.pieza-mando .mas:hover { transform: scale(1.06); }
.pieza-mando .pieza-paso { display: flex; }

/* El boton ya no esta sobre la foto: el producto baja y se centra en su banda */
.pieza-losa img { margin-bottom: 16%; }
.pieza-losa:not(.sin-foto)::before { bottom: 12%; }

.pie { margin-top: 56px; }

/* ---------- Barra inferior (solo celular) ---------- */
.barra-inferior { display: none; }

@media (max-width: 620px) {
  .banner { padding: 34px 18px 36px; }
  .banner-in { grid-template-columns: 1fr; gap: 30px; }
  .banner-sub { font-size: 15.5px; margin: 12px 0 22px; }

  .carrito { display: none; }           /* en el telefono el pedido vive abajo */
  .hamburguesa { padding: 0; width: 40px; justify-content: center; }
  .hamburguesa .hamburguesa-txt { display: none; }
  .hamburguesa.activo { width: auto; padding: 0 12px; }
  .hamburguesa.activo .hamburguesa-txt { display: inline; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }

  .pieza-pie { flex-direction: row; align-items: center; gap: 10px; padding: 0 2px; }
  .pieza-losa img { margin-bottom: 14%; }
  .pieza-losa:not(.sin-foto)::before { bottom: 10%; }

  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .wasap { display: none; }              /* el contacto esta en el menu de la hamburguesa */
  .nota { bottom: calc(76px + env(safe-area-inset-bottom)); }

  .barra-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--losa); border-top: 1px solid var(--linea);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  .bi-item {
    position: relative; appearance: none; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 48px; border-radius: var(--m-r-md);
    font: 600 11.5px/1.1 var(--texto); color: var(--tinta-3); text-decoration: none;
    transition: color .16s var(--curva), transform .16s var(--curva-fuerte);
  }
  .bi-item .ico { width: 22px; height: 22px; }
  .bi-item.activo { color: var(--marca); }
  .bi-item:active { transform: scale(.96); }
  .bi-cuenta { position: absolute; top: 2px; left: calc(50% + 6px); box-shadow: 0 0 0 2px var(--losa); }
}

@media (prefers-reduced-motion: reduce) {
  .salta { animation: none; }
}


/* ===========================================================================
   Ficha: la foto entra completa. Antes la imagen alta se estiraba por encima
   del marco y quedaba cortada; ahora llena el marco sin pasarse (contain) y la
   miniatura que se ve mientras llega la grande va un poco desenfocada.
   =========================================================================== */
.ficha-marco { position: relative; }
.ficha-marco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: filter .28s var(--curva), transform .28s var(--curva);
}
.ficha-marco img.cargando { filter: blur(7px); transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ficha-marco img { transition: none; } }

/* ---------- Menu de la hamburguesa: contacto y tema ---------- */
.cajon-pie { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea); display: grid; gap: 4px; }
.cajon-opcion {
  appearance: none; border: 0; background: none; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: var(--m-r-md);
  font: 600 14px/1.2 var(--texto); color: var(--tinta); text-decoration: none; text-align: left;
  transition: background .16s var(--curva);
}
.cajon-opcion[hidden] { display: none; }
.cajon-opcion .ico { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cajon-opcion:hover { background: rgba(23, 41, 74, .06); }
:root[data-theme="dark"] .cajon-opcion:hover { background: rgba(236, 234, 228, .08); }
#cajon-contacto .ico { stroke: #1faa59; }
.cajon-tema .tema-pista { margin-left: auto; pointer-events: none; }
.cajon-tema[aria-checked="true"] .tema-pista { background: var(--m-azul-500); }
.cajon-tema[aria-checked="true"] .tema-bola { transform: translateX(18px); }

/* ---------- Lupa y cierre del buscador (solo celular) ---------- */
.buscar-abrir, .buscar-cerrar { display: none; }

/* ===========================================================================
   Barra superior del celular: con los colores normales del sitio, hamburguesa a la izquierda, logo al
   centro y lupa a la derecha. El carrito no va aca: el pedido esta abajo.
   =========================================================================== */
@media (max-width: 620px) {
  .barra {
    height: 60px; padding: 0 6px; gap: 0; max-width: none;
    justify-content: space-between; background: var(--losa); color: var(--tinta);
    border-bottom: 1px solid var(--linea);
  }
  .barra::before { display: none; }
  body.scrolleado .barra { box-shadow: var(--flota-2); }

  .barra .hamburguesa, .buscar-abrir {
    width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--tinta);
    display: grid; place-items: center; border: 0; background: transparent;
  }
  .barra .hamburguesa { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
  .barra .hamburguesa .hamburguesa-rayas { gap: 5px; }
  .barra .hamburguesa .hamburguesa-rayas span { width: 20px; height: 2px; }
  .barra .hamburguesa:hover, .buscar-abrir:hover { background: rgba(23, 41, 74, .07); }
  .barra .hamburguesa:active, .buscar-abrir:active { background: rgba(23, 41, 74, .13); }
  /* Con un rubro elegido: un puntito en vez del nombre, que no entra */
  .barra .hamburguesa.activo { width: 44px; padding: 0; background: transparent; border: 0; color: var(--tinta); }
  .barra .hamburguesa.activo .hamburguesa-txt { display: none; }
  .barra .hamburguesa.activo::after {
    content: ''; position: absolute; top: 9px; right: 9px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 2px var(--losa);
  }

  .barra .marca {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    padding: 0; display: flex; align-items: center;
  }
  .barra .marca img { height: 32px; }

  .buscar-abrir svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round;
  }

  .barra .carrito, .barra .tema, .barra #cta-whatsapp { display: none; }

  /* Buscador: tapa la barra mientras se escribe */
  .barra-buscar { display: none; }
  .barra.buscando .barra-buscar {
    display: flex; align-items: center; gap: 4px; position: absolute; inset: 0;
    padding: 0 6px 0 10px; background: var(--losa); z-index: 2;
  }
  .barra.buscando #buscar { flex: 1; min-height: 42px; background: var(--piso); color: var(--tinta); }
  .barra.buscando .lupa { left: 24px; stroke: var(--tinta-3); }
  .barra.buscando #buscar { padding-left: 38px; }
  .barra.buscando .buscar-cerrar {
    display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px;
    appearance: none; border: 0; background: transparent; color: var(--tinta); border-radius: 50%; cursor: pointer;
  }
  .buscar-cerrar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

  .rail { top: 60px; }
}
@media (max-width: 620px) {
  #buscar::-webkit-search-cancel-button { display: none; }   /* ya hay una cruz propia */
}
@media (max-width: 620px) {
  :root[data-theme="dark"] .barra .hamburguesa:hover, :root[data-theme="dark"] .buscar-abrir:hover { background: rgba(236, 234, 228, .1); }
}


/* ===========================================================================
   Modo oscuro en grafito (gris carbon neutro) en vez del azul marino.
   Prueba de color: para volver al azul alcanza con borrar este bloque.
   =========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --piso:      #131417;
    --piso-alto: #1b1c20;
    --losa:      #222328;
    --losa-2:    #2b2c32;
    --tinta:     #ECEDF0;
    --tinta-2:   #B7BAC2;
    --tinta-3:   #8B8F99;
    --linea:     rgba(255, 255, 255, .10);
    --borde:     rgba(255, 255, 255, .22);
    --marca:       #ECEDF0;
    --marca-tinta: #16171a;
    --marino:      #2b2c32;
    --marino-hondo: #1b1c20;
  }
}
:root[data-theme="dark"] {
  --piso:      #131417;
  --piso-alto: #1b1c20;
  --losa:      #222328;
  --losa-2:    #2b2c32;
  --tinta:     #ECEDF0;
  --tinta-2:   #B7BAC2;
  --tinta-3:   #8B8F99;
  --linea:     rgba(255, 255, 255, .10);
  --borde:     rgba(255, 255, 255, .22);
  --marca:       #ECEDF0;
  --marca-tinta: #16171a;
  --marino:      #2b2c32;
  --marino-hondo: #1b1c20;
}
:root[data-theme="dark"] .banner { background: #1b1c20; }
:root[data-theme="dark"] .nota { background: #ECEDF0; color: #16171a; }
:root[data-theme="dark"] .cajon { background: #1b1c20; }
:root[data-theme="dark"] .velo { background: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .tema[aria-checked="true"] .tema-pista,
:root[data-theme="dark"] .cajon-tema[aria-checked="true"] .tema-pista { background: #8B8F99; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .velo { background: rgba(0, 0, 0, .55); }
}

/* ===========================================================================
   Productos mas grandes en la grilla. La foto estaba en una banda de 5:3 al
   90% del ancho, asi que una foto cuadrada o vertical se veia a poco mas de la
   mitad del lugar disponible. Ahora usa casi toda la losa cuadrada (el boton +
   ya no esta encima de la foto, no hace falta dejarle sitio).
   =========================================================================== */
.pieza-losa img { width: 100%; aspect-ratio: 1 / 1; margin-bottom: 5%; }
.pieza-losa:not(.sin-foto)::before { bottom: 5%; height: 6%; left: 24%; right: 24%; }
@media (max-width: 620px) {
  .pieza-losa img { width: 100%; margin-bottom: 5%; }
  .pieza-losa:not(.sin-foto)::before { bottom: 5%; }
}

/* ===========================================================================
   Celular: al bajar quedan fijos la barra de arriba y los rubros (Todo,
   Salsas, ...). Los selectores de marca y orden pasan a ser parte de la pagina:
   se ven arriba del todo y se van con el scroll en vez de ocupar pantalla.
   En la PC no cambia nada: ahi siguen en la misma fila fija.
   =========================================================================== */
@media (max-width: 620px) {
  .rail { display: contents; }
  .rail-pistas {
    position: sticky; top: 60px; z-index: 30;
    background: var(--piso); mask-image: none; -webkit-mask-image: none;
    width: auto; margin: 0; padding: 8px 10px;
  }
  .rail-fin { width: auto; padding: 0 10px 12px; }
}


/* ===========================================================================
   Los mas pedidos: el producto llena la foto de la tarjeta. Estaba al 76% del
   ancho en una banda baja de 5:3, y dentro de la tarjeta se veia chico.
   =========================================================================== */
.dest-foto { aspect-ratio: 1 / 1; }
.dest-foto img { width: 94%; aspect-ratio: 1 / 1; margin-bottom: 4%; }

/* ===========================================================================
   Ficha en el celular: hoja que sube desde abajo, con asa para arrastrar y
   cerrar. Antes ocupaba toda la pantalla y entraba con un fundido.
   =========================================================================== */
.ficha-agarre { display: none; }
@media (max-width: 620px) {
  .ficha {
    top: auto; bottom: 0; left: 0; width: 100%; max-width: 100%;
    height: auto; max-height: 94dvh; transform: none;
    border-radius: 22px 22px 0 0; overflow-y: auto; overscroll-behavior: contain;
    grid-template-rows: none;
    transition: transform .42s cubic-bezier(.32, .72, 0, 1), opacity .2s var(--curva-fuerte);
  }
  .ficha.entrando, .ficha.saliendo { opacity: 1; transform: translateY(100%); }
  .ficha.saliendo { transition: transform .3s cubic-bezier(.4, 0, 1, 1), opacity .3s var(--curva-fuerte); }
  .velo { transition-duration: .3s; }

  .ficha-agarre {
    display: block; position: absolute; z-index: 5; top: 8px; left: 50%;
    width: 40px; height: 4px; margin-left: -20px; border-radius: 4px;
    background: var(--tinta-3); opacity: .55; pointer-events: none;
  }
  .ficha-visual { padding-top: 24px; }
  .ficha .cerrar { top: 16px; }
}
@media (max-width: 620px) and (prefers-reduced-motion: reduce) {
  .ficha.entrando, .ficha.saliendo { transform: none; opacity: 0; }
  .ficha { transition: opacity .2s linear; }
}

/* ===========================================================================
   Secciones y tipos en la vista "Todo". Los titulos ocupan el ancho completo
   de la grilla; los productos siguen flotando debajo, sin tarjetas.
   =========================================================================== */
.grilla .seccion-tit, .grilla .tipo-tit {
  grid-column: 1 / -1; margin: 0; display: flex; align-items: baseline; gap: 10px;
  color: var(--tinta); letter-spacing: -.02em;
}
.grilla .seccion-tit {
  font: 800 clamp(22px, 2.6vw, 28px)/1.15 var(--display);
  padding: 34px 3px 10px; border-bottom: 1px solid var(--linea);
}
.grilla .seccion-tit:first-child { padding-top: 6px; }
.grilla .seccion-tit { margin-bottom: -14px; }
.grilla .tipo-tit { margin-bottom: -16px; }
.grilla .tipo-tit {
  font: 700 15px/1.2 var(--display); color: var(--tinta-2);
  padding: 14px 3px 0; letter-spacing: 0;
}
.seccion-cuenta {
  font: 600 12px/1 var(--datos); color: var(--tinta-3); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) {
  .grilla .seccion-tit { font-size: 21px; padding: 26px 2px 8px; }
  .grilla .seccion-tit:first-child { padding-top: 2px; }
  .grilla .tipo-tit { font-size: 14px; padding-top: 10px; }
}

/* ===========================================================================
   Ficha en el celular: que se vea entera. La foto ya no se estira a un
   cuadrado de todo el ancho (comia media pantalla) sino que toma como mucho el
   40% del alto, y la barra con "Sumar al pedido" queda siempre a la vista
   abajo, aunque el texto sea largo y haya que deslizar.
   =========================================================================== */
@media (max-width: 620px) {
  .ficha { max-height: 96dvh; }
  .ficha-visual { padding: 22px 14px 6px; gap: 8px; }
  .ficha-marco { aspect-ratio: auto; flex: none; height: min(40dvh, calc(100vw - 28px)); }
  .ficha-tira { width: 42px; height: 42px; }
  .ficha-texto { padding: 12px 18px 0; }
  .ficha-texto h2 { font-size: 20px; margin-top: 4px; }
  .ficha-precio { font-size: 22px; }
  .ficha-acciones {
    position: sticky; bottom: 0; z-index: 3; margin-top: auto;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    background: var(--losa); border-top: 1px solid var(--linea);
  }
}

/* Unidad en que se cuenta el pedido (kg, unidades, cajas), junto al contador */
.pedido-unidad { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); margin-right: auto; padding-left: 8px; align-self: center; }