/* ORTHIC · páginas de línea (trauma y otros sistemas de columna)
 * Hereda tokens de style.css y componentes de producto.css (chero, tbl, nota…).
 * Solo lo que estas páginas agregan: la fila de producto con su tabla de
 * referencias, el índice de la línea y los enlaces cruzados.
 * Sin dorado nuevo, sin sombras: bordes de 1px a ~7 % y radios de 2px.
 */

/* ── portada: rótulo de línea ─────────────────────────────── */
.lin-eb{
  margin:0 0 var(--s2);
  display:flex; align-items:center; gap:0.9rem;
  font-size:var(--t-xs); letter-spacing:0.22em; text-transform:uppercase;
  color:var(--grey-1);
}
.lin-eb::before{
  content:""; width:2.5rem; height:1px;
  background:linear-gradient(to right, var(--grey-1), transparent);
}
.chero .chero__t{ max-width:20ch; }

/* ── fila de producto ─────────────────────────────────────── */
.lps{ margin-top:var(--s5); border-top:1px solid var(--line-2); }

.lp{
  display:grid;
  grid-template-columns:minmax(0, 15rem) minmax(0, 1fr);
  gap:var(--s2) var(--s4);
  padding-block:var(--s4);
  border-bottom:1px solid var(--line);
  scroll-margin-top:5rem;
}
.lp__im{
  margin:0; align-self:start;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:#FFFFFF;
}
.lp__im img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:contain;
  background:#FFFFFF;               /* el blanco del render: sin franjas al encajar */
  filter:grayscale(0.18) brightness(0.86) contrast(1.04);
  transition:filter 0.5s var(--ease);
}
.lp:hover .lp__im img{ filter:none; }
/* sin imagen publicada: el marco no finge una foto */
.lp__im--vacio{
  display:grid; place-items:center; aspect-ratio:4/3;
  background:var(--bg-2);
}
.lp__im--vacio span{
  font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--grey-2); text-align:center; padding:var(--s2);
}

.lp__b{ display:grid; gap:0.45rem; align-content:start; min-width:0; }
.lp__k{
  margin:0;
  font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--grey-2);
}
.lp__t{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.1rem, 0.9vw + 0.75rem, 1.45rem);
  line-height:1.2; letter-spacing:-0.01em;
  color:var(--text);
  max-width:40ch;
}
.lp__d{
  margin:0.2rem 0 0;
  font-size:var(--t-sm); color:var(--grey-1); line-height:1.7;
  max-width:64ch;
}
.lp__l{
  margin:0.4rem 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line);
  max-width:64ch;
}
.lp__l li{
  position:relative;
  padding:0.5rem 0 0.5rem 1.1rem;
  font-size:var(--t-sm); color:var(--grey-1); line-height:1.55;
  border-bottom:1px solid var(--line);
}
.lp__l li::before{
  content:""; position:absolute; left:0; top:1.1rem;
  width:5px; height:1px; background:var(--grey-1);
}

/* datos de la pieza: lo que sale de su tabla */
.lp__m{
  margin:var(--s1) 0 0;
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line);
}
.lp__m div{
  padding:0.55rem var(--s3) 0 0; margin-right:var(--s3);
  border-right:1px solid var(--line);
}
.lp__m div:last-child{ border-right:0; margin-right:0; }
.lp__m dt{
  font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grey-2);
}
.lp__m dd{
  margin:0.15rem 0 0;
  font-size:var(--t-sm); color:var(--text);
  font-variant-numeric:tabular-nums;
}

.lp__acc{ margin-top:var(--s2); display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem; align-items:center; }
.lin-btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  border:1px solid var(--line-2); border-radius:999px;
  padding:0.5rem 1.05rem;
  font-size:var(--t-xs); letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text);
  transition:border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.lin-btn:hover{ border-color:var(--grey-1); background:rgba(232,232,230,0.05); }
.lin-btn svg{ width:14px; height:14px; fill:currentColor; flex:none; }

/* tabla de referencias: plegada salvo en la pieza principal */
.lp__refs{ grid-column:1 / -1; }
.lp__refs > summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:0.7rem;
  font-size:var(--t-xs); letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey-1);
  padding:0.35rem 0;
  transition:color 0.3s var(--ease);
}
.lp__refs > summary::-webkit-details-marker{ display:none; }
.lp__refs > summary::before{
  content:"+"; display:inline-grid; place-items:center;
  width:1.25rem; height:1.25rem;
  border:1px solid var(--line-2); border-radius:var(--r);
  font-size:0.8rem; letter-spacing:0; line-height:1;
}
.lp__refs[open] > summary::before{ content:"\2212"; }
.lp__refs > summary:hover{ color:var(--text); }
.lp__refs > summary:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

