/* ==========================================================
   FONTES LOCAIS

   PERSONALIZAÇÃO:
   Os arquivos .woff2 deverão ser adicionados aos diretórios
   indicados antes da publicação.
   ========================================================== */
main,
header,
footer,
section,
.container {
    min-width: 0;
}

a,
p,
li {
    overflow-wrap: break-word;
}


h1,
h2,
h3,
h4 {
    overflow-wrap: normal;

    word-break: normal;

    hyphens: none;
}

@font-face {
    font-family: "Inter";
    src:
        url("../assets/fonts/inter/inter-regular.woff2") format("woff2");

    font-style: normal;
    font-weight: 400;
    font-display: swap;
}


@font-face {
    font-family: "Inter";
    src:
        url("../assets/fonts/inter/inter-medium.woff2") format("woff2");

    font-style: normal;
    font-weight: 500;
    font-display: swap;
}


@font-face {
    font-family: "Inter";
    src:
        url("../assets/fonts/inter/inter-semibold.woff2") format("woff2");

    font-style: normal;
    font-weight: 600;
    font-display: swap;
}


@font-face {
    font-family: "Cormorant Garamond";
    src:
        url("../assets/fonts/cormorant-garamond/cormorant-garamond-medium.woff2") format("woff2");

    font-style: normal;
    font-weight: 500;
    font-display: swap;
}


@font-face {
    font-family: "Cormorant Garamond";
    src:
        url("../assets/fonts/cormorant-garamond/cormorant-garamond-semibold.woff2") format("woff2");

    font-style: normal;
    font-weight: 600;
    font-display: swap;
}


/* ==========================================================
   DOCUMENTO
   ========================================================== */

html {
    background: var(--color-bg);
}


body {
    overflow-x: hidden;

    background: var(--color-bg);

    color: var(--color-text-primary);

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

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

    line-height: var(--line-height-body);

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================
   ÂNCORAS INTERNAS

   Compensa a altura do Header fixo ao navegar pela página.
   ========================================================== */

section[id] {
    scroll-margin-top: 96px;
}


/* ==========================================================
   SELEÇÃO
   ========================================================== */

::selection {
    background: var(--color-accent-soft);
    color: var(--color-text-primary);
}


/* ==========================================================
   HEADINGS
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);

    font-family: var(--font-display);
    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-heading);

    text-wrap: balance;
}


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


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


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


/* ==========================================================
   PARÁGRAFOS
   ========================================================== */

p {
    color: var(--color-text-secondary);

    text-wrap: pretty;
}


/* ==========================================================
   LINKS
   ========================================================== */

a {
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast);
}


/* ==========================================================
   FOCO
   ========================================================== */

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 4px;
}


/* ==========================================================
   CONTAINER
   ========================================================== */

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

    margin-inline: auto;
}


/* ==========================================================
   SEÇÕES
   ========================================================== */

.section {
    position: relative;

    padding-block:
        clamp(var(--space-10),
            10vw,
            var(--space-20));
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: var(--space-1);

    color: var(--color-accent);

    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.16em;

    line-height: 1.4;

    text-transform: uppercase;
}


/* ==========================================================
   ACCESSIBILITY — SKIP LINK
   ========================================================== */

.skip-link {
    position: fixed;

    top: var(--space-2);
    left: var(--space-2);

    z-index: var(--z-modal);

    padding:
        0.75rem 1rem;

    border-radius: var(--radius-sm);

    background: var(--color-surface-dark);

    color: var(--color-text-inverse);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    transform: translateY(-200%);

    transition:
        transform var(--transition-base);
}


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


/* ==========================================================
   CONTEÚDO SOMENTE PARA LEITORES DE TELA
   ========================================================== */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ==========================================================
   IMAGENS
   ========================================================== */

img {
    object-fit: cover;
}


/* ==========================================================
   REDUCED MOTION

   Acessibilidade para usuários que solicitaram redução
   de movimento no sistema operacional.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }
}

@supports (content-visibility: auto) {

    .advantages,
    .process,
    .pricing,
    .site-footer {
        content-visibility: auto;

        contain-intrinsic-size:
            auto 900px;
    }

}