#cc-intro {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #FBF6EA;
  color: #201811;
  transform: none;
  transition: transform 1.1s cubic-bezier(.75, 0, .2, 1);
}

#cc-intro[hidden] {
  display: none !important;
}

#cc-intro.cc-intro--exit {
  transform: translateY(-100%);
  pointer-events: none;
}

#cc-intro__badge {
  width: min(40vh, 58vw, 340px);
  aspect-ratio: 1 / 1;
  background-image: url(carricoche-sello.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: cc-intro-logo-in 1s cubic-bezier(.2, .75, .25, 1) both;
}

#cc-intro__sub {
  margin: -10px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #201811;
}

#cc-intro__meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#cc-intro__odo {
  font-family: 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .18em;
  background: #171209;
  border-radius: 6px;
  padding: 8px 22px;
  color: #F0D08C;
}

#cc-intro__odo span {
  font-size: 15px;
  color: #C8B893;
}

#cc-intro__track {
  width: 260px;
  height: 3px;
  background: rgba(32, 24, 17, .12);
  border-radius: 2px;
  overflow: hidden;
}

#cc-intro__bar {
  height: 100%;
  width: 0%;
  background: #6E2430;
  transition: width .12s linear;
}

#cc-intro__skip {
  position: absolute;
  right: 28px;
  bottom: 64px;
  background: none;
  border: 1px solid rgba(32, 24, 17, .35);
  color: #6B5D48;
  font-family: 'Raleway', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}

#cc-intro__skip:hover,
#cc-intro__skip:focus-visible {
  border-color: #201811;
  color: #201811;
}

#cc-intro__flag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: repeating-conic-gradient(#FBF6EA 0% 25%, #171209 0% 50%) 0 0 / 26px 26px;
}

@keyframes cc-intro-logo-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 480px) {
  #cc-intro { gap: 20px; }
  #cc-intro__sub { font-size: 16px; }
  #cc-intro__skip { right: 18px; bottom: 40px; font-size: 11px; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #cc-intro,
  #cc-intro__badge {
    animation: none !important;
    transition: none !important;
  }
}