/* Umami Labs · páginas de caso (nov 2026)
   Cada caso toma los colores del proyecto (--bg, --fg, --mu, --ac, --acf) y repite la misma estructura:
   portada del caso, punto de partida, lo que construimos, decisiones, en cifras y siguiente paso. */
:root{
  --p-ink:#16151B; --p-ink2:#3E3C45; --p-mute:#5D5B66; --p-line:#E3E2E8;
  --p-mist:#F3F3F5; --p-red:#E5482A; --p-red2:#C7361A;
}
body.caso{background:#fff}
body.caso .top{background:rgba(255,255,255,.94);border-bottom-color:var(--p-line)}
.caso a:focus-visible,.caso button:focus-visible{outline:3px solid var(--ac);outline-offset:3px;border-radius:6px}

/* ---------- portada del caso ---------- */
.cs-hero{position:relative;background:var(--bg);color:var(--fg);padding:56px 0 0;overflow:hidden}
.cs-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--ac) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ac) 9%,transparent) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 92%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 92%)}
.cs-hero .wrap{position:relative}
.cs-crumb{font-size:14.5px;color:var(--mu)}
.cs-crumb a{color:var(--mu);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--mu) 40%,transparent)}
.cs-crumb a:hover{color:var(--fg)}
.cs-name{font-family:var(--f-head);font-weight:600;font-size:clamp(56px,10.5vw,168px);line-height:.9;letter-spacing:-.055em;margin:28px 0 0;color:var(--fg)}
.cs-line{font-size:clamp(21px,2.2vw,30px);line-height:1.3;margin-top:26px;max-width:32ch;color:var(--fg);text-wrap:balance}
.cs-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:56px 0 0;border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent)}
.cs-facts div{padding:20px 24px 0 0}
.cs-facts dt{font-size:13.5px;color:var(--mu)}
.cs-facts dd{margin:6px 0 0;font-size:16.5px;line-height:1.45;font-weight:500}
.cs-facts a{color:var(--ac);text-decoration:none;font-weight:600}
.cs-facts a:hover{text-decoration:underline}

.cs-shot{position:relative;margin:64px auto 0;max-width:1160px}
.cs-win{border-radius:14px 14px 0 0;overflow:hidden;background:#0c1220;border:1px solid color-mix(in srgb,var(--fg) 16%,transparent);border-bottom:0;
  box-shadow:0 -10px 80px -20px color-mix(in srgb,var(--ac) 30%,transparent)}
.cs-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:color-mix(in srgb,var(--bg) 70%,#22283a);border-bottom:1px solid color-mix(in srgb,var(--fg) 10%,transparent)}
.cs-bar i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--fg) 22%,transparent)}
.cs-bar span{margin-left:12px;font-size:12.5px;color:var(--mu);font-family:var(--f-mono);letter-spacing:.01em}
.cs-win img{display:block;width:100%;height:auto}
.cs-phone{position:absolute;right:-28px;bottom:-1px;width:22%;max-width:250px;border-radius:30px 30px 0 0;overflow:hidden;
  border:7px solid #1b2133;border-bottom:0;background:#0c1220;box-shadow:-24px 0 60px -20px rgba(0,0,0,.7)}
.cs-phone img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .cs-shot{animation:csUp .9s cubic-bezier(.2,.8,.2,1) .15s both}
  .cs-phone{animation:csUp .9s cubic-bezier(.2,.8,.2,1) .45s both}
  @keyframes csUp{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
}

/* ---------- bloques ---------- */
.cs-sec{padding:120px 0}
.cs-two{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:48px}
.cs-lab{font-size:15px;font-weight:600;color:var(--p-mute);padding-top:10px}
.cs-big{font-family:var(--f-head);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.12;letter-spacing:-.03em;margin:0;max-width:22ch;color:var(--p-ink);text-wrap:balance}
.cs-txt{margin-top:26px;font-size:18.5px;line-height:1.65;color:var(--p-ink2);max-width:58ch}
.cs-txt+.cs-txt{margin-top:16px}
.cs-pains{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--p-line)}
.cs-pains li{padding:18px 18px 0 0;font-size:15.5px;line-height:1.45;color:var(--p-ink2)}
.cs-pains b{display:block;font-size:16.5px;color:var(--p-ink);margin-bottom:4px}

