/* ==========================================================
   Diseño "Jardín" · Boda · siembra flores para abrir la invitación
   Paleta: rubor, salvia, crema, oro suave y tinta cálida
   ========================================================== */

@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 {
  --rubor: #f6d9d3;
  --rubor-2: #eebfb5;
  --salvia: #a8b89a;
  --salvia-2: #74886a;
  --crema: #fbf8f2;
  --papel: #f5efe4;
  --oro: #c8a96a;
  --oro-2: #a8874a;
  --tinta: #4a4540;
  --suave: #7b736b;
  --guion: "Pinyon Script", "Great Vibes", cursive;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", system-ui, sans-serif;

  --s-fondo: var(--crema);
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--oro);
  --s-acento-tinta: #3b3631;
  --s-tarjeta: rgba(255, 255, 255, .78);
  --s-borde: rgba(168, 184, 154, .42);
  --s-radio: 22px;
  --s-sombra: 0 20px 36px -28px rgba(90, 70, 50, .5);
  --s-fuente: var(--serif);
  --s-titulo: var(--guion);
  --s-titulo-tam: clamp(2.7rem, 12vw, 3.4rem);
  --s-titulo-color: var(--tinta);
  --s-etiqueta: var(--sans);
  --s-num: var(--serif);
  --s-num-color: var(--salvia-2);
  --s-btn-linea-color: var(--tinta);
}

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

/* ================= INTRO ================= */
.jardin {
  position: relative;
  width: min(100%, 520px);
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  margin: 0 auto;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background:
    radial-gradient(60% 38% at 12% 18%, rgba(246, 217, 211, .6), transparent 70%),
    radial-gradient(52% 34% at 92% 32%, rgba(168, 184, 154, .26), transparent 70%),
    radial-gradient(70% 30% at 50% 100%, rgba(200, 169, 106, .14), transparent 70%),
    var(--crema);
  box-shadow: 0 0 60px -30px rgba(74, 69, 64, .35);
}
.jardin__papel {
  position: absolute;
  inset: 0;
  background-image: var(--grano), var(--fibras);
  opacity: .75;
  pointer-events: none;
}
.jardin__lienzo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.flor__mece { transform-origin: 0 0; animation: mecer 4.6s ease-in-out infinite alternate; }
@keyframes mecer { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }

/* Encabezado */
.jardin__cab {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 28px);
  left: 16px;
  right: 16px;
  z-index: 3;
  text-align: center;
  pointer-events: none;
  transition: opacity .8s ease, transform .8s ease;
}
.jardin__eyebrow { margin: 0; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--salvia-2); }
.jardin__titulo { margin: 4px 0 0; font-family: var(--guion); font-size: clamp(3rem, 15vw, 3.9rem); line-height: 1.05; color: var(--tinta); }
.jardin__hint { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 10px; font-size: 1.12rem; font-style: italic; color: var(--suave); }
.jardin__dedo { width: 12px; height: 12px; border-radius: 50%; background: var(--rubor-2); box-shadow: 0 0 0 0 rgba(238, 191, 181, .8); animation: toque 1.7s ease-out infinite; }
@keyframes toque { to { box-shadow: 0 0 0 14px rgba(238, 191, 181, 0); } }

