/* dadiva-inner.css
   ════════════════════════════════════════════════════════════════════════
   SISTEMA DE DESIGN DAS PÁGINAS INTERIORES (sobre, videos, ferramentas, mylo)
   Dono: agente inner-foundation. Carregar SEMPRE por último, depois de
   dadiva.css, dadiva-nav.css e do <style> da página — é essa ordem que lhe
   deixa desmontar o kit v6 sem precisar de !important.

   ORDEM DOS <link> NO <head> (obrigatória, igual nas quatro páginas)
   ------------------------------------------------------------------
     <link rel="stylesheet" href="dadiva-fonts.css">
     ... <style> da página ...
     <link rel="stylesheet" href="dadiva.css">
     <link rel="stylesheet" href="dadiva-nav.css">
     <link rel="stylesheet" href="dadiva-inner.css">
     <link rel="stylesheet" href="mylo-companion.css">
   dadiva-responsive.css já não é carregada por nenhuma interior: o que lá
   estava era tudo delas e mudou-se para aqui. A landing ainda tem o <link>,
   mas o ficheiro está vazio.

   O QUE ESTE FICHEIRO JÁ RESOLVEU (não voltar a fazer nas páginas)
   ---------------------------------------------------------------
   · fundos fixos (.bg/.bg-tint/.bg-scrim), vagalumes e halos decorativos —
     eram eles que abriam scroll horizontal em /videos e /ferramentas;
   · mascotes antigos (.host, .mylo-host, .mascote, #myloFigure) e o JS que
     os animava — o avatar flutuante (dadiva-companion.js) faz esse papel, e
     tirá-los resolveu o erro de acessibilidade "nested interactive";
   · a barra e o rodapé, agora iguais aos da landing nas quatro páginas;
   · os emojis de conteúdo, trocados por SVG de traço (ver .ico).

   O <main> é de largura total (é o hero cénico que precisa de sangrar).
   Para uma secção de conteúdo usa .inner-section, que centra a 1120px e
   limita a linha de texto a 68ch.

   ════════════════════════════════════════════════════════════════════════
   COMPONENTES DISPONÍVEIS — cola e usa
   ════════════════════════════════════════════════════════════════════════

   1) HERO CÉNICO  ..................................... .scenic-hero
      A cena por página vem daqui (não pôr --scene inline no HTML): a cena é
      escolhida pela classe .page-<nome> no <body>.

        <section class="scenic-hero">
          <div class="scenic-hero__inner">
            <p class="eyebrow">curadoria pessoal</p>
            <h1>O que nos inspira, num mapa.</h1>
            <p class="lede">Uma frase calma, no máximo duas linhas.</p>
          </div>
        </section>

      Camadas: cena (WebP, ::before) → banda de nuvens + esfumado lateral
      (::after) → nuvem quente atrás do texto (__inner::before) → texto.
      Reserva de nav e sangria para fora da goteira do <main> já incluídas.
      Modificador .scenic-hero--soft: cena discreta (é o que a Sobre usa —
      papel marfim com um sopro de pôr do sol, sem virar cartaz).

   2) NUVENS SOLTAS  ................................... .cloud-band
      Banda de nuvem de aguarela para fundir qualquer bloco no marfim:
        <div class="cloud-band" aria-hidden="true"></div>
      Modificador .cloud-band--flip vira-a ao contrário (nuvem a descer).

   3) TIPOGRAFIA  ............... .eyebrow  h1  .lede  h2  .section-label
      .eyebrow  etiqueta verde, maiúsculas espaçadas, 13px
      h1        Nunito 800, clamp(38px → 68px), verde
      .lede     frase de entrada, 19px/1.65, navy
      h2        Gelasio, clamp(30px → 48px), verde
      .whisper  linha sussurrada, minúsculas, 15px

   4) PAINÉIS E CARTÕES  ................. .paper-panel  .card  .card-grid
        <div class="card-grid">
          <article class="card"> <h3>…</h3> <p>…</p> </article>
        </div>
      .card-grid é auto-fit a partir de 260px; .card--soon esmaece.

   5) BOTÕES E CHIPS  ......................... .button  .button.primary
      Mesmo desenho da landing: pílula de contorno azul sobre marfim, 48px
      de altura. .button.primary é a cheia (azul, texto branco). .chip é a
      versão pequena (44px). .pill-link e .cta-link, que o kit v6 pintava de
      amarelo, herdam agora esta mesma pílula.

   5b) BARRA DE NAVEGAÇÃO  ............................ .site-nav
      HTML no topo de dadiva-nav.css. Nas interiores o selector PT/EN vai
      DENTRO de .nav-links, a seguir aos quatro links:
        <button class="lang-toggle" id="langToggle" type="button"
                aria-label="Mudar de língua">EN</button>
      No telemóvel entra no painel do menu com os links, com 44px de alvo.
      Não mexer no id="langToggle": é por ele que o i18n de cada página pega.

   6) ÍCONES  ........................................... .ico
      Nada de emojis. SVG de traço, 1.75px, cantos redondos, currentColor:

        <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="12" cy="12" r="8"/>
        </svg>

      O .ico já traz fill:none, stroke:currentColor, stroke-width:1.75,
      linecap/linejoin round e 1.35em de lado. .ico--lg = 2em (cartões).
      Desenhos prontos no fim deste ficheiro, em comentário.

   7) RODAPÉ COMUM  .................................... .site-footer
      Igual ao da landing. HTML tal e qual:

        <footer class="site-footer">
          <a class="brand" href="/">descomplicai</a>
          <nav class="footer-links" aria-label="Páginas">
            <a href="/videos">vídeos</a><a href="/ferramentas">ferramentas</a>
            <a href="/mylo">mylo</a><a href="/sobre">sobre</a>
          </nav>
          <a class="footer-mail" href="mailto:equipa@descomplicai.pt">equipa@descomplicai.pt</a>
          <p class="footer-made">Feito por um humano. Jaime, Fuzeta, Algarve.</p>
        </footer>

      dadiva-nav.js põe aria-current no link da página atual, aqui também.

   8) RITMO VERTICAL  ....................... --s1 … --s6 (8/16/24/40/64/96)
      Secções normais: .inner-section (goteira + respiração já certas).

   ════════════════════════════════════════════════════════════════════════ */

