/* =============================================================
   Edgar de Souza — folha de estilos principal
   1. Tokens          5. Herói           9. Parcerias
   2. Base            6. Métricas       10. CTA
   3. Componentes     7. Sobre          11. Rodapé
   4. Cabeçalho       8. Conteúdos      12. Responsivo
                                        13. Páginas de leitura
   ============================================================= */

/* ------------------------- 0. Fontes locais ---------------- */
/* Brittany Signature — licenca "personal use" da Creatype Studio.
   Antes de publicar comercialmente e preciso adquirir a licenca em
   https://creatypestudio.co/brittany */
@font-face {
    font-family: "Brittany Signature";
    src: url("../fonts/BrittanySignatureScript.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ------------------------------ 1. Tokens ------------------- */
:root {
    /* cor — trocar estas tres linhas muda o tema todo.
       Dourado original: #c69749 / #a97c2f / 198, 151, 73 */
    --accent: #1939ff;
    --accent-deep: #0f26c9;
    --accent-rgb: 25, 57, 255;
    --accent-soft: rgba(var(--accent-rgb), .14);
    --ink: #12161d;
    --ink-soft: #2a3039;
    --body: #5c636e;
    --muted: #8b929e;
    --line: #e7e2da;
    --line-soft: #f0ece5;
    --paper: #ffffff;
    --canvas: #fdfcfa;

    /* tipografia */
    --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --font-text: "Inter", "Segoe UI", Arial, sans-serif;
    --font-script: "Brittany Signature", "Great Vibes", "Brush Script MT", cursive;
    --font-apelido: "Montserrat", "Inter", Arial, sans-serif;

    /* ritmo */
    --shell: 1240px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --section-y: clamp(3.5rem, 7vw, 6.5rem);

    /* superfície */
    --radius-sm: .625rem;
    --radius: 1rem;
    --radius-lg: 1.25rem;
    --shadow-sm: 0 10px 24px rgba(18, 22, 29, .06);
    --shadow: 0 18px 44px rgba(18, 22, 29, .09);
    --shadow-lg: 0 28px 60px rgba(18, 22, 29, .16);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 86% 4%, rgba(var(--accent-rgb), .1), transparent 30rem),
        linear-gradient(180deg, #fff 0%, var(--canvas) 45%, #fff 100%);
    color: var(--body);
    font-family: var(--font-text);
    font-size: .95rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

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

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ------------------------- 3. Componentes ------------------ */
.icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

/* Marca */
.logo {
    display: inline-flex;
    flex-direction: column;
    gap: .2rem;
    line-height: 1;
}
.logo-nome {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: .3em;
    color: var(--ink);
}
.logo-nome span { color: var(--accent); }
.logo-apelido {
    font-family: var(--font-text);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .42em;
    color: var(--muted);
    padding-left: .2em;
}

/* Antetítulo dourado */
.eyebrow {
    margin: 0 0 1.15rem;
    color: var(--accent-deep);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.eyebrow-center { text-align: center; }

/* Título de secção */
.section-title {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2.05rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.section-title::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: .9rem;
    border-radius: 2px;
    background: var(--accent);
}
.section-title--center { text-align: center; }
.section-title--center::after { margin-inline: auto; }

/* Botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 2.9rem;
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-gold {
    background: var(--accent);
    color: #fff;
}
.btn-gold:hover { background: linear-gradient(135deg, var(--accent-deep), var(--accent)); }

.btn-outline {
    background: var(--paper);
    border-color: #cdd2d9;
    color: var(--ink);
}
.btn-outline:hover { border-color: var(--ink); }

.btn-outline-gold {
    background: var(--paper);
    border-color: rgba(var(--accent-rgb), .6);
    color: var(--ink);
    padding-right: .5rem;
}
.btn-outline-gold:hover { border-color: var(--accent); }

.btn-icon { width: 1.05rem; height: 1.05rem; }

.btn-arrow {
    width: 1.6rem;
    height: 1.6rem;
    padding: .34rem;
    border-radius: 50%;
}
.btn-gold .btn-arrow { background: rgba(255, 255, 255, .92); color: var(--accent-deep); }
.btn-outline-gold .btn-arrow { background: var(--accent); color: #fff; }

/* Fichas de rede social */
.social-row { display: flex; align-items: center; gap: .5rem; }
/* O PNG ja e o circulo escuro com o glifo: a ficha nao precisa de fundo. */
.social-chip {
    display: inline-flex;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    transition: transform .18s ease, box-shadow .18s ease;
}
.social-chip img { width: 100%; height: 100%; }
.social-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35);
}

/* Ornamentos */
.dots {
    position: absolute;
    color: var(--accent);
    background-image: radial-gradient(currentColor 1.3px, transparent 1.3px);
    background-size: .95rem .95rem;
    opacity: .5;
    pointer-events: none;
}
.text-gold { color: var(--accent); }
.script {
    display: block;
    width: fit-content;
    color: var(--accent);
    font-family: var(--font-script);
    font-size: clamp(3.9rem, 3.5vw, 2.9rem);
    font-weight: 400;
    line-height: 0.5;
    text-transform: none;
    letter-spacing: .04em;
}
.script::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: .1rem;
    background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
}

/* --------------------------- 4. Cabeçalho ------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
    border-bottom-color: var(--line-soft);
    box-shadow: 0 8px 26px rgba(18, 22, 29, .05);
}
.header-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.15rem;
}

.main-nav { display: flex; justify-content: center; gap: clamp(.9rem, 1.9vw, 2rem); }
.nav-link {
    position: relative;
    color: var(--ink-soft);
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-block: .35rem;
    transition: color .18s ease;
}
.nav-link:hover { color: var(--accent-deep); }
.nav-link.is-active { color: var(--accent); }
.nav-link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.55rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
}

.header-actions { display: flex; align-items: center; gap: .9rem; justify-content: flex-end; }

/* No cabecalho o botao e secundario: fica mais compacto, a par das fichas
   sociais. Os CTA do heroi e do rodape mantem o tamanho cheio. */
.header-actions .btn {
    min-height: 2.4rem;
    padding: 0 1.05rem;
    gap: .45rem;
    font-size: .66rem;
}
.header-actions .btn-arrow {
    width: 1.35rem;
    height: 1.35rem;
    padding: .28rem;
}

.menu-toggle {
    display: none;
    width: 2.6rem;
    height: 2.6rem;
    padding: .65rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: .7rem;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    margin-block: 4px;
}

/* ----------------------------- 5. Herói -------------------- */
.hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
    /* o disco dourado e propositadamente mais largo que o contentor:
       recorta na horizontal sem criar contentor de scroll */
    overflow-x: clip;
}
.hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
}