/* las tablas largas se desplazan dentro de su caja, nunca la página */
.tblx{
  margin-top:var(--s2);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  max-width:100%;
}
.tblx .tbl{ margin-top:0; min-width:30rem; }
.tblx .tbl th, .tblx .tbl td{ white-space:nowrap; padding-right:var(--s3); }
.tblx .tbl td:last-child{ text-align:left; }
/* el título de la pieza ya está arriba: el caption queda para lectores de pantalla */
.tblx .tbl caption{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.tblx .tbl th{ padding-top:0; }
.lp__pie{
  margin:var(--s2) 0 0;
  font-size:var(--t-xs); color:var(--grey-2); line-height:1.6;
}
.lp__pie a{ color:var(--grey-1); border-bottom:1px solid var(--line-2); }
.lp__pie a:hover{ color:var(--text); }

/* la pieza principal: más grande, tabla abierta */
.lp--key{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  gap:var(--s3) var(--s5);
  padding-block:var(--s5);
}
.lp--key .lp__t{ font-size:clamp(1.5rem, 1.6vw + 0.8rem, 2.3rem); line-height:1.12; }
.lp--key .lp__d{ font-size:var(--t-base); }
/* la tabla se alinea con el texto, no con la foto */
.lp__refs{ grid-column:2; }
.lp--key .lp__im{ grid-row:span 2; }

/* ── índice de la línea ───────────────────────────────────── */
.lin-idx{
  margin-top:var(--s5);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.lin-c{
  background:var(--bg);
  display:grid; grid-template-rows:auto 1fr;
  transition:background-color 0.4s var(--ease);
}
a.lin-c:hover{ background:var(--bg-2); }
.lin-c__im{ display:block; overflow:hidden; background:#FFFFFF; border-bottom:1px solid var(--line); }
.lin-c__im img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:contain;
  background:#FFFFFF;               /* el filtro alcanza también las franjas laterales */
  filter:grayscale(0.18) brightness(0.86) contrast(1.04);
  transition:filter 0.5s var(--ease);
}
a.lin-c:hover .lin-c__im img{ filter:none; }
.lin-c__b{ display:grid; gap:0.35rem; align-content:start; padding:var(--s3); }
.lin-c__b b{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--t-med); letter-spacing:-0.01em; color:var(--text);
}
.lin-c__b em{
  font-style:normal;
  font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--grey-2);
}
.lin-c__d{ margin-top:0.35rem; font-size:var(--t-sm); color:var(--grey-1); line-height:1.65; }
.lin-c__go{
  margin-top:var(--s2);
  display:inline-flex; align-items:center; gap:0.8rem;
  font-size:var(--t-xs); letter-spacing:0.12em; text-transform:uppercase; color:var(--grey-1);
  transition:gap 0.35s var(--ease), color 0.3s var(--ease);
}
.lin-c__go svg{ width:24px; height:10px; fill:none; stroke:currentColor; stroke-width:1.4; }
a.lin-c:hover .lin-c__go{ gap:1.2rem; color:var(--text); }
/* la primera tarjeta manda: ocupa dos columnas y dos filas */
.lin-c--key{ grid-column:span 2; grid-row:span 2; }
.lin-c--key{ grid-template-rows:1fr auto; }
.lin-c--key .lin-c__im{ height:100%; }
.lin-c--key .lin-c__im img{ height:100%; min-height:20rem; aspect-ratio:auto; }
.lin-c--key .lin-c__b{ padding:var(--s4); }
.lin-c--key .lin-c__b b{ font-size:clamp(1.5rem, 1.6vw + 0.8rem, 2.3rem); line-height:1.12; }
.lin-c--key .lin-c__d{ font-size:var(--t-base); max-width:52ch; }

.lin-idx--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* ── enlaces cruzados a las demás regiones ────────────────── */
.lin-nav{
  margin:var(--s4) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.lin-nav a{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2);
  background:var(--bg); padding:var(--s2) var(--s3);
  font-size:var(--t-sm); color:var(--grey-1);
  transition:background-color 0.3s var(--ease), color 0.3s var(--ease);
  height:100%;
}
.lin-nav a span{ font-size:var(--t-xs); color:var(--grey-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lin-nav a:hover{ background:var(--bg-2); color:var(--text); }
.lin-nav a[aria-current="page"]{ color:var(--text); background:var(--bg-2); }

/* bloque de datos de pedido */
.lin-ped{
  margin-top:var(--s4);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.lin-ped div{ background:var(--bg); padding:var(--s3); }
.lin-ped > div > b{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:var(--t-med); letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.lin-ped span{ display:block; margin-top:0.4rem; font-size:var(--t-sm); color:var(--grey-1); line-height:1.6; }
.lin-ped span b{ font-weight:600; color:var(--text); }
.lin-ped span a, .nota a{ color:var(--text); border-bottom:1px solid var(--line-2); }

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:60rem){
  .lp--key{ grid-template-columns:minmax(0, 1fr); }
  .lp--key .lp__im{ grid-row:auto; max-width:34rem; }
  .lp--key .lp__refs{ grid-column:1; }
  .lin-idx{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .lin-c--key{ grid-column:1 / -1; grid-row:auto; }
  .lin-nav, .lin-ped{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:40rem){
  .lp{ grid-template-columns:minmax(0, 1fr); }
  .lp__refs{ grid-column:1; }
  .lp__im{ max-width:22rem; }
  .lin-idx, .lin-idx--3{ grid-template-columns:1fr; }
  .lin-c--key .lin-c__im img{ min-height:13rem; }
  .lin-nav, .lin-ped{ grid-template-columns:1fr; }
  .lp__m div{ padding-right:var(--s2); margin-right:var(--s2); }
}

@media (prefers-reduced-motion:reduce){
  .lp__im img, .lin-c__im img, .lin-c__go, .lin-btn{ transition:none; }
}

/* rótulo de grupo dentro de la lista de productos */
.lps__g{
  margin:0; padding:var(--s4) 0 var(--s1);
  display:flex; align-items:baseline; gap:0.8rem;
  font-size:var(--t-xs); letter-spacing:0.2em; text-transform:uppercase;
  color:var(--grey-1);
  border-bottom:1px solid var(--line-2);
}
.lps__g span{ color:var(--grey-2); font-variant-numeric:tabular-nums; letter-spacing:0.1em; }

/* celda agrupada: el producto o el blíster se lee una vez */
.tblx .tbl td[rowspan]{ vertical-align:top; color:var(--grey-1); white-space:normal; min-width:11rem; }