@charset "UTF-8";

/* =========================================
   1. FONTS
   ========================================= */
/* Display — Aktiv Grotesk (arquivos locais em /fonts/aktiv, convertidos p/ woff2).
   O site usa Regular (400) e Medium (500). */
@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('fonts/aktiv/AktivGrotesk-Regular.woff2') format('woff2'),
         url('fonts/aktiv/AktivGrotesk-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('fonts/aktiv/AktivGrotesk-Medium.woff2') format('woff2'),
         url('fonts/aktiv/AktivGrotesk-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Mono do site — Departure Mono (arquivos locais em /fonts).
   Só tem o peso Regular; 500 é sintetizado pelo navegador quando usado. */
@font-face {
    font-family: 'Departure Mono';
    src: url('fonts/DepartureMono-Regular.woff2') format('woff2'),
         url('fonts/DepartureMono-Regular.woff') format('woff');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. VARIABLES
   ========================================= */
:root {
    --bg: #ffffff;
    --text: #0a0a0a;
    --muted: #8c8c8c;
    --line: rgba(10, 10, 10, 0.14);
    --line-strong: rgba(10, 10, 10, 0.85);
    --surface: #f4f4f4;

    /* Aktiv Grotesk = voz principal (texto de leitura). Mono só como acento decorativo. */
    --font-display: 'Aktiv Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: 'Departure Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --font-main: var(--font-display);

    --page-padding: clamp(1.25rem, 5vw, 4rem);
    --grid-gap: clamp(1.5rem, 3vw, 3rem);

    --header-height: 76px;
}

/* =========================================
   3. RESET & BASE
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;

    /* Cada seção encaixa no topo ao rolar. "mandatory" para parar sempre
       certinho em cada seção, uma por rolada. Seções mais altas que a tela
       continuam roláveis por dentro (o navegador não re-encaixa enquanto
       você percorre uma seção maior que a viewport). */
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
}

/* alvos do snap */
#hero,
#work,
#about,
#footer,
.page-hero,
.raw-section,
.project-header,
.project-gallery {
    scroll-snap-align: start;
    /* sem descontar o header: as seções preenchem a tela inteira e o header
       é transparente por cima. Com scroll-margin-top a seção encaixava 76px
       mais para baixo e aparecia uma fatia da seção anterior. */
    scroll-margin-top: 0;
    /* garante que o snap pare em TODA seção, sem pular nenhuma num gesto forte */
    scroll-snap-stop: always;
}

/* seções que devem preencher a tela, com o conteúdo centrado na vertical */
#work,
#about,
.page-hero,
.raw-section,
.project-header {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* o rodapé nunca estica */
#footer {
    min-height: 0;
    /* o rodapé é mais baixo que a tela e fica no fim do documento; encaixar
       pelo FIM garante que dá para chegar nele (encaixar pelo topo deixaria
       o ponto de snap além do fim do scroll e prendia o usuário no #about). */
    scroll-snap-align: end;
}

/* Entrada da seção que chega — o conteúdo sobe e revela.
   Só com o controlador de slides ativo: sem JS nada some. */
body.slides-on .slide-section.is-entering > * {
    animation: slide-enter 0.62s cubic-bezier(0.2, 0, 0, 1) both;
}

body.slides-on .slide-section.is-entering > *:nth-child(2) { animation-delay: 0.07s; }
body.slides-on .slide-section.is-entering > *:nth-child(3) { animation-delay: 0.13s; }

@keyframes slide-enter {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* só telas realmente baixas (celular deitado): aí o conteúdo manda */
@media (max-height: 460px) {
    #work,
    #about,
    .page-hero,
    .raw-section,
    .project-header,
    #hero {
        min-height: 0;
    }

    html { scroll-snap-type: none; }
}

body {
    background-color: var(--bg);
    color: var(--text);
    /* AKTIV GROTESK É A VOZ PADRÃO DO SITE — a mono só aparece como acento decorativo */
    font-family: var(--font-display);
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Utilitários */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.block { display: block; }

.text-small {
    font-size: 0.75rem;
    line-height: 1.6;
}

.mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.display {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 1;
    font-weight: 400;
}

.muted { color: var(--muted); }

.normal-case { text-transform: none; }

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover { opacity: 0.5; }

ul { list-style: none; }

img {
    max-width: 100%;
    display: block;
    object-fit: cover;
}

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

/* =========================================
   3B. PELÍCULA — grão, poeira, vinheta e tremulação
   Quatro camadas fixas sobre o branco. Todas em
   multiply, todas pointer-events:none.
   ========================================= */

/* 1. GRÃO — textura de emulsão, redesenhada a cada quadro.
   Elemento do tamanho exato da viewport e animação em
   background-position (não em transform): assim o navegador
   não promove a camada para composição, que é o que produzia
   emenda de bloco em telas Retina. */
.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.26;
    mix-blend-mode: multiply;
    background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3CfeColorMatrix type="saturate" values="0"/%3E%3CfeComponentTransfer%3E%3CfeFuncA type="linear" slope="1.9" intercept="-0.30"/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');
    background-repeat: repeat;
    background-size: 140px 140px;
    animation: grain 0.5s steps(1) infinite;
}

/* deslocamentos em px inteiros: nada de subpixel, nada de emenda */
@keyframes grain {
    0%   { background-position:    0px    0px; }
    10%  { background-position:  -37px  -53px; }
    20%  { background-position:  -71px   29px; }
    30%  { background-position:   43px  -67px; }
    40%  { background-position:  -19px   77px; }
    50%  { background-position:  -83px  -31px; }
    60%  { background-position:   61px   47px; }
    70%  { background-position:  -47px   63px; }
    80%  { background-position:   29px  -41px; }
    90%  { background-position:  -59px   17px; }
    100% { background-position:    0px    0px; }
}

/* 2. SUJEIRA — pontinhos parados + riscos de película que passam */
.specks {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.7;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(10,10,10,0.55) 0.6px, transparent 0.7px),
        radial-gradient(circle at 71% 8%, rgba(10,10,10,0.45) 0.7px, transparent 0.8px),
        radial-gradient(circle at 38% 64%, rgba(10,10,10,0.5) 0.6px, transparent 0.7px),
        radial-gradient(circle at 88% 47%, rgba(10,10,10,0.45) 0.8px, transparent 0.9px),
        radial-gradient(circle at 55% 91%, rgba(10,10,10,0.45) 0.6px, transparent 0.7px);
    background-size: 300px 300px, 430px 430px, 260px 260px, 510px 510px, 380px 380px;
}

/* riscos verticais que aparecem por um instante, como cabelo na janela do projetor */
.specks::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(90deg, transparent 21%, rgba(10,10,10,0.30) 21%, rgba(10,10,10,0.30) calc(21% + 1px), transparent calc(21% + 1px)),
        linear-gradient(90deg, transparent 67%, rgba(10,10,10,0.20) 67%, rgba(10,10,10,0.20) calc(67% + 1px), transparent calc(67% + 1px));
    opacity: 0;
    animation: scratch 11s steps(1) infinite;
}

