body {
  background-color: #ffffff !important;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  right: 0;
  left: 0;
  color: white;
}

*, ::after, ::before {
  box-sizing:border-box ;
}

.container {
text-align: center;
position: relative;
}

.test-header {
background: linear-gradient(90deg, #6e0303, #230505) !important;
color: white;
padding: 10px;
border-radius: 10px 10px 0 0 ;
width: 40%;         
margin: 0 auto;     
text-align: center; 
}

#nameSection {
  width: 40%;
  padding: 20px 40px 0px 40px;
  background-color: #ffffff;
  border: 1px solid #640440 !important;
  margin: 20px auto;
  text-align: center;
  top: -21px;
  position: relative;
}

.bo{
border: 1px solid #e3e3e3 !important;  
}

.underline {
width: 70%; /* Mismo ancho que el input */
height: 4px;
background: linear-gradient(to right, #640440, #230517); /* Degradado de la línea */
margin-top: 4px; /* Espacio entre el input y la línea */
margin: 0 auto !important;  
}

input{
border-radius: 7%;
display: block !important;
width: 70% !important;
margin: 0 auto !important;      
}

.tt{
top:-12px;
position: relative;
font-weight: bold;
font-size: 14px;
color: #000000;
}

#resy{
left: auto !important;
align-items: center !important;
position: relative !important;
}

.bor{
  border: 1px solid #e3e3e3 !important;
}

.emailSection {
  width: 40% ;
  padding: 20px 40px 0px 40px;
  margin: 20px auto;
  background-color:#ffffff;
  border: 1px solid #640440 !important;
  top: -21px;
  position: relative;
  text-align: center;
}

.test-box {
  width: 40% !important;
  padding: 20px 40px 10px 40px;
  background-color:#ffffff;
  margin: 20px auto;
  text-align: center;
  top: -21px;
  position: relative;
  border: 1px solid #640440 !important;
  color: #230517;
}

.test-box-expanded {
width: 700px !important;
}

.test-header-expanded {
width: 700px !important;
}

.test-container, .test-container1, .test-container2 {
width: 40%;
margin: 20px auto;
padding: 20px 40px 0px 40px;
background-color: #ffffff;
top: -21px;
position: relative;
border: 1px solid #640440 !important;
text-align: center;

}

.test-container3, .test-container4, .test-container5 {
width: 40%;
margin: 20px auto;
padding: 20px 40px 0px 40px;
background-color: #ffffff;
top: -21px;
position: relative;
border: 1px solid #640440 !important;
text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 600px;
  
}

ul li{
  display: flex;
    align-items: center;
    margin-bottom: 15px;
}

ul li h5{
  font-size: 20px;
    color: black;
    display: flex;
    align-items: center;
    
}

/* From Uiverse.io by abrahamcalsin */ 
.dot-spinner, .check-ic, .check-icn {
--uib-size: 2.8rem;
--uib-speed: .9s;
--uib-color: #000000;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
height: var(--uib-size);
width: var(--uib-size);
}

.dot-spinner__dot {
position: absolute;
top: 0;
left: -10px;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
width: 100%;
}

.dot-spinner__dot::before {
content: '';
height: 20%;
width: 20%;
border-radius: 50%;
background-color: var(--uib-color);
transform: scale(0);
opacity: 0.5;
animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
}

.dot-spinner__dot:nth-child(2) {
transform: rotate(40deg);
}

.dot-spinner__dot:nth-child(2)::before {
animation-delay: calc(var(--uib-speed) * -0.875);
}

.dot-spinner__dot:nth-child(3) {
transform: rotate(90deg);
}

.dot-spinner__dot:nth-child(3)::before {
animation-delay: calc(var(--uib-speed) * -0.75);
}

.dot-spinner__dot:nth-child(4) {
transform: rotate(135deg);
}

.dot-spinner__dot:nth-child(4)::before {
animation-delay: calc(var(--uib-speed) * -0.625);
}

.dot-spinner__dot:nth-child(5) {
transform: rotate(180deg);
}

.dot-spinner__dot:nth-child(5)::before {
animation-delay: calc(var(--uib-speed) * -0.5);
}

.dot-spinner__dot:nth-child(6) {
transform: rotate(225deg);
}

.dot-spinner__dot:nth-child(6)::before {
animation-delay: calc(var(--uib-speed) * -0.375);
}

