/* ==========================================================================
   SNOB - Carrusel de la portada
   Tokens de marca.css. Las tarjetas reusan .prod del tema: aqui solo se
   define el riel, el desplazamiento y los controles.
   ========================================================================== */

.carrusel { position: relative; }

/* Flechas y boton de la tienda, debajo del riel. */
.carrusel-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.carrusel-flechas { display: flex; gap: 10px; }

.carrusel-flecha {
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--tinta);
  background: var(--hueso);
  transition: background .2s, color .2s, transform .2s, opacity .2s;
}
.carrusel-flecha:hover:not(:disabled) { background: var(--rojo); color: var(--blanco); transform: translateY(-2px); }
.carrusel-flecha:disabled { opacity: .3; cursor: not-allowed; }

/* El riel se desplaza con el dedo en movil y con las flechas en escritorio.
   scroll-snap deja cada tarjeta alineada al borde, sin posiciones a medias. */
.carrusel-riel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  /* La barra nativa ensucia el bloque: se esconde sin perder el gesto. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carrusel-riel::-webkit-scrollbar { display: none; }
.carrusel-riel > * { scroll-snap-align: start; }

@media (min-width: 1024px) { .carrusel-riel { grid-auto-columns: calc((100% - 72px) / 4); } }
@media (max-width: 1023px) and (min-width: 720px) { .carrusel-riel { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (max-width: 719px) { .carrusel-riel { grid-auto-columns: 78%; gap: 16px; } }

@media (prefers-reduced-motion: reduce) { .carrusel-riel { scroll-behavior: auto; } }

/* Distintivo de oferta sobre la foto del producto. */
.prod-oferta {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--rojo);
  border-radius: var(--r-pill);
  padding: 6px 12px;
}

/* -------------------------------------------------------------------------- */
/* Sellos de certificacion dentro del bloque de canales                        */
/* -------------------------------------------------------------------------- */

.sellos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.sello {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-carta);
  padding: 16px 20px;
}

.sello .bi { color: var(--rojo); font-size: 1.6rem; }
.sello b { display: block; font-family: var(--display); font-size: 1.02rem; line-height: 1.2; }
.sello span { display: block; color: var(--tinta-60); font-size: .84rem; line-height: 1.4; }

@media (max-width: 860px) { .sellos { grid-template-columns: 1fr; } }

/* La tarjeta de exportacion lleva dos enlaces, uno bajo el otro. */
.mercado .m-link + .m-link { margin-top: 8px; }

/* El video institucional ocupa el lugar de la foto en "Quienes somos". */
.historia-foto iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: var(--r-bloque);
  box-shadow: var(--sombra);
}