/* =====================================================================
   VITRINA — cada tarjeta de producto es una vitrina refrigerada en miniatura
   ---------------------------------------------------------------------
   Pedido de Tomás (1/11/2026): "que cada recuadro sea como un mostrador
   de carnicería". Se carga después de base.css y solo cambia la parte de
   arriba de la tarjeta (.media) y el lugar del precio; el resto de la
   tarjeta, el fondo de piedra, el bordó y las letras siguen como estaban.

   De arriba hacia abajo:
     · el techo de acero con el tubo de luz fría (.media::before, arriba);
     · la cámara: la pared del fondo, iluminada desde arriba (.media);
     · la bandeja de acero con la foto o el sello del logo (img / .ph);
     · el vidrio inclinado, con el filo de arriba y dos reflejos (.media::after);
     · el zócalo: el canto de acero y la franja oscura (.media::before, abajo);
     · el precio, como cartelito pinchado en la bandeja (.price).

   El precio sigue en su lugar del HTML (después del nombre): se mueve solo
   a la vista, así el lector de pantalla lo sigue leyendo en el mismo orden.
   Para ubicarlo sobre la bandeja, la tarjeta es un contenedor (cqw = un
   centésimo del ancho de la tarjeta) y la altura de la vitrina es --mh.
   ===================================================================== */
