/* =====================================================================
   Douro Aventura — folha de estilo única
   Paleta tirada do logótipo: azul-marinho, dourado, e o verde-água
   do rio das fotografias.
   ===================================================================== */

:root {
  /* superfícies */
  --ground:      #F4F6F6;
  --surface:     #FFFFFF;
  --surface-alt: #E8ECEC;
  --line:        #D3DADA;
  --line-soft:   #E3E8E8;

  /* texto */
  --ink:         #17233F;
  --ink-soft:    #3D4A66;
  --muted:       #64717F;
  --on-navy:     #EEF2F6;

  /* marca */
  --navy:        #1E2E6B;
  --navy-deep:   #16234F;
  --gold:        #A8801A;
  --gold-bright: #C9A227;
  --river:       #2C7266;
  --river-soft:  #DEEBE7;
  --alert:       #9C3E22;
  --alert-soft:  #F7E3DB;

  --shadow-sm: 0 1px 2px rgba(23, 35, 63, .07);
  --shadow:    0 2px 4px rgba(23, 35, 63, .06), 0 12px 28px -14px rgba(23, 35, 63, .22);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Lora", Georgia, serif;
  --f-ui:      "Archivo", "Helvetica Neue", Arial, sans-serif;

  --radius: 4px;
  --wrap: 1180px;

  /* Escala tipográfica.
     Antes havia onze tamanhos entre 11.5 e 16.5 px, quase todos a um
     ponto de distância uns dos outros — o que não é hierarquia, é ruído.
     Ficam cinco degraus, e a diferenciação restante vem do peso e da
     cor, não de meio pixel. */
  --t-micro: 12px;   /* rótulos em maiúsculas, notas de rodapé */
  --t-small: 14px;   /* interface secundária, legendas, dicas */
  --t-body:  16px;   /* corpo e campos */
  --t-lead:  18px;   /* entradas e destaques dentro do corpo */
  --t-sub:   21px;   /* subtítulos */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0D1526;
    --surface:     #141E33;
    --surface-alt: #1B2740;
    --line:        #2A3853;
    --line-soft:   #202C45;
    --ink:         #E9EEF5;
    --ink-soft:    #BFCADC;
    --muted:       #8C9AB0;
    --on-navy:     #EEF2F6;
    --navy:        #24376F;
    --navy-deep:   #0F1A38;
    --gold:        #D9B44A;
    --gold-bright: #E5C463;
    --river:       #5FAE9C;
    --river-soft:  #16302B;
    --alert:       #E08663;
    --alert-soft:  #34190F;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow:    0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -14px rgba(0, 0, 0, .7);
  }
}

:root[data-theme="dark"] {
  --ground:      #0D1526;
  --surface:     #141E33;
  --surface-alt: #1B2740;
  --line:        #2A3853;
  --line-soft:   #202C45;
  --ink:         #E9EEF5;
  --ink-soft:    #BFCADC;
  --muted:       #8C9AB0;
  --on-navy:     #EEF2F6;
  --navy:        #24376F;
  --navy-deep:   #0F1A38;
  --gold:        #D9B44A;
  --gold-bright: #E5C463;
  --river:       #5FAE9C;
  --river-soft:  #16302B;
  --alert:       #E08663;
  --alert-soft:  #34190F;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -14px rgba(0, 0, 0, .7);
}

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

html { scroll-behavior: smooth; }

/* --------------------------------------------- superfícies do browser ---
   As partes que não desenhámos também vestem o site: seleção, cursor,
   barra de deslocamento e caixas de verificação vêm com azuis de sistema
   que não pertencem a paleta nenhuma. */

