/* ============================================================
   WofferLab — Páginas de Casos
   - cs-index/  → grid de casos (casos.html)
   - cs-detail/ → vista de un caso individual (caso.html)
   ============================================================ */

/* ============ ÍNDICE — hero + grid ============ */
.cs-hero{
  display:flex;flex-direction:column;align-items:flex-start;
  max-width:min(1100px,92vw);
}
.cs-hero .display{margin-top:18px;max-width:14ch}
.cs-hero .lead{max-width:48ch;margin-top:24px}
.cs-hero__meta{
  display:flex;flex-wrap:wrap;gap:0 26px;
  margin-top:42px;padding-top:22px;
  border-top:1px solid var(--line);
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
  list-style:none;
}
.cs-hero__meta li{position:relative;padding:6px 0}
.cs-hero__meta li + li::before{
  content:"";position:absolute;left:-13px;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--accent);
  transform:translateY(-50%);
}

/* ---- grid de cases ---- */
.cs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;width:100%;max-width:1080px;margin:0 auto;
}
.cs-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
  border:1px solid var(--line);border-radius:var(--radius);
  color:inherit;text-decoration:none;overflow:hidden;
  transition:border-color .35s ease, transform .35s ease, background .35s ease;
}
.cs-card:hover{
  border-color:rgba(106,153,221,.40);
  transform:translateY(-4px);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
}
.cs-card__media{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:rgba(20,23,29,.18);border-bottom:1px solid var(--line);
}
.cs-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cs-card:hover .cs-card__media img{transform:scale(1.05)}
.cs-card__no{
  position:absolute;top:14px;right:14px;
  font-family:var(--font-m);font-size:11px;letter-spacing:.12em;color:#eef1f6;
  background:rgba(7,10,15,.55);backdrop-filter:blur(6px);
  padding:5px 11px;border-radius:30px;
}
.cs-card__body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,30px)}
.cs-card__sector{font-family:var(--font-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cs-card__title{
  font-family:var(--font-d);font-weight:700;
  font-size:clamp(1.3rem,1.9vw,1.7rem);
  letter-spacing:-.022em;line-height:1.18;color:var(--ink);margin-top:12px;
}
.cs-card__tag{margin-top:10px;font-family:var(--font-b);font-size:.95rem;color:var(--ink-dim);line-height:1.45;max-width:36ch}
.cs-card__stack{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0;padding:0}
.cs-card__stack li{font-family:var(--font-m);font-size:10px;letter-spacing:.05em;color:var(--ink-faint);border:1px solid var(--line);border-radius:30px;padding:5px 10px}
.cs-card__foot{
  margin-top:auto;padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.cs-card__foot .ar{display:inline-block;color:var(--accent);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.cs-card:hover .cs-card__foot .ar{transform:translateX(8px)}

/* skeleton mientras carga */
.cs-grid--loading .cs-card{
  pointer-events:none;background:rgba(255,255,255,.018);
  border-color:var(--line);
}
.cs-grid--loading .cs-card *{visibility:hidden}
.cs-grid--loading .cs-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.04) 50%,transparent 70%);
  animation:wlShimmer 1.6s linear infinite;
}
@keyframes wlShimmer{ from{transform:translateX(-30%)} to{transform:translateX(30%)} }

/* estado vacío / error */
.cs-empty{
  width:100%;padding:36px;border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--ink-dim);font-family:var(--font-m);font-size:13px;letter-spacing:.04em;
  text-align:center;
}

/* ============ DETALLE — un caso ============ */
.cs-detail{display:flex;flex-direction:column;gap:clamp(60px,8vh,120px);width:100%;max-width:1180px;margin:0 auto}

.cs-detail__hero{
  display:flex;flex-direction:column;align-items:flex-start;
  max-width:min(900px,92vw);
}
.cs-detail__hero .display{margin-top:18px;max-width:18ch}
.cs-detail__hero .lead{max-width:46ch;margin-top:20px}
.cs-detail__crumbs{
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
  display:flex;align-items:center;gap:10px;
}
.cs-detail__crumbs a{color:var(--ink-dim);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .25s ease,color .25s ease}
.cs-detail__crumbs a:hover{color:var(--ink);text-decoration-color:var(--accent)}
.cs-detail__crumbs .sep{color:var(--ink-faint);opacity:.6}

.cs-detail__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 26px;
  margin-top:38px;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  width:100%;
}
.cs-detail__metaItem{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);
}
.cs-detail__metaItem b{
  display:block;color:var(--ink);font-family:var(--font-d);font-weight:700;
  font-size:14px;letter-spacing:0;text-transform:none;margin-top:6px;
}