.dot-spinner__dot:nth-child(7) {
transform: rotate(270deg);
}

.dot-spinner__dot:nth-child(7)::before {
animation-delay: calc(var(--uib-speed) * -0.25);
}

.dot-spinner__dot:nth-child(8) {
transform: rotate(315deg);
}

.dot-spinner__dot:nth-child(8)::before {
animation-delay: calc(var(--uib-speed) * -0.125);
}

@keyframes pulse0112 {
0%,
100% {
  transform: scale(0);
  opacity: 0.5;
}

50% {
  transform: scale(1);
  opacity: 1;
}
}

.welcome-msg{
  border: 1px solid #640440;
  display: flex;
  padding: 10px;
  justify-content: center;
  color: #230517;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
}

#welcome-m{
  border: 1px solid white;
  background: linear-gradient(90deg, #6e0303, #230505) !important;
  color: white !important;
  width: 50%;
  align-items: center;
  position: relative;
  border-radius: 7%;
  margin: 20px auto;
}

#welcome-mu{
border: 1px solid white;
background-color: #640440 !important;
color: white !important;
width: 50%;
align-items: center;
position: relative;
margin: 20px auto;
padding: 15px;
}

#welcome-muy{
border: 1px solid white;
background: linear-gradient(90deg, #6e0303, #230505) !important;
color: white !important;
width: 50%;
align-items: center;
position: relative;
border-radius: 7%;
margin: 20px auto;
padding: 15px;
}

#welcome-muyu{
border: 1px solid white;
background: linear-gradient(90deg, #6e0303, #230505) !important;
color: white !important;
width: 80%;
align-items: center;
position: relative;
margin: 20px auto;
}

.no{
background-color: #e5e5e5 !important;
color: #000001 !important;
}

/* Estilo del ícono */
.check-icon {
  background-color: #640440;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  top: 5px;
  position: relative;
}

.check-icon svg {
  fill: white;
}

.check-ic img {
width: 100%; /* Ajusta el tamaño del ícono de verificación al contenedor */
height: 100%;
}

.check-icn img {

height: 100%;
}

.check-ico {
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
top: 5px;
position: relative;
}

.check-ico img{
width: 40px;
height: 40px;
left: -7px;
position: relative;
top: -10px;
}

.check-icono {
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
position: relative;
}

.check-icono img{
width: 40px;
height: 40px;
left: -7px;
position: relative;
}

#endSection{
  width: 40%;
  padding: 20px 40px 0px 40px;
  background-color: #ffffff;
  color: white !important;
  border-radius: 10px;
  border: 1px solid #640440 !important;
  margin: 20px auto;
  text-align: center;
  top: -21px;
  position: relative;
}

#calSection{
width: 40% !important;
padding: 40px;
background-color: #ffffff;
color: white !important;
border-radius: 10px;
margin: 20px auto;
text-align: center;
top: -21px;
position: relative;
}

#cSection{
width: 40% !important;
background-color: #ffffff !important;
padding: 40px;
border-radius: 10px;
color: rgb(0, 0, 0) !important;
margin: 20px auto;
border: 1px solid #640440 !important;
top: -21px;
position: relative;
text-align: center;
}

.mes1{
width: 40% !important;
background-color: #ffffff !important;
padding: 40px;
border-radius: 10px;
color: rgb(0, 0, 0) !important;
margin: 20px auto;
border: 1px solid #640440 !important;
top: -21px;
position: relative;
text-align: center;
}

#cartSection{
width: 40% !important;
background-color: #ffffff !important;
padding: 40px;
border-radius: 10px;
color: rgb(0, 0, 0) !important;
margin: 20px auto;
border: 1px solid #640440 !important;
top: -21px;
position: relative;
text-align: center;
}

.gif-color {
filter: hue-rotate(90deg); /* Cambia el tono del GIF */
}

#planepa{
width: 40% !important;
background-color: #fff;
padding: 20px 40px 10px 40px;
border-radius: 10px;
color: white !important;
margin: 20px auto;
border: 1px solid #640440 !important;
top: -21px;
position: relative;
text-align: center;
}

#planepa1{
width: 40% !important;
background-color: #fff;
padding: 20px 40px 10px 40px;
border-radius: 10px;
color: white !important;
margin: 20px auto;
border: 1px solid #640440 !important;
top: -21px;
position: relative;
text-align: center;
}

