/* ==========================================================
   COMPONENTE: ¡SOLO X HORAS!
   DISEÑO CYBER - AZUL + FUCSIA

   Título: Instrument Sans Bold
   Timer: Lato Bold

   Compatible con Contentstack / core-ui-kit
========================================================== */


/* ==========================================================
   01. IMPORTACIÓN DE TIPOGRAFÍAS
   Colocar al inicio del archivo CSS
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@700&family=Lato:wght@400;700;900&display=swap');


/* ==========================================================
   02. CONTENEDOR PRINCIPAL
   Fondo degradado azul y fucsia
========================================================== */

.several-daily-deal-cyber
[class*="SDDstyle__SDDContainer"] {

  position: relative !important;

  width: 100% !important;

  box-sizing: border-box !important;

  background: linear-gradient(
    110deg,
    #0033FF 0%,
    #0033FF 30%,
    #0044FF 43%,
    #A800C8 62%,
    #FF0080 78%,
    #FF0080 100%
  ) !important;

  border-radius: 13px !important;

  padding: 5px !important;

  overflow: hidden !important;
}


/* ==========================================================
   03. CABECERA
   Título a la izquierda / Timer a la derecha
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"] {

  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  flex-wrap: nowrap !important;

  width: 100% !important;

  min-height: 52px !important;

  gap: 12px !important;

  padding: 5px 16px 10px !important;

  margin: 0 !important;

  background: transparent !important;

  box-sizing: border-box !important;

  z-index: 2;
}


/* ==========================================================
   04. ELIMINAR PASTILLA ROJA DEL TÍTULO
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__HighlightTitleContainer"] {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  flex: 0 1 auto !important;

  width: auto !important;

  max-width: none !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  background: transparent !important;

  border: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}


/* ==========================================================
   05. TÍTULO: ¡SOLO X HORAS!
   Tipografía Instrument Sans Bold
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__HighlightTitleContainer"] span {

  color: #FFFFFF !important;

  font-family: 'Instrument Sans', Arial, sans-serif !important;

  font-size: 38px !important;

  font-weight: 700 !important;

  line-height: 1.05 !important;

  letter-spacing: -1px !important;

  text-transform: none !important;

  white-space: nowrap !important;

  text-align: left !important;
}


/* Eliminar espacios de párrafos vacíos */

.several-daily-deal-cyber
[class*="Titlestyle__HighlightTitleContainer"] p:empty {

  display: none !important;
}


/* ==========================================================
   06. CONTENEDOR DEL TIMER
   Alineado al extremo derecho
========================================================== */

.several-daily-deal-cyber
[data-testid="sdd-title-timer"] {

  display: flex !important;

  align-items: center !important;

  justify-content: flex-end !important;

  flex-wrap: nowrap !important;

  flex: 0 0 auto !important;

  width: auto !important;

  min-width: 0 !important;

  gap: 0 !important;

  margin: 0 0 0 auto !important;

  padding: 0 !important;

  background: transparent !important;
}


/* ==========================================================
   07. GRUPOS DEL TIMER
========================================================== */

