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

:root {
  --bg: #9f91cf;
}

html {
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  height: 100%;
}

body {
  background: var(--bg);
  color: #fff;
  overflow: hidden;
}

/* ---------- Two-view slider (landing → portfolio) ---------- */

#app {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

#slider {
  display: flex;
  flex-direction: column;
  height: 200vh;
  will-change: transform;
}

#slider > * {
  flex: 0 0 100vh;
}

/* Shared gentle float — used by both views. Animates the independent
   `translate` property so it composes with hover/entrance `transform`s.
   Per-element amplitude via --floatY. */
@keyframes float-y {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 var(--floatY, -7px); }
}

/* ---------- Portfolio hub: 2D world of directional subpages ---------- */

.world-frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.world {
  display: grid;
  grid-template-columns: repeat(3, 100vw);
  grid-template-rows: repeat(3, 100vh);
  width: 300vw;
  height: 300vh;
  /* sits above .world-bg, the fixed dream-haze backdrop behind the whole world */
  position: relative;
  z-index: 1;
  /* GSAP centres this on the hub (cell col2/row2) on load and pans it on nav.
     No CSS transform here — GSAP's x and xPercent are additive, so a CSS
     translate would be double-counted with the xPercent centering. */
  will-change: transform;
}

.stage {
  grid-column: 2;
  grid-row: 2;
}
.subpage--top {
  grid-column: 2;
  grid-row: 1;
}
.subpage--left {
  grid-column: 1;
  grid-row: 2;
}
.subpage--right {
  grid-column: 3;
  grid-row: 2;
}
.subpage--bottom {
  grid-column: 2;
  grid-row: 3;
}

.subpage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.subpage__title {
  font-weight: 700;
  font-size: clamp(2.25rem, 8vw, 5.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 12px rgba(70, 45, 110, 0.3);
}

/* ---------- Sobre mí (about) subpage ---------- */
/* The top cell holds a softly-framed card — sticker portrait + intro text —
   echoing the reference slide. Its decorative .spark twinkles live inside the
   card so they ride along as it floats, over the shared .world-bg haze that
   stays bloomed behind this cell too. Layout is a 2-row grid: row 1 is photo | text
   (role + the "Combino" line, justified); row 2 is the "Integro" line spanning
   the full width below, also justified. */

.subpage--top {
  padding: clamp(1.25rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
}

.about {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'photo text'
    'bio   bio';
  align-items: center;
  gap: clamp(1rem, 2.6vh, 1.9rem) clamp(1.5rem, 4vw, 3.75rem);
  width: min(1080px, 94vw);
  padding: clamp(1.4rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3.25rem);
  border-radius: 30px;
  border: 1.5px solid rgba(253, 247, 234, 0.45);
  /* frosted glass so the sun + grid read softly behind the card without
     fighting the text in front */
  background: rgba(86, 70, 142, 0.34);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 18px 50px rgba(60, 40, 95, 0.34),
    0 0 0 6px rgba(159, 145, 207, 0.22);
}

/* photo + text + closing line ride above the decorative sparkles */
.about__photo,
.about__text,
.about__bio--wide {
  position: relative;
  z-index: 1;
}
.about > .spark {
  z-index: 0;
}

/* ---------- Sobre mí backdrop: vaporwave sun + scanlines ---------- */
/* The retro grid is NOT here — it's the shared .world-bg__grid, a sibling of
   the panning .world, so it stays fixed at the viewport bottom across both the
   hub and Sobre mí instead of sweeping in (and seaming) with this cell. This
   layer only adds Sobre mí's own sun + scanlines, behind the card (z-index 0
   vs the card's 1). */
.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* horizontal scanlines behind the sun, fading out toward the corners */
.about-bg__lines {
  position: absolute;
  left: 50%;
  top: clamp(0.5rem, 3vh, 2.5rem);
  width: clamp(480px, 72vw, 1000px);
  height: clamp(300px, 50vh, 560px);
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    rgba(247, 220, 246, 0.5) 0 3px,
    transparent 3px 16px
  );
  -webkit-mask-image: radial-gradient(66% 56% at 50% 40%, #000 14%, transparent 76%);
  mask-image: radial-gradient(66% 56% at 50% 40%, #000 14%, transparent 76%);
}

/* vaporwave sun rising from behind the card */
.about-bg__sun {
  position: absolute;
  left: 50%;
  top: clamp(1.5rem, 6vh, 5rem);
  width: clamp(240px, 30vw, 390px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 26px rgba(236, 199, 238, 0.55));

  --floatY: -10px;
  animation: float-y 7s ease-in-out infinite;
}
.about-bg__sun-disc {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff3d9 0%, #ffe0ef 38%, #ecc7ee 70%, #cf9fe6 100%);
  /* slice horizontal gaps across the lower half — gaps widen toward the bottom
     for the classic retro-sun look */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0 50%,
    transparent 50% 58%,
    #000 58% 67%,
    transparent 67% 76%,
    #000 76% 84%,
    transparent 84% 93%,
    #000 93% 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0 50%,
    transparent 50% 58%,
    #000 58% 67%,
    transparent 67% 76%,
    #000 76% 84%,
    transparent 84% 93%,
    #000 93% 100%
  );
}

/* the portrait sits in a mini retro browser window (echoing the landing chrome);
   the figure just sizes it and carries the gentle float */
.about__photo {
  grid-area: photo;
  margin: 0;
  width: clamp(190px, 23vw, 310px);

  --floatY: -12px;
  animation: float-y 5s ease-in-out infinite;
}

.photo-window {
  display: flex;
  flex-direction: column;
  background: #a4e7dd;
  border-radius: 14px;
  padding: clamp(4px, 0.6vw, 6px);
  box-shadow:
    0 16px 30px rgba(60, 40, 95, 0.42),
    0 0 0 3px #9a83d3,
    0 3px 0 rgba(255, 255, 255, 0.5) inset;
}

.photo-window__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 0.9vw, 10px);
  padding: clamp(5px, 0.7vw, 8px) clamp(7px, 0.9vw, 10px);
  background: linear-gradient(180deg, #f6dcf6, #ecc7ee);
  border: 2px solid #9a83d3;
  border-radius: 10px 10px 0 0;
}

.photo-window__dots {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 9px);
}
/* min / max / close glyphs (mirror the landing browser controls) */
.pw-ctrl {
  position: relative;
  width: clamp(10px, 1.1vw, 14px);
  height: clamp(10px, 1.1vw, 14px);
  color: #41565f;
}
.pw-ctrl--min::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.pw-ctrl--max {
  border: 2px solid currentColor;
  border-radius: 2px;
}
.pw-ctrl--close::before,
.pw-ctrl--close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.pw-ctrl--close::before {
  transform: rotate(45deg);
}
.pw-ctrl--close::after {
  transform: rotate(-45deg);
}

.photo-window__screen {
  margin-top: clamp(4px, 0.6vw, 6px);
  aspect-ratio: 1 / 1;
  border: 2px solid #9a83d3;
  border-radius: 10px;
  overflow: hidden;
  background: #efeaf7;
}
.photo-window__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* her face sits high in the portrait — keep it in view when cropping square */
  object-position: 50% 28%;
}

.about__text {
  grid-area: text;
  text-align: left;
}

/* pixel-font greeting with a soft holographic glow */
.about__hi {
  font-family: 'Jersey 10', system-ui, monospace;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.8vw, 5.4rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #a4e7dd;
  text-shadow:
    0 2px 0 rgba(116, 22, 86, 0.5),
    0 4px 12px rgba(96, 16, 70, 0.42),
    0 0 20px rgba(255, 138, 218, 0.6);
}

.about__name {
  margin-top: 0.25em;
  text-align: right;
  font-weight: 700;
  font-size: clamp(1.35rem, 3.3vw, 2.5rem);
  line-height: 1.05;
  color: #fdf7ea;
  text-shadow: 0 2px 10px rgba(70, 45, 110, 0.3);
}

