/* ===========================================================
   MEA: Malakias English Academy
   Estilos partilhados por todas as páginas do site
   =========================================================== */

/* Ativa as View Transitions entre páginas (cross-document): suaviza o
   piscar do reload completo em cada navegação. Browsers sem suporte
   (fora Chrome/Edge e afins) ignoram esta regra e navegam normalmente,
   sem qualquer efeito negativo. O elemento com view-transition-name
   correspondente (ver .nav-link.is-active::after) tem de existir em
   ambos os documentos, antigo e novo, para animar em vez de saltar. */
@view-transition {
  navigation: auto;
}

:root{
  --primary: #1a3c5e;
  --primary-dark: #12293f;
  --accent: #d4a017;
  --accent-dark: #b3860f;
  --bg: #fafaf8;
  --bg-section-alt: #f3ede1;
  --ink: #1a3c5e;
  --text-muted: #445569;
  --radius: 8px;
  --radius-pill: 999px;
  /* Tratamento consistente para fotos quadradas/retangulares em todo o
     site (equipa, espaço, about-preview, etc.): sombra subtil em
     repouso, reforçada no hover, ver emil-design-eng. */
  --shadow-photo: 0 10px 28px rgba(26,60,94,0.16), 0 4px 10px rgba(26,60,94,0.10);
  --shadow-photo-hover: 0 16px 36px rgba(26,60,94,0.22), 0 6px 14px rgba(26,60,94,0.14);
  --font-head: 'Fraunces', serif;
  --font-body: 'Karla', sans-serif;
  --container: 1160px;

  /* ---- Movimento ----
     Toda a animação do site sai daqui. Não escrever durações nem curvas
     à mão nas secções: se um valor não existir como token, acrescenta-se
     um token, para as páginas não começarem a divergir umas das outras.
     Durações por tipo de interação (quanto mais frequente, mais curta):
       press  - resposta ao clique/toque, tem de ser instantânea
       hover  - sublinhados, cor, chevrons
       shadow - sombra e zoom das fotos e cartões
       slide  - carrosséis (movimento de um bloco no ecrã)
       reveal - entrada ao scroll
       fill   - barras que se preenchem (só uma vez por secção)
     Curvas: --ease-out para entradas/saídas (arranca depressa, trava
     devagar) e --ease-snap para microinterações curtas. Nunca ease-in,
     que arranca lento e faz a interface parecer pesada. */
  --dur-press: 140ms;
  --dur-hover: 220ms;
  --dur-shadow: 320ms;
  --dur-slide: 550ms;
  --dur-reveal: 620ms;
  --dur-fill: 1300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1);
  /* Deslocamento vertical das entradas ao scroll e intervalo entre
     elementos irmãos quando entram em cascata. */
  --reveal-shift: 22px;
  --reveal-stagger: 90ms;
  /* Cascata mais lenta para blocos grandes (2-3 cartões largos), onde o
     intervalo curto das grelhas de itens pequenos passa despercebido. */
  --reveal-stagger-lg: 240ms;
  /* Flutuação ambiente dos badges da hero: ciclo longo de propósito,
     para se notar de canto de olho e nunca competir com o texto. */
  --dur-float: 3.6s;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  /* Proteção extra: nada deve ultrapassar 100% da largura do viewport.
     As causas raiz (navbar e badges da hero) já estão corrigidas acima;
     isto é só uma rede de segurança contra futuras regressões. */
  overflow-x: hidden;
}
h1, h2, h3{ font-family: var(--font-head); margin: 0; color: var(--primary); }
p{ margin: 0; }
a{ text-decoration: none; color: inherit; }
img, svg{ display: block; max-width: 100%; }
ul, ol{ margin: 0; padding: 0; list-style: none; }

/* Conteúdo que fica fora do fluxo visual mas continua no HTML, legível
   por leitores de ecrã e indexável (ao contrário de display:none). */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Botões ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-snap),
              box-shadow var(--dur-press) var(--ease-snap),
              background var(--dur-hover) var(--ease-snap),
              border-color var(--dur-hover) var(--ease-snap),
              color var(--dur-hover) var(--ease-snap);
}
/* Resposta ao carregar: o botão encolhe um nada enquanto está premido,
   para se sentir que a interface registou o toque. Ganha ao translateY
   do hover de propósito, o press é o estado mais recente. */
