/* ==========================================================================
   Leticia Garcia · site
   Índice: 1. Tokens  2. Base  3. Textura  4. Utilitários e botões  5. Topo e menu
           6. Início  7. Losango dos eixos  8. Buquê  9. Seções  10. Serviços (cartões)
           11. Sobre  12. Letreiro  13. Clientes  14. Contato  15. Rodapé
           16. Página de erro  17. Entradas e movimento  18. Responsivo
           19. Movimento reduzido
   A identidade vem da capa do LinkedIn: girassol em tom âmbar + espiral áurea.
   ========================================================================== */

/* 1. TOKENS ------------------------------------------------------------- */
:root {
    --noite: #170E06;
    --terra: #24150A;
    --ambar: #F2A71B;
    --ouro: #FFC94A;
    --brasa: #C96A0C;
    --ferrugem: #8A4208;
    --creme: #FFF4DC;
    --papel: #FAF5EA;
    --papel-2: #F2EADA;
    --linha: #DCCFB6;
    --tinta: #24160B;
    --tinta-2: #5E4C3B;

    --creme-78: rgba(255, 244, 220, .78);
    --creme-50: rgba(255, 244, 220, .5);
    --creme-20: rgba(255, 244, 220, .2);
    --creme-12: rgba(255, 244, 220, .12);

    --fonte-titulo: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
    --fonte-texto: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --raio: 14px;
    --raio-g: 26px;
    --eixos: clamp(300px, 90vw, 480px);
    --nav-h: 68px;
    --margem: clamp(20px, 5vw, 64px);
    --largura: 1200px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    /* desacelera forte no fim: usada nas entradas */
    --saida: cubic-bezier(.16, 1, .3, 1);
}

/* 2. BASE --------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
    scrollbar-color: #6B3A10 var(--noite);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html.is-travado {
    overflow: hidden;
}

body {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* a ligadura "fi" da Jost engole o pingo do i e a palavra parece escrita errada */
    font-variant-ligatures: no-common-ligatures;
}

h1,
h2,
h3,
p,
ul,
figure {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
}

svg,
img,
canvas {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
}

p {
    text-wrap: pretty;
}

h1,
h2 {
    font-family: var(--fonte-titulo);
    font-weight: 300;
    text-wrap: balance;
}

h2 {
    font-size: clamp(2.25rem, 4.6vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -.018em;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--ambar);
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: var(--ambar);
    color: var(--noite);
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--noite);
}

::-webkit-scrollbar-thumb {
    border: 3px solid var(--noite);
    border-radius: 8px;
    background: #6B3A10;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ferrugem);
}

/* 3. TEXTURA ------------------------------------------------------------ */

/* Grão fino por cima de tudo, como papel: ruído gerado em SVG, sem imagem externa */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

/* em telas grandes o grão mistura com o que está por baixo, sem lavar o escuro */
@media (hover: hover) and (min-width: 961px) {
    body::after {
        opacity: .32;
        mix-blend-mode: soft-light;
    }
}

/* Trama: as espirais cruzadas de um miolo de girassol (assets/img/trama.svg), usadas
   como máscara para a cor vir daqui. Fica atrás do conteúdo e gira bem devagar. */
.trama {
    position: absolute;
    z-index: -1;
    aspect-ratio: 1;
    pointer-events: none;
    color: var(--creme);
    opacity: .08;
}

.trama::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: url("../img/trama.svg") center / contain no-repeat;
    mask: url("../img/trama.svg") center / contain no-repeat;
}

.trama--servicos {
    top: -170px;
    right: -250px;
    width: min(880px, 130vw);
    color: var(--ferrugem);
    opacity: .11;
}

.trama--sobre {
    bottom: -320px;
    left: -270px;
    width: min(860px, 130vw);
    color: var(--ferrugem);
    opacity: .1;
}

/* 4. UTILITÁRIOS E BOTÕES ----------------------------------------------- */
.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.pular {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--raio);
    background: var(--ambar);
    color: var(--noite);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-160%);
}

.pular:focus {
    transform: none;
}

.rotulo {
    font-family: var(--fonte-titulo);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .2em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ferrugem);
}

.rotulo--claro {
    color: var(--ambar);
}

.rotulo+h2 {
    margin-top: 18px;
}

/* Palavras dos títulos: cada uma sobe de trás de uma máscara (o JS separa as palavras) */
.pal {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .14em .06em .22em;
    margin: -.14em -.06em -.22em;
}

.pal__in {
    display: inline-block;
}

.botao {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 30px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--raio);
    font-family: var(--fonte-titulo);
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: translate .5s var(--saida), scale .2s, color .35s, border-color .35s, box-shadow .45s;
}

.botao:active {
    scale: .97;
}

.botao svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate .45s var(--saida);
}

.botao:hover svg {
    translate: 2px -2px;
}

/* cheio: um reflexo atravessa o botão no hover */
.botao--cheio {
    background: linear-gradient(140deg, var(--ouro) 0%, var(--ambar) 55%, #E8930F 100%);
    color: var(--noite);
    box-shadow: 0 12px 30px -14px rgba(242, 167, 27, .6);
}

.botao--cheio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 70%);
    translate: -120% 0;
    transition: translate .9s var(--saida);
}

