/* ============================================================
   josé luis ruiz garcía — portfolio
   Layout: lámina blanca, barras de tres textos arriba/abajo,
   tipografía grotesca fina en minúsculas, un único acento rojo.
   ============================================================ */
:root {
  --paper: #ffffff;
  --ink: #141414;
  --mute: #6f6a68;      /* gris con un punto cálido hacia el rojo */
  --line: #e8e4e2;
  --red: #ef2b24;
  --sheet: #f3f1f0;     /* fondo del bloque sobre mí */
  --blush: #fbe9e6;     /* fondo del bloque experience & education */
  --night: #141414;     /* fondo del bloque oscuro */
  --on-night: #ffffff;
  --on-night-mute: #9c9593;

  --sans: "Helvetica Neue", "Albert Sans", Helvetica, Arial, sans-serif;

  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: clamp(18px, 1.5vw, 22px);
  --fs-xl: clamp(28px, 3.6vw, 52px);
  --fs-title: clamp(48px, 7.4vw, 112px);
  --fs-display: clamp(56px, 10.5vw, 168px);

  --side: max(16px, env(safe-area-inset-left, 0px));
  --side-r: max(16px, env(safe-area-inset-right, 0px));
  --inner: clamp(0px, 3vw - 16px, 40px);
  --gap: clamp(8px, 0.9vw, 14px);
  --section: clamp(72px, 10vw, 160px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-m);
  font-weight: 300;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--red); color: var(--paper); }
strong, b { font-weight: 600; }

/* idioma: se muestra solo el bloque del idioma activo */
html:not([data-lang]) body [lang="en"],
html[data-lang="es"] body [lang="en"],
html[data-lang="en"] body [lang="es"] { display: none !important; }

.wrap {
  padding-left: var(--side);
  padding-right: var(--side-r);
}
.inner {
  max-width: 1720px;
  margin-inline: auto;
  padding-inline: var(--inner);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- cabecera ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  z-index: 60; background: var(--paper);
}
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--paper); color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.site-head.hide { transform: translateY(-110%); }
/* marca: el rectángulo rojo de la portada en miniatura */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand::before { content: ""; width: 9px; height: 13px; background: var(--red); flex: none; }
.site-head .inner { position: relative; }
.head-date {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: var(--fs-xs); letter-spacing: .08em; color: var(--mute); font-variant-numeric: tabular-nums;
}
@media (max-width: 400px) { .head-date { display: none; } }
.site-head .inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px;
}
.brand { font-size: var(--fs-s); font-weight: 400; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); font-size: var(--fs-s); }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.lang { display: inline-flex; gap: 6px; font-size: var(--fs-s); color: var(--mute); }
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.nav a:hover { color: var(--red); }
.menu-btn { display: none; font-size: var(--fs-s); }

@media (max-width: 760px) {
  .menu-btn { display: inline-block; }
  .head-right { display: flex; align-items: center; gap: 18px; }
  .nav {
    position: fixed; inset: 0; z-index: 70;
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px;
    padding: calc(env(safe-area-inset-top, 0px) + 72px) var(--side-r) calc(env(safe-area-inset-bottom, 0px) + 40px) var(--side);
    background: var(--paper); color: var(--ink);
    font-size: clamp(36px, 11vw, 56px); font-weight: 200; letter-spacing: -0.02em;
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  }
  .nav.open { opacity: 1; visibility: visible; }
  .nav .nav-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: var(--side-r); font-size: var(--fs-s); font-weight: 400; letter-spacing: 0; }
  .nav a::after { bottom: 2px; }
}
@media (min-width: 761px) { .nav-close { display: none; } .head-right { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 36px); } }
body.menu-open { overflow: hidden; }

/* ---------- barra de tres textos (motivo de las láminas) ---------- */
.tri {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px;
  font-size: var(--fs-s);
}
.tri > :nth-child(2) { text-align: center; font-weight: 600; }
.tri > :last-child { text-align: right; }
@media (max-width: 560px) {
  .tri { grid-template-columns: 1fr 1fr; }
  .tri > :first-child { display: none; }
  .tri > :nth-child(2) { text-align: left; }
}

/* ---------- títulos grandes finos ---------- */
.display {
  font-size: var(--fs-display); font-weight: 200; line-height: .84; letter-spacing: -0.035em;
  text-wrap: balance;
}
.display-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.display-row p { max-width: 30ch; font-size: var(--fs-m); line-height: 1.3; padding-bottom: .3em; }

/* ============================================================
   PORTADA
   ============================================================ */
.hero { position: relative; overflow: hidden; padding-block: clamp(24px, 5vw, 72px) clamp(16px, 2vw, 32px); }
.hero > .inner { position: relative; z-index: 1; }
.shapes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.shape {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; touch-action: none;
  will-change: transform; user-select: none; -webkit-user-select: none;
}
.shape.drag { cursor: grabbing; }
.shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero .inner { display: block; }
/* la escena se centra en la página: PORTFOLIO y el rectángulo tienen su centro en el centro exacto (50cqw) */
.scene {
  position: relative; isolation: isolate;
  aspect-ratio: 890 / 615; width: min(100%, 980px); margin-inline: auto;
  container-type: inline-size;
}
/* El rectángulo se coloca respecto a la foto, no respecto a las letras:
   su borde derecho coincide siempre con la palma de la mano, sea cual sea
   la tipografía o el tamaño de pantalla. Todo se mide en % del ancho de la escena (cqw). */