/* role + both bio paragraphs are justified (flush to both edges) */
.about__role {
  margin-top: clamp(1rem, 2.6vh, 1.9rem);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.5vw, 1.95rem);
  line-height: 1.2;
  color: #fdf7ea;
  text-align: justify;
}

.about__bio {
  margin-top: clamp(0.85rem, 1.9vh, 1.35rem);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  line-height: 1.5;
  color: #fdf7ea;
  text-align: justify;
}
.about__bio strong {
  font-weight: 700;
}

/* the closing "Integro" line spans the full width below the photo + text */
.about__bio--wide {
  grid-area: bio;
  margin-top: 0;
}

/* stack vertically on narrow screens */
@media (max-width: 860px) {
  .about {
    grid-template-columns: 1fr;
    grid-template-areas:
      'photo'
      'text'
      'bio';
    justify-items: center;
    gap: clamp(1.1rem, 3vw, 2rem);
    text-align: center;
  }
  .about__text {
    text-align: center;
  }
  .about__name,
  .about__role,
  .about__bio {
    text-align: center;
  }
  .about__bio {
    max-width: 48ch;
    margin-inline: auto;
  }
}

/* ---------- Back-to-hub buttons (one per subpage) ---------- */
/* Same holographic artwork as the hub's glitter buttons, just smaller. Each sits
   on the edge nearest the hub — the edge it travelled in from. Positioned with auto
   margins (not a transform) so the float `translate` and hover transform compose
   cleanly; explicit width + height (same 799:274 ratio as the artwork) let
   margin:auto centre it on every edge. */
.back-btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(130px, 15vw, 185px);
  height: clamp(45px, 5.15vw, 63px);
  padding: 0 0.6em;
  border: none;
  background-color: transparent;
  cursor: pointer;

  font-family: inherit;
  font-weight: 700;
  font-size: clamp(0.72rem, 1.4vw, 1.05rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(80, 10, 50, 0.95),
    0 2px 5px rgba(80, 10, 50, 0.75),
    0 0 11px rgba(110, 15, 70, 0.6);
  white-space: nowrap;

  /* the same holographic button artwork as the glitter buttons */
  background-image: url('/button.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  transition: transform 0.18s ease, filter 0.18s ease;

  --floatY: -9px;
  animation: float-y 3.6s ease-in-out infinite;
}

/* label rides above the moving sheen */
.back-btn__label {
  position: relative;
  z-index: 2;
  transform: translateY(-0.1em);
}

/* moving shine, clipped to the button artwork */
.back-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-mask: url('/button.webp') center / 100% 100% no-repeat;
  mask: url('/button.webp') center / 100% 100% no-repeat;
  animation: glitter-sheen 5s ease-in-out infinite;
}

.back-btn:hover {
  transform: translateY(-2px) scale(1.05);
  filter: brightness(1.06) drop-shadow(0 6px 16px rgba(255, 120, 210, 0.55));
}
.back-btn:active {
  transform: translateY(0) scale(0.98);
}
.back-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 20px;
}

/* placement on the edge nearest the hub */
.back-btn--down {
  bottom: clamp(20px, 4.5vh, 48px);
  left: 0;
  right: 0;
  margin-inline: auto;
}
.back-btn--up {
  top: clamp(20px, 4.5vh, 48px);
  left: 0;
  right: 0;
  margin-inline: auto;
}
.back-btn--right {
  right: clamp(20px, 4vw, 48px);
  top: 0;
  bottom: 0;
  margin-block: auto;
}
.back-btn--left {
  left: clamp(20px, 4vw, 48px);
  top: 0;
  bottom: 0;
  margin-block: auto;
}

/* ---------- Stage / diamond layout ---------- */

.stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  grid-template-areas:
    '.    top    .'
    'left face right'
    '.   bottom  .';
  place-items: center;
  gap: clamp(0.75rem, 3vh, 2.25rem) clamp(0.75rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 5vh, 4rem) clamp(1.25rem, 5vw, 5rem);
}

.glitter-btn--top {
  grid-area: top;
}
.glitter-btn--left {
  grid-area: left;
}
.glitter-btn--right {
  grid-area: right;
}
.glitter-btn--bottom {
  grid-area: bottom;
}

/* ---------- Face frame ---------- */

.face-frame {
  grid-area: face;
  width: clamp(280px, 38vw, 480px);
  aspect-ratio: 480 / 270;
  border-radius: 10px;
  overflow: hidden;
  background: #e6e3f3;
  box-shadow:
    0 14px 34px rgba(60, 40, 95, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;

  --floatY: -14px;
  animation: float-y 4.5s ease-in-out -2s infinite;
}

.face-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- World background: vaporwave dream haze ---------- */
/* A fixed full-viewport backdrop behind the whole 3×3 world. It lives in
   .world-frame (not in .world), so it stays put while .world pans between
   cells — moving from the hub to a subpage never reveals a seam. */

.world-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* soft pastel glows blooming in from the corners over the purple base */
.world-bg::before {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(38% 42% at 10% 8%, rgba(164, 231, 221, 0.55), transparent 70%),
    radial-gradient(40% 44% at 90% 6%, rgba(236, 199, 238, 0.62), transparent 72%),
    radial-gradient(42% 46% at 6% 94%, rgba(236, 199, 238, 0.5), transparent 72%),
    radial-gradient(46% 50% at 96% 96%, rgba(164, 231, 221, 0.5), transparent 72%);
  animation: haze-breathe 16s ease-in-out infinite;
}

@keyframes haze-breathe {
  0%, 100% { opacity: 0.85; scale: 1; }
  50% { opacity: 1; scale: 1.05; }
}

/* retro perspective grid receding to a horizon along the bottom */
.world-bg__grid {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 260%;
  height: 48%;
  translate: -50% 0;
  transform: perspective(440px) rotateX(64deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(164, 231, 221, 0.5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(164, 231, 221, 0.5) 2px, transparent 2px);
  background-size: 66px 66px;
  -webkit-mask-image: linear-gradient(to top, #000 4%, transparent 78%);
  mask-image: linear-gradient(to top, #000 4%, transparent 78%);
  animation: grid-flow 6s linear infinite;
}

@keyframes grid-flow {
  to { background-position: 0 66px; }
}

/* twinkling sparkles scattered through the "sky" */
.spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 12px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--c, #fff);
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
  animation: twinkle 3.6s ease-in-out var(--d, 0s) infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.22; scale: 0.65; }
  50% { opacity: 1; scale: 1; }
}

/* ---------- Holographic glitter button ---------- */

.glitter-btn {
  position: relative;
  display: grid;
  place-items: center;
  border: none;
  background-color: transparent;
  cursor: pointer;

  width: clamp(230px, 30vw, 380px);
  aspect-ratio: 799 / 274;
  padding: 0 9%;

  font-family: inherit;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 2.3rem);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(80, 10, 50, 0.95),
    0 2px 5px rgba(80, 10, 50, 0.75),
    0 0 11px rgba(110, 15, 70, 0.6);
  white-space: nowrap;

  /* the original holographic button artwork */
  background-image: url('/button.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

  transition:
    transform 0.18s ease,
    filter 0.18s ease;

  --floatY: -14px;
  animation: float-y 4.5s ease-in-out infinite;
}

/* per-button float timing — placed after the base rule so these longhands
   override the base `animation` shorthand; negative delays desync them */
.glitter-btn--top {
  animation-duration: 3.8s;
  animation-delay: -0.5s;
}
.glitter-btn--left {
  animation-duration: 4.6s;
  animation-delay: -2.5s;
  --floatY: -13px;
}
.glitter-btn--right {
  animation-duration: 4.2s;
  animation-delay: -1.5s;
  --floatY: -16px;
}
.glitter-btn--bottom {
  animation-duration: 5s;
  animation-delay: -3.5s;
}

/* keep the label crisp and above the moving sheen; nudge up to optically
   center it in the pill (the artwork sits slightly high in its canvas) */
.glitter-btn__label {
  position: relative;
  z-index: 2;
  transform: translateY(-0.18em);
}

/* "Sobre mí" has an accent that pokes above the caps, making the whole word
   read as too high — sit it a touch lower so the full word looks balanced */
.glitter-btn--top .glitter-btn__label {
  transform: translateY(-0.1em);
}

/* subtle moving shine, clipped to the button's exact shape */
.glitter-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 62%
  );
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-mask: url('/button.webp') center / 100% 100% no-repeat;
  mask: url('/button.webp') center / 100% 100% no-repeat;
  animation: glitter-sheen 5.5s ease-in-out infinite;
}

