@extends("layouts.zones.act")
@section('content')
<div id="rs-services" class="mt-30 pb-130">
    <div class="container-fluid">
        <div class="row text-center">
            <div class="col-lg-5 col-md-5 col-sm-12">
                <div class="col-md-12 border card-body card-act-guide act-card" id="guide" onclick="showContentCard('guide')">
                    <div class="align-middle h-200">
                        <h2 class="mt-92 fuentesensi">Guia <br> metodológica</h2>
                        <img class="mb-40 arrow-act" id="arrow-guide" src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                        <div id="description-guide" class="description-act d-none">
                            <p class="fientelig">Esta herramienta es una hoja de ruta para que
                                pueda facilitar un taller pedagógico y de sensibilización sobre conductas, prácticas y acciones discriminatorias, y las herramientas disponibles para
                                eliminarlas y construir espacios diversos.</p>
                                <button type="button" class="btn btn-light send-button font-weight-bold" onclick="showRoute()">Ver ruta</button>                                
                        </div>
                    </div>
                </div>
            </div> 
            <div class="col-lg-7 col-md-7 col-sm-12">
                <div class="row">
                    <div class="col-md-12 border card-body card-act-activities act-card"  id="activities" onclick="showContentCard('activities')">
                        <div class="align-middle h-100">
                            <h2 class="mb-0 fuentesensi">Actividades</h2>
                            <img id="arrow-activities" class="arrow-act" src="{{asset('assets/images/flecha-removebg-preview.png')}}" alt="">
                            <div id="description-activities" class="description-act d-none">
                                <p class="fientelig">En esta sección podrás descargar algunas actividades que se pueden realizar con los grupos, con el fin de que puedan hacer aplicables los conocimientos y aprendizajes obtenidos.</p>
                                    <button type="button" class="btn btn-light send-button font-weight-bold" onclick="showActivities()">Ver actividades</button>                                
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row pt-15">
                    <div class="col-md-6 border card-body card-act-deal act-card"  id="deal" onclick="showContentCard('deal')">
                        <div class="align-middle h-100 w-100">
                            <h2 class="mb-0 fuentesensi">Acuerdo no <br> vinculante</h2>
                            <img id="arrow-deal" class="arrow-act" src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="" alt="">
                            <div id="description-deal" class="description-act d-none">
                                <p class="fientelig">Proponemos un acuerdo que pueda servir para asumir un compromiso colectivo en pro de empresas más equitativas.</p>
                                    <button type="button" class="btn btn-light send-button font-weight-bold" onclick="showAgreement()">Ver acuerdos</button>                                
                            </div>
                        </div>
                    </div>
    
                    <div class="pr-30 col-md-6 border card-body card-act-policy act-card"  id="policy" onclick="showContentCard('policy')">
                        <div class="align-middle h-100 w-100">
                            <h2 class="mb-0 fuentesensi">Política de <br> trabajo</h2>
                            <img src="{{asset('assets/images/flecha-removebg-preview.png')}}" class="arrow-act" alt="">
                            <div id="description-policy" class="description-act d-none">
                                <p class="fientelig">Open Society Foundations ("OSF") está comprometida con generar un lugar de trabajo en el que todas las personas sean tratadas con respeto y dignidad. </p>
                                    <button type="button" class="btn btn-light send-button font-weight-bold">Descargar política</button>                                
                            </div>
                        </div>
                    </div>
                </div>

            </div> 
        </div>
        {{-- body ruta --}}
        <div class="mt-5 text-center d-none" id="route-text">
            <h5>CLICK EN CADA PASO</h5>
        </div>
        <div class="text-center d-none" id="route">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="col-md-12 border border-dark card-body step-card" id="step-one">
                        <div class="align-middle h-200">
                            <h5 class="act-text-color">- paso uno -</h5>
                            <h2 class="mt">Bienvenida</h2>
                            <button class="btn rounded-circle btn-sm bg-act-color" data-toggle="modal" data-target="#exampleModal"><i class="fa-solid fa-plus fa-lg black-text-color"></i></button>
                        </div>
                    </div>
                </div> 
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="col-md-12 border border-dark card-body step-card " id="step-two">
                        <div class="align-middle h-200">
                            <h5 class="act-text-color mb-0">- paso dos -</h5>
                            <h2 class="mb-2">Acuerdos e <br> introducción</h2>
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-toggle="modal" data-target="#modal-two"><i class="fa-solid fa-plus fa-lg black-text-color"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-15">
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="col-md-12 border border-dark card-body step-card" id="step-three">
                        <div class="align-middle h-200">
                            <h5 class="act-text-color mb-0">- paso tres -</h5>
                            <h2 class="mb-2">Apropiación de <br> conceptos</h2>
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-toggle="modal" data-target="#modal-three"><i class="fa-solid fa-plus fa-lg black-text-color"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="col-md-12 border border-dark card-body step-card" id="step-four">
                        <div class="align-middle h-200">
                            <h5 class="act-text-color mb-0">- paso cuatro -</h5>
                            <h2 class="mb-2">Espacio de<br> formación</h2>
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-toggle="modal" data-target="#modal-four"><i class="fa-solid fa-plus fa-lg black-text-color"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div class="col-md-12 border border-dark card-body step-card" id="step-five">
                        <div class="align-middle h-200">
                            <h5 class="act-text-color">- paso cinco -</h5>
                            <h2>A mí también</h2>
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-toggle="modal" data-target="#modal-five"><i class="fa-solid fa-plus fa-lg black-text-color"></i></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-15">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="col-md-12 border border-dark card-body step-card" id="step-six">
                        <div class="align-middle h-200">
                            <h5 class="act-text-color mb-1">- paso seis -</h5>
                            <h2 class="mb-1">Construcción <br> colectiva</h2>
                            <button class="btn rounded-circle btn-sm bg-act-color" data-toggle="modal" data-target="#modal-six"><i class="fa-solid fa-plus fa-lg black-text-color"></i></button>
                        </div>
                    </div>
                </div> 
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="col-md-12 border border-dark card-body step-card" id="step-seven">
                        <div class="align-middle h-200">
                            <h5 class="act-text-color">- paso siete -</h5>
                            <h2 class="">Cierre</h2>
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-toggle="modal" data-target="#modal-seven"><i class="fa-solid fa-plus fa-lg black-text-color"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Actividades --}}
        <div class="row mt-5 d-none" id="activities-block">
            <div class="col-12 " >
                <div class="toggle-act-container text-center d-flex justify-content-around">
                    <div class="toggle-container-item active">
                        <a class="btn toggle-act black-text-color bg-light toggle-act-active">CARACTERÍSTICAS DE TU PERSONALIDAD</a>
                    </div>
                    <div class="toggle-container-item" id="second-question-toggle">
                        <a class="btn toggle-act black-text-color bg-light" id="second-question-toggle-child">AUTOCONOCIMIENTO</a>
                    </div>
                    <div class="toggle-container-item" id="third-question-toggle">
                        <a class="btn toggle-act black-text-color bg-light" id="third-question-toggle-child">A MI TAMBIÉN ME PASÓ…</a>
                    </div>
                </div>
                {{-- first group questions --}}
                <div class="body-custom-questions form-questions-act" id="first-question">
                    <div class="row mt-5">
                        <div class="col-12">
                            <div class="question ml-5 text-center">
                                <p class="m-0"><span class="question-number act-text-color font-weight-bold">1 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>¿Qué importancia crees que tiene la equidad de género en el lugar de trabajo? </p>
                                <input type="text" class="mt-4 custom-input-text act-text-color" id="act-q1" placeholder="Escribe tu respuesta acá">
                            </div>
                        </div>
                        <div class="row mt-5">
                            <div class="col-12">
                                <div class="question ml-5 text-center">
                                    <p class="m-0"><span class="question-number act-text-color font-weight-bold">2 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>Escribe dos características que no te gusten y de las cuales no te sientas orgullosa/o y sientas que
                                        debas trabajar en ellas. </p>
                                    <input type="text" class="mt-4 custom-input-text act-text-color" id="act-q2" placeholder="Escribe tu respuesta acá">
                                </div>
                            </div>
                                <div class="text-center mt-5 text-center w-100">
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="nextQuestion('second-question')">Siguiente</button>
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Enviar respuestas</button>
                                    {{-- <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar mis respuestas</button>
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar formato</button> --}}
                                </div>
                            <p class="m-0 text-secondary">
                            Recuerde que <br>
                            <ol class="text-secondary">
                                <li>Si decide enviar las respuestas, su identidad quedará anónima. Los resultados
                                    solo servirán para la mejora empresarial en temas equidad de género e inclusión.</li>
                                <li>Después de enviar las respuestas, tiene la opción de descargarlas.</li>
                                <li>Puede descargar el formato sin diligenciar para hacerlo de forma análoga.</li>
                            </ol>
                        </div>
                    </div>
                </div>
                <div class="body-custom-questions-2 form-questions-act d-none" id="second-question">
                    <div class="row mt-5">
                        <div class="col-12">
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">SEXO <i class="fa-solid fa-arrow-right fa-2xs"></i></span><b>YO SOY.</b> <span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-flex">
                                    <label for="Hombre">Hombre</label><br>
                                    <input type="radio" id="Hombre" name="i_am" class="custom-radio" value="Hombre">
                                    <label for="Mujer">Mujer</label><br>
                                    <input type="radio" id="Mujer" name="i_am" class="custom-radio" value="Mujer">
                                    <label for="Intersexual">Intersexual</label>
                                    <input type="radio" id="Intersexual" name="i_am" class="custom-radio" value="Intersexual">
                                </div>
                            </div>
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">ORIENTACIÓN SEXUAL <i class="fa-solid fa-arrow-right fa-2xs"></i></span><b>YO ME SIENTO.</b> <span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-flex">
                                    <label for="Heterosexual">Heterosexual</label><br>
                                    <input type="radio" id="Heterosexual" name="i_feeling" class="custom-radio" value="Heterosexual">
                                    <label for="Pansexual">Pansexual</label><br>
                                    <input type="radio" id="Pansexual" name="i_feeling" class="custom-radio" value="Pansexual">
                                    <label for="Bisexual">Bisexual</label><br>
                                    <input type="radio" id="Bisexual" name="i_feeling" class="custom-radio" value="Bisexual">
                                    <label for="Homosexual">Homosexual</label><br>
                                    <input type="radio" id="Homosexual" name="i_feeling" class="custom-radio" value="Homosexual">
                                    <label for="Asexual">Asexual</label><br>
                                    <input type="radio" id="Asexual" name="i_feeling" class="custom-radio" value="Asexual">
                                </div>
                                <b>PORQUE ME ATRAEN</b>
                                <div class="d-flex">
                                    <label for="Mujeres">Mujeres</label><br>
                                    <input type="radio" id="Mujeres" name="attraction" class="custom-radio" value="Mujeres">
                                    <label for="Hombres">Hombres</label><br>
                                    <input type="radio" id="Hombres" name="attraction" class="custom-radio" value="Hombres">
                                    <label for="No_Binaries">No Binaries</label>
                                    <input type="radio" id="No_Binaries" name="attraction" class="custom-radio" value="No Binaries">
                                    <label for="Todxs">Todxs</label>
                                    <input type="radio" id="Todxs" name="attraction" class="custom-radio" value="Todxs">
                                    <label for="Ninguno">Ninguno</label>
                                    <input type="radio" id="Ninguno" name="attraction" class="custom-radio" value="Ninguno">
                                </div>
                            </div>
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">IDENTIDAD DE GÉNERO <i class="fa-solid fa-arrow-right fa-2xs"></i></span><b>YO ME IDENTIFICO CON.</b> <span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-flex">
                                    <label for="Femenino">Femenino</label><br>
                                    <input type="radio" id="Femenino" name="identity" class="custom-radio" value="Femenino">
                                    <label for="Masculino">Masculino</label><br>
                                    <input type="radio" id="Masculino" name="identity" class="custom-radio" value="Masculino">
                                    <label for="No_Binarie">No Binarie</label>
                                    <input type="radio" id="No_Binarie" name="identity" class="custom-radio" value="No Binarie">
                                    <label for="Fluido">Fluido</label><br>
                                    <input type="radio" id="Fluido" name="identity" class="custom-radio" value="Fluido">
                                </div>
                            </div>
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">EXPRESIÓN DE GÉNERO <i class="fa-solid fa-arrow-right fa-2xs"></i></span><b>YO ME EXPRESO DE MANERA.</b> <span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-flex">
                                    <label for="Femeninob">Femenino</label><br>
                                    <input type="radio" id="Femeninob" name="expression" class="custom-radio" value="Femenino">
                                    <label for="Masculinob">Masculino</label><br>
                                    <input type="radio" id="Masculinob" name="expression" class="custom-radio" value="Masculino">
                                    <label for="Androgeno">Andrógeno</label><br>
                                    <input type="radio" id="Androgeno" name="expression" class="custom-radio" value="Andrógeno">
                                </div>
                                <p class="m-0">Cuando las personas se refieren a mí prefiero que usen los pronombre.<span class="act-text-color font-weight-bold">(selecciona una opción)</span></p>
                                <div class="d-flex">
                                    <label for="ella">Ella</label><br>
                                    <input type="radio" id="ella" name="pronoun" class="custom-radio" value="Ella">
                                    <label for="el">El</label><br>
                                    <input type="radio" id="el" name="pronoun" class="custom-radio" value="El">
                                    <label for="elle">Elle</label><br>
                                    <input type="radio" id="elle" name="pronoun" class="custom-radio" value="Elle">
                                </div>
                            </div>
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">PERTENEZCO A <i class="fa-solid fa-arrow-right fa-2xs"></i></span><span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-flex">
                                    <label for="afrodescendientes">afrodescendientes</label><br>
                                    <input type="radio" id="afrodescendientes" name="minority" class="custom-radio" value="afrodescendientes">
                                    <label for="palenquera">palenquera/o</label><br>
                                    <input type="radio" id="palenquera" name="minority" class="custom-radio" value="palenquera/o">
                                    <label for="raizal">raizal</label>
                                    <input type="radio" id="raizal" name="minority" class="custom-radio" value="raizal">
                                    <label for="indigena">indigena</label><br>
                                    <input type="radio" id="indigena" name="minority" class="custom-radio" value="indigena">
                                    <label for="rom">rom</label><br>
                                    <input type="radio" id="rom" name="minority" class="custom-radio" value="rom">
                                </div>
                                <b>MI RAZA ES</b>
                                <div class="d-flex">
                                    <label for="Blanca">Blanca</label><br>
                                    <input type="radio" id="Blanca" name="race" class="custom-radio" value="Blanca">
                                    <label for="Negra">Negra</label><br>
                                    <input type="radio" id="Negra" name="race" class="custom-radio" value="Negra">
                                    <label for="Mestiza">Mestiza</label><br>
                                    <input type="radio" id="Mestiza" name="race" class="custom-radio" value="Mestiza">
                                </div>
                            </div>
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">¿TENGO ALGUNA DISCAPACIDAD? <i class="fa-solid fa-arrow-right fa-2xs"></i></span><span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-flex">
                                    <label for="Si">Si</label><br>
                                    <input type="radio" id="Si" name="discapacity" class="custom-radio" value="Si">
                                    <label for="No">No</label><br>
                                    <input type="radio" id="No" name="discapacity" class="custom-radio" value="No">
                                </div>
                                <b>¿DE QUÉ TIPO?</b>
                                <div class="d-flex">
                                    <label for="Fisica">Física</label><br>
                                    <input type="radio" id="Fisica" name="type_discapacity" class="custom-radio" value="Física">
                                    <label for="Mental">Mental</label><br>
                                    <input type="radio" id="Mental" name="type_discapacity" class="custom-radio" value="Mental">
                                    <label for="Neurodivergente">Neurodivergente</label><br>
                                    <input type="radio" id="Neurodivergente" name="type_discapacity" class="custom-radio" value="Neurodivergente">
                                </div>
                            </div>
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">TENGO <i class="fa-solid fa-arrow-right fa-2xs"></i></span><span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-inline">
                                    <div class="d-flex">
                                        <label for="age_18">Entre 18 y 28 años, soy jóven según la normatividad colombiana</label><br>
                                        <input type="radio" id="age_18" name="age" class="custom-radio" value="Entre 18 y 28 años, soy jóven según la normatividad colombiana">
                                    </div>
                                    <div class="d-flex">
                                        <label for="age_29">Entre 29 y 54, soy una persona adulta según la normatividad colombiana</label><br>
                                        <input type="radio" id="age_29" name="age" class="custom-radio" value="Entre 29 y 54, soy una persona adulta según la normatividad colombiana">
                                    </div>
                                    <div class="d-flex">
                                        <label for="age_55">Más de 55 años, soy una persona adulta mayor según la normatividad colombiana</label><br>
                                        <input type="radio" id="age_55" name="age" class="custom-radio" value="Más de 55 años, soy una persona adulta mayor según la normatividad colombiana">
                                    </div>
                                </div>
                            </div>
                            <div class="question ml-5 text-left bottom-border-question">
                                <p class="m-0"><span class="question-number-without-marginl act-text-color font-weight-bold">MI NIVEL EDUCATIVO ES <i class="fa-solid fa-arrow-right fa-2xs"></i></span><span class="act-text-color font-weight-bold">(selecciona una opción)</span> </p>
                                <div class="d-flex">
                                    <label for="Bachiller">Bachiller</label><br>
                                    <input type="radio" id="Bachiller" name="education_level" class="custom-radio" value="Bachiller">
                                    <label for="Tecnico">Tecnico</label><br>
                                    <input type="radio" id="Tecnico" name="education_level" class="custom-radio" value="Tecnico">
                                    <label for="Profesional">Profesional</label>
                                    <input type="radio" id="Profesional" name="education_level" class="custom-radio" value="Profesional">
                                    <label for="Posgrado">Posgrado</label><br>
                                    <input type="radio" id="Posgrado" name="education_level" class="custom-radio" value="Posgrado">
                                </div>
                                <b>¿TUVE EDUCACIÓN SUPERIOR PRIVADA?</b>
                                <div class="d-flex">
                                    <label for="Sib">Si</label><br>
                                    <input type="radio" id="Sib" name="privacity_education" class="custom-radio" value="Si">
                                    <label for="Nob">No</label><br>
                                    <input type="radio" id="Nob" name="privacity_education" class="custom-radio" value="No">
                                </div>
                                <div class="text-center mt-5 text-center w-100">
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="nextQuestion('third-question')">Siguiente</button>
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Enviar respuestas</button>
                                    {{-- <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar mis respuestas</button>
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar formato</button> --}}
                                </div>
                                <p class="m-0 text-secondary">
                                Recuerde que <br>
                                <ol class="text-secondary">
                                    <li>Si decide enviar las respuestas, su identidad quedará anónima. Los resultados
                                        solo servirán para la mejora empresarial en temas equidad de género e inclusión.</li>
                                    <li>Después de enviar las respuestas, tiene la opción de descargarlas.</li>
                                    <li>Puede descargar el formato sin diligenciar para hacerlo de forma análoga.</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="body-custom-questions-2 form-questions-act d-none" id="third-question">
                    <div class="row mt-5">
                        <div class="col-12">
                            <div class="question ml-5 text-center">
                                <p class="m-0"><span class="question-number act-text-color font-weight-bold">1 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>Me han preguntado de qué colegio/universidad me gradué. ¿Cómo me sentí</p>
                                <input type="text" class="mt-4 custom-input-text act-text-color" id="college" placeholder="Escribe tu respuesta acá">
                            </div>
                        </div>
                        <div class="row mt-5">
                            <div class="col-12">
                                <div class="question ml-5 text-center">
                                    <p class="m-0"><span class="question-number act-text-color font-weight-bold">2 <i class="fa-solid fa-arrow-right fa-2xs"></i></span>Me han hecho comentarios sobre mi ropa o apariencia física en el trabajo ¿Cómo me sentí?</p>
                                    <input type="text" class="mt-4 custom-input-text act-text-color" id="comments" placeholder="Escribe tu respuesta acá">
                                </div>
                            </div>
                                <div class="text-center mt-5 text-center w-100">
                                    <button type="button " class="btn btn-light send-button font-weight-bold">Siguiente</button>
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Enviar respuestas</button>
                                    {{-- <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar mis respuestas</button>
                                    <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar formato</button> --}}
                                </div>
                            <p class="m-0 text-secondary">
                            Recuerde que <br>
                            <ol class="text-secondary">
                                <li>Si decide enviar las respuestas, su identidad quedará anónima. Los resultados
                                    solo servirán para la mejora empresarial en temas equidad de género e inclusión.</li>
                                <li>Después de enviar las respuestas, tiene la opción de descargarlas.</li>
                                <li>Puede descargar el formato sin diligenciar para hacerlo de forma análoga.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- Acuerdo --}}
        <div class="row mt-5 d-none" id="agreement">
            <div class="col-12" >
                <div class="body-custom-questions-2 form-questions text-center">
                    <p class="m-0"><span class="act-text-color font-weight-bold">FORMATO ACUERDO NO VINCULANTE </span> </p>

                    <p class="d-flex mt-5">Yo, <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-60" id="me-agreement" placeholder="Escribe tu respuesta acá">, identificada(o) con el documento de</p>
                    <p class="d-flex">identidad No. <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="identification-agreement"> ,expedido en <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="city-agreement"> , obrando en nombre y representación  </p>
                    <p class="d-flex">de <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="identification-representaton-agreement"> registrada con NIT nº <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="nit-agreement">  manifiesto de manera libre </p>
                    <p class="d-flex">nuestro compromiso de:</p>
                    <p class="text-left ml-3">
                        <ol class="text-left">
                            <li>Respetar los derechos humanos y hacer frente a las consecuencias negativas de nuestras acciones.</li>
                            <li>Fomentar la diversidad y promover una cultura de respeto e igualdad. </li>
                            <li>Conocer y cumplir la normativa nacional para prevenir, corregir y sancionar el acoso laboral y otros hostigamientos en el marco de las relaciones de trabajo.</li>
                            <li>Conocer e implementar los Principios Rectores sobre las Empresas y los Derechos Humanos adoptados por el Consejo de Derechos Humanos en su Resolución 17/4, del 16 de junio de 2011. </li>
                        </ol>
                    </p>
                    <p class="d-flex">Se firma a los <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-5" id="day-agreement"> días del mes <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="month-agreement"> de <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="year-agreement"></p>


                    <p class="d-flex mt-5">Nombre<input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="name-sign-agreement"></p>
                    <p class="d-flex">Representante legal /vocera(o) <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="represent-agreement"></p>
                    <p class="d-flex mb-2">Empresa <input type="text" class="mt-0 border-bottom-form-act custom-input-text act-text-color w-20" id="company-agreement"></p>
                    <div class="body-custom-question"> 
                        <div class="text-center mt-5 text-center w-100">
                            <button type="button " class="btn btn-light send-button font-weight-bold">Siguiente</button>
                            <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Enviar respuestas</button>
                            {{-- <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar mis respuestas</button>
                            <button type="button " class="btn btn-light send-button font-weight-bold" onclick="saveQuestion(1)">Descargar formato</button> --}}
                        </div>
                        <div class="text-left">
                            <p class="m-0 text-secondary">
                            Recuerde que <br>
                            <ol class="text-secondary">
                                <li>Si decide enviar las respuestas, su identidad quedará anónima. Los resultados
                                    solo servirán para la mejora empresarial en temas equidad de género e inclusión.</li>
                                <li>Después de enviar las respuestas, tiene la opción de descargarlas.</li>
                                <li>Puede descargar el formato sin diligenciar para hacerlo de forma análoga.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>       
