/* Fontes guardadas no próprio site (sem pedidos à Google, por causa do RGPD) */
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fontes/atkinson-hyperlegible-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fontes/atkinson-hyperlegible-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fontes/atkinson-hyperlegible-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fontes/atkinson-hyperlegible-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fontes/atkinson-hyperlegible-normal-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fontes/atkinson-hyperlegible-normal-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fontes/fraunces-italic-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(../fontes/fraunces-italic-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fontes/fraunces-normal-400-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fontes/fraunces-normal-400-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Da Menstruação à Menopausa  ·  17 de outubro de 2026
   Direção visual: "O Caminho" — uma linha de tinta atravessa cada página.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Paleta "Serena Feminina", vinda do desenho do Stitch. Os nomes dos tokens
     mantêm-se para não partir o resto da folha; só os valores mudaram. */
  --tinta:        #28152E;   /* texto principal, ameixa-carvão */
  --tinta-suave:  #4C444C;   /* texto secundário */
  --roxo:         #77517F;   /* rótulos, horas, temas */
  --roxo-escuro:  #43214C;   /* botões e ligações */
  --roxo-medio:   #A56FB5;   /* contornos de controlos */
  --lilas:        #CFC3CD;   /* filetes e separadores */
  --lilas-claro:  #F4EEF7;   /* tinta clara de fundo */
  --papel:        #FCF9F7;   /* fundo */
  --papel-fundo:  #FAF7F5;   /* faixas alternadas, creme */

  /* Os três acentos novos do Stitch, que dão o calor que faltava */
  --rosa:         #C58CA7;   /* rosa-velho */
  --rosa-lavado:  #FDF6F9;
  --terracota:    #C27D66;
  --sage:         #7E9A86;   /* verde-salva */
  --sage-suave:   #EEF3F0;

  /* Versões escuras dos acentos, para quando carregam TEXTO. Os tons claros
     acima ficam entre 2,6:1 e 3:1 — bons para pontos e placas, nunca para
     letras. Estes passam os 4,5:1 com folga sobre papel, creme e branco. */
  --rosa-escuro:      #8F5573;
  --terracota-escura: #96543F;
  --sage-escuro:      #4F6B57;

  --ouro:         #EFC969;   /* fica só para o traço da data */
  --carmim:       #8A4F3A;   /* estados de hover e toque */

  --branco:       #FFFFFF;
  --cartao:       rgba(255, 255, 255, 0.72);

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --texto:   'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-xs:   0.875rem;
  --t-s:    0.9688rem;
  --t-base: 1.0625rem;
  --t-m:    1.1875rem;
  --t-l:    clamp(1.35rem, 2.2vw, 1.6rem);
  --t-xl:   clamp(1.7rem,  3.4vw, 2.4rem);
  --t-2xl:  clamp(1.8rem,  5vw,   3.3rem);
  --t-3xl:  clamp(2.05rem, 5.6vw, 4.1rem);   /* cabe na coluna do herói */

  --e-1: 0.5rem;  --e-2: 1rem;   --e-3: 1.5rem;  --e-4: 2rem;
  --e-5: 3rem;    --e-6: 4.5rem; --e-7: 7rem;

  --eixo: 1rem;             /* onde a linha do caminho assenta */
  --recuo: 1.5rem;          /* distância do texto à linha */
  --margem: var(--e-2);     /* respiro lateral da .pagina */
  --largura: 70rem;
  --andado: 0;              /* progresso do caminho, escrito pelo JS */

  /* O x exato do caminho. Acompanha a .pagina centrada seja qual for o ecrã,
     para a linha e os pontos assentarem no mesmo eixo do texto. */
  --eixo-x: calc(max(0px, (100% - var(--largura)) / 2) + var(--margem) + var(--eixo));

  /* fundo por baixo dos pontos do caminho; a .faixa troca-o pelo dela */
  --fundo-local: var(--papel);

  /* As curvas do movimento, que antes andavam soltas pelo ficheiro.
     "saida" desacelera a chegar, que é o que se quer quando algo responde
     a um toque; "gaveta" é para painéis que entram e saem. */
  --curva-saida:  cubic-bezier(0.23, 1, 0.32, 1);
  --curva-gaveta: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (min-width: 48rem) {
  :root { --eixo: 3.5rem; --recuo: 3.25rem; --margem: var(--e-4); }
}

*, *::before, *::after { box-sizing: border-box; }

/* Sem "scroll-behavior: smooth". A única âncora interna do site é o atalho
   "Saltar para o conteúdo", e quem o usa navega por teclado e quer lá estar
   já — não quer assistir a uma viagem. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--tinta);
  background-color: var(--papel);
  /* textura de papel, muito ténue */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.13 0 0 0 0 0.28 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--roxo-escuro); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Todos os estados de rato ficam atrás desta condição. Sem ela, no iOS o
   hover "cola-se" depois do toque e o elemento fica aceso até se tocar
   noutro sítio — parece um defeito, e é. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--carmim); }
}

