:root {
  --tinta: #2b1d30;
  --tinta-2: #57485b;
  --gris: #766c7a;
  --linea: #e4dce5;
  --banda: #f7f3f7;
  --blanco: #ffffff;
  --marca: #d4006f;
  --marca-profunda: #9c0051;
  --acento: #6c2a7c;
  --seleccion: #fbe4f0;
  --cian: #0098d4;
  --amarillo: #f1b400;
  --naranja: #ef8a00;
  --verde: #2e8b45;
  --aviso: #c26a00;

  --c-aceptable: #2e8b45;
  --c-insuficiente: #c26a00;
  --c-puente: #d4006f;
  --c-sin_soldar: #0076a8;
  --c-exceso: #9a7200;
  --c-fria: #6c2a7c;

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;
  --ancho: 1240px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fuente); color: var(--tinta); background: var(--blanco);
  font-size: 17px; line-height: 1.6;
}
h1, h2, h3 { margin: 0 0 var(--e3); line-height: 1.12; letter-spacing: -0.02em; }
h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; }
h2 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; color: var(--acento); }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 var(--e4); max-width: 65ch; }
a { color: var(--marca-profunda); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
code, .mono { font-family: var(--mono); font-size: 0.9em; }
.num { font-variant-numeric: tabular-nums; }

/* Encabezado con el motivo del cartel */
.encabezado { position: sticky; top: 0; z-index: 10; background: var(--blanco); border-bottom: 1px solid var(--linea); }
.encabezado .fila { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e5); height: 64px; display: flex; align-items: center; gap: var(--e5); }
.logotipo { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; color: var(--tinta); }
.logotipo b { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.logotipo b span { color: var(--marca); }
.logotipo small { font-size: 12.5px; color: var(--acento); font-weight: 600; }
.motivo { display: flex; height: 4px; width: 72px; }
.motivo i { flex: 1; }
.motivo i:nth-child(1) { background: var(--marca); }
.motivo i:nth-child(2) { background: var(--cian); }
.motivo i:nth-child(3) { background: var(--amarillo); }
.motivo i:nth-child(4) { background: var(--acento); }
.encabezado nav { margin-left: auto; display: flex; gap: var(--e5); font-size: 15px; }
.encabezado nav a { color: var(--tinta-2); text-decoration: none; font-weight: 600; }
.encabezado nav a:hover { color: var(--marca-profunda); }
.encabezado nav a[aria-current="page"] { color: var(--marca); }

.aviso-sintetico { background: var(--blanco); border-left: 4px solid var(--aviso); border-bottom: 1px solid var(--linea); }
.aviso-sintetico p { max-width: var(--ancho); margin: 0 auto; padding: var(--e3) var(--e5); font-size: 15px; }

main { max-width: var(--ancho); margin: 0 auto; padding: var(--e6) var(--e5) var(--e8); }
.seccion { padding: var(--e6) 0; border-top: 1px solid var(--linea); }
.seccion:first-child { border-top: 0; padding-top: 0; }
.entrada { color: var(--tinta-2); font-size: 18px; }
.nota { color: var(--gris); font-size: 14.5px; }

/* Cifras de estado */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin: var(--e5) 0; }
.cifras div { padding: var(--e4) var(--e4) var(--e4) 0; }
.cifras div + div { border-left: 1px solid var(--linea); padding-left: var(--e4); }
.cifras b { display: block; font-size: 38px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifras span { color: var(--gris); font-size: 14.5px; }

/* Tablas */
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th { text-align: left; font-weight: 700; border-bottom: 1.5px solid var(--tinta); padding: var(--e2); }
td { border-bottom: 1px solid var(--linea); padding: var(--e2); vertical-align: middle; }
tr.elegida td { background: var(--seleccion); box-shadow: inset 3px 0 0 var(--marca); }

/* Botones y formularios */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--e4);
  border: 1.5px solid var(--marca); background: var(--marca); color: var(--blanco); font: inherit; font-weight: 700;
  font-size: 15.5px; border-radius: 2px; cursor: pointer; text-decoration: none; }
.boton:hover { background: var(--marca-profunda); border-color: var(--marca-profunda); }
.boton.secundario { background: transparent; color: var(--marca-profunda); }
.boton.secundario:hover { background: var(--seleccion); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }
.boton[hidden] { display: none; } /* el display de .boton anulaba el atributo hidden (Reto, inspección) */
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }
input[type=text], select { font: inherit; font-size: 16px; min-height: 44px; padding: 0 var(--e3); border: 1px solid var(--linea); border-radius: 2px; background: var(--blanco); color: var(--tinta); }
label { font-weight: 600; font-size: 15px; display: block; margin-bottom: var(--e1); }
.campo { margin-bottom: var(--e4); }