</div>

<!-- Modal 1-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1 offset-md-11">
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-x fa-lg black-text-color"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h2 class="modal-title" id="exampleModalLabel">Bienvenida</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-outline-info mt-12">Tiempo de paso: 30 min</button>
                        </div>
                    </div>
                </div>
        </div>
        <div class="container">
            <hr class="border border-dark">
        </div>
        <div class="modal-body">
            <div class="container">
                <div>
                    <h5 class="mb-1"><b>LOGISTICA/MATERIALES</b></h5>
                    <ul>
                        <li>Escarapelas con nombre y pronombres</li>
                        <li>Mesa de alimentos para pausas activas</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>APOYO</b></h5>
                    <ul>
                        <li>Compra dde alimentos para compartir (pasabocas)</li>
                        <li>Cafetera, té o aguas</li>
                        <li>Presentación taller - Diapositiva 1 <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Descargar</button></li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>RESPONSABLES</b></h5>
                    <ul>
                        <li>Establezcan los siguientes roles para el taller</li>
                        <li>Moderador o anfitrión de espacio: Es quien abrirá el espacio y conducirá todos los pasos metodológicos
                            del taller.</li>
                        <li>Apoyo: Como su nombre lo indica, estará dispuesta/o/e para apoyo logístico y metodológico en todo el
                            taller.</li>
                        <li>Relator/a/e: Es la persona encargada de sistematizar todas las intervenciones del espacio</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>DESARROLLO</b></h5>
                    <ul>
                        <li>Abrir el espacio, dar la bienvenida e introducir el porqué y quienes están acargo del taller.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('two')" data-dismiss="modal">Siguiente</button>                                

        </div>
      </div>
    </div>
