/* ═══════════════════════════════════════════════════════════════════════
   DOBLE V — páginas de portafolio (obras, automatizaciones, maquetas)

   Tres páginas que muestran trabajo real, así que la hoja se ocupa sobre
   todo de dos cosas: que una lista larga se lea sin cansar, y que el estado
   de cada pieza (en producción / construida / entregable) se vea de lejos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Aviso de confidencialidad ─────────────────────────────────────────── */
.aviso-privado {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--crema-borde); border-left: 2px solid var(--verde);
  background: rgba(63, 107, 74, .05);
  padding: 22px 26px; border-radius: var(--radio); margin-top: 34px;
}
.oscuro .aviso-privado, .oscuro-2 .aviso-privado {
  border-color: var(--panel-borde); border-left-color: var(--verde-vivo);
  background: rgba(127, 187, 140, .05);
}
.aviso-privado svg { width: 20px; height: 20px; flex: none; color: var(--verde); margin-top: 2px; }
.oscuro .aviso-privado svg, .oscuro-2 .aviso-privado svg { color: var(--verde-vivo); }
.aviso-privado p { font-size: 14.5px; color: var(--tinta-media); line-height: 1.65; }
.oscuro .aviso-privado p, .oscuro-2 .aviso-privado p { color: var(--tinta-suave); }
.aviso-privado b { color: var(--tinta-oscura); font-weight: 500; }
.oscuro .aviso-privado b, .oscuro-2 .aviso-privado b { color: var(--tinta-clara); }

