body {
    font-family: "Lora", system-ui;
    background-image: url('../img/oso.png');
    background-size: cover; /* Ajusta la imagen para que cubra todo el área del contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen */
}

p {
    color: #552099;
    font-size: 1.5rem;
}

h1 {
    color: #552099;
    font-size: 2.9rem;
}
h2 {
    color: #552099;
    font-size: 2.6rem;
}
h3 {
    color: #552099;
    font-size: 2.3rem;
}
h4 {
    color: #552099;
    font-size: 1.4rem;
}

label{
    color: #552099;
    font-size: 1.3rem;
}

input{
    color: #552099;
    font-size: 1.1rem;
}

li{
    color: #552099;
    font-size: 0.9rem;
}
span{
    color: #552099;
    font-size: 0.9rem;
    font-weight: bold;
}


@media (min-width: 768px) {
    .header .contenido-header .barra {
        min-height: 7rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .header .contenido-header .barra a img {
        max-width: 30rem;
    }
}

@media (min-width: 224px) {
    .header .contenido-header .barra {
        min-height: 3rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .header .contenido-header .barra a img {
        max-width: 20rem;
    }
}

.boton-morado {
    display: inline-block;
    background-color: #552099; /* $moradoOscuro */
    color: white;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    border-radius: 0.25rem;
}

.footer {
    padding: calc(2rem / 2) 0; /* Reemplaza $separacion con 2rem (o el valor real que tenga) */
    background-color: #552099; /* Reemplaza $moradoOscuro con el color real */
    margin-bottom: 0;
}

.footer .copyright {
    color: #ffffff; /* Reemplaza $blanco con el color real */
    text-align: center;
}

/* Para navegadores basados en Webkit (Chrome, Safari, Edge) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Para Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.boton-enviar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.boton-enviar button[type="submit"] {
    font-size: 1.5rem;
}

.boton-verde {
    display: inline-block;
    background-color: #4CAF50; /* Asumiendo que $verde es un color verde, puedes cambiarlo al valor hexadecimal adecuado */
    color: #fff;
    padding: 0.5rem 1rem;
    text-align: center;
    text-decoration: none;
    font-size: 1.5rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.boton-verde:hover {
    background-color: #45a049; /* Color un poco más oscuro para el efecto hover */
}

.info {
    align-items: start;
    background-color: #F79219;
    border-radius: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border: none;
    display: inline-block; /* Cambiado a inline-block para ajustar el ancho al contenido */
    margin-bottom: 1rem; /* Espacio adicional debajo del div */
    text-align: center; /* Centra el texto horizontalmente */
    max-width: 100%; /* Asegura que no exceda el ancho del contenedor */
}


.info h3 {
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 700; /* Asumiendo que $black es un peso de fuente negrita */
}

.info-padre {
    align-items: start;
    background-color: #37BA2A; /* Esto representa el color verde */
    color: #FFFFFF;
    border-radius: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border: none;
    display: inline-block; /* Cambiado a inline-block para ajustar el ancho al contenido */
    margin-bottom: 1rem; /* Espacio adicional debajo del div */
    text-align: center; /* Centra el texto horizontalmente */
    max-width: 100%; /* Asegura que no exceda el ancho del contenedor */
}

.info-padre h3 {
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 700; /* Asumiendo que $black es un peso de fuente negrita */
}

.info-comprimiso {
    align-items: start;
    background-color: #00aaff; /* Esto representa el color azul claro */
    border-radius: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    border: none;
    display: inline-block; /* Cambiado a inline-block para ajustar el ancho al contenido */
    margin-bottom: 1rem; /* Espacio adicional debajo del div */
    text-align: center; /* Centra el texto horizontalmente */
    max-width: 100%; /* Asegura que no exceda el ancho del contenedor */
}

.info-comprimiso h3 {
    font-size: 2rem;
    color: #FFFFFF;
    font-weight: 700; /* Asumiendo que $black es un peso de fuente negrita */
}


.boton-continuar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

.boton-continuar button[type="button"] {
    font-size: 2rem;
}


.logo-titulo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-titulo img {
    margin-right: 10px; /* Espacio entre la imagen y el título */
    max-width: 100px; /* Tamaño máximo de la imagen */
    height: auto;
}

.logo-titulo h1 {
    margin: 0; /* Elimina cualquier margen alrededor del título */
}

.centrado {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.question {
    margin-bottom: 20px;
}