:root {
  --bg: #ffffff;
  --fg: #000000;
  --dim: #8c8c8c;
  --soft: #f7f7f7;
  --glass: rgba(240, 240, 240, 0.55);
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs: clamp(12px, 0.9vw, 14px);
  --pill-h: calc(var(--fs) * 2.9);
  --radius: clamp(18px, 2.4vw, 34px);
  --gap: 8px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}
:root[data-theme='dark'] {
  --bg: #000000;
  --fg: #ffffff;
  --dim: #7a7a7a;
  --soft: #141414;
  --glass: rgba(40, 40, 40, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg); transition: background .3s var(--ease), color .3s var(--ease); }
body {
  font: 400 var(--fs)/1.35 var(--font);
  letter-spacing: .02em;
  min-height: 100vh;
  padding: var(--gap);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
img, video { display: block; }
.dim { color: var(--dim); }

/* Píldoras */
.pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--pill-h);
  padding: 0 calc(var(--fs) * 1.6);
  border-radius: 999px;
  background: var(--soft);
  white-space: nowrap;
}
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
a.pill:hover, button.pill:hover { opacity: .7; }

/* Cabecera */
.bar .role { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.menus {
  position: sticky; top: var(--gap); z-index: 20;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  margin: var(--gap) 0;
}
.menu { position: relative; }
.menu > .pill { width: 100%; }
.tri { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; transition: transform .2s var(--ease); }
.menu > [aria-expanded='true'] .tri { transform: rotate(180deg); }
.drop {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--gap));
  border-radius: calc(var(--pill-h) / 2);
  padding: calc(var(--fs) * 1.2) calc(var(--fs) * 1.6);
  max-height: 70vh; overflow: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.drop.open { opacity: 1; transform: none; pointer-events: auto; }
.drop p { margin-bottom: 10px; max-width: 520px; }
.drop ul { list-style: none; }
.drop li { padding: 3px 0; }
.drop li a:hover, .drop button:hover { color: var(--dim); }
.drop .sep { height: 1px; background: color-mix(in srgb, var(--fg) 12%, transparent); margin: 10px 0; }
.drop .row { display: flex; justify-content: space-between; gap: 12px; }
.filters { display: flex; gap: var(--gap); flex-wrap: wrap; margin-bottom: 6px; }
.filters button, .filters a { padding: 6px 12px; border-radius: 999px; }
.filters button[aria-pressed='true'] { background: var(--fg); color: var(--bg); }

/* Cuadrícula */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.card {
  position: relative; display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft);
  cursor: pointer;
  isolation: isolate;
}
.card img, .card video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.card:hover img, .card:hover video { transform: scale(1.025); }
.cap {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  min-height: var(--pill-h);
  max-width: calc(100% - 32px);
  padding: 0 calc(var(--fs) * 1.6);
  display: flex; align-items: center;
  border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translate(-50%, -30%);
  transition: opacity .15s var(--ease), transform .15s var(--ease);
}
.card:hover .cap { opacity: 1; transform: translate(-50%, -50%); }
@media (hover: none) {
  .cap { top: auto; bottom: 14px; opacity: 1; transform: translateX(-50%); }
}

/* Visor de experimentos */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--bg);
  display: none;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap);
  padding: var(--gap);
}
.viewer.open { display: grid; }
.viewer .top, .viewer .bottom { display: flex; justify-content: space-between; gap: var(--gap); }
.viewer .stage { display: flex; align-items: center; justify-content: center; min-height: 0; }
.viewer .stage img, .viewer .stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }

/* Página de proyecto */
.project-head { display: flex; flex-wrap: wrap; gap: var(--gap); margin-bottom: var(--gap); }
.project-head h1 { font: inherit; }
.project-info {
  display: grid; grid-template-columns: 2fr 1fr; gap: calc(var(--gap) * 4);
  padding: calc(var(--fs) * 3) calc(var(--fs) * 1.6) calc(var(--fs) * 4);
}
.ptext { font-size: clamp(17px, 1.6vw, 26px); line-height: 1.25; letter-spacing: 0; max-width: 900px; }
.ptext p { margin-bottom: .7em; }
.ptext .link { font-size: var(--fs); }
.credits div { margin-bottom: 10px; }
.project-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); align-items: start; }
.project-media > * { width: 100%; height: auto; border-radius: var(--radius); overflow: hidden; background: var(--soft); }
.project-media .wide { grid-column: 1 / -1; }
.embed { position: relative; aspect-ratio: 16 / 9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.next { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }

footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: calc(var(--fs) * 3) calc(var(--fs) * 1.6) calc(var(--fs) * 1.2); color: var(--dim); }
footer nav { display: flex; gap: 16px; }
footer a:hover { color: var(--fg); }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .menu { position: static; }
  .project-info { grid-template-columns: 1fr; gap: 24px; }
  .project-media { grid-template-columns: 1fr; }
  .next .pill span { overflow: hidden; text-overflow: ellipsis; }
}