/* Tu año en viajes (js/wrapped.js): pantallas a todo color que avanzan solas. */

.page.wrapped { background: #050812; color: #fff; overflow: hidden; user-select: none; }
.wr-bars { position: absolute; z-index: 3; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 60px; display: flex; gap: 4px; }
.wr-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.wr-bars i { display: block; height: 100%; width: 0; background: #fff; }
.wr-close { position: absolute; z-index: 3; top: max(6px, env(safe-area-inset-top)); right: 10px; padding: 6px 12px; }
.wr-stage { position: absolute; inset: 0; }
.wr-slide {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 24px 40px;
  opacity: 0; pointer-events: none; transition: opacity 0.45s ease;
}
.wr-slide.on { opacity: 1; pointer-events: auto; }
.wr-c { width: min(560px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* Los fondos: degradados que se mueven despacio. */
.wr-slide::before { content: ""; position: absolute; inset: -20%; z-index: -1; filter: blur(40px); animation: wr-drift 14s ease-in-out infinite alternate; }
.th-sunset::before { background: radial-gradient(circle at 20% 30%, #ff6b6b, transparent 55%), radial-gradient(circle at 80% 70%, #ff9a62, transparent 55%), #3b0a2a; }
.th-ocean::before { background: radial-gradient(circle at 25% 25%, #0ea5e9, transparent 55%), radial-gradient(circle at 75% 75%, #6366f1, transparent 55%), #071433; }
.th-forest::before { background: radial-gradient(circle at 30% 70%, #10b981, transparent 55%), radial-gradient(circle at 70% 20%, #84cc16, transparent 50%), #04201a; }
.th-night::before { background: radial-gradient(circle at 50% 30%, #312e81, transparent 60%), radial-gradient(circle at 80% 80%, #f2545b, transparent 45%), #02040c; }
.th-amber::before { background: radial-gradient(circle at 30% 30%, #f59e0b, transparent 55%), radial-gradient(circle at 70% 80%, #ef4444, transparent 50%), #2a1003; }
.th-violet::before { background: radial-gradient(circle at 25% 75%, #8b5cf6, transparent 55%), radial-gradient(circle at 75% 25%, #ec4899, transparent 55%), #1b0630; }
.th-coral::before { background: radial-gradient(circle at 70% 30%, #f2545b, transparent 55%), radial-gradient(circle at 25% 75%, #f59e0b, transparent 50%), #2b0610; }
@keyframes wr-drift { to { transform: translate(4%, -3%) scale(1.08); } }

/* Lo que entra al aparecer cada pantalla */
.wr-slide.on .wr-c > * { animation: wr-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.wr-slide.on .wr-c > *:nth-child(2) { animation-delay: 0.08s; }
.wr-slide.on .wr-c > *:nth-child(3) { animation-delay: 0.16s; }
.wr-slide.on .wr-c > *:nth-child(4) { animation-delay: 0.24s; }
.wr-slide.on .wr-c > *:nth-child(5) { animation-delay: 0.32s; }
@keyframes wr-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }

.wr-kicker { margin: 10px 0 0; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.wr-num { margin: 0; line-height: 0.95; }
.wr-num b { font-size: clamp(84px, 22vw, 150px); font-weight: 900; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.wr-num small { font-size: 30px; font-weight: 800; }
.wr-big { margin: 0; font-size: clamp(28px, 7vw, 44px); font-weight: 900; letter-spacing: -0.03em; }
.wr-label { margin: 6px 0 0; font-size: 17px; opacity: 0.9; }
.wr-hint { margin-top: 30px; opacity: 0.7; font-weight: 600; animation: wr-pulse 1.6s ease-in-out infinite !important; }
@keyframes wr-pulse { 50% { opacity: 0.35; } }
.wr-year { margin: 0; font-size: clamp(110px, 32vw, 220px); font-weight: 900; letter-spacing: -0.06em; line-height: 0.9; }
.wr-year span { background: linear-gradient(100deg, #fff, #ffd1c4, #fff); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wr-shine 4s linear infinite; }
@keyframes wr-shine { to { background-position: 200% center; } }
.wr-av .avatar-xl { width: 92px; height: 92px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4); }
.wr-row { display: flex; gap: 40px; justify-content: center; }
.wr-row .wr-num b { font-size: clamp(64px, 16vw, 110px); }

.wr-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.wr-chips span {
  padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 700; backdrop-filter: blur(8px);
}
.wr-slide.on .wr-chips span { animation: wr-pop 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(0.35s + var(--i) * 0.07s); }
@keyframes wr-pop { from { opacity: 0; transform: scale(0.6); } }

/* La ruta se dibuja sola */
.wr-route { width: min(420px, 90%); margin: 10px 0; overflow: visible; }
.wr-route path { fill: none; stroke: #ffd1c4; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.wr-slide.on .wr-route path { animation: wr-draw 2.6s 0.4s ease-in-out forwards; }
@keyframes wr-draw { to { stroke-dashoffset: 0; } }
.wr-route circle { fill: #fff; stroke: #f2545b; stroke-width: 3; opacity: 0; }
.wr-slide.on .wr-route circle { animation: wr-pop 0.4s both; animation-delay: calc(0.4s + var(--i) * 0.25s); opacity: 1; }

/* Los meses: barras que crecen */
.wr-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; width: min(460px, 100%); height: 150px; align-items: end; margin: 18px 0 6px; }
.wr-months div { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.wr-months i { width: 100%; border-radius: 6px 6px 3px 3px; background: rgba(255, 255, 255, 0.35); height: max(4px, var(--h)); transform-origin: bottom; }
.wr-months .wr-top i { background: #fff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.6); }
.wr-months span { font-size: 11px; font-weight: 700; opacity: 0.8; }
.wr-slide.on .wr-months i { animation: wr-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(0.3s + var(--i) * 0.05s); }
@keyframes wr-grow { from { transform: scaleY(0); } }

/* Mosaico */
.wr-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: min(380px, 86vw); margin-bottom: 14px; }
.wr-mosaic img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.wr-slide.on .wr-mosaic img { animation: wr-pop 0.55s cubic-bezier(0.3, 1.3, 0.5, 1) both; animation-delay: calc(0.1s + var(--i) * 0.08s); }

/* La tarjeta final */
.wr-card {
  width: min(380px, 100%); padding: 22px; border-radius: 28px; text-align: left;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(14px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}
.wr-card-head { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.wr-card-head b { margin-left: auto; font-size: 22px; font-weight: 900; }
.wr-card-title { margin: 14px 0 12px; font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.wr-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
.wr-card-grid b { display: block; font-size: 28px; font-weight: 900; letter-spacing: -0.03em; }
.wr-card-grid span { font-size: 12.5px; opacity: 0.85; }
.wr-card-list { margin: 16px 0 0; font-size: 13.5px; opacity: 0.9; line-height: 1.5; }
.wr-card-foot { margin: 14px 0 0; font-size: 12px; font-weight: 800; opacity: 0.7; letter-spacing: 0.06em; }
.wr-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.wr-pick { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.wr-pick select { padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.3); color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .wr-slide::before, .wr-slide.on .wr-c > *, .wr-slide.on .wr-chips span, .wr-slide.on .wr-months i, .wr-slide.on .wr-mosaic img, .wr-year span { animation: none !important; }
  .wr-route path { stroke-dashoffset: 0; }
  .wr-route circle { opacity: 1; }
}

/* El boton que lleva al resumen (portada y perfil) */
.mine-links { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.wrapped-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; border-radius: 14px; font-weight: 800; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, #f2545b, #8b5cf6, #0ea5e9); background-size: 200% auto; animation: wr-shine 6s linear infinite;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.3);
}
.pf-card .wrapped-btn { margin: 4px auto 12px; }