.glitter-btn:hover {
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.06) drop-shadow(0 7px 20px rgba(255, 120, 210, 0.55));
}

.glitter-btn:active {
  transform: translateY(0) scale(0.99);
}

.glitter-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 26px;
}

@keyframes glitter-sheen {
  0% {
    background-position: 150% 0;
  }
  55%,
  100% {
    background-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glitter-btn::after,
  .glitter-btn,
  .face-frame,
  .about__photo,
  .about-bg__sun,
  .world-bg::before,
  .world-bg__grid,
  .spark,
  .back-btn,
  .back-btn::after {
    animation: none;
  }
  .spark {
    opacity: 0.7;
  }
}

/* ---------- Narrow screens: stack vertically ---------- */

@media (max-width: 720px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      'face'
      'top'
      'left'
      'right'
      'bottom';
    gap: 1.1rem;
    align-content: center;
  }
}
/* ============================================================
   Retro browser landing — Y2K / vaporwave kawaii
   ============================================================ */

.landing {
  --ink: #41565f; /* dark slate-teal: window icons */
  --mint: #a4e7dd;
  --mint-deep: #7fd6c7;
  --pink: #ecc7ee;
  --pink-soft: #f6dcf6;
  --lilac: #d8c2f0;
  --cream: #fdf7ea;
  --line: #9a83d3; /* periwinkle sticker outline */
  --line-deep: #6f5ba8;
  --pill-ink: #2c2c3e;

  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vh, 1.5rem);
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem);
  overflow: hidden;
}

/* ---------- Browser window ---------- */

.browser {
  position: relative;
  width: min(1080px, 92vw);
  /* keep the whole window + base band inside one viewport */
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--mint);
  border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(5px, 0.7vw, 9px);
  box-shadow:
    0 22px 48px rgba(70, 45, 110, 0.32),
    0 3px 0 rgba(255, 255, 255, 0.5) inset;
}

/* Title bar */
.browser__bar {
  position: relative;
  height: clamp(34px, 4.4vh, 52px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 clamp(10px, 1.2vw, 18px);
  background: linear-gradient(180deg, var(--pink-soft), var(--pink));
  border: 2.5px solid var(--line);
  border-radius: clamp(10px, 1.1vw, 16px) clamp(10px, 1.1vw, 16px) 0 0;
}

/* the tab tucked into the top-left */
.browser__tab {
  position: absolute;
  left: clamp(14px, 2vw, 30px);
  bottom: -2.5px;
  width: clamp(120px, 18vw, 215px);
  height: clamp(26px, 3.4vh, 42px);
  background: linear-gradient(180deg, #f3d2f3, var(--pink));
  border: 2.5px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}

.browser__controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.4vw, 20px);
  padding-bottom: clamp(7px, 1vh, 12px);
}

.browser__control {
  position: relative;
  width: clamp(15px, 1.6vw, 21px);
  height: clamp(15px, 1.6vw, 21px);
  color: var(--ink);
}
.browser__control--min::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 2.6px;
  background: currentColor;
  border-radius: 2px;
}
.browser__control--max {
  border: 2.6px solid currentColor;
  border-radius: 3px;
}
.browser__control--close::before,
.browser__control--close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2.6px;
  background: currentColor;
  border-radius: 2px;
}
.browser__control--close::before {
  transform: rotate(45deg);
}
.browser__control--close::after {
  transform: rotate(-45deg);
}

/* Nav / address row */
.browser__nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  padding: clamp(7px, 1vh, 13px) clamp(10px, 1.3vw, 20px);
  background: var(--pink);
  border: 2.5px solid var(--line);
  border-top: none;
}

