/* ==========================================================
   Diseño "Rompecabezas" · Boda · arma la foto para abrir la invitación
   Paleta: crema, terracota claro, salvia, tinta cálida y oro
   ========================================================== */

:root {
  --crema: #f8f4ee;
  --lino: #f1e9de;
  --terracota: #e3b5a4;
  --terracota-2: #b9765f;
  --salvia: #b7c4a8;
  --salvia-2: #6f8063;
  --tinta: #4a4038;
  --suave: #7d7168;
  --oro: #c8a96a;
  --oro-2: #a3834a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --cursiva: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;

  --s-fondo: var(--crema);
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--terracota);
  --s-acento-tinta: #3d2a22;
  --s-tarjeta: rgba(255, 255, 255, .8);
  --s-borde: rgba(74, 64, 56, .1);
  --s-radio: 18px;
  --s-sombra: 0 20px 34px -26px rgba(74, 64, 56, .55);
  --s-fuente: var(--serif);
  --s-titulo: var(--cursiva);
  --s-titulo-tam: clamp(2.2rem, 10vw, 2.8rem);
  --s-etiqueta: var(--sans);
  --s-num: var(--cursiva);
  --s-num-color: var(--terracota-2);
  --s-btn-linea-color: var(--tinta);
}

body {
  background: #ece4d8;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
}
.amp { font-family: var(--cursiva); font-style: italic; color: var(--terracota-2); }
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ================= INTRO ================= */
.rompe {
  position: relative;
  width: min(100%, 520px);
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(55% 35% at 10% 12%, rgba(227, 181, 164, .38), transparent 70%),
    radial-gradient(50% 32% at 95% 90%, rgba(183, 196, 168, .4), transparent 70%),
    var(--crema);
  box-shadow: 0 0 60px -30px rgba(74, 64, 56, .4);
}
.rompe__fondo {
  position: absolute;
  inset: 0;
  background-image: var(--grano), repeating-linear-gradient(90deg, rgba(74, 64, 56, .018) 0 1px, transparent 1px 4px);
  pointer-events: none;
}

.rompe__cab, .rompe__fin {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 22px);
  left: 16px;
  right: 16px;
  z-index: 3;
  text-align: center;
  pointer-events: none;
}
.rompe__cab { transition: opacity .7s ease, transform .7s ease; }
.rompe__eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--salvia-2); }
.rompe__titulo { margin: 4px 0 0; font-family: var(--cursiva); font-style: italic; font-size: clamp(2rem, 9.4vw, 2.6rem); line-height: 1.1; }
.rompe__hint { margin: 4px 0 0; font-size: 1.05rem; font-style: italic; color: var(--suave); }

.rompe__fin > * { opacity: 0; }
.fin__eyebrow { margin: 0; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--terracota-2); }
.fin__nombres { margin: 4px 0 0; font-family: var(--cursiva); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 10.5vw, 2.9rem); line-height: 1.1; }
.fin__nombres .amp { font-size: .8em; }
.fin__fecha { margin: 6px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--suave); }

/* Mesa, tablero y piezas */
.mesa { position: absolute; inset: 0; touch-action: none; }
.tablero {
  position: absolute;
  left: 50%;
  top: 30%;
  width: 300px;
  height: 300px;
  border-radius: 6px;
  background: var(--lino);
  box-shadow: inset 0 0 0 1px rgba(74, 64, 56, .1), inset 0 6px 18px rgba(74, 64, 56, .1), 0 0 0 10px rgba(255, 255, 255, .55);
  overflow: hidden;
}
.tablero__guia { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(.7) sepia(.3); transition: opacity 1s ease; }
.revuelto .tablero__guia { opacity: .17; }
.tablero__lineas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease .3s; }
.revuelto .tablero__lineas { opacity: 1; }
.tablero__linea { fill: none; stroke: rgba(74, 64, 56, .3); stroke-width: 1; stroke-dasharray: 3 4; }