/* ── 0. Tokens ─────────────────────────────────────────────────────────── */
.inner-page {
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --serif: "Gelasio", "Gelasio Fallback", Georgia, serif;
  --sans: "Nunito", "Nunito Fallback", system-ui, "Segoe UI", sans-serif;

  /* Goteira do <main>. O hero cénico sangra exactamente isto para fora, por
     isso as duas medidas TÊM de sair da mesma variável. */
  --main-pad: clamp(18px, 5vw, 48px);
  --line: #d9e4ee; /* traço dos painéis */
  --muted: #3c5470; /* texto secundário, 7.3:1 sobre marfim */

  background: var(--ivory);
  color: var(--navy);
  font-family: var(--sans);
  /* O espaço para o avatar é dado pelo rodapé (ver mylo-companion.css); o
     padding que o kit v6 punha no <body> só deixava marfim vazio no fim. */
  padding-bottom: 0;
}

/* ── 1. Desmontar o kit v6 ─────────────────────────────────────────────
   Fundos fixos, vagalumes, halos e mascotes antigos. Os halos eram a causa
   do overflow horizontal em /videos e /ferramentas (inset:-16% -14% num
   elemento já à largura do ecrã). O avatar flutuante novo
   (dadiva-companion.js) substitui os mascotes — tirá-los daqui resolve
   também o erro de acessibilidade "nested interactive". */
.inner-page .bg,
.inner-page .bg-tint,
.inner-page .bg-scrim,
.inner-page .fireflies,
.inner-page .firefly,
.inner-page .page-world,
.inner-page .host,
.inner-page .mylo-host,
.inner-page .mascote,
.inner-page #myloFigure,
.inner-page .balloon,
.inner-page .mascot-balloon {
  display: none !important;
}
.inner-page .halo::before,
.inner-page .halo::after,
.inner-page .group-halo,
.inner-page .hero.halo::before {
  display: none !important;
}
.inner-page .halo {
  position: relative;
  background: none;
  box-shadow: none;
}
/* O reveal do kit antigo escondia conteúdo quando o IntersectionObserver
   não disparava. Nas interiores o conteúdo nasce visível. */