.enc {
font-size: 24px;
color: #640440 !important; 
margin-bottom: 20px;
}

.enc2 {
font-size: 24px;
color: #000000 !important; 
margin-bottom: 20px;
}

.description {
font-size: 19px;
color: #333;
margin-bottom: 10px;
line-height: 1.5;
}

.motivational {
font-size: 19px;
color: #333;
margin-bottom: 30px;
line-height: 1.5;
}

strong {
color: #961163; /* Color para las palabras resaltadas */
}

.cta-button {
  background: linear-gradient(90deg, #6e0303, #230505) !important;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
font-weight: bold !important;
}

.cta-button:hover {
background-color: #d61362; /* Color de fondo al hacer hover */
}

.ct-button {
  background: linear-gradient(90deg, #6e0303, #230505) !important;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background-color 0.3s ease;
font-weight: bold !important;
}

.ct-button:hover {
background-color: #d61362; /* Color de fondo al hacer hover */
}

h4{
  color: #640440 !important;
}

.hidden {
display: none;
visibility: hidden;
}

button {
  margin: 10px;
  padding: 10px 20px;
}

#feminicideMessage img {
  display: block;
  margin: 0 auto;
  position: relative;
}

#feminicideMessage {
  color: #640440;
  width: 40%;;
  padding: 20px 40px 0px 40px;
  background-color:#ffffff;
  border: 1px solid #640440 !important;
  margin: 20px auto;
  text-align: center;
  top: -21px;
  position: relative;
  border: 1 solid ;
}

.email{
top: 5px !important;
position: relative;
}

.whatsapp{
bottom: 5px !important;
position: relative;
}