.browser__actions {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.9vw, 13px);
  color: var(--ink);
  flex-shrink: 0;
}
.browser__icon {
  width: clamp(20px, 2.2vw, 30px);
  height: clamp(20px, 2.2vw, 30px);
}
.browser__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.browser__url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: clamp(28px, 3.4vh, 42px);
  padding: 0 clamp(12px, 1.4vw, 20px);
  background: var(--cream);
  border: 2.5px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(70, 45, 110, 0.12) inset;
}
.browser__mag {
  width: clamp(15px, 1.7vw, 21px);
  height: clamp(15px, 1.7vw, 21px);
  fill: none;
  stroke: var(--line-deep);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.browser__avatar {
  flex-shrink: 0;
  width: clamp(30px, 3.6vw, 46px);
  height: clamp(30px, 3.6vw, 46px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4f1e9, var(--mint-deep));
  border: 2.5px solid var(--line);
}

/* Content area */
.browser__content {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(5px, 0.7vw, 9px);
  padding: clamp(6px, 1.2vw, 16px);
  background: linear-gradient(180deg, #fffdf6, var(--cream));
  border: 2.5px solid var(--line);
  border-radius: clamp(8px, 1vw, 14px);
  overflow: hidden;
}

/* ---------- Clickable PORTAFOLIO ---------- */

.portfolio-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.portfolio-img {
  display: block;
  /* grow past the content box (centered) to enlarge the wordmark in place;
     any bleed is clipped by .browser__content's overflow:hidden */
  width: 120%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 22px rgba(228, 150, 220, 0.55));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease;
  animation: portfolio-float 5.5s ease-in-out infinite;
}
.portfolio-link:hover .portfolio-img,
.portfolio-link:focus-visible .portfolio-img {
  transform: scale(1.03);
  filter: drop-shadow(0 10px 30px rgba(232, 130, 224, 0.85))
    drop-shadow(0 0 14px rgba(190, 170, 255, 0.7));
}
.portfolio-link:focus-visible {
  outline: 3px dashed var(--line-deep);
  outline-offset: -6px;
  border-radius: 12px;
}
.portfolio-link:active .portfolio-img {
  transform: scale(0.99);
}

@keyframes portfolio-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* pixel cursor accent near the text */
.pixel-cursor {
  position: absolute;
  right: clamp(14px, 4.2vw, 64px);
  bottom: clamp(-46px, -2.9vw, -24px);
  width: clamp(40px, 4.2vw, 56px);
  height: auto;
  transform: rotate(8deg);
  filter: drop-shadow(2px 3px 2px rgba(40, 30, 70, 0.35));
  pointer-events: none;
}

/* ---------- Grid band + name search pill ---------- */

.landing__base {
  position: relative;
  width: min(1080px, 92vw);
  height: clamp(74px, 13vh, 128px);
  border-radius: 8px;
  background-image:
    linear-gradient(rgba(120, 206, 196, 0.85) 2px, transparent 2px),
    linear-gradient(90deg, rgba(120, 206, 196, 0.85) 2px, transparent 2px);
  background-size: clamp(26px, 3vw, 42px) clamp(26px, 3vw, 42px);
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent);
  mask-image: linear-gradient(90deg, #000 62%, transparent);
}

.search-pill {
  position: absolute;
  left: clamp(8px, 3vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  --floatY: -12px;
  animation: float-y 4.2s ease-in-out 1.2s infinite;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  padding: clamp(6px, 0.8vh, 10px);
  padding-left: clamp(16px, 1.8vw, 28px);
  background: #fff;
  border: 2.5px solid var(--mint-deep);
  border-radius: 14px;
  box-shadow: 0 0 0 2.5px var(--pill-ink), 0 8px 18px rgba(50, 35, 80, 0.28);
}
.search-pill__text {
  font-family: 'Jersey 10', 'Fredoka', monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.15rem, 2.3vw, 2rem);
  color: var(--pill-ink);
  white-space: nowrap;
}

/* blinking caret for the typewriter (main.ts types the name in char by char) */
.search-pill__text::after {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 1.05em;
  margin-left: 0.12em;
  vertical-align: -0.15em;
  background: var(--pill-ink);
  animation: caret-blink 1.05s infinite;
}

@keyframes caret-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.search-pill__btn {
  display: grid;
  place-items: center;
  width: clamp(34px, 3.6vw, 50px);
  height: clamp(30px, 3.2vw, 44px);
  background: radial-gradient(circle at 40% 30%, #c4f1e9, var(--mint-deep));
  border: 2.5px solid var(--pill-ink);
  border-radius: 10px;
}
.search-pill__btn svg {
  width: 56%;
  height: 56%;
  fill: none;
  stroke: var(--pill-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* ---------- Entrance choreography ---------- */

.browser {
  --floatY: -13px;
  animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
    float-y 4.8s ease-in-out 1s infinite;
}
.portfolio-img {
  animation: portfolio-float 5.5s ease-in-out infinite,
    pop-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
}
.pixel-cursor {
  /* its own quicker bob, on top of riding the window's float */
  --floatY: -13px;
  animation: cursor-in 0.5s ease 0.75s both,
    float-y 2.5s ease-in-out 1.1s infinite;
}
.landing__base {
  animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pop-in {
  from { opacity: 0; scale: 0.8; }
  to { opacity: 1; scale: 1; }
}
@keyframes cursor-in {
  from { opacity: 0; transform: rotate(8deg) translate(10px, 10px); }
  to { opacity: 1; transform: rotate(8deg) translate(0, 0); }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 720px) {
  .browser {
    width: 94vw;
    max-height: 64vh;
  }
  .landing__base {
    width: 94vw;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .search-pill {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .browser,
  .portfolio-img,
  .pixel-cursor,
  .landing__base,
  .search-pill {
    animation: none;
  }
  .portfolio-img {
    transition: none;
  }
  /* no typing animation: caret hidden, full name shown immediately (via main.ts) */
  .search-pill__text::after {
    display: none;
  }
}
/* ============================================================
   Hoja de vida — retro-window CV collage (Y2K / vaporwave)
   ============================================================
   A self-scaling "poster": .cv is a size container and every window plus all of
   its text/chrome are sized in one unit (--u = 1% of the collage width), so the
   whole arrangement — overlaps included — scales as a block and never reflows.
   On narrow screens it drops to a plain vertical stack (--u switches to vw). */

/* reserve a right gutter so the centred collage clears the floating "Volver"
   button, which lives on the right edge (the edge nearest the hub) */
.subpage--left {
  padding: clamp(1rem, 3vh, 2.5rem) clamp(1rem, 4vw, 3rem);
  padding-right: clamp(118px, 14vw, 210px);
}

.cv {
  position: relative;
  z-index: 1; /* the collage sits above its .cv-bg backdrop */
  width: min(100%, 132vh);
  aspect-ratio: 200 / 119;
  container-type: size;

  --u: 1cqw; /* the single scaling unit: 1% of the collage width */
  --cv-line: #8b84c6; /* periwinkle-blue window outline + chrome */
  --cv-body: #efeafb; /* light lavender window body */
  --cv-shadow: rgba(124, 121, 188, 0.5); /* sticker drop-shadow */
  --cv-ink: #6f5ba8; /* body text */
  --cv-title: #6a5cbf; /* pixel-font titles */
}

/* ---------- cell backdrop: graph-paper grid ----------
   Hoja de vida's ONLY non-shared backdrop. The corner glows + sparkles are the
   shared .world-bg, kept bloomed for this cell like Sobre mí (see main.ts) — not
   duplicated here. main.ts owns this layer's opacity: it fades the grid in on
   arrival at Hoja de vida and out on the way back to the hub. Pinned with inset:0
   so it fills the whole cell (the right "Volver" gutter doesn't carve it); sits
   behind the collage (.cv is z-index:1). Same flat-grid recipe as Contacto's
   .contact-grid, so the two purple-based subpages read as siblings. */
.cv-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* flat graph-paper grid on the purple base */
.cv-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: clamp(40px, 4.2vw, 60px) clamp(40px, 4.2vw, 60px);
}

/* ---------- window shell ---------- */
.win {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  display: flex;
  flex-direction: column;
  text-align: left;
  border: calc(var(--u) * 0.3) solid var(--cv-line);
  border-radius: calc(var(--u) * 1.6);
  background: var(--cv-body);
  box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.9) 0 var(--cv-shadow);
  overflow: hidden;

  --floatY: calc(var(--u) * -0.9);
  animation: float-y 5s ease-in-out infinite;
}

/* ---------- title bar ---------- */
.win__bar {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1);
  border-bottom: calc(var(--u) * 0.3) solid var(--cv-line);
}
.win--mint .win__bar {
  background: linear-gradient(180deg, #bdf0e8, #a4e7dd);
}
.win--pink .win__bar {
  background: linear-gradient(180deg, #f6dcf6, #ecc7ee);
}

.win__title {
  flex: 1;
  font-family: 'Jersey 10', system-ui, monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: calc(var(--u) * 3.6);
  line-height: 1;
  color: var(--cv-title);
}
.win--mint .win__title {
  text-align: center;
}
.win--pink .win__title {
  text-align: left;
}
/* Experiencia and Idiomas use the pink chrome but keep a centered title like the mint windows */
.cv-win--exp .win__title,
.cv-win--idiomas .win__title {
  text-align: center;
}

/* ---------- window controls (✕ ▢ _) ---------- */
.win__controls {
  display: flex;
  flex-shrink: 0;
  gap: calc(var(--u) * 0.55);
  color: var(--cv-line);
}
.win__ctrl {
  position: relative;
  width: calc(var(--u) * 1.7);
  height: calc(var(--u) * 1.7);
  border: calc(var(--u) * 0.26) solid currentColor;
  border-radius: calc(var(--u) * 0.35);
}
.win__ctrl--min::before {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 26%;
  height: calc(var(--u) * 0.26);
  background: currentColor;
}
.win__ctrl--max::before {
  content: '';
  position: absolute;
  inset: 26%;
  border: calc(var(--u) * 0.24) solid currentColor;
}
.win__ctrl--close::before,
.win__ctrl--close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 24%;
  right: 24%;
  height: calc(var(--u) * 0.24);
  background: currentColor;
}
.win__ctrl--close::before {
  transform: rotate(45deg);
}
.win__ctrl--close::after {
  transform: rotate(-45deg);
}

/* ---------- body ---------- */
.win__body {
  position: relative;
  flex: 1;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 1.8);
  color: var(--cv-ink);
}
.win--left .win__body {
  padding-left: calc(var(--u) * 4.4);
}
.win--right .win__body {
  padding-right: calc(var(--u) * 4.4);
}

.win__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.5);
  font-weight: 500;
  font-size: calc(var(--u) * 2);
  line-height: 1.25;
}
.win__list--idiomas {
  gap: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 2.1);
}


/* ---------- software logos ---------- */
.win__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 1.6) calc(var(--u) * 1.4);
  place-items: center;
}
.win__logos img {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  object-fit: contain;
  border-radius: calc(var(--u) * 1.3); /* rounded tiles, matching the Photoshop icon */
  filter: drop-shadow(
    0 calc(var(--u) * 0.3) calc(var(--u) * 0.5) rgba(60, 40, 95, 0.28)
  );
}

