/* ==========================================================
   Diseño "Pastel" · Boda · armar el pastel para abrir la invitación
   Paleta pastel: rosa, menta, vainilla, lavanda, oro y tinta cálida
   ========================================================== */

/* Parisienne (SIL OFL) auto-alojada */
@font-face { font-family: "Parisienne"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/parisienne-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: "Parisienne"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/parisienne-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --rosa: #f6d6dc;
  --rosa-2: #e7aab6;
  --menta: #d4ebe0;
  --menta-2: #6f9e88;
  --vainilla: #fbf3e3;
  --lavanda: #e2d9f0;
  --lavanda-2: #9c8bc4;
  --oro: #caa765;
  --oro-2: #957436;
  --tinta: #4f4440;
  --suave: #7d6f69;
  --guion: "Parisienne", "Great Vibes", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --ital: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;

  --s-fondo: var(--vainilla);
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--oro);
  --s-acento-tinta: #3f3531;
  --s-tarjeta: rgba(255, 255, 255, .82);
  --s-borde: rgba(231, 170, 182, .4);
  --s-radio: 24px;
  --s-sombra: 0 20px 36px -26px rgba(120, 80, 80, .5);
  --s-fuente: var(--serif);
  --s-titulo: var(--guion);
  --s-titulo-tam: clamp(2.5rem, 11vw, 3.2rem);
  --s-titulo-color: var(--tinta);
  --s-etiqueta: var(--sans);
  --s-num: var(--ital);
  --s-num-color: var(--oro-2);
  --s-btn-linea-color: var(--tinta);
}

body {
  background: #f4ece0;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
}
.amp { font-family: var(--ital); font-style: italic; color: var(--oro-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 ================= */
.pastel {
  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(60% 40% at 12% 16%, rgba(246, 214, 220, .75), transparent 70%),
    radial-gradient(55% 36% at 92% 28%, rgba(212, 235, 224, .8), transparent 70%),
    radial-gradient(60% 34% at 80% 92%, rgba(226, 217, 240, .7), transparent 70%),
    radial-gradient(60% 30% at 10% 88%, rgba(246, 214, 220, .5), transparent 70%),
    var(--vainilla);
  box-shadow: 0 0 60px -30px rgba(79, 68, 64, .35);
}
.pastel__fondo { position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); }
/* Lunares de luz que flotan suavemente */
.globo-luz {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, 0) 70%);
  box-shadow: 0 0 0 1px rgba(202, 167, 101, .25);
  animation: flotar 7s ease-in-out infinite alternate;
}
.globo-luz:nth-child(1) { left: 9%; top: 30%; }
.globo-luz:nth-child(2) { left: 86%; top: 22%; width: 10px; height: 10px; animation-delay: -2s; }
.globo-luz:nth-child(3) { left: 90%; top: 60%; width: 18px; height: 18px; animation-delay: -4s; }
.globo-luz:nth-child(4) { left: 6%; top: 70%; width: 9px; height: 9px; animation-delay: -1s; }
@keyframes flotar { to { transform: translateY(-18px); } }

/* Encabezado */
.pastel__cab {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 24px);
  left: 16px;
  right: 16px;
  z-index: 4;
  text-align: center;
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.pastel__eyebrow { margin: 0; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--menta-2); }
.pastel__titulo { margin: 4px 0 0; font-family: var(--guion); font-size: clamp(1.9rem, 8.8vw, 2.7rem); line-height: 1.15; color: var(--tinta); }
.pastel__guia { margin: 4px 0 0; font-family: var(--ital); font-style: italic; font-size: 1.08rem; color: var(--tinta); transition: opacity .35s; }
.cambiando .pastel__guia { opacity: 0; }
.final .pastel__cab { opacity: 0; transform: translateY(-14px); }

/* Nombres al final */
.pastel__final {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 22px);
  left: 16px;
  right: 16px;
  z-index: 4;
  text-align: center;
  pointer-events: none;
}
.final__eyebrow { margin: 0; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--oro-2); opacity: 0; }
.final__nombres { margin: 2px 0 0; font-family: var(--guion); font-weight: 400; font-size: clamp(2.5rem, 11.5vw, 3.3rem); line-height: 1.1; color: var(--tinta); opacity: 0; }
.final__nombres .amp { font-size: .55em; padding: 0 .12em; }
.final .final__eyebrow { animation: aparecer 1s .2s ease both; }
.final .final__nombres { animation: aparecer 1.3s .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }

/* Escenario (el JS fija posición y tamaño; el SVG conserva su proporción 300×420) */
.escenario {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 270px;
  height: 378px;
  container-type: inline-size;
}
.escenario__svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: none; }
.escenario__zona {
  all: unset;
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.escenario__zona:focus-visible { outline: 2px dashed var(--oro-2); outline-offset: 4px; border-radius: 24px; }
.corte-activo .escenario__zona { cursor: ns-resize; }

.piso, .flor { opacity: 0; }
.piso.visible, .flor.visible { opacity: 1; }

.adorno { opacity: 0; visibility: hidden; cursor: grab; outline: none; transition: opacity .6s ease, visibility .6s; touch-action: none; }
.adorno.visible { opacity: 1; visibility: visible; }
.adorno.arrastrando { cursor: grabbing; }
.adorno.puesto { cursor: default; }
.adorno__flota { animation: flotaAdorno 2.4s ease-in-out infinite; }
.adorno.arrastrando .adorno__flota, .adorno.puesto .adorno__flota { animation: none; }
@keyframes flotaAdorno { 50% { transform: translateY(-5px); } }
.adorno:focus-visible .adorno__flota > rect { stroke: var(--oro-2); stroke-width: 1.4; stroke-dasharray: 4 3; }
.adorno__ini { font-family: var(--guion); font-size: 21px; fill: var(--oro-2); }
.adorno__chispa { transform-box: fill-box; transform-origin: center; animation: chispa 1.8s ease-in-out infinite; }
@keyframes chispa { 50% { opacity: .2; transform: scale(.5); } }

.meta { opacity: 0; transition: opacity .4s; }
.adorno-activo .meta { opacity: 1; }
.adorno-activo .meta ellipse { transform-box: fill-box; transform-origin: center; animation: meta 1.4s ease-in-out infinite; }
.meta.cerca ellipse { stroke: var(--rosa-2); stroke-width: 2; }
@keyframes meta { 50% { transform: scale(1.18); opacity: .55; } }

.cuchillo { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.cuchillo.visible { opacity: 1; }

/* Pista animada "desliza hacia abajo" junto a la pala */
.pista-corte {
  position: absolute;
  left: 92%;
  top: 46%;
  z-index: 2;
  width: 2px;
  height: 38px;
  border-radius: 2px;
  background: linear-gradient(var(--oro-2), rgba(149, 116, 54, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.pista-corte::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -2px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--oro-2);
  border-bottom: 2px solid var(--oro-2);
  transform: rotate(45deg);
}
.corte-activo .pista-corte { opacity: .9; animation: pista 1.4s ease-in-out infinite; }
.cortado .pista-corte { opacity: 0; animation: none; }
@keyframes pista { 0% { transform: translateY(-8px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(14px); opacity: 0; } }

/* Tarjeta-rebanada con la fecha: sale del corte y se acomoda al frente */
.rebanada {
  position: absolute;
  z-index: 2;
  left: 87%;
  top: 64.3%;
  width: 8.3%;
  height: 17.4%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 6px 6px 4px 4px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0) 80%, rgba(120, 80, 70, .12)),
    linear-gradient(180deg, #f6d6dc 0 7%, #f9e6c4 7% 21%, #f3bfca 21% 24%, #fffaf0 24% 76%, #d9cdee 76% 79%, #f9e6c4 79% 93%, #f6d6dc 93% 100%);
  box-shadow: 0 16px 26px -16px rgba(100, 60, 60, .55), 0 0 0 1px rgba(202, 167, 101, .35);
  transform: rotate(7deg);
  opacity: 0;
  transition: left .95s cubic-bezier(.2, .8, .2, 1), top .95s cubic-bezier(.2, .8, .2, 1), width .95s cubic-bezier(.2, .8, .2, 1),
    height .95s cubic-bezier(.2, .8, .2, 1), transform .95s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}
.rebanada.inicio { opacity: 1; }
.rebanada.fuera { left: 57%; top: 54%; width: 41%; height: 41%; transform: rotate(-3deg); opacity: 1; }
.rebanada::before {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -9px;
  height: 18px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, #f1e8da);
  box-shadow: 0 0 0 1px rgba(202, 167, 101, .7), 0 8px 14px -8px rgba(100, 60, 60, .5);
}
.rebanada::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -3px;
  height: 7px;
  background: radial-gradient(circle, #fff 0 30%, #ece2d4 55%, rgba(236, 226, 212, 0) 62%) 0 0 / 7px 7px repeat-x;
}
.rebanada > p { margin: 0; opacity: 0; transition: opacity .7s .75s ease; }
.rebanada.fuera > p { opacity: 1; }
.rebanada__eyebrow { font-family: var(--sans); font-size: 9px; font-size: 3.1cqw; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--menta-2); }
.rebanada__dia { font-family: var(--ital); font-style: italic; font-size: 34px; font-size: 12.5cqw; line-height: 1; color: var(--tinta); }
.rebanada__mes { font-family: var(--sans); font-size: 11px; font-size: 3.9cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-2); }
.rebanada__semana { margin-top: 2px !important; font-family: var(--guion); font-size: 14px; font-size: 5cqw; color: var(--rosa-2); }
.rebanada__flor {
  position: absolute;
  top: -11px;
  right: 10%;
  width: 24px;
  height: 24px;
  opacity: 0;
  transition: opacity .5s .9s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23e2d9f0' stroke='%23bfb0db' stroke-width='.5'%3E%3Cellipse cy='-5.5' rx='4' ry='5.8'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(72)'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(144)'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(216)'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='2.4' fill='%23caa765'/%3E%3C/svg%3E") no-repeat center / contain;
}
.rebanada.fuera .rebanada__flor { opacity: 1; }

/* Pie: pasos + estado + botón */
.pastel__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  transition: opacity .7s ease, transform .7s ease;
}
.pasos { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pasos li {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(202, 167, 101, .45);
  background: rgba(255, 255, 255, .6);
  color: var(--suave);
  opacity: .55;
  transition: opacity .4s, background-color .4s, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.pasos li.is-activo { opacity: 1; color: var(--oro-2); transform: scale(1.12); background: #fff; }
.pasos li.is-hecho { opacity: 1; color: #fff; background: var(--oro); border-color: var(--oro); }
.pastel__estado { margin: 0; font-family: var(--sans); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.btn-pastel {
  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(231, 170, 182, .8);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta);
  cursor: pointer;
  transition: transform .2s ease, background-color .3s, opacity .3s;
}
.btn-pastel svg { color: var(--rosa-2); }
.btn-pastel:active { transform: scale(.96); }
.btn-pastel:focus-visible { outline: 2px solid var(--oro-2); outline-offset: 3px; }
.btn-pastel:disabled { opacity: .5; cursor: default; }
.final .pastel__pie { opacity: 0; transform: translateY(12px); }
.final .pastel__pie .btn-pastel { pointer-events: none; }

.pastel .desliza-c { z-index: 6; color: var(--oro-2); font-family: var(--sans); }

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

/* Separador: hilera de perlas con una flor al centro */
.perlas {
  display: block;
  width: 168px;
  height: 22px;
  margin: 0 auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='%23f6d6dc' stroke='%23e7aab6' stroke-width='.5'%3E%3Cellipse cy='-5.5' rx='4' ry='5.8'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(72)'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(144)'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(216)'/%3E%3Cellipse cy='-5.5' rx='4' ry='5.8' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='2.4' fill='%23caa765'/%3E%3C/svg%3E") no-repeat center / 22px 22px,
    radial-gradient(circle, #fff 0 28%, #eadfce 52%, rgba(234, 223, 206, 0) 60%) 0 50% / 10px 10px repeat-x;
}
.perlas--sep { margin: -10px auto; }

.carta { padding-top: 60px; }
.carta__eyebrow { margin: 14px 0 26px; max-width: 22em; font-family: var(--sans); font-size: .68rem; font-weight: 700; line-height: 1.8; letter-spacing: .24em; text-transform: uppercase; color: var(--menta-2); }
/* Foto en arco con borde de perlas */
.carta__foto {
  position: relative;
  width: min(74%, 290px);
  margin: 0;
  padding: 8px;
  border-radius: 999px 999px 26px 26px;
  background: #fff;
  box-shadow: var(--s-sombra);
}
.carta__foto::after {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 999px 999px 34px 34px;
  border: 5px dotted rgba(202, 167, 101, .55);
  pointer-events: none;
}
.carta__foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 20px 20px; }
.carta__nombres { margin: 32px 0 0; font-family: var(--guion); font-weight: 400; font-size: clamp(2.7rem, 12.5vw, 3.5rem); line-height: 1.1; }
.carta__nombres .amp { font-size: .55em; }
.carta__fecha { margin: 8px 0 0; font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-2); }
.carta__texto { margin: 20px 0 0; max-width: 21em; font-size: 1.18rem; line-height: 1.6; font-style: italic; }

.s-cuenta { background: linear-gradient(180deg, var(--vainilla), rgba(246, 214, 220, .5) 55%, var(--vainilla)); }
.s-cuenta__caja { background: rgba(255, 255, 255, .9); border-radius: 22px 22px 14px 14px; }
.s-cuenta__caja:nth-child(1) { box-shadow: inset 0 -5px 0 var(--rosa), var(--s-sombra); }
.s-cuenta__caja:nth-child(2) { box-shadow: inset 0 -5px 0 var(--menta), var(--s-sombra); }
.s-cuenta__caja:nth-child(3) { box-shadow: inset 0 -5px 0 var(--lavanda), var(--s-sombra); }
.s-cuenta__caja:nth-child(4) { box-shadow: inset 0 -5px 0 #f3e2b0, var(--s-sombra); }

.s-evento { position: relative; overflow: hidden; }
.s-evento::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 10px;
  height: 8px;
  background: radial-gradient(circle, #fff 0 28%, #eadfce 52%, rgba(234, 223, 206, 0) 60%) 0 0 / 9px 8px repeat-x;
  opacity: .9;
}
.s-evento:nth-child(1) { background: linear-gradient(180deg, #fff, rgba(246, 214, 220, .45)); }
.s-evento:nth-child(2) { background: linear-gradient(180deg, #fff, rgba(212, 235, 224, .55)); }
.s-evento__icono { background: #fff; border-color: var(--rosa-2); color: var(--oro-2); }
.s-evento__titulo { color: var(--menta-2); }
.s-evento__hora { font-style: italic; color: var(--tinta); }
.s-evento__lugar { font-size: 1.2rem; }
.s-evento__dir { font-size: 1.02rem; }

.s-foto { border: 6px solid #fff; }
.s-galeria__rejilla--3 .s-foto:first-child { border-radius: 999px 999px var(--s-radio) var(--s-radio); }
.s-galeria__rejilla--3 .s-foto:first-child img { aspect-ratio: 4 / 3; }

.frase { background: radial-gradient(80% 50% at 50% 55%, rgba(226, 217, 240, .55), transparent 75%); }
.frase__foto {
  margin: 0;
  width: min(80%, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--s-sombra), 0 0 0 1px rgba(202, 167, 101, .5), 0 0 0 14px rgba(246, 214, 220, .5);
}
.frase__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frase__txt { margin: 30px 0 0; max-width: 17em; font-family: var(--ital); font-style: italic; font-size: 1.3rem; line-height: 1.55; color: var(--tinta); }

.s-vestimenta { background: linear-gradient(180deg, var(--vainilla), rgba(212, 235, 224, .45) 55%, var(--vainilla)); }
.s-vestimenta__tipo { font-family: var(--ital); font-style: italic; font-size: 1.7rem; color: var(--oro-2); }
.s-paleta li { background: #fff; }

.s-rsvp { background: radial-gradient(80% 60% at 50% 40%, rgba(246, 214, 220, .6), transparent 75%); }
.s-rsvp__saludo { font-family: var(--ital); font-style: italic; font-size: 1.4rem; color: var(--oro-2); }
.s-rsvp__texto { font-size: 1.15rem; }
.s-btn--lleno { background: linear-gradient(135deg, #f3dfae, var(--oro)); }

.s-pie__n { font-family: var(--guion); font-size: 2.7rem; }
.btn-musica { background: var(--vainilla); color: var(--oro-2); box-shadow: 0 6px 18px rgba(79, 68, 64, .2); }

@media (prefers-reduced-motion: reduce) {
  .globo-luz, .adorno__flota, .adorno__chispa, .adorno-activo .meta ellipse, .corte-activo .pista-corte { animation: none !important; }
  .rebanada { transition-duration: .2s; }
  .rebanada > p, .rebanada__flor { transition-delay: 0s; }
  .final .final__eyebrow, .final .final__nombres { animation: none; opacity: 1; }
}