/* ==========================================================
   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__futon {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/bltb0330ea0e33c4e27/6ae9ffeccc7e9f6279cde9fd/BE-DKP-CUPONCW-FUTON-MARTES.png");
}

.cupones-cyber__taza {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt51334b73b15cd529/6ae9ffec9ce7610cd5feca22/BE-DKP-CUPONCW-TAZA-MARTES.png");
}

.cupones-cyber__rascador {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/bltf0587aa36db1a17f/6ae9ffecca275758bb2bb088/BE-DKP-BE-DKP-CUPONCW-RASCADOR-MARTES.png");
}

.cupones-cyber__herramienta {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/bltc9f85262678ba29c/6ae9ffebb05ce7f72616e75b/BE-DKP-CUPONCW-HERRAMIENTAS-MARTES.png");
}

.cupones-cyber__refri {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt213d5250a1065c7b/6ae9ffead194d6412dd42d51/BE-DKP-CUPONCW-REFRI-MARTES.png");
}

.cupones-cyber__papel {
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt9eab1b45c4fab9db/6ae9ffea752ef58070d98783/BE-DKP-CUPONCW-PAPEL-MARTES.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;
  }

}