</div>
<!-- Modal 2-->
<div class="modal fade" id="modal-two" tabindex="-1" role="dialog" aria-labelledby="modal-two" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1 offset-md-11">
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-x fa-lg black-text-color"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h2 class="modal-title" id="exampleModalLabel">Acuerdos e <br>introducción</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-outline-info mt-12">Tiempo de paso: 30 min</button>
                        </div>
                    </div>
                </div>
        </div>
        <div class="container">
            <hr class="border border-dark">
        </div>
        <div class="modal-body">
            <div class="container">
                <div>
                    <h5 class="mb-1"><b>LOGISTICA/MATERIALES</b></h5>
                    <ul>
                        <li>Sillas en semi círculo sin mesas.</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>APOYO</b></h5>
                    <ul>
                        <li>Presentación taller - Diapositiva 2 <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Descargar</button></li>
                        <li>
                            ACUERDOS DE VALOR: 
                            <ul>
                                <li>Bitácoras</li>
                                <li>Conexión al 100%</li>
                                <li>Espacio seguro</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>RESPONSABLES</b></h5>
                    <ul>
                        <li>Moderador o anfitrion de espacio: Es quien abrira el espacio y conducira todos los pasos metodologicos
                            del taller</li>
                        <li>Facilitador 2: La persona que este al frente del proceso y quien conozaca la continuidad del mismo
                            dentro de la organización, puede estar acompañada de la persona que vaya a facilitar el taller.</li>
                        <li>Apoyo: Como su nombre lo indica, estará dispuesta/o/e para apoyo logístico y metodológico en todo el
                            taller.</li>
                        <li>Relator/a/e: Es la persona encargada de sistematizar todas las intervenciones del espacio</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>DESARROLLO</b></h5>
                    <ul>
                        <li>Se hace una actividad corta y sencilla, a modo de rompe hielo. Se propone un ejercicio de respiración
                            consciente para aterrizar en el momento y estar plenamente presentes</li>
                        <li>Se socializan las "reglas del juego" que se acordar</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>JUSTIFICACIÓN</b></h5>
                    Para garantizar la fluidez del espacio es importante contar con la plena atención de las personas
                    participantes y recordar los acuerdos que se van a tener en cuenta.
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('one')" data-dismiss="modal">Anterior</button>                                
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('three')" data-dismiss="modal">Siguiente</button>                                

        </div>
      </div>
    </div>
