/* poliedro — estilos comuns às versões PT (/index.html) e EN (/en/index.html) */

/* ---------- Base ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
}
body {
  /* largura do elemento raiz, nunca 100vw: sem scroll horizontal */
  width: 100%;
  overflow-x: hidden;
}

/* ---------- Composição: 30 × 105 unidades de desenho ----------
   1 unidade = 100cqw / 30 (cqw = 1% da largura do tapete)      */
.tapete {
  position: relative;
  width: 100%;                 /* a largura 30 = 100% da janela */
  aspect-ratio: 30 / 105;      /* altura proporcional */
  container-type: inline-size;
  background: #FFFFFF url("tapete.svg") 0 0 / 100% 100% no-repeat;
}
/* a versão EN está numa subpasta */
.en .tapete { background-image: url("../tapete.svg"); }

/* ---------- Cartões ----------
   --x, --y : canto superior esquerdo, em unidades de desenho.
   Largura sempre 14,85. Altura pela proporção 1 : √2.          */
.folha {
  position: absolute;
  left:  calc(var(--x) / 30  * 100%);
  top:   calc(var(--y) / 105 * 100%);
  width: calc(14.85 / 30 * 100%);
  background: #FFFFFF;
  /* sombra de folha pousada: discreta, sem flutuar */
  box-shadow:
    0 0.5px 0.5px rgba(16, 28, 52, 0.16),
    0 1px 2px rgba(16, 28, 52, 0.07);
}
.folha.vertical   { aspect-ratio: 14.85 / 21; }
.folha.horizontal { aspect-ratio: 14.85 / 10.5; }

.folha { cursor: zoom-in; }

/* Botão invisível sobre a folha inteira: só para teclado (foco,
   Enter, Espaço). Deixa passar o rato para o texto e os links do SVG. */
.abrir {
  all: unset;
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.abrir:focus-visible {
  outline: 2px solid #2F4A7A;
  outline-offset: 3px;
}

/* Imagem: ocupa o cartão inteiro (as margens brancas fazem parte dela) */
.folha img,
.lb-folha img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: transparent;          /* nunca mostrar o texto alt de imagem em falta */
}
.folha img:not(.carregada),
.sem-imagem img,
.com-svg img { visibility: hidden; }

/* Cartão em SVG: texto real, selecionável; links nativos */
.cartao-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}
.cartao-svg text {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.cartao-svg a { cursor: pointer; }
.cartao-svg a:focus-visible { outline: 1px solid #2F4A7A; }
.com-svg .num { display: none; }

/* Número da posição (por baixo da imagem; só se vê sem imagem) */
.num {
  position: absolute;
  right: 3%;
  bottom: 3%;
  font: 400 clamp(9px, 0.75vw, 13px) / 1 "IBM Plex Mono", ui-monospace, monospace;
  color: #C4C4C4;
  letter-spacing: 0.02em;
}

/* ---------- Texto do tapete (idioma e rodapé) ----------
   Desenhado sobre as margens azuis, em branco, como as marcações. */
.idioma,
.rodape {
  font-family: "Space Grotesk", sans-serif;
  color: #FFFFFF;
}

/* Botão de idioma: margem azul direita, à altura do topo da grelha */
.idioma {
  position: absolute;
  left:   calc(27.5 / 30  * 100%);
  top:    calc(2.5  / 105 * 100%);
  width:  calc(1.5  / 30  * 100%);
  height: calc(1.5  / 105 * 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: max(10px, calc(0.72 / 30 * 100cqw));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  opacity: 0.75;
}
.idioma::after {                 /* área de toque de ~44 px em mobile */
  content: "";
  position: absolute;
  inset: -12px;
}
.idioma:hover,
.idioma:focus-visible { opacity: 1; }
.idioma:focus-visible {
  outline: 1px solid #FFFFFF;
  outline-offset: 2px;
}

/* Rodapé: margem azul inferior, à largura da grelha */
.rodape {
  position: absolute;
  left:   calc(2.5   / 30  * 100%);
  width:  calc(25    / 30  * 100%);
  top:    calc(102.5 / 105 * 100%);
  height: calc(1.5   / 105 * 100%);
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: max(7px, calc(0.42 / 30 * 100cqw));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.rodape .ano { display: flex; gap: 2.4em; }
.rodape .nome b { font-weight: 600; }
.rodape .direitos { justify-self: end; }

/* ---------- Zonas clicáveis (folha de rosto) ---------- */
.zona {
  position: absolute;
  display: block;
  z-index: 2;
  color: #2F4A7A;
  text-decoration: none;
  outline: none;
}
.zona:hover,
.zona:focus-visible {
  box-shadow: inset 0 -1px 0 currentColor;   /* sublinhado subtil */
}
.debug .zona {
  outline: 1px solid #E00000;
  background: rgba(224, 0, 0, 0.08);
}

/* ---------- Ampliação ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 24, 44, 0.9);          /* azul muito escuro, de #2F4A7A */
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease-out, visibility 0s linear 180ms;
}
.lb.aberta {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease-out, visibility 0s;
}
.lb-folha {
  position: relative;
  background: #FFFFFF;
  cursor: auto;
  /* maior tamanho que caiba, com ~4% de margem, mantendo a proporção */
  width: min(92vw, calc(92vh * var(--r)));
  width: min(92vw, calc(92dvh * var(--r)));
  aspect-ratio: var(--r);
}
.lb-folha .num { font-size: clamp(10px, 1vw, 14px); }
.fechar {
  all: unset;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 11;
  padding: 14px 18px;
  min-height: 44px;
  box-sizing: border-box;
  font: 400 13px / 16px "IBM Plex Mono", ui-monospace, monospace;
  color: #FFFFFF;
  text-transform: lowercase;
  cursor: pointer;
}
.fechar:focus-visible {
  outline: 1px solid #FFFFFF;
  outline-offset: -6px;
}

/* Bloqueio de scroll enquanto a ampliação está aberta */
body.bloqueado {
  position: fixed;
  left: 0;
  right: 0;
}

/* ---------- Texto oculto (nunca display:none) ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}