/* wrapper geral */
.tourist-counter-wrap { display:inline-flex; align-items:center; gap:12px; }
.tourist-counter-label { font-weight:700; letter-spacing:0.02em; }

/* grid de caixas */
.tc-boxes { display:flex; align-items:center; gap:12px; }
.tc-sep { font-size: clamp(24px, 3.5vw, 42px); line-height: 1; margin: 0 6px; opacity:.7; }

/* caixa base */
.tc-box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: clamp(44px, 7.5vw, 96px);
  height: clamp(60px, 10vw, 120px);
  border-radius: 22px;
  background:#2b2b2b;
  color:#fff;
  font-weight:800;
  font-size: clamp(28px, 4.8vw, 64px);
  line-height:1;
  perspective: 600px;              /* necessário para flip 3D */
  box-shadow: 0 6px 18px rgba(0,0,0,.25) inset, 0 8px 22px rgba(0,0,0,.25);
}

/* cartão que gira */
.tc-flip {
  position: relative;
  display: inline-block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}

.tc-flip-front, .tc-flip-back {
  position: absolute;
  inset: 0;
  display:flex; align-items:center; justify-content:center;
  backface-visibility: hidden;
}

.tc-flip-front { transform: rotateX(0deg); }
.tc-flip-back  { transform: rotateX(-180deg); }

/* animação */
.tc-flip.is-flipping {
  animation: tcFlip 0.45s ease-in-out;
}

@keyframes tcFlip {
  0%   { transform: rotateX(0deg); }
  49%  { transform: rotateX(-89deg); }
  50%  { transform: rotateX(-180deg); }
  100% { transform: rotateX(-360deg); }
}

@media (max-width: 560px){
  .tc-boxes { gap:8px; }
  .tc-sep { margin:0 4px; }
}