.inner-page .reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── 2. Esqueleto ──────────────────────────────────────────────────────── */
.inner-page main {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: 0 var(--main-pad) var(--s6);
}
.inner-page main:focus {
  outline: none;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ivory);
  border: 1.5px solid var(--blue);
  border-radius: 0 0 12px 0;
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Secção normal: uma só medida de leitura, centrada na grelha da página. */
.inner-page .inner-section {
  max-width: 1120px;
  margin: 0 auto var(--s6);
}
.inner-page .inner-section > * {
  max-width: 68ch;
}
.inner-page .inner-section.is-wide > * {
  max-width: none;
}

/* ── 3. Hero cénico ───────────────────────────────────────────────────── */
.inner-page .scenic-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sangra para fora da goteira do <main>. width:auto + align-self:stretch
     mantém isto correcto mesmo quando o <main> da página é flex column
     (é o caso de /mylo). Nunca usar 100vw: contaria a barra de deslocamento
     e abria scroll horizontal no PC. */
  width: auto;
  max-width: none;
  align-self: stretch;
  margin: 0 calc(-1 * var(--main-pad)) var(--s5);
  padding: calc(var(--nav-h, 90px) + clamp(48px, 7vw, 88px))
    max(var(--main-pad), 20px) clamp(72px, 9vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(500px, 64vh, 620px);
  text-align: center;
  background: var(--ivory);
  border-radius: 0;
}

/* Nas interiores a barra flutua sempre por cima de pintura: o véu de marfim
   de dadiva-nav.css fica ligado de origem (na landing só corre durante o
   filme de abertura). Sem ele o wordmark navy cai sobre céu e água. */
.inner-page .site-nav::before {
  opacity: 1;
}

/* A barra COLADA ao topo (.is-stuck, posta pelo dadiva-nav.js) só existe
   nestas quatro páginas, por isso o acerto vive aqui e não em
   dadiva-nav.css, que é da landing.
   O marfim a 0,88 deixava passar os painéis navy que lhe vão por baixo — os
   blocos de terminal da /mylo, o vídeo do holograma da /sobre — e formava um
   rectângulo cinzento de arestas vivas dentro da barra (medido: rgb(228,230,
   227) atrás dos links contra rgb(254,252,244) ao lado). Sobe para 0,97: a
   essa espessura um painel escuro por baixo muda o marfim menos de 1% e a
   aresta desaparece, mas o desfoque continua a dar o ar de vidro e a sombra
   é a mesma. O contraste dos links (#10294f sobre #fffdf5) fica em 13,9:1,
   e o da página activa (#06482f) em 8,9:1 — os dois muito acima de AA. */
.inner-page .site-nav.is-stuck {
  background: rgba(255, 253, 245, 0.97);
  -webkit-backdrop-filter: blur(20px) saturate(1.06);
  backdrop-filter: blur(20px) saturate(1.06);
}
/* Sem backdrop-filter (Firefox com a opção desligada, motores antigos) o
   translúcido não tem desfoque nenhum a ajudar: aí fica marfim sólido. */
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .inner-page .site-nav.is-stuck {
    background: var(--ivory, #fffdf5);
  }
}

/* Camada 1 — a cena. O esfumado lateral/inferior evita o corte duro: a
   pintura desaparece dentro do marfim em vez de bater num rectângulo. */
.inner-page .scenic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: var(--scene);
  background-size: cover;
  background-position: var(--scene-pos, 50% 42%);
  background-repeat: no-repeat;
  opacity: var(--scene-strength, 1);
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(#000 0, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(#000 0, #000 76%, transparent 100%);
  mask-composite: intersect;
}

/* Camada 2 — banda de nuvens em baixo, a fundir a cena no marfim. */
.inner-page .scenic-hero::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -1px;
  height: clamp(118px, 17%, 180px);
  z-index: -2;
  background: url("assets/scenes/cloud-band.webp") bottom center / 100% 100%
    no-repeat;
  pointer-events: none;
}

