@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto Serif:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300..700&display=swap');

html,body{
  height:100%;
}
body{
  margin:0px;
  font:400 16px/22px "Noto Serif","Arial";
  background: rgb(250,62,232);
  background: linear-gradient(157deg, rgba(250,62,232,1) 0%, rgba(115,19,84,1) 100%);
    height: 100vh;
  background-attachment: fixed;

}

:root{
  --rojo:#df0000;
  --gris:#9a9a9a;
}

a{text-decoration:none;color:inherit;
-webkit-transition: all .3s;    -moz-transition: all .3s;    -o-transition: all .3s;    transition: all .3s;
}
.underline{text-decoration:underline;}

.borde{border:1px #df0000 solid !important;box-sizing:border-box;}
.bco{color:#ffffff;}
.ngo{color:#000000;}
.rojo{color:var(--rojo);}

.fondobco{background:#ffffff !important;}
.fondongo{background:#000000;}

.extrabold{font-weight:700;}

.tabla_principal{width:100%;display:inline-block;text-align:center;margin:0px;}
.contenidos{width:98%;max-width:1200px;text-align:center;display:inline-block;float:none;box-sizing:border-box; }
.cuerpo800{width:100%;max-width:800px; }

.lienzo{width:90%;max-width: 500px;display: inline-block; float: none;}

.renglon{width:100%;display:inline-block;box-sizing:border-box; }
  .renglonOdd:nth-child(odd){background-color:#ffffff;}/* alternacolores entre filas*/
  .renglonOdd:nth-child(even){background-color:#f2f2f2;}
.btn{display: inline-block;
  -webkit-transition: all .3s;    -moz-transition: all .3s;    -o-transition: all .3s;    transition: all .3s;
}
.btn_enviar{background:#ffffff;color:blue; padding:5px 25px; display:inline-block; 
  border:1px var(--main) solid;
  -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}


.isoTipo{width:90px;margin-top:12%;}
.logotipo{width:100px;margin:5% 0;}
.elTitulo{font:400 14px/16px "Noto Sans";color: #ffffff;margin:4% 0;}
.textoPie{font:400 14px/18px "Noto Sans";color: #ffffff;margin:5% 0;}
.textoDir{font:400 12px/24px "Noto Sans";color: #ffffff;margin:3% 0;}
.textoDir2{font:400 10px/20px "Noto Sans";color: #ffffff;margin:2% 0;}

.redes {display: inline-block; margin:5% 0;}
.redes img{width:30px;display: inline-block; margin:5px 5px;}

#countdown{width:80%;display: inline-block;}
#countdown div{width:20%;margin:0px 2%; float: left; padding:15px 5px;box-sizing: border-box;
}
#countdown span{width:100%;display: inline-block; font:300 30px/40px "Akshar"; color:#ffffff;}
#countdown .text{width:100%; font:normal 9px/12px "Noto Sans", "Arial"; text-align:center;} 

#relogCountDown{display:inline-block;float:none;width:100%;}



.elProgress{margin:13% 0;}





progress {border: none;border-radius:10px;width:80%;height:19px;animation: prog 1s linear;position: relative;
  overflow: hidden;}

::-webkit-progress-bar-value{background: rgb(164,95,235);
background: linear-gradient(157deg, rgba(164,95,235,1) 0%, rgba(164,95,235,1) 60%, rgba(114,64,172,1) 80%);
border-radius:6px;}

::-webkit-progress-value{background: rgb(164,95,235);
background: linear-gradient(157deg, rgba(164,95,235,1) 0%, rgba(164,95,235,1) 60%, rgba(114,64,172,1) 80%);
border-radius:6px;}
}
::-moz-progress-bar {
background: rgb(164,95,235);
background: linear-gradient(157deg, rgba(164,95,235,1) 0%, rgba(164,95,235,1) 60%, rgba(114,64,172,1) 80%);
border-radius:6px;}

/* Add shine effect */
progress::after {content: '';position: absolute;top: 0;left: -100%;width: 50%;height: 80%;
  background: linear-gradient(90deg, 
                  rgba(255,255,255,0) 0%, 
                  rgba(255,255,255,0.4) 50%, 
                  rgba(255,255,255,0) 100%);animation: shine 1.5s infinite;}

@keyframes shine {0% { left: -100%; }100% { left: 200%; }}
@keyframes prog {0% {width: 0%; background-color: #f1f1f1;}100% {width: 80%;}}









/* Base styles for the icon */
.isoTipo {
  position: relative;
  animation: bellAnimation 4s ease infinite;
  transform-origin: center center; /* Makes it swing like a bell */
}

/* Keyframes for the bell animation */
@keyframes bellAnimation {
  /* Rest state for 3 seconds */
  0%, 25%, 100% {
    transform: rotate(0) scale(1);
  }
  
  /* Quick shake to the right */
  26% {
    transform: rotate(10deg) scale(1.1);
  }
  
  /* Quick shake to the left */
  28% {
    transform: rotate(-8deg) scale(1.1);
  }
  
  /* Quick shake to the right */
  30% {
    transform: rotate(6deg) scale(1.1);
  }
  
  /* Quick shake to the left */
  32% {
    transform: rotate(-4deg) scale(1.1);
  }
  
  /* Quick shake to the right */
  34% {
    transform: rotate(2deg) scale(1.1);
  }
  
  /* Return to rest state */
  36% {
    transform: rotate(0) scale(1.05);
  }
  
  40% {
    transform: rotate(0) scale(1.5);
  }
}