/* No mundo: search, a real street map and a side of results or one place, set into the white tile wall.
   Flat like the rest of the page: no gradients, no shadows, no hairlines. Type on the hub's steps only. */
.mundo {
  color: var(--ink, #10285C);
  padding: clamp(72px, 9vw, 128px) var(--m, 24px) clamp(72px, 9vw, 120px);
  background: #F8F9FB url("../azores/azulejo-branco-512.jpg") 0 0 / calc(var(--step, 87px) * 4) calc(var(--step, 87px) * 4) repeat;
}

/* the head, as every section opens: the plaque on the left, its one sentence on the centre column */
.mu-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end;
  column-gap: clamp(32px, 4vw, 64px); row-gap: 18px; margin: 0 0 clamp(40px, 4vw, 56px);
}
.mu-head > .az-placa { grid-column: 1; justify-self: start; }
.mu-head > .lead { grid-column: 2; max-width: 34ch; margin: 0; font-size: var(--t-lead, 24px); }

.mu-app[hidden], .mu-lista[hidden] { display: none; }

/* search: one field and the near-me button */
.mu-procura { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin: 0 0 6px; }
.mu-q {
  min-height: 60px; min-width: 0; padding: 0 20px; border: 2px solid var(--ink, #10285C); border-radius: 0; background: var(--paper, #F8F9FB);
  color: var(--ink, #10285C); font: 400 var(--t-body, 20px)/1.2 var(--f, Georgia, serif); -webkit-appearance: none; appearance: none;
}
.mu-q::placeholder { color: var(--muted, #3D4966); opacity: 1; }
.mu-q:focus-visible { outline: 3px solid var(--gold, #E3A92B); outline-offset: 2px; }

/* buttons: flat squares; the pressed one in ink */
.mu-b {
  min-height: 48px; padding: 0 18px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--wall, #E8ECF2); color: var(--ink, #10285C); font: 600 var(--t-small, 18px)/1.2 var(--f, Georgia, serif);
  transition: background-color .18s var(--ease, ease), transform .12s var(--ease, ease);
}
@media (hover: hover) and (pointer: fine) { .mu-b:hover { background: var(--tone, #D9E1EF); } }
.mu-b:active { transform: scale(.98); }
.mu-b[aria-pressed="true"] { background: var(--ink, #10285C); color: var(--paper, #F8F9FB); }
.mu-b:disabled { opacity: .6; cursor: progress; }
.mu-perto { min-height: 60px; background: var(--ink, #10285C); color: var(--paper, #F8F9FB); }
@media (hover: hover) and (pointer: fine) { .mu-perto:hover { background: var(--cobalt, #1C4597); } }

/* countries: flag tiles; they wrap on a wide screen and slide sideways under the thumb on a phone */
.mu-filtros { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin: 0 0 6px; }
.mu-paises { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mu-pais { display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 6px; }
.mu-pais .mu-num { font-weight: 400; }
.mu-bandeira { width: 40px; height: 40px; flex: none; display: block; }
.mu-pais .mu-bandeira { width: 32px; height: 32px; }

/* the room: the map on the left, the results or the place on the right */
.mu-sala { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 6px; }
.mu-sala.sem-mapa { grid-template-columns: minmax(0, 1fr); }
.mu-mapa {
  position: sticky; top: 72px; align-self: start; height: min(calc(100svh - 120px), 780px); min-height: 440px;
  background: #A9C1E4; overflow: hidden;
}
.mu-mapa[hidden] { display: none; }
.mundo .mu-mapa-in { position: absolute; inset: 0; width: 100%; height: 100%; }
.mu-voltar { position: absolute; left: 12px; top: 12px; z-index: 3; background: var(--paper, #F8F9FB); }
.mu-voltar[hidden] { display: none; }
.mu-nota { margin: 12px 0 0; color: var(--muted, #3D4966); font-size: var(--t-small, 18px); line-height: 1.4; max-width: 72ch; }

/* MapLibre's own controls, made flat and square like the page */
.mundo .mu-mapa .maplibregl-ctrl-group, .mundo .mu-mapa .maplibregl-ctrl-group:not(:empty) { border-radius: 0; box-shadow: none; } /* taste-skill-ignore: removes the map library's own shadow */
.mundo .maplibregl-ctrl-group button { width: 44px; height: 44px; }
.mundo .maplibregl-ctrl-attrib { font-size: 14px; }
.mundo .maplibregl-cooperative-gesture-screen { font: 600 var(--t-body, 20px)/1.3 var(--f, Georgia, serif); }

/* the side: results, or one place */
.mu-lado { background: var(--paper, #F8F9FB); padding: 24px; display: grid; align-content: start; gap: 14px; min-width: 0; }
.mu-lado p { margin: 0; font-size: var(--t-body, 20px); line-height: 1.45; }
.mu-lado .mu-conta { margin: 0; font-size: var(--t-lead, 24px); line-height: 1.3; font-weight: 400; }
.mu-aviso { background: var(--lilas-claro, #ECE6F5); padding: 14px 16px; }
.mu-resultados { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mu-res {
  width: 100%; min-height: 64px; padding: 10px 14px 10px 10px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px;
  border: 0; border-radius: 0; cursor: pointer; text-align: left; background: var(--wall, #E8ECF2); color: var(--ink, #10285C);
  font: 400 var(--t-small, 18px)/1.3 var(--f, Georgia, serif); transition: background-color .18s var(--ease, ease);
}
@media (hover: hover) and (pointer: fine) { .mu-res:hover { background: var(--tone, #D9E1EF); } }
.mu-res.palido { background: var(--paper, #F8F9FB); outline: 2px solid var(--wall, #E8ECF2); outline-offset: -2px; }
.mu-res-t { display: grid; gap: 2px; min-width: 0; }
.mu-res-t b { font-size: var(--t-body, 20px); font-weight: 600; overflow-wrap: anywhere; }
.mu-res-t span { color: var(--muted, #3D4966); overflow-wrap: anywhere; }
.mu-res-t .mu-km { color: var(--ink, #10285C); font-weight: 600; }
.mu-mais, .mu-limpar, .mu-atras { justify-self: start; }

.mu-lado h3 { margin: 0; font-size: var(--t-h2, 44px); line-height: 1.05; font-weight: 600; overflow-wrap: anywhere; }
.mu-lado .mu-onde { display: flex; align-items: center; gap: 14px; font-size: var(--t-lead, 24px); line-height: 1.3; }
.mu-lado .mu-resumo { color: var(--muted, #3D4966); }
.mu-linhas { display: grid; gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.mu-linhas li { font-size: var(--t-body, 20px); line-height: 1.45; }
.mu-linhas b { font-weight: 600; }
.mu-lado a { color: var(--cobalt, #1C4597); text-underline-offset: 3px; }
.mu-lado .mu-fonte { font-size: var(--t-small, 18px); white-space: nowrap; }
.mu-lado .mu-conf { font-size: var(--t-small, 18px); color: var(--muted, #3D4966); }
.mu-pergunta { background: var(--lilas-claro, #ECE6F5); padding: 18px 20px; display: grid; gap: 10px; margin-top: 10px; }
.mu-pergunta .mu-pergunta-t { font-weight: 600; }

/* the plain list: all there is without script */
.mu-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px clamp(24px, 3vw, 48px); }
.mu-l-tit { margin: 0 0 10px; font-size: var(--t-lead, 24px); font-weight: 600; display: flex; align-items: center; gap: 14px; }
.mu-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mu-lista li li { font-size: var(--t-small, 18px); line-height: 1.4; }
.mu-lista li li span { color: var(--muted, #3D4966); }

/* motion: a new side rises in; nothing moves with reduced motion */
@keyframes mu-sobe { from { opacity: 0; transform: translateY(12px); } }
.mu-lado > * { animation: mu-sobe .38s var(--ease, cubic-bezier(.2, .7, .2, 1)) backwards; }
.mu-lado > :nth-child(2) { animation-delay: 50ms; } .mu-lado > :nth-child(3) { animation-delay: 100ms; } .mu-lado > :nth-child(n+4) { animation-delay: 150ms; }
.mu-resultados li { animation: mu-sobe .36s var(--ease, cubic-bezier(.2, .7, .2, 1)) backwards; }
.mu-resultados li:nth-child(1) { animation-delay: 120ms; } .mu-resultados li:nth-child(2) { animation-delay: 160ms; }
.mu-resultados li:nth-child(3) { animation-delay: 200ms; } .mu-resultados li:nth-child(4) { animation-delay: 240ms; }
.mu-resultados li:nth-child(5) { animation-delay: 280ms; } .mu-resultados li:nth-child(6) { animation-delay: 320ms; }
.mu-resultados li:nth-child(7) { animation-delay: 360ms; } .mu-resultados li:nth-child(8) { animation-delay: 400ms; }
.mu-resultados li:nth-child(n+9) { animation-delay: 440ms; }
.mu-paises li { animation: mu-sobe .36s var(--ease, cubic-bezier(.2, .7, .2, 1)) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
@media (prefers-reduced-motion: reduce) { .mu-lado > *, .mu-b, .mu-res, .mu-resultados li, .mu-paises li { animation: none; transition: none; } }

@media (max-width: 1080px) {
  .mu-sala { grid-template-columns: 1fr; }
  .mu-mapa { position: relative; top: auto; height: min(62svh, 620px); min-height: 360px; }
}
@media (max-width: 760px) {
  .mu-head { grid-template-columns: 1fr; }
  .mu-head > .lead { grid-column: 1; }
  .mu-procura { grid-template-columns: 1fr; }
  .mu-perto { min-height: 52px; }
  .mu-filtros { flex-wrap: nowrap; flex-direction: column; align-items: stretch; }
  .mu-paises { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-right: calc(-1 * var(--m, 16px)); padding-right: var(--m, 16px); scrollbar-width: none; }
  .mu-paises::-webkit-scrollbar { display: none; }
  .mu-paises li { flex: none; scroll-snap-align: start; }
  .mu-hoje { align-self: flex-start; }
  .mu-mapa { height: 58svh; min-height: 340px; }
  .mu-lado { padding: 22px var(--m, 16px) 28px; }
  .mu-lado h3 { font-size: var(--t-h2, 30px); }
}

/* the Atlantic in tile opens the section: from its top joint, across the whole wall */
.mundo > .friso { margin: calc(-1 * clamp(72px, 9vw, 128px)) calc(-1 * var(--m, 24px)) clamp(48px, 6vw, 88px); }