/* ═══════════════════════════════════════════════════════════════
   Parque São Lucas II · Vista da Serra — TV touch do stand
   Paleta e tipografia do manual de identidade (docs/03-sistema-visual.md)
   Ergonomia calibrada para TV de 65": nessa tela 1vh ≈ 8 mm físicos;
   alvos de toque entre 4 e 5,5 cm (5 a 7 vh), textos de apoio ≥ 1,4 cm.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Aleo';
  src: url('../fontes/Aleo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fontes/HankenGrotesk-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Scoth Brace';
  src: url('../fontes/ScothBrace-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --verde:            #083621;
  --terracota:        #BE8462;
  --areia:            #E8DCC8;
  --branco:           #FFFFFF;
  --superficie-escura:#18422D;
  --borda-escura:     #355742;
  --texto-sec-escuro: #9CA48F;

  --f-titulo: 'Aleo', Georgia, serif;
  --f-texto:  'Hanken Grotesk', system-ui, sans-serif;

  /* véu dos painéis flutuantes */
  --veu: rgba(8, 54, 33, 0.62);
  --veu-borda: rgba(232, 220, 200, 0.28);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--verde);
  color: var(--areia);
  font-family: var(--f-texto);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  /* pan-y bloqueia pinça e zoom por toque duplo no Chromium (kiosk
     não pode ficar preso em zoom). Áreas de gesto próprio usam
     touch-action: none localmente. */
  touch-action: pan-y;
}

body.sem-cursor, body.sem-cursor * { cursor: none !important; }

img, svg, video { display: block; }
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* ── Menu fixo (rail) ──────────────────────────────────────── */

.rail {
  position: fixed;
  left: 1.6vh;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1vh 0.9vh;
  background: var(--veu);
  border: 1px solid var(--veu-borda);
  border-radius: 100vh;
}

.rail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6vh;   /* ~4,8 cm na TV de 65" */
  height: 6vh;
  min-width: 48px;
  min-height: 48px;
  margin: 0.5vh 0;
  border-radius: 50%;
  border: 1px solid transparent;
  color: var(--areia);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.rail-btn svg { width: 54%; height: 54%; }
.rail-btn img { width: 62%; }
.rail-btn:active { transform: scale(0.92); }
.rail-btn.ativa { background: var(--areia); color: var(--verde); }

.rail-btn .rail-iso-verde { display: none; }
.rail-btn.ativa .rail-iso-verde { display: block; }
.rail-btn.ativa .rail-iso-bege { display: none; }

.rail-sep {
  width: 3.2vh;
  height: 1px;
  margin: 0.6vh 0;
  background: rgba(232, 220, 200, 0.25);
}

/* Registrar interesse: fundo verde sólido com anel bege, para não
   sumir contra o véu do rail (é a única captura de lead do kiosk). */
.rail-cta {
  background: #0B4B2E;
  border-color: var(--areia);
  box-shadow: 0 0 0 1px rgba(232, 220, 200, 0.25);
}
.rail-cta svg { stroke-width: 1.9; }
.rail-cta:active { background: var(--areia); color: var(--verde); }

/* ── Submenu da página: coluna vertical ao lado do rail ────── */

.subrail {
  position: absolute;
  left: 11vh; /* encostado no rail, sem invadir o centro da tela */
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4vh 1.2vh;
  background: var(--veu);
  border: 1px solid var(--veu-borda);
  border-radius: 3vh;
}

.subrail-divisor {
  width: 4vh;
  height: 1px;
  margin: 1vh 0;
  background: rgba(232, 220, 200, 0.25);
}

.subrail-legenda {
  margin-top: 0.9vh;
  font-size: 1.7vh;
  letter-spacing: 0.05em;
  color: var(--texto-sec-escuro);
  text-align: center;
}

/* ── Crédito GHP (topo direito, discreto) ──────────────────── */

/* Fica no canto inferior direito, por cima da marca d'água dos
   vídeos gerados, com fundo quase sólido para cobri-la. */
.credito-ghp {
  position: fixed;
  bottom: 1.8vh;
  right: 1.8vh;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1vh 1.55vh;
  background: rgba(8, 54, 33, 0.92);
  border: 1px solid var(--veu-borda);
  border-radius: 100vh;
  color: var(--areia);
  text-align: right;
  /* informativo, não interativo: o toque atravessa */
  pointer-events: none;
}
.credito-ghp img {
  width: 1.82vh;
  height: 1.82vh;
  margin-left: 1vh;
}
.credito-ghp span {
  font-size: 0.85vh;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-align: right;
  color: var(--texto-sec-escuro);
}
.credito-ghp strong { color: var(--areia); font-weight: 600; }

