/* estilos/ec-tec-fotos.css (26/10/2026, k1249): LAS PAGINAS DE CADA TECNICA CON LAS FOTOS DEL USUARIO (las de su carpeta
   CHATGPT/TECNICAS DE IMPRESION/<TECNICA>): tampografia.asp (k1246), grabado-laser.asp (k1249), impresion-uv.asp (k1264)
   y las que vengan.
   Va despues de estilos/ec-serigrafia.css: su tb-page lleva sg26 (el diseno de la tarifa de serigrafia: portada, taller
   con mosaico, tarifa con grafico, recargos, productos con foto, ficha y preguntas) y tf26 (lo de aqui: el proceso con
   fotos, la comparativa, la foto bajo la ficha, las rejillas sin huecos). El fondo de la llamada final, en cada pagina
   (style en su section). Antes, estilos/ec-tampografia.css (k1246), que esta sustituye.
   Las fotos, en WebP: img/estampacion/<tecnica>/ (scratchpad k1246: gen_fotos*.py con opt.mjs de k1190). */

/* ------------------------------------------------------------------ el proceso: cinco pasos, cada uno con su foto */
html body .contenidoprincipal .tec26.tf26 .tf-proc{background:var(--tp-soft);border:1px solid var(--tp-lin);border-radius:24px;padding:30px 32px}
html body .contenidoprincipal .tec26.tf26 .tf-proc .sg-cab{margin:0 0 20px}
html body .contenidoprincipal .tec26.tf26 .tf-proc-l{list-style:none;margin:0 !important;padding:0 !important;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
html body .contenidoprincipal .tec26.tf26 .tf-proc-l li{display:flex;flex-direction:column;background:#fff;border:1px solid var(--tp-lin);border-radius:16px;overflow:hidden;margin:0 !important;padding:0 !important;min-width:0}
html body .contenidoprincipal .tec26.tf26 .tf-proc-f{position:relative;display:block;aspect-ratio:4/3;background:var(--tp-soft)}
html body .contenidoprincipal .tec26.tf26 .tf-proc-f img{width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;display:block}
html body .contenidoprincipal .tec26.tf26 .tf-n{position:absolute;left:10px;top:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--tp-br);color:#fff;font-size:14px;font-weight:800;line-height:1;box-shadow:0 0 0 3px rgba(255,255,255,.92)}
html body .contenidoprincipal .tec26.tf26 .tf-proc-t{padding:14px 16px 16px;min-width:0}
html body .contenidoprincipal .tec26.tf26 .tf-proc-l h3{font-size:16px !important;line-height:1.3 !important;font-weight:700 !important;color:var(--tp-ink) !important;margin:0 0 6px !important;padding:0 !important}
html body .contenidoprincipal .tec26.tf26 .tf-proc-l p{font-size:14px;line-height:1.55;color:var(--tp-txt);margin:0}

/* ------------------------------------------------------------------ la comparativa, en su caja (como la tarifa) */
html body .contenidoprincipal .tb-page.imp26.tf26 .tf-cmp table.tb-precios{margin:0 14px !important;width:calc(100% - 28px) !important}
html body .contenidoprincipal .tec26.tf26 .tf-si{color:#15803d;font-weight:700}
html body .contenidoprincipal .tec26.tf26 .tf-no{color:#b91c1c}

/* ------------------------------------------------------------------ la tarifa: la tabla (pocas filas) y los recargos
   debajo, al lado del grafico; la caja de la tabla crece lo que falte para que no quede hueco */
html body .contenidoprincipal .tec26.tf26 .sg-tarifa .tb-precios td:first-child{white-space:nowrap}
html body .contenidoprincipal .tec26.tf26 .tf-tar-izq{display:flex;flex-direction:column;gap:16px;min-width:0}
html body .contenidoprincipal .tec26.tf26 .tf-tar-izq .sg-tabla{flex:1 1 auto}
html body .contenidoprincipal .tec26.tf26 .tf-rec .sg-rec-h{margin:0 0 10px !important}

/* ------------------------------------------------------------------ la ficha y las preguntas: debajo de la ficha, una foto
   que llena lo que falta hasta el final de las preguntas (en una columna, fuera) */
html body .contenidoprincipal .tec26.tf26 .sg-dos{align-items:stretch}
html body .contenidoprincipal .tec26.tf26 .tf-dos-izq{display:flex;flex-direction:column;gap:16px;min-width:0}
html body .contenidoprincipal .tec26.tf26 .tf-dos-f{position:relative;flex:1 1 auto;min-height:150px;margin:0;border-radius:22px;overflow:hidden;background:var(--tp-soft)}
html body .contenidoprincipal .tec26.tf26 .tf-dos-f img{position:absolute;left:0;top:0;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover;object-position:50% 60%;display:block}
html body .contenidoprincipal .tec26.tf26 .tf-dos-f figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--tp-ink);font-size:12.5px;font-weight:700;line-height:1.2;padding:6px 10px;border-radius:8px}

/* ------------------------------------------------------------------ las rejillas, sin huecos: 12 trabajos de 6 en 6 */
html body .contenidoprincipal .tec26.tf26 .sg-prod-l.tf-12{grid-template-columns:repeat(6,minmax(0,1fr))}
html body .contenidoprincipal .tec26.tf26 .tf-mas-tit{font-size:14px;font-weight:700;color:var(--tp-ink);margin:18px 0 8px}
html body .contenidoprincipal .tec26.tf26 .tf-tags{margin:0 0 4px !important}

/* ------------------------------------------------------------------ los trabajos de antes (tampografia): los siete en una fila */
html body .contenidoprincipal .tb-page.imp26.tf26 .sg-mas.tf-gal7 .tb-gallery{grid-template-columns:repeat(7,minmax(0,1fr)) !important}

/* ------------------------------------------------------------------ pantallas medianas y el movil (sin huecos) */
@media (max-width:1180px){
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l{grid-template-columns:repeat(6,minmax(0,1fr))}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l li{grid-column:span 2}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l li:nth-child(n+4){grid-column:span 3}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l li:nth-child(n+4) .tf-proc-f{aspect-ratio:16/9}
  html body .contenidoprincipal .tb-page.imp26.tf26 .sg-mas.tf-gal7 .tb-gallery{grid-template-columns:repeat(7,minmax(0,1fr)) !important}
  html body .contenidoprincipal .tec26.tf26 .tf-dos-f{display:none}
  html body .contenidoprincipal .tec26.tf26 .sg-prod-l.tf-12{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  html body .contenidoprincipal .tec26.tf26 .sg-prod-l.tf-12{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media (max-width:640px){
  html body .contenidoprincipal .tec26.tf26 .tf-proc{padding:22px 16px}
  /* en el movil, cada paso en una ficha apaisada: la foto a la izquierda, del alto de su texto (lo que importa de cada
     foto, con el object-position de su img en la pagina) */
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l{grid-template-columns:1fr;gap:10px}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l li,html body .contenidoprincipal .tec26.tf26 .tf-proc-l li:nth-child(n+4){grid-column:auto;flex-direction:row}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l li .tf-proc-f,html body .contenidoprincipal .tec26.tf26 .tf-proc-l li:nth-child(n+4) .tf-proc-f{flex:0 0 112px;aspect-ratio:auto;min-height:104px}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-f img{position:absolute;left:0;top:0}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-t{padding:10px 12px 12px}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l h3{font-size:14.5px !important;margin:0 0 4px !important}
  html body .contenidoprincipal .tec26.tf26 .tf-proc-l p{font-size:13px;line-height:1.5}
  html body .contenidoprincipal .tec26.tf26 .tf-n{width:26px;height:26px;font-size:12.5px;left:8px;top:8px}
  html body .contenidoprincipal .tb-page.imp26.tf26 .tf-cmp table.tb-precios{margin:0 10px !important;width:calc(100% - 20px) !important}
  html body .contenidoprincipal .tb-page.imp26.tf26 .sg-mas.tf-gal7 .tb-gallery{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  html body .contenidoprincipal .tb-page.imp26.tf26 .sg-mas.tf-gal7 .tb-gallery figure:first-child{grid-column:span 2}
  html body .contenidoprincipal .tb-page.imp26.tf26 .sg-mas.tf-gal7 .tb-gallery figure:first-child a{aspect-ratio:2/1}
}
/* ------------------------------------------------------------------ (k1264) 20 trabajos (impresion UV): de 5 en 5,
   como la rejilla de serigrafia; de 4 en 4 en pantallas medianas y de 2 en 2 en el movil (sin huecos) */
@media (max-width:1180px){
  html body .contenidoprincipal .tec26.tf26 .sg-prod-l.tf-20{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:900px){
  html body .contenidoprincipal .tec26.tf26 .sg-prod-l.tf-20{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}