/* ============================================================
   Archivo variable — servida desde el propio sitio.
   Los mismos tres subconjuntos que traia el diseno original, ya
   embebidos, para que la tipografia no dependa de Google Fonts:
   sin conexion tambien se ve con los anchos correctos (wdth 62-125).
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Alexis Ramos - portfolio
   Design tokens taken from the approved design system
   (Archivo variable · #292929 / #FF7247 / #C3D8C5)
   ============================================================ */

:root {
  --bg:        #292929;
  --panel:     #242424;
  --media:     #1F1F1F;
  --ink:       #EFF3EF;
  --ink-muted: #A8ADA8;
  --ink-dim:   #7E827E;
  --ink-faint: #4E524E;
  --line:      #464646;
  --line-soft: #3A3A3A;
  --accent:    #FF7247;
  --sage:      #C3D8C5;

  --pad-x: 48px;
  --bleed: 20px;
  --side-w: 340px;
  --header-h: 72px;

  --ease: cubic-bezier(.2,.7,.3,1);
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

img { max-width: 100%; }

/* ---------- shared type roles ---------- */

.eyebrow {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.eyebrow--accent { color: var(--accent); }

/* ---------- header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(41,41,41,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  min-height: 64px;
  padding: 0 var(--pad-x);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
}

/* wordmark direction A - viewfinder brackets */
.viewfinder {
  position: relative;
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
}
.viewfinder i {
  position: absolute;
  width: 6px;
  height: 6px;
  border: 0 solid var(--accent);
}
.viewfinder i:nth-child(1) { left: 0;  top: 0;    border-left-width: 2px;  border-top-width: 2px; }
.viewfinder i:nth-child(2) { right: 0; top: 0;    border-right-width: 2px; border-top-width: 2px; }
.viewfinder i:nth-child(3) { left: 0;  bottom: 0; border-left-width: 2px;  border-bottom-width: 2px; }
.viewfinder i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

.wordmark__text {
  font-stretch: 125%;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.wordmark__text b { color: var(--accent); font-weight: inherit; }

.hdr__back {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-left: 8px;
}

.hdr__spacer { flex: 1; }

.hdr__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.lang [aria-current="true"] { color: var(--ink); }
.lang i { color: var(--ink-faint); font-style: normal; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--accent); color: var(--ink); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink-muted); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: var(--ink); color: var(--bg); }

/* ---------- work layout ---------- */

.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  grid-template-areas:
    "head side"
    "hero side"
    "body side";
  column-gap: var(--bleed);
  align-items: start;
  padding: var(--bleed) var(--bleed) 0;
}

.work__head { grid-area: head; min-width: 0; }
.work__hero { grid-area: hero; min-width: 0; }
.work__body { grid-area: body; min-width: 0; }

/* the sidebar column must span the full height of the media column,
   otherwise `position: sticky` on .side has nowhere to travel */
.work__side { grid-area: side; align-self: stretch; }

/* ---------- piece header ---------- */

