/* ==========================================================
   Diseño "Relieve" · Boda · blanco sobre blanco, grabado en seco
   Paleta: papel algodón y un toque de oro muy tenue
   ========================================================== */

:root {
  --papel: #f7f5f0;
  --fondo: #ebe8e1;
  --oro: #c8b28a;
  --oro-tinta: #94804f;          /* oro legible para textos pequeños */
  --tinta: #4f493f;
  --suave: #776f62;
  --grabado: #8a8170;
  --serif: "Cormorant Garamond", Georgia, serif;
  --caps: "Cinzel", "Cormorant Garamond", serif;
  --prensa: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(80, 70, 50, .16);
  --hundido: inset 0 1px 2px rgba(80, 70, 50, .12), inset 0 -1px 0 rgba(255, 255, 255, .9);

  --s-fondo: var(--papel);
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--oro);
  --s-acento-tinta: #3d372e;
  --s-tarjeta: var(--papel);
  --s-borde: rgba(168, 145, 95, .22);
  --s-radio: 2px;
  --s-sombra: var(--hundido);
  --s-fuente: var(--serif);
  --s-titulo: var(--serif);
  --s-titulo-tam: clamp(2.3rem, 10vw, 2.9rem);
  --s-titulo-color: var(--grabado);
  --s-etiqueta: var(--caps);
  --s-num: var(--serif);
  --s-num-color: var(--tinta);
  --s-btn-linea-color: var(--tinta);
}

body {
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
}
.amp { font-family: var(--serif); font-style: italic; color: var(--oro-tinta); }

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================= INTRO ================= */
.relieve {
  --lx: 50%;
  --ly: 10%;
  position: relative;
  width: min(100%, 520px);
  height: 100vh;
  height: 100svh;
  min-height: 580px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(circle at var(--lx) var(--ly), rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, #efece6, #e6e2da);
}
.relieve.listo { touch-action: auto; }

.relieve__hint {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 26px);
  left: 24px;
  right: 24px;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-family: var(--caps);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.8;
  text-transform: uppercase;
  color: #978e7f;
  pointer-events: none;
  transition: opacity 1s ease;
  animation: rv-entrar 1.6s .6s ease backwards;
}

/* Tarjeta: el SVG es todo el papel (su color sale del filtro de iluminación) */
.tarjeta {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 48px), 380px, calc((100vh - 210px) * .6923));
  width: min(calc(100% - 48px), 380px, calc((100svh - 210px) * .6923));
  aspect-ratio: 360 / 520;
  background: var(--papel);
  box-shadow: 0 1px 1px rgba(80, 70, 50, .06), 0 22px 38px -26px rgba(80, 70, 50, .4);
  animation: rv-tarjeta 1.4s cubic-bezier(.2, .7, .2, 1) backwards;
}
.tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grano), var(--fibras);
  mix-blend-mode: multiply;
  opacity: .5;
  pointer-events: none;
}
.tarjeta__svg { display: block; width: 100%; height: 100%; }

/* Piezas del grabado (solo cuenta su alfa: es el mapa de alturas) */
.rv-mini { font-family: var(--caps); font-size: 12px; font-weight: 700; letter-spacing: 2.6px; }
.rv-caps { font-family: var(--caps); font-size: 14px; font-weight: 700; letter-spacing: 2.6px; }
.rv-mono { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 58px; }
.rv-nombre { font-family: var(--serif); font-weight: 600; font-size: 46px; letter-spacing: 1px; }
.rv-amp { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; }
.rv-marco, .rv-aro, .rv-regla { fill: none; stroke: #000; stroke-width: 1.3; }
.rv-regla { stroke-width: 1; }

/* Oro tenue al revelar */
.rv-filete {
  fill: none;
  stroke: var(--oro);
  stroke-width: .8;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s cubic-bezier(.6, 0, .2, 1);
}
.rv-oro { fill: var(--oro); opacity: 0; mix-blend-mode: multiply; transition: opacity 2.2s 1s ease; }
.revelado .rv-filete { stroke-dashoffset: 0; }
.revelado .rv-oro { opacity: .5; }

.relieve__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 26px);
  z-index: 3;
  display: flex;
  justify-content: center;
  transition: opacity .8s ease, transform .8s ease;
  animation: rv-entrar 1.4s 1.2s ease backwards;
}
.relieve__btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid rgba(168, 145, 95, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  font-family: var(--caps);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #6f675a;
  cursor: pointer;
  transition: background-color .3s, border-color .3s, opacity .3s;
}
.relieve__btn:hover { background: rgba(255, 255, 255, .65); border-color: var(--oro); }
.relieve__btn:focus-visible { outline: 1px solid var(--oro-tinta); outline-offset: 3px; }
.relieve__btn:disabled { opacity: .4; cursor: default; }

.revelando .relieve__hint { opacity: 0; }
.revelando .relieve__pie { opacity: 0; transform: translateY(10px); pointer-events: none; }
.listo .tarjeta { transform: translateY(-18px); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }

@keyframes rv-tarjeta { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes rv-entrar { from { opacity: 0; } to { opacity: 1; } }

.relieve .desliza-c { z-index: 4; color: var(--grabado); font-family: var(--caps); font-weight: 500; }
.relieve .desliza-c i { width: 1px; }

/* ================= INVITACIÓN ================= */
.contenido { position: relative; background: var(--papel); background-image: var(--grano); }
.s { padding: 80px 26px; }
.s-titulo { font-weight: 500; font-style: italic; text-shadow: var(--prensa); }

/* Filete dorado con rombo */
.filete { display: flex; align-items: center; justify-content: center; gap: 12px; width: 170px; margin: -6px auto; }
.filete::before, .filete::after { content: ""; flex: 1; height: 1px; background: var(--oro); opacity: .7; }
.filete i { width: 6px; height: 6px; border: 1px solid var(--oro); transform: rotate(45deg); }

/* Carta */
.carta { padding-top: 70px; }
.carta__mono {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 5.2rem;
  line-height: 1;
  color: var(--papel);
  text-shadow: -1px -1px 1px rgba(255, 255, 255, .95), 1px 1px 1.5px rgba(80, 70, 50, .32);
}
.carta__mono .amp { font-size: .45em; font-weight: 500; color: var(--papel); padding: 0 .08em; }
.carta__eyebrow { margin: 18px 0 30px; font-family: var(--caps); font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--suave); }
.carta__foto {
  width: min(78%, 320px);
  margin: 0;
  padding: 10px;
  border-radius: 2px;
  background: #fbfaf7;
  box-shadow: inset 0 1px 3px rgba(80, 70, 50, .14), 0 0 0 1px rgba(200, 178, 138, .35);
}
.carta__foto img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.carta__nombres { margin: 40px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(2.7rem, 12vw, 3.3rem); line-height: 1.05; color: #5a5347; text-shadow: var(--prensa); }
.carta__nombres .amp { font-size: .62em; }
.carta__fecha { margin: 12px 0 0; font-family: var(--caps); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--suave); }
.carta__texto { margin: 24px 0 0; max-width: 21em; font-size: 1.2rem; line-height: 1.65; font-style: italic; }

/* Cuenta regresiva: celdas hundidas en el papel */
.s-cuenta__caja { border: 0; border-radius: 2px; }
.s-cuenta__num { font-weight: 600; }
.s-cuenta__lbl { font-weight: 500; letter-spacing: .2em; }
.s-cuenta__fin { color: var(--oro-tinta); }
.s-cuenta__fecha { font-style: italic; }

/* Botones */
.s-btn { font-family: var(--caps); font-weight: 500; letter-spacing: .22em; font-size: .66rem; }
.s-btn--linea, .s-btn--mini { border-width: 1px; border-color: var(--oro); }
.s-btn--linea:hover, .s-btn--mini:hover { background: rgba(200, 178, 138, .12); }
.s-btn--lleno { background: var(--oro); color: var(--s-acento-tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 16px -12px rgba(120, 100, 60, .6); }

/* Itinerario */
.s-evento { border: 0; }
.s-evento__icono { border-width: 1px; color: var(--oro-tinta); border-color: var(--oro); }
.s-evento__titulo { font-weight: 500; color: var(--suave); }
.s-evento__hora { font-weight: 500; color: var(--oro-tinta); }
.s-evento__lugar { font-size: 1.2rem; }
.s-evento__dir { font-size: 1.02rem; }

/* Galería con paspartú */
.s-foto { padding: 6px; background: #fbfaf7; box-shadow: inset 0 1px 2px rgba(80, 70, 50, .12), 0 0 0 1px rgba(200, 178, 138, .25); }
.s-foto img { border-radius: 1px; }

/* Frase */
.frase { padding-top: 40px; }
.frase__foto { width: min(70%, 290px); margin: 0; padding: 10px; background: #fbfaf7; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(80, 70, 50, .14), 0 0 0 1px rgba(200, 178, 138, .35); }
.frase__foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.frase__txt { margin: 34px 0 0; max-width: 15em; font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 7.6vw, 2.1rem); line-height: 1.3; color: #6a6356; text-shadow: var(--prensa); }

/* Vestimenta */
.s-vestimenta__tipo { font-style: italic; font-size: 1.9rem; color: var(--oro-tinta); }
.s-paleta li { background: var(--papel); border-color: rgba(168, 145, 95, .3); box-shadow: var(--hundido); }

/* Confirmación */
.s-rsvp__saludo { margin: -6px 0 0; font-family: var(--serif); font-style: italic; font-size: 1.45rem; color: var(--oro-tinta); }
.s-rsvp__texto { font-size: 1.15rem; }

/* Pie */
.s-pie__t { font-family: var(--caps); font-weight: 500; }
.s-pie__n { font-weight: 500; font-style: italic; color: #5a5347; text-shadow: var(--prensa); }
.btn-musica { background: var(--papel); color: var(--oro-tinta); box-shadow: var(--hundido), 0 0 0 1px var(--s-borde); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta, .relieve__hint, .relieve__pie { animation: none; }
  .rv-filete, .rv-oro { transition-duration: .3s; transition-delay: 0s; }
  .listo .tarjeta { transition: none; transform: none; }
}