/* ===================================================================
   CASE STUDY — páginas de proyecto completo (/proyectos/*.html)
   Layout de dos columnas: panel fijo a la izquierda con la info del
   proyecto (categoría, herramientas, descripción, contacto) y a la
   derecha una columna de imágenes que se van scrolleando mientras el
   panel queda fijo. Reutiliza variables/clases de css/style.css
   (colores, tipos, .btn, .tag, .tool-chip, footer, etc.) — esto solo
   agrega el layout propio de una página de caso completo.
   =================================================================== */

body.cs-page{ background:var(--cream); }

/* ---------------- Panel lateral fijo ---------------- */
.cs-layout{ display:flex; align-items:flex-start; }

.cs-sidebar{
  flex:0 0 auto; width:clamp(300px, 30vw, 420px);
  position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--ink); color:var(--cream);
  padding:26px 32px 32px; display:flex; flex-direction:column; gap:20px;
  z-index:20;
}
/* logo a la izquierda, hamburguesa siempre a la derecha (igual que en el inicio) */
.cs-sidebar-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cs-sidebar .hamburger{ display:flex !important; order:2; }
.cs-sidebar .hamburger span{ background:var(--cream); }
.cs-sidebar-top .cs-logo{ order:1; }
.cs-logo{ display:inline-flex; align-items:center; text-decoration:none; line-height:1; }
.cs-logo img{ height:24px; width:auto; display:block; filter:invert(1); }

.cs-back{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans);
  font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:inherit;
  text-decoration:none; opacity:.75; transition:opacity .2s ease, transform .2s ease;
}
.cs-back:hover{ opacity:1; transform:translateX(-3px); }

.cs-title{
  color:var(--cream); max-width:none; margin:4px 0 0;
  font-size:clamp(1.9rem, 3.6vw, 2.6rem); line-height:1.05;
}

.cs-meta{ display:flex; flex-direction:column; gap:18px; margin-top:6px; }
.cs-meta-item{ display:flex; flex-direction:column; gap:6px; }
.cs-meta-label{
  font-family:var(--font-sans); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(247,241,228,.5);
}
.cs-meta-value{ font-family:var(--font-sans); font-size:.96rem; color:var(--cream); }
.cs-meta-item--desc p{ color:rgba(247,241,228,.85); font-size:.95rem; line-height:1.55; margin:0; }

.cs-tools{ display:flex; flex-wrap:wrap; gap:8px; }
.cs-tools .tool-chip{
  border:1px solid rgba(247,241,228,.4); color:var(--cream); border-radius:999px;
  padding:5px 14px; font-size:.76rem; letter-spacing:.02em;
}

.cs-sidebar-ctas{
  margin-top:auto; padding-top:22px; border-top:1px solid rgba(247,241,228,.15);
  display:flex; flex-direction:column; gap:14px;
}
.cs-sidebar-ctas .btn{ justify-content:center; }
.cs-ig-link{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans);
  font-size:.85rem; letter-spacing:.03em; color:var(--cream); transition:color .2s ease;
}
.cs-ig-link:hover{ color:var(--pink); }

/* ---------------- Columna de imágenes ---------------- */
/* la primera imagen (portada) ocupa las dos columnas; el resto entra
   de a dos por línea para que no se vean gigantes */
.cs-media{
  flex:1 1 0%; min-width:0;
  display:grid; grid-template-columns:repeat(2, 1fr); align-items:start; gap:3px;
}
.cs-media-item:first-child{ grid-column:1 / -1; }
/* para que otra imagen (no la portada) también ocupe las dos columnas —
   sumar esta clase a cualquier .cs-media-item que la necesite */
.cs-media-item--wide{ grid-column:1 / -1; }
/* variante para páginas que agrupan varias piezas (motion, 3D): todo en una sola columna,
   una pieza abajo de la otra, para no mezclar imágenes de proyectos distintos en la misma fila */
.cs-media--stack{ grid-template-columns:1fr; }
.cs-media-item img, .cs-media-item video{ width:100%; height:auto; display:block; }
.cs-media-caption{
  padding:14px clamp(16px,2.5vw,28px); margin:0; background:var(--paper);
  font-family:var(--font-sans); font-size:.82rem; color:var(--ink-soft);
  border-bottom:1px solid rgba(43,29,21,.08);
}

.cs-credits{
  grid-column:1 / -1;
  margin:56px clamp(20px,3vw,48px); padding:40px clamp(20px,4vw,48px);
  border-radius:20px; background:var(--paper); border:1px solid rgba(43,29,21,.1);
}
.cs-credits h3{ margin:0 0 26px; font-size:1.4rem; }
.cs-credits-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 38px; }
.cs-credits-track{ margin:0 0 14px; }
.cs-credits-track strong{ display:block; font-family:var(--font-grotesk); font-weight:700; font-size:.96rem; margin-bottom:2px; }
.cs-credits-track span{ display:block; font-family:var(--font-sans); font-size:.85rem; color:var(--ink-soft); }
@media (max-width:640px){ .cs-credits-grid{ grid-template-columns:1fr; } }