/*Botones*/
.btn {
  background: linear-gradient(90deg, #6e0303, #230505) !important;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  margin: 10px;
  font-size: 25px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
  cursor: pointer;
  position: relative; /* Para posicionar el emoji */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold !important;
}

.btn::after{
color: #000000 !important;
  font-size: 16px; 
  filter: brightness(100%) invert(100%) contrast(100%);
  width: 30px; 
  height: 30px;
  border-radius: 50%; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px; 
}

.btn:hover {
background: linear-gradient(90deg, #230505, #6e0303) !important;
}

.btn:active{
background: linear-gradient(90deg, #230505, #6e0303); 
transform: scale(0.98); 
}

.send-btn{
  background: linear-gradient(90deg, #6e0303, #230505) !important;
  border: none;
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s ease;
  cursor: pointer;
  position: relative; /* Para posicionar el emoji */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold !important;
}

.send-btn::after{
color: #000000 !important;
  font-size: 16px; 
  filter: brightness(100%) invert(100%) contrast(100%);
  width: 30px; 
  height: 30px;
  border-radius: 50%; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px; 
}

.send-btn:hover {
  background: linear-gradient(90deg, #6e0303, #230505) !important;
}

.send-btn:active {
background: linear-gradient(90deg, #6e0303, #230505) !important;
transform: scale(0.98); 
}

.btn_adi {
background: linear-gradient(90deg, #230505, #6e0303) !important;
  border: none;
  color: #ffffff !important;
  padding: 10px 20px;
  margin: 8px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  max-width: 290px !important;
}

.btn_adi:hover {
  background: linear-gradient(90deg, #230505, #6e0303) !important;
}

.btn-e {
  background: linear-gradient(90deg, #6e0303, #230505) !important;
  border: none;
  color: #ffffff !important;
  padding: 10px 20px;
  margin: 8px;
  font-size: 19px;
  cursor: pointer;
  border-radius: 5px;
  max-width: 270px !important;
  font-weight: bold !important;
}

.btn-e:hover {
  background: linear-gradient(90deg, #230505, #6e0303) !important;
}

.btn_1 {
  background-color: #00ff124f !important;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.btn_1:hover {
  background-color: #cfc9cd !important;
  color: #f8f3f3f1;
}

.btn_2 {
  background-color: #ff3131a1 !important;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.btn_2:hover {
  background-color: #cfc9cd !important;
}

.btn_e {
  background-color: #5cff57 !important;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.btn_e:hover {
  background-color: #230517 !important;
}

.btn_c {
  background: linear-gradient(90deg, #6e0303, #230505) !important;
  border: none;
  color: #ffffff;
  padding: 10px 20px;
  margin: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
}

.btn_c:hover {
  background-color: #230517 !important;
}

h4 {
  color: white;
  text-align: center;
  margin-bottom: 20px;
}

#additionalQuestions {
  text-align: center;
  background-color: #bcff02 !important;
  padding: 20px;
  border-radius: 10px;
}

/* From Uiverse.io by santhoshsj-dev */ 
.bg {
padding: 20px;
border-radius: 10px;
background-color: var(--base-color);
--base-color: #ffffff;
/*use your base color*/
}

.loader {
width: 80px;
height: 60px;
position: relative;
display: inline-block;
background-color: var(--base-color);
}

.loader::before {
content: '';
left: 0;
top: 0;
position: absolute;
border-radius: 50%;
background-color: #000;
width: 56px; 
height: 56px; 
background-image: radial-gradient(circle 12px at 28px 28px, white 100%, transparent 0),
radial-gradient(circle 6px at 28px 0px, white 100%, transparent 0),
radial-gradient(circle 6px at 0px 28px, white 100%, transparent 0),
radial-gradient(circle 6px at 56px 28px, white 100%, transparent 0),
radial-gradient(circle 6px at 28px 56px, white 100%, transparent 0),
radial-gradient(circle 6px at 46px 8px, white 100%, transparent 0),
radial-gradient(circle 6px at 46px 8px, white 100%, transparent 0),
radial-gradient(circle 6px at 46px 46px, white 100%, transparent 0),
radial-gradient(circle 6px at 8px 46px, white 100%, transparent 0),
radial-gradient(circle 6px at 8px 8px, white 100%, transparent 0);
background-repeat: no-repeat;
box-sizing: border-box;
animation: rotationBack 2s linear infinite;
}

.loader::after {
content: '';
border-radius: 50%;
background-color: #000;
position: absolute;
left: 55px; 
top: 25px; 
width: 44px; 
height: 44px; 
background-image: radial-gradient(circle 9px at 22px 22px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 22px 0px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 0px 22px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 44px 22px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 22px 44px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 36px 6px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 36px 6px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 36px 36px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 6px 36px, white 100%, transparent 0),
radial-gradient(circle 4.5px at 6px 6px, white 100%, transparent 0);
background-repeat: no-repeat;
box-sizing: border-box;
animation: rotationBack 3s linear infinite reverse;
}

@keyframes rotationBack {
0% {
  transform: rotate(0deg);
}

100% {
  transform: rotate(-360deg);
}
}

#progressBar {
width: 100%;
height: 23px;
background-color: #ffffff;
margin-bottom: 20px;
border-radius: 10px;
overflow: hidden;
}

.progress-bar {
  height: 23px;
  width: 0;
  background: linear-gradient(135deg, #230505 25%, #6e0303 25%, #6e0303 50%, #230505 50%, #230505 75%, #6e0303 75%, #6e0303 100%);
  background-size: 40px 40px;
  animation: progressMove 2s linear infinite;
  border-radius: 10px; 
}

@keyframes progressMove {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: 40px 40px;
  }
}

/* From Uiverse.io by Li-Deheng */ 
.loader3 {
display: flex;
justify-content: center;
align-items: center;
--color: #640440;
--animation: 2s ease-in-out infinite;
}

.loader3 .circle {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20px;
height: 20px;
border: solid 2px var(--color);
border-radius: 50%;
margin: 0 10px;
background-color: transparent;
animation: circle-keys var(--animation);
}

.loader3 .circle .dot {
position: absolute;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--color);
animation: dot-keys var(--animation);
}

.loader3 .circle .outline {
position: absolute;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation: outline-keys var(--animation);
}

.loader2 {
  display: flex;
  justify-content: center;
  align-items: center;
  --color: hsl(0, 0%, 87%);
  --animation: 2s ease-in-out infinite;
}

.loader2 .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 20px;
  height: 20px;
  border: solid 2px var(--color);
  border-radius: 50%;
  margin: 0 10px;
  background-color: transparent;
  animation: circle-keys var(--animation);
}

.loader2 .circle .dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color);
  animation: dot-keys var(--animation);
}

.loader2 .circle .outline {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: outline-keys var(--animation);
}

.circle:nth-child(2) {
  animation-delay: 0.3s;
}

.circle:nth-child(3) {
  animation-delay: 0.6s;
}

.circle:nth-child(4) {
  animation-delay: 0.9s;
}

.circle:nth-child(5) {
  animation-delay: 1.2s;
}

.circle:nth-child(2) .dot {
  animation-delay: 0.3s;
}

.circle:nth-child(3) .dot {
  animation-delay: 0.6s;
}

.circle:nth-child(4) .dot {
  animation-delay: 0.9s;
}

.circle:nth-child(5) .dot {
  animation-delay: 1.2s;
}

.circle:nth-child(1) .outline {
  animation-delay: 0.9s;
}

.circle:nth-child(2) .outline {
  animation-delay: 1.2s;
}

.circle:nth-child(3) .outline {
  animation-delay: 1.5s;
}

.circle:nth-child(4) .outline {
  animation-delay: 1.8s;
}

.circle:nth-child(5) .outline {
  animation-delay: 2.1s;
}

@keyframes circle-keys {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dot-keys {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes outline-keys {
  0% {
    transform: scale(0);
    outline: solid 20px var(--color);
    outline-offset: 0;
    opacity: 1;
  }

  100% {
    transform: scale(1);
    outline: solid 0 transparent;
    outline-offset: 20px;
    opacity: 0;
  }
}

/*Carta*/
@property --flap-rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}

@property --text {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.0;
}

.text-clamp {
  text-align: center;
  font-size: clamp(20px, 5vmin, 100px);
  margin-bottom: 20px;
}

.grid-template {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.envelope {
  perspective: 1000px;
  position: relative;
  width: 250px;
  height: 150px;
  background-color: #e2e8f0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.flap {
  background-color: #cbd5e1;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  rotate: x var(--flap-rotation);
  animation: animate-flap 2s ease-in-out infinite alternate;
  z-index: 4;
}

.face {
  clip-path: polygon(50% 35%, 100% 0, 100% 100%, 0 100%, 0 0);
  background-color: #f1f5f9;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.heart {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translateY(var(--progress));
background: radial-gradient(at 70% 31%, red 29%, transparent 30%),
            radial-gradient(at 30% 31%, red 29%, transparent 30%),
            conic-gradient(from -40deg at 50% 84%, red 90deg, transparent 0)
            bottom / 100% 50% no-repeat;
animation: show-heart 2s ease-in-out infinite alternate;
z-index: 2;
}

.text-show {
animation: reveal-text 2s ease-in-out infinite alternate;
opacity: var(--text);
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
font-size: 18px;
color: #f87171;
z-index: 5;
}

@keyframes animate-flap {
from {
    --flap-rotation: 0deg;
}
to {
    --flap-rotation: 180deg;
}
}

@keyframes show-heart {
from {
    --progress: 20%;
}
to {
    --progress: -90%;
}
}

@keyframes reveal-text {
from {
    --text: 0.0;
}
to {
    --text: 1.0;
}
}

@media (max-width: 480px) {
#planepa, #planepa1, .test-header-expanded {
  width: 100% !important;

}

#planepa, #planepa1{

  border: none !important;
}

.q{
  position: relative;
  left: 1px !important;
}

.t{
  left: 12px;
}

.p{
  position: relative; 
  left: -4px;
}

.l{
  position: relative; 
  left: -20px;
}

.g{
  position: relative; 
  left: -5px;
}

.v{
  position: relative; left: -13px;
}

.test-box {
  height: 100% !important;
  border: none !important;
}

#feminicideMessage img {
  width: 100% !important;
  display: flex;
  align-items: center;
  
}
.custom-checkbox, .custom-checkbox2 {
  padding: 0px 150px !important;
  display: flex;
}

#feminicideMessage {
  border: none;
}

.check-ic {
  width: 35px;
  height: 35px;
  left: 5px;
}

.check-icn {
  width: 35px;
  height: 35px;
  left: 5px;
}

.check-ic img {

  height: 100%;
}

.check-icn img {

  height: 100%;
}

.custom-checkbox input[type="radio"]:checked + span,
.custom-checkbox2 input[type="radio"]:checked + span {
  padding: 0px 150px !important;
  display: flex;
}

#testcontainer, #testcontainer1, #testcontainer2, #testcontainer3, #testcontainer4, #testcontainer5 {
  padding: 10px;
}

h1 {
    font-size: 18px;
}

h5 {
    font-size: 14px;
}

.dot-spinner__dot {
    width: 8px;
    height: 8px;
}

#feminicideMessage {
  border: none !important;
}

#testBox, #emailSection, #endSection, #calSection, #thanksSection, #cartSection, #cSection{
  width: 100% !important;
  height: 100% !important;
  padding: 20px 40px 0px 20px;
  border: none !important;
}

#testBox img, #emailSectio img{
  width: 100%;
}

}

