@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');

/* ============================================================
   TOKENS
   Paleta ancorada na identidade real: roxo e verde do logótipo,
   lápis coloridos como acentos, fundo creme dos materiais.
   ============================================================ */
:root {
  --roxo-900: #2a1b33;
  --roxo-800: #43225a;
  --roxo-700: #552a72;
  --roxo-600: #6b2d8e;
  --roxo-500: #8341ab;
  --roxo-300: #c9a5dd;
  --roxo-100: #efe4f6;
  --roxo-50:  #f8f3fb;

  --verde-700: #1f7742;
  --verde-600: #2e9b57;
  --verde-500: #43b06c;
  --verde-100: #dcf2e5;

  /* lápis — acentos pontuais */
  --lapis-vermelho: #e0403f;
  --lapis-ambar:    #f0a202;
  --lapis-azul:     #2e7fd4;
  --lapis-verde:    #2e9b57;

  --creme:      #fdfaf5;
  --creme-fundo:#f6efe4;
  --branco:     #ffffff;

  --tinta:      #2a1b33;
  --tinta-media:#5c4b66;
  --tinta-suave:#7a6b83;
  --linha:      #e7dfd2;

  /* espaçamento — base 4px */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px;

  --raio-sm: 8px;
  --raio:    16px;
  --raio-lg: 24px;
  --raio-xl: 32px;
  --raio-pill: 999px;

  --sombra-sm: 0 1px 2px rgba(42, 27, 51, .06), 0 2px 6px rgba(42, 27, 51, .04);
  --sombra:    0 4px 12px rgba(42, 27, 51, .07), 0 12px 32px rgba(42, 27, 51, .06);
  --sombra-lg: 0 12px 28px rgba(42, 27, 51, .10), 0 32px 64px rgba(42, 27, 51, .08);

  --largura: 1180px;
  --largura-estreita: 760px;

  --z-base: 1;
  --z-sticky: 10;
  --z-nav: 20;
  --z-overlay: 30;
  --z-modal: 50;

  --transicao: 200ms cubic-bezier(.2, .6, .3, 1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

a { color: var(--roxo-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 30, 'opsz' 40;
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 600;
  color: var(--roxo-900);
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }

p { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--roxo-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--roxo-100); color: var(--roxo-900); }

.salta-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: var(--z-modal);
  background: var(--roxo-600);
  color: #fff;
  padding: var(--e-3) var(--e-5);
  border-radius: var(--raio-sm);
  transition: top var(--transicao);
}
.salta-para-conteudo:focus { top: var(--e-4); }

/* ============================================================
   LAYOUT
   ============================================================ */
.envolve {
  width: min(100% - 2 * var(--e-5), var(--largura));
  margin-inline: auto;
}
@media (max-width: 480px) {
  .envolve { width: min(100% - 2 * var(--e-4), var(--largura)); }
}

.seccao { padding-block: clamp(56px, 7vw, 104px); }
.seccao--apertada { padding-block: clamp(40px, 5vw, 72px); }
.seccao--creme { background: var(--creme-fundo); }
.seccao--roxa { background: var(--roxo-800); color: #f3ebf7; }
.seccao--roxa h2, .seccao--roxa h3 { color: #fff; }

.cabecalho-seccao { max-width: 640px; margin-bottom: clamp(32px, 4vw, 56px); }
.cabecalho-seccao--centro { margin-inline: auto; text-align: center; }

.sobrancelha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde-700);
  margin-bottom: var(--e-3);
}
.sobrancelha::before {
  content: '';
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lapis-vermelho), var(--lapis-ambar), var(--lapis-azul), var(--lapis-verde));
}
.seccao--roxa .sobrancelha { color: var(--roxo-300); }

.lede {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--tinta-media);
  margin-top: var(--e-4);
  max-width: 62ch;
}
.seccao--roxa .lede { color: #d9c9e4; }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-6);
  border-radius: var(--raio-pill);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--transicao), color var(--transicao),
              box-shadow var(--transicao), border-color var(--transicao);
}
.btn svg { flex: none; }

