:root{
  --bg: #FCD127;
  --bg-2: #F0C20F;
  --ink-70: rgba(21,25,28,.72);
  --wall: #25343c;
  --ink: #15191c;
  --ink-2: #1d2327;
  --paper: #e9e6dc;
  --muted: #a8b3b0;
  --phos: #7fe0c3;
  --plastic: #7d7a73;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --font-pixel: "Pixelify Sans", ui-monospace, monospace;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-cond: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --accent: #4a1fb3;
  --bar: #000000;
  --gap: 0px;   /* morado grape (el de la N64) para el texto sobre amarillo */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --line: rgba(21,25,28,.22);
  --wrap: 1400px;
  --gutter: 22px;

  /* Rectángulos sobre la escena, en % del ancho/alto de la imagen.
     Si cambias el arte, mide estos valores sobre tu PNG. */
  --tv-x: 47.185%;  --tv-y: 44.903%;  --tv-w: 5.63%;  --tv-h: 7.111%;
  --screen-x: 47.778%; --screen-y: 45.958%; --screen-w: 3.7037%; --screen-h: 5.004%;
}
@media (min-width: 860px){ :root{ --gutter: 48px; } }

*,*::before,*::after{ box-sizing: border-box; }
html{ background: var(--bg); scroll-behavior: smooth; }
html.is-open{ background: var(--bg); }
html.js:not(.is-open),
html.js:not(.is-open) body{ overflow: hidden; height: 100%; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, video{ display: block; max-width: 100%; }
a{ color: inherit; }
[hidden]{ display: none !important; }
::selection{ background: var(--ink); color: var(--bg); }
:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
.wrap{ max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link{
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 10px 16px; font-family: var(--font-pixel);
}
.skip-link:focus{ left: 8px; }

/* ============ INTRO ============ */
.intro{
  position: relative; height: 100vh; height: 100svh; min-height: 480px;
  overflow: hidden; background: var(--bg);
  transition: background-color .7s ease;
  display: flex; justify-content: center; align-items: center;
}
.stage{
  position: relative; flex: none;
  width: 100vw;
  width: max(100vw, min(calc(100svh * 16 / 9), 400vw));
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  perspective: 1500px;
  transform-origin: 50% 50%;
  transition: transform 2.2s var(--ease);
}
/* La escena se inclina un poco siguiendo el cursor (lo mueve main.js con --rx / --ry) */
.tilt{
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.scene-bg{ fill: var(--bg); }
.scene{ position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: opacity .7s ease; }

.tv-hit{
  position: absolute; z-index: 3; cursor: pointer;
  left: var(--tv-x); top: var(--tv-y); width: var(--tv-w); height: var(--tv-h);
  background: transparent; border: 0; padding: 0;
}
/* área de toque más grande que la tele, útil en celular */
.tv-hit::after{ content: ""; position: absolute; inset: -80%; }
.tv-hit:focus-visible{ outline-offset: 6px; }

.screen{
  position: absolute; z-index: 2; overflow: hidden; pointer-events: none;
  left: var(--screen-x); top: var(--screen-y); width: var(--screen-w); height: var(--screen-h);
  container-type: inline-size;
  border-radius: 9% / 11%; background: #0b1311;
  box-shadow: inset 0 0 .4cqw rgba(0,0,0,.6), 0 0 1.2cqw rgba(255,255,255,.55);
  transition: filter .3s ease, border-radius .6s ease, box-shadow .6s ease;
}
/* Pantalla completa: sin bordes, solo el reel (el blanco funde a negro) */
.is-full .screen{ border-radius: 0; box-shadow: none; }
.is-full .scene, .is-full .tv-hit{ opacity: 0; }
.is-full .intro{ background: #000; }
.tv-hit:hover + .screen,
.tv-hit:focus-visible + .screen{ filter: brightness(1.35) saturate(1.2); }
.is-open .screen{ pointer-events: auto; }

.screen > *{ position: absolute; inset: 0; }
.screen #reel{ width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity .8s ease; }
.is-zoomed .screen #reel{ opacity: 1; }

/* vista previa en loop mientras la tele espera (si no existe el archivo, queda la pantalla oscura) */
.screen__preview{ width: 100%; height: 100%; object-fit: cover; background: #0e1b17; transition: opacity .6s ease; }
.screen__preview.failed{ opacity: 0; }
.is-zoomed .screen__preview{ opacity: 0; }

.screen__idle{
  display: grid; place-items: center; text-align: center;
  background: rgba(14,27,23,.35);
  transition: opacity .5s ease;
}
.is-zoomed .screen__idle{ opacity: 0; pointer-events: none; }
.screen__btn{
  font-family: var(--font-pixel); font-weight: 700; font-size: 17cqw; line-height: 1; color: #0e1b17;
  background: var(--phos); padding: .4em .85em; box-shadow: 0 1.6cqw 0 #3a8f7a;
  animation: blink 1.2s steps(2, jump-none) infinite;
}
@keyframes blink{ 50%{ opacity: .35; } }

/* vidrio curvo: reflejo y viñeta */
.screen__glass{
  pointer-events: none; transition: opacity .5s ease;
  background:
    linear-gradient(118deg, rgba(255,255,255,.3) 0 14%, rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,.4) 100%);
}
.is-zoomed .screen__glass{ opacity: 0; }

.sound{
  position: absolute; z-index: 5; left: 16px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-pixel); font-weight: 600; font-size: .95rem; color: var(--ink-70);
  transition: opacity .3s ease;
}
.sound input{ accent-color: var(--ink); width: 16px; height: 16px; cursor: pointer; }
.is-zoomed .sound{ opacity: 0; pointer-events: none; }

.screen__bars{
  display: none;
  background: linear-gradient(90deg,
    #c8c8c8 0 14.28%, #c8c800 14.28% 28.57%, #00c8c8 28.57% 42.85%, #00c800 42.85% 57.14%,
    #c800c8 57.14% 71.42%, #c80000 71.42% 85.71%, #0000c8 85.71% 100%);
}
.screen__missing{
  display: none; place-items: center; text-align: center;
  font-family: var(--font-pixel); font-weight: 700; font-size: 8cqw; color: #fff;
  background: rgba(0,0,0,.55);
}
.is-zoomed .screen.no-video .screen__bars{ display: block; }
.is-zoomed .screen.no-video .screen__missing{ display: grid; }
.screen.no-video video{ display: none; }

/* Las líneas de escaneo de la pantalla chica se apagan al hacer zoom (se verían enormes);
   en pantalla completa las dibuja una capa fija a tamaño real. */
.screen__scan{
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  transition: opacity .4s ease;
}
.is-zoomed .screen__scan{ opacity: 0; }
.intro::after{
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 4px);
  transition: opacity 1s ease;
}
.is-full .intro::after{ opacity: .35; }

.hint{
  position: absolute; z-index: 5; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0;
  font-family: var(--font-pixel); font-weight: 600; font-size: 1rem; color: var(--ink-70);
  animation: blink 1.4s steps(2, jump-none) infinite;
  transition: opacity .3s ease;
}
.is-zoomed .hint{ opacity: 0; pointer-events: none; }

.skip-intro{
  position: absolute; z-index: 5; top: 16px; right: 16px;
  font-family: var(--font-pixel); font-weight: 600; font-size: .95rem; color: var(--ink);
  background: var(--bg); border: 2px solid var(--ink); padding: 8px 14px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.skip-intro:hover{ background: var(--ink); color: var(--bg); }
.is-open .skip-intro{ display: none; }

/* ============ CONTROLES DEL REEL ============ */
.reelbar{
  position: absolute; z-index: 6; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px; background: rgba(15,18,20,.88); border: 2px solid rgba(233,230,220,.35);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.reelbar.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.reelbar__btn{
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-pixel); font-weight: 600; font-size: .95rem; color: var(--paper);
  background: transparent; border: 2px solid var(--paper); padding: 6px 12px; cursor: pointer;
}
.reelbar__btn:hover{ background: var(--phos); color: var(--ink); border-color: var(--phos); }
.reelbar__btn--go svg{ animation: bob 1.2s steps(2, jump-none) infinite; }
@keyframes bob{ 50%{ transform: translateY(3px); } }
.reelbar__seek{
  flex: 1; min-width: 0; height: 22px; accent-color: var(--phos); cursor: pointer; background: transparent;
}
.reelbar.no-video .reelbar__btn:not(.reelbar__btn--go),
.reelbar.no-video .reelbar__seek{ display: none; }
@media (max-width: 560px){
  .reelbar{ left: 8px; right: 8px; bottom: 8px; flex-wrap: wrap; }
  .reelbar__seek{ order: -1; flex-basis: 100%; }
  .reelbar__btn{ flex: 1; justify-content: center; font-size: .85rem; padding: 6px 8px; }
}

/* ============ BARRA SUPERIOR + ESQUINAS ============ */
.topbar{
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px; height: 34px; padding-inline: 12px;
  background: var(--bar); color: #fff;
  font-family: var(--font-cond); font-stretch: 72%; font-weight: 500; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase;
}
html.js:not(.is-open) .topbar{ display: none; }
.topbar a{ display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.topbar a:hover{ color: var(--bg); }
.chev{ flex: none; color: var(--bg); }

.corner{
  position: fixed; z-index: 19; bottom: 10px;
  font-family: var(--font-cond); font-stretch: 72%; font-weight: 500; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference; text-decoration: none;
  transition: opacity .3s ease;
}
.corner--bl{ left: 12px; }
.corner--br{ right: 12px; }
.corner:hover{ text-decoration: underline; text-underline-offset: 4px; }
html.js:not(.is-open) .corner, html:not(.past-intro) .corner, html.has-modal .corner{ opacity: 0; pointer-events: none; }

/* ============ MOSAICO ============ */
.work{ padding: 0; }
.mosaic{ list-style: none; margin: 0; padding: 0; }
.mrow{ aspect-ratio: calc(100 / var(--h)); }
.mosaic__error{ padding: 48px 16px; text-align: center; font-family: var(--font-cond); font-stretch: 75%; color: var(--accent); }
.mrow__in{ list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); height: 100%; }
.mrow + .mrow{ margin-top: var(--gap); }
.mosaic{ padding-inline: var(--gap); }
.tile{ flex-basis: 0; min-width: 0; position: relative; }
.tile__btn{
  position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; cursor: pointer; text-decoration: none;
  background: var(--bg-2); color: #fff; font: inherit;
}
.tile__btn img, .tile__btn video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__ph{
  position: absolute; inset: 0; display: grid; place-items: center; padding: 12px;
  font-family: var(--font-cond); font-stretch: 72%; font-size: 1.1rem; color: var(--ink-70);
}
.tile__btn img + .tile__ph, .tile__btn video + .tile__ph{ display: none; }
.tile__cap{
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center;
  font-family: var(--font-cond); font-stretch: 75%; font-weight: 500; font-size: 1.2rem; color: #fff;
  text-shadow: 0 0 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .2s ease;
}
.tile__btn:hover .tile__cap, .tile__btn:focus-visible .tile__cap{ opacity: 1; }
[data-captions="always"] .tile__cap{ opacity: 1; }
[data-captions="none"] .tile__cap{ display: none; }
.tile__btn:focus-visible{ outline: 3px solid var(--bg); outline-offset: -3px; }
@media (hover: none){
  .tile__cap{ font-size: 1rem; opacity: 1; }
}

/* ============ SOBRE MÍ ============ */
.about{
  display: grid; gap: 28px; padding: clamp(48px, 7vw, 110px) clamp(14px, 4vw, 80px) clamp(64px, 8vw, 120px);
  color: var(--accent); font-family: var(--font-cond); font-stretch: 75%; font-size: 1.12rem; line-height: 1.35;
  scroll-margin-top: 34px;
}
@media (min-width: 900px){ .about:has(.about__portrait:not([hidden])){ grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: start; } }
.about__portrait{
  margin: 0; aspect-ratio: 4 / 5; overflow: hidden; display: grid; place-items: center;
  background: conic-gradient(rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 0 50%, rgba(0,0,0,.06) 0 75%, rgba(0,0,0,.12) 0) 0 0 / 16px 16px;
}
.about__portrait img{ width: 100%; height: 100%; object-fit: cover; }
.about__ph{ font-size: 1.2rem; }
.about__cols{ display: grid; gap: 28px; }
@media (min-width: 640px){ .about__cols{ grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
#contacto{ scroll-margin-top: 60px; }
.about__cv{ display: inline-block; margin-top: 1.4em; color: inherit; font-weight: 600; }

/* texto enriquecido (sobre mí y bloques de texto de los proyectos) */
.rt > :first-child{ margin-top: 0; }
.rt p{ margin: 0 0 1em; }
.rt h2{ margin: 0 0 .5em; font-size: clamp(1.6rem, 3vw, 2.4rem); font-stretch: 70%; line-height: 1; letter-spacing: -.01em; }
.rt h3, .rt h4{ margin: 1.4em 0 .4em; font-size: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.rt ul, .rt ol{ margin: 0 0 1em; padding-left: 1.2em; }
.rt ul{ list-style: none; padding-left: 0; }
.rt ul li{ position: relative; padding-left: 1.2em; }
.rt ul li::before{ content: "✓"; position: absolute; left: 0; }
.rt a{ color: inherit; text-underline-offset: 3px; }
.rt a:hover{ background: var(--accent); color: var(--bg); text-decoration: none; }
.rt b, .rt strong{ font-weight: 700; }

.footer{ padding: 18px clamp(14px, 4vw, 80px) 56px; font-family: var(--font-cond); font-stretch: 75%; font-size: .95rem; color: var(--ink-70); }
.footer p{ margin: 0; max-width: 90ch; }
.footer a{ color: inherit; }

/* ============ PÁGINA DE PROYECTO ============ */
html.has-modal{ overflow: hidden; }
.proj{
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--accent);
}
.proj::backdrop{ background: var(--bg); }
.proj[open]{ animation: page-in .35s ease; }
@keyframes page-in{ from{ opacity: 0; } }
.proj__page{
  height: 100%; overflow: auto; overscroll-behavior: contain;
  font-family: var(--font-cond); font-stretch: 75%; font-size: 1.12rem; line-height: 1.35;
}
.proj__bar{
  position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center;
  height: 44px; padding-inline: 12px; pointer-events: none;
}
.proj__bar button{
  pointer-events: auto; cursor: pointer; padding: 4px 0; border: 0; background: none;
  font: inherit; font-stretch: 72%; font-size: 1.2rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
  color: #fff; mix-blend-mode: difference;
}
.proj__bar button:hover{ text-decoration: underline; text-underline-offset: 4px; }
.proj__share{ margin-left: auto; margin-right: 22px; }
.proj__blocks{ padding-bottom: 8px; }
.blk{ margin: 0 auto clamp(26px, 3vw, 44px); }
.blk.w-full{ width: 100%; }
.blk.w-wide{ width: min(100% - 28px, 1280px); }
.blk.w-medium{ width: min(100% - 28px, 920px); }
.blk.w-narrow{ width: min(100% - 28px, 640px); }
.blk__grid{ display: grid; grid-template-columns: 1fr; gap: 14px; }
.blk--text .blk__grid{ gap: 22px; }
@media (min-width: 760px){
  .blk__grid{ grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
  .blk--text .blk__grid{ gap: 28px; }
}
.blk--space.s-s{ height: 24px; }
.blk--space.s-m{ height: 64px; }
.blk--space.s-l{ height: 140px; }
.blk__empty{ grid-column: 1 / -1; margin: 0; padding: 48px 16px; text-align: center; border: 2px dashed currentColor; opacity: .6; }

.pm{ margin: 0; }
.pm__box{ position: relative; background: #000; }
.pm--image .pm__box{ background: var(--bg-2); }
.pm--image img{ display: block; width: 100%; height: auto; cursor: zoom-in; }
.pm--video .pm__box, .pm--embed .pm__box{ aspect-ratio: 16 / 9; }
.pm--loop .pm__box{ aspect-ratio: auto; background: transparent; }
.pm--loop video{ position: static !important; display: block; width: 100%; height: auto !important; }
.pm--video video, .pm--embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.pm figcaption{ margin: 8px 0 0; font-size: 1rem; }
.pm__missing{ margin: 0; padding: 48px 16px; text-align: center; font-size: 1.1rem; color: #fff; }
.pm--image .pm__missing{ color: var(--accent); }
.pm--video .pm__missing{ position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.pm--video .pm__missing[hidden]{ display: none; }
img.is-pixel{ image-rendering: pixelated; }

.proj__pager{
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  width: min(100% - 28px, 1280px); margin: clamp(48px, 6vw, 88px) auto 18px;
}
.proj__pager button{
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; border: 0; background: none;
  font: inherit; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; color: var(--accent);
}
.proj__pager button:hover strong{ text-decoration: underline; text-underline-offset: 4px; }
.proj__pager .chev{ color: var(--accent); }
#proj-prevp .chev{ transform: scaleX(-1); }
.mosaic--more{ margin-top: 0; }

/* ============ VISOR DE IMÁGENES ============ */
.lb{ position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10,10,12,.96); color: #fff; }
.lb::backdrop{ background: transparent; }
.lb[open]{ display: grid; place-items: center; }
#lb-img{ max-width: calc(100% - 120px); max-height: calc(100% - 110px); object-fit: contain; }
#lb-img.is-pixel{ image-rendering: pixelated; }
.lb__cap{ position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-family: var(--font-cond); font-stretch: 75%; font-size: 1.05rem; opacity: .85; }
.lb__btn, .lb__close{
  position: absolute; cursor: pointer; border: 0; background: none; color: #fff;
  font-family: var(--font-cond); font-stretch: 72%; text-transform: uppercase; font-size: 1.15rem;
}
.lb__btn{ top: 50%; transform: translateY(-50%); width: 56px; height: 90px; font-size: 3rem; line-height: 1; }
.lb__btn--prev{ left: 4px; }
.lb__btn--next{ right: 4px; }
.lb__close{ top: 12px; right: 14px; }
.lb__btn:hover, .lb__close:hover{ color: var(--bg); }
@media (max-width: 700px){ #lb-img{ max-width: 100%; } .lb__btn{ display: none; } }

/* ============ MOVIMIENTO REDUCIDO ============ */
@media (prefers-reduced-motion: reduce){
  .stage{ transition: none; }
  .proj[open]{ animation: none; }
  .screen__btn, .hint, .reelbar__btn--go svg{ animation: none; }
  .tilt{ transition: none; transform: none; }
  html{ scroll-behavior: auto; }
}


/* ============ MODO 3D (three.js) ============ */
.gl{ display: none; }
.is3d .gl{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.is3d .gl.is-ready{ opacity: 1; }
.is3d .stage{ display: none; }
/* el botón #tv se coloca encima de la tele (lo mueve scene3d.js); sirve de blanco clicable y de foco de teclado */
.is3d .tv-hit{ z-index: 3; }
.is3d .tv-hit::after{ inset: -22%; }
/* la pantalla del DOM (el reel) solo aparece al terminar el viaje, a pantalla completa */
.is3d .screen{
  left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; box-shadow: none;
  opacity: 0; visibility: hidden; transition: opacity .35s ease; z-index: 2;
}
.is3d.is-full .screen{ opacity: 1; visibility: visible; }
.is3d .screen__idle, .is3d .screen__glass{ display: none; }
.is3d.is-full .gl{ opacity: 0; transition-delay: .25s; pointer-events: none; }
.is3d .tv-hit:hover + .screen, .is3d .tv-hit:focus-visible + .screen{ filter: none; }

/* ============ CANALES (opción B) ============ */
.topbar__chs{ display: inline-flex; gap: 4px; margin-right: 6px; }
.topbar__chs a{ gap: 6px; padding: 3px 9px 3px 4px; border-radius: 3px; }
.topbar__chs .ch{
  display: inline-grid; place-items: center; height: 18px; padding: 0 5px; border-radius: 2px;
  font-family: var(--font-pixel); font-stretch: normal; font-size: .72rem; letter-spacing: .04em;
  background: rgba(255,255,255,.14); color: #fff;
}
.topbar__chs a[aria-current="true"]{ background: rgba(255,255,255,.1); }
.topbar__chs a[aria-current="true"] .ch{ background: #7fe0c3; color: #062b22; }
.topbar__name{ margin-right: 6px; }
@media (max-width: 640px){ .topbar{ gap: 12px; overflow-x: auto; } .topbar__chs [data-label]{ display: none; } .topbar > a[href="#sobre-mi"], .topbar > a[href="#contacto"]{ display: none; } }

.chan{ position: fixed; inset: 34px 0 0 0; z-index: 18; opacity: 0; transition: opacity .12s steps(2, jump-none); pointer-events: none; }
.chan.is-on{ opacity: 1; }
.chan canvas{ width: 100%; height: 100%; image-rendering: pixelated; }
.chan::after{ content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 4px); }
.osd{
  position: fixed; z-index: 19; top: 50px; right: 18px; margin: 0; pointer-events: none;
  font-family: var(--font-pixel); font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: .06em; white-space: pre;
  color: #7fe0c3; text-shadow: 0 0 6px rgba(127,224,195,.9), 0 0 2px #000, 2px 2px 0 #062b22;
  opacity: 0;
}
.osd.is-on{ animation: osd 1.9s steps(1, end) forwards; }
@keyframes osd{ 0%{ opacity: 1; } 70%{ opacity: 1; } 76%{ opacity: 0; } 82%{ opacity: 1; } 100%{ opacity: 0; } }

/* ============ ESTANTE DE CARTUCHOS ============ */
.tools{ padding: clamp(36px, 6vw, 90px) clamp(14px, 4vw, 80px) clamp(64px, 8vw, 120px); color: var(--accent); font-family: var(--font-cond); font-stretch: 75%; font-size: 1.12rem; line-height: 1.35; scroll-margin-top: 34px; }
.tools__intro{ max-width: 60ch; margin-bottom: clamp(28px, 4vw, 56px); font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.25; }
.shelf{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 40px); }
.slot__btn{ display: grid; gap: 6px; color: inherit; text-decoration: none; }
.slot__name{ margin-top: 10px; font-weight: 700; font-size: 1.25rem; }
.slot__tag{ opacity: .85; }
.slot__price{ font-family: var(--font-pixel); font-stretch: normal; font-size: .9rem; }

/* el cartucho: silueta de N64 en SVG + etiqueta encima */
.cart{ position: relative; display: block; aspect-ratio: 116 / 86; filter: drop-shadow(0 10px 0 rgba(0,0,0,.14)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), filter .35s ease; }
.cart__body{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cart__plastic{ fill: var(--shell, #8f9096); }
.cart__ridge{ fill: none; stroke: rgba(0,0,0,.25); stroke-width: .8; }
.cart__well{ fill: rgba(0,0,0,.18); }
.cart__label{
  position: absolute; left: 11.2%; right: 11.2%; top: 28.5%; bottom: 10%; overflow: hidden; border-radius: 2px;
  background: #1d2327; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.cart__label img, .cart__label video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.cart__title{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; text-align: left;
  font-family: var(--font-cond); font-stretch: 72%; font-weight: 800; font-size: clamp(.7rem, 1.1vw, .95rem); text-transform: uppercase; letter-spacing: .02em;
  color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75));
}
.shell--gris{ --shell: #8d8e94; }
.shell--negro{ --shell: #2a2b30; }
.shell--humo{ --shell: rgba(48,48,56,.82); }
.shell--dorado{ --shell: #c8a13a; }
.shell--rojo{ --shell: #c23b2e; }
.shell--azul{ --shell: #2c5fd6; }
.shell--verde{ --shell: #2f8a58; }
.shell--morado{ --shell: #6b3fd1; }
.slot__btn:hover .cart, .slot__btn:focus-visible .cart{ transform: translateY(-14px) rotate(-1.5deg); filter: drop-shadow(0 22px 6px rgba(0,0,0,.2)); }
.slot__btn:focus-visible{ outline: none; }
.slot__btn:focus-visible .cart__label{ box-shadow: inset 0 0 0 3px var(--bg); }
.shelf--sm{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; }
.slot--sm .slot__name{ font-size: 1rem; margin-top: 4px; }

/* ============ PÁGINA DE HERRAMIENTA ============ */
.tool-hero{
  display: grid; gap: clamp(22px, 4vw, 60px); align-items: center;
  width: min(100% - 28px, 1280px); margin: 8px auto clamp(32px, 4vw, 56px);
}
@media (min-width: 820px){ .tool-hero{ grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.cart--big{ max-width: 520px; filter: drop-shadow(0 18px 0 rgba(0,0,0,.14)); }
.tool-hero__meta{ margin: 0 0 8px; font-family: var(--font-pixel); font-stretch: normal; font-size: .85rem; opacity: .8; }
.tool-hero__title{ margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); font-stretch: 68%; font-weight: 800; line-height: .92; letter-spacing: -.01em; }
.tool-hero__tag{ margin: 14px 0 0; max-width: 40ch; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.25; }
.tool-hero__price{ margin: 18px 0 0; font-family: var(--font-pixel); font-stretch: normal; font-size: 1.2rem; }
.tool-hero__btns{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tbtn{
  display: inline-flex; align-items: center; gap: 6px; padding: 12px 18px; text-decoration: none;
  font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em;
  background: var(--accent); color: var(--bg); border: 2px solid var(--accent);
}
.tbtn:hover{ background: transparent; color: var(--accent); }
.tbtn--ghost{ background: transparent; color: var(--accent); }
.tbtn--ghost:hover{ background: var(--accent); color: var(--bg); }

.compare{ position: relative; overflow: hidden; background: #000; user-select: none; }
.compare img{ display: block; width: 100%; height: auto; image-rendering: pixelated; pointer-events: none; }
.compare__before{ position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.compare__before img{ width: 100%; height: 100%; object-fit: cover; }
.compare__handle{ position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.compare__handle::after{ content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 6px 8px; border-radius: 3px; background: #fff; color: #111; font: 700 14px/1 system-ui, sans-serif; white-space: nowrap; }
.compare__range{ position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__tag{ position: absolute; top: 10px; padding: 3px 8px; background: rgba(0,0,0,.6); color: #fff; font-family: var(--font-pixel); font-size: .85rem; pointer-events: none; }
.compare__tag--l{ left: 10px; }
.compare__tag--r{ right: 10px; }

.madewith, .moretools, .madewith-line{ width: min(100% - 28px, 1280px); margin: clamp(40px, 5vw, 72px) auto 0; }
.madewith h3, .moretools h3, .madewith-line h3{ margin: 0 0 14px; font-size: 1em; text-transform: uppercase; letter-spacing: .02em; }
.mosaic--madewith .mrow{ aspect-ratio: calc(100 / var(--h)); }
.madewith-line .shelf--sm{ grid-template-columns: repeat(auto-fill, minmax(130px, 170px)); }
.proj__page.is-tool .proj__pager{ margin-top: clamp(40px, 5vw, 64px); }

/* reproductor del reel: volumen */
.reelbar__vol{ flex: none; width: 96px; accent-color: var(--phos); cursor: pointer; }
.reelbar.no-video .reelbar__vol{ display: none; }
@media (max-width: 560px){ .reelbar__vol{ display: none; } }

/* filtros por etiqueta (canal 1) */
.tagbar{
  display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 12px 12px 10px;
  font-family: var(--font-cond); font-stretch: 75%; font-weight: 500; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--accent);
}
.tagbar button{ padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; opacity: .55; }
.tagbar button:hover{ opacity: 1; }
.tagbar button[aria-pressed="true"]{ opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tagbar sup{ margin-left: 3px; font-size: .65em; }
.mosaic.is-filtering{ animation: mosaic-in .35s ease; }
@keyframes mosaic-in{ from{ opacity: 0; } }

/* ===== fuente de títulos (elegible en el editor) ===== */
:root{ --font-title: "Silkscreen", var(--font-cond); --title-weight: 700; }
.tile__cap{ font-family: var(--font-title); font-weight: var(--title-weight); font-stretch: normal; letter-spacing: .01em; font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.15; }
[data-title-font="silkscreen"] .tile__cap{ font-size: clamp(.85rem, 1.25vw, 1.15rem); text-transform: uppercase; }
[data-title-font="jersey"] .tile__cap, [data-title-font="vt323"] .tile__cap{ font-size: clamp(1.25rem, 2vw, 1.8rem); }
.slot__name{ font-family: var(--font-title); font-weight: var(--title-weight); font-stretch: normal; }
.tool-hero__title{ font-family: var(--font-title); font-weight: var(--title-weight); font-stretch: normal; }
.proj__title{ font-family: var(--font-title); font-weight: var(--title-weight); font-stretch: normal; }

/* ===== logo (pixel negro sobre amarillo) ===== */
.logo-mark{ display: inline-block; flex: none; width: 18px; height: 18px; background: center / cover no-repeat; image-rendering: pixelated; border-radius: 2px; }
.screen__bug{ position: absolute !important; inset: auto 2.2% auto auto !important; top: 3% !important; width: 4.5% !important; height: auto !important; opacity: 0; z-index: 4; pointer-events: none; image-rendering: pixelated; transition: opacity .6s ease; }
.is-full .screen__bug{ opacity: .75; }
.screen.no-video .screen__bug{ display: none; }

/* ===== galerías: disposición ===== */
.blk--media .blk__grid{ gap: var(--bgap, 14px); }
.lay-square .pm__box{ aspect-ratio: 1; overflow: hidden; }
.lay-square .pm__box img, .lay-square .pm__box video{ position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
.lay-square .pm--video .pm__box, .lay-square .pm--embed .pm__box{ aspect-ratio: 1; }
@media (min-width: 760px){
  .lay-masonry .blk__grid{ display: block; columns: var(--cols, 2); column-gap: var(--bgap, 14px); }
  .lay-masonry .pm{ break-inside: avoid; margin-bottom: var(--bgap, 14px); }
  .lay-justify .blk__grid{ display: flex; flex-wrap: wrap; }
  .lay-justify .pm{ flex: var(--ar, 1.5) 1 calc(var(--ar, 1.5) * 260px); min-width: 0; }
  .lay-justify .pm__box{ aspect-ratio: var(--ar, 1.5); overflow: hidden; }
  .lay-justify .pm__box img, .lay-justify .pm__box video{ width: 100%; height: 100% !important; object-fit: cover; }
}
.lay-slider{ position: relative; }
.lay-slider .blk__grid{ display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lay-slider .pm{ flex: 0 0 auto; width: auto; scroll-snap-align: center; }
.lay-slider .pm__box{ height: min(72vh, 680px); aspect-ratio: var(--ar, 1.5); }
.lay-slider .pm__box img, .lay-slider .pm__box video{ width: 100%; height: 100% !important; object-fit: contain; }
.sl-btn{ position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 46px; height: 70px; border: 0; cursor: pointer; background: rgba(0,0,0,.55); color: #fff; font-size: 2.2rem; line-height: 1; }
.sl-btn--prev{ left: 6px; }
.sl-btn--next{ right: 6px; }
.sl-btn:hover{ background: var(--accent); }

/* ===== v7: mosaico que brilla al pasar el mouse ===== */
.tile__btn img, .tile__btn video{ transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.tile__btn::after{
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s ease;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 66%) no-repeat;
  background-size: 250% 100%; background-position: 120% 0;
  box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 40px rgba(255,255,255,.25);
}
@media (hover: hover){
  .tile__btn:hover img, .tile__btn:hover video{ transform: scale(1.035); filter: brightness(1.14) saturate(1.12); }
  .tile__btn:hover::after{ opacity: 1; animation: tile-shine .9s ease forwards; }
}
@keyframes tile-shine{ from{ background-position: 120% 0; } to{ background-position: -60% 0; } }
.tile__cap{ z-index: 3; }

/* títulos del mosaico en celular: más chicos */
@media (max-width: 700px){
  .tile__cap{ padding: 8px; font-size: .95rem; }
  [data-title-font="silkscreen"] .tile__cap{ font-size: .62rem; letter-spacing: .02em; }
  [data-title-font="jersey"] .tile__cap, [data-title-font="vt323"] .tile__cap{ font-size: 1.05rem; }
  [data-title-font="pixelify"] .tile__cap{ font-size: .82rem; }
  [data-title-font="grotesk"] .tile__cap, [data-title-font="archivo"] .tile__cap{ font-size: .85rem; }
}

/* logo un tercio más chico */
.logo-mark{ width: 12px; height: 12px; border-radius: 1px; }
.screen__bug{ width: 3% !important; }

/* canal de herramientas apagado */
[data-tools="off"] [data-ch="2"]{ display: none !important; }
[data-tools="off"] .topbar .ch{ display: none; }

/* ===== v7: bloques de las páginas de proyecto ===== */
.blk.pad-s{ margin-bottom: clamp(14px, 1.6vw, 22px); }
.blk.pad-l{ margin-bottom: clamp(56px, 7vw, 110px); }
.blk.has-bg{
  position: relative; background: var(--blk-bg); color: var(--blk-fg);
  box-shadow: 0 0 0 100vmax var(--blk-bg); clip-path: inset(0 -100vmax);
  padding-block: clamp(28px, 4vw, 56px); margin-bottom: 0;
}
.blk.has-bg.pad-s{ padding-block: clamp(14px, 2vw, 24px); }
.blk.has-bg.pad-l{ padding-block: clamp(56px, 8vw, 120px); }
.blk.has-bg + .blk:not(.has-bg){ margin-top: clamp(26px, 3vw, 44px); }

/* encabezado de bloque */
.blk__head{ margin: 0 0 clamp(14px, 1.8vw, 24px); }
.blk__title{ margin: 0; font-family: var(--font-title); font-weight: var(--title-weight); font-stretch: normal; line-height: 1.05; letter-spacing: .005em; font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
.blk__sub{ margin: .35em 0 0; max-width: 62ch; opacity: .78; font-size: 1.05em; line-height: 1.35; }
.hs-s .blk__title{ font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hs-l .blk__title{ font-size: clamp(1.7rem, 3.6vw, 3rem); }
.hs-xl .blk__title{ font-size: clamp(2.2rem, 6vw, 5rem); }
[data-title-font="silkscreen"] .blk__title{ text-transform: uppercase; font-size: clamp(1rem, 1.8vw, 1.5rem); }
[data-title-font="silkscreen"] .hs-s .blk__title{ font-size: clamp(.8rem, 1.1vw, 1rem); }
[data-title-font="silkscreen"] .hs-l .blk__title{ font-size: clamp(1.3rem, 2.8vw, 2.3rem); }
[data-title-font="silkscreen"] .hs-xl .blk__title{ font-size: clamp(1.7rem, 4.6vw, 3.8rem); }
.hal-c .blk__head{ text-align: center; }
.hal-c .blk__sub{ margin-inline: auto; }
.hal-r .blk__head{ text-align: right; }
.hal-r .blk__sub{ margin-left: auto; }
.blk--heading .blk__head{ margin: 0; }
.blk--heading.has-line .blk__head::after{ content: ""; display: block; height: 3px; width: 64px; margin-top: 18px; background: currentColor; }
.blk--heading.has-line.hal-c .blk__head::after{ margin-inline: auto; }
.blk--heading.has-line.hal-r .blk__head::after{ margin-left: auto; }

/* texto: estilo base del bloque */
.blk--text.ts-s{ font-size: .9em; }
.blk--text.ts-l{ font-size: 1.22em; }
.blk--text.ts-xl{ font-size: 1.55em; line-height: 1.2; }
.blk--text.tal-c .rt{ text-align: center; }
.blk--text.tal-r .rt{ text-align: right; }
.blk--text.tal-j .rt{ text-align: justify; hyphens: auto; }
.blk--text.tf-body .rt{ font-family: var(--font-body); font-stretch: normal; }
.blk--text.tf-title .rt{ font-family: var(--font-title); font-weight: var(--title-weight); font-stretch: normal; }
.blk--text.tf-mono .rt{ font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-stretch: normal; font-size: .92em; }
.blk--text.tf-serif .rt{ font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-stretch: normal; }
.blk--text.lh-s .rt{ line-height: 1.18; }
.blk--text.lh-l .rt{ line-height: 1.75; }
.blk--text.ti .rt p{ text-indent: 2em; }
.blk--text.ti .rt p:first-child{ text-indent: 0; }
.blk--text.dc .rt > p:first-of-type::first-letter{ float: left; margin: .05em .12em 0 0; font-family: var(--font-title); font-size: 3.4em; line-height: .82; }
@media (min-width: 760px){
  .blk--text.cdiv .rt + .rt{ position: relative; }
  .blk--text.cdiv .rt + .rt::before{ content: ""; position: absolute; left: -14px; top: 0; bottom: 0; border-left: 1px solid currentColor; opacity: .3; }
}

/* texto: formato dentro del texto (barra de formato del editor) */
.rt .t-xs{ font-size: .75em; }
.rt .t-s{ font-size: .88em; }
.rt .t-l{ font-size: 1.3em; line-height: 1.25; }
.rt .t-xl{ font-size: 1.75em; line-height: 1.12; }
.rt .t-xxl{ font-size: 2.6em; line-height: 1; }
.rt .al-l{ text-align: left; }
.rt .al-c{ text-align: center; }
.rt .al-r{ text-align: right; }
.rt .al-j{ text-align: justify; }
.rt .f-title{ font-family: var(--font-title); font-weight: var(--title-weight); font-stretch: normal; }
.rt .f-body{ font-family: var(--font-body); font-stretch: normal; }
.rt .f-mono{ font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-stretch: normal; }
.rt .f-serif{ font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-stretch: normal; }
.rt .c-muted{ opacity: .62; }
.rt .c-black{ color: #111; }
.rt .c-white{ color: #fff; }
.rt .in-1{ margin-left: 2em; }
.rt .in-2{ margin-left: 4em; }
.rt .in-3{ margin-left: 6em; }
.rt .ti{ text-indent: 2em; }
.rt ol{ padding-left: 1.4em; }
.rt u{ text-underline-offset: 3px; }
.rt blockquote{ margin: 1em 0; padding-left: 1em; border-left: 3px solid currentColor; font-style: italic; }
.rt h4{ text-transform: none; letter-spacing: 0; font-size: 1.05em; }

/* cita */
.bq{ margin: 0; }
.bq__t{ margin: 0; font-family: var(--font-body); font-stretch: normal; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.bq__t::before{ content: "\201C"; }
.bq__t::after{ content: "\201D"; }
.qs-m .bq__t{ font-size: 1.4em; }
.qs-l .bq__t{ font-size: clamp(1.6em, 3vw, 2.3em); }
.qs-xl .bq__t{ font-size: clamp(2em, 5vw, 3.6em); line-height: 1.05; }
.bq__by{ margin-top: .9em; font-size: .95em; opacity: .7; }
.bq__by:not(:empty)::before{ content: "\2014  "; }
.hal-c .bq{ text-align: center; }
.hal-r .bq{ text-align: right; }

/* antes / después */
.blk--compare.px .compare img{ image-rendering: pixelated; }

/* separadores */
.blk--space{ display: grid; align-items: center; }
.blk--space hr{ width: min(100% - 28px, 1280px); margin: 0 auto; border: 0; }
.blk--space.ln-line hr{ border-top: 1px solid var(--accent); opacity: .35; }
.blk--space.ln-dots hr{ height: 4px; background: radial-gradient(circle, var(--accent) 1.5px, transparent 2px) 0 0 / 14px 4px repeat-x; opacity: .6; }
.blk--space.ln-pixels hr{ height: 6px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 18px); }

/* galerías: fondo, esquinas, sombra, pies de foto, efecto al pasar el mouse */
.blk--media .pm__box, .pm--image .pm__box{ background: transparent; }
.blk--media.ib-soft .pm__box{ background: color-mix(in srgb, currentColor 8%, transparent); }
.blk--media.ib-black .pm__box{ background: #000; }
.blk--media.ib-white .pm__box{ background: #fff; }
.blk--media .pm--video:not(.pm--loop) .pm__box, .blk--media .pm--embed .pm__box{ background: #000; }
.pm--embed.pm--tall{ max-width: 420px; margin-inline: auto; width: 100%; }
.blk--media.rad-s .pm__box{ border-radius: 6px; overflow: hidden; }
.blk--media.rad-l .pm__box{ border-radius: 18px; overflow: hidden; }
.blk--media.shd .pm__box{ box-shadow: 0 10px 30px -8px rgba(0,0,0,.4); }
.blk--media.px img{ image-rendering: pixelated; }
.lay-square .pm__box{ aspect-ratio: var(--ratio, 1); }
.lay-square .pm--video .pm__box, .lay-square .pm--embed .pm__box{ aspect-ratio: var(--ratio, 1); }
.fit-contain.lay-square .pm__box img, .fit-contain.lay-square .pm__box video,
.fit-contain.lay-justify .pm__box img, .fit-contain.lay-justify .pm__box video{ object-fit: contain; }
.blk--media .pm__box{ overflow: hidden; }
.blk--media .pm__box img, .blk--media .pm__box video{ transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
@media (hover: hover){
  .hov-zoom .pm:hover .pm__box img, .hov-zoom .pm:hover .pm__box video{ transform: scale(1.05); }
  .hov-glow .pm:hover .pm__box img, .hov-glow .pm:hover .pm__box video{ filter: brightness(1.15) saturate(1.12); }
  .hov-glow .pm:hover .pm__box{ box-shadow: 0 0 0 3px var(--accent), 0 0 28px -4px var(--accent); }
}
.pm figcaption{ display: grid; gap: 2px; }
.pm__t{ font-weight: 700; }
.pm__c{ opacity: .8; }
.capal-c .pm figcaption{ text-align: center; justify-items: center; }
.capal-r .pm figcaption{ text-align: right; justify-items: end; }
.cap-hide .pm figcaption{ display: none; }
.cap-over .pm{ position: relative; }
.cap-over .pm figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 28px 14px 12px; color: #fff; opacity: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.7)); transition: opacity .25s ease; pointer-events: none;
}
.cap-over .pm:hover figcaption, .cap-over .pm:focus-within figcaption{ opacity: 1; }
@media (hover: none){ .cap-over .pm figcaption{ opacity: 1; } }
.no-lb .pm--image img{ cursor: default; }

/* ===== bloque de video ===== */
.blk--video .pm{ margin: 0; }
.blk--video .pm__box{
  position: relative; overflow: hidden; background: #000; margin-inline: auto;
  aspect-ratio: var(--ar, 1.7778); width: min(100%, calc(86vh * var(--ar, 1.7778)));
}
.blk--video .pm__box video, .blk--video .pm__box iframe{ position: absolute; inset: 0; width: 100%; height: 100% !important; border: 0; background: #000; object-fit: contain; }
.blk--video.vs-screen .pm__box{ width: 100%; aspect-ratio: auto; height: min(100vh, calc(100vw / var(--ar, 1.7778))); }
.blk--video.vs-fill .pm__box{ width: 100%; aspect-ratio: auto; height: 100vh; }
.blk--video.vs-fill .pm__box video{ object-fit: cover; }
.blk--video.vs-screen figcaption, .blk--video.vs-fill figcaption{ padding-inline: 14px; }
.blk--video .pm__missing{ position: absolute; inset: 0; display: grid; place-items: center; }
.blk--video .pm__missing[hidden]{ display: none; }
.blk--video.capal-c figcaption{ text-align: center; justify-items: center; }
.blk--video.capal-r figcaption{ text-align: right; justify-items: end; }
.blk--video.vs-screen .blk__head, .blk--video.vs-fill .blk__head{ padding-inline: 14px; }

/* etiquetas en celular: una sola fila que se desliza, letra más chica */
@media (max-width: 700px){
  .tagbar{ flex-wrap: nowrap; overflow-x: auto; gap: 14px; padding: 8px 12px; font-size: .74rem; letter-spacing: .03em; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .tagbar::-webkit-scrollbar{ display: none; }
  .tagbar button{ flex: none; white-space: nowrap; }
  .tagbar button[aria-pressed="true"]{ text-underline-offset: 4px; }
}

/* visor: la imagen crece desde la galería */
.lb{ background: rgba(10,10,12,.94); overflow: hidden; }
#lb-img, #lb-vid{ display: block; max-width: none; max-height: none; object-fit: contain; cursor: zoom-out; transform-origin: center; will-change: transform; }
#lb-img[hidden], #lb-vid[hidden]{ display: none; }
#lb-vid.is-pixel{ image-rendering: pixelated; }
.lb__cap{ bottom: 18px; }
#lb-count{ margin-left: 10px; opacity: .6; font-variant-numeric: tabular-nums; }