/*
Descrição: Estilos da página "Sobre Nós" — o hero em duas colunas (texto
           + foto real da equipa, como o hero da página inicial), a linha
           cronológica da secção "A nossa história" (".timeline*": linha
           central com nós alternados no ecrã grande, que colapsa para
           uma lista com a linha à esquerda em ecrãs pequenos), a grelha
           de fotos da equipa (".about-team*": cada foto recortada sobre
           um fundo com brilho radial), os números de destaque e a
           chamada para ação final. A grelha "Áreas de especialização"
           reutiliza as classes ".service-why*" já definidas em
           servicos-detalhe.css (cartão com ícone + anel de luz), por
           isso esta página também importa essa folha de estilos.
           Estilos partilhados por todo o site ficam em geral.css.
Autor: Emanuel Borges
Versão: 2.1.0
Última alteração: 2026-10-06
*/

/* ---------- Introdução (hero com foto da equipa) ---------- */

/* Duas colunas, como o hero da página inicial e o das páginas de
   serviço: texto à esquerda, foto real à direita. */
.about-hero {
    padding-top: 160px;
    padding-bottom: 150px;
}

.about-hero .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 56px;
}

.about-hero-content {
    flex: 1 1 420px;
    max-width: 560px;
}

.about-hero-media {
    flex: 1 1 420px;
    max-width: 560px;
}

.about-hero h1 {
    font-size: clamp(34px, 5vw, 48px);
    margin: 0 0 18px;
}

.about-hero-intro {
    font-size: 18px;
    color: var(--color-text-muted);
    margin: 0;
}

/* Fundo "tech" animado atrás da foto recortada da equipa: grelha a
   deslizar devagar, três manchas de luz a flutuar tipo lava lamp e
   partículas a subir como pacotes de dados — tudo com a mesma paleta
   azul/ciano da marca. Mantém a mesma proporção/moldura que a foto
   antiga tinha, só muda o que está lá dentro. */
.about-hero-tech {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #060d18, #0b1c30 60%, #0c2740);
}

.about-hero-tech-grid {
    position: absolute;
    inset: -20px;
    background-image:
        linear-gradient(rgba(79, 195, 247, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 195, 247, 0.12) 1px, transparent 1px);
    background-size: 36px 36px;
    animation: tech-grid-pan 18s linear infinite;
}

.about-hero-tech-blob {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.55;
}

.about-hero-tech-blob-a {
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(79, 195, 247, 0.65), transparent 70%);
    animation: tech-blob-drift-a 13s ease-in-out infinite;
}

.about-hero-tech-blob-b {
    bottom: -14%;
    right: -6%;
    background: radial-gradient(circle, rgba(21, 101, 192, 0.6), transparent 70%);
    animation: tech-blob-drift-b 17s ease-in-out infinite;
}

.about-hero-tech-blob-c {
    bottom: 10%;
    left: 20%;
    width: 32%;
    padding-bottom: 32%;
    background: radial-gradient(circle, rgba(120, 220, 255, 0.5), transparent 70%);
    animation: tech-blob-drift-c 10s ease-in-out infinite;
}

/* Partículas a subir como "pacotes de dados" — cada "i" começa num ponto
   horizontal diferente (nth-child) e tem um atraso diferente, para não
   subirem todas ao mesmo tempo em fila. */
.about-hero-tech-particles {
    position: absolute;
    inset: 0;
}

.about-hero-tech-particles i {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #9be2ff;
    box-shadow: 0 0 6px 1px rgba(155, 226, 255, 0.8);
    opacity: 0;
    animation: tech-particle-rise 7s ease-in infinite;
}

.about-hero-tech-particles i:nth-child(1)  { left: 4%;  animation-delay: 0s;    }
.about-hero-tech-particles i:nth-child(2)  { left: 12%; animation-delay: 1.4s;  }
.about-hero-tech-particles i:nth-child(3)  { left: 21%; animation-delay: 2.8s;  }
.about-hero-tech-particles i:nth-child(4)  { left: 33%; animation-delay: 0.6s;  }
.about-hero-tech-particles i:nth-child(5)  { left: 45%; animation-delay: 3.6s;  }
.about-hero-tech-particles i:nth-child(6)  { left: 57%; animation-delay: 1.9s;  }
.about-hero-tech-particles i:nth-child(7)  { left: 66%; animation-delay: 4.4s;  }
.about-hero-tech-particles i:nth-child(8)  { left: 74%; animation-delay: 2.3s;  }
.about-hero-tech-particles i:nth-child(9)  { left: 82%; animation-delay: 5.1s;  }
.about-hero-tech-particles i:nth-child(10) { left: 90%; animation-delay: 0.9s;  }
.about-hero-tech-particles i:nth-child(11) { left: 58%; animation-delay: 6s;    }
.about-hero-tech-particles i:nth-child(12) { left: 26%; animation-delay: 5.6s;  }