@media (max-width: 766px) {
  .container {
    width: 100% !important;
  }

  #nameSection, .mes1 {
    width: 100% !important;
    padding: 20px 40px 15px 30px;
    border: none !important;
  }

  #testcontainer, #testcontainer1, #testcontainer2, #testcontainer3, #testcontainer4, #testcontainer5 {
    width: 100% !important;
    border: none !important;
  }

  #testcontainer li, #testcontainer1 li, #testcontainer2 li, #testcontainer3 li, #testcontainer4 li, #testcontainer5 li {
    gap: 12px;
  }

  #testcontainer h1, #testcontainer1 h1, #testcontainer2 h1, #testcontainer3 h1, #testcontainer4 h1, #testcontainer5 h1 {
      font-size: 24px;
  }

  li h4, li h5 {
      font-size: 16px;
      margin: 10px auto;
  }

  .cta-button, .ct-button {
 
    font-size: 22px !important;
    font-weight: bold;
    
    }

  .dot-spinner__dot{
      width: 29px;
      height: 29px;
      left: 5px;
  }

  .check-ic {
    width: 31px;
    height: 31px;
    left: 5px;
  }

  .check-icn {
    width: 35px;
    height: 35px;
    left: 5px;
  }

  .t{
    left: 12px;
  }

  .p{
    position: relative; 
    left: -4px;
  }

  .l{
    position: relative; 
    left: -22px;
  }
  
  .v{
    position: relative; left: -13px;
  }

  #feminicideMessage{
    position: relative;
    width: 100% !important;
    height: auto !important;
  }

  #testBox img, #emailSectio img{
    width: 100%;
  }
  
  #testBox, #emailSection, #endSection, #calSection, #thanksSection, #cartSection, #cSection{
    width: 100% !important;
    height: 100% !important;
    padding: 20px 40px 15px 20px;
    border: none !important;
  }
  #fraseAleatoria {
    width: 100% !important;
  }

  #planepa, #planepa1, .test-header {
    width: 100% !important;
  }

  #planepa, #planepa1 {
    width: 100% !important;
    border: none !important;
  }

  #feminicideMessage img {
    display: flex;
    align-items: center;
    width: 100% !important;
    height: 100% !important;
  }

  #feminicideMessage {
    border: none !important;
  }

  .tt{
    position: relative;
    font-weight: bold;
    font-size: 18px;
  }

 
  .custom-checkbox, .custom-checkbox2 {
    padding: 0px 150px !important;
    display: flex;
  }

  .custom-checkbox input[type="radio"]:checked + span,
  .custom-checkbox2 input[type="radio"]:checked + span {
    padding: 0px 150px !important;
    display: flex;
  }

  .custom-checkbox input[type="radio"]:checked ~ .checkbox-content {
    padding: 2px 60px !important;
    
    background-color: #d0f0c0 !important;
  }

 
  .custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content1{
    padding: 2px 60px !important;
    background-color: #f8d7da !important;
  }

  .custom-checkbox input[type="radio"]:checked ~ .checkbox-content2 {
    padding: 2px 60px !important;
    background-color: #d0f0c0 !important; 
  }

  .custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content3 {
    padding: 2px 60px !important;
    
    background-color: #f8d7da !important;
  }

  .custom-checkbox input[type="radio"]:checked ~ .checkbox-content span,
  .custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content1 span{
    position: relative;
    right: -53px !important;

  }

  .custom-checkbox input[type="radio"]:checked ~ .checkbox-content2 span,
  .custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content3 span{
    position: relative;
    left: -60px !important;
  }
  
}

