:root {
  --ivory: #fffdf5;
  --navy: #10294f;
  --green: #06482f;
  --blue: #0864ec;
  --yellow: #ffe479;

  /* Grelha única da página ---------------------------------------------
     --gutter é A goteira do site: a distância entre a aresta do ecrã e a
     primeira letra de tudo — barra de navegação, título da hero, secções e
     rodapé. Uma só variável para que o alinhamento seja automático em
     320/360/390/768/820/1280/1440 e não uma coincidência de percentagens.
     --shell é a largura máxima do conteúdo; a partir daí a goteira cresce
     sozinha para manter o bloco ao centro.
     Usar sempre `padding-inline: var(--shell-pad)` (ou var(--gutter) quando
     o elemento não deve ser limitado pelo shell) — nunca max-width com
     margin:auto, que produz uma segunda grelha desalinhada desta. */
  --gutter: clamp(20px, 6%, 88px);
  --shell: 1268px;
  --shell-pad: max(var(--gutter), (100% - var(--shell)) / 2);
  /* No telemóvel a goteira deixa de ser uma percentagem: uma percentagem
     dava 23,4px a 390, 21,6 a 360 e 20 a 320, enquanto as páginas
     interiores usavam 20 e 16 fixos. O rodapé é o mesmo nas cinco páginas
     e arrancava em sítios diferentes. Agora sai tudo daqui (as interiores
     fazem --main-pad: var(--gutter) em dadiva-inner.css). */

  /* Cantos e sombras das superfícies tipo cartão. Só dois raios em todo o
     site: --radius-card para cartões e imagens, 999px para as pílulas. */
  --radius-card: 12px;
  --shadow-card: 0 6px 20px rgba(16, 41, 79, 0.08);
  --shadow-card-hover: 0 12px 30px rgba(16, 41, 79, 0.14);
}
@media (max-width: 700px) {
  :root {
    --gutter: 20px;
  }
}
@media (max-width: 380px) {
  :root {
    --gutter: 16px;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--ivory);
}
body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: "Nunito", "Nunito Fallback", system-ui, "Segoe UI", sans-serif;
}
a {
  color: inherit;
}
button,
input {
  font: inherit;
}
a,
button {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
/* Nav: ver dadiva-nav.css. Secções abaixo da hero: ver dadiva-landing.css. */
.brand {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -1.3px;
  text-decoration: none;
}
/* A hero (loader, vídeo, MYLO, título, CTA e assinatura) vive em dadiva-hero.css. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 14px 25px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  background: transparent;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.2s;
}
.button:hover {
  background: #e6f0ff;
  transform: translateY(-2px);
}
.button.primary {
  background: var(--blue);
  color: white;
}
/* Mapa, pausa, inspiracao, conversa e rodape vivem em dadiva-landing.css. */
/* O diálogo da conversa (.chat-*) vive agora em mylo-companion.css. */
.reveal {
  opacity: 1;
}
/* Shared illustrated paper system for existing functional inner pages. */
body.inner-page {
  --ink: 16, 41, 79;
  --paper: 255, 253, 245;
  --scrim: 16, 41, 79;
  --accent: 255, 228, 121;
  --deep: 6, 72, 47;
  background: var(--ivory);
  color: var(--navy);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
}
.word {
  display: inline;
  /* Alvo tatil confortavel sem alterar o fluxo do texto. */
  padding: 10px 3px;
  margin: -10px -3px;
  border: 0;
  /* O sublinhado e desenhado junto as letras (text-decoration) e nao na
     borda da caixa: a caixa cresce 10px para baixo por causa do alvo tatil
     e um border-bottom cairia por cima da linha seguinte quando o titulo
     quebra em duas linhas (telemovel). */
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  background: none;
  color: var(--green);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.word:hover {
  background: #ffe479;
}
/* Mantém unida uma expressão que o navegador partiria num hífen existente
   (ex. "acompanhar-te.", que a 320px deixava "te." sozinho numa linha). */
.nowrap {
  white-space: nowrap;
}
/* Em ecrãs estreitos algumas quebras fixas do HTML deixam uma palavra
   sozinha numa linha. O <br class="wide-only"> desaparece nesses ecrãs. */
@media (max-width: 380px) {
  .wide-only {
    display: none;
  }
}
/* O modal do glossário (.gloss*) vive em dadiva-gloss.css, ao lado do
   dadiva-gloss.js que o desenha. Só fica aqui a trava de scroll, porque é
   ao <html> que ela se aplica. Só se tranca onde não custa nada: com barra
   de deslocamento clássica, esconder o overflow tirava 15px de largura ao
   documento e a página saltava por trás do véu — aí fica a travagem que o
   próprio <dialog> modal já faz. */
html.gloss-locked {
  overflow: hidden;
}