/* Ilha do Sal 2027 — estilo "site municipal Wix anos 2000" */

:root {
  --azul: #0a8fd0;
  --azul-escuro: #0b4a9e;
  --azul-noite: #08306b;
  --verde: #5fb534;
  --verde-escuro: #3d8c1c;
  --amarelo: #f7c600;
  --vermelho: #cf2027;
  --texto: #1d2733;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth; scrollbar-gutter: stable; background: #8697a1 }

/* Transição suave entre páginas (Chrome, Edge e Safari recentes) */
@view-transition { navigation: auto }

body {
  margin: 0;
  color: var(--texto);
  font: 14px/1.5 "Open Sans", Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Fundo fixo numa camada própria: o "background-attachment: fixed" falha no
   telemóvel. Por baixo da foto vai uma miniatura desfocada embutida, que aparece
   logo enquanto a foto carrega, para o fundo não piscar ao mudar de página. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    url("img/fundo-santa-maria.jpg") center / cover no-repeat,
    url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAbACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDbkh3ZwKpyWmWxUFvPqTRgKhAHX1p0RujKZJt4x0X1r0FjuXY82WA59yf+z4Sgw+588gVJHDDG7KmVIHes4arcw3GPs2ASecVhXmsXI1Jic8HkVxTxU5yXMztp4anSXuo6i9uDAUZgWHcCiuebXJXnXyo9xVc4PrRQpp6s2aa2Oig13TZZP3chRm7GtM7iAQoYHuK8xPHI4IrufB08s1u4lkLgdM9qqpT5VdERlc0SI8/MoB9xWZJp1m+pCUqrFhyK6G4jRo2yo6VxmqEw3AMRK9ehrnbsaqNzeXTbMEMIEBHoKK5jTL+7a82NO5X0JorRxIUj/9k=") center / cover no-repeat,
    #8697a1;
}

a { color: inherit }

.pagina {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 0 40px;
}

/* ---------- Banner ---------- */

.banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 125px;
  padding: 10px 24px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(120% 60% at 60% 105%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(70% 140% at 85% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, #13a7e6 0%, #0b8fd2 55%, #0878bd 100%);
}
.banner::after { /* o "swoosh" branco */
  content: "";
  position: absolute;
  left: 18%; right: -10%; bottom: 22px;
  height: 46px;
  border-top: 3px solid rgba(255,255,255,.55);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-2deg);
  pointer-events: none;
}

.banner .bandeira {
  flex: none;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--amarelo), 0 4px 10px rgba(0,0,0,.3);
  overflow: hidden;
  background: #003893;
}
.banner .bandeira img { width: 100%; height: 100%; display: block }

