/* ============================================================
   Bochikua — PROYECTOS (vitrina). Tema oscuro. Hereda styles.css
   + brand.css (esmeralda/dorado). Imagen SIEMPRE protagonista.
   Expandible: cada proyecto = un <article class="vitr"> (ver
   plantilla comentada al final del HTML).
   ============================================================ */

/* ---------- intro ---------- */
.pj-hero{padding:150px 0 40px;text-align:center;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
.pj-hero__eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.pj-hero__title{font-size:clamp(34px,6vw,72px);letter-spacing:-.035em;line-height:1.02;font-weight:600}
.pj-hero__title em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--lime-2)}
.pj-hero__lead{margin:24px auto 0;max-width:56ch;color:var(--muted);font-size:clamp(16px,2vw,19px);line-height:1.6}

/* ---------- vitrina ---------- */
.vitrine{background:var(--bg-2);padding:70px 0 40px}
.vitr{
  display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(28px,5vw,68px);
  align-items:center;padding:clamp(48px,7vw,90px) 0;border-top:1px solid var(--line);
}
.vitr:first-child{border-top:0}
/* en filas pares el media pasa a la derecha: hay que invertir también los anchos,
   si no cae en la columna angosta y la captura se ve diminuta */
.vitr:nth-child(even){grid-template-columns:.85fr 1.35fr}
.vitr:nth-child(even) .vitr__media{order:2}
/* MEDIA protagonista */
.vitr__media{position:relative}
.vitr__frame{
  border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--surface);
  box-shadow:0 50px 110px -45px rgba(0,0,0,.85),0 0 0 1px rgba(201,162,75,.06);
}
.vitr__frame img{width:100%;height:auto;display:block;object-fit:cover}
.vitr__frame--tall img{aspect-ratio:4/3;object-fit:cover;object-position:top center}

/* ---------- un core, la marca cambia: disolución por partículas (canvas) ----------
   La proporción del marco = la de las capturas (1280x642), así la UI se ve
   COMPLETA: no se recorta por los bordes. El canvas solo se enciende durante
   la transición; en reposo manda la imagen, que queda nítida y legible. */
.vitr__swap{position:relative;aspect-ratio:1280/642;isolation:isolate;background:var(--surface)}
.vitr__swap .vitr__slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity .9s var(--ease);
}
/* sin JS la tarjeta NO queda en blanco: se ve la primera captura */
.vitr__swap .vitr__slide:first-of-type{opacity:1}
.vitr__fx{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;opacity:0;
}
.vitr__swapLabel{
  position:absolute;left:14px;bottom:14px;z-index:3;
  display:grid;grid-template-areas:"t";
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--text);background:rgba(4,7,6,.72);
  border:1px solid var(--line-lime);border-radius:999px;
  padding:6px 13px;backdrop-filter:blur(8px);
}
.vitr__swapLabel span{
  grid-area:t;white-space:nowrap;opacity:0;
  transition:opacity .45s var(--ease);
}
.vitr__swapLabel span:first-child{opacity:1}
/* la fila estrella le da más ancho a la captura */
.vitr--star{grid-template-columns:1.55fr .8fr}
.vitr__badge{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--on-lime);
  background:var(--gold);padding:6px 12px;border-radius:999px;font-weight:600;
}
/* PANEL de texto (secundario a la imagen) */
.vitr__kicker{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.vitr__title{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.03em;margin:12px 0 14px;line-height:1.06}
.vitr__desc{color:var(--muted);font-size:16px;line-height:1.65;margin-bottom:20px;max-width:46ch}
.vitr__metric{display:flex;align-items:baseline;gap:10px;margin-bottom:22px}
.vitr__metric b{font-size:clamp(34px,4.5vw,50px);font-weight:600;letter-spacing:-.03em;color:var(--lime-2);line-height:1}
.vitr__metric span{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.03em}

/* barras de ponderación (granja solar) */
.vitr__weights{display:flex;flex-direction:column;gap:10px;margin:0 0 22px}
.wbar{display:grid;grid-template-columns:96px 1fr 42px;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.wbar__track{height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.wbar__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lime-deep),var(--lime-2))}
.wbar b{color:var(--text);text-align:right;font-weight:500}

/* chips (stack / fuentes) */
.vitr__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.vitr__chips span{font-family:var(--mono);font-size:11.5px;color:var(--text);
  padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.vitr__chips--gold span{border-color:var(--line-lime);color:var(--gold-soft)}
.vitr__chipslabel{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin:0 0 8px}
.vitr__repo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
  color:var(--lime-2);border-bottom:1px solid var(--line-lime);padding-bottom:2px}
.vitr__repo:hover{color:var(--gold-soft);border-color:var(--gold)}

@media (max-width:900px){
  .vitr{grid-template-columns:1fr;gap:26px}
  .vitr:nth-child(even) .vitr__media{order:0}
  .vitr__desc{max-width:none}
}

/* ---------- video ---------- */
.reels{background:var(--bg);padding:100px 0}
.reels__head{max-width:640px;margin:0 auto 48px;text-align:center}
.reels__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.reels__title{font-size:clamp(28px,4vw,48px);letter-spacing:-.03em}
.reels__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:900px;margin:0 auto}
.reel{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000;
  box-shadow:0 40px 90px -45px rgba(0,0,0,.85)}
.reel video{width:100%;height:auto;display:block;aspect-ratio:9/16;object-fit:cover;background:#000}
.reel figcaption{padding:14px 16px;font-family:var(--mono);font-size:12px;color:var(--muted);
  border-top:1px solid var(--line)}
.reels__more{margin-top:44px;text-align:center}
@media (max-width:720px){.reels__grid{grid-template-columns:1fr;max-width:360px}}

/* ---------- CTA ---------- */
.pj-cta{padding:120px 0;text-align:center;background:var(--bg-2)}
.pj-cta__title{font-size:clamp(30px,5vw,58px);letter-spacing:-.03em;line-height:1.05}
.pj-cta__title em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--lime-2)}
.pj-cta__text{margin:24px auto 36px;max-width:52ch;color:var(--muted);font-size:18px;line-height:1.6}

/* ---------- accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  /* el JS ya no arranca la disolución; aquí se congela lo visual */
  .vitr__swap .vitr__slide,
  .vitr__swapLabel span{transition:none}
  .vitr__fx{display:none}
}