.botao--cheio:hover {
    box-shadow: 0 18px 38px -14px rgba(242, 167, 27, .78);
}

.botao--cheio:hover::before {
    translate: 120% 0;
}

/* linha: o preenchimento sobe de baixo no hover */
.botao--linha {
    border-color: var(--creme-50);
    color: var(--creme);
}

.botao--linha::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--creme);
    scale: 1 0;
    transform-origin: 50% 100%;
    transition: scale .5s var(--saida);
}

.botao--linha:hover {
    border-color: var(--creme);
    color: var(--noite);
}

.botao--linha:hover::before {
    scale: 1 1;
}

/* 5. TOPO E MENU -------------------------------------------------------- */
.topo {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    height: var(--nav-h);
    color: var(--creme);
    border-bottom: 1px solid transparent;
    transition: translate .55s var(--ease), background-color .35s, border-color .35s;
}

.topo.is-rolado {
    background: rgba(23, 14, 6, .9);
    border-bottom-color: var(--creme-12);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .topo.is-rolado {
        background: rgba(23, 14, 6, .84);
        -webkit-backdrop-filter: blur(14px) saturate(1.25);
        backdrop-filter: blur(14px) saturate(1.25);
    }
}

.topo.is-menu {
    background: var(--noite);
    border-bottom-color: var(--creme-12);
}

/* some ao rolar para baixo e volta ao rolar para cima */
.topo.is-oculto {
    translate: 0 -102%;
}

.topo__dentro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: calc(var(--largura) + 2 * var(--margem));
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--margem);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* o girassol da marca gira conforme a página rola (o JS define a rotação) */
.marca__icone {
    flex: none;
    width: 32px;
    height: 32px;
}

.marca__nome {
    font-family: var(--fonte-titulo);
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    white-space: nowrap;
}

.topo__botao {
    display: none;
}

.menu {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.6vw, 36px);
}

.menu a {
    position: relative;
    padding: 8px 0;
    font-family: var(--fonte-titulo);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--creme-78);
    transition: color .25s, background-color .25s;
}

.menu a:hover,
.menu a[aria-current="true"] {
    color: var(--ambar);
}

.menu .menu__contato {
    padding: 9px 18px;
    border: 1px solid var(--ambar);
    border-radius: 12px;
    color: var(--ambar);
}

.menu .menu__contato:hover {
    background: var(--ambar);
    color: var(--noite);
}

/* 6. INÍCIO ------------------------------------------------------------- */
.heroi {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: var(--nav-h);
    padding-bottom: calc(var(--eixos) / 2 + 16px);
    color: var(--creme);
    background:
        radial-gradient(60% 55% at 4% 100%, rgba(242, 167, 27, .11) 0%, rgba(242, 167, 27, 0) 70%),
        radial-gradient(70% 70% at 78% 40%, rgba(201, 106, 12, .16) 0%, rgba(201, 106, 12, 0) 62%),
        linear-gradient(180deg, #1E1308 0%, var(--noite) 100%);
}

/* A luz: os girassóis viram na direção dela. O JS move por --sol-x / --sol-y;
   sem JS (ou com movimento reduzido) ela fica parada perto do buquê. */
.heroi__sol {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 214, 120, .26) 0%, rgba(242, 167, 27, .12) 40%, rgba(201, 106, 12, 0) 72%);
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate3d(var(--sol-x, 74vw), var(--sol-y, 320px), 0);
}

/* pólen flutuando: pontos desenhados em canvas, mais vivos perto da luz */
.heroi__polen {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.heroi__grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 76px);
    max-width: calc(var(--largura) + 2 * var(--margem));
    min-height: min(calc(100svh - var(--nav-h) - 120px), 740px);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) var(--margem) clamp(36px, 5vw, 56px);
}

.heroi__texto {
    position: relative;
    z-index: 4;
}

.heroi h1 {
    margin-top: 22px;
    font-size: clamp(2.7rem, 5.8vw, 5.2rem);
    line-height: 1.01;
    letter-spacing: -.026em;
}

.heroi h1 span:not(.pal):not(.pal__in) {
    font-weight: 400;
    color: var(--ambar);
}

.heroi__lead {
    max-width: 34em;
    margin-top: 26px;
    font-size: clamp(1.05rem, 1.35vw, 1.2rem);
    color: var(--creme-78);
}

.heroi__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.heroi__arte {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: 100%;
    max-width: 500px;
}

.heroi__arte .trama {
    top: 50%;
    left: 50%;
    width: 240%;
    translate: -50% -50%;
}

/* 7. LOSANGO DOS EIXOS -------------------------------------------------- */

/* um quadrado girado 45°, metade no início e metade nos serviços */
.eixos {
    position: relative;
    z-index: 2;
    height: 0;
}

.eixos__bloco {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--eixos);
    height: var(--eixos);
    color: var(--creme);
    font-family: var(--fonte-titulo);
    filter: drop-shadow(0 26px 30px rgba(23, 14, 6, .3));
    transform: translate(-50%, -50%);
}