.banner .titulo { position: relative; z-index: 1; min-width: 0 }
.banner .script {
  margin: 0;
  font: 400 44px/1.05 "Parisienne", "Great Vibes", cursive;
  text-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.banner .script b { font-weight: 400; font-size: 1.6em; vertical-align: -.08em }
.banner .sub {
  margin: 6px 0 0;
  font: 600 12px/1.3 "Raleway", sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
}

/* ---------- Menu com separadores brilhantes ---------- */

.menu {
  display: flex;
  align-items: stretch;
  background: linear-gradient(#fdfdfd, #d9dde2 48%, #c4cad1 52%, #e3e6ea);
  border-bottom: 1px solid #9aa3ad;
  overflow-x: auto;
  scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none }
.menu a {
  flex: none;
  display: flex;
  align-items: center;
  padding: 7px 14px;
  font: 600 10.5px/1 "Open Sans", Arial, sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #2a3440;
  border-right: 1px solid #aab2bb;
  box-shadow: inset -1px 0 0 #fff;
}
.menu a:hover { background: linear-gradient(#fff, #e9eef4) }
.menu a.ativo {
  color: #fff;
  background: linear-gradient(#4f5b68, #2b3540);
}
.menu .visitante {
  margin-left: auto;
  padding: 7px 16px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(#2a74d4, #0b4a9e);
  border: 0;
  box-shadow: none;
  white-space: nowrap;
}

/* ---------- Blocos ---------- */

.caixa {
  margin-top: 10px;
  padding: 10px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.destaque {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 10px;
}

/* slideshow */
.slides {
  position: relative;
  aspect-ratio: 718 / 300;
  overflow: hidden;
  background: #cfe7f5;
  box-shadow: 0 0 0 1px #c9d3dc;
}
.slides figure {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .9s;
}
.slides figure.on { opacity: 1 }
.slides img { width: 100%; height: 100%; object-fit: cover; display: block }
.slides figcaption {
  position: absolute; left: 0; bottom: 14px;
  max-width: 80%;
  padding: 6px 14px 6px 12px;
  color: #fff;
  font: 400 26px/1.1 "Parisienne", cursive;
  background: linear-gradient(90deg, rgba(8,48,107,.85), rgba(10,143,208,.55) 80%, transparent);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.slides .pontos {
  position: absolute; right: 10px; bottom: 10px;
  display: flex; gap: 5px;
}
.slides .pontos button {
  width: 10px; height: 10px; padding: 0;
  border: 1px solid #fff; border-radius: 50%;
  background: rgba(255,255,255,.35);
  cursor: pointer;
}
.slides .pontos button.on { background: #fff }

/* comunicado lateral */
.comunicado {
  display: flex;
  flex-direction: column;
  padding: 10px;
  color: #fff;
  background: linear-gradient(160deg, #1aa5e6, #0b4a9e);
  box-shadow: 0 0 0 1px #c9d3dc;
}
.comunicado .tag {
  align-self: flex-start;
  padding: 2px 6px;
  font: 800 10px/1.3 "Raleway", sans-serif;
  letter-spacing: .1em;
  color: var(--azul-noite);
  background: var(--amarelo);
}
.comunicado h3 {
  margin: 8px 0 4px;
  font: 800 19px/1.1 "Raleway", sans-serif;
  text-transform: uppercase;
}
.comunicado p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45 }
.comunicado .contagem {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: auto;
}
.comunicado .contagem div {
  padding: 7px 2px 6px;
  text-align: center;
  background: rgba(255,255,255,.15);
  border: 1px dashed rgba(255,255,255,.6);
}
.comunicado .contagem strong { display: block; font: 800 22px/1 "Raleway", sans-serif; font-variant-numeric: tabular-nums }
.comunicado .contagem span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em }
.comunicado .contagem.fim { display: block; padding: 10px; text-align: center; font: 800 16px/1.2 "Raleway", sans-serif; border: 1px dashed rgba(255,255,255,.6) }

/* botões gradiente */
.botoes {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.botoes .btn { flex: 1 1 0; min-width: 0 }
.btn {
  display: block;
  padding: 9px 8px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font: 600 15px/1.2 "Open Sans", sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.3);
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 5px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px) }
.btn.azul  { background: linear-gradient(#5cc9fb, #1aa1e8 50%, #0d8ad6 51%, #17a6ee) }
.btn.verde { background: linear-gradient(#a3dd6b, #6cbf3a 50%, #55aa25 51%, #6fc33d) }
.btn small { display: block; font-size: 10.5px; font-weight: 400; opacity: .9 }

/* ficha da viagem */
.ficha {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 10px;
  background: #b9c6d2;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.ficha div { padding: 9px 10px; background: #f5f9fc }
.ficha dt {
  font: 700 9.5px/1.2 "Raleway", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5b6d80;
}
.ficha dd { margin: 3px 0 0; font-weight: 700; font-size: 14px; color: var(--azul-escuro) }
.ficha dd.pendente { color: #b5401f }

/* títulos de secção estilo faixa */
.faixa {
  margin: 18px 0 0;
  padding: 6px 12px;
  color: #fff;
  font: 800 13px/1.2 "Raleway", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--azul-escuro), var(--azul) 70%, rgba(10,143,208,0));
}

/* grelha de "notícias" */
.noticias {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.noticia {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: #4aa9ec;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.noticia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block }
.noticia div { padding: 10px 11px 14px; min-height: 92px }
.noticia h4 {
  margin: 0;
  font: 700 11.5px/1.35 "Open Sans", sans-serif;
  text-transform: uppercase;
  color: #0b2447;
}
.noticia p { margin: 5px 0 0; font-size: 12px; line-height: 1.4; color: #0c2f5c }
.noticia:hover img { filter: brightness(1.08) saturate(1.1) }

/* ---------- Rodapé ---------- */

.rodape {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px;
  padding: 26px 24px;
  color: #fff;
  background: rgba(11,74,158,.93);
  overflow: hidden;
}
.rodape .placa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-left: -24px;
  color: var(--texto);
  background: linear-gradient(90deg, #e9eef3 0 70%, transparent 70%);
}
.rodape .placa::after { /* riscas diagonais */
  content: "";
  position: absolute; top: 0; bottom: 0; right: 0; width: 34%;
  background: repeating-linear-gradient(115deg, transparent 0 14px, #e9eef3 14px 26px);
}
.rodape .placa .bandeira { width: 58px; height: 58px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--amarelo) }
.rodape .placa .bandeira img { width: 100%; height: 100%; display: block }
.rodape .placa a {
  position: relative; z-index: 1;
  padding: 8px 14px;
  border-radius: 18px;
  color: #fff;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  background: var(--azul);
}
.rodape h5 { margin: 0 0 6px; font: 800 13px/1.2 "Raleway", sans-serif; text-transform: uppercase }
.rodape p { margin: 0; font-size: 12px; line-height: 1.55; opacity: .92 }
.rodape .lema { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.rodape .lema strong { font: 400 28px/1 "Parisienne", cursive }
.rodape .redes { display: flex; gap: 6px }
.rodape .redes span {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  font-weight: 800; font-size: 13px;
  border: 1px solid rgba(255,255,255,.4);
}

/* ---------- Telemóvel ---------- */

@media (max-width: 760px) {
  .banner { gap: 14px; padding: 12px 16px; min-height: 0 }
  .banner .bandeira { width: 62px; height: 62px; border-width: 3px }
  .banner .script { font-size: 30px }
  .banner .sub { font-size: 10px; letter-spacing: .08em }
  .destaque { grid-template-columns: 1fr }
  .slides figcaption { font-size: 20px }
  .ficha { grid-template-columns: repeat(2, 1fr) }
  .noticias { grid-template-columns: 1fr 1fr }
  .rodape { grid-template-columns: 1fr; padding: 22px 16px }
  .rodape .placa { margin-left: -16px }
  .caixa, .botoes, .ficha, .faixa, .noticias { margin-left: 8px; margin-right: 8px }
}
@media (max-width: 440px) {
  .noticias { grid-template-columns: 1fr }
}

/* contador de visitantes estilo anos 2000 */
.menu .visitante { display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 14px }
.contador { display: inline-flex; gap: 1px; padding: 2px; background: #000; border: 1px solid #6f8db8; box-shadow: inset 0 0 3px rgba(0,0,0,.8) }
.contador i {
  display: block;
  width: 11px;
  font: 700 13px/17px "Courier New", monospace;
  font-style: normal;
  text-align: center;
  color: #6dff5c;
  text-shadow: 0 0 4px rgba(109,255,92,.7);
  background: linear-gradient(#1b1b1b, #000 50%, #141414 51%, #050505);
}

/* ---------- T-Shirt Swap ---------- */

/* passos, no estilo dos cartões de notícias */
.passos-swap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.passos-swap li {
  position: relative;
  padding: 10px 10px 12px 44px;
  background: #4aa9ec;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.passos-swap b {
  position: absolute; left: 9px; top: 10px;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  font: 800 14px/1 "Raleway", sans-serif;
  color: var(--azul-noite);
  background: var(--amarelo);
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.passos-swap h4 { margin: 0; font: 700 11.5px/1.35 "Open Sans", sans-serif; text-transform: uppercase; color: #0b2447 }
.passos-swap p { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: #0c2f5c }

/* "janela" com barra de título brilhante, como o menu */
.janela { min-width: 0; background: #fff; box-shadow: 0 0 0 1px #9aa3ad }
.janela-titulo {
  margin: 0;
  padding: 7px 12px;
  font: 700 11px/1.2 "Open Sans", Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2a3440;
  background: linear-gradient(#fdfdfd, #d9dde2 48%, #c4cad1 52%, #e3e6ea);
  border-bottom: 1px solid #9aa3ad;
}
.janela-corpo { padding: 14px 16px 16px; font-size: 13.5px }
.janela-corpo > p { margin: 0 0 10px }
#app > .caixa + .caixa, #app > .ficha + .caixa { margin-top: 10px }

/* formulário à antiga: rótulo à esquerda, campo à direita */
.formulario { margin: 0 }
.linha-form {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.linha-form > span { font-weight: 700; font-size: 13px; color: #2a3440; text-align: right }
.formulario input[type=text], .formulario input:not([type]), .formulario input[type=url],
.formulario input[type=email], .formulario input[type=password], .link-linha input {
  width: 100%;
  padding: 6px 8px;
  font: 400 14px "Open Sans", Arial, sans-serif;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);
}
.formulario input:focus, .link-linha input:focus { outline: 2px solid #f7c600; outline-offset: 0 }
.formulario .btn { justify-self: start; padding: 7px 22px; cursor: pointer }

/* tamanhos como separadores do menu */
.tamanhos { display: flex; flex-wrap: wrap }
.tamanhos label { position: relative }
.tamanhos input { position: absolute; opacity: 0; pointer-events: none }
.tamanhos span {
  display: block;
  min-width: 44px;
  padding: 7px 10px;
  text-align: center;
  font: 700 12px/1 "Open Sans", Arial, sans-serif;
  color: #2a3440;
  background: linear-gradient(#fdfdfd, #d9dde2 48%, #c4cad1 52%, #e3e6ea);
  border: 1px solid #9aa3ad;
  margin-left: -1px;
  cursor: pointer;
}
.tamanhos label:first-child span { margin-left: 0 }
.tamanhos span:hover { background: linear-gradient(#fff, #e9eef4) }
.tamanhos input:checked + span { color: #fff; background: linear-gradient(#4f5b68, #2b3540); border-color: #2b3540 }
.tamanhos input:focus-visible + span { outline: 2px solid #f7c600; outline-offset: 1px; position: relative }

/* mensagens */
.aviso, .ok {
  margin: 10px 0 0;
  padding: 7px 10px;
  font-size: 13px;
  background: #ffffcc;
  border: 1px solid #e6c200;
}
.aviso.erro { background: #ffe5e5; border-color: #d9534f; color: #8a1f1b }
.ok { background: #e7f6dd; border-color: #74b84a; color: #2c5e12 }
.nota { margin: 0 0 8px; font-size: 12px; color: #5b6d80 }
.pendente { color: #b5401f; font-style: italic }

/* link pessoal */
.link-pessoal {
  margin-top: 14px;
  padding: 10px 12px;
  background: #f5f9fc;
  border: 1px dashed #7f9db9;
}
.link-pessoal p { margin: 0 0 6px; font-size: 12.5px }
.link-linha { display: flex; gap: 6px; align-items: center }
.link-linha input { flex: 1; min-width: 0; font: 12px "Courier New", monospace }
.btn-mini { display: inline-block; padding: 5px 12px; font-size: 12px; cursor: pointer; white-space: nowrap }
.btn:disabled { filter: grayscale(.8); opacity: .6; cursor: not-allowed; transform: none }

/* resultado do sorteio */
.resultado { display: flex; gap: 14px; align-items: center; margin-bottom: 14px }
.resultado p { margin: 0 0 6px }
.tamanho-sorteado {
  flex: none;
  width: 96px;
  padding: 8px 4px 10px;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #1aa5e6, #0b4a9e);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.tamanho-sorteado span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .9 }
.tamanho-sorteado strong { display: block; font: 800 40px/1.05 "Raleway", sans-serif }

/* orçamento no comunicado */
.comunicado .orcamento {
  margin-top: auto;
  padding: 8px;
  text-align: center;
  background: rgba(255,255,255,.15);
  border: 1px dashed rgba(255,255,255,.6);
}
.comunicado .orcamento span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em }
.comunicado .orcamento strong { display: block; font: 800 24px/1.1 "Raleway", sans-serif }

/* admin */
.ficha-admin { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) }
.acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px }
.acoes .btn { padding: 7px 18px; cursor: pointer }
.acoes .btn-mini { padding: 5px 12px }
.tabela-wrap { overflow-x: auto }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid #9aa3ad }
.tabela th {
  padding: 6px 8px;
  text-align: left;
  color: #fff;
  font: 700 10.5px/1.2 "Open Sans", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: linear-gradient(#2a74d4, #0b4a9e);
}
.tabela td { padding: 5px 8px; border-top: 1px solid #d5dee7; white-space: nowrap }
.tabela tr:nth-child(even) td { background: #eef6fc }
.celula-nome { display: inline-flex; align-items: center; gap: 6px }
.nome-escondido { filter: blur(5px); user-select: none; transition: filter .2s }
.nome-escondido.visivel { filter: none; user-select: auto }
.olho {
  display: grid; place-items: center;
  width: 24px; height: 22px; padding: 0;
  color: #44546a;
  background: linear-gradient(#fdfdfd, #d9dde2);
  border: 1px solid #9aa3ad;
  cursor: pointer;
}
.olho.ativo { color: #fff; background: linear-gradient(#4f5b68, #2b3540) }

/* revelação */
.palco { padding: 20px 14px; text-align: center; color: #fff; background: linear-gradient(160deg, #1aa5e6, #0b4a9e) }
.palco p { margin: 4px 0; font-size: 15px }
.palco .btn { display: inline-block; margin-top: 10px; padding: 9px 22px; cursor: pointer }
.revela-nome { font: 400 46px/1.15 "Parisienne", cursive !important; text-shadow: 0 2px 6px rgba(0,0,0,.3); animation: aparecer .8s ease-out }
@keyframes aparecer { from { opacity: 0; transform: scale(.6) } to { opacity: 1; transform: none } }
.revelados { margin: 6px 0 0; padding-left: 18px; font-size: 13px }

@media (max-width: 760px) {
  .passos-swap { grid-template-columns: 1fr 1fr; margin-left: 8px; margin-right: 8px }
  .passos-swap li:last-child { grid-column: 1 / -1 }
  .linha-form { grid-template-columns: 1fr; gap: 4px }
  .linha-form > span { text-align: left }
  .linha-form > span:empty { display: none }
  .revela-nome { font-size: 36px !important }
  #app > .ficha { margin-left: 8px; margin-right: 8px }
}

/* link escondido para o admin no "No stress" do rodapé */
.lema-link { color: inherit; text-decoration: none; cursor: default }

/* ---------- Ajustes de responsivo (tablet e telemóveis pequenos) ---------- */

/* tablet: o conteúdo não encosta às bordas */
@media (max-width: 1000px) and (min-width: 761px) {
  .pagina { padding-left: 10px; padding-right: 10px }
}

@media (max-width: 760px) {
  .banner .script { font-size: clamp(24px, 8vw, 34px) }
}

@media (max-width: 620px) {
  /* menu em várias linhas em vez de esconder separadores */
  .menu { flex-wrap: wrap; overflow: visible }
  .menu a {
    flex: 1 1 auto;
    justify-content: center;
    padding: 9px 10px;
    border-bottom: 1px solid #aab2bb;
  }
  .menu .visitante { flex: 1 0 100%; justify-content: center; margin-left: 0; padding: 5px 10px }

  /* botões da página inicial empilhados */
  .botoes { flex-direction: column; gap: 8px }
  .botoes .btn { display: flex; justify-content: center; align-items: baseline; gap: 8px }
  .botoes .btn small { display: inline }

  .slides figcaption { font-size: 17px; bottom: 26px; max-width: 92% }
  .tamanhos span { min-width: 40px; padding: 8px 8px }
  .janela-corpo { padding: 12px }
  .resultado { gap: 10px }
  .tamanho-sorteado { width: 80px }
  .tamanho-sorteado strong { font-size: 32px }
}

@media (max-width: 360px) {
  .passos-swap { grid-template-columns: 1fr }
  .comunicado .contagem strong { font-size: 19px }
  .ficha dd { font-size: 13px }
}

/* menu com a mesma altura em todas as páginas (com ou sem contador) */
.menu { min-height: 32px }
.menu > a, .menu > .visitante { min-height: 32px }
.menu > [hidden] { display: none }

@media (max-width: 760px) {
  /* ficha com número ímpar de itens: o último ocupa a linha toda */
  .ficha > div:last-child:nth-child(odd) { grid-column: 1 / -1 }
}

@media (max-width: 400px) {
  .menu > a { padding: 9px 6px; font-size: 10px; letter-spacing: -.01em }
}

/* T-Shirt Swap escondido até as inscrições abrirem (menu.js põe a classe) */
html:not(.swap-visivel) [data-swap] { display: none !important }

/* prazo das inscrições, no estilo da contagem do comunicado */
.prazo {
  margin: 0 0 14px;
  padding: 10px 12px 12px;
  color: #fff;
  background: linear-gradient(160deg, #1aa5e6, #0b4a9e);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.prazo p { margin: 0 0 8px; font-size: 13px }
.contagem-prazo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 320px }
.contagem-prazo div {
  padding: 6px 2px 5px;
  text-align: center;
  background: rgba(255,255,255,.15);
  border: 1px dashed rgba(255,255,255,.6);
}
.contagem-prazo strong { display: block; font: 800 20px/1 "Raleway", sans-serif; font-variant-numeric: tabular-nums }
.contagem-prazo span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em }
.ok + .prazo { margin-top: 10px }

.formulario input[type=datetime-local] {
  width: 100%;
  max-width: 240px;
  padding: 5px 8px;
  font: 400 14px "Open Sans", Arial, sans-serif;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.15);
}

/* páginas em construção (alojamento, voos) */
.placa-obras {
  margin: 0 0 12px !important;
  padding: 8px 10px;
  text-align: center;
  font: 800 13px/1.2 "Raleway", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #111;
  background: #ffd800;
  border: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #111 0 10px, #ffd800 10px 20px) 6;
}
.ficha-janela { margin: 12px 0 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); box-shadow: 0 0 0 1px #b9c6d2 }

/* isco para bots no formulário (fora do ecrã, não é para pessoas) */
.isco { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

.btn-apagar {
  padding: 3px 9px;
  font: 600 11.5px "Open Sans", Arial, sans-serif;
  color: #8a1f1b;
  background: linear-gradient(#fff, #f3dcdc);
  border: 1px solid #d9a3a1;
  cursor: pointer;
}
.btn-apagar:hover { background: linear-gradient(#fff, #ecc9c8) }