/*====================================================================
  SOBRE NÓS — sobrenos.css
  Estilos específicos desta página. Header, footer, botões e tokens
  gerais vêm de style.css.
====================================================================*/

/*--------------------------PAGE HERO-----------------*/
.page-hero {
  position: relative;
  padding-top: calc(var(--total-header-h) + 48px);
  padding-bottom: 64px;
  background: linear-gradient(175deg, var(--teal-900), #0d3c3e);
  overflow: hidden;
}

/* Fundo do page-hero: fallback SVG + vídeo opcional (mesma lógica do hero principal) */
.page-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-hero-media .hero-fallback { position: absolute; inset: 0; opacity: 0.55; }
.page-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.page-hero-video.is-ready { opacity: 1; }
.page-hero-content { position: relative; z-index: 1; max-width: 46ch; }
.page-hero-content h1 {
  color: var(--white);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-top: 10px;
}
.page-hero-content p {
  color: rgba(255,255,255,0.72);
  margin-top: var(--sp-2);
  font-size: 1.05rem;
}

/*--------------------------HISTORIA / TIMELINE-----------------*/
.historia-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}
@media (min-width: 960px) {
  .historia-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-12); }
}

.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--teal-line);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--sp-4);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -28px; top: 4px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
.timeline-item strong { display: block; font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 4px; }
.timeline-item p { color: var(--ink-soft); font-size: 0.95rem; max-width: 48ch; }

/*--------------------------MISSAO VISAO VALORES-----------------*/
.mvv-grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 860px) { .mvv-grid { grid-template-columns: repeat(3, 1fr); } }

.mvv-card {
  padding: var(--sp-4);
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 350ms var(--ease), border-color 350ms var(--ease);
}
.mvv-card:hover { transform: translateY(-6px); border-color: var(--gold-500); }
.mvv-index {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--sp-2);
}
.mvv-card p { color: rgba(255,255,255,0.82); font-size: 0.98rem; }
.mvv-card p + .mvv-list { margin-top: var(--sp-2); }
.mvv-list {
  display: grid;
  gap: 6px;
}
.mvv-list li {
  position: relative;
  padding-left: 16px;
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
}
.mvv-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--gold-500);
}

/*--------------------------EQUIPE-----------------*/
.equipe-grid {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 720px)  { .equipe-grid { grid-template-columns: repeat(4, 1fr); } }

.equipe-card {
  text-align: center;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-elevated);
  transition: transform 350ms var(--ease);
}
.equipe-card:hover { transform: translateY(-6px); }
.equipe-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto var(--sp-2);
  background: linear-gradient(135deg, var(--teal-600), var(--teal-900));
  position: relative;
}
.equipe-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed rgba(227,170,62,0.5);
}
.equipe-card strong { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.equipe-card span { font-size: 0.82rem; color: var(--ink-soft); }