@keyframes scratch {
    0%, 100% { opacity: 0; transform: translateX(0); }
    2%       { opacity: 0.85; transform: translateX(-2vw); }
    4%       { opacity: 0; }
    38%      { opacity: 0; transform: translateX(6vw); }
    40%      { opacity: 0.6; transform: translateX(6vw); }
    41%      { opacity: 0; }
    73%      { opacity: 0; transform: translateX(-9vw); }
    75%      { opacity: 0.7; transform: translateX(-9vw); }
    78%      { opacity: 0; }
}

/* 4. VINHETA + TREMULAÇÃO DE EXPOSIÇÃO (sem markup extra: pseudos do body) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    mix-blend-mode: multiply;
    background:
        radial-gradient(125% 105% at 50% 48%,
            transparent 42%,
            rgba(10, 10, 10, 0.05) 66%,
            rgba(10, 10, 10, 0.14) 85%,
            rgba(10, 10, 10, 0.26) 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9995;
    mix-blend-mode: multiply;
    background: rgba(10, 10, 10, 0.04);
    opacity: 0;
    animation: flicker 5.5s steps(1) infinite;
}

/* a lâmpada do projetor nunca é perfeitamente estável */
@keyframes flicker {
    0%, 100% { opacity: 0; }
    3%   { opacity: 0.6; }
    5%   { opacity: 0; }
    27%  { opacity: 0; }
    28%  { opacity: 0.35; }
    30%  { opacity: 0; }
    54%  { opacity: 0; }
    55%  { opacity: 0.8; }
    56%  { opacity: 0.15; }
    58%  { opacity: 0.5; }
    60%  { opacity: 0; }
    84%  { opacity: 0; }
    85%  { opacity: 0.4; }
    87%  { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .noise { animation: none; }
    .specks::after { animation: none; opacity: 0; }
    body::before { animation: none; opacity: 0; }

    .hero-top-label,
    .hero-manifesto,
    .hero-top-label > span,
    .hero-text,
    .hero-location { animation: none; transform: none; }
}

/* =========================================
   4. HEADER
   ========================================= */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--page-padding);
    background-color: transparent;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Header recolhe no miolo da página (só desktop: no mobile
   ele carrega o botão do menu e precisa ficar acessível) */
@media (min-width: 769px) {
    #site-header {
        transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1),
                    opacity 0.3s ease,
                    border-color 0.3s ease,
                    background-color 0.3s ease;
    }

    body.header-off #site-header {
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
    }
}