.several-daily-deal-cyber
[data-testid="sdd-title-timer"]
[class*="Timerstyle__DivWrap"] {

  display: flex !important;

  align-items: center !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* Alineación de dígitos */

.several-daily-deal-cyber
[data-testid="sdd-title-timer"]
[class*="Timerstyle__DigitWrapper"] {

  display: flex !important;

  align-items: center !important;

  gap: 2px !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* ==========================================================
   08. CASILLAS DEL TIMER
   Tipografía Lato Bold
========================================================== */

.several-daily-deal-cyber
[data-testid="sdd-title-timer"]
[class*="Timerstyle__DigitBadge"] {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex: 0 0 auto !important;

  width: 23px !important;

  min-width: 23px !important;

  height: 30px !important;

  padding: 0 !important;

  box-sizing: border-box !important;

  background-color: #FFFFFF !important;

  color: #FF0080 !important;

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

  font-size: 19px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  text-align: center !important;

  border: none !important;

  border-radius: 4px !important;

  box-shadow: none !important;
}


/* ==========================================================
   09. SEPARADORES DEL TIMER
========================================================== */

.several-daily-deal-cyber
[data-testid="sdd-title-timer"]
[class*="Timerstyle__SpanSeparator"] {

  color: #FFFFFF !important;

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

  font-size: 22px !important;

  font-weight: 700 !important;

  line-height: 1 !important;

  margin: 0 3px !important;

  padding: 0 !important;
}


/* ==========================================================
   10. ESTRELLAS DECORATIVAS
   No interfieren con el título ni con el timer
========================================================== */

/* Primera estrella */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::before {

  content: "";

  position: absolute !important;

  width: 65px;
  height: 65px;

  top: -18px;
  left: 35%;

  background: rgba(255, 255, 255, 0.15);

  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  transform: rotate(-15deg);

  pointer-events: none !important;

  z-index: -1;
}


/* Segunda estrella */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::after {

  content: "";

  position: absolute !important;

  width: 48px;
  height: 48px;

  top: -5px;
  left: 59%;

  background: rgba(255, 255, 255, 0.18);

  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  transform: rotate(18deg);

  pointer-events: none !important;

  z-index: -1;
}


/* ==========================================================
   11. CONTENEDOR DE PRODUCTOS
========================================================== */

.several-daily-deal-cyber
[data-testid="sdd-pod-cards-container"] {

  position: relative !important;

  z-index: 2;

  background: transparent !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* ==========================================================
   12. TARJETAS DE PRODUCTOS
========================================================== */

.several-daily-deal-cyber
[data-testid="sdd-pod"] {

  border-radius: 9px !important;

  overflow: hidden !important;
}


/* ==========================================================
   13. TABLET
   Entre 720px y 1023px
========================================================== */

@media (min-width: 720px) and (max-width: 1023px) {

  .several-daily-deal-cyber
  [class*="Titlestyle__HighlightTitleContainer"] span {

    font-size: 28px !important;

    letter-spacing: -0.5px !important;
  }

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"] {

    padding: 5px 10px 9px !important;

    gap: 8px !important;
  }

  .several-daily-deal-cyber
  [data-testid="sdd-title-timer"]
  [class*="Timerstyle__DigitBadge"] {

    width: 19px !important;

    min-width: 19px !important;

    height: 26px !important;

    font-size: 16px !important;
  }

  .several-daily-deal-cyber
  [data-testid="sdd-title-timer"]
  [class*="Timerstyle__SpanSeparator"] {

    font-size: 18px !important;

    margin: 0 2px !important;
  }

}


/* ==========================================================
   14. MOBILE
   Hasta 719.98px
========================================================== */

@media (max-width: 719.98px) {

  /* Contenedor principal */

  .several-daily-deal-cyber
  [class*="SDDstyle__SDDContainer"] {

    padding: 4px !important;

    border-radius: 10px !important;
  }


  /* Cabecera */

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"] {

    min-height: 38px !important;

    padding: 5px 6px 8px !important;

    gap: 5px !important;
  }


  /* Título Instrument Sans */

  .several-daily-deal-cyber
  [class*="Titlestyle__HighlightTitleContainer"] span {

    font-family: 'Instrument Sans', Arial, sans-serif !important;

    font-size: clamp(12px, 3.8vw, 19px) !important;

    font-weight: 700 !important;

    line-height: 1.1 !important;

    letter-spacing: -0.3px !important;
  }


  /* Contenedor del timer */

  .several-daily-deal-cyber
  [data-testid="sdd-title-timer"] {

    gap: 0 !important;
  }


  /* Grupos de dígitos */

  .several-daily-deal-cyber
  [data-testid="sdd-title-timer"]
  [class*="Timerstyle__DigitWrapper"] {

    gap: 1px !important;
  }


  /* Casillas del timer - Lato */

  .several-daily-deal-cyber
  [data-testid="sdd-title-timer"]
  [class*="Timerstyle__DigitBadge"] {

    width: 13px !important;

    min-width: 13px !important;

    height: 21px !important;

    padding: 0 !important;

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

    font-size: 12px !important;

    font-weight: 700 !important;

    border-radius: 3px !important;
  }


  /* Separadores */

  .several-daily-deal-cyber
  [data-testid="sdd-title-timer"]
  [class*="Timerstyle__SpanSeparator"] {

    font-size: 14px !important;

    margin: 0 1px !important;
  }


  /* Ocultar estrellas decorativas */

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::before,
  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::after {

    display: none !important;
  }


  /* Tarjetas */

  .several-daily-deal-cyber
  [data-testid="sdd-pod"] {

    border-radius: 7px !important;
  }

}


/* ==========================================================
   15. ACCESIBILIDAD
========================================================== */

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

  .several-daily-deal-cyber
  [class*="SDDstyle__SDDContainer"] {

    scroll-behavior: auto !important;
  }

}