/* Ícones dos serviços, espalhados na faixa de parede livre por cima das
   cabeças (a única zona que a foto recortada nunca tapa, seja qual for o
   ecrã). Cada um "respira" (sobe/desce devagar) com uma duração e atraso
   próprios, para não ficarem todos sincronizados. */
.about-hero-tech-icons {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about-hero-tech-icon {
    position: absolute;
    width: 34px;
    height: 34px;
    color: #4fc3f7;
    filter: drop-shadow(0 0 6px rgba(79, 195, 247, 0.65));
    opacity: 0.85;
    animation: tech-icon-float 6s ease-in-out infinite;
}

.about-hero-tech-icon-cloud  { top: 6%; left: 3%;  width: 46px; height: 29px; animation-duration: 7s;   animation-delay: 0s;   }
.about-hero-tech-icon-code   { top: 7%; left: 20%; animation-duration: 6.5s; animation-delay: 1.1s; }
.about-hero-tech-icon-cable  { top: 4%; left: 37%; width: 26px; height: 32px; animation-duration: 6.8s; animation-delay: 3s;   }
.about-hero-tech-icon-window { top: 5%; left: 54%; width: 28px; height: 28px; animation-duration: 8s;   animation-delay: 2.3s; }
.about-hero-tech-icon-list   { top: 4%; left: 71%; width: 26px; height: 30px; animation-duration: 7.4s; animation-delay: 0.6s; }
.about-hero-tech-icon-gear   { top: 5%; left: 87%; width: 32px; height: 32px; animation-duration: 9s;   animation-delay: 1.8s; }

.about-hero-tech-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes tech-icon-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes tech-grid-pan {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 36px 36px, 36px 36px; }
}

@keyframes tech-blob-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(6%, 8%) scale(1.12); }
}

@keyframes tech-blob-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-7%, -6%) scale(1.15); }
}

@keyframes tech-blob-drift-c {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(5%, -10%) scale(0.9); }
}

@keyframes tech-particle-rise {
    0%   { opacity: 0; transform: translateY(0); }
    10%  { opacity: 1; }
    90%  { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(-320px); }
}

@media (prefers-reduced-motion: reduce) {
    .about-hero-tech-grid,
    .about-hero-tech-blob,
    .about-hero-tech-particles i,
    .about-hero-tech-icon {
        animation: none;
    }
}

@media (max-width: 700px) {
    .about-hero {
        padding-top: 110px;
        padding-bottom: 90px;
    }
}

/* ---------- A nossa história (linha cronológica) ---------- */

.about-history {
    background-color: var(--color-bg-alt);
    padding-top: 140px;
    padding-bottom: 150px;
}

@media (prefers-color-scheme: dark) {
    .about-history {
        background-color: var(--color-bg);
    }
}

.about-history .section-heading {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Lista sem marcadores — a semântica de "sequência ordenada" de um "<ol>"
   é o que interessa (é uma história com início, meio e fim), não os
   números automáticos, que a linha e os nós já substituem visualmente. */
.timeline {
    position: relative;
    list-style: none;
    margin: 64px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* A linha vertical fica centrada no ecrã grande (nós alternados dos dois
   lados) e passa para a esquerda em ecrã pequeno (ver media query), onde
   os cartões ficam todos do mesmo lado. */
.timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 2px;
    background: linear-gradient(var(--color-border), var(--color-primary-light), var(--color-border));
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: start;
    gap: 0 32px;
}

.timeline-dot-col {
    grid-column: 2;
    display: flex;
    justify-content: center;
    padding-top: 6px;
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-primary-light);
    box-shadow: 0 0 0 6px var(--color-bg-alt), 0 0 16px color-mix(in srgb, var(--color-primary-light) 60%, transparent);
}