.scene-rect {
  position: absolute; left: calc(50cqw - 13.15cqw); top: 6.4cqw; width: 26.3cqw; height: 34.9cqw;
  background: var(--red);
  transform-origin: 50% 100%;
  animation: rect-in .9s cubic-bezier(.7, 0, .2, 1) both;
}
.scene-me {
  /* la mano (0,7cqw dentro de la foto) cae justo en el borde derecho del rectángulo: 50 + 13,15 − 0,7 */
  position: absolute; left: calc(50cqw + 13.15cqw - 0.7cqw); top: 0.6cqw; width: 42.9cqw; height: auto;
  animation: me-in 1s .25s cubic-bezier(.2, .7, .2, 1) both;
}
.scene-kicker {
  position: absolute; left: calc(50cqw - 42.7cqw + 1.1cqw); top: 10.4cqw;
  font-size: max(11px, 2cqw); font-weight: 300;
}
.scene-word {
  position: absolute; left: 50cqw; top: 13.4cqw; translate: -50% 0;
  font-size: 18.1cqw; font-weight: 200; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap;
}
/* PORTFOLIO como una cinta: cada letra gira sobre su eje horizontal, una detrás de otra.
   Por delante, la letra fina negra; por detrás, la misma letra en rojo
   (o en blanco cuando está encima del rectángulo rojo). */
.scene-word .l {
  position: relative; display: inline-block;
  transform-style: preserve-3d;
  animation: ribbon 7s cubic-bezier(.65, 0, .35, 1) calc(1.4s + var(--i) * 75ms) infinite both;
}
.scene-word .f, .scene-word .b { display: inline-block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.scene-word .b { position: absolute; left: 0; top: 0; transform: rotateX(180deg); color: var(--red); }
/* dentro del rectángulo, una copia recortada de la palabra: por delante negra, por detrás blanca.
   Así ninguna letra (ni media letra) desaparece rojo sobre rojo */
.scene-clip {
  position: absolute; left: calc(50cqw - 13.15cqw); top: 6.4cqw; width: 26.3cqw; height: 34.9cqw;
  overflow: hidden; pointer-events: none; background: var(--red);
  transform-origin: 50% 100%; animation: rect-in .9s cubic-bezier(.7, 0, .2, 1) both;
}
.scene-clip .scene-word { left: 13.15cqw; top: 7cqw; }
.scene-clip .scene-word .b { color: var(--paper); }
/* las letras que pasan por encima de la foto llevan un halo blanco para separarse de las rayas */
.scene-word .l.on-photo .f, .scene-word .l.on-photo .b {
  text-shadow: 0 0 .02em var(--paper), 0 0 .02em var(--paper), 0 0 .04em var(--paper), 0 0 .04em var(--paper);
}
@keyframes ribbon {
  0%, 6%    { transform: perspective(4em) rotateX(0deg); }
  16%, 46%  { transform: perspective(4em) rotateX(180deg); }
  56%, 100% { transform: perspective(4em) rotateX(360deg); }
}
@media (prefers-reduced-motion: reduce) { .scene-word .l { animation: none; } }
@keyframes rect-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes me-in { from { transform: translateX(4%); opacity: .0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .scene-rect, .scene-me, .scene-clip { animation: none; }
}
@media (max-width: 760px) {
  .scene { width: 94%; margin-top: 12px; }
  .hero { padding-bottom: 120px; }
  .badge { top: calc(100% + 14px); width: 92px; }
}

/* ---------- ¡hola! ---------- */
.about {
  background: var(--sheet);
  padding-block: clamp(72px, 9vw, 140px);
}
.about .about-grid {
  display: grid; grid-template-columns: 1fr minmax(180px, 300px) 1fr;
  gap: clamp(14px, 1.4vw, 24px); align-items: stretch;
  font-size: var(--fs-l); line-height: 1.22;
}
.about-a { text-align: right; align-self: start; }
.about-b { align-self: end; max-width: 26ch; }
/* la foto flota: sube y baja despacio (.about-float) y se inclina hacia el ratón (.about-photo, vía js) */
.about-float { perspective: 900px; animation: float 6s ease-in-out infinite; align-self: center; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.about-photo {
  position: relative; background: var(--paper); padding: 4%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-1.5deg);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 30px 60px -28px rgba(20, 20, 20, .45), 0 8px 18px -10px rgba(20, 20, 20, .18);
  will-change: transform;
}
/* sombra en el "suelo" que se encoge cuando la foto sube */
.about-float::after {
  content: ""; display: block; height: 18px; margin: 26px auto 0; width: 70%;
  background: radial-gradient(closest-side, rgba(20, 20, 20, .18), transparent);
  animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: translateY(14px) scaleX(.82); opacity: .6; } }
.about-photo img { width: 100%; }
@media (prefers-reduced-motion: reduce) { .about-float, .about-float::after { animation: none; } .about-photo { transform: none; } }
.about .red { color: var(--red); }
.about em { font-style: italic; }
@media (min-width: 1080px) {
  .about-a, .about-b { white-space: nowrap; }   /* las líneas se cortan donde tú las cortaste */
}
/* pantallas medianas y móvil: texto, foto y texto centrados en un mismo eje */
@media (max-width: 1079px) {
  .about .about-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 36px);
    font-size: clamp(16px, 4.3vw, 22px); line-height: 1.25;
  }
  .about-a, .about-b { justify-self: center; text-align: center; max-width: none; }
  .about-float { justify-self: center; width: min(56%, 300px); }
}

