/* IOMI 2.18.0 — página "A IOMI", um desenho técnico por página e ilustrações que se repetem. */

/* ---------- Desenhos das páginas interiores ---------- */
.intro-blueprint { opacity: 0.3; }
.intro-blueprint .bp-g { opacity: 0.75; }
@media (max-width: 700px) { .intro-blueprint { opacity: 0.14; } }

/* Traço: cada linha desenha-se quando o cabeçalho entra no ecrã e volta ao início quando sai.
   Sem JavaScript, ou com a redução de movimento ligada, o desenho aparece completo. */
@media (prefers-reduced-motion: no-preference) {
  .js .page-intro .bp-l { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0s); }
  .js .page-intro:not(.is-live) .bp-l { stroke-dashoffset: 1; transition: none; }
  .js .page-intro .bp-g, .js .page-intro .bp-p { transition: opacity 0.9s ease 1.5s; }
  .js .page-intro:not(.is-live) .bp-g, .js .page-intro:not(.is-live) .bp-p { opacity: 0; transition: none; }
}

/* ---------- Alçado da página inicial: o traçador volta a passar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .plot .plot-cover { animation: none; top: 0; border-top-color: var(--gold); }
  .js .plot.is-live .plot-cover { animation: iomi-plot 2.6s cubic-bezier(0.45, 0, 0.2, 1) 0.2s forwards; }
}

/* ---------- IORI e histórico: repetem-se ao voltar ao ecrã ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .iori-anatomy:not(.is-live) .iori-big .seg::after { animation: none; transform: scaleX(0); }
  .js .iori-anatomy:not(.is-live) .iori-parts > div { animation: none; opacity: 0; }
  .js .record-events:not(.is-live) li { animation: none; opacity: 0; }
  .js .record-events:not(.is-live) li.is-latest::before { animation: none; }
}

/* ---------- A IOMI ---------- */
.about-jump { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.about-jump a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.35rem 1rem;
  border: 1px solid rgba(227, 196, 126, 0.45); border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 500; font-size: 0.95rem;
}
.about-jump a:hover { background: rgba(227, 196, 126, 0.14); border-color: #E3C47E; }
.about-jump a:focus-visible { outline: 3px solid #E3C47E; outline-offset: 2px; }

.about [id] { scroll-margin-top: 5.5rem; }

/* O que nos orienta: quatro linhas de registo, com o fio dourado por cima de cada uma. */
.about-compass { background: var(--surface); }
.about-compass h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.compass { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; }
.compass > div { position: relative; display: grid; gap: 0.4rem; padding: 1.5rem 0 1.6rem; border-top: 1px solid var(--line); }
.compass > div:last-child { border-bottom: 1px solid var(--line); }
.compass > div::before { content: ""; position: absolute; left: 0; top: -1px; width: 7rem; height: 2px; background: var(--gold); transform-origin: left center; }
@media (min-width: 860px) { .compass > div { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: baseline; } }
.compass dt a { font-family: var(--serif); font-weight: 600; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); color: var(--navy); text-decoration: none; }
.compass dt a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 0.2em; }
.compass dd { margin: 0; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.5; color: var(--ink); max-width: 38em; }
@media (prefers-reduced-motion: no-preference) {
  .js .compass > div::before { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(0.15s + var(--i, 0) * 0.25s); }
  .js .compass:not(.is-live) > div::before { transform: scaleX(0); transition: none; }
}

/* Missão: bloco azul-marinho entre a visão (cinzento) e os valores (branco). */
.about-mission { background: var(--navy); color: #fff; }
.about-mission .vision-kicker { color: #E3C47E; }
.about-mission h2 { margin-top: 0.75rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); max-width: 18ch; color: #fff; }
.about-mission-lede { margin-top: 1.25rem; font-size: 1.1875rem; line-height: 1.6; color: rgba(255, 255, 255, 0.8); max-width: 30em; }
.about-mission-intro { font-weight: 600; color: #E3C47E; }
.mission-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.mission-list li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 1.25rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); }
.mission-list .icon-tile { background: rgba(255, 255, 255, 0.06); border-color: rgba(227, 196, 126, 0.35); color: #fff; box-shadow: none; }
.mission-list strong { display: block; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: #fff; }
.mission-list p { margin: 0.3rem 0 0; color: rgba(255, 255, 255, 0.78); line-height: 1.55; }

/* Valores: o nome de cada valor por cima da frase, sem numeração. */
.about-values { background: var(--surface); }
.about-values .section-head h2 { margin-top: 0.75rem; }
.charter.values li { padding-left: 0; }
.charter.values li::before { content: none; }
.value-name { display: block; margin-bottom: 0.45rem; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--gold-deep); }

/* Fundo alternado depois dos valores */
.about .vision-block.section-paper { background: var(--paper); }

/* ---------- Vídeos da aplicação (Como funciona) ---------- */
.app-videos { background: var(--paper); }
.app-video-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 900px) { .app-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-video { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; scroll-margin-top: 6rem; }
.app-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--navy-deep); }
.app-video figcaption { display: grid; gap: 0.3rem; padding: 1rem 1.15rem 1.2rem; border-top: 3px solid var(--gold); }
.app-video figcaption strong { font-family: var(--serif); font-size: 1.2rem; color: var(--navy); }
.app-video figcaption span { color: var(--ink-soft); line-height: 1.5; }