/* 19/10 · a página de cada zona e a capa das praias na D2 (server/siteD/zonaD.ts e praiaD.ts). Sobre a moldura da d2
   (d2.css + escola.css + pagina.css + blocos.css): só os tokens dela (--ciano, --claro, --fraco, --espuma, --ease, --t2…)
   e as classes que já existem (wrap, h1, h2, lead, etq, bt, cond, num, data-reveal, data-split, data-par).
   Princípios lidos no Mobbin a 19/10 (nada copiado): o nome do sítio grande por cima da fotografia, em baixo à esquerda,
   e os sítios vizinhos em pílulas com seta (Eventbrite); numa grelha de fotografias o texto longo vai por baixo da
   fotografia, nunca em cima (Craft); um sobrolho pequeno com o lugar por cima de um nome muito grande e uma acção só (KOBU).
   Sem letra ciano (regra do dono de 18/10): o ciano fica nos botões, nos pontos e nos traços. */

/* ---------- a capa: fotografia de largura inteira, o nome em baixo à esquerda ---------- */
.pz-capa { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(560px, 86vh, 860px); padding: calc(var(--topo, 96px) + 48px) 0 clamp(40px, 6vw, 72px); background: #06101C; }
.pz-capa-m { position: absolute; inset: -6% 0; z-index: -2; will-change: transform; }
.pz-capa-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-capa-fb { position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(70% 60% at 70% 20%, rgba(8,145,178,.42), transparent 70%), radial-gradient(60% 70% at 10% 90%, rgba(11,58,82,.6), transparent 70%), linear-gradient(170deg, #0B2638 0%, #06101C 70%); }
.pz-capa-veu { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,14,26,.55) 0%, rgba(6,14,26,.12) 30%, rgba(6,14,26,.5) 62%, rgba(6,14,26,.92) 92%, var(--noite, #060E1A) 100%),
              linear-gradient(90deg, rgba(6,14,26,.55) 0%, rgba(6,14,26,0) 62%); }
.pz-capa-in { position: relative; width: min(var(--max), 100% - 2 * var(--gut)); }
/* 25/10 (noite) · o «Voltar» da página da zona para o Surf Today com a zona aberta (zonaD.ts, `voltarAoSurfToday`); o mesmo
   botão leva o pedido de aula (/pedir-aula) de volta ao sítio de onde veio */
.pz-voltar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 12px; margin: 0 0 18px; border: 0; border-radius: 9999px;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: #fff; text-decoration: none;
  background: rgba(6,14,26,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pz-voltar svg { width: 18px; height: 18px; }
.pz-voltar:hover { background: rgba(6,14,26,.7); }
.pz-voltar:active { transform: scale(.97); }
.pz-voltar:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }
.pz-trilho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 18px; font-size: 14px; color: var(--claro); }
.pz-trilho a { color: #E2E8F0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(226,232,240,.35); }
.pz-trilho a:hover { text-decoration-color: currentColor; }
/* 26/10 · medido a 390 px (Playwright sobre a produção): ligações com 15 a 22 px de altura para o dedo. Crescem para 44-46 px; o espaço à volta fica igual. */
.pz-trilho a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.pz-trilho [aria-current] { color: #fff; font-weight: 600; }
.pz-sep { opacity: .45; }
.pz-etq { margin: 0 0 14px; color: #E2E8F0; }
.pz-h1 { max-width: 16ch; margin: 0; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); overflow-wrap: anywhere; }
.pz-lead { max-width: 58ch; margin: 20px 0 0; color: #E2E8F0; }
.pz-nums { display: flex; flex-wrap: wrap; gap: 0; margin: 30px 0 0; }
.pz-num { display: flex; flex-direction: column; gap: 6px; padding: 2px 26px 2px 0; margin-right: 26px; border-right: 1px solid rgba(255,255,255,.18); }
.pz-num:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.pz-num b { font-size: clamp(40px, 4.4vw, 60px); color: #fff; }
.pz-num span { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--claro); }
.pz-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.pz-capa-sem { min-height: clamp(460px, 64vh, 640px); }

/* ---------- as secções ---------- */
.pz-sec { position: relative; padding: clamp(64px, 8vw, 104px) 0 0; }
.pz-cab { margin: 0 0 clamp(26px, 3.4vw, 40px); }
.pz-cab .etq { margin: 0 0 12px; color: var(--claro); }
.pz-cab .h2 { margin: 0; max-width: 20ch; }

/* ---------- as praias da zona: a fotografia com o nome, o resto por baixo ---------- */
.zn-grelha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* 27/10 · decisão do dono: as praias sem escolas ficam atrás de «Ver todas desta zona» (abre sem JavaScript) */
.zn-mais { margin-top: 22px; }
.zn-mais > summary { list-style: none; cursor: pointer; }
.zn-mais > summary::-webkit-details-marker { display: none; }
.zn-mais[open] > summary { display: none; }
.zn-praia { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; text-decoration: none; color: var(--espuma);
  background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .35s var(--ease), box-shadow .3s var(--ease); }
.zn-praia:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 26px 50px -30px rgba(0,0,0,.9); }
.zn-praia:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }
.zn-praia-f { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0B2638; }
.zn-praia-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.zn-praia:hover .zn-praia-f img { transform: scale(1.04); }
.zn-praia-fb { position: absolute; inset: 0; background: radial-gradient(80% 70% at 70% 15%, rgba(8,145,178,.45), transparent 70%), linear-gradient(170deg, #0E3147, #07131F); }
.zn-praia-veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,26,0) 45%, rgba(6,14,26,.82) 100%); }
.zn-praia-n { position: absolute; left: 18px; right: 18px; bottom: 14px; margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.08; letter-spacing: -.025em; font-weight: 800; color: #fff; text-wrap: balance; }
.zn-preco { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 12px; border-radius: 9999px;
  background: rgba(6,14,26,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.zn-preco b { font-size: 15px; color: #fff; }
.zn-preco small { font-size: 12px; color: var(--claro); }
.zn-praia-t { position: relative; display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 16px 18px 20px; }
.zn-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.zn-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px; border-radius: 9999px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--espuma); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.zn-tag-escolas { color: #06121F; background: #F1F5F9; box-shadow: none; }
.zn-tag-vazia { color: var(--fraco); background: none; }
.zn-praia-d { font-size: 15px; line-height: 1.55; color: var(--claro); padding-right: 30px; }
.zn-praia-mais { position: absolute; right: 18px; bottom: 20px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--claro); transition: transform .3s var(--ease), color .2s; }
.zn-praia-mais svg { width: 18px; height: 18px; }
.zn-praia:hover .zn-praia-mais { transform: translateX(3px); color: #fff; }

/* ---------- as escolas: uma lista com seta ---------- */
.zn-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zn-escola { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 76px; padding: 16px 20px; border-radius: 18px; text-decoration: none; color: var(--espuma);
  background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); transition: background-color .2s, box-shadow .2s; }
.zn-escola:hover { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.zn-escola span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zn-escola b { font-size: 16px; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.zn-escola small { font-size: 13px; color: var(--fraco); }
.zn-escola svg { flex: none; width: 18px; height: 18px; color: var(--claro); transition: transform .3s var(--ease); }
.zn-escola:hover svg { transform: translateX(3px); }

/* ---------- o mapa ---------- */
.zn-mapa-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.zn-mapa .lead strong { color: #fff; }
.zn-regiao { margin: 18px 0 0; }
.zn-mapa-f { margin: 0; justify-self: end; width: min(100%, 420px); aspect-ratio: 1; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -34px rgba(0,0,0,.9); }
.zn-mapa-f img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- as zonas próximas: pílulas com seta ---------- */
.zn-pilulas { display: flex; flex-wrap: wrap; gap: 10px; }
.zn-pilula { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 8px 20px; border-radius: 9999px; text-decoration: none; color: var(--espuma);
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background-color .2s, box-shadow .2s; }
.zn-pilula:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); }
.zn-pilula b { font-size: 15px; color: #fff; }
.zn-pilula small { font-size: 13px; color: var(--fraco); }
.zn-pilula svg { width: 16px; height: 16px; color: var(--claro); }

/* ---------- o fecho: a mesma fotografia, mais escura ---------- */
.pz-fecho { position: relative; isolation: isolate; overflow: hidden; margin: clamp(72px, 9vw, 120px) 0 0; padding: clamp(96px, 14vw, 180px) 0; text-align: center; background: #06101C; }
.pz-fecho-m { position: absolute; inset: -8% 0; z-index: -2; }
.pz-fecho-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-fecho::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(6,14,26,.7); }
.pz-fecho-sem { background: radial-gradient(60% 80% at 50% 0%, rgba(8,145,178,.24), transparent 70%), #06101C; }
.pz-fecho-sem::after { display: none; }
.pz-fecho-in .h2 { margin-inline: auto; color: #fff; max-width: 20ch; }
.pz-fecho-in .lead { margin-inline: auto; color: #E2E8F0; }
.pz-fecho-in .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

/* ---------- telemóvel ---------- */
@media (max-width: 980px) {
  .zn-grelha, .zn-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zn-mapa-in { grid-template-columns: 1fr; }
  .zn-mapa-f { justify-self: start; }
}
@media (max-width: 640px) {
  .pz-capa { min-height: 0; padding: calc(var(--topo, 84px) + 120px) 0 36px; }
  .pz-capa-sem { padding-top: calc(var(--topo, 84px) + 48px); }
  .pz-num { padding-right: 18px; margin-right: 18px; }
  .pz-num b { font-size: 38px; }
  .pz-ctas .bt { flex: 1 1 auto; justify-content: space-between; }
  .zn-grelha, .zn-lista { grid-template-columns: 1fr; }
  .zn-pilula { flex: 1 1 100%; justify-content: space-between; }
  .zn-pilula small { margin-right: auto; }
  .pz-fecho { padding: 88px 0; }
}
/* no telemóvel o texto ocupa a largura toda: o véu escurece o meio da fotografia, não só a esquerda */
@media (max-width: 640px) {
  .pz-capa-veu { background: linear-gradient(180deg, rgba(6,14,26,.5) 0%, rgba(6,14,26,.38) 24%, rgba(6,14,26,.78) 52%, rgba(6,14,26,.95) 88%, var(--noite, #060E1A) 100%); }
}
/* 25/10 · no telemóvel a descrição da zona fecha numa linha com uma seta e abre com um toque (o mesmo desenho do topo da
   inicial, escolha do dono); o guião vive ao lado do parágrafo em `server/siteD/zonaD.ts` (LEAD_FECHAVEL_GUIAO). */
@media (max-width: 600px) {
  .pz-lead.pz-lead-fecha { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; position: relative; padding-right: 30px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pz-lead.pz-lead-fecha::after { content: ""; position: absolute; right: 8px; top: .45em; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
  .pz-lead.pz-lead-fecha.aberto { -webkit-line-clamp: unset; display: block; }
  .pz-lead.pz-lead-fecha.aberto::after { transform: translateY(4px) rotate(-135deg); }
}

/* ---------- 27/10 · AS ESCOLAS E AS PERGUNTAS EM FAIXA CLARA ----------
   O dono (25/10 e de novo a 27/10): «mais branco no site, com mais vida, para converter melhor sem perder a identidade».
   A regra: a emoção (a fotografia da capa, as praias, o mar) fica em cima e escura; a DECISÃO (que escola, as dúvidas
   antes de reservar) passa a uma faixa clara. Aplica a proposta d1a778e68 (ramo site-claro-proposta), com duas correções
   medidas: o sobrolho ia a #0E7490 e o semazul.js troca QUALQUER letra ciano por #F1F5F9 (branco sobre o #F1F5F9: some);
   passa a #475569. Só cores da casa: faixa #F1F5F9 · cartão #FFFFFF · linha #E2E8F0 · texto #0F172A · rótulos #475569.
   Guarda: server/tests/asFaixasClarasLeemSe.test.ts */
.zn-escolas, .zn-faq { --espuma: #0F172A; --fraco: #475569; --claro: #334155; --linha: #E2E8F0;
  margin-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); background: #F1F5F9; color: #0F172A; color-scheme: light; }
.zn-escolas + .zn-faq, .zn-faq + .zn-escolas { margin-top: 0; }
.zn-escolas .h2, .zn-faq .h2 { color: #0F172A; }
.zn-escolas .etq, .zn-faq .etq, .zn-escolas .pz-cab .etq, .zn-faq .pz-cab .etq { color: #475569; }
.zn-escolas .zn-escola { background: #FFFFFF; box-shadow: inset 0 0 0 1px #E2E8F0, 0 12px 28px -22px rgba(15,23,42,.35); }
.zn-escolas .zn-escola:hover { background: #FFFFFF; box-shadow: inset 0 0 0 1px #64748B, 0 16px 32px -22px rgba(15,23,42,.4); }
.zn-escolas .zn-escola:focus-visible, .zn-faq .pg-abre > summary:focus-visible { outline: 2px solid #0E7490; outline-offset: 2px; }
.zn-escolas .zn-escola b { color: #0F172A; }
.zn-escolas .zn-escola small { color: #475569; }
.zn-escolas .zn-escola svg { color: #0E7490; }
.zn-faq .pg-abre { background: #FFFFFF; box-shadow: inset 0 0 0 1px #E2E8F0; }
.zn-faq .pg-abre > summary { color: #0F172A; }
.zn-faq .pg-abre > summary:hover { background: #F1F5F9; }
.zn-faq .pg-abre-c, .zn-faq .pg-abre-c > p { color: #334155; }
.zn-faq .pg-abre-c a { color: #0F172A; text-decoration: underline; text-underline-offset: 3px; }