.hero-copy { position: relative; }
.dots-hero { width: 5.5rem; height: 5.5rem; left: -3.5rem; top: -1.5rem; }

.hero-title {
    margin: 0 0 1.5rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.05vw, 2.6rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.015em;
    text-transform: uppercase;
}
/* so esta linha encolhe, para caber sem partir; em em para acompanhar
   a escala do titulo em qualquer largura */
.hero-lead {
    display: block;
    font-size: .65em;
}
.hero-title .script { margin-top: .35rem; }

.hero-text {
    max-width: 26rem;
    margin: 0 0 2rem;
    font-size: .95rem;
    line-height: 1.85;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Cartões fotográficos */
.hero-visual {
    position: relative;
    min-height: 34rem;
}
/* Disco dourado sob os cartoes.
   .orbit-disc e um quadrado com a imagem esticada e .orbit achata-o com
   scaleY, devolvendo a perspectiva do ficheiro original (racio 2.57:1). */
.orbit {
    position: absolute;
    left: 50%;
    width: min(35rem, 136%);
    aspect-ratio: 1;
    translate: -50% 0;
    transform: scaleY(.389);
    transform-origin: center bottom;
    pointer-events: none;
}
.orbit-disc {
    position: absolute;
    inset: 0;
    background: url("../images/orbita-dourada.webp") center / 100% 100% no-repeat;
    /* a arte e dourada (matiz ~40deg): roda ate ao azul do tema (~232deg).
       Com o tema dourado, retirar este filtro. */
    filter: hue-rotate(192deg) saturate(1.15);
}
.card-photo {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: #eef0f3;
    box-shadow: var(--shadow-lg);
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Carrossel: cada cartao vira sobre o eixo vertical ao trocar de retrato.
   O .card-flip roda ate ficar de perfil, a imagem e trocada nesse instante
   (invisivel) e depois entra a rodar do outro lado — da um so movimento
   continuo, sem imagem espelhada. */
.card-photo { perspective: 1400px; }
.card-flip {
    position: absolute;
    inset: 0;
    transform-origin: center;
    backface-visibility: hidden;
    transition: transform .3s ease-in;
}
.card-flip.is-saindo { transform: rotateY(-90deg); }
.card-flip.is-entrando {
    transform: rotateY(90deg);
    transition: none;
}
.card-flip.is-a-entrar {
    transform: rotateY(0deg);
    transition: transform .32s ease-out;
}

/* Botoes anterior / seguinte */
.hero-nav {
    position: absolute;
    z-index: 5;
    top: 45%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent-deep);
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.hero-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.hero-nav:disabled { opacity: .5; cursor: default; }
.hero-nav--prev { left: -.75rem; }
.hero-nav--next { right: -.75rem; }
.hero-nav--prev:hover { transform: translateX(-2px); }
.hero-nav--next:hover { transform: translateX(2px); }
.hero-nav .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2; }

.card-photo--main {
    z-index: 3;
    top: 0;
    left: 24%;
    width: min(21rem, 46vw);
    height: 30rem;
    transform: rotate(4deg);
}
.card-photo--left {
    z-index: 2;
    top: 5.5rem;
    left: 0;
    width: 13rem;
    height: 21rem;
    transform: rotate(-11deg);
}
.card-photo--right {
    z-index: 1;
    top: 5rem;
    right: 0;
    width: 12.5rem;
    height: 20rem;
    transform: rotate(10deg);
}

.signature {
    position: absolute;
    z-index: 4;
    bottom: 1.9rem;
    left: 28%;
    display: grid;
    justify-items: stretch;
    min-width: 16.5rem;
    padding: 1.4rem 1.6rem 1.1rem;
    background: rgba(255, 255, 255, .96);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    text-align: center;
}
.signature-nome {
    font-family: var(--font-script);
    font-size: 4.7rem;
    line-height: .02;
    margin-right: auto;
    color: var(--ink);
}
.signature-apelido {
    margin-top: .4rem;
    margin-left: 40%;
    /* compensa o espacamento final para o texto ficar optically centrado */
    text-indent: .34em;
    color: var(--accent);
    font-family: var(--font-apelido);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .34em;
}

/* --------------------------- 6. Métricas ------------------- */
.metrics { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.metrics-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-block: 1rem;
}

/* Tira de redes sociais com a contagem de cada uma */
.metrics-redes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: .35rem .5rem;
    padding: .9rem clamp(.9rem, 2.2vw, 2rem);
    border-top: 1px solid var(--line-soft);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .035), transparent);
}
.rede {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .5rem;
    border-radius: .7rem;
    transition: background-color .18s ease;
}
.rede:hover { background: rgba(var(--accent-rgb), .07); }
.rede-perfil {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.rede img { width: 1.85rem; height: 1.85rem; flex: 0 0 auto; }

/* Botão de seguir — pequeno, à escala da linha */
.rede-seguir {
    margin-left: auto;
    padding: 0 .7rem;
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    border: 1px solid rgba(var(--accent-rgb), .45);
    border-radius: 999px;
    color: var(--accent-deep);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.rede-seguir:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.rede-corpo { display: grid; min-width: 0; }
.rede-valor {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.rede-label {
    color: var(--muted);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Indicador de actualizacao em directo */
.metrics-estado {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    grid-column: 1 / -1;
    justify-self: end;
    padding-right: .5rem;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pulso {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .5);
    animation: pulsar 2.4s ease-out infinite;
}
@keyframes pulsar {
    70%  { box-shadow: 0 0 0 .5rem rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Numero a subir quando o valor muda */
.metric-value, .rede-valor { transition: color .3s ease; }
.metric-value.is-a-mudar, .rede-valor.is-a-mudar { color: var(--accent); }
.metric {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding-inline: clamp(.75rem, 1.8vw, 1.4rem);
    border-right: 1px solid var(--line);
}
.metric:last-child { border-right: 0; }
.metric-icon { color: var(--accent); }
.metric-icon .icon { width: 1.9rem; height: 1.9rem; stroke-width: 1.4; }

.metric-value {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.55vw, 1.4rem);
    font-weight: 800;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.metric-label,
.metric-detail {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.45;
}
.metric-label { color: var(--ink-soft); }
.metric-detail { color: var(--muted); font-weight: 500; }

/* ----------------------------- 7. Sobre -------------------- */
.about { padding-block: var(--section-y); }
.about-shell {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.about-media { position: relative; }
.dots-about { width: 5rem; height: 5rem; left: -2.5rem; top: -1.75rem; }
.arc {
    position: absolute;
    left: -1.5rem;
    bottom: -1.5rem;
    width: 12rem;
    height: 12rem;
    border: 1px solid rgba(var(--accent-rgb), .4);
    border-radius: 50%;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.about-photo {
    position: relative;
    z-index: 2;
    margin: 0;
    aspect-ratio: .84;
    overflow: hidden;
    border-radius: var(--radius);
    background: #eceff2;
    box-shadow: var(--shadow);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }

.about-copy p { margin: 1.1rem 0 0; max-width: 32rem; }
.about-copy p:first-of-type { margin-top: 1.6rem; }
.about-copy strong { color: var(--ink); font-weight: 700; }
.about-copy em { font-style: normal; color: var(--ink); }
.about-copy .btn { margin-top: 2rem; }

/* --------------------------- 8. Conteúdos ------------------ */
.featured { padding-block: var(--section-y); }

.filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: .5rem;
    margin: 2.75rem 0 1.75rem;
}
.filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding-inline: .5rem;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.filter:last-child { border-right: 0; }
.filter:hover { color: var(--accent-deep); }
.filter-icon { width: 1.05rem; height: 1.05rem; }
.filter.is-active {
    background: var(--ink);
    border-right-color: transparent;
    border-radius: .8rem;
    color: #fff;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.1rem;
}
.content-card[hidden] { display: none; }

.content-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.content-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.content-thumb:hover img { transform: scale(1.06); }

.thumb-play {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: 2.9rem;
    height: 2.9rem;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: rgba(255, 255, 255, .26);
    backdrop-filter: blur(2px);
}
.thumb-play::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 54%;
    translate: -50% -50%;
    border-left: .7rem solid #fff;
    border-block: .45rem solid transparent;
}

.content-type {
    margin: .85rem 0 .2rem;
    color: var(--accent-deep);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.content-title {
    margin: 0;
    color: var(--ink);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
}

.content-empty {
    margin: 2.5rem 0 0;
    text-align: center;
    color: var(--muted);
}

.progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    margin-top: 2.5rem;
}
.progress-bar,
.progress-rest { height: 4px; border-radius: 999px; }
.progress-bar { width: 3.5rem; background: var(--accent); }
.progress-rest { width: 3rem; background: #d8d4ce; }
.progress-dot { width: .4rem; height: .4rem; border-radius: 50%; background: #cbc7c1; }

/* --------------------------- 9. Parcerias ------------------ */
.brands { padding-block: var(--section-y); }
.brand-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 2.5rem;
}
.brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
    padding: .5rem .75rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(.8rem, 1.2vw, 1.05rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    transition: border-color .18s ease, transform .18s ease;
}
.brand:hover { border-color: var(--accent); transform: translateY(-2px); }
.brand--logo { padding: .5rem .75rem; }
/* Limites altos de proposito: assim cada logotipo cresce ate bater na
   largura do cartao, em vez de ficar preso pela altura e deixar metade
   do cartao vazia. Quem manda passa a ser o max-width. */
.brand img {
    width: auto;
    max-width: 100%;
    max-height: 3.3rem;
    object-fit: contain;
}
/* logotipos quase quadrados: sem mais altura ficariam com metade da area */
.brand--tall img { max-height: 4.1rem; }

/* Marcas cujo fundo de cor faz parte do logotipo: o cartao veste essa cor
   e a imagem ocupa-o de bordo a bordo. Fica 'contain' e nao 'cover' — o
   cartao e mais quadrado que os logotipos e 'cover' cortaria a marca. */
.brand--bleed {
    padding: 0;
    overflow: hidden;
    background: var(--brand-bg, var(--paper));
    border-color: rgba(18, 22, 29, .1);
}
.brand--bleed img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    border-radius: 0;
}
/* varios vem com fundo de cor proprio (macon, angomart, ugo): o canto
   arredondado faz o quadrado ler-se como marca e nao como recorte */
.brand img { border-radius: .35rem; }
/* "E muitas outras…" e um botao: abre o modal com o resto das marcas */
.brand--mais {
    color: var(--accent-deep);
    font-family: var(--font-text);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    border-style: dashed;
    border-color: rgba(var(--accent-rgb), .45);
    cursor: pointer;
}
.brand--mais:hover {
    background: rgba(var(--accent-rgb), .06);
    border-style: solid;
}

/* ----------------------------- Modal ---------------------------- */
.modal {
    width: min(46rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    overflow: visible;
}
.modal::backdrop {
    background: rgba(18, 22, 29, .55);
    backdrop-filter: blur(3px);
}
.modal-caixa {
    position: relative;
    /* a lista completa pode nao caber em ecras baixos */
    max-height: 85vh;
    overflow-y: auto;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.modal-titulo {
    margin: 0 0 1.5rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.modal-fechar {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.modal-fechar:hover { background: var(--line-soft); color: var(--ink); }

.brand-grid--modal {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    margin-top: 0;
}
/* Os cartoes do modal sao mais largos que os da seccao, por isso o mesmo
   limite de altura deixava ate 94px de largura por usar. Cartao mais alto
   e tectos maiores: cada logotipo volta a crescer ate bater na largura. */
.brand-grid--modal .brand { min-height: 6.5rem; }
.brand-grid--modal .brand img { max-height: 4.5rem; }
.brand-grid--modal .brand--tall img { max-height: 5.5rem; }

/* ----------------------------- 10. CTA --------------------- */
.cta { padding-block: 0 var(--section-y); }
.cta-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 12.5rem);
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    min-height: 11.5rem;
    padding: 2rem clamp(1.5rem, 3vw, 2.5rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.cta-kicker {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}
.cta-title {
    margin: .1rem 0 0;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.015em;
    text-transform: uppercase;
}
.cta-text { margin: .95rem 0 0; max-width: 27rem; }

.cta-media { position: relative; align-self: end; height: 100%; }
.cta-media img {
    position: relative;
    z-index: 2;
    height: 13.5rem;
    width: 100%;
    object-fit: cover;
    object-position: center 18%;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    margin-bottom: -2rem;
}
.chevron {
    position: absolute;
    z-index: 1;
    left: -2rem;
    top: 50%;
    translate: 0 -50%;
    width: 3rem;
    height: 7.5rem;
    border-right: 2px solid var(--accent);
    border-top: 2px solid var(--accent);
    border-radius: 0 1.5rem 0 0;
    transform: skewX(-10deg);
    opacity: .75;
}
.dots-cta { right: 0; top: -.5rem; width: 4.5rem; height: 4rem; }

/* ---------------------------- 11. Rodapé ------------------- */
.site-footer {
    border-top: 1px solid var(--line-soft);
    background: var(--paper);
}
.footer-shell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
    padding-block: 1.35rem .9rem;
}
.social-row--footer { justify-content: center; }

.footer-contacts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.5rem;
}
.footer-contacts a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-soft);
    font-size: .85rem;
    transition: color .18s ease;
}
.footer-contacts a:hover { color: var(--accent-deep); }
.footer-contacts .icon { width: 1.1rem; height: 1.1rem; color: var(--accent); }

.footer-legal {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem 1.25rem;
    margin: .25rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
}
.footer-credito a {
    color: var(--accent-deep);
    font-weight: 600;
    transition: color .18s ease;
}
.footer-credito a:hover { color: var(--accent); text-decoration: underline; }

/* ------------------------ 13. Páginas de leitura ----------- */
.leitura { padding-block: clamp(1.75rem, 4vw, 3rem) var(--section-y); }

/* Uma coluna por omissao; as colunas de anuncios so entram quando ha
   margem livre a sobrar para elas (ver o @media mais abaixo). */
.leitura-grelha { display: grid; justify-content: center; }
.leitura-conteudo { max-width: 52rem; }
/* Paginas sem colunas de anuncios (a politica, por exemplo): o contentor
   e largo para as colunas caberem, por isso o texto tem de ser centrado a
   mao. Nas que tem grelha, e a propria grelha que o coloca. */
.leitura .shell:not(.leitura-grelha) > .leitura-conteudo { margin-inline: auto; }

/* ------------------------- Espaços publicitários ------------- */
.rail { display: none; }
.anuncio {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-sm);
}
/* Medidas reservadas de antemao: sem isto o texto salta quando o anuncio
   carrega, e o Google penaliza esse salto (CLS). */
.anuncio--fixo {
    width: var(--anuncio-l);
    height: var(--anuncio-a);
    max-width: 100%;
}
.anuncio--fluido {
    width: 100%;
    min-height: 6rem;
    margin: clamp(1.75rem, 3.5vw, 2.5rem) 0 0;
}
.anuncio-marca {
    color: var(--muted);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* Só se vê enquanto não houver conta: marca o espaço durante o trabalho. */
.anuncio:has(.anuncio-marca) {
    background: rgba(18, 22, 29, .015);
    border: 1px dashed var(--line);
}

/* Nas paginas de leitura o contentor alarga para os anuncios caberem nas
   margens do ecra — a coluna de texto mantem sempre os 52rem. */
.leitura .shell { max-width: min(100%, 108rem); }

/* Uma coluna lateral so entra quando ha largura para ela SEM apertar o
   texto: primeiro a da direita, e so em ecras muito largos a da esquerda. */
@media (min-width: 1300px) {
    .leitura-grelha {
        grid-template-columns: minmax(0, 52rem) 300px;
        gap: clamp(1.5rem, 2.5vw, 2.5rem);
        align-items: start;
    }
    .rail--direita { display: grid; gap: 1rem; position: sticky; top: 6rem; }
    /* nos ecras largos o anuncio dentro do texto seria a mais */
    .leitura-conteudo > .anuncio--fluido { display: none; }
}

@media (min-width: 1700px) {
    .leitura-grelha { grid-template-columns: 300px minmax(0, 52rem) 300px; }
    .rail--esquerda { display: grid; gap: 1rem; position: sticky; top: 6rem; }
}

/* Botão de voltar */
.voltar {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    padding: .45rem .95rem .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.voltar:hover {
    border-color: var(--accent);
    color: var(--accent-deep);
    transform: translateX(-2px);
}
.voltar-icon { width: 1rem; height: 1rem; stroke-width: 2; }

.leitura-topo { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.leitura-titulo {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-transform: uppercase;
}
.leitura-titulo::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: .9rem;
    border-radius: 2px;
    background: var(--accent);
}
.leitura-lead {
    margin: 1.35rem 0 0;
    max-width: 34rem;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.75;
}

.leitura-figura {
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: #eceff2;
}
.leitura-figura img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* O corpo do texto e mais estreito que a coluna: linhas longas cansam */
.leitura-corpo { max-width: 40rem; }
.leitura-corpo h2 {
    margin: 2rem 0 .6rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.leitura-corpo h2:first-child { margin-top: 0; }
.leitura-corpo p { margin: 0 0 1.1rem; line-height: 1.85; }
.leitura-corpo em { color: var(--ink); font-style: normal; font-weight: 600; }
.leitura-corpo a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.leitura-corpo a:hover { color: var(--accent); }
.leitura-corpo .lista { margin: 0 0 1.1rem; padding-left: 1.1rem; list-style: disc; }
.leitura-corpo .lista li { margin-bottom: .5rem; line-height: 1.8; }
.leitura-corpo .lista::marker, .leitura-corpo .lista li::marker { color: var(--accent); }
.leitura-corpo .mono { font-family: ui-monospace, Consolas, "Courier New", monospace; }

.leitura-fim {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--line-soft);
}

/* Lista de projectos */
.projectos-lista { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.projecto {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding: 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .18s ease, transform .18s ease;
}
.projecto:hover { border-color: rgba(var(--accent-rgb), .45); transform: translateY(-2px); }
.projecto-figura {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #eceff2;
}
.projecto-figura img { width: 100%; height: 100%; object-fit: cover; }
.projecto-etiqueta {
    margin: 0 0 .3rem;
    color: var(--accent-deep);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.projecto-titulo {
    margin: 0 0 .55rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
}
.projecto-corpo p { margin: 0; line-height: 1.75; }

@media (max-width: 640px) {
    .projecto { grid-template-columns: 1fr; }
    .projecto-figura { aspect-ratio: 16 / 9; }
}

/* Estado "brevemente" — usado pelo media kit enquanto não há dossier */
.brevemente-selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    padding: .4rem .9rem;
    background: rgba(var(--accent-rgb), .07);
    border: 1px solid rgba(var(--accent-rgb), .25);
    border-radius: 999px;
    color: var(--accent-deep);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.brevemente-selo .pulso { background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); }

.brevemente-lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}
.brevemente-item {
    padding: 1.35rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.brevemente-icon { display: block; margin-bottom: .85rem; color: var(--accent); }
.brevemente-icon .icon { width: 1.8rem; height: 1.8rem; stroke-width: 1.4; }
.brevemente-item h2 {
    margin: 0 0 .4rem;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.brevemente-item p { margin: 0; font-size: .88rem; line-height: 1.7; }

/* ---------------------- Aviso de cookies -------------------- */
/* Recusado: os espacos somem em vez de deixarem buracos brancos. */
html.sem-anuncios .anuncio { display: none; }

/* Cartão pequeno no canto, não uma barra a atravessar o ecrã */
.cookies {
    position: fixed;
    z-index: 60;
    left: 1rem;
    bottom: 1rem;
    width: min(21rem, calc(100vw - 2rem));
}
.cookies[hidden] { display: none; }
.cookies-caixa {
    padding: .9rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.cookies-texto {
    margin: 0 0 .75rem;
    color: var(--ink-soft);
    font-size: .78rem;
    line-height: 1.55;
}
.cookies-texto a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; }
.cookies-accoes { display: flex; gap: .5rem; }
.cookies-btn {
    flex: 1;
    min-height: 2rem;
    padding: 0 .7rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.cookies-btn:hover { border-color: var(--ink); color: var(--ink); }
.cookies-btn--sim {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.cookies-btn--sim:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

@media (max-width: 480px) {
    .cookies { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
}

/* Ligação legal no rodapé */
.footer-legal-link {
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .18s ease;
}
.footer-legal-link:hover { color: var(--accent-deep); }

/* -------------------------- 12. Responsivo ----------------- */
@media (max-width: 1100px) {
    .header-shell { grid-template-columns: auto 1fr; }
    /* Sem posicoes fixas, a navegacao (que ocupa as duas colunas) empurrava
       as accoes para uma terceira linha. Fixar as areas mantem o logotipo e
       o botao onde estao, e o menu abre por baixo. */
    .header-shell > .logo { grid-area: 1 / 1; }
    .header-actions      { grid-area: 1 / 2; }
    .main-nav {
        display: none;
        grid-area: 2 / 1 / 3 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: .75rem 1.5rem;
        padding: 1rem 0 .25rem;
        border-top: 1px solid var(--line-soft);
    }
    .main-nav.is-open { display: flex; }
    .menu-toggle { display: block; }
    .header-actions .social-chip { display: none; }

    .hero-shell { grid-template-columns: 1fr; }
    /* A coluna passa a ocupar a largura toda, mas a composicao dos cartoes
       e desenhada para ~35rem: sem limite eles afastavam-se uns dos outros
       e, com o contentor mais baixo, transbordavam por cima. Limitar a
       largura e manter a altura preserva o arranjo do desktop. */
    .hero-visual {
        /* justify-self em vez de margin auto: com margens automaticas o
           item de grelha encolhe ao conteudo, e os cartoes sao absolutos
           — ficaria com largura zero. */
        width: 100%;
        max-width: 36rem;
        justify-self: center;
        min-height: 34rem;
    }
    .metrics-row { grid-template-columns: repeat(2, 1fr); }
    .metrics-redes { grid-template-columns: repeat(2, 1fr); }
    .metrics-estado { grid-column: 1 / -1; justify-self: center; padding-top: .4rem; }
    .metric:nth-child(2) { border-right: 0; }
    .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 1.25rem; }
    .metric:nth-last-child(-n+2) { padding-top: 1.25rem; }

    .about-shell { grid-template-columns: 1fr; }
    .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filter { border-right: 0; border: 1px solid var(--line); border-radius: .8rem; }
    .filter.is-active { border-color: var(--ink); }
    .content-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .brand-grid--modal { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .cta-card { grid-template-columns: minmax(0, 1fr) minmax(0, 13rem); }
    .cta-card .btn { grid-column: 1; }
    .cta-media { grid-column: 2; grid-row: 1 / 4; }
}

@media (max-width: 760px) {
    .header-shell { padding-block: .9rem; }
    .header-actions .btn-gold { display: none; }

    /* Herói compacto no telemóvel: tipos, espaços e botões mais curtos. */
    .hero { padding-block: 1.5rem 1.25rem; }
    .eyebrow { margin-bottom: .8rem; font-size: .62rem; letter-spacing: .16em; }
    .hero-title { font-size: clamp(1.45rem, 6.8vw, 1.95rem); }
    /* a 62px e com line-height .5, a assinatura montava sobre a linha
       de cima — no telemóvel volta a ter altura de linha própria */
    .hero-title .script {
        margin-top: .5rem;
        font-size: 2.3rem;
        line-height: .95;
    }
    .hero-text {
        max-width: none;
        margin-bottom: 1.5rem;
        font-size: .88rem;
        line-height: 1.7;
    }
    .hero-actions { gap: .6rem; }
    .hero-actions .btn {
        min-height: 2.5rem;
        padding: 0 1.15rem;
        gap: .45rem;
        font-size: .64rem;
    }
    .hero-actions .btn-icon { width: .95rem; height: .95rem; }

    .hero-visual { min-height: 26rem; }
    .orbit { bottom: -1.75rem; width: min(28rem, 142%); }
    .card-photo--main { left: 20%; width: min(15.5rem, 58vw); height: 22rem; }
    .card-photo--left { top: 4rem; width: 9rem; height: 15rem; }
    .card-photo--right { top: 3.5rem; width: 8.5rem; height: 14.5rem; }
    .hero-nav { width: 2.5rem; height: 2.5rem; }
    .hero-nav--prev { left: -.35rem; }
    .hero-nav--next { right: -.35rem; }
    .signature { left: 12%; min-width: 13rem; padding: 1rem 1.1rem .8rem; }
    .signature-nome { font-size: 3.4rem; }

    .metrics-row { grid-template-columns: 1fr; }
    /* uma coluna: a dois, o botao de seguir era cortado pela margem */
    .metrics-redes { grid-template-columns: 1fr; }
    .metrics-estado { justify-self: center; padding-right: 0; }
    .metric { border-right: 0; border-bottom: 1px solid var(--line); padding-block: 1rem; }
    .metric:last-child { border-bottom: 0; }
    .metric:nth-child(-n+2), .metric:nth-last-child(-n+2) { padding-block: 1rem; }

    .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand-grid, .brand-grid--modal { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .cta-card { grid-template-columns: 1fr; text-align: left; }
    .cta-media { grid-column: 1; grid-row: auto; justify-self: end; max-width: 13rem; }
    .chevron { display: none; }

    .cta { padding-bottom: 2.5rem; }
    .footer-shell {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: .8rem;
        padding-block: 1.25rem .75rem;
    }
    .footer-contacts { justify-content: center; gap: .35rem 1.25rem; }
    .footer-legal { gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}