/* ============================================================
   RUNA · web-trabajo.css · página Trabajos (/trabajo y /en/work)
   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 inset o como anillo, igual que el kit), sin
   degradados ni animaciones nuevas. En gráficos solo verticales y
   diagonales: sin filetes horizontales.
   ============================================================ */

/* ---------- botón que amplía una foto (visor) ---------- */
.ampliar{display:block;width:100%;min-width:0;border:0;padding:0;margin:0;font:inherit;color:inherit;background:var(--web-blanco-producto);cursor:zoom-in;text-align:left}
button.foto{border-radius:var(--runa-radio-l)}

/* ---------- cifras: la «→» es media Dagaz ---------- */
.banda-cifras{padding-block:var(--e6)}
.flecha-texto{display:inline-block;height:.8em;width:auto;vertical-align:-.05em;margin-inline:.1em;color:var(--runa-tinta-900)}

/* ---------- el problema: tres puntos con asta vertical ---------- */
.puntos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--e6);margin-top:var(--e6)}
.puntos > div{border-left:2px solid var(--runa-linea);padding-left:var(--e4)}
.puntos .etiqueta{margin:0 0 var(--e2)}
.puntos p.texto-2{margin:0}

/* ---------- casos ---------- */
.caso-titulo{font-size:clamp(22px,2.6vw,30px)}
.etiquetas{list-style:none;margin:0 0 var(--e3);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-cabeza{display:grid;grid-template-columns:1fr 1fr;gap:var(--e5) var(--e7);align-items:start}
.caso-cabeza p.texto-2{margin:0}
.caso .cifras{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4);margin-top:var(--e5)}
.caso .cifras b{font-size:clamp(28px,3vw,36px)}
.caso .cifras span{font-size:15px}
.caso .mas{margin:var(--e5) 0 0}
@media (max-width:560px){.caso .cifras{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.caso-cabeza{grid-template-columns:1fr}}


/* galerías de fotos: .foto (radio grande), pie debajo */
.fotos{display:grid;gap:var(--e3);margin-top:var(--e6)}
.fotos .foto{aspect-ratio:1/1}
.fotos--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fotos--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.fotos--juntas{margin-top:var(--e3)}
.foto--doc > img{object-fit:contain}
.pie-galeria{margin:var(--e3) 0 0;font-size:15px;color:var(--runa-texto-2)}
@media (max-width:900px){.fotos--4{grid-template-columns:repeat(2,minmax(0,1fr))}.fotos--6{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* carta de acabados: muro de fotos con su asta de color (dato de producto) */
.carta{margin-top:var(--e7);padding:var(--e6);border-radius:var(--runa-radio-l);background:var(--runa-piedra-100)}
.seccion--panel .carta{background:var(--runa-piedra-50)}
.carta-cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e2) var(--e5)}
.carta-cabeza h4{margin:0;font:600 clamp(19px,1.8vw,22px)/1.2 var(--f-titular);letter-spacing:-.01em}
.carta-cabeza .etiqueta{margin:0}
.muro{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--e5) var(--e3);margin-top:var(--e5)}
.muro--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.muro--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.muro figure{margin:0;min-width:0}
.muro .ampliar{border-radius:var(--runa-radio-s);overflow:hidden;aspect-ratio:1/1}
.muro .ampliar img{width:100%;height:100%;object-fit:cover}
.muro--tir .ampliar{aspect-ratio:3/2;background:var(--web-blanco-producto)}
.seccion--panel .muro--tir .ampliar{background:var(--web-blanco-producto)}
.muro--tir .ampliar img{object-fit:contain;padding:6px}
.muro figcaption{display:flex;align-items:center;gap:var(--e2);margin-top:var(--e2);min-width:0}
.muro .muestra{display:block;flex:none;width:6px;height:20px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--runa-piedra-300)}
.muro .nm{font:600 14px/1.3 var(--f-texto);color:var(--runa-texto);min-width:0;overflow-wrap:anywhere}
.muro .hx{margin-left:auto;font-size:13px;line-height:1.3;color:var(--runa-texto-2);font-variant-numeric:tabular-nums}
.carta .pie-carta{margin-top:var(--e5)}
@media (max-width:1000px){.muro{grid-template-columns:repeat(4,minmax(0,1fr))}.muro--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){
  .carta{padding:var(--e4)}
  .muro{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e4) var(--e2)}
  .muro--6,.muro--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .muro .hx{display:none}
}

/* ---------- estudios de producto: miniaturas ---------- */
.estudios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e7) var(--e5);margin-top:var(--e6)}
.estudio h3{font-weight:600;font-size:19px;margin:0 0 var(--e3)}
.miniaturas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e2)}
.miniaturas .foto{aspect-ratio:1/1;border-radius:var(--runa-radio)}
.miniaturas .grande{grid-column:1/-1;order:-1;border-radius:var(--runa-radio-l)}
.miniaturas .oculta{display:none}
@media (max-width:900px){.estudios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.estudios{grid-template-columns:1fr}}

/* ---------- proceso y servicios: tarjetas con icono ---------- */
.paso,.servicios{margin-top:var(--e6)}
.servicios{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.servicios{grid-template-columns:1fr}}
.tarjeta .etiqueta{margin:0 0 var(--e2)}
.servicios .lista-rombo{margin-top:var(--e4);font-size:15px}
.tipos{margin-top:var(--e7);max-width:74ch}
.tipos h3{margin-bottom:var(--e3)}
.tipos p{max-width:74ch}
.tipos b{color:var(--runa-texto)}

/* ---------- visor ampliado (#lb) ---------- */
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:var(--e4);cursor:zoom-out}
.lb.on{display:flex}
.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)}
.lbcap{margin:0;font:600 15px/1.4 var(--f-texto);min-height:1.4em}
.lbx{flex:none;padding:11px 16px}
.lbmain{margin-top:var(--e4);display:grid;place-items:center}
.lbmain img{width:auto;max-width:100%;max-height:calc(100vh - 240px);max-height:calc(100dvh - 240px);object-fit:contain;border-radius:var(--runa-radio);background:var(--web-blanco-producto)}
.lbnav{display:flex;justify-content:space-between;align-items:center;gap:var(--e3);margin-top:var(--e4)}
.lbnum{font:600 14px/1 var(--f-texto);font-variant-numeric:tabular-nums;color:var(--runa-texto-2)}
.lb.solo .lbnav{display:none}