/* Estilos propios de la página «casos». Prefijo de clases reservado para esta página: cs- */

/* ================================================================ cabecera: frase + índice de expedientes */
.cs-top .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px 64px;align-items:end}
.cs-top-txt{min-width:0}
.cs-indice{display:grid;gap:32px;padding-top:26px;padding-bottom:6px}
.cs-exp{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:end;background:#fff;border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:15px 16px 12px;color:var(--ink);text-decoration:none}
.cs-exp:nth-child(1){rotate:-1.2deg}
.cs-exp:nth-child(2){rotate:.9deg;margin-left:26px}
.cs-exp:nth-child(3){rotate:-.5deg;margin-left:8px}
.cs-exp-lomo{position:absolute;left:-1.5px;bottom:100%;background:var(--ink);color:var(--yellow);padding:5px 10px 3px;font-size:11px}
.cs-exp-lomo::after{content:"  ↓";white-space:pre}
.cs-exp-marca{grid-column:1;grid-row:1;font-family:var(--display);font-size:34px;line-height:1.08;text-transform:uppercase}
.cs-exp-que{grid-column:2;grid-row:1;color:var(--muted);font-size:11px;align-self:start;text-align:right;padding-top:6px}
.cs-exp-cifra{grid-column:1;grid-row:2;font-size:16px;color:var(--muted);line-height:1.3}
.cs-exp-cifra b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1;color:var(--ink);margin-right:6px}
.cs-exp-glifo{grid-column:2;grid-row:2;justify-self:end;align-self:center}
.cs-exp-glifo svg{display:block;overflow:visible}
.cs-g-b{transform-box:fill-box;transform-origin:0 50%}
.js .cs-g-a{animation:cs-g-llena 6s ease-in-out infinite;animation-delay:calc(var(--n)*90ms)}
.js .cs-g-b{animation:cs-g-iguala 6s cubic-bezier(.16,1,.3,1) infinite;animation-delay:calc(var(--n)*90ms)}
@keyframes cs-g-llena{0%,4%{opacity:.12}12%,100%{opacity:1}}
@keyframes cs-g-iguala{0%,6%{transform:scaleX(.35)}22%,100%{transform:scaleX(1)}}
.js .cs-exp{transition:opacity .65s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*80ms),transform .65s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*80ms),background-color .2s ease,box-shadow .2s ease}
.js .obs.hecho .cs-exp{transition-delay:0s;transition-duration:.2s}
.cs-exp:hover,.cs-exp:focus-visible{background:var(--yellow);transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.cs-exp:hover .cs-exp-que,.cs-exp:hover .cs-exp-cifra{color:var(--ink)}

/* cinta de cifras medidas */
.cs-cinta{background:var(--ink);color:#fff;overflow-x:auto;scrollbar-width:none}
.cs-cinta::-webkit-scrollbar{display:none}
.cs-cinta-pista{list-style:none;padding:0;margin:0;display:flex;width:max-content}
.cs-cinta-pista li{display:flex;align-items:baseline;gap:12px;padding:20px 30px 17px;border-left:1px solid rgba(255,255,255,.16);white-space:nowrap}
.cs-cinta-pista b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.1;color:var(--yellow)}
.cs-cinta-pista span{color:var(--soft)}
.js .cs-cinta.cs-corre{overflow:hidden}
.js .cs-corre .cs-cinta-pista{animation:cs-cinta 52s linear infinite}
.js .cs-corre:hover .cs-cinta-pista{animation-play-state:paused}
@keyframes cs-cinta{to{transform:translateX(-50%)}}

/* ================================================================ lo común a los tres expedientes */
.cs-cab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end;border-bottom:1.5px solid var(--ink);padding-bottom:16px;margin-bottom:44px}
.cs-lomo{grid-column:1/-1;justify-self:start;background:var(--ink);color:#fff;padding:6px 12px 5px;margin-bottom:14px}
.cs-lomo b{color:var(--yellow);font-weight:500}
.cs-caso .cs-marca{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(46px,6.2vw,84px);line-height:1.04;letter-spacing:.005em;margin:0;max-width:none}
.cs-sector{color:var(--muted);padding-bottom:8px;text-align:right}
.cs-caso{overflow-x:hidden;overflow-x:clip}   /* el sello entra desde grande: que no ensanche la página */
.cs-medido{position:absolute;right:0;top:-6px;transform-origin:100% 50%}
.cs-dos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.cs-n b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(88px,11.5vw,160px);line-height:1.05}
.cs-que{font-size:22px;line-height:1.3;max-width:19em;margin:4px 0 20px}
.cs-p{color:var(--muted);max-width:30em}
.cs-ir{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 24px}
.cs-eti{color:var(--muted)}
.cs-ej{position:static;color:var(--muted);border:1px dashed var(--muted);padding:2px 7px;font-size:11px;white-space:nowrap}
.js .cs-entra{transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.js .cs-entra.obs:not(.in){opacity:0;transform:translateY(24px)}

/* ================================================================ 01 · Disclosure: la rejilla que se clasifica */
.cs-rev{background:#fff;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.cs-rev > header{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1.5px solid var(--ink)}
.cs-rev-c{white-space:nowrap}
.cs-rev-n{display:inline-block;min-width:2.1em;text-align:right;font-weight:500;background:var(--yellow);padding:0 4px}
.cs-rev[data-lectura="cs-pr"] .cs-rev-n,.cs-rev[data-lectura="cs-sd"] .cs-rev-n{background:var(--aviso)}
.js .cs-rev-n{transition:background-color .3s ease}
.cs-rej{--cols:28;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));margin:16px;position:relative}
.cs-rej i{position:relative;display:block;aspect-ratio:1}
.cs-rej i::before{content:"";position:absolute;inset:1.5px;background:var(--suave)}
.cs-rej:not(.cs-abs) i:nth-child(-n+131)::before,.cs-rej i.cs-ok::before,.cs-muestra.cs-ok{background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cs-rej i.cs-pr::before,.cs-muestra.cs-pr{background:var(--aviso);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cs-rej i.cs-sd::before,.cs-muestra.cs-sd{background:#fff;box-shadow:inset 0 0 0 2px var(--aviso)}
.cs-rej.cs-abs{display:block}
.cs-rej.cs-abs i{position:absolute;left:0;top:0;width:calc(100%/var(--cols));transform:translate(calc(var(--x,0)*100%),calc(var(--y,0)*100%))}
.js .cs-rej.cs-abs i{transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--o,0)*1ms),opacity .3s ease calc(var(--e,0)*1ms)}
.js .cs-rej i::before{transition:background-color .35s ease var(--d,0ms),box-shadow .35s ease var(--d,0ms)}
.js .cs-rev.obs:not(.in) .cs-rej i{opacity:0}
.cs-lect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.cs-lect button{position:relative;font:inherit;color:var(--ink);background:#fff;border:0;border-left:1.5px solid var(--ink);padding:14px 14px 18px;text-align:left;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;align-content:start;min-height:44px}
.cs-lect button:first-child{border-left:0}
.cs-lect button:hover{background:var(--cream)}
.cs-lect b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.1}
.cs-lect span{grid-column:1/-1;font-size:16px;line-height:1.3;color:var(--muted)}
.cs-muestra{display:block;width:18px;height:18px}
.cs-lect button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cs-lect button[aria-pressed="true"] span{color:var(--soft)}
.cs-lect button[aria-pressed="true"] b{color:var(--aviso)}
.cs-lect button[data-cls="cs-ok"][aria-pressed="true"] b{color:var(--yellow)}
.cs-lect button:focus-visible{outline-offset:-5px;outline-color:var(--yellow);z-index:1}
.cs-lect button[aria-pressed="false"]:focus-visible{outline-color:var(--ink)}
.cs-barra{position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0)}
.js .cs-girando .cs-lect button[aria-pressed="true"] .cs-barra{animation:cs-prog 6.6s linear forwards}
.js .cs-rev:hover .cs-barra,.js .cs-rev:focus-within .cs-barra,.js .cs-rev.cs-fuera .cs-barra{animation-play-state:paused}
@keyframes cs-prog{to{transform:scaleX(1)}}

