* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
}
strong {
    font-weight: bold;
}
a {
    color: #000;
    text-decoration: none;
}
html {
    font-size: calc(1000vh / 1080); /* 1rem = 10px en el illustrator */
}
body {
    background-color: #f3eded;
    margin: 0;
    padding: 0;
}

.principal {
    display: flex;
    flex-direction: row;
    margin: 0 8.13rem;
}
.principal section {
    position: relative;
    margin-right: 4.73rem;
}
.principal section.interesa {
    margin-right: 0;
}
.principal section h2 {
    font-size: 3rem;
    line-height: 3rem;
    margin: 0 0 2.5rem 0;
}
.adorno {
    position: absolute;
    pointer-events: none;
}
.flechaCollapsable {
    display: none;
}
.cajaSombra {
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}

section.compromiso, section.interesa {
    width: calc(30.86vw - 7.94rem);
}
section.accidentes {
    width: calc(38.27vw - 9.85rem);
}

/* Cabecera */

header {
    display: flex;
    flex-direction: row;
    height: 16.14rem;
    padding: 3.74rem 4.6rem 3.59rem 4.6rem;
    margin-bottom: 8.7rem;
    background: linear-gradient(90deg, var(--verde-ferrer) 0%, var(--azul-ferrer) 100%);
}
header .logo {
    height: 5rem;
    margin-right: auto;
}
header h1, header h2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0 4.3rem;
    color: #fff;
}
header h1 {
    font-size: 5.21rem;
}
header .separador {
    border-left: solid 2px #fff;
}
header h2 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2.9rem;
    line-height: 3.48rem;
    font-weight: normal;
    font-style: italic;
    letter-spacing: -0.1rem;
}
header a.home {
    margin-left: auto;
}
header a.home img {
    height: 3.13rem;
}

/* Panel Compromiso */

.compromiso .caja {
    display: flex;
    flex-direction: column;
    min-height: 45.3rem;
    border-radius: 1.85rem;
    overflow: hidden;
    margin-bottom: 1.51rem;
}
.compromiso .imagenes {
    height: 20.8rem;
}
.compromiso .adorno1 {
    height: 9.91rem;
    top: -3.5rem;
    right: -0.5rem;
}
.compromiso .adorno2 {
    height: 12.31rem;
    bottom: -4.8rem;
    left: -0.8rem;
}
.compromiso .caja.ultimoSinBorde > .recursoPdf:last-child {
    border-bottom: none;
}

/* Cita */

.compromiso .cita {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 20rem;
    border-radius: 1.78rem;
    padding: 2.46rem 2.23rem;
}
.compromiso .cita > img {
    width: 12.2rem;
    height: 12.2rem;
    border-radius: 50%;
    object-fit: cover;
}
.compromiso .cita .texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 15.08rem;
    padding-left: 2rem;
    border-left: solid 1px var(--verde-ferrer);
    margin-left: 2rem;
}
.compromiso .cita .texto .contenido * {
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 2rem;
    line-height: 2.4rem;
    letter-spacing: -0.1rem;
}
.compromiso .cita .texto .autor {
    font-size: 1.6rem;
    line-height: 1.92rem;
    font-weight: bold;
    margin: 1rem 0 0.5rem 0;
}
.compromiso .cita .texto .cargo {
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    line-height: 1.8rem;
}

/* Panel de accidentes */

.accidentes {
    display: flex;
    flex-direction: column;
}