/* Pulso que invita a tocar */
.jardin__pulso {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 1.5px solid var(--salvia);
  pointer-events: none;
  animation: pulso 2.2s ease-out infinite;
  transition: opacity .5s;
}
.jardin__pulso::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: var(--salvia); opacity: .55; }
@keyframes pulso { 0% { transform: scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.sembrando .jardin__pulso, .arco .jardin__pulso { opacity: 0; animation: none; }

/* Superficie táctil (botón accesible del tamaño del jardín) */
.jardin__tierra {
  all: unset;
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.jardin__tierra:focus-visible { outline: 2px dashed var(--salvia-2); outline-offset: -12px; border-radius: 24px; }
.jardin__tierra:disabled { cursor: default; }

/* Pie: semillas + sembrar por mí */
.jardin__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 18px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity .7s ease, transform .7s ease;
}
.semillas { display: flex; gap: 9px; }
.semillas i {
  width: 10px;
  height: 14px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(60% 50% at 40% 30%, #ecd9ad, var(--oro) 60%, #a5844c);
  box-shadow: 0 2px 3px rgba(120, 90, 40, .25);
  transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .5s, background .5s;
}
.semillas i.usada { transform: translateY(5px) scale(.55); opacity: .35; background: #d9cdb6; box-shadow: none; }
.semillas__txt { margin: 0; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--suave); }
.btn-sembrar {
  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(116, 136, 106, .55);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  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, background-color .3s, opacity .3s;
}
.btn-sembrar svg { color: var(--salvia-2); }
.btn-sembrar:active { transform: scale(.96); }
.btn-sembrar:focus-visible { outline: 2px solid var(--salvia-2); outline-offset: 3px; }
.btn-sembrar:disabled { opacity: .5; cursor: default; }

.arco .jardin__cab { opacity: 0; transform: translateY(-14px); }
.arco .jardin__pie { opacity: 0; transform: translateY(12px); }
.arco .jardin__pie .btn-sembrar { pointer-events: none; }

/* Nombres dentro del arco */
.jardin__final {
  position: absolute;
  z-index: 3;
  left: 15%;
  top: 30%;
  width: 70%;
  height: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.jardin__final::before {
  content: "";
  position: absolute;
  inset: 8% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 253, 248, .9), rgba(255, 253, 248, 0));
  opacity: 0;
  transition: opacity 1.4s ease;
}
.florecido .jardin__final::before { opacity: 1; }
.final__eyebrow, .final__n, .jardin__final .amp, .final__fecha { position: relative; opacity: 0; }
.final__eyebrow { margin: 0 0 6px; font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--salvia-2); }
.final__nombres { position: relative; margin: 0; font-family: var(--guion); font-weight: 400; font-size: clamp(2.8rem, 13.5vw, 3.7rem); line-height: 1.02; color: var(--tinta); }
.final__n { display: block; }
.final__nombres .amp { display: block; margin: 2px 0; font-size: .5em; line-height: 1; }
.final__fecha {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--suave);
}
.final__dia {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--oro);
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--tinta);
}
.florecido .final__eyebrow { animation: brotar 1.1s .1s cubic-bezier(.2, .8, .2, 1) both; }
.florecido .final__n:first-child { animation: brotar 1.3s .35s cubic-bezier(.2, .8, .2, 1) both; }
.florecido .jardin__final .amp { animation: brotar 1.1s .7s cubic-bezier(.2, .8, .2, 1) both; }
.florecido .final__n:last-child { animation: brotar 1.3s .9s cubic-bezier(.2, .8, .2, 1) both; }
.florecido .final__fecha { animation: brotar 1.1s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes brotar { from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Mariposas */
.mariposa { position: absolute; z-index: 4; width: 34px; height: 28px; opacity: 0; pointer-events: none; }
.mariposa__ala { transform-box: fill-box; animation: aleteo .28s ease-in-out infinite alternate; }
.mariposa__ala--i { transform-origin: right center; }
.mariposa__ala--d { transform-origin: left center; }
@keyframes aleteo { to { transform: scaleX(.22); } }
.florecido .mariposa--1 { animation: vuelo1 15s 1.2s ease-in-out infinite; }
.florecido .mariposa--2 { animation: vuelo2 18s 2.4s ease-in-out infinite; width: 26px; height: 22px; }
.florecido .mariposa--3 { animation: vuelo3 21s 3.4s ease-in-out infinite; width: 22px; height: 18px; }
@keyframes vuelo1 {
  0% { left: -10%; top: 62%; opacity: 0; transform: rotate(18deg); }
  8% { opacity: 1; }
  30% { left: 26%; top: 22%; transform: rotate(-8deg); }
  55% { left: 62%; top: 34%; transform: rotate(12deg); }
  80% { left: 84%; top: 14%; transform: rotate(-6deg); opacity: 1; }
  100% { left: 110%; top: 28%; opacity: 0; transform: rotate(10deg); }
}
@keyframes vuelo2 {
  0% { left: 108%; top: 50%; opacity: 0; transform: rotate(-14deg) scaleX(-1); }
  10% { opacity: 1; }
  40% { left: 70%; top: 70%; transform: rotate(6deg) scaleX(-1); }
  70% { left: 30%; top: 46%; transform: rotate(-10deg) scaleX(-1); opacity: 1; }
  100% { left: -12%; top: 18%; opacity: 0; transform: rotate(8deg) scaleX(-1); }
}
@keyframes vuelo3 {
  0% { left: 40%; top: 105%; opacity: 0; }
  12% { opacity: .9; }
  45% { left: 12%; top: 40%; }
  75% { left: 46%; top: 8%; opacity: .9; }
  100% { left: 80%; top: -8%; opacity: 0; }
}

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

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

.ramita { display: block; width: 150px; height: 38px; margin: 0 auto; }
.ramita.separador { margin: -12px auto; opacity: .9; }

.carta { padding-top: 64px; }
.carta__eyebrow { margin: 14px 0 22px; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--salvia-2); max-width: 22em; line-height: 1.7; }
.carta__arco {
  position: relative;
  width: min(78%, 300px);
  margin: 0;
  padding: 9px;
  border-radius: 999px 999px 22px 22px;
  background: #fff;
  border: 1px solid var(--s-borde);
  box-shadow: var(--s-sombra);
}
.carta__arco::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px 999px 28px 28px;
  border: 1px solid rgba(200, 169, 106, .45);
  pointer-events: none;
}
.carta__arco img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 16px 16px; }
.carta__nombres { margin: 30px 0 0; font-family: var(--guion); font-weight: 400; font-size: clamp(3rem, 14vw, 3.8rem); line-height: 1.05; }
.carta__nombres .amp { font-size: .5em; }
.carta__fecha { margin: 6px 0 0; font-size: .82rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--suave); }
.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(--crema), rgba(246, 217, 211, .45) 60%, var(--crema)); }
.s-cuenta__caja { background: rgba(255, 255, 255, .85); border-radius: 999px 999px 18px 18px; }
.s-cuenta__lbl { color: var(--suave); }