/* ---------- clientes: banda oscura con dos cintas que se mueven en sentidos opuestos ---------- */
.clients {
  background: var(--night); color: var(--on-night);
  padding-block: clamp(64px, 9vw, 140px);
  margin-bottom: var(--section);
  overflow: hidden;
}
.clients ::selection { background: var(--red); color: var(--on-night); }
.clients .lead-big {
  max-width: 24ch; font-size: clamp(30px, 4.6vw, 76px); font-weight: 200;
  line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance;
}
.lead-big em { font-style: normal; }
.lead-big .w { color: rgba(255, 255, 255, .16); transition: color .35s ease; }
.lead-big .w.lit { color: var(--on-night); }
.lead-big em .w.lit { color: var(--red); }
.clients-k {
  margin-block: clamp(48px, 6vw, 96px) clamp(18px, 2vw, 28px);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--on-night-mute);
}
.marquee { display: grid; gap: clamp(4px, 1vw, 14px); }
.mq-row { overflow: hidden; }
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.mq-row.rev .mq-track { animation-direction: reverse; animation-duration: 52s; }
.mq-set { display: flex; align-items: center; flex-shrink: 0; }
.mq-i {
  font-size: clamp(26px, 4vw, 64px); font-weight: 200; line-height: 1.15; letter-spacing: -0.02em;
  white-space: nowrap; padding-inline: .28em;
}
.marquee { pointer-events: none; user-select: none; }
.mq-i.more { color: var(--on-night-mute); }
.mq-s { color: var(--red); font-size: clamp(16px, 1.8vw, 28px); }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; width: auto; }
  .mq-set { flex-wrap: wrap; padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .mq-set[aria-hidden="true"] { display: none; }
}