/* Camada 3 — nuvem quente atrás do texto. É ela que garante o contraste AA:
   marfim a 100% por baixo das letras, bordo molhado a desfazer-se na cena.
   Não é um gradiente radial — é uma nuvem pintada (cloud-mist.webp). */
.inner-page .scenic-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.inner-page .scenic-hero__inner::before {
  content: "";
  position: absolute;
  inset: -52% -14%;
  z-index: -1;
  background: url("assets/scenes/cloud-mist.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.inner-page .scenic-hero__inner > * {
  position: relative;
}

/* Sobre: o Jaime já gosta desta página como está. A cena entra só como sopro
   de pôr do sol por trás do papel, sem mexer no ritmo do hero. */
.inner-page .scenic-hero--soft {
  --scene-strength: 0.5;
  --scene-pos: 50% 18%;
  min-height: 0;
  padding-bottom: clamp(40px, 6vw, 64px);
  margin-bottom: var(--s3);
}
.inner-page .scenic-hero--soft::after {
  height: clamp(120px, 26%, 190px);
}

/* Banda de nuvens solta, para qualquer bloco. */
.cloud-band {
  display: block;
  width: 100%;
  height: clamp(90px, 12vw, 160px);
  background: url("assets/scenes/cloud-band.webp") bottom center / 100% 100%
    no-repeat;
  pointer-events: none;
}
.cloud-band--flip {
  transform: scaleY(-1);
}

/* ── 4. Tipografia ────────────────────────────────────────────────────── */
.inner-page .eyebrow {
  margin: 0 0 var(--s2);
  color: var(--green);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 1;
}
.inner-page h1 {
  margin: 0 0 var(--s3);
  max-width: 16ch;
  font-family: var(--sans);
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--green);
  text-wrap: balance;
}
.inner-page .scenic-hero h1 {
  max-width: 18ch;
}
.inner-page .lede,
.inner-page .scenic-hero .sub {
  margin: 0 auto;
  max-width: 58ch;
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.65;
  color: var(--navy);
  opacity: 1;
}
.inner-page h2 {
  margin: 0 0 var(--s3);
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--green);
  text-wrap: balance;
}
.inner-page h3 {
  margin: 0 0 var(--s1);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green);
}
.inner-page p {
  line-height: 1.65;
}
.inner-page .section-label {
  margin: 0 0 var(--s2);
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.inner-page .whisper {
  font-size: 15px;
  color: var(--muted);
}

/* ── 5. Painéis e cartões ─────────────────────────────────────────────── */
.inner-page .paper-panel,
.inner-page .card {
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 0 #10294f0a;
  padding: var(--s3);
  color: var(--navy);
  transform: none;
}
.inner-page .card {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  text-align: left;
}
.inner-page .card > p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}
.inner-page .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.inner-page .card--soon {
  border-style: dashed;
  color: var(--muted);
}
.inner-page a.card:hover,
.inner-page .card--link:hover {
  border-color: #9fc0e6;
  background: #f7fbff;
}

/* ── 5b. Normalizar o inventário v6 ───────────────────────────────────
   As páginas ainda trazem no <style> os painéis do kit antigo (.plaque,
   .req-pill, .step, .pill, .vc, modais) desenhados para poisar sobre uma
   fotografia fixa: papel tingido, sombras pesadas, rotações e halos de
   texto. O fundo agora é marfim liso, por isso passam todos a ter o mesmo
   desenho dos cartões novos. Isto vivia em dadiva.css atrás de !important;
   aqui é só especificidade, e os agentes de cada página podem afinar. */
.inner-page .plaque,
.inner-page .req-pill,
.inner-page .step,
.inner-page .pill,
.inner-page .vc,
.inner-page .note {
  background: var(--ivory);
  border: 1px solid var(--line);
  box-shadow: none;
  transform: none;
  color: var(--navy);
}
.inner-page .plaque:hover,
.inner-page a.plaque:hover,
.inner-page a.plaque:focus-visible {
  background: #f7fbff;
  border-color: #9fc0e6;
  transform: translateY(-2px);
  box-shadow: none;
}
.inner-page .req-pill:hover,
.inner-page .step:hover {
  transform: none;
  box-shadow: none;
}
/* Os halos de texto existiam para sobreviver à fotografia; sobre marfim só
   borram as letras. */
