@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
  --turquesa: #2bd9e1;

}

.img-res img{
  max-width: 100%;
}

.text-gris{
  color: #8b8b8b;
}

.bg-turquesa{
  background-color: var(--turquesa);
}

.sper{
  font-weight: 700;
  letter-spacing: 1px;
}

.cortina{
  position: absolute;  
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--turquesa);
  z-index: 10;
}
.tulipan{
  width: 70px;
}

.back_gral{
  width: 100%;
  /* height: 100vh; */
  background-image: url('../img/back_gral.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.conten_principal{
  position: relative;
  width: 100%;
  /* height: 100vh; */
  display: flex;
  justify-content: center;
  margin-top: 5em;
  /* align-items: center; */
  /* margin-top: 100px; */
}

.personas{
  position:absolute;
  width: 63%;
  bottom:0px;
  left: 0px;

}

.papael{
  position: relative;
  width: 85%;
  /* height: 87%; */
  background-color: azure;
  background-image: url(../img/papel.png);
  background-size: cover;
  background-position: center;
  padding:30px;
  border:10px;
  -webkit-box-shadow: 7px 10px 17px -8px rgba(0,0,0,0.68);
  -moz-box-shadow: 7px 10px 17px -8px rgba(0,0,0,0.68);
  box-shadow: 7px 10px 17px -8px rgba(0,0,0,0.68);
  border-radius: 15px;
}

.titulo{
  width: 400px;
  margin-top: 10px;
  margin: 0 auto;
  margin-top: 5px;
  margin-bottom: 20px;
}

.botonera{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:20px;
  margin-top: 12%;
  flex-direction: column;  
}

.bton{
  display: block;
  width: 100%;
  background-color: var(--turquesa);
  border-radius: 30px;
  color:#404040;
  font-weight: 500;
  text-decoration: none;
  text-align: center; 
  padding: 5px 0px 5px 0px;
  border:none;
  -webkit-box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.4);
  -moz-box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.4);
  box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.4);
}

/*HOME2*/
.botonera2{
  display: flex;
  justify-content: space-between;
  gap:10px;
}
.chec{
  width: 45%;
  height: 80px;
  border-radius: 20px;
  background-color: #fff;
  border:1px solid var(--turquesa);
  padding: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-box-shadow: 3px 10px 26px -9px rgba(0,0,0,0.41);
  -moz-box-shadow: 3px 10px 26px -9px rgba(0,0,0,0.41);
  box-shadow: 3px 10px 26px -9px rgba(0,0,0,0.41);
  transition: background-color 0.5s ease;
}
.img-chec{
  width: 35px;  
}



.hr{
  position:absolute;
  width: 70%;
  height: 70%;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background-color: #969696;
  transform: translate(-50%,-50%);
  transition: background-color 0.8s ease;

}
.tsx{
  color: #969696;
  letter-spacing: 1px;
  font-weight: 400; 
}



.active_ch{
  background-color: var(--turquesa);  
}
.active_ch>.tsx{
  color: #1c1c1c;   
}
.active_ch>.head_r>.fradio>.hr{
  background-color: #00a859;
}
.active_ch>.head_r>.img-chec{
  filter: invert(1);
} 

.conten_medios{ 
  width: 50%;
  margin:0 auto;
}

.edad{
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 15px;
}


/*PROGRES*/
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

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

body {
  min-height: 100vh;
  display: flex;
  align-items: start; 
  justify-content: center;
  font-family: "Roboto", Arial;
  background: #F5F9FF;
}

.output {
  position: relative;   
  font-size: 14px;
  line-height: 20px;
  color: #919191;  
  -webkit-transition: opacity 0.3s ease-in-out 0s;
  transition: opacity 0.3s ease-in-out 0s;
}

#range {
  --active: #5628EE;
  --value: #fff;
  --line: #CDD9ED;
  touch-action: none;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--line);
  position: relative;
}
#range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: #F5F9FF;
  border: 2px solid var(--turquesa);
  cursor: pointer;
  border-radius: 18px;
  transition: 0.5s ease;
}
#range::-webkit-slider-thumb:focus, #range::-webkit-slider-thumb:active {
  padding: 8px;
}
#range:focus, #range:active {
  outline: none;
}

/*SELECTER H M*/