#site-header.scrolled {
    border-bottom: 1px solid var(--line);
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(3px);
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.header-right { justify-content: flex-end; }

.header-center {
    display: flex;
    gap: 2rem;
    flex: 1;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.logo {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

#lang-toggle {
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

#lang-toggle:hover { opacity: 0.5; }

/* Botão do menu — só existe onde a nav horizontal não cabe */
#nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.5rem 0;
}

/* =========================================
   5. HERO (HOME) — TIPO GIGANTE
   ========================================= */
/* Hero minimalista: rótulo, manifesto e local como UM bloco centrado */
#hero {
    min-height: 100svh;
    /* padding igual em cima e embaixo: centralizar com padding
       desigual jogava o conteúdo 46px para baixo do centro real */
    /* centraliza na área ABAIXO do header: com padding igual, os 76px
       da barra comiam o topo e o conteúdo ficava colado nela */
    padding: calc(var(--header-height) + 2rem) var(--page-padding) 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2.25rem;
    position: relative;
}

.hero-top-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-manifesto {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-text {
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 1.35vw, 1.15rem);
    line-height: 1.95;
    letter-spacing: 0.05em;
    max-width: 62ch;
    text-wrap: balance;
}

.hero-location {
    font-family: var(--font-mono);
    margin-top: 2rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 9vw, 8rem);
    line-height: 0.88;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    font-weight: 400;
    max-width: 100%;
}

/* -----------------------------------------
   INSTABILIDADE DE QUADRO (gate weave)
   O texto do hero não desliza: ele PULA entre
   posições inteiras de pixel, como o filme
   assentando no gate a cada quadro. Inteiro =
   texto continua nítido, sem reamostragem.
   Duas camadas com ciclos primos entre si
   (6,1s e 0,83s) para nunca sincronizarem.
   ----------------------------------------- */
.hero-top-label,
.hero-manifesto {
    animation: gate-weave 6.1s steps(1) infinite;
}

.hero-top-label > span,
.hero-text,
.hero-location {
    display: inline-block;
    animation: gate-jitter 0.83s steps(1) infinite;
}

@keyframes gate-weave {
    0%   { transform: translate(0, 0); }
    9%   { transform: translate(1px, 0); }
    18%  { transform: translate(1px, 1px); }
    27%  { transform: translate(0, 1px); }
    36%  { transform: translate(-1px, 1px); }
    45%  { transform: translate(-1px, 0); }
    54%  { transform: translate(0, -1px); }
    63%  { transform: translate(1px, -1px); }
    72%  { transform: translate(0, 0); }
    81%  { transform: translate(-1px, -1px); }
    90%  { transform: translate(0, 1px); }
    100% { transform: translate(0, 0); }
}

@keyframes gate-jitter {
    /* fica parado quase o ciclo inteiro; só dois solavancos curtos,
       para o movimento não virar tremedeira constante */
    0%, 43%  { transform: translate(0, 0); }
    45%      { transform: translate(0, 1px); }
    52%      { transform: translate(0, 0); }
    86%      { transform: translate(-1px, 0); }
    92%      { transform: translate(0, 0); }
    100%     { transform: translate(0, 0); }
}

/* =========================================
   5B. CAMADA ARCHIVAL (CARIMBOS / MARCAS)
   ========================================= */

/* Carimbo flutuante (services / briefing) */
.archival-stamp {
    position: absolute;
    top: 8%;
    right: 8%;
    transform: rotate(11deg);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.3;
    letter-spacing: 0.08em;
    padding: 0.75rem 1.25rem;
    border: 1.5px solid var(--text);
    opacity: 0.45;
    mix-blend-mode: multiply;
    pointer-events: none;
    text-align: center;
    z-index: 1;
}

/* Legenda discreta */
.caption {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-top: 0.5rem;
}

/* Números soltos repetidos */
.floating-numbers {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.25em;
    color: var(--muted);
    max-width: 12ch;
}

.index-num {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}

/* Filete de barras */
.slashes {
    letter-spacing: 0.2em;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

/* =========================================
   6. PORTFOLIO
   ========================================= */
#work {
    /* proporcional à altura da janela: padding fixo grande fazia
       a seção passar da tela em notebook de 720px */
    padding: var(--header-height) var(--page-padding);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.75rem;
    margin-bottom: 3rem;
    gap: 1rem;
}

