.encuesta {
  background-color: #003b3f;
  color: white;
  padding: 70px 20px;
  text-align: center;
}

.encuesta-contenedor {
  max-width: 1100px;
  margin: 0 auto;
}

.encuesta h2 {
  font-size: 2.3rem;
  margin-bottom: 10px;
}

.encuesta-intro {
  font-size: 1rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.form-encuesta h3 {
  font-size: 1.5rem;
  margin-bottom: 30px;
  font-weight: normal;
}


/* OPCIONES */

.opciones-encuesta {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    max-width:800px;
    margin:35px auto;
}


/* TARJETA */

.opcion {
    background:#ffffff;
    padding:25px;
    border-radius:15px;
    box-shadow:var(--sombra-card);
    cursor:pointer;
    transition:var(--transicion);
    border:2px solid transparent;
}


/* Ocultamos el radio tradicional */

.opcion input {
    display:none;
}


/* Diseño de cada respuesta */

.opcion span {
    display:block;
    font-size:1.05rem;
    color:var(--color-primario);
    font-weight:500;
}


/* Cuando pasa el mouse */

.opcion:hover{

    transform:translateY(-4px);

    box-shadow:var(--sombra-hover);

}


/* Cuando selecciona una respuesta */

.opcion:has(input:checked){
    border-color:var(--color-primario);
    background:#eef4ff;
    transform:translateY(-4px);
    box-shadow:var(--sombra-hover);
}


/* BOTÓN */

.botones-encuesta {
 background:var(--color-primario);

    color:#ffffff;

    border:none;

    padding:12px 40px;

    border-radius:30px;

    font-size:1.1rem;

    font-weight:bold;

    cursor:pointer;

    transition:var(--transicion);
}

.botones-encuesta button {
  background:var(--color-primario);

    color:#ffffff;

    border:none;

    padding:12px 30px;

    border-radius:30px;

    font-size:1rem;

    cursor:pointer;

    transition:var(--transicion);

}

.botones-encuesta button:hover {
    background:var(--color-secundario);

    transform:translateY(-2px);

}

.opcion:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 50%;
}

/*==================================================
                MODAL ENCUESTA
==================================================*/

.modal-encuesta{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,.65);

    align-items:center;
    justify-content:center;

    z-index:9999;

}

.modal-contenido{

    width:90%;
    max-width:500px;

    background:#ffffff;

    padding:40px 35px;

    border-radius:15px;

    text-align:center;

    box-shadow:var(--sombra-hover);

    animation:aparecerModal .3s ease;

}

.modal-icono{

    width:64px;
    height:64px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:#00565b;

    color:#ffffff;

    border-radius:50%;

    font-size:2rem;
    font-weight:bold;

}

.modal-contenido h2{

    color:var(--color-primario);

    margin-bottom:15px;

}

.modal-contenido p{

    color:#555;

    margin-bottom:10px;

}

.modal-mensaje{

    margin-top:20px;

    line-height:1.5;

}

.modal-contenido button{

    margin-top:25px;

    background:var(--color-primario);

    color:#ffffff;

    border:none;

    padding:12px 30px;

    border-radius:30px;

    font-size:1rem;

    font-weight:bold;

    cursor:pointer;

    transition:var(--transicion);

}

.modal-contenido button:hover{

    background:var(--color-secundario);

    transform:translateY(-2px);

}


/* Animación */

@keyframes aparecerModal{

    from{

        opacity:0;

        transform:translateY(20px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}