/* Shell · touradasacorda.com as a video platform (the user, 3 Nov: "the same feel as Twitch, YouTube and Kick, video first").
   Dark by default, a light theme on request (tema.js, key alloic-tema). The old tokens flip with the theme, so every page and
   module that uses them follows; rounded corners are now the rule (--r); the azulejo is the brand accent: plaques, avatars,
   category tiles. Red only for LIVE. Loaded last, after the page's own styles. */
:root { --r: 12px; --sh-topo: 56px; --sh-lado: 232px; --sh-lado-c: 76px; }

/* ---- the palette: black, gold and red (Lola, 3 Nov), the old tokens remapped; dark by default ----
   --cobalt is the GOLD accent now (links, the active place, focus, selected chips); the name stays so no page breaks.
   Red is the second accent: the primary buttons (--verm, white text) and, as text, --red-t. The LIVE badge is its own,
   brighter red with a pulsing dot. Every pair below is AA or better: gold on the page 10.8:1, white on --verm 6.7:1,
   --red-t on the page 8.6:1; light theme gold-ink on ivory 6.9:1, red text 7:1. ---- */
:root { --on-dark: #F6F0E4; --soft: #D2C8B6; --navy: #17120E; --gold: #E8B93A; --verm: #B3201A; --verm-h: #C42B22; --on-verm: #FFFFFF; --vivo: #E0221B; --ouro-bt: #E8B93A; --on-ouro: #14110D; }
html[data-tema="escuro"] {
  color-scheme: dark;
  --wall: #0B0A09;        /* the page: near-black, warm */
  --paper: #181513;       /* surfaces: cards, panels, dialogs, the bars */
  --tone: #262019;        /* a step up: chips, hover, the second action */
  --grout: #3A3128;
  --ink: #F6F0E4;
  --muted: #BDB3A2;
  --cobalt: #E8B93A;      /* gold: links, active, focus */
  --red: #FF8A7A;         /* red as text on the dark page (the old token was LIVE only) */
  --red-t: #FF8A7A; --on-cobalt: #14110D;
  --lilas: #E8B93A; --manganes: #E8B93A; --lilas-claro: #262019;   /* the lilac accents are gold now */
  --parede: #0B0A09;
}
html[data-tema="claro"] {
  color-scheme: light;
  --wall: #F7F1E3;        /* ivory */
  --paper: #FFFDF8;
  --tone: #EDE3CD;
  --grout: #D9CDB2;
  --ink: #16120D;
  --muted: #5B5243;
  --cobalt: #6F4C00;      /* the gold, darkened for text on ivory */
  --red: #A3150F;
  --red-t: #A3150F;
  --gold-ink: #6F4C00; --on-cobalt: #FFFFFF;
  --lilas: #8A5F00; --manganes: #6F4C00; --lilas-claro: #EDE3CD;
  --parede: #F7F1E3;
}
/* the azulejo is still blue and white: its letters and borders keep their own colours whatever the theme */
.az-placa, .az-numero, .az-letras, .az-tinta, .abertura-placa { --az-cobalt: #1C4597; --az-navy: #0E2250; --az-flor: #1C4597; --az-orla1: #1C4597; --az-orla2: #1C4597; }
html.sh { --az-grade: 0px !important; }
html.sh body, html.sh body.hub { background: var(--wall); color: var(--ink); }
html.sh .hub-foot, html.sh main > section, html.sh .hub-foot .fecho .flag-white { background-color: transparent; }
html.sh main > section { min-height: 0 !important; }

/* what the wall brought is brand accent now, not the page */
html.sh .junta, html.sh .passeio, html.sh .cunhal, html.sh .moldura { display: none !important; }

/* ---- the top bar ---- */
html.sh .hub-bar, html.sh header.bar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  height: var(--sh-topo); margin: 0; padding: 0 var(--m); background: var(--wall); border: 0;
}
html.sh .brand { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; }
html.sh .brand .mark { display: inline-flex; align-items: center; gap: 10px; font: italic 500 var(--t-lead)/1 var(--f); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
html.sh .brand .mark::before { content: ""; width: 36px; height: 36px; flex: none; background: url("../logo/logo-simples.svg") center / contain no-repeat; }
html.sh .por-alloic, html.sh .menu-btn, html.sh .menu-topo, html.sh .hub-bar .links, html.sh .procurar-btn { display: none !important; }
html.sh .sh-burger { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
html.sh .sh-burger:hover { background: var(--tone); }
html.sh .sh-busca { flex: 1 1 auto; max-width: 600px; min-width: 0; margin: 0 auto; display: flex; height: 44px; border-radius: 999px; overflow: hidden; background: var(--paper); }
html.sh .sh-q { flex: 1; min-width: 0; padding: 0 18px; border: 0; background: transparent; color: var(--ink); font: 400 var(--t-small)/1 var(--f); cursor: text; text-overflow: ellipsis; }
html.sh .sh-q::placeholder { color: var(--muted); opacity: 1; }
html.sh .sh-q:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; border-radius: 999px; }
html.sh .sh-lupa { flex: none; display: grid; place-items: center; width: 62px; border: 0; background: var(--tone); color: var(--ink); cursor: pointer; }
html.sh .sh-dir { display: flex; align-items: center; gap: 8px; flex: none; }
html.sh .sh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 var(--t-small)/1 var(--f); cursor: pointer; }
html.sh .sh-tema:hover { background: var(--tone); }
html.sh .sh-entrar { padding: 0 20px; background: var(--ouro-bt); color: var(--on-ouro); }
html.sh .sh-entrar:hover { background: #F0C24A; }
html.sh .bar-menu { display: contents; }
html.sh .bar-actions { display: flex; align-items: center; gap: 8px; margin-left: 0; flex: none; }
/* "Entrar" goes while someone is signed in or has passed the old access gate: the hidden attribute alone loses to the button's own display */
html.sh [data-sh-entrar][hidden], html.sh.ct-sessao [data-sh-entrar] { display: none !important; }
/* the language: one PT | EN pill in the bar on every page (shell.js builds it from the page's own markup and hides the old controls) */
html.sh .sh-lang-velho { display: none !important; }
html.sh .lang-switch { display: inline-flex; align-items: center; gap: 2px; flex: none; background: var(--paper); border-radius: 999px; padding: 3px; }
html.sh .lang-switch button, html.sh .lang-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 var(--t-small)/1 var(--f); text-decoration: none; cursor: pointer; }
html.sh .lang-switch [aria-pressed="true"], html.sh .lang-switch [aria-current="page"] { background: var(--tone); }
html.sh .lang-switch :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 1px; }
html.sh .lang-switch .lg-l { display: none; }
html.sh .lang-switch .lg-s { display: inline; }
html.sh .bar-actions:not(:has(> :not(.sh-lang-velho))) { display: none; }         /* nothing left in it: no gap either */
html.sh .partilhar { display: none; }
html.sh .lang-rapido { display: none; }
@media (max-width: 1280px) {
  html.sh .bar-menu { display: none; }
  html.sh .lang-rapido { display: inline-flex; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 600 var(--t-small)/1 var(--f); border: 0; }
  html.sh .hub-bar { grid-template-columns: none; }
}
@media (max-width: 760px) {
  html.sh .sh-entrar { display: none; }
  html.sh .lang-switch button, html.sh .lang-switch a { min-width: 42px; padding: 0 8px; }
  html.sh .brand .mark { font-size: 0; gap: 0; }      /* the plaque alone; the name is in the page's title */
  html.sh .brand .mark::before { width: 40px; height: 40px; }
  html.sh .sh-burger { display: none; }
  html.sh .sh-busca { margin-left: auto; flex: none; width: 48px; background: none; }
  html.sh .sh-q { display: none; }
  html.sh .sh-lupa { width: 48px; height: 44px; border-radius: 50%; background: var(--paper); }
  html.sh .hub-bar, html.sh header.bar { gap: 8px; }
}
@media (max-width: 430px) {     /* a signed-in bar (theme, PT|EN, bell, avatar) has to fit a small phone */
  html.sh .hub-bar, html.sh header.bar { padding: 0 12px; gap: 6px; }
  html.sh .sh-dir { gap: 4px; }
  html.sh .lang-switch button, html.sh .lang-switch a { min-width: 34px; padding: 0 5px; }
  html.sh .sh-busca, html.sh .sh-lupa { width: 44px; }
}
@media (max-width: 400px) { html.sh.sh-burger-fone .sh-busca { display: none; } html.sh.sh-burger-fone .sh-dir { margin-left: auto; } }   /* a tool page keeps its menu button on a phone, so the search icon yields */