</div>
<!-- Modal 3-->
<div class="modal fade" id="modal-three" tabindex="-1" role="dialog" aria-labelledby="modal-three" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1 offset-md-11">
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-x fa-lg black-text-color"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h2 class="modal-title" id="exampleModalLabel">Apropiación de <br> conceptos</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-outline-info mt-12">Tiempo de paso: 15 min</button>
                        </div>
                    </div>
                </div>
        </div>
        <div class="container">
            <hr class="border border-dark">
        </div>
        <div class="modal-body">
            <div class="container">
                <div>
                    <h5 class="mb-1"><b>LOGISTICA/MATERIALES</b></h5>
                    <ul>
                        <li>Dulces.</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>APOYO</b></h5>
                    <ul>
                        <li>Presentación taller - Diapositiva 3 a la 10 <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Descargar</button></li>
                        <li>
                            ACUERDOS DE VALOR: 
                            <ul>
                                <li>Bitácoras</li>
                                <li>Conexión al 100%</li>
                                <li>Respeto absoluto</li>
                                <li>Espacio seguro</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>RESPONSABLES</b></h5>
                    <ul>
                        <li>Moderador o anfitrion de espacio: Es quien abrira el espacio y conducira todos los pasos metodologicos
                            del taller</li>
                        <li>Relator/a/e: Es la persona encargada de sistematizar todas las intervenciones del espacio</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>DESARROLLO</b></h5>
                    <ul>
                        <li>Realizar una trivia corta para validar los conocimientos sobre los conceptos trabajados en la sesión
                            anterior. Para motivar la participación y continuar rompiendo el hielo, se puede entregar un dulce a quien
                            conteste correctamente</li>
                        <li>Se hace uso de la presentación, donde se encuentran incluídas las preguntas y respuestas correctas.</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>JUSTIFICACIÓN</b></h5>
                    Se pretende validar y recordar los conceptos trabajados en la sesión anterior, mediante un ejercicio informal
                    y que ayude a romper el hielo para comenzar la nueva sesión de manera enérgica y dinámica. Recordar los
                    conceptos:
                    <ul>
                        <li>SEXO</li>
                        <li>IDENTIDAD DE GÉNERO</li>
                        <li>EXPRESIÓN DE GÉNERO</li>
                        <li>ORIENTACIÓN SEXUAL</li>
                        <li>SITUACIÓN SOCIOECONÓMICA</li>
                        <li>RAZA / ETNIA</li>
                        <li>DISCAPACIDAD</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('two')" data-dismiss="modal">Anterior</button>                                
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('four')" data-dismiss="modal">Siguiente</button>                                

        </div>
      </div>
    </div>
