/* ============================================================
   MARATONA DO ALGARVE, homepage na direção A «Postal» (29 set 2026)
   Escolhida pelo Luís a partir de docs/refresh-2026/hero-sol/ (mockup a.html).
   Só a homepage carrega esta folha. Marcação em includes/home-postal.php.
   Tokens do Dorsal v2 (v2-comum.css); o sol vem das fotografias, não da paleta.
   ============================================================ */

/* ---------- 1. Hero: a Marina de Vilamoura a ecrã inteiro ---------- */
body.dorsal .postal { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: max(720px, 100svh); padding-top: var(--hh, 88px); color: #fff; background: var(--v2-noite); overflow: hidden; }
body.dorsal .postal__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
body.dorsal .postal::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,23,38,.6) 0%, rgba(5,23,38,0) 22%, rgba(5,23,38,0) 40%, rgba(5,23,38,.7) 76%, rgba(5,23,38,.92) 100%); }
body.dorsal .postal__corpo { padding-bottom: 40px; }
body.dorsal .postal__t { margin: 0; font-family: var(--v2-display); font-weight: 400; font-size: clamp(56px, 8.2vw, 128px); line-height: .94; text-transform: uppercase; letter-spacing: .005em; color: #fff; }
body.dorsal .postal__evento { display: block; margin-bottom: 16px; font: 500 18px/1.4 var(--v2-corpo); text-transform: none; letter-spacing: .02em; }
body.dorsal .postal__data, body.dorsal .postal__local { display: block; font-style: italic; }
body.dorsal .postal__local { color: var(--v2-sinal); }
body.dorsal .postal__t, body.dorsal .postal__claim, body.dorsal .postal__sub { text-shadow: 0 1px 14px rgba(5,23,38,.45); }
body.dorsal .postal__claim { margin: 24px 0 0; font-size: 20px; font-weight: 700; }
body.dorsal .postal__sub { max-width: 34em; margin: 8px 0 0; font-size: 18px; line-height: 1.6; color: #fff; }
body.dorsal .postal .countdown__done { margin: 16px 0 0; font-weight: 500; }
body.dorsal .postal__legenda { position: absolute; top: calc(var(--hh, 88px) + 24px); right: max(24px, (100vw - var(--maxw, 1240px)) / 2 + 24px); margin: 0; padding: 8px 12px; border-radius: var(--v2-raio); background: rgba(5,23,38,.62); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .08em; }

/* Barra de base (como a da maratona de Berlim): contagem, preço da fase, televisão oficial e as duas ações */
body.dorsal .postal__base { background: rgba(5,23,38,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.14); }
body.dorsal .postal__barra { display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; min-height: 116px; }
body.dorsal .postal__barra > * + * { margin-left: 40px; padding-left: 40px; border-left: 1px solid rgba(255,255,255,.18); }
body.dorsal .postal__relogio { display: flex; gap: 20px; }
/* A contagem herda as caixas azuis do style.css: aqui volta a ser só números */
body.dorsal .postal__relogio .cd-unit { display: grid; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; isolation: auto; text-align: left; }
body.dorsal .postal__relogio .cd-unit::after { display: none; }
body.dorsal .postal__relogio .cd-unit__num { font: 400 44px/1 var(--v2-display); letter-spacing: .01em; color: #fff; }
body.dorsal .postal__relogio .cd-unit__label { display: block; margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-bruma); }
/* Preço com a mesma medida do relógio (1 out): número de 44 px em cima, etiqueta de 11 px 8 px abaixo, na mesma linha de DIAS, HORAS e MIN.
   A nota fica à direita do número; a etiqueta ocupa as duas colunas para «Última fase online» não empurrar a nota */
body.dorsal .postal__preco { display: grid; grid-template-columns: auto auto; grid-template-areas: "valor nota" "fase fase"; justify-content: start; column-gap: 16px; align-items: end; }
body.dorsal .postal__fase { grid-area: fase; margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v2-sinal); }
body.dorsal .postal__valor { grid-area: valor; font: 400 44px/1 var(--v2-display); letter-spacing: .01em; }
body.dorsal .postal__nota { grid-area: nota; padding-bottom: 2px; font-size: 13px; line-height: 1.4; color: var(--v2-bruma); }
body.dorsal .postal__tv { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.dorsal .postal__tv-logo { height: 40px; width: auto; }
body.dorsal .postal__barra > .postal__acoes { justify-self: end; display: flex; gap: 12px; border-left: 0; }

/* ---------- 2. Factos essenciais (tema escuro, continua o hero) ---------- */
body.dorsal .hp-factos { padding: 96px 0; background: #fff; color: var(--v2-noite); }
body.dorsal .hp-factos__grelha { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
body.dorsal .hp-factos h2 { margin: 0 0 24px; font: 400 var(--v2-t-titulo)/1.02 var(--v2-display); text-transform: uppercase; letter-spacing: .005em; color: var(--v2-noite); }
body.dorsal .hp-factos__resumo { max-width: 33em; margin: 0; font-size: 18px; line-height: 1.7; color: #3B5063; }
body.dorsal .hp-factos__mais { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 24px; font-weight: 700; color: var(--v2-vivo-texto); text-decoration: none; }
body.dorsal .hp-factos__mais::after { content: '→'; transition: transform .15s var(--v2-sair); }
@media (hover: hover) and (pointer: fine) { body.dorsal .hp-factos__mais:hover::after { transform: translateX(4px); } }
body.dorsal .hp-factos dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 2px solid var(--v2-noite); }
body.dorsal .hp-factos dl > div { padding: 24px 24px 28px 0; border-bottom: 1px solid var(--v2-linha); }
body.dorsal .hp-factos dl > div:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--v2-linha); }
body.dorsal .hp-factos dl > div:nth-child(even) { padding-left: 32px; }
body.dorsal .hp-factos dt { font: 400 clamp(40px, 4.4vw, 64px)/1 var(--v2-display); letter-spacing: .01em; color: var(--v2-noite); }
body.dorsal .hp-factos dt small { font-size: .5em; color: var(--v2-vivo-texto); }
body.dorsal .hp-factos dd { max-width: 24em; margin: 12px 0 0; font-size: 1rem; line-height: 1.5; color: var(--v2-tinta-2); }

/* ---------- 3. Faixa de fotografia do Algarve a toda a largura ---------- */
body.dorsal .hp-faixa { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 72svh; color: #fff; background: var(--v2-noite); }
body.dorsal .hp-faixa img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
body.dorsal .hp-faixa::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5,23,38,.78) 0%, rgba(5,23,38,0) 55%); }
body.dorsal .hp-faixa__texto { padding-bottom: 64px; }
body.dorsal .hp-faixa__texto p { max-width: 32em; margin: 0; font-size: 18px; }
body.dorsal .hp-faixa__texto .hp-faixa__t { margin-bottom: 16px; font: 400 clamp(40px, 5vw, 72px)/1 var(--v2-display); text-transform: uppercase; }
body.dorsal .hp-faixa .postal__legenda { top: 24px; }

