@charset "utf-8";
body {background:#f4f2ef;
	color:#32166A;
}

/*   =================================================================
                           Versión pc  
     =================================================================  */



#pe-titulo {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 120px;
    border-bottom: solid 3px #724fb9;
}
#pe-titular {
    position: absolute;
    top: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    text-align: center;
    font-size: 80px;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 30px;
    color: black;
    font-weight: 600;
}
#pe-lema {
    position: absolute;
    top: 80px;
    left: 35.2%;
    width: 100%;
    margin-top: 5px;
    font-size: 18px;
    font-family: 'Times New Roman', Times, serif;
    color: black;
    letter-spacing: 6px;
}
#logomio {
    position: absolute;
    top: 5px;
    left: 90%;
    width: 70px;
    height: 100px;
}
#pe-renglon {
    position: absolute;
    top: 122px;
    left: 0%;
    width: 100%;
    height: 30px;
    border-bottom: none;
}
#pe-renglon-t {
    position: absolute;
    top: 1px;
    left: 39%;
    width: 25%;
    color: rgb(111, 108, 108);
    letter-spacing: 5px;
    margin-top: 0px;
}
#in1 {
    position: absolute;
    top: 4px;
    left: 5%;
    width: 6%;
    height: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    border: black solid 0.8px;
    color: rgb(8, 8, 8);
    box-shadow: 4px 4px 5px rgb(36, 4, 180);
}
#in2 {
    position: absolute;
    top: 4px;
    left: 13%;
    width: 6%;
    height: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    border: black solid 0.8px;
    color: rgb(8, 8, 8);
    box-shadow: 4px 4px 5px rgb(36, 4, 180);
}
#in3 {
    position: absolute;
    top: 4px;
    left: 21%;
    width: 6%;
    height: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    border: black solid 0.8px;
    color: rgb(8, 8, 8);
    box-shadow: 4px 4px 5px rgb(36, 4, 180);
}
#in4 {
    position: absolute;
    top: 4px;
    left: 29%;
    width: 6%;
    height: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    border: black solid 0.8px;
    color: rgb(8, 8, 8);
    box-shadow: 4px 4px 5px rgb(36, 4, 180);
}
#in5 {
    position: absolute;
    top: 4px;
    left: 76%;
    width: 6%;
    height: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    border: black solid 0.8px;
    color: rgb(8, 8, 8);
    box-shadow: 4px 4px 5px rgb(36, 4, 180);
}
#in6 {
    position: absolute;
    top: 4px;
    left: 84%;
    width: 6%;
    height: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    border: black solid 0.8px;
    color: rgb(8, 8, 8);
    box-shadow: 4px 4px 5px rgb(36, 4, 180);
}
#in7 {
    position: absolute;
    top: 4px;
    left: 92%;
    width: 6%;
    height: 25px;
    text-decoration: none;
    text-align: center;
    font-size: 15px;
    border: black solid 0.8px;
    color: rgb(8, 8, 8);
    box-shadow: 4px 4px 5px rgb(36, 4, 180);
}
#in1:hover {
    background-color: rgb(189, 11, 11);
    color: #f4f2ef;
}
#in2:hover {
    background-color: red;
    color: #f4f2ef;
}
#in3:hover {
    background-color: red;
    color: #f4f2ef;
}
#in4:hover {
    background-color: red;
    color: #f4f2ef;
}
#in5:hover {
    background-color: red;
    color: #f4f2ef;
}
#in6:hover {
    background-color: red;
    color: #f4f2ef;
}
#in7:hover {
    background-color: red;
    color: #f4f2ef;
}


#atrapa {
    position: absolute;
    top: 3%;
    left: 0px;
    width: 12%;
    height: 90%;
}
#atrapa-te {
    position: absolute;
    top: 20%;
    left: 16%;
    width: 30%;
    height: 80%;
}
#atrapa-ti {
    position: absolute;
    top: 10%;
    left: 0px;
    margin-top: 0px;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: rgb(42, 55, 203);
    display: inline-block; 
    transform: scaleY(1.2); 
    letter-spacing: 0.7px;
}
#atrapa-l {
    position: absolute;
    top: 40%;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: black;
}
#cuidar {
    position: absolute;
    top: 5%;
    left: 51%;
    width: 14%;
    height: 85%;
    opacity: 0.7;
}
#cuidar-te {
    position: absolute;
    top: 20%;
    left: 68%;
    width: 32%;
    height: 80%;
}
#cuidar-ti {
    position: absolute;
    top: 10%;
    left: 0%;
    margin-top: 0px;
    width: 100%;
    font-size: 30px;
    text-align: center;
    color: rgb(42, 55, 203);
    display: inline-block; 
    transform: scaleY(1.2); 
    letter-spacing: 0.7px;
}
#cuidar-l {
    position: absolute;
    top: 40%;
    left: 0px;
    width: 100%;
    font-size: 20px;
    text-align: center;
    color: black;
}
#linea1{
    position: absolute;
    top: 270px;
    width: 100%;
    color: rgb(187, 179, 179);
    margin-top: 0px;

}
#soltar1 {
    position: absolute;
    top: 5%;
    left: 33%;
    width: 40%;
    height: 590px;
    opacity: 0.8;
    border-radius: 10px;

}
#princi-iz {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 32.5%;
    height: 485px;
}
#princi-iz-ti {
    position: absolute;
    top: 5%;
    left: 0px;
    margin-top: 0px;
    margin-bottom: 0%;
    width: 100%;
    font-size: 35px;
    color: rgb(42, 55, 203);
    display: inline-block; 
    transform: scaleY(1.2); 
    letter-spacing: 0.5px;
    text-align: center;
}
#princi-iz-le {
    position: absolute;
    top: 20%;
    left: 15%;
    width: 70%;
    font-size: 16px;
    color: black;
    text-align: justify;
}
#princi-de {
    position: absolute;
    top: 0%;
    left: 74%;
    width: 25%;
    height: 620px;
}
#princi-de-ti {
    position: absolute;
    top: 5%;
    left: 0px;
    margin-top: 0px;
    margin-bottom: 0%;
    width: 100%;
    font-size: 35px;
    color: rgb(42, 55, 203);
    display: inline-block; 
    transform: scaleY(1.2); 
    letter-spacing: 0.5px;
    text-align: center;
}
#princi-de-le {
    position: absolute;
    top: 30%;
    left: 7%;
    width: 86%;
    font-size: 16.5px;
    color: black;
    text-align: justify;
}

/*            Página principal                */

#pe-renglon-tp {
    position: absolute;
    top: 4px;
    left: 42%;
    width: 25%;
    color: rgb(111, 108, 108);
    letter-spacing: 5px;
    margin-top: 0px;
    font-size: 18px;
    margin-bottom: 0%;
}

#marco-video {
    margin-top: 0%;
    position: absolute;
    top: 155px;
    left: 40%;
    width: 35%;
    height: 520px;   
    background-color: rgb(188, 188, 173);
    vertical-align: top;

}
#video-portada {
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 450px;    
    line-height: 0;
    vertical-align: top;
}
#pri-iz {
    margin-top: 0%;
    position: absolute;
    top: 155px;
    left: 0px;
    width: 39.3%;
    height: 432px;
    border-right: solid 2px #a69fb762;
    border-bottom: solid 2px #a69fb762;
}

 #pri-titular {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    margin-top: 0px;
    font-size: 2.8em;
    text-align: center;
    display: inline-block; 
    transform: scaleY(1.6); 
    letter-spacing: 0.52px;
    color: rgb(42, 55, 203);
}

 @media (max-width: 1081px) { 
#pri-titular {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    margin-top: 0px;
    font-size: 1.2em;
    text-align: center;
    display: inline-block; 
    transform: scaleY(1.6); 
    letter-spacing: 0.52px;
    color: rgb(42, 55, 203);
}
 }


#pri-letra {
    position: absolute;
    top: 120px;
    left: 10%;
    width: 80%;
    font-size: 1em;
    color: black;
    text-align: justify;
}
#pri-de {
    position: absolute;
    top: 155px;
    left: 75.6%;
    width: 24%;
    height: 440px;
    border-left: solid 2px #a69fb762;
    border-bottom: solid 2px #a69fb762;

}
#pri-titular-de {
    position: absolute;
    top: 25px;
    left: 0%;
    width: 100%;
    margin-top: 0px;
    font-size: 2.3em;
    text-align: center;
    display: inline-block; 
    transform: scaleY(1.3); 
    letter-spacing: 1.2px;
    color: rgb(42, 55, 203);
}
#pri-letra-de {
    position: absolute;
    top: 85px;
    left: 10%;
    width: 80%;
    font-size: 0.93em;
    color: black;
    text-align: justify;
}

#eres {
    position: absolute;
    top: 375px;
    left: 40%;
    width: 24%;
    height: 30PX;
    text-decoration: none;
    border: solid 2px #32166A;
    text-align: center;
    color: black;
    display: block;   
    padding-top: 12px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0  #888888;
    text-decoration-style: double;
}
#eres:hover {
    background-color: rgb(189, 11, 11);
    color: #f4f2ef;
}

