/* Caso de éxito (ver src/cases/render.mjs). Lo primero son los resultados: el héroe lleva un "marcador" (la foto
   del cliente con la cifra estrella en grande y las siguientes debajo, que cuentan desde cero al cargar: la única
   animación de la página). Después, la historia en tres actos (reto, solución, resultados) y la voz del cliente. */
.cs-hero{align-items:center}
.cs-hero h1{font-size:clamp(30px,3vw,44px);line-height:1.05;font-stretch:116%}
.cs-back{display:flex;width:max-content;align-items:center;gap:8px;margin-bottom:18px;color:var(--fog);font:650 14px/1 var(--font-body);text-decoration:none}
.cs-back:hover{color:#fff}
.cs-back svg{width:16px;height:16px}
.cs-sector{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--gold);color:var(--ink);font:760 14px/1.2 var(--font-body);transform:rotate(-1.5deg)}
.cs-sector svg{width:18px;height:18px;flex:none}
.cs-people{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:#fff;font:650 16px/1.3 var(--font-body)}
.cs-people svg{width:22px;height:22px;color:var(--gold)}
.cs-hero .lp-btns .btn svg{width:18px;height:18px}

/* el marcador */
.cs-board{position:relative;border-radius:24px;overflow:hidden;background:var(--ink-2);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 40px 80px -30px rgba(0,0,0,.85)}
.cs-board-photo{position:relative;margin:0;aspect-ratio:16/8.2}
.cs-board-photo img{display:block;width:100%;height:100%;object-fit:cover}
.cs-board-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,38,63,0) 30%,rgba(19,38,63,.72) 70%,var(--ink-2) 100%)}
.cs-board-t{position:absolute;top:18px;left:20px;z-index:2;margin:0;padding:7px 13px;border-radius:999px;background:rgba(11,27,48,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font:700 13.5px/1 var(--font-body)}
.cs-medal{position:absolute;top:14px;right:16px;z-index:2;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--gold);color:var(--ink);box-shadow:0 5px 0 #C9831D,0 14px 30px -8px rgba(0,0,0,.6);transform:rotate(-8deg)}
.cs-medal svg{width:28px;height:28px;stroke-width:2.1}
.cs-board-main{position:relative;z-index:1;display:grid;gap:8px;margin:-78px 0 0;padding:0 26px}
.cs-board:not(:has(.cs-board-photo)) .cs-board-main{margin-top:0;padding-top:86px}
.cs-board-main strong{color:var(--gold);font:860 clamp(62px,7vw,108px)/.9 var(--font-head);font-stretch:125%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cs-board-main span{max-width:24em;color:#fff;font:620 clamp(16px,1.35vw,19px)/1.35 var(--font-body)}
.cs-board-more{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:24px 0 0;padding:20px 26px 24px;border-top:1px solid rgba(255,255,255,.12)}
.cs-board-more li{padding:0 16px;border-left:1px solid rgba(255,255,255,.12)}
.cs-board-more li:first-child{padding-left:0;border-left:0}
.cs-board-more strong{display:block;color:#fff;font:820 clamp(24px,2.3vw,32px)/1 var(--font-head);font-stretch:118%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cs-board-more span{display:block;margin-top:7px;color:var(--fog);font-size:13.5px;line-height:1.38}

/* secciones */
.cs{background:#fff}
.cs-sec{padding:clamp(56px,6.5vw,96px) 0}
.cs-sec h2{margin:0 0 28px;font:820 clamp(28px,3.2vw,42px)/1.06 var(--font-head);font-stretch:118%;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.cs-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:clamp(32px,5vw,72px);align-items:start}
.cs-copy p,.cs-prose p{max-width:40em;margin:0 0 1em;color:#2A3A4E;font-size:18px;line-height:1.72}
.cs-copy p:first-of-type{color:var(--ink);font-size:clamp(19px,1.6vw,21px);line-height:1.58;font-weight:560}

/* el reto */
.cs-challenges{list-style:none;display:grid;gap:10px;max-width:40em;margin:28px 0 0;padding:0}
.cs-challenges li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--paper);color:var(--ink);font-size:16.5px;line-height:1.5}
.cs-challenges svg{flex:none;width:24px;height:24px;color:var(--action)}
.cs-sheet{position:sticky;top:24px;padding:26px;border-radius:20px;background:var(--ink);color:#fff}
.cs-sheet h2{margin:0 0 16px!important;font-size:20px!important;color:#fff!important}
.cs-sheet dl{display:grid;gap:14px;margin:0 0 20px}
.cs-sheet dl div{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12)}
.cs-sheet dt{color:var(--gold);font:700 13px/1.2 var(--font-body)}
.cs-sheet dd{margin:0;color:var(--fog);font-size:15px;line-height:1.5}
.cs-sheet dd a{color:#fff;text-underline-offset:3px}
.cs-sheet .btn{width:100%;justify-content:center;text-align:center}
.cs-sheet .btn svg{width:18px;height:18px;flex:none}

/* la solución y sus juegos */
.cs-sol{background:var(--paper)}
.cs-games-t{margin:40px 0 16px;font:780 21px/1.25 var(--font-head);font-stretch:108%;color:var(--ink)}
.cs-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.cs-game{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--rule);color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.cs-game:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--action),0 18px 36px -18px rgba(11,27,48,.45)}
.cs-game-img{display:block;aspect-ratio:16/9;background:var(--ink)}
.cs-game-img img{display:block;width:100%;height:100%;object-fit:cover}
.cs-game-txt{display:grid;gap:3px;padding:14px 16px 16px}
.cs-game-txt b{font:780 18px/1.2 var(--font-head);font-stretch:110%}
.cs-game-txt small{color:var(--muted);font-size:14px;line-height:1.4}

/* la voz del cliente */
.cs-voices{background:var(--ink);color:#fff}
.cs-voices h2{color:#fff}
.cs-quote{margin:0}
.cs-quote blockquote{margin:0}
.cs-quote-main{max-width:980px}
.cs-quote-main p{margin:0;color:#fff;font:640 clamp(22px,2.4vw,31px)/1.38 var(--font-head);font-stretch:104%;letter-spacing:-.01em;text-wrap:pretty}
.cs-qmark{display:grid;place-items:center;width:56px;height:56px;margin-bottom:24px;border-radius:16px;background:var(--gold);color:var(--ink);box-shadow:0 5px 0 #C9831D;transform:rotate(-6deg)}
.cs-qmark svg{width:28px;height:28px;stroke-width:2.2}
.cs-quote figcaption{display:flex;align-items:center;gap:14px;margin-top:24px}
.cs-ava{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold);font:800 15px/1 var(--font-head)}
.cs-quote figcaption b{display:block;font-weight:720}
.cs-quote figcaption small{display:block;margin-top:3px;color:var(--fog);font-size:14.5px;line-height:1.4}
.cs-quotes-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:48px}
.cs-quotes-more .cs-quote{padding:26px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cs-quotes-more p{margin:0;color:#E6EDF6;font-size:17px;line-height:1.62}

/* los resultados */
.cs-score{padding:26px;border-radius:20px;background:var(--paper)}
.cs-score h3{margin:0 0 6px;font:780 18px/1.3 var(--font-head);font-stretch:108%;color:var(--ink)}
.cs-score ul{list-style:none;margin:0;padding:0}
.cs-score li{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--rule)}
.cs-score li:first-child{border-top:0}
.cs-score strong{color:var(--ink);font:840 26px/1 var(--font-head);font-stretch:118%;white-space:nowrap}
.cs-score li:first-child strong{color:var(--action)}
.cs-score span{color:var(--muted);font-size:15.5px;line-height:1.45}

/* texto de siempre (fichas protegidas) y más casos */
.cs-legacy{background:var(--paper)}
.cs-legacy .doc-body{max-width:760px}
.cs-more{background:var(--paper)}
.cs-legacy + .cs-more{background:#fff}
.cs-more h2{font-size:clamp(26px,3vw,36px)}
.cs-more .res-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-more .res-card{background:#fff}

@media (max-width:960px){
  .cs-grid{grid-template-columns:minmax(0,1fr)}
  .cs-sheet{position:static}
  .cs-board{max-width:640px}
}
@media (max-width:760px){.cs-more .res-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .cs-board-main{padding:0 20px}
  .cs-board-more{grid-auto-flow:row;padding:6px 20px 14px}
  .cs-board-more li{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .cs-board-more li:first-child{border-top:0}
  .cs-board-more strong{flex:none;min-width:88px;font-size:26px}
  .cs-board-more span{margin-top:0}
  .cs-medal{width:48px;height:48px}
  .cs-medal svg{width:24px;height:24px}
}

/* el caso en vídeo (y la galería del índice): miniatura propia + play; el reproductor de YouTube (sin cookies,
   youtube-nocookie) solo se carga al pulsar */
.cs-video{background:#fff}
.cs-video-grid{display:grid;grid-template-columns:minmax(0,1fr);max-width:880px}
.cs-video-many{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:none;gap:18px}
.cs-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;overflow:hidden;border:0;border-radius:20px;background:var(--ink);cursor:pointer;box-shadow:0 30px 60px -30px rgba(11,27,48,.55)}
.cs-yt img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
.cs-yt:hover img{transform:scale(1.03);filter:brightness(.85)}
.cs-yt-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--gold);color:var(--ink);box-shadow:0 6px 0 #C9831D,0 20px 40px -10px rgba(0,0,0,.6);transition:transform .2s}
.cs-yt-play svg{width:32px;height:32px;margin-left:4px;fill:currentColor}
.cs-yt:hover .cs-yt-play{transform:scale(1.08)}
.cs-yt:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.cs-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-yt.is-playing{cursor:default}
.cs-gallery{margin-top:clamp(56px,6vw,88px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule)}
.cs-gallery h2{margin:0;font:820 clamp(26px,3vw,38px)/1.08 var(--font-head);font-stretch:118%;letter-spacing:-.02em;color:var(--ink)}
.cs-gallery > p{max-width:44em;margin:10px 0 26px;color:var(--muted);font-size:17px;line-height:1.55}
.cs-gallery ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px;margin:0;padding:0}
.cs-gallery li > span{display:block;margin-top:10px;color:var(--ink);font:720 16px/1.3 var(--font-head);font-stretch:106%}
.cs-gallery .cs-yt{border-radius:16px;box-shadow:none}
.cs-gallery .cs-yt-play{width:52px;height:52px;margin:-26px 0 0 -26px;box-shadow:0 4px 0 #C9831D}
.cs-gallery .cs-yt-play svg{width:22px;height:22px}
@media (max-width:1060px){.cs-gallery ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cs-gallery ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cs-yt img,.cs-yt-play{transition:none}}