/* ---------- decorative scrollbar ---------- */
.win__scroll {
  position: absolute;
  top: calc(var(--u) * 1.2);
  bottom: calc(var(--u) * 1.2);
  width: calc(var(--u) * 1.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  color: var(--cv-line);
}
.win--left .win__scroll {
  left: calc(var(--u) * 1.2);
}
.win--right .win__scroll {
  right: calc(var(--u) * 1.2);
}

.win__arrow {
  width: 0;
  height: 0;
  border-left: calc(var(--u) * 0.85) solid transparent;
  border-right: calc(var(--u) * 0.85) solid transparent;
}
.win__arrow--up {
  border-bottom: calc(var(--u) * 1) solid currentColor;
}
.win__arrow--down {
  border-top: calc(var(--u) * 1) solid currentColor;
}

.win__track {
  position: relative;
  flex: 1;
  width: calc(var(--u) * 1.5);
  border-radius: calc(var(--u) * 1);
  background: rgba(139, 132, 198, 0.22);
}
.win__thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 4%;
  height: 46%;
  border-radius: calc(var(--u) * 1);
  background: linear-gradient(180deg, #a4e7dd, #ecc7ee);
}

/* ---------- CV download window (cream "action" window) ----------
   The 5th window: cream/peach chrome to set it apart from the four info
   windows, holding a single holographic "Descargar" link to the PDF. */
.win--cream .win__bar {
  background: linear-gradient(180deg, #fdf7ea, #f7e8c8);
}
.win--cream .win__title {
  text-align: center;
}

/* the download link: a candy-holographic pill that pops */
.cv-dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.9);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.8);
  border: calc(var(--u) * 0.3) solid var(--cv-line);
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(120deg, #a4e7dd 0%, #ecc7ee 52%, #fdf7ea 100%);
  box-shadow:
    0 calc(var(--u) * 0.4) calc(var(--u) * 0.8) rgba(124, 121, 188, 0.4),
    inset 0 calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.6);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(var(--u) * 2.4);
  letter-spacing: 0.01em;
  color: var(--cv-title);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cv-dl:hover {
  transform: translateY(calc(var(--u) * -0.4)) scale(1.03);
  box-shadow:
    0 calc(var(--u) * 0.7) calc(var(--u) * 1.1) rgba(124, 121, 188, 0.5),
    inset 0 calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.7);
}
.cv-dl:focus-visible {
  outline: calc(var(--u) * 0.35) solid var(--cv-title);
  outline-offset: calc(var(--u) * 0.5);
}
.cv-dl__icon {
  font-size: calc(var(--u) * 2.8);
  line-height: 1;
}

/* ---------- collage placement (overlapping, staggered floats) ---------- */
.cv-win--edu {
  --x: 4%;
  --y: 11%;
  --w: calc(var(--u) * 31);
  z-index: 1;
  animation-duration: 5.2s;
  animation-delay: -0.4s;
}
.cv-win--exp {
  --x: 31%;
  --y: 44%;
  --w: calc(var(--u) * 31);
  z-index: 3;
  --floatY: calc(var(--u) * -1.1);
  animation-duration: 4.6s;
  animation-delay: -2.1s;
}
.cv-win--soft {
  --x: 58%;
  --y: 13%;
  --w: calc(var(--u) * 28);
  z-index: 2;
  animation-duration: 5.6s;
  animation-delay: -1.3s;
}
.cv-win--idiomas {
  --x: 65%;
  --y: 53%;
  --w: calc(var(--u) * 28);
  z-index: 1;
  --floatY: calc(var(--u) * -1);
  animation-duration: 4.9s;
  animation-delay: -3.2s;
}
.cv-win--descargar {
  --x: 4%;
  --y: 64%;
  --w: calc(var(--u) * 24);
  z-index: 4;
  --floatY: calc(var(--u) * -1.05);
  animation-duration: 5s;
  animation-delay: -1.8s;
}

@media (prefers-reduced-motion: reduce) {
  .win {
    animation: none;
  }
}

/* ---------- narrow screens: plain vertical stack ---------- */
@media (max-width: 760px) {
  .subpage--left {
    padding: 1.25rem 1rem 4rem;
    align-items: start;
    overflow-y: auto;
  }
  .cv {
    width: 100%;
    aspect-ratio: auto;
    container-type: normal;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    /* unit now scales with the viewport instead of the (full-width) collage */
    --u: clamp(7px, 2.7vw, 12px);
  }
  .win {
    position: static;
    width: 100%;
  }
}
/* ============================================================
   Contacto — retro browser window + contact card (Y2K / vaporwave)
   ============================================================
   The Contacto cell (.subpage--right) rebuilds the landing's browser chrome in
   mint, fills its content panel with a pixel headline, and sits a contact card
   (clickable email + phone) and a sad kitten beneath it, over a graph-paper grid.
   Self-contained like cv.css; imported once in main.ts. */

.subpage--right {
  --ink: #41565f; /* dark slate-teal: window glyphs */
  --mint: #a4e7dd;
  --mint-soft: #bdf0e8;
  --mint-deep: #7fd6c7;
  --pink: #ecc7ee;
  --pink-soft: #f6dcf6;
  --cream: #fdf7ea;
  --lav: #f3e6f8; /* content-panel fill */
  --line: #9a83d3; /* periwinkle sticker outline */
  --line-deep: #6f5ba8;
  --label: #f1ebfa; /* cool-white contact text */

  /* reserve a left lane for the floating "Volver" button (it lives on the left
     edge — the edge Contacto travelled in from) so the window clears it */
  padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3.25rem);
  padding-left: clamp(140px, 14.5vw, 205px);
}

/* ---------- full-bleed graph-paper grid ----------
   Lighter lines on the purple base, filling the whole cell. main.ts owns its
   opacity: it cross-fades with the shared dream-haze's perspective grid as you
   move between the hub and Contacto. Like Hoja de vida, Contacto keeps the
   haze's glows + sparkles but swaps this flat grid in for the perspective one. */
.contact-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: clamp(40px, 4.2vw, 60px) clamp(40px, 4.2vw, 60px);
}

/* ---------- centred column: window over contact card ---------- */
.contact {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(1.2rem, 5.5vh, 3.5rem);
}

/* ---------- browser window ---------- */
.contact-window {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mint);
  border-radius: clamp(14px, 1.6vw, 22px);
  padding: clamp(5px, 0.7vw, 9px);
  box-shadow:
    0 22px 48px rgba(70, 45, 110, 0.32),
    0 0 0 2.5px var(--line),
    0 3px 0 rgba(255, 255, 255, 0.5) inset;

  --floatY: -12px;
  animation: float-y 5s ease-in-out infinite;
}

/* tab strip: mint (blends with the frame), holding the pink tab + window controls */
.cwin__bar {
  position: relative;
  height: clamp(30px, 4vh, 46px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 clamp(10px, 1.2vw, 18px);
  background: linear-gradient(180deg, var(--mint-soft), var(--mint));
  border: 2.5px solid var(--line);
  border-radius: clamp(9px, 1vw, 15px) clamp(9px, 1vw, 15px) 0 0;
}

/* the pink tab tucked into the top-left, connecting down into the toolbar */
.cwin__tab {
  position: absolute;
  left: clamp(12px, 1.8vw, 26px);
  bottom: -2.5px;
  width: clamp(110px, 17vw, 215px);
  height: clamp(22px, 3vh, 36px);
  background: linear-gradient(180deg, #f3d2f3, var(--pink));
  border: 2.5px solid var(--line);
  border-bottom: none;
  border-radius: 11px 11px 0 0;
}

.cwin__controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.4vw, 20px);
  padding-bottom: clamp(6px, 0.9vh, 11px);
  color: var(--ink);
}
.cwin__control {
  position: relative;
  width: clamp(14px, 1.5vw, 20px);
  height: clamp(14px, 1.5vw, 20px);
}
.cwin__control--min::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  height: 2.6px;
  background: currentColor;
  border-radius: 2px;
}
.cwin__control--max {
  border: 2.6px solid currentColor;
  border-radius: 3px;
}
.cwin__control--close::before,
.cwin__control--close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2.6px;
  background: currentColor;
  border-radius: 2px;
}
.cwin__control--close::before {
  transform: rotate(45deg);
}
.cwin__control--close::after {
  transform: rotate(-45deg);
}

/* toolbar: back / forward / refresh + url pill + avatar (pink, like the landing) */
.cwin__nav {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 18px);
  padding: clamp(7px, 1vh, 13px) clamp(10px, 1.3vw, 20px);
  background: var(--pink);
  border: 2.5px solid var(--line);
  border-top: none;
}