.pieza {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  touch-action: none;
  pointer-events: none;
  outline: none;
  filter: drop-shadow(0 5px 6px rgba(74, 64, 56, .28));
  transition: filter .3s ease;
}
.pieza__svg { display: block; overflow: visible; }
.pieza__cuerpo { pointer-events: visiblePainted; cursor: grab; }
.pieza__sombra { stroke: rgba(60, 44, 34, .35); stroke-width: 3; }
.pieza__luz { stroke: rgba(255, 255, 255, .7); stroke-width: 2.2; }
.pieza__borde { stroke: rgba(255, 255, 255, .6); stroke-width: 1; transition: opacity .8s ease, stroke .2s; }
.pieza:focus-visible .pieza__borde { stroke: var(--oro-2); stroke-width: 3.5; }
.pieza.arrastrando { filter: drop-shadow(0 16px 14px rgba(74, 64, 56, .35)); }
.pieza.arrastrando .pieza__cuerpo { cursor: grabbing; }
.pieza.fija { filter: drop-shadow(0 1px 1px rgba(74, 64, 56, .18)); }
.pieza.fija .pieza__cuerpo { pointer-events: none; cursor: default; }
.completo .pieza__borde, .completo .pieza__luz, .completo .pieza__sombra { opacity: 0; transition: opacity .6s ease; }

/* Foto final sin uniones, con marco y destello */
.cuadro {
  position: absolute;
  z-index: 400;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease .25s, box-shadow 1.2s ease .4s, transform 1.2s cubic-bezier(.2, .8, .2, 1) .4s;
}
.cuadro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cuadro__brillo { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 48%, transparent 66%); transform: translateX(-130%); }
.completo .cuadro {
  opacity: 1;
  transform: scale(1.025) rotate(-.6deg);
  box-shadow: 0 0 0 9px #fff, 0 0 0 10px rgba(200, 169, 106, .55), 0 34px 50px -26px rgba(74, 64, 56, .6);
}
.completo .cuadro__brillo { animation: destello 1.6s .9s ease forwards; }
@keyframes destello { to { transform: translateX(130%); } }