/* variables */
:root {
/* colors */
--ri5-color-primary-hsl: 183, 75%, 53%;
--ri5-color-bg-hsl: 0, 0%, 100%;
--ri5-color-contrast-high-hsl: 230, 7%, 23%;
--ri5-color-contrast-higher-hsl: 0, 0%, 70%;
--ri5-color-bg-darker-hsl: 0, 4%, 90%;
--ri5-color-white-hsl: 0, 0%, 25%;

/* typography */
--ri5-text-sm: 0.833rem;

--radio-switch-width: 186px;
--radio-switch-height: 37px;
--radio-switch-padding: 0px;
--radio-switch-radius: 100vw;
--radio-switch-animation-duration: 0.3s;
}

.radio-switch {
position: relative;
display: inline-flex;
padding: var(--radio-switch-padding);
border-radius: calc(var(--radio-switch-radius) * 1.4);
background-color: hsl(var(--ri5-color-bg-darker-hsl));
}
.radio-switch:focus-within, .radio-switch:active {
box-shadow: 0 0 0 2px hsla(var(--ri5-color-contrast-higher-hsl), 0.15);
}

.radio-switch__item {
position: relative;
display: inline-block;
height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding));
}

.radio-switch__label {
position: relative;
z-index: 2;
display: flex;
height: 100%;
align-items: center;
justify-content: center;
font-weight:700;
border-radius: var(--radio-switch-radius);
cursor: pointer;
font-size: var(--ri5-text-sm);
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
transition: all var(--radio-switch-animation-duration);
}
.radio-switch__input:checked ~ .radio-switch__label {
color: hsl(var(--ri5-color-white-hsl));
}
.radio-switch__input:focus ~ .radio-switch__label {
background-color: hsla(var(--ri5-color-primary-hsl), 0.6);
}
.radio-switch__label :not(*):focus-within, .radio-switch__input:focus ~ .radio-switch__label {
background-color: transparent;
}

.radio-switch__marker {
position: absolute;
z-index: 1;
top: 0;
left: -100%;
border-radius: var(--radio-switch-radius);
background-color: hsl(var(--ri5-color-primary-hsl));
height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding));
box-shadow: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
transition: -webkit-transform var(--radio-switch-animation-duration);
transition: transform var(--radio-switch-animation-duration);
transition: transform var(--radio-switch-animation-duration), -webkit-transform var(--radio-switch-animation-duration);
}
.radio-switch__input:checked ~ .radio-switch__marker {
-webkit-transform: translateX(100%);
        transform: translateX(100%);
}

/* utility classes */
.ri5-sr-only {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
width: 1px;
height: 1px;
overflow: hidden;
padding: 0;
border: 0;
white-space: nowrap;
}


.generate-button:before {
content: "";
display: block;
position: absolute;
right: 20%;
height: 20px;
left: 20%;
bottom: -10px;
background: rgba(204, 204, 204, 0.4);
filter: blur(12.5px);
z-index: 2;
clip-path: inset(-200% -30% 10px -30% round 29px);
opacity: 0;
transition: opacity 0.4s;
transform: translateZ(0);
}
.generate-button span {
position: relative;
z-index: 1;
font-family: "Poppins", Arial;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.005em;
display: block;
user-select: none;
}
.generate-button .stroke {
mix-blend-mode: hard-light;
}
.generate-button .stroke svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: none;
stroke-width: 0.75px;
stroke: #e2d9ff;
stroke-dasharray: 1.5 14;
stroke-dashoffset: 22;
opacity: 0;
}
.generate-button .stroke svg:nth-child(2) {
stroke-width: 1px;
stroke-opacity: 0.5;
filter: blur(3px);
}

.generate-button svg.icon {
width: 18px;
height: 20px;
margin-right: 10px;
fill: currentColor;
}
.generate-button svg.icon path:nth-child(1) {
opacity: var(--generate-button-star-1-opacity);
transform: scale(var(--generate-button-star-1-scale)) translateZ(0);
transform-origin: 25% 14.58%;
}
.generate-button svg.icon path:nth-child(2) {
opacity: var(--generate-button-star-2-opacity);
transform: scale(var(--generate-button-star-2-scale)) translateZ(0);
transform-origin: 60.42% 50%;
}
.generate-button svg.icon path:nth-child(3) {
opacity: var(--generate-button-star-3-opacity);
transform: scale(var(--generate-button-star-3-scale)) translateZ(0);
transform-origin: 25% 85.42%;
}
.generate-button:hover {
--generate-button-scale: 1.01;
--generate-button-shadow-wide: rgba(var(--clr-button), 0.4);
--generate-button-shadow-inset: rgba(255, 255, 255, 0.35);
--generate-button-shadow-outline: 3px;
color: var(--clr-text);
background-color: rgba(var(--clr-button));
}
.generate-button:hover .stroke svg {
animation: stroke 2s linear infinite;
}
.generate-button:hover:before {
opacity: 1;
}
.generate-button:hover span:before {
opacity: 0;
}
.generate-button:hover:active {
--generate-button-scale: 1.05;
}
@keyframes stroke {
0% {
  opacity: 0;
}
25%,
75% {
  opacity: 1;
}
95%,
100% {
  stroke-dashoffset: 6;
  opacity: 0;
}
}




