/* Carrusel «Recién llegados» del inicio: el favorito de cada categoría, recortado y flotando sobre un escenario con
   luz menta (como la cama de impresión de la portada). Solo se carga en el inicio. */
main .novedades { padding: 46px 0 6px; }
.novedades-cabeza h2 { margin-bottom: 6px; }
.novedades-cabeza p { margin: 0; color: var(--gris-claro); max-width: 620px; }

.carrusel { --borde-pagina: max(16px, calc((100% - 1200px) / 2 + 16px));
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(248px, 78%, 340px); gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 22px var(--borde-pagina) 14px; scroll-padding-inline: var(--borde-pagina); }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline-offset: -3px; }
@media (min-width: 640px) { .carrusel { grid-auto-columns: 300px; gap: 18px; } }
@media (min-width: 1080px) { .carrusel { grid-auto-columns: 340px; gap: 22px; } }
.diapo { scroll-snap-align: start; }

.diapo a { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  color: #fff; text-decoration: none; border-radius: 22px; border: 1px solid var(--borde);
  background: radial-gradient(90% 58% at 50% 34%, rgba(var(--menta-rgb), .32), rgba(var(--menta-rgb), .07) 52%, transparent 74%),
              linear-gradient(180deg, #1d1d1d, #0c0c0c 78%);
  transition: transform .25s, border-color .25s, box-shadow .25s; }
/* cama de impresión: cuadrícula tenue debajo del producto */
.diapo a::before { content: ""; position: absolute; inset: 38% 0 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000, transparent 75%); }
.diapo a:hover, .diapo a:focus-visible { transform: translateY(-5px); border-color: var(--menta);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .6), 0 0 36px rgba(var(--menta-rgb), .22); }

.escena { position: relative; display: block; aspect-ratio: 5 / 4; }
.escena::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 5%; height: 9%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); }
/* la foto va fuera del flujo para que una foto vertical no estire todas las tarjetas */
.escena img { position: absolute; top: 52px; left: 28px; width: calc(100% - 56px); height: calc(100% - 72px);
  object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .55));
  animation: flotar 4.6s ease-in-out infinite alternate; transition: scale .3s; }
.diapo:nth-child(2n) .escena img { animation-delay: -2.3s; }
.diapo a:hover .escena img { scale: 1.06; }
.escena img.mini { top: 50px; left: 18px; width: calc(100% - 36px); height: calc(100% - 64px); object-fit: cover;
  border-radius: 14px; background: var(--escenario); filter: none; animation: none; }
@keyframes flotar { from { transform: translateY(5px); } to { transform: translateY(-9px); } }

.sellos { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.sellos span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px;
  font: 700 12px var(--titulos); letter-spacing: .12em; text-transform: uppercase; }
.sellos .nuevo { background: var(--menta); color: var(--negro); animation: latido 2.4s ease-in-out infinite; }
.sellos .viral { background: rgba(10, 10, 10, .78); color: #fff; border: 1px solid rgba(255, 159, 67, .5); }
.sellos .viral svg { color: #ff9f43; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--menta-rgb), .55); } 50% { box-shadow: 0 0 0 7px rgba(var(--menta-rgb), 0); } }

.diapo .texto { display: grid; gap: 4px; margin-top: auto; padding: 4px 18px 18px; }
.diapo small { font: 600 12px var(--titulos); letter-spacing: .16em; text-transform: uppercase; color: var(--menta); }
.diapo b { font: 700 21px/1.15 var(--titulos); min-height: 2.3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pie-diapo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1); }
.pie-diapo .precio { font: 700 25px var(--titulos); }
.pie-diapo .precio.cotiza { font-size: 17px; color: var(--gris-claro); }
.ver { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px 9px 15px; border-radius: 999px;
  background: #fff; color: var(--negro); font-weight: 700; font-size: 15px; white-space: nowrap; transition: background .2s; }
.ver svg { width: 18px; height: 18px; }
.diapo a:hover .ver { background: var(--menta); }

/* flechas grandes y barra de avance: las dos flechas juntas a la izquierda; a la derecha queda libre la esquina del
   botón flotante de WhatsApp */
.novedades-pie { display: flex; align-items: center; gap: 14px; padding-right: 86px; }
.novedades-pie .flecha { order: -1; }
.novedades-pie .flecha + .avance { margin-left: 4px; }
.flecha { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  background: var(--panel); color: #fff; border: 2px solid var(--borde); transition: border-color .2s, color .2s, background .2s; }
.flecha:hover { border-color: var(--menta); color: var(--menta); }
.flecha:active { background: var(--menta); color: var(--negro); }
.avance { flex: 1; height: 5px; border-radius: 5px; background: var(--borde); overflow: hidden; }
.avance span { display: block; height: 100%; width: var(--avance, 20%); border-radius: inherit; background: var(--menta);
  box-shadow: 0 0 12px rgba(var(--menta-rgb), .7); transition: width .3s; }
.cuenta { min-width: 4.6em; text-align: center; font: 600 14px var(--titulos); letter-spacing: .08em; color: var(--gris-claro); }

@media (prefers-reduced-motion: reduce) {
  .escena img, .sellos .nuevo { animation: none; }
  .diapo a, .escena img { transition: none; }
}