.cwin__actions {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.9vw, 13px);
  color: var(--ink);
  flex-shrink: 0;
}
.cwin__icon {
  width: clamp(19px, 2.1vw, 29px);
  height: clamp(19px, 2.1vw, 29px);
}
.cwin__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cwin__url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: clamp(26px, 3.3vh, 40px);
  padding: 0 clamp(12px, 1.4vw, 20px);
  background: var(--cream);
  border: 2.5px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(70, 45, 110, 0.12) inset;
}
.cwin__mag {
  width: clamp(14px, 1.6vw, 20px);
  height: clamp(14px, 1.6vw, 20px);
  fill: none;
  stroke: var(--line-deep);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.cwin__avatar {
  flex-shrink: 0;
  width: clamp(28px, 3.4vw, 44px);
  height: clamp(28px, 3.4vw, 44px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4f1e9, var(--mint-deep));
  border: 2.5px solid var(--line);
}

/* content panel: light-lavender, mint border, with the centred pixel headline */
.cwin__content {
  display: grid;
  place-items: center;
  margin-top: clamp(5px, 0.7vw, 9px);
  padding: clamp(2rem, 5.2vw, 4.5rem) clamp(1.1rem, 3.4vw, 2.6rem);
  background: var(--lav);
  border: clamp(3px, 0.42vw, 5px) solid var(--mint-deep);
  border-radius: clamp(8px, 1vw, 14px);
}

.contact__headline {
  margin: 0;
  font-family: 'Jersey 10', system-ui, monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-align: center;
  font-size: clamp(2.2rem, 6.9vw, 5.7rem);
  color: #1a1622;
}

/* ---------- contact card (clickable email + phone) ---------- */
.contact__info {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 1.9vh, 1.35rem);
  padding-left: clamp(0.25rem, 1.5vw, 1.5rem);
}

.contact__row {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.5vw, 1.25rem);
  text-decoration: none;
  color: var(--label);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.contact__row:hover {
  transform: translateX(4px);
  filter: drop-shadow(0 3px 12px rgba(255, 255, 255, 0.3));
}
.contact__row:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
  border-radius: 16px;
}

.contact__badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(38px, 4vw, 56px);
  height: clamp(38px, 4vw, 56px);
  border-radius: 50%;
  background: var(--cream);
  color: #6e56b3;
  box-shadow: 0 4px 12px rgba(60, 40, 95, 0.28);
}
.contact__badge--at {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.45rem, 2.5vw, 2.2rem);
  line-height: 1;
}
.contact__badge svg {
  width: 54%;
  height: 54%;
  fill: currentColor;
}

.contact__label {
  font-weight: 500;
  font-size: clamp(1.05rem, 2.3vw, 1.95rem);
  letter-spacing: 0.01em;
  color: var(--label);
}

/* ---------- the sad kitten, bottom-right ---------- */
.contact__cat {
  position: absolute;
  right: clamp(-22px, -1.6vw, 0px);
  bottom: clamp(-22px, -1.6vw, 0px);
  z-index: 2;
  width: clamp(160px, 24vw, 330px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(60, 40, 95, 0.3));

  --floatY: -10px;
  animation: float-y 5.6s ease-in-out -1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .contact-window,
  .contact__cat {
    animation: none;
  }
}

/* ---------- narrow screens: shrink to fit, anchor to the top so the column
   clears the vertically-centred "Volver", tuck the cat into the corner ---------- */
@media (max-width: 760px) {
  .subpage--right {
    align-content: start; /* column rides at the top, above Volver's centre */
    /* explicit longhands: reliably drop the desktop left lane (Volver now floats
       over empty space below the column instead of needing a reserved gutter) */
    padding-top: clamp(1.5rem, 6vh, 3rem);
    padding-right: 1rem;
    padding-bottom: clamp(140px, 40vw, 200px); /* room for the corner cat below */
    padding-left: 1rem;
  }
  .contact {
    width: 100%;
    min-width: 0;
    gap: clamp(1rem, 3vh, 1.6rem);
  }
  /* belt-and-braces for the narrowest phones: flex/grid children default to
     min-width:auto (won't shrink below their content), so pin them to 0 and cap
     width so the long email / wide window can never push past the cell. */
  .contact-window,
  .cwin__nav,
  .cwin__content,
  .contact__info,
  .contact__row {
    min-width: 0;
    max-width: 100%;
  }
  .cwin__content {
    padding: clamp(1.4rem, 6vw, 2.5rem) clamp(0.9rem, 3vw, 1.6rem);
  }
  .contact__headline {
    font-size: clamp(1.45rem, 6.6vw, 2.6rem);
  }
  .contact__info {
    align-self: center;
    padding-left: 0;
  }
  .contact__label {
    font-size: clamp(0.9rem, 3.8vw, 1.35rem);
    overflow-wrap: anywhere; /* worst case the email wraps, never clips */
  }
  .contact__badge {
    width: clamp(34px, 9vw, 46px);
    height: clamp(34px, 9vw, 46px);
  }
  .contact__cat {
    width: clamp(120px, 38vw, 185px);
  }
}
/* ============================================================
   Mis trabajos — config-driven collage gallery (Y2K / vaporwave)
   ============================================================
   The .subpage--bottom cell becomes a scroll container holding a sticky
   filing-cabinet tab strip + one themed panel per folder. Each panel's colors
   come from inline --f-* custom properties set by the renderer. Collage items
   are absolutely placed on a --u stage (the cv.css engine, generalized).
   Self-contained; imported once in main.ts. */

.subpage--bottom {
  /* net-new palette extras (only here) */
  --magenta: #e84fb0;
  --grey: #d9d6e0;

  /* the cell scrolls; content starts at the top, clearing the floating Volver
     (top edge) + the sticky tab strip */
  display: block;
  align-items: stretch;
  justify-items: stretch; /* neutralise the base .subpage place-items:center */
  overflow-y: auto;
  overflow-x: hidden;
  text-align: left;
  padding: 0;
  scrollbar-width: thin;
}

