body { 
        font-family: Arial, sans-serif;
        /* font-size: 2rem;  */
        background-color: #d1e7dd;
        padding: 20px;
    }

    .step { display: none; }
    .step.active { display: block; }
    .emotion-block { margin-top: 20px; border-left: 4px solid #0e422a; padding-left: 15px; }

    /* h1, h2, h3 { text-align: center; color: #146c43; }
    .section { margin-bottom: 40px; }
    .container { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
    .column { flex: 1; background: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
    .emociones-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .emocion-item { text-align: center; position: relative; }
    .emocion-img { width: 100%; height: auto; object-fit: cover; border-radius: 10px; transition: border 0.3s ease; cursor: pointer; }
    input[type="radio"] { display: none; }
    input[type="radio"]:checked + label img {
        border: 10px solid #146c43;
    }
    label { display: block; margin-top: 10px; cursor: pointer; font-weight: bold; }
    .info-box {
        background: #a3cfbb;
        border-radius: 10px;
        padding: 25px;
        margin-top: 10px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
        display: none;
        text-align: left;
    }
    .info-box p { margin: 50px 0; }
    .step { display: none; }
    .step.active { display: block; }
    .emotion-block { margin-top: 20px; border-left: 4px solid #ddd; padding-left: 15px; }

    @media (max-width: 992px) {
        .emociones-grid { grid-template-columns: 1fr; }
        .container { flex-direction: column; }
        .column { width: 100%; margin-bottom: 20px; }
    } */