</div>
<!-- Modal 4-->
<div class="modal fade" id="modal-four" tabindex="-1" role="dialog" aria-labelledby="modal-four" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1 offset-md-11">
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-x fa-lg black-text-color"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h2 class="modal-title" id="exampleModalLabel">Espacio de <br> Formación</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-outline-info mt-12">Tiempo de paso: 20 min</button>
                        </div>
                    </div>
                </div>
        </div>
        <div class="container">
            <hr class="border border-dark">
        </div>
        <div class="modal-body">
            <div class="container">
                <div>
                    <h5 class="mb-1"><b>APOYO</b></h5>
                    <ul>
                        <li>Presentación taller - Diapositiva 11 y 12 <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Descargar</button></li>
                        <li>
                            <ul>
                                <li>Normativa</li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>RESPONSABLES</b></h5>
                    <ul>
                        <li>Moderador o anfitrion de espacio: Es quien abrira el espacio y conducira todos los pasos metodologicos
                            del taller</li>
                        <li>Relator/a/e: Es la persona encargada de sistematizar todas las intervenciones del espacio</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>DESARROLLO</b></h5>
                    <ul>
                        <li>Explicar claramente la definición de los conceptos de acoso, acoso sexual, acoso laboral, violencia. Hacer
                            referencia al Convenio de la OIT.</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>JUSTIFICACIÓN</b></h5>
                    <ul>
                        <li>Es importante ponerle nombre a las situaciones y hacer consciencia frente a situaciones violentas que
                            se han normalizado</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('three')" data-dismiss="modal">Anterior</button>                                
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('five')" data-dismiss="modal">Siguiente</button>                                

        </div>
      </div>
    </div>
