/* funscroll.life — shared styles */
:root {
  --ink: #17151F;
  --yellow: #FFDF4F;
  --blue: #3B5BFF;
  --red: #FF5436;
  --white: #FFFFFF;
  --sky: #DCE3FF;
  --butter: #FFF3B0;
  --blush: #FFD3C9;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --voice: 'Recursive', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='38' viewBox='0 0 34 38'%3E%3Cpath d='M3 3 L3 31 L11 24 L17 36 L23 33 L17 21 L28 21 Z' fill='%23FFDF4F' stroke='%2317151F' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  font-family: var(--display);
  color: var(--ink);
  background: var(--yellow);
  cursor: var(--cursor);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; cursor: pointer; }
button { font: inherit; color: inherit; cursor: pointer; }
.voice { font-family: var(--voice); font-weight: 400; }
/* Recursive's casual axis: legible but playful */
html { font-variation-settings: 'CASL' 1; }
.mono { font-family: var(--mono); }

/* ---------- face shapes ---------- */
.shp { display: inline-block; width: var(--size, 90px); aspect-ratio: 1; flex-shrink: 0; }
.shp svg { width: 100%; height: 100%; overflow: visible; display: block; }
.shp.abs { position: absolute; }

/* ---------- helm menu (el timón) ---------- */
.helm {
  position: fixed; right: 44px; top: 104px; z-index: 50;
  width: 132px; height: 132px; --r: 0deg;
  transition: transform .5s cubic-bezier(.2,1.6,.4,1);
  transform-origin: 100% 0;
}
.helm.open { transform: none; }
/* the open menu: a clear list under the wheel */
.helm-list { position: fixed; right: 18px; top: 268px; z-index: 51; display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  opacity: 0; translate: 0 -10px; pointer-events: none; transition: opacity .2s, translate .3s cubic-bezier(.2,1.6,.4,1); }
.helm.open + .helm-list { opacity: 1; translate: 0 0; pointer-events: auto; }
.helm-list a { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px; background: var(--white); color: var(--ink); text-decoration: none;
  border: 2.5px solid var(--ink); border-radius: 30px; box-shadow: 3px 3px 0 var(--ink); font: 800 18px/1 var(--display); letter-spacing: -.02em; }
.helm-list a:hover { background: var(--yellow); }
.helm-list .label { position: static; opacity: 1; translate: none; background: none; color: inherit; padding: 0; font: inherit; }
.helm .wheel { position: absolute; inset: 0; transform: rotate(var(--r)); }
.helm .rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }
.helm .hub {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; translate: -50% -50%;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--white); padding: 0;
  display: grid; place-items: center; font: 800 14px/1 var(--display); letter-spacing: -.02em; color: var(--ink);
  transform: rotate(calc(-1 * var(--r))); cursor: pointer;
}
.helm .hub:hover, .helm.open .hub { background: var(--yellow); }
.helm .handle {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  transform: rotate(var(--a)) translateY(-70px) rotate(calc(-1 * var(--a)));
  text-decoration: none;
}
.helm .handle .inner { display: block; width: 100%; height: 100%; transform: rotate(calc(-1 * var(--r))); transition: scale .3s; }
.helm .handle:hover .inner { scale: 1.2; }
.helm .label {
  position: absolute; left: 50%; top: 100%; translate: -50% 0; white-space: nowrap;
  font: 700 12px/1 var(--display); background: var(--ink); color: var(--white);
  padding: 5px 8px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.helm .handle:hover .label { opacity: 1; }
.helm.open .handle .label { opacity: 0; }
.helm-hint {
  position: fixed; right: 186px; top: 150px; z-index: 49; font: italic 18px/1.15 var(--voice);
  pointer-events: none; transition: opacity .4s; text-align: left; display: none;
}
.helm.open + .helm-hint, body.scrolled .helm-hint { opacity: 0; }

/* ---------- scroll track with scrollcito ---------- */
.track {
  position: fixed; right: 10px; top: 290px; bottom: 16px; width: 26px; z-index: 40;
  border: 2.5px dashed var(--ink); border-radius: 14px; background: rgba(255,255,255,.55); pointer-events: none;
}
.track .mini {
  position: absolute; left: 50%; width: 30px; height: 46px; translate: -50% 0;
  top: calc(var(--fs-page, 0) * (100% - 46px));
}
.track .pct {
  position: absolute; right: 30px; top: calc(var(--fs-page, 0) * (100% - 46px) + 12px);
  font: 500 11px var(--mono); white-space: nowrap; background: var(--white);
  border: 2px solid var(--ink); border-radius: 10px; padding: 2px 6px;
}

/* ---------- small things ---------- */
.pill {
  display: inline-block; font-weight: 600; font-size: 20px; padding: 10px 22px; border-radius: 40px;
  border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--white); text-decoration: none;
}
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  padding: 14px 26px; border-radius: 60px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  background: var(--white); text-decoration: none; transition: translate .15s, box-shadow .15s;
}
.btn:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--ink); }
.btn:active { translate: 4px 4px; box-shadow: 1px 1px 0 var(--ink); }
.tag { font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.bubble {
  position: relative; display: inline-block; background: var(--white); border: 2.5px solid var(--ink);
  border-radius: 22px; padding: 12px 18px; font: italic 22px/1.1 var(--voice);
}
.bubble::after {
  content: ''; position: absolute; left: 26px; bottom: -14px; width: 20px; height: 20px; background: var(--white);
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg) skew(10deg, 10deg);
}
.topbar {
  position: fixed; right: 18px; top: 14px; z-index: 46; display: flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -.04em;
}
.topbar img { width: 52px; height: 52px; transition: rotate .4s cubic-bezier(.2,2,.4,1); }
.topbar:hover img { rotate: -18deg; }

