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



body,

html {

  	margin: 0;

    background: transparent !important;

}

/*

html, body, iframe, iframe > div, div, div > img, img  {

   -webkit-backface-visibility: hidden !important;

   backface-visibility: hidden;

}

*/

html {

    height: 100%;

}

.attempt-counter {

    display: none;

}

body {

    width: -webkit-fill-available;

 	height: -webkit-fill-available;

	overflow: hidden; 

	font-family: "Asap", "Century Gothic", sans-serif !important;

}



div#wrapper {

	width: -webkit-fill-available;

	height: -webkit-fill-available;

    display: flex; 

    justify-content: center;

    align-items: flex-start;

    padding-top: 10px; 

}



.instruccion h1,

.instruccion p {

  	font-family: "Asap", "Century Gothic", sans-serif !important; 

  	text-align: left;

}



.instruccion h1 {

	margin-block-start: 0.15em !important;

	margin-block-end: 0.15em !important;

}



h2 {

	margin-block-start: 0.4em !important;

	margin-block-end: 0.2em !important;

}



div p {

  	padding: 5px 0;

	margin: 0;

	font-family: "Asap", "Century Gothic", sans-serif !important;

}



div { 

  	right: 0;

  	left: 0; 

}



button.boton-comenzar {

    margin: 20px; 

    display: flex; 

	justify-content: center;

	align-items: center;  

	height: 50px;

    line-height: 2; 

    background-color: #66aaff;

    color: white;

    font-weight: bold;

	border: none !important;

	cursor: pointer;

	font-family: "Quicksand", sans-serif !important;  

	border-radius: 20px;

	opacity: .7;

    transform: scale(0.97);

    transition: .3s ease-in-out;

	font-size: 14px; 

	white-space: pre-line;

    box-shadow: 0 8px 0 #3f7de0;

      flex-flow: column;   

    width: 300px;

    padding: 20px 10px;

    flex-direction: row;

}



button.boton-comenzar, button.boton-comenzar p { 

	text-align: center;

	line-height: normal !important;

}



img.microfono {

    max-height: 20px;

    padding: 0px 0 3px 0;

    margin-right: 8px;

}

 

p.recuerda {

    color: #A15FF6 !important;

	font-size: 10pt !important;

	padding: 0 !important; 

	text-align: center;   

    margin-inline: auto;  

}





div#wrapper-comenzar {

    display: flex;

    align-items: center;

    flex-flow: column;

    width: 100%; 

}



div#wrapper-comenzar {

    background-color: #e9d7bf;

    width: 400px;

    padding: 10px;

    border-radius: 12px;

    margin-bottom: 425px;

    position: relative !important;

    box-shadow: 0 8px 0 #ad5337;

}





button.boton-comenzar[disabled] {

    background-color: #5591da !important;

    transition: 0.5s ease-in-out;

    box-shadow: 0px 3px 0px #4269b3;

}



.caja { 

	position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 0; /* Elimina cualquier padding que pueda generar espacio extra */

    align-items: center; 

    margin-top: 80px;

    margin-top: ;

}



.caja2 {

    width: -webkit-fill-available;

	height: -webkit-fill-available; 

    margin-top: 20px;

}



.caja2 > p:first-of-type {

    padding-top: 0 !important; 

}



.voz-imagen1 {

    width: 100%;     

	height: fit-content;

	display: flex; 

    justify-content: center;

	align-items: center;  
    
    margin-top: 30px;
    
    margin-bottom: 30px;



}



.voz-imagen1 > img {

	display: flex; 

    max-width: -webkit-fill-available;

    max-height: 160px;

    padding-left: 10px;

    justify-content: center;

	align-items: center; 

}



testBtn {

    white-space: pre-line; /* Esto asegura que se respeten los saltos de línea */

    word-wrap: break-word; /* Asegura que el texto se ajuste bien */

}





@media all and (max-height: 410px) {

  div {

    position: static;

  }

}



.phrase {

  	font-weight: bold;

	background-color: #ffffbd;

	margin-bottom: 1rem;

	padding: 10px;

	font-family: "Asap", "Century Gothic", sans-serif !important;

	font-size: 21px;

    text-align: center;

}