#pide-ayuda {
    position: absolute;
    top: 590px;
    left: 0%;
    width: 100%;
    height: 300px;
    z-index: -4;
    border-bottom: solid 2px #c2b9d5;
}
#pide-ayuda-1t {
    position: absolute;
    top: 20px;
    left: 2px;
    width: 35%;
    height: 70px;
    margin-top: 0px;
    text-align: center;

    font-size: 2em;
    display: inline-block; 
    transform: scaleY(1.3); 
    letter-spacing: 1.3px;
    color: rgb(42, 55, 203);
}
#pide-ayuda-1l {
    position: absolute;
    top: 66px;
    left: 2%;
    width: 35%;
    height: 110px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 16.5px;
}
#pide-ayuda-i1 {
    position: absolute;
    top: 210px;
    left: 10px;
    width: 7%;
    height: 70px;
    
}

#pide-ayuda-2 {
    position: absolute;
    top: 200px;
    left: 10%;
    width: 26%;
    height: 270px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 16.5px;
}
#pide-ayuda-3 {
    position: absolute;
    top: 120px;
    left: 42%;
    width: 31%;
    height: 170px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 16.5px;
    line-height: 1.2;
}
#pide-ayuda-4 {
    position: absolute;
    top: 20px;
    left: 78%;
    width: 19%;
    height: 270px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 0.9em;
}
 #folder {
    position: absolute;
    top: 1350px;
    left: 0%;
    width: 100%;
    height: 70px;
    background-color: #beb6b6;
}
#ubi {
    position: absolute;
    max-width: 100%;
    height: 70px;
    top: 3px;
    width: 20%;
    left: 40%;
    margin-top: 0%;
}
#folder1 {
    position: absolute;
    top: 0px;
    left: 7%;
    width: 27%;
    height: 70px;
    margin-top: 0px;
}
#folder2 {
    position: absolute;
    top: 0px;
    left: 35%;
    width: 31%;
    height: 70px;
    margin-top: 0px;
}
#tel-num {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: black;
    margin-top: 0%;
    height: 60px;
}
#correo-folder {
    position: absolute;
    margin-top: 0%;
    top: 30px;
    left: 80%;
    font-size: 20px;
    color: blue;
}
/*                       Eres                              */
#alcohol {
    position: absolute;
    top: 190px;
    width: 60%;
    border: solid 2px #888888;
    left: 20%;
}
#titulo-preguntas {
    color: black;
    text-align: center;
    padding: 20px;
    font-size: 25px;
}
#imagen-eres{
    position: absolute;
    top: 154px;
    left: 30%;
    width: 40%;
    height: 500px;
}
#ol1 {
    position: absolute;
    top: 77px;
    left: 0%;
    margin-left: 6px;
    margin-right: 5px;
}
#pregunta{
    color: black;
    font-size: 17px;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 0px;
}
#pregunta1{
    color: black;
    font-size: 17px;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
}
#fecha-actual {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 20%;
    height: 30px;
    z-index: 5;
    color: rgb(80, 78, 78);
    font-size: 20px;
    margin-top: 0%;
}
#eres-de {
    position: absolute;
    top: 152px;
    left: 71%;
    width: 28%;
    height: 682px;
    border-left: solid 2px #888888;
    padding-left: 0px;
}
#eres-de-let {
    position: absolute;
    top: 10px;
    left: 2%;
    width: 100%;
    color: black;
    font-size: 20px;
    text-align: center;
    margin-top: 0%;
}
#ol2 {
    position: absolute;
    top: 40px;
    left: 0%;
    margin-left: 0px;
    /* margin-right: 5px; */
    margin-top: 0%;
}
#emer {
    position: absolute;
    top: 655px;
    left: 30%;
    width: 40%;
    height: 200px;
    font-size: 35px;
    text-align: center;
    margin-top: 0%;
    padding-top: 50px;
}
#separa1 {
    position: absolute;
    top: 816px;
    left: 0%;
    margin: 0%;
    width: 100%;
    color: #888888;
}
#sexo {
    position: absolute;
    top: 1040px;
    left: 0%;
    width: 49%;
    height: 550px;
    padding-right: 20px;
    border-right: solid 2px #888888;
    border-bottom: solid 2px #888888;
}
#sexo-t {
    position: absolute;
    top: 5px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 35px;
    color: black;
}
#ol3 {
    position: absolute;
    top: 40px;
    left: 2px;
    width: 93%;
}
#imagen-stopsex {
    position: absolute;
    top: 817px;
    left: 1%;
    width: 49%;
    height: 300px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
    border-right: solid 2px #888888;
}
#comida {
    position: absolute;
    top: 817px;
    left: 50.3%;
    width: 49%;
    height: 660px;
    padding-right: 20px;
    border-left: solid 2px #888888;
    border-bottom: solid 2px #888888;
}
#comida-t {
    position: absolute;
    top: 5px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 35px;
    color: black;
}
#ol4 {
    position: absolute;
    top: 40px;
    left: 2px;
    width: 93%;
}

#imagen-comida {
    position: absolute;
    top: 140px;
    left: 1%;
    width: 97%;
    height: 300px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
}
#sugerencia {
    position: absolute;
    top: 1420px;
    left: 50%;
    width: 48%;
    height: 200px;
}
#final-preguntas {
    position: absolute;
    top: 20px;
    text-align: center;
    left: 2%;
    width: 98%;
    font-size: 30px;
    color: red;
}

#raya1 {
    position: absolute;
    top: 1163px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
}

/*                  lo que hacemos               */

#titulo-hacemos {
    position: absolute;
    top: 156px;
    left: 0%;
    width: 100%;
    height: 100px;
    text-align: center;
    font-size: 75px;
    color: black;
    border-bottom: solid 1.5px #888888;
    letter-spacing: 4px;
}

#ha-video1 {
    position: absolute;
    top: 258px;
    left: 0%;
    width: 30%;
    height: 400px;
    background-color: #888888;

}
#ha-video1-v {
    position: absolute;
    top: 50px;
    left: 0%;
    width: 100%;
    height: 300px;
}
#metodo {
    position: absolute;
    top: 258px;
    left: 30%;
    width: 69%;
    height: 400px;
}
#ti-metodo {
    position: absolute;
    top: 10px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: blue;
}
#te-metodo {
    position: absolute;
    top: 40px;
    left: 15px;

    column-count: 2; /* Dos columnas */
    column-gap: 1em; /* Espacio de 3 veces el tamaño de la fuente */
    text-align: justify; /* Justifica el texto para mejor apariencia */
    max-width: 100%; /* Limita el ancho del contenedor */
    margin-bottom: 0px;    
    height: 340px;
    font-size: 19px;
    color: black;
}
#colu {
    font-size: 17px;
    color: rgb(179, 15, 21);
}
#raya22 {
    position: absolute;
    top: 645px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 18px;
}
#ha-video2 {
    position: absolute;
    top: 670px;
    left: 69%;
    width: 30%;
    height: 400px;
    background-color: #888888;

}
#ha-video2-v {
    position: absolute;
    top: 50px;
    left: 0%;
    width: 100%;
    height: 300px;
}
#me-adiccion {                        /* toda la división de la explicación de lo que hacemos en adicción */
    position: absolute;
    top: 670px;
    left: 0%;
    width: 68%;
    height: 400px;
}
#ti-me-adiccion {
    position: absolute;
    top: 10px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: blue;
}
#te-me-adiccion {
    position: absolute;
    top: 40px;
    left: 15px;

    column-count: 3; /* Dos columnas */
    column-gap: 1em; /* Espacio de 3 veces el tamaño de la fuente */
    text-align: justify; /* Justifica el texto para mejor apariencia */
    max-width: 100%; /* Limita el ancho del contenedor */
    margin-bottom: 0px;    
    height: 340px;
    font-size: 18px;
    color: black;
}
#raya3 {
    position: absolute;
    top: 1060px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 18px;
}
#no-drogas {
    position: absolute;
    top: 1080px;
    left: 0%;
    width: 30%;
    height: 450px;
}
#pre-divi {
    position: absolute;
    top: 1080px;
    left: 31%;
    width: 68%;
    height: 500px;
}
#ti-pre-divi {
    position: absolute;
    top: 10px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: blue;
}
#te-pre-divi {
    position: absolute;
    top: 40px;
    left: 15px;

    column-width: 250px; 
    column-gap: 1em;
    text-align: justify; 
    max-width: 100%; 
    margin-bottom: 0px;    
    height: 450px;
    font-size: 18px;
    color: black;
}
#raya23 {
    position: absolute;
    top: 2150px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 18px;
}
#ima-coda {
    position: absolute;
    top: 1575px;
    left: 69%;
    width: 30%;
    height: 400px;
}
#cod-divi {
    position: absolute;
    top: 1575px;
    left: 0%;
    width: 68%;
    height: 500px;
}
#ti-cod-divi {
    position: absolute;
    top: 10px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: blue;
}
#te-cod-divi {
    position: absolute;
    top: 40px;
    left: 15px;

    /* column-width: 250px;  */
    column-count: 2; 
    column-gap: 1em;
    text-align: justify; 
    max-width: 100%; 
    margin-bottom: 0px;    
    height: 440px;
    font-size: 18px;
    color: black;
}
#raya24 {
    position: absolute;
    top: 1535px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 18px;
}






