/* ==========================================================================
   base.css — tokens, reset, tipografia e utilitários
   ========================================================================== */

/* Fonte do logótipo (Pacifico, Google Fonts, licença OFL: ver assets/fonts/OFL-Pacifico.txt).
   Só o subconjunto latino: chega para o "ds". */
@font-face {
    font-family: "Pacifico";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pacifico-latin.woff2") format("woff2");
}

/* Fontes do texto (Oswald, Inter, Fira Sans Extra Condensed, Caveat; OFL): bloco gerado, ver tools/build-fonts.mjs */
/* fonts:start (gerado por tools/build-fonts.mjs; não editar à mão: alterar FAMILIES e voltar a correr) */
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/oswald-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/oswald-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/fira-condensed-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fira Sans Extra Condensed";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/fira-condensed-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/caveat-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/caveat-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* fonts:end */

/* ==========================================================================
   Tokens de cor, por tema. html[data-theme] é posto por assets/js/theme-boot.js (inline no <head>);
   o escuro é também o estado sem JS. Nenhuma outra folha de estilo, nem a cena 3D, tem cores fixas:
   tudo vem destes tokens (o JS lê-os com getComputedStyle, ver assets/js/theme.js).
   Contrastes e separação: node tools/contrast-check.mjs (lê este bloco).

     --bg / --bg-elev   fundo da página / superfícies elevadas (modal, menus)
     --bg-pop           listas que abrem por cima do modal (dropdown): um degrau acima de --bg-elev
     --fg / --fg-muted  texto / texto secundário
     --line             divisórias decorativas;  --line-strong  bordas que identificam um controlo (≥ 3:1)
     --c-*              cor de cada área, SEGURA PARA TEXTO e bordas (escurecida no tema claro)
     --grain / --grain-opacity   textura de ruído por cima do fundo (papel/asfalto impresso)
     --glow-*           matiz vivo das mesmas áreas, só para manchas de fundo e halos do 3D
     --ink              cor neutra do 3D (estrelas, linhas sem área)
     --glow-ambient|active|dim   opacidade das manchas do fundo (sem área / área ativa / outras)
   ========================================================================== */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Neutros quentes ("asfalto"): o cinza frio + neon é o visual por defeito das landing pages de IA */
    --bg: #14130f;
    --bg-elev: #1d1b16;
    --bg-pop: #2a2721;
    --fg: #f4f0e6;
    --fg-muted: #b5afa2;
    --line: rgb(255 240 215 / 0.14);
    --line-strong: rgb(255 240 215 / 0.45);
    --hover: rgb(255 240 215 / 0.12);
    --hover-strong: rgb(255 240 215 / 0.2);
    --shadow: rgb(0 0 0 / 0.45);
    --shadow-strong: rgb(0 0 0 / 0.65);
    --scrim: rgb(8 7 4 / 0.72);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: 0.055;
    --card-num: rgb(0 0 0 / 0.28);
    --brand-glow: color-mix(in srgb, var(--fg) 30%, transparent);

    /* Cor de cada área: Marketing & Design (creative), AI & Automation (ai), Development & DevOps (dev) */
    --c-creative: #ff74a6;
    --c-ai: #ffb347;
    --c-dev: #3df5c8;
    --c-work: #7c8cff;
    --c-partners: #8f9cff; /* consultoria e outsourcing: serviço que atravessa as 3 áreas */

    --glow-creative: #ff4d8d;
    --glow-ai: #ffb347;
    --glow-dev: #3df5c8;
    --glow-work: #7c8cff;
    --glow-partners: #7c8cff;
    --glow-ink: #f4f0e6;
    --ink: #f4f0e6;
    --glow-ambient: 0.07;
    --glow-active: 0.14;
    --glow-dim: 0.04;
}

:root[data-theme="light"] {
    color-scheme: light;

    /* Papel: branco-sujo quente em vez do cinza-gelo */
    --bg: #f4f0e6;
    --bg-elev: #fffdf7;
    --bg-pop: #fffdf7;
    --fg: #17140f;
    --fg-muted: #565146;
    --line: rgb(23 20 15 / 0.14);
    --line-strong: rgb(23 20 15 / 0.5);
    --hover: rgb(23 20 15 / 0.08);
    --hover-strong: rgb(23 20 15 / 0.14);
    --shadow: rgb(23 20 15 / 0.14);
    --shadow-strong: rgb(23 20 15 / 0.25);
    --scrim: rgb(23 20 15 / 0.6);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-opacity: 0.07;
    --card-num: rgb(0 0 0 / 0.28);
    --brand-glow: transparent;

    --c-creative: #ac0f4b;
    --c-ai: #8a4200;
    --c-dev: #00634a;
    --c-work: #4a58d6;
    --c-partners: #3b48bd;

    --glow-creative: #ff4d8d;
    --glow-ai: #ffb347;
    --glow-dev: #3df5c8;
    --glow-work: #7c8cff;
    --glow-partners: #7c8cff;
    --glow-ink: #7c8cff;
    --ink: #17140f;
    --glow-ambient: 0.09;
    --glow-active: 0.22;
    --glow-dim: 0.05;
}

