/* ==========================================================================
   ElMachoJoe · Links
   Sistema visual: neón magenta / violeta / cian sobre negro ciruela.
   Animaciones en transform/opacity/filter, sin librerías.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

:root {
  --ink: #06030c;
  --ink-2: #12061f;
  --text: #f6eefc;
  --muted: #c3b0d6;
  --muted-2: #9c86b3;
  --pink: #ff3ea5;
  --pink-soft: #ff8fd0;
  --violet: #a855f7;
  --cyan: #3ef2ff;
  --glass: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .11);
  --radius: 20px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.16, 1.12, .3, 1);
  --px: 0;
  --py: 0;
}

html {
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100vh;
  height: 100dvh;
  background: var(--ink);
  color: var(--text);
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

::selection { background: rgba(255, 62, 165, .4); color: #fff; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: .75rem; left: 50%;
  z-index: 60;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: #fff;
  color: #12061f;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transform: translate(-50%, -180%);
  transition: transform .25s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Fondo ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(140% 95% at 50% -18%, #2c0a48 0%, #170725 40%, #06030c 78%),
    radial-gradient(70% 50% at 92% 8%, rgba(255, 62, 165, .16), transparent 62%),
    radial-gradient(65% 55% at 0% 62%, rgba(62, 242, 255, .1), transparent 62%),
    var(--ink);
}

.bg__blob {
  position: absolute;
  width: 82vmax;
  height: 82vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: .5;
  will-change: transform;
}
.bg__blob--1 {
  top: -42vmax; left: -34vmax;
  background: radial-gradient(circle, rgba(255, 62, 165, .34), rgba(255, 62, 165, 0) 63%);
  animation: drift-1 26s ease-in-out infinite alternate;
}
.bg__blob--2 {
  bottom: -48vmax; right: -36vmax;
  background: radial-gradient(circle, rgba(168, 85, 247, .32), rgba(168, 85, 247, 0) 64%);
  animation: drift-2 32s ease-in-out infinite alternate;
}
.bg__blob--3 {
  top: 26%; left: 44%;
  width: 62vmax; height: 62vmax;
  background: radial-gradient(circle, rgba(62, 242, 255, .13), rgba(62, 242, 255, 0) 62%);
  animation: drift-3 38s ease-in-out infinite alternate;
}

.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 54px 54px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 28%, #000 0%, transparent 76%);
  mask-image: radial-gradient(72% 62% at 50% 28%, #000 0%, transparent 76%);
}

.bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 105% at 50% 42%, transparent 42%, rgba(3, 1, 7, .78) 100%);
}

.embers {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .8;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

@keyframes drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 6vmax, 0) scale(1.18); }
}
@keyframes drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-8vmax, -5vmax, 0) scale(.92); }
}
@keyframes drift-3 {
  from { transform: translate3d(-4vmax, 2vmax, 0) scale(.95); opacity: .35; }
  to   { transform: translate3d(5vmax, -4vmax, 0) scale(1.15); opacity: .6; }
}

/* ---------- Layout (siempre 100dvh, sin scroll) ---------- */
.page {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 29rem);
  height: 100dvh;
  margin-inline: auto;
  padding-top: max(clamp(14px, 2.2svh, 22px), env(safe-area-inset-top));
  padding-bottom: max(clamp(8px, 1.8svh, 20px), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Hero ---------- */
.hero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.avatar {
  position: relative;
  width: clamp(148px, min(60vw, 27svh), 258px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: clamp(2px, .8svh, 8px);
}

.avatar__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translate3d(calc(var(--px) * 11px), calc(var(--py) * 9px), 0);
  transition: transform .7s var(--ease);
}

.avatar__glow {
  position: absolute;
  inset: 14%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(255, 62, 165, .55), rgba(168, 85, 247, .28) 46%, transparent 72%);
  filter: blur(24px);
  animation: pulse-glow 7s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: .75; transform: scale(.96); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* --- Aura SVG --- */
.aura {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.aura__halo { transform-origin: 50% 50%; animation: breathe 9s ease-in-out infinite; }
.blob { transform-origin: 50% 50%; }
.blob--1 { animation: breathe 11s ease-in-out infinite; }
.blob--2 { animation: breathe 8s ease-in-out -3s infinite reverse; }

@keyframes breathe {
  0%, 100% { transform: scale(.97) rotate(0deg); opacity: .82; }
  50%      { transform: scale(1.05) rotate(2.5deg); opacity: 1; }
}

.outline {
  fill: none;
  stroke: rgba(255, 110, 190, .35);
  stroke-width: 1.2;
  stroke-dasharray: 3 9;
  transform-origin: 50% 50%;
  animation: spin 60s linear infinite;
}

.orbit {
  fill: none;
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 1;
  stroke-dasharray: 1 14;
  transform-origin: 50% 50%;
  animation: spin 34s linear infinite reverse;
}

.flames {
  transform-origin: 50% 50%;
  animation: sway 8s ease-in-out infinite;
  will-change: transform;
}
.flame {
  fill: none;
  stroke: url(#gFlameStroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flame--glow {
  stroke-width: 11;
  opacity: .42;
  filter: url(#flameGlow);
  animation: flame-pulse 5.5s ease-in-out infinite;
}
.flame--tongue { stroke-width: 8; }
.flame--halo {
  stroke-width: 4.5;
  opacity: .45;
  filter: url(#flameGlow);
  animation: flame-pulse 7s ease-in-out infinite reverse;
}
.flame--core { stroke-width: 3; opacity: .95; }

@keyframes flame-pulse {
  0%, 100% { opacity: .34; }
  50%      { opacity: .62; }
}

@keyframes sway {
  0%, 100% { rotate: -1.8deg; }
  50%      { rotate: 2deg; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Foto --- */
.avatar__photo {
  position: absolute;
  inset: 22%;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  background: #1a0b2e;
  box-shadow:
    0 26px 60px -20px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(255, 255, 255, .12) inset,
    0 0 45px rgba(255, 62, 165, .18);
}
.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 33%;
  transform: scale(1.015);
  filter: saturate(1.08) contrast(1.03) brightness(1.04);
  transition: transform 1.2s var(--ease), opacity .3s;
}
.avatar__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% 6%, rgba(255, 255, 255, .09), transparent 55%),
    linear-gradient(190deg, transparent 62%, rgba(255, 62, 165, .16) 100%);
  box-shadow: inset 0 0 22px rgba(255, 62, 165, .22);
}
.avatar__photo:hover .avatar__img { transform: scale(1.06); }

.avatar__fallback {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: "Anton", Impact, sans-serif;
  font-size: clamp(2.4rem, 12vw, 4rem);
  letter-spacing: .02em;
  color: #ffd9f2;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 62, 165, .35), transparent 60%),
    linear-gradient(160deg, #2a0f45, #12061f 70%);
  text-shadow: 0 0 24px rgba(255, 62, 165, .6);
}
.avatar__photo.is-fallback .avatar__img { opacity: 0; }
.avatar__photo.is-fallback .avatar__fallback { display: grid; }

.avatar__ring {
  position: absolute;
  inset: 20.4%;
  z-index: 3;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 62, 165, 0) 0deg,
    #ff3ea5 34deg,
    rgba(168, 85, 247, .85) 68deg,
    rgba(255, 62, 165, 0) 112deg,
    rgba(255, 62, 165, 0) 210deg,
    #3ef2ff 246deg,
    rgba(62, 242, 255, 0) 286deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.4px));
  filter: drop-shadow(0 0 6px rgba(255, 62, 165, .55));
  animation: spin 16s linear infinite;
  opacity: .9;
}

/* ---------- Tipografía hero ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-size: clamp(.52rem, 1.35svh, .62rem);
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: clamp(2px, .5svh, 7px);
}
.eyebrow::before,
.eyebrow::after {
  content: "";
  display: block;
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  animation: blink 2.8s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.name {
  font-family: "Anton", Impact, "Haettenschweiler", sans-serif;
  font-weight: 400;
  font-size: clamp(1.7rem, min(9vw, 5.1svh), 2.85rem);
  line-height: .96;
  letter-spacing: .005em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #f4e2ff 40%, #ffc2e8 58%, #ff69c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 20px rgba(255, 62, 165, .32));
  padding-bottom: .1em;
}
.name__accent {
  background: linear-gradient(180deg, #ffd9f2 0%, #ff3ea5 56%, #b45cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Divisor ---------- */
.divider {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: min(100%, 21rem);
  margin: clamp(10px, 2.2svh, 22px) 0 clamp(8px, 1.5svh, 14px);
  color: var(--muted-2);
  font-size: clamp(.58rem, 1.5svh, .7rem);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}
.divider em { font-style: normal; }

/* ---------- Links ---------- */
.links {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 1.05svh, 9px);
}

.link {
  --d: calc(.64s + var(--i, 0) * .075s);
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(.55rem, 1.8vw, .9rem);
  flex: 1 1 0;
  min-height: 44px;
  max-height: 4rem;
  padding: clamp(3px, .7svh, 9px) clamp(10px, 2.6vw, 16px);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022)),
    rgba(12, 5, 22, .35);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    0 12px 34px -18px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .09);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .5s var(--ease),
    border-color .4s var(--ease),
    box-shadow .5s var(--ease),
    background-color .4s var(--ease);
}
.link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .12), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, .07) 46%, transparent 64%);
  opacity: .8;
  pointer-events: none;
}
.link__shine {
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -30%;
  width: 34%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  filter: blur(6px);
  transform: translate3d(-140%, 0, 0) rotate(8deg);
  opacity: 0;
  pointer-events: none;
}