/* ---------- 4. Mural de parceiros por categorias (tema escuro, logótipos a branco como no rodapé) ---------- */
body.dorsal .hp-apoios { padding: 96px 0; background: var(--v2-areia); color: var(--v2-noite); }
body.dorsal .hp-apoios h2 { margin: 0 0 32px; font: 400 var(--v2-t-titulo)/1.05 var(--v2-display); text-transform: uppercase; color: var(--v2-noite); }
body.dorsal .hp-apoios__nivel { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--v2-linha); }
body.dorsal .hp-apoios__nivel:last-child { border-bottom: 1px solid var(--v2-linha); }
body.dorsal .hp-apoios__rotulo { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v2-tinta-2); }
body.dorsal .hp-apoios__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
body.dorsal .hp-apoios__logos img { height: 36px; width: auto; mix-blend-mode: multiply; }
body.dorsal .hp-apoios__logos img.alto { height: 52px; }
body.dorsal .hp-apoios__logos img.gs { height: 48px; }
body.dorsal .hp-apoios__logos img.tvi { height: 56px; }
body.dorsal .hp-apoios__logos img.dream { height: 20px; }
/* Em fundo claro os logótipos aparecem nas cores da marca; multiply esconde o branco dos ficheiros com fundo */

/* ---------- Ritmo da homepage (auditoria de 30 set, AUD-009 e AUD-004) ----------
   O território passa a claro para partir a sequência de secções escuras;
   a Domitur ganha um filete para se separar da OptViagens. */
