/* Hallmark · shape: Catalogue (ruled list with a picker; draw 5688dc's Conversational FAQ swapped, a pick-3 list is not a Q&A) · genre: editorial · theme: Ink (by request, seed 5688dc) · redesign: full
 * hero: Settled, headline left, entry well right · nav: bar · footer: colophon columns · imagery: none (real flags, no photographs) · signature: three slots that fill with flags as you pick · ink: paper, accent is the Jahecar red #b60519 in place of teal
 * axes: light/grotesk-sans/chromatic-red · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the list is long by content (42 kept rows), so it runs in two columns under one ink rule */
@import url("./tokens.css");
@import url("./base.css");

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }
.btn--block { width: 100%; }
.btn:disabled { background: var(--color-paper-3); border-color: var(--color-rule); color: var(--color-muted); cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.tag { display: inline-flex; align-items: center; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-tag); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; vertical-align: middle; background: var(--color-paper-3); color: var(--color-ink); }
.tag--in { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.tag--on { background: var(--color-ink); color: var(--color-paper); }
.tag--out { background: transparent; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); color: var(--color-muted); }

.cookies { background: var(--color-paper-3); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.cookies-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-xs); }
.cookies .btn { min-height: 36px; padding-block: var(--space-xs); }
.cookies a { font-weight: 600; }

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav-in { display: flex; align-items: center; gap: var(--space-lg); min-height: 64px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; }
.nav-links { display: flex; gap: var(--space-lg); margin-inline: auto; }
.nav-links a { text-decoration: none; padding-block: var(--space-xs); border-bottom: 2px solid transparent; transition: border-color var(--dur-micro) var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current] { border-bottom-color: var(--color-accent); }
.lang select { min-height: 40px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper-2); color: var(--color-ink); font-weight: 600; cursor: pointer; }

.stage { padding-bottom: var(--space-xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: start; }
.stage-side { position: sticky; top: calc(var(--nav-h, 64px) + var(--space-lg)); margin-top: var(--space-2xl); }
.hero { padding-block: var(--space-2xl) var(--space-xl); }
.hero-text { display: grid; gap: var(--space-lg); justify-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }

.well { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.entry { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.entry-label { font-size: var(--text-sm); color: var(--color-muted); }
.figure.big { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display); letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; margin-top: calc(var(--space-sm) * -1); }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.slot { display: grid; place-items: center; align-content: center; gap: var(--space-2xs); min-height: 84px; padding: var(--space-xs); border: var(--rule-hair) dashed var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); text-align: center; font-size: var(--text-sm); font-weight: 600; }
.slot.is-full { border-style: solid; border-color: var(--color-ink); }
.slot-n { font-size: var(--text-xl); font-weight: 700; color: var(--color-rule); }
.slot-flag { width: 32px; height: 24px; border-radius: 3px; background-size: contain; box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); }
.slot-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; font-size: var(--text-sm); line-height: 1.45; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.consent a { font-weight: 600; }
.share-note { margin-left: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.sponsor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); border-block: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.sponsor-label { color: var(--color-muted); }
.sponsor-link { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 600; text-decoration: none; }
.sponsor-link:hover span { text-decoration: underline; }
.sponsor-link.has-logo .sponsor-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sponsor-logo { width: auto; max-width: 96px; height: 28px; object-fit: contain; }
.sponsor.is-new { animation: sponsor-in var(--dur-short) var(--ease-out); }
@keyframes sponsor-in { from { opacity: 0; } to { opacity: 1; } }
.count { font-size: var(--text-sm); color: var(--color-muted); }
.field { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; }
.field input, .search input { width: 100%; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-weight: 400; }
.field input::placeholder, .search input::placeholder { color: var(--color-muted); }
.field input:hover, .search input:hover { border-color: var(--color-muted); }
.field input:focus-visible, .search input:focus-visible { outline-offset: 0; border-color: var(--color-focus); }

.steps { padding-block: var(--space-xl) var(--section-gap-s); }
.steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.steps-list li { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.steps-list .name { align-items: center; }
.step-n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display-s); letter-spacing: var(--tracking-display); line-height: 1; }

.ranking { padding-bottom: var(--section-gap-s); }
.rank-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.meta { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.search-bar { position: sticky; top: var(--nav-h, 64px); z-index: var(--z-sticky); padding-block: var(--space-sm); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.search { display: block; width: 100%; }
.list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.row { position: relative; display: grid; grid-template-columns: 3.25rem 2rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-sm); padding: var(--space-md) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); transition: background-color var(--dur-micro) var(--ease-out); }
.row:hover { background: var(--color-paper-2); }
.row.is-home { box-shadow: inset 3px 0 0 var(--color-ink); }
.row.is-picked { background: var(--color-accent-soft); }
.rank { font-weight: 700; font-size: var(--text-lg); line-height: 1.3; }
.flag { width: 32px; height: 24px; margin-top: var(--space-2xs); border-radius: 3px; background-size: contain; box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); }
.body { display: grid; gap: var(--space-2xs); min-width: 0; }
.name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.body h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.body p { font-size: var(--text-sm); color: var(--color-ink-2); }
.pick { position: static; white-space: nowrap; min-height: 36px; padding: var(--space-2xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.pick::after { content: ""; position: absolute; inset: 0; }
.pick:hover { border-color: var(--color-ink); }
.pick:focus-visible { outline-offset: -2px; }
.pick:disabled { color: var(--color-muted); border-style: dashed; cursor: not-allowed; }
.pick:disabled:hover { border-color: var(--color-rule); }
.pick-on { display: none; }
.pick[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.pick[aria-pressed="true"] .pick-on { display: inline; }
.pick[aria-pressed="true"] .pick-off { display: none; }
.empty { padding-block: var(--space-xl); color: var(--color-muted); }

.about { padding-bottom: var(--section-gap-s); }
.about-in { display: grid; gap: var(--space-lg); padding: var(--space-2xl) var(--space-xl); }
.about-in .lead { max-width: 60ch; font-size: var(--text-lg); }
.hours { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-xl); margin: 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); max-width: 560px; }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; }