#ima-adicciones {
    position: absolute;
    top: 154px;
    left: 0%;
    width: 30%;
    height: 330px;
}
#adi-divi {
    position: absolute;
    top: 154px;
    left: 31%;
    width: 68%;
    height: 330px;
}
#adi-titulo {
    position: absolute;
    top: 10px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: blue;
}
#adi-explicacion {
    position: absolute;
    top: 40px;
    left: 15px;

    column-width: 250px; 
    /* column-count: 2;  */
    column-gap: 1em;
    text-align: justify; 
    max-width: 100%; 
    margin-bottom: 0px;    
    height: 340px;
    font-size: 18px;
    color: black;
}
#dos {
    color: red;
}
#ima-sintomas {
    position: absolute;
    top: 515px;
    left: 85%;
    width: 15%;
    height: 600px;
}
#titulo-sintomas{
    display: none;
}
#car-divi {
    position: absolute;
    top: 515px;
    left: 0%;
    width: 80%;
    height: 600px;
    border-top: solid 2px #beb6b6;
}
#car-titulo {
    position: absolute;
    top: 10px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: blue;
}
#car-explicacion {
    position: absolute;
    top: 15px;
    left: 0px;
    width: 100%;


    /* column-width: 250px;  */
    text-align: justify; 
    max-width: 100%; 
    margin-bottom: 0px;    
    height: 340px;
    font-size: 18px;
    color: black;
}
#ad-caracteristicas {
    position: absolute;
    top: 5px;
    left: 0%;
    width: 100%;
    padding-top: 2%;

        column-count: 2; 
    column-gap: 1em;

}
#ad-parrafo1 {
    text-align: justify;
    font-size: 20px;
    color: black;
    font-family: 'Times New Roman', serif;
    padding-left: 0%;
    padding-right: 00%;    
    margin-left: 6%;
    margin-bottom: 12px;
    margin-top: 0px;
}
#raya31 {
    position: absolute;
    top: 1095px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 18px;
}
#ima-libertad {
    position: absolute;
    top: 1117px;
    left: 0%;
    width: 16%;
    height: 980px;
}
#titulo-libertad{
    display: none;    
}

#lib-divi {
    position: absolute;
    top: 1115px;
    left: 15%;
    width: 80%;
    height: 980px;
    border-top: solid 2px #beb6b6;
}
#ad-parrafo2 {
    text-align: justify;
    font-size: 20px;
    color: black;
    font-family: 'Times New Roman', serif;
    padding-left: 0%;
    padding-right: 00%;    
    margin-left: 6%;
    margin-bottom: 12px;
    margin-top: 0px;
}
#imagen-libro1 {
    position: absolute;
    top: 154px;
    left: 0%;
    width: 28%;
    height: 500px;
}
#pre-tit1 {
    position: absolute;
    top: 172px;
    left: 28%;
    width: 70%;
    height: 100px;
    text-align: center;
    font-size: 70px;
    color: black;
    font-family: 'Times New Roman', serif;
    display: inline-block; 
    transform: scaleY(1.7); 
    letter-spacing: 0.9px;
    margin-top: 0%;
}


      /* Estilos generales */
        body {
            font-family: Arial, sans-serif;
            margin: 0; /* Asegura que no haya márgenes por defecto en el body */
            height: 100vh; /* Ocupa toda la altura de la vista */
            /* background-color: #f4f4f4; */
            position: relative; /* Opcional, pero buena práctica */
        }

        /* Estilos de Posicionamiento Requeridos */
        .container {
            max-width: 700px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            /* REGLAS DE POSICIONAMIENTO */
            position: absolute; /* 1. Habilita el posicionamiento absoluto */
            top: 160px;         /* 2. Ubicación a 160 píxeles del borde superior */
            left: 20%;          /* 3. Ubicación al 40% del margen izquierdo */
            /* FIN REGLAS DE POSICIONAMIENTO */
        }
        
        /* Estilos de los campos (sin cambios) */
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;

            color: black;

        }
        input[type="text"],
        input[type="tel"],
        input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; 
        }
        input[type="submit"] {
            background-color: #5cb85c;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="submit"]:hover {
            background-color: #4cae4c;
        }
        #h22 {
            color: black;
        }
        #retiro {
            position: absolute;
            top: 890px;
            left: 0%;
            width: 100%;
            height: 450px;
            border-top: solid 2px #a69fb762;
            border-bottom: solid 2px #a69fb762;
        }
        #retiro-iz{
            position: absolute;
            top: 0px;
            left: 0%;
            width: 32.9%;
            height: 100%;
            border-right: solid 2px #a69fb762;
        }
        #tit-retiro-iz{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 7%;
            text-align: center;
            font-size: 2em;
            margin-top: 10px;
            display: inline-block; 
            transform: scaleY(1.3); 
            letter-spacing: 1.3px;
            color: rgb(42, 55, 203);
        }
        #tex-retiro-iz{
            position: absolute;
            top: 15%;
            width: 60%;
            text-align: justify;
            font-size: 18px;
            margin-left: 20%;
            margin-right: 20%;
            color: black;
        }
        #retiro-ce{
            position: absolute;
            top: 0px;
            left: 33%;
            width: 33%;
            height: 100%;
            border-right: solid 2px #a69fb762;

        }
        #video-retiro {
            position: absolute;
            top: 0px;
            left: 0%;
            width: 100%;
            height: 450px;    
            line-height: 0;
            vertical-align: top;
        }
        #retiro-de{
            position: absolute;
            top: 0px;
            left: 66.1%;
            width: 32.9%;
            height: 100%;
        }
        #tit-retiro-de{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 7%;
            text-align: center;
            font-size: 1.7em;
            margin-top: 10px;
            display: inline-block; 
            transform: scaleY(1.3); 
            letter-spacing: 1.3px;
            color: rgb(42, 55, 203);
        }
        #tex-retiro-de{
            position: absolute;
            top: 15%;
            width: 60%;
            text-align: justify;
            font-size: 18px;
            margin-left: 20%;
            margin-right: 20%;
            color: black;
        }


        /* Aqui empieza la página somos */        



#imagen-grupo {
    position: absolute;
    top: 160px;
    left: 33.1%;
    width: 33%;
    height: 760px;
    border-bottom:  solid 2px #a69fb762;
    border-left:  solid 2px #a69fb762;
    border-right:  solid 2px #a69fb762;
}
#jaime {
    position: absolute;
    top: 10px;
    left: 7%;
    width: 34%;
    height: 250px;
    border: 4px solid rgb(141, 141, 49);
}
#tit-jaime {
    position: absolute;
    top: 250px;
    left: 7%;
    width: 35.3%;
    height: 85px;
    text-align: center;
    background-color: rgb(141, 141, 49);
}
#jorge {
    position: absolute;
    top: 10px;
    left: 58%;
    width: 34%;
    height: 250px;
    border: 4px solid rgb(141, 141, 49);
}
#tit-jorge {
    position: absolute;
    top: 250px;
    left: 58%;
    width: 35.3%;
    height: 85px;
    text-align: center;
    background-color: rgb(141, 141, 49);
}
#ricardo {
    position: absolute;
    top: 400px;
    left: 10%;
    width: 28%;
    height: 250px;
    border: 2px solid rgb(141, 141, 49);
}
#tit-ricardo {
    position: absolute;
    top: 637px;
    left: 8%;
    width: 33.3%;
    height: 85px;
    text-align: center;
    background-color: rgb(141, 141, 49);
}
#Ginna {
    position: absolute;
    top: 400px;
    left: 61%;
    width: 28%;
    height: 250px;
    border: 4px solid rgb(141, 141, 49);
}
#tit-Ginna {
    position: absolute;
    top: 640px;
    left: 55%;
    width: 41.3%;
    height: 85px;
    text-align: center;
    background-color: rgb(141, 141, 49);
}
#somos {
    position: absolute;
    top: 160px;
    left: 0%;
    width: 33%;
    height: 760px;
    border-bottom:  solid 2px #a69fb762;
}
#t5 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 40px;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#somos1 {
    position: absolute;
    top: 145px;
    left: 15%;
    width: 70%;
    text-align: justify;
    font-size: 18px;
    color: black;
}
#experiencia {
    position: absolute;
    top: 160px;
    left: 66%;
    width: 33%;
    height: 760px;
    border-bottom:  solid 2px #a69fb762;
}
#t6 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 40px;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#experiencia1 {
    position: absolute;
    top: 145px;
    left: 15%;
    width: 70%;
    text-align: justify;
    font-size: 18px;
    color: black;
}
#proposito {
    position: absolute;
    top: 920px;
    left: 33.1%;
    width: 33%;
    height: 420px;
    border-bottom:  solid 2px #a69fb762;
    border-left:  solid 2px #a69fb762;
    border-right:  solid 2px #a69fb762;
}
#t7 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 40px;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#proposito1 {
    position: absolute;
    top: 125px;
    left: 15%;
    width: 70%;
    text-align: justify;
    font-size: 18px;
    color: black;
}


#code-div1{
    position: absolute;
    top: 155px;
    left: 0%;
    width: 100%;
    height: 250px;
    border-bottom: solid 2px #a69fb762;
}#code-div2{
    position: absolute;
    top: 410px;
    left: 0%;
    width: 100%;
    height: 650px;
    border-bottom: solid 2px #a69fb762;
}
#titulo-codependencia1{
    position: absolute;
    margin-top: 0px;
    left: 62%;
    top: 25px;
    font-size: 60px;
    width: 100%;
    color: red;
    opacity: 0.2;
}



#imagen-eres{
    position: absolute;
    top: 154px;
    left: 30%;
    width: 40%;
    height: 500px;
}