.inner-page h1,
.inner-page h2,
.inner-page h3,
.inner-page .sub,
.inner-page .eyebrow,
.inner-page .lede,
.inner-page .section-label,
.inner-page .group-h,
.inner-page .group-sub,
.inner-page .cat-title,
.inner-page .note,
.inner-page .intro p {
  text-shadow: none;
}
.inner-page .modal-box {
  background: var(--ivory);
  color: var(--navy);
}
.inner-page .modal-overlay {
  background: #10294f99;
}
.inner-page .step-code {
  background: #122c45;
  color: #e8f2fa;
}
.inner-page .step-code button {
  color: #fff;
}
.inner-page main > section:not(.scenic-hero) {
  margin-bottom: var(--s5);
}

/* ── 6. Botões, chips, links ──────────────────────────────────────────── */
.inner-page .button,
.inner-page .cta,
.inner-page .cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font: 700 16px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.inner-page .button:hover,
.inner-page .cta:hover,
.inner-page .cta-secondary:hover {
  background: #e6f0ff;
  transform: translateY(-2px);
}
.inner-page .button.primary,
.inner-page .cta {
  background: var(--blue);
  color: #fff;
}
.inner-page .button.primary:hover,
.inner-page .cta:hover {
  background: #0a56c9;
}
.inner-page .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font: 700 14px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
/* As pílulas amarelas do kit v6 (.pill-link, .cta-link) ficavam com texto
   azul sobre amarelo — bonito no papel, fraco no contraste. Passam a ter o
   mesmo desenho das da landing: contorno azul sobre marfim. */
.inner-page .pill-link,
.inner-page .cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
  filter: none;
  box-shadow: none;
  transition:
    background 0.2s,
    transform 0.2s;
}
.inner-page .pill-link:hover,
.inner-page .cta-link:hover {
  background: #e6f0ff;
  transform: translateY(-2px);
  filter: none;
}
.inner-page .footer-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.inner-page .footer-back:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── 7. Ícones ────────────────────────────────────────────────────────── */
.inner-page .ico {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.25em;
  color: var(--green);
}
.inner-page .ico--lg {
  width: 2em;
  height: 2em;
}
.inner-page .ico--navy {
  color: var(--navy);
}

/* ── 8. Selector de língua na barra ───────────────────────────────────── */
/* Mudou de casa para dadiva-nav.css a 2026-09-20: a pílula PT/EN passou a
   existir também na landing, que não carrega este ficheiro. A barra é uma
   só nas cinco páginas, por isso o desenho dela vive com a barra. */

/* ── 9. Rodapé comum (mesmo desenho da landing) ───────────────────────── */
.inner-page .site-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin: 0;
  /* 96px em baixo = a folga que mylo-companion.css pede para o avatar não
     poisar em cima da última linha. Fica aqui porque a regra de lá tem menos
     especificidade do que esta e não chegaria a aplicar-se. */
  padding: var(--s4) var(--shell-pad, 6%) 96px;
  background: var(--ivory);
  color: var(--navy);
  font-size: 13px;
  text-align: left;
}
.inner-page .site-footer .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -1.1px;
  text-decoration: none;
  justify-self: start;
  color: var(--navy);
}
.inner-page .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: end;
  gap: 4px 14px;
  font-weight: 700;
}
.inner-page .footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 2px;
  text-decoration: none;
  color: var(--navy);
}
.inner-page .footer-links a:hover,
.inner-page .site-footer .footer-mail:hover {
  color: var(--blue);
}
.inner-page .footer-links a[aria-current="page"] {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.inner-page .site-footer .footer-mail {
  grid-area: 2 / 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
}
.inner-page .site-footer .footer-made {
  grid-area: 2 / 2;
  justify-self: end;
  text-align: right;
  margin: 0;
  color: var(--muted);
}

/* ── 9b. Sobre: holograma e galeria de projetos ───────────────────────
   Vinha de dadiva-responsive.css, que a landing carregava sem usar nada.
   Mudou de casa tal e qual: o PC da Sobre é o que o Jaime já aprovou. */
.page-sobre {
  /* As secções desta página já trazem a sua própria goteira. */
  --main-pad: 0px;
}
.page-sobre .about-hero {
  padding-bottom: clamp(24px, 3vw, 40px);
  margin-bottom: var(--s2);
}
.hologram-stage {
  max-width: 1040px;
  margin: 0 auto 50px;
  position: relative;
  padding: 0 24px;
}
.hologram-stage video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 18px;
  background: var(--navy);
}
.hologram-stage figcaption {
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: var(--s2);
  color: var(--muted);
}
.hologram-stage > .clip-toggle {
  bottom: 70px;
  right: 40px;
}
.project-gallery {
  max-width: 1240px;
  margin: 80px auto;
  padding: 0 5%;
}
.project-intro {
  max-width: 670px;
  margin-bottom: var(--s4);
}
.inner-page .project-intro h2 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.1;
  margin-bottom: 18px;
}
.project-intro p {
  line-height: 1.6;
}
.inner-page .motion-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #aecbc0;
  border-radius: 25px;
  background: transparent;
  color: var(--green);
  cursor: pointer;
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) 28px;
}
/* Cinco cartões do mesmo tamanho. O destaque a toda a largura calhava ao
   Aqua Elements, cujo clipe é só textura de água: era a maior imagem da
   página e a única que parecia desfocada. Sem destaque, a secção lê-se como
   uma grelha e nenhum clipe manda por ser maior. O último cartão fica
   centrado para a linha ímpar não cair para a esquerda. */
