/* ==========================================================================
   Página Sobre (Entity Home). Usa os tokens de styles.css e componentes
   de curso.css (localização, aviso, chamada final).
   ========================================================================== */

/* Abertura -------------------------------------------------------------- */

.about-hero { padding-block: 40px 0; overflow: hidden; }
.about-hero-grid { display: grid; gap: 40px; align-items: center; }
.about-hero-content { display: grid; gap: 22px; justify-items: start; }
.about-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.75rem, 1.8rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Frase de definição da entidade: é o trecho que buscadores e IAs mais citam. */
.entity-lead {
  max-width: 640px;
  padding-left: 20px;
  border-left: 4px solid var(--yellow);
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--muted-on-dark);
}
.entity-lead strong { color: var(--text-on-dark); font-weight: 500; }
.about-hero-visual { position: relative; display: grid; place-items: center; isolation: isolate; }
.about-hero-visual::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 1px solid var(--border-accent);
  transform: rotate(45deg);
  z-index: -1;
}
.about-hero-visual img { width: min(400px, 80%); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45)); }

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 16px;
  margin-top: 48px;
  padding-block: 32px;
  border-top: 1px solid var(--divider-dark);
}

@media (min-width: 768px) { .about-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .about-hero { padding-top: 64px; }
  .about-hero-grid { grid-template-columns: 7fr 5fr; gap: var(--gap-lg); }
  .about-hero-visual img { width: 100%; max-width: 420px; }
}

/* Quem somos ------------------------------------------------------------ */

.story-grid { display: grid; gap: 40px; }
.story-content .section-heading { margin-bottom: 28px; }
.story-text { display: grid; gap: 18px; max-width: 64ch; font-size: 1.0625rem; line-height: 1.75; color: #2A2A2E; }
.story-text p:first-child::first-letter {
  float: left;
  margin: 6px 12px 0 0;
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 800;
  line-height: .8;
  color: var(--text-on-light);
}
.story-media img { width: 100%; aspect-ratio: .8; object-fit: cover; border-bottom: 6px solid var(--yellow); }
.story-media figcaption { margin-top: 10px; font-size: .8125rem; color: var(--muted-on-light); }

@media (min-width: 1024px) { .story-grid { grid-template-columns: 7fr 5fr; gap: var(--gap-lg); align-items: center; } }

/* Títulos com texto de apoio ao lado ------------------------------------ */

.split-title { display: grid; gap: 20px; }
.split-lead { max-width: 440px; color: var(--muted-on-light); }

/* Ficha institucional --------------------------------------------------- */

.fact-sheet { display: grid; gap: 12px; }
.fact-row {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--bg-dark);
}
.fact-row dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-on-light);
}
.fact-row dt .icon { color: var(--text-on-light); }
.fact-row dd { font-size: 1.0625rem; font-weight: 500; line-height: 1.5; }
.fact-row address { font-style: normal; }
.fact-row a { color: var(--text-on-light); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.fact-note { margin-top: 16px; font-size: .875rem; color: var(--muted-on-light); }

@media (min-width: 768px) {
  .fact-sheet { grid-template-columns: repeat(2, 1fr); }
  .fact-row { grid-template-columns: 170px 1fr; align-items: baseline; gap: 16px; }
  .fact-row--wide { grid-column: 1 / -1; }
}

/* Propósito ------------------------------------------------------------- */

.purpose-grid { display: grid; gap: var(--gap); }
.purpose-card { display: grid; gap: 16px; align-content: start; padding: 36px 32px; border: 1px solid var(--border-accent); }
.purpose-card p { color: var(--muted-on-dark); font-size: 1.0625rem; }
.purpose-card .icon-tile { margin-bottom: 0; }

.values-title {
  margin: 56px 0 24px;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
}
.values-list { display: grid; gap: var(--gap); }
.values-list li { display: grid; gap: 8px; padding-top: 18px; border-top: 3px solid var(--yellow); }
.values-list strong { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.values-list span { color: var(--muted-on-dark); }

@media (min-width: 768px) {
  .purpose-grid { grid-template-columns: repeat(2, 1fr); }
  .values-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { .values-list { grid-template-columns: repeat(4, 1fr); } }

/* História -------------------------------------------------------------- */

.history-grid { display: grid; gap: 40px; }
.history-grid .section-heading { margin-bottom: 0; align-content: start; }
.history { display: grid; }
.history li { position: relative; display: grid; gap: 6px; padding: 0 0 36px 36px; border-left: 2px solid var(--border-light); }
.history li:last-child { padding-bottom: 0; border-left-color: transparent; }
.history li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--bg-light);
  border: 3px solid var(--bg-dark);
}
.history-now::before { background: var(--yellow) !important; border-color: var(--bg-dark) !important; }
.history-date { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-light); }
.history-title { font-family: var(--font-heading); font-size: 1.625rem; font-weight: 700; line-height: 1.15; }
.history li > p:last-child { color: var(--muted-on-light); }

