/* Servido Com — base do site.
   O layout de cada secção está em estilos inline no HTML (vem do desenho).
   Aqui fica só o que é comum: cores, ligações, foco e a janela "Ler mais". */
:root{
  --ceu:#CDDAE2; --vinho:#561A20; --linho:#EFE6D6; --papel:#F7F2EA;
  --ardosia:#3E5566; --tinta:#2B1B18;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ceu);color:var(--tinta);font-family:'Instrument Sans',system-ui,sans-serif}
a{color:var(--vinho)}
a:hover{color:var(--tinta)}
:focus-visible{outline:3px solid var(--ardosia);outline-offset:3px}
img,svg{max-width:100%}

dialog{
  width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 32px);
  padding:0;border:0;border-radius:10px;background:var(--papel);color:var(--tinta);
  overflow:auto;
}
dialog::backdrop{background:rgba(43,27,24,.45)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Saltar para o conteúdo: só aparece quando recebe foco pelo teclado. */
.saltar{position:absolute;left:8px;top:-60px;z-index:10;padding:12px 18px;border-radius:999px;
  background:var(--vinho);color:var(--linho);text-decoration:none}
.saltar:focus{top:8px;color:var(--linho)}

/* Alvos de toque com pelo menos 44 px nas ligações de texto. */
header > a{display:inline-block;padding:7px 0}
nav a,footer a,dialog a,a[href="#avisos"],a.toque{display:inline-flex;align-items:center;min-height:44px}

/* Topo em ecrãs estreitos: a personagem e o robô encolhem para não se taparem. */
@media (max-width: 560px){
  .cena-pessoa{height:11rem !important;left:0 !important}
  .cena-robo{height:9.5rem !important;right:2% !important}
}