/* ---------- índice de proyectos ---------- */
.works { padding-bottom: var(--section); }
.works-head { margin-bottom: clamp(28px, 4vw, 64px); }
.work-list { border-top: 1px solid var(--ink); }
.work-row {
  position: relative; display: grid; align-items: center; gap: 16px;
  grid-template-columns: 4.5em minmax(0, 1.4fr) minmax(0, 1.2fr) 7em 1.5em;
  padding: clamp(14px, 1.6vw, 24px) 16px clamp(14px, 1.6vw, 24px) 22px;
  border-bottom: 1px solid var(--line);
  /* color de la marca: una franja fija a la izquierda que se expande al pasar el ratón */
  background: linear-gradient(var(--c), var(--c)) no-repeat 0 0 / 6px 100%;
  transition: background-size .55s cubic-bezier(.7, 0, .2, 1), color .3s ease;
}
.work-row .n {
  justify-self: start; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 4px 9px; border-radius: 999px; background: var(--c); color: var(--on);
  transition: background .3s ease, color .3s ease;
}
.work-row .t { font-size: var(--fs-xl); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.work-row .d { font-size: var(--fs-s); color: var(--mute); }
.work-row .y { font-size: var(--fs-s); text-align: right; font-variant-numeric: tabular-nums; }
.work-row .ar { text-align: right; transition: transform .25s ease; }
.work-row .thumb { display: none; }
@media (hover: hover) {
  .work-row:hover { background-size: 100% 100%; color: var(--on); }
  .work-row:hover .d { color: var(--on); opacity: .8; }
  .work-row:hover .n { background: var(--on); color: var(--c); }
  .work-row:hover .ar { transform: translateX(6px); }
}
.work-row .d { transition: color .3s ease; }
@media (max-width: 860px) {
  .work-row { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; row-gap: 4px; }
  .work-row .thumb { display: block; grid-row: 1 / 3; width: 76px; aspect-ratio: 4 / 5; object-fit: cover; outline: 3px solid var(--c); outline-offset: -3px; }
  .work-row { padding-left: 16px; background-size: 5px 100%; }
  .work-row .n { display: none; }
  .work-row .t { grid-column: 2; }
  .work-row .d { grid-column: 2; grid-row: 2; }
  .work-row .y { grid-column: 3; grid-row: 1; }
  .work-row .ar { grid-column: 3; grid-row: 2; }
}

/* ---------- selected graphics: carrusel 3d + barra de reproducción ---------- */
.graphics {
  --gx-bg: #f1d878; --cw: min(60vw, 780px);
  background: var(--gx-bg); transition: background-color 1.1s ease;
  padding-block: clamp(72px, 9vw, 140px);
  margin-bottom: var(--section);
  overflow: hidden;
}
.graphics .display-row { margin-bottom: clamp(36px, 5vw, 72px); }
.gx-stage {
  position: relative; height: calc(var(--cw) * .363 + 120px); margin-top: 24px;
  perspective: 1700px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  outline: none;
}
.gx-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
.gx-card {
  position: absolute; left: 50%; top: 0; width: var(--cw); margin-left: calc(var(--cw) / -2);
  transition: transform .85s cubic-bezier(.2, .75, .15, 1), opacity .6s ease, filter .6s ease;
  will-change: transform;
}
.gx-stage.dragging .gx-card { transition: none; }
.gx-hit {
  display: block; width: 100%; text-align: left; padding: 14px;
  border-radius: 20px; background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 50px 80px -46px rgba(20, 20, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.gx-img { display: block; overflow: hidden; border-radius: 12px; }
.gx-img img { display: block; width: 100%; aspect-ratio: 438 / 159; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.gx-card.active .gx-hit:hover .gx-img img { transform: scale(1.04); }
.gx-cap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 8px 4px; gap: 2px; }
.gx-cap b { font-size: var(--fs-l); font-weight: 400; }
.gx-cap > span { font-size: var(--fs-s); color: rgba(20, 20, 20, .6); }

.gx-hit { position: relative; }
/* stickers: la habilidad que destaca cada pieza */
.gx-stickers {
  position: absolute; z-index: 3; top: -16px; right: 22px; left: 22px;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; pointer-events: none;
}
.stk {
  font-size: var(--fs-s); font-weight: 600; white-space: nowrap;
  padding: 8px 15px; border-radius: 999px; border: 3px solid #fff;
  background: var(--red); color: #fff;
  box-shadow: 0 10px 20px -10px rgba(20, 20, 20, .5);
  transform: scale(0) rotate(-30deg);
  transition: transform .55s cubic-bezier(.3, 1.6, .5, 1) .35s;
}
.stk1 { background: var(--ink); }
.gx-card.active .stk0 { transform: rotate(-6deg); }
.gx-card.active .stk1 { transform: rotate(4deg) translateY(12px); transition-delay: .5s; }
.gx-hint { text-align: center; font-size: var(--fs-s); color: rgba(20, 20, 20, .6); margin-top: clamp(16px, 2vw, 28px); }
@media (prefers-reduced-motion: reduce) { .stk { transition: none; } }
@media (max-width: 760px) {
  .graphics { --cw: 84vw; }
  .stk { font-size: var(--fs-xs); padding: 6px 11px; border-width: 2px; }
  .gx-stickers { top: -12px; right: 12px; left: 12px; }
}

/* ---------- experience & education ---------- */
.cv {
  background: var(--blush);
  padding-block: clamp(72px, 9vw, 140px);
  margin-bottom: var(--section);
}
.cv h3 {
  color: var(--red); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 18px;
}
.cv { overflow: hidden; }
.cv-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 28px 48px; margin-bottom: clamp(48px, 6vw, 96px); }
.cv-head .display { padding-top: clamp(8px, 2vw, 40px); }

/* acreditación colgante: cuelga desde el borde superior del bloque y se balancea */
.pass-wrap {
  --pad: clamp(72px, 9vw, 140px);
  width: min(320px, 82vw); margin-top: calc(-1 * var(--pad)); margin-right: clamp(0px, 4vw, 80px);
  transform-origin: 50% 0; transform: rotate(var(--tilt, 0deg));
  transition: transform .9s cubic-bezier(.2, .8, .25, 1.25);
}
.pass { transform-origin: 50% 0; animation: swing 5s ease-in-out infinite; }
@keyframes swing { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
.pass-strap {
  display: block; width: 30px; height: calc(var(--pad) + clamp(20px, 3vw, 50px)); margin: 0 auto;
  background: linear-gradient(90deg, #c51e18 0 3px, var(--red) 3px calc(100% - 3px), #c51e18 calc(100% - 3px));
  position: relative; overflow: hidden;
}
.pass-strap::before {
  content: "PORTFOLIO ✷ 2026/27 ✷ PORTFOLIO ✷ 2026/27 ✷ PORTFOLIO ✷";
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  writing-mode: vertical-rl; white-space: nowrap;
  font-size: 9px; font-weight: 700; letter-spacing: .22em; color: rgba(255, 255, 255, .9);
}
.pass-clip {
  display: block; width: 46px; height: 20px; margin: -3px auto 0; position: relative; z-index: 2;
  border-radius: 4px 4px 10px 10px;
  background: linear-gradient(180deg, #d9d6d3, #8f8a86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 4px rgba(20, 20, 20, .25);
}
.pass-card {
  margin-top: -8px; background: var(--paper); border-radius: 16px; overflow: hidden;
  box-shadow: 0 46px 70px -34px rgba(20, 20, 20, .55), 0 2px 0 rgba(20, 20, 20, .04);
}
.pass-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 18px 10px; background: var(--red); color: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  position: relative;
}
.pass-top::before { /* ranura del clip */
  content: ""; position: absolute; left: 50%; top: 7px; width: 34px; height: 6px; margin-left: -17px;
  border-radius: 6px; background: var(--blush);
}
.pass-body { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: end; padding: 16px 18px; }
.pass-photo { width: 88px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.pass-name { font-size: 24px; font-weight: 300; line-height: 1.02; letter-spacing: -0.015em; }
.pass-role { margin-top: 8px; font-size: 12px; line-height: 1.3; color: var(--mute); }
.pass-data { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 0; padding: 12px 18px; border-top: 1px dashed var(--line); }
.pass-data dt { font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pass-data dd { margin: 2px 0 0; font-size: 12px; font-weight: 600; }
.pass-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 18px 16px; font-size: 10px; color: var(--mute); }
.pass-code {
  flex: none; width: 92px; height: 28px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 7px, var(--ink) 7px 10px, transparent 10px 11px, var(--ink) 11px 12px, transparent 12px 15px);
}
@media (prefers-reduced-motion: reduce) { .pass { animation: none; } }
@media (max-width: 760px) {
  .cv-head { flex-direction: column; align-items: stretch; }
  .pass-wrap { order: -1; align-self: center; margin-right: 0; }
  .cv-head .display { padding-top: 0; }
}
.cv-card { display: flex; gap: 18px; align-items: flex-start; }
.cv-card img { width: 104px; background: var(--paper); padding: 6px; transform: rotate(3deg); box-shadow: 0 16px 30px -18px rgba(20, 20, 20, .45); }
.cv-card p { font-size: var(--fs-s); line-height: 1.5; }
.cv-card .nm { font-size: var(--fs-l); font-weight: 300; margin-bottom: 4px; }

/* línea de tiempo */
.tl { margin-bottom: clamp(64px, 8vw, 120px); }
.tl-axis, .tl-row {
  display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 48px);
}
.tl-track { position: relative; }
.tl-row .tl-track, .tl-axis .tl-track {
  background: repeating-linear-gradient(to right, rgba(20, 20, 20, .13) 0 1px, transparent 1px calc(100% / 6));
}
.tl-axis .tl-track { height: 30px; }
.tl-axis i {
  position: absolute; top: 0; padding-left: 7px;
  font-style: normal; font-size: var(--fs-xs); color: var(--mute); font-variant-numeric: tabular-nums;
}
.tl-now {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--fs-xs); font-weight: 600; color: var(--red); background: var(--blush); padding-inline: 4px;
}
.tl-row .tl-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--now); width: 0;
  border-left: 1px dashed var(--red);
}
.tl-row { border-top: 1px solid rgba(20, 20, 20, .13); }
.tl-row:last-child { border-bottom: 1px solid rgba(20, 20, 20, .13); }
.tl-lab {
  display: grid; justify-items: start; text-align: left; width: 100%;
  padding: 16px 36px 16px 0; position: relative; gap: 2px;
}
.tl-role { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.tl-comp { font-size: var(--fs-l); font-weight: 300; line-height: 1.15; transition: color .2s ease; }
.tl-when { font-size: var(--fs-s); color: var(--mute); white-space: nowrap; }
.tl-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.tl-desc { min-height: 0; overflow: hidden; font-size: var(--fs-s); line-height: 1.45; color: var(--mute); max-width: 46ch; }
.tl-row.open .tl-more { grid-template-rows: 1fr; }
.tl-row.open .tl-desc { padding-top: 6px; }
.tl-plus { position: absolute; right: 4px; top: 12px; font-size: 26px; font-weight: 200; line-height: 1; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .2s; }
.tl-row.open .tl-plus { transform: rotate(45deg); color: var(--red); }
.tl-row .tl-track { min-height: 64px; }
.tl-bar {
  position: absolute; top: 50%; height: 14px; transform: translateY(-50%);
  border-radius: 999px; background: var(--c);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .12s), height .3s ease;
}
.tl-row:hover .tl-bar, .tl-row.open .tl-bar { height: 22px; }
@media (hover: hover) { .tl-row:hover .tl-comp { color: var(--red); } }
.tl-bar.current::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; background: var(--red); border: 2px solid var(--blush);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(239, 43, 36, .55); } to { box-shadow: 0 0 0 16px rgba(239, 43, 36, 0); } }
.anim .tl .tl-bar { transform: translateY(-50%) scaleX(0); }
.anim .tl.in .tl-bar { transform: translateY(-50%) scaleX(1); }
@media (max-width: 760px) {
  .tl-axis, .tl-row { grid-template-columns: 1fr; }
  .tl-axis .tl-lab { display: none; }
  .tl-axis i { font-size: 10px; padding-left: 4px; }
  .tl-row .tl-track { min-height: 30px; margin-bottom: 14px; }
  .tl-lab { padding-bottom: 8px; }
  .tl-bar { height: 10px; }
  .tl-row:hover .tl-bar, .tl-row.open .tl-bar { height: 14px; }
}