#eres-iz {
    position: absolute;
    top: 164px;
    left: 0px;
    width: 29.3%;
    height: 670px;
    border-right: solid 2px #888888;
    padding-right: 3px;
}
#eres-iz-tit {
    position: absolute;
    top: 0%;
    left: 5%;
    width: 100%;
    margin-top: 0%;
    font-size: 35px;

    color: black;
    display: inline-block; 
    transform: scaleY(1.6); 
    /* letter-spacing: 0.7px; */
}
#eres-iz-let {
    position: absolute;
    top: 45px;
    left: 2%;
    width: 100%;
    color: black;
    font-size: 20px;
    text-align: center;
}
#ol1 {
    position: absolute;
    top: 77px;
    left: 0%;
    margin-left: 6px;
    margin-right: 5px;
}
#pregunta{
    color: black;
    font-size: 17px;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 0px;
}
#eres-de {
    position: absolute;
    top: 152px;
    left: 71%;
    width: 28%;
    height: 682px;
    border-left: solid 2px #888888;
    padding-left: 0px;
}
#eres-de-let {
    position: absolute;
    top: 10px;
    left: 2%;
    width: 100%;
    color: black;
    font-size: 20px;
    text-align: center;
    margin-top: 0%;
}
#ol2 {
    position: absolute;
    top: 40px;
    left: 0%;
    margin-left: 0px;
    /* margin-right: 5px; */
    margin-top: 0%;
}
#pregunta1{
    color: black;
    font-size: 17px;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
}
#emer {
    position: absolute;
    top: 655px;
    left: 30%;
    width: 40%;
    height: 200px;
    font-size: 35px;
    text-align: center;
    margin-top: 0%;
    padding-top: 50px;
}
#separa1 {
    position: absolute;
    top: 816px;
    left: 0%;
    margin: 0%;
    width: 100%;
    color: #888888;
}
#imagen-stopsex {
    position: absolute;
    top: 835px;
    left: 1%;
    width: 49%;
    height: 300px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
    border-right: solid 2px #888888;
}
#sexo {
    position: absolute;
    top: 1140px;
    left: 0%;
    width: 49%;
    height: 550px;
    padding-right: 20px;
    border-right: solid 2px #888888;
    border-bottom: solid 2px #888888;
}
#sexo-t {
    position: absolute;
    top: 5px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 35px;
    color: black;
}
#ol3 {
    position: absolute;
    top: 40px;
    left: 2px;
    width: 93%;
}
#comida {
    position: absolute;
    top: 842px;
    left: 50.3%;
    width: 49%;
    height: 660px;
    padding-right: 20px;
    border-left: solid 2px #888888;
    border-bottom: solid 2px #888888;
}
#comida-t {
    position: absolute;
    top: 5px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 35px;
    color: black;
}
#ol4 {
    position: absolute;
    top: 40px;
    left: 2px;
    width: 93%;
}
#imagen-comida {
    position: absolute;
    top: 340px;
    left: 1%;
    width: 97%;
    height: 300px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
}#sugerencia {
    position: absolute;
    top: 1480px;
    left: 50%;
    width: 48%;
    height: 200px;
}
#final-preguntas {
    position: absolute;
    top: 20px;
    text-align: center;
    left: 2%;
    width: 98%;
    font-size: 30px;
    color: red;
}

#for-con-tit {
    position: absolute;
    top: 10px;
    color: black;
    text-align: center;
    width: 100%;
    margin-top: 0%;
    font-size: 30px;

}
#formu {
    position: absolute;
    top: 240px;
    left: 10%;
    width: 35%;
    height: 460px;
    border: solid 1px rgb(158, 154, 154)
}
#for-nombre-t {
    position: absolute;
    top: 90px;
    left: 0%;
    padding-left: 20px;
    
}
#for-nombre {
    position: absolute;
    top: 85px;
    left: 30%;
    height: 30px;
    width: 50%;
}
#for-email-t {
    position: absolute;
    top: 165px;
    left: 0%;
    padding-left: 20px;
}
#for-email {
    position: absolute;
    top: 150px;
    left: 30%;
    height: 30px;
    width: 50%;
}
#for-mensaje-t {
    position: absolute;
    top: 205px;
    left: 0%;
    padding-left: 20px;
}
#for-mensaje {
    position: absolute;
    top: 205px;
    left: 30%;
    width: 50%;
}
#for-telefono-t {
    position: absolute;
    top: 305px;
    left: 0%;
    padding-left: 20px;
}
#for-telefono {
    position: absolute;
    top: 305px;
    left: 30%;
    width: 50%;
    height: 30px;
}
#enviar {
    position: absolute;
    top: 370px;
    left: 30%;
}
#esc-lla {
    position: absolute;
    top: 240px;
    left: 55%;
    width: 35%;
    height: 460px;
    border: solid 1px rgb(158, 154, 154)
}
#llama {
position: absolute;
top: 0px;
left: 0px;
text-align: center;
width: 100%;
font-size: 40px;
color: rgb(66, 18, 222);
}
#for-parrafo {
position: absolute;
top: 100px;
left: 0px;
text-align: justify;
width: 80%;
font-size: 22px;
color: black;
margin-left: 10%;
margin-right: 10%;
}
#titulo-confidencial{
    position: absolute;
    margin-top: 0px;
    left: 25%;
    top: 750px;
    font-size: 90px;
    width: 100%;
    color: red;
    opacity: 0.2;
}
#portada-libro {position: absolute; top: 156px; left: 0%; width: 30%; height: 500px; margin-top: 0%;}
#division_0 {position: absolute; top: 156px; left: 36%; width: 54%; height: 500px; 
    border: solid 2px rgb(177, 171, 171); padding-left: 4%; padding-right: 4%;}
#division_0_titulo {position: absolute; top: 0px; margin-top: 10px; text-align: center; width: 100%; font-size: 35px; color: black;}
#division_0_texto {position: absolute; top: 60px; text-align: justify; width: 82%; font-size: 20px; color: black; }
#lista-1{position: absolute; top: 195px; font-size: 19px; color: black; width: 82%;}
#division_0_texto2 {position: absolute; top: 305px; margin-top: 10px; width: 100%; font-size: 20px; color: black;}
#lista-2{position: absolute; top: 350px; font-size: 19px; color: black; width: 82%;}
#separa_1 {position: absolute; top: 642px; left: 0%; color: rgb(155, 150, 150);}
/*  ====================== COMIENZA LA FRANJA # 2 =============================================    */
#division_1 {position: absolute; top: 670px; left: 0%; width: 66%; height: 500px;}
#division_1_titulo {position: absolute; top: 0px; margin-top: 10px; text-align: center; width: 100%; font-size: 35px; color: black;}
#division_1_texto {position: absolute; top: 60px; text-align: justify; width: 100%; font-size: 20px; color: black; column-count: 3;}
#Deja_de_correr {color: blue; font-size: 23px;}
#imagen-prevension {position: absolute; top: 720px; left: 68%; width: 32%; height: 450px;}
#aa {position: absolute;top: 1170px; left: 0%; color: rgb(155, 150, 150);}
/*  ====================== COMIENZA LA FRANJA # 3 =============================================    */
#division-2 {position: absolute; top: 1210px; left: 0%; width: 100%; height: 600px;}
#factores-riesgo-titulo {position: absolute; top: 15px; margin-top: 0%; width: 50%; text-align: center; 
font-size: 22px; color: black;}
#factores-riesgo-texto {position: absolute; top: 30px; width: 50%; left: 0%; color: black;}
#factores-riesgo-linea {margin-left: 20%; margin-top: 30px; font-size: 20px;}
#factores-riesgo-titulo2 {position: absolute; top: 15px; left: 50%; margin-top: 0%; width: 50%; text-align: center; font-size: 32px;}
#factores-riesgo-texto2 {position: absolute; top: 30px; width: 50%; left: 0%; left: 50%; color: black;}
    #bb {position: absolute; top: 2000px;}
#titulo-prevencion{
    position: absolute;
    margin-top: 0px;
    left: 64%;
    top: 25px;
    font-size: 70px;
    width: 100%;
    color: red;
    opacity: 0.2;
}



/*   =================================================================

                           Versión Celular  
     =================================================================  */


 @media (max-width: 1081px) { 
     
#pe-titulo {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
}
#pe-titular {
    position: absolute;
    top: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    text-align: center;
    font-size: 2em;
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 0.3em;
    color: black;
    font-weight: 400;
}
#pe-lema {
    position: absolute;
    top: 30px;
    left: 20%;
    width: 100%;
    font-size: 0.8em;
    color: black;
    letter-spacing: 1.2px;
}
#logomio {
    position: absolute;
    top: 5px;
    left: 90%;
    width: 2em;
    height: 4em;
}
#fecha-actual {
    position: absolute;
    top: 55px;
    left: 10%;
    width: 95%;
    height: 30px;
    z-index: 5;
    color: rgb(80, 78, 78);
    font-size: 0.5em;
    margin-top: 0%;
}


#pe-renglon {
    position: absolute;
    top: 70px;
    left: 0%;
    width: 100%;
    height: 60px;
    border-bottom: none;
}
#pe-renglon-tp {
    position: absolute;
    top: 4px;
    left: 42%;
    width: 2%;
    color: rgb(111, 108, 108);
    letter-spacing: 1.5px;
    margin-top: 0px;
    font-size: 0em;
    margin-bottom: 0%;
}