.card{
  container-type:inline-size;
  --cn:clamp(8px,3.4cqw,13px);   /* techo */
  --zo:clamp(13px,6cqw,22px);    /* zócalo */
  --pin:clamp(9px,4.4cqw,16px);  /* palito del cartel */
  --mh:75cqw;                    /* alto de la vitrina: 4/3 del ancho */
  --frio:226 240 252;            /* la luz de la heladera: blanca, apenas azulada */
  --acero:linear-gradient(180deg,#E4E8EB,#B9C0C6 46%,#9DA5AC 54%,#CCD2D7);
}

/* --- La cámara --- */
.media{
  background:
    radial-gradient(80% 46% at 50% 0%,rgb(var(--frio) / .3),transparent 72%),
    linear-gradient(180deg,#2C3338 0%,#1D2226 46%,#131618 100%);
}
/* Techo con el tubo de luz y, abajo, el zócalo de acero con la franja oscura. */
.media::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    /* el tubo: una línea blanca con su resplandor */
    linear-gradient(180deg,rgb(var(--frio) / .95),rgb(var(--frio) / .4) 40%,transparent) 50% var(--cn) / 86% 4px no-repeat,
    /* el techo */
    linear-gradient(180deg,#5A6167,#3A4045 70%,#2A2F33) top / 100% var(--cn) no-repeat,
    /* el canto de acero del zócalo y la franja oscura de abajo */
    linear-gradient(180deg,#F2F4F6 0 1px,transparent 1px) bottom var(--zo) left 0 / 100% 1px no-repeat,
    linear-gradient(180deg,transparent 0 58%,#141110 58%) bottom / 100% var(--zo) no-repeat,
    var(--acero) bottom / 100% var(--zo) no-repeat;
}

/* --- La bandeja de acero: la foto, o el sello del logo mientras no hay foto --- */
.media img,.media .ph{
  position:absolute;
  top:calc(var(--cn) + 17%);left:7%;
  width:86%;height:calc(100% - var(--cn) - 17% - var(--zo) - 8%);
  border-radius:clamp(5px,2.2cqw,9px);
  /* apoyada en el piso de la vitrina: el borde de atrás se aleja */
  transform:perspective(42rem) rotateX(16deg);transform-origin:50% 100%;
  /* el borde de la bandeja, la ceja de adelante y la sombra sobre el fondo */
  box-shadow:
    0 0 0 2px #CDD3D8,
    0 0 0 3px #6E767D,
    0 4px 0 2px #8C949B,
    0 14px 18px -8px rgb(0 0 0 / .8);
}
/* base.css agranda la foto al pasar el mouse; acá la bandeja se queda quieta */
@media (hover:hover){.card:hover .media img{transform:perspective(42rem) rotateX(16deg)}}
.media .ph{
  background:
    repeating-linear-gradient(90deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 3px),
    radial-gradient(110% 80% at 50% 0%,rgb(255 255 255 / .34),transparent 62%),
    linear-gradient(180deg,#AEB5BB,#99A1A8 56%,#878F96);
  box-shadow:
    inset 0 8px 12px -6px rgb(0 0 0 / .5),
    inset 0 -1px 0 rgb(255 255 255 / .3),
    0 0 0 2px #CDD3D8,
    0 0 0 3px #6E767D,
    0 4px 0 2px #8C949B,
    0 14px 18px -8px rgb(0 0 0 / .8);
  /* el sello va a la izquierda: a la derecha está el cartel del precio */
  justify-items:center;align-content:center;gap:clamp(4px,1.6cqw,8px);
  padding:6px 46% 6px 4%;
  color:#15181B;font-size:clamp(.5rem,2.2cqw,.62rem);font-weight:700;letter-spacing:.06em;line-height:1.25;
}
/* En una tarjeta angosta no entran el sello, el texto y el cartel: queda el sello solo.
   El texto sigue ahí para el lector de pantalla. */
@container (max-width:229px){.media .ph{font-size:0;gap:0}}
/* el logo grabado en el acero */
.media .ph::before{
  width:clamp(30px,19cqw,96px);
  opacity:.5;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;
}

/* --- El vidrio: va de abajo del techo hasta el zócalo --- */
.media::after{
  inset:var(--cn) 0 var(--zo);z-index:1;
  background:
    /* el filo de arriba del vidrio */
    linear-gradient(180deg,rgb(255 255 255 / .5) 0 1px,transparent 1px) 0 6px / 100% 7px no-repeat,
    /* dos reflejos en diagonal */
    linear-gradient(112deg,transparent 0 16%,rgb(255 255 255 / .08) 21%,rgb(255 255 255 / .03) 30%,transparent 35% 58%,rgb(255 255 255 / .06) 60%,transparent 63%) 0 0 / 220% 100%,
    /* el vidrio inclinado refleja el techo: más claro arriba */
    linear-gradient(180deg,rgb(var(--frio) / .12),rgb(var(--frio) / .03) 42%,rgb(var(--frio) / .015));
  box-shadow:inset 1px 0 0 rgb(255 255 255 / .12),inset -1px 0 0 rgb(255 255 255 / .12);
  transition:background-position .9s var(--ease-out);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover .media::after{background-position:0 6px,100% 0,0 0}
}

/* --- El precio: un cartelito blanco pinchado en la bandeja --- */
.card .price{
  position:absolute;z-index:2;
  top:calc(var(--mh) * .92 - var(--zo) - var(--pin));right:calc(7% + 2.5cqw);
  translate:0 -100%;rotate:-2.5deg;
  display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:0 6px;
  margin:0;padding:clamp(4px,1.6cqw,7px) clamp(7px,2.8cqw,11px) clamp(4px,1.4cqw,6px);
  border:0;border-radius:4px;
  background:linear-gradient(180deg,#FFFDF8,#EFE9DD);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgb(0 0 0 / .22),0 10px 16px -8px rgb(0 0 0 / .85);
  color:#1C1714;
}
/* el palito */
.card .price::after{
  content:"";position:absolute;top:100%;left:24%;width:2px;height:var(--pin);
  background:linear-gradient(90deg,#D8D2C6,#FFFFFF 50%,#BDB6A8);border-radius:0 0 1px 1px;
}
.card .price strong{
  grid-column:1 / -1;
  font-size:clamp(1rem,5.4cqw,1.42rem);line-height:1.08;letter-spacing:-.02em;color:#1C1714;
}
.card .price s{color:#5C4E42;font-size:clamp(.66rem,2.7cqw,.8rem)}
.card .price small{color:#5C4E42;font-size:clamp(.66rem,2.7cqw,.78rem);font-weight:500}
.card .price .save{grid-column:1 / -1;margin-top:2px;color:#8C1522;font-weight:700;font-size:clamp(.66rem,2.5cqw,.76rem)}

/* En una tarjeta angosta, el precio anterior va en su propio renglón: el cartel no se ensancha. */
@container (max-width:299px){.card .price{grid-template-columns:auto}}
/* En la más angosta (dos por fila en el celular) el cartel baja hasta el canto del frente,
   como etiqueta sobre el vidrio: arriba no le queda lugar al lado de la placa de la oferta. */
@container (max-width:229px){
  .card .price{top:calc(var(--mh) - var(--zo) * .2);grid-template-columns:auto auto}
  .card .price::after{display:none}
}

/* Sin el precio en el cuerpo, el botón se queda abajo. */
.card .ctl{margin-top:auto;padding-top:12px}

/* --- Tarjeta grande (oferta principal y combo destacado) --- */
@media (min-width:1000px){
  /* vitrina a la izquierda, a todo el alto: el cartel se ancla desde abajo */
  .card--feature .price{
    top:auto;bottom:calc(8% + var(--zo) + var(--pin));right:calc(53cqw + 3.6cqw);translate:none;
    padding:8px 14px 7px;
  }
  .card--feature .price strong{font-size:clamp(1.5rem,3.6cqw,2.1rem)}
  .card--feature .price s,.card--feature .price small{font-size:.86rem}
  .card--feature .price .save{font-size:.8rem}
  /* la bandeja grande es alta: el sello arriba y el cartel abajo */
  .card--feature .media .ph{font-size:.7rem;gap:12px;padding:6% 8% 34%}
  .card--feature .media .ph::before{width:clamp(60px,15cqw,104px)}
  /* con dos productos, o uno solo, la tarjeta grande vuelve a ser vertical */
  .deals-grid:has(> .card:nth-child(2):last-child) .card--feature{--mh:62.5cqw}
  .deals-grid:has(> .card:only-child) .card--feature{--mh:max(62.5cqw,300px)}
  .deals-grid:has(> .card:nth-child(2):last-child) .card--feature .price{
    top:calc(var(--mh) * .92 - var(--zo) - var(--pin));bottom:auto;right:calc(7% + 2.5cqw);translate:0 -100%;
  }
  /* sin el precio, el texto y el botón quedan juntos y centrados */
  .card--feature .ctl{margin-top:18px}
  .deals-grid:has(> .card:nth-child(2):last-child) .card--feature .ctl{margin-top:auto}
}

/* --- La luz se prende cuando aparece la vitrina ---
   Un parpadeo corto, como un tubo al encenderse. Las del catálogo cuando se dibujan;
   las de ofertas y combos cuando entran en pantalla (anim.js les pone .luz).
   Con "reducir movimiento" no hay parpadeo: la luz ya está prendida. */
@media (prefers-reduced-motion:no-preference){
  .grid .card .media,.card.luz .media{animation:encender .9s linear backwards;animation-delay:calc(min(var(--i,0),11) * 55ms + .15s)}
  @keyframes encender{
    0%,8%{filter:brightness(.42)}
    12%{filter:brightness(1)}
    18%,26%{filter:brightness(.5)}
    32%,100%{filter:brightness(1)}
  }
}

/* =====================================================================
   SECCIONES ("Elegí una sección"): la misma vitrina, más ancha
   ---------------------------------------------------------------------
   La cámara con el techo, la luz y la bandeja ocupa la parte de arriba;
   el nombre y la flecha quedan abajo, en el frente oscuro del mostrador,
   con el mismo contraste que antes. --pie es el alto de ese frente.
   ===================================================================== */
.cat{--pie:84px;--frio:226 240 252;background:linear-gradient(180deg,#221C18,#15110F)}
.cats .cat.hot{--pie:98px}
.cat-media{
  inset:0 0 var(--pie);
  background:
    linear-gradient(180deg,rgb(var(--frio) / .95),rgb(var(--frio) / .4) 40%,transparent) 50% 11px / 88% 4px no-repeat,
    linear-gradient(180deg,#5A6167,#3A4045 70%,#2A2F33) top / 100% 11px no-repeat,
    radial-gradient(80% 60% at 50% 0%,rgb(var(--frio) / .3),transparent 72%),
    linear-gradient(180deg,#2C3338,#1D2226 50%,#131618);
  /* el canto de acero del zócalo y la franja oscura */
  border-bottom:7px solid #141110;
  box-shadow:0 -6px 0 #B9C0C6 inset;
}
/* la bandeja: la foto, o el logo grabado en el acero */
.cat-media img,.cat.noimg .cat-media::before{
  position:absolute;top:24%;left:9%;width:82%;height:calc(76% - 16px);
  border-radius:8px;
  transform:perspective(42rem) rotateX(18deg);transform-origin:50% 100%;
  box-shadow:0 0 0 2px #CDD3D8,0 0 0 3px #6E767D,0 4px 0 2px #8C949B,0 14px 18px -8px rgb(0 0 0 / .8);
}
.cat.noimg .cat-media::before{
  translate:none;aspect-ratio:auto;opacity:1;filter:none;
  background:
    repeating-linear-gradient(90deg,rgb(255 255 255 / .05) 0 1px,transparent 1px 3px),
    radial-gradient(110% 80% at 50% 0%,rgb(255 255 255 / .34),transparent 62%),
    linear-gradient(180deg,#AEB5BB,#99A1A8 56%,#878F96);
}
/* el logo grabado en el acero, como en las tarjetas */
.cat.noimg .cat-media::after{
  content:"";position:absolute;left:50%;top:calc(24% + 4px);height:calc(76% - 26px);aspect-ratio:1;translate:-50% 0;
  border-radius:50%;background:url(../../../assets/logo-original.png) center/cover no-repeat;
  opacity:.5;filter:grayscale(1) contrast(1.15);mix-blend-mode:multiply;
  transform:perspective(42rem) rotateX(18deg);transform-origin:50% 100%;
}
@media (hover:hover){
  .cat:hover .cat-media img,.cat.noimg:hover .cat-media::before{transform:perspective(42rem) rotateX(18deg)}
}
/* el vidrio, solo sobre la cámara (antes acá iba el velo oscuro para leer el nombre) */
.cat::after{
  inset:11px 0 calc(var(--pie) + 13px);
  background:
    linear-gradient(180deg,rgb(255 255 255 / .5) 0 1px,transparent 1px) 0 6px / 100% 7px no-repeat,
    linear-gradient(112deg,transparent 0 16%,rgb(255 255 255 / .08) 21%,rgb(255 255 255 / .03) 30%,transparent 35% 58%,rgb(255 255 255 / .06) 60%,transparent 63%) 0 0 / 220% 100%,
    linear-gradient(180deg,rgb(var(--frio) / .12),rgb(var(--frio) / .03) 42%,rgb(var(--frio) / .015));
  transition:background-position .9s var(--ease-out);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cat:hover::after{background-position:0 6px,100% 0,0 0}
}
@media (max-width:860px){
  .cat{--pie:60px}
  .cats .cat.hot{--pie:64px}
}