/* Resposta ao toque. Nenhum elemento do site tinha :active, e num ecrã
   tátil o :hover nunca dispara — tocar num botão não dava sinal nenhum.
   Nos textos muda a cor; só o que tem forma de botão é que encolhe. */
a:active { color: var(--carmim); }

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

.invisivel {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* atalho de teclado: escondido até receber foco */
.salto {
  position: absolute; left: 0.5rem; top: -4rem; z-index: 60;
  background: var(--roxo-escuro); color: var(--papel);
  padding: 0.7rem 1.2rem; border-radius: 0 0 0.75rem 0.75rem;
  text-decoration: none; font-weight: 700;
  transition: top 120ms ease;
}
.salto:focus-visible { top: 0; color: var(--papel); }

/* ---------------------------------------------------------- tipos de letra */
.d1, .d2, .d3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 28, 'WONK' 0;
  text-wrap: balance;
}
/* O eixo WONK é o que dá à Fraunces o seu desvio próprio. Só no tamanho
   maior, onde se lê como intenção; nos títulos pequenos atrapalha. */
.d1 { font-size: var(--t-3xl); font-variation-settings: 'SOFT' 34, 'WONK' 1; }
.d2 { font-size: var(--t-2xl); line-height: 1.12; }
.d3 { font-size: var(--t-xl);  line-height: 1.18; }

.prosa { max-width: 34em; }

/* A apresentação é escrita na primeira pessoa e assinada. A cara de quem a
   escreve pertence ao lado do texto dela — e ocupa o vazio que sobrava à
   direita, porque a prosa nunca passa das 34 letras de largura. */
.apresentacao { display: grid; gap: var(--e-4); margin-top: var(--e-3); }

@media (min-width: 52rem) {
  .apresentacao {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--e-5); align-items: start;
  }
}

.retrato-autora { margin: 0; }
/* já não força 4/5: a fotografia que aqui entra é a da mesa de materiais,
   que é larga. Fica com a proporção que trouxer. */
.retrato-autora img {
  width: 100%; border-radius: 1.25rem;
  box-shadow: 0 18px 40px -34px var(--tinta);
}

.assinatura { margin-top: var(--e-3); }
.assinatura p { margin: 0; }
.assinatura strong { display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-l); }
.assinatura span { font-size: var(--t-s); color: var(--tinta-suave); }
.prosa p { margin: 0 0 var(--e-2); }
.prosa p:last-child { margin-bottom: 0; }

.etapa {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-m);
  font-weight: 500;
  color: var(--roxo);
  margin: 0 0 var(--e-1);
}

/* ---------------------------------------------------------------- estrutura */
.pagina { max-width: var(--largura); margin: 0 auto; padding-inline: var(--e-2); }

@media (min-width: 48rem) { .pagina { padding-inline: var(--e-4); } }

.bloco { padding-block: var(--e-6); }
.bloco-curto { padding-block: var(--e-5); }

/* Todas as secções assentam no mesmo eixo de texto que as paragens do
   caminho, para o alinhamento não saltar de secção para secção.
   Só afeta as .pagina que são filhas de um bloco — as que envolvem um
   .trilho recebem o recuo através das próprias .paragem. */
.bloco > .pagina,
.bloco-curto > .pagina,
.rodape > .pagina {
  padding-left: calc(var(--e-2) + var(--eixo) + var(--recuo));
}

@media (min-width: 48rem) {
  .bloco > .pagina,
  .bloco-curto > .pagina,
  .rodape > .pagina {
    padding-left: calc(var(--e-4) + var(--eixo) + var(--recuo));
  }
}

.faixa { background: var(--papel-fundo); --fundo-local: var(--papel-fundo); }

/* ----------------------------------------------------------------- o topo */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--papel) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lilas);
}