.btn--primario {
  background: var(--roxo-600);
  color: #fff;
  box-shadow: var(--sombra-sm);
}
.btn--primario:hover { background: var(--roxo-700); box-shadow: var(--sombra); }

.btn--verde { background: var(--verde-600); color: #fff; box-shadow: var(--sombra-sm); }
.btn--verde:hover { background: var(--verde-700); box-shadow: var(--sombra); }

.btn--contorno {
  background: transparent;
  color: var(--roxo-700);
  border: 2px solid var(--roxo-300);
}
.btn--contorno:hover { border-color: var(--roxo-600); background: var(--roxo-50); }

.btn--claro { background: #fff; color: var(--roxo-700); }
.btn--claro:hover { background: var(--roxo-50); }

.btn--bloco { width: 100%; }

/* ============================================================
   ETIQUETAS
   ============================================================ */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--e-3);
  border-radius: var(--raio-pill);
  font-size: .8125rem;
  font-weight: 700;
  background: var(--roxo-100);
  color: var(--roxo-700);
}
.etiqueta--verde { background: var(--verde-100); color: var(--verde-700); }
.etiqueta--ambar { background: #fdf0d5; color: #8a5a00; }

/* ============================================================
   NAVEGAÇÃO
   ============================================================ */
.barra-topo {
  background: var(--roxo-800);
  color: #e6d8ee;
  font-size: .875rem;
}
.barra-topo__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-5);
  padding-block: 9px;
  text-align: center;
}
.barra-topo a { color: #fff; text-decoration: none; font-weight: 600; }
.barra-topo a:hover { text-decoration: underline; }
.barra-topo__item { display: inline-flex; align-items: center; gap: 7px; }
.barra-topo__item svg { flex: none; opacity: .8; }
@media (max-width: 620px) {
  .barra-topo__item--secundario { display: none; }
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(253, 250, 245, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.cabecalho.is-preso {
  border-bottom-color: var(--linha);
  box-shadow: 0 4px 20px rgba(42, 27, 51, .05);
}
.cabecalho__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
}

.marca { display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; }
.marca__lapis { display: flex; gap: 2.5px; align-items: flex-end; flex: none; }
.marca__lapis span { width: 5px; border-radius: 3px 3px 1px 1px; display: block; }
.marca__lapis span:nth-child(1) { height: 20px; background: var(--lapis-vermelho); }
.marca__lapis span:nth-child(2) { height: 27px; background: var(--lapis-ambar); }
.marca__lapis span:nth-child(3) { height: 23px; background: var(--lapis-azul); }
.marca__lapis span:nth-child(4) { height: 30px; background: var(--lapis-verde); }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nome {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--roxo-700);
  letter-spacing: -.02em;
}
.marca__nome em { font-style: normal; color: var(--verde-600); }
.marca__sub {
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  font-weight: 700;
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: var(--e-2); }
.nav__lista { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.nav__link {
  display: block;
  padding: 10px var(--e-4);
  border-radius: var(--raio-pill);
  font-weight: 600;
  font-size: .96875rem;
  color: var(--tinta-media);
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao);
}
.nav__link:hover { background: var(--roxo-50); color: var(--roxo-700); }
.nav__link[aria-current='page'] { color: var(--roxo-700); background: var(--roxo-100); }

.nav__cta { margin-left: var(--e-3); }

.alternar-menu {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-sm);
  color: var(--roxo-700);
}
.alternar-menu:hover { background: var(--roxo-50); }

