/* ═══════════════════════════════════════════════════════════════════════
   DOBLE V — páginas de servicios

   Complemento de assets/estilos.css para «Qué construimos» y para el detalle
   «Sistemas de gestión a medida». Se carga DESPUÉS del sistema base y solo
   agrega piezas que ahí no existen: nada de acá reemplaza al sistema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Paneles sobre secciones claras ────────────────────────────────────
   El panel es una maqueta de pantalla: por dentro siempre es oscuro, así que
   la tinta de la sección crema no sirve adentro. */
.claro .panel, .claro-2 .panel { color: var(--tinta-clara); }
.claro .panel .texto, .claro-2 .panel .texto { color: var(--tinta-suave); }
.claro .panel .etiqueta, .claro-2 .panel .etiqueta { color: var(--verde-vivo); }

/* El check sobre crema necesita el verde sobrio para leerse. */
.claro .lista-check svg, .claro-2 .lista-check svg { color: var(--verde); }

/* Sin esto, un titular largo puede empujar la columna del encabezado. */
.encabezado-grid > * { min-width: 0; }

/* ── Filas de servicio a sección completa ──────────────────────────── */
.fila-bloque .fila-servicio { padding: 76px 0; }
@media (max-width: 700px) { .fila-bloque .fila-servicio { padding: 54px 0; } }
.oscuro .fila-servicio, .oscuro-2 .fila-servicio { border-color: var(--panel-borde); }
.oscuro .fila-num, .oscuro-2 .fila-num { color: var(--tinta-suave); }
.oscuro .fila-sub, .oscuro-2 .fila-sub { color: var(--verde-vivo); }
.fila-enlace {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--verde); border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.oscuro .fila-enlace, .oscuro-2 .fila-enlace { color: var(--verde-vivo); }
.fila-enlace:hover { border-bottom-color: currentColor; }
.fila-enlace svg { width: 15px; height: 15px; flex: none; }

/* ── Anotaciones de plano en dos columnas ──────────────────────────── */
.anotaciones-fila {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 4px 18px; margin: 0 0 14px;
}
.anotaciones-fila .anotacion { margin: 0; }
.anotaciones-fila-pie { margin: 14px 0 0; }

/* ── Lista de frentes dentro del panel ─────────────────────────────── */
.frentes { display: grid; }
.frente {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border-top: 1px solid var(--panel-borde);
}
.frente:first-child { border-top: 0; padding-top: 2px; }
.frente svg { width: 21px; height: 21px; flex: none; color: var(--verde-vivo); }
.frente b { font-weight: 400; font-size: 13.5px; color: var(--tinta-clara); }
.frente i {
  font-style: normal; margin-left: auto; font-size: 10px;
  letter-spacing: .16em; color: var(--tinta-suave); opacity: .7;
}

