/*
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semibold: 600
Bold: 700
*/

:root {
    --color-fondo: #fff4e6;
    --color-contenedor: #ffd8a8;
    --color-contenido: #ffc078;
    --color-destacado: #ffa861;
    --color-contenido-borde: #fd7e14;
    --color-sombra: #cacaca;
    --color-tabla-borde: #555555;
    --color-tabla-titulo: #577e89;
    --color-tabla-cabecera: #83bdb9;
    --color-texto: #555555;
    --color-timeline-bkgr-01: #EEC9AF;
    --color-timeline-bkgr-02: #9dda92;
    --color-timeline-bkgr-03: #E4CBE8;
    --color-timeline-bkgr-04: #D1B5B1;
    --color-timeline-bkgr-05: #c0c6db;
    --color-timeline-bkgr-06: #c47e8a;
    --color-timeline-bkgr-07: #f3a3a0;
    --color-timeline-bkgr-08: #f7b1a1;
    --color-timeline-bkgr-09: #F5C186;
    --color-timeline-bkgr-10: #FCDBA6;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    line-height: 1;
    font-weight: 400;
    color: var(--color-texto);
    font-family: "Rubik", sans-serif;
    background-color: var(--color-fondo);
}

.italic {
    font-style: italic;
}

.under-construction-text {
    color: var(--color-sombra);
}

.header-title {
    font-size: 6.2rem;
    margin-bottom: 3.2rem;
}

.container {
    max-width: 130rem;
    margin: 0 auto;
}

.grid {
    display: grid;
}

.grid-4-cols {
    grid-template-columns: repeat(4, 1fr);
}

.grid-2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.padding-normal {
    padding: 1rem;
}

.padding-small {
    padding: 0.8rem;
}

.padding-small-x {
    padding: 0.6rem;
}

.padding-small-xx {
    padding: 0.4rem;
}

.margin-bottom-small-x {
    margin-bottom: 0.6rem;
}

.margin-bottom-small {
    margin-bottom: 0.8rem;
}

.margin-bottom-normal {
    margin-bottom: 1rem;
}

.margin-bottom-normal-x {
    margin-bottom: 1.5rem;
}

.margin-bottom-large {
    margin-bottom: 2rem;
}

.margin-bottom-large-x {
    margin-bottom: 3rem;
}

.margin-bottom-large-xx {
    margin-bottom: 4rem;
}

.margin-bottom-large-xxx {
    margin-bottom: 5rem;
}

.margin-top-normal {
    margin-top: 1rem;
}

.margin-top-large {
    margin-top: 2rem;
}

.margin-top-large-x {
    margin-top: 3rem;
}

.margin-top-large-xx {
    margin-top: 4rem;
}

.margin-top-large-xxx {
    margin-top: 5rem;
}

.margin-right-small-xxx {
    margin-right: 0.8rem;
}

.margin-right-normal {
    margin-right: 1rem;
}

.margin-right-large {
    margin-right: 2rem;
}

.margin-right-large-x {
    margin-right: 3rem;
}

.margin-right-large-xx {
    margin-right: 4rem;
}

.margin-top-large-xxx {
    margin-right: 5rem;
}

.width-5 {
    width: 5%;
}

.width-10 {
    width: 10%;
}

.width-15 {
    width: 15%;
}

.width-20 {
    width: 20%;
}

.width-25 {
    width: 25%;
}

.width-30 {
    width: 30%;
}

.width-40 {
    width: 40%;
}

.width-50 {
    width: 50%;
}

.width-60 {
    width: 60%;
}

.width-70 {
    width: 70%;
}

.align-text-left {
    text-align: left;
}

.align-text-center {
    text-align: center;
}

.align-content-center {
    display: flex;
    justify-content: center;
}

.align-content-vertical-center {
    display: flex;
    align-items: center;
}

.accordion {
    background-color: var(--color-tabla-titulo);
    color: var(--color-fondo);
    font-weight: 800;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 1.4rem;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    border: 0.1rem solid;
    transition: 0.4s;
    border-color: var(--color-tabla-titulo);
    border-radius: 1rem;
    border-radius: 1rem;
    font: inherit;
    font-size: 1.6rem;
}

.active,
.accordion:hover {
    background-color: var(--color-tabla-cabecera);
    color: var(--color-texto);
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}


.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip .tooltiptext {
    visibility: hidden;
    padding: 0.25em 0.5em;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    text-align: center;
    border-radius: 0.25em;
    white-space: nowrap;
    font-size: 1.6rem;

    /* Position the tooltip */
    position: absolute;
    z-index: 101;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    transition-property: visibility;
    transition-delay: 0s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    transition-delay: 0.3s;
}