.title-small {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.projects-wrapper {
    width: 100%;
    position: relative;
}

.projects-grid {
    display: flex;
    gap: var(--grid-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.projects-grid::-webkit-scrollbar { display: none; }

.project-card {
    flex: 0 0 calc(50% - (var(--grid-gap) / 2));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project-card-link { display: contents; }

.project-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.project-title {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.project-category {
    font-size: 0.7rem;
    white-space: nowrap;
}

.project-image-container {
    position: relative;
    overflow: hidden;
    background-color: var(--surface);
    aspect-ratio: 4/3;
    width: 100%;
    /* Trava a altura à tela: sem isto, em notebook de 780px o 4/3
       fazia a seção passar da viewport e o scroll deixava de encaixar,
       porque uma seção mais alta que a tela rola livre por dentro. */
    max-height: 46svh;
}

/* TUDO EM PRETO E BRANCO, ALTO CONTRASTE */
.project-image-container img,
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.18) brightness(1.04);
    transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1), filter 0.4s ease;
}

@media (hover: hover) {
    .project-image-container:hover img { transform: scale(1.03); }
    .project-card-link:hover .project-title { color: var(--muted); }
}

/* Setas do carrossel — embaixo, como estavam */
.carousel-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
    margin-top: 1rem;
}

.carousel-nav button {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text);
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

.carousel-nav button:hover { opacity: 0.5; }

/* =========================================
   7. ABOUT (BRANCO)
   ========================================= */
#about {
    padding: var(--header-height) var(--page-padding);
    background-color: var(--bg);
    color: var(--text);
}

/* Retrato e texto pendurados na mesma linha de topo: antes cada um
   flutuava por conta própria e a seção parecia duas peças soltas. */
.about-grid {
    /* frase curta grande à esquerda + foto à direita, alinhada pela base.
       Composição simples e reta — nada de esticar. */
    margin-top: 2rem;
    border-top: 1px solid var(--line);
    padding-top: clamp(1.5rem, 3vh, 2.5rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}

/* about encostado no topo (abaixo do header), sem boiar no centro da tela */
#about { justify-content: flex-start; padding-top: calc(var(--header-height) + 3rem); }

.about-lead { align-self: start; }
.about-portrait { justify-self: end; }

/* telas baixas: aperta o bloco em vez de deixar a seção passar da tela */
@media (max-height: 700px) {
    .about-grid {
        margin-top: 1.25rem;
        padding-top: 1rem;
    }

    .about-lead { font-size: clamp(0.9rem, 1.45vw, 1.2rem); }

    .about-note {
        font-size: 0.72rem;
        line-height: 1.65;
        padding-top: 0.85rem;
    }

    .about-text { gap: 1rem; }
}

/* -----------------------------------------
   RETRATO 3×4 — mesma linguagem das fotos de
   projeto: preto e branco, alto contraste,
   legenda numerada em mono.
   ----------------------------------------- */
.about-side {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.about-portrait {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* acompanha a coluna do grid, com teto pela altura da tela */
    width: 100%;
    max-width: min(200px, calc(38svh * 3 / 4));
}

.portrait-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    background-color: var(--surface);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.portrait-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.18) brightness(1.04);
}

/* instrução enquanto o arquivo não existe */
.portrait-hint {
    font-size: 0.62rem;
    line-height: 1.6;
    text-align: center;
    padding: 0 0.75rem;
}

.portrait-frame.is-empty img { display: none; }

.about-portrait figcaption {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
}

.about-portrait .caption { margin-top: 0; }

.portrait-id {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.about-data {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 1px solid var(--line-strong);
    padding-top: 0.75rem;
}

.data-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.status-indicator::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: currentColor;
    margin-right: 6px;
    vertical-align: middle;
}

.about-text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.about-lead {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 18ch;
}

/* segundo parágrafo em mono: cria hierarquia e amarra o bloco,
   em vez de dois textos do mesmo peso soltos na página */
.about-note {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.75;
    color: var(--muted);
    max-width: none;
}

.archival-marks {
    margin-top: 5rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    opacity: 0.45;
    overflow: hidden;
}

/* =========================================
   8. FOOTER
   ========================================= */
#footer {
    padding: 6rem var(--page-padding) 3rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.footer-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.footer-headline {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(2.6rem, 7.5vw, 8rem);
    line-height: 0.86;
    letter-spacing: -0.04em;
    font-weight: 400;
}

.email-link {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    letter-spacing: 0.06em;
    border-bottom: 1.5px solid var(--text);
    padding-bottom: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    transition: opacity 0.3s ease;
}

.email-link:hover { opacity: 0.5; }

