@charset "UTF-8";
/* CSS Document */
/* ©2018 MSD www.marcelosoler.com */
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
*, *:before, *:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}
body {
    font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.5rem;
    padding: 0 1rem;
    color: #000;
    background: #fff;
    background: url("cid-logo.svg") no-repeat fixed;
    background-position: center 10vh;
    background-size: calc(100vh / 3);
    animation: zoom 3s 1 ease;
}
@-webkit-keyframes zoom {
    0% {
        background-size: 1vh
    }
    100% {
        background-size: calc(100vh /3)
    }
}
@keyframes zoom {
    0% {
        background-size: 1vh
    }
    100% {
        background-size: calc(100vh /3)
    }
}
/*section {
    min-height: 100%
}*/
a {
    -webkit-transition-duration: .5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin: 0;
    color: #039;
}
p {
    color: #404040;
}
div.marca {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    z-index: 1;
    background: transparent;
    -webkit-animation: intro 3s 1 ease; /* Safari 4.0 - 8.0 */
    animation: intro 3s 1 ease;
}
@-webkit-keyframes intro {
    0% {
        background: rgba(255, 255, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0);
    }
}
@keyframes intro {
    0% {
        background: rgba(255, 255, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0);
    }
}
.saltear a {
    position: absolute;
    display: block;
    top: 85%;
    left: 50%;
    width: 8rem;
    height: 8rem;
    border: 3px solid transparent;
    box-sizing: border-box;
    border-radius: 6rem;
    margin-left: -4rem;
    background: url("scroll-down.svg") no-repeat center center;
    background-size: 3.6rem;
    z-index: 99;
    -webkit-animation: loop 1s infinite ease-in-out; /* Safari 4.0 - 8.0 */
    -webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
    animation: loop 1s infinite ease-in-out;
    animation-direction: alternate;
}
@-webkit-keyframes loop {
    0% {
        opacity: 1;
        left: 50%;
        top: calc(85% - 10rem);
    }
    100% {
        opacity: 1;
        left: 50%;
        top: calc(85% - 12rem);
    }
}
@keyframes loop {
    0% {
        opacity: 1;
        left: 50%;
        top: calc(85% - 10rem);
    }
    100% {
        opacity: 1;
        left: 50%;
        top: calc(85% - 12rem);
    }
}
.saltear a:hover {
    background-size: 4.8rem;
    border-color: #07f;
}
.saltear span {
    display: none;
}
header {
    margin: 110vh 0 0;
    border-top: 4px solid #808080;
    border-bottom: 4px solid #808080;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #024;
    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    box-sizing: border-box;
}
header > div {
    display: block;
    height: 7.2rem;
    /*    max-height: 9rem;
    overflow: hidden;*/
}
.cabecera {
    padding: 0 1.8rem;
    width: 100%;
}
#logo h1 {
    margin: 0 0 .2rem;
    font-weight: 600;
    width: calc(100% - 8rem);
    color: #29F;
}
#lema h2 {
    font-size: 1.6rem;
    font-weight: 300;
    width: calc(100% - 8rem);
    color: #fff;
    padding-bottom: .25em;
}
section.riesgo {
    min-height: 6.6rem;
}
/* Marcador derecho */
section.findrisc h2 {
    font-size: 2.4rem;
    position: absolute;
    top: .5rem;
    right: 2.4rem;
    padding: 1rem;
    width: 6rem;
    height: 6rem;
    color: #fff;
    background: #000;
    text-align: center;
    border-radius: 6rem;
    border: 2px solid;
    line-height: 1.45;
}
/* Indicador personal (dinámico) */
section.riesgo {
    text-align: left;
    background: #000;
    border-top: 1px solid #444;
    padding: .5em 1.8rem;
    width: 100%;
    height: auto;
    line-height: 1;
}
.riesgo h3 {
    color: white;
    font-weight: 300;
    padding-bottom: .25em;
}
.riesgo > div {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
/* Niveles de risego */
span.cero, .cero a {
    color: #0af; /* Celeste */
}
span.uno, .uno a {
    color: #0C0; /* Verde */
}
span.dos, .dos a {
    color: #ff3; /* Amarillo */
}
span.tres, .tres a {
    color: #fb0; /* Naranja débil */
}
span.cuatro, .cuatro a {
    color: #f80; /* Naranja fuerte */
}
span.cinco, .cinco a {
    color: #f44; /* Rojo */
}
span.consulte {
    display: block;
    color: #eff;
    padding: 1rem 0;
}
.numero::before, .consulte::before {
    display: inline-block;
    content: '\25BA'; /* Flecha indicadora */
    margin-right: .5em;
}
section.contenedor {
    margin: 0;
    padding: 2rem 1rem;
    counter: section;
    counter-reset: section;
    background: #ddd;
}
.factor {
    min-height: 2.4em;
    margin-bottom: .25em;
}
h3.factor {
    font-size: 2.1rem;
    padding-top: 0;
    padding-bottom: .25em;
    border-bottom: 1px dotted #ccc;
    max-width: 90%;
}
span.pregunta::after {
    position: absolute;
    right: 1.2em;
    top: 2.4em;
    color: #07f;
    font-weight: 600;
    font-size: .8em;
    counter-increment: section;
    content: "[ "counter(section) " ]";
}
label {
    display: block;
    line-height: 1.5;
    padding-bottom: .25em;
}
.lineal {
    display: inline-block;
    margin-right: 1.5rem;
}
.lineal input {
    width: calc(100vw / 4 + 6rem);
}
input[type="email"], input[type="number"], input[type="text"] {
    font-size: 1em;
    display: block;
    color: #666;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 6rem;
    padding: .5rem 1.5rem;
    margin: 0 0 .5em;
    width: auto;
    outline: none;
}
input[type="number"]:focus, input[type="number"]:hover, input[type="text"]:focus, input[type="text"]:hover, select:focus, input[type="number"]:valid, input[type="text"]:valid, select:valid, select:hover {
    color: #000;
    background: #fff;
    font-weight: 500;
}
input[type="number"]:read-only, input[type="number"]:read-only::placeholder, input[type="text"]:read-only, input[type="text"]:read-only::placeholder {
    background: transparent;
    color: #666;
    padding: 0;
    border: none;
}
.selector {
    display: block;
    position: relative;
    padding-left: 3rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selector input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 2rem;
    width: 2rem;
    background-color: #ccc;
    border: 2px solid #999;
    border-radius: 50%;
}
.selector:hover input ~ .checkmark {
    background-color: #07f;
}
.selector input:checked ~ .checkmark {
    background-color: #fff;
    border-color: #07f;
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.selector input:checked ~ .checkmark:after {
    display: block;
}
.selector .checkmark:after {
    top: .4rem;
    left: .4rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #07f;
}
select {
    margin: 1rem 0;
    padding: .5rem 1rem;
    font-size: 1.5rem;
    color: #888;
    background: #eee;
    width: 100%;
}
span.descripcion, span.detalle, span.factor, span.puntaje {
    display: block;
    padding: 1.2rem inherit;
}
.puntaje {
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
    background: #06c;
    padding: .5rem 2rem .3rem;
    border-radius: 5rem;
    height: auto;
    position: absolute;
    left: 0;
    top: calc(100% - 4.8rem);
    width: 20vw;
    margin-left: calc(50% - 10vw);
}
.flexible {
    display: flex;
    flex-flow: row wrap;
    /*	max-width: 108rem;*/
    margin: 0 auto;
}
.flexible > .tarjeta {
    margin: 0 0 1rem;
    position: relative;
}
.tarjeta p {
    font-size: 1.5rem;
    padding: 0;
    margin: .5rem 0;
}
.bloque {
    margin-top: 1rem;
    border-top: 8px solid #07f;
    padding: 2rem;
    margin: 1rem;
    background-color: #fff;
    min-height: 42rem;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}
.final, .final h5, .final p {
    background: #222;
    color: #eee;
    height: auto;
}
.final h3 {
    color: #fff;
    min-width: 100%;
    max-height: 3rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
}
.colectora {
    width: 100%;
}
ul.futuro {
    margin: 0;
    padding: .5em 0 0;
    border-top: 1px dotted #ccc;
}
.futuro li {
    padding: .5rem 0;
    list-style: none;
    font-size: 1.5rem;
    border-bottom: 1px solid #444;
    box-sizing: border-box;
}
.futuro li span {
    float: right;
    font-weight: 600;
    text-align: right;
    background: #000;
    padding: .2rem 1rem .2rem;
    width: 50%;
}
footer.pie {
    margin: 0;
    width: 100%;
    background: #ddd;
    color: #06a;
    height: auto;
    padding: 1rem 2rem;
    font-weight: 400;
    text-align: left;
}
.consistente {
    display: block;
    max-width: 48rem;
    margin: 0 auto;
}
.consistente h3 {
    padding: 0 3.6rem;
    color: #07f;
}
footer ul ul {
    padding-bottom: .5rem;
}
a.dir, a.tel {
    color: #039;
    background: #fff;
    border-radius: 6rem;
    padding: .4rem 3rem;
    border: 2px solid #ccc;
    display: table-cell;
    height: 5.4rem;
    width: 100vw;
    vertical-align: middle;
    box-sizing: border-box;
}
a.dir:hover, a.tel:hover {
    color: #000;
    background: #eee;
}
.dir span, .tel span, footer h3 {
    padding-left: 0;
}
a.dir::before {
    content: '\1F30E';
    padding-right: 1.2rem;
    /*    color: #36a;
    vertical-align: middle;*/
}
a.tel::before {
    content: '\1F4F1';
    padding-right: 1.2rem;
    /*    color: #36a;
    font-size: 150%;
    vertical-align: middle;*/
}
footer ul {
    margin-bottom: 1rem;
    font-weight: bold;
}
footer ul ul {
    font-weight: normal
}
footer ul li, footer ul li ul li {
    display: block;
    margin: 0;
    padding: .6rem;
}
div.huella {
    height: 4.8rem;
}
.particion {
    width: calc(100% / 4)
}
/* Tabletas */
@media screen and (max-width: 1079px) {
    .flexible > .tarjeta {
        height: 48rem;
    }
    .particion {
        width: calc(100% / 3);
    }
    body, label, p, input {
        font-size: 1.6rem;
    }
    select {
        font-size: 2rem;
    }
    .bloque {
        min-height: 46rem;
    }
    .puntaje {
        width: 28vw;
        margin-left: calc(50% - 14vw);
    }
}
/* Celulares grandes */
@media screen and (max-width: 839px) {
    /*   header {
        position: relative;
    }*/
    .particion {
        width: calc(100% / 2)
    }
    #logo h1 {
        font-size: 2.4rem
    }
    #lema h2 {
        font-size: 1.6rem;
    }
    h3 {
        font-size: 1.8rem
    }
    .futuro li {
        padding: 0 20%;
    }
    .futuro li span {
        float: none;
        clear: both;
        display: block;
        width: 100%;
        margin: .5rem 0 1rem;
        text-align: left;
    }
    .flexible > .tarjeta {
        height: auto;
    }
    .bloque {
        margin: 1rem;
        min-height: 42rem;
    }
    .puntaje {
        width: 44vw;
        margin-left: calc(50% - 22vw);
    }
    section.contenedor {
        padding: 0;
    }
    .flexible {
        flex: auto;
        flex-flow: row wrap;
    }
}
/* Celulares chicos */
@media screen and (max-width: 667px) {
    .particion {
        width: calc(100% / 1)
    }
    .puntaje {
        width: 92vw;
        margin-left: calc(50% - 46vw);
    }
}
.enfasis {
    font-weight: 600;
    font-style: italic;
}
p.aclaro {
    color: #369;
    /*    position: absolute;
    left: 0;
    bottom: 0; */
    float: left;
    height: 7.8rem;
    width: 100%;
    border-top: 1px dotted #ccc;
    box-sizing: border-box;
    margin: 2rem inherit;
}
#GSG-www {
    display: block;
    margin: 0;
    padding: 0 4.8rem;
}
.copyright::before {
    content: '\1F5A5';
    padding-right: 1.2rem;
    vertical-align: middle;
}
.copyright a {
    color: #808080;
    font-size: 1.4rem;
}
.copyright a:hover {
    color: #000;
    border-bottom: 1px dotted;
}