.btn:active{ transform: scale(0.97); }
.btn-primary{ background: var(--primary); color: #fff; }
.btn-primary:hover{ background: var(--primary-dark); }
.btn-accent{ background: var(--accent); color: var(--primary); }
.btn-accent:hover{ background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.btn-ghost{ background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover{ background: rgba(26,60,94,0.06); }
/* Versão do ghost para fundos escuros (ex: CTA final sobre navy) */
.btn-ghost-light{ background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost-light:hover{ background: rgba(255,255,255,0.10); border-color: #fff; }

/* ---------- Padrões de movimento partilhados ----------
   Só existem dois no site inteiro, e todas as páginas usam estes:
   1. data-enter      - entrada ao CARREGAR a página, para o conteúdo que
                        já está acima da dobra (heroes) e por isso nunca
                        chega a disparar um observer de scroll;
   2. data-reveal     - entrada ao SCROLL, quando a secção entra na vista
      data-reveal-children  (mesma coisa, mas em cascata pelos filhos).
   Os dois fazem o mesmo gesto: fade + deslize curto para cima. A ordem
   dentro de cada um controla-se com data-enter="N" / a posição do
   filho, nunca com durações à parte. */

/* 1. Entrada ao carregar. Em CSS puro (não depende de JS) e com
   fill-mode both, para o estado final ficar garantido mesmo que a
   animação não chegue a correr. */
@keyframes page-in{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}
/* fill-mode backwards, não both: "backwards" aplica o estado inicial
   durante o atraso (é o que evita o piscar antes de arrancar) mas larga
   o elemento no fim, em vez de lhe fixar transform: translateY(0) para
   sempre. Com "both", um botão com data-enter ficava sem o scale do
   :active, porque o estado final de uma animação ganha sempre a uma
   declaração normal na cascata. */
[data-enter]{
  animation: page-in var(--dur-reveal) var(--ease-out) backwards;
}
[data-enter="1"]{ animation-delay: calc(var(--reveal-stagger) * 1); }
[data-enter="2"]{ animation-delay: calc(var(--reveal-stagger) * 2); }
[data-enter="3"]{ animation-delay: calc(var(--reveal-stagger) * 3); }
[data-enter="4"]{ animation-delay: calc(var(--reveal-stagger) * 4); }
[data-enter="5"]{ animation-delay: calc(var(--reveal-stagger) * 5); }

/* 2. Revelação ao scroll, reutilizável: basta pôr data-reveal no
   elemento (ver main.js). O estado escondido só existe depois de o JS
   assumir, para o conteúdo aparecer na mesma sem JS. */
[data-reveal].has-reveal{
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
[data-reveal].has-reveal.is-revealed{ opacity: 1; transform: translateY(0); }

/* Variante em cascata: o observer vigia o contentor, mas quem entra são
   os filhos diretos, um a seguir ao outro. Usada nas grelhas de itens
   (estatísticas, diferenciais, valores, equipa) para a linha não
   aparecer toda de bloco. */
[data-reveal-children].has-reveal > *{
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
[data-reveal-children].has-reveal > *:nth-child(2){ transition-delay: calc(var(--reveal-stagger) * 1); }
[data-reveal-children].has-reveal > *:nth-child(3){ transition-delay: calc(var(--reveal-stagger) * 2); }
[data-reveal-children].has-reveal > *:nth-child(4){ transition-delay: calc(var(--reveal-stagger) * 3); }
[data-reveal-children].has-reveal > *:nth-child(5){ transition-delay: calc(var(--reveal-stagger) * 4); }
[data-reveal-children].has-reveal > *:nth-child(6){ transition-delay: calc(var(--reveal-stagger) * 5); }
[data-reveal-children].has-reveal.is-revealed > *{ opacity: 1; transform: translateY(0); }

/* Botões da navbar: pill totalmente arredondado (ver secção Navbar do CLAUDE.md,
   exceção documentada ao raio máximo de 8px usado no resto do site).
   O CTA "Entre em contacto" saiu da navbar e passou a botão flutuante
   de WhatsApp (ver .whatsapp-float no fim do ficheiro), por isso aqui
   só resta o botão "Entrar". */
.btn-outline-nav{
  padding: 11px 22px;
  font-size: 14.5px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--primary);
  border-color: rgba(26,60,94,0.35);
  font-weight: 600;
}
.btn-outline-nav:hover{ background: rgba(26,60,94,0.06); border-color: var(--primary); }

/* ---------- Cabeçalho / Navbar (100% da largura, fixa) ---------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  transition: box-shadow var(--dur-hover) var(--ease-snap);
}
/* Lisa em repouso; só ganha sombra depois de sair do topo (ver main.js) */
.site-header.is-scrolled{
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.header-card{
  max-width: 1760px;
  margin: 0 auto;
}
.nav-inner{
  padding: 10px 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
}

/* Compensa a navbar fixa para nada ficar tapado, nem ao carregar a
   página nem em saltos para âncoras internas. --header-h é medido em
   JS (altura real da navbar); o valor fixo é só um fallback. */
main{ padding-top: var(--header-h, 64px); }
main > section[id],
main > *[id]{ scroll-margin-top: var(--header-h, 64px); }
.logo{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.logo img{
  display: block;
  height: 46px;
  width: auto;
}

/* Itens do menu soltos sobre o branco da navbar (sem faixa/bloco de fundo
   atrás do grupo). Só a aba ativa ganha destaque pill-shaped com sombra. */
/* A folga da barra é repartida pelos dois lados do menu, em vez de ser
   toda empurrada para a esquerda dele. Antes, com margin-right:auto no
   logótipo, sobrava um vazio de ~470px a 1440px (e ~700px a 1680px)
   logo a seguir ao logótipo, que assim ficava perdido no canto. */
.main-nav{
  display: flex;
  align-items: center;
  gap: 34px;
  flex-shrink: 0;
  margin: 0 auto;
}
.nav-link{
  position: relative;
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--dur-hover) var(--ease-snap);
}
.nav-link::after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1.5px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-snap);
}
@media (hover: hover) and (pointer: fine){
  .nav-link:hover{ color: var(--primary); }
  .nav-link:hover::after{ transform: scaleX(1); }
}
/* Aba ativa: sem pill/fundo/sombra (ficava com ar de etiqueta), só
   peso tipográfico mais forte e uma linha fina cor accent por baixo,
   sempre visível (reaproveita o ::after do sublinhado de hover, mas
   com outra cor e sem depender do hover). */
.nav-link.is-active::after{
  background: var(--accent);
  transform: scaleX(1);
  /* Nome consistente em todas as páginas: dá ao browser um par
     old/new para animar a linha a deslizar entre posições durante a
     navegação, em vez de desaparecer e reaparecer. Seguro porque só
     uma das duas versões (main-nav ou mobile-menu) está de facto
     visível de cada vez (a outra tem display:none), nunca as duas ao
     mesmo tempo, ver regras responsivas de .main-nav/.mobile-menu. */
  view-transition-name: nav-active-underline;
}
.nav-link.is-active{
  color: var(--primary);
  font-weight: 700;
}
.nav-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* ---------- Seletor de idioma ---------- */
.lang-switcher{ position: relative; flex-shrink: 0; }
.lang-toggle{
  display: flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lang-toggle:hover{ background: rgba(26,60,94,0.06); }
.lang-flag{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(26,60,94,0.12);
}
.lang-flag-pt-icon{
  background: linear-gradient(to right, #046a38 0%, #046a38 40%, #da291c 40%, #da291c 100%);
}
.lang-flag-pt-icon::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  width: 7px;
  height: 7px;
  background: #ffcc00;
  border: 1px solid #046a38;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.lang-flag-en-icon{
  background-color: #00247d;
  background-image:
    linear-gradient(45deg, transparent 48.5%, #cf142b 48.5%, #cf142b 51.5%, transparent 51.5%),
    linear-gradient(-45deg, transparent 48.5%, #cf142b 48.5%, #cf142b 51.5%, transparent 51.5%),
    linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(to right, transparent 45%, #cf142b 45%, #cf142b 55%, transparent 55%),
    linear-gradient(to bottom, transparent 45%, #cf142b 45%, #cf142b 55%, transparent 55%),
    linear-gradient(to right, transparent 40%, #fff 40%, #fff 60%, transparent 60%),
    linear-gradient(to bottom, transparent 40%, #fff 40%, #fff 60%, transparent 60%);
}
/* Espanha: faixas horizontais vermelho-amarelo-vermelho (1:2:1), sem o
   brasão, que a esta escala seria só uma mancha. */
.lang-flag-es-icon{
  background: linear-gradient(to bottom,
    #aa151b 0%, #aa151b 25%,
    #f1bf00 25%, #f1bf00 75%,
    #aa151b 75%, #aa151b 100%);
}
.lang-toggle .chevron{ width: 14px; height: 14px; color: var(--text-muted); transition: transform var(--dur-hover) var(--ease-snap); }
.lang-toggle.is-open .chevron{ transform: rotate(180deg); }

.lang-menu{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
  padding: 6px;
  min-width: 176px;
  z-index: 60;
}
.lang-menu.is-open{ display: block; }
.lang-option{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}
.lang-option:hover{ background: rgba(26,60,94,0.06); }
.lang-option.is-selected{ background: var(--bg-section-alt); color: var(--primary); font-weight: 700; }
.lang-option .check{ width: 16px; height: 16px; margin-left: auto; color: var(--primary); display: none; }
.lang-option.is-selected .check{ display: block; }

.nav-toggle{
  display: none;
  /* Em mobile o menu desktop desaparece (e com ele a margem automática
     que empurrava para a direita), por isso é o hambúrguer que encosta
     ao canto. */
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid rgba(26,60,94,0.25);
  border-radius: var(--radius-pill);
  color: var(--primary);
  flex-shrink: 0;
}
.nav-toggle svg{ width: 20px; height: 20px; }
.nav-toggle .icon-close{ display: none; }
.nav-toggle.is-open .icon-menu{ display: none; }
.nav-toggle.is-open .icon-close{ display: block; }

.mobile-menu{
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 24px 22px;
  border-top: 1px solid rgba(26,60,94,0.10);
}
.mobile-menu.is-open{ display: flex; }
.mobile-menu .nav-link{ margin: 0; width: 100%; border-radius: var(--radius); }
.mobile-menu-actions{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.mobile-menu-actions .btn{ justify-content: center; }
.mobile-menu .lang-switcher{
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(26,60,94,0.10);
}
.mobile-menu .lang-menu{ left: 0; right: auto; }

/* O menu completo + botões só cabem numa linha a partir de ~1165px;
   abaixo disso (inclui tablets como iPad Pro, 1032px) colapsa para o
   hambúrguer em vez de espremer os itens ou deixar overflow horizontal. */
@media (max-width: 1200px){
  .main-nav{ display: none; }
  .nav-actions{ display: none; }
  .nav-inner > .lang-switcher{ display: none; }
  .nav-toggle{ display: flex; }
}

/* ---------- Placeholder de imagem ---------- */
.image-placeholder{
  background: rgba(26,60,94,0.06);
  border: 2px dashed rgba(26,60,94,0.35);
  border-radius: var(--radius);
  color: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 15px;
  gap: 6px;
  padding: 24px;
  width: 100%;
  height: 100%;
  min-height: 340px;
}
.image-placeholder .ph-label{
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.image-placeholder span{
  font-weight: 500;
  font-size: 13px;
  color: #5c7186;
}

/* ---------- Hero (Opção 5: editorial) ---------- */
.hero{ padding: 96px 0 96px; }
.hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(212,160,23,0.14);
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 16px 6px 6px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
.hero-eyebrow-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}
.hero-eyebrow-icon svg{ width: 13px; height: 13px; }
.hero-copy h1{
  font-size: 52px;
  line-height: 1.16;
  font-weight: 500;
  margin-bottom: 26px;
}
.accent-underline{
  font-style: italic;
  font-weight: 600;
  background-image: linear-gradient(transparent 62%, rgba(212,160,23,0.45) 62%);
  padding: 0 2px;
}
.hero-copy .lead{
  font-size: 19px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 36px;
}
/* min-width:0 evita o "bug clássico" de grid: sem isto, o item de
   grid nunca encolhe abaixo da largura mínima implícita do seu
   conteúdo (aqui, a do .hero-blob, cujo aspect-ratio + min-height
   impõe uma largura mínima própria), o que forçava overflow real em
   ecrãs muito estreitos mesmo com o grid a colapsar para 1 coluna. */
.hero-media{ position: relative; min-width: 0; }
.hero-blob{
  position: relative;
  overflow: hidden;
  /* max-width:100% evita que aspect-ratio + min-height recalculem a
     largura do bloco a partir da altura mínima em ecrãs muito
     estreitos, o que forçava overflow horizontal real da página. */
  max-width: 100%;
  background: rgba(26,60,94,0.06);
  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
  aspect-ratio: 3/4;
  min-height: 420px;
  border: 7px solid #fff;
  box-shadow: 0 34px 64px rgba(26,60,94,0.26), 0 14px 28px rgba(26,60,94,0.16);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.hero-blob:hover{
  box-shadow: 0 40px 72px rgba(26,60,94,0.32), 0 16px 32px rgba(26,60,94,0.20);
}
.hero-photo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-shadow) var(--ease-out);
}
.hero-blob:hover .hero-photo{ transform: scale(1.035); }
/* Badge flutuante reutilizável (pill branca com sombra). Usado sobre a
   foto da hero e reaproveitado noutras secções para manter a mesma
   linguagem visual (ver Sobre Nós e Cursos). */
.floating-badge{
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--primary);
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 18px 11px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 34px rgba(26,60,94,0.30), 0 6px 16px rgba(26,60,94,0.20);
  white-space: nowrap;
}
.floating-badge-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(212,160,23,0.14);
  color: var(--accent-dark);
  flex-shrink: 0;
}
.floating-badge-icon svg{ width: 15px; height: 15px; }
.hero-badge-top{
  top: 14%;
  left: 4%;
  transform: translate(-38%, -12%);
  animation: badge-float var(--dur-float) ease-in-out infinite;
}
.hero-badge-bottom{
  bottom: 12%;
  right: 4%;
  transform: translate(38%, 12%);
  animation: badge-float var(--dur-float) ease-in-out infinite;
  /* Metade do ciclo, em oposição de fase: quando um sobe o outro desce. */
  animation-delay: -1.8s;
}
/* Usa a propriedade `translate` (independente de `transform`) para o
   flutuar não pisar o translate percentual que posiciona o badge. */
@keyframes badge-float{
  0%, 100%{ translate: 0 0; }
  50%{ translate: 0 -5px; }
}

/* O "sobrepor" dos badges é proporcional à largura do hero-media, que
   fica bem mais estreito (grid 2 colunas) entre ~901-1260px do que no
   desktop cheio; sem isto, os badges ultrapassam o viewport nessa faixa
   (ex: tablets em paisagem, iPad Pro 1032px) mesmo sem scroll horizontal
   vindo da navbar. */
@media (max-width: 1260px){
  .hero-badge-top{ left: 3%; transform: translate(-20%, -10%); }
  .hero-badge-bottom{ right: 3%; transform: translate(20%, 10%); }
}

@media (max-width: 900px){
  .hero{ padding: 48px 0 64px; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-media{ order: -1; }
  .hero-copy h1{ font-size: 36px; }
}

@media (max-width: 480px){
  /* Nomes de classe corrigidos: eram .hero-badge/.hero-badge-icon (não
     existem no HTML, ficaram órfãos de um refactor anterior para
     .floating-badge), por isso o badge nunca encolhia de facto abaixo
     de 480px. Além disso, o texto mais longo ("Professores
     Certificados") em nowrap ficava mais largo que o próprio
     contentor a estas larguras, e o overhang (translate) empurrava-o
     ainda mais para fora, causando scroll horizontal real em
     telemóveis estreitos. max-width + white-space:normal limitam a
     largura do badge independentemente do texto, e o overhang foi
     reduzido para caber com folga dentro do padding lateral do hero. */
  .floating-badge{
    font-size: 12px;
    padding: 8px 12px 8px 8px;
    gap: 6px;
    white-space: normal;
    max-width: 76%;
    line-height: 1.3;
  }
  .floating-badge-icon{ width: 20px; height: 20px; }
  .floating-badge-icon svg{ width: 12px; height: 12px; }
  .hero-badge-top{ left: 2%; transform: translate(-6%, -8%); }
  .hero-badge-bottom{ right: 2%; transform: translate(6%, 8%); }
}

/* Telemóveis muito estreitos (320-360px): mesmo já a quebrar linha, o
   texto mais longo ("Professores Certificados") ainda ultrapassava o
   ecrã com a folga de 480px; aperta mais o overhang e a largura. */
@media (max-width: 360px){
  .floating-badge{ max-width: 62%; font-size: 11px; padding: 7px 10px 7px 7px; gap: 5px; }
  .floating-badge-icon{ width: 18px; height: 18px; }
  .floating-badge-icon svg{ width: 11px; height: 11px; }
  .hero-badge-top{ left: 1%; transform: translate(-2%, -6%); }
  .hero-badge-bottom{ right: 1%; transform: translate(2%, 6%); }
}

/* ---------- Secção de estatísticas ---------- */
/* Editorial, não um bloco escuro tipo SaaS: fundo creme, números serif
   em navy, separados por um traço fino. Continua a linguagem da hero. */
.stats{
  position: relative;
  background: var(--bg-section-alt);
  padding: 56px 0;
}

/* Curva orgânica subtil entre secções de fundo diferente, em vez de uma
   linha reta. Pertence sempre à secção de baixo: fica ancorada ao seu
   topo e "sobe" para dentro da secção anterior via translateY(-100%). */
.section-wave{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  /* +2px de overlap para dentro da secção de baixo, evita uma frincha
     de sub-pixel entre o fundo sólido do SVG e o background CSS. */
  transform: translateY(calc(-100% + 2px));
  pointer-events: none;
  display: block;
}
.section-wave path{ fill: var(--bg-section-alt); }
.section-wave--white path{ fill: #fff; }
.section-wave--navy path{ fill: var(--primary); }
.section-wave--bg path{ fill: var(--bg); }
/* Variante traçada, para separar duas secções da MESMA cor (ex: a
   citação e o CTA final da metodologia). A onda normal é preenchida com
   a cor da secção de baixo, por isso entre cores iguais ficaria
   invisível; aqui desenha-se só a curva, mantendo a mesma linguagem
   das transições do site sem nenhum corte de cor.
   non-scaling-stroke impede que o preserveAspectRatio="none" estique a
   espessura da linha ao esticar o SVG. */
.section-wave--line path{
  fill: none;
  stroke: rgba(255,255,255,0.22);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.stats-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-item{
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid rgba(26,60,94,0.14);
}
.stat-item:last-child{ border-right: none; }
.stat-number{
  display: block;
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 8px;
}
.stat-label{
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 760px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .stat-item{ border-right: none; border-bottom: 1px solid rgba(26,60,94,0.14); padding-bottom: 20px; }
  .stat-item:nth-child(2n){ border-right: none; }
  .stat-item:nth-last-child(-n+2){ border-bottom: none; padding-bottom: 0; }
}

/* ---------- Título de secção (reutilizável) ---------- */
.section-title{
  font-size: 34px;
  line-height: 1.2;
  font-weight: 500;
  margin: 0 0 16px;
}
.section-lead{
  font-size: 16.5px;
  color: var(--text-muted);
  line-height: 1.65;
}
.section-head{
  max-width: 620px;
  margin: 0 auto 52px;
  text-align: center;
}
.section-cta{
  text-align: center;
  margin-top: 44px;
}

/* ---------- Sobre Nós (resumo) ---------- */
.about-preview{
  position: relative;
  background: #fff;
  padding: 96px 0;
}
.about-grid{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.about-media{ position: relative; }
.about-image-wrap{
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  background: rgba(26,60,94,0.06);
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.about-image-wrap:hover{ box-shadow: var(--shadow-photo-hover); }
.about-photo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-shadow) var(--ease-out);
}
.about-image-wrap:hover .about-photo{ transform: scale(1.035); }
.about-badge{
  bottom: -20px;
  left: 28px;
}
.about-copy p{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 18px;
  max-width: 52ch;
}
.about-copy .btn{ margin-top: 8px; }

@media (max-width: 900px){
  .about-preview{ padding: 64px 0; }
  .about-grid{ grid-template-columns: 1fr; gap: 40px; }
  .about-badge{ left: 20px; }
}

/* ---------- Cursos (overview de níveis) ---------- */
.courses-overview{ background: #fff; padding: 96px 0; }
.level-path{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 10px;
  margin: 0 0 48px;
}
.level-path::before{
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 1px;
  background: rgba(26,60,94,0.16);
  z-index: 0;
}
.level-step{ position: relative; z-index: 1; }
.level-step-name{
  display: inline-block;
  background: var(--bg);
  border: 1px solid rgba(26,60,94,0.18);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}
.level-step:first-child .level-step-name,
.level-step:last-child .level-step-name{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
/* Etapas intermédias apresentadas como bloqueadas: o cadeado fica
   nítido e só o nome é desfocado, para se perceber que há mais níveis
   sem os conseguir ler (quem quiser vê-los clica em "Ver todos os
   níveis"). De propósito sem revelação no hover: mostrar o nome ao
   passar o rato anulava a razão de ser do bloqueio.
   O desfoque é apenas visual, o texto continua no HTML e é lido
   normalmente por leitores de ecrã. */
.level-step--locked .level-step-name{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-section-alt);
  border-color: rgba(26,60,94,0.10);
  color: var(--text-muted);
  cursor: default;
  user-select: none;
}
.level-lock{
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  color: rgba(26,60,94,0.5);
}
.level-step--locked .level-step-text{
  filter: blur(5px);
  opacity: 0.85;
}

.price-banner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 36px;
  background: var(--bg-section-alt);
  border-radius: var(--radius);
  text-align: left;
}
.price-banner-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-dark);
  flex-shrink: 0;
}
.price-banner-icon svg{ width: 22px; height: 22px; }
.price-banner-copy strong{
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 500;
  color: var(--primary);
}
.price-banner-copy strong span{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}
.price-banner-copy p{
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Linha curva que liga os pills quando estes passam a várias linhas.
   Desenhada em JS (main.js) porque só ali se sabe onde cada pill caiu
   depois da quebra. Mesmo navy e espessura da linha de progresso da
   timeline de niveis.html, para as duas páginas falarem a mesma
   linguagem. */
.level-path-curve{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.level-path-curve path{
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
/* Com os pills em várias linhas, a linha reta deixa de fazer sentido:
   atravessaria o layout na diagonal errada. Quem manda é o JS. */
.level-path.is-wrapped::before{ display: none; }
/* Mais folga entre linhas quando quebra: com o espaçamento normal, a
   curva ficava quase toda escondida atrás dos pills e o pouco que se
   via lia-se como um risco diagonal em vez de um S. */
.level-path.is-wrapped{ row-gap: 30px; }

@media (max-width: 560px){
  /* Sem JS, ao menos não fica a linha reta errada por baixo dos pills */
  .level-path::before{ display: none; }
  .price-banner{ flex-direction: column; text-align: center; padding: 28px 24px; }
}

/* ---------- Diferenciais ---------- */
.differentiators{ position: relative; background: var(--bg-section-alt); padding: 96px 0; }
.differentiator-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
}
.differentiator{ text-align: center; }
.differentiator-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  transition: transform var(--dur-shadow) var(--ease-out),
              box-shadow var(--dur-shadow) var(--ease-out),
              color var(--dur-hover) var(--ease-snap);
}
.differentiator-icon svg{ width: 23px; height: 23px; }
/* Só o ícone reage, não o bloco inteiro: são quatro pontos em linha,
   e levantar os cartões todos daria um efeito de mosaico irrequieto. */
@media (hover: hover) and (pointer: fine){
  .differentiator:hover .differentiator-icon{
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(26,60,94,0.14);
    color: var(--accent-dark);
  }
}
.differentiator h3{
  font-size: 17px;
  margin-bottom: 6px;
}
.differentiator p{
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 900px){
  .courses-overview{ padding: 64px 0; }
  .differentiators{ padding: 64px 0; }
  .differentiator-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}

/* ---------- Testemunhos ---------- */
.testimonials{
  position: relative;
  background: #fff;
  padding: 96px 0;
}
/* Carrossel: mostra --items-per-view de cada vez (3 no desktop, 1 em
   mobile via media query abaixo), preparado para mais testemunhos no
   futuro sem reescrever a secção (ver main.js). */
.testimonial-carousel{
  position: relative;
  padding: 0 52px;
}
.testimonial-viewport{ overflow: hidden; }
.testimonial-track{
  display: flex;
  gap: 24px;
  transition: transform var(--dur-slide) var(--ease-out);
}
.testimonial-card{
  flex: 0 0 calc((100% - 48px) / 3);
  background: var(--bg-section-alt);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
/* Mesmo tratamento de sombra das fotos e dos restantes cartões do site */
.testimonial-card:hover{ box-shadow: var(--shadow-photo); }
.carousel-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(26,60,94,0.18);
  background: #fff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(26,60,94,0.12);
  transition: background var(--dur-hover) var(--ease-snap),
              opacity var(--dur-hover) var(--ease-snap),
              transform var(--dur-press) var(--ease-snap);
  z-index: 2;
}
.carousel-arrow svg{ width: 20px; height: 20px; }
.carousel-arrow:hover:not(:disabled){ background: var(--bg-section-alt); }
/* Mantém o translateY(-50%) que centra a seta; só acrescenta o encolher
   do press por cima dele. */
.carousel-arrow:active:not(:disabled){ transform: translateY(-50%) scale(0.94); }
.carousel-arrow:disabled{ opacity: 0.35; cursor: not-allowed; box-shadow: none; }
.carousel-arrow--prev{ left: 0; }
.carousel-arrow--next{ right: 0; }
.carousel-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}
.carousel-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(26,60,94,0.2);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-snap), transform var(--dur-hover) var(--ease-snap);
}
.carousel-dot.is-active{ background: var(--primary); transform: scale(1.3); }
.testimonials-note{
  margin-top: 36px;
  text-align: center;
  font-size: 12.5px;
  color: #5c7186;
}
.testimonial-stars{
  display: flex;
  gap: 3px;
  color: var(--accent);
  margin-bottom: 16px;
}
.testimonial-stars svg{ width: 16px; height: 16px; }
.testimonial-quote{
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 22px;
}
.testimonial-author{ display: flex; flex-direction: column; }
.testimonial-name{ font-weight: 700; font-size: 14.5px; color: var(--primary); }
.testimonial-role{ font-size: 13px; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 900px){
  .testimonials{ padding: 64px 0; }
  .testimonial-carousel{ padding: 0 40px; }
  .testimonial-card{ flex: 0 0 100%; }
  .carousel-arrow{ width: 38px; height: 38px; }
  .carousel-arrow svg{ width: 18px; height: 18px; }
}

/* ---------- CTA final ---------- */
.cta-final{
  position: relative;
  background: var(--primary);
  padding: 88px 0;
}
.cta-final-blob-wrap{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cta-final-blob{
  position: absolute;
  top: -70px;
  left: -70px;
  width: 380px;
  height: 380px;
}
.cta-final-inner{
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.cta-final h2{
  color: #fff;
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 16px;
}
.cta-final p{
  color: #b7c8d9;
  font-size: 17px;
  margin-bottom: 32px;
}
.btn-lg{ padding: 16px 36px; font-size: 16px; }
.cta-final-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 760px){
  .cta-final{ padding: 64px 0; }
}

/* ---------- Sobre Nós: hero do fundador (navy) ---------- */
.founder-hero{
  position: relative;
  background: var(--primary);
  padding: 116px 0 100px;
}
.founder-grid{
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.founder-media{ display: flex; justify-content: center; }
/* Retrato de corpo inteiro: deixou de ser círculo porque uma foto de
   corpo inteiro não cabe num círculo sem perder a cabeça e os pés (a
   circunferência estreita justamente no topo e na base).
   Sem aspect-ratio nem object-fit de propósito: a moldura toma a
   altura da própria foto, por isso nunca corta nem deixa margem
   vazia, seja qual for o recorte que a foto venha a ter. */
.founder-portrait{
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 60px rgba(0,0,0,0.30), 0 12px 24px rgba(0,0,0,0.22);
  background: rgba(255,255,255,0.06);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.founder-portrait:hover{
  box-shadow: 0 36px 68px rgba(0,0,0,0.36), 0 14px 28px rgba(0,0,0,0.26);
}
/* Sem zoom no hover aqui: com overflow:hidden, ampliar a imagem
   voltaria a cortar os pés. Fica só o reforço da sombra. */
.founder-portrait img{
  display: block;
  width: 100%;
  height: auto;
}
.founder-quote-mark{
  display: block;
  font-family: var(--font-head);
  font-size: 64px;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 4px;
}
.founder-quote{
  margin: 0 0 28px;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.45;
  color: #fff;
  max-width: 34ch;
}
.founder-attribution{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 32px;
}
.founder-attribution .dot-sep{ margin: 0 8px; color: rgba(255,255,255,0.4); font-weight: 400; }

@media (max-width: 860px){
  .founder-hero{ padding: 76px 0 64px; }
  .founder-grid{ grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .founder-media{ order: -1; }
  .founder-copy{ display: flex; flex-direction: column; align-items: center; }
  .founder-quote{ font-size: 22px; max-width: none; }
  .founder-portrait{ max-width: 250px; }
}

/* ---------- Sobre Nós: missão + carrossel de fotos (fundo claro) ---------- */
.mission-section{
  position: relative;
  background: var(--bg);
  padding: 100px 0 96px;
}
.mission-inner{
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}
.mission-statement{
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.4;
  margin: 0 0 24px;
}
.mission-context{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto;
}

.gallery-carousel{ position: relative; }
.gallery-viewport{
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.gallery-viewport:hover{ box-shadow: var(--shadow-photo-hover); }
.gallery-track{
  display: flex;
  transition: transform var(--dur-slide) var(--ease-out);
}
.gallery-slide{
  flex: 0 0 100%;
  aspect-ratio: 16/8;
  background: rgba(26,60,94,0.06);
  /* Contém o zoom da imagem no hover dentro dos limites do próprio
     slide, sem sangrar para os slides vizinhos no track. */
  overflow: hidden;
}
.gallery-slide img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-shadow) var(--ease-out);
}
.gallery-slide:hover img{ transform: scale(1.035); }
.carousel-arrow--overlay{ background: rgba(255,255,255,0.92); }
.carousel-arrow--overlay.carousel-arrow--prev{ left: 16px; }
.carousel-arrow--overlay.carousel-arrow--next{ right: 16px; }
.gallery-carousel .carousel-dots{ margin-top: 22px; }

@media (max-width: 900px){
  .mission-section{ padding: 64px 0 72px; }
  .mission-inner{ margin-bottom: 28px; }
  .mission-statement{ font-size: 25px; }
  .gallery-slide{ aspect-ratio: 4/3; }
  .carousel-arrow--overlay{ width: 38px; height: 38px; }
  .carousel-arrow--overlay svg{ width: 18px; height: 18px; }
}

/* ---------- Sobre Nós: A Nossa História ---------- */
.story-section{ position: relative; background: #fff; padding: 96px 0; }
.story-grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  align-items: start;
}
.story-content p{
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 62ch;
  margin-bottom: 20px;
}
.story-content p:last-child{ margin-bottom: 0; }
/* Linha do tempo simples (2014 → hoje), com marcos fictícios por
   agora (ver aviso HTML na secção); resolve o vazio visual ao lado
   do texto corrido sem repetir a barra de estatísticas da home. */
.story-timeline{
  position: relative;
  padding-left: 28px;
}
.story-timeline::before{
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(26,60,94,0.15);
}
.timeline-item{
  position: relative;
  padding-bottom: 34px;
}
.timeline-item:last-child{ padding-bottom: 0; }
.timeline-item::before{
  content: "";
  position: absolute;
  left: -28px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
}
.timeline-item.is-current::before{ background: var(--accent); }
.timeline-year{
  display: block;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}
.timeline-desc{
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 30ch;
}

@media (max-width: 860px){
  .story-section{ padding: 64px 0; }
  .story-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Sobre Nós: Os Nossos Valores ---------- */
/* Deliberadamente diferente da grelha "Porque escolher a MEA" da home
   (ícone centrado no topo): aqui o ícone fica ao lado do texto, em
   linha, para não repetir o mesmo layout de cartão. */
.values-section{
  position: relative;
  background: var(--bg-section-alt);
  padding: 96px 0;
}
.values-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px;
}
.value-item{
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.value-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-dark);
  transition: transform var(--dur-shadow) var(--ease-out),
              box-shadow var(--dur-shadow) var(--ease-out);
}
.value-icon svg{ width: 24px; height: 24px; }
/* Mesmo gesto dos diferenciais da home, para as duas grelhas de ícones
   do site reagirem da mesma maneira. */
@media (hover: hover) and (pointer: fine){
  .value-item:hover .value-icon{
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(26,60,94,0.14);
  }
}
.value-copy h3{
  font-size: 18px;
  margin-bottom: 8px;
}
.value-copy p{
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

@media (max-width: 760px){
  .values-section{ padding: 64px 0; }
  .values-grid{ grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Sobre Nós: A Nossa Equipa ---------- */
.team-section{ position: relative; background: #fff; padding: 96px 0; }
/* Flex em vez de grid de 4 colunas fixas: cada cartão mantém a largura
   de 1/4 da linha, mas a linha fica centrada, por isso com 2 (ou 3)
   professores não sobra um buraco à direita. Se a equipa voltar a ter
   4 ou mais, preenche a linha e quebra para a seguinte como antes. */
.team-grid{
  --team-gap: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--team-gap);
}
.team-member{
  flex: 0 1 calc((100% - 3 * var(--team-gap)) / 4);
  text-align: center;
}
.team-photo{
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/5;
  background: rgba(26,60,94,0.06);
  margin-bottom: 18px;
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.team-photo:hover{ box-shadow: var(--shadow-photo-hover); }
.team-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-shadow) var(--ease-out);
}
.team-photo:hover img{ transform: scale(1.035); }
.team-name{ font-size: 17px; margin-bottom: 4px; }
/* Sem foto: iniciais em Fraunces sobre o azul da marca, no mesmo formato
   4:5 das fotos, para o cartão não ficar com um buraco. */
.team-initials{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--accent);
  font-family: var(--font-head);
  font-size: clamp(44px, 6vw, 72px);
  letter-spacing: 0.02em;
}
.team-bio{
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: -6px auto 14px;
  max-width: 260px;
}
.team-role{
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.team-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(212,160,23,0.14);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.team-badge svg{ width: 13px; height: 13px; color: var(--accent-dark); flex-shrink: 0; }

@media (max-width: 900px){
  .team-section{ padding: 64px 0; }
  .team-member{ flex-basis: calc((100% - var(--team-gap)) / 2); }
}

/* ---------- Sobre Nós: O Nosso Espaço ---------- */
.espaco-section{ position: relative; background: var(--bg); padding: 96px 0; }
.espaco-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.espaco-item{ text-align: left; }
/* Com uma só foto, ocupa a linha toda mas com largura limitada e
   centrada, em vez de ficar meia grelha vazia à direita. */
.espaco-item:only-child{
  grid-column: 1 / -1;
  width: 100%;
  max-width: 760px;
  justify-self: center;
}
.espaco-photo{
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4/3;
  background: rgba(26,60,94,0.06);
  margin-bottom: 12px;
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.espaco-photo:hover{ box-shadow: var(--shadow-photo-hover); }
.espaco-photo img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-shadow) var(--ease-out);
}
.espaco-photo:hover img{ transform: scale(1.035); }
.espaco-caption{
  font-size: 13.5px;
  color: var(--text-muted);
  font-style: italic;
}

@media (max-width: 760px){
  .espaco-section{ padding: 64px 0; }
  .espaco-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Contactos: grelha de cartões + mapa ---------- */
.contactos-section{
  position: relative;
  background: var(--bg);
  padding: 80px 0 96px;
}
.contactos-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: stretch;
}
.contactos-info{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.contact-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.contact-card{
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.contact-card:hover{ box-shadow: var(--shadow-photo-hover); }
.contact-card h2{
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.contact-card p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
}
.contact-card p strong{ color: var(--primary); font-weight: 700; }

/* Faixa navy a fechar a coluna da esquerda, com o único CTA da página */
.contact-cta{
  background: var(--primary);
  border-radius: var(--radius);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.contact-cta p{
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

/* Sem min-height em desktop de propósito: é a coluna da esquerda que
   define a altura da linha, e o mapa estica para a acompanhar. Com um
   min-height aqui era o mapa a mandar, e sobrava espaço vazio por
   baixo da faixa navy. */
.contactos-map{
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-photo);
  background: rgba(26,60,94,0.06);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.contactos-map:hover{ box-shadow: var(--shadow-photo-hover); }
.contactos-map{ position: relative; }
.contactos-map iframe{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Enquanto o Google Maps carrega, o iframe fica transparente e vê-se o
   placeholder por baixo. Só com JS (classe .js no <html>), porque é o
   onload do iframe que o volta a mostrar. */
.js .contactos-map .map-frame{
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.js .contactos-map .map-frame.is-loaded{ opacity: 1; }
.map-placeholder{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-section-alt);
  color: var(--text-muted);
  font-size: 14px;
}
.map-placeholder svg{
  width: 34px;
  height: 34px;
  color: var(--primary);
  animation: map-pin-bob 1.4s var(--ease-out) infinite alternate;
}
@keyframes map-pin-bob{
  from{ transform: translateY(0); }
  to{ transform: translateY(-6px); }
}

@media (max-width: 860px){
  .contactos-section{ padding: 56px 0 64px; }
  /* Coluna única: os cartões empilham, a faixa navy fica a toda a
     largura e o mapa desce para debaixo de tudo. */
  .contactos-grid{ grid-template-columns: 1fr; gap: 24px; }
  .contact-cards{ grid-template-columns: 1fr; }
  .contactos-map, .contactos-map iframe{ min-height: 340px; }
}

/* ---------- Metodologia: hero (declaração + o par de cartões) ---------- */
.metodologia-hero{
  position: relative;
  background: var(--bg-section-alt);
  padding: 84px 0 88px;
}
.metodologia-hero-top{
  max-width: 820px;
  text-align: center;
  margin-bottom: 44px;
}
.metodologia-hero h1{
  font-size: 42px;
  line-height: 1.18;
  font-weight: 500;
  margin-bottom: 20px;
}
.metodologia-hero .lead{
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto;
}
.method-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 940px;
  margin: 0 auto;
}
.method-card{
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.method-card:hover{ box-shadow: var(--shadow-photo-hover); }
.method-card-label{
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 10px;
}
.method-card-title{
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 10px;
}
.method-card p{
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted);
}
.metodologia-hero-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
}


@media (max-width: 860px){
  .metodologia-hero{ padding: 56px 0 64px; }
  .metodologia-hero h1{ font-size: 31px; }
  .metodologia-hero-top{ margin-bottom: 32px; }
  .method-pair{ grid-template-columns: 1fr; }
  .method-card{ padding: 26px 24px; }
}

/* ---------- Metodologia: as três etapas do foco ---------- */
/* Eco da timeline de niveis.html, mas na horizontal e com uma barra
   única que se preenche, em vez do trilho vertical com medalhões, para
   não repetir a mesma construção. A última etapa fica a sólido, como o
   Beginner/Advanced no percurso de níveis. */
.method-arc{
  position: relative;
  background: #fff;
  padding: 96px 0;
}
.arc-track{ position: relative; }
.arc-bar{
  height: 3px;
  background: rgba(26,60,94,0.12);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 40px;
}
.arc-bar-fill{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  transform-origin: left center;
}
.arc-stages{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.arc-stage{
  background: var(--bg-section-alt);
  border-radius: var(--radius);
  padding: 28px 28px 30px;
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.arc-stage:hover{ box-shadow: var(--shadow-photo); }
.arc-stage-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-family: var(--font-head);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 16px;
}
.arc-stage-levels{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 6px;
}
.arc-stage-title{
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
}
.arc-stage p{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
/* Última etapa a sólido, o destino do percurso */
.arc-stage--solid{ background: var(--primary); }
.arc-stage--solid .arc-stage-num{ background: var(--accent); color: var(--primary); }
.arc-stage--solid .arc-stage-levels{ color: var(--accent); }
.arc-stage--solid .arc-stage-title{ color: #fff; }
.arc-stage--solid p{ color: #c3d2e0; }

.method-arc-note{
  margin-top: 36px;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Revelação sequencial ao scroll (ver main.js). O estado escondido só
   existe depois de o JS assumir o controlo (.has-reveal), para o
   conteúdo aparecer na mesma sem JS. */
.arc-track.has-reveal .arc-bar-fill{
  transform: scaleX(0);
  transition: transform var(--dur-fill) var(--ease-out) 100ms;
}
.arc-track.has-reveal.is-revealed .arc-bar-fill{ transform: scaleX(1); }

.arc-track.has-reveal .arc-stage{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.arc-track.has-reveal .arc-stage:nth-of-type(2){ transition-delay: var(--reveal-stagger-lg); }
.arc-track.has-reveal .arc-stage:nth-of-type(3){ transition-delay: calc(var(--reveal-stagger-lg) * 2); }
.arc-track.has-reveal.is-revealed .arc-stage{ opacity: 1; transform: translateY(0); }

@media (max-width: 860px){
  .method-arc{ padding: 64px 0; }
  .arc-stages{ grid-template-columns: 1fr; gap: 18px; }
  .arc-bar{ margin-bottom: 30px; }
}

/* ---------- Metodologia: vídeo do método em ação ---------- */
/* Fundo branco, a continuar a zona clara da secção anterior (por isso
   sem onda entre as duas). A moldura não fixa rácio: o vídeo define a
   própria altura, para se poder trocar o ficheiro por outro de
   proporções diferentes sem mexer na estrutura nem cortar imagem.
   Cantos e sombra iguais aos das fotos de sobre.html. */
.method-video{
  position: relative;
  background: #fff;
  padding: 24px 0 96px;
}
.method-video-grid{
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 44px;
  align-items: center;
}
.method-video-frame{
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(26,60,94,0.06);
  box-shadow: var(--shadow-photo);
  transition: box-shadow var(--dur-shadow) var(--ease-out);
}
.method-video-frame:hover{ box-shadow: var(--shadow-photo-hover); }
.method-video-el{
  display: block;
  width: 100%;
  height: auto;
}
.method-video-caption{
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.method-video-points{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.method-video-points li{
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--primary);
}
.method-point-icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(212,160,23,0.16);
  color: var(--accent-dark);
}
.method-point-icon svg{ width: 14px; height: 14px; }

@media (max-width: 860px){
  .method-video{ padding: 8px 0 64px; }
  .method-video-grid{ grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Metodologia: faixa da citação ---------- */
/* Layout deliberadamente diferente do de sobre.html: sem retrato, texto
   centrado sobre o tom mais escuro da paleta, com uma aspa gigante em
   marca de água a servir de textura. O overflow fica no wrapper da
   textura, nunca na secção, senão cortaria a onda de transição. */
.method-quote{
  position: relative;
  background: var(--primary);
  padding: 96px 0;
}
.method-quote-texture{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Centrada de propósito: encostada ao topo ficava cortada pelo limite
   da secção e só se viam as duas pontas, o que parecia um defeito em
   vez de marca de água. */
.method-quote-texture::before{
  content: "\201C";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-head);
  font-size: 400px;
  line-height: 1;
  color: #fff;
  opacity: 0.05;
}
.method-quote-inner{
  position: relative;
  z-index: 1;
  max-width: 860px;
  text-align: center;
}
.method-quote blockquote{
  margin: 0 0 26px;
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.45;
  color: #fff;
}
.method-quote-attr{
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent);
}
.method-quote-attr span{
  color: rgba(255,255,255,0.4);
  font-weight: 400;
  margin: 0 8px;
}

@media (max-width: 860px){
  .method-quote{ padding: 64px 0; }
  .method-quote blockquote{ font-size: 22px; }
  .method-quote-texture::before{ font-size: 260px; }
}

/* ---------- Níveis: hero da página ---------- */
.niveis-hero{ background: var(--bg); padding: 88px 0 80px; }
.niveis-hero-inner{ max-width: 720px; margin: 0 auto; text-align: center; }
.niveis-hero h1{
  font-size: 44px;
  line-height: 1.18;
  font-weight: 500;
  margin-bottom: 22px;
}
.niveis-hero .lead{
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 auto 32px;
  max-width: 54ch;
}

@media (max-width: 760px){
  .niveis-hero{ padding: 56px 0 56px; }
  .niveis-hero h1{ font-size: 32px; }
}

/* ---------- Níveis: percurso dos seis níveis ---------- */
/* Timeline alternada (esquerda/direita) com um trilho central que se
   preenche conforme o scroll e marcadores que acendem a dourado à
   medida que cada nível é revelado (ver main.js). O trilho é medido em
   JS para começar e acabar exatamente no centro do primeiro e do
   último marcador. */
.levels-section{
  position: relative;
  background: var(--bg-section-alt);
  padding: 96px 0;
}
.levels-timeline{ position: relative; }
.levels-rail{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  background: rgba(26,60,94,0.12);
  border-radius: var(--radius-pill);
}
.levels-progress{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--primary);
  border-radius: var(--radius-pill);
}
.level-item{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 88px 1fr;
  align-items: center;
  padding: 18px 0;
}
.level-item--left .level-body{ grid-column: 1; }
.level-item--right .level-body{ grid-column: 3; }
.level-marker{
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(26,60,94,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  transition: background var(--dur-shadow) var(--ease-out), border-color var(--dur-shadow) var(--ease-out),
              transform var(--dur-shadow) var(--ease-out);
}
.level-item.is-revealed .level-marker{
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}
.level-body{
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-photo);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out),
              box-shadow var(--dur-shadow) var(--ease-out);
}
.level-body:hover{ box-shadow: var(--shadow-photo-hover); }
.level-name{ font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.level-desc{
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.level-learn li{
  position: relative;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  padding: 3px 0 3px 16px;
}
.level-learn li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 7px;
  height: 1.5px;
  background: var(--accent);
}

/* O estado escondido só existe quando o JS assume a revelação
   (.has-reveal), para que sem JS o conteúdo apareça sempre. */
.levels-timeline.has-reveal .level-item--left .level-body{ opacity: 0; transform: translateX(-28px); }
.levels-timeline.has-reveal .level-item--right .level-body{ opacity: 0; transform: translateX(28px); }
.levels-timeline.has-reveal .level-item.is-revealed .level-body{ opacity: 1; transform: translateX(0); }

@media (max-width: 760px){
  .levels-section{ padding: 64px 0; }
  /* 23px = centro da coluna de 46px do marcador, para o trilho ficar
     exatamente por baixo dos marcadores em coluna única. */
  .levels-rail{ left: 23px; }
  .level-item{ grid-template-columns: 46px 1fr; gap: 16px; align-items: start; padding: 14px 0; }
  .level-item--left .level-body,
  .level-item--right .level-body{ grid-column: 2; padding: 20px 22px; }
  .levels-timeline.has-reveal .level-item--left .level-body,
  .levels-timeline.has-reveal .level-item--right .level-body{ transform: translateX(24px); }
  .levels-timeline.has-reveal .level-item.is-revealed .level-body{ transform: translateX(0); }
  .level-marker{ grid-column: 1; }
}

/* ---------- Página 404 ---------- */
/* O min-height evita o defeito clássico das páginas de erro: com pouco
   conteúdo, o rodapé subia para o meio do ecrã e deixava uma faixa vazia
   por baixo. 220px é a folga aproximada do rodapé. */
.error-section{
  background: var(--bg);
  padding: 80px 0 96px;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-h, 64px) - 220px);
}
.error-inner{
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.error-eyebrow{ margin-bottom: 24px; }
.error-inner h1{
  font-size: 40px;
  line-height: 1.18;
  font-weight: 500;
  margin-bottom: 18px;
}
.error-inner .lead{
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 auto 32px;
  max-width: 48ch;
}
.error-actions{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 760px){
  .error-section{ padding: 56px 0 64px; min-height: 0; }
  .error-inner h1{ font-size: 30px; }
}

/* ---------- Níveis: preço e estrutura de pagamento ---------- */
.pricing-section{ position: relative; background: #fff; padding: 96px 0; }
.pricing-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.pricing-amount{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.pricing-amount strong{
  font-family: var(--font-head);
  font-size: 56px;
  font-weight: 500;
  color: var(--primary);
  line-height: 1;
}
.pricing-amount span{ font-size: 16px; color: var(--text-muted); }
.pricing-copy p{
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 44ch;
}
.payment-card{
  background: var(--bg-section-alt);
  border-radius: var(--radius);
  padding: 32px 34px;
}
.payment-card h3{ font-size: 18px; margin-bottom: 10px; }
.payment-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(26,60,94,0.12);
  font-size: 15px;
  color: var(--text-muted);
}
.payment-row strong{ font-weight: 700; color: var(--primary); }
.payment-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 2px solid rgba(26,60,94,0.18);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}
.payment-total strong{ font-family: var(--font-head); font-size: 22px; font-weight: 600; }
.payment-note{
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 860px){
  .pricing-section{ padding: 64px 0; }
  .pricing-grid{ grid-template-columns: 1fr; gap: 36px; }
  .pricing-amount strong{ font-size: 46px; }
}

/* ---------- Menos movimento (prefers-reduced-motion) ----------
   Quem pediu menos animação no sistema operativo vê o site inteiro
   parado, mas completo: nada fica escondido à espera de um gatilho que
   já não dispara. Regra geral primeiro (corta a duração de tudo, em vez
   de listar animação a animação e arriscar esquecer as próximas), e a
   seguir os casos que precisam de repor o estado final à mão.
   O main.js faz a mesma verificação e nem chega a marcar os elementos
   para revelação, por isso isto é a segunda rede, não a única. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html{ scroll-behavior: auto; }

  /* ::view-transition-* vive numa árvore de pseudo-elementos separada
     do DOM normal, o seletor universal (*) acima não a alcança, por
     isso a transição entre páginas (ver @view-transition no topo do
     ficheiro) precisa da sua própria regra aqui para respeitar menos
     movimento. Sem isto, quem pede menos animação ao sistema continua
     a ver o crossfade a cada troca de página. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){
    animation: none !important;
  }

  /* Estados de repouso que dependiam da animação para se desfazerem */
  [data-enter],
  [data-reveal].has-reveal,
  [data-reveal-children].has-reveal > *,
  .levels-timeline.has-reveal .level-item--left .level-body,
  .levels-timeline.has-reveal .level-item--right .level-body,
  .arc-track.has-reveal .arc-stage{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* A barra das etapas fica cheia de imediato, em vez de a zero */
  .arc-track.has-reveal .arc-bar-fill{ transform: scaleX(1) !important; }
  /* Hovers e press que mexem o elemento passam a ser só de cor */
  .btn:active,
  .btn-accent:hover,
  .differentiator:hover .differentiator-icon,
  .value-item:hover .value-icon,
  .hero-blob:hover .hero-photo,
  .about-image-wrap:hover .about-photo,
  .gallery-slide:hover img,
  .team-photo:hover img,
  .espaco-photo:hover img,
  .level-item.is-revealed .level-marker{
    transform: none !important;
  }
  /* Exceção: aqui o transform não é decoração, é o que centra a seta
     verticalmente, por isso repõe-se sem o scale do press. */
  .carousel-arrow:active:not(:disabled){ transform: translateY(-50%) !important; }
}

/* ---------- Rodapé ---------- */
.site-footer{
  position: relative;
  background: var(--bg-section-alt);
}
.footer-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 32px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer-brand img{
  display: block;
  height: auto;
}
.footer-eyebrow{
  display: inline-block;
  background: rgba(212,160,23,0.14);
  color: var(--primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-top: 18px;
}
.footer-brand p{
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-muted);
  max-width: 32ch;
  line-height: 1.7;
}
.footer-brand p strong{
  color: var(--primary);
  font-weight: 700;
}
.footer-heading{
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 16px;
  display: block;
}
.footer-links li{ margin-bottom: 10px; }
.footer-links a{
  position: relative;
  display: inline-block;
  font-size: 14.5px;
  color: var(--text-muted);
  transition: color var(--dur-hover) var(--ease-snap);
}
.footer-links a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-snap);
}
@media (hover: hover) and (pointer: fine){
  .footer-links a:hover{ color: var(--primary); }
  .footer-links a:hover::after{ transform: scaleX(1); }
}
.footer-contact p{
  font-size: 14.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.footer-contact a:hover{ color: var(--primary); }
/* Redes sociais no rodapé: ícones redondos discretos, que ganham a cor
   da marca no hover. */
.social-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.social-links a,
.social-links .social-pending{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(26,60,94,0.08);
  color: var(--primary);
  transition: background var(--dur-hover) var(--ease-snap), color var(--dur-hover) var(--ease-snap);
}
.social-links a:hover,
.social-links a:focus-visible{
  background: var(--primary);
  color: #fff;
}
.social-links svg{ width: 18px; height: 18px; fill: currentColor; }
.social-links .social-pending{ cursor: default; }

.footer-bottom{
  background: var(--bg-section-alt);
  border-top: 1px solid rgba(26,60,94,0.10);
  padding: 20px 32px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 760px){
  .footer-inner{ grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Botão "Voltar ao topo" ---------- */
/* Empilhado por cima do botão de WhatsApp, que fica ancorado ao canto
   por estar sempre visível: 24px (base) + 52px (WhatsApp) + 16px. */
.back-to-top{
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--primary);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: opacity var(--dur-hover) var(--ease-snap),
              transform var(--dur-hover) var(--ease-snap),
              visibility 220ms, background var(--dur-hover) var(--ease-snap);
}
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.back-to-top:hover{ background: var(--accent-dark); }
/* Anel de progresso: acompanha a % de scroll da página (ver main.js) */
.back-to-top-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.back-to-top-ring-track{
  fill: none;
  stroke: rgba(26,60,94,0.16);
  stroke-width: 2;
}
.back-to-top-ring-progress{
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 131.9;
  stroke-dashoffset: 131.9;
  transition: stroke-dashoffset 100ms linear;
}
.back-to-top-icon{
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}

@media (max-width: 760px){
  /* 16px (base) + 48px (WhatsApp em mobile) + 18px de intervalo.
     O intervalo tem de ser maior do que parece necessário porque a
     sombra do botão de WhatsApp tem 18px de desfoque e invadia o
     espaço entre os dois, dando o aspeto de estarem colados. */
  .back-to-top{ right: 16px; bottom: 82px; }
}

/* ---------- Botão flutuante de WhatsApp ---------- */
/* Sempre visível (ao contrário do "voltar ao topo", que só aparece
   depois de scroll), por isso fica ancorado ao canto e o outro empilha
   por cima. Verde da marca WhatsApp, propositadamente fora da paleta
   do site para ser reconhecível de imediato. */
.whatsapp-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.22);
  transition: transform var(--dur-shadow) var(--ease-out), box-shadow var(--dur-shadow) var(--ease-out), background var(--dur-hover) var(--ease-snap);
}
.whatsapp-float svg{
  width: 27px;
  height: 27px;
  fill: currentColor;
}
.whatsapp-float:hover{
  background: #1eb455;
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.34), 0 4px 10px rgba(0,0,0,0.26);
}
.whatsapp-float:active{ transform: scale(0.97); }

@media (max-width: 760px){
  .whatsapp-float{ right: 16px; bottom: 16px; width: 48px; height: 48px; }
  .whatsapp-float svg{ width: 25px; height: 25px; }
}

@media (prefers-reduced-motion: reduce){
  .whatsapp-float{ transition: background var(--dur-hover) var(--ease-snap); }
  .whatsapp-float:hover,
  .whatsapp-float:active{ transform: none; }
}