/* Contador de tiempo juntos: colores y contraste heredados del tema activo. */
.together-counter {
  --counter-bg:var(--pink-pale, #ffe9eb);
  position:relative;
  isolation:isolate;
  width:min(360px, 100%);
  margin:18px auto 26px;
  padding:18px clamp(12px, 4vw, 22px) 17px;
  overflow:hidden;
  border:1px solid var(--line, #eadfe0);
  border-radius:34px;
  color:var(--ink, #302b31);
  background:linear-gradient(145deg, var(--counter-bg), var(--paper, #fffdfb) 72%, var(--blue, #dcecf5));
  box-shadow:0 10px 28px rgba(var(--wine-rgb, 139,61,82), .15);
  text-align:center;
}

.counter-label {
  position:relative;
  z-index:1;
  margin:0 0 3px;
  color:var(--wine, #8b3d52);
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(.92rem, 4vw, 1.08rem);
  font-weight:600;
  line-height:1.25;
}

.counter-note {
  margin:0 0 7px;
  color:var(--muted, #665f67);
  font-size:.7rem;
  font-style:italic;
  line-height:1.2;
}
.counter-note[hidden] { display:none; }

.counter-row {
  position:relative;
  z-index:1;
  display:flex;
  width:100%;
  align-items:stretch;
  justify-content:center;
  gap:clamp(4px, 1.6vw, 9px);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.counter-unit {
  display:flex;
  min-width:0;
  flex:1 1 0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:8px 4px 7px;
  border:1px solid rgba(var(--wine-rgb, 139,61,82), .14);
  border-radius:18px;
  background:var(--paper, #fffdfb);
  background:color-mix(in srgb, var(--paper, #fffdfb) 82%, transparent);
}

.counter-value {
  display:block;
  max-width:100%;
  color:var(--wine, #8b3d52);
  font-family:"DM Sans", sans-serif;
  font-size:clamp(1rem, 6vw, 1.78rem);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.05;
  white-space:nowrap;
}
.counter-value.is-changing { animation:counter-roll-in .38s cubic-bezier(.2,.75,.25,1) both; }

.counter-name {
  color:var(--muted, #665f67);
  font-size:clamp(.59rem, 2.7vw, .72rem);
  font-weight:600;
  line-height:1.15;
}

.counter-separator {
  display:grid;
  flex:0 0 12px;
  align-self:center;
  place-items:center;
  color:var(--heart-color, var(--wine, #8b3d52));
  font-size:clamp(.65rem, 3vw, .82rem);
  animation:counter-heartbeat 2.8s ease-in-out infinite;
}

.counter-calendar {
  position:relative;
  z-index:1;
  margin:10px 0 0;
  color:var(--wine, #8b3d52);
  font-family:"Playfair Display", Georgia, serif;
  font-size:clamp(.82rem, 3.6vw, .95rem);
  font-style:italic;
  line-height:1.3;
}

.counter-decoration {
  position:absolute;
  z-index:0;
  color:var(--heart-color, var(--wine, #8b3d52));
  font-size:15px;
  line-height:1;
  opacity:.27;
  pointer-events:none;
  animation:counter-heartbeat 3.6s ease-in-out infinite;
}
.counter-decoration-one { top:8px; left:15px; }
.counter-decoration-two { top:12px; right:16px; animation-delay:1.1s; }
.counter-decoration-three { right:28px; bottom:8px; font-size:12px; animation-delay:2s; }

@keyframes counter-roll-in {
  from { opacity:.35; transform:translateY(-7px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes counter-heartbeat {
  0%, 100% { opacity:.22; transform:scale(.94); }
  50% { opacity:.48; transform:scale(1.11); }
}

@media(max-width:360px) {
  .together-counter { padding-right:9px; padding-left:9px; border-radius:29px; }
  .counter-row { gap:3px; }
  .counter-unit { padding-right:2px; padding-left:2px; border-radius:15px; }
  .counter-value { font-size:clamp(.88rem, 5.4vw, 1.2rem); }
  .counter-name { font-size:.56rem; }
  .counter-separator { flex-basis:8px; font-size:.62rem; }
}

@media(prefers-reduced-motion:reduce) {
  .counter-decoration, .counter-separator { animation:none; }
  .counter-value.is-changing { animation:none; }
}