/* ==== inicio.css · só em body[data-css~="inicio"] ==== */
/* rendaacessivel.pt · inicio.css: só o que é da primeira página.
   Tudo o resto vem do base.css. font-size só com var(--t-*). */

/* ---------- herói ---------- */
:where(body[data-css~="inicio"]) .heroi h1{ max-width:16ch; }
:where(body[data-css~="inicio"]) .heroi-ajuda{ margin-top:var(--e-1); font-size:var(--t-apoio); color:var(--tinta-2); }
:where(body[data-css~="inicio"]) .heroi-ajuda .lig{ font-size:var(--t-apoio); }
:where(body[data-css~="inicio"]) .res-ajuda{ margin-top:var(--e-4); }
:where(body[data-css~="inicio"]) .perguntas{ margin-top:var(--e-5); }
:where(body[data-css~="inicio"]) .perguntas .pergunta h2{ margin-bottom:var(--e-3); }
:where(body[data-css~="inicio"]) .perguntas .pergunta h2:focus{ outline:0; box-shadow:none; }
:where(body[data-css~="inicio"]) .perguntas .erro{ margin-top:var(--e-2); }
:where(body[data-css~="inicio"]) .procura-msg{ min-height:0; margin-top:var(--e-2); }
:where(body[data-css~="inicio"]) .procura-msg:empty{ display:none; }

/* ---------- o resultado ---------- */
:where(body[data-css~="inicio"]) .resultado{ padding-top:var(--e-5); border-top:1px solid var(--linha); background:var(--cal); }
:where(body[data-css~="inicio"]) .res-titulo{ font-size:var(--t-2); margin-top:var(--e-5); max-width:24ch; }
:where(body[data-css~="inicio"]) .res-titulo:focus{ outline:0; box-shadow:none; }
:where(body[data-css~="inicio"]) .res-sub{ color:var(--tinta-2); margin-top:var(--e-2); max-width:var(--larg-texto); }
:where(body[data-css~="inicio"]) #res-corpo{ margin-top:var(--e-5); }
:where(body[data-css~="inicio"]) #res-corpo > * + *{ margin-top:var(--e-5); }
:where(body[data-css~="inicio"]) .aviso-res{ margin-top:var(--e-6); }
:where(body[data-css~="inicio"]) .aviso .antes-do-botao{ margin-top:var(--e-3); }
:where(body[data-css~="inicio"]) .res-recomecar{ margin-top:var(--e-4); }

/* ---------- concursos abertos ---------- */
:where(body[data-css~="inicio"]) .abertos .separadores{ margin-bottom:var(--e-5); }
:where(body[data-css~="inicio"]) .abertos .faixa{ margin-top:var(--e-6); }
:where(body[data-css~="inicio"]) .sep-intro{ color:var(--tinta-2); margin-bottom:var(--e-4); max-width:var(--larg-texto); }
:where(body[data-css~="inicio"]) /* o mapa: o país tem sempre a proporção do contorno, :where(body[data-css~="inicio"]) e os alfinetes vivem dentro dele */
.mapa-pais{ position:relative; height:100%; aspect-ratio:420 / 600; margin-inline:auto; }
:where(body[data-css~="inicio"]) .mapa-pais svg.contorno{ position:absolute; inset:0; width:100%; height:100%; }

:where(body[data-css~="inicio"]) /* ---------- fecho: bloco escuro, :where(body[data-css~="inicio"]) aviso e portas ---------- */
.fecho{ margin-top:0; }
:where(body[data-css~="inicio"]) .fecho-grelha{ display:grid; gap:var(--e-5); align-items:start; }
:where(body[data-css~="inicio"]) .fecho .portas{ margin-top:var(--e-5); }
:where(body[data-css~="inicio"]) .aviso-form{ margin-top:var(--e-4); gap:var(--e-3); }
:where(body[data-css~="inicio"]) .aviso-form .aviso-linha{ margin-top:0; }
:where(body[data-css~="inicio"]) .rodape{ margin-top:0; }

@media (min-width:640px){
  :where(body[data-css~="inicio"]) .lista-2col{ columns:2; column-gap:var(--e-6); border-top:0; }
  :where(body[data-css~="inicio"]) .lista-2col > li{ break-inside:avoid; }
  :where(body[data-css~="inicio"]) .lista-2col > li > a{ border-top:1px solid var(--linha); border-bottom:0; }}