.s-evento { position: relative; overflow: hidden; }
.s-evento::before {
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  width: 90px;
  height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath d='M86 6C62 14 40 34 26 64' fill='none' stroke='%23a8b89a' stroke-width='1.4'/%3E%3Cpath d='M70 12c-2-9 3-14 10-15-1 8-4 12-10 15zM56 22c-4-8 0-15 7-17 1 8-2 13-7 17zM44 36c-5-7-3-14 3-17 2 7 1 13-3 17zM34 50c-7-5-6-13-1-17 3 7 3 12 1 17z' fill='%23c9d4be'/%3E%3Ccircle cx='80' cy='22' r='5' fill='%23f6d9d3'/%3E%3Ccircle cx='80' cy='22' r='1.6' fill='%23c8a96a'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .9;
}
.s-evento__icono { background: rgba(246, 217, 211, .45); border-color: var(--rubor-2); color: var(--salvia-2); }
.s-evento__titulo { color: var(--salvia-2); }
.s-evento__hora { color: var(--oro-2); }
.s-evento__lugar { font-size: 1.2rem; }
.s-evento__dir { font-size: 1.02rem; }

.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; }
.s-foto { border: 6px solid #fff; }

.frase { padding-top: 40px; }
.frase__foto {
  margin: 0;
  width: min(84%, 340px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--s-sombra), 0 0 0 1px rgba(200, 169, 106, .5), 0 0 0 14px rgba(246, 217, 211, .5);
}
.frase__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.frase__txt { margin: 30px 0 0; max-width: 16em; font-family: var(--guion); font-size: clamp(2rem, 9vw, 2.5rem); line-height: 1.2; color: var(--tinta); }

.s-vestimenta { background: linear-gradient(180deg, var(--crema), rgba(168, 184, 154, .18) 55%, var(--crema)); }
.s-vestimenta__tipo { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--salvia-2); }
.s-paleta li { background: #fff; }

.s-rsvp { background: radial-gradient(80% 60% at 50% 40%, rgba(246, 217, 211, .55), transparent 75%); }
.s-rsvp__saludo { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--oro-2); }
.s-rsvp__texto { font-size: 1.15rem; }
.s-btn--lleno { background: linear-gradient(135deg, #d9bf86, var(--oro)); }

.s-pie__n { font-family: var(--guion); font-size: 2.8rem; }
.btn-musica { background: var(--crema); color: var(--salvia-2); box-shadow: 0 6px 18px rgba(74, 69, 64, .2); }

@media (prefers-reduced-motion: reduce) {
  .flor__mece, .jardin__pulso, .jardin__dedo, .mariposa, .mariposa__ala { animation: none !important; }
  .mariposa { display: none; }
  .florecido .final__eyebrow, .florecido .final__n, .florecido .jardin__final .amp, .florecido .final__fecha { animation: none; opacity: 1; }
}