/* 01 · Disclosure: banda de contenido */
.cs-banda{background:var(--ink);color:#fff}
.cs-banda .cs-eti{color:var(--yellow)}
.cs-h3{text-wrap:balance;font-size:clamp(30px,3.4vw,48px);font-weight:var(--tit-peso);font-stretch:var(--tit-ancho);line-height:1.12;letter-spacing:-.02em;margin:14px 0 0;max-width:17em}
.cs-h3 b{font-family:var(--display);font-weight:400;color:var(--yellow);font-size:1.5em;line-height:.9;letter-spacing:0;vertical-align:-.05em}
.cs-dias{list-style:none;padding:0;margin:44px 0 0;display:flex;align-items:stretch}
.cs-dia{display:flex;flex-direction:column;gap:10px;min-width:0}
.cs-dia > .mono:first-child{color:var(--soft)}
.cs-pub{flex:1 1 0}
.cs-pub img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border:1.5px solid #fff;box-shadow:4px 4px 0 var(--yellow)}
.cs-dia .cs-dia-n{color:var(--yellow)}
.cs-hueco{flex:0 0 40px;align-items:center}
.cs-hueco > .mono:first-child{color:rgba(255,255,255,.45)}
.cs-hueco::after{content:"";flex:1;border-left:1.5px dashed rgba(255,255,255,.35);margin-bottom:30px}
.cs-dentro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;margin-top:76px;align-items:start}
.cs-visor-caja{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:16px;margin-top:16px;align-items:stretch}
.cs-marco{position:relative;align-self:start;border:1.5px solid #fff;box-shadow:5px 5px 0 var(--yellow);background:#000;overflow:hidden}
.cs-marco img{width:100%;height:auto;aspect-ratio:515/640;object-fit:cover}
.cs-marco-n{position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;padding:3px 8px;border:1px solid #fff}
.cs-marco-n b{color:var(--yellow);font-weight:500}
.cs-tira{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}
.cs-tira li{min-height:0;display:flex}
.cs-tira button{flex:1;display:block;min-width:0;padding:0;border:1.5px solid rgba(255,255,255,.45);background:#000;cursor:pointer;overflow:hidden}
.cs-tira img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:opacity .25s ease}
.cs-tira button:hover img,.cs-tira button[aria-pressed="true"] img{opacity:1}
.cs-tira button[aria-pressed="true"]{border-color:var(--yellow);box-shadow:0 0 0 1.5px var(--yellow)}
.cs-hist-caja{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:22px;margin:16px 0 0;align-items:end}
.cs-hist-img{position:relative;border:1.5px solid #fff;box-shadow:5px 5px 0 var(--yellow)}
.cs-hist-img img{width:100%;height:auto}
.cs-punto{position:absolute;border:2px solid var(--yellow)}
.cs-punto-1{left:15%;top:86.4%;width:41%;height:4.4%}
.cs-punto-2{left:73%;top:83.2%;width:23.5%;height:5.2%}
.cs-punto b,.cs-notas b{display:block;width:20px;height:20px;background:var(--yellow);color:var(--ink);font:500 12px/20px var(--mono);text-align:center}
.cs-punto b{position:absolute}
.cs-punto-1 b{left:-24px;top:50%;margin-top:-10px}
.cs-punto-2 b{right:-2px;top:-24px}
.js .cs-punto::after{content:"";position:absolute;inset:-2px;border:2px solid var(--yellow);animation:cs-late 2.4s ease-out infinite}
.js .cs-punto-2::after{animation-delay:1.2s}
@keyframes cs-late{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.3,2);opacity:0}}
.cs-notas{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.cs-notas li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:17px;line-height:1.35}
.cs-notas b{margin-top:2px}
.cs-banda .cs-ir{margin-top:56px}

/* ================================================================ fichas (bento) de Hera y Vie Riche */
.cs-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;margin-top:56px}
.cs-t{position:relative;min-width:0;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.cs-t-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px;min-height:44px;border-bottom:1.5px solid var(--ink)}
.cs-t-cab h3{font-weight:500;padding:8px 0}
.cs-t-pie{margin-top:auto;padding:14px 16px 16px;border-top:1px dashed var(--dash);font-size:17px;line-height:1.35;display:flex;align-items:baseline;gap:10px}
.cs-t-pie b{flex:none;font-family:var(--display);font-weight:400;font-size:38px;line-height:1}