@media (max-width: 1199px) and (min-width: 767px) {
  .container, .test-header, .test-box, .emailSection, .endSection, .calSection{
      width: 100% !important;
  }

  .test-box, .emailSection, .endSection, .calSection{
    
    border: none !important;
}

  .q{
    position: relative;
    left: -21px !important;
  }

  .qv{
    position: relative;
    left: 18px !important;
  }

  .a{
    position: relative;
    left: -59px !important;
  }

  #feminicideMessage {
    border: none;
  }

  .custom-checkbox input[type="radio"]:checked ~ .checkbox-content span,
.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content1 span{
position: relative;
right: -75px !important;
border-radius: 10px 10px 0px 0px;
}

.custom-checkbox input[type="radio"]:checked ~ .checkbox-content2 span,
.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content3 span{
position: relative;
left: -70px !important;
border-radius: 0px 0px 10px 10px;
}

  .custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content1,
.custom-checkbox input[type="radio"]:checked ~ .checkbox-content {

  border-top: 1px solid #a5a5a5;
  border-left: 1px solid #a5a5a5;
  border-bottom: 1px solid #a5a5a5;
  border-right: none;
  color: white;
  padding: 2px 60px;
  
}

.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content3,
.custom-checkbox input[type="radio"]:checked ~ .checkbox-content2 {

  border-top: 1px solid #a5a5a5;
  border-left: none;
  border-bottom: 1px solid #a5a5a5;
  border-right: 1px solid #a5a5a5;
  color: white;
  padding: 2px 80px !important;
}