.project-item:last-child:nth-child(odd) {
  grid-column: 1/-1;
  width: calc(50% - 14px);
  margin-inline: auto;
}
.project-film {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--navy);
}
.project-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.inner-page .clip-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #ffffff66;
  border-radius: 24px;
  background: #10294fcc;
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.project-caption {
  padding: 18px 0 0;
}
.inner-page .project-caption h3 {
  font-size: 25px;
  margin: 0 0 var(--s1);
  letter-spacing: -0.7px;
}
.project-caption a {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}
.project-caption a:hover {
  text-decoration: underline;
}
.project-caption p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.page-sobre .intro {
  padding: 15px 24px 35px;
}
.page-sobre .intro .wrap {
  max-width: 770px;
}
.page-sobre #salao {
  padding-top: 30px;
}
.project-gallery .eyebrow {
  margin-bottom: 14px;
}

/* ── 10. Cenas por página ─────────────────────────────────────────────── */
.page-sobre {
  --scene: url("assets/scenes/sobre-desktop.webp");
  --scene-pos: 50% 46%;
}
.page-videos {
  --scene: url("assets/scenes/videos-desktop.webp");
  --scene-pos: 50% 52%;
}
.page-ferramentas {
  --scene: url("assets/scenes/ferramentas-desktop.webp");
  --scene-pos: 50% 46%;
}
.page-mylo {
  --scene: url("assets/scenes/mylo-desktop.webp");
  --scene-pos: 50% 38%;
}
.page-jardim {
  --scene: url("assets/dadiva-map.webp");
  --scene-pos: 50% 38%;
}

/* ── 11. Foco e alvos tácteis ─────────────────────────────────────────── */
/* Sem border-radius aqui: o raio aplicar-se-ia ao ELEMENTO focado e não ao
   contorno — a pílula "Conversar com o MYLO" virava retângulo e o botão de
   fechar a conversa virava quadrado ao chegar lá com o teclado. Os três
   motores desenham o outline a acompanhar o border-radius do próprio
   elemento, por isso não é preciso dizer-lhes nada. */
.inner-page :focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
.inner-page summary,
.inner-page details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--s1);
  cursor: pointer;
}

