:root{
  --hueso:#F5F1EA; --tinta:#171310; --fuego:#E8531C;
  --sierra:#8A8175; --tablero:#E3D9C6; --merma:#EAE3D6;
  --linea:#DCD4C6;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--hueso); color:var(--tinta);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-size:19px; line-height:1.5;
  -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:Fraunces,Georgia,serif; font-weight:600; margin:0; line-height:1.12}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.rotulo{font-size:15px; text-transform:uppercase; letter-spacing:.14em; color:var(--sierra);
  font-weight:600; margin-bottom:10px; display:flex; justify-content:space-between;
  align-items:baseline; gap:10px; flex-wrap:wrap;}
.rotulo em{font-style:normal; color:var(--tinta); text-transform:none; letter-spacing:0; font-size:17px}

/* ============================================ pantalla de entrada */
.intro{max-width:1000px; margin:0 auto; padding:44px 22px 60px}
.intro h1{font-size:clamp(32px,6vw,48px); letter-spacing:-.02em; margin-bottom:10px}
.intro .bajada{font-size:21px; color:var(--sierra); max-width:52ch; margin-bottom:36px}
.pasos{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:40px;
  border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); padding:16px 0}
.paso{flex:1 1 180px; display:flex; gap:10px; align-items:flex-start}
.paso b{font-family:var(--mono); color:var(--fuego); font-size:17px; padding-top:1px}
.paso span{font-size:18px; color:var(--sierra)}
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.tarjeta{border:1px solid var(--linea); background:#fff; border-radius:4px; cursor:pointer;
  padding:0; text-align:left; font-family:inherit; overflow:hidden; transition:border-color .12s;
  display:flex; flex-direction:column;}
