/* ==========================================================================
   layout.css — estrutura da página, header e painéis
   ========================================================================== */

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

/* Cena 3D por trás de tudo; o conteúdo fica acima (z-index: 1) */
.scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.no-webgl .scene {
    display: none;
}

/* Fundo: manchas de cor (as 3 áreas) por baixo da cena 3D. Cada mancha é pintada uma vez (radial-gradient) e só
   se animam transform e opacity (compositor). O estado base é CSS puro: sem JS ou com "reduzir movimento" fica
   um fundo estático com tint. assets/js/backdrop.js faz as manchas passear e acende a da área ativa. */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* O palco é maior que o ecrã, para o parallax do scroll não deixar ver as arestas */
/* Grão por cima das manchas: dá textura de papel/asfalto e tira o ar liso de gradiente de ecrã. Estático (sem custo por frame). */
.backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    background-size: 200px 200px;
    opacity: var(--grain-opacity);
}

.backdrop__stage {
    position: absolute;
    inset: -20vh -10vw;
    will-change: transform;
}

.backdrop__blob {
    --blob-size: 78vmax;
    position: absolute;
    width: var(--blob-size);
    height: var(--blob-size);
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--blob), transparent);
    opacity: var(--glow-ambient); /* estado estático; o backdrop.js anima a partir daqui */
    will-change: transform, opacity;
}

.backdrop__blob--creative { --blob: var(--glow-creative); left: -6vw;  top: 4vh; }
.backdrop__blob--ai       { --blob: var(--glow-ai);       left: 48vw;  top: -4vh; }
.backdrop__blob--dev      { --blob: var(--glow-dev);      left: 20vw;  top: 52vh; }

main,
.site-footer {
    position: relative;
    z-index: 1;
}

/* Painel: bloco de ecrã inteiro com fundo transparente (a cena vê-se por trás) */
.panel {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 100svh;
    padding-block: var(--space-section);
}

/* Header -------------------------------------------------------------- */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    padding-inline: var(--gutter);
    transition: transform 0.5s var(--ease);
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

/* O "ds" do header é a mesma letra do logótipo 3D (Pacifico) */
.brand {
    font-family: var(--font-logo);
    font-size: 2.1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    text-shadow: 0 0 0.7em var(--brand-glow);
}

.brand--lg {
    font-size: clamp(3rem, 6vw, 4.5rem);
}

/* Menu + seletor de língua. Em desktop é uma linha; em mobile é o painel de ecrã inteiro. */
.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Botão de tema + seletor de língua. Em mobile ficam juntos, no painel do menu. */
.site-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.nav__link {
    position: relative;
    font-size: var(--fs-small);
    font-weight: 500;
    padding-block: 0.25rem;
}

.nav__link::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Mobile: o .site-nav passa a painel de ecrã inteiro */
@media (max-width: 799.98px) {
    .site-nav {
        position: fixed;
        inset: 0;
        z-index: -1; /* por baixo da marca e do botão, que ficam visíveis */
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 2.5rem;
        padding: var(--header-h) var(--gutter) var(--gutter);
        background: var(--bg);
        visibility: hidden;
        transform: translateY(-100%);
        transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
    }

    .site-nav.is-open {
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .nav {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav__link {
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 13vw, 4.5rem);
        font-weight: 600;
        letter-spacing: var(--tracking-display);
        text-transform: uppercase;
    }
}

/* Hero ---------------------------------------------------------------- */

.hero {
    padding-block: var(--header-h) 5rem;
}

/* Ecrã estreito (mesma condição do modo "estreito" da cena 3D): o logótipo fica no topo, por isso o
   texto encosta ao fundo do ecrã, abaixo do anel. */
@media (max-aspect-ratio: 9/10) {
    .hero {
        align-items: end;
        padding-bottom: 4.5rem;
    }
}

/* Telemóvel: o texto do hero ocupava mais de metade do ecrã e encostava ao anel 3D. Título e frase mais pequenos
   (só aqui: nos painéis fixos e em tablets o título mantém o tamanho de .display--fit, ver base.css). */
@media (max-aspect-ratio: 9/10) and (max-width: 599.98px) {
    .hero .display--fit {
        --fit: 0.76;
    }

    .hero .lead {
        font-size: 1rem;
    }

    /* Botões mais estreitos: em 360 px cabem lado a lado e poupam uma linha */
    .hero__actions .btn {
        padding-inline: 1em;
    }
}

.hero__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.hero__inner {
    display: grid;
    gap: clamp(1rem, 2.5vh, 2rem);
    container-type: inline-size; /* permite dimensionar o título pela largura disponível (cqw) */
}

/* A .line é a máscara; o .line__inner sobe lá de dentro (animação no JS) */
.line {
    display: block;
    overflow: hidden;
    padding-block: 0.14em;
    margin-block: -0.14em;
    color: var(--accent);
}

.line__inner {
    display: block;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

/* Painéis fixos (services) -------------------------------------------- */

/* Base: painéis empilhados em fluxo normal (sem JS / reduzir movimento) */
.pin-panels__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-section);
}

