/*ESTILOS HUINCHA*/
.huincha{
  background-color:#e2ff3c !important ;
  /* background-color:gray !important ; */

}

/* POP UP CYBER */

.precio-regular-popup{
  font-size: large;
  text-decoration: line-through;
  /* color: #ff1818; */
  color:#04381c;
  font-weight: 500;
  margin: 0;
  display: block;
}
.precio-promo-popup{
  font-size: xx-large;
  font-weight: bolder;
  /* color: #00d879; */
  color: white;
  margin: 0;
    display: block;
}

/* Estilos generales */
/* Aplicar la fuente Ubuntu a todo el pop-up */
.popup {
  font-family: 'Ubuntu', sans-serif;
}

/* O aplicarla solo a elementos específicos */
.popup-content h1, .popup-content p, .countdown, .cta-btn {
  font-family: 'Ubuntu', sans-serif;
}

/* Pop-up */
.popup {
position: fixed;
top: 0;
right: -100%; /* Inicia fuera de la pantalla */
width: 500px; /* Ancho para desktop */
height: auto;
/* background-color: white; */
background-image: url(https://www.pcfactory.com.pe/public/landingpage/img/Features/fondo-nav25-1.png);
/* COLORES CYBERDAYS */
/* background: linear-gradient(180deg,rgba(22, 61, 217, 1) 0%, rgba(100, 59, 189, 1) 50%, rgba(177, 43, 145, 1) 100%); */
/* background: linear-gradient(67deg, rgb(0 159 84) 0%, rgb(0 136 118) 50%, rgb(0 50 86) 100%); */
/* background: linear-gradient(360deg, rgb(3 95 85) 14%, rgb(8 37 43) 48%, rgb(0 0 0) 100%); */
background-size:cover ;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.3);
transition: right 0.5s ease-out;
z-index: 1000;
border-radius: 10px;
}

.popup.active {
 right: 0;  
 /* Desliza hacia la izquierda pop up */

}

/* Botón de cierre */
.close-btn {
position: absolute;
top: 10px;
left: 10px;
background-color: white;
color: black;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 16px;
cursor: pointer;
z-index: 15;
}

/* Contenido del pop-up */
.popup-content {
padding: 5% 5%;
text-align: center;
/* border: solid  #43d87e 10px;  */
/* border: solid 10px; 
border-image-slice: 1;
border-image-source: linear-gradient(to left, #57317D, #F15753); */
/* background-color: rgba(255, 255, 255, 0.25); */
border-radius: 10px;
border:solid 1.5px #aba65d;
}
.popup-content img{
  max-width: 55%;
}

.popup-content-titulo {
  font-size: xx-large;
color: white;
margin-bottom: 10px;
display: block;
font-weight: bold;
font-family: 'Ubuntu', sans-serif;

}

.popup-content h1 {
  font-size: xx-large;
color: white;
margin-bottom: 10px;
}

.popup-content p {
font-size: 14px;
color: #FFFFFF;
margin-bottom: 20px;
font-weight: bold;
}

.popup-image {
width: 45%;
height: auto;
margin-top: 10px;
border-radius: 13px;
margin-bottom: 10px;
}

/* Countdown */
/* Estilos para el reloj */
.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  color: black;
  border-radius: 10px;
  font-size: 24px;
  margin-bottom: 20px;
  width: 50%;
  margin: 5% 25%;
}

.time-section {
  position: relative;
  width: 60px; /* Ancho fijo para cada sección */
  height: 48px; /* Alto fijo para cada sección */
  perspective: 200px; /* Perspectiva para el efecto 3D */
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  color: #04381c;
}

.top, .bottom {
  position: absolute;
  width: 100%;
  height: 50%;
  overflow: hidden; /* Oculta el desbordamiento del número */
  background-color: white;
}

.top {
  top: 25%;
  transform-origin: bottom;
  border-bottom: 1px solid #000;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); /* Recorta la mitad superior */
}

.bottom {
  bottom: 25%;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); /* Recorta la mitad inferior */
}

/* Contenedor interno para el número */
.number {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
}

/* Ajustar la posición del número para recortar */
.top .number {
  top: 0; /* Alinea el número en la parte superior */
}

.bottom .number {
  bottom: 0; /* Alinea el número en la parte inferior */
}

/* Animación de caída */
@keyframes flip {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

/* .top.flip {
  animation: flip 0.5s ease-in-out;
} */
/* Botón de CTA */
.cta-btn {
display: inline-block;
/* background-color: #43d87e; */
/* background: linear-gradient(90deg,rgba(22, 61, 217, 1) 0%, rgba(100, 59, 189, 1) 50%, rgba(177, 43, 145, 1) 100%); */
background: linear-gradient(90deg, rgb(255, 255, 255) 100%);
color: #04381c;
font-weight: 900;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s ease;
font-size: x-large;
box-shadow: 5px 5px 1px -2px #faf882;
}

.cta-btn:hover {
background-color: #6affa8; /* Hover más claro */
}

/* Estilos para mobile */
@media (max-width: 768px) {
.popup {
  width: 70%; /* 70% del ancho en mobile */
}
.popup-content {
padding: 5% 5%;
/* display: none; */
}
}

/* Estilos para el reloj */
#countdown {
  font-size:2.6rem;
  font-weight: bold;
  color: #000000;
  margin-top: 20px;
}

.tech-loader-panel {
  text-align: center;
  padding: 20px;
  color: white;
}

.tech-loader-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  background: linear-gradient(90deg, #ffffff, #cccccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glowText 2s ease-in-out infinite alternate;
}

@keyframes glowText {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

.tech-loader-img {
  width: 180px;
  height: 120px;
  background-color: #d1d1d1;
  border-radius: 12px;
  margin: 0 auto 20px;
  position: relative;
  overflow: hidden;
}

.skeleton-tech::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmerLoader 1.5s infinite;
}

@keyframes shimmerLoader {
  100% { left: 100%; }
}

.tech-loader-text {
  height: 16px;
  width: 60%;
  background-color: #e0e0e0;
  border-radius: 8px;
  margin: 10px auto;
  position: relative;
  overflow: hidden;
}

.tech-loader-text.short {
  width: 40%;
}

.shimmer-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmerLoader 1.5s infinite;
}

.tech-loader-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.tech-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: white;
  opacity: 0.6;
}

.pulse {
  animation: pulseIcon 1.2s infinite ease-in-out;
}

.delay-1 {
  animation-delay: 0.2s;
}
.delay-2 {
  animation-delay: 0.4s;
}

@keyframes pulseIcon {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
}

.tech-spinner {
  margin: 20px auto 0;
  border: 5px solid rgba(255,255,255,0.2);
  border-top: 5px solid #ffffff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spinLoader 1s linear infinite;
}

@keyframes spinLoader {
  to { transform: rotate(360deg); }
}