/* ── Telas ─────────────────────────────────────────────────── */

.tela {
  position: fixed;
  inset: 0;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
}
.tela.ativa { display: block; }

.video-fundo {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--verde);
}

.area-arraste {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  touch-action: none;
  cursor: grab;
}
.area-arraste.arrastando { cursor: grabbing; }

/* ── Modo apresentação: só a imagem, sem controles ─────────── */

body.apresentando .subrail,
body.apresentando .obra-rotulo,
body.apresentando .dica-arraste,
body.apresentando .btn-fullscreen {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
/* O rail continua legível: precisa ficar claro que dá para tocar. */
body.apresentando .rail {
  opacity: 0.5;
  transition: opacity 0.5s ease;
}
.subrail, .obra-rotulo, .rail, .btn-fullscreen {
  transition: opacity 0.5s ease;
}

/* ── Transição de marca entre telas ────────────────────────── */

.transicao {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--verde);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.transicao img { width: 16vh; }

.transicao.ativa {
  visibility: visible;
  pointer-events: auto;
  animation: trans-veu 0.95s ease-in-out both;
}
.transicao.ativa img {
  animation: trans-logo 0.95s ease-in-out both;
}

@keyframes trans-veu {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  68%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes trans-logo {
  0%   { opacity: 0; transform: scale(0.86); }
  32%  { opacity: 1; transform: scale(1); }
  66%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ── Botões de ícone ───────────────────────────────────────── */

.btn-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6.4vh;
  height: 6.4vh;
  min-width: 48px;
  min-height: 48px;
  margin: 0.5vh 0;
  border-radius: 50%;
  background: rgba(232, 220, 200, 0.14);
  border: 1px solid rgba(232, 220, 200, 0.35);
  color: var(--areia);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn-icone svg { width: 52%; height: 52%; }
.btn-icone:active { transform: scale(0.92); background: rgba(8, 54, 33, 0.8); }
.btn-icone.inativo { opacity: 0.3; }

/* Discreto e presente em todas as telas: canto inferior esquerdo,
   fora do caminho do rail e do crédito. */
.btn-fullscreen {
  position: fixed;
  left: 2vh;
  bottom: 2vh;
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.2vh;
  height: 5.2vh;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgba(8, 54, 33, 0.45);
  border: 1px solid rgba(232, 220, 200, 0.18);
  color: var(--texto-sec-escuro);
  transition: transform 0.15s ease, color 0.2s ease;
}
.btn-fullscreen svg { width: 50%; height: 50%; }
.btn-fullscreen:active { transform: scale(0.92); color: var(--areia); }
.btn-fullscreen .icone-encolher { display: none; }
.btn-fullscreen.cheio .icone-expandir { display: none; }
.btn-fullscreen.cheio .icone-encolher { display: block; }


/* ── Evolução ──────────────────────────────────────────────── */

.subrail-evolucao .btn-play { margin-bottom: 0.2vh; }

.btn-play .icone-pausa { display: none; }
.btn-play.tocando .icone-play { display: none; }
.btn-play.tocando .icone-pausa { display: block; }
.btn-play.tocando {
  background: var(--areia);
  color: var(--verde);
  border-color: var(--areia);
}

.fases {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Um botão por ano: o número manda, a etapa é legenda. */
.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 14vh;   /* ~11 cm: legível a distância numa TV de 65" */
  padding: 1.5vh 1.2vh;
  margin: 0.5vh 0;
  border-radius: 1.8vh;
  border: 1px solid rgba(232, 220, 200, 0.45);
  background: rgba(8, 54, 33, 0.45);
  color: var(--areia);
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.chip:active { transform: scale(0.95); }

.chip-ano {
  font-family: var(--f-titulo);
  font-size: 2.9vh;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.chip.atual {
  background: var(--areia);
  border-color: var(--areia);
  color: var(--verde);
}

.chip.alvo {
  border-color: var(--areia);
  animation: pulso 0.9s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { background: rgba(232, 220, 200, 0.12); }
  50%      { background: rgba(232, 220, 200, 0.38); }
}

/* ── Vistas: trilho vertical de rotação ────────────────────── */

.dica-arraste {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.4vh 3vh;
  border-radius: 1.4vh;
  background: rgba(8, 54, 33, 0.55);
  color: var(--areia);
  font-size: 2.1vh;
  letter-spacing: 0.03em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.dica-arraste.oculta { opacity: 0; }
.dica-arraste svg { width: 6.5vh; height: 3.2vh; margin-bottom: 1.1vh; }

/* Na planta a dica desce para o rodapé: o centro é o próprio mapa. */
.dica-planta {
  top: auto;
  bottom: 4vh;
  transform: translateX(-50%);
  flex-direction: row;
  padding: 1.4vh 2.4vh;
}
.dica-planta svg { width: 3.2vh; height: 3.2vh; margin: 0 1.2vh 0 0; }

/* Respiro generoso nas pontas para a alça e o rótulo de graus
   nunca vazarem do quadro. */
.subrail-vistas { padding: 2vh 2vh 4vh; }

/* O vídeo das Vistas amplia sobre o próprio quadro. */
#vis-video {
  transform-origin: 50% 50%;
  will-change: transform;
}

.vtrilho {
  position: relative;
  width: 14.5vh;
  height: 52vh;
  touch-action: none;
}

.vtrilho-linha {
  position: absolute;
  top: 0; bottom: 0;
  left: 8vh;
  width: 2px;
  margin-left: -1px;
  background: rgba(232, 220, 200, 0.4);
}

.vtrilho-marcas {
  position: absolute;
  top: 0; bottom: 0;
  left: 8vh;
}
.vtrilho-marcas span {
  position: absolute;
  right: 1.5vh;
  transform: translateY(-50%);
  font-size: 1.5vh;
  color: var(--texto-sec-escuro);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.vtrilho-marcas span:nth-child(1) { top: 0; }
.vtrilho-marcas span:nth-child(2) { top: 25%; }
.vtrilho-marcas span:nth-child(3) { top: 50%; }
.vtrilho-marcas span:nth-child(4) { top: 75%; }
.vtrilho-marcas span:nth-child(5) { top: 100%; }

.vtrilho-cursor {
  position: absolute;
  left: 8vh;
  top: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.vtrilho-alca {
  width: 3.6vh;
  height: 3.6vh;
  margin-left: -1.8vh;
  margin-top: -1.8vh;
  border-radius: 50%;
  background: var(--areia);
  border: 2px solid var(--verde);
  box-shadow: 0 0 0 2px rgba(232, 220, 200, 0.35), 0 2px 10px rgba(0, 0, 0, 0.45);
}

.vtrilho-graus {
  margin-left: 1.2vh;
  margin-top: -1.8vh;
  font-family: var(--f-titulo);
  font-size: 2.3vh;
  font-weight: 600;
  color: var(--areia);
  text-shadow: 0 1px 6px rgba(8, 54, 33, 0.9);
}

/* ── Obras: foto em tela cheia + miniaturas verticais ──────── */

/* Duas camadas que se cruzam num fade: a troca de foto nunca deixa
   o fundo aparecer. O leve zoom base dá folga para o arrasto
   acompanhar o dedo sem descobrir as bordas. */
.obra-palco {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: var(--verde);
}

.obra-foto {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.46s ease, transform 0.42s ease;
  will-change: opacity, transform;
}
.obra-foto.visivel { opacity: 1; }

.subrail-obras { padding: 1.2vh 1vh; }

.obras-minis {
  display: flex;
  flex-direction: column;
}

.obra-mini {
  width: 10.6vh;   /* ~8,5 cm de largura, alvo confortável */
  height: 6vh;
  margin: 0.35vh 0;
  border-radius: 0.9vh;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.72;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.obra-mini:active { transform: scale(0.95); }
.obra-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.obra-mini.ativa {
  border-color: var(--areia);
  opacity: 1;
}

.obra-rotulo {
  position: absolute;
  top: 2.4vh;
  left: 11vh;
  z-index: 20;
  padding: 1.1vh 1.8vh;
  border-radius: 100vh;
  background: var(--veu);
  border: 1px solid var(--veu-borda);
}
.obra-rotulo-titulo {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 2.2vh;
  margin-right: 1vh;
}
.obra-rotulo-sub {
  font-size: 1.6vh;
  color: var(--texto-sec-escuro);
}

/* ── Planta ────────────────────────────────────────────────── */

#tela-planta { background: #0A3D26; }

/* A planta preenche a tela inteira, sem moldura nem sombra:
   o quadro sumiu, sobrou só o mapa. */
.planta-palco {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}
.planta-palco.arrastando { cursor: grabbing; }

#planta-img {
  max-width: none;
  will-change: transform;
}

/* ── Informações ───────────────────────────────────────────── */

.info-fundo {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url('../img/info-poster.jpg') center / cover no-repeat;
}
.info-fundo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8, 54, 33, 0.9);
}

.info-conteudo {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5vh 0 13vh;
}

.info-cabeca {
  text-align: center;
  margin-bottom: 3.4vh;
}
.info-logo {
  width: 40vh;
  margin: 0 auto;
}
.info-cabeca p {
  margin-top: 1.4vh;
  font-size: 1.9vh;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-sec-escuro);
}

.info-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 118vh;
}
.stat {
  width: 37vh;
  margin: 0.7vh;
  padding: 2.4vh 2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(24, 66, 45, 0.72);
  border: 1px solid var(--borda-escura);
  border-radius: 1.6vh;
}
.stat svg {
  width: 3.6vh;
  height: 3.6vh;
  margin-bottom: 1.2vh;
  color: var(--terracota);
}
.stat strong {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 3.9vh;
  line-height: 1.1;
  color: var(--areia);
}
.stat span {
  display: block;
  margin-top: 0.6vh;
  font-size: 1.75vh;
  letter-spacing: 0.03em;
  color: var(--texto-sec-escuro);
}

.info-destaques {
  display: flex;
  justify-content: center;
  max-width: 118vh;
  margin-top: 2.6vh;
}
.destaque {
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin: 0 1.6vh;
  max-width: 37vh;
}
.destaque svg {
  flex: none;
  width: 3.2vh;
  height: 3.2vh;
  margin-right: 1.4vh;
  color: var(--terracota);
}
.destaque p {
  font-size: 1.95vh;
  line-height: 1.45;
  text-align: left;
  color: var(--texto-sec-escuro);
}
.destaque strong { color: var(--areia); font-weight: 600; }

/* ── Popup: registrar interesse ────────────────────────────── */

.pop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4, 26, 16, 0.8);
}
.pop.aberto { display: flex; }

.pop-cartao {
  position: relative;
  width: 58vh;
  padding: 3.6vh 3.6vh 3vh;
  background: var(--superficie-escura);
  border: 1px solid var(--borda-escura);
  border-radius: 2.4vh;
  box-shadow: 0 2vh 8vh rgba(0, 0, 0, 0.5);
}

.pop-cartao h2 {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 3.4vh;
}
.pop-sub {
  margin-top: 0.8vh;
  font-size: 1.9vh;
  color: var(--texto-sec-escuro);
}

.pop-campos { margin-top: 2.6vh; }

.campo {
  display: block;
  width: 100%;
  padding: 1.5vh 1.8vh;
  margin-bottom: 1.2vh;
  text-align: left;
  background: rgba(8, 54, 33, 0.55);
  border: 1px solid var(--borda-escura);
  border-radius: 1.4vh;
  transition: border-color 0.15s ease;
}
.campo.ativa { border-color: var(--areia); }

.campo-rotulo {
  display: block;
  font-size: 1.5vh;
  letter-spacing: 0.06em;
  color: var(--texto-sec-escuro);
}
.campo-valor {
  display: block;
  margin-top: 0.4vh;
  font-size: 2.6vh;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--areia);
  min-height: 3.2vh;
}
.campo-valor.vazio { color: rgba(232, 220, 200, 0.35); font-weight: 400; }