@media (min-width: 1024px) {
  .history-grid { grid-template-columns: 5fr 7fr; gap: var(--gap-lg); }
  .history-grid .section-heading { position: sticky; top: 24px; }
}

/* Estrutura ------------------------------------------------------------- */

.facility-grid { display: grid; gap: var(--gap); }
.facility-card { display: grid; grid-template-rows: auto 1fr; background: var(--bg-light); }
.facility-card img { width: 100%; aspect-ratio: 1.3; object-fit: cover; }
.facility-body { display: grid; gap: 10px; align-content: start; padding: 22px 22px 26px; }
.facility-body p { color: var(--muted-on-light); font-size: .9375rem; }

@media (min-width: 640px) { .facility-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .facility-grid { grid-template-columns: repeat(4, 1fr); } }

/* Equipe ---------------------------------------------------------------- */

.leader { display: grid; gap: 28px; padding-bottom: 48px; border-bottom: 1px solid var(--divider-dark); }
.leader + .leader { padding-top: 48px; }
.leader img { width: 100%; max-width: 360px; aspect-ratio: .85; object-fit: cover; border-bottom: 4px solid var(--yellow); }
.leader-body { display: grid; gap: 14px; align-content: center; }
.leader-body > p:not(.leader-role) { color: var(--muted-on-dark); font-size: 1.0625rem; max-width: 62ch; }
.leader-role { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
.leader-name { font-family: var(--font-heading); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: .02em; }
.leader-quote { margin-top: 8px; padding-left: 20px; border-left: 4px solid var(--yellow); }
.leader-quote p { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; line-height: 1.3; }

.team-subtitle { margin: 48px 0 28px; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.team-cred { font-size: .8125rem; color: var(--muted-on-dark); }

@media (min-width: 768px) { .leader { grid-template-columns: 320px 1fr; gap: 48px; } }

/* Credenciais ----------------------------------------------------------- */

.cred-grid { display: grid; gap: 40px; }
.cred-grid .section-heading { margin-bottom: 0; align-content: start; }
.cred-list { display: grid; gap: 16px; }
.cred-list li { display: flex; gap: 18px; align-items: flex-start; padding: 22px; background: #FFFFFF; border: 1px solid var(--border-light); }
.cred-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; background: var(--bg-dark); color: var(--yellow); font-size: 1.375rem; }
.cred-list h3 { font-family: var(--font-heading); font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; }
.cred-list p { margin-top: 6px; color: var(--muted-on-light); }

@media (min-width: 1024px) { .cred-grid { grid-template-columns: 5fr 7fr; gap: var(--gap-lg); } }

/* Canais oficiais ------------------------------------------------------- */

.channels-grid { display: grid; gap: 40px; }
.channels-grid .section-heading { margin-bottom: 0; align-content: start; }
.channel-list { display: grid; gap: 10px; }
.channel-list a, .channel-static {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 14px 20px;
  border: 1px solid var(--border-accent);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}
.channel-list a:hover { border-color: var(--yellow); background: var(--bg-panel); }
.channel-list .icon { width: 28px; height: 28px; color: var(--yellow); }
.channel-list a > span, .channel-static > span { display: grid; }
.channel-name { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-dark); }
.channel-handle { font-size: 1.0625rem; font-weight: 500; color: var(--text-on-dark); }
.channel-pending .channel-static { border-style: dashed; }
.channels-grid .warning { margin-top: 20px; }

@media (min-width: 1024px) { .channels-grid { grid-template-columns: 5fr 7fr; gap: var(--gap-lg); } }