.cs-hero{padding:clamp(28px,4vw,48px) 0 clamp(14px,2vw,24px);background:linear-gradient(180deg,var(--soft),#fff)}
.cs-h1{max-width:15ch;margin-bottom:18px;font-size:clamp(2.4rem,5.6vw,4.6rem);letter-spacing:-.04em;line-height:1.02}
.cs-lead{max-width:60ch;margin:0;color:var(--muted);font-size:1.15rem}

.cs-esq{position:absolute;inset:-7px;pointer-events:none}
.cs-esq>span{position:absolute;width:11px;height:11px;border:0 solid var(--cyan)}
.cs-esq>span:nth-child(1){left:0;top:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:4px}
.cs-esq>span:nth-child(2){right:0;top:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:4px}
.cs-esq>span:nth-child(3){left:0;bottom:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:4px}
.cs-esq>span:nth-child(4){right:0;bottom:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:4px}
@keyframes cs-fija{0%{opacity:0;transform:scale(1.45)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes cs-sube{from{opacity:0;transform:translateY(10px)}}
@keyframes cs-revela{0%{opacity:.2;filter:blur(5px) brightness(1.8)}100%{opacity:1;filter:none}}
@keyframes cs-clic{35%{box-shadow:0 0 0 1px var(--line),0 0 16px 8px #fff}}

.cs-explora{padding:clamp(18px,3vw,32px) 0 clamp(48px,6vw,80px)}
.cs-grid{display:grid;gap:clamp(18px,3vw,36px);align-items:start}
@media(min-width:960px){.js .cs-grid{grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr)}}

.cs-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(max(9em,calc((100% - 10px) / 2)),1fr));gap:10px}
.cs-tab{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pic area" "pic t";align-items:center;gap:2px 14px;min-height:78px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--soft);color:var(--navy);font:inherit;text-align:left;cursor:pointer;transition:background-color .25s,border-color .25s,box-shadow .3s,transform .3s var(--ease-out)}
.cs-tab:hover{border-color:var(--cobalt);background:#fff}
.cs-tab[aria-selected=true]{border-color:var(--cobalt);background:#fff;box-shadow:0 14px 30px #04336b1f;transform:translateY(-2px)}
.cs-tab-pic{grid-area:pic;position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line)}
.cs-tab-pic .picto{width:26px;height:26px}
.cs-tab-pic .cs-esq{opacity:0;transition:opacity .2s}
.cs-tab:hover .cs-tab-pic .cs-esq{opacity:.45}
.cs-tab[aria-selected=true] .cs-tab-pic .cs-esq{opacity:1}
.js .cs-tab[aria-selected=true] .cs-tab-pic .cs-esq{animation:cs-fija .55s cubic-bezier(.34,1.56,.64,1) both}
.js .cs-tab[aria-selected=true] .cs-tab-pic{animation:cs-clic .5s ease-out}
.cs-tab-area{grid-area:area;font:600 .75rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.cs-tab-t{grid-area:t;font-family:var(--display);font-weight:650;font-size:1.02rem;line-height:1.15;overflow-wrap:anywhere}
.cs-tab-otra{grid-column:1/-1;border-style:dashed;background:transparent}

.cs-panel{display:grid;gap:20px}
.cs-ficha{position:relative;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 24px 60px #04336b14}
.cs-ficha-cab{display:flex;align-items:flex-start;gap:20px;margin-bottom:18px}
.cs-ficha-pic{position:relative;flex:none;display:grid;place-items:center;width:72px;height:72px;margin:8px 6px 0;border-radius:50%;background:var(--soft)}
.cs-ficha-pic .picto{width:40px;height:40px}
.cs-ficha-pic .cs-esq{inset:-9px}
.cs-ficha-pic .cs-esq>span{width:15px;height:15px}
.cs-area{margin:0 0 6px;font:600 .75rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt)}
.cs-ficha h3{margin:0 0 6px;font-size:clamp(1.45rem,2.6vw,2rem);letter-spacing:-.025em}
.cs-lema{margin:0;color:var(--muted)}
.cs-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.cs-meta div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;padding:6px 12px;border-radius:999px;background:var(--soft);font-size:.9rem}
.cs-meta dt{color:var(--muted)}
.cs-meta dd{margin:0;font-weight:700;color:var(--navy)}
.cs-pasos{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cs-pasos li{position:relative;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--soft)}

.cs-pasos li+li::before{content:"";position:absolute;left:-17px;top:35px;width:16px;height:2px;background:var(--cyan);transform-origin:left}
.cs-paso-ico{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:#fff;color:var(--navy);box-shadow:0 0 0 1px var(--line)}
.cs-paso-ico svg{width:22px;height:22px}
.cs-paso-suru{border-color:#9db9e3;background:#e3eefc}
.cs-paso-suru .cs-paso-ico{background:var(--cobalt);box-shadow:none}
.cs-pasos h4{margin:0 0 6px;font-size:1rem;letter-spacing:-.01em}
.cs-pasos p{margin:0;color:var(--navy);font-size:.95rem}
.cs-ojo{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px;border-radius:14px;background:#fff4dc;color:#5c3700;font-size:.95rem}
.cs-ojo svg{flex:none;margin-top:2px}
.cs-ficha-pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.cs-modelo{display:inline-block;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--navy);font-size:.88rem}
.cs-ficha-otra{border-style:dashed;box-shadow:none}
.cs-otra-txt{max-width:56ch;margin:0 0 18px;color:var(--navy)}

.js .cs-ficha:not([hidden]) .cs-ficha-cab,.js .cs-ficha:not([hidden]) .cs-meta,.js .cs-ficha:not([hidden]) .cs-pasos li,.js .cs-ficha:not([hidden]) .cs-ojo,.js .cs-ficha:not([hidden]) .cs-otra-txt{animation:cs-sube .5s var(--ease-out) both}
.js .cs-ficha:not([hidden]) .cs-meta{animation-delay:.1s}
.js .cs-ficha:not([hidden]) .cs-pasos li:nth-child(1){animation-delay:.18s}
.js .cs-ficha:not([hidden]) .cs-pasos li:nth-child(2){animation-delay:.3s}
.js .cs-ficha:not([hidden]) .cs-pasos li:nth-child(3){animation-delay:.42s}
.js .cs-ficha:not([hidden]) .cs-pasos li+li::before{animation:cs-linea .35s var(--ease-move) .5s both}
.js .cs-ficha:not([hidden]) .cs-ojo{animation-delay:.55s}
.js .cs-ficha:not([hidden]) .cs-ficha-pic .cs-esq{animation:cs-fija .6s cubic-bezier(.34,1.56,.64,1) .12s both}
.js .cs-ficha:not([hidden]) .cs-ficha-pic .picto{animation:cs-revela .7s var(--ease-out) both}
@keyframes cs-linea{from{transform:scaleX(0)}}

.cs-visor-sec{border-block:1px solid var(--line);background:var(--soft)}
.cs-visor{position:relative;max-width:820px;margin:0 auto 28px;padding:clamp(26px,4vw,40px) clamp(22px,4vw,44px);border-radius:24px;background:#fff;box-shadow:0 18px 50px #04336b14}
.cs-visor>.cs-esq{inset:12px}
.cs-visor>.cs-esq>span{width:26px;height:26px;border-color:var(--cobalt);transition:transform .9s var(--ease-out),opacity .6s}
.cs-visor>.cs-esq>span:nth-child(1),.cs-visor>.cs-esq>span:nth-child(2){border-top-width:3px}
.cs-visor>.cs-esq>span:nth-child(3),.cs-visor>.cs-esq>span:nth-child(4){border-bottom-width:3px}
.cs-visor>.cs-esq>span:nth-child(odd){border-left-width:3px}
.cs-visor>.cs-esq>span:nth-child(even){border-right-width:3px}
.js .cs-visor:not(.is-in)>.cs-esq>span{opacity:0}
.js .cs-visor:not(.is-in)>.cs-esq>span:nth-child(1){transform:translate(-14px,-14px)}
.js .cs-visor:not(.is-in)>.cs-esq>span:nth-child(2){transform:translate(14px,-14px)}
.js .cs-visor:not(.is-in)>.cs-esq>span:nth-child(3){transform:translate(-14px,14px)}
.js .cs-visor:not(.is-in)>.cs-esq>span:nth-child(4){transform:translate(14px,14px)}
.cs-visor-k,.cs-fuera-k{margin:0 0 14px;font:600 .75rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--cobalt)}
.cs-fuera-k{color:var(--muted)}
.cs-dentro{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px}
.cs-dentro li{display:flex;align-items:flex-start;gap:10px;font-weight:600;color:var(--navy)}
.cs-dentro .ico-si{flex:none;color:var(--cobalt)}
.cs-fuera{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px}
.cs-fuera li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px 8px 12px;border:1px dashed #9db9e3;border-radius:999px;color:var(--muted);font-size:.92rem}

.cs-notas .testi{border-style:dashed;background:var(--soft)}
.cs-notas .testi::after{content:none}
.cs-notas .testi-ini{background:var(--cobalt)}
.cs-notas .testi-ini svg{width:24px;height:24px}

@media(max-width:700px){
 .cs-pasos{grid-template-columns:1fr;gap:14px}
 .cs-pasos li+li::before{left:35px;top:-15px;width:2px;height:14px;transform-origin:top}
 .js .cs-ficha:not([hidden]) .cs-pasos li+li::before{animation-name:cs-linea-v}
 .cs-dentro{grid-template-columns:1fr}
}
@keyframes cs-linea-v{from{transform:scaleY(0)}}
@media(max-width:560px){
 .cs-lista{gap:8px}
 .cs-tab{gap:2px 10px;min-height:68px;padding:10px}
 .cs-tab-pic{width:40px;height:40px}
 .cs-tab-pic .picto{width:22px;height:22px}
 .cs-tab-pic .cs-esq{inset:-5px}
 .cs-tab-t{font-size:.95rem}
 .cs-ficha-cab{gap:14px}
 .cs-ficha-pic{width:56px;height:56px}
 .cs-ficha-pic .picto{width:32px;height:32px}
}

@media(prefers-reduced-motion:reduce){
 .cs-visor>.cs-esq>span{opacity:1;transform:none}
}