::selection { background: var(--gold-bright); color: #16234F; }

:root {
  accent-color: var(--river);          /* checkboxes e inputs nativos */
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 6px;
  border: 3px solid var(--ground);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

input, textarea, select { caret-color: var(--river); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 780px; }

/* ---------------------------------------------------------------- type */

h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; text-wrap: balance; }

h1 {
  font-weight: 800;
  font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}
h2 {
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -.018em;
}
h3, .h-sub { font-weight: 700; font-size: 1.15rem; line-height: 1.25; letter-spacing: -.01em; }

/* .h-sub existe porque nível e tamanho são coisas diferentes: estas
   secções são filhas diretas do h1 e por isso têm de ser h2, mas leem-se
   à escala de subtítulo. Sem isto o leitor de ecrã salta de h1 para h3. */
h2.h-sub { font-family: var(--f-display); text-wrap: balance; }

/* h2 com tamanho e espaçamento específicos para secções */
h2.h2-section { font-size: var(--t-sub); }

p { margin: 0 0 1rem; }
.prose { font-family: var(--f-body); font-size: 1.03rem; line-height: 1.72; color: var(--ink-soft); }
.prose p { max-width: 64ch; }
.lead {
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* Não há kickers. Um rótulo em maiúsculas por cima de um título repete o
   título e rouba-lhe o arranque. O que sobrevive são elementos que fazem
   trabalho a sério: navegação, localização e estado. */

/* Migalhas — navegação verdadeira, com semântica e destino. */
.breadcrumb {
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.breadcrumb a { color: var(--muted); text-decoration-color: transparent; }
.breadcrumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
.breadcrumb span[aria-hidden] { color: var(--line); }
.breadcrumb [aria-current] { color: var(--ink-soft); }

/* Onde ficamos — vive junto às ações do hero, não por cima do título. */
.place {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 500;
  color: #C2CDDE;
  margin-top: 26px;
}
.place::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-bright);
  flex: none;
}

/* Estado — para a confirmação do pedido. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--f-ui);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--river);
  background: var(--river-soft);
  border-radius: 999px;
  padding: 7px 15px 7px 12px;
  margin-bottom: 18px;
}
.status svg { flex: none; }

a {
  color: var(--river);
  text-decoration-color: color-mix(in srgb, var(--river) 38%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-color .15s;
}
a:hover { text-decoration-color: currentColor; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

.tabular { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--navy); color: var(--on-navy); }
.btn-primary:hover { background: var(--navy-deep); }
.btn-gold { background: var(--gold-bright); color: #16234F; }
.btn-gold:hover { filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost-light { color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-ghost-light:hover { border-color: rgba(255, 255, 255, .8); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------- cabeçalho */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: none; }
.brand img { width: 46px; }
.brand span {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-body);
  letter-spacing: -.01em;
  line-height: 1.1;
  max-width: 6.5em;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 11px;
  border-radius: var(--radius);
}
.nav a:hover { background: var(--surface-alt); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.nav-lang { font-size: var(--t-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.cart-link { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.cart-count {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--gold-bright);
  color: #16234F;
  font-size: var(--t-micro);
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.cart-count.is-on { display: inline-flex; }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    min-height: 44px;
    font-family: var(--f-ui);
    font-weight: 600;
    font-size: var(--t-small);
    color: var(--ink);
    cursor: pointer;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 8px 22px 16px;
    margin: 0;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 4px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; background: var(--navy-deep); color: var(--on-navy); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
/* O véu sobre a fotografia. Em ecrã largo é diagonal, para deixar o rio
   respirar à direita; em ecrã estreito o texto ocupa toda a largura e a
   diagonal deixava o parágrafo em cima da água clara — aí passa a
   vertical, com chão suficiente para o texto se ler sempre. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(15, 26, 56, .93) 0%, rgba(15, 26, 56, .74) 45%, rgba(15, 26, 56, .3) 100%);
}

@media (max-width: 900px) {
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(15, 26, 56, .55) 0%, rgba(15, 26, 56, .82) 38%, rgba(15, 26, 56, .9) 100%);
  }
}
.hero .wrap { position: relative; padding-top: 92px; padding-bottom: 92px; }
@media (max-width: 640px) {
  .hero .wrap { padding-top: 60px; padding-bottom: 64px; }
  .hero .lead { font-size: 1.02rem; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { width: 100%; }
}
.hero h1 { color: #fff; max-width: 15ch; }
.hero .lead { color: #D6DEEA; margin-top: 18px; }
.hero .eyebrow { color: var(--gold-bright); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.page-head { padding: 54px 0 8px; }
.page-head h1 { max-width: 18ch; }
.page-head .lead { margin-top: 14px; }

/* --------------------------------------------------------------- secções */

section { padding: 56px 0; }
.section-head { margin-bottom: 26px; }
.section-head p { color: var(--muted); max-width: 60ch; margin: 8px 0 0; }

/* --------------------------------------------------------------- cartões */

.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); }
.grid > * { min-width: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card-media { aspect-ratio: 4 / 3; background: var(--surface-alt); position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Fotografia que o cliente ainda não enviou.
   Sem tracejado diagonal: a hachura é decoração a fingir de conteúdo, e
   aqui o que se quer é dizer a verdade — não há foto ainda. Superfície
   lisa, rótulo curto em maiúsculas, explicação em caixa normal para se
   poder mesmo ler. */
.no-photo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.45;
  max-width: 34ch;
  margin: 0 auto;
}
.no-photo b {
  display: block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card-body { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-body h3 a { color: inherit; text-decoration: none; }
.card-body h3 a:hover { color: var(--river); }
.card-desc { font-family: var(--f-body); font-size: var(--t-small); line-height: 1.55; color: var(--muted); margin: 0; flex: 1; }

.price { font-family: var(--f-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.price small { font-family: var(--f-ui); font-size: var(--t-micro); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.price-consulta { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; color: var(--river); }

.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

.tag {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  background: var(--river-soft);
  color: var(--river);
}
.tag-gold { background: rgba(201, 162, 39, .16); color: var(--gold); }

/* --------------------------------------------------------- a sequência ---
   Como funciona um pedido. Aqui a ordem é informação — 1 antes de 2 antes
   de 3 — e por isso os números ficam. Não são cartões: é uma linha que se
   percorre, com o passo do pagamento visivelmente no fim. */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: passo;
  border-top: 1px solid var(--line);
}
.steps > li {
  counter-increment: passo;
  position: relative;
  padding: 26px 26px 4px 0;
}
.steps > li::before {
  content: counter(passo);
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--line);
  margin-bottom: 14px;
  transition: color .2s;
}
/* Cada passo assinala o seu início na régua. O último é o do pagamento —
   o que interessa mesmo reter — e por isso é o que fica dourado. */
.steps > li::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--line);
}
.steps > li:last-child::before,
.steps > li:last-child::after { background: var(--gold-bright); color: var(--gold); }
.steps > li:last-child::before { background: none; }

.steps h3 { font-size: 1.06rem; margin-bottom: 7px; }
.steps p {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 30ch;
}
.steps > li:last-child h3 { color: var(--gold); }

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps > li { padding-right: 20px; }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .steps > li {
    padding: 18px 0 18px 40px;
    border-top: 1px solid var(--line);
  }
  .steps > li::before {
    position: absolute;
    left: 0;
    top: 18px;
    margin: 0;
  }
  .steps > li::after { display: none; }
  .steps p { max-width: none; }
}

/* ---------------------------------------------------------------- avisos */

/* Avisos.
   Sem barra colorida à esquerda: é um adereço, e num site em que o aviso
   mais importante é "não pague ainda" o peso tem de vir do tipo e da
   superfície, não de um risco de 3px. */

.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 22px 0;
}
.notice > :last-child { margin-bottom: 0; }
.notice h2, .notice h3 {
  font-size: 1rem;
  margin-bottom: 7px;
  color: var(--ink);
}
.notice p { font-size: var(--t-body); color: var(--ink-soft); }

/* O aviso de não pagar. É a peça que evita transferências antecipadas,
   por isso é a única do corpo da página com tamanho de título. */
.notice-alert {
  background: var(--alert-soft);
  border-color: color-mix(in srgb, var(--alert) 32%, transparent);
  padding: 22px 24px;
}
.notice-alert h2, .notice-alert h3 {
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--alert);
  margin-bottom: 9px;
}
.notice-alert p { color: var(--ink); font-size: var(--t-body); }
.notice-alert p strong { color: var(--alert); }

.notice-gold {
  background: color-mix(in srgb, var(--gold-bright) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--gold-bright) 34%, transparent);
}