.footer-widget {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.office-status {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid var(--text);
    border-radius: 0;
    padding: 0.45rem 0.8rem;
    width: fit-content;
    font-size: 0.68rem;
    margin-top: 0.25rem;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #111;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.widget-tag {
    margin-top: 0.75rem;
    font-size: 0.7rem;
    line-height: 1.5;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line-strong);
    padding-top: 1.5rem;
    width: 100%;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.social-links {
    display: flex;
    gap: 2rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Footer compacto (services / briefing) */
.footer-reduced {
    padding: 1.5rem var(--page-padding) 1.75rem;
    gap: 0;
}

.footer-reduced .footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

.footer-reduced .footer-widget {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.7rem;
}

.footer-reduced .office-status {
    padding: 0.35rem 0.65rem;
    font-size: 0.7rem;
}

/* Linha de chamada acima do footer reduzido (services) */
.footer-note {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.5rem;
}

.footer-reduced .office-status { margin-top: 0; }

.footer-links-wrapper {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

/* =========================================
   9. INTERACTIONS & ANIMATIONS
   ========================================= */
.observe {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s cubic-bezier(0.2, 0, 0, 1), transform 0.8s cubic-bezier(0.2, 0, 0, 1);
}

.observe.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .observe {
        opacity: 1;
        transform: none;
    }
}

/* =========================================
   10. SINGLE PROJECT PAGES
   ========================================= */
.single-project { position: relative; }

.project-header {
    /* centraliza na área ABAIXO do header: com padding igual, os 76px
       da barra comiam o topo e o conteúdo ficava colado nela */
    padding: calc(var(--header-height) + 2rem) var(--page-padding) 2rem;
    position: relative;
}

/* Título do projeto centrado, na mesma escala das outras subpáginas */
.project-intro {
    text-align: center;
    padding: 0;
}

.project-intro .caption { margin-top: 0.75rem; }

.project-header {
    gap: clamp(1.5rem, 4svh, 2.75rem);
}

.project-header .hero-top-label {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.75rem;
    text-align: left;
}

.project-details {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
    margin-top: 0;
    padding-top: clamp(1.25rem, 3svh, 2.25rem);
    border-top: 1px solid var(--line);
}

.meta-column {
    grid-column: 1 / 5;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.desc-column { grid-column: 6 / 13; }

.desc-column p {
    font-family: var(--font-display);
    font-size: 0.85rem;
    line-height: 1.65;
    letter-spacing: 0.03em;
    text-transform: none;
    max-width: 62ch;
}

.project-gallery {
    padding: 0 var(--page-padding);
    display: flex;
    flex-direction: column;
}

/* cada peça da galeria ocupa uma tela e vira uma parada do scroll */
.project-gallery > .gallery-item,
.gallery-grid {
    min-height: 100svh;
    justify-content: center;
    /* mesma folga do header das outras seções */
    padding-block: var(--header-height);
    scroll-snap-align: start;
    scroll-margin-top: var(--header-height);
}

.gallery-item img,
.gallery-grid img {
    max-height: 74svh;
    object-fit: cover;
}

@media (max-height: 460px) {
    .project-gallery > .gallery-item,
    .gallery-grid { min-height: 0; }
}

.gallery-item {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gallery-item img {
    width: 100%;
    height: auto;
    background-color: var(--surface);
}

/* Imagens full-width da galeria (peças soltas, fora do grid): altura firme +
   object-fit para SEMPRE preencher 100% da largura. Sem isto, uma imagem em
   retrato encolhe a largura para manter a proporção (visível no Safari),
   deixando espaço vazio na lateral. */
.project-gallery > .gallery-item > img {
    width: 100%;
    height: 74vh;        /* fallback para navegadores sem svh */
    height: 74svh;
    max-height: none;
    object-fit: cover;
}

.gallery-item figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
}

.project-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--header-height) var(--page-padding);
    border-top: 1px solid var(--line-strong);
    gap: 1.5rem;
}

.project-navigation a {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    font-size: clamp(1.4rem, 4vw, 3rem);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: opacity 0.3s ease;
}

.project-navigation a:hover { opacity: 0.5; }

/* =========================================
   11. SERVICES PAGE (RAW ARCHIVAL)
   ========================================= */
.services-page {
    position: relative;
}

/* -----------------------------------------
   ABERTURA DAS SUBPÁGINAS
   Mesma língua do hero da home: centrado,
   mono, tipo em escala contida.
   ----------------------------------------- */
.page-hero {
    /* centraliza na área ABAIXO do header: com padding igual, os 76px
       da barra comiam o topo e o conteúdo ficava colado nela */
    padding: calc(var(--header-height) + 2rem) var(--page-padding) 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.75rem;
}

.page-hero-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4.2vw, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 400;
    text-transform: uppercase;
    text-wrap: balance;
}

.page-hero-text {
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
    line-height: 2;
    letter-spacing: 0.05em;
    color: var(--muted);
    max-width: 58ch;
    text-wrap: balance;
}

.page-hero .caption { margin-top: 0; }

.giant-type {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
}

.dense-mono-block {
    margin-top: 3rem;
    position: relative;
}