#pe-renglon-t {
    position: absolute;
    top: 1px;
    left: 39%;
    width: 25%;
    color: rgb(111, 108, 108);
    letter-spacing: 5px;
    margin-top: 0px;
}
#in1 {
    position: absolute;
    top: 4px;
    left: 0%;
    width: 23%;
    height: 24px;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    color: black;
    border: black solid 0.2em;
    box-shadow: 0.5px 0.5px 1px rgb(33, 16, 192);
}
#in2 {
    position: absolute;
    top: 4px;
    left: 25%;
    width: 23%;
    height: 24px;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    color: black;
    border: black solid 0.2em;
    box-shadow: 0.5px 0.5px 1px rgb(33, 16, 192);
}
#in3 {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 23%;
    height: 24px;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    color: black;
    border: black solid 0.2em;
    box-shadow: 0.5px 0.5px 1px rgb(33, 16, 192);
}
#in4 {
    position: absolute;
    top: 4px;
    left: 75%;
    width: 23%;
    height: 24px;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    color: black;
    border: black solid 0.2em;
    box-shadow: 0.5px 0.5px 1px rgb(33, 16, 192);
}
#in5 {
    position: absolute;
    top: 34px;
    left: 0%;
    width: 28%;
    height: 24px;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    color: black;
    border: black solid 0.2em;
    box-shadow: 0.5px 0.5px 1px rgb(33, 16, 192);
}
#in6 {
    position: absolute;
    top: 34px;
    left: 30%;
    width: 28%;
    height: 24px;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    color: black;
    border: black solid 0.2em;
    box-shadow: 0.5px 0.5px 1px rgb(33, 16, 192);
}
#in7 {
    position: absolute;
    top: 34px;
    left: 60%;
    width: 28%;
    height: 24px;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    color: black;
    border: black solid 0.2em;
    box-shadow: 0.5px 0.5px 1px rgb(33, 16, 192);
}
#in1:hover {
    background-color: black;
    color: #f4f2ef;
}
#in2:hover {
    background-color: black;
    color: #f4f2ef;
}
#in3:hover {
    background-color: black;
    color: #f4f2ef;
}
#in4:hover {
    background-color: black;
    color: #f4f2ef;
}
#in5:hover {
    background-color: black;
    color: #f4f2ef;
}
#in6:hover {
    background-color: black;
    color: #f4f2ef;
}
#in7:hover {
    background-color: black;
    color: #f4f2ef;
}




#pri-iz {
    margin-top: 0%;
    position: absolute;
    top: 155px;
    left: 0px;
    width: 100%;
    height: 400px;
    border-right: none;
    border-bottom: solid 2px #a69fb762;
}


#pri-titular {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    margin-top: 0px;
    font-size: 1.8em;
    text-align: center;
    display: inline-block; 
    transform: scaleY(1.6); 
    letter-spacing: 0.52px;
    color: rgb(42, 55, 203);
}


#pri-letra {
    position: absolute;
    top: 60px;
    left: 5%;
    width: 90%;
    font-size: 0.8em;
    color: black;
    text-align: justify;
}


#marco-video {
    margin-top: 0%;
    position: absolute;
    top: 550px;
    left: 0%;
    width: 100%;
    height: 500px;   
    background-color: rgb(188, 188, 173);
    vertical-align: top;

}
#video-portada {
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    height: 480px;    
    line-height: 0;
    vertical-align: top;
}

#pri-de {
    position: absolute;
    top: 1055px;
    left: 0%;
    width: 100%;
    height: 440px;
    border-left: none;
    border-bottom: solid 2px #a69fb762;

}
#pri-titular-de {
    position: absolute;
    top: 0px;
    left: 0%;
    width: 100%;
    margin-top: 0px;
    font-size: 2.3em;
    text-align: center;
    display: inline-block; 
    transform: scaleY(1.3); 
    letter-spacing: 1.2px;
    color: rgb(42, 55, 203);
}
#pri-letra-de {
    position: absolute;
    top: 85px;
    left: 5%;
    width: 90%;
    font-size: 0.93em;
    color: black;
    text-align: justify;
}
#eres {
    position: absolute;
    top: 365px;
    left: 40%;
    width: 24%;
    height: 30PX;
    text-decoration: none;
    border: solid 2px #32166A;
    text-align: center;
    color: black;
    display: block;   
    padding-top: 12px;
    border-radius: 5px;
    box-shadow: 5px 5px 10px 0  #888888;
    text-decoration-style: double;
}

#pide-ayuda {
    position: absolute;
    top: 1510px;
    left: 0%;
    width: 100%;
    height: 1010px;
    z-index: -4;
    border-bottom: solid 2px #c2b9d5;
}
#pide-ayuda-1t {
    position: absolute;
    top: 20px;
    left: 0%;
    width: 100%;
    height: 50px;
    margin-top: 0px;
    text-align: center;

    font-size: 1.5em;
    display: inline-block; 
    transform: scaleY(1.3); 
    letter-spacing: 1px;
    color: rgb(42, 55, 203);
}
#pide-ayuda-1l {
    position: absolute;
    top: 66px;
    left: 5%;
    width: 90%;
    height: 210px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 1em;
}
#pide-ayuda-i1 {
    position: absolute;
    top: 310px;
    left: 20%;
    width: 60%;
    height: 140px;
    
}

#pide-ayuda-2 {
    position: absolute;
    top: 480px;
    left: 5%;
    width: 90%;
    height: 100px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 1.1em;
}
#pide-ayuda-3 {
    position: absolute;
    top: 590px;
    left: 5%;
    width: 90%;
    height: 200px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 1em;
    line-height: 1.2;
}
#pide-ayuda-4 {
    position: absolute;
    top: 760px;
    left: 5%;
    width: 90%;
    height: 300px;
    margin-top: 0px;
    text-align: justify;
    color: black;
    font-size: 1em;
}


        #retiro {
            position: absolute;
            top: 2570px;
            left: 0%;
            width: 100%;
            height: 1400px;
            border-top: none;
        }
        #retiro-iz{
            position: absolute;
            top: 0px;
            left: 0%;
            width: 100%;
            height: 120px;
            border-right: none;
        }
        #tit-retiro-iz{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 40px;
            text-align: center;
            font-size: 1.5em;
            margin-top: 0px;
            display: inline-block; 
            transform: scaleY(1.3); 
            letter-spacing: 1px;
            color: rgb(42, 55, 203);
        }
        #tex-retiro-iz{
            position: absolute;
            top: 30px;
            left: 5%;
            width: 90%;
            text-align: justify;
            font-size: 1.1em;
            margin-left: 0%;
            margin-right: 0%;
            color: black;
        }
        #retiro-ce{
            position: absolute;
            top: 480px;
            left: 0%;
            width: 100%;
            height: 400%;
            border-right: none;
            border-bottom: 1px solid #4cae4c;

        }
        #video-retiro {
            position: absolute;
            top: 0px;
            left: 0%;
            width: 100%;
            height: 350px;    
            line-height: 0;
            vertical-align: top;
        }


        #retiro-de{
            position: absolute;
            top: 900px;
            left: 0%;
            width: 100%;
            height: 400%;
        }
        #tit-retiro-de{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 1.1em;
            margin-top: 10px;
            display: inline-block; 
            transform: scaleY(1.3); 
            letter-spacing: 1px;
            color: rgb(42, 55, 203);
        }
        #tex-retiro-de{
            position: absolute;
            left: 5%;
            top: 35px;
            width: 90%;
            text-align: justify;
            font-size: 1.1em;
            margin-left: 0%;
            margin-right: 0%;
            color: black;
        }

 #folder {
    position: absolute;
    top: 4000px;
    left: 0%;
    width: 100%;
    height: 70px;
    background-color: #beb6b6;
}
#ubi {
    position: absolute;
    max-width: 100%;
    height: 70px;
    top: 3px;
    width: 100%;
    left: 0%;
    margin-top: 0%;
}
#folder1 {
    position: absolute;
    top: 0px;
    left: 0%;
    width: 31%;
    height: 70px;
    margin-top: 0px;
}
#folder2 {
    position: absolute;
    top: 0px;
    left: 32%;
    width: 30%;
    height: 70px;
    margin-top: 0px;
}
#tel-num {
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    color: black;
    margin-top: 0%;
    height: 60px;
}
#correo-folder {
    position: absolute;
    margin-top: 0%;
    top: 30px;
    left: 63%;
    font-size: 0.7em;
    color: blue;
}
#code-div1{
    position: absolute;
    top: 150px;
    left: 0%;
    width: 100%;
    height: 840px;
    border-bottom: none;
}
#code-div2{
    position: absolute;
    top:        1050px;
    left:       0%;
    width:      100%;
    height:     1000px;
    border-bottom: none;
}
#titulo-codependencia1{
    position:       absolute;
    margin-top:     0px;
    left:           0%;
    top:            25px;
    font-size:      3em;
    width:          100%;
    color: red;
    opacity:        0.2;
}

