:root {
  --roxo: #403a60;
  --roxo-claro: #d9d7e3;
  --tinta: #111;
  --fundo: #fff;
  --font-titulo: "Zalando Sans Expanded", "Archivo", system-ui, sans-serif;
  --font-texto: "Archivo", system-ui, sans-serif;
  --gutter: clamp(16px, 5.4vw, 139px); /* margens do desenho: 104px a 1920 */
  /* Escala tipográfica. O valor do meio dá o tamanho do desenho a 1920px de largura (px / 19.2 = vw);
     o mínimo garante leitura em portáteis e o máximo corresponde a um ecrã de 2560px. */
  --t-10: clamp(11px, .52vw, 13.5px);
  --t-12: clamp(11px, .6vw, 15.5px);
  --t-13: clamp(12px, .68vw, 17.5px);
  --t-14: clamp(13px, .755vw, 19.5px);
  --t-21: clamp(15px, 1.12vw, 28.5px);
  --t-26: clamp(16px, 1.355vw, 34.5px);
  --t-30: clamp(17px, 1.58vw, 40px);
  --t-45: clamp(22px, 2.33vw, 60px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* o atributo hidden ganha sempre, mesmo a regras com display próprio */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 300 var(--t-14)/1.45 var(--font-texto); font-stretch: 88%; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; }
/* texto só para leitores de ecrã (fica no nome acessível, não se vê) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* "Saltar para o conteúdo": primeira ligação da página, só aparece quando recebe o foco pelo teclado */
.saltar { position: absolute; top: 8px; left: 8px; z-index: 100; padding: .6em 1em; background: var(--roxo); color: #fff; font-weight: 500; transform: translateY(-200%); }
.saltar:focus { transform: none; }
main:focus { outline: 0; }

.container { width: min(2282px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* --- ligações dentro de textos: sublinhadas e a roxo, para se distinguirem do texto à volta --- */
.rte a, .evento__info a, .equipamento__texto a, .equipamentos__intro a, .newsletter__intro a, .minha__dica a {
  color: var(--roxo); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  overflow-wrap: anywhere; transition: background .15s, color .15s;
}
.rte a:hover, .evento__info a:hover, .equipamento__texto a:hover, .equipamentos__intro a:hover, .newsletter__intro a:hover, .minha__dica a:hover {
  background: var(--roxo); color: #fff; text-decoration-color: transparent;
}
.rte a[target="_blank"]::after { content: " ↗"; font-size: .85em; text-decoration: none; display: inline-block; }
/* secção aberta de um equipamento e outros fundos escuros não existem dentro de .rte; no rodapé (fundo preto) o sublinhado basta */
.site-footer__legal a { text-decoration: underline; text-underline-offset: .2em; }
.site-footer__legal a:hover { color: var(--roxo-claro); }
/* ligações de navegação e títulos: mudam de cor ao passar o rato */
.site-nav a, .filtros__categorias a, .vistas a, .card__titulo a, .filtros__meses .limpar { transition: color .15s; }
.site-nav a:hover, .filtros__categorias a:hover, .vistas a:hover, .card__titulo a:hover, .filtros__meses .limpar:hover { color: var(--roxo); }
.site-nav a:hover, .vistas a:hover { text-decoration: underline; text-underline-offset: .35em; }

/* --- cabeçalho --- */
.site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-block: 32px 28px; border-bottom: 1px solid var(--tinta); }
.logo { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--roxo); }
.site-nav { display: flex; gap: clamp(20px, 4vw, 70px); margin: 20px clamp(0px, 8vw, 150px) 0 0; font: 500 var(--t-10)/1 var(--font-texto); text-transform: uppercase; letter-spacing: .02em; }
.site-nav a.is-active::before { content: "•"; margin-right: 6px; }

/* --- filtros --- */
.filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--tinta); }
.filtros ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; }
.filtros__categorias { font: 400 var(--t-14)/1 var(--font-texto); font-stretch: 100%; text-transform: uppercase; margin-inline: auto; }
/* com mais de oito categorias, a lista fica numa só linha que desliza, com uma seta de cada lado, e as datas mantêm-se à direita */
/* Os meses passaram para a linha de baixo (marcado pelo JavaScript): categorias e meses centrados. */
.filtros.is-partido, .filtros.is-partido ul { justify-content: center; }
.filtros:has(.filtros__faixa) { flex-wrap: nowrap; }
.filtros:has(.filtros__faixa) .filtros__meses { flex: none; flex-wrap: nowrap; }
.filtros__faixa { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.filtros__faixa .filtros__categorias { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; margin-inline: 0; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.filtros__faixa .filtros__categorias::-webkit-scrollbar { display: none; }
.filtros__faixa li { flex: none; }
.filtros__seta { flex: none; padding: 4px 2px; border: 0; background: none; color: var(--tinta); font: 500 var(--t-14)/1 var(--font-texto); cursor: pointer; transition: color .15s, opacity .15s; }
.filtros__seta:hover { color: var(--roxo); }
.filtros__seta:disabled { opacity: .25; cursor: default; }
.filtros__seta[hidden] { display: none; }
.filtros__categorias a.is-active { font-weight: 700; color: var(--roxo); }
.filtros__categorias a.is-active::before { content: "• "; }
.filtros .filtros__meses { gap: 6px; font: 500 var(--t-14)/1 var(--font-texto); font-stretch: 100%; }
.filtros__meses .mes { display: block; padding: .3em .65em; background: var(--roxo-claro); color: var(--roxo); } /* roxo sobre lilás: 7,4:1 (branco dava 1,4:1) */
.filtros__meses .mes.is-active { background: var(--roxo); color: #fff; }
.filtros__meses .limpar { margin-left: 8px; text-decoration: underline; text-underline-offset: 3px; }
.vistas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px clamp(40px, 12vw, 190px); padding-block: 44px 28px; font: 400 var(--t-12)/1 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.vistas a.is-active { font-weight: 800; color: var(--roxo); }
.vistas a.is-active::before { content: "• "; }

/* --- grelha de eventos --- */
.grelha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 3.6vw, 92px) clamp(40px, 8vw, 205px); padding-block: clamp(40px, 2.8vw, 72px) 96px; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 1.4vw, 36px); padding-block: clamp(48px, 5vw, 128px); text-align: center; }
.vazio__texto { margin: 0; font: 400 var(--t-21)/1.3 var(--font-titulo); text-transform: uppercase; }
.vazio__saidas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vazio__saidas .btn { font-size: var(--t-12); }
.nao-encontrada h1 { font-size: var(--t-45); }
.nao-encontrada__texto { max-width: 46ch; margin: 0; font: 300 var(--t-14)/1.5 var(--font-texto); font-stretch: 100%; }
/* "Próximos eventos" por baixo de uma seleção vazia, com o título entre duas linhas como na newsletter do desenho */
.sugestoes { margin: 0; padding-block: clamp(12px, .9vw, 23px); border-block: 1px solid var(--tinta); font: 400 var(--t-21)/1 var(--font-titulo); text-align: center; text-transform: uppercase; }
.grelha { padding-bottom: clamp(32px, 2.5vw, 64px); }
/* Etiqueta do mês: fica no intervalo por cima do primeiro cartão de cada mês, sem ocupar lugar na grelha. */
.card { position: relative; }
.card__mes { position: absolute; bottom: 100%; left: 0; margin: 0 0 clamp(8px, .7vw, 18px); color: var(--roxo); font: 500 var(--t-12)/1 var(--font-titulo); text-transform: uppercase; white-space: nowrap; }
.paginacao { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: clamp(56px, 5vw, 128px); }
.paginacao__conta { margin: 0; font: 400 var(--t-12)/1 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.paginacao__mais { min-width: clamp(180px, 12.4vw, 318px); font-size: var(--t-14); }
.paginacao__mais[aria-busy="true"] { opacity: .5; cursor: progress; }
.card__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 56px; padding-bottom: 6px; border-bottom: 1px solid var(--tinta); }
.card__titulo { margin: 0; font: 700 var(--t-26)/1.2 var(--font-titulo); text-transform: uppercase; }
.card__data { display: flex; flex-direction: column; align-items: flex-end; flex: 0 1 auto; max-width: 100%; margin-left: auto; }
/* Título e data lado a lado enquanto couberem; uma data comprida desce para a linha de baixo em vez de espremer o título. */
.card__cabeca, .evento__titulo { flex-wrap: wrap; }
.card__titulo { flex: 1 1 12ch; }
.evento__titulo h1 { flex: 1 1 14ch; }
.data.data--longa, .evento__titulo .data.data--longa { font-size: var(--t-21); line-height: 1.25; white-space: normal; text-align: right; }
.equipamento-linha__seguinte .data { white-space: normal; }
.data { color: var(--roxo); font: 400 var(--t-30)/1.1 var(--font-titulo); text-transform: uppercase; white-space: nowrap; }
.horas { font: 400 var(--t-14)/1.6 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.card__corpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; padding-top: 18px; }
.card__cartaz { display: block; aspect-ratio: 5 / 3.4; background: var(--roxo-claro); overflow: hidden; }
.card__cartaz img { width: 100%; height: 100%; object-fit: cover; }
.card__cartaz-vazio { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; background: linear-gradient(135deg, var(--roxo), #6b63a1); color: #fff; font: 400 var(--t-14)/1.3 var(--font-titulo); text-transform: uppercase; text-align: center; }
.card__info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tag { display: inline-block; padding: .1em .55em .15em; background: var(--roxo); color: #fff; font: 600 var(--t-14)/1.4 var(--font-texto); font-stretch: 100%; text-transform: uppercase; letter-spacing: .02em; }
/* cor própria por categoria: a classe é tag-- seguida do nome da categoria sem acentos (ver AgendaRotas.Slug) */
.tag--infancia { background: #ffed05; color: var(--tinta); }
.card__sub, .card__local { margin: 0; font: 400 var(--t-13)/1.5 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.card__local { display: flex; align-items: flex-start; gap: 5px; }
.card__local svg { margin-top: .25em; width: .7em; height: auto; flex: none; }
/* no cartão de um evento o local tem linha própria, separada por um fio, com o pino a roxo e o nome mais carregado */
.card__local--evento { align-self: stretch; gap: 7px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--roxo-claro); }
.card__local--evento svg { width: .85em; color: var(--roxo); }
.card__local-nome { display: block; font-weight: 600; }
a.card__local-nome { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .15s; }
a.card__local-nome:hover { color: var(--roxo); }
.card__acoes { display: flex; gap: 8px; margin-top: 12px; }
.card__acoes:not(.evento__mapas) .btn { min-height: clamp(40px, 3.6vw, 92px); font-size: var(--t-14); } /* 69px a 1920 */

/* --- botões --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: clamp(36px, 2.3vw, 59px); padding: 0 clamp(14px, 1vw, 26px); border: 1px solid var(--tinta); background: #fff; color: var(--roxo); font: 400 var(--t-10)/1 var(--font-texto); font-stretch: 100%; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
.btn--contorno:hover, .btn--icone:hover { background: var(--roxo); color: #fff; }
.btn--cheio { background: var(--roxo); border-color: var(--roxo); color: #fff; }
.btn--cheio:hover { background: var(--tinta); border-color: var(--tinta); }
.btn--icone { width: auto; aspect-ratio: 1; padding: 0; border-color: var(--roxo-claro); color: var(--tinta); }
.btn--icone.is-copiado { background: var(--roxo); color: #fff; }

/* --- página de evento --- */
.evento__titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block: 28px 14px; border-bottom: 1px solid var(--tinta); }
.evento__titulo h1 { margin: 0; font: 400 var(--t-45)/1.15 var(--font-titulo); text-transform: uppercase; }
/* o título de um evento vai a negrito, na página dele e nos cartões; os dos equipamentos e sítios mantêm o peso normal */
[data-evento-pagina] .evento__titulo h1 { font-weight: 700; }
.evento__titulo .data { font-size: var(--t-45); }
.evento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 26%); }
.evento__principal { display: grid; grid-template-columns: minmax(180px, clamp(240px, 20.2vw, 518px)) minmax(0, 1fr); gap: clamp(24px, 4vw, 100px); padding: clamp(32px, 2.6vw, 67px) clamp(16px, 3vw, 64px) clamp(48px, 4.2vw, 107px) clamp(16px, 1.5vw, 38px); border-right: 1px solid var(--tinta); }
.evento__cartaz { position: relative; align-self: start; }
.evento__cartaz img { width: 100%; }
.evento__cartaz .card__cartaz-vazio { aspect-ratio: 3 / 4; }
.btn--voltar { position: absolute; top: 20px; right: 0; transform: translateX(50%); background: #fff; border-color: var(--tinta); }
.evento__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rte { font: 300 var(--t-14)/1.4 var(--font-texto); font-stretch: 88%; }
/* cada Enter no backoffice é um parágrafo novo: o espaço entre eles é pequeno, e os vazios não contam */
.rte p { margin: 0 0 .6em; }
.rte p:empty { display: none; }
.evento__mapas { margin-top: auto; padding-top: 24px; }
.evento__lateral { display: flex; flex-direction: column; padding: clamp(32px, 2.6vw, 67px) 0 clamp(48px, 4.2vw, 107px) clamp(16px, 2vw, 40px); }
.evento__sub { margin: 0 0 clamp(28px, 2.1vw, 54px); text-align: right; font: 300 var(--t-14)/1.5 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.acesso__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0 8px; border-top: 1px solid var(--tinta); font: 700 var(--t-14)/1 var(--font-titulo); font-stretch: 100%; text-transform: uppercase; }
.acesso__linha strong { font-weight: 500; }
.acesso__linha small { font: 300 var(--t-10) var(--font-texto); text-transform: none; }
.acesso__link { display: flex; justify-content: space-between; padding: .75em .9em; border: 1px solid var(--tinta); font: 500 var(--t-14)/1 var(--font-titulo); text-transform: uppercase; }
.acesso__link + .acesso__link { margin-top: 10px; }
.evento__info { margin: clamp(24px, 1.9vw, 48px) 0 clamp(24px, 1.9vw, 48px); align-self: flex-end; font: 300 var(--t-13)/1.5 var(--font-texto); font-stretch: 100%; }
.btn-grande { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; align-self: flex-end; width: clamp(130px, 9vw, 168px); height: clamp(52px, 3.2vw, 60px); margin-top: auto; padding: 0 clamp(16px, 1.15vw, 29px); border: 1px solid var(--tinta); color: var(--roxo); font: 300 var(--t-14)/1 var(--font-texto); font-stretch: 100%; text-transform: uppercase; transition: background .15s, color .15s; }
.btn-grande:hover { background: var(--roxo); color: #fff; }
:has(+ .btn-grande) { margin-bottom: 10px; }

.evento__principal--banner { grid-template-columns: 1fr; gap: 28px; }
/* A imagem larga (opcional, horizontal) ocupa o comprimento total da coluna, sem limite de altura nem faixas ao lado. */
.evento__principal--banner .evento__cartaz img { width: 100%; height: auto; }
.evento__principal--banner .btn--voltar { right: 16px; transform: none; }
.evento__video { align-self: stretch; margin-block: 8px; }
.evento__video span:first-child { display: inline-flex; align-items: center; gap: 8px; }
/* Bloco expansível: sem caixa nem barras laterais. Um fio por cima, o título com a seta, e um fio a fechar. */
.acordeao { border-block: 1px solid var(--tinta); }
.acordeao + .acordeao { border-top: 0; }
.acordeao summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: .85em 0; border: 0; font: 600 var(--t-14)/1 var(--font-titulo); text-transform: uppercase; cursor: pointer; list-style: none; }
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary:hover { color: var(--roxo); }
.acordeao[open] summary span { transform: rotate(180deg); }
.acordeao .rte { padding: 4px 0 24px; font-size: var(--t-14); }
.logo__img { display: block; height: clamp(48px, 4.5vw, 116px); width: auto; } /* 87px a 1920, como no desenho */

/* --- rodapé (medidas do desenho a 1920px; encolhem com a largura do ecrã) --- */
.site-footer { background: #000; color: #fff; padding-block: clamp(18px, 1.15vw, 29px); }
.site-footer__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 3.9vw, 100px); }
.site-footer__logo { width: clamp(104px, 7.5vw, 192px); height: auto; }
.site-footer__siga { display: flex; align-items: center; gap: clamp(16px, 1.5vw, 39px); margin: 0; padding-bottom: clamp(8px, .57vw, 15px); border-bottom: 1px solid #fff; font: 400 clamp(15px, 1.05vw, 27px)/1 var(--font-titulo); text-transform: uppercase; }
.site-footer__redes { display: inline-flex; align-items: center; gap: .45em; font: 700 .68em/1 var(--font-texto); text-transform: none; }
.site-footer__redes svg { width: auto; height: 1.08em; } /* acompanha o tamanho do "Siga-nos" */
.site-footer__redes a { display: inline-flex; transition: opacity .15s; }
.site-footer__redes a:hover { opacity: .65; }
/* No desenho o texto legal tem 7px; fica ilegível, por isso é maior aqui. */
.site-footer__legal { margin: clamp(8px, .57vw, 11px) 0 0; font: 300 clamp(10px, .6vw, 15px)/1.6 var(--font-texto); font-stretch: 100%; }
.btn-newsletter { display: inline-flex; align-items: center; gap: clamp(12px, 1vw, 26px); height: clamp(48px, 3vw, 56px); margin-left: clamp(0px, 5.8vw, 150px); padding: 0 clamp(15px, .8vw, 20px); border: 0; background: #fff; color: #000; font: 400 clamp(13px, .8vw, 15px)/1 var(--font-titulo); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background .15s; }
.btn-newsletter:hover { background: var(--roxo-claro); }
.btn-newsletter .seta { flex: none; width: .72em; height: .72em; overflow: visible; }

/* --- modais --- */
html:has(dialog[open]) { overflow: hidden; }
.modal { width: min(clamp(560px, 34vw, 780px), 100% - 32px); max-height: calc(100dvh - 32px); padding: 44px clamp(20px, 4vw, 44px); border: 1px solid var(--tinta); background: #fff; color: var(--tinta); overflow: auto; }
.modal::backdrop { background: rgb(64 58 96 / .78); }
.modal[open] { animation: modal-entra .22s ease-out; }
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px); } }
.modal__fechar { position: absolute; top: 0; right: 0; z-index: 3; width: 44px; height: 44px; border: solid var(--tinta); border-width: 0 0 1px 1px; background: #fff; color: var(--tinta); font: 300 24px/1 var(--font-texto); cursor: pointer; transition: background .15s, color .15s; }
.modal__fechar:hover { background: var(--roxo); color: #fff; }
.modal__titulo { margin: 14px 0 0; font: 400 clamp(20px, 2.4vw, 30px)/1.15 var(--font-titulo); text-transform: uppercase; }

/* --- newsletter --- */
.newsletter__intro { margin: 14px 0 8px; font-size: var(--t-14); }
.campo { display: block; margin-top: 20px; }
.campo span { display: block; font: 500 var(--t-12)/1 var(--font-titulo); text-transform: uppercase; }
.campo small { font: 300 var(--t-12) var(--font-texto); text-transform: none; }
.campo input { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--tinta); border-radius: 0; background: transparent; color: var(--tinta); font: 300 clamp(16px, .9vw, 22px)/1.3 var(--font-texto); }
.campo input:focus { border-bottom-color: var(--roxo); box-shadow: 0 1px 0 var(--roxo); outline: 0; }
.campo--armadilha { position: absolute; left: -9999px; }
.consentimento { display: flex; gap: 10px; margin-top: 24px; font: 300 var(--t-13)/1.45 var(--font-texto); cursor: pointer; }
.consentimento input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--roxo); }
.newsletter__erro { margin: 16px 0 0; padding: 8px 10px; border: 1px solid #b00020; color: #b00020; font-size: var(--t-13); }
.newsletter__enviar { display: flex; width: auto; height: clamp(44px, 3vw, 64px); margin: 28px 0 0 auto; padding: 0 clamp(16px, 1.1vw, 28px); background: #fff; font-size: var(--t-14); cursor: pointer; }
.newsletter__enviar:disabled { opacity: .5; cursor: progress; }
.newsletter__sucesso { margin-top: 20px; font-size: var(--t-14); }
.newsletter__sucesso:focus { outline: 0; }
.newsletter__obrigado { margin: 0 0 6px; color: var(--roxo); font: 400 clamp(20px, 2.4vw, 30px)/1.15 var(--font-titulo); text-transform: uppercase; }
.newsletter__sucesso .btn { margin-top: 20px; }

/* --- como chegar --- */
.modal--rota { width: min(clamp(1120px, 64vw, 1560px), 100% - 32px); padding: 0; overflow: hidden; }
.rota { display: grid; grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); height: min(clamp(640px, 36vw, 880px), 100dvh - 34px); }
.rota__info { display: flex; flex-direction: column; align-items: flex-start; padding: 40px clamp(20px, 3vw, 36px) 32px; border-right: 1px solid var(--tinta); overflow: auto; }
.rota__morada { margin: 10px 0 0; font: 300 var(--t-13)/1.4 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.rota__quando { align-self: stretch; margin: 22px 0 0; padding-block: 10px; border-block: 1px solid var(--tinta); font: 300 var(--t-13)/1.5 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.rota__quando strong { color: var(--roxo); font: 400 var(--t-14) var(--font-titulo); }
.rota__rotulo { margin: 26px 0 8px; font: 500 var(--t-12)/1 var(--font-titulo); text-transform: uppercase; }
.rota__modos { align-self: stretch; border-top: 1px solid var(--tinta); }
.rota__modos a { display: flex; justify-content: space-between; padding: .85em .9em; border: 1px solid var(--tinta); border-top: 0; font: 500 var(--t-12)/1 var(--font-titulo); text-transform: uppercase; transition: background .15s, color .15s; }
.rota__modos a:hover { background: var(--roxo); color: #fff; }
.rota__modos a.is-ativo { background: var(--roxo); color: #fff; }
.rota__percurso { align-self: stretch; margin: 10px 0 0; font: 300 var(--t-13)/1.5 var(--font-texto); font-stretch: 100%; }
.rota__percurso a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.pino-partida { width: 14px; height: 14px; border: 3px solid var(--tinta); border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff; }
.rota__apps { display: flex; flex-wrap: wrap; gap: 8px; }
.rota__mapa { position: relative; min-height: 0; background: #f4f3f8; }
.rota__estado { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; margin: 0; padding: 24px; font: 400 var(--t-12)/1.5 var(--font-titulo); text-transform: uppercase; text-align: center; pointer-events: none; }
.rota__estado--aviso { inset: 16px 60px auto 16px; display: block; padding: 10px 12px; border: 1px solid var(--tinta); background: #fff; text-align: left; }
.pino { display: flex; flex-direction: column; align-items: center; cursor: default; }
.pino__nome { max-width: 220px; padding: 7px 10px; border: 1px solid var(--tinta); background: #fff; color: var(--tinta); font: 500 var(--t-12)/1.25 var(--font-titulo); text-transform: uppercase; text-align: center; box-shadow: 4px 4px 0 var(--roxo); }
.pino__ponto { position: relative; width: 1px; height: 22px; background: var(--tinta); }
.pino__ponto::after, .pino__ponto::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tinta); transform: translate(-50%, 50%); }
.pino__ponto::before { background: none; border: 1px solid var(--tinta); animation: pino-pulso 2.2s ease-out infinite; }
@keyframes pino-pulso { to { width: 44px; height: 44px; opacity: 0; } }
.rota__mapa .maplibregl-ctrl-group { border: 1px solid var(--tinta); border-radius: 0; box-shadow: none; }
.rota__mapa .maplibregl-ctrl-group button + button { border-top-color: var(--tinta); }
.rota__mapa .maplibregl-ctrl-attrib { font: 300 var(--t-10)/1.4 var(--font-texto); }

@media (max-width: 760px) {
  .rota { grid-template-columns: 1fr; grid-template-rows: 38dvh auto; height: auto; max-height: calc(100dvh - 34px); overflow: auto; }
  .rota__mapa { order: -1; border-bottom: 1px solid var(--tinta); }
  .rota__info { border-right: 0; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .modal[open], .pino__ponto::before { animation: none; }
}

/* --- responsivo --- */
@media (max-width: 960px) {
  .grelha { grid-template-columns: 1fr; }
  .equipamento-linha { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .equipamento-linha__programa { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--roxo-claro); }
  .equipamento-linha__programa .btn { margin: 0 0 0 auto; }
  .evento { grid-template-columns: 1fr; }
  .evento__principal { border-right: 0; padding-inline: 0; }
  .evento__lateral { padding-inline: 0; border-top: 1px solid var(--tinta); }
  .btn-grande { margin-top: 32px; }
  .site-footer__inner { grid-template-columns: 1fr; row-gap: 24px; justify-items: start; }
  .site-footer__texto { justify-self: stretch; }
  .btn-newsletter { margin-left: 0; }
}
/* --- atalhos "Hoje" e "Fim de semana", ao lado dos meses --- */
.filtros__meses .atalho { display: block; padding: .3em .65em; border: 1px solid var(--tinta); line-height: 1; white-space: nowrap; transition: background .15s, color .15s; }
.filtros__meses .atalho { margin-block: -1px; }
.filtros__meses .atalho:hover, .filtros__meses .atalho.is-active { border-color: var(--roxo); background: var(--roxo); color: #fff; }
.filtros__meses li:has(.atalho) + li:not(:has(.atalho)) { margin-left: 10px; }

/* --- datas de um evento com vários períodos (recolhidas, para não alongar a página) --- */
.datas__lista { padding: 4px 0 12px; }
.datas__lista li { display: flex; justify-content: space-between; gap: 12px; padding: .55em 0; border-bottom: 1px solid var(--roxo-claro); font: 400 var(--t-13)/1.3 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.datas__lista li.is-passado { color: #8a8a8a; text-decoration: line-through; }
.datas__dia { color: var(--roxo); font: 500 var(--t-13)/1.3 var(--font-titulo); }
.datas__lista li.is-passado .datas__dia { color: inherit; }
/* --- "Onde": o local do evento em destaque, no topo da coluna da direita --- */
.onde { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(28px, 2.1vw, 54px); padding: clamp(14px, 1.1vw, 28px) 0; border-block: 1px solid var(--tinta); }
.onde__rotulo { margin: 0; color: var(--roxo); font: 500 var(--t-12)/1 var(--font-texto); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; }
.onde__nome { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 500 var(--t-21)/1.2 var(--font-titulo); text-transform: uppercase; }
.onde__nome svg { flex: none; width: .6em; height: auto; margin-top: .2em; color: var(--roxo); }
.onde__nome a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .15s; }
.onde__nome a:hover { color: var(--roxo); }
.onde__horas { margin: 0 0 8px; font: 300 var(--t-14)/1.5 var(--font-texto); font-stretch: 100%; text-transform: uppercase; } /* o "Onde" vem logo a seguir, no mesmo bloco */
.onde__horas--curtas { font: 500 var(--t-21)/1.2 var(--font-titulo); }
.onde__morada { margin: 0 0 0 calc(.6em + 8px); font: 300 var(--t-14)/1.4 var(--font-texto); font-stretch: 100%; } /* alinhada com o nome, depois do pino */
.onde__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.onde__acoes .btn { flex: 1 1 auto; }
.onde__programa { transition: background .15s, color .15s; }
.onde__programa:hover { background: var(--roxo); color: #fff; }

/* --- equipamentos municipais --- */
.equipamento__voltar { flex: none; font: 400 var(--t-12)/1 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.equipamento__voltar:hover { color: var(--roxo); }
.equipamento__aviso { margin: 0; padding: clamp(12px, .9vw, 23px) clamp(14px, 1vw, 26px); border: 1px solid var(--tinta); border-top: 0; background: var(--roxo); color: #fff; font: 400 var(--t-14)/1.4 var(--font-texto); white-space: pre-line; }
.equipamento__principal { grid-template-columns: minmax(240px, 42%) minmax(0, 1fr); align-items: start; }
.equipamento__principal--sem-imagem { grid-template-columns: 1fr; }
.equipamento__principal .evento__cartaz img { width: 100%; height: auto; }
.equipamento__principal .rte { font-size: var(--t-14); }
/* secções: uma caixa única com um fio entre cada uma, em vez de caixas soltas com contornos a dobrar */
.equipamento__seccoes { align-self: stretch; border: 1px solid var(--tinta); }
.equipamento__seccao { border: 0; }
.equipamento__seccao + .equipamento__seccao { border-top: 1px solid var(--tinta); }
.equipamento__seccao summary { padding: .75em .9em; transition: background .15s, color .15s; }
.equipamento__seccao summary:hover, .equipamento__seccao[open] summary { background: var(--roxo); color: #fff; }
.equipamento__seccao .rte { padding: 16px .9em 20px; }
.equipamento__texto { margin: 0 0 clamp(16px, 1.2vw, 30px); font: 300 var(--t-13)/1.5 var(--font-texto); font-stretch: 100%; white-space: pre-line; }
.equipamentos__intro { max-width: 70ch; margin: clamp(20px, 1.6vw, 40px) 0 0; }
/* lista: uma linha por equipamento — imagem, texto e programação — separadas por um fio, como o resto do site */
.equipamentos { padding-bottom: clamp(56px, 5vw, 128px); }
.equipamento-linha { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr) minmax(200px, 24%); gap: clamp(20px, 3vw, 76px); align-items: start; padding-block: clamp(28px, 2.6vw, 66px); border-bottom: 1px solid var(--tinta); }
.equipamento-linha__imagem { display: block; aspect-ratio: 16 / 10; background: var(--roxo-claro); overflow: hidden; }
.equipamento-linha__imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.equipamento-linha:hover .equipamento-linha__imagem img { transform: scale(1.03); }
.equipamento-linha__texto { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, .8vw, 20px); }
.equipamento-linha__nome { margin: 0; font: 400 clamp(20px, 1.9vw, 48px)/1.12 var(--font-titulo); text-transform: uppercase; }
.equipamento-linha__nome a:hover { color: var(--roxo); }
.equipamento-linha__resumo { max-width: 62ch; margin: 0; font: 300 var(--t-14)/1.5 var(--font-texto); }
.equipamento-linha__texto .card__local { margin-top: auto; }
.equipamento-linha__programa { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, .8vw, 20px); padding-left: clamp(16px, 1.6vw, 40px); border-left: 1px solid var(--tinta); align-self: stretch; }
.equipamento-linha__seguinte { display: flex; flex-direction: column; gap: 4px; font: 400 var(--t-13)/1.3 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
.equipamento-linha__seguinte:hover { color: var(--roxo); }
.equipamento-linha__rotulo { font: 500 var(--t-10)/1 var(--font-titulo); }
.equipamento-linha__seguinte .data { font-size: var(--t-21); }
.equipamento-linha__programa .btn { margin-top: auto; font-size: var(--t-12); }
.sugestoes[id] { scroll-margin-top: 72px; }

/* --- a minha agenda --- */
.guardar[aria-pressed="true"] { border-color: var(--roxo); color: var(--roxo); }
.guardar[aria-pressed="true"] svg { fill: currentColor; }
/* com o rato por cima o fundo fica roxo: o marcador passa a branco para não desaparecer */
.btn--icone.guardar[aria-pressed="true"]:hover { color: #fff; }
.nav-guardados__conta { display: inline-block; min-width: 1.7em; margin-left: .5em; padding: .2em .4em; background: var(--roxo); color: #fff; font-weight: 600; text-align: center; }
.minha__partilhada { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: clamp(14px, 1vw, 26px) 0; border-bottom: 1px solid var(--tinta); }
.minha__partilhada p { flex: 1 1 240px; margin: 0; font: 400 var(--t-14)/1.3 var(--font-titulo); text-transform: uppercase; }
.minha__dica { max-width: 44ch; margin: 0; }
.minha__dica svg { display: inline; vertical-align: -.15em; }
.minha__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-bottom: clamp(56px, 5vw, 128px); }
.minha .sugestoes { margin-bottom: 0; }
.minha .grelha + .minha__acoes, .minha .grelha:last-of-type { padding-bottom: clamp(32px, 2.5vw, 64px); }

/* --- calendário --- */
.calendario { margin-top: clamp(20px, 1.6vw, 40px); }
.calendario__rotulo { margin: 0; padding: 12px 0 8px; border-top: 1px solid var(--tinta); font: 500 var(--t-14)/1 var(--font-titulo); text-transform: uppercase; }
.calendario .acesso__link { transition: background .15s, color .15s; }
.calendario .acesso__link:hover { background: var(--roxo); color: #fff; }
.subscrever-convite { display: flex; justify-content: center; margin: 0; padding-bottom: clamp(56px, 5vw, 128px); }
.paginacao:has(+ .subscrever-convite) { padding-bottom: clamp(20px, 1.6vw, 40px); }
.seletor--campo { width: 100%; height: 44px; margin-top: 8px; padding: 0 32px 0 12px; border: 1px solid var(--tinta); border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23111%27 stroke-width=%271.2%27/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px; color: var(--tinta); font: 300 clamp(15px, .8vw, 20px)/1 var(--font-texto); appearance: none; -webkit-appearance: none; }
.subscrever__opcoes { margin-top: 24px; }
.subscrever__opcoes button { display: flex; justify-content: space-between; width: 100%; padding: .85em .9em; border: 1px solid var(--tinta); border-top: 0; background: #fff; color: var(--tinta); font: 500 var(--t-12)/1 var(--font-titulo); text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s; }
.subscrever__opcoes button:hover { background: var(--roxo); color: #fff; }

/* --- convite de instalação (PWA): faixa fixa no fundo, acima da barra de ações do evento quando ela existe --- */
.instalar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(520px, 100% - 24px); padding: 12px 44px 12px 12px; border: 1px solid var(--tinta); background: #fff; box-shadow: 6px 6px 0 var(--roxo); animation: faixa-entra .25s ease-out; }
.instalar img { flex: none; width: 44px; height: 44px; }
.instalar__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 300 12px/1.35 var(--font-texto); font-stretch: 100%; }
.instalar__texto strong { font: 500 12px/1.2 var(--font-titulo); text-transform: uppercase; }
.instalar .btn { flex: none; min-height: 40px; font-size: 11px; }
.instalar__fechar { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 0; background: none; color: var(--tinta); font: 300 22px/1 var(--font-texto); cursor: pointer; }
body:has(.barra-acao) .instalar { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* como modal-entra, mas sem perder a centragem (translateX) durante a animação */
@keyframes faixa-entra { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .instalar { animation: none; } }

/* --- aviso de cookies: mesma faixa do convite de instalação, que fica escondido enquanto este estiver aberto --- */
.cookies { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 31; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; width: min(680px, 100% - 24px); padding: 16px; border: 1px solid var(--tinta); background: #fff; box-shadow: 6px 6px 0 var(--roxo); animation: faixa-entra .25s ease-out; }
.cookies__texto { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; font: 300 12px/1.45 var(--font-texto); font-stretch: 100%; }
.cookies__texto strong { font: 500 12px/1.2 var(--font-titulo); text-transform: uppercase; }
.cookies__acoes { flex: none; display: flex; gap: 8px; }
.cookies .btn { min-height: 40px; min-width: 96px; font-size: 11px; }
body:has(.cookies:not([hidden])) .instalar { display: none; }
.site-footer__cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.site-footer__cookies:hover { color: var(--roxo-claro); }
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }

/* Só existem em telemóvel */
.menu-btn, .evento__resumo, .barra-acao, .filtros__compacto { display: none; }

/* --- telemóvel: desenho próprio (o PDF não o define), pensado para o polegar --- */
@media (max-width: 640px) {
  :root { --t-10: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --alvo: 44px; /* área mínima de toque */ }

  /* cabeçalho: barra fina sempre visível, com o menu recolhido */
  .site-header { position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; width: 100%; padding: 5px var(--gutter); background: #fff; }
  .logo__img { height: 34px; }
  .menu-btn { display: grid; place-items: center; width: var(--alvo); height: var(--alvo); margin-right: -11px; padding: 0; border: 0; background: none; color: var(--tinta); cursor: pointer; }
  .menu-btn span, .menu-btn span::before { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s; }
  .menu-btn span { position: relative; transform: translateY(-4px); }
  .menu-btn span::before { content: ""; position: absolute; top: 8px; }
  .is-aberto .menu-btn span { transform: rotate(45deg); }
  .is-aberto .menu-btn span::before { top: 0; transform: rotate(-90deg); }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 0 var(--gutter) 8px; border-block: 1px solid var(--tinta); background: #fff; font-size: var(--t-13); }
  .is-aberto .site-nav { display: flex; }
  .site-nav a { display: flex; align-items: center; min-height: 48px; }
  .site-nav a + a { border-top: 1px solid var(--roxo-claro); }

  /* filtros: uma linha por grupo, a deslizar na horizontal até às margens do ecrã */
  .filtros { display: block; padding-block: 12px 0; border-bottom: 0; }
  .filtros__faixa { display: contents; }
  .filtros__seta { display: none; }
  .filtros ul { flex-wrap: nowrap; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; }
  .filtros ul::-webkit-scrollbar { display: none; }
  .filtros li { flex: none; }
  .filtros .filtros__meses { gap: 8px; font-size: var(--t-13); }
  .filtros__categorias { font-size: var(--t-13); }
  .filtros__categorias a, .filtros__meses a, .filtros__meses .mes { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 14px; border: 1px solid var(--tinta); background: #fff; color: var(--tinta); white-space: nowrap; }
  .filtros__categorias a.is-active, .filtros__meses .mes.is-active { border-color: var(--roxo); background: var(--roxo); color: #fff; font-weight: 500; }
  .filtros__categorias a.is-active::before { content: none; }
  .filtros__meses .limpar { margin-left: 0; text-decoration: none; }

  /* com JavaScript, as duas filas dão lugar a dois seletores lado a lado, que abrem a lista nativa do telemóvel */
  .js .filtros { padding-block: 10px 2px; }
  .js .filtros ul { display: none; }
  .js .filtros__compacto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .seletor { width: 100%; height: var(--alvo); padding: 0 32px 0 12px; border: 1px solid var(--tinta); border-radius: 0; background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23111%27 stroke-width=%271.2%27/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px; color: var(--tinta); font: 400 var(--t-13)/1 var(--font-texto); font-stretch: 100%; text-transform: uppercase; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; }
  .seletor.is-active { border-color: var(--roxo); background-color: var(--roxo); background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%271.2%27/%3E%3C/svg%3E"); color: #fff; font-weight: 500; }
  .seletor option { background: #fff; color: var(--tinta); text-transform: none; }
  .vazio { padding-block: 32px; }
  .vazio__texto { font-size: 16px; }
  .vazio__saidas { align-self: stretch; flex-direction: column; }
  .sugestoes { font-size: 15px; }

  /* vistas: três abas */
  .vistas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-block: 0; border-bottom: 1px solid var(--tinta); }
  .vistas__prefixo { display: none; }
  .vistas a { display: flex; align-items: center; justify-content: center; min-height: var(--alvo); margin-bottom: -1px; padding: 0 4px; border-bottom: 3px solid transparent; text-align: center; }
  .vistas a.is-active { border-bottom-color: var(--roxo); }
  .vistas a.is-active::before { content: none; }

  /* listagem: cartões compactos, três ou quatro por ecrã, com o cartão inteiro clicável */
  .grelha { gap: 0; padding-block: 0 24px; }
  .card__mes { position: static; grid-column: 1 / -1; grid-row: 1; margin: 10px 0 14px; font-size: var(--t-13); }
  .paginacao__mais { width: 100%; }
  .card { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; align-content: start; padding-block: 14px; border-bottom: 1px solid var(--tinta); }
  .card__cabeca, .card__corpo, .card__info { display: contents; }
  .card__cartaz { grid-column: 1; grid-row: 2 / span 4; align-self: start; aspect-ratio: 1; }
  .card__cartaz-vazio { padding: 6px; font-size: 9px; }
  .card__data { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-left: 0; }
  .card .data { font-size: 15px; }
  .card .horas { font-size: var(--t-12); line-height: 1.2; }
  .card .data--longa { font-size: var(--t-13); text-align: left; }
  .evento__titulo .data--longa { font-size: 15px; text-align: left; }
  .card__titulo { grid-column: 2; grid-row: 3; margin-block: 4px 6px; font-size: 16px; }
  .card__titulo a::after { content: ""; position: absolute; inset: 0; } /* estende a ligação do título a todo o cartão */
  .card .tag { grid-column: 2; grid-row: 4; justify-self: start; font-size: var(--t-10); }
  .card__sub { display: none; }
  .card__local { grid-column: 2; grid-row: 5; margin-top: 6px; font-size: var(--t-12); }
  /* a ligação do local fica por cima da que cobre o cartão, para poder ser tocada */
  .card__local--evento { padding-top: 6px; }
  a.card__local-nome { position: relative; z-index: 1; }
  /* dos botões do cartão só fica o de guardar, no canto, por cima da ligação que cobre o cartão */
  .card .card__acoes { position: absolute; top: 6px; right: -8px; z-index: 1; margin: 0; }
  .card .card__acoes > :not(.guardar) { display: none; }
  .card:has(.card__mes) .card__acoes { top: 44px; }
  .card .card__acoes .guardar.btn { width: var(--alvo); min-height: var(--alvo); border: 0; background: none; }
  .card__data { padding-right: 34px; }

  /* evento: hora e local junto ao título, ações fixas no fundo */
  .evento__titulo { flex-direction: column; align-items: flex-start; gap: 4px; padding-block: 20px 12px; }
  .evento__titulo h1 { flex: none; } /* em coluna, a base de 14ch passaria a ser altura e abria um vazio por baixo do título */
  .evento__resumo { display: block; margin: 4px 0 0; font: 400 var(--t-13)/1.4 var(--font-texto); font-stretch: 100%; text-transform: uppercase; }
  .evento__resumo--local { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; font-weight: 600; }
  .evento__resumo--local svg { flex: none; width: .8em; height: auto; margin-top: .25em; color: var(--roxo); }
  .onde__nome, .onde__horas--curtas { font-size: 18px; }
  .evento__principal { grid-template-columns: 1fr; padding-block: 20px 32px; }
  .evento__lateral { padding-block: 24px 40px; }
  .evento__sub { text-align: left; }
  .evento__info { align-self: flex-start; }
  .evento__mapas { flex-wrap: wrap; }
  .acesso__link { align-items: center; min-height: var(--alvo); padding-block: 0; }
  .btn { min-height: var(--alvo); }
  .btn--voltar { right: 12px; transform: none; }
  .btn-grande { display: none; }
  .barra-acao { position: fixed; inset: auto 0 0; z-index: 15; display: flex; gap: 8px; padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--tinta); background: #fff; }
  .barra-acao a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--tinta); font: 500 var(--t-13)/1 var(--font-titulo); text-transform: uppercase; }
  .barra-acao__principal { border-color: var(--roxo); background: var(--roxo); color: #fff; }
  .barra-acao__icone { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--tinta); background: #fff; color: var(--tinta); cursor: pointer; }
  .minha__acoes { flex-direction: column; }
  .subscrever-convite .btn { width: 100%; }
  .subscrever__opcoes button { align-items: center; min-height: 48px; padding-block: 0; }
  body:has(.barra-acao) .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* a barra não tapa o fim do rodapé */

  /* equipamentos: a linha passa a coluna */
  .equipamento-linha { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }
  .equipamento-linha__programa { flex-direction: column; align-items: flex-start; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--roxo-claro); }
  .equipamento-linha__programa .btn { width: 100%; margin: 4px 0 0; }
  .equipamento-linha__nome { font-size: 20px; }

  /* o convite de instalação fica acima da barra de ações do evento */
  body:has(.barra-acao) .instalar, body:has(.barra-acao) .cookies { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cookies__acoes { flex: 1 1 100%; }
  .cookies__acoes .btn { flex: 1; }

  /* rodapé e painéis */
  .btn-newsletter { width: 100%; justify-content: space-between; }
  .site-footer__redes { gap: 1.1em; }
  .site-footer__redes svg { height: 1.4em; }
  .rota__modos a { align-items: center; min-height: 48px; padding-block: 0; }
}

/* --- Gaia Cria: montra "em breve" (faixa roxa a toda a largura, no tom do rodapé e dos botões) --- */
.cria { position: relative; overflow: hidden; margin-top: clamp(24px, 2.4vw, 60px); background: var(--roxo); color: #fff; }
.cria__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 1.6vw, 40px); padding-block: clamp(56px, 8vw, 200px); }
.cria .tag { background: #fff; color: var(--roxo); }
.cria__titulo { margin: 0; max-width: 14ch; font: 400 clamp(34px, 6.2vw, 160px)/1.02 var(--font-titulo); text-transform: uppercase; text-wrap: balance; }
.cria__sub { margin: 0; max-width: 34ch; font: 300 var(--t-30)/1.3 var(--font-texto); font-stretch: 100%; color: var(--roxo-claro); }
.cria__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(4px, .8vw, 20px); }
.cria .btn { border-color: #fff; }
.cria .btn--contorno { background: transparent; color: #fff; }
.cria .btn--contorno:hover, .cria .btn--cheio:hover { background: #fff; border-color: #fff; color: var(--roxo); }
.cria .btn--cheio { background: #fff; color: var(--roxo); }
.cria :focus-visible { outline-color: #fff; }
/* círculos concêntricos, como um "ecrã a carregar"; decorativos */
.cria__aro { position: absolute; right: clamp(-260px, -10vw, -60px); top: 50%; z-index: 0; width: clamp(280px, 46vw, 1100px); aspect-ratio: 1; transform: translateY(-50%); border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; pointer-events: none; }
.cria__aro::before, .cria__aro::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; }
.cria__aro::after { inset: 30%; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); animation: cria-pulso 3.2s ease-in-out infinite; }
@keyframes cria-pulso { 50% { transform: scale(1.08); background: rgba(255, 255, 255, .16); } }
@media (prefers-reduced-motion: reduce) { .cria__aro::after { animation: none; } }
.cria-conteudo { padding-block: clamp(32px, 3vw, 80px); }