<!DOCTYPE html>
<html>
<head>
<style>
html { overflow-y: scroll; }
body {background-color: white;}
h1   {color: black;}
p    {color: black;}

/*Add some spacing*/
.faq-section{
    /*margin: 40px 0;*/
    position: relative;
}

/*Hide the paragraphs*/
.faq-section p{
    display: none;
}   

/*Hide the checkboxes */
.faq-section input{
    position: absolute;
    z-index: 2;
    cursor: pointer;
    opacity: 0;         
    display: none\9; /* IE8 and below */
    margin: 0;          
    width: 100%;
    height: 36px;
}

/*Show only the clipped intro */
.faq-section label+p{
    display: block; 
    color: #999;
    font-size: .7em;
    transition: all .15s ease-out;
    /* Clipping text */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;                       
}

/*If the checkbox is checked, show all paragraphs*/
.faq-section input[type=checkbox]:checked~p{
    display: block;
    color: #444;
    font-size: 0.6em;
    /* restore clipping defaults */
    text-overflow: clip; 
    white-space: normal;
    overflow: visible;  
}

/*Style the label*/
.faq-section label{
    font-size: 0.75em;
    background: #eee;
    display: block;
    position: relative;
    /*height: 20px;*/
    padding: 7px 10px;
    font-weight: bold;
    border: 1px solid #ddd;
    border-left: 3px solid #888;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    transition: all .15s ease-out;          
}

/*Remove text selection when toggle-ing*/
.faq-section label::selection{
    background: none;
}

.faq-section label:hover{
    background: #4BDFE7;
}

/*If the checkbox is checked, style the label accordingly*/
.faq-section input[type=checkbox]:checked~label{
    border-color: #25AAE1;          
    background: #5CBFE9;
    background-image: linear-gradient(to bottom, #fff, #5CBFE9);
    box-shadow: 0 0 1px rgba(0,0,0,.4);             
}

/*Label's arrow - default state */
.faq-section label::before{
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -6px;
    border: 6px solid transparent;
    border-left-color: inherit; 
}

/*Update the right arrow*/
.faq-section input[type=checkbox]:checked~label::before{
    border: 6px solid transparent;
    border-top-color: inherit;
    margin-top: -3px;
    right: 10px;    
}

</style>
</head>
<body>

<img src="https://marvich.cl/wp-content/uploads/2020/12/images.jpg" alt="Preguntas Frecuentes" style="width:100%;">

<section class="faq-section">
    <input type="checkbox" id="q2">
    <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">La descarga de la aplicación es gratuita?</label>           
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si, la descarga de la aplicación es gratuita,</p>
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Nuestro objetivo es brindarles un mejor servicio y proporcionarles herramientas que nos ayuden en la solución de problemas.</p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q2">
    <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">La aplicación requiere conexión a internet para su funcionamiento?</label>           
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si, requiere de conexión a internet,</p>
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si no dispone de internet puede almacenar datos reportes temporales que serán enviadas una vez que se conecte a internet.</p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q2">
    <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">Los reportes son públicos?</label>           
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Los reportes pueden ser vistos solo por los funcionarios autorizados,</p>
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">sin embargo la información de quién registro el problema es privada.</p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q2">
    <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">Que función cumple la opción de otras notificaciones?</label>           
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Son todos los reportes enviados confirmados que estan en espera de solución,</p>
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Le mostrará una lista de todos los reportes vigentes a la fecha.</p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q2">
    <label style="color:#1D71B9;font-family: Verdana, Arial, Helvetica, sans-serif;" for="q2">Recibiré alguna notificación de mis reportes al ser solucionados?</label>           
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Si, el usuario recibe una notificación,</p>
    <p style="font-family: Verdana, Arial, Helvetica, sans-serif;">Se le enviará una notificación cuando el trabajo sea asignado y concluido.</p>   
</section>


</body>
</html>