/* ── 12. Telemóvel ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .inner-page {
    /* A mesma goteira da barra e do rodapé — ver --gutter em dadiva.css.
       Antes eram 20px fixos aqui e 6% (23,4 a 390px) na barra e na landing:
       a mesma página arrancava em dois eixos diferentes. */
    --main-pad: var(--gutter);
  }
  .inner-page main {
    padding-bottom: var(--s5);
  }
  .inner-page .scenic-hero {
    min-height: clamp(400px, 58vh, 500px);
    padding: calc(var(--nav-h, 58px) + clamp(34px, 9vw, 56px))
      max(var(--main-pad), 20px) clamp(56px, 13vw, 84px);
    margin-bottom: var(--s3);
  }
  .inner-page .scenic-hero::before {
    background-image: var(--scene-m, var(--scene));
    background-position: var(--scene-m-pos, 50% 40%);
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0,
        #000 5%,
        #000 95%,
        transparent 100%
      ),
      linear-gradient(#000 0, #000 72%, transparent 100%);
    mask-image:
      linear-gradient(
        90deg,
        transparent 0,
        #000 5%,
        #000 95%,
        transparent 100%
      ),
      linear-gradient(#000 0, #000 72%, transparent 100%);
  }
  .inner-page .scenic-hero__inner::before {
    inset: -32% -20%;
  }
  .inner-page .scenic-hero--soft {
    min-height: 0;
    padding-bottom: clamp(28px, 8vw, 44px);
  }
  .inner-page .inner-section {
    margin-bottom: var(--s5);
  }
  .inner-page h1 {
    font-size: clamp(34px, 9.5vw, 44px);
    letter-spacing: -0.03em;
  }
  .inner-page h2 {
    font-size: clamp(26px, 7.5vw, 34px);
  }
  .inner-page .card-grid {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }
  .page-sobre .about-hero {
    padding-bottom: clamp(16px, 4vw, 28px);
  }
  .hologram-stage {
    padding: 0 16px;
    margin-bottom: var(--s3);
  }
  .hologram-stage video {
    border-radius: 12px;
  }
  .hologram-stage > .clip-toggle {
    right: 26px;
    bottom: 65px;
  }
  .project-gallery {
    margin: 45px auto;
    padding: 0 7%;
  }
  .project-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  /* Uma coluna: o cartão ímpar volta a ocupar a largura toda. */
  .project-item:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    margin-inline: 0;
  }
  .inner-page .project-intro h2 {
    font-size: 36px;
  }
  .page-sobre #salao,
  .page-sobre #mylo {
    padding-left: 7%;
    padding-right: 7%;
  }
  /* Rodapé numa coluna, tudo à esquerda, como na landing. */
  .inner-page .site-footer {
    grid-template-columns: 1fr;
    gap: var(--s2);
    padding: var(--s4) var(--main-pad) 88px;
  }
  .inner-page .footer-links {
    justify-content: flex-start;
    gap: 0 18px;
  }
  .inner-page .site-footer .footer-mail,
  .inner-page .site-footer .footer-made {
    grid-area: auto;
    justify-self: start;
    text-align: left;
  }
  .inner-page .footer-links {
    justify-self: start;
  }
  /* Cenas verticais: recorte pensado para o retrato do telemóvel. */
  .page-sobre {
    --scene-m: url("assets/scenes/sobre-mobile.webp");
    --scene-m-pos: 50% 34%;
  }
  .page-videos {
    --scene-m: url("assets/scenes/videos-mobile.webp");
    --scene-m-pos: 50% 58%;
  }
  .page-ferramentas {
    --scene-m: url("assets/scenes/ferramentas-mobile.webp");
    --scene-m-pos: 50% 46%;
  }
  .page-mylo {
    --scene-m: url("assets/scenes/mylo-mobile.webp");
    --scene-m-pos: 50% 40%;
  }
  .page-jardim {
    --scene-m: url("assets/dadiva-map-mobile.webp");
    --scene-m-pos: 50% 40%;
  }
}

