@charset "utf-8";
/* CSS Document */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	background-image:url(img/portada2.jpg);
	



	background-repeat:no-repeat;
	background-size:100% 94%;
    font-family: Arial, sans-serif;
    height: 100vh;
    opacity: 0;
    animation: fadeIn 5s ease-in forwards;
}

/* Define la animación de aparición */
@keyframes fadeIn {
    to { opacity: 1; }
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 35%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    margin: 150px auto 50px auto;
    border: solid 1px #C90;
    padding: 20px;
}

/* Cintillo superior */
.Cintillo {
    background-color: #900;
    color: white;
    padding: 5px;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
}

.Titulo {
	
	width:80%;
    margin-top: 30px;
	margin-left: auto;  
    margin-right: auto; 
    border: solid 1px #936;
    border-radius: 15px;
    padding: 10px;
}

.Voz, .label {
    margin-top: 30px;
    border: solid 1px #C93;
    border-radius: 15px;
    padding: 10px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #800000;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.5s;
    width: 100%;
    margin-top: 15px;
}

button:hover {
    background-color: #C258A8;
}

.titulo {
    font-size: 22px;
    color: white;
    margin-bottom: 20px;
    background-color: #2C6A72;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.content {
    width: 80%;
    text-align: center;
    color: #936;
    padding: 20px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 5px;
}

progress {
    border: none;
    border-radius: 2rem;
    width: 95%;
    height: 10px;
    animation: prog 2s linear;
}

::-webkit-progress-bar-value {background-color: #900; border-radius: 2rem;}
::-webkit-progress-value {background-color: #900; border-radius: 2rem;}
::-moz-progress-bar {background-color: #900; border-radius: 2rem;}

@keyframes prog {
    0% {width: 0%; background-color: #f1f1f1;}
    100% {width: 100%; color: #000;}
}

label {
    font-size: 14px;
    text-align: justify;
    display: block;
    margin-bottom: 10px;
}

h1 { font-size: 24px; margin-bottom: 20px; }
p  { font-size: 18px; margin-bottom: 15px; }

.option {
    margin-bottom: 10px;
    text-align: left;
}

input[type="radio"] { margin-right: 10px; }

#feedback {
    margin-top: 20px;
    font-size: 18px;
    color: red;
}

/* 🔹 Responsive Design */

/* Tablets */
@media screen and (max-width: 992px) {
    .container {
        width: 70%;
        margin-top: 100px;
    }

    .titulo { font-size: 20px; }
    button { font-size: 14px; }
}

/* Celulares grandes */
@media screen and (max-width: 768px) {
    .container {
        width: 90%;
        margin-top: 50px;
    }

    .titulo { font-size: 18px; }
    .content { width: 100%; padding: 15px; }
    button { font-size: 14px; padding: 10px; }
}

/* Celulares pequeños */
@media screen and (max-width: 480px) {
    body { font-size: 14px; }
    .titulo { font-size: 16px; padding: 8px; }
    button { font-size: 12px; padding: 8px 12px; }
    .container { padding: 15px; }
}