@media (max-width: 940px) {
  .alternar-menu { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 0 0 auto;
    top: var(--altura-cabecalho, 72px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--e-4) var(--e-5) var(--e-6);
    background: var(--creme);
    border-bottom: 1px solid var(--linha);
    box-shadow: var(--sombra-lg);
    max-height: calc(100dvh - var(--altura-cabecalho, 72px));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }
  .nav.is-aberta { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__lista { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 14px var(--e-4); font-size: 1.0625rem; }
  .nav__cta { margin: var(--e-4) 0 0; }
  .nav__cta .btn { width: 100%; }
}

/* ============================================================
   HERO COM PARALLAX
   Quatro camadas sobrepostas. Ao fazer scroll cada uma desloca-se
   a uma velocidade diferente (ver iniciarParallax em main.js):
   1 fundo (mais rápido) · 2 véu · 3 conteúdo · 4 remate (quase parado).
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 82svh, 780px);
  background: var(--creme-fundo);
}

.hero__camada {
  grid-area: 1 / 1;
  width: 100%;
  will-change: transform;
}

/* — camada 1: imagem de fundo —
   É mais alta que o hero para poder deslocar-se sem descobrir as bordas. */
.hero__fundo {
  position: absolute;
  inset: -14% 0 -14% 0;
  height: 128%;
  z-index: -3;
}
.hero__fundo picture, .hero__fundo img { display: block; width: 100%; height: 100%; }
.hero__fundo img { object-fit: cover; object-position: 62% 50%; }

/* — camada 2: véu que garante o contraste do texto — */
.hero__veu {
  position: absolute;
  inset: -14% 0 -14% 0;
  height: 128%;
  z-index: -2;
  background:
    linear-gradient(100deg,
      rgba(253, 250, 245, .96) 0%,
      rgba(253, 250, 245, .90) 28%,
      rgba(253, 250, 245, .55) 50%,
      rgba(253, 250, 245, .08) 70%,
      rgba(253, 250, 245, 0) 84%);
}

/* — camada 4: remate inferior que funde no fundo da página — */
.hero__base {
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(253, 250, 245, 0), var(--creme) 92%);
}

/* — camada 3: conteúdo — */
.hero__conteudo {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 8vw, 104px);
}
.hero__conteudo .envolve { max-width: min(100% - 2 * var(--e-5), var(--largura)); }

.hero__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: 8px 18px 8px 12px;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(107, 45, 142, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--roxo-700);
  margin-bottom: var(--e-5);
}
.hero__etiqueta .marca__lapis { transform: scale(.62); transform-origin: center; margin-right: -6px; }

.hero__titulo {
  font-size: clamp(3.1rem, 1.9rem + 5.4vw, 6.2rem);
  line-height: .96;
  letter-spacing: -.03em;
  font-weight: 600;
  margin-bottom: var(--e-5);
  max-width: 15ch;
}
.hero__titulo .destaque { color: var(--roxo-600); position: relative; }
.hero__titulo .destaque::after { content: none; }

.hero__lede {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  color: var(--tinta-media);
  max-width: 46ch;
}