.cta-button, .ct-button {
 
font-size: 26px !important;
font-weight: bold;

}

#feminicideMessage {
  border: none !important;
}

  #thanksSection, #planepa, #planepa1, .paperplane, #cartSection, #cSection, #mes1 {
    width: 100% !important;
    border: none !important;
}
  .feminicideMessage{
    width: auto !important;
  }

  #feminicideMessage img{
    display: flex;
    align-items: center;
    width: 100% !important;
    height: 550px !important;
  }

  #feminicideText, h4{
    font-size: 40px !important;
  }

  #testcontainer, #testcontainer1, #testcontainer2, #testcontainer3, #testcontainer4, #testcontainer5 {
    width: 100% !important;
    border: none !important;
   display: grid;
   justify-items: center;
    align-items: center;
  }

  #testcontainer li, #testcontainer1 li, #testcontainer2 li, #testcontainer3 li, #testcontainer4 li, #testcontainer5 li {
    gap: 12px;
  }

  #testcontainer h1, #testcontainer1 h1, #testcontainer2 h1, #testcontainer3 h1, #testcontainer4 h1, #testcontainer5 h1 {
      font-size: 24px;
  }

  .progress-bar{
    height: 30px !important;
  }

  img{
    width: 400px;
    height: 350px;
  }

  h2, span{
    font-size: 26px !important;
  }

  h4, h5{
    font-size: 30px !important;
  }

  input{
    margin: 70%;
    font-size: 30px !important;
    
  }

  .btn, .btn_1, .btn_2, .second-btn {
    margin: 10px;
    font-size: 40px !important;
  }

  .welcome-msg, .test-header {
  width: 100% !important;
  }

  #nameSection, #testBox{
     width: auto;
    height: auto;
    border: none !important;
  }
  #fraseAleatoria {
    left: 10px;
    right: 10px;
    bottom: 10px;
    max-width: none;
  }
}

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
      max-width: 100% !important;
  }
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl, .test-header, #thanksSection, #planepa, #planepa1, #cartSection{
      max-width: 100% !important;
  }
  #nameSection, .test-box, .emailSection, .endSection, .calSection{
      max-height: 100% !important;
  }
}

#result-display {
font-size: 2rem;
padding: 10px 20px;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
}

.resu{
width: 100% !important;
display: flex;
}

.custom-checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}

.custom-checkbox {
display: flex;
align-items: center;
background-color: #d0f0c0; 
padding: 0px 200px;
border-radius: 10px;
cursor: pointer;
justify-content: center; 
width: 100px; 
}

.custom-checkbox:hover {
background-color: #00ff124f;
}

.custom-checkbox2 {
background-color: #f8d7da;
display: flex;
align-items: center;
padding: 0px 200px;
border-radius: 10px;
cursor: pointer;
justify-content: center; 
width: 100px; 
}

.custom-checkbox2:hover {
background-color: #ac230b4f;
}

.checkbox-content {
font-size: 25px;
font-weight: bold;
display: flex; /* Cambia a flex para alinear emoji y texto en la misma línea */
align-items: center; /* Centra verticalmente */
gap: 8px; /* Espacio entre emoji y texto */
}