/* capítulos: lo que construimos */
.cs-built{background:var(--p-mist)}
.cs-h2{font-family:var(--f-head);font-weight:600;font-size:clamp(34px,4.4vw,64px);line-height:1;letter-spacing:-.04em;margin:0;color:var(--p-ink)}
.cs-intro{margin-top:20px;font-size:18.5px;line-height:1.6;color:var(--p-ink2);max-width:52ch}
.cs-ch{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:110px}
.cs-ch.cs-rev{grid-template-columns:minmax(0,1fr) minmax(0,.36fr)}
.cs-ch.cs-rev .cs-ch-t{order:2}
.cs-ch h3{font-family:var(--f-head);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.2;letter-spacing:-.02em;margin:0;color:var(--p-ink)}
.cs-step{display:block;font-size:14px;font-weight:600;color:var(--p-red2);margin-bottom:12px}
.cs-ch p{margin-top:14px;font-size:17px;line-height:1.6;color:var(--p-ink2)}
.cs-ch ul{list-style:none;padding:0;margin:20px 0 0}
.cs-ch li{padding:9px 0 9px 22px;position:relative;font-size:15.5px;color:var(--p-ink);border-top:1px solid var(--p-line)}
.cs-ch li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:2px;background:var(--ac)}
.cs-img{margin:0;border-radius:14px;overflow:hidden;background:var(--bg);box-shadow:0 30px 60px -30px rgba(16,20,40,.45);border:1px solid rgba(16,20,40,.08)}
.cs-img img{display:block;width:100%;height:auto}
.cs-img figcaption{font-size:13.5px;color:var(--mu);padding:12px 16px;background:var(--bg)}
.cs-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:24px;align-items:end}
.cs-pair .cs-img.cs-ph{border-radius:26px;border:6px solid #1b2133}
.cs-trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cs-trades span{font-size:14px;font-weight:600;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--p-line);color:var(--p-ink)}
.cs-trades span.on{background:var(--bg);color:var(--fg);border-color:var(--bg)}

/* decisiones */
.cs-dec{background:var(--bg);color:var(--fg)}
.cs-dec .cs-h2{color:var(--fg)}
.cs-dec-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:64px}
.cs-dec-g h3{font-family:var(--f-head);font-weight:600;font-size:21px;letter-spacing:-.02em;line-height:1.25;margin:0;padding-top:22px;border-top:2px solid var(--ac)}
.cs-dec-g p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--mu)}
.cs-sw{display:flex;gap:8px;margin-top:18px}
.cs-sw i{width:34px;height:34px;border-radius:8px;border:1px solid color-mix(in srgb,var(--fg) 20%,transparent)}

/* cifras */
.cs-num{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px;border-top:1px solid var(--p-line)}
.cs-num div{padding-top:26px}
.cs-num b{display:block;font-family:var(--f-head);font-weight:600;font-size:clamp(48px,6vw,88px);line-height:1;letter-spacing:-.05em;color:var(--p-ink)}
.cs-num span{display:block;margin-top:12px;font-size:16px;line-height:1.45;color:var(--p-ink2);max-width:22ch}

/* cierre */
.cs-end{padding:0 0 120px}
.cs-end-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.cs-cta{background:var(--p-ink);color:#fff;border-radius:22px;padding:48px}
.cs-cta h2{font-family:var(--f-head);font-weight:600;font-size:clamp(26px,2.6vw,36px);line-height:1.12;letter-spacing:-.03em;margin:0;max-width:18ch}
.cs-cta p{margin-top:14px;font-size:17px;line-height:1.6;color:#C9C6D0;max-width:40ch}
.cs-cta .btn{margin-top:28px}
.cs-next{position:relative;border-radius:22px;padding:48px;background:var(--nbg);color:var(--nfg);text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;min-height:300px;overflow:hidden}
.cs-next small{font-size:14.5px;color:var(--nmu)}
.cs-next b{display:block;font-family:var(--f-head);font-weight:600;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.045em;margin-top:10px}
.cs-next span{font-size:17px;line-height:1.5;color:var(--nmu);max-width:30ch}
.cs-next em{font-style:normal;font-weight:700;font-size:15.5px;margin-top:22px}
.cs-next:hover b{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

@media (max-width:980px){
  .cs-facts{grid-template-columns:1fr 1fr;row-gap:8px}
  .cs-phone{right:8px;width:30%}
  .cs-sec{padding:88px 0}
  .cs-two,.cs-ch,.cs-ch.cs-rev{grid-template-columns:1fr;gap:28px}
  .cs-ch.cs-rev .cs-ch-t{order:0}
  .cs-ch{margin-top:72px}
  .cs-pains{grid-template-columns:1fr 1fr}
  .cs-dec-g{grid-template-columns:1fr;gap:36px}
  .cs-num{grid-template-columns:1fr 1fr}
  .cs-end-in{grid-template-columns:1fr}
}
@media (max-width:600px){
  .cs-hero{padding-top:36px}
  .cs-facts{grid-template-columns:1fr}
  .cs-facts div{padding-top:14px}
  .cs-shot{margin-top:44px}
  .cs-phone{width:34%;border-width:5px;border-radius:20px 20px 0 0}
  .cs-pains{grid-template-columns:1fr}
  .cs-pair{grid-template-columns:1fr}
  .cs-pair .cs-ph{max-width:260px;justify-self:center}
  .cs-cta,.cs-next{padding:32px 26px}
}