/* ================================================================ 02 · Hera Jewelry */
.cs-tres{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.25fr);gap:20px 48px;align-items:end}
.cs-tres .cs-n b{line-height:.95}
.cs-tres .cs-que{margin:0 0 8px}
.cs-tres .cs-p{margin-bottom:8px}
.cs-t-cajon,.cs-t-bus{grid-column:1/8}
.cs-t-ren,.cs-t-man{grid-column:8/13}
.cs-t-cajon .cs-t-cab{padding-right:0}
.cs-conmuta{align-self:stretch;min-height:44px;font-family:var(--mono);color:var(--ink);background:var(--yellow);border:0;border-left:1.5px solid var(--ink);padding:0 16px;cursor:pointer}
.cs-conmuta:hover{background:var(--ink);color:var(--yellow)}
.cs-conmuta:focus-visible{outline-offset:-5px}
.cs-cajon-caja{position:relative;flex:1;display:flex;margin:16px;min-height:300px;background:var(--suave);border:1.5px solid var(--ink)}
.cs-cajon{container-type:size;flex:1;min-width:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;padding:50px 14px 14px;overflow:hidden}
.cs-fam{position:relative;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:10px;background:#fff;border:1.5px solid var(--ink)}
.cs-fam b{position:absolute;left:-1.5px;top:-1.5px;background:var(--yellow);border:1.5px solid var(--ink);font:500 11px/1 var(--mono);padding:4px 6px 3px}
.cs-fam i{display:block;height:8px;width:var(--w,80%);background:var(--ink)}
.cs-chip{position:absolute;left:12px;top:12px;padding:5px 9px 4px;font-size:11px;background:var(--ink);color:#fff;border:1.5px solid var(--ink)}
.cs-chip-b{background:var(--yellow);color:var(--ink)}
.cs-chip-a{opacity:0}
.cs-antes .cs-chip-a{opacity:1}
.cs-antes .cs-chip-b{opacity:0}
.cs-antes .cs-fam{background:transparent;border-color:transparent}
.cs-antes .cs-fam b{opacity:0}
.cs-antes .cs-fam i{transform:translate(calc(var(--dx)*1cqw),calc(var(--dy)*1cqh)) rotate(var(--r))}
.js .cs-chip{transition:opacity .4s ease}
.js .cs-fam{transition:background-color .5s ease .35s,border-color .5s ease .35s}
.js .cs-fam b{transition:opacity .4s ease .7s}
.js .cs-fam i{transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--k)*16ms)}
.js .cs-antes .cs-fam,.js .cs-antes .cs-fam b{transition-delay:0s}

