/* ─────────────────────────────────────────────────────────────────────────────
   C_C® · work layer — la vidriera con capturas reales
   Sumativa: se agrega DESPUÉS del riso heredado y de 9z-fx-motion.css.
   Nada acá recompila el theme; usa literales de marca con fallback para
   que funcione igual en la landing (tokens heredados) y en /work (landing.css).
   ───────────────────────────────────────────────────────────────────────────── */

/* El bermellón va literal, no hsl(var(--accent)): en la landing --accent es un triple HSL
   y en /work viene del theme del dashboard, donde hsl(var(--accent)) es inválido y el color
   caía al texto heredado. Marca fija = un solo valor en las dos superficies. */

/* ── la captura, en COLOR REAL ──
   Cada proyecto conserva su paleta y su estética: nada de grayscale, nada de
   tinte, nada de blend. Lo que ordena la vidriera es el chasis — hairline,
   número, tipografía monoespaciada y pastillas — y el acento de marca se
   juega en el borde de arriba, no encima de la imagen. */
.cc-shot{ position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:1rem;
  background:#0b0b0a; isolation:isolate; box-shadow:inset 0 0 0 1px rgba(245,243,238,.11); }
.cc-shot > img{ position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:top center; transform:scale(1.008);
  transition:transform .7s cubic-bezier(.16,1,.3,1); }
/* sin velo sobre la captura: el color real llega íntegro al ojo del visitante.
   La legibilidad no depende de oscurecer la imagen, depende de las placas. */
/* firma de color del proyecto: un rulete fino arriba, ni un pixel sobre la captura */
.cc-shot::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3; pointer-events:none;
  background:var(--shot-tone, #1d3a42); transition:height .35s cubic-bezier(.16,1,.3,1); }

/* refuerzos de hover: la capa fx ya acerca la miniatura; acá se levanta la firma */
.fx-tile:hover .cc-shot > img{ transform:scale(1.04); }
a:hover .cc-shot::before{ height:5px; }

/* ficha del tile: número de caso y línea del estudio, sobre placa propia —
   así se leen igual sobre una captura clara (th3lab) que sobre una oscura (C_C) */
.cc-shot-num, .cc-shot-tag{ position:absolute; z-index:4; pointer-events:none; display:inline-flex; align-items:center;
  padding:5px 9px; border-radius:999px; background:rgba(8,9,10,.9); backdrop-filter:blur(7px);
  box-shadow:inset 0 0 0 1px rgba(245,243,238,.16);
  font-family:var(--font-cc-mono), ui-monospace, "JetBrains Mono", monospace;
  font-size:10px; line-height:1; letter-spacing:.18em; text-transform:uppercase; }
.cc-shot-num{ top:13px; left:13px; color:#ed5b1e; }
.cc-shot-tag{ top:13px; right:13px; color:rgba(245, 243, 238, .88); }
@media (prefers-reduced-motion:reduce){
  .cc-shot > img{ transform:none; transition:none; }
  .fx-tile:hover .cc-shot > img{ transform:none; }
  .cc-shot::before, a:hover .cc-shot::before{ height:3px; transition:none; }
}

/* ── tile de cierre: el índice, tipográfico, sin captura ── */
.cc-index{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:10px;
  height:100%; padding:20px 22px; border-radius:1rem; overflow:hidden; isolation:isolate;
  background:var(--petrol, #103138); color:#f5f3ee; }
.cc-index::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 90% at 10% 0%, rgba(237, 91, 30, .26), transparent 58%),
             repeating-linear-gradient(0deg, rgba(245,243,238,.07) 0 1px, transparent 1px 28px),
             repeating-linear-gradient(90deg, rgba(245,243,238,.05) 0 1px, transparent 1px 28px); }
.cc-index-num{ font-family:var(--font-cc-mono), ui-monospace, monospace; font-size:11px; letter-spacing:.22em; opacity:.6; }
.cc-index-title{ display:flex; align-items:baseline; gap:.4em; font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; letter-spacing:-.02em; line-height:1; }
.cc-index-serif{ font-family:var(--font-cc-serif), "Instrument Serif", Georgia, serif; font-style:italic; font-weight:400; font-size:.95em; opacity:.85; }
.cc-index-note{ font-size:13px; line-height:1.45; opacity:.78; max-width:34ch; }
.cc-index-go{ display:inline-flex; align-items:center; gap:.5em; font-size:12px; letter-spacing:.02em; font-weight:600; opacity:.9; }
.cc-index-go svg{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
a:hover .cc-index-go svg{ transform:translate(2px,-2px); }

/* ── figuras de caso (/work/[slug]) ── */
.cc-figure{ margin:0; }
.cc-figure .cc-shot{ aspect-ratio:16/9; height:auto; }
.cc-figure figcaption{ margin-top:10px; font-family:var(--font-cc-mono), ui-monospace, monospace;
  font-size:11.5px; line-height:1.6; letter-spacing:.01em; color:var(--mut, #8d8880); }
/* miniatura del índice: misma receta — color real, hairline y firma arriba */
.cc-thumb{ position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:10px;
  background:#0b0b0a; box-shadow:inset 0 0 0 1px rgba(245,243,238,.11); }
.cc-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transform:scale(1.008); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.cc-row:hover .cc-thumb img{ transform:scale(1.05); }
.cc-thumb::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--shot-tone, #1d3a42); }

/* tabla del índice /work — con miniatura en color real por fila */
.cc-rows{ background:var(--line, #1c1b19); }
.cc-row{ display:grid; grid-template-columns:34px 104px minmax(0,1.5fr) minmax(0,1.35fr) 64px 22px; gap:18px; align-items:center;
  padding:16px 18px; background:#0b0b0a; transition:background .35s ease; }
.cc-row:hover{ background:#101110; }
.cc-row-n{ font-family:var(--font-cc-mono), ui-monospace, monospace; font-size:11px; color:#ed5b1e; }
.cc-row-t{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.cc-row-c{ font-size:13.5px; color:var(--mut2, #b5afa4); }
.cc-row-y{ font-family:var(--font-cc-mono), ui-monospace, monospace; font-size:11px; color:var(--mut, #8d8880); text-align:right; }
.cc-row-a{ opacity:.4; transition:opacity .3s ease, transform .3s ease; }
.cc-row:hover .cc-row-a{ opacity:1; transform:translate(2px,-2px); }
@media (max-width:900px){
  .cc-row{ grid-template-columns:28px 88px minmax(0,1fr) 56px 18px; gap:14px; }
  .cc-row-c{ display:none; }
}
@media (max-width:640px){
  .cc-row{ grid-template-columns:26px 72px minmax(0,1fr) 18px; gap:12px; }
  .cc-row-y{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .cc-row, .cc-row-a{ transition:none } .cc-row:hover .cc-thumb img{ transform:none } }