.link__icon {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(1.95rem, 5.3svh, 2.65rem);
  height: clamp(1.95rem, 5.3svh, 2.65rem);
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--brand);
  border-color: rgba(255, 255, 255, .14);
  background:
    radial-gradient(130% 130% at 28% 12%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(150deg, var(--brand), var(--brand2) 55%, var(--brand3, var(--brand2)));
  box-shadow:
    0 8px 22px -10px var(--brand),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .45s var(--spring), box-shadow .45s var(--ease), filter .45s;
}
.link__icon svg {
  width: clamp(1.02rem, 2.8svh, 1.32rem);
  height: clamp(1.02rem, 2.8svh, 1.32rem);
  fill: #fff;
  transition: transform .45s var(--spring);
}

.link__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1;
  min-width: 0;
  text-align: left;
}
.link__name {
  font-size: clamp(.95rem, 2.5svh, 1.14rem);
  font-weight: 800;
  letter-spacing: .005em;
  line-height: 1.25;
}

/* ---------- EN VIVO ---------- */
.link__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.link__live {
  display: none;
  align-items: center;
  gap: .34rem;
  padding: .1rem .46rem .1rem .36rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 61, 96, .55);
  background: linear-gradient(135deg, rgba(255, 61, 96, .96), rgba(214, 20, 74, .92));
  box-shadow:
    0 4px 14px -6px rgba(255, 61, 96, .9),
    inset 0 1px 0 rgba(255, 255, 255, .38);
  color: #fff;
  font-size: clamp(.53rem, 1.35svh, .62rem);
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
}