/* ==========================================================
   SOLO X HORAS
   DECORACIÓN DEFINITIVA: 2 ESTRELLAS + 2 ESFERAS

   Compatible con Contentstack / core-ui-kit
   No requiere modificar HTML ni utilizar JavaScript
========================================================== */


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

.several-daily-deal-cyber
[class*="SDDstyle__SDDContainer"] {

  position: relative !important;

  isolation: isolate;

  overflow: hidden !important;

}


/* ==========================================================
   02. CABECERA
   Las estrellas se incorporan como fondos SVG.
   Esto deja libres ::before y ::after para las esferas.
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"] {

  position: relative !important;

  isolation: isolate;

  overflow: visible !important;

  background-color: transparent !important;

  /* Dos estrellas independientes */

  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%233F6BFF' d='M50 0 L61 35 L98 35 L68 57 L79 91 L50 70 L21 91 L32 57 L2 35 L39 35 Z'/%3E%3C/svg%3E"),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%233F6BFF' d='M50 0 L61 35 L98 35 L68 57 L79 91 L50 70 L21 91 L32 57 L2 35 L39 35 Z'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat, no-repeat !important;

  /* Estrella izquierda / estrella derecha */

  background-size:
    65px 65px,
    75px 75px !important;

  background-position:
    39% -23px,
    66% -8px !important;

}


/* ==========================================================
   03. ESFERA IZQUIERDA
   Azul, ubicada debajo de la primera estrella.
   Se asoma ligeramente sobre las tarjetas.
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::before {

  content: "" !important;

  position: absolute !important;

  display: block !important;

  width: 48px !important;
  height: 48px !important;

  top: 25px !important;
  left: 52% !important;

  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt6e623bcdf0615b5c/6ae43e4d239b74119cd8a3fb/BOLANAVIDAD-1.png") !important;

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

  transform: rotate(-12deg) !important;

  pointer-events: none !important;

  z-index: 0 !important;

}


/* ==========================================================
   04. ESFERA DERECHA
   Azul y plateada, ubicada cerca del borde superior.
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::after {

  content: "" !important;

  position: absolute !important;

  display: block !important;

  width: 46px !important;
  height: 46px !important;

  top: -10px !important;
  left: 70% !important;

  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt539a27d19246af24/6ae43e4d857be179db1d2230/BOLANAVIDAD-2.png") !important;

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

  transform: rotate(12deg) !important;

  pointer-events: none !important;

  z-index: 0 !important;

}


/* ==========================================================
   05. TÍTULO Y TIMER
   Se mantienen por encima de la decoración.
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__HighlightTitleContainer"] {

  position: relative !important;

  z-index: 2 !important;

}


.several-daily-deal-cyber
[data-testid="sdd-title-timer"] {

  position: relative !important;

  z-index: 2 !important;

}


/* ==========================================================
   06. TARJETAS
   Deben quedar por encima de la parte inferior
   de las esferas, tal como en la referencia.
========================================================== */

.several-daily-deal-cyber
[data-testid="sdd-pod-cards-container"] {

  position: relative !important;

  z-index: 3 !important;

}


/* ==========================================================
   07. TABLET
========================================================== */

@media (min-width: 720px) and (max-width: 1023px) {

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"] {

    background-size:
      48px 48px,
      55px 55px !important;

    background-position:
      39% -15px,
      65% -5px !important;

  }


  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::before {

    width: 36px !important;
    height: 36px !important;

    top: 22px !important;
    left: 53% !important;

  }


  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::after {

    width: 35px !important;
    height: 35px !important;

    top: -6px !important;
    left: 71% !important;

  }

}


/* ==========================================================
   08. MOBILE
   Ocultar decoración para priorizar título y timer.
========================================================== */

@media (max-width: 719.98px) {

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"] {

    background-image: none !important;

  }


  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::before,

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::after {

    display: none !important;

  }

}

/* ==========================================================
   SOLO X HORAS
   CORRECCIÓN: ESFERAS CIRCULARES SIN RECORTE
========================================================== */

