/* Faro+ · site
   Visual tirado da própria app (mobile/src/theme.ts e ecrãs): fundo quente, cartões brancos
   com traço fino, vermelho #c63839, Outfit e ícones Ionicons. Sem pedidos a terceiros. */

@font-face { font-family: "Outfit"; src: url("assets/fontes/Outfit-400Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fontes/Outfit-500Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fontes/Outfit-600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("assets/fontes/Outfit-700Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Tokens (iguais aos da app) ---------- */

:root {
  color-scheme: light;
  --fundo: #f2eeeb;
  --sup: #ffffff;
  --sup-alt: #fdecec;
  --borda: #e0e0e0;
  --texto: #1a1a1a;
  --texto-2: #444444;
  --suave: #5f5f5f;
  --tenue: #676767;
  --ph: #dddddd;
  --verm: #c63839;
  --verm-texto: #b5302f;
  --verm-esc: #8f2b2c;
  --verm-cl: #e2585a;
  --marca: #BD3331;
  --creme: #F3F1EB;
  --barra: rgb(255 255 255 / 0.9);
  --sombra: 0 10px 30px -12px rgb(60 20 20 / 0.22);
  --sombra-barra: 0 8px 24px rgb(0 0 0 / 0.12);
  --fds: #fdf2f2;
  --fds-borda: #f0d6d6;
  --chuva: #2f6fa8;
  --seta: #bbbbbb;
  --foco: #1a1a1a;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --raio: 14px;
  --moldura: #141414; --moldura-aro: #2b2b2b; --moldura-luz: rgb(255 255 255 / 0.07);
}

/* O site arranca sempre claro; o tema do sistema só conta se a pessoa escolher "Sistema". */
@media (prefers-color-scheme: dark) {
  :root:has(#tema-sistema:checked) {
    color-scheme: dark;
    --fundo: #121212;
    --sup: #1e1e1e;
    --sup-alt: #3a2222;
    --borda: #333333;
    --texto: #f2f2f2;
    --texto-2: #d0d0d0;
    --suave: #aaaaaa;
    --tenue: #9a9a9a;
    --ph: #2a2a2a;
    --verm-texto: #ef6e6f;
    --barra: rgb(28 28 28 / 0.88);
    --sombra: 0 10px 30px -12px rgb(0 0 0 / 0.6);
    --sombra-barra: 0 8px 24px rgb(0 0 0 / 0.45);
    --fds: #2a1a1a;
    --fds-borda: #4a2626;
    --chuva: #7fb3e3;
    --seta: #777777;
    --foco: #f2f2f2;
    --moldura: #2c2c2e; --moldura-aro: #48484a; --moldura-luz: rgb(255 255 255 / 0.18);
  }
}

/* A aparência escolhida no cartão de preferências manda no site inteiro (como na app). */
:root:has(#tema-claro:checked), body:has(#tema-claro:checked) {
  color-scheme: light;
  --fundo: #f2eeeb; --sup: #ffffff; --sup-alt: #fdecec; --borda: #e0e0e0;
  --texto: #1a1a1a; --texto-2: #444444; --suave: #5f5f5f; --tenue: #676767; --ph: #dddddd;
  --verm-texto: #b5302f; --barra: rgb(255 255 255 / 0.9);
  --sombra: 0 10px 30px -12px rgb(60 20 20 / 0.22); --sombra-barra: 0 8px 24px rgb(0 0 0 / 0.12); --foco: #1a1a1a;
  --fds: #fdf2f2; --fds-borda: #f0d6d6; --chuva: #2f6fa8; --seta: #bbbbbb;
  --moldura: #141414; --moldura-aro: #2b2b2b; --moldura-luz: rgb(255 255 255 / 0.07);
}

:root:has(#tema-escuro:checked), body:has(#tema-escuro:checked) {
  color-scheme: dark;
  --fundo: #121212; --sup: #1e1e1e; --sup-alt: #3a2222; --borda: #333333;
  --texto: #f2f2f2; --texto-2: #d0d0d0; --suave: #aaaaaa; --tenue: #9a9a9a; --ph: #2a2a2a;
  --verm-texto: #ef6e6f; --barra: rgb(28 28 28 / 0.88);
  --sombra: 0 10px 30px -12px rgb(0 0 0 / 0.6); --sombra-barra: 0 8px 24px rgb(0 0 0 / 0.45); --foco: #f2f2f2;
  --fds: #2a1a1a; --fds-borda: #4a2626; --chuva: #7fb3e3; --seta: #777777;
  --moldura: #2c2c2e; --moldura-aro: #48484a; --moldura-luz: rgb(255 255 255 / 0.18);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 104px;
  accent-color: var(--verm);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  transition: background-color 200ms ease, color 200ms ease;
}

::selection { background: var(--verm); color: #ffffff; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

a { color: var(--verm-texto); text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; fill: currentColor; flex: none; }

.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 20;
  padding: 10px 16px; border-radius: 10px;
  background: var(--texto); color: var(--fundo); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ---------- Topo: marca e barra de separadores (a da app) ---------- */

.topo { position: relative; z-index: 10; }

.marca {
  position: absolute; left: 48px; top: 30px;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--texto); text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em;
}
.marca img { width: 36px; height: 36px; border-radius: 9px; }

.barra {
  position: fixed; z-index: 10;
  top: 18px; left: 50%; transform: translateX(-50%);
  border-radius: 28px;
  background: var(--barra);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--sombra-barra), inset 0 0 0 1px rgb(127 127 127 / 0.12);
}

.barra ul { display: flex; padding: 0 8px; }

.tab {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 82px; height: 64px;
  color: var(--tenue); text-decoration: none;
  font-size: 0.6875rem; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.tab .ic { width: 22px; height: 22px; transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab .ic-cheio { display: none; }
.tab:active .ic { transform: scale(0.92); }

@media (hover: hover) and (pointer: fine) {
  .tab:hover { color: var(--verm-texto); }
  .tab:hover .ic { transform: scale(1.15) translateY(-2px); }
}

/* Separador ativo segue a secção à vista (onde o navegador suporta). */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  body { timeline-scope: --s-inicio, --s-agenda, --s-turismo, --s-ria, --s-servicos, --s-perfil; }
  #inicio { view-timeline-name: --s-inicio; }
  #agenda { view-timeline-name: --s-agenda; }
  #turismo { view-timeline-name: --s-turismo; }
  #ria { view-timeline-name: --s-ria; }
  #servicos { view-timeline-name: --s-servicos; }
  #perfil { view-timeline-name: --s-perfil; }
  .tab-inicio { animation-timeline: --s-inicio; }
  .tab-agenda { animation-timeline: --s-agenda; }
  .tab-turismo { animation-timeline: --s-turismo; }
  .tab-ria { animation-timeline: --s-ria; }
  .tab-servicos { animation-timeline: --s-servicos; }
  .tab-perfil { animation-timeline: --s-perfil; }
  .tab { animation-name: tab-ativa; animation-fill-mode: none; animation-timing-function: linear; animation-range: entry 55% exit 45%; }
  .tab .ic:not(.ic-cheio) { animation: inherit; animation-name: icone-contorno; }
  .tab .ic-cheio { display: block; position: absolute; top: 11px; opacity: 0; animation: inherit; animation-name: icone-cheio; }
}
@keyframes tab-ativa { from, to { color: var(--verm); } }
@keyframes icone-contorno { from, to { opacity: 0; } }
@keyframes icone-cheio { from, to { opacity: 1; transform: scale(1.15) translateY(-2px); } }

/* ---------- Secções ---------- */

.seccao, .heroi {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}

.seccao { padding-block: 72px; }

@media (min-width: 900px) {
  .seccao { padding-inline: 40px; padding-block: 112px; }
}

h2 {
  font-size: clamp(2rem, 5.2vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

/* ---------- Início (herói) ---------- */

.heroi {
  display: grid;
  gap: 48px;
  padding-top: 108px;
  padding-bottom: 72px;
}

@media (min-width: 1000px) {
  .heroi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    min-height: min(100dvh, 940px);
    padding-inline: 40px;
    padding-top: 112px;
    padding-bottom: 56px;
  }
}

.heroi-texto { display: grid; justify-items: start; gap: 22px; }

.sting { width: 84px; height: 84px; border-radius: 20px; box-shadow: var(--sombra); }

.heroi h1 {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  max-width: 11ch;
}

.heroi-sub { max-width: 31em; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--texto-2); line-height: 1.5; }

.lojas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.loja {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
  background: var(--sup);
  border: 1px solid var(--borda);
  font-weight: 600; font-size: 1rem; line-height: 1.15;
}
.loja .ic { width: 24px; height: 24px; }
.loja small { display: block; font-size: 0.6875rem; font-weight: 500; color: var(--suave); }

.ver-tudo {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.ver-tudo .ic { width: 14px; height: 14px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ver-tudo:hover .ic { transform: translateX(3px); } }

.heroi-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
}

.heroi-foto {
  position: absolute; right: 0; top: 50%;
  width: 82%; height: 88%;
  transform: translateY(-50%);
  object-fit: cover;
  border-radius: 32px;
}

/* ---------- O telemóvel e o ecrã Início, com os estilos da app ---------- */

.telemovel {
  position: relative;
  justify-self: start;
  margin-left: 4%;
  width: 300px;
  aspect-ratio: 300 / 620;
  padding: 10px;
  border-radius: 48px;
  background: var(--moldura);
  box-shadow: 0 40px 80px -30px rgb(40 10 10 / 0.45), inset 0 0 0 2px var(--moldura-aro), 0 0 0 1px var(--moldura-luz);
}

.ecra {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 38px;
  background: var(--fundo);
  padding: 44px 14px 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 11px; line-height: 1.25;
  color: var(--texto);
}

.ecra::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 24px; border-radius: 12px; background: #141414;
}

.app-cabecalho { display: flex; justify-content: space-between; align-items: center; }
.app-quem { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.app-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verm); color: #fff; font-size: 12px; font-weight: 600; }
.app-tempo { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 15px; }
.app-tempo .ic { width: 19px; height: 19px; color: var(--verm); }

.app-sec { display: flex; justify-content: space-between; align-items: center; }
.app-sec b { font-size: 14px; font-weight: 600; }
.app-sec i { display: inline-flex; align-items: center; font-style: normal; font-weight: 500; color: var(--verm-texto); }
.app-sec i .ic { width: 11px; height: 11px; }

.app-destaque { position: relative; height: 150px; border-radius: 12px; overflow: hidden; background: var(--ph); }
.app-faixa { display: flex; height: 100%; }
.app-slide {
  position: relative; flex: 0 0 100%;
  display: flex; flex-direction: column; justify-content: space-between; padding: 11px;
}
.app-slide img, .cartao-noticia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-slide::after, .cartao-noticia::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0.38); }
.app-fonte {
  position: relative; z-index: 1; align-self: flex-start;
  padding: 3px 8px; border-radius: 999px; background: var(--verm); color: #fff; font-size: 10px; font-weight: 600;
}
.app-destaque-corpo { position: relative; z-index: 1; display: grid; gap: 3px; color: #fff; }
.app-destaque-corpo b { font-size: 15px; font-weight: 600; line-height: 1.18; }
.app-destaque-corpo i { font-style: normal; font-size: 11px; font-weight: 500; color: #f0f0f0; }

.app-pontos { display: flex; justify-content: center; gap: 5px; margin-top: -2px; }
.app-pontos span { width: 5px; height: 5px; border-radius: 3px; background: var(--ph); }
.app-pontos .on { width: 15px; background: var(--verm); }

.app-chips { display: flex; gap: 5px; align-items: stretch; }
.app-chip {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 7px; border-radius: 999px; background: var(--sup); border: 0.5px solid var(--borda);
  font-size: 10px; font-weight: 500; color: var(--texto-2); white-space: nowrap;
}
.app-chip .ic { width: 11px; height: 11px; color: var(--verm); }
.app-todos { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--verm); color: #fff; }
.app-todos .ic { width: 12px; height: 12px; }

.app-evento, .cartao-evento {
  display: flex; border-radius: 12px; overflow: hidden; background: var(--sup); border: 0.5px solid var(--borda);
}
.app-evento img { width: 72px; min-height: 72px; object-fit: cover; flex: none; }
.app-evento-corpo { display: grid; gap: 3px; align-content: center; padding: 8px 9px; min-width: 0; }
.app-evento-corpo b { font-size: 11.5px; font-weight: 600; }
.app-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--suave); font-size: 10px; min-width: 0; }
.app-meta .ic { width: 10px; height: 10px; }
.pill {
  font-style: normal; padding: 1px 6px; border-radius: 999px;
  background: var(--sup-alt); color: var(--verm-texto); font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em;
}
.pill-breve { background: var(--verm); color: #fff; }

.app-barra {
  position: absolute; left: 14px; right: 14px; bottom: 12px; height: 48px;
  display: flex; align-items: center; justify-content: space-around;
  border-radius: 20px; background: var(--barra);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}
.app-barra span { display: grid; justify-items: center; gap: 2px; font-size: 8px; font-weight: 600; color: var(--tenue); }
.app-barra .ic { width: 16px; height: 16px; }
.app-barra .on { color: var(--verm); }

/* ---------- Agenda e notícias ---------- */

.agenda { display: grid; gap: 48px; }

@media (min-width: 1000px) {
  .agenda { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
}

.agenda-texto { display: grid; gap: 20px; align-content: start; }
.agenda-texto > p { max-width: 30em; font-size: 1.125rem; color: var(--texto-2); }

.fontes { display: grid; gap: 10px; margin-top: 8px; }
.fontes h3 { font-size: 0.8125rem; font-weight: 600; color: var(--tenue); margin-top: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--sup); border: 1px solid var(--borda);
  font-size: 0.875rem; font-weight: 500; color: var(--texto-2);
}
.chip .ic { width: 15px; height: 15px; color: var(--verm); }

.agenda-visual { display: grid; gap: 12px; }

.cartao-noticia {
  position: relative; min-height: 300px; border-radius: 16px; overflow: hidden; background: var(--ph);
  display: flex; flex-direction: column; justify-content: space-between; padding: 20px;
}
.cartao-noticia .app-fonte { font-size: 0.8125rem; padding: 5px 12px; }
.cartao-noticia-corpo { position: relative; z-index: 1; display: grid; gap: 6px; color: #fff; max-width: 26em; }
.cartao-noticia-corpo b { font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.cartao-noticia-corpo i { font-style: normal; font-size: 0.875rem; font-weight: 500; color: #f0f0f0; }
.app-pontos-grande span { width: 6px; height: 6px; }
.app-pontos-grande .on { width: 18px; }

.cartao-evento img { width: 112px; min-height: 112px; object-fit: cover; flex: none; }
.cartao-evento-corpo { display: grid; gap: 6px; align-content: center; padding: 14px 16px; min-width: 0; }
.cartao-evento-corpo b { font-size: 1.0625rem; font-weight: 600; }
.cartao-evento .app-meta { font-size: 0.875rem; gap: 6px; }
.cartao-evento .app-meta .ic { width: 14px; height: 14px; }
.cartao-evento .pill { font-size: 0.6875rem; padding: 2px 8px; }

figcaption { font-size: 0.8125rem; color: var(--tenue); }

/* ---------- Turismo ---------- */

.turismo { display: grid; gap: 18px; }
.turismo h2 { max-width: 16ch; }
.turismo-sub { max-width: 32em; font-size: 1.125rem; color: var(--texto-2); }
.categorias { margin: 6px 0 22px; }

/* Ícones das categorias, os mesmos da app (mobile/src/data/attractions.ts), na cor de cada uma */
.ic.cat-patrimonio { color: #c63839; }
.ic.cat-museus { color: #8e44ad; }
.ic.cat-natureza { color: #2e8b57; }
.ic.cat-passeios { color: #2980b9; }
.ic.cat-centro { color: #e08a00; }
.ic.cat-arredores { color: #607d8b; }

.turismo-grelha { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* O ecrã Turismo real da app (screenshot tratado: sem barra de estado nem a localização de quem o tirou),
   num telemóvel pousado na página, como o do topo */
.turismo-telemovel { grid-column: 1 / -1; display: grid; place-items: center; padding: 8px 0 18px; }
.telemovel-turismo {
  width: min(280px, 76vw);
  aspect-ratio: 300 / 620;
  padding: 10px;
  border-radius: 46px;
  background: var(--moldura);
  box-shadow: 0 40px 80px -30px rgb(40 10 10 / 0.45), inset 0 0 0 2px var(--moldura-aro), 0 0 0 1px var(--moldura-luz);
}
.ecra-real { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #f2eeeb; }
.ecra-real img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ecra-real::before {
  content: ""; position: absolute; z-index: 1; top: 10px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 23px; border-radius: 12px; background: #141414;
}
.local p { display: inline-flex; align-items: center; gap: 6px; color: var(--suave); }

.local {
  border-radius: 14px; overflow: hidden; background: var(--sup); border: 1px solid var(--borda);
  display: grid; align-content: start;
}
.local img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--ph); }
.local h3 { font-size: 1rem; font-weight: 600; padding: 12px 14px 2px; }
.local p { font-size: 0.8125rem; font-weight: 500; padding: 0 14px 14px; }
.local p .ic { width: 14px; height: 14px; flex: none; }
.local p:has(+ .distancia) { padding-bottom: 4px; }

/* Linha da distância, como nos cartões da app */
.local .distancia { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--verm-texto); }
.distancia .ic { width: 12px; height: 12px; }
.nota-distancias { font-size: 0.8125rem; color: var(--tenue); }

@media (min-width: 900px) {
  /* O telemóvel à esquerda, os quatro cartões (2×2) ao lado */
  .turismo-grelha { grid-template-columns: minmax(330px, 1.1fr) 1fr 1fr; grid-template-rows: auto auto; gap: 16px; }
  .turismo-telemovel { grid-column: 1; grid-row: 1 / span 2; padding: 0; }
  .telemovel-turismo { width: 300px; }
  /* Os cartões acompanham a altura do telemóvel: a foto cresce, o texto fica igual */
  .local { grid-template-rows: minmax(120px, 1fr) auto auto auto; align-content: stretch; }
  .local img { height: 100%; aspect-ratio: auto; contain: size; } /* a foto não empurra: manda a altura do telemóvel */
}

/* ---------- Ria ---------- */

.ria { display: grid; justify-items: center; text-align: center; gap: 16px; }
.ria-sub { max-width: 32em; font-size: 1.125rem; color: var(--texto-2); }

.conversa {
  width: 100%; max-width: 680px; margin-top: 24px;
  display: grid; gap: 12px; text-align: left;
}

.ria-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; margin-bottom: 8px; border-radius: 20px;
  background: linear-gradient(135deg, #cf3f41, #c63839 45%, #8f2b2c);
  box-shadow: 0 6px 14px rgb(143 43 44 / 0.3);
  color: #fff;
}
.ria-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #c63839; flex: none; }
.ria-avatar .ic { width: 20px; height: 20px; }
.ria-nome { flex: 1; display: grid; font-size: 0.8125rem; color: rgb(255 255 255 / 0.9); }
.ria-nome b { font-size: 1.1875rem; font-weight: 600; color: #fff; }
.ria-online {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px; border-radius: 999px; background: rgb(255 255 255 / 0.2);
  font-size: 0.6875rem; font-weight: 600;
}
.ria-online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7ee787; }

.balao { display: flex; transform-origin: left bottom; }
.balao p {
  max-width: 82%; padding: 10px 14px; border-radius: 16px;
  font-size: 0.96875rem; line-height: 1.4;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.06);
}
.balao-eu { justify-content: flex-end; transform-origin: right bottom; }
.balao-eu p { background: var(--verm); color: #fff; border-bottom-right-radius: 4px; }
.balao-ria p { background: var(--sup); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }

.sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.sugestoes li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: var(--sup); border: 1px solid var(--borda);
  font-size: 0.8125rem; font-weight: 600; color: var(--verm-texto);
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.05);
}
.sugestoes .ic { width: 15px; height: 15px; }
.conversa figcaption { text-align: center; font-size: 0.75rem; line-height: 1.5; padding: 4px 8px 0; }

/* ---------- Serviços e meteorologia ---------- */

.servicos { display: grid; gap: 32px; }
.servicos h2 { max-width: 15ch; }
.servicos-grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

@media (min-width: 900px) {
  .servicos-grelha { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
}

.contactos h3, .tempo h3 { font-size: 1rem; font-weight: 600; margin-bottom: 10px; }
.contactos ul { border-radius: 16px; overflow: hidden; background: var(--sup); border: 1px solid var(--borda); }
.contactos li {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  font-size: 0.8125rem; color: var(--tenue);
}
.contactos li + li { border-top: 1px solid var(--borda); }
.contactos li > span { flex: 1; display: grid; gap: 2px; min-width: 0; }
.contactos b { font-size: 1rem; font-weight: 600; color: var(--texto); }

.ligar {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 14px 8px 8px; border-radius: 999px;
  background: var(--sup-alt); color: var(--verm-texto);
  font-weight: 600; font-size: 0.875rem; text-decoration: none; font-variant-numeric: tabular-nums;
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.ligar .ic { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--verm); color: #fff; }
.ligar:active { transform: scale(0.97); }
.nota { margin-top: 12px; font-size: 0.875rem; color: var(--suave); }

.tempo { display: grid; gap: 14px; }
.tempo h3 { margin-bottom: -4px; }

.tempo-agora {
  display: grid; justify-items: center; gap: 10px;
  padding: 22px; border-radius: 28px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #cf3f41, #c63839 45%, #8f2b2c);
  box-shadow: 0 10px 18px -6px rgb(143 43 44 / 0.3);
}
.tempo-local { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; font-size: 0.875rem; color: rgb(255 255 255 / 0.9); }
.tempo-local .ic { width: 15px; height: 15px; }
.tempo-local b { font-size: 1rem; font-weight: 700; color: #fff; }
.tempo-graus { font-size: 4.25rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tempo-estado {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.18);
  font-size: 1rem; font-weight: 700;
}
.tempo-estado .ic { width: 20px; height: 20px; }
.tempo-sensacao { font-size: 0.875rem; color: rgb(255 255 255 / 0.9); }
.tempo-painel {
  justify-self: stretch; margin-top: 10px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px;
  padding: 14px 8px; border-radius: 18px; background: rgb(255 255 255 / 0.14);
}
.tempo-painel > span { display: grid; justify-items: center; gap: 3px; }
.tempo-painel .ic { width: 18px; height: 18px; }
.tempo-painel b { font-size: 0.9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tempo-painel small { font-size: 0.6875rem; color: rgb(255 255 255 / 0.9); }
.tempo-painel hr { grid-column: 1 / -1; width: calc(100% - 16px); margin: 0 auto; border: 0; border-top: 1px solid rgb(255 255 255 / 0.3); }
.tint-nascer { color: #ffe08a; }
.tint-por { color: #cdd6ff; }
.tint-uv { color: #ffd166; }

.tempo-semana { display: grid; gap: 10px; margin-top: 6px; }
.tempo-sub { font-size: 1.0625rem; font-weight: 700; }
.tempo-semana ul { display: grid; gap: 10px; }
.dia {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--sup); border: 1px solid var(--borda);
  font-size: 0.8125rem; color: var(--suave); font-variant-numeric: tabular-nums;
}
.dia-fds { background: var(--fds); border-color: var(--fds-borda); }
.dia > b { width: 44px; flex: none; font-size: 0.875rem; font-weight: 700; color: var(--texto); }
.dia-fds > b { color: var(--verm-texto); }
.dia-data { width: 40px; flex: none; font-size: 0.75rem; color: var(--tenue); }
.dia > .ic { width: 22px; height: 22px; margin-inline: 2px; color: var(--verm); }
.dia-estado { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-chuva { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 600; color: var(--chuva); }
.dia-chuva .ic { width: 12px; height: 12px; }
.dia-temps { display: flex; gap: 8px; font-size: 0.875rem; }
.dia-temps strong { font-weight: 700; color: var(--texto); }
.dia-temps span { color: var(--tenue); }
.dia > .dia-seta { width: 14px; height: 14px; margin: 0 0 0 2px; color: var(--seta); }

@media (max-width: 420px) {
  .dia { gap: 6px; padding-inline: 12px; }
  .dia-data { display: none; }
}

/* ---------- Preferências (interativas) ---------- */

.preferencias { display: grid; gap: 32px; }

@media (min-width: 900px) {
  .preferencias { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
}

.preferencias-texto { display: grid; gap: 18px; }
.preferencias-texto h2 { max-width: 12ch; }
.preferencias-texto > p { max-width: 30em; font-size: 1.125rem; color: var(--texto-2); }
.experimenta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--verm-texto); }
.experimenta .ic { width: 18px; height: 18px; }

.perfil { border-radius: 16px; background: var(--sup); border: 1px solid var(--borda); overflow: hidden; }
.perfil fieldset { margin: 0; padding: 16px; border: 0; }
.perfil fieldset + fieldset { border-top: 1px solid var(--borda); padding-top: 8px; }
.perfil legend { float: left; width: 100%; padding: 0 0 10px; font-size: 0.8125rem; font-weight: 600; color: var(--tenue); }

.segmentos { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--fundo); }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos label {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px; border-radius: 9px; cursor: pointer;
  font-weight: 600; font-size: 0.875rem; color: var(--texto-2);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 160ms var(--ease-out);
}
.segmentos .ic { width: 15px; height: 15px; }
.segmentos input:checked + label { background: var(--verm); color: #fff; }
.segmentos input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 2px; }
.segmentos label:active { transform: scale(0.97); }

.interruptor {
  clear: both;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; cursor: pointer; font-weight: 600; font-size: 0.9375rem;
}
.interruptor + .interruptor { border-top: 1px solid var(--borda); }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor i {
  position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px;
  background: var(--ph); transition: background-color 200ms var(--ease-out);
}
.interruptor i::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
  transition: transform 260ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.interruptor input:checked + i { background: var(--verm); }
.interruptor input:checked + i::after { transform: translateX(18px); }
.interruptor input:focus-visible + i { outline: 3px solid var(--foco); outline-offset: 3px; }

/* ---------- Suporte ---------- */

.suporte-cartao {
  display: grid; gap: 24px; align-items: center;
  padding: 32px 24px; border-radius: 28px;
  background: linear-gradient(135deg, #cf3f41, #c63839 45%, #8f2b2c);
  box-shadow: 0 18px 40px -18px rgb(143 43 44 / 0.6);
  color: #fff;
}
.suporte-cartao h2 { font-size: clamp(1.875rem, 4.6vw, 2.75rem); margin-bottom: 10px; }
.suporte-cartao p { max-width: 30em; color: rgb(255 255 255 / 0.92); font-size: 1.0625rem; }
.email {
  margin-top: 12px; font-size: clamp(1.25rem, 5.4vw, 1.75rem); font-weight: 600; color: #fff;
  overflow-wrap: anywhere; user-select: all; -webkit-user-select: all;
}
.botao {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 14px 24px; border-radius: 14px;
  background: #fff; color: #b5302f; font-weight: 600; font-size: 1rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgb(60 10 10 / 0.5);
  transition: transform 160ms var(--ease-out);
}
.botao .ic { width: 20px; height: 20px; }
.botao:active { transform: scale(0.97); }
.suporte-cartao { --foco: #ffffff; }

@media (min-width: 900px) {
  .suporte-cartao { grid-template-columns: 1fr auto; padding: 48px 56px; }
  .botao { justify-self: end; }
}

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

.rodape {
  max-width: 1240px; margin-inline: auto;
  display: grid; gap: 16px; padding: 8px 20px 120px;
  font-size: 0.875rem; color: var(--suave);
}
.rodape p:first-child { max-width: 46em; }
.rodape ul { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.rodape a { display: inline-block; padding-block: 6px; color: var(--texto); font-weight: 600; text-decoration: none; }
.rodape a:hover { color: var(--verm-texto); }

@media (min-width: 900px) {
  .rodape { grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; padding: 24px 40px 48px; }
}

/* ---------- Telemóvel: a barra vai para baixo, como na app ---------- */

@media (max-width: 899px) {
  .marca { position: static; display: flex; width: max-content; padding: 20px 20px 0; font-size: 1.125rem; }
  .marca img { width: 32px; height: 32px; border-radius: 8px; }
  .barra {
    top: auto; left: 12px; right: 12px; transform: none;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .barra ul { justify-content: space-between; padding: 0 4px; }
  .tab { width: auto; flex: 1; min-width: 0; height: 60px; font-size: 0.6875rem; }
  .barra li { flex: 1; display: flex; }
  .heroi { padding-top: 28px; }
  html { scroll-padding-top: 16px; }
}

@media (max-width: 999px) {
  .heroi-visual { min-height: 0; padding-block: 24px; }
  .heroi-foto { width: 100%; height: 78%; }
  .telemovel { justify-self: center; margin-left: 0; width: min(300px, 82vw); }
}

@media (max-width: 380px) {
  .ecra { padding-inline: 11px; font-size: 10px; }
  .app-chip { padding-inline: 5px; }
}


/* ---------- Páginas legais (como o ecrã Termos da app) ---------- */

.legal {
  max-width: 46rem; margin-inline: auto;
  padding: 112px 20px 72px;
  font-size: 1rem; line-height: 1.65; color: var(--texto-2);
}
@media (max-width: 899px) { .legal { padding-top: 32px; } }

.voltar {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 28px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
}
.voltar .ic { width: 15px; height: 15px; }

.legal h1 { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; color: var(--texto); margin-bottom: 14px; }
.legal h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--texto); margin: 40px 0 10px; }
.legal h3 { font-size: 1.0625rem; font-weight: 600; color: var(--texto); margin: 22px 0 4px; }
.legal p { margin: 0 0 0.9em; }
.legal strong { color: var(--texto); font-weight: 600; }
.legal .entrada { font-size: 1.125rem; color: var(--texto-2); }

.legal .meta {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  margin: 18px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--borda);
  font-size: 0.8125rem; color: var(--tenue);
}
.legal .meta span:first-child { color: var(--verm-texto); font-weight: 600; }
#titulo-termos ~ .meta span:first-child { color: var(--tenue); font-weight: 400; }

.legal .essencial { margin-top: 24px; padding: 20px; border-radius: 16px; background: var(--sup); border: 1px solid var(--borda); }
.legal .essencial h2 { margin: 0 0 12px; font-size: 1.0625rem; }
.legal .essencial ul { display: grid; gap: 10px; }
.legal .essencial li { position: relative; padding-left: 22px; line-height: 1.5; }
.legal .essencial li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--verm); }

.legal .tabela { margin: 16px 0 8px; border-radius: 14px; overflow: hidden; background: var(--sup); border: 1px solid var(--borda); }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.legal thead th { padding: 12px 14px; font-size: 0.8125rem; font-weight: 600; text-align: left; color: var(--tenue); border-bottom: 1px solid var(--borda); }
.legal tbody th, .legal td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda); }
.legal tbody tr:last-child > * { border-bottom: 0; }
.legal tbody th { font-weight: 600; color: var(--texto); }
.legal .onde { font-size: 0.8125rem; font-weight: 600; color: var(--verm-texto); white-space: nowrap; }

@media (max-width: 599px) {
  .legal .tabela table, .legal .tabela tbody, .legal .tabela tr, .legal .tabela th, .legal .tabela td { display: block; }
  .legal .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal .tabela tbody tr { padding: 14px; border-bottom: 1px solid var(--borda); }
  .legal .tabela tbody tr:last-child { border-bottom: 0; }
  .legal .tabela tbody th, .legal .tabela td { padding: 0; border: 0; }
  .legal .onde { margin: 2px 0 4px; white-space: normal; }
  .legal .onde::before { content: "Onde fica: "; font-weight: 400; color: var(--tenue); }
}

.legal .aviso { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--sup-alt); color: var(--texto); font-size: 0.9375rem; }

.legal .horario { margin: 14px 0 18px; border-radius: 14px; background: var(--sup); border: 1px solid var(--borda); }
.legal .horario > div { display: grid; gap: 2px 16px; padding: 12px 14px; }
.legal .horario > div + div { border-top: 1px solid var(--borda); }
.legal .horario dt { font-size: 0.8125rem; font-weight: 600; color: var(--verm-texto); }
.legal .horario dd { margin: 0; line-height: 1.5; }
@media (min-width: 600px) { .legal .horario > div { grid-template-columns: 10rem minmax(0, 1fr); } }

.legal .terceiros { display: grid; gap: 16px; margin: 16px 0 0; }
.legal .terceiros dt { font-weight: 600; color: var(--texto); }
.legal .terceiros dd { margin: 0; line-height: 1.55; }

.legal .fecho-legal { margin-top: 40px; padding-top: 4px; border-top: 1px solid var(--borda); }
.legal .email { color: var(--verm-texto); font-size: 1rem; margin: 0; user-select: text; font-weight: 600; }

.legal .entrada-termos { font-size: 1rem; padding-bottom: 20px; border-bottom: 1px solid var(--borda); }
.legal .clausula { margin-top: 32px; }
.legal .clausula h2 { margin: 0 0 10px; font-size: 1.25rem; }
.legal .itens { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.legal .itens li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 8px; }
@media (max-width: 599px) { .legal .itens li { grid-template-columns: 2.1rem minmax(0, 1fr); gap: 4px; } }
.legal .itens .num { font-weight: 600; color: var(--tenue); font-variant-numeric: tabular-nums; line-height: 1.65; }
.legal .itens p { margin: 0; }

/* ---------- Movimento ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* LogoSting: a mesma coreografia da app (mobile/src/components/LogoSting.tsx), 2,15 s */
  .sting-tudo { transform-origin: 512px 512px; transform-box: view-box; animation: st-assentar 600ms cubic-bezier(0.33, 1, 0.68, 1) 1550ms both; }
  .moldura-traco { stroke-dasharray: 1725; animation: st-desenhar 700ms cubic-bezier(0.37, 0, 0.63, 1) 50ms both, st-sair 230ms cubic-bezier(0.37, 0, 0.63, 1) 550ms forwards; }
  .moldura-cheia { animation: st-entrar 230ms cubic-bezier(0.37, 0, 0.63, 1) 550ms both; }
  .wipe { transform-box: fill-box; transform-origin: 50% 100%; }
  .wipe-farol { animation: st-limpar 660ms cubic-bezier(0.33, 1, 0.68, 1) 620ms both; }
  .wipe-garca { animation: st-limpar 760ms cubic-bezier(0.33, 1, 0.68, 1) 1020ms both; }
  .garca { animation: st-levantar 760ms cubic-bezier(0.33, 1, 0.68, 1) 1020ms both; }
  .asa { transform-box: view-box; transform-origin: 572px 512px; animation: st-asa 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 1400ms both; }

  /* O telemóvel entra uma vez, depois do logótipo começar */
  .telemovel { animation: entrar-telemovel 900ms var(--ease-out) 250ms both; }
  .heroi-foto { animation: entrar-foto 1100ms var(--ease-out) both; }

  .ligar:hover, .botao:hover { transform: translateY(-1px); }

  /* Notícias em destaque passam sozinhas a cada 4,5 s, como na app (HomeScreen.tsx).
     Duas voltas e fica na primeira; para quando o rato está sobre o telemóvel. */
  .ecra .app-faixa { animation: destaque-passar 18s cubic-bezier(0.45, 0, 0.2, 1) 2s 2; }
  .ecra .app-pontos span { transition: none; }
  .ecra .app-pontos span:nth-child(1) { animation: ponto-ativo 18s cubic-bezier(0.45, 0, 0.2, 1) 2s 2; }
  .ecra .app-pontos span:nth-child(2) { animation: ponto-ativo 18s cubic-bezier(0.45, 0, 0.2, 1) 6.5s 1.75; }
  .ecra .app-pontos span:nth-child(3) { animation: ponto-ativo 18s cubic-bezier(0.45, 0, 0.2, 1) 11s 1.5; }
  .ecra .app-pontos span:nth-child(4) { animation: ponto-ativo 18s cubic-bezier(0.45, 0, 0.2, 1) 15.5s 1.25; }
  .telemovel:hover .app-faixa, .telemovel:hover .app-pontos span { animation-play-state: paused; }
}

/* Fotos dos cartões aproximam-se um pouco sob o rato (sem levantar: os cartões não são ligações) */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .local img, .cartao-noticia img, .cartao-evento img {
    transition: transform 600ms var(--ease-out);
  }
  .local:hover img, .cartao-noticia:hover img, .cartao-evento:hover img {
    transform: scale(1.04);
  }
  .cartao-evento { overflow: hidden; }
}

@keyframes st-desenhar { from { stroke-dashoffset: 1725; } to { stroke-dashoffset: 0; } }
@keyframes st-sair { to { opacity: 0; } }
@keyframes st-entrar { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-limpar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes st-levantar { from { transform: translateY(16px); } to { transform: none; } }
@keyframes st-asa { from { transform: scale(0); } to { transform: none; } }
@keyframes st-assentar { from { transform: scale(0.96); } to { transform: none; } }
@keyframes destaque-passar {
  0%, 22.2% { transform: none; }
  25%, 47.2% { transform: translateX(-100%); }
  50%, 72.2% { transform: translateX(-200%); }
  75%, 97.2% { transform: translateX(-300%); }
  100% { transform: none; }
}
@keyframes ponto-ativo {
  0%, 22.2% { width: 15px; background: var(--verm); }
  25%, 97.2% { width: 5px; background: var(--ph); }
  100% { width: 15px; background: var(--verm); }
}
@keyframes entrar-telemovel { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes entrar-foto { from { opacity: 0; transform: translateY(-50%) scale(1.03); } to { opacity: 1; transform: translateY(-50%); } }

/* Entrada das secções ao descer. Nada fica escondido onde não há suporte.
   1) Navegadores com gatilhos de scroll (Chrome/Edge recentes): cada peça faz uma entrada curta,
      com duração fixa, quando aparece no ecrã, seja qual for a velocidade do scroll. Repete sempre
      que volta a entrar (de baixo ou de cima); só volta ao início depois de sair do ecrã por completo.
   2) Só com timelines de scroll (ex.: Safari): a entrada acompanha o scroll.
   Cada secção entra à sua maneira; curva de saída forte, como a abertura da app. */

@supports (timeline-trigger-name: --t) {
  @media (prefers-reduced-motion: no-preference) {
    main { overflow-x: clip; } /* o que entra de lado não cria scroll horizontal */

    .agenda-texto, .turismo > h2, .turismo-sub, .categorias, .ria > h2, .ria-sub, .servicos > h2,
    .preferencias-texto, .cartao-noticia, .cartao-evento, .telemovel-turismo, .local,
    .contactos li, .tempo-agora, .dia, .perfil, .suporte-cartao {
      timeline-trigger: --rv view() cover 8% cover 92% / cover 0% cover 100%;
      animation: rv-subir 650ms var(--ease-out) both;
      animation-trigger: --rv replay reset;
    }
    .turismo-sub, .ria-sub { animation-delay: 80ms; }
    .categorias { animation-delay: 140ms; }

    /* Agenda: os eventos deslizam da direita, um de cada vez */
    .cartao-evento { animation-name: rv-direita; animation-delay: 60ms; }
    .agenda-visual > .cartao-evento:nth-child(4) { animation-delay: 160ms; }

    /* Turismo: o telemóvel sobe e assenta; a segunda coluna vem logo a seguir */
    .telemovel-turismo { animation-name: rv-assentar; animation-duration: 900ms; }
    .turismo-grelha > .local:nth-child(odd) { animation-delay: 90ms; }

    /* Ria: a conversa acontece por ordem, com uma pausa antes da resposta */
    .conversa { timeline-trigger: --conversa view() cover 12% cover 88% / cover 0% cover 100%; }
    .ria-topo, .balao-eu, .balao-ria, .sugestoes li {
      animation: rv-subir 600ms var(--ease-out) both;
      animation-trigger: --conversa replay reset;
    }
    .balao-eu { animation-name: rv-balao-eu; animation-delay: 250ms; }
    .balao-ria { animation-name: rv-balao-ria; animation-delay: 750ms; }
    .sugestoes li { animation-name: rv-pop; animation-duration: 450ms; animation-delay: 1150ms; }
    .sugestoes li:nth-child(2) { animation-delay: 1220ms; }
    .sugestoes li:nth-child(3) { animation-delay: 1290ms; }

    /* Serviços: contactos e dias em cascata; o cartão do tempo assenta */
    .contactos li, .dia { animation-name: rv-subir-curto; animation-duration: 500ms; }
    .contactos li:nth-child(2) { animation-delay: 60ms; }
    .contactos li:nth-child(3) { animation-delay: 120ms; }
    .contactos li:nth-child(4) { animation-delay: 180ms; }
    .dia:nth-child(even) { animation-delay: 50ms; }
    .tempo-agora, .perfil, .suporte-cartao { animation-name: rv-assentar; animation-duration: 750ms; }
  }
}

@supports (animation-timeline: view()) and (not (timeline-trigger-name: --t)) {
  @media (prefers-reduced-motion: no-preference) {
    main { overflow-x: clip; }

    .agenda-texto, .turismo > h2, .turismo-sub, .categorias, .ria > h2, .ria-sub, .servicos > h2,
    .preferencias-texto, .cartao-noticia, .telemovel-turismo, .local, .ria-topo, .balao-eu, .balao-ria,
    .sugestoes li, .contactos li, .tempo-agora, .dia, .perfil, .suporte-cartao {
      animation-name: rv-subir;
      animation-duration: 1ms; /* necessário no Firefox; a duração real é o scroll */
      animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 0% cover 35%;
    }
    .cartao-evento {
      animation: rv-direita 1ms cubic-bezier(0.33, 1, 0.68, 1) both;
      animation-timeline: view();
      animation-range: cover 2% cover 37%;
    }
    .agenda-visual > .cartao-evento:nth-child(4) { animation-range: cover 7% cover 42%; }
    .telemovel-turismo { animation-name: rv-assentar; animation-range: cover 0% cover 40%; }
    .turismo-grelha > .local:nth-child(odd) { animation-range: cover 6% cover 41%; }
    .balao-eu { animation-name: rv-balao-eu; animation-range: cover 4% cover 34%; }
    .balao-ria { animation-name: rv-balao-ria; animation-range: cover 12% cover 42%; }
    .sugestoes li { animation-name: rv-pop; animation-range: cover 18% cover 44%; }
    .sugestoes li:nth-child(2) { animation-range: cover 21% cover 47%; }
    .sugestoes li:nth-child(3) { animation-range: cover 24% cover 50%; }
    .contactos li, .dia { animation-name: rv-subir-curto; }
    .contactos li:nth-child(2) { animation-range: cover 4% cover 39%; }
    .contactos li:nth-child(3) { animation-range: cover 8% cover 43%; }
    .contactos li:nth-child(4) { animation-range: cover 12% cover 47%; }
    .dia:nth-child(even) { animation-range: cover 4% cover 39%; }
    .tempo-agora, .perfil, .suporte-cartao { animation-name: rv-assentar; }
  }
}
@keyframes rv-subir { from { opacity: 0; transform: translateY(32px); } }
@keyframes rv-subir-curto { from { opacity: 0; transform: translateY(16px); } }
@keyframes rv-direita { from { opacity: 0; transform: translateX(40px); } }
@keyframes rv-abrir { from { opacity: 0.4; clip-path: inset(14% 0 0 0 round 20px); } to { clip-path: inset(0 round 20px); } }
@keyframes rv-balao-eu { from { opacity: 0; transform: translateX(24px) scale(0.96); } }
@keyframes rv-balao-ria { from { opacity: 0; transform: translateX(-24px) scale(0.96); } }
@keyframes rv-pop { from { opacity: 0; transform: scale(0.9); } }
@keyframes rv-assentar { from { opacity: 0; transform: translateY(24px) scale(0.96); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, .tab .ic, .segmentos label, .interruptor i, .interruptor i::after { transition: none; }
}

@media print {
  .barra, .saltar, .heroi-visual, .botao { display: none; }
}