/* =============================================================
   CASOS DE ÉXITO · estilos compartidos (Letto, Hansel & Grettel)
   Cada página define sus acentos con --c1 / --c2 / --c-ink en .cs
   ============================================================= */
.cs{ --c1:#39FF14; --c2:#39FF14; --c-ink:#0b0f0c; }
.cs section{ padding: 84px 0; }
.cs h2{ max-width: 24ch; margin-bottom: 18px; }
.cs h3{ font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin-bottom: 12px; }
.cs .lead{ color: var(--text-dim); max-width: 64ch; font-size: 1.08rem; line-height: 1.65; }
.cs .lead + .lead{ margin-top: 14px; }
.cs .lead strong{ color: var(--text); font-weight: 600; }
.cs figure{ margin:0; }
.cs img{ max-width:100%; height:auto; display:block; }
.cs figcaption, .cs .cap{ font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-top: 10px; line-height:1.6; }
.cs-tag{ display:inline-block; font: 600 12px/1 var(--font-body); padding: 7px 11px; border-radius: 6px; background: var(--c1); color: var(--c-ink); letter-spacing:.02em; margin-bottom: 16px; }

.cs-hero{ padding: 170px 0 70px !important; }
.cs-hero .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.cs-hero .back{ font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); text-decoration:none; }
.cs-hero .back:hover{ color: var(--neon); }
.cs-hero h1{ font-size: clamp(2.3rem, 5vw, 4.1rem); line-height:1.05; margin: 22px 0;
  background: linear-gradient(180deg, #fff 0%, var(--c1) 60%, var(--c2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cs-hero .lead{ font-size: 1.16rem; }
.cs-facts{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 32px; margin-top: 34px; padding-top: 26px; border-top:1px solid var(--border); }
.cs-facts dt{ font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-bottom: 4px; }
.cs-facts dd{ color: var(--text); font-size: .98rem; }
.cs-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid color-mix(in srgb, var(--c1) 45%, transparent); background: var(--bg-2); }
.cs-frame img{ width:100%; }

.cs-split{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items:center; }
.cs-split.flip{ grid-template-columns: 1.15fr 1fr; }
.cs-checks{ list-style:none; margin-top: 26px; display:grid; gap: 10px; }
.cs-checks li{ padding-left: 26px; position:relative; color: var(--text-dim); line-height:1.5; }
.cs-checks li::before{ content:""; position:absolute; left:0; top:.45em; width:12px; height:7px; border-left:2px solid var(--neon); border-bottom:2px solid var(--neon); transform: rotate(-45deg); }

/* Navegador con scroll para capturas largas */
.cs-browser{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--border-strong); background:#111; box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.cs-browser .bar{ display:flex; align-items:center; gap:7px; padding: 11px 14px; background:#1b1d1c; border-bottom:1px solid var(--border); }
.cs-browser .bar i{ width:10px; height:10px; border-radius:50%; background:#444; display:block; }
.cs-browser .bar span{ margin-left:10px; font: 500 12px/1 var(--font-mono); color: var(--text-mute); }
.cs-browser .view{ max-height: 560px; overflow-y:auto; scrollbar-width: thin; }

.cs-gallery{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 40px; }
.cs-gallery .wide{ grid-column: 1 / -1; }
.cs-gallery figure img{ width:100%; border-radius: var(--radius-lg); border:1px solid var(--border); }
.cs-gallery figure.bare img{ border:0; border-radius:0; }
.cs-light{ background: linear-gradient(180deg, #f3eee8, #e6dccf); border-radius: var(--radius-lg); padding: clamp(14px, 3vw, 36px); }

.cs-stats{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 40px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cs-stats div{ padding: 26px 22px 26px 0; }
.cs-stats div + div{ border-left:1px solid var(--border); padding-left: 22px; }
.cs-stats b{ display:block; font-size: 2.2rem; line-height:1.1; color: var(--c1); font-weight:700; }
.cs-stats span{ display:block; margin-top:6px; color: var(--text-dim); font-size:.93rem; line-height:1.45; }

.cs-swatches{ display:flex; border-radius: var(--radius); overflow:hidden; height: 92px; margin-top: 26px; }
.cs-swatches span{ flex:1; }
.cs-swatches i{ font: 500 11px/1 var(--font-mono); font-style:normal; padding:10px; display:block; color:#fff; }
.cs-values{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: 36px; }
.cs-values div{ padding: 22px; border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.cs-values b{ display:block; color: var(--c1); margin-bottom: 8px; font-size: 1.05rem; }
.cs-values span{ color: var(--text-dim); font-size:.93rem; line-height:1.5; }

.cs-cta{ border-top:1px solid var(--border); }
.cs-cta .btn{ margin-top: 26px; }

@media (max-width: 900px){
  .cs section{ padding: 60px 0; }
  .cs-hero{ padding-top: 130px !important; }
  .cs-hero .grid, .cs-split, .cs-split.flip{ grid-template-columns: 1fr; gap: 32px; }
  .cs-gallery{ grid-template-columns: 1fr; }
  .cs-stats, .cs-values{ grid-template-columns: 1fr 1fr; }
  .cs-stats div:nth-child(3){ border-left:0; padding-left:0; } .cs-stats div:nth-child(n+3){ border-top:1px solid var(--border); }
  .cs-swatches i{ font-size: 9px; padding: 6px; }
  .cs-browser .view{ max-height: 420px; }
}