.topo-interior {
  max-width: var(--largura); margin: 0 auto;
  padding: var(--e-1) var(--e-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
}

@media (min-width: 48rem) {
  .topo-interior {
    padding-inline: var(--e-4);
    /* a marca assenta no mesmo eixo de texto do resto do site */
    padding-left: calc(var(--e-4) + var(--eixo) + var(--recuo));
  }
}

.marca {
  font-family: var(--display); font-weight: 600; font-size: var(--t-s);
  color: var(--tinta); text-decoration: none;
  line-height: 1.2; padding: var(--e-1) 0;
  display: flex; align-items: center; gap: 0.55rem;
}
@media (hover: hover) and (pointer: fine) {
  .marca:hover { color: var(--roxo); }
}
.marca:active { color: var(--roxo); }
.marca-selo { width: 36px; height: 36px; flex: none; border-radius: 50%; }

/* O contorno é a única coisa que desenha este botão, por isso leva o roxo
   médio (3.65:1) e não o lilás decorativo (1.61:1), que não chegava ao
   mínimo de 3:1 que a norma pede para o contorno de um controlo. */
.menu-botao {
  appearance: none; background: none; border: 1px solid var(--roxo-medio);
  border-radius: 999px; color: var(--tinta);
  font: inherit; font-size: var(--t-s);
  min-height: 44px; padding: 0 var(--e-2);
  cursor: pointer; touch-action: manipulation;
  transition: border-color 160ms ease, transform 140ms var(--curva-saida);
}
@media (hover: hover) and (pointer: fine) {
  .menu-botao:hover { border-color: var(--roxo); }
}
.menu-botao:active { border-color: var(--roxo); transform: scale(0.97); }

@media (min-width: 48rem) { .menu-botao { display: none; } }

.navegacao ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0;
}

.navegacao a {
  display: block; text-decoration: none; color: var(--tinta);
  font-size: var(--t-s); min-height: 44px;
  padding: 0.7rem var(--e-1); line-height: 1.6;
  border-bottom: 1px solid var(--lilas-claro);
}
@media (hover: hover) and (pointer: fine) {
  .navegacao a:hover { color: var(--roxo); }
}
/* item de menu é uma faixa larga: encolher ficava estranho, muda a cor */
.navegacao a:active { color: var(--roxo); background: var(--lilas-claro); }
.navegacao a[aria-current="page"] { color: var(--roxo); font-weight: 700; }

@media (max-width: 47.99rem) {
  .navegacao {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papel); border-bottom: 1px solid var(--lilas);
    padding: var(--e-1) var(--e-2) var(--e-2);
    box-shadow: 0 12px 24px -18px var(--tinta);
  }

  .navegacao[hidden] { display: none; }

  /* O menu aparecia do nada. Agora desce de baixo do botão que o abriu e
     recolhe pelo mesmo caminho.

     O "allow-discrete" é o que torna isto possível apesar do display:none:
     sem ele o atributo hidden cortava a animação a meio. Mantive o hidden
     em vez de o trocar por uma classe porque é ele que tira o menu fechado
     do alcance dos leitores de ecrã. Browser que não conheça a propriedade
     ignora-a e o menu aparece de repente, como aparecia antes.

     A classe .animavel só entra depois do primeiro desenho: o JS fecha o
     menu no arranque, e sem isto via-se o menu a fechar-se sozinho ao
     carregar a página. */
  .navegacao.animavel {
    opacity: 1; transform: translateY(0);
    transition: opacity 200ms var(--curva-gaveta),
                transform 200ms var(--curva-gaveta),
                display 200ms allow-discrete;
  }

  .navegacao.animavel[hidden] {
    opacity: 0; transform: translateY(-8px);
  }

  @starting-style {
    .navegacao.animavel:not([hidden]) { opacity: 0; transform: translateY(-8px); }
  }
}

@media (min-width: 48rem) {
  .navegacao { display: block !important; }
  .navegacao ul { flex-direction: row; gap: var(--e-3); align-items: center; }
  .navegacao a { border-bottom: 0; padding: 0.4rem 0; min-height: 0; }
  .navegacao a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--roxo); }
}

/* --------------------------------------------------------------- abertura
   A primeira coisa que se vê, antes de qualquer palavra: a mesa de materiais
   do Naturalmente Mulher. Fica FORA do <main> de propósito — o caminho começa
   no título, e uma linha de tinta a atravessar a fotografia cortava-a ao meio.
   -------------------------------------------------------------------------- */
.abertura { margin: 0; }

.abertura img {
  width: 100%; aspect-ratio: 2 / 1;
  object-fit: cover; object-position: center;
}

/* Em ecrã largo assenta na mesma caixa que o resto do site. A sangrar até às
   bordas ficaria com 720px de altura a 1440 de largura e empurrava o nome do
   evento e a data para fora do primeiro ecrã. */
@media (min-width: 48rem) {
  .abertura {
    max-width: var(--largura); margin-inline: auto;
    padding: var(--e-4) var(--e-4) 0;
  }
  .abertura img { border-radius: 1.25rem; }
}