.eixos__dentro {
    position: absolute;
    inset: 0;
}

/* o quadrado tem lado = diagonal / raiz de 2, por isso o recuo de 14,65%.
   A malha fina por dentro vira um xadrez de losangos por causa do giro. */
.eixos__forma {
    position: absolute;
    inset: 14.65%;
    border: 1.5px solid var(--ambar);
    border-radius: 14%;
    background:
        repeating-linear-gradient(0deg, rgba(255, 244, 220, .045) 0 1px, rgba(255, 244, 220, 0) 1px 24px),
        repeating-linear-gradient(90deg, rgba(255, 244, 220, .045) 0 1px, rgba(255, 244, 220, 0) 1px 24px),
        radial-gradient(70% 70% at 30% 30%, rgba(242, 167, 27, .16) 0%, rgba(242, 167, 27, 0) 70%),
        linear-gradient(135deg, #3E2712 0%, #1D1107 100%);
    transform: rotate(45deg);
}

.eixos__centro,
.eixos__item {
    position: absolute;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

.eixos__centro {
    top: 50%;
    left: 50%;
    flex-direction: column;
    gap: 6px;
    width: 32%;
    font-size: clamp(.96rem, calc(var(--eixos) * .047), 1.42rem);
    text-align: center;
    transform: translate(-50%, -50%);
}

.eixos__centro span {
    font-size: clamp(.64rem, calc(var(--eixos) * .025), .78rem);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ambar);
}

.eixos__item {
    gap: 8px;
    max-width: 30%;
    font-size: clamp(.76rem, calc(var(--eixos) * .036), 1.08rem);
}

.eixos__item::before {
    content: "";
    flex: none;
    width: clamp(6px, calc(var(--eixos) * .016), 8px);
    height: clamp(6px, calc(var(--eixos) * .016), 8px);
    border-radius: 50%;
    background: var(--ambar);
}

.eixos__item--topo,
.eixos__item--base {
    left: 50%;
    max-width: 21%;
    text-align: center;
    transform: translateX(-50%);
}

.eixos__item--topo {
    top: 12%;
    flex-direction: column;
}

.eixos__item--base {
    bottom: 12%;
    flex-direction: column-reverse;
}

.eixos__item--esquerda,
.eixos__item--direita {
    top: 50%;
    transform: translateY(-50%);
}

.eixos__item--esquerda {
    left: 8%;
}

.eixos__item--direita {
    right: 8%;
    flex-direction: row-reverse;
    text-align: right;
}

/* 8. BUQUÊ -------------------------------------------------------------- */
.buque {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
}

.aureo__linhas {
    fill: none;
    stroke: rgba(255, 244, 220, .26);
    stroke-width: 1;
}

.aureo__espiral {
    fill: none;
    stroke: rgba(255, 244, 220, .7);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* 9. SEÇÕES ------------------------------------------------------------- */
.secao {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(72px, 10vw, 136px) var(--margem);
    background:
        radial-gradient(46% 38% at 100% 0%, rgba(242, 167, 27, .09) 0%, rgba(242, 167, 27, 0) 70%),
        var(--papel);
}

@supports (overflow: clip) {
    .secao {
        overflow: clip;
    }
}

.secao--fundo {
    background:
        radial-gradient(50% 46% at 0% 100%, rgba(201, 106, 12, .1) 0%, rgba(201, 106, 12, 0) 70%),
        var(--papel-2);
}

.secao--apos-eixos {
    padding-top: calc(var(--eixos) / 2 + clamp(44px, 6vw, 80px));
}

.secao--curta {
    padding-block: clamp(64px, 8vw, 104px);
}

.secao__dentro {
    max-width: var(--largura);
    margin: 0 auto;
}

/* 10. SERVIÇOS (CARTÕES) ------------------------------------------------ */
.servicos__cab {
    max-width: 760px;
}

.servicos__nota {
    max-width: 38em;
    margin-top: 18px;
    color: var(--tinta-2);
}

.cartas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin-top: clamp(36px, 5vw, 60px);
}

.carta {
    cursor: pointer;
    transition: translate .55s var(--saida);
}

/* sem JS as duas faces aparecem uma abaixo da outra */
.carta__dentro {
    display: grid;
    gap: 12px;
    height: 100%;
}

.carta__face {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.4vw, 34px);
    overflow: hidden;
    border-radius: var(--raio-g);
    box-shadow: 0 1px 2px rgba(36, 22, 11, .05), 0 24px 40px -28px rgba(36, 22, 11, .5);
    transition: box-shadow .5s var(--ease);
}

/* brilho que acompanha o ponteiro: --lx e --ly vêm do JS */
.carta__face::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(360px circle at var(--lx, 50%) var(--ly, 50%), rgba(255, 201, 74, .26), rgba(255, 201, 74, 0) 62%);
    transition: opacity .45s;
}

.carta__frente {
    border: 1px solid var(--linha);
    background: #FFFDF8;
}

