/* ==========================================================
   CUPONES CYBER WOW V1
   SODIMAC - CONTENTSTACK

   - 6 tarjetas desktop
   - Carrusel tablet y mobile
   - CTA copiar con hover rosa
   - CTA producto con hover pill blanco
   - Tipografía Lato
========================================================== */


/* ==========================================================
   01. CONTENEDOR
========================================================== */

.cupones-cyber {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 14px;

  width: 100%;
  max-width: 100%;

  padding: 12px 16px;
  margin: 0 auto;

  box-sizing: border-box;
}

.cupones-cyber *,
.cupones-cyber *::before,
.cupones-cyber *::after {
  box-sizing: border-box;
}


/* ==========================================================
   02. TARJETAS
========================================================== */

.cupones-cyber__card {
  position: relative;

  width: 100%;
  min-width: 0;

  aspect-ratio: 280 / 480;

  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  font-family: 'Lato', Arial, sans-serif;

  isolation: isolate;
}


/* ==========================================================
   03. URLS DE IMÁGENES
   REEMPLAZAR POR URLS DE CONTENTSTACK
========================================================== */

.cupones-cyber__alfombra {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt57626e10a1dbd7f7/6ae8d64b6db18fa07d14fe31/BE-DKP-CUPONCW-ALFOMBRA-LUNES.png");
}

.cupones-cyber__sofa {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt14101900348983df/6ae8d64c4460c438c35cbe79/BE-DKP-CUPONCW-SOFA-LUNES.png");
}

.cupones-cyber__olla {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt57f16aaf58bf8cce/6ae8d64c4ea2fddbb92f4300/BE-DKP-BE-DKP-CUPONCW-OLLAS-LUNES-W17.png");
}

.cupones-cyber__gato {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt61ca58909aa8250e/6ae8d64bf59c3fe4afce7eee/BE-DKP-CUPONCW-GATO-LUNES.png");
}

.cupones-cyber__herramienta {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt4d9de5763c8be810/6ae8d64c687685729cd70e7f/BE-DKP-CUPONCW-HERRAMIENTA-LUNES.png");
}

.cupones-cyber__televisor {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/bltb713e316bd5286d8/6ae8d64c71d08765df0045f7/BE-DKP-CUPONCW-TVS-LUNES.png");
}


/* ==========================================================
   04. ÁREA CLICABLE DE LA IMAGEN
========================================================== */

.cupones-cyber__imagen {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  text-decoration: none;
}


/* ==========================================================
   05. CTA COPIAR CÓDIGO
========================================================== */

.cupones-cyber__copiar {
  position: absolute;

  left: 50%;
  top: 73%;

  transform: translateX(-50%);

  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 62%;

  padding: 7px 9px;

  background-color: transparent;

  border: 1px solid #FFFFFF;
  border-radius: 6px;

  color: #FFFFFF;

  font-family: 'Lato', Arial, sans-serif;
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 700;
  line-height: 1.15;

  text-decoration: none;
  text-align: center;
  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.cupones-cyber__copiar::before {
  content: "";

  width: 13px;
  height: 13px;

  flex: 0 0 13px;

  margin-right: 5px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E");

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}


/* HOVER ROSA */

.cupones-cyber__copiar:hover {
  background-color: #FF0071;
  border-color: #FF0071;

  color: #FFFFFF;
  text-decoration: none;
}


/* ESTADO COPIADO */

.cupones-cyber__copiar.is-copiado {
  background-color: #FF0071;
  border-color: #FF0071;
  color: #FFFFFF;
}


/* ==========================================================
   06. CTA VER PRODUCTO
========================================================== */

.cupones-cyber__producto {
  position: absolute;

  left: 50%;
  top: 85%;

  transform: translateX(-50%);

  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 7px 12px;

  background-color: transparent;

  border-radius: 999px;

  color: #FFFFFF;

  font-family: 'Lato', Arial, sans-serif;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
  line-height: 1.15;

  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;

  white-space: nowrap;

  transition:
    background-color .2s ease,
    color .2s ease;
}


/* HOVER PILL BLANCO */

.cupones-cyber__producto:hover {
  background-color: #FFFFFF;

  color: #0531E5;

  text-decoration: none;
}


/* ==========================================================
   07. ACCESIBILIDAD
========================================================== */

.cupones-cyber__copiar:focus-visible,
.cupones-cyber__producto:focus-visible,
.cupones-cyber__imagen:focus-visible {
  outline: 2px solid #FF0071;
  outline-offset: 3px;
}


/* ==========================================================
   08. TABLET
   CARRUSEL HORIZONTAL
========================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  .cupones-cyber {
    display: flex;
    flex-wrap: nowrap;

    gap: 14px;

    padding: 12px 16px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cupones-cyber::-webkit-scrollbar {
    display: none;
  }

  .cupones-cyber__card {
    flex: 0 0 250px;

    width: 250px;
    min-width: 250px;

    scroll-snap-align: start;
  }

  .cupones-cyber__copiar {
    font-size: 13px;
  }

  .cupones-cyber__producto {
    font-size: 12px;
  }
}


/* ==========================================================
   09. MOBILE
   CARRUSEL HORIZONTAL
========================================================== */

@media (max-width: 767px) {

  .cupones-cyber {
    display: flex;
    flex-wrap: nowrap;

    gap: 12px;

    width: 100%;
    max-width: 100%;

    padding: 12px 16px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cupones-cyber::-webkit-scrollbar {
    display: none;
  }

  .cupones-cyber__card {
    flex: 0 0 230px;

    width: 230px;
    min-width: 230px;

    scroll-snap-align: start;
  }

  .cupones-cyber__copiar {
    font-size: 12px;
  }

  .cupones-cyber__producto {
    font-size: 12px;
  }
}


/* ==========================================================
   10. MOBILE PEQUEÑO
========================================================== */

@media (max-width: 360px) {

  .cupones-cyber {
    gap: 10px;
    padding: 10px 12px;
  }

  .cupones-cyber__card {
    flex-basis: 210px;

    width: 210px;
    min-width: 210px;
  }

  .cupones-cyber__copiar {
    font-size: 11px;
  }
}


/* ==========================================================
   11. MOVIMIENTO REDUCIDO
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .cupones-cyber__copiar,
  .cupones-cyber__producto {
    transition: none;
  }

}