/* Veladura · páginas de casos de estudio.
   Se suma a style.css (base, costuras, menú fijo). Las páginas las genera plantillas/caso-de-estudio/generar_caso.py.
   Una sola tinta: Pleno #13324B y Papel #F4EFE6, con Veladura 60 (#6D7E89) y Papel 60 (#9AA3A8) solo en secundarios.
   Cada plano declara --fg y --bg con la clase cs-papel o cs-pleno. */

.cs-papel{--fg:#13324B;--bg:#F4EFE6;--linea:#B0B6B8;--sec:#6D7E89}
.cs-pleno{--fg:#F4EFE6;--bg:#13324B;--linea:#6D7E89;--sec:#9AA3A8}

.cs-cont{max-width:1440px;margin:0 auto;padding:0 clamp(20px,5.5vw,80px)}
.cs-eti{margin:0;font-size:14px;line-height:1.3;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.cs-p{margin:0;max-width:46em;font-size:clamp(17px,calc(14px + .5vw),21px);line-height:1.5;text-wrap:pretty}
.cs-p+.cs-p{margin-top:1em}
.cs-p-corto{max-width:34em}
.cs-h3{margin:0;font-size:clamp(26px,2.6vw,40px);line-height:1.1;font-weight:500;text-wrap:balance}
.cs-h4{margin:0;font-size:clamp(20px,1.8vw,26px);line-height:1.2;font-weight:500;text-wrap:balance}
.cs-peq{font-size:16px;line-height:1.45}
.cs-sec{color:var(--sec)}
.cs-papel .cs-sec{color:#13324B}
.cs-bloque{margin-top:clamp(64px,8vw,120px)}
.cs-bloque-s{margin-top:clamp(32px,4vw,56px)}
.cs-pila>*+*{margin-top:clamp(14px,1.6vw,22px)}

/* Rejillas */
.cs-dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,3.4vw,56px);align-items:start}
.cs-tres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,3vw,48px);align-items:start}
.cs-cinco{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(24px,2.4vw,36px);align-items:start}
.cs-texto-fig{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,4vw,72px);align-items:start}

/* Figuras */
.cs-fig{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-fig img{display:block;width:100%;height:auto;outline:1px solid var(--linea);outline-offset:0;background:var(--bg)}
.cs-papel .cs-fig img{outline-color:#13324B}
.cs-fig figcaption{font-size:16px;line-height:1.4}
.cs-fig figcaption b,.cs-fig figcaption .cs-et{font-size:14px;font-weight:500;letter-spacing:.14em}
.cs-marco{position:relative;padding:clamp(12px,1.6vw,22px)}

/* Etiquetas */
.cs-chip{display:inline-block;font-size:14px;line-height:1;font-weight:500;letter-spacing:.08em;padding:6px 10px;border:1px solid currentColor;white-space:nowrap}
.cs-chip-lleno{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}

/* Cifras */
.cs-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0 clamp(24px,3vw,48px)}
.cs-cifra{border-top:1px solid var(--linea);padding-top:16px;display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.cs-cifra b{font-size:clamp(40px,4.6vw,76px);line-height:.95;font-weight:500;letter-spacing:-0.02em}
.cs-cifra span{font-size:16px;line-height:1.4;color:var(--sec)}
.cs-papel .cs-cifra span{color:#13324B}

/* Ficha del caso (hero) */
.cs-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px 32px;margin:0}
.cs-ficha div{border-top:1px solid var(--linea);padding-top:10px}
.cs-ficha dt{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--sec)}
.cs-ficha dd{margin:6px 0 0;font-size:18px;line-height:1.35}

/* Tablas */
.cs-tabla{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.cs-tabla caption{text-align:left;padding-bottom:12px;font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.cs-tabla th{text-align:left;font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:10px 12px 10px 0;border-bottom:1px solid var(--fg);white-space:nowrap}
.cs-tabla td{padding:10px 12px 10px 0;border-bottom:1px solid var(--linea);vertical-align:middle}
.cs-tabla td.n,.cs-tabla th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-tabla tr.cs-grupo th{border-bottom:1px solid var(--linea);font-weight:500;padding-top:22px;color:var(--sec)}
.cs-papel .cs-tabla tr.cs-grupo th{color:#13324B}
.cs-aa{display:inline-flex;align-items:center;justify-content:center;width:52px;height:34px;font-weight:500;outline:1px solid #B0B6B8}
.cs-ok{font-weight:500}
.cs-tabla-x{overflow-x:auto}

/* Alternativas y opciones */
.cs-card{display:flex;flex-direction:column;gap:16px;min-width:0}
.cs-card ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.4}
.cs-card h4{margin:0;font-size:20px;line-height:1.2;font-weight:500}
.cs-card .cs-lab{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin:0}
.cs-tira{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,100px),1fr));gap:clamp(14px,1.6vw,22px)}
.cs-tira figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.cs-tira img{display:block;width:100%;height:auto;outline:1px solid #13324B;background:#F4EFE6}
.cs-tira figcaption{font-size:14px;line-height:1.3;font-weight:500;letter-spacing:.08em}
.cs-tira-ancha{grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr))}

