:root {
  --noche:   #10141F;   /* fondo: azul noche profundo */
  --marfil:  #EDE7DA;   /* texto principal: marfil cálido */
  --champan: #C9A86A;   /* acento: champán/oro viejo */
  --bruma:   #8A93A6;   /* texto secundario */
  --linea:   rgba(237,231,218,0.16);
}

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

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

body {
  min-height: 100svh;
  background: radial-gradient(120% 90% at 50% 0%, #1A2233 0%, var(--noche) 55%);
  color: var(--marfil);
  font-family: 'Archivo', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  display: grid;
  place-items: center;
  padding-bottom: 4rem;
}

/* Cielo nocturno de fondo (canvas) */
#cielo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 60rem;
}

/* Monograma */
.monograma {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--champan);
  margin-bottom: 2.2rem;
}

/* Nombres */
h1 {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2.6rem, 7.5vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
h1 .y {
  font-style: italic;
  font-weight: 400;
  color: var(--champan);
  font-size: 0.62em;
  padding: 0 0.18em;
}

.fecha {
  margin-top: 1.4rem;
  font-size: clamp(0.78rem, 1.6vw, 0.95rem);
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* compensa el letter-spacing del último carácter */
  color: var(--bruma);
  text-transform: uppercase;
}

/* Cuenta regresiva */
.cuenta {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-top: 3.4rem;
}

.celda {
  padding: 0 clamp(0.9rem, 3.5vw, 2.6rem);
  min-width: clamp(4.2rem, 14vw, 8rem);
}
.celda + .celda { border-left: 1px solid var(--linea); }

.valor {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: 1;
  display: block;
  overflow: hidden;
}
.valor span {
  display: inline-block;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.45s;
}
.valor span.sale { transform: translateY(-0.6em); opacity: 0; transition: none; }

.unidad {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(0.6rem, 1.4vw, 0.72rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--bruma);
}

/* Acciones */
.acciones {
  margin: 3.4rem auto 0;
  display: grid;
  gap: 1.55rem;
  max-width: 47rem;
}

.acciones-principales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.acciones-secundarias {
  display: grid;
  justify-items: stretch;
}

.foto-link {
  width: 100%;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  color: var(--champan);
  text-align: left;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.7rem 0.6rem;
  transition: color 0.28s, transform 0.28s;
}
.foto-link:hover,
.foto-link:focus-visible {
  color: #E0C586;
  outline: none;
  transform: translateY(-2px);
}
.foto-link:focus-visible { box-shadow: 0 0 0 3px rgba(201,168,106,0.32); }

.foto-icono {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  color: currentColor;
}
.foto-icono-svg {
  width: 2.05rem;
  height: 2.05rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.foto-titulo {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.foto-subtitulo {
  display: block;
  margin-top: 0.18rem;
  color: var(--bruma);
  font-size: 0.76rem;
  line-height: 1.35;
}
.foto-link:hover .foto-subtitulo,
.foto-link:focus-visible .foto-subtitulo { color: rgba(237,231,218,0.78); }

.accion-card {
  min-height: 4.6rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  text-align: left;
  color: var(--champan);
  text-decoration: none;
  border-radius: 8px;
  padding: 0.7rem 0.6rem;
  transition: color 0.28s, transform 0.28s, opacity 0.28s;
}
.accion-card:hover, .accion-card:focus-visible {
  color: #E0C586;
  outline: none;
  transform: translateY(-2px);
}
.accion-card:focus-visible,
.cal-link:focus-visible { box-shadow: 0 0 0 3px rgba(201,168,106,0.32); }

.icono-accion {
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  flex: none;
}

.pin-google {
  width: 1.95rem;
  height: 1.95rem;
  position: relative;
  display: block;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: conic-gradient(from 45deg, #4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0 100%);
}
.pin-google::after {
  content: "";
  position: absolute;
  inset: 0.48rem;
  border-radius: 50%;
  background: #fff;
}

.icono-rsvp {
  border-radius: 50%;
  color: var(--noche);
  background: var(--champan);
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-style: italic;
}

.icono-regalos {
  color: var(--champan);
}
.icono-regalo-svg {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accion-titulo,
.cal-titulo {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.accion-subtitulo {
  display: block;
  margin-top: 0.28rem;
  color: var(--bruma);
  font-size: 0.78rem;
  line-height: 1.35;
}
.accion-card--rsvp .accion-subtitulo { color: rgba(237,231,218,0.72); }

.calendarios {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
}
.calendarios-label {
  color: var(--champan);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
}
.calendarios-lista {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.cal-link {
  width: 5rem;
  min-height: 4.45rem;
  display: grid;
  place-items: center;
  gap: 0.42rem;
  color: var(--champan);
  text-decoration: none;
  border-radius: 8px;
  padding: 0.58rem 0.48rem;
  transition: color 0.28s, transform 0.28s, opacity 0.28s;
}
.cal-link:hover, .cal-link:focus-visible {
  color: #E0C586;
  outline: none;
  transform: translateY(-2px);
}
.cal-link:hover .cal-icono,
.cal-link:focus-visible .cal-icono {
  transform: translateY(-1px);
}
.cal-icono {
  width: 1.95rem;
  height: 1.95rem;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.28s;
}
.cal-icono--google {
  color: #1F1F1F;
  background:
    linear-gradient(#fff 0 0) center/58% 58% no-repeat,
    conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0 100%);
}
.cal-icono--outlook { background: #2563EB; color: #fff; }
.cal-icono--apple { background: #F5F5F7; color: #10141F; }
.cal-texto {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
}

/* Mensaje del día de la boda */
.llego {
  display: none;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  color: var(--champan);
  margin-top: 3rem;
}

footer {
  position: fixed;
  bottom: 1.4rem;
  left: 0; right: 0;
  z-index: 1;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: rgba(138,147,166,0.55);
}

@media (prefers-reduced-motion: reduce) {
  .valor span { transition: none !important; }
}

@media (max-height: 700px) {
  main { padding-top: 1.2rem; padding-bottom: 1.2rem; }
  .monograma { margin-bottom: 1.4rem; }
  .cuenta { margin-top: 2.2rem; }
  .acciones { margin-top: 2.2rem; gap: 1rem; }
  footer { position: static; margin-top: -2.6rem; padding-bottom: 1rem; }
}

@media (max-width: 820px) {
  .acciones { max-width: 24rem; }
  .acciones-principales { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  main { width: 100%; }
  .accion-card { min-height: 4.9rem; }
  .calendarios-lista { width: 100%; }
  .cal-link { flex: 1 1 5rem; }
}

.pagina-interna {
  padding: 2rem 1.5rem 4.5rem;
}

.contenido-interno {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: min(100%, 42rem);
}

.contenido-interno h1 {
  font-size: clamp(2.3rem, 6vw, 4.5rem);
}

.texto-intro {
  max-width: 34rem;
  color: rgba(237,231,218,0.78);
  font-size: clamp(0.95rem, 2vw, 1.08rem);
  line-height: 1.65;
}

.volver-link {
  justify-self: center;
  color: var(--champan);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 1.2rem;
  transition: color 0.28s, transform 0.28s;
}
.volver-link:hover,
.volver-link:focus-visible {
  color: #E0C586;
  outline: none;
  transform: translateY(-2px);
}
.volver-link:focus-visible { box-shadow: 0 0 0 3px rgba(201,168,106,0.32); }

.pagina-proximamente {
  gap: 1.05rem;
}