.works {
  position: relative;
  isolation: isolate; /* local stacking context — keeps the tab/panel z-indices contained */
  width: 100%; /* fill the full cell — never shrink-wrap to content */
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- sticky filing-cabinet tab strip ---------- */
.works__tabs {
  /* desktop: in normal flow (not sticky) so each tab's z-index can interleave with
     the panel — the active tab sits IN FRONT of the panel (sharing one outline)
     while inactive tabs tuck BEHIND it. Re-stickied above the panel on mobile
     (which actually scrolls) for scroll-masking. */
  position: relative;
  top: 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
  /* clear the floating Volver (top-centre): reserve height + a little side room.
     Volver sits top-centre and the tabs are left-aligned, so they never collide
     horizontally — keep this just tall enough to sit the tabs below the button. */
  padding: clamp(40px, 6vh, 64px) clamp(0.8rem, 3vw, 2.5rem) 0;
  /* opaque page-purple fill so the sticky strip masks content scrolling beneath
     it — the stair-step tabs alone leave transparent gaps the header bled through */
  background: var(--bg);
  /* pull the panel up so the tab bottoms overlap its top edge — the tabs read as
     attached to the cabinet, not floating above it */
  margin-bottom: -3px;
  pointer-events: none; /* re-enabled on the tabs themselves */
}

/* the tab strip owns the top-left→centre, so move Volver to the top-right corner
   (clear of the tabs) and keep it above the now-opaque sticky strip */
.subpage--bottom .back-btn--up {
  z-index: 6;
  left: auto;
  right: clamp(16px, 2.5vw, 40px);
  margin-inline: 0;
}

.works__tab {
  pointer-events: auto;
  position: relative;
  /* fixed stacking order: Ilustraciones (tab-index 0) sits in front, then Posts,
     Empaques, UI/UX toward the back — never re-ordered by which tab is active */
  /* all below the panel (z5) and ordered so Ilustraciones is front-most among the
     tucked-behind tabs; the active tab overrides this to sit in front of the panel */
  z-index: calc(4 - var(--tab-index, 0));
  /* a gentle uniform overlap (cascade) with more distance than the old
     progressive overlap that crammed the right-hand tabs together */
  margin-left: -0.5rem;
  padding: clamp(0.5rem, 1.4vh, 0.85rem) clamp(1rem, 2.4vw, 2rem)
           clamp(0.75rem, 1.5vh, 1.1rem);
  border: 2.5px solid var(--f-line);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  background: var(--f-tab); /* flat fill — same colour as the folder's panel body */
  color: var(--f-tab-ink, var(--f-title));
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.9vw, 1.5rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  filter: brightness(0.9) saturate(0.92); /* inactive tabs recede behind the active one */
  transition: transform 0.18s ease, filter 0.18s ease;
}
.works__tab:first-child { margin-left: 0; } /* the leftmost tab aligns with the panel edge */
/* connection skirt: a tab-coloured tongue just below the tab. 0-height at rest
   (the -3px strip overlap already fuses the tab to the panel); it grows on hover
   to fill the gap the lift opens — so the tab rises AND stays attached. */
.works__tab::after {
  content: '';
  position: absolute;
  left: -2.5px;
  right: -2.5px;
  top: 100%;
  height: 0;
  background: var(--f-tab);
  transition: height 0.18s ease;
  pointer-events: none;
}
/* hover: an INACTIVE tab rises a little, the skirt bridging the gap (no colour
   change). The active tab never lifts — it's merged with the panel, so raising it
   would tear their shared border. */
.works__tab:not(.works__tab--active):hover { transform: translateY(-4px); }
.works__tab:not(.works__tab--active):hover::after { height: 9px; }
.works__tab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; z-index: 5; }
.works__tab--active {
  z-index: 6;   /* IN FRONT of the panel (z5): the active tab's bottom covers the panel's
                   top border, so the tab + window read as one continuous outline */
  filter: none; /* full colour; the active tab matches the panel body it flows into */
}

/* ---------- panels ---------- */
.works__panels {
  position: relative;
  flex: 1;
  margin: 0 clamp(0.8rem, 3vw, 2.5rem) clamp(0.6rem, 2vh, 1.4rem);
}

.works__panel {
  display: none;
  position: relative;
  z-index: 5; /* in front of the tucked inactive tabs (z<=4), behind the active tab (z6) */
  border: 2.5px solid var(--f-line);
  border-radius: 0 clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px);
  background: var(--f-bg);
  box-shadow: 0 22px 48px var(--f-shadow); /* follow the per-folder theme, not a fixed purple */
  overflow: hidden;
}
.works__panel--active { display: block; }

.works__panel--bg-graph-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
  background-size: clamp(40px, 4.2vw, 60px) clamp(40px, 4.2vw, 60px);
}

/* ---------- header (title + app icons, no background bar) ---------- */
.works__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: clamp(0.6rem, 1.8vh, 1.1rem) clamp(1.2rem, 3vw, 2.4rem);
  /* no title — the active tab names the folder; header only holds the tools */
}

.works__title {
  margin: 0;
  font-family: 'Jersey 10', system-ui, monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  color: var(--f-title);
}
.works__title--rounded {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
}

.works__tools {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.4vw, 14px);
  flex-shrink: 0;
}
/* identical tile treatment to the /hoja-de-vida software logos (.win__logos img):
   rounded squircle (radius ≈ 0.217 × side), object-fit:contain, and the exact
   rgba(60,40,95,.28) sticker drop-shadow — just sized in px (header is off-stage,
   not on the --u collage) */
.works__tools img {
  width: clamp(28px, 3.4vw, 48px);
  height: clamp(28px, 3.4vw, 48px);
  object-fit: contain;
  border-radius: clamp(6px, 0.74vw, 10px);
  filter: drop-shadow(0 2px 3px rgba(60, 40, 95, 0.28));
}
/* "Herramientas:" caption sitting just left of the icon tiles (row gap spaces it) */
.works__tools-label {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 2.3vw, 1.6rem);
  letter-spacing: 0.01em;
  color: var(--f-title);
  white-space: nowrap;
}
/* tiny phones: drop the label so a long title (ILUSTRACIONES) can't crowd the icons */
@media (max-width: 440px) {
  .works__tools-label { display: none; }
}

/* ---------- the --u collage stage ---------- */
.works__stage {
  position: relative;
  z-index: 1;
  /* Cap the collage width by the height the cell leaves after the tab strip +
     header (cv.css's trick: it caps at 132vh; we reserve more for the chrome
     stacked above us). Both --u and the stage height derive from this width, so
     the whole block scales to fit the viewport instead of overflowing. */
  --reserved: 17rem;
  width: min(100%, calc((100vh - var(--reserved)) * var(--stage-aspect, calc(200 / 119))));
  margin-inline: auto;
  container-type: size;
  --u: 1cqw;
  aspect-ratio: var(--stage-aspect, calc(200 / 119));
}
.works__stage--auto {
  container-type: inline-size;
  aspect-ratio: auto;
  min-height: 60cqw;
}

@media (prefers-reduced-motion: reduce) {
  .works__tab { transition: none; }
}

/* ---------- collage item base + float ---------- */
.works__item,
.works__blob,
.works__sticker,
.works__label {
  position: absolute;
  left: var(--x, 0%);
  top: var(--y, 0%);
  width: var(--w, auto);
  z-index: var(--z, 1);
  rotate: var(--rotate, 0deg);   /* tilt on the independent `rotate` channel */
  transform-origin: center;
  --floatY: -12px;
  animation: float-y 5s ease-in-out infinite;
}
.works__item--still { animation: none; }

.works__item {
  display: block;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: none; /* collage images stay still — no up/down bob (overrides the shared float) */
}
.works__media {
  display: block;
  width: 100%;
  height: auto;
  /* No own radius. The framed wrappers (sticker/window) clip via overflow:hidden
     to their *inner* radius (outer − border width); inheriting the outer radius
     rounded the image more than the border's inner curve, leaving a matte-colored
     gap at each corner. Let the clip do the rounding so it hugs the border. */
  border-radius: 0;
}

/* hover: lift + straighten upright + glow + raise (composes: translate=float,
   transform=lift, rotate=straighten) */
.works__item:hover {
  transform: translateY(-4px) scale(1.04);
  filter: brightness(1.05) drop-shadow(0 8px 20px rgba(255, 120, 210, 0.5));
  z-index: 50;
}
.works__item:not(.works__item--no-straighten):hover { rotate: 0deg; }
.works__item:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ---------- frames ---------- */
.frame--sticker {
  border-radius: var(--radius, calc(var(--u) * 1.6));
  border: calc(var(--u) * 0.3) solid var(--f-line);
  background: var(--matte, var(--f-bg));
  box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.9) 0 var(--f-shadow);
  overflow: hidden;
}
.frame--plain {
  border-radius: 0;
  background: var(--matte, #fff);
  padding: calc(var(--u) * 0.8);
}
.frame--frameless {
  background: transparent;
  filter: drop-shadow(calc(var(--u) * 0.3) calc(var(--u) * 0.5) calc(var(--u) * 0.4) rgba(40, 30, 70, 0.35));
}
.frame--window {
  border-radius: calc(var(--u) * 1.4);
  border: calc(var(--u) * 0.3) solid var(--f-line);
  background: var(--matte, #efeaf7);
  box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.9) 0 var(--f-shadow);
  overflow: hidden;
}

/* ---------- captions ---------- */
.works__caption {
  display: block;
  margin-top: calc(var(--u) * 0.6);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 500;
  font-size: calc(var(--u) * 1.8);
  color: var(--f-ink);
}
.works__caption--pixel { font-family: 'Jersey 10', system-ui, monospace; text-transform: uppercase; }
.works__caption--overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
}

