/* =====================================================
   COMUTEC — Estilos da Página Sobre Nós
   Ficheiro: css/sobre.css
===================================================== */

:root {
    --cor-fundo:            #020f1a;
    --cor-fundo-cartao:     #071e33;
    --cor-fundo-cartao-2:   #0a2540;
    --cor-primaria:         #43c463;
    --cor-secundaria:       #1a6fca;
    --cor-secundaria-clara: #3a9aff;
    --gradiente-principal:  linear-gradient(135deg, var(--cor-secundaria), var(--cor-primaria));
    --cor-texto:            #f0f9ff;
    --cor-texto-suave:      #7bafc8;
    --cor-borda:            rgba(67,196,99,0.18);
    --cor-borda-hover:      rgba(67,196,99,0.55);
    --fonte-titulo: 'Exo 2', sans-serif;
    --fonte-corpo:  'Inter', sans-serif;
    --espaco-sm:  8px;
    --espaco-md:  16px;
    --espaco-lg:  24px;
    --espaco-xl:  40px;
    --espaco-2xl: 80px;
    --raio-md:  12px;
    --raio-lg:  20px;
    --raio-full: 9999px;
    --trans-rapida: 0.2s ease;
    --trans-normal: 0.35s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--cor-fundo); color:var(--cor-texto); font-family:var(--fonte-corpo); line-height:1.6; }
a   { text-decoration:none; color:inherit; }
ul  { list-style:none; }

h1,h2,h3,h4 { font-family:var(--fonte-titulo); font-weight:700; line-height:1.2; color:var(--cor-texto); }
h1 { font-size:clamp(2rem,5vw,3.2rem); }
h2 { font-size:clamp(1.6rem,3vw,2.4rem); }

.texto-gradiente {
    background:var(--gradiente-principal);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.contentor { width:100%; max-width:1100px; margin:0 auto; padding:0 var(--espaco-xl); }
.etiqueta-seccao { display:inline-block; font-size:0.75rem; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cor-primaria); margin-bottom:var(--espaco-md); }
.cabecalho-seccao { text-align:center; margin-bottom:var(--espaco-2xl); }
.cabecalho-seccao h2 { margin-bottom:var(--espaco-md); }
.cabecalho-seccao p  { color:var(--cor-texto-suave); max-width:600px; margin:0 auto; font-size:1.05rem; }

/* ── Fundo decorativo ── */
.fundo-decorativo { position:fixed; inset:0; pointer-events:none; z-index:0; }
.circulo { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.07; }
.circulo--1 { width:500px; height:500px; background:var(--cor-primaria); top:-100px; right:-100px; }
.circulo--2 { width:400px; height:400px; background:var(--cor-secundaria); bottom:-100px; left:-100px; }

/* ── Logótipo ── */
.logotipo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cor-texto); }
.logotipo__texto { display:flex; flex-direction:column; line-height:1.1; }
.logotipo__nome { font-family:var(--fonte-titulo); font-size:1.3rem; font-weight:800; }
.nome-comu { color:var(--cor-secundaria-clara); }
.nome-tec  { color:var(--cor-primaria); }
.logotipo__slogan { font-size:0.57rem; color:var(--cor-texto-suave); letter-spacing:0.8px; text-transform:uppercase; }

/* ── Botões ── */
.botao { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:var(--raio-md); font-size:0.95rem; font-weight:600; border:2px solid transparent; transition:all var(--trans-normal); white-space:nowrap; cursor:pointer; font-family:var(--fonte-corpo); }
.botao--primario { background:var(--gradiente-principal); color:var(--cor-texto); }
.botao--primario:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(67,196,99,0.35); filter:brightness(1.1); }
.botao--contorno { background:transparent; color:var(--cor-texto); border-color:rgba(67,196,99,0.4); }
.botao--contorno:hover { background:rgba(67,196,99,0.08); border-color:var(--cor-primaria); color:var(--cor-primaria); }
.botao--grande { padding:14px 32px; font-size:1rem; }

/* ── Cabeçalho da página ── */
.cabecalho-pagina {
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px var(--espaco-xl);
    background:rgba(2,15,26,0.95); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--cor-borda);
}
.navegacao { display:flex; gap:var(--espaco-xl); }
.navegacao__link { color:var(--cor-texto-suave); font-size:0.9rem; font-weight:500; transition:color var(--trans-rapida); }
.navegacao__link:hover, .navegacao__link.activo { color:var(--cor-primaria); }

/* ── Herói da página ── */
.pagina-heroi {
    position:relative; z-index:1;
    padding:var(--espaco-2xl) 0;
    background:radial-gradient(ellipse at top, #071e33 0%, #020f1a 70%);
    text-align:center;
    border-bottom:1px solid var(--cor-borda);
}
.pagina-heroi h1 { margin:var(--espaco-md) 0 var(--espaco-lg); }
.pagina-heroi p  { color:var(--cor-texto-suave); max-width:650px; margin:0 auto; font-size:1.1rem; }

/* ── Missão / Visão / Valores ── */
.mvv { padding:var(--espaco-2xl) 0; position:relative; z-index:1; }
.grelha-mvv { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--espaco-lg); }
.cartao-mvv {
    background:var(--cor-fundo-cartao);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-lg);
    padding:var(--espaco-xl) var(--espaco-lg);
    transition:all var(--trans-normal);
}
.cartao-mvv:hover { border-color:var(--cor-borda-hover); transform:translateY(-4px); box-shadow:0 0 30px rgba(67,196,99,0.1); }
.cartao-mvv--destaque {
    background:linear-gradient(135deg, rgba(26,111,202,0.15), rgba(67,196,99,0.1));
    border-color:rgba(67,196,99,0.4);
}
.cartao-mvv__icone {
    width:56px; height:56px;
    background:rgba(67,196,99,0.1);
    border-radius:var(--raio-md);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:var(--espaco-lg);
}
.cartao-mvv__icone svg { width:28px; height:28px; stroke:var(--cor-primaria); }
.cartao-mvv h3 { font-size:1.2rem; margin-bottom:var(--espaco-md); }
.cartao-mvv p  { color:var(--cor-texto-suave); font-size:0.92rem; line-height:1.7; }

