/* ==========================================================
   Diseño "Moño" · XV años · coquette glam
   estuche de terciopelo → jalar el listón → collar de perlas → espejo de tocador
   ========================================================== */

/* Bodoni Moda (itálica) no está declarada en base.css: archivos locales OFL */
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(../fonts/bodoni-moda-italic-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: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url(../fonts/bodoni-moda-italic-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 {
  --ballet: #f8d9e2;
  --chicle: #f08db0;
  --rosa: #e5739a;
  --frambuesa: #c2457a;
  --perla: #fffaf8;
  --oro: #d4a08a;
  --oro-osc: #b17763;
  --tinta: #5b2a40;
  --suave: #9b6a80;
  --mono-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fde6ee'/%3E%3Cstop offset='.5' stop-color='%23f2a6bf'/%3E%3Cstop offset='1' stop-color='%23d9708f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23g)' stroke='%23c25a80' stroke-opacity='.5' stroke-width='1'%3E%3Cpath d='M32 22C25 11 11 3 6 10C1 17 9 28 32 27Z'/%3E%3Cpath d='M32 22C39 11 53 3 58 10C63 17 55 28 32 27Z'/%3E%3Cpath d='M30 26L20 44L26 41.5L28.5 47L34 27Z'/%3E%3Cpath d='M34 26L44 44L38 41.5L35.5 47L30 27Z'/%3E%3Crect x='27.5' y='19' width='9' height='10' rx='3.5'/%3E%3C/g%3E%3C/svg%3E");

  --s-fondo: transparent;
  --s-tinta: var(--tinta);
  --s-suave: var(--suave);
  --s-acento: var(--frambuesa);
  --s-acento-tinta: #fff;
  --s-tarjeta: rgba(255, 255, 255, .78);
  --s-borde: rgba(229, 115, 154, .25);
  --s-radio: 26px;
  --s-sombra: 0 22px 38px -24px rgba(140, 40, 85, .5);
  --s-fuente: "Cormorant Garamond", Georgia, serif;
  --s-titulo: "Bodoni Moda", "Playfair Display", Georgia, serif;
  --s-titulo-tam: clamp(2.3rem, 10vw, 3rem);
  --s-etiqueta: "DM Sans", system-ui, sans-serif;
  --s-num: "Bodoni Moda", Georgia, serif;
  --s-titulo-color: var(--frambuesa);
}

body {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.3px, transparent 2px) 0 0 / 36px 36px,
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 1px, transparent 1.6px) 18px 18px / 36px 36px,
    linear-gradient(180deg, #fdeef3 0%, #fbe2ea 45%, #fdf0f4 100%);
  background-attachment: fixed;
  color: var(--tinta);
  font-family: var(--s-fuente);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Tocador (hero) ---------- */
.tocador {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1.2fr;
  justify-items: center;
  padding: calc(env(safe-area-inset-top) + 44px) 16px calc(env(safe-area-inset-bottom) + 56px);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(70% 46% at 50% 44%, rgba(255, 250, 252, .95), rgba(255, 250, 252, 0) 72%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 20px, rgba(255, 255, 255, .2) 32px, rgba(255, 255, 255, 0) 46px),
    radial-gradient(120% 70% at 50% 110%, #f3b3c8, transparent 60%),
    linear-gradient(180deg, #f7cfdc 0%, #fbe1e9 38%, #fde9ef 65%, #f6c9d7 100%);
}
.tocador::after {                          /* viñeta suave */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(194, 69, 122, .16));
}

.tocador__feston { position: absolute; left: 0; top: env(safe-area-inset-top); width: 100%; height: clamp(34px, 9vw, 52px); pointer-events: none; z-index: 1; }
.feston__hilo { fill: none; stroke: rgba(177, 119, 99, .5); stroke-width: .7; }
.feston__perla { fill: url(#moPerla); stroke: rgba(180, 140, 150, .35); stroke-width: .4; }
.feston__mono { fill: url(#moSatin); stroke: rgba(194, 69, 122, .45); stroke-width: 1.2; }

.tocador__brillos { position: absolute; inset: 0; pointer-events: none; }
.tocador__brillos i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  animation: destellar 3.4s ease-in-out infinite;
}
.tocador__brillos i:nth-child(1) { left: 8%; top: 20%; }
.tocador__brillos i:nth-child(2) { left: 86%; top: 16%; width: 9px; height: 9px; animation-delay: -1.1s; }
.tocador__brillos i:nth-child(3) { left: 90%; top: 52%; width: 15px; height: 15px; animation-delay: -2.2s; }
.tocador__brillos i:nth-child(4) { left: 5%; top: 60%; width: 8px; height: 8px; animation-delay: -.6s; }
.tocador__brillos i:nth-child(5) { left: 24%; top: 9%; width: 7px; height: 7px; animation-delay: -1.7s; }
.tocador__brillos i:nth-child(6) { left: 72%; top: 74%; animation-delay: -2.8s; }
.tocador__brillos i:nth-child(7) { left: 14%; top: 82%; width: 10px; height: 10px; animation-delay: -.3s; }
.tocador__brillos i:nth-child(8) { left: 60%; top: 8%; width: 9px; height: 9px; animation-delay: -2.5s; }
.tocador__brillos i:nth-child(9) { left: 92%; top: 88%; width: 8px; height: 8px; animation-delay: -1.4s; }
.tocador__brillos i:nth-child(10) { left: 40%; top: 90%; width: 11px; height: 11px; animation-delay: -3s; }
@keyframes destellar {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50% { opacity: .95; transform: scale(1) rotate(45deg); }
}

/* Textos superpuestos (antes / después) */
.tocador__arriba, .tocador__abajo { position: relative; z-index: 3; display: grid; justify-items: center; }
.tocador__arriba { grid-row: 2; }
.tocador__abajo { grid-row: 4; width: 100%; min-height: 150px; align-content: start; }
.tocador__arriba > *, .tocador__abajo > * { grid-area: 1 / 1; margin: 0; transition: opacity .8s ease, transform .8s ease, visibility 0s; }

.tocador__pre { font-family: "Great Vibes", cursive; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.2; color: var(--frambuesa); text-shadow: 0 2px 10px rgba(255, 255, 255, .9); }
.tocador__xv {
  align-self: end;
  font-family: "DM Sans", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .5em;
  padding-left: .5em;
  text-transform: uppercase;
  color: var(--frambuesa);
  opacity: 0;
  transform: translateY(10px);
}
.tocador.abierto .tocador__pre { opacity: 0; transform: translateY(-12px); }
.tocador.espejo-on .tocador__xv { opacity: 1; transform: none; transition-delay: .3s; }

/* ---------- Escena ---------- */
.escena {
  --ew: min(80vw, 310px, 40svh);
  grid-row: 3;
  position: relative;
  z-index: 2;
  width: var(--ew);
  height: calc(var(--ew) * 1.15);
  margin: 14px 0 6px;
}

/* ---------- Estuche + moño (SVG) ---------- */
.regalo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 1s ease, transform 1.1s cubic-bezier(.4, 0, .2, 1);
}
.tocador.vacia .regalo { opacity: 0; transform: translateY(34px) scale(.9); }
.regalo__xv { font-family: "Bodoni Moda", Georgia, serif; font-style: italic; font-size: 15px; letter-spacing: .12em; fill: url(#moOro); }
.regalo__banda { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.6, 0, .8, .4), opacity .7s ease; }
.tocador.desatado .regalo__banda { transform: scaleY(0); opacity: 0; }

.regalo__luz { opacity: 0; transition: opacity .7s ease; }
.tocador.abierta .regalo__luz { opacity: 1; }
.regalo__rayos { transform-box: view-box; transform-origin: 150px 212px; animation: rayos 5s ease-in-out infinite alternate; }
@keyframes rayos { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

.regalo__tapa { transform-box: fill-box; transform-origin: 50% 50%; }
.tocador.abierta .regalo__tapa { animation: tapaVuela 1.15s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes tapaVuela {
  0% { transform: none; opacity: 1; }
  18% { transform: translate(-4px, -46px) rotate(-7deg); opacity: 1; }
  100% { transform: translate(-70px, -560px) rotate(-44deg); opacity: 0; }
}

.lazos__sombra { fill: rgba(110, 25, 60, .2); }
.cola__tela { fill: url(#moSatinCola); stroke: rgba(176, 70, 110, .4); stroke-width: .8; stroke-linejoin: round; }
.cola__sombra { fill: rgba(122, 32, 70, .2); }
.cola__brillo { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cola { transform-box: view-box; transform-origin: 150px 176px; }
.tocador.desatado .cola--izq { animation: colaCae 1s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes colaCae {
  from { transform: none; opacity: 1; }
  to { transform: translate(-30px, 190px) rotate(-26deg); opacity: 0; }
}
.tocador.desatado .cola--der { opacity: 0; transition: opacity .8s ease .45s; }

.lazo__fuera { fill: url(#moSatin); stroke: rgba(176, 70, 110, .45); stroke-width: 1; stroke-linejoin: round; }
.lazo__dentro { fill: url(#moSatinDentro); }
.lazo__pliegue { fill: none; stroke: rgba(160, 52, 96, .3); stroke-width: 1.4; stroke-linecap: round; }
.lazo__luz { fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 3; stroke-linecap: round; }
.lazo__luz--b { stroke: rgba(255, 255, 255, .38); stroke-width: 2; }
.nudo__tela { fill: url(#moNudo); stroke: rgba(176, 70, 110, .5); stroke-width: 1; stroke-linejoin: round; }
.nudo__arruga { fill: none; stroke: rgba(160, 52, 96, .38); stroke-width: 1.2; stroke-linecap: round; }
.nudo__luz { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 2; stroke-linecap: round; }

/* Fases del desate: el lazo derecho se encoge al jalar, luego el izquierdo, luego se suelta */
.lazo, .nudo {
  transform-box: view-box;
  transform-origin: 150px 168px;
  transition: transform .7s cubic-bezier(.34, 1.56, .5, 1), opacity .5s ease;
}
.lazo--izq { transform: rotate(calc(var(--tension, 0) * 3deg + var(--ri, 0deg))) scale(var(--si, 1)); }
.lazo--der { transform: rotate(calc(var(--tension, 0) * -6deg)) scale(calc(var(--sd, 1) - var(--tension, 0) * .12)); }
.nudo { transform: rotate(var(--rn, 0deg)) scale(calc(1 + var(--tension, 0) * .07)); }
.tocador.fase-1 { --sd: .66; --si: 1.04; --rn: 4deg; }
.tocador.fase-2 { --sd: .3; --si: .62; --ri: 10deg; --rn: 10deg; }
.tocador.desatado .lazo { transform: scale(0) rotate(40deg); opacity: 0; transition: transform .55s cubic-bezier(.6, 0, .8, .3), opacity .5s ease .1s; }
.tocador.desatado .nudo { transform: scale(0); opacity: 0; transition: transform .45s ease-in .15s, opacity .4s ease .2s; }
.tocador.desatado .lazos__sombra { opacity: 0; transition: opacity .5s; }

/* Punta del listón (control) */
.jalar {
  position: absolute;
  left: 66%;
  top: 84%;
  z-index: 8;
  width: 66px;
  height: 66px;
  margin: -33px 0 0 -33px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .4s ease;
}
.jalar:active { cursor: grabbing; }
.jalar:focus-visible { outline: 2px solid var(--frambuesa); outline-offset: 2px; }
.jalar__aro {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 12px rgba(240, 141, 176, .8);
  animation: latido 1.8s ease-out infinite;
}
.jalar__punto {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fde3ec 60%, #f3a9c1);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .6), 0 0 16px rgba(255, 255, 255, .95), 0 4px 8px rgba(140, 40, 85, .35);
}
.jalar.agarrado .jalar__aro { animation: none; opacity: 0; }
@keyframes latido {
  0% { transform: scale(.55); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
.tocador.abierto .jalar { opacity: 0; pointer-events: none; }

/* ---------- Espejo de tocador ---------- */
.espejo {
  position: absolute;
  left: 4%;
  top: 0;
  z-index: 4;
  width: 92%;
  aspect-ratio: 260 / 320;
  opacity: 0;
  transform: translateY(30px) scale(.86);
  pointer-events: none;
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2, .9, .25, 1.12);
}
.espejo::before {                          /* sombra del espejo sobre la pared */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14%;
  bottom: 2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(140, 40, 85, .3), transparent);
  transform: translateY(5%);
  filter: blur(6px);
}
.tocador.espejo-on .espejo { opacity: 1; transform: none; pointer-events: auto; }
.espejo__marco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.marco__aro { fill: url(#moOroMarco); stroke: rgba(150, 90, 70, .4); stroke-width: .8; }
.marco__moldura { fill: none; stroke: rgba(255, 244, 236, .85); stroke-width: 1.6; }
.marco__perlas circle { fill: url(#moPerla); stroke: rgba(170, 120, 120, .3); stroke-width: .3; }
.marco__labio { fill: none; stroke: url(#moOro); stroke-width: 4; }
.marco__mono { fill: url(#moSatin); stroke: rgba(176, 70, 110, .5); stroke-width: 1; }

.foco__halo { fill: url(#moHalo); opacity: 0; transition: opacity .35s ease; }
.foco__base { fill: url(#moOro); stroke: rgba(150, 90, 70, .45); stroke-width: .6; }
.foco__vidrio { fill: #eadbd6; transition: fill .25s ease; }
.foco__brillo { fill: #fff; opacity: .55; }
.foco.on .foco__halo { opacity: 1; animation: parpadeo 3.2s ease-in-out infinite; }
.foco.on .foco__vidrio { fill: #fffaf0; }
.foco:nth-child(2n).on .foco__halo { animation-delay: -1.1s; }
.foco:nth-child(3n).on .foco__halo { animation-delay: -2.1s; }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

.espejo__foto {
  position: absolute;
  left: 19.23%;
  top: 16.875%;
  width: 61.54%;
  height: 66.25%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #fff4f7, #f4cfdb);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.espejo__foto:disabled { cursor: default; }
.espejo__foto:focus-visible { outline: 3px solid var(--frambuesa); outline-offset: 4px; }
.espejo__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  transform: scale(1.5);
  transform-origin: 48% 27%;
  opacity: 0;
  filter: blur(10px) brightness(1.35);
  transition: opacity 1.6s ease, filter 1.8s ease;
}
.tocador.foto-on .espejo__foto img { opacity: 1; filter: none; }
.espejo__reflejo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .08) 26%, transparent 42%, transparent 78%, rgba(255, 255, 255, .18) 100%);
  box-shadow: inset 0 0 22px rgba(120, 30, 70, .35), inset 0 0 0 2px rgba(255, 255, 255, .4);
}
.espejo__barrido {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .75) 48%, rgba(255, 236, 244, .2) 54%, transparent 62%);
  transform: translateX(-120%);
}
.espejo__foto.barrido .espejo__barrido { animation: barrer 1s ease-out; }
@keyframes barrer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* "Filtros" de la foto */
.espejo__filtro { position: absolute; inset: 0; pointer-events: none; }
.espejo__filtro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease, background .6s ease;
}
.espejo__filtro i {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  transform: scale(0);
}
.espejo__filtro i:nth-child(1) { left: 18%; top: 20%; }
.espejo__filtro i:nth-child(2) { left: 70%; top: 14%; width: 10px; height: 10px; }
.espejo__filtro i:nth-child(3) { left: 80%; top: 44%; width: 18px; height: 18px; }
.espejo__filtro i:nth-child(4) { left: 12%; top: 54%; width: 9px; height: 9px; }
.espejo__filtro i:nth-child(5) { left: 30%; top: 76%; width: 12px; height: 12px; }
.espejo__filtro i:nth-child(6) { left: 62%; top: 80%; width: 16px; height: 16px; }
.espejo__filtro i:nth-child(7) { left: 46%; top: 8%; width: 8px; height: 8px; }
.espejo__filtro i:nth-child(8) { left: 76%; top: 66%; width: 9px; height: 9px; }
.espejo__filtro i:nth-child(9) { left: 24%; top: 36%; width: 7px; height: 7px; }
.espejo__filtro i:nth-child(10) { left: 54%; top: 56%; width: 8px; height: 8px; }
.espejo__filtro i:nth-child(11) { left: 40%; top: 90%; width: 10px; height: 10px; }
.espejo__filtro i:nth-child(12) { left: 86%; top: 26%; width: 7px; height: 7px; }

.tocador.foto-on .espejo__foto.f-1 img { filter: brightness(1.08) saturate(1.15) contrast(1.03); }
.espejo__foto.f-1 .espejo__filtro::before { opacity: 1; background: radial-gradient(80% 70% at 50% 35%, rgba(255, 255, 255, .28), rgba(255, 196, 220, .3) 70%, rgba(240, 141, 176, .4)); mix-blend-mode: screen; }
.espejo__foto.f-1 .espejo__filtro i:nth-child(-n+5) { animation: chispa 2.4s ease-in-out infinite; }
.tocador.foto-on .espejo__foto.f-2 img { filter: brightness(1.05) contrast(1.06) saturate(1.05); }
.espejo__foto.f-2 .espejo__filtro::before { opacity: 1; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 40%), radial-gradient(circle at 75% 70%, rgba(255, 220, 235, .35), transparent 45%); mix-blend-mode: screen; }
.espejo__foto.f-2 .espejo__filtro i { animation: chispa 1.8s ease-in-out infinite; }
.tocador.foto-on .espejo__foto.f-3 img { filter: sepia(.2) saturate(1.3) hue-rotate(-12deg) brightness(1.04); }
.espejo__foto.f-3 .espejo__filtro::before { opacity: 1; background: linear-gradient(180deg, rgba(255, 170, 200, .25), rgba(214, 120, 160, .32)); mix-blend-mode: soft-light; }
.espejo__foto.f-3 .espejo__filtro i:nth-child(2n) { animation: chispa 2.8s ease-in-out infinite; }
.espejo__filtro i:nth-child(2) { animation-delay: -.4s !important; }
.espejo__filtro i:nth-child(3) { animation-delay: -1.1s !important; }
.espejo__filtro i:nth-child(4) { animation-delay: -.7s !important; }
.espejo__filtro i:nth-child(5) { animation-delay: -1.5s !important; }
.espejo__filtro i:nth-child(6) { animation-delay: -.2s !important; }
.espejo__filtro i:nth-child(7) { animation-delay: -1.3s !important; }
.espejo__filtro i:nth-child(8) { animation-delay: -.9s !important; }
.espejo__filtro i:nth-child(9) { animation-delay: -1.7s !important; }
.espejo__filtro i:nth-child(10) { animation-delay: -.5s !important; }
.espejo__filtro i:nth-child(11) { animation-delay: -1.2s !important; }
.espejo__filtro i:nth-child(12) { animation-delay: -.3s !important; }
@keyframes chispa {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
  60% { opacity: .9; transform: scale(.85) rotate(60deg); }
}

.espejo__pill {
  position: absolute;
  left: 50%;
  bottom: 1%;
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 18px -10px rgba(140, 40, 85, .6);
  font-family: "DM Sans", sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--frambuesa);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}
.espejo__pill.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Etiqueta colgante ---------- */
.etiqueta {
  position: absolute;
  left: 16%;
  top: 56%;
  z-index: 7;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  filter: drop-shadow(0 6px 8px rgba(120, 30, 70, .28));
  animation: columpio 3.4s ease-in-out infinite;
  transition: left 1.2s cubic-bezier(.5, 0, .2, 1), top 1.2s cubic-bezier(.5, 0, .2, 1), opacity .6s ease;
}
.tocador.vacia .etiqueta { opacity: 0; }
.tocador.espejo-on .etiqueta { left: 88%; top: 60%; opacity: 1; }
@keyframes columpio { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(-5deg); } }
.etiqueta__hilo {
  position: absolute;
  left: -1.5px;
  top: -3px;
  width: 3px;
  height: 32px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e595ad, #fde3eb 50%, #e08aa4);
}
.etiqueta__hilo::before {                  /* nudito del hilo */
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 11px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fde3eb, #e595ad);
}
.etiqueta__carton {
  position: absolute;
  top: 24px;
  left: -50px;
  width: 100px;
  padding: 18px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(170deg, #fffefd, #fbeef2 70%, #f6dfe7);
  clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  box-shadow: inset 0 0 0 4px #fffefd, inset 0 0 0 5px rgba(212, 160, 138, .55);
}
.etiqueta__ojal {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #f4cbd8;
  box-shadow: 0 0 0 2px var(--oro), inset 0 1px 2px rgba(120, 30, 70, .4);
}
.etiqueta__para { font-family: "DM Sans", sans-serif; font-size: .56rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--suave); }
.etiqueta__nombre {
  margin-top: 2px;
  max-width: 100%;
  font-family: "Great Vibes", cursive;
  font-size: 1.28rem;
  line-height: 1.05;
  color: var(--frambuesa);
  overflow-wrap: anywhere;
}

/* ---------- Pista y botón "Desatarlo por mí" ---------- */
.pista { display: grid; justify-items: center; gap: 14px; padding-top: 6px; }
.tocador.abierto .pista { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s .5s; }
.pista__texto {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta);
}
.pista__flecha {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--frambuesa);
  border-bottom: 2px solid var(--frambuesa);
  transform: rotate(-15deg);
  animation: empuje 1.4s ease-in-out infinite;
}
@keyframes empuje { 0%, 100% { translate: 0 0; } 50% { translate: 4px 4px; } }
.btn-desatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1.5px solid rgba(194, 69, 122, .4);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 22px -14px rgba(140, 40, 85, .7);
  font-family: "DM Sans", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--frambuesa);
  cursor: pointer;
  transition: transform .2s ease, background-color .3s;
}
.btn-desatar:active { transform: scale(.96); }
.btn-desatar:focus-visible { outline: 2px solid var(--frambuesa); outline-offset: 3px; }
.btn-desatar svg { width: 24px; height: 18px; fill: var(--chicle); }

/* ---------- Nombre en perlas ---------- */
.revelado { display: grid; justify-items: center; opacity: 0; pointer-events: none; }
.tocador.nombre-on .revelado { opacity: 1; }
.collar {
  position: relative;
  margin: 0;
  width: min(calc(100vw - 32px), 440px);
  height: clamp(92px, 27vw, 130px);
  font-weight: 400;
}
.collar__texto {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Great Vibes", cursive;
  font-size: clamp(3.4rem, 17vw, 5.4rem);
  line-height: 1;
  white-space: nowrap;
  color: rgba(201, 74, 120, .22);      /* trazo tenue bajo las perlas: da contraste sobre el rosa */
}
.collar.sin-perlas .collar__texto {
  background: linear-gradient(105deg, var(--frambuesa), var(--chicle) 40%, var(--oro) 60%, var(--frambuesa));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.collar__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(150, 50, 90, .55)) drop-shadow(0 2px 6px rgba(201, 74, 120, .35)); }
.revelado__fecha {
  margin: 2px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--suave);
  opacity: 0;
  transition: opacity 1s ease;
}
.tocador.listo .revelado__fecha { opacity: 1; }
.revelado__sigue { margin: 10px 0 0; font-style: italic; font-size: 1.05rem; color: var(--frambuesa); opacity: 0; transition: opacity 1s ease; }
.tocador.listo .revelado__sigue { opacity: .95; }
.tocador.listo .revelado__sigue.visto { opacity: 0; }

/* Capa de lluvia y del hilo de perlas que sigue el dedo */
.lluvia { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 56; pointer-events: none; }

/* ---------- Secciones ---------- */
.s-titulo { font-style: italic; letter-spacing: -.01em; }
.s-titulo::before {
  content: "";
  display: block;
  width: 46px;
  height: 35px;
  margin: 0 auto 10px;
  background: var(--mono-ico) center / contain no-repeat;
  animation: monoVaiven 3.4s ease-in-out infinite;
}
@keyframes monoVaiven { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-2px); } }

.dedicatoria { padding-top: 92px; overflow: hidden; }
.dedicatoria__mono {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff, #fbe7ee 72%);
  box-shadow: 0 0 0 1px rgba(212, 160, 138, .7), 0 0 0 6px #fffaf8, 0 0 0 7px rgba(240, 141, 176, .5), 0 22px 30px -18px rgba(140, 40, 85, .6);
}
.dedicatoria__mono::before {               /* aro de perlas */
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 5px dotted #fff;
  filter: drop-shadow(0 1px 1px rgba(170, 110, 120, .55));
}
.dedicatoria__mono span { font-family: "Great Vibes", cursive; font-size: 3.4rem; line-height: 1; color: var(--frambuesa); transform: translateY(4px); }
.dedicatoria__texto { margin: 30px 0 0; max-width: 21em; font-style: italic; font-size: clamp(1.22rem, 5vw, 1.42rem); line-height: 1.6; }
.dedicatoria__familia { margin-top: 26px; }
.dedicatoria__t { margin: 18px 0 0; font-family: "DM Sans", sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--suave); }
.dedicatoria__n { margin: 4px 0 0; font-family: "Great Vibes", cursive; font-size: 1.9rem; line-height: 1.25; color: var(--frambuesa); }
.deco-mono { position: absolute; width: 58px; height: 44px; fill: #f6bfd0; opacity: .8; animation: flotaMono 6s ease-in-out infinite alternate; }
.deco-mono--1 { left: 7%; top: 48px; rotate: -16deg; }
.deco-mono--2 { right: 10%; top: 150px; width: 26px; height: 24px; fill: #f2a3bd; rotate: 14deg; animation-delay: -3s; }
@keyframes flotaMono { from { transform: translateY(0); } to { transform: translateY(-12px); } }

.s-cuenta__caja { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(252, 232, 239, .9)); border-color: rgba(212, 160, 138, .45); }
.s-cuenta__num { font-style: italic; color: var(--frambuesa); }
.s-evento { position: relative; overflow: hidden; }
.s-evento::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 30px;
  height: 23px;
  background: var(--mono-ico) center / contain no-repeat;
  opacity: .85;
  rotate: 14deg;
}
.s-evento__icono { color: var(--frambuesa); border-color: rgba(212, 160, 138, .8); background: radial-gradient(circle at 40% 35%, #fff, #fbe4ec); }
.s-evento__hora { font-style: italic; font-size: 2rem; color: var(--frambuesa); }
.s-foto { border: 4px solid #fff; }
.s-vestimenta__tipo { font-family: "DM Sans", sans-serif; font-size: 1rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--frambuesa); }
.s-paleta li { border-color: rgba(212, 160, 138, .6); }

.banda { position: relative; margin: 10px 24px; overflow: hidden; border-radius: 30px; border: 4px solid #fff; box-shadow: var(--s-sombra); }
.banda img { display: block; width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; }
.banda__mono { position: absolute; left: 50%; top: 18%; width: 92px; height: 69px; margin-left: -46px; fill: rgba(255, 255, 255, .92); filter: drop-shadow(0 6px 10px rgba(120, 30, 70, .3)); }
.banda figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 70px 26px 28px;
  background: linear-gradient(180deg, transparent, rgba(120, 36, 74, .62));
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.6rem, 7vw, 2rem);
  line-height: 1.25;
  text-align: center;
  color: #fff;
}

.s-rsvp {
  margin: 30px 18px 0;
  padding-top: 84px;
  border-radius: 34px;
  background:
    linear-gradient(90deg, transparent calc(50% - 13px), rgba(240, 141, 176, .22) calc(50% - 13px) calc(50% + 13px), transparent calc(50% + 13px)),
    linear-gradient(170deg, rgba(255, 255, 255, .92), rgba(252, 230, 238, .9));
  border: 1px solid rgba(212, 160, 138, .45);
  box-shadow: var(--s-sombra);
}
.s-rsvp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -26px;
  width: 112px;
  height: 84px;
  margin-left: -56px;
  background: var(--mono-ico) center / contain no-repeat;
  filter: drop-shadow(0 8px 10px rgba(140, 40, 85, .25));
}
.s-rsvp .s-titulo::before { display: none; }
.s-rsvp__saludo { font-family: "Great Vibes", cursive; font-size: 2rem; }
.s-btn--lleno { background: linear-gradient(120deg, var(--frambuesa), var(--chicle)); padding-left: 14px; }
.sello { position: relative; display: inline-block; width: 34px; height: 34px; flex: 0 0 auto; }
.sello svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sello__cera { fill: #b23a6c; stroke: #8f2552; stroke-width: 2; }
.sello__borde { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; stroke-dasharray: 2 2.6; }
.sello__mono { fill: rgba(255, 238, 244, .95); }
.s-btn.sellado .sello { animation: sellar .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sellar {
  0% { transform: scale(2.6) rotate(-24deg); opacity: 0; }
  55% { transform: scale(.82) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.sellado-aviso { margin: 0; min-height: 1.4em; text-align: center; font-family: "Great Vibes", cursive; font-size: 1.7rem; color: var(--frambuesa); opacity: 0; transition: opacity .6s ease; }
.sellado-aviso.ver { opacity: 1; }

.s-pie__n { font-family: "Great Vibes", cursive; font-size: 3rem; color: var(--frambuesa); }
.btn-musica { background: #fff; color: var(--frambuesa); box-shadow: var(--s-sombra); }

@media (min-width: 700px) {
  .escena { --ew: min(40vw, 340px, 44svh); }
}

@media (prefers-reduced-motion: reduce) {
  .tocador__brillos i, .regalo__rayos, .jalar__aro, .pista__flecha, .etiqueta, .foco.on .foco__halo,
  .espejo__filtro i, .s-titulo::before, .deco-mono { animation: none !important; }
  .tocador__brillos i { opacity: .6; transform: none; }
  .tocador.abierta .regalo__tapa { animation-duration: .3s; }
  .tocador.desatado .cola--izq { animation-duration: .3s; }
  .espejo, .regalo, .etiqueta, .espejo__foto img { transition-duration: .3s; }
  .espejo__foto.f-2 .espejo__filtro i, .espejo__foto.f-1 .espejo__filtro i:nth-child(-n+5) { opacity: .9; transform: scale(.8); }
}