p.phrase {

    display: none;

}



.phrase::first-letter, div:has(.result) > textarea.output::first-letter {

	text-transform: capitalize;

}



.output {    

    padding: 0.5rem 0.5rem 0.2rem;

    border-radius: 5px;

    margin: 140px 0 0 0;

    font-family: "Asap", "Arial", sans-serif !important;

    background-color: #ffffffe6;

    border: none;

    pointer-events: none; 

   resize: none;

    height: 20px !important;

    font-size: 12pt;

    text-align: center;

    width: 100%;

    position: absolute;

    left: 0;

}



textarea.output:focus-visible {

    outline-color: #A15FF6;

}

 



div:has(.result[style="background: red;"]) > textarea.output {

    border-color: rgb(255, 255, 255) !important;

}



div:has(.result[style="background: lime;"]) > textarea.output {

    border-color: rgb(255, 255, 255) !important;

	pointer-events: none !important;

}





.instruccion {

	display: flex;

	flex-flow: column;

	align-content: center;

	width: 100%;

	font-family: "Asap", "Century Gothic", sans-serif !important;

}



p.result {       

-webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    font-family: "Asap", "Arial", sans-serif !important;

    border-radius: 5px;

    font-size: 12pt !important;

    text-align: center;

    padding: 0.5rem 0.5rem 0.2rem;

    color: rgb(0, 0, 0);

    margin-top: -32px;

    z-index: 9999999 !important;

    position: relative;

    width: 400px;

    top: 172px;

    margin-left: auto; 

    margin-right: auto; 

    background-color: #ffffffe6;

    height: 20px;
    
    line-height: 20px;

}

div#wrapper-comenzar:before {

    content: "";

    width: 28px;

    background: linear-gradient(to bottom, #a86e3c, #5c3b24);

    height: 180px;

    position: absolute;

    z-index: -2;

    border-radius: 8px;

}



.base {

    width: 60px;

    height: 14px;

    background-color: #a17234; /* Marrón */

    border-top-left-radius: 40px;

    border-top-right-radius: 40px;

    position: absolute;

    bottom: -80px;

    left: 50%;

    transform: translateX(-50%);

}



.base2 {

    width: 100px;

    height: 15px;

    background-color: #7a5a28; /* Marrón */

    border-top-left-radius: 40px;

    border-top-right-radius: 40px;

    position: absolute;

    bottom: -90px;

    left: 50%;

    transform: translateX(-50%);

}



p.result[style="background: rgba(0, 0, 0, 0.2);"] { 

    visibility: hidden;

}





/* Animación suave cuando la imagen de voz se activa */

.voz-imagen1 {

  opacity: 1; /* La imagen comienza invisible */

  transform: scale(1); /* Comienza con escala 1 */

  animation: animacionEscala 3s ease-in-out 0.6s forwards; /* Añadimos el retraso de 1 segundo */

}



/* La animación se realiza cuando la clase 'cargada' es agregada */

.voz-imagen1.cargada {

  opacity: 1;  /* La imagen se hace completamente visible */

}



/* Definición de la animación 'animacionEscala' */

@keyframes animacionEscala {

  0% {

    transform: scale(1); /* Empieza en tamaño normal */

  }

  50% {

    transform: scale(1.15); /* Aumenta hasta 1.2 */

  }

  100% {

    transform: scale(1); /* Vuelve al tamaño original */

  }

}



.modal-overlay > .modal {

	display: flex;

    padding: 0 !important;

    border: none;

    border-radius: 30px !important;

    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2) !important;

    background-color: #66aaff !important;

    color: white;

    transition: .3s ease-in-out;

}



.modal-overlay > .modal > button {

	display: flex;

	align-items: center;

    justify-content: center;

	color: #fff;

	cursor: pointer;

	padding: 12px 20px !important;

    margin: 0 !important;

    background: none !important;

    border: none !important;

    font-weight: bold !important;

} 



 .info 

 {

    width: 100%;

}