#atrapa {
    position: absolute;
    top:        0px;
    left:       0px;
    width:      100%;
    height:     250px;
}
#atrapa-te {
    position: absolute;
    top:        270px;
    left:       0%;
    width:      100%;
    height:     120px;
}
#atrapa-ti {
    position: absolute;
    top:                5px;
    left:               0px;
    margin-top:         0px;
    width:              100%;
    text-align:         center;
    font-size:          1.2em;
    color: rgb(42, 55, 203);
    display:            inline-block; 
    transform:          scaleY(1.2); 
    letter-spacing:     0.5px;
}
#atrapa-l {
    position: absolute;
    top:                40px;
    left:               0px;
    width:              100%;
    text-align:         center;
    font-size:          1em;
    color: black;
}
#cuidar {
    position: absolute;
    top:            430px;
    left:           0%;
    width:          100%;
    height:         250px;
    opacity:        0.7;
}
#cuidar-te {
    position: absolute;
    top:            700px;
    left:           0%;
    width:          100%;
    height:         120px;
}
#cuidar-ti {
    position: absolute;
    top:            10px;
    left:           0%;
    margin-top:     0px;
    width:          100%;
    font-size:      1.2em;
    text-align:     center;
    color: rgb(42, 55, 203);
    display:        inline-block; 
    transform:      scaleY(1.2); 
    letter-spacing: 0.7px;
}
#cuidar-l {
    position: absolute;
    top:            50px;
    left:           0px;
    width:          100%;
    font-size:      1.1em;
    text-align:     center;
    color: black;
}
#linea1{
    display: none;
    position: absolute;
    top: 270px;
    width: 100%;
    color: rgb(187, 179, 179);
    margin-top: 0px;

}
#soltar1 {
    position: absolute;
    top:            0%;
    left:           0%;
    width:          100%;
    height:         250px;
    opacity:        0.8;
    border-radius:  10px;

}
#princi-iz {
    position: absolute;
    top:            265px;
    left:           0%;
    width:          100%;
    height:         400px;
}
#princi-iz-ti {
    position: absolute;
    top:            0%;
    left:           0px;
    margin-top:     0px;
    margin-bottom:  0%;
    width:          100%;
    font-size:      1.2em;
    color: rgb(42, 55, 203);
    display:        inline-block; 
    transform:      scaleY(1.2); 
    letter-spacing: 0.5px;
    text-align:     center;
}
#princi-iz-le {
    position: absolute;
    top:            35px;
    left:           5%;
    width:          90%;
    font-size:      1em;
    color: black;
    text-align:     justify;
}
#princi-de {
    position: absolute;
    top:            1100px;
    left:           0%;
    width:          100%;
    height:         400px;
}
#princi-de-ti {
    position: absolute;
    top:            0%;
    left:           0px;
    margin-top:     0px;
    margin-bottom:  0%;
    width:          100%;
    font-size:      1.2em;
    color: rgb(42, 55, 203);
    display: inline-block; 
    transform:      scaleY(1.2); 
    letter-spacing:     0.5px;
    text-align:     center;
}
#princi-de-le {
    position: absolute;
    top:            30px;
    left:           5%;
    width:          90%;
    font-size:      1.1em;
    color: black;
    text-align: justify;
}

/*            Página principal                */


/*                       Eres                              */
#alcohol {
    position: absolute;
    top: 190px;
    width: 60%;
    border: solid 2px #888888;
    left: 20%;
}
#titulo-preguntas {
    color: black;
    text-align: center;
    padding: 20px;
    font-size: 25px;
}
#imagen-eres{
    position: absolute;
    top: 154px;
    left: 30%;
    width: 40%;
    height: 500px;
}
#ol1 {
    position: absolute;
    top: 77px;
    left: 0%;
    margin-left: 6px;
    margin-right: 5px;
}
#pregunta{
    color: black;
    font-size: 17px;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 0px;
}
#pregunta1{
    color: black;
    font-size: 17px;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 6px;
    margin-left: 0px;
}
#eres-de {
    position: absolute;
    top: 152px;
    left: 71%;
    width: 28%;
    height: 682px;
    border-left: solid 2px #888888;
    padding-left: 0px;
}
#eres-de-let {
    position: absolute;
    top: 10px;
    left: 2%;
    width: 100%;
    color: black;
    font-size: 20px;
    text-align: center;
    margin-top: 0%;
}
#ol2 {
    position: absolute;
    top: 40px;
    left: 0%;
    margin-left: 0px;
    /* margin-right: 5px; */
    margin-top: 0%;
}
#emer {
    position: absolute;
    top: 655px;
    left: 30%;
    width: 40%;
    height: 200px;
    font-size: 35px;
    text-align: center;
    margin-top: 0%;
    padding-top: 50px;
}
#separa1 {
    position: absolute;
    top: 816px;
    left: 0%;
    margin: 0%;
    width: 100%;
    color: #888888;
}
#sexo {
    position: absolute;
    top: 1040px;
    left: 0%;
    width: 49%;
    height: 550px;
    padding-right: 20px;
    border-right: solid 2px #888888;
    border-bottom: solid 2px #888888;
}
#sexo-t {
    position: absolute;
    top: 5px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 35px;
    color: black;
}
#ol3 {
    position: absolute;
    top: 40px;
    left: 2px;
    width: 93%;
}
#imagen-stopsex {
    position: absolute;
    top: 817px;
    left: 1%;
    width: 49%;
    height: 300px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
    border-right: solid 2px #888888;
}
#comida {
    position: absolute;
    top: 817px;
    left: 50.3%;
    width: 49%;
    height: 660px;
    padding-right: 20px;
    border-left: solid 2px #888888;
    border-bottom: solid 2px #888888;
}
#comida-t {
    position: absolute;
    top: 5px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 35px;
    color: black;
}
#ol4 {
    position: absolute;
    top: 40px;
    left: 2px;
    width: 93%;
}

#imagen-comida {
    position: absolute;
    top: 140px;
    left: 1%;
    width: 97%;
    height: 300px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
}
#sugerencia {
    position: absolute;
    top: 1420px;
    left: 50%;
    width: 48%;
    height: 200px;
}
#final-preguntas {
    position: absolute;
    top: 20px;
    text-align: center;
    left: 2%;
    width: 98%;
    font-size: 30px;
    color: red;
}

#raya1 {
    position: absolute;
    top: 1163px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
}
#somos {
    position: absolute;
    top: 160px;
    left: 0%;
    width: 33%;
    height: 760px;
    border-bottom:  solid 2px #a69fb762;
}
#t5 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 40px;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#somos1 {
    position: absolute;
    top: 145px;
    left: 15%;
    width: 70%;
    text-align: justify;
    font-size: 18px;
    color: black;
}
#experiencia {
    position: absolute;
    top: 160px;
    left: 66%;
    width: 33%;
    height: 760px;
    border-bottom:  solid 2px #a69fb762;
}
#t6 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 40px;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#experiencia1 {
    position: absolute;
    top: 145px;
    left: 15%;
    width: 70%;
    text-align: justify;
    font-size: 18px;
    color: black;
}
#proposito {
    position: absolute;
    top: 920px;
    left: 33.1%;
    width: 33%;
    height: 420px;
    border-bottom:  solid 2px #a69fb762;
    border-left:  solid 2px #a69fb762;
    border-right:  solid 2px #a69fb762;
}
#t7 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 40px;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#proposito1 {
    position: absolute;
    top: 125px;
    left: 15%;
    width: 70%;
    text-align: justify;
    font-size: 18px;
    color: black;
}




#ima-adicciones {
    position: absolute;
    top:  135px;
    left: 0%;
    width: 100%;
    height:  330px;
}

#adi-divi {
    position: absolute;
    top: 460px;
    left: 0%;
    width: 100%;
    height: 800px;
}
#adi-titulo {
    position: absolute;
    top: 0%;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    color: blue;
}
#adi-explicacion {
    position: absolute;
    top:            30px;
    left:           5%;
    column-width:   90%; 
    column-gap:     1em;
    text-align:     justify; 
    max-width:      90%; 
    margin-bottom:  0px;    
    height:         800px;
    font-size:      1em;
    color: black;
}
#dos {
    color: red;
}

#ima-sintomas {
    position: absolute;
    top:        1270px;
    left:       85%;
    width:      15%;
    height:     1340px;
    display: none;
}
#titulo-sintomas{
    display: block;
    position: absolute;
    top:        1240px;
    left:       0%;
    width:      100%;
    height:     40px;
    text-align: center;
    font-size: 2em;
    color: #beb6b6;
    background-color: #c92b2b;
}



#car-divi {
    position: absolute;
    top: 1310px;
    left: 0%;
    width: 100%;
    height: 1340px;
    border-top: none;
}
#car-titulo {
    position: absolute;
    top: 0px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    color: blue;
    display: none;
}
#car-explicacion {
    position:       absolute;
    top:            0px;
    left:           0px;
    width:          100%;
    text-align:     justify; 
    max-width:      100%; 
    margin-bottom:  0px;    
    height:         1340px;
    font-size:      1em;
    color: black;
}
#ad-caracteristicas {
    position:       absolute;
    top:            5px;
    left:           0%;
    width:          100%;
    padding-top:    1%;
    column-count:   1; 
    column-gap:     1em;
    left: 0%;
    width:          90%;
}
#ad-parrafo1 {
    text-align:     justify;
    font-size:      1em;
    color: black;
    font-family: 'Times New Roman', serif;
    padding-left:   0%;
    padding-right:  0%;    
    margin-left:    0%;
    margin-bottom:  0.3em;
    margin-top:     0px;
    left: 0%;
    width:          90%;
}
#raya31 {
    position: absolute;
    top: 1095px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 0px;
}