@media (max-width: 700px) {
  .topbar { right: 12px; top: 10px; }
  .topbar img { width: 44px; height: 44px; }
  .langswitch { right: 64px; top: 18px; }
  .helm { right: 34px; top: 84px; width: 96px; height: 96px; }
  .helm .handle { transform: rotate(var(--a)) translateY(-50px) rotate(calc(-1 * var(--a))); width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .helm .hub { width: 46px; height: 46px; font-size: 12px; border-width: 2.5px; }
  .helm-list { right: 12px; top: 200px; }
  .helm-list a { font-size: 17px; }
  .helm-hint { display: none; }
  .track { right: 4px; width: 18px; top: 220px; bottom: 16px; }
  /* keep every column clear of the scrollcito track on the right */
  body .wrap { padding-right: 46px; }
  .track .mini { width: 22px; height: 34px; }
  .track .pct { display: none; }
}

/* white outline so ink drawings survive on dark backgrounds */
.halo, .track .mini { filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); }

/* EN | ES switch */
.langswitch {
  position: fixed; right: 84px; top: 26px; z-index: 46; display: flex; border: 2.5px solid var(--ink); border-radius: 20px;
  overflow: hidden; box-shadow: 3px 3px 0 var(--ink); font: 500 12px var(--mono);
}
.langswitch > * { padding: 4px 10px; background: var(--white); color: var(--ink); text-decoration: none; }
.langswitch .on { background: var(--yellow); }
.langswitch a:hover { background: var(--sky); }

/* footer with contact */
.site-foot { background: var(--ink); color: var(--white); border-top: 3px dashed #4A4658; padding-block: 60px 70px; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }
.site-foot .in { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.site-foot p { font: 400 clamp(20px, 2.2vw, 28px)/1.3 var(--voice); }
.site-foot p b { font-family: var(--display); font-weight: 800; color: var(--yellow); }
.site-foot .mail { font: 800 clamp(20px, 3vw, 36px)/1 var(--display); letter-spacing: -.03em; color: var(--ink); background: var(--yellow); padding: 12px 20px; border-radius: 40px; border: 3px solid var(--white); text-decoration: none; word-break: break-all; user-select: all; }
.site-foot .mail:hover { background: var(--white); }
.site-foot small { font: 500 12px var(--mono); opacity: .75; }
.site-foot small a { color: var(--yellow); }
@media (max-width: 700px) { .site-foot { padding-right: max(20px, env(safe-area-inset-right, 0px)); } }