@media (max-width: 380px) {
  /* Os 16px de goteira a ≤380px passaram a estar no --gutter (dadiva.css),
     para a landing e as interiores partilharem o mesmo eixo. */
  .inner-page h1 {
    font-size: 32px;
  }
  .inner-page .scenic-hero {
    min-height: 400px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inner-page *,
  .inner-page *::before,
  .inner-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   BIBLIOTECA DE ÍCONES — copiar o <path> para dentro de
   <svg class="ico" viewBox="0 0 24 24" aria-hidden="true"> … </svg>

   ecrã / computador
     <rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8 20h8M12 17v3"/>
   telemóvel
     <rect x="7" y="2.5" width="10" height="19" rx="2.5"/><path d="M11 18.5h2"/>
   filme / vídeo
     <rect x="2.5" y="5" width="19" height="14" rx="2.5"/><path d="M10 9.5l5 2.5-5 2.5z"/>
   cérebro / ideia
     <path d="M12 5.5a3 3 0 0 0-5.7 1.3A3 3 0 0 0 5 12a3 3 0 0 0 1.6 4.3A3 3 0 0 0 12 18.5z"/>
     <path d="M12 5.5a3 3 0 0 1 5.7 1.3A3 3 0 0 1 19 12a3 3 0 0 1-1.6 4.3A3 3 0 0 1 12 18.5z"/>
     <path d="M12 5.5v13"/>
   faísca / magia
     <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="M18.5 16.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z"/>
   folha / jardim
     <path d="M20 4C10 4 4 9 4 16c0 2.2.8 3.4.8 3.4S9 12 19 9"/><path d="M4.8 19.4C12 20.5 20 16 20 4"/>
   ferramenta / chave
     <path d="M15.2 4.8a4.5 4.5 0 0 0-5.9 5.9L4 16l4 4 5.3-5.3a4.5 4.5 0 0 0 5.9-5.9l-2.6 2.6-2.7-.6-.6-2.7z"/>
   coração / dádiva
     <path d="M12 20s-7.5-4.6-7.5-9.4A4.1 4.1 0 0 1 12 8a4.1 4.1 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z"/>
   cogumelo / MYLO
     <path d="M4 11a8 8 0 0 1 16 0z"/><path d="M10 11v6a2 2 0 0 0 4 0v-6"/>
   seta a abrir (link externo)
     <path d="M14 4h6v6M20 4l-9 9"/><path d="M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4"/>
   terminal / linha de comandos
     <rect x="2.5" y="4.5" width="19" height="15" rx="2.5"/><path d="M7 10l3 2.5-3 2.5M12.5 15.5h4.5"/>
   balão de conversa
     <path d="M21 12.5a7.5 7.5 0 0 1-7.5 7.5H8l-4 3v-4.3A7.5 7.5 0 0 1 8 5.5h5.5a7.5 7.5 0 0 1 7.5 7z"/>
   microfone
     <rect x="9" y="2.5" width="6" height="11" rx="3"/><path d="M5.5 11.5a6.5 6.5 0 0 0 13 0M12 18v3.5"/>
   pincel
     <path d="M14.5 3.5l6 6-8 8-6-6z"/><path d="M6.5 11.5L3 21l9.5-3.5"/>
   câmara de vídeo
     <rect x="2.5" y="6.5" width="12" height="11" rx="2.5"/><path d="M14.5 11l7-3.5v9l-7-3.5z"/>
   caderno
     <path d="M4 4.5A2 2 0 0 1 6 2.5h13v19H6a2 2 0 0 1-2-2z"/><path d="M8 2.5v19"/>
   raio / energia
     <path d="M13.5 2.5L4.5 13.5h6l-1 8 9-11h-6z"/>
   chama
     <path d="M12 21a6 6 0 0 0 6-6c0-4.5-4.5-6-4.5-12C10 5 6 8.5 6 15a6 6 0 0 0 6 6z"/><path d="M12 21a2.8 2.8 0 0 0 2.8-2.8c0-2.1-2.8-3.2-2.8-5.7-1.6 1.6-2.8 3.1-2.8 5.7A2.8 2.8 0 0 0 12 21z"/>
   foguetão
     <path d="M5 14c-1 2-1 5-1 5s3 0 5-1"/><path d="M9.5 17.5C7 16 6.5 13 8 10.5 10.5 6 15 3.5 20.5 3.5 20.5 9 18 13.5 13.5 16c-1.4.8-2.8.9-4 1.5z"/><circle cx="15" cy="9" r="1.9"/>
   música
     <path d="M9 18V5.5l11-2V16"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/>
   vela
     <rect x="8.5" y="10" width="7" height="11" rx="1.6"/><path d="M12 10V7.5M12 2.5c1.7 1.9 2.4 3 2.4 4a2.4 2.4 0 0 1-4.8 0c0-1 .7-2.1 2.4-4z"/>
   ════════════════════════════════════════════════════════════════════════ */