/* ---- the sidebar, and its drawer on a phone ---- */
.sh-lado { position: fixed; z-index: 35; top: var(--sh-topo); left: 0; bottom: 0; width: var(--sh-lado); overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 32px; background: var(--wall); scrollbar-width: thin; }
.sh-grupo { display: grid; gap: 2px; padding: 8px 0; }
.sh-grupo + .sh-grupo { margin-top: 10px; }
.sh-item { display: flex; align-items: center; gap: 20px; width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 500 var(--t-small)/1.2 var(--f); text-align: left; text-decoration: none; cursor: pointer; }
.sh-item:hover { background: var(--tone); }
.sh-item[aria-current="page"] { background: var(--tone); color: var(--cobalt); font-weight: 700; }
.sh-item:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.sh-item svg { flex: none; }
.sh-tit { margin: 0; padding: 10px 12px 4px; color: var(--muted); font: 600 var(--t-small)/1.2 var(--f); }
.sh-canal img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
.sh-canal { gap: 14px; min-height: 42px; }
.sh-pequeno { min-height: 36px; color: var(--muted); font-size: 16px; }
.sh-so-fone { display: none; }
.sh-fundo { display: none; }
.sh-so-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1081px) {
  html.sh body { padding-left: var(--sh-lado); }
  html.sh.sh-c body { padding-left: var(--sh-lado-c); }
  html.sh .hub-bar, html.sh header.bar { margin-left: calc(-1 * var(--sh-lado)); padding-left: var(--m); width: calc(100% + var(--sh-lado)); }
  html.sh.sh-c .hub-bar, html.sh.sh-c header.bar { margin-left: calc(-1 * var(--sh-lado-c)); width: calc(100% + var(--sh-lado-c)); }
  html.sh.sh-c .sh-lado { width: var(--sh-lado-c); padding-inline: 8px; }
  html.sh.sh-c .sh-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 2px; font-size: 16px; text-align: center; }
  html.sh.sh-c .sh-item span { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.sh.sh-c .sh-tit, html.sh.sh-c .sh-pequeno, html.sh.sh-c .sh-mais .sh-item:not(:first-child) { display: none; }
  html.sh.sh-c .sh-canal { min-height: 46px; }
  html.sh.sh-c .sh-canal span { display: none; }
}
@media (max-width: 1080px) {
  .sh-lado { z-index: 60; top: 0; width: min(320px, 86vw); padding-top: 12px; transform: translateX(-102%); transition: transform .25s var(--ease, ease); }
  html.sh-gaveta .sh-lado { transform: none; }
  .sh-fundo { display: block; position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .6); opacity: 0; pointer-events: none; transition: opacity .25s; }
  html.sh-gaveta .sh-fundo { opacity: 1; pointer-events: auto; }
  .sh-so-fone { display: flex; }
  body.sh-sem-rolar { overflow: hidden; }
}
@media (min-width: 761px) and (max-width: 1080px) { html.sh .sh-burger { display: inline-grid; } }
@media (prefers-reduced-motion: reduce) { .sh-lado, .sh-fundo { transition: none; } }