.foot { background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-xl) var(--gap-columns); }
.foot h2 { max-width: none; margin-bottom: var(--space-sm); font-size: var(--text-md); font-weight: 600; letter-spacing: 0; }
.foot ul { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.foot a { font-weight: 400; }
.foot .brand { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.copy { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

.dock { display: none; position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky); background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-ink); }
.dock-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); }
.dock-count { font-weight: 700; margin-right: auto; }
.dock-slots { display: flex; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.dock-slots li { width: 32px; height: 24px; border-radius: 3px; border: var(--rule-hair) dashed var(--color-rule); background-size: contain; background-repeat: no-repeat; background-position: center; }
.dock-slots li.is-full { border: 0; box-shadow: 0 0 0 var(--rule-hair) var(--color-rule); }

@media (max-width: 60rem) {
  .stage { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .stage-main { display: contents; }
  .hero { order: 1; padding-bottom: var(--space-lg); }
  .stage-side { order: 2; position: static; margin-top: 0; }
  .steps { order: 3; padding-top: var(--space-2xl); }
  .ranking { order: 4; }
  .dock { display: block; }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-in > :first-child { grid-column: 1 / -1; }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
}
@media (max-width: 40rem) {
  .nav-in { flex-wrap: wrap; gap: var(--space-xs) var(--space-md); padding-block: var(--space-xs); }
  .nav-links { order: 3; width: 100%; margin: 0; gap: var(--space-md); overflow-x: auto; }
  .lang { margin-left: auto; }
  .cookies-in { align-items: flex-start; flex-direction: column; }
  .steps-list { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: 2.75rem 2rem minmax(0, 1fr); }
  .pick { grid-column: 3; justify-self: start; }
  .about-in { padding: var(--space-xl) var(--space-md); }
  .hours { grid-template-columns: minmax(0, 1fr); }
}

.doc { padding-block: var(--space-2xl) var(--section-gap-s); }
.doc-head { display: grid; gap: var(--space-lg); justify-items: start; max-width: 780px; padding-bottom: var(--space-2xl); }
.doc-sec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-md) var(--gap-columns); padding-block: var(--space-lg) var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); }
.doc-sec h2 { font-size: var(--text-title); line-height: 1.2; }
.doc-body { display: grid; gap: var(--space-md); max-width: 65ch; }
.doc-body a { font-weight: 600; }
.contact { display: grid; gap: var(--space-md); padding: var(--space-lg); }
.contact textarea { width: 100%; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); resize: vertical; font-weight: 400; }
.contact textarea::placeholder { color: var(--color-muted); }
.contact textarea:hover { border-color: var(--color-muted); }
.contact textarea:focus-visible { outline-offset: 0; border-color: var(--color-focus); }
.doc-sec .visually-hidden + .doc-body { grid-column: 2; }
@media (max-width: 60rem) { .doc-sec { grid-template-columns: minmax(0, 1fr); } .doc-sec .visually-hidden + .doc-body { grid-column: 1; } }

.about-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: var(--space-xl) var(--space-2xl); }
.about-text { display: grid; gap: var(--space-lg); }
.photo-slot { border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.about-in { position: relative; overflow: hidden; }
.about-photo { align-self: stretch; margin: calc(var(--space-2xl) * -1) calc(var(--space-xl) * -1) calc(var(--space-2xl) * -1) 0; min-height: 320px; border-radius: 0; outline: 0; }
.credits { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) {
  .about-in { grid-template-columns: minmax(0, 1fr); }
  .about-photo { margin: 0 calc(var(--space-md) * -1) calc(var(--space-xl) * -1); min-height: 220px; }
}

/* Sobre nós: a foto dissolve-se num degradê para o texto */
.about-photo { -webkit-mask-image: linear-gradient(to right, transparent 0%, var(--color-ink) 55%); mask-image: linear-gradient(to right, transparent 0%, var(--color-ink) 55%); }
@media (max-width: 60rem) {
  .about-photo { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--color-ink) 45%); mask-image: linear-gradient(to bottom, transparent 0%, var(--color-ink) 45%); }
}

/* Contacto: a foto dissolve-se num degradê */

.foot-hours { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.foot-hours strong { font-weight: 600; color: var(--color-ink); }

/* Banner no topo das páginas de texto: foto esbatida que se dissolve no fundo */
.doc-page { position: relative; }
.doc-banner { position: absolute; inset: 0 0 auto 0; height: 420px; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, var(--color-ink) 30%, transparent); mask-image: linear-gradient(to bottom, var(--color-ink) 30%, transparent); }
.doc-banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: saturate(0.65) contrast(0.97); }
.doc-page > .doc, .doc-page > .stage { position: relative; z-index: 1; }
@media (max-width: 40rem) { .doc-banner { height: 320px; } }

/* Caixa "Oferta no Registo": superfície branca com sombra suave */
.entry { background: var(--color-paper); border-color: var(--color-rule); box-shadow: 0 16px 40px color-mix(in oklch, var(--color-ink) 9%, transparent); }
.entry-label { color: var(--color-ink-2); font-weight: 600; font-size: var(--text-md); }
.entry .slot { background: var(--color-paper-2); }
.entry .slot.is-full { background: var(--color-paper); }

.tag--eu { background: var(--color-paper-3); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-ink); color: var(--color-ink); font-weight: 700; }
.tag--eu abbr { text-decoration: none; }