/* ── Estados ───────────────────────────────────────────────────────────── */
.estado {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .13em; padding: 5px 11px; border-radius: 2px;
  border: 1px solid currentColor; white-space: nowrap;
}
.estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.estado-vivo { color: #4e8a5d; }
.oscuro .estado-vivo, .oscuro-2 .estado-vivo { color: var(--verde-vivo); }
.estado-listo { color: #8a7440; }
.estado-entrega { color: #5c665e; }
.oscuro .estado-entrega, .oscuro-2 .estado-entrega { color: var(--tinta-suave); }

/* ── Lista de obras ────────────────────────────────────────────────────── */
.obras { display: grid; gap: 0; margin-top: 34px; border-top: 1px solid var(--crema-borde); }
.oscuro .obras, .oscuro-2 .obras { border-top-color: var(--panel-borde); }

.obra {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 22px;
  padding: 28px 6px; border-bottom: 1px solid var(--crema-borde);
  align-items: start; transition: background .18s ease;
}
.oscuro .obra, .oscuro-2 .obra { border-bottom-color: var(--panel-borde); }
.obra:hover { background: rgba(63, 107, 74, .035); }
.oscuro .obra:hover, .oscuro-2 .obra:hover { background: rgba(127, 187, 140, .04); }

.obra-num {
  font-family: var(--serif); font-size: 26px; line-height: 1;
  color: var(--verde); opacity: .5; padding-top: 2px;
}
.oscuro .obra-num, .oscuro-2 .obra-num { color: var(--verde-vivo); }
.obra h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.25; }
.obra p { font-size: 14.5px; color: var(--tinta-media); margin-top: 9px; max-width: 74ch; line-height: 1.68; }
.oscuro .obra p, .oscuro-2 .obra p { color: var(--tinta-suave); }
.obra-etiquetas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.obra-etiqueta {
  font-size: 11px; letter-spacing: .06em; padding: 3px 9px;
  border: 1px solid var(--crema-borde); border-radius: 2px; color: var(--tinta-media);
}
.oscuro .obra-etiqueta, .oscuro-2 .obra-etiqueta { border-color: var(--panel-borde); color: var(--tinta-suave); }
.obra-demo {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 13px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.oscuro .obra-demo, .oscuro-2 .obra-demo { color: var(--verde-vivo); }
.obra-demo svg { width: 14px; height: 14px; }

@media (max-width: 780px) {
  .obra { grid-template-columns: 40px 1fr; }
  .obra-num { font-size: 20px; }
  .obra > .estado { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* ── Procesos automáticos ──────────────────────────────────────────────── */
.procesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1px;
  background: var(--panel-borde); border: 1px solid var(--panel-borde); margin-top: 34px; }
.claro .procesos, .claro-2 .procesos { background: var(--crema-borde); border-color: var(--crema-borde); }
.proceso { background: var(--noche); padding: 26px 24px; }
.claro .proceso, .claro-2 .proceso { background: var(--crema); }
.proceso-ritmo {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--verde-vivo); display: flex; align-items: center; gap: 8px;
}
.claro .proceso-ritmo, .claro-2 .proceso-ritmo { color: var(--verde); }
.proceso-ritmo svg { width: 13px; height: 13px; }
.proceso h3 { font-family: var(--serif); font-size: 18.5px; font-weight: 500; margin-top: 13px; line-height: 1.3; }
.proceso p { font-size: 14px; color: var(--tinta-suave); margin-top: 9px; line-height: 1.65; }
.claro .proceso p, .claro-2 .proceso p { color: var(--tinta-media); }

/* ── Catálogo de lo que podemos construir ──────────────────────────────── */
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-top: 30px; }
.item-cat {
  border: 1px solid var(--crema-borde); border-radius: var(--radio);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 8px;
}
.oscuro .item-cat, .oscuro-2 .item-cat { border-color: var(--panel-borde); }
.item-cat b { font-size: 15px; font-weight: 500; line-height: 1.35; }
.item-cat span { font-size: 13.5px; color: var(--tinta-media); line-height: 1.6; }
.oscuro .item-cat span, .oscuro-2 .item-cat span { color: var(--tinta-suave); }
.item-cat .marca-motor {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--verde); margin-top: 2px;
}
.oscuro .item-cat .marca-motor, .oscuro-2 .item-cat .marca-motor { color: var(--verde-vivo); }

/* ── Galería de maquetas ───────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.filtro {
  font-size: 12.5px; padding: 8px 15px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--crema-borde); background: none; color: var(--tinta-media);
  font-family: var(--sans); transition: all .16s ease;
}
.filtro:hover { border-color: var(--verde); color: var(--verde); }
.filtro[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 34px; }
.maqueta {
  border: 1px solid var(--crema-borde); border-radius: var(--radio); overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.maqueta:hover { transform: translateY(-3px); border-color: var(--verde);
  box-shadow: 0 12px 30px rgba(22, 33, 27, .1); }
.maqueta-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--crema-2); }
.maqueta-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform .5s ease; }
.maqueta:hover .maqueta-img img { transform: scale(1.035); }
.maqueta-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.maqueta-rubro { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
.maqueta h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--tinta-oscura); }
.maqueta p { font-size: 13px; color: var(--tinta-media); line-height: 1.55; flex: 1; }
.maqueta-ver {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--verde);
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-weight: 500;
}
.maqueta-ver svg { width: 13px; height: 13px; }
.galeria-vacia { padding: 50px 0; text-align: center; color: var(--tinta-media); font-size: 15px; }

/* ── Resumen de familias ───────────────────────────────────────────────── */
.familias { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1px;
  background: var(--crema-borde); border: 1px solid var(--crema-borde); margin-top: 30px; }
.familia { background: var(--crema); padding: 20px; }
.familia b { display: block; font-family: var(--serif); font-size: 25px; font-weight: 500; color: var(--verde); }
.familia span { display: block; font-size: 13px; color: var(--tinta-media); margin-top: 5px; }

/* ═══════════════════════════════════════════════════════════════════════
   DEMOS — lo que el dueño ve cuando el sistema hace su trabajo

   Cuatro piezas dibujadas en CSS, sin capturas reales: un mensaje de chat con
   botones, una alerta de teléfono, una pantalla de escritorio y un documento.
   Ninguna muestra datos de nadie; van con la marca "datos de ejemplo" a la
   vista para que no quede duda.
   ═══════════════════════════════════════════════════════════════════════ */
.mock {
  margin-top: 16px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--panel-borde); background: #0b1310;
  font-family: var(--sans); max-width: 430px;
}
.claro .mock, .claro-2 .mock { border-color: #cdd4ce; }
.mock-pie {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-media); margin-top: 7px; opacity: .8;
}
.oscuro .mock-pie, .oscuro-2 .mock-pie { color: var(--tinta-suave); }