/* Pares antes y después */
.cs-par{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(20px,2.4vw,36px);align-items:start}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cs-despues img{animation:revela linear both;animation-timeline:view();animation-range:entry 15% entry 85%}
  }
}

/* Antes y después: chip grande sobre la imagen y marco distinto
   (antes: borde discontinuo; después: borde sólido y grueso) */
.cs-lado{display:inline-flex;align-self:flex-start;font-size:16px;line-height:1;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border:1px solid currentColor}
.cs-lado-d{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cs-antes img,.cs-antes .cs-pantalla{outline-style:dashed!important}
.cs-despues img,.cs-despues .cs-pantalla{outline-style:solid!important;outline-width:2px!important;outline-color:var(--fg)!important}

/* Móviles: pares con título, dos teléfonos por par */
.cs-moviles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,5vw,72px) clamp(28px,3vw,56px);align-items:start}
.cs-movpar{display:flex;flex-direction:column;gap:18px;min-width:0}
.cs-movpar-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);align-items:start}
.cs-movil{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-movil .cs-pantalla{aspect-ratio:390 / 760;overflow:hidden;outline:1px solid var(--linea);background:var(--bg)}
.cs-papel .cs-movil .cs-pantalla{outline-color:#13324B}
.cs-movil img{display:block;width:100%;height:auto;outline:0!important}

/* Decisiones de detalle */
.cs-dec{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(28px,3vw,48px) clamp(28px,3vw,56px)}
.cs-dec article{border-top:1px solid var(--fg);padding-top:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cs-dec .cs-num{font-size:20px;font-weight:500;letter-spacing:.08em;line-height:1}
.cs-dec p{margin:0;font-size:17px;line-height:1.5;text-wrap:pretty}
.cs-dec blockquote{margin:0;padding:0 0 0 16px;border-left:2px solid var(--fg);font-size:17px;line-height:1.5;font-style:italic;font-family:'Alegreya',Georgia,serif}
.cs-dec .cs-dato{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--sec)}
.cs-papel .cs-dec .cs-dato{color:#13324B}

/* Registro de excepciones */
.cs-excep{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,2.4vw,32px)}
.cs-excep article{border:1px solid var(--fg);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:10px}
.cs-excep h4{margin:0;font-size:18px;line-height:1.3;font-weight:500}
.cs-excep p{margin:0;font-size:16px;line-height:1.45}
.cs-excep .cs-n{font-size:14px;font-weight:500;letter-spacing:.14em}

/* Cierre */
.cs-cta{display:inline-flex;align-items:center;min-height:56px;padding:0 32px;background:var(--fg);color:var(--bg);font-size:18px;font-weight:500;text-decoration:none}
@media (hover:hover){.cs-cta:hover{background:#9AA3A8;color:#13324B}}
.cs-enlaces{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0;padding:0;list-style:none;font-size:18px}
.cs-enlaces a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.cs-papel a:focus-visible,.cs-pleno a:focus-visible{outline:3px solid currentColor;outline-offset:4px}

/* Cabecera del caso: cifras en el pie del hero */
.cs-hero{display:flex;flex-direction:column;gap:clamp(36px,5vw,72px)}
.cs-hero h1{margin:0;font-size:clamp(46px,min(9vw,13svh),150px);line-height:.92;font-weight:500;letter-spacing:-0.02em;text-wrap:balance;max-width:14ch}
.cs-hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(28px,4vw,72px);align-items:end}
@media (min-width:1024px){.cs-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}