/* ── Maqueta de tienda (fila 03) ───────────────────────────────────── */
.tienda-barra {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  font-size: 10.5px; color: var(--tinta-suave);
  border-bottom: 1px solid var(--panel-borde); padding-bottom: 12px;
}
.tienda-logo { font-family: var(--serif); font-size: 13px; letter-spacing: .14em; color: var(--tinta-clara); }
.tienda-carro { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.tienda-carro svg { width: 14px; height: 14px; color: var(--verde-vivo); }
.tienda-ficha { display: grid; grid-template-columns: 104px 1fr; gap: 18px; margin-top: 18px; align-items: center; }
.tienda-foto {
  aspect-ratio: 1 / 1; border: 1px solid var(--panel-borde); border-radius: 3px;
  background-image: linear-gradient(135deg, rgba(127,187,140,.12), rgba(127,187,140,0));
  display: flex; align-items: center; justify-content: center; color: var(--verde-vivo);
}
.tienda-foto svg { width: 30px; height: 30px; }
.tienda-ficha h4 { font-family: var(--serif); font-size: 17px; font-weight: 400; }
.tienda-precio { font-family: var(--serif); font-size: 25px; margin-top: 8px; }
.tienda-precio small { font-family: var(--sans); font-size: 10px; color: var(--tinta-suave); margin-left: 8px; letter-spacing: .06em; }
.tienda-boton {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  border: 1px solid var(--verde); background: var(--verde-tenue); color: var(--tinta-clara);
  border-radius: 2px; padding: 8px 15px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.tienda-boton svg { width: 13px; height: 13px; }
@media (max-width: 400px) { .tienda-ficha { grid-template-columns: 1fr; } }

/* ── Puente entre lo físico y lo digital (fila 04) ─────────────────── */
.puente { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.puente-col { border: 1px solid var(--panel-borde); border-radius: 3px; padding: 13px; }
.puente-col h4 {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .15em;
  color: var(--verde-vivo); font-weight: 500; margin-bottom: 12px;
}
.puente-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 11px; color: var(--tinta-suave); }
.puente-col li { display: flex; gap: 8px; align-items: flex-start; }
.puente-col svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.puente-centro { background: rgba(127,187,140,.05); border-color: var(--verde-tenue); }
@media (max-width: 560px) { .puente { grid-template-columns: 1fr; } }

/* ── Diagrama radial: la marca al centro, los cinco frentes alrededor ──
   En pantallas chicas el círculo no cabe sin apretar el texto, así que se
   convierte en una lista y las líneas se ocultan. */
.radial { position: relative; width: min(560px, 100%); margin: 0 auto; aspect-ratio: 1 / 1; }
.radial-lineas { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--verde); opacity: .55; }
.radial-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.radial-marca {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 138px; height: 138px; border-radius: 50%; text-align: center;
  border: 1px solid var(--verde); background: var(--crema-2);
}
.radial-marca b { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: .14em; }
.radial-marca span { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-media); }
.radial-nodo {
  position: absolute; transform: translate(-50%, -50%); width: 30%;
  text-align: center; background: var(--crema-2); padding: 10px 6px;
}
.radial-nodo svg { width: 24px; height: 24px; color: var(--verde); margin: 0 auto 9px; }
.radial-nodo b { display: block; font-weight: 400; font-size: 12.5px; line-height: 1.35; }
.radial-nodo em {
  display: block; font-style: normal; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinta-media); margin-top: 7px;
}
.radial-n1 { left: 50%; top: 12%; }
.radial-n2 { left: 85%; top: 38%; }
.radial-n3 { left: 72%; top: 81%; }
.radial-n4 { left: 28%; top: 81%; }
.radial-n5 { left: 15%; top: 38%; }
@media (max-width: 700px) {
  .radial { aspect-ratio: auto; display: grid; gap: 12px; width: 100%; }
  .radial-lineas { display: none; }
  .radial-centro, .radial-nodo { position: static; transform: none; width: auto; text-align: left; }
  .radial-nodo { display: flex; align-items: center; gap: 13px; border: 1px solid var(--crema-borde); padding: 13px 15px; }
  .radial-nodo svg { margin: 0; }
  .radial-nodo em { margin: 0 0 0 auto; text-align: right; }
  .radial-marca {
    width: auto; height: auto; border-radius: 3px; padding: 16px 15px;
    flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left;
  }
}

/* ── Migas de pan ──────────────────────────────────────────────────── */
.encabezado-migas { padding-top: 30px; }
.migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 12px; color: var(--tinta-suave); margin-bottom: 44px;
}
.migas a:hover { color: var(--verde-vivo); }
.migas i { font-style: normal; opacity: .4; }
.migas b { font-weight: 400; color: var(--tinta-clara); }
@media (max-width: 980px) { .migas { margin-bottom: 32px; } }

/* ── Micro-sellos bajo los botones ─────────────────────────────────── */
.sellos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.sello {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--panel-borde); border-radius: 2px;
  padding: 7px 13px; font-size: 11.5px; color: var(--tinta-suave);
}
.sello svg { width: 14px; height: 14px; flex: none; color: var(--verde-vivo); }

/* ── Rubros que atendemos ──────────────────────────────────────────── */
.franja-rubros { padding: 52px 0; }
.rubros { display: flex; flex-wrap: wrap; gap: 10px; }
.rubro {
  font-size: 12.5px; border: 1px solid var(--crema-borde); border-radius: 2px;
  padding: 8px 14px; color: var(--tinta-media);
}

/* ── Módulos habituales ────────────────────────────────────────────── */
.modulos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 34px; }
.modulo { display: flex; gap: 14px; align-items: flex-start; }
.modulo svg { width: 24px; height: 24px; flex: none; color: var(--verde-vivo); margin-top: 2px; }
.modulo h3 { font-family: var(--sans); font-size: 14.5px; font-weight: 500; }
.modulo p { font-size: 12.5px; color: var(--tinta-suave); margin-top: 7px; }
@media (max-width: 900px) { .modulos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .modulos { grid-template-columns: 1fr; } }

/* ── Actividad reciente del panel ──────────────────────────────────── */
.actividad { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.actividad li { display: flex; align-items: flex-start; gap: 10px; font-size: 11.5px; color: var(--tinta-suave); }
.actividad em { font-style: normal; color: var(--tinta-clara); }
.actividad time { margin-left: auto; font-size: 10px; opacity: .6; white-space: nowrap; }
.pulso { width: 6px; height: 6px; border-radius: 50%; background: var(--verde-vivo); flex: none; margin-top: 6px; }
.pulso-tenue { background: var(--verde); }