/* ── Mensaje de chat con botones ───────────────────────────────────────── */
.mock-chat { background: #0e1a15; }
.mock-chat-barra {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}
.mock-chat-barra i {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--verde); color: #fff; font-style: normal;
  font-size: 10px; font-weight: 600; display: grid; place-items: center;
}
.mock-chat-barra b { font-size: 12.5px; color: #e9e7df; font-weight: 500; }
.mock-chat-barra span { margin-left: auto; font-size: 10.5px; color: #7d8a82; }

.mock-burbuja { padding: 13px 14px 14px; }
.mock-burbuja p { font-size: 13px; line-height: 1.55; color: #d8ded9; }
.mock-burbuja p b { color: #fff; font-weight: 600; }
.mock-burbuja p + p { margin-top: 7px; }
.mock-burbuja .cifra-linea {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  color: var(--verde-vivo); margin-top: 8px; display: block;
}
.mock-botones { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.mock-botones span {
  font-size: 11px; font-weight: 500; padding: 7px 12px; border-radius: 4px;
  background: var(--verde); color: #fff; letter-spacing: .02em;
}
.mock-botones span.fantasma { background: rgba(255,255,255,.07); color: #b9c2bb; }

/* ── Alerta de teléfono ────────────────────────────────────────────────── */
.mock-push { background: #131b17; padding: 12px; }
.mock-push-caja {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 11px;
  background: rgba(255,255,255,.07); border-radius: 12px; padding: 11px 12px;
  backdrop-filter: blur(6px);
}
.mock-push-caja i {
  width: 34px; height: 34px; border-radius: 8px; background: var(--verde);
  color: #fff; font-style: normal; font-size: 12px; font-weight: 700;
  display: grid; place-items: center; letter-spacing: .02em;
}
.mock-push-caja b { font-size: 12.5px; color: #fff; font-weight: 600; display: block; }
.mock-push-caja p { font-size: 12px; color: #c3cbc5; line-height: 1.45; margin-top: 2px; }
.mock-push-caja em { font-style: normal; font-size: 10.5px; color: #8b968f; }

/* ── Pantalla de escritorio ────────────────────────────────────────────── */
.mock-pantalla { background: #0d1512; }
.mock-pantalla-barra {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03);
}
.mock-pantalla-barra i { width: 8px; height: 8px; border-radius: 50%; background: #2d3b33; }
.mock-pantalla-barra span { margin-left: 8px; font-size: 11px; color: #8b968f; }
.mock-pantalla-cuerpo { padding: 13px 14px 15px; }

.mock-metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-metricas div {
  border: 1px solid rgba(255,255,255,.07); border-radius: 4px; padding: 9px 10px;
}
.mock-metricas span { font-size: 9.5px; color: #8b968f; display: block; letter-spacing: .04em; }
.mock-metricas b {
  font-size: 15px; color: #e9e7df; font-weight: 600; display: block; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.mock-metricas i { font-style: normal; font-size: 10px; color: var(--verde-vivo); }

.mock-filas { margin-top: 11px; display: grid; gap: 1px; background: rgba(255,255,255,.06); }
.mock-filas div {
  display: flex; justify-content: space-between; gap: 12px;
  background: #0d1512; padding: 8px 10px; font-size: 12px; color: #c3cbc5;
}
.mock-filas div b { color: #e9e7df; font-weight: 500; font-variant-numeric: tabular-nums; }
.mock-filas div span.ok { color: var(--verde-vivo); font-size: 11px; }
.mock-filas div span.pend { color: #b99a5e; font-size: 11px; }

/* ── Documento / informe ───────────────────────────────────────────────── */
.mock-doc { background: #f7f6f1; border-color: #d8d4c8; }
.mock-doc-cab { padding: 13px 15px 11px; border-bottom: 1px solid #e4e0d4; }
.mock-doc-cab span {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #6d7a70;
}
.mock-doc-cab b {
  display: block; font-family: var(--serif); font-size: 16px;
  color: #16211b; font-weight: 500; margin-top: 4px;
}
.mock-doc ul { list-style: none; padding: 12px 15px 14px; margin: 0; display: grid; gap: 7px; }
.mock-doc li {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 12.5px; color: #4a544c;
}
.mock-doc li b { color: #16211b; font-weight: 600; font-variant-numeric: tabular-nums; }
.mock-doc li.critico b { color: #97402a; }

/* ── Colocación dentro de las tarjetas ─────────────────────────────────── */
.proceso .mock { max-width: none; }
.obra .mock { max-width: 430px; }
@media (max-width: 780px) { .obra .mock, .proceso .mock { max-width: none; } }

/* ── Tira de demos: dos o tres piezas en fila ──────────────────────────── */
.tira-demos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px; align-items: start; margin-top: 38px;
}
.tira-demos .mock { max-width: none; margin-top: 0; }