/* Proto&Go! · Sección «Acabados»: una carcasa, ocho acabados.
   Módulo aislado con prefijo pg-finish, adaptado de acabados-entrega/index.html.
   La cabecera de sección usa los estilos globales (.sec, .wrap, .head-2); aquí solo va el módulo. */
.pg-finishes{--accent:var(--orange);--secondary:var(--steel);background:var(--paper);font-synthesis:none}
.pg-finishes button,.pg-finishes a{-webkit-tap-highlight-color:transparent}
.pg-finishes :focus-visible{outline:2px solid var(--orange-deep);outline-offset:4px}
.pg-finishes-module{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center}
.pg-finish-controls{min-width:0}
.pg-finish-list-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;padding:0 14px 0 46px;font:400 9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--secondary)}
.pg-finish-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pg-finish-option{appearance:none;position:relative;width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:55px;margin:0;padding:8px 14px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;text-align:left;cursor:pointer;color:var(--secondary);font:inherit;transition:none;transform:none}
.pg-finish-option::before{content:'';position:absolute;top:10px;bottom:10px;left:0;width:2px;background:transparent}
.pg-finish-option[aria-selected="true"]{background:#ebebe780;color:var(--ink)}
.pg-finish-option[aria-selected="true"]::before{background:var(--accent)}
.pg-finish-option:hover{background:#ebebe780}
.pg-finish-option:focus-visible{outline-offset:-2px;z-index:2}
.pg-finish-number{align-self:start;margin-top:3px;font:400 10px/1.5 var(--mono)}
.pg-finish-info{display:flex;min-width:0;flex-direction:column;gap:3px}
.pg-finish-name{font-size:17px;line-height:1.15;font-weight:500}
.pg-finish-option[aria-selected="true"] .pg-finish-name{font-weight:600}
.pg-finish-materials{display:flex;flex-wrap:wrap;gap:3px 8px;font-size:10px;line-height:1.35;color:var(--secondary)}
.pg-finish-materials span{display:inline-flex;align-items:center;gap:4px}
.pg-finish-materials span::before{content:'';width:3px;height:3px;border-radius:50%;background:#858a8e}
.pg-finish-dimension{max-width:150px;text-align:right;font-size:11px;line-height:1.4;color:var(--secondary)}
.pg-finish-mobile-caption{display:none}
/* escenario: las nueve capas comparten encuadre; solo cambia la opacidad */
.pg-finish-stage{position:relative;isolation:isolate;aspect-ratio:16/10;width:100%;margin:0;overflow:hidden;border-radius:var(--r);background:#101214;box-shadow:0 40px 80px -40px rgba(30,32,35,.5);transform:none}
.pg-finish-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 600ms ease;pointer-events:none;user-select:none;transform:none;filter:none}
.pg-finish-image.is-initial{opacity:1}
/* etiqueta: fondo sólido y opaco, siempre por encima del fundido */
.pg-finish-label{position:absolute;z-index:100;top:20px;right:20px;max-width:calc(100% - 40px);margin:0;padding:14px 18px;border:1px solid #ffffff26;border-radius:6px;background:#15191d;box-shadow:0 10px 30px #0004;text-align:right;pointer-events:none;opacity:1;mix-blend-mode:normal}
.pg-finish-label strong{display:block;color:#fff;font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.015em;font-family:var(--body)}
.pg-finish-label span{display:block;margin-top:7px;color:#e1e6ea;font:400 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:none}
.pg-finish-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media (min-width:901px) and (max-width:1150px){
  .pg-finish-option{grid-template-columns:20px minmax(0,1fr);gap:3px 8px;padding:9px 12px}
  .pg-finish-number{grid-row:1/3}.pg-finish-dimension{grid-column:2;max-width:none;text-align:left}
  .pg-finish-list-heading{padding-left:40px}
  .pg-finish-name{font-size:16px}
  .pg-finish-stage{align-self:start;margin-top:24px;position:sticky;top:calc(var(--nav) + 16px)}
}
@media (max-width:900px){
  .pg-finishes-module{grid-template-columns:minmax(0,1fr);gap:28px}
  .pg-finish-stage{grid-row:1}
  .pg-finish-controls{grid-row:2}
  .pg-finish-option{min-height:60px}
  .pg-finish-name{font-size:18px}.pg-finish-materials{font-size:11px}.pg-finish-dimension{font-size:12px;max-width:none}
}
@media (max-width:600px){
  .pg-finishes-module{gap:16px}
  .pg-finish-label{top:12px;right:12px;max-width:calc(100% - 24px);padding:10px 12px}
  .pg-finish-label strong{font-size:17px}.pg-finish-label span{font-size:9px;letter-spacing:.06em;margin-top:5px}
  .pg-finish-list-heading{display:none}
  .pg-finish-list{flex-direction:row;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#bcbeb9 transparent;border-top:0;padding:2px 2px 12px}
  .pg-finish-option{flex:0 0 auto;width:252px;min-height:100px;align-content:center;grid-template-columns:19px minmax(0,1fr);gap:5px 7px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:transparent;scroll-snap-align:start}
  .pg-finish-option::before{top:13px;bottom:13px;left:-1px}
  .pg-finish-option[aria-selected="true"]{background:#fff}
  .pg-finish-number{grid-row:1/3}
  .pg-finish-name{font-size:17px}
  .pg-finish-materials{font-size:10px;gap:3px 6px}
  .pg-finish-dimension{grid-column:2;text-align:left;font-size:10px;line-height:1.5}
  .pg-finish-mobile-caption{display:inline}
}
@media (prefers-reduced-motion:reduce){.pg-finish-image{transition:none}}