/* ---- figura del caso ---- */
.cs-detail__figure{
  width:100%;margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(20,23,29,.18);aspect-ratio:16/9;
}
.cs-detail__figure img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- métricas destacadas ---- */
.cs-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%}
.cs-metric{
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,2vw,26px);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
}
.cs-metric__v{display:block;font-family:var(--font-d);font-weight:800;letter-spacing:-.03em;line-height:1;font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--ink)}
.cs-metric__l{display:block;margin-top:8px;font-family:var(--font-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- grupos de features por estado ---- */
.cs-fgroup{margin-top:30px}
.cs-fgroup:first-child{margin-top:0}
.cs-fgroup__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cs-fgroup__n{font-family:var(--font-m);font-size:11px;letter-spacing:.1em;color:var(--ink-faint)}
.cs-feature__status--planned{color:#9ab0d6;border-color:rgba(106,153,221,.30);background:rgba(106,153,221,.08)}
body.is-light .cs-feature__status--planned{color:#2f5594;border-color:rgba(47,85,148,.25);background:rgba(47,85,148,.06)}

/* ---- bloques de contenido (cliente / problema / solución) ---- */
.cs-block{
  display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);
  gap:clamp(28px,4vw,72px);width:100%;
}
.cs-block__head{position:relative}
.cs-block__h{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.2rem);
  letter-spacing:-.022em;line-height:1.1;color:var(--ink);
}
.cs-block__idx{
  font-family:var(--font-m);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.cs-block__body{
  font-family:var(--font-b);color:var(--ink-dim);line-height:1.65;
  font-size:clamp(1rem,1.18vw,1.12rem);max-width:64ch;
}
.cs-block__body p{margin-bottom:1em}
.cs-block__body p:last-child{margin-bottom:0}

/* ---- features ---- */
.cs-features{width:100%}
.cs-features__head{margin-bottom:36px;max-width:64ch}
.cs-features__h{
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.2rem);
  letter-spacing:-.022em;line-height:1.1;color:var(--ink);
}
.cs-features__idx{
  font-family:var(--font-m);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px;
}
.cs-features__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;width:100%;
}
.cs-feature{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.004));
  padding:clamp(20px,1.6vw,28px);
}
.cs-feature__top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.cs-feature__n{
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
}
.cs-feature__status{
  font-family:var(--font-m);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink-dim);
}
.cs-feature__status--production{
  color:var(--ok);border-color:rgba(155,231,168,.30);background:rgba(76,175,80,.06);
}
.cs-feature__status--development{
  color:var(--warn);border-color:rgba(231,199,155,.30);background:rgba(175,135,76,.06);
}
body.is-light .cs-feature__status--production{color:#1e6b32;border-color:rgba(30,107,50,.25);background:rgba(30,107,50,.06)}
body.is-light .cs-feature__status--development{color:#7a4a14;border-color:rgba(122,74,20,.25);background:rgba(122,74,20,.06)}
.cs-feature__name{
  font-family:var(--font-d);font-weight:700;font-size:1.05rem;
  letter-spacing:-.014em;line-height:1.2;color:var(--ink);margin-bottom:10px;
}
.cs-feature__desc{
  font-family:var(--font-b);font-size:.95rem;color:var(--ink-dim);line-height:1.55;
}

/* ---- notas ---- */
.cs-notes{
  width:100%;padding-top:22px;border-top:1px solid var(--line);
}
.cs-notes__h{
  font-family:var(--font-m);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:18px;
}
.cs-notes ul{
  display:grid;gap:14px;list-style:none;margin:0;padding:0;
}
.cs-notes li{
  position:relative;padding-left:22px;color:var(--ink-dim);
  font-family:var(--font-m);font-size:13px;line-height:1.55;
}
.cs-notes li::before{
  content:"+" / "";position:absolute;left:0;top:0;color:var(--accent);font-weight:700;
}

/* ============ RESPONSIVE ============ */
@media(max-width:920px){
  .cs-block{grid-template-columns:1fr;gap:16px}
  .cs-detail__meta{gap:16px}
  .cs-grid{grid-template-columns:1fr;gap:14px}
  .cs-detail{gap:clamp(40px,7vh,72px)}
}
@media(max-width:560px){
  .cs-metrics{grid-template-columns:1fr;gap:10px}
  .cs-metric{display:flex;align-items:baseline;gap:14px;padding:14px 18px}
  .cs-metric__v{font-size:1.9rem}
  .cs-metric__l{margin-top:0}
  .cs-features__grid{grid-template-columns:1fr}
}