/* Área de trabajo: imagen y panel */
.trabajo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e5); align-items: start; }
.lienzo { border: 1px solid var(--linea); background: var(--banda); position: relative; }
.lienzo canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.panel { border-left: 1px solid var(--linea); padding-left: var(--e5); position: sticky; top: 88px; }
.panel h3 { margin-top: var(--e2); }
.estado { font-size: 14.5px; color: var(--tinta-2); min-height: 1.6em; }
.estado.error { color: var(--marca-profunda); font-weight: 600; }

/* Selector de clases */
.clases { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--linea); margin-bottom: var(--e4); }
.clases button { display: flex; align-items: center; gap: var(--e3); min-height: 44px; padding: 0 var(--e3); border: 0;
  border-bottom: 1px solid var(--linea); background: var(--blanco); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; color: var(--tinta); }
.clases button:last-child { border-bottom: 0; }
.clases button:hover { background: var(--banda); }
.clases button.activa { background: var(--seleccion); font-weight: 700; }
.clases kbd { font-family: var(--mono); font-size: 13px; border: 1px solid var(--linea); padding: 0 6px; color: var(--gris); }
.muestra { width: 18px; height: 18px; flex: none; border: 3px solid currentColor; }
.muestra.aceptable { color: var(--c-aceptable); border-width: 2px; border-style: dotted; }
.muestra.insuficiente { color: var(--c-insuficiente); }
.muestra.puente { color: var(--c-puente); }
.muestra.sin_soldar { color: var(--c-sin_soldar); border-style: dashed; }
.muestra.exceso { color: var(--c-exceso); border-style: double; border-width: 4px; }
.muestra.fria { color: var(--c-fria); border-style: dotted; }

.progreso { display: flex; gap: 2px; margin: var(--e2) 0 var(--e4); }
.progreso i { height: 6px; flex: 1; background: var(--linea); }
.progreso i.hecho { background: var(--acento); }

.lista-sospechas { border-top: 1px solid var(--linea); margin-bottom: var(--e4); max-height: 46vh; overflow: auto; }
.lista-sospechas button { width: 100%; display: flex; justify-content: space-between; gap: var(--e2); padding: var(--e2) 0; border: 0;
  border-bottom: 1px solid var(--linea); background: none; font: inherit; font-size: 15px; cursor: pointer; text-align: left; color: var(--tinta); }
.lista-sospechas button.elegida { background: var(--seleccion); box-shadow: inset 3px 0 0 var(--marca); padding-left: var(--e2); }
.lista-sospechas button.resuelta { color: var(--gris); text-decoration: line-through; }

