/* ==========================================================================
   BASE GLOBAL — RESET, TIPOGRAFIA E CONTAINER
========================================================================== */


/* ==========================================================================
   01. BOX-SIZING
========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================================
   02. DOCUMENTO
========================================================================== */

html {
    scroll-behavior: smooth;
}


/* ==========================================================================
   03. BODY
========================================================================== */

body {
    margin: 0;

    color: var(--color-text);

    background: var(--color-white);

    font-family: var(--font-family-primary);

    font-size: var(--font-size-base);

    line-height: 1.65;
}


body.modal-open {
    overflow: hidden;
}


/* ==========================================================================
   04. ELEMENTOS DE MÍDIA
========================================================================== */

img,
svg,
video {
    display: block;

    max-width: 100%;
}


/* ==========================================================================
   05. LINKS
========================================================================== */

a {
    color: inherit;

    text-decoration: none;
}


/* ==========================================================================
   06. ELEMENTOS DE FORMULÁRIO
========================================================================== */

button,
input,
select,
textarea {
    font: inherit;
}


button {
    color: inherit;
}


/* ==========================================================================
   07. TÍTULOS GLOBAIS
========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;

    color: var(--color-blue);

    font-family: var(--font-family-heading);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.04em;
}


h1 {
    font-size: var(--font-size-h1);
}


h2 {
    font-size: var(--font-size-h2);
}


h3 {
    font-size: var(--font-size-h3);
}


h4 {
    font-size: var(--font-size-h4);
}


h5 {
    font-size: var(--font-size-h5);
}


h6 {
    font-size: var(--font-size-h6);
}


/* ==========================================================================
   08. PARÁGRAFOS E CITAÇÕES
========================================================================== */

p,
blockquote {
    margin-top: 0;
}


p {
    font-size: var(--font-size-base);

    line-height: 1.65;
}


p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   09. CONTAINER GLOBAL

   Mantém todas as seções alinhadas pelo mesmo eixo.
========================================================================== */

.container {
    width:
        min(
            calc(100% - (var(--gutter) * 2)),
            var(--container)
        );

    margin-inline: auto;
}


/* ==========================================================================
   10. ESPAÇAMENTO PADRÃO DAS SEÇÕES
========================================================================== */

.section {
    padding-block: var(--section);
}


/* ==========================================================================
   11. ACESSIBILIDADE
========================================================================== */

.skip-link {
    position: fixed;

    top: 1rem;
    left: 1rem;

    z-index: calc(var(--z-modal) + 1);

    padding:
        0.75rem
        1rem;

    color: var(--color-white);

    background: var(--color-blue);

    transform: translateY(-200%);
}


.skip-link:focus {
    transform: translateY(0);
}


:focus-visible {
    outline:
        3px
        solid
        var(--color-yellow);

    outline-offset: 3px;
}


/* ==========================================================================
   ESTADOS NATIVOS E ÂNCORAS

   Garante que elementos com o atributo hidden realmente desapareçam,
   mesmo quando outra regra define display. Isso é essencial para tabs
   e acordeões.
========================================================================== */

[hidden] {
    display: none !important;
}

section[id] {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}


/* ==========================================================================
   RESET DA NAVEGAÇÃO PRINCIPAL
========================================================================== */

#mainNav,
#mainNav ul {


    list-style: none;
}

#mainNav li {
  

    list-style: none;
}

#mainNav li::marker {
    content: "";
}

/* ==========================================================================
   TÍTULOS PRINCIPAIS — PADRÃO GLOBAL
========================================================================== */

/* ==========================================================================
   ESCALA TIPOGRÁFICA DO SITE

   O hero possui tipografia própria e não usa estas variáveis.
========================================================================== */

:root {
    /* Títulos principais das seções */
    --title-section-size:
        clamp(
            2.7rem,
            4vw,
            3.85rem
        );

    --title-section-weight: 800;
    --title-section-line-height: 0.98;
    --title-section-letter-spacing: -0.04em;


    /* Títulos internos de cards e destaques */
    --title-card-size:
        clamp(
            1.65rem,
            2.1vw,
            2.4rem
        );

    --title-card-weight: 700;
    --title-card-line-height: 1.04;
    --title-card-letter-spacing: -0.03em;
}