@media (prefers-color-scheme: dark) {
    .timeline-dot {
        box-shadow: 0 0 0 6px var(--color-bg), 0 0 16px color-mix(in srgb, var(--color-primary-light) 60%, transparent);
    }
}

.timeline-card {
    grid-column: 1;
    padding: 24px 28px;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Itens pares ficam do lado direito da linha — o único elemento presente
   nesse lado é o cartão, por isso basta mudar a coluna onde ele cai; o
   grid deixa a coluna 1 vazia sozinho, sem precisar de outro elemento. */
.timeline-item:nth-child(even) .timeline-card {
    grid-column: 3;
}

.timeline-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-light);
    margin-bottom: 8px;
}

.timeline-card h3 {
    font-size: 19px;
    margin: 0 0 10px;
}

.timeline-card p {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 760px) {
    .about-history {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .timeline {
        margin-top: 44px;
        gap: 32px;
    }

    .timeline::before {
        left: 7px;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        grid-template-columns: 16px 1fr;
        gap: 0 20px;
    }

    .timeline-dot-col,
    .timeline-item:nth-child(even) .timeline-dot-col {
        grid-column: 1;
    }

    .timeline-card,
    .timeline-item:nth-child(even) .timeline-card {
        grid-column: 2;
    }
}

/* ---------- A nossa equipa ---------- */

.about-team {
    padding-top: 150px;
    padding-bottom: 60px;
}

.about-team .section-heading {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.about-team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.about-team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
}

/* Fundo com brilho radial atrás da foto recortada (mesma ideia do brilho
   usado no mostruário "Áreas de atuação" da página inicial), para as
   fotos com fundo transparente não ficarem "soltas" sobre o fundo da
   secção. */
.about-team-photo {
    position: relative;
    width: 160px;
    height: 180px;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--color-bg-alt);
    background-image: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--color-primary-light) 28%, transparent), transparent 70%);
    border: 1px solid var(--color-border);
}

/* As fotos recortadas (".../...-cutout.webp") têm proporções diferentes
   entre si (cada pessoa foi fotografada de forma ligeiramente distinta)
   — "object-fit: cover" com a imagem a preencher a caixa toda (em vez de
   "contain" a encolher pela largura) e "object-position: top" garantem
   que a cabeça/ombros fica sempre visível, por mais alta que a foto
   original seja, cortando antes a parte de baixo (tronco/braços). */
.about-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.about-team-name {
    margin-top: 14px;
    font-weight: bold;
    font-size: 15px;
}

@media (max-width: 700px) {
    .about-team {
        padding-top: 90px;
        padding-bottom: 40px;
    }

    .about-team-grid {
        gap: 28px;
    }

    .about-team-member {
        width: 130px;
    }

    .about-team-photo {
        width: 130px;
        height: 150px;
    }
}

/* ---------- Números em destaque ---------- */

.about-stats {
    padding-top: 40px;
    padding-bottom: 140px;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 32px;
    max-width: 760px;
    margin: 0 auto;
}

.about-stat {
    text-align: center;
}

.about-stat-number {
    display: block;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    color: var(--color-primary-light);
    line-height: 1.1;
}

.about-stat-label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--color-text-muted);
}

@media (max-width: 700px) {
    .about-stats {
        padding-top: 30px;
        padding-bottom: 80px;
    }
}

/* ---------- Áreas de especialização ---------- */

.about-expertise {
    padding-top: 80px;
    padding-bottom: 220px;
}

@media (max-width: 700px) {
    .about-expertise {
        padding-top: 50px;
        padding-bottom: 130px;
    }
}

/* ---------- Chamada para ação final ---------- */

.about-cta {
    background-color: var(--color-bg-alt);
    text-align: center;
    padding-top: 120px;
    padding-bottom: 120px;
}

@media (prefers-color-scheme: dark) {
    .about-cta {
        background-color: var(--color-bg);
    }
}

.about-cta .container {
    max-width: 560px;
}

.about-cta h2 {
    font-size: clamp(26px, 4vw, 34px);
    margin: 0 0 14px;
}

.about-cta p {
    color: var(--color-text-muted);
    margin: 0 0 32px;
}

@media (max-width: 700px) {
    .about-cta {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}