/*
 * Banners de promociones de la home ([aws_promos], mu-aws-promos.php), entre
 * "Shop by wine type" y Packs. 1 banner = todo el ancho, 2 = mitad, 3 = tercio.
 * El container de Elementor no tiene padding: el aire lo pone la seccion, asi
 * sin banners no queda ningun hueco. Ancho alineado con las grillas
 * (1520 + 20 + 20). Los selectores llevan .aws-promos delante para ganarle al
 * kit de Elementor, que pone color y tipografia a los links.
 */
.aws-promos-sec .elementor-widget-shortcode,
.aws-promos-sec .elementor-shortcode { width: 100%; }

.aws-promos {
  --aws-promo-alto: 340px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(var(--aws-promo-cols, 1), minmax(0, 1fr));
  gap: 20px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 56px 20px 0;
  font-family: Manrope, sans-serif;
}
.aws-promos--2 { --aws-promo-cols: 2; --aws-promo-alto: 320px; }
.aws-promos--3 { --aws-promo-cols: 3; --aws-promo-alto: 300px; }

.aws-promos .aws-promo {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: var(--aws-promo-alto);
  overflow: hidden;
  border-radius: 10px;
  background: #141414;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.aws-promos .aws-promo-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  transition: transform .6s ease;
}
/* Velo de abajo hacia arriba: el texto va abajo a la izquierda, sobre
   cualquier foto. Los banners de solo foto no lo llevan. */
.aws-promos .aws-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(10,10,22,.78) 0%, rgba(10,10,22,.45) 40%, rgba(10,10,22,0) 75%);
}
.aws-promos .aws-promo--solo-foto::before { content: none; }

.aws-promos .aws-promo-contenido {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 640px;
  padding: 28px 30px;
}
.aws-promos .aws-promo-titulo {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.3px;
  color: #fff;
}
.aws-promos--3 .aws-promo-titulo { font-size: 24px; }
.aws-promos .aws-promo-texto {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.aws-promos .aws-promo-boton {
  display: inline-block;
  margin-top: 8px;
  padding: 11px 20px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  background: #2A2A8C;
  border: 2px solid #fff;
  border-radius: 3px;
  transition: .3s;
}

a.aws-promo:hover .aws-promo-foto { transform: scale(1.04); }
a.aws-promo:hover .aws-promo-boton,
a.aws-promo:focus-visible .aws-promo-boton { color: #141414; background: #fff; }
.aws-promos a.aws-promo:focus-visible { outline: 3px solid #2A2A8C; outline-offset: 3px; }

/* Aviso que solo se ve dentro del editor de Elementor. */
.aws-promos-editor { position: relative; min-height: 60px; }
.aws-promos-aviso {
  position: relative;
  z-index: 5;
  width: fit-content;
  margin: 16px auto 0;
  padding: 8px 14px;
  font: 600 13px/1.4 Manrope, sans-serif;
  color: #141414;
  background: #fff;
  border: 1px solid #e2ded8;
  border-radius: 4px;
}
.aws-promos-aviso a { color: #2A2A8C; }

@media (max-width: 1024px) {
  .aws-promos { --aws-promo-alto: 280px; gap: 16px; }
  .aws-promos--3 { --aws-promo-alto: 260px; }
  .aws-promos .aws-promo-contenido { padding: 22px 22px; }
  .aws-promos .aws-promo-titulo { font-size: 26px; }
  .aws-promos--3 .aws-promo-titulo { font-size: 20px; }
  /* En tablet el texto de tres columnas no entra: queda el titulo y el boton. */
  .aws-promos--3 .aws-promo-texto { display: none; }
}
@media (max-width: 767px) {
  .aws-promos,
  .aws-promos--2,
  .aws-promos--3 { --aws-promo-cols: 1; --aws-promo-alto: 220px; gap: 12px; padding: 36px 14px 0; }
  .aws-promos .aws-promo-contenido { padding: 18px 18px; gap: 6px; }
  .aws-promos .aws-promo-titulo,
  .aws-promos--3 .aws-promo-titulo { font-size: 22px; }
  .aws-promos--3 .aws-promo-texto { display: block; }
  .aws-promos .aws-promo-texto { font-size: 13px; }
  .aws-promos .aws-promo-boton { margin-top: 4px; padding: 9px 16px; font-size: 11px; }
}
/* Puntos del carrusel de mobile: fuera de mobile no existen. */
.aws-promos-puntos { display: none; }

/* Mobile con dos o tres banners: carrusel deslizable (2026-10-21). Cada
   banner ocupa el 86% y el siguiente asoma por el costado; el scroll frena
   en cada uno (scroll-snap). Sin barra de scroll: los puntos de abajo dicen
   en cual se esta. */
@media (max-width: 767px) {
  .aws-promos--2,
  .aws-promos--3 {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .aws-promos--2::-webkit-scrollbar,
  .aws-promos--3::-webkit-scrollbar { display: none; }
  .aws-promos--2 .aws-promo,
  .aws-promos--3 .aws-promo {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .aws-promos-puntos.aws-promos-js {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
  }
  .aws-promos-puntos button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d6d1c9;
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
  }
  .aws-promos-puntos button.is-activo { width: 20px; background: #2A2A8C; }
}

@media (prefers-reduced-motion: reduce) {
  .aws-promos-puntos button { transition: none; }
  .aws-promos .aws-promo-foto,
  .aws-promos .aws-promo-boton { transition: none; }
  a.aws-promo:hover .aws-promo-foto { transform: none; }
}