@media (min-width:1024px){
  :where(body[data-css~="inicio"]) .heroi{ padding-block:var(--abre) var(--e-6); }
  :where(body[data-css~="inicio"]) .abertos{ padding-top:var(--e-7); padding-bottom:var(--e-8); }
  :where(body[data-css~="inicio"]) .fecho{ padding-top:var(--e-8); }
  :where(body[data-css~="inicio"]) .procura{ grid-template-columns:1.55fr .85fr 1.35fr auto; }
  :where(body[data-css~="inicio"]) .procura-campo .t-rotulo{ white-space:nowrap; }
  :where(body[data-css~="inicio"]) .heroi-grelha{ align-items:start; }
  :where(body[data-css~="inicio"]) .heroi-foto{ margin-top:var(--e-2); }
  :where(body[data-css~="inicio"]) .heroi-foto picture{ display:block; }
  :where(body[data-css~="inicio"]) .heroi-foto .foto{ aspect-ratio:4 / 4.4; }
  :where(body[data-css~="inicio"]) .heroi-foto img{ width:100%; height:100%; object-fit:cover; }
  :where(body[data-css~="inicio"]) .res-titulo{ max-width:30ch; }
  :where(body[data-css~="inicio"]) .fecho-grelha{ grid-template-columns:5fr 7fr; }

  :where(body[data-css~="inicio"]) .lista-2col{ columns:3; }}

