/* ==========================================================================
   Alojoeste — Reset e elementos base
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* impede que âncoras fiquem escondidas atrás do header fixo */
  scroll-padding-top: calc(var(--altura-header) + var(--e-6));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte-corpo);
  font-size: var(--t-base);
  line-height: var(--lh-corpo);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* --- Tipografia ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  color: var(--texto-forte);
  font-weight: 500;
  line-height: var(--lh-titulo);
  letter-spacing: -.005em;
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); line-height: var(--lh-apertado); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-family: var(--fonte-corpo); font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: var(--e-4); }

strong, b { font-weight: 600; color: var(--texto-forte); }

a {
  color: var(--acento);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--transicao);
}
a:hover { color: var(--acento-hover); }

ul, ol { padding-left: 1.35em; }
li + li { margin-top: var(--e-2); }
li::marker { color: var(--acento); }

blockquote {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--texto-forte);
}

hr {
  border: 0;
  border-top: 1px solid var(--borda);
  margin: var(--e-10) 0;
}

/* --- Media --------------------------------------------------------------- */

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

svg { fill: none; }

/* --- Formulários --------------------------------------------------------- */

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: 0; }

/* --- Foco ---------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* remove o anel só quando o foco NÃO vem do teclado */
:focus:not(:focus-visible) { outline: none; }

/* --- Selecção ------------------------------------------------------------ */

::selection {
  background: var(--tijolo-20);
  color: var(--cacau);
}

/* --- Utilitários --------------------------------------------------------- */

/* Indicação de custo obrigatória junto de números de telemóvel divulgados
   para fins comerciais (Decreto-Lei n.º 59/2021). Acompanha sempre o número,
   em texto legível — não serve como nota de rodapé longe dele. */
/* A cor é explícita, e não uma opacidade sobre o texto à volta: com opacidade
   o contraste passava a depender do que estivesse por baixo, e a 11px isso
   deixava o aviso ilegível em metade dos sítios. */
.rede-movel {
  font-family: var(--fonte-corpo);
  font-size: .6875rem;      /* 11px */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-suave);
  white-space: nowrap;      /* não parte a meio de "rede móvel nacional" */
}

.oculto-visualmente {
  position: absolute !important;
  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;
}

/* Link "saltar para o conteúdo" — só visível com o teclado */
.saltar {
  position: absolute;
  left: var(--e-4); top: var(--e-4);
  z-index: 200;
  padding: var(--e-3) var(--e-5);
  background: var(--acento);
  color: var(--branco);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transicao);
}
.saltar:focus-visible {
  transform: translateY(0);
  color: var(--branco);
}