body.dorsal .terr { background: #fff; color: var(--v2-noite); padding: 96px 0; }
body.dorsal .terr h2, body.dorsal .terr__fecho { color: var(--v2-noite); }
body.dorsal .terr .section__lead { color: #3B5063; }
body.dorsal .terr__lista li { border-top-color: var(--v2-linha); }
body.dorsal .terr__lista span { color: var(--v2-tinta-2); }
body.dorsal .domitur-band { border-top: 1px solid var(--v2-linha); }

/* ---------- 5. Pastilha fixa de inscrição (a partir de 1024 px; no telemóvel entra o botão fixo do rodapé) ---------- */
body.dorsal .hp-fixa { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 20px; border-radius: var(--v2-raio); background: var(--v2-noite); color: #fff; box-shadow: 0 16px 40px -12px rgba(5,23,38,.55); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .2s var(--v2-sair), transform .2s var(--v2-sair), visibility .2s; }
body.dorsal .hp-fixa.visivel { opacity: 1; visibility: visible; transform: none; }
body.dorsal .hp-fixa__preco { font-size: 14px; color: var(--v2-bruma); }
body.dorsal .hp-fixa__preco b { margin-right: 6px; font: 400 24px/1 var(--v2-display); letter-spacing: .01em; color: #fff; }
body.dorsal .hp-fixa .btn { min-height: 48px; padding: 0 24px; }
@media (max-width: 1023px) { body.dorsal .hp-fixa { display: none; } }
/* Botão fixo do rodapé (telemóvel): só depois de o hero sair do ecrã (classe posta pelo v2-home.js) */
body.dorsal:has(.postal):not(.hp-passou) .sticky-cta { display: none; }

/* ---------- Tablet e telemóvel ---------- */
@media (max-width: 1100px) {
  body.dorsal .postal__barra { grid-template-columns: 1fr 1fr; gap: 24px 0; padding-top: 24px; padding-bottom: 24px; }
  body.dorsal .postal__barra > * + * { margin-left: 0; padding-left: 0; border-left: 0; }
  body.dorsal .postal__barra > .postal__acoes { grid-column: 1 / -1; justify-self: stretch; }
  body.dorsal .postal__acoes .btn { flex: 1; }
}
@media (max-width: 900px) {
  body.dorsal .hp-factos { padding: 64px 0; }
  body.dorsal .hp-factos__grelha { grid-template-columns: 1fr; gap: 40px; }
  body.dorsal .hp-factos dl > div, body.dorsal .hp-factos dl > div:nth-child(odd), body.dorsal .hp-factos dl > div:nth-child(even) { padding: 20px 12px 20px 0; }
  body.dorsal .hp-factos dl > div:nth-child(even) { padding-left: 16px; }
  body.dorsal .hp-apoios { padding: 64px 0; }
  body.dorsal .terr { padding: 64px 0; }
  body.dorsal .hp-apoios__nivel { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  body.dorsal .hp-apoios__logos { gap: 20px 32px; }
  body.dorsal .hp-apoios__logos img { height: 28px; } body.dorsal .hp-apoios__logos img.alto { height: 44px; } body.dorsal .hp-apoios__logos img.gs { height: 40px; }
  body.dorsal .hp-apoios__logos img.tvi { height: 44px; } body.dorsal .hp-apoios__logos img.dream { height: 16px; }
}
@media (max-width: 600px) {
  body.dorsal .postal { min-height: 0; }
  body.dorsal .postal__corpo { padding-top: 300px; padding-bottom: 32px; }
  body.dorsal .postal__foto { height: 480px; }
  body.dorsal .postal::after { bottom: auto; height: 480px; background: linear-gradient(180deg, rgba(5,23,38,.55) 0%, rgba(5,23,38,0) 22%, rgba(5,23,38,0) 45%, rgba(5,23,38,.8) 82%, var(--v2-noite) 100%); }
  body.dorsal .postal__evento, body.dorsal .postal__sub { font-size: 16px; }
  body.dorsal .postal__claim { font-size: 18px; }
  body.dorsal .postal__legenda { top: calc(var(--hh, 72px) + 12px); right: 16px; }
  body.dorsal .postal__base { background: var(--v2-noite); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.dorsal .postal__barra { grid-template-columns: 1fr; gap: 20px; padding-top: 8px; padding-bottom: 32px; }
  body.dorsal .postal__barra > * + * { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
  body.dorsal .postal__barra > .postal__acoes { flex-direction: column; border-top: 0; padding-top: 0; }
  body.dorsal .postal__relogio .cd-unit__num, body.dorsal .postal__valor { font-size: 38px; }
  body.dorsal .hp-faixa { min-height: 60svh; }
  body.dorsal .hp-faixa__texto { padding-bottom: 40px; }
  body.dorsal .hp-faixa__texto p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.dorsal .hp-factos__mais::after { transition: none; }
  body.dorsal .hp-fixa { transition: opacity .2s, visibility .2s; transform: none; }
}
/* Fase 4 (AUD-045): o antetítulo do hero ganha pastilha escura (2,9:1 sobre o céu claro); o texto do H1 não muda */
body.dorsal .postal__evento { display: inline-block; padding: 4px 12px; border-radius: var(--v2-raio); background: rgba(5,23,38,.72); }

/* Território: a foto ocupa a altura toda da secção, de cima a baixo (desktop) */
@media (min-width: 901px) {
  body.dorsal .terr__grelha { align-items: stretch; }
  body.dorsal .terr__texto { align-self: center; }
  body.dorsal .terr__foto { align-self: stretch; margin-block: -48px; }
  body.dorsal .terr__foto img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* OptViagens (home): a fotografia preenche a coluna e o logótipo fica por cima */
body.dorsal #optviagens .split__media, body.dorsal #domitur .split__media { position: relative; }
body.dorsal #optviagens .optv-logo, body.dorsal #domitur .optv-logo { position: absolute; z-index: 3; top: 24px; left: 24px; margin: 0; }
@media (min-width: 1024px) {
  body.dorsal #optviagens .split, body.dorsal #domitur .split { align-items: stretch; }
  body.dorsal #optviagens .split__media, body.dorsal #domitur .split__media { display: flex; }
  body.dorsal #optviagens .split__media .photo, body.dorsal #domitur .split__media .photo { aspect-ratio: auto; width: 100%; min-height: 100%; }
}