/* =========================================================
   Mejoras v4 (sobre el diseño original de Canva):
   fondo animado, detalles de interacción, fuentes y "Autor y fuentes" desplegable
   ========================================================= */

/* ---------- Fondo: aurora de colores + cuadrícula sutil ---------- */
.desk {
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 46px 46px,
    radial-gradient(ellipse at 50% 120%, #0b1022 0%, transparent 60%),
    linear-gradient(180deg, #18213d 0%, #121a31 55%, #0e1428 100%);
  overflow: hidden;
}
.desk::before, .desk::after, .desk canvas + i {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none;
}
.desk::before {
  width: 52vmax; height: 52vmax; left: -14vmax; top: -12vmax;
  background: radial-gradient(circle, #3a72c8 0%, transparent 65%);
  animation: aurora1 22s ease-in-out infinite alternate;
}
.desk::after {
  width: 48vmax; height: 48vmax; right: -14vmax; bottom: -16vmax;
  background: radial-gradient(circle, #9b4db5 0%, transparent 65%);
  animation: aurora2 26s ease-in-out infinite alternate;
}
.desk .aur {
  position: absolute; width: 36vmax; height: 36vmax; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none;
}
.desk .aur--a { left: 55%; top: 20%; background: radial-gradient(circle, #1fa3a0 0%, transparent 65%); animation: aurora3 30s ease-in-out infinite alternate; }
.desk .aur--b { left: 5%; top: 60%; background: radial-gradient(circle, #c9952e 0%, transparent 65%); animation: aurora1 34s ease-in-out infinite alternate-reverse; opacity: .22; }
.desk canvas { position: relative; z-index: 1; }
@keyframes aurora1 { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes aurora2 { to { transform: translate(-20vw, -18vh) scale(1.1); } }
@keyframes aurora3 { to { transform: translate(-25vw, 30vh) scale(.9); } }

/* La hoja: borde de luz suave para separarla del fondo */
.sheet { box-shadow: 0 50px 110px -35px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08), 0 0 80px -20px rgba(58, 114, 200, .35); }

/* ---------- Resplandor detrás de los dibujos (solo al señalar la etapa) ---------- */
.blob {
  pointer-events: none; border-radius: 46%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 26%, transparent), transparent 78%);
  opacity: 0; transform: scale(.85);
  transition: opacity .5s ease, transform .7s var(--ease-out);
}
.blob.is-lit { opacity: 1; transform: none; }

/* ---------- Detalles de los textos ---------- */
.year .num { transition: color .3s; }
.hit.year:hover .num { color: var(--c); }
.src-dot {
  display: inline-grid; place-items: center; vertical-align: calc(2 * var(--u));
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-left: calc(10 * var(--u));
  border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, white);
  transition: background .3s, transform .4s var(--ease-spring);
}
.src-dot .ic { width: 58%; height: 58%; fill: none; stroke: color-mix(in srgb, var(--c) 70%, black); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.origin:hover .src-dot { background: var(--c); transform: scale(1.15) rotate(-6deg); }
.origin:hover .src-dot .ic { stroke: #fff; }

/* ---------- Autor y fuentes: botón + panel desplegable ---------- */
.credits-btn { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); }
.chev {
  display: inline-grid; place-items: center;
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%;
  background: var(--ink); transition: transform .45s var(--ease-spring), background .3s;
}
.chev svg { width: 60%; height: 60%; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .45s var(--ease-spring); }
.credits-btn:hover .chev { background: #3a72c8; }
.credits-btn.is-open .chev svg { transform: rotate(0deg); }
.credits-btn:not(.is-open) .chev { animation: chevPulse 2.4s ease-in-out 3s infinite; }
@keyframes chevPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(58, 114, 200, .5); } 50% { box-shadow: 0 0 0 calc(10 * var(--u)) rgba(58, 114, 200, 0); } }

.drawer {
  position: absolute; z-index: 15;
  left: calc(60 * var(--u)); right: calc(60 * var(--u)); bottom: calc(250 * var(--u));
  padding: calc(30 * var(--u)) calc(36 * var(--u)) calc(32 * var(--u));
  border-radius: calc(30 * var(--u));
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: calc(2 * var(--u)) solid rgba(58, 114, 200, .18);
  box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) calc(-20 * var(--u)) rgba(20, 40, 80, .45);
  font-family: var(--f-body);
  opacity: 0; visibility: hidden;
  transform: translateY(calc(40 * var(--u))) scale(.96); transform-origin: 10% 100%;
  transition: opacity .35s ease, transform .55s var(--ease-out), visibility 0s linear .55s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .55s var(--ease-out), visibility 0s; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(16 * var(--u)); }
.drawer__kicker { margin: 0; font-family: var(--f-head); font-weight: 800; font-size: calc(26 * var(--u)); letter-spacing: .06em; text-transform: uppercase; color: #3a72c8; }
.drawer__close {
  width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink); display: grid; place-items: center; transition: transform .4s var(--ease-spring);
}
.drawer__close svg { width: 50%; height: 50%; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; }
.drawer__close:hover { transform: rotate(90deg); }
.drawer__team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)) calc(30 * var(--u)); }
.drawer__team li { display: flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(25 * var(--u)); }
.drawer__team li.is-dev { grid-column: 1 / -1; flex-wrap: wrap; }
.drawer__name em { font-style: normal; font-weight: 700; color: var(--c); }
.drawer.is-open .drawer__team li, .drawer.is-open .src-chip { animation: fadeUp .5s var(--ease-out) both; animation-delay: calc(.12s + var(--i) * 60ms); }
.drawer__label { margin: calc(24 * var(--u)) 0 calc(12 * var(--u)); font-family: var(--f-head); font-weight: 700; font-size: calc(22 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: #4a5566; }
.drawer__src { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); }

.member__av {
  flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-family: var(--f-head); font-weight: 700; font-size: calc(19 * var(--u));
  box-shadow: 0 0 0 calc(3 * var(--u)) #fff;
}
.member__soc { display: flex; gap: calc(10 * var(--u)); margin-left: calc(8 * var(--u)); }
.soc {
  width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  border: calc(2 * var(--u)) solid rgba(13, 13, 13, .1);
  transition: transform .35s var(--ease-spring), background .3s, border-color .3s;
}
.soc svg { width: 55%; height: 55%; fill: var(--sc); transition: fill .3s; }
.soc:hover { transform: translateY(calc(-4 * var(--u))) scale(1.12); background: var(--sc); border-color: var(--sc); }
.soc:hover svg { fill: #fff; }
.soc--lg { width: 34px; height: 34px; border-width: 1.5px; }
.src-chip {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(48 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px; text-decoration: none; cursor: pointer;
  background: #fff; border: calc(2 * var(--u)) solid rgba(58, 114, 200, .22);
  font-family: var(--f-body); font-weight: 600; font-size: calc(21 * var(--u)); color: #1f3a66;
  transition: transform .35s var(--ease-spring), background .3s, color .3s, border-color .3s;
  white-space: nowrap; overflow: hidden;
}
.src-chip span { overflow: hidden; text-overflow: ellipsis; }
.src-chip .ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.src-chip:hover { transform: translateY(calc(-3 * var(--u))); background: #3a72c8; border-color: #3a72c8; color: #fff; }
.src-chip--all { background: var(--ink); border-color: var(--ink); color: #fff; }
.src-chip--all:hover { background: #3a72c8; }

/* ---------- Ficha: pestaña Fuentes ---------- */
.tabs { grid-template-columns: repeat(5, 1fr); }
.tabs button { font-size: 15px; padding: 10px 4px; }
.tabpanel .cite-intro { margin: 0 0 12px; font-size: 16px; color: #4a5566; }
.cites li > span > b { font-size: 18px; }
.cite-t { display: block; font-size: 14px; color: #5b6575; margin-bottom: 6px; font-style: italic; }
.cite-a { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-family: var(--f-head); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--c); text-decoration: none; }
.cite-a svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cite-a:hover { text-decoration: underline; }
.tabpanel .cite-ref, .cite-ref { margin: 14px 0 0; font-size: 15px; color: #2a2f38; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .7); }
.cite-link {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 6px;
  border: 0; border-radius: 999px; padding: 3px 10px 3px 8px; cursor: pointer;
  background: color-mix(in srgb, var(--c) 16%, white); color: color-mix(in srgb, var(--c) 70%, black);
  font-family: var(--f-head); font-weight: 700; font-size: 14px;
}
.cite-link .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.cite-link:hover { background: var(--c); color: #fff; }
.team .tm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.team .role { font-style: normal; font-weight: 700; color: #9b4db5; }
.tm__soc { display: flex; gap: 6px; flex-basis: 100%; margin-top: 4px; }

@media (max-width: 640px) {
  .tabs { grid-template-columns: repeat(3, 1fr); }
  .drawer { left: calc(30 * var(--u)); right: calc(30 * var(--u)); }
  .drawer__team li { font-size: calc(30 * var(--u)); }
  .drawer__src { grid-template-columns: repeat(2, 1fr); }
  .src-chip { font-size: calc(26 * var(--u)); height: calc(58 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .desk::before, .desk::after, .desk .aur { animation: none !important; }
}

/* El nombre se puede tocar para ver sus fuentes: subrayado punteado solo al señalar */
.hit.origin:hover { background: none; text-decoration: underline dotted color-mix(in srgb, var(--c) 70%, transparent); text-underline-offset: calc(6 * var(--u)); text-decoration-thickness: calc(3 * var(--u)); color: color-mix(in srgb, var(--c) 60%, black); }