@media (max-width: 780px) {
  /* Deixa espaço para a barra fixa de contacto sem cortar as provas. */
  .hero { min-height: clamp(540px, 74svh, 700px); }
  .hero__fundo img { object-position: 50% 30%; }
  .hero__veu {
    background:
      linear-gradient(to bottom,
        rgba(253, 250, 245, .95) 0%,
        rgba(253, 250, 245, .90) 38%,
        rgba(253, 250, 245, .58) 58%,
        rgba(253, 250, 245, .12) 76%,
        rgba(253, 250, 245, 0) 90%);
  }
  .hero__conteudo { align-self: start; padding-block: clamp(28px, 6vw, 44px) var(--e-5); }
  .hero__etiqueta { margin-bottom: var(--e-4); }
  .hero__titulo { max-width: none; margin-bottom: var(--e-4); }
  .hero__lede { max-width: 38ch; }
  .hero__acoes { margin-top: var(--e-5); }

  /* Aqui o texto já assenta sobre a parte cheia da imagem, por isso as
     provas ganham um painel próprio em vez de dependerem do véu. */
  .hero__provas {
    border-top: 0;
    margin-top: var(--e-5);
    padding: var(--e-4);
    gap: var(--e-3) var(--e-4);
    border-radius: var(--raio);
    background: rgba(253, 250, 245, .82);
    border: 1px solid rgba(107, 45, 142, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
@media (max-width: 400px) { .hero__acoes .btn { width: 100%; } }

.hero__provas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(107, 45, 142, .16);
  max-width: 42rem;
}
.prova { display: flex; align-items: center; gap: var(--e-2); font-size: .9375rem; }
.prova strong { display: block; font-size: 1.05rem; color: var(--roxo-900); line-height: 1.2; }
.prova span { color: var(--tinta-suave); font-size: .8125rem; }
.prova__estrelas { color: var(--lapis-ambar); display: flex; gap: 1px; }

.hero__provas .prova strong { color: var(--roxo-900); }

/* ============================================================
   GRELHAS E CARTÕES
   ============================================================ */
.grelha { display: grid; gap: var(--e-5); }
.grelha--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grelha--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grelha--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.cartao {
  position: relative;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--sombra-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  height: 100%;
}
.cartao--ligacao:hover { border-color: var(--roxo-300); box-shadow: var(--sombra); }

.cartao__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--raio);
  background: var(--roxo-100);
  color: var(--roxo-600);
  margin-bottom: var(--e-4);
}
.cartao__icone--verde { background: var(--verde-100); color: var(--verde-700); }
.cartao__icone--ambar { background: #fdf0d5; color: #a06800; }
.cartao__icone--azul  { background: #ddebfa; color: #1f5f9e; }
.cartao__icone--vermelho { background: #fbe2e2; color: #b52f2e; }

.cartao h3 { margin-bottom: var(--e-2); }
.cartao p { color: var(--tinta-media); font-size: .96875rem; }

.cartao__lista { list-style: none; padding: 0; margin-top: var(--e-4); display: grid; gap: 9px; }
.cartao__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: .9375rem;
  color: var(--tinta-media);
}
.cartao__lista li svg { flex: none; margin-top: 5px; color: var(--verde-600); }

/* ============================================================
   PASSOS (metodologia)
   ============================================================ */
.passos { counter-reset: passo; display: grid; gap: var(--e-5); }
@media (min-width: 760px) { .passos { grid-template-columns: repeat(4, 1fr); } }

/* padding-top tem de acomodar o círculo de 40px + respiro */
.passo { position: relative; padding-top: 56px; }
.passo::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--roxo-600);
  color: #fff;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
}
.passo h3 { font-size: 1.125rem; margin-bottom: var(--e-2); }
.passo p { font-size: .9375rem; color: var(--tinta-media); }
@media (min-width: 760px) {
  .passo:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 19px; left: 52px; right: -16px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--roxo-300) 0 6px, transparent 6px 12px);
  }
}

/* ============================================================
   CICLOS
   ============================================================ */
.ciclo {
  display: grid;
  gap: var(--e-4);
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: clamp(20px, 2.4vw, 28px);
  border-top: 4px solid var(--cor-ciclo, var(--roxo-600));
  height: 100%;
}
.ciclo__topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.ciclo__anos { font-size: .875rem; font-weight: 700; color: var(--cor-ciclo, var(--roxo-600)); }
.ciclo h3 { font-size: 1.25rem; }
.ciclo__disciplinas { display: flex; flex-wrap: wrap; gap: 7px; }
.ciclo__disciplinas span {
  font-size: .8125rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: var(--raio-pill);
  background: var(--creme-fundo);
  color: var(--tinta-media);
}

/* ============================================================
   GALERIA
   ============================================================ */
.galeria { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .galeria { grid-template-columns: repeat(4, 1fr); } }

.galeria__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--roxo-100);
  aspect-ratio: 1;
}
.galeria__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, .6, .3, 1);
}
.galeria__item:hover img { transform: scale(1.05); }
@media (min-width: 700px) {
  .galeria__item--alto { grid-row: span 2; aspect-ratio: 1 / 2.06; }
  .galeria__item--largo { grid-column: span 2; aspect-ratio: 2.06 / 1; }
}
/* Em 2 colunas, um número ímpar de fotos deixaria a última órfã. */
@media (max-width: 699px) {
  .galeria__item:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 2.06 / 1; }
}