.completo .rompe__cab { opacity: 0; transform: translateY(-12px); }
.completo .fin__eyebrow { animation: entrar .9s .5s cubic-bezier(.2, .8, .2, 1) both; }
.completo .fin__nombres { animation: entrar 1.1s .75s cubic-bezier(.2, .8, .2, 1) both; }
.completo .fin__fecha { animation: entrar .9s 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* Pie: contador + "Ármalo por mí" */
.rompe__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.contador { margin: 0; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.contador b { display: inline-block; font-family: var(--cursiva); font-style: italic; font-weight: 400; font-size: 1.7rem; letter-spacing: 0; color: var(--terracota-2); vertical-align: -3px; }
.contador__de { font-family: var(--cursiva); font-style: italic; font-size: 1.1rem; letter-spacing: 0; text-transform: none; }
.contador.salta b { animation: salta .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes salta { 40% { transform: scale(1.5) translateY(-3px); } }
.btn-armar {
  all: unset;
  box-sizing: border-box;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid rgba(185, 118, 95, .5);
  background: rgba(255, 255, 255, .78);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
  transition: transform .2s ease, opacity .3s;
}
.btn-armar svg { color: var(--terracota-2); }
.btn-armar:active { transform: scale(.96); }
.btn-armar:focus-visible { outline: 2px solid var(--terracota-2); outline-offset: 3px; }
.btn-armar:disabled { opacity: .5; cursor: default; }
.completo .rompe__pie { opacity: 0; transform: translateY(12px); }
.completo .btn-armar { pointer-events: none; }
.listo .mesa { pointer-events: none; touch-action: auto; }
.rompe .desliza-c { z-index: 5; color: var(--terracota-2); font-family: var(--sans); }

/* ================= INVITACIÓN ================= */
.contenido { background: var(--crema); background-image: var(--grano); box-shadow: 0 0 60px -30px rgba(74, 64, 56, .4); }
.s-titulo { font-style: italic; }

.historia { padding-top: 64px; }
.historia__icono { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 14px; border-radius: 50%; border: 1px solid var(--terracota); color: var(--terracota-2); background: #fff; }
.historia__foto { width: min(84%, 330px); margin: 6px 0 0; filter: drop-shadow(0 22px 22px rgba(74, 64, 56, .28)); }
.historia__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='21 -1.5 124.5 124.5'%3E%3Cpath d='M22 22C34 22 46 22 57 22C62 22 64 17.5 60 13C54 4 64 -0.5 72 -0.5C80 -0.5 90 4 84 13C80 17.5 82 22 87 22C98 22 110 22 122 22C122 34 122 46 122 57C122 62 126.5 64 131 60C140 54 144.5 64 144.5 72C144.5 80 140 90 131 84C126.5 80 122 82 122 87C122 98 122 110 122 122C110 122 98 122 87 122C82 122 80 117.5 84 113C90 104 80 99.5 72 99.5C64 99.5 54 104 60 113C64 117.5 62 122 57 122C46 122 34 122 22 122C22 110 22 98 22 87C22 82 26.5 80 31 84C40 90 44.5 80 44.5 72C44.5 64 40 54 31 60C26.5 64 22 62 22 57C22 46 22 34 22 22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='21 -1.5 124.5 124.5'%3E%3Cpath d='M22 22C34 22 46 22 57 22C62 22 64 17.5 60 13C54 4 64 -0.5 72 -0.5C80 -0.5 90 4 84 13C80 17.5 82 22 87 22C98 22 110 22 122 22C122 34 122 46 122 57C122 62 126.5 64 131 60C140 54 144.5 64 144.5 72C144.5 80 140 90 131 84C126.5 80 122 82 122 87C122 98 122 110 122 122C110 122 98 122 87 122C82 122 80 117.5 84 113C90 104 80 99.5 72 99.5C64 99.5 54 104 60 113C64 117.5 62 122 57 122C46 122 34 122 22 122C22 110 22 98 22 87C22 82 26.5 80 31 84C40 90 44.5 80 44.5 72C44.5 64 40 54 31 60C26.5 64 22 62 22 57C22 46 22 34 22 22Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.historia__txt { margin: 26px 0 0; max-width: 21em; font-size: 1.18rem; line-height: 1.6; font-style: italic; }
.historia__nombres { margin: 18px 0 0; font-family: var(--cursiva); font-style: italic; font-size: 2rem; }
.historia__fecha { margin: 4px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--suave); }

.s-cuenta { background: linear-gradient(180deg, var(--crema), rgba(227, 181, 164, .22) 55%, var(--crema)); }
.s-cuenta__caja { background: #fff; border-radius: 14px; }
.s-evento { position: relative; border-top: 3px solid var(--terracota); }
.s-evento:nth-child(even) { border-top-color: var(--salvia); }
.s-evento::after {               /* muesca de pieza en la parte superior */
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  width: 26px;
  height: 14px;
  margin-left: -13px;
  border-radius: 14px 14px 0 0;
  background: var(--terracota);
}
.s-evento:nth-child(even)::after { background: var(--salvia); }
.s-evento__icono { color: var(--terracota-2); border-color: var(--terracota); }
.s-evento__titulo { color: var(--salvia-2); }
.s-evento__hora { font-style: italic; }
.s-evento__lugar { font-size: 1.18rem; }
.s-evento__dir { font-size: 1.02rem; }
.s-eventos__lista { gap: 34px; }
.s-foto { border-radius: 6px; border: 6px solid #fff; }
.s-foto:nth-child(2) { transform: rotate(-1.5deg); }
.s-foto:nth-child(3) { transform: rotate(1.5deg); }
.s-vestimenta { background: linear-gradient(180deg, var(--crema), rgba(183, 196, 168, .24) 55%, var(--crema)); }
.s-vestimenta__tipo { font-family: var(--cursiva); font-style: italic; color: var(--terracota-2); }
.s-paleta li { background: #fff; }
.s-rsvp { background: radial-gradient(80% 60% at 50% 40%, rgba(227, 181, 164, .38), transparent 75%); }
.s-rsvp__saludo { font-family: var(--cursiva); font-style: italic; color: var(--terracota-2); }
.s-rsvp__texto { font-size: 1.15rem; }
.s-btn--lleno { background: linear-gradient(135deg, #edc9bb, var(--terracota)); }
.s-pie__n { font-family: var(--cursiva); font-style: italic; }
.btn-musica { background: var(--crema); color: var(--terracota-2); box-shadow: 0 6px 18px rgba(74, 64, 56, .2); }

@media (prefers-reduced-motion: reduce) {
  .completo .cuadro__brillo { animation: none; }
  .completo .fin__eyebrow, .completo .fin__nombres, .completo .fin__fecha { animation: none; opacity: 1; }
  .cuadro { transition-duration: .3s; transition-delay: 0s; }
}