/* ============================================================
   RUNA · web-casos.css · plantilla de las páginas de casos
   (/casos/… y /en/cases/…) · identidad v3 · WEB
   Solo tokens: variables --runa-* (runa_colores.css), variables del kit
   (--e1..--e9, --runa-radio*, --f-*) y variantes de componentes de
   runa.css / web.css. Sin colores ni fuentes propias, sin sombras
   (box-shadow solo como anillo de selección, igual que el kit), sin
   degradados. En gráficos solo verticales y diagonales: sin filetes
   horizontales. Proporción y columnas del catálogo por caso con
   --ar-w / --ar-h / --cols / --colsT / --colsM (números, no colores).
   ============================================================ */

/* ---------- migas: el rombo como separador ---------- */
.migas{display:flex;flex-wrap:wrap;align-items:center;row-gap:var(--e1)}
.migas span[aria-hidden]{display:inline-flex}
.migas .rombo{width:7px;height:8px;display:block}
.migas [aria-current]{color:var(--runa-texto)}

/* ---------- portada del caso ---------- */
.caso-portada{padding-block:var(--e6) var(--e7)}
.etiquetas{list-style:none;margin:0 0 var(--e4);padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e3)}
.etiquetas li{display:inline-flex;align-items:center;gap:var(--e3)}
.etiquetas .rombo{width:7px;height:8px;display:block;color:var(--runa-arcilla-700)}
.caso-portada h1{max-width:22ch}
.entradilla{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--runa-texto-2);max-width:62ch;margin:0}
.entradilla a{color:inherit;text-underline-offset:3px}
.banda-cifras{padding-block:var(--e6)}

/* ---------- galería: .foto (radio grande), pie debajo ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e3)}
.galeria figure{margin:0}
.pie-galeria{margin:var(--e3) 0 0}
@media (max-width:700px){.galeria{grid-template-columns:repeat(2,1fr)}}

/* ---------- catálogo: selector de vista + tarjetas con asta del acabado ---------- */
.cat{--ar-w:1;--ar-h:1;--cols:6;--colsT:3;--colsM:3}
.cathead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--e5) var(--e6)}
.cathead h2{max-width:26ch}
.cathead p.texto-2{margin:0;max-width:58ch}
.vsel{display:inline-flex;flex-wrap:wrap;gap:var(--e2);flex:none}
.vsel button{border:0;border-radius:var(--runa-radio);padding:11px 16px;font:600 15px/1 var(--f-texto);cursor:pointer;background:transparent;color:var(--runa-texto);box-shadow:inset 0 0 0 1.5px var(--runa-texto)}
.vsel button:hover{background:var(--runa-piedra-50)}
.vsel button[aria-pressed="true"]{background:var(--runa-tinta-900);color:var(--runa-piedra-50)}
.famc{margin-top:var(--e6)}
.famc h3{font-weight:600;font-size:20px;margin:0 0 var(--e3)}
.cgrid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--e5) var(--e3)}
.cc{display:block;width:100%;min-width:0;background:none;border:0;padding:0;margin:0;text-align:left;font:inherit;color:inherit;cursor:zoom-in;border-radius:var(--runa-radio)}
.cc .ci{display:block;aspect-ratio:var(--ar-w)/var(--ar-h);border-radius:var(--runa-radio);overflow:hidden;background:var(--web-blanco-producto)}
.cc img{width:100%;height:100%;object-fit:cover}
.cc .cn{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e2)}
.cc .cn b{font:600 15px/1.3 var(--f-texto);color:var(--runa-texto);min-width:0}
.cc:hover .cn b{text-decoration:underline;text-underline-offset:3px}
.cc .cn em{margin-left:auto;font:400 13px/1.3 var(--f-texto);font-style:normal;color:var(--runa-texto-2);font-variant-numeric:tabular-nums}
.cc .asta,.lbhex .asta{display:block;flex:none;width:6px;height:20px;padding:0;border-radius:2px;cursor:inherit;box-shadow:inset 0 0 0 1px var(--runa-piedra-300)}
@media (max-width:980px){.cgrid{grid-template-columns:repeat(var(--colsT),minmax(0,1fr))}}
@media (max-width:560px){
  .cgrid{grid-template-columns:repeat(var(--colsM),minmax(0,1fr));gap:var(--e4) var(--e2)}
  .cc .cn{flex-wrap:wrap;row-gap:0}
  .cc .cn em{margin-left:14px;flex-basis:100%}
  .vsel{width:100%}
  .vsel button{flex:1;padding-inline:6px}
}

/* ---------- texto del caso ---------- */
.prosa{max-width:68ch}
.prosa h2{margin-top:var(--e7)}
.prosa h2:first-child{margin-top:0}
.prosa .lista-rombo{margin:0 0 1em}
.prosa .lista-rombo li{margin-bottom:var(--e2)}
.otros{margin-top:var(--e7)}
.otros .etiqueta{margin:0 0 var(--e3)}
.otros ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--e3) var(--e6)}

/* ---------- visor ampliado (#lb) ---------- */
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--e4)}
.lb[hidden]{display:none}
.lb::before{content:"";position:absolute;inset:0;background:var(--runa-tinta-900);opacity:.86}
.lbin{position:relative;z-index:1;width:min(1000px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--runa-piedra-50);color:var(--runa-texto);border-radius:var(--runa-radio-l);padding:clamp(16px,2.6vw,32px)}
.lbhead{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--e4)}
.lbfam{display:block;min-height:17px}
.lbhead h3{font-size:clamp(22px,2.6vw,30px);margin:var(--e1) 0 var(--e2)}
.lbhex{display:inline-flex;align-items:center;gap:var(--e2);font-size:13px;color:var(--runa-texto-2);font-variant-numeric:tabular-nums}
.lbhex[hidden]{display:none}
.lbhex .asta{cursor:default}
.lbx{flex:none;padding:11px 16px}
.lbbody{margin-top:var(--e4)}
.lbmain{width:min(100%,calc(62vh * var(--ar-w) / var(--ar-h)));aspect-ratio:var(--ar-w)/var(--ar-h);margin-inline:auto;border-radius:var(--runa-radio);overflow:hidden;background:var(--web-blanco-producto)}
.lbmain img{width:100%;height:100%;object-fit:cover}
.lbthumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3);margin-top:var(--e3)}
.lbthumbs button{display:block;min-width:0;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit;border-radius:var(--runa-radio-s)}
.lbthumbs .t{display:block;aspect-ratio:var(--ar-w)/var(--ar-h);border-radius:var(--runa-radio-s);overflow:hidden;background:var(--web-blanco-producto)}
.lbthumbs img{width:100%;height:100%;object-fit:cover}
.lbthumbs button[aria-pressed="true"] .t{box-shadow:0 0 0 2px var(--runa-piedra-50),0 0 0 4px var(--runa-tinta-900)}
.lbthumbs small{display:block;margin-top:var(--e2);font:600 12px/1.4 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--runa-texto-2)}
.lbthumbs button[aria-pressed="true"] small{color:var(--runa-texto)}
.lbnav{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);margin-top:var(--e5)}
#lbn{font:600 14px/1 var(--f-texto);font-variant-numeric:tabular-nums;color:var(--runa-texto-2)}
@media (min-width:900px){
  .lbbody{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:var(--e4);align-items:start}
  .lbthumbs{grid-template-columns:1fr;margin-top:0}
}

/* cifras: tres datos cortos caben en una fila también en móvil */
@media (max-width:560px){.banda-cifras .cifras{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3)}.banda-cifras .cifras > div{padding-left:var(--e3)}}