/* O painel de mercado do espelho: o copy do /markets dentro do mapa do 8900.
   Folha branca a entrar pela direita, com os cantos de 22px do resto do tema. */
/* A geometria e a do painel original do 8900, medida nele: contentor fixo com
   0.69444vw de folga e de intervalo, goteira transparente a esquerda com o X
   encostado a direita e centrado na vertical, e o cartao branco a 74.375vw-10px
   — que reproduz ao pixel o que ele mede em 1280, 1440, 1600, 1920 e 2560 (942,
   1061, 1180, 1418 e 1894). Antes disto era uma gaveta de 780px com o X dentro. */
.rmp-pagina{
  position:fixed; inset:0; z-index:200;
  display:flex; justify-content:flex-end;
  gap:.69444vw; padding:.69444vw;
  pointer-events:none;
  transition:background .85s ease, backdrop-filter .85s ease;
}
.rmp-pagina.aberto{
  pointer-events:auto;
  background:#0b20394d;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.rmp-goteira{
  flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end;
  opacity:0; cursor:pointer; transition:opacity .85s ease;
}
.rmp-pagina.aberto .rmp-goteira{ opacity:1; }
.rmp{
  flex:0 0 calc(74.375vw - 10px); height:100%;
  overflow-y:auto; overscroll-behavior:contain;
  background:#fff; color:#0c2340;
  border-radius:22px;
  box-shadow:0 2px 14px #0000000a, inset 4px 4px 14px 8px #ffffff26;
  transform:translateX(calc(100% + .69444vw));
  transition:transform .85s cubic-bezier(.45,0,.25,1);
  font-family:Inter, "Albert Sans", system-ui, sans-serif;
}
.rmp.aberto{ transform:none; }
.rmp-fechar{
  flex:0 0 auto;
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid #0c234021; border-radius:999px; background:#fff;
  color:#0c2340; font-size:19px; line-height:1; cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
}
.rmp-fechar:hover{ background:#0c23400a; border-color:#d4c291; }
.rmp-fechar:active{ transform:scale(.94); }
/* ---------------------------------------------------------------------------
   O INTERIOR do cartao, no esquema que foi pedido para a ficha de cada pais
   (a referência): rotulos curtos numa goteira a esquerda,
   nome do pais em grande e ao centro, fotografia a toda a largura, leitura em
   duas colunas com as seccoes dobraveis ao lado, e os numeros em grelha.

   A casca — .rmp-pagina, .rmp-goteira, .rmp, .rmp-fechar, aqui em cima — nao se
   toca: e a forma como o cartao entra em cena e e a mesma do mapa.
   --------------------------------------------------------------------------- */
.rmp-corpo{
  padding:clamp(28px,4vw,72px) clamp(24px,5vw,86px) clamp(32px,4vw,64px);
  /* A medida de leitura da referencia: o conteudo nao vai ate a borda do cartao. */
  max-width:1180px; margin:0 auto;
}

/* O cartao a espera dos dados do servidor: fica branco, sem salto de altura. */
.rmp.a-carregar{ min-height:60vh; }

/* --- 1. Nome do pais --- */
.rmp-topo{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:start; gap:16px;
  padding-bottom:clamp(22px,3vw,34px);
}
.rmp-sobrescrito{
  grid-column:1; justify-self:start; padding-top:10px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#0c234077;
}
.rmp-topo h1{
  grid-column:2; margin:0; text-align:center;
  font-family:Gelasio,Georgia,"Times New Roman",serif; font-weight:400;
  font-size:clamp(34px,5vw,64px); line-height:1.02; letter-spacing:-.03em;
}
.rmp-local{
  grid-column:2; grid-row:2; text-align:center; margin-top:10px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#0c234099;
}

/* --- 2. Fotografia de abertura --- */
/* De lado a lado do cartao, como no desenho. O corpo tem uma goteira para a medida de
   leitura do texto; a fotografia sai dela com uma margem negativa do tamanho exacto dessa
   goteira — e nao com uma largura em vh, que mudaria de sitio conforme o ecra. */
.rmp-heroi{
  display:block;
  width:calc(100% + clamp(24px,5vw,86px) * 2);
  max-width:none;
  margin-inline:calc(clamp(24px,5vw,86px) * -1);
  height:clamp(260px,42vw,620px); object-fit:cover;
  border-radius:0;
}

/* Cada bloco a seguir traz o seu rotulo na goteira da esquerda, como na referencia:
   abaixo de 860px a goteira desaparece e o rotulo passa a ser uma linha por cima. */
.rmp-rotulo{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#0c234077;
  padding-top:6px;
}
.rmp-abertura,
.rmp-leitura,
.rmp-numeros,
.rmp-galeria{
  display:grid; grid-template-columns:120px minmax(0,1fr); gap:clamp(20px,4vw,52px);
  margin-top:clamp(34px,5vw,68px);
}

/* --- 3. A frase de abertura, em corpo grande --- */
.rmp-intro{
  margin:0; font-size:clamp(19px,1.9vw,26px); font-weight:400;
  line-height:1.38; letter-spacing:-.018em; color:#0c2340;
}

/* --- 4. A leitura --- */
.rmp-leitura{ align-items:start; }
/* O rotulo da leitura nao existe: a coluna da esquerda e ocupada pelas dobras,
   que na referencia sao exactamente o que esta nessa posicao (Team / Services). */
.rmp-leitura > .rmp-dobras{ grid-column:1 / span 2; }
.rmp-colunas{
  grid-column:1 / span 2;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,44px);
}
.rmp-colunas p{
  margin:0 0 14px; font-size:14px; line-height:1.68; color:#0c2340c4;
}
.rmp-colunas p:last-child{ margin-bottom:0; }
.rmp-dobras{ margin-bottom:clamp(24px,3vw,40px); border-top:1px solid #0c234018; }
.rmp-dobras article{ border-bottom:1px solid #0c234018; }
.rmp-dobras button{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:17px 2px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:15px; font-weight:500; color:#0c2340; text-align:left;
  letter-spacing:-.01em;
}
.rmp-dobras button b{ font-weight:400; font-size:18px; color:#0c234066; }
.rmp-dobras button:hover b{ color:#0c2340; }
.rmp-dobras .rmp-dobra{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease;
}
.rmp-dobras article.aberta .rmp-dobra{ grid-template-rows:1fr; }
.rmp-dobras .rmp-dobra > div{ overflow:hidden; }
.rmp-dobras .rmp-dobra p{
  margin:0 0 13px; font-size:14px; line-height:1.68; color:#0c2340c4;
  max-width:62ch;
}
.rmp-dobras article.aberta .rmp-dobra > div{ padding-bottom:10px; }

/* --- 5. Os numeros, na faixa da referencia: texto pequeno em cima, numero grande
       em baixo, com um risco a separar cada coluna. --- */
.rmp-grelha{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(18px,2.4vw,34px);
}
.rmp-grelha article{
  display:flex; flex-direction:column;
  padding-top:16px; border-top:1px solid #0c234018;
}
.rmp-grelha p{
  margin:0 0 clamp(20px,3vw,44px); font-size:12.5px; line-height:1.6; color:#0c2340a8;
}
.rmp-grelha strong{
  margin-top:auto; font-family:Gelasio,Georgia,"Times New Roman",serif; font-weight:400;
  font-size:clamp(34px,4.2vw,54px); line-height:1; letter-spacing:-.03em;
}
.rmp-grelha span{
  margin-top:8px; font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:#0c234077;
}

/* --- 6. Galeria --- */
.rmp-galeria{ position:relative; }
.rmp-janela{ overflow:hidden; border-radius:14px; }
.rmp-carris{ display:flex; transition:transform .5s cubic-bezier(.22,.61,.24,1); }
.rmp-carris img{
  flex:0 0 100%; width:100%; height:clamp(200px,28vw,380px);
  object-fit:cover; display:block;
}
.rmp-setas{ grid-column:2; display:flex; gap:10px; margin-top:14px; }
.rmp-setas button{
  width:40px; height:40px; border:1px solid #0c234021; border-radius:999px;
  background:#fff; color:#0c2340; cursor:pointer; font-size:15px;
  transition:background .2s, border-color .2s, transform .2s;
}
.rmp-setas button:hover{ background:#0c23400a; border-color:#d4c291; }
.rmp-setas button:active{ transform:scale(.94); }

/* --- 7. Faixa de remate --- */
.rmp-cta{
  margin-top:clamp(38px,5vw,72px); padding:clamp(28px,3.4vw,46px);
  border-radius:14px; background:linear-gradient(150deg,#0c2340,#071b30); color:#fff;
}
.rmp-cta h2{
  margin:0 0 22px; font-family:Gelasio,Georgia,"Times New Roman",serif; font-weight:400;
  font-size:clamp(21px,2.5vw,32px); line-height:1.18; letter-spacing:-.02em;
  max-width:22ch;
}
.rmp-cta a{
  display:inline-flex; align-items:center; gap:9px; padding:12px 24px;
  border-radius:999px; background:#d4c291; color:#0c2340;
  font-size:13px; font-weight:700; text-decoration:none;
  transition:background .25s, transform .22s cubic-bezier(.22,.61,.24,1);
}
.rmp-cta a:hover{ background:#e2d3a8; transform:translateY(-2px); }
.rmp-cta a:active{ transform:translateY(0) scale(.97); }
/* A segunda ligacao: a pagina aberta do pais. Fica a seguir ao botao cheio, em contorno,
   para o primeiro continuar a ser o primeiro. */
.rmp-cta a.rmp-cta-pagina{
  margin-left:10px; background:none; color:#fff;
  box-shadow:inset 0 0 0 1px #ffffff55; font-weight:400;
}
.rmp-cta a.rmp-cta-pagina:hover{ background:#ffffff14; box-shadow:inset 0 0 0 1px #ffffffaa; }
@media (max-width:620px){
  .rmp-cta a.rmp-cta-pagina{ margin-left:0; margin-top:10px; }
}

/* --- 8. Anterior / seguinte --- */
.rmp-passos{
  display:flex; justify-content:space-between; gap:14px; margin-top:28px;
  padding-top:22px; border-top:1px solid #0c234018;
}
.rmp-passos button{
  border:0; background:none; cursor:pointer; font:inherit; font-size:13px;
  color:#0c234099; transition:color .2s;
}
.rmp-passos button:hover{ color:#0c2340; }

/* Sem largura para a goteira dos rotulos: cada bloco passa a uma so coluna e o
   rotulo fica por cima, e o texto deixa de ser lado a lado. */
@media (max-width:980px){
  .rmp-abertura,
  .rmp-leitura,
  .rmp-numeros,
  .rmp-galeria{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .rmp-leitura > .rmp-dobras,
  .rmp-colunas{ grid-column:1; }
  .rmp-colunas{ grid-template-columns:minmax(0,1fr); gap:0; }
  .rmp-setas{ grid-column:1; }
  .rmp-topo{ grid-template-columns:minmax(0,1fr); }
  .rmp-sobrescrito,
  .rmp-topo h1,
  .rmp-local{ grid-column:1; text-align:left; }
  .rmp-local{ grid-row:auto; }
  .rmp-sobrescrito{ padding-top:0; }
}
/* Abaixo disto nao sobra faixa para o mapa: o cartao toma o ecra e o X volta
   para dentro dele, que e o unico sitio que resta. */
@media (max-width:860px){
  .rmp-pagina{ padding:0; gap:0; }
  .rmp-goteira{ position:absolute; top:14px; right:14px; z-index:2; flex:0 0 auto; }
  .rmp{ flex:0 0 100%; border-radius:0; }
}
@media (prefers-reduced-motion: reduce){
  .rmp, .rmp-carris, .rmp-pagina, .rmp-goteira{ transition:none; }
}

/* A lista fica viva por cima do escurecimento: trocar de mercado com o cartao
   aberto e o gesto principal do original, e sem isto o #rm-markets (z-index 55)
   ficava debaixo do painel (200) — apagado e sem receber cliques. */
/* Com um mercado aberto, a lista ao lado do globo sai: o cartao e que manda no ecra, e a
   lista por cima dele era a repetir uma escolha que ja foi feita. */
body.rm-rmp-open #rm-markets{ opacity:0; pointer-events:none; transition:opacity .35s ease; }

/* O cenario desliza para a faixa que o cartao deixa livre em vez de la aparecer
   de repente, no mesmo tempo e na mesma curva com que o cartao entra. A origem
   e posta no proprio elemento, pelo rm-painel.js, junto com a transformacao. */
.rm-cenario{
  transition:transform .85s cubic-bezier(.45,0,.25,1);
  will-change:transform;
}
/* O palco do mapa nasce com um cinzento claro por baixo da tela (#d4d4d3, do pacote
   original). Enquanto a cena esta parada no sitio nunca se ve; mal ela deslize, aparece
   uma faixa clara na borda oposta — que foi o que se viu ao abrir um mercado. O mesmo
   marinho do ceu da cena faz com que, deslize para onde deslizar, nao haja nada a
   denunciar que alguma coisa se mexeu. */
._Root_1srml_1{ background-color:#04101c !important; }
@media (prefers-reduced-motion: reduce){
  .rm-cenario{ transition:none; }
}


/* Num telemovel a lista de mercados ao lado do globo ocupa metade do ecra e tapa-o. Sai, e
   o que fica a vista por baixo do globo e o texto e o botao de contacto da propria pagina
   (ver MarketsClosing.tsx). O titulo grande tambem sai, que a essa largura nao cabe. */
@media (max-width: 760px) {
  #rm-markets { display: none !important; }
  #rm-lede { display: none !important; }
}

/* O convite por baixo do globo, como no desenho: encostado a esquerda, a frase grande em
   cima e a pequena por baixo. Estava centrado e com uma linha so. */
#rm-chamada{
  left:clamp(22px,5vw,112px) !important;
  transform:none !important;
  align-items:flex-start !important;
  text-align:left !important;
  width:min(92vw,620px) !important;
  gap:10px !important;
}
#rm-chamada.visivel{ transform:none !important; }
#rm-chamada p{ font-family:Inter,"Albert Sans",system-ui,sans-serif !important; font-weight:600;
  font-size:clamp(19px,2vw,28px) !important; line-height:1.18; }
#rm-chamada small{ font-size:clamp(12px,1.1vw,15px); line-height:1.5; color:#ffffffcc; }
#rm-chamada a{ margin-top:6px; }

/* O texto menor, e o convite ao centro por baixo do globo — o texto fica a esquerda. */
#rm-chamada p{ font-size:clamp(15px,1.5vw,21px) !important; }
#rm-chamada small{ font-size:clamp(11px,1vw,13px); }
#rm-chamada a{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:clamp(22px,3.2vh,46px); margin-top:0;
}
/* O bloco do texto sobe, para nao ficar por baixo do convite. */
#rm-chamada{ bottom:clamp(86px,12vh,140px) !important; }
@media (max-width:760px){
  #rm-chamada{ bottom:clamp(140px,19vh,180px) !important; }
}

/* O convite em vidro, com a seta numa bola azul. Isto tem de viver aqui: o convite esta
   dentro do documento do mapa, e o CSS do site nao lhe chega. */
#rm-chamada a{
  background:rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.24);
  color:#fff !important;
  transition:border-color .3s ease;
}
#rm-chamada a:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.5);
}
#rm-chamada a b{
  display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:#1763d6 !important; color:#fff !important;
  font-size:13px;
}
#rm-chamada a:hover b{ transform:none; }
#rm-chamada small{ font-size:clamp(13px,1.2vw,16px); }