/*Menu*/
.menu{
  width: 100%;
  height: 40px;
  background-color: #34b0b5;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: center;
}

.conten_icons{
  width: 85%;
  height: 40px;  
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon_h{
  width:20px;
  filter: invert(1);
}
.mas_opc{
  display: flex;
  gap:25px;
}


.logo_medios{
  width: 220px;
  margin: 0 auto;
  margin-bottom: 20px;
}

/*Preguntas*/

.pregunta{
  background-color: var(--turquesa);
  padding: 30px 10px 30px 10px;
  width: 100%;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 1.3em;
}

.ctn_respuestas{
  margin-top: 30px;
}


.res{
  width: 100%;
  display: flex;
  padding: 10px 5px 10px 5px;
  align-items: center;  
  background-color: #fff;
  font-size: 1em;
  border-radius: 10px;
  font-weight: 400;
  gap:10px;
  border: 1px solid rgb(200 200 200 / 26%);
  -webkit-box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.3);
  -moz-box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.3);
  box-shadow: 10px 10px 13px -4px rgba(0,0,0,0.3);
  margin-top: 20px;
}
.letra{
  background-color:#b6fcff;
  color: #000dc4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

.text{
  width: 90%;
}

.active{
  background-color: var(--turquesa);
  color:#fff;
}
.active>.letra{
  background-color:#fff;
  color: #00bac2;
}

.animate__delay-200ms {
  animation-delay: 200ms;
}
.animate__delay-400ms {
  animation-delay: 400ms;
}
.animate__delay-600ms {
  animation-delay: 600ms;
}
.animate__delay-800ms {
  animation-delay: 800ms;
}
.animate__delay-1000ms {
  animation-delay: 1000ms;
}


/**/
/*RESULTADOS*/
/**/
.hombre{
  position: absolute;
  width: 160px;
  right: 0px;
  bottom: 0px;
}
.descP{
  background-color: var(--turquesa);
  padding: 20px 10px 20px 10px;
  width: 100%;
  border-radius: 10px;
  text-align: center;
  font-weight:500;
  margin-top: 20px;
}

.piramides{
  width: 100%;
  /* height: 300px; */
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 10px 13px 26px -8px rgba(0,0,0,0.46);
  -moz-box-shadow: 10px 13px 26px -8px rgba(0,0,0,0.46);
  box-shadow: 10px 13px 26px -8px rgba(0,0,0,0.46);
}

.title{
  font-size: 23px;
  padding: 9px;
  color: #ff4c5d;
}    

.nombre{
  display: inline-block;
  width: 100%;
  text-align: center;
  color:#fff;
  font-weight: bold;
  margin: 0 auto;
  font-size: .9em;
  padding: 8px 0px 8px;
  background-color: #ff7380;
}

.nombre:hover{
  color: #fff !important;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  filter: invert(.5);
} 

.infoStyle{
  position: absolute;
  display: inline-block; 
  width: 34px;
  top:10px;
  left:20px;
  /* filter: drop-shadow( 3px 3px 10px #7e7e7e ); */
  z-index: 5;
  animation: pulseZoom 2s ease-in-out infinite;
}


@keyframes pulseZoom {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3); /* pequeño zoom */
  }
}

#mdesc{
  text-transform: lowercase;
  text-align: center;
}

#mdesc:first-letter {
  text-transform: uppercase;
}


#mdesc, #mfam{
  font-size: .8rem;
}


@media (max-width: 767.98px) {
  .titulo{
    width: 230px;
  }
  .conten_medios {
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 320px) {
  .papael{
    width: 95%;
    /* height: 93%; */
    padding: 10px;
  }
  .res{
    margin-top: 10px;
  }
  .personas{
    width: 50%;
  }
}

@media (min-width: 1200px) { 
  .personas{
    /*display: none;*/
    width: 30%;
  }
  .papael{
    width: 35%;
  }
}


@media (min-width: 500.98px) {
  .personas{
    /*display: none;*/
    width: 30%;
  }

  .papael{
    width:70%;
  
  }
}