:root {
    --accent: var(--fg);

    /* Tipografia ("cartaz de rua"; ficheiros e @font-face em tools/build-fonts.mjs): títulos condensados, texto neutro,
       etiquetas em mono, notas "à mão" só em poucas palavras. O logótipo é Pacifico. */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    /* Etiquetas (eyebrows, tags, números, relógio): condensada de sinalética, só na espessura 500 (usar sempre ≤ 500: sem negrito falso) */
    --font-label: "Fira Sans Extra Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --tracking-label: 0.03em;
    --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    --font-logo: "Pacifico", "Brush Script MT", cursive;
    /* Espaçamento entre letras dos títulos em Oswald (maiúsculas): apertado, estilo cartaz. -0,06em ≈ -5 a -6px nos tamanhos do hero;
       a -0,08em as letras já colam ("LV", "VI") e a -0,125em (≈ -8px a 64px) sobrepõem-se. Se mudares, volta a calibrar a constante de .display--fit. */
    --tracking-display: -0.06em;
    --tracking-heading: -0.03em; /* títulos pequenos (acordeão, cartões, passos): menos apertado */

    --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-small: 0.875rem;
    --fs-eyebrow: 0.9375rem;
    --fs-lead: clamp(1.125rem, 1rem + 0.7vw, 1.6rem);
    --fs-display: clamp(2.75rem, min(12vw, 16svh), 12rem); /* limitado também pela altura, para o hero caber no ecrã */
    --fs-display-lg: clamp(3rem, 10vw, 9rem);
    --fs-display-md: clamp(2.25rem, 6vw, 5.5rem);
    --fs-display-sm: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);

    /* Espaçamento e largura */
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --container: 90rem;
    --space-section: clamp(5rem, 12vw, 10rem);
    --header-h: 4.5rem;

    /* Movimento */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --radius: 1.25rem;
}

/* Reset --------------------------------------------------------------- */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html {
    scrollbar-gutter: stable; /* a barra de scroll não "salta" ao bloquear o scroll (menu, modal) */
}

html.is-locked,
html.is-modal-open {
    overflow: hidden;
}

body {
    min-height: 100svh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* :where() mantém a especificidade a zero, para as classes poderem redefinir o padding */
:where(ul[class], ol[class]) {
    list-style: none;
    padding: 0;
}

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

/* Foco programático (âncoras) não precisa de contorno */
[tabindex="-1"]:focus {
    outline: none;
}

::selection {
    background: var(--fg);
    color: var(--bg);
}

/* Tipografia ---------------------------------------------------------- */

.display {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: var(--tracking-display);
    text-transform: uppercase; /* cartaz: os títulos são sempre em maiúsculas (o texto da tradução fica em minúsculas no HTML) */
    text-wrap: balance;
    overflow-wrap: break-word; /* rede de segurança para palavras longas noutras línguas */
}

.display--lg { font-size: var(--fs-display-lg); }

/* Título que se ajusta à largura disponível, medido pelo nome mais comprido do conjunto (--chars, vindo do PHP;
   ver area_metrics() em inc/content.php), para os nomes "Development & DevOps" caberem em qualquer língua.
   Precisa de um contentor com container-type: inline-size (cqw). --fit = fração da largura que o título pode
   ocupar (o resto fica para o logótipo 3D). Em ecrã estreito (mesma condição do modo "estreito" da cena) o nome
   parte antes do "&" e a medida passa a ser o maior pedaço (--seg). */
.display--fit {
    --fit: 0.62;
    font-size: max(1.75rem, min(calc(100cqw * var(--fit) * 2.28 / var(--chars, 20)), 16svh, 9rem));
}

@media (max-aspect-ratio: 9/10) {
    .display--fit {
        --fit: 0.95;
        font-size: max(1.75rem, min(calc(100cqw * var(--fit) * 2.28 / var(--seg, 12)), 12svh, 9rem));
    }
}

/* "& Design": não parte por dentro. O conector tem o mesmo peso e cor das palavras
   (mais fino ou esbatido parecia um erro de encoding). */
.amp-group {
    display: inline-block;
    white-space: nowrap;
}
.display--md { font-size: var(--fs-display-md); line-height: 1; }
.display--sm { font-size: var(--fs-display-sm); line-height: 1.05; }

/* Etiqueta de secção: mono, como um bilhete/etiqueta de rua. Sem maiúsculas espaçadas (era o padrão mais copiado das landing pages). */
.eyebrow {
    font-family: var(--font-label);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    color: var(--fg-muted);
}

.lead {
    max-width: 38ch;
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: var(--fg-muted);
    text-wrap: pretty;
}

/* Ligação com sublinhado forte (CTA discretos) */
.u-link {
    display: inline-block;
    padding-bottom: 0.15em;
    border-bottom: 2px solid var(--accent, var(--fg));
    font-weight: 600;
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.u-link:hover {
    color: var(--accent, var(--fg-muted));
}

.muted { color: var(--fg-muted); }
.small { font-size: var(--fs-small); }

/* Ícones Phosphor (sprite em assets/icons/phosphor.svg, helper icon() em inc/icons.php) */
.icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

/* Utilitários --------------------------------------------------------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    background: var(--fg);
    color: var(--bg);
    font-weight: 600;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Troca de tema: durante instantes, as cores fazem transição (classe posta por assets/js/theme-boot.js) */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
    transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, fill 0.45s ease,
        box-shadow 0.45s ease, opacity 0.45s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html.theme-fade,
    html.theme-fade *,
    html.theme-fade *::before,
    html.theme-fade *::after {
        transition: none !important;
    }
}

/* Estado inicial dos elementos animados.
   Só com JS ativo. O GSAP (scroll.js) leva-os ao estado final.
   Sem JS, com "reduzir movimento" ou se o JS falhar, ficam visíveis. */

.js [data-reveal],
.js [data-hero],
.js .line__inner {
    opacity: 0;
}

.motion-fail [data-reveal],
.motion-fail [data-hero],
.motion-fail .line__inner {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal],
    .js [data-hero],
    .js .line__inner {
        opacity: 1;
    }
}