.cs-ren{list-style:none;margin:0;padding:4px 16px 0}
.cs-ren li{display:grid;grid-template-columns:minmax(0,.9fr) 18px minmax(0,1.1fr);gap:8px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--dash)}
.cs-ren s{position:relative;justify-self:start;font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
.cs-ren s::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:1.5px;background:var(--aviso);transform-origin:0 50%}
.cs-ren li > i{font-style:normal;font-family:var(--mono);font-size:15px}
.cs-ren b{justify-self:start;font-weight:500;font-size:17px;line-height:1.25;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 92%/100% 36%}
.js .cs-ren s::after{transition:transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*80ms + 200ms)}
.js .obs:not(.in) .cs-ren s::after{transform:scaleX(0)}
.js .cs-ren b{transition:background-size .6s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*80ms + 620ms),opacity .4s ease calc(var(--i,0)*80ms + 500ms)}
.js .obs:not(.in) .cs-ren b{background-size:0% 36%;opacity:.2}
.cs-ren-ok{margin:14px 16px 16px;padding:10px 12px;background:var(--yellow);border:1.5px solid var(--ink);font-size:16px;line-height:1.35}
.cs-ren-ok .mono{display:block;font-size:11px;margin-bottom:2px}

.cs-serp{padding:16px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;align-items:start}
.cs-serp-r{border:1.5px solid var(--ink);padding:11px 14px 13px;background:#fff}
.cs-serp-e{display:inline-block;font-size:11px;padding:3px 6px 2px;margin-bottom:7px;border:1px solid var(--ink)}
.cs-serp-t{font-size:19px;font-weight:500;line-height:1.25}
.cs-serp-d{font-size:16px;line-height:1.4;color:var(--muted);margin-top:4px}
.cs-serp-antes{border:1.5px dashed var(--muted);background:transparent}
.cs-serp-antes .cs-serp-e{border-style:dashed;color:var(--muted);border-color:var(--muted)}
.cs-serp-antes .cs-serp-t{font-family:var(--mono);font-size:15px;font-weight:400;color:var(--muted)}
.cs-serp-ahora{box-shadow:4px 4px 0 var(--ink)}
.cs-serp-ahora .cs-serp-e{background:var(--yellow)}
.cs-serp-ahora .cs-serp-t{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:4px}
.js .cs-cursor::after{content:"";display:inline-block;width:.5em;height:1em;background:var(--yellow);margin-left:2px;vertical-align:-.15em;animation:parpadeo 1s steps(2) infinite}

.cs-t-man{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 22px;align-items:center;align-content:center;padding:24px 24px 26px;background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--yellow)}
.cs-man-svg{width:62px;height:auto;rotate:-5deg}
.cs-man-txt .mono{color:var(--yellow)}
.cs-man-txt p{font-size:21px;line-height:1.3;margin-top:4px}
.cs-t-man .cs-ir{grid-column:1/-1;margin:6px 0 0;gap:14px 24px}

