/* ==========================================================
   Diseño "Acuarela" · Boda · "Pinta nuestra historia"
   Papel de algodón, boceto a lápiz y pigmentos pastel:
   durazno, salvia, lavanda, azul polvo y ocre suave.
   ========================================================== */

@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pinyon-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Pinyon Script"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/pinyon-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --mesa: #f1ece4;
  --papel: #fcf8f1;
  --tinta: #4b4441;
  --suave: #857a74;
  --grafito: #5f5856;
  --durazno: #eeb09c;
  --durazno-2: #d48a74;
  --salvia: #a9bf9f;
  --salvia-2: #6c8768;
  --lavanda: #bfb0dd;
  --azul: #a8c1da;
  --ocre: #e2c08a;
  --ocre-2: #b08a52;
  --pig: #eeb09c;                    /* color del godete activo (lo cambia el JS) */
  --guion: "Pinyon Script", "Great Vibes", cursive;
  --mano: "Caveat", "Segoe Print", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --deckle-clip: polygon(0.6% 1%, 8% 0.3%, 16% 1.1%, 25% 0.4%, 34% 0.9%, 43% 0.2%, 52% 1%, 61% 0.5%, 70% 1.2%, 79% 0.3%, 88% 0.9%, 99.2% 0.6%,
    99.6% 9%, 99% 18%, 99.8% 27%, 99.1% 36%, 99.7% 45%, 99% 54%, 99.8% 63%, 99.2% 72%, 99.7% 81%, 99% 90%, 99.4% 99.3%,
    90% 99.7%, 81% 99%, 72% 99.8%, 63% 99.1%, 54% 99.7%, 45% 99%, 36% 99.8%, 27% 99.2%, 18% 99.7%, 9% 99%, 0.5% 99.5%,
    1% 90%, 0.3% 81%, 1.1% 72%, 0.4% 63%, 0.9% 54%, 0.2% 45%, 1% 36%, 0.4% 27%, 1.1% 18%, 0.5% 9%);

  --s-fondo: var(--papel);
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--durazno-2);
  --s-acento-tinta: #3f3532;
  --s-tarjeta: rgba(255, 253, 249, .86);
  --s-borde: rgba(212, 138, 116, .26);
  --s-radio: 6px;
  --s-sombra: 0 18px 30px -24px rgba(95, 75, 55, .55);
  --s-fuente: var(--serif);
  --s-titulo: var(--guion);
  --s-titulo-tam: clamp(2.6rem, 11.5vw, 3.3rem);
  --s-titulo-color: var(--tinta);
  --s-etiqueta: var(--sans);
  --s-num: var(--serif);
  --s-num-color: var(--durazno-2);
  --s-btn-linea-color: var(--tinta);
}

body {
  background: var(--mesa);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
}
.amp { font-family: var(--serif); font-style: italic; color: var(--durazno-2); }
.acua-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ================= INTRO ================= */
.acua {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  color: var(--tinta);
}
.acua__mesa {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 30% at 4% 8%, rgba(238, 176, 156, .38), transparent 70%),
    radial-gradient(38% 26% at 98% 20%, rgba(191, 176, 221, .32), transparent 70%),
    radial-gradient(46% 30% at 0% 96%, rgba(169, 191, 159, .32), transparent 72%),
    radial-gradient(40% 28% at 100% 92%, rgba(168, 193, 218, .34), transparent 72%),
    var(--grano),
    linear-gradient(180deg, #f5f0e8, #eee7dc);
}

/* Encabezado */
.acua__cab {
  position: relative;
  z-index: 3;
  padding: calc(env(safe-area-inset-top) + 12px) 58px 4px;
  text-align: center;
}
.acua__eyebrow { margin: 0; font-family: var(--sans); font-size: .64rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--salvia-2); }
.acua__titulo { display: grid; margin: 2px 0 0; font-family: var(--guion); font-size: clamp(1.9rem, 9vw, 2.5rem); line-height: 1.12; color: var(--tinta); }
.acua__titulo > span { grid-area: 1 / 1; transition: opacity .9s ease, transform .9s ease; }
.acua__titulo-b { opacity: 0; transform: translateY(8px); }
.firmada .acua__titulo-a { opacity: 0; transform: translateY(-8px); }
.firmada .acua__titulo-b { opacity: 1; transform: none; }

.acua__sonido {
  all: unset;
  position: absolute;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--salvia-2);
  cursor: pointer;
}
.acua__sonido:focus-visible { outline: 2px solid var(--salvia-2); outline-offset: 2px; }
.acua__mute { opacity: 0; }
.acua__sonido[aria-pressed="true"] .acua__onda { opacity: 0; }
.acua__sonido[aria-pressed="true"] .acua__mute { opacity: 1; }