.dense-mono-block p {
    font-size: clamp(0.8rem, 1.05vw, 0.92rem);
    line-height: 2;
    letter-spacing: 0.04em;
}

.dense-mono-block .floating-numbers {
    position: absolute;
    top: 0;
    right: 28%;
}

sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
    vertical-align: baseline;
}

.raw-section { padding: var(--header-height) var(--page-padding); }

.raw-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.75rem;
}

.raw-packages-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.raw-package {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.raw-pkg-title h3 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    letter-spacing: -0.03em;
    line-height: 0.95;
    font-weight: 400;
    margin: 0.4rem 0;
    text-transform: uppercase;
}

/* Lista em duas colunas, fluindo de cima para baixo (multi-column,
   não grid): oito itens empilhados viravam uma parede de texto e
   faziam a seção passar da altura da tela. */
.raw-pkg-details ul {
    columns: 2;
    column-gap: 1.5rem;
}

.raw-pkg-details li {
    break-inside: avoid;
    margin-bottom: 0.4rem;
}

.pkg-includes { margin-bottom: 0.75rem; }

/* Linhas de apoio: uma sozinha ocupa a largura toda, duas dividem */
.pkg-footnotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem 1.5rem;
    margin-top: 1.25rem;
    /* garante respiro antes do botão quando não sobra espaço livre */
    margin-bottom: 1.75rem;
}

/* os dois botões terminam na mesma linha, mesmo com listas de tamanhos diferentes */
.raw-pkg-details {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.raw-pkg-details .raw-action-btn {
    margin-top: auto;
    align-self: flex-start;
}

.raw-pkg-details .caption { max-width: none; }

.dense-addons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}

.dense-addons-grid .dense-mono-block {
    margin-top: 0;
    border-top: 1px solid var(--line-strong);
    padding-top: 0.75rem;
}

/* -----------------------------------------
   PROCESSO — régua editorial de 4 etapas
   ----------------------------------------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--grid-gap);
    list-style: none;
    margin-bottom: 3.5rem;
}

.process-step {
    position: relative;
    border-top: 1px solid var(--line-strong);
    padding-top: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* marca de tique na régua, como numa escala impressa */
.process-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 10px;
    background: var(--text);
}

.process-index {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.process-name {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    line-height: 1;
    letter-spacing: -0.025em;
    font-weight: 400;
    text-transform: uppercase;
}

.process-out {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.process-desc {
    font-size: 0.72rem;
    line-height: 1.75;
    letter-spacing: 0.04em;
    max-width: 34ch;
}

/* Nota de fechamento */
.process-note {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 1.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1.25rem;
}

.process-note p {
    font-size: clamp(0.78rem, 1.1vw, 0.9rem);
    line-height: 1.75;
    letter-spacing: 0.04em;
    max-width: 60ch;
}


/* -----------------------------------------
   FAQ — acordeão nativo (<details>)
   ----------------------------------------- */
.faq-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-summary {
    display: grid;
    grid-template-columns: 3.5rem 1fr 1.5rem;
    align-items: baseline;
    gap: 1rem;
    padding: 1.6rem 0;
    cursor: pointer;
    list-style: none;
    transition: opacity 0.25s ease;
}

.faq-summary::-webkit-details-marker { display: none; }

.faq-summary:hover { opacity: 0.55; }

.faq-q {
    font-size: clamp(0.8rem, 1.05vw, 0.92rem);
    letter-spacing: 0.05em;
}

/* + que vira × ao abrir */
.faq-toggle {
    position: relative;
    justify-self: end;
    width: 11px;
    height: 11px;
    align-self: center;
}

.faq-toggle::before,
.faq-toggle::after {
    content: '';
    position: absolute;
    background: var(--text);
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), opacity 0.3s ease;
}

.faq-toggle::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
}

.faq-toggle::after {
    left: 50%;
    top: 0;
    height: 100%;
    width: 1px;
}

.faq-item[open] .faq-toggle::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-answer {
    padding: 0 1.5rem 1.5rem calc(3.5rem + 1rem);
}

.faq-answer p {
    font-size: 0.78rem;
    line-height: 1.8;
    letter-spacing: 0.04em;
    max-width: 68ch;
}

.office-hours-cta {
    padding: 7rem var(--page-padding) 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.giant-cta-link {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: clamp(1.8rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--text);
    transition: opacity 0.3s ease;
}

.giant-cta-link:hover { opacity: 0.5; }

.raw-action-btn {
    display: inline-block;
    color: var(--text);
    border-bottom: 1px solid var(--text);
    padding-bottom: 0.15rem;
    transition: opacity 0.3s ease;
}

.raw-action-btn:hover { opacity: 0.5; }

/* =========================================
   12. BRIEFING FORM PAGE
   ========================================= */
.briefing-page {
    position: relative;
}

.form-container { max-width: 820px; }

.form-intro {
    margin-bottom: 3rem;
    font-size: 0.8rem;
    line-height: 1.6;
    max-width: 62ch;
}

.archival-form {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3.5svh, 3rem);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3svh, 2.5rem) var(--grid-gap);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    min-width: 0;
}