@media (max-width: 860px) {
  body { font-size: 16px; }
  .encabezado .fila { height: 56px; padding: 0 var(--e4); gap: var(--e3); }
  .motivo { width: 40px; }
  main { padding: var(--e5) var(--e4) var(--e7); }
  .trabajo { grid-template-columns: 1fr; }
  .panel { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: var(--e4); position: static; }
  .acciones .boton { width: 100%; }
  .tabla-movil-oculta { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.campo-corto { max-width: 360px; }
.acciones.al-pie { align-items: end; }

/* Página del proyecto */
:root { --c-base: #0086c0; --c-red: #d4006f; }
.portada { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: var(--e7); align-items: center; padding: var(--e6) 0 var(--e7); }
.portada h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.03em; }
.sobretitulo { color: var(--acento); font-weight: 700; font-size: 15px; margin-bottom: var(--e3); }
.portada-figura svg { width: 100%; height: auto; display: block; border: 1px solid var(--linea); }
.tarjeta-svg { fill: #96643c; }
.pad-svg { fill: #c88c46; }
.metal-svg { fill: #d9d6d2; }
.hueco-svg { fill: #2b1d30; }
.marca-svg { fill: none; stroke-width: 3.5; }
.marca-svg.c-insuficiente { stroke: var(--c-insuficiente); }
.marca-svg.c-puente { stroke: var(--c-puente); }
.marca-svg.c-exceso { stroke: var(--c-exceso); stroke-dasharray: 2 0; }
.bloque { padding: var(--e8) 0; border-top: 1px solid var(--linea); }
.bloque.banda { background: var(--banda); box-shadow: 0 0 0 100vmax var(--banda); clip-path: inset(0 -100vmax); }
.bloque h2 { font-size: clamp(28px, 3.2vw, 42px); }
.bloque .entrada { max-width: 62ch; }
.pasos { list-style: none; counter-reset: paso; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; margin: var(--e5) 0 0; border-top: 1px solid var(--linea); }
.pasos li { counter-increment: paso; padding: var(--e4) var(--e4) var(--e4) 0; }
.pasos li + li { border-left: 1px solid var(--linea); padding-left: var(--e4); }
.pasos li::before { content: counter(paso); display: block; font-weight: 800; font-size: 34px; color: var(--marca); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pasos b { display: block; margin-bottom: var(--e1); }
.pasos span, .cifras span { font-size: 15.5px; color: var(--tinta-2); line-height: 1.5; }
.tabla-metas { max-width: 820px; margin-top: var(--e4); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); margin-bottom: var(--e4); }
.linea-tiempo { list-style: none; padding: 0; margin: var(--e4) 0 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--linea); }
.linea-tiempo li { padding: var(--e4) var(--e3) 0 0; position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--blanco); border: 2px solid var(--acento); }
.linea-tiempo li.hecho::before { background: var(--acento); }
.linea-tiempo b { display: block; font-variant-numeric: tabular-nums; }
.linea-tiempo span { font-size: 15px; color: var(--tinta-2); }
.fuentes li { font-size: 14.5px; color: var(--tinta-2); margin-bottom: var(--e2); overflow-wrap: anywhere; }

/* Gráficas de puntos con intervalo */
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e5); font-size: 14.5px; color: var(--tinta-2); margin: var(--e4) 0; }
.leyenda span { display: inline-flex; align-items: center; gap: var(--e2); }
.punto-muestra { width: 12px; height: 12px; display: inline-block; }
.punto-muestra.linea_base, .punto.linea_base { background: var(--c-base); }
.punto-muestra.red, .punto.red { background: var(--c-red); border-radius: 50%; }
.ic-muestra { width: 26px; height: 2px; background: var(--tinta-2); display: inline-block; }
.dos-graficas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6); }
.puntos { margin: 0 0 var(--e4); }
.puntos figcaption { margin-bottom: var(--e3); }
.fila-punto { display: grid; grid-template-columns: 128px minmax(0, 1fr) 44px; align-items: center; gap: var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linea); outline-offset: 2px; }
.fila-punto:hover, .fila-punto:focus { background: var(--blanco); }
.etiqueta-fila { font-size: 14px; line-height: 1.25; }
.etiqueta-fila small { color: var(--gris); font-size: 12.5px; }
.pista { position: relative; height: 22px; }
.pista i { position: absolute; top: 50%; }
.pista .ic { height: 2px; margin-top: -1px; background: var(--tinta-2); opacity: 0.55; }
.pista .punto { width: 12px; height: 12px; margin: -6px 0 0 -6px; box-shadow: 0 0 0 2px var(--banda); }
.pista .meta { top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--gris); }
.valor { font-size: 14.5px; text-align: right; color: var(--tinta); }
.eje { display: grid; grid-template-columns: 128px minmax(0, 1fr) 44px; gap: var(--e3); height: 22px; font-size: 12.5px; color: var(--gris); }
.eje .marcas { position: relative; }
.eje .marcas b { position: absolute; font-weight: 400; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.leyenda-meta { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.meta-muestra { width: 0; height: 14px; border-left: 1.5px dashed var(--gris); display: inline-block; }
.tabla-datos { margin-top: var(--e4); }
.tabla-datos summary { cursor: pointer; font-weight: 700; color: var(--marca-profunda); min-height: 44px; display: flex; align-items: center; }
.hash { overflow-wrap: anywhere; }
.tooltip { position: absolute; z-index: 20; max-width: 300px; background: var(--tinta); color: var(--blanco); font-size: 13.5px; padding: var(--e2) var(--e3); pointer-events: none; }

@media (max-width: 860px) {
  .portada { grid-template-columns: 1fr; gap: var(--e5); padding-top: var(--e4); }
  .bloque { padding: var(--e7) 0; }
  .pasos, .linea-tiempo { grid-template-columns: 1fr; border-top: 0; }
  .pasos li, .pasos li + li { border-left: 0; border-top: 1px solid var(--linea); padding: var(--e3) 0; }
  .linea-tiempo { border-left: 2px solid var(--linea); padding-left: var(--e4); }
  .linea-tiempo li { padding: 0 0 var(--e4); }
  .linea-tiempo li::before { top: 4px; left: calc(-1 * var(--e4) - 7px); }
  .dos-graficas, .dos-columnas { grid-template-columns: 1fr; gap: var(--e4); }
  .fila-punto, .eje { grid-template-columns: 104px minmax(0, 1fr) 40px; }
}
.cifras b { white-space: nowrap; }
@media (max-width: 860px) {
  .logotipo b { font-size: 17px; white-space: nowrap; }
  .logotipo small { display: none; }
  .encabezado nav { gap: var(--e3); font-size: 14.5px; }
  .cifras { grid-template-columns: 1fr; }
  .cifras div + div { border-left: 0; border-top: 1px solid var(--linea); padding-left: 0; }
}
@media (max-width: 420px) { .motivo { display: none; } }

/* Fotos reales, reto y experimentos */
.alterna { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--e4); }
.alterna button { min-height: 40px; padding: 0 var(--e3); border: 1px solid var(--linea); margin: 0 -1px -1px 0; background: var(--blanco); font: inherit; font-size: 14.5px; cursor: pointer; color: var(--tinta); }
.alterna button.activa { background: var(--marca); border-color: var(--marca); color: var(--blanco); font-weight: 700; }
.rejilla-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--e2); }
.foto { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.foto.elegida { border-color: var(--marca); }
.foto[hidden] { display: none; }
.foto-grande { width: 100%; max-width: 280px; height: auto; display: block; margin-bottom: var(--e3); border: 1px solid var(--linea); }
.veredicto { font-size: 15.5px; }
.marca-ok, .marca-error { display: inline-block; padding: 0 6px; font-size: 13px; font-weight: 700; border: 1.5px solid currentColor; margin-left: 4px; }
.marca-ok { color: var(--c-aceptable); }
.marca-error { color: var(--marca-profunda); }
.barras { margin: var(--e3) 0; }
.barra { display: grid; grid-template-columns: 1fr 90px 44px; gap: var(--e2); align-items: center; font-size: 14px; padding: 3px 0; }
.barra.predicha { font-weight: 700; }
.pista-barra { height: 10px; background: var(--linea); position: relative; }
.pista-barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--marca); }
.barra:not(.predicha) .pista-barra i { background: var(--gris); }
.atribucion { margin-top: var(--e6); border-top: 1px solid var(--linea); padding-top: var(--e3); }
.reto { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--e6); align-items: start; }
.reto-foto img { width: 100%; max-width: 320px; height: auto; display: block; border: 1px solid var(--linea); }
.reto[hidden], #final[hidden] { display: none; }
.clases button:disabled { cursor: default; color: var(--tinta); }
.matriz table { font-size: 13px; }
.matriz th { font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--tinta); padding: 6px; }
.matriz td.celda { text-align: center; padding: 8px 4px; border: 2px solid var(--blanco); }
.celda.s0 { background: #fbf2f7; color: var(--tinta-2); }
.celda.s1 { background: #f6cde2; color: var(--tinta); }
.celda.s2 { background: #ec8fbd; color: var(--tinta); }
.celda.s3 { background: #d4006f; color: var(--blanco); }
.celda.s4 { background: #8f004b; color: var(--blanco); }
.celda.diagonal { outline: 1.5px solid var(--tinta); outline-offset: -3px; }
.leyenda-rampa { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gris); margin: var(--e3) 0; }
.leyenda-rampa i { width: 28px; height: 12px; display: inline-block; }
.leyenda-rampa i.s0 { background: #fbf2f7; } .leyenda-rampa i.s1 { background: #f6cde2; } .leyenda-rampa i.s2 { background: #ec8fbd; }
.leyenda-rampa i.s3 { background: #d4006f; } .leyenda-rampa i.s4 { background: #8f004b; }
@media (max-width: 860px) {
  .reto { grid-template-columns: 1fr; }
  .matriz { overflow-x: auto; }
  .encabezado .fila { height: auto; flex-wrap: wrap; row-gap: 0; padding-top: 10px; }
  .encabezado nav { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; gap: 4px var(--e4); font-size: 14.5px; padding: 6px 0 10px; }
  .encabezado nav a[aria-current="page"] { color: var(--marca); }
}
.explorar { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linea); margin-top: var(--e4); }
.explorar a { padding: var(--e4) var(--e4) var(--e4) 0; text-decoration: none; color: var(--tinta); }
.explorar a + a { border-left: 1px solid var(--linea); padding-left: var(--e4); }
.explorar b { display: block; color: var(--marca-profunda); font-size: 18px; margin-bottom: var(--e1); }
.explorar span { font-size: 15px; color: var(--tinta-2); }
.explorar a:hover b { text-decoration: underline; }
@media (max-width: 860px) {
  .explorar { grid-template-columns: 1fr; }
  .explorar a, .explorar a + a { border-left: 0; border-top: 1px solid var(--linea); padding: var(--e3) 0; }
}
.desliza { overflow-x: auto; }
@media (max-width: 860px) { .desliza td.num, .desliza th:nth-child(3) { white-space: nowrap; } }

/* Captura desde el celular */
.captura { max-width: 560px; }
.captura input[type=text], .captura select { width: 100%; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.lados { border: 0; padding: 0; margin: 0 0 var(--e4); display: flex; flex-wrap: wrap; gap: var(--e2); }
.lados legend, .etiqueta-campo { font-weight: 600; font-size: 15px; display: block; margin-bottom: var(--e1); padding: 0; }
.lados label { flex: 1 1 0; display: flex; align-items: center; gap: var(--e2); min-height: 44px; margin: 0; padding: 0 var(--e3);
  border: 1px solid var(--linea); font-weight: 400; cursor: pointer; }
.lados label:has(input:checked) { background: var(--seleccion); border-color: var(--marca); font-weight: 700; }
.lados input { accent-color: var(--marca); width: 18px; height: 18px; margin: 0; }
.archivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.fotos-entrada .boton { flex: 1 1 180px; }
.tabla-captura { margin-bottom: var(--e5); }
.tabla-captura th { width: 34%; border-bottom: 1px solid var(--linea); font-size: 14.5px; vertical-align: top; }
.al-pie-captura { margin-top: var(--e5); }
@media (max-width: 860px) {
  .captura .acciones .boton { width: 100%; }
  .tabla-captura th { width: 40%; }
}

/* Interfaz v2 (D-015): menú lateral, etiqueta de demostración y nueva inspección */
.encabezado .fila { height: 64px; flex-wrap: nowrap; padding-top: 0; }
.encabezado-derecha { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
.etiqueta-demo { font-size: 13px; font-weight: 700; color: var(--acento); border: 1px solid var(--acento); border-radius: 2px;
  padding: 3px 10px; text-decoration: none; white-space: nowrap; }
.etiqueta-demo:hover { background: var(--seleccion); }
.menu-boton { width: 44px; height: 44px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; border: 0; background: transparent; cursor: pointer; padding: 0; }
.menu-boton span { width: 22px; height: 2px; background: var(--tinta); border-radius: 2px; }
.cajon-fondo { position: fixed; inset: 0; background: rgba(43, 29, 48, 0.35); z-index: 20; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--blanco); z-index: 21;
  display: flex; flex-direction: column; padding: var(--e4) 0; box-shadow: -8px 0 24px rgba(43, 29, 48, 0.12); }
.cajon[hidden], .cajon-fondo[hidden] { display: none; }
.cajon-cabeza { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--e5) var(--e3); }
.cajon-cerrar { font-size: 28px; line-height: 1; border: 0; background: transparent; cursor: pointer; color: var(--tinta-2); width: 44px; height: 44px; }
.cajon a { padding: 14px var(--e5); text-decoration: none; color: var(--tinta); font-weight: 600; font-size: 17px; }
.cajon a:hover { background: var(--banda); }
.cajon a[aria-current="page"] { color: var(--marca); box-shadow: inset 3px 0 0 var(--marca); }
.cajon .cajon-secundario { margin-top: auto; font-weight: 400; font-size: 15px; color: var(--tinta-2); border-top: 1px solid var(--linea); }
body.con-cajon { overflow: hidden; }

.inspeccion-nueva { max-width: 560px; }
.sesion { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0 var(--e4); border-bottom: 1px solid var(--linea); margin-bottom: var(--e5); }
.sesion[hidden] { display: none; }
.sesion div { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.sesion small, .perfil small { color: var(--gris); font-size: 14px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--seleccion); color: var(--marca-profunda); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 15px; }
.enlace { border: 0; background: transparent; color: var(--marca-profunda); font: inherit; font-weight: 600; cursor: pointer; padding: var(--e2); }
.perfiles { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; gap: var(--e2); }
.perfil { width: 100%; display: flex; align-items: center; gap: var(--e3); text-align: left; padding: var(--e3) var(--e4);
  border: 1px solid var(--linea); background: var(--blanco); font: inherit; color: var(--tinta); cursor: pointer; border-radius: 2px; }
.perfil:hover { border-color: var(--marca); background: var(--seleccion); }
.perfil span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.modelo-tarjeta { color: var(--tinta-2); margin: var(--e2) 0 var(--e5); }
.boton-foto { width: 100%; min-height: 64px; font-size: 19px; margin-top: var(--e3); }
.analizando { display: flex; flex-direction: column; align-items: center; gap: var(--e4); padding: var(--e8) 0; font-size: 18px; }
.analizando[hidden] { display: none; }
.giro { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--seleccion); border-top-color: var(--marca); animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.anexo { max-width: 760px; }
.anexo h2 { margin-top: var(--e6); }
@media (max-width: 420px) { .etiqueta-demo { font-size: 12px; padding: 2px 8px; } }
.cabeza-inspeccion { padding-bottom: var(--e4); }
.antetitulo { font-size: 15px; font-weight: 700; color: var(--acento); margin: 0 0 var(--e1); }
.cifras-inspeccion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin-top: var(--e4); max-width: 560px; }
.cifras-inspeccion div { border-top: 3px solid var(--linea); padding-top: var(--e2); display: flex; flex-direction: column; }
.cifras-inspeccion div:first-child { border-color: var(--marca); }
.cifras-inspeccion b { font-size: 28px; line-height: 1.1; }
.cifras-inspeccion span { font-size: 13.5px; color: var(--gris); }
.resumen-inspeccion { font-weight: 600; }
.pregunta-union { font-weight: 700; margin: var(--e3) 0 var(--e2); }
.terminada { border: 1px solid var(--linea); border-left: 4px solid var(--verde); padding: var(--e4); margin: var(--e3) 0; }
.terminada[hidden] { display: none; }
.terminada b { font-size: 19px; }
.terminada .boton { margin-top: var(--e2); }
.detalles-tecnicos { margin-top: var(--e3); }
.detalles-tecnicos summary { cursor: pointer; color: var(--tinta-2); font-size: 14.5px; }
.lista-sospechas button.resuelta { text-decoration: none; color: var(--gris); }
.lista-sospechas button.resuelta span:last-child { color: var(--verde); font-weight: 700; }

/* Página del proyecto v2: recorrido «Del diseño a la tarjeta revisada» (spec-landing-v2, L2) */
.proceso-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--e7); margin-top: var(--e6); }
.proceso-pasos { order: 1; }
.proceso-escenario { order: 2; position: sticky; top: 80px; height: calc(100vh - 110px); max-height: 760px; display: flex; flex-direction: column; justify-content: center; }
.paso-texto { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.35; transition: opacity 0.4s; }
.paso-texto.activo { opacity: 1; }
.paso-texto h3 { font-size: clamp(22px, 2.2vw, 30px); margin-bottom: var(--e3); }
.paso-n { font-size: 15px; font-weight: 700; color: var(--acento); margin: 0 0 var(--e2); }
.paso-nuestro .paso-n { color: var(--marca); }
.paso-nuestro h3 { color: var(--marca-profunda); }

.escena { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 0; }
.tarjeta3d { --k: 1; position: relative; width: min(400px, 30vw, 46vh); aspect-ratio: 1; transform-style: preserve-3d;
  transform: perspective(1600px) rotateX(56deg) rotateZ(-38deg); }
.capa { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s; overflow: visible; }
.sus-fondo { fill: #1f4a2a; } .sus-hueco { fill: #f3eef3; }
.pista { fill: none; stroke: #c98b3c; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.pad { fill: #ddb04a; }
.mascara { fill: rgba(56, 128, 70, 0.42); stroke: rgba(255, 255, 255, 0.25); }
.seri { fill: none; stroke: #f4f4f0; stroke-width: 2; } .seri-t { fill: #f4f4f0; font: 700 13px var(--fuente); }
.chip { fill: #24222a; } .chip-punto { fill: #6b6870; } .chip-muesca { fill: #3a3842; }
.smd-r { fill: #2b2b2b; stroke: #d9d9d9; stroke-width: 2; } .smd-c { fill: #b88a5a; }
.resistor { fill: #e9d3a0; } .banda.b1 { fill: #7a3b1d; } .banda.b2 { fill: #111; } .banda.b3 { fill: #d4006f; }
.capacitor { fill: #2d4f8f; } .capacitor-franja { fill: none; stroke: #c9d5ef; stroke-width: 6; }
.conector { fill: #2f2f33; } .conector-pin { fill: #d8b04a; }
.sol-fondo { fill: #234e2d; } .sol-union { fill: #d5d9dc; stroke: #9aa1a6; stroke-width: 1.5; } .sol-hueco { fill: #234e2d; }
.marcas .marca { fill: none; stroke-width: 7; opacity: 0; transition: opacity 0.4s; }
.marca.c-puente { stroke: var(--c-puente); } .marca.c-insuficiente { stroke: var(--c-insuficiente); } .marca.c-exceso { stroke: var(--c-exceso); stroke-dasharray: 10 5; }
.barrido { fill: var(--marca); opacity: 0; }

/* Separación de capas por paso (translateZ en px) */
.escenario[data-paso] .capa { opacity: 0; }
.proceso-escenario[data-paso="0"] .capa:not(.c-sol) { opacity: 1; }
.proceso-escenario[data-paso="0"] .c-cob { transform: translateZ(calc(2px * var(--k))); } .proceso-escenario[data-paso="0"] .c-mas { transform: translateZ(calc(4px * var(--k))); }
.proceso-escenario[data-paso="0"] .c-smd { transform: translateZ(calc(8px * var(--k))); } .proceso-escenario[data-paso="0"] .c-tht { transform: translateZ(calc(14px * var(--k))); }

.proceso-escenario[data-paso="1"] .c-sus, .proceso-escenario[data-paso="1"] .c-cob, .proceso-escenario[data-paso="1"] .c-mas { opacity: 1; }
.proceso-escenario[data-paso="1"] .c-cob { transform: translateZ(calc(55px * var(--k))); } .proceso-escenario[data-paso="1"] .c-mas { transform: translateZ(calc(110px * var(--k))); }
.proceso-escenario[data-paso="1"] .c-smd, .proceso-escenario[data-paso="1"] .c-tht { transform: translateZ(calc(220px * var(--k))); }

.proceso-escenario[data-paso="2"] .c-sus, .proceso-escenario[data-paso="2"] .c-cob, .proceso-escenario[data-paso="2"] .c-mas, .proceso-escenario[data-paso="2"] .c-smd { opacity: 1; }
.proceso-escenario[data-paso="2"] .c-cob { transform: translateZ(calc(25px * var(--k))); } .proceso-escenario[data-paso="2"] .c-mas { transform: translateZ(calc(50px * var(--k))); }
.proceso-escenario[data-paso="2"] .c-smd { transform: translateZ(calc(95px * var(--k))); } .proceso-escenario[data-paso="2"] .c-tht { transform: translateZ(calc(220px * var(--k))); }

.proceso-escenario[data-paso="3"] .capa:not(.c-sol) { opacity: 1; }
.proceso-escenario[data-paso="3"] .c-cob { transform: translateZ(calc(12px * var(--k))); } .proceso-escenario[data-paso="3"] .c-mas { transform: translateZ(calc(24px * var(--k))); }
.proceso-escenario[data-paso="3"] .c-smd { transform: translateZ(calc(36px * var(--k))); } .proceso-escenario[data-paso="3"] .c-tht { transform: translateZ(calc(100px * var(--k))); }

.proceso-escenario[data-paso="4"] .capa { opacity: 1; }
.proceso-escenario[data-paso="4"] .c-cob { transform: translateZ(calc(4px * var(--k))); } .proceso-escenario[data-paso="4"] .c-mas { transform: translateZ(calc(8px * var(--k))); }
.proceso-escenario[data-paso="4"] .c-smd { transform: translateZ(calc(12px * var(--k))); } .proceso-escenario[data-paso="4"] .c-tht { transform: translateZ(calc(22px * var(--k))); }
.proceso-escenario[data-paso="4"] .c-sol { transform: translateZ(calc(-110px * var(--k))); }

.proceso-escenario[data-paso="5"] .c-sol { opacity: 1; transform: translateZ(calc(-30px * var(--k))) scale(1.28); }
.proceso-escenario[data-paso="5"] .capa:not(.c-sol) { opacity: 0.07; transform: translateZ(calc(140px * var(--k))); }
.proceso-escenario[data-paso="5"] .marca { opacity: 1; }
.proceso-escenario[data-paso="5"] .marca.c-insuficiente { transition-delay: 0.5s; } .proceso-escenario[data-paso="5"] .marca.c-exceso { transition-delay: 1s; }
.proceso-escenario[data-paso="5"] .barrido { opacity: 0.55; animation: barrer 2.4s ease-in-out infinite; }
@keyframes barrer { 0% { transform: translateY(0); } 50% { transform: translateY(378px); } 100% { transform: translateY(0); } }

.proceso-escenario[data-paso="6"] .capa:not(.c-sol) { opacity: 1; }
.proceso-escenario[data-paso="6"] .c-cob { transform: translateZ(calc(2px * var(--k))); } .proceso-escenario[data-paso="6"] .c-mas { transform: translateZ(calc(4px * var(--k))); }
.proceso-escenario[data-paso="6"] .c-smd { transform: translateZ(calc(8px * var(--k))); } .proceso-escenario[data-paso="6"] .c-tht { transform: translateZ(calc(14px * var(--k))); }

/* Leyenda de capas y barra de proceso */
.capas-leyenda { list-style: none; margin: var(--e3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--e4); font-size: 13.5px; color: var(--gris); }
.capas-leyenda li { display: flex; align-items: center; gap: var(--e2); opacity: 0.35; transition: opacity 0.4s; }
.capas-leyenda i { width: 12px; height: 12px; border-radius: 2px; flex: none; }
.l-tht i { background: #2d4f8f; } .l-smd i { background: #24222a; } .l-mas i { background: #3d8a4c; }
.l-cob i { background: #c98b3c; } .l-sus i { background: #1f4a2a; } .l-sol i { background: #c9cdd0; border: 1px solid #9aa1a6; }
.proceso-escenario[data-paso="0"] .capas-leyenda li:not(.l-sol), .proceso-escenario[data-paso="6"] .capas-leyenda li:not(.l-sol),
.proceso-escenario[data-paso="1"] :is(.l-sus, .l-cob, .l-mas), .proceso-escenario[data-paso="2"] .l-smd,
.proceso-escenario[data-paso="3"] .l-tht, .proceso-escenario[data-paso="4"] .l-sol, .proceso-escenario[data-paso="5"] .l-sol { opacity: 1; color: var(--tinta); }

.proceso-barra { list-style: none; margin: var(--e4) 0 0; padding: var(--e3) 0 0; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--e1); }
.proceso-barra li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--gris); text-align: center; position: relative; }
.proceso-barra .icono { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.proceso-barra li.nuestro { color: var(--marca); font-weight: 700; }
.proceso-barra li.nuestro::after { content: "aquí"; position: absolute; top: -19px; font-size: 12px; font-weight: 700; color: var(--marca); }
.proceso-escenario[data-paso="1"] .proceso-barra li[data-n="1"], .proceso-escenario[data-paso="2"] .proceso-barra li[data-n="2"],
.proceso-escenario[data-paso="3"] .proceso-barra li[data-n="3"], .proceso-escenario[data-paso="4"] .proceso-barra li[data-n="4"],
.proceso-escenario[data-paso="6"] .proceso-barra li[data-n="6"] { color: var(--tinta); font-weight: 700; }
.proceso-escenario[data-paso="5"] .proceso-barra li[data-n="5"] .icono { stroke-width: 2.4; }
.iconos-defs { position: absolute; }

/* Cortes THT y SMD */
.corte { width: 100%; max-width: 360px; margin-top: var(--e4); }
.corte-tarjeta { fill: #2f6b3c; } .corte-cobre { fill: #ddb04a; } .corte-componente { fill: #24222a; }
.corte-hueco { fill: #ddb04a; } .corte-patilla { stroke: #9aa1a6; stroke-width: 4; } .corte-soldadura { fill: #c9cdd0; stroke: #8b9296; }
.corte-t { font: 12px var(--fuente); fill: var(--tinta-2); }

@media (max-width: 860px) {
  .proceso-grid { grid-template-columns: 1fr; gap: 0; }
  .proceso-escenario { order: 0; top: 64px; height: 56vh; z-index: 2; background: var(--blanco); border-bottom: 1px solid var(--linea); padding-bottom: var(--e3); }
  .escena { padding: var(--e4) 0 var(--e5); }
  .tarjeta3d { --k: 0.5; width: min(200px, 50vw, 26vh); }
  .capas-leyenda { display: none; }
  .proceso-barra { margin-top: var(--e3); padding-top: var(--e5); background: var(--blanco); position: relative; z-index: 1; }
  .proceso-barra span { font-size: 10.5px; }
  .paso-texto { min-height: 62vh; }
}
@media (prefers-reduced-motion: reduce) {
  .capa, .marca, .paso-texto, .capas-leyenda li { transition: none; }
  .barrido { animation: none !important; }
}

/* Página del proyecto v2: la estación en uso (L4) */
.uso { list-style: none; margin: var(--e6) 0 var(--e3); padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e6) var(--e5); }
.uso li { display: flex; flex-direction: column; gap: var(--e1); font-size: 15px; color: var(--tinta-2); }
.uso b { color: var(--tinta); font-size: 16px; margin-top: var(--e3); }
/* Marco de teléfono dibujado en CSS (borde metálico, bisel, isla y botones), sin imágenes de terceros.
   La pantalla toma la proporción de la captura: nada se recorta. */
.telefono { --borde: #b7abc6; position: relative; margin: 0 6px; padding: 3.4%; border-radius: 16% / 8%;
  background: linear-gradient(135deg, #d8cfe3, var(--borde) 45%, #9e91b0); box-shadow: inset 0 0 0 1px rgba(43, 29, 48, 0.25); }
.telefono::before, .telefono::after { content: ""; position: absolute; width: 3px; background: var(--borde); border-radius: 2px; }
.telefono::before { left: -3px; top: 20%; height: 9%; }
.telefono::after { right: -3px; top: 26%; height: 12%; }
.pantalla { position: relative; background: #0b0b0d; padding: 3%; border-radius: 13% / 6.6%; }
.pantalla::before { content: ""; position: absolute; top: 3.2%; left: 50%; transform: translateX(-50%); width: 30%; height: 2.9%;
  background: #0b0b0d; border-radius: 999px; z-index: 1; }
.pantalla img { width: 100%; height: auto; display: block; border-radius: 11% / 5.2%; background: var(--blanco);
  padding: 13% 3% 4%; }
@media (max-width: 1100px) { .uso { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1101px) and (max-width: 1360px) { .uso { gap: var(--e6) var(--e4); } }
@media (max-width: 860px) {
  .uso { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--e6); padding: 0 var(--e2) var(--e3); scroll-padding-left: var(--e2); }
  .uso li { flex: 0 0 64%; scroll-snap-align: start; }
}

/* Inspección una por una (como el Reto) */
.union-foto canvas { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; border: 1px solid var(--linea); background: var(--banda); }
.union-foto .nota { margin: var(--e1) 0 0; }
.trabajo-una-a-una .panel h3 { margin-top: var(--e4); }
.progreso i.actual { outline: 2px solid var(--marca); outline-offset: 1px; }
.rotulo-tarjeta { margin: 0 0 var(--e2); }
.tarjeta-completa .acciones { margin-top: var(--e2); }
#revision[hidden], .trabajo-una-a-una .enlace[hidden] { display: none; }
@media (max-width: 860px) {
  .trabajo-una-a-una .panel { order: -1; border-top: 0; padding-top: 0; }
  .trabajo-una-a-una .tarjeta-completa { border-top: 1px solid var(--linea); padding-top: var(--e4); }
  .union-foto canvas { max-width: none; }
}