/* ---------- decorative blob ---------- */
.works__blob {
  background: var(--blob-color, var(--f-accent));
  aspect-ratio: 1.15 / 1;
  animation-duration: 7s;
}
.works__blob--blob-1 { border-radius: 47% 53% 63% 37% / 42% 38% 62% 58%; }
.works__blob--blob-2 { border-radius: 62% 38% 41% 59% / 56% 47% 53% 44%; }
.works__blob--ellipse { border-radius: 50%; }

/* ---------- decorative sticker (reuse the .spark sparkle silhouette) ---------- */
.works__sticker {
  width: var(--sticker-size, calc(var(--u) * 2.4));
  aspect-ratio: 1;
  background: var(--sticker-color, #fff);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sticker-color, #fff) 70%, transparent));
}
.works__sticker--sparkle {
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.works__sticker--star {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.works__sticker--heart { border-radius: 50% 50% 0 0 / 60% 60% 0 0; rotate: 45deg; }

/* ---------- decorative label ---------- */
.works__label {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: calc(var(--u) * 2.4);
  color: var(--f-ink);
  white-space: nowrap;
  animation-duration: 6s;
}
.works__label--pixel { font-family: 'Jersey 10', system-ui, monospace; text-transform: uppercase; }

/* ---------- featured video + "Ver más" card ---------- */
.works__featured { cursor: pointer; }
.works__featured .works__media { aspect-ratio: 886 / 666; object-fit: cover; }

/* case-study QR — small framed white square on the right of the panel (static, no float) */
.works__qr {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  z-index: var(--z, 2);
  display: block;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border-radius: calc(var(--u) * 1.2);
  border: calc(var(--u) * 0.3) solid var(--f-line);
  padding: calc(var(--u) * 0.8);
  box-shadow: calc(var(--u) * 0.7) calc(var(--u) * 0.9) 0 var(--f-shadow);
}

.works__vermas {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w);
  z-index: var(--z, 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  color: var(--f-ink);
}
.works__vermas-name {
  margin: 0;
  font-family: 'Jersey 10', system-ui, monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: calc(var(--u) * 5);
  color: var(--f-title);
}
.works__vermas-blurb {
  margin: 0;
  font-weight: 500;
  font-size: calc(var(--u) * 1.9);
  line-height: 1.4;
}
.works__vermas-btn {
  align-self: start;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2.2);
  border: calc(var(--u) * 0.26) solid var(--f-title);
  border-radius: 999px;
  background: var(--f-title);
  color: #fff;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 1.9);
  cursor: pointer;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.works__vermas-btn:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); }
.works__vermas-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* UI/UX: the Párchese title + Ver más button use the brand magenta */
.works__panel[data-folder="uiux"] .works__vermas-name { color: #e4016b; }
.works__panel[data-folder="uiux"] .works__vermas-btn { background: #e4016b; border-color: #e4016b; }

@media (prefers-reduced-motion: reduce) {
  .works__item, .works__blob, .works__sticker, .works__label { animation: none; }
  .works__item:hover { transform: none; }
}

/* ---------- freeze collage floats behind an open overlay ---------- */
.works--frozen .works__item,
.works--frozen .works__blob,
.works--frozen .works__sticker,
.works--frozen .works__label { animation-play-state: paused; }

/* ---------- lightbox ---------- */
.works-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
}
.works-lightbox--open { display: grid; }

.works-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 50% 45%, rgba(60, 40, 95, 0.7), rgba(30, 20, 50, 0.88));
  backdrop-filter: blur(6px);
  animation: works-fade 0.3s ease both;
}
.works-lightbox__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  width: min(92vw, 1100px);
  max-height: 88vh;
  animation: works-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.works-lightbox__stage {
  flex: 1;
  display: grid;
  place-items: center;
  min-width: 0;
}
.works-lightbox__stage img,
.works-lightbox__stage video {
  max-width: 100%;
  max-height: 88vh;
  border-radius: clamp(10px, 1.4vw, 18px);
  border: 3px solid #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.works-lightbox__close {
  position: absolute;
  top: clamp(-46px, -5vh, -10px);
  right: 0;
  width: clamp(36px, 4vw, 48px);
  height: clamp(36px, 4vw, 48px);
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}
.works-lightbox__nav {
  flex-shrink: 0;
  width: clamp(40px, 5vw, 60px);
  height: clamp(40px, 5vw, 60px);
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}
.works-lightbox__nav:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.25); }
.works-lightbox__close:focus-visible,
.works-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes works-fade { from { opacity: 0; } to { opacity: 1; } }
/* used by the lightbox panel (and only here — the collage entrance is JS/WAA) */
@keyframes works-pop { 0% { opacity: 0; scale: 0.9; } 100% { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .works-lightbox__backdrop, .works-lightbox__panel { animation: none; }
}

/* ---------- case-study mode ---------- */
.works-lightbox--case .works-lightbox__panel { display: block; }
/* case mode = a big card, so sit the close on its top-right corner (not floating above) */
.works-lightbox--case .works-lightbox__close { top: clamp(12px, 1.6vw, 18px); right: clamp(12px, 1.6vw, 18px); }
.works-case {
  width: min(92vw, 1100px);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: #fdf7ea;
  border-radius: clamp(12px, 1.6vw, 22px);
  border: 3px solid #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.works-case__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin-bottom: clamp(1rem, 2.5vw, 2rem);
  padding-right: clamp(40px, 5vw, 56px); /* clear the top-right close button */
}
.works-case__text { min-width: 0; }
.works-case__name {
  margin: 0 0 0.4em;
  font-family: 'Jersey 10', system-ui, monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4rem);
  color: #e4016b;
}
.works-case__blurb {
  margin: 0;
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: #2a2630;
  max-width: 60ch;
}
.works-case__shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(0.8rem, 2vw, 1.5rem);
}
.works-case__shots img {
  width: 100%;
  border-radius: 10px;
  box-shadow: none; /* override the stage-img shadow that leaks onto the nested case shots */
}
.works-case__qr {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  text-decoration: none;
  color: #e4016b;
  font-family: 'Jersey 10', system-ui, monospace;
  text-transform: uppercase;
  font-size: clamp(1rem, 2vw, 1.4rem);
}
.works-case__qr img { width: clamp(120px, 18vw, 180px); border-radius: 8px; box-shadow: none; }

/* ---------- narrow screens: tab row + stacked collage ---------- */
@media (max-width: 760px) {
  .works__tabs {
    position: sticky; /* mobile scrolls — re-stick + raise above the panel to mask content */
    padding: clamp(48px, 11vh, 72px) 0.6rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    z-index: 5;
  }
  .works__panel { z-index: 0; }
  .works__tab {
    margin-left: 0;
    margin-bottom: 0;
    flex-shrink: 0;
    font-size: clamp(0.8rem, 3.4vw, 1.1rem);
  }
  .works__tab--active { transform: none; }

  .works__panels { margin: 0 0.6rem 1.5rem; }
  .works__header { clip-path: none; padding: 0.8rem 1rem; }
  .works__title { font-size: clamp(1.5rem, 7vw, 2.4rem); }

  /* the --u collage drops to a plain vertical stack (cv.css's mobile flip) */
  .works__stage,
  .works__stage--auto {
    container-type: normal;
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.2rem 1rem;
    --u: clamp(7px, 2.7vw, 12px);
  }
  .works__item,
  .works__blob,
  .works__sticker,
  .works__label,
  .works__featured,
  .works__vermas,
  .works__qr {
    position: static;
    left: auto; top: auto;
    width: 100%;
    rotate: 0deg;
  }
  .works__qr { width: clamp(120px, 40vw, 170px); align-self: center; }
  .works__blob,
  .works__sticker { display: none; }         /* backdrop decorations make no sense in a stack */
  .works__vermas { width: 100%; }

  .works-lightbox__panel { width: 94vw; }
  .works-lightbox__close { top: -42px; }
}

@media (prefers-reduced-motion: reduce) {
  .works__featured .works__media { animation: none; }
  .works__vermas-btn, .works-lightbox__nav { transition: none; }
}