.tarjeta:hover{border-color:var(--tinta)}
.tarjeta:focus-visible{outline:2px solid var(--fuego); outline-offset:2px}
.tarjeta svg,.tarjeta img{display:block; width:100%; height:auto; background:var(--merma)}
.visor{border:1px solid var(--linea); border-radius:4px; overflow:hidden; background:var(--merma)}
.visor img{display:block; width:100%; height:auto; transition:opacity .18s}
.visor img.cargando{opacity:.35}
.tarjeta .txt{padding:14px 16px 16px}
.tarjeta h3{font-size:23px; margin-bottom:3px}
.tarjeta p{margin:0; font-size:17px; color:var(--sierra)}
.dim{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:0}
.dim .eje{display:inline-flex; flex-direction:column; line-height:1.15}
.dim .eje i{font-style:normal; font-size:13px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--sierra)}
.dim .eje b{font-weight:600; font-size:18px; color:var(--tinta)}
.dim .uni{font-size:15px; color:var(--sierra); align-self:flex-end; padding-bottom:1px}
.dim .soloNota{font-size:17px; color:var(--sierra)}
.tarjeta.libre .dim .eje b{color:#fff}
.nota-mm{font-size:17px; color:var(--sierra); margin:0 0 14px}
.nota-mm b{color:var(--tinta)}
.barra .dim .eje b{font-size:17px}
.tarjeta.libre{background:var(--tinta); border-color:var(--tinta)}
.tarjeta.libre h3{color:#fff} .tarjeta.libre p,.tarjeta.libre .soloNota{color:#B9AFA2}
.tarjeta.libre svg{background:#241d18}

/* ============================================ configurador */
.wrap{display:grid; grid-template-columns:1fr 470px}
@media(max-width:980px){ .wrap{grid-template-columns:1fr} }
.izq{padding:22px; min-width:0}
.der{position:sticky; top:0; align-self:start; border-left:1px solid var(--linea);
  padding:22px; max-height:100vh; overflow-y:auto;}
@media(max-width:980px){ .der{position:static; border-left:0; border-top:1px solid var(--linea); max-height:none} }
.barra{border-bottom:1px solid var(--linea); padding:14px 22px; display:flex;
  align-items:center; gap:14px; flex-wrap:wrap;}
.barra h1{font-size:24px; letter-spacing:-.02em}
.volver{border:0; background:none; font-family:inherit; font-size:18px; color:var(--sierra);
  cursor:pointer; padding:6px 0;}
.volver:hover{color:var(--fuego)}
section{margin-bottom:30px}

/* ---- selectores ---- */
.colores{display:flex; flex-wrap:wrap; gap:6px}
.swatch{border:1px solid var(--linea); background:#fff; cursor:pointer; padding:7px 11px;
  border-radius:2px; font-size:17px; font-family:inherit; color:var(--tinta);}
.swatch:hover{border-color:var(--sierra)}
.swatch[aria-pressed=true]{background:var(--tinta); color:var(--hueso); border-color:var(--tinta)}
.swatch:focus-visible{outline:2px solid var(--fuego); outline-offset:2px}
.fila-op{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:12px}
.aviso{font-size:17px; color:var(--sierra); border-left:2px solid var(--fuego);
  padding:6px 0 6px 10px; margin-top:10px;}

/* ---- despiece: tabla en escritorio, tarjetas en movil ---- */
table{width:100%; border-collapse:collapse}
thead th{font-size:14px; text-transform:uppercase; letter-spacing:.1em; color:var(--sierra);
  font-weight:600; text-align:left; padding:0 6px 7px; white-space:nowrap;}
tbody td{border-top:1px solid var(--linea); padding:5px 6px; vertical-align:middle}
input[type=text],input[type=number]{width:100%; border:1px solid transparent; background:transparent;
  padding:6px; font-family:inherit; font-size:18px; color:var(--tinta); border-radius:2px;}
input[type=number]{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right}
input:hover{border-color:var(--linea)}
input:focus{outline:none; border-color:var(--fuego); background:#fff}
.borrar{border:0; background:none; color:var(--sierra); cursor:pointer; font-size:22px;
  line-height:1; padding:4px 8px;}
.borrar:hover{color:var(--fuego)}
.agregar{margin-top:12px; border:1px dashed var(--linea); background:none; cursor:pointer;
  padding:10px 16px; font-family:inherit; font-size:18px; color:var(--sierra); border-radius:2px;}
.agregar:hover{border-color:var(--fuego); color:var(--fuego)}

@media(max-width:700px){
  table,thead,tbody,tr,td{display:block; width:100%}
  thead{display:none}
  tbody tr{border:1px solid var(--linea); border-radius:4px; background:#fff;
    padding:10px 12px; margin-bottom:10px; position:relative;}
  tbody td{border:0; padding:4px 0; display:flex; align-items:center; gap:12px}
  tbody td::before{content:attr(data-lbl); flex:0 0 92px; font-size:14px;
    text-transform:uppercase; letter-spacing:.1em; color:var(--sierra); font-weight:600;}
  tbody td.acc{position:absolute; top:6px; right:6px; padding:0; width:auto}
  tbody td.acc::before{content:none}
  input[type=text],input[type=number]{border-color:var(--linea); background:#fff; text-align:left}
  input[type=number]{text-align:right}
}

/* ---- control de cantos ---- */
.cantos-wrap{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cantos rect.cuerpo{fill:var(--tablero); stroke:var(--linea)}
.cantos line.hit{stroke:transparent; stroke-width:11; cursor:pointer}
.cantos line.hit:hover + *, .cantos line.hit:focus{outline:none}
.casillas{display:flex; gap:5px}
.casilla{width:38px; height:40px; border:1px solid var(--linea); background:#fff;
  border-radius:3px; cursor:pointer; font-family:inherit; color:var(--sierra);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1; padding:0; gap:2px;}
.casilla b{font-size:15px; font-weight:700}
.casilla i{font-style:normal; font-size:10px; letter-spacing:.06em}
.casilla:hover{border-color:var(--sierra)}
.casilla[aria-pressed=true]{background:var(--fuego); border-color:var(--fuego); color:#fff}
.casilla:focus-visible{outline:2px solid var(--tinta); outline-offset:2px}
.cantos line{stroke:var(--linea); stroke-width:5; stroke-linecap:round}
.cantos-wrap:hover .cantos line:not(.on):not(.veta):not(.hit){stroke:var(--sierra)}
.cantos line.on{stroke:var(--fuego)}

/* ---- plano ---- */
.plano{border:1px solid var(--linea); background:#fff; border-radius:2px; padding:9px; margin-bottom:8px}
.plano svg{display:block; width:100%; height:auto}
.pieza{fill:var(--tablero); stroke:var(--tinta); stroke-width:2}
.pieza-txt{font-family:var(--mono); font-size:26px; fill:var(--tinta)}
.hoja-bg{fill:var(--merma)}
.hoja-lbl{font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--sierra);
  font-weight:600; margin:2px 0 6px;}

/* ---- cotizacion ---- */
.linea{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:18px}
.linea + .linea{border-top:1px solid var(--linea)}
.linea .det{color:var(--sierra); font-size:16px}
.total{border-top:2px solid var(--tinta); margin-top:10px; padding-top:12px;
  display:flex; justify-content:space-between; align-items:baseline;}
.total .cifra{font-family:Fraunces,serif; font-size:34px; font-weight:600; letter-spacing:-.02em}
.total .cifra sup{font-size:18px; font-weight:400; top:-1em}
button.accion{width:100%; margin-top:12px; border:0; border-radius:2px; cursor:pointer;
  padding:14px; font-family:inherit; font-size:19px; font-weight:600;
  background:var(--fuego); color:#fff;}
button.accion:hover{background:#cf4514}
button.accion:disabled{background:var(--linea); color:var(--sierra); cursor:not-allowed}
button.accion.sec{background:none; color:var(--tinta); border:1px solid var(--linea); font-weight:500}
button.accion.sec:hover{border-color:var(--tinta)}
button:focus-visible{outline:2px solid var(--tinta); outline-offset:2px}
.pie{font-size:16px; color:var(--sierra); margin-top:12px; line-height:1.45}
.vacio{color:var(--sierra); font-size:18px; padding:16px 0}
.error{color:#A33; font-size:17px; margin-top:8px}
.oculto{display:none}
button.accion.calc{margin-top:14px; width:auto; min-width:260px; padding:15px 28px; border-radius:3px}
@media(max-width:700px){ button.accion.calc{width:100%} }
.pendiente{border:1px dashed var(--linea); border-radius:4px; padding:22px 18px;
  text-align:center; color:var(--sierra); font-size:18px; background:#fff6;}
.pendiente b{display:block; color:var(--tinta); font-family:Fraunces,serif; font-size:21px;
  font-weight:600; margin-bottom:5px;}
.leyenda{display:flex; gap:11px; align-items:flex-start; background:#fff;
  border:1px solid var(--linea); border-left:3px solid var(--fuego); border-radius:3px;
  padding:12px 14px; margin-top:14px; font-size:17px; color:var(--tinta);}
.leyenda svg{flex:0 0 auto; margin-top:2px}
.leyenda b{display:block; margin-bottom:2px}
.leyenda span{color:var(--sierra); font-size:15px}
.cantos line.veta{stroke:var(--sierra); stroke-width:1.2; opacity:.75; pointer-events:none}
.sucio{background:#FFF4E8; border:1px solid var(--fuego); border-radius:3px;
  padding:9px 12px; font-size:17px; color:var(--tinta); margin-bottom:10px;}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}