</div>
<!-- Modal 5-->
<div class="modal fade" id="modal-five" tabindex="-1" role="dialog" aria-labelledby="modal-five" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1 offset-md-11">
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-x fa-lg black-text-color"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h2 class="modal-title" id="exampleModalLabel">A mí también</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-outline-info mt-12">Tiempo de paso: 30 min</button>
                        </div>
                    </div>
                </div>
        </div>
        <div class="container">
            <hr class="border border-dark">
        </div>
        <div class="modal-body">
            <div class="container">
                <div>
                    <h5 class="mb-1"><b>APOYO</b></h5>
                    <ul>
                        <li>Vídeo "Situaciones particulares de discriminación por género en el trabajo" <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Ver vídeo</button></li>
                        <li>Presentación taller - Diapositiva 13 y 17 <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Descargar</button></li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>RESPONSABLES</b></h5>
                    <ul>
                        <li>Moderador o anfitrion de espacio: Es quien abrira el espacio y conducira todos los pasos metodologicos
                            del taller</li>
                        <li>Relator/a/e: Es la persona encargada de sistematizar todas las intervenciones del espacio</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>DESARROLLO</b></h5>
                    <ul>
                        <li>Se proyectará el video. Al finalizar se pregunta si alguna vez han vivido algo parecido.</li>
                        <li>Se le pide a las partipantes que se pongan de pie y se hagan en el centro del espacio. </li>
                        <li>Se comienzan a presentar escenarios adicionales y se le pide a las participantes que se muevan a un
                            lado o a otro del salón según si han vivido el escenario o no.</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>JUSTIFICACIÓN</b></h5>
                    <ul>
                        <li>Generar conciencia individual y movilizar conversaciones y cuestionamientos en colectivo en torno a lo
                            que evidencia cada escenario. Se espera que a través de la relación con escenarios cotidianos haya una
                            interiorización más profunda de los conceptos compartidos y una concientización tanto de quienes han
                            ejercido dichas violencias y discriminaciones, como de quienes han sido víctimas de ellas.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('four')" data-dismiss="modal">Anterior</button>                                
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('six')" data-dismiss="modal">Siguiente</button>                                

        </div>
      </div>
    </div>
