/* css/manual.css — os manuais (manual.html e manual-radio.html).
   O mesmo desenho dos manuais das outras demos de O Alpendre (Já Dei?,
   restaurante), para quem lê um saber logo ler os outros. */
body { background: var(--cal); font-size: 17px; line-height: 1.6; }
.env { max-width: 780px; margin: 0 auto; padding: 0 1.1rem 4rem; }
header.capa { background: var(--verde); color: #fff; padding: 2.2rem 1.1rem 2rem; text-align: center; }
header.capa.radio { background: var(--madeira); }
header.capa .rotulo { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; margin: 0; }
header.capa h1 { font-family: var(--serif); font-size: clamp(2.2rem, 7vw, 3.2rem); margin: .3rem 0 .4rem; line-height: 1.05; }
header.capa p { margin: 0 auto; max-width: 36rem; opacity: .92; }
.botoes-capa { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem; }
.botoes-capa .btn { min-height: 48px; }
.btn-branco { background: #fff; color: var(--madeira); }
.btn-contorno { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); }
nav.indice { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.2rem; margin: 1.6rem 0; }
nav.indice h2 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .4rem; }
nav.indice ol { margin: 0; padding-left: 1.3rem; columns: 2 14rem; column-gap: 2rem; }
nav.indice a { color: var(--madeira); text-decoration: none; }
nav.indice a:hover { text-decoration: underline; }
section { margin: 2.6rem 0; scroll-margin-top: 1rem; }
h2 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.15; margin: 0 0 .6rem; }
h2 .n { color: var(--luz); margin-right: .3rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .3rem; }
p { margin: .5rem 0; }
a { color: var(--madeira); }
/* Tablet: a imagem a toda a largura. Telemóvel: estreita, ao lado do texto. */
figure { margin: 1rem 0; }
figure img { width: 100%; border-radius: 16px; border: 1px solid var(--linha); box-shadow: 0 8px 24px rgba(28,22,17,.12); display: block; background: #fff; }
figcaption { font-size: .82rem; color: var(--texto2); margin-top: .4rem; text-align: center; }
.figura { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 1.2rem; align-items: start; }
.figura figure { margin: 0; }
@media (max-width: 620px) { .figura { grid-template-columns: 1fr; } .figura figure { max-width: 260px; margin: 0 auto; } }
.caixa-info { background: var(--papel); border-left: 4px solid var(--luz); border-radius: 0 14px 14px 0; padding: .8rem 1rem; margin: 1rem 0; }
.caixa-info.boa { border-color: var(--verde); }
.caixa-info.atencao { border-color: var(--vermelho); background: var(--vermelho-fundo); }
.caixa-info strong:first-child { display: block; margin-bottom: .2rem; }
ol.passos, ul.lista { padding-left: 1.3rem; }
ol.passos li, ul.lista li { margin: .35rem 0; }
table.mensagens { width: 100%; border-collapse: collapse; font-size: .95rem; margin: .8rem 0; background: var(--papel); border-radius: 12px; overflow: hidden; }
table.mensagens th, table.mensagens td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
table.mensagens th { background: var(--areia); }
table.mensagens code { font-family: var(--sans); background: var(--cal); padding: .1rem .35rem; border-radius: 6px; }
dl.faq dt { font-weight: 700; margin-top: 1rem; }
dl.faq dd { margin: .2rem 0 0; color: var(--texto2); }
footer.fim { text-align: center; color: var(--texto2); font-size: .9rem; border-top: 1px solid var(--linha); padding-top: 1.4rem; margin-top: 3rem; }
@media print {
  header.capa { background: none; color: var(--sombra); padding: 0 0 1rem; }
  .botoes-capa, nav.indice { display: none; }
  figure img { box-shadow: none; }
  section { break-inside: avoid-page; }
}
/* O manual por partes (17/out/2026): cada parte abre com uma faixa, para quem
   o lê saber logo se aquela parte é para si (o sénior, a família, quem instala). */
.parte { background: var(--areia); border-radius: var(--raio); padding: 1rem 1.2rem; margin: 3.2rem 0 1rem; }
.parte .rotulo { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--madeira); margin: 0; font-weight: 700; }
.parte h2 { margin: .1rem 0 .2rem; }
.parte p { margin: 0; color: var(--texto2); }
nav.indice h3 { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--madeira); margin: .8rem 0 .2rem; }
nav.indice ol { columns: 1; }
/* dois telemóveis lado a lado (um passo e o seguinte) */
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 470px; margin: 1rem auto; }
.par figure { margin: 0; }