.accidentes .cabecera {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 11.8rem;
    border-radius: 1.98rem;
    margin-bottom: 2.38rem;
}
.accidentes .cabecera .dato {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.accidentes .cabecera .dato:first-child {
    justify-content: right;
    padding-right: 3rem;
    border-right: solid 2px var(--verde-ferrer);
}
.accidentes .cabecera .dato:last-child {
    justify-content: left;
    padding-left: 3rem;
}
.accidentes .cabecera .dato .cifra {
    font-size: 7.77rem;
    line-height: 7.77rem;
    letter-spacing: -0.4rem;
    font-weight: bold;
    margin-right: 1.5rem;
    color: var(--azul-ferrer);
}
.accidentes .cabecera .dato .etiqueta {
    font-size: 1.7rem;
    line-height: 1.7rem;
}
.accidentes .cabecera .dato .etiqueta strong {
    font-size: 4.4rem;
    line-height: 4.4rem;
    font-weight: normal;
}

.accidentes .desglose {
    display: flex;
    flex-direction: row;
}
.accidentes .desglose .dato {
    display: flex;
    flex-direction: row;
}
.accidentes .desglose .dato > span {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}
.accidentes .desglose .porPartes {
    position: relative;
}
.accidentes .desglose .porPartes .dato {
    position: absolute;
    left: 20.7rem;
    right: 0;
    height: 5.05rem;
    border-radius: 1.35rem;
}
.accidentes .desglose .porPartes .dato .cifra {
    flex: 0 0 6.64rem;
    font-size: 3.6rem;
    letter-spacing: -0.1rem;
    font-weight: bold;
    justify-content: center;
    padding-left: 1.36rem;
}
.accidentes .desglose .porPartes .dato .etiqueta {
    font-size: 1.8rem;
    line-height: 1.8rem;
    padding-right: 1.5rem;
    letter-spacing: -0.05rem;
}
.accidentes .desglose .porPartes .dato:nth-child(1) {
    top: 1.4rem;
}
.accidentes .desglose .porPartes .dato:nth-child(2) {
    top: 9rem;
}
.accidentes .desglose .porPartes .dato:nth-child(3) {
    top: 14.82rem;
}
.accidentes .desglose .porPartes .dato:nth-child(4) {
    top: 20.64rem;
}
.accidentes .desglose .porPartes .dato:nth-child(5) {
    top: 28.5rem;
}
.accidentes .desglose .porPartes .dato:nth-child(6) {
    top: 34.32rem;
}
.accidentes .desglose .porPartes .dato:nth-child(7) {
    top: 40.14rem;
}
.accidentes .desglose .porPartes .monigote {
    position: relative;
    width: 25rem;
    height: 53.4rem;
    background-image: url("../images/monigote-ZYReMCC.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: auto 100%;
    pointer-events: none;
}
.accidentes .desglose .porTipo {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin: 1.4rem 0 0 1rem;
}
.accidentes .desglose .porTipo .dato {
    border-radius: 1.7rem;
    margin-bottom: 0.78rem;
}
.accidentes .desglose .porTipo .dato .cifra {
    flex: 0 0 8.49rem;
    font-size: 4.2rem;
    line-height: 4.2rem;
    letter-spacing: -0.1rem;
    font-weight: bold;
    justify-content: right;
    padding-right: 1.24rem;
    color: var(--azul-ferrer);
    border-right: solid 1px var(--verde-ferrer);
}
.accidentes .desglose .porTipo .dato .etiqueta {
    font-size: 1.9rem;
    line-height: 1.9rem;
    padding: 0 1.5rem;
    letter-spacing: -0.05rem;
}
.accidentes .desglose .porTipo .dato:nth-child(1) {
    height: 6.3rem;
}
.accidentes .desglose .porTipo .dato:nth-child(2) {
    height: 6.3rem;
}
.accidentes .desglose .porTipo .dato:nth-child(3) {
    height: 7.8rem;
}
.accidentes .desglose .porTipo .dato:nth-child(4) {
    height: 10.8rem;
}
.accidentes .desglose .porTipo .dato:nth-child(5) {
    height: 16.9rem;
}

.accidentes .adorno1 {
    height: 9rem;
    top: -3rem;
    right: -0.5rem;
}
.accidentes .adorno2 {
    height: 9.8rem;
    bottom: -3.2rem;
    right: -3.3rem;
}

/* Panel "Te interesa" */

.interesa .caja {
    display: flex;
    flex-direction: column;
    min-height: 66.8rem;
    border-radius: 1.85rem;
    overflow: hidden;
}
.interesa .imagenes {
    height: 19.8rem;
}
.interesa .adorno1 {
    height: 12.86rem;
    top: -6rem;
    right: 2rem;
}

/* Recursos */

.recurso {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 11.25rem;
    border-bottom: solid 1px var(--verde-ferrer);
    padding: 0 1.5rem 0 12.1rem;
}
.recurso .icono {
    position: absolute;
    top: 1.5rem;
    left: 2.3rem;
    width: 8rem;
    height: 8rem;
    border-radius: 1rem;
    background-color: var(--azul-ferrer);
    transition: background-color 0.2s;
}
a.recurso:hover .icono {
    background-color: var(--verde-ferrer);
}
.recurso .titulo {
    font-size: 1.9rem;
    font-weight: bold;
    line-height: 2.28rem;
}
.recurso .descripcion {
    font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
    font-size: 1.9rem;
    line-height: 2.28rem;
}
.recursoEnlace .icono {
    background-image: url("../images/icono-enlace-s_Snn24.png");
    background-repeat: no-repeat;
    background-size: auto 6.4rem;
    background-position: center center;
}
.recursoPdf .icono {
    background-image: url("../images/icono-pdf-z3Hfgxp.png");
    background-repeat: no-repeat;
    background-size: auto 6.16rem;
    background-position: center center;
}
.recursoTexto {
    padding: 0 2rem;
    font-size: 1.9rem;
    text-align: center;
}

/* Imágenes */

.imagenes {
    display: flex;
    flex-direction: row;
    margin: auto 0 2rem 0;
}
.imagenes .imagen {
    position: relative;
    flex-grow: 1;
    min-width: 50%;
    max-width: 100%;
    cursor: pointer;
}
.imagenes .imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.imagenes .imagen .titulo {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 2rem;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.2s;
    opacity: 0;
}
.imagenes .imagen:hover .titulo {
    opacity: 1;
}

/* Pantalla selección */

body.selector {
    margin-left: 0;
    margin-right: 0;
}
header.selector {
    margin: 0;
}
header.selector .wellLiving {
    height: 4rem;
}
.contenedor.selector {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 12.4rem);
    background-image: url("../images/fondo-izda-8q0aFoG.png"), url("../images/fondo-dcha-pLZsXzx.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left 58%, right 55%;
    background-size: auto 65%, auto 65%;
}
.botonesCentros {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 91.44rem;
    margin-bottom: 6.2rem;
}
.botonesCentros .logoGrande {
    width: 100%;
    padding: 0 6rem 4rem 6rem;
    border-bottom: solid 2px var(--verde-ferrer);
    margin-bottom: 4rem;
}
.botonesCentros .botonCentro {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    width: calc(50% - 1.8rem);
    height: 29.54rem;
    padding: 3.5rem;
    padding-right: 19%;
    color: var(--azul-ferrer);
    background-color: #fff;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
    border-radius: 2rem;
    transition: color,background-color 0.2s;
    font-size: 4.2rem;
    line-height: 4rem;
    font-weight: bold;
}
.botonCentro:first-of-type {
    margin-right: 3.5rem;
}
.botonCentro:hover {
    color: #fff;
    background-color: var(--verde-ferrer);
}
.botonCentro:first-of-type:hover {
    background-color: var(--azul-ferrer);
}

#popupImagen {
    z-index: 20;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4rem;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.logoPie {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin: 3.53rem 8.13rem;
}
.logoPie img {
    height: 5rem;
}
#popupImagen img {
    max-width: 100%;
    max-height: 100%;
}
#popupImagen .titulo {
    margin-top: 3rem;
    font-size: 4rem;
    font-weight: bold;
    color: #fff;
}