/* a razão de duas linhas: o ícone fica na primeira */
:where(body[data-css~="inicio"]) .cartao-razao{ align-items:flex-start; }
:where(body[data-css~="inicio"]) .cartao-razao .i{ margin-top:4px; }
@media (min-width:1024px){
  :where(body[data-css~="inicio"]) #res-corpo .enquanto,:where(body[data-css~="inicio"]) .aviso-res{ max-width:52rem; }}

:where(body[data-css~="inicio"]) /* os alfinetes abrem para a direita (para Espanha, onde o mapa está vazio):
   no telemóvel, :where(body[data-css~="inicio"]) ao centro, :where(body[data-css~="inicio"]) o nome da Figueira saía do ecrã */
.mapa-pais .alfinete{ transform:translate(-22px,-100%); }
:where(body[data-css~="inicio"]) .mapa-pais .alfinete::after{ left:22px; }

/* ---------- revisão de 27/09 (críticos: visual, texto, Maria e Joaquim) ---------- */
:where(body[data-css~="inicio"]) /* a pílula: só ela é redonda; entre campos, :where(body[data-css~="inicio"]) um filete recto a meia altura (tirava as «luas») */
.procura-campo{ border-radius:0; border-right:0; position:relative; }
:where(body[data-css~="inicio"]) .procura-campo:first-child{ border-radius:var(--r-pilula) 0 0 var(--r-pilula); }
:where(body[data-css~="inicio"]) .procura-campo:not(:last-of-type)::after{ content:""; position:absolute; right:0; top:22%; bottom:22%; width:1px; background:var(--linha); }
/* select ainda por escolher lê-se como o espaço reservado da terra */
:where(body[data-css~="inicio"]) .procura-campo select.vazio{ color:var(--tinta-3); }
:where(body[data-css~="inicio"]) .procura-campo select option{ color:var(--tinta); }

/* telemóvel: uma só mancha telha no primeiro ecrã (o botão) */
:where(body[data-css~="inicio"]) .perguntas .progresso span.feito{ background:var(--tinta); }
:where(body[data-css~="inicio"]) .perguntas [data-pais]{ color:var(--tinta-2); }

/* cartões: a imagem nunca estica com a linha; todos levam a etiqueta; «Ver o concurso» diz onde tocar */
:where(body[data-css~="inicio"]) .cartao-img{ flex:none; }
:where(body[data-css~="inicio"]) .cartao-img.sem-foto{ align-items:flex-end; aspect-ratio:16/6; }
:where(body[data-css~="inicio"]) .cartao-img.sem-foto .planta{ width:56px; height:56px; }
:where(body[data-css~="inicio"]) .cartao-ver{ display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:var(--e-3); font-weight:600; color:var(--telha-esc); font-size:var(--t-apoio); }
:where(body[data-css~="inicio"]) .cartao-ver .i{ width:16px; height:16px; }
:where(body[data-css~="inicio"]) .cartao-ver + .cartao-pe{ margin-top:var(--e-2); }
:where(body[data-css~="inicio"]) .cartao:hover .cartao-ver{ text-decoration:underline; text-decoration-color:var(--madeira); text-underline-offset:4px; }

/* a faixa das inscrições ocupa o lugar vazio da grelha (só a 3 colunas) */
:where(body[data-css~="inicio"]) .cartao-faixa{ display:none; }
@media (min-width:640px){ :where(body[data-css~="inicio"]) .cartao-img.sem-foto{ aspect-ratio:3/2; }}
@media (min-width:1024px){
  :where(body[data-css~="inicio"]) .cartao-faixa{ display:flex; flex-direction:column; justify-content:center; gap:var(--e-3); padding:var(--e-6); background:var(--cal-2); border-color:transparent; }
  :where(body[data-css~="inicio"]) .cartao-faixa .t-num small{ font-family:var(--letra); font-size:var(--t-corpo); letter-spacing:0; color:var(--tinta-2); margin-left:6px; }
  :where(body[data-css~="inicio"]) .cartao-faixa p{ color:var(--tinta-2); }
  :where(body[data-css~="inicio"]) .cartao-faixa p b{ color:var(--tinta); }
  :where(body[data-css~="inicio"]) .cartao-faixa .lig{ align-self:flex-start; }
  :where(body[data-css~="inicio"]) .faixa-com-grelha{ display:none; }}

:where(body[data-css~="inicio"]) /* depois das respostas, :where(body[data-css~="inicio"]) a lista geral fica recolhida atrás de um botão */
.abertos.recolhido .separadores,:where(body[data-css~="inicio"]) .abertos.recolhido #sep-prazo,:where(body[data-css~="inicio"]) .abertos.recolhido #sep-sempre,
:where(body[data-css~="inicio"]) .abertos.recolhido .faixa,:where(body[data-css~="inicio"]) .abertos.recolhido .alternar,:where(body[data-css~="inicio"]) .abertos.recolhido .cabeca p{ display:none; }
:where(body[data-css~="inicio"]) .abrir-todos{ margin-top:var(--e-4); }
:where(body[data-css~="inicio"]) #abertos-t:focus{ outline:0; box-shadow:none; }
:where(body[data-css~="inicio"]) .abertos.recolhido{ padding-block:var(--e-6) var(--e-7) !important; }

:where(body[data-css~="inicio"]) /* fecho: empilhado, :where(body[data-css~="inicio"]) cada bloco numa linha */
.fecho .portas{ margin-top:var(--e-7); }
@media (min-width:1024px){
  :where(body[data-css~="inicio"]) .heroi h1{ max-width:19ch; }
  :where(body[data-css~="inicio"]) .heroi-sub{ max-width:52ch; }
  :where(body[data-css~="inicio"]) .heroi-foto .foto.foto-natural{ aspect-ratio:var(--ar); }
  :where(body[data-css~="inicio"]) .fecho-grelha{ grid-template-columns:1fr; gap:var(--e-5); }
  :where(body[data-css~="inicio"]) .bloco-escuro{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:var(--e-7); }
  :where(body[data-css~="inicio"]) .bloco-escuro h2{ grid-column:1; }
  :where(body[data-css~="inicio"]) .bloco-escuro p{ grid-column:1; max-width:60ch; }
  :where(body[data-css~="inicio"]) .bloco-escuro .bt-contorno{ grid-column:2; grid-row:1 / span 2; margin-top:0; }
  :where(body[data-css~="inicio"]) #aviso{ display:grid; grid-template-columns:5fr 7fr; column-gap:var(--e-7); align-items:start; }
  :where(body[data-css~="inicio"]) #aviso > h2{ grid-column:1; grid-row:1; }
  :where(body[data-css~="inicio"]) #aviso > .vantagens{ grid-column:1; grid-row:2; }
  :where(body[data-css~="inicio"]) #aviso > .aviso-form{ grid-column:2; grid-row:1 / span 2; margin-top:0; display:grid; grid-template-columns:1fr 1.3fr auto; align-items:end; gap:var(--e-3); }
  :where(body[data-css~="inicio"]) #aviso > .aviso-form .aviso-linha{ display:contents; }
  :where(body[data-css~="inicio"]) #aviso > .antes-do-botao{ grid-column:2; grid-row:3; }}

:where(body[data-css~="inicio"]) /* ---------- 27/09 · construtor: o estado de RESULTADOS (resultados.html / -2) ----------
   Depois das respostas o herói sai da frente: o resultado passa a ser o topo da página,
   :where(body[data-css~="inicio"]) como na maqueta. O h1 fica no documento (só visualmente escondido): um só h1 sempre. */
body:has(#resultado:not([hidden])) .heroi{ padding:0; }
body:where([data-css~="inicio"]):has(#resultado:not([hidden])) .heroi-grelha > :not(.heroi-texto),
body:where([data-css~="inicio"]):has(#resultado:not([hidden])) .heroi-texto > :not(h1):not(datalist){ display:none; }
body:where([data-css~="inicio"]):has(#resultado:not([hidden])) .heroi h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
body:where([data-css~="inicio"]):has(#resultado:not([hidden])) .resultado{ border-top:0; }
:where(body[data-css~="inicio"]) .resultado .res-titulo{ margin-top:var(--e-5); }
:where(body[data-css~="inicio"]) .res-sub:empty{ display:none; }
:where(body[data-css~="inicio"]) .res-carimbo{ margin-top:var(--e-3); }
:where(body[data-css~="inicio"]) .resp-mudar{ display:inline-flex; align-items:center; gap:6px; }
:where(body[data-css~="inicio"]) .resp-mudar .i{ width:16px; height:16px; }
@media (max-width:1023px){ :where(body[data-css~="inicio"]) .resp-mudar.so-computador{ display:none; }}
@media (min-width:1024px){ :where(body[data-css~="inicio"]) .resp-mudar.so-telemovel{ display:none; }}
/* o resumo do «não te servem» é texto corrido do JS (sem os <span> da maqueta): parte a linha */
:where(body[data-css~="inicio"]) #res-corpo .recolher summary{ white-space:normal; line-height:1.35; padding-block:var(--e-3); }
:where(body[data-css~="inicio"]) #res-corpo.res-blocos > * + *{ margin-top:var(--e-5); }

/* a pílula: «Por mês, em bruto» e «Entre 1.800 e 2.500 €» cabem inteiros a 1280 */
@media (min-width:1024px){
  :where(body[data-css~="inicio"]) .procura{ grid-template-columns:1.2fr .7fr 1.6fr auto; }
  :where(body[data-css~="inicio"]) .procura-campo{ padding-inline:var(--e-4); }
  :where(body[data-css~="inicio"]) .procura .bt{ padding-inline:var(--e-5); }}
/* telemóvel: as respostas ocupam a largura e partem em linhas (27/09: deixaram de deslizar de lado;
   o «Mudar» já não precisa da margem que compensava a fila esticada até à borda) */
@media (max-width:1023px){
  :where(body[data-css~="inicio"]) .resultado-respostas .respostas{ flex:1 1 100%; min-width:0; max-width:100%; }}
/* o herói escondido não deixa espaço nenhum */
body:where([data-css~="inicio"]):has(#resultado:not([hidden])) .heroi,
body:where([data-css~="inicio"]):has(#resultado:not([hidden])) .heroi-grelha,
body:where([data-css~="inicio"]):has(#resultado:not([hidden])) .heroi-texto{ padding:0 !important; margin:0; min-height:0; gap:0; }
:where(body[data-css~="inicio"]) /* o preço do Vigia (quando a cobrança está ligada no v3): o número em serifa, :where(body[data-css~="inicio"]) a frase em letra de apoio.
   O .aviso-preco do base põe o parágrafo INTEIRO a t-2 (pedido ao integrador). */
.aviso .antes-do-botao.aviso-preco{ font-family:var(--letra); font-size:var(--t-apoio); line-height:1.5; margin-top:var(--e-3); }
:where(body[data-css~="inicio"]) .aviso .antes-do-botao.aviso-preco b{ font-family:var(--serifa); font-size:var(--t-3); font-weight:500; margin-right:4px; }

@media (min-width:1024px){
  :where(body[data-css~="inicio"]) /* a pílula, :where(body[data-css~="inicio"]) medida a 1280: «Terra ou freguesia», :where(body[data-css~="inicio"]) «Por mês, :where(body[data-css~="inicio"]) em bruto» e «Entre 1.800 e 2.500 €» inteiros */
  .procura{ grid-template-columns:minmax(0,1.45fr) minmax(0,.95fr) minmax(0,1.85fr) auto; }
  :where(body[data-css~="inicio"]) /* resultado com UM concurso que serve: o cartão na coluna dos cartões, :where(body[data-css~="inicio"]) «E ainda podes» ao lado
     (como o «Porque te serve» da maqueta), :where(body[data-css~="inicio"]) em vez de dois terços da linha vazios */
  #res-corpo.res-blocos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-5); align-items:start; }
  :where(body[data-css~="inicio"]) #res-corpo.res-blocos > *{ grid-column:1 / -1; margin-top:0; }
  :where(body[data-css~="inicio"]) #res-corpo.res-blocos > .res-cartoes:has(> .cartao:only-child){ grid-column:1; grid-row:1; grid-template-columns:1fr; }
  :where(body[data-css~="inicio"]) #res-corpo.res-blocos > .res-cartoes:has(> .cartao:only-child) ~ .enquanto{ grid-column:2 / -1; grid-row:1; max-width:none; }
  :where(body[data-css~="inicio"]) /* o Vigia do fim com a cobrança ligada: o botão é mais comprido, :where(body[data-css~="inicio"]) desce para a sua linha */
  #aviso > .aviso-form{ grid-template-columns:minmax(0,1fr); }
  :where(body[data-css~="inicio"]) #aviso > .aviso-form > :not(.aviso-linha){ grid-column:1 / -1; }
  :where(body[data-css~="inicio"]) #aviso > .aviso-form .bt{ grid-column:1 / -1; justify-self:start; }
  :where(body[data-css~="inicio"]) #aviso > .aviso-form .campo{ min-width:0; }}
/* entre 1024 e 1279 px a pílula não cabia na coluna de 7/12 (a terra cortava a 106 px):
   a fotografia estreita e os campos apertam o espaço de dentro */
@media (min-width:1024px) and (max-width:1279px){
  :where(body[data-css~="inicio"]) .heroi-grelha{ grid-template-columns:minmax(0,1fr) 280px; gap:var(--e-5); }
  :where(body[data-css~="inicio"]) .procura-campo{ padding-inline:var(--e-3); }
  :where(body[data-css~="inicio"]) .procura .bt{ padding-inline:var(--e-4); }}

/* revisão (27/09): no telemóvel o cabeçalho preso tapava «Pergunta N de 3» e a barra de progresso ao passar
   de pergunta; o JS leva o cartão da pergunta ao topo e esta margem deixa-o por baixo do cabeçalho */
:where(body[data-css~="inicio"]) .pergunta{ scroll-margin-top:calc(var(--topo) + 16px); }

:where(body[data-css~="inicio"]) /* o cabeçalho comum transbordava 3 px a 375 px (scrollWidth 378, o Menu cortado), :where(body[data-css~="inicio"]) mais ainda com a letra de
   reserva enquanto as woff2 não existem. Remendo desta página, :where(body[data-css~="inicio"]) o mesmo da posso.css, :where(body[data-css~="inicio"]) até o _base.css o fazer
   (PEDIDOS.md): a marca pode encolher e corta por dentro em vez de empurrar os botões para fora */
.topo .marca{ min-width:0; flex:1 1 auto; }
:where(body[data-css~="inicio"]) .topo .marca > span{ min-width:0; overflow:hidden; }
:where(body[data-css~="inicio"]) .topo .marca-nome,:where(body[data-css~="inicio"]) .topo .marca-desc{ overflow:hidden; text-overflow:clip; }
@media (max-width:439.98px){
  :where(body[data-css~="inicio"]) .topo .menu-bt .menu-bt-txt{ display:none; }
  :where(body[data-css~="inicio"]) .topo .caixa{ gap:4px; }
  :where(body[data-css~="inicio"]) .topo .marca{ gap:8px; }}