.teclado { margin-top: 1.6vh; }

.teclado-digitos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.teclado-digitos button {
  width: 15vh;
  height: 6.4vh;   /* tecla de ~5 cm */
  margin: 0.45vh;
  border-radius: 1.2vh;
  background: rgba(8, 54, 33, 0.55);
  border: 1px solid var(--borda-escura);
  color: var(--areia);
  font-size: 2.8vh;
  font-weight: 600;
}
.teclado-digitos button:active { background: var(--areia); color: var(--verde); }
.teclado-digitos .tecla-zero { margin-left: 16.4vh; }
.tecla-apagar svg { width: 3.2vh; height: 3.2vh; margin: 0 auto; }

.pop-acoes {
  display: flex;
  justify-content: space-between;
  margin-top: 2.4vh;
}
.pop-acoes button {
  flex: 1;
  padding: 1.8vh 0;
  border-radius: 1.4vh;
  font-size: 2.2vh;
  font-weight: 600;
  letter-spacing: 0.03em;
}
#pop-cancelar {
  margin-right: 1.2vh;
  background: transparent;
  border: 1px solid var(--borda-escura);
  color: var(--texto-sec-escuro);
}
#pop-enviar {
  background: var(--areia);
  color: var(--verde);
}
#pop-enviar:disabled {
  opacity: 0.35;
  cursor: default;
}

.pop-ok {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--superficie-escura);
  border-radius: 2.4vh;
  font-size: 2.6vh;
  text-align: center;
  padding: 0 4vh;
}
.pop-ok svg { width: 8vh; height: 8vh; margin-bottom: 2vh; color: var(--areia); }
.pop.sucesso .pop-ok { display: flex; }