/* ============================================================
   TESTEMUNHOS
   ============================================================ */
.testemunhos { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }

.testemunho {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: clamp(20px, 2.4vw, 28px);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  height: 100%;
}
.testemunho__estrelas { color: var(--lapis-ambar); display: flex; gap: 2px; }
.testemunho blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  flex: 1;
}
.testemunho__autor { display: flex; align-items: center; gap: var(--e-3); margin-top: auto; }
.testemunho__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--roxo-100);
  color: var(--roxo-700);
  font-weight: 700;
  font-size: 1rem;
  flex: none;
}
.testemunho__nome { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.testemunho__meta { display: block; font-size: .8125rem; color: var(--tinta-suave); }

/* ============================================================
   ATIVIDADES (férias)
   ============================================================ */
.atividades { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.atividade {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 9px var(--e-4);
  border-radius: var(--raio-pill);
  background: #fff;
  border: 1px solid var(--linha);
  font-size: .9375rem;
  font-weight: 600;
}
.atividade::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ponto, var(--roxo-500));
  flex: none;
}
.seccao--roxa .atividade { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2); color: #f3ebf7; }

/* ============================================================
   HORÁRIO / MAPA
   ============================================================ */
.info-grelha { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 860px) { .info-grelha { grid-template-columns: .85fr 1.15fr; align-items: start; } }

/* Figura que acompanha um bloco de texto. O rácio fixo evita que uma
   fotografia alta ocupe meio ecrã ao lado de um parágrafo curto. */
.figura-lado {
  margin: 0;
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 3;
  background: var(--roxo-100);
}
.figura-lado img { width: 100%; height: 100%; object-fit: cover; }

.horario { list-style: none; padding: 0; display: grid; gap: 0; }
.horario li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: 11px;
  border-bottom: 1px dashed var(--linha);
  font-size: .96875rem;
}
.horario li:last-child { border-bottom: 0; }
.horario li span:first-child { font-weight: 600; }
.horario li[data-fechado] span:last-child { color: var(--tinta-suave); }
.horario li[data-hoje] { color: var(--roxo-700); font-weight: 700; }

.mapa {
  position: relative;
  border-radius: var(--raio-lg);
  overflow: hidden;
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-sm);
  background: var(--creme-fundo);
  aspect-ratio: 16 / 11;
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 560px) { .mapa { aspect-ratio: 4 / 3; } }

.contactos-lista { list-style: none; padding: 0; display: grid; gap: var(--e-4); }
.contactos-lista li { display: flex; align-items: flex-start; gap: var(--e-3); }
.contactos-lista svg { flex: none; margin-top: 3px; color: var(--roxo-600); }
.contactos-lista a { color: inherit; text-decoration: none; font-weight: 600; }
.contactos-lista a:hover { color: var(--roxo-600); text-decoration: underline; }
.contactos-lista span { display: block; font-size: .8125rem; color: var(--tinta-suave); font-weight: 400; }

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.formulario { display: grid; gap: var(--e-4); }
.campos-2 { display: grid; gap: var(--e-4); }
@media (min-width: 560px) { .campos-2 { grid-template-columns: 1fr 1fr; } }

.campo { display: grid; gap: 7px; }
.campo label { font-size: .875rem; font-weight: 700; color: var(--roxo-900); }
.campo label .opcional { font-weight: 400; color: var(--tinta-suave); }

.campo input, .campo select, .campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--e-4);
  border: 1.5px solid var(--linha);
  border-radius: var(--raio-sm);
  background: #fff;
  font-size: 1rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235c4b66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--roxo-500);
  box-shadow: 0 0 0 3px var(--roxo-100);
}
.campo input:user-invalid, .campo textarea:user-invalid { border-color: var(--lapis-vermelho); }

.campo__erro { font-size: .8125rem; color: var(--lapis-vermelho); font-weight: 600; min-height: 0; }

.consentimento { display: flex; align-items: flex-start; gap: var(--e-3); font-size: .875rem; color: var(--tinta-media); }
.consentimento input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; flex: none; accent-color: var(--roxo-600); }