.checkbox-content2 {
font-size: 25px;
font-weight: bold;
display: flex; /* Cambia a flex para alinear emoji y texto en la misma línea */
align-items: center; /* Centra verticalmente */
gap: 8px; /* Espacio entre emoji y texto */
}

.checkbox-content1 {
font-size: 25px;
font-weight: bold;
display: flex; /* Cambia a flex para alinear emoji y texto en la misma línea */
align-items: center; /* Centra verticalmente */
gap: 8px; /* Espacio entre emoji y texto */
}

.checkbox-content3 {
font-size: 25px;
font-weight: bold;
display: flex; /* Cambia a flex para alinear emoji y texto en la misma línea */
align-items: center; /* Centra verticalmente */
gap: 8px; /* Espacio entre emoji y texto */
}

/* Oculta el input de radio */
.custom-checkbox input[type="radio"],
.custom-checkbox2 input[type="radio"] {
display: none;
}

/* Aplica el estilo cuando el radio está seleccionado */
.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content1,
.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content3{
  background-color: #f8d7da !important;
}

.custom-checkbox input[type="radio"]:checked ~ .checkbox-content,
.custom-checkbox input[type="radio"]:checked ~ .checkbox-content2{
  background-color: #d0f0c0 !important;
}

.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content1,
.custom-checkbox input[type="radio"]:checked ~ .checkbox-content {

border-top: 1px solid #a5a5a5;
border-left: 1px solid #a5a5a5;
border-bottom: 1px solid #a5a5a5;
border-right: none;
color: white;
padding: 2px 85px;

}

.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content3,
.custom-checkbox input[type="radio"]:checked ~ .checkbox-content2 {

border-top: 1px solid #a5a5a5;
border-left: none;
border-bottom: 1px solid #a5a5a5;
border-right: 1px solid #a5a5a5;
color: white;
padding: 2px 85px;

}

.custom-checkbox input[type="radio"]:checked ~ .checkbox-content span,
.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content1 span{
position: relative;
right: -85px;
border-radius: 10px 10px 0px 0px;
}

.custom-checkbox input[type="radio"]:checked ~ .checkbox-content2 span,
.custom-checkbox2 input[type="radio"]:checked ~ .checkbox-content3 span{
position: relative;
left: -85px;
border-radius: 0px 0px 10px 10px;
}

.btn_3{
  background: linear-gradient(90deg, #6e0303, #230505) !important;
border: none;
color: #ffffff !important;
font-weight: bold !important;
font-size: 16px;
}

.btn_3:hover{
  background: linear-gradient(90deg, #230505, #6e0303) !important;
}

.w{
color: #6e0303;
}

.q{
  position: relative;
  left: -20px;
}

.m{
  position: relative;
  left: -38px;
}

.ms{
  position: relative;
  left: -30px;
}

.wi{
font-weight: bold !important;

}

.pa{
font-weight: bold !important;
color: #000000 !important;
}

#continueButton {
padding: 10px 20px;
font-size: 18px;
background: linear-gradient(90deg, #6e0303, #230505) !important;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
bottom: 10px;
position: relative;
font-weight: bold !important;
}

#continueButton:hover {
  background: linear-gradient(90deg, #230505, #6e0303) !important;
}






/*zona telenofonica*/


.phone-container .whatsapp {
  border: none;
  width: 100%;
}

#phoneZone {
  width: 300px;
  height: 40px;
  padding: 5px;
  font-size: 16px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  -webkit-appearance: none; /* Elimina estilos por defecto en algunos navegadores */
  appearance: none;
}

.phone-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 150px !important;
  border: none !important;
}

.selected-option {
  
  align-items: center;
  padding: 10px;
  border: none;
  cursor: pointer;
  background-color: #fff;
  
  justify-content: space-between;
  position: relative;
  top: -10px;
}

.selected-option img {
  width: 20px;
  height: 15px;
  margin-right: 10px;
}

#country-code-display {
  font-size: 14px;
  font-weight: bold;
}

.options {
  position: absolute;
  top: -450%;
  left: 70%;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background: #fff;
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 1000;
  width: 300px !important;
}

.options li {
  padding: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.options li:hover {
  background-color: #f0f0f0;
}

.options img {
  width: 20px;
  height: 15px;
  margin-right: 10px;
}

#phone {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}