/* no verso o eixo horizontal está espelhado, então o brilho usa --lxv */
.carta__verso::after {
    background: radial-gradient(360px circle at var(--lxv, 50%) var(--ly, 50%), rgba(255, 201, 74, .2), rgba(255, 201, 74, 0) 62%);
}

/* verso: marrom com uma malha fina de losangos */
.carta__verso {
    color: var(--creme);
    background:
        repeating-linear-gradient(45deg, rgba(255, 244, 220, .04) 0 1px, rgba(255, 244, 220, 0) 1px 20px),
        repeating-linear-gradient(-45deg, rgba(255, 244, 220, .04) 0 1px, rgba(255, 244, 220, 0) 1px 20px),
        linear-gradient(160deg, #3A2410 0%, var(--terra) 62%);
}

.carta__rotulo {
    font-family: var(--fonte-titulo);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--ambar);
}

.carta__icone {
    display: grid;
    flex: none;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(150deg, #7C4B1C 0%, #38200A 100%);
    box-shadow: 0 0 0 0 rgba(124, 75, 28, .14);
    color: #FFFDF8;
    transition: box-shadow .6s var(--saida);
}

.carta__icone svg {
    width: 46px;
    height: 46px;
}

.carta__titulo {
    margin-top: auto;
    padding-top: 40px;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.5rem, 2.3vw, 1.95rem);
    font-weight: 400;
    line-height: 1.1;
}

.carta__resumo {
    margin-top: 10px;
    color: var(--tinta-2);
}

.carta__botao {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    min-height: 44px;
    margin-top: 16px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: var(--fonte-titulo);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ferrugem);
}

.carta__botao svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: rotate .7s var(--saida);
}

.carta__verso .carta__botao {
    margin-top: auto;
    padding-top: 14px;
    color: var(--ambar);
}

.carta__lista {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.carta__lista li {
    position: relative;
    padding-left: 22px;
}

.carta__lista li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ambar);
}

.carta__lista li:nth-child(2) {
    --n: 1;
}

.carta__lista li:nth-child(3) {
    --n: 2;
}

.carta__lista li:nth-child(4) {
    --n: 3;
}

/* com JS as duas faces ocupam o mesmo lugar; o cartão inclina com o ponteiro e vira em 3D */
.js .carta {
    perspective: 1400px;
}

.js .carta__dentro {
    gap: 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--vira, 0deg)));
    transition: transform .8s var(--saida);
}

.js .carta.is-inclinando .carta__dentro {
    transition: transform .16s linear;
}

/* a virada passa um pouco do ponto e volta, como um cartão de verdade */
.js .carta.is-virando .carta__dentro {
    transition: transform 1s cubic-bezier(.3, 1.3, .4, 1);
}

.js .carta.is-virada {
    --vira: 180deg;
}

.js .carta__face {
    grid-area: 1 / 1;
    min-height: clamp(330px, 29vw, 390px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.js .carta__verso {
    transform: rotateY(180deg);
}

@media (hover: hover) {
    .carta:hover {
        translate: 0 -6px;
    }

    .carta:hover .carta__face {
        box-shadow: 0 1px 2px rgba(36, 22, 11, .05), 0 38px 54px -28px rgba(36, 22, 11, .6);
    }

    .carta:hover .carta__face::after {
        opacity: 1;
    }

    .carta:hover .carta__icone {
        box-shadow: 0 0 0 10px rgba(124, 75, 28, .12);
    }

    .carta:hover .carta__botao svg {
        rotate: 180deg;
    }
}

/* Selo que acompanha o ponteiro sobre os cartões, dizendo o que o clique faz */
.selo-virar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 16px 0 0 16px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--ouro) 0%, var(--ambar) 100%);
    box-shadow: 0 14px 26px -12px rgba(23, 14, 6, .55);
    color: var(--noite);
    font-family: var(--fonte-titulo);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    pointer-events: none;
    scale: 0;
    transition: scale .4s var(--saida);
}

.selo-virar.is-ativo {
    scale: 1;
}

/* 11. SOBRE ------------------------------------------------------------- */
.sobre {
    display: grid;
    grid-template-columns: minmax(0, .382fr) minmax(0, .618fr);
    align-items: center;
    gap: clamp(36px, 6vw, 96px);
}

.sobre__quadro {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 360px;
}

/* painel âmbar inclinado por trás da foto, da mesma cor do painel do buquê */
.sobre__quadro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--raio-g);
    background: linear-gradient(160deg, #D08A1A 0%, #9F560A 100%);
    rotate: -7deg;
    scale: 1.02;
}

.sobre__quadro img {
    width: 100%;
    height: auto;
    border-radius: var(--raio-g);
    box-shadow: 0 34px 50px -34px rgba(36, 22, 11, .6);
}

.sobre__lead {
    max-width: 24em;
    margin-top: 20px;
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    line-height: 1.4;
}

.sobre__bloco {
    margin-top: 36px;
}

.sobre__trajeto {
    margin-top: 14px;
    border-top: 1px solid var(--linha);
}