/* ---- buttons, chips and dialogs: rounded, as on the platforms ---- */
html.sh .btn { border-radius: 999px; }
html.sh .btn:hover { transform: none; }
html.sh .btn-ink { background: var(--verm); color: var(--on-verm); }
html.sh .btn-ink:hover { background: var(--verm-h); }
html.sh .btn-tone, html.sh .btn-paper { background: var(--tone); color: var(--ink); }
html.sh .chip, html.sh .arq-f-btn { border-radius: 999px; }
html.sh .procura, html.sh .viewer, html.sh .partilha, html.sh dialog.arq-folha { border-radius: var(--r); }
html.sh dialog.arq-folha { border-radius: var(--r) var(--r) 0 0; }
html.sh .barra-baixo { background: var(--paper); }
html.sh .barra-baixo a, html.sh .barra-baixo button { color: var(--ink); }
html.sh .topo-btn, html.sh .seguinte-btn { background: var(--ouro-bt); color: var(--on-ouro); border-radius: 999px; }

/* ---- the home's first screen: the featured player, its side cards, the channel's name and way in ---- */
html.sh .abertura { background: transparent; padding: 16px var(--m) 8px; overflow: visible; }
html.sh .abertura-in { width: 100%; max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr) 248px; grid-template-areas: "painel lado" "cabeca lado"; grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 16px; align-items: start; }
html.sh .fachada { grid-area: painel; padding: 0; position: relative; border-radius: var(--r); overflow: hidden; background: var(--paper); }
html.sh .abertura-painel { border-radius: 0; }
html.sh .canal { inset: 0; }
html.sh .canal-b, html.sh .canal-ligar { border-radius: 10px; }
html.sh .canal-barra { padding-inline: var(--m); }
html.sh .canal-ligar, html.sh .play { color: #fff; background: var(--verm); }
html.sh .lado-cartas { grid-area: lado; display: grid; gap: 12px; align-content: start; }
html.sh .canal-cabeca { grid-area: cabeca; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; }
html.sh .canal-titulo { margin: 0; font: 700 clamp(30px, 3.4vw, 44px)/1.1 var(--f); color: var(--ink); }
html.sh .abertura-lead { margin: 0; max-width: 62ch; font-size: var(--t-body); color: var(--muted); }
html.sh .abertura .now { margin: 0; max-width: 62ch; font-size: var(--t-small); color: var(--ink); }
html.sh .abertura-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
html.sh .abertura-act .btn-big { min-height: 48px; padding: 0 22px; font-size: var(--t-small); }
html.sh .abertura .hero-jogo { display: none; }
.sh-c-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--ink); text-decoration: none; border-radius: var(--r); padding: 6px; }
.sh-c-card:hover { background: var(--paper); }
.sh-c-card:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.sh-c-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--tone); }
.sh-c-img img { width: 100%; height: 100%; object-fit: cover; }
.sh-c-data { display: grid; align-content: center; justify-items: center; background: var(--paper); color: var(--ink); }
.sh-c-data b { font: 700 var(--t-lead)/1 var(--f); }
.sh-c-data span { font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sh-c-txt { display: grid; gap: 3px; align-content: start; min-width: 0; }
.sh-c-txt b { font-size: 17px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-c-txt span { font-size: 16px; line-height: 1.35; color: var(--muted); }
.sh-vivo, html.sh .arq-card .badge { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--vivo); color: #fff; font: 700 var(--t-small)/1.2 var(--f); text-transform: uppercase; letter-spacing: .04em; }
.sh-vivo::before, html.sh .arq-card .badge::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: #fff; animation: vivo 1.6s ease-in-out infinite; }
@keyframes vivo { 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .sh-vivo::before, html.sh .arq-card .badge::before { animation: none; } }

/* ---- the rail: live, or the next season and the calendar ---- */
.trilho, .prateleiras, .categorias { padding: 8px var(--m) 8px; background: transparent; }
.trilho { margin-top: 16px; }
.trilho[hidden] { display: none; }
.sh-h2 { margin: 0; font: 700 var(--t-lead)/1.2 var(--f); color: var(--ink); }
.sh-fila { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.sh-fila > li { flex: 0 0 clamp(250px, 24vw, 330px); scroll-snap-align: start; }
.sh-ev { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 96px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); color: var(--ink); text-decoration: none; height: 100%; }
.sh-ev:hover { background: var(--tone); }
.sh-ev-v { grid-template-columns: 1fr; padding: 0; background: none; align-content: start; gap: 8px; }
.sh-ev-v .sh-c-img { aspect-ratio: 16 / 9; }
.sh-ev-dia { display: grid; justify-items: center; line-height: 1; color: var(--ink); }
.sh-ev-dia b { font: 700 var(--t-lead)/1 var(--f); }
.sh-ev-dia span { font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 3px; }
.sh-ev-t { display: grid; gap: 2px; min-width: 0; }
.sh-ev-t b { font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.sh-ev-t span { font-size: 16px; line-height: 1.35; color: var(--muted); }
.sh-ev-p { background: var(--tone); }
html.sh .sh-fila:focus-visible { outline: 3px solid var(--cobalt); }

/* ---- the chips, held under the bar ---- */
.sh-chips { position: sticky; top: var(--sh-topo); z-index: 30; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin: 0 calc(-1 * var(--m)); padding-inline: var(--m); background: var(--wall); scrollbar-width: none; }
.sh-chips:empty { display: none; }
.sh-chip { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--tone); color: var(--ink); font: 600 var(--t-small)/1 var(--f); cursor: pointer; white-space: nowrap; }
.sh-chip:hover { background: var(--grout); }
.sh-chip[aria-pressed="true"] { background: var(--ouro-bt); color: var(--on-ouro); }
.sh-chip:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* ---- the video rows and their cards: the platform pattern ---- */
html.sh .prateleiras { padding-top: 0; }
html.sh .arq-prat { margin: 0 0 clamp(20px, 2.4vw, 32px); }
html.sh .arq-prat-top h3 { font: 700 var(--t-lead)/1.2 var(--f); color: var(--ink); }
html.sh .arq-prat-lista > li { flex-basis: clamp(250px, 23vw, 330px); }
html.sh .arq-card button { background: none; border-radius: var(--r); }
html.sh .arq-card button:hover { background: none; }
html.sh .arq-card .thumb { border-radius: var(--r); background: var(--tone); }
html.sh .arq-card button:hover .thumb { border-radius: 4px; }
html.sh .arq-card .thumb img { transition: none; }
html.sh .arq-card .lab { padding: 10px 2px 6px; gap: 3px; }
html.sh .arq-card .lab .tt { color: var(--ink); }
html.sh .arq-card .dur { border-radius: 6px; background: rgb(0 0 0 / .82); }

html.sh .arq-card .arq-momento { border-radius: 999px; right: 6px; top: 6px; }
html.sh .arq-lista { gap: 20px 12px; }

/* ---- the category tiles: where the azulejo art lives ---- */
.sh-cats > li { flex: 0 0 clamp(150px, 14vw, 196px); }
.sh-cat { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sh-cat-img { display: block; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; background: var(--tone); }
.sh-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.sh-cat:hover .sh-cat-img { border-radius: 4px; }
.sh-cat b { font-size: var(--t-small); font-weight: 700; margin-top: 6px; }
.sh-cat > span:last-child { font-size: 16px; color: var(--muted); }
.sh-cat:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: var(--r); }
.sh-cat-t { background: #F1ECDF url("../azores/rua/padrao-foto.webp") var(--x, 0%) var(--y, 0%) / 400% 500% no-repeat; aspect-ratio: 1; }

/* ---- what is lower on the home, now in the shell's dark ---- */
html.sh .live, html.sh .ilhas { color: var(--on-dark); }
html.sh .ilha-painel, html.sh .ultima, html.sh .canais, html.sh .channels-wrap, html.sh .screen .cap { border-radius: var(--r); }
html.sh .il:nth-child(odd) { background: var(--tone); }
html.sh .ev, html.sh .past li, html.sh .channels li, html.sh .off-count, html.sh .date-tile { border-radius: var(--r); }
html.sh .programa li:nth-child(odd) { background: var(--paper); }
html.sh .agenda .later:has(.cartaz) { background: var(--paper); border-radius: var(--r); }
html.sh .on, html.sh .ch-state.on, html.sh .canal-g .on, html.sh .il .on, html.sh .onair { color: var(--red-t) !important; }
html.sh .cap-tile { border-radius: var(--r); }
html.sh .hub-foot { background: var(--wall); }
html.sh .assinatura { background: var(--paper); border-radius: 0; }

html.sh .canal-titulo, html.sh .abertura-lead, html.sh .abertura .now, html.sh .abertura-act { grid-area: auto; }
html.sh .abertura .now { display: flex; align-items: center; gap: 10px; min-height: 0; }

/* ---- small screens ---- */
@media (max-width: 1080px) {
  html.sh .abertura-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "painel" "cabeca" "lado"; }
  html.sh .lado-cartas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.sh .canal-cabeca { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html.sh .abertura { padding-top: 0; }
  html.sh .fachada { margin: 0 calc(-1 * var(--m)); border-radius: 0; }
  html.sh .lado-cartas { grid-template-columns: 1fr; }
  html.sh .sh-c-card { grid-template-columns: 132px minmax(0, 1fr); }
  html.sh .abertura-act { display: grid; grid-template-columns: 1fr; }
  html.sh .abertura-act .btn-big { width: 100%; }
  .sh-fila > li { flex-basis: 78%; }
  html.sh .arq-prat-lista > li { flex-basis: 78%; }
  .sh-cats > li { flex-basis: 140px; }
}

/* the room for what arrives after the data does, so nothing jumps */
html.sh .trilho { min-height: 214px !important; }
html.sh .prateleiras:not(:has(.arq-prat)) { display: block; min-height: 480px !important; }
@media (max-width: 1080px) { html.sh .lado-cartas { min-height: 214px; } }
@media (max-width: 760px) { html.sh .lado-cartas { min-height: 372px; } .trilho { min-height: 190px !important; } }

/* what shell.js adds to the bar is already accounted for before it arrives: the right-hand side is pinned right, and the
   brand leaves room for the burger */
html.sh .bar-actions { margin-left: auto; }
html.sh .sh-dir { margin-left: auto; }
html.sh .sh-dir + .bar-menu .bar-actions { margin-left: 0; }
html.sh:not(.sh-pronto) .hub-bar .brand, html.sh:not(.sh-pronto) header.bar .brand { margin-left: 56px; }
html.sh .abertura .now { min-height: 2.9em; }
@media (max-width: 760px) { html.sh:not(.sh-pronto) .hub-bar .brand, html.sh:not(.sh-pronto) header.bar .brand { margin-left: 0; } }

/* section heads: a plaque as a header, not a billboard; the page's closing name sized to its half */
html.sh .hub main .az-placa { --az-tile: 34px; }
@media (max-width: 760px) { html.sh .hub main .az-placa { --az-tile: 30px; } }
html.sh .fecho-nome { font-size: clamp(40px, 5.4vw, 92px); }
html.sh .cap-head, html.sh .dq-head, html.sh .arq-head, html.sh .agenda-head, html.sh .live-head { margin-bottom: 24px; }

/* the archive's grounds are the page, not a surface: the page colour in both themes (the archive session set them on --paper) */
html.sh .arquivo, html.sh .prateleiras { background: var(--wall) !important; background-image: none !important; }
html.sh .arq-desk, html.sh .arq-fila, html.sh .arq-f-busca, html.sh .arq-filtros-bar { background: var(--wall); }
html.sh .arq-filtros, html.sh .arq-dest { background: var(--paper); border-radius: var(--r); }
html.sh .canal-barra { background: rgb(0 0 0 / .72); }

.sh-link { color: var(--cobalt); font: 600 var(--t-small)/1.2 var(--f); text-decoration: none; padding: 10px 4px; }
.sh-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.sh-link:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; border-radius: 6px; }

/* on a computer and a tablet a row is one line of cards that fit (the rest is behind "Ver tudo"), not a sideways scroll;
   on a phone it stays a swipe */
html.sh { --n: 3; }
@media (min-width: 761px) {
  html.sh .arq-prat-lista:not(.sh-cats), .sh-fila { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; overflow: visible; padding-bottom: 0; }
  html.sh .arq-prat-lista:not(.sh-cats) > li, .sh-fila > li { flex: none; width: auto; min-width: 0; }
  html.sh .arq-prat-lista:not(.sh-cats) > li:nth-child(n + 4), .sh-fila > li:nth-child(n + 4) { display: none; }
  .sh-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; overflow: visible; }
  .sh-cats > li { flex: none; }
}
@media (min-width: 1280px) { html.sh { --n: 4; } html.sh .arq-prat-lista:not(.sh-cats) > li:nth-child(n + 4), .sh-fila > li:nth-child(n + 4) { display: block; } html.sh .arq-prat-lista:not(.sh-cats) > li:nth-child(n + 5), .sh-fila > li:nth-child(n + 5) { display: none; } }
@media (min-width: 1500px) { html.sh { --n: 5; } html.sh .arq-prat-lista:not(.sh-cats) > li:nth-child(n + 5), .sh-fila > li:nth-child(n + 5) { display: block; } html.sh .arq-prat-lista:not(.sh-cats) > li:nth-child(n + 6), .sh-fila > li:nth-child(n + 6) { display: none; } }
@media (min-width: 1900px) { html.sh { --n: 6; } html.sh .arq-prat-lista:not(.sh-cats) > li:nth-child(n + 6), .sh-fila > li:nth-child(n + 6) { display: block; } html.sh .arq-prat-lista:not(.sh-cats) > li:nth-child(n + 7), .sh-fila > li:nth-child(n + 7) { display: none; } }

@media (min-width: 1081px) { html.sh .sh-c-card { gap: 10px; padding: 4px; } html.sh .sh-c-txt span { font-size: 15px; } html.sh .lado-cartas { gap: 6px; } html.sh .sh-c-data b { font-size: 20px; } }
html.sh .canal-b[hidden] { border-radius: 0; }
html.sh .abertura::before { display: none; }   /* the glaze light of the wall is not for the platform's first screen */

/* the bottom bar on pages that do not carry the hub's own */
.sh-baixo { display: none; }
@media (max-width: 1280px) {
  .sh-baixo { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  .sh-baixo a, .sh-baixo button { all: unset; box-sizing: border-box; display: grid; place-items: center; min-height: 64px; padding: 0 6px; color: var(--ink); font: 600 var(--t-small)/1.1 var(--f); text-align: center; cursor: pointer; }
  .sh-baixo a:focus-visible, .sh-baixo button:focus-visible { outline: 3px solid var(--cobalt); outline-offset: -3px; }
  html.sh.sh-tem-baixo body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) { html.sh .sh-baixo + * { } }

/* ---- the other pages in the shell: their sections were tiled walls, now the page colour; the azulejo stays in plaques, panels and bands ---- */
html.sh .h-abertura, html.sh .hist .sec, html.sh .mundo, html.sh .loja .panel, html.sh .catalogo, html.sh .encomenda, html.sh .loja .gallery, html.sh .loja .faq,
html.sh .campo, html.sh .procura-mapa { background: var(--wall) !important; background-image: none !important; }
html.sh .hist, html.sh .loja, html.sh .estatisticas { background: var(--wall); color: var(--ink); }
html.sh main { background: transparent; }
html.sh .hub-foot { padding-bottom: 0; }

/* a page's own section links, as chips under the bar */
.sh-local { position: sticky; top: var(--sh-topo); z-index: 30; display: flex; gap: 8px; overflow-x: auto; padding: 8px var(--m); background: var(--wall); scrollbar-width: none; }
.sh-local a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; background: var(--tone); color: var(--ink); font: 600 var(--t-small)/1 var(--f); text-decoration: none; white-space: nowrap; }
.sh-local a:hover { background: var(--grout); }
.sh-local a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
@media (min-width: 1081px) { html.sh .sh-local { margin-left: 0; } }

/* ---- black, gold and red beyond the shell: what the page styles hard-coded in blue ---- */
html.sh ::selection { background: var(--ouro-bt); color: var(--on-ouro); }
html.sh :focus-visible { outline-color: var(--cobalt); }
html.sh .btn-ink:focus-visible { outline-color: var(--ink); }
html.sh .date-tile.today { background: var(--verm); color: var(--on-verm); }
html.sh .date-tile.today span { color: var(--on-verm); }
html.sh .linkish, html.sh .foot-share a, html.sh .explorar a, html.sh .arq-dest-txt a, html.sh .source a, html.sh .festas-fontes a { color: var(--cobalt); }
html.sh .ev-time, html.sh .programa.cal .pg-gan, html.sh .ilha-escolha button[aria-pressed="true"] { color: var(--cobalt); }
html.sh .ilha-escolha button[aria-pressed="true"] { background: var(--tone); }
html.sh .off-count .num { color: var(--gold); }
html.sh .il .num { color: var(--cobalt); }
html.sh .live, html.sh .ilhas, html.sh .flag-blue, html.sh .assinatura, html.sh .off-count, html.sh .date-tile:not(.today) { background-color: var(--navy); }
html.sh .mar-fundo { fill: var(--navy); }
html.sh .mar-onda { stroke: #261E16; } html.sh .mar-onda.fina { stroke: #1F1912; }
html.sh .wall[data-wall="navy"], html.sh .wall[data-wall="flag"] { filter: hue-rotate(-188deg) saturate(.55); }
html.sh .stars9, html.sh .acor { fill: var(--gold); }

/* text on a fixed-dark surface (the highlights' tiles, the dark sections) is light in both themes: --paper flips, --on-dark does not */
html.sh .dq-t-l, html.sh .dq-t-l * { color: var(--on-dark); }
html.sh .dq-t[aria-current] .dq-t-l { background: var(--gold); color: #14110D; }
html.sh .dq-ocasiao { color: var(--gold); }

/* text on the gold strip, and the shop's own bottom bar, in both themes */
html.sh .barra-baixo { background: var(--paper) !important; }
html.sh .barra-baixo a, html.sh .barra-baixo button { color: var(--ink) !important; }
html.sh .barra-baixo [aria-current="page"] { color: var(--cobalt) !important; background: var(--tone); }

/* what sits on a gold (dark theme) or dark-gold (light theme) fill takes the matching text colour */
html.sh .p1 .strip, html.sh .s-cobalt, html.sh .conjunto, html.sh .pago, html.sh .op-qtd.on .qtd-b, html.sh .cell-ink:hover,
html.sh .dq-ilhas button[aria-pressed="true"], html.sh .oficina .of-btn-forte:hover { color: var(--on-cobalt); }
html.sh .p1 .strip *, html.sh .s-cobalt *, html.sh .conjunto *, html.sh .pago * { color: inherit; }
html.sh .dq-play { background: var(--verm); color: #fff; border-radius: 50%; }
@media (min-width: 761px) { .sh-chips { flex-wrap: wrap; overflow: visible; } }   /* on a computer all the chips are in view, wrapping, not a sideways scroll */

/* icons over the bottom-bar labels */
html.sh .sh-baixo > *, html.sh .barra-baixo > * { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
html.sh .sh-baixo svg, html.sh .barra-baixo svg { width: 22px; height: 22px; flex: none; }

/* the island avatars: round medallions, not 3:4 tiles */
.sh-cat-av { aspect-ratio: 1 / 1; background: none; border-radius: 50%; }
.sh-cat-av img { object-fit: contain; border-radius: 50%; }
.sh-cat:hover .sh-cat-av { border-radius: 50%; transform: scale(1.03); }
@media (prefers-reduced-motion: no-preference) { .sh-cat-av { transition: transform .2s; } }

/* a row's illustrated head: the art on the left (3:2, as tall as the head, its right third left dark), the title and its button beside it */
.sh-painel { align-items: center; gap: 16px; min-height: 190px; padding: 12px 16px 12px 200px; border-radius: var(--r); background: #0E0B09 var(--painel) left center / auto 100% no-repeat; color: #F6F0E4; }
.sh-painel h3 { color: #F6F0E4; }
@media (max-width: 760px) { .sh-painel { min-height: 136px; padding-left: 140px; gap: 8px; } }
@media (max-width: 760px) { html.sh .arq-prat-lista.sh-cats > li { flex: 0 0 150px; } .sh-painel { padding-left: 150px; } }

/* offline notice, and the picture over an empty search */
.sh-offline { position: fixed; left: 12px; right: 12px; bottom: 84px; z-index: 60; display: flex; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r); background: var(--paper); color: var(--ink); border: 1px solid var(--grout); font-size: var(--t-small); line-height: 1.35; max-width: 520px; margin: 0 auto; }
.sh-offline[hidden] { display: none; }
.sh-offline img { width: 64px; height: 64px; border-radius: 6px; flex: none; object-fit: cover; }
@media (min-width: 761px) { .sh-offline { bottom: 24px; left: 240px; right: auto; } }
.sh-c-vazio { object-fit: cover; }
html.sh p.empty::before { content: ""; display: block; width: 132px; aspect-ratio: 1; margin-bottom: 12px; border-radius: var(--r); background: #0E0B09 url("/assets/ui/vazio-sem-resultados-800.webp") center / cover no-repeat; }