/* =========================================================
   v6 · Tipografía y animaciones
   Textos: Manrope (abierta y legible) · Títulos: Bricolage Grotesque
   El título grande (Anton) y "La evolución de los" (serif) quedan como en Canva.
   ========================================================= */
:root {
  --f-text: "Manrope", "Segoe UI", system-ui, sans-serif;
  --f-grot: "Bricolage Grotesque", "Arial Narrow", sans-serif;
  --ink-soft: #232a37;
  --ink-mute: #4b5568;
}

/* ---------- Subtítulo de la cabecera ---------- */
.tx--sub {
  font-family: var(--f-grot); font-weight: 600;
  font-variation-settings: "wdth" 88, "opsz" 36;
  letter-spacing: -.005em; color: #111827;
}

/* ---------- Etapa y año ---------- */
.tx--label.etapa {
  font-family: var(--f-grot); font-weight: 700;
  font-variation-settings: "wdth" 85, "opsz" 24;
  font-size: calc(23 * var(--u)); letter-spacing: .18em;
  color: color-mix(in srgb, var(--c) 72%, #0d0d0d);
  display: flex; align-items: center; justify-content: center;
}
.tx--label.year { font-family: var(--f-grot); font-weight: 800; font-variation-settings: "wdth" 82, "opsz" 72; letter-spacing: -.01em; }
.year .num { font-size: calc(58 * var(--u)); line-height: 1; }
.year .yl { font-family: var(--f-grot); font-weight: 700; font-size: calc(21 * var(--u)); letter-spacing: .24em; color: var(--ink-mute); margin-bottom: calc(6 * var(--u)); }
.hit.year:hover .num { color: var(--c); }

/* ---------- Títulos de modelo ---------- */
.tx--head.mtitle {
  font-family: var(--f-grot); font-weight: 800;
  font-variation-settings: "wdth" 78, "opsz" 72;
  font-size: calc(50 * var(--u)); line-height: 1.02;
  letter-spacing: -.012em; text-transform: uppercase;
  color: #0b0f19; text-align: left; word-spacing: .14em;
}
.mtitle .tl { display: block; }
.mtitle .tw { display: inline-block; white-space: nowrap; }
.mtitle .tc {
  display: inline-block;
  opacity: 0; transform: translateY(.5em) rotate(5deg); filter: blur(6px);
  transition: translate .35s var(--ease-spring), color .3s;
  transition-delay: calc(var(--i) * 12ms);
}
.mtitle.is-in .tc { animation: tcIn .75s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + var(--i) * 22ms); }
.mtitle:hover .tc, .mtitle:focus-visible .tc { translate: 0 calc(-5 * var(--u)); color: var(--c); }
.mtitle::after { display: none; }
@keyframes tcIn { to { opacity: 1; transform: none; filter: none; } }