#ima-libertad {
    position: absolute;
    top:        2620px;
    left:       0%;
    width:      15%;
    height:     2000px;
    display: none;
}
#titulo-libertad{
    position: absolute;
    display: block;
    top: 2455px;
    left: 0%;
    width: 100%;
    height: 40px;
    text-align: center;
    color: #c2b9d5;
    background-color: #c92b2b;
    font-size: 2.3em;

}
#lib-divi {
    position: absolute;
    top:        2560px;
    left:       0%;
    width:      100%;
    height:     2900px;
    border-top: none;
    margin-left: 0%;
}
#ad-parrafo2 {
    text-align: justify;
    font-size:      1em;
    color: black;
    font-family: 'Times New Roman', serif;
    padding-left:   0%;
    padding-right:  0%;    
    margin-left:    0%;
    margin-bottom:  0.2em;
    margin-top:     0px;
    width: 90%;
    left: 0%;

}






#imagen-libro1 {
    position: absolute;
    top: 154px;
    left: 0%;
    width: 28%;
    height: 500px;
}
#pre-tit1 {
    position: absolute;
    top: 172px;
    left: 28%;
    width: 70%;
    height: 100px;
    text-align: center;
    font-size: 70px;
    color: black;
    font-family: 'Times New Roman', serif;
    display: inline-block; 
    transform: scaleY(1.7); 
    letter-spacing: 0.9px;
    margin-top: 0%;
}


      /* Estilos generales */
        body {
            font-family: Arial, sans-serif;
            margin: 0; /* Asegura que no haya márgenes por defecto en el body */
            height: 100vh; /* Ocupa toda la altura de la vista */
            /* background-color: #f4f4f4; */
            position: relative; /* Opcional, pero buena práctica */
        }

        /* Estilos de Posicionamiento Requeridos */
        .container {
            max-width: 700px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            /* REGLAS DE POSICIONAMIENTO */
            position: absolute; /* 1. Habilita el posicionamiento absoluto */
            top: 160px;         /* 2. Ubicación a 160 píxeles del borde superior */
            left: 20%;          /* 3. Ubicación al 40% del margen izquierdo */
            /* FIN REGLAS DE POSICIONAMIENTO */
        }
        
        /* Estilos de los campos (sin cambios) */
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;

            color: black;

        }
        input[type="text"],
        input[type="tel"],
        input[type="email"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; 
        }
        input[type="submit"] {
            background-color: #5cb85c;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="submit"]:hover {
            background-color: #4cae4c;
        }
        #h22 {
            color: black;
        }

        /* Aqui empieza la página somos */        



#imagen-grupo {
    position: absolute;
    top:        130px;
    left:       0%;
    width:      100%;
    height:     800px;
    border-bottom:  none;
    border-left:  none;
    border-right:  none;
}
#jaime {
    position: absolute;
    top:        10px;
    left:       7%;
    width:      40%;
    height:     250px;
    border: 4px solid rgb(141, 141, 49);
}
#tit-jaime {
    position: absolute;
    top: 255px;
    left: 7%;
    width: 42%;
    height: 85px;
    text-align: center;
    font-size: 0.8em;
    color: #f3f3f5;
    background-color: rgb(141, 141, 49);
}
#jorge {
    position: absolute;
    top: 10px;
    left: 54%;
    width: 40%;
    height: 250px;
    border: 4px solid rgb(141, 141, 49);
}
#tit-jorge {
    position: absolute;
    top: 255px;
    left: 54%;
    width: 42%;
    height: 85px;
    font-size: 0.8em;
    text-align: center;
    color: #f3f3f5;
    background-color: rgb(141, 141, 49);
}
#ricardo {
    position: absolute;
    top: 400px;
    left: 7%;
    width: 40%;
    height: 250px;
    border: 2px solid rgb(141, 141, 49);
}
#tit-ricardo {
    position: absolute;
    top: 637px;
    left: 7%;
    width: 41%;
    height: 85px;
    font-size: 0.8em;
    text-align: center;
    color: #f3f3f5;
    background-color: rgb(141, 141, 49);
}
#Ginna {
    position: absolute;
    top: 400px;
    left: 54%;
    width: 40%;
    height: 250px;
    border: 4px solid rgb(141, 141, 49);
}
#tit-Ginna {
    position: absolute;
    top: 640px;
    left: 54%;
    width: 42%;
    height: 85px;
    text-align: center;
    color: #f3f3f5;
    background-color: rgb(141, 141, 49);
}

#somos {
    position: absolute;
    top: 900px;
    left: 0%;
    width: 100%;
    height: 610px;
    border-bottom:  none;
}
#t5 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 1.7em;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#somos1 {
    position: absolute;
    top: 35px;
    left: 5%;
    width: 80%;
    text-align: justify;
    font-size: 1.2em;
    color: black;
}



#experiencia {
    position: absolute;
    top: 1510px;
    left: 0%;
    width: 100%;
    height: 570px;
    border-bottom:  none;
}
#t6 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 1.7em;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#experiencia1 {
    position: absolute;
    top: 45px;
    left: 5%;
    width: 80%;
    text-align: justify;
    font-size: 18px;
    color: black;
}
#proposito {
    position: absolute;
    top: 2050px;
    left: 0%;
    width: 100%;
    height: 570px;
    border-bottom:  none;
    border-left:  none;
    border-right:  none;
}
#t7 {
    position: absolute;
    top: 10px;
    left: 0%;
    width: 100%;
    font-size: 1.7em;
    text-align: center;
    color: rgb(42, 55, 203);
    margin-top: 0%;
}
#proposito1 {
    position: absolute;
    top: 35px;
    left: 5%;
    width: 90%;
    text-align: justify;
    font-size: 1.1em;
    color: black;
}


/*=============================================================================*/
/*=============================================================================*/
/*=============================================================================*/
/*=============================================================================*/
/*=============================================================================*/
/*=============================================================================*/

#titulo-hacemos {
    position: absolute;
    top: 136px;
    left: 0%;
    width: 100%;
    height: 100px;
    text-align: center;
    font-size: 2em;
    color: rgb(55, 48, 151);
    border-bottom: none;
    letter-spacing: 4px;
}

#ha-video1 {
    position: absolute;
    top: 210px;
    left: 2%;
    width: 94%;
    height: 350px;
    background-color: #c92b2b;
    border: 0.2em solid #4cae4c;
}

#ha-video1-v {
    position: absolute;
    top: 0px;
    left: 2%;
    width: 96%;
    height: 300px;
}

#metodo {
    position: absolute;
    top: 570px;
    left: 2%;
    width: 95%;
    height: 800px;
}
#ti-metodo {
    position: absolute;
    top: 10px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    color: blue;
}
#te-metodo {
    position: absolute;
    top: 40px;
    left: 0px;
    column-count: 1; 
    column-gap: 1em; 
    text-align: justify; 
    max-width: 100%; 
    margin-bottom: 0px;    
    height: 840px;
    font-size: 1em;
    color: black;
}
#colu {
    font-size: 1em;
    color: rgb(179, 15, 21);
}
#raya22 {
    position: absolute;
    top: 645px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 0px;
}
#ha-video2 {
    position: absolute;
    top: 1400px;
    left: 2%;
    width: 94%;
    height: 350px;
    background-color: #c92b2b;
    border: 0.2em solid #4cae4c;

}
#ha-video2-v {
    position: absolute;
    top: 0px;
    left: 2%;
    width: 96%;
    height: 300px;
}





#me-adiccion {                        /* toda la división de la explicación de lo que hacemos en adicción */
    position: absolute;
    top: 1770px;
    left: 0%;
    width: 100%;
    height: 1200px;
}
#ti-me-adiccion {
    position:       absolute;
    top:            0px;
    margin-top:     0%;
    left:           0%;
    width:          100%;
    text-align:     center;
    font-size:      1.5em;
    color: blue;
}
#te-me-adiccion {
    position: absolute;
    top:            30px;
    left:           5%;
    column-count:   1; 
    column-gap:     1em; 
    text-align: justify;
    max-width:      90%;
    margin-bottom:  0px;    
    font-size:      1.2em;
    height:         1100px;
    color: black;
}
#raya3 {
    position: absolute;
    top: 1060px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 0px;
}
#no-drogas {
    position: absolute;
    top: 2950px;
    left: 0%;
    width: 100%;
    height: 350px;
}



#pre-divi {
    position: absolute;
    top: 3370px;
    left: 0%;
    width: 100%;
    height: 1200px;
}
#ti-pre-divi {
    position: absolute;
    top:            0px;
    margin-top:     0%;
    left:           0%;
    width:          100%;
    text-align:     center;
    font-size:      1.4em;
    color: blue;
}
#te-pre-divi {
    position: absolute;
    top:            30px;
    left:           5%;
    column-width:   90%; 
    column-gap:     1em;
    text-align:     justify; 
    max-width:      90%; 
    margin-bottom:  0px;    
    height:         1200px;
    font-size:      1.2em;
    color: black;
}
#raya23 {
    position: absolute;
    top: 2150px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 0px;
}




#ima-coda {
    position: absolute;
    top: 4630px;
    left: 0%;
    width: 100%;
    height: 350px;
}