.cs-next{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:36px clamp(20px,3vw,48px) 56px;
}
.cs-next a{ font-family:var(--font-sans); font-weight:700; letter-spacing:.02em; }

/* el menú lateral (drawer) queda disponible en todos los anchos en
   estas páginas, no solo en mobile como en el resto del sitio */
.cs-page .nav-links{
  display:flex; position:absolute; inset:0 0 0 auto; width:min(78vw, 320px); height:100vh;
  background:var(--cream); flex-direction:column; align-items:flex-start;
  padding:100px 32px 40px; gap:2px; font-size:1rem; color:var(--ink);
  pointer-events:auto;
  transform:translateX(100%); transition:transform .4s var(--ease);
  box-shadow:-10px 0 30px rgba(0,0,0,.12);
}
.cs-page .nav-links a{
  color:var(--ink); font-family:var(--font-grotesk); font-weight:800;
  font-size:1.55rem; line-height:1.35; padding:8px 0; margin:0;
  border:none; background:none; border-radius:0; display:block;
}
.cs-page .nav-links a:hover{ background:none; color:var(--cherry); transform:none; }
.cs-page .nav-links .header-tools{ margin:16px 0 0 0; }
.cs-page .nav-links .icon-btn{ border:none; padding:0; font-size:.8rem; font-weight:700; }
.cs-page .nav-links.is-open{ transform:translateX(0); }

/* el listado flotante de redes ya vive en el panel lateral (Instagram) */
.cs-page .social-float{ display:none; }

/* ---------------- Responsive: efecto "cortina" en mobile ---------------- */
/* al entrar se ve simple: el texto del proyecto arriba y la primera imagen
   justo abajo, como una página normal (el JS mide el alto real del texto y
   empuja las imágenes esa misma distancia). Recién al scrollear arranca el
   efecto cortina: la info queda fija en su lugar y todas las imágenes van
   subiendo por encima, tapándola de a poco; si volvés arriba, se destapa de
   nuevo. La barra con el logo y la hamburguesa es una franja fija aparte,
   siempre arriba de todo. Al final de las imágenes aparece de nuevo
   "Trabajemos juntos". */
/* barra fija con logo + hamburguesa, exclusiva de mobile: va SUELTA (no
   adentro del panel de info) para que su z-index no quede atrapado por el
   del panel — si no, el panel (que tiene menor z-index que las imágenes que
   lo tapan) se llevaba puesta la barra con él y las imágenes la tapaban
   también. En desktop no se usa (se ve la del panel de siempre). */
.cs-topbar-mobile{ display:none; }

@media (max-width:860px){
  .cs-layout{ flex-direction:column; }

  .cs-topbar-mobile{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    position:fixed; top:0; left:0; right:0; z-index:250;
    background:var(--ink); padding:14px 20px; box-shadow:0 2px 14px rgba(0,0,0,.25);
  }
  .cs-topbar-mobile .hamburger{ display:flex !important; order:2; }
  .cs-topbar-mobile .hamburger span{ background:var(--cream); }
  .cs-topbar-mobile .cs-logo{ order:1; }
  /* la barra de adentro del panel ya no hace falta en mobile, la reemplaza la de arriba */
  .cs-sidebar-top{ display:none; }

  .cs-sidebar{
    position:fixed; top:55px; left:0; right:0; height:auto; max-height:calc(100vh - 55px);
    width:100%; overflow-y:auto; z-index:1; background:var(--ink);
  }
  .cs-media{
    position:relative; z-index:2; grid-template-columns:1fr;
    /* el margin-top se pisa por JS con el alto real del panel de info (ver
       js/script.js), para que la primera imagen arranque justo debajo del
       texto — así se ve simple al entrar — y de ahí en más, al scrollear,
       las imágenes (opacas) van subiendo y tapando el panel fijo */
  }
  .cs-media-item{ background:var(--cream); }
  /* el footer del sitio también tiene que poder tapar el panel fijo,
     si no queda esa franja oscura asomando abajo de todo */
  .cs-page .site-footer{ position:relative; z-index:3; }
  /* el botón de "Trabajemos juntos" NO va acá adentro (junto con el resto de
     la info) — solo abajo de todo, después de terminar de ver las imágenes
     (ver .cs-next). Acá arriba se deja únicamente el link de Instagram. */
  .cs-sidebar-ctas{ margin-top:24px; }
  .cs-sidebar-ctas .btn{ display:none; }
  /* al final de todas las imágenes, un último "Trabajemos juntos" */
  .cs-next{ display:flex; background:var(--cream); }
}