.input-group.full-width { grid-column: 1 / -1; }

.input-group label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.input-group input,
.input-group select,
.input-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-strong);
    color: var(--text);
    font-family: var(--font-display);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s ease;
}

.input-group input::placeholder,
.input-group textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-bottom: 2px solid var(--text);
}

.input-group select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%230a0a0a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 1.5rem;
}

.form-submit-wrapper {
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(1rem, 2.5svh, 2rem);
    margin-top: 0;
}

.giant-submit-btn {
    background: transparent;
    border: none;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 4rem);
    letter-spacing: -0.03em;
    color: var(--text);
    cursor: pointer;
    transition: opacity 0.3s ease;
    padding: 0;
    text-transform: uppercase;
}

.giant-submit-btn:hover { opacity: 0.5; }

/* =========================================
   13. RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }

    /* A nav vira um painel de tela cheia. Fica abaixo do header (z 100),
       então o botão de fechar continua clicável. */
    #nav-toggle { display: inline-block; }

    /* logo e botões precisam ficar acima do painel */
    .header-left,
    .header-right {
        position: relative;
        z-index: 2;
    }

    .header-center {
        position: fixed;
        /* NÃO usar inset:0 aqui: quando o header rola e ganha
           backdrop-filter (.scrolled), ele vira o bloco de contenção
           deste painel fixed e o comprime à altura da barra (~76px),
           fazendo o translateY(-100%) subir de menos e vazar o último
           link (CONTATO) no topo. Altura em svh é relativa à viewport,
           então independe desse bloco de contenção. */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100svh;
        z-index: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        background-color: var(--bg);
        font-size: 1rem;
        letter-spacing: 0.12em;
        transform: translateY(-100%);
        transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1);
    }

    body.nav-open .header-center { transform: translateY(0); }

    /* trava o scroll do fundo com o painel aberto */
    body.nav-open { overflow: hidden; }

    .project-card { flex: 0 0 100%; }

    .giant-type { font-size: 8vw; }

    .page-hero { padding-top: calc(var(--header-height) + 4rem); }

    .project-intro { padding: 3rem 0 1rem; }

    .hero-top-label { margin-top: 8vh; }

    .about-portrait { max-width: min(150px, 22svh); }

    .about-note {
        font-size: 0.72rem;
        line-height: 1.65;
    }

    .about-grid,
    .project-details {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    .about-grid {
        gap: 1.5rem;
        margin-top: 1.25rem;
        padding-top: 1rem;
    }

    .about-portrait { max-width: min(132px, 20svh); }

    .about-lead { font-size: clamp(1.35rem, 6.5vw, 2rem); max-width: none; }
    .about-portrait { justify-self: start; }

    .footer-top {
        flex-direction: column;
        gap: 3rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .footer-reduced .footer-widget,
    .footer-links-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .social-links { justify-content: flex-start; }

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

    .gallery-grid { grid-template-columns: 1fr; }

    .project-navigation {
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;
        text-align: left;
    }

    .raw-packages-grid,
    .dense-addons-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .raw-pkg-details ul { columns: 1; }
    .pkg-footnotes { grid-template-columns: 1fr; }

    .faq-summary { grid-template-columns: 2.5rem 1fr 1.25rem; gap: 0.75rem; }

    .faq-answer { padding: 0 0 1.25rem calc(2.5rem + 0.75rem); }

    .dense-mono-block .floating-numbers {
        position: static;
        margin-top: 1.5rem;
    }

    .process-grid { grid-template-columns: 1fr; gap: 2.5rem; }

    .process-desc { max-width: none; }

    .process-note { grid-template-columns: 1fr; gap: 0.5rem; }

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

    .archival-stamp {
        top: 4%;
        right: 4%;
        font-size: 0.7rem;
    }
}

/* -----------------------------------------
   PRÉ-BRIEFING — ajustes mínimos.
   Reaproveita .input-group, .form-grid e
   .giant-submit-btn; nada de componente novo.
   ----------------------------------------- */
[hidden] { display: none !important; }

.form-step {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-step-label {
    display: block;
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 0.75rem;
    letter-spacing: 0.08em;
}

/* rótulo de um grupo de caixas, com o mesmo peso dos <label> */
.label-as-legend {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--muted);
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 0.6rem 1.5rem;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--text);
    transition: opacity 0.25s ease;
}

.check-item:hover { opacity: 0.6; }