/* ESFERA IZQUIERDA */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::before {

  /* Eliminar recorte heredado de las estrellas */
  clip-path: none !important;
  -webkit-clip-path: none !important;

  /* Mantener forma original de la imagen */
  border-radius: 0 !important;

  /* Dimensiones */
  width: 48px !important;
  height: 48px !important;

  /* Posición */
  top: 25px !important;
  left: 52% !important;

  /* Imagen original */
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt6e623bcdf0615b5c/6ae43e4d239b74119cd8a3fb/BOLANAVIDAD-1.png") !important;

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

  /* Sin inclinación adicional */
  transform: none !important;

  pointer-events: none !important;
}


/* ESFERA DERECHA */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::after {

  /* Eliminar recorte heredado de las estrellas */
  clip-path: none !important;
  -webkit-clip-path: none !important;

  /* Mantener forma original de la imagen */
  border-radius: 0 !important;

  /* Dimensiones */
  width: 46px !important;
  height: 46px !important;

  /* Posición */
  top: -10px !important;
  left: 70% !important;

  /* Imagen original */
  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt539a27d19246af24/6ae43e4d857be179db1d2230/BOLANAVIDAD-2.png") !important;

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

  /* Sin inclinación adicional */
  transform: none !important;

  pointer-events: none !important;
}


/* ==========================================================
   MOBILE
   Mantener las esferas ocultas
========================================================== */

@media (max-width: 719.98px) {

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::before,

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::after {

    display: none !important;

  }

}

/* ==========================================================
   SOLO X HORAS
   CORRECCIÓN VISUAL: ESTRELLAS GLASS + ESFERAS
========================================================== */


/* ==========================================================
   01. ESTRELLAS CON EFECTO GLASS
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"] {

  background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2391B6FF' fill-opacity='.38' stroke='%23B8D0FF' stroke-opacity='.22' stroke-width='1.5' d='M50 0 L61 35 L98 35 L68 57 L79 91 L50 70 L21 91 L32 57 L2 35 L39 35 Z'/%3E%3C/svg%3E"),

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2391B6FF' fill-opacity='.38' stroke='%23B8D0FF' stroke-opacity='.22' stroke-width='1.5' d='M50 0 L61 35 L98 35 L68 57 L79 91 L50 70 L21 91 L32 57 L2 35 L39 35 Z'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat, no-repeat !important;

  background-size:
    65px 65px,
    75px 75px !important;

  background-position:
    39% -23px,
    66% -8px !important;

}


/* ==========================================================
   02. LIMPIAR ESTILOS HEREDADOS DE LAS ESFERAS
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::before,

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::after {

  /* Eliminar cualquier recorte */
  clip-path: none !important;
  -webkit-clip-path: none !important;

  /* Eliminar posibles fondos heredados */
  background-color: transparent !important;

  /* Eliminar bordes y sombras */
  border: none !important;
  box-shadow: none !important;

  /* Eliminar filtros */
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Mantener transparencia */
  opacity: 1 !important;

  /* Evitar transformaciones */
  transform: none !important;

  /* Evitar interacciones */
  pointer-events: none !important;

}


/* ==========================================================
   03. ESFERA IZQUIERDA
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::before {

  content: "" !important;

  position: absolute !important;

  display: block !important;

  width: 48px !important;
  height: 48px !important;

  top: 25px !important;
  left: 52% !important;

  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt6e623bcdf0615b5c/6ae43e4d239b74119cd8a3fb/BOLANAVIDAD-1.png") !important;

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

  z-index: 0 !important;

}


/* ==========================================================
   04. ESFERA DERECHA
========================================================== */

.several-daily-deal-cyber
[class*="Titlestyle__SDDTitleContainer"]::after {

  content: "" !important;

  position: absolute !important;

  display: block !important;

  width: 46px !important;
  height: 46px !important;

  top: -10px !important;
  left: 70% !important;

  background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt539a27d19246af24/6ae43e4d857be179db1d2230/BOLANAVIDAD-2.png") !important;

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

  z-index: 0 !important;

}


/* ==========================================================
   05. MOBILE
========================================================== */

@media (max-width: 719.98px) {

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"] {

    background-image: none !important;

  }

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::before,

  .several-daily-deal-cyber
  [class*="Titlestyle__SDDTitleContainer"]::after {

    display: none !important;

  }

}