.piece-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 6px 0 20px;
}
.piece-head__idx { flex: 0 0 auto; }
.piece-head h1 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 52px);
  line-height: .98;
  letter-spacing: -.032em;
}
.piece-head__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  min-width: 20px;
}
.piece-head__cat {
  flex: 0 0 auto;
  white-space: nowrap;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- media blocks ---------- */

figure { margin: 0; }

.shot {
  position: relative;
  background: var(--media);
  overflow: hidden;
  line-height: 0;
}
/* no forced ratio — each <img> carries its own width/height attributes, so the
   browser reserves the correct box and nothing gets cropped or shifts on load */
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- expand-to-fullscreen affordance ---------- */
/* the button covers the whole image (click anywhere, like ArtStation)
   but only paints the corner icon. */

.shot__zoom {
  position: absolute;
  inset: 0;
  padding: 0;
  display: block;
  cursor: zoom-in;
  background: transparent;
}

.shot__zoom span {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: rgba(24,24,24,.72);
  border: 1px solid rgba(239,243,239,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              background .2s var(--ease), border-color .2s var(--ease);
}
.shot__zoom span svg { width: 15px; height: 15px; display: block; }

.shot:hover .shot__zoom span,
.shot__zoom:focus-visible span { opacity: 1; transform: none; }
.shot__zoom:hover span { background: var(--accent); border-color: var(--accent); }

/* touch devices get no hover, so the icon stays visible */
@media (hover: none) {
  .shot__zoom span { opacity: 1; transform: none; }
}

/* ---------- lightbox ---------- */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop { background: #161616; }

.lightbox__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 64px 72px 96px;
}
.lightbox__stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 76px 22px;
  background: linear-gradient(to top, rgba(20,20,20,.96), rgba(20,20,20,0));
}
.lightbox__count {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  flex: 0 0 auto;
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(239,243,239,.22);
  background: rgba(24,24,24,.6);
  color: var(--ink);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.lb-btn:hover { background: var(--accent); border-color: var(--accent); }
.lb-btn svg { width: 16px; height: 16px; display: block; }
.lb-btn--close { top: 18px; right: 18px; }
.lb-btn--prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lb-btn--next  { right: 18px; top: 50%; transform: translateY(-50%); }

figcaption {
  margin: 18px 0 0;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}
figcaption em {
  display: block;
  font-style: normal;
  margin-top: 12px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.block { margin-bottom: 44px; }
.block:last-child { margin-bottom: 0; }

/* section rule between chapters of the write-up */
.chapter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px 0 24px;
}
.chapter__rule { flex: 1; height: 1px; background: var(--line-soft); }

/* ---------- marmoset viewer card ---------- */

.viewer {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 44px;
}
.viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.viewer__state {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.viewer__poster {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--media);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.viewer__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .3;
}
.viewer__cta { position: relative; text-align: center; padding: 24px; }
.viewer__note {
  margin-top: 16px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* loading + live states */
.viewer__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--media);
  display: grid;
  place-items: center;
}
.viewer__stage > canvas,
.viewer__stage > div { max-width: 100%; }
.spinner {
  width: 34px;
  height: 34px;
  border: 2px solid var(--line-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  margin: 0 auto 18px;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.viewer__msg {
  text-align: center;
  padding: 24px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.viewer__msg small {
  display: block;
  margin-top: 10px;
  font-stretch: 100%;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
}
[hidden] { display: none !important; }

/* ---------- sidebar ---------- */

.side {
  position: sticky;
  top: calc(var(--header-h) + var(--bleed));
  align-self: start;
  border: 1px solid var(--line);
  background: var(--panel);
}
.side__sec { padding: 22px; border-bottom: 1px solid var(--line-soft); }
.side__sec:last-child { border-bottom: 0; }
.side__sec--lead { padding: 24px 22px; }

.side__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.badge {
  border: 1px solid #6A6E6A;
  padding: 3px 8px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.side h2 {
  margin: 0 0 6px;
  font-stretch: 112%;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.16;
  letter-spacing: -.02em;
}
.side__role {
  margin: 0 0 14px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.side p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.side__label {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip-sw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  padding: 7px 10px;
  font-size: 13px;
}
.chip-sw i {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink-faint);
  display: grid;
  place-items: center;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 8px;
  font-style: normal;
  color: var(--accent);
}

.chip-tag {
  border: 1px solid var(--line);
  color: var(--ink-muted);
  padding: 6px 10px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.share { display: flex; gap: 8px; }
.share .btn { flex: 1; padding: 11px 8px; font-size: 10px; letter-spacing: .12em; }
.side__hire { margin-top: 8px; width: 100%; padding: 13px 16px; }

/* ---------- more by ---------- */

.more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.more__head h2 {
  margin: 0;
  font-stretch: 112%;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
}
.more__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--media);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.tile:hover { border-color: var(--accent); }
.tile__hatch {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(239,243,239,.022) 0 2px, transparent 2px 9px);
}
.tile__idx {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 34px;
  color: #343434;
}
.tile__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: linear-gradient(to top, rgba(24,24,24,.94), rgba(24,24,24,0) 70%);
  opacity: 0;
  transition: opacity .22s var(--ease);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.2;
}
.tile:hover .tile__label,
.tile:focus-visible .tile__label { opacity: 1; }

/* ---------- footer ---------- */

.ftr { margin-top: 88px; border-top: 1px solid var(--line-soft); }
.ftr__in {
  padding: 40px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.ftr__copy {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ftr__links { display: flex; gap: 18px; }
.ftr__links a {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- responsive ---------- */
/* brief section 6: below the two-column breakpoint the sidebar becomes a
   block under the hero, ahead of the rest of the images. */

@media (max-width: 1023px) {
  .work {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "hero" "side" "body";
    row-gap: var(--bleed);
  }
  .side { position: static; }
  .more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; --bleed: 14px; }
  .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lightbox__stage { padding: 60px 12px 92px; }
  .lb-btn--prev { left: 10px; }
  .lb-btn--next { right: 10px; }
  .piece-head { flex-wrap: wrap; gap: 10px; }
  .piece-head__rule { display: none; }
  .hdr__back .long { display: none; }
  .lang { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   LANDING + CASE STUDY
   Desktop is the reference layout. Mobile refinement is deferred.
   ============================================================ */

.hdr.is-scrolled { background: rgba(41,41,41,.94); }

.hdr__nav { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; margin-left: 12px; }
.hdr__nav a {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }

main > section { padding: 104px var(--pad-x) 0; }
main > section:first-child { padding-top: 88px; }

.sec-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 36px; }
.sec-head h2 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 40px);
  letter-spacing: -.03em;
}

/* ---------- hero ---------- */

.hero__h {
  margin: 18px 0 0;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(38px, 6.4vw, 104px);
  line-height: .95;
  letter-spacing: -.038em;
}
.hero__dot { color: var(--accent); }
.hero__sub {
  margin: 26px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.hero__note {
  margin: 14px 0 0;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- about ---------- */

.about { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
.about__portrait { aspect-ratio: 4 / 5; }
.about__body p { margin: 0 0 18px; font-size: 16px; line-height: 1.65; color: var(--ink-muted); }

.metrics { margin-top: 64px; display: grid; gap: 40px; }
.metrics__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  margin-top: 14px;
}
.metrics__row--time { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric { background: var(--bg); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.metric__v {
  font-stretch: 125%;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.03em;
}
.metric--time .metric__v { font-size: 64px; color: var(--accent); }
.metric__l { font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); }
.metric__l em { font-style: italic; }

/* ---------- case study cards ---------- */

.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bleed); }
.case-card {
  display: block;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.case-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.case-card__cover { display: block; aspect-ratio: 1 / 1; width: 100%; max-width: 1024px; margin-inline: auto; }
.case-card__body { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; }
.case-card__title {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -.024em;
  color: var(--ink);
}
.case-card__line { font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }
.case-card__cta {
  margin-top: 6px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- gallery ---------- */

.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.filters__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-filter {
  border: 1px solid var(--line);
  color: var(--ink-muted);
  padding: 9px 15px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.chip-filter:hover { border-color: var(--ink); color: var(--ink); }
.chip-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.filters__count {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gallery__empty { margin-top: 28px; font-size: 15px; color: var(--ink-muted); }
.linkish { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  border: 1px solid rgba(239,243,239,.5);
  background: rgba(24,24,24,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 3px 8px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.tile__label { flex-direction: column; gap: 4px; z-index: 2; }
.tile__title { font-stretch: 112%; font-weight: 700; font-size: 12.5px; line-height: 1.2; }
.tile__cat {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---------- capabilities ---------- */

.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }

/* ---------- experience ---------- */

.jobs { border-top: 1px solid var(--line-soft); }
.job { border-bottom: 1px solid var(--line-soft); }
.job summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.job summary::-webkit-details-marker { display: none; }
.job summary:hover .job__role { color: var(--accent); }
.job__role {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.015em;
  transition: color .18s var(--ease);
}
.job__co { font-size: 14px; color: var(--ink-muted); }
.job__dates {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.job ul { margin: 0 0 24px; padding: 0 0 0 58px; list-style: none; }
.job li {
  position: relative;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  padding: 0 0 8px 16px;
}
.job li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 1px; background: var(--accent); }
.job__cv {
  display: inline-block;
  margin-top: 26px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- contact ---------- */

#contact { margin-top: 112px; background: var(--sage); color: var(--bg); padding: 80px var(--pad-x); }
.contact { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
#contact .eyebrow { color: #4B6250; }
.contact__h {
  margin: 14px 0 18px;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 76px);
  line-height: .96;
  letter-spacing: -.035em;
}
.contact__meta { margin: 0; font-size: 15.5px; line-height: 1.7; color: #37503C; }
.contact__meta a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.contact__meta a:hover { color: #A8391A; }
.contact__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--dark { background: var(--bg); color: var(--sage); }
.btn--dark:hover { background: #A8391A; color: #fff; }
.btn--outline-dark { border: 1px solid rgba(41,41,41,.45); color: var(--bg); }
.btn--outline-dark:hover { border-color: var(--bg); }

/* ---------- placeholder media ---------- */

.shot--empty {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--media);
  border: 1px solid var(--line-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.shot--empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(239,243,239,.022) 0 2px, transparent 2px 9px);
}
.shot__ph {
  position: relative;
  line-height: normal;   /* .shot lo pone en 0 y apilaba las lineas */
  font-stretch: 125%;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-faint);
  text-align: center;
  padding: 16px;
}

.more { margin-top: 72px; }

/* ══════════════════════════════════════════════════════════════════════════
   Migrated from the Claude Design version. Additive only — no token, type
   or navigation rule above this line is touched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- brand mark ---------- */

.wordmark__mark { width: 30px; height: 19px; display: block; flex: 0 0 auto; }

/* ---------- hero ---------- */

.hero__where { margin-left: 18px; color: var(--ink-dim); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: end;
  margin-top: 52px;
}
.hero__grid .hero__sub { margin: 0; font-size: 17px; line-height: 1.62; }
.hero__grid .hero__cta { margin: 0; flex: 0 0 auto; flex-wrap: nowrap; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero__grid .hero__cta { flex-wrap: wrap; }
}

/* ---------- showreel ---------- */

.showreel { padding: 0 var(--bleed); margin-top: 8px; }
.showreel__v {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--media);
  border: 1px solid var(--line-soft);
}

/* ---------- about ---------- */

.about-wrap { max-width: 1080px; margin: 0 auto; }
.about { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.75fr); }
.about__fig { margin: 0; }
.about__fig figcaption { margin-top: 12px; }
.about__name {
  margin: 0 0 10px;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ink);
}
.about__tag {
  margin: 0 0 26px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.about__body p {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink);
  text-align: justify;
}
.about__body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .about__fig { max-width: 300px; }
}

/* ---------- metrics: two columns on one vertical centre axis ----------
   The rule between them must span the whole row, so the columns stay
   stretched and the CONTENT is centred inside each one. */

.metrics {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 2fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.metrics__col { display: flex; flex-direction: column; justify-content: center; padding: 32px 0 32px 40px; }
.metrics__col--time { border-right: 1px solid var(--line); padding: 32px 40px 32px 0; }
.metrics__inner { display: block; }
.metrics__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.side__label--dim { color: var(--ink-faint); }

.metrics .metric { background: none; padding: 0; }
.metrics .metric--time { display: block; margin-bottom: 24px; }
.metrics .metric--time:last-child { margin-bottom: 0; }
.metrics .metric--time .metric__v { font-size: clamp(38px, 3.8vw, 58px); line-height: .86; letter-spacing: -.04em; color: var(--accent); }
.metrics .metric--time .metric__l { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.42; max-width: 24ch; }

.metrics__col:not(.metrics__col--time) .metric {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.metrics__col:not(.metrics__col--time) .metric__v { font-size: 19px; line-height: 1; color: var(--accent); }
.metrics__col:not(.metrics__col--time) .metric__l { font-size: 15px; line-height: 1.45; color: var(--ink); }
.metrics__col:not(.metrics__col--time) .metric__l em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-dim);
  margin-top: 2px;
}
@media (max-width: 900px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metrics__col--time { border-right: 0; padding: 28px 0 6px; }
  .metrics__col { padding: 6px 0 28px; }
}

/* ---------- capabilities ---------- */

.caps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--line-soft);
  align-items: stretch;
}
.caps__group { padding: 32px 36px; border-right: 1px solid var(--line-soft); }
.caps__group:first-child { padding-left: 0; }
.caps__group--last { border-right: 0; padding-right: 0; }
.caps__list { list-style: none; margin: 16px 0 0; padding: 0; }
.caps__list li {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
.caps__list li em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

.sw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sw { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.25; color: var(--ink); }
.sw i {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sw i img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 1000px) {
  .caps { grid-template-columns: minmax(0, 1fr); }
  .caps__group { border-right: 0; border-top: 1px solid var(--line-soft); padding: 26px 0; }
  .caps__group:first-child { border-top: 0; }
}
@media (max-width: 640px) { .sw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- software chip on work pages ---------- */

.chip-sw i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-size: 0;
}
.chip-sw i img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- video / model embeds ---------- */

.media { position: relative; background: var(--media); border: 1px solid var(--line-soft); }
.media__frame { position: relative; aspect-ratio: 16 / 9; }
.media__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.media__poster { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.media__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El poster es el boton: toda la superficie abre el video, y no se carga
   ningun reproductor hasta que el visitante lo pide. */
button.media__poster {
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--media);
  color: inherit;
  cursor: pointer;
  overflow: hidden;
}
/* un velo corto, para que el icono se lea sobre cualquier fotograma */
button.media__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .30);
  transition: background .22s var(--ease);
}
button.media__poster:hover::after,
button.media__poster:focus-visible::after { background: rgba(0, 0, 0, .14); }

.media__play {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  transition: transform .24s var(--ease);
}
.media__play svg { width: 26px; height: 26px; display: block; margin-left: 3px; }
button.media__poster:hover .media__play,
button.media__poster:focus-visible .media__play { transform: scale(1.09); }

@media (prefers-reduced-motion: reduce) {
  button.media__poster:hover .media__play,
  button.media__poster:focus-visible .media__play { transform: none; }
}

/* ---------- ArtStation Marmoset viewer ---------- */

.viewer__poster img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.viewer__stage { aspect-ratio: 16 / 9; }
.viewer__stage iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   Rectificación contra el diseño original (markup recuperado del .dc.html).
   Cada valor de aquí abajo sale de la fuente, no de una aproximación.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- ritmo vertical de las secciones ---------- */
/* original: hero 96px · about 104px · el resto 112px */

main > section { padding: 112px var(--pad-x) 0; }
main > section:first-child { padding-top: 96px; }
main > section#about { padding-top: 104px; }

/* ---------- cabecera de sección ---------- */
/* original: gap 24px · h2 clamp(28,3.3vw,46)/1/-.025em · índice 11.5px */

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px 24px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
}
.sec-head--wrap { flex-wrap: wrap; }
.sec-head h2 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1;
  letter-spacing: -.025em;
}
.sec-head__idx { font-size: 11.5px; letter-spacing: .2em; flex: 0 0 auto; }
.sec-head__rule { flex: 1; height: 1px; background: var(--line); min-width: 20px; }
.sec-head__note {
  flex: 0 0 auto;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
/* About es la única con aire grande bajo la cabecera */
#about .sec-head { margin-bottom: 56px; }
/* el resto abre su contenido a 44px */
#case-studies .cases,
#capabilities .caps,
#experience .jobs { margin-top: 44px; }
#gallery .filters { margin-top: 44px; }

/* ---------- hero ---------- */

.hero__eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px 24px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.hero__eyebrow .eyebrow { font-size: 11.5px; letter-spacing: .2em; }
.hero__rule { flex: 1; height: 1px; background: var(--line); min-width: 20px; }
.hero__where {
  margin-left: 0;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
}
.hero__h {
  margin: 0;
  font-size: clamp(40px, 5.9vw, 88px);
  line-height: .98;
  letter-spacing: -.032em;
  max-width: 19ch;
}
.hero__grid { padding-bottom: 64px; }
.hero__grid .hero__sub { color: var(--ink-muted); }

/* botones del hero: 15px 24px / 12px, no los 12px 18px / 11px del botón base */
.hero__cta .btn { padding: 15px 24px; font-size: 12px; gap: 10px; }
.hero__cta .btn--primary { background: var(--ink); color: var(--bg); }
.hero__cta .btn--primary:hover { background: var(--accent); color: var(--ink); }
.hero__cta .btn--ghost { border-color: #6A6E6A; color: var(--ink); }
.hero__cta .btn--ghost:hover { border-color: var(--ink); background: rgba(239,243,239,.07); }

/* el showreel se apoya en el padding-bottom del hero, sin margen propio */
.showreel { margin-top: 0; }

/* ---------- capabilities ---------- */
/* original: etiqueta 22px de aire · filas 12px 0 · texto 15.5px/1.4 */

.caps__group .side__label { margin-bottom: 22px; }
.caps__list { margin-top: 0; }
.caps__list li { padding: 12px 0; font-size: 15.5px; line-height: 1.4; }
.caps__list--lang li em {
  display: block;
  margin-top: 4px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* las fichas de software son fichas con borde, no logo suelto */
.sw-grid { margin-top: 0; }
.sw {
  gap: 12px;
  border: 1px solid var(--line-soft);
  padding: 11px 13px;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.sw:hover { border-color: #6A6E6A; background: var(--panel); }
.sw b { font-weight: 400; font-size: 14px; line-height: 1.25; }

/* ---------- experience ---------- */
/* original: filete superior #464646 · filas 24px · rol clamp(17,1.5vw,22) */

.jobs { border-top-color: var(--line); }
.job summary { padding: 24px 0; gap: 8px 20px; }
.job__role {
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.18;
  letter-spacing: -.015em;
}
.job__co { font-size: 14.5px; line-height: 1.4; color: var(--ink-muted); }

/* ---------- barra de título del proyecto ---------- */
/* original: índice 11px/.2em naranja */

.piece-head__idx { font-size: 11px; letter-spacing: .2em; }

/* el nombre y el rol los pisaba `.about__body p` por especificidad */
.about__body p.about__name {
  margin: 0 0 10px;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ink);
  text-align: left;
}
.about__body p.about__tag {
  margin: 0 0 26px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════════════════
   Segunda pasada: valores tomados del DOM renderizado del diseno anterior
   (Site/_build/referencia/diseno-anterior.html). Header, footer, galeria,
   tarjetas de case study y contacto.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- header ---------- */

.hdr { background: rgba(31,31,31,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.hdr__in {
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 68px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.wordmark { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.wordmark__text { font-stretch: 125%; font-weight: 700; font-size: 16px; letter-spacing: .01em; white-space: nowrap; }
.hdr__nav { display: flex; align-items: center; justify-content: center; gap: 26px; flex: 1 1 auto; }
.hdr__nav a {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #8F938F;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.hdr__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.hdr__spacer { display: none; }

.lang { display: flex; border: 1px solid var(--line); }
.lang button {
  padding: 7px 11px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  background: transparent;
  color: #8F938F;
  border: 0;
  cursor: pointer;
}
.lang button + button { border-left: 1px solid var(--line); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.btn--cv {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: var(--bg);
  padding: 11px 18px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.btn--cv:hover { background: var(--accent); color: var(--ink); }

/* barra de progreso de lectura bajo el header */
.hdr__progress { height: 2px; background: var(--accent); width: 0; transition: width .1s linear; }

/* ---------- galeria ---------- */

.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.chip-filter {
  padding: 10px 15px;
  font-size: 11px;
  letter-spacing: .14em;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
}
.chip-filter i { margin-left: 9px; font-stretch: 100%; font-style: normal; font-size: 10.5px; letter-spacing: 0; opacity: .6; }
.chip-filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.filters__count {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* Seis por hilera fijas en escritorio: con 16 proyectos quedan tres
   hileras exactas (6 + 6 + 4). Antes era auto-fill, asi que el numero de
   columnas cambiaba solo segun el ancho de la ventana. */
.gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }

@media (max-width: 1400px) { .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 940px)  { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px)  { .gallery { grid-template-columns: minmax(0, 1fr); } }

.tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--media);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: border-color .2s;
}
.tile__badge {
  position: absolute;
  right: 9px;
  top: 9px;
  background: var(--bg);
  border: 1px solid #6A6E6A;
  color: var(--ink);
  padding: 4px 8px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.tile__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(24,24,24,.94) 0%, rgba(24,24,24,.72) 42%, rgba(24,24,24,0) 100%);
  opacity: 0;
  transition: opacity .22s;
}
.tile:hover .tile__label, .tile:focus-visible .tile__label { opacity: 1; }
.tile__title { font-stretch: 112%; font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ink); }
.tile__cat {
  margin-top: 7px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- tarjetas de case study ---------- */

.case-card__cover { position: relative; }
.case-card__ghost {
  position: absolute;
  left: 14px;
  top: 14px;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px #3F3F3F;
}
.case-card__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255,114,71,.16), transparent 60%);
  opacity: 0;
  transition: opacity .22s;
}
.case-card:hover .case-card__wash { opacity: 1; }
.case-card__body { padding: 26px 26px 28px; gap: 0; }
.case-card__role {
  align-self: flex-start;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 9px;
  margin-bottom: 16px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.case-card__title { margin-bottom: 12px; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.12; letter-spacing: -.02em; }
.case-card__line { margin-bottom: 20px; font-size: 15.5px; line-height: 1.55; }

/* ---------- footer ---------- */

.ftr { background: var(--bg); border-top: 1px solid var(--line-soft); }
.ftr__in {
  max-width: none;
  margin: 0 auto;
  padding: 52px var(--pad-x) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
}
.ftr__mark { position: relative; display: inline-block; padding: 16px 20px; }
.ftr__mark > span[aria-hidden]:first-child {
  position: absolute; left: 0; top: 0; width: 16px; height: 16px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
}
.ftr__mark > span[aria-hidden]:nth-child(2) {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
}
.ftr__name {
  display: block;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: .9;
  letter-spacing: -.035em;
}
/* El filete de arriba separaba el rol del nombre grande del pie. Al quitar
   ese nombre la linea quedaba colgando sola, asi que se va con el. */
.ftr__role {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  max-width: 44ch;
}
.ftr__right { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.ftr__links { display: flex; gap: 22px; flex-wrap: wrap; }
.ftr__links a {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.ftr__links a:hover { color: var(--accent); }
.ftr__copy {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: right;
}
@media (max-width: 760px) {
  .ftr__in { grid-template-columns: minmax(0, 1fr); }
  .ftr__right { align-items: flex-start; }
  .ftr__copy { text-align: left; }
}

/* ---------- contacto: la unica seccion clara ---------- */

main > section#contact {
  margin-top: 112px;
  padding: 0;
  background: var(--sage);
  color: var(--bg);
}
.contact__in { max-width: none; margin: 0 auto; padding: 88px var(--pad-x); }
.sec-head--dark { margin-bottom: 44px; }
.sec-head--dark .sec-head__idx { color: #B0432A; }
.sec-head--dark h2 { color: var(--bg); }
.sec-head--dark .sec-head__rule { background: rgba(41,41,41,.25); }
.sec-head--dark .sec-head__note { color: var(--bg); font-weight: 700; }

.contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.contact__h {
  margin: 0 0 34px;
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: 1.16;
  letter-spacing: -.02em;
  max-width: 26ch;
  color: var(--bg);
}
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__actions .btn { padding: 17px 26px; font-size: 12px; gap: 10px; }
.btn--dark { background: var(--bg); color: var(--ink); }
.btn--outline-dark { border: 1px solid var(--bg); color: var(--bg); }

.contact__meta { margin: 0; display: grid; gap: 0; }
.contact__meta > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-top: 1px solid rgba(41,41,41,.22); }
.contact__meta dt {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(41,41,41,.62);
}
.contact__meta dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--bg); }
.contact__meta a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .contact__meta > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* la regla de la pasada 1 pisaba el margen del original */
#gallery .filters { margin-top: 40px; }

/* ---------- tags enlazados a la busqueda de ArtStation ---------- */
/* el original los sirve como enlaces con prefijo # y hover */

.chip-tag--link {
  display: inline-block;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  padding: 6px 10px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.chip-tag--link:hover { border-color: var(--accent); color: var(--accent); }

/* el boton de pantalla completa indica que amplia */
.shot__zoom { cursor: zoom-in; }

/* ══════════════════════════════════════════════════════════════════════════
   Tercera pasada. Siete puntos medidos contra el DOM del diseno original
   (_build/referencia/): barra de menu, EN/ES, retrato, scroll del panel
   lateral, insignia VR de la galeria y remate del pie.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1 · barra de menu: dos estados, como el original ----------
   En reposo mide 84 px, el fondo es tenue y no lleva filete.
   Al bajar se encoge a 68 px, el fondo se cierra y aparece el filete.
   Lo que habia estaba invertido: el estado denso salia desde arriba. */

.hdr {
  background: rgba(41,41,41,.55);
  border-bottom-color: transparent;
  transition: background .28s var(--ease), border-color .28s var(--ease);
}
.hdr__in { height: 84px; transition: height .28s var(--ease); }

.hdr.is-scrolled { background: rgba(31,31,31,.92); border-bottom-color: var(--line); }
.hdr.is-scrolled .hdr__in { height: 68px; }

/* el menu arranca justo despues del logo, sin los 12 px de sobra */
.hdr__nav { margin-left: 0; }

/* enlace de vuelta en proyectos y casos */
.hdr__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 0;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hdr__back i { font-style: normal; font-stretch: 100%; font-size: 14px; }

/* ---------- 2 · EN / ES ----------
   Las dos casillas van pegadas, separadas solo por el filete interno.
   Una regla vieja les metia 6 px de aire y corria el bloque. */

.lang { gap: 0; }

/* la flecha del boton de CV va en ancho normal y 13 px: es la que da
   su altura real al boton (36 px, no 34) */
.btn--cv i { font-style: normal; font-stretch: 100%; font-size: 13px; }

/* ---------- 3 · retrato de About ----------
   El marco lo estaba aplanando el 16:9 de los huecos vacios. */

.about { gap: 64px; }
.about__portrait { aspect-ratio: 4 / 5; }
.about__fig figcaption {
  margin: 12px 0 0;
  line-height: normal;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- 4 · panel lateral de proyecto: se desplaza solo ----------
   Se queda fijo a 110 px del borde y, cuando la lista de etiquetas es mas
   alta que la pantalla, se desplaza dentro de su propia caja sin arrastrar
   la pagina. */

.side {
  top: 110px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-faint) var(--panel);
  margin-right: var(--bleed);
}
.side::-webkit-scrollbar { width: 8px; }
.side::-webkit-scrollbar-track { background: var(--panel); }
.side::-webkit-scrollbar-thumb { background: var(--ink-faint); }

/* la columna de medios llega hasta el filo, como en el original:
   1085 px de ancho con 20 px de aire interior */
.work { column-gap: 0; padding: var(--bleed) 0 0; }
.work__head, .work__hero, .work__body { padding: 0 var(--bleed); }

/* ---------- 5 · insignia VR de la galeria ----------
   Va arriba a la derecha. Una regla vieja la anclaba a la izquierda
   y le ponia un desenfoque que el original no lleva. */

.tile__badge {
  left: auto;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- 6 · pie ----------
   En la portada el pie sigue de inmediato al bloque verde de contacto:
   los 88 px de aire son solo para proyectos y casos. */

.ftr--flush { margin-top: 0; }

/* En las paginas de caso el bloque "Next case study" ya cierra con su propio
   filete. El pie caia 88px mas abajo y traia otro filete encima, asi que se
   veian dos lineas con un hueco negro en medio. Pegado y sin su borde, entre
   el bloque y el pie queda una sola linea. */
.ftr--seam { border-top: 0; }

@media (max-width: 900px) {
  .side { position: static; max-height: none; overflow-y: visible; margin-right: 0; }
  .work { padding: var(--bleed); }
  .work__head, .work__hero, .work__body { padding: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Cuarta pasada — CASE STUDIES.
   Ni las tarjetas de la portada ni las paginas de caso habian pasado por
   la verificacion contra el diseno original. Aqui van los dos.
   Cada valor sale de un elemento medido en _build/referencia/.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- tarjetas de la portada ----------
   Medidas contra la seccion "Case Studies" del original (tpl 109-129). */

.cases { gap: 28px; }

/* el original no levanta la tarjeta: solo cambia filete y fondo */
.case-card { transition: border-color .22s var(--ease), background .22s var(--ease); }
.case-card:hover { transform: none; }

.case-card__cover {
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid var(--line-soft);
}

.case-card__role { align-self: flex-start; }

.case-card__line { max-width: 46ch; color: var(--ink-muted); }

.case-card .chips { margin-bottom: 24px; }
.case-card .chip-tag { font-size: 10.5px; }

/* "Read case study" va subrayado en naranja, no en naranja */
.case-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--accent);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
}
.case-card__cta i { font-style: normal; font-stretch: 100%; font-size: 13px; color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════
   Quinta pasada — PAGINA DE CASO, copiada de la pantalla "Case study" del
   diseno original (Site/_build/referencia/velurun-guardado.html, tpl 255-338).
   Todo lo que habia antes en esta seccion era invencion mia y queda anulado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- banner 21:9 ---------- */

/* el ritmo de secciones de la portada no debe alcanzar a la pagina de caso:
   `main > section:first-child` le metia 96px de aire sobre el banner */
.case > .case__herowrap { padding: 0 var(--bleed); }
.case > .case__intro { padding: 56px var(--pad-x) 0; }
.case__hero {
  aspect-ratio: 21 / 9;
  margin: 0;
  max-width: none;
}
.case__inset { position: absolute; inset: 18px; border: 1px solid rgba(255,114,71,.18); }
.case__heroph { padding: 24px; font-size: clamp(18px, 2.2vw, 30px); }
.case__heronote {
  display: block;
  margin-top: 12px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- cabecera del caso ---------- */

.case__intro { padding: 56px var(--pad-x) 0; }

.case__idrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.case__role {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 6px 11px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.case__idrule { flex: 1 1 0; height: 1px; background: var(--line); }
.case__count {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.case__intro h1 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -.032em;
  max-width: 22ch;
}
.case__intro .case__line {
  margin: 26px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 70ch;
}

/* ficha tecnica: rejilla que se reacomoda, filete exterior y filetes internos */
/* Flexible y no reja: cuando los campos no llenan la ultima fila, con reja el
   ultimo quedaba solo y el resto de la fila vacia. Asi el sobrante se estira
   hasta el borde y el marco cierra parejo con cualquier cantidad de campos.
   Con seis campos (velurun) el reparto es identico al de la reja: 219px cada
   uno, medido. */
.case__facts {
  margin: 52px 0 0;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--line);
}
.case__facts > div {
  flex: 1 1 180px;
  padding: 22px 24px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.case__facts dt {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.case__facts dd { margin: 0; font-size: 15.5px; line-height: 1.4; color: var(--ink); }

/* ---------- cuerpo: indice fijo + contenido ---------- */

.case__article { padding: 96px var(--pad-x) 0; }
.case__article > div,
.case__article {
  --case-idx: 200px;
}
.case__article {
  display: grid;
  grid-template-columns: var(--case-idx) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.case__index { position: sticky; top: 120px; }
.case__index-label {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.case__index-list { padding-top: 6px; }
.case__index-list a {
  display: block;
  padding: 11px 0 11px 14px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-left: 2px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.case__index-list a:hover { color: var(--ink); }
.case__index-list a.is-active {
  padding-left: 12px;
  color: var(--ink);
  border-left-color: var(--accent);
}

.case__content > .case__sec { margin: 0; padding: 0; }

.case__content h2 {
  margin: 0 0 22px;
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.05;
  letter-spacing: -.025em;
}

/* el primer parrafo es mas grande y mas claro; los siguientes bajan de tono */
.case__p {
  /* Alex: parrafos de cuerpo mas compactos. 44px dejaba islas separadas
     cuando un capitulo trae varios parrafos cortos (What's next, etc.). */
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 70ch;
  text-align: left;
}
.case__p--lead {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.68;
  color: var(--ink);
}
.case__p--quote { margin-bottom: 34px; }
.case__p--metrics { margin-bottom: 24px; }

.case__fig { margin: 0 0 44px; }
.case__fig figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 64ch;
}

.case__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 44px;
}
.case__pair figure { margin: 0; }
.case__pair figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.shot--43 { aspect-ratio: 4 / 3; }

/* cita destacada: el unico bloque verde de la pagina */
.case__quote {
  margin: 0 0 44px;
  padding: 34px 38px;
  background: var(--sage);
  color: var(--bg);
  border: 0;
}
.case__quote-label {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #B0432A;
  margin-bottom: 16px;
}
.case__quote p {
  margin: 0;
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.24;
  letter-spacing: -.02em;
  max-width: 32ch;
  color: var(--bg);
}

.case__video { margin-bottom: 44px; }
.case__videoph { padding: 0; }
.case__play {
  width: 66px;
  height: 66px;
  border: 1px solid #6A6E6A;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-stretch: 100%;
  color: var(--ink);
}
.case__videot {
  display: block;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.case__videon {
  display: block;
  margin-top: 8px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.case__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line);
}
.case__metrics > div { padding: 22px 24px; border-right: 1px solid var(--line-soft); }
.case__metrics > div:first-child { padding-left: 0; }
.case__metrics > div:last-child { padding-right: 0; border-right: 0; }
.case__metric-v {
  display: block;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--accent);
}
.case__metric-l {
  display: block;
  margin-top: 10px;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------- siguiente caso: banda completa ---------- */

.case__next {
  display: block;
  margin-top: 104px;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .22s var(--ease);
}
.case__next:hover { background: var(--panel); color: inherit; }
.case__next-in {
  padding: 56px var(--pad-x);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.case__next-eyebrow {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.case__next-title {
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -.028em;
  max-width: 24ch;
}
.case__next-arrow {
  font-stretch: 100%;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 56px);
  color: var(--accent);
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .case__article { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 64px; }
  .case__index { position: static; }
  .case__index-list { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .case__pair { grid-template-columns: minmax(0, 1fr); }
  .case__next-in { flex-direction: column; align-items: flex-start; padding: 40px 20px; }
}
@media (max-width: 760px) {
  .case__intro,
  .case__article { padding-left: 20px; padding-right: 20px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Sexta pasada — movimiento.
   Dos librerias hacen el trabajo pesado (Site/assets/js/vendor):
   Lenis mueve el scroll, Motion abre y cierra las fichas de Experience.
   Aqui va lo que es puro CSS: los estados del raton y lo que las librerias
   necesitan. La ficha de Experience se corrige ademas contra el diseno
   original (referencia/diseno-anterior.html, tpl 195-209).
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- lo que Lenis necesita ----------
   Sin la regla de los iframes que trae la libreria: apagaria el raton sobre
   los visores 3D y los videos. */

html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* si el visitante llega sin JS, el salto sigue siendo suave */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 108px; }

/* ---------- Delivered: escala y color al pasar el raton ---------- */

.metrics__col:not(.metrics__col--time) .metric {
  transform-origin: left center;
  transition: transform .34s var(--ease), border-top-color .34s var(--ease);
}
.metrics__col:not(.metrics__col--time) .metric__v,
.metrics__col:not(.metrics__col--time) .metric__l,
.metrics__col:not(.metrics__col--time) .metric__l em { transition: color .34s var(--ease); }

.metrics__col:not(.metrics__col--time) .metric:hover {
  transform: scale(1.035);
  border-top-color: var(--accent);
}
.metrics__col:not(.metrics__col--time) .metric:hover .metric__v { color: var(--ink); }
.metrics__col:not(.metrics__col--time) .metric:hover .metric__l { color: var(--accent); }
.metrics__col:not(.metrics__col--time) .metric:hover .metric__l em { color: var(--ink-muted); }

/* ---------- misma respuesta de "Delivered" al pasar el raton: el texto cambia
   de color Y la pieza crece un poco desde la izquierda (scale 1.035). NO se
   cambia el color de ninguna linea/borde. Cifras 15+/6 del About y listas de
   Skills y Languages. ---------- */
.metrics__col--time .metric--time,
.caps__list li {
  transform-origin: left center;
  transition: transform .34s var(--ease), color .34s var(--ease);
}
.metrics__col--time .metric--time .metric__v,
.metrics__col--time .metric--time .metric__l,
.caps__list li em { transition: color .34s var(--ease); }

.metrics__col--time .metric--time:hover,
.caps__list li:hover { transform: scale(1.035); }

.metrics__col--time .metric--time:hover .metric__v { color: var(--ink); }
.metrics__col--time .metric--time:hover .metric__l { color: var(--accent); }

.caps__list li:hover { color: var(--accent); }
.caps__list--lang li:hover em { color: var(--ink-muted); }

/* ---------- Time in the craft: mismo peso que Delivered ----------
   Dos cifras contra seis renglones: la columna se veia vacia al lado. Sube
   el tamano de la cifra y del pie, y se lleva algo mas de ancho. */

.metrics { grid-template-columns: minmax(300px, 1.15fr) minmax(0, 2fr); }
.metrics .metric--time { margin-bottom: 44px; }
.metrics .metric--time .metric__v { font-size: clamp(56px, 7.6vw, 108px); }
.metrics .metric--time .metric__l {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.45;
  max-width: 20ch;
}

@media (max-width: 900px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- tarjeta de caso: el titulo se pone naranja ---------- */

.case-card__title { transition: color .24s var(--ease); }
.case-card:hover .case-card__title,
.case-card:focus-visible .case-card__title { color: var(--accent); }

/* ---------- galeria: los rotulos van a la izquierda ----------
   La regla vieja dejaba `align-items: flex-end` y, en una columna, eso
   empuja el texto contra el borde derecho. */

.tile__label { align-items: flex-start; text-align: left; }
.tile__title,
.tile__cat { display: block; text-align: left; }

/* ---------- Experience ----------
   Medidas del original: rejilla 44px / 1.5fr / 1fr / auto, filas de 24px,
   el numero en gris apagado, y el recuadro de 26px con el signo. */

.job summary {
  /* La ultima columna (fechas + boton) va con ancho FIJO, no 'auto': si fuera
     auto, las filas con fecha corta ("2010 - 2012") harian arrancar la columna
     de la empresa mas a la derecha que las de fecha larga. Fija = todas las
     empresas alineadas en la misma vertical. 200px entra la fecha mas larga. */
  grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) 200px;
  gap: 8px 20px;
  align-items: center;
}
.job summary > .eyebrow {
  align-self: start;
  padding-top: 5px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-faint);
}
.job__meta { display: flex; align-items: center; gap: 18px; justify-self: end; }
.job__dates { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); }

.job__sign {
  width: 26px;
  height: 26px;
  border: 1px solid #6A6E6A;
  display: grid;
  place-items: center;
  font-stretch: 100%;
  font-size: 15px;
  line-height: 1;
  color: var(--ink);
  flex: 0 0 auto;
  transition: color .22s var(--ease), border-color .22s var(--ease);
}
.job__sign::before { content: "+"; }
.job[open] .job__sign::before { content: "\2212"; }
.job summary:hover .job__sign,
.job[open] .job__sign { color: var(--accent); border-color: var(--accent); }

/* el cuerpo: Motion le anima la altura, por eso va recortado */
.job ul {
  margin: 0;
  padding: 0 0 30px 68px;
  overflow: hidden;
  will-change: height;
}
.job li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 14px;
  padding: 8px 0;
  max-width: none;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.job li::before {
  content: "\2014";
  position: static;
  width: auto;
  height: auto;
  background: none;
  color: var(--accent);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- quien prefiera no ver movimiento, no lo ve ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .metrics__col:not(.metrics__col--time) .metric:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Septima pasada — capitulos del case study.
   El indice lateral, la reja de dos columnas y el bloque de cifras ya
   existian; aqui solo se agrega lo que los capitulos nuevos necesitan:
   el filete que los separa, las tarjetas de Key challenges y el diagrama
   de tres partes de Role & scope. Todo con esquina viva y los mismos
   filetes del resto del sitio: no se introduce ningun border-radius.
   ══════════════════════════════════════════════════════════════════════════ */

/* un capitulo se separa del anterior con un filete fino */
.case__content > .case__sec--rule {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--line-soft);
}
.case__content > .case__sec > *:last-child { margin-bottom: 0; }

/* nota chica bajo las cifras de Results */
.case__note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 62ch;
}

/* ---------- Key challenges: una tarjeta por reto ---------- */

.case__cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.case__card {
  padding: 30px 32px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.case__card-n {
  display: block;
  margin-bottom: 10px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-faint);
}
.case__card-t {
  margin: 0 0 20px;
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  max-width: 44ch;
}
.case__card-rows { margin: 0; }
.case__card-rows > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.case__card-rows > div:last-child { padding-bottom: 0; }
.case__card-rows dt {
  padding-top: 4px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.case__card-rows .is-outcome dt { color: var(--accent); }
.case__card-rows dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* ---------- Role & scope: las tres partes trabajando en ciclo ---------- */

.case__trio { margin: 0 0 44px; }
.case__trio-box {
  padding: 28px 24px;
  background: var(--media);
  border: 1px solid var(--line);
  overflow-x: auto;
}
.case__trio svg {
  display: block;
  width: 100%;
  min-width: 520px;
  max-width: 640px;
  height: auto;
  margin: 0 auto;
}
.case__trio figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.case__trio text { font-family: 'Archivo', system-ui, sans-serif; }

.trio__box { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.trio__box--lead { stroke: var(--accent); }

.trio__eyebrow {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .18em;
  fill: var(--accent);
}
.trio__name {
  font-stretch: 112%;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  fill: var(--ink);
}
.trio__role {
  font-stretch: 75%;
  font-weight: 500;
  font-size: 10.5px;
  fill: var(--ink-muted);
}

/* el unico trazo naranja es el retorno a Alex */
.trio__link { fill: none; stroke: var(--ink-faint); stroke-width: 1; }
.trio__link--back { stroke: var(--accent); }
.trio__head { fill: var(--ink-faint); }
.trio__head--back { fill: var(--accent); }
.trio__lbl {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .18em;
  fill: var(--ink-dim);
}
.trio__lbl--back { fill: var(--accent); }

@media (max-width: 620px) {
  .case__card { padding: 24px 20px; }
  .case__card-rows > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .case__trio-box { padding: 20px 16px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Octava pasada — capturas de app en 'process' y variantes del isotipo
   en 'system'. La tarjeta es la misma de Key challenges: --panel, filete
   --line, esquina viva. Las dos filas de texto reusan .case__card-rows,
   asi que el rotulo naranja de "Why" es literalmente el mismo de "Outcome".
   Las capturas ya vienen con el fondo #242424 del panel, por eso el
   telefono no lleva marco: flota sobre la tarjeta.
   ══════════════════════════════════════════════════════════════════════════ */

.case__shots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.case__card--shot {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 34px;
  /* el texto es corto al lado de un telefono alto: centrado el hueco queda parejo */
  align-items: center;
  padding: 26px 28px;
}
/* La misma tarjeta cuando el item no trae captura: una sola columna. Lleva dos
   clases a proposito, para ganarle a los anchos que .case__card--shot recibe
   mas abajo en cada corte de pantalla sin depender del orden. */
.case__shots .case__card--noshot { grid-template-columns: minmax(0, 1fr); }
.case__shot-media img { display: block; width: 100%; height: auto; }
.case__shot-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.case__card--shot .case__card-rows > div:first-child { border-top: 0; padding-top: 0; }

/* ---------- variantes del isotipo ---------- */

.case__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.case__mark {
  padding: 24px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.case__mark img {
  display: block;
  width: 96px;
  height: 96px;
  margin-bottom: 20px;
}
.case__mark-l {
  display: block;
  margin-bottom: 8px;
  font-stretch: 112%;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.case__mark-u {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* ---------- maquetas de las cuatro apps AR ---------- */

/* Misma celda que .case__mark (panel, filete, esquina viva). Cuatro en fila
   para que se lean como variantes de un mismo producto; a 900 pasan a 2x2 y
   a 620 se apilan, porque mas angostas la interfaz ya no se distingue. */
.case__mockups {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.case__mockup {
  /* relleno mas corto que .case__mark a proposito: en cuatro columnas cada
     celda mide ~252px y cada milimetro de relleno se le quita al telefono. */
  padding: 16px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.case__mockup img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 18px;
}
.case__mockup-l {
  display: block;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .case__marks { grid-template-columns: minmax(0, 1fr); }
  .case__mark { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 22px; }
  .case__mark img { width: 72px; height: 72px; margin-bottom: 0; grid-row: span 2; }
  .case__mockups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .case__card--shot { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 20px; }
  .case__shot-media img { max-width: 280px; margin: 0 auto; }
  .case__mockups { grid-template-columns: minmax(0, 1fr); }
  .case__mockup img { max-width: 320px; margin-left: auto; margin-right: auto; }
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../fonts/sora.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════════════
   Novena pasada.
   1. Medida de lectura: el texto de los capitulos estaba topado en 70ch pero
      anclado a la izquierda, y el h2 iba a 1073 ' dejaba 391px de aire muerto
      a la derecha. Se aplica el criterio de .about-wrap: una medida con
      margen automatico a ambos lados. Las tarjetas y los bloques siguen
      ocupando la columna completa, que es lo que les da presencia.
   2. 'process' pasa a la reja de About tal cual: 1fr / 1.75fr con gap 64.
   3. Bloques del sistema de diseno. Tres familias mas, auto-hospedadas
      arriba con el mismo criterio que Archivo: el sitio sigue sin pedirle
      nada a ningun servidor externo. Solo se usan en los especimenes.
   ══════════════════════════════════════════════════════════════════════════ */

/* La medida va en px, no en ch: ch escala con el tamano de letra del propio
   elemento, y el h2 a 38px daba 1500px (sin efecto) mientras el rotulo de
   bloque a 11px daba 370px. Con px el titulo y el texto comparten borde. */
/* Alex pidio volver atras: titulo y texto pegados al borde izquierdo de la
   columna, y el cuerpo ocupando todo el ancho en vez de cortarse a la mitad.
   Esto anula los topes de medida que traian .case__p y .case__note. */
.case__content h2,
.case__sec > .case__p,
.case__sec > .case__note,
.case__sec > .case__quote {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Dentro de un bloque el texto se limita, pero alineado a la izquierda del
   bloque, no centrado: el rotulo y su filete ocupan el ancho completo. */
.case__block-i { max-width: none; }

/* ---------- process: la reja de About ---------- */

.case__card--shot {
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.75fr);
  gap: 64px;
}

/* ---------- callout con titulo y cuerpo ---------- */

/* .case__quote p (30px, 32ch) le gana por especificidad: hay que igualarla. */
.case__quote p.case__quote-body {
  font-stretch: 75%;
  font-weight: 400;
  letter-spacing: 0;
  /* Alex: cuerpo del Principle mas junto al titulo y entre parrafos. */
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--bg);
  opacity: .82;
  max-width: 62ch;
}

/* ---------- bloques del sistema de diseno ---------- */

.case__block { margin-top: 52px; }
.case__block:first-child { margin-top: 0; }
.case__block-t {
  margin: 0 0 16px;
  padding-bottom: 12px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-soft);
}
.case__block-i {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}

/* color */
.case__sw { display: grid; gap: 26px; }
.case__sw-gl {
  display: block;
  margin-bottom: 12px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.case__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.case__chip { border: 1px solid var(--line); background: var(--panel); }
.case__chip-c { display: block; height: 56px; border-bottom: 1px solid var(--line); }
.case__chip-n {
  display: block;
  padding: 12px 14px 0;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.case__chip-h {
  display: block;
  padding: 4px 14px 12px;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-dim);
}

/* tipografia: el especimen va en la fuente real */
.case__type { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.case__type-i { padding: 26px 28px; background: var(--panel); border: 1px solid var(--line); }
.case__spec {
  margin: 0 0 20px;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.case__spec--sora { font-family: 'Sora', system-ui, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.case__spec--hanken-grotesk { font-family: 'Hanken Grotesk', system-ui, sans-serif; font-weight: 400; }
.case__spec--space-mono {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-weight: 400;
  color: var(--ink-muted);
  /* el especimen trae los espacios a proposito; HTML los colapsaria */
  white-space: pre-wrap;
}
.case__type-m {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.case__type-f { font-stretch: 112%; font-weight: 700; font-size: 15px; color: var(--ink); }
.case__type-w { font-size: 13px; color: var(--ink-dim); }
.case__type-r {
  margin-left: auto;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.case__type-n { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }

/* filas de medidas y de resortes */
.case__rows { margin: 0; }
.case__rows > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 8px 24px;
  padding: 15px 0;
  border-top: 1px solid var(--line-soft);
}
.case__rows > div:last-child { border-bottom: 1px solid var(--line-soft); }
.case__rows dt {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.case__rows dd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink-muted); }
.case__rows--springs dt { color: var(--accent); }
.case__rows-p {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--ink-dim);
}

/* primitivas */
.case__prims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.case__prims li {
  padding: 9px 15px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--ink-muted);
}

@media (max-width: 900px) {
  .case__rows > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* La reja de About de arriba es posterior al @media de la octava pasada y con
   la misma especificidad, asi que lo pisaba: por debajo de 900 el minimo de
   280px dejaba la columna de texto en 0. El apilado se repite aqui. */
@media (max-width: 900px) {
  .case__card--shot {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 26px 24px;
  }
  .case__shot-media img { max-width: 320px; margin: 0 auto; }
  .case__chips { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* El hueco bajo el h2 medía 22px en todas las secciones, pero se veía distinto:
   donde sigue un parrafo, el interlineado agrega ~6px opticos antes de la
   primera linea; donde sigue una estructura (las tarjetas de Key challenges,
   las cifras de Results, las capturas de Process) el filete arranca pegado.
   Se compensa esa diferencia optica. */
.case__content h2 + .case__cards,
.case__content h2 + .case__shots,
.case__content h2 + .case__metrics,
.case__content h2 + .case__marks {
  /* margenes adyacentes colapsan: con 8px ganaba el 22 del h2 y no pasaba
     nada. Tiene que superar ese 22 para que el hueco crezca de verdad. */
  margin-top: 30px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Decima pasada: hero real del caso, 'Design system' partido en dos, sus
   subtitulos en naranja y los mockups de 'process' mas chicos y centrados.
   ══════════════════════════════════════════════════════════════════════════ */

/* .shot img (0,1,1) le gana a una sola clase: hacen falta dos. */
.case__hero .case__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El recorte 21:9 quita unos 224px de alto: repartidos por igual le cortaban
     la cara al corredor, asi que casi todo se descuenta por abajo. */
  object-position: center 10%;
}

/* Portada del caso en la tarjeta de la landing. Marco cuadrado y pieza
   cuadrada (2048x2048): no hay recorte, se ve completa y centrada. */
.case-card__cover .case-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* subtitulos del sistema de diseno */
.case__block-t { color: var(--accent); }

/* Design system: el texto a la izquierda, el principio en la otra mitad */
.case__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: start;
  margin-bottom: 44px;
}
.case__split .case__p,
.case__split .case__quote {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.case__split .case__p:last-child,
.case__split .case__quote { margin-bottom: 0; }

@media (min-width: 901px) {
  /* el mockup, un cuarto mas chico y centrado en su columna */
  .case__shot-media img {
    width: 67.5%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 900px) {
  .case__split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .case__split .case__p:last-child { margin-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Onceava pasada: las dos rejas de 4+4 del caso ANH, el rotulo de rol en
   naranja, el ancho de los cuerpos de texto y el reproductor de YouTube.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 1 · ficha tecnica: dos filas de cuatro ----------
   La base sigue siendo flex (velurun, con seis campos, se reparte solo). El
   modificador lo pone el generador cuando la cantidad de campos es multiplo
   de cuatro: con ocho quedan dos filas exactas de cuatro y ninguna celda
   sola. Los filetes internos ya venian del borde de cada celda. */
.case__facts--quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .case__facts--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .case__facts--quad { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2 · el rotulo de rol dentro de un bloque ----------
   Solo el de los bloques de 'Role & scope' y 'Design system'. El mismo rotulo
   dentro de una tarjeta con captura (process, community, las experiencias)
   se queda gris: ahi es un dato tecnico, no un cargo. Naranja de --accent, el
   que ya usa el tagline de About; nada de un naranja nuevo. */
.case__block > .case__shot-eyebrow {
  margin-bottom: 16px;
  font-size: 11.5px;
  letter-spacing: .26em;
  color: var(--accent);
}

/* ---------- 3 · Results: dos filas de cuatro con la reja dibujada ----------
   Igual que la ficha tecnica: marco exterior y filete entre celdas, para que
   se lea como tabla y no como cifras sueltas. Solo cuando pasan de cuatro;
   velurun, que trae cuatro, se queda con la fila corrida de siempre. */
.case__metrics--quad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
}
.case__metrics--quad > div {
  padding: 22px 24px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.case__metrics--quad > div:first-child { padding-left: 24px; }
.case__metrics--quad > div:last-child { padding-right: 24px; border-right: 1px solid var(--line-soft); }
@media (max-width: 900px) {
  .case__metrics--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .case__metrics--quad { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 4 · ancho de los cuerpos de texto ----------
   Mismo criterio que ya se habia aplicado a .case__p y .case__note: el cuerpo
   ocupa la columna completa. Faltaban estos cuatro, que seguian cortados a la
   mitad. Se corrige en el componente compartido, no en cada caso, asi que
   velurun cambia igual. El titular de la cita (.case__quote p, 32ch) se deja
   como esta: es un display de 30px y a ancho completo se vuelve ilegible. */
.case__quote p.case__quote-body { max-width: none; }
.case__card-rows dd { max-width: none; }
.case__fig figcaption { max-width: none; }
.case__intro .case__line { max-width: none; }

/* ---------- 5 · nombre de la experiencia sobre su maqueta ----------
   Deja de ser pie de foto: va arriba, centrado y en naranja, a la escala de
   un subtitulo. Sin llegar al tamano de un h2, para que el telefono siga
   siendo lo primero que se ve. */
.case__mockup-l {
  margin-bottom: 14px;
  text-align: center;
  font-stretch: 112%;
  /* Alex: el nombre de cada app en peso medium (500), no bold. Solo estos
     cuatro rotulos; el tamano se mantiene en 17px. */
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: none;
  /* Alex: el nombre de cada app en el blanco de la interfaz, no en naranja. */
  color: var(--ink);
}
.case__mockup img { margin-bottom: 0; }

/* ---------- 6 · reproductor de YouTube ----------
   Va debajo de la caja de su experiencia, como una fila mas de la misma tabla
   que Function y Why: mismo filete fino arriba, misma columna de rotulo de
   96px, mismo rotulo de 10px en versalitas. Asi el reproductor no se lee como
   un widget pegado sino como parte del contenedor de la era.
   Solo aparece si data.js trae un link; con el campo vacio el generador no
   escribe ni el marco. */
.case__yt {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 20px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.case__yt-l {
  padding-top: 4px;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
/* el marco: el fondo y el filete de .case__trio-box, los mismos que usa
   cualquier otra caja de medios del caso. El horizontal ocupa todo el ancho de
   la columna de cuerpo, alineado a izquierda y derecha con el texto de Function
   y Why: sin tope de medida. */
.case__yt-f {
  aspect-ratio: 16 / 9;
  background: var(--media);
  border: 1px solid var(--line);
}
/* un Short es vertical: 9:16 y del ancho de un telefono, a la escala de las
   maquetas de Design system, y centrado en su columna. */
.case__yt--v .case__yt-f {
  aspect-ratio: 9 / 16;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
.case__yt iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 620px) {
  .case__yt { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .case__yt--v .case__yt-f { max-width: 300px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Doceava pasada: la paleta institucional del Tour (muestrario existente, con
   el codigo Pantone y su significado) y los iconos reales de las cinco apps.
   ══════════════════════════════════════════════════════════════════════════ */

/* El chip de color ahora puede llevar una tercera linea con el rol del color
   (para que va en la marca). El muestrario de VeluRun no la trae, asi que no
   cambia. */
.case__chip-r {
  display: block;
  padding: 0 14px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* Los iconos de las apps: cuadros a sangre, misma celda que las maquetas. Van
   cinco en fila (1 VR + 4 AR); a 900 pasan a tres y a 620 a dos, porque mas
   chicos el nombre de la app ya no se lee. */
.case__icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.case__icon { background: var(--panel); border: 1px solid var(--line); }
.case__icon img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.case__icon-l {
  display: block;
  padding: 14px 14px 0;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.case__icon-p {
  display: block;
  padding: 4px 14px 14px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-dim);
}
@media (max-width: 900px) {
  .case__icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .case__icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   Treceava pasada: los rotulos de la ficha tecnica en naranja (los dos casos;
   el color quedo en la regla base .case__facts dt) y la ficha de seis campos
   de VeluRun en reja de 3 + 3, igual que la de ocho del ANH va en 4 + 4.
   ══════════════════════════════════════════════════════════════════════════ */
.case__facts--tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .case__facts--tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .case__facts--tri { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- retrato del About: foto real en el marco 4/5 ----------
   La foto es cuadrada; llena el marco vertical recortando fondo a los lados,
   con la cara centrada. .shot img fuerza height:auto, esto lo sobreescribe. */
.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ══════════════ movimiento al entrar y salir del cuadro ══════════════
   Referencia: treeview.studio. Las piezas entran desde abajo con un
   desenfoque corto que se resuelve al llegar a su sitio, y al salir por
   arriba se difuminan un poco en vez de cortarse en seco.

   Todo cuelga de [data-rv], que site.js pone solo cuando puede animar.
   Sin JavaScript no existe el atributo: la pagina se ve entera, como
   siempre. Es mejora progresiva, igual que el resto del sitio. */

:root {
  --rv-ease: cubic-bezier(.22,1,.36,1);   /* la misma curva del acordeon */
  --rv-dur: .78s;
}

[data-rv] {
  opacity: 0;
  transform: translateY(22px) scale(.994);
  filter: blur(6px);
  transition: opacity var(--rv-dur) var(--rv-ease),
              transform var(--rv-dur) var(--rv-ease),
              filter var(--rv-dur) var(--rv-ease);
  transition-delay: var(--rv-delay, 0ms);
}

/* Al arrancar, el estado de partida se pone de golpe. Sin esto las piezas
   ya pintadas se desvanecerian a la vista, que es justo lo contrario. */
.rv-boot [data-rv] { transition: none !important; }

/* dentro del cuadro: nitida y en su sitio */
[data-rv].rv-in { opacity: 1; transform: none; filter: none; }

/* saliendo por arriba: se va perdiendo, sin retardo */
[data-rv].rv-out {
  opacity: .45;
  transform: translateY(-12px) scale(.998);
  filter: blur(3px);
  transition-delay: 0ms;
}

/* si el visitante pide menos movimiento, no se oculta ni se difumina nada */
@media (prefers-reduced-motion: reduce) {
  [data-rv],
  [data-rv].rv-in,
  [data-rv].rv-out { opacity: 1; transform: none; filter: none; }
}

/* ══════════════ pantallas chicas ══════════════
   El bloque de escritorio redefine .hdr__nav, .hdr__actions y .lang DESPUES
   del media query de 767px, asi que aquellas reglas quedaban muertas. Estas
   van al final del archivo a proposito, para que ganen.

   En telefono la navegacion no cabe en una barra: se guarda tras un boton de
   hamburguesa arriba a la derecha y baja como panel. El indice del caso hace
   lo mismo. */

/* ---------- boton de hamburguesa del encabezado ---------- */

.hdr__burger {
  display: none;                      /* solo aparece en pantalla chica */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color .2s var(--ease);
}
.hdr__burger span {
  display: block;
  width: 17px;
  height: 2px;
  background: var(--ink);
  transition: transform .24s var(--ease), opacity .18s var(--ease);
}
/* abierto: las tres rayas se cruzan en una equis */
.hdr.is-open .hdr__burger { border-color: var(--accent); }
.hdr.is-open .hdr__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr.is-open .hdr__burger span:nth-child(2) { opacity: 0; }
.hdr.is-open .hdr__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- indice del caso: el rotulo pasa a ser el boton ---------- */

.case__index-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: default;                    /* en escritorio no se pulsa: esta abierto */
}
.case__index-label { padding-bottom: 0; border-bottom: 0; }
.case__index-burger { display: none; }

/* ---------- el pie sin la frase del rol ----------
   Quedan los enlaces y el aviso de derechos en una sola fila. */

.ftr__in { grid-template-columns: minmax(0, 1fr); }
.ftr__right {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

/* El selector de idioma es lo primero que sobra cuando el ancho aprieta:
   quitarlo libera unos 90px y con eso el encabezado ya entra en un portatil. */
@media (max-width: 1100px) {
  .lang { display: none; }
}

@media (max-width: 900px) {
  .hdr__burger { display: flex; }

  /* el boton de CV sale de la barra: ocupaba media pantalla y tapaba el
     contenido al hacer scroll. El CV sigue a mano desde Experience. */
  .btn--cv { display: none; }

  /* con el idioma y el CV fuera, la caja de acciones queda vacia y solo
     aportaba separacion: se va, y la barra respira */
  .hdr__actions { display: none; }
  .hdr__in { gap: 14px; }
  .hdr__burger { margin-left: auto; }

  /* la navegacion baja como panel bajo la barra, no en la barra */
  .hdr__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 2px var(--pad-x) 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .hdr.is-open .hdr__nav { display: flex; }
  .hdr__nav a {
    padding: 15px 2px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
  }
  .hdr__nav a:last-child { border-bottom: 0; }

  /* indice del caso: mismo gesto, boton arriba a la derecha */
  .case__index-toggle { cursor: pointer; padding: 14px 0; }
  .case__index-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    flex: 0 0 auto;
  }
  .case__index-burger span {
    display: block;
    width: 14px;
    height: 2px;
    background: var(--ink-muted);
    transition: transform .24s var(--ease), opacity .18s var(--ease);
  }
  .case__index.is-open .case__index-burger { border-color: var(--accent); }
  .case__index.is-open .case__index-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .case__index.is-open .case__index-burger span:nth-child(2) { opacity: 0; }
  .case__index.is-open .case__index-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .case__index-list { display: none; }
  .case__index.is-open .case__index-list { display: block; padding-top: 4px; }
  .case__index.is-open .case__index-list a { display: block; padding: 13px 0 13px 12px; }

  /* el titulo de seccion se parte: la nota de la derecha baja a su linea */
  .sec-head { flex-wrap: wrap; row-gap: 8px; }
  .sec-head__note { flex: 1 0 100%; text-align: left; }
}

/* Las dos tarjetas de case study: en dos columnas quedaban de 145px de ancho
   en un telefono. Apiladas ocupan el ancho entero. */
@media (max-width: 700px) {
  .cases { grid-template-columns: minmax(0, 1fr); }
  .ftr__right { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Experience: en escritorio son cuatro columnas. En telefono todo se apila en
   una sola y el signo + se ancla arriba a la derecha, que es donde se busca:
   antes caia suelto debajo del texto y no se entendia que abria la ficha. */
@media (max-width: 640px) {
  .job summary {
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 4px 14px;
    align-items: start;
    padding: 20px 0;
  }
  .job summary > .eyebrow { grid-column: 1; grid-row: 1; padding-top: 0; }
  .job__role  { grid-column: 1; grid-row: 2; }
  .job__co    { grid-column: 1; grid-row: 3; }
  .job__meta  { display: contents; }
  .job__dates { grid-column: 1; grid-row: 4; margin-top: 6px; }
  .job__sign  { grid-column: 2; grid-row: 1 / span 4; justify-self: end; align-self: start; }
  .job ul { padding-left: 0; }
}