/* ---------- Nombre / origen ---------- */
.tx--origin.origin {
  font-family: var(--f-text); font-weight: 600;
  font-size: calc(25 * var(--u)); line-height: 1.35;
  color: var(--ink-mute); letter-spacing: .005em;
  display: flex; align-items: baseline; gap: calc(12 * var(--u));
}
.odot {
  flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%;
  background: var(--c); transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 0 0 calc(5 * var(--u)) color-mix(in srgb, var(--c) 20%, transparent);
}
.origin.reveal.is-in { animation: originIn .8s var(--ease-out) var(--d, 0s) both; }
@keyframes originIn { from { opacity: 0; transform: translateX(calc(-18 * var(--u))); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hit.origin:hover { color: color-mix(in srgb, var(--c) 65%, #0d0d0d); text-decoration: underline dotted; text-underline-offset: calc(7 * var(--u)); text-decoration-thickness: calc(3 * var(--u)); }

/* ---------- Descripción y ventajas/desventajas ---------- */
.tx--body.body {
  font-family: var(--f-text); font-weight: 500;
  font-size: calc(26 * var(--u) * var(--k, 1)); line-height: 1.52;
  color: var(--ink-soft); letter-spacing: .002em;
  white-space: normal;
}
.body .desc { display: block; margin-bottom: calc(16 * var(--u) * var(--k, 1)); text-wrap: pretty; }
.body .w { display: inline-block; opacity: 0; transform: translateY(.4em); filter: blur(5px); }
.body.is-in .w { animation: wIn .65s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + min(var(--i), 45) * 13ms); }
@keyframes wIn { to { opacity: 1; transform: none; filter: none; } }
.body .pcs { display: grid; gap: calc(10 * var(--u) * var(--k, 1)); }
.body .pcl {
  display: grid; grid-template-columns: calc(30 * var(--u)) 1fr; gap: calc(12 * var(--u)); align-items: start;
  font-weight: 600; color: #1b2230;
  opacity: 0; transform: translateX(calc(-22 * var(--u)));
}
.body.is-in .pcl { animation: pclIn .7s var(--ease-out) forwards; animation-delay: calc(var(--d, 0s) + .55s + var(--k) * .16s); }
.body .pcl i {
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%;
  display: grid; place-items: center; margin-top: calc(4 * var(--u));
}
.body .pcl i svg { width: 60%; height: 60%; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.body .pcl.ok i { background: #dcf3e6; } .body .pcl.ok i svg { stroke: #138a4b; }
.body .pcl.bad i { background: #fde4e2; } .body .pcl.bad i svg { stroke: #c2372f; }
.body.is-in .pcl i { animation: iconPop .55s var(--ease-spring) both; animation-delay: calc(var(--d, 0s) + .75s + var(--k) * .16s); }
@keyframes pclIn { to { opacity: 1; transform: none; } }
@keyframes iconPop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.hit.body:hover { background: none; }
.hit.body:hover .desc { color: #0b0f19; }

/* ---------- Dibujos: profundidad con el mouse ---------- */
.pc__par {
  position: absolute; inset: 0;
  transform: translate(calc(var(--mx, 0) * var(--dp, 10) * var(--u)), calc(var(--my, 0) * var(--dp, 10) * .6 * var(--u)));
  transition: transform .9s var(--ease-out);
}

/* ---------- Autor y fuentes ---------- */
.credits-btn.tx--head { font-family: var(--f-grot); font-weight: 800; font-variation-settings: "wdth" 80, "opsz" 48; letter-spacing: .01em; }
.sheet .tx--body:not(.body) { font-family: var(--f-text); font-weight: 500; color: var(--ink-mute); }
.drawer, .drawer__team li { font-family: var(--f-text); }
.drawer__kicker, .drawer__label { font-family: var(--f-grot); }
.src-chip { font-family: var(--f-text); }

/* ---------- Pista, tooltip y barra ---------- */
.hint, .tool, .tip { font-family: var(--f-grot); font-variation-settings: "wdth" 90; }
.tip { font-family: var(--f-text); font-weight: 600; font-size: 14px; line-height: 1.35; padding: 8px 12px; }

/* ---------- Ficha (modal) ---------- */
.modal__card { font-family: var(--f-text); }
.m-stage { font-family: var(--f-grot); font-variation-settings: "wdth" 85; letter-spacing: .14em; font-size: 14px; }
.m-title { font-family: var(--f-grot); font-weight: 800; font-variation-settings: "wdth" 78, "opsz" 72; letter-spacing: -.015em; line-height: .98; font-size: clamp(34px, 5.6vw, 52px); }
.m-origin { font-family: var(--f-text); font-weight: 600; color: #4b5568; font-size: 17px; }
.m-creator { font-size: 15.5px; line-height: 1.6; color: #2c3444; }
.tabs button { font-family: var(--f-grot); font-weight: 700; font-variation-settings: "wdth" 88; letter-spacing: .01em; }
.tabpanel { font-family: var(--f-text); line-height: 1.6; }
.tabpanel p { font-size: 18px; line-height: 1.65; color: #1f2633; }
.tabpanel li { padding: 16px 18px; gap: 14px; }
.tabpanel li b { font-family: var(--f-grot); font-weight: 700; font-variation-settings: "wdth" 90; font-size: 18px; margin-bottom: 4px; letter-spacing: -.005em; }
.tabpanel li > span:last-child { font-size: 15.5px; line-height: 1.6; color: #2c3444; }
.navbtn { font-family: var(--f-grot); font-variation-settings: "wdth" 88; }
.m-h { font-family: var(--f-grot); font-variation-settings: "wdth" 85; letter-spacing: .02em; }
.team li, .sources b { font-family: var(--f-text); }
/* la ficha se arma por partes */
.modal.is-open #m-body > * { animation: mIn .6s var(--ease-out) both; }
.modal.is-open #m-body > :nth-child(1) { animation-delay: .12s; }
.modal.is-open #m-body > :nth-child(2) { animation-delay: .18s; }
.modal.is-open #m-body > :nth-child(3) { animation-delay: .24s; }
.modal.is-open #m-body > :nth-child(4) { animation-delay: .3s; }
.modal.is-open #m-body > :nth-child(5) { animation-delay: .36s; }
.modal.is-open #m-body > :nth-child(6) { animation-delay: .42s; }
.modal.is-open #m-body > :nth-child(n+7) { animation-delay: .48s; }
@keyframes mIn { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .mtitle .tc, .body .w, .body .pcl, .origin { opacity: 1 !important; transform: none !important; filter: none !important; }
  .pc__par { transform: none !important; }
}

/* Mini animaciones de la ficha con la misma tipografía */
.sv-label { font-family: var(--f-grot); font-variation-settings: "wdth" 85; }
.sv-small { font-family: var(--f-text); font-weight: 500; }