.acua .idiomas {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 10px);
  right: 10px;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--tinta);
}

/* Centro: la hoja */
.acua__centro {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 6px 0;
}
.hoja {
  position: relative;
  width: min(86vw, 400px, calc((max(100vh, 560px) - 246px) * .72));
  width: min(86vw, 400px, calc((max(100svh, 560px) - 246px) * .72));
  aspect-ratio: 18 / 25;
  container-type: inline-size;
}
.hoja::before {                        /* sombra suave de la hoja sobre la mesa */
  content: "";
  position: absolute;
  inset: 3% 3% 1.5%;
  border-radius: 6px;
  box-shadow: 0 22px 34px -14px rgba(95, 75, 55, .38), 0 2px 6px rgba(95, 75, 55, .12);
}
.hoja__lienzo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}
@media (hover: hover) and (pointer: fine) {
  .hoja__lienzo { cursor: none; }
}
.listo .hoja__lienzo { touch-action: auto; pointer-events: none; cursor: default; }

/* "Para Familia Pérez": se escribe solo al final, en la esquina */
.hoja__para {
  position: absolute;
  z-index: 2;
  top: 3.4%;
  right: 7%;
  max-width: 54%;
  margin: 0;
  font-family: var(--mano);
  font-weight: 600;
  font-size: 1.05rem;
  font-size: 6cqw;
  line-height: 1.05;
  text-align: right;
  color: #7c5c56;
  pointer-events: none;
  transform: rotate(-4deg);
  transform-origin: right top;
  clip-path: inset(-30% 100% -30% 0);
}
.hoja__para-n { color: var(--durazno-2); }
.firmada .hoja__para { animation: acua-escribir 1.7s 2.9s cubic-bezier(.45, .1, .4, 1) forwards; }

/* Firma de los novios y fecha a pincel */
.hoja__firma {
  position: absolute;
  z-index: 2;
  left: 4%;
  right: 4%;
  bottom: 3.2%;
  text-align: center;
  pointer-events: none;
}
.firma__nombres {
  margin: 0;
  font-family: var(--guion);
  font-weight: 400;
  font-size: clamp(1.7rem, 8.6vw, 2.5rem);
  font-size: 10.4cqw;
  line-height: 1.08;
  white-space: nowrap;
  color: var(--tinta);
  clip-path: inset(-30% 100% -30% -4%);
}
.firma__nombres .amp { font-size: .56em; padding: 0 .08em; }
.firmada .firma__nombres { animation: acua-escribir 2.3s .25s cubic-bezier(.45, .1, .4, 1) forwards; }
.firma__fecha {
  position: relative;
  display: inline-block;
  margin: .5rem 0 0;
  margin: 1.4cqw 0 0;
  padding: 0 5cqw;
  font-family: var(--mano);
  font-weight: 600;
  font-size: 1.1rem;
  font-size: 6cqw;
  line-height: 1.1;
  color: #6a5852;
}
.firma__swash {
  position: absolute;
  left: 0;
  top: 22%;
  width: 100%;
  height: 90%;
  color: var(--pig);
  opacity: .55;
  overflow: visible;
}
.firma__swash path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.firmada .firma__swash path { animation: acua-trazo 1.1s 1.7s cubic-bezier(.5, .1, .3, 1) forwards; }
.firma__fecha-t { position: relative; display: inline-block; clip-path: inset(-30% 100% -30% 0); }
.firmada .firma__fecha-t { animation: acua-escribir 1.4s 2.1s cubic-bezier(.45, .1, .4, 1) forwards; }

@keyframes acua-escribir {
  from { clip-path: inset(-30% 100% -30% -4%); }
  to { clip-path: inset(-30% -6% -30% -4%); }
}
@keyframes acua-trazo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Pie: pista, godetes, avance y "Pintarlo por mí" */
.acua__pie {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 2px 16px calc(env(safe-area-inset-bottom) + 12px);
  transition: opacity .7s ease, transform .7s ease, visibility 0s .7s;
}
.firmada .acua__pie { opacity: 0; transform: translateY(14px); visibility: hidden; pointer-events: none; }
.acua__hint { margin: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 1.02rem; font-style: italic; line-height: 1.2; text-align: center; color: var(--suave); transition: opacity .5s; }
.acua__dedo { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--pig); box-shadow: 0 0 0 0 rgba(212, 138, 116, .55); animation: acua-toque 1.8s ease-out infinite; }
@keyframes acua-toque { from { box-shadow: 0 0 0 0 rgba(212, 138, 116, .55); } to { box-shadow: 0 0 0 13px rgba(212, 138, 116, 0); } }
.pintando .acua__hint { opacity: .45; }