/* quadrado de 1px, na mesma linguagem dos filetes do site */
.check-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border: 1px solid var(--line-strong);
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
}

.check-item input[type="checkbox"]:checked { background: var(--text); }

.check-item input[type="checkbox"]:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }

.input-group.is-muted label,
.input-group.is-muted input { opacity: 0.4; }

.input-group input[type="date"],
.input-group input[type="number"] {
    color-scheme: light;
    min-height: 2rem;
}

.form-submit-wrapper .caption { max-width: 62ch; }

.form-status {
    margin-top: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    min-height: 1.2em;
}

.form-status.is-ok { color: var(--text); }
.form-status.is-erro { color: var(--text); text-decoration: underline; }

/* =========================================================
   BRIEFING DE IDENTIDADE VISUAL — página privada por URL.
   Reaproveita .form-container, .input-group, .check-grid,
   .check-item, .form-step e .giant-submit-btn. Aqui só o
   necessário para o fluxo em etapas, as escalas e os estados.
   ========================================================= */
.bi-step { gap: 1.25rem; }

.bi-step-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4.5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 0.5rem;
}

.bi-step-text {
    font-size: 0.8rem;
    line-height: 1.7;
    max-width: 62ch;
    color: var(--text);
    text-transform: none;
}

/* barra de navegação entre etapas */
.bi-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(1rem, 2.5svh, 2rem);
    margin-top: clamp(0.5rem, 2svh, 1.5rem);
}

.bi-progress {
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

.bi-nav-actions {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex-wrap: wrap;
}

.bi-btn {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0;
    transition: opacity 0.3s ease;
    text-decoration: none;
}

.bi-btn:hover { opacity: 0.5; }

/* ESCALAS DE PERSONALIDADE — 5 posições + N/A, sem sliders */
.bi-scales {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.25rem;
}

.bi-scale-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem 1rem;
}

.bi-scale-pole {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.bi-scale-dots {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.85rem;
}

.bi-scale-dot {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

/* o input real fica acessível mas visualmente representado pelo círculo */
.bi-scale-dot input[type="radio"],
.bi-scale-na input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.bi-scale-dot-visual {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.bi-scale-dot input[type="radio"]:checked + .bi-scale-dot-visual {
    background: var(--text);
    border-color: var(--text);
}

.bi-scale-dot input[type="radio"]:focus-visible + .bi-scale-dot-visual {
    outline: 1px solid var(--text);
    outline-offset: 2px;
}

.bi-scale-dot-num {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--muted);
    opacity: 0.6;
}

.bi-scale-na {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-left: 0.5rem;
    align-self: center;
}

.bi-scale-na input[type="radio"]:checked ~ span { color: var(--text); text-decoration: underline; }

/* confirmação final */
.bi-confirm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(1rem, 2.5svh, 2rem);
    margin-top: 1rem;
}

.bi-confirm-check { align-items: flex-start; font-size: 0.8rem; text-transform: none; }
.bi-confirm-check span { line-height: 1.5; }

/* estados de erro e conflito */
.input-group.has-error input,
.input-group.has-error select,
.input-group.has-error textarea {
    border-bottom: 2px solid var(--text);
}
.input-group.has-error label,
.bi-confirm.has-error span { text-decoration: underline; }

.check-item.is-conflict {
    opacity: 0.3;
    pointer-events: none;
    text-decoration: line-through;
}

/* mensagem de sucesso (substitui o formulário) */
.bi-success {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    min-height: 40svh;
    justify-content: center;
}

/* MOBILE — as escalas empilham; nada de campos apertados */
@media (max-width: 640px) {
    .bi-scale-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        border-bottom: 1px solid var(--line);
        padding-bottom: 1rem;
    }
    .bi-scale-pole.align-right { text-align: left; }
    .bi-scale-dots { justify-content: space-between; gap: 0.5rem; width: 100%; }
    .bi-scale-na { margin-left: 0; }
    .bi-nav { gap: 1rem; }
    .bi-nav-actions { width: 100%; justify-content: space-between; }
}

/* =========================================================
   TIPOGRAFIA — AKTIV GROTESK É A VOZ DE LEITURA
   Departure Mono fica só como acento decorativo (códigos,
   índices, rótulos, tags, meta). Este bloco garante que o
   texto corrido em Aktiv, mesmo quando o HTML ainda carrega
   a classe .mono por herança.
   ========================================================= */
.faq-answer p,
.footer-note {
    font-family: var(--font-display) !important;
}

/* Serviços: itens (listas de pacotes e add-ons) e perguntas do FAQ
   permanecem em Departure Mono como acento técnico. */
.raw-pkg-details ul,
.raw-pkg-details li,
.pkg-includes,
.dense-mono-block p,
.faq-q {
    font-family: var(--font-mono) !important;
}