/* uma linha por empresa: nome à esquerda, área à direita */
.sobre__trajeto li {
    position: relative;
    display: grid;
    grid-template-columns: 9em minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--linha);
    transition: padding-left .5s var(--saida);
}

.sobre__trajeto li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--ambar);
    scale: 0;
    transition: scale .4s var(--saida);
}

.sobre__trajeto li:nth-child(2) {
    --n: 1;
}

.sobre__trajeto li:nth-child(3) {
    --n: 2;
}

.sobre__trajeto li:nth-child(4) {
    --n: 3;
}

.sobre__trajeto li:nth-child(5) {
    --n: 4;
}

.sobre__trajeto strong {
    font-family: var(--fonte-titulo);
    font-size: 1.12rem;
    font-weight: 500;
    transition: color .3s;
}

.sobre__trajeto span {
    color: var(--tinta-2);
}

@media (hover: hover) {
    .sobre__trajeto li:hover {
        padding-left: 20px;
    }

    .sobre__trajeto li:hover::before {
        scale: 1;
    }

    .sobre__trajeto li:hover strong {
        color: var(--ferrugem);
    }
}

/* 12. LETREIRO ---------------------------------------------------------- */

/* palavras grandes que correm de lado; o JS acelera e inverte conforme a rolagem */
.letreiro {
    position: relative;
    overflow: hidden;
    padding-block: clamp(34px, 5.5vw, 80px);
    background: var(--papel);
}

.letreiro__trilho {
    display: flex;
    width: max-content;
    will-change: transform;
}

