@charset "UTF-8";

:root {
  color-scheme: light;
  --wine: #880101;
  --focus: #c58f33;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #f8f7f4;
  font-family: Georgia, "Times New Roman", serif;
}

.invitation { width: 100%; }

.artwork {
  position: relative;
  width: 100%;
  max-width: 1644px;
  margin: 0 auto;
  line-height: 0;
}

.artwork picture, .invitation-image {
  display: block;
  width: 100%;
  height: auto;
}

.hotspot, .music-toggle, .countdown-value {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.hotspot {
  display: block;
  border: 0;
  border-radius: 999px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.hotspot:focus-visible, .music-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Las posiciones siguen los círculos de las guías mobile y desktop. */
.map-ceremony { left: 50.3%; top: 31.3%; width: 61%; height: 1.7%; }
.map-reception { left: 49.7%; top: 37.3%; width: 63%; height: 1.9%; }
.rsvp { left: 51%; top: 64.4%; width: 68%; height: 2.2%; }
.qr-link { left: 50%; top: 87.6%; width: 55%; height: 4.6%; }

.music-toggle {
  left: 81%;
  top: .44%;
  width: 22%;
  aspect-ratio: 2.1 / 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wine);
  font: 22px/1 Georgia, serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.music-toggle span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}

.countdown { position: absolute; inset: 0; pointer-events: none; }

.countdown-value {
  display: grid;
  place-items: center;
  width: 19%;
  height: 1.7%;
  color: var(--wine);
  font: 600 clamp(18px, 6vw, 68px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 2px #fff9;
}

.days { left: 50%; top: 93.45%; width: 19%; }
.hours { left: 12.6%; top: 96.35%; width: 15%; }
.minutes { left: 46%; top: 96.35%; width: 18%; }
.seconds { left: 79.6%; top: 96.35%; width: 19%; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.debug .hotspot { background: #00a2ff42; outline: 2px solid #0878b9; }
.debug .music-toggle { background: #00a2ff42; outline: 2px solid #0878b9; }
.debug .countdown-value { background: #ffd6007a; outline: 1px solid #bd6500; }

@media (min-width: 768px) {
  .map-ceremony { left: 51.3%; top: 23.8%; width: 40%; height: 1.9%; }
  .map-reception { left: 51.5%; top: 30.3%; width: 40%; height: 1.9%; }
  .rsvp { left: 50%; top: 60.2%; width: 44%; height: 2.2%; }
  .qr-link { left: 49%; top: 87%; width: 35%; height: 4.7%; }

  .music-toggle {
    left: 85.8%;
    top: .63%;
    width: 14%;
    max-width: 160px;
    font-size: clamp(18px, 2.1vw, 30px);
  }

  .countdown-value { font-size: clamp(28px, 4.7vw, 70px); }
  .days { left: 49.2%; top: 93.35%; width: 16%; }
  .hours { left: 26.5%; top: 96.55%; width: 11%; }
  .minutes { left: 47.5%; top: 96.55%; width: 12%; }
  .seconds { left: 68.9%; top: 96.55%; width: 13%; }
}