/* ------------------------------------------------------------------ botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.6rem;
  font: inherit; font-size: var(--t-base); font-weight: 700;
  text-decoration: none; text-align: center;
  border: 1.5px solid var(--roxo-escuro); border-radius: 999px;
  background: var(--roxo-escuro); color: var(--papel);
  cursor: pointer; touch-action: manipulation;
  transition: background-color 160ms ease, border-color 160ms ease,
              transform 140ms var(--curva-saida);
}

/* O gesto mais importante do site é tocar em "Inscrição gratuita", que abre
   um formulário noutro separador — há uma espera, e sem isto nada confirmava
   que o toque foi registado. Só transform, que não obriga a refazer o
   desenho da página. */
.botao:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .botao:hover { background: var(--carmim); border-color: var(--carmim); color: var(--papel); }
}

.botao svg { width: 18px; height: 18px; flex: none; }

.botao-linha { background: transparent; color: var(--roxo-escuro); }

@media (hover: hover) and (pointer: fine) {
  .botao-linha:hover { background: var(--roxo-escuro); color: var(--papel); border-color: var(--roxo-escuro); }
}

.botao-pequeno { min-height: 44px; padding: 0.5rem 1.1rem; font-size: var(--t-s); }

.botao[aria-disabled="true"] {
  background: var(--lilas); border-color: var(--lilas);
  color: var(--tinta-suave); cursor: default; pointer-events: none;
}

.grupo-botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* -------------------------------------------------------------- o caminho
   Uma só linha atravessa a página inteira, da capa ao rodapé. Vive no <main>
   e não em cada secção, porque é isso que a impede de se interromper nas
   mudanças de fundo — o site chama-se "um caminho a percorrer".
   ------------------------------------------------------------------------ */
main { position: relative; }

.caminho, .caminho-tinta {
  position: absolute; top: 0; bottom: 0;
  left: var(--eixo-x); width: 2px;
  border-radius: 2px;
  /* acima dos fundos das secções, abaixo dos pontos e do texto */
  z-index: 1; pointer-events: none;
}
.caminho { background: var(--lilas); }

.caminho-tinta {
  background: linear-gradient(to bottom, var(--roxo) 0%, var(--roxo-escuro) 70%, var(--carmim) 100%);
  transform: scaleY(var(--andado)); transform-origin: top center;
}

.trilho { position: relative; }

/* ---- as paragens: os pontos onde o caminho pára ---- */
.paragem { position: relative; z-index: 2; padding-left: calc(var(--eixo) + var(--recuo)); }
.paragem + .paragem { margin-top: var(--e-6); }

.paragem::before,
.marco::before {
  content: ""; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--fundo-local); border: 2px solid var(--roxo);
  box-shadow: 0 0 0 5px var(--fundo-local);
}

/* Os pontos acendem-se à medida que a tinta os alcança. É a única animação
   do site que não responde a um clique, e ganha o lugar por contar a ideia
   do sítio — o caminho a ser percorrido — em vez de ser mais uma secção a
   aparecer a esbater-se, que é o que qualquer página faz. */
.paragem::before,
.marco::before { transition: background-color 450ms ease; }

.paragem.passou::before,
.marco.passou::before { background: var(--roxo); }

/* dentro de um .trilho o eixo é local; num .marco conta-se da margem da página */
.paragem::before { left: calc(var(--eixo) - 6px); top: 0.55em; }

/* Só o ponto sobe acima da linha, nunca a secção: com z-index na secção, o
   fundo da .faixa passava a pintar por cima do caminho e cortava-o em seco. */
.marco { position: relative; }
.marco::before {
  z-index: 2;
  left: calc(var(--eixo-x) - 6px); top: calc(var(--e-6) + 0.5em);
}
.marco.bloco-curto::before { top: calc(var(--e-5) + 0.5em); }

/* O ponto de ouro fecha o caminho, e por isso vive no fim da linha e não no
   fim de um troço: agora que o caminho segue até ao fundo da página, deixá-lo
   a meio dizia à pessoa que tinha chegado quando ainda faltava metade. */
.caminho::after {
  content: ""; position: absolute;
  left: -5px; bottom: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ouro);
}

/* ------------------------------------------------------------------- capa */
.capa { padding-block: var(--e-6) var(--e-2); }

.capa-titulo { margin-bottom: var(--e-2); }
.capa-titulo em {
  display: block; font-family: var(--display); font-style: italic;
  font-weight: 400; font-size: 0.42em; color: var(--roxo);
  letter-spacing: 0; margin-top: 0.35em;
}

.capa-reclame {
  font-size: var(--t-l); line-height: 1.45; max-width: 26em;
  margin: 0 0 var(--e-4); color: var(--tinta-suave);
}

/* De cinco factos do mesmo tamanho não se retinha nenhum. A data é o que a
   pessoa precisa de guardar, por isso sai da lista e fica com o traço de ouro. */
