/* codex.pt: valores só de tokens.css. */

/* Cabeçalho */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
}
.logo img { width: 150px; height: auto; }
@media (min-width: 900px) { .logo img { width: 200px; } }

/* Abertura: o elemento dominante da página */
.hero {
  display: grid;
  gap: var(--space-12);
  padding-block: var(--space-16) var(--space-24);
}
.hero .display { max-width: 15ch; }
.hero .lead { max-width: 40em; margin-top: var(--space-8); }
.bars { width: 94px; height: auto; fill: var(--accent); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-16); }
  .bars { width: 188px; margin-top: var(--space-4); }
}

/* Secções: label, título (space-2) e conteúdo (space-8) */
.approach, .accelerators, .companies { padding-block: var(--space-16); }
.approach .h2, .accelerators .h2, .companies .h2 { margin-bottom: var(--space-8); }

/* Q.01 Como gerimos: título à esquerda, texto à direita */
.approach-text { max-width: 40em; }
.approach-text p + p { margin-top: var(--space-6); }
@media (min-width: 900px) {
  .approach {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--space-16);
    align-items: start;
  }
  .approach .section-label { grid-column: 1; grid-row: 1; }
  .approach .h2 { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .approach-text { grid-column: 2; grid-row: 1 / span 2; }
}

/* Q.02 Automatizações: uma linha por área, separadas por linhas finas */
.area-list { border-top: 1px solid var(--line); }
.area {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) {
  .area { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--space-16); align-items: baseline; }
}

/* Q.03 Participadas: logótipo oficial, à mesma altura ótica, alinhado à esquerda */
.company-list { list-style: none; border-top: 1px solid var(--line); }
.company {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--line);
}
.co-logo img { width: var(--logo-w); height: auto; }
/* Larguras na proporção do template de apresentações (WISOUT 300, RESPOSTÁGIL 380, Tips4y 300). */
.co-wisout { --logo-w: 135px; }
.co-respostagil { --logo-w: 171px; }
.co-tips4y { --logo-w: 135px; }
@media (prefers-color-scheme: dark) {
  .co-wisout { --logo-w: 131px; } /* a versão branca não tem o ®: mesma altura das letras */
}
.company-link { justify-self: start; }
@media (min-width: 900px) {
  .company {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
    gap: var(--space-8);
    align-items: start;
  }
  .co-wisout { --logo-w: 180px; }
  .co-respostagil { --logo-w: 228px; }
  .co-tips4y { --logo-w: 180px; }
  .company-link { justify-self: end; }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  .co-wisout { --logo-w: 175px; }
}

/* Q.04 Novos negócios e rodapé: a única massa de cor forte da página */
.contact {
  --band-text: var(--text-inverse);
  --band-muted: var(--brand-grey);
  background: var(--surface-inverse);
  color: var(--band-text);
  margin-top: var(--space-16);
  padding-block: var(--space-16) var(--space-12);
}
@media (prefers-color-scheme: dark) {
  .contact { --band-muted: var(--brand-teal); }
}
.contact .section-label { color: var(--band-muted); }
.contact a { color: var(--band-text); }
.contact :focus-visible { outline-color: var(--band-text); }
.contact-text { max-width: 40em; margin-top: var(--space-8); }
.contact-mail { margin-top: var(--space-8); overflow-wrap: anywhere; }
.legal {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--band-muted);
  color: var(--band-muted);
}