/* POP UP CYBER */

.precio-regular-popup{
  font-size: large;
  text-decoration: line-through;
  color: #7a7a7a;
  font-weight: 500;
  margin: 0;
}
.precio-promo-popup{
  font-size: xx-large;
  font-weight: bolder;
  /* color: #00d879; */
  color: black;
  margin: 0;
}

/* 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/cyber/img/Fondo-popup.jpg);
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: black;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 16px;
cursor: pointer;
}

/* 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.35);
border-radius: 10px;
}

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

.popup-content p {
font-size: 14px;
color: black;
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: black;
  color: white;
  border-radius: 10px;
  font-size: 24px;
  margin-bottom: 20px;
  width: 50%;
  margin: 5% 25%;
}

.time-section {
  position: relative;
  width: 50px; /* Ancho fijo para cada sección */
  height: 50px; /* 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;
}

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

.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(67deg,rgba(241, 87, 83, 1) 0%, rgba(128, 70, 92, 1) 50%, rgba(87, 49, 125, 1) 100%);
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s ease;
font-size: x-large;
}

.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: 10% 5%;
}
}