.letreiro__grupo {
    display: flex;
    flex: none;
    align-items: center;
    gap: .32em;
    padding-right: .32em;
    font-family: var(--fonte-titulo);
    font-size: clamp(3.1rem, 9.4vw, 8.4rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.028em;
    white-space: nowrap;
    color: var(--tinta);
}

.letreiro__grupo img {
    flex: none;
    width: .4em;
    height: .4em;
    rotate: var(--giro, 0deg);
}

/* vazado: o contorno é pintado primeiro e o preenchimento, da cor do fundo, cobre os riscos
   internos que a fonte deixa onde os traços das letras se sobrepõem */
.letreiro__vazado {
    color: var(--papel);
    -webkit-text-stroke: 2.4px var(--ferrugem);
    paint-order: stroke fill;
}

/* 13. CLIENTES (seção desativada no HTML enquanto não houver logos) ------- */
.clientes__cab {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.faixa {
    margin: clamp(32px, 5vw, 56px) calc(var(--margem) * -1) 0;
    overflow: hidden;
}

/* sem JS (ou com movimento reduzido) os itens quebram linha e ficam parados */
.faixa__trilho {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 0;
}

.faixa__item {
    flex: none;
    padding: 0 clamp(8px, 1.2vw, 16px);
}

.faixa__item span {
    display: grid;
    place-items: center;
    width: clamp(150px, 18vw, 200px);
    height: 88px;
    border: 1px dashed #C4B292;
    border-radius: 18px;
    font-family: var(--fonte-titulo);
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #7A674F;
}

.faixa__item img {
    width: auto;
    max-width: 180px;
    height: 56px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .7;
    transition: filter .3s, opacity .3s;
}

.faixa__item img:hover {
    filter: none;
    opacity: 1;
}

.faixa.is-rolando {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.faixa.is-rolando .faixa__trilho {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: rolar var(--dur, 40s) linear infinite;
}

.faixa.is-rolando:hover .faixa__trilho {
    animation-play-state: paused;
}

@keyframes rolar {
    to {
        transform: translateX(-50%);
    }
}

/* 14. CONTATO ----------------------------------------------------------- */
.contato {
    --flor: clamp(400px, 52vw, 740px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--creme);
    background:
        radial-gradient(60% 90% at 86% 55%, rgba(201, 106, 12, .4) 0%, rgba(201, 106, 12, 0) 66%),
        #1C1107;
}

/* o girassol passa por cima das seções vizinhas: corta só na lateral */
@supports (overflow: clip) {
    .contato {
        overflow: visible;
        overflow-x: clip;
    }
}

/* a trama fica presa à seção (não vaza como a flor) e centrada na flor */
.contato__fundo {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.contato__fundo-dentro {
    position: relative;
    max-width: calc(var(--largura) + 2 * var(--margem));
    height: 100%;
    margin: 0 auto;
}

.trama--contato {
    top: 45%;
    right: calc(var(--flor) / 2 - 7vw);
    width: calc(var(--flor) * 2.15);
    opacity: .12;
    translate: 50% -50%;
}

.contato__dentro {
    position: relative;
    max-width: calc(var(--largura) + 2 * var(--margem));
    margin: 0 auto;
    padding: clamp(84px, 11vw, 152px) var(--margem);
}

.contato__texto {
    position: relative;
    z-index: 1;
    max-width: 560px;
}

.contato h2 {
    font-size: clamp(2.5rem, 5.6vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -.022em;
}

.contato__texto>p:not(.rotulo) {
    max-width: 30em;
    margin-top: 22px;
    font-size: 1.15rem;
    color: var(--creme-78);
}

.contato__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.contato__arte {
    position: absolute;
    z-index: 0;
    top: 45%;
    right: -7vw;
    width: var(--flor);
    height: auto;
    overflow: visible;
    pointer-events: none;
    transform: translateY(-50%);
}

/* 15. RODAPÉ ------------------------------------------------------------ */
.rodape {
    background: var(--noite);
    color: var(--creme-78);
}

.rodape__dentro {
    position: relative;
    z-index: 1;
    max-width: calc(var(--largura) + 2 * var(--margem));
    margin: 0 auto;
    padding: clamp(60px, 7vw, 96px) var(--margem) 28px;
}

.rodape__linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 20px clamp(24px, 4vw, 56px);
}

.rodape__desc {
    max-width: 21em;
    font-size: 1.04rem;
    line-height: 1.5;
}

.rodape__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.rodape__nav a {
    padding: 6px 0;
    font-family: var(--fonte-titulo);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .25s;
}

.rodape__nav a:hover {
    color: var(--ambar);
}

.rodape__topo {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--creme-20);
    border-radius: 50%;
    color: var(--creme);
    transition: translate .5s var(--saida), background-color .35s, border-color .35s, color .35s;
}

.rodape__topo svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: translate .45s var(--saida);
}

.rodape__topo:hover {
    border-color: var(--ambar);
    background: var(--ambar);
    color: var(--noite);
}

.rodape__topo:hover svg {
    translate: 0 -3px;
}

/* o nome em letras enormes, só contorno; cada letra acende ao passar o ponteiro */
.rodape__nome {
    margin-top: clamp(40px, 6vw, 84px);
    padding-block: .05em;
    overflow: hidden;
    font-family: var(--fonte-titulo);
    /* tamanho aproximado; o JS ajusta para o nome ocupar a largura exata */
    font-size: min(17.4vw, 14.9rem);
    font-weight: 300;
    line-height: .92;
    letter-spacing: -.04em;
    white-space: nowrap;
    color: var(--noite);
    -webkit-text-stroke: 2px rgba(255, 244, 220, .55);
    paint-order: stroke fill;
    user-select: none;
}

.rodape__nome-dentro {
    display: inline-block;
    padding-inline: 2px;
}

.rodape__nome .letra {
    display: inline-block;
    transition: color .7s, -webkit-text-stroke-color .7s;
}

@media (hover: hover) {
    .rodape__nome .letra:hover {
        color: var(--ambar);
        -webkit-text-stroke-color: var(--ambar);
        transition-duration: .08s;
    }
}

.rodape__legal {
    margin-top: clamp(20px, 3vw, 36px);
    padding-top: 22px;
    border-top: 1px solid var(--creme-12);
    font-size: .88rem;
    color: var(--creme-50);
}

/* 16. PÁGINA DE ERRO (404.html) ----------------------------------------- */
.erro {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 48px var(--margem);
    overflow: hidden;
    color: var(--creme);
    text-align: center;
    background:
        radial-gradient(60% 60% at 50% 40%, rgba(201, 106, 12, .3) 0%, rgba(201, 106, 12, 0) 70%),
        linear-gradient(180deg, #1E1308 0%, var(--noite) 100%);
}

.erro .trama {
    top: 50%;
    left: 50%;
    width: min(1100px, 190vw);
    translate: -50% -50%;
}

.erro__flor {
    width: clamp(120px, 22vw, 180px);
    height: auto;
    margin: 0 auto 28px;
}

.erro h1 {
    margin-top: 16px;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -.02em;
}

.erro p:not(.rotulo) {
    max-width: 26em;
    margin: 18px auto 34px;
    font-size: 1.12rem;
    color: var(--creme-78);
}

/* 17. ENTRADAS E MOVIMENTO ---------------------------------------------- */
@keyframes tracar {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes aparecer {
    from {
        opacity: 0;
    }
}

@keyframes surgir {
    from {
        opacity: 0;
        transform: scale(.25);
    }
}

@keyframes crescer {
    from {
        transform: scale(0);
    }
}

@keyframes balanco {
    from {
        transform: rotate(-2deg);
    }

    to {
        transform: rotate(2deg);
    }
}

@keyframes subir {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
}

@keyframes subir-letra {
    from {
        translate: 0 108%;
    }
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulsar {
    0% {
        box-shadow: 0 0 0 0 rgba(242, 167, 27, .55);
    }

    70%,
    100% {
        box-shadow: 0 0 0 9px rgba(242, 167, 27, 0);
    }
}

/* o cartão dá uma espiada para o lado, mostrando que vira */
@keyframes espiar {

    0%,
    100% {
        transform: rotateY(0deg);
    }

    45% {
        transform: rotateY(-17deg);
    }
}

@media (prefers-reduced-motion: no-preference) {

    .trama::before {
        animation: girar 360s linear infinite;
    }

    .trama--contato::before,
    .trama--sobre::before {
        animation-direction: reverse;
    }

    /* --- início: o texto entra quando as fontes estão prontas (classe is-pronto) --- */
    .js:not(.is-pronto) .heroi__texto>:not(h1) {
        opacity: 0;
    }

    .js.is-pronto .heroi__texto>:not(h1) {
        animation: subir 1.1s var(--saida) backwards;
    }

    .js.is-pronto .heroi__texto>.heroi__lead {
        animation-delay: .45s;
    }

    .js.is-pronto .heroi__texto>.heroi__acoes {
        animation-delay: .6s;
    }

    /* --- títulos: palavra por palavra --- */
    .js [data-palavras] .pal__in {
        transform: translateY(120%) rotate(5deg);
        transform-origin: 0 100%;
        transition: transform 1.15s var(--saida);
        transition-delay: calc(var(--i, 0) * 70ms + var(--atraso, 0ms));
    }

    .js.is-pronto .heroi [data-palavras] .pal__in,
    .js .is-visivel [data-palavras] .pal__in,
    .js .is-visivel[data-palavras] .pal__in {
        transform: none;
    }

    .js .heroi [data-palavras] {
        --atraso: 120ms;
    }

    /* --- o buquê cresce: painel, espiral, caules de baixo para cima, folhas e por fim as flores --- */
    .js .buque__painel {
        animation: aparecer 1s both;
    }

    .js .buque .aureo__linhas {
        animation: aparecer 1.4s .3s both;
    }

    .js .buque .aureo__espiral {
        stroke-dasharray: 1560 3200;
        stroke-dashoffset: -1800;
        animation: tracar 2.2s .2s var(--ease) forwards;
    }

    .js .buque__caule {
        stroke-dasharray: 1 2;
        stroke-dashoffset: -1.5;
        animation: tracar 1.1s var(--d, 0s) var(--ease) forwards;
    }

    .js .buque__folha {
        animation: crescer .8s var(--d, 0s) var(--ease) both;
    }

    .js .buque__surge {
        animation: surgir 1s var(--d, 0s) var(--ease) both;
    }

    .buque__balanco {
        animation: balanco var(--t, 6s) ease-in-out infinite alternate;
    }

    .js .heroi__arte .trama {
        animation: aparecer 2.4s .4s both;
    }

    /* --- losango: os pontos das quinas pulsam em sequência, no sentido horário --- */
    .eixos__item::before {
        animation: pulsar 3.6s ease-out infinite;
    }

    .eixos__item--direita::before {
        animation-delay: .9s;
    }

    .eixos__item--base::before {
        animation-delay: 1.8s;
    }

    .eixos__item--esquerda::before {
        animation-delay: 2.7s;
    }

    /* --- entrada ao rolar: o bloco inteiro... --- */
    .js [data-revela]:not([data-revela="filhos"]) {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity .9s var(--ease), transform 1.2s var(--saida);
    }

    .js [data-revela]:not([data-revela="filhos"]).is-visivel {
        opacity: 1;
        transform: none;
    }

    /* ...ou os filhos, um depois do outro (os títulos ficam por conta das palavras) */
    .js [data-revela="filhos"]:not(.is-visivel)>:not([data-palavras]) {
        opacity: 0;
    }

    .js [data-revela="filhos"].is-visivel>:not([data-palavras]) {
        animation: subir 1.1s var(--saida) backwards;
    }

    .js [data-revela="filhos"].is-visivel>:nth-child(2) {
        animation-delay: .1s;
    }

    .js [data-revela="filhos"].is-visivel>:nth-child(3) {
        animation-delay: .2s;
    }

    .js [data-revela="filhos"].is-visivel>:nth-child(4) {
        animation-delay: .3s;
    }

    .js [data-revela="filhos"] [data-palavras] {
        --atraso: 80ms;
    }

    /* o losango entra girando inteiro: o quadrado e as letras juntos */
    .js .eixos__dentro[data-revela] {
        transform: rotate(-45deg) scale(.82);
        transition: opacity .7s var(--ease), transform 1.3s var(--saida);
    }

    .js .eixos__dentro[data-revela].is-visivel {
        transform: none;
    }

    /* --- cartões: o ícone se desenha, depois cada cartão dá uma espiada --- */
    .js .carta__icone .tracado {
        stroke-dasharray: 1 1.5;
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1.3s var(--ease) .4s;
    }

    .js .cartas:not(.is-visivel) .carta__icone .tracado {
        stroke-dashoffset: 1.25;
    }

    .js .cartas.is-visivel .carta__dentro {
        animation: espiar 1.3s var(--ease) 1.1s 1;
    }

    .js .cartas.is-visivel .carta:nth-child(2) .carta__dentro {
        animation-delay: 1.25s;
    }

    .js .cartas.is-visivel .carta:nth-child(3) .carta__dentro {
        animation-delay: 1.4s;
    }

    /* no verso, os itens da lista entram em sequência a cada virada */
    .js .carta.is-virada .carta__lista li {
        animation: subir .7s var(--saida) backwards;
        animation-delay: calc(.3s + var(--n, 0) * 70ms);
    }

    /* --- sobre: a foto abre de baixo para cima e o painel de trás inclina --- */
    .js .sobre__quadro img {
        clip-path: inset(0 0 0 0 round var(--raio-g));
        transition: clip-path 1.3s var(--saida) .1s;
    }

    .js .sobre__quadro:not(.is-visivel) img {
        clip-path: inset(100% 0 0 0 round var(--raio-g));
    }

    .js .sobre__quadro::before {
        transition: rotate 1.5s var(--saida) .25s, scale 1.5s var(--saida) .25s;
    }

    .js .sobre__quadro:not(.is-visivel)::before {
        rotate: 0deg;
        scale: .9;
    }

    .js .sobre__texto:not(.is-visivel) .sobre__trajeto li {
        opacity: 0;
    }

    .js .sobre__texto.is-visivel .sobre__trajeto li {
        animation: subir .9s var(--saida) backwards;
        animation-delay: calc(.45s + var(--n, 0) * 80ms);
    }

    /* --- rodapé: as letras do nome sobem uma a uma --- */
    .js .rodape__nome:not(.is-visivel) .letra {
        translate: 0 108%;
    }

    .js .rodape__nome.is-visivel .letra {
        animation: subir-letra 1.1s var(--saida) backwards;
        animation-delay: calc(var(--i, 0) * 45ms);
    }

    /* sem JS a flor do contato gira por CSS; com JS a rotação acompanha a rolagem */
    html:not(.js) .contato__flor {
        animation: girar 260s linear infinite;
    }
}

/* 18. RESPONSIVO -------------------------------------------------------- */
@media (min-width: 961px) and (max-height: 800px) {
    .heroi__arte {
        max-width: 420px;
    }
}

@media (max-width: 960px) {
    .heroi__sol {
        --sol-x: 50vw;
        --sol-y: 640px;
        width: 620px;
        height: 620px;
        margin: -310px 0 0 -310px;
    }

    .heroi__grade {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 40px;
        padding-top: clamp(36px, 8vw, 64px);
    }

    .heroi__arte {
        max-width: 440px;
    }

    .aureo__linhas {
        stroke-width: 1.3;
    }

    .aureo__espiral {
        stroke-width: 2;
    }

    .cartas {
        grid-template-columns: minmax(0, 1fr);
    }

    .js .carta__face {
        min-height: 300px;
    }

    .carta__titulo {
        padding-top: 28px;
    }

    .sobre {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .sobre__quadro {
        max-width: 250px;
        margin-left: 14px;
    }
}

@media (max-width: 820px) {

    /* menu vira painel abaixo do topo */
    .js .topo__botao {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .topo__linhas {
        position: relative;
        width: 22px;
        height: 10px;
    }

    .topo__linhas::before,
    .topo__linhas::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .3s var(--ease), top .3s var(--ease);
    }

    .topo__linhas::before {
        top: 0;
    }

    .topo__linhas::after {
        top: 8.5px;
    }

    .is-menu .topo__linhas::before {
        top: 4px;
        transform: rotate(45deg);
    }

    .is-menu .topo__linhas::after {
        top: 4px;
        transform: rotate(-45deg);
    }

    .js .menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        height: calc(100dvh - var(--nav-h));
        padding: 20px var(--margem) 40px;
        overflow-y: auto;
        background: var(--noite);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
    }

    .js .is-menu .menu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .js .menu a {
        width: 100%;
        padding: 20px 0;
        border-bottom: 1px solid var(--creme-12);
        font-size: 1.02rem;
        color: var(--creme);
    }

    .js .menu .menu__contato {
        width: auto;
        margin-top: 28px;
        padding: 14px 24px;
        border: 1px solid var(--ambar);
        color: var(--ambar);
    }

    /* sem JS o menu continua em linha, só mais compacto */
    html:not(.js) .marca__nome {
        display: none;
    }

    html:not(.js) .menu {
        gap: 14px;
    }

    .contato__dentro {
        padding-bottom: calc(clamp(84px, 11vw, 152px) + 50vw);
    }

    .contato__arte {
        top: auto;
        right: -22vw;
        bottom: -14vw;
        width: 80vw;
        transform: none;
    }

    .trama--contato {
        top: auto;
        right: 18vw;
        bottom: 26vw;
        width: 175vw;
        translate: 50% 50%;
    }

    .rodape__linha {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rodape__desc {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .sobre__trajeto li {
        grid-template-columns: minmax(0, 1fr);
    }

    .heroi__acoes .botao,
    .contato__acoes .botao {
        flex: 1 1 100%;
    }

    .marca__nome {
        letter-spacing: .24em;
    }

    .rodape__nav {
        gap: 6px 18px;
    }

    .carta__icone {
        width: 68px;
        height: 68px;
    }

    .carta__icone svg {
        width: 38px;
        height: 38px;
    }

    .letreiro__vazado {
        -webkit-text-stroke-width: 1.8px;
    }

    .rodape__nome {
        -webkit-text-stroke-width: 1.4px;
    }
}

/* 19. MOVIMENTO REDUZIDO ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
    }

    .heroi__polen,
    .selo-virar {
        display: none;
    }
}