/* placeholder de dado em falta — deliberadamente visível */
/* Marcador de dado por preencher. Deliberadamente feio: existe para ser
   impossível publicar sem dar por ele. */
.todo {
  display: inline-block;
  background: var(--alert-soft);
  color: var(--alert);
  border: 1px dashed color-mix(in srgb, var(--alert) 55%, transparent);
  border-radius: 2px;
  padding: 1px 7px;
  font-family: var(--f-ui);
  font-size: .84em;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ------------------------------------------------------------- formulários */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 17px; }
.field label { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--t-micro); color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: var(--f-ui);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 13px;
  width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:invalid:not(:placeholder-shown) { border-color: var(--alert); }
.field-row { display: grid; gap: 0 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.check input { margin-top: 4px; flex: none; width: 17px; height: 17px; }
.check label { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; }

.req { color: var(--alert); }

/* ---------------------------------------------------------------- tabelas */

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: var(--t-body); }
th {
  text-align: left;
  font-family: var(--f-ui);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 15px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 13px 15px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------- carrinho */

.cart-layout { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
/* Sem isto os filhos ficam com min-width:auto, crescem até ao conteúdo, e o
   overflow-x do .table-scroll nunca chega a atuar — a página transborda. */
.cart-layout > * { min-width: 0; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 88px;
  box-shadow: var(--shadow-sm);
}
.summary-checkout { position: static; }
.summary h2, .summary h3 { font-size: 1rem; margin-bottom: 14px; }
.summary-row { display: flex; justify-content: space-between; gap: 14px; font-size: var(--t-body); padding: 7px 0; }
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 14px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
}

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.qty button {
  width: 32px; height: 34px;
  background: var(--surface);
  border: 0;
  color: var(--ink);
  font-size: var(--t-lead);
  font-family: var(--f-ui);
  cursor: pointer;
  line-height: 1;
}
.qty button:hover { background: var(--surface-alt); }
.qty span { min-width: 34px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; font-size: var(--t-body); }

/* Em ecrãs de toque os +/− sobem para 44px — abaixo disso falha-se o alvo. */
@media (pointer: coarse) {
  .qty button { width: 44px; height: 44px; }
}

.link-remove {
  background: none; border: 0; padding: 0;
  color: var(--muted); font-family: var(--f-ui); font-size: var(--t-small);
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.link-remove:hover { color: var(--alert); }

.empty { text-align: center; padding: 56px 20px; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 10px; }

/* ------------------------------------------------------- caixa de pagamento */

.pay {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 26px 0;
  overflow: hidden;
}
.pay > summary {
  padding: 16px 19px;
  cursor: pointer;
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--ink-soft);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pay > summary::-webkit-details-marker { display: none; }
.pay > summary::before { content: "▸"; color: var(--muted); font-size: var(--t-small); }
.pay[open] > summary::before { content: "▾"; }
.pay-body { padding: 4px 19px 20px; border-top: 1px solid var(--line-soft); }
.pay-line { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.pay-line:last-child { border-bottom: 0; }
.pay-key { font-size: var(--t-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); min-width: 60px; }
.pay-val { font-family: var(--f-ui); font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.pay-note { font-size: var(--t-small); color: var(--muted); width: 100%; margin: 2px 0 0; }

/* ---------------------------------------------------------------- rodapé */

.footer { background: var(--navy-deep); color: #C9D3E2; margin-top: 60px; }
.footer a { color: #E3E9F2; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-main { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 48px 0 34px; }
.footer h2 {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 13px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-small); }
.footer-brand img { width: 78px; margin-bottom: 12px; }
.footer-brand p { font-size: var(--t-small); line-height: 1.55; color: #9FAEC4; max-width: 30ch; }

.prr {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 26px 0 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.prr img { width: 100%; max-width: 460px; }
.prr p { font-size: var(--t-micro); line-height: 1.55; color: #9FAEC4; margin: 0; max-width: 66ch; }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: 18px 0 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: var(--t-micro);
  color: #8C9BB3;
}

/* ------------------------------------------------------------ utilitários */

.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Margens de utilidade */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 22px; }
.mb-4 { margin-bottom: 28px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; }
.mt-4 { margin-top: 28px; }
.pt-1 { padding-top: 26px; }
.py-5 { padding: 80px 0; }

/* Tipografia de utilidade */
.text-center { text-align: center; }
.text-small-muted { font-size: var(--t-small); color: var(--muted); }
.text-body-soft { font-size: var(--t-body); color: var(--ink-soft); }
/* Email longo numa coluna estreita: parte onde for preciso em vez de
   transbordar. Só isso — o tamanho vem de quem o contém (.facts dd), que
   tem mais especificidade; declará-lo aqui seria uma regra morta, como
   era o .92rem que aqui estava antes. */
.text-break { word-break: break-all; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink); padding: 12px 18px;
}
.skip:focus { left: 0; }

.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gallery img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.facts div { background: var(--surface); padding: 15px 17px; }
.facts dt { font-size: var(--t-micro); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.facts dd { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 17px 0; cursor: pointer; font-family: var(--f-display);
  font-weight: 700; font-size: 1.03rem; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--river); font-size: 1.4rem; font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 0 18px; font-family: var(--f-body); color: var(--ink-soft); max-width: 64ch; }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ movimento ---
   Um momento só, à chegada: o hero assenta. O estado final é o estado por
   omissão — se a animação não correr, a página está certa à mesma. */

@media (prefers-reduced-motion: no-preference) {
  .hero h1,
  .hero .lead,
  .hero-actions,
  .hero .place {
    animation: assentar .9s cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .hero h1        { animation-delay: .04s; }
  .hero .lead     { animation-delay: .13s; }
  .hero-actions   { animation-delay: .22s; }
  .hero .place    { animation-delay: .30s; }

  /* a fotografia aproxima-se muito devagar, sem chamar a atenção */
  .hero-media img { animation: aproximar 1.6s cubic-bezier(.16, 1, .3, 1) backwards; }
}

@keyframes assentar {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
}

@keyframes aproximar {
  from { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ------------------------------------------------------ banner de cookies */

.cookies {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 90;
  max-width: 620px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: none;
}
.cookies.is-on { display: block; }
.cookies h3 { font-size: 1rem; margin-bottom: 6px; }
.cookies p { font-size: var(--t-small); color: var(--ink-soft); margin-bottom: 14px; max-width: 60ch; }
.cookies .row { gap: 10px; }
.cookies .btn { padding: 10px 18px; font-size: var(--t-small); }
.cookies .cookies-mais { margin-left: auto; }

/* Em telemóvel o banner tapava meio ecrã. Encolhe o texto e mantém os três
   botões na mesma linha — recusar continua tão acessível como aceitar. */
@media (max-width: 560px) {
  .cookies { left: 10px; right: 10px; bottom: 10px; padding: 15px 16px; }
  .cookies h3 { font-size: .95rem; }
  .cookies p { font-size: var(--t-small); line-height: 1.5; margin-bottom: 12px; }
  .cookies .row { gap: 8px; flex-wrap: nowrap; }
  .cookies .btn { padding: 9px 12px; font-size: var(--t-small); flex: 1 1 auto; }
  .cookies .cookies-mais { flex: 0 0 auto; margin-left: 0; }
}