.form-nota { font-size: .8125rem; color: var(--tinta-suave); }

.form-estado {
  padding: var(--e-4);
  border-radius: var(--raio-sm);
  font-size: .9375rem;
  font-weight: 600;
  display: none;
}
.form-estado.is-visivel { display: block; }
.form-estado--ok { background: var(--verde-100); color: var(--verde-700); }
.form-estado--erro { background: #fbe2e2; color: #b52f2e; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: grid; gap: var(--e-3); max-width: 780px; }
.faq details {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  min-height: 56px;
  color: var(--roxo-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  border-right: 2.5px solid var(--roxo-600);
  border-bottom: 2.5px solid var(--roxo-600);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform var(--transicao);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq summary:hover { background: var(--roxo-50); }
.faq__corpo { padding: 0 var(--e-5) var(--e-5); color: var(--tinta-media); font-size: .96875rem; }

/* ============================================================
   FAIXA CTA
   ============================================================ */
.faixa-cta {
  position: relative;
  background: var(--roxo-800);
  color: #fff;
  border-radius: var(--raio-xl);
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  text-align: center;
}
.faixa-cta::before {
  content: '';
  position: absolute;
  top: -140px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, .1) 0%, transparent 66%);
  pointer-events: none;
}
.faixa-cta > * { position: relative; }
.faixa-cta h2 { color: #fff; }
.faixa-cta p { color: #dbcbe5; margin: var(--e-4) auto 0; max-width: 52ch; }
.faixa-cta__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-6); }
@media (max-width: 400px) { .faixa-cta__acoes .btn { width: 100%; } }

/* ============================================================
   RODAPÉ
   ============================================================ */
.rodape { background: var(--roxo-900); color: #c8b8d2; padding-block: clamp(48px, 6vw, 72px) var(--e-6); font-size: .9375rem; }
.rodape__grelha { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 720px) { .rodape__grelha { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.rodape h4 {
  color: #fff;
  font-family: 'Nunito Sans', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--e-4);
}
.rodape ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.rodape a { color: #c8b8d2; text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape .marca__nome { color: #fff; }
.rodape .marca__nome em { color: var(--verde-500); }
.rodape .marca__sub { color: #9d8aa8; }
.rodape__sobre { max-width: 34ch; margin-top: var(--e-4); line-height: 1.65; }

.redes { display: flex; gap: var(--e-2); margin-top: var(--e-5); }
.redes a {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: background-color var(--transicao);
}
.redes a:hover { background: var(--roxo-600); }

.rodape__base {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: var(--e-5);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  align-items: center;
  font-size: .875rem;
  color: #9d8aa8;
}

/* ============================================================
   CABEÇALHO DE PÁGINA INTERIOR
   ============================================================ */
.cabecalho-pagina {
  background: var(--creme-fundo);
  padding-block: clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--linha);
}
.migalhas { display: flex; flex-wrap: wrap; gap: var(--e-2); font-size: .875rem; color: var(--tinta-suave); margin-bottom: var(--e-4); list-style: none; padding: 0; }
.migalhas a { color: var(--tinta-media); text-decoration: none; }
.migalhas a:hover { color: var(--roxo-600); text-decoration: underline; }
.migalhas li + li::before { content: '/'; margin-right: var(--e-2); color: var(--roxo-300); }

/* ============================================================
   UTILITÁRIOS
   ============================================================ */
.so-leitor-ecra {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.centro { text-align: center; }
.sem-margem-fim { margin-bottom: 0; }

/* Estado inicial dos elementos animados. Só se aplica quando o JS
   está ativo — assim o conteúdo permanece visível sem JS. */
html.js-animacao [data-anima],
html.js-animacao [data-hero-seq] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-animacao [data-anima],
  html.js-animacao [data-hero-seq] { opacity: 1 !important; transform: none !important; }
  /* Sem parallax: as camadas ficam onde estão. */
  .hero__camada { transform: none !important; opacity: 1 !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}