:root {

    /* Cores */
    --color-misteryBlue: 29, 44, 93;
    --color-darkBlue: 7, 35, 94;
    --color-laranBlue: 26, 75, 169;
    --color-lightBlue: 87, 161, 216;
    --color-lightestBlue: 201, 232, 255;
    --color-blueishGray: 237, 241, 246;
    --color-almostWhite: 248, 250, 249;
    --color-white: 245, 247, 250;
    --color-totalWhite: 255, 255, 255;
    --color-lightGray: 217, 217, 217;
    --color-darkGray: 201, 201, 201;
    --color-darkestGray: 68, 68, 68;
    --color-almostBlack: 17, 23, 31;
    --color-black: 29, 29, 27;

    /* Font family */
    --fontFamily-titillium: 'Titillium Web', sans-serif;

    /* Font styles - Escala tipográfica profissional */
    --fontStyle-h1: clamp(1.75rem, 3vw, 2.5rem);
    --fontStyle-h2: clamp(1.5rem, 2.5vw, 2rem);
    --fontStyle-h3: clamp(1.25rem, 2vw, 1.5rem);
    --fontStyle-h4: clamp(1.125rem, 1.5vw, 1.25rem);
    --fontStyle-h5: clamp(1rem, 1vw, 1.125rem);
    --fontStyle-h6: 1rem;
    --fontStyle-body: clamp(1rem, 1.2vw, 1.125rem);
    --fontStyle-lead: clamp(1.125rem, 1.5vw, 1.25rem);
    --fontStyle-small: clamp(0.875rem, 1vw, 0.875rem);

    /* Font weight - Hierarquia otimizada */
    --fontWeight-light: 300;
    /* Para títulos grandes (H1, H2) */
    --fontWeight-normal: 400;
    /* Para H3 e texto normal */
    --fontWeight-medium: 500;
    /* Para H4 */
    --fontWeight-semibold: 600;
    /* Para H5 */
    --fontWeight-bold: 700;
    /* Para H6 e destaques */

    /* Line height - Otimizado para legibilidade */
    --lineHeight-tight: 1.1;
    /* Títulos grandes */
    --lineHeight-snug: 1.2;
    /* Títulos médios */
    --lineHeight-normal: 1.3;
    /* Subtítulos */
    --lineHeight-relaxed: 1.4;
    /* Títulos pequenos */
    --lineHeight-loose: 1.6;
    /* Texto do corpo */

    /* Size */

    --widthHeight-big: 2rem;
    --widthHeight-medium: 1.5rem;
    --widthHeight-small: 1rem;


    /* Spacing */
    --spacing-superSpacing: 10rem;
    --spacing-bigger: 2rem;
    --spacing-double: 1.5rem;
    --spacing-big: 1rem;
    --spacing-medium: 0.7rem;
    --spacing-small: 0.5rem;
    --spacing-zero: 0rem;

    /* Align */

    --align-center: center;
    --align-flexStart: flex-start;
    --align-flexEnd: flex-end;

    /* Borders */

    --border-radiusRound: 10rem;
    --border-radiusMedium: 1rem;
    --border-radiusSmall: 0.5rem;


    /* Transition */
    --transition-default: all 0.3s ease;

    /* Display */
    --display-flex: flex;
    --display-inlineFlex: inline-flex;
    --display-block: block;
    --display-grid: grid;

    /* Justify content */
    --justifyContent-spaceBetween: space-between;
    --justifyContent-center: center;

    /* background Blur */
    --backdropFilter-big: 2rem;
    --backdropFilter-medium: 1rem;
    --backdropFilter-small: 0.5rem;

    /* Cursor */

    --cursor-pointer: pointer;
    --cursor-none: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    transition: all 0.2s ease;
    scroll-behavior: smooth;
}

[id] {
    scroll-margin-top: 10rem
}

i {
    display: flex;
    line-height: 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
}

img {
    width: 100%;
    height: 100%;
}

a {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

/* ===== TIPOGRAFIA PROFISSIONAL - ESCALA OTIMIZADA ===== */

h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    /* ~28-40px */
    font-weight: 300;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    /* ~24-32px */
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    /* ~20-24px */
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

h4 {
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
    /* ~18-20px */
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

h5 {
    font-size: clamp(1rem, 1vw, 1.125rem);
    /* ~16-18px */
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    margin-bottom: 0.75rem;
}

h6 {
    font-size: 1rem;
    /* 16px */
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Texto do corpo otimizado */
p {
    font-size: clamp(1rem, 1vw, 1.125rem);
    /* ~16-18px */
    color: rgba(var(--color-almostBlack), 1);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

/* Texto pequeno para legendas e metadados */
small,
.caption,
.metadata {
    font-size: clamp(0.875rem, 1vw, 0.875rem);
    /* ~14px */
    color: rgba(var(--color-darkestGray), 1);
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

/* Lead text - texto de destaque */
.lead {
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
    /* ~18-20px */
    font-weight: 300;
    line-height: 1.5;
    color: rgba(var(--color-darkestGray), 1);
    margin-bottom: 1.5rem;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgba(var(--color-almostWhite), 1);
    font-family: 'Titillium Web', sans-serif;
    line-height: 1.2;
    overflow-x: hidden;
}

.paddingSmall {
    padding: var(--spacing-small);
}

.paddingMedium {
    padding: var(--spacing-medium);
}

.paddingBig {
    padding: var(--spacing-big);
}

.paddingBottomDouble {
    padding-bottom: var(--spacing-double);
}

.marginLeftDouble {
    margin-left: var(--spacing-double);
}

.marginLeftMedium {
    margin-left: var(--spacing-medium);
}

.marginTopBig {
    margin-top: var(--spacing-big);
}

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

.marginTopMedium {
    margin-top: var(--spacing-medium);
}

.marginBottomBigger {
    margin-bottom: var(--spacing-bigger);
}

.topSuperSpacing {
    padding-top: var(--spacing-superSpacing);
}


/* Classes de alinhamento */

.displayFlex {
    display: var(--display-flex);
    justify-content: var(--justifyContent-spaceBetween);
}

/* ARRUMAR OS DE BAIXO //
// Não deve sobrar nada */

.gap3rem {
    gap: 3rem;
}

.titleBig {
    font-size: 3rem;
    font-weight: 300;
}

.paddingLeft5rem {
    padding-left: 5rem;
}

.backgroundLaranBlue {
    background-color: rgba(var(--color-laranBlue), 1);
}

.paddingRight5rem {
    padding-right: 5rem;
}

.paddingTop-10rem {
    padding-top: 10rem;
}

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

.imgWidth-10 {
    width: 10%;
}

.font-size-08rem {
    font-size: 0.8rem;
}