.godetes { display: flex; gap: 8px; }
.godete {
  all: unset;
  box-sizing: border-box;
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(160deg, #ffffff, #f1ece6);
  box-shadow: inset 0 -2px 3px rgba(120, 100, 85, .14), 0 3px 6px -2px rgba(95, 75, 55, .28);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s;
}
.godete__pozo {
  width: 26px;
  height: 24px;
  border-radius: 52% 48% 46% 54% / 55% 50% 50% 45%;
  background: radial-gradient(70% 60% at 38% 34%, rgba(255, 255, 255, .55), transparent 60%), var(--g);
  box-shadow: inset 0 1px 3px rgba(80, 60, 50, .28);
}
.godete--durazno { --g: var(--durazno); }
.godete--salvia { --g: var(--salvia); }
.godete--lavanda { --g: var(--lavanda); }
.godete--azul { --g: var(--azul); }
.godete--ocre { --g: var(--ocre); }
.godete.is-activo { transform: translateY(-4px); box-shadow: inset 0 -2px 3px rgba(120, 100, 85, .14), 0 8px 12px -4px rgba(95, 75, 55, .35), 0 0 0 2px var(--g); }
.godete:active { transform: translateY(-1px) scale(.95); }
.godete:focus-visible { outline: 2px solid var(--salvia-2); outline-offset: 3px; }

.acua__acciones { display: flex; align-items: center; gap: 12px; }
.avance {
  width: 84px;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(133, 122, 116, .16);
}
.avance i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--durazno), var(--lavanda), var(--azul));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}
.acua__btn {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(108, 135, 104, .5);
  background: rgba(255, 253, 249, .8);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
  transition: transform .2s ease, background-color .3s, opacity .3s;
}
.acua__btn svg { color: var(--durazno-2); }
.acua__btn:active { transform: scale(.96); }
.acua__btn:focus-visible { outline: 2px solid var(--salvia-2); outline-offset: 3px; }
.acua__btn:disabled { opacity: .5; cursor: default; }

/* Pincel que sigue al dedo (la punta queda bajo el puntero) */
.pincel {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  width: 64px;
  height: 84px;
  color: var(--pig);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform;
}
.pincel svg { display: block; overflow: visible; filter: drop-shadow(0 3px 3px rgba(70, 55, 45, .22)); }
.pincel.visible { opacity: 1; }

.acua .desliza-c { z-index: 5; color: var(--salvia-2); font-family: var(--sans); }

/* ================= INVITACIÓN ================= */
.contenido {
  position: relative;
  background: var(--papel);
  background-image: var(--grano);
  box-shadow: 0 0 60px -30px rgba(75, 68, 65, .35);
  overflow: hidden;
}
.s-titulo { margin-bottom: 22px; }

.acua-trazo { display: block; width: 210px; height: 52px; margin: 0 auto; overflow: visible; }
.acua-trazo.separador { margin: -14px auto; }

.carta { padding-top: 60px; }
.carta__eyebrow { margin: 10px 0 26px; max-width: 22em; font-family: var(--sans); font-size: .68rem; font-weight: 600; line-height: 1.7; letter-spacing: .28em; text-transform: uppercase; color: var(--salvia-2); }