/* ── História + Timeline ── */
.historia {
    padding:var(--espaco-2xl) 0;
    background:rgba(0,0,0,0.2);
    position:relative; z-index:1;
}
.historia__layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--espaco-2xl); align-items:start; }
.historia__texto h2 { margin:var(--espaco-md) 0 var(--espaco-lg); }
.historia__texto p { color:var(--cor-texto-suave); margin-bottom:var(--espaco-md); line-height:1.8; }
.historia__numeros { display:flex; gap:var(--espaco-xl); margin-top:var(--espaco-xl); flex-wrap:wrap; }
.historia__num { display:flex; flex-direction:column; }
.historia__num-valor { font-family:var(--fonte-titulo); font-size:2rem; font-weight:800; background:var(--gradiente-principal); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.historia__num-label { font-size:0.78rem; color:var(--cor-texto-suave); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }

/* Timeline */
.historia__timeline { display:flex; flex-direction:column; gap:0; }
.timeline-item { display:flex; gap:var(--espaco-lg); position:relative; padding-bottom:var(--espaco-xl); }
.timeline-item:last-child { padding-bottom:0; }

/* Linha vertical */
.timeline-item::before {
    content:'';
    position:absolute;
    left:48px; top:36px; bottom:0;
    width:2px;
    background:var(--cor-borda);
}
.timeline-item:last-child::before { display:none; }

.timeline-item__ano {
    flex-shrink:0;
    width:96px; height:36px;
    background:rgba(67,196,99,0.1);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-full);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--fonte-titulo);
    font-size:0.85rem;
    font-weight:700;
    color:var(--cor-primaria);
    position:relative; z-index:1;
}
.timeline-item__conteudo { padding-top:6px; }
.timeline-item__conteudo h4 { font-size:1rem; font-weight:700; margin-bottom:6px; }
.timeline-item__conteudo p  { color:var(--cor-texto-suave); font-size:0.88rem; line-height:1.6; }

/* ── Equipa ── */
.equipa { padding:var(--espaco-2xl) 0; position:relative; z-index:1; }
.grelha-equipa { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--espaco-lg); }
.cartao-membro {
    background:var(--cor-fundo-cartao);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-lg);
    padding:var(--espaco-xl) var(--espaco-lg);
    text-align:center;
    transition:all var(--trans-normal);
}
.cartao-membro:hover { border-color:var(--cor-borda-hover); transform:translateY(-4px); box-shadow:0 0 30px rgba(67,196,99,0.1); }
.cartao-membro__avatar {
    width:80px; height:80px;
    border-radius:50%;
    background:rgba(67,196,99,0.1);
    border:2px solid var(--cor-borda);
    display:flex; align-items:center; justify-content:center;
    margin:0 auto var(--espaco-lg);
    transition:border-color var(--trans-normal);
}
.cartao-membro:hover .cartao-membro__avatar { border-color:var(--cor-primaria); }
.cartao-membro__avatar svg { width:36px; height:36px; stroke:var(--cor-primaria); }
.cartao-membro h4 { font-size:1rem; margin-bottom:4px; }
.cartao-membro__cargo { font-size:0.8rem; color:var(--cor-primaria); font-weight:600; margin-bottom:var(--espaco-md); }
.cartao-membro__desc  { font-size:0.85rem; color:var(--cor-texto-suave); line-height:1.6; }

/* ── CTA ── */
.cta-sobre { padding:var(--espaco-2xl) 0; position:relative; z-index:1; }
.cta-sobre__conteudo { text-align:center; max-width:700px; margin:0 auto; }
.cta-sobre__conteudo h2 { margin-bottom:var(--espaco-md); }
.cta-sobre__conteudo p  { color:var(--cor-texto-suave); font-size:1.05rem; margin-bottom:var(--espaco-xl); }
.cta-sobre__acoes { display:flex; gap:var(--espaco-md); justify-content:center; flex-wrap:wrap; }

/* ── Rodapé ── */
.rodape { background:var(--cor-fundo-cartao); border-top:1px solid var(--cor-borda); padding:var(--espaco-lg) 0; position:relative; z-index:1; }
.rodape__base { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--espaco-md); }
.rodape__base p { font-size:0.82rem; color:var(--cor-texto-suave); }
.link-voltar-inicio { font-size:0.85rem; color:var(--cor-primaria); font-weight:600; transition:opacity var(--trans-rapida); }
.link-voltar-inicio:hover { opacity:0.8; }

/* ── Responsividade ── */
@media (max-width: 900px) {
    .grelha-mvv { grid-template-columns:1fr; }
    .historia__layout { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
    .cabecalho-pagina .navegacao,
    .cabecalho-pagina .botao { display:none; }
    .cabecalho-pagina { padding:12px var(--espaco-lg); }
    .contentor { padding:0 var(--espaco-lg); }
    .cta-sobre__acoes { flex-direction:column; align-items:center; }
    .rodape__base { flex-direction:column; text-align:center; }
}