.capa-data {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-l); line-height: 1.2;
  margin: 0 0 var(--e-3); padding-bottom: var(--e-2);
  border-bottom: 2px solid var(--ouro);
  max-width: 16em;
}

.capa-factos {
  list-style: none; margin: 0 0 var(--e-4); padding: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
  font-size: var(--t-m);
}
.capa-factos strong { font-family: var(--display); font-weight: 600; }

/* ------------------------------------------------------------- contagem */
.contagem {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  margin: 0; padding: 0; list-style: none;
}
.contagem div { min-width: 4.5rem; }
.contagem dt { font-size: var(--t-xs); color: var(--tinta-suave); letter-spacing: 0.02em; }
.contagem dd {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.contagem-passou { font-family: var(--display); font-style: italic; font-size: var(--t-l); margin: 0; }

/* ---------------------------------------------------------- palestrantes */
/* Número de colunas fixado por patamar em vez de auto-fit: o recuo do eixo
   de texto estreita o contentor e o auto-fit deixava órfãos (3+1, 4+1). */
.grelha {
  display: grid; gap: var(--e-4);
  grid-template-columns: 1fr;
  list-style: none; margin: 0; padding: 0;
}

/* minmax(0, 1fr) e não 1fr: o mínimo "auto" do 1fr deixava um handle longo
   (@joana.integrativehealth) alargar a sua coluna e desalinhar os retratos. */

/* Os momentos do dia eram quatro caixas arredondadas iguais. São quatro
   entradas de uma mesma lista, não quatro objetos: um filete por cima chega
   para as separar e deixa o dia respirar. */
.grelha-momentos { gap: 0 var(--e-4); }

.momento { border-top: 2px solid var(--lilas); padding-block: var(--e-2) var(--e-3); }
.momento .d3 { margin: 0 0 0.3rem; }
.momento .horario-nota { margin: 0; }

@media (min-width: 34rem) { .grelha-momentos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) {
  .grelha-momentos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* em quatro colunas o título grande não cabia ("Alimentação") */
  .grelha-momentos .d3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
}

/* Retratos: três por fila, mesmo em ecrã largo. Com seis palestrantes dá
   3+3 certinho — a cinco colunas sobrava sempre uma órfã na linha de baixo. */
@media (min-width: 34rem) { .grelha-pessoas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .grelha-pessoas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* impede a quebra de linha no hífen de palavras como "Inscreve-te" */
.junto { white-space: nowrap; }

/* parceiros: fichas horizontais, duas por fila */
@media (min-width: 48rem) { .grelha-parceiros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Coluna flexível para o Instagram cair sempre no fundo do cartão: as áreas
   de especialidade têm uma, duas ou três linhas, e sem isto cada ligação
   ficava a uma altura diferente da vizinha. */
.pessoa { text-align: center; display: flex; flex-direction: column; }
.pessoa .instagrama { margin-top: auto; align-self: center; }

.pessoa-retrato {
  width: min(13rem, 72%); aspect-ratio: 1; margin: 0 auto var(--e-2);
  border-radius: 50%; background: var(--lilas-claro);
  box-shadow: 0 0 0 1.5px var(--lilas), 0 0 0 8px var(--papel);
}

.pessoa-nome { font-family: var(--display); font-weight: 600; font-size: var(--t-m); margin: 0 0 0.15rem; }
.pessoa-area { font-size: var(--t-s); color: var(--tinta-suave); margin: 0 0 0.5rem; }
.pessoa-tema { font-family: var(--display); font-style: italic; color: var(--roxo); margin: 0 0 0.5rem; }
.pessoa-bio  { font-size: var(--t-s); text-align: left; margin: 0.75rem 0 0.5rem; }

.instagrama {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--t-s); text-decoration: none; color: var(--roxo-escuro);
  min-height: 44px; padding: 0.3rem 0;
  max-width: 100%; overflow-wrap: anywhere;
}
/* punho sem pontos por onde quebrar: encolhe em vez de se partir a meio */
.instagrama-longo { font-size: var(--t-xs); letter-spacing: -0.01em; }

@media (hover: hover) and (pointer: fine) {
  .instagrama:hover { color: var(--carmim); text-decoration: underline; }
}
.instagrama:active { color: var(--carmim); text-decoration: underline; }
.instagrama svg { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------- parceiros */
.parceiro { display: flex; gap: var(--e-3); align-items: center; text-align: left; }
.parceiro img {
  width: 6.5rem; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--lilas);
}

/* ---------------------------------------------------------------- fichas */
.ficha {
  border: 1.5px solid var(--lilas);
  border-radius: 1.25rem;
  padding: var(--e-3);
  background: var(--papel);
}
.ficha-destaque { border-color: var(--roxo-medio); border-width: 2px; }

.rol { list-style: none; margin: 0; padding: 0; }

/* Filete dourado a separar blocos dentro de um cartão. Substitui o título
   "Como se paga": a lista de formas de pagamento fala por si, e o dourado é
   a cor do que exige reserva. O texto continua no HTML, escondido, para o
   leitor de ecrã anunciar de que lista se trata. */
.linha-ouro {
  height: 2px; border-radius: 2px;
  background: var(--ouro);
  margin: var(--e-3) 0 var(--e-2);
}
.rol li { padding-left: 1.5rem; position: relative; margin-bottom: 0.35rem; }
.rol li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.68em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ouro);
}