/* educación + herramientas */
.cv-lower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(40px, 6vw, 110px); }
.cv-list { display: grid; font-size: var(--fs-s); line-height: 1.4; }
.cv-list.edu li { padding-block: 14px; border-top: 1px solid rgba(20, 20, 20, .13); }
.cv-list.edu li:last-child { border-bottom: 1px solid rgba(20, 20, 20, .13); }
.cv-list b { display: block; font-size: var(--fs-m); font-weight: 600; }
.cv-list p { color: var(--mute); }
.tool-g {
  display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 10px 16px; align-items: center;
  padding-block: 12px; border-top: 1px solid rgba(20, 20, 20, .13);
}
.tool-g:last-child { border-bottom: 1px solid rgba(20, 20, 20, .13); }
.tool-k { font-size: var(--fs-s); font-weight: 600; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  font-size: var(--fs-s); padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--ink); background: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.pill:hover { background: var(--red); border-color: var(--red); color: var(--paper); transform: rotate(-5deg) scale(1.08); }
.anim .tools .pill { opacity: 0; transform: translateY(14px) scale(.7); }
.anim .tools.in .pill {
  opacity: 1; transform: none;
  transition: opacity .45s ease calc(var(--i) * 45ms), transform .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * 45ms), background .2s, color .2s, border-color .2s;
}
.anim .tools.in .pill:hover { transform: rotate(-5deg) scale(1.08); transition-delay: 0s; }
@media (max-width: 860px) { .cv-lower { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .tool-g { grid-template-columns: 1fr; } }

/* ---------- botón portfolio pdf ---------- */
.cv-actions {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(10px, 1.2vw, 16px);
  max-width: 1180px; margin-top: clamp(48px, 6vw, 96px);
}
.pdf-btn, .reco-btn, .cvdoc-btn {
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px; text-align: left;
  padding: 16px 20px;
  background: var(--red); color: var(--paper);
  transition: background .25s ease;
}
.reco-btn { background: var(--night); color: var(--on-night); }
.cvdoc-btn { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cvdoc-btn:hover { background: var(--ink); color: var(--paper); }
.cvdoc-btn:hover .pdf-ar { transform: translate(4px, -4px); }
.pdf-k { font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.reco-q { font-size: var(--fs-s); line-height: 1.45; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.pdf-t { font-size: var(--fs-l); font-weight: 300; line-height: 1; letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; }
.pdf-ar { display: inline-block; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.pdf-btn:hover { background: var(--night); }
.pdf-btn:hover .pdf-ar { transform: translateY(5px); }
.reco-btn:hover { background: var(--red); }
.reco-btn:hover .pdf-ar { transform: translateX(6px); }
@media (max-width: 960px) { .cv-actions { grid-template-columns: 1fr 1fr; } .reco-btn { grid-column: 1 / -1; } }
@media (max-width: 560px) { .cv-actions { grid-template-columns: 1fr; } }

/* ---------- recomendación + carta ---------- */


.letter {
  width: min(720px, calc(100% - 32px)); max-height: calc(100% - 32px);
  padding: 0; border: 0; color: var(--ink); background: var(--paper);
  box-shadow: 0 24px 80px rgba(20, 20, 20, .25);
}
.letter[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.letter::backdrop { background: rgba(20, 20, 20, .55); }
.letter-bar, .letter-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px clamp(20px, 5vw, 48px); font-size: var(--fs-s);
}
.letter-bar { border-bottom: 1px solid var(--line); }
.letter-bar p { font-weight: 600; }
.letter-foot { border-top: 1px solid var(--line); }
.letter-foot a, .letter-close { transition: color .2s ease; }
.letter-foot a:hover, .letter-close:hover { color: var(--red); }
.letter-body {
  overflow-y: auto; padding: clamp(24px, 4vw, 44px) clamp(20px, 5vw, 48px);
  display: grid; gap: 1em; font-size: var(--fs-m); line-height: 1.6; max-width: 66ch;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.letter-body .sign { margin-top: .5em; line-height: 1.4; }
body.letter-open { overflow: hidden; }

/* ---------- contacto: índice, como la lista de proyectos ---------- */
.contact-sec { padding-block: 0 clamp(48px, 6vw, 96px); }
.contact-mig { font-size: var(--fs-l); margin-top: .6em; }
.contact-mig i { font-style: italic; }
.contact-list { margin-top: clamp(28px, 4vw, 56px); border-top: 1px solid var(--ink); }
.contact-list li {
  display: grid; grid-template-columns: 10.5em minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding-block: clamp(14px, 1.6vw, 24px); border-bottom: 1px solid var(--line);
}
.contact-list .k { display: flex; align-items: center; gap: 12px; font-size: var(--fs-s); color: var(--mute); }
.ci {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: background .25s ease, stroke .25s ease, border-color .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.contact-list li:hover .ci { background: var(--red); border-color: var(--red); stroke: var(--paper); transform: rotate(-10deg) scale(1.08); }
.contact-list li:hover .ci circle[fill] { fill: var(--paper); }
.contact-list .v { font-size: var(--fs-xl); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; }
.contact-list .x { font-size: var(--fs-s); text-align: right; }
.contact-list a { transition: color .2s ease; }
@media (hover: hover) { .contact-list li:hover .v a { color: var(--red); } }
.copy { font-size: var(--fs-s); color: var(--mute); }
.copy:hover { color: var(--red); }
@media (max-width: 760px) {
  .contact-list li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .contact-list .k { grid-column: 1 / -1; }
  .ci { width: 34px; height: 34px; padding: 7px; }
  .contact-list .v { font-size: clamp(20px, 6vw, 28px); }
}

/* ---------- pie ---------- */
.site-foot { padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }

/* ============================================================
   PÁGINA DE PROYECTO
   ============================================================ */
.case-top { padding-block: clamp(16px, 2vw, 28px) 0; }
.case-intro { padding-block: clamp(32px, 5vw, 80px) var(--section); }
.case-intro .inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(16px, 1.4vw, 24px);
}
.case-a { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; z-index: 2; min-width: 0; }
.case-title {
  font-size: var(--fs-title); font-weight: 400; line-height: .84; letter-spacing: -0.035em;
  margin-right: -40%;           /* el título pisa la foto, como en el pdf */
}
.case-title span { display: block; white-space: nowrap; }
.case-sub { font-size: var(--fs-xl); font-weight: 300; line-height: .9; letter-spacing: -0.02em; margin-top: .25em; }
.case-year { font-size: clamp(44px, 5vw, 72px); font-weight: 200; line-height: 1; letter-spacing: -0.02em; margin-bottom: 8px; }
.case-desc { display: grid; gap: 1em; font-size: var(--fs-s); max-width: 50ch; }
.case-cover { position: relative; z-index: 1; min-width: 0; }
.case-cover img { width: 100%; aspect-ratio: 412 / 513; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.case-c { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; }
.disc { font-weight: 600; font-size: var(--fs-l); line-height: 1.12; }
.credits { text-align: right; font-size: var(--fs-s); line-height: 1.35; }
.credits .lbl { margin-bottom: .9em; }
@media (max-width: 860px) {
  .case-intro .inner { grid-template-columns: 1fr; }
  .case-title { margin-right: 0; font-size: clamp(52px, 17vw, 96px); }
  .case-title span { white-space: normal; }
  .case-cover { order: 2; }
  .case-a { order: 1; gap: 28px; }
  .case-c { order: 3; flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .credits { text-align: left; }
}

.gallery-sec { padding-bottom: clamp(56px, 7vw, 120px); }
.gallery-sec .tri { margin-bottom: clamp(16px, 2vw, 28px); }
.rows { display: grid; gap: var(--gap); }
.row { display: flex; gap: var(--gap); }
.row > .m { flex: var(--r) 1 0; min-width: 0; }
.m { position: relative; background: #f2f0ef; overflow: hidden; }
.m img, .m video { width: 100%; height: 100%; aspect-ratio: var(--r); object-fit: cover; }
.m button.open { position: absolute; inset: 0; width: 100%; cursor: zoom-in; }
.m.is-video .open { cursor: pointer; }
.m .vid-tag {
  position: absolute; left: 10px; bottom: 10px; pointer-events: none;
  font-size: var(--fs-xs); background: var(--paper); padding: 3px 8px;
}
@media (max-width: 700px) {
  .row { flex-wrap: wrap; }
  .row > .m { flex: 1 1 100%; }
  .pair .row > .m { flex: 1 1 calc(50% - var(--gap)); }
}

/* navegación al final de cada proyecto: volver | siguiente */
.case-nav { padding-block: clamp(32px, 5vw, 72px) clamp(48px, 6vw, 96px); }
.case-nav .inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(10px, 1.2vw, 16px); }
.cn-back, .cn-next {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(18px, 2.2vw, 30px); min-height: clamp(150px, 16vw, 230px);
  transition: background .35s ease, color .35s ease;
}
.cn-back { background: var(--sheet); }
.cn-next { background: var(--c); color: var(--on); }
.case-nav .lbl { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.case-nav .t { font-size: var(--fs-xl); font-weight: 300; line-height: 1; letter-spacing: -0.02em; }
.cn-next .t { font-size: clamp(32px, 4.6vw, 72px); font-weight: 200; }
.case-nav .ar { display: inline-block; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.cn-back:hover { background: var(--ink); color: var(--paper); }
.cn-back:hover .ar { transform: translateX(-8px); }
.cn-next:hover .ar { transform: translateX(10px); }
@media (max-width: 640px) {
  .case-nav .inner { grid-template-columns: 1fr; }
  .cn-next { order: -1; }
  .cn-back, .cn-next { min-height: 0; }
}
.back-link { justify-self: start; font-size: var(--fs-s); transition: color .2s; }
.back-link span { display: inline-block; transition: transform .3s; }
.back-link:hover { color: var(--red); }
.back-link:hover span { transform: translateX(-4px); }

/* ---------- visor (lightbox) ---------- */
.lb {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--paper);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) var(--side-r) calc(env(safe-area-inset-bottom, 0px) + 12px) var(--side);
}
.lb[hidden] { display: none; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-s); min-height: 40px; }
.lb-count { font-variant-numeric: tabular-nums; color: var(--mute); }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-nav { display: flex; justify-content: space-between; font-size: var(--fs-s); min-height: 40px; align-items: center; }
.lb-nav button:hover, .lb-bar button:hover { color: var(--red); }

/* ============================================================
   PERSONALIDAD Y MOVIMIENTO
   ============================================================ */

/* sello giratorio de la portada */
.badge {
  position: absolute; left: 50cqw; top: 45cqw; translate: -50% 0; width: max(88px, 14cqw); aspect-ratio: 1;
  display: grid; place-items: center; z-index: 3; border-radius: 50%;
}
.badge-arrow {
  display: grid; place-items: center; width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: var(--red); color: var(--paper); font-size: max(18px, 2.6cqw); line-height: 1;
  animation: bob 1.6s ease-in-out infinite; transition: background .2s;
}
.badge:hover .badge-arrow { background: var(--ink); }
@keyframes bob { 0%, 100% { transform: translateY(-12%); } 50% { transform: translateY(14%); } }
@media (prefers-reduced-motion: reduce) { .badge-arrow { animation: none; } }
.badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; overflow: visible; }
.badge text { font-family: var(--sans); font-size: 9.6px; font-weight: 400; letter-spacing: .02em; fill: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
html:not([data-lang]) .badge text[lang="en"], html[data-lang="es"] .badge text[lang="en"], html[data-lang="en"] .badge text[lang="es"] { display: none; }

/* cursor rojo (solo con ratón) */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--red); color: var(--paper);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  transition: width .3s cubic-bezier(.2, .7, .2, 1), height .3s cubic-bezier(.2, .7, .2, 1), margin .3s cubic-bezier(.2, .7, .2, 1), opacity .2s;
  opacity: 0;
}
.cursor.on { opacity: 1; }
.cursor > span { position: absolute; opacity: 0; transition: opacity .2s; }
.cursor .c-l, .cursor .c-r { font-size: 30px; font-weight: 300; line-height: 1; }
.cursor.big { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.cursor.big.m-ver .c-ver, .cursor.big.m-l .c-l, .cursor.big.m-r .c-r { opacity: 1; }
.has-cursor .gx-stage, .has-cursor .gx-stage * { cursor: none; }
.has-cursor [data-cursor], .has-cursor [data-cursor] * { cursor: none; }

/* barrido rojo entre páginas */
.wipe {
  position: fixed; inset: 0; z-index: 200; background: var(--red); pointer-events: none;
  transform: translateY(100%); visibility: hidden;
}
.wipe.cover, .wipe.leave, .wipe.start { visibility: visible; }
.wipe.cover { transform: translateY(0); transition: transform .45s cubic-bezier(.7, 0, .3, 1); }
.wipe.leave { transform: translateY(-100%); transition: transform .6s cubic-bezier(.7, 0, .3, 1) .05s; }

/* apariciones al hacer scroll (solo si el navegador puede animarlas) */
.anim .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.anim .ln > span { display: block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .7, .1, 1); transition-delay: var(--d, 0s); }
.anim .in .ln > span, .anim .ln.in > span { transform: none; }
.anim [data-r="up"] { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .1, 1); transition-delay: var(--d, 0s); }
.anim [data-r="up"].in { opacity: 1; transform: none; }
/* cortina: un panel del color del fondo tapa la imagen y se recoge hacia arriba */
.anim [data-r="curtain"] { position: relative; }
.anim [data-r="curtain"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--paper); transform-origin: 50% 0;
  transition: transform 1.1s cubic-bezier(.7, 0, .2, 1); transition-delay: var(--d, 0s);
}
.anim [data-r="curtain"].in::after { transform: scaleY(0); }
.anim [data-r="curtain"] img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.2, .7, .1, 1); transition-delay: var(--d, 0s); }
.anim [data-r="curtain"].in img { transform: none; }

/* onda roja al tocar (móvil): el equivalente táctil del puntero */
.tap {
  position: fixed; left: 0; top: 0; z-index: 95; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--red); pointer-events: none;
  animation: tap .65s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes tap { from { transform: var(--p) scale(.4); opacity: .85; } to { transform: var(--p) scale(5); opacity: 0; } }

/* ---------- guiño: el miguelito de la roda ---------- */
.ct-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.mg { margin: 0; display: grid; justify-items: center; gap: 10px; flex: none; margin-right: clamp(0px, 4vw, 80px); }
.mg-btn { display: block; width: clamp(170px, 19vw, 260px); position: relative; }
.mg-svg { display: block; width: 100%; height: auto; overflow: visible; animation: mg-float 4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes mg-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }
.mg-btn:hover .mg-svg { animation-play-state: paused; }
.mg-btn.chomp .mg-svg { animation: mg-chomp .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mg-chomp { 0% { transform: scale(1) rotate(-3deg); } 35% { transform: scale(.88, 1.08) rotate(3deg); } 100% { transform: scale(1) rotate(-3deg); } }
.mg-svg .bt { transition: r .25s cubic-bezier(.3, 1.6, .5, 1); }
.mg-btn[data-bites="1"] .bt1, .mg-btn[data-bites="2"] .bt1, .mg-btn[data-bites="2"] .bt2,
.mg-btn[data-bites="3"] .bt1, .mg-btn[data-bites="3"] .bt2, .mg-btn[data-bites="3"] .bt3 { r: 17px; }
.mg-cap { display: grid; justify-items: center; gap: 2px; text-align: center; }
.mg-k { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mg-hint { font-size: var(--fs-s); color: var(--mute); }
/* azúcar glas y migas que caen */
.crumb { position: fixed; left: 0; top: 0; z-index: 94; pointer-events: none; will-change: transform, opacity; }
.crumb.sugar { width: 4px; height: 4px; border-radius: 50%; background: #fffdf8; box-shadow: 0 0 0 1px rgba(20, 20, 20, .1); }
.crumb.flake { width: 7px; height: 5px; border-radius: 45% 60% 40% 55%; background: #e3b471; }
@media (prefers-reduced-motion: reduce) { .mg-svg { animation: none; } }
@media (max-width: 640px) {
  .ct-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .mg { margin-right: 0; align-self: flex-end; grid-template-columns: auto auto; align-items: center; gap: 10px; }
  .mg-btn { width: 128px; }
  .mg-cap { justify-items: start; text-align: left; order: -1; }
}

/* ---------- vídeo de cada proyecto ---------- */
.vid-sec { padding-bottom: clamp(56px, 7vw, 120px); }
.vid-sec .tri { margin-bottom: clamp(16px, 2vw, 28px); }
.vid-frame {
  position: relative; margin: 0; overflow: hidden; background: var(--ink);
  aspect-ratio: var(--r); width: 100%;
}
.vid-frame video { display: block; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
/* botón grande de play (cuando está parado) */
.vid-big-play {
  position: absolute; left: 50%; top: 50%; width: clamp(64px, 8vw, 104px); aspect-ratio: 1; margin: 0;
  translate: -50% -50%; border-radius: 50%; background: var(--red); color: var(--paper);
  display: grid; place-items: center; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .3s;
}
.vid-big-play svg { width: 42%; fill: currentColor; margin-left: 6%; }
.vid-big-play:hover { transform: scale(1.08); }
.vid-frame.playing .vid-big-play { opacity: 0; pointer-events: none; transform: scale(.6); }
/* barra de controles */
.vid-ui {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 40px 14px 16px; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .5));
  opacity: 1; transition: opacity .35s;
}
.vid-frame.playing:not(:hover):not(:focus-within) .vid-ui { opacity: 0; }
@media (hover: none) { .vid-frame.playing .vid-ui { opacity: 1 !important; } }
.vid-ui button { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px; transition: background .2s; }
.vid-ui button:hover { background: rgba(255, 255, 255, .18); }
.vid-ui svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.vid-play .i-pause, .vid-frame.playing .vid-play .i-play { display: none; }
.vid-frame.playing .vid-play .i-pause { display: block; }
.vid-sound { background: rgba(255, 255, 255, .14); font-size: var(--fs-s); font-weight: 600; }
.vid-sound .i-on, .vid-sound .s-on { display: none; }
.vid-sound[aria-pressed="true"] .i-on, .vid-sound[aria-pressed="true"] .s-on { display: inline; }
.vid-sound[aria-pressed="true"] .i-off, .vid-sound[aria-pressed="true"] .s-off { display: none; }
html[data-lang="en"] .vid-sound[aria-pressed="true"] .s-on[lang="es"], html[data-lang="es"] .vid-sound[aria-pressed="true"] .s-on[lang="en"] { display: none; }
.vid-sound:not([aria-pressed="true"]) { background: var(--red); }
.vid-time { margin-left: auto; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; opacity: .9; padding-inline: 6px; }
.vid-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); cursor: pointer; }
.vid-bar::before { content: ""; position: absolute; inset: -10px 0 0; } /* zona táctil más grande */
.vid-bar span { display: block; height: 100%; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
/* vídeo vertical: el vídeo a un lado y el título grande al otro */
.vid.vertical { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: end; }
.vid.vertical .vid-frame { border-radius: 22px; }
.vid-aside { display: grid; gap: 10px; padding-bottom: 12px; }
.vid-big { font-size: var(--fs-display); font-weight: 200; line-height: .86; letter-spacing: -0.035em; text-wrap: balance; }
.vid-sub { font-size: var(--fs-s); color: var(--mute); }
@media (max-width: 760px) {
  .vid.vertical { grid-template-columns: 1fr; }
  .vid.vertical .vid-frame { width: min(100%, 360px); justify-self: center; }
  .vid-big { font-size: clamp(44px, 13vw, 80px); }
  .vid-sound .vid-sound-t { display: none; }
  .vid-sound { padding: 0 10px; }
}