/* Lámina: la foto como una acuarela impresa sobre papel con bordes irregulares */
.lamina {
  position: relative;
  isolation: isolate;
  width: min(80%, 320px);
  margin: 0;
  padding: 14px 14px 12px;
  filter: drop-shadow(0 14px 14px rgba(95, 75, 55, .18)) drop-shadow(0 1px 1px rgba(95, 75, 55, .2));
}
.lamina.visible { transform: rotate(-1.4deg); }
.lamina::before {                      /* el papel, con bordes irregulares (la sombra sigue su forma) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fffefb;
  background-image: var(--grano);
  clip-path: var(--deckle-clip);
}
.lamina img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; clip-path: var(--deckle-clip); filter: saturate(.86) brightness(1.03); }
.lamina__pie { position: relative; margin: 10px 0 0; font-family: var(--mano); font-size: 1.15rem; color: var(--suave); }

.carta__nombres { margin: 30px 0 0; font-family: var(--guion); font-weight: 400; font-size: clamp(2.9rem, 13.5vw, 3.7rem); line-height: 1.05; }
.carta__nombres .amp { font-size: .5em; }
.carta__fecha { margin: 8px 0 0; font-family: var(--mano); font-size: 1.45rem; font-weight: 600; color: var(--durazno-2); }
.carta__texto { margin: 20px 0 0; max-width: 21em; font-size: 1.16rem; line-height: 1.6; font-style: italic; }

.s-cuenta { background: radial-gradient(70% 55% at 50% 45%, rgba(191, 176, 221, .26), transparent 75%); }
.s-cuenta__caja { background: rgba(255, 253, 249, .9); border-radius: 12px 6px 14px 8px; }
.s-cuenta__lbl { color: var(--suave); }

.s-evento { position: relative; overflow: hidden; border-radius: 10px 4px 12px 6px; }
.s-evento::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -26px;
  width: 120px;
  height: 100px;
  border-radius: 46% 54% 50% 50% / 50% 46% 54% 50%;
  background: radial-gradient(closest-side, rgba(238, 176, 156, .42), rgba(238, 176, 156, .12) 70%, transparent);
  pointer-events: none;
}
.s-evento:nth-child(2)::before { background: radial-gradient(closest-side, rgba(169, 191, 159, .45), rgba(169, 191, 159, .12) 70%, transparent); }
.s-evento:nth-child(3)::before { background: radial-gradient(closest-side, rgba(168, 193, 218, .45), rgba(168, 193, 218, .12) 70%, transparent); }
.s-evento > * { position: relative; }
.s-evento__icono { background: rgba(255, 253, 249, .8); border-color: var(--durazno); color: var(--durazno-2); }
.s-evento__titulo { color: var(--salvia-2); }
.s-evento__hora { color: var(--durazno-2); }
.s-evento__lugar { font-size: 1.2rem; }
.s-evento__dir { font-size: 1.02rem; }

.s-galeria__rejilla { gap: 16px; }
.s-foto { border: 7px solid #fffdf9; border-radius: 3px; background: #fffdf9; }
.s-foto img { filter: saturate(.9); }
.s-galeria .s-foto:nth-child(1) { transform: rotate(-.8deg); }
.s-galeria .s-foto:nth-child(2) { transform: rotate(1.4deg); }
.s-galeria .s-foto:nth-child(3) { transform: rotate(-1.6deg); }
.s-galeria .s-foto.aparece:not(.visible) { transform: translateY(26px); }

.frase { padding-top: 40px; background: radial-gradient(60% 40% at 50% 34%, rgba(168, 193, 218, .28), transparent 75%); }
.frase__foto {
  margin: 0;
  width: min(80%, 320px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 58% 42% 55% 45% / 46% 56% 44% 54%;
  border: 8px solid #fffdf9;
  box-shadow: var(--s-sombra), 0 0 0 12px rgba(238, 176, 156, .22), 0 0 0 26px rgba(191, 176, 221, .14);
}
.frase__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; filter: saturate(.85) brightness(1.04); }
.frase__txt { margin: 34px 0 0; max-width: 16em; font-family: var(--guion); font-size: clamp(1.9rem, 8.6vw, 2.4rem); line-height: 1.22; color: var(--tinta); }

.s-vestimenta { background: radial-gradient(70% 50% at 50% 50%, rgba(226, 192, 138, .2), transparent 75%); }
.s-vestimenta__tipo { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--salvia-2); }
.s-paleta li { background: #fffdf9; border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%; }

.s-rsvp { background: radial-gradient(80% 60% at 50% 40%, rgba(238, 176, 156, .32), transparent 75%); }
.s-rsvp__saludo { font-family: var(--mano); font-size: 1.7rem; font-weight: 600; color: var(--durazno-2); }
.s-rsvp__texto { font-size: 1.15rem; }
.s-btn--lleno { background: linear-gradient(135deg, #f3c3b2, var(--durazno)); color: var(--s-acento-tinta); }

.s-pie__n { font-family: var(--guion); font-size: 2.8rem; }
.btn-musica { background: var(--papel); color: var(--salvia-2); box-shadow: 0 6px 18px rgba(75, 68, 65, .2); }

/* Pantallas bajas: la hoja cede espacio a los controles */
@media (max-height: 620px) {
  .acua__cab { padding-top: calc(env(safe-area-inset-top) + 8px); }
  .acua__titulo { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .acua__hint { font-size: .92rem; }
  .godete { width: 38px; height: 38px; border-radius: 11px; }
  .godete__pozo { width: 23px; height: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .acua__dedo { animation: none; }
  .pincel { transition: none; }
  .firmada .hoja__para, .firmada .firma__nombres, .firmada .firma__fecha-t { animation: acua-aparecer .4s ease forwards; }
  .firmada .firma__swash path { animation: none; stroke-dashoffset: 0; }
  @keyframes acua-aparecer { from { opacity: 0; clip-path: none; } to { opacity: 1; clip-path: none; } }
}