#cod-divi {
    position: absolute;
    top: 5000px;
    left: 0%;
    width: 100%;
    height: 1500px;
}
#ti-cod-divi {
    position: absolute;
    top: 0px;
    margin-top: 0%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    color: blue;
}
#te-cod-divi {
    position:       absolute;
    top:            30px;
    left:           5%;
    column-count:   1; 
    column-gap:     1em;
    text-align:     justify; 
    max-width:      100%; 
    margin-bottom:  0px;    
    height:         1500px;
    font-size:      1.2em;
    color: black;
    width:          90%;
}
#raya24 {
    position: absolute;
    top: 1535px;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    color: #888888;
    font-size: 0px;
}











#imagen-eres{
    position: absolute;
    top: 154px;
    left: 0%;
    width: 100%;
    height: 400px;
}
#emer {
    position: absolute;
    top: 565px;
    left: 0%;
    width: 100%;
    height: 70px;
    font-size: 1.5em;
    text-align: center;
    margin-top: 0%;
    padding-top: 0px;
    background-color: darkorange;
}

#eres-iz {
    position: absolute;
    top: 645px;
    left: 0px;
    width: 100%;
    height: 500px;
    border-right: none;
    padding-right: 0px;
}
#eres-iz-tit {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    margin-top: 0%;
    font-size: 1.5em;
    text-align: center;
    color: black;
    display: inline-block; 
    transform: scaleY(1.6); 
}
#eres-iz-let {
    position: absolute;
    top: 35px;
    left: 0%;
    width: 100%;
    color: black;
    font-size: 1.7em;
    text-align: center;
    height: 50px;
}
#ol1 {
    position: absolute;
    top: 107px;
    left: 0%;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

#pregunta{
    color: black;
    font-size: 1.0em;
    text-align: justify;
    margin-top: 0px;
    margin-bottom: 0px;
    left: 0%;
    width: 80%;
}
#imagen-stopsex {
    position: absolute;
    top: 1500px;
    left: 0%;
    width: 100%;
    height: 250px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
    border-right: none;
}
#sexo {
    position: absolute;
    top: 1790px;
    left: 0%;
    width: 100%;
    height: 1100px;
    padding-right: 0px;
    border-right: none;
    border-bottom: none;
}
#sexo-t {
    position: absolute;
    top: 5px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 1.3em;
    color: black;
}
#ol3 {
    position: absolute;
    top: 40px;
    left: 0%;
    width: 100%;
}


#eres-de {
    position: absolute;
    top: 2899px;
    left: 0%;
    width: 100%;
    height: 610px;
    border-left: none;
    padding-left: 0px;
}
#eres-de-let {
    position: absolute;
    top: 5px;
    left: 0%;
    width: 100%;
    color: black;
    font-size: 1.3em;
    text-align: center;
    margin-top: 0%;
}
#ol2 {
    position: absolute;
    top: 30px;
    left: 0%;
    margin-left: 0px;
    margin-top: 0%;
}
#pregunta1{
    color: black;
    font-size:      1em;
    text-align:     justify;
    margin-top:     0px;
    margin-bottom:  0px;
    margin-left:    0px;
    left:           0%;
    width:          90%;
}


#comida {
    position: absolute;
    top: 3510px;
    left: 0%;
    width: 100%;
    height: 660px;
    padding-right: 0px;
    border-left: none;
    border-bottom: none;
}

#imagen-comida {
    position: absolute;
    top: 0px;
    left: 0%;
    width: 97%;
    height: 300px;
    z-index: 2;
    opacity: 0.7;
    border-radius: 10px;
    width: 100%;
}

#comida-t {
    position: absolute;
    top: 310px;
    left: 0px;
    margin-top: 0%;
    margin-bottom: 0%;
    text-align: center;
    width: 100%;
    font-size: 1.4em;
    color: black;
}
#ol4 {
    position: absolute;
    top: 350px;
    left: 0px;
    width: 100%;
}


#sugerencia {
    position: absolute;
    top:        4610px;
    left:       0%;
    width:      100%;
    height:     80px;
}
#final-preguntas {
    position:   absolute;
    top:        0px;
    text-align: center;
    left:       0%;
    width:      100%;
    font-size:  1.3em;
    color: red;
}

#separa1 {
    position: absolute;
    top: 5816px;
    left: 0%;
    margin: 0%;
    width: 100%;
    color: #888888;
    font-size: 0px;
}


/* ==============================((((((((((((((((((*/
#formu {
    position: absolute;
    top: 140px;
    left: 0%;
    width: 100%;
    height: 460px;
    border: none;
}
#for-con-tit {
    position: absolute;
    top: 10px;
    color: black;
    text-align: center;
    width: 100%;
    margin-top: 0%;
    font-size: 1.5em;

}

#for-nombre-t {
    position: absolute;
    top: 90px;
    left: 0%;
    padding-left: 20px;
    font-size: 1.1em;
    
}
#for-nombre {
    position: absolute;
    top: 85px;
    left: 30%;
    height: 1.1em;
    width: 50%;
}
#for-email-t {
    position: absolute;
    top: 165px;
    left: 0%;
    padding-left: 20px;
}
#for-email {
    position: absolute;
    top: 150px;
    left: 30%;
    height: 30px;
    width: 50%;
}
#for-mensaje-t {
    position: absolute;
    top: 205px;
    left: 0%;
    padding-left: 20px;
}
#for-mensaje {
    position: absolute;
    top: 205px;
    left: 30%;
    width: 50%;
}
#for-telefono-t {
    position: absolute;
    top: 305px;
    left: 0%;
    padding-left: 20px;
}
#for-telefono {
    position: absolute;
    top: 305px;
    left: 30%;
    width: 50%;
    height: 30px;
}
#enviar {
    position: absolute;
    top: 370px;
    left: 30%;
}
#esc-lla {
    position: absolute;
    top: 640px;
    left: 0%;
    width: 100%;
    height: 460px;
    border: none;
}
#llama {
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    width: 100%;
    font-size: 40px;
    color: rgb(66, 18, 222);
}
#for-parrafo {
    position: absolute;
    top: 100px;
    left: 0px;
    text-align: justify;
    width: 80%;
    font-size: 22px;
    color: black;
    margin-left: 10%;
    margin-right: 10%;
}
#titulo-confidencial{
    position: absolute;
    margin-top: 0px;
    left: 0%;
    top: 600px;
    font-size: 2em;
    width: 100%;
    color: red;
    opacity: 0.2;
    text-align: center;
}



#portada-libro {position: absolute; top: 156px; left: 20%; width: 60%; height: 250px; margin-top: 0%;}
#division_0 {position: absolute; top: 415px; left: 0%; width: 90%; height: 750px; 
    border: none; padding-left: 4%; padding-right: 0%;}

        #division_0_titulo {position: absolute; top: 0px; margin-top: 0px; text-align: center; margin-left: 0%; width: 100%; font-size: 1.5em; color: rgb(18, 28, 175);}
        #division_0_texto {position: absolute; top: 30px; text-align: justify; width: 95%; font-size: 1.1em; color: black; }
        #lista-1{position: absolute; top: 230px; font-size: 1.1em; color: black; left: 0%; width: 90%; text-align: justify;}
        #division_0_texto2 {position: absolute; top: 490px; margin-top: 0px; width: 100%; font-size: 1.1em; color: black;}
        #lista-2{position: absolute; top: 520px; font-size: 1.1em; color: black; left: 0%; width: 90%; text-align: justify;}

/*  ====================== COMIENZA LA FRANJA # 2 =============================================    */

#imagen-prevension {position: absolute; top: 1115px; left: 20%; width: 60%; height: 250px;}
#division_1 {position: absolute; top: 1390px; left: 0%; width: 100%; height: 1300px;}
        #division_1_titulo {position: absolute; top: 0px; margin-top: 0px; text-align: center; width: 100%; font-size: 1.1em; color: rgb(232, 232, 235); background-color: #c92b2b;}
        #division_1_texto {position: absolute; top: 30px; text-align: justify; width: 90%; font-size: 1.1em; color: black; column-count: 1; 
            left: 4%; height: 1270px;}
            #Deja_de_correr {color: red; font-size: 1.2em;}

/*  ====================== COMIENZA LA FRANJA # 3 =============================================    */
#division-2 {position: absolute; top: 2725px; left: 0%; width: 100%; height: 448px;}
#factores-riesgo-titulo {position: absolute; top: 0px; margin-top: 0%; width: 100%; text-align: center; 
font-size: 1.2em; color: rgb(21, 12, 145);}
#factores-riesgo-texto {position: absolute; top: 30px; width: 100%; left: 0%; color: black;}
#factores-riesgo-linea {margin-left: 0%; margin-top: 0px; font-size: 1em; width: 90%;}
#factores-riesgo-titulo2 {position: absolute; top: 210px; left: 0%; margin-top: 0%; width: 100%; text-align: center; font-size: 1.3em;}
#factores-riesgo-texto2 {position: absolute; top: 235px; width: 100%; left: 0%; left: 0%; color: rgb(26, 6, 136);}
    #bb {display: none; position: absolute; top: 2000px;}
#titulo-prevencion{
    position: absolute;
    margin-top: 0px;
    left: 0%;
    top: 25px;
    font-size: 3em;
    width: 100%;
    color: red;
    opacity: 0.2;
    width: 100%;
    text-align: center;
}
#separa_1 {display: none; position: absolute; top: 642px; left: 0%; color: rgb(155, 150, 150);}
#aa {display: none; position: absolute;top: 1170px; left: 0%; color: rgb(155, 150, 150);}


 }