.pin-panels__index {
    display: none;
    gap: 1rem;
    font-family: var(--font-label);
    font-size: var(--fs-small);
    font-variant-numeric: tabular-nums;
}

.pin-panel {
    display: grid;
    align-items: center;
    min-height: 70svh;
    padding-block: 3rem;
}

.pin-panel__inner {
    container-type: inline-size; /* permite dimensionar o título pela largura disponível (cqw) */
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    justify-items: start;
}

.pin-panel .display {
    color: var(--accent);
}

.pin-panel__cta {
    margin-top: 0.5rem;
    text-align: left;
}

/* Modo fixo: o JS acrescenta .is-pinned; os painéis sobrepõem-se na mesma célula */
.pin-panels.is-pinned .pin-panels__stage {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100svh;
}

.pin-panels.is-pinned .pin-panels__head {
    padding-top: calc(var(--header-h) + 1rem);
}

.pin-panels.is-pinned .pin-panels__index {
    display: flex;
}

.pin-panels.is-pinned .pin-panel {
    grid-area: 2 / 1;
    min-height: 0;
    padding-block: 0 2rem;
}

.pin-panels__dot {
    opacity: 0.35;
    transition: opacity 0.4s var(--ease);
}

.pin-panels__dot.is-active {
    opacity: 1;
}

/* Scroll horizontal (work) -------------------------------------------- */

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

.hscroll__head {
    display: grid;
    gap: 1rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

/* Base: carrossel nativo com scroll-snap */
.hscroll__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
}

.hscroll__viewport::-webkit-scrollbar {
    display: none;
}

.hscroll__track {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    width: max-content;
    padding-inline: var(--gutter);
}

/* Modo fixo: o JS acrescenta .is-hscroll e anima o translateX da faixa */
.hscroll.is-hscroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + 1rem) 2rem;
    overflow: hidden;
}

.hscroll.is-hscroll .hscroll__head {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hscroll.is-hscroll .hscroll__viewport {
    overflow: visible;
    scroll-snap-type: none;
}

/* Sobre --------------------------------------------------------------- */

.about__inner {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
}

.statement {
    max-width: 24em;
    font-size: clamp(1.75rem, 1rem + 3.2vw, 4rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: pretty;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* Footer -------------------------------------------------------------- */

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

/* Bloco grande de contacto: sem fundo, para o logótipo 3D se ver por trás */
.footer__cta {
    display: grid;
    align-items: center;
    min-height: min(75svh, 42rem);
    padding-block: var(--space-section) clamp(3rem, 6vw, 5rem);
}

.footer__cta-inner {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
}

@media (min-width: 900px) {
    .footer__cta-inner {
        grid-template-columns: 1.3fr 1fr;
    }
}

.footer__cta .display {
    color: var(--fg);
}

.footer__cta-main {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    justify-items: start;
}

.footer__cta-side {
    display: grid;
    gap: 1.25rem;
    justify-items: start;
}

.footer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

/* Dados da empresa e aviso legal: fundo (quase) sólido, por cima da cena */
.footer__info {
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, transparent); /* quase sólido: o logótipo 3D mal se vê por baixo */
}

.footer__grid {
    display: grid;
    gap: 2.5rem 2rem;
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 640px) {
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .footer__grid {
        grid-template-columns: 1.2fr 0.9fr 1fr 1.2fr 1.1fr; /* marca | mapa do site | áreas | serviços (títulos compridos) | empresa (o e-mail não parte) */
    }
}

.footer__brand {
    display: grid;
    gap: 0.75rem;
    align-content: start;
    justify-items: start;
    color: var(--fg);
}

.footer__brand p {
    color: var(--fg-muted);
}

.footer__h {
    font-family: var(--font-label);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    color: var(--fg);
}

.footer__col {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.footer__list {
    display: grid;
    gap: 0.5rem;
}

.footer__col a:hover {
    color: var(--fg);
}

.footer__address {
    font-style: normal;
    line-height: 1.7;
}

.footer__address strong {
    color: var(--fg);
}

.footer__legal {
    display: grid;
    gap: 0.9rem;
}

.footer__legal dt {
    font-family: var(--font-label);
    font-size: 0.875rem;
    letter-spacing: var(--tracking-label);
    opacity: 0.8;
}

.footer__legal dd {
    margin: 0.15rem 0 0;
    color: var(--fg);
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-block: 1.75rem;
    border-top: 1px solid var(--line);
}

/* Página 404 (inc/not-found.php) --------------------------------------- */

.not-found {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    justify-items: start;
}

.not-found .display {
    text-wrap: balance;
}