.preco { font-family: var(--display); font-weight: 600; font-size: var(--t-xl); color: var(--roxo-escuro); }

.duas-colunas { display: grid; gap: var(--e-4); }
@media (min-width: 52rem) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* -------------------------------------------------------------- programa */
.horario { list-style: none; margin: 0; padding: 0; }

.horario li {
  display: grid; gap: 0.2rem var(--e-3);
  padding-block: var(--e-2);
  border-top: 1px solid var(--lilas);
}
.horario li:last-child { border-bottom: 1px solid var(--lilas); }

@media (min-width: 40rem) {
  /* a coluna precisa de caber um intervalo completo, tipo "09:00 – 09:30" */
  .horario li { grid-template-columns: 9rem minmax(0, 1fr); }
}

.horario-hora {
  font-family: var(--display); font-weight: 600; color: var(--roxo);
  font-variant-numeric: tabular-nums;
  font-size: clamp(0.92rem, 1.6vw, 1.0625rem);
  white-space: nowrap;
}
.horario-titulo { font-weight: 700; }
.horario-nota { font-size: var(--t-s); color: var(--tinta-suave); }

/* o <p> trazia a margem própria do browser e abria um buraco entre a hora e
   a sua nota, que não acontecia nas palestras — aqui ficam todas iguais */
.horario .horario-nota { margin: 0.2rem 0 0; }

/* O título da palestra é o assunto do dia, não uma nota de rodapé. */
.horario-tema {
  font-family: var(--display); font-style: italic;
  font-size: var(--t-m); color: var(--roxo);
  margin: 0.2rem 0 0;
}

/* Uma pausa para café não pesa o mesmo que uma palestra: recua. */
.horario li[data-tipo="pausa"] .horario-titulo,
.horario li[data-tipo="pausa"] .horario-hora {
  font-weight: 400; color: var(--tinta-suave);
}

/* O almoço é o único ponto do dia que exige reserva: leva o ouro. */
.horario li[data-tipo="refeicao"] { position: relative; }
.horario li[data-tipo="refeicao"]::after {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 2.5rem; height: 2px; background: var(--ouro);
}

.horario li[data-tipo="cerimonia"] .horario-titulo { font-weight: 400; }

.recado {
  border-left: 3px solid var(--ouro);
  padding: var(--e-1) 0 var(--e-1) var(--e-2);
  font-style: italic; color: var(--tinta-suave); max-width: 34em;
}

/* ---------------------------------------------------------------- rodapé */
.rodape {
  border-top: 1px solid var(--lilas);
  background: var(--papel-fundo);
  padding-block: var(--e-5) var(--e-4);
  font-size: var(--t-s);
}

