/* ════════════════════════════════════════════════════════════
   SANGHELIOS · about.css
   Vista About: logo centrado, descripción, módulos y hoja de ruta.
   ════════════════════════════════════════════════════════════ */

#view-about { background: var(--white); min-height: 100vh; }
.about-wrap {
  max-width: 1060px; margin: 0 auto;
  padding: calc(var(--nav-h) + 64px) 32px 72px;
  text-align: center;
}
.about-wrap .logo-word { justify-content: center; margin-bottom: 26px; }
.about-p {
  font-size: 16.5px; line-height: 1.9; color: var(--text-secondary);
  max-width: 780px; margin: 0 auto 52px;
}
.about-p b { color: var(--text-primary); }
.about-label {
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--red); margin: 0 0 22px;
}
.about-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  text-align: left; margin-bottom: 52px;
}
.about-grid .fase-card { background: var(--bg-section); padding: 26px; }
.about-grid .t-title { font-size: 16px; margin-bottom: 8px; }
.about-grid .t-desc { font-size: 13.5px; line-height: 1.7; }
.about-grid .t-phase { margin-bottom: 8px; }
.about-foot {
  padding-top: 26px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-muted);
}

/* Tarjetas (compartidas por módulos y fases) */
.fase-card {
  background: white; border: 1px solid var(--border);
  border-radius: 12px; padding: 22px;
  transition: box-shadow .2s, transform .2s;
}
.fase-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
.t-phase { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.t-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.t-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
}