:root{
  --ink:#182229;
  --ink-soft:#4c5b64;
  --paper:#faf8f3;
  --paper-2:#f1ece1;
  --line:#e2dccc;
  --ocean:#3f7898;
  --ocean-deep:#1f4356;
  --gold:#c69a4e;
  --gold-deep:#8f6a2c;

  /* TIPO DE LETRA DOS TÍTULOS — 2/out/2026, pedido do Paulo: "muda todos os
     títulos grandes para Times New Roman".
     ⚠ 2/out, mesma tarde: trocada para GEORGIA, o meio-termo que lhe propus —
     serif clássica mas desenhada para ecrã, em vez da Times, que num título
     grande lê-se a documento do Word.
     ⚠ Está aqui numa variável de propósito: muda-se NUM sítio e vale para os
     h1, h2, h3, a marca na barra do topo, o preço grande e a média das
     avaliações. Antes estava repetido em três linhas do ficheiro.
     ⚠ A lista é uma ESCADA, não um capricho: a Georgia vem no Windows, no Mac
     e no Android, que cobre quase toda a gente. Para quem não a tiver (algum
     Linux), seguem-se a Times e a Liberation Serif, e em último caso o serif
     do sistema — nunca fica sem serif.
     📌 para voltar à letra anterior: põe-se aqui
        'Instrument Serif', Georgia, serif
     e volta-se a pôr nas páginas a ligação ao Google Fonts, que foi tirada
     de 18 páginas a 2/out/2026 — sem ela a Instrument Serif não carrega e
     cairia na Georgia de qualquer maneira. */
  --fonte-titulos:Georgia, 'Times New Roman', Times, 'Liberation Serif', serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
.hidden{display:none !important;}
body{
  font-family:'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  color:var(--ink);
  background:var(--paper);
}

/* Dificultar copiar texto/imagens do site (proteção anti-cópia/scraping) */
html,body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
input,textarea,select,[contenteditable]{
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
}
img{
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
}
h1,h2,h3,.serif{font-family:var(--fonte-titulos);}

a{color:var(--gold-deep);text-decoration:none;}
a:hover{color:var(--ink);}

.aviso-construcao{
  background:var(--gold);color:#241a08;text-align:center;
  font-size:13px;font-weight:600;padding:10px 16px;line-height:1.5;
}
.aviso-construcao a{color:#241a08;text-decoration:underline;}

.topbar{
  height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;border-bottom:1px solid var(--line);background:var(--paper);
  gap:16px;
}
.topbar .brand{font-size:20px;}
a.brand{color:var(--ink);text-decoration:none;}
/* Logótipo no topo de todas as páginas (17/set/2026) — para trocar o logótipo basta substituir img/logo.svg */
a.brand{display:inline-flex;align-items:center;gap:10px;}
.brand-logo{width:56px;height:56px;flex:none;display:block;}
@media (max-width:640px){.brand-logo{width:44px;height:44px;}}
a.brand:hover{color:var(--gold-deep);}
.topbar-right{display:flex;align-items:center;gap:26px;}
.topbar-nav{display:flex;gap:18px;}
.topbar-nav a{font-size:13px;color:var(--ink-soft);text-decoration:none;}
.topbar-nav a:hover{color:var(--gold-deep);}
.topbar .step{font-size:13px;color:var(--ink-soft);white-space:nowrap;}
#lang-switcher{font-size:13px;color:var(--ink-soft);white-space:nowrap;}
#lang-switcher a{color:var(--ink-soft);text-decoration:none;}
#lang-switcher a:hover{color:var(--gold-deep);}
#lang-switcher .lang-atual{color:var(--gold-deep);font-weight:600;}
#lang-switcher .lang-sep{margin:0 6px;color:var(--line);}
/* Botão do menu no telemóvel (20/set/2026) --------------------------------
   [stated] o Paulo reparou que abaixo dos 700px o menu desaparecia todo e não
   havia maneira de chegar ao Diário, às Avaliações ou ao Sobre nós. O botão
   fica ao lado do seletor de línguas e abre o menu por baixo da barra. */
.topbar-menu{display:none;}

/* ─────────────────────────────────────────────────────────────────────
   ⭐ O MENU EM GRUPOS — 26/out/2026
   ─────────────────────────────────────────────────────────────────────
   [stated] proposta dele, 25/out às 23h31: juntar as entradas do topo em
   categorias, com as filhas por baixo. A razão não é só arrumação — é que
   o menu tinha crescido para oito links e a barra PARTIA-SE em dois nos
   ecrãs abaixo dos 1280px, que é o que se vê num portátil normal a meia
   janela. Medido: a 1100px a barra ia a 111px de altura em vez dos 72
   desenhados, e o convite a avaliar caía para a linha de baixo.
   Com quatro entradas, a barra volta a caber até aos 900px.

   ⚠ O submenu abre no RATO e também no TECLADO (:focus-within) — quem
   anda à tecla não pode ficar sem metade do site. Abaixo dos 900px isto
   não conta: aí manda o menu do telemóvel, mais abaixo neste ficheiro,
   e os itens do grupo ficam todos à vista sem precisar de abrir nada.
   ───────────────────────────────────────────────────────────────────── */
.nav-grupo{position:relative;display:inline-flex;align-items:center;}
.nav-grupo > .nav-grupo-botao{
  font:inherit;font-size:13px;color:var(--ink-soft);background:none;border:0;
  padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;line-height:1;
}
.nav-grupo > .nav-grupo-botao:hover,
.nav-grupo:focus-within > .nav-grupo-botao{color:var(--gold-deep);}
/* A setinha, desenhada com bordas — sem imagem nem tipo de letra. */
.nav-grupo-seta{
  width:0;height:0;flex:none;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;transition:transform .15s;
}
.nav-grupo:hover .nav-grupo-seta,
.nav-grupo:focus-within .nav-grupo-seta{transform:rotate(180deg);}
.nav-grupo-filhos{
  display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:10px;z-index:70;min-width:210px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:6px 0;
}
/* ⚠ a faixa invisível por cima fecha o buraco entre o botão e a caixa: sem
   ela, o submenu fecha-se a meio do caminho do rato e ninguém lá chega. */
.nav-grupo-filhos::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.nav-grupo:hover > .nav-grupo-filhos,
.nav-grupo:focus-within > .nav-grupo-filhos{display:block;}
.topbar-nav .nav-grupo-filhos a{
  display:block;padding:10px 18px;font-size:14px;color:var(--ink);white-space:nowrap;
}
.topbar-nav .nav-grupo-filhos a + a{border-top:1px solid var(--line);}
.topbar-nav .nav-grupo-filhos a:hover{background:var(--paper-2,#f1ece1);color:var(--gold-deep);}

/* ⚠⚠ 26/out/2026, 13h35: VOLTOU AOS 700px. Tinha subido para 900 de manhã
   porque entre os 700 e os 900 a barra ainda se partia. Com as duas linhas
   deixou de se partir, e os 900 passaram a custar caro: um tablet ao alto tem
   768 ou 834 e ficava com o menu de telemóvel.
   [stated] decisão dele, 13h24: o tablet leva o ecrã do PC. Medido a 768 e a
   834 — cabe, com o menu todo aberto e a nota com as palavras completas. */
@media (max-width: 700px){
  .topbar{position:relative;}
  .topbar-nav{display:none;}
  .topbar-menu{
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font:inherit;font-size:13px;color:var(--ink-soft);
    background:var(--paper);border:1px solid var(--line);border-radius:8px;
    padding:7px 12px;line-height:1;
  }
  .topbar-menu:hover,.topbar-menu.aberto{color:var(--gold-deep);border-color:var(--gold);}
  /* As três riscas, desenhadas com bordas — sem imagem nem tipo de letra. */
  .topbar-menu-risca{
    width:15px;height:2px;background:currentColor;position:relative;display:block;flex:none;
  }
  .topbar-menu-risca::before,.topbar-menu-risca::after{
    content:"";position:absolute;left:0;width:15px;height:2px;background:currentColor;
  }
  .topbar-menu-risca::before{top:-5px;}
  .topbar-menu-risca::after{top:5px;}
  .topbar-nav.aberto{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;right:12px;z-index:60;min-width:220px;
    background:var(--paper);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);padding:6px 0;
  }
  .topbar-nav.aberto a{
    display:block;padding:12px 18px;font-size:15px;color:var(--ink);
  }
  .topbar-nav.aberto a + a{border-top:1px solid var(--line);}
  .topbar-nav.aberto a:hover{background:var(--paper-2,#f1ece1);color:var(--gold-deep);}

  /* ⭐ No telemóvel NÃO há submenu que abra: um menu dentro de um menu é um
     clique a mais e uma armadilha num ecrã pequeno. O grupo vira um título
     e as filhas ficam logo por baixo, todas à vista. */
  .topbar-nav.aberto .nav-grupo{display:block;width:100%;}
  .topbar-nav.aberto .nav-grupo > .nav-grupo-botao{
    display:block;width:100%;text-align:left;padding:12px 18px;font-size:12px;
    letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
    font-weight:600;cursor:default;pointer-events:none;
  }
  .topbar-nav.aberto .nav-grupo-seta{display:none;}
  .topbar-nav.aberto .nav-grupo-filhos{
    display:block;position:static;transform:none;margin:0;min-width:0;
    background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  }
  .topbar-nav.aberto .nav-grupo-filhos::before{display:none;}
  .topbar-nav.aberto .nav-grupo-filhos a{padding-left:34px;font-size:15px;}
  .topbar-nav.aberto .nav-grupo + a{border-top:1px solid var(--line);}
}

.page-header{padding:28px 32px 0;}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;}
.page-header h1{font-size:32px;margin:10px 0 0;}

/* 6/nov/2026 — A PONTE ENTRE "CRIE O SEU PASSEIO" E "ROTEIROS". [stated] Sugestão de um cliente,
   trazida pelo Paulo: ao lado de cada uma, uma seta bem à vista para a outra. Antes havia só um
   link pequeno no configurador (que o cliente não viu) e nada nos roteiros. Mesmo estilo nas duas. */
.ponte{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:14px 0 0;font-size:14px;color:var(--ink-soft);}
.ponte .ponte-botao{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;
  background:var(--gold);border:1px solid var(--gold-deep);color:#241a08;font-weight:600;font-size:14px;text-decoration:none;}
.ponte .ponte-botao:hover{filter:brightness(1.06);}
/* 7/nov/2026 — AS TRÊS PÁGINAS INTERLIGADAS (transfer, configurador, roteiros). [stated] Paulo: no
   transfer, enquanto se marca, lembrar que também fazemos passeios PRIVADOS; no fim, oferecer o outro
   serviço (js/passeios-privados.js). Mesma .ponte de cima, para as três páginas serem iguais. */
.ponte-dos-passeios{justify-content:center;text-align:center;margin:0 auto 16px;padding:0 16px;box-sizing:border-box;}
.oferta-seguinte{margin:22px auto 6px;padding:16px;max-width:560px;border:1px solid var(--gold);border-radius:12px;background:#fff;}
.oferta-seguinte-titulo{margin:0 0 6px;font-weight:600;font-size:17px;color:var(--ocean-deep);}
.oferta-seguinte-texto{margin:0;font-size:14.5px;color:var(--ink-soft);}
.oferta-seguinte .ponte{justify-content:center;}
@media (max-width:480px){.ponte-dos-passeios .ponte-botao,.oferta-seguinte .ponte-botao{flex:1 1 100%;justify-content:center;}}

.roteiros-prontos{padding:20px 32px 0;}
.roteiros-prontos h3{font-size:16px;margin:0 0 4px;}
.roteiros-prontos .sub{font-size:13px;color:var(--ink-soft);margin:0 0 14px;max-width:640px;line-height:1.5;}
.roteiros-prontos-lista{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;max-width:1080px;
}
.roteiro-card{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px;
}
.roteiro-card.ativo{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.roteiro-card h3{font-size:17px;margin:0;}
.roteiro-card p{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0;flex:1;}
.roteiro-card-meta{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
.roteiro-card .btn-usar-roteiro{
  margin-top:4px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1.4px solid var(--ink);background:#fff;color:var(--ink);border-radius:4px;padding:10px 14px;
}
.roteiro-card .btn-usar-roteiro:hover{background:var(--paper-2);}
.roteiro-card.ativo .btn-usar-roteiro{background:var(--gold);border-color:var(--gold-deep);color:#241a08;}
.roteiro-card .btn-ver-paragens{
  align-self:flex-start;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border:none;background:none;color:var(--gold-deep);padding:2px 0;text-decoration:underline;
}
.roteiro-card .btn-ver-paragens:hover{color:var(--ink);}
.roteiro-card-paragens{
  display:flex;flex-direction:column;gap:8px;padding:10px 0;
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
}
.roteiro-card-paragem strong{font-size:13px;}
.roteiro-card-paragem p{font-size:12px;color:var(--ink-soft);line-height:1.4;margin:2px 0 0;}

.layout{
  display:grid;grid-template-columns:1fr 400px;gap:24px;
  padding:24px 32px 64px;align-items:start;
}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr;}
}

#map{height:460px;border:1px solid var(--line);background:#cfe4ec;}

.poi-list{margin-top:24px;display:flex;flex-direction:column;gap:8px;}
.poi-list h3{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin:0 0 4px;font-family:inherit;}

.poi-group{border:1px solid var(--line);background:#fff;}
.poi-group summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gold-deep);
}
.poi-group summary>span:first-child{flex:1;}
.poi-group summary::-webkit-details-marker{display:none;}
.poi-group summary::marker{content:"";}
.poi-group summary::after{
  content:"+";flex:none;font-size:16px;font-weight:400;color:var(--ink-soft);
  width:20px;text-align:center;
}
.poi-group[open] summary::after{content:"\2212";}
.poi-group-count{
  font-size:11.5px;font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--ink-soft);flex:none;
}
.poi-group-list{padding:2px 16px 14px;display:flex;flex-direction:column;gap:10px;}

.poi-card{
  display:flex;gap:14px;align-items:center;padding:14px 16px;
  border:1px solid var(--line);background:#fff;
}
.poi-card .thumb{
  width:56px;height:56px;border-radius:4px;object-fit:cover;flex:none;
  border:1px solid var(--line);
}
.poi-card .info{flex:1;}
.poi-card .name{font-weight:600;font-size:14.5px;}
.poi-card .meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
.poi-card .poi-desc{font-size:12px;color:var(--ink-soft);margin-top:4px;line-height:1.4;}
.poi-card button{
  width:32px;height:32px;border-radius:50%;border:1.4px solid var(--ink);
  background:#fff;font-size:16px;line-height:1;cursor:pointer;flex:none;
}
.poi-card button.added{background:var(--ink);color:#fff;}

.summary{
  position:sticky;top:16px;border:1px solid var(--line);background:#fff;
}
.summary .block{padding:20px 24px;border-bottom:1px solid var(--line);}
.summary .block:last-child{border-bottom:none;}
.summary h2{font-size:20px;margin:0;}
.summary .sub{font-size:13px;color:var(--ink-soft);margin-top:4px;}

.stop-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;}
.stop-row .t{color:var(--ink-soft);}
.stop-row .t-note{font-size:11.5px;color:var(--ink-soft);font-weight:400;}

.order-toggle{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:12.5px;color:var(--ink-soft);cursor:pointer;
}
.order-toggle input{accent-color:var(--gold);cursor:pointer;}

.people-select{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.people-label{font-size:12.5px;color:var(--ink-soft);}
.stepper{display:flex;align-items:center;gap:12px;}
.stepper button{
  width:26px;height:26px;border-radius:50%;border:1.4px solid var(--ink);
  background:#fff;font-size:15px;line-height:1;cursor:pointer;flex:none;
}
.stepper button:disabled{opacity:.35;cursor:not-allowed;}
.stepper span{font-size:15px;font-weight:600;min-width:14px;text-align:center;}

/* Cadeirinhas de criança (24/set/2026) — por baixo do número de pessoas, no
   resumo do configurador. Reaproveita .order-toggle, .people-select e .stepper. */
.cadeiras{margin-top:10px;}
.cadeiras .people-select{margin-top:10px;padding-top:10px;}
.cadeiras-idades{display:block;margin-top:12px;font-size:12.5px;color:var(--ink-soft);}
.cadeiras-idades input{
  display:block;width:100%;margin-top:5px;padding:7px 9px;
  border:1px solid var(--line);border-radius:7px;background:#fff;
  font:inherit;font-size:13px;color:var(--ink);
}
.cadeiras-nota{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--ink-soft);font-style:italic;}

.order-note{
  font-size:12px;color:var(--ink-soft);font-style:italic;
  padding-bottom:8px;margin-bottom:4px;border-bottom:1px dashed var(--line);
}

.total-row{display:flex;justify-content:space-between;font-size:14px;font-weight:600;}
/* Duração repartida em duas parcelas, para o cliente perceber o que compra:
   quanto tempo está parado nos locais e quanto tempo vai de percurso entre
   eles. O total fica destacado por baixo. */
#summary-total{flex-direction:column;gap:2px;font-weight:400;}
#summary-total .parcela{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);}
#summary-total .total{
  display:flex;justify-content:space-between;font-size:14px;font-weight:600;
  margin-top:5px;padding-top:6px;border-top:1px solid var(--line);
}
.bar{height:8px;background:var(--paper-2);border-radius:4px;margin-top:12px;overflow:hidden;}
.bar-fill{height:100%;background:var(--gold);transition:width .25s ease;}
.warn{font-size:12px;color:var(--ink-soft);margin-top:8px;}
.warn.over{color:#a6432c;font-weight:600;}

.price-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.price-row .lbl{font-size:14px;color:var(--ink-soft);}
.price-row .val{font-size:24px;font-family:var(--fonte-titulos);}
.price-row-total{border-top:1px solid var(--line);padding-top:10px;margin-top:2px;}
.price-row-total .lbl{color:var(--ink);font-weight:600;}
.price-row-total .val{color:var(--gold-deep);}

.tickets-title{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px;}
.ticket-row{
  display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:13.5px;
}
.ticket-row input{accent-color:var(--gold);cursor:pointer;flex:none;}
.ticket-row .ticket-name{flex:1;}
.ticket-row .ticket-price{color:var(--ink-soft);white-space:nowrap;}

.btn-primary{
  display:block;width:100%;text-align:center;padding:14px 20px;
  background:var(--gold);color:#241a08;font-weight:600;font-size:14.5px;
  border:none;border-radius:2px;cursor:pointer;
}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;}

.empty-note{font-size:13px;color:var(--ink-soft);text-align:center;padding:8px 0;}

/* --- Extras (transfer/babysitting) no resumo do configurador --- */
.extras-title{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:10px;}
.extra-item{border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:10px;}
.extra-item:last-child{margin-bottom:0;}
.extra-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;font-weight:600;}
.extra-toggle input{accent-color:var(--gold);cursor:pointer;flex:none;}
.extra-detail{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:10px;}
.extra-detail select{
  width:100%;font-family:inherit;font-size:13.5px;padding:9px 10px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.extra-detail label.campo-label{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:5px;}
.extra-price-line{display:flex;justify-content:space-between;font-size:13.5px;padding-top:4px;}
.extra-dia-row{
  background:var(--paper-2);border-radius:4px;padding:10px 40px 10px 10px;
  display:flex;flex-direction:column;gap:8px;position:relative;
}
.extra-dia-row .campo label{display:block;font-size:11px;color:var(--ink-soft);margin-bottom:4px;}
.extra-dia-row .campo input{
  width:100%;font-family:inherit;font-size:13.5px;padding:8px 9px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.btn-remover-dia-mini{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  border:1.4px solid var(--ink);background:#fff;font-size:13px;line-height:1;cursor:pointer;
}
.btn-remover-dia-mini:disabled{opacity:.35;cursor:not-allowed;}

/* --- Página de Transfers --- */
.transfer-form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px;}
.form-field{margin-bottom:20px;}
.form-field:last-child{margin-bottom:0;}
.form-field label.field-label{
  display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);margin-bottom:8px;font-weight:600;
}
.radio-group{display:flex;gap:10px;flex-wrap:wrap;}
.radio-option{
  flex:1;min-width:140px;display:flex;align-items:center;gap:8px;
  border:1.4px solid var(--line);border-radius:4px;padding:12px 14px;cursor:pointer;font-size:14px;
}
.radio-option input{accent-color:var(--gold);cursor:pointer;flex:none;}
.radio-option:has(input:checked){border-color:var(--gold);background:var(--paper-2);}
.transfer-form select, .transfer-form input[type=datetime-local]{
  width:100%;font-family:inherit;font-size:14.5px;padding:11px 12px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.checkbox-field{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13.5px;color:var(--ink-soft);}
.checkbox-field input{accent-color:var(--gold);cursor:pointer;flex:none;}
.aviso-espera{font-size:12.5px;color:var(--ink-soft);line-height:1.5;padding-top:12px;margin-top:4px;border-top:1px dashed var(--line);}

.carros-section{padding:28px 32px 8px;max-width:900px;}
.carros-section h3{font-size:16px;margin:0 0 4px;}
.carros-section .sub{font-size:13px;color:var(--ink-soft);margin:0 0 14px;}
.carros-table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.carros-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);background:var(--paper-2);padding:9px 12px;
}
.carros-table td{padding:9px 12px;border-top:1px solid var(--paper-2);}

/* --- Página de Babysitting --- */
.dias-lista{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;}
.dia-row{
  display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;
  background:var(--paper-2);border-radius:4px;padding:12px;
}
.dia-row .campo label{display:block;font-size:11.5px;color:var(--ink-soft);margin-bottom:5px;}
.dia-row .campo input{
  width:100%;font-family:inherit;font-size:14px;padding:9px 10px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.btn-remover-dia{
  width:34px;height:34px;border-radius:50%;border:1.4px solid var(--ink);
  background:#fff;font-size:16px;line-height:1;cursor:pointer;flex:none;
}
.btn-remover-dia:disabled{opacity:.35;cursor:not-allowed;}
.btn-add-dia{
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  border:1.4px dashed var(--line);background:#fff;color:var(--ink);border-radius:4px;
  padding:10px 16px;width:100%;
}
.btn-add-dia:hover{background:var(--paper-2);}

/* Rodapé partilhado por todas as páginas do cliente — nome da empresa,
   nº de licença de Animação Turística (obrigatório constar em publicidade,
   contratos e correspondência), contactos e link para a política de
   cancelamento. */
.site-footer{padding:24px 32px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.6;}
.site-footer p{margin:0 0 4px;}
.site-footer a{color:var(--gold-deep);}

/* Páginas de conteúdo simples (ex: política de cancelamento) */
.servicos, .roteiros-lista-pagina{padding:0 32px 72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1080px;}
.servico-card, .roteiros-lista-pagina .servico-card{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 26px;
  display:flex;flex-direction:column;gap:14px;
}
.servico-card h2{font-size:21px;margin:0;}
.servico-card p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0;flex:1;}
.servico-card a.btn-primary{display:inline-block;width:auto;padding:11px 22px;text-align:center;}

.roteiro-detalhe{max-width:760px;margin:0 auto;padding:0 32px 64px;}
.roteiro-detalhe .voltar-link{font-size:13px;display:inline-block;margin-bottom:18px;}
.roteiro-detalhe .roteiro-meta{font-size:13px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;}
.roteiro-detalhe .roteiro-intro{font-size:15px;color:var(--ink-soft);line-height:1.65;margin-bottom:28px;}
.roteiro-detalhe h2{font-size:19px;margin:0 0 14px;}
.roteiro-detalhe .paragens-lista{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;}
.roteiro-detalhe .paragens-lista .poi-card{cursor:default;}
.roteiro-detalhe .roteiro-cta-final{text-align:center;padding:28px 0 0;border-top:1px solid var(--line);}
.roteiro-detalhe .roteiro-cta-final a.btn-primary{display:inline-block;padding:13px 28px;}

.pagina-texto{max-width:720px;margin:0 auto;padding:40px 32px 64px;}
.pagina-texto h1{font-size:30px;margin:0 0 8px;}
.pagina-texto .eyebrow{margin-bottom:12px;}
.pagina-texto h2{font-size:18px;margin:32px 0 10px;}
.pagina-texto p{font-size:14.5px;color:var(--ink-soft);line-height:1.65;margin:0 0 14px;}
.pagina-texto ul{margin:0 0 14px;padding-left:20px;}
.pagina-texto li{font-size:14.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:8px;}
.pagina-texto .tabela-escaloes{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 18px;background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.pagina-texto .tabela-escaloes th{text-align:left;color:var(--ink-soft);background:var(--paper-2);padding:9px 12px;font-weight:600;}
.pagina-texto .tabela-escaloes td{padding:9px 12px;border-top:1px solid var(--line);}
.pagina-texto .nota-legal{font-size:12.5px;color:var(--ink-soft);font-style:italic;border-top:1px dashed var(--line);padding-top:14px;margin-top:24px;}

/* --- Página de Avaliações --- */
.avaliacoes-header{padding:40px 32px 0;max-width:900px;margin:0 auto;}
.avaliacoes-resumo{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px;flex-wrap:wrap;}
.avaliacoes-resumo .media{font-size:30px;font-family:var(--fonte-titulos);}
.avaliacoes-resumo .estrelas{color:var(--gold-deep);font-size:18px;letter-spacing:1px;}
.avaliacoes-resumo .contagem{font-size:13px;color:var(--ink-soft);}
.avaliacoes-links{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin-bottom:8px;}
/* Convite a avaliar, no topo da página (28/set/2026) — [stated] Paulo: "a
   opção de deixar uma avaliação devia estar no início da página". O botão do
   Google vem primeiro porque é de lá que trazemos as avaliações de volta. */
/* Convite a avaliar, na barra do topo (28/set/2026) — [stated] Paulo:
   "entre a palavra Azores e Crie o seu passeio", e no telemóvel "logo na
   primeira opção do menu". É um LINK discreto, não um botão: a barra é para
   navegar, e um botão dourado ali dentro competia com o menu e com a reserva. */
.convite-topo{color:var(--gold-deep)!important;font-weight:600;white-space:nowrap;}
.convite-topo:hover{text-decoration:underline;}
/* ⭐ 26/out/2026: a pergunta "Já viajou connosco?" NUNCA aparece na barra, em
   largura nenhuma. Antes escondia-se só nos ecrãs médios, por falta de espaço;
   agora sai por decisão: a barra mostra a NOTA, que fala a quem ainda não
   comprou. A pergunta continua inteira onde serve — no rodapé e nos cartões. */
.topbar .convite-topo-pergunta{display:none;}
/* Páginas sem menu (reserva confirmada/cancelada) — o link vai para o fim da
   barra; e os cartões /paulo e /elvira, que não têm barra nenhuma, levam-no
   numa linha discreta no fim. [stated] "tem que estar em todas as páginas". */
.convite-topo-solto{margin-left:auto;padding-left:16px;}
.convite-topo-rodape{text-align:center;margin:18px 0 4px;font-size:13.5px;}
/* 📌 Havia aqui uma regra para quando o convite vivia DENTRO do menu do
   telemóvel. Saiu com ele: agora está na barra, à vista, sem clique nenhum.
   Ver o cabeçalho do js/convite-avaliar.js. */
.avaliacoes-convite{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px;margin:14px 0 12px;}
.avaliacoes-convite h2,.avaliacoes-convite h3{margin:0 0 6px;font-size:18px;}
.avaliacoes-convite p{margin:0 0 14px;font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.avaliacoes-convite-botoes{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.avaliacoes-convite .btn-primary{display:inline-block;width:auto;padding:12px 24px;text-decoration:none;}
.avaliacoes-convite .btn-secundario{display:inline-block;width:auto;}
@media (max-width:560px){
  .avaliacoes-convite-botoes{flex-direction:column;align-items:stretch;}
  .avaliacoes-convite .btn-primary,.avaliacoes-convite .btn-secundario{width:100%;text-align:center;}
}
.avaliacoes-wrap{max-width:900px;margin:0 auto;padding:16px 32px 64px;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start;}
/* 3/out/2026: a página de avaliações deixou de ter o formulário do site (só
   Google), logo deixou de haver segunda coluna. Sem isto o conteúdo ficava
   apertado em 58% da largura, com metade da grelha vazia. */
.avaliacoes-wrap.so-google{grid-template-columns:1fr;max-width:720px;}
@media (max-width:800px){.avaliacoes-wrap{grid-template-columns:1fr;}}
.lista-avaliacoes{display:flex;flex-direction:column;gap:14px;}
.avaliacao-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 20px;}
.avaliacao-card .topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;}
.avaliacao-card .estrelas{color:var(--gold-deep);font-size:14px;letter-spacing:1px;}
.avaliacao-card .nome{font-weight:600;font-size:14px;}
.avaliacao-card .meta{font-size:12px;color:var(--ink-soft);}
.avaliacao-card p{font-size:14px;color:var(--ink);line-height:1.55;margin:10px 0 0;white-space:pre-line;}
.avaliacao-form{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px;position:sticky;top:16px;}
.avaliacao-form h3{margin:0 0 6px;font-size:16px;}
.avaliacao-form .sub{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 16px;}
.avaliacao-form input[type=text], .avaliacao-form input[type=email], .avaliacao-form textarea{
  width:100%;font-family:inherit;font-size:14px;padding:10px 11px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.estrelas-input{display:flex;gap:4px;font-size:26px;line-height:1;}
.estrelas-input button{background:none;border:none;padding:0;cursor:pointer;color:var(--line);}
.estrelas-input button.ativa{color:var(--gold-deep);}

/* --- Pop-up "precisas de transfer?" no checkout do configurador --- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(24,34,41,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;
}
.modal-card{
  background:#fff;border-radius:6px;max-width:460px;width:100%;max-height:88vh;overflow-y:auto;
  padding:28px 26px 24px;position:relative;box-shadow:0 12px 40px rgba(24,34,41,.25);
}
.modal-transfer-close{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;
  border:1.4px solid var(--line);background:#fff;color:var(--ink-soft);font-size:16px;
  line-height:1;cursor:pointer;
}
.modal-transfer-close:hover{border-color:var(--ink);color:var(--ink);}
.modal-transfer-header h3{margin:0 0 8px;padding-right:26px;font-size:19px;line-height:1.3;}
.modal-transfer-intro{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0 0 20px;}
.modal-transfer-pergunta{border-top:1px solid var(--line);padding:18px 0;}
.modal-transfer-pergunta:first-of-type{border-top:none;padding-top:0;}
.modal-transfer-pergunta-titulo{font-size:15px;font-weight:600;}
.modal-transfer-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px;margin-bottom:12px;}
.modal-transfer-toggle{display:flex;gap:10px;}
.btn-toggle{
  flex:1;font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 12px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink-soft);cursor:pointer;
}
.btn-toggle.ativo{border-color:var(--gold);background:var(--paper-2);color:var(--ink);}
.modal-transfer-detalhe{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:12px;}
.modal-transfer-detalhe select{
  width:100%;font-family:inherit;font-size:13.5px;padding:9px 10px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.modal-transfer-detalhe .field-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:600;margin-bottom:0;}
.modal-transfer-acoes{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.btn-secundario{
  display:block;width:100%;text-align:center;padding:12px 20px;font-family:inherit;
  background:#fff;color:var(--ink-soft);font-weight:600;font-size:13.5px;
  border:1.4px solid var(--line);border-radius:2px;cursor:pointer;
}
.btn-secundario:hover{border-color:var(--ink);color:var(--ink);}
.modal-editar-link{margin-top:10px;font-size:12.5px;}

/* Dentro do modal (pop-up de babysitting), a grelha de 4 colunas do
   .dia-row (herdada da página de Babysitting) fica apertada demais no ecrã
   estreito do cartão — empilha numa coluna só. */
.modal-card .dia-row{grid-template-columns:1fr;}
.modal-card .btn-remover-dia{justify-self:end;}
.avaliacoes-empty{font-size:13.5px;color:var(--ink-soft);}

/* Fotografias de fundo (17/set/2026) — escolhidas no admin.html, aplicadas por js/fundo.js */
body.fundo-pagina{
  background-image:linear-gradient(rgba(250,248,243,var(--fundo-veu,.88)),rgba(250,248,243,var(--fundo-veu,.88))),var(--fundo-img);
  background-size:cover;background-position:var(--fundo-pos,center);background-repeat:no-repeat;
}
@media (min-width:900px){body.fundo-pagina{background-attachment:fixed;}}
body.fundo-hero .hero{
  max-width:none;margin:0;padding:120px 32px 110px;
  background-image:linear-gradient(rgba(10,24,33,var(--fundo-veu,.45)),rgba(10,24,33,var(--fundo-veu,.45))),var(--fundo-img);
  background-size:cover;background-position:var(--fundo-pos,center);
}
body.fundo-hero .hero > *{max-width:760px;}
body.fundo-hero .hero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35);}
body.fundo-hero .hero p{color:rgba(255,255,255,.92);}
body.fundo-hero .hero .eyebrow{color:#f0d9a8;}
body.fundo-hero .servicos{padding-top:40px;}
@media (max-width:640px){body.fundo-hero .hero{padding:72px 20px 64px;}}

/* Preços dos roteiros prontos (17/set/2026) */
.roteiro-card-preco{display:flex;flex-direction:column;gap:2px;margin:4px 0 2px;}
.roteiro-card-preco strong{font-size:20px;color:var(--ocean-deep);}
.roteiro-card-preco span{font-size:12.5px;color:var(--ink-soft);}
.roteiro-preco-box{margin:28px 0 8px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:12px;}
.roteiro-preco-box h2{margin:0 0 12px;font-size:24px;}
.roteiro-preco-linha{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;}
.roteiro-preco-linha label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.roteiro-preco-linha select{font:inherit;font-size:16px;padding:8px 12px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;}
.roteiro-preco-valor strong{font-size:28px;color:var(--ocean-deep);}
.roteiro-preco-valor span{font-size:14px;color:var(--ink-soft);margin-left:6px;}
.roteiro-preco-nota{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin:12px 0 0;}

/* Logótipo no rodapé (17/set/2026) */
.site-footer .footer-logo{display:block;width:72px;height:72px;margin:0 0 12px;}

/* Passeio em vários dias (18/set/2026) */
.multi-dia-aviso{background:#eef3f7;border-left:3px solid #0f3b57;padding:8px 10px;border-radius:4px;color:#1a1a1a;font-size:13px;line-height:1.4;}
.multi-dia-lista{margin:8px 0 0;padding-left:20px;font-size:12.5px;color:#1a1a1a;}
.multi-dia-lista li{margin:3px 0;}
.dias-extra-nota{font-size:12px;color:var(--ink-soft);margin-top:10px;}
#dias-extra input[type=date]{display:block;}
.parte-extra{margin-top:10px;padding-top:8px;border-top:1px dashed #d8dee4;}
.parte-extra select,.parte-extra input{display:block;margin-top:4px;}
/* Seletor de língua (18/set/2026) */
#lang-switcher .lang-menu{display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
#lang-switcher .lang-globo{font-size:15px;}
#lang-switcher select{font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:6px;padding:3px 6px;cursor:pointer;}
/* Seletor de língua com bandeiras (18/set/2026) */
#lang-switcher .lang-dd{position:relative;display:inline-block;}
#lang-switcher .lang-dd-botao{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 8px;cursor:pointer;}
#lang-switcher .lang-dd-botao:hover{border-color:var(--gold-deep);}
#lang-switcher .lang-dd-seta{font-size:10px;color:var(--ink-soft);}
#lang-switcher .lang-bandeira{display:inline-flex;width:20px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none;}
#lang-switcher .lang-bandeira svg{width:100%;height:100%;display:block;}
#lang-switcher .lang-dd-lista{position:absolute;right:0;top:calc(100% + 4px);z-index:1000;list-style:none;margin:0;padding:4px;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);}
#lang-switcher .lang-dd-lista[hidden]{display:none;}
#lang-switcher .lang-dd-lista a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px;}
#lang-switcher .lang-dd-lista a:hover{background:var(--paper-2,#f3efe6);color:var(--ink);}
#lang-switcher .lang-dd-lista li[aria-selected="true"] a{font-weight:600;}

/* Local temporariamente encerrado (data/pois.json → "fechado") */
.poi-card.poi-fechado{opacity:.75;}
.poi-card.poi-fechado .name{color:var(--ink-soft);}
.poi-card .poi-fechado-aviso{margin-top:6px;font-size:12px;font-weight:600;color:#9b2c2c;}
.poi-card.poi-fechado button[disabled]{opacity:.35;cursor:not-allowed;}
/* 8/nov/2026 — fechado só no dia escolhido (fechadoAosDias): igual ao fechado, mas pode-se tirar */
.poi-card.poi-fechado-no-dia{opacity:.8;}
.poi-card.poi-fechado-no-dia button[disabled]{opacity:.35;cursor:not-allowed;}

/* Roteiros prontos: versão Base / Premium (18/set/2026) */
.versao-escolha{display:flex;gap:8px;margin:6px 0 8px;}
.versao-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;}
.versao-btn small{font-weight:500;color:var(--ink-soft);}
.versao-btn.ativa{border-color:var(--gold-deep,#b8893a);background:#fbf6ec;}
.versao-btn[data-versao="premium"].ativa{border-color:#0f3b57;background:#eef4f8;}
.versao-escolha-grande .versao-btn{padding:12px 14px;font-size:16px;}
.versao-inclui{font-size:13px;color:var(--ink-soft);margin:0 0 10px;line-height:1.45;}
.roteiro-card-premium{display:block;margin-top:4px;font-weight:600;color:#0f3b57;}

/* Fotografias livres (Pexels/Unsplash) nos roteiros e locais (18/set/2026) */
.roteiro-capa{margin:0 0 18px;position:relative;}
.roteiro-capa img{width:100%;height:320px;object-fit:cover;border-radius:10px;display:block;}
.roteiro-capa .foto-credito{position:absolute;right:10px;bottom:8px;background:rgba(0,0,0,.45);color:#fff;padding:2px 8px;border-radius:10px;}
.foto-credito{font-size:11px;color:var(--ink-soft);text-decoration:none;}
.foto-credito:hover{text-decoration:underline;}
.poi-card-roteiro{align-items:flex-start;}
.paragem-foto{margin:0;flex:none;width:150px;display:flex;flex-direction:column;gap:3px;}
.paragem-foto img{width:150px;height:100px;object-fit:cover;border-radius:6px;display:block;}
.roteiro-card-capa{width:100%;height:170px;object-fit:cover;border-radius:8px;display:block;margin-bottom:4px;}
@media (max-width:600px){
  .roteiro-capa img{height:200px;}
  .poi-card-roteiro{flex-direction:column;}
  .paragem-foto,.paragem-foto img{width:100%;}
  .paragem-foto img{height:170px;}
}

/* Mapa do configurador: botão "ver a ilha inteira" (18/set/2026) */
.mapa-btn-ilha{width:34px;height:34px;border:2px solid rgba(0,0,0,.2);border-radius:4px;background:#fff;font-size:18px;line-height:1;cursor:pointer;color:var(--ink);}
.mapa-btn-ilha:hover{background:#f4f4f4;}
@media (max-width:700px){ #map{height:340px;} }

/* 📌 26/out/2026 — AQUI ESTAVA O REMENDO DOS 1100px (18/set): a barra era
   mandada partir-se porque o menu + a língua + o "Passo 1 de 3" não cabiam
   numa linha. Saiu, e saiu porque a CAUSA desapareceu: a barra passou a ter
   duas linhas de propósito acima dos 700px. Só fica o que não tinha que ver
   com isso. */
@media (max-width:1100px){
  .topbar .step{display:none;}
}
/* 📌 26/out/2026 — AQUI ESTEVE, DURANTE DUAS HORAS, O MEU REMENDO DOS
   421-900px: `nowrap` forçado para a barra não se partir aos 500px. Saiu no
   mesmo dia em que entrou, e vale a pena ficar escrito porquê: eu estava a
   proibir a barra de se partir, quando o que ela precisava era de uma segunda
   linha de propósito. Foi o Paulo que viu isso — "porque é que não fazes uma
   linha abaixo do próprio banner?". Um remendo que proíbe um sintoma é um
   remendo que vai voltar noutra largura. */

@media (max-width:900px){
  .layout{padding:18px 16px 48px;}
  .page-header{padding:22px 16px 0;}
}
html,body{max-width:100%;overflow-x:clip;}

/* Entradas pagas no resumo (18/set/2026) */
.tickets-nota{font-size:12px;color:var(--ink-soft);margin:6px 0 2px;line-height:1.4;}
.tickets-aceitar{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.45;margin:8px 0 4px;padding:8px 10px;border:1px solid var(--gold-deep,#b8893a);border-radius:6px;background:#fbf6ec;cursor:pointer;}
.tickets-aceitar input{margin-top:2px;flex:none;}
.ticket-row a{color:var(--gold-deep);}
.tickets-aviso{font-size:12px;line-height:1.45;margin:8px 0 2px;padding:8px 10px;border-radius:6px;background:#fff3cd;color:#6b4e00;border:1px solid #e0c060;}

/* Configurador em modo "roteiro pronto" (18/set/2026): só o roteiro escolhido */
body.modo-roteiro-pronto .poi-list,
body.modo-roteiro-pronto .order-toggle{display:none;}
.modo-pronto-faixa{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0;}
.modo-pronto-faixa strong{font-size:15px;color:var(--ink);}

/* Roteiro retirado de circulação no admin (ficou abaixo da duração mínima).
   Quem chega por um link antigo vê este aviso em vez da página do roteiro. */
.roteiro-indisponivel{
  background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:6px;padding:16px 18px;margin:0 0 18px;color:var(--ink);line-height:1.6;
}

/* Banner de fotografias da página inicial (20/set/2026) ------------------
   Passa as fotografias de São Miguel, sem nada por cima.
   Começa invisível e só aparece ("pronto") quando a primeira fotografia
   carregou — assim nunca se vê uma caixa vazia a meio da página. */
.banner-fotos{
  position:relative;width:100%;height:clamp(240px,42vh,440px);
  overflow:hidden;background:var(--ocean-deep);
  opacity:0;transition:opacity .5s ease;
}
.banner-fotos.pronto{opacity:1;}
.banner-palco{position:absolute;inset:0;}
.banner-foto{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease-in-out;
  transform:scale(1.04);
}
.banner-foto.visivel{opacity:1;}
/* Sem símbolo nem nome por cima (20/set/2026) — a fotografia fica limpa.
   Só um escurecimento leve no fundo, para o crédito do autor se ler
   sempre, seja a fotografia clara ou escura. */
.banner-veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,30,40,0) 55%,rgba(15,30,40,.40) 100%);
}
.banner-credito{
  position:absolute;right:12px;bottom:10px;
  font-family:'Work Sans',Arial,sans-serif;font-size:11px;color:rgba(255,255,255,.78);
  text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.02em;
}
@media (max-width:640px){
  .banner-credito{font-size:10px;right:8px;bottom:7px;}
}
@media (prefers-reduced-motion: reduce){
  .banner-foto{transition:none;transform:none;}
  .banner-fotos{transition:none;}
}

/* Caixa de sugestões do rodapé (20/set/2026) ---------------------------
   Começa fechada, como uma linha discreta. Quem está a reservar nem dá por
   ela; quem tem mesmo uma ideia abre-a. O campo "empresa" é a armadilha
   anti-spam: sai do ecrã sem usar display:none, porque há robôs que ignoram
   campos escondidos dessa maneira. */
.sugestoes{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);}
.sugestoes-abrir{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;font-size:13px;color:inherit;opacity:.75;text-decoration:underline;
}
.sugestoes-abrir:hover{opacity:1;}
.sugestoes-form{max-width:520px;margin:12px auto 0;text-align:left;}
.sugestoes-nota{font-size:12px;opacity:.7;margin:0 0 8px;}
.sugestoes-linha{display:flex;gap:8px;flex-wrap:wrap;}
.sugestoes-linha input{flex:1 1 180px;min-width:0;}
.sugestoes-form input,
.sugestoes-form textarea{
  width:100%;box-sizing:border-box;margin-bottom:8px;padding:9px 11px;
  border:1px solid rgba(255,255,255,.25);border-radius:6px;
  background:rgba(255,255,255,.08);color:inherit;font:inherit;font-size:14px;
}
.sugestoes-form textarea{resize:vertical;min-height:88px;}
.sugestoes-form input::placeholder,
.sugestoes-form textarea::placeholder{color:inherit;opacity:.55;}
.sugestoes-form input:focus,
.sugestoes-form textarea:focus{outline:2px solid var(--gold,#c69a4e);outline-offset:1px;}
.sugestoes-armadilha{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.sugestoes-fundo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.sugestoes-enviar{
  padding:9px 20px;border:none;border-radius:6px;cursor:pointer;
  background:var(--gold,#c69a4e);color:#1f2d33;font:inherit;font-weight:600;font-size:14px;
}
.sugestoes-enviar:disabled{opacity:.6;cursor:default;}
.sugestoes-estado{font-size:13px;opacity:.85;}
.sugestoes-estado.erro{color:#ffcfc4;opacity:1;}
.sugestoes-obrigado{font-size:14px;margin:6px 0 0;}

/* Diário da Ilha (20/set/2026) ----------------------------------------
   Duas colunas: os artigos e, ao lado, os números úteis. No telemóvel a
   barra lateral passa para cima dos artigos, de propósito — quem abre isto
   no telemóvel está mais provavelmente a precisar de um número do que de
   ler uma crónica. */
/* ⭐ TRÊS COLUNAS — 30/out/2026, ordem dele: árvore à esquerda, notícias ao
   meio, contactos à direita.
   ⚠⚠ A COLUNA DA ESQUERDA É `auto`, NÃO uma largura fixa. É isso que faz a
   árvore não ocupar NADA enquanto estiver escondida — e hoje está, porque
   ainda não há artigos de freguesia. Com uma largura fixa ficava um buraco
   branco à esquerda a dizer que falta ali qualquer coisa, que é exactamente
   o contrário da regra dele do invisível. Quando o primeiro texto aparecer,
   a coluna abre-se sozinha e o meio encolhe o necessário. */
.diario{
  display:grid;grid-template-columns:auto minmax(0,1fr) 300px;gap:32px;
  max-width:1180px;margin:0 auto;padding:0 32px 56px;align-items:start;
}
/* ⭐⭐ 30/out/2026 — A PÁGINA DE UM ARTIGO TEM A SUA PRÓPRIA GRELHA.
   🚩 O defeito que isto arruma foi meu, e ele apanhou-o no site a sério:
   *"a caixa está muito bloqueada"*. Ao pôr o .diario em três colunas para a
   página do Diário, a página do ARTIGO herdou a mesma grelha — e lá só há
   uma peça. O texto caía na primeira coluna, que é `auto`, e encolhia até ao
   conteúdo. Uma grelha desenhada para uma página não se herda sem se ir ver
   quem mais usa a classe.
   Os 820px não são enfeite: é a largura a que uma linha de texto se lê sem a
   vista se perder a voltar ao princípio. */
.diario.diario-detalhe{ grid-template-columns:minmax(0,1fr); max-width:820px; }

/* ⭐⭐ 1/nov/2026 — A COLUNA DAS FREGUESIAS SOBE, DESCE, E PÁRA NO FIM.
   🚩 O DEFEITO, apanhado por ele no site a sério, 19h30, palavras dele:
     *"quando tu expandes tudo, ela ultrapassa o ecrã. E por mais que tu
      queiras puxar para cima para ver as últimas freguesias, não consegues."*
     *"o sistema que tens implementado no lado direito é o sistema que eu
      quero implementar no lado esquerdo."*
     *"ele move até a última freguesia visível, deixando mais duas linhas em
      branco para se ver que não há nada mais."*
   A CAUSA era minha e tinha duas caras. As duas colunas tinham a MESMA regra
   (`top:20px`), e o efeito saiu ao contrário porque a ALTURA é diferente: a
   dos contactos é mais alta do que o espaço que tem para colar, e por isso
   anda com a página; a das freguesias era curta, colava no topo e ficava
   parada. Com os concelhos todos abertos passou a ser mais alta do que o
   ecrã — e aí, presa pelo TOPO, o fundo da lista deixou de se poder alcançar.
   ⭐ A CORRECÇÃO é UMA regra só, com o encosto do topo a MUDAR DE VALOR:
     · curta → `top` fica nos 20px: presa no topo, à mão enquanto se lê o meio
     · alta  → `top` passa a NEGATIVO, exactamente `altura-do-ecrã menos
              altura-da-lista menos as linhas em branco`. Assim a lista anda
              com a página e, quando pára, pára com a ÚLTIMA freguesia à vista
              e o branco por baixo a dizer que acabou.
   ⚠⚠ NÃO se faz isto com `bottom`, e perdi uma volta a tentar: `bottom` numa
     caixa colada serve para a AGARRAR LÁ EM BAIXO enquanto o lugar dela ainda
     vem mais abaixo — e aqui o lugar dela é já o topo do espaço que tem, pelo
     que o encosto nunca pega e a lista passa de raspo como se nada fosse. A
     prova apanhou-o: o fim da lista aparecia em 8 posições da página de 141,
     que é exactamente o que acontece a uma caixa que não cola a nada.
   ⚠ O valor do `top` quando a lista é alta SÓ se sabe MEDINDO, e muda a cada
     concelho que se abre ou se fecha — por isso é o js/diario-arvore.js que o
     escreve, em `--diario-arvore-topo`. O que vive AQUI é o valor humano
     (`--diario-arvore-cima`, os 20px) e a regra que o usa quando o outro não
     existe. O número de linhas em branco vem de
     data/blog/arvore-do-diario.json — escrevê-lo aqui era pôr no código um
     valor que ele tem de poder mudar.
   ⚠ No telemóvel nada disto se aplica: a regra dos 980px lá em baixo põe a
     coluna a `static`, e um elemento `static` ignora os dois encostos. Não se
     escreve aqui uma segunda regra a dizer o mesmo. */
.diario > .diario-arvore{
  --diario-arvore-cima:20px;
  max-width:240px;position:sticky;
  top:var(--diario-arvore-topo, var(--diario-arvore-cima));
}
.diario > .diario-arvore[hidden]{display:none;}
@media (max-width:980px){
  /* ⚠ no telemóvel a árvore vai para BAIXO das notícias: quem chega ao site
     pelo telemóvel quer ler, não navegar por uma lista de freguesias. */
  .diario{grid-template-columns:minmax(0,1fr);}
  .diario > .diario-arvore{max-width:none;position:static;order:2;}
  .diario-coluna{order:1;}
}
.diario-coluna{min-width:0;}
.diario-artigo{
  background:var(--paper,#fff);border:1px solid var(--line,#e2dccc);border-radius:10px;
  padding:24px 26px;margin-bottom:22px;
}
.diario-artigo h2{font-size:24px;margin:8px 0 14px;line-height:1.25;}
.diario-artigo p{font-size:15px;line-height:1.7;color:var(--ink,#22333b);margin:0 0 12px;}
.diario-etiquetas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12.5px;}
.diario-etiqueta{
  padding:3px 10px;border-radius:999px;font-weight:600;
  background:var(--paper-2,#f1ece1);color:var(--ink-soft,#4c5b64);
}
.diario-etiqueta-evento{background:#e8dfc6;color:#6b5320;}
.diario-etiqueta-noticia{background:#dde7ea;color:#2c4a55;}
.diario-etiqueta-guia{background:#dde9dd;color:#2f4a33;}
.diario-quando,.diario-local{color:var(--ink-soft,#4c5b64);}
.diario-local::before{content:"· ";}

/* A grelha fixa de perguntas — sempre as mesmas, pela mesma ordem, em todos
   os eventos. É isso que a torna útil: o visitante aprende onde olhar. */
.diario-grelha{margin:18px 0 6px;border-top:1px solid var(--line,#e2dccc);}
.diario-grelha-linha{
  display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line,#e2dccc);
}
.diario-grelha dt{font-size:13px;font-weight:600;color:var(--ink-soft,#4c5b64);margin:0;}
.diario-grelha dd{margin:0;font-size:14.5px;line-height:1.6;}
.diario-citacao{
  margin:18px 0;padding:12px 18px;border-left:3px solid var(--gold,#c69a4e);
  background:var(--paper-2,#f1ece1);border-radius:0 6px 6px 0;
}
.diario-citacao p{font-style:italic;margin:0 0 6px;font-size:15px;}
.diario-citacao cite{font-style:normal;font-size:12.5px;color:var(--ink-soft,#4c5b64);}
.diario-fonte{font-size:13px;color:var(--ink-soft,#4c5b64);margin:14px 0 0;}
.diario-publicado{font-size:12px;color:var(--ink-soft,#4c5b64);opacity:.8;margin:6px 0 0;}
.diario-vazio{padding:28px;text-align:center;color:var(--ink-soft,#4c5b64);}

/* Cartão da lista (20/set/2026) ---------------------------------------
   [stated] decisão do Paulo: a lista mostra um cartão curto por
   acontecimento e o conteúdo todo abre na página do próprio evento. Com as
   festas de freguesia todas, uma página única ficava interminável. */
.diario-cartao{
  background:var(--paper,#fff);border:1px solid var(--line,#e2dccc);border-radius:10px;
  padding:20px 24px;margin-bottom:16px;transition:border-color .15s,box-shadow .15s;
}
.diario-cartao:hover{border-color:var(--gold,#c69a4e);box-shadow:0 2px 10px rgba(0,0,0,.05);}
.diario-cartao h2{font-size:21px;margin:8px 0 10px;line-height:1.3;}
.diario-cartao h2 a{color:inherit;text-decoration:none;}
.diario-cartao h2 a:hover{text-decoration:underline;}

/* Secções da lista (4/out/2026) ---------------------------------------
   [stated] decisão do Paulo: guias práticos em cima, eventos por baixo e
   sempre por ordem de data. A rubrica existe para a ordem se perceber. */
.diario-secao{margin:0 0 30px;}
.diario-secao:last-child{margin-bottom:0;}
.diario-secao-titulo{
  font-size:15px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft,#4c5b64);margin:0 0 14px;padding-bottom:8px;
  border-bottom:2px solid var(--gold,#c69a4e);
}
.diario-cartao h3{font-size:21px;margin:8px 0 10px;line-height:1.3;}
.diario-cartao h3 a{color:inherit;text-decoration:none;}
.diario-cartao h3 a:hover{text-decoration:underline;}
.diario-resumo{font-size:14.5px;line-height:1.65;color:var(--ink,#22333b);margin:0 0 12px;}
.diario-mais{margin:0;font-size:14px;font-weight:600;}
.diario-mais a{text-decoration:none;}
.diario-mais a:hover{text-decoration:underline;}

/* Página de um acontecimento. */
.diario-voltar{margin:0 0 14px;font-size:13.5px;}
.diario-voltar a{text-decoration:none;color:var(--ink-soft,#4c5b64);}
.diario-voltar a:hover{text-decoration:underline;}
.diario-artigo h1{font-size:28px;line-height:1.2;margin:8px 0 16px;}
.diario-outros{
  background:var(--paper,#fff);border:1px solid var(--line,#e2dccc);border-radius:10px;
  padding:18px 24px;margin-top:6px;
}
.diario-outros h2{font-size:16px;margin:0 0 10px;}
.diario-outros ul{list-style:none;margin:0;padding:0;}
.diario-outros li{padding:7px 0;border-top:1px solid var(--line,#e2dccc);line-height:1.4;}
.diario-outros li:first-child{border-top:0;}
.diario-outros li a{font-size:15px;font-weight:600;text-decoration:none;}
.diario-outros li a:hover{text-decoration:underline;}
.diario-outros li span{display:block;font-size:12.5px;color:var(--ink-soft,#4c5b64);}

/* 7/nov/2026 — [stated] ele, no computador: os números de emergência «estão bloqueados, não consigo subir a página»
   e «fique no fim ainda com duas linhas brancas». A coluna é sticky e mais alta do que o ecrã: presa pelo topo, o
   fundo nunca se via. É a MESMA regra que ele mandou fazer na árvore das freguesias (1/nov): quando a coluna é
   mais alta do que o ecrã, o js/coluna-colada.js mede-a e escreve um `top` NEGATIVO em --coluna-colada-topo — a
   coluna anda com a página e pára com a última linha à vista e as linhas em branco por baixo
   (data/blog/arvore-do-diario.json → linhasEmBrancoNoFim, as mesmas 2). Curta, fica nos 20px, como antes. */
.diario-lateral{position:sticky;top:var(--coluna-colada-topo, 20px);}
.diario-lateral h2{font-size:17px;margin:0 0 14px;}
.diario-lateral-botao{display:none;}
/* ===== A ÁRVORE DOS CONCELHOS E FREGUESIAS (30/out/2026) =====
   ⭐ A hierarquia é a informação: o desnível da freguesia é o que diz a quem
   lê que aquela Ribeira Seca é a de Vila Franca e não a da Ribeira Grande.
   Por isso o avanço é generoso e tem risco à esquerda — não é enfeite.
   ⚠ Quando não há nada escrito, o nav tem [hidden] e o browser esconde-o
   sozinho. Não se escreve aqui display:none — era uma segunda regra a dizer o
   mesmo, e um dia divergiam. */
.diario-arvore{margin:0 0 22px;}
.diario-arvore h2{font-size:17px;margin:0 0 12px;}
.diario-arvore-lista{list-style:none;margin:0;padding:0;}
.diario-arvore-concelho{margin-bottom:10px;}
.diario-arvore-concelho details>summary{cursor:pointer;list-style:none;}
.diario-arvore-concelho details>summary::-webkit-details-marker{display:none;}
.diario-arvore-concelho details>summary::before{
  content:"▸";display:inline-block;width:1em;color:var(--ink-soft,#4c5b64);
  transition:transform .15s ease;}
.diario-arvore-concelho details[open]>summary::before{transform:rotate(90deg);}
.diario-arvore-so-concelho{padding-left:1em;}
.diario-arvore-titulo-concelho{font-size:15px;font-weight:600;text-decoration:none;}
a.diario-arvore-titulo-concelho:hover{text-decoration:underline;}
.diario-arvore-freguesias{
  list-style:none;margin:6px 0 0;padding:0 0 0 14px;
  border-left:1px solid var(--linha,#e2e6e9);margin-left:.45em;}
.diario-arvore-freguesia{margin:5px 0;line-height:1.35;}
.diario-arvore-ligacao{font-size:14px;text-decoration:none;}
a.diario-arvore-ligacao:hover{text-decoration:underline;}

.diario-util-grupo{
  background:var(--paper,#fff);border:1px solid var(--line,#e2dccc);border-radius:10px;
  padding:14px 16px;margin-bottom:12px;
}
.diario-util-grupo.destaque{border-color:var(--gold,#c69a4e);border-width:2px;}
.diario-util-grupo h3{font-size:13.5px;margin:0 0 10px;color:var(--ink-soft,#4c5b64);
  text-transform:uppercase;letter-spacing:.04em;}
.diario-util-grupo ul{list-style:none;margin:0;padding:0;}
.diario-util-grupo li{margin-bottom:10px;line-height:1.35;}
.diario-util-grupo li a{font-size:15.5px;font-weight:600;text-decoration:none;display:block;}
.diario-util-grupo li a:hover{text-decoration:underline;}
.diario-util-grupo li span{font-size:12.5px;color:var(--ink-soft,#4c5b64);display:block;}
.diario-util-grupo li small{font-size:11.5px;color:var(--ink-soft,#4c5b64);opacity:.85;}
.diario-util-nota,.diario-util-link{font-size:12.5px;line-height:1.5;margin:0;}
.diario-util-link{margin-top:8px;}
.diario-util-verificado{font-size:11.5px;color:var(--ink-soft,#4c5b64);opacity:.8;padding:0 4px;}

@media (max-width:860px){
  .diario{grid-template-columns:minmax(0,1fr);gap:20px;padding:0 18px 40px;}
  .diario-lateral{position:static;order:-1;}
  /* [stated] 20/set: no telemóvel a Emergência fica sempre à vista; os
     outros grupos abrem com o botão "Ver todos os números úteis (N)". */
  .diario-lateral-botao{
    display:block;width:100%;cursor:pointer;margin:0 0 12px;
    font:inherit;font-size:14.5px;font-weight:600;color:var(--gold-deep,#8a6a2f);
    background:var(--paper,#fff);border:2px solid var(--gold,#c69a4e);
    border-radius:10px;padding:13px 16px;text-align:center;
  }
  .diario-lateral.fechada .diario-util-grupo:not(.destaque),
  .diario-lateral.fechada .diario-util-verificado{display:none;}
  .diario-grelha-linha{grid-template-columns:minmax(0,1fr);gap:2px;}
  .diario-artigo{padding:18px 18px;}
  .diario-cartao{padding:16px 18px;}
  .diario-cartao h2,.diario-cartao h3{font-size:19px;}
  .diario-secao-titulo{font-size:14px;}
  .diario-artigo h1{font-size:24px;}
  .diario-outros{padding:16px 18px;}
}
/* Nota de contexto de um artigo — respeito por um ato religioso, aviso de
   época baixa, coisas assim. Fica visível sem parecer um erro. */
.diario-nota{
  font-size:13.5px;line-height:1.6;margin:14px 0 0;padding:10px 14px;
  background:var(--paper-2,#f1ece1);border-radius:6px;color:var(--ink-soft,#4c5b64);
}

/* Excursões de cruzeiro (21/set/2026) ------------------------------------ */
.bloco-cruzeiro{background:var(--paper-2,#f1ece1);border-left:3px solid var(--gold,#c69a4e);}
.bloco-cruzeiro h3{margin:0 0 6px;font-size:15px;}
.bloco-cruzeiro input,.bloco-cruzeiro select{width:100%;box-sizing:border-box;}
.cz-nota{font-size:13px;line-height:1.5;color:var(--ink-soft);margin:0 0 10px;}
.cz-ajuda{font-size:11.5px;line-height:1.45;color:var(--ink-soft);margin:4px 0 8px;}
.cz-linha{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;align-items:end;}
.bloco-cruzeiro .field-label{margin-top:8px;}
.cz-janela{margin-top:10px;font-size:13.5px;font-weight:600;color:var(--gold-deep,#8a6a2f);line-height:1.45;}
/* Página cruzeiros.html */
.cruzeiros-passos{counter-reset:passo;list-style:none;padding:0;margin:0 0 18px;}
.cruzeiros-passos li{counter-increment:passo;position:relative;padding-left:40px;margin-bottom:14px;}
.cruzeiros-passos li::before{content:counter(passo);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--gold,#c69a4e);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;}
.cruzeiros-garantia{background:var(--paper,#fff);border:2px solid var(--gold,#c69a4e);border-radius:10px;padding:16px 20px;margin:0 0 20px;}
.cruzeiros-garantia p{margin:0;color:var(--ink,#22333b);}
.cruzeiros-cta{display:inline-block;margin:6px 0 24px;}

/* 21/set/2026 — CORREÇÃO: no telemóvel a coluna do mapa e da lista de pontos
   ficava mais larga do que o ecrã (454 px num ecrã de 390), e o botão "+" de
   cada ponto ficava cortado fora do ecrã — o cliente não conseguia escolher
   paragens pela lista. Causa: numa grelha, "1fr" nunca encolhe abaixo da
   largura mínima do conteúdo. minmax(0, 1fr) e min-width:0 deixam encolher. */
.layout{grid-template-columns:minmax(0,1fr) 400px;}
.layout > *{min-width:0;}
@media (max-width:900px){ .layout{grid-template-columns:minmax(0,1fr);} }

/* Aviso dos custos de processamento, junto ao botão de reservar (21/set/2026) */
.aviso-pagamento{font-size:12px;line-height:1.5;color:var(--ink-soft,#4c5b64);margin:0 0 12px;
  padding:10px 12px;background:var(--paper-2,#f1ece1);border-radius:6px;}
.aviso-pagamento::before{content:"ℹ️ ";}

/* Avaliações: selo de origem e nota de verificação (21/set/2026) */
.selo-avaliacao{font-size:11.5px;color:var(--ink-soft,#4c5b64);}
.selo-avaliacao.verificada{color:#2e7d32;font-weight:600;}
.avaliacoes-verificacao{font-size:12px;line-height:1.5;color:var(--ink-soft,#4c5b64);margin:14px 0 0;}
.avaliacao-form select{width:100%;}

/* Secção "A nossa frota" (21/set/2026) — js/frota.js, data/carros.json */
.frota{padding:8px 32px 72px;max-width:1080px;}
.frota h2{font-size:32px;margin:6px 0 10px;font-weight:400;}
.frota-intro{font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:620px;margin:0 0 24px;}
.frota-grelha{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;}
.frota-carro{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;}
.frota-foto{aspect-ratio:1600/739;background:var(--paper-2);}
.frota-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.frota-miniaturas{display:flex;gap:8px;padding:10px 16px 0;}
.frota-mini{border:2px solid transparent;border-radius:4px;padding:0;background:none;cursor:pointer;width:72px;aspect-ratio:1600/739;overflow:hidden;opacity:.7;}
.frota-mini img{width:100%;height:100%;object-fit:cover;display:block;}
.frota-mini.ativa,.frota-mini:hover,.frota-mini:focus-visible{border-color:var(--gold);opacity:1;}
.frota-carro h3{font-size:19px;margin:14px 16px 4px;}
.frota-carro p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0 16px 18px;}
.sobre-nos + .frota{margin:0 auto;}
/* 16/out/2026 (ordem do Paulo, por voz) — AS FOTOS DO "QUEM SOMOS".
   [stated] ele: a foto deles "logo ao início do texto", e o texto "à volta da
   própria fotografia, criar algo mais simbiótico". Daí o float: não é a foto
   num canto e o texto à parte — são as palavras a abraçá-la.
   Razão de negócio, nas palavras dele: "para eles verem uma cara, saberem que
   isto não é uma artimanha, que realmente existe alguém por detrás". */
.sobre-foto-principal{
  float:left; width:min(42%,320px); margin:4px 22px 14px 0;
  border-radius:10px; display:block;
}
.sobre-foto-principal img{width:100%;height:auto;display:block;border-radius:10px;}
.sobre-foto-legenda{font-size:12.5px;color:var(--ink-soft);margin-top:6px;line-height:1.4;}
/* As outras, a seguir ao texto, lado a lado. O clear impede-as de subirem
   para o lado da principal quando o texto é curto. */
/* ─────────────────────────────────────────────────────────────────────
   ⭐⭐ A FILA DE RETRATOS — 26/out/2026
   ─────────────────────────────────────────────────────────────────────
   🚩 O DEFEITO: o js/sobre-nos.js desenha `<div class="sobre-retratos">`
   desde 23/out, mas a folha de estilos NUNCA teve regra nenhuma para essa
   classe. As fotografias saíam sem alinhamento, cada uma com a altura que
   a sua imagem calhasse ter. Apanhado pela caixa de areia a 26/out.

   ⚠ Era precisamente o que ele tinha pedido que não acontecesse, ao mandar
   a fotografia dele a 23/out: *"para colocar no lado direito de quem
   somos, alinha com a outra da Elvira"*.

   ⭐ aspect-ratio:3/2 dá-lhes a MESMA altura, seja qual for a imagem.
   ⭐ object-fit:cover CORTA em vez de esticar — uma cara esticada é pior
      do que uma cara cortada, e estas são as caras do negócio.
   ⭐ no telemóvel empilham: lado a lado ficariam dois selos.
   ───────────────────────────────────────────────────────────────────── */
.sobre-retratos{display:flex;gap:14px;margin:0 0 22px;align-items:flex-start;}
.sobre-retratos figure{flex:1 1 0;min-width:0;margin:0;}
.sobre-retratos img{
  width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center top;
  display:block;border-radius:10px;
}

.sobre-fotos-mais{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 0;clear:both;}
.sobre-fotos-mais figure{flex:1 1 220px;max-width:320px;margin:0;}
.sobre-fotos-mais img{width:100%;height:auto;display:block;border-radius:10px;}
/* ⚠ No telemóvel o texto NÃO contorna: num ecrã estreito, contornar uma foto
   deixa linhas de três palavras, que é pior do que não contornar nada. */
@media (max-width:700px){
  .sobre-foto-principal{float:none;width:100%;margin:0 0 16px;}
  /* ⭐ lado a lado num telemóvel, duas fotos ficariam dois selos */
  .sobre-retratos{flex-direction:column;}
  .sobre-fotos-mais figure{flex:1 1 100%;max-width:none;}
}
@media (max-width:640px){.frota{padding:8px 20px 56px;}.frota h2{font-size:26px;}.frota-grelha{grid-template-columns:1fr;}}

/* Classificação do Google (1/out/2026) — js/convite-avaliar.js e avaliacoes.html.
   O elemento nasce com [hidden]; só se mostra quando há mesmo nota. */
.google-nota{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;text-decoration:none;font-size:14px;color:var(--ink);}
.google-nota:hover{border-color:var(--gold);}
.google-nota-estrelas{color:#e8a500;letter-spacing:1px;font-size:15px;}
.google-nota-texto{font-weight:600;}
.google-nota-grande{margin:0 0 2px;font-size:19px;}
.google-nota-grande .google-nota-estrelas{font-size:21px;}
@media (max-width:640px){.google-nota{font-size:13px;padding:6px 12px;}}
/* Boletim da Ilha (21/set/2026) — boletim.html, js/boletim*.js */
.boletim{max-width:860px;}
.boletim h1{font-size:30px;margin:6px 0 10px;}
.boletim h2{font-size:20px;margin:28px 0 10px;}
.boletim-intro{color:var(--ink-soft);line-height:1.6;margin:0 0 4px;}
.boletim-atualizado{font-size:13px;color:var(--ink-soft);margin:0 0 18px;}
.boletim-destaque{border:1px solid var(--line);border-left:5px solid var(--gold);background:#fff;border-radius:6px;padding:14px 18px;}
.boletim-destaque.boa{border-left-color:#2f7d4f;}
.boletim-destaque-rotulo{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:4px;}
.boletim-destaque-texto{font-size:18px;font-weight:600;}
/* Avisos do IPMA (1/out/2026) — a barra com a cor do nível, acima do quadro.
   A cor vem de data/boletim.json (avisos.cores) pela variável --cor, para se
   mudar sem tocar no CSS. */
.boletim-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;padding:11px 16px;border-radius:6px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--cor,#b5231c);}
.boletim-aviso-nivel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--cor,#b5231c);}
.boletim-aviso-texto{font-size:15px;font-weight:600;flex:1 1 220px;}
.boletim-aviso-citado{flex:1 1 100%;font-size:14px;color:var(--ink-soft);font-style:italic;line-height:1.5;}
.boletim-aviso-link{font-size:13px;font-weight:600;color:var(--gold-deep);white-space:nowrap;}
.boletim-aviso-nenhum{--cor:#2f7d4f;}
.boletim-aviso-nenhum .boletim-aviso-texto{font-weight:500;color:var(--ink-soft);}
.boletim-aviso-incerto{--cor:#8a8a8a;}
.boletim-aviso-incerto .boletim-aviso-texto{font-weight:500;color:var(--ink-soft);}
.boletim-tabela-wrap{overflow-x:auto;}
.boletim-tabela{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid var(--line);}
.boletim-tabela th,.boletim-tabela td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;}
.boletim-tabela th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:var(--paper-2);}
.boletim-dia{font-weight:600;text-transform:capitalize;}
.boletim-nivel{display:inline-flex;align-items:center;gap:5px;}
.boletim-nivel::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);display:inline-block;}
.boletim-sol{font-size:15px;}
.boletim-agenda,.boletim-arquivo{padding-left:20px;line-height:1.7;}
.boletim-dica{background:var(--paper-2);border-radius:6px;padding:12px 16px;line-height:1.6;margin-top:18px;}
.boletim-cta{margin:26px 0 8px;padding:18px;border:1px solid var(--line);border-radius:6px;background:#fff;}
.boletim-cta p{margin:0 0 12px;}
.boletim-cta .btn-primary{display:inline-block;width:auto;padding:11px 22px;}
.boletim-fonte{font-size:12px;color:var(--ink-soft);line-height:1.5;margin-top:22px;}
.boletim-cartao{margin:0 32px 28px;max-width:1016px;background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:6px;padding:14px 18px;}
.boletim-cartao p{margin:6px 0 8px;font-size:15px;}
.boletim-cartao-link{font-weight:600;color:var(--gold-deep);}
@media (max-width:640px){.boletim h1{font-size:24px;}.boletim-cartao{margin:0 20px 24px;}.boletim-aviso{padding:10px 13px;}.boletim-aviso-texto{font-size:14px;flex:1 1 100%;}}

/* Babysitting — campos um a um e caixas à largura toda (22/set/2026) */
.baby-passo[hidden], #baby-add-dia[hidden]{display:none !important;}
.summary .form-field input[type=text], .summary .form-field input[type=email], .summary .form-field input[type=tel],
.summary .form-field select, .summary .form-field textarea{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:14.5px;padding:10px 12px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.summary .form-field textarea{min-height:72px;resize:vertical;overflow:hidden;line-height:1.45;}
.baby-passo[data-passo="local"], .baby-passo[data-passo="morada"]{margin-bottom:20px;}
.baby-passo[data-passo="morada"] .form-field:last-child{margin-bottom:0;}
.summary #baby-preco:empty, .summary .block:has(> #baby-aviso:empty){display:none;}
@media (max-width:640px){
  .dia-row{grid-template-columns:1fr 1fr auto;}
  .dia-row .campo:first-child{grid-column:1 / -1;}
}

/* Procura de locais no configurador (22/set/2026) */
.poi-procura{display:flex;align-items:center;gap:8px;margin:0 0 10px;}
.poi-procura input[type=search]{
  flex:1;min-width:0;font-family:inherit;font-size:14.5px;padding:9px 12px;
  border:1.4px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.poi-procura button{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-soft);padding:2px 6px;}
.poi-procura-info{font-size:12.5px;color:var(--ink-soft);margin:-4px 0 10px;}

/* Barra "O seu roteiro" presa no topo enquanto se monta o passeio (22/set/2026) */
.barra-roteiro{position:sticky;top:0;z-index:1100;background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 2px 8px rgba(24,34,41,.08);padding:8px 32px;}
.barra-roteiro[hidden]{display:none;}
.barra-roteiro-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;}
.barra-roteiro-info{color:var(--ink-soft);font-size:13px;}
.barra-roteiro-ver{margin-left:auto;border:1px solid var(--gold);background:#fff;color:var(--gold-deep);
  border-radius:4px;padding:4px 10px;font-family:inherit;font-size:13px;cursor:pointer;}
.barra-roteiro-chips{display:flex;gap:6px;overflow-x:auto;padding:6px 0 2px;scrollbar-width:thin;}
.barra-roteiro-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:3px 4px 3px 10px;font-size:12.5px;white-space:nowrap;}
.barra-roteiro-chip b{color:var(--ocean-deep);}
.barra-roteiro-x{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:var(--ink-soft);padding:0 4px;}
.barra-roteiro-x:hover{color:#b3261e;}
@media (max-width:700px){.barra-roteiro{padding:6px 16px;}}

/* Fotos que vão passando de 3 em 3 segundos (22/set/2026) */
img[data-fotos]{transition:opacity .25s ease;}

/* Foto em grande por cima da página (22/set/2026) */
img[data-fotos-grandes]{cursor:zoom-in;}
html.foto-grande-aberta{overflow:hidden;}
.foto-grande{position:fixed;inset:0;z-index:5000;background:rgba(10,14,17,.97);display:flex;align-items:center;justify-content:center;
  padding:48px 64px;-webkit-user-select:none;user-select:none;}
.foto-grande[hidden]{display:none;}
.fg-quadro{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;}
.fg-img-wrap{position:relative;line-height:0;}
.fg-img{max-width:calc(100vw - 140px);max-height:calc(100vh - 130px);object-fit:contain;border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);pointer-events:none;transition:opacity .2s;}
.fg-img.a-carregar{opacity:.35;}
.fg-pelicula{position:absolute;inset:0;}
.fg-legenda{color:#e9e4d8;font-size:14px;text-align:center;line-height:1.4;}
.fg-nome{font-weight:600;}
.fg-conta{opacity:.7;margin-left:6px;}
.fg-credito .foto-credito{color:#cfc6b2;font-size:12px;margin-left:8px;position:static;background:none;padding:0;}
.fg-fechar{position:absolute;top:12px;right:16px;background:none;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer;padding:4px 10px;}
.fg-seta{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;font-size:26px;
  width:48px;height:64px;border-radius:6px;cursor:pointer;}
.fg-seta:hover,.fg-fechar:hover{background:rgba(255,255,255,.22);}
.fg-seta[hidden]{display:none;}
.fg-ant{left:10px;} .fg-seg{right:10px;}
@media (max-width:700px){
  .foto-grande{padding:52px 8px 24px;}
  .fg-img{max-width:calc(100vw - 16px);max-height:calc(100vh - 140px);}
  .fg-seta{top:auto;bottom:18px;transform:none;width:56px;height:48px;}
  .fg-ant{left:calc(50% - 64px);} .fg-seg{right:calc(50% - 64px);}
}

/* Botão de WhatsApp e caixa de confiança (24/set/2026) — js/confianca.js.
   O botão fica fixo no canto; no telemóvel sobe um pouco, para não tapar
   o botão de reservar. */
.wa-flutuante{
  position:fixed;right:18px;bottom:18px;z-index:900;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25d366;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:transform .15s ease;
}
.wa-flutuante:hover{transform:scale(1.07);}
/* 10/nov/2026 — ordem dele: o WhatsApp não tapa campos nem se mete à frente de quem
   escreve. Quem decide é o naoTaparNada() do js/confianca.js; aqui só o desaparecer. */
.wa-flutuante{transition:transform .15s ease, opacity .18s ease, visibility .18s;}
.wa-flutuante.wa-escondido{opacity:0;visibility:hidden;pointer-events:none;}
@media (max-width:700px){ .wa-flutuante{right:14px;bottom:76px;width:48px;height:48px;} }
@media print{ .wa-flutuante{display:none;} }

.caixa-confianca{
  margin-top:18px;padding:16px 18px;border-radius:12px;
  background:var(--paper-2,#f1ece1);font-size:13.5px;line-height:1.5;
}
.caixa-confianca .conf-bloco + .conf-bloco{margin-top:14px;}
.caixa-confianca h4{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft,#4c5b64);}
.caixa-confianca ul{margin:0;padding-left:18px;}
.caixa-confianca li{margin:3px 0;}
.caixa-confianca .conf-sim li::marker{content:"✓  ";}
.caixa-confianca .conf-premium li::marker{content:"★  ";}
.caixa-confianca .conf-nao li::marker{content:"–  ";}
.caixa-confianca .conf-cancelamento p{margin:0;}

/* Barra de preço no telemóvel (24/set/2026) — só em ecrãs estreitos, onde o
   resumo e o botão ficam longe do topo. A classe com-barra-preco é posta no
   body por js/app.js, para o conteúdo e o botão de WhatsApp não ficarem
   escondidos por baixo da barra. */
.barra-preco{display:none;}
@media (max-width:900px){
  .barra-preco{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:950;
    align-items:center;justify-content:space-between;gap:14px;
    padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--paper,#faf8f3);border-top:1px solid var(--line,#e2dccc);
    box-shadow:0 -4px 16px rgba(0,0,0,.10);
  }
  .barra-preco[hidden]{display:none;}
  .barra-preco-valor{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
  .barra-preco-valor strong{font-size:19px;color:var(--ink,#182229);}
  .barra-preco-valor span{font-size:11.5px;color:var(--ink-soft,#4c5b64);}
  .barra-preco-botao{
    flex:none;padding:12px 18px;border:none;border-radius:2px;cursor:pointer;
    background:var(--gold,#c69a4e);color:#241a08;font:inherit;font-weight:600;font-size:14px;
  }
  .barra-preco-botao:disabled{opacity:.45;cursor:not-allowed;}
  body.com-barra-preco{padding-bottom:84px;}
  body.com-barra-preco .wa-flutuante{bottom:96px;}
}
@media print{ .barra-preco{display:none;} }

/* Preço à vista (24/set/2026) — na página inicial, no topo do configurador e
   no resumo antes de haver roteiro. O número vem sempre de data/pricing.json. */
.preco-desde{
  margin:2px 0 14px;font-size:14px;font-weight:600;color:var(--ocean-deep,#1f4356);
}
.servico-card .preco-desde{margin:6px 0 12px;}
.preco-antecipado{
  padding:14px 16px;border-radius:12px;background:var(--paper-2,#f1ece1);
}
.preco-antecipado h4{
  margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft,#4c5b64);
}
.preco-antecipado-versoes{display:flex;gap:22px;flex-wrap:wrap;}
.preco-antecipado-versoes span{display:flex;flex-direction:column;font-size:12.5px;color:var(--ink-soft,#4c5b64);}
.preco-antecipado-versoes strong{font-size:22px;line-height:1.15;color:var(--ink,#182229);}
.preco-antecipado-nota{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--ink-soft,#4c5b64);}

/* Perguntas frequentes (24/set/2026) — configurador e página de roteiro.
   Usa <details>/<summary> do próprio navegador: abre e fecha sem JavaScript
   nenhum e continua a funcionar com leitores de ecrã. */
.faq{margin-top:18px;font-size:13.5px;line-height:1.55;}
.faq h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft,#4c5b64);}
.faq-item{border-top:1px solid var(--line,#e2dccc);}
.faq-item:last-child{border-bottom:1px solid var(--line,#e2dccc);}
.faq-item > summary{
  list-style:none;cursor:pointer;padding:10px 26px 10px 0;position:relative;
  font-weight:600;color:var(--ink,#22303a);
}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-weight:400;font-size:17px;line-height:1;color:var(--ink-soft,#4c5b64);
}
.faq-item[open] > summary::after{content:"–";}
.faq-item > summary:hover{color:var(--ocean-deep,#1f4356);}
.faq-item > p{margin:0 0 12px;padding-right:26px;color:var(--ink-soft,#4c5b64);}


/* =========================================================================
   O CINZENTO DE "ESCOLHA PRIMEIRO A DATA E A HORA"  (2/out/2026)
   -------------------------------------------------------------------------
   [stated] Paulo: *"o campo de crie o seu passeio deve estar todo cinzento até
   o cliente escolher a data e hora"* e *"sempre que tentar clicar em algum
   lado para criar, lembrar que tem de selecionar uma data e hora"*.
   Vive aqui, e não dentro de uma página, porque serve o configurador E a
   página dos roteiros prontos — a regra é a mesma nos dois.
   ========================================================================= */
.depois-da-data,#lado-criar,#roteiro-preco-box,.roteiro-cta-final{transition:opacity .2s;}
/* ⚠ O CLIQUE TEM DE CHEGAR AO CONTENTOR. Com pointer-events:none no bloco
   inteiro, clicar num local do mapa não fazia rigorosamente NADA: nem abria,
   nem avisava — e um cliente que carrega três vezes sem reação conclui que o
   site está avariado, não que lhe falta a data. Então: os FILHOS deixam de
   receber cliques (ninguém mexe em nada), mas o contentor continua a
   recebê-los, e é ele que explica o que falta. */
.bloqueado{opacity:.45;filter:grayscale(.65);cursor:not-allowed;pointer-events:auto;}
.bloqueado > *{pointer-events:none;}
/* O bloco da data a dar um salto curto quando se carrega no que está trancado:
   sem isto a frase aparecia fora do campo de visão de quem estava a olhar para
   o mapa, e parecia na mesma que nada tinha acontecido. */
@keyframes cal-chamar{0%,100%{transform:translateY(0);}30%{transform:translateY(-5px);}60%{transform:translateY(0);}}
.bloco-data-primeiro.a-chamar{animation:cal-chamar .5s ease;box-shadow:0 0 0 4px rgba(200,135,43,.28);}
@media (prefers-reduced-motion:reduce){.bloco-data-primeiro.a-chamar{animation:none;}}
/* 16/out/2026 (pedido do Paulo) — clicar num pino do mapa marca o ponto E
   leva a lista até à ficha dele. Este destaque curto é o que diz ao olho
   ONDE é que a lista parou: sem ele a lista saltava e o cliente não sabia
   qual das fichas é que era a sua. Mesmo molde do .bloco-data-primeiro
   acima, de propósito — um site com dois jeitos de chamar a atenção ensina
   duas linguagens a quem lá entra. */
.poi-card.a-chamar{animation:cal-chamar .5s ease;box-shadow:0 0 0 4px rgba(198,154,78,.45);border-radius:6px;}
@media (prefers-reduced-motion:reduce){.poi-card.a-chamar{animation:none;}}
.bloco-data-primeiro{border:2px solid var(--azul,#0F3B57);border-radius:10px;padding:14px;margin-top:18px;}
.disp-estado{font-size:13px;margin-top:10px;min-height:1.2em;}
.disp-estado.ha{color:#1e7a46;}
.disp-estado.nao-ha{color:#c0392b;}
.disp-estado.a-ver{color:#4C5B64;}
.disp-estado.lembrete{color:#8a6d1f;font-weight:600;}
.campo-escondido{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;margin:0;}
/* 7/nov/2026 — o campo do dia escondido (#bar-dia, transfer) ficava 400 px FORA
   do ecrã no computador e fazia aparecer uma barra para o lado (1692 px numa
   janela de 1280). Preso ao canto e cortado, já não empurra nada. Estava no ar. */
.campo-escondido{left:0;top:0;min-width:0;max-width:1px;overflow:hidden;clip-path:inset(50%);}

/* A frase que diz, à partida, o que é preciso fazer primeiro (2/out/2026).
   [stated] Paulo: "tudo o que tenha que se fazer tem que haver lá umas frases
   que digam isso, e depois, quando a pessoa começar a preencher, essa palavra
   pode desaparecer perfeitamente bem".
   ⚠ NÃO é uma caixa de erro: não é vermelha nem tem ⚠. O cliente não fez nada
   de errado — só ainda não começou. Convida, não repreende. */
.aviso-primeiro-passo{
  display:block;background:#FDF6E8;border:1px solid #E6D3A8;border-left:4px solid #C8872B;
  border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:14px;line-height:1.5;
  color:#5A4A2A;cursor:pointer;
  /* ⚠ Tem de receber o rato mesmo dentro de uma zona trancada: é ela que leva
     o cliente ao sítio certo quando carrega. Sem isto ficaria decorativa. */
  pointer-events:auto !important;
  /* E não fica cinzenta com o resto: uma instrução a cinzento não se lê. */
  filter:none;opacity:1;
}
.aviso-primeiro-passo strong{display:block;font-size:15px;margin-bottom:2px;color:#3A2F18;}
.aviso-primeiro-passo[hidden]{display:none;}
@media (prefers-color-scheme:dark){
  .aviso-primeiro-passo{background:#2a2419;border-color:#5a4a28;color:#d8cba8;}
  .aviso-primeiro-passo strong{color:#f0e6cc;}
}

/* A data escolhida, por extenso, ao lado do preço (2/out/2026).
   ⚠ Salvaguarda da data pré-preenchida: ninguém pode pagar sem ver que dia é.
   Não é decoração — é o que impede alguém de comprar um passeio para amanhã
   por não ter reparado num campo que nós preenchemos. */
.data-escolhida{
  font-size:13px;font-weight:600;color:#0F3B57;background:#EEF4F8;
  border-radius:6px;padding:6px 10px;margin:0 0 8px;text-transform:none;
}
.data-escolhida[hidden]{display:none;}
.rotulo-apagado{opacity:.5;}
@media (prefers-color-scheme:dark){
  .data-escolhida{background:#152630;color:#cfe3ef;}
}

/* ========================================================================
   🏷️ CAMPANHAS E CUPÕES (4/out/2026)
   ------------------------------------------------------------------------
   [stated] Paulo: "os roteiros/pontos em promoção têm de saltar à vista —
   uma cor chamativa, algo que mostre logo que aquele é especial e o outro
   não". Daí a etiqueta, e não só um preço diferente: o olho tem de apanhar
   a promoção antes de ler o número.

   ⚠ A cor NÃO é o único sinal. Quem não distingue cores (e quem imprime a
   página a preto e branco) continua a ler a palavra "Em promoção" e a ver o
   preço antigo riscado — a informação nunca vive só na cor.
   ======================================================================== */
.etiqueta-promocao{
  display:inline-block;
  background:#c0392b;
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  vertical-align:middle;
  margin-left:6px;
  white-space:nowrap;
}
.em-promocao{
  /* o traço lateral faz o cartão saltar na lista sem depender da cor */
  box-shadow:inset 4px 0 0 #c0392b;
}
.preco-antigo{
  text-decoration:line-through;
  opacity:.6;
  margin-right:6px;
  font-weight:400;
}
.price-row-desconto .val{color:#1e7b34;font-weight:700;}
.aviso-desconto{
  background:#eaf7ee;
  border:1px solid #9ed3ae;
  border-radius:6px;
  padding:8px 10px;
  margin:8px 0 0;
  font-size:13px;
  color:#17552c;
}

/* O campo do cupão e a resposta imediata (ux-validar-a-medida):
   a resposta aparece COLADA ao campo, não no fim do formulário. */
.cupao-estado{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.4;
}
.cupao-estado[hidden]{display:none;}
.cupao-estado.ok{color:#17552c;}
.cupao-estado.erro{color:#c0392b;}
.cupao-estado.aguardar{color:#666;}
#cupao-codigo.cupao-bom{border-color:#1e7b34;}
#cupao-codigo.cupao-mau{border-color:#c0392b;}

@media (prefers-color-scheme:dark){
  .etiqueta-promocao{background:#e05548;color:#1a1a1a;}
  .em-promocao{box-shadow:inset 4px 0 0 #e05548;}
  .aviso-desconto{background:#14301d;border-color:#2f6b43;color:#bfe7cc;}
  .cupao-estado.ok{color:#8fd8a6;}
  .cupao-estado.erro{color:#f0867a;}
  .price-row-desconto .val{color:#8fd8a6;}
}

/* A BARRA DA CAMPANHA (4/out/2026) — [stated] Paulo: "deveria ter uma barra no
   passeio a dizer campanha até… para fazer com que a pessoa compre".
   Vive acima do conteúdo e é a primeira coisa que o olho apanha. Fica
   escondida quando não há campanha — nunca uma barra a prometer o que não há. */
.barra-campanha{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 10px;
  /* 10/nov/2026 — [stated] Paulo: "a barra vermelha só deveria cobrir a parte
     que diz o preço especial, e não cobrir tudo sem nada lá escrito".
     A barra encolhe à medida do texto; num ecrã estreito nunca passa a largura. */
  width:fit-content;
  max-width:100%;
  box-sizing:border-box;
  background:#c0392b;
  color:#fff;
  padding:10px 16px;
  border-radius:8px;
  margin:0 0 16px;
  font-size:15px;
  font-weight:600;
  line-height:1.35;
}
.barra-campanha[hidden]{display:none;}
.barra-campanha-nota{font-weight:400;font-size:13px;opacity:.9;}

/* O preço riscado e o novo ao lado — [stated] "no preço riscar o que está lá e
   por o novo". O riscado fica discreto; o novo é o que salta. */
.preco-novo{color:#c0392b;font-weight:700;margin-left:6px;}

@media (prefers-color-scheme:dark){
  .barra-campanha{background:#8e2a20;color:#ffe9e6;}
  .preco-novo{color:#ff9d92;}
}

/* ═══════════════════════════════════════════════════════════════════════
   ⭐⭐ A BARRA DO TOPO EM DUAS LINHAS — 26/out/2026
   ═══════════════════════════════════════════════════════════════════════
   [stated] ideia dele, 12h59: "porque é que não fazes uma linha abaixo do
   próprio banner (...) e começas do princípio a contar esse espaço todo?
   Não te dá mais espaço? Até mesmo melhor espaçamento?"

   ⚠ PORQUE É QUE ISTO SUBSTITUI TRÊS REMENDOS E NÃO É UM QUARTO:
   a barra NÃO é fixa — não tem position:sticky, desaparece ao primeiro
   scroll. Uma segunda linha custa altura UMA vez, no arranque, e não
   acompanha o cliente pela página. Os três remendos que saíram (wrap aos
   1100, nowrap entre 421 e 900, riscas aos 900) existiam todos para
   disputar espaço numa linha que nunca precisou de ser uma só.

   ⚠ SEM TOCAR NO HTML DAS 16 PÁGINAS. `display:contents` no .topbar-right
   apaga a CAIXA e deixa os filhos subirem a itens directos da barra — daí
   poderem ser ordenados e o menu poder ocupar uma linha inteira. O
   .topbar-right continua a existir no HTML, que é o que o js/menu.js
   procura para lá meter as três riscas.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:701px){
  .topbar{
    height:auto;min-height:0;flex-wrap:wrap;align-items:center;
    padding:0 32px;gap:0 22px;row-gap:0;
  }
  .topbar-right{display:contents;}
  .topbar > a.brand{order:1;min-height:62px;}
  .topbar .convite-topo{order:2;margin-left:auto;}
  .topbar #lang-switcher{order:3;}
  .topbar .topbar-menu{display:none;}
  /* A segunda linha começa onde o logótipo começa — "do princípio", como ele
     disse. As margens negativas levam o risco de separação até às pontas. */
  /* ─────────────────────────────────────────────────────────────────
     ⭐⭐ A SEGUNDA LINHA: CONTACTO À ESQUERDA, MENU À DIREITA
     ─────────────────────────────────────────────────────────────────
     [stated] ele, 14h12, a corrigir-se a si próprio: o menu "é da direita
     para a esquerda, sempre (...) tudo alinhado ao mesmo nível do contacto
     telefónico". A correcção é que faz isto sair DE GRAÇA — o menu passou a
     ocupar o espaço que sobrava ao lado do contacto, em vez de pedir uma
     linha só para ele. Medido em oito larguras: 108px dos 701 aos 1440,
     que é MAIS BAIXA do que a barra era antes do telefone entrar (109).
     ───────────────────────────────────────────────────────────────── */
  /* o corte de linha, e é ele que leva o risco de ponta a ponta */
  .topbar .topbar-quebra{
    order:4;flex-basis:100%;height:0;margin:0 -32px;
    border-top:1px solid var(--line);
  }
  .topbar .pt-contacto{
    order:5;display:inline-flex;align-items:center;gap:9px;height:44px;
  }
  .topbar .pt-wa{
    display:inline-flex;align-items:center;gap:7px;text-decoration:none;
    color:#1f8f4e;font-size:13px;font-weight:600;
  }
  .topbar .pt-sep{color:var(--ink-soft);opacity:.5;}
  .topbar .pt-tel{
    color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:700;
  }
  .topbar .pt-wa:hover,.topbar .pt-tel:hover{color:var(--gold-deep);}
  .topbar .topbar-nav{
    order:6;flex-basis:auto;margin-left:auto;padding:0;height:44px;
    display:flex;align-items:center;flex-wrap:nowrap;gap:26px;
  }
  /* ⚠ 26/out: o botão verde FLUTUANTE desaparece aqui. A barra já leva o
     WhatsApp e o número à vista; dois no mesmo ecrã é um a mais. No
     telemóvel ele fica, porque lá a barra não tem espaço para o contacto —
     é a regra dele: a página lê o tamanho do ecrã e decide. */
  .wa-flutuante{display:none;}
  /* hierarquia: a NOTA é o que convence, a contagem é quem a sustenta */
  .topbar .nota-media{font-weight:700;}
  .topbar .nota-conta{font-weight:600;opacity:.75;}
}

/* ─────────────────────────────────────────────────────────────────────────
   O TELEMÓVEL (até 700px): uma linha, três riscas, e a CONTAGEM à vista.
   ─────────────────────────────────────────────────────────────────────────
   [stated] 13h25: "queremos que as pessoas sabem quantas pessoas já nos
   avaliaram, independentemente de serem poucas para já, pode não ser daqui
   a 2 meses." Logo a contagem NÃO se esconde no estreito.

   ⚠ MEDIDO: pôr "(127)" aos 500px roubava 33px e passava a CORTAR o nome da
   marca, que hoje aparece inteiro. Trocar a marca por uma contagem é um mau
   negócio — é a marca que paga as avaliações. Os 33px foram buscados onde
   não custam nada a quem olha:
       a palavra "Menu" sai, ficam as três riscas    −18px
       margens e intervalos mais justos              −12px
       logótipo 44→40 e nome 20→19px                 − 9px
   Resultado aos 500px: nome INTEIRO e barra a 61px (antes disto, 65).
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:700px){
  /* ⚠ height:auto é obrigatório: a regra base fixa 72px e ganhava a tudo o
     que eu poupasse nas margens. Foi o que me deu 72 onde eu media 61. */
  .topbar{height:auto;min-height:0;padding:10px 14px;gap:10px;}
  .topbar-right{gap:10px;}
  .topbar a.brand{gap:8px;min-width:0;}
  .topbar .brand{font-size:19px;}
  .topbar .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .topbar .brand-logo{width:40px;height:40px;}
  .topbar .topbar-menu-texto{display:none;}
  .topbar .topbar-menu{padding:9px 11px;}
  /* ⚠ E o NOME da língua sai, fica a bandeira e a setinha. Medido: aos 500px
     faltavam ainda 20px e era o nome da empresa que os pagava. Uma bandeira
     diz a língua sem uma palavra — e o botão mantém aria-label="Language"
     para quem usa leitor de ecrã. É a mesma troca da palavra "Menu". */
  .topbar .lang-dd-botao > span:not(.lang-dd-seta){display:none;}
  /* No estreito fica "★ 4,9 (127)" — o convite por palavras não cabe.
     ⚠ Mas SÓ quando há nota: sem avaliações, "Avalie-nos ⭐" é o único texto
     do link, e escondê-lo deixava um link vazio e invisível na barra. */
  .topbar .convite-topo.tem-nota .nota-sep,
  .topbar .convite-topo.tem-nota .convite-topo-curto{display:none;}
  .topbar .nota-media{font-weight:700;}
  .topbar .nota-conta{font-weight:600;opacity:.75;}
}

/* ─────────────────────────────────────────────────────────────────────────
   TELEMÓVEL ESTREITO (até 420px) — aqui a barra PARTE-SE, de propósito.
   ⚠ Não é o defeito que se andou a corrigir hoje: abaixo dos 421px não há
   largura para a marca, a nota e a língua na mesma linha, e cortar o nome da
   empresa é pior do que usar mais uma linha. A regra existia antes e mantém-se
   — o que saiu foi o `nowrap` que eu tinha forçado ENTRE os 421 e os 900.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:420px){
  .topbar{flex-wrap:wrap;row-gap:8px;}
  .topbar a.brand{flex:1 1 100%;}
}

/* ─────────────────────────────────────────────────────────────────────────
   ENTRE OS 701 E OS 820px — sai a palavra "WhatsApp", fica o ícone.
   ⚠ MEDIDO: a 701px o contacto e o menu não cabiam na mesma linha (faltavam
   26px) e a barra partia-se em TRÊS linhas, a 152px. Sem a palavra, sobram
   85px de folga e fica nas duas linhas, a 108px.
   ⚠ E o separador "·" sai COM ela: senão ficava pendurado entre o ícone e o
   número. É o mesmo erro que já me tinha apanhado hoje com o "★ 4,9 (127) ·"
   no telemóvel — um separador colado a um texto que desaparece.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width:701px) and (max-width:820px){
  .topbar .pt-wa-palavra,
  .topbar .pt-sep{display:none;}
  /* 7/nov/2026: com a Galeria no menu (mais uma entrada) os 20px já não cabiam a 701px — medido
     pela prova TESTES/menu-do-topo.mjs (barra a 152px). A 14px volta às duas linhas. */
  .topbar .topbar-nav{gap:14px;}
}
/* 7/nov/2026 — ENTRE OS 701 E OS 1023px, com a Galeria no menu: medido em 12 línguas, o francês,
   o finlandês, o espanhol e o italiano partiam a barra em TRÊS linhas (152px) — e o francês a 821px
   já partia antes da Galeria. Menu um pouco mais justo só nesta faixa; acima dos 1024px fica igual. */
@media (min-width:701px) and (max-width:1023px){
  .topbar .topbar-nav{gap:12px;}
  .topbar .topbar-nav a,.topbar .topbar-nav .nav-grupo-botao{font-size:12.5px;}
}
@media (min-width:701px) and (max-width:780px){
  .topbar .topbar-nav{gap:9px;}
  .topbar .topbar-nav a,.topbar .topbar-nav .nav-grupo-botao{font-size:12px;}
}

/* ─────────────────────────────────────────────────────────────────────────
   NO TELEMÓVEL (até 700px) — o contacto NÃO entra na barra.
   [stated] ele, 14h04: "se estivermos a falar no Android, telemóvel, já não
   há espaço e essas duas coisas têm que se manter onde elas estão". O botão
   verde flutuante e o número no rodapé ficam como sempre estiveram.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:700px){
  .topbar .topbar-quebra,
  .topbar .pt-contacto{display:none;}
  /* ⭐ E o menu abre à LARGURA TODA, ideia dele das 12h59: começa na esquerda,
     continua agarrado às três riscas que o abriram, e os alvos do dedo ficam
     maiores. Um painel encostado só a um lado descola do botão que o abriu. */
  .topbar-nav.aberto{
    left:12px;right:12px;min-width:0;
  }
}

/* ⭐ O aviso do ponto extremo, ao lado do PREÇO (26/out/2026).
   Ver a razão no js/transfer.js: ao lado da lista ele ficava dentro de um
   passo fechado e não se via. Aqui vê-se, e é aqui que a pergunta nasce. */
.aviso-ponto-extremo{
  margin:12px 0 0;padding:10px 12px;font-size:12.5px;line-height:1.5;
  color:var(--ink);background:#fbf6ec;
  border:1px solid var(--gold-deep,#b8893a);border-radius:6px;
}

/* Os dois botões da janela do concelho (26/out/2026). Em telemóvel empilham,
   com o "escolher a freguesia" em baixo — o polegar cai primeiro no que o
   Paulo prefere que ele faça, que é dizer de onde é. */
.modal-concelho-botoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px;}
.modal-concelho-botoes .btn,.modal-concelho-botoes .btn-secundario{width:auto;}
@media (max-width:480px){
  .modal-concelho-botoes{flex-direction:column-reverse;}
  .modal-concelho-botoes .btn,.modal-concelho-botoes .btn-secundario{width:100%;text-align:center;}
}

/* ⭐⭐ 30/out/2026 — AS FOTOGRAFIAS DAS FREGUESIAS, na página do artigo.
   [stated] *"um campo onde se possa pôr fotos (…) para que as pessoas também
   possam ter uma noção como é que é a freguesia"* · *"as fotos serão minhas."*
   ⚠ Uma coluna no telemóvel, duas a partir dos 700px. Não há três: a página
     do artigo tem 820px de largura e três fotos lado a lado ficavam selos. */
.diario-fotos{
  display:grid;grid-template-columns:1fr;gap:18px;margin:28px 0;
}
@media (min-width:700px){ .diario-fotos{ grid-template-columns:1fr 1fr; } }

.diario-foto{ margin:0; }
.diario-foto img{
  display:block;width:100%;height:auto;border-radius:10px;
  /* ⚠ O fundo cinzento não é decoração: é o que o visitante vê no lugar da
     foto enquanto ela carrega. Sem ele, a página pisca em branco e o texto
     salta quando a imagem chega. */
  background:#e9e7e2;
}
.diario-foto figcaption{
  display:block;margin-top:7px;font-size:13.5px;line-height:1.55;
  color:var(--t-ink,#2b2b2b);opacity:.78;
}
/* O crédito fica numa linha sua, mais pequeno — é devido a quem tirou a
   foto, mas não é o que o visitante veio ler. */
.diario-foto .foto-credito{
  display:block;margin-top:3px;font-size:12px;opacity:.72;
  color:inherit;text-decoration:none;
}
.diario-foto a.foto-credito:hover{ text-decoration:underline; }

/* ⭐⭐ O BOTÃO DE VOLTAR FLUTUANTE — 31/out/2026
   [stated] Ele, por voz, 08h09: *"um botão voltar para trás flutuante, à
   medida que ele vai descendo e vai lendo, se já não quiser mais e quiser
   voltar para trás"*.
   ⚠ FICA À ESQUERDA de propósito: o botão verde do WhatsApp vive à direita
     (.wa-flutuante, right:18px). Dois do mesmo lado tapavam-se no telemóvel.
   ⚠ E acompanha as MESMAS alturas do WhatsApp: 76px no telemóvel e 96px
     quando a barra do preço está no ar — senão um deles ficava por baixo
     dela. Se um dia a barra mudar de altura, mudam-se os dois juntos. */
.voltar-flutuante{
  position:fixed;bottom:18px;z-index:900;
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 14px 10px 11px;border-radius:2px;
  background:var(--paper,#faf8f3);color:var(--ink,#182229);
  border:1px solid var(--line,#e2dccc);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  font:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;
  transition:transform .12s ease;
}
.voltar-flutuante-esquerda{left:18px;}
.voltar-flutuante-direita{right:18px;}
.voltar-flutuante:hover{transform:translateY(-2px);}
.voltar-flutuante:focus-visible{outline:2px solid var(--gold,#c69a4e);outline-offset:3px;}
/* ⚠ display:inline-flex ganha ao atributo hidden — sem esta linha o botão
   nascia visível no topo, que é precisamente o que se queria evitar. */
.voltar-flutuante[hidden]{display:none;}
@media (max-width:700px){
  .voltar-flutuante{bottom:76px;font-size:13px;padding:9px 12px 9px 9px;}
  .voltar-flutuante-esquerda{left:14px;}
  .voltar-flutuante-direita{right:14px;}
}
@media (max-width:900px){
  body.com-barra-preco .voltar-flutuante{bottom:96px;}
}
@media (prefers-reduced-motion: reduce){ .voltar-flutuante{transition:none;} }
@media print{ .voltar-flutuante{display:none;} }

/* ⭐ A GALERIA — 7/nov/2026 (galeria.html + js/galeria.js). Grelha que se adapta à largura:
   2 colunas no telemóvel, até 4 no computador. A fotografia em grande ocupa o ecrã todo. */
.galeria-pagina{max-width:1180px;margin:0 auto;padding:40px 20px 64px;box-sizing:border-box;}
.galeria-pagina h1{font-size:30px;margin:6px 0 8px;}
.galeria-intro{max-width:62ch;font-size:15px;color:var(--ink-soft);line-height:1.6;margin:0 0 24px;}
.galeria-grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;}
.galeria-miniatura{display:block;padding:0;border:0;background:#eee8dc;border-radius:10px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3;}
.galeria-miniatura img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.galeria-miniatura:hover img,.galeria-miniatura:focus-visible img{transform:scale(1.04);}
.galeria-vazia{font-size:15px;color:var(--ink-soft);padding:28px 0;}
.galeria-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.galeria-cta a{width:auto;flex:0 1 auto;padding-left:28px;padding-right:28px;text-align:center;}
@media (max-width:600px){.galeria-cta a{flex:1 1 100%;}}
.galeria-grande{position:fixed;inset:0;z-index:1000;background:rgba(15,15,15,.92);display:flex;align-items:center;justify-content:center;}
.galeria-grande[hidden]{display:none;}
.galeria-grande img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.galeria-fechar,.galeria-seta{position:absolute;border:0;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;border-radius:50%;width:48px;height:48px;font-size:30px;line-height:1;display:flex;align-items:center;justify-content:center;}
.galeria-fechar{top:14px;right:14px;}
.galeria-anterior{left:14px;top:50%;transform:translateY(-50%);}
.galeria-seguinte{right:14px;top:50%;transform:translateY(-50%);}
.galeria-fechar:hover,.galeria-seta:hover{background:rgba(255,255,255,.28);}
body.galeria-aberta{overflow:hidden;}
@media (max-width:600px){
  .galeria-grelha{grid-template-columns:repeat(2,1fr);gap:6px;}
  .galeria-pagina{padding:28px 16px 48px;}
  .galeria-pagina h1{font-size:24px;}
  .galeria-seta{width:40px;height:40px;font-size:26px;}
}

/* 8/nov/2026 — separador Meio dia / Dia inteiro (roteiros.html) e selo do dia inteiro.
   Quem liga o separador é o js/roteiros-lista.js. */
.separador-duracao{display:flex;gap:8px;flex-wrap:wrap;max-width:1100px;margin:18px auto 0;padding:0 16px;}
.separador-duracao[hidden]{display:none;}
.separador-duracao button{flex:1 1 200px;border:1px solid #cfdbe3;background:#fff;color:#0f3b57;border-radius:10px;padding:10px 14px;font:inherit;font-weight:600;cursor:pointer;text-align:left;}
.separador-duracao button small{display:block;font-weight:400;color:var(--ink-soft,#5b6b76);font-size:14.5px;margin-top:4px;font-family:'Work Sans','Helvetica Neue',Arial,sans-serif;}
/* 10/nov/2026 — ordem dele: «Meio dia / Dia inteiro» mais destacados, na fonte e no tamanho.
   Passam à letra dos títulos (a mesma dos nomes dos passeios) e maiores que o nome do cartão,
   porque é a primeira escolha que o cliente faz. */
/* 10/nov/2026 (2.ª volta) — a escolha SUBIU para o cabeçalho, logo a seguir ao texto de entrada,
   com a pergunta «Quanto tempo tem?» e as horas em grande. Ordem dele: «passa despercebido em
   comparação com o resto». O número lê-se num relance; a palavra vai por baixo. */
.escolha-duracao{margin:20px 0 6px;max-width:640px;}
.escolha-duracao[hidden]{display:none;}
.escolha-duracao-pergunta{font-family:var(--fonte-titulos);font-weight:700;font-size:22px;color:#0f3b57;margin:0 0 10px;}
.escolha-duracao .separador-duracao{margin:0;padding:0;flex-wrap:nowrap;gap:10px;}
.escolha-duracao .separador-duracao button{flex:1 1 0;text-align:center;padding:14px 8px;border-width:2px;}
.separador-duracao .sep-horas{display:block;font-family:var(--fonte-titulos);font-weight:700;font-size:40px;line-height:1;}
@media (prefers-color-scheme: dark){ .escolha-duracao-pergunta{color:#e6eef3;} }
.separador-duracao button[aria-selected="true"]{background:#0f3b57;color:#fff;border-color:#0f3b57;}
.separador-duracao button[aria-selected="true"] small{color:#dbe7ee;}
.roteiros-lista-pagina .servico-card[hidden]{display:none !important;}
.selo-dia-inteiro{display:inline-block;background:#fff3d6;color:#7a4b00;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600;}
.stop-row.almoco-row span:first-child{font-weight:600;}
@media (prefers-color-scheme: dark){
  .separador-duracao button{background:#14232d;color:#e6eef3;border-color:#2c3e4a;}
  .separador-duracao button[aria-selected="true"]{background:#e6eef3;color:#0f3b57;}
  .separador-duracao button[aria-selected="true"] small{color:#33505f;}
}

/* ⭐ 10/nov/2026 — PÁGINA /en/azores-private-tour (azores-private-tour.html).
   Só o que a página tem de seu: a lista de vantagens e as avaliações. Os
   cartões dos tours usam as classes da página dos roteiros, tal e qual. */
.azores-private-tour .apt-pontos{padding-left:20px;line-height:1.6;}
.azores-private-tour .apt-pontos li{margin:4px 0;}
.azores-private-tour .apt-google[hidden],
.azores-private-tour .apt-avaliacoes[hidden]{display:none;}
.azores-private-tour .apt-avaliacoes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:12px 0;}
.azores-private-tour .apt-avaliacao{margin:0;padding:12px 14px;border:1px solid rgba(0,0,0,.12);border-radius:8px;background:rgba(255,255,255,.6);}
.azores-private-tour .apt-avaliacao p{margin:0 0 6px;}
.azores-private-tour .apt-avaliacao footer{font-size:13px;opacity:.75;}
@media (prefers-color-scheme:dark){
  .azores-private-tour .apt-avaliacao{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05);}
}

/* ⭐ 10/nov/2026 — a linha do passeio no fim do artigo do Diário (js/diario-artigo.js,
   htmlTourDoArtigo). Discreta de propósito: a página continua a ser "só o artigo". */
.diario-tour{margin:18px 0 6px;padding:10px 0;border-top:1px solid rgba(0,0,0,.1);font-size:15px;}
@media (prefers-color-scheme:dark){ .diario-tour{border-top-color:rgba(255,255,255,.15);} }

/* ═══════════════════════════════════════════════════════════════════════
   ⭐ 11/nov/2026 — A COLUNA DO SITE: tudo enquadrado, seja qual for a janela
   ───────────────────────────────────────────────────────────────────────
   [stated] Paulo, ao ver os roteiros com o browser maximizado: "parece um
   trabalho de criança — à medida que se redimensiona tudo deveria ficar
   enquadrado"; "se há mais espaço usa-se, centra-se o promocional";
   "adiciona-se mais passeios"; "conforme a largura da janela que o cliente
   está a usar"; "e deverá ser assim para todo o site".
   O QUE FAZ:
   - O topo, os cabeçalhos e os blocos principais de cada página alinham pela
     MESMA coluna centrada. A coluna cresce com a janela até --coluna-larga;
     acima disso sobra margem igual dos dois lados (nada encostado à esquerda).
   - As grelhas de cartões (roteiros, serviços, frota) metem tantos cartões
     por linha quantos cabem: ~5 num ecrã grande, 4 num portátil, 1 no telemóvel.
   - A faixa promocional (.barra-campanha) fica centrada.
   - As páginas que já tinham coluna própria de 1180px (diário, transfer,
     galeria) mudam --coluna-larga para 1180 e o topo alinha por elas.
   - As páginas de leitura (textos legais, sobre nós, avaliações) mantêm a
     largura estreita de leitura — já estavam centradas.
   Mudar a largura máxima = mudar --coluna-larga, mais nada (regra 3.2).
   Abaixo de 901px valem as regras de telemóvel/tablet que já havia, salvo o
   recuo dos roteiros, que passa a bater com o do cabeçalho (16px).
   Regras de ouro seguidas: 3.1 (este rasto), 3.2 (largura numa variável),
   3.4 (uma coluna para todas as páginas), 6.1 (provado a 1920/1366/1000/390).
   ═══════════════════════════════════════════════════════════════════════ */
:root{--coluna-larga:1600px;--margem-coluna:32px;}
body:has(.diario), body:has(#folha-toda), body:has(.galeria-pagina){--coluna-larga:1180px;}
.barra-campanha{margin-left:auto;margin-right:auto;}
@media (min-width:901px){
  .topbar, .page-header, body .hero, body.fundo-hero .hero, .site-footer{ /* "body .hero" ganha ao <style> do index.html */
    padding-left:max(var(--margem-coluna), calc((100% - var(--coluna-larga)) / 2 + var(--margem-coluna)));
    padding-right:max(var(--margem-coluna), calc((100% - var(--coluna-larga)) / 2 + var(--margem-coluna)));
  }
  .servicos, .roteiros-lista-pagina, .frota, .layout, .roteiros-prontos{
    max-width:var(--coluna-larga);margin-left:auto;margin-right:auto;
  }
  /* a faixa de ajuda (css/ajuda.css): do tamanho do texto, encostada à coluna e não ao meio */
  body .ajuda-faixa{ /* "body" porque o ajuda.css é posto pelo js DEPOIS deste ficheiro */
    width:fit-content;max-width:calc(100% - 2 * var(--margem-coluna));
    margin-left:max(var(--margem-coluna), calc((100% - var(--coluna-larga)) / 2 + var(--margem-coluna)));margin-right:auto;
  }
  .boletim-cartao{
    max-width:none;
    margin-left:max(var(--margem-coluna), calc((100% - var(--coluna-larga)) / 2 + var(--margem-coluna)));
    margin-right:max(var(--margem-coluna), calc((100% - var(--coluna-larga)) / 2 + var(--margem-coluna)));
  }
}
@media (max-width:900px){
  .roteiros-lista-pagina{padding-left:16px;padding-right:16px;}
}