.rodape-grelha { display: grid; gap: var(--e-4); }
@media (min-width: 48rem) {
  .rodape-grelha { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}

.rodape h2 { font-family: var(--display); font-size: var(--t-base); margin: 0 0 var(--e-1); font-weight: 600; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 0.3rem; }
.rodape a { min-height: 44px; display: inline-flex; align-items: center; }

.sociais { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.social {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0.4rem 0.9rem;
  border: 1px solid var(--roxo-medio); border-radius: 999px;
  text-decoration: none; color: var(--tinta); background: var(--papel);
  transition: border-color 160ms ease, color 160ms ease,
              transform 140ms var(--curva-saida);
}
@media (hover: hover) and (pointer: fine) {
  .social:hover { border-color: var(--roxo); color: var(--roxo); }
}
/* tem forma de botão, por isso encolhe como um */
.social:active { border-color: var(--roxo); color: var(--roxo); transform: scale(0.97); }
.social svg { width: 17px; height: 17px; flex: none; }

.letra-miuda {
  margin: var(--e-4) 0 0; padding-top: var(--e-2);
  border-top: 1px solid var(--lilas);
  font-size: var(--t-xs); color: var(--tinta-suave); max-width: 46em;
}

/* ==========================================================================
   MODELO STITCH  ·  "Serena Feminina"
   Componentes vindos do desenho do Stitch, adaptados ao que o site já tinha:
   as fotografias são as verdadeiras, os dados vêm todos do dados.js, e os
   tipos de letra continuam a ser a Fraunces e a Atkinson Hyperlegible.
   ========================================================================== */

/* nota por baixo do título de um painel */
.painel-nota {
  font-size: var(--t-m); color: var(--tinta-suave);
  max-width: 42ch; margin: var(--e-2) 0 0;
}

/* ---- rótulo de secção: pequeno, em maiúsculas, espaçado ---- */
.rotulo {
  font-family: var(--texto);
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rosa-escuro);
  margin: 0 0 var(--e-1);
}

/* ---- cartão: a superfície branca translúcida do modelo ---- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--lilas);
  border-radius: 1.25rem;
  padding: var(--e-3);
  box-shadow: 0 18px 40px -32px var(--tinta);
}

/* ---- herói em duas colunas: texto à esquerda, fotografia à direita ---- */
.heroi { display: grid; gap: var(--e-4); align-items: center; }

@media (min-width: 60rem) {
  .heroi { grid-template-columns: minmax(0, 1.05fr) minmax(0, 24rem); gap: var(--e-5); }
}

.heroi-foto { margin: 0; }
.heroi-foto img {
  width: 100%; border-radius: 1.5rem;
  box-shadow: 0 30px 60px -45px var(--tinta);
}

/* ---- ficha de factos: data e local com ícones ---- */
.factos-cartao { display: grid; gap: var(--e-2); margin: var(--e-3) 0 var(--e-4); }

/* dentro do cartão do herói a largura é curta: só duas colunas quando
   houver espaço a sério, senão a data parte-se em três linhas */
@media (min-width: 34rem) and (max-width: 59.99rem) {
  .factos-cartao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
}
@media (min-width: 72rem) {
  .factos-cartao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
}

.facto { display: flex; gap: 0.75rem; align-items: flex-start; }

.facto-icone {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem;
  display: grid; place-items: center;
  background: var(--lilas-claro); color: var(--roxo-escuro);
}
.facto-icone svg { width: 18px; height: 18px; }

.facto-titulo {
  font-family: var(--display); font-weight: 600;
  font-size: var(--t-base); line-height: 1.3; margin: 0;
}
.facto-nota { font-size: var(--t-s); color: var(--tinta-suave); margin: 0.15rem 0 0; }

/* ---- contagem: cada número na sua caixa ---- */
.contagem { gap: var(--e-2); }

.contagem div {
  min-width: 0; text-align: center;
  background: var(--branco); border: 1px solid var(--lilas);
  border-radius: 1rem; padding: var(--e-2) var(--e-3);
  box-shadow: 0 14px 30px -28px var(--tinta);
}
.contagem dd { color: var(--roxo-escuro); }
.contagem dt {
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.75rem; margin-top: 0.15rem;
}

/* ---- momentos do dia: voltam a ser cartões, agora com ícone ---- */
.momento {
  border-top: 0;
  background: var(--branco); border: 1px solid var(--lilas);
  border-radius: 1.25rem; padding: var(--e-3);
  box-shadow: 0 18px 40px -34px var(--tinta);
}
.momento-icone {
  width: 2.5rem; height: 2.5rem; border-radius: 0.85rem;
  display: grid; place-items: center; margin-bottom: var(--e-2);
}
.momento-icone svg { width: 20px; height: 20px; }

/* cada momento com o seu tom, como no modelo */
.momento:nth-child(1) .momento-icone { background: var(--lilas-claro); color: var(--roxo-escuro); }
.momento:nth-child(2) .momento-icone { background: var(--rosa-lavado); color: var(--rosa-escuro); }
.momento:nth-child(3) .momento-icone { background: #FAEFEA;            color: var(--terracota-escura); }
.momento:nth-child(4) .momento-icone { background: var(--sage-suave);  color: var(--sage-escuro); }

.grelha-momentos { gap: var(--e-3); }

/* ---- palestrantes: cada uma no seu cartão, dentro de um painel ---- */
.painel {
  background: var(--cartao);
  border: 1px solid var(--lilas);
  border-radius: 1.75rem;
  padding: var(--e-4) var(--e-3);
}
@media (min-width: 48rem) { .painel { padding: var(--e-5) var(--e-4); } }

.pessoa {
  background: var(--branco); border: 1px solid var(--lilas);
  border-radius: 1.25rem; padding: var(--e-3) var(--e-2);
}
.pessoa-retrato { width: min(9rem, 70%); box-shadow: 0 0 0 1.5px var(--lilas); }
.pessoa-area { color: var(--rosa-escuro); }

.instagrama {
  background: var(--lilas-claro); border-radius: 999px;
  padding: 0.35rem 0.8rem; min-height: 40px;
}

/* ---- parceiros: agrupados pelo que fazem pelo evento ---- */
.grupo-parceiros + .grupo-parceiros { margin-top: var(--e-5); }
.grupo-parceiros .rotulo { margin-bottom: var(--e-2); }
.grupo-parceiros .grelha-parceiros { margin: 0; }

/* ---- parceiros: logótipo em placa, como no modelo ---- */
.parceiro {
  background: var(--branco); border: 1px solid var(--lilas);
  border-radius: 1.25rem; padding: var(--e-3);
  align-items: flex-start;
}
.parceiro img {
  width: 4.5rem; height: 4.5rem; border-radius: 1rem;
  background: var(--lilas-claro); object-fit: contain; padding: 0.5rem;
  box-shadow: none;
}

/* ---- botão de inscrição no cabeçalho ---- */
.topo-acao { display: none; }

@media (min-width: 62rem) {
  .topo-acao { display: inline-flex; }
}

/* ==================================================== caixas que se clicam
   A "ligação esticada": o texto é que é a ligação — é ele que o teclado
   alcança e o leitor de ecrã anuncia — mas um ::after invisível cobre o
   cartão todo, e por isso o rato pode clicar em qualquer ponto dele.
   Assim nenhum elemento interativo fica dentro de outro.
   ------------------------------------------------------------------------ */
.estica { text-decoration: none; color: inherit; }

.estica::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
}

.facto, .momento, .pessoa, .parceiro { position: relative; }

/* o que ficar por cima da ligação esticada tem de subir */
.pessoa .instagrama, .parceiro .instagrama { position: relative; z-index: 1; }

/* o punho do parceiro deixou de ser ligação: perde o ar de botão */
.parceiro .instagrama { background: none; padding: 0; color: var(--tinta-suave); }

/* ------------------------------------------------- resposta ao rato
   Só onde há mesmo rato. Num ecrã tátil o :hover cola-se depois do toque,
   e um cartão que fica levantado até se tocar noutro sítio parece avariado.
   ------------------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .momento, .pessoa, .parceiro, .heroi-foto img, .retrato-autora img {
    transition: transform 260ms var(--curva-saida),
                box-shadow 260ms var(--curva-saida),
                border-color 260ms ease;
  }

  .momento:hover, .pessoa:hover, .parceiro:hover {
    transform: translateY(-4px);
    border-color: var(--roxo-medio);
    box-shadow: 0 26px 46px -30px var(--tinta);
  }

  .pessoa-retrato { transition: transform 320ms var(--curva-saida); }
  .pessoa:hover .pessoa-retrato { transform: scale(1.04); }

  .facto { transition: transform 200ms var(--curva-saida); }
  .facto:hover { transform: translateX(3px); }
  .facto-icone { transition: background-color 200ms ease, color 200ms ease; }
  .facto:hover .facto-icone { background: var(--roxo-escuro); color: var(--branco); }

  .estica:hover { color: var(--roxo-escuro); text-decoration: underline;
                  text-underline-offset: 0.18em; }

  /* as fotografias grandes respiram um pouco */
  .heroi-foto img:hover, .retrato-autora img:hover {
    transform: scale(1.012);
    box-shadow: 0 36px 70px -40px var(--tinta);
  }
}

/* o foco do teclado tem de contornar o cartão, não a linha de texto */
.momento:has(.estica:focus-visible),
.pessoa:has(.estica:focus-visible),
.parceiro:has(.estica:focus-visible),
.facto:has(.estica:focus-visible) {
  outline: 3px solid var(--roxo); outline-offset: 3px; border-radius: 1.25rem;
}
.estica:focus-visible { outline: none; }

/* ---- pontos do caminho com os tons do modelo ---- */
.paragem:nth-of-type(2n)::before { border-color: var(--rosa); }
.paragem:nth-of-type(3n)::before { border-color: var(--terracota); }
.marco:nth-of-type(3n)::before   { border-color: var(--sage); }

/* ------------------------------------------------------- sem movimento */
@media (prefers-reduced-motion: reduce) {
  .caminho-tinta { transform: scaleY(1); }
  /* A resposta ao toque não desaparece aqui: o :active continua a aplicar-se,
     só deixa de ser amortecido. Quem pede menos movimento continua a precisar
     de saber que o botão o ouviu. */
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------- impressão */
@media print {
  .topo, .menu-botao, .grupo-botoes, .sociais { display: none; }
  body { background: #fff; color: #000; }
}