</div>
<!-- Modal 6-->
<div class="modal fade" id="modal-six" tabindex="-1" role="dialog" aria-labelledby="modal-six" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1 offset-md-11">
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-x fa-lg black-text-color"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h2 class="modal-title" id="exampleModalLabel">Construcción <br>  colectiva</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-outline-info mt-12">Tiempo de paso: 45 min</button>
                        </div>
                    </div>
                </div>
        </div>
        <div class="container">
            <hr class="border border-dark">
        </div>
        <div class="modal-body">
            <div class="container">
                <div>
                    <h5 class="mb-1"><b>APOYO</b></h5>
                    <ul>
                        <li>Ovillo de lana</li>
                        <li>Presentación taller - Diapositiva 19 <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Descargar</button></li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>RESPONSABLES</b></h5>
                    <ul>
                        <li>Moderador o anfitrion de espacio: Es quien abrira el espacio y conducira todos los pasos metodologicos
                            del taller</li>
                        <li>Relator/a/e: Es la persona encargada de sistematizar todas las intervenciones del espacio</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>DESARROLLO</b></h5>
                    <ul>
                        <li>Todas las personas participantes se ponen de pie formando un círculo.</li>
                        <li>Con un ovillo de lana y a través del uso de la palabra, se pide a las participantes comenzar a aportar
                            ideas sobre qué buenas practicas les gustaria o podrían adopatrase en sus contextos laborales y cómo
                            les gustaría que se hiciera. </li>
                        <li>A medida que se da la palabra se pasa la lana tomando una pedazo en sus manos.</li>
                        <li>Desde la facilitación del taller se irán recopilando los aportes de todas las personas participantes.</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>JUSTIFICACIÓN</b></h5>
                    <ul>
                        <li>La actividad pretende que las participantes puedan reconocer que, en medio de esa diversidad, estamos
                            en un espacio y proyecto común, y que entre todas se construye la red segura. Se trata de algo que
                            todas quieren que funcione y por eso es necesario que todas pongan de su parte y trabajen en ello. Se
                            resalta la importancia de reconocer que es un tema que importa a todas sin importar el rango que
                            ocupen en sus empresas.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('five')" data-dismiss="modal">Anterior</button>                                
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('seven')" data-dismiss="modal">Siguiente</button>                                

        </div>
      </div>
    </div>