.desktop {
    display: block;
}
.desktop-flex {
    display: flex;
}
.mobile {
    display: none;
}
.mobile-flex {
    display: none;
}

@media (min-aspect-ratio: 2) {
    html {
        font-size: calc(1000vw / 1920);
    }
}
@media (max-aspect-ratio: 1.7) {
    html {
        font-size: calc(1000vw / 1920);
    }
}
@media (max-aspect-ratio: 1.5) {
    .contenedor.selector {
        background-image: none;
    }
}

@media (max-width: 1024px) {
    html {
        font-size: calc(1000vw / 1121.73);
    }
    body {
        margin: 0;
    }
    .degradado {
        z-index: -100;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(306.2deg, var(--azul-ferrer) 10%, var(--verde-ferrer) 90%);
    }

    header {
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 15.56rem;
        align-items: center;
        margin: 0;
        padding: 0 6rem 0 5rem;
        overflow: hidden;
    }
    header .degradado {
        position: absolute;
        height: 100vh;
    }
    header .logo {
        width: 30.7rem;
        height: fit-content;
    }
    header .logoMini {
        width: 5.98rem;
        margin-left: auto;
    }
    .tituloGrande {
        width: 100%;
        text-align: center;
        font-size: 7.2rem;
        line-height: 7.69rem;
        font-weight: bold;
        margin: 7.5rem 0 4rem 0;
    }
    .subtituloGrande {
        width: 100%;
        text-align: center;
        font-family: 'Times New Roman', Times, serif;
        font-style: italic;
        font-size: 5.2rem;
        line-height: 6.24rem;
        letter-spacing: -0.18rem;
        margin-bottom: 15rem;
    }
    .principal {
        flex-direction: column;
        margin: 15.56rem 8.66rem 0 8.66rem;
    }
    .principal section {
        width: 100%;
        padding-bottom: 8rem;
        margin: 0 0 9rem 0;
        border-bottom: solid 2px var(--verde-ferrer);
    }
    .principal section h2 {
        font-size: 4.5rem;
        line-height: 4.5rem;
        margin: 0;
        padding: 0 0 3.8rem 4.91rem;
        cursor: pointer;
    }
    .compromiso .caja {
        min-height: 19.66rem;
        border-radius: 6.12rem;
        margin-bottom: 3.62rem;
    }
    .compromiso .imagenes {
        height: auto;
    }
    .compromiso .cita {
        min-height: 36rem;
        border-radius: 5.41rem;
        margin-bottom: 8.39rem;
        padding: 5.87rem 5.38rem;
    }
    .compromiso .cita > img {
        width: 16.21rem;
        height: 16.21rem;
    }
    .compromiso .cita .texto {
        min-height: 24.26rem;
        padding-left: 5.05rem;
        border-left: solid 2px var(--verde-ferrer);
        margin-left: 3.71rem;
    }
    .compromiso .cita .texto .contenido * {
        font-size: 3.9rem;
        line-height: 4.68rem;
        letter-spacing: -0.19rem;
    }
    .compromiso .cita .texto .autor {
        font-size: 3.5rem;
        line-height: 4.2rem;
        margin: 3.5rem 0 0.5rem 0;
    }
    .compromiso .cita .texto .cargo {
        font-size: 3.5rem;
        line-height: 4.2rem;
    }
    .compromiso .adorno1 {
        height: 15rem;
        right: -1rem;
        top: -3.5rem;
    }
    .compromiso .adorno2 {
        height: 20.91rem;
        bottom: 7.2rem;
        left: -1.5rem;
    }
    .accidentes .cabecera {
        height: 20.17rem;
        border-radius: 4.47rem;
        margin-bottom: 4.37rem;
    }
    .accidentes .cabecera .dato:first-child {
        padding-right: 3rem;
    }
    .accidentes .cabecera .dato:last-child {
        padding-left: 3rem;
    }
    .accidentes .cabecera .dato .cifra {
        font-size: 12.2rem;
        line-height: 12.2rem;
        letter-spacing: -0.63rem;
    }
    .accidentes .cabecera .dato .etiqueta {
        font-size: 3.5rem;
        line-height: 3.21rem;
    }
    .accidentes .cabecera .dato .etiqueta strong {
        font-size: 7.5rem;
        line-height: 6rem;
    }
    .accidentes .desglose {
        flex-direction: column;
    }
    .accidentes .desglose .porPartes {
        margin-bottom: 7.96rem;
    }
    .accidentes .desglose .porPartes .dato {
        position: initial;
        margin-left: 47.9rem;
        height: 10.42rem;
        border-radius: 3.36rem;
        margin-bottom: 1.84rem;
    }
    .accidentes .desglose .porPartes .dato .cifra {
        flex: 0 0 13.85rem;
        font-size: 6.5rem;
        letter-spacing: -0.18rem;
        justify-content: right;
    }
    .accidentes .desglose .porPartes .dato .etiqueta {
        font-size: 3.5rem;
        line-height: 3.7rem;
        padding: 0 2rem 0 6rem;
        letter-spacing: -0.097rem;
    }
    .accidentes .desglose .porPartes .monigote {
        position: absolute;
        top: 0;
        left: 0;
        width: 50rem;
        height: 89.2rem;
        background-image: url("../images/monigote-mobile-9zWzguI.png");
    }
    .accidentes .desglose .porTipo {
        width: 100%;
        flex-wrap: wrap;
        margin: 0;
    }
    .accidentes .desglose .porTipo .dato {
        border-radius: 3.36rem;
        margin: 0 0 0 47.9rem;
    }
    .accidentes .desglose .porTipo .dato .cifra {
        flex: 0 0 17.14rem;
        font-size: 7.4rem;
        line-height: 7.4rem;
        letter-spacing: -0.17rem;
        padding-right: 3.7rem;
        border-right: solid 2px var(--verde-ferrer);
    }
    .accidentes .desglose .porTipo .dato .etiqueta {
        font-size: 3.5rem;
        line-height: 4rem;
        letter-spacing: -0.097rem;
        padding: 0 2rem;
    }
    .accidentes .desglose .porTipo .dato:nth-child(1) {
        height: 10.3rem;
        margin-bottom: 1.9rem;
    }
    .accidentes .desglose .porTipo .dato:nth-child(2) {
        height: 10.3rem;
        margin-bottom: 1.9rem;
    }
    .accidentes .desglose .porTipo .dato:nth-child(3) {
        height: 13.3rem;
        margin-bottom: 1.9rem;
    }
    .accidentes .desglose .porTipo .dato:nth-child(4) {
        height: 16.3rem;
        margin-bottom: 2.1rem;
    }
    .accidentes .desglose .porTipo .dato:nth-child(5) {
        height: 19.3rem;
    }
    .accidentes .adorno1 {
        height: 15.73rem;
        right: -1rem;
        top: -4.5rem;
    }
    .interesa .caja {
        min-height: 19.66rem;
        border-radius: 6.12rem;
    }
    .interesa .imagenes {
        height: auto;
    }
    .interesa .adorno1 {
        height: 18.77rem;
        right: 3.5rem;
        top: -7rem;
    }
    .enlaceHome {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 3.2rem;
        line-height: 3.2rem;
    }
    .enlaceHome img {
        display: block;
        height: 8.48rem;
        margin-right: 3.28rem;
    }
    .recurso {
        height: auto;
        min-height: 19.66rem;
        border-bottom: solid 2px var(--verde-ferrer);
        padding: 0 2rem 0 23.12rem;
    }
    .recurso .icono {
        top: 1.7rem;
        left: 4rem;
        width: 16rem;
        height: 16rem;
    }
    .recurso .titulo {
        font-size: 3.7rem;
        line-height: 4.4rem;
    }
    .recurso .descripcion {
        font-size: 3.5rem;
        line-height: 4.2rem;
    }
    .recursoEnlace .icono {
        background-size: auto 13.52rem;
    }
    .recursoPdf .icono {
        background-size: auto 12.54rem;
    }
    .recursoTexto {
        padding: 0 3rem;
        font-size: 3.7rem;
    }
    .imagenes {
        flex-direction: column;
        margin: 0 0 9.67rem 0;
    }
    .imagenes .imagen {
        width: 100%;
        height: 55.34rem;
    }
    .imagenes .imagen .titulo {
        font-size: 4.5rem;
        padding: 3.5rem;
    }
    .logoPie {
        align-items: center;
        margin: 8rem 8.66rem;
    }
    .logoPie img {
        height: 7rem;
    }

    body.selector {
        margin: 0;
    }
    header.selector {
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }
    .contenedor.selector {
        min-height: 0;
        background-image: none;
        border-bottom: solid 2px #fff;
    }
    header.selector {
        height: 35.31rem;
        justify-content: center;
    }
    header.selector .logo {
        width: fit-content;
        height: 20.33rem;
        margin: 0;
    }
    .botonesCentros {
        margin: 50rem 0 15rem 0;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .botonesCentros .botonCentro {
        width: 100%;
        height: 41.36rem;
        font-size: 7.2rem;
        line-height: 7.7rem;
        padding: 6.3rem;
        padding-right: 50%;
    }
    .botonCentro:first-of-type {
        margin-right: 0;
        margin-bottom: 5.5rem;
    }
    .logoAbajo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 24rem;
    }
    .logoAbajo img {
        width: 23.3rem;
    }
    body.selector .logoPie {
        margin-top: 2rem;
    }

    .flechaCollapsable {
        display: inline-block;
        height: 2.51rem;
        margin-left: 2.5rem;
        transform-origin: 50%;
        transform: rotate(90deg);
        transition: transform 0.3s;
    }
    .principal section.collapsed .flechaCollapsable {
        transform: rotate(0deg);
    }
    .principal section.collapsed {
        padding-bottom: 3.2rem;
    }
    .principal section.collapsed .collapsable {
        display: none;
    }

    .desktop {
        display: none;
    }
    .desktop-flex {
        display: none;
    }
    .mobile {
        display: block;
    }
    .mobile-flex {
        display: flex;
    }
}