/* ================================================================ 03 · Vie Riche */
.cs-stock{background:#fff;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.cs-stock > header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1.5px solid var(--ink)}
.cs-st{width:100%;border-collapse:collapse}
.cs-st thead th{font-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.02em;text-align:left;color:var(--muted);padding:10px 16px 8px}
.cs-st thead th + th{width:112px;text-align:center;padding-left:6px;padding-right:6px}
.cs-st tr{border-bottom:1px dashed var(--dash)}
.cs-st tbody th{font-weight:400;text-align:left;font-size:17px;line-height:1.3;padding:11px 16px}
.cs-st tbody small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.cs-st td{text-align:center;font-family:var(--display);font-size:28px;line-height:1;padding:9px 6px;white-space:nowrap}
.cs-st td s{font-size:20px;color:var(--muted);margin-right:9px;text-decoration-color:var(--aviso);text-decoration-thickness:1.5px}
.cs-st td b{display:inline-block;font-weight:400;min-width:1.75em;padding:6px 6px 3px;background:var(--yellow);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cs-st td b.cs-igual{background:none;box-shadow:none}
.cs-e-mal{display:none}
.cs-e-mal::before{content:"";display:inline-block;width:8px;height:8px;background:var(--aviso);margin-right:6px}
.cs-fix .cs-e-ok{color:var(--ink)}
.cs-mal .cs-e-mal{display:inline;color:var(--ink)}
.cs-mal .cs-e-ok{display:none}
.cs-mal td s{display:inline-block;font-size:28px;color:var(--ink);text-decoration:none;margin:0;min-width:1.75em;padding:6px 6px 3px;background:var(--aviso);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cs-mal td b{display:none}
.js .cs-st tr{transition:background-color .6s ease}
.js .cs-ahora{background:rgba(255,225,77,.28)}
.js .cs-ahora td b{animation:cs-pum .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes cs-pum{from{transform:scale(.5);opacity:0}}
.cs-prop{display:grid;gap:8px;padding:16px;border-top:1.5px solid var(--ink);margin-top:-1px;background:var(--paper)}
.cs-prop p{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cs-prop p b{font-family:var(--display);font-weight:400;font-size:32px;line-height:1}
.cs-prop-b{height:24px;border:1.5px solid var(--ink);background:repeating-linear-gradient(90deg,var(--suave) 0 3px,#fff 3px 6px)}
.cs-prop-b i{display:block;height:100%;background:var(--yellow);border-right:1.5px solid var(--ink)}

.cs-t-auto{grid-column:1/8;background:var(--ink);color:#fff;box-shadow:5px 5px 0 var(--yellow);overflow:hidden}
.cs-t-auto .cs-t-cab{border-bottom-color:rgba(255,255,255,.25)}
.cs-t-auto .cs-t-pie{border-top-color:rgba(255,255,255,.25)}
.cs-t-auto .cs-t-pie b{color:var(--yellow)}
.cs-doce{list-style:none;margin:0;padding:24px 22px 6px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 18px}
.cs-doce li{position:relative;color:#fff}
.cs-doce svg{display:block;width:100%;height:auto;overflow:visible}
.cs-doce li::after{content:"✓";position:absolute;right:-8px;top:-9px;width:19px;height:19px;background:var(--yellow);color:var(--ink);font:500 11px/19px var(--mono);text-align:center}
.cs-doce .cs-fallo{color:var(--aviso)}
.cs-doce .cs-fallo::after{content:"×";font-size:14px;background:var(--aviso)}
.js .obs.in .cs-doce .cs-fallo svg{animation:cs-tiembla 3.4s ease-in-out infinite 2.4s}
@keyframes cs-tiembla{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-6deg)}92%{transform:rotate(5deg)}96%{transform:rotate(-2deg)}}
.cs-detec{margin:16px 22px 0;padding:10px 12px;border:1.5px dashed var(--aviso);font-size:17px;line-height:1.35}
.cs-detec .mono{display:block;color:var(--aviso);font-size:11px;margin-bottom:2px}
.cs-reloj{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;align-items:start;margin:30px 22px 26px;padding-right:30px;min-height:62px}
.cs-r-0{border:1.5px solid #fff;padding:6px 9px 5px;font-size:11px}
.cs-r-linea{position:relative;height:1.5px;margin-top:14px;background:repeating-linear-gradient(90deg,#fff 0 5px,transparent 5px 10px)}
.cs-r-carro{position:absolute;inset:0}
.cs-r-carro i{position:absolute;left:-5px;top:-5px;width:11px;height:11px;background:var(--yellow)}
.cs-r-m{position:absolute;top:-7px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;white-space:nowrap;color:var(--soft)}
.cs-r-m::before{content:"";width:15px;height:15px;border:1.5px solid #fff;background:var(--yellow)}
.cs-r-m b{font-weight:500;color:var(--yellow);font-size:13px}
.cs-r-sms{left:25%}
.cs-r-mail{left:100%}
.js .cs-r-carro{animation:cs-carro 5.5s linear infinite}
.js .cs-r-sms::before{animation:cs-llega-a 5.5s linear infinite}
.js .cs-r-mail::before{animation:cs-llega-b 5.5s linear infinite}
@keyframes cs-carro{0%{transform:translateX(0)}60%,100%{transform:translateX(100%)}}
@keyframes cs-llega-a{0%,14%{background:var(--ink)}16%,100%{background:var(--yellow)}}
@keyframes cs-llega-b{0%,59%{background:var(--ink)}61%,100%{background:var(--yellow)}}

.cs-t-lista{grid-column:1/13;display:grid;grid-template-columns:auto minmax(0,.8fr) minmax(0,1fr);gap:16px 36px;align-items:center;padding:20px 30px 20px 26px;background:var(--yellow)}
.cs-lista-txt p{font-size:21px;line-height:1.3;margin-top:4px;max-width:15em}
.cs-salen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.cs-salen-l{background:var(--ink);color:var(--yellow);padding:13px 12px 11px;box-shadow:5px 5px 0 -1.5px #fff,5px 5px 0 0 var(--ink)}
.cs-salen-h{position:relative;height:30px;margin:0 10px 0 16px;overflow:hidden}
.cs-salen-h::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--dash)}
.cs-salen-h i{position:absolute;inset:0}
.cs-salen-h i::before{content:"";position:absolute;left:0;top:5px;width:28px;height:20px;border:1.5px dashed var(--ink);background:#fff}
.cs-salen-h i:nth-child(1){transform:translateX(6%)}
.cs-salen-h i:nth-child(2){transform:translateX(38%);opacity:.6}
.cs-salen-h i:nth-child(3){transform:translateX(70%);opacity:.28}
.js .cs-salen-h i{animation:cs-sale 4.8s linear infinite}
.js .cs-salen-h i:nth-child(2){animation-delay:-1.6s}
.js .cs-salen-h i:nth-child(3){animation-delay:-3.2s}
@keyframes cs-sale{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}
.cs-salen-f{border:1.5px dashed var(--ink);padding:12px 12px 10px}
.cs-gran b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(64px,7.6vw,104px);line-height:1.08}

.cs-t-panel{grid-column:8/13}
.cs-panel-caja{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:28px 22px 26px}
.cs-fuentes{display:grid;grid-template-columns:auto minmax(48px,1fr) auto;grid-template-rows:repeat(4,auto);align-items:center;padding-right:8px}
.cs-f{grid-column:1;margin:5px 0;border:1.5px solid var(--ink);background:var(--paper);padding:9px 12px 8px;white-space:nowrap}
.cs-hilos{grid-column:2;grid-row:1/5;position:relative;align-self:stretch}
.cs-hilos i{position:absolute;left:0;right:28px;height:1.5px;overflow:hidden}
.cs-hilos i:nth-child(1){top:12.5%}.cs-hilos i:nth-child(2){top:37.5%}.cs-hilos i:nth-child(3){top:62.5%}.cs-hilos i:nth-child(4){top:87.5%}
.cs-hilos i::before{content:"";position:absolute;top:0;bottom:0;left:-10px;right:0;background:repeating-linear-gradient(90deg,var(--ink) 0 5px,transparent 5px 10px)}
.cs-hilos::before{content:"";position:absolute;right:28px;top:12.5%;bottom:12.5%;border-left:1.5px dashed var(--ink)}
.cs-hilos em{position:absolute;right:0;top:50%;width:28px;border-top:1.5px dashed var(--ink)}
.cs-f-panel{grid-column:3;grid-row:1/5;align-self:center;background:var(--ink);color:var(--yellow);padding:26px 22px 24px;line-height:1.5;box-shadow:6px 6px 0 -1.5px #fff,6px 6px 0 0 var(--ink)}
.js .obs.in .cs-hilos i::before{animation:cs-flujo .8s linear infinite}
@keyframes cs-flujo{to{transform:translateX(10px)}}
.js .obs.in .cs-f-panel{animation:latido 2.6s ease-in-out infinite 1.6s}
.cs-panel-txt p:first-child{font-size:20px;line-height:1.3}

/* el carril lateral 01·02·03 (componente común .rail) solo cuando cabe sin pisar las fichas */
.js .rail{opacity:0;pointer-events:none;transition:opacity .3s ease}
.js .rail.cs-ve{opacity:1;pointer-events:auto}
@media (max-width:1279px){.js .rail{display:none}}

/* ================================================================ móvil */
@media (max-width:1180px){
  .cs-top .wrap{column-gap:40px}
}
@media (max-width:980px){
  .cs-top .wrap{grid-template-columns:minmax(0,1fr)}
  .cs-indice{max-width:560px}
}
@media (max-width:900px){
  .cs-indice{gap:30px;padding-top:30px}
  .cs-exp:nth-child(n){margin-left:0;margin-right:0}
  .cs-exp:nth-child(1){rotate:-.6deg}
  .cs-exp:nth-child(2){rotate:.5deg}
  .cs-exp:nth-child(3){rotate:-.3deg}
  .cs-exp-marca{font-size:30px}
  .cs-cinta-pista li{padding:16px 20px 13px}
  .cs-cinta-pista b{font-size:32px}
  .cs-cab{grid-template-columns:minmax(0,1fr);margin-bottom:34px;padding-bottom:16px}
  .cs-sector{text-align:left;padding:8px 0 0}
  .cs-medido{font-size:11px;top:-4px;padding:6px 9px}
  .cs-dos{grid-template-columns:minmax(0,1fr);gap:34px}
  .cs-que{font-size:20px}
  .cs-dias{margin:32px -20px 0;padding:0 20px 16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .cs-dias::-webkit-scrollbar{display:none}
  .cs-pub{flex:0 0 46%;scroll-snap-align:center}
  .cs-hueco{flex:0 0 34px}
  .cs-dentro{grid-template-columns:minmax(0,1fr);gap:52px;margin-top:52px}
  .cs-visor-caja{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:10px}
  .cs-tira{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px}
  .cs-hist-caja{grid-template-columns:minmax(0,1fr);align-items:start}
  .cs-hist-img{max-width:250px}
  .cs-banda .cs-ir{margin-top:40px}
  .cs-bento{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:38px}
  .cs-bento > .cs-t{grid-column:1/-1;grid-row:auto}
  .cs-cajon-caja{min-height:300px;margin:12px}
  .cs-cajon{gap:8px;padding:46px 8px 8px}
  .cs-fam{padding:7px;gap:5px}
  .cs-fam i{height:6px}
  .cs-t-cab h3{font-size:12px}
  .cs-tres{grid-template-columns:minmax(0,1fr);gap:0}
  .cs-tres .cs-que{margin:6px 0 20px}
  .cs-serp{grid-template-columns:minmax(0,1fr)}
  .cs-ren li{grid-template-columns:18px minmax(0,1fr);gap:5px 6px}
  .cs-ren s{grid-column:1/-1}
  .cs-t-man{padding:22px 20px}
  .cs-man-txt p{font-size:20px}
  .cs-t-lista{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 20px 26px}
  .cs-lista-txt p{font-size:20px;margin-bottom:14px}
  .cs-st thead th + th{width:74px}
  .cs-st tbody th{padding:11px 8px 11px 14px}
  .cs-st thead th{padding-left:14px}
  .cs-st td{font-size:24px;padding:9px 3px}
  .cs-st td s{font-size:18px;margin-right:5px}
  .cs-mal td s{font-size:24px}
  .cs-doce{gap:18px 14px;padding:22px 18px 4px}
  .cs-detec{margin:16px 16px 0}
  .cs-reloj{margin:28px 16px 24px}
  .cs-panel-caja{gap:26px;padding:24px 16px 26px}
  .cs-f{padding:8px 9px 7px;font-size:12px}
  .cs-f-panel{padding:20px 14px 18px}
}
@media (min-width:601px) and (max-width:900px){
  .cs-dias{scroll-padding:0 20px}
  .cs-pub{flex:0 0 27%}
  .cs-visor-caja{max-width:560px}
  .cs-hist-caja{grid-template-columns:minmax(0,250px) minmax(0,1fr);align-items:end}
  .cs-serp{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .cs-t-lista{grid-template-columns:auto minmax(0,1fr);gap:8px 28px}
  .cs-t-lista .cs-salen{grid-column:1/-1;margin-top:8px}
}
@media (max-width:600px){
  .cs-rej{--cols:20;margin:12px}
  .cs-rev > header{flex-direction:column;gap:4px}
  .cs-lect{grid-template-columns:minmax(0,1fr)}
  .cs-lect button{border-left:0;border-top:1.5px solid var(--ink);grid-template-columns:auto auto minmax(0,1fr);padding:12px 14px 15px}
  .cs-lect button:first-child{border-top:0}
  .cs-lect span{grid-column:auto}
  .cs-lect b{font-size:32px;min-width:1.7em}
  .cs-serp-antes .cs-serp-t{font-size:16px}
}