</div>
<!-- Modal 7-->
<div class="modal fade" id="modal-seven" tabindex="-1" role="dialog" aria-labelledby="modal-seven" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
                <div class="container">
                    <div class="row">
                        <div class="col-md-1 offset-md-11">
                            <button class="btn rounded-circle btn-sm bg-act-color mt-1-5" data-dismiss="modal" aria-label="Close">
                                <i class="fa-solid fa-x fa-lg black-text-color"></i>
                            </button>
                        </div>
                    </div>
                    <div class="row mt-5">
                        <div class="col-8">
                            <h2 class="modal-title" id="exampleModalLabel">Cierre</h2>
                        </div>
                        <div class="col-4 text-right">
                            <button type="button" class="btn btn-outline-info mt-12">Tiempo de paso: 25 min</button>
                        </div>
                    </div>
                </div>
        </div>
        <div class="container">
            <hr class="border border-dark">
        </div>
        <div class="modal-body">
            <div class="container">
                <div>
                    <h5 class="mb-1"><b>APOYO</b></h5>
                    <ul>
                        <li>Ovillo de lana</li>
                        <li>Presentación taller - Diapositiva 20 <button type="button" class="btn btn-primary bg-act-color black-text-color btn-sm">Descargar</button></li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>RESPONSABLES</b></h5>
                    <ul>
                        <li>Moderador o anfitrion de espacio: Es quien abrira el espacio y conducira todos los pasos metodologicos
                            del taller</li>
                        <li>Facilitador 2: La persona que este al frente del proceso y quien conozaca la continuidad del mismo
                            dentro de la organización, puede estar acompañada de la persona que vaya a facilitar el taller</li>
                        <li>Relator/a/e: Es la persona encargada de sistematizar todas las intervenciones del espacio</li>
                    </ul>
                </div>
                <div>
                    <h5 class="mb-1"><b>DESARROLLO</b></h5>
                    <ul>
                        <li>Se realiza una reflexión final en torno a resaltar la importancia de empezar desde lo personal para lograr
                            cambios realmente transformadores en lo colectivo y en el contexto laboral.</li>
                        <li>Reconocer que en medio de la diversidad estamos en un espacio y proyecto común que requiere del
                            trabajo de todas. </li>
                        <li>Recopilar recomendaciones, experiencias, apuestas para construir una cultura organizacional más
                            equitatativa.</li>
                        <li>Agradecer la participación y explicar lo que se contruye a partir de los aportes dados por las
                            participantes.</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-light send-button font-weight-bold" onclick="nextStep('six')" data-dismiss="modal">Anterior</button>                                                           
          <button type="button" class="btn btn-light send-button font-weight-bold" data-dismiss="modal">Cerrar</button>                                                           
        </div>
      </div>
    </div>
</div>
<section style="">
    <div class="row text-center">
    
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('sensibilizar')}}" class="botonsrs">Sensibilizar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('informar')}}" class="botonsrd">Diagnosticar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('diagnosticar')}}" class="botonsra">Actuar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="{{url('evaluar')}}    " class="botonsre">Evaluar</a></div>
        <div class="col-lg-2 col-md-2 mb-5 ml-3"><a href="#" class="botonsrr">Recomendados</a></div>
        
    </div>
</section>

@endsection

@section('scripts')

<script>
    function showContentCard(card){

        $(".act-card").addClass("clarify");
        $(".act-card").removeClass("strong-card");
        $(`#${card}`).removeClass("clarify");
        $(`#${card}`).addClass("strong-card");
        
        $(".arrow-act").addClass("d-inline");
        $(".description-act").addClass("d-none");
        
        $(`#arrow-${card}`).addClass("d-none");
        $(`#arrow-${card}`).removeClass("d-inline");
        $(`#description-${card}`).removeClass("d-none");

        if(card == 'activities' || card == 'deal' || card == 'policy'){
            hideBody()
        }

    }

    function nextStep(id){
        $(".step-card").removeClass("card-act-activities");
        $(`#step-${id}`).addClass("card-act-activities");
    }

    function showRoute(){
        $("#route-text").addClass("d-block");
        $("#route").addClass("d-block");
    }
    function showActivities(){
        setTimeout(() => {
            $("#activities-block").removeClass("d-none");
            $("#activities-block").addClass("d-block");
        }, 300);
    }
    function showAgreement(){
        setTimeout(() => {
            $("#agreement").removeClass("d-none");
            $("#agreement").addClass("d-block");
        }, 300);
    }
    function hideBody(){
        $("#route-text").removeClass("d-block");
        $("#route").removeClass("d-block");
        $("#activities-block").removeClass("d-block");
        $("#agreement").removeClass("d-block");
        $("#route-text").addClass("d-none");
        $("#route").addClass("d-none");
        $("#activities-block").addClass("d-none");
        $("#agreement").addClass("d-none");
    }

    function nextQuestion(id){
        $('.form-questions-act').removeClass('d-block');
        $('.form-questions-act').addClass('d-none');
        $(`#${id}`).addClass('d-block');
        $(".toggle-container-item").removeClass('active');
        $(".toggle-act").removeClass('toggle-act-active');

        $(`#${id}-toggle`).addClass('active');
        $(`#${id}-toggle-child`).addClass('toggle-act-active');

    }
</script>
@endsection