.link.is-live .link__live { display: inline-flex; }

.link__dot {
  width: .4rem;
  height: .4rem;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .2);
}

.link.is-live {
  order: -1;
  border-color: rgba(255, 61, 96, .38);
  background:
    linear-gradient(135deg, rgba(255, 61, 96, .12), rgba(255, 255, 255, .02) 55%),
    rgba(20, 4, 12, .45);
  box-shadow:
    0 0 0 1px rgba(255, 61, 96, .14),
    0 14px 34px -20px rgba(0, 0, 0, .9),
    0 0 30px -16px rgba(255, 45, 85, .45),
    inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* Tinte rojo por dentro de la tarjeta */
.link.is-live::before {
  background: radial-gradient(120% 150% at 50% 0%, rgba(255, 45, 85, .14), rgba(255, 45, 85, 0) 70%);
  opacity: 1;
}

/* Anillo girando, mismo truco que el círculo del avatar */
.link.is-live::after {
  z-index: 3;
  padding: 1px;
  background: conic-gradient(from var(--live-angle),
    rgba(255, 61, 96, 0) 0deg,
    rgba(255, 61, 96, .5) 40deg,
    #ff8fa8 76deg,
    rgba(255, 61, 96, .95) 118deg,
    rgba(255, 61, 96, 0) 176deg,
    rgba(255, 61, 96, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 4px rgba(255, 45, 85, .4));
  opacity: 1;
}

@property --live-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes live-ring {
  to { --live-angle: 360deg; }
}

@keyframes live-icon {
  0%, 100% {
    box-shadow:
      0 8px 18px -12px rgba(255, 45, 85, .4),
      inset 0 1px 0 rgba(255, 255, 255, .35);
  }
  50% {
    box-shadow:
      0 8px 22px -8px rgba(255, 45, 85, .7),
      inset 0 1px 0 rgba(255, 255, 255, .45);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .link.is-live::after { animation: live-ring 3.2s linear infinite; }
  .link.is-live .link__icon { animation: live-icon 2.4s ease-in-out infinite; }
}

@media (prefers-reduced-motion: no-preference) {
  .link.is-live .link__dot {
    animation: live-dot 1.6s ease-in-out infinite;
  }
}

@keyframes live-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(.66); opacity: .55; }
}

.link__arrow {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(1.6rem, 4.2svh, 2rem);
  height: clamp(1.6rem, 4.2svh, 2rem);
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .75);
  transition: transform .45s var(--spring), background .4s, border-color .4s, color .4s;
}
.link__arrow svg {
  width: .95rem;
  height: .95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover solo en dispositivos con puntero fino */
@media (hover: hover) and (pointer: fine) {
  .link:hover {
    transform: translateY(-3px) scale(1.012);
    border-color: rgba(255, 255, 255, .22);
    box-shadow:
      0 24px 48px -24px rgba(0, 0, 0, .95),
      inset 0 1px 0 rgba(255, 255, 255, .16);
  }
  .link:hover::before { opacity: 1; }
  .link:hover .link__shine { animation: sweep 1s var(--ease); }
  .link:hover .link__icon {
    transform: translateY(-1px) rotate(-3deg) scale(1.05);
    filter: saturate(1.15);
  }
  .link:hover .link__icon svg { transform: scale(1.08); }
  .link:hover .link__arrow {
    transform: translateX(3px);
    background: #fff;
    border-color: #fff;
    color: #0b0414;
  }
}

@keyframes sweep {
  0%   { transform: translate3d(-140%, 0, 0) rotate(8deg); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: translate3d(560%, 0, 0) rotate(8deg); opacity: 0; }
}

.link:active { transform: scale(.985); transition-duration: .12s; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: min(90vw, 22rem);
  padding: .72rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(18, 6, 31, .82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 18px 40px -18px #000, 0 0 24px -6px rgba(255, 62, 165, .35);
  color: #f9f1ff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px) scale(.96);
  transition: opacity .3s var(--ease), transform .45s var(--spring);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Entrada ---------- */
html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(10px);
}
html.js .avatar {
  opacity: 0;
  transform: scale(.84);
  filter: blur(18px) brightness(.65);
}

html.is-ready .reveal {
  animation: reveal .85s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
html.is-ready .avatar {
  animation: avatar-in 1.15s var(--spring) .05s forwards;
}
html.is-ready .flames { animation: sway 9s ease-in-out infinite, wave-in 1.4s var(--ease) .35s both; }
html.is-ready .avatar__ring { animation: spin 16s linear infinite, ring-in 1s var(--ease) .35s both; }

@keyframes reveal {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(10px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes avatar-in {
  0%   { opacity: 0; transform: scale(.84) rotate(-2deg); filter: blur(18px) brightness(.65); }
  55%  { opacity: 1; transform: scale(1.03) rotate(.6deg); filter: blur(0) brightness(1.06); }
  100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0) brightness(1); }
}
@keyframes wave-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ring-in {
  from { opacity: 0; filter: drop-shadow(0 0 0 transparent); }
  to   { opacity: .9; }
}

/* ---------- Responsive ---------- */
@media (min-width: 900px) {
  .page { width: min(100% - 3rem, 30rem); }
  .avatar { margin-bottom: 10px; }
}

/* Pantallas bajas: se sacrifica lo decorativo antes que los links */
@media (max-height: 639px) {
  .divider { margin-top: 5px; }
  .eyebrow { margin-bottom: 3px; }
}
@media (max-height: 560px) {
  .eyebrow { display: none; }
}

/* ---------- PC: siempre dos columnas (horizontal) ---------- */
@media (min-width: 720px) and (hover: hover) and (pointer: fine) {
  .page {
    width: min(100% - 4rem, 68rem);
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    column-gap: clamp(1.5rem, 4.5vw, 4.5rem);
    padding-block: clamp(12px, 2.4svh, 26px);
  }
  .hero { grid-column: 1; }
  .content {
    grid-column: 2;
    align-self: stretch;
    justify-content: center;
    padding-top: 0;
  }
  .avatar { width: clamp(170px, 21vw, 272px); }
  .name { font-size: clamp(2rem, 6.2svh, 3.15rem); }
  .divider { margin-top: 0; margin-bottom: clamp(8px, 1.6svh, 14px); }
  .links { flex: 0 1 auto; justify-content: center; gap: clamp(8px, 1.6svh, 13px); }
  .link { flex: 0 0 auto; height: clamp(52px, 7.8svh, 74px); min-height: 0; max-height: none; }
}

/* Móvil en horizontal / ventanas bajas: dos columnas más compactas */
@media (orientation: landscape) and (max-height: 620px) {
  .page {
    width: min(100% - 2rem, 56rem);
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: center;
    column-gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: 8px;
  }
  .hero { grid-column: 1; }
  .content {
    grid-column: 2;
    align-self: stretch;
    justify-content: center;
    padding-top: 0;
  }
  .avatar { width: clamp(128px, 40svh, 208px); margin-bottom: 2px; }
  .name { font-size: clamp(1.45rem, 5.8svh, 2.1rem); }
  .divider { margin-top: 0; margin-bottom: 6px; }
  .links { flex: 0 1 auto; justify-content: center; gap: clamp(5px, 1.4svh, 8px); }
  .link { flex: 0 0 auto; height: clamp(44px, 11svh, 56px); min-height: 0; max-height: none; }
}

/* Casos extremos (zoom alto / ventanas minúsculas): se permite scroll antes que recortar */
@media (max-width: 300px), (orientation: portrait) and (max-height: 430px) {
  html, body { height: auto; overflow-y: auto; }
  .page { height: auto; min-height: 100dvh; padding-block: 12px; }
}

/* ---------- Accesibilidad / movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js .reveal,
  html.js .avatar {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  html.js .reveal { animation: none !important; }
  .embers { display: none; }
  .bg__blob { animation: none; }
